@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
    --title-h1: 900 max(36px, min(6.4vw, 72px))/1.2 "Nunito Sans", sans-serif;
    --title-h2: 900 max(30px, min(5.4vw, 64px))/1.2 "Nunito Sans", sans-serif;
    --title-h3: 900 max(24px, min(4.1vw, 48px))/1.3 "Nunito Sans", sans-serif;
    --title-h4: 900 max(20px, min(3vw, 36px))/1.2 "Nunito Sans", sans-serif;
    --subtitle-lg-bold: 700 max(16px, min(2.3vw, 20px))/1.5 "Nunito Sans", sans-serif;
    --subtitle-lg-medium: 500 max(16px, min(2.3vw, 20px))/1.5 "Nunito Sans", sans-serif;
    --subtitle-sm-bold: 700 max(14px, min(2vw, 18px))/1.7 "Nunito Sans", sans-serif;
    --subtitle-sm-medium: 500 max(14px, min(2vw, 18px))/1.7 "Nunito Sans", sans-serif;
    --body-text-semibold: 800 max(14px, min(1.7vw, 16px))/1.5 "Nunito Sans", sans-serif;
    --body-text-medium: 700 max(14px, min(1.7vw, 16px))/1.5 "Nunito Sans", sans-serif;
    --caption-text: 400 max(12px, min(1.5vw, 14px))/1.5 "Nunito Sans", sans-serif;
    --caption-text-semibold: 700 max(12px, min(1.5vw, 14px))/1.5 "Nunito Sans", sans-serif;
    --btn-text: 700 max(16px, min(2.3vw, 20px))/1.3 "Nunito Sans", sans-serif;
    --btn-text-semibold: 600 max(16px, min(1.5vw, 20px))/1.5 "Nunito Sans", sans-serif;
    --link-lg-text: 700 max(18px, min(2.6vw, 24px))/1.25 "Nunito Sans", sans-serif;
    --link-sm-text: 700 max(12px, min(1.5vw, 14px))/1.4 "Nunito Sans", sans-serif;

    --border-radius-main: 4px;
    --border-radius-round: 50%;
    --color-black: 30, 31, 34;
    --color-main-100: 42, 43, 48;
    --color-main-90: 62, 63, 69;
    --color-main-80: 84, 86, 95;
    --color-main-70: 106, 108, 119;
    --color-main-60: 134, 136, 147;
    --color-main-50: 155, 156, 166;
    --color-main-40: 174, 175, 183;
    --color-main-25: 204, 204, 209;
    --color-main-15: 224, 224, 227;
    --color-main-10: 240, 240, 242;
    --color-main-5: 246, 247, 247;
    --color-white: 255, 255, 255;
    --color-red-soft: 252, 206, 209;
    --color-red-light: 250, 158, 163;
    --color-red: 255, 100, 108;
    --color-red-bright: 255, 0, 0;
    --color-red-faint: 204, 51, 59;
    --color-red-dark: 124, 3, 9;
    --color-orange: 255, 143, 0;
    --color-orange-dark: 153, 86, 0;
    --color-orange-faint: 209, 148, 71;
    --color-orange-bright: 255, 119, 0;
    --color-orange-light: 255, 188, 102;
    --color-orange-soft: 255, 233, 204;
    --color-yellow: 255, 221, 60;
    --color-yellow-dark: 147, 123, 16;
    --color-yellow-faint: 250, 200, 26;
    --color-yellow-bright: 255, 245, 51;
    --color-yellow-light: 255, 239, 163;
    --color-yellow-soft: 255, 248, 214;
    --color-green: 20, 198, 121;
    --color-green-dark: 11, 107, 65;
    --color-green-faint: 64, 156, 116;
    --color-green-bright: 1, 255, 0;
    --color-green-light: 102, 219, 168;
    --color-green-soft: 185, 238, 215;
    --color-cyan: 72, 230, 230;
    --color-cyan-dark: 25, 138, 148;
    --color-cyan-faint: 79, 173, 181;
    --color-cyan-bright: 0, 255, 255;
    --color-cyan-light: 161, 242, 242;
    --color-cyan-soft: 210, 249, 249;
    --color-blue: 12, 121, 248;
    --color-blue-dark: 4, 73, 154;
    --color-blue-faint: 93, 139, 192;
    --color-blue-bright: 0, 0, 255;
    --color-blue-light: 111, 176, 251;
    --color-blue-soft: 210, 230, 254;
    --color-violet: 128, 52, 194;
    --color-violet-dark: 74, 30, 113;
    --color-violet-faint: 119, 88, 147;
    --color-violet-bright: 136, 0, 255;
    --color-violet-light: 177, 126, 220;
    --color-violet-soft: 226, 207, 242;
    --color-pink: 247, 110, 242;
    --color-pink-dark: 115, 38, 112;
    --color-pink-faint: 153, 51, 149;
    --color-pink-bright: 255, 0, 245;
    --color-pink-light: 255, 173, 252;
    --color-pink-soft: 249, 231, 248;
    --color-main-8: 240, 240, 242;
    --color-main-4: 246, 247, 247;
    --height-xs-xl: 1px;
    --height-sm-3xs: 2px;
    --height-sm-2xs: 4px;
    --height-sm-xs: 6px;
    --height-sm-s: 8px;
    --height-sm-sm: 10px;
    --height-sm-m: 12px;
    --height-sm-ml: 14px;
    --height-sm-l: 16px;
    --height-sm-xl: 18px;
    --height-sm-2xl: 20px;
    --height-md-2xs: 24px;
    --height-md-xs: 28px;
    --height-md-s: 32px;
    --height-md-m: 36px;
    --height-md-l: 40px;
    --height-md-xl: 44px;
    --height-md-2xl: 48px;
    --height-lg-xs: 52px;
    --height-lg-s: 56px;
    --height-lg-m: 60px;
    --height-lg-l: 64px;
    --height-lg-xl: 68px;
    --height-lg-2xl: 72px;
    --height-lg-3xl: 76px;
    --height-xl-2xs: 80px;
    --height-xl-xs: 84px;
    --height-xl-s: 88px;
    --height-xl-m: 92px;
    --height-xl-l: 96px;
    --height-xl-xl: 100px;
    --height-xl-2xl: 104px;
    --height-xl-3xl: 200px;
    --offset-sm-xxxs: 2px;
    --offset-sm-xxs: 4px;
    --offset-sm-xxxl: 24px;
    --offset-md-xxl: 48px;
    --offset-lg-xxl: 72px;
    --offset-lg-xxxl: 76px;
    --offset-sm-3xs: 2px;
    --offset-sm-2xs: 4px;
    --offset-sm-xs: 6px;
    --offset-sm-s: 8px;
    --offset-sm-sm: 10px;
    --offset-sm-m: 12px;
    --offset-sm-ml: 14px;
    --offset-sm-l: 16px;
    --offset-sm-xl: 18px;
    --offset-sm-xxl: 20px;
    --offset-md-2xs: 24px;
    --offset-md-xs: 28px;
    --offset-md-s: 32px;
    --offset-md-m: 36px;
    --offset-md-l: 40px;
    --offset-md-xl: 44px;
    --offset-md-2xl: 48px;
    --offset-lg-xs: 52px;
    --offset-lg-s: 56px;
    --offset-lg-m: 60px;
    --offset-lg-l: 64px;
    --offset-lg-xl: 68px;
    --offset-lg-2xl: 72px;
    --offset-lg-3xl: 76px;
    --cubic-ease-out: cubic-bezier(.215, .61, .355, 1);
    --cubic-ease-in: cubic-bezier(.55, .055, .675, .19);
    --cubic-ease-in-out: cubic-bezier(.645, .045, .355, 1);
    --transition-slowest: 1s;
    --transition-slower: .7s;
    --transition-slow: .5s;
    --transition-standart: .35s;
    --transition-medium: .3s;
    --transition-fast: .25s;
    --transition-faster: .2s;
    --transition-fastest: .15s;
    --width-sm-4xs: 1px;
    --width-sm-3xs: 2px;
    --width-sm-2xs: 4px;
    --width-sm-xs: 6px;
    --width-sm-s: 8px;
    --width-sm-sm: 10px;
    --width-sm-m: 12px;
    --width-sm-ml: 14px;
    --width-sm-l: 16px;
    --width-sm-xl: 18px;
    --width-sm-2xl: 20px;
    --width-md-2xs: 24px;
    --width-md-xs: 28px;
    --width-md-s: 32px;
    --width-md-m: 36px;
    --width-md-l: 40px;
    --width-md-xl: 44px;
    --width-md-2xl: 48px;
    --width-lg-xs: 52px;
    --width-lg-s: 56px;
    --width-lg-m: 60px;
    --width-lg-l: 64px;
    --width-lg-xl: 68px;
    --width-lg-2xl: 72px;
    --width-lg-3xl: 76px;
    --width-xl-2xs: 80px;
    --width-xl-xs: 84px;
    --width-xl-s: 88px;
    --width-xl-m: 92px;
    --width-xl-l: 96px;
    --width-xl-xl: 100px;
    --width-xl-2xl: 104px;
    --width-xl-3xl: 200px;
    --width-mobile-xs: 288px;
    --width-mobile-s: 512px;
    --width-tablet-s: 688px;
    --width-tablet-m: 944px;
    --width-laptop-l: 1104px;
    --width-desktop-xl: 1264px;
    --width-full: 100%;
    --zindex-bottom: -1000;
    --zindex-minus-50: -50;
    --zindex-0: 0;
    --zindex-1: 1;
    --zindex-2: 2;
    --zindex-3: 3;
    --zindex-4: 4;
    --zindex-5: 5;
    --zindex-6: 6;
    --zindex-7: 7;
    --zindex-8: 8;
    --zindex-9: 9;
    --zindex-10: 10;
    --zindex-50: 50;
    --zindex-100: 100;
    --zindex-150: 150;
    --zindex-200: 200;
    --zindex-250: 250;
    --zindex-300: 300;
    --zindex-350: 350;
    --zindex-400: 400;
    --zindex-450: 450;
    --zindex-500: 500;
    --zindex-1000: 1000;
    --zindex-1050: 1050;
    --zindex-top: 9999;
    --opacity-0: 0;
    --opacity-01: .01;
    --opacity-1: .1;
    --opacity-2: .2;
    --opacity-3: .3;
    --opacity-4: .4;
    --opacity-5: .5;
    --opacity-6: .6;
    --opacity-7: .7;
    --opacity-8: .8;
    --opacity-9: .8;
    --opacity-10: 1;
    --bg-blur-25: blur(2.5px);
    --bg-blur-50: blur(5px);
    --bg-blur-100: blur(10px);
    --border-width-xs: 1px;
    --border-width-s: 2px;
    --border-width-m: 3px;
    --border-width-l: 4px;
    --border-radius-xxs: 2px;
    --border-radius-xs: 4px;
    --border-radius-s: 6px;
    --border-radius-m: 8px;
    --border-radius-ml: 10px;
    --border-radius-l: 12px;
    --border-radius-xl: 14px;
    --border-radius-2xl: 16px;
    --border-radius-3xl: 18px;
    --border-radius-4xl: 20px;
    --black-xxl: 900 80px/88px "Nunito Sans", sans-serif;
    --black-xl: 900 40px/48px "Nunito Sans", sans-serif;
    --black-l: 900 32px/40px "Nunito Sans", sans-serif;
    --black-m: 900 24px/32px "Nunito Sans", sans-serif;
    --black-m-compact: 900 20px/24px "Nunito Sans", sans-serif;
    --black-s: 900 20px/28px "Nunito Sans", sans-serif;
    --black-xs: 900 16px/24px "Nunito Sans", sans-serif;
    --black-xs-compact: 900 16px/20px "Nunito Sans", sans-serif;
    --bold-xxl: 700 20px/28px "Nunito Sans", sans-serif;
    --bold-xxl-compact: 700 20px/24px "Nunito Sans", sans-serif;
    --bold-xl: 700 16px/24px "Nunito Sans", sans-serif;
    --bold-xl-compact: 700 16px/20px "Nunito Sans", sans-serif;
    --bold-l: 700 14px/20px "Nunito Sans", sans-serif;
    --bold-m: 700 12px/16px "Nunito Sans", sans-serif;
    --bold-s: 700 10px/12px "Nunito Sans", sans-serif;
    --regular-xl: 400 20px/28px "Nunito Sans", sans-serif;
    --regular-l: 400 16px/24px "Nunito Sans", sans-serif;
    --regular-m: 400 14px/20px "Nunito Sans", sans-serif;
    --regular-s: 400 12px/16px "Nunito Sans", sans-serif;
    --regular-xs: 400 10px/12px "Nunito Sans", sans-serif;

    --color-background-base: #1e1f22;
    --color-background-surface: #2a2b30;
    --color-background-secondary-surface: #3e3f45;
    --color-background-highlight: #54565f;
    --color-background-inverted: #fff;
    --color-background-accent-positive: #ffdd3c;
    --color-background-positive: #14c679;
    --color-background-warning: #ff8f00;
    --color-background-positive-rgb: 255, 221, 60;
    --color-background-accent-negative: #868893;
    --color-background-negative: #ff646c;
    --color-stroke-divider: #54565f;
    --color-stroke-active: #54565f;
    --color-stroke-secondary-active: #3e3f45;
    --color-stroke-highlight: #868893;
    --color-stroke-inactive: #2a2b30;
    --color-stroke-accent: #f6f7f7;
    --color-stroke-accent-color: #ffdd3c;
    --color-stroke-positive: #14c679;
    --color-stroke-warning: #ff8f00;
    --color-stroke-negative: #ff646c;
    --color-text-primary: #f6f7f7;
    --color-text-secondary: #868893;
    --color-text-inactive: #54565f;
    --color-text-inverted: #1e1f22;
    --color-text-button-primary: #1e1f22;
    --color-text-button-secondary: #f6f7f7;
    --color-text-button-inactive: #868893;
    --color-text-accent: #ffdd3c;
    --color-text-positive: #14c679;
    --color-text-warning: #ff8f00;
    --color-text-negative: #ff646c;
    --color-text-link: #6fb0fb;
    --color-icon-primary-active: #f6f7f7;
    --color-icon-primary-highlight: #aeafb7;
    --color-icon-primary-inactive: #54565f;
    --color-icon-secondary-active: #868893;
    --color-icon-secondary-highlight: #f6f7f7;
    --color-icon-secondary-inactive: #54565f;
    --color-icon-button-dark: #2a2b30;
    --color-icon-button-light: #fff;
    --color-icon-button-inactive: #868893;
    --color-icon-inverted: #2a2b30;
    --color-icon-primary-accent: #ffdd3c;
    --color-icon-positive: #14c679;
    --color-icon-negative: #ff646c;
    --color-icon-warning: #ff8f00;
    --color-icon-secondary-accent: #0c79f8;
    --color-button-negative-active: #ff646c;
    --color-button-negative-highlight: #fa9ea3;
    --color-button-negative-inactive: #7c0309;
    --color-button-primary-active: #ffdd3c;
    --color-button-primary-highlight: #ffefa3;
    --color-button-primary-inactive: #937b10;
    --color-button-positive-active: #14c679;
    --color-button-positive-highlight: #66dba8;
    --color-button-positive-inactive: #0b6b41;
    --color-button-secondary-active: #0c79f8;
    --color-button-secondary-highlight: #6fb0fb;
    --color-button-secondary-inactive: #04499a;
    --color-button-neutral-active: #54565f;
    --color-button-neutral-highlight: #6a6c77;
    --color-button-neutral-inactive: #1e1f22;
    --color-button-inverted: #f6f7f7;
    --color-control-active: #ffdd3c;
    --color-control-highlight: #ffefa3;
    --color-control-inactive: #54565f;
    --color-chart-yellow: #fff533;
    --color-chart-green: #01ff00;
    --color-chart-cyan: #0ff;
    --color-chart-violet: #80f;
    --color-chart-pink: #ff00f5;
    --color-chart-red: red;
    --color-chart-candle-red: #ff646c;
    --color-chart-candle-green: #14c679;
    --color-chart-candle-blue: #0c79f8;
    --color-chart-line: #0c79f8;
    --color-tournament-gradient: linear-gradient(0deg, #2a2b30 0%, rgba(42, 43, 48, .8) 30%, rgba(42, 43, 48, 0) 100%);
    --color-opacity-base: 30, 31, 34;
    --color-opacity-base-inverted: 255, 255, 255;
    --shadow-e1: 0 2px 6px rgba(0, 0, 0, .2);
    --shadow-e2: 0 4px 8px rgba(0, 0, 0, .2), 0px 8px 24px rgba(0, 0, 0, .3);
    --shadow-e3: 0 8px 16px rgba(0, 0, 0, .3), 0px 12px 32px rgba(0, 0, 0, .4);
}

