/* =========================================================
   DARK THEME PALETTE FOR USER-SELECTED THEME
   ========================================================= */
 body.dark-theme {
	--main-bg-color: #2a3137;  
	--primary-color: #438d7a;  
	--primary-color-light: #3c8572; 
	--left-navbar-color: #24292d; 
	--left-navbar-active-color: #232827;  
	--text-color: #ced4da;
	--nav-heading-color: #D4D4D4; 
	--nav-items-color: #cfcfcf;  
	--topnav-text-color: #fff;
	--topnav-hover-color: #6db9a7;
	--nav-li-active-bg-color: #202325;  
	--nav-li-hover-bg-color: #202428 ; 
	--text-link-color: #1766cb;
	--main-panel-color: #313d46;
	--danger-color-secondry: #742222;
	--label-text-color: #bdc5c5;
	--item-bg-success: #245a34;
	--item-border-success: #2c9346;
	--main-txt-color: #ced4da;
	--item-bg-info: #1e5672;
	--item-border-info: #438bb3;
	--item-bg-warning: #72451e;
	--item-border-warning: #a5652c;	
	--item-bg-danger: #6e2425;
	--item-border-danger: #9f393a;	
	--item-bg-primary: #235851;
	--item-border-primary: #46a58d;
	--link-color: #87bfe9;	
    --temp-bg-primary: #33a387;
	--temp-bg-info: #34708f;
	--temp-bg-danger: #db2222;
	--temp-bg-warning: #a1520c;
	--temp-bg-success: #1f582d;
	--btn-primary-color: #33a387;
	--badge-primary-color: #235851;
	--label-primary-color: #235851;
	--alert-info-bg-color: #1e5672;
	--alert-info-border-color: #438bb3;
	--alert-danger-bg-color: #6e2425;
	--alert-danger-border-color: #9f393a;
	--alert-success-bg-color: #245a34;
	--alert-success-border-color: #2c9346;
	--alert-warning-bg-color: #72451e;
	--alert-warning-border-color: #a5652c;
        --text-black: #000;
        --sidebar-nav-active-text-color: #65b39f;
}

/* =========================================================
   LIGHT THEME PALETTE FOR USER-SELECTED THEME
   ========================================================= */
body.light-theme { 
	--main-bg-color: #f5f7fa;  
	--primary-color: #39ab8f;  
	--primary-color-light: #58ceb1; 
	--left-navbar-color: #24292d; 
	--left-navbar-active-color: #232827;  
	--text-color: #ced4da;
	--text-black: #000;
	--nav-heading-color: #EAFAFA; 
	--nav-items-color: #cfcfcf;  
	--topnav-text-color: #fff;
	--topnav-hover-color: #4a4424;
	--nav-li-active-bg-color: #202325;  
	--nav-li-hover-bg-color: #202428; 
	--text-link-color: #1766cb;
	--text-color-secondary: #333;
	--success-color: #3fdd82;
	--danger-color: #d93535;
	--warning-color: #f5be31;
	--info-color: #2bd6ed;		
	--btn-primary-color: #39ab8f;
	--badge-primary-color: #39ab8f;
	--label-primary-color: #39ab8f;	
	--btn-success-color: #3fdd82;
	--badge-success-color: #3fdd82;
	--label-success-color: #3fdd82;	
	--btn-danger-color: #d93535;
	--badge-danger-color: #d93535;
	--label-danger-color: #d93535;		
	--btn-warning-color: #f5be31;
	--badge-warning-color: #f5be31;
	--label-warning-color: #f5be31;	
	--btn-info-color: #2bd6ed;
	--badge-info-color: #2bd6ed;
	--label-info-color: #2bd6ed;		
	--btn-default-border-color: #d9d9d9;	
	--alert-info-bg-color: #0dcaf0;
	--alert-info-border-color: #17a4c1;
	--alert-danger-bg-color: #ff8181;
	--alert-danger-border-color: #c55757;
	--alert-success-bg-color: #3fdd82;
	--alert-success-border-color: #26bb67;	
	--alert-warning-bg-color: #ffa14b;
	--alert-warning-border-color: #d77e2d;	
	--sidebar-nav-active-text-color: #E8E8E8;
	--main-panel-color: #fff;
	--danger-color-secondry: #ff8181;
	--label-text-color: #000;
	--item-bg-success: #3fdd82;
	--item-border-success: #26bb67;
	--main-txt-color: #333;
	--item-bg-info: #0dcaf0;
	--item-border-info: #17a4c1;
	--item-bg-warning: #ffa14b;
	--item-border-warning: #d77e2d;	
	--item-bg-danger: #ff8181;
	--item-border-danger: #c55757;	
	--item-bg-primary: #39ab8f;
	--item-border-primary: #29b391;
	--link-color: #1766cb;	
    --temp-bg-primary: #39ab8f;
	--temp-bg-info: #0dcaf0;
	--temp-bg-danger: #d93535;
	--temp-bg-warning: #f5be31;
	--temp-bg-success: #3fdd82;
}

