:root {
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 60px;
    --color-bg: #ffffff;
    --color-text: #3c3c3b;
    --color-sidebar-link: #979797;
    --color-sidebar-link-hover: #e9e9e9;
    --color-sidebar-link-active-border: #21a1d5;
    --color-main-bg: #f8f9fa;
    --color-search-bg: #f6f6f6;
    --color-radio-button-dark: #8D8D8D;
    --color-filter-accordian: #f6f6f6;
    --color-body-text: #393939;
    --color-table-header: #3c3c3b;
    --color-table-header-background: #f8fafb;
    --color-form-input-background: #fff;
    --color-form-input-border: #ced4da;
    --color-table-border: #dee2e6;
    --color-slider-background: #aaa;
    --color-boxshadow: #00000026;
    --color-toggle-border: #16958D;
    --color-toggle-bar: transparent linear-gradient(226deg, #21A1D4 0%, #16958D 100%) 0% 0% no-repeat padding-box;
    --color-form-heading: #20A0D0;
    --color-toggle-bar-switch: #E9E9E9 0% 0% no-repeat padding-box;
    --color-card-text: #000;
    /* --color-card-background1: transparent linear-gradient(78deg, #FFFFFF 0%, #DBFAFF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    --color-card-background2: transparent linear-gradient(78deg, #FFFFFF 0%, #FFDEEF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box; */
    --color-card-background1: transparent linear-gradient(78deg, #FFFFFF 0%, #fffcfc 43%, #ececec 100%) 0% 0% no-repeat padding-box;
    --color-card-background2: transparent linear-gradient(78deg, #FFFFFF 0%, #fffcfc 43%, #ececec 100%) 0% 0% no-repeat padding-box;
    --color-filter-label: #878787;
    --color-tc-card1: #FFE8E8 0% 0% no-repeat padding-box;
    --color-tc-card2: #CAEEEA 0% 0% no-repeat padding-box;
    --color-tc-card3: #FFF3C5 0% 0% no-repeat padding-box;
    --color-tc-card4: #E8FDFF 0% 0% no-repeat padding-box;
    --color-tc-card5: #F4E7F8 0% 0% no-repeat padding-box;
    --color-tc-card6: #F9DDC5 0% 0% no-repeat padding-box;
    --color-graph-background:#F0F9FF 0% 0% no-repeat padding-box;
    --color-blue:#377CAB;
    --color-orange:#F1944D;
    --red-color: #ff6d6d;
    --btn-background-color: #262626;
    --btn-text-color:#fff;
    --btn-secondary-background-color: #fff;
    --placeholder-color:#979797;
    /* --icon-color-custom:#757575; */
    --icon-color-custom:#1e9ec2;
    --btn-prefix-arrow-color:#fff;
    --required-color:#d9534f;
    --color-video-bg:#f5f5f5;
    --dashboard-card-background-color:#EFF5F7;
    --dashboard-card-border-color:#c4c4c4;

    /* --card-header-background-color:transparent linear-gradient(90deg, #CDDCDE 0%, #ABDFE6 100%) 0% 0%; */
    --color-header-bg1:#1e9dbf29;
    --color-header-bg2:#fff;
    --card-title-color:#060606;



    --header-background-color: #ffffff;
    --header-text-color:#3c3b3b;
    --datepicker-avail-color:#dcd8d8;

}

/* dark theme colors */
.theme-dark {
    --color-bg: #1e1e1e;
    --color-text: #f0f0f0;
    --color-sidebar-link: #dcdcdc;
    --color-sidebar-link-hover: #3c3c3c;
    --color-sidebar-link-active-border: #ffcc00;
    --color-toggle-border: #ffcc00;
    --color-toggle-bar: transparent linear-gradient(226deg, #ffcc00 0%, #9e8212 100%) 0% 0% no-repeat padding-box;
    --color-form-heading: #ffcc00;
    --color-toggle-bar-switch: #E9E9E9 0% 0% no-repeat padding-box;
    --color-main-bg: #121212;
    --color-search-bg: #303030;
    --color-slider-background: #434242;
    --color-radio-button-dark: #2196F3;
    --btn-text-color:#000;
    --color-filter-accordian: #000;
    --color-filter-accordian1: transparent linear-gradient(81deg, #1E1E1E 0%, #3E3E3E 100%) 0% 0% no-repeat padding-box;
    --color-body-text: #ddd;
    --color-table-header: #dddddd;
    --color-table-header-background: #303030;
    --color-form-input-background: #0d0d0d;
    --color-form-input-border: #16958D;
    --color-table-border: #3c3c3b;
    --color-card-title: #dcdcdc;
    --color-card-background1-inner: transparent linear-gradient(78deg, #00000082 0%, #6ca4b2 43%, #00000082 100%) 0% 0% no-repeat padding-box;
    --color-card-background2-inner: transparent linear-gradient(78deg, #00000082 0%, #b86f95 43%, #00000082 100%) 0% 0% no-repeat padding-box;
    --color-card-background1: transparent linear-gradient(81deg, #1E1E1E 0%, #3E3E3E 100%) 0% 0% no-repeat padding-box;
    --color-card-background2:transparent linear-gradient(81deg, #1E1E1E 0%, #3E3E3E 100%) 0% 0% no-repeat padding-box;
    --color-filter-label: #fff;
    --color-tc-card1: #ae5b5b 0% 0% no-repeat padding-box;
    --color-tc-card2: #2d8d8a 0% 0% no-repeat padding-box;
    --color-tc-card3: #D9A441 0% 0% no-repeat padding-box;
    --color-tc-card4: #4B9FA5 0% 0% no-repeat padding-box;
    --color-tc-card5: #956AA1 0% 0% no-repeat padding-box;
    --color-tc-card6: #B96B3A 0% 0% no-repeat padding-box;
    --color-graph-background:#1e1e1e;
    --btn-background-color: #757575;
    /* --icon-color-custom: #757575; */
    --icon-color-custom:#ffcc00;
    --btn-secondary-background-color: #262626;
    --placeholder-color:#979797;
    --btn-prefix-arrow-color:#757575;
    --color-video-bg:#3c3c3b;
    --dashboard-card-background-color:#1B232C;
    --dashboard-card-border-color:#5f6b7a;

    /* --card-header-background-color:#1e1e1e; */
    --color-header-bg1:#1E1E1E;
    --color-header-bg2:#000;
    --card-title-color:#dcdcdc;

    --header-background-color: #1e1e1e;
    --header-text-color:#f0f0f0;
    --datepicker-avail-color:#5a5a5a;


}

/* light theme colors */
.theme-light {
    --color-bg: #ffffff;
    --color-text: #3c3c3b;
    --color-sidebar-link: #979797;
    --color-sidebar-link-active-border: #21a1d5;
    --color-sidebar-link-hover: #e9e9e9;
    --color-main-bg: #f8f9fa;
    --color-search-bg: #f6f6f6;
    --color-radio-button-dark: #8D8D8D;
    --color-filter-accordian: #f6f6f6;
    --color-body-text: #393939;
    --color-table-header: #3c3c3b;
    --data-table-bg-search:#ffffff;
    --color-table-header-background: #f8fafb;
    --color-form-input-background: #fff;
    --color-form-input-border: #ced4da;
    --color-table-border: #dee2e6;
    --btn-text-color:#fff;
    --color-slider-background: #aaa;
    --color-card-title: #757575;
    --color-card-background1-inner: transparent linear-gradient(78deg, #FFFFFF 0%, #DBFAFF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    --color-card-background2-inner: transparent linear-gradient(78deg, #FFFFFF 0%, #FFDEEF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    --color-card-background1: transparent linear-gradient(78deg, #FFFFFF 0%, #fffcfc 43%, #ececec 100%) 0% 0% no-repeat padding-box;
    --color-card-background2: transparent linear-gradient(78deg, #FFFFFF 0%, #fffcfc 43%, #ececec 100%) 0% 0% no-repeat padding-box;
    --color-filter-label: #878787;
    --color-tc-card1: #FFE8E8 0% 0% no-repeat padding-box;
    --color-tc-card2: #CAEEEA 0% 0% no-repeat padding-box;
    --color-tc-card3: #FFF3C5 0% 0% no-repeat padding-box;
    --color-tc-card4: #E8FDFF 0% 0% no-repeat padding-box;
    --color-tc-card5: #F4E7F8 0% 0% no-repeat padding-box;
    --color-tc-card6: #F9DDC5 0% 0% no-repeat padding-box;
    --color-graph-background:#F0F9FF 0% 0% no-repeat padding-box;
    /* --icon-color-custom: #757575; */
    --icon-color-custom:#1e9ec2;
    --btn-secondary-background-color: #fff;
    --placeholder-color:#979797;
    --btn-prefix-arrow-color:#fff;
    --color-video-bg:#f5f5f5;
    --dashboard-card-background-color:#EFF5F7;
    --dashboard-card-border-color:#c4c4c4;

    /* --card-header-background-color:transparent linear-gradient(90deg, #CDDCDE 0%, #ABDFE6 100%) 0% 0%; */
    --color-header-bg1:#1e9dbf29;
    --color-header-bg2:#fff;
    --card-title-color:#060606;

    --header-background-color: #ffffff;
    --header-text-color:#3c3b3b;
    --datepicker-avail-color:#dcd8d8;

}

@media (prefers-color-scheme: dark) {
    .theme-system {
        --color-bg: #1e1e1e;
        --color-text: #f0f0f0;
        --color-sidebar-link: #dcdcdc;
        --color-sidebar-link-hover: #3c3c3c;
        --color-sidebar-link-active-border: #ffcc00;
        --color-main-bg: #121212;
        --data-table-bg-search:#3c3c3b;
        --color-search-bg: #3a3a3a;
        --color-slider-background: #8D8D8D;
        --color-radio-button-dark: #2196F3;
        --color-filter-accordian: #000;
        --color-filter-accordian1:  transparent linear-gradient(81deg, #1E1E1E 0%, #3E3E3E 100%) 0% 0% no-repeat padding-box;
        --color-body-text: #fff;
        --color-table-header: #fff;
        --color-table-header-background: #000;
        --color-form-input-background: #0d0d0d;
        --color-form-input-border: #16958D;
        --color-table-border: #3c3c3b;
        --color-card-title: #dcdcdc;
        --color-card-background1-inner: transparent linear-gradient(78deg, #00000082 0%, #6ca4b2 43%, #00000082 100%) 0% 0% no-repeat padding-box;
        --color-card-background2-inner: transparent linear-gradient(78deg, #00000082 0%, #b86f95 43%, #00000082 100%) 0% 0% no-repeat padding-box;
        --color-card-background1:transparent linear-gradient(81deg, #1E1E1E 0%, #3E3E3E 100%) 0% 0% no-repeat padding-box;
        --color-card-background2: transparent linear-gradient(81deg, #1E1E1E 0%, #3E3E3E 100%) 0% 0% no-repeat padding-box;
        --color-filter-label: #fff;
        --color-tc-card1: #ae5b5b 0% 0% no-repeat padding-box;
        --color-tc-card2: #2d8d8a 0% 0% no-repeat padding-box;
        --color-tc-card3: #D9A441 0% 0% no-repeat padding-box;
        --color-tc-card4: #4B9FA5 0% 0% no-repeat padding-box;
        --color-tc-card5: #956AA1 0% 0% no-repeat padding-box;
        --color-tc-card6: #B96B3A 0% 0% no-repeat padding-box;
        --color-graph-background:#1e1e1e;
        --btn-background-color: #757575;
        /* --icon-color-custom: #757575; */
        --icon-color-custom:#ffcc00;
        --btn-secondary-background-color: #262626;
        --placeholder-color:#979797;
        --btn-prefix-arrow-color:#757575;
        --color-video-bg:#3c3c3b;
        --dashboard-card-background-color:#1B232C;
        --dashboard-card-border-color:#5F6B7A;

        /* --card-header-background-color:#1e1e1e; */
        --color-header-bg1:#1e1e1e;
        --color-header-bg2:#000;
        --card-title-color:#dcdcdc;


        --header-background-color: #1e1e1e;
        --header-text-color:#f0f0f0;
        --btn-text-color:#000;
        --datepicker-avail-color:#5a5a5a;


    }

    body.theme-system .logo.theme-dark {
        display: block;
    }
}

@media (prefers-color-scheme: light) {
    .theme-system {
        --color-bg: #ffffff;
        --color-text: #3c3c3b;
        --color-sidebar-link-active-border: #21a1d5;
        --color-sidebar-link: #979797;
        --color-sidebar-link-hover: #e9e9e9;
        --color-main-bg: #f8f9fa;
        --color-search-bg: #f6f6f6;
        --color-search-bg: #f6f6f6;
        --data-table-bg-search:#ffffff;
        --color-radio-button-dark: #8D8D8D;
        --color-filter-accordian: #f6f6f6;
        --color-body-text: #393939;
        --color-table-header: #3c3c3b;
        --color-table-header-background: #f8fafb;
        --color-form-input-background: #fff;
        --color-form-input-border: #ced4da;
        --color-table-border: #dee2e6;
        --color-card-title: #757575;
        --color-card-background1-inner: transparent linear-gradient(78deg, #FFFFFF 0%, #DBFAFF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
        --color-card-background2-inner: transparent linear-gradient(78deg, #FFFFFF 0%, #FFDEEF 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
        --color-card-background1: transparent linear-gradient(78deg, #FFFFFF 0%, #fffcfc 43%, #ececec 100%) 0% 0% no-repeat padding-box;
        --color-card-background2: transparent linear-gradient(78deg, #FFFFFF 0%, #fffcfc 43%, #ececec 100%) 0% 0% no-repeat padding-box;
        --color-filter-label: #878787;
        --color-tc-card1: #FFE8E8 0% 0% no-repeat padding-box;
        --color-tc-card2: #CAEEEA 0% 0% no-repeat padding-box;
        --color-tc-card4: #E8FDFF 0% 0% no-repeat padding-box;
        --color-tc-card5: #F4E7F8 0% 0% no-repeat padding-box;
        --color-tc-card6: #F9DDC5 0% 0% no-repeat padding-box;
        --color-graph-background:#F0F9FF 0% 0% no-repeat padding-box;
        /* --icon-color-custom: #757575; */
        --icon-color-custom:#1e9ec2;
        --btn-secondary-background-color: #fff;

        /* --card-header-background-color:transparent linear-gradient(90deg, #CDDCDE 0%, #ABDFE6 100%) 0% 0%; */
        --color-header-bg1:#1e9dbf29;
        --color-header-bg2:#fff;

        --card-title-color:#060606;

        --header-background-color: #fff;
        --header-text-color:#3c3b3b;
        --btn-text-color:#fff;
        --datepicker-avail-color:#dcd8d8;


    }

    body.theme-system .logo.theme-light {
        display: block;
    }
}


/* header colors */
.theme-white-f1 {
    --header-background-color: #F1F1F1;
    --header-text-color:#3c3b3b;
}

.theme-yellow-y1 {
    --header-background-color: #FFCC00;
    --header-text-color:#3c3b3b;

}

.theme-grey-g1 {
    --header-background-color: #494949;
    --header-text-color:#f0f0f0;

}

.theme-white-f2 {
    --header-background-color: #FFFFFF;
    --header-text-color:#3c3b3b;

}

.theme-grey-g2 {
    --header-background-color: #757575;
    --header-text-color:#f0f0f0;

}

.theme-black-b1 {
    --header-background-color: #000000;
    --header-text-color:#f0f0f0;

}

.theme-grey-g3 {
    --header-background-color: #D9D9D9;
    --header-text-color:#3c3b3b;

}

.theme-yellow-y2 {
    --header-background-color: #FFE57B;
    --header-text-color:#3c3b3b;

}

::placeholder{
    color: var(  --placeholder-color) !important;
    font-size: 14px !important;
}
body {
    /* font-family: 'Rajdhani'; */
    font-family: 'Roboto';
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 14px !important;
    background: var(--color-bg) !important;
}

a {
    color: var(--color-sidebar-link) !important;
    text-decoration: none !important;
}
p{
    color: var(--color-text);
}
.card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-table-border);
}
.color-blue {
    color: var(--color-text);
}

.color-orange{
    color: var(--color-orange);
}
.lh-0{
    line-height: 0;
    height: 31px;
    margin-left: -3px;
}

/* scrollbar */
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;

}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-form-input-background);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-toggle-bar);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-toggle-bar);
}
label.error {
    color: #ff2c2c;
    font-weight: 500 !important;
}
.f-500 {
    font-weight: 500;
}

.f-600 {
    font-weight: 600;
}

.cursor-pointer,.cursorClass {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--color-toggle-border);
}

/* logo display based on theme */
.logo.theme-light {
    display: none;
}

.logo.theme-dark {
    display: none;
}

body.theme-light .logo.theme-light,
body.theme-dark .logo.theme-dark {
    display: block;
}

/* header css */
header {
    box-shadow: 0px 0px 5px 1px var(--color-boxshadow);
    border: 1px solid #d2d2d217;
    position: sticky;
    top: 0;
    background-color: var(--header-background-color);
    z-index: 99;
    color: var(--header-text-color);
}
.header-colors {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 218px;
}

.color-box {
    width: calc(25% - 10px);
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: border 0.2s;
}

/* header dark/light mode  */
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 21px;
}

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

/* light mode slider background  */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-toggle-bar-switch);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: var(--color-toggle-bar);
    -webkit-transition: .4s;
    transition: .4s;
}


/* dark mode slider background */
input:checked+.slider {
    background: var(--color-toggle-bar-switch);
}

/* input:focus+.slider {
  box-shadow: 0 0 1px var(--color-toggle-border);
} */

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* dark/light mode slider */
.slider.radio-dark-mode {
    border-radius: 34px;
}

.slider.radio-dark-mode:before {
    border-radius: 50%;
}

/* login user */
.avatar-container {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    border: 1px solid var(--header-text-color);
    background: var(--header-text-color);
    color:var(--btn-text-color);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
}
/* login user image */
.avatar img {
    width: 100%;
    height: 100%;
}

/* sidebar  */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--color-bg);
    transition: all 0.3s ease;
    box-shadow: 0px 11px 4px var(--color-boxshadow);
    z-index: 9999;


}

/* sidebar collapse */
.sidebar.collapsed,
.logout-section.collapsed {
    width: var(--sidebar-width-collapsed);
}

/* sidebar link */
.sidebar-link a {
    color: var(--color-sidebar-link) !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none !important;
    font-size: 14px;
    display: grid;
    align-items: center;
    grid-template-columns: 15% 79% 10%;
}

/* sidebar link hover */
.sidebar-link:hover {
    color: var(--color-text);
    background: var(--color-sidebar-link-hover);
    transform: translateX(2px);
    padding-left: 14px !important;
}

/* sidebar active menu background*/
.sidebar-link.active,.active-sidebar {
    color: var(--color-text) !important;
    background: var(--color-sidebar-link-hover) !important;
    font-weight: bold;
    border-left: 4px solid var(--color-sidebar-link-active-border);
    padding-left: 10px !important;
}

/* sidebar active menu  */
.sidebar-link.active a,.active-sidebar span {
    color: var(--color-text) !important;
}



/* main content */
.main-content {
    margin-left: var(--sidebar-width);
    background-color: var(--color-sidebar-link-hover);
    min-height: 100vh;
    padding:  30px 10px 0px 20px;
    transition: all 0.3s ease;
    color: var(--color-body-text);
}
.main-content.bread-crumb-main-content {
    min-height: unset !important;
    position: absolute;
    padding-top: 6px;
}
/* sidebar collapsed width */
.collapsed~.main-content {
    margin-left: var(--sidebar-width-collapsed);
}

/* toggle button */
.toggle-btn {
    position: absolute;
    right: -15px;
    top: 19px;
    background: var(--color-toggle-bar);
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-toggle-border);
    border-radius: 5px;
    box-shadow: 0px 0px 6px var(--color-boxshadow);
    z-index: 100;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* toggle button trasnform */
.collapsed .toggle-btn {
    transform: rotate(180deg);
}

/* collapsed sidebar hide menu name */
.collapsed .hide-on-collapse {
    display: none;
}

/* collapsed sidebar */
.collapsed .sidebar-link {
    width: 60px;
}

/* collapsed sidebar icon */
.collapsed .sidebar-link i {
    margin: 0 !important;
}

/* sidebar search */
.search-container {
    padding: 15px 9px 10px 10px;
    width: 100%;
    height: 60px;
}

/* sidebar search input */
.search-container input {
    flex: 1;
    border: none;
    width: 100%;
    background: var(--color-search-bg);
    padding: 10px;
    outline: none;
    /* box-shadow: inset 0px 3px 6px var(--color-boxshadow); */
    color: var(--color-text);
}
.take-tour-btn a {
    cursor: pointer;
    background-color: var(--icon-color-custom) !important;
    border-color: var(--icon-color-custom) !important;
    color: var(--btn-text-color) !important;
    border-radius: 0;
    padding: 0px 9px;
    display: flex;
    align-items: center;
    border-radius: 8px;
}
/* sidebar search icon */
.search-container button {
    float: right;
    margin-right: 11px;
    background: var(--color-search-bg);
    font-size: 17px;
    border: none;
    cursor: pointer;
    /* box-shadow: inset 0px 3px 6px var(--color-boxshadow); */
    color: var(--color-sidebar-link);
}

/* sidebar menu */
.sidebar .nav>li {
    position: relative;
}

.sub-menu {
    display: block;
    list-style: none;
}

.submenu-wrapper.open,
.sub-menu.open {
    display: block;
}

.sidebar:not(.collapsed) .submenu-wrapper {
    position: static;
    width: 100%;
}


/* sidebar not collapsed main menu hover */
.sidebar.collapsed .nav>li:hover>.sub-menu {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--color-bg);
    box-shadow: 1px 0 4px var(--color-boxshadow);
    z-index: 1000;
    width: max-content;
    padding-left: 0px;
}

.menu-overflow {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* open sub-menu from arrow */
.sidebar.collapsed .menu-arrow {
    display: none !important;
}

/* sub-menu active link */
.sub-menu .active a {
    /* color: #1F9EC5 !important; */
    color: var(--icon-color-custom) !important;
    font-weight: bold;
}

/* footer logout section */
.logout-section {
    background-color: var(--color-search-bg);
    position: fixed;
    bottom: 0;
    width: var(--sidebar-width)
}

/* popup after click login user */
.profile-popup {
    position: fixed;
    top: 47px;
    right: 0px;
    z-index: 9999;
    display: none;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    height: 103px;
    width: 225px;
}

/* popup content */
.profile-popup .popup-content {
    background-color: var(--icon-color-custom) !important;
    font-weight: 600;
    /* padding: 60px 12px; */
    color: var(--color-bg);
}

.profile-popup .popup-content p{
    color: var(--color-main-bg);
}

/* popup footer */
.profile-popup .popup-footer {
    background-color: var(--color-search-bg);
    color: var(--color-text);
}
/* .card{
  border: 0;
} */

/* card header */
.card-header {
    /* background: var(--card-header-background-color); */
    background: transparent linear-gradient(90deg, var(--color-header-bg1) 0%, var(--color-header-bg2) 100%) 0% 0% no-repeat padding-box;
    border-radius: 0 !important;
    min-height: 41px;
}

/* card title */
.card-title,.card_header_title {
    font-size: 13px;
    font-weight: 500;
    color: var(--card-title-color) !important;
    margin-bottom: 0;
}

.card-title-blue {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-form-heading);
}

/* card body */
.card-body {
    background: var(--color-bg);
    padding: 5px;
}

/* accordian filter */
.filter-accordian,
.filter-accordian:not(.collapsed) {
    /* background: var(--card-header-background-color); */
    background: transparent linear-gradient(90deg, var(--color-header-bg2) 0%, var(--color-header-bg1) 100%) 0% 0% no-repeat padding-box;
    color: var(--color-slider-background);
    border:unset;
    height: 40px;
}

.filter-accordian:focus {
    border: none;
    box-shadow: none;
}

.filter-label {
    font-size: 16px;
    color: var(--color-filter-label);
    font-weight: 500;
}

.filter-data-box {
    border: 1px solid var(--color-table-border);
    background: var(--color-form-input-background);
    height: 100%;
}

.custom-flex-list {
    flex: 1 1 auto;
    list-style: none;
    max-height: 126px;
    overflow-y: auto;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-body-text);
}

.accordion-button::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")
        no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")
        no-repeat center;
    background-color: var(--color-text);
    /* This sets arrow color */
}
.accordion-item:last-of-type .accordion-button.collapsed{
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}



/* datatable css */
/* table.dataTable{
  margin-top: 8px;
} */
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
    flex-direction: row !important;
}

table.dataTable thead>tr>th.dt-type-numeric,
table.dataTable thead>tr>th.dt-type-date {
    text-align: left;
}

.header-first {
    background: var(--color-table-header-background);
    color: var(--color-table-header);
}

.header-second {
    background: var(--color-search-bg);
}
table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td{
    padding: 4px 8px;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--color-bg);
    --bs-table-accent-bg: none;
    color: var(--color-table-header) !important;
    font-weight: 500;
    font-size: 12px;
}

.table-striped>tbody>tr:nth-of-type(even) {
    background: var(--color-search-bg);
    color: var(--color-table-header) !important;
    font-weight: 500;
    font-size: 12px;
}

.div.dt-container .dt-search input {
    border: 1px solid var(--color-slider-background) !important;
}

.header-search {
    border: 1px solid var(--color-slider-background);
    color: var(--color-text);
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button:hover,div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--color-toggle-bar) !important;
    color: #fff !important;
    border: 1px solid var(--color-sidebar-link-hover);
    margin-left: 0px !important;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom-color: transparent;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active,
div.dt-container .dt-paging .dt-paging-button {
    border: 1px solid var(--color-sidebar-link-hover);
    margin-left: 0px !important;
    color: var(--color-text) !important;
    padding: 5px 14px;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: var(--color-table-border) !important;
    color: var(--color-table-header);
}
div.dt-container div.dt-layout-row{
    margin-top: 0;
}
div.dt-container select.dt-input{
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* search icon inside search bar */
.global-search-wrapper {
    position: relative;
    display: inline-block;
}

.global-search-wrapper input {
    padding-left: 30px;
}

.global-search-wrapper .search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
}

div.dt-container .dt-search input {
    padding-right: 30px;
    width: 200px;
    border-radius: 0;
    height: 32px;
}

/* form css */
.form-group {
    color: var(--color-text);
}

.form-check {
    color: var(--color-text);
}
.form-label {
    margin-bottom: 0px;
}

.form-control:disabled,
.form-control[readonly],
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--color-sidebar-link-hover) !important;
    opacity: 0.7;
}
.form-control[readonly]:focus{
    background-color: var(--color-sidebar-link-hover) !important;
    opacity: 0.7;
}

