:root {
    --light-color: var(--color-light);
    --dark-color: var(--color-dark);
    --text-color: var(--color-dark);
    --color-link: var(--color-primary);
    --color-background: rgb(247, 247, 247);
    --color-background-white: rgb(255, 255, 255);
    --color-background-grey: rgb(241, 241, 241);

    --color-text:  var(--color-dark);
    --color-danger: rgb(200, 35, 51);
    --color-danger-light: rgb(200, 35, 51);
    --color-danger-dark: rgb(189, 33, 48);
    --color-success: rgb(63, 196, 131);
    --color-success-light: rgb(214, 233, 198);
    --color-success-dark: rgb(52, 155, 106);
    --color-info: rgb(70, 140, 242);
    --color-info-light: rgb(188, 232, 241);
    --color-info-dark: rgb(70, 84, 242);
    --color-warning: rgb(233, 157, 44);
    --color-warning-light: rgb(255, 197, 7);
    --color-warning-light-05: rgba(255, 197, 7, .5);
    --color-warning-dark: rgb(255, 193, 7);
    --color-failure: rgb(165, 2, 0);
    --color-failure-light: rgb(235,204,209);
    --color-failure-dark: rgb(131, 1, 0);
    --color-error: var(--color-failure);
    --color-error-light: var(--color-failure);
    --color-error-dark: var(--color-failure-dark);
    --color-todo: rgb(228, 30, 63);
    --color-label-text: var(--color-submenu);

    --color-white: rgb(255, 255, 255);
    --color-grey: var(--color-secondary-dark);
    --color-grey-dark: rgb(53, 53, 53);
    --color-light: rgb(250, 250, 250);
    --color-dark: rgb(17, 17, 17);

    --color-secondary: rgb(224, 224, 224);
    --color-secondary-light: rgb(239, 239, 239);
    --color-secondary-dark: rgb(141, 141, 141);

    --color-border-green: var(--color-success);

    --color-submenu: rgb(102, 102, 102);
    --color-submemu-04: rgba(102, 102, 102, .4);
    --color-submenu-border: rgb(209, 210, 212);
    --color-submenu-border-04: rgba(209, 210, 212, .4);
    --color-submenu-border-015: rgba(209, 210, 212, .15);

    --secondary-color: var(--color-secondary);
    --secondary-light-color: var(--color-secondary-light);
    --secondary-dark-color: var(--color-secondary-dark);

    --box-shadow: rgba(0, 0, 0, .13);
    --shadow-3: 0 4px 8px 3px var(--box-shadow), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-4: 0 8px 10px 1px var(--box-shadow), 0 3px 14px 2px rgba(0, 0, 0, .1), 0 5px 5px -3px rgba(0, 0, 0, 0.11);

    --secondary-text-color: rgb(17, 17, 17);

    --scrollbar-neutral: rgba(209, 210, 212, 0.08);
    --scrollbar-neutral-hovered: rgba(102, 102, 102, 0.16);

    --space-unit: 16px;
    --space-xxs:   calc(0.25 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1 * var(--space-unit));
    --space-lg:   calc(1.25 * var(--space-unit));
    --space-xl:   calc(1.5 * var(--space-unit));
    --space-xxl:   calc(1.75 * var(--space-unit));
    --space-xxxl:   calc(2 * var(--space-unit));

    --space-xxs-negative: calc(var(--space-xxs) * -1);
    --space-xs-negative: calc(var(--space-xs) * -1);
    --space-sm-negative: calc(var(--space-sm) * -1);
    --space-md-negative: calc(var(--space-md) * -1);
    --space-lg-negative: calc(var(--space-lg) * -1);

    --text-size: 11pt;
    --text-base-size: 1em;

    --text-scale-ratio: 1.2;
    --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));

    --max-content-width: 700px;
    --break-mobile: 780px;

    scrollbar-width: thin;
}

body {
    background: var(--color-background);
    color: var(--color-dark);
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-size);
}

