/*
/*   Nativemin Theme for Webmin/Virtualmin (https://github.com/nativeit-dev/webmin-native-theme)
/*   Created by Stephen Davis - sdavis@nativeit.net
/*   Based on a single custom CSS file that extends Virtualmin's Bootstrap-derived 'Authentic Theme' (https://github.com/virtualmin/authentic-theme)
/*   Virtualmin's 'Authentic Theme' is licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
/*
/*   This project is ongoing, please see the README at https://github.com/nativeit-dev/webmin-native-theme for more information, TODO, or to report issues and/or submit corrections and improvements.   */


/*   VARIABLES   */

@import url("https://fonts.googleapis.com/css2?family=Barlow&family=Oswald&family=Inconsolata");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");
:root {
    --ui_font_normal: Barlow, Helvetica, Arial, sans-serif !important;
    --ui_font_header: "Oswald", Helvetica, Arial, sans-serif !important;
    --ui_font_bold_header: Oswald, sans-serif !important;
    --ui_font_light_header: Oswald, sans-serif !important;
    --ui_font_button: Barlow, Helvetica, Arial, sans-serif !important;
    --ui_font_mono: Inconsolata, "Courier New", monospaced !important;
    --bg_color_dark-trans: rgba(23, 29, 31, 0.5) !important;
    --ui_color_white_muted: rgba(255, 255, 255, 0.65) !important;
    --ui_color_red_muted: rgb(126, 62, 70) !important;
    --ui_color_green_muted: rgb(92, 109, 96) !important;
    --ui_color_black: rgba(23, 29, 31, 1) !important;
    --ui_color_red: rgba(220, 100, 100, 1) !important;
    --ui_color_green: rgb(38, 167, 87) !important;
    --ui_color_brightgreen: rgba(10, 215, 100, 1) !important;
    --ui_color_blue: rgba(98, 209, 249, 1) !important;
    --ui_color_orange: rgba(247, 148, 67, 1) !important;
    --ui_color_yellow: rgba(225, 220, 35, 1) !important;
    --ui_color_magenta: rgba(225, 100, 210, 1) !important;
    --ui_color_black: rgba(23, 29, 31, 1) !important;
    --ui_color_dark: rgba(42, 51, 51, 1) !important;
    --ui_color_grey: rgba(215, 225, 220, 1) !important;
    --ui_color_white: rgba(245, 248, 250, 1) !important;
    --ui_color_fade: rgba(245, 248, 250, 0.85) !important;
    --ui_color_light_trans: rgba(245, 248, 250, 0.8) !important;
    --ui_color_dark_trans: rgba(10, 7, 5, 0.65) !important;
    --img_dark_octopus: radial-gradient(#e0e0e0, #000000), url(https://images.unsplash.com/photo-1547716752-9a0331effbef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2152&q=80);
    --img_dark_city: radial-gradient(#fafafa, #dc6040), url(https://images.unsplash.com/photo-1544411047-c491e34a24e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
    --img_ocean_sunset: radial-gradient(#e0e0e0, #333333), url(https://images.unsplash.com/photo-1525755314970-da06742b3792?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
	--img_abstract_arch: radial-gradient(#e0e0e0, #333333), url(https://images.unsplash.com/photo-1544069350-2c7f634f29a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2062&q=80);
    --img_abstract_metal: radial-gradient(#e0e0e0, #333333), url(https://images.unsplash.com/photo-1546373542-831071838118?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1973&q=80);
    --img_blue_stalagtite: radial-gradient(#e0e0e0, #333333), url(https://images.unsplash.com/photo-1549848078-869074eb2e70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);

}


/*   PSEUDOELEMENTS   */

::selection {
    background-color: var(--ui_color_grey);
    color: var(--ui_color_black);
}
::placeholder {
	color: var(--ui_color_white_muted) !important;
}


/*   BODY   */

html[data-bgs="gainsboro"],
html[data-bgs="gainsboro"] body,
html[data-bgs="gainsboro"] .container:not(.form-signin-banner) .container:not(.session_login),
html[data-bgs="gainsboro"] .loader-container,
html[data-bgs="gainsboro"] {
    background-repeat: repeat;
    background-image: var(--img_dark_city);
    filter: opacity(1);
    background-position: left;
    background-blend-mode: multiply;
    background-attachment: fixed;
}

html[data-bgs="gainsboro"],
html[data-bgs="gainsboro"] .container:not(.form-signin-banner),
html[data-bgs="gainsboro"] .loader-container,
html[data-bgs="gainsboro"] {
    background-color: transparent !important;
}

html[data-bgs="gainsboro"] .container-fluid .panel-body .panel-default>.panel-heading {
	
}
.modal-backdrop.in {
    display: none !important;
}


/*   TEXT & LINKS    */

body:not(.session_login) {
    font-family: var(--ui_font_normal);
}

a {
    color: var(--ui_color_red);
}

a:hover,
a:active {
    color: unset;
}

.sub_table_container.table-hardcoded tr td[width="25%"]>a,
a.opener_trigger,
a:focus,
a:hover,
a.text-normal a:focus,
a.text-normal:hover {
    color: unset;
}

a:hover:not(.panel-default) :not(.panel-heading) :not(.fa) {
    color: var(--ui_color_red);
    filter: hue-rotate(200deg);
}

select,
body.csf .dataTables_filter input[type="search"],
body .dataTables_filter input[type="search"],
.csf-container input[type="text"],
.csf-container input[type="search"],
.csf-container input,
.csf-container select,
input[id^="CSF"],
input[type="button"],
input[type="reset"],
input[name]:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.btn):not(.session_login),
input[name]:not([type="image"]):not(.sidebar-search):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not(.btn),
.csf-container input[type="text"],
.csf-container input[type="search"],
.chooser_button,
.form-control0 {
    border-color: #333333 !important;
}

select,
input,
ul.messenger-theme-air,
.jsPanel,
.jsPanel .jsPanel-content,
.messenger-message-inner,
body.csf .dataTables_filter input[type="search"],
body .dataTables_filter input[type="search"],
.csf input[type="text"],
.csf input[type="search"],
.csf input[type="submit"],
.csf button.input,
input[id^="CSF"],
input[type="button"],
input[type="reset"],
input[type="submit"],
input[name]:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.btn):not(.session_login),
table.dataTable.dtr-column.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-column.collapsed>tbody>tr>th:first-child:before,
.file-manager .jsPanel-hdr h3,
.tooltip,
.popover,
body:not(.session_login),
html:not(.session_login),
html.session_login,
body.session_login,
form.session_login,
.container.session_login,
.file-manager .jsPanel-hdr.jsPanel-theme-light,
.file-manager .jsPanel-content.jsPanel-theme-light,
.font-family-default {
    font-family: var(--ui_font_normal);
    font-size: 100%;
}

html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .right-side-tabs-dismiss i,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .panel .panel-heading .panel-title a:before,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .tab-pane .info-container,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] div.media-body>small,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .list-group>a.list-group-item div.media-body>i,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] a.list-group-item .list-group-item-heading,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] button.list-group-item .list-group-item-heading,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .tab-pane .info-container .info-list-data strong,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] #extended_sysinfo a,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] #extended_sysinfo .panel-title-status,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .tab-pane .info-container .info-list-data span[data-data]+strong {
    color: var(--ui_color_white);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.07);
}