.border-heading {
    border-bottom: 1px solid var(--color-form-heading);
    width: 100px;
}

.form-submit,
.form-submit:hover {
    /* background-color: transparent linear-gradient(226deg, #21A1D4 0%, #16958D 100%) 0% 0% no-repeat padding-box !important; */
    background-color: var(--color-form-heading) !important;
    color: #fff;
}
.form-select,
.form-control,
.class-dropdown,
.form-select:focus,
.form-control:focus{
    height:30px
}

.form-select,
.form-control,
.class-dropdown,
.form-select:focus,
.form-control:focus,
.select2-container--default .select2-results>.select2-results__options {
    background-color: var(--color-form-input-background) !important;
    color: var(--color-text);
    font-weight: 400;
    border: 1px solid var(--color-slider-background);
    border-radius: 0;
    min-height: 32px;
    font-size: 14px;

}
.select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.form-select,
.form-control,
.class-dropdown,
.form-select:focus,
.form-control:focus{
    background-color: var(--color-form-input-background) !important;
    color: var(--color-text);
    font-weight: 400;
    border: 1px solid var(--color-slider-background);
    border-radius: 0;
    min-height: 32px;
    font-size: 14px;
    padding: 3px 9px !important;
}
.viewer-container.viewer-backdrop.viewer-fixed {
    z-index: 9999 !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-slider-background) !important;
    box-shadow: none;
}
.checkbx {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 9px;
}

