/* Light Theme (Default) */
:root {
    --bg-color: #ffffff;
    --bg-color-secondary: #f0f1f2;
    --text-color: #44546f;
    --text-color-secondary: #7f7f7f;
    --topic-title-color: #000;
    --help-label-color: #052760;
    --border-color: #EFF1F1;
    --team-card: #ffffff;
    --menu-hover: #eee;
    --default-color: #000000;
    --primary-color: #185190;
    --badge-bg-color: #E5E7EB;
    --grid-border-color: #EFEFEF;
    --scrollbar-track: #FCFCFC;
    --scrollbar-thumb: #8B8B8B;
    --scrollbar-thumb-hover: #636363;
    --calender-color: #f5f5f6;
    --theme-red: #f00;
    --theme-link: #005fff;
    --primary-btn: #052760;
    --primary-btn-hover: #0948b2;
    --msg-bg-color: #ffda001a;
    --fixed-header-color: #f5f5f6;
    --input-controls-color: #005fff;
    --banner-card-color: #FFF;
    --icon-save-color: #48d348;
    --icon-prohibited-color: red;
    --msg-bg-color: #797f9d1a;
    --popup-pointer-color: #f1efef;
    --badge-active-color: #cbdef56b;
    --tab-activebg-color: #e8f0fe;
    --overlay-color: #898989;
    --inner-grid-bg: #fbfbfb;
    --search-border: #ccc;
    --search-icon-bg: #b1b1b1;
    --search-icon-bg-hover: #005fff;
    --radio-container-bg: #f0f4ff;
    --radio-container-border: #337ab7;
    /* ReleaseAcceptance.css / login+guided-tour colors that have no existing
       semantic token above — kept at the same value in both themes (not yet
       redesigned for dark mode), just relocated out of the component CSS. */
    --login-panel-bg: #E5F1FF;
    --auth-accent: #2F80ED;
    --login-input-text: #6C737F;
    --login-border: #E0E0E9;
    --login-navy-accent: #04265f;
    --footer-text: #383838;
    --tour-accent-yellow: #efc413;
    --footer-btn-hover-bg: #009bf6;
    --static-header-border: #ebebeb;
    --tour-footer-divider: #e5e7eb;
    --carousel-dot-fill: #ffffff;
    --tour-pin-color: #000000;
    --tour-pin-contrast: #ffffff;
    --black-alpha-10: rgba(0, 0, 0, 0.10);
    --black-alpha-15: rgba(0, 0, 0, 0.15);
    --black-alpha-18: rgba(0, 0, 0, 0.18);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-25: rgba(0, 0, 0, 0.25);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    --red-shade: #ffeded;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-color: #1D232C;
    --bg-color-secondary: #1D232C;
    --text-color: #E3E3E3;
    --text-color-secondary: #E3E3E3;
    --topic-title-color: #ffffff;
    --help-label-color: #ffffff;
    --border-color: #7f7f7f;
    --team-card: #2c3a4f;
    --menu-hover: #3b5378;
    --default-color: #E3E3E3;
    --primary-color: #6CA3FF;
    --badge-bg-color: #2c3a4f;
    --grid-border-color: #4c4c4c;
    --scrollbar-track: #484848;
    --scrollbar-thumb: #888;
    --scrollbar-thumb-hover: #888;
    --calender-color: #2A2A2D;
    --theme-red: #e55c5c;
    --theme-link: #6CA3FF;
    --primary-btn: #5099d2;
    --primary-btn-hover: #2d6fa3;
    --msg-bg-color: #ffda0080;
    --fixed-header-color: #363e44;
    --input-controls-color: #3b5378;
    --banner-card-color: #283549;
    --icon-save-color: #39833a;
    --icon-prohibited-color: #c72929;
    --msg-bg-color: #7e818dbd;
    --popup-pointer-color: #555555;
    --badge-active-color: #445773;
    --tab-activebg-color: #2c3a4f;
    --overlay-color: #000;
    --inner-grid-bg: #445773;
    --search-border: #646464;
    --search-icon-bg: #445773;
    --search-icon-bg-hover: #5099d2;
    --radio-container-bg: #2f3c52;
    --radio-container-border: #5794c8;
    --red-shade: #5c3939;
}


body, .box_wrapper {
    background: var(--bg-color) !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

a {
    color: var(--theme-link) !important;
}

    a.btn {
        color: #FFF !important;
    }

.default-border-clr {
    border-color: var(--border-color) !important;
    border-bottom: 1px solid;
}

a.btn.btn-default, .confirm-dialog-btn-default, .content-button,
.btn-default-alt, .k-button {
    border-color: var(--primary-btn) !important;
    background-color: transparent !important;
    color: var(--primary-btn) !important;
}

    a.btn.btn-default:hover, .confirm-dialog-btn-default:hover, .k-button:hover {
        color: #fff !important;
        background-color: var(--primary-btn) !important;
    }

.nav i {
    color: var(--theme-link) !important;
}

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

.text-primary, h5.section-title {
    color: var(--primary-color) !important;
}

.btn-primary-alt, .confirm-dialog-btn-primary,
button.k-button.k-primary {
    border-color: var(--primary-btn) !important;
    background-color: var(--primary-btn) !important;
    color: #fff !important;
}

    .btn-primary-alt:hover, .btn-default-alt:hover, .btn.btn-primary:hover,
    .btn-primary-alt:active, .btn-primary-alt:focus,
    .confirm-dialog-btn-primary:hover,
    button.k-button.k-primary:hover {
        border-color: var(--primary-btn-hover) !important;
        background-color: var(--primary-btn-hover) !important;
    }

.graph-container {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: solid 1px var(--border-color);
}

.banner-container {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-right: solid 1px var(--border-color);
}

.row.rowspacing, .tab-container {
    border-color: var(--grid-border-color) !important;
}

.search-section-div {
    box-shadow: 1px 1.5px 1px var(--grid-border-color) !important;
}

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

#dvUpdatedNotification .k-grid-header,
#dvUpdatedNotification .k-grid-header table thead tr th,
.k-picker-wrap.k-state-default {
    background: var(--bg-color) !important;
}

.k-picker-wrap .k-select {
    background: var(--team-card) !important;
}

.form-group .k-picker-wrap .k-select {
    background-color: transparent !important;
}

.sub_navbar {
    border-bottom: solid 1px var(--border-color);
}

.team-member, .dropdown-content4, #myDropdown a, .nav-li-a-active,
.user-info, .slideshow-container, .user-info:after,
.bs-select-control option {
    background: var(--team-card) !important;
}

.navbar-right li:hover, .collapsed:hover {
    background: var(--menu-hover) !important;
}

.dropdown-content2:after, .dropdown-content2:before {
    background: var(--popup-pointer-color) !important;
    z-index: -1;
}

.pooup_wrapper,
.showPopUp,
.popup-overlay,
.popup-content,
.showPopUpInfo,
input:checked + .slider,
.showItemPopUp {
    /*    background-color: var(--team-card) !important;*/
    background-color: var(--bg-color) !important;
}

.QOH-info, .QOH-Wrapper, .QOH-info:after,
.QOH-info table tbody tr td,
.QOH-info table thead tr td,
.QOH-info table tbody tr,
.QOO-info, .QOO-Wrapper, .QOO-info:after,
.QOO-info table tbody tr td,
.QOO-info table thead tr td,
.QOO-info.table tbody tr {
    background-color: var(--team-card) !important;
}

    .QOH-info table tbody tr td,
    .QOO-info table tbody tr td,
    .k-grid table tbody,
    .QOH-Wrapper .k-grid table tbody tr {
        /*        border-bottom: 1px solid var(--team-card) !important;*/
        border-color: var(--team-card) !important;
    }

    .QOH-info table thead tr td {
        border-color: var(--grid-border-color) !important;
    }

.banner-container:hover .team-member {
    border: solid 1px var(--border-color);
}

.banner-container h4, .rightbottom, .righttop {
    background: var(--bg-color) !important;
}

#aCustname, .k-dropdown-wrap .k-input, .sub_navbar .navbar-nav li a, .sub_navbar .navbar-nav li a i, #myDropdown a {
    color: var(--text-color) !important;
}

    /*.k-dropdown-wrap .k-select{*/
    /*.k-dropdown-wrap.k-state-default {*/
    /*background: var(--team-card)!important;
}*/

    #myDropdown a:hover, .dropdown4:hover, .nav > li > a:hover, .nav > li > a:focus, select#Category option {
        background: var(--menu-hover) !important;
        color: var(--text-color) !important;
    }

