#main .feature-box {
    width: 278px;
    padding: 0;
}

#main .feature-box .heading {
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--surface-light);
    background-color: var(--primary-dark);
    padding: 20px;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 20px;
}

#main .feature-box .feature-selection {
    height: 620px;
    overflow-y: scroll;
    padding: 14px;
    margin-right: 15px;
    background-color: var(--surface-light);
    border-radius: 10px;
}

.border-bottom {
    border-bottom: 1px solid var(--gray-275);
}

#main .feature-box .feature-selection .check-line {
    margin-top: 15px;
    margin-bottom: 0;
    padding-bottom: 15px;
}

#main .feature-box .feature-selection .check-line label {
    font-size: 16px;
    color: var(--gray-850);
    font-weight: 500;
    padding-left: 5px;
}

#main .page-header {
    border: 0;
    margin: 15px 0 15px 0;
    padding: 0 3px;
}

#main .page-header:after {
    content: "";
    display: table;
    clear: both;
}

#main .page-header .pull-left h1 {
    font-size: 30px;
    color: #2a2a2a;
    line-height: 24px;
    font-weight: 400;
    margin: 20px 0;
}

#main .page-header .pull-left h6 {
    color: var(--text-grey);
    font-weight: normal;
    margin: 0;
}

#main .breadcrumbs {
    background: #f4f4f4;
}

#main .breadcrumbs:after {
    content: "";
    display: table;
    clear: both;
}

#main .breadcrumbs ul {
    list-style-type: none;
    margin: 0;
    padding: 17px 6px;
    zoom: 1;
    float: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#main .breadcrumbs ul span {
    color: var(--text-styles-text-primary, var(--gray-850));
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 145%;
}

#main .breadcrumbs ul:after {
    content: "";
    display: table;
    clear: both;
}

#main .breadcrumbs ul>li {
    float: left;
    color: #A7B1BF;
}

#main .breadcrumbs ul>li>a {

    display: block;
    padding: 2px 8px;
    color: #A7B1BF;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 145%;

}

#main .breadcrumbs ul>li.active>a {

    color: var(--text-styles-accent-primary, var(--primary-dark));
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 145%;
}

#main .breadcrumbs ul>li i {
    float: left;
    font-size: 11px;
    margin: 7px 0 6px 0;
}

#main .breadcrumbs .close-bread {
    float: right;
}

#main .breadcrumbs .close-bread>a {
    color: var(--gray-550);
    display: block;
    font-size: 14px;
    margin: 4px 8px;
}

#main .breadcrumbs .close-bread>a:hover {
    text-decoration: none;
}

#main .ui-state-highlight {
    background: red;
    height: 50px;
}

#main #vmap {
    width: 100%;
    height: 300px;
}

.sidebar-right #left {
    left: auto;
    right: 0;
}

.sidebar-right #left .subnav .dropdown-submenu>a:after {
    display: block;
    float: left;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-left: -9px;
    border-color: rgba(0, 0, 0, 0);
    border-right-color: var(--gray-475);
    border-style: solid;
    border-width: 5px 5px 5px 0;
    content: " ";
}

.sidebar-right #left .subnav .subnav-menu>li.dropdown>a:after {
    position: absolute;
    left: 5px;
    top: 15px;
    width: 5px;
    border-color: rgba(0, 0, 0, 0);
    border-right-color: var(--gray-550);
    border-style: solid;
    border-width: 5px 5px 5px 0;
    content: " ";
}

.sidebar-right #left .subnav .subnav-menu>li.dropdown.open .dropdown-menu {
    left: auto;
    right: 100%;
}

.sidebar-right #left .subnav .subnav-menu>li.dropdown.open>.dropdown-menu {
    border-right: 0;
    border-left: 2px solid var(--gray-475);
}

.sidebar-right #main {
    margin-left: 0;
    margin-right: 200px;
}

#left {
    width: 272px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--background-dark);
    height: 100%;
    overflow-x: visible;
}

#left.mobile-show {
    position: fixed;
    z-index: 1000;
}

#left.full {
    bottom: auto;
    height: auto;
}

#left.sidebar-fixed {
    position: fixed;
    top: 40px;
    overflow-x: hidden;
}

#left.sidebar-fixed .ui-resizable-handle {
    right: 0;
}

#left .subnav {
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid #3A3E4A;
}

#left .subnav:hover .subnav-title .toggle-subnav i {
    display: block;
}

#left .subnav .subnav-menu>li>a {
    height: 30px;
    color: var(--gray-575);
    display: block;
    padding: 5px 0 5px 7px;
    margin-left: 20px;
    border-left: 1px solid #3A3E4A;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
}

#left .subnav .subnav-menu>li>a:hover {
    border-left: 2px solid var(--surface-light);
    color: var(--surface-light);
}

#left .subnav .subnav-menu>li.active>a {
    color: var(--surface-light);
    border-left: 1.5px solid var(--surface-light);
}

.mobile-sidebar-toggle {
    float: left;
    display: block;
    color: var(--surface-light);
    padding: 15px 10px 9px 10px;
    margin-right: 5px;
    display: none;
}

.mobile-sidebar-toggle:hover {
    background: #1e74c5;
    text-decoration: none;
    color: var(--surface-light);
}

.col-left-bg {
    background-color: var(--background-dark);
    background-image: url(/assets/images/trackk_bgmain.png);

}

.login .col-left {
    flex: 1;
    background-color: var(--background-dark);
    background-image: url(/img/trackk_bgmain.png);
    width: 50%;
    padding: 80px;
    position: relative;
}

.login .col-left>h1 {
    margin: 0;
    color: var(--surface-light);
}

.login .col-left h1>a,
.col-left-bg>h1>a {
    color: var(--surface-light);
    display: block;
    font-weight: 700;
    font-size: 2.25rem;
    padding: 2px 0;
    text-decoration: none;
}

.login .col-left h1>a img {
    margin-right: 20px;
    margin-top: -8px;
}

.login .col-left>h2 {
    margin: 0;
    padding: 4rem 0;
    padding-bottom: 0;
    color: var(--surface-light);
    font-size: clamp(16px, 5vw, 3.75rem);
    line-height: 110%;
}

.login .col-left>p {
    padding: 2rem 0rem 0 0;
    color: var(--surface-light);
    font-feature-settings: 'cv04' on, 'cv03' on, 'cv01' on, 'salt' on;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 145%;
    opacity: 0.7;
}

.login .col-left>.testimonial {
    position: absolute;
    max-width: 580px;
    justify-content: center;
    bottom: 80px;
    left: 80px;
    right: 60px;
    border-radius: 20px;
    background-color: #3F4755;
    padding: 24px;
}

.login .col-left>.testimonial p {
    color: var(--office-brown-75, #F0E6E6);
    font-feature-settings: 'cv04' on, 'cv03' on, 'cv01' on;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%;
}



.login .col-left .col_footer,
#left .col_footer {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 30px;
}

.login .col-left .col_footer p,
#left .col_footer p {
    width: 45%;
    color: var(--gray-575-alt);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.login .col-right {
    flex: 1;
}

.steps {
    color: var(--surface-light);
    display: flex;
    position: relative;
}

.steps img {
    height: 100%;
    margin: 40px 10px 0 10px;
}

.steps_inside {
    margin-top: 50px;
}

.steps_inside div {
    position: absolute;
}

.steps_inside div:nth-child(1) {
    margin-top: 0;
}

.steps_inside div:nth-child(2) {
    margin-top: 100px;
}

.steps_inside div:nth-child(3) {
    margin-top: 200px;
}

.steps_inside div:nth-child(4) {
    margin-top: 300px;
}

.steps_inside p {
    font-size: 16px;
    margin: 0;
    color: var(--surface-light);
    white-space: nowrap;
}

.steps_inside span {
    font-size: 14px;
    color: #737D8D;
}

.steps_inside img {
    margin: 40px 10px 10px 10px;
    height: 100%;
}

.steps_inside label {
    margin: 0;
}


.login .wrapper h2 {
    color: var(--gray-850);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    margin-top: 40px;
    margin-bottom: 0;
}

/* .login .wrapper p,
.container-fluid>p:first-of-type {
    color: #737D8D;
    font-family: Euclid Circular B;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 40px;
} */

.login .wrapper .login-body,
.container-fluid .login-body {
    margin-top: 20px;
    background: var(--surface-light);
    border-radius: 16px;
    margin: 0 auto;
    padding: 40px 32px;
    width: 454px;

}

/* Packages BOX */
.pckg_card {
    padding: 20px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: var(--surface-light);
}

.pckg_card .features .feature_group .feature_group_item {
    color: var(--text-styles-text-tertiary, var(--gray-575-alt));
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
    margin: 16px 0;
}

.pckg_card>div>div>h3 {
    font-size: 20px;
    margin: 0;
    line-height: 28px;
}

.pckg_card>div>.feature_price {
    float: right;
    padding-top: 20px;
    padding-right: 20px;
    margin-left: auto;
}

.pckg_card>div>.feature_price>.fsub1 {
    color: var(--gray-850);
    font-size: 20px;
    font-weight: 600;
}

.pckg_card>div>.feature_price>.fsub2 {
    color: var(--gray-850);
    font-size: 48px;
    font-weight: 600;
}

.pckg_card>div>.feature_price>.fsub3 {
    color: var(--gray-575-alt);
    font-size: 16px;
    font-weight: 400;
}