/* =========================================================
   LIGHT THEME PALETTE FOR AUTO MODE (SYSTEM THEME)
   ========================================================= */
@media (prefers-color-scheme: dark) {
    body:not(.light-theme) { 
	--main-bg-color: #2a3137;  
	--primary-color: #438d7a;  
	--primary-color-light: #3c8572; 
	--left-navbar-color: #24292d; 
	--left-navbar-active-color: #232827;  
	--text-color: #ced4da;
	--nav-heading-color: #D4D4D4; 
	--nav-items-color: #cfcfcf;  
	--topnav-text-color: #fff;
	--topnav-hover-color: #6db9a7;
	--nav-li-active-bg-color: #202325;  
	--nav-li-hover-bg-color: #202428; 
	--text-link-color: #1766cb;
	--main-panel-color: #313d46;
	--danger-color-secondry: #742222;
	--label-text-color: #bdc5c5;
	--item-bg-success: #245a34;
	--item-border-success: #2c9346;
	--main-txt-color: #ced4da;
	--item-bg-info: #1e5672;
	--item-border-info: #438bb3;
	--item-bg-warning: #72451e;
	--item-border-warning: #a5652c;	
	--item-bg-danger: #6e2425;
	--item-border-danger: #9f393a;	
	--item-bg-primary: #235851;
	--item-border-primary: #46a58d;
	--link-color: #87bfe9;	
    --temp-bg-primary: #33a387;
	--temp-bg-info: #34708f;
	--temp-bg-danger: #db2222;
	--temp-bg-warning: #a1520c;
	--temp-bg-success: #1f582d;
	--btn-primary-color: #33a387;
	--badge-primary-color: #235851;
	--label-primary-color: #235851;
	--alert-info-bg-color: #1e5672;
	--alert-info-border-color: #438bb3;
	--alert-danger-bg-color: #6e2425;
	--alert-danger-border-color: #9f393a;
	--alert-success-bg-color: #245a34;
	--alert-success-border-color: #2c9346;
	--alert-warning-bg-color: #72451e;
	--alert-warning-border-color: #a5652c;
        --sidebar-nav-active-text-color: #65b39f;
   }
}

/* =========================================================
   DARK THEME PALETTE FOR AUTO MODE (SYSTEM THEME)
   ========================================================= */
