:root {
    /*COMMON*/
    --skin-bg: #106EBE;
    --skin-color: #106EBE;
    --skin-link: #106EBE;
    --skin-logo-natural: none;
    --skin-logo-invert: block;
    --skin-border: #106EBE;
    /*LOGIN*/
    --skin-login-color: #ffffff;
    --skin-login-link: #ffff00;
    --skin-login-btn: #343a40;
    --skin-login-btn-hover: #222222;
    --skin-login-btn-color: #efefef;
    --skin-login-btn-color-hover: #ffffff;
    /*ADMIN*/
    --skin-header-border: #343a40;
    --skin-header-color: #ffffff;
    --skin-header-color-hover: #ffffff;
    --skin-header-btn-hover: #10497C;
    --skin-header-btn-border: #005E98;
    --skin-header-toggle-menu: #222;
}

.skin-btn {
    background-color: var(--skin-bg) !important;
    color: var(--skin-header-color) !important;
    border: 1px solid var(--skin-header-border) !important;
}

.skin-btn:hover {
    background-color: var(--skin-header-btn-hover) !important;
    color: var(--skin-header-color-hover) !important;
}

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

.skin-bg-alt {
    background-color: var(--skin-header-btn-hover);
}

.skin-color {
    color: var(--skin-color);
}

.skin-color-alt {
    color: var(--skin-header-color);
}

.skin-color-alt-hover {
    color: var(--skin-header-color-hover);
}

.skin-link {
    color: var(--skin-link);
}

.skin-link:hover {
    text-decoration: underline;
    color: var(--skin-link);
}

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

.skin-border-alt {
    border-color: var(--skin-header-btn-border) !important;
}

.skin-login-color {
    color: var(--skin-login-color);
}

.css-load:after {
    border-color: --skin-bg;
}

/* LOGIN */
.login a,
.login a:hover {
    color: var(--skin-login-link);
}

.login-btn {
    color: var(--skin-login-btn-color);
    background-color: var(--skin-login-btn);
}

.login-btn:hover {
    color: var(--skin-login-btn-color-hover);
    background-color: var(--skin-login-btn-hover);
}

.logo-natural {
    display: var(--skin-logo-natural);
}

.logo-invert {
    display: var(--skin-logo-invert);
}

/* PANEL */
nav,
header {
    border-color: var(--skin-header-border);
}

header .dd-btn {
    color: var(--skin-header-color);
    border-color: var(--skin-header-btn-border);
}

header .dd-btn:hover {
    color: var(--skin-header-color-hover);
    background-color: var(--skin-header-btn-hover);
}

header #toggle-menu {
    background-color: var(--skin-header-toggle-menu);
}

/* PANEL */
.css-load:after {
    border-color: var(--skin-bg);
}