@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  --Primary-Green: #006661;
  --Secondary-Green: #03AB77;
  --Dark-Green: #00201E;
  --white: #fff;
  --black: #101010;
  --border-color: #e5e5e5;
  --input-adorn-prefix-left: 16px;
  --input-adorn-suffix-right: 16px;
  --input-adorn-currency-padding: 26px;
  --input-adorn-percent-padding: 26px;
  --input-adorn-symbol-color: #888;
  --input-adorn-symbol-size: 14px;
  --input-adorn-symbol-weight: 500;
}

body {
  font-family: "Outfit", sans-serif;
  ;
}

html {
  scroll-behavior: smooth;
}

h1,
.h1 {
  font-size: 56px;
  line-height: 70px;
}

h2,
.h2 {
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.48px;
}

h3,
.h3 {
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.4px;
}

h4,
.h4 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.32px;
}

h5,
.h5 {
  font-size: 24px;
  line-height: 32px;
}

h6,
.h6 {
  font-size: 20px;
  line-height: 28px;
}

.fw-semibold {
  font-weight: 600;
}

.fw-medium {
  font-weight: 500;
}

.fw-regular {
  font-weight: 400;
}

.f-18 {
  font-size: 18px;
  line-height: 26px;
}

.f-16 {
  font-size: 16px;
  line-height: 22px;
}

.f-14 {
  font-size: 14px;
  line-height: 20px;
}

.f-12 {
  font-size: 12px;
  line-height: 16px;
}

.text-white {
  color: var(--white);
}

.text-black {
  color: var(--black) !important;
}

.text-primary {
  color: var(--Primary-Green) !important;
}

.text-secondary {
  color: var(--Secondary-Green) !important;
}

.text-red {
  color: #FE3F34;
}

.text-danger {
  color: #F36D4A !important;
}

.text-s500 {
  color: #03AB77;
}

.text-p100 {
  color: #B2DEDE;
}

.text-grey {
  color: #888;
}

a {
  text-decoration: none;
}

.pb-32 {
  padding-bottom: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.pt-32 {
  padding-top: 32px;
}

.gap-12 {
  gap: 12px;
}

.required-input::placeholder {
  opacity: 0;
}

/* Fake placeholder text */
.required-mark {
  position: absolute;
  left: 27px;
  font-weight: 500;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 14px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.required-mark-phone {
  position: absolute;
  /* Aligns the "Mobile *" pseudo-placeholder right after the intl-tel-input
     "+1" dial code (flag/globe hidden, dial code container ~40-45px wide).
     Previously sat at 60px which left a visible empty gap before the text. */
  left: 48px;
  font-weight: 500;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 14px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.iti {
  width: 100%;
}

.iti input {
  width: 100%;
}

/* intl-tel-input — no country flag/globe beside the mobile field (dial code + input stay) */
.iti .iti__selected-flag .iti__flag,
.iti .iti__selected-flag .iti__globe {
  display: none !important;
}

/* Add red star */
.required-mark::after,
.required-mark-phone::after {
  content: " *";
  color: #FE3F34;
}

.required-mark.not-required::after,
.required-mark-phone.not-required::after {
  content: "";
}

/* Hide when typing or focus (placeholder-shown is only for input/textarea) */
.required-input:focus~.required-mark,
input.required-input:not(:placeholder-shown)~.required-mark,
textarea.required-input:not(:placeholder-shown)~.required-mark {
  opacity: 0;
}

/*
 * Fallback CSS: hide floating label when a required-mark placeholder is
 * present and the field is empty + not focused.
 * The JS addAsterisk() function sets an inline opacity style that takes
 * precedence; this rule is a belt-and-suspenders fallback for browsers
 * that support :has() but where the JS hasn't run yet.
 */
.custom-floating:has(.required-mark):has(input:placeholder-shown:not(:focus)) label,
.custom-floating:has(.required-mark):has(textarea:placeholder-shown:not(:focus)) label {
  opacity: 0;
}

/* Parent :has() matches required-mark-phone and required-mark so hiding does not depend on sibling order (and covers autofill where :placeholder-shown can lag). */
.custom-floating:has(.required-input:focus) .required-mark,
.custom-floating:has(input.required-input:not(:placeholder-shown)) .required-mark,
.custom-floating:has(textarea.required-input:not(:placeholder-shown)) .required-mark,
.custom-floating:has(.required-input:-webkit-autofill) .required-mark,
.custom-floating:has(.required-input:autofill) .required-mark {
  opacity: 0;
}

/* Hide the mark if the container HAS a focused input or an input with text */
.custom-floating:has(.required-input:focus) .required-mark-phone,
.custom-floating:has(input.required-input:not(:placeholder-shown)) .required-mark-phone,
.custom-floating:has(textarea.required-input:not(:placeholder-shown)) .required-mark-phone,
.custom-floating:has(.required-input:-webkit-autofill) .required-mark-phone,
.custom-floating:has(.required-input:autofill) .required-mark-phone {
  opacity: 0;
}

/* Required native selects (often no .required-input class) — hide fake placeholder when a value is chosen */
.custom-floating:has(select:required:valid) .required-mark,
.custom-floating:has(select:required:valid) .required-mark-phone {
  opacity: 0;
}

textarea,
textarea.form-control,
textarea.form-control-bg,
textarea.form-control-user,
.custom-floating textarea,
.custom-input-group textarea,
form textarea {
  /* Do not set height (especially not height: auto !important) — it blocks drag-resize */
  min-height: 3.5em;
  max-height: none !important;
  resize: vertical !important;
  overflow: auto !important;
}

.btn {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  transition: all .4s ease-in-out;
  text-wrap: nowrap;

  &.disabled,
  &:disabled {
    opacity: 0.4;
  }
}

.btn-small {
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--Primary-Green);
  height: 32px;
  line-height: 20px;
  transition: all .4s ease-in-out;
  text-wrap: nowrap;

  &.disabled,
  &:disabled {
    opacity: 0.4;
  }
}

.btn.btn-primary {
  border: none;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  border-radius: 10px;
  background: linear-gradient(180deg, #03AB77 0%, #026144 108%);
  box-shadow: 0 8px 16px 0 rgba(2, 97, 68, 0.15);
  color: var(--white);
  font-weight: 600;
  transition: all 0.4s ease;
}

.btn-lg {
  height: 50px;
  padding: 15px 24px;
}

.btn-md {
  height: 40px;
  padding: 8px 16px;
}

.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
  background: linear-gradient(180deg, #EDEDED 0%, #D0CFCF 100%);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  color: #A0A0A0;
  cursor: not-allowed;
}

.btn.btn-primary:hover {
  background: linear-gradient(180deg, #03AB77 55.81%, #026144 140%) !important;
  box-shadow: 0 10px 20px 0 rgba(2, 97, 68, 0.25);
  color: var(--white);
}

.btn-outline-primary {
  --bs-btn-border-color: var(--border-color);
  --bs-btn-color: var(--Primary-Green);
  border-radius: 10px;
  box-shadow: 0 6px 12px 0 rgba(16, 16, 16, 0.06);
  background-color: var(--white);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--Primary-Green);
  --bs-btn-hover-border-color: var(--Primary-Green);
  --bs-btn-active-bg: var(--Primary-Green);
  --bs-btn-focus-box-shadow: 0 6px 12px 0 rgba(16, 16, 16, 0.06);
  --bs-btn-active-color: var(--Primary-Green);
  --bs-btn-disabled-color: var(--Primary-Green);
  --bs-btn-disabled-bg: #EFF4FF;
  --bs-btn-disabled-border-color: var(--Primary-Green);


  &.icon-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
}

.hide-show-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.form-control {
  --bs-border-color: #e5e5e5;
  --bs-border-radius: 12px;
  --bs-background-color: white;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  --bs-body-color: #131E29;
  padding: 8px 16px;

  &::placeholder {
    color: #888;
  }

  &:hover {
    --bs-border-color: var(--Primary-Green);
  }

  &:focus {
    border-color: var(--Primary-Green);
    box-shadow: 0 0 0 2px rgba(0, 102, 97, 0.20);
  }
}

input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="search"]),
select.form-control {
  height: 50px;
}

input.form-control[readonly] {
  background-color: #fff;
  box-shadow: none;
  border-color: #e5e5e5;
}

select.form-control {
  background-image: url(/static/images/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 7px center;
}

.form-control.form-control-bg {
  background-color: #fff;

  &:hover {
    --bs-border-color: var(--Primary-Green);
  }

  &:focus {
    border-color: var(--Primary-Green);
    box-shadow: 0 0 0 2px rgba(0, 102, 97, 0.20);
  }
}

.form-control.form-control-blue-bg {
  background-color: var(--Primary-Green);
  color: var(--white);

  &:hover {
    --bs-border-color: var(--dark-blue);
  }

  &:focus {
    border-color: var(--Primary-Green);
    box-shadow: none;
  }
}

.form-check-input {
  --bs-border-color: #e5e5e5;
}

.form-check-input:checked {
  background-color: var(--Primary-Green);
  color: var(--white) !important;
  border-color: var(--Primary-Green);
}

.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e");
}

.form-check-input:focus {
  box-shadow: none;
}

@media (hover: hover) {
  .form-check-input:hover {
    --bs-border-color: #e5e5e5;
    --bs-form-check-bg: #EFF4FF;
  }
}

.label-space {
  min-height: 28px;
  display: block;
}

.form-control.verify-text {
  background-image: url(/static/images/verify.svg);
  background-repeat: no-repeat;
  background-position: right 7px center;
}

label.form-label {
  color: #888;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 5px;
}

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox] {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin: 0;
  cursor: pointer;
}