.checkbx:checked {
    background-color:var(--btn-secondary-background-color) !important;
    border-color: var(--btn-secondary-background-color) !important;
}

.checkbx:checked::after {
    /* content: "✓"; */
    content:"\e9a0";
    font-family:'icomoon' !important;
    display: block;
    color: var(--icon-color-custom) !important;
    ;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    position: relative;
    left: -3px;
}
/* submit arrow */
.submit-arrow {
    background: var(--color-toggle-bar);
    border: 1px solid var(--color-toggle-bar);
    height: 28px;
    width: 28px;
}

/* select2 dropdown */
.select2-container--default .select2-results>.select2-results__options{
    background-color: var(--color-bg) !important;
}
.select2-container{
    width: 100% !important;
}
.select2-container--default .select2-selection--single{
    background: var(--color-form-input-background);
    min-height: 32px;
    border-radius: 0;

}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    background: var(--color-form-input-background);
    color: var(--color-text);
}
.select2-container--default .select2-results__option--selected {
    background-color: var(--color-toggle-border);
    width: 100% !important;
    color: var(--btn-text-color) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid var(--color-slider-background);
    border-radius: 0;
}
.select2-container--default .select2-selection--single {

    border: 1px solid var(--color-slider-background);

}
.select2-container--default .select2-selection--multiple,.select2-dropdown {
    border: 1px solid var(--color-slider-background);

}
.form-select, .form-control, .class-dropdown, .form-select:focus, .form-control:focus, .select2-container--default .select2-results>.select2-results__options{
    border: 1px solid var(--color-slider-background);
}
.select2-search--dropdown{
    background: var(--color-bg);
}

