:root {
    --c-color-1: #F7F8F9;
    --c-color-2: #122935;
    --c-color-3: #1b3c4c;
    --c-color-4: #E7F2F8;
    --c-color-5: #d8dee3;
    --c-color-6: #e6cbad;
    --c-color-7: #0c0c0c;
    --c-color-8: #686767;
    --c-color-9: #F5F4FF;
    --c-color-10: #485861;
    --c-color-11: #E7E5F5;
    --c-color-12: #65C15C;
    --c-color-13: #69b663;
    --c-color-14: #EFEFEF;
    --c-color-15: #d1d1d1;
    --c-color-16: #B4855A;
    --c-color-17: #8E6844;
    --c-color-18: #69BDEB;
    --c-color-19: #FC564A;
    --c-color-20: #e1463b;

    --dt-bg: #ffffff;
    --dt-border: #e5e7eb;
    --dt-text: #111827;
    --dt-muted: #6b7280;
    --dt-primary: #2563eb;
    --dt-primary-soft: #eff6ff;
    --dt-row-hover: #f9fafb;
    --dt-radius: 0px;
    --dt-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    --dt-font-family: 'NotoSansGeorgian-Regular';
}

.dark-btn {
    background: var(--c-color-2);
    color: white;
    padding: 12px 12px;
}

.dark-btn:hover {
    background: var(--c-color-3);
}


.dark-btn-tabs {
    background: var(--c-color-4);
    color: var(--c-color-2);
    padding: 12px 12px;
    position: relative;
    width: fit-content;
    border:1px solid var(--c-color-5);
    box-shadow: 0 0 10px var(--c-color-5);
}

.dark-btn-tabs.active {
    background: var(--c-color-2);
    color: white;
}

.dark-btn-tabs:hover {
    background: var(--c-color-3);
    color: white;
}

.dark-btn-tabs span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 7px;

    background: #FC564A;
    color: white;

    font-size: 12px;
    line-height: 1;

    border-radius: 6px;
    margin-left: 10px;
}


.btn-secondary-c{
    background-color: var(--c-color-7);
    color: white;
}
.btn-secondary-c:hover{
    background-color: var(--c-color-8);
    color: white;
}


.btn-brown-c{
    background-color: var(--c-color-6);
    color: black;
    padding: 15px 27px;
}
.btn-brown-c:hover{
    background-color: var(--c-color-8);
    color: white;
}

.btn-black-c{
    background-color: var(--c-color-7);
    color: white;
}
.btn-black-c:hover{
    background-color: var(--c-color-8);
    color: white;
}

.btn-custom{
    padding: 12px 12px;
}

.btn-sky-c{
    background-color: var(--c-color-4);
    color: black;
    /*padding: 15px 27px;*/
}
.btn-sky-c:hover{
    background-color: var(--c-color-8);
    color: white;
}


.btn-danger-c{
    background-color: var(--c-color-19);
    color: white;
}

.btn-danger-c:hover{
    background-color: var(--c-color-20);
    color: white;
}

.btn-primary-c{
    background-color: var(--c-color-11);
    color: var(--c-color-2);
}
.btn-primary-c:hover{
    background-color: var(--c-color-8);
    color: white;
}

.btn-green-c{
    background-color: var(--c-color-12);
    color: var(--c-color-2);
}
.btn-green-c:hover{
    background-color: var(--c-color-13);
    color: white;
}


.btn-gray-c{
    background-color: var(--c-color-14);
    color: var(--c-color-2);
}
.btn-gray-c:hover{
    background-color: var(--c-color-15);
    color: white;
}

.text-secondary{
    color: var(--c-color-8);
}


.text-black{
    color: var(--c-color-2);
}

.sweet-7 {
    cursor: pointer;
}

.m-b-10 {
    margin-bottom: 10px;
}

.text-bold{
    font-weight: bold;
}

.btn-outline-secondary{
    color: var(--c-color-2) !important;
}

/*OVERRIDE - START*/

/* Bigger small switch override */
.switch-sm .switch {
    width: 40px !important;
    height: 22px !important;
}

.switch-state{
    border: 1px solid rgba(var(--dark-color), 0.2) !important;
}

