html, body {
  height: 100%;
  min-height: 100vh;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* Define the font-face */
  @font-face {
    font-family: 'Heebo';
    src: url('/assets/fonts/Heebo-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  /* Use the font in your CSS */
  body {
    font-family: 'Heebo', sans-serif !important;
  }

  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
  }

  .card {
    border-color: #F1F1F4;
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,.03);
    border: 1px solid #F1F1F4;
  }

  .page-header {
    color: #071437;
    font-size: 1.35rem;
    font-weight: 500;
  }

  .required-mark {
    color: red;
    margin-left: 5px;
  }
   

  @media (min-width: 567px) {
    .sm-container {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .sm-container {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .sm-container {
      max-width: 900px;
    }
  }

  @media (min-width: 1200px) {
    .sm-container {
      max-width: 850px;
    }
  }

  @media (min-width: 1400px) {
    .sm-container {
      max-width: 800px;
    }
  }

  #text-error {
    color: rgb(220, 53, 69);
  }

  .error {
    border-bottom: #dc3454 1px solid !important;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* Style the scrollbar track (background) */
  ::-webkit-scrollbar-track {
    background: #f9f9f9;
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #009ef7;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #0175b7;
  }

  .custom-file-upload {
    position: relative;
    overflow: hidden;
  }

  .custom-file-upload input[type="file"] {
    font-size: 100px;
    /* Increase font size to make the input box larger */
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    /* Hide the default input */
  }

  .custom-file-upload label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
  }

  .image-preview-container img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    /* This ensures the image covers the area without distortion */
    border-radius: 5px;
    /* Optional: for rounded corners */
  }

 .modal-image {
  width: 100%;
  height: auto;
}

.custom-file-upload {
  position: relative;
  overflow: hidden;
}

.custom-file-upload input[type="file"] {
  font-size: 100px; /* Increase font size to make the input box larger */
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0; /* Hide the default input */
}

.custom-file-upload label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f1f1f1;
  border-radius: 5px;
  cursor: pointer;
}

.x-symbol{
  cursor: pointer;
}

[dir='rtl'] #clear-date {
  left: 10px !important;
}

[dir='ltr'] #clear-date {
  right: 10px !important;
} 
.hidden-overflow-swal-container .swal2-html-container {
  overflow: hidden !important;
}

/* Custom styles for underlined inputs */
.form-control {
  border: none; /* Removes default border */
  border-bottom: 1px solid #ced4da; /* Default bottom border color */
  border-radius: 0; /* Removes default border radius */
  box-shadow: none; /* Removes Bootstrap's default box-shadow */
}

.form-control:focus {
  border-bottom: 2px solid #007bff; /* Change to desired focus color */
  box-shadow: none; /* Removes Bootstrap's default box-shadow on focus */
  background-color: transparent;
}

/* Optional: adjust the padding to better align with the new border style */
.form-control {
  padding-bottom: calc(0.375rem - 1px); /* Adjusts padding to align with new border thickness */
  background-color: transparent;
}

/* Transition for smooth border color change */
.form-control {
  transition: border-color 0.3s;
}

.form-floating {
  position: relative;
}
.invalid-input{
  border-bottom: #dc3454 1px solid !important;
}
.form-control-solid{
  background-color: #ffffff !important;
}
.select2-container--default .select2-selection--multiple{
  border: none !important;
  border-bottom: 1px solid #ced4da !important;
}

td.wrap {
  white-space: normal;
}

.more-link, .less-link{
  font-weight: 800;
}

span.select2-selection.select2-selection--single{
  border:none;
  border-bottom: 1px solid #ced4da !important;
}

.required-mark {
  color: red;
  margin-left: 5px;
}

.password-toggle {
  position: relative;
  float: left;
  /* Adjust this based on your design */
  top: -30px;
  left: 10px;
}

[dir="ltr"] .password-toggle {
  float: right;
  left: auto;
  right: 10px;
}

.field-icon.eye-slash {
  display: none;
}

.bg-light{
  background-color: rgb(254 254 254) !important;
}

.glowing-primary-button{
  box-shadow: 0 3px 10px 0 rgb(70 116 184 / 50%);
}

.btn-success-custom {
  background-color: #50cd89 !important;
  color: #ffffff !important;
}

.btn-success-custom:hover {
  background-color: #3dcc7d !important;
  color: #ffffff !important;
}

.btn-success-no-bg {
  color: #000000 !important;
}

