:root {
    --mainColor: #F3F3EC;
    --white: white;
    --light-white: #E9EBEC;
    --main-color: #1E1E1E;
    --black: #000000;
    --text-color: #070707;
    --dark-color: #161313;
    --dark-blue: #192252;
    --blue: #002333;
    --blue-dash: #17A2B8;
    --light-blue: #2BC9CC;
    --light-blue-2: #3795A2;
    --green: #35685F;
    --green-17: #17663A;
    --green-1e: #1E874C;
    --green-2d: #2DCA72;
    --light-green: #EEFBF4;
    --red: #D50B3E;
    --red-f5: #F53D6B;
    --light-red: #FEF0F4;
    --gold: #BA9660;
    --light-gold: #C8AB80;
    --brown: #8A6100;
    --bs-border-color: #E9EBEC;
    --transition: 0.2s;
    --fs12: 12px;
    --fs14: 0.875rem;
    --fs15: 0.9375rem;
    --fs16: 1rem;
    --fs18: 1.125rem;
    --fs20: 1.25rem;
    --fs24: 1.5rem;
    --fs26: 1.625rem;
    --fs28: 1.75rem;
    --fs30: 1.875rem;
    --fs32: 2rem;
    --fs36: 2.25rem;
    --fs40: 2.5rem;
    --fs48: 3rem;
    --fs56: 3.5rem;
    --fs64: 4rem;
}