/* Bigger knob */
.switch-sm .switch .switch-state::before {
    width: 15px !important;
    height: 15px !important;
    left: 4px !important;
    bottom: 3px !important;
}

/* Knob position when checked */
.switch-sm .switch input:checked + .switch-state::before {
    left: -5px !important;
}


/* ========== icon-state base ========== */

.icon-state .switch-state::after {
    position: absolute;
    left: 6.625px !important;
    top: 6.625px !important;
    color: rgba(var(--dark-color), 1);
    opacity: 0.3;
    transition-property: 0.4s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-content: "\efb8";
    content: var(--tw-content);
    font-family: var(--font-ICO);
}

/* ========== icon-state checked ========== */

.icon-state input:checked + .switch-state::after {
    left: 25.25px !important;
    opacity: 1;
    transition-property: 0.4s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-content: "\efad";
    content: var(--tw-content);
}




.active:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .sidebar-link) {
    background: var(--c-color-4) !important;
}

:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .sidebar-link:after {
    background: var(--c-color-2) !important;
}

.active:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .sidebar-link) span {
    color: var(--c-color-2) !important;
}

.active:is(:is(:is(.shipping-form,.checkout-cart) .shipping-options) a) {
    background-color: var(--c-color-2) !important;
}
.active:is(:is(:is(.shipping-form,.checkout-cart) .shipping-options) a)  .stroke-icon-wizard svg {
    stroke: white !important;
}
.tabs .tab-link{
    background-color: var(--c-color-4) !important;
}

:is(:is(:is(.shipping-form,.checkout-cart) .shipping-options) .cart-options) h6 {
    color: black;
}

:is(:is(.radio-primary input[type=radio]):checked+label):after {
    background-color:  var(--c-color-2);
}

:is(:is(:is(:is(:is(.page-wrapper .page-header) .header-wrapper) .nav-right) .onhover-show-div) li) a{
    font-family: 'NotoSansGeorgian-Regular' !Important;
}


.sidebar-list:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .badge{
    right: 10px;
}
.badge-l-primary, .badge-l-primary:hover, .badge-light-primary, .badge-light-primary:hover{
    background-color: var(--c-color-2) !important;
    color:  white !important;
}
.sidebar-list:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .badge{
    font-size: 12px !important;
}
.sidebar-list:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .badge{
    top: 11.5px !important;
}
.sidebar-list a span{
    font-size: 12px !important;
}
.space-y-2> * + * { margin-top: 0.5rem; } /* 10px */
.space-y-2\.5> * + * { margin-top: 0.625rem; } /* 10px */
.space-y-3 > * + * { margin-top: 0.75rem; } /* 16px */
.space-y-4 > * + * {margin-top: 1rem; } /* 16px */
.m-y-5{ margin-top: 1.25rem; margin-bottom: 1.25rem;}



/*pagination*/
/* Base pagination page link */
.pagination .dt-paging-button .page-link {
    background-color: rgba(var(--c-color-3), 1) !important;
    padding-left: calc(4px + (6 - 4) * ((100vw - 320px) / (1920 - 320)));
    padding-right: calc(4px + (6 - 4) * ((100vw - 320px) / (1920 - 320)));
    padding-top: calc(7px + (12 - 7) * ((100vw - 320px) / (1920 - 320)));
    padding-bottom: calc(7px + (12 - 7) * ((100vw - 320px) / (1920 - 320)));
    font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--theme-body-font-color), 1);
}

/* Remove border/shadow on focus */
.pagination .dt-paging-button .page-link:focus {
    border-color: unset;
    --tw-shadow-color: unset;
    --tw-shadow: var(--tw-shadow-colored);
}

/* Active button */
.pagination .dt-paging-button.active .page-link {
    border-color: rgba(var(--theme-default), 1);
    background-color: rgba(var(--theme-default), 1);
    color: rgba(var(--white), 1);
}

.bg-gray {
    --tw-bg-opacity: 1;
    background-color: var(--c-color-5);
}
.bg-status-success {
    --tw-bg-opacity: 1;
    background-color: #65C15C0D;
    border: 1px solid green;
}

.bg-light-gray {
    --tw-bg-opacity: 1;
    background-color: var(--c-color-1);
}