#divGreeting, .section-header.team-title, .grid_header, .k-header {
    color: var(--default-color) !important;
}

.section-header, .team_member_name {
    color: var(--primary-color) !important;
}

.dropdown-content6, .dropdown-content6:after, #grdUserPreference .k-grid-header th,
#helpListView {
    background: var(--bg-color) !important;
}

.subheader, .form-control, .detail-content p,
.contact-form label, .direct-call {
    color: var(--text-color) !important;
}

.form-control {
    background-color: transparent !important;
    border-color: var(--grid-border-color) !important;
}

.header-links {
    background-color: var(--bg-color-secondary) !important;
}

.description, .detail-view h3, .footer-links, .release-card, .char-count,
.k-grid table tbody td, #grdUserPreference .k-grid-header {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.subtopic-title, .feedback-heading {
    color: var(--topic-title-color) !important;
}

.help-label, .animate-primary, .direct-call a {
    color: var(--help-label-color) !important;
}

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


.k-animation-container .k-list-container,
.k-list-scroller {
    background: var(--bg-color) !important;
}

.k-list .k-item,
.k-list-optionlabel,
input.k-textbox {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

    .k-list .k-item:hover,
    .k-list .k-item.k-state-hover,
    .k-list .k-item.k-state-selected,
    #dvDateFilter div:hover {
        background: var(--menu-hover) !important;
        color: var(--text-color) !important;
    }

.release-card h3, .subtopic h4, .ReleaseShowmore-content h3 {
    color: var(--default-color) !important;
}

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

#grdUserPreference .k-grid-content table tbody tr td {
    border-bottom: 1px solid var(--bg-color) !important;
}

.notification-container, .main-container-block, .k-grid-header th.k-header,
.dvNotification:after {
    background-color: var(--bg-color) !important;
}

    /*css form orderenquiry*/

    .k-grid-header th.k-header > .k-link,
    .k-icon, .k-tool-icon {
        color: var(--default-color) !important;
    }

.k-grid table tbody td,
.tab,
.badge {
    color: var(--text-color) !important;
}

.line-info-header {
    color: var(--text-color) !important;
    background-color: var(--inner-grid-bg) !important;
}


.badge {
    color: var(--text-color) !important;
    background-color: var(--team-card) !important;
}

.tab.subactive {
    background-color: var(--tab-activebg-color) !important;
}

    .tab.subactive .badge {
        background-color: var(--badge-active-color) !important;
    }

.collapsed i {
    color: var(--primary-color) !important;
    /*        background-color: var(--team-card) !important;*/
}

.tab.subactive {
    border-bottom: 3px solid var(--primary-color) !important;
}


#divOpenOrders .k-widget, #ClosedOrders .k-widget, #InvoicedOrders .k-widget,
div.k-grid-footer, div.k-grid-header, .k-grid table tbody td, .line-info-header e,
.DummyGlobalSearch, .user-avatar-li, .search-section-div {
    background-color: var(--bg-color) !important;
}

.notification-module, .notification-date {
    color: var(--text-color) !important;
}

.notification-action {
    color: var(--default-color) !important;
}

.badge.notification-count {
    color: var(--text-color) !important;
    background-color: var(--badge-bg-color) !important;
}

.navbar-alt .navbar-collapse .navbar-nav li.user-profile-menu {
    background-color: var(--bg-color) !important;
}

.dropdown-content1 {
    background-color: var(--team-card) !important;
}

    .dropdown-content1:after {
        background: var(--team-card) !important;
    }

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

.k-grid table tbody tr {
    /*    border-top: solid 1px var(--grid-border-color) !important;*/
    border-color: var(--grid-border-color) !important
}

.details-container {
    border: 1px solid var(--grid-border-color);
}

.k-state-border-down {
    color: var(--text-color) !important;
}

.form-group-alt .form-control-alt {
    /*    border-bottom: 1px solid var(--border-color) !important;*/
    border-color: var(--grid-border-color) !important;
}
/*order details*/
.HeaderFormButtons {
    background-color: var(--bg-color) !important;
}

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

.spanHeader {
    color: var(--default-color) !important;
}

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

.box_wrapper {
    border: 1px solid var(--grid-border-color) !important;
}

.table tbody tr, .publish_docs thead tr th {
    border-bottom-color: var(--grid-border-color) !important;
}

.table tbody tr {
    background-color: var(--bg-color) !important;
}

.k-tooltip.k-popup {
    color: var(--text-color) !important;
}

/*scrollbar*/
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}


::-webkit-scrollbar-track {
    background: var(--scrollbar-track) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
    border-radius: 6px !important;
}

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


::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover) !important;
}

/*product enquiry*/

#tblWhse thead, #tblPOU thead,
.k-content, .file_uploader, .dropZoneElement,
.file-card, #grdNonStockProduct .k-grid-content-locked,
#grdStockProduct .k-grid-content-locked,
#grdProductEnquiryOtherPlant .k-grid-content-locked, .k-multiselect-wrap {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.file-card {
    border: 1px solid var(--grid-border-color) !important;
}

.priceBreak, .priceBreak:after, #tblPriceBrk tbody tr,
div.k-treeview {
    background-color: var(--team-card) !important;
    color: var(--text-color) !important;
}

.filter-button-block {
    background-color: var(--bg-color) !important;
}

.table > thead:first-child > tr:first-child > th,
.graphNoDataHeight {
    color: var(--topic-title-color) !important;
}

.publish_docs tbody tr td,
.sp-div, .so-div, .dvskeletonpusage,
.dvskeletonpdoc, .last-transaction-section, .dvIfrProdShipRcpt,
.k-group {
    border-color: var(--grid-border-color) !important;
}

.dropImageHereText, .file-title-row, .file-meta, div.k-treeview,
.k-popup .k-treeview .k-item > .k-group {
    color: var(--text-color) !important;
}

#dvWarehouses .k-widget,
.QOO-info table thead tr td {
    border-color: var(--border-color) !important;
}

.popup-overflow {
    color: var(--text-color) !important;
}
/*rfq*/
.fetchingInfo,
input.k-input#txtDateRangeFrom::placeholder,
input.k-input#txtDateRangeTo::placeholder,
.time_date,
.form-control::placeholder {
    color: var(--text-color) !important;
}

.received_withd_msg p, .sent_msg p, .outgoing_msg_time_date {
    color: var(--default-color) !important;
}

.sent_msg p {
    background-color: var(--msg-bg-color) !important;
}

.section-header {
    border-color: var(--grid-border-color) !important;
    background-color: var(--bg-color) !important;
}

#divItemList .k-grid-header th {
    background-color: var(--bg-color) !important;
}

.CommentTextArea {
    background-color: var(--bg-color) !important;
    border-bottom: 1px solid var(--grid-border-color) !important;
}

.userdetails-info, .userdetails-info:after {
    background: var(--team-card) !important;
}
/*order enquiry*/
.row.rowspacing, .dept-header,
.section-body, .grd-a,
.k-grid-content.k-auto-scrollable {
    background-color: var(--bg-color) !important;
}

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

.left-panel, .left-section, .heading-block-cs {
    border-color: var(--grid-border-color) !important;
}

.k-item label, .k-grid-norecords {
    color: var(--text-color) !important;
}

.n-container-block .heading-block, .main-container-block .heading-block {
    background-color: var(--bg-color) !important;
}

.k-item:hover {
    background-color: var(--menu-hover) !important;
}

/*docs command reports*/
.reports-norecordsfound {
    color: var(--text-color) !important;
}

.docpopupheader, .notification-label, .input-label,
.content-text {
    color: var(--topic-title-color) !important;
}