.pckg_card .features h6 {
    margin-top: 30px;
    margin-bottom: 0;
    color: var(--gray-850);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.pckg_card .feature_btn {
    padding: 16px 0;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 8px;
    background: var(--foreground-styles-fg-disabled, var(--gray-450));
}

.pckg_card .feature_btn button {
    color: var(--text-styles-text-white, var(--surface-light));
    background-color: transparent;
    border: none;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
}

.pckg_card .feature_btn button:focus,
.pckg_card .feature_btn:focus,
.pckg_card .feature_btn:active,
.pckg_card .feature_btn button:active {
    background-color: var(--primary-dark);
}

.py-12 {
    padding-bottom: 12px;
    padding-top: 12px;
}

.pl-30 {
    padding-left: 30px;
}

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

.fs-20px {
    font-size: 23px;
}

.w-330px {
    width: 330px;
}
@page {
    size: A4;
    margin: 10mm;
}

@media print {
    body {
        margin: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: white;
    }

    .print-container {
        width: 190mm;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Hide anything outside print area */
    header, nav, footer, .sidebar, .topbar {
        display: none !important;
    }
}/* Select from below and Press Ctrl + F to GOTO their section */
/* 
BOOTSTRAPSection
ButtonSection
BreadCrumbsSection
FilterSection
PAGEHeaderSection
FORMSection
MAINCONTENT
EMPTYSTATE
CUSTOMPAGINATION
CSTMSidebar
TABLES/DATATABLES
SVGsSection
MODALSSection
CUSTOMUploader
LoginSection
OutputMessageValidation/Alert
Attendance
Modal-scrollbar-Styling
CHECKBOXES 
/* Form-Group-Role */
/* Reporting */
/* Animation Classes */




@font-face {
    font-family: 'Inter';
    src: url("/_content/Trackk.UIAssets/assets/css/icons/fontawesome/fonts/Inter-Black.ttf");
    font-weight: 900;
    /* Adjust as needed */
}

@font-face {
    font-family: 'Inter';
    src: url("/_content/Trackk.UIAssets/assets/css/icons/fontawesome/fonts/Inter-Light.ttf");
    font-weight: 300;
    /* Adjust as needed */
}

@font-face {
    font-family: 'Inter';
    src: url("/_content/Trackk.UIAssets/assets/css/icons/fontawesome/fonts/Inter-Medium.ttf");
    font-weight: 500;
    /* Adjust as needed */
}

@font-face {
    font-family: 'Inter';
    src: url("/_content/Trackk.UIAssets/assets/css/icons/fontawesome/fonts/Inter-Regular.ttf");
    font-weight: 400;
    /* Adjust as needed */
}

@font-face {
    font-family: 'Inter';
    src: url("/_content/Trackk.UIAssets/assets/css/icons/fontawesome/fonts/Inter-SemiBold.ttf");
    font-weight: 600;
    /* Adjust as needed */
}

@font-face {
    font-family: 'Inter';
    src: url("/_content/Trackk.UIAssets/assets/css/icons/fontawesome/fonts/Inter-Bold.ttf");
    font-weight: 700;
    /* Adjust as needed */
}

body {
    background-color: var(--gray-175-alt);
    font-family: 'Inter';
    color: var(--gray-850);
}

.navbar-inverse {
    background-color: var(--background-dark);
    border-color: var(--background-dark);
}

.navbar {
    border-width: 2px 0;
    border-width: 2px 0;
}

.navbar-message {
    /* background-color: var(--gray-875); */
    border-radius: 50px;
    padding-top: 7px !important;
    padding-bottom: 9px !important;
}

.navbar-userDrop {
    height: 46px;
    padding-top: 9px !important;
}

.navbar-brand,
.d-flex {
    display: flex;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.justify-content-center {
    display: flex;
    justify-content: center;
}

.gap5 {
    display: flex;
    gap: 5px;
}

.gap10 {
    display: flex;
    gap: 10px;
}

.d-none {
    display: none;
}

.navbar-brand > img {
    max-height: 44px;
}

.navbar-brand span {
    font-size: 24px;
    padding-left: 10px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 2px;
}

.w-auto {
    width: auto;
}

.nicescroll-cursors {
    background-color: #e8562e !important;
}

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

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

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

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

.text-primary2 {
    color: #F24E1E !important;
}

.ml-auto {
    margin-left: auto;
}

.m-12 {
    margin: 12px;
}

.mx-12 {
    margin-left: 12px;
    margin-right: 12px;
}

.my-12 {
    margin-top: 12px;
    margin-bottom: 12px;
}

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

.ml--6px {
    margin-left: -6px;
}

.ml--8px {
    margin-left: -8px;
}

.ml-10px {
    margin-left: 10px !important;
}

.ml-0px {
    margin-left: 0px !important;
}

.ml-8px {
    margin-left: 8px !important;
}

.ml-2px {
    margin-left: 2px !important;
}

.ml-15px {
    margin-left: 15px !important;
}

.ml-20px {
    margin-left: 20px !important;
}

.ml-0px {
    margin-left: 0px !important;
}

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

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

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


.px-18px {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.pl-50px {
    padding-left: 50px !important;
}

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


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




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


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

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

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

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

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

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

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

.ml--10px {
    margin-left: -10px !important;
}

.ml--12px {
    margin-left: -12px !important;
}


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

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

/* .mb-4px {
  margin-bottom: 4px;
} */

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

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

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

/* .mb--6px {
  margin-bottom: -6px !important;
} */

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

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

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

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

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

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


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

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

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

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

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

.ml-20px {
    margin-left: 20px !important;
}

.ml-25px {
    margin-left: 25px !important;
}

.ml-30px {
    margin-left: 30px !important;
}

.ml-13px {
    margin-left: 11px !important;
}



.m-0 {
    margin: 0 !important;
}

.p-15 {
    padding: 15px;
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-2 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

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

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

.px-12px {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.px-4px {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.px-7px {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.px-8px {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.px-10px {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.px-20px {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.px-30px {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

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

.pb-0 {
    padding-bottom: 0 !important;
}

.ml-mr-12px {
    margin-left: 12px;
    margin-right: 12px;
}

.mr-12px {
    margin-right: 12px;
}

.mr-10px {
    margin-right: 10px;
}

.mr-5px {
    margin-right: 5px;
}

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


.pt-0 {
    padding-top: 0 !important;
}

.main_border {
    border-top: 1px solid var(--gray-125);
    border-radius: 8px;
}

.b-0 {
    border: 0;
}

.bt-8 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.bt-0 {
    border-top: 0;
}

.bb-light {
    border-bottom: 1px solid var(--gray-150);
}

.br-6 {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.br-8 {
    border-radius: 8px !important;
}

.br-10 {
    border-radius: 10px !important;
}

.br-16 {
    border-radius: 16px !important;
}

.right0 {
    right: 0;
}

.align-center {
    align-items: center;
}

label .f.w {
    font-weight: 500;
}

.btn-primaryTrack {
    width: 205px;
    padding: 16px 0;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    color: var(--surface-light);
    border: 1px solid var(--border-styles-border-primary, var(--primary));
    background: var(--bg-styles-bg-tertiary, var(--primary));
    margin-right: 10px;
}

.btn-secondaryTrack {
    width: 205px;
    padding: 16px 0;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-styles-border-primary, var(--gray-275));
    background: var(--bg-styles-bg-tertiary, #F2F4F7);
}


/* BOOTSTRAPSection */
.btn.btn-primary {
    background: var(--primary);
    font-family: 'Inter';
    color: var(--surface-light);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    text-shadow: none;
}

.text-400 {
    font-weight: 400 !important;
}

#edu-notif {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
}

#edu-notif-1 {
    font-size: 12px;
    font-weight: 400;
    color: grey;
    cursor: pointer;
    white-space: nowrap;
}

.btn.btn-primary:hover {
    /* background-color: var(--background-dark); */
    transition: background-color 0.5s ease;
    -webkit-box-shadow: none;
    box-shadow: none;
    transform: scale(1.01);
    font-weight: 600;
}

.btn-link {
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    border: 1px solid var(--gray-275);
}

    .btn-link:hover,
    .btn-link:focus,
    .btn-link:active {
        -webkit-box-shadow: none;
        box-shadow: none;
        transform: scale(1.01);
        font-weight: 600;
        color: var(--gray-850);
    }

        .btn-link:focus:not(:hover) {
            -webkit-box-shadow: none;
            box-shadow: none;
            transform: none;
            font-weight: normal;
            border: 1px solid var(--gray-275);
        }

/* ButtonSection */
.heading-btn {
    padding: 7px 0;
    margin: 0;
    background: var(--surface-light);
}

    .heading-btn:hover,
    .btn-icon:hover {
        padding: 7px;
    }

.btn-small {
    border-radius: 6px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    border: 1px solid var(--gray-275);
}

    .btn-small:hover, .btn-small:focus, .btn-small:active {
        padding-left: 10px;
        padding-right: 10px;
        transition: padding 100ms ease-in;
    }
/* Btns Used in Assets */
.item-deleteBtn {
    border: 1px solid var(--gray-275);
    background: none;
    border-radius: 4px;
    padding: 5px 32px;
}

.item-deleteBtns {
    border: 1px solid var(--gray-275);
    background: none;
    border-radius: 4px;
    padding: 5px 19px;
    top: -20px;
    left: -22px;
    position: absolute;
}

.updateBtn {
    height: 36px;
    background-color: var(--orange-50);
    border: 1px solid var(--gray-275);
    border-radius: 4px;
}


/* BreadCrumbsSection */
.breadcrumbs,
.sectionPadding {
    padding: 15px 20px;
}

    .breadcrumbs:after {
        content: "";
        display: table;
        clear: both;
    }

    .breadcrumbs ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        float: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

        .breadcrumbs ul span {
            color: var(--gray-850);
            font-family: 'Inter';
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            padding: 0 15px 0 10px;
        }

        .breadcrumbs ul .backbtn {
            display: flex;
            align-items: center;
        }

            .breadcrumbs ul .backbtn:hover,
            .breadcrumbs ul .backbtn:focus {
                background-color: var(--surface-light);
                border-radius: 10px;
                transition: background-color 0.3s ease-in;
                cursor: pointer;
            }

                .breadcrumbs ul .backbtn:hover span {
                    font-weight: 600;
                    transform: translateX(3px);
                    transition: transform 0.3s ease, font-weight 0.3s ease;
                }

        .breadcrumbs ul:after {
            content: "";
            display: table;
            clear: both;
        }

        .breadcrumbs ul > li {
            float: left;
            color: var(--gray-625);
            font-size: 11px;
            padding: 2px 3px;
            font-weight: 400;
        }

    .breadcrumbs button {
        float: right;
        padding: 7px 12px;
        border-radius: 8px;
    }

    .breadcrumbs ul > li > a {
        color: var(--gray-625);
        display: block;
        padding: 2px 3px;
        font-size: 11px;
        float: left;
        font-weight: 400;
        font-family: 'Inter', sans-serif;
        text-decoration: none;
    }

    .breadcrumbs ul > li.active > a {
        float: left;
        color: var(--primary);
        font-weight: 500;
    }

    .breadcrumbs ul > li i {
        float: left;
        font-size: 11px;
        margin: 7px 0 6px 0;
    }

    .breadcrumbs .close-bread {
        float: right;
    }

        .breadcrumbs .close-bread > a {
            color: var(--gray-550);
            display: block;
            font-size: 14px;
            margin: 4px 8px;
        }

            .breadcrumbs .close-bread > a:hover {
                text-decoration: none;
            }

.icon__link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .icon__link span {
        color: var(--surface-light);
    }

    /* .table tr td.dropdown .dropdown-menu li .link svg ,  */
    .icon__link svg {
        margin-right: 5px;
    }

/* FilterSection */
.filter-dropdown {
    background: var(--surface-light);
    min-width: 230px;
    padding: 8px 10px;
    border: 1px solid var(--gray-175);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
}

.selectedFilter {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin-right: 10px;
    gap: 10px;
}

    /* A chip with many selected values wraps onto new lines instead of
       stretching the row and forcing a horizontal page scroll. */
    .selectedFilter > .dropdown {
        max-width: 100%;
        min-width: 0;
    }

.filter-dropitem {
    display: flex;
    align-items: center;
}

    .filter-dropitem label {
        margin-top: 4px;
        margin-bottom: 0px;
        cursor: pointer;
    }

    .filter-dropitem input[type="checkbox"] {
        margin-right: 8px;
        cursor: pointer;
        accent-color: var(--primary);
    }

/* Compact searchable filter controls */
.filter-search-box {
    width: 100%;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--gray-900);
    background: var(--surface-light);
    border: 1px solid var(--gray-275);
    border-radius: 4px;
}

    .filter-search-box:focus,
    .filter-search-box:focus-visible {
        border-color: var(--primary);
        outline: none;
        box-shadow: none;
    }

/* The list bleeds past its container's 10px inset so a hovered/selected row
   highlights edge to edge; the inset moves onto the row's own padding. */
.filter-option-list {
    max-height: 170px;
    overflow-y: auto;
    margin-top: 6px;
    margin-left: -10px;
    margin-right: -10px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-275) transparent;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--gray-900);
    border-radius: 0;
    cursor: pointer;
}

    .filter-option:hover {
        background-color: var(--orange-50);
    }

    .filter-option.selected {
        background-color: var(--orange-50);
        color: var(--primary-dark);
        font-weight: 500;
    }

    .filter-option input[type="checkbox"] {
        margin: 0;
        cursor: pointer;
        accent-color: var(--primary);
        flex-shrink: 0;
    }

/* Option rows sitting directly in a filter panel (the Yes/No boolean rows)
   have no list wrapper, so they bleed on their own. */
.dropdown-menu > .pl-10 > .filter-option {
    margin-left: -10px;
    margin-right: -10px;
}

/* Compact checkbox/radio used inside filter option rows */
.filter-checkbox {
    width: 13px;
    height: 13px;
    min-width: 13px;
    margin: 0 !important;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* Compact variant of the global brand checkbox, sized to the 12px filter text.
   Type-qualified so it out-specifies the global input[type="checkbox"] rule. */
input[type="checkbox"].filter-checkbox {
    width: 13px;
    height: 13px;
    min-width: 13px;
    border-radius: 3px;
    background-size: 10px 10px;
}

    input[type="checkbox"].filter-checkbox:hover,
    input[type="checkbox"].filter-checkbox:focus-visible {
        box-shadow: 0 0 0 2px rgba(255, 112, 67, 0.18);
    }

/* Custom-drawn radio: orange dot with a darker orange border when checked */
input[type="radio"].filter-checkbox {
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid var(--gray-275);
    border-radius: 50%;
    background-color: var(--surface-light);
    display: inline-grid;
    place-content: center;
}

    input[type="radio"].filter-checkbox::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        transform: scale(0);
        background-color: var(--primary);
    }

    input[type="radio"].filter-checkbox:checked {
        border-color: #E64A19;
    }

    input[type="radio"].filter-checkbox:checked::before {
        transform: scale(1);
    }

/* Selected value text shown inside a filter chip label */
.filter-value-text {
    color: var(--gray-650);
    font-weight: 400;
}

    .filter-option span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.filter-no-result {
    padding: 10px 8px;
    font-size: 12px;
    color: var(--gray-450);
    text-align: center;
}

.filter-list-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
}

    .filter-list-actions a {
        color: var(--primary);
        font-weight: 500;
        cursor: pointer;
    }

.filter-selected-count {
    font-size: 11px;
    color: var(--gray-650);
}

.filter-combo {
    position: relative;
}

.filter-combo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: var(--surface-light);
    cursor: pointer;
}

.filter-combo-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: transparent;
}

.filter-combo-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--surface-light);
    border: 1px solid var(--gray-175);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
}

/* Add Filter Field and Choose a saved filter dropdowns match the select2
   look used by UiComSelect: option rows sized like .select2-results__option
   and the search box matching .select2-search__field's height. The edge-to-edge
   row highlight comes from the shared .filter-option-list bleed above. */
.filter-dropdown .filter-option,
.filter-combo-panel .filter-option {
    padding: 7px 12px;
    font-size: 13px;
    line-height: 20px;
}

.filter-dropdown .filter-search-box,
.filter-combo-panel .filter-search-box {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.filter-dropdown .filter-no-result,
.filter-combo-panel .filter-no-result {
    padding: 10px 12px;
}

.selectedFilter .form-control {
    height: 25px;
}

.selectedFilter .form-control-date {
    border-radius: 6px;
    border: 1px solid var(--Border-Styles-Border-Primary, var(--gray-275));
    background: var(--Text-Styles-Text-White, var(--surface-light));
    width: 100%;
    padding: 0 5px;
}

.selectedFilter2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: white;
    padding-top: 15px;
    margin-left: 21px;
    margin-right: 21px;
    padding-bottom: 15px;
    padding-left: 10px;
}

/*.selectedFilter button {
    border: none;
    padding: 4px 4px;
}*/

.filterDropBtn {
    border: 1px dashed var(--gray-325) !important;
    /*border: 0.0625rem  var(--gray-325) !important;*/
    background-color: transparent;
    padding: 2px 5px;
    gap: 5px;
    border-radius: 2px;
    white-space: normal;
    text-align: left;
    word-break: break-word;
    height: auto;
    min-width: 0;
}

/*Style for disabled option*/
.dropdown-menu select:has(option:checked:disabled) {
    font-style: italic;
}

.customfilterSaveBtn {
    display: flex;
    justify-content: end;
    margin-bottom: 5px;
    gap: 10px;
}

/* ===== Custom Filter (guided, compact redesign) ===== */
.custom-filter {
    padding: 14px 20px 6px;
}

.cf-head {
    margin-bottom: 12px;
}

.cf-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cf-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.2;
}

.cf-subtitle {
    font-size: 12px;
    color: var(--gray-650);
    line-height: 1.35;
}

.cf-step {
    margin-bottom: 4px;
}

.cf-step-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
    flex: 1 1 260px;
    max-width: 360px;
}

.cf-field-auto {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
}

.cf-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700-alt);
    margin: 0;
}

.cf-or {
    font-size: 12px;
    color: var(--gray-450);
    padding-bottom: 8px;
}

.cf-note {
    display: block;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--gray-650);
    line-height: 1.4;
}

    .cf-note b {
        color: var(--gray-675);
        font-weight: 600;
    }

/* Shared pill button base */
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .cf-btn:focus,
    .cf-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.08);
    }

.cf-btn-plus {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* Create New Filter — brand orange */
.cf-btn-create {
    background-color: var(--primary);
    color: var(--surface-light);
}

    .cf-btn-create:hover {
        background-color: var(--primary-dark);
    }

/* Save / Update — green */
.cf-btn-save {
    background-color: #12B76A;
    color: var(--surface-light);
}

    .cf-btn-save:hover {
        background-color: #039855;
    }

/* Delete — soft red */
.cf-btn-delete {
    background-color: #FEF3F2;
    color: var(--state-danger);
    border-color: #FDA29B;
}

    .cf-btn-delete:hover {
        background-color: #FEE4E2;
    }

.cf-details {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-125);
}

.cf-details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cf-details-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 260px;
}

.cf-details-head-text .cf-note {
    margin-top: 2px;
}

.cf-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
}

/* Wrapper for the compact CustomFilterBar on list pages. The bar stays mounted while
   hidden so its chips never desync from the list's Filters, hence a visibility class
   rather than an @if in the markup. */
.cfb-wrap {
    padding: 0 15px 12px 10px;
    background: var(--surface-light);
}

    .cfb-wrap.is-hidden {
        display: none;
    }

.cf-add-field {
    flex: 0 0 auto;
    position: relative;
}

/* Add Filter Field — indigo, text (replaces the old icon-only button) */
.cf-add-field-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--surface-light);
    white-space: nowrap;
    background-color: #5B5BD6;
    border: 1px solid #5B5BD6;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .cf-add-field-btn:hover,
    .cf-add-field-btn:focus {
        background-color: #4A4ACA;
        color: var(--surface-light);
        outline: none;
    }

.cf-add-field-plus {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.cf-chips {
    margin-top: 12px;
}

.cf-empty {
    padding: 14px 16px;
    font-size: 12px;
    color: var(--gray-650);
    text-align: center;
    background: var(--gray-50);
    border: 1px dashed var(--gray-275);
    border-radius: 8px;
}

    .cf-empty b {
        color: var(--gray-675);
        font-weight: 600;
    }

.cf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/*Reporting page*/
.px-28 {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.bg-main2 {
    background-color: var(--gray-125);
}

.filter-border {
    padding-left: 60px;
    padding-right: 30px;
}

.headline:before,
.headline:after {
    content: '';
    flex: 1;
    border-bottom: var(--gray-125) 2px solid;
    margin: auto 0px;
    box-shadow: 0px;
    margin-top: 18px;
}

.headline1:before,
.headline1:after {
    content: '';
    flex: 1;
    border-bottom: var(--gray-875) 2px solid;
    margin: auto 0px;
    box-shadow: 0px;
    margin-top: 18px;
}

.pr-8px {
    position: relative;
    right: 8px;
}

.px-26 {
    padding-left: 26px !important;
    padding-right: 26px !important;
}

.py-6 {
    padding-top: 6px;
    padding-bottom: 6px;
}

.filter2 {
    display: flex;
    justify-self: start;
    gap: 10px;
}

.filter-center2 {
    display: flex;
    justify-content: center;
}

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

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

.brr-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.blr-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.no-border-left {
    border-left: 0 !important;
}

.filterDropBtn:focus,
.filterDropBtn:active:focus {
    box-shadow: none;
}

.remove-filter-btn {
    border: 0;
    border-left: 1px solid var(--gray-325) !important;
    border-radius: 0;
    padding: 0 6px !important;
}

.sF-subdrop {
    margin-bottom: 5px;
    font-size: 11px;
}

    .sF-subdrop > span {
        text-wrap: nowrap;
        margin-right: 5px;
    }

    .sF-subdrop > select {
        border: none;
        font-weight: 500;
        color: var(--primary);
    }

        .sF-subdrop > select:focus-visible {
            outline: none;
        }

.min-wdith-235 {
    min-width: 235px;
}

.cstm-input .input-container {
    display: flex;
    gap: 5px;
}

    .cstm-input .input-container input {
        height: 25px;
        font-size: 12px;
    }

    .cstm-input .input-container button {
        border: none;
        background-color: var(--primary);
        border-radius: 4px;
    }
/*.cstm-input .input-container button svg path{
        stroke:white;
    }*/
.cstm-input ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-275) transparent;
}

    .cstm-input ul li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0px;
        /*margin-bottom: 5px;*/
        /*background-color: var(--gray-45);*/
        border-bottom: 1px solid #e0e0e0;
        /*border-radius: 4px;*/
    }

        .cstm-input ul li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .cstm-input ul li:hover {
            background-color: var(--gray-175-alt); /* Slightly darker background on hover */
        }

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .remove-btn svg {
        transition: transform 0.2s ease; /* Smooth transition for icon */
    }

    .remove-btn:hover svg {
        transform: scale(1.2); /* Slightly enlarge the icon on hover */
    }

    .remove-btn:focus {
        outline: none; /* Remove focus outline */
    }

.reportFilterParent .reportFilterChild button {
    height: 35px;
    font-size: 13px;
}


/* PAGEHeaderSection */

.page-header-content {
    padding: 0;
    border-radius: 8px;
}


.onlyDetailPageh1 {
    font-weight: 700;
    font-size: 24px;
}


/* FORMSection */
label {
    font-weight: 500;
    /*font-weight: 400;*/
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

.input-group input {
    border-radius: 6px;
}

    .input-group input::placeholder {
        color: #d0d7dd;
    }

.input-group .form-control:first-child {
    border-radius: 6px;
}

.input-group-btn:last-child > .btn-search {
    border-radius: 6px;
    margin-left: 5px;
}

.form-control {
    border-radius: 6px;
    border: 1px solid var(--Border-Styles-Border-Primary, var(--gray-275));
    background: var(--Text-Styles-Text-White, var(--surface-light));
}

    /* Hover and focus use the same primary border; leaving the control restores
       the default border. Disabled/readonly controls stay neutral. */
    .form-control:hover:not(:disabled):not([readonly]) {
        border-color: var(--primary);
    }

    /* Typing, clicking in, or holding a native date/time picker open keeps the
       control focused, so :focus covers every "user is interacting" case. */
    .form-control:active,
    .form-control:focus,
    .form-control:focus-visible,
    .form-control:focus-within {
        border: 1px solid var(--primary);
        outline: none;
        box-shadow: none;
    }

.form-group {
    margin-bottom: 15px;
}

/* Select2 */
.select2flex-col {
    display: flex;
    flex-direction: column;
}

.select2-container .select2-selection--single {
    min-height: 36px;
}

.select2-selection--single {
    border-radius: 6px;
    border: 1px solid var(--Border-Styles-Border-Primary, var(--gray-275));
    padding: 0;
}

    .select2-selection--single .select2-selection__arrow:after {
        content: url('../images/arrow-down.svg');
        width: 16px;
        height: 16px;
        margin-top: -7px;
    }

.select2-container--open .select2-selection--single .select2-selection__arrow:after {
    content: url('../images/arrow-down.svg');
    transform: rotate(180deg);
    margin-top: -3px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-grey-800);
    line-height: 33px !important;
}