.widget-border-color{
    border-color: var(--c-color-16);
}
.widget-border-color .svg-fill{
 fill:var(--c-color-16);
}
.widget-border-color .bg-round svg{
    fill:var(--c-color-16);
}

/*DATATABLE CUSTOM CLASSES START*/
.dataTable:is(.dataTables_wrapper table) td, .dataTable:is(.dataTables_wrapper table) th {
    padding: 6px !important;
}
.custom-search-container{
    margin-bottom: 37px;
    margin-top: 18px;
}
.custom-search-label{
    margin-right: 10px;
}
.custom-datatable-search-input{
    width: 300px !important;
}
td.actions-column, th.actions-column {
    width: 60px !important;  /* match JS width */
    white-space: nowrap;       /* prevent buttons from breaking lines */
}


/* Prevent double borders / visual duplication */
.dataTables_scrollHead table,
.dataTables_scrollBody table {
    border-collapse: collapse;
    width: 100% !important;
}

/* Hide extra spacing */
.dataTables_scrollHead th,
.dataTables_scrollBody th {
    white-space: nowrap;
}

/* Ensure only ONE visible header */
.dataTables_scrollBody thead {
    visibility: hidden;
}

th.sorting_disabled::before,
th.sorting_disabled::after {
    display: none !important;
}






/*CUSTOM DATATABLE STYLES - START*/
/* ===============================
   Modern DataTable Design
   =============================== */

.datatable-modern {
    background: var(--dt-bg);
    border-radius: var(--dt-radius);
    overflow: hidden;
    border: 1px solid var(--dt-border);
}



/* Wrapper spacing */
.datatable-modern_wrapper {
    padding: 16px;
}

/* ===============================
   Header
   =============================== */
.datatable-modern thead th {
    background: #f9fafb;
    color: var(--dt-text);
    font-weight: 600;
    font-size: 13px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dt-border);
    white-space: nowrap;
}

/* Sort icons subtle */
.datatable-modern thead th.sorting,
.datatable-modern thead th.sorting_asc,
.datatable-modern thead th.sorting_desc {
    background-image: none !important;
}

/* ===============================
   Body rows
   =============================== */
.datatable-modern tbody tr {
    transition: background 0.2s ease  !important;
}

.datatable-modern tbody tr:hover {
    background: var(--dt-border)  !important;
}

.datatable-modern tbody td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: var(--dt-text) !important;
    border-bottom: 1px solid var(--dt-border) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Last row border */
.datatable-modern tbody tr:last-child td {
    border-bottom: none  !important;
}

/* ===============================
   Actions column
   =============================== */
.datatable-modern .actions-column {
    text-align: center  !important;
}

.datatable-modern .actions-column button {
    padding: 6px 10px  !important;
    border-radius: 8px  !important;
}

/* ===============================
   Pagination
   =============================== */
.dataTables_paginate {
    margin-top: 16px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid var(--dt-border) !important;
    padding: 6px 12px !important;
    margin: 0 2px  !important;
    color: var(--dt-text) !important;
    background: #fff !important;
    transition: all 0.2s ease  !important;
}

:is(:is(.dataTables_wrapper .dataTables_paginate) .paginate_button):hover {
    background: var(--dt-primary) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-primary) !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--dt-primary-soft) !important;
    border-color: var(--dt-muted) !important;
    color: var(--dt-muted) !important;
}

.dataTables_wrapper .dataTables_paginate{
    padding: 0 !important;
}
.dataTables_scroll~.dataTables_paginate{
    margin-top: 17px !important;
}
.dataTables_paginate.paging_simple_numbers{
    border:none !important;
}

/* ===============================
   Length select
   =============================== */
.dataTables_length select {
    border-radius: 10px  !important;
    padding: 6px 10px  !important;
    border: 1px solid var(--dt-border)  !important;
    font-size: 13px  !important;
}

/* ===============================
   Info text
   =============================== */
.dataTables_info {
    color: var(--dt-muted)  !important;
    font-size: 13px  !important;
    margin-top: 12px  !important;
    font-family: var(--dt-font-family);
}

/* ===============================
   Custom search input
   =============================== */
.custom-datatable-search-input {
    border-radius: 10px  !important;
    border: 1px solid var(--dt-border)  !important;
    padding: 8px 12px  !important;
    font-size: 14px  !important;
    min-width: 240px  !important;
    transition: all 0.2s ease  !important;
}