.select2-container--default .select2-search--dropdown .select2-search__field{
    background: var(--color-sidebar-link-hover);
    color: var(--color-text);
}
.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color: var(--color-form-input-background);
}
:focus-visible{
    outline: none;
}

/* date range picker */
.daterangepicker .drp-calendar.left .calendar-table,
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker .drp-calendar.right .calendar-table,
.daterangepicker,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker .drp-buttons .btn-default,
.daterangepicker td.available:hover,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-filter-accordian);
    padding-right: 0px !important;
}

.daterangepicker .drp-buttons .btn-default,
.daterangepicker.show-calendar .drp-buttons,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    color: var(--color-text);
}

.select2-container--default .select2-selection--multiple{
    padding-bottom: 0px !important;
    border-radius: 0;
}

.select2-container--default .select2-search--inline .select2-search__field {
    height: 26px;
    color: var(--placeholder-color);
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
}

.daterangepicker .calendar-table {
    border: 1px solid var(--color-bg);

}

.daterangepicker,
.daterangepicker .drp-buttons {
    border: 1px solid var(--color-sidebar-link-hover);
}

.daterangepicker td.start-date.end-date,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-toggle-border);
}

.daterangepicker {
    z-index: 999999 !important;
    border: 1px solid;
}
.daterangepicker td.active, .daterangepicker td.active:hover{
    background-color: var(--color-toggle-border) !important;
    border-radius: 0;
    color: var(--btn-text-color) !important;
}
.daterangepicker td.in-range{
    background-color: var(--datepicker-avail-color);
    color: var(--color-text);
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
    border-color: var(--color-slider-background) !important;
}
.daterangepicker .calendar-table .prev span,.daterangepicker .calendar-table .next span{
    border-color: var(--color-text);
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover{
    background-color: var(--color-toggle-border);
    border-radius: 0;
    color: var(--btn-text-color);
}
.daterangepicker .drp-buttons{
    margin: 1px;
}
.daterangepicker td.start-date.end-date{
    border-radius: 0;
}
@media (min-width: 730px) {
    .daterangepicker .drp-calendar.left {
        margin-right: 7px;
    }
}
/* button primary */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color:var(--icon-color-custom) !important;
    border-color:var(--icon-color-custom) !important;
    color: var(--btn-text-color) !important;
    border-radius: 8px;
    padding: 6px 25px;
    /* box-shadow: inset 38px 0px 6px 3px rgb(255 255 255 / 20%), inset 38px 0px 3px 0px rgba(0, 0, 0, 0.2) */
    /* box-shadow:inset 38px 0px 6px 3px rgb(0 0 0 / 0%), inset 38px 0px 3px 0px rgba(0, 0, 0, 0.2) */
    box-shadow: inset 38px 0px 11px 0px rgb(255 255 255 / 20%);

}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--icon-color-custom) !important;
    border-color: var(--icon-color-custom) !important;
    opacity: 0.7 !important;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
    background-color: var(--btn-secondary-background-color);
    border-color: var(--color-table-border);
    box-shadow: none;
    border-radius: 8px;
    padding: 6px 25px;
    color: var(--red-color);
}

/* Modal popup */
.modal-content {
    background-color: var(--color-bg);

}
.theme-light .btn-close {
    /* filter: invert(29%) sepia(87%) saturate(4033%) hue-rotate(353deg) brightness(95%) contrast(101%) !important; */
    opacity: 1;
    filter: unset;
}
.theme-dark .btn-close {
    /* filter: invert(29%) sepia(87%) saturate(4033%) hue-rotate(353deg) brightness(95%) contrast(101%) !important; */
    opacity: 1;
    filter: invert(1);
}
.btn-close {
    /* filter: invert(29%) sepia(87%) saturate(4033%) hue-rotate(353deg) brightness(95%) contrast(101%) !important; */
    opacity: 1;
    filter:unset;
}
.btn-close:hover{
    opacity: 1;
}
.btn-close:focus{
    box-shadow: none;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1200px;
    }

    .filter-modal {
        max-width: 500px;
    }
}

.modal-backdrop.show {
    opacity: 0.8;
}

.modal {
    z-index: 999999;
}

.modal-backdrop {
    z-index: 9999;
}
.modal-body{
    padding: 10px 20px;
}
.modal-footer {
    border-top: 1px solid var(--color-sidebar-link-hover);
    padding: 5px 0px 0px 0px;
    margin: 0 15px 5px 15px;
}

.modal-header {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-sidebar-link-hover);
    padding: 3px 15px 2px;
    /* background: var(--color-toggle-border); */
    background: transparent linear-gradient(90deg, var(--color-header-bg1) 0%, var(--color-header-bg2) 100%) 0% 0% no-repeat padding-box;
}
.modal-title {
    font-size: 18px;
}
h4.col-sm-12.text-center {
    font-size: 20px;
    color: var(--icon-color-custom) !important;
}
/* body.theme-dark button.btn-close {
  filter: invert(1);
} */

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-check:focus+.btn-primary,
.btn-primary:focus,
.btn-check:focus+.btn,
.btn:focus {
    box-shadow: unset !important;
}

.badge {
    color: #3c3c3b;
    background: #fff;
}

/* dashboard */
/* cards */
.dashboard-card1 {
    background: var(--color-card-background1);
    color: var(--color-card-text);
    height: 55px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    justify-content: space-between;
}

.dashboard-card2 {
    background: var(--color-card-background2);
    color: var(--color-card-text);
    height: 55px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    justify-content: space-between;
}
.dashboard-card1,
.dashboard-card2 {
    position: relative;
    background: var(--color-card-background1); /* change for card2 if needed */
    color: var(--color-card-text);
    height: 55px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 5px 10px 10px; /* extra left space for indicator */
    overflow: hidden;
}

.dashboard-card2{
    background: var(--color-card-background2);
}
/* Left Yellow Design */
.dashboard-card1::before,
.dashboard-card2::before{
    content: "";
    position: absolute;
    left: 0px;
    top: 10px;
    bottom: 13px;
    width: 5px;
    background: #FFC107;
    border-radius: 7px;
}
/* Odd */
.row > div:nth-of-type(1) .dashboard-card1::before,.row > div:nth-of-type(5) .dashboard-card2::before {
    background: #FFC107 !important;
}

.row > div:nth-of-type(2) .dashboard-card2::before, .row > div:nth-of-type(6) .dashboard-card1::before {
    background: #28C76F !important;
}

.row > div:nth-of-type(3) .dashboard-card1::before {
    background: #FF4D4F !important;
}

.row > div:nth-of-type(4) .dashboard-card2::before {
    background: #00CFE8 !important;
}