.select2-selection--single:not([class*=bg-]):not([class*=border-]) {
    border-color: var(--gray-275);
}

.select2-search--dropdown .select2-search__field {
    padding: 0 20px 0 40px !important;
    border: 1px solid var(--gray-275);
    border-radius: 4px;
}

    .select2-search--dropdown .select2-search__field:focus,
    .select2-search--dropdown .select2-search__field:focus-visible {
     
        outline: none;
        box-shadow: none;
    }

/* Select2 replaces the real <select>, so its rendered control needs the hover and
   open/focus border states spelled out to match every other .form-control. */
.select2-container:hover .select2-selection--single,
.select2-container:hover .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--multiple {
    border-color: var(--primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--orange-50) !important;
    color: var(--primary-dark) !important;
}

/* Select2 - MultiSelect */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--orange-50) !important;
    color: var(--primary-dark) !important;
    font-weight: 500;
}

.select2-selection--multiple {
    padding-left: 7px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    padding: 2px 5px !important;
}

.select2-container .select2-search--inline {
    margin-top: 3px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--surface-light) !important;
}

.select2-container .select2-selection--multiple .select2-search__field {
    margin-left: 0;
}

.dwn_abel > p > svg {
    vertical-align: middle;
    /* Align the SVG vertically */
}

.cstm_error_feild {
    border: 1px solid red;
}
/* Custom search feild with cancel button */
.search-box {
    position: relative
}

.searchInput {
    width: 100%;
    padding-right: 30px;
    box-sizing: border-box;
}

.search-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    /*display: none;*/
}
/* AUTOCOMPLETE */

.autocomplete, .autocomplete .input-group {
    width: 100%;
}

    .autocomplete .input-group .input-wrapper input {
        border-radius: 6px;
    }

    .autocomplete .input-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
    }

        .autocomplete .input-wrapper input {
            width: 100%;
            padding-right: 30px; /* Adjust this value based on the size of the button */
        }

            .autocomplete .input-wrapper input:focus,
            .autocomplete .input-wrapper input:focus-visible {
                border: 1px solid var(--primary);
                outline: none;
                box-shadow: none;
            }

    .autocomplete .clear-button {
        position: absolute;
        right: 10px; /* Adjust this value based on your design */
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }

    .autocomplete .view-single {
        border: 1px dashed var(--gray-325);
        padding: 3px 6px 3px;
        line-height: 10px;
    }

    .autocomplete .view-multi {
        line-height: 10px;
    }

    .autocomplete .view-single span, .view-multi span {
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 12px;
        padding-top: 3px;
    }

    .autocomplete .view-single small, .view-multi small {
        font-size: 8px !important;
    }

.autocom-drop {
    width: 100%;
    max-height: 200px;
    margin-top: -8px;
    border: 8px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    overflow-y: auto;
}

    .autocom-drop li {
        padding-left: 12px;
    }

        .autocom-drop li.bb-light:hover {
            cursor: pointer;
            background: var(--orange-50);
            color: var(--primary-dark);
        }

            .autocom-drop li.bb-light:hover .option-text {
                font-weight: 500;
            }

            .autocom-drop li.bb-light:hover small {
                color: var(--primary-dark);
                opacity: .75;
            }

.autocom-placeholder {
    padding: 0 10px;
    color: darkgrey;
}

.autocom-drop .bb-light .option-text {
    display: block;
    /*line-height:10px;*/
}

.autocom-drop .bb-light small {
    display: block;
    color: darkgray;
    font-size: 10px;
    line-height: 10px;
    padding-bottom: 5px;
}

.autocom-drop .li-more {
    color: var(--primary);
    cursor: pointer;
}

.autocomplete .selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.autocomplete .selected-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px dashed var(--gray-325);
    border-radius: 4px;
    background-color: transparent;
    margin-bottom: 3px;
}

    .autocomplete .selected-item button {
        background: transparent;
        border: none;
        border-left: 1px solid var(--gray-325);
        margin-left: 10px;
        padding: 0 0 0 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .autocomplete .selected-item button:hover {
            background: var(--gray-1000);
        }

        .autocomplete .selected-item button svg {
            fill: #231F20;
        }



/* MAINCONTENT */
/* bottom border of header is removed */
.panel {
    box-shadow: none;
    border: 1px solid var(--gray-125);
    border-radius: 3px;
    /*border-top: none;*/
}

.box-title-tabs {
    display: flex;
    /* padding: 0 10px 0px 16px; */
    padding: 0 10px 0px 0px;
    /* border-bottom: 1px solid var(--gray-125); */
    margin-bottom: 0px;
}

    .box-title-tabs > .box-title-tab > button {
        padding: 0;
        margin-right: 16px;
        color: var(--gray-625);
        background: none;
        font-family: 'Inter';
        font-size: 16px;
        font-weight: 400;
        border: none;
        /* padding-bottom: 16px; */
    }

        .box-title-tabs > .box-title-tab > button.active {
            color: var(--gray-850);
            font-weight: 500;
            border-bottom: 2px solid var(--gray-850);
            /* border-top: 2px solid var(--gray-850); */
        }

        .box-title-tabs > .box-title-tab > button:hover,
        .box-title-tabs > .box-title-tab > button:focus {
            color: var(--gray-850);
            font-weight: 500;
            border-bottom: 2px solid var(--gray-850);
            transition: color .5s ease;
        }

.container-detached .panel {
    border-top: 1px solid var(--gray-125);
}

.container-detached .panel-heading {
    background-color: transparent;
}

    .container-detached .panel-heading .panel-title {
        font-size: 20px;
        font-weight: 600;
    }

.form-group .label-grey, .label-grey {
    color: #63666d;
    margin-bottom: 0;
}

.form-group .label2 {
    font-weight: 500;
    text-transform: uppercase;
}

.panel-subtitle {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    margin-top:10px;
    margin-bottom:5px;
}

.ps-extension {
    border-bottom: 1px solid var(--gray-175);
    padding-bottom:5px;
    margin-bottom: 5px;
}
/* EMPTYSTATE */
.center-y {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

.center-empty-state {
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.center-empty-state img {
    width: 140px;
    opacity: 0.85;
}

.center-empty-state p {
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

.row-empty-state {
    display: flex;
    height: 120px;
    /* justify-content: center; */
    align-items: center;
}

.clear-search-button {
    background-color: var(--gray-850);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 18px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

    .clear-search-button:hover {
        background-color: var(--primary);
        padding: 5px 30px;
    }

/* CUSTOMPAGINATION */
.box-footer {
    border-top: 1px solid var(--gray-350);
    padding: 16px;
}

    .box-footer .table_page_indicator {
        padding-top: 5px;
        color: var(--gray-625);
        font-family: 'Inter';
        font-weight: 400;
    }

    .box-footer .pagination > .pagination-item {
        border: 0;
        color: rgba(32, 37, 37, 0.8);
        margin: 0;
        font-size: 13px;
        font-family: 'Inter';
        font-weight: 400;
    }

        .box-footer .pagination > .pagination-item:hover {
            font-weight: 600;
            transform: scale(1.01);
        }

    .box-footer .pagination > .active {
        background-color: var(--orange-50);
        color: var(--primary);
        border-radius: 10px;
    }

    .box-footer .btn-group {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .box-footer .btn-group > .table_btn_prev,
        .box-footer .btn-group > .table_btn_next {
            display: flex;
            align-items: right;
            background-color: var(--surface-light);
            color: var(--gray-625);
            border: 1px solid var(--gray-275);
            border-radius: 5px;
            padding: 7px 12px;
            font-family: 'Inter';
            margin: 0 8px;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
        }

            .box-footer .btn-group > .table_btn_prev svg,
            .box-footer .btn-group > .table_btn_next svg {
                margin-right: 5px;
                margin-left: 5px;
            }

            .box-footer .btn-group > .table_btn_prev:hover,
            .box-footer .btn-group > .table_btn_next:hover {
                font-weight: 600;
                transform: scale(1.01);
                transition: font-weight .3s ease, transform .3s ease;
            }


.pagination-item {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid var(--gray-250);
    border-radius: 5px;
    cursor: pointer;
}

    .pagination-item:hover {
        color: var(--surface-light);
        font-weight: bold;
    }

    .pagination-item.active {
        text-align: center;
        font-feature-settings: 'cv04' on, 'cv03' on;
        /* Paragraph/Small/Regular */
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 145%;
        /* 20.3px */
    }

    .pagination-item.disabled {
        /* color: var(--gray-250); */
        cursor: not-allowed;
        color: var(--primary-500, var(--primary));
    }


/* CSTMSidebar */
/* @media (min-width: 1600px){
.cstm_sidebarlist{width: 17%;}
.cstm_sidebarcontent{width: 83%;}
} */
.sidebar-detached {
    position: sticky;
    top: 40px;
}

@media (max-width: 769px) {
    .sidebar-detached {
        position: relative;
        top: 0px;
    }
}

.imgUpload {
    padding-bottom: 10px;
}

    .imgUpload > a {
        margin-bottom: 0 !important;
        border: 3px solid var(--surface-light);
        border-radius: 50%;
    }

.imgUploadBtn {
    position: absolute;
    bottom: 40px;
    right: 50px;
    border-radius: 50%;
    border: 4px solid var(--surface-light);
    padding: 8px;
    background-color: #3276E8;
}

    .imgUploadBtn:hover {
        background-color: var(--primary);
    }

.cstm_sidebarlist2 {
    padding: 16px;
    background: white;
    border: 1px solid var(--gray-125);
    border-top: none;
}

    .cstm_sidebarlist2 .navigation > li > a {
        margin: 0;
        padding: 12px 20px;
    }

    .cstm_sidebarlist2 .navigation > li.active > a {
        background: var(--surface-light);
    }

    .cstm_sidebarlist2 .navigation {
        background-color: var(--gray-175-alt);
    }

.navigation > li.active > a,
.navigation > li.active > a:hover,
.navigation > li.active > a:focus {
    border-radius: 4px;
}

.navigation > li > a {
    padding: 12px 10px;
    margin: 0 8px;
}

.navigation > li ul li a {
    padding: 10px 20px;
    padding-left: 51px;
    min-height: 40px;
}

.navigation > li ul li.active a {
    background-color: transparent;
}

.sidebar-xs .sidebar-main .navigation > li > a > svg {
    margin: 0px auto;
    display: block;
    float: none;
}

.cstm_sidebarlist2 .navigation li.active a,
.cstm_sidebarlist2 .navigation li.active a svg path {
    border-radius: 0;
    color: var(--primary);
    stroke: var(--primary);
}

.cstm_sidebarlist2 .navigation > li:hover > a {
    background-color: transparent;
    color: var(--gray-850);
    font-weight: 600;
}

.cstm_sidebarlist2 .navigation > li.active:hover > a {
    background: white;
    color: var(--primary);
}



/* For MainSidebar - added fontawesome and jquery file for table icons sort*/
@media (min-width: 769px) {
    /* ===== Sticky left nav / page-scrolls-content =====
       .page-container/.page-content/.sidebar/.content-wrapper are laid out by the
       theme as a CSS table (table/table-row/table-cell), so the sidebar's cell is
       forced to match the content's full height and the whole row (nav included)
       scrolls together with the page instead of only the content scrolling.
       Flex + position:sticky replaces that coupling; 48px matches navbar-top's
       fixed-header offset used elsewhere in the theme. */
    .page-container {
        display: block;
    }

    .page-content {
        display: flex;
        align-items: flex-start;
    }

    .sidebar-main.cstm-msidebar {
        position: sticky;
        top: 48px;
        align-self: flex-start;
        height: calc(100vh - 48px);
        flex: 0 0 auto;
    }

        .sidebar-main.cstm-msidebar .sidebar-content {
            position: static;
            height: 100%;
            overflow-y: auto;
        }

    .content-wrapper {
        flex: 1 1 0%;
        min-width: 0;
    }

    .cstm-msidebar {
        height: 100vh;
    }

    .has-detached-left .content-detached {
        margin-left: 276px;
    }
}

.sub-navigation li a {
    color: var(--gray-850);
    min-height: 40px;
    padding: 8px 10px 0;
}

    .sub-navigation li a span {
        line-height: 24px;
    }

.sidebar-mobile-secondary-toggle {
    display: none;
}

@media (max-width: 1200px) {
    .sidebar-mobile-secondary-toggle {
        display: block;
    }
}

.mandatoryColor {
    color: red;
}

.onlyDetailPage .content-detached {
    margin: 0 20px;
}

.onlyDetailPage .container-detached:last-of-type {
    margin-bottom: 100px;
}


/* TABLES/DATATABLES */
.datatable-header,
.datatable-footer {
    display: none;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 12px 6px;
}

.table > thead > tr > th:first-child,
.table > tbody > tr > th:first-child,
.table > tfoot > tr > th:first-child,
.table > thead > tr > td:first-child,
.table > tbody > tr > td:first-child,
.table > tfoot > tr > td:first-child {
    padding-left: 14px;
}

.company-structure-list-panel {
    padding: 20px 14px;
}
/* @media screen and (max-width: 768px){ */
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
}

/* }} */
.table > thead > tr > th {
    border-top: 1px solid var(--gray-125);
    border-bottom: 1px solid var(--gray-125);
    background-color: #f1f2f4;
}

.table-responsive {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--text-default) var(--gray-350);
}

    .table-responsive::-webkit-scrollbar {
        width: 5px;
        height: 3px;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background-color: var(--background-dark);
    }

    .table-responsive::-webkit-scrollbar-track {
        background-color: var(--gray-350);
    }

.fa {
    padding-left: 2px;
}

.search-with-table {
    float: right;
    margin-top: -52px;
    padding-bottom: 0;
}

@media (max-width: 768px) {
    .search-with-table {
        margin-top: 0;
        padding-bottom: 16px;
    }
}

.custom-icon:before {
    content: url('../images/fa-sort.svg');
    /* Default icon */
    /* width: 16px;  */
    /* height: 16px; */
    display: inline-block;
    vertical-align: middle;
}


.custom-icon.asc:before {
    content: url('../images/fa-sort-asc.svg');
    /* Ascending icon */
}

.custom-icon.desc:before {
    content: url('../images/fa-sort-desc.svg');
    /* Descending icon */
}

th {
    cursor: pointer;
}

td .dropdown .dropdown-toggle,
td .dropup .dropdown-toggle {
    padding: 0 10px;
}

.subSpan {
    display: block;
    font-size: 11px;
    color: grey;
    margin-top: 3px;
}

.td-custom {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.height-label {
    height: 20px;
}

.dropdown-menu {
    border-radius: var(--8, 8px);
    border: 1px solid var(--Border-Styles-Border-Primary, var(--gray-275));
    background: var(--surface-light);
}

.dmenu_table {
    min-width: 120px;
    width: max-content;
}

    .dmenu_table > li > a > i {
        margin-right: 6px;
    }

/* .dropdown-menu > li > a{
padding: 5px; 
} */



/* SVGsSection  */
.svg-with-text {
    display: flex !important;
    align-items: center;
}

    .svg-with-text svg {
        margin-right: 10px;
        /* Adjust the margin as needed */
    }

.inline_flex {
    display: inline-flex;
}

/* CSTMSpinner */
.cstm-spinner {
    animation: spin 2s linear infinite;
    /* Add animation to rotate */
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
        /* Rotate the spinner */
    }
}

.cstm-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}



/* MODALSSection */
.modal-content {
    /*padding: 0 15px;*/
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--gray-175);
    background-color: var(--gray-60);
}

.msc-extension {
    max-height: 320px;
    padding: 0 15px 0 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.modal-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 24px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--gray-175);
    background-color: var(--gray-60) !important;
}

.modal.fade.in {
    background-color: rgba(0, 0, 0, .5);
}
/* CUSTOMUploader */
.uploadContainer,
.addButton,
.tk-file-preview {
    --tk-primary: #eb5017;
    --tk-success: #079455;
    --tk-danger: #D92D20;
    --tk-border: #D0D5DD;
    --tk-ink: #141B34;
    --tk-muted: #667085;
    --tk-surface: #FFFFFF;
    --tk-subtle: #F9FAFB;
    --tk-font: 'Poppins', sans-serif;
    --tk-file-title-size: 11.5px;
    --tk-file-sub-size: 10px;
}

.tk-upload-row { gap: 12px; }
.uploadContainer { min-width: 240px; max-width: 320px; flex: 1 1 240px; min-height: 66px; display: flex; align-items: center; justify-content: space-between; position: relative; font-family: var(--tk-font); background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: 10px; margin: 6px; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tk-upload-row > .uploadContainer { margin: 0; }
.uploadContainer:hover { border-color: var(--tk-primary); box-shadow: 0 4px 12px rgba(50,118,232,.12); transform: translateY(-1px); }
.uploadStatus { flex-grow: 1; cursor: pointer; padding: 7px 10px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.fileInputFeild { display: none !important; }
.fileName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tk-file-title-size); line-height: 1.3; font-weight: 600; text-transform: uppercase; color: var(--tk-ink); }
.statusText { margin-top: 3px; color: var(--tk-primary); font-size: var(--tk-file-sub-size); line-height: 1.3; font-weight: 500; }
.sizePer { float: right; }
.statusTextUploading { color: var(--tk-primary); }
.statusTextSuccess { color: var(--tk-success); }
.statusTextError { color: var(--tk-danger); }
.actionButton { flex: 0 0 auto; margin: 0 10px 0 6px; cursor: pointer; }
.actionButton svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tk-file-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uploadStateNew {
    background-image: url('/_content/Trackk.UIAssets/assets/images/bg_upload.svg');
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: center;
}
.uploadStateNewContent { background-image: none; }
.uploadStateNew:hover, .addButtonContainer:hover { border: 1px dashed var(--tk-primary); }
.uploadStateNewContent .uploadStatus { align-items: center; gap: 1px; padding: 8px 10px; text-align: center; }
.tk-upload-cloud { width: 20px; height: 20px; margin-bottom: 0; fill: none; stroke: var(--tk-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-upload-title { color: var(--tk-primary); font-size: var(--tk-file-title-size); line-height: 1.3; font-weight: 600; }
.tk-upload-hint { color: var(--tk-muted); font-size: var(--tk-file-sub-size); line-height: 1.3; }
.uploadStateInProg { border-style: dashed; border-color: var(--tk-primary); }
.progressContainer { width: 100%; background-color: var(--tk-subtle); margin-top: 6px; height: 5px; overflow: hidden; border-radius: 50px; }
.progressBar { width: 35%; height: 100%; background-color: var(--tk-primary); border-radius: inherit; position: relative; animation: tk-upload-progress 1.4s ease-in-out infinite; }
@keyframes tk-upload-progress { 0% { transform: translateX(-150%); } 100% { transform: translateX(320%); } }
.uploadStateSuccess { border-left: 3px solid var(--tk-success); overflow: hidden; }
.uploadStateError { border-color: var(--tk-danger); border-style: dashed; }
.addButtonContainer { display: flex; align-items: center; }
.addButton { background-color: transparent; border: 1px solid var(--tk-border); cursor: pointer; display: flex; margin: 6px; padding: 8px; border-radius: 12px; align-items: center; font-family: var(--tk-font); color: var(--tk-ink); }
.tk-upload-row > .addButton { margin: 0; }
.addButton svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 10px; }
.addButton:hover svg { color: var(--tk-primary); }
.tk-file-badge { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; margin: 0 0 0 10px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.tk-file-badge--pdf { color: var(--tk-danger); background: rgba(217,45,32,.12); }
.tk-file-badge--doc { color: var(--tk-primary); background: rgba(50,118,232,.12); }
.tk-file-badge--img { color: var(--tk-success); background: rgba(7,148,85,.12); }
.tk-file-badge--generic { color: var(--tk-muted); background: rgba(102,112,133,.12); }
.tk-file-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px; }
.tk-file-action { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; font: 600 var(--tk-file-sub-size)/1.2 var(--tk-font); cursor: pointer; transition: color .15s ease; }
.tk-file-action-label { border-bottom: 1px dashed currentColor; padding-bottom: 1px; transition: border-bottom-color .15s ease, border-bottom-style .15s ease; }
.tk-file-action:hover .tk-file-action-label { border-bottom-style: solid; }
.tk-file-action--view { color: var(--tk-primary); }
    .tk-file-action--view:hover {
        color: var(--tk-primary);
    }
.tk-file-action--download { color: var(--tk-muted); }
.tk-file-action--download:hover { color: var(--tk-ink); }
.tk-file-action:focus-visible, .tk-file-remove:focus-visible, .tk-file-preview button:focus-visible { outline: 2px solid var(--tk-primary); outline-offset: 2px; }
.tk-file-meta { color: var(--tk-muted); font-size: var(--tk-file-sub-size); line-height: 1.3; margin-top: 1px; }
.tk-file-remove { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border: 0; border-radius: 50%; background: transparent; color: var(--tk-danger); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.tk-file-remove:hover { background: rgba(217,45,32,.12); color: #B42318; transform: scale(1.08); }

.tk-file-preview { font-family: var(--tk-font); }
.tk-file-preview-backdrop { z-index: 1050; overflow: hidden; outline: 0; background: rgba(20,27,52,.72); }
.tk-file-preview-dialog { width: 1100px; max-width: 95vw; min-height: 100vh; margin: 0 auto; display: flex; align-items: center; pointer-events: none; }
.tk-file-preview-content { width: 1100px; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; pointer-events: auto; background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: 12px; box-shadow: 0 20px 50px rgba(16,24,40,.24); }
.tk-file-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--tk-border); }
.tk-file-preview-header .modal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tk-ink); font-weight: 600; }
.tk-file-preview-close { position: static; color: var(--tk-muted); opacity: 1; }
.tk-file-preview-body { height: 78vh; overflow: auto; padding: 20px; display: flex; align-items: center; justify-content: center; background: var(--tk-subtle); }
.tk-file-preview-body iframe { width: 100%; height: 100%; border: 0; background: var(--tk-surface); }
.tk-file-preview-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.tk-file-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--tk-muted); text-align: center; }
.tk-file-preview-empty strong { max-width: 80%; overflow: hidden; text-overflow: ellipsis; color: var(--tk-ink); }
.tk-file-preview-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; color: var(--tk-primary); background: rgba(50,118,232,.12); font-size: 13px; font-weight: 700; }
.tk-file-preview-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--tk-border); background: var(--tk-surface); }
.tk-file-preview-media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tk-file-preview-media.is-loading .tk-file-preview-image, .tk-file-preview-media.is-loading iframe { visibility: hidden; }
.tk-file-preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tk-file-preview-spinner { width: 36px; height: 36px; border: 3px solid var(--tk-border); border-top-color: var(--tk-primary); border-radius: 50%; animation: spin .8s linear infinite; }
.tk-file-preview-download, .tk-file-preview-secondary { padding: 8px 14px; border-radius: 8px; font: 600 12px var(--tk-font); cursor: pointer; }
.tk-file-preview-download { border: 1px solid var(--tk-primary); color: var(--tk-surface); background: var(--tk-primary); }
.tk-file-preview-secondary { border: 1px solid var(--tk-border); color: var(--tk-ink); background: var(--tk-surface); }
@media (prefers-reduced-motion: reduce) { .uploadContainer, .progressBar, .tk-file-remove { transition: none; animation: none; } .uploadContainer:hover { transform: none; } .tk-file-remove:hover { transform: none; } }
@media (max-width: 480px) { .uploadContainer { min-width: 240px; max-width: 100%; } .tk-file-actions { gap: 14px; } }