@media (prefers-color-scheme: light) {
    body:not(.dark-theme) { 
        --main-bg-color: #f5f7fa;  
	--primary-color: #39ab8f;  
	--primary-color-light: #58ceb1; 
	--left-navbar-color: #24292d; 
	--left-navbar-active-color: #232827;  
	--text-color: #ced4da;
	--text-black: #000;
	--nav-heading-color: #EAFAFA; 
	--nav-items-color: #cfcfcf;  
	--topnav-text-color: #fff;
	--topnav-hover-color: #4a4424;
	--nav-li-active-bg-color: #202325;  
	--nav-li-hover-bg-color: #202428; 
	--text-link-color: #1766cb;
	--text-color-secondary: #333;
	--success-color: #3fdd82;
	--danger-color: #d93535;
	--warning-color: #f5be31;
	--info-color: #2bd6ed;		
	--btn-primary-color: #39ab8f;
	--badge-primary-color: #39ab8f;
	--label-primary-color: #39ab8f;	
	--btn-success-color: #3fdd82;
	--badge-success-color: #3fdd82;
	--label-success-color: #3fdd82;	
	--btn-danger-color: #d93535;
	--badge-danger-color: #d93535;
	--label-danger-color: #d93535;		
	--btn-warning-color: #f5be31;
	--badge-warning-color: #f5be31;
	--label-warning-color: #f5be31;	
	--btn-info-color: #2bd6ed;
	--badge-info-color: #2bd6ed;
	--label-info-color: #2bd6ed;		
	--btn-default-border-color: #d9d9d9;	
	--alert-info-bg-color: #0dcaf0;
	--alert-info-border-color: #17a4c1;
	--alert-danger-bg-color: #ff8181;
	--alert-danger-border-color: #c55757;
	--alert-success-bg-color: #3fdd82;
	--alert-success-border-color: #26bb67;	
	--alert-warning-bg-color: #ffa14b;
	--alert-warning-border-color: #d77e2d;	
	--sidebar-nav-active-text-color: #E8E8E8;
	--main-panel-color: #fff;
	--danger-color-secondry: #ff8181;
	--label-text-color: #000;
	--item-bg-success: #3fdd82;
	--item-border-success: #26bb67;
	--main-txt-color: #333;
	--item-bg-info: #0dcaf0;
	--item-border-info: #17a4c1;
	--item-bg-warning: #ffa14b;
	--item-border-warning: #d77e2d;	
	--item-bg-danger: #ff8181;
	--item-border-danger: #c55757;	
	--item-bg-primary: #39ab8f;
	--item-border-primary: #29b391;
	--link-color: #1766cb;	
    --temp-bg-primary: #39ab8f;
	--temp-bg-info: #0dcaf0;
	--temp-bg-danger: #d93535;
	--temp-bg-warning: #f5be31;
	--temp-bg-success: #3fdd82;
    --text-black: #000;
    }
}