.custom-datatable-search-input:focus {
    outline: none  !important;
    border-color: var(--dt-primary)  !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15)  !important;
}

/* Search label */
.custom-search-label {
    font-size: 13px  !important;
    color: var(--dt-muted)  !important;
}

/* ===============================
   Processing overlay
   =============================== */
.dataTables_processing {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(4px)  !important;
    border-radius: 12px  !important;
    font-weight: 600  !important;
    color: var(--dt-primary);
}

/*CUSTOM DATATABLE STYLES - END*/


/*DATATABLE CUSTOM CLASSES END*/


.btn-link {
    color: var(--dt-text);
}
.btn-link:hover{
    color: var(--dt-primary);
}

.radio_animated:before {
    background-color: var(--c-color-3);
}
.checkbox_animated:before{
    border-color: var(--c-color-3);
}

.c-m-b{
    margin-bottom: 0 !important;
}

.card-wrapper .payment-wrapper{
    border:none;
}

.today:is(:is(:is(:is(:is(.default-inline-calender .main-inline-calender) .flatpickr-rContainer) .flatpickr-days) .dayContainer) .flatpickr-day){
    background: var(--c-color-16) !important;
}

/*:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .sidebar-submenu) li) a{*/
/*    color: var(--c-color-10) !important;*/
/*}*/
:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) li) a) span{
    color: var(--c-color-10) !important;
}

:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .sidebar-submenu) li) a:hover{
    color: var(--c-color-17) !important;
}
:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) div.sidebar-wrapper) .sidebar-main) .sidebar-links) .simplebar-wrapper) .simplebar-mask) .simplebar-content-wrapper) .simplebar-content)>li) .sidebar-submenu) li) .sidebar-submenu{
    margin-left: 10px !important;
}

:is(:is(.page-body-wrapper .page-title) .breadcrumb) li{
    font-family: NotoSansGeorgian-Regular, sans-serif !Important;
}

:is(.swal2-container .swal2-actions) .swal2-confirm {
    background-color: rgba(var(--success-color), 1) !important;
}
:is(.swal2-container .swal2-actions) .swal2-cancel {
    background-color: rgba(var(--danger-color), 1);
}
/*OVERRIDE - END*/


.f-c-i > i{
    font-size: 16px;
}
.invoice-block div a{
  color: black !important;
}
.invoice-block div a:hover{
    color: var(--c-color-6) !important;
}

/*MEDIA QUERY - START*/
@layer utilities {
    .flex-row-to-col {
        display: flex;
        flex-direction: row;
    }

    @media (max-width: 1024px) {
        .flex-row-to-col {
            flex-direction: column;
        }

        .sm-m-t-10 {
            margin-top: 10px !important;
        }

        .sm-m-t-20 {
            margin-top: 20px !important;
        }
    }


    /* Grid item order classes */
    .order-none { order: 0; }
    .order-first { order: -9999; }
    .order-last { order: 9999; }
    .order-1 { order: 1; }
    .order-2 { order: 2; }
    .order-3 { order: 3; }
    .order-4 { order: 4; }
    .order-5 { order: 5; }
    .order-6 { order: 6; }
    .order-7 { order: 7; }
    .order-8 { order: 8; }
    .order-9 { order: 9; }
    .order-10 { order: 10; }

    /* Optional: responsive versions */
    @media (max-width: 767px) {
        .md\:order-1 { order: 1 !important; }
        .md\:order-2 { order: 2 !important; }
        .md\:order-3 { order: 3 !important; }
    }

    .responsive-input {
        width: 100% !important;
    }

    @media (min-width: 768px) {
        .responsive-input {
            width: 230px !important;
        }
    }

    @media (min-width: 1200px) {
        .responsive-input {
            width: 370px !important;
        }
    }

}
/*MEDIA QUERY - END*/

 .my-gallery .col-span-2{

 }

 .gallery-delete-image{
     position: absolute;
     top: 8px;
     right: 8px;
     background: red;
     color: #fff;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     padding: 2px 7px;
 }


.dropzone-ui {
    border: 2px dashed #aaa;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
}

.dropzone-ui.dragover {
    background: #f4f4f4;
    border-color: #4f46e5;
}