/* ##### LoginSection #####  */
/* ##### LoginSection #####  */
.login_left {
    display: none;
    padding: 50px;
    background-color: #f0f0f0;
    background-image: url(../../assets/images/loginsidepanel.svg);
}

    .login_left h1 {
        margin-top: 20px;
        font-size: 32px;
        font-weight: 300;
        color: var(--surface-light);
    }

    .login_left p {
        margin-top: 20px;
        font-size: 16px;
        color: var(--surface-light);
    }

    .login_left img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: 50px;
        object-fit: contain;
        margin-top: 10px;
    }

.login-form h5 {
    font-size: 24px;
    font-weight: bold;
}

    .login-form h5 > small {
        font-size: 16px;
        font-weight: 400;
    }

.login_right {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gray-75);
}

@media (min-width: 1000px) {
    .login_left {
        display: block;
    }

    .login_right {
        padding-top: 70px;
    }
}

@media (max-width: 1400px) {
    .login_left h1 {
        line-height: 1.2;
        color: var(--surface-light);
    }

    .login_left p {
        margin-top: 0px;
        font-size: 13px;
        color: var(--surface-light);
    }
}
/*FullPageLogin*/

.center-y p {
    width: 278px;
    color: var(--gray-550);
    text-align: justify;
    margin: 0 auto;
}

.left {
    position: relative; /* Ensure the pseudo-element is positioned relative to the left div */
    background-color: #9d9ea1;
    background-image: url(../../assets/images/bg8.jpg);
    /* background-image: url(../../assets/images/loginsidepanel.svg); */
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .left::before {
        /*content: '';*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
        /* z-index: 1; */
    }

.right {
    background-color: var(--surface-light);
    padding: 20px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

    .right h5 {
        font-size: 24px;
    }
/* .right form{
            max-width: 700px;
        } */

.container-flex {
    display: flex;
    height: 100vh;
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hide-md {
    display: none;
}

.show-md {
    display: block;
}

@media (max-width: 1024px) {
    .left {
        height: 200px;
        background-position: center;
    }

    .right {
        padding: 20px;
        justify-content: left;
    }

    .container-flex {
        display: block;
    }

    .login-text {
        display: none;
    }

    .hide-md {
        display: flex;
    }

    .show-md {
        display: none;
    }
}

.login-text {
    /* background: red; */
    padding: 20px 20px 10px;
    position: absolute;
    bottom: 0;
}

    .login-text img {
        margin-bottom: 50px;
    }

    .login-text h4 {
        color: var(--surface-light);
        font-size: 2.5em;
        font-weight: 700;
    }

    .login-text p {
        color: var(--gray-950);
        margin-top: 40px;
        margin-bottom: 0px;
        font-size: 14px;
        padding-right: 20px;
        background: #d3d3d3;
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        /* box-shadow: 0 0 10px 10px #00000017; */
    }

.imgFloat {
    position: absolute;
    top: 30px;
    left: 30px;
}

    .imgFloat h4 {
        font-size: 1.7em;
        font-weight: 700;
        color: var(--surface-light);
    }

.d-none {
    display: none;
}

/* OutputMessageValidation/Alert */
#outputMessage {
    padding: 20px;
    display: none;
    color: #155724;
    border-radius: 6px;
    border-color: #c3e6cb;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 28px;
    border-radius: 6px;
    background: #FFB1A9;
}

    /* Alert close button */
    #outputMessage .closebtn {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        padding: 12px 16px 12px 16px;
        color: black;
        font-weight: bold;
        float: right;
        font-size: 20px;
        line-height: 28px;
        cursor: pointer;
        transition: 0.3s;
    }

        #outputMessage .closebtn:hover {
            color: white;
        }

    /* Alert svg */
    #outputMessage svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-bottom: -4px;
    }

    #outputMessage li {
        margin-left: 10px;
    }

    #outputMessage span {
        color: #231F20;
        position: relative;
        bottom: 19px;
    }

/* ATTENDANCE */
/* Attendance and Calendar */
.vline {
    border-left: 2px solid #F1F2F4;
    margin: 20px auto 0;
    height: 220px;
    width: fit-content;
}

.sm-date {
    width: 130px !important;
}

.bg-dark-black {
    color: var(--gray-650);
}

.bg-dark-green {
    color: #14BA6D;
}

.bg-dark-red {
    color: #EE2750;
}

.bg-black {
    color: var(--gray-900);
}

.bg-yellow {
    color: #F0B604;
}

.bg-dark-blue {
    color: #0070FF;
}

.bg-orgcolor {
    color: var(--primary);
}
/*.panel {
    box-shadow: none;
    border: 1px solid var(--gray-125);
    border-radius: 8px;
}
*/
.editor_table td {
    padding: 5px 12px;
}

    .editor_table td form-control {
        padding: 3px 5px;
    }

.clndr_head .heading-elements {
    margin: 0;
    top: 0;
    height: auto;
}

.clndr_head .heading-form > .form-group > label {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 11px;
}

.clndr_head .heading-form > .form-group > input[type="date"] {
    width: 100px;
    font-size: 11px;
}

.clndr_head .heading-form > .form-group > input {
    padding: 5px;
    height: 35px;
}

.clndr_head .heading-form > .form-group > .gap10 {
    height: 35px;
}

.clndr .card {
    background-color: #E9EAF4;
    padding: 5px 6px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.icon {
    background-color: #e0f0ff;
    border-radius: 50%;
    padding: 5px;
    margin-right: 15px;
    color: var(--blue-400);
    font-size: 2em;
}

.details {
    text-align: left;
}

    .details .name {
        font-size: 13px;
        margin: 0;
        font-weight: bold;
        font-weight: 500;
        color: var(--blue-650);
    }

.role {
    margin: 0;
    color: gray;
}

.clndr .card p {
    font-size: 12px;
    color: var(--blue-650);
    font-weight: 500;
}

.clndr .card-centered {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.clndr .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.clndr .day {
    border: 1px solid var(--gray-350);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

.clndr .day-number {
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    color: black;
}

.clndr .status {
    margin-top: 20px;
}

.clndr .present {
    color: #00BA34;
    background-color: #E5F8EB;
}

.clndr .absent {
    background-color: #FFD9D9;
    color: #E92C2C;
}

.clndr .rest {
    background-color: #d6eaf8;
    color: #1b4f72;
}


.clndr .gezette {
    background-color: #f8c471;
    color: #d35400;
}



.clndr .default-day {
    background-color: #3498db;
}

.clndr .leave {
    background-color: var(--gray-175);
    color: var(--gray-950);
}

.clndr .day-off {
    background-color: #FFF9EC;
    color: #FF9F2D;
}

.clndr .job-card {
    background-color: #E6F3FF;
    color: #0085FF;
}

.clndr .calendar-heading {
    font-size: 14px;
    font-weight: 600;
}

.clndr .border-none {
    border-left: none;
    border-right: none;
    border-top: none;
}

.clndr .bg-calendar-boxes {
    background-color: black;
    border-radius: 50px;
    color: white;
    padding-left: 6px;
    padding-right: 6px;
}



.ml--4px {
    margin-left: -4px;
}

.px-16px {
    padding-right: 16px;
}


/* Modal-scrollbar-Styling */
/* Style the scrollbar */
.modal-body::-webkit-scrollbar {
    width: 12px;
}

/* Track */
.modal-body::-webkit-scrollbar-track {
    background: var(--gray-175-alt);
}

/* Handle */
.modal-body::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 6px;
}

    /* Handle on hover */
    .modal-body::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
        border-radius: 6px;
    }

.modal-body::-webkit-scrollbar-button {
    background-color: yellow;
    display: none;
    border-radius: 6px;
}

    .modal-body::-webkit-scrollbar-button:hover {
        background-color: yellow;
        border-color: var(--primary);
        display: none;
    }
/* END Modal-scrollbar-Styling */


/* CHECKBOXES 1/2 */
/* new */

/* Brand-styled checkboxes (var(--primary) fill, white tick) — applied globally, slightly larger for better visibility */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 21px;
    height: 21px;
    border: 1.5px solid var(--gray-275);
    border-radius: 4px;
    background-color: var(--surface-light);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.05s ease-in-out;
}

    input[type="checkbox"]:checked {
        background-color: var(--primary);
        border-color: var(--primary);
        /* white checkmark */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 4.5L6.5 11L3 7.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    input[type="checkbox"]:indeterminate {
        background-color: var(--primary);
        border-color: var(--primary);
        /* white dash */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8H12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    input[type="checkbox"]:hover {
        box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.18);
    }

    input[type="checkbox"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.30);
    }

    input[type="checkbox"]:active {
        transform: scale(0.92);
    }

    input[type="checkbox"]:disabled {
        background-color: #f0f1f3;
        border-color: var(--gray-275);
        cursor: not-allowed;
        box-shadow: none;
    }

        input[type="checkbox"]:disabled:checked {
            background-color: #c9ccd1;
            border-color: #c9ccd1;
        }

.modal-footer button {
    display: inline-block;
}



#form-group {
    margin-bottom: 15px;
    margin-left: 23px;
}

#footercustom {
    margin-bottom: 20px;
    margin-right: 20px;
}



/* Form-Group-Role */
#fgrsidebar {
    margin-bottom: 18px;
}

#fgrfooter {
    margin-bottom: 18px;
}

.textarea-self-assesment {
    resize: none;
    overflow: auto;
    border-radius: 5px;
    border: 1px solid var(--gray-350);
    color: red;
}