body {
    counter-reset: que-inc;
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ff-main, .ff-main * {
    font-family: var(--main-font) !important;
}
.fs-10, .fs-10 * {
  font-size: var(--fs10) !important;
}
.fs-12, .fs-12 * {
    font-size: var(--fs12) !important;
}
.fs-14, .fs-14 * {
    font-size: var(--fs14) !important;
}

.fs-15, .fs-15 * {
    font-size: var(--fs15) !important;
}

.fs-16, .fs-16 * {
    font-size: var(--fs16) !important;
}

.fs-18, .fs-18 * {
    font-size: var(--fs18) !important;
}

.fs-20, .fs-20 * {
    font-size: var(--fs20) !important;
}

.fs-24, .fs-24 * {
    font-size: var(--fs24) !important;
}

.fs-26, .fs-26 * {
    font-size: var(--fs26) !important;
}

.fs-28, .fs-28 * {
    font-size: var(--fs28) !important;
}

.fs-30, .fs-30 * {
    font-size: var(--fs30) !important;
}

.fs-32, .fs-32 * {
    font-size: var(--fs32) !important;
}

.fs-36, .fs-36 * {
    font-size: var(--fs36) !important;
}

.fs-40, .fs-40 * {
    font-size: var(--fs40) !important;
}

.fs-48, .fs-48 * {
    font-size: var(--fs48) !important;
}

.fs-56, .fs-56 * {
    font-size: var(--fs56) !important;
}

.fs-64, .fs-64 * {
    font-size: var(--fs64) !important;
}


.fw-normal * {
    font-weight: 400 !important;
}

.fw-medium, .fw-medium * {
    font-weight: 500 !important;
}

.fw-semi-bold, .fw-semi-bold * {
    font-weight: 600 !important;
}

.fw-bold, .fw-bold * {
    font-weight: bold !important;
}

.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-35 {
    margin-bottom: 35px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-35 {
    margin-top: 35px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.rg-20 {
    row-gap: 20px;
}

.rg-30 {
    row-gap: var(--bs-gutter-x);
}

.rg-40 {
    row-gap: 40px;
}

.img-cont img {
    object-fit: cover;
}

a {
    text-decoration: none;
}

.card-bg,
.card-gray-bg {
    padding: 24px 20px;
    border-radius: 16px;
    background-color: white;
    margin-bottom: 16px;
}

.card-gray-bg {
    padding: 24px 16px 16px;
    background-color: var(--main-color);
    counter-increment: que-inc;
}

.block-title, .block-title *, .block-text h2,
.block-subtitle, .block-subtitle * {
    font-family: var(--main-font);
    font-size: var(--fs24);
    color: var(--blue);
    font-weight: 500;
    line-height: normal;
}

.block-subtitle, .block-subtitle *, .block-text h3 {
    font-size: var(--fs16);
    font-weight: 400;
}

.block-title,
.block-subtitle {
    margin-bottom: 8px;
}

.block-text, .block-text * {
    font-family: var(--main-font);
    font-size: var(--fs14);
    color: var(--light-blue);
    font-weight: 400;
    line-height: normal;
}

.block-text>ul,
.block-text p {
    margin-bottom: 0px;
}

.block-text>ul:not(:last-child),
.block-text p:not(:last-child) {
    margin-bottom: 10px;
}

.block-text, .block-text p span {
    color: var(--blue);
    font-weight: 500;
}

.btn-cont {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.main-btn,
.secondary-btn {
    display: inline-block;
    color: var(--white);
    font-family: var(--main-font);
    font-size: var(--fs16);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 50px;
    padding: 10px 26px;
    transition: all 0.2s;
    position: relative;
    border: 0px;
    background-color: var(--blue);
}

.main-btn:hover,
.main-btn:focus {
    background-color: var(--light-blue);
    color: white;
}

.secondary-btn,
.secondary-btn:hover,
.secondary-btn:focus {
    padding-block: 10px;
    border: 1px solid var(--light-white);
    background-color: transparent;
    color: var(--blue);
}
.flexBttns_wrap {
    display: flex;
    justify-content: flex-end;
    /* flex-wrap: wrap; */
    flex: 1;
    gap: 6px;
}
.mid-bttn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 13px 25px;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    line-height: 14px;
    height: 40px;
    border-radius: 60px;
    border: 1px solid #848484;
    background:  #FFF;
}
.mid-bttn:hover {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff;
}
.mid-bttn.blue-bk {
    background: #2BC7CB;
    border-color: #2BC7CB;
}
.mid-bttn.green-bk {
    background: #3bd375;
    border-color: #3bd375;
    color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.mid-bttn.blue-bk .plus_span{
    font-size: 22px;
}
.small-bttn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 9px;
    height: 40px;
    min-width: 40px;
    border-radius: 6px;
    border: 1px solid var(--text-color);
    background: #F6F6F6;
}
.grey-bttn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    height: 40px;
    border-radius: 6px;
    background: #F1F1F2;
    color:  #7E8299;
    font-size: 13px;
    font-weight: 400;
    line-height: 14px;
}
.grey-bttn:hover {
  background-color: var(--light-blue);
    color: white;
}
.small-bttn .export_icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    background: url(../img/export.svg) center/contain no-repeat;
}
.small-bttn .filter_icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url(../img/filter-icon.svg) center/contain no-repeat;
}
.dropdown-toggle.after_none::after {
    display: none;
}
.dots_square {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url(../img/dots-square.svg) center/contain no-repeat;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-blue, .text-blue * {
    color: var(--blue) !important;
}

.text-light-blue, .text-light-blue * {
    color: var(--light-blue) !important;
}

.text-light-blue-92, .text-light-blue-92 * {
    color: var(--light-blue-92) !important;
}


.text-red, .text-red * {
    color: var(--red) !important;
}

.text-gold, .text-gold * {
    color: var(--gold) !important;
}

.text-green, .text-green * {
    color: var(--green) !important;
}

.text-green-17, .text-green-17 * {
    color: var(--green-17) !important;
}

.text-green-1e, .text-green-1e * {
    color: var(--green-1e) !important;
}

.text-brown, .text-brown * {
    color: var(--brown) !important;
}

.text-red-f5, .text-red-f5 * {
    color: var(--red-f5) !important;
}

.rounded-16 {
    border-radius: 16px;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-brown {
    background-color: var(--brown) !important;
}

.bg-gold {
    background-color: var(--gold) !important;
}

.bg-light-gold {
    background-color: var(--light-gold) !important;
}

.bg-red-f5 {
    background-color: var(--red-f5) !important;
}

.bg-light-green {
    background-color: var(--light-green) !important;
}

.bg-green-2d {
    background-color: var(--green-2d) !important;
}

.bg-light-red {
    background-color: var(--light-red) !important;
}

.bg-main-color {
    background-color: var(--main-color) !important;
}

/* login23 */

body.login23-page,
body.login-pass-page {
    background-color: #fff;
    height: 100vh;
}

body.login23-page .img-cont {
    padding: 76px 66px;
    /* aspect-ratio: 750/1024; */
    background-color: var(--blue);
    align-content: center;
}
body.login23-page  .img-cont img,
body.login-pass-page img{
    height: 100%;
    border-radius: 0 0 0 188px;
}
.account-box input:-internal-autofill-selected {
    background-color: white !important;
    box-shadow: 0 0 0px 1000px white inset !important;
}

.country-code-wrapper {
    position: relative;
    border-radius: 16px;
}

select#country-code {
    position: absolute;
    top: 50%;
    left: 1px;
    width: fit-content;
    height: calc(100% - 2px);
    outline: unset;
    border-radius: inherit;
    box-shadow: unset;
    border: 0px;
    padding: 0 0px 0px 33px;
    background-position-x: 10px;
    transform: translateY(-50%);
}

select#country-code,
select#country-code * {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.password-container {
    position: relative;
}