.custom-floating {
  position: relative;
}

.custom-floating label {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  padding: 0 5px;
  /* A floating label sits on the field's top border, so it must stay on one
     line. Being absolutely positioned it shrinks to the field's width, and in
     narrow fields (e.g. the two-column balance sheet) long labels wrapped onto
     2-4 lines that hung down into the input. Truncate instead of wrapping. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 28px);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  pointer-events: none;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 5;
}

.custom-floating .form-control::placeholder {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.custom-floating .form-control.required-input::placeholder {
  opacity: 0;
}

.custom-floating .form-control:focus::placeholder {
  opacity: 0;
  transition-delay: 0.05s;
}

.custom-floating:focus-within label {
  top: 0;
  transform: translateY(-50%);
  opacity: 1;
  color: var(--Primary-Green);
}

.custom-floating input:not(:placeholder-shown)~label,
.custom-floating textarea:not(:placeholder-shown)~label,
.custom-floating:has(.input-adorn-field .form-control:not(:placeholder-shown)) label,
.custom-floating:has(.input-adorn-field textarea:not(:placeholder-shown)) label {
  top: 0;
  transform: translateY(-50%);
  opacity: 1;
}

.custom-floating textarea~label {
  top: 1.25rem;
  transform: none;
}

.custom-floating:focus-within textarea~label,
.custom-floating textarea:not(:placeholder-shown)~label {
  top: 0;
  transform: translateY(-50%);
}

.custom-floating .form-control:not(:placeholder-shown):not(:focus)~label {
  color: #888;
}

.custom-floating.has-value label {
  top: 0;
  transform: translateY(-50%);
  opacity: 1;
}

.custom-floating:focus-within label {
  top: 0;
  transform: translateY(-50%);
  opacity: 1;
  color: var(--Primary-Green);
}

.custom-floating.has-value:not(:focus-within) label {
  color: #888;
}

/* ERROR STATE */
.custom-floating.error .form-control,
.custom-floating.error .select2-selection {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.custom-floating.error label {
  color: #dc3545 !important;
  opacity: 1;
  top: 0;
  transform: translateY(-50%);
}

/* Error message */
.error-text {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 5px;
}

.custom-floating.error .error-text {
  display: block;
}
/* Target select2 inside floating */
.custom-floating .select2-container {
  width: 100% !important;
}

.custom-floating .select2-selection {
  height: 50px !important;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
}

/* Focus state */
.custom-floating:focus-within .select2-selection {
  border-color: var(--Primary-Green);
  box-shadow: 0 0 0 2px rgba(0, 102, 97, 0.20);
}

/* Floating label for Select2 */
.custom-floating.has-value label,
.custom-floating:focus-within label {
  top: 0;
  transform: translateY(-50%);
  opacity: 1;
}
.select2-container .select2-selection {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 8px 16px;
  height: 50px;
  outline: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  margin-bottom: 0;
}
@media (hover: hover) {
  .select2-container .select2-selection:hover {
    border-color: #006661;
  }
}
.custom-floating .select2-selection--multiple {
  min-height: 50px !important;
  height: auto !important;
}
.select2-container .select2-selection:focus {
  box-shadow: 0 0 0 2px var(--Primary-Green);
  border-color: transparent;
}

.select2-container .select2-dropdown {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 1px 30px 0px rgba(34, 53, 72, 0.25);
  border-color: var(--border-color);
}

.select2-container .select2-results__option {
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #888;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 16.1px;
  padding: 9px 10px;
  height: 34px;
  border-radius: 4px;
  outline: none;
  background-color: var(--white);
  color: var(--black);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #006661;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 30px;
  padding-left: 0px;
}

/* Single-select placeholders inside floating fields — align with text inputs */
.custom-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  min-height: 34px;
  line-height: 1.35;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url(../images/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 5px center;
  height: 36px;
  top: 0px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 3px;
}

.select2-container.custom-multiselect .select2-results__option::before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: solid 1px #788fa6;
  vertical-align: middle;
  border-radius: 4px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #006661;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable::before {
  border-color: #fff;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable.select2-results__option--selected::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-color: var(--border-color);
  background: #E5F5EE;
  border-radius: 6px;
  margin-top: 0;
  padding: 5px;
  padding-right: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  right: 3px;
  border: 0;
  width: 15px;
  left: auto;
  top: 4px;
  padding: 0;
  color: var(--Primary-Green);
}

span.select2-selection.select2-selection--multiple::after {
  content: "";
  background-image: url(../images/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 7px center;
  height: 36px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  pointer-events: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  margin-right: 0px;
  top: 22px;
}

.select2-container--default .select2-selection--multiple.select2-selection--clearable {
  height: auto;
}

.select2-container--default .select2-selection__placeholder {
  color: #888 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
span.select2-selection.select2-selection--multiple::after {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

.select2-container--open .select2-selection--single .select2-selection__arrow,
.select2-container--open span.select2-selection.select2-selection--multiple::after {
  transform: rotate(180deg);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--black) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.select2-container .select2-selection__arrow {
  height: 100% !important;
  right: 10px !important;
}

.select2-container .select2-selection__clear {
  position: absolute;
  right: 30px !important;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  margin-top: 0 !important;
  margin-right: 0 !important;
  background-color: var(--white);
  color: var(--black);
}

/* The chevron ends about 30px from the right edge, so the clear "x" needs to
   sit left of that, and the selected text must stop short of both. */
.select2-container--default .select2-selection--single .select2-selection__clear {
  right: 40px !important;
  padding: 0 4px !important;
  font-size: 18px;
}

.select2-container--default .select2-selection--single.select2-selection--clearable .select2-selection__rendered {
  padding-right: 68px;
}

.select2-container {
  position: relative;
}
/* Ensure the search field is visible and styled inside the tags area */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0px;
    margin-left: 0px;
    font-family: inherit;
    font-size: 14px;
    color: #888 !important ;
}

/* Fix for the dropdown search if using a custom theme */
.custom-multiselect .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
}

/* Ensure the box expands correctly when searching/adding tags */
.select2-container--default .select2-selection--multiple {
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
div:not(.optional)>.select2-container .select2-selection__placeholder::after {
  content: " *";
  color: #FE3F34;
  font-weight: bold;
  margin-left: 4px;
}

/* Light theme autofill */
body:not(.dark-theme) input:-webkit-autofill {
  -webkit-text-fill-color: #000;
  box-shadow: 0 0 0px 1000px #ffffff inset;
}

.offcanvas.canvas-lg {
  --bs-offcanvas-width: 550px;
  border-radius: 10px !important;
  height: calc(100dvh - 20px);
  margin: 10px;
  background: var(--white);
}

.offcanvas-card {
  border-radius: 16px;
  border: 1px solid var(--border-color);
}
.dropdown-toggle::after{
  color: var(--black);
}
/* 🌙 DARK THEME */
.dark-theme {
  --white: #101010;
  --black: #ffffff;
  --border-color: #2E2E2E;
}

/* Body */
.dark-theme body {
  background-color: #101010;
  color: #ffffff;
}

.dark-theme section.main-login {
  background: linear-gradient(180deg, #004440 0%, #00201E 100%);
}

/* 🔧 Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  /* text color */
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px #101010 inset;
  /* your background */
}

/* Text */
.dark-theme .text-black {
  color: #ffffff !important;
}

.dark-theme .text-grey {
  color: #B0B0B0;
}
.dark-theme .offcanvas.canvas-lg {
  background: #1D1D1D;
}
.dark-theme .modal-content {
  background: #1D1D1D;
}
.dark-theme .btn.btn-primary.disabled,
.dark-theme .btn.btn-primary:disabled {
  background: linear-gradient(180deg, #303030 0%, #1C1C1C 100%);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  color: #616161;
  border: 1px solid #2E2E2E;
  cursor: not-allowed;
}

/* Form Control */
.dark-theme .form-control {
  background-color: #101010;
  border-color: #2E2E2E;
  color: #ffffff;
}

/* Placeholder */
.dark-theme .form-control::placeholder {
  color: #4E4E4E;
  font-weight: 500;
}

/* Focus state */
.dark-theme .form-control:focus {
  color: #ffffff;
  border-color: var(--Secondary-Green);
  box-shadow: 0 0 0 2px rgba(0, 102, 97, 0.25);
}

/* Keep readonly fields visually consistent in dark theme */
.dark-theme input.form-control[readonly],
.dark-theme textarea.form-control[readonly],
.dark-theme .form-control.form-control-bg[readonly] {
  background-color: #101010 !important;
  color: #ffffff !important;
  border-color: #2E2E2E !important;
  box-shadow: none;
}

.dark-theme .custom-floating .form-control[readonly]::placeholder {
  color: #7a7a7a;
  opacity: 1;
}

/* Labels */
.dark-theme label.form-label {
  color: #A0A0A0;
}

/* Floating label */
.dark-theme .custom-floating label {
  background: #101010;
  color: #4E4E4E;
}

/*
 * A floating label straddles the field's top border and hides the part behind
 * it by painting its own background. In dark mode that means it sits over TWO
 * surfaces at once: the offcanvas panel (#1D1D1D) above the border and the
 * input (#101010) below it. A single flat colour always leaves a visible patch
 * on one side of the line - which is what read as an underline under the text.
 * The label is centred on the border, so split its background at exactly 50%.
 * Light mode needs no equivalent because both surfaces are white there.
 */
.dark-theme .offcanvas .custom-floating label {
  background: linear-gradient(to bottom, #1D1D1D 50%, #101010 50%);
}

.dark-theme .custom-floating:focus-within label {
  color: var(--Secondary-Green);
}

/* Buttons */
.dark-theme .btn-outline-primary {
  background-color: #101010;
  color: #ffffff;
}

.dark-theme .btn-outline-primary:hover {
  border-color: var(--Secondary-Green) !important;
}

.dark-theme .btn-outline-primary:hover {
  border-color: var(--Primary-Green);
  color: var(--Primary-Green);
}

/* Cards / Containers */
.dark-theme .card-content,
.dark-theme .right {
  background-color: #101010;
  border-color: #2E2E2E;
}

/* Divider */
.dark-theme .login-divider::before,
.dark-theme .login-divider::after {
  border-color: #2E2E2E;
}

/* Select2 */
.dark-theme .select2-container .select2-selection {
  background-color: #101010;
  border-color: #2E2E2E;
  color: #ffffff;
}

body.dark-theme .hide-show-eye img {
  filter: invert(1);
}

.dark-theme .select2-container--default .select2-selection__placeholder {
  color: #4E4E4E !important;
}

.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
}
.dark-theme .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: #4E4E4E !important ;
}
body.dark-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url(../images/chevron-down-white.svg);
}
body.dark-theme span.select2-selection.select2-selection--multiple::after  {
  background-image: url(../images/chevron-down-white.svg);
}
body.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #00201E;
}
.dark-theme .btn-small {
  color: var(--Secondary-Green) !important;
}

/* Dropdown */
.dark-theme .select2-container .select2-dropdown {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Checkbox & radio */
.dark-theme .form-check-input {
  border-color: #2E2E2E;
  background-color: #101010;
}

.dark-theme .text-primary {
  color: var(--Secondary-Green) !important;
}

/* Error */
.dark-theme .error-text {
  color: #ff6b6b;
}

.theme-toggle {
  display: flex;
  align-items: center;
}

#themeSwitch {
  display: none;
}

.toggle-label {
  width: 60px;
  height: 30px;
  background: #ccc;
  border-radius: 50px;
  position: absolute;
  top: 32px;
  right: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  transition: background 0.3s ease;
}

/* Icons */
.toggle-label .icon {
  font-size: 14px;
  z-index: 2;
}

.toggle-label .ball {
  width: 22px;
  height: 22px;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 3;
}

#themeSwitch:checked+.toggle-label {
  background: #2E2E2E;
}