.textarea-self-assesment {
    padding-left: 10px;
    color: gray;
}

/*Attendance and Calendar*/

.details .name {
    font-size: 13px;
    margin: 0;
    font-weight: bold;
    font-weight: 500;
    color: var(--blue-650);
}

.role {
    margin: 0;
    color: gray;
}

.clndr .card p {
    font-size: 12px;
    color: var(--blue-650);
    font-weight: 500;
}

.clndr .card-centered {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.clndr .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.clndr .day {
    border: 1px solid var(--gray-350);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

.clndr .day-number {
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    color: black;
}

.clndr .status {
    margin-top: 20px;
}

.clndr .present {
    color: #00BA34;
    background-color: #E5F8EB;
}

.clndr .absent {
    background-color: #FFD9D9;
    color: #E92C2C;
}

.clndr .leave {
    background-color: var(--gray-175);
    color: var(--gray-950);
}

.clndr .day-off {
    background-color: #FFF9EC;
    color: #FF9F2D;
}

.clndr .job-card {
    background-color: #E6F3FF;
    color: #0085FF;
}

.clndr .calendar-heading {
    font-size: 14px;
    font-weight: 600;
}

.clndr .border-none {
    border-left: none;
    border-right: none;
    border-top: none;
}

.clndr .bg-calendar-boxes {
    background-color: black;
    border-radius: 50px;
    color: white;
    padding-left: 6px;
    padding-right: 6px;
}








.heading-shift {
    color: var(--gray-825);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.heading-items {
    color: var(--gray-825);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}



.check-line {
    position: relative;
    margin-bottom: 10px;
}

    .check-line .inline {
        position: absolute;
        top: -1px;
        left: 30px;
    }

.add-shift-sec {
    color: var(--text-styles-text-primary, var(--gray-850));
    font-feature-settings: 'cv04' on, 'cv03' on, 'cv01' on;
    font-family: inter;
    font-size: 16px;
    font-weight: 100;
}




.form-w-ds {
    width: 160px;
}


.wd {
    width: 312px;
}


.mr {
    position: relative;
    right: 18px;
}

.main_body-add-shift {
    width: auto;
    padding-left: 10px;
    padding-top: 0px;
}

.main_body-define-margin {
    width: auto;
    padding-left: 10px;
    padding-top: 0px;
}

.main_body-define-shift-work {
    width: auto;
    padding-left: 10px;
    padding-top: 0px;
}

.main_body-define-work-rule {
    width: auto;
    padding-left: 10px;
    padding-top: 0px;
}





/* Style for the custom checkboxes */
.custom-radio-container-req-create {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    position: relative;
}

    /* Hide the default checkbox */
    .custom-radio-container-req-create input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Style the custom checkbox */
.custom-radio-checkmark-req-create {
    height: 20px;
    width: 20px;
    background-color: var(--gray-150);
    border-radius: 25px;
    margin-right: 10px;
}

.custom-radio-container-req-create input:checked ~ .custom-radio-checkmark-req-create {
    background-color: var(--primary);
}

/* Change color of custom checkbox when checked */
.custom-radio-container-req-create input:checked + .custom-radio-checkmark-req-create::after {
    content: "";
    display: block;
    position: absolute;
    left: 6.5px;
    top: 3.5px;
    width: 7px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.radio-container-req {
    display: flex;
    gap: 20px;
}


/* Modal Export */
input.styled {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

    /* Style the custom radio button */
    input.styled + label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        display: inline-block;
    }

        input.styled + label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid var(--gray-350);
            background-color: white;
            border-radius: 50%;
            box-sizing: border-box;
        }

    input.styled:checked + label:before {
        background-color: var(--primary);
    }

    input.styled + label {
        pointer-events: none;
    }

.radio-btn-mrg {
    position: relative;
    left: 10px;
}

.panel-body-file {
    margin-top: -18px;
}


.form-complaint {
    margin-left: 10px;
    margin-top: 8px;
}

.form-description {
    margin-left: 10px;
}

.heading-file {
    margin-left: 30px;
}

.form-subject {
    margin-left: 10px;
    margin-top: 8px;
    margin-right: 12px;
}

/* Reuest create-panel sub title */
.reqcreate-mrg {
    margin-left: -6px;
}

.form-request {
    margin-top: 12px;
}

.form-create-item {
    margin-top: 12px;
}

.form-stock-entry {
    margin-top: 12px;
}

.urgency-form-mrgn {
    margin-bottom: 28px;
}

/* items-Create */
.custom-radio-container-create-item-1 {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    margin-bottom: 10px;
}

.create-radio-mr {
    margin-left: 10px;
}

.create-items-ml {
    margin-left: 80px;
}

.form-create-item-ml {
    margin-left: 20px;
}

.hr-item-create {
    margin-left: 85px;
    margin-right: 105px;
    margin-top: 1px;
    margin-bottom: 8px;
}

/* Hide the default checkbox */
.custom-radio-container-create-item-1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Style the custom checkbox */
.custom-radio-checkmark-create-item-1 {
    height: 20px;
    width: 20px;
    background-color: var(--gray-150);
    border-radius: 25px;
    margin-right: 10px;
}

.custom-radio-container-create-item-1 input:checked ~ .custom-radio-checkmark-create-item-1 {
    background-color: var(--primary);
}

/* Change color of custom checkbox when checked */
.custom-radio-container-create-item-1 input:checked + .custom-radio-checkmark-create-item-1::after {
    content: "";
    display: block;
    position: absolute;
    left: 6px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Second */
/* Style for the custom checkboxes */
.custom-radio-container-create-item-2 {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    margin-bottom: 10px;
}

    /* Hide the default checkbox */
    .custom-radio-container-create-item-2 input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Style the custom checkbox */
.custom-radio-checkmark-create-item-2 {
    height: 20px;
    width: 20px;
    background-color: var(--gray-150);
    border-radius: 25px;
    margin-right: 10px;
}

.custom-radio-container-create-item-2 input:checked ~ .custom-radio-checkmark-create-item-2 {
    background-color: var(--primary);
}

/* Change color of custom checkbox when checked */
.custom-radio-container-create-item-2 input:checked + .custom-radio-checkmark-create-item-2::after {
    content: "";
    display: block;
    position: absolute;
    left: 6px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hr-entry-stock {
    margin-left: 45px;
    margin-right: 70px;
    margin-top: 1px;
    margin-bottom: 8px;
}

.heading-items {
    color: var(--gray-825);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

/* items-pages */
.btn-item-custom {
    display: flex;
    align-items: center;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--gray-900);
    background-color: var(--surface-light);
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-family: Inter;
}

    .btn-item-custom svg {
        margin-right: 5px;
    }

/* Horizentally-drop down-Years */
.horizontal-dropdown {
    display: flex;
    align-items: center;
}

    .horizontal-dropdown .form-group {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .horizontal-dropdown label {
        margin-right: 10px;
        margin-top: 5px;
    }

    .horizontal-dropdown select {
        flex-shrink: 0;
    }

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

.prt--8px {
    position: relative;
    top: -8px;
}


/* Cadre_page */
.text-muted {
    color: var(--gray-550);
    font-weight: 700;
}

.mt--2px {
    margin-top: -3px;
}

.grey-color {
    color: grey;
}

.darkred-color {
    color: darkred;
}

.darkgreen-color {
    color: darkgreen;
}

.orange-color {
    color: var(--primary);
}

.main-heading h6 {
    margin-top: -8px;
    /* padding-left: 10px; */
    font-size: 18px;
    font-weight: 600;
    /* border-bottom: 2px solid var(--gray-125); */
}

.ml--13px {
    margin-left: -13px;
}

.grades h6 {
    margin-top: -8px;
    font-size: 16px;
    font-weight: 600;
}

.centered-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: -25px;
}

.f-w-500 {
    font-weight: 500;
}

.pl-400px {
    padding-left: 500px;
}

.fnt-size-15px {
    font-size: 15px;
}

.mt-4px {
    margin-top: 4px;
}


.pl-20px {
    padding-left: 20px;
}

.ck-editor__editable {
    min-height: 250px; /* Set your desired height */
}

/* CKEditor draws its own shell, so it needs the hover/focus border treatment
   applied to its editable area and toolbar rather than to .form-control. */
.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused),
.ck.ck-toolbar {
    border-color: var(--gray-275);
}

.editor-container:hover .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused),
.editor-container:hover .ck.ck-toolbar {
    border-color: var(--primary);
}

.ck.ck-editor__main > .ck-editor__editable.ck-focused {
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

.editor-container:focus-within .ck.ck-toolbar {
    border-color: var(--primary);
}

/* Hide CKEditor's editor-only guide-lines on borderless letter tables.
   Deliberately NOT !important: a real inline border from a pasted Word table
   must win over this rule. Relies on load order (this rule comes after
   ckeditor5.css) rather than specificity.
   Editing-view only - generated letters / PDFs are unaffected. */
.ck-content .table table,
.ck-content .table table td,
.ck-content .table table th {
    border: none;
}

/* Letter editors mirror the typography of the generated PDF (see
   PdfService.AddHeaderAndFooter) so the editing view is WYSIWYG.
   These are FALLBACKS only - a font-family / font-size / line-height carried by
   pasted Word content overrides them, which is why no !important is used here.
   Opt in per editor via UiComRichEditor's ContentClass parameter. */
.letter-editor,
.letter-editor .ck-editor {
    background-color: var(--gray-100-alt);
    border-radius: 4px;
}

.letter-editor .ck-editor__main {
    background-color: var(--gray-100-alt);
    padding: 16px 0;
}

.letter-editor .ck-toolbar,
.letter-editor .ck.ck-toolbar {
    position: sticky;
    top: var(--navbar-height, 48px);
    z-index: 10;
    background-color: var(--surface-light);
    border: 1px solid var(--gray-275);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}

.letter-editor .ck-content,
.ck-content.letter-editor {
    font-family: "Times New Roman", Times, serif;
    font-size: 11pt;
    line-height: 1.5;
    background-color: var(--surface-light) !important;
    max-width: 816px;
    width: 100%;
    margin: 20px auto;
    min-height: 800px;
    padding: 48px 96px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15), 0 4px 8px rgba(60, 64, 67, 0.1);
    border: 1px solid #dadce0;
    border-radius: 2px;
}

.letter-editor .ck.ck-editor__main > .ck-editor__editable.ck-focused,
.ck-content.letter-editor.ck-focused {
    border-color: var(--primary) !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15), 0 4px 8px rgba(60, 64, 67, 0.1) !important;
    outline: none;
}

.letter-editor .ck-content h1,
.ck-content.letter-editor h1 {
    font-size: 11pt;
    font-weight: bold;
}

.letter-editor .ck-content h2,
.ck-content.letter-editor h2 {
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
}

.letter-editor .ck-content h3,
.ck-content.letter-editor h3 {
    font-size: 11pt;
    font-style: italic;
    text-align: center;
}

@media (max-width: 768px) {
    .letter-editor .ck-content,
    .ck-content.letter-editor {
        padding: 24px 16px;
        margin: 10px auto;
    }
}

/* Opt in via UiComRichEditor's FixedHeightPx: pins the editable area to an exact
   height so the authoring box is the same size as the fixed render target
   (see Trackk.Shared.Static.ReportLayout). Overrides the global 250px min-height
   set on .ck-editor__editable above by being more specific, not by !important. */
.editor-fixed-height .ck.ck-editor__main > .ck-editor__editable {
    height: var(--editor-fixed-height);
    min-height: var(--editor-fixed-height);
    max-height: var(--editor-fixed-height);
    overflow-y: auto;
}

/* Report header/footer band editors mirror the band styles emitted by
   PdfService.GenerateSinglePageHtmlTable, so authoring is WYSIWYG: same font,
   same size, same tight block spacing, same image fitting. Paired with
   FixedHeightPx the box is exactly the band that survives into the PDF -
   anything below the fold is clipped there.
   These are FALLBACKS only - a font carried by pasted content overrides them,
   which is why no !important is used. */
.report-band-editor .ck-content,
.ck-content.report-band-editor {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    background-color: var(--surface-light);
    border: 1px dashed var(--gray-275);
}

.report-band-editor .ck-content p {
    margin: 0 0 4px;
}

/* Percentage max-heights would not resolve against the auto-height .ck-content,
   so the band height set by FixedHeightPx is used directly - the same value the
   PDF band uses, keeping logo scaling identical in both. */
.report-band-editor .ck-content img {
    max-width: 100%;
    max-height: var(--editor-fixed-height);
    height: auto;
    object-fit: contain;
}

.report-band-editor .ck-content figure.image,
.report-band-editor .ck-content figure {
    margin: 0;
    max-height: var(--editor-fixed-height);
}

/* Letterheads are often a 2-3 cell CKEditor table; keep it tight and borderless
   inside the band, matching PdfService.GenerateSinglePageHtmlTable. */
.report-band-editor .ck-content .table {
    margin: 0;
}

.report-band-editor .ck-content .table table td,
.report-band-editor .ck-content .table table th {
    padding: 2px 4px;
}

.color-info {
    color: gray;
}

.required {
    padding-left: 5px;
    color: var(--state-danger-500) !important;
}

.table-twoliner {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1 !important;
}

.table-linetwo {
    font-size: 10px;
}

.data-view-sec {
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 30px;
}

.px-view {
    padding-bottom: 18px;
    padding-top: 15px;
    padding-left: 5px;
    padding-right: 5px;
}

.grey-coolor {
    color: #63666D;
}

.heading-detail {
    font-size: 18px;
    letter-spacing: 0px;
    font-weight: 500;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

    .detail-table th,
    .detail-table td {
        padding: 10px 15px;
        text-align: left;
        border-bottom: 1px solid var(--gray-350);
    }

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

.border-panels {
    background-color: var(--gray-125);
    border-radius: 8px;
}


.flex-container-roster {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    background-color: white;
    flex-direction: row;
    flex-wrap: wrap;
}

.container-roster .form-control {
    padding: 0 5px;
    font-size: 11px;
    height: 30px;
}

.flex-child {
    background-color: white;
    margin: 3px;
    padding: 2px;
    width: 137px;
    font-size: 12px;
}

.acussed-sidebar {
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #6E7781;
    border-radius: 15px;
    color: white;
}

/* Timeline-Page */
.timeline-date:before,
.timeline-date:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;
    background-color: var(--gray-950);
    height: 4px;
    width: 4px;
    border-radius: 50%;
    z-index: 1;
}

.timeline:before,
.timeline:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;
    background-color: var(--gray-950);
    height: 4px;
    width: 4px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-container:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background-color: var(--gray-950);
    height: 100%;
    width: 2px;
    z-index: -1;
}

.fs-15 {
    font-size: 15px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.p-12 {
    padding: 12px;
}

.timeline-container {
    z-index: 0;
}

.text-black {
    color: black;
}

@media (min-width: 1025px) {
    .timeline-icon:after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -1px;
        height: 2px;
        width: 16px;
        background-color: var(--gray-950);
        z-index: 1;
    }
}

@media (min-width: 1025px) {
    .timeline-center .timeline-row {
        margin-right: 50%;
        padding-right: 44px;
    }
}

.timeline-center .post-even {
    margin-right: 0;
    padding-right: 0;
    margin-left: 50%;
    padding-left: 44px;
}

/* Style the custom checkbox */
.custom-radio-checkmark-req-create2 {
    height: 20px;
    width: 20px;
    background-color: white;
    /* border-radius: 4px; */
    border-radius: 25px;
    margin-right: 10px;
    /* Adjust spacing between checkbox and label */
}

.custom-radio-container-req-create input:checked ~ .custom-radio-checkmark-req-create2 {
    background-color: var(--primary);
}

/* Change color of custom checkbox when checked */
.custom-radio-container-req-create input:checked + .custom-radio-checkmark-req-create2::after {
    content: "";
    display: block;
    position: absolute;
    left: 6px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-group .label3 {
    font-weight: 500;
    font-size: 12px;
}



/* Reporting */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove spinner buttons in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.report_grid {
    display: grid;
    grid-template-columns: 30px 160px 1fr 1fr 1fr 60px 60px;
    gap: 1rem;
    align-items: end;
    padding: 0 10px;
    background-color: var(--surface-light);
}



/* Animation Classes */
.anim-pop {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

    .anim-pop:hover {
        border: 1px solid var(--primary);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        transform: scale(1.1);
    }

.text-success {
    color: green;
    font-weight: bold;
}

.text-danger {
    color: red;
    font-weight: bold;
}

/* Attendance rows Classes */
.absent {
    background-color: #ffcccc; /* Light Red */
}

.late {
    background-color: #ffeb99; /* Light Yellow */
}

.overtime {
    background-color: #ccffcc; /* Light Green */
}

.normal {
    background-color: #f0f0f0; /* Light Gray */
}

/* Payroll-Pages */
.border-panels {
    background-color: var(--gray-125);
    border-radius: 8px;
}

ul.specials {
    list-style: none;
    padding-left: 0;
    margin-left: 1em;
}

    ul.specials li {
        position: relative;
        padding-left: 1.5em;
        margin-bottom: 0.8em;
        line-height: 1.9;
    }

        ul.specials li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-size: 2.4em;
            /* Slightly larger bullet */
            line-height: 0.75em;
            /* Perfect vertical alignment */
            vertical-align: middle;
        }

        ul.specials li p {
            color: black;
            margin: 0;
            display: inline;
            vertical-align: middle;
            text-transform: capitalize;
        }

.status-clr-orange {
    color: #DC6803;
    padding-left: 10px;
    padding-right: 23px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 50px;
    background-color: #FEE8C7;
}

.status-clr-green {
    color: #0AAF60;
    padding: 5px 18px 5px 10px;
    border-radius: 20px;
    background-color: #CEEFDF;
}



.color-lightyellow {
    color: #FFDB87
}

.color-blue {
    color: #4339F2
}

.color-darkorange {
    color: #FF3A29
}

/* Payroll Detail */
.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.px-12 {
    padding-left: 12px;
    padding-right: 12px;
}

.py-16 {
    padding-bottom: 16px;
    padding-top: 16px;
}

.dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: var(--surface-light);
}

.card {
    flex: 1 1 clamp(250px);
    box-sizing: border-box;
    padding: 0.8rem;
    border: 2px solid var(--gray-125);
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .card h3 {
        color: var(--text-default);
        font-size: 14px;
    }

.dashboard .value {
    font-size: 2rem;
    font-weight: bold;
}

.card p {
    color: #868e96;
    font-size: 14px;
    margin: 0;
    font-weight: 900;
}

.status-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.status-step {
    text-align: center;
    position: relative;
}

.circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 auto;
}

.line {
    width: 60px;
    height: 2px;
    background-color: var(--green-400);
    position: absolute;
    top: 12px;
    left: 100%;
}

.label {
    margin-top: 8px;
    font-weight: 600;
}

.status-text {
    font-size: 12px;
    margin-top: 4px;
    border-radius: 10px;
    padding: 2px 8px;
    display: inline-block;
}

.progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--surface-light);
}