/* master-data cards repeat css */
.master-dashboard-cards > div:nth-child(6n+1) .dashboard-card1::before,
.master-dashboard-cards > div:nth-child(6n+1) .dashboard-card2::before,
.master-dashboard-cards > div:nth-child(6n+4) .dashboard-card1::before,
.master-dashboard-cards > div:nth-child(6n+4) .dashboard-card2::before {
    background: #FFC107 !important;
}

.master-dashboard-cards > div:nth-child(6n+2) .dashboard-card1::before,
.master-dashboard-cards > div:nth-child(6n+2) .dashboard-card2::before,
.master-dashboard-cards > div:nth-child(6n+5) .dashboard-card1::before,
.master-dashboard-cards > div:nth-child(6n+5) .dashboard-card2::before {
    background: #28C76F !important;
}

.master-dashboard-cards > div:nth-child(6n+3) .dashboard-card1::before,
.master-dashboard-cards > div:nth-child(6n+3) .dashboard-card2::before,
.master-dashboard-cards > div:nth-child(6n) .dashboard-card1::before,
.master-dashboard-cards > div:nth-child(6n) .dashboard-card2::before {
    background: #FF4D4F !important;
}

/* Thin shadow line */
/* .dashboard-card1::after,
.dashboard-card2::after{
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(0,0,0,.35);
} */
/* card sub header */
.card-subheader {
    font-size: 14px;
    font-weight: 00;
    color: var(--color-table-header);
}

/* card data */
.card-data {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-table-header);
}



/* cards */
.data-title{
    font-size: 14px;
    font-weight: 500;
    color: var(--color-card-title);
}
.data-info {
    font-size: 14px;
    color: var(--color-table-header);
    font-weight: 500;
}

.tc-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 53px;
    min-height: 53px;
}

.tc-card1 {
    background: var(--color-tc-card1);
}

.tc-card2 {
    background: var(--color-tc-card2);
}

.tc-card3 {
    background: var(--color-tc-card3);
}

.tc-card4 {
    background: var(--color-tc-card4);
}

.tc-card5 {
    background: var(--color-tc-card5);
}

.tc-card6 {
    background: var(--color-tc-card6);
}

/* card box */
.card-box {
    border: 0.5px solid var(--color-slider-background);
    min-height: 83px;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 7px;
}

.img-box {
    border: 0.5px solid var(--color-slider-background);
    border-radius: 4px;
}

.box-data {
    font-size: 16px;
    color: var(--color-card-title);
}

.stats-row {
    display: flex;
    padding-top: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-item:first-child {
    width: 40%;
}

.stat-item:last-child {
    width: 60%;
}

.icon-box {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-slider-background);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.stat-value {
    font-weight: 600;
    color: #666;
}
.card-transaction{
    height: 402px;
    overflow-y: auto;
}
.card-observation{
    height: 433px;
    overflow-y: auto;
}

/* tab bar */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: var(--color-toggle-bar);
    color: #fff !important;
    font-weight: 700;
    border: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 0;
}

.nav-link,
.nav-link:focus,
.nav-link:hover {
    color: var(--color-card-title);
    font-weight: 600;
    border: none;
}

.nav-item {
    background: var(--color-bg);
}

.nav-tabs {
    background: var(--color-filter-accordian);
    border-bottom: 0px;
}

.tab-content {
    background: var(--color-bg);
}

.circle {
    height: 20px;
    width: 20px;
    border: 1px solid var(--color-filter-label);
    border-radius: 50%;
}

/* blue header */
.header-blue{
    background: #57ADB4;
    color: #fff;
}
.header-blue p.mb-0 {
    color: #fff;
}
/* blue body */
.body-blue{
    background:#E5F8FB;
}
.body-blue span{
    color:#000;
}
.canvas-blue{
    background: var(--color-graph-background);
}
/* water wave */
.waves-wrapper {

    /* border: 1px solid #57ADB4; */
    border-radius: 12px;
}

.wave-container {
    text-align: center;
}

canvas {
    border: 1px solid var(--color-slider-background);
    background: var(--color-bg);
    display: block;
    width: 100%;
    height: 180px;
}
@media (max-width: 992px) {
    canvas {
        height: 125px;
    }
}
#waveCanvas1{
    border-radius: 12px 0px 0px 12px;
}
#waveCanvas3{
    border-radius: 0px 12px 12px 0px;
}
#waveCanvas4,#waveCanvas5{
    border-radius: 12px;
}

.nav-menu {
    height: 100vh;
    position: sticky;
    top: 0;
}

.nav-scroll {
    height: 87%;
    overflow-y: auto;         /* ALWAYS SCROLLABLE */
    overflow-x: hidden;
}
/* NORMAL MODE */
.submenu-wrapper {
    position: relative;
    display: none;
}

/* WHEN OPENED */
.sub-menu.open {
    display: flex;
    flex-direction: column;
}

.nav > li {
    position: relative; /* anchor for submenu */
}


/* COLLAPSED MODE: FLY-OUT SUB-MENU TO THE RIGHT */
.sidebar.collapsed .submenu-wrapper {
    position: fixed !important;
    left: 60px;
    ;
    top: 0;
    min-width: 200px;
    background: var(--color-bg);
    box-shadow: 0 0 10px var(--color-boxshadow);
    z-index: 10000;
    display: none;
}

/* Show submenu on hover */
/* .sidebar.collapsed .nav > li:hover .submenu-wrapper {
    display: block !important;
} */

/* Make submenu inside wrapper normal */
.sidebar.collapsed .sub-menu {
    display: block;
    position: relative;
    padding: 8px 0;
    max-height: 190px;
    overflow-y: auto;
}
.nav-menu {
    height: 100vh;
    position: sticky;
    top: 0;
}
/* NORMAL MODE — submenu open when .open class added */
/* .sidebar:not(.collapsed) .sub-menu.open {
    display: flex !important;
    flex-direction: column;
    position: relative;
} */
.nav{
    padding-bottom: 135px;
}

.sidebar.collapsed .nav > li .submenu-wrapper.upward{
    display: block !important;
    top: auto !important;
    bottom: 0px !important;
    overflow: visible !important;
    z-index: 999999 !important;
}

/* .nav-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;

    
    direction: rtl;  
}

.nav-menu::-webkit-scrollbar {
    width: 6px;
}

.nav-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}


.nav-menu ul {
    direction: ltr;
} */

/* alert card */
.p-toggleswitch-handle {
    background: #CB1A7D !important;
    color: #fff !important;
}

table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > td.dt-orderable-asc, table.dataTable thead > tr > td.dt-orderable-desc{
    background:var(--color-table-header-background);
}

/* ODD rows */
table.dataTable tbody tr:nth-child(odd) > .dtfc-fixed-left,
table.dataTable tbody tr:nth-child(odd) > .dtfc-fixed-right {
    background-color: var(--color-bg) !important;
}

/* EVEN rows */
table.dataTable tbody tr:nth-child(even) > .dtfc-fixed-left,
table.dataTable tbody tr:nth-child(even) > .dtfc-fixed-right {
    background-color: var(--color-search-bg) !important;
}

table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover{
    outline: none  !important;
}

.fixed-column{
    position: sticky;
    background-color: var(--color-search-bg) !important;
    left: 0;
}
.fixed-column-left{
    position: sticky;
    left: 78px;
    background-color: var(--color-search-bg) !important;
}
.btn-block.btn-success{
    padding: 2px 8px;
}
.filter-btn i{
    font-size: 32px;
    color: var(--btn-background-color);
}
.list-group-item{
    border-bottom: unset !important;
}
.filter-btn-dashboard{
    border: 0;
    background: transparent;
    height: 26px;
}
.filter-btn-dashboard i{
    font-size: 20px;
    color: var(--btn-background-color);
}
.info-btn{
    position: relative;
    bottom: 4px;
    right: 4px;
    color: var(--btn-background-color) !important;
}
.primary-btn{
    background:var(--icon-color-custom) ;
    padding: 4px 7px 2px 7px;
    color: var(--color-form-input-background) !important;
    /* margin-top: 3px; */
}
.primary-btn i{
    color: var(--color-form-input-background) !important;
}
.sidebar-link{
    cursor: pointer;
}
.dt-paging {
    float: right;
}
.tank-wrapper canvas {
    border: none;
    /* border: 1px solid var(--color-slider-background); */
    background: var(--color-bg);
    display: block;
    /* border-radius: 5px 0px 0px 0px; */
    width: 100%;
    height: 180px;
    box-sizing: border-box;
}
/* Common styles */
.tank-wrapper > * canvas {
    background: var(--color-bg);
    width: 100%;
    height: 180px;
    display: block;
    box-sizing: border-box;

    border-top: 1px solid var(--color-slider-background);
    border-bottom: 1px solid var(--color-slider-background);
}

/* Common styles */
.tank-wrapper > * canvas {
    background: var(--color-bg);
    width: 100%;
    height: 180px;
    display: block;
    box-sizing: border-box;

    border-top: 1px solid var(--color-slider-background);
    border-bottom: 1px solid var(--color-slider-background);
}

/* Only one child (e.g. col-12) */
.tank-wrapper > *:only-child canvas {
    border: 1px solid var(--color-slider-background);
    border-radius: 8px;
}

/* First child (works for 2 or more children) */
.tank-wrapper > *:first-child:not(:only-child) canvas {
    border-left: 1px solid var(--color-slider-background);
    border-right: 1px solid var(--color-slider-background);
    border-radius: 8px 8px 8px 8px;
}