:focus,
:hover,
:active {
    outline-offset: 0;
    outline: 0;
}

*,
:before,
:after {
    box-sizing: inherit;
}

p {
    margin: 0px;
}

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    color: #f6f7f7;
    font-family: "Nunito Sans", sans-serif;
}

ol,
ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
}

body {
    box-sizing: border-box;
    margin: 0px;
    background-color: #140717;
    color: #f6f7f7;
    font-family: "Nunito Sans", sans-serif;
}


.icon_secondary_active {
    color: #868893;
}

.icon_icon {
    fill: currentColor;
}

.icon_host {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: none;
    flex: none;
}

.button {
    --button-text-color: var(--color-text-button-primary);
    --button-disabled-text-color: var(--color-text-button-inactive);
    --button-radius: var(--border-radius-m);
    --button-blur: blur(0);
    font: var(--bold-xl-compact);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: top;
    border-radius: var(--button-radius);
    cursor: pointer;
    -webkit-transition: background-color var(--transition-fastest) var(--cubic-ease-out);
    transition: background-color var(--transition-fastest) var(--cubic-ease-out);
    background-color: var(--button-bg-color);
    -webkit-backdrop-filter: var(--button-blur);
    backdrop-filter: var(--button-blur);
    color: var(--button-text-color);
}