.noBorder {
    background: var(--bg-color) !important;
    border-color: var(--grid-border-color) !important;
}


.showPopUp, #dvUploadNewFilePresentContent .k-widget {
    background: var(--bg-color) !important;
}

.action-icons:hover, select option:hover {
    background-color: var(--menu-hover) !important;
}

/*analytics -> Manufacture Visits*/
#dvTtlVst {
    color: var(--default-color) !important;
}

#CompletedVisits, #FutureVisits {
    color: var(--default-color);
}

.icswrapper:hover {
    background-color: var(--menu-hover) !important;
}

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

.k-scheduler-toolbar, .k-scheduler-table,
.k-header,
.k-scheduler-toolbar .k-scheduler-views,
#scheduler, .k-nonwork-hour {
    background-color: var(--bg-color) !important;
}

    .k-scheduler-table .k-other-month {
        background-color: var(--calender-color) !important;
    }

.k-scheduler,
.k-other-month .k-nav-day,
.k-scheduler-layout {
    color: var(--text-color) !important;
}

.k-scheduler-monthview .k-scheduler-table .k-today {
    background-color: var(--tab-activebg-color) !important;
}

.mfgraph-class, .manucount-class,
.k-header, .k-scheduler-table td,
.k-scheduler-header th,
.k-scheduler-layout,
.k-scheduler-times th {
    border-color: var(--grid-border-color) !important;
}


.back-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('/Images/backstroke.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

#dvDateFilter div.selectedTab, .ActiveTab {
    color: var(--theme-link) !important;
    border-bottom: 4px solid var(--theme-link) !important;
}
/* Dark theme */
html[data-theme='dark'] .back-icon {
    background-image: url('/Images/backstroke-dark.svg');
}
/*html[data-theme='dark'] #logoImage {
    background-image: url('/Images/PSMI-dark.svg');
}*/

html[data-theme='dark'] #logoImage {
    content: url('../images/PSMI-dark.svg');
}

html[data-theme='light'] #logoImage {
    content: url('../images/PSMI.svg');
}

/*terms and conditions page logo*/
html[data-theme='dark'] #mainLogoImage {
    content: url('../images/egc-logo-dark.png');
}

html[data-theme='light'] #mainLogoImage {
    content: url('../images/logo.png');
}

.pwd-invalid, label.required:before {
    color: var(--theme-red) !important;
}

.trCompVisit:hover {
    background-color: var(--menu-hover) !important;
}

.close {
    color: var(--primary-color) !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
}

.k-filter-menu .k-input, .k-filter-menu .k-textbox, .k-dropdown-wrap .k-select {
    background-color: var(--team-card) !important;
    border-color: var(--team-card) !important;
}

.k-popup {
    background-color: var(--team-card) !important;
    /*    border-color: var(--grid-border-color) !important;*/
    box-shadow: 0px 0px 3px #525252;
}

.selectLocation .k-select {
    background-color: var(--bg-color) !important;
}

.k-dropdown-wrap.k-state-default {
    background-color: var(--team-card) !important;
}

.selectLocation .k-dropdown-wrap.k-state-default {
    background-color: transparent !important;
}

span.k-datepicker {
    border-color: var(--grid-border-color) !important;
}

form.k-filter-menu .k-textbox, span.k-dropdown {
    border-bottom: 1px solid var(--grid-border-color) !important;
}

.nav-li-a-active .dropdown4:hover {
    background-color: var(--team-card) !important;
}

.k-calendar .k-link {
    color: var(--text-color) !important;
}

.k-calendar th, .k-calendar .k-footer .k-nav-today {
    background-color: var(--bg-color) !important;
}

.k-state-selected {
    background-color: var(--theme-link) !important;
}

.k-calendar td.k-state-selected .k-link {
    color: #fff !important;
}

.k-popup.k-calendar-container {
    border-color: var(--border-color) !important;
}


/*css for kendo elements*/

.k-chart svg text {
    fill: var(--text-color) !important;
}


.k-chart text {
    fill: var(--text-color) !important;
}


.k-chart svg path[stroke="#dfdfdf"] {
    stroke: var(--grid-border-color) !important;
}


/*.k-chart svg line,
.k-chart svg path {
    stroke: var(--grid-border-color);
}
*/

.k-chart svg line {
    stroke: var(--grid-border-color);
}


.k-tooltip.k-chart-tooltip {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}


.k-chart,
.k-chart svg {
    background-color: var(--bg-color) !important;
}

    .k-chart svg path[fill="#fff"],
    .k-chart svg path[fill="#ffffff"] {
        fill: var(--bg-color) !important;
    }


    .k-chart svg path[fill-opacity="0"] {
        fill: var(--bg-color) !important;
    }

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

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

.itemBox, .ss-section-card {
    background: var(--bg-color) !important;
}

.sts_msg p {
    background: var(--fixed-header-color) !important;
}

input:checked + .slider {
    border-color: var(--theme-link) !important;
}

    input:checked + .slider:before {
        background: var(--theme-link) !important;
    }

    input:checked + .slider:after {
        color: var(--theme-link) !important;
    }

.line-info, .line-info:after, .line-Wrapper.k-grid table tbody td {
    background-color: var(--team-card) !important;
}

#tblSummary tbody tr.row-highlight td, #tblSummary tbody td.detail-td-highlight,
.table .table {
    background: var(--bg-color) !important;
}

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

.descMfrandMfrPart, .lblAlignment, .textLeftAlign {
    border-color: var(--bg-color) !important;
}

.textLeftAlign {
    border: 1px solid var(--bg-color) !important;
}

.popupMinMax {
    border-color: var(--grid-border-color) !important;
}

.th.menu-col-name {
    background-color: var(--bg-color) !important;
}

td.menu-col-name, th.menu-col-name {
    background: var(--fixed-header-color) !important;
}

.accordion-header, .accordion-site {
    background: var(--bg-color) !important;
}

.accordion-site-title, .th.menu-col-name, .menu-col-name {
    color: var(--text-color) !important;
}

.rfq-details-table.table thead tr th {
    background-color: var(--fixed-header-color) !important;
}

#dvscrollHeader, #tblSummary tbody tr td, .secondary_header {
    background-color: transparent !important;
}

.table > tbody > tr > td, .accordion-site {
    border-color: var(--grid-border-color) !important;
}

/*radio button--*/
.LocalLabelcontainer input:checked ~ .Localcheckmark {
    border: 4px solid var(--theme-link) !important;
}

.Localcheckmark {
    border: 1px solid var(--text-color) !important;
    background: transparent;
}

.LocalLabelcontainer:hover input ~ .Localcheckmark {
    background: var(--menu-hover) !important;
}

.card-pdf {
    background-color: var(--menu-hover) !important;
}

.menu-container, .menu-col-name, .menuCell, .menuHeader, .Doc-colab-sub-section,
.reports-sub-section {
    border-color: var(--grid-border-color) !important;
}

.release-popup, popup-inside {
    background-color: var(--team-card) !important;
}

    .release-popup::after {
        border-color: transparent transparent var(--team-card) transparent;
    }

#tblMenuSettings th {
    color: var(--default-color) !important;
}

input[type='checkbox'] {
    margin-top: 0 !important;
    background-color: transparent !important;
    appearance: none;
    border: 1px solid var(--text-color) !important;
    position: relative;
    width: 16px;
    height: 17px;
    overflow: hidden !important;
}
    /*    input[type='checkbox'][disabled] {
        border-bottom: 1px solid var(--text-color) !important;
    }*/
    input[type='checkbox'][disabled] {
        border: 1px solid #76767687 !important;
        opacity: 0.5;
        background-color: #dddddd4d !important;
    }

    input[type="checkbox"]:checked:disabled::after {
        background-color: #ddd !important;
    }

    input[type="checkbox"]:checked::after {
        content: "\eb7a";
        font-family: 'remixicon' !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        top: 0px;
        left: 0px;
        font-size: 13px;
        background-color: var(--theme-link) !important;
        color: #fff !important;
        width: 100%;
        height: 18px;
        text-align: center;
        padding-left: 0px;
        border-color: var(--theme-link) !important;
    }