/* Last child (works for 2 or more children) */
.tank-wrapper > *:last-child:not(:only-child) canvas {
    border-right: 1px solid var(--color-slider-background);
    border-radius: 0 8px 8px 0;
}

/* Middle children (works for 3 or more children) */
.tank-wrapper > *:not(:first-child):not(:last-child) canvas {
    border-right: 1px solid var(--color-slider-background);
}
div#tblDataTable_info {
    float: left;
}
/* button css */
/* .btn:hover{
  color: var(--color-bg);
} */
.btn.disabled, .btn:disabled{
    opacity: 1;
}

.input-group-text {
    min-height: 32px;
    background: var(--color-form-input-background);
    color: var(--color-text);
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--color-slider-background);
}

.input-group-text i{
    color: var(--color-body-text) !important;
}

[class^="icon-"], a i[class^="icon-"], [class^="icon-"], [class*=" icon-"] {
    color: var(--icon-color-custom) !important;
}
.sidebar [class^="icon-"],.sidebar a i[class^="icon-"], .sidebar [class^="icon-"],.sidebar [class*=" icon-"] {
    color: var(--color-sidebar-link) !important;
    font-size: 27px;
}
.card-header [class^="icon-"], .card-header a i[class^="icon-"], .card-header [class^="icon-"], .card-header [class*=" icon-"] {
    color: var(--icon-color-custom) !important;
}
/* sidebar active menu icon */
.sidebar .sidebar-link.active i[class^="icon-"], .sidebar .active-sidebar i[class^="icon-"],.sidebar .sub-sidebar-link i[class^="icon-"]{

    color: var(--icon-color-custom) !important;
}
a.primary-btn i{
    color: var(--color-form-input-background) !important;
}
.btn-datatable,.btn-datatable1 {
    padding: 4px !important;
}
.btn-datatable i {
    font-size: 28px !important;
}
.btn-datatable1 i {
    font-size: 25px;
    position: relative;
    top: -1px;
}
.accordion-btn{
    position: absolute;
    right: 3rem;          /* aligns near arrow */
    top: 77px;
    transform: translateY(-50%);
    z-index: 9999;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
    font-weight: normal;
}
.tbl-excel-icon{
    font-size: 35px;
    display: flex;
}
/* wrap multiple  */
.fs-wrap{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.fs-label-wrap {
    background-color: var(--color-form-input-background) !important;
    border: 1px solid var(--color-slider-background) !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    cursor: pointer !important;
}

.fs-wrap .fs-dropdown{
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
}

.fs-arrow {
    border-top: 5px solid var(--color-text) !important;
}
.fs-dropdown .fs-options{
    border-top: 1px solid #eee;
}
.fs-dropdown {
    background: var(--color-form-input-background) !important;
    border: 1px solid var(--color-slider-background);
    width: auto !important;
}
.fs-search{
    border: 1px solid #aaa !important;
    margin: 6px;
}
.fs-search input {
    background: var(--color-form-input-background) !important;
    color: var(--color-text);
    border: 1px solid #aaa !important;
    padding: 3px 0 !important;
    margin: 3px 0;
}

.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
    background-color: #757575 !important;
}
.fs-option-label,.fs-label{
    color: var(--color-text) !important;
}
.fs-wrap {
    cursor: pointer;
}

.fs-label {
    width: 100%;
    display: block;
}
.fs-optgroup-label{
    background-color: var(--color-form-input-background) !important;
}
.fs-wrap.multiple .fs-option:hover{
    background: var(--color-toggle-border) !important;
    color: var(--btn-text-color) !important;
}
.fs-wrap.multiple .fs-option.selected{
    background: var(--color-toggle-border);
}
.select2-container--open {
    z-index: 999999 !important;
}
label {
    font-weight:600 !important;
    color: var(--color-text);
}
.mainicon-size{
    width:40px;
    height: auto;
}
.filter-btn {
    line-height: normal !important;
    display: contents;
}
ul.sub-menu {
    display: block;
    /* list-style: circle !important; */
    padding-left: 40px !important;
}
li.childMenuLI.active {
    color: var(--color-text) !important;
    background: var(--color-sidebar-link-hover) !important;
    font-weight: bold;
    border-left: 4px solid var(--color-sidebar-link-active-border);
}
.collapsed ul.sub-menu {
    display: block;
    list-style: unset !important;
    padding-left: 5px !important;
}
/* .collapsed ul.sub-menu {
    display: block;
    list-style: circle !important;
    padding-left: 35px !important;
} */
/* .filter-btn i{
    background: var(--icon-color-custom);
    padding: 5px 3px 0 3px;
    height: 28px;
    font-size: 20px;
    color: #fff !important;
    border-radius: 4px;
} */

.action-popup{
    position:absolute;
    z-index:9999;
    min-width:140px;
    background:var(--color-bg);
    color: var(--color-body-text);
    box-shadow:6px 7px 13px rgb(0 0 0 / 44%);
    max-width:230px
}

.action-popup::before{
    content:'';
    position:absolute;
    left:-10px;
    top:8px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:10px solid var(--btn-prefix-arrow-color);
}

.popup-top::before {
    top: auto;
    bottom: 8px;
}
.action-popup-content{
    max-height: 200px;
    overflow-y: auto;
}

.action-popup-content a,.action-popup-content button{
    display:flex;
    padding:3px 7px 3px 3px !important;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    border-bottom: 1px solid var(--color-table-border);
}

.action-popup-content a:hover,.action-popup-content button:hover{
    background:var(--color-sidebar-link-hover);
}
.tank-body {
    display: flex;
    justify-content: center;
    padding: 20px 10px;
}
.tank-container{
    height: 80vh;
    overflow-y: auto;
}
.timeline-chart{
    height: 300px;
}
/* .tank-wrapper{
  border: 1px solid var(--color-slider-background);
  border-radius: 4px;
} */
.tank-large {
    width: 90%;
}

.tank-medium {
    width: 60%;
}

.tank-small {
    width: 40%;
}
ul#myTab {
    padding-bottom: 0px;
}
.card.graph-card {
    border: 1px solid #d7d7d7;
}
.tank-section .card{
    border: 1px solid #d7d7d7;
}
.date_span{
    display: none;
    color:#FFEC00;
}
.card-selected .date_span{
    display: block;
}
.btn-icon{
    font-size: 16px;
    margin-right: 5px;
}

.child-submenu-wrapper{
    display:none;
    padding-left:18px;
}
.has-child-menu.active.open > .child-submenu-wrapper {
    display: block;
}

.child-submenu-wrapper.open{
    display:block;
}

.child-menu-arrow{
    transition:.25s;
}

.child-menu-arrow.rotate{
    transform:rotate(180deg);
}

.sub-sidebar-link{
    cursor:pointer;
    padding:3px 0;
}
.sub-menu .active .child-sub-menu li.active a{
    color: #1F9EC5 !important;
    font-weight: bold !important;
}
.sub-menu .active .child-sub-menu  a{
    color: var(--color-sidebar-link) !important;
    font-weight: 500 !important;
}
.child-sub-menu {
    list-style-type: unset;
    padding-left: 14px;
}
.highcharts-xaxis-labels text {
    fill: var(--color-body-text) !important;
    text-decoration: none !important;
}
.required {
    color: var(--required-color);
    font-weight: bold;
}
.dtfc-top-blocker {
    height: 0 !important;
}
.badge.badge-light.text-error {
    color: #FF5555;
    background: #ffdee1;
    border-radius: 9px;
}
.card.card-red {
    box-shadow: 0px -4px 2px 2px #fe5454 !important;
    border: 1px solid #fe5454 !important;
    border-radius: 22px;
}
.badge.badge-light.text-success {
    color: #15813D;
    background: #CDF3DB;
    border-radius: 9px;
}
.card.card-green {
    box-shadow: 0px -4px 2px 2px #52C57C !important;
    border: 1px solid #52C57C !important;
    border-radius: 22px;
}
.introjs-relativePosition {
    border: 3px solid var(--color-text);
    border-radius: 19px;
}
.introjs-tooltip{
    background-color: var(--color-table-header-background) !important;
}
.introjs-tour .introjs-helperLayer{
    box-shadow: unset !important;
}
.introjs-tooltip-header{
    background: var(--color-table-header-background);
    color: var(--color-text);
}
.introjs-tooltiptext{
    background: var(--color-bg);
    color: var(--color-text);
}
.introjs-tooltiptext {
    padding: 20px;
    color: var(--color-text);
}
.introjs-button{
    border-radius: 0 !important;
    padding: 6px 25px !important;
    text-shadow: none !important;
}
.introjs-nextbutton{
    background-color: var(--color-toggle-border) !important;
    border-color: var(--color-toggle-border) !important;
    color: var(--btn-text-color) !important;

}
.introjs-prevbutton{
    background-color: var(--btn-secondary-background-color) !important;
    border-color: var(--color-table-border) !important;
    box-shadow: none !important;
    color: var(--red-color);
}
.introjs-button:focus{
    box-shadow: none !important;
}

/* error page css */
.error-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background: #fdf7ff;
    position: relative;
    z-index: -1;
    background: transparent;
}