#themeSwitch:checked+.toggle-label .ball {
  transform: translateX(30px);
}

@media (max-width: 991px) {

  h1,
  .h1 {
    font-size: 32px;
    line-height: 40px;
  }

  h2,
  .h2 {
    font-size: 28px;
    line-height: 36px;
  }

  h3,
  .h3 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.24px;
  }

  h4,
  .h4 {
    font-size: 22px;
    line-height: 30px;
  }

  h5,
  .h5 {
    font-size: 20px;
    line-height: 28px;
  }

  h6,
  .h6 {
    font-size: 18px;
    line-height: 26px;
  }

  .f-18 {
    font-size: 16px;
    line-height: 24px;
  }

  .f-16 {
    font-size: 14px;
    line-height: 20px;
  }

  .f-14 {
    font-size: 12px;
    line-height: 18px;
  }

  .f-12 {
    font-size: 10px;
    line-height: 16px;
  }

  .pb-32 {
    padding-bottom: 24px;
  }

  .pt-32 {
    padding-top: 24px;
  }

  .mb-32 {
    margin-bottom: 24px;
  }

  .toggle-label {
    top: 16px !important;
    right: 16px !important;
  }
   .icon-btn {
    width: 32px !important;
    height: 32px !important;
  }
}
.green-text{
  color: var(--Secondary-Green);
}
.red-text{
  color: #FE3F34;
}
.badge {
  --bs-badge-font-weight: 500;
  --bs-badge-font-size: 12px;
  line-height: 16px;
  text-transform: capitalize;
  padding: 4px 8px;
  border-radius: 6px;
}