.form-group {
    filter: opacity(0.8);
}

.ct-axis-title {
    font-family: var(--ui_font_mono) !important;
    font-size: 13px;
    opacity: 0.6;
}

html[data-theme="blue"] .form-group .form-control.sidebar-search {
    color: var(--ui_color_white);
}
.form-control {
	color: var(--ui_color_white);
}

/*   CUSTOM BRANDING   */

.__logo {
    position: fixed;
    padding: 10px !important;
    opacity: 1 !important;
    filter: blur(0) contrast(100%) saturate (100%) hue-rotate(0);
    z-index: 3;
    bottom: 10%;
    top: 90%;
    left: 0;
    max-height: 15%;
    table-layout: fixed;
    text-align: center;
    pointer-events: none;
}

.session_login .awobject {
    display: none;
    /*   This removes the Webmin icon from the login screen   */
}

/*   SIDEBAR   */

aside {
    z-index: 2;
    backface-visibility: hidden;
}

aside .menu-container.menu-status span {
    /*   margin: -10px 12px 9px 10px;   */
    margin-top: 10px;
    background-color: transparent;
    text-align: left;
    font-size: 11px;
    border-radius: 0;
    padding: 3px 9px;
    line-height: 10px;
    color: rgba(199, 210, 230, 0.91);
    /*   border: 1px solid rgba(255,255,255,.12);   */
    border-top-width: 0;
}