.error-content {
    max-width: 650px;
    width: 100%;
    text-align: center;
}

.error-code {
    font-size: 130px;
    font-weight: 800;
    background: linear-gradient(226deg, #21A1D4 0%, #16958D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: -65px;
}

.error-title {
    margin: 10px 0 15px;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

.error-message {
    color: #584848;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 35px;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary-error{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 45px;
    padding: 0 24px;
    font-size: 16px;
    cursor: pointer;
    background: linear-gradient(226deg, #21A1D4 0%, #16958D 100%);
    color: #fff !important;
    border: none;
}

.waves {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 0;
}

.waves svg {
    width: 200%;
    height: 350px;
    animation: waveSlide 12s linear infinite;
}

@keyframes waveSlide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-25%);
    }
}

.error-page {
    position: relative;
    z-index: 2;
}

.waves-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 0;
}

.waves-top svg {
    width: 200%;
    height: 80px;           /* Adjust height */
    transform: rotate(180deg);
    animation: waveSlideTop 12s linear infinite;
}

@keyframes waveSlideTop {
    from {
        transform: rotate(180deg) translateX(0);
    }
    to {
        transform: rotate(180deg) translateX(25%);
    }
}
.card-video {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--color-video-bg);
    box-shadow: 0 0 5px 1px var(--color-boxshadow);
    overflow: hidden;
    border-radius: 5px;
}

.card-video::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(226deg, #21A1D4 0%, #16958D 100%);
}

.card-video img {
    width: 100%;
    height: 180px;          /* Same image height for every card */
    object-fit: cover;      /* Crop instead of stretching */
}

.card-body {
    padding: 15px;
    flex: 1;
}

.card-video h6 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    /* min-height: 50px; */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


thead.column-search th {
    background: var(--color-table-header-background);
}


.fd-info-card{
    position:relative;
    background:var(--dashboard-card-background-color);
    border:1px solid var(--dashboard-card-border-color);
    border-radius:10px;
    overflow:hidden;
    height:100%;
}

.fd-info-card-header{
    padding:5px 10px;
    border-bottom:2px solid var(--dashboard-card-border-color);
    color:#59afd3;
    font-size:17px;
    font-weight:600;
    background:var(--dashboard-card-background-color);
}

.fd-info-card-body{
    padding:5px 16px 0;
    min-height: 100px;
    height: 100px;
    overflow-y: auto;
}

.fd-info-row{
    display:flex;
    justify-content:space-between;
}

.fd-info-label{
    color:var(--color-body-text);
    font-size:12px;
    font-weight: 500;
}

.fd-info-value{
    color:var(--color-text);
    font-size:14px;
    font-weight:700;
}

.fd-info-subtitle{
    color:var(--icon-color-custom);
    font-size:14px;
    font-weight:600;
    margin-top: 6px;
}

.fd-info-item{
    display:flex;
    gap:5px;
}

.fd-info-item-label{
    font-weight:700;
    color:var(--color-body-text);
    ;
}

.fd-info-item-value{
    font-weight:700;
    color:var(--color-text);
    ;
}

.stats-container > span {
    padding: 0 5px;
    position: relative;
}

/* Add vertical line */
.stats-container > span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: var(--icon-color-custom);
}

td i.fa-circle.text-red{
    color: #ff2c2c !important;
}

td i.fa-circle.text-green{
    color: #28c840 !important;
}
.under-line{
    text-decoration: underline !important;
    cursor: pointer;
}
/*==========================
    Summary Cards
==========================*/

.bwf-stat-card{
    position:relative;
    background: var( --color-card-background1); /* change for card2 if needed */
    color:var(--color-text);
    border-radius:8px;
    height:58px;
    display:flex;
    align-items:center;
    cursor:pointer;
    overflow:hidden;
    transition:.25s ease;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.bwf-stat-card:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 12px rgba(0,0,0,.15);
}

.bwf-stat-strip{
    width:4px;
    height:34px;
    border-radius:4px;
    /* margin-left:8px; */
    flex-shrink:0;
}

.bwf-stat-content{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 14px;
}

.bwf-stat-title{
    font-size:16px;
    font-weight:500;
    /* color:#7b7b7b; */
    color:var(--color-table-header);
}

.bwf-stat-count{
    font-size:17px;
    font-weight:500;
    color:var(--color-table-header);
    line-height:1;
}

/* Left Border Colors */

.bwf-total .bwf-stat-strip{
    background:#19b5fe;
}

.bwf-site .bwf-stat-strip{
    background:#ff9800;
}

.bwf-central .bwf-stat-strip{
    background:#ff9800;
}

.bwf-hod .bwf-stat-strip{
    background:#ff9800;
}

.bwf-approved .bwf-stat-strip{
    background:#33c95b;
}

.bwf-rejected .bwf-stat-strip{
    background:#ff4d4f;
}

/*  */
.request-card{
    background: var(--color-form-input-background);
    padding: 0px;
    transition: .3s;
    position: relative;
    height: 100%;
    box-shadow: 0px 3px 6px #00000029 !important;
    border: 1px solid var(--color-table-border) !important;
    border-radius: 14px;
}

.request-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.request-card .card-header{
    border-radius: 14px 14px 0px 0px;
    background-color: transparent;
}
.request-card h6{
    font-size:15px;
    margin:0;
}

.request-text{
    font-size:13px;
    color:var(--color-text);
    line-height:1.5;
    min-height:60px;
}
.request-card .card-header small {
    color: #8D8D8D;
}
.badge{
    font-size:11px;
    font-weight:600;
    border-radius:20px;
    padding:7px 12px;
}

.badge-approved{
    background:#dff6e5;
    color:#2ca24c;
}

.badge-pending{
    background:#fff0df;
    color:#ff8c00;
}

.badge-rejected{
    background:#ffe3e3;
    color:#dc3545;
}

.approval-list{
    margin-top:10px;
}

.approve-item{
    font-size:12px;
    margin-bottom:5px;
}

.success i{
    color:#2ca24c;
}

.warning i{
    color:#f39c12;
}

.danger i{
    color:#dc3545;
}
.page-item.active .page-link {
    z-index: 3;
    /* color: #fff; */
    /* background-color: #0d6efd; */
    /* border-color: #0d6efd; */
    background: var(--color-toggle-bar);
    border: 1px solid var(--color-toggle-border);
    color: #fff !important;
}
.pagination-sm .page-link {
    padding: 0.5rem .7rem;
    font-size: .875rem;
}
.page-link{
    background: transparent;
    border: 1px solid var(--color-sidebar-link-hover);
}
.page-item.disabled .page-link{
    background: transparent;
    border: 1px solid var(--color-sidebar-link-hover);
    color: var(--color-text) !important;
}
.page-link:hover{
    background: var(--color-toggle-bar) !important;
    color: #fff !important;
    border: 1px solid #fff;
}
.action-btns{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:15px;
}

.action-btns .btn{
    width:34px;
    height:34px;
    padding:0;
    border-radius:8px;
}
.request-card .card-body {
    min-height: 83px;
    background-color: transparent;
}
.request-card .card-footer {
    min-height: 96px;
    background-color: transparent;
}

#delete-modal .modal-dialog {
    max-width: 60% !important;
}

#can-modal .modal-dialog {
    max-width: 60% !important;
}

#edit-modal .modal-dialog {
    max-width: 60% !important;
}

#add-modal .modal-dialog {
    max-width: 60% !important;
}

#entry-modal .modal-dialog {
    max-width: 60% !important;
}

#text-modal .modal-dialog {
    max-width: 60% !important;
}

#delete-req-modal .modal-dialog {
    max-width: 60% !important;
}

#submit-modal .modal-dialog {
    max-width: 60% !important;
}
#sts-modal .modal-dialog {
    max-width: 60% !important;
}

#comment-modal .modal-dialog {
    max-width: 60% !important;
}

#ap-modal .modal-dialog {
    max-width: 60% !important;
}

#pr-modal .modal-dialog {
    max-width: 60% !important;
}

#uom-modal .modal-dialog {
    max-width: 60% !important;
}

#hgvs-modal .modal-dialog {
    max-width: 60% !important;
}

#edit-m-modal .modal-dialog {
    max-width: 60% !important;
}

#edit-frq-modal .modal-dialog {
    max-width: 60% !important;
}

#es-modal .modal-dialog {
    max-width: 60% !important;
}

#release-modal .modal-dialog {
    max-width: 60% !important;
}

#rel_non_gr-modal .modal-dialog {
    max-width: 60% !important;
}

#limit-change-modal .modal-dialog {
    max-width: 60% !important;
}

#graph-modal .modal-dialog {
    max-width: 60% !important;
}

#en-otp-modal .modal-dialog {
    max-width: 30% !important;
}

#rev-modal .modal-dialog {
    max-width: 60% !important;
}

#dl-modal .modal-dialog {
    max-width: 60% !important;
}

#service-modal .modal-dialog {
    max-width: 60% !important;
}

#ori-modal .modal-dialog {
    max-width: 60% !important;
}

#rev-modal .modal-dialog {
    max-width: 60% !important;
}