.label {
    margin-top: 8px;
    font-weight: bold;
    text-align: center;
}

.status {
    font-size: 12px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    text-align: center;
}

.progress-steps {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.step {
    position: relative;
    text-align: center;
    width: 120px;
}

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step .line {
    width: 60px;
    height: 2px;
    background-color: var(--green-400);
    position: absolute;
    top: 12px;
    left: 100%;
}

.step:last-child .line {
    display: none;
}

.completed .circle {
    background-color: var(--green-400);
}

.completed .status {
    background-color: #e6f9f0;
    color: var(--green-400);
}

.in-progress .circle {
    border: 2px solid var(--blue-400);
    background-color: var(--surface-light);
    color: var(--blue-400);
}

.in-progress .status {
    background-color: #e6f0ff;
    color: var(--blue-400);
}

.pending .circle {
    background-color: var(--gray-225);
    color: var(--gray-475);
}

.pending .status {
    background-color: var(--gray-225);
    color: var(--gray-475);
}

.status {
    margin-top: 8px;
    font-size: 12px;
    border-radius: 10px;
    padding: 2px 8px;
    display: inline-block;
}

.title {
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
}

.gray {
    background-color: var(--gray-250);
}

.progress-wrapper {
    display: flex;
    justify-content: start;
}

/* Reports CSS starts here*/
/* Reports */
.toolbar {
    background-color: var(--surface-light);
    border: 1px solid var(--gray-125);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 22px;
    margin-right: 25px;
    justify-content: center;
}

.toolbar select,
.toolbar input {
    padding: 4px 10px;
    border: 1px solid var(--gray-275);
    border-radius: 6px;
    background-color: var(--surface-light);
    font-size: 12.5px;
    height: 30px;
}

.toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--gray-275);
    border-radius: 6px;
    background-color: var(--surface-light);
    color: var(--gray-675);
    font-size: 13px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toolbar button:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface-light);
}

.toolbar button.toolbar-btn-accent {
    background-color: #eef4ff;
    border-color: #d1e0ff;
    color: var(--blue-750);
}

.toolbar button.toolbar-btn-accent:hover {
    background-color: var(--blue-750);
    border-color: var(--blue-750);
    color: var(--surface-light);
}

.toolbar button.toolbar-btn-pdf {
    background-color: #fef3f2;
    border-color: #fecdca;
    color: var(--state-danger);
}

.toolbar button.toolbar-btn-pdf:hover {
    background-color: var(--state-danger);
    border-color: var(--state-danger);
    color: var(--surface-light);
}

.toolbar button.toolbar-btn-excel {
    background-color: #ecfdf3;
    border-color: #abefc6;
    color: var(--green-800);
}

.toolbar button.toolbar-btn-excel:hover {
    background-color: var(--green-800);
    border-color: var(--green-800);
    color: var(--surface-light);
}

.toolbar span,
.toolbar > span {
    font-size: 12.5px;
    color: var(--gray-650);
}

.toolbar span.text-bold {
    color: var(--gray-700-alt);
    font-weight: 600;
}

.table-report {
    background: var(--primary);
    color: white;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
}

.report-heading {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    /*padding-top: 20px;*/
}

.report-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--gray-125);
    border-radius: 0 0 6px 6px;
}

.vertical-line {
    border-left: 1px solid var(--gray-125);
    height: 22px;
    margin: 0 2px;
}

table.report-heading th,
table.report-heading td,
td.report,
th.report {
    padding: 5px 8px;
    border: 1px solid var(--gray-125);
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
}

thead.report-table {
    background-color: var(--gray-700-alt);
}

thead.report-table th {
    color: var(--surface-light);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    position: sticky;
    top: 0;
    z-index: 1;
    border-color: var(--gray-675);
}

table.report-heading tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

table.report-heading tbody tr:hover {
    background-color: #fff3ee;
}

table.report-heading tbody tr.total-row,
table.report-heading tbody tr.total-row:hover {
    background-color: #f2f4f7;
}

table.report-heading tbody tr.total-row td {
    font-weight: 700;
    text-align: center;
    border-top: 2px solid var(--gray-450);
}

.login-left-company-name {
    font-weight: bold;
    text-align: center;
}

.login-company-name-container {
    background-color: rgba(255, 255, 255, 0.35);
    padding: 10px;
    border-radius: 2px;
    color: white;
    margin-top: 20px;
}

.login-form {
    background-color: white;
    padding: 90px 60px 50px 60px;
    border-radius: 8px;
    margin-bottom: 60px;
    width: 100%;
    max-width: 500px;
}
/* Device Data*/
.flex-container {
    display: flex;
    gap: 16px;
}

.flex-item {
    flex: 1 1;
}

.filter-actions {
    display: flex;
    gap: 16px;
    padding-top: 26px;
}

.header-sub-menu {
    color: grey;
    font-size: 17px;
}

.header-sub-menu-text {
    color: #7b7878 !important;
    font-weight: 500;
}
/*Hedaer-Dropdown-Panel
*/
.horizental-drop label {
    position: relative;
    top: 7px;
    right: 10px;
    margin-bottom: 0;
    white-space: nowrap;
    width: auto;
}

.header-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-actions-panel {
    display: flex;
    align-items: end;
    flex-wrap: nowrap;
    gap: 12px;
}

.header-flex-item {
    flex: 0 0 auto;
}

.select.form-select {
    min-height: 37px !important;
    padding: 6px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.475rem !important;
    background-color: white !important;
}

.report-filters-section{
    padding-left:0px;
    padding-right:0px;
}
.cstm_sidebarlist3 .navigation {
    background-color: var(--gray-175-alt);
}

    .cstm_sidebarlist3 .navigation li.active a,
    .cstm_sidebarlist3 .navigation li.active a svg path {
        border-radius: 0;
        color: var(--primary);
        stroke: var(--primary);
    }

    .cstm_sidebarlist3 .navigation > li:hover > a {
        background-color: transparent;
        color: var(--gray-850);
        font-weight: 600;
    }

    .cstm_sidebarlist3 .navigation > li.active:hover > a {
        background: white;
        color: var(--primary);
    }

/* Custom Checkbox Sizing, Alignment, and Styling */
input[type="checkbox"].cstm-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    position: static !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    padding-left: 0px !important;
}

label.cstm-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

label.cstm-checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    position: static !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

label.cstm-checkbox-label span,
label.cstm-checkbox-label .ml-20 {
    font-weight: 500 !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
}

/* User Form Group Page Table (UserGroupForm.razor) */
.cstm-group-table th {
    vertical-align: middle !important;
}

.cstm-group-table td {
    vertical-align: middle !important;
}

/* Align headers for columns 2 to 5 to the left (like Title column) */
.cstm-group-table th:nth-child(n+2) {
    text-align: left !important;
}

.cstm-group-table th:nth-child(n+2) label.checkbox,
.cstm-group-table th:nth-child(n+2) label.cstm-checkbox-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* Align checkboxes in body cells for columns 2 to 5 to the left */
.cstm-group-table td:nth-child(n+2) {
    text-align: left !important;
}

.cstm-group-table td:nth-child(n+2) input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: inline-block !important;
    position: static !important;
}

/* User Data Group Page Table (DataGroupForm.razor) */
.cstm-data-table th {
    border: none !important;
    padding: 10px 20px !important;
    vertical-align: middle !important;
}

.cstm-data-table th input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    position: static !important;
}

.cstm-data-table th span {
    margin-left: 0 !important;
    font-weight: 500 !important;
}

.cstm-data-table td {
    vertical-align: middle !important;
}

/* User Letter Group Page Table (UserLetterGroupForm.razor) */
.cstm-letter-table th {
    vertical-align: middle !important;
}

.cstm-letter-table td {
    vertical-align: middle !important;
}

.cstm-letter-table td input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    position: static !important;
    display: inline-block !important;
}

/* Helper class for checkbox alignment when label is multi-line */
.cstm-checkbox-align-start-wrapper label.cstm-checkbox-label {
    align-items: flex-start !important;
}
.cstm-checkbox-align-start-wrapper label.cstm-checkbox-label input[type="checkbox"].cstm-checkbox {
    margin-top: 3px !important;
}




:root {
    --primary: #ff7043;
    --primary-light: #FCDCD2;
    --primary-dark: #eb5017;
    --primary-subtle: #FFF5F2;
    --warning-light: #FFE082;
    --warning-dark: #B45309;
    --warning-subtle: #FFF8E1;
    --primary-green: #c9e338;
    --primary-green-dark: #adc527;
    --primary-brown: #d6b940;
    --background-light: #EFEFEF;
    --background-dark: #0C111D;
    --surface-light: #FFFFFF;
    --surface-dark: #161B28;
    --text-main-light: #1F2937;
    --text-main-dark: #F3F4F6;
    --text-muted-light: #6B7280;
    --text-muted-dark: #9CA3AF;
    --border-light: #E5E7EB;
    --border-dark: #374151;
    --state-danger: #D92D20;
    --state-danger-300: #E57373;
    --state-danger-400: #EF5350;
    --state-danger-500: #F44336;
    --state-green: #8BC34A;
    --state-green-300: #AED581;
    --state-green-400: #9CCC65;
    --state-indigo: #3F51B5;
    --state-indigo-300: #7986CB;
    --state-indigo-400: #5C6BC0;
    --state-info: #00BCD4;
    --state-info-300: #4DD0E1;
    --state-info-400: #26C6DA;
    --state-success-400: #66BB6A;
    --state-success: #4CAF50;
    --state-teal-400: #26A69A;
    --state-violet: #9C27B0;
    --state-violet-300: #BA68C8;
    --state-warning: #FF5722;
    --state-warning-300: #FF8A65;
    --state-blue-400: #29B6F6;
    --state-orange-400: #FFA726;
    --state-pink-400: #EC407A;
    --state-purple-400: #7E57C2;
    --text-grey-800: #444;
    --text-grey: #777;
    --text-default: #333333;
    --alpha-info-background: #E0F7FA;
    --alpha-info-border: #00ACC1;
    --state-primary: #2196F3;
    --green-50: #f0fdf4;
    --green-100: #bfe1cb;
    --green-500: #22c55e;
    --green-700: #15803d;
    --red-50: #FEF2F2;
    --red-100: #FEE2E2;
    --red-700: #B91C1C;
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --red-500: #ef4444;
    --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-primary: 0 0 20px rgba(235, 80, 23, 0.2);
    --radius-lg: 0.60rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    --gray-350: #dddddd;
    --gray-550: #999999;
    --gray-75: #f5f5f5;
    --gray-275: #d0d5dd;
    --gray-125: #eaecf0;
    --gray-850: #20252f;
    --gray-250: #cccccc;
    --gray-150: #eeeeee;
    --gray-25: #fcfcfc;
    --gray-950: #000000;
    --gray-650: #667085;
    --gray-175: #e8e8e8;
    --orange-50: #ffece5;
    --gray-900: #101828;
    --blue-600: #1565c0;
    --gray-325: #c9cccf;
    --gray-1000: #e5e5e5;
    --gray-175-alt: #f1f1f1;
    --gray-875: #1e222c;
    --green-600: #43a047;
    --gray-625: #7d8398;
    --orange-700: #d84315;
    --orange-800: #ef6c00;
    --blue-400: #007bff;
    --green-400: #28c76f;
    --gray-675: #475467;
    --green-300: #4ade80;
    --blue-650: #4d56a2;
    --gray-450: #98a2b3;
    --gray-475: #aaaaaa;
    --red-75: #f7caca;
    --gray-40: #f8f8f8;
    --gray-45: #f9f9f9;
    --gray-60: #fafafa;
    --red-25: #fdeaea;
    --orange-500: #ff7849;
    --green-800: #067647;
    --blue-800: #104d92;
    --green-750: #166534;
    --blue-750: #175cd3;
    --blue-550: #1e88e5;
    --blue-gray-800: #263238;
    --gray-825: #303030;
    --gray-700-alt: #344054;
    --gray-575: #555555;
    --blue-gray-500: #607d8b;
    --gray-575-alt: #737e8f;
    --red-800: #991b1b;
    --orange-750: #9a3412;
    --indigo-300: #a5b4fc;
    --gray-525: #bbbbbb;
    --gray-225: #dcdcdc;
    --gray-100-alt: #f8f9fa;
    --orange-300: #fdba74;
}

/*Breadcrumbs Start*/
.breadcrumb-container {
    display: flex;
    background-color: var(--gray-45);
    padding: 8px 12px;
    margin-bottom: 0px;
    margin-top: 2px;
    /* box-shadow: var(--shadow-subtle); */
    border: 1px solid var(--gray-200);
    border-radius: 0px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-icon {
    font-size: 18px;
    margin-right: 2px;
}

.breadcrumb-separator {
    color: var(--gray-400);
    font-size: 18px;
    margin: 0 4px;
}

.breadcrumb-current {
    font-weight: 500;
    color: var(--primary);
    padding: 4px 2px;
    font-size: 12px;
}
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}
/*.goback-btn {
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}
    .goback-btn:hover {
        color: var(--primary-dark);
    }

        .goback-btn:hover .goback-text{
            font-weight: 700;
            color: var(--primary-dark);
        }

.goback-icon {
    padding-right: 8px;
    color: var(--primary);
}
    .goback-icon:hover {
        padding-right: 8px;
        color: var(--primary-drak);
    }
.goback-text {
    color: var(--primary);
    font-weight: 600;
}*/
.btn-go-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    padding-bottom: 2px;
    border: none;
    background: none;
    padding-right:3px;
}

    .btn-go-back::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }

    .btn-go-back:hover::after {
        transform: scaleX(1);
    }

    .btn-go-back .back-arrow {
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
    }

    .btn-go-back:hover .back-arrow {
        transform: translateX(-4px);
    }

/*Breadcrumbs End*/

/*Page Header Start*/
.page-header {
    margin: 0 0px;
    border: 1px solid var(--gray-125);
    box-shadow: none;
    background-color: var(--surface-light);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.page-header-content-v2 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    flex-wrap: wrap;
}

.page-title-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title-badge {
    background-color: #dee2e6;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
}

.page-description-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    justify-content: flex-end;
    padding-bottom:10px;
}

.page-title h4 {
    margin: 0 0 0px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.15px;
}

.page-title {
    padding: 10px 12px;
    border-radius: 0px;
}

    .page-title p {
        margin: 0;
        color: #999b9f;
        font-size: 12px;
    }

.search-group {
    display: flex;
    align-items: center;
}

.search-input-wrap {
    position: relative;
}


.search-input-wrap input:not(:placeholder-shown) + .clear-btn,
.search-input-wrap input[value]:not([value=""]) + .clear-btn {
    display: block;
}

.white-btn {
    background: white;
}