.badge.text-bg-success {
  background-color: #E5F5EE !important;
  color: #101010 !important;
}

.badge.text-bg-green {
  background-color: #E0F1F2 !important;
  color: #101010 !important;
}

.badge.text-bg-primary {
  background-color: #DCECFF !important;
  color: #101010 !important;
}

.badge.text-bg-warning {
  background-color: #FFF8DB !important;
  color: #101010 !important;
}

.badge.text-bg-purple {
  background-color: #F6E3FF !important;
  color: #101010 !important;
}

.badge.text-bg-grey {
  background-color: #EDEDED !important;
  color: #101010 !important;
}

.dark-theme .badge.text-bg-success {
  background-color: rgba(39, 48, 42, 1) !important;
  color: #34C759 !important;
}

.dark-theme .badge.text-bg-primary {
  background-color: #1C2A3A !important;
  color: #007AFF !important;
}

.dark-theme .badge.text-bg-warning {
  background-color: rgba(255, 204, 0, 0.1) !important;
  color: #FFCC00 !important;
}

.dark-theme .badge.text-bg-purple {
  background-color: rgba(175, 82, 222, 0.1) !important;
  color: #AF52DE !important;
}

.dark-theme .badge.text-bg-grey {
  background-color: #303030 !important;
  color: #888 !important;
}

/***** dataTable css start here *****/
.dataTables_filter {
  display: none;
}

table.dataTable {
  width: 100% !important;
}

table.dataTable thead tr:first-child th {
  background-color: #F7F7F7;
  white-space: nowrap;
}

table.dataTable tbody tr td {
  background-color: var(--white) !important;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 14px;
  line-height: 16.1px;
  color: var(--black);
  padding: 16px;
}

table.dataTable.display tbody td {
  border-top: 1px solid var(--border-color);
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover td {
  background-color: rgba(250, 250, 250, 1) !important;
}
.dark-theme table.dataTable tbody tr:hover,
.dark-theme table.dataTable tbody tr:hover td {
  background-color: #181818 !important;
}

.config-sequence-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.config-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: grab;
  touch-action: none;
}

.config-drag-handle:active {
  cursor: grabbing;
}

.config-sortable-table .config-row-ghost {
  opacity: 0.45;
}

.config-sortable-table .config-row-chosen td {
  background-color: rgba(0, 102, 97, 0.06) !important;
}

.dark-theme .config-drag-handle {
  color: #6b7280;
}

.dark-theme .config-sortable-table .config-row-chosen td {
  background-color: rgba(3, 171, 119, 0.12) !important;
}