#sidebar {
    background-color: var(--bg_color_dark-trans);
    backdrop-filter: blur(0px) contrast(100%);
    -webkit-backdrop-filter: blur(0px);
}

#sidebar:hover {
    background-color: var(--bg_color_dark-trans);
    backdrop-filter: blur(3px) contrast(100%);
    -webkit-backdrop-filter: blur(3px);
}

sidebar ul.sub>li:not(.menu-container) a {
    font-size: unset !important;
}

#sidebar ul.sub li:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 1px;
    content: "";
    background: var(--ui_color_red_muted);
}

#sidebar ul.sub>li>a:before {
    color: rgba(255, 255, 255, 1);
    filter: drop-shadow(0px 0px 3px white);
}

#sidebar li:not(.menu-title):not(.menu-container):not(.user-html-string) {
    position: relative;
    list-style: none;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 7%);
}

#sidebar li:not(.sub-wrapper):not(.menu-container) a:hover,
.navigation li:not(.sub-wrapper):not(.menu-container) a:hover,
.navigation li:not(.sub-wrapper):not(.menu-container) a:focus,
.csf-container a {
    color: var(--ui_color_grey);
}

html #sidebar .switch-mins a {
    font-family: var(--ui_font_header);
    background-color: var(--bg_color_dark-trans);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.switch-mins label {
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
    opacity: 0.3;
    color: var(--ui_color_green_muted);
}

.switch-mins label:first-of-type i+span {
    display: none !important;
    /*   This removes the original Webmin icon from the left sidebar button.   */
}

i.wbm-webmin::before {
    content: "\271A" !important;
    color: var(--ui_color_green_muted);
    /*   This defines the glyph that appears on the left sidebar button. https://css-tricks.com/snippets/html/glyphs/   */
}

.wbm-virtualmin:before {
    color: var(--ui_color_red_muted);
    content: "\f08c";
    /*   This defines the glyph that appears on the right sidebar button. https://css-tricks.com/snippets/html/glyphs/   */
}

.wbm-virtualmin {
    color: var(--ui_color_grey);
}

.switch-mins {
    border-bottom: 1px solid !important;
    border-color: var(--ui_color_red) !important;
}

.switch-mins label i.wbm-webmin {
    margin-top: 2px;
    margin-bottom: 2px;
    color: var(--ui_color_grey);
}

#sidebar li:not(.menu-container):not(.sub-wrapper) a {
    font-family: var(--ui_font_normal);
    color: var(--ui_color_grey);
}

#sidebar li:not(.menu-container):not(.sub-wrapper).active a {
    filter: drop-shadow(2px -12px 6px black);
}

#sidebar li:not(.sub-wrapper):not(.menu-container).has-sub.active {
    background-color: #0b0c0cc4;
    border-bottom: solid 1px var(--ui_color_red_muted);
    filter: drop-shadow(2px -12px 6px black);
}

.switch-mins input:checked+label {
    color: var(--ui_color_green_muted);
}

.switch-mins label:first-of-type::after {
    color: var(--ui_color_red_muted);
    font-family: var(--ui_font_header);
    font-weight: 700;
    letter-spacing: 4px;
    content: "NATIVE";
    /*   This replaces the label text on the left top sidebar button   */
    display: block;
    visibility: visible !important;
    margin-top: -4px;
    -webkit-font-smoothing: antialiased;
}