.btn-success-no-bg:hover {
  color: #00ca5b !important;
}

.glowing-success-button{
  box-shadow: 0 3px 10px 0 rgba(77, 200, 73, 0.5);
}

.form-floating>.form-control:not(:placeholder-shown)~label::after{
  background-color: transparent;
}

.btn-primary-light{
  background-color: #1B74FF !important;
  border-color: #1B74FF !important;
  color: #FFFFFF !important;
}

.btn-primary-light:hover{
  background-color: #056EE9 !important;
  border-color: #056EE9 !important;
  color: #FFFFFF !important;
}

.btn-primary-light:focus{
  background-color: #056EE9 !important;
  border-color: #056EE9 !important;
  color: #FFFFFF !important;
}

.select2-container .select2-dropdown{
  border: 0;
  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
  border-radius: .475rem;
  padding: 1rem 0;
  background-color: #ffffff;
}

.select2-container.select2-dropdown .select2-search{
  padding: .5rem 1.25rem;
  margin: 0 0 .5rem 0;
}

/* Additional styling for the select2 search input */
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #ced4da; /* Adjust border color */
  font-size: 14px;
}

/* Remove the black inside border on focus */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  box-shadow: none;
  border-color: #ced4da; /* Optional: You can set a different border color */
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color: #F9F9F9 !important;
  color: #1B84FF !important;
  transition: color .2s ease;
  position: relative;
  margin: 2px;
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background-color: #F9F9F9 !important;
}

.select2-selection__choice {
  background-color: #E9F3FF !important;
  border-color: #E9F3FF !important;
  border-radius: 0.475rem !important;
  color: #1B84FF !important;
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background-color: #F9F9F9;
  color: #1B84FF;
  transition: color .2s ease;
  position: relative;
  margin: 2px;
}

/* Style for the selected option in the dropdown */
.form-floating .form-select option:checked {
  background-color: #F9F9F9;
  color: #1B84FF;
  transition: color .2s ease;
  margin: 2px;
  padding: 5px;
}

/* Style for the hovered option in the dropdown */
.form-floating .form-select option:hover {
  background-color: #F9F9F9;
  color: #1B84FF;
  transition: color .2s ease;
  margin: 2px;
  padding: 5px;
}


.light-blue-buttons {
  background-color: #E9F3FF;
  border-color: #E9F3FF;
  border-radius: 0.475rem !important;
  color: #1B84FF;
}

.light-blue-buttons:hover, .light-blue-buttons:focus {
  background-color: #1b84ff;
  border-color: #ffffff;
  color: #ffffff;
}

.btn.light-blue-buttons:checked,
.btn.light-blue-buttons.active,
.btn.light-blue-buttons.show,
.btn.light-blue-buttons:active {
  background-color: #1b84ff;
  color: #ffffff;
  border-color: #1b84ff;
}

.light-secondary-buttons {
  background: #f9f9f9;
  border-color: #f9f9f9;
  border-radius: 0.475rem !important;
  color: #99a1b7;
}

.light-secondary-buttons:hover, .light-secondary-buttons:focus {
  background: #f9f9f9;
  border-color: #f9f9f9;
  color: #1b84ff;
}

.light-secondary-buttons:checked,
.light-secondary-buttons.active,
.light-secondary-buttons.show,
.light-secondary-buttons:active {
  background: #f9f9f9;
  border-color: #f9f9f9;
  color: #1b84ff;
}

/* Custom styles for checkboxes */
.custom-checkbox {
  width: 20px; /* Adjust the size as needed */
  height: 20px;
  background-color: #F1F1F4;
  border-radius: .45em;
  appearance: none; /* Remove default styling */
  cursor: pointer;
  position: relative;
}

.custom-checkbox:checked {
  background-color: #1B84FF;
}

.custom-checkbox:indeterminate {
  background-color: #d3d3d3; /* Gray background for indeterminate state */
}

.custom-checkbox:indeterminate::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 10px;
  height: 2px;
  background-color: white; /* White dash for indeterminate state */
}

.error-full-border {
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  border: #dc3454 1px solid !important;
}

.bg-light-red {
    background-color: #f8d7da; /* Light red */
}

.bg-light-green {
    background-color: #d4edda; /* Light green */
}

.bg-light-yellow {
    background-color: #fff3cd; /* Light yellow */
}

/* Optionally, you can also add some padding, border-radius, or other styles */
.dropdown-item {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}