.button_primary {
    --button-bg-color: var(--color-button-primary-active);
    --button-hover-bg-color: var(--color-button-primary-highlight);
    --button-disabled-bg-color: var(--color-button-primary-inactive);
    --button-disabled-text-color: var(--color-text-inactive);
}

.button_primary:hover {
    background-color: var(--color-button-primary-highlight);
}

.button_stretch {
    width: var(--width-full);
}

.button_size_l {
    --button-radius: var(--border-radius-l);
    height: var(--height-lg-s);
}

.button_size_xl {
    --button-radius: var(--border-radius-l);
    height: var(--height-lg-l);
    font: var(--bold-xxl-compact);
}

.section .reg_btn {
    border-radius: var(--border-radius-l);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font: var(--subtitle-lg-bold);
    font-size: 14px;
}

.button_btn {
    position: relative;
    width: var(--width-full);
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 var(--offset-sm-xxl);
    border: none;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    text-transform: inherit;
}

.button_size_l .button_btn {
    padding: 0 var(--offset-md-2xs);
}

.button_size_xl .button_btn {
    padding: 0 var(--offset-md-l);
}

.button_btn .button_has_icon_start,
.button_btn .button_has_icon_end {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.button_size_l .button_has_icon_end,
.button_size_xl .button_has_icon_end {
    margin-left: var(--offset-sm-s);
}

.backdrop {
    --backdrop-opacity: 0.7;
    --backdrop-opacity: var(--opacity-0);
    --backdrop-blur: var(--bg-blur-50);
    --backdrop-bg-color: RGBA(var(--color-opacity-base), var(--backdrop-opacity));
    --backdrop-z-index: var(--zindex-300);
    position: fixed;
    z-index: var(--backdrop-z-index);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}

.backdrop.backdrop_active {
    display: block;
}

.backdrop .backdrop_backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--backdrop-bg-color);
    -webkit-backdrop-filter: var(--backdrop-blur);
    backdrop-filter: var(--backdrop-blur);
    -webkit-transition: background var(--transition-faster) var(--cubic-ease-out);
    transition: background var(--transition-faster) var(--cubic-ease-out);
}

