:root {
    --color-primary: #0061A0;
    --color-accent: #00A6D9;
    --color-text: #333333;
    --color-bg: #f4f7f6;
    --color-white: #ffffff;
    --grad-green: #76B828;
    --grad-lightblue: #00A6D9;
    --grad-darkblue: #0061A0;
}

@property --grad-shift {
    syntax: '<percentage>';
    initial-value: 5%;
    inherits: false;
}

#header {
    background: linear-gradient(90deg, var(--grad-green) 5%, var(--grad-lightblue) 55%, var(--grad-darkblue) 100%) !important;

    .logo {
        padding: 0 !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 30px;

        img {
            height: 100%;
            width: auto;
        }
    }
}
#header .nav--main .nav-list-item--act > a, #header .nav--main .nav-list-item--cur > a {
    color:var(--color-white) !important;
}
.mask_tabs .tab-item {
    background-color: var(--color-text);
    &:hover {
        background-color: var(--grad-green);
    }
}
#header .shortcut-menu li > a,
button[type="submit"],
input[type="submit"],
.link--box,
a.link--box {

    background: linear-gradient(90deg, var(--grad-green) 5%, var(--grad-lightblue) 55%, var(--grad-darkblue) 100%) !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out !important;

    &:hover {
        opacity: 0.9 !important;
        color: var(--color-white) !important;
    }
}
html {
    color:var(--color-text);
}