:root {
    interpolate-size: allow-keywords;

    --dark-gray: #76767C;
    --gray: #DBDBDB;
    --light-gray: #EFEFEF;
    --white-pure: #FFF;
    --white: #F6F6F6;
    --black: #000;
    --navy: #3E4077;
    --blue: #7681FF;
    --error: #DD211B;
    --vdp-hover-bg-color: var(--blue);
    --vdp-selected-bg-color: var(--blue);

    --p2: clamp(1px, 0.2vw, 2px);
    --p3: clamp(2px, 0.3vw, 3px);
    --p4: clamp(2px, 0.4vw, 4px);
    --p5: clamp(3px, 0.5vw, 5px);
    --p6: clamp(3px, 0.6vw, 6px);
    --p10: clamp(5px, 1vw, 10px);
    --p15: clamp(8px, 1.5vw, 15px);
    --p20: clamp(10px, 2vw, 20px);
    --p30: clamp(15px, 3vw, 30px);
    --p50: clamp(25px, 5vw, 50px);
    --p40: clamp(20px, 4vw, 40px);
    --p80: clamp(40px, 8vw, 80px);
    --p120: clamp(60px, 12vw, 120px);

    --f11: clamp(8px, 1.1vw, 11px);
    --f13: clamp(9px, 1.3vw, 13px);
    --f14: clamp(10px, 1.4vw, 14px);
    --f15: clamp(11px, 1.5vw, 15px);
    --f16: clamp(12px, 1.6vw, 16px);
    --f18: clamp(14px, 1.8vw, 18px);
    --f20: clamp(15px, 2.0vw, 20px);
    --f24: clamp(18px, 2.4vw, 24px);
    --f28: clamp(21px, 2.8vw, 28px);
    --f32: clamp(24px, 3.2vw, 32px);
    --f36: clamp(27px, 3.6vw, 36px);
    --f40: clamp(30px, 4vw, 40px);
    --f45: clamp(33px, 4.5vw, 45px);
    --f50: clamp(38px, 5vw, 50px);
    --f55: clamp(41px, 5.5vw, 55px);
    --f60: clamp(45px, 6vw, 60px);

    --overlay: rgb(from var(--navy) r g b / 0.6);
    --primary-text: var(--black);
    --secondary-text: var(--dark-gray);
    --accent: var(--blue);
    --background: var(--light-gray);
    --placeholder: #77809A;
    --header: var(--navy);
    --ava: var(--navy);
    --link: var(--navy);
    --linka: var(--blue);
    --button: var(--navy);
    --buttona: var(--blue);
    --info: var(--blue);

    --border: #D9DADE;
    --big-radius: clamp(10px, 2vw, 20px);
    --radius: clamp(5px, 1vw, 10px);
    --small-radius: clamp(2px, .5vw, 5px);

    --appear: toTop .6s cubic-bezier(.165, .84, .44, 1) forwards;
    --head-padding_top: 0;
    --scroll-padding-top: 0;
    --transition: all .25s ease-in-out;
    --transition-out: all .5s ease-in-out;

    --min-width: 1366px;
}

* {
    scrollbar-color: var(--link) var(--linka);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    overflow: visible;
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-track {
    background: var(--linka);
    background-clip: padding-box;
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background: var(--link);
    background-clip: padding-box;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:horizontal {
    background: var(--link);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background: var(--linka);
}

::selection {
    color: var(--white);
    background-color: var(--link);
}

::-webkit-datetime-edit {
    margin: 0;
    padding: 0;
}

::-webkit-datetime-edit-fields-wrapper {
    margin: 0;
    padding: 0;
}

::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
    margin: 0;
    padding: 0;
}

::-webkit-inner-spin-button {
    display: none;
    margin: 0;
    padding: 0;
}

::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 5%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

input, textarea {
    caret-color: var(--accent);
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
    position: relative;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 0;
    overflow: hidden;

    &::before, &::after {
        box-sizing: inherit;
        transition: inherit;
    }

    &:focus {
        outline: 0;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        -webkit-tap-highlight-color: transparent;
    }
}

ul, ol {
    list-style-position: outside;
    padding-left: var(--p20);
}

table, th, td {
    border: 1px solid var(--border);
    padding: 0;
    border-collapse: collapse;
}

th, td {
    vertical-align: top;
    padding: var(--p2) var(--p5);
}

p {
    padding: 0 0 var(--p10) 0;
}

a {
    color: var(--link);
    text-decoration: none;
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);

    &:not(.button):hover {
        color: var(--linka);
        text-decoration: none;
    }
}

img {
    max-width: 100%;
    height: auto;
}

sub {
    vertical-align: sub;
}

blockquote {
    padding-left: var(--p40);
}