.password-container button#toggle-password,
.password-container button#toggle-password-confirm {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 20px;
    height: 14px;
    transform: translateY(-50%);
    background: url(../../assets/img/eye.svg) center/contain no-repeat;
    border: 0px;
    outline: 0px;
    box-shadow: unset;
}

.password-container button#toggle-password::after,
.password-container button#toggle-password-confirm::after {
    content: '';
    width: 20px;
    height: 2px;
    background-color: var(--light-blue-92);
    position: absolute;
    top: 0px;
    left: 46%;
    transform: rotate(-45deg) translateX(-50%);
    pointer-events: none;
    opacity: 1;
}

.password-container button#toggle-password[aria-pressed="true"]::after,
.password-container button#toggle-password-confirm[aria-pressed="true"]::after {
    opacity: 0;
}

/* Header */

.form-search {
    position: relative;
    flex-basis: 100%;
    max-width: 213px;
}
.form-search.full_width {
    max-width: 100% !important;
}

input[type="search"] {
    color: #161313;
    font-size: 13px;
    font-weight: 500;
    line-height: 14px;
    padding: 13px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid #D7D7D7;
}

input[type="search"]::placeholder {
    color: rgba(22, 19, 19, 0.5);
    font-size: 13px;
    font-weight: 500;
    line-height: 14px;
}

.form-search button[type="submit"],
.icon-search-i {
    left: 12px;
    top: 11px;
    width: 20px;
    height: 20px;
    background: url(../img/magnifier.svg) center/contain no-repeat;
    padding: 0;
}

/* modal-open */
body.modal-open {
    overflow: hidden;
    padding-right: 17px !important;
}


/* tables */
.table.dataTable {
    border-spacing: 0px;
}
table.requests_table>tbody>tr>td:first-child {
    border-right: 1px solid #F1F1F2;
}
table.requests_table>tbody>tr>td:last-child {
    border-left: 1px solid #F1F1F2;
}
table.requests_table>tbody>tr>td {
    border-top: 1px solid #F1F1F2;
    border-bottom: 1px solid #F1F1F2;
}
.table>:not(caption)>*>* {
    box-shadow: unset;
}

.table>thead>*>* {
    border-bottom: 0px;
}

table.requests_table>tbody>tr:last-child>td:first-child {
    border-bottom-right-radius: 8px;
}
table.requests_table>tbody>tr:last-child>td:last-child {
    border-bottom-left-radius: 8px;
}

.table>:not(caption)>* * {
    color:  #5E6278;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
}

table thead th {
    color: #A1A5B7 !important;
    font-size: 13px !important;
    background-color: #F9FAFB !important;
}
table .schollDet_name {
	color: #2F2D38 !important;
}


table>thead>tr>th:empty {
    pointer-events: none;
    cursor: auto !important;
}

table>thead>tr>th:empty::before,
table>thead>tr>th:empty::after {
    content: unset !important;
}

.tags-td>div {
    max-width: 225px;
}

.form-check-input {
    background-color: #BEC2C5;
    border: unset;
    transform: rotate(180deg);
}

.form-check-input:checked {
    background-color: #35685F;
    border: unset;
}

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

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

.tags-td>div>span {
    background-color: #EBF0EF;
    border-radius: 8px;
    font-size: 14px;
    color: #35685F;
    padding: 3px 12px;
    font-weight: 400;
}

.switch-td>div {
    width: fit-content;
    background-color: #E9EBEC;
}

span.td-span-more {
    font-weight: 500 !important;
    color: white !important;
    background-color: #35685F !important;
    padding-inline: 6px !important;
}
table.index_table>tbody>tr:last-of-type,
table.index_table>tbody>tr:last-of-type> td {
    border: none !important;
}
table>tbody>tr>td {
    padding-block: 13px !important;
}
table>tbody>tr:has(.under-review) td {
    background-color: var(--main-color);
    border: 0px;
}

table>tbody>tr>td.show-td a,
table>tbody>tr>td.edit-td a {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    border-radius: 16px;
    padding: 8px 14px;
    margin-right: auto;
    width: fit-content;
}

.table-employees tbody td {
    border: 0px !important;
    background-color: #F8F9F9;
}

.table-responsive .row:has(#DataTables_Table_0_filter) {
    display: none;
}

.form-switch input[type="checkbox"]+label,
.form-switch input[type="checkbox"]:checked+label+label {
    display: none;
}

