:root {
    --header-height: @header-height;
    --header-index: 1000;

    @media @max-sm {
        --header-height: @header-height-sm;
    }
}

body {
    background: @color-background;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &.scroll-lock {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

#wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: inherit;

    #header, #footer {
        flex-shrink: 0;
        flex-grow: 0;
    }

    main#content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-shrink: 0;
        flex-grow: 1;
        position: relative;
        padding-top: var(--header-height);

        > .container {
            width: 100%;
        }
    }
}

.fcnmt {
    >*:first-child {
        margin-top: 0;
    }
}

.lcnmb {
    >*:last-child {
        margin-bottom: 0;
    }
}

.cnm {
    .fcnmt;
    .lcnmb;
}

.relative {
    position: relative;
}

.z-index {
    z-index: 1;
}

.no-underline {
    text-decoration: none;
}

.shadow {
    .box-shadow(@box-shadow);
}

.link {
    .transition(all 200ms ease-in);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: @color-main;

    >i:first-child {
        margin-right: 10px;
    }

    >i:last-child {
        margin-left: 10px;
    }

    > i {
        color: @color-main;
    }

    &:hover {
        color: @color-black;
    }
}

.link-arrow {
    &:after {
        .far;
        content: @fa-var-long-arrow-right;
        margin-left: 10px;
        color: @color-main;
    }
}

.user-content {
    .cnm;

    a:not([class]) {
        color: @color-main;
        text-decoration: underline;
    }

    p + figure, > picture, iframe {
        margin-top: @text-margin !important;
    }

    h6 {
        .upper;
        font-weight: 400;
    }

    &:not([class*="list"]) ul:not([class]) {
        .arrow-list;
    }

    ol:not([class]) {
        .vertical-list;
        counter-reset: custom-counter;

        > ul,
        &:not(:first-child) {
            margin-top: 10px;
        }

        li {
            counter-increment: custom-counter;
            position: relative;

            &:before {
                content: counter(custom-counter) ".";
                width: 20px;
                display: inline-block;
                font-weight: 600;
            }
        }
    }

    table:not(.bordered):not(.striped) {
        .table-bordered;
        .table-striped;

        thead {
            td, th {
                background: @table-background-head;
                border: none;
                color: @table-color-head;
            }
        }
    }
}

.grecaptcha-badge,
.grecaptcha-logo {
    display: none !important;
}

[data-cookies-consented="0"][data-cookies-static] .framework-cookies-consent-wrapper {
    min-height: 350px;
}

img {
    vertical-align: middle;
}

a {
    .transition(@transition);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    > a {
        .transition(@transition);
        text-decoration: none;
        font-size: @font-size;
        color: @color-text;
        background: transparent;
        display: inline-flex;
        align-items: center;
        border: 1px solid @color-yellow;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        line-height: 46px;
        padding-left: 18px;
        margin: 0 2px;

        &.hellip {
            color: @color-main !important;
            cursor: default !important;
        }

        &.active {
            background-color: @color-yellow;
        }

        &:hover {
            text-decoration: underline;
        }

        &.nextbutton, &.prevbutton {
            margin-left: 10px;
            font-size: 0.001em;
            background: transparent;
            color: inherit;
            display: inline-flex;
            align-items: center;
            padding-top: 2px;
            padding-left: 12px;
            border: 1px solid @color-blue;

            &:before {
                .transition(@transition);
                .far;
                content: @fa-var-angle-right;
                width: 48px;
                height: 48px;
                line-height: 46px;
                border-radius: 50%;
                margin-right: 12px;
                vertical-align: middle;
                margin-top: -12px;
                margin-bottom: -12px;
                font-size: @font-size;
                text-align: center;
            }

            &:hover {
                text-decoration: none;
                color: @color-white;
                background-color: @color-blue;
            }
        }

        &.nextbutton {
            margin-right: 0;
            margin-left: 15px;
        }

        &.prevbutton {
            margin-right: 15px;
            margin-left:0;

            &:before {
                content: @fa-var-angle-left;
            }
        }

        &:hover {
            background-color: @color-yellow;
        }
    }
}

.hidden-scrollbars {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

.header-offset {
    padding-top: var(--header-height) !important;
}

.header-offset-sm {
    @media @max-sm {
        padding-top: var(--header-height) !important;
    }
}

.bg {
    position: absolute;
    top: 0;
    left:0;
    height: 100%;
    width: 100vw;
    z-index: -1;
}

.bg-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    z-index: -1;
    overflow: hidden;
}

.bg-gradient-blue {
    background: linear-gradient(@color-blue-light 0%, @color-white 100%);
}

.bg-gradient-lr {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}

.bg-gradient-blue-left {
    .bg-gradient-lr;

    &:before {
        background: linear-gradient(to right, @color-main 0%, fade(@color-main, 0%) 70%);
    }
}

.bg-gradient-blue-right {
    .bg-gradient-lr;

    &:before {
        background: linear-gradient(to left, @color-main 0%, fade(@color-main, 0%) 100%);
    }
}

.bg-gradient-blue-top {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: fade(@color-main, 30%);
    }
}

.bg-gradient-blue-bottom {
    &:after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(to top, fade(@color-main, 70%) 0%, fade(@color-main, 0%) 80%);
    }
}

.ooc {
    margin-left: ~"calc((100vw - 100%) / -2)" !important;
    margin-right: ~"calc((100vw - 100%) / -2)" !important;
}

.buttons-row {
    display: flex;
    align-items: center;
    gap: 15px;

    @media @max-sm {
        flex-direction: column;
    }
}

.image-grayscale {
    filter: brightness(25%);
}

.breadcrumbs {
    ol {
        display: flex;
        align-items: center;

        li {
            .transition(@transition);
            text-transform: uppercase;
            font-size: @heading-font-size-6;

            &:not(:last-child):after {
                content: '>';
                margin: 0 10px;
            }

            a {
                color: @color-main !important;
                text-decoration: none !important;
            }
        }
    }
}

.flex-row-reverse-sm {
    @media @max-sm {
        flex-direction: row-reverse;
    }
}

.flex-md-align-left {
    @media @max-md {
        align-items: flex-start;;
    }
}

.rounded {
    border-radius: @border-radius;
}

.of-visible {
    overflow: visible !important;
}

.gap-50 {
    gap: 50px;
}

.gap-30 {
    gap: 30px;
}

.gap-20 {
    gap: 20px;
}

.gap-15 {
    gap: 15px;
}

.gap-20-sm {
    @media @max-sm {
        gap: 20px;
    }
}

.gap-10-sm {
    @media @max-sm {
        gap: 10px;
    }
}

.max-width {
    max-width: 450px;
}

.socials-menu {
    li > a {
        > span {
            display: none;
        }
    }

    &-rounded {
        li > a > {
            &:hover {
                i {
                    transform: scale(0.9);
                }
            }

            > i {
                .transition(@transition);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: @color-white;
                color: @color-blue;
                font-size: @font-size-big;
                border-radius: 50%;
            }
        }
    }
}

.sticky-top {
    position: sticky;
    top: ~"calc(var(--header-height) + @{grid-spacing})";
}

.color-white-childs {
    > * {
        color: @color-white;
    }
}

.underline-hover {
    &:hover {
        text-decoration: underline;
    }
}

.user-select-none {
    user-select: none;
}

.pointer-events-none {
    pointer-events: none;
}