table.dataTable thead tr th {
  padding: 8px 10px;
  font-weight: 500;
  box-sizing: border-box;
  border-bottom: none;
  font-size: 14px;
  line-height: 20px;
  color: #888;
  min-height: 44px;
  height: 44px;
}

table.dataTable.no-footer {
  border: 0 !important;
}

.table-responsive .dataTables_wrapper {
  overflow: auto;
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 203px);
}

.pagination-container {
  position: sticky;
  bottom: 0;
  left: 0;
  min-height: 50px;
  padding: 6px 6px;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

table.dataTable thead {
  position: sticky;
  top: 0;
  z-index: 9;
  border-radius: 8px !important;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-color: #d4dadf !important;
  border-radius: 5px;
  margin: 0 5px;
  background: transparent !important;
  font-size: 14px;
  color: #888 !important;
  font-weight: 600;
  box-shadow: none !important;
  min-width: auto;
  padding: 4px;
  width: 30px;
  height: 30px;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 1px solid var(--border-color) !important;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  display: none !important;
}

.dataTables_wrapper .pagination-container .dataTables_info {
  padding: 0;
  font-size: 14px;
  color: var(--black);
  font-weight: 600;
}

.pagination-container .dt-pagination-info {
  flex: 1;
  text-align: left;
}

.pagination-container .dt-pagination-controls {
  flex: 1;
  text-align: center;
}

.pagination-container .dt-jump-label {
  flex: 1;
  text-align: right;
}

.pagination-container .dt-length-select {
  flex: 1;
  text-align: right;
}

.pagination-container .dt-length-select label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #888;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.pagination-container .dt-length-select select {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  padding: 3px 8px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  appearance: auto;
}

.pagination-container .dt-length-select select:focus {
  border-color: var(--primary-color, #006661);
}

/* Select2 inside the pagination bar — compact size to fit the bar */
.pagination-container .dt-length-select .select2-container {
  min-width: 70px;
}

.pagination-container .dt-length-select .select2-container .select2-selection {
  height: 34px !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  display: flex;
  align-items: center;
}

.pagination-container .dt-length-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 24px !important;
  padding-left: 0 !important;
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

.pagination-container .dt-length-select .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
  top: 0 !important;
}

.pagination-container .dt-length-select .select2-container .select2-dropdown {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.pagination-container .dt-length-select .select2-container .select2-results__option {
  font-size: 14px;
  font-weight: 500;
  color: #444;
  padding: 6px 12px;
}

.pagination-container label {
  color: #888;
  font-size: 14px;
  font-weight: 600;
}

.pagination-container label input#jumpToPage {
  width: 48px !important;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  padding: 3px 6px;
  text-align: center;
}

.pagination-container .dt-jump-input {
  width: 48px;
  margin-left: 10px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  padding: 3px 6px;
  text-align: center;
}

.table-responsive table button.icon-btn:not(:hover) {
  background: transparent;
}

/* 1. Ensure the table is not collapsing borders */
table.dataTable {
  border-spacing: 0;
}

/* 2. Target the top-left corner of the first header cell */
table.dataTable thead tr:first-child th:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

/* 3. Target the top-right corner of the last header cell */
table.dataTable thead tr:first-child th:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* 4. Ensure the sticky positioning doesn't clip the corners */
table.dataTable thead th {
  overflow: hidden;
}
.sticky-table-container .table-responsive table thead th.text-center {
    position: sticky;
    right: 0;
    top: 0;
}

.sticky-table-container .table-responsive table tbody td:last-child {
    position: sticky;
    right: 0;
    background-color: white; 
}

td.text-end:has(.btn.icon-btn.show) {
    z-index: 8;
}

.scrolled-horizontally table tbody td:last-child,
.scrolled-horizontally table thead th.text-end {
	box-shadow: none !important;
}


