:root {
    --brand-color-1               : #042824;
    --brand-color-1-lighter       : #05302c;
    --brand-color-1-middle-darker : #020e0d;
    --brand-color-1-darker        : #031a18;
    --brand-color-2               : #51ae99;
    --brand-color-2-lighter       : #68c0ac;
    --brand-color-2-darker        : #346f62;
    --header-link-color           : var(--brand-color-2-lighter);
}

:root {
    --quantis-green               : #09473e;
    --quantis-light-green         : #0c594e;
    --sidemenu-border-right-color : #07413a;
    --footer-link-color                : var(--light-text-color);
    --asidemenu-blue-border       : var(--brand-color-1-lighter);
    --input-focus-color           : var(--brand-color-2);
    --default-link-color          : var(--brand-color-2-lighter);
    --heading-color               : var(--brand-color-2);
    --aside-menu-color            : var(--brand-color-1);
    --button-hover-color          : var(--brand-color-2-darker);
    --startpage-pattern           : linear-gradient(-45deg, #a1ebe0, #2b9675 31%, #16493c 70%, #062624);
}

main .startpageContainer a:not(.button) {
    color : var(--brand-color-2-lighter) !important;
}

.startpageContainer h1 span {
    color : color-mix(in oklab, var(--brand-color-2-lighter) 100%, black 20%) !important;
}

header {
    background-color : var(--brand-color-1-darker);
}


.startpage {
    color : var(--brand-color-2-lighter);
}

.startpage .lineLeft span,
.startpage .lineRight span,
.loginPopup .lineLeft span,
.loginPopup .lineRight span,
.startpage label {
    border-color : var(--brand-color-2-lighter) !important;
}

.startpage .icon {
    fill : var(--brand-color-2-lighter) !important;
}

header a.logo,
nav a.logo,
aside a.logo {
    width            : 261px;
    height           : 68px;
    background-image : url('../../images/logo.svg');
}

aside .sideMenu:not(input, .gm-autocomplete) {
    background-color : var(--brand-color-1-darker) !important;
    border-right     : 1px solid var(--brand-color-1-darker) !important;
    color            : var(--light-text-color) !important;
}

.aside a.logo {
    max-width : 150px !important;
}

.startpage .goldBar {
    background-image : url(../../../../images/layout_v4/gold_bar_dark.webp);
}

.startpageContainer h1 {
    color : var(--brand-color-2);
}

/*Change text in autofill textbox*/
.startpage input:-webkit-autofill {
    -webkit-text-fill-color : var(--brand-color-2-lighter);
}

main .startpageContainer .links a {
    color : var(--brand-color-2-lighter);
}

.page-startpage .startpage input[type=text],
.page-startpage .startpage input[type=password] {
    color : var(--light-text-color) !important;
}



.layout_v4 header .layout-switcher:hover {
    background : var(--brand-color-2) !important;
}

footer .contacts svg {
    fill : var(--brand-color-2-lighter);
}

footer .sidebar h1 {
    text-transform : none;
    font-weight    : 700;
}

header .loginPopup .box {
    background-color : var(--brand-color-1-darker);
}

header ul li span.timeLock {
    opacity : 0.8;
}

header .loginPopup .box .formNavigation {
    border-color : var(--brand-color-2-lighter) !important;
}

header .loginPopup .box h1 {
    color : var(--brand-color-2);
}

header .loginPopup > .box,
header .loginPopup > .box .formNavigation a {
    color : var(--brand-color-2-lighter) !important;
}

header .loginPopup > .box > .box.error {
    color : var(--body-text-color) !important;
}

@media only screen and (max-width : 500px) {
    header a.logo {
        width : 100%;
    }
}