:root {
  --font-product: "Geist var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
  --base-size: 10px;
  /* Color styles */
  --brand-color: #040669;
  --error: #d63928;
  --red-0: #fff8f7;
  --red-100: #feebe8;
  --red-500: #ffcdc4;
  --red-600: #fdbdb2;
  --red-700: #f5a99c;
  --red-900: #d63928;
  --navy-blue-0: #f5f5ff;
  --navy-blue-50: #e1e2fe;
  --navy-blue-100: #c5c6fd;
  --navy-blue-200: #9899f9;
  --navy-blue-300: #7072f2;
  --navy-blue-400: #5053e9;
  --navy-blue-500: #383bdd;
  --navy-blue-600: #272acd;
  --navy-blue-700: #1b1db8;
  --navy-blue-800: #1315a0;
  --navy-blue-900: #0e1087;
  --money-green-0: #f5fff6;
  --money-green-100: #c5fdce;
  --money-green-200: #98f9a6;
  --money-green-300: #70f284;
  --money-green-400: #50e967;
  --money-green-500: #38dd51;
  --money-green-600: #27cd40;
  --money-green-700: #1bb832;
  --money-green-800: #13a028;
  --money-green-900: #0e8720;
  --white-0: #f5f5ff;
  --white-100: #f3f3fe;
  --white-200: #f0f0fb;
  --white-300: #ececf7;
  --white-400: #e6e6f2;
  --white-500: #dfdfea;
  --white-600: #d5d5e0;
  --white-700: #c9c9d3;
  --white-800: #bbbbc4;
  --white-900: #acacb5;
  --white: #ffffff;
  --yellow-0: #fffff5;
  --yellow-100: #fefddc;
  --yellow-200: #fdfbc4;
  --yellow-300: #fcf9ae;
  --yellow-400: #f9f69d;
  --yellow-500: #f6f28f;
  --yellow-600: #f1ed84;
  --yellow-700: #ebe87b;
  --yellow-800: #e5e174;
  --yellow-900: #deda6f;
  --yellow-1000: #686518;
  --bg-forms: #fdfdfd;
  --bg-button: #f2f2f2;
  --bg-card: #fafafa;
  --black-100: #282424;
  --black-400: #4c4747;
  --black-90: #0a1727;
  --grey-text-deactivated-50: #6b7888;
  --grey-text-deactivated-60: #465363;
  --grey-text-deactivated-80: #404851;
  --grey-stroke-20: #e2e2e2;
  --grey-stroke-40: #efeeee;
  --grey-stroke-60: #c5c5c5;
  /* Text-size styles */
  --heading-h1: 5.2rem;
  --heading-h2: 4.6rem;
  --heading-h3: 4.1rem;
  --heading-h4: 3.6rem;
  --title-32: 3.2rem;
  --title-29: 2.9rem;
  --title-26: 2.6rem;
  --title-23: 2.3rem;
  --title-20: 2rem;
  --display: 1.8rem;
  --body: 1.6rem;
  --body-small: 1.4rem;
  --footer-13: 1.3rem;
  --footer-11: 1.1rem;
  --footer-10: 1rem;
  --playflair-display-heading: 5.6rem;
  --playflair-display-heading: 4.5rem;
  --playflair-display-heading: 3.6rem;
  --playflair-display-heading: 2.9rem;
  --font-regular: 400;
  --font-medium: 550;
  --font-semibold: 600;
  --font-bold: 700;
  --font-settings: "ss01" on, "ss03" on, "cv01" on, "cv02" on, "cv03" on, "cv04" on, "cv06" on, "cv09" on;
  font-feature-settings: "ss01" on, "ss03" on, "cv01" on, "cv02" on, "cv03" on, "cv04" on, "cv06" on, "cv09" on;
}