#sidebar ul.user-links li:not(.menu-container):not(.sub-wrapper):not(.flex-br) {
    line-height: 0;
    min-width: 26px;
    min-height: 25px;
    height: 25px;
    max-height: 25px;
    margin-top: 2px;
    margin-right: 5px;
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    text-align: center;
    vertical-align: unset;
    border: 0 solid;
    border-radius: 3px !important;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

    align-self: center;
    justify-content: center;
    align-items: center;
}


/*   	SIDEBAR USER LINKS   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container)>span,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container)>a {
    font-size: 11px;
    padding: 0 !important;
    color: var(--ui_color_grey);
    transition-property: color;
    transition-duration: 0.35s;
}


/*   PIN/UNPIN   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container) a:not(.no-hover):hover {
    color: var(--ui_color_red) !important;
}


/*   DASHBOARD   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(2n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(2n) a:not(.no-hover):hover {
    color: var(--ui_color_red) !important;
}


/*   DAY/NIGHT   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(3n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(3n) a:not(.no-hover):hover {
    color: var(--ui_color_red) !important;
}


/*   CLI   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(4n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(4n) a:not(.no-hover):hover {
    color: var(--ui_color_orange) !important;
}


/*   FAVS   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(5n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(5n) a:not(.no-hover):hover {
    color: var(--ui_color_red) !important;
}


/*   THEME CONFIGURATION   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(6n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(6n) a:not(.no-hover):hover {
    color: var(--ui_color_yellow) !important;
}


/*   USER   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(7n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(7n) a:not(.no-hover):hover {
    color: var(--ui_color_green) !important;
}


/*   LANG   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(8n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(8n) a:not(.no-hover):hover {
    color: var(--ui_color_red) !important;
}


/*   LOGOUT   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(9n) span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):nth-of-type(9n) a:not(.no-hover):hover {
    color: var(--ui_color_blue) !important;
}


/*   REFRESH   */

#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):last-of-type span:hover,
#sidebar ul.user-links li:not(.sub-wrapper):not(.menu-container):last-of-type a:not(.no-hover):hover {
    color: var(--ui_color_magenta) !important;
}

.menu-container .user-html {
    overflow: visible;
    z-index: 4;
}

#server-id {
    position: relative;
    overflow: visible;
    font-family: var(--ui_font_header);
    font-weight: 600;
    font-size: 5em;
    /*   This styles the custom HTML text that is supplied under the theme's Sidebar options panel   */
    text-align: center;
    color: var(--ui_color_black);
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
}


/*   LOGIN PAGE   */

.session_login .form-signin-banner,
.session_login .form-signin {
    background-color: var(--bg_color_dark-trans);
    border: 1px solid;
    border-color: var(--ui_color_red) !important;
    backdrop-filter: blur(8px) saturate(0.5) contrast(120%);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 3px;
}

.form-group {
    margin-bottom: 10px !important;
}

.session_login .form-signin-heading {
    font-size: 33px;
    font-weight: 400;
    display: none;
}

.session_login [class^="wbm-"]:before,
.session_login [class*=" wbm-"]:before {
    display: none !important;
    /*   This removes the standard Webmin branding from the login page   */
    font-size: 37px;
    font-weight: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body>div>form>div.__logo_welcome._logo_welcome>img {
    filter: opacity(1);
    z-index: 10004;
    margin-bottom: 1rem;
}

.__logo_welcome._logo_welcome {
    filter: opacity(1);
    z-index: 10004;
    display: block;
}
/*
.session_login .form-signin-paragraph {
    margin: 0px !important;
}
*/
body.error_40x,
html.session_login,
body.session_login,
form.session_login,
.container.session_login {
    font-family: var(--ui_font_header) !important;
    background-color: var(--ui_color_white);
}

.form-signin-paragraph {
    top: -60px !important;
    visibility: collapse !important;
    position: relative;
    margin-bottom: 0px !important;
}

.form-signin-paragraph:after {
    font-family: var(--ui_font_header);
    font-size: 18px;
    font-weight: 400;
    -webkit-font-feature-settings: antialiased;
    font-feature-settings: antialiased;
    letter-spacing: 2px;
    content: "imagination + technology";
    /*   This adds text below the login logo (the logo itself can be set from the theme's unauthenticated logo option panel   */
    text-transform: uppercase;
    color: var(--ui_color_white_muted) !important;
    top: -20% !important;
    display: block;
    visibility: visible;
}


/*   BUTTONS   */

button {
    font-family: var(--ui_font_button);
    border-radius: 5px;
    margin-right: 3px !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--ui_color_white) !important;
    text-decoration: underline;
    background-color: transparent;
}