.form-switch input[type="checkbox"]:checked+label {
    display: block;
}

div:has(> #DataTables_Table_0_info) {
    display: flex;
    gap: 8px;
}

.row:has(>div> div.dataTables_paginate) {
    margin-top: 15px !important;
}

ul.pagination {
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px 22px;
}

ul.pagination li {
    flex-shrink: 0;
}

ul.pagination li a {
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: transparent !important;
    border: 1px solid #D9D9D9;
    color: #626262 !important;
    font-size: 14px;
    font-weight: 400;
}

ul.pagination li.active a {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: var(--white) !important;
}
ul.pagination li.previous a,
ul.pagination li.next a {
    border: 0px;
    width: fit-content;
    height: auto;
    overflow: hidden;
    color: #161313 !important;
    font-weight: 500;
}
ul.pagination li.previous a i,
ul.pagination li.next a i {
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: url(../img/select-arrow.svg) center/ contain no-repeat;
}

ul.pagination li.previous a i{
    transform: rotate(180deg);
}

ul.pagination li.previous.disabled a,
ul.pagination li.next.disabled a{
    opacity: .6;
}
div:has(.dataTables_paginate) {
    margin-inline-end: auto;
}
.dataTables_wrapper div:empty {
    display: none;
}
ul.pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid #D9D9D9;
    color: #626262;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/* breadcrumb */
.breadcrumb * {
    font-weight: 500;
    font-size: 14px;
    color: rgba(7, 7 , 7, 0.55);
}

.breadcrumb li {
    --bs-breadcrumb-item-padding-x: .8rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.breadcrumb .active {
    color: var(--text-color);
    font-weight: 500;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '';
    width: 14px;
    height: 14px;
    opacity: .55;
    transform: rotate(180deg);
    background: url(../img/right-icon.svg) center/contain no-repeat;
}

/* img-cont img-placeholder */
.img-cont.img-placeholder {
    width: 60px;
    height: 60px;
}

/* text-head  */
.text-head {
    margin-bottom: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--light-white);
}

/* .modal-content */
.modal-content {
    border-radius: 16px;
    box-shadow: 4px 0 16px 0 rgba(0, 0, 0, 0.08);
}
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 182px;
    background: linear-gradient(180deg, #B1FEFF 0%, #FFF 100%);
    border-radius: 16px;
}
.modal-header {
    padding: 30px;
    border: none;
    position: relative;
    z-index: 3;
}
.modal-body {
    width: 100%;
    padding: 30px;
}
.modal-header .btn-close {
    width: 41px;
    height: 41px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    border: 1px solid #EEE;
    background: #FFF;
}
.close_icon {
    width: 25px;
    height: 25px;
    background: url(../img/close.svg) center/contain no-repeat;
}
.btn-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-opacity: 1;
}