.search-input-wrap input {
    width: 100%;
    height: 35px;
    border: 1px solid var(--border-light);
    border-radius: 4px 0 0 4px;
    padding: 0 70px 0 16px;
    font-size: 15px;
    outline: none;
    background: var(--surface-light);
    color: var(--text-main-light);
    font-family: inherit;
    transition: all 0.2s;
}

.clear-btn {
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--text-muted-dark);
    color: white;
    font-size: 6px;
    font-weight: 700;
    line-height: 2;
    display: block;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.clear-btn:hover {
    background: var(--text-muted-light);
    transform: translateY(-50%) scale(1.08);
}

.clear-btn:active {
    transform: translateY(-50%) scale(0.94);
}

tr:hover {
    background-color: rgba(235, 80, 23, 0.05);
}

.search-btn {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

    .search-btn:hover {
        background: var(--primary-green-dark);
    }

.icon-btn-filter.white-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 2px 0 0 0;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 0px;
    cursor: pointer;
    flex-shrink: 0;
    border-left: none;
}

    .icon-btn-filter.white-btn.dowload-btn {
        border-radius: 0 4px 4px 0;
    }

    .icon-btn-filter.white-btn.filter-btn {
        border-radius: 0 0 0 0;
    }

    .icon-btn-filter.white-btn svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    .icon-btn-filter.white-btn:hover {
        background: var(--gray-50);
        border-color: var(--gray-300);
    }

@media (min-width: 640px) {
    .page-header-content-v2 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/*Page Header End*/

/*Pagination Start*/
.table-footer {
    padding: 16px 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--gray-45);
    border-radius: 2px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 1;
    list-style: none;
    justify-content: center;
    padding: 0;
}
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    color: var(--text-muted-light);
    background: white;
    cursor: pointer;
    border: 2px solid var(--border-light);
}

    .pagination-btn:hover {
        border-color: var(--gray-200);
        background-color: var(--gray-50);
        color: var(--primary);
    }

.pagination-numbers {
    display: none;
    align-items: center;
    gap: 4px;
}


.page-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid var(--border-light);
    background-color: var(--surface-light);
}

.page-number-active {
    background-color: var(--primary);
    color: white;
    font-weight: bold;
    box-shadow: var(--shadow-primary);
    border: 2px solid var(--primary);
}

    .page-number-active:hover {
        transform: scale(1.05);
    }

.page-number-inactive {
    font-weight: 500;
    color: var(--text-muted-light);
}

    .page-number-inactive:hover {
        background-color: var(--gray-50);
        color: var(--primary);
    }

.page-ellipsis {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-light);
    font-size: 12px;
}
.pagination-btn:disabled {
    background-color: #e9e9e9;
    cursor: not-allowed;
}


@media (min-width: 768px) {
    .table-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 640px) {
    .pagination-numbers {
        display: flex;
    }
}
/*Pagination End*/

/*Icon Button start*/
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 2px 0 0 0;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    flex-shrink: 0;
    border-left: none;
}

    .icon-btn:hover {
        background: var(--gray-50);
        border-color: var(--gray-300);
    }

.icon-btn-single {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 2px 0 0 0;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

    .icon-btn-single:hover {
        background: var(--gray-50);
        border-color: var(--gray-300);
    }
/*Icon button end*/

/*Detail page start*/
.detail-section-title {
    font-size: 18px;
    letter-spacing: 0px;
    font-weight: 500;
    margin-bottom: 0px;
}

.detail-section-desc {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1 !important;
    color: gray;
}

.detail-section-panel {
    padding: 10px;
    background-color: var(--gray-125);
    border-radius: 8px;
}

.detail-section-label {
    color: grey;
    font-weight: 600;
    margin-bottom: 3px;
}

.detail-section-value {
    line-height: 1.5;
}

.detail-section-group {
    margin-bottom: 3px;
}
/*Detail page end*/

/*Form Start*/
.form-section-title {
    font-size: 18px;
    letter-spacing: 0px;
    font-weight: 500;
    margin-bottom: 0px;
}

.form-section-desc {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1.5 !important;
    color: gray;
}

/* Compact Promotion/Transfer form & detail pages */
.compact-page .panel-body {
    padding: 14px;
}

.compact-page hr {
    margin: 10px 0;
}

.compact-page .form-section-title,
.compact-page .detail-section-title {
    font-size: 15px;
    margin-bottom: 2px;
}

.compact-page .form-section-desc,
.compact-page .detail-section-desc {
    margin-bottom: 8px;
}

.compact-page .form-group {
    margin-bottom: 12px;
}

.compact-page .structure-card {
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(32, 37, 47, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.compact-page .structure-card:hover,
.compact-page .detail-section-panel:hover {
    border-color: var(--gray-300);
    box-shadow: 0 3px 8px rgba(32, 37, 47, 0.12);
}

.compact-page .structure-card > .panel-heading {
    padding: 10px 14px;
}

.compact-page .structure-card > .panel-body {
    padding: 12px;
}

.compact-page .detail-section-panel {
    padding: 8px;
    border: 1px solid var(--border-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Extra large popup (80% viewport, ~10% gap on all sides) */
.modal-dialog.modal-xl-80 {
    width: 80vw;
    max-width: 80vw;
    height: 80vh;
    margin: 10vh auto;
}
.modal-dialog.modal-xl-80 .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.modal-dialog.modal-xl-80 .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

/* Extra-large popup: content grows with the screen and the body scrolls on overflow,
   instead of the fixed 320px .msc-extension cap used by normal popups */
.modal-dialog.modal-xl-80 .msc-extension {
    max-height: none;
    overflow: visible;
}

/* Compact vertical modal sections (popup-only design) */
.compact-modal .modal-section { margin-bottom: 0; }
.compact-modal .form-section-title,
.compact-modal .detail-section-title { font-size: 15px; margin-bottom: 2px; }
.compact-modal .form-section-desc,
.compact-modal .detail-section-desc { margin-bottom: 8px; font-size: 12px; }
.compact-modal hr { margin: 10px 0; }
.compact-modal .form-group { margin-bottom: 12px; }
.compact-modal .structure-card {
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(32, 37, 47, 0.08);
}
.compact-modal .structure-card > .panel-heading {
    padding: 8px 12px;
    background: var(--gray-50);
}
.compact-modal .structure-card > .panel-heading .panel-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}
.compact-modal .structure-card > .panel-body { padding: 12px; }
.compact-modal .detail-section-panel {
    padding: 10px;
    border: 1px solid var(--border-light);
}


/* ===== STATUS BADGE ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
    min-width: 100px;
}
.status-badge-active {
    background-color: var(--green-50);
    color: var(--green-700);
    border-color: var(--green-100);
}

.status-badge-inactive {
    background-color: var(--text-main-dark);
    color: var(--gray-600);
    border-color: var(--border-light);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: currentColor;
}

.status-dot-active {
    background: var(--green-750);
}

.status-dot-pending {
    background: var(--orange-750);
}

.status-dot-rejected {
    background: var(--red-800);
}

.status-dot-approval {
    background: #854d0e;
}

.status-dot-approved {
    background-color: #3f6212;
}

.status-dot-inactive {
    background-color: var(--gray-400);
}
.badge-1 {
    background: #e8f8ee;
    color: var(--green-750);
    border-color: #ccefd8;
}

.badge-2 {
    background: #f0f7cc;
    color: #3f6212;
    border-color: #dbeaa0;
}

.badge-3 {
    background: #e8f8ee;
    color: var(--green-750);
    border-color: #ccefd8;
}

.badge-4 {
    background: var(--red-25);
    color: var(--red-800);
    border-color: var(--red-75);
}

.badge-5 {
    background: var(--red-25);
    color: var(--red-800);
    border-color: var(--red-75);
}

.badge-6 {
    background: #fff4cc;
    color: #854d0e;
    border-color: #f8e08e;
}

.badge-7 {
    background: #fff1e6;
    color: var(--orange-750);
    border-color: #ffd9c2;
}

.badge-8 {
    background: var(--text-main-dark);
    color: var(--gray-600);
    border-color: var(--border-light);
}
/* ===== YES/No Icon ===== */

:root {
    --green-500: #22C55E;
    --gray-300: #D1D5DB;
}

.icon-green {
    color: var(--green-500);
    font-size:20px;
}

.icon-gray {
    color: var(--gray-300);
    font-size: 20px;
}

/* ===== Sanctioned Strength Hierarchy Builder ===== */
.ss-builder {
    margin-top: 8px;
}

.ss-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 12px 0;
}

.ss-builder-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--text-main-light);
}

.ss-builder-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted-light);
    line-height: 1.4;
    max-width: 520px;
}

.ss-level-count {
    flex-shrink: 0;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    border: 1px solid var(--primary-light);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Hierarchy list with a connecting vertical line */
.ss-hierarchy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ss-hierarchy::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--primary-light) 0 6px, transparent 6px 12px);
    z-index: 0;
}

.ss-level-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    box-shadow: var(--shadow-subtle);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ss-level-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-card);
}

.ss-level-index {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--surface-light);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--surface-light), 0 0 0 5px var(--primary-light);
}

.ss-level-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ss-level-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted-light);
    margin: 0 0 4px 0;
}

.ss-level-select {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0 34px 0 12px;
    font-size: 14px;
    color: var(--text-main-light);
    background-color: var(--surface-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ss-level-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

.ss-level-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
}

.ss-move-btn,
.ss-level-remove {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    background: var(--surface-light);
    color: var(--text-muted-light);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.ss-move-btn:hover:not(:disabled) {
    border-color: var(--primary-light);
    color: var(--primary-dark);
    background: var(--primary-subtle);
}

.ss-move-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ss-level-remove:hover {
    border-color: var(--red-75);
    color: var(--red-500);
    background: var(--red-25);
}

.ss-add-level {
    margin-top: 12px;
    width: 100%;
    padding: 11px;
    border: 1.5px dashed var(--primary-light);
    border-radius: var(--radius-lg);
    background: var(--primary-subtle);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.ss-add-level:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.ss-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--surface-light);
    font-size: 14px;
    line-height: 1;
}

/* Live preview */
.ss-preview {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--gray-50);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.ss-preview-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted-light);
    margin-bottom: 8px;
}

.ss-preview-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ss-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--surface-light);
    border: 1px solid var(--primary-light);
    color: var(--primary-dark);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-subtle);
}

.ss-chip-arrow {
    color: var(--gray-400);
    font-size: 14px;
    font-weight: 700;
}

/* Empty states */
.ss-empty {
    text-align: center;
    padding: 32px 16px;
    background: var(--gray-50);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-lg);
    margin-top: 4px;
}

.ss-empty-sm {
    padding: 20px 16px;
    margin-top: 0;
}

.ss-empty-icon {
    font-size: 30px;
    margin-bottom: 8px;
}

.ss-empty-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main-light);
}

.ss-empty-text {
    margin: 0 auto;
    max-width: 380px;
    font-size: 12px;
    color: var(--text-muted-light);
    line-height: 1.5;
}

/* ===== Level Name Config (reusable "choose count, then name each level" card) ===== */
.info-card {
    margin-top: 12px;
    padding: 14px;
    background: var(--gray-50);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.info-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-card);
}

.section-heading {
    position: relative;
    margin: 0 0 12px;
    padding: 2px 0 2px 10px;
    border-left: 4px solid var(--primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main-light);
}

.info-card .field-hint {
    display: inline-block;
    margin: 0 0 0 5px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted-light);
    cursor: help;
    vertical-align: 1px;
}

.info-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.info-card-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main-light);
}

.info-card-title svg {
    flex-shrink: 0;
}

.info-card-count {
    flex-shrink: 0;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    border: 1px solid var(--primary-light);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.info-card-hint {
    margin: 2px 0 10px 0;
    font-size: 12px;
    color: var(--text-muted-light);
    line-height: 1.4;
}

.info-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.info-card-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.info-card-field:focus-within {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-subtle);
}

.info-card-index {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--surface-light);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.info-card-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted-light);
    margin: 0 0 3px 0;
}

.info-card-field .form-control {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-light);
}

.info-card-field .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}
/*Form End*/

/*Letter Generate card start*/
.letter-generate-card {
    margin-top: 0px;
    padding: 10px 12px;
}

.letter-generate-card .info-card-head {
    margin-bottom: 8px;
}

.letter-generate-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.letter-generate-field {
    flex: 0 0 auto;
    width: 260px;
}

.letter-generate-field label {
    margin-bottom: 4px;
}

.letter-generate-row .btn {
    flex: 0 0 auto;
    width: 160px;
}
/*Letter Generate card end*/

/*Icon-only table action start*/
.table-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 4px;
}

.table-icon-btn:hover {
    opacity: 0.7;
}
/*Icon-only table action end*/

/* ===== DataInput Form: helper hints, option cards, validation cards ===== */
.field-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
    padding: 9px 11px;
    background: var(--primary-subtle);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-lg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted-light);
}

.field-hint svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.field-hint strong {
    color: var(--primary-dark);
}

.field-hint-warning {
    background: var(--warning-subtle);
    border-color: var(--warning-light);
}

.field-hint-warning strong {
    color: var(--warning-dark);
}

.field-hint-success {
    background: var(--green-50);
    border-color: var(--green-100);
}

.field-hint-success strong {
    color: var(--green-700);
}

.field-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
    padding: 9px 11px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--radius-lg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted-light);
}

    .field-alert svg {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--blue-500);
    }

    .field-alert strong {
        color: var(--blue-700);
    }

.field-alert-link-first,
.field-alert-link-second {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: var(--primary-dark);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    cursor: pointer;
    font-size:12px;
    transition: color .15s ease, font-size .15s ease;
}

.field-alert-link-second {
    color: var(--warning-dark);
}
    .field-alert-link-second:hover {
        color: var(--warning-dark);
        font-weight: 800;
        font-size: 12px;
    }
.field-alert-link-first:hover {
    font-weight: 800;
    font-size: 12px;
    color: var(--primary-dark);
}

.field-alert-link-success,
.field-alert-link-danger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    transition: color .15s ease, font-weight .15s ease;
}

    .field-alert-link-success svg,
    .field-alert-link-danger svg {
        display: inline-block;
        flex-shrink: 0;
        margin: 0;
        vertical-align: middle;
    }

.field-alert-link-success {
    color: var(--green-700);
}

    .field-alert-link-success:hover {
        color: var(--green-700);
        font-weight: 800;
    }

.field-alert-link-danger {
    color: var(--red-700);
    margin-left: 6px;
}

    .field-alert-link-danger:hover {
        color: var(--red-700);
        font-weight: 800;
    }

.field-alert-link-success.is-disabled,
.field-alert-link-danger.is-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: default;
}

.draft-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.draft-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 10px);
    left: 50%;
    width: max-content;
    max-width: 290px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    background: var(--primary-dark);
    color: var(--surface-light);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease;
}

.draft-tooltip::before {
    content: "";
    position: absolute;
    z-index: 21;
    bottom: calc(100% + 4px);
    left: 50%;
    border: 6px solid transparent;
    border-top-color: var(--primary-dark);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease;
}

.draft-tooltip:hover::before,
.draft-tooltip:hover::after,
.draft-tooltip:focus-within::before,
.draft-tooltip:focus-within::after,
.draft-tooltip:focus::before,
.draft-tooltip:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.draft-view-banner-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 18px;
    flex-grow: 1;
}

.draft-view-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.field-hint-inline {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted-light);
}

.conditional-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 13px;
    background: var(--primary-subtle);
    border: 1px dashed var(--primary-light);
    border-radius: var(--radius-lg);
}

.conditional-card svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.conditional-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted-light);
}

.conditional-card strong {
    color: var(--primary-dark);
}

.option-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.option-card:focus-within {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-subtle);
}

.option-card-fields {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.option-card-field {
    flex: 1 1 160px;
    min-width: 120px;
}

.option-card-field-text {
    flex: 2 1 220px;
}

/* Compact group rows (fields, remove button and add button share one width) */
.compact-field-block {
    --cfb-field-w: 260px;
    --cfb-lead-w: 50px;
    --cfb-control-h: 36px;
}

.compact-field-block .option-card-fields {
    flex: 0 1 auto;
}

.compact-field-block .option-card-field-compact {
    flex: 0 0 var(--cfb-field-w);
    max-width: var(--cfb-field-w);
    min-width: 0;
}

.compact-field-block .cfb-remove-box {
    display: flex;
    align-items: center;
    min-height: var(--cfb-control-h);
}

.compact-field-block .option-card-remove {
    margin-top: 0;
}

.compact-field-block .di-add-btn {
    width: calc(var(--cfb-field-w) + var(--cfb-lead-w));
    max-width: 100%;
}

@media (max-width: 767px) {
    .compact-field-block {
        --cfb-field-w: 100%;
        --cfb-lead-w: 0px;
    }
}

.option-card-field-order {
    flex: 0 1 90px;
}

.option-card-field-check {
    flex: 0 0 auto;
    align-self: center;
    padding-top: 18px;
}

.option-card-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: var(--surface-light);
    color: var(--text-muted-light);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}