.btn.btn-transparent-link:hover {
    color: var(--ui_color_blue) !important;
}

.help_popup.btn.activated,
.help_popup.text-lighter:active,
.help_popup.text-lighter:focus,
.help_popup.text-lighter:hover {
    color: var(--ui_color_blue) !important;
}

.btn:not(.btn-round),
button.btn:not(.btn-round),
.csf-container input[type="submit"]:not(.btn-round),
.csf-container button.input:not(.btn-round),
input[type="submit"]:not(.btn-round) {
    border-radius: 3px !important;
    /*   margin-left: 3px;   */
}

.btn:not(.btn-xxs):not(.btn-tiny):not(.ui_link_replaced):not(.ui_link_empty),
.csf-container button.input,
.csf-container input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"],
button.btn {
    font-family: var(--ui_font_button);
    font-size: 12px;
    padding: 5px 12px;
    -webkit-transition: border-color ease-in-out 0.5s, -webkit-box-shadow ease-in-out 0.5s;
    transition: none;
    text-align: center !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 3px;
}

.btn-primary {
    font-family: var(--ui_font_button);
    color: var(--ui_color_white) !important;
    border: 1px solid;
    border-color: var(--ui_color_black) !important;
    background-color: var(--ui_color_black) !important;
    border-radius: 3px;
    margin-left: 3px;
}

.btn-default {
    font-family: var(--ui_font_button);
    color: var(--ui_color_dark) !important;
    border-color: var(--ui_color_dark) !important;
    background-color: var(--ui_color_grey) !important;
    border-radius: 3px;
    margin-left: 3px;
}

.btn-warning {
    font-family: var(--ui_font_button);
    color: var(--ui_color_white) !important;
    border-color: var(--ui_color_red) !important;
    background-color: var(--ui_color_black) !important;
    border-radius: 3px;
}

.btn-warning:not(.btn-menu-toggler):hover,
.btn-warning:not(.btn-menu-toggler):focus,
.btn-warning:not(.btn-menu-toggler):active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
    font-family: var(--ui_font_button);
    color: var(--ui_color_black) !important;
    border: 1px solid;
    background-image: radial-gradient(#d7d7d7, #fafafa);
    border-color: var(--ui_color_red) !important;
    border-radius: 3px;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
    color: var(--ui_color_white) !important;
    border-color: var(--ui_color_red) !important;
    background-color: var(--ui_color_red) !important;
}

.btn-danger {
    color: var(--ui_color_white) !important;
    border-color: var(--ui_color_red) !important;
    background-color: var(--ui_color_black) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: var(--ui_color_red) !important;
    border-color: var(--ui_color_red) !important;
    background-color: var(--ui_color_white) !important;
}

.btn-danger[disabled] {
    color: var(--ui_color_white) !important;
    border: 1px solid;
    border-color: var(--ui_color_red) !important;
    background-color: var(--ui_color_black) !important;
}

button.favorites-editor,
#headln2c>button.favorites {
    display: none;
}

.btn.btn-transparent-link {
    color: var(--ui_color_grey);
}

.btn:not(.btn-round),
button.btn:not(.btn-round),
.csf-container input[type="submit"]:not(.btn-round),
.csf-container button.input:not(.btn-round),
input[type="submit"]:not(.btn-round) {
    border-radius: 3px !important;
}

.btn-info {
    color: var(--ui_color_white) !important;
    border-color: var(--ui_color_black) !important;
    background-color: var(--ui_color_blue) !important;
}

.btn-success {
    color: var(--ui_color_white) !important;
    border-color: var(--ui_color_black) !important;
    background-color: var(--ui_color_black) !important;
    margin-right: 3px;
}

