/*
 * Colour themes. The colours come from tblThemes (Views/Shared/_ThemeStyle.cshtml writes them as body[data-theme="..."] variables);
 * the values after each comma are the "Peace" colours, so the pages look the same when the table is empty or not deployed.
 * Load after AdminLTE / _all-skins.css: the selectors are as specific as theirs and the later rule wins.
 */
.skin-blue .main-header .navbar { background-image: var(--t-header, linear-gradient(-90deg, #230c6e, #e7700f, #fcf400, #f9df03, #ffffff)); }
.skin-blue .main-header .navbar .sidebar-toggle { color: var(--t-title, #230c6e); }
.skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: var(--t-menu, #230c6e); color: #fff; }
.skin-blue .main-header li.user-header { background-color: var(--t-menu, #270e5f); }
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a { background: var(--t-menu, #230c6e); }
.skin-blue .sidebar-menu > li:hover > a:hover, .skin-blue .sidebar-menu > li.active > a:hover, .skin-blue .sidebar-menu > li.menu-open > a:hover { background: var(--t-accent, #d91f18); }
.skin-blue .sidebar-menu > li.active > a { border-left-color: var(--t-accent, #d91f18); }
.skin-blue .sidebar a { color: var(--t-title, #230c6e); }
.skin-blue .sidebar-menu .treeview-menu > li.active > a, .skin-blue .sidebar-menu .treeview-menu > li > a:hover { background: var(--t-accent, #d91f18); color: #fff; }
.skin-blue .sidebar-menu > li > a:hover, .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a { color: #fff; }
.mis-userpanel { background-image: var(--t-panel, linear-gradient(10deg, #ff861f, #e8730f, #d94432, #dd4b39, #f1f1f1)); }
.mis-title { color: var(--t-title, #230c6e); }
.treeview-menu::-webkit-scrollbar-thumb { background-color: var(--t-accent, #19825c); }

/* buttons */
.btn-primary { background-color: var(--t-primary, #3c8dbc); border-color: var(--t-primary, #3c8dbc); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--t-primary, #3c8dbc); border-color: var(--t-primary, #3c8dbc); filter: brightness(0.88); }

/* sign-in page */
.login-bar { background-image: linear-gradient(-90deg, #ffffff, #f1f1f1, var(--t-tint, #fbf301), #f1f1f1, #ffffff); }
.login-page h3, .login-page h5 { color: var(--t-accent, #d91f18); }
.login-page .login-slogan { color: var(--t-title, #230c6e); }

/* the colour picker in the profile menu */
.mis-theme-pick { padding: 8px 15px 4px; text-align: center; background: #fff; }
.mis-theme-pick .mis-theme-label { display: block; font-size: 11px; color: #777; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.mis-theme-pick button { width: 24px; height: 24px; margin: 0 3px 4px; padding: 0; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); box-shadow: 0 0 0 1px #c9c9c9; outline: none; position: relative; transition: transform .12s; }
.mis-theme-pick button:hover, .mis-theme-pick button:focus { transform: scale(1.18); box-shadow: 0 0 0 1px #888; }
.mis-theme-pick button.on { box-shadow: 0 0 0 2px #333; }
.mis-theme-pick button.on::after { content: "\f00c"; font-family: FontAwesome; color: #fff; font-size: 10px; line-height: 20px; position: absolute; inset: 0; text-shadow: 0 0 2px rgba(0,0,0,.7); }