.dark-theme .dataTable thead tr:first-child th {
  background: #181818;
}
.offcanvas-backdrop.show {
    background-color: rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 1 !important;
}
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 1 !important;
}
.btn-close {
    --bs-btn-close-color: var(--black);
    --bs-btn-close-opacity: 1;
    background: none !important;  /* Removes the default Bootstrap X icon */
    padding: 0;                   /* Removes default padding that offsets your SVG */
    width: auto;                  /* Allows button to fit your 24px SVG */
    height: auto;
    opacity: 1;                   /* Optional: keeps your icon bright (default is 0.5) */
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark-theme .btn-close {
    --bs-btn-close-color: var(--black) !important;
    --bs-btn-close-color: #1d1d1d;
}
.modal-content{
  background-color: var(--white);
}
@media (max-width: 1700px) {
  .pagination-container {
    min-height: 36px;
    padding: 10px 20px;
  }

  .dataTables_wrapper .pagination-container .dataTables_info,
  .pagination-container label {
    font-size: 12px;
  }

  .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .table-responsive .dataTables_wrapper {
    max-height: calc(100dvh - 133px);
  }

  table.dataTable tbody tr td {
    font-size: 12px;
    padding: 10px;
    line-height: 1.2;
    height: 30px;
  }

  table.dataTable thead tr th {
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.2;
    height: 32px;
  }

  table .form-control.search-input.column-search {
    padding: 5px 10px;
    height: 26px;
    min-width: 65px;
    padding-right: 30px;
  }

  table.dataTable.no-footer tr.filters th {
    padding-right: 0;
  }

}

@media (max-width: 991px) {
  .table-responsive .dataTables_wrapper {
    max-height: calc(100dvh - 183px);
  }

  .pagination-container label,
  .dataTables_wrapper .pagination-container .dataTables_info {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .table-responsive .dataTables_wrapper {
    max-height: calc(100dvh - 202px);
  }

  .pagination-container label input#jumpToPage {
    width: 28px !important;
    padding: 3px 4px;
    margin-left: 0 !important;
  }

  .pagination-container .dt-jump-input {
    width: 28px !important;
    padding: 3px 4px;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate {
    flex: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .pagination-container {
    min-height: 45px;
    padding: 1px 10px;
  }

  .pagination-container label,
  .dataTables_wrapper .pagination-container .dataTables_info {
    flex: auto !important;
    font-size: 11px;
  }

  table .form-control.search-input.column-search {
    min-width: 95px;
  }
}
/***** dataTable css eend here *****/
html,
body {
  padding: 0px;
  margin: 0px;
}
/* Switch */
.custom-switch {
  position: relative;
  width: 60px;
  height: 30px;
  display: inline-block;
}

.custom-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Track */
.switch-slider {
  position: absolute;
  inset: 0;
  background: #0b5d57;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
}

/* Knob */
.switch-slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 4px;
  top: 4px;
  background: #d9d9d9;
  border-radius: 50%;
  transition: 0.3s;
}

/* Active */
.custom-switch input:checked+.switch-slider {
  background: #064e4a;
}

.custom-switch input:checked+.switch-slider::before {
  transform: translateX(30px);
  background: #ffffff;
}

/***** Aside, header start here *****/
.main-wrap {
  overflow: hidden;
  height: 100%;
  min-height: 100vh;
  width: 100%;
  display: flex;
  background-color: var(--white);
}

.main-wrap aside {
  padding: 12px 0px 12px 12px;
  height: 100vh;
  width: 272px;
  position: fixed;
  transition: width 0.3s ease-in-out;
  z-index: 101;
}

aside .sidebar-logo .logo-close {
  display: none;
}

.main-wrap aside.collapsed {
  width: 101px;
}

.main-wrap aside.collapsed:hover {
  width: 272px;
  z-index: 102;
}

aside.collapsed:hover .sidebar-logo,
aside.collapsed:hover .dark-mode-wrap,
aside.collapsed:hover .collaps-icon {
  justify-content: flex-start !important;
}

aside.collapsed:hover .nav-link {
  justify-content: flex-start;
  gap: 12px;
}

aside.collapsed:hover .nav-link span {
  display: inline-block;
  opacity: 0;
  animation: sidebarFadeInText 0.15s ease forwards;
  animation-delay: 0.2s;
}

@keyframes sidebarFadeInText {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.main-wrap aside.collapsed:hover .sidebar-logo .logo-open {
  display: block;
}

.main-wrap aside.collapsed:hover .sidebar-logo .logo-close {
  display: none;
}

.main-wrap aside.collapsed:hover .custom-switch,
.main-wrap aside.collapsed:hover #themeLabel {
  display: block;
}

.main-wrap aside.collapsed:hover .dark-mode-wrap,
.main-wrap aside.collapsed:hover .sidebar-logo {
  justify-content: space-between !important;
}

.main-wrap aside.collapsed:hover .dropdown-arrow {
  display: block;
}

.main-wrap aside.collapsed:hover .sidebar-nav .collapse.show {
  display: block !important;
}

aside.collapsed .toggle-aside .toggle-img {
  transform: rotate(180deg);
  transition: 0.3s;
}

aside.collapsed .nav-link span,
aside.collapsed .sidebar-logo .logo-open {
  display: none;
}

aside.collapsed .sidebar-logo .logo-close {
  display: block;
}

aside.collapsed .custom-switch,
aside.collapsed #themeLabel {
  display: none;
}

aside.collapsed .dark-mode-wrap,
aside.collapsed .sidebar-logo {
  justify-content: center !important;
}

aside.collapsed .collaps-icon {
  display: flex;
  justify-content: center !important;
}

aside.collapsed .logout span {
  display: none;
}

aside.collapsed:hover .logout span {
  display: inline;
}

aside.collapsed .sidebar-nav .collapse {
  display: none !important;
}

aside.collapsed .dropdown-arrow {
  display: none;
}

.sidebar {
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #00201E, #00867E);
  position: relative;
}

/* The sidebar is fixed to the viewport height. Expanding menu groups used to
   grow the top section past it and push the theme switch and Log Out off the
   screen. The menu now takes the remaining height and scrolls inside it; the
   bottom block never shrinks. Only the <ul> scrolls - the collapse button
   (.toggle-aside, positioned against .sidebar at right:-15px) must not sit
   inside an overflow container or it would be clipped. */
.sidebar-top {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-top .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-top .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}

.sidebar-bottom {
  flex-shrink: 0;
  padding-top: 12px;
}

.toggle-aside {
  position: absolute;
  right: -15px;
  top: 35px;
  cursor: pointer;
  background-color: var(--white);
  color: var(--black);
  padding: 5px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
  z-index: 1000;
}

.sidebar-divider {
  border-color: #034A44;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4F7D79;
  padding: 10px 12px;
  transition: 0.3s;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  color: #fff;
}

.aside-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
}

.aside-bg.active {
  display: block;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.logout {
  color: white;
  padding: 10px 12px;
}

.logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.form-check-input {
  cursor: pointer;
}

.main-wrap main {
  margin-left: 280px;
  padding: 24px;
  width: 100%;
  overflow-x: auto ;
  transition: margin-left 0.3s ease-in-out;
}

.main-wrap main.collapsed {
  margin-left: 101px;
}

.sticky-header {
  position: fixed;
  left: 280px;
  right: 0;
  width: auto;
  top: 0;
  background-color: var(--white);
  padding: 24px 24px 24px 24px;
  z-index: 100;
  transition: left 0.3s ease-in-out;
}

.main-wrap main.collapsed .sticky-header {
  left: 101px;
}

.dark-theme .sticky-header {
  background-color: #101010;
}

.left-header {
  width: 100%;
}

.search-icon {
  position: relative;
  width: 100%;
}

.search-icon .form-control {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--white);
  padding-left: 40px;
  /* space for icon */
  height: 40px;
}

.search-icon img {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.dropdown.notification-dropdown {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid var(--border-color);
}

.dropdown.notification-dropdown .btn,
.dropdown .btn {
  border: none;
}

/* Dropdown container */
.notification-menu {
  width: 420px;
  max-height: 520px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
  margin-top: 12px !important;
  overflow-y: auto;
  background-color: var(--white);
}

.notification-header {
  margin-bottom: 24px;
}

.notification-card,
.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  background: var(--white);
  transition: all 0.25s ease;
}

.notification-card.active,
.notification-card:hover,
.profile-card:hover {
  background: #F3F7F6;
}

.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #E5F5EE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 12px 0 rgba(16, 16, 16, 0.06);
  border: 1px solid var(--border-color);
}

.notification-card.active .icon-box {
  background-color: var(--Primary-Green);
}

.notification-card.active .notification-icon-inner {
  color: var(--white);
}

.icon-box img {
  width: 20px;
}

.profile-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-right: 10px !important;
  border: 1px solid var(--border-color);
}

.profile-dropdown {
  width: 260px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
  margin-top: 12px !important;
  background-color: var(--white);
}

header .dropdown {
  position: relative;
  z-index: 1100;
}

header #profileDropdown {
  position: relative;
  z-index: 1101;
  pointer-events: auto;
}