.btn.btn-success:not(.btn-primary):not(.btn-xxs):not(.ui_link):not(.ui_submit),
.btn.btn-success.btn-tiny:not(.btn-xxs):not(.ui_link):not(.ui_submit) {
    border: 1px solid;
    border-color: var(--ui_color_green) !important;
}

.btn-success:active {
    color: var(--ui_color_green) !important;
    border-color: var(--ui_color_green) !important;
    background-color: var(--ui_color_white) !important;
}

.btn-success:focus {
    color: var(--ui_color_black) !important;
    border-color: var(--ui_color_green) !important;
    background-color: var(--ui_color_white) !important;
}

.btn-success:hover {
    color: var(--ui_color_black) !important;
    border-color: var(--ui_color_green) !important;
    background-color: var(--ui_color_white) !important;
}

.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus {
    color: var(--ui_color_green) !important;
    border-color: var(--ui_color_green) !important;
    background-color: var(--ui_color_dark) !important;
}

.cke_dialog_ui_button_ok,
.btn-success {
    color: var(--ui_color_white) !important;
    border-color: var(--ui_color_green) !important;
    background-color: var(--ui_color_black) !important;
    margin-right: 3px;
}

.cke_dialog_ui_button_ok:hover,
.btn-success:hover {
    color: var(--ui_color_black) !important;
    border-color: var(--ui_color_green) !important;
    background-color: var(--ui_color_white) !important;
}

.btn.btn-success:not(.btn-primary):not(.btn-xxs):not(.ui_link):not(.ui_submit):hover,
.btn.btn-success.btn-tiny:not(.btn-xxs):not(.ui_link):not(.ui_submit):hover {
    border: 1px solid;
}

.btn-primary:not(.btn-menu-toggler):hover,
.btn-primary:not(.btn-menu-toggler):focus,
.btn-primary:not(.btn-menu-toggler):active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    font-family: var(--ui_font_button);
    color: var(--ui_color_black) !important;
    border-color: var(--ui_color_black) !important;
    background-image: radial-gradient(#d7e1dc, #f5f8fa) !important;
    border: 1px solid;
    border-radius: 3px;
}

.btn.btn-xxs {
    font-size: 11px;
    line-height: 11px;
    height: 15px;
    margin-top: -3px;
    margin-right: 3px;
    padding: 0 8px 1px 8px;
    display: inline-flex;
    align-self: center;
    justify-content: center;
    align-items: center;
}

.page_footer_submit {
    display: inline-flex;
    align-self: center;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
    background-color: var(--ui_color_grey) !important;
    color: var(--ui_color_black) !important;
    border: 1px solid;
    border-color: var(--ui_color_black) !important;
    border-radius: 3px;
}

.session_login .form-signin .form-group.form-signin-group .btn {
    margin-bottom: 3px !important;
    border-radius: 3px;
}
.session_login .form-signin::placeholder {
    color: var(--ui_color_white);
}
.session_login .form-signin .form-group.form-signin-group .btn:first-of-type {
    border: solid 1px;
    border-color: var(--ui_color_green) !important;
    margin-bottom: 3px !important;
    border-radius: 3px;
}

.session_login .form-signin .form-group.form-signin-group .btn+a.btn {
	display: none !important;
    margin-top: 2px;
    border: solid 1px;
    border-color: var(--ui_color_red) !important;
    margin-bottom: 3px !important;
    border-radius: 3px;
}

.btn:not(.btn-xxs):not(.btn-tiny):not(.ui_link_replaced):not(.ui_link_empty),
.csf-container button.input,
.csf-container input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"],
button.btn {
    font-family: var(--ui_font_button);
    font-size: 12px;
    padding: 5px 12px;
    -webkit-transition: border-color ease-in-out 0.5s, -webkit-box-shadow ease-in-out 0.5s;
    transition: none;
    text-align: center !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 3px;
    margin-left: 3px;
}

body[data-uri*="/tconfig.cgi"] .container-fluid .ui_form_end_buttons td:last-child .btn-group .btn:first-child,
html[data-script-name*="settings-editor_read.cgi"] #content .CodeMirror+.ui_form_end_buttons .btn {
    margin-left: 0;
}

