/* 
@import url(./colors.css);
@import url(./test.css);
@import url(./dev.css);
@import url(./init.css);
@import url(./mm.css);
@import url(./local.css);
*/

:root {
    --theme-bg-color:               var(--theme-base);
    --theme-bg-color:               var(--theme-bg-inner-dark-a-color);

    --theme-bg-inner-dark-color:    color-mix(in srgb, var(--theme-base) 80%, black);
    --theme-bg-inner-dark-a-color:  color-mix(in srgb, var(--theme-base) 70%, black);
    --theme-bg-inner-dark-b-color:  color-mix(in srgb, var(--theme-base) 50%, black);
    --theme-bg-inner-dark-c-color:  color-mix(in srgb, var(--theme-base) 25%, black);
    --theme-bg-inner-dark-d-color:  color-mix(in srgb, var(--theme-base) 15%, black);

    --theme-bg-inner-light-color:   color-mix(in srgb, var(--theme-base) 80%, white);
    --theme-bg-inner-light-a-color: color-mix(in srgb, var(--theme-base) 70%, white);
    --theme-bg-inner-light-b-color: color-mix(in srgb, var(--theme-base) 50%, white);
    --theme-bg-inner-light-c-color: color-mix(in srgb, var(--theme-base) 25%, white);
    --theme-bg-inner-light-d-color: color-mix(in srgb, var(--theme-base) 15%, white);

    --theme-bg-inner-color:         var(--theme-bg-inner-dark-color);
    --theme-bg-inner-2-color:       var(--theme-bg-inner-dark-a-color);
    --theme-bg-inner-3-color:       var(--theme-bg-inner-dark-b-color);
    --theme-hover-bg-color:         var(--theme-bg-inner-light-a-color);
    --theme-active-bg-color:        var(--theme-bg-inner-light-c-color);
    --theme-active-light-color:     var(--theme-bg-inner-light-c-color);
    --theme-color-table-header:     var(--theme-bg-color);
    --theme-color-h-text:           var(--theme-bg-inner-dark-b-color);
    --theme-button-bg-color:        var(--theme-bg-color);
    --theme-button-bg-hover-color:  var(--theme-active-light-color);

    --theme-sidebar-active-bg-color:          #e0d4d4;
    --theme-sidebar-active-light-color:       #e0d4d4;
    
    --theme-text-color:                   #ffffff;
    --theme-active-text-color:            #000000;
    --theme-hover-text-color:             #ffffff;
}

/* 
    Yellow is Dev
    MM is Purple
    Initiation is Green
    Test is Red 
*/

body.test-site .breadcrumb {
    background-color: var(--theme-bg-color);
}
body.dev-site .breadcrumb {
    background-color: var(--theme-bg-color);
}
body.init-site .breadcrumb {
    background-color: var(--theme-bg-color);
}
body.mm-site .breadcrumb {
    background-color: var(--theme-bg-color);
}
body.local-site .breadcrumb {
    background-color: var(--theme-bg-color);
}

body.test-site .breadcrumb::before {
    content: 'Test Site';
}

body.dev-site .breadcrumb::before {
    content: 'Dev Site';
}

body.init-site .breadcrumb::before {
    content: 'Initiation Test Site';
}

body.mm-site .breadcrumb::before {
    content: 'MM Test Site';
}

body.local-site .breadcrumb::before {
    content: 'Local Site';
}

body.theme .breadcrumb::before {
    display: block;
    position: absolute;
    color: #fff;
    right: 20px;
    top: 14px;
    font-weight: bold;
    text-shadow: 0 2px 3px #00000030;
    letter-spacing: 2px;
    line-height: 26px;
}

body.theme .nav.side-menu > li li a,
body.theme .nav.side-menu > li.active a {
    border-bottom: 1px solid #ffffff2e !important;
}

body.theme .breadcrumb :where(li, li a, li span),
body.theme .breadcrumb li+li:before {
    color: var(--theme-text-color) !important;
}

body.theme .table.table-bordered>thead>tr>th.border-white::before {
    display: none;
}
body.theme .nav_title,
body.theme .nav_menu {
    background: var(--theme-active-bg-color);
    border: none !important;
}

body.theme.nav-sm .nav.side-menu li li:is(.active-sm, .active, .current-page) {
    background-color: var(--theme-active-bg-color) !important;
}
body.theme.nav-sm .nav.side-menu li li:is(.active-sm, .active, .current-page) > a {
    background-color: var(--theme-active-bg-color) !important;
}
body.theme.nav-sm .nav.side-menu li li:is(.active-sm, .active, .current-page):hover > a {
    background-color: var(--theme-active-bg-color) !important;
    color: var(--theme-active-text-color) !important;
}
body.theme.nav-sm .nav.side-menu > li:hover .nav.child_menu li:is(.active-sm, .active, .current-page) > a {
    color: var(--theme-active-text-color) !important;

}
body.theme.nav-md .site_title.logo-container,
body.theme.nav-sm a.site_title_sm.logo_small_text {
    color: var(--theme-bg-color);
}

body.theme .breadcrumb .fa {
    color: #fff;
}
body.theme .nav.toggle a {
    color: var(--theme-bg-color);
}