h1,
h2,
h3 {
    font-weight: 400;
}

a {
    /*color: var(--color-primary);*/
    color: inherit;
    text-decoration: none;
}

a:hover,
a:active {
    /*color: var(--color-primary-dark);*/
    color: inherit;
    text-decoration: underline;
}

label {
    cursor: pointer;
}

code {
    display: inline-block;
    padding: .1em .5em;
    background: rgb(238, 238, 238);
    font-family: monospace;
}

pre {
    background: rgb(238, 238, 238);
    font-family: monospace;
    overflow: scroll;
}

.content {
    padding-top: 56px; /* 24 */
    /*padding-bottom: 47px;*/
    min-height: 100vh;
}

.highlight-background {
    background-color: var(--color-highlight-02);
}

.highlight-dark-background {
    background-color: var(--color-highlight-05);
}

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

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

.button {
    padding: 6px 8px;
    background-color: var(--secondary-light-color);
    /*-webkit-box-shadow: 0 1px 3px var(--box-shadow);*/
    /*box-shadow: 0 1px 3px var(--box-shadow);*/
    line-height: 1.5;
    color: inherit;
    font-weight: 400;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    transition-property: border,background,color;
    transition-duration: .05s;
    transition-timing-function: ease-in-out;
}

.button:disabled,
.button:disabled:hover {
    color: var(--color-secondary-dark);
    cursor: default;
}

.button--left {
    border-radius: .25rem 0 0 .25rem;
}

.button--middel {
    border-radius: 0;
    border-left: 1px solid rgb(128, 128, 128);
    border-right: 1px solid rgb(128, 128, 128);
}

.button--right {
    border-radius: 0 .25rem .25rem 0;
}

.button--small {
    padding: calc(var(--space-xxs) + 2px);
}

.button--large {
    padding: var(--space-sm) var(--space-md);
}

.button--inline {
    padding: 4px 8px;
}

.button--block {
    display: block;
}

a.button {
    color: var(--dark-color);

    &:hover {
        text-decoration: none;
    }
}

.button:not(.button--transparent):not(.button--danger):not(.button--succes):not(.button--primary):not(:disabled):hover,
a.button:not(.button--transparent):not(.button--danger):not(.button--succes):not(.button--primary):not(:disabled):hover {
    background: var(--secondary-color);
    text-decoration: none;
}

.button--primary,
a.button--primary {
    background-color: var(--color-primary);
    color: var(--color-light);
    border-color: var(--color-primary-light);
    /*-webkit-box-shadow: 0 1px 3px var(--box-shadow);*/
    /*box-shadow: 0 1px 3px var(--box-shadow);*/
    text-shadow: 1px 1px rgb(0 0 0 / 13%);
}

.button--primary:not(.button--transparent):not(:disabled):hover,
a.button--primary:not(.button--transparent):not(:disabled):hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: var(--color-light);
}

.button--primary:disabled {
    color: var(--color-secondary-light);
    background-color: var(--color-primary-light);
}

.button--primary:not(.button--transparent):disabled:hover {
    color: var(--secondary-light-color);
    border-color: var(--color-primary-light);
}

.button--secondary,
a.button--secondary {
    background-color: var(--secondary-light-color);
    color: var(--secondary-text-color);
}

.button--secondary:not(.button--transparent, :disabled):hover,
a.button--secondary:not(.button--transparent, :disabled):hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

.button--secondary:not(.button--transparent):disabled:hover {
    background-color: var(--secondary-light-color);
    border-color: transparent;
}