.notification-icon,
.profile-icon {
  color: var(--black);
}

.notification-icon-inner {
  color: var(--Primary-Green);
}

.profile-cta {
  border-radius: 12px;
  background: linear-gradient(180deg, #00867E 0%, #00201E 100%);
  padding: 12px;
  color: #B8D3CE;
  position: relative;
}

.info-img {
  position: absolute;
  top: 8px;
  right: 8px;
}
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
.dark-theme .notification-icon-inner {
  color: var(--black) !important;
}

.dark-theme .notification-card.active,
.dark-theme .notification-card:hover,
.dark-theme .profile-card:hover {
  background: #00201E;
}

.dark-theme .icon-box {
  background-color: #0E3431;
}

.dark-theme .notification-card.active .icon-box {
  background-color: #03AB77;
}

@media (max-width: 991px) {
  .main-wrap aside {
    transform: translateX(-300px);
    transition: transform 0.3s ease;
    z-index: 9999;
  }

  .main-wrap aside.show {
    transform: translateX(0);
  }

  .main-wrap main {
    margin-left: 0 !important;
    padding: 16px !important;
  }

  .dropdown.notification-dropdown {
    padding-right: 10px;
    margin-right: 10px;
  }

  .main-content {
    padding-top: 72px !important;
  }

  .sticky-header {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    padding: 16px 0 !important;
  }

  .loan-container {
    display: flex;
    align-items: center !important;
  }

  .loan-row {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
  }

  .stepper-side {
    flex: 1;
    padding-right: 24px;
    overflow-y: auto;
    max-height: none !important;
  }

  .document-chart-wrap {
    gap: 12px;
  }
  .offcanvas.canvas-lg {
  --bs-offcanvas-width: 320px;
  border-radius: 10px !important;
  height: calc(100dvh - 20px);
  margin: 10px;
  background: var(--white);
}
}
/***** Employment step — property finance overview *****/
.step1-employment-panel {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: var(--white, #fff);
  padding: 1rem 1.25rem;
  box-shadow: 0 0 0 1px rgba(0, 102, 97, 0.06);
}

@media (min-width: 992px) {
  .step1-employment-panel {
    padding: 1.25rem 1.5rem;
  }
}

.step1-employment-panel .step1-employment-form-grid .custom-floating .form-control::placeholder {
  color: #888;
  opacity: 1;
}

.dark-theme .step1-employment-panel {
  background: transparent;
  border-color: var(--border-color);
  box-shadow: none;
}

.dark-theme .step1-employment-panel > p.fw-semibold {
  color: #fff !important;
}

.dark-theme .step1-employment-table tbody td {
  color: rgba(255, 255, 255, 0.92);
}

.step1-employment-panel .step1-employment-form .row {
  --bs-gutter-y: 1rem;
}

.step1-employment-form .step1-employment-btn-row {
  padding-left: 20px;
}

/* DataTable for saved employment — no panel border (theme matches global .dataTables_wrapper rules) */
.step1-employment-dt-wrap {
  overflow-x: auto;
}

.step1-employment-dt-wrap .dataTables_wrapper {
  margin-top: 0.5rem;
  max-height: none !important;
  overflow: visible !important;
}

.step1-employment-dt-wrap .pagination-container {
  min-height: 40px;
  padding: 6px 10px;
}

.step1-employment-dt-wrap .dataTables_wrapper .pagination-container .dataTables_info,
.step1-employment-dt-wrap .pagination-container label {
  font-size: 12px;
}

.step1-employment-table {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-color, #222);
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  --bs-table-bg: transparent;
  --bs-table-border-color: #e5e5e5;
  width: 100% !important;
}

.step1-employment-table thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #000);
  background: #f4f6f8;
  border-bottom: 1px solid var(--border-color);
  padding: 10px 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.dark-theme .step1-employment-table thead th {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.dark-theme .step1-employment-table {
  --bs-table-border-color: var(--border-color);
}

.step1-employment-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  border-color: var(--border-color);
}

.step1-employment-dt-wrap table.dataTable tbody tr td,
.step1-employment-dt-wrap table.dataTable thead tr th {
  padding: 10px !important;
}

.step1-employment-table tbody tr:last-child td {
  border-bottom: none;
}

.step1-employment-table .step1-employment-actions {
  gap: 8px;
}

.step1-employment-table .step1-employment-actions .btn.icon-btn {
  min-width: 0;
}

/***** Aside, header end here *****/

/* Documentation & Declarations upload UI */
.alert-extraction {
  background-color: #fff4f1;
  border-radius: 12px;
  border: none;
}

.upload-section {
  border-radius: 12px;
  border: 2px dashed var(--border-color);
  background: #f7f7f7;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-section p,
.upload-section span {
  color: #6d6d6d;
}

.upload-section .label-text {
  cursor: pointer;
}

.upload-section.is-dragover {
  border-color: var(--Secondary-Green);
  background: #f1f8f7;
}

.upload-section .extracting-box,
.upload-section .upload-progress-box {
  min-height: 180px;
}

.upload-section .upload-progress-box {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.progress-circle {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
}

.progress-circle svg {
  transform: rotate(-90deg);
}

.progress-circle circle {
  fill: none;
  stroke-width: 6;
  cx: 40;
  cy: 40;
  r: 32;
}

.progress-circle .bg {
  stroke: #ededed;
}

.progress-circle .progress {
  stroke: var(--Secondary-Green);
  stroke-linecap: round;
  stroke-dasharray: 201;
  stroke-dashoffset: 201;
  transition: stroke-dashoffset 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 134, 126, 0.1);
  z-index: -1;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--black);
  cursor: pointer;
}

.file-complete {
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.file-row {
  background: #f7f7f7;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 12px 16px;
}

.file-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--white);
}

.extracting-loader {
  position: relative;
  width: 80px;
  height: 80px;
}

.icon-inner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: #e6e6e6;
  stroke-width: 3;
}

.ring-active {
  fill: none;
  stroke: #00867e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 60 160;
  animation: rotateRing 1.2s linear infinite;
}

@keyframes rotateRing {
  0% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }

  100% {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}

.dark-theme .alert-extraction {
  background-color: #401a17;
}

.dark-theme .upload-section {
  background: #1d1d1d;
}

.dark-theme .upload-section.is-dragover {
  background: #232323;
  border-color: var(--Secondary-Green);
}

.dark-theme .upload-section p,
.dark-theme .upload-section span {
  color: #888;
}