.preview-grid {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.preview-item {
    position: relative;
    max-height: 150px;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.preview-item button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: red;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 2px 7px;
}
.preview-item button:hover, .gallery-delete-image:hover{
    background: #dd1111;
}

/*CUSTOM DROPZONE - END*/


.v-divider {
    display: flex;
}

.v-divider > * {
    position: relative;
    padding: 0 11px;
    width: 121px;

}

/* vertical divider between items */
/*.v-divider > *:not(:last-child)::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    right: 0;*/
/*    top: 12%;*/
/*    bottom: 0%;*/
/*    width: 1px;*/
/*    background: rgb(135 133 133 / 15%);*/
/*}*/

/* when stacked vertically */
@media (max-width: 768px) {
    .v-divider {
        flex-direction: column;
    }

    .v-divider > * {
        padding: 8px 0;
    }

    .v-divider > *::after {
        top: auto;
        bottom: 0;
        left: 10%;
        right: 10%;
        width: auto;
        height: 1px;
    }
}


/*LANG TABS - START*/
.nav-pills.nav-primary .show>.tab-link, .nav-pills.nav-primary .tab-link.active, .nav-primary .show>.tab-link, .nav-primary .tab-link.active {
    background-color: #f7ebeb!important;
    border-radius: .375rem;
    color: transparent !important;
}
.tabs .tab-link {
     background-color: transparent !important;
}

.tabs .tab-link {
    color: black;
    cursor: pointer;
    padding: 10px 1px 10px 10px !important;
}

/*LANG TABS - END*/

.in-process-label{
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px;
    background-color: #0c0c0c;
    color: white;
    font-size: 14px;
}

.paid-label{
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px;
    background-color: #1e6706;
    color: white;
    font-size: 14px;
}
#simple-bar{
    /*height: calc(100vh - 150px);*/
    height: calc(100vh - 150px);           /* fallback for old browsers */
    height: calc(100dvh - 150px);          /* fix: dynamic viewport height */
    padding-bottom: env(safe-area-inset-bottom); /* fix: iPhone home bar */
    overflow-y: auto;
    box-sizing: border-box;
}


/*profile avatar*/
.profile-avatar {
    position: relative;
    width: 100px;       /* same width as image */
    margin: 0 auto;    /* center the avatar container */
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
}

.manager-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: block;
    border: 1px solid #ccc;
}

.upload-icon {
    position: absolute;
    top: 73%;             /* below the avatar */
    left: 50%;             /* start at horizontal center */
    transform: translateX(-50%); /* center it */
    margin-top: 8px;       /* spacing below avatar */
    text-align: center;
    cursor: pointer;       /* optional: pointer on hover */
}

.upload-icon i{
    font-size: 18px;
    padding: 8px 8px;
    background: white;
    border-radius: 100%;
}

form span.invalid{
    color: red;
}

.balance-wrapper{
    padding: 10px 10px;
    width: 100%;
    background: #E7F2F8;
    border-radius: 8px;
}

/*AVATAR SPINNER - START*/

.profile-avatar {
    position: relative;
    /*width: 90px;*/
    /*height: 90px;*/
}
.user-profile-image-header{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
/* Loader overlay */
.avatar-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: none; /* hidden by default */

    /*display: flex;           !* center children *!*/
    align-items: center;     /* vertical center */
    justify-content: center; /* horizontal center */

    z-index: 10;
}

/* Spinner */
.avatar-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: avatar-spin 0.8s linear infinite;
    /* no need for absolute positioning anymore */
}

@keyframes avatar-spin {
    to { transform: rotate(360deg); }
}

/*AVATAR SPINNER - END*/


.flex-inline-badge .dark-btn-tabs {
    display: inline-flex;   /* make horizontal flex */
    align-items: center;    /* vertically center text and badge */
    gap: 0.3rem;            /* spacing between text and badge */
    font-size: 14px;
}

.flex-inline-badge .dark-btn-tabs span {
    white-space: nowrap;    /* prevent badge from wrapping */
    flex-shrink: 0;         /* keep badge size */
}

/* Small screens (mobile) */
@media (max-width: 768px) {
    .flex-inline-badge .dark-btn-tabs {
        font-size: 14px;    /* smaller text on mobile */
    }

    .flex-inline-badge .dark-btn-tabs span {
        font-size: 12px;    /* smaller badge on mobile */
    }
}