.k-checkbox-label:before {
    background: transparent;
    border-radius: 0;
    width: 16px !important;
    height: 16px !important;
    padding-left: 0px;
}

.k-checkbox:checked + .k-checkbox-label:before {
    content: "\eb7a";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 0px;
    left: 1px;
    font-size: 12px;
    background-color: var(--theme-link) !important;
    color: #fff !important;
    background-image: none !important;
    width: 100%;
    height: 15px;
    text-align: center;
    padding-left: 0px;
}
/* Global accordion checkboxes (Add/Edit User – Document & Reports header) */
.global-checkbox-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    background-color: var(--bg-color) !important;
    border: 1px solid var(--text-color) !important;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
}

    .global-checkbox-input:checked::after {
        content: "\eb7a";
        font-family: 'remixicon' !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        top: -1px;
        left: -1px;
        width: 16px;
        height: 16px;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        background-color: var(--theme-link) !important;
        border: 1px solid var(--theme-link) !important;
        border-radius: 2px;
        color: #fff !important;
    }

.k-checkbox:indeterminate + .k-checkbox-label:after {
    background-image: none !important;
    content: "\f1af" !important;
    font-family: 'remixicon' !important;
    font-style: normal;
    color: #fff !important;
    -webkit-font-smoothing: antialiased;
    background-color: var(--theme-link) !important;
    top: 9px;
    left: 9px;
    font-size: 13px;
    width: 16px !important;
    height: 16px !important;
    text-align: center;
    padding-left: 0px;
    position: absolute;
    border-color: var(--theme-link) !important;
}

#tblMenuSettings tr td:first-child::before, #tblMenuSettings th:first-child::before,
#tblMenuSettings tr td:first-child::after, #tblMenuSettings th:first-child::after {
    background-color: transparent !important;
}

#drpLocation-list {
    border-color: var(--grid-border-color) !important;
}

.btn.btn-default.nav.btnActive,
.k-state-default.k-view-day.k-state-selected {
    background-color: var(--theme-link) !important;
}

.k-state-default.k-view-month.k-state-selected {
    background-color: var(--theme-link) !important;
}

.btnActive i {
    color: #fff !important;
}

#btnCalView, .k-scheduler-views .k-state-selected,
.k-scheduler-views .k-view-day {
    border-color: var(--theme-link) !important;
}

.btn.btn-default.nav, .k-scheduler-views .k-view-day,
.k-state-default.k-view-month {
    background-color: transparent !important;
}
/*span.k-dropdown.k-header.k-widget {
    background-color: var(--team-card) !important;
    
}*/

/*login page*/
.auth-card, .divider-or span {
    background: var(--banner-card-color) !important;
}

    .auth-card h5, .auth-card h6, .hp-ratio .check-label.text-body,
    .hp-ratio .check-label.text-body, .text-body,
    .divider-or span {
        color: var(--default-color) !important;
    }

.divider-or::before {
    background: var(--grid-border-color) !important;
}

.btn-register {
    color: var(--default-color) !important;
    border-color: var(--theme-link) !important;
}

.login-text-box, .register-text-box,
.iti--separate-dial-code .iti__selected-flag,
.input-phone {
    background: transparent !important;
    border-radius: 0px;
}

.iti__country-list {
    background: var(--team-card) !important;
    border-color: var(--grid-border-color) !important;
}

.iti__divider {
    border-color: var(--grid-border-color) !important;
}

.icon-round-bg {
    background-color: transparent !important;
}

.line-info table thead tr td, .line-info table tbody tr td {
    border-color: var(--grid-border-color) !important;
    background: var(--team-card) !important;
}
/*.nav a:hover {
    background-color: var(--menu-hover) !important;
}*/

#grdSharedDocs .k-grid-header th.k-header {
    background-color: var(--bg-color) !important;
}

.share-doc-popup {
    border-color: var(--grid-border-color) !important;
}

.SearchUser .k-button {
    background-color: var(--bg-color) !important;
    border-color: var(--grid-border-color) !important;
    color: var(--text-color) !important;
}

.SearchUser .k-multiselect-wrap {
    border-color: var(--grid-border-color) !important;
}

#dvPreference .k-treeview-lines li:hover, .k-in.k-state-hover {
    color: var(--text-color) !important;
}

.k-treeview-lines .k-state-selected {
    background-color: var(--menu-hover) !important;
    border: 1px solid var(--menu-hover) !important;
    color: var(--text-color) !important;
}

#dvPreference .k-treeview-lines li:hover,
#dvPreference .k-treeview-lines li .k-state-hover {
    color: var(--text-color) !important;
}

.form-group-alt .form-control-alt option:first-child {
    color: var(--text-color) !important;
}

#dvGridSection .k-grid-content-locked, #dvGridSection .k-grid-header-locked {
    border-color: var(--grid-border-color) !important;
}

.k-list-container {
    color: var(--text-color) !important;
}

.userdetails-info::before {
    background-color: var(--team-card) !important;
}

.nav i.inactive-user-icon {
    color: #c72929 !important;
}

.ss-section-card, .ss-section-title,
.form-group-alt span.k-autocomplete {
    border-color: var(--grid-border-color) !important;
}

.ss-section-title {
    color: var(--primary-color) !important;
}

.ri-send-plane-2-line {
    background-color: var(--theme-link) !important;
    border-color: var(--theme-link) !important;
}

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

#dvUploadFilePresentContent .k-widget {
    background: var(--bg-color) !important;
}

.ri-prohibited-line, .ri-delete-bin-6-lin, .btnLineDlt {
    color: var(--icon-prohibited-color) !important;
}

.ri-save-3-line {
    color: var(--icon-save-color) !important;
}

.form-group-alt .form-control-alt:focus {
    border-color: var(--theme-link) !important;
}

.k-progressbar > .k-state-selected {
    background-color: var(--icon-save-color) !important;
}

.block {
    background-color: transparent !important;
}

.k-progressbar-horizontal .k-state-selected {
    border-color: transparent !important;
}

.k-stepper .k-step:hover .k-step-label {
    color: var(--text-color) !important;
}

.k-loading-color {
    background-color: var(--bg-color) !important;
    opacity: 0.7 !important;
}


.nav-li-a-active a {
    border-bottom: 4px solid var(--theme-link) !important;
}

.CommentTextArea:focus {
    border-bottom: 1px solid var(--theme-link) !important;
}
/* Dark Theme - Global SVG replacement */



/*html[data-theme='dark'] img[src$="Excel.svg"],
html[data-theme='dark'] img[src$="excel.svg"] {
    content: url('/Images/Excel-dark.svg');
}*/

html[data-theme='dark'] .app-store-icon {
    content: url('../images/app-store-dark.svg');
}

html[data-theme='dark'] .play-store-icon {
    content: url('../images/play-store-dark.svg');
}

.nav > li > a:hover.via-password, .nav > li > a:hover.via-otp {
    background-color: transparent !important;
}

.tab-act {
    border-color: var(--theme-link) !important;
}

li.pref-popup.nav-active {
    background-color: transparent !important;
}

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

.ri-add-circle-fill {
    color: var(--theme-link) !important;
}



/*.card-xlsx, .card-xls {
    background-color: var(--team-card) !important;
}*/





.row.rowspacing.no-border-color, .no-border-color {
    border-color: transparent !important;
}



.panel-default > .panel-heading {
    background-color: var(--badge-bg-color) !important;
}

.panel-title a {
    color: var(--primary-color) !important;
}

.panel-default {
    border-color: var(--grid-border-color) !important;
}

.panel-collapse.collapse {
    background-color: var(--bg-color);
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-color: transparent !important;
}

/*.panel-body ul li:hover {
    background-color: var(--menu-hover);
}*/

#dvAccordionContainer .k-widget {
    border-color: transparent !important;
}

.SearchUser label.input-label, .warehouseHeader label.input-label, label.input-label {
    color: var(--text-color) !important;
}

.ifrTracking-details {
    border: 1px solid var(--grid-border-color);
}