input, textarea, select, option, button {
    font-family: inherit;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

@font-face {
    font-family: 'site_hdr';
    src: url('/fonts/manrope/Manrope-Bold.eot');
    src: url('/fonts/manrope/Manrope-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/manrope/Manrope-Bold.woff2') format('woff2'),
    url('/fonts/manrope/Manrope-Bold.woff') format('woff'),
    url('/fonts/manrope/Manrope-Bold.svg#Manrope-Bold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'site_font';
    src: url('/fonts/manrope/Manrope-Medium.eot');
    src: url('/fonts/manrope/Manrope-Medium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/manrope/Manrope-Medium.woff2') format('woff2'),
    url('/fonts/manrope/Manrope-Medium.woff') format('woff'),
    url('/fonts/manrope/Manrope-Medium.svg#Manrope-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'site_thin';
    src: url('/fonts/inter/Inter-Medium.eot');
    src: url('/fonts/inter/Inter-Medium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/inter/Inter-Medium.woff2') format('woff2'),
    url('/fonts/inter/Inter-Medium.woff') format('woff'),
    url('/fonts/inter/Inter-Medium.svg#Inter-Medium') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


html {
    min-height: 100dvh;
    color: var(--primary-text);
    font: var(--f16) 'site_font', Arial, Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    -webkit-text-size-adjust: none;
    scroll-behavior: smooth;
    /*scrollbar-gutter: stable;*/
    scroll-padding-top: var(--scroll-padding-top);
}

body {
    background: var(--background);
    color: var(--primary-text);
    margin: 0;
    min-height: 100dvh;
    -webkit-text-size-adjust: none;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-wrap: pretty;
    overscroll-behavior: none;
}


#app {
    min-height: 100dvh;
}

h1 {
    font-family: "site_hdr";
    font-size: var(--f32);
    color: var(--header);
    margin-bottom: var(--p10);
    svg {
        pointer-events: none;
        width: var(--f32);
        height: var(--f32 );
        margin-top: var(--p3);
    }
}

h2 {
    font-family: "site_hdr";
    font-size: var(--f24);
    color: var(--header);
}

.control {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--p10) var(--p20);
    transition: var(--transition);

    input, textarea {
        background: transparent;
        width: 100%;
        font-family: 'site_thin';
        font-size: var(--f15);
        padding: var(--p5) 0;

        &::placeholder {
            color: var(--placeholder);
            font-family: 'site_thin';
            font-size: var(--f15);
            letter-spacing: 0;
        }
    }

    label {
        color: var(--placeholder);
        transition: var(--transition);
        font-family: 'site_thin';
        font-size: var(--f15);
        letter-spacing: 0;

        .control .control & {
            color: var(--primary-text);
        }
    }

    &:has(input:focus, textarea:focus) {
        border-color: var(--accent);

        label {
            color: var(--accent);
        }
    }
}

.buttons {
    display: flex;
    flex-flow: row wrap;
    row-gap: var(--p10);
    column-gap: var(--p20);
    justify-content: space-between;
}

button, .button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--p5);
    background: var(--link);
    color: var(--white);
    padding: var(--p10) var(--p30);
    text-align: center;
    font-family: 'site_thin';
    font-size: var(--f15);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    min-width: fit-content;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    span {
        display: inline-block;
        min-width: fit-content;
    }

    &:hover, &.active {
        background: var(--accent);
    }

    &:disabled {
        background: var(--dark-gray);
        cursor: not-allowed;
    }

    svg {
        pointer-events: none;
        flex: 0 0 var(--f20);
        width: var(--f20);
        height: var(--f20);
    }
}

.radiobox {
    padding: var(--p5) 0;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--p10);

    .keywords {
        display: block;
        color: var(--primary-text);
        font-size: var(--f14);
    }

    svg {
        pointer-events: none;
        width: var(--f20);
        height: var(--f20);
    }
}

.cb {
    width: fit-content;
    display: flex;
    align-items: center;

    label {
        display: flex;
        gap: var(--p10);
        padding: 0;
        font-size: var(--f16);
        cursor: pointer;
        position: relative;
        pointer-events: initial;
        top: 0;
        left: 0;
        color: var(--placeholder);
        transition: var(--transition);

        input {
            width: var(--f36);
            height: var(--f20);
            border-radius: var(--p20);
            background: var(--link);
            transition: var(--transition);
            cursor: pointer;

            &:after {
                content: '';
                position: absolute;
                left: var(--p2);
                top: 50%;
                transform: translateY(-50%);
                width: var(--f16);
                aspect-ratio: 1;
                border-radius: 50%;
                background: var(--white);
                transition: var(--transition);
            }

            &:checked {
                background: var(--linka);

                &:after {
                    left: calc(var(--f36) + var(--p2) - var(--f20));
                    @media (width < 768px) {
                        /*left: calc(var(--f28) + (2 * var(--p2)) - var(--f16));*/
                    }
                }
            }
        }
    }

    &:hover {
        label {
            color: var(--linka);
        }

        input {
            &:checked {
                background: var(--linka);
            }
        }
    }
}

.date_picker {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--p20);
    width: fit-content;
    overflow: initial;

    @media (width < 540px) {
        flex-flow: row wrap;
        row-gap: var(--p4);
    }

    label {
        color: var(--placeholder);
        font-family: 'site_thin';
        font-size: var(--f15);
        white-space: nowrap;
        letter-spacing: 0;
        transition: var(--transition);
        @media (width < 540px) {
            flex: 0 0 100%;
        }
    }

    .date {
        cursor: pointer;
        width: calc(clamp(60px, 8vw, 80px) + var(--f28));
        overflow: initial;
        .v3dp__datepicker {
            overflow: initial;
            .v3dp__input_wrapper {
                overflow: initial;
            }
        }

        input {
            padding: 0;
            color: var(--linka);
            top: 50%;
        }

        & > svg {
            position: absolute;
            right: 0;
            top: 50%;
            width: var(--f20);
            height: var(--f20);
            transform: translateY(-50%);
            color: var(--navy);
            pointer-events: none;
        }

        &:hover {
            & > svg {
                color: var(--accent);
            }
        }
    }
}

.dp_menu {
    z-index: 100;
}

.v3dp__heading__button {
    .v3dp__heading__button__left,
    .v3dp__heading__button__right {

    }
}

.tabs {
    gap: var(--p20);
    max-height: 100vh;

    .tabs-header {
        overflow: initial;

        &:hover {
            border-color: var(--accent);
        }

        &.buttons {
            justify-content: flex-start;
        }
    }

    .tabs-body {
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: var(--p2);
        padding-right: var(--p10);
    }

    .tabs-body-item {
        display: flex;
        flex-flow: column nowrap;
        gap: var(--p10);

        button {
            /*align-self: flex-end;*/
        }
    }
}