.dark-theme .file-row {
  background: #1d1d1d;
}

/* Hide the sticky header while any Bootstrap modal is open.
   Bootstrap adds `.modal-open` to <body> on show and removes it on hide,
   so the navbar reappears automatically when the popup closes. */
body.modal-open .sticky-header {
  display: none !important;
}

/* Same treatment for offcanvas edit panels (profile, lender, users, etc.) */
body.overflow-hidden:has(.offcanvas.show) .sticky-header {
  display: none !important;
}

/* Textarea drag-resize: keep resize handle usable (no fixed/auto height !important) */
textarea.form-control:not(.cke_source),
textarea.form-control-bg:not(.cke_source),
textarea.form-control-user:not(.cke_source) {
  resize: vertical !important;
  overflow: auto !important;
  max-height: none !important;
}

/* Global CreFin page loader */
.page-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: all;
}

.page-loader-overlay.is-hidden {
  display: none !important;
  pointer-events: none;
}

.dark-theme .page-loader-overlay {
  background: rgba(16, 16, 16, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

html.page-loader-active,
body.page-loader-active {
  overflow: hidden;
}

.page-loader-overlay .logo-svg-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 100px;
  margin: 0;
  flex-shrink: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.logo-svg-wrap #svgFill,
.logo-svg-wrap #svgOutline {
  position: absolute;
  top: 0;
  left: 0;
}

.logo-svg-wrap #svgOutline {
  pointer-events: none;
}

.logo-svg-wrap #svgFill path {
  clip-path: inset(100% 0 0 0);
}

.subscription-status-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.subscription-status-alert--expired {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B42318;
}

.subscription-status-alert--warning {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #B45309;
}

.subscription-status-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.subscription-status-alert__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}

.subscription-status-alert__body {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.92;
}

.subscription-expired-badge {
  background: #F04438 !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
}

.subscription-active-badge {
  background: #E8F8F3 !important;
  color: #027A48 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
}

.subscription-inactive-badge {
  background: #F2F4F7 !important;
  color: #667085 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
}

.subscription-plan-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.billing-payment-card .btn.icon-btn {
  border: 1px solid #FECDCA;
  background: #FEF3F2;
}

.billing-payment-card .btn.icon-btn img {
  filter: none;
}

.current-subscription-plan {
  border: 1px solid #EAECF0;
}

#billingHistoryTable thead th {
  background: #F9FAFB;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #EAECF0;
  padding: 12px 16px;
}

#billingHistoryTable tbody td {
  padding: 16px;
  font-size: 14px;
  color: #101828;
  border-bottom: 1px solid #EAECF0;
  vertical-align: middle;
}

.dark-theme .subscription-status-alert--expired {
  background: rgba(240, 68, 56, 0.12);
  border-color: rgba(240, 68, 56, 0.28);
  color: #FDA29B;
}

.dark-theme .subscription-status-alert--warning {
  background: rgba(247, 144, 9, 0.12);
  border-color: rgba(247, 144, 9, 0.28);
  color: #FEC84B;
}

/* Super admin dashboard */
.green-block {
  border-radius: 16px;
  background: #F4FAF7;
}

.dark-theme .green-block {
  background-color: #00201E;
}

.grey-card {
  border-radius: 12px;
  background: #F7F7F7;
}

.dark-theme .grey-card {
  background: #1D1D1D;
}

.pipeline-card {
  min-width: 120px;
  width: 139px;
}

@media (max-width: 991px) {
  .pipeline-card {
    width: 100px;
  }
}

.pipeline-flow-row {
  overflow-x: auto;
  flex-wrap: nowrap !important;
  padding-bottom: 4px;
}

.pipeline-arrow {
  flex-shrink: 0;
}

.pipeline-card-inner {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.pipeline-card-inner.last {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.analytics-tabs {
  gap: 24px;
  border-bottom: 1px solid var(--border-color) !important;
}

.analytics-tabs .nav-link {
  border: 0;
  background: transparent;
  padding: 0 0 10px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.analytics-tabs .nav-link:hover {
  color: var(--black);
}

.analytics-tabs .nav-link.active {
  color: var(--black);
  border-color: var(--Primary-Green);
  background-color: transparent;
}

.chart-wrap {
  height: 320px;
}

.overview-toggle-btn {
  text-decoration: none;
}

.overview-toggle-icon {
  transition: transform 0.3s ease;
}

.overview-toggle-btn.is-expanded .overview-toggle-icon {
  transform: rotate(180deg);
}

/* Currency / percent input adornments — single source of truth for all forms & steppers */
.input-adorn-field {
  position: relative;
  width: 100%;
}

.input-adorned {
  position: relative;
}

.input-adorn-field .input-adorn-prefix,
.input-adorn-field .input-adorn-suffix {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--input-adorn-symbol-color);
  font-size: var(--input-adorn-symbol-size);
  font-weight: var(--input-adorn-symbol-weight);
  line-height: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  z-index: 2;
}

.input-adorn-field .input-adorn-prefix {
  left: var(--input-adorn-prefix-left);
}

.input-adorn-field .input-adorn-suffix {
  right: var(--input-adorn-suffix-right);
}

.input-adorned.is-adorn-visible .input-adorn-prefix,
.input-adorned.is-adorn-visible .input-adorn-suffix {
  opacity: 1;
}

.input-adorned.input-adorn-currency.is-adorn-visible .input-adorn-field > .form-control,
.input-adorned.input-adorn-currency.is-adorn-visible .input-adorn-field > input.form-control {
  padding-left: var(--input-adorn-currency-padding) !important;
}

.input-adorned.input-adorn-percent.is-adorn-visible .input-adorn-field > .form-control,
.input-adorned.input-adorn-percent.is-adorn-visible .input-adorn-field > input.form-control {
  padding-right: var(--input-adorn-percent-padding) !important;
}

.input-adorned.is-adorn-visible:focus-within .input-adorn-prefix,
.input-adorned.is-adorn-visible:focus-within .input-adorn-suffix {
  color: var(--Primary-Green);
}

.dark-theme .input-adorn-prefix,
.dark-theme .input-adorn-suffix {
  color: #8a8a8a;
}

.dark-theme .input-adorned.is-adorn-visible:focus-within .input-adorn-prefix,
.dark-theme .input-adorned.is-adorn-visible:focus-within .input-adorn-suffix {
  color: var(--Primary-Green);
}
.pac-container {
  z-index: 20000 !important;
}