.user-info:before {
    background: var(--badge-bg-color) !important;
}

.SearchUser li.k-button {
    border-color: transparent !important;
}

.k-overlay {
    background-color: var(--overlay-color) !important;
    opacity: 0.8 !important;
}

.k-block, .k-content, .k-dropdown .k-input, .k-popup, .k-toolbar, .k-widget {
    color: var(--scrollbar-thumb);
}

.breadcrum_list {
    color: var(--theme-link) !important;
}

.k-file-extension-wrapper:before, .k-multiple-files-extension-wrapper:before {
    background-color: var(--bg-color) !important;
}

html[data-theme='dark'] .card-jpg, html[data-theme='dark'] .card-jpeg, html[data-theme='dark'] .card-png, html[data-theme='dark'] .card-gif,
html[data-theme='dark'] .file-card .card-xlsx, html[data-theme='dark'] .file-card .card-xls, html[data-theme='dark'] .file-card .card-ppt,
html[data-theme='dark'] .file-card .card-pptx, html[data-theme='dark'] .card-doc, html[data-theme='dark'] .file-card .card-docx,
html[data-theme='dark'] .file-preview.card-zip, html[data-theme='dark'] .file-preview.card-rar,
html[data-theme='dark'] .file-grid .file-preview {
    background-color: var(--badge-bg-color);
}

.form-control.form-control-alt option {
    background-color: var(--bg-color);
    background: var(--bg-color);
    /*    color: #FFF;*/
    border: none !important;
}

    .form-control.form-control-alt option:hover {
        background-color: var(--menu-hover);
        background: var(--menu-hover);
        color: #FFF !important;
        border: none !important;
    }

input.ChkNoaction {
    position: absolute !important;
}

.k-numeric-wrap .k-select {
    background-color: var(--team-card) !important;
}

#divOpenOrders tr {
    cursor: pointer;
}

.task-icon img {
    transition: transform 0.2s ease;
}

    .task-icon img.rotate-up {
        transform: rotate(180deg);
    }

#grdOpenOrders.k-grid tbody td:first-child, #grdClosedOrders.k-grid tbody td:first-child {
    padding-left: 15px;
}

#grdStockProduct.k-grid tbody td:first-child {
    padding-left: 20px;
}

#grdLineInfo td {
    padding-left: 15px !important;
}

.task-icon {
    display: flex;
}

.userdetails-info:after {
    box-shadow: none !important;
}

.user-info:after {
    box-shadow: none !important;
}


.filter-section, .card-box, .category-header, .heat-table-wrapper, .sidebar, .heat-table thead th, .heat-cell .fill, #point-context-menu, #explore-submenu, #point-context-menu > div, #explore-submenu > div {
    background: var(--bg-color) !important;
}

html[data-theme='dark'] .filter-title {
    color: var(--text-color) !important;
    border-bottom: var(--text-color) !important;
}

.tree-parent-row:hover, .tree-sub-row:hover, .tree-grandchild-row:hover, .heat-table tbody tr:hover {
    background: var(--menu-hover) !important;
}

.tree-grandchild-row input[type="checkbox"] {
    background-color: var(--theme-link) !important;
}

input[type="checkbox"]:checked::after, .filter-title::before {
    color: var(--text-color) !important;
}

.filter-search, .card-box, .filter-section {
    background-color: transparent !important;
    border-color: var(--grid-border-color) !important;
    color: var(--text-color) !important
}

tbody, td, tfoot, th, thead, tr {
    border-color: var(--grid-border-color) !important;
}

html[data-theme='dark'] .heat-table thead th,
html[data-theme='dark'] .heat-cell span,
html[data-theme='dark'] .category-header,
html[data-theme='dark'] .table-title,
html[data-theme='dark'] .filter-search {
    color: var(--text-color) !important;
}

#point-context-menu > div, #explore-submenu > div {
    color: var(--text-color) !important;
}

#point-context-menu, #explore-submenu {
    border-color: var(--grid-border-color) !important;
}

    #explore-submenu > div:hover, #point-context-menu > div:hover, #_catHeaderMenu > div:hover {
        background: var(--menu-hover) !important;
    }

    #point-context-menu > div {
        border-color: var(--grid-border-color) !important;
    }

.tree-parent-row:hover, .tree-sub-row:hover, .tree-grandchild-row:hover, .filter-item:hover, .filter-item:hover {
    background: var(--menu-hover) !important;
}

#_catHeaderMenu, #_catHeaderMenu > div {
    background: var(--bg-color) !important;
}

    #_catHeaderMenu > div {
        color: var(--text-color) !important;
    }

html[data-theme='dark'] .highcharts-menu,
html[data-theme='dark'] div.highcharts-menu {
    background: var(--bg-color) !important;
    border-color: var(--grid-border-color) !important;
}

html[data-theme='dark'] .highcharts-menu-item,
html[data-theme='dark'] .highcharts-menu-item * {
    color: var(--text-color) !important;
    background: transparent !important;
}

    html[data-theme='dark'] .highcharts-menu-item:hover,
    html[data-theme='dark'] .highcharts-menu-item:hover * {
        background: var(--menu-hover) !important;
        color: var(--text-color) !important;
    }

/* Catch-all safety net — matches any class containing "highcharts-menu"
   in case a specific chart's export menu renders with slightly different
   internal markup than the standard .highcharts-menu/.highcharts-menu-item
   naming assumed above. */
html[data-theme='dark'] [class*="highcharts-menu"] {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

#_catHeaderMenu {
    border-color: var(--grid-border-color) !important;
}

/* ============================================================
   HIGHCHARTS — GLOBAL DARK THEME
   ============================================================
   Generic to any Highcharts chart on any page (Spend Evolution, Top
   Suppliers, the donut charts, the category bar chart, the Explore
   treegraph, and any future chart) — kept here in theme.css rather than
   duplicated per-page. Light theme is untouched throughout; every rule
   below is scoped to html[data-theme='dark'].
   ============================================================ */

/* Highcharts draws its own opaque white background (a .highcharts-background
   <rect> inside the SVG, plus the wrapping .highcharts-container div)
   independently of any card/page background, so a dark page background
   alone never reaches a chart's own canvas — both layers need overriding. */
html[data-theme='dark'] .highcharts-container {
    background: var(--bg-color) !important;
}

html[data-theme='dark'] .highcharts-background {
    fill: var(--bg-color) !important;
    stroke: var(--bg-color) !important;
}

html[data-theme='dark'] .highcharts-button-box {
    fill: var(--bg-color) !important;
    stroke: var(--bg-color) !important;
}

html[data-theme='dark'] .highcharts-button-pressed .highcharts-button-box {
    fill: var(--menu-hover) !important;
    stroke: var(--menu-hover) !important;
}

html[data-theme='dark'] .highcharts-button-symbol {
    stroke: var(--text-color) !important;
}

html[data-theme='dark'] .highcharts-container text {
    fill: var(--text-color) !important;
    color: var(--text-color) !important;
}

html[data-theme='dark'] .highcharts-tooltip text {
    fill: #222 !important;
    color: #222 !important;
}

html[data-theme='dark'] .highcharts-data-labels,
html[data-theme='dark'] .highcharts-data-labels *,
html[data-theme='dark'] .highcharts-data-label,
html[data-theme='dark'] .highcharts-data-label * {
    color: var(--text-color) !important;
}

html[data-theme='dark'] #container b,
html[data-theme='dark'] #container span {
    color: var(--text-color) !important;
}

/* ============================================================
   SPEND ANALYTICS EXPLORE — dark theme
   ============================================================ */
html[data-theme='dark'] #scrollBody {
    background: var(--bg-color) !important;
}

#topBar {
    background: #4093d8 !important;
}

    #topBar button,
    #topBar .btn,
    #topBar a.btn,
    #topBar a {
        background: #fff !important;
        color: #4093d8 !important;
        border: none !important;
    }

        #topBar button:hover,
        #topBar .btn:hover,
        #topBar a.btn:hover,
        #topBar a:hover {
            background: #eaf2ff !important;
            color: #2f6fb3 !important;
        }