/* Laptop / Medium screens */
@media (max-width: 1440px) {
    .flex-inline-badge .dark-btn-tabs {
        font-size: 11px;
    }

    .flex-inline-badge .dark-btn-tabs span {
        font-size: 13px;
    }
}

/* Tablet / Small screens */
@media (max-width: 1024px) {
    .flex-inline-badge .dark-btn-tabs {
        font-size: 11px;
    }

    .flex-inline-badge .dark-btn-tabs span {
        font-size: 12px;
    }
}

/* Mobile / Very small screens */
@media (max-width: 768px) {
    .flex-inline-badge .dark-btn-tabs {
        font-size: 13px;
    }

    .flex-inline-badge .dark-btn-tabs span {
        font-size: 11px;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .flex-inline-badge .dark-btn-tabs {
        font-size: 12px;
    }

    .flex-inline-badge .dark-btn-tabs span {
        font-size: 10px;
    }
}



/*CUSTOM GRID SYSTEM - START*/
/* --- Container --- */
.custom-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* --- Row --- */
.custom-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;  /* gutter compensation */
    margin-right: -8px;
}

/* --- Columns --- */
.custom-col {
    padding-left: 8px;
    padding-right: 8px;
    flex: 1 1 0%; /* default: equal width */
}

/* --- Column sizes (12-grid system) --- */
.custom-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.custom-col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.custom-col-3  { flex: 0 0 25%;       max-width: 25%; }
.custom-col-4  { flex: 0 0 33.3333%;  max-width: 33.3333%; }
.custom-col-5  { flex: 0 0 41.6667%;  max-width: 41.6667%; }
.custom-col-6  { flex: 0 0 50%;       max-width: 50%; }
.custom-col-7  { flex: 0 0 58.3333%;  max-width: 58.3333%; }
.custom-col-8  { flex: 0 0 66.6667%;  max-width: 66.6667%; }
.custom-col-9  { flex: 0 0 75%;       max-width: 75%; }
.custom-col-10 { flex: 0 0 83.3333%;  max-width: 83.3333%; }
.custom-col-11 { flex: 0 0 91.6667%;  max-width: 91.6667%; }
.custom-col-12 { flex: 0 0 100%;      max-width: 100%; }