.hide_scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide_scrollbar::-webkit-scrollbar {
    display: none;
}


@media (min-width: 768px) {
    .section .reg_btn {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .section .reg_btn {
        font-size: 20px;
    }
}

@-webkit-keyframes modal_fadeIn {
    0% {
        visibility: hidden;
        opacity: var(--opacity-0);
    }

    100% {
        visibility: visible;
        opacity: var(--opacity-10);
    }
}

@keyframes modal_fadeIn {
    0% {
        visibility: hidden;
        opacity: var(--opacity-0);
    }

    100% {
        visibility: visible;
        opacity: var(--opacity-10);
    }
}

@-webkit-keyframes modal_fadeOut {
    0% {
        visibility: visible;
        opacity: var(--opacity-10);
    }

    100% {
        visibility: hidden;
        opacity: var(--opacity-0);
    }
}

@keyframes modal_fadeOut {
    0% {
        visibility: visible;
        opacity: var(--opacity-10);
    }

    100% {
        visibility: hidden;
        opacity: var(--opacity-0);
    }
}

@-webkit-keyframes modal_bounceIn {
    0% {
        opacity: var(--opacity-0);
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }

    50% {
        opacity: var(--opacity-10);
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes modal_bounceIn {
    0% {
        opacity: var(--opacity-0);
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }

    50% {
        opacity: var(--opacity-10);
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes spinner_loadCircle {
    0% {
        stroke-dashoffset: 380%;
    }

    53.33% {
        stroke-dashoffset: 250%;
    }

    93.33% {
        stroke-dashoffset: 380%;
    }

    100% {
        stroke-dashoffset: 380%;
    }
}

@keyframes spinner_loadCircle {
    0% {
        stroke-dashoffset: 380%;
    }

    53.33% {
        stroke-dashoffset: 250%;
    }

    93.33% {
        stroke-dashoffset: 380%;
    }

    100% {
        stroke-dashoffset: 380%;
    }
}

@-webkit-keyframes spinner_rotateSvg {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    26.67% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    46.67% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    76.67% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    96.67% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes spinner_rotateSvg {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    26.67% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    46.67% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    76.67% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    96.67% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@-webkit-keyframes spinner_rotateSpinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner_rotateSpinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.preloader {
    background: var(--color-background-base);
    width: 100vw;
    height: 100vh;
    z-index: var(--zindex-1050);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
}

.preloader_box {
    min-width: 60px;
    min-height: 80px;
    display: block;
}

.preloader_sandbox {
    width: 60px;
    height: 80px;
    z-index: var(--zindex-1050);
    background-color: transparent;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.preloader_worm:nth-child(4),
.preloader_worm:nth-child(3),
.preloader_worm:nth-child(2),
.preloader_worm {
    width: 45px;
    height: 17px;
    position: absolute;
    top: 19px;
    right: 1px;
    transform: rotate(60deg);
}

.preloader_worm:nth-child(2) {
    top: auto;
    bottom: 19px;
    transform: rotate(120deg);
}

.preloader_worm:nth-child(3) {
    top: auto;
    bottom: 19px;
    left: 1px;
    right: auto;
    transform: rotate(240deg);
}

.preloader_worm:nth-child(4) {
    top: 19px;
    bottom: auto;
    left: 1px;
    right: auto;
    transform: rotate(300deg);
}

.preloader_worm:nth-child(4):before,
.preloader_worm:nth-child(3):before,
.preloader_worm:nth-child(2):before,
.preloader_worm:before {
    content: "";
    border-radius: var(--border-radius-m);
    width: 15px;
    height: 15px;
    opacity: var(--opacity-10);
    background-color: #ffdd3c;
    animation: 5s linear infinite preloader_crawlOdd;
    position: absolute;
    top: 0;
    left: 0
}

.preloader_box {
    min-width: 60px;
    min-height: 80px;
    display: block
}

.preloader_worm:nth-child(2):before {
    animation: 5s linear infinite preloader_crawlEven
}


.preloader_worm:nth-child(3):before {
    animation: 5s linear infinite preloader_crawlOdd
}

.preloader_worm:nth-child(4):before {
    animation: 5s linear infinite preloader_crawlEven
}

@keyframes preloader_crawlOdd {
    6.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    12.5% {
        width: 100%;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }

    31.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }

    31.26% {
        opacity: var(--opacity-0)
    }

    49.9% {
        opacity: var(--opacity-0)
    }

    50% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    56.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    62.5% {
        width: 100%;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    75% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }

    81.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }

    81.26% {
        opacity: var(--opacity-0)
    }

    to {
        opacity: var(--opacity-0)
    }
}

@keyframes preloader_crawlEven {
    0% {
        opacity: var(--opacity-0)
    }

    25% {
        opacity: var(--opacity-0)
    }

    31.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    37.5% {
        width: 100%;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    50% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }

    56.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }

    56.26% {
        opacity: var(--opacity-0)
    }

    74.9% {
        opacity: var(--opacity-0)
    }

    75% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    81.25% {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    87.5% {
        width: 100%;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: 0
    }

    to {
        width: 15px;
        height: 15px;
        opacity: var(--opacity-10);
        top: 0;
        left: calc(100% - 15px)
    }
}

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}