html[data-theme='dark'] #topBar {
    background: transparent !important;
}

    html[data-theme='dark'] #topBar button,
    html[data-theme='dark'] #topBar .btn,
    html[data-theme='dark'] #topBar a.btn,
    html[data-theme='dark'] #topBar a {
        background: transparent !important;
        border: 1px solid var(--primary-btn) !important;
        color: var(--primary-btn) !important;
    }

        html[data-theme='dark'] #topBar button:hover,
        html[data-theme='dark'] #topBar .btn:hover,
        html[data-theme='dark'] #topBar a.btn:hover,
        html[data-theme='dark'] #topBar a:hover {
            background: var(--primary-btn) !important;
            color: #fff !important;
        }

html[data-theme='dark'] #scrollBody .toolbar {
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--grid-border-color) !important;
    border-top: 1px solid var(--grid-border-color) !important;
}

    html[data-theme='dark'] #scrollBody .toolbar .btn {
        background: var(--bg-color) !important;
        border-color: var(--grid-border-color) !important;
        color: var(--text-color) !important;
    }

html[data-theme='dark'] #status {
    color: var(--text-color-secondary) !important;
}

html[data-theme='dark'] .highcharts-figure,
html[data-theme='dark'] #container {
    background: var(--bg-color) !important;
}

html[data-theme='dark'] #nodePopup {
    background: var(--bg-color) !important;
    border-color: var(--grid-border-color) !important;
}

    html[data-theme='dark'] #nodePopup .menu-item {
        color: var(--text-color) !important;
    }

        html[data-theme='dark'] #nodePopup .menu-item:hover {
            background: var(--menu-hover) !important;
            color: var(--text-color) !important;
        }

html[data-theme='dark'] #exploreSub {
    background: var(--bg-color) !important;
    border-color: var(--grid-border-color) !important;
}

    html[data-theme='dark'] #exploreSub .filter-row {
        color: var(--text-color) !important;
    }

        html[data-theme='dark'] #exploreSub .filter-row:hover {
            background: var(--menu-hover) !important;
        }

    html[data-theme='dark'] #exploreSub .filter-name {
        color: var(--text-color) !important;
    }

/* Scrollbar track/thumb — Chrome/Edge */
html[data-theme='dark'] #scrollBody::-webkit-scrollbar-track {
    background: var(--bg-color-secondary) !important;
}

html[data-theme='dark'] #scrollBody::-webkit-scrollbar-thumb {
    background: var(--grid-border-color) !important;
    border-color: var(--bg-color-secondary) !important;
}

html[data-theme='dark'] .filter-title::before {
    background: var(--text-color) !important;
}

/* #topBar's blue-bar/white-button styling moved below — see the
   theme-agnostic block right after the Explore section */

/* ============================================================
   COST SAVING ANALYTICS — dark theme
   ============================================================*/
html[data-theme='dark'] {
    --bg: var(--bg-color);
    --surface: var(--bg-color);
    --border: var(--grid-border-color);
    --text: var(--text-color);
    --text-muted: var(--text-color-secondary);
    --text-small: var(--text-color-secondary);
    --sidebar-bg: var(--bg-color);
    --sidebar-txt: var(--text-color);
}

    html[data-theme='dark'] .sidebar-toggle-btn {
        background: var(--bg-color) !important;
        border-color: var(--grid-border-color) !important;
    }

        html[data-theme='dark'] .sidebar-toggle-btn:hover {
            background: var(--menu-hover) !important;
        }

        html[data-theme='dark'] .sidebar-toggle-btn:active {
            background: var(--grid-border-color) !important;
        }

    html[data-theme='dark'] .sb-section {
        background: var(--bg-color) !important;
        border-color: var(--grid-border-color) !important;
    }


    html[data-theme='dark'] .sb-cb {
        border-color: var(--theme-link) !important;
    }

        html[data-theme='dark'] .sb-cb.checked {
            background: var(--theme-link) !important;
            border-color: var(--theme-link) !important;
        }

    /* Both .pill-tab (Pipeline/Incomplete, Completed/Pipeline toggles) and
       .tf-tab (CURRENT YEAR/SAVINGS PER YEAR/FUTURE YEARS timeframe
       selector) are real, separate classes in this file — same visual
       pattern, different elements. Both get the same treatment as Spend's
       TOP SUPPLIERS/TOP WAREHOUSES and COST CENTER/PART toggle buttons:
       dark-mode-only, using var(--primary-btn) so the color matches
       exactly. Light mode is untouched in both cases — each class's own
       base CSS keeps rendering as before. */
    html[data-theme='dark'] .pill-tab {
        border-color: var(--primary-btn) !important;
        background: transparent !important;
        color: var(--primary-btn) !important;
    }

        html[data-theme='dark'] .pill-tab.active {
            background: var(--primary-btn) !important;
            border-color: var(--primary-btn) !important;
            color: #fff !important;
        }

    html[data-theme='dark'] .tf-tab {
        border-color: var(--primary-btn) !important;
        background: transparent !important;
        color: var(--primary-btn) !important;
    }

        html[data-theme='dark'] .tf-tab.active {
            background: var(--primary-btn) !important;
            border-color: var(--primary-btn) !important;
            color: #fff !important;
        }

    /* FORECASTED PIPELINE — FY 2027-2029 label. Scoped to dark mode only —
       the previous #tfActiveLabel rule had no html[data-theme='dark']
       prefix, so it applied in light mode too, overriding this label's own
       correct color (#4093d8, per .tf-active-label in CostSavingAnalytics.css)
       with var(--text-color)'s light value (#44546f, a blue-gray) — that
       mismatch is what changed the color in light mode. Covers both the
       #tfActiveLabel id and the actual .tf-active-label class, in case the
       live element only carries one of the two. */
    html[data-theme='dark'] #tfActiveLabel,
    html[data-theme='dark'] .tf-active-label {
        color: var(--primary-btn) !important;
    }

    /* DEPARTMENT / COMPONENT sidebar section headers — three separate blue
       declarations in .sb-section-label (text color, bottom border, and the
       ::before left accent bar) all hardcode #4093d8. Dark mode only —
       light mode keeps the original blue as-is. */
    html[data-theme='dark'] .sb-section-label {
        color: var(--text-color) !important;
        border-bottom-color: var(--text-color) !important;
    }

        html[data-theme='dark'] .sb-section-label::before {
            background: var(--text-color) !important;
        }

    html[data-theme='dark'] .sb-label {
        color: var(--text-color) !important;
    }

    html[data-theme='dark'] .sb-item.active .sb-label {
        color: var(--text-color) !important;
    }

    html[data-theme='dark'] .hbar-track {
        background: var(--bg-color-secondary) !important;
    }

    html[data-theme='dark'] .leg-dashed {
        border-top-color: var(--text-color-secondary) !important;
    }

    html[data-theme='dark'] .target-line {
        border-top-color: var(--text-color-secondary) !important;
    }

    /* Sidebar items scroll + the four Highcharts scroll wrappers */
    html[data-theme='dark'] .sb-items-scroll,
    html[data-theme='dark'] #chartTopSuppliersScroll,
    html[data-theme='dark'] #chartTopComponentsScroll,
    html[data-theme='dark'] #chartTopInitiativesScroll,
    html[data-theme='dark'] #chartPendingApprovalScroll {
        scrollbar-color: var(--grid-border-color) transparent !important;
    }

        html[data-theme='dark'] .sb-items-scroll::-webkit-scrollbar-thumb,
        html[data-theme='dark'] #chartTopSuppliersScroll::-webkit-scrollbar-thumb,
        html[data-theme='dark'] #chartTopComponentsScroll::-webkit-scrollbar-thumb,
        html[data-theme='dark'] #chartTopInitiativesScroll::-webkit-scrollbar-thumb,
        html[data-theme='dark'] #chartPendingApprovalScroll::-webkit-scrollbar-thumb {
            background: var(--grid-border-color) !important;
        }

            html[data-theme='dark'] .sb-items-scroll::-webkit-scrollbar-thumb:hover,
            html[data-theme='dark'] #chartTopSuppliersScroll::-webkit-scrollbar-thumb:hover,
            html[data-theme='dark'] #chartTopComponentsScroll::-webkit-scrollbar-thumb:hover,
            html[data-theme='dark'] #chartTopInitiativesScroll::-webkit-scrollbar-thumb:hover,
            html[data-theme='dark'] #chartPendingApprovalScroll::-webkit-scrollbar-thumb:hover {
                background: var(--menu-hover) !important;
            }

    /* Skeleton loader shimmer — swap the light gradient for a dark-friendly one */
    html[data-theme='dark'] .sk-wrapper [class^="sk-"],
    html[data-theme='dark'] .sk-wrapper [class*=" sk-"] {
        background: linear-gradient(90deg, var(--bg-color-secondary) 25%, var(--grid-border-color) 50%, var(--bg-color-secondary) 75%) !important;
        background-size: 600px 100% !important;
    }

    html[data-theme='dark'] .sk-pie-circle {
        background: linear-gradient(90deg, var(--bg-color-secondary) 25%, var(--grid-border-color) 50%, var(--bg-color-secondary) 75%) !important;
        background-size: 600px 100% !important;
    }

    html[data-theme='dark'] .sk-kpi-bar,
    html[data-theme='dark'] .aging-skel-box {
        background: linear-gradient(90deg, var(--bg-color-secondary) 25%, var(--grid-border-color) 50%, var(--bg-color-secondary) 75%) !important;
        background-size: 600px 100% !important;
    }