legend{
    color: var(--color-text);
}
.dis_tr{
    background-color: var(--color-bg) !important;
}
.dispense-cls{
    background-color: var(--dashboard-card-border-color);
}
button#default-header-color {
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: border 0.2s;
    color: red;
    margin: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-dispense{
    background-color: var(--color-toggle-border);
    border-color: var(--color-toggle-border);
    color: var(--btn-text-color) !important;
    border: 0;
    padding: 6px 10px;
    min-width: 140px;
}
button.btn_trans_bg{
    color: var(--color-text) !important;
    background: var(--color-sidebar-link-hover) !important;
    font-weight: bold;
    border-left: 2px solid var(--color-sidebar-link-active-border) !important;
    font-weight: 700;
    padding: 0px 10px !important;
    border: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 0px;
    min-height: 32px;
}
.nav-link {

    padding: .6rem 1rem;

}

#variableZradiuspiechart {
    width: 100%;
}

#variableZradiuspiechart table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#variableZradiuspiechart thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-right: 0;
}

#variableZradiuspiechart thead.has-scrollbar {
    width: calc(100% - 8px);
}
textarea.form-control, textarea.form-control:focus {
    height: auto;
}
#variableZradiuspiechart tbody {
    display: block;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

#variableZradiuspiechart tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#variableZradiuspiechart th,
#variableZradiuspiechart td {
    padding: 8px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
th.dtfc-fixed-start.dtfc-fixed-first {
    position: sticky;
    left: 0px;
}
th.dtfc-fixed-start.dtfc-fixed-sec {
    position: sticky;
    left: 75px;
}
i.icon-Circle_Info_Filled {
    /* color: var(--color-text) !important; */
    color: var(--color-slider-background) !important;
}

/* reordering */

.tabl_header_class {
    background-color: #ffcc00;
}

.right-aligned {
    text-align: right !important;
}

.table_header_gray {
    background-color: var(--color-search-bg);
    /* or bold */
}

.table_th_class {
    font-size: 12px !important;
}

.btn-logs {
    background-color: #5e9cce !important;
    border-color: #5e9cce !important;
    color: var(--color-text) !important;
}

/* reorder */
.drag-drop-list {
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-table-border) !important;
    border-radius: 4px;
    padding: 10px;
    color: var(--color-text) !important;
    background: var(--card-bg);
}

.drag-record {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--color-search-bg);
    border: 1px solid var(--color-table-border) !important;
    border-radius: 4px;
    cursor: move;
    user-select: none;
}

.drag-record:hover {
    background: transparent linear-gradient(90deg, var(--color-header-bg1) 0%, var(--color-header-bg2) 100%) 0% 0% no-repeat padding-box;
}

.drag-record.dragging {
    opacity: 0.5;
}

.drag-drop-list.drag-over {
    background: var(--card-bg);
    border: 2px dashed #ddd;
}

#tblDataTableFoot tr {
    color: var(--color-text);
}

.reorder-btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
button#moveToSelected,button#moveToAvailable{
    font-family: monospace;
    max-width: 42px;
    padding: 4px 4px !important;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
}
.main-dreg{
    display: flex;
    align-items: center;
    gap:10px
}
.center-dreg.d-flex.align-items-center.justify-content-center {
    min-width: 8%;
}
.left-dreg {
    min-width: 45%;
}
.right-dreg {
    min-width: 45%;
}
.site-dash-icon{
    font-size: 30px;
}
.nav-link-text{
    display: flex;
    align-items: center;
}
table.dataTable thead>tr>th.dtfc-fixed-first, table.dataTable thead>tr>th.dt-orderable-desc, table.dataTable thead>tr>td.dt-orderable-asc, table.dataTable thead>tr>td.dt-orderable-desc, th.dtfc-fixed-first, th.dtfc-fixed-sec{
    z-index: 5;
    box-shadow: inset 1px 0 0 var(--color-table-border),
        inset 0px 0 0 var(--color-table-border),
        inset 0 1px 0 var(--color-table-border);
    background-clip: padding-box !important;
    border: 0;
}
.table-bordered.dataTable thead th.dtfc-fixed-left{
    border: 0;
}
.table-bordered.dataTable thead th.dtfc-fixed-sec{
    border: 0;
}

.table-bordered.dataTable tbody td.dtfc-fixed-left {
    z-index: 5;
    box-shadow:
        inset 1px 0 0 var(--color-table-border), inset 0px 0 0 var(--color-table-border);
    background-clip: padding-box;
    border: 0;
}
table .form-select, table .form-control, table .class-dropdown, table .form-select:focus, table .form-control:focus{
    background-color: var(--data-table-bg-search) !important;
}
#tankContainer{
    height: 80vh;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-bottom: 3px !important;
}

input[type="file"]::file-selector-button {
    background-color: var(--color-sidebar-link-hover);
    color: var(--color-text);
    cursor: pointer;
    min-height: 32px;
}

input[type="file"]:hover::file-selector-button {
    background: var(--color-sidebar-link-hover) !important;
    color: var(--color-text) !important;
}
.gm-style .gm-style-iw-c{
    background: var(--color-sidebar-link-hover);
    color: var(--color-body-text);
}

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

.customBorder_1 > *:first-child:not(:only-child) canvas {
    border-left: 1px solid var(--color-slider-background);
    border-right: 1px solid var(--color-slider-background);
    border-radius: 8px 8px 8px 8px;
}

.customBorder_2 > *:first-child:not(:only-child) canvas {
    border-left: 1px solid var(--color-slider-background);
    border-right: 1px solid var(--color-slider-background);
    border-radius: 8px 0px 0px 8px;
}

.customBorder_3 > *:first-child:not(:only-child) canvas {
    border-left: 1px solid var(--color-slider-background);
    border-right: 1px solid var(--color-slider-background);
    border-radius: 8px 0px 0px 8px;
}

/* Last child (works for 2 or more children) */
.customBorder_2 > *:last-child:not(:only-child) canvas {
    border-right: 1px solid var(--color-slider-background);
    border-radius: 0 8px 8px 0;
}
.customBorder_2  > *:not(:first-child):not(:last-child) canvas{
    border-radius: 0 8px 8px 0;
}
.customBorder_3 > *:last-child:not(:only-child) canvas {
    border-right: 1px solid var(--color-slider-background);
    border-radius: 0 8px 8px 0;
}

/* Middle children (works for 3 or more children) */
.customBorder_3 > *:nth-child(3) canvas {
    border-right: 1px solid var(--color-slider-background);
    border-radius: 0 8px 8px 0;
}

form table .form-select,form table .form-control,form table .class-dropdown,form table .form-select:focus,form table .form-control:focus{
    background-color: var(--color-form-input-background) !important;
}
#variable_U_radiuspiechart {
    width: 100%;
}

#variable_U_radiuspiechart table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#variable_U_radiuspiechart thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-right: 0;
}

#variable_U_radiuspiechart thead.has-scrollbar {
    width: calc(100% - 8px);
}

#variable_U_radiuspiechart tbody {
    display: block;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

#variable_U_radiuspiechart tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#variable_U_radiuspiechart th,
#variable_U_radiuspiechart td {
    padding: 8px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
/* Multiple Select2 arrow */
.select2-container--default .select2-selection--multiple {
    position: relative;
    padding-right: 30px !important;
}

.select2-container--default .select2-selection--multiple::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #888;
    pointer-events: none;
}
.select2-container--default.select2-container--open
.select2-selection--multiple::after {
    border-top: 0;
    border-bottom: 6px solid #888;
}
.breadcrumb-item+.breadcrumb-item::before{
    font-family: cursive;
}
.breadcrumb-item a{
    color: var(--card-title-color) !important;
}
.breadcrumb-item.active a{
    color: var(--color-sidebar-link) !important;
}
.loader-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-image {
    width: 80px;
    height: 80px;
}
.introjs-tooltip-header {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: unset  !important;
    min-height: unset !important;
}
.introjs-bullets {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
}
.filter {
    margin-left: 5px;
    font-size: 14px;
}
.view-icon i{
    font-size: 26px;
}
.card-border-bottom{
    border-bottom: 1px solid var(--color-sidebar-link-hover);
}
/* scroll-to-top button css */
#myBtn {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 27px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background: var(--color-toggle-bar);
    border: 1px solid var(--color-toggle-border);
    box-shadow: 0px 0px 6px var(--color-boxshadow);
    cursor: pointer;
    padding: 6px 11px;
    border-radius: 50%;
}
#myBtn i{
    color: #fff !important;
}
.take-tour-btn{
    height: 26px;
}
/* drag&drop css */


.drop_card {

    border-radius: 2.5rem;

    cursor: grab;
    user-select: none;
    position: relative;
}

.drop_card:active {
    cursor: grabbing;
}
.resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
}

.resize-handle:hover {
    background: rgba(0, 0, 0, 0.08);
}

.introjs-tooltiptext {
    padding: 20px;
    color: var(--color-text) !important;
}

g.highcharts-label.highcharts-data-label.highcharts-data-label-color-undefined.highcharts-drilldown-data-label text
{
    fill: var(--color-text) !important;
}

g.highcharts-no-tooltip.highcharts-button.highcharts-breadcrumbs-button.highcharts-button-normal text {
    fill: var(--icon-color-custom) !important;
}

g.highcharts-no-tooltip.highcharts-button.highcharts-breadcrumbs-button.highcharts-button-pressed text
{
    fill: var(--color-text) !important;
}