/*** new style ***/
.filters-bar-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 50px;
    width: fit-content;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    padding: 6px;
}
.filterBK_grey {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    background-color: #F9FAFB !important;
    padding: 26px !important;
}
.newSearch_wrap {
    position: relative;
}
input[type="search"].search2_input {
    min-width: 350px;
    height: 38px;
    background-color: transparent;
    border: none;
    padding: 6px;
    background-color: #F9FAFB;
    padding-inline-start: 40px;
}
input[type="search"].search2_input.w-100 {
    min-width: 100%;
}
.search2_bttn{
    background-color: transparent;
    border: none;
    width: 14px;
    height: 14px;
    background: url(../img/magnifier.svg) no-repeat;
    background-size: 14px 14px;
}
.newSearch_wrap .search2_bttn {
    z-index: 9;
    top: 11px;
    right: 11px;
}
.form-select.SM_Select {
    height: 38px;
    width: fit-content;
    text-align: center;
    border: none;
    background-color: transparent;
    border-right: 1px solid #D1D5DB;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
input[type="search"].search2_input.input_bordered,
.form-select.SM_Select.input_bordered,
.SM_Select.input_bordered {
    border: 1px solid #5E6778 !important;
    background-color: #F9FAFB;
    color: #5E6778;
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -ms-border-radius: 8px !important;
    -o-border-radius: 8px !important;
    height: 38px;
}
input[type="search"].search2_input.input_bordered::placeholder {
   color: #5E6778; 
}
.reload_bttn {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    border: none;
    min-width: 38px;
    height: 38px;
    color: #374151;
}
.filter_label {
    font-size: 14px;
    color: #677489;
}

@media(max-width: 575.98px) {
    .newSearch_wrap {
        width: 100%;
    }
    input[type="search"].search2_input {
        width: 100%;
        min-width: auto;
    }
    .form-select.SM_Select, .SM_Select.input_bordered {
        width: 100%;
    }
}

/*** new invoice modal ***/
.invoice-container {
    max-width: 900px;
    margin: auto;
    background: white;
    padding: 20px;
}

/* Header Buttons */
.header-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.inv-btn {
    padding: 10px 25px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: white;
}
.inv-btn:hover {
    background-color: #000;
}

.btn-download { background-color: #1e3a52; }
.btn-remind { background-color: #89d4e8; }

/* Main Header Layout */
.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.invoice-meta {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.header-main-title h1 { font-size: 28px; }


.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.logo-icon {
    background: #89d4e8;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.qr-image img {
    width: 120px;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 15px;
}

.status-badge {
    background: #e8f8f0;
    color: #4caf50;
    padding: 5px 15px;
    border-radius: 5px;
    display: inline-block;
    margin: 10px 0;
}

/* Grid Columns */
.details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 40px;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.inv-column { flex: 1; }

.inv-column h3 {
    border-right: 4px solid #89d4e8;
    padding-right: 10px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.inv-label { 
    display: block;
    color: #888; 
}
.inv-value {
    display: block;
    font-weight: 600;
    color: #1e3a52;
}
.items-section {
    max-width: 350px;
}
/* Totals */
.total-section {
    margin-top: 50px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 550px;
}

.total-amount {
    font-size: 34px;
    font-weight: bold;
    color: #89d4e8;
}

.total-label {
    font-weight: bold;
    font-size: 18px;
}
.title_date {
    padding-inline-start: 20px;
    border-right: 1px solid #A1A5B7;
    display: flex;
    align-items: center;
    gap: 10px;
}
.date_num {
    color: #000;
    font-size: 24px;
    font-weight: 600;
}
.title_day {
   color: #b4bec9; 
}
.calendar_icon {
    color: #2BC7CB;
}
.schollDet_date {
    display: block;
    font-size: 12px !important;
    color: #cacdd0 !important;
}
.bus_icon i {
    color: #17A2B8 !important;
}
.filter-title {
    color: #000;
    font-size: 24px;
}
.filter-title i {
    color: #2BC7CB;
}

/* Container Layout */
.stats-container {
    display: flex;
    gap: 16px;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* Individual Card Base */
.stat-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 16px;
    min-width: 200px;
}

/* Color Variants */
.stat-card.green { background-color: #f6fdf9; }
.stat-card.red { background-color: #fef7f7; }
.stat-card.orange { background-color: #fffaf2; }
.stat-card.blue { background-color: #f9fbfc; }

/* Icon Styling */
.stat-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.green .stat-icon { color: #4caf50; border: 1px solid #e8f5e9; }
.red .stat-icon { color: #f44336; border: 1px solid #ffebee; }
.orange .stat-icon { color: #ff9800; border: 1px solid #fff3e0; }
.blue .stat-icon { color: #1e3a52; border: 1px solid #eceff1; }


.stat-label {
    display: block;
    color: #8a94a6;
    font-size: 14px;
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 28px;
    color: #1e3a52;
    font-weight: 900;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .stats-container {
        flex-wrap: wrap;
    }
    .stat-card {
        flex: 1 1 calc(50% - 16px);
    }
}

.stats-container-row-2 {
    display: flex;
    gap: 20px;
    padding: 20px;
    width: 100%;
}

.stat-card2 {
    flex: 1;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease;
}

.stat-card2:hover {
    transform: translateY(-5px);
}

/* Specific Icon Backgrounds */
.revenue .icon-circle { background-color: #e8f8f0; color: #4caf50; }
.active-subs .icon-circle { background-color: #e0f7fa; color: #00bcd4; }
.expiring .icon-circle { background-color: #fff8e1; color: #ffc107; }

.icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Typography */
.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label2 {
    color: #a0aab8;
    font-size: 14px;
    margin-bottom: 8px;
}

.stat-value2 {
    color: #1e3a52;
    font-size: 26px;
    font-weight: 600;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .stats-container-row-2 {
        flex-wrap: wrap;
    }
    .stat-card2 {
        flex: 1 1 calc(33% - 20px);
        min-width: 250px;
    }
}
.subs_pills {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    background-color: #F9FAFB !important;
    padding: 6px;
    width: fit-content;
}
.nav-pills.subs_pills .nav-link {
    background-color: transparent;
    padding: 8px 30px;
    font-weight: 600;
}
.nav-pills.subs_pills .nav-link.active {
    background-color: #fff;
    color: var(--blue) !important;
}