.btn-primary {
	color: var(--text-black) !important;
	background-color: var(--btn-primary-color) !important;
	border-color: var(--btn-primary-color) !important;
}
.btn-primary:hover {
	background-color: #29b391 !important;
}
.btn-primary:active {
	background-color: #42b599 !important;
}
.btn-primary:focus {
	background-color: #42b599  !important;
	border-color: #42b599;
}
.btn-primary:active:hover {
    background-color: #49a38d !important;
}
.btn.btn-primary-custom {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--text-black);
}
.nav-pills>li.active>a:hover {
	background-color: #29b391;
}
.nav-pills>li.active>a:focus {
	background-color: #42b599;
}
.nav.nav-pills .active>a {
    color: var(--text-black) !important;
}
.badge.bg-primary {
	border-color: var(--badge-primary-color) !important;
	background-color: var(--badge-primary-color) !important;
	color: var(--text-black) !important;
}
.k-chip-solid-base {
	color: var(--text-black);
	border-color: var(--primary-color);
	background-color: var(--primary-color);
}
.sidebar .nav > li.active > a {
	background-color: var(--nav-li-active-bg-color) !important; 
	color: var(--sidebar-nav-active-text-color) !important;
}
.label.label-primary {
	border-color: var(--label-primary-color);
	background-color: var(--label-primary-color);
	color: var(--text-black);
}
.k-pager .k-pager-numbers-wrap .k-pager-numbers .k-button.k-selected {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	color: var(--text-black) !important;
}
.alert-info {
	background-color: var(--alert-info-bg-color);
	border-color: var(--alert-info-border-color);
	color: var(--text-color-secondary);
}
.alert-danger {
	background-color: var(--alert-danger-bg-color);
	border-color: var(--alert-danger-border-color);
	color: var(--text-color-secondary);
}
.alert-success {
	background-color: var(--alert-success-bg-color);
	border-color: var(--alert-success-border-color);
	color: var(--text-color-secondary);
}
.alert-warning {
	background-color: var(--alert-warning-bg-color);
	border-color: var(--alert-warning-border-color);
	color: var(--text-color-secondary);
}
.panel-primary>.panel-heading {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color);
    color: #303030;
}
.k-switch-on .k-switch-track {
    border-color: var(--primary-color);
    color: var(--text-black);
    background-color: var(--primary-color);
}
.k-pager .k-pager-numbers-wrap .k-pager-numbers .k-button {
    color: var(--text-black);
}
.bg-primary {
    background-color: var(--primary-color);
    color: var(--text-black) !important;
}
.bg-success {
    background-color: var(--success-color);
    color: var(--text-black) !important;
}
.k-selected {
    color: var(--text-black) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.badge-open {
    background-color: var(--success-color);
    color: var(--text-black);
}
.k-button-solid-primary {
    color: var(--text-black);
    background: var(--btn-primary-color);
    border-color: var(--btn-primary-color);
}
.btn-primary311 {
    color: var(--text-black) !important;
    background: var(--btn-primary-color) !important;
    border-color: var(--btn-primary-color) !important;
}

/* ===================  Dark ================== */
body.dark-theme .btn-primary {
	background-color: var(--temp-bg-primary);
	border: 1px solid var(--temp-bg-primary);
	color: var(--text-black) !important;
}
body.dark-theme .btn-primary:hover {
    background-color: var(--temp-bg-primary)!important;
}
body.dark-theme .btn-primary:focus {
    background-color: #2d977d !important;
    border-color: #2d977d!important;
}
body.dark-theme .btn-info {
	background-color: var(--item-bg-info);
	border-color: var(--item-bg-info);
}
body.dark-theme .btn-warning {
	background-color: #7a491f;
	border-color: #7a491f;
}
body.dark-theme .btn-default {
	background-color: var(--main-panel-color);
	border: 1px solid #4f5d68;
}
body.dark-theme .badge.bg-primary {
	color: var(--main-txt-color) !important;
    border-color: var(--item-border-primary);
    background-color: var(--item-bg-primary) !important;
}
body.dark-theme .badge.bg-success {
	color: var(--main-txt-color) !important;
	border-color: var(--item-border-success);
	background-color: var(--item-bg-success);
}
body.dark-theme .badge.bg-danger {
	color: var(--main-txt-color) !important;
	border-color: var(--item-border-danger);
    background-color: var(--item-bg-danger);
}
body.dark-theme .badge.bg-info {
	color: var(--main-txt-color) !important;
	border-color: var(--item-border-info);
	background-color: var(--item-bg-info) !important;
}
body.dark-theme .badge.bg-warning {
	color: var(--main-txt-color) !important;
	border-color: var(--item-border-warning);
	background-color: var(--item-bg-warning);
}
body.dark-theme .label-primary {
    border-color: var(--item-border-primary);
    background-color: var(--item-bg-primary) !important;
    color: var(--label-text-color) !important;
}
body.dark-theme .label-success {
	border-color: var(--item-border-success);
	background-color: var(--item-bg-success) !important;
	color: var(--label-text-color) !important;
}
body.dark-theme .label-danger {
    border-color: var(--item-border-danger);
    background-color: var(--item-bg-danger);
	color: var(--label-text-color) !important;		
}
body.dark-theme .label-info {
    border-color: var(--item-border-info);
    background-color: var(--item-bg-info) !important;
	color: var(--label-text-color) !important
}
body.dark-theme .label-warning {
    border-color: var(--item-border-warning);
    background-color: var(--item-bg-warning);
	color: var(--label-text-color) !important;
}	
body.dark-theme .nav-pills>li.active>a:hover {
	background-color: #3c7a6a;
}
body.dark-theme .nav-pills>li.active>a:focus {
	background-color: #3c7a6f;
}	
body.dark-theme .alert-info {
    color: var(--main-txt-color) !important;
    border-color: var(--item-border-info);
    background-color: var(--item-bg-info) !important;
}
body.dark-theme .alert-danger {
    color: var(--main-txt-color) !important;
    border-color: var(--item-border-danger);
    background-color: var(--item-bg-danger);
}
body.dark-theme .alert-success {
    border-color: var(--item-border-success);
    background-color: var(--item-bg-success);
    color: var(--main-txt-color) !important;
}
body.dark-theme .alert-warning {
    color: var(--main-txt-color) !important;
    border-color: var(--item-border-warning);
    background-color: var(--item-bg-warning);
}	
body.dark-theme .icon-f-size-28 {
	color: var(--link-color);
}
body.dark-theme .nav.nav-pills .active a {
    background-color: var(--primary-color);
    color: #000 !important;
    border: 1px solid var(--primary-color);
}
body.dark-theme .btn.btn-primary-custom {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--text-black) !important;
}
body.dark-theme .k-pager .k-pager-numbers-wrap .k-pager-numbers .k-button {
    color: #bdbdbd;
}
body.dark-theme .k-upload .k-dropzone.k-upload-dropzone .k-upload-button {
    color: var(--text-black);
    background-color: var(--primary-color);
}
body.dark-theme .details-box {
    border: 1px solid var(--main-border-color);
}
body.dark-theme .panel311 {
    background-color: var(--main-panel-color);
}
body.dark-theme .item311{
    background-color: var(--main-panel-color);
    border-color: var(--main-border-color);
}
body.dark-theme .labels311 {
   color: var(--main-txt-color);
}
body.dark-theme .p311requestdescription {
   color: var(--main-txt-color);
}
body.dark-theme .modal-footer {
    border-top: 1px solid var(--main-border-color);
}
body.dark-theme #subCategoryTicketDetails tbody tr:nth-child(odd) {
    background: #4d7e71;
    color: var(--text-black);
}
body.dark-theme .reservation-list .k-listview-content .card {
    border: 1px solid var(--main-border-color);
    background: var(--main-bg-color);
}
body.dark-theme .btn-secondary {
 background-color: #4b5054;
}
body.dark-theme .k-expander {
    color: var(--main-txt-color);
   background-color: var(--main-panel-color);
}
body.dark-theme .k-chart-overlay {
     background-color: var(--main-panel-color);
}
body.dark-theme .k-chart-overlay .k-no-data, body.dark-theme .k-chart-overlay .k-nodata {
 color: var(--main-txt-color);
}
body.dark-theme .k-button-solid-primary {
    color: var(--text-black);
    background: var(--btn-primary-color);
    border-color: var(--btn-primary-color);
}
body.dark-theme .k-grid .k-table-td .k-button-solid-primary {
    border-color: var(--main-border-color);
    color: var(--main-txt-color);
    background-color: var(--main-panel-color);
}
body.dark-theme .k-grid .k-master-row .k-icon {
    color: var(--main-black);
}
body.dark-theme .sidebar .nav > li.active > a {
	background-color: var(--nav-li-active-bg-color) !important; 
	color: var(--sidebar-nav-active-text-color) !important;
}