/*--------- Local Site --------*/
/* -- menu colors -- */
body.theme.login .login_content,
body.theme .menu_section>ul {
    background: var(--theme-active-bg-color);
}
body.theme .nav.side-menu>li:hover,
body.theme .nav.side-menu>li.active {
    background: var(--theme-bg-color);
}
body.theme .nav.child_menu li {
    background: var(--theme-bg-inner-color);
}
body.theme .nav.child_menu.first li>ul>li {
    background: var(--theme-bg-inner-2-color);
}
body.theme .nav.child_menu.first li>ul>li>ul>li {
    background: var(--theme-bg-inner-3-color);
}
body.theme .nav.child_menu.first li.active>a,
body.theme .nav.child_menu.first li.current-page>a,
body.theme .nav.child_menu.first li:hover>a {
    background: var(--theme-active-bg-color);
}
body.theme .profile.clearfix {
    background: var(--theme-bg-color);
}
body.theme .nav.side-menu>li>a {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
body.theme .nav.side-menu>li:hover>a>i.fa,
body.theme .nav.side-menu>li.active>a>i.fa {
    color: var(--theme-bg-color);
}
body.theme .nav.side-menu i.fa {
    background-color: var(--theme-bg-color);
}

/*-- Page and Component Classes --*/
body.theme .panel {
    background: var(--theme-bg-inner-light-c-color);
}
body.theme .dropdown-menu .panel {
    background: #fff;
}
body.theme .filter-panel .panel-header {
    background: var(--theme-bg-inner-light-c-color);
}
body.theme .filter-panel .panel-header hr {
    border-color: var(--theme-bg-inner-light-a-color);
}
body.theme .x_title.blue,
body.theme .card_title.blue,
body.theme .page .page-detail {
    background: var(--theme-bg-color);
    color: #fff;
}
body.theme .x_title.blue h3,
body.theme .x_title.blue .link-component {
    color: #fff;
}
body.theme.login .login-header {
    background: var(--theme-bg-inner-dark-a-color);
}
body.theme.login .login-header img {
    filter: grayscale(100%) brightness(100%) invert(1);
}
body.theme.login .login_footer,
body.theme footer {
    background: var(--theme-bg-inner-dark-a-color);
    color: var(--theme-text-color);
}
body.theme.login .login_footer a{
    color: var(--theme-text-color);
}

/* Buttons and Inputs */
body.theme .btn.submit:not(.cancel),
body.theme .btn:not(.cancel),
body.theme a.btn:not(.cancel),
body.theme button:not(.cancel, .close) {
    background: var(--theme-button-bg-color);
    color: #fff !important;
    border-color: var(--theme-button-bg-color) !important;
    border: none;
}
body.theme .btn.submit:is(:hover, :focus, :active):not(.cancel),
body.theme .btn:is(:hover, :focus, :active):not(.cancel),
body.theme a.btn:is(:hover, :focus, :active):not(.cancel),
body.theme button:is(:hover, :focus, :active):not(.cancel) {
    background: var(--theme-bg-inner-dark-color) !important;
    color: #fff !important;
    border-color: var(--theme-button-bg-color) !important;
    border: none;
}
body.theme .chela-other-btn .bootstrap-select > button.btn.btn-light,
body.theme .chela-other-btn .bootstrap-select > button.btn.btn-light:hover {
    border-color: var(--theme-button-bg-color) !important;
    background: var(--theme-button-bg-color);
    color: #fff;
}
body.theme button.btn.btn-transparent.small {
    background: none;
}
body.theme .dropdown button.btn {
    background-color: transparent;
    color: black !important;
    border: 1px solid var(--color-gray) !important;
}
/* body.theme .modal-header .dropdown button.btn {
    border-color: var(--theme-bg-inner-light-c-color);
} */
body.theme .modal-header .dropdown button.btn {
    background-color: #ffffff !important;
    color: black !important;
    border: 1px solid #ffffff !important;
}
body.theme .modal-header .dropdown button.btn:hover {
    background-color: #d0d0d0 !important;
}
body.theme .dropdown button.btn:active,
body.theme .dropdown-menu > li > a:hover {
    background: var(--theme-bg-inner-light-c-color);
    border-color: var(--theme-bg-inner-light-c-color);
}
body.theme .dropdown button.btn:focus,
body.theme .dropdown button.btn:hover {
    background: var(--theme-bg-inner-light-c-color) !important;
    border-color: var(--theme-bg-inner-light-c-color) !important;
    color: #000 !important;
}
body.theme .dropdown button.btn:focus {
    background-color: #ffffff !important;
    color: #000 !important;
}
body.theme input:checked+.slider {
    background-color: var(--theme-button-bg-color);
}
body.theme label.checkbox input[type="checkbox"]:checked,
body.theme label.checkbox input[type="radio"]:checked,
body.theme label.check_main input[type="checkbox"]:checked,
body.theme label.check_main input[type="radio"]:checked {
    background-color: var(--theme-button-bg-color);
    border-color: var(--theme-button-bg-color);
}
body.theme .dropdown-item.active,
body.theme .dropdown-item:active,
body.theme .ui-state-active,
body.theme .ui-widget-content .ui-state-active {
    background: var(--theme-active-bg-color) !important;
}
body.theme .dropdown.status_drop button {
    background: white;
    border: 1px solid var(--color-gray) !important;
}

/* Table */
body.theme .table.table-bordered>thead,
body.theme :is(#EntriesGrid, .attributes_table, .EntriesGridVue) th {
    background: var(--theme-color-table-header);
    border-color: var(--theme-hover-bg-color) !important;
    /* border-color: #ffffff4a !important; */
}
body.theme .table.table-bordered>thead>tr {
    background: transparent !important;
}
body.theme .table.table-bordered>thead>tr>th,
body.theme .table.table-bordered>thead>tr>td {
    border-color: var(--theme-bg-inner-light-a-color) !important;
}
body.theme table.dataTable thead th.sorting_desc:after,
body.theme table.dataTable thead th.sorting_asc::after {
    color: var(--theme-bg-inner-light-b-color);
}
body.theme .table.dataTable {
    border-color: var(--theme-bg-inner-light-a-color) !important;
}

/* Pagination */
body.theme .pagination .page-item:is(:first-child,:last-child) .page-link {
    background: none;
    border: none;
}
body.theme .pagination>li:not(.disabled,:last-child, :first-child,.active) .page-link {
    background: var(--theme-bg-inner-light-c-color);
    color: var(--theme-bg-inner-dark-color) !important;
}
body.theme .pagination>li:not(.disabled,:last-child, :first-child,.active) .page-link {
    background: var(--theme-bg-inner-light-c-color);
    color: var(--theme-bg-inner-dark-color) !important;
}
body.theme .pagination>li:not(.disabled,:last-child, :first-child,.active) .page-link:hover {
    background: var(--theme-bg-inner-dark-color);
    color: var(--theme-bg-inner-light-c-color) !important;
}
body.theme .pagination li.active span.page-link {
    background: var(--theme-color-table-header);
    border-color: var(--theme-color-table-header);
}
/* Other Components */
body.theme {
    background-color: var(--theme-bg-inner-light-d-color);
}
body.theme hr,
body.theme ul.bar_tabs {
    border-color: var(--theme-bg-inner-light-c-color);

}
body.theme ul.bar_tabs>li a {
    background-color: color-mix(in srgb, var(--theme-base) 8%, #fff);
    color: var(--theme-color-h-text);
}
body.theme .filter_section_left h1,
body.theme .page .page-title,
body.theme .page .page-title h2 {
    color: var(--theme-color-h-text);
}
body.theme .datepicker table tr td.today,
body.theme .datepicker table tr td.today.disabled,
body.theme .datepicker table tr td.today.disabled:hover,
body.theme .datepicker table tr td.today:hover {
    background: var(--theme-active-bg-color)
}
body.theme ul.bar_tabs>li a.active {
    background: var(--theme-button-bg-color);
    color: #fff;
}
body.theme :is(.record.right, .full_button, .modal-header, .card_title .notification) {
    background-color: var(--theme-active-light-color) !important;
    color: black;
}
body.theme .slider{
    border: 1px solid var(--theme-hover-bg-color);
}
body.theme.nav-sm .navbar.nav_title:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background: linear-gradient(180deg, var(--theme-bg-inner-light-b-color), transparent);
    right: 0;
    top: 0;
}

/*-- End Page Compnent Classes --*/

body.theme-a {
    background-image: url('/images/local-site-w.svg');
    padding-left: 35px;
    background-color: var(--theme-bg-color);
    background-size: 2%;
}

body.theme {
    border: 0px var(--theme-bg-color) solid;
}
body.theme .mainContainer .leftSection {
    background: var(--theme-active-bg-color);
}

body.theme-banner .mainContainer .leftSection {
    padding-right: 30px;
    position: relative;
}
body.theme-banner .mainContainer .leftSection:after {
    content: '';
    position: absolute;
    right: 0;
    padding: 0;
    top: 0px;
    height: 100%;
    width: 30px;
    background-image: url('/images/local-site-w-vr.svg');
    background-size: 20px;
    background-position: center top;
    z-index: 999;
    background-color: var(--theme-bg-color);
    box-shadow: rgba(0,0,0,0.5) 0 0 25px;
}

/* -- End Test Site --------*/


/* body.dev-site.footer-text::after {
    content: 'Dev Site';
    display: block;
    position: fixed;
    color: var( --color-danger);
    right: 20px;
    bottom: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 26px;
} 

body.theme.img .menu_section>ul {
    margin-top: 0px;
    mix-blend-mode: multiply;
    background-size: 5%;
}

body.theme.img .menu_section>ul {
    background-image: url(/images/dev-site.svg);
}
body.dev-site.img .menu_section>ul {
    background-image: url(/images/devsite.svg);
}
body.mm-site.img .menu_section>ul {
    background-image: url(/images/devsite.svg);
}
body.init-site.img .menu_section>ul {
    background-image: url(/images/devsite.svg);
} */

/* -- menu colors -- */