/* --- Large screens / laptops (~1440px) --- */
@media (min-width: 1201px) and (max-width: 1599px) {
    .custom-col-lg-3  { flex: 0 0 25%; max-width: 25%; } /* 4 items per row */
    .custom-col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .custom-col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .custom-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* --- Responsive breakpoints --- */
@media (max-width: 1200px) {
    .custom-col-lg-12, .custom-col-lg-11, .custom-col-lg-10, .custom-col-lg-9,
    .custom-col-lg-8, .custom-col-lg-7, .custom-col-lg-6, .custom-col-lg-5,
    .custom-col-lg-4, .custom-col-lg-3, .custom-col-lg-2, .custom-col-lg-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .custom-col-md-12, .custom-col-md-11, .custom-col-md-10, .custom-col-md-9,
    .custom-col-md-8, .custom-col-md-7, .custom-col-md-6, .custom-col-md-5,
    .custom-col-md-4, .custom-col-md-3, .custom-col-md-2, .custom-col-md-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .custom-col-sm-12, .custom-col-sm-11, .custom-col-sm-10, .custom-col-sm-9,
    .custom-col-sm-8, .custom-col-sm-7, .custom-col-sm-6, .custom-col-sm-5,
    .custom-col-sm-4, .custom-col-sm-3, .custom-col-sm-2, .custom-col-sm-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Utilities: gap spacing --- */
.custom-gap-1 { gap: 4px; }
.custom-gap-2 { gap: 8px; }
.custom-gap-3 { gap: 12px; }
.custom-gap-4 { gap: 16px; }
.custom-gap-5 { gap: 24px; }

.custom-center {
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering if row height > button */
}


/* Default: desktop/laptop → align start */
.custom-start {
    display: flex;
    justify-content: flex-start; /* horizontal alignment */
    align-items: center;         /* vertical alignment */
}

/* End alignment if needed */
.custom-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Mobile: override to center */
@media (max-width: 1024px) {
    .custom-start {
        justify-content: center;
    }
    .custom-end {
        justify-content: center;
    }
}

/*CUSTOM GRID SYSTEM - END*/


/*EXTERNAL PAGE CLASSES - START*/
:is(.page-wrapper.compact-wrapper .page-body-wrapper) .page-body-external {
    min-height: calc(100vh - 80px);
    padding-top: 32px;
}

.search-vincode-input-external{
    width: 250px;
}

/* Tablet & Mobile */
@media (max-width: 1024px) {
    :is(.page-wrapper.compact-wrapper .page-body-wrapper) .page-body-external {
        padding-top: 85px;
    }

    .search-vincode-input-external{
        width: 100%;
    }
}

:is(.page-wrapper.compact-wrapper .page-body-wrapper) .page-body-external {
    margin-top: 5rem;
}
:is(.page-wrapper.compact-wrapper .page-body-wrapper) .page-body-external {
    margin-left: 0px;
}
.page-body-wrapper .page-body-external {
    margin-top: var(--header-size);
    min-height: calc(100vh - var(--header-size));
    padding: var(--page-body-padding);
    position: relative;
    transition-duration: .15s;
    transition-property: .5s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
:is(:is(.page-wrapper.compact-wrapper .page-body-wrapper) .page-body-external):before {
    display: none;
}
.page-body-wrapper .page-body-external:before {
    animation: fadeIn .5s ease-in-out;
    content: var(--tw-content);
}


.page-wrapper.compact-wrapper .page-header-external {
    margin-left: 0px;
    width: calc(100% - 0px);

}
.page-wrapper .page-header-external {
    max-width: 100vw;
    position: fixed;
    top: var(--main-header-top);
    width: 100%;
    z-index: var(--main-header-z-index);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-drop-shadow: drop-shadow(var(--main-header-shadow-1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    transition-duration: .15s;
    transition-property: var(--sidebar-transition);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

:is(.page-wrapper .page-header) .header-wrapper-external {
    padding-left: 30px;
    padding-right: 30px;
}
:is(.page-wrapper .page-header) .header-wrapper-external {
    padding-bottom: 22px;
    padding-top: 22px;
}
:is(.page-wrapper .page-header) .header-wrapper-external {
    align-items: center;
}
:is(.page-wrapper .page-header) .header-wrapper-external {
    width: 100%;
}
:is(.page-wrapper .page-header) .header-wrapper-external {
    position: relative;
}

.page-header-external {
    height: 80px;
}


/* Tablet & Mobile */
@media (max-width: 1024px) {
    .page-header-external {
        height: 132px;
    }
}

/* Vertical centering (keep this) */
.header-wrapper-external {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-wrapper-external {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-wrapper-external > div {
    width: 100%;
    padding: 0 15px;
}

/*EXTERNAL PAGE CLASSES - END*/
.income_block_border{
    border: 2px solid var(--c-color-18);
}
.table-fixed {
    table-layout: fixed;
    width: 100%;
}
.spinner-read-status {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #4ade80; /* green for seen, adjust color if you like */
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 6px; /* like ml-2 */
}

/* Keyframes for spinning */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.tab-pan-ta{
    display: none;
}
.tab-pan-ta.show.active{
    display: block;
}
.tabs .tab-link-ta {
    color: black;
    cursor: pointer;
    padding: 10px 1px 10px 10px !important;
}

.nav-pills.nav-primary .show>.tab-link-ta, .nav-pills.nav-primary .tab-link-ta.active, .nav-primary .show>.tab-link-ta, .nav-primary .tab-link-ta.active {
    background-color: #f7ebeb !important;
    border-radius: .375rem;
    color: transparent !important;
}
@media (max-width: 575px) {
    :is(:is(:is(:is(:is(:is(.page-wrapper .page-header) .header-wrapper) .nav-right)>ul) li) .profile-media) img {
        width: auto !important;
    }
    .peer:checked~.peer-checked\:block{
        left: -33px !important;
    }
}
@media (max-width: 480px) {
    :is(:is(:is(.page-wrapper .page-header) .header-wrapper) .nav-right) .onhover-show-div {
        width: 280px;
        position: absolute !important;
        left: -129px !important;
    }
}