.sb-item:hover {
    background: var(--menu-hover) !important;
}

#btnBack:hover, #btnCollapseAll:hover {
    background: var(--menu-hover) !important;
}

html[data-theme='dark'] .highcharts-grid-line {
    opacity: 0.25 !important;
}

#chartPipelineStatus .highcharts-point,
#chartIncompleteProposals .highcharts-point,
#chartPipelineStatus .highcharts-empty-series,
#chartIncompleteProposals .highcharts-empty-series {
    stroke-width: 1px !important;
}

.longdesc-modal-box, .longDesc-content {
    background: var(--bg-color) !important;
}

.search-pill {
    border: 1px solid var(--search-border);
    background-color: var(--team-card);
}

    .search-pill #btnSearchOEGroupList, .search-pill #btnClearOEGroupList {
        background-color: var(--search-icon-bg);
    }

        .search-pill #btnSearchOEGroupList:hover, .search-pill:hover #btnSearchOEGroupList {
            background-color: var(--search-icon-bg-hover);
        }

.welcomBody {
    box-shadow: 0 -4px 20px 0 var(--black-alpha-15) !important;
    border-radius: 15px !important;
    background: var(--banner-card-color) !important;
}

.welcomeBanner h3 {
    color: var(--default-color) !important;
}

.tourFooterBar {
    background: var(--banner-card-color) !important;
    box-shadow: 0px 6px 18px var(--black-alpha-18) !important;
}

.footerSlideNum {
    color: var(--default-color) !important;
}

/* Everything below moved out of ReleaseAcceptance.css (login page, carousel,
   footer, privacy-policy accordion, and guided-tour buttons/pins) so every
   color value in that stylesheet lives here instead. */

.left-bg {
    background: var(--login-panel-bg) !important;
}

.navbar.static-header {
    border-bottom-color: var(--static-header-border) !important;
}

.tourFooterDivider {
    background: var(--tour-footer-divider) !important;
}

.footerBtnDiv .skipAction:focus {
    border-color: transparent !important;
}

.carousel-indicators [data-bs-target] {
    fill: var(--carousel-dot-fill) !important;
    filter: drop-shadow(0px 2px 4px var(--black-alpha-25)) !important;
}

.carousel-indicators button.active {
    background-color: var(--auth-accent) !important;
}

.auth-card {
    box-shadow: 0px -4px 20px 0px var(--black-alpha-15) !important;
}

/*.form-control, .form-select {
    color: var(--login-input-text) !important;
    border-bottom-color: var(--login-border) !important;
}*/

.form-control:focus, .form-select:focus {
    border-color: var(--border-color) !important;
}

.text-common {
    color: var(--auth-accent) !important;
}

.btn-primary {
    background: var(--primary-btn) !important;
    border-color: var(--primary-btn) !important;
}

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

.divider-or span {
    background: var(--banner-card-color) !important;
}

.divider-or::before {
    background: var(--login-border) !important;
}

.form-check-input:checked {
    background-color: var(--login-navy-accent) !important;
    border-color: var(--login-navy-accent) !important;
}

.slider-text h5, .slider-text p, .privacy-left-panel .accordion-button,
.footer-right a, .toolTipCanvas > div:nth-child(2) > span {
    color: var(--default-color) !important;
}

.footer {
    background: var(--banner-card-color) !important;
    box-shadow: 0px -4px 30px 0px var(--black-alpha-10) !important;
}

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

.footer-right a:first-child {
    color: var(--auth-accent) !important;
}

.app-links img {
    filter: drop-shadow(0px 4px 20px var(--black-alpha-10)) !important;
}

.accordion-body .navigations li {
    color: var(--primary-btn) !important;
}

.guidedArea > div > img, .tourTextOnlySlide {
    box-shadow: 0px 6px 15px var(--black-alpha-50) !important;
}

.tourTextOnlySlide {
    background: var(--banner-card-color) !important;
}

.guidedArea > div > ul > li {
    background-color: var(--banner-card-color) !important;
    box-shadow: 0px 6px 15px var(--black-alpha-50) !important;
    border-color: #ddd !important;
}

.toolTipCanvas {
    background: var(--banner-card-color) !important;
    border-color: #e2e2e2 !important;
    box-shadow: 0px 2px 6px var(--black-alpha-15) !important;
}

.toolTipCanvas > div:nth-child(1) > h3 {
    color: var(--primary-color) !important;
}

.welcomeHeader > h2 {
    color: var(--primary-color) !important;
}

.welcomeBanner p span {
    color: var(--login-navy-accent) !important;
}

.welcomeBanner > button:hover {
    background-color: var(--tour-accent-yellow) !important;
    border-color: var(--tour-accent-yellow) !important;
}

.welcomeBanner .skpBtn {
    border-color: #fff !important;
    color: #fff !important;
}

    .welcomeBanner .skpBtn:hover {
        color: var(--tour-accent-yellow) !important;
        border-color: var(--tour-accent-yellow) !important;
    }

.tourTextOnlyContent {
    color: var(--default-color) !important;
}

.footerBtnDiv .skipAction {
    color: var(--primary-btn) !important;
}

.footerBtnDiv > button:hover {
    /*background-color: var(--footer-btn-hover-bg) !important;*/
    color: #fff !important;
}

.footerBtnDiv > button:nth-child(1):hover {
    color: var(--primary-btn) !important;
}

.pauseBtn {
    background-color: var(--black-alpha-20) !important;
}

/* Guided-tour pin markers (drawGuideTourPin in releaseannouncement.js) — fixed
   black-line/white-outline combo regardless of site theme, since these draw on
   top of an arbitrary uploaded screenshot rather than the app's own chrome. */
.guide-pin-halo, .guide-pin-arrow, .guide-pin-dot {
    fill: var(--tour-pin-color) !important;
}

.guide-pin-line {
    stroke: var(--tour-pin-color) !important;
}

.guide-pin-casing, .guide-pin-dot {
    stroke: var(--tour-pin-contrast) !important;
}

.guide-pin-core {
    fill: var(--tour-pin-contrast) !important;
    stroke: var(--tour-pin-color) !important;
}

.up-arrow > div:nth-child(1) {
    border-top-color: #fff !important;
}

/* .btn-primary-alt's base/hover/active/focus colors are already fully owned
   by the generic .btn-primary-alt rules further up this file — nothing left
   to add here once ReleaseAcceptance.css's redundant copies are removed. */

/* .btn-default-alt's base color is already owned by the generic
   ".btn-default-alt, .k-button" rule above, and :hover's border/background by
   the generic hover group next to it — only the properties neither of those
   generic rules touch need restating here. */
    .btn-default-alt:hover {
        color: #fff !important;
    }