.button--light {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.button--light:not(:disabled):hover {
    background-color: rgb(226, 230, 234);
    border-color: rgb(218, 224, 229);
}

.button--danger:not(.button--icon) {
    background: var(--color-danger);
    border-color: var(--color-danger-light);
    color: var(--color-white);
}

.button--danger:disabled:hover {
    color: var(--color-white);
}

.button--danger:not(:disabled):hover,
a.button--danger:hover {
    background: var(--color-danger-dark);
    border-color: var(--color-danger);
    color: var(--color-white);
}

.button--succes:not(.button--icon) {
    background: var(--color-success);
    border-color: var(--color-success-light);
    color: var(--color-white);
}


.button--succes:disabled:hover {
    color: var(--color-white);
}

.button--succes:hover {
    background: var(--color-success-dark);
    border-color: var(--color-success);
    color: var(--color-white);
}

.button--succes:not(:disabled):hover,
a.button--succes:hover {
    background: var(--color-success-dark);
    border-color: var(--color-success);
    color: var(--color-white);
}

.button--transparent {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.button--icon {
    padding: 4px;
    width: 34px;
    height: 34px;
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.5;
    border-radius: 50%;
}

.button--icon:not(.button--transparent):not(.button--danger):hover {
    color: var(--dark-color);
}

.button--small.button--icon {
    width: 32px;
    height: 32px;
    font-size: .8em;
}

.button--no-padding {
    padding: 0;
}

.image-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__title {
    margin: 0;
    padding: 4px 0 4px 0;
    font-family: 'Geogrotesque', Arial;
    font-size: var(--text-xxl);
    font-weight: 400;
    color: var(--dark-color);
}

.info__description {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid var(--color-secondary);
    border-left-width: 4px;
    padding: 20px 20px 20px 44px;
    background: var(--color-secondary-light);
}

.info__description:before {
    content: "\f05a";
    position: absolute;
    left: 20px;
    line-height: 1;
    font-weight: 900;
    color: var(--secondary-dark-color);
    font-family: "Icon";
}

.warning__description {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid var(--secondary-color);
    padding: 20px 20px 20px 44px;
}

.warning__description:before {
    content: "\f024";
    color: var(--color-warning-dark, rgb(255, 193, 7));
    position: absolute;
    left: 20px;
    line-height: 1;
    font-weight: 900;
    font-family: "Icon";
}

.succes__description {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid var(--secondary-color);
    padding: 20px 20px 20px 44px;
}

.succes__description:before {
    content: "\f00c";
    color: var(--color-success);
    position: absolute;
    left: 20px;
    line-height: 1;
    font-weight: 900;
    font-family: "Icon";
}

.modal__template {
    display: none;
    visibility: hidden;
}

.link--primary,
a.link--primary {
    color: var(--color-primary);
}

.link--simple,
a.link--simple {
    border-bottom: 1px solid rgb(128, 128, 128);
}

.text-sm {
    font-size: var(--text-sm, 0.833em);
}

.text-xs {
    font-size: var(--text-xs, 0.694em);
}

.text-title {
    font-size: var(--text-lg, 1.5em);
    font-weight: normal;
}

h4.text-title {
    margin-bottom: var(--space-sm);
}

.text-description {
    font-size: .9em;
    color: var(--color-grey);
}

.sub-menu {
    padding: var(--space-sm) 0;
    font-size: .85em;
    line-height: initial;
    color: var(--color-submenu);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
    border-radius: 4px;

    & ul {
        margin: 0;
        padding: 0;
    }

    & li {
        padding: var(--space-xs) var(--space-sm);

        &:hover {
            background: var(--color-submenu-border-04);
        }


        &.separator-before {
            position: relative;
            margin-bottom: var(--space-md);

            &:after {
                content: "";
                position: absolute;
                display: block;
                bottom: var(--space-xs-negative);
                left: 0;
                width: 100%;
                height: 1px;
                background: var(--color-submenu-border);
            }
        }

        &.separator-after {
            margin-top: var(--space-sm);
        }
    }

    & a,
    & .link {
        color: inherit;
        text-decoration: none;
    }

    & .icon {
        margin-right: var(--space-xs);
        width: 12px;
        height: 12px;
    }
}

.scrollbar {
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--scrollbar-neutral-hovered, #091e4224) var(--scrollbar-neutral, #091e420f);
    scrollbar-width: thin;
}

.box-shadow {
    -moz-box-shadow: var(--box-shadow);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}