/* ========================================================================
   Component: layout
 ========================================================================== */
body,
.wrapper > section {
    background-color: var(--main-bg-color);
}
.wrapper > .aside {
    background-color: var(--left-navbar-color);
}
/* ========================================================================
   Component: top-navbar
 ========================================================================== */
.topnavbar {
    background-color: var(--primary-color);
}
.topnavbar .navbar-header {
    background-color: var(--primary-color);
    background-image: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: -o-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-repeat: repeat-x;
}
@media only screen and (min-width: 768px) {
    .topnavbar .navbar-header {
        background-image: none;
    }
}
.topnavbar .navbar-nav > li > .navbar-text {
    color: var(--primary-color);
}
.topnavbar .navbar-nav > li > a,
.topnavbar .navbar-nav > .open > a {
    color: var(--primary-color);
}
.topnavbar .navbar-nav > li > a:hover,
.topnavbar .navbar-nav > .open > a:hover,
.topnavbar .navbar-nav > li > a:focus,
.topnavbar .navbar-nav > .open > a:focus {
    color: var(--topnav-hover-color);
}
.topnavbar .navbar-nav > .active > a,
.topnavbar .navbar-nav > .open > a,
.topnavbar .navbar-nav > .active > a:hover,
.topnavbar .navbar-nav > .open > a:hover,
.topnavbar .navbar-nav > .active > a:focus,
.topnavbar .navbar-nav > .open > a:focus {
    background-color: transparent;
}
.topnavbar .nav-wrapper {
    background-color: var(--primary-color);
    background-image: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: -o-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-repeat: repeat-x;
}
@media only screen and (min-width: 768px) {
    .topnavbar {
        background-color: var(--primary-color);
        background-image: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
        background-image: -o-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
        background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 100%);
        background-repeat: repeat-x;
    }
    .topnavbar .navbar-nav > .open > a,
    .topnavbar .navbar-nav > .open > a:hover,
    .topnavbar .navbar-nav > .open > a:focus {
        box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.5) inset;
    }
    .topnavbar .navbar-nav > li > .navbar-text {
        color: var(--topnav-text-color);
    }
    .topnavbar .navbar-nav > li > a,
    .topnavbar .navbar-nav > .open > a {
        color: var(--topnav-text-color);
    }
    .topnavbar .navbar-nav > li > a:hover,
    .topnavbar .navbar-nav > .open > a:hover,
    .topnavbar .navbar-nav > li > a:focus,
    .topnavbar .navbar-nav > .open > a:focus {
        color: var(--topnav-hover-color);
    }
}
/* ========================================================================
   Component: sidebar
 ========================================================================== */