html[data-script-name*="settings-editor_read.cgi"] #content .CodeMirror+.ui_form_end_buttons td:last-child .btn:first-child {
    margin-right: 1px !important;
}

html[data-script-name*="settings-"][data-script-name*=".cgi"] .ui_form_end_buttons td:last-child .btn:last-child {
    margin-right: 2px !important;
}

#edit_logos {
    margin-right: 3px;
}

.btn-default:focus,
.btn-default.active,
.btn-default:active,
.btn-default:not([aria-expanded="true"]):hover {
    border-color: var(--ui_color_black) !important;
    background-image: radial-gradient(#d7e1dc, #f5f8fa);
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    font-family: var(--ui_font_button);
    color: var(--ui_color_black) !important;
    border-color: var(--ui_color_black) !important;
    background-image: radial-gradient(#d7e1dc, #f5f8fa);
    border: 1px solid;
    border-radius: 3px;
}

body.csf .dataTables_filter input[type="search"],
body .dataTables_filter input[type="search"],
.csf-container input[type="text"],
.csf-container input[type="search"],
.csf-container input[type="submit"],
.csf-container button.input,
.csf-container input[id^="CSF"],
input[type="button"],
input[type="reset"],
input[type="submit"],
input[name]:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.btn):not(.session_login) {
    font-family: var(--ui_font_button) !important;
    height: 32px;
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    text-align: center;
    border: 1px solid;
    border-radius: 3px;
    text-shadow: none;
}

.cspinner-icon.white {
    border-color: var(--ui_color_grey) !important;
}


/*   COLORED ELEMENTS & ALERTS   */

#sidebar li:not(.sub-wrapper):not(.menu-container).sub_active {
    border-left: 4px solid;
    border-color: var(--ui_color_red_muted);
}

.badge-danger {
    color: var(--ui_color_white);
    border-color: var(--ui_color_red);
    background-color: var(--ui_color_red);
}

html[data-script-name*="settings-editor_read.cgi"] .badge.label-default {
    margin-top: -12px;
}

.text-danger {
    color: var(--ui_color_red);
}

.text-success {
    color: var(--ui_color_green);
}

.text-info {
    color: var(--ui_color_blue);
}

ul.messenger-theme-air .messenger-message.message-success:hover,
ul.messenger-theme-air .messenger-message.message-success {
    background-color: var(--ui_color_grey);
    color: var(--ui_color_black);
    border: 1px solid;
    border-color: var(--ui_color_black);
    border-radius: 3px;
}

ul.messenger-theme-air .messenger-message .messenger-close {
    color: var(--ui_color_black);
}

.alert .alert-warning {
    background-color: rgba(200, 200, 200, 0.01);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: var(--ui_color_red);
}

.alert-warning {
    border-bottom-color: rgba(215, 215, 215, 0.5) !important;
    color: var(--ui_color_red);
}

.__logout-link .fa-sign-out.text-danger {
    color: var(--ui_color_red);
    transition-property: color;
    transition-duration: 0.35s;
}

.__logout-link:hover a>.text-danger {
    color: var(--ui_color_blue);
}

.right-side-tabs-toggler[data-bgs="nav"]>button {
    color: var(--ui_color_blue);
}

html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] [color="green"],
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .text-success,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .text_type_success {
    color: var(--ui_color_green) !important;
}

#system-status .alert {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"],
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .list-group-item,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .right-side-tabs-dismiss,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .nav-tabs,
html:not([data-bgs="nightRider"]) .right-side-tabs[data-bgs="nav"] .nav-tabs .active a,
html:not([data-bgs="nightRider"]) .right-side-tabs-toggler[data-bgs="nav"]>button,
html:not([data-bgs="nightRider"]) .right-side-tabs-toggler[data-bgs="nav"].opened>button,
html:not([data-bgs="nightRider"]) .right-side-tabs-toggler[data-bgs="nav"] {
    background-color: var(--ui_color_dark) !important;
    color: var(--ui_color_white) !important;
}


/*   INTERFACE PANELS   */