.option-card-remove-slot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.option-card-remove-spacer {
    visibility: hidden;
    font-size: 10px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1;
}

.option-card-remove:hover {
    border-color: var(--red-75);
    color: var(--red-500, #dc3545);
    background: var(--red-25);
}

.di-add-btn {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    border: 1.5px dashed var(--primary-light);
    border-radius: var(--radius-lg);
    background: var(--primary-subtle);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.di-add-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.di-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--surface-light);
    font-size: 14px;
    line-height: 1;
}

/*DataInput Form end*/

/* ===== DataInputFeature Form: section cards & inline section editor ===== */
.section-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.section-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-subtle);
}

.section-card-index {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--surface-light);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.section-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.section-card-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main-light);
}

.section-card-badge {
    flex-shrink: 0;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    border: 1px solid var(--primary-light);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.section-card-order {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted-light);
}

.section-card-help {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-muted-light);
    line-height: 1.4;
}

.section-card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.section-editor {
    margin-top: 14px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-lg);
}

.section-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-editor-head h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
}

.section-editor-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 8px 0;
}

.section-editor-subhead span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main-light);
}

.section-editor-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}

.section-cancel-link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted-light);
    text-decoration: none;
    cursor: pointer;
}

.section-cancel-link:hover {
    color: var(--text-main-light);
    text-decoration: underline;
}

.section-save-btn {
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-dark);
    background: transparent;
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s;
}

.section-save-btn:hover {
    color: var(--surface-light);
    background: var(--primary);
}
/*DataInputFeature Form end*/
.mt-0{
    margin-top:0px !important;
}
.pl-20 {
    padding-left: 20px;
}
/* ===== Validation card (UiComValidation) ===== */
.validation-card {
    --validation-accent: #dc2626;
    --validation-surface: var(--red-50);
    --validation-border: #fecaca;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px 0;
    padding: 11px 13px;
    background: var(--validation-surface);
    border: 1px solid var(--validation-border);
    border-left: 3px solid var(--validation-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
}

.validation-card-icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--validation-accent);
}

.validation-card-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.validation-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.validation-card-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--validation-accent);
}

.validation-card-list {
    margin: 5px 0 0 0;
    padding-left: 16px;
    list-style: disc;
}

.validation-card-list li {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main-light);
    word-break: break-word;
}

.validation-card-list li + li {
    margin-top: 2px;
}

/* --- Notification panel (TopNavMenu, compact) --- */
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
}

.notif-panel-list {
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    padding: 4px 6px !important;
    border-bottom: 1px solid var(--gray-100, #f2f2f2);
    margin-top:5px;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item .media-left {
    padding-right: 10px;
}

.notif-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #eb5017;
}

.notif-item-body {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--text-muted-light, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Notification avatar (TopNavMenu) --- */
.notif-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}

.notif-avatar-blue { background-color: #4f7cff; }
.notif-avatar-green { background-color: #2fb380; }
.notif-avatar-orange { background-color: #ff9f43; }
.notif-avatar-purple { background-color: #8854d0; }
.notif-avatar-pink { background-color: #e6558f; }
.notif-avatar-teal { background-color: #17a2b8; }

/* --- Employee identity cell (UiComEmployeeCell) --- */
.emp-cell {
    display: block;
    max-width: 280px;
    min-width: 0;
    line-height: 1.25;
}

.emp-cell-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.emp-cell-name {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-cell-no {
    flex-shrink: 0;
    padding: 0 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.02em;
}

.emp-cell-meta {
    display: block;
    margin-top: 1px;
    color: var(--text-muted-light);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Draft status badge --- */
.dstatus-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    white-space: nowrap;
}

    .dstatus-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: var(--radius-full);
        background: currentColor;
    }

    .dstatus-badge.is-draft {
        border: 1px solid var(--gray-200);
        background: var(--gray-100);
        color: var(--gray-600);
    }

    .dstatus-badge.is-validating {
        border: 1px solid var(--blue-100);
        background: var(--blue-50);
        color: var(--blue-700);
    }

/* --- Dashed-underline inline action --- */
.link-action-dashed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-bottom: 1px dashed var(--primary-dark);
    background: none;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
}

    .link-action-dashed:hover,
    .link-action-dashed:focus {
        border-bottom-color: var(--primary);
        color: var(--primary);
        text-decoration: none;
    }

    .link-action-dashed i {
        font-size: 13px;
    }

/* ===== Compare Draft page (read-only diff viewer) ===== */
.cmpd .panel {
    margin-bottom: 10px;
}

.cmpd-readonly {
    margin-bottom: 10px;
}

.cmpd-toolbar-panel .panel-body {
    padding: 10px 12px;
}

.cmpd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.cmpd-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.cmpd-picker-label {
    margin-right: 2px;
    color: var(--text-muted-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.cmpd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 5px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--surface-light);
    color: var(--text-main-light);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .cmpd-chip:hover {
        border-color: var(--gray-300);
        box-shadow: var(--shadow-subtle);
    }

    .cmpd-chip.is-plain {
        padding: 6px 13px;
    }

    .cmpd-chip.is-active {
        border-color: var(--primary);
        background: var(--primary-subtle);
    }

    .cmpd-chip.is-secondary.is-active {
        border-color: var(--blue-500);
        background: var(--blue-50);
    }

.cmpd-chip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 10px;
    font-weight: 700;
}

.cmpd-chip.is-active .cmpd-chip-avatar {
    background: var(--primary);
    color: var(--surface-light);
}

.cmpd-chip.is-secondary.is-active .cmpd-chip-avatar {
    background: var(--blue-500);
    color: var(--surface-light);
}

.cmpd-chip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.cmpd-chip-name {
    font-size: 12px;
    font-weight: 600;
}

.cmpd-chip-meta {
    color: var(--text-muted-light);
    font-size: 10.5px;
    font-weight: 400;
}

.cmpd-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.cmpd-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .cmpd-search input {
        width: 190px;
        height: 30px;
        padding: 0 26px 0 28px;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-full);
        background: var(--surface-light);
        color: var(--text-main-light);
        font-size: 12px;
        outline: none;
        transition: border-color .18s ease;
    }

        .cmpd-search input:focus {
            border-color: var(--primary);
        }

    .cmpd-search .fa-search {
        position: absolute;
        left: 11px;
        color: var(--gray-400);
        font-size: 12px;
        pointer-events: none;
    }

.cmpd-search-clear {
    position: absolute;
    right: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gray-400);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

    .cmpd-search-clear:hover {
        color: var(--text-main-light);
    }

.cmpd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    background: var(--surface-light);
    color: var(--text-muted-light);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

    .cmpd-toggle:hover {
        border-color: var(--gray-300);
        color: var(--text-main-light);
    }

    .cmpd-toggle.is-on {
        border-color: var(--primary);
        background: var(--primary-subtle);
        color: var(--primary-dark);
    }

    .cmpd-toggle i {
        font-size: 12px;
    }

.cmpd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--gray-200);
}

.cmpd-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--gray-50);
    color: var(--text-muted-light);
    font-size: 11px;
    line-height: 18px;
}

    .cmpd-stat strong {
        color: var(--text-main-light);
        font-size: 12px;
    }

    .cmpd-stat.is-conflict {
        border-color: var(--red-100);
        background: var(--red-50);
        color: var(--red-700);
    }

        .cmpd-stat.is-conflict strong {
            color: var(--red-700);
        }

    .cmpd-stat.is-filter {
        border-color: var(--primary-light);
        background: var(--primary-subtle);
        color: var(--primary-dark);
    }

        .cmpd-stat.is-filter strong {
            color: var(--primary-dark);
        }

.cmpd-stat-clear {
    padding: 0;
    border: 0;
    border-bottom: 1px dashed currentColor;
    background: none;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.cmpd-section {
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .cmpd-section:hover {
        border-color: var(--gray-300);
        box-shadow: 0 3px 8px rgba(32, 37, 47, .08);
    }

.cmpd-section-head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease;
}

    .cmpd-section-head:hover {
        background: var(--gray-100);
    }

.cmpd-section.is-collapsed .cmpd-section-head {
    border-bottom-color: transparent;
}

.cmpd-caret {
    color: var(--gray-400);
    font-size: 11px;
    transition: transform .18s ease;
}

.cmpd-section.is-collapsed .cmpd-caret {
    transform: rotate(-90deg);
}

.cmpd-section-name {
    flex: 1 1 auto;
    color: var(--text-main-light);
    font-size: 13px;
    font-weight: 600;
}

.cmpd-badge {
    flex-shrink: 0;
    padding: 1px 9px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    background: var(--surface-light);
    color: var(--text-muted-light);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 17px;
    white-space: nowrap;
}

    .cmpd-badge.is-conflict {
        border-color: var(--red-100);
        background: var(--red-50);
        color: var(--red-700);
    }

.cmpd-table-wrap {
    overflow-x: auto;
}

.cmpd-table {
    width: 100%;
    margin: 0;
    font-size: 12.5px;
}

    .cmpd-table > thead > tr > th {
        padding: 7px 12px;
        border-bottom: 1px solid var(--gray-200);
        background: var(--surface-light);
        color: var(--text-muted-light);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .2px;
        text-transform: uppercase;
        vertical-align: bottom;
        white-space: nowrap;
    }

    .cmpd-table > tbody > tr > td {
        padding: 7px 12px;
        border-top: 1px solid var(--gray-100);
        line-height: 1.45;
        vertical-align: top;
    }

    .cmpd-table > tbody > tr:hover > td {
        background: var(--gray-50);
    }

    .cmpd-table > tbody > tr.is-conflict > td {
        background: var(--red-50);
    }

    .cmpd-table > tbody > tr > td.cmpd-cell-new.is-changed {
        background: var(--green-50);
        box-shadow: inset 3px 0 0 var(--green-500);
    }

.cmpd-th-sub {
    display: block;
    margin-top: 2px;
    color: var(--gray-400);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.cmpd-col-field {
    width: 22%;
    min-width: 150px;
}

.cmpd-field {
    color: var(--text-main-light);
    font-weight: 600;
}

.cmpd-cell-original {
    color: var(--text-muted-light);
}

.cmpd-conflict-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border: 1px solid var(--red-100);
    border-radius: var(--radius-full);
    background: var(--surface-light);
    color: var(--red-700);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    vertical-align: middle;
}

.cmpd-blank {
    color: var(--gray-400);
}

.cmpd-empty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 2px;
}

    .cmpd-empty h5 {
        margin: 0 0 3px;
        font-size: 14px;
        font-weight: 600;
    }

    .cmpd-empty p {
        margin: 0;
        color: var(--text-muted-light);
        font-size: 12.5px;
    }

@media (max-width: 767px) {
    .cmpd-tools {
        width: 100%;
        margin-left: 0;
    }

    .cmpd-search {
        flex: 1 1 160px;
    }

        .cmpd-search input {
            width: 100%;
        }
}

/*Employee Profile Card Start*/
.emp-profile-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: linear-gradient(120deg, var(--primary-subtle) 0%, var(--surface-light) 65%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.emp-profile-avatar {
    display: flex;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-light);
    border: 3px solid var(--primary-light);
    border-radius: var(--radius-full);
}

    .emp-profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.emp-profile-avatar-initials {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    font-size: 24px;
    font-weight: 700;
}

.emp-profile-info {
    min-width: 0;
    flex: 1;
}

.emp-profile-name {
    margin: 0 0 3px;
    color: var(--text-main-light);
    font-size: 18px;
    font-weight: 600;
}

.emp-profile-designation {
    color: var(--text-muted-light);
    font-size: 13px;
}

.emp-profile-meta {
    min-width: 130px;
    padding-left: 20px;
    border-left: 1px solid var(--border-light);
    color: var(--text-main-light);
    font-size: 14px;
}

    .emp-profile-meta-label {
        display: block;
        color: var(--text-muted-light);
        font-size: 12px;
        font-weight: 500;
    }

    .emp-profile-meta strong {
        display: block;
        margin-top: 3px;
        font-weight: 600;
    }

@media (max-width: 520px) {
    .emp-profile-card {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 18px;
    }

    .emp-profile-meta {
        width: 100%;
        padding: 12px 0 0;
        border-top: 1px solid var(--border-light);
        border-left: 0;
    }
}
/*Employee Profile Card End*/

/*Icon Tile Grid Start*/
.icon-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.icon-tile {
    display: flex;
    align-items: stretch;
    min-height: 112px;
    padding: 0;
    overflow: hidden;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .icon-tile:hover {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-card);
        transform: translateY(-2px);
    }

.icon-tile-icon {
    display: flex;
    flex: 0 0 64px;
    width: 64px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 22px;
}

.icon-tile-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px 14px;
    text-align: center;
    font-family: 'Inter';
}

.icon-tile-count {
    display: block;
    color: var(--text-main-light);
    font-family: 'Inter';
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
}

.icon-tile-label {
    display: block;
    margin-top: 5px;
    color: var(--text-muted-light);
    font-family: 'Inter';
    font-size: 13px;
    line-height: 1.3;
}

@media (max-width: 991px) {
    .icon-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .icon-tile-grid {
        grid-template-columns: 1fr;
    }
}
/*Icon Tile Grid End*/

/* ===== Merged from trackkCustom.css ===== */
/*Employee-tiles*/
.dtiles-primary {
    margin-left: 22px;
    margin-right: 22px;
    background-color: white;
    padding-top: 15px;
    padding-bottom: 15px;
}
.dtiles-primary .d-flex {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    text-align: center;
}

    .dtiles-primary .d-flex div {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 16px 12px;
        width: 22%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.3s ease;
        cursor: default;
    }

        .dtiles-primary .d-flex div:hover {
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
            transform: translateY(-4px);
        }

    .dtiles-primary .d-flex span {
        font-size: 1.8rem;
        font-weight: 700;
        color: #222;
        line-height: 1;
    }

.dtiles-primary p {
    margin: 0;
    font-weight: 500;
    color: #444;
    font-size: 1.5rem;
}

/* ===== Employee Hierarchy (Teams-style) ===== */
.eh-dialog {
    max-width: 1000px;
    width: 92%;
}

.eh-empty {
    text-align: center;
    color: #888;
    padding: 2rem 0;
}

.eh-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #ff7043 transparent;
}

.eh-connector {
    width: 2px;
    height: 18px;
    background-color: #d0d5dd;
}

/* card */
.eh-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 260px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.eh-card--clickable {
    cursor: pointer;
}

    .eh-card--clickable:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }

.eh-card--focus {
    border-color: #ff7043;
    box-shadow: 0 0 0 2px rgba(255,112,67,0.25);
}

.eh-card__avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    /* neutral fallback; per-level colours below */
    background: #eceff1;
    color: #607d8b;
    border: 2px solid #b0bec5;
}

/* Per-level avatar colours (light fill + darker border) */
.eh-avatar--skip {
    background: #e6f4ea;
    color: #2e7d32;
    border-color: #2e7d32;
}

.eh-avatar--manager {
    background: #e3f0fc;
    color: #1565c0;
    border-color: #1565c0;
}

.eh-avatar--employee {
    background: #fff0e8;
    color: #e64a19;
    border-color: #ff7043;
}

.eh-avatar--report {
    background: #f1eafc;
    color: #6a3fb5;
    border-color: #7e57c2;
}

.eh-avatar--peer {
    background: #e0f2f1;
    color: #00796b;
    border-color: #00897b;
}

.eh-card__initials {
    text-transform: uppercase;
    letter-spacing: .5px;
    user-select: none;
}

.eh-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.eh-card__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eh-card__name {
    font-weight: 600;
    font-size: 13px;
    color: #0C111D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-card__title {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-card__dept {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* section (colleagues / direct reports) */
.eh-section {
    width: 100%;
    margin-top: 0.9rem;
    padding-top: 0.3rem;
    justify-items: center;
}

.eh-section__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 13px;
    color: #344054;
    margin-bottom: 0.75rem;
}

/* horizontal separator before the colleagues section */
.eh-divider {
    width: 100%;
    height: 1px;
    background: #d0d5dd;
    margin: 1.25rem 0 0.25rem;
}

.eh-badge {
    background: #ff7043;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 8px;
    line-height: 1.6;
}

/* three cards per row */
.eh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    justify-items: center;
    width: 100%;
}

    .eh-grid .eh-card {
        max-width: 100%;
    }

.eh-more {
    display: block;
    margin: 0.9rem auto 0;
    background: transparent;
    border: 1px solid #ff7043;
    color: #ff7043;
    border-radius: 8px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

    .eh-more:hover {
        background: #ff7043;
        color: #fff;
    }

@media (max-width: 768px) {
    .eh-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .eh-grid {
        grid-template-columns: 1fr;
    }
}
.flex-item > .form-group > .checkbox-inline {
    padding-top: 28px;
}