.btn-default-alt:focus {
    border-color: var(--footer-btn-hover-bg) !important;
    color: #fff !important;
    background-color: var(--primary-btn) !important;
}

    .btn-default-alt:active {
        border-color: var(--primary-btn) !important;
        color: #fff !important;
        background-color: var(--primary-btn) !important;
    }

.fnsAction {
    border-color: var(--primary-btn) !important;
    color: #fff;
    background-color: var(--primary-btn) !important;
}

    .fnsAction:hover {
        border-color: var(--primary-btn-hover) !important;
        color: #fff !important;
    }

    .fnsAction:active {
        border-color: var(--primary-btn) !important;
        color: #fff;
    }

    .fnsAction:hover, .fnsAction:active, .fnsAction:focus {
        background-color: var(--primary-btn-hover) !important;
    }

.nxtAction {
    border-image: none !important;
    border-color: var(--primary-btn) !important;
    background-color: var(--primary-btn) !important;
    color: #fff !important;
    border: 1px solid transparent;
}

    .nxtAction:hover, .nxtAction:active, .nxtAction:focus {
        border-color: var(--primary-btn-hover) !important;
        background-color: var(--primary-btn-hover) !important;
        color: #fff !important;
    }

.preAction {
    border-image: none;
    color: var(--default-color) !important;
    border-color: var(--theme-link) !important;
    background-color: transparent;
    border: 1px solid;
}

    .preAction:hover {
        border-color: var(--primary-btn-hover) !important;
        background-color: var(--primary-btn-hover) !important;
        color: #fff !important;
    }

    .preAction:active {
        border-color: var(--primary-btn) !important;
        background-color: var(--primary-btn) !important;
        color: #fff !important;
    }

.toolTipCanvas > div:nth-child(1) {
    background-color: var(--bg-color) !important;
    color: var(--default-color) !important;
}

    .toolTipCanvas > div:nth-child(1) > p {
        color: var(--default-color) !important;
    }

#sidebarToggleBtn.sidebar-toggle-btn {
    background: var(--team-card) !important;
}

input[type="checkbox"]:checked::after {
    color: #fff !important;
}

tr.rfq-shared-documents {
    border-color: var(--grid-border-color) !important;
}

label.required_or:before {
    color: var(--theme-red) !important;
}

span.expedite-date-highlight {
    background-color: var(--menu-hover) !important;
}

.expedite-popup-title {
    color: var(--primary-color) !important;
}

.expedite-popup-header {
    border-bottom: 1px solid var(--grid-border-color) !important;
}

/*a.btn.btn-default.btn-expedite-active {
    background-color: transparent !important;
}*/
    a.btn.btn-default.btn-expedite-active:hover {
        background-color: var(--primary-btn) !important;
    }
.vph-channel-card.selected, .vph-channel-card:hover {
    background-color: var(--radio-container-bg);
    border-color:var(--radio-container-border);
}
.vph-body-text {
    color: var(--text-color);
}

.vph-header {
    border-bottom: 1px solid var(--grid-border-color);
}

.vph-channel-card {
    border: 1px solid var(--border-color);
}

.vph-channel-title {
    color: var(--text-color);
}

/*service call*/
.container_wrapper, .main-container-block {
    background-color: var(--bg-color) !important;
}

.userdetails-info {
    background-color: var(--team-card) !important;
    box-shadow: 0px 1px 15px 0px var(--black-alpha-10);
}

.userdetails-info:after, .userdetails-info::before {
    background: var(--team-card) !important;
}

.grid-card {
    border-color: var(--grid-border-color) !important;
}

.upcoming-visit-card {
    border-color: var(--grid-border-color) !important;
}

.upcoming-visit-card-icon {
    background-color: var(--bg-color-secondary) !important;
}

.upcoming-visit-card-header, .upcoming-visit-card-icon i, .upcoming-visit-card-row-label,
.upcoming-visits-empty {
    color: var(--text-color-secondary) !important;
}

.upcoming-visit-card-subject, .upcoming-visit-card-row-value {
    color: var(--text-color) !important;
}

.workemaillink {
    color: var(--theme-link) !important;
}

.copy-call-icon {
    color: var(--theme-link) !important;
}

.vld-count-badge {
    background: var(--badge-bg-color) !important;
    color: var(--text-color-secondary) !important;
}

.vld-card {
    border-bottom-color: var(--grid-border-color) !important;
}

.vld-datetime, .vld-duration, .vld-followup-date,
.vld-doc-row-filename {
    color: var(--text-color) !important;
}

.vld-engineer, .vld-doc-row-meta, .vld-followup {
    color: var(--text-color-secondary) !important;
}

.vld-notes-chip {
    color: var(--text-color) !important;
}

.vld-toggle-attachments {
    color: var(--theme-link) !important;
}

.vld-doc-row {
    border-color: var(--grid-border-color) !important;
    background: var(--bg-color-secondary) !important;
}

html[data-theme='dark'] .vld-doc-row-icon-wrap,
html[data-theme='dark'] .vld-doc-row-icon-wrap.card-xlsx,
html[data-theme='dark'] .vld-doc-row-icon-wrap.card-doc,
html[data-theme='dark'] .vld-doc-row-icon-wrap.card-ppt,
html[data-theme='dark'] .vld-doc-row-icon-wrap.card-pdf,
html[data-theme='dark'] .vld-doc-row-icon-wrap.card-jpg,
html[data-theme='dark'] .vld-doc-row-icon-wrap.card-zip {
    background-color: var(--badge-bg-color);
}

html[data-theme='dark'] .vld-status-open {
    background: #3a3560;
    color: #b8aefc;
}
html[data-theme='dark'] .vld-status-closed {
    background: #1f3a2b;
    color: #4fd884;
}
html[data-theme='dark'] .vld-status-pending {
    background: #4a3419;
    color: #f0b35c;
}
input[type="checkbox"]:checked::after {
	color: #fff !important;
} 

nav.navbar.navbar-expand-lg.bg-white.py-3.fixed-top.static-header {
    background: var(--bg-color) !important;
}
.sticky-position .accordion-header, .sticky-position .accordion-button:not(.collapsed) {
    background-color: var(--primary-btn) !important;
    color: #fff !important;
}

.k-list-optionlabel.k-state-selected {
    background: var(--menu-hover) !important;
    color: var(--text-color) !important;
}

.section-header {
    border-color: var(--grid-border-color) !important;
    background-color: var(--bg-color) !important;
}

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

.close {
    color: var(--primary-color) !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
}

.showPopUp, #dvUploadNewFilePresentContent .k-widget {
    background: var(--bg-color) !important;
}

.k-treeview-lines li:hover {
    color: var(--text-color) !important;
}

#myDropdown table.table.share_docs.no-hover td a {
    background-color: transparent !important;
}

.k-grid-norecords-template {
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.content_wrapper .k-dropdown-wrap.k-state-default, .content_wrapper .k-dropdown-wrap .k-select {
    background-color: transparent !important;
}

#dvAttachmentPopup .popup_header {
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--grid-border-color) !important;
}

#dvTechInfoPopup .popup_header {
    border-bottom: 1px solid var(--grid-border-color) !important;
}

.showPopUpInfo {
    height: max-content !important;
    padding-bottom: 10px !important;
}

.card-pdf {
    background-color: var(--badge-bg-color) !important;
}

.box_wrapper .section-header {
    border-radius: 5px;
}

.box_wrapper .dvTechInfo {
    border-radius: 5px;
}

.input-phone.form-control.k-textbox {
    background-color: transparent !important;
} 

#dvLocation .k-multiselect-wrap.k-floatwrap {
    background: transparent !important;
}
ul.k-group.k-treeview-lines {
    background-color: var(--bg-color);
}
.k-treeview-lines li:hover {
    background: var(--menu-hover) !important;
}

.k-calendar .k-nav-fast.k-state-hover {
    background-color: var(--menu-hover) !important;
    color: var(--text-color) !important;
}