@media only screen and (max-width: 1280px) {
  .d-main .d-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .acc-item {
    padding: 10px 8px;
  }
  table.table .t-action {
    display: block !important;
  }
}
@media only screen and (max-width: 1024px) {
  .success-block {
    margin-top: 40%;
  }
  .panel-card {
    max-width: 100% !important;
  }
  .panel-header {
    height: 80px;
  }
  .panel-body {
    padding: 20px;
  }
  .onboard-container {
    grid-template-columns: 1fr !important;
    padding: 0;
  }
  .onboard-container .onboard-steps {
    display: none;
  }
  .onboard-container .onboard-form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }
  .onboard-container .onboard-form .progress-container {
    margin-bottom: 16px;
  }
  .onboard-container .onboard-form .progress-desc {
    color: #486581;
    font-weight: 500;
    margin-top: 4px;
    font-size: 15px;
  }
  .pg-error .error-item {
    justify-content: flex-start;
    padding-top: 12%;
  }
  .alert.full {
    width: 96% !important;
    margin-left: auto;
    margin-right: auto;
  }
  .d-sidebar {
    display: none;
  }
  .d-main {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .d-main .d-header {
    width: 100%;
  }
  .d-main .d-header .pg-header {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
  }
  .d-main .d-header:not(:has(.header-notif)) .h-row:after {
    display: block;
    height: 20px;
    width: 20px;
    content: "";
  }
  .d-card-block {
    grid-template-columns: repeat(2, 1fr);
  }
  .panel-card {
    max-width: 100%;
  }
  .ln-col .card {
    padding: 20px 10px;
  }
  .info-list .info-row .value {
    text-align: right;
  }
  .mobile-nav__trigger {
    display: block;
  }
  .mobile-menu .panel-card {
    max-width: 300px !important;
  }
  .mobile-menu .panel-card .panel-header {
    padding: 16px 16px 10px;
    height: max-content;
  }
  .mobile-menu .panel-card .panel-header .s-logo {
    margin-bottom: 0;
    --img-size: 24px;
  }
  .mobile-menu .panel-card .panel-header .btn-close {
    margin-left: auto;
  }
  .mobile-menu .panel-card .panel-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mobile-menu .panel-card .panel-body .nav-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .n-item {
    margin-right: 0;
  }
}
@media only screen and (max-width: 769px) {
  .auth-area {
    padding: 0 2%;
  }
  .auth-area .auth-form {
    margin-top: 14%;
  }
  .loan-list .loan-item .status-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .loan-list .loan-item .status-header .badge {
    align-self: flex-start;
  }
}
@media only screen and (max-width: 540px) {
  .auth-area .form-footnote {
    flex-direction: column !important;
    gap: 16px;
  }
  .auth-area .code-control {
    width: 100%;
    justify-content: center;
  }
  .form-card {
    padding-left: 20px;
    padding-right: 20px;
  }
  .panel-header {
    padding: 0 16px;
  }
  .form-grid.grid-2 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .d-card-block {
    grid-template-columns: repeat(1, 1fr);
  }
  .card {
    padding: 12px 12px 16px;
  }
  .draft-loan .dr-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .draft-loan .dr-header .col-right {
    width: 100%;
  }
  .draft-loan .dr-header .col-right .btn {
    width: 100%;
  }
  .table-footer {
    flex-direction: column;
    gap: 12px;
  }
  .pagination-item {
    width: max-content;
  }
  .onboard-tracker {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    height: max-content;
  }
  .onboard-tracker .onboard-status {
    width: 100%;
  }
  .onboard-tracker .onboard-status .btn {
    width: 100%;
  }
  .table-header .col-left {
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
  .table-header .col-left .__search {
    width: 100%;
  }
  .table-header .col-left .__search input {
    width: 100%;
  }
  .table-header .col-left .filter-wrapper {
    width: calc(50% - 5px);
  }
  .table-header .col-right:has(.dropdown) {
    grid-template-columns: 1fr;
  }
  .table-header .col-right .dropdown {
    width: 100%;
  }
  .table-header .col-right .dropdown .btn {
    width: 100%;
  }
  .table-header .col-right .dropdown .btn.dropdown-toggle {
    justify-content: space-between;
  }
  .modal-dialog.filter-controls .modal-content {
    padding: 24px 16px;
  }
  .panel-body {
    padding: 20px 12px !important;
  }
  .employee-info {
    padding-bottom: 24px;
  }
  .request-info .nav-tabs,
  .settings-content .nav-tabs,
  .l-tabs .nav-tabs {
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: flex-start;
    white-space: nowrap;
    padding-left: 6px;
  }
  .ln-summary-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .tab-block .tab-content .tab-pane {
    padding: 8px 2px 32px;
  }
  .table-header {
    flex-direction: column;
    gap: 12px;
  }
  .table-header .col-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .table-header .col-right:has(.__search) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .table-header .col-right:has(.__search) > *,
  .table-header .col-right:has(.__search) input {
    width: 100%;
  }
  .table-header > div {
    width: 100%;
  }
  .employee-info .info-row .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .employee-info .info-row .info-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
  .employee-header {
    flex-wrap: wrap;
    gap: 4px;
  }
  .employee-header > div {
    width: 100%;
  }
  .employee-header .em-actions .actions-list .btn {
    flex: 1;
  }
  .password-row {
    flex-direction: column;
    gap: 10px;
    align-items: initial;
  }
  .upload-em .upload-desc {
    flex-direction: column;
    align-items: center;
  }
  .d-card-block.employee {
    grid-template-columns: repeat(1, 1fr);
  }
  .dash-grid {
    display: flex;
    flex-direction: column;
  }
  .loan-list .loan-item .status-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }
  .loan-list .loan-item .status-header .badge {
    align-self: flex-start;
  }
  .loan-form {
    padding: 16px 10px;
  }
  .form-upload.mode-2 .upload-input {
    height: max-content;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .nt-list .list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .nt-list .list-item .nt-link {
    position: relative;
    left: 41px;
  }
  .td-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-menu .panel-card {
    max-width: 320px !important;
  }
  .employee-header .em-actions .actions-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .filter-controls .filter-items .form-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 16px;
    margin-bottom: 16px;
  }
  .filter-controls .filter-items .form-row select,
  .filter-controls .filter-items .form-row input {
    width: calc(50% - 6px);
  }
  .filter-controls .filter-items .form-row:first-of-type {
    padding-top: 0;
  }
  .filter-controls .filter-items .form-row:not(:first-of-type) {
    border-top: 1px solid var(--white-500);
  }
  input,
  select,
  textarea,
  .form-input,
  .form-select {
    font-size: 16px !important;
  }
}
@media only screen and (max-width: 380px) {
  .otp-input .form-input {
    width: 60px !important;
    height: 60px !important;
  }
}
@media only screen and (max-width: 320px) {
  .request-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .employee-info .info-row .card-grid .card .card-value {
    font-size: 16px;
  }
}

/*# sourceMappingURL=main-responsive.css.map */