.panel {
    margin-bottom: 20px;
    color: var(--ui_color_dark);
    background-color: var(--ui_color_white);
    border: 1px solid !important;
    border-color: var(--ui_color_dark) !important;
    border-radius: 5px !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
    vertical-align: middle;
    font-family: var(--ui_font_header);
    color: var(--ui_color_fade);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    border-bottom-width: 1px !important;
    border-radius: 5px !important;
    border-color: var(--ui_color_black);
}

.panel-group .panel-heading {
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-bottom-color: var(--ui_color_black) !important;
}

.panel-default>.panel-heading {
    vertical-align: middle;
    color: var(--ui_color_fade);
    background-color: var(--ui_color_black);
    border-color: var(--ui_color_black);
    border-radius: 0 !important;
}

.panel .panel-heading .panel-title a:before {
    margin-left: -13px;
    margin-top: 1px;
}

.panel,
.panel-heading,
.panel-group,
.panel-group .panel,
.well,
.modal-content {
    border-color: var(--ui_color_black) !important;
    border-radius: 5px !important;
}

.panel-default>.panel-heading-collapse {
    vertical-align: middle;
    color: var(--ui_color_grey) !important;
    background-color: var(--ui_color_black);
    border-color: var(--ui_color_black);
    border-radius: 3px !important;
}

#content #system-status ._sync_sysinfo_cnt {
    margin-right: -20px;
    margin-top: -8px;
    margin-left: 0;
    border-color: transparent !important;
}

.container-fluid .panel-heading:hover h4>a {
    color: var(--ui_color_red) !important;
}

#extended_sysinfo-1 .panel>.panel-heading>.panel-title>a>.on-hover {
    color: var(--ui_color_red) !important;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: 0.75;
}

#extended_sysinfo-1 .panel>.panel-heading>.panel-title>a>.on-hover {
    margin-right: -9px;
    margin-left: 9px;
    display: none;
}

.sub_table_container.table-hardcoded tr td[width="25%"]>a,
a.opener_trigger:focus {
    color: var(--ui_color_grey) !important;
}

.panel-title {
    vertical-align: middle;
    text-align: right;
    line-height: 16px;
    margin-top: 0px;
    margin-bottom: 1px;
}

#headln2c {
    vertical-align: middle;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

#headln2c span[data-main_title] {
    padding-top: 6px;
    vertical-align: middle;
    font-size: 23px;
    display: inline-block;
}

.well,
.modal-content {
    border-radius: 3px !important;
}

#system-status .panel-title {
    margin-top: 1px;
    font-size: 18px;
    line-height: 14px;
    text-align: right;
}

.file-manager .data-content-container>[data-tree-view] ul.fancytree-container {
    font-size: 13px;
    padding-top: 2px;
    border-style: none;
    background-color: var(--ui_color_white);
}

.file-manager .container-fluid .dataTables_length {
    margin-top: 2px !important;
    margin-bottom: -1px;
}

.file-manager .data-content-container>[data-tree-view] {
    margin-top: 33px;
}

.file-manager table>thead>tr>th {
    color: var(--ui_color_white);
    letter-spacing: -0.2px;
}

#DataTables_Table_0_wrapper {
    color: var(--ui_color_black);
    background-color: var(--ui_color_white);
    margin-top: 3px !important;
    margin-left: 10px;
}

div.dataTables_wrapper div.dataTables_paginate,
.dataTables_wrapper .dataTables_paginate {
    float: right;
    margin-right: 10px;
    margin-bottom: -2px;
    padding-top: 0.25em;
    text-align: right;
}


/*   PIE CHARTS   */

.piechart canvas {
    display: inline-block;
    vertical-align: baseline;
}

.piechart .percent {
    font-family: var(--ui_font_mono);
    font-size: 3.5em !important;
    position: absolute;
    z-index: 2;
    top: 36px;
    left: 38px;
    display: inline-block;
    pointer-events: none;
    color: var(--ui_color_dark);
    opacity: 0.5;
}

.piechart .label {
    font-family: var(--ui_font_mono);
    font-size: 14px !important;
    position: absolute;
    z-index: 3;
    right: -145px;
    bottom: -125px;
    overflow: hidden;
    text-transform: uppercase;
    pointer-events: none;
    color: var(--ui_color_dark);
    opacity: 0.5;
}