.sidebar {
    background-color: var(--left-navbar-color);
}
.sidebar .nav-heading {
    color: var(--nav-heading-color);
}
.sidebar .nav > li > a,
.sidebar .nav > li > .nav-item {
    color: var(--nav-items-color);
}
.sidebar .nav > li > a:focus,
.sidebar .nav > li > .nav-item:focus,
.sidebar .nav > li > a:hover,
.sidebar .nav > li > .nav-item:hover {
    color: var(--primary-color);
}
.sidebar .nav > li > a > em,
.sidebar .nav > li > .nav-item > em {
    color: inherit;
}
.sidebar .nav > li.active,
.sidebar .nav > li.open,
.sidebar .nav > li.active > a,
.sidebar .nav > li.open > a,
.sidebar .nav > li.active .nav,
.sidebar .nav > li.open .nav {
    background-color: var(--left-navbar-active-color);
    color: var(--primary-color);
}
.sidebar .nav > li.active > a > em,
.sidebar .nav > li.open > a > em {
    color: var(--primary-color);
}
.sidebar .nav > li.active {
    border-left-color: var(--primary-color);
}
.sidebar-subnav {
    background-color: var(--left-navbar-color);
}
.sidebar-subnav > .sidebar-subnav-header {
    color: var(--nav-items-color);
}
.sidebar-subnav > li > a,
.sidebar-subnav > li > .nav-item {
    color: var(--nav-items-color);
}
.sidebar-subnav > li > a:focus,
.sidebar-subnav > li > .nav-item:focus,
.sidebar-subnav > li > a:hover,
.sidebar-subnav > li > .nav-item:hover {
    color: var(--primary-color);
}
.sidebar-subnav > li.active > a,
.sidebar-subnav > li.active > .nav-item {
    color: var(--primary-color) !important;
}
.sidebar-subnav > li.active > a:after,
.sidebar-subnav > li.active > .nav-item:after {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
/* ========================================================================
   Component: offsidebar
 ========================================================================== */
.offsidebar {
    background-color: var(--main-bg-color);
}

body, .wrapper .section-container {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}

.switch input:checked+span {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}