:root {
    --color-blue: #1EC9C3;
    --color-blue-transparent: #1ec9c333;
    --color-blue-half-transparent: #1ec9c383;
    --color-blue-penta-transparent: rgba(30, 201, 195, 0.20);
    --gradient-blue: linear-gradient(180deg, rgba(34, 201, 198, 1) 0%, rgba(34, 201, 198, 0) 100%);
    --gradient-blue-2: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 100%);
    --gradient-blue-svg: url(/public/img/button-active-gradient.svg);
    --color-blue-svg: url(/public/img/button-default-background.svg);

    --color-white: #ffffff;
    --color-white-half: rgba(255, 255, 255, 0.5);

    --color-red: #FD0130;
    --color-dark-red: #2D0008;

    --color-light-grey: #414141;

    --color-black: #010101;
    --color-black-penta: rgba(1, 1, 1, 0.2);
    --color-black-half: rgba(1, 1, 1, 0.5);
    --gradient-black-transparent: linear-gradient(30deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.5) 100%);
    --gradient-white-transparent: linear-gradient(30deg, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.5) 100%);
    --gradient-grey-transparent: linear-gradient(-30deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.5) 100%);
    --radial-gradient-blue-black: radial-gradient(circle, rgba(34, 201, 198, 1) 0%, rgba(13, 93, 92, 1) 66%, rgba(0, 0, 0, 1) 100%);


    --default-margin: 50px;
    --half-margin: 25px;
    --border-width: 3px;
    --border-radius: 10px;

    --default-padding: 20px;
}



* {

    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*:focus {
    outline: none !important;
}

form {
    margin-bottom: 1em;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    padding-left: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(1, 1, 1, 0.3);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-blue-half-transparent);
    border-radius: 10px;
    transition: all 0.15s ease-in-out;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-blue);
}

@media screen and (max-width: calc(1312px + 2em)) {
    :root {
        --default-margin: 16px;
        --border-width: 2px;
        --border-radius: 5px;
        --default-padding: 16px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    :root {
        --default-padding: 15px;
    }
}

html {
    scrollbar-gutter: stable;
}

body {
    color: var(--color-white);
    font-size: 25px;
    font-family: "Pragmatica";

    background-image: url(/public/img/background.webp);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat;
    margin: 0px;

    letter-spacing: 0px;
    overflow-x: hidden;
    pointer-events: none;
}

body * {
    pointer-events: all;
}

@media screen and (max-width: calc(1312px + 2em)) {
    body {
        font-size: 12px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    body {
        font-size: 12px;
    }
}

.hidden-desktop {
    display: none;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .hidden-tablet {
        display: none;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .hidden-mobile {
        display: none;
    }
}

.flex-right {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: var(--default-padding);
}

.flex-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.hover-tooltip {
    position: relative;
    cursor: pointer;
}

.hover-tooltip:hover>.hover-tooltip--content {
    z-index: 1000;
    opacity: 1;
}

.hover-tooltip>.hover-tooltip--content {
    position: absolute;
    top: calc(100% + 20px);
    right: 0px;
    max-width: 427px;
    width: max-content;
    padding: 15px;
    border-radius: var(--border-radius);
    transition: all 0.15s ease-in-out;
    z-index: -1000;
    opacity: 0;
}

.hover-tooltip--content.tooltip-blue {
    border: var(--border-width) solid var(--color-blue);
    background: var(--gradient-blue-2), var(--color-black);
    color: white;
}


@media screen and (max-width: calc(720px + 2em)) {
    .hover-tooltip>.hover-tooltip--content {
        position: fixed;
        top: 150px !important;
        left: 20px !important;
        box-sizing: border-box;
        width: calc(100% - 40px);
        -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
        -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
        box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
        border-width: 0px;
    }
}

.default-margin {
    margin-top: var(--default-margin);
    margin-bottom: var(--default-margin);
}

.default-margin-top {
    margin-top: var(--default-margin);
}

.default-margin-bottom {
    margin-bottom: var(--default-margin);
}

.half-margin {
    margin-top: var(--half-margin);
    margin-bottom: var(--half-margin);
}

.half-margin-top {
    margin-top: var(--half-margin);
}

.half-margin-bottom {
    margin-bottom: var(--half-margin);
}


.left-auto {
    margin-left: auto;
}

.right-auto {
    margin-right: auto;
}

.min-screen {
    min-height: calc(100vh - 150px);
    box-sizing: border-box;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .min-screen {
        margin-top: 32px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .min-screen {
        margin-top: 30px;
    }
}

@media screen and (min-width: calc(720px + 2em)) {
    .desctop--hide {
        display: none !important;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .mobile-double-margin-bottom {
        margin-bottom: calc(var(--default-margin) * 2);
    }
}

.button .arrow-back {
    width: 50px;
}

@media screen and (max-width: calc(720px + 2em)) {
    .button .arrow-back {
        width: 40px;
    }
}

.lb-shadow {
    /* 22C9C6 */
    -webkit-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);

    background-color: rgba(34, 201, 198, 0.16);
    border-radius: 10px;
}

.lb-shadow-small {
    -webkit-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);

    background-color: rgba(34, 201, 198, 0.1);
    border-radius: 10px;
}

.weight-medium {
    font-weight: 500;
}

.line-height-120 {
    line-height: 1.2em;
}

.spacing-5 {
    letter-spacing: 0.05em;
}

.container {
    max-width: 1312px;
    width: calc(100% - 2em);
    /* padding: 0px 1em; */
    /* box-sizing: border-box; */
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .container {
        max-width: 720px;
    }
}

.prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

select {
    outline: none;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
    padding: 0px 25px;
    padding-right: calc(25px + 15px + 25px);
    border: var(--border-width) solid var(--color-blue);
    background: url(/public/img/select-burger.webp) var(--color-blue-transparent);
    background-size: 15px 17px, 100% 100%;
    background-repeat: no-repeat;
    background-position: right 25px center, center center;
    height: 55px;
    font-size: 25px;
    font-weight: 500;
    color: var(--color-white);
    font-family: "Pragmatica";
    box-sizing: border-box;

    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;

    transition: all 0.15s ease-in-out;

    overflow: hidden;
    text-overflow: ellipsis;

}

select:hover {
    border-color: var(--color-white);
    background: url(/public/img/select-burger-white.webp) var(--color-blue-transparent);
    background-size: 15px 17px, 100% 100%;
    background-repeat: no-repeat;
    background-position: right 25px center, center center;
}

select.disabled {
    cursor: not-allowed;
    border-color: var(--color-red);
    background: url(/public/img/select-burger-white.webp) var(--color-dark-red);
    background-size: 15px 17px, 100% 100%;
    background-repeat: no-repeat;
    background-position: right 25px center, center center;
}

select>option {
    color: var(--color-black);
}

.autocomplete-input {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
}

.autocomplete-input>img {
    height: 55px;
    width: 55px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    cursor: pointer;
}

input.search,
input[type="text"],
textarea {
    height: 55px;
    box-sizing: border-box;
    width: 288px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background-color: var(--color-blue-transparent);
    font-size: 25px;
    font-weight: 500;
    padding: 15px 25px;
    outline: none;
    color: var(--color-white);
    transition: all 0.15s ease-in-out;
    font-family: "Pragmatica";
}

textarea {
    padding: 10px 15px;
}

input[type="text"]::placeholder,
textarea::placeholder {
    color: var(--color-blue);
    font-weight: 500;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    font-family: "Pragmatica";
}

input.search::placeholder {
    color: var(--color-blue);
    font-weight: 500;
    padding-left: 35px;
    background: url(/public/img/magnifier.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px 25px;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    font-family: "Pragmatica";
}

input.search:hover,
input.search:focus {
    border-color: var(--color-white);
}

input.search:hover::placeholder {
    filter: brightness(10);
}

input.search:focus::placeholder {
    filter: brightness(10);
    opacity: 1;
}


input[type="text"],
textarea {
    width: 100%;
}

input[type="text"]:hover,
input[type="text"]:focus {
    border-color: var(--color-white);
}

input[type="text"]:hover::placeholder {
    color: var(--color-white);
}

input[type="text"]:focus,
::placeholder {}

@media screen and (max-width: calc(1312px + 2em)) {
    input[type="text"] {
        font-size: 15px;
        line-height: 15px;
        padding: 10px 15px;
        border-radius: 5px;
        border-width: var(--border-width);
        height: 35px;
    }

    select {
        font-size: 15px;
        line-height: 15px;
        border-radius: 5px;
        border-width: var(--border-width);
        padding: 0px 15px;
        height: 35px;
        /* background: url(/public/img/select-burger.webp) var(--color-blue-transparent);
        background-size: 15px 17px, 100% 100%;
        background-repeat: no-repeat; */
        padding-right: calc(15px + 15px + 15px);
        background-position: right 15px center, center center;
    }

    select:hover {
        background-position: right 15px center, center center;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    /* input.search, input[type="text"], textarea{
        overflow: auto;
        scrollbar-width:none;
    }
    input.search::-webkit-scrollbar, input[type="text"]::-webkit-scrollbar, textarea::-webkit-scrollbar{
        width: 0px;
    } */
    input[type="text"],
    textarea {
        font-size: 12px;
        line-height: 15px;
        padding: 10px 15px;
        border-radius: 5px;
        border-width: var(--border-width);
        height: 45px;
        border-width: var(--border-width);
    }

    select {
        font-size: 15px;
        line-height: 15px;
        border-radius: 5px;
        border-width: var(--border-width);
        padding: 0px 15px;
        padding-right: calc(15px + 15px + 15px);
        height: 45px;
        /* background: url(/public/img/select-burger.webp) var(--color-blue-transparent);
        background-size: 15px 17px, 100% 100%;
        background-repeat: no-repeat; */
        background-position: right 15px center, center center;
    }

    select:hover {
        background-position: right 15px center, center center;
    }
}

a {
    color: var(--color-blue);
    text-decoration: none;
}

.button,
.checkbox {
    text-decoration: none;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */

    color: var(--color-blue);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-svg);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: all 0.15s ease-in-out;

    font-weight: 500;

    padding: 15px 22.5px;
    height: 55px;

    cursor: pointer;
    font-size: 25px;
    line-height: 19px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: fit-content;
    font-family: "Pragmatica";
    box-sizing: border-box;
}

.button.white {
    border-color: white;
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.button.white.disabled {
    border-color: rgba(255, 255, 255, 0.5);
    ;
    color: rgba(255, 255, 255, 0.5);
    ;
    background: rgba(255, 255, 255, 0.2);
}

.button.gray {}

.button.white:not(.disabled):hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.button::placeholder,
.checkbox::placeholder {
    line-height: 19px;
}

.checkbox {
    height: 71px;
    width: 71px;
    padding: 0px;
}

.button.disabled,
.checkbox.disabled {
    cursor: not-allowed;
}

.button.expired {
    cursor: default;
    background: rgba(65, 65, 65, 0.19) !important;
    color: #414141 !important;
    border-color: #414141 !important;
}

.button.unactive {
    border-color: #ffffff80 !important;
    background: #ffffff1a !important;
    color: #ffffff80 !important;
    cursor: not-allowed;
}

.button:not(.disabled):hover,
.checkbox:not(.disabled):hover,
.checkbox:not(.disabled):active {
    color: var(--color-white);
    border-color: var(--color-white);
    background: var(--color-blue-svg);
}

/* .button:not(.disabled):hover{
    color: var(--color-blue);
    border-color: var(--color-blue);
} */
.button:hover {
    border-color: white;
    color: white;
}

.button.hoverable-2 {}

.button.clickable:active {
    background: black var(--gradient-blue);
    border-color: var(--color-blue);
    color: white;
    transition: none;
}

.button img,
.checkbox img {
    transition: all 0.25s ease-in-out;
    height: 1em;
}

.button:not(.disabled):hover img,
.checkbox:not(.disabled):hover img,
.button:not(.disabled).active img,
.checkbox:not(.disabled).active img,
.button:not(.disabled):active img,
.checkbox:not(.disabled):active img {
    filter: brightness(10);
}

.button:not(.disabled).active,
.checkbox:not(.disabled).active,
.checkbox:not(.disabled):checked {
    color: var(--color-white);
    border-color: var(--color-blue);
    background: linear-gradient(180deg, #22C9C6 0%, rgba(34, 201, 198, 0) 100%);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: none;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .button {
        padding: 7px 12px;
        gap: 10px;
    }

    .button,
    .checkbox {
        border-width: var(--border-width);
        height: 35px;
        font-size: 15px;
        line-height: 15px;
        border-radius: 5px
    }

    .checkbox {
        height: 39px;
        width: 39px;
        padding: 0px;
    }

    .checkbox>img {
        height: 22px;
        width: 22px;
        object-fit: contain;
        object-position: center;
    }

    input.search {
        height: 35px;
        width: 173px;
        font-size: 15px;
        line-height: 15px;
        padding: 10px 15px;
        border-radius: 5px;
        border-width: var(--border-width);
    }

    input.search::placeholder {
        color: var(--color-blue);
        font-weight: 500;
        padding-left: 24px;
        background: url(/public/img/magnifier.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 16px 16px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .button {
        padding: 12px 12px;
        gap: 10px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .button,
    .checkbox,
    input.search {
        height: 45px;
    }
}

.align-left {
    text-align: left;
}

h1 {
    margin: 0px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 70px;
    line-height: 70px;
    /* letter-spacing: 7px; */

    font-family: "Pragmatica Extended";
}

h2 {
    margin: 0px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 30px;
    line-height: 30px;
    /* letter-spacing: 7px; */

    font-family: "Pragmatica Extended";
}

h3 {
    margin: 0px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 25px;
    line-height: 25px;
    /* letter-spacing: 7px; */

    font-family: "Pragmatica Extended";
}

h4 {
    margin: 0px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 22px;
    line-height: 22px;
    /* letter-spacing: 7px; */

    font-family: "Pragmatica Extended";
}

h5 {
    margin: 0px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
    /* letter-spacing: 7px; */

    font-family: "Pragmatica Extended";
}

p {
    margin: 0px;
    margin-top: 17px;
}

.fs-30 {
    font-size: 30px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    h1 {
        font-size: 40px;
        line-height: 40px;
    }

    h2 {
        font-size: 20px;
        line-height: 20px;
    }

    h3 {
        font-size: 15px;
        line-height: 15px;
    }

    h4 {
        font-size: 15px;
        line-height: 15px;
    }

    .fs-30 {
        font-size: 15px;
    }

    h5 {
        font-size: 10px;
        line-height: 10px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    h1 {
        font-size: 20px;
        line-height: 20px;
    }

    h2 {
        font-size: 20px;
        line-height: 20px;
    }

    h3 {
        font-size: 15px;
        line-height: 15px;
    }

    h4 {
        font-size: 15px;
        line-height: 15px;
    }

    .fs-30 {
        font-size: 12px;
    }

    p {
        margin-top: 5px;
    }
}

header {
    background-color: var(--color-black);
    position: relative;
    z-index: 99999;
}

header::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(30deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

@media screen and (max-width: calc(720px + 2em)) {
    header.active::after {
        content: none;
    }
}

header>div.container {
    min-height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header--logo-img>img {
    height: 70px;
    width: auto;

}

header>div.container>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

header>div.container>div:first-child a.button {
    margin-left: 20px;
}

.header-family-zarnitsa-link {
    font-size: 20px;
    margin-left: 30px;
    padding-inline: 18px;
    white-space: nowrap;
}

header>.container:first-child .profile-link {
    width: 55px;
    height: 55px;
    /* margin-left: 30px; */
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    padding: 0px;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
}

header>.container:first-child .profile-link:hover {
    border-color: white;
}

header>.container:first-child .profile-link>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: calc(1312px + 2em)) {
    header>div.container>div:first-child a.button {
        margin-left: 0px;
    }

    .header-family-zarnitsa-link {
        font-size: 13px;
        padding-inline: 10px;
    }

    header>.container:first-child .profile-link {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        /* margin-left: 15px; */
    }

    header>div.container>div {
        gap: 10px;
    }
}

.desctop-menu {
    position: relative;
}

.desctop-menu>div {
    position: absolute;
    top: calc(100% + 45px);
    height: auto;
    max-height: 0px;
    opacity: 0;
    z-index: -10000;
    overflow: hidden;

    background: rgba(0, 0, 0, 0.8);

    -webkit-box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 0.32);
    border-radius: 10px 10px;

    transition: all 0.15s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}


header.active .desctop-menu>div {
    opacity: 1;
    z-index: 1000;
    max-height: 100vh;
    overflow: visible;
}

header.active .desctop-menu>a {
    color: var(--color-white) !important;
    border-color: var(--color-blue) !important;
    background: none !important;

    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    transition: none !important;
    background: linear-gradient(0deg, #000000 0%, #22C9C6 100%) !important;
    background-color: var(--color-blue) !important;
}

/* header.active .desctop-menu > a::before{
    content: "";
    position: absolute;
    background-image:  var(--gradient-blue-svg)!important;

    background-position: top center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    top: -2px;
    left: -1px;
    width: 100%;
    height: 100%;
} */
header.active .desctop-menu>a img {
    filter: brightness(10);
}

.desctop-menu>div>* {
    background: rgba(34, 201, 198, 0.2);
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 55px;
    padding: 0px 20px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    color: var(--color-blue);
    text-decoration: none;
}

.desctop-menu>div>a:hover,
.desctop-menu>div>div:hover {

    background: var(--color-blue);
    color: white;
}

/* .desctop-menu > div > *{
    border: var(--border-width)  solid var(--color-blue);
} */
.desctop-menu>div>*:not(:last-child) {
    border-bottom: 1px solid rgba(34, 201, 198, 0.4);
    ;
}

.desctop-menu>div>*:first-child {
    border-radius: 10px 10px 0px 0px;
}

.desctop-menu>div>*:last-child {
    border-radius: 0px 0px 10px 10px;
}


.desctop-menu>div>div {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
}

.desctop-menu>div>div:hover {}

.desctop-menu>div>div>img {
    transform: rotate(90deg);
    transition: all 0.15s ease-in-out;
}

.desctop-menu>div>div:hover>img {
    transform: rotate(00deg);
    filter: brightness(10);
}

.desctop-menu>div>div>div {
    position: absolute;
    left: calc(100% + 10px);
    top: 0px;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.8);

    -webkit-box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 0.32);
    border-radius: 10px 10px;
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

@media screen and (max-width: 1800px) {
    .desctop-menu>div>div>div {
        left: unset;
        right: calc(100% + 10px);
    }

    .desctop-menu>div>div:hover>img {
        transform: rotate(180deg);
    }
}

.desctop-menu>div>div:hover>div {
    opacity: 1;
    z-index: 1000;
}

.desctop-menu>div>div>div>a {
    background: rgba(34, 201, 198, 0.2);
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 55px;
    padding: 0px 20px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    color: var(--color-blue);
    text-decoration: none;
    white-space: nowrap;
}

.desctop-menu>div>div>div>a:hover {

    background: var(--color-blue);
    color: white;
}

/* .desctop-menu > div > div > div > a{
    border: var(--border-width)  solid var(--color-blue);
} */
.desctop-menu>div>div>div>a:not(:last-child) {
    border-bottom: 1px solid rgba(34, 201, 198, 0.4);
    ;
}

.desctop-menu>div>div>div>a:first-child {
    border-radius: 10px 10px 0px 0px;
}

.desctop-menu>div>div>div>a:last-child {
    border-radius: 0px 0px 10px 10px;
}

@media screen and (max-width: calc(1312px + 2em)) {

    header.active .desctop-menu>div,
    .desctop-menu>div>div>div {
        border-radius: 5px;
    }

    .desctop-menu>div>*,
    .desctop-menu>div>div>div>a {
        height: 35px;
        font-size: 15px;
    }

    .desctop-menu>div>*:first-child {
        border-radius: 5px 5px 0px 0px;
    }

    .desctop-menu>div>*:last-child {
        border-radius: 0px 0px 5px 5px;
    }

    .desctop-menu>div>div>div>a:first-child {
        border-radius: 5px 5px 0px 0px;
    }

    .desctop-menu>div>div>div>a:last-child {
        border-radius: 0px 0px 5px 5px;
    }
}



@media screen and (max-width: calc(1312px + 2em)) {
    .header--logo-img>img {
        height: 58px;
    }

    header>div.container {
        min-height: 81px;
    }
}

@media screen and (max-width: calc(1000px + 2em)) {
    header>div.container:first-child {
        display: none;
    }
}

@media screen and (min-width: calc(2em + 1000px)) {
    header>div.mobile-header {
        display: none;
    }

    header .mobile-menu {
        display: none;
    }
}

@media screen and (max-width: calc(2em + 1000px)) {
    header {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    body {
        padding-top: 81px;
    }

    header>div.mobile-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    header>div.mobile-header>div {
        /* width: 54px; */
    }

    header>div.mobile-header .profile-link {
        width: 100%;
        border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
        border: var(--border-width) solid var(--color-blue);
        padding: 0px;
        background-size: 100% 100%;
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    header>div.mobile-header .profile-link>img {
        width: 100%;
        height: 100%;
    }

    header>div.mobile-header .burger {
        height: 54px;
        width: 54px;
        transition: all 0.15s ease-in-out;
        background: url(/public/img/burger_closed.svg);
    }

    header.active>div.mobile-header .burger {
        background: url(/public/img/burger_opened.svg);
    }

    header .mobile-menu {
        position: fixed;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        gap: 20px;
        top: -100%;
        left: 0px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        opacity: 0;
        z-index: -999;
        padding: 30px 12px;
        padding-top: 111px;
        transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out;
        background: url(/public/img/mobile-menu-bg.svg);
    }

    header.active {
        z-index: 999;
    }

    header.active .mobile-menu {
        opacity: 1;
        z-index: -1;
        top: 0px;
    }

    header .mobile-menu>.mobile-menu-items {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    header .mobile-menu>.mobile-menu-items>a {
        width: 100%;
        border: var(--border-width) solid var(--color-blue);
        border-radius: 0px;
    }

    header .mobile-menu>.mobile-menu-items>a:not(:last-child) {
        border-bottom: var(--border-width) solid var(--color-blue);
    }

    header .mobile-menu>.mobile-menu-items>a:not(:last-child):not(:first-child) {
        border-radius: 0px;
    }

    header .mobile-menu>.mobile-menu-items>a:last-child {
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

    header .mobile-menu>.mobile-menu-items>a:first-child {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    header .mobile-menu a.button {
        font-size: 20px;
        height: 50px;
        justify-content: start;
        text-align: start;
    }

    header .mobile-menu>.profile-controls {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }

    header .mobile-menu-2-items {
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow: auto;
    }

    header .mobile-menu-2-items>a,
    header .mobile-menu-2-items>div>a,
    header .mobile-menu-2-items>div>div>a {
        height: 50px;
        max-height: 50px;
        background: #22C9C633;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 15px 10px;
        width: 100%;
        box-sizing: border-box;
        font-size: 15px;
        justify-content: space-between;
    }

    header .mobile-menu-2-items>*:not(:last-child) {
        border-bottom: 1px solid hwb(179 13% 21% / 0.4);
    }

    header .mobile-menu-2-items>div>div>a:not(:last-child) {
        border-bottom: 1px solid hwb(179 13% 21% / 0.2);
    }

    header .mobile-menu-2-items>div>div>a {
        background: rgba(34, 201, 198, 0.1);
    }

    header .mobile-menu-2-items>*.white {
        color: white;
    }

    header .mobile-menu-2-items>*:first-child {
        border-radius: 5px 5px 0px 0px;
    }

    header .mobile-menu-2-items>*:last-child {
        border-radius: 0px 0px 5px 5px;
    }

    header .mobile-menu-2-items>div {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    header .mobile-menu-2-items>div>div {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        max-height: 0px;
        height: auto;
        transition: all 0.15s ease-in-out;
    }

    header .mobile-menu-2-items>div.active>div {
        max-height: calc(50px * 8);
    }

    header .mobile-menu-2-items>div.active>a {
        background: var(--color-blue);
        color: white;
    }

    header .mobile-menu-2-items>div>a img {
        transform: rotate(90deg);
        transition: all 0.15s ease-in-out;
    }

    header .mobile-menu-2-items>div.active>a img {
        filter: brightness(10);
        transform: rotate(-90deg);
    }
}

footer {
    background: var(--color-black);
}

footer>div {
    display: flex;
    flex-direction: row;
    padding-top: 30px;
    padding-bottom: 30px;
    min-height: 220px;
    align-items: center;
    justify-content: space-between;
}

footer .logo img {
    height: 70px;
}

footer .footer--links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

footer .footer--links>a {
    text-align: center;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

footer .footer--links>a:last-child {
    width: 100%;
}

footer .enter {
    display: none;
}

footer .social {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

footer .social>a,
footer .social>a img {
    height: 65px;
    width: 65px;
}

@media screen and (max-width: calc(1312px + 2em)) {

    footer .social>a,
    footer .social>a img {
        height: 30px;
        width: 30px;
    }

    footer .logo img {
        height: 42px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    footer>div.container {
        flex-direction: column;
        gap: 30px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    footer .social>a,
    footer .social>a img {
        height: 34px;
        width: 34px;
    }

    footer .logo img {
        height: 70px;
    }

    footer .enter {
        display: flex;
        padding: 7px 12px;
        justify-content: center;
        align-items: center;
        height: 50px;
        min-width: 95px;
        box-sizing: border-box;
        text-decoration: none;
        color: white;
        font-weight: 500;
        border-radius: 5px;
        border: 2px solid var(--color-white);
    }
}

.index--white-bg-1 {
    background: url(/public/img/index--white-bg-1.webp);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: var(--default-margin);
    margin-bottom: var(--default-margin);
    padding-top: 150px;
    margin-top: -141px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .index--white-bg-1 {
        background-size: 100% 512px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .index--white-bg-1 {
        background: url(/public/img/index--white-bg-1--mobile.webp);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-top: 40px;
        margin-top: -40px;
    }
}

.zarnitsa-desc {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 0px;
    flex-wrap: nowrap;
}

.zarnitsa-desc>div.index--green-bg-1 {
    background: url(/public/img/index--green-bg-1.webp);
    min-height: 232px;
}

.zarnitsa-desc>div.index--green-bg-2 {
    background: url(/public/img/index--green-bg-2.webp);
    min-height: 212px;
    min-width: 197px;
}

.zarnitsa-desc>div.index--green-bg-1,
.zarnitsa-desc>div.index--green-bg-2 {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.index--green-bg-1 {
    justify-content: start !important;
}

.index--green-bg-1>h1 {
    line-height: 1em;
}

.index--green-bg-1>p {
    line-height: 1em;
}

.zarnitsa-desc>div.index--green-bg-2 {
    align-items: center;
    justify-content: center;
}

.zarnitsa-desc>div.index--green-bg-2 img {
    width: 73px;
    height: auto;
    transition: all 0.15s ease-in-out;
}

.zarnitsa-desc>div.index--green-bg-2 img {
    filter: brightness(10);
    transition: all 0.15s ease-in-out;
}

@media (pointer:fine) {
    .zarnitsa-desc>div.index--green-bg-2:hover img {
        filter: brightness(1);
    }
}

@media screen and (max-width: calc(1312px + 2em)) {
    .zarnitsa-desc>div.index--green-bg-1 {
        min-height: 147px;
    }

    .zarnitsa-desc>div.index--green-bg-2 {
        min-width: 113px;
        min-height: 137px;
    }

    .zarnitsa-desc>div.index--green-bg-2 img {
        width: 38px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .zarnitsa-desc>div.index--green-bg-1 {
        min-height: 101px;
        background: url(/public/img/index--green-bg-1--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .zarnitsa-desc>div.index--green-bg-2 {
        background: url(/public/img/index--green-bg-2--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .zarnitsa-desc>div.index--green-bg-2 {
        min-width: 72px;
        min-height: 94px;
    }

    .zarnitsa-desc>div.index--green-bg-2 img {
        width: 30px;
    }
}

.green-comp--padding {
    padding: 28px 41px;
    box-sizing: border-box;
}

@media screen and (max-width: calc(720px + 2em)) {
    .green-comp--padding {
        padding: 10px;
    }
}

@media (pointer:fine) {
    .zarnitsa-desc>div.index--green-bg-1:hover {
        background: url(/public/img/index--green-bg-1--white.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .zarnitsa-desc>div.index--green-bg-2:hover {
        background: url(/public/img/index--green-bg-2--white.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .green-comp--hover img {
        filter: brightness(10);
    }

    .green-comp--hover {
        color: white;
        transition: all 0.15s ease-in-out;
    }

    .green-comp--hover:hover {
        color: var(--color-light-grey);
    }

    .green-comp--hover:hover h1,
    .green-comp--hover:hover h2,
    .green-comp--hover:hover h3 {
        color: var(--color-blue);
    }

    .green-comp--hover img {
        filter: brightness(1);
    }
}




.zarnitsa-desc-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 20px;
    margin-top: 15px;
}

.zarnitsa-desc-2>div {
    flex-basis: 100%;
    transition: all 0.15s ease-in-out;
    background: url(/public/img/index--green-bg-3.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    padding: 82px 57px;
    padding-bottom: 0px;
    min-height: 483px;
    box-sizing: border-box;
}

@media (pointer:fine) {
    .zarnitsa-desc-2>div:hover {
        background: url(/public/img/index--green-bg-3--white.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.zarnitsa-desc-2>div p {
    line-height: 1em;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .zarnitsa-desc-2>div {
        padding: 40px 28px;
        min-height: 255px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .zarnitsa-desc-2 {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 15px;
        margin-top: 8px;
    }

    .zarnitsa-desc-2>div {
        display: flex;
        flex-direction: column;
        justify-content: start;
        padding: 20px 20px;
        min-height: 108px;
        background: url(/public/img/index--green-bg-3--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}


.characters {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 20px;
}

.characters--age {
    flex-basis: 100%;
    background: url(/public/img/characters--age-bg-desctop.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 290px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: var(--default-margin);
}

.characters--age>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.characters--age>div>div {
    border-radius: 10px;
    width: 100%;
    height: 70px;
    background: var(--gradient-black-transparent);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    box-sizing: border-box;
}

.characters--age>div>div>span:nth-child(1) {
    font-size: 30px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.characters--age>div>div>span:nth-child(2) {
    font-size: 20px;
    font-family: "Pragmatica";
    font-weight: 400;
    text-align: right;
    opacity: 0.5;
}

.characters--roles {
    width: 100%;
    background: url(/public/img/team-chars-bg-desctop.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 462px;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 30px;
}

.characters--roles>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.characters--roles>div>h1 {
    line-height: 0.75em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.characters--roles>div>h1>div {
    font-size: 40px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 10px;
}

.characters--roles>div>h1 .with-question-mark>*+span {
    font-weight: 500;
    text-transform: none;
    line-height: 1em;
    font-family: "Pragmatica";
    font-style: normal;
}

.characters--roles>div>h1 .with-question-mark:hover>*+span {
    z-index: 999;
}

.characters--roles>div>h1>div img {
    width: 53px;
    transition: all 0.25s ease-in-out;
}

.characters--roles>div>h1>div:hover img {
    filter: brightness(10);
}

/* .characters--roles > div > h1 > div .hover-tooltip--content{
    font-size: 15px;
    line-height: 1.2em;
    font-weight: 500;
    font-family: "Pragmatica";
    text-transform: none;
} */
.characters--roles>div:first-child>div {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.characters--roles--tabs>div {
    width: 100%;
}

.characters--roles--tabs>div>div {
    display: flex;
    overflow: scroll;
    overflow-y: visible;
    gap: 20px;
    padding-top: 50px;
    margin-top: -20px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 20px;
}

.characters--roles--tabs>div>.slider-controls {
    display: none !important;
}

.characters--roles--tabs>div {
    display: none;
}

.characters--roles--tabs>div.active {
    display: block;
}

.characters--roles--tabs>div>div>div {
    position: relative;
    display: flex;
    min-width: 184px;
    width: 184px;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    /* border: var(--border-width)  solid var(--color-blue); */
    background: var(--radial-gradient-blue-black);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;

    padding: 10px;

    height: 287px;
    box-sizing: border-box;

}

.characters--roles--tabs>div>div.slide>div::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 0px;
    display: block;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
}

.characters--roles--tabs>div>div>div>span {
    font-size: 20px;
    line-height: 20px;
    font-weight: 900;
    z-index: 2;
    transition: all 0.15s ease-in-out;
    font-family: "icomoon";
}

.characters--roles--tabs>div>div>div>p {
    z-index: 99;
    padding: 5px;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1em;
}

.characters--roles--tabs>div>div>div>img {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: 105%;
    transition: all 0.15s ease-in-out;
    object-position: center top;
    object-fit: cover;
    border-radius: 10px;
}

.characters--roles--tabs>div>div.slide>div::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 30%;
    display: block;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff00 0%, var(--role-color) 100%);
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .characters--roles--tabs>div>div.slide>div::after {
        border-radius: 5px;
    }
}

.characters--roles--tabs>div>div>div:hover span,
.characters--roles--tabs>div>div>div.active span {
    color: var(--role-color);
}

.characters--roles--tabs>div>div>div:hover::after,
.characters--roles--tabs>div>div>div.active::after {
    opacity: 1;
}

.characters--roles--tabs>div>div>div:hover>img,
.characters--roles--tabs>div>div>div.active>img {
    height: 115%;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .characters--age {
        background: var(----gradient-blue-2);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 5px;
    }

    .characters--roles {
        padding: 16px;
        background: url(/public/img/team-chars-bg-tablet.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        min-height: 296px;

    }

    .characters--roles>div:first-child>div {
        gap: 10px;
    }

    .characters--age>div>div {
        height: 44px;
        border-radius: 5px;
    }

    .characters--age>div>div>span:nth-child(1) {
        font-size: 12px;
    }

    .characters--age>div>div>span:nth-child(2) {
        font-size: 12px;
    }

    .characters--roles--tabs>div>div {
        column-gap: 10px;
        row-gap: 20px;
    }

    .characters--roles--tabs>div>div>div {
        height: 176px;
        border-radius: 5px;
        width: 101px;
        min-width: 101px;
    }

    .characters--roles>div>h1 {
        gap: 25px;
    }

    .characters--roles--tabs>div>div>div>span {
        font-size: 14px;
        z-index: 0;
    }

    .characters--roles>div>h1>div {
        font-size: 20px;
        gap: 10px;
    }

    .characters--roles>div>h1>div img {
        width: 32px;
    }

    .characters--roles>div>h1>div .with-question-mark>*+span {
        left: unset;
        right: 0px;
    }

    .characters--roles--tabs>div>div>div>img {
        border-radius: 5px;
    }

    .characters {
        gap: 18px;
    }

    .characters--roles--tabs>div>div>div>p {
        font-size: 10px;
    }

    .characters--roles--tabs>div>div.slide>div::before {
        border-radius: 5px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .characters {
        flex-direction: column;
    }

    .characters--age {
        width: 100%;
        min-height: 138px;
        background: url(/public/img/index--green-bg-4--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .characters--age h2 {
        margin-bottom: 15px;
    }

    .characters--age h2 br {
        display: none;
    }

    .characters--age>div {
        flex-direction: row;
        gap: 10px;
    }

    .characters--age>div>div {
        font-size: 15px;
        line-height: 15px;
    }

    .characters--age>div>div>span:nth-child(1),
    .characters--age>div>div>span:nth-child(2) {
        font-size: 12px;
    }

    .characters>.characters--roles {
        padding: 50px 16px;
        padding-bottom: 75px;
        position: relative;
        width: 100%;
        min-height: unset;

        background: url(/public/img/index--green-bg-5--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .characters--roles>div:first-child {
        /* position: absolute;
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: space-between; */
    }

    .characters--roles>div:first-child h1 {
        width: 100%;
        justify-content: space-between;
    }

    .characters--roles>div>h1>div .with-question-mark>*+span {
        left: 0px;
        right: unset;
    }

    .characters--roles {
        position: relative;
        padding-bottom: 78px;

        background: url(/public/img/team-chars-bg-mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .characters--roles>div:first-child>div {
        position: absolute;
        bottom: 15px;
        right: 15px;
    }

    .characters--roles--tabs>div>div {
        /* margin: 0px; */
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: 15px;
    }

    .characters--roles>div>h1>div>span img {
        width: 22px;
    }

    .characters--roles--tabs>div>div>div {
        height: 166px;
        width: 105px;
        min-width: 105px;
    }

    .characters--roles--tabs>div>div.slider-controls {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    .characters--roles--tabs>div>div.slider-controls>div {
        flex-basis: 100%;
        height: 11px;
        border-radius: 10px;
        background: var(--color-black);
        opacity: 0.3;
        padding: 0px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .characters--roles--tabs>div>div.slider-controls>div.active {
        background: var(--color-blue);
        opacity: 1;
    }

    .characters--roles>div:first-child>div div {
        width: 48px;
        height: 48px;
    }
}

@media screen and (max-width: calc(380px)) {
    .characters--age>div>div {
        padding: 0px 10px;
    }
}

@media screen and (max-width: calc(390px)) {
    .characters--age>h2 {
        font-size: 19px;
    }
}

@media screen and (max-width: calc(360px)) {
    .characters--age>h2 {
        font-size: 17px;
    }
}

.index--season {
    margin-top: var(--default-margin);
    background: url(/public/img/index--green-bg-6.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 30px 20px;
    margin-bottom: var(--default-margin);
}

.index--season>div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.index--season>div:first-child p {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    height: 55px;
    box-sizing: border-box;
    font-weight: 500;
    padding: 15px 15px;
    border-radius: 10px;
    background: var(--gradient-grey-transparent);
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0px;
}

.index--season .index--season--stages {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
}

.index--season .index--season--stages>div {
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: url(/public/img/season-stage-1.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 192px;
    box-sizing: border-box;
}

.index--season .index--season--stages>div.application-campaign-stage {
    grid-column: 1 / -1;
}

.index--season .index--season--stages>div.index--season--stage-final-like {
    background: url(/public/img/season-stage-5.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 20px 22px 22px 22px;
    height: auto;
    justify-content: flex-start;
}

.index--season .index--season--stages>div.index--season--stage-final-like>div:first-child {
    margin-bottom: 0;
}

.index--season .index--season--stages>div.index--season--stage-final-like>div:first-child:has(p) {
    margin-bottom: 12px;
}

.index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row h4 {
    line-height: 1.2;
    margin: 0;
}

.index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 20px;
    height: 55px;
    box-sizing: border-box;
    font-weight: 500;
    padding: 15px 15px;
    border-radius: 10px;
    background: var(--gradient-grey-transparent);
    margin: 0;
    flex-shrink: 0;
    min-width: max-content;
}

.index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current::before {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.index--season .index--season--stages>div.index--season--stage-final-like>div:last-child>div h4 {
    font-size: 27px;
    margin-top: 0;
}

.index--season .index--season--stages>div.index--season--stage-final-like>div:last-child>div span {
    font-size: 20px;
    opacity: 0.75;
    margin-top: 0;
    display: block;
    font-weight: 400;
}

.index--season .index--season--stages>div:nth-child(1) {
    background: url(/public/img/season-stage-1.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 190px;
    max-height: 190px;
    overflow: hidden;
}

.index--season .index--season--stages>div:nth-child(1)>div:last-child {
    min-height: 0;
}

.index--season .index--season--stages>div:nth-child(2) {
    background: url(/public/img/season-stage-3.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.index--season .index--season--stages>div:nth-child(3) {
    background: url(/public/img/season-stage-3.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.index--season .index--season--stages>div:nth-child(4) {
    background: url(/public/img/season-stage-4.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.index--season .index--season--stages>div>div:first-child {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.index--season .index--season--stages>div>div:first-child>p {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
    padding: 15px 25px;
    border-radius: 10px;
    background: var(--gradient-grey-transparent);
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0px;
}

.index--season .index--season--stages p.current {
    padding: 15px 15px;
    padding: 15px 25px;
    border-radius: 10px;
    background: var(--gradient-grey-transparent);
}

.index--season .index--season--stages p.current::before {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    background-color: #E64156;
    flex: 0 0 17px;
}

.index--season .index--season--stages>div>div:last-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
    min-height: 180px;
}

.index--season .index--season--stages>div>div:last-child>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.index--season .index--season--stages>div>div:last-child>div span {
    font-size: 20px;
    font-weight: 400;
    opacity: 0.75;
}

.index--season .index--season--stages>.compact-stages-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--compact-stage-count), minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    column-gap: 20px;
    row-gap: 20px;
}

.index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row {
    display: grid;
    grid-template-columns: repeat(var(--compact-stage-count), minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    column-gap: 20px;
    row-gap: 20px;
}

.index--season .index--season--stages>.compact-stages-row>div {
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.index--season .index--season--stages .compact-stages-row>div {
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.index--season .index--season--stages .compact-stage-card.compact-stage-type-qualify {
    background: url(/public/img/season-stage-1.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    max-width: 300px;
    width: 100%;
}

.index--season .index--season--stages .compact-stage-card.compact-stage-type-municipal {
    background: url(/public/img/season-stage-2.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    max-width: 300px;
    width: 100%;
}

.index--season .index--season--stages .compact-stage-card.compact-stage-type-zonal {
    background: url(/public/img/season-stage-3.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    max-width: 300px;
    width: 100%;
}

.index--season .index--season--stages .compact-stage-card.compact-stage-type-region {
    background: url(/public/img/season-stage-4.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    max-width: 300px;
    width: 100%;
}

/* Фон карточек, которые мы перенесли (compact-stages-row) */
.index--season .index--season--stages .compact-stages-row>div.compact-stage-card {
    background: transparent !important;
    position: relative;
    overflow: hidden;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/public/img/bg_min_card_stage.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 0;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card>* {
    position: relative;
    z-index: 1;
}

/* Compact-ряд этапов: универсальные стили, чтобы не зависеть от где расположен блок */
.index--season .index--season--stages .compact-stages-row>div.compact-stage-card {
    padding: 20px;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card>div:first-child {
    display: none;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card>div:last-child {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card .stage-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: auto;
    width: 100%;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card>div:last-child>div.stage-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card .stage-controls>a.button {
    margin-left: auto;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card>div:last-child>div h4 {
    font-size: 21px;
    line-height: 1.2;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card p.current.icon-only-current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    min-width: 55px;
    min-height: 55px;
    height: 55px;
    background: var(--gradient-grey-transparent);
    border-radius: 10px;
    padding: 0;
    margin: 0;
    gap: 0;
}

.index--season .index--season--stages .compact-stages-row>div.compact-stage-card p.current.icon-only-current::before {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.index--season .index--season--stages>div.compact-stage-card {
    padding: 20px;
}

.index--season .index--season--stages>div.compact-stage-card>div:first-child,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card>div:first-child {
    display: none;
}

.index--season .index--season--stages>div.compact-stage-card>div:last-child,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card>div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    height: auto;
    padding: 0;
}

.index--season .index--season--stages>div.compact-stage-card .stage-controls,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card .stage-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    /* margin-top: auto; */
    width: 100%;
}

.index--season .index--season--stages>div.compact-stage-card>div:last-child>div.stage-controls,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card>div:last-child>div.stage-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.index--season .index--season--stages>div.compact-stage-card .stage-controls>a.button,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card .stage-controls>a.button {
    margin-left: auto;
}

.index--season .index--season--stages>div.compact-stage-card>div:last-child>div h4,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card>div:last-child>div h4 {
    font-size: 21px;
    line-height: 1.2;
}

.index--season .index--season--stages>div.compact-stage-card p.current.icon-only-current,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card p.current.icon-only-current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background: var(--gradient-grey-transparent);
    border-radius: 10px;
    padding: 0;
    margin: 0;
    gap: 0;
}

.index--season .index--season--stages>div.compact-stage-card p.current.icon-only-current::before,
.index--season .index--season--stages>.compact-stages-row>div.compact-stage-card p.current.icon-only-current::before {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}



.index--season--stage-final {
    margin-top: 20px;
    border-radius: 10px;
    padding: 17px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);


    background: url(/public/img/season-stage-5.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}

.index--season--stage-final.county-stage-final {
    background: url(/public/img/season-stage-4.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.index--season--stage-final-pair {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.index--season--stage-final-pair .index--season--stage-final {
    margin-top: 0;
}

.index--season--stage-final-pair .index--season--stage-final>div:last-child {
    margin-top: auto;
}

.index--season--stage-final .stage-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.index--season--stage-final .stage-controls>a.button {
    margin-left: auto;
}

.index--season--stage-final .stage-active-inline-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 20px;
    height: 55px;
    box-sizing: border-box;
    font-weight: 500;
    padding: 15px 15px;
    border-radius: 10px;
    background: var(--gradient-grey-transparent);
    margin: 0;
}

.index--season--stage-final .stage-active-inline-badge::before {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    background-color: #E64156;
    flex: 0 0 17px;
}

.index--season .index--season--stages>div>div:first-child>p.current {
    padding: 15px 15px;
}

.index--season .index--season--stages>div>div:last-child p.current {
    display: none;
}

/* Заявочная кампания: плашка в строке заголовка (правило выше скрывает дубликат у кнопки на других этапах) */
.index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 20px;
    height: 55px;
    box-sizing: border-box;
    font-weight: 500;
    padding: 15px 15px;
    border-radius: 10px;
    background: var(--gradient-grey-transparent);
}

@media screen and (max-width: calc(1312px + 2em)) {
    .index--season {
        padding: 15px;

        background: var(--gradient-blue-2);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 5px;
    }

    .index--season .index--season--stages {
        margin-top: 20px;
    }

    .index--season>div:first-child p {
        font-size: 12px;
        line-height: 12px;
        height: 35px;
        min-height: 35px;
        padding: 0 15px;
        border-radius: 5px;
    }

    .index--season>div:first-child p::before {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .index--season .index--season--stages p.current {
        font-size: 12px;
        padding: 10px 15px;
        font-weight: 500;
    }

    .index--season .index--season--stages>div {
        padding: 16px;
        height: 163px;
    }

    .index--season .index--season--stages>div.index--season--stage-final-like {
        padding: 15px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage.index--season--stage-final-like {
        background: url(/public/img/season-stage-3-tablet.webp);
        background-position: right top;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .index--season .index--season--stages>div.application-campaign-stage:not(.regional-implementation-stage) {
        height: 130px;
        min-height: 130px;
        max-height: 130px;
    }

    .index--season .index--season--stages>div>div:first-child {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        column-gap: 20px;
        /* margin-bottom: 16px; */
    }

    .index--season .index--season--stages>div>div:first-child>p {
        font-size: 12px;
        line-height: 12px;
        padding: 10px 15px;
        font-weight: 500;
        border-radius: 5px;
    }

    .index--season .index--season--stages>div>div:first-child>p.current {
        display: none;
    }

    .index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current {
        font-size: 12px;
        line-height: 12px;
        height: auto;
        min-height: 36px;
        padding: 10px 15px;
        border-radius: 5px;
        width: auto;
        justify-content: flex-start;
        margin-right: 0;
    }

    .index--season--stage-final .stage-active-inline-badge {
        font-size: 12px;
        line-height: 12px;
        height: auto;
        min-height: 36px;
        padding: 10px 15px;
        border-radius: 5px;
    }

    .index--season .index--season--stages p.current::before,
    .index--season--stage-final .stage-active-inline-badge::before,
    .index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current::before,
    .index--season .index--season--stages>div.compact-stage-card p.current.icon-only-current::before {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .index--season .index--season--stages>div.compact-stage-card p.current.icon-only-current {
        width: 36px;
        height: 36px;
        border-radius: 5px;
    }

    .index--season .index--season--stages>.compact-stages-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        column-gap: 10px;
        row-gap: 10px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row>div.compact-stage-card {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row>div.compact-stage-card>div:last-child>div h4 {
        font-size: 15px;
        line-height: 15px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row>div.compact-stage-card .stage-controls p.current.icon-only-current {
        width: 44px;
        height: 34px;
        min-width: 44px;
        min-height: 34px;
        padding: 0;
    }

    .index--season .index--season--stages>.compact-stages-row>div.compact-stage-card {
        height: auto;
        min-height: 163px;
        padding: 16px;
    }

    .index--season .index--season--stages>div.compact-stage-card {
        height: auto;
        min-height: 163px;
        padding: 16px;
    }

    .index--season .index--season--stages>div.compact-stage-card>div:last-child {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .index--season .index--season--stages>div.compact-stage-card>div:last-child>div {
        flex-basis: auto;
        margin-bottom: 0;
    }

    .index--season .index--season--stages>div.compact-stage-card .stage-controls {
        flex-wrap: nowrap;
        margin-bottom: 0;
    }

    .index--season .index--season--stages>div.compact-stage-card .stage-controls p.current.icon-only-current {
        width: 36px;
        min-width: 36px;
        margin-right: 0;
    }

    .index--season .index--season--stages>.compact-stages-row>div.compact-stage-card .stage-controls p.current.icon-only-current {
        width: 36px;
        min-width: 36px;
        margin-right: 0;
    }

    .index--season .index--season--stages>div>div:last-child p.current {
        display: flex;
        margin-top: 0px;
        width: 92px;
        justify-content: space-around;
        /* align-items: center; */
        box-sizing: border-box;
        margin-right: auto;
        border-radius: 5px;
    }

    .index--season .index--season--stages>div>div:last-child {
        flex-wrap: wrap;
        justify-content: right;
    }

    .index--season .index--season--stages>div>div:last-child>div span {
        font-size: 12px;
    }

    .index--season .index--season--stages>div>div:last-child>div {
        flex-basis: 100%;
        gap: 5px;
        /* margin-bottom: 12px; */
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .index--season {
        padding: 15px;
        background: url(/public/img/index--green-bg-6--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .index--season .index--season--stages>div.index--season--stage-final-like {
        padding: 13px;
    }

    .index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row {
        gap: 10px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage.index--season--stage-final-like>div:nth-child(2) .stage-title-row h4 {
        max-width: 231px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage.index--season--stage-final-like .stage-title-row-container__base {
        gap: 5px;
    }

    .index--season .index--season--stages {
        grid-template-columns: repeat(1, 1fr);
    }

    .index--season .index--season--stages>div {
        position: relative;
    }

    /* .index--season .index--season--stages > div > div:last-child a.button{
        position: absolute;
        bottom: 20px;
        right: 20px;
    } */
    .index--season .index--season--stages>div>div:last-child p.current {
        height: 45px;
        font-size: 15px;
        align-items: center;
    }

    .index--season .index--season--stages>div {
        height: 174px;
        /* height: 117px; */
    }

    .index--season--stage-final .stage-active-inline-badge,
    .index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current {
        font-size: 10px;
        line-height: 10px;
        min-height: 30px;
        padding: 10px 10px;
    }

    .index--season .index--season--stages>div.compact-stage-card p.current.icon-only-current {
        width: 45px;
        height: 45px;
    }

    .index--season .index--season--stages>.compact-stages-row {
        grid-template-columns: 1fr;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row {
        grid-template-columns: 1fr;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row>div.compact-stage-card .stage-controls p.current.icon-only-current {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row>div.compact-stage-card>div:last-child>div {
        margin-bottom: 10px;
    }

    .index--season .index--season--stages>div.regional-implementation-stage>.compact-stages-row>div.compact-stage-card .stage-controls p.current.icon-only-current::before {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
    }

    .index--season .index--season--stages>.compact-stages-row>div.compact-stage-card {
        min-height: 174px;
    }

    .index--season .index--season--stages>div.compact-stage-card {
        min-height: 174px;
    }

    .index--season .index--season--stages>div.compact-stage-card .stage-controls {
        flex-wrap: nowrap;
    }

    .index--season .index--season--stages>div.compact-stage-card .stage-controls p.current.icon-only-current {
        width: 45px;
        min-width: 45px;
    }

    .index--season .index--season--stages>.compact-stages-row>div.compact-stage-card .stage-controls p.current.icon-only-current {
        width: 45px;
        min-width: 45px;
    }

    .index--season .index--season--stages p.current::before,
    .index--season--stage-final .stage-active-inline-badge::before,
    .index--season .index--season--stages>div.index--season--stage-final-like .stage-title-row>p.current::before,
    .index--season .index--season--stages>div.compact-stage-card p.current.icon-only-current::before,
    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card p.current.icon-only-current::before {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
    }

    .index--season--stage-final-pair {
        grid-template-columns: 1fr;
    }

    .index--season--stage-final {
        height: 130px;
        min-height: 130px;
        gap: 8px;
    }

    /* .index--season .index--season--stages > div > div:first-child{
        display: none;
    } */
    .index--season>div:first-child p {
        font-size: 0px;
        line-height: 0px;
        gap: 0px;
        padding: 5px;
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
    }

    .index--season>div:first-child p::before {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
    }
}

#final-slider-tabs>div:not(.active) {
    display: none;
}

#final-slider-tabs {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.stage-final--slider-v2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    max-width: 966px;
}

.stage-final--slider-v2 .stage-final--slider-arrow:last-child {
    transform: rotate(180deg);
}

.stage-final--slider-v2 .stage-final--slider-arrow {
    width: 93px;
    height: 93px;
    cursor: pointer;
}

.stage-final--slider-v2 .stage-final--slider-arrow>img {
    width: 93px;
    height: 93px;
    transition: all 0.15s ease-in-out;
    opacity: 1;
}

.stage-final--slider-v2 .stage-final--slider-arrow:not(.disabled):hover>img {
    filter: brightness(10);
}

.stage-final--slider-v2 .stage-final--slider-arrow.disabled>img {
    opacity: 0.5;
}

.stage-final--slider-v2>div:nth-child(2) {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    column-gap: 20px;
}

.stage-final--slider-v2>div:nth-child(2)>* {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.stage-final--slider-v2>div:nth-child(2)>*>* {
    border-radius: 10px;
    padding: 16px 20px;
    box-sizing: border-box;
    height: 93px;

    background: var(--gradient-black-transparent);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(1) {
    width: 93px;
    padding: 15px;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) {
    width: 100%;
    display: grid;
    grid-template-columns: 55px 1fr;
    column-gap: 15px;
    align-items: center;
    cursor: pointer;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2).locked {
    background: url(/public/img/lock-blue.svg), var(--gradient-black-transparent);
    background-position: center;
    background-size: auto 60%, 100% 100%;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(3) {
    width: fit-content;
    min-width: 125px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    color: white;
    text-transform: uppercase;
}

/* .stage-final--slider-v2 > div:nth-child(2) > *.locked{
    border: var(--border-width)  solid var(--color-blue);
    background: url(/public/img/lock-blue.svg), var(--gradient-black-transparent);
    background-position: center;
    background-size: 73px 56px, 100% 100%;
    background-repeat: no-repeat;
    cursor:not-allowed;
} */

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(1) img {
    width: 62px;
    height: 62px;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) img {
    height: 55px;
    width: 55px;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    transition: all 0.15s ease-in-out;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2):hover img {
    border-color: white;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2)>p {
    display: grid;
    grid-template-columns: 1fr 100px;
    column-gap: 15px;
    margin: 0px;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) span:nth-child(1) {
    font-size: 20px;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) span:nth-child(2) {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
    opacity: 0.5;
}


.stage-final--slider-v2>div:nth-child(2)>*:hover img {
    border-color: white;
}



.index--season--stage-final>div:first-child {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 50px;
    margin-bottom: 35px;
}

/* .index--season--stage-final > div:first-child > div:nth-child(1){
    width: 100%;
} */
.index--season--stage-final>div:first-child>div:nth-child(1)>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.index--season--stage-final>div:first-child>div:nth-child(1) h1 {
    font-size: 27px;
}

.index--season--stage-final>div:first-child>div:nth-child(1)>div img {
    height: 31px;
    width: 31px;
}

.index--season--stage-final>div:first-child>div:nth-child(1)>div h4 {
    font-size: 27px;
}

.index--season--stage-final>div:first-child>div:nth-child(1) span {
    font-size: 20px;
    opacity: 0.75;
    margin-top: 10px;
    display: block;
    font-weight: 400;
}

.index--season--stage-final>div:first-child>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.index--season--stage-final>div:first-child>div:nth-child(2)>div {
    white-space: nowrap;
    /* font-size: 20px; */
    font-weight: 500;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .stage-final--slider-v2>div:nth-child(2)>*>* {
        height: 50px;
        gap: 10px;
        border-radius: 5px;
    }

    .stage-final--slider-v2>div:nth-child(2)>* {
        gap: 8px;
    }

    .stage-final--slider-v2 {
        gap: 8px;
    }

    .stage-final--slider-v2 .stage-final--slider-arrow,
    .stage-final--slider-v2 .stage-final--slider-arrow img {
        height: 50px;
        width: 50px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(1)>div {
        gap: 10px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(1)>div img {
        height: 15px;
        width: 15px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(1) span {
        font-size: 12px;
        line-height: 12px;
    }

    .index--season--stage-final>div:first-child {
        gap: 25px;
        margin-bottom: 19px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(2)>div {
        height: 32px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(2) {
        gap: 10px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(1)>div h4 {
        font-size: 15px;
    }

    .index--season .index--season--stages>div.application-campaign-stage:nth-child(1) .stage-title-row h4 {
        font-size: 15px;
        line-height: 15px;
    }

    .index--season .index--season--stages>div.application-campaign-stage:nth-child(1) .stage-title-row-container__base>span {
        font-size: 12px;
        line-height: 12px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>* {
        height: 50px;
        padding: 10px 13px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(1) {
        width: 50px;
        padding: 8px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(1) img {
        width: 33px;
        height: 33px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) {
        grid-template-columns: 30px 1fr;
        column-gap: 10px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2)>p {
        grid-template-columns: 1fr 50px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) img {
        width: 30px;
        height: 30px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) span {
        font-size: 10px !important;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(3) {
        min-width: 85px;
        font-size: 8px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .index--season--stage-final>div:first-child {
        margin-top: 0px;
    }

    .index--season--stage-final>div:first-child>div:nth-child(1)>div img {
        display: none;
    }

    .index--season--stage-final {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-bottom: 17px;

        background: url(/public/img/season-stage-5--mobile-new.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index--season--stage-final.county-stage-final {
        background: url(/public/img/season-stage-4--mobile-new.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index--season--stage-final>div:first-child {
        display: flex;
        flex-direction: column-reverse;
        gap: 15px;
        margin-bottom: 0px;
    }

    .index--season--stage-final>div:first-child>a.button {
        position: absolute;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .index--season--stage-final .stage-controls {
        align-items: flex-start;
    }

    .stage-final--slider-v2>div:nth-child(2) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 170px;
        overflow: auto;
        margin-top: 10px;
        padding-right: 10px;
        width: 96%;
    }

    .stage-final--slider-v2>div:nth-child(2)>* {
        flex-direction: row;
        align-items: center;
        justify-content: start;

    }

    .stage-final--slider-v2>div:nth-child(2)>* p {
        font-size: 15px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*.locked {
        padding: 0px;
        padding-top: 50px;
    }

    .index--season .index--season--stages>div.application-campaign-stage:nth-child(1) {
        background: url(/public/img/season-stage-1--mobile-new.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;

    }

    .index--season .index--season--stages>div:nth-child(2) {
        background: url(/public/img/season-stage-3--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index--season .index--season--stages>div:nth-child(3) {
        background: url(/public/img/season-stage-3--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index--season .index--season--stages>div.regional-implementation-stage.index--season--stage-final-like {
        background: url(/public/img/season-stage-3--mobile-new.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index--season .index--season--stages>div:nth-child(4) {
        background: url(/public/img/season-stage-4--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* Compact-ряд этапов (отборочный/муниципальный/зональный/региональный) */
    .index--season .index--season--stages .compact-stage-card.compact-stage-type-qualify {
        background: url(/public/img/season-stage-1--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
        max-width: 300px;
        width: 100%;
    }

    .index--season .index--season--stages .compact-stage-card.compact-stage-type-municipal {
        background: url(/public/img/season-stage-2--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
        max-width: 300px;
        width: 100%;
    }

    .index--season .index--season--stages .compact-stage-card.compact-stage-type-zonal {
        background: url(/public/img/season-stage-3--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
        max-width: 300px;
        width: 100%;
    }

    .index--season .index--season--stages .compact-stage-card.compact-stage-type-region {
        background: url(/public/img/season-stage-4--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
        max-width: 300px;
        width: 100%;
    }
}

.index-stats {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 20px;

    margin-top: var(--default-margin);
    margin-bottom: var(--default-margin);
}


.index-stats--top-ten {
    background: url(/public/img/index--green-bg-7.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;

    display: block;

    width: 535px;
    min-height: 804px;
    padding: var(--default-padding);
    box-sizing: border-box;
    position: relative;
}

.index-stats--top-ten>a {
    position: absolute;
    bottom: var(--default-padding);
    right: var(--default-padding);
}

.index-stats--top-ten>h2 {
    margin-bottom: var(--default-padding);
}

.index-stats--top-ten>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.index-stats--top-ten>div>div.top-ten--header,
.index-stats--top-ten>div>div.top-ten--item {
    display: grid;
    grid-template-columns: 50px 50px 1fr 50px 50px 50px;
    column-gap: 8px;
}

.index-stats--top-ten>div>div.top-ten--header>div,
.index-stats--top-ten>div>div.top-ten--item>div {
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.index-stats--top-ten>div>div.top-ten--header>div {
    text-transform: uppercase;
}

.index-stats--top-ten>div>div.top-ten--header>div>img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: var(--border-radius);
}

.index-stats--top-ten>div>div.top-ten--header>div:nth-child(2)>img {
    padding: 10px;
}

.index-stats--top-ten>div>div.top-ten--item>div>a:nth-child(2),
.index-stats--top-ten>div>div.top-ten--item>div>a:nth-child(4) {
    display: block;
    width: 100%;
    height: 100%;
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(2) {
    border: var(--border-width) solid var(--color-blue);
}

.index-stats--top-ten>div>div.top-ten--item>div img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(2) img {
    border-radius: 0px;
    object-fit: cover;
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(2) {
    transition: all 0.15s ease-in-out;
    overflow: hidden;
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(2):hover {
    border-color: white;
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(2)>a {
    display: block;
    height: 100%;
    width: 100%;
}

.index-stats--top-ten>div>div.top-ten--header>div {
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    font-size: 20px;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
}

.index-stats--top-ten>div>div.top-ten--item>div {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    font-weight: 500;
    font-size: 15px;
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(3) {
    overflow: hidden;
    padding: 0px 25px;
    justify-content: start;
}

.index-stats--top-ten>div>div.top-ten--item>div:nth-child(3)>a {
    color: white;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}



.index-stats>div:nth-child(2) {
    width: 757px;
    min-height: 804px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.index-stats>div:nth-child(2)>.index-stats--best-mens {
    background: url(/public/img/index--green-bg-8.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 757px;
    min-height: 514px;
    padding: var(--default-padding);
    padding-top: 10px;
    box-sizing: border-box;
}

.index-stats--best-mens>div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.index-stats--best-mens>div:first-child>div {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 15px;
}

.index-stats--best-mens>div:first-child>div>img {
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.index-stats--best-mens>div:first-child>div>img:last-child {
    transform: rotate(180deg);
}

.index-stats--best-mens>div:first-child>div>img:hover {
    filter: brightness(10);
}

.index-stats--best-mens>div:first-child>div>div>div {
    display: none;
    background: var(--gradient-black-transparent);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    justify-content: center;
    align-items: center;

    border-radius: var(--border-radius);
    width: 105px;
    height: 60px;
    text-align: center;
    font-size: 10px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.index-stats--best-mens[current-slide="0"]>div:first-child>div>div>div:nth-child(1) {
    display: flex;
}

.index-stats--best-mens[current-slide="1"]>div:first-child>div>div>div:nth-child(2) {
    display: flex;
}

.index-stats--best-mens[current-slide="2"]>div:first-child>div>div>div:nth-child(3) {
    display: flex;
}

.index-stats--best-mens[current-slide="3"]>div:first-child>div>div>div:nth-child(4) {
    display: flex;
}

.index-stats--best-mens[current-slide="4"]>div:first-child>div>div>div:nth-child(5) {
    display: flex;
}

.index-stats--best-mens[current-slide="5"]>div:first-child>div>div>div:nth-child(6) {
    display: flex;
}


.index-stats--best-mens .slider-best .slide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 20px;
    row-gap: 10px;
}

.index-stats--best-mens .slider-best .slide>div {
    height: 88px;
    background: var(--gradient-black-transparent);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: var(--border-radius);

    padding: 15px 20px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 20px;

    box-sizing: border-box;

}

.index-stats--best-mens .slider-best .slide>div.locked {
    border: var(--border-width) solid var(--color-blue);
    background: url(/public/img/lock-blue.svg), var(--gradient-black-transparent);
    background-position: center;
    background-size: auto 80%, 100% 100%;
    background-repeat: no-repeat;
    cursor: not-allowed;

}

.index-stats--best-mens .slider-best .slide>div>a {
    height: 60px;
    width: 60px;
}

.index-stats--best-mens .slider-best .slide>div>a>img {
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    cursor: pointer;
}

.index-stats--best-mens .slider-best .slide>div:not(.locked)>a:hover>img {
    border-color: var(--color-white);
}

.index-stats--best-mens .slider-best .slide>div>div {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: calc(100% - 60px - 20px);
}

.index-stats--best-mens .slider-best .slide>div>div p {
    font-size: 20px;
    margin: 0px;
    line-height: 20px;
    color: white;
}

.index-stats--best-mens .slider-best .slide>div>div p:first-child {
    font-weight: 500;
}

.index-stats--best-mens .slider-best .slide>div>div p:first-child a {
    color: inherit;
}

.index-stats--best-mens .slider-best .slide>div>div p:last-child {
    font-weight: 400;
    color: #ffffff80;
}

.index-stats--best-mens .slider-best .slide>div>div p:last-child>span {
    color: var(--role-color);
    margin-right: 10px;
    font-size: 20px;
    font-weight: 900;
    font-family: "icomoon";
}

.index-stats--best-mens .slider-best .slider-controls {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.index-stats--best-mens .slider-best .slider-controls>div {
    flex-basis: 100%;
    height: 11px;
    border-radius: 10px;
    background-color: var(--color-black);
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.index-stats--best-mens .slider-best .slider-controls>div.active {
    background-color: #22C9C680;
    opacity: 1;
}


.index-stats>div:nth-child(2)>.index-stats--season-stat {
    background: url(/public/img/index--green-bg-9.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 757px;
    min-height: 270px;
    padding: var(--default-padding);
    padding-bottom: 0px;
    box-sizing: border-box;
}

.index-stats>div:nth-child(2)>.index-stats--season-stat>div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 15px;
    row-gap: 10px;
    margin-top: 25px;
}

.index-stats>div:nth-child(2)>.index-stats--season-stat>div>div {
    min-height: 175px;
    height: 100%;
    box-sizing: border-box;
    padding: calc(15px - var(--border-width));

    display: flex;
    flex-direction: column;
    gap: 10px;

    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    background-color: var(--color-blue-transparent);
    transition: all 0.15s ease-in-out;
}

.index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p {
    margin: 0px;
    line-height: 1em;
}

.index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(1) {
    height: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--gradient-black-transparent);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    border-radius: var(--border-radius);

    font-size: 20px;
    font-weight: 500;

    transition: all 0.15s ease-in-out;
}

.index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(2) {
    font-size: 20px;
    font-weight: 500;
    min-height: 2em;
}

.index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(3) {
    font-size: 15px;
    font-weight: 400;
    min-height: 2em;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
}

@media screen and (min-width: calc(1312px + 2em)) {

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div:hover {
        border-color: var(--color-white);
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div:hover>p:nth-child(1) {
        background: var(--gradient-white-transparent);
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div:hover>p:nth-child(3) {
        opacity: 1;
    }
}


@media screen and (max-width: calc(1312px + 2em)) {
    .index-stats--top-ten {
        width: 335px;
        min-height: 532px;
        background: url(/public/img/index_top-ten-bg-tablet.webp);
        background-size: 100% 100%;
    }

    .index-stats>div:nth-child(2) {
        width: 369px;
        min-height: 532px;
    }

    .index-stats>div:nth-child(2)>.index-stats--best-mens {
        width: 369px;
        min-height: 346px;
        border-radius: var(--border-radius);
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 100%);
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat {
        width: 369px;
        min-height: 170px;
        background: url(/public/img/index_season-stat-bg-tablet.webp);
    }

    .index-stats--best-mens>div:first-child>div>img {
        height: 44px;
        width: 44px;
    }

    .index-stats--best-mens>div:first-child>div>div>div {
        height: 44px;
        width: 76px;
    }

    .index-stats--best-mens>div:first-child>div {
        gap: 10px;
    }

    .index-stats--top-ten>div {
        gap: 5px;
    }

    .index-stats--top-ten>div>div.top-ten--header,
    .index-stats--top-ten>div>div.top-ten--item {
        grid-template-columns: 33px 33px 1fr 33px 33px 33px;
        column-gap: 5px;
    }

    .index-stats--top-ten>div>div.top-ten--header>div,
    .index-stats--top-ten>div>div.top-ten--item>div {
        height: 33px;
    }

    .index-stats--top-ten>div>div.top-ten--header>div {
        font-size: 15px;
    }

    .index-stats--top-ten>div>div.top-ten--item>div {
        font-size: 10px;
    }

    .index-stats--top-ten>div>div.top-ten--item>div:nth-child(3) {
        padding: 0px 10px;
    }

    .index-stats--top-ten>div>div.top-ten--header>div:nth-child(2)>img {
        padding: 5px;
    }

    .index-stats--best-mens .slider-best .slide {
        row-gap: 16px;
        column-gap: 20px;
        grid-template-columns: repeat(2, calc(163px - 5px));
    }

    .index-stats--best-mens .slider-best .slide>div {
        height: 45px;
        padding: 10px 15px;
        gap: 10px;
    }

    .index-stats--best-mens .slider-best .slide>div>a {
        height: 25px;
        width: 25px;
    }

    .index-stats--best-mens .slider-best .slide>div>div {
        gap: 5px;
        width: calc(100% - 25px - 10px);
    }

    .index-stats--best-mens .slider-best .slide>div>div p {
        font-size: 10px;
        width: 100%;
        line-height: 1em;
        display: block;
        white-space: nowrap;
    }

    .index-stats--best-mens .slider-best .slide>div>div p:nth-child(1) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .index-stats--best-mens .slider-best .slide>div>div p:last-child>span {
        font-size: 8px;
        margin-right: 5px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div {
        gap: 11px;
        margin-top: 16px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div {
        padding: 10px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(1) {
        font-size: 10px;
        height: 25px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(2) {
        font-size: 10px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(3) {
        font-size: 8px;
        margin-top: -5px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div {
        min-height: 104px;
        box-sizing: border-box;
        gap: 10px;
        padding: calc(10px - var(--border-width));
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .index-stats {
        flex-direction: column;
        min-height: unset;
    }

    .index-stats>div:nth-child(2),
    .index-stats {
        gap: var(--default-margin);
    }

    .index-stats--top-ten,
    .index-stats>div:nth-child(2),
    .index-stats>div:nth-child(2)>.index-stats--best-mens,
    .index-stats>div:nth-child(2)>.index-stats--season-stat {
        width: 100%;
    }

    .index-stats--top-ten {
        background: url(/public/img/index_top-ten-bg-mobile.webp);
        background-size: 100% 100%;
        min-height: 615px;
    }

    .index-stats>div:nth-child(2)>.index-stats--best-mens {
        background: url(/public/img/index_best-mens-bg-mobile.webp);
        background-size: 100% 100%;
        min-height: 386px;
        padding-top: 37px;
        margin-top: -22px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat {
        background: url(/public/img/index_season-stat-bg-mobile.webp);
        background-size: 100% 100%;
        min-height: 532px;
    }

    .index-stats--top-ten>div>div.top-ten--header,
    .index-stats--top-ten>div>div.top-ten--item {
        grid-template-columns: 40px 40px 1fr 40px 40px 40px;
        column-gap: 5px;
    }

    .index-stats--top-ten>div>div.top-ten--header>div,
    .index-stats--top-ten>div>div.top-ten--item>div {
        height: 40px;
    }

    .index-stats--best-mens .slider-best .slide {
        row-gap: 10px;
        column-gap: 10px;
        grid-template-columns: repeat(2, calc(50% - 5px));
    }

    .index-stats--best-mens .slider-best .slide>div {
        height: 55px;
        padding: 15px;
    }

    .index-stats--best-mens .slider-best .slide>div>div p {
        line-height: 1em;
    }

    .index-stats--best-mens .slider-best .slide>div>div {
        gap: 5px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div {
        height: 145px;
        gap: 15px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(1) {
        font-size: 20px;
        height: 50px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(2),
    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(3) {
        min-height: unset;
        font-size: 15px;
    }

    .index-stats>div:nth-child(2)>.index-stats--season-stat>div>div>p:nth-child(3) {
        margin-top: -10px;
    }
}

@media screen and (max-width: calc(380px + 2em)) {
    .index-stats--top-ten>div>div.top-ten--item>div:nth-child(3)>a {
        font-size: 9px;
    }
}

@media screen and (max-width:390px) {
    .index-stats--best-mens .slider-best .slide>div {
        padding: 10px;
    }
}

.index-news-container {
    background: url(/public/img/index--white-bg-2.svg);
    background-size: max(1920px, 100vw) auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: var(--default-margin);
}

@media (orientation: portrait) {
    .index-news-container {
        background-size: auto 100%;
    }
}

.news-nuffsaid {
    background: var(--gradient-blue-2);
    border-radius: 10px;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--default-margin);
}

.news-nuffsaid>p {
    text-align: center;
    margin: 2em 0px;
    color: var(--color-blue);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.05em;
}

.stage--events .news-nuffsaid {
    margin-bottom: var(--half-margin);
}

.stage--events form {
    margin: 0px;
}

.stage--events .competition--searchbar {
    margin-bottom: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .news-nuffsaid>p {
        font-size: 20px;
    }

    .stage--events .competition--searchbar {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .news-nuffsaid {
        min-height: 205px;
    }

    .stage--events .competition--searchbar {
        margin-bottom: 20px;
    }
}

.news-title {
    background: url(/public/img/news-bg-green-title-light.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 110px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 20px;
}

.news-title form {
    margin: 0px;
}

.index-news-container .news-title {
    background: url(/public/img/news-bg-green-title.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.news-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 20px;
    row-gap: 20px;
    padding-bottom: var(--default-margin)
}

.news-item {
    background: url(/public/img/news-bg-green-light.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 597px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
}

.index-news-container .news-item {
    background: url(/public/img/news-bg-green.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.news-item>div {
    width: 384px;
    height: 264px;
    position: relative;
    border-radius: 10px;
}

.news-item>div::after {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    content: "";
    background-image: url(/public/img/news-border.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.news-item>div>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mask-image: url(/public/img/news-border-mask.webp);
    -webkit-mask-image: url(/public/img/news-border-mask.webp);
    mask-size: 100% 100%;
}

.news-item h2,
.news-item p {
    overflow-wrap: anywhere;
    width: 364px;
    margin: 0px;
}

.news-item p {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.75;
}

.news-item>a {
    margin-left: auto;
    margin-top: auto;
}

.news-page {
    min-height: max(calc(100vh - 150px), calc(100% - 150px));
}

.min-height {
    min-height: max(calc(100vh - 150px), calc(100% - 150px));
    min-height: calc(100vh - 150px);
}

.min-height::after {
    content: "";
    display: block;
    height: 1px;
}

.article,
.article>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.article h1 {
    overflow-wrap: anywhere;
    font-size: 50px;
    line-height: 50px;
}

.article>div>h1,
.article>div>p {
    background: var(--gradient-blue-2);
    border-radius: 10px;
    padding: 20px;
    margin: 0px;
}

.article-container {
    display: grid;
    grid-template-columns: 868px auto;
    grid-auto-rows: 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.article-title-image {
    width: 868px;
    height: 488px;
    position: relative;
    border-radius: 10px;
}

.article-title-image::after {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    content: "";
    background-image: url(/public/img/news-border-large.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.article-title-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mask-image: url(/public/img/news-border-mask-large.webp);
    -webkit-mask-image: url(/public/img/news-border-mask-large.webp);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.article-news {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .news-title {
        min-height: 72px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .news-item {
        min-height: 334px;
        gap: 10px;
        box-sizing: border-box;
        padding: 16px;
    }

    .news-items {
        gap: 16px;
    }

    .news-item>div {
        width: 196px;
        height: 135px;
        border-radius: 5px;
    }

    .news-item h2,
    .news-item p {
        width: 196px;
        font-size: 12px;
        line-height: 12px;
    }

    .article,
    .article>div {
        gap: 16px;
    }

    .article-container {
        grid-template-columns: 476px auto;
    }

    .article-title-image {
        width: 476px;
        height: 268px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .news-title {
        background: url(/public/img/news-bg-green-title-light--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .news-page .news-title {
        position: relative;
        margin-bottom: 75px;
    }

    .news-page .news-title form {
        position: absolute;
        top: calc(100% + 15px);
        left: 0px;
        width: 100%;
    }

    .news-page .news-title form input {
        width: 100%;
    }

    .index-news-container .news-title {
        background: url(/public/img/news-bg-green-title--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .news-title {
        min-height: 60px;
        align-items: start;
    }

    .index-news-container .news-title>a {
        font-size: 0px;
        background: url(/public/img/slider-arrow-left.svg);
        border: none;
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        display: block;
        border-radius: 0px;
        transform: rotate(180deg);
    }

    .news-items {
        grid-template-columns: repeat(1, 1fr);
    }

    .news-item {
        background: url(/public/img/news-bg-green-light--mobile.webp);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .index-news-container .news-item {
        background: url(/public/img/news-bg-green--mobile.webp);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .news-item {
        position: relative;
        align-items: end;
        min-height: 230px;
        border-radius: 5px;
    }

    .news-item>div {
        position: absolute;
        top: 15px;
        left: 15px;
        width: calc(50% - 15px);
    }

    .news-item>a {
        margin-left: unset;
        margin-right: auto;
        margin-top: auto;
    }

    .news-item h2,
    .news-item p {
        width: calc(50% - 15px);
    }

    .news-item h2 {
        font-size: 15px;
        line-height: 15px;
    }

    .article>div>h1,
    .article>div>p {
        border-radius: 5px;
    }

    .article-container {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    .article h1 {
        font-size: 20px;
        line-height: 20px;
    }

    .article-title-image {
        width: 100%;
        height: auto;
    }
}


.auth-page {
    background-image: url(/public/img/auth-bg-green.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    min-height: 285px;
    box-sizing: border-box;
    padding: 20px;
}

.auth-page p {
    margin: 0px;
}

.auth-page>div {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.auth-page>div>p {
    max-width: 22.5%;
    font-size: 0.75em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    color: var(--color-red);
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0px 0px 3px var(--color-black);
}

@media screen and (max-width: calc(720px + 2em)) {
    .auth-page>div {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .auth-page>div>p {
        max-width: 100%;
        font-size: 20px;
        text-align: center;
    }
}

/* Блок подсказок в dev на /users/auth — не наследовать .auth-page > div > p (узкая колонка, красный текст) */
.auth-page>div.auth-dev-debug {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.auth-page>div.auth-dev-debug>p {
    max-width: 100%;
    width: 100%;
    color: var(--color-blue);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    display: block;
    text-shadow: none;
    letter-spacing: 0.02em;
    align-items: unset;
    justify-content: unset;
    flex-direction: unset;
    margin-bottom: 12px;
}

.auth-page>div.auth-dev-debug code {
    font-size: 0.92em;
    word-break: break-word;
}

.auth-page>div.auth-dev-debug .auth-dev-debug__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.reg-page {
    background-image: url(/public/img/reg-bg-green.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    /* min-height: 663px; */
    box-sizing: border-box;
    padding: 20px;
}

.reg-page p {
    margin-top: 30px;
    margin-bottom: 30px;
}

.reg-page .reg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.reg-page .reg-grid>div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
}

.reg-page .reg-grid>div:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2;
}

.reg-page .reg-grid>div:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
}

.reg-page .reg-grid>div:nth-child(1)>p {
    margin: 0px;
    margin-bottom: 5px;
    font-size: 15px;
    color: var(--color-blue);
    letter-spacing: 0.04em;
}

.reg-page .reg-grid>div:not(:nth-child(1)) {
    min-height: 70px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background-color: var(--color-blue-transparent);
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    gap: 10px;
    /* max-width: calc(50% - 10px); */
    box-sizing: border-box;
}

.reg-page .reg-grid>div:not(:nth-child(1))>span {
    margin: 0px;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: min(calc((1272px - 20px) / 2), calc(50vw - 5em));
}

.reg-page .reg-grid>div:not(:nth-child(1))>span:first-child {
    opacity: 0.5;
    font-weight: 400;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .reg-page p {
        font-size: 20px;
    }

    .auth-page {
        min-height: 251px;
    }

    .auth-page p {
        font-size: 20px;
    }

    .auth-page>div.auth-dev-debug>p {
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
    }

    .auth-page p>br:first-of-type,
    .auth-page p>br:last-of-type {
        display: none;
    }

    .reg-page {
        min-height: calc(100vh - 80px - 180px);
        min-height: unset;
        background-image: url(/public/img/reg-bg-green--tablet.webp);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% 100%;

    }

    .reg-page .reg-grid>div:not(:nth-child(1)) {
        padding: 10px 15px;
        min-height: 50px;
        border-width: var(--border-width);
        border-radius: 5px;
    }

    .reg-page .reg-grid>div:not(:nth-child(1))>span {
        max-width: calc((680px - 120px) / 2);
        font-size: 10px;
        line-height: 10px;
    }

    .autocomplete-input>img {
        height: 35px;
        width: 35px;
        border-width: var(--border-width);
        border-radius: 5px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .reg-page p {
        font-size: 12px;
    }

    .auth-page {
        background-image: url(/public/img/auth-bg-green--mobile.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .reg-page .reg-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .reg-page>a.button {
        margin-top: 10px;
    }

    .autocomplete-input>img {
        width: 45px;
        height: 45px;
    }

    .reg-page {
        background-image: url(/public/img/reg-bg-green--mobile.webp);
        background-position: center bottom;
        min-height: unset;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}




/* Личное дело */

.personal-file--container {
    background: url(/public/img/personal_file_bg.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
}

.personal-file--container>div:nth-child(4) {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.personal-file--container>h1 {
    margin-bottom: 30px;
}

.personal-file--main-info {
    position: relative;
}

.personal-file--container .personal-file--main-info>div {
    transition: all 0.5s ease-in-out;
}

.personal-file--container .personal-file--main-info>div:not(.active) {
    opacity: 0;
    top: 0px;
    width: 100%;
    box-sizing: border-box;
    z-index: -100;
    position: absolute;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after {
    padding: 20px;

    display: flex;
    flex-direction: column;
    /* align-items: start;
    justify-content: space-between; */
    gap: 20px;
    flex-wrap: nowrap;


    background: url(/public/img/personal_file_bg_after.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div:nth-child(2) {
    justify-content: end;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div:nth-child(2)>a:nth-child(1) img {
    transform: rotate(180deg);
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>img {
    width: 267px;
    height: 267px;

    box-sizing: border-box;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div h1 {
    font-size: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(945px - 196px - 20px);
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div {
    width: 945px;
    height: 267px;
    display: flex;
    flex-direction: column;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.moderation,
.moderation-id,
.moderation-rejected {
    display: block;
    width: 196px;
    height: 50px;
    border-radius: 10px;
    background: var(--gradient-black-transparent);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.moderation>span,
.moderation-id>span,
.moderation-rejected>span {
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div .rejected>span {
    color: var(--color-red);
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>p {
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-white-half);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>p>span {
    color: var(--color-white);
    font-weight: 500;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(3) {
    margin-top: auto;
    background: var(--color-blue-transparent);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    box-sizing: border-box;
    padding: 15px 20px;
    height: 130px;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(3)>div {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(3)>div>p {
    overflow-wrap: anywhere;
    margin-top: 0px;
}

.personal-file--non-editable {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 10px));
    column-gap: 20px;
    row-gap: 10px;
    grid-auto-rows: 1fr;
    margin-top: 20px;
}

.personal-file--non-editable .personal-file--non-editable--single {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-penta-transparent);

    font-size: 15px;
    line-height: 15px;
}

.personal-file--non-editable .personal-file--non-editable--double {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 5px));
    column-gap: 10px;
    row-gap: 10px;
    grid-auto-rows: 1fr;
}

.personal-file--non-editable .personal-file--non-editable--single>p {
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.personal-file--non-editable .personal-file--non-editable--single>p:nth-child(1) {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

.personal-file--non-editable .personal-file--non-editable--single>p:nth-child(2) {
    font-weight: 500;
    color: white;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while {
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-black-penta);
    padding: 20px;
    box-sizing: border-box;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while>form {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 20px;
    margin: 0px;
    width: 100%;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar {
    width: 158px;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar>label {
    width: 158px;
    position: relative;
    cursor: pointer;
    display: block;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar>label input {
    display: none;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar img:nth-child(1) {
    width: 158px;
    height: 158px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    display: block;
    box-sizing: border-box;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar img:nth-child(2) {
    position: absolute;
    right: 10px;
    top: calc(158px - 10px - 55px);
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar p {
    font-size: 10px;
    line-height: 10px;
    opacity: 0.5;
    margin-top: 10px;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--fields {
    width: calc(100% - 158px - 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--fields p {
    font-size: 15px;
    line-height: 15px;
    margin: 0px;
    font-weight: 500;
    color: var(--color-blue);
    margin-bottom: 8px;
}

.main-info--while--field-double {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 5px));
    column-gap: 10px;
    row-gap: 10px;
    grid-auto-rows: 1fr;
}

.main-info--while--field-triple {
    display: grid;
    grid-template-columns: 1fr 292px;
    column-gap: 20px;
    row-gap: 10px;
    grid-auto-rows: 1fr;
}

.main-info--while--field-triple>div:last-child {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: end;
}

.main-info--while--field-triple>div:last-child>input {
    width: 100%;
}

.main-info--while--field-triple>div:last-child>a {
    width: 55px;
}


@media screen and (min-width: calc(1312px + 2em)) {
    .personal-file--non-editable>div:last-child {
        display: none;
    }
}

@media screen and (max-width: calc(1312px + 2em)) {
    .personal-file--non-editable {
        column-gap: 10px;
    }

    .personal-file--non-editable>div.duplicated {
        display: none;
    }

    .personal-file--container {
        background: url(/public/img/personal_file_bg--tablet.webp);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after {
        background: url(/public/img/personal_file_bg_after--tablet.webp);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>img {
        width: 210px;
        border-radius: 5px;
        height: 210px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div {
        width: calc(100% - 210px - 20px);
        height: 210px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(3) {
        padding: 10px;
        border-radius: 5px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div h1 {
        font-size: 20px;
        line-height: 20px;
        width: calc(403px - 103px - 20px);
    }

    .moderation,
    .moderation-id,
    .moderation-rejected {
        height: 30px;
        width: 103px;
        border-radius: 5px;
    }

    .moderation>span,
    .moderation-id>span,
    .moderation-rejected>span {
        font-size: 10px;
    }

    .personal-file--non-editable {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .personal-file--non-editable .personal-file--non-editable--single {
        border-radius: 5px;
        padding: 7px 15px;
    }

    .personal-file--non-editable>div {
        width: calc(50% - 5px);
        box-sizing: border-box;
    }

    .personal-file--non-editable .personal-file--non-editable--double {
        width: 100%;
    }

    .personal-file--non-editable .personal-file--non-editable--single>p {
        font-size: 10px;
        line-height: 12px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar {
        width: 114px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar>label {
        width: 114px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar img:nth-child(1) {
        width: 114px;
        height: 114px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar img:nth-child(2) {
        width: 50px;
        height: 50px;
        top: calc(114px - 10px - 55px);
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--fields p {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .main-info--while--field-triple {
        display: flex;
        flex-direction: column;
    }

    .main-info--while--field-triple>div:last-child {
        width: 172px;
        gap: 10px;
        margin-left: auto;
        margin-top: 8px;
    }

    .main-info--while--field-triple>div:last-child>a {
        width: 35px;
    }

    .main-info--while--field-triple>div:last-child>a>img {
        width: 15px;
        height: 15px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .personal-file--container>div:nth-child(4) {
        justify-content: end;
        margin-top: 10px;
        gap: 10px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar>label {
        width: 81px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while>form {
        flex-direction: column;
        position: relative;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--fields {
        width: 100%;
    }

    .main-info--while--field-double {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .main-info--while--field-triple>div:last-child>a {
        width: 45px;
    }

    .main-info--while--field-triple>div:last-child {
        width: auto;
    }

    .main-info--while--field-triple>div:last-child>input {
        width: 122px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 81px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar img:nth-child(1) {
        width: 81px;
        height: 81px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar img:nth-child(2) {
        width: 45px;
        height: 45px;
        /* top: calc(81px + 25px + 3px); */
        /* left: unset; */
        /* right: calc(100% + 5px); */
        top: calc(114px - 10px - 63px);
        right: -5px;
    }

    .main-info--while--fields>div:first-child>div:first-child {
        width: calc(100% - 91px);
        margin-left: auto;
        height: 81px;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar p {
        position: absolute;
        top: 0px;
        margin-top: 0px;
        left: calc(100% + 10px);
        width: calc(100vw - 128px - 81px);
        white-space: nowrap;
    }

    .personal-file--non-editable>div {
        width: 100%;
    }

    .personal-file--non-editable .personal-file--non-editable--double {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .personal-file--non-editable .personal-file--non-editable--double>div {
        width: 100%;
        box-sizing: border-box;
    }

    .personal-file--non-editable>div:last-child {
        display: none;
    }

    .personal-file--non-editable>div.duplicated {
        display: flex;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div {
        position: relative;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>img {
        position: absolute;
        width: 94px;
        height: 94px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div h1 {
        font-size: 15px;
        line-height: 15px;
        width: 100%;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(1) {
        padding-left: 104px;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: start;
        min-height: 55px;
        gap: 10px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>p {
        padding-left: 104px;
        font-size: 10px;
        width: 100%;
        box-sizing: border-box;
        white-space: unset;
        text-overflow: unset;
        line-height: 1.25em;
        font-size: 10px;
        margin-top: 10px;
        min-height: calc(94px - 10px - 55px);
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div {
        width: 100%;
    }

    .personal-file--container {
        background: none;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .personal-file--container>h1 {
        z-index: 10;
        position: relative;
    }

    .personal-file--container .personal-file--main-info {
        position: relative;
        margin-bottom: 60px;
    }

    .personal-file--container .personal-file--main-info::before {
        background: url(/public/img/personal_file_bg--mobile.webp);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;

        content: "";

        position: absolute;
        left: -20px;
        top: -70px;
        width: calc(100% + 40px);
        height: calc(100% + 100px);

    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div>div>div:nth-child(3) {
        margin-top: 10px;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div:nth-child(2) {
        margin-top: 15px;
        gap: 10px;

    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after>div:nth-child(2)>.button {
        white-space: nowrap;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    .personal-file--container .personal-file--main-info>.personal-file--main-info--after {
        padding: 0px;
        background: unset;
    }

}


@media screen and (max-width: calc(394px)) {
    .personal-file--container .personal-file--main-info>.personal-file--main-info--while .main-info--while--avatar p {
        font-size: 8px;
    }
}



/* Страница "Роли" */
.roles-page {
    display: grid;
    grid-template-columns: 868px 424px;
    column-gap: 20px;
}

.role-info {
    background: url(/public/img/roles-page--info-bg.webp);
    background-size: 100% 100%;
    width: 100%;
    /* min-height: 755px; */
    box-sizing: border-box;
    padding: 20px;
    padding-top: 30px;
}

.role-info>div:not(.active) {
    display: none;
}

.role-info>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-info>div>div:nth-child(1)>div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-content: center;
    gap: 20px;
}

.role-info>div>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-info>div>div:nth-child(1)>div:first-child>h2 {
    width: calc(100% - 40px);
}

.role-info>div>div:nth-child(1)>div:first-child>span {
    font-size: 20px;
    line-height: 20px;
    font-weight: 900;
    font-family: "icomoon";
}


.text-scroll {
    background: var(--gradient-black-transparent);
    border-radius: 10px;
    /* border: var(--border-width)  solid var(--color-blue); */
    box-sizing: border-box;
    padding: 15px 20px;
    height: 130px;
}

.text-scroll>div {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.text-scroll>div>p {
    overflow-wrap: anywhere;
    margin: 0px;
}

.role-info>div:first-child>div>.text-scroll {
    height: 220px;
}

.role-info>div .slide .text-scroll {
    height: 195px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role-info>div .slide .text-scroll h2 {
    font-size: 20px;
    line-height: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .role-info>div .slide .text-scroll h2 {
        font-size: 10px;
        line-height: 10px;
    }

    .role-info>div .slide .text-scroll,
    .role-info>div:first-child>div>.text-scroll {
        padding: 15px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .role-info>div .slide .text-scroll h2 {
        font-size: 15px;
        line-height: 15px;
    }
}

.role-info>div>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-info>div .slide a.button {
    margin-top: 20px;
}

.role-info>div>div:nth-child(2)>div:nth-child(2) {
    display: grid;
    grid-template-columns: 66px calc(100% - 132px - 30px) 66px;
    column-gap: 15px;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>img,
.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>img,
.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1),
.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(3) {
    width: 66px;
    height: 66px;
    cursor: pointer;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div {
    transition: all 0.15s ease-in-out;
    /* transform: scale(0); */
    margin-right: -15px;
    display: none;
    width: 0px;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div>img {
    width: 100%;
    padding: 15%;
    box-sizing: border-box;
    height: auto;
    background: url(/public/img/skill-bg.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.prev {
    grid-area: 1 / 1 / 2 / 2;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.active {
    grid-area: 1 / 2 / 2 / 3;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.next {
    grid-area: 1 / 3 / 2 / 4;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.active,
.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.prev,
.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.next {
    display: block;
    cursor: pointer;
    width: 100%;
    margin-right: 0px;
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.next,
.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.prev {
    transform: scale(0.9);
}

.role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.active {
    transform: scale(1.1);
}

@media screen and (max-width: calc(1312px + 2em)) {
    .roles-page {
        grid-template-columns: 472px 232px;
    }

    .roles-page .characters--roles {
        background: url(/public/img/roles-page--characters-bg--tablet.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 15px;
    }

    .role-info {
        background: url(/public/img/roles-page--info-bg--tablet.webp);
        background-size: 100% 100%;
        padding: 15px;
    }

    .role-info h2 {
        font-size: 15px;
        line-height: 15px;
    }

    .role-info>div .slide a.button {
        margin-top: 10px;
    }

    .role-info>div>div:nth-child(2) {
        gap: 10px;
    }

    .role-info>div:first-child>div>.text-scroll {
        height: 111px;
    }

    .role-info>div .slide .text-scroll {
        height: 142px;
    }

    .role-info>div>div:nth-child(2)>div:nth-child(2) {
        grid-template-columns: 34px calc(100% - 68px - 20px) 34px;
        gap: 10px;
    }

    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>img,
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>img,
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1),
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(3) {
        height: 34px;
        width: 34px;
    }

    .role-info {
        min-height: 296px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .roles-page .characters--roles {
        padding: 50px 16px;
        padding-bottom: 75px;
        position: relative;
        width: 100%;
        min-height: unset;

        background: url(/public/img/index--green-bg-5--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .roles-page {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .role-info {
        background: unset;
        padding: 0px;
    }

    .role-info>div>div:nth-child(1)>div:first-child {
        padding: 0px 20px;
    }

    .role-info>div>div:nth-child(1) {
        /* background: url(/public/img/roles-page--roles-description--mobile.webp);
        background-position: center;
        background-size: 100% 100%; */
        /* background-repeat: no-repeat; */
        padding: 20px;
        gap: 18px;
    }

    .role-info>div>div:nth-child(2) {
        background: url(/public/img/roles-page--skill-description--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 20px;
        gap: 10px;
    }

    .role-info h2 {
        font-size: 20px;
        line-height: 20px;
    }

    .role-info>div>div:nth-child(1)>div:first-child {
        padding: 0px;
    }

    .role-info>div>div:nth-child(2)>h2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>img,
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>img,
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1),
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(3) {
        width: 50px;
        height: 50px;
    }

    .role-info>div>div:nth-child(2)>div:nth-child(2) {
        grid-template-columns: 50px calc(100% - 100px - 20px) 50px;
    }

    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.active,
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.prev,
    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div.next {
        max-width: 50px;
    }

    .role-info>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2) {
        justify-content: center;
    }
}

.lk-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lk-page--info {
    background: url(/public/img/lk_bg_1.webp);
    background-size: 100% 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lk-page--info>div {
    padding: 20px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 254px calc(100% - 254px - 20px);
    column-gap: 20px;
}

.lk-page--info>div>div:nth-child(1) {
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
    box-sizing: border-box;
    width: 254px;
    height: 254px;
}

.lk-page--info>div>div:nth-child(1)>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.lk-page--info>div>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lk-page--info>div>div:nth-child(2)>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lk-page--info>div>div:nth-child(2)>div:nth-child(1)>h2 {
    font-size: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(945px - 196px - 20px);
}

.lk-page--info>div>div:nth-child(2)>p:nth-child(2) {
    font-size: 30px;
    line-height: 30px;
    opacity: 0.5;
    margin: 0px;
}

.lk-page--region,
.lk-page--tags {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.lk-page--tags {
    flex-wrap: wrap;
    font-size: 25px;
    line-height: 25px;
}

.lk-page--tags>*>span:nth-child(1) {
    opacity: rgba(255, 255, 255, 0.5);
}

.lk-page--tags>*>span:not(:last-child) {
    margin-right: 0.5em;
    font-weight: 400;
}

.lk-page--region>*,
.lk-page--tags>* {
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--gradient-black-transparent);
    color: inherit;
}

.lk-page--region>*:nth-child(1) {
    width: 55px;
}

.lk-page--region>*:nth-child(1)>img {
    width: 39px;
    height: 39px;
    object-fit: contain;
    object-position: center;
}

.lk-page--region>*:not(:nth-child(1)),
.lk-page--tags>* {
    padding-left: 25px;
    padding-right: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lk-page--info a.button {
    margin-left: auto;
}


.lk-page--more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.lk-page--more>div {
    padding: 20px;
    box-sizing: border-box;
}

.lk-page--more>div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
    background: url(/public/img/lk_bg_2.webp);
    background-size: 100% 100%;
}

.lk-page--more>div:nth-child(1).locked {
    background: url(/public/img/lock-blue.svg), url(/public/img/lk_bg_2.webp);
    background-position: center;
    background-size: 124px 96px, 100% 100%;
    background-repeat: no-repeat;
}

.lk-page--more>div:not(:first-child):not(:last-child) {
    grid-area: 1 / 2 / 3 / 3;
    width: 535px;
}

.lk-page--more>div:last-child {
    grid-area: 2 / 1 / 3 / 2;
    background: url(/public/img/lk_bg_3.webp);
    background-size: 100% 100%;
}

.lk-page--more>div:last-child.locked {
    background: url(/public/img/lock-blue.svg), url(/public/img/lk_bg_3.webp);
    background-position: center;
    background-size: 124px 96px, 100% 100%;
    background-repeat: no-repeat;
}

.lk-page--more>div:not(:nth-child(1)):not(:first-child).locked {
    background: url(/public/img/lock-blue.svg), url(/public/img/lk_bg_3.webp);
    background-position: center;
    background-size: 124px 96px, 100% 100%;
    background-repeat: no-repeat;
}

.lk-page--near-events,
.lk-page--near-familyevents {
    /* background: url(/public/img/lk_bg_4.webp); */
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 72.85%);
    border-radius: var(--border-radius);
    background-size: 100% 100%;
    /* min-height: 251px; */
}

.lk-page--near-events.locked,
.lk-page--near-familyevents.locked {
    background: url(/public/img/lock-blue.svg), url(/public/img/lk_bg_4.webp);
    background-position: center;
    background-size: 124px 96px, 100% 100%;
    background-repeat: no-repeat;
}

.lk-page--team-creation {
    position: relative;
    background: var(--gradient-blue-2);
    background-size: 100% 100%;
    border-radius: 10px;
    border: unset;
    transition: all 0.15s ease-in-out;
}

.lk-page--team-creation:not(.active)>form {
    opacity: 0;
    position: relative;
    z-index: -9999;
    transition: all 0.15s ease-in-out;
}

.lk-page--team-creation:not(.active)>.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    max-width: calc(100% - (var(--default-padding) * 2));
    height: auto;

    display: flex;
    flex-direction: column;
    gap: calc(var(--default-padding) * 2);
    text-align: center;
    justify-content: center;
    align-items: center;
}

.lk-page--team-creation:not(.active)>.text p {
    color: var(--color-blue);
    text-align: center;
    font-weight: 500;
}

.lk-page--team-creation:not(.active)>.text a:not(.button) {
    color: white;
}

.lk-page--team-creation.active>a.button {
    display: none;
}

.lk-page--team-creation.active {
    background: transparent;
    border: var(--border-width) solid var(--color-blue);
}

.lk-page--team-creation>form {
    min-height: calc(692px - 40px);
    margin: 0px;
}

.lk-page--team-creation.active>form {
    opacity: 1;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.15s ease-in-out;

}

.lk-page--team-creation form>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.lk-page--team-creation form>div:nth-child(1) label {
    display: block;
    width: 158px;
    position: relative;
    cursor: pointer;
}

.lk-page--team-creation form>div:nth-child(1) label>img:nth-child(1) {
    width: 158px;
    height: 158px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    display: block;
    box-sizing: border-box;
}

.lk-page--team-creation form>div:nth-child(1) label>img:nth-child(2) {
    position: absolute;
    right: 10px;
    top: calc(158px - 10px - 55px);
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
}

.lk-page--team-creation form>div:nth-child(1) label>input {
    display: none;
}

.lk-page--team-creation form>div:nth-child(1) label>p {
    font-size: 10px;
    line-height: 10px;
    opacity: 0.5;
    margin-top: 10px;
}

.lk-page--team-creation form>div:nth-child(2)>p,
.lk-page--team-creation form>div:nth-child(3)>p {
    margin: 0px;
    margin-bottom: 8px;
    font-size: 15px;
    /* line-height: 15px; */
    color: var(--color-blue);
}

.lk-page--team-creation form>div:nth-child(4) {
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-transparent);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 20px;
    margin-top: 10px;
}

.lk-page--team-creation form>div:nth-child(4)>p:nth-child(1) {
    opacity: 0.5;
    font-size: 15px;
    line-height: 15px;
    margin: 0px;
}

.lk-page--team-creation form>div:nth-child(4)>p:nth-child(2) {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 0px;
    font-size: 15px;
    line-height: 15px;
    white-space: nowrap;
}

.lk-page--team-creation form>div:nth-child(5) {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: end;
    justify-content: end;
}

.lk-page--team-creation form>div:nth-child(5)>a {
    width: 55px;
}



.lk-page--team-members {
    min-height: 692px;
    display: flex;
    flex-direction: column;
    background: var(--gradient-blue-2);
    border-radius: 10px;
    gap: 20px;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 20px;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2) {
    height: 520px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a {
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: top;
    align-items: center;
    width: calc(100% - 20px);
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--gradient-black-transparent);
    padding: 15px 20px;
    height: 88px;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a.locked {
    min-height: 88px;
    border: var(--border-width) solid var(--color-blue);
    background: url(/public/img/lock-blue.svg), var(--gradient-black-transparent);
    background-position: center;
    background-size: 73px 56px, 100% 100%;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>a {
    width: 60px;
    height: 60px;
    display: block;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>img,
.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>*:nth-child(1)>img {
    width: 60px;
    height: 60px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>div>p {
    font-size: 20px;
    line-height: 20px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px;
    color: white;
}

.lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>div>p:nth-child(2) {
    color: rgba(255, 255, 255, 0.5);
}

.lk-page--team-members>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

.lk-page--team-members>div:nth-child(2)>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    flex-wrap: nowrap;
}

.lk-page--team-members>div:nth-child(2)>a.button {
    width: min-content;
    text-align: center;
    white-space: normal;
    height: 62px;
}

.lk-page--team-members>div:nth-child(2) .stage-final--slider-arrow,
.lk-page--team-members>div:nth-child(2) .stage-final--slider-arrow>img {
    width: 62px;
    height: 62px;
}

.stage-final--slider-v2 .stage-final--slider-arrow>img:nth-child(2) {
    display: none;

    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.stage-final--slider-v2 .stage-final--slider-arrow>img:nth-child(2):focus {
    outline: none !important;
}

.lk-page--team-members>div:nth-child(2) .slider-controls>div {
    min-width: 105px;
    padding: 0px 10px;
    height: 62px;
    border-radius: 10px;
    background: var(--gradient-black-transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
}

.lk-page--team-members>div:nth-child(2) .slider-controls>div:not(.active) {
    display: none;
}


.lk-page--team-info {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 20px;
    width: 757px;
    height: 238px;
}

.lk-page--team-info>img,
.lk-page--team-info>a>img {
    width: 123px;
    height: 123px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    object-fit: cover;
    object-position: center;

    box-sizing: border-box;
}

.lk-page--team-info>a {
    width: 123px;
    height: 123px;
}

.lk-page--team-info>div {
    display: flex;
    flex-direction: column;
    align-items: end;
    width: calc(100% - 123px - 20px);

    gap: 20px;
}

.lk-page--team-info>div .btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 20px;
}

.lk-page--team-info>div>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lk-page--team-info>div>div:nth-child(1) h2 {
    font-size: 25px;
    line-height: 25px;
    width: calc(757px - 196px - 40px - 40px - 123px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--default-padding);
}

.lk-page--team-info.no-status>div>div:nth-child(1) h2 {
    width: calc(757px - 40px - 40px - 123px);
}

.lk-page--team-info.no-status>div>div:nth-child(1) .moderation {
    display: none;
}

.lk-page--team-info .lk-page--region {
    font-size: 20px;
}

.lk-page--team-info .lk-page--region .moderation {
    display: none;
}

.lk-page--team-info>div>div:nth-child(1) h2 * {
    color: inherit;
}

.lk-page--team-info>div>div:nth-child(1) h2 :nth-child(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 60px);
}

.lk-page--team-info>div>div:nth-child(1) h2 :nth-child(2) {
    opacity: 0.5;
    font-size: 20px;
    white-space: nowrap;
    text-transform: none;
    font-weight: 500;
    font-family: "Pragmatica";
    font-style: normal;
}

.lk-page--team-info .lk-page--region {
    width: 100%;
}

.lk-page--team-info .lk-page--region>*:nth-child(2) {
    font-size: 20px;
    line-height: 20px;
}

.lk-page--team-rating {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 434px;
}

.lk-page--team-rating>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: scroll;
    overflow-y: auto;
    gap: 20px;
    padding-bottom: 20px;
    width: 717px;
}

.lk-page--team-rating>div:nth-child(2)>div {
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-penta-transparent);
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 99px;
    box-sizing: border-box;
    width: 127px;
    min-width: 127px;
}

.lk-page--team-rating>div:nth-child(2)>div:hover {
    border-color: var(--color-white);
}

.lk-page--team-rating>div:nth-child(2)>div>img,
.trooper--trophy>div>div img {
    width: auto;
    height: 81px;
    max-height: 81px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0px 1px 3px #000000c6);
}

.lk-page--team-rating>div:nth-child(4) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
}

.lk-page--team-rating>div:nth-child(4)>div {
    height: 145px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: calc(var(--default-padding) - var(--border-width));
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-penta-transparent);
    transition: all 0.15s ease-in-out;
}

.lk-page--team-rating>div:nth-child(4)>div p {
    margin: 0px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}

.lk-page--team-rating>div:nth-child(4)>div p:nth-child(1) {
    text-align: center;
    border-radius: 10px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gradient-black-transparent);
    transition: all 0.15s ease-in-out;
}

.lk-page--team-rating>div:nth-child(4)>div p:nth-child(2) {
    margin-top: auto;
    margin-bottom: auto;
}

.lk-page--team-rating>div:nth-child(4)>div p:nth-child(3) {
    font-size: 15px;
    line-height: 15px;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
}

.lk-page--team-rating>div:nth-child(4)>div:hover {
    border-color: var(--color-white);
}

.lk-page--team-rating>div:nth-child(4)>div:hover p:nth-child(1) {
    background: var(--gradient-white-transparent);
}

.lk-page--team-rating>div:nth-child(4)>div:hover p:nth-child(3) {
    opacity: 1;
}


.lk-page--near-events,
.lk-page--near-familyevents {
    padding: 20px;
}

.lk-page--near-events>div,
.lk-page--near-familyevents>div {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lk-page--near-events>div>div,
.lk-page--near-familyevents>div>div {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    background: var(--color-blue-penta-transparent);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    padding: 20px;
}

.lk-page--near-events>div>div>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 220px);
}

.lk-page--near-familyevents>div>div>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk-page--near-events>div>div>div>span:nth-child(1),
.lk-page--near-familyevents>div>div>div>span:nth-child(1) {
    font-size: 20px;
    line-height: 20px;
}

.lk-page--near-events>div>div>div>span:nth-child(2),
.lk-page--near-familyevents>div>div>div>span:nth-child(2) {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.5;
}

.lk-page--near-events .lk-page--region,
.lk-page--near-familyevents .lk-page--region {
    max-width: 100%;
    flex-wrap: wrap;
}


.lk-page--team-info {
    position: relative;
}

.lk-page--team-info a.button+div.mentor-contacts {
    opacity: 0;
    z-index: -9;
    transition: all 0.25s ease-in-out;
    display: flex;

    position: absolute;
    width: 427px;
    max-width: 100%;
    height: auto;
    top: 100%;
    right: 0px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--color-blue);
    background: black var(--gradient-blue-2);
    gap: 10px;
    flex-direction: column;
}

.lk-page--team-info a.button:hover+div.mentor-contacts,
.lk-page--team-info a.button+div.mentor-contacts:hover {
    opacity: 1;
    z-index: 9;
}

.lk-page--team-info a.button+div.mentor-contacts>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    gap: 10px;
    height: 70px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-penta-transparent);
    padding: 0px 15px;
}

.lk-page--team-info a.button+div.mentor-contacts>div p {
    margin: 0px;
    font-size: 15px;
    line-height: 15px;
}

.lk-page--team-info a.button+div.mentor-contacts>div p:first-child {
    opacity: 0.5;
    font-weight: 400;
}

.lk-page--team-info a.button+div.mentor-contacts>div p:last-child {
    font-weight: 500;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .lk-page--team-members>div:nth-child(2)>a.button {
        height: 35px;
    }

    .lk-page--team-info>div>div:nth-child(1) .moderation {
        display: none;
    }

    .lk-page--info {
        background: url(/public/img/lk_bg_1--tablet.webp);
        background-size: 100% 100%;
    }

    .lk-page--info>div {
        grid-template-columns: 158px calc(100% - 158px - 20px);
    }

    .lk-page--info>div>div:nth-child(1) {
        border-radius: 5px;
        width: 158px;
        height: 158px;
    }

    .lk-page--info>div>div:nth-child(2)>div:nth-child(1)>h2 {
        font-size: 20px;
        line-height: 20px;
        width: calc(456px - 103px - 20px);
    }

    .lk-page--info>div>div:nth-child(2)>p:nth-child(2) {
        font-size: 15px;
        line-height: 15px;
    }

    .lk-page--info>div>div:nth-child(2) {
        gap: 10px;
    }

    .lk-page--region>*,
    .lk-page--tags>* {
        height: 35px;
        border-radius: 5px;
    }

    .lk-page--region>*:nth-child(1) {
        width: 35px;
    }

    .lk-page--region>*:nth-child(1)>img {
        width: 24px;
        height: 24px;
    }

    .lk-page--info a.button {
        margin-top: auto;
    }

    .lk-page--more>div:nth-child(1) {
        width: 369px;
        background: url(/public/img/lk_bg_2--tablet.webp);
        background-size: 100% 100%;
        background-position: center bottom;
        height: 149px;
        display: grid;
        grid-template-columns: 66px 1fr;
        column-gap: 16px;
    }

    .lk-page--team-info:not(.no-status) .lk-page--region .moderation {
        display: flex;
    }

    .lk-page--more>div:last-child {
        min-height: 279px;
        width: 369px;
        background: url(/public/img/team_trophy_bg--mobile.webp);
        background-size: 100% 100%;
    }

    .lk-page--more>div:not(:first-child):not(:last-child) {
        min-height: 446px;
        width: 335px;
        border-width: var(--border-width);
        border-radius: 5px;
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a.locked {
        min-height: 45px;
        border-radius: 5px;
        background-size: 35px auto, 100% 100%;
        border-width: var(--border-width);
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a {
        height: 45px;
        min-height: 45px;
        gap: 10px;
        border-radius: 5px;
        padding: 0px 15px;
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>a,
    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>img,
    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>*:nth-child(1)>img {
        height: 25px;
        width: 25px;
        border-radius: 5px;
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>div>p {
        font-size: 10px;
        line-height: 10px;
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2) {
        height: 363px;
        align-items: center;
    }

    .lk-page--more>div {
        position: relative;
        padding: 15px;
    }

    .lk-page--team-info>img,
    .lk-page--team-info>a>img {
        width: 66px;
        height: 66px;
        position: unset;
        box-sizing: border-box;
        top: 15px;
        left: 15px;
    }

    .lk-page--team-info>a {
        width: 66px;
        height: 66px;
    }

    .lk-page--team-info .lk-page--region {
        margin-top: 0px;
    }

    .lk-page--team-info>div>div:nth-child(1) {
        /* padding-left: 68px; */
        /* height: 53px; */
        width: 100%;
        flex-direction: column;
        gap: 10px;
        align-items: start;
        box-sizing: border-box;
    }

    .lk-page--team-info.no-status>div>div:nth-child(1) h2,
    .lk-page--team-info>div>div:nth-child(1) h2 {
        font-size: 15px;
        line-height: 15px;
        width: calc(369px - 30px - 16px - 66px);
    }

    .lk-page--team-info>div>div:nth-child(1) h2 :nth-child(1) {
        width: calc(100%);
        max-width: calc(100%);
    }

    .lk-page--team-info.no-status>div>div:nth-child(1) h2 :nth-child(1) {
        width: calc(100% - 50px - 10px);
        max-width: calc(100% - 60px);
    }

    .lk-page--team-info>div {
        width: calc(369px - 30px - 16px - 66px);
        gap: 15px;
    }

    .lk-page--team-info .lk-page--region>*:last-child:not(.moderation) {
        font-size: 10px;
        line-height: 10px;
        padding-left: 15px;
        padding-right: 15px;
        display: none;
    }

    .lk-page--team-info>div .btns {
        gap: 10px;
    }

    .lk-page--team-info>div>div:nth-child(1) h2 :nth-child(2) {
        font-size: 10px;
    }

    .lk-page--team-info .button>img {
        display: none;
    }

    .lk-page--team-rating>div:nth-child(2)>div {
        height: 57px;
        width: 61px;
        min-width: 61px;
        border-radius: 5px;
        border-width: var(--border-width);
    }

    .lk-page--team-rating>div:nth-child(2)>div>img,
    .trooper--trophy>div>div {
        width: auto;
        height: 33px;
    }

    .lk-page--team-rating>div:nth-child(2) {
        gap: 8px;
        width: 337px;
        padding-bottom: 10px;
    }

    .lk-page--team-rating>div:nth-child(4)>div {
        height: 78px;
        padding: 8px;
        border-width: var(--border-width);
        border-radius: 5px;
    }

    .lk-page--team-rating>div:nth-child(4)>div p {
        font-size: 10px;
        line-height: 10px;
    }

    .lk-page--team-rating>div:nth-child(4)>div p:nth-child(3) {
        font-size: 8px;
        line-height: 8px;
    }

    .lk-page--team-rating>div:nth-child(4)>div:first-child p>br {
        display: none;
    }

    .lk-page--team-rating>div:nth-child(4)>div p:nth-child(1) {
        height: 25px;
        border-radius: 5px;
    }

    .lk-page--team-members>div:nth-child(2)>div {
        gap: 10px;
    }

    .lk-page--team-members>div:nth-child(2) .slider-controls>div {
        min-width: 64px;
        height: 35px;
        font-size: 10px;
        line-height: 10px;
        border-radius: 5px;
    }

    .lk-page--team-creation form>div:nth-child(1) {
        flex-direction: column;
        gap: 10px;
    }

    .lk-page--team-creation form>div:nth-child(1) label {
        width: 100%;
        flex-direction: row;
        align-items: end;
        display: flex;
        gap: 10px;
    }

    .lk-page--team-creation form>div:nth-child(1) label>img:nth-child(1) {
        height: 114px;
        width: 114px;
    }

    .lk-page--team-creation form>div:nth-child(1) label>img:nth-child(2) {
        top: calc(114px - 10px - 50px);
        left: calc(114px - 10px - 50px);
        width: 50px;
        height: 50px;
    }

    .lk-page--team-creation form>div:nth-child(1) label>p {
        width: calc(100% - 114px - 10px);
    }

    .lk-page--team-creation form>div:nth-child(5)>a {
        width: 35px;
    }

    .lk-page--team-creation form>div:nth-child(5)>a img {
        width: 15px;
    }

    .lk-page--team-creation form>div:nth-child(4) {
        padding: 10px 15px;
        border-radius: 5px;
        border-width: var(--border-width);
    }

    .lk-page--team-creation form>div:nth-child(4)>p:nth-child(1) {
        font-size: 10px;
        line-height: 10px;
    }

    .lk-page--team-creation>form {
        min-height: calc(446px - var(--default-padding) - var(--default-padding));
    }

    .lk-page--near-events,
    .lk-page--near-familyevents {
        background: url(/public/img/lk_bg_4--tablet.webp);
        background-size: 100% 100%;
        padding: 15px;
    }

    .lk-page--near-events>div>div>div,
    .lk-page--near-familyevents>div>div>div {
        width: calc(100% - 140px);
    }

    .lk-page--near-events>div>div>div>span:nth-child(2),
    .lk-page--near-events>div>div>div>span:nth-child(1),
    .lk-page--near-familyevents>div>div>div>span:nth-child(2),
    .lk-page--near-familyevents>div>div>div>span:nth-child(1) {
        font-size: 15px;
        line-height: 15px;
    }

    .lk-page--tags {
        font-size: 10px;
        line-height: 10px;
    }

    .lk-page--region>*:not(:nth-child(1)),
    .lk-page--tags>* {
        padding-left: 10px;
        padding-right: 10px;
    }

    .lk-page--region {
        font-size: 10px;
        line-height: 10px;
    }

    .lk-page--info a.button {
        padding-left: 10px;
        padding-right: 10px;
        gap: 5px
    }

    .lk-page--info a.button img {
        width: 15px;
    }

    .lk-page--info>div>div:nth-child(2) {
        gap: 13px;
    }

    .lk-page--team-members>div:nth-child(2) .stage-final--slider-arrow,
    .lk-page--team-members>div:nth-child(2) .stage-final--slider-arrow>img {
        height: 35px;
        width: 35px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk-page--team-members>div:nth-child(2)>a.button {
        height: 45px;
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>a,
    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>img,
    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>*:nth-child(1)>img {
        border-radius: 5px;
    }

    .lk-page--team-members>div:nth-child(1)>div>div:nth-child(2)>a>div {
        gap: 5px;
    }

    .lk-page--info {
        background: var(--gradient-blue-2);
        border-radius: 5px;
    }

    .lk-page--team-info a.button+div.mentor-contacts>div {
        height: 64px;
    }

    .lk-page--more {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .lk-page--info>div {
        position: relative;
        padding: 10px;
        display: flex;
    }

    .lk-page--info>div>div:nth-child(1) {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 75px;
        height: 75px;
    }

    .lk-page--info>div>div:nth-child(2) {
        width: 100%;
        gap: 10px;
    }

    .lk-page--info>div>div:nth-child(2)>div:nth-child(1) {
        padding-left: 85px;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        gap: 10px;
        align-items: start;
        min-height: 55px;
    }

    .lk-page--info>div>div:nth-child(2)>div:nth-child(1)>h2 {
        width: 100%;
        font-size: 15px;
        line-height: 15px;
    }

    .lk-page--info>div>div:nth-child(2)>p:nth-child(2) {
        padding-left: 85px;
        font-size: 10px;
        line-height: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .lk-page--info a.button {
        gap: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .lk-page--info a.button img {
        height: 20px;
    }

    .lk-page--more>div {
        width: 100% !important;
    }

    .lk-page--team-info>img,
    .lk-page--team-info>a>img {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .lk-page--team-info>a,
    .lk-page--team-info>img {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 30px;
        height: 30px;
    }

    .lk-page--team-info>div>div:nth-child(1) {
        padding-left: 40px;
        height: 30px;
        justify-content: start;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .lk-page--team-info:not(.no-status)>div>div:nth-child(1) .moderation {
        display: flex;
        white-space: nowrap;
        width: 94px;
    }

    .lk-page--team-info:not(.no-status)>div>div:nth-child(1) h2 {
        width: calc(100% - 104px);
    }

    .lk-page--team-info .lk-page--region>*:last-child:not(.moderation) {
        display: flex;
    }

    .lk-page--team-info:not(.no-status) .lk-page--region .moderation {
        display: none;
    }

    .lk-page--more>div:nth-child(1) {
        height: auto;
        min-height: unset;
        display: flex;
        flex-direction: column;

        min-height: 170px;
    }

    .lk-page--team-members>div:nth-child(2) .stage-final--slider-arrow,
    .lk-page--team-members>div:nth-child(2) .stage-final--slider-arrow>img {
        height: 45px;
        width: 45px;
    }

    .lk-page--team-members>div:nth-child(2) .slider-controls>div {
        height: 45px;
        min-width: 72px;
    }

    .lk-page--team-rating>div:nth-child(4) {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .lk-page--team-rating>div:nth-child(4)>div p {
        font-size: 15px;
        line-height: 15px;
    }

    /* .lk-page--team-rating > div:nth-child(4) > div:first-child p > br{
        display: block;
    } */
    .lk-page--team-rating>div:nth-child(4)>div {
        height: auto;
    }

    .lk-page--team-rating>div:nth-child(4)>div:not(.active) {
        display: none;
    }

    .lk-page--team-rating>div:nth-child(2)>div {
        height: 48px;
        width: 56px;
        min-width: 56px;
    }

    .lk-page--team-rating>div:nth-child(2) {
        gap: 14px;
        width: 100%;
    }

    .lk-page--team-rating>div:nth-child(4)>div p:nth-child(1) {
        height: 50px;
        font-size: 20px;
        line-height: 20px;
    }

    .lk-page--team-rating>div:nth-child(4)>div p:nth-child(3) {
        font-size: 15px;
        line-height: 15px;
    }

    .lk-page--near-events,
    .lk-page--near-familyevents {
        background: var(--gradient-blue-2);
        border-radius: 5px;
        padding: 10px;
    }

    .lk-page--near-events>div>div,
    .lk-page--near-familyevents>div>div {
        flex-direction: column;
        border-width: var(--border-width);
        padding: 10px;
    }

    .lk-page--near-events>div>div>div,
    .lk-page--near-familyevents>div>div>div {
        width: 100%;
    }

    .lk-page--info .flex-between {
        flex-direction: column;
        gap: 10px;
    }

    .lk-page--team-info>div {
        width: 100%;
    }
}


.zaglushka-page {

    display: flex;
    flex-direction: column;
    gap: 80px;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding-bottom: 3em;
    box-sizing: border-box;
    background: url(/public/img/zaglushka_bg.svg);
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: center center;
}

.zaglushka-page>p {
    opacity: 0.5;
    text-align: center;
}

.zaglushka-page>div {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 80px;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 10em);
}

.zaglushka-page>div>img:nth-child(1) {
    height: 128px;
}

.zaglushka-page>div>img:nth-child(2) {
    height: 155px;
    object-fit: contain;
    object-position: center;
    max-width: calc(100% - 6em);
}

.zaglushka-page>div>a {
    text-decoration: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: white;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.15s ease-in-out;
    font-weight: 500;
    padding: 15px 22.5px;
    height: 55px;
    cursor: pointer;
    font-size: 25px;
    line-height: 19px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: fit-content;
    font-family: "Pragmatica";
    box-sizing: border-box;
}

@media screen and (max-width:1300px) {
    .zaglushka-page>div {
        gap: 40px;
    }

    .zaglushka-page>div>img:nth-child(1) {
        height: 96px;
    }

    .zaglushka-page>div>img:nth-child(2) {
        height: 77px;
    }

    .zaglushka-page>div>a {
        font-size: 20px;
    }
}

@media screen and (max-width:800px) {
    .zaglushka-page {
        background: url(/public/img/zaglushka_bg_mobile.svg);
        background-size: 100% 200%;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .zaglushka-page>div {
        gap: 80px;
    }

    .zaglushka-page>div>img:nth-child(1) {
        height: 85px;
    }

    .zaglushka-page>div>img:nth-child(2) {
        height: 43px;
        max-width: calc(100% - 2em);
    }

    .zaglushka-page>div>a {
        font-size: 15px;
        height: 48px;
    }
}

.contact-page {
    background: url(/public/img/contact_bg.webp);
    background-size: 100% 100%;
    padding: 20px;
}

.contact-page>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.contact-page>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-penta-transparent);
}

.contact-page>div>div>img {
    width: 61px;
    height: 61px;
}

.contact-page>div>div>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-page>div>div>div p {
    margin: 0px;
    font-size: 25px;
    line-height: 25px;
}

.contact-page>div>div>div p:nth-child(1) {
    opacity: 0.5;
}

.contact-page>div>div>div p a {
    color: white;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .contact-page>div {
        gap: 12px;
    }

    .contact-page {
        background: url(/public/img/contact_bg--tablet.webp);
        background-size: 100% 100%;
        padding: 20px;
    }

    .contact-page>div>div {
        padding: 13px;
        gap: 12px;
    }

    .contact-page>div>div>div p {
        font-size: 15px;
        line-height: 15px;
    }

    .contact-page>div>div>img {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .contact-page>div {
        gap: 12px;
    }

    .contact-page {
        background: url(/public/img/contact_bg--mobile.webp);
        background-size: 100% 100%;
        padding: 20px;
    }

    .contact-page>div>div {
        padding: 13px;
        gap: 10px;
    }

    .contact-page>div>div>div p {
        font-size: 12px;
        line-height: 12px;
    }

    .contact-page>div>div>img {
        width: 32px;
        height: 32px;
    }
}


.autocomplete-suggestions {
    margin-top: 10px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
    overflow: auto;
    box-sizing: border-box;
}

.autocomplete-suggestion {
    padding: 10px 15px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-suggestion:not(:last-child) {
    border-bottom: 3px solid var(--color-blue);
}

.page-404 {
    min-height: calc(100vh - 250px);
    gap: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.page-404 h1 {
    font-size: 296px;
    line-height: 296px;
}

.page-404 h2 {
    font-size: 50px;
    line-height: 50px;
    text-align: center;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .page-404 img {
        width: 50px;
    }

    .page-404 h1 {
        font-size: 180px;
        line-height: 180px;
    }

    .page-404 h2 {
        font-size: 30px;
        line-height: 30px;
        text-align: center;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .page-404 {
        min-height: calc(100vh - 350px);
    }

    .page-404 img {
        width: 61px;
    }

    .page-404 h1 {
        font-size: 120px;
        line-height: 120px;
    }

    .page-404 h2 {
        font-size: 30px;
        line-height: 30px;
        text-align: center;
    }
}

.maintenance-page {
    min-height: calc(100vh - 250px);
    gap: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 40px;
    align-items: center;
}

.maintenance-page>div {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
    align-items: center;
}

.maintenance-page>div>div {
    width: 758px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    padding: 0px 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: var(--color-blue-penta-transparent);
    min-height: 101px;
}

.maintenance-page>div>div img {
    height: 61px;
}

.maintenance-page>div>div>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.maintenance-page>div>div>div>p {
    margin: 0px;
    font-size: 25px;
    line-height: 25px;
}

.maintenance-page h1 {
    text-align: center;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .maintenance-page img {
        width: 50px;
    }

    .maintenance-page>div>div {
        width: 370px;
        min-height: 70px;
    }

    .maintenance-page>div>div img {
        height: 40px;
    }

    .maintenance-page>div>div>div>p {
        font-size: 15px;
        line-height: 15px;
    }

    .maintenance-page h1 {
        font-size: 30px;
        line-height: 30px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .maintenance-page {
        min-height: 0px;
        margin-top: 60px;
        gap: 60px;
    }

    .maintenance-page img {
        width: 61px;
    }

    .maintenance-page>div {
        padding: 0px 10px;
        width: 100%;
    }

    .maintenance-page>div>div {
        width: 100%;
        min-height: 64px;
        padding: 0px 10px;
        box-sizing: border-box;
        gap: 5px;
    }

    .maintenance-page>div>div img {
        height: 32px;
    }

    .maintenance-page>div>div>div>p {
        font-size: 12px;
        line-height: 12px;
    }
}


.auth--alert {
    margin-bottom: var(--default-margin);
    border: 1px solid var(--color-red);
    border-radius: 10px;
    background: var(--color-dark-red);
    padding: 20px;
    font-size: 25px;
    line-height: 30px;
    font-weight: 500;
}

.auth--alert a {
    color: var(--color-red);
}

@media screen and (max-width: calc(1312px + 2em)) {
    .auth--alert {
        font-size: 20px;
        line-height: 24px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .auth--alert {
        font-size: 20px;
        line-height: 24px;
    }
}

.popup-container.active {
    display: block;
}

.popup-container {
    display: none;
    background: var(--color-black-half);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999999;
}

.popup-container .popup--link-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 850px;
    max-width: calc(100% - 2em);
    height: fit-content;
    max-height: calc(100% - 2em);
    padding: 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 20px;
}

.popup-container .popup--link-copy h2 {
    font-size: 30px;
    line-height: 30px;
}

.popup-container .popup--link-copy p {
    margin: 0px;
    font-size: 25px;
    line-height: 25px;
    opacity: 0.5;
}

.popup-container .popup--link-copy span {
    font-size: 25px;
    line-height: 25px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
    height: 55px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--color-blue-transparent);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 15px;
}

.popup-container .popup--link-copy>div {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 20px;
}

.popup-container .popup--link-copy>div>a:last-child {
    width: 55px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .popup-container .popup--link-copy>div>a:last-child {
        width: 35px;
    }

    .popup-container .popup--link-copy>div>a:last-child img {
        height: 20px;
    }

    .popup-container .popup--link-copy h2 {
        font-size: 20px;
        line-height: 20px;
    }

    .popup-container .popup--link-copy p {
        margin: 0px;
        font-size: 15px;
        line-height: 15px;
        opacity: 0.5;
    }

    .popup-container .popup--link-copy span {
        height: 35px;
        font-size: 15px;
        line-height: 15px;
        border-radius: 5px;
        border-width: var(--border-width);
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-container .popup--link-copy {
        height: 100%;
        justify-content: center;
        border: none;
        gap: 30px;
    }

    .popup-container .popup--link-copy>div {
        justify-content: center;
    }

    .popup-container .popup--link-copy>div>a:last-child {
        width: 45px;
    }

    .popup-container .popup--link-copy>div>a:last-child img {
        height: 20px;
    }

    .popup-container .popup--link-copy h2 {
        font-size: 20px;
        line-height: 20px;
        text-align: center;
        font-weight: 400;
        text-transform: none;
    }

    .popup-container .popup--link-copy p {
        margin: 0px;
        font-size: 15px;
        line-height: 15px;
        opacity: 0.5;
        text-align: center;
    }

    .popup-container .popup--link-copy span {
        height: 35px;
        font-size: 15px;
        line-height: 15px;
        height: 45px;
        border-radius: 5px;
    }
}

.popup-container .popup--accept-invite {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 850px;
    max-width: calc(100% - 2em);
    height: fit-content;
    max-height: calc(100% - 2em);
    padding: 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 20px;
}

.popup-container .popup--accept-invite h2 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 500;
    font-family: "Pragmatica";
    text-transform: none;
    font-style: normal;
    letter-spacing: 0.05em;
}

.popup-container .popup--accept-invite p {
    font-size: 25px;
    line-height: 25px;
    margin: 0px;
    opacity: 0.5;
}

.popup-container .popup--accept-invite div {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .popup-container .popup--accept-invite {
        gap: 15px;
        width: 582px;
    }

    .popup-container .popup--accept-invite h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .popup-container .popup--accept-invite p {
        font-size: 15px;
        line-height: 15px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-container .popup--accept-invite {
        justify-content: center;
        gap: 30px;
        padding: 10px;
    }

    .popup-container .popup--accept-invite h2 {
        font-size: 20px;
        line-height: 26px;
        /* text-align: center; */
        letter-spacing: 0px;
    }

    .popup-container .popup--accept-invite p {
        font-size: 15px;
        line-height: 15px;
        text-align: center;
    }

    .popup-container .popup--accept-invite div {
        /* justify-content: center; */
        gap: 15px;
    }
}

.banner {
    z-index: -1;
    height: 756px;
    padding-bottom: 60px;
    position: relative;
    background: url(/public/img/banner-bg-desctop-2.png);
    background-size: cover;
    background-position: center bottom;
    overflow: hidden;
}

.banner::before {
    /* content: ""; */
    width: 100%;
    height: 364px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: url(/public/img/banner-shadow-desctop.webp);
    background-size: 100% 100%;
    z-index: 5;
}

.banner>img {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    width: 1920px;
    height: 800px;
    object-fit: cover;
    object-position: bottom center;
}

@media screen and (min-width: 1920px) {
    .banner>img {
        min-width: 1920px;
        width: 100vw;
        height: calc((100vw / 19 * 8) + 40px);
    }

    .banner {
        height: calc(100vw / 19 * 8);
    }
}

.banner>img:nth-child(2),
.banner>img:nth-child(3) {
    display: none;
}

@media screen and (max-width: calc(1312px)) {
    .banner {
        height: 475px;
        background: none;
        box-sizing: border-box;
        z-index: unset;
    }

    .banner>img {
        z-index: -1;
    }

    .banner>img:nth-child(2) {
        display: block;
        height: 475px;
        width: 1312px;
        bottom: 0px;
    }

    .banner>img:nth-child(1),
    .banner>img:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .banner {
        height: 535px;
    }

    .banner::before {}

    .banner>img:first-child {
        height: 36px;
        bottom: 36px;
    }

    .banner>img:nth-child(3) {
        display: block;
        height: 535px;
        width: 750px;
        bottom: 0px;
    }

    .banner>img:nth-child(1),
    .banner>img:nth-child(2) {
        display: none;
    }
}

/* @media screen and (max-width: 550px){
    .banner > img:nth-child(3){
        height: 420px;
        width: 590px;
    }
    .banner{
        height: 420px;
    }
} */
@media screen and (max-width: 420px) {
    .banner>img:nth-child(3) {
        height: 440px;
        width: 570px;
    }

    .banner {
        height: 440px;
    }
}

.banner .banner--final-battle {
    position: absolute;
    bottom: 320px;
    left: 50%;
    transform: translateX(-50%);
    background: url(/public/img/banner--final-battle-bg.png);
    background-size: cover;
    border: 2px solid var(--color-blue);
    border-radius: var(--border-radius);

    z-index: 10;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
    align-items: center;
    padding: 16px 21px;

    -webkit-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.5);
    -moz-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.5);
    box-shadow: 0px 0px 40px 20px rgba(34, 201, 198, 0.5);
}

.banner a.banner--final-battle,
.banner .banner--final-battle a {
    cursor: pointer;
}

.banner .banner--final-battle p {
    margin: 0px !important;
    text-align: center;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.banner .banner--final-battle p span {
    display: block;
    white-space: nowrap;
}

.banner .banner--final-battle p span:nth-child(1) {
    font-size: 30px;
}

.banner .banner--final-battle p span:nth-child(2) {
    font-size: 20px;
}

.banner .banner--final-battle .button {
    font-size: 20px;
    width: 100%;
    color: white;
}

@media screen and (max-width: calc(2em + 1312px)) {
    .banner .banner--final-battle {
        grid-template-columns: 140px 1fr 140px;
        bottom: 170px;
        gap: 10px;
        padding: 11px 16px;
    }

    .banner .banner--final-battle p span:nth-child(1) {
        font-size: 21px;
    }

    .banner .banner--final-battle p span:nth-child(2) {
        font-size: 15px;
    }

    .banner .banner--final-battle .button {
        font-size: 15px;
    }
}

@media screen and (max-width: calc(2em + 720px)) {
    .banner .banner--final-battle {
        grid-template-columns: 90px 1fr 90px;
        bottom: 160px;
        gap: 10px;
        padding: 5px 8px;
    }

    .banner .banner--final-battle p span:nth-child(1) {
        font-size: 12px;
    }

    .banner .banner--final-battle p span:nth-child(2) {
        font-size: 8px;
    }

    .banner .banner--final-battle .button {
        font-size: 8px;
        padding: 0px;
        height: 25px;
    }
}

@media screen and (max-width: calc(410px)) {
    .banner .banner--final-battle {
        grid-template-columns: 70px 1fr 70px;
        bottom: 130px;
        gap: 10px;
        padding: 5px 8px;
    }

    .banner .banner--final-battle p span:nth-child(1) {
        font-size: 10px;
    }

    .banner .banner--final-battle p span:nth-child(2) {
        font-size: 6px;
    }

    .banner .banner--final-battle .button {
        font-size: 8px;
    }
}

.popup-container .popup--avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: calc(100% - 2em);
    max-width: calc(100% - 2em);
    width: 850px;
    height: 609px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
}

.popup-container .popup--avatar>form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0px;
}

.popup-container .popup--avatar>form>h2 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-style: normal;
}

.popup-container .popup--avatar>form>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: nowrap;
}

.popup-container .popup--avatar>form>div:nth-child(2)>img {
    width: 158px;
    height: 158px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
}

.popup-container .popup--avatar>form>div:nth-child(2)>label {
    display: flex;
    flex-direction: row;
    gap: 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    border-style: dashed;
    width: calc(100% - 20px - 158px);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.popup-container .popup--avatar>form>div:nth-child(2)>label img {
    width: 61px;
}

.popup-container .popup--avatar>form>div:nth-child(2)>label>p {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px;
}

.popup-container .popup--avatar>form>div:nth-child(2)>label>p span:nth-child(1) {
    font-size: 25px;
    line-height: 25px;
    color: var(--color-blue);
    font-weight: 500;
}

.popup-container .popup--avatar>form>div:nth-child(2)>label>p span:nth-child(2) {
    font-size: 10px;
    line-height: 10px;
    opacity: 0.5;
}

.popup-container .popup--avatar>form>div:nth-child(2)>label input {
    display: none;
}

.popup-container .popup--avatar>form>div:nth-child(3) {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--gradient-blue-2);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    max-height: 260px;
}

.popup-container .popup--avatar>form>div:nth-child(3)>div {
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    padding-right: 14px;
}

.popup-container .popup--avatar>form>div:nth-child(3)>div img {
    width: 100%;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-container .popup--avatar>form>div:nth-child(3)>div img.active {
    border-color: white;
}

.popup-container .popup--avatar>form>div:nth-child(4) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .popup-container .popup--avatar {
        width: 582px;
        height: 428px;
        padding: 10px;
    }

    .popup-container .popup--avatar>form {
        gap: 15px;
    }

    .popup-container .popup--avatar>form>h2 {
        font-size: 20px;
        line-height: 24px;
    }

    .popup-container .popup--avatar>form>div:nth-child(2)>img {
        width: 114px;
        height: 114px;
    }

    .popup-container .popup--avatar>form>div:nth-child(2)>label {
        width: calc(100% - 20px - 114px);
        height: 114px;
    }

    .popup-container .popup--avatar>form>div:nth-child(2)>label img {
        width: 38px;
    }

    .popup-container .popup--avatar>form>div:nth-child(2)>label>p span:nth-child(1) {
        font-size: 15px;
        line-height: 15px;
    }

    .popup-container .popup--avatar>form>div:nth-child(3) {
        height: 175px;
    }

    .popup-container .popup--avatar>form>div:nth-child(3)>div {
        column-gap: 10px;
        row-gap: 10px;
    }

    /* .roles-page{
        column-gap: 10px;
    } */
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-container .popup--avatar {
        height: 100%;
        justify-content: center;
        align-items: center;
        border: none;
        display: flex;
        flex-direction: column;
    }

    .popup-container .popup--avatar>form {
        max-height: 100%;
        overflow: auto;
    }

    .popup-container .popup--avatar>form>h2 {
        text-align: center;
    }

    .popup-container .popup--avatar>form>div:nth-child(2) {
        flex-direction: column;
        align-items: center;
    }

    .popup-container .popup--avatar>form>div:nth-child(2)>label {
        width: 100%;
    }

    .popup-container .popup--avatar>form>div:nth-child(3) {
        height: 348px;
        max-height: 50vh;
    }

    .popup-container .popup--avatar>form>div:nth-child(3)>div {
        grid-template-columns: repeat(4, 1fr);

    }

    .popup-container .popup--avatar>form>div:nth-child(3)>div img {
        border-radius: 5px;
        border-width: var(--border-width);
    }
}


.docs-page {
    background: url(/public/img/docs-bg.png), linear-gradient(180deg, rgba(34, 200, 197, 0.43) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 68px, 100% calc(100% - 68px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, top 68px center;

    border-radius: var(--border-radius);
    padding: 20px;

    /* -webkit-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32); */
    position: relative;
}

.docs-page::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    /* background: radial-gradient(ellipse closest-side, rgba(34, 200, 197, 0.16) 50%, #00000000 100%); */
    background-size: auto 100%;
    z-index: -1;


    -webkit-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 59px -6px 250px 79px rgba(34, 201, 198, 0.32);
    background-color: rgba(34, 201, 198, 0.24);
    border-radius: 10px;
}

.docs-page>h1 {
    margin-bottom: 20px;
}

.docs-page>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.docs-page>div>div {
    width: 100%;
    min-height: 195px;
    border-radius: 10px;
    padding: calc(20px - var(--border-width));
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-direction: column;
}

.docs-page>div>div span {
    font-size: 25px;
    font-weight: 500;
}

.docs-page>div>div a {
    margin-left: auto;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .docs-page>div>div {
        min-height: 122px;
        gap: 16px;
        padding: calc(16px - var(--border-width));
        border-radius: 5px;
        border-width: var(--border-width);
    }

    .docs-page {
        background: url(/public/img/docs-bg--tablet.png), linear-gradient(180deg, rgba(33, 201, 196, 0.47) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 45px, 100% calc(100% - 45px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 45px center;
        padding: 16px;
    }

    .docs-page>div {
        column-gap: 16px;
        row-gap: 16px;
    }

    .docs-page>div>div span {
        font-size: 15px;
        font-weight: 500;
    }

    .docs-page>h1 {
        margin-bottom: 16px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .docs-page {
        background: url(/public/img/docs-bg--mobile.png), linear-gradient(180deg, rgba(33, 201, 196, 0.47) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 32px, 100% calc(100% - 32px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 32px center;
        padding: 15px;
    }

    .docs-page>div {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 20px;
        row-gap: 15px;
    }

    .docs-page>div>div {
        min-height: 114px;
        padding: calc(15px - var(--border-width));
        gap: 15px;
    }

    .docs-page>div>div span {
        font-size: 12px;
        font-weight: 500;
    }

    .docs-page>h1 {
        margin-bottom: 15px;
    }
}


.with-question-mark {
    position: relative;
    overflow: visible !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.with-question-mark>img {
    cursor: pointer;
    height: 1em;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
}

.with-question-mark:hover>img {
    opacity: 1;
}

.with-question-mark>*+span {
    transition: all 0.15s ease-in-out;
    opacity: 0;
    z-index: -1;
    font-size: 15px !important;
    width: 427px;
    padding: 15px;
    border-radius: 10px !important;
    border: 1px solid var(--color-blue);
    background: #082827;
    position: absolute;
    right: calc(-20px - 1px);
    box-sizing: border-box;
    bottom: calc(100% + 20px);
    display: block;
    color: white;
    font-size: 15px;
    line-height: 150%;
    font-weight: 500;
    /* letter-spacing: 0px; */
    white-space: normal;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
}

.with-question-mark.wqm-bottom>*+span {
    top: calc(100% + 20px);
    height: fit-content;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .with-question-mark.wqm-bottom>*+span {
        top: calc(100% + 16px);
        height: fit-content;
    }
}

.with-question-mark.wqm-bottom>*+span {
    right: unset;
    left: 0px;
}

.with-question-mark:hover>*+span {
    opacity: 1;
    z-index: 99;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .with-question-mark>*+span {
        width: 320px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .with-question-mark>* {
        /* opacity: 1; */
        height: 34px;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .with-question-mark>*+span {
        width: calc(100vw - 40px) !important;
        max-width: 320px;
        position: fixed;
        box-sizing: border-box;
        top: 50vh !important;
        transform: translateY(-50%);
        left: 20px !important;
        right: unset !important;
        bottom: unset !important;
        max-height: 75vh;
        overflow: auto;
    }

    /* .with-question-mark > img + span::before{
        content: "";
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 120vh;
        background: black;
        opacity: 0;
        z-index: -1;
        transition: 0.25s ease-in-out;
    } */
    .with-question-mark.wqm-bottom>img {
        position: unset;
        top: unset;
        right: unset;
    }

    /* .with-question-mark.wqm-bottom > img + span{
        left: 0px;
        right: 0px;
        max-width: calc(100vw - 56px);
        width: calc(100vw - 56px);
    } */
}


.competition--search {
    background: url(/public/img/competitions_bg_1.webp);
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-sizing: border-box;
}

.competition--search h1 {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.competition--search h1 img {
    height: 0.75em;
}

.competition--search h1 img~span {
    text-transform: none;
}

.competition--search>div:first-child {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}


.competition--searchbar {
    position: relative;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: nowrap;
}

.competition--searchbar>div:first-child {
    position: relative;
    box-sizing: border-box;
    min-height: 55px;
    height: fit-content;
    box-sizing: border-box;
    width: calc(100% - 20px - 128px);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background-color: #156F6D;
    font-size: 25px;
    font-weight: 500;
    padding: 5px 15px;
    outline: none;
    color: var(--color-white);
    transition: all 0.15s ease-in-out;
    font-family: "Pragmatica";
    flex-grow: 1;
}

.competition--searchbar>div:first-child>div:first-child {
    position: absolute;
    padding: 10px 18px;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    max-width: calc(100%);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    height: 50px;
    box-sizing: border-box;
}

.competition--searchbar>div:first-child>div:first-child>span {
    font-size: 15px;
    background: var(--gradient-black-transparent);
    padding: 6px 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 2em;
    box-sizing: border-box;
    gap: 10px;
    white-space: nowrap;
}

.competition--searchbar>div:first-child>div:first-child>span strong {
    font-weight: inherit;
}

.competition--searchbar>div:first-child>div:first-child>span p {
    margin: 0px;
    opacity: 0.5;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.competition--searchbar>div:first-child>div:first-child>span img {
    /* content: ""; */
    height: 1em;
    width: 1em;
    cursor: pointer;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    display: block;
}

.textarea {
    display: inline-block;
    outline: none;
    width: 100%;
    height: auto;
    line-height: 1.5em;
    box-sizing: border-box;
}

.competition--filters:hover,
.competition--filters.active {
    display: flex !important;
}

.competition--filters {
    z-index: 99;
    position: absolute;
    top: calc(100% + 10px);
    left: 0px;
    width: fit-content;
    width: 752px;
    background: #072524;
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
    padding: 17px;
    max-width: 100%;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    gap: 15px;


    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
}

.competition--filters>div:first-child {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.competition--filters>label>input,
.competition--filters>div:first-child>label>input {
    display: none;
}

.competition--filters>label,
.competition--filters>div:first-child>label {}

.competition--filters>label>span,
.competition--filters>div:first-child>label>span {
    padding: 8.5px 16px;
    border-radius: 10px;
    background: #22c9c633;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    width: fit-content;
    transition: all 0.15s ease-in-out;
    color: var(--color-blue)
}

.competition--filters>label>span::before,
.competition--filters>div:first-child>label>span::before {
    content: "";
    background: url(/public/img/label_plus.svg);
    background-size: 100% 100%;
    height: 1em;
    width: 1em;
    transition: all 0.15s ease-in-out;
}

@media (hover: hover) {

    .competition--filters>label>span:hover,
    .competition--filters>div:first-child>label>span:hover {
        color: white;
    }

    .competition--filters>label>span:hover::before,
    .competition--filters>div:first-child>label>span:hover::before {
        filter: brightness(10);
    }
}

.competition--filters>label>input:checked~span,
.competition--filters>div:first-child>label>input:checked~span {
    color: white;
    background: #22c9c6;
}

.competition--filters>label>input:checked~span::before,
.competition--filters>div:first-child>label>input:checked~span::before {
    filter: brightness(10);
}

.competition--filters p {
    margin: 0px;
    color: var(--color-blue);
    font-size: 15px;
    height: 1em;
    letter-spacing: 0.07em;
}

.competition--filters .filters {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.competition--filters .filters>div:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.competition--filters .filters>div:first-child>div {
    padding: 8.5px 16px;
    border-radius: 10px;
    background: #22c9c615;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.competition--filters .filters>div:first-child>div:hover {
    color: white;
}

.competition--filters .filters>div:first-child>div.active {
    background: #22c9c6;
    color: white;
}

.competition--filters .filters>div#filters>div {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.competition--filters .filters>div#filters>div:not(.active) {
    display: none;
}

.competition--filters .filters>div#filters>div input {
    display: none;
}

.competition--filters .filters>div#filters>div label span {
    padding: 8px 26px;
    background: #22c9c633;
    color: var(--color-blue);
    cursor: pointer;
    font-size: 15px;
    box-sizing: border-box;
    display: block;
    transition: all 0.15s ease-in-out;
}

.competition--filters .filters>div#filters>div label:not(:last-child) input:not(:checked)~span {
    border-bottom: 1px solid rgba(34, 201, 198, 0.16);
}

@media (hover: hover) {
    .competition--filters .filters>div#filters>div label span:hover {
        background: #22c9c6;
        color: white;
    }
}

.competition--filters .filters>div#filters>div label input:checked~span {
    background: var(--gradient-blue);
    color: white;
}


.competition--searchbar .textarea:not(.withtags) {
    background-image: url(/public/img/magnifier.svg);
    background-position: left 0.3em top 7px;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    /* padding-left: calc(20px + 1em + 10px); */
}

.competition--searchbar .textarea:not(.withtags):empty {
    opacity: 0.5;
}

.competition--searchbar:hover .textarea:not(.withtags) {
    background-image: url(/public/img/magnifier_grey.svg);
}

.competition-list {
    background: var(--gradient-blue-2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.competition-list>div {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
    min-height: 165px;
    position: relative;
    padding-right: 200px;
    box-sizing: border-box;
    padding: 17px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);

    /* background: linear-gradient(180deg, #006C6A 0%, #000000 150%); */
}

.competition-list>div p {
    margin: 0px;
}

.competition-list>div>p:nth-child(1) {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    line-height: 1em;
}

.competition-list>div>p:nth-child(2) {
    font-size: 20px;
    opacity: 0.5;
    font-weight: 500;
    line-height: 1em;
}

.competition-list>div .skill-mobile,
.competition-list>div .skill-desctop {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    width: fit-content;
    overflow-wrap: wrap;
    background: var(--color-black-penta);
}

.competition-list>div .skill-desctop {
    margin-top: auto;
    padding: 15px 25px;
}

.competition-list>div .skill-mobile>span:first-child,
.competition-list>div .skill-desctop>span:first-child {
    opacity: 0.5;
    font-weight: 400;
}

.competition-list>div .skill-mobile>span,
.competition-list>div .skill-desctop>span {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
}

.competition-list>div .skill-mobile>span:nth-child(1) {
    font-weight: 400;
}

.competition-list>div .skill-mobile {
    border-radius: 5px;
    background: linear-gradient(30deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.competition-list>div .skill-mobile {
    gap: 5px;
}

.competition-list>div .skill-mobile>span {
    font-size: 10px;
    gap: 5px;
}

.competition-list>div .skill-mobile>span:not(:first-child):not(:last-child)::after,
.competition-list>div .skill-desctop>span:not(:first-child):not(:last-child)::after {
    content: "";
    display: block;
    height: 1em;
    width: 0px;
    border-right: 2px solid white;
}

.competition-list>div .skill-mobile>span.red,
.competition-list>div .skill-desctop>span.red {
    color: #FF6B6B;
}

.competition-list>div .skill-mobile>span.green,
.competition-list>div .skill-desctop>span.green {
    color: #63FF85;
}

.competition-list>div .skill-mobile>span.blue,
.competition-list>div .skill-desctop>span.blue {
    color: #2D77CF;
}

.competition-list>div .skill-mobile>span.yellow,
.competition-list>div .skill-desctop>span.yellow {
    color: #F5E741;
}

@media screen and (max-width: calc(719px + 2em)) {

    .competition-list>div .skill-desctop,
    .competition-list>div img.bg-desctop {
        display: none;
    }
}

@media screen and (min-width: calc(720px + 2em)) {

    .competition-list>div .skill-mobile,
    .competition-list>div img.bg-mobile {
        display: none;
    }
}

.competition-list>div>* {
    z-index: 2;
}

.competition-list>div img.bg-desctop {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    object-position: right bottom;
    object-fit: cover;
    z-index: 0;
    max-width: 100%;
    z-index: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #006C6A 0%, #000000 150%);
}

.competition-list>div img.bg-mobile {
    position: absolute;
    top: -5px;
    left: -5px;
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    object-position: left bottom;
    object-fit: cover;
    max-width: calc(100% + 10px);
    z-index: 0;
    border-radius: 0px;
    background: linear-gradient(180deg, #006C6A 0%, #000000 150%);
}

.competition-list>div>a {
    position: absolute;
    bottom: 17px;
    right: 17px;
}



@media screen and (max-width: calc(2em + 1312px)) {
    .competition--search {
        padding: 20px;
    }

    .competition-list {
        padding: 10px;
    }

    .competition-list>div {
        padding: 10px;
    }

    .competition--filters .filters>div#filters>div label span {
        padding: 10px 20px;
    }

    .competition-list>div .skill-desctop>span,
    .competition-list>div>p:nth-child(1),
    .competition-list>div>p:nth-child(2) {
        font-size: 10px;
    }

    .competition-list>div {
        min-height: 110px;
    }

    .competition-list>div .skill-desctop {
        height: 35px;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px 15px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .competition--search h1 {
        gap: 10px;
    }

    .competition--searchbar {
        gap: 55px;
    }

    .competition--search:not(.troops--search):not(.teams--search) {
        min-height: 162px;
    }

    .competition--searchbar>div:first-child>div:first-child>span p {
        max-width: 100px;
    }

    .competition--filters {
        min-width: unset;
        width: 100%;
    }

    .competition--searchbar>div:first-child {
        min-height: 45px;
        padding: 5px 15px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: nowrap;
        align-items: center;
        border-radius: 5px;
    }

    /* .competition--searchbar > div:first-child > div:first-child{
        position: unset;
        top: unset;
        left: unset;
        padding: 10px 0px;
        overflow: auto;
        scrollbar-width: thin;
        height: fit-content;
    } */
    .competition--searchbar>div:first-child>div:first-child::-webkit-scrollbar {
        width: 5px;
        padding-left: 10px;
    }

    .competition--searchbar .textarea {
        min-height: 1.5em;
        padding: 0.25em 0px;
        white-space: nowrap;
        scrollbar-width: thin;
        font-size: 15px;
    }

    .competition--searchbar>div:first-child>div:first-child {
        height: calc(1.25em + 20px);
        padding: 0px 10px;
        flex-wrap: nowrap;
    }

    .competition--searchbar .textarea::-webkit-scrollbar {
        width: 5px;
    }

    .competition--searchbar .textarea:not(.withtags) {
        padding-left: 30px;
        margin-left: -17px;
    }

    .competition--search {
        background: url(/public/img/competitions_bg_1_mobile.webp);
        background-size: 100% 100%;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .competition--searchbar>div:first-child>div:first-child>span {
        font-size: 12px;
        border-radius: 5px;
        padding: 5px;
        height: fit-content;
    }

    .competition--searchbar>div:first-child>div:first-child {
        align-items: center;
        height: 40px;
        box-sizing: border-box;
    }

    .competition--searchbar .textarea {
        overflow: visible;
        width: fit-content;
        white-space: nowrap;
    }

    .competition--searchbar>div:first-child {
        overflow: auto;
        scrollbar-width: none;
    }

    .competition--searchbar>div:first-child::-webkit-scrollbar {
        width: 0px;
    }

    .competition-list>div>p:nth-child(1),
    .competition-list>div>p:nth-child(2) {
        font-size: 10px;
    }

    .competition-list>div {
        min-height: 160px;
        gap: 5px;
        border-radius: 5px;
    }

    .competition-list>div>a {
        bottom: 13px;
        right: 13px;
    }

    .competition-list>div .skill-mobile {
        margin-top: 5px;
    }

    .competition--search {
        position: relative;
        padding-bottom: 55px;
        padding: 15px;
    }

    .competition--search>div:first-child>a {

        position: absolute;
        bottom: 15px;
        right: 15px;
    }
}

/* .competition--searchbar .textarea{
    white-space: nowrap;
    overflow: visible;
} */



.troops-list {
    background: var(--gradient-blue-2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.troops-list>div {
    background: url(/public/img/troopslist_bg_desctop.webp);
    background-size: 100% 100%;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.troops-list>div>div:nth-child(1) {
    display: grid;
    grid-template-columns: 130px calc(55% - 130px);
    column-gap: 20px;
}

.troops-list>div>div:nth-child(1)>div:nth-child(1) {
    width: 130px;
    height: 130px;
    border-radius: 10px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
}

.avatar-stage-1,
.avatar-stage-2,
.avatar-stage-3,
.avatar-stage-4,
.avatar-stage-5,
.avatar-stage-6 {
    position: relative;
    border: none !important;
    border-radius: 0px !important;
}

.avatar-stage-1>img,
.avatar-stage-2>img,
.avatar-stage-3>img,
.avatar-stage-4>img,
.avatar-stage-5>img,
.avatar-stage-6>img {
    border: none !important;
    border-radius: 0px !important;
}

.avatar-stage-1::after,
.avatar-stage-2::after,
.avatar-stage-3::after,
.avatar-stage-4::after,
.avatar-stage-5::after,
.avatar-stage-6::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.avatar-stage-1::after {
    background: url(/public/img/avatar-stage-1.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.avatar-stage-2::after {
    background: url(/public/img/avatar-stage-2.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.avatar-stage-3::after {
    background: url(/public/img/avatar-stage-3.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.avatar-stage-4::after {
    background: url(/public/img/avatar-stage-4.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.avatar-stage-5::after {
    background: url(/public/img/avatar-stage-5.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.avatar-stage-6::after {
    background: url(/public/img/avatar-stage-6.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.troops-list>div>div:nth-child(1)>div:nth-child(1) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.troops-list>div>div:nth-child(1)>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    min-height: 130px;

    /* gap: 13px; */
}

.troops-list p {
    margin: 0px;
}

.troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(1) {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-style: italic;
    white-space: nowrap;
    margin-bottom: 10px;
}

.troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(1)>span:first-child {
    max-width: 80%;
    line-height: 1em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(1)>span:last-child {
    font-weight: 500;
    line-height: 1em;
    font-style: normal;
    opacity: 0.5;
}

.troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(2) {
    font-size: 20px;
    line-height: 1em;
    opacity: 0.5;
    font-weight: 500;
}

.troops-list>div>div:nth-child(1)>div:nth-child(2)>div:nth-child(3) {
    margin-top: auto;
    gap: 20px;
    font-size: 20px;
    font-weight: 500;
}

.troops-list>div>div:nth-child(2) {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 20px;
    width: calc(44% - 80px);
}

.troops-list>div>div:nth-child(2)>a {
    width: 55px;
    height: 55px;
}

.troops-list>div>div:nth-child(2)>a>img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.troops-list>div>div:nth-child(2)>a>img:hover {
    border-color: white;
}

.troops-list>div>div:nth-child(2)>p {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-style: italic;
    min-height: 55px;
    background: rgba(27, 199, 191, 0.2);
    border-radius: 10px;
    padding: 0px 20px;
    white-space: nowrap;
    width: calc(100% - 55px - 20px);
    box-sizing: border-box;
}

.troops-list>div>div:nth-child(2)>span {
    padding: 0px 20px;
    border-radius: 10px;
    background: #1BC7BF33;
    color: var(--color-blue);
    min-height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
}

.troops-list>div>div:nth-child(2)>p>span:first-child {
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.troops-list>div>div:nth-child(2)>p>span:last-child {
    font-weight: 400;
    font-style: normal;
    opacity: 0.5;
    white-space: nowrap;
}

.troops-list>div>a.button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}


.troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*:nth-child(1) {
    padding: 0px 10px;
}

@media screen and (max-width: calc(2em + 1312px)) {

    .troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(1),
    .troops-list>div>div:nth-child(2)>p,
    .troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(2),
    .troops-list .lk-page--tags {
        font-size: 10px !important;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(1) {
        width: 79px;
        height: 79px;
        border-radius: 5px;
    }

    .troops-list>div>div:nth-child(1) {
        grid-template-columns: 79px calc(55% - 79px);
        gap: 10px;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2) {
        min-height: 75px;
        /* gap: 10px; */
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2)>div:nth-child(3) {
        gap: 10px;
    }

    .troops-list>div>div:nth-child(2) {
        width: calc(50% - 79px);
        gap: 10px;
    }

    .troops-list>div>div:nth-child(2)>a>img {
        width: 28px;
        height: 28px;
        border-radius: 5px;
    }

    .troops-list>div>div:nth-child(2)>a {
        width: 28px;
        height: 28px;
    }

    .troops-list>div>div:nth-child(2)>p,
    .troops-list>div>div:nth-child(2)>span {
        min-height: 28px;
        border-radius: 5px;
    }

    .troops-list>div>div:nth-child(2)>span {
        font-size: 10px;
    }

    .troops-list>div {
        padding: 15px;
    }

    .troops-list>div>a.button {
        bottom: 15px;
        right: 15px;
    }

    .troops-list>div>div:nth-child(2)>p {
        width: calc(100% - 28px - 10px);
        gap: 5px;
        padding: 0px 10px;
    }
}





@media screen and (max-width: calc(720px + 2em)) {

    /* .troops-list > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(3){
        margin-top: 0px;
    } */
    .troops-list>div>div:nth-child(1)>div:nth-child(2)>*:nth-child(1) {
        margin-bottom: 0px;
    }

    .troops-list>div {
        background: url(/public/img/troopslist_bg_mobile.webp);
        background-size: 100% 100%;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        padding: 15px;
        min-height: 165px;
    }

    .troops-list>div>div:nth-child(1) {
        display: flex;
        width: 100%;
        position: relative;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(1) {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2) {
        padding-left: 40px;
        width: 100%;
        box-sizing: border-box;
        gap: 5px;
    }

    .troops-list>div>div:nth-child(2) {
        top: unset;
        bottom: 0px;
        gap: 10px;
        left: 0px;
        right: unset;
        width: calc(70%);
        justify-content: start;
    }

    .troops-list>div>div:nth-child(2)>p {
        width: calc(100% - 40px);
        box-sizing: border-box;
    }

    .troops-list>div>div:nth-child(2)>span {
        width: 100%;
        font-size: 10px;
    }

    .troops-list>div>div:nth-child(2) img {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2)>.lk-page--tags {
        margin-left: -40px;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2)>.lk-page--tags img {
        height: 20px;
        width: 20px;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2)>.lk-page--tags>* {
        height: 30px;
    }

    .troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*:nth-child(1) {
        padding: 0px 5px;
    }

    .troops-list>div>a.button {
        width: 45px;
        color: transparent !important;
        font-size: 0px;
        background-image: url(/public/img/details_arrow_2.svg);
        background-size: 100%;
        border: none;
        transition: all 0.15s ease-in-out;
    }

    .troops-list>div>a.button:hover {
        background-image: url(/public/img/details_arrow_2_hover.svg);
        background-size: 100%;
    }
}







.teams-list {
    background: var(--gradient-blue-2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.teams-list>div {
    background: var(--gradient-blue-2);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background-size: 100% 100%;
    padding: 17px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.teams-list>div>div:nth-child(1) {
    display: grid;
    grid-template-columns: 130px calc(100% - 450px);
    column-gap: 20px;
}

.teams-list>div>div:nth-child(1)>img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
}

.teams-list>div>div:nth-child(1)>div {
    display: flex;
    flex-direction: column;
    min-height: 130px;
    font-weight: 500;

    gap: 10px;
}

.teams-list p {
    margin: 0px;
}

.teams-list>div>div:nth-child(1)>div>*:nth-child(1) {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-style: italic;
    white-space: nowrap;
    height: 1em;
}

.teams-list>div>div:nth-child(1)>div>*:nth-child(1)>span:first-child {
    max-width: 80%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1em;
}

.teams-list>div>div:nth-child(1)>div>*:nth-child(1)>span:last-child {
    font-weight: 500;
    font-style: normal;
    opacity: 0.5;
    font-size: 1em;
}

.teams-list>div>div:nth-child(1)>div>*:nth-child(2) {
    font-size: 20px;
    opacity: 0.5;
    margin-bottom: 15px;
    height: 1em;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.teams-list>div>div:nth-child(2) {
    position: absolute;
    top: 17px;
    right: 17px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 10px;
    width: 300px;
}

.teams-list>div>div:nth-child(2) {
    /* position: relative; */
}

.teams-list>div>div:nth-child(2)>div {
    position: unset;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.teams-list>div>div:nth-child(2) img {
    width: calc(81px - (var(--border-width) * 2));
    ;
    height: calc(55px - (var(--border-width) * 2));
    object-fit: contain;
    padding: 10px;
    object-position: center;
    box-sizing: border-box;
    opacity: 1;

    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.teams-list>div>div:nth-child(2)>div:hover {
    border-color: white;
}

.teams-list>div>div:nth-child(2) img~span {
    display: none;
    left: unset;
    right: 0px;
    top: calc(100% + 10px);
    border-radius: 5px;
}

.teams-list>div>div:nth-child(2) img:hover~span {
    display: block;
}

.teams-list>div>a.button {
    position: absolute;
    bottom: 17px;
    right: 17px;
}


.teams-list>div>div:nth-child(1)>div .lk-page--tags {
    gap: 20px;
    font-size: 20px;
}

.teams-list>div>div:nth-child(1)>div .lk-page--tags>*:nth-child(1),
.troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*:nth-child(1) {
    width: 55px;
    height: 55px;
    padding: 0px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.teams-list>div>div:nth-child(1)>div .lk-page--tags>*.with-question-mark::before,
.troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*.with-question-mark::before,
.stage--events-list>div>div:nth-child(1) .lk-page--tags>*.with-question-mark::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius);
    opacity: 0;
    /* background: radial-gradient(circle, var(--color-blue) 0%, rgba(255,255,255,0) 75%); */
    background-size: 100% 100%;
    background-position: center center;
    /* background: red; */
    z-index: -1;
    transition: all 0.15s ease-in-out;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 16px var(--color-blue);
    /* opacity: 1; */
}

.teams-list>div>div:nth-child(1)>div .lk-page--tags>*.with-question-mark:hover::before,
.troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*.with-question-mark:hover::before,
.stage--events-list>div>div:nth-child(1) .lk-page--tags>*.with-question-mark:hover::before {
    opacity: 1;
}

.teams-list>div>div:nth-child(1)>div .lk-page--tags>*.with-question-mark {
    /* transition: all 0.15s ease-in-out; */
}

.teams-list>div>div:nth-child(1)>div .lk-page--tags>*.with-question-mark:hover,
.troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*.with-question-mark:hover,
.stage--events-list>div>div:nth-child(1) .lk-page--tags>*.with-question-mark:hover {
    background: #125756;
}

.teams-list>div>div:nth-child(1)>div .lk-page--tags>*:nth-child(1)>img,
.troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*:nth-child(1)>img {
    width: 70%;
    height: 70%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
}

.stage--events-list>div .lk-page--tags .role-font-icon {
    margin-right: 0.5em;
}

@media screen and (max-width: calc(2em + 1312px)) {

    .teams-list>div>div:nth-child(1)>div>*:nth-child(1),
    .teams-list>div>div:nth-child(1)>div>*:nth-child(2),
    .teams-list .lk-page--tags span {
        font-size: 10px;
    }

    .teams-list>div>div:nth-child(1)>img {
        width: 79px;
        height: 79px;
    }

    .teams-list>div>div:nth-child(1) {
        grid-template-columns: 79px calc(100% - 79px - 200px);
    }

    .teams-list>div>div:nth-child(1)>div {
        min-height: 75px;
        gap: 7px;
    }

    .teams-list>div>div:nth-child(1)>div>*:nth-child(2) {
        margin-bottom: 0px;
    }

    .teams-list>div>div:nth-child(2) {
        width: 175px;
        gap: 10px;
        top: 10px;
        right: 10px;
    }

    .teams-list>div>div:nth-child(2) img {
        width: calc(52px - (var(--border-width) * 2));
        ;
        height: calc(28px - (var(--border-width) * 2));
        ;
        padding: 2px;
        border-radius: 5px;
    }

    .teams-list>div {
        padding: 15px;
    }

    .teams-list>div>a.button {
        bottom: 10px;
        right: 10px;
    }

    .teams-list>div>div:nth-child(1)>div .lk-page--tags {
        gap: 8px;
    }

    .teams-list>div>div:nth-child(1)>div .lk-page--tags>*:nth-child(1),
    .troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*:nth-child(1) {
        height: 35px;
        width: 35px;
    }

    .competition--searchbar>.button {
        font-size: 0px;
        width: 55px;
        height: 55px;
        background-image: url(/public/img/magnifier.svg) !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: 24px !important;
        border-radius: 10px;
    }

    .competition--searchbar>.button:hover {
        filter: brightness(10);
    }
}






@media screen and (max-width: calc(720px + 2em)) {
    .stage--events-list>div .lk-page--tags .role-font-icon {
        margin-right: 0px;
    }

    .stage--events-list>div .lk-page--tags .in-progress,
    .stage--events-list>div .lk-page--tags .scheduled,
    .stage--events-list>div .lk-page--tags .completed {
        font-size: 0px;
        gap: 0px !important;

    }

    /* .teams-list > div > div:nth-child(2) img ~ span{
        display: none;
        left: 0px;
        top: calc(100% + 10px);
        max-width: calc(100vw - 34px - 34px);
    } */
    .teams-list>div {
        min-height: 165px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        padding: 15px;
        padding-bottom: calc(165px - 30px - 75px);
    }

    .teams-list>div>div:nth-child(1) {
        display: flex;
        width: 100%;
        position: relative;
    }

    .teams-list>div>div:nth-child(1)>img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .teams-list>div>div:nth-child(1)>div {
        padding-left: 40px;
        width: 100%;
        box-sizing: border-box;
        gap: 5px;
    }

    .teams-list>div>div:nth-child(2) {
        top: unset;
        bottom: 10px;
        gap: 10px;
        left: 10px;
        right: unset;
        width: calc(70%);
        justify-content: start;
    }

    .teams-list>div>div:nth-child(2) img {
        width: calc(52px - (var(--border-width) * 2));
        ;
        height: calc(45px - (var(--border-width) * 2));
        ;
        padding: 5px 0px;
        border-radius: 5px;
    }

    .teams-list>div>div:nth-child(1)>div>.lk-page--tags {
        margin-left: -40px;
        margin-top: auto;
    }

    .teams-list>div>div:nth-child(1)>div>.lk-page--tags img {
        height: 20px;
        width: 20px;
    }

    .teams-list>div>div:nth-child(1)>div>.lk-page--tags>* {
        height: 30px;
    }

    .teams-list>div>div:nth-child(1)>div .lk-page--tags>*:nth-child(1),
    .troops-list>div>div:nth-child(1)>div:nth-child(2) .lk-page--tags>*:nth-child(1) {
        height: 30px;
        width: 30px;
    }

    .teams-list>div>a.button {
        width: 45px;
        color: transparent !important;
        font-size: 0px;
        background-image: url(/public/img/details_arrow_2.svg);
        background-size: 100%;
        border: none;
        transition: all 0.15s ease-in-out;
    }

    .teams-list>div>a.button:hover {
        background-image: url(/public/img/details_arrow_2_hover.svg);
        background-size: 100%;
    }
}


.textarea[placeholder]:empty:not(.withtags)::before {
    content: attr(placeholder);
    color: rgba(34, 201, 198);
    letter-spacing: 0.04em;
}

/* .textarea[placeholder]:empty:focus::before {
    content: "";
} */

.competition--search.troops--search,
.competition--search.teams--search {
    background: url(/public/img/troops_bg_desctop.webp);
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.competition--search form {
    margin-top: 20px;
    margin-bottom: 0px;
}


.competition--searchbar>div:first-child:hover {
    border-color: white;
}

.competition--searchbar>div:first-child:hover .textarea[placeholder]:empty::before {
    color: rgba(255, 255, 255, 0.5);
}

.competition--searchbar>div:first-child .textarea {
    /* padding-right: 50px; */
    --padding-top: 0.1em;
    padding-top: var(--padding-top);
    width: calc(100% - 50px);
    padding-right: 0px;
}

.competition--searchbar>div:first-child .textarea~img {
    position: absolute;
    bottom: 7px;
    height: 35px;
    right: 15px;
    cursor: pointer;
    display: block;
}

.competition--searchbar>div:first-child .textarea:empty:not(.withtags)~img {
    display: none;
}

@media screen and (max-width: calc(2em + 720px)) {
    .competition--searchbar>.button {
        width: 45px;
        height: 45px;
    }

    .competition--searchbar>div:first-child {
        position: unset;
    }

    .competition--searchbar>div:first-child>div:first-child {
        position: unset;
        height: 100%;
        max-width: unset;
        width: fit-content;
        padding: 0px;
    }

    .competition--searchbar .textarea {
        padding-right: calc(45px - (var(--border-width) * 2) + 9px);
        width: fit-content;
    }

    /* .competition--searchbar > div:first-child .textarea{
        padding-right: 0px;
    } */
    .competition--searchbar>div:first-child .textarea {
        --padding-top: 0.25em;

    }

    .competition--searchbar>div:first-child .textarea~img {
        height: calc(45px);
        width: calc(45px);
        padding: 11px;
        position: absolute;
        top: 0px;
        right: unset;
        left: calc(100% - 45px - 55px);
        box-sizing: border-box;
        transform: unset;
        background: #15716F;
        border-radius: 0px 10px 10px 0px;
        border: var(--border-width) solid var(--color-blue);
        border-left: 0px;
        transition: all 0.15s ease-in-out;
        transform: translateX(-1px);
    }

    .competition--searchbar.no-search-btn>div:first-child .textarea~img {
        left: calc(100% - 45px);
    }

    .competition--searchbar.no-search-btn>div:first-child {
        border-radius: 10px;
    }

    .competition--searchbar>div:first-child:hover>img {
        border-color: white;
    }

    .competition--searchbar>div:first-child {
        border-radius: 10px 0px 0px 10px;
        border-right: 0px;
    }

    .competition--search.troops--search,
    .competition--search.teams--search {
        background: url(/public/img/troops_bg_mobile.webp);
        background-size: 100% 100%;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .competition--search form {
        margin-top: 10px;
    }

    /* .competition--searchbar{
        width: calc(100% - 30px);
    } */
    .competition--searchbar>div:first-child {
        padding-right: 30px;
    }

    .competition--searchbar>div:first-child .textarea:empty:not(.withtags)~img {
        display: block;
        padding-left: calc(45px - 13px);
    }
}

.teams-list,
.troops-list,
.competition-list {
    margin-bottom: var(--default-margin);
}



/* position: fixed;
top: 30vh;
transform: translateY(-50%);
left: 12px;
width: calc(100vw - 24px);
max-width: unset;
box-shadow: 0px 0px 32px 26px rgba(34, 201, 198, 0.32); */



@media screen and (max-width: calc(720px + 2em)) {

    .teams-list,
    .troops-list,
    .competition-list {
        padding: 15px;
        gap: 10px;
    }

    .competition-list {
        border-radius: 5px;
    }
}


.point-calc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
    padding: calc(var(--default-padding) - var(--border-width));
    box-sizing: border-box;
    width: 850px;
    max-width: calc(100% - 40px);
    height: auto;
    max-height: calc(100% - 40px);
    overflow: auto;
}

.point-calc .tabs-control {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 25px;
}

#point-calc-tab>div {
    display: flex;
    flex-direction: column;
    padding: 20px 0px;
    min-height: 452px;
    box-sizing: border-box;
}

#point-calc-tab>div>div:first-child {
    height: 178px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(30deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.5) 100%);
}

#point-calc-tab>div:not(.active) {
    display: none;
}

.point-calc>div:last-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.point-calc>div:last-child>div {
    display: flex;
    flex-direction: row;
    gap: 20px;
}


#point-calc-tab>div>p {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-blue);
    line-height: 1em;
    margin-bottom: 5px;
    margin-top: 10px;
}

.point-calc--group>div:first-child {
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 70px;
    line-height: 1em;
    text-transform: uppercase;
    font-style: italic;
}

.point-calc--solo>div:first-child {
    gap: 6px;
}

.point-calc--solo>div:first-child>div {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 30px;
    gap: 10px;
}

.point-calc--solo>div:first-child>div span {
    font-size: 15px;
    line-height: 1em;
    font-weight: 500;
}

.point-calc--solo>div:first-child>div::after {
    content: "";
    height: 5px;
    display: block;
    width: 100%;
    border-radius: 100px;
    background: #63FF85;
}

.point-calc--solo>div:first-child>div.green::after {
    background: #63FF85;
}

.point-calc--solo>div:first-child>div.yellow::after {
    background: #F5E741;
}

.point-calc--solo>div:first-child>div.blue::after {
    background: #2D77CF;
}

.point-calc--solo>div:first-child>div.red::after {
    background: #FF6B6B;
}

.point-calc>p {
    font-size: 30px;
    font-weight: 500;
    line-height: 1em;
    margin-top: 0px;
}

#point-calc-tab>div>p[disabled] {
    opacity: 0.5;
}

#point-calc-tab>div>select[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* #point-calc-tab > div > select:not([data-index]) + p,
#point-calc-tab > div > select:not([data-index]) + p + select{
    opacity: 0.5;
}
#point-calc-tab > div > select:not([data-index]) + p + select{
    cursor: not-allowed;
} */

@media screen and (max-width: calc(720px + 2em)) {
    #point-calc-tab>div>div:first-child {
        height: 145px;
        margin-bottom: 5px;
    }

    .point-calc--group>div:first-child {
        font-size: 30px;
    }

    .point-calc .tabs-control {
        gap: 10px;
    }

    .point-calc .tabs-control>div {
        width: 100%;
    }

    #point-calc-tab>div {
        min-height: 406px;
        box-sizing: border-box;
    }

    #point-calc-tab>div>p {
        font-size: 12px;
    }

    .point-calc--solo>div:first-child>div {
        height: 25px;
    }

    .point-calc--solo>div:first-child>div span {
        font-size: 10px;
    }

    .point-calc--solo>div:first-child {
        gap: 5px;
    }

    .point-calc>div:last-child {
        justify-content: end;
        gap: 10px;
    }

    .point-calc>div:last-child>div {
        gap: 10px;
    }

    .point-calc>div:last-child>a:first-child {
        /* position: absolute;
        top: 10px;
        right: 10px;
        width: 15px!important;
        height: 15px!important;
        font-size: 0px;
        padding: 0px;
        border: unset!important; */
        position: relative;
        width: 45px;
        font-size: 0px;
    }

    .point-calc>div:last-child>a:first-child::before {
        content: "";
        background-image: url(/public/img/cross.svg) !important;
        background-size: 20px 20px !important;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transition: all 0.15s ease-in-out;
    }

    .point-calc>div:last-child>a:first-child:hover::before {
        filter: brightness(10);
    }

    .point-calc>p {
        font-size: 20px;
        line-height: 1.2em;
    }
}

@media screen and (max-width: calc(385px)) {
    .point-calc .tabs-control>div.button {
        /* font-size: 12px; */
        padding: 0px;
        text-align: center;
    }
}

.popup-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
    padding: 17px;
    box-sizing: border-box;
    width: 850px;
    max-width: calc(100vw - 40px);
    height: auto;
    max-height: calc(100vh - 40px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-details {
    color: #ffffff80;
}

.popup-details h2 {
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 0px;
    text-transform: none;
    font-style: normal;
    color: white;
}

.popup-details p {
    font-size: 25px;
    line-height: 1em;
    font-weight: 400;
    margin: 0px;
}

.popup-details a.button {
    margin-left: auto;
    margin-top: 10px;
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-details h2 {
        font-size: 20px;
    }

    .popup-details p {
        font-size: 15px;
    }

    .popup-details a.button {
        margin-top: 0px;
    }
}

.popup-training-course {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    width: 960px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;

    border: 3px solid var(--Cyan-100, #22C9C6);
    background: linear-gradient(180deg, #082B2A 0%, #051A1A 250%);

    box-shadow: 0px 4px 121.7px 0px #176E6B;

}

.popup-training-course h4 {
    margin: 0px;
    color: #ffffff;
    font-family: Pragmatica Extended;
    font-weight: 900;
    font-style: Black Oblique;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;

}

.popup-training-course>p {
    margin: 0px;

    color: #FFFFFF;
    font-family: Pragmatica;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;

}

.popup-training-course-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-training-course-item {
    border: 3px solid var(--Cyan-100, #22C9C6);
    border-radius: 10px;
    min-height: 150px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    background:
        linear-gradient(90deg, rgba(3, 50, 59, 0.92) 0%, rgba(1, 28, 37, 0.9) 55%, rgba(1, 14, 22, 0.75) 100%),
        radial-gradient(circle at 85% 50%, rgba(77, 237, 255, 0.18) 0%, rgba(0, 0, 0, 0) 48%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.popup-training-course-item-general {
    background-image: url(/public/img/general-training-course.png);
}

.popup-training-course-item-individual {
    background-image: url(/public/img/individual-training-course.png);
}

.popup-training-course-item-special {
    background-image: url(/public/img/special-training-course.png);
}

.popup-training-course-item h3 {
    margin: 0px;
    color: #ffffff;

    font-family: Pragmatica Extended;
    font-weight: 900;
    font-style: Black Oblique;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;

}

.popup-training-course-item>a.button {
    width: fit-content;
    min-width: 170px;
}

.popup-training-course-close {
    margin: 6px auto 0px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .popup-training-course h4 {
        font-size: 30px;
    }

    .popup-training-course>p {
        font-size: 20px;
    }

    .popup-training-course-item h3 {
        font-size: 30px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-training-course {
        border: 2px solid var(--Cyan-100, #22C9C6);
        border-radius: 5px;
        padding: 14px;
        gap: 10px;
    }

    .popup-training-course h4 {
        font-size: 15px;
    }

    .popup-training-course>p {
        font-size: 10px;
        line-height: 1.3;
    }

    .popup-training-course-list {
        gap: 10px;
    }

    .popup-training-course-item {
        border-radius: 5px;
        border: 2px solid var(--Cyan-100, #22C9C6);
        min-height: 100px;
        padding: 12px;
    }

    .popup-training-course-item h3 {
        font-size: 15px;
        line-height: 1.1;
    }

    .popup-training-course-item-general {
        background-image: url(/public/img/general-training-course-mobile.png);
    }

    .popup-training-course-item-individual {
        background-image: url(/public/img/individual-training-course-mobile.png);
    }

    .popup-training-course-item-special {
        background-image: url(/public/img/special-training-course-mobile.png);
    }

    .popup-training-course-item>a.button {
        min-width: 130px;
    }
}


.popup-teaminfo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
    padding: 17px;
    box-sizing: border-box;
    width: 850px;
    max-width: calc(100vw - 40px);
    height: auto;
    max-height: calc(100vh - 40px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-teaminfo h2 {
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 0px;
    text-transform: none;
    font-style: normal;
}

.popup-teaminfo p {
    font-size: 25px;
    line-height: 1em;
    font-weight: 400;
    margin: 0px;
    opacity: 0.5;
    overflow-wrap: anywhere;
    margin-bottom: 10px;
}

.popup-teaminfo a.button {
    margin-left: auto;
    margin-top: 10px;
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-teaminfo h2 {
        font-size: 20px;
    }

    .popup-teaminfo p {
        font-size: 15px;
    }

    .popup-teaminfo a.button {
        margin-top: 0px;
    }
}

.loading {
    position: relative;
}

.loading::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 1, 0.75) url(/public/img/loader.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(200px, calc(100% - 40px)) min(200px, calc(100% - 40px));
    -webkit-box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 250px 0px rgba(0, 0, 0, 1);
}




.stage--events-list {
    /* background: var(--gradient-blue-2); */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 20px; */
    gap: 20px;
}

/* .stage--events-list ~ a.button{
    width: 100%;
    margin-top: 20px;
} */
.stage--events-list>div {
    background: url(/public/img/stagelist_bg_2_desctop.webp);
    background-size: 100% 100%;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.stage--events-list>div.no-team,
.stage--events-list>div.final {
    background: #1BC7BF33;
    background-size: 100% 100%;
    padding: 17px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
}

/* .stage--events-list > div > div:nth-child(1){
    display: grid;
    grid-template-columns: 130px calc(55% - 130px);
    column-gap: 20px;
} */
.stage--events-list>div>div:nth-child(1)>img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
}

.stage--events-list>div>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    min-height: 130px;

    gap: 20px;
}

.stage--events-list p {
    margin: 0px;
}

.stage--events-list>div>div:nth-child(1)>div {
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: 20px;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1) {
    max-width: calc(50%);
}

.stage--events-list>div.no-team>div:nth-child(1)>div:nth-child(1),
.stage--events-list>div.final>div:nth-child(1)>div:nth-child(1) {
    max-width: 100%;
    width: 100%;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
    max-width: calc(100% - 20px - 55px);
}

.stage--events-list>div.no-team>div:nth-child(1)>div:nth-child(1)>div:nth-child(2),
.stage--events-list>div.final>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
    width: 100%;
}

/* .stage--events-list > div.no-team > div:nth-child(1) > div:nth-child(1){
    max-width: 100%;
} */
.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) img {
    opacity: 1 !important;
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 10px;
    /* background: var(--gradient-black-transparent);
    padding: 10px; */
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>a {
    width: 55px;
    height: 55px;
    position: unset;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1).with-question-mark::before {
    content: "";
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 55px;
    height: 55px;
    border-radius: var(--border-radius);
    opacity: 0;
    /* background: radial-gradient(circle, var(--color-blue) 0%, rgba(255,255,255,0) 75%); */
    background-size: 100% 100%;
    background-position: center center;
    /* background: red; */
    z-index: -1;
    transition: all 0.15s ease-in-out;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 16px var(--color-blue);
    /* opacity: 1; */
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1).with-question-mark:hover::before {
    opacity: 1;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) img:not([src="/public/img/placeholder--team-icon.svg"]) {
    background: #00000080;
}


.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(1) {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-style: italic;
    white-space: nowrap;
    margin-bottom: 10px;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(1)>span:first-child {
    max-width: 80%;
    line-height: 1em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Pragmatica Extended";
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(1)>span:last-child {
    font-weight: 500;
    line-height: 1em;
    font-style: normal;
    opacity: 0.5;
    text-transform: none;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(2) {
    font-size: 20px;
    line-height: 1em;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(2)>* {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    opacity: 0.5;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(2)>*:first-child:not(:last-child) {
    opacity: 1;
}

.stage--events-list>div>div:nth-child(1)>div:nth-child(3) {
    margin-top: auto;
    gap: 20px;
    font-size: 20px;
    font-weight: 500;
}

.stage--events-list>div>div:nth-child(2) {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    gap: 20px;
    width: calc(44%);
}

.stage--events-list>div>div:nth-child(2)>a:nth-child(1)>img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.stage--events-list>div>div:nth-child(2)>a:nth-child(1)>img:hover {
    border-color: white;
}

/* .stage--events-list > div > div:nth-child(2) > a:nth-child(1) > img[src="/public/img/placeholder--team-icon.svg"]:hover{
    filter: brightness(10);
} */
.stage--events-list>div>div:nth-child(2)>a:nth-child(3)>img {
    width: 55px;
    height: 55px;
    padding: 10px;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
    border-radius: 10px;
    background: #1bc7bf33;
}

.stage--events-list>div>div:nth-child(2)>a:nth-child(3) {
    cursor: default;
}

.stage--events-list>div>div:nth-child(2)>p {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-style: italic;
    min-height: 55px;
    background: rgba(27, 199, 191, 0.2);
    border-radius: 10px;
    padding: 0px 20px;
    white-space: nowrap;
    width: calc(100% - 110px - 40px);
    box-sizing: border-box;
}

.stage--events-list>div>div:nth-child(2)>span {
    padding: 0px 20px;
    border-radius: 10px;
    background: #1BC7BF33;
    color: var(--color-blue);
    min-height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
}

.stage--events-list>div>div:nth-child(2)>p>span:first-child {
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage--events-list>div>div:nth-child(2)>p>span:last-child {
    font-weight: 400;
    font-style: normal;
    opacity: 0.5;
    white-space: nowrap;
}

.stage--events-list>div>a.button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}



@media screen and (max-width: calc(2em + 1312px)) {
    .stage--events-list>div>div:nth-child(2)>p>span:first-child {
        max-width: calc(100% - 50px);
    }

    .stage--events-list {
        gap: 16px;
    }

    /* .stage--events-list ~ a.button{
        margin-top: 16px;
    } */
    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(1),
    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(2) {
        gap: 8px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(1),
    .stage--events-list>div>div:nth-child(2)>p,
    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(2),
    .stage--events-list .lk-page--tags {
        font-size: 10px !important;
    }

    .stage--events-list>div>div:nth-child(1)>img {
        width: 79px;
        height: 79px;
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(1) {
        grid-template-columns: 79px calc(55% - 79px);
        gap: 10px;
    }

    .stage--events-list>div>div:nth-child(1) {
        min-height: 75px;
        /* gap: 10px; */
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(3) {
        gap: 10px;
    }

    .stage--events-list>div>div:nth-child(2) {
        width: calc(50% - 79px);
        gap: 10px;
    }

    .stage--events-list>div>div:nth-child(2)>a>img {
        width: 28px;
        height: 28px;
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(2)>p,
    .stage--events-list>div>div:nth-child(2)>span {
        min-height: 28px;
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(2)>span {
        font-size: 10px;
    }

    .stage--events-list>div {
        padding: 15px;
    }

    .stage--events-list>div>a.button {
        bottom: 15px;
        right: 15px;
    }

    .stage--events-list>div>div:nth-child(2)>p {
        width: calc(100% - 28px - 10px);
        gap: 5px;
        padding: 0px 10px;
    }
}





@media screen and (max-width: calc(720px + 2em)) {
    .stage--events-list>div>div:nth-child(2)>p>span:first-child {
        max-width: calc(100% - 50px);
    }

    .stage--events-list {
        gap: 10px;
    }

    /* .stage--events-list ~ a.button{
        margin-top: 10px;
    } */
    /* .stage--events-list > div > div:nth-child(1) > div:nth-child(3){
        margin-top: 0px;
    } */
    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(1),
    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>*:nth-child(2) {
        margin-bottom: 0px;
        gap: 10px;
    }

    /* .stage--events-list > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > *:nth-child(2) > *:nth-child(1){
        opacity: 1;
    } */
    .stage--events-list>div,
    .stage--events-list>div.no-team {
        background: url(/public/img/troopslist_bg_mobile.webp);
        background-size: 100% 100%;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        padding: 15px;
        min-height: 165px;
        border: none;
    }

    .stage--events-list>div.final {
        padding: 20px;
        position: relative;
    }

    .stage--events-list>div.final>div:nth-child(1)>div:nth-child(2)>a {
        position: absolute;
        bottom: calc(-45px - 15px);
        right: 0px;
    }

    .stage--events-list>div>div:nth-child(1) {
        display: flex;
        width: 100%;
        position: relative;
    }

    .stage--events-list>div>div:nth-child(1)>img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(1) {
        padding-left: 40px;
        width: 100%;
        box-sizing: border-box;
        gap: 5px;
    }

    .stage--events-list>div>div:nth-child(2) {
        top: unset;
        bottom: 0px;
        gap: 10px;
        left: 0px;
        right: unset;
        width: calc(70%);
        justify-content: start;
    }

    .stage--events-list>div>div:nth-child(2)>p {
        width: calc(100% - 40px);
        box-sizing: border-box;
    }

    .stage--events-list>div>div:nth-child(2)>span {
        width: 100%;
        font-size: 10px;
    }

    .stage--events-list>div>div:nth-child(2) img {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(1)>.lk-page--tags {
        margin-left: -40px;
    }

    .stage--events-list>div>div:nth-child(1)>.lk-page--tags img {
        height: 20px;
        width: 20px;
    }

    .stage--events-list>div>div:nth-child(1)>.lk-page--tags>* {
        height: 30px;
    }

    .stage--events-list>div>a.button {
        width: 45px;
        color: transparent !important;
        font-size: 0px;
        background-image: url(/public/img/details_arrow_2.svg);
        background-size: 100%;
        border: none;
        transition: all 0.15s ease-in-out;
    }

    .stage--events-list>div>a.button:hover {
        background-image: url(/public/img/details_arrow_2_hover.svg);
        background-size: 100%;
    }
}



.stage--events {
    margin: var(--default-margin) 0px;
    margin-top: var(--default-padding);
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(34, 201, 198, 0.1), rgba(34, 201, 198, 0.5) 100%);
    border-radius: 10px;
}

.stage--header {
    border-radius: 10px;
    background: url(/public/img/stage_municipal.webp);
    background-position: bottom right;
    background-size: 100% 100%;

    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stage--header.municipal {
    background: url(/public/img/stage_municipal.webp);
    background-position: bottom right;
    background-size: 100% 100%;
}

.stage--header.regional {
    background: url(/public/img/stage_regional.webp);
    background-position: bottom right;
    background-size: 100% 100%;
}

.stage--header.district {
    background: url(/public/img/stage_district.webp);
    background-position: bottom right;
    background-size: 100% 100%;
}

.stage--header.qualifying {
    background: url(/public/img/stage_qualifying.webp);
    background-position: bottom right;
    background-size: 100% 100%;
}

.stage--header.final {
    background: url(/public/img/stage_final.webp);
    background-position: bottom right;
    background-size: 100% 100%;
}

.stage--header>h1 {
    line-height: 1em;
}

.stage--header>p {
    margin: 0px;
    font-size: 30px;
    line-height: 1em;
    opacity: 0.5;
}

.stage--header>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.stage--header>div>div {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.stage--header>div>div>div {
    height: 55px;
    border-radius: 10px;
    background: rgba(34, 201, 198, 0.2);
    color: var(--color-blue);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 27px;
    letter-spacing: 0.0225em;
    transition: all 0.15s ease-in-out;
}

.stage--header>div>div>div:hover {
    color: white;
}

.stage--header>div>div>div.active {
    color: white;
    background: var(--color-blue);
}

.stage--header>div>span {
    background: linear-gradient(135deg, #00000080, #00000033 100%);
    padding: 0px 25px;
    height: 55px;
    border-radius: 10px;
    font-size: 20px;
}

.in-progress,
.scheduled,
.completed {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;

}

.in-progress::before,
.scheduled::before,
.completed::before {
    content: "";
    display: block;
    height: 17px;
    width: 17px;
    border-radius: 100px;
    background: red;
}

.in-progress::before {
    background: #E64156;
}

.scheduled::before {
    background: #F5E741;
}

.completed::before {
    background: #9B9B9B;
}

.lk-page--tags .in-progress,
.lk-page--tags .scheduled,
.lk-page--tags .completed {
    padding: 0px 15px;
}

.stage--tabs>div:not(.active) {
    display: none;
}

.stage--stat {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin: var(--default-margin) 0px;
    margin-top: var(--default-padding);
    background: linear-gradient(0deg, rgba(34, 201, 198, 0.1), rgba(34, 201, 198, 0.5) 100%);
    border-radius: 10px;
}

.stage--stat p {
    width: 100%;
    height: 70px;
    padding: 17px 12px;
    gap: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: #22C9C633;
    margin: 0px;
}

.stage--stat p span {
    font-size: 15px;
    line-height: 1em;
}

.stage--stat p span:nth-child(1) {
    opacity: 0.5;
}

.stage--stat .stat-triple {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.stage--stat .stat-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.stage--competitions>div {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin: var(--default-margin) 0px;
    margin-top: var(--default-padding);
    background: linear-gradient(0deg, rgba(34, 201, 198, 0.1), rgba(34, 201, 198, 0.5) 100%);
    border-radius: 10px;
}

.stage--competitions .stage--competition-list {
    gap: var(--default-padding);
}

@media screen and (max-width: calc(720px + 2em)) {
    .stage--competitions .stage--competition-list {
        gap: 10px;
    }
}

.stage--competition-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stage--competition-list>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 17px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.stage--competition-list>div>* {
    z-index: 2;
}

.stage--competition-list>div .bg-desctop {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    object-position: right bottom;
    object-fit: cover;
    z-index: 0;
    max-width: 100%;
    z-index: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #006C6A 0%, #000000 150%);
}

.stage--competition-list>div .bg-mobile {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    object-position: left bottom;
    object-fit: cover;
    max-width: 100%;
    z-index: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #006C6A 0%, #000000 150%);
}

@media screen and (max-width: calc(719px + 2em)) {
    .stage--competition-list>div .bg-desctop {
        display: none;
    }
}

@media screen and (min-width: calc(720px + 2em)) {
    .stage--competition-list>div .bg-mobile {
        display: none;
    }
}

.stage--competition-list>div>p {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px;
}

.stage--competition-list>div>p>span {
    font-size: 20px;
    line-height: 1em;
}

.stage--competition-list>div>p>span:nth-child(1) {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage--competition-list>div>p>span:nth-child(2) {
    font-weight: 500;
    opacity: 0.5;
}

.stage--competition-list>div>div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.stage--competition-list>div>div>div {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.stage--competition-list>div>div>div>* {
    text-decoration: none;
    color: white;
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #00000080, #00000033 100%);
    box-sizing: border-box;
    padding: 0px 25px;
    font-size: 20px;
}

.stage--register {
    padding: 20px;
    box-sizing: border-box;

    margin: var(--default-margin) 0px;
    margin-top: var(--default-padding);
    background: linear-gradient(0deg, rgba(34, 201, 198, 0.1), rgba(34, 201, 198, 0.5) 100%);
    border-radius: 10px;
}

.stage--register p {
    margin: 0px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.2em;
}




@media screen and (max-width: calc(1312px + 2em)) {
    .stage--header {
        gap: 16px;
        padding: 16px;
    }

    .stage--competitions>div {
        padding: 16px;
    }

    .stage--header>p {
        font-size: 20px;
    }

    .stage--header>div>div {
        gap: 8px;
    }

    .stage--header>div>div>div,
    .stage--header>div>span {
        height: 35px;
        padding: 0px 15px;
        border-radius: 5px;
    }

    .stage--header>div>div>div {
        font-size: 12px;
    }

    .stage--header>div>span {
        font-size: 10px;
    }

    .stage--events-list>div>div:nth-child(2)>a:nth-child(1)>img,
    .stage--events-list>div>div:nth-child(2)>a:nth-child(3)>img {
        height: 28px;
        width: 28px;
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(2)>a:nth-child(3)>img {
        padding: 5px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) img {
        width: 28px;
        height: 28px;
        /* padding: 5px; */
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>a {
        width: 28px;
        height: 28px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1).with-question-mark::before {
        width: 28px;
        height: 28px;
    }

    .stage--events-list>div>div:nth-child(1)>div {
        gap: 10px;
    }

    .stage--stat {
        gap: 16px
    }

    .stage--stat .stat-triple {
        column-gap: 16px;
        row-gap: 16px;
    }

    .stage--stat .stat-double {
        column-gap: 16px;
        row-gap: 16px;
    }

    .stage--stat p span {
        font-size: 10px;
    }

    .stage--stat p {
        gap: 10px;

        padding: 8px 13px;
        height: 50px;
        border-radius: 5px;
    }

    .stage--competition-list>div>p {
        gap: 5px;
    }

    .stage--competition-list>div>p>span {
        font-size: 10px;
    }

    .stage--competition-list>div>div>div {
        gap: 8px;
    }

    .stage--competition-list>div>div>div>* {
        height: 35px;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 10px;
    }


    .stage--header {
        gap: 10px;
        background: url(/public/img/stage_municipal-tablet.webp);
        background-position: bottom right;
        background-size: 100% 100%;
        border-radius: 5px;
    }

    .stage--header.municipal {
        background: url(/public/img/stage_municipal-tablet.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.regional {
        background: url(/public/img/stage_regional-tablet.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.district {
        background: url(/public/img/stage_district-tablet.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.qualifying {
        background: url(/public/img/stage_qualifying-tablet.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.final {
        background: url(/public/img/stage_final-tablet.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .lk-page--tags .in-progress,
    .lk-page--tags .scheduled,
    .lk-page--tags .completed {
        gap: 10px;
    }

    .in-progress::before,
    .scheduled::before,
    .completed::before {
        height: 13px;
        width: 13px;
    }
}


@media screen and (max-width: calc(720px + 2em)) {
    .stage--competition-list>div>p>span:nth-child(1) {
        overflow: unset;
        text-overflow: unset;
        white-space: unset;
    }

    .in-progress::before,
    .scheduled::before,
    .completed::before {
        height: 10px;
        width: 10px;
    }

    .stage--header {
        gap: 10px;
        background: url(/public/img/stage_municipal-mobile.webp);
        background-position: bottom right;
        background-size: 100% 100%;
        border-radius: 5px;
    }

    .stage--header.municipal {
        background: url(/public/img/stage_municipal-mobile.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.regional {
        background: url(/public/img/stage_regional-mobile.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.district {
        background: url(/public/img/stage_district-mobile.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.qualifying {
        background: url(/public/img/stage_qualifying-mobile.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--header.final {
        background: url(/public/img/stage_final-mobile.webp);
        background-position: bottom right;
        background-size: 100% 100%;
    }

    .stage--events,
    .stage--stat,
    .stage--competitions>div,
    .stage--register {
        border-radius: 5px;
        padding: 15px;
    }

    .stage--header>div {
        flex-direction: column-reverse;
        align-items: start;
        gap: 10px;
    }

    .stage--header>p {
        font-size: 15px;
    }

    .stage--header>div>span {
        height: 30px;
    }

    .stage--header>div>div>div {
        white-space: nowrap;
    }

    .stage--header>div>div {
        overflow: auto;
        width: 100%;
        scrollbar-width: thin;
    }

    .stage--events-list>div>div:nth-child(1) {
        padding-left: 0px;
        gap: 15px;
    }

    .stage--events-list>div>div:nth-child(1)>.lk-page--tags {
        margin: 0px;
    }

    .stage--events-list>div>div:nth-child(1)>.lk-page--tags>* {
        gap: 10px;
    }

    .stage--events-list>div.no-team,
    .stage--events-list>div.final {
        border-radius: 5px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1) {
        width: 100%;
        max-width: 100%;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) img {
        width: 30px;
        height: 30px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>a {
        width: 30px;
        height: 30px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(1).with-question-mark::before {
        width: 30px;
        height: 30px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
        max-width: calc(100% - 20px - 30px);
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .stage--events-list>div>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) p {
        gap: 10px;
    }

    .stage--events-list>div>div:nth-child(2)>a:nth-child(3) {
        display: none;
    }

    .stage--events-list>div {
        padding-bottom: 75px !important;
    }

    .stage--stat {
        gap: 10px;
    }

    .stage--stat p {
        height: 64px;
        justify-content: center;
        gap: 10px;
    }

    .stage--stat .stat-triple {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .stage--stat .stat-double {
        grid-template-columns: 1fr;
        column-gap: 10px;
        row-gap: 10px;
    }

    .stage--competition-list>div>div {
        flex-direction: column;
        align-items: end;
        gap: 20px;
    }

    .stage--competition-list>div>div>div {
        width: 100%;
    }

    .stage--competition-list>div {
        border-radius: 5px;
        gap: 10px;
        padding: 13px;
    }

    .lk-page--tags .in-progress,
    .lk-page--tags .scheduled,
    .lk-page--tags .completed {
        padding: 0px 10px;
    }
}

@media screen and (max-width: calc(378px)) {
    .stage--events-list>div>div:nth-child(1)>.lk-page--tags>* {
        font-size: 0.9em;
    }
}

@media screen and (max-width: calc(360px)) {
    .stage--events-list>div>div:nth-child(1)>.lk-page--tags>* {
        font-size: 0.8em;
    }
}


.skills-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: url(/public/img/skills-bg-desctop.webp), linear-gradient(180deg, rgba(34, 200, 197, 0.43) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 77px, 100% calc(100% - 77px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, top 77px center;

    border-radius: var(--border-radius);

    margin-bottom: var(--default-margin);

    -webkit-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 250px 0px rgba(34, 201, 198, 0.32);
}

.skills-page>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}

.skills-page .with-question-mark>*+span {
    font-weight: 500;
    text-transform: none;
    line-height: 1em;
    font-family: "Pragmatica";
    font-style: normal;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* @media screen and (max-width: calc(720px + 2em)) {
    .with-question-mark.wqm-bottom > * + span{
        position: absolute;
        top: calc(100% + 15px)!important;
        height: fit-content;
    }
} */
.skills-page h1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    line-height: 1em;
}

.skills-page h1 .with-question-mark>img,
.skills-page h1 .with-question-mark {
    height: 49px;
}

.skills-page .skills-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.skills-page .skills-list>div {
    flex-basis: calc(50% - 10px);
    padding: 17px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);

    box-sizing: border-box;
    background: linear-gradient(-30deg, black 0%, #006C6A 100%);
    background-image: url(/public/img/skill-movement-bg.webp);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
}

.skills-page .skills-list>div>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.skills-page .skills-list>div>div>p {
    margin: 0px;
    font-size: 20px;
    line-height: 1em;
}

.skills-page .skills-list>div>div>a.button {
    margin-top: auto;
    margin-left: auto;
}

.skills-page .skills-list>div>div>p:nth-child(3),
.skills-page .skills-list>div>div>p:nth-child(5) {
    margin-top: 10px;
}

.skills-page .skills-list>div>div>p:nth-child(5) {
    margin-bottom: 10px;
}

@media screen and (max-width: calc(1312 + 2em)) {
    .skills-page .skills-list>div>div {
        gap: 8px;
    }

    .skills-page .skills-list>div>div>p:nth-child(3),
    .skills-page .skills-list>div>div>p:nth-child(5) {
        margin-top: 8px;
    }

    .skills-page .skills-list>div>div>p:nth-child(5) {
        margin-bottom: 8px;
    }
}

@media screen and (max-width: calc(720 + 2em)) {
    .skills-page .skills-list>div>div>p:nth-child(5) {
        margin-bottom: 10px;
    }
}

.skills-page .skills-list>div>div>div {
    width: 495px;
    height: 5px;
    background: red;
    border-radius: 5px;
}

.skills-page .skills-list>div>div>p:nth-child(1) {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
}

.skills-page .skills-list>div>div>p:nth-child(2) {
    color: #ffffff80;
    font-weight: 500;
}

.skills-page .skills-list>div>div>p:nth-child(2)>span {
    color: red;
    margin-left: 10px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .skills-page .skills-list>div>div>p:nth-child(2)>span {
        margin-left: 8px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .skills-page .skills-list>div>div>p:nth-child(2)>span {
        margin-left: 5px;
    }
}

.skills-page .skills-list>div>div>p:nth-child(3) {
    font-weight: 500;
}

.skills-page .skills-list>div>div>p:nth-child(5) {
    color: #ffffff80;
}

.skills-page .skills-list>div.skill-bonus {
    flex-basis: 100%;
    position: relative;
}

.skills-page .skills-list>div.skill-bonus>a.button {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.skills-page .skills-list>div.skill-bonus>div {
    width: calc(50% - 20px);
}


.skills-page .skills-list>div.skill-bonus>div>div {
    background: white;
}

.skills-page .skills-list>div.skill-bonus>div>p:nth-child(2)>span {
    color: white;
    margin-left: 10px;
}

.skills-page .skills-list>div.skill-bonus {
    background: linear-gradient(-30deg, black 0%, #006C6A 100%);
    background-image: url(/public/img/skill-bonus-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

.skills-page .skills-list>div.skill-movement>div>div {
    background: #63FF85;
}

.skills-page .skills-list>div.skill-movement>div>p:nth-child(2)>span {
    color: #63FF85;
}

.skills-page .skills-list>div.skill-movement {
    background: url(/public/img/skill-movement-bg.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

.skills-page .skills-list>div.skill-sensor>div>div {
    background: #F5E741;
}

.skills-page .skills-list>div.skill-sensor>div>p:nth-child(2)>span {
    color: #F5E741;
}

.skills-page .skills-list>div.skill-sensor {
    background: url(/public/img/skill-sensor-bg.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

.skills-page .skills-list>div.skill-mental>div>div {
    background: #2D77CF;
}

.skills-page .skills-list>div.skill-mental>div>p:nth-child(2)>span {
    color: #2D77CF;
}

.skills-page .skills-list>div.skill-mental {
    background: url(/public/img/skill-mental-bg.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

.skills-page .skills-list>div.skill-charisma>div>div {
    background: #FF6B6B;
}

.skills-page .skills-list>div.skill-charisma>div>p:nth-child(2)>span {
    color: #FF6B6B;
}

.skills-page .skills-list>div.skill-charisma {
    background: url(/public/img/skill-charisma-bg.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .skills-page .skills-list>div {
        flex-basis: calc(50% - 8px);
        padding: 14px
    }

    .skills-page .skills-list {
        gap: 16px
    }

    .skills-page h1 .with-question-mark>img,
    .skills-page h1 .with-question-mark {
        height: 30px;
    }

    .skills-page h1 {
        gap: 15px;
    }

    .skills-page {
        padding: 16px;
        background: url(/public/img/skills-bg-tablet.webp), linear-gradient(180deg, rgba(35, 203, 197, 0.47) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 49px, 100% calc(100% - 49px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 49px center;
        margin-bottom: 32px;
        gap: 16px;
    }

    .skills-page .skills-list>div>div>p:nth-child(1),
    .skills-page .skills-list>div>div>p:nth-child(3) {
        font-size: 15px;
    }

    .skills-page .skills-list>div>div>p:nth-child(1) {
        margin-bottom: -2px;
    }

    .skills-page .skills-list>div>div>p:nth-child(3) {
        margin-top: 6px;
        margin-bottom: -2px;
    }

    .skills-page .skills-list>div>div>p:nth-child(5) {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .skills-page .skills-list>div>div>p:nth-child(2),
    .skills-page .skills-list>div>div>p:nth-child(5) {
        font-size: 10px;
    }

    .skills-page .skills-list>div>div>div {
        width: 272px;
    }

    .skills-page .skills-list>div.skill-movement {
        background: url(/public/img/skill-movement-bg-tablet.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-sensor {
        background: url(/public/img/skill-sensor-bg-tablet.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-mental {
        background: url(/public/img/skill-mental-bg-tablet.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-charisma {
        background: url(/public/img/skill-charisma-bg-tablet.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-bonus {
        background: url(/public/img/skill-bonus-bg-tablet.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .skills-page .skills-list>div {
        flex-basis: calc(50% - 7px);
    }

    .skills-page .skills-list>div>div>p:nth-child(1) {
        margin-bottom: 0px;
    }

    .skills-page .skills-list {
        gap: 15px
    }

    .skills-page h1 {
        gap: 10px;
    }

    .skills-page h1 .with-question-mark>img,
    .skills-page h1 .with-question-mark {
        height: 15px;
    }

    .skills-page>div:nth-child(1) {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 15px;
    }

    .skills-page .skills-list>div.skill-movement {
        background: url(/public/img/skill-movement-bg-mobile.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-sensor {
        background: url(/public/img/skill-sensor-bg-mobile.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-mental {
        background: url(/public/img/skill-mental-bg-mobile.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-charisma {
        background: url(/public/img/skill-charisma-bg-mobile.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div.skill-bonus {
        background: url(/public/img/skill-bonus-bg-mobile.webp), linear-gradient(-30deg, black 0%, #006C6A 100%);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .skills-page .skills-list>div>div>p:nth-child(3) {
        font-size: 10px;
        margin-top: 10px;
        margin-bottom: 0px;
    }

    .skills-page .skills-list>div>div>p:nth-child(5) {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .skills-page {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        background: url(/public/img/skills-bg-mobile.webp), linear-gradient(180deg, rgba(35, 203, 197, 0.459) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 52px, 100% calc(100% - 52px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 52px center;
        margin-bottom: 30px;
    }

    .skills-page .with-question-mark>*+span {
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    .skills-page .skills-list>div {
        flex-basis: 100%;
        padding: 13px;
        max-width: 100%;
    }

    .skills-page .skills-list>div.skill-bonus>div {
        width: 100%;
    }

    .skills-page .skills-list>div>div {
        gap: 5px;
    }

    .skills-page .skills-list>div>div>div {
        width: 271px;
        max-width: 95%;
    }

    .stage--events-list>div>div:nth-child(2)>a:nth-child(1)>img {
        height: 30px;
        width: 30px;
    }

    .stage--events-list>div>div:nth-child(2)>p,
    .stage--events-list>div>div:nth-child(2)>span {
        min-height: 30px;
    }

    .skills-page .skills-list>div>div {
        height: unset;
    }

    .skills-page .skills-list>div.skill-bonus>a.button {
        position: unset;
        right: unset;
        bottom: unset;
        margin-left: auto;
        margin-top: auto;
        margin-top: 5px;
    }
}


.events--winner-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 95px;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(95.47deg, #DA8207 -0.22%, #DD9318 10.66%, #FFCB3C 26.65%, #FFCB3C 78.95%, #E39C1E 93%, #FBC63A 97.24%);
    transition: all 0.25s ease-in-out;
    box-shadow: 0px 0px 57.5px -1px #FFCC3C00;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.events--winner-block:hover {
    cursor: pointer;
    box-shadow: 0px 0px 57.5px -1px #FFCC3C;
}

.events--winner-block>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.events--winner-block>div:nth-child(1)>p {
    font-size: 30px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    margin: 0px;
    color: white;

    font-family: "Pragmatica Extended";
}

.events--winner-block>div:nth-child(1)>img {
    height: 55px;
    width: 55px;
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    padding: 8px;
    box-sizing: border-box;
}

.events--winner-block>div:nth-child(2)>img {
    height: 55px;
    width: 55px;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    border: var(--border-width) solid white;
}

.events--winner-block>div:nth-child(2)>img[src="/public/img/placeholder--team-icon.svg"] {
    filter: brightness(10);
}

.events--winner-block>div:nth-child(2)>img:not([src="/public/img/placeholder--team-icon.svg"]) {
    background: #00000080;
}

.events--winner-block>div:nth-child(2)>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    border-radius: var(--border-radius);
    padding: 15px;
    height: 55px;
    font-family: "Pragmatica Extended";
    box-sizing: border-box;
}

.events--winner-block>div:nth-child(2)>div>span {
    font-size: 20px;
    line-height: 1em;
    text-transform: uppercase;
}

.events--winner-block>div:nth-child(2)>div>span:nth-child(1) {
    color: white;
    font-weight: 900;
    font-style: italic;
}

.events--winner-block>div:nth-child(2)>div>span:nth-child(2) {
    font-weight: 500;
    color: #ffffff83;
}



.events--region {
    padding: 20px;
    box-sizing: border-box;
    background: url(/public/img/events--region-bg-desctop.webp);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding-bottom: calc(20px + 20px + 55px);
    margin-bottom: -35px;
}

.events--region.qualifying~a.button {
    margin-top: 55px;
}

.events--region.qualifying~.events--info.active {
    margin-bottom: -35px;
}

.events--region>div:nth-child(1) {
    display: grid;
    grid-template-columns: 85px calc(100% - 20px - 85px);
    column-gap: 20px;
    width: 100%;
}

.events--region.no-img>div:nth-child(1) {
    grid-template-columns: 100%;
}

.events--region>div:nth-child(1)>img {
    width: 85px;
    height: 85px;
    box-sizing: border-box;
    border-radius: var(--border-radius);
}

.events--region>div:nth-child(1)>img:not([src="/public/img/placeholder--team-icon.svg"]) {
    background: #00000080;
}

.events--region>div:nth-child(1)>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.events--region>div:nth-child(1)>div>p {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 0px;
    gap: 20px;
}

.events--region>div:nth-child(1)>div>p:nth-child(1)>span:nth-child(1) {
    font-size: 35px;
    font-weight: 900;
    font-style: italic;
    line-height: 1em;
    max-width: calc(100% - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.events--region>div:nth-child(1)>div>p:nth-child(1)>span:nth-child(2) {
    font-size: 20px;
    line-height: 1em;
    white-space: nowrap;
    width: fit-content;
    color: #ffffff83;
    font-weight: 500;

}

.events--region>div:nth-child(1)>div>p:nth-child(2)>span:nth-child(1) {
    font-size: 30px;
    font-weight: 500;
    line-height: 1em;
}

.events--region>div:nth-child(1)>div>p:nth-child(2)>span:last-child {
    font-size: 30px;
    font-weight: 400;
    line-height: 1em;
    white-space: nowrap;
    width: fit-content;
    color: #ffffff83;
    text-transform: uppercase;
}

.events--region>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.events--region>div:nth-child(2)>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.events--region>div:nth-child(2)>div>p {
    margin: 0px;
    padding: 15px 25px;
    box-sizing: border-box;
    line-height: 1em;
    font-size: 20px;
    font-weight: 500;
    color: white;
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--border-radius);
}

.events--region>div:nth-child(2)>div>p.scheduled,
.events--region>div:nth-child(2)>div>p.completed,
.events--region>div:nth-child(2)>div>p.in-progress {
    padding: 15px 15px;
}

.events--region>div:nth-child(2)>div:nth-child(1)>p {
    background: linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    border: var(--border-width) solid #22c9c69f;
    transition: background 0.25s ease-in-out;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.events--region>div:nth-child(2)>div:nth-child(2)>p {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}


.events--region>div:nth-child(2)>div:nth-child(1)>p a {
    color: inherit;
    cursor: pointer;
}

.events--region>div:nth-child(2)>div:nth-child(1)>p.events--stage-qualifying {
    background-image: url(/public/img/events--stage-1.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-size: cover;
    background-position: center right;
}

.events--region>div:nth-child(2)>div:nth-child(1)>p.events--stage-municipal {
    background-image: url(/public/img/events--stage-2.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-size: cover;
    background-position: center right;
}

.events--region>div:nth-child(2)>div:nth-child(1)>p.events--stage-regional {
    background-image: url(/public/img/events--stage-3.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-size: cover;
    background-position: center right;
}

.events--region>div:nth-child(2)>div:nth-child(1)>p.events--stage-half {
    background-image: url(/public/img/events--stage-4.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-size: cover;
    background-position: center right;
}

.events--region>div:nth-child(2)>div:nth-child(1)>p.events--stage-final {
    background-image: url(/public/img/events--stage-5.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-size: cover;
    background-position: center right;
}

/*
.events--region > div:nth-child(2) > div:nth-child(1) > p.events--stage-qualifying:hover,
.events--region > div:nth-child(2) > div:nth-child(1) > p.events--stage-municipal:hover,
.events--region > div:nth-child(2) > div:nth-child(1) > p.events--stage-regional:hover,
.events--region > div:nth-child(2) > div:nth-child(1) > p.events--stage-half:hover,
.events--region > div:nth-child(2) > div:nth-child(1) > p.events--stage-final:hover{
    background: var(--color-blue);
} */

.events--region>a.button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.events--region>a.button>*:nth-child(2) {
    display: none;
}


.events--info {
    background: url(/public/img/events--info-bg-desctop-t.webp), url(/public/img/events--info-bg-desctop.webp), url(/public/img/events--info-bg-desctop-b.webp);
    background-size: 100% 74px, 100% calc(100% - 74px - 37px), 100% 37px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, top 74px center, bottom center;

    padding: 20px;
    box-sizing: border-box;
    margin-bottom: -340px;
    opacity: 0;
    z-index: -9999;
    position: relative;
    transition: all 0.25s ease-in-out;
}

.events--info.active {
    opacity: 1;
    z-index: 0;
    margin-bottom: 20px;
}

.events--info>h2 {
    margin-bottom: 20px;
}

.events--info>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.events--info>div>div {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 10px));
    column-gap: 20px;
}

.events--info>div p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 0px;
    width: 100%;
    padding: 12px 17px;
    box-sizing: border-box;
    min-height: 70px;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    background: #22c9c633;
}

.events--info>div p>span {
    font-size: 15px;
    line-height: 1em;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.events--info>div>p>span {
    white-space: normal;
}

.events--info>div p>span:nth-child(1) {
    color: #ffffff83;
}

.events--info>div p>span:nth-child(2) {
    font-weight: 500;
    color: #ffffff;
}

.events--results {
    background: url(/public/img/events--results-bg-desctop.webp);
    background-size: 100% 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    max-height: 795px;
    border-radius: var(--border-radius);
}

/* .events--results > .events--result--nuff-container{
    padding-right: 20px;
    scrollbar-gutter: stable;
    overflow: auto;
} */
.events--results>.events--result--nuff-container>.news-nuffsaid {
    margin-bottom: 0px;
}

.events--results {

    background: url(/public/img/events--results-bg-desctop-t.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.39215) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 65px, 100% calc(100% - 65px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center;
}

.events--results>h2 {
    margin-bottom: 20px;
}

.events--results>.events--results-list--header>div,
.events--results>.events--results-list>div {
    display: grid;
    grid-template-columns: 111px 55px 347px 254px 55px 170px 90px 90px;
    column-gap: 10px;
    padding-right: 20px;
}

.events--results>.events--results-list--header>div {
    scrollbar-gutter: stable;
    overflow: hidden;
}

.events--results>.events--results-list--header>div>div>*:nth-child(2) {
    display: none;
}

.events--results>.events--results-list {
    overflow-y: scroll;
    max-height: 640px;
}

.events--results>.events--results-list--header {
    margin-bottom: 10px;
}

.events--results>.events--results-list--header>div>div,
.events--results>.events--results-list>div>div {
    height: 55px;
    box-sizing: border-box;
    padding: 0px 15px;
    border-radius: var(--border-radius);
    gap: 20px;
}

.events--results>.events--results-list--header>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2em;
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-style: italic;
}

.events--results>.events--results-list--header>div>div:nth-child(2),
.events--results>.events--results-list--header>div>div:nth-child(5) {
    padding: 0px;
}

.events--results>.events--results-list>div>div {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
}

.events--results>.events--results-list>div>div:nth-child(3) {
    padding: 0px 10px;
}

.events--results>.events--results-list>div>div:nth-child(7) {
    padding: 0px;
    justify-content: center;
}

.events--results>.events--results-list>div>div:nth-child(4)>*:nth-child(1) {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;

}

.events--results>.events--results-list>div>div:nth-child(3)>*:nth-child(1) {
    display: block;
    max-width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.events--results>.events--results-list>div>div:nth-child(3)>*:nth-child(2) {
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff89;
}

.events--results>.events--results-list>div>div:nth-child(1),
.events--results>.events--results-list>div>div:nth-child(5),
.events--results>.events--results-list>div>div:nth-child(6) {
    justify-content: center;
}

.events--results>.events--results-list>div>div:nth-child(4),
.events--results>.events--results-list>div>div:nth-child(6) {
    overflow: unset;
}

.events--results>.events--results-list>div>div:nth-child(4)>*:nth-child(1),
.events--results>.events--results-list>div>div:nth-child(6)>*:nth-child(1) {
    width: 100%;
    display: block;
}

.events--results>.events--results-list>div>div:nth-child(6)>*:nth-child(1) {
    text-align: center;
}

.events--results>.events--results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.events--results>.events--results-list>div>div:nth-child(2),
.events--results>.events--results-list>div>div:nth-child(5) {
    padding: 0px;
    background: none;
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.events--results>.events--results-list>div.gold>div:nth-child(2) {
    border-color: #F5E741;
}

.events--results>.events--results-list>div.silver>div:nth-child(2) {
    border-color: #D3D3D3;
}

.events--results>.events--results-list>div.bronze>div:nth-child(2) {
    border-color: #FFA800;
}

.events--results>.events--results-list>div.myteam>div {
    background: #22c9c633
}

.events--results>.events--results-list>div>div:nth-child(2)>a,
.events--results>.events--results-list>div>div:nth-child(5)>a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.events--results>.events--results-list>div>div:nth-child(2)>a>img {
    width: 100%;
    height: 100%;
    transition: all 0.15s ease-in-out;
}

.events--results>.events--results-list--header>div>div:nth-child(5)>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    filter: brightness(10);
}

.events--results>.events--results-list>div>div:nth-child(5)>a {
    background: #00000083;
    cursor: pointer;
}

.events--results>.events--results-list>div>div:nth-child(5)>a>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    transition: all 0.15s ease-in-out;
}

.events--results>.events--results-list>div>div:nth-child(5):hover>a>img {
    filter: brightness(10);
}

.events--results>.events--results-list>div>div:nth-child(5):hover {
    border-color: white;
}

.events--results>.events--results-list>div>div:nth-child(5):active {
    border-color: var(--color-blue);
}

.events--results>.events--results-list>div>div:nth-child(5):active>a {
    background: var(--gradient-blue);
}

.events--results>.events--results-list>div>div:nth-child(5):active>a>img {
    filter: brightness(10);
}


.events--results>.events--results-list>div>div:nth-child(5).missing-application>a {
    background: rgba(255, 255, 255, 0.19);
    cursor: not-allowed;
}

.events--results>.events--results-list>div>div:nth-child(5).missing-application>a>img {
    filter: brightness(10);
    opacity: 0.5;
}

.events--results>.events--results-list>div>div:nth-child(5).missing-application {
    border-color: rgba(255, 255, 255, 0.5);
}

/* missing-application */

.events--results>.events--results-list>div>div:nth-child(2):hover {
    border-color: white;
}

.events--competition-list {
    background: url(/public/img/events--competition-bg-desctop.png), linear-gradient(180deg, rgba(33, 201, 198, 0.445) 0%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 54px, 100% calc(100% - 54px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.events--competition-list>h2 {
    margin-bottom: 20px;
}

.events--competition-list .competition-list {
    padding: 0px;
    background: none;
    padding-right: 20px;
    justify-content: start;
    margin-bottom: 0px;
}

.events--results.empty>.events--results-list--header>div {
    overflow: hidden !important;
    scrollbar-gutter: unset;
    padding-right: 0px;
    /* grid-template-columns: 111px 55px 1fr 358px 55px 182px 90px; */
}

.events--results>.events--results-list>div>div:last-child {
    justify-content: center;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .events--region>div:nth-child(1)>div>p {
        gap: 8px;
    }

    .events--winner-block {
        height: 60px;
        padding: 16px;
        margin-bottom: 15px;
    }

    .events--winner-block>div:nth-child(1)>img {
        width: 28px;
        height: 28px;
        padding: 4px;
    }

    .events--winner-block>div:nth-child(2)>img {
        width: 28px;
        height: 28px;

    }

    .events--winner-block>div {
        gap: 10px;
    }

    .events--winner-block>div:nth-child(1)>p {
        font-size: 20px;
    }

    .events--winner-block>div:nth-child(2)>div {
        height: 28px;
        padding: 10px;
        gap: 10px;
    }

    .events--winner-block>div:nth-child(2)>div>span {
        font-size: 10px;
    }

    .events--region {
        gap: 16px;
        padding: 16px;
        padding-bottom: calc(16px + 16px + 35px);
        margin-bottom: -25px;
        background: url(/public/img/events--region-bg-tablet.webp);
        background-size: 100% 100%;
    }

    .events--region.qualifying~a.button {
        margin-top: 45px;
    }

    .events--region.qualifying~.events--info.active {
        margin-bottom: -35px;
    }

    .events--region>div:nth-child(1) {
        grid-template-columns: 40px calc(100% - 20px - 40px);
        column-gap: 10px;
    }

    .events--region.no-img>div:nth-child(1) {
        grid-template-columns: 100%;
    }

    .events--region>div:nth-child(1)>img {
        width: 40px;
        height: 40px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(1)>span:nth-child(1) {
        font-size: 15px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(1)>span:nth-child(2) {
        font-size: 15px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(2)>span:nth-child(1) {
        font-size: 12px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(2)>span:last-child {
        font-size: 12px;
    }

    .events--region>div:nth-child(2)>div>p {
        height: 35px;
        font-size: 10px;
        padding: 10px 15px;
    }

    .events--region>a.button {
        right: 16px;
        bottom: 16px;
    }

    .events--info {
        background: url(/public/img/events--info-bg-tablet-t.webp), url(/public/img/events--info-bg-tablet.webp), url(/public/img/events--info-bg-tablet-b.webp);
        background-size: 100% 57px, 100% calc(100% - 57px - 23px), 100% 23px;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 57px center, bottom center;

        padding: 16px;
        margin-bottom: -255px;
    }

    .events--info.active {
        margin-bottom: 16px;
    }

    .events--info>h2 {
        margin-bottom: 10px;
    }

    .events--info>div p {
        min-height: 50px;
        padding: 8px 15px;
        gap: 10px;
    }

    .events--info>div p>span {
        font-size: 10px;
    }

    .events--info>div {
        gap: 16px;
    }

    .events--info>div>div {
        grid-template-columns: repeat(2, calc(50% - 8px));
        column-gap: 16px;
    }

    .events--results {
        background-size: 100% 100%;
        padding: 16px;
        max-height: 476px;
    }

    .events--results {

        background: url(/public/img/events--results-bg-tablet-t.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 44px, 100% calc(100% - 44px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .events--results>h2 {
        margin-bottom: 10px;
    }

    .events--results>.events--results-list--header>div,
    .events--results>.events--results-list>div {
        grid-template-columns: 33px 33px 168px 190px 33px 81px 44px 44px;
        column-gap: 5px;
        padding-right: 15px;
    }

    .events--results.empty>.events--results-list--header>div {
        grid-template-columns: 33px 33px 168px 190px 33px 81px 44px 44px;
    }

    .events--results>.events--results-list--header>div>div,
    .events--results>.events--results-list>div>div {
        height: 33px;
    }

    .events--results>.events--results-list--header>div>div {
        padding: 0px;
        font-size: 10px;
    }

    .events--results>.events--results-list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 8px;
    }

    .events--results>.events--results-list>div>div:last-child {
        padding: 0px;
    }

    .events--results>.events--results-list--header>div>div:nth-child(2)>img {
        width: 17px;
    }

    .events--results>.events--results-list--header>div>div>*:nth-child(2) {
        display: block;
    }

    .events--results>.events--results-list--header>div>div:nth-child(1)>*:nth-child(1),
    .events--results>.events--results-list--header>div>div:nth-child(6)>*:nth-child(1),
    .events--results>.events--results-list--header>div>div:nth-child(7)>*:nth-child(1),
    .events--results>.events--results-list--header>div>div:nth-child(8)>*:nth-child(1) {
        display: none;
    }

    .events--results>.events--results-list>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .events--results>.events--results-list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .events--results>.events--results-list>div>div:nth-child(5)>a>img,
    .events--results>.events--results-list--header>div>div:nth-child(5)>img {
        padding: 5px;
    }

    .events--results>.events--results-list {
        max-height: 375px;
    }

    .events--results>.events--results-list--header {
        margin-bottom: 5px;
    }

    .events--results>.events--results-list {
        gap: 5px;
    }

    .events--competition-list {
        background: url(/public/img/events--competition-bg-tablet.png), linear-gradient(180deg, rgba(33, 201, 198, 0.445) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 39px, 100% calc(100% - 39px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .events--competition-list>h2 {
        margin-bottom: 10px;
    }

    .events--competition-list .competition-list {
        padding-right: 10px;
    }

    .events--region>div:nth-child(2)>div {
        gap: 8px;
    }
}


@media screen and (max-width: calc(720px + 2em)) {
    .events--region>div:nth-child(1)>div>p {
        gap: 10px;
    }

    .events--winner-block {
        height: 60px;
        padding: 15px;
        margin-bottom: 15px;
    }

    .events--winner-block>div:nth-child(1)>img {
        width: 30px;
        height: 30px;
        padding: 4px;
        border-radius: 7px;
    }

    .events--winner-block>div:nth-child(2)>img {
        width: 30px;
        height: 30px;

    }

    .events--winner-block>div {
        gap: 10px;
    }

    .events--winner-block>div:nth-child(1)>p {
        font-size: 20px;
        display: none;
    }

    .events--winner-block>div:nth-child(2)>div {
        height: 28px;
        padding: 10px;
        gap: 10px;
    }

    .events--winner-block>div:nth-child(2)>div>span {
        font-size: 10px;
    }

    .events--region {
        gap: 15px;
        padding: 15px;
        padding-bottom: calc(15px + 15px + 45px);
        margin-bottom: -25px;
        background: url(/public/img/events--region-bg-mobile.webp);
        background-size: 100% 100%;
    }

    .events--region.qualifying~a.button {
        margin-top: 45px;
    }

    .events--region.qualifying~.events--info.active {
        margin-bottom: -25px;
    }

    .events--region>div:nth-child(1) {
        grid-template-columns: 30px calc(100% - 10px - 30px);
        column-gap: 10px;
    }

    .events--region.no-img>div:nth-child(1) {
        grid-template-columns: 100%;
    }

    .events--region>div:nth-child(1)>img {
        width: 30px;
        height: 30px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(1)>span:nth-child(1) {
        font-size: 10px;
        max-width: calc(100% - 50px);
    }

    .events--region>div:nth-child(1)>div>p:nth-child(1)>span:nth-child(2) {
        font-size: 10px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(2)>span:nth-child(1) {
        font-size: 10px;
    }

    .events--region>div:nth-child(1)>div>p:nth-child(2)>span:last-child {
        font-size: 10px;
    }

    .events--region>div:nth-child(2) {
        flex-direction: column;
        align-items: start;
        gap: 15px;
    }

    .events--region>div:nth-child(2)>div {
        gap: 10px;
    }

    .events--region>div:nth-child(2)>div>p {
        height: 30px;
        font-size: 10px;
        padding: 10px 10px;
    }

    .events--region>a.button {
        right: 15px;
        bottom: 15px;
    }

    .events--region>a.button>*:nth-child(1) {
        display: none;
    }

    .events--region>a.button>*:nth-child(2) {
        display: block;
    }

    .events--info {
        background: url(/public/img/events--info-bg-mobile-t.webp), url(/public/img/events--info-bg-mobile.webp), url(/public/img/events--info-bg-mobile-b.webp);
        background-size: 100% 59px, 100% calc(100% - 59px - 19px), 100% 19px;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 59px center, bottom center;

        padding: 16px;
        margin-bottom: -401px;
    }

    .events--info.active {
        margin-bottom: 10px;
    }

    .events--info>h2 {
        margin-bottom: 10px;
    }

    .events--info>div p {
        min-height: 64px;
        padding: 13px 13px;
        gap: 10px;
    }

    .events--info>div p>span {
        font-size: 12px;
        white-space: normal;
        line-height: 1em;
    }

    .events--info>div {
        gap: 10px;
    }

    .events--info>div>div {
        row-gap: 10px;
        grid-template-columns: 1fr;
    }

    .events--results {
        background-size: 100% 100%;
        padding: 15px;
        max-height: 557px;
    }

    .events--results {

        background: url(/public/img/events--results-bg-mobile-t.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.462745) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 49px, 100% calc(100% - 49px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .events--results>h2 {
        margin-bottom: 17px;
    }

    .events--results>.events--results-list--header>div,
    .events--results>.events--results-list>div {
        grid-template-columns: 40px calc(100% - 160px - 25px) 40px 40px 40px;
        column-gap: 5px;
        padding-right: 15px;
    }

    .events--results.empty>.events--results-list--header>div {
        grid-template-columns: 40px 40px 1fr 40px 40px;
    }

    /* @supports not (scrollbar-gutter: stable) {
        .events--results > .events--results-list--header > div{
            padding-right: 25px;
        }
    } */
    /* .events--results > .events--result--nuff-container{
        padding-right: 15px;
        scrollbar-gutter: stable;
        overflow: auto;
    } */

    /* .events--results > .events--results-list--header > div > div,
    .events--results > .events--results-list > div > div{
        order:2;
    }
    .events--results > .events--results-list--header > div > div:nth-child(1),
    .events--results > .events--results-list > div > div:nth-child(3),
    .events--results > .events--results-list--header > div > div:nth-child(3),
    .events--results > .events--results-list > div > div:nth-child(3){
        order:0;
    }
    .events--results > .events--results-list--header > div > div:nth-child(2),
    .events--results > .events--results-list > div > div:nth-child(2){
        order:1;
    } */
    .events--results>.events--results-list--header>div>div:nth-child(2),
    .events--results>.events--results-list>div>div:nth-child(2) {
        display: none;
    }

    .events--results>.events--results-list--header>div>div:nth-child(4),
    .events--results>.events--results-list>div>div:nth-child(4) {
        display: none;
    }

    .events--results>.events--results-list--header>div>div:nth-child(6),
    .events--results>.events--results-list>div>div:nth-child(6) {
        display: none;
    }

    .events--results>.events--results-list--header>div>div,
    .events--results>.events--results-list>div>div {
        height: 40px;
    }

    .events--results>.events--results-list--header>div>div {
        padding: 0px;
        font-size: 15px;
    }

    .events--results>.events--results-list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 10px;
    }

    .events--results>.events--results-list--header>div>div:nth-child(2)>img {
        width: 22px;
    }

    .events--results>.events--results-list--header>div>div>*:nth-child(2) {
        display: block;
    }

    .events--results>.events--results-list--header>div>div:nth-child(1)>*:nth-child(1),
    .events--results>.events--results-list--header>div>div:nth-child(6)>*:nth-child(1),
    .events--results>.events--results-list--header>div>div:nth-child(7)>*:nth-child(1) {
        display: none;
    }

    .events--results>.events--results-list>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .events--results>.events--results-list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .events--results>.events--results-list {
        max-height: 445px;
    }

    .events--competition-list {
        background: url(/public/img/events--competition-bg-mobile.png), linear-gradient(180deg, rgba(33, 201, 198, 0.445) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 47px, 100% calc(100% - 47px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
        padding: 15px;
    }

    .events--competition-list>h2 {
        margin-bottom: 15px;
        width: 50%;
    }

    .events--competition-list .competition-list {
        padding-right: 15px;
    }

    .events--results.no-scroll>.events--results-list--header>div,
    .events--results.no-scroll>.events--results-list {
        overflow: hidden !important;
        scrollbar-gutter: unset;
    }

    .events--results.no-scroll>.events--results-list--header>div,
    .events--results.no-scroll>.events--results-list>div {
        padding-right: 0px;
    }

    .events--competition-list>.competition-list.no-scroll {
        overflow: hidden !important;
        padding-right: 0px;
        scrollbar-gutter: unset;
    }
}


.stage--events-list>.events--winner-block {
    margin-bottom: 0px;
}

.stage--events-list>div.final>div:nth-child(1)>div:nth-child(2) {
    justify-content: space-between;
}

.stage--events-list .stage-final--slider-v2,
.stage--events-list .stage-final--slider-v2>div:nth-child(2) {
    margin-top: 0px !important;
}

@media screen and (max-width: calc(410px)) {
    .events--region>div:nth-child(2)>div>p {
        font-size: 8px;
    }
}



.popup--event-application {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 850px;
    max-width: calc(100% - 40px);

    height: fit-content;
    max-height: min(calc(100% - 40px), 702px);


    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    background: black linear-gradient(180deg, rgba(34, 201, 198, 0.2) 0%, rgba(34, 201, 198, 0) 250%);


    padding: var(--default-padding);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 20px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 1);
}

#event-application--tabs>div:not(.active) {
    display: none;
}

.popup--event-application>h2 {
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.05em;
    text-transform: none;
    font-family: "Pragmatica";
}

.popup--event-application .tabs-control {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.popup--event-application>a.button {
    margin-left: auto;
}

.popup--event-application .event-application--list {
    border-radius: var(--border-radius);
    padding: var(--default-padding);
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 139.58%);

}

.event-application--list .event-application--items {
    box-sizing: border-box;
    overflow: auto;
    max-height: 315px;
    scrollbar-gutter: stable;
}

.event-application--list .event-application--header,
.event-application--list .event-application--items>div {
    display: grid;
    grid-template-columns: 55px 331px 334px;
    padding-right: 15px;
    column-gap: 5px;
    box-sizing: border-box;
}

.event-application--list .event-application--header {
    overflow: hidden;
    scrollbar-gutter: stable;
    margin-bottom: 5px;
}

.event-application--list .event-application--items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.event-application--list .event-application--header>div,
.event-application--list .event-application--items>div>div {
    height: 55px;
}

.event-application--list .event-application--header>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: "Pragmatica Extended";
    font-style: italic;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 900;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.event-application--list .event-application--header>div>img {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.event-application--list .event-application--items>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    box-sizing: border-box;
    padding: 0px 20px;
    border-radius: var(--border-radius);
    font-size: 20px;
    font-weight: 500;
    gap: 0.5em;
}

.event-application--list .event-application--items>div.myself>div {
    background: #22C9C633;
}

.event-application--list .event-application--items>div>div:nth-child(1) {
    padding: 0px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    transition: all 0.15s ease-in-out;
}

.event-application--list .event-application--items>div>div:nth-child(1):hover {
    border-color: white;
}

.event-application--list .event-application--items>div>div img,
.event-application--list .event-application--items>div>div>a {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius);
}

.event-application--list .event-application--items>div>div:nth-child(2)>*:nth-child(1) {
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.event-application--list .event-application--items>div>div:nth-child(2)>*:nth-child(2) {
    white-space: nowrap;
    display: block;
    text-transform: uppercase;
    color: #ffffff89;
}

.event-application--list .event-application--items>div>div:nth-child(3)>*:nth-child(1) {
    font-family: "icomoon";
    color: var(--role-color);
}

.event-application--list .event-application--items>div>div:nth-child(3)>*:nth-child(2) {
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .popup--event-application {
        width: 582px;
        max-height: min(calc(100% - 40px), 453px);
        gap: 16px;
    }

    .popup--event-application .tabs-control {
        gap: 10px;
    }

    .popup--event-application>h2 {
        font-style: normal;
    }

    .event-application--list .event-application--header,
    .event-application--list .event-application--items>div {
        grid-template-columns: 33px 309px 140px;
    }

    .event-application--list .event-application--header>div,
    .event-application--list .event-application--items>div>div {
        height: 33px;
    }

    .event-application--list .event-application--header>div>img {
        padding: 5px;
    }

    .event-application--list .event-application--items>div>div {
        font-size: 10px;
    }

    .event-application--list .event-application--items {
        max-height: 182px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup--event-application {
        width: 336px;
        max-height: calc(100% - 40px);
        gap: 16px;
    }

    .event-application--list .event-application--header,
    .event-application--list .event-application--items>div {
        grid-template-columns: 30px calc(100% - 30px - 94px - 10px) 94px;
        padding-right: 5px;
    }

    .event-application--list .event-application--items>div>div:nth-child(2)>*:nth-child(2),
    .event-application--list .event-application--items>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .event-application--list .event-application--items>div>div:nth-child(3) {
        justify-content: center;
        font-size: 15px;
    }

    .event-application--list .event-application--header>div {
        font-size: 10px;
    }

    .event-application--list .event-application--header>div,
    .event-application--list .event-application--items>div>div {
        height: 30px;
    }

    .event-application--list .event-application--items {
        max-height: 251px;
    }

    .event-application--list .event-application--items>div>div {
        padding: 0px 10px;
    }
}




.popup--event-protocol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 850px;
    max-width: calc(100% - 40px);

    height: fit-content;
    max-height: min(calc(100% - 40px), 627px);


    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    background: black linear-gradient(180deg, rgba(34, 201, 198, 0.2) 0%, rgba(34, 201, 198, 0) 250%);


    padding: var(--default-padding);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 20px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 1);
}

#event-protocol--tabs>div:not(.active) {
    display: none;
}

.popup--event-protocol>h2 {
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.05em;
    text-transform: none;
    font-family: "Pragmatica";
}

.popup--event-protocol .tabs-control {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.popup--event-protocol>a.button {
    margin-left: auto;
}

.popup--event-protocol .event-protocol--list {
    border-radius: var(--border-radius);
    padding: var(--default-padding);
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 139.58%);

}

.event-protocol--list .event-protocol--items {
    box-sizing: border-box;
    overflow: auto;
    max-height: 315px;
    scrollbar-gutter: stable;
}

.event-protocol--list .event-protocol--header,
.event-protocol--list .event-protocol--items>div {
    display: grid;
    grid-template-columns: 115px 55px 331px 213px;
    padding-right: 15px;
    column-gap: 5px;
    box-sizing: border-box;
}

.event-protocol--list--n2 .event-protocol--header,
.event-protocol--list--n2 .event-protocol--items>div {
    grid-template-columns: 111px 55px 347px 90px 97px;
}

.event-protocol--list .event-protocol--header {
    overflow: hidden;
    scrollbar-gutter: stable;
    margin-bottom: 5px;
}

.event-protocol--list .event-protocol--items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.event-protocol--list .event-protocol--header>div,
.event-protocol--list .event-protocol--items>div>div {
    height: 55px;
}

.event-protocol--list .event-protocol--header>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: "Pragmatica Extended";
    font-style: italic;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 900;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.event-protocol--list .event-protocol--header>div>img {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.event-protocol--list .event-protocol--items>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    box-sizing: border-box;
    padding: 0px 20px;
    border-radius: var(--border-radius);
    font-size: 20px;
    font-weight: 500;
    gap: 0.5em;
}

.event-protocol--list .event-protocol--items>div>div:nth-child(1),
.event-protocol--list .event-protocol--items>div>div:nth-child(4),
.event-protocol--list .event-protocol--items>div>div:nth-child(5) {
    justify-content: center;
    padding: 0px;
}

.event-protocol--list .event-protocol--items>div.myself>div {
    background: #22C9C633;
}

.event-protocol--list .event-protocol--items>div>div:nth-child(2) {
    padding: 0px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.event-protocol--list .event-protocol--items>div.gold>div:nth-child(2) {
    border-color: #F5E741;
}

.event-protocol--list .event-protocol--items>div.silver>div:nth-child(2) {
    border-color: #D3D3D3;
}

.event-protocol--list .event-protocol--items>div.bronze>div:nth-child(2) {
    border-color: #FFA800;
}

.event-protocol--list .event-protocol--items>div>div:nth-child(2)>a>img,
.event-protocol--list .event-protocol--items>div>div:nth-child(2)>a {
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius);
}

.event-protocol--list .event-protocol--items>div>div:nth-child(2)>a>img {
    display: block;
    object-fit: cover;
}

.event-protocol--list .event-protocol--items>div>div:nth-child(2):hover {
    border-color: white;
}

.event-protocol--list .event-protocol--items>div>div:nth-child(3)>*:nth-child(1) {
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.event-protocol--list .event-protocol--items>div>div:nth-child(3)>*:nth-child(2) {
    white-space: nowrap;
    display: block;
    text-transform: uppercase;
    color: #ffffff89;
}

.event-protocol--list .event-protocol--header>div>*:nth-child(2) {
    display: none;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .event-protocol--list .event-protocol--header>div {
        font-size: 10px;
    }

    .popup--event-protocol {
        width: 582px;
        max-height: min(calc(100% - 40px), 453px);
        gap: 16px;
    }

    .popup--event-protocol .tabs-control {
        gap: 10px;
    }

    .popup--event-protocol>h2 {
        font-style: normal;
    }

    .event-protocol--list .event-protocol--header,
    .event-protocol--list .event-protocol--items>div {
        grid-template-columns: 33px 33px 337px 74px;
    }

    .event-protocol--list--n2 .event-protocol--header>div {
        font-size: 10px;
    }

    .event-protocol--list--n2 .event-protocol--header,
    .event-protocol--list--n2 .event-protocol--items>div {
        grid-template-columns: 65px 33px 250px 68px 56px;
    }

    .event-protocol--list .event-protocol--header>div,
    .event-protocol--list .event-protocol--items>div>div {
        height: 33px;
    }

    .event-protocol--list .event-protocol--header>div>img {
        padding: 5px;
    }

    .event-protocol--list .event-protocol--items>div>div {
        font-size: 10px;
    }

    .event-protocol--list .event-protocol--items {
        max-height: 185px;
    }

    .event-protocol--list .event-protocol--items>div>div {
        padding: 10px;
    }

    .event-protocol--list .event-protocol--header>div:nth-child(1)>*:nth-child(1) {
        display: none;
    }

    .event-protocol--list .event-protocol--header>div>*:nth-child(2) {
        display: block;
    }

    .event-protocol--list .event-protocol--header>div:nth-child(4)>*:nth-child(2),
    .event-protocol--list .event-protocol--header>div:nth-child(5)>*:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup--event-protocol {
        width: 336px;
        max-height: calc(100% - 40px);
        gap: 16px;
    }

    .event-protocol--list .event-protocol--header,
    .event-protocol--list .event-protocol--items>div {
        grid-template-columns: 30px 30px calc(100% - 30px - 30px - 59px - 15px) 59px;
        padding-right: 5px;
    }

    .event-protocol--list--n2 .event-protocol--header,
    .event-protocol--list--n2 .event-protocol--items>div {
        grid-template-columns: 30px 30px calc(100% - 30px - 30px - 34px - 15px - 34px - 15px) 34px 34px;
    }

    .event-protocol--list .event-protocol--items>div>div:nth-child(2)>*:nth-child(2),
    .event-protocol--list .event-protocol--items>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .event-protocol--list .event-protocol--header>div:nth-child(4)>*:nth-child(2),
    .event-protocol--list .event-protocol--header>div:nth-child(5)>*:nth-child(2) {
        display: block;
    }

    .event-protocol--list .event-protocol--header>div:nth-child(4)>*:nth-child(1),
    .event-protocol--list .event-protocol--header>div:nth-child(5)>*:nth-child(1) {
        display: none;
    }

    .event-protocol--list .event-protocol--header>div {
        font-size: 10px;
    }

    .event-protocol--list .event-protocol--header>div,
    .event-protocol--list .event-protocol--items>div>div {
        height: 30px;
    }

    .event-protocol--list .event-protocol--items {
        max-height: 251px;
    }

    .event-protocol--list .event-protocol--items>div>div {
        padding: 0px 10px;
    }
}


.stage--events,
.stage--competitions {
    margin-bottom: calc(50px + 50px + 55px);
}

.stage--events-list~a.button,
.stage--competition-list~a.button {
    position: absolute;
    margin: 0px;
    left: 50%;
    top: calc(100% + 20px + 50px);
    transform: translateX(-50%);
}

.stage--events>#list,
.stage--competitions #list {
    position: relative;
}

@media screen and (max-width: calc(1312px + 2em)) {

    .stage--events,
    .stage--competitions {
        margin-bottom: calc(20px + 20px + 35px);
    }

    .stage--events-list~a.button,
    .stage--competition-list~a.button {
        position: absolute;
        margin: 0px;
        left: 50%;
        top: calc(100% + 16px + 20px);
        transform: translateX(-50%);
    }

    .stage--events>#list,
    .stage--competitions #list {
        position: relative;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .stage--events {
        margin-bottom: calc(15px + 15px + 45px);
    }

    .stage--events,
    .stage--competitions {
        margin-bottom: calc(20px + 20px + 45px);
    }

    .stage--events-list~a.button,
    .stage--competition-list~a.button {
        position: absolute;
        margin: 0px;
        left: 50%;
        top: calc(100% + 15px + 20px);
        transform: translateX(-50%);
    }

    .stage--events>#list,
    .stage--competitions #list {
        position: relative;
    }

    .stage--events-list .lk-page--region>*,
    .stage--events-list .lk-page--tags>* {
        height: 30px;
    }
}

.datepicker {
    position: fixed;

    top: 50%;
    left: 50%;

    width: 315px;
    max-width: 100%;
    height: auto;

    z-index: 999;
    padding: calc(var(--default-padding));

    box-sizing: border-box;
    border-radius: var(--border-radius);


    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 201, 198, 0.32);
    box-shadow: 0px 0px 32px 0px rgba(34, 201, 198, 1);
}

.datepicker.no-parent {
    transform: translate(-50%, -50%);
}

.datepicker.always-active {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.datepicker>* {
    z-index: 10;
    position: relative;
}

.datepicker::before {
    content: "";
    border-radius: var(--border-radius);
    padding: calc(var(--default-padding) - var(--border-width));
    border: var(--border-width) solid var(--color-blue);

    background: #072524;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.datepicker:not(.active):not(.always-active) {
    display: none;
}

.datepicker .background {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    transform: translate(-50%, -50%);
    background: #00000089;

}

.datepicker>.month-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.datepicker>.month-container>span {
    font-size: 15px;
    color: var(--color-blue);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.datepicker>.month-container>img {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.datepicker>.month-container>img:hover {
    filter: brightness(10);
}

.datepicker>.month-container>img:last-child {
    transform: rotate(180deg);
}

.datepicker>div:nth-child(2),
.datepicker>div:nth-child(3) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 5px;
    column-gap: 5px;
}

.datepicker>div:nth-child(2) {
    margin-bottom: 5px;
}

.datepicker>div:nth-child(2)>div,
.datepicker>div:nth-child(3)>div {
    /* width: 35px; */
    height: 35px;
    border-radius: var(--border-radius);
    transition: all 0.15s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0px;
}

.datepicker>div:nth-child(2)>div {
    color: #ffffff89;
}

.datepicker>div:nth-child(3)>div {
    color: white;
    cursor: pointer;
}

.datepicker>div:nth-child(3)>div.prev {
    color: #ffffff89;
}

.datepicker>div:nth-child(3)>div:hover {
    background: #22C9C633;
}

.datepicker>div:nth-child(3)>div.active {
    background: var(--color-blue);
}

@media screen and (max-width: calc(720px + 2em)) {
    .datepicker:not(.always-active) {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    .datepicker:not(.always-active) .background {
        display: block;
    }
}


/* .events--results > .events--results-list > div > div:nth-child(4) > *:nth-child(1){
    text-align: center;
}
.events--results > .events--results-list > div > div:nth-child(3){
    justify-content: center;
} */






.team-rating--header {
    background: url(/public/img/team_rating-bg-desctop.webp);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 185px;
    padding: var(--default-padding);
    box-sizing: border-box;
    margin-bottom: var(--default-padding);
}

.team-rating--header>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
}

.team-rating--header>div>a {
    border: none;
}

.team-rating--header>div>a.button.active {
    background: var(--color-blue);
}

.breadcrumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--default-padding);
}

.breadcrumbs>a:not(:last-child)::after {
    content: "/";
    margin-left: 10px;
    color: #ffffff66;
}

.breadcrumbs>a {
    color: white;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.breadcrumbs>a.active {
    color: white;
}

.breadcrumbs>a:hover {
    color: var(--color-blue);
}

.breadcrumbs>a.active~a:not(.active) {
    color: #ffffff66;
    cursor: not-allowed;
}

.team-rating--content>div:nth-child(2) {
    position: relative;
}

.team-rating--content {
    padding: var(--default-padding);
    border-radius: var(--border-radius);
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 105.6%);
    box-sizing: border-box;
    margin-bottom: calc(50px + 50px + 55px);
}

.team-rating--content>div:nth-child(2)>a.button {
    position: absolute;
    margin: 0px;
    left: 50%;
    top: calc(100% + 50px + 20px);
    /* bottom: -50px; */
    transform: translateX(-50%);
}

.team-rating--content>div:nth-child(2)>.team-rating--ratings+a.button {
    top: calc(100% + 50px);
}

@media screen and (max-width: calc(1312px + 2em)) {
    .team-rating--content {
        margin-bottom: calc(34px + 34px + 35px);
    }

    .team-rating--content>div:nth-child(2)>a.button {
        top: calc(100% + 34px + var(--default-padding));
    }

    .team-rating--content>div:nth-child(2)>.team-rating--ratings+a.button {
        top: calc(100% + 50px - 17px);
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .team-rating--content {
        margin-bottom: calc(30px + 30px + 45px);
    }

    .team-rating--content>div:nth-child(2)>a.button {
        top: calc(100% + 30px + var(--default-padding));
    }

    .team-rating--content>div:nth-child(2)>.team-rating--ratings+a.button {
        top: calc(100% + 50px - 22px);
    }
}

.team-rating--content.no-bg {
    background: none;
    padding: 0px;

}

.team-rating--content.no-bg>div:nth-child(1)>form {
    margin-bottom: 0px !important;
}

.team-rating--content.no-bg>div:nth-child(1) {
    padding: var(--default-padding);
    border-radius: var(--border-radius);
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 105.6%);
}

.team-rating--regions {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - (var(--default-padding) / 2)));
    row-gap: var(--default-padding);
    column-gap: var(--default-padding);
}

.team-rating--content.trg {
    margin-bottom: var(--default-padding);
}

.team-rating--regions>a {
    height: 95px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
    padding: 0px calc(var(--default-padding) - var(--border-width));
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    width: 100%;
    background: #22C9C633;
}

.team-rating--regions>a:hover {
    border-color: white;
}

.team-rating--regions>a>img {
    height: 55px;
    width: 55px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    border-radius: var(--border-radius);
}

.team-rating--regions>a>span {
    font-size: 25px;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    line-height: 1em;
    letter-spacing: 0px;
    font-style: italic;
    color: white;
    text-transform: uppercase;
    max-width: calc(100% - 20px - 55px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: unset;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.team-rating--municipality {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

.team-rating--municipality>a {
    min-height: 95px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
    padding: 10px calc(var(--default-padding) - var(--border-width));
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    width: 100%;
    background: #22C9C633;
}

.team-rating--municipality>a:hover {
    border-color: white;
}

.team-rating--municipality>a>img {
    height: 55px;
    width: 55px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    border-radius: var(--border-radius);
}

.team-rating--municipality>a>span {
    font-weight: 500;
    font-size: 25px;
    line-height: 1em;
    letter-spacing: 0px;
    color: white;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .team-rating--header {
        background: url(/public/img/team_rating-bg-tablet.webp);
        background-size: 100% 100%;
        min-height: 120px;
    }

    .team-rating--header>div {
        gap: 8px;
    }

    .team-rating--header>div>a {
        font-size: 12px;
        height: 32px;
    }

    .breadcrumbs>a {
        font-size: 15px;
    }

    .breadcrumbs>a:not(:last-child)::after {
        margin-left: 8px;
    }

    .breadcrumbs {
        gap: 8px;
    }

    .team-rating--content>div>form:nth-child(2) {
        margin-bottom: var(--default-padding);
    }

    .team-rating--regions>a {
        height: 60px;
        gap: 16px;
    }

    .team-rating--regions>a>img {
        height: 30px;
        width: 30px;
    }

    .team-rating--regions>a>span {
        max-width: calc(100% - 16px - 30px);
        font-size: 14px;
    }

    .team-rating--municipality>a {
        min-height: 60px;
    }

    .team-rating--municipality>a>img {
        height: 30px;
        width: 30px;
    }

    .team-rating--municipality>a>span {
        font-size: 15px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .team-rating--header {
        background: url(/public/img/team_rating-bg-mobile.webp);
        background-size: 100% 100%;
        min-height: 102px;
    }

    .team-rating--header>div {
        gap: 10px;
        width: 100%;
        overflow: auto;
        scrollbar-width: thin;
    }

    .team-rating--header>div>a {
        font-size: 15px;
        height: 35px;
    }

    .breadcrumbs>a {
        font-size: 10px;
    }

    .breadcrumbs>a:not(:last-child)::after {
        margin-left: 5px;
    }

    .breadcrumbs {
        gap: 5px;
        margin-bottom: 10px;
    }

    .team-rating--content>div>form:nth-child(2) {
        margin-bottom: 10px;
    }

    .team-rating--regions {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .team-rating--regions>a {
        height: 60px;
        gap: 16px;
    }

    .team-rating--regions>a>img {
        height: 30px;
        width: 30px;
    }

    .team-rating--regions>a>span {
        max-width: calc(100% - 16px - 30px);
        font-size: 10px;
        white-space: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .team-rating--municipality {
        gap: 10px;
    }

    .team-rating--municipality>a {
        min-height: 60px;
    }

    .team-rating--municipality>a>img {
        height: 30px;
        width: 30px;
    }

    .team-rating--municipality>a>span {
        font-size: 10px;
    }
}



.team-rating--table>.team-rating--table--header>div,
.team-rating--table>.team-rating--table--list>div {
    display: grid;
    grid-template-columns: 111px 55px 1fr 55px 220px 220px 211px;
    column-gap: 10px;
    padding-right: 0px;
}

.team-rating--table>.team-rating--table--header>div>div>*:nth-child(2) {
    display: none;
}

.team-rating--table>.team-rating--table--header {
    margin-bottom: 10px;
}

.team-rating--table>.team-rating--table--header>div>div,
.team-rating--table>.team-rating--table--list>div>div {
    height: 55px;
    box-sizing: border-box;
    padding: 0px 25px;
    border-radius: var(--border-radius);
    gap: 10px;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(3) {
    padding: 0px 15px;
}

.team-rating--table>.team-rating--table--header>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2em;
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-style: italic;
}

.team-rating--table>.team-rating--table--header>div>div:nth-child(2),
.team-rating--table>.team-rating--table--header>div>div:nth-child(4) {
    padding: 0px;
}

.team-rating--table>.team-rating--table--list>div>div {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(7) {
    padding: 0px;
    justify-content: center;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(3)>*:nth-child(1) {
    display: block;
    max-width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(3)>*:nth-child(2) {
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff89;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(1),
.team-rating--table>.team-rating--table--list>div>div:nth-child(5),
.team-rating--table>.team-rating--table--list>div>div:nth-child(6) {
    justify-content: center;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(4),
.team-rating--table>.team-rating--table--list>div>div:nth-child(6) {
    overflow: unset;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(4)>*:nth-child(1),
.team-rating--table>.team-rating--table--list>div>div:nth-child(6)>*:nth-child(1) {
    width: 100%;
    display: block;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(6)>*:nth-child(1) {
    text-align: center;
}

.team-rating--table>.team-rating--table--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(2),
.team-rating--table>.team-rating--table--list>div>div:nth-child(4) {
    padding: 0px;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(2) {
    background: none;
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.team-rating--table>.team-rating--table--list>div.gold>div:nth-child(2) {
    border-color: #F5E741;
}

.team-rating--table>.team-rating--table--list>div.silver>div:nth-child(2) {
    border-color: #D3D3D3;
}

.team-rating--table>.team-rating--table--list>div.bronze>div:nth-child(2) {
    border-color: #FFA800;
}

.team-rating--table>.team-rating--table--list>div.myteam>div {
    background: #22c9c633
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(2)>a,
.team-rating--table>.team-rating--table--list>div>div:nth-child(4)>a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(2)>a>img,
.team-rating--table>.team-rating--table--list>div>div:nth-child(4)>a>img {
    width: 100%;
    height: 100%;
    transition: all 0.15s ease-in-out;
}

.team-rating--table>.team-rating--table--header>div>div:nth-child(2)>img,
.team-rating--table>.team-rating--table--header>div>div:nth-child(4)>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
}

.team-rating--table>.team-rating--table--header>div>div:nth-child(4)>img {
    padding: 0px;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5)>a {
    background: #00000083;
    cursor: pointer;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5)>a>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    transition: all 0.15s ease-in-out;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5):hover>a>img {
    filter: brightness(10);
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5):hover {
    border-color: white;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5):active {
    border-color: var(--color-blue);
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5):active>a {
    background: var(--gradient-blue);
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5):active>a>img {
    filter: brightness(10);
}


.team-rating--table>.team-rating--table--list>div>div:nth-child(5).missing-application>a {
    background: rgba(255, 255, 255, 0.19);
    cursor: not-allowed;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5).missing-application>a>img {
    filter: brightness(10);
    opacity: 0.5;
}

.team-rating--table>.team-rating--table--list>div>div:nth-child(5).missing-application {
    border-color: rgba(255, 255, 255, 0.5);
}

/* missing-application */

.team-rating--table>.team-rating--table--list>div>div:nth-child(2):hover {
    border-color: white;
}

.team-rating--table.empty>.team-rating--table--header>div {
    overflow: hidden !important;
    scrollbar-gutter: unset;
    padding-right: 0px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .team-rating--table>.team-rating--table--list>div>div:nth-child(3)>*:nth-child(2) {
        width: 50px;
    }

    .team-rating--table>.team-rating--table--list>div>div:nth-child(3) {
        padding: 0px 10px;
    }

    .team-rating--table>.team-rating--table--header>div,
    .team-rating--table>.team-rating--table--list>div {
        grid-template-columns: 33px 33px 1fr 33px 130px 130px 130px;
        column-gap: 5px;
    }

    .team-rating--table>.team-rating--table--header>div>div,
    .team-rating--table>.team-rating--table--list>div>div {
        height: 33px;
        gap: 5px;
    }

    .team-rating--table>.team-rating--table--header>div>div {
        padding: 0px;
        font-size: 10px;
    }

    .team-rating--table>.team-rating--table--list>div>div {
        font-size: 10px;
        padding: 0px 10px;
    }

    .team-rating--table>.team-rating--table--list>div>div:last-child {
        padding: 0px;
        justify-content: center;
    }

    .team-rating--table>.team-rating--table--header>div>div:nth-child(2)>img {
        padding: 5px;
    }

    /* .team-rating--table > .team-rating--table--header > div > div > *:nth-child(2){
        display: block;
    }
    .team-rating--table > .team-rating--table--header > div > div:nth-child(1) > *:nth-child(1),
    .team-rating--table > .team-rating--table--header > div > div:nth-child(6) > *:nth-child(1),
    .team-rating--table > .team-rating--table--header > div > div:nth-child(7) > *:nth-child(1){
        display: none;
    } */
    .team-rating--table>.team-rating--table--header>div>div:nth-child(1)>*:nth-child(1) {
        display: none;
    }

    .team-rating--table>.team-rating--table--header>div>div:nth-child(1)>*:nth-child(2) {
        display: block;
    }

    .team-rating--table>.team-rating--table--list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .team-rating--table>.team-rating--table--list>div>div:nth-child(5)>a>img,
    .team-rating--table>.team-rating--table--header>div>div:nth-child(5)>img {
        padding: 5px;
    }

    .team-rating--table>.team-rating--table--header {
        margin-bottom: 5px;
    }

    .team-rating--table>.team-rating--table--list {
        gap: 5px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .team-rating--table>.team-rating--table--list>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .team-rating--table>.team-rating--table--header>div,
    .team-rating--table>.team-rating--table--list>div {
        grid-template-columns: 30px 30px 1fr 30px 109px;
        column-gap: 5px;
        padding-right: 15px;
    }

    .team-rating--table>.team-rating--table--header>div>div:nth-child(5),
    .team-rating--table>.team-rating--table--list>div>div:nth-child(5) {
        display: none;
    }

    .team-rating--table>.team-rating--table--header>div>div:nth-child(6),
    .team-rating--table>.team-rating--table--list>div>div:nth-child(6) {
        display: none;
    }

    .team-rating--table>.team-rating--table--header>div>div:nth-child(2)>img {
        padding: 3px;
    }

    .team-rating--table>.team-rating--table--header>div>div,
    .team-rating--table>.team-rating--table--list>div>div {
        height: 30px;
    }

    .team-rating--table>.team-rating--table--header>div>div {
        padding: 0px;
        font-size: 10px;
    }

    .team-rating--table>.team-rating--table--list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 10px;
    }

    .team-rating--table>.team-rating--table--header>div>div:nth-child(2)>img {
        width: 22px;
    }

    .team-rating--table>.team-rating--table--list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .team-rating--table>.team-rating--table--header>div,
    .team-rating--table>.team-rating--table--list {
        overflow: hidden !important;
        scrollbar-gutter: unset;
    }

    .team-rating--table>.team-rating--table--header>div,
    .team-rating--table>.team-rating--table--list>div {
        padding-right: 0px;
    }
}






.troops-rating--table>.troops-rating--table--header>div,
.troops-rating--table>.troops-rating--table--list>div {
    display: grid;
    grid-template-columns: 111px 55px 1fr 55px 98px 98px 98px 98px 98px 131px;
    column-gap: 10px;
}

.troops-rating--table>.troops-rating--table--header>div>div>*:nth-child(2) {
    display: none;
}

.troops-rating--table>.troops-rating--table--header {
    margin-bottom: 10px;
}

.troops-rating--table>.troops-rating--table--header>div>div,
.troops-rating--table>.troops-rating--table--list>div>div {
    height: 55px;
    box-sizing: border-box;
    padding: 0px 25px;
    border-radius: var(--border-radius);
    gap: 10px;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(3) {
    padding: 0px 15px;
}

.troops-rating--table>.troops-rating--table--header>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2em;
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-style: italic;
}

.troops-rating--table>.troops-rating--table--header>div>div:nth-child(2),
.troops-rating--table>.troops-rating--table--header>div>div:nth-child(4) {
    padding: 0px;
}

.troops-rating--table>.troops-rating--table--list>div>div {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(6),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(7),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(8),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(9),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(10) {
    padding: 0px;
    justify-content: center;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5) {
    color: #63FF85;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(6) {
    color: #F5E741;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(7) {
    color: #2D77CF;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(8) {
    color: #FF6B6B;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(3)>*:nth-child(1) {
    display: block;
    max-width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(3)>*:nth-child(2) {
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff89;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(1),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(6) {
    justify-content: center;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(4),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(6) {
    overflow: unset;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(4)>*:nth-child(1),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(6)>*:nth-child(1) {
    width: 100%;
    display: block;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(6)>*:nth-child(1) {
    text-align: center;
}

.troops-rating--table>.troops-rating--table--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(2),
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(4) {
    padding: 0px;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(2) {
    background: none;
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.troops-rating--table>.troops-rating--table--list>div.gold>div:nth-child(2) {
    border-color: #F5E741;
}

.troops-rating--table>.troops-rating--table--list>div.silver>div:nth-child(2) {
    border-color: #D3D3D3;
}

.troops-rating--table>.troops-rating--table--list>div.bronze>div:nth-child(2) {
    border-color: #FFA800;
}

.troops-rating--table>.troops-rating--table--list>div.myself>div {
    background: #22c9c633
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(2)>a,
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(4)>a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(2)>a>img,
.troops-rating--table>.troops-rating--table--list>div>div:nth-child(4)>a>img {
    width: 100%;
    height: 100%;
    transition: all 0.15s ease-in-out;
}

.troops-rating--table>.troops-rating--table--header>div>div:nth-child(2)>img,
.troops-rating--table>.troops-rating--table--header>div>div:nth-child(4)>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
}

.troops-rating--table>.troops-rating--table--header>div>div:nth-child(4)>img {
    padding: 0px;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5)>a {
    background: #00000083;
    cursor: pointer;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5)>a>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    transition: all 0.15s ease-in-out;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5):hover>a>img {
    filter: brightness(10);
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5):hover {
    border-color: white;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5):active {
    border-color: var(--color-blue);
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5):active>a {
    background: var(--gradient-blue);
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5):active>a>img {
    filter: brightness(10);
}


.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5).missing-application>a {
    background: rgba(255, 255, 255, 0.19);
    cursor: not-allowed;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5).missing-application>a>img {
    filter: brightness(10);
    opacity: 0.5;
}

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(5).missing-application {
    border-color: rgba(255, 255, 255, 0.5);
}

/* missing-application */

.troops-rating--table>.troops-rating--table--list>div>div:nth-child(2):hover {
    border-color: white;
}

.troops-rating--table.empty>.troops-rating--table--header>div {
    overflow: hidden !important;
    scrollbar-gutter: unset;
    padding-right: 0px;
}

@media screen and (max-width: calc(1312px + 2em)) {

    .troops-rating--table>.troops-rating--table--header>div,
    .troops-rating--table>.troops-rating--table--list>div {
        grid-template-columns: 33px 33px 1fr 33px 68px 68px 68px 68px 68px 89px;
        column-gap: 5px;
    }

    .troops-rating--table>.troops-rating--table--header>div>div,
    .troops-rating--table>.troops-rating--table--list>div>div {
        height: 33px;
        gap: 5px;
    }

    .troops-rating--table>.troops-rating--table--header>div>div {
        padding: 0px;
        font-size: 10px;
    }

    .troops-rating--table>.troops-rating--table--list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 8px;
    }

    .troops-rating--table>.troops-rating--table--list>div>div:last-child {
        padding: 0px;
        justify-content: center;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(2)>img {
        padding: 5px;
    }

    /* .troops-rating--table > .troops-rating--table--header > div > div > *:nth-child(2){
        display: block;
    }
    .troops-rating--table > .troops-rating--table--header > div > div:nth-child(1) > *:nth-child(1),
    .troops-rating--table > .troops-rating--table--header > div > div:nth-child(6) > *:nth-child(1),
    .troops-rating--table > .troops-rating--table--header > div > div:nth-child(7) > *:nth-child(1){
        display: none;
    } */
    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(1)>*:nth-child(1) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(1)>*:nth-child(2) {
        display: block;
    }

    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(5)>a>img,
    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(5)>img {
        padding: 5px;
    }

    .troops-rating--table>.troops-rating--table--header {
        margin-bottom: 5px;
    }

    .troops-rating--table>.troops-rating--table--list {
        gap: 5px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .troops-rating--table>.troops-rating--table--header>div,
    .troops-rating--table>.troops-rating--table--list>div {
        grid-template-columns: 30px 30px 1fr 30px 109px;
        column-gap: 5px;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(5),
    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(5) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(6),
    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(6) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(7),
    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(7) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(8),
    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(8) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(9),
    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(9) {
        display: none;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(2)>img {
        padding: 3px;
    }

    .troops-rating--table>.troops-rating--table--header>div>div,
    .troops-rating--table>.troops-rating--table--list>div>div {
        height: 30px;
    }

    .troops-rating--table>.troops-rating--table--header>div>div {
        padding: 0px;
        font-size: 10px;
    }

    .troops-rating--table>.troops-rating--table--list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 10px;
    }

    .troops-rating--table>.troops-rating--table--header>div>div:nth-child(2)>img {
        width: 22px;
    }

    .troops-rating--table>.troops-rating--table--list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .troops-rating--table.no-scroll>.troops-rating--table--header>div,
    .troops-rating--table.no-scroll>.troops-rating--table--list {
        overflow: hidden !important;
        scrollbar-gutter: unset;
    }

    .troops-rating--table.no-scroll>.troops-rating--table--header>div,
    .troops-rating--table.no-scroll>.troops-rating--table--list>div {
        padding-right: 0px;
    }
}


.team-rating--ratings {
    display: grid;
    margin-top: var(--default-padding);
    grid-template-columns: repeat(2, calc(50% - (var(--default-padding) / 2)));
    column-gap: var(--default-padding);
    row-gap: var(--default-padding);
}

.team-rating--ratings>div {
    position: relative;
    display: flex;
    flex-direction: column;

    padding: var(--default-padding);
    height: 410px;

    background: url(/public/img/team_rating--ratings-bg-desctop.webp);
    background-size: 100% 100%;
    box-sizing: border-box;
}

.team-rating--ratings>div>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.team-rating--ratings>div>div:nth-child(1)>h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 23px;
    gap: var(--default-padding);
}

.team-rating--ratings>div>div:nth-child(1)>h2>span {
    font-family: "icomoon";
    text-transform: lowercase;
    color: var(--role-color);
    font-style: normal;
}

.team-rating--ratings>div>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-rating--ratings>div div.team-rating--ratings--header,
.team-rating--ratings>div div.team-rating--ratings--item {
    display: grid;
    grid-template-columns: 55px 55px 239px 55px 162px;
    column-gap: 10px;
}

.team-rating--ratings>div div.team-rating--ratings--item.locked {
    height: 55px;
    border-radius: var(--border-radius);
    background: url(/public/img/lock-blue.svg), var(--gradient-black-transparent);
    background-position: center;
    background-size: auto 50%, 100% 100%;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.team-rating--ratings>div div.team-rating--ratings--header>div>img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.team-rating--ratings>div div.team-rating--ratings--header>div:nth-child(2)>img {
    padding: 10px;
}

.team-rating--ratings>div div.team-rating--ratings--header>div,
.team-rating--ratings>div div.team-rating--ratings--item>div {
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 55px;
    box-sizing: border-box;
}

.team-rating--ratings>div div.team-rating--ratings--header {
    text-transform: uppercase;
    font-weight: 900;
    font-family: "Pragmatica Extended";
    font-size: 15px;
}

.team-rating--ratings>div div.team-rating--ratings--header>div {
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    font-style: italic;
    text-transform: uppercase;
}

.team-rating--ratings>div div.team-rating--ratings--item {
    font-size: 20px;
    font-weight: 500;
}

.team-rating--ratings>div div.team-rating--ratings--item>div {
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}

.team-rating--ratings>div div.team-rating--ratings--header>div>a:nth-child(2),
.team-rating--ratings>div div.team-rating--ratings--item>div>a:nth-child(2),
.team-rating--ratings>div div.team-rating--ratings--header>div>a:nth-child(4),
.team-rating--ratings>div div.team-rating--ratings--item>div>a:nth-child(4) {
    display: block;
    width: 100%;
    height: 100%;
}

.team-rating--ratings>div div.team-rating--ratings--header>div>a>img,
.team-rating--ratings>div div.team-rating--ratings--item>div>a>img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
}

.team-rating--ratings>div div.team-rating--ratings--item>div:nth-child(3) {
    justify-content: start;
    padding: 0px 25px;
}

.team-rating--ratings>div div.team-rating--ratings--item>div:nth-child(3)>* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
    max-width: 100%;
}

.team-rating--ratings>div>a {
    position: absolute;
    bottom: var(--default-padding);
    right: var(--default-padding);
}

.team-rating--ratings>div div.team-rating--ratings--item>div:nth-child(2) {
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.25s ease-in-out;
}

.team-rating--ratings>div div.team-rating--ratings--item>div:nth-child(2):hover {
    border-color: white !important;
}

.team-rating--ratings>div div.team-rating--ratings--item:nth-child(2)>div:nth-child(2) {
    border-color: #F5E741;
}

.team-rating--ratings>div div.team-rating--ratings--item:nth-child(3)>div:nth-child(2) {
    border-color: #D3D3D3;
}

.team-rating--ratings>div div.team-rating--ratings--item:nth-child(4)>div:nth-child(2) {
    border-color: #FFA800;
}

.team-rating--ratings>div div.team-rating--ratings--item.myself>div {
    background: #22c9c633
}

@media screen and (max-width: calc(1312px + 2em)) {
    .team-rating--ratings>div {
        height: 260px;
    }

    .team-rating--ratings>div>div:nth-child(1)>h2 {
        font-size: 12px;
        gap: 8px;
    }

    .team-rating--ratings>div>div:nth-child(1) {
        margin-bottom: 16px;
    }

    .team-rating--ratings>div>div:nth-child(2) {
        gap: 5px;
    }

    .team-rating--ratings>div div.team-rating--ratings--header>div,
    .team-rating--ratings>div div.team-rating--ratings--item>div,
    .team-rating--ratings>div div.team-rating--ratings--item.locked {
        height: 33px;
    }

    .team-rating--ratings>div div.team-rating--ratings--header,
    .team-rating--ratings>div div.team-rating--ratings--item {
        column-gap: 5px;
        grid-template-columns: 33px 33px 115px 33px 86px;
    }

    .team-rating--ratings>div div.team-rating--ratings--header {
        font-size: 10px;
    }

    .team-rating--ratings>div div.team-rating--ratings--item {
        font-size: 10px;
    }

    .team-rating--ratings>div div.team-rating--ratings--item>div:nth-child(3) {
        padding: 0px 10px;
    }

    .team-rating--ratings>div div.team-rating--ratings--header>div:nth-child(2)>img {
        padding: 5px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .team-rating--ratings {
        display: flex;
        flex-direction: column;
        gap: var(--default-padding);
    }

    .team-rating--ratings>div div.team-rating--ratings--item>div:nth-child(3) {
        overflow: hidden;
    }

    .team-rating--ratings>div {
        height: 255px;
    }

    .team-rating--ratings>div div.team-rating--ratings--header>div,
    .team-rating--ratings>div div.team-rating--ratings--item>div,
    .team-rating--ratings>div div.team-rating--ratings--item.locked {
        height: 30px;
    }

    .team-rating--ratings>div div.team-rating--ratings--header,
    .team-rating--ratings>div div.team-rating--ratings--item {
        column-gap: 5px;
        grid-template-columns: 30px 30px 1fr 30px 109px;
    }
}


.more-button-insideout {
    position: relative;
    margin-bottom: calc(50px + 50px + 55px);
}

.more-button-insideout>a.button {
    position: absolute;
    margin: 0px;
    left: 50%;
    top: calc(100% + 50px);
    /* bottom: -50px; */
    transform: translateX(-50%);
}

@media screen and (max-width: calc(1312px + 2em)) {
    .more-button-insideout {
        margin-bottom: calc(34px + 34px + 35px);
    }

    .more-button-insideout>a.button {
        top: calc(100% + 34px);
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .more-button-insideout {
        margin-bottom: calc(30px + 30px + 45px);
    }

    .more-button-insideout>a.button {
        top: calc(100% + 30px);
    }
}


.capabilities--searchbar {
    padding: var(--default-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    margin-bottom: var(--default-padding);

    background: url(/public/img/capabilities--searchbar-bg-descktop.webp);
    background-size: 100% 100%;
}

.capabilities--searchbar h1 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    line-height: 1em;
}

.capabilities--searchbar h1 .with-question-mark>img {
    height: 0.8em;
}

.capabilities--searchbar>form {
    margin: 0px;
}

.capabilities--searchbar>form>.competition--searchbar {
    margin: 0px;
}

.capabilities--list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--default-padding);
    column-gap: var(--default-padding);
}

.capabilities--list>div {
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding: var(--default-padding);
    border-radius: var(--border-radius);
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 170.84%);
}

.capabilities--list>div>div:nth-child(1) {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--default-padding);
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1) {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: var(--default-padding);
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1)>img {
    width: 84px;
    height: 84px;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1) p {
    margin: 0px;
    font-size: 20px;
    line-height: 1em;
    font-weight: 500;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1)>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 0px var(--default-padding);
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1)>div>p {
    color: #ffffff66;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1)>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1)>div>div>p {
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(1)>div>div>p>span {
    color: var(--role-color);
    font-family: "icomoon";
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(2)>p {
    display: block;
    width: auto;
    margin: 0px;
    font-size: 15px;
    line-height: 1em;
    font-weight: 500;
    margin-right: 10px;
    color: #ffffff66;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(2)>p>span {
    color: white;
}

.capabilities--list>div>div:nth-child(1)>div:nth-child(2)>p:nth-child(1) {
    width: 100%;
    color: white;
}

.capabilities--list>div>div:nth-child(2) {
    height: 223px;
    box-sizing: border-box;
    padding: var(--default-padding);
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}

.capabilities--list>div>div:nth-child(2)>div {
    height: 100%;
    overflow: auto;
    padding-right: 10px;
}

.capabilities--list>div>div:nth-child(2)>div>h2 {
    font-family: "Pragmatica Extended";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1em;
}

.capabilities--list>div>div:nth-child(2)>div>p {
    font-size: 20px;
    font-weight: 400;
    color: #ffffff80;
    margin-top: 0px;
    line-height: 1em;
}

.capabilities--list>div>div:nth-child(3) {
    display: flex;
    flex-direction: row;
    gap: var(--default-padding);
}

.capabilities--list>div>div:nth-child(3)>a {
    width: 100%;
}

.capabilities--list>div>div:nth-child(3)>a>span:nth-child(2) {
    display: none;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .capabilities--searchbar {
        background: url(/public/img/capabilities--searchbar-bg-tablet.webp);
        background-size: 100% 100%;
    }

    .capabilities--list>div>div:nth-child(1)>div:nth-child(1) {
        grid-template-columns: 48px 1fr;
        column-gap: 10px;
    }

    .capabilities--list>div>div:nth-child(1)>div:nth-child(1)>img {
        width: 48px;
        height: 48px;
    }

    .capabilities--list>div>div:not(:last-child) p,
    .capabilities--list>div>div:not(:last-child) h2,
    .capabilities--list>div>div:not(:last-child) span {
        font-size: 10px !important;
    }

    .capabilities--list>div>div:nth-child(2) {
        height: 160px;
    }

    .capabilities--list>div>div:nth-child(1) {
        row-gap: 10px;
    }

    .capabilities--list>div {
        gap: 10px;
    }

    .capabilities--list>div>div:nth-child(1)>div:nth-child(2) {
        gap: 5px;
    }

    .capabilities--list>div>div:nth-child(1)>div:nth-child(2)>p {
        margin: 0px;
        width: 100%;
    }

    .capabilities--list>div>div:nth-child(3) {
        gap: 10px;
    }

    .capabilities--list>div>div:nth-child(3)>a>span:nth-child(1) {
        display: none;
    }

    .capabilities--list>div>div:nth-child(3)>a>span:nth-child(2) {
        display: block;
    }

    .capabilities--list>div>div:nth-child(3)>a:nth-child(2) {
        width: auto;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .capabilities--list {
        grid-template-columns: 1fr;
    }

    .capabilities--list>div>div:nth-child(1) {
        grid-template-columns: calc(48px + 10px + 134px) 1fr;
        column-gap: 10px;
    }

    .capabilities--list>div>div:nth-child(1)>div:nth-child(2)>p {
        line-height: 1em;
        height: 1em;
    }

    .capabilities--list>div>div:nth-child(1)>div:nth-child(2) {
        justify-content: center;
        flex-direction: column;
    }

    .capabilities--list>div>div:nth-child(2) {
        height: 100px;
    }

    .capabilities--list>div>div:nth-child(3)>a>span:nth-child(1) {
        display: block;
    }

    .capabilities--list>div>div:nth-child(3)>a>span:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: calc(375px)) {
    .capabilities--list>div>div:nth-child(1)>div:nth-child(1)>div {
        padding: 0px 5px;
    }

    .capabilities--list>div>div:nth-child(1) {
        grid-template-columns: calc(48px + 10px + 114px) 1fr;
    }
}

.obrabotka p,
.obrabotka ul {
    font-size: 25px;
    margin: 0px;
}

.obrabotka>div {
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 99.99%);
    border-radius: var(--border-radius);
    padding: var(--default-padding);
    margin-bottom: var(--default-padding);
}

.obrabotka h1 {
    font-size: 40px;
    line-height: 1em;
}

.obrabotka ul {
    list-style-type: decimal;
    list-style-position: inside;
}

.obrabotka ul {
    padding-left: 0px;
}

.obrabotka li>ul {
    /* margin-top: 1em;   */
}

.obrabotka p {
    margin-bottom: 1em;
}

.obrabotka>div>ul>li:not(:last-child) {
    margin-bottom: 1em;
}

.obrabotka li li::marker {
    content: "- ";
}

.obrabotka a {
    color: inherit;
    text-decoration: underline;
}

@media screen and (max-width: calc(1312px + 2em)) {

    .obrabotka p,
    .obrabotka li {
        font-size: 12px;
    }

    .obrabotka h1 {
        font-size: 20px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .obrabotka p,
    .obrabotka li {
        font-size: 15px;
    }

    .obrabotka h1 {
        font-size: 20px;
    }
}





.characters--roles-2 {
    flex-basis: 212%;
    background: url(/public/img/characters--roles-2-bg-desctop.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 448px;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 30px;
}

.role-info-2 {
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 100%);
    border-radius: var(--border-radius);
}

.role-info-2>div:first-child>div>.text-scroll {
    height: 358px;
}

.characters--roles-2>div {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
}

.characters--roles-2>div:nth-child(1) {
    position: relative;
    /* z-index: 100; */
}

@media screen and (max-width:720px) {
    .characters--roles-2>div:nth-child(1) {
        position: relative;
        z-index: 0;
    }
}

.characters--roles-2>div>h1 {
    line-height: 0.75em;
}

.characters--roles-2>div:first-child>div {
    display: flex;
    flex-direction: row;
    gap: 20px;
    z-index: 9;
}

.characters--roles-2--tabs>div {
    width: 100%;
    margin-bottom: -100px;
}

.characters--roles-2--tabs>div>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    gap: 25px;
    margin-top: 17px;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    padding-top: 100px;
    padding-bottom: 20px;
    transform: translateY(-100px);
    scroll-snap-type: x mandatory;
}

@media screen and (min-width:720px) {
    .characters--roles-2--tabs>div>.slider-controls {
        display: none;
    }
}

.characters--roles-2--tabs>div {
    display: none;
}

.characters--roles-2--tabs>div.active {
    display: block;
}

.characters--roles-2--tabs>div>div>div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    /* border: var(--border-width)  solid var(--color-blue); */
    background: var(--radial-gradient-blue-black);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;

    padding: 10px;

    height: 287px;
    box-sizing: border-box;

    scroll-snap-align: center;
    width: 187px;
    min-width: 187px;

    pointer-events: all;
}

.characters--roles-2--tabs>div>div.slide>div::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 0px;
    display: block;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
}

.characters--roles-2--tabs>div>div>div>span {
    font-size: 20px;
    line-height: 20px;
    font-weight: 900;
    z-index: 2;
    transition: all 0.15s ease-in-out;
    font-family: "icomoon";
    text-transform: lowercase;
}

.characters--roles-2--tabs>div>div>div>p {
    z-index: 99;
    padding: 5px;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1em;
}

.characters--roles-2--tabs>div>div>div>img {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: 105%;
    transition: all 0.15s ease-in-out;
    object-position: center top;
    object-fit: cover;
    border-radius: 10px;
}

.characters--roles-2--tabs>div>div.slide>div::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 30%;
    display: block;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff00 0%, var(--role-color) 100%);
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .characters--roles-2--tabs>div>div.slide>div::after {
        border-radius: 5px;
    }
}

.characters--roles-2--tabs>div>div>div:hover span,
.characters--roles-2--tabs>div>div>div.active span {
    color: var(--role-color);
}

.characters--roles-2--tabs>div>div>div:hover::after,
.characters--roles-2--tabs>div>div>div.active::after {
    opacity: 1;
}

.characters--roles-2--tabs>div>div>div:hover>img,
.characters--roles-2--tabs>div>div>div.active>img {
    height: 115%;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .characters--age {
        background: var(--gradient-blue-2);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .characters--age {
        min-height: 192px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 16px;
    }

    .characters--roles-2 {
        padding: 16px;

    }

    .characters--roles-2>div:first-child>div {
        gap: 10px;
    }

    .characters--roles-2 {
        min-height: 296px;
    }

    .characters--age>div {
        column-gap: 16px;
        row-gap: 16px;
    }

    .characters--roles-2--tabs>div>div:nth-child(1) {
        gap: 10px;
    }

    .characters--roles-2--tabs>div>div>div>span {
        font-size: 14px;
    }

    .characters--roles-2--tabs>div>div>div {
        height: 176px;
        border-radius: 5px;
        width: 101px;
        min-width: 101px;
    }

    .characters--roles-2--tabs>div>div>div>img {
        border-radius: 5px;
    }

    .characters {
        gap: 18px;
    }

    .characters--roles-2--tabs>div>div>div>p {
        font-size: 10px;

        padding: 0px;
    }

    .characters--roles-2--tabs>div>div.slide>div::before {
        border-radius: 5px;
    }

    .role-info-2>div:first-child>div>.text-scroll {
        height: 233px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .characters {
        flex-direction: column;
    }

    .characters--age {
        width: 100%;
        min-height: 138px;
        background: url(/public/img/index--green-bg-4--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        gap: 15px;


        background: var(--gradient-blue-2);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .characters--age h2 {
        margin-bottom: 15px;
    }

    .characters--age h2 br {
        display: none;
    }

    .characters--age>div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .characters--age>div>div {
        height: 42px;
        font-size: 15px;
        line-height: 15px;
    }

    .characters--roles-2 {
        padding: 50px 16px;
        padding-bottom: 55px;
        position: relative;
        width: 100%;
        min-height: unset;

        background: url(/public/img/index--green-bg-5--mobile.webp);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .characters--roles-2>div:first-child {
        position: absolute;
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: space-between;
    }

    .characters--roles-2>div:first-child h1 {
        width: 100%;
    }

    .characters--roles-2--tabs>div>div:nth-child(1) {
        margin: 0px;
    }

    .characters--roles-2--tabs>div>div>div {
        height: 168px;
        width: 105px;
        min-width: 105px;
    }

    .characters--roles-2--tabs>div>div.slider-controls {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    .characters--roles-2--tabs>div>div.slider-controls>div {
        flex-basis: 100%;
        height: 11px;
        border-radius: 10px;
        background: var(--color-black);
        opacity: 0.3;
        padding: 0px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .characters--roles-2--tabs>div>div.slider-controls>div.active {
        background: var(--color-blue);
        opacity: 1;
    }

    .characters--roles-2>div:first-child>div div {
        width: 45px;
    }
}




.roles-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

.roles-skills {
    margin-top: 20px;
    margin-bottom: 20px;
}

.roles-skills>div {
    background: url(/public/img/roles-skill-slider--green-bg-desctop.webp);
    background-size: 100% 100%;
    padding: var(--default-padding);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.roles-skills>div.gray {
    background: url(/public/img/roles-skill-slider--gray-bg-desctop.webp);
    background-size: 100% 100%;
}

.roles-skills>div>h3 {
    font-size: 20px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.roles-skills>div>h3>span {
    font-family: "icomoon";
    text-transform: lowercase;
    font-style: normal;
}

.roles-skills .roles-skill-slider>div:nth-child(1),
.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls {
    width: 100%;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: url(/public/img/skill-icon--bg.svg);
    background-size: 100% 100%;
    width: 0px;
    height: 0px;
    overflow: hidden;
    transform: translateX(0px);
    position: absolute;
    transition: all 0.25s ease-in-out;

    cursor: pointer;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.locked {
    cursor: not-allowed;
    background: url(/public/img/skill-icon--bg-white.svg);
    background-size: 100% 100%;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div>img {
    width: 60%;
    height: 60%;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.active {
    width: 84px;
    height: 84px;
    left: 50%;
    transform: translateX(-50%);
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev,
.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next {
    width: 70px;
    height: 70px;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev-2,
.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next-2 {
    width: 40px;
    height: 40px;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev {
    left: 25%;
    transform: translateX(-50%);
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next {
    left: 75%;
    transform: translateX(-50%);
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev-2 {
    left: 0px;
}

.roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next-2 {
    right: 0px;
}

.roles-skill-slider .slide>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.roles-skill-slider .slide>div>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #ffffff66;
    font-size: 20px;
}

.roles-skill-slider .slide>div>div:nth-child(1)>p>span {
    color: white;
}

.roles-skill-slider .slide>div .text-scroll {
    height: 200px;
    font-size: 20px;
}

.roles-skill-slider .slide>div .text-scroll>div h2 {
    margin-bottom: 10px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
}

.roles-skill-slider .slide>div .text-scroll>div p {
    font-size: 20px;
    color: #ffffff66;
}

.roles-skill-slider .slide>div>div:nth-child(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {

    .roles-skills .roles-skill-slider>div:nth-child(1),
    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls {
        gap: 14px;
    }

    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div>img {
        width: 60%;
        height: 60%;
    }

    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.active {
        width: 50px;
        height: 50px;
        left: 50%;
        transform: translateX(-50%);
    }

    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev,
    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next {
        width: 34px;
        height: 34px;
    }

    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev-2,
    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next-2 {
        width: 28px;
        height: 28px;
    }

    /* .roles-skills .roles-skill-slider > div:nth-child(1) > div.slider-controls > div.prev{
        right: calc(50% + 25px + 14px);
    }
    .roles-skills .roles-skill-slider > div:nth-child(1) > div.slider-controls > div.next{
        left: calc(50% + 25px + 14px);
    }
    .roles-skills .roles-skill-slider > div:nth-child(1) > div.slider-controls > div.prev-2{
        left: 0px;
    }
    .roles-skills .roles-skill-slider > div:nth-child(1) > div.slider-controls > div.next-2{
        right: 0px;
    } */
    .roles-skills>div>h3,
    .roles-skill-slider .slide>div>div:nth-child(1),
    .roles-skill-slider .slide>div .text-scroll>div h2,
    .roles-skill-slider .slide>div .text-scroll>div p {
        font-size: 10px;
    }

    .roles-skill-slider .slide>div .text-scroll>div h2 {
        line-height: 1em;
    }

    .roles-skill-slider .slide>div {
        gap: 16px;
    }

    .roles-skill-slider .slide>div .text-scroll {
        height: 160px;
    }

    .roles-skills>div {
        background: url(/public/img/roles-skill-slider--green-bg-tablet.webp);
        background-size: 100% 100%;
    }

    .roles-skills>div.gray {
        background: url(/public/img/roles-skill-slider--gray-bg-tablet.webp);
        background-size: 100% 100%;
    }

    .characters--roles-2 {
        background: url(/public/img/characters--roles-2-bg-tablet.webp);
        background-size: 100% 100%;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .characters--roles-2 {
        background: url(/public/img/characters--roles-2-bg-mobile.webp);
        background-size: 100% 100%;
    }

    .roles-skills {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    /* .characters--roles-2--tabs > div > div:nth-child(1){
        scrollbar-width: thin;
    } */

    .role-info-2 {
        background: url(/public/img/roles-description-bg-mobile.webp);
        background-size: 100% 100%;
    }


    .roles-skills>div>h3,
    .roles-skill-slider .slide>div .text-scroll>div h2 {
        font-size: 14px;
    }

    .roles-skill-slider .slide>div>div:nth-child(1),
    .roles-skill-slider .slide>div .text-scroll>div p {
        font-size: 10px;
    }

    .roles-skill-slider .slide>div>div:nth-child(1) {
        margin-top: 10px;
    }

    .stage-final--slider-v2 {
        flex-direction: column;
    }

    .stage-final--slider-v2 .stage-final--slider-arrow>img:nth-child(2) {
        display: block;
    }

    .stage-final--slider-v2 .stage-final--slider-arrow>img:nth-child(1) {
        display: none;
    }

    .stage-final--slider-v2 .stage-final--slider-arrow,
    .stage-final--slider-v2 .stage-final--slider-arrow img {
        width: 100%;
        height: auto;
    }

    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev,
    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next {
        width: 28px;
        height: 28px;
    }

    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.prev-2,
    .roles-skills .roles-skill-slider>div:nth-child(1)>div.slider-controls>div.next-2 {
        width: 20px;
        height: 20px;
    }

    .stage-final--slider-v2>div:nth-child(2)>* {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(1) {
        width: 50px;
        height: 50px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) {
        width: calc(100% - 60px);
        height: 50px;
    }

    #final-slider-tabs {
        flex-direction: column;
        gap: 15px;
        align-items: end;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(3) {
        width: 100%;
        font-size: 15px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2)>p {
        grid-template-columns: 1fr;
        row-gap: 5px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) span:nth-child(1) {
        font-size: 15px;
    }

    .stage-final--slider-v2>div:nth-child(2)>*>*:nth-child(2) span:nth-child(2) {
        font-size: 10px;
    }
}


.role-info .text-scroll>div>p {
    color: #ffffff66;
}




.season-events {
    background: url(/public/img/season-events--bg-desctop.webp);
    background-size: 100% 100%;
    max-height: 780px;
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;
    border-radius: var(--border-radius);

    background: url(/public/img/season-events--bg-desctop.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.39215) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 212px, 100% calc(100% - 212px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center;
    margin-bottom: var(--default-padding);
}

.lk--stage-block+.season-events {
    margin-top: var(--default-padding);
}

.lk--stage-block {
    margin-top: 20px;
    margin-bottom: 20px;
}

.season-events--header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--default-padding);
}

.season-events--header>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    height: 105px;
    justify-content: space-between;
}

.season-events--header>div:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
}

.season-events--header>div:nth-child(2)>div {
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.season-events--header>div:nth-child(2)>div>span:nth-child(1) {
    font-family: "Pragmatica Extended";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
}

.season-events--header>div:nth-child(2)>div>span:nth-child(2) {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff80;
}

.season-events--table,
.season-events--table--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.season-events--table--list {
    overflow: auto;
    scrollbar-gutter: stable;
    max-height: 550px;
}

.season-events--table--list>.news-nuffsaid {
    height: 170px;
    min-height: unset;
    width: calc(100% - 10px);
    margin: 0px;
}

.season-events--table--list.loading::after {
    width: calc(100% - 10px);
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: var(--border-radius);
}

.season-events--table--header,
.season-events--table--list--item {
    display: grid;
    grid-template-columns: 762px 342px 1fr;
    column-gap: 10px;
    padding-right: 10px;
}

.season-events--table--list--item {
    height: 176px;
}

.season-events--table--list--item>div {
    box-sizing: border-box;
    height: 100%;
}

.season-events--table--header {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.season-events--table--header>div {
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    background: #22C9C633;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 55px;
    font-family: "Pragmatica Extended";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

.season-events--table--list--item>div:nth-child(1) {
    position: relative;
    padding: calc(var(--default-padding) - var(--border-width));
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    background: #22C9C633;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(2) {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    padding: var(--default-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(1),
.season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(2) {
    width: 55px;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(2) {
    display: none;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    justify-content: space-between;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    display: grid;
    grid-template-columns: 55px calc(100% - 75px);
    column-gap: 20px;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a {
    width: 55px;
    height: 55px;
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) img {
    width: 40px;
    height: 40px;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p {
    margin: 0px;
    width: calc(100% - 55px - 20px);
    font-size: 20px;
    line-height: 1em;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(1)>span:nth-child(1) {
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    max-width: calc(100% - 150px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(1)>span:nth-child(2) {
    text-transform: uppercase;
    color: #ffffff80;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(2)>span:nth-child(1) {
    max-width: calc(100% - 250px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(2)>span:nth-child(2) {
    color: #ffffff80;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>p {
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    padding: 15px;
    height: 55px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 500;
    margin: 0px;
}

.season-events--table--list--item--place-stat>div:nth-child(2) {
    height: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.season-events--table--list--item--place-stat>div:nth-child(2)>span:nth-child(2) {
    display: none;
}

.season-events--table--list--item--place-stat>div:nth-child(2)>span:nth-child(1) {
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    font-size: 25px;
}

.season-events--table--list--item--skills>div:nth-child(2),
.season-events--table--list--item--place-stat>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: var(--default-padding);
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}

.season-events--table--list--item--skills>div:nth-child(1),
.season-events--table--list--item--place-stat>div:nth-child(1) {
    display: none;
}

.season-events--table--list--item--skills>div:nth-child(2)>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    width: 100%;
}

.season-events--table--list--item--skills>div:nth-child(2)>div>p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1em;
}

.season-events--table--list--item--skills>div:nth-child(2)>div>p>span:nth-child(2) {
    display: none;
}

.season-events--table--list--item--skills>div:nth-child(2)>div>div {
    border-radius: 5px;
    height: 5px;
    background: #ffffff33;
}

.season-events--table--list--item--skills>div:nth-child(2)>div>div::after {
    content: "";
    border-radius: 5px;
    display: block;
    background: #ffffff;
    height: 100%;
    width: var(--percentage);
}

.season-events--table--list--item--skills>div:nth-child(2)>div.motion>div {
    background-color: #63FF8533;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.motion>div::after {
    background-color: #63FF85;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.sensor>div {
    background-color: #F5E74133;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.sensor>div::after {
    background-color: #F5E741;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.mental>div {
    background-color: #2D77CF33;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.mental>div::after {
    background-color: #2D77CF;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.behavior>div {
    background-color: #FF6B6B33;
}

.season-events--table--list--item--skills>div:nth-child(2)>div.behavior>div::after {
    background-color: #FF6B6B;
}

.season-events--table--list--item>div:nth-child(3) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* padding: var(--default-padding); */
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}

.season-events--table--list--item>div:nth-child(3)>span {
    line-height: 1em;
}

.season-events--table--list--item>div:nth-child(3)>span:nth-child(1) {
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    font-size: 25px;
}

.season-events--table--list--item>div:nth-child(3)>span:nth-child(2) {
    font-weight: 500;
    font-size: 15px;
    color: #ffffff80;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .season-events--table--list--item {
        height: 111px;
    }

    .season-events--table--list>.news-nuffsaid {
        height: 111px;
    }

    .season-events--header>div:nth-child(1) {
        height: 70px;
    }

    .season-events--header>div:nth-child(2)>div>span:nth-child(1) {
        font-size: 10px;
    }

    .season-events--header>div:nth-child(2)>div>span:nth-child(2) {
        font-size: 8px;
    }

    .season-events--table--header,
    .season-events--table--list--item {
        grid-template-columns: 407px 152px 1fr;
        column-gap: 8px;
    }

    .season-events--table,
    .season-events--table--list {
        gap: 8px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
        grid-template-columns: 28px calc(100% - 28px - 16px);
        column-gap: 16px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a {
        width: 28px;
        height: 28px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a>img {
        width: 20px;
        height: 20px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p {
        font-size: 10px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p {
        width: calc(100% - 35px - 16px);
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(1)>span:nth-child(1) {
        max-width: calc(100% - 70px);
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(2)>span:nth-child(1) {
        max-width: calc(100% - 137px);
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(1),
    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(2) {
        width: 35px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>p {
        height: 35px;
        font-size: 10px;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>p>span:nth-child(1) {
        display: none;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>p>span:nth-child(2) {
        display: block;
    }

    .season-events--table--header>div {
        height: 35px;
        font-size: 10px;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div {
        gap: 2px;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>p {
        font-size: 8px;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>div {
        height: 3px;
    }

    .season-events--table--list--item--skills>div:nth-child(2) {
        gap: 3.5px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1) {
        gap: 16px;
    }

    .season-events--table--list--item>div:nth-child(3) {
        gap: 8px;
    }

    .season-events--table--list--item>div:nth-child(3)>span:nth-child(1) {
        font-size: 15px;
    }

    .season-events--table--list--item>div:nth-child(3)>span:nth-child(2) {
        font-size: 8px;
    }

    .season-events--table--list {
        max-height: 370px;
    }

    .season-events {
        max-height: 536px;
        background: url(/public/img/season-events--bg-tablet.webp);
        background-size: 100% 100%;


        background: url(/public/img/season-events--bg-tablet.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.39215) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 152px, 100% calc(100% - 152px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .season-events--table--list--item--place-stat>div:nth-child(2)>span:nth-child(1) {
        font-size: 15px;
    }

    .season-events--table--list--item--place-stat>div:nth-child(2) {
        padding-left: 0px;
        padding-right: 0px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div {
        gap: 8px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .season-events--table--list--item>div {
        height: unset;
    }

    .season-events--table--list>.news-nuffsaid {
        height: 111px;
        width: calc(100% + 10px);
    }

    .season-events--table--list--item>div:nth-child(3) {
        display: none;
    }

    .season-events--table--list--item>div:nth-child(2):not(.active) {
        display: none;
    }

    .season-events--table--header {
        display: none;
    }

    .season-events--table--list--item {
        height: unset;
    }

    .season-events--table--header,
    .season-events--table--list--item {
        grid-template-columns: 1fr;
        row-gap: 8px;

    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(1),
    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(2) {
        width: 45px;
        padding: 0px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a>img {
        height: 100%;
        width: 70%;
        object-fit: contain;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(2) {
        display: flex;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2)>a:nth-child(3) {
        margin-left: auto;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(2) {
        position: unset;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        height: fit-content;
        padding: 0px;
        margin-top: var(--default-padding);
        gap: 10px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1) {
        height: unset;
        justify-content: unset;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
        gap: 10px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
        grid-template-columns: 30px calc(100vw - 30px - 32px - 30px - 30px - 20px - 10px);
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a {
        width: 30px;
        height: 30px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a>img {
        width: 21px;
        height: 21px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>p {
        height: 30px;
        padding: 10px 10px;
        gap: 10px;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p {
        width: 100%;
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(1)>span:nth-child(1) {
        max-width: calc(100% - 60px);
    }

    .season-events--table--list--item>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div p:nth-child(2)>span:nth-child(1) {
        max-width: calc(100% - 130px);
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>p>span:nth-child(2) {
        display: none;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>p>span:nth-child(1) {
        display: block;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div>p {
        font-size: 10px;
    }

    .season-events--table--list--item--skills>div:nth-child(2)>div {
        gap: 5px;
    }

    .season-events--table--list--item--skills,
    .season-events--table--list--item--place-stat {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: var(--default-padding);
        border-radius: var(--border-radius);
        background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
        border: var(--border-width) solid var(--color-blue);
    }

    .season-events--table--list--item--skills>div:nth-child(1),
    .season-events--table--list--item--place-stat>div:nth-child(1) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .season-events--table--list--item--skills>div:nth-child(1)>span:nth-child(1),
    .season-events--table--list--item--place-stat>div:nth-child(1)>span:nth-child(1) {
        text-transform: uppercase;
        font-family: "Pragmatica Extended";
        font-weight: 900;
        font-style: italic;
        font-size: 15px;
    }

    .season-events--table--list--item--skills>div:nth-child(1)>span:nth-child(2),
    .season-events--table--list--item--place-stat>div:nth-child(1)>span:nth-child(2) {
        font-weight: 500;
        font-size: 15px;
        color: #ffffff80;
    }

    .season-events--table--list {
        max-height: 730px;
    }

    /* .season-events--table--list{
        scrollbar-gutter: unset;
        width: calc(100% + 10px);
    } */
    .season-events {
        max-height: 914px;
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 72.85%);
        border-radius: var(--border-radius);
    }

    .season-events--header {
        display: flex;
        flex-direction: column-reverse;
        gap: 15px;
        position: relative;
        padding-top: 35px;
    }

    .season-events--header>div:nth-child(2)>div {
        height: 45px;
    }

    .season-events--header>div:nth-child(1)>h2 {
        position: absolute;
        top: 0px;
    }

    .season-events--header>div:nth-child(1) {
        height: unset;
    }

    .season-events--table--list--item--place-stat>div:nth-child(2)>span:nth-child(2) {
        display: inline-block;
        font-size: 10px;
        font-weight: 500;
        color: #ffffff80
    }
}



.trooper--skill-n-rating {
    display: grid;
    grid-template-columns: 1fr 757px;
    column-gap: var(--default-padding);
}

.trooper--skill-n-rating>div {
    padding: var(--default-padding);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.trooper--skill-n-rating>div.trooper--skills {
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 72.85%);
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(1)>p {
    line-height: 1em;
    font-size: 20px;
    font-weight: 500;
    padding: 15px 25px;
    border-radius: var(--border-radius);
    margin: 0px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div>p {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 10px;
    line-height: 1em;
    font-weight: 500;
    margin: 0px;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div>div {
    border-radius: 5px;
    height: 5px;
    background: #ffffff33;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div>div::after {
    content: "";
    border-radius: 5px;
    display: block;
    background: #ffffff;
    height: 100%;
    width: var(--percentage);
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.motion>div {
    background: #63FF8533;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.motion>div::after {
    background: #63FF85;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.sensor>div {
    background: #F5E74133;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.sensor>div::after {
    background: #F5E741;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.mental>div {
    background: #2D77CF33;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.mental>div::after {
    background: #2D77CF;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.behavior>div {
    background: #FF6B6B33;
}

.trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div.behavior>div::after {
    background: #FF6B6B;
}

.trooper--skill-n-rating>div.trooper--role-rating {
    background: url(/public/img/trooper--role-rating--bg-desctop.webp);
    background-size: 100% 100%;
    gap: var(--default-padding);
}

.trooper--skill-n-rating>div.trooper--role-rating>h2>span {
    display: none;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 15px;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div {
    padding: calc(var(--default-padding) - var(--border-width));
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue);
    background: #22C9C633;
    display: flex;
    flex-direction: column;
    gap: 7.5px;
    height: 175px;
    box-sizing: border-box;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div.locked {
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 100%), url(/public/img/lock-blue.svg);

    background-repeat: no-repeat;
    background-size: 100% 100%, 50% 50%;
    background-position: center;
    border: none;
    padding: calc(var(--default-padding));
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p {
    margin: 0px;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(1) {
    font-size: 20px;
    font-weight: 500;
    padding: 15px;
    line-height: 1em;
    border-radius: var(--border-radius);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    text-align: center;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(2) {
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(3) {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff80;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1em;
}

.trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(3)>span:nth-child(1) {
    margin-right: 0.5em;
    font-family: "icomoon";
    text-transform: lowercase;
}

.trooper--role-rating--controls {
    display: none;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .trooper--skill-n-rating {
        grid-template-columns: 1fr 369px;
    }

    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(1)>p {
        font-size: 10px;
        padding: 10px;
    }

    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div>p {
        font-size: 8px;
    }

    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(2) {
        gap: 4px;
    }

    .trooper--skill-n-rating>div {
        gap: 9px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating {
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 72.85%);
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(1) {
        font-size: 10px;
        padding: 10px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(2) {
        font-size: 10px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div:nth-child(1)>p:nth-child(2)>br {
        display: none;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(3) {
        font-size: 8px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div {
        padding: calc(10px - var(--border-width));
        gap: 5px;
        height: 104px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2) {
        gap: 11px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(2)>div>p {
        font-size: 10px;
    }

    .trooper--skill-n-rating>div.trooper--skills {
        background: url(/public/img/trooper--skills--bg-mobile.webp);
        background-size: 100% 100%;
        gap: 7px;
    }

    .trooper--skill-n-rating {
        grid-template-columns: 1fr;
        row-gap: var(--default-padding);
    }

    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(1) {
        justify-content: start;
        gap: 15px;
    }

    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(1)>p>span {
        display: none;
    }

    .trooper--skill-n-rating>div.trooper--skills>div:nth-child(2) {
        gap: 5px;
    }

    .trooper--role-rating--controls {
        display: flex;
        gap: 10px;
    }

    .trooper--role-rating--controls>div {
        height: 10px;
        width: 100%;
        border-radius: 10px;
        background-color: #0000004d;
        transition: all 0.15s ease-in-out;
    }

    .trooper--role-rating--controls>div.active {
        background-color: var(--color-blue);
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2) {
        grid-template-columns: 1fr;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div:not(.active) {
        display: none;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(1) {
        font-size: 20px;
        padding: 15px 0px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(2) {
        font-size: 20px;
        text-align: center;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(2)>br {
        display: none;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div>p:nth-child(3) {
        display: none;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>div:nth-child(2)>div {
        padding: 12px;
        gap: 17px;
        height: 115px;
    }

    .trooper--skill-n-rating>div.trooper--role-rating>h2>span {
        display: inline-block;
        font-family: "icomoon";
        text-transform: lowercase;
        font-style: normal;
        font-size: 22px;
    }

    .trooper--role-rating>h2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 22px;
    }
}


.team--header {
    position: relative;
    display: grid;
    grid-template-columns: 204px 1054px;
    column-gap: var(--default-padding);
    padding: calc(var(--default-padding) - var(--border-width));
    padding-bottom: calc(var(--default-padding) - var(--border-width) + 55px);
    /* border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius); */

    background: url(/public/img/team-header--bg-desctop.webp);
    background-size: 100% 100%;

    margin-bottom: -35px;
}

.team--header>img {
    width: 204px;
    height: 204px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.team--header>div {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

.team--header>div>a.button {
    position: absolute;
    bottom: var(--default-padding);
    right: var(--default-padding);
}

.team--header>div>a.button>span:nth-child(2) {
    display: none;
}

.team--header>div>p {
    margin: 0px;
}

.team--header>div>p:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
}

.team--header>div>p:nth-child(1)>span:nth-child(1) {
    max-width: calc(100% - 120px);
    font-size: 50px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team--header>div>p:nth-child(1)>span:nth-child(2) {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff80;
}

.team--header>div>p:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
}

.team--header>div>p:nth-child(2)>img {
    height: 34px;
}

.team--header>div>p:nth-child(2)>span:nth-child(2) {
    font-size: 25px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
}

.team--rating {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: url(/public/img/team-rating--bg-desctop.webp);
    background-size: 100% 100%;
    height: 215px;
    margin-bottom: var(--default-padding);
}

.team--rating>div:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--default-padding);
}

.team--rating>div:nth-child(2)>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: calc(var(--default-padding) - var(--border-width));
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    background: #22C9C633;
    height: 125px;
    box-sizing: border-box;
}

.team--rating>div:nth-child(2)>div>span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
    text-align: center;
}

.team--rating>div:nth-child(2)>div>span:nth-child(1) {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.team--comp {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;
    gap: var(--default-padding);
    height: 870px;
    margin-bottom: var(--default-padding);

    background: url(/public/img/team-comp--bg-desctop.webp);
    background-size: 100% 100%;
}

.team--comp .block-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--default-padding) - 10px);
}

.team--comp .block-header div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.team--comp .block-header .with-question-mark>*+span {
    font-weight: 500;
    text-transform: none;
    line-height: 1em;
    font-size: 15px !important;
    font-family: "Pragmatica";
    font-style: normal;
}

.team--comp .block-header>div img {
    height: 28px;
}

.team--comp .block-header .with-question-mark>*+span {
    right: 0px;
    left: unset;
}

.team--comp--list,
.team--comp--table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team--comp--header>div:nth-child(1)>span:nth-child(2) {
    display: none;
}

.team--comp--header,
.team--comp--table>div {
    display: grid;
    grid-template-columns: 55px 55px 79px 379px 258px 210px 146px;
    column-gap: 10px;
    padding-right: 10px;
}

.team--comp--table>div.news-nuffsaid {
    display: flex !important;
    height: 100%;
}

.team--comp--table {
    overflow: auto;
    scrollbar-gutter: stable;
    height: 640px;
}

.team--comp--header {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.team--comp--header>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    background: #22C9C633;
    height: 55px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 900;
    font-family: "Pragmatica Extended";
    font-style: italic;
    box-sizing: border-box;
}

.team--comp--header>div>img {
    width: 30px;
    height: auto;
}

.team--comp--table>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    padding: 0px var(--default-padding);
    border-radius: var(--border-radius);
    font-size: 20px;
    line-height: 1em;
    font-weight: 500;
    box-sizing: border-box;
    height: 55px;
}

.team--comp--table>div>div:nth-child(1),
.team--comp--table>div>div:nth-child(2),
.team--comp--table>div>div:nth-child(3) {
    padding: 0px;
}

.team--comp--table>div>div:nth-child(2) {
    overflow: hidden;
    border: var(--border-width) solid var(--color-blue);
}

.team--comp--table>div>div:nth-child(2) img {
    width: 100%;
    height: 100%;
}

.team--comp--table>div>div:nth-child(3) img {
    height: 27px;
    width: auto;
    filter: brightness(10);
}

.team--comp--table a {
    color: inherit;
    text-decoration: none;
}

.team--comp--table>div>div:nth-child(4) {
    justify-content: start;
    gap: 0.5em;
}

.team--comp--table>div>div:nth-child(4)>*:nth-child(1) {
    max-width: calc(100% - 100px - 0.5em);
    max-width: calc(100% - 100px - 0.5em);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.team--comp--table>div>div:nth-child(4)>*:nth-child(2) {
    color: #ffffff80;
}

.team--comp--table>div>div:nth-child(5) {
    gap: 0.5em;
}

.team--comp--table>div>div:nth-child(5)>*:nth-child(1) {
    font-family: "icomoon";
    text-transform: lowercase;
    color: var(--color);
}

.team--comp--table>div.locked>div {
    display: none;
}

.team--comp--table>div.locked {
    min-height: 55px;
    width: calc(100% - 20px);
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    border-radius: var(--border-radius);
    position: relative;
    box-sizing: border-box;
}

.team--comp--table>div.locked::after {
    content: "";
    width: 34px;
    height: 27px;
    background: url(/public/img/lock-blue.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.team--comp>div:last-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.team--comp>div:last-child>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.team--comp>div:last-child>div:nth-child(1)>div:nth-child(1),
.team--comp>div:last-child>div:nth-child(1)>div:nth-child(3),
.team--comp>div:last-child>div:nth-child(1) img {
    height: 55px;
    width: 55px;
}

.team--comp>div:last-child>div:nth-child(1) .slider-controls>div {
    display: none;
}

.team--comp>div:last-child>div:nth-child(1) .slider-controls>div.active {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 55px;
    min-width: 180px;
    padding: 0px 10px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    border-radius: var(--border-radius);
    font-size: 20px;
    font-weight: 900;
    font-family: "Pragmatica Extended";
    font-style: italic;
    text-transform: uppercase;
}

.team--comp--list .empty {
    background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 100%);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 640px;
    color: var(--color-blue);
    font-size: 30px;
    font-weight: 500;
}

.team--trophy--age {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: url(/public/img/team-trophy--bg-desctop.webp);
    background-size: 100% 100%;
    margin-bottom: var(--default-padding);
    /* height: 243px; */
}

.team--trophy--age>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.team--trophy--age>div:nth-child(1)>div {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.team--trophy--age>div:nth-child(1)>div>div:nth-child(1),
.team--trophy--age>div:nth-child(1)>div>div:nth-child(3),
.team--trophy--age>div:nth-child(1) img {
    height: 55px;
    width: 55px;
}

.team--trophy--age>div:nth-child(1)>div .slider-controls>div {
    display: none;
}

.team--trophy--age>div:nth-child(1)>div .slider-controls>div.active {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 55px;
    min-width: 180px;
    padding: 0px 10px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    border-radius: var(--border-radius);
    font-size: 20px;
    font-weight: 900;
    font-family: "Pragmatica Extended";
    font-style: italic;
    text-transform: uppercase;
}


.team--trophy--age>div:nth-child(1)>div>div:nth-child(1),
.team--trophy--age>div:nth-child(1)>div>div:nth-child(3),
.team--trophy--age>div:nth-child(1) img {

    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.team--trophy--age>div:nth-child(1)>div>div:nth-child(1):focus,
.team--trophy--age>div:nth-child(1)>div>div:nth-child(3):focus,
.team--trophy--age>div:nth-child(1) img:focus {
    outline: none !important;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .team--comp .block-header>div img {
        height: 18px;
    }

    .team--comp .block-header div:nth-child(2) {
        gap: 5px;
    }

    .team--trophy--age>div:nth-child(1)>div>div:nth-child(1),
    .team--trophy--age>div:nth-child(1)>div>div:nth-child(3),
    .team--trophy--age>div:nth-child(1) img {
        height: 35px;
        width: 35px;
    }

    .team--trophy--age>div:nth-child(1)>div .slider-controls>div.active {
        height: 35px;
        min-width: 85px;
        font-size: 8px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .team--trophy--age>div:nth-child(1)>div>div:nth-child(1),
    .team--trophy--age>div:nth-child(1)>div>div:nth-child(3),
    .team--trophy--age>div:nth-child(1) img {
        height: 45px;
        width: 45px;
    }

    .team--trophy--age>div:nth-child(1)>div .slider-controls>div.active {
        height: 45px;
        min-width: 100px;
        font-size: 10px;
    }
}

.team--trophy--age>div:nth-child(2)>div {
    display: flex;
    flex-direction: row;
    gap: var(--default-padding);
    overflow-y: auto;
    overflow-x: scroll;
    padding-bottom: 15px;

    scrollbar-gutter: stable;
    /* scrollbar-width: thin; */
}

.team--trophy--age>div:nth-child(2)>div>div {
    height: 123px;
    width: 123px;
    min-height: 123px;
    min-width: 123px;
    box-sizing: border-box;
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: calc(var(--default-padding) - var(--border-width));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.team--trophy--age>div:nth-child(2)>div>div>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.team--trophy--age>div:nth-child(2)>div>div.locked::before {
    content: "";
    width: 64px;
    height: 49px;
    background: url(/public/img/lock-blue.svg);
    background-size: contain;
}

.team--rating--list--controls {
    display: none;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .team--comp .block-header {
        margin-bottom: calc(var(--default-padding) - 10px);
    }

    .team--header {
        grid-template-columns: 86px 586px;
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 49.87%);
        margin-bottom: var(--default-padding);
        padding-bottom: var(--default-padding);
        border-radius: var(--border-radius);
    }

    .team--header>img {
        width: 86px;
        height: 86px;
    }

    .team--header>div>p:nth-child(1)>span:nth-child(1) {
        font-size: 15px;
    }

    .team--header>div>p:nth-child(1)>span:nth-child(2) {
        font-size: 15px;
    }

    .team--header>div>p:nth-child(2)>span:nth-child(2) {
        font-size: 12px;
    }

    .team--header>div>p:nth-child(2)>img {
        height: 10px;
    }

    .team--header>div {
        gap: 8px;
    }

    .team--header .lk-page--region {
        margin-top: 2px;
    }

    .events--info.team--events--info {
        background: #00000033;
        border: var(--border-width) solid var(--color-blue);
        border-radius: var(--border-radius);
        padding: calc(var(--default-padding) - var(--border-width));
    }

    .team--rating {
        background: url(/public/img/team-rating--bg-tablet.webp);
        background-size: 100% 100%;
        height: 145px;
    }

    .team--rating>div:nth-child(2)>div {
        height: 77px;
        gap: 10px;
    }

    .team--rating>div:nth-child(2)>div>span {
        font-size: 10px;
    }

    .team--comp--table>div.locked {
        min-height: 33px;
    }

    .team--comp--table>div>div,
    .team--comp--header>div {
        height: 33px;
        font-size: 10px;
    }

    .team--comp--header,
    .team--comp--table>div {
        grid-template-columns: 33px 33px 48px 200px 140px 90px 88px;
        column-gap: 5px;
        row-gap: 5px;
    }

    .team--comp--list,
    .team--comp--table {
        gap: 5px;
    }

    .team--comp--header>div>img {
        width: 17px;
    }

    .team--comp--table>div>div:nth-child(3) img {
        height: 15px;
    }

    .team--comp--table>div>div:nth-child(4)>*:nth-child(1) {
        max-width: calc(100% - 50px - 0.5em);
    }

    .team--comp--table>div.locked {
        width: calc(100% - 26px);
    }

    .team--comp {
        height: 532px;
    }

    .team--comp--table,
    .team--comp--list .empty {
        height: 375px;
    }

    .team--comp>div:last-child>div:nth-child(1)>div:nth-child(1),
    .team--comp>div:last-child>div:nth-child(1)>div:nth-child(3),
    .team--comp>div:last-child>div:nth-child(1) img {
        height: 35px;
        width: 35px;
    }

    .team--comp>div:last-child>div:nth-child(1) .slider-controls>div.active {
        height: 35px;
        min-width: 85px;
        font-size: 8px;
    }

    .team--trophy--age {
        background: url(/public/img/team-trophy--bg-tablet.webp);
        background-size: 100% 100%;
    }

    .team--trophy--age>div:nth-child(2)>div>div {
        height: 57px;
        width: 61px;
        min-height: 57px;
        min-width: 61px;
    }

    .team--trophy--age>div:nth-child(2)>div>div.locked::before {
        width: 34px;
        height: 27px;
    }
}

.team--comp .button>span:nth-child(2) {
    display: none;
}

@media screen and (max-width: calc(720px + 2em)) {

    .team--comp--table,
    .team--comp--list .empty {
        height: 345px;
    }

    .team--comp .button>span:nth-child(1) {
        display: none;
    }

    .team--comp .button>span:nth-child(2) {
        display: block;
    }

    .team--comp>div:last-child>div:nth-child(1)>div:nth-child(1),
    .team--comp>div:last-child>div:nth-child(1)>div:nth-child(3),
    .team--comp>div:last-child>div:nth-child(1) img {
        height: 45px;
        width: 45px;
    }

    .team--comp>div:last-child>div:nth-child(1) .slider-controls>div.active {
        height: 45px;
        min-width: 100px;
        font-size: 10px;
    }

    .events--info.team--events--info {
        background: url(/public/img/events--info-bg-mobile-t.webp), url(/public/img/events--info-bg-mobile.webp), url(/public/img/events--info-bg-mobile-b.webp);
        background-size: 100% 59px, 100% calc(100% - 59px - 19px), 100% 19px;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top 59px center, bottom center;
        border: none;
        padding: var(--default-padding);
    }

    .team--header {
        background: url(/public/img/team-header--bg-mobile.webp);
        background-size: 100% 100%;
        padding-bottom: calc(45px + 15px + 15px);
        margin-bottom: -25px;
    }

    .team--header>div>a.button>span:nth-child(2) {
        display: block;
    }

    .team--header>div>a.button>span:nth-child(1) {
        display: none;
    }

    .team--header .lk-page--region {
        margin-top: 0px;
    }

    .team--header .lk-page--region>*:nth-child(2) {
        display: none;
    }

    .team--header {
        grid-template-columns: 75px calc(100% - 75px - 15px);
    }

    .team--header>div>p:nth-child(1)>span:nth-child(1) {
        font-size: 12px;
        max-width: calc(100% - 70px);
    }

    .team--header>div>p:nth-child(1)>span:nth-child(2) {
        font-size: 10px;
    }

    .team--header>div>p:nth-child(2)>span:nth-child(2) {
        font-size: 10px;
    }

    .team--header>img {
        height: 75px;
        width: 75px;
    }

    .team--rating {
        background: url(/public/img/team-rating--bg-mobile.webp);
        background-size: 100% 100%;
        height: 207px;
    }

    .team--rating>div:nth-child(2)>div {
        height: 115px;
    }

    .team--rating--list--controls {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: var(--default-padding);
    }

    .team--rating--list--controls>div {
        height: 10px;
        border-radius: 10px;
        background: #00000050;
    }

    .team--rating--list--controls>div.active {
        height: 10px;
        border-radius: 10px;
        background: #22C9C680;
    }

    .team--rating>div:nth-child(2) {
        grid-template-columns: 1fr;
    }

    .team--rating>div:nth-child(2)>div:not(.active) {
        display: none;
    }

    .team--rating>h2>span:nth-child(1) {
        display: none;
    }

    .team--rating>div:nth-child(2)>div>span {
        font-size: 20px;
    }

    .team--comp {
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 120.82%);
        border-radius: var(--border-radius);
        height: 505px;
    }

    .team--comp--header>div:nth-child(1)>span:nth-child(1) {
        display: none;
    }

    .team--comp--header>div:nth-child(1)>span:nth-child(2) {
        display: block;
    }

    .team--comp--table>div>div:nth-child(3),
    .team--comp--header>div:nth-child(3) {
        display: none;
    }

    .team--comp--table>div>div:nth-child(6),
    .team--comp--header>div:nth-child(6) {
        display: none;
    }

    .team--comp--header,
    .team--comp--table>div {
        grid-template-columns: 30px 30px 115px 60px 1fr;
    }

    .team--comp--table>div>div,
    .team--comp--header>div {
        height: 30px;
    }

    .team--comp--table>div.locked {
        min-height: 30px;
    }

    .team--comp--table>div>div:nth-child(4)>*:nth-child(2) {
        display: none;
    }

    .team--comp--table>div>div:nth-child(4)>*:nth-child(1) {
        max-width: 100%;
    }

    .team--comp--table>div>div:nth-child(5)>*:nth-child(2) {
        display: none;
    }

    .team--comp--table>div>div:nth-child(5)>*:nth-child(1) {
        font-size: 15px;
    }

    .team--comp--table>div.locked {
        width: calc(100% - 10px);
    }

    .team--comp--list .empty {
        font-size: 18px;
    }

    .team--trophy--age {
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        border-radius: var(--border-radius);
        padding-bottom: calc(var(--default-padding) + 15px + 45px);
        position: relative;
    }

    .team--trophy--age>div:nth-child(1)>div {
        position: absolute;
        bottom: var(--default-padding);
        left: var(--default-padding);
        width: calc(100% - var(--default-padding) - var(--default-padding));
        display: grid;
        grid-template-columns: 45px 1fr 45px;
        column-gap: 10px;
    }

    .team--trophy--age>div:nth-child(1)>div .slider-controls>div.active {
        width: 100%;
    }
}


.team--trophy--age {
    background: url(/public/img/trooper-trophy--bg-desctop.webp);
    background-size: 100% 100%;
    /* margin-bottom: 0px!important; */
}

@media screen and (max-width: calc(1312px + 2em)) {
    .team--trophy--age {
        background: url(/public/img/team-trophy--bg-tablet.webp);
        background-size: 100% 100%;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .team--trophy--age {
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        border-radius: var(--border-radius);
    }
}

@media screen and (max-width: calc(1312px + 2em)) {
    .index--season .index--season--stages {
        grid-auto-rows: unset !important;
    }

    .compact-stage-type-qualify {
        max-width: 1000px !important;
        width: 100% !important;
    }

    .compact-stage-type-municipal {
        max-width: 1000px !important;
        width: 100% !important;
    }

    .compact-stage-type-zonal {
        max-width: 1000px !important;
        width: 100% !important;
    }

    .compact-stage-type-zonal {
        max-width: 1000px !important;
        width: 100% !important;
    }

    .index--season .index--season--stages .compact-stage-card.compact-stage-type-region {
        max-width: 1000px !important;
        width: 100% !important;
    }

    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card {
        height: 100% !important;
        max-height: 160px !important;
    }

    .stage-title-row-container__base {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

.trooper--rotation {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: url(/public/img/trooper--rotation--bg-desctop.png), linear-gradient(180deg, rgba(33, 201, 198, 0.44) 0%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 41px, 100% calc(100% - 41px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center;
}

.trooper--rotation>div {
    display: grid;
    grid-template-rows: 20px;
    gap: var(--default-padding);
    max-height: 180px;
    overflow: auto;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .trooper--rotation>div {
        max-height: 120px;
        grid-template-rows: 11px;
    }
}

.trooper--rotation>div>div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding-right: var(--default-padding);
    align-items: start;

    font-weight: 500;
    font-size: 20px;
    line-height: 1em;
}

.trooper--rotation>div>div>span:nth-child(2) {
    display: block;
    width: 100%;
    height: 1em;
    background: url(/public/img/dotted-line.svg);
    background-size: auto var(--border-width);
    background-repeat: repeat-x;
    background-position: left bottom 5px;
}


.trooper--header {
    position: relative;
    display: grid;
    grid-template-columns: 204px 1054px;
    column-gap: var(--default-padding);
    padding: calc(var(--default-padding) - var(--border-width));
    padding-bottom: calc(var(--default-padding) - var(--border-width) + 55px);
    /* border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius); */

    background: url(/public/img/team-header--bg-desctop.webp);
    background-size: 100% 100%;

    margin-bottom: -35px;
}

.trooper--header>img {
    width: 204px;
    height: 204px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.trooper--header>div {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

.trooper--header>div>a.button {
    position: absolute;
    bottom: var(--default-padding);
    right: var(--default-padding);
}

.trooper--header>div>a.button>span:nth-child(2) {
    display: none;
}

.trooper--header>div>p {
    margin: 0px;
}

.trooper--header>div>p:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
}

.trooper--header>div>p:nth-child(1)>span:nth-child(1) {
    max-width: calc(100% - 120px);
    font-size: 50px;
    font-family: "Pragmatica Extended";
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trooper--header>div>p:nth-child(1)>span:nth-child(2) {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff80;
}

.trooper--header>div>p:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
}

.trooper--header>div>p:nth-child(2)>img {
    height: 34px;
}

.trooper--header>div>p:nth-child(2)>span:nth-child(2) {
    font-size: 30px;
    font-weight: 400;
    color: #ffffff80;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .trooper--rotation {
        background: url(/public/img/trooper--rotation--bg-tablet.png), linear-gradient(180deg, rgba(33, 201, 198, 0.445) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 38px, 100% calc(100% - 38px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .trooper--rotation>div>div {
        font-size: 10px;
    }

    .trooper--rotation>div>div>span:nth-child(2) {
        background-position: left bottom 2px;
    }

    .trooper--header {
        grid-template-columns: 86px 586px;
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.25) 49.87%);
        margin-bottom: var(--default-padding);
        padding-bottom: var(--default-padding);
        border-radius: var(--border-radius);
    }

    .trooper--header>img {
        width: 86px;
        height: 86px;
    }

    .trooper--header>div>p:nth-child(1)>span:nth-child(1) {
        font-size: 15px;
    }

    .trooper--header>div>p:nth-child(1)>span:nth-child(2) {
        font-size: 15px;
    }

    .trooper--header>div>p:nth-child(2)>span:nth-child(2) {
        font-size: 12px;
    }

    .trooper--header>div>p:nth-child(2)>img {
        height: 10px;
    }

    .trooper--header>div {
        gap: 8px;
    }

    .trooper--header .lk-page--region {
        margin-top: 2px;
    }

    .trooper--header .lk-page--region>*:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .trooper--rotation {
        background: url(/public/img/trooper--rotation--bg-mobile.png), linear-gradient(180deg, rgba(33, 201, 198, 0.445) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 40px, 100% calc(100% - 40px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .trooper--rotation>div>div {
        font-size: 10px;
    }

    .trooper--header {
        background: url(/public/img/team-header--bg-mobile.webp);
        background-size: 100% 100%;
        padding-bottom: calc(45px + 15px + 15px);
        margin-bottom: -25px;
    }

    .trooper--header>div>a.button>span:nth-child(2) {
        display: block;
    }

    .trooper--header>div>a.button>span:nth-child(1) {
        display: none;
    }

    .trooper--header .lk-page--region {
        margin-top: 0px;
    }

    .trooper--header {
        grid-template-columns: 75px calc(100% - 75px - 15px);
    }

    .trooper--header>div>p:nth-child(1)>span:nth-child(1) {
        font-size: 12px;
        max-width: calc(100% - 70px);
    }

    .trooper--header>div>p:nth-child(1)>span:nth-child(2) {
        font-size: 10px;
    }

    .trooper--header>div>p:nth-child(2)>span:nth-child(2) {
        font-size: 10px;
    }

    .trooper--header>img {
        height: 75px;
        width: 75px;
    }
}

.trooper--header--container>.events--info:not(.active) {
    margin-top: 40px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .trooper--header--container>.events--info:not(.active) {
        margin-top: -20px;
    }

    .trooper--header--container>.events--info.active {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .trooper--header--container>.events--info:not(.active) {
        margin-top: 25px;
    }
}

.role-icon-font {
    font-family: "icomoon";
    color: var(--color);
    margin-right: 0.5em;
}

.trooper--header .lk-page--region>* {
    font-size: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .trooper--header .lk-page--region>* {
        font-size: 10px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .trooper--header .lk-page--region>* {
        font-size: 10px;
    }
}


.role-font-icon {
    color: var(--role-color) !important;
    font-family: "icomoon";
}



.event--results {
    background: url(/public/img/events--results-bg-desctop.webp);
    background-size: 100% 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    max-height: 795px;
    border-radius: var(--border-radius);
}

/* .event--results > .events--result--nuff-container{
    padding-right: 20px;
    scrollbar-gutter: stable;
    overflow: auto;
} */
.event--results>.events--result--nuff-container>.news-nuffsaid {
    margin-bottom: 0px;
}

.event--results {

    background: url(/public/img/events--results-bg-desctop-t.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.39215) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
    background-size: 100% 65px, 100% calc(100% - 65px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center;
}

.event--results>h2 {
    margin-bottom: 20px;
}

.event--results>.event--results-list--header>div,
.event--results>.event--results-list>div {
    display: grid;
    grid-template-columns: 111px 55px 347px 419px 170px 90px;
    column-gap: 10px;
    padding-right: 20px;
}

.event--results>.event--results-list--header>div {
    scrollbar-gutter: stable;
    overflow: hidden;
}

.event--results>.event--results-list--header>div>div>*:nth-child(2) {
    display: none;
}

.event--results>.event--results-list {
    overflow-y: scroll;
    max-height: 640px;
}

.event--results>.event--results-list--header {
    margin-bottom: 10px;
}

.event--results>.event--results-list--header>div>div,
.event--results>.event--results-list>div>div {
    height: 55px;
    box-sizing: border-box;
    padding: 0px 25px;
    border-radius: var(--border-radius);
    gap: 20px;
}

.event--results>.event--results-list--header>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2em;
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    text-transform: uppercase;
    font-family: "Pragmatica Extended";
    font-style: italic;
}

.event--results>.event--results-list--header>div>div:nth-child(2),
.event--results>.event--results-list--header>div>div:nth-child(6) {
    padding: 0px;
}

.event--results>.event--results-list>div>div {
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
}

.event--results>.event--results-list>div>div:nth-child(3) {
    padding: 0px 10px;
}

.event--results>.event--results-list>div>div:nth-child(7) {
    padding: 0px;
    justify-content: center;
}

.event--results>.event--results-list>div>div:nth-child(4)>*:nth-child(1) {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;

}

.event--results>.event--results-list>div>div:nth-child(3)>*:nth-child(1) {
    display: block;
    max-width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.event--results>.event--results-list>div>div:nth-child(3)>*:nth-child(2) {
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff89;
}

.event--results>.event--results-list>div>div:nth-child(1),
.event--results>.event--results-list>div>div:nth-child(5),
.event--results>.event--results-list>div>div:nth-child(6) {
    justify-content: center;
}

.event--results>.event--results-list>div>div:nth-child(4),
.event--results>.event--results-list>div>div:nth-child(6) {
    overflow: unset;
}

.event--results>.event--results-list>div>div:nth-child(4)>*:nth-child(1),
.event--results>.event--results-list>div>div:nth-child(6)>*:nth-child(1) {
    width: 100%;
    display: block;
}

.event--results>.event--results-list>div>div:nth-child(6)>*:nth-child(1) {
    text-align: center;
}

.event--results>.event--results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event--results>.event--results-list>div>div:nth-child(2) {
    padding: 0px;
    background: none;
    border: var(--border-width) solid var(--color-blue);
    transition: all 0.15s ease-in-out;
}

.event--results>.event--results-list>div.gold>div:nth-child(2) {
    border-color: #F5E741;
}

.event--results>.event--results-list>div.silver>div:nth-child(2) {
    border-color: #D3D3D3;
}

.event--results>.event--results-list>div.bronze>div:nth-child(2) {
    border-color: #FFA800;
}

.event--results>.event--results-list>div.myteam>div {
    background: #22c9c633
}

.event--results>.event--results-list>div>div:nth-child(2)>a,
.event--results>.event--results-list>div>div:nth-child(5)>a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.event--results>.event--results-list>div>div:nth-child(2)>a>img {
    width: 100%;
    height: 100%;
    transition: all 0.15s ease-in-out;
}

.event--results>.event--results-list--header>div>div:nth-child(5)>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    filter: brightness(10);
}

.event--results>.event--results-list>div>div:nth-child(5)>a {
    background: #00000083;
    cursor: pointer;
}

.event--results>.event--results-list>div>div:nth-child(5)>a>img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    transition: all 0.15s ease-in-out;
}

.event--results>.event--results-list>div>div:nth-child(5):hover>a>img {
    filter: brightness(10);
}

.event--results>.event--results-list>div>div:nth-child(5):hover {
    border-color: white;
}

.event--results>.event--results-list>div>div:nth-child(5):active {
    border-color: var(--color-blue);
}

.event--results>.event--results-list>div>div:nth-child(5):active>a {
    background: var(--gradient-blue);
}

.event--results>.event--results-list>div>div:nth-child(5):active>a>img {
    filter: brightness(10);
}


.event--results>.event--results-list>div>div:nth-child(5).missing-application>a {
    background: rgba(255, 255, 255, 0.19);
    cursor: not-allowed;
}

.event--results>.event--results-list>div>div:nth-child(5).missing-application>a>img {
    filter: brightness(10);
    opacity: 0.5;
}

.event--results>.event--results-list>div>div:nth-child(5).missing-application {
    border-color: rgba(255, 255, 255, 0.5);
}

/* missing-application */

.event--results>.event--results-list>div>div:nth-child(2):hover {
    border-color: white;
}


.event--results.empty>.event--results-list--header>div {
    overflow: hidden !important;
    scrollbar-gutter: unset;
    padding-right: 0px;
    /* grid-template-columns: 111px 55px 1fr 358px 55px 182px 90px; */
}

@media screen and (max-width: calc(1312px + 2em)) {
    .event--results {
        background-size: 100% 100%;
        padding: 16px;
        max-height: 476px;
    }

    .event--results {

        background: url(/public/img/events--results-bg-tablet-t.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 44px, 100% calc(100% - 44px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .event--results>h2 {
        margin-bottom: 10px;
    }

    .event--results>.event--results-list--header>div,
    .event--results>.event--results-list>div {
        grid-template-columns: 33px 33px 168px 277px 81px 44px;
        column-gap: 5px;
        padding-right: 15px;
    }

    .event--results.empty>.event--results-list--header>div {
        grid-template-columns: 33px 33px 1fr 277px 81px 44px;
    }

    .event--results>.event--results-list--header>div>div,
    .event--results>.event--results-list>div>div {
        height: 33px;
    }

    .event--results>.event--results-list--header>div>div {
        padding: 0px;
        font-size: 10px;
    }

    .event--results>.event--results-list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 8px;
    }

    .event--results>.event--results-list>div>div:last-child {
        padding: 0px;
        justify-content: center;
    }

    .event--results>.event--results-list--header>div>div:nth-child(2)>img {
        width: 17px;
    }

    .event--results>.event--results-list--header>div>div>*:nth-child(2) {
        display: block;
    }

    .event--results>.event--results-list--header>div>div:nth-child(1)>*:nth-child(1),
    .event--results>.event--results-list--header>div>div:nth-child(5)>*:nth-child(1),
    .event--results>.event--results-list--header>div>div:nth-child(6)>*:nth-child(1) {
        display: none;
    }

    .event--results>.event--results-list>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .event--results>.event--results-list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .event--results>.event--results-list>div>div:nth-child(5)>a>img,
    .event--results>.event--results-list--header>div>div:nth-child(5)>img {
        padding: 5px;
    }

    .event--results>.event--results-list {
        max-height: 375px;
    }

    .event--results>.event--results-list--header {
        margin-bottom: 5px;
    }

    .event--results>.event--results-list {
        gap: 5px;
    }
}


@media screen and (max-width: calc(720px + 2em)) {
    .event--results {
        background-size: 100% 100%;
        padding: 15px;
        max-height: 557px;
    }

    .event--results {

        background: url(/public/img/events--results-bg-mobile-t.webp), linear-gradient(180deg, rgba(33, 201, 198, 0.462745) 0%, rgba(34, 201, 198, 0.5) 10%, rgba(34, 201, 198, 0.1) 139.58%);
        background-size: 100% 49px, 100% calc(100% - 49px);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, bottom center;
    }

    .event--results>h2 {
        margin-bottom: 17px;
    }

    .event--results>.event--results-list--header>div,
    .event--results>.event--results-list>div {
        grid-template-columns: 40px 40px calc(100% - 120px - 25px) 40px;
        column-gap: 5px;
        padding-right: 15px;
    }

    .event--results.empty>.event--results-list--header>div {
        grid-template-columns: 40px 40px 1fr 40px;
    }

    /* @supports not (scrollbar-gutter: stable) {
        .event--results > .event--results-list--header > div{
            padding-right: 25px;
        }
    } */
    /* .event--results > .events--result--nuff-container{
        padding-right: 15px;
        scrollbar-gutter: stable;
        overflow: auto;
    } */

    .event--results>.event--results-list--header>div>div:nth-child(4),
    .event--results>.event--results-list>div>div:nth-child(4) {
        display: none;
    }

    .event--results>.event--results-list--header>div>div:nth-child(5),
    .event--results>.event--results-list>div>div:nth-child(5) {
        display: none;
    }

    .event--results>.event--results-list--header>div>div,
    .event--results>.event--results-list>div>div {
        height: 40px;
    }

    .event--results>.event--results-list--header>div>div {
        padding: 0px;
        font-size: 15px;
    }

    .event--results>.event--results-list>div>div {
        font-size: 10px;
        padding: 0px 10px;
        gap: 10px;
    }

    .event--results>.event--results-list--header>div>div:nth-child(2)>img {
        width: 22px;
    }

    .event--results>.event--results-list--header>div>div>*:nth-child(2) {
        display: block;
    }

    .event--results>.event--results-list--header>div>div:nth-child(1)>*:nth-child(1),
    .event--results>.event--results-list--header>div>div:nth-child(6)>*:nth-child(1),
    .event--results>.event--results-list--header>div>div:nth-child(7)>*:nth-child(1) {
        display: none;
    }

    .event--results>.event--results-list>div>div:nth-child(3)>*:nth-child(2) {
        display: none;
    }

    .event--results>.event--results-list>div>div:nth-child(3)>*:nth-child(1) {
        max-width: 100%;
    }

    .event--results>.event--results-list {
        max-height: 445px;
    }

    .event--results.no-scroll>.event--results-list--header>div,
    .event--results.no-scroll>.event--results-list {
        overflow: hidden !important;
        scrollbar-gutter: unset;
    }

    .event--results.no-scroll>.event--results-list--header>div,
    .event--results.no-scroll>.event--results-list>div {
        padding-right: 0px;
    }
}



.stage-final--slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
}

.stage-final--slider-arrow:last-child {
    transform: rotate(180deg);
}

.stage-final--slider-arrow {
    width: 93px;
    height: 93px;
    cursor: pointer;
}

.stage-final--slider-arrow>img {
    width: 93px;
    height: 93px;
    transition: all 0.15s ease-in-out;
    opacity: 1;
}

.stage-final--slider-arrow:not(.disabled):hover>img {
    filter: brightness(10);
}

.stage-final--slider-arrow.disabled>img {
    opacity: 0.5;
}

.stage-final--slider>div:nth-child(2) {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    column-gap: 20px;
}

.stage-final--slider>div:nth-child(2)>* {
    border-radius: 10px;
    padding: 16px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    height: 93px;
    cursor: pointer;

    background: var(--gradient-black-transparent);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.stage-final--slider>div:nth-child(2)>*.locked {
    border: var(--border-width) solid var(--color-blue);
    background: url(/public/img/lock-blue.svg), var(--gradient-black-transparent);
    background-position: center;
    background-size: 73px 56px, 100% 100%;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.stage-final--slider>div:nth-child(2)>* p {
    margin: 0px;
    font-size: 20px;
    font-weight: 500;
}

.stage-final--slider>div:nth-child(2)>* p a {
    color: inherit;
    text-decoration: none;
}

.stage-final--slider>div:nth-child(2)>* img {
    height: 60px;
    width: 60px;
    object-fit: contain;
    object-position: center;
    transition: all 0.15s ease-in-out;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-blue)
}

.stage-final--slider>div:nth-child(2)>*>a {
    height: 60px;
    width: 60px;
}



.stage-final--slider>div:nth-child(2)>*:hover img {
    border-color: white;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .stage-final--slider>div:nth-child(2)>* img {
        height: 30px;
        width: 30px;
    }

    .stage-final--slider>div:nth-child(2)>*>a {
        height: 30px;
        width: 30px;
    }

    .stage-final--slider>div:nth-child(2)>* p {
        font-size: 10px;
        line-height: 10px;
    }

    .stage-final--slider>div:nth-child(2)>* {
        height: 50px;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 5px;
    }

    .stage-final--slider>div:nth-child(2)>*.locked {
        background-size: 34px 26px, 100% 100%;
    }

    .stage-final--slider-arrow,
    .stage-final--slider-arrow img {
        height: 50px;
        width: 50px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .stage-final--slider .stage-final--slider-arrow {
        display: none;
    }

    .stage-final--slider>div:nth-child(2) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 170px;
        overflow: auto;
        margin-top: 10px;
        padding-right: 10px;
    }

    .stage-final--slider>div:nth-child(2)>* {
        display: flex !important;
        height: 50px;
        flex-direction: row;
        align-items: center;
        justify-content: start;

    }

    .stage-final--slider>div:nth-child(2)>* p {
        font-size: 15px;
    }

    .stage-final--slider>div:nth-child(2)>*.locked {
        padding: 0px;
        padding-top: 50px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .mobile-none {
        display: none;
    }
}

@media screen and (min-width: calc(720px + 2em)) {
    .mobile-only {
        display: none;
    }
}



.popup-container .popup--avatar--wo-upload {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: calc(100% - 2em);
    max-width: calc(100% - 2em);
    width: 850px;
    height: fit-content;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    background: black var(--gradient-blue-2);
}

.popup-container .popup--avatar--wo-upload>form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0px;
}

.popup-container .popup--avatar--wo-upload>form>h2 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-style: normal;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(2) {
    display: grid;
    grid-template-columns: 168px 1fr;
    column-gap: 20px;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>img {
    width: 158px;
    height: 158px;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--gradient-blue-2);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    max-height: 365px;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div>div {
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    padding-right: 14px;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div>div img {
    width: 100%;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-blue);
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div>div img.active {
    border-color: white;
}

.popup-container .popup--avatar--wo-upload>form>div:nth-child(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 20px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .popup-container .popup--avatar--wo-upload {
        width: 582px;
        padding: 14px;
    }

    .popup-container .popup--avatar--wo-upload>form {
        gap: 15px;
    }

    .popup-container .popup--avatar--wo-upload>form>h2 {
        font-size: 20px;
        line-height: 24px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>img {
        width: 172px;
        height: 172px;
        border-radius: 5px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div {
        height: 175px;
        border-radius: 5px;
        padding: 14px;
        gap: 16px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div h2 {
        font-size: 15px;
        line-height: 15px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div>div {
        column-gap: 18px;
        row-gap: 18px;
        grid-template-columns: repeat(5, 1fr);
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2) {
        grid-template-columns: 172px 1fr;
        column-gap: 16px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(3) {
        gap: 10px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .popup-container .popup--avatar--wo-upload {
        height: fit-content;
        justify-content: center;
        align-items: center;
        border: none;
        display: flex;
        flex-direction: column;
    }

    .popup-container .popup--avatar--wo-upload>form {
        max-height: 100%;
        overflow: auto;
        width: 100%;
    }

    .popup-container .popup--avatar--wo-upload>form>h2 {
        text-align: center;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2) {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div {
        height: fit-content;
        box-sizing: border-box;
        max-height: 371px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div h2 {
        font-size: 17px;
        line-height: 17px;
    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div>div {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 16px;
        column-gap: 16px;
        height: calc((100vw - 4em - 56px + 150px));
        max-height: 50vh;

    }

    .popup-container .popup--avatar--wo-upload>form>div:nth-child(2)>div>div img {
        border-radius: 5px;
        border-width: var(--border-width);
    }
}


.trooper--trophy {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: url(/public/img/trooper-trophy--bg-desctop.webp);
    background-size: 100% 100%;
    margin-bottom: var(--default-padding);
    /* height: 243px; */
}

.lk-page--unregistered-trophies {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--default-padding);
    margin-bottom: var(--default-padding);
    align-items: stretch;
}

.lk-page--unregistered-trophies>.zarnitsa--trophy--unregistered,
.lk-page--unregistered-trophies>.family--trophy--unregistered {
    flex: 1 1 0;
    min-width: min(100%, 360px);
    margin-bottom: 0;
}

.lk-page--unregistered-trophies>.zarnitsa--trophy--unregistered {
    background-image: url(/public/img/zarnitsa--trophy--unregistered-smal.png);
}

.lk-page--unregistered-trophies>.family--trophy--unregistered {
    background-image: url(/public/img/family--trophy--unregistered-smal.png);
}

.family--trophy--unregistered {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: url(/public/img/family--trophy--unregistered.png);
    background-size: 100% 100%;
    margin-bottom: var(--default-padding);

    /* height: 243px; */
    justify-content: space-between;
    opacity: 1;
    border-radius: 10px;
    border-width: 3px;
    padding: 20px;
    border: 3px solid var(--Cyan-100, #22C9C6);
    min-height: 260px;

}

.family--trophy--unregistered .family--trophy__title,
.zarnitsa--trophy--unregistered .zarnitsa--trophy__title {
    margin: 0;
    font-family: Pragmatica Extended;
    font-weight: 900;
    font-style: Black Oblique;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
}

.family--trophy--unregistered .family--trophy__text,
.family--trophy--unregistered .family--trophy__dates {
    margin: 0;
    font-family: Pragmatica;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;


}

.family--trophy--registered {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: linear-gradient(355deg, rgb(0 0 0 / 41%) 13.57%, #22C9C6 107.03%);
    margin-bottom: var(--default-padding);
    border-radius: 10px;
    border-width: 3px;
    padding: 20px;
    border: 3px solid var(--Cyan-100, #22C9C6);
}

.family--trophy--registered .family--trophy__title {
    margin: 0;
    font-family: Pragmatica Extended;
    font-weight: 900;
    font-style: Black Oblique;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;

}

.family--trophy__has-team-text,
.family--trophy__no-team-text {
    margin: 0;
    font-family: Pragmatica;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
}

.family--trophy__no-team-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-self: flex-start;
}

.family--trophy__no-team-actions .button {
    margin: 0;
}

.family--trophy--unregistered .family--trophy__register-btn,
.zarnitsa--trophy--unregistered .zarnitsa--trophy__register-btn {
    margin: 0;
}

.zarnitsa--trophy--unregistered {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    box-sizing: border-box;

    background: url(/public/img/zarnitsa--trophy--unregistered.png);
    background-size: 100% 100%;
    margin-bottom: var(--default-padding);

    justify-content: space-between;
    opacity: 1;
    border-radius: 10px;
    border-width: 3px;
    padding: 20px;
    border: 3px solid var(--Cyan-100, #22C9C6);
    min-height: 260px;
}


.zarnitsa--trophy--unregistered .zarnitsa--trophy__text,
.zarnitsa--trophy--unregistered .zarnitsa--trophy__dates {
    margin: 0;
    font-family: Pragmatica;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;

}

.family--trophy--unregistered .family--trophy__registration-container,
.zarnitsa--trophy--unregistered .zarnitsa--trophy__registration-container {
    margin: 0;
    display: flex;
    flex-direction: row-reverse;
}

.family--trophy--unregistered .family--trophy__registration-closed,
.zarnitsa--trophy--unregistered .zarnitsa--trophy__registration-closed {
    margin: 0;
    font-family: Pragmatica;
    font-weight: 500;
    font-style: Medium;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;

    max-width: 360px;
    gap: 10px;
    opacity: 1;
    padding-top: 15px;
    padding-right: 25px;
    padding-bottom: 15px;
    padding-left: 25px;
    border-radius: 10px;
    border-width: 3px;

    border: 3px solid #FFFFFFCC;
    color: #FFFFFFCC;
    background: #FFFFFF1A;
}

@media screen and (max-width: calc(720px + 2em)) {
    .family--trophy--unregistered {
        background-image: url(/public/img/family--trophy--unregistered-mobile.png);
        gap: 10px;
        min-height: 160px;
        padding: 15px;
    }

    .zarnitsa--trophy--unregistered {
        background-image: url(/public/img/zarnitsa--trophy--unregistered-mobile.png);
        gap: 10px;
        min-height: 160px;
        padding: 15px;
    }

    .lk-page--unregistered-trophies>.zarnitsa--trophy--unregistered {
        background-image: url(/public/img/zarnitsa--trophy--unregistered-mobile.png);
        gap: 10px;
        min-height: 160px;
        padding: 15px;
    }

    .lk-page--unregistered-trophies>.family--trophy--unregistered {
        background-image: url(/public/img/family--trophy--unregistered-mobile.png);
        gap: 10px;
        min-height: 160px;
        padding: 15px;
    }

    .family--trophy--unregistered .family--trophy__title,
    .zarnitsa--trophy--unregistered .zarnitsa--trophy__title {
        margin: 0;
        font-family: Pragmatica Extended;
        font-weight: 900;
        font-style: Black Oblique;
        font-size: 15px;
        line-height: 100%;
        letter-spacing: 0%;
        text-transform: uppercase;

    }

    .family--trophy--unregistered .family--trophy__text,
    .family--trophy--unregistered .family--trophy__dates,
    .zarnitsa--trophy--unregistered .zarnitsa--trophy__text,
    .zarnitsa--trophy--unregistered .zarnitsa--trophy__dates {
        margin: 0;
        font-family: Pragmatica;
        font-weight: 400;
        font-style: Regular;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0%;

    }

    .family--trophy--registered .family--trophy__title {
        font-size: 15px;
    }

    .family--trophy--registered {
        display: flex;
        flex-direction: column;
    }

    .family--trophy__has-team-text,
    .family--trophy__no-team-text {
        font-size: 12px;
    }

    .family--trophy__no-team-actions {
        gap: 12px;
        margin-top: 12px;
    }

    .family--trophy--unregistered .family--trophy__registration-closed,
    .zarnitsa--trophy--unregistered .zarnitsa--trophy__registration-closed {
        margin: 0;
        font-size: 15px;

        gap: 10px;
        width: 193;
        height: 45;
        gap: 10px;
        opacity: 1;
        border-radius: 5px;
        border-width: 2px;
        padding: 15px;

        border: 2px solid #FFFFFFCC;
    }
}

.trooper--trophy>div {
    display: flex;
    flex-direction: row;
    gap: var(--default-padding);
    overflow: auto;
    padding-bottom: 15px;
    /* scrollbar-width: thin; */
}

.trooper--trophy>div>div {
    height: 123px;
    width: 123px;
    min-height: 123px;
    min-width: 123px;
    box-sizing: border-box;
    background: #22C9C633;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: calc(var(--default-padding) - var(--border-width));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.trooper--trophy>div>div.locked::before {
    content: "";
    width: 64px;
    height: 49px;
    background: url(/public/img/lock-blue.svg);
    background-size: contain;
}

@media screen and (max-width: calc(1312px + 2em)) {

    .trooper--trophy {
        background: url(/public/img/team-trophy--bg-tablet.webp);
        background-size: 100% 100%;
    }

    .trooper--trophy>div>div {
        height: 57px;
        width: 61px;
        min-height: 57px;
        min-width: 61px;
    }

    .trooper--trophy>div>div.locked::before {
        width: 34px;
        height: 27px;
    }

    .family--trophy--unregistered .family--trophy__registration-closed,
    .zarnitsa--trophy--unregistered .zarnitsa--trophy__registration-closed {
        margin: 0;
        font-size: 15px;

        gap: 10px;
        width: 193;
        height: 45;
        gap: 10px;
        opacity: 1;
        border-radius: 5px;
        border-width: 2px;
        padding: 15px;

        border: 2px solid #FFFFFFCC;
    }
}


@media screen and (max-width: calc(720px + 2em)) {

    .trooper--trophy {
        background: linear-gradient(180deg, rgba(34, 201, 198, 0.5) 0%, rgba(34, 201, 198, 0.1) 139.58%);
        border-radius: var(--border-radius);
    }
}



.lk--stage-inform.qualifying {
    background: rgba(34, 201, 198, 0.4) url(/public/img/stage_qualifying.png);
    background-position: bottom right;
    background-size: 100% 100%;
}

.lk--stage-inform {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: calc(var(--default-padding) - var(--border-width));

    margin-bottom: 20px;
}

.lk--stage-inform.qualifying>div,
.lk--stage-inform.tg>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.lk--stage-inform.qualifying>div>div {
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: 15px 25px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    text-align: center;
    height: 55px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 500;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .lk--stage-inform.qualifying>div>div {
        font-size: 10px;
        padding: 10px 15px;
        height: 35px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk--stage-inform.qualifying>div>div {
        display: none;
    }

    .lk--stage-inform.qualifying>div>h2,
    .lk--stage-inform.tg>div>h2 {
        font-size: 15px;
    }
}

.lk--stage-block--header.qualifying {
    background: rgba(34, 201, 198, 0.4) url(/public/img/stage_qualifying.png);
    background-position: top right;
    background-size: 100% 120%;
}

.lk--stage-block--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: calc(var(--default-padding) - var(--border-width));
}

.lk--stage-block--header>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.lk--stage-block--header>img {
    width: 55px;
    height: 55px;
    cursor: pointer;

    transform: rotate(180deg);
    /* transition: all 0.15s ease-in-out; */

    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lk--stage-block.active .lk--stage-block--header>img {
    transform: rotate(270deg);
}

.lk--stage-block--header>img:focus {
    outline: none !important;
}

.lk--stage-block--header>div>div {
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: 15px 25px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    text-align: center;
    height: 55px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 500;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .lk--stage-block--header>div>div {
        font-size: 10px;
        padding: 10px 15px;
        height: 35px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk--stage-block--header>div>div {
        display: none;
    }

    .lk--stage-block--header>div>h2 {
        font-size: 15px;
    }
}

.lk--stage-block--content {
    height: auto;
    max-height: 0px;
    margin-top: 0px;

    background: var(--gradient-blue-2);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    transition: all 0.25s ease-in-out;
    overflow: hidden;

    padding: 0px var(--default-padding);
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);

    margin: 0px;
}

.lk--stage-block--content p {
    margin: 0px;
}

.lk--stage-block.active .lk--stage-block--content {
    max-height: 100vh;
    margin-top: var(--default-padding);
    padding: var(--default-padding);
}

.lk--stage-block--content.roles-selected>div {
    padding: var(--default-padding);
    background: var(--gradient-black-transparent);
    border-radius: var(--border-radius);
}

.lk--stage-block--content.roles-selected>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);

    padding-bottom: var(--default-padding);

    height: 90px;

    overflow: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-gutter: stable;

}

.lk--stage-block--content.roles-selected>div>div>div {
    background: var(--gradient-black-transparent);
    border-radius: var(--border-radius);
    padding: var(--default-padding);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);
}

.lk--stage-block--content.roles-selected>div>div>div>p {
    margin: 0px;
}

.lk--stage-block--content.roles-selected>div>div>div>p:first-child {
    height: 50px;
    width: 50px;
    background: #000000cc;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
}

.lk--stage-block--content.roles-selected>div>div>div>p:nth-child(2) {
    font-family: "Pragmatica Extended";
    font-size: 25px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    white-space: nowrap;
}

.lk--stage-block--content.roles-selected>p {
    font-weight: 500;
    opacity: 0.7;
}





.lk--stage-block--content.roles-selection {
    position: relative;
}

.lk--stage-block--content.roles-selection>p {
    opacity: 0.5;
}

.lk--stage-block--content.roles-selection>div:nth-child(3) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--default-padding);
    column-gap: var(--default-padding);
}

.lk--stage-block--content.roles-selection>div:nth-child(3)>* {
    background: var(--gradient-black-transparent);
    border-radius: var(--border-radius);
    padding: var(--default-padding);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-padding);

    cursor: pointer;
}

.lk--stage-block--content.roles-selection>div:nth-child(3)>*>div {
    margin-left: auto;
}

.lk--stage-block--content.roles-selection>div:nth-child(3)>*>div>input {
    display: none;
}

.lk--stage-block--content.roles-selection>div:nth-child(3)>*>div>input~div {
    width: 50px;
    height: 50px;
    background: url(/public/img/checkbox-off.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.lk--stage-block--content.roles-selection>div:nth-child(3)>*>div>input:checked~div {
    background: url(/public/img/checkbox-on.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}


.lk--stage-block--content.roles-selection>div:nth-child(3)>*>p:first-child {
    height: 50px;
    width: 50px;
    background: #000000cc;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
}

.lk--stage-block--content.roles-selection>div:nth-child(3)>*>p:nth-child(2) {
    font-family: "Pragmatica Extended";
    font-size: 25px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    white-space: nowrap;
}

.lk--stage-block--content.roles-selection>div:nth-child(4) {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: var(--default-padding);
}

.lk--stage-block--content.table>div:nth-child(1),
.lk--stage-block--content.table>div:nth-child(2)>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.lk--stage-block--content.table {
    gap: 10px;
}

.lk--stage-block--content.table>div:nth-child(1) {
    padding-right: var(--default-padding);
    scrollbar-gutter: stable;
    overflow: auto;
}

.lk--stage-block--content.table>div:nth-child(1)>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 55px;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    background: rgba(34, 201, 198, 0.20);

    font-family: "Pragmatica Extended";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

.lk--stage-block--content.table.triple .event {
    width: 927px;
    box-sizing: border-box;
}

.lk--stage-block--content.table.double .event {
    width: 1114px;
    box-sizing: border-box;
}

.lk--stage-block--content.table.single .event {
    width: 100%;
    box-sizing: border-box;
}

.lk--stage-block--content.table .status {
    min-width: 177px;
    width: 177px;
}

.lk--stage-block--content.table .placement {
    min-width: 118px;
    width: 118px;
}


.lk--stage-block--content.table>div:nth-child(2) {
    padding-right: var(--default-padding);
    scrollbar-gutter: stable;
    overflow-y: scroll;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);

    max-height: 550px;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event {
    display: grid;
    grid-template-columns: 1fr 192px;
    column-gap: var(--default-padding);
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);
    padding: calc(var(--default-padding) - var(--border-width));

    background: rgba(34, 201, 198, 0.20);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    gap: var(--default-padding);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button.wimg {
    padding: 0px;
    width: 55px;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button.wimg:nth-child(2) {
    display: none;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1) {
    display: grid;
    grid-template-columns: 55px 1fr;
    column-gap: var(--default-padding);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>img {
    width: 55px;
    height: 55px;
    border-radius: var(--border-radius);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>img:not([src="/public/img/placeholder--team-icon.svg"]) {
    background: #00000080;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div {
    display: flex;
    flex-direction: row;
    gap: var(--default-padding);
    align-items: center;
    justify-content: start;
}

.lk--stage-block--content.table .lk-page--tags {
    font-size: 20px;
}

.lk--stage-block--content.table .role-font-icon {
    margin-right: 0.5em;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div>* {
    line-height: 1em;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 135px);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div:nth-child(1)>*:nth-child(1) {
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    color: white;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div:nth-child(1)>*:nth-child(2) {
    color: white;
    opacity: 0.5;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div:nth-child(2)>*:nth-child(1) {
    font-weight: 500;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div:nth-child(2)>*:nth-child(2) {
    color: white;
    opacity: 0.5;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.status {
    height: 170px;
    text-align: center;
    line-height: 1.05em;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.status.active {
    background: linear-gradient(180deg, #22C9C6 0%, rgba(34, 201, 198, 0) 100%);
    cursor: default;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.placement {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    height: 170px;

    background: var(--gradient-black-transparent);
    border-radius: var(--border-radius);
}

.lk--stage-block--content.table>div:nth-child(2)>div>.placement>*:nth-child(1) {
    font-family: "Pragmatica Extended";
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.placement>*:nth-child(1)>span:nth-child(2) {
    display: none;
}

.lk--stage-block--content.table>div:nth-child(2)>div>.placement>*:nth-child(2) {
    font-size: 15px;
    font-weight: 500;
    opacity: 0.5;
}

.lk--stage-block--content.table>div:nth-child(2).news-nuffsaid {
    overflow: auto;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .lk--stage-block--content {
        gap: 10px;
    }

    .lk--stage-block--header {
        padding: 14px;
    }

    .lk--stage-block--header>img {
        height: 35px;
        width: 35px;
    }

    .lk--stage-block--content.roles-selection>div:nth-child(3)>* {
        padding: 10px 15px;
    }

    .lk--stage-block--content.roles-selected>div>div {
        height: 67px;
    }

    .lk--stage-block--content.roles-selection>div:nth-child(3)>*>p:nth-child(2),
    .lk--stage-block--content.roles-selected>div>div>div>p:nth-child(2) {
        font-size: 15px;
    }

    .lk--stage-block--content.roles-selection>div:nth-child(3)>*>p:first-child,
    .lk--stage-block--content.roles-selection>div:nth-child(3)>*>div>input~div,
    .lk--stage-block--content.roles-selected>div>div>div>p:first-child {
        height: 35px;
        width: 35px;
    }

    .lk--stage-block--content.table>div:nth-child(1)>div {
        font-size: 10px;
        height: 33px;
    }

    .lk--stage-block--content.table .status {
        min-width: 79px;
        width: 79px;
    }

    .lk--stage-block--content.table .placement {
        min-width: 87px;
        width: 87px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event {
        grid-template-columns: 1fr 113px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.status {
        font-size: 10px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.placement>*:nth-child(1) {
        font-size: 15px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.placement>*:nth-child(2) {
        font-size: 8px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.status,
    .lk--stage-block--content.table>div:nth-child(2)>div>.placement {
        height: 111px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1) {
        grid-template-columns: 28px 1fr;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>img {
        width: 28px;
        height: 28px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div>* {
        font-size: 10px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div {
        gap: 8px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button.wimg {
        width: 35px;
    }

    .lk--stage-block--content.table>div:nth-child(2) {
        max-height: 365px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2) {
        gap: 9px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div {
        gap: 8px;
    }

    .lk--stage-block--content.table .lk-page--tags {
        font-size: 10px;
    }


    .lk--stage-block--content.table .lk-page--tags .in-progress,
    .lk--stage-block--content.table .lk-page--tags .scheduled,
    .lk--stage-block--content.table .lk-page--tags .completed {
        font-size: 0px;
        gap: 0px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(1)>div:nth-child(1)>div>div>* {
        max-width: calc(100% - 70px);
    }

    .lk--stage-block--content.table.triple .event {
        width: 480px;
    }

    .lk--stage-block--content.table.double .event {
        width: 567px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk--stage-block.active .lk--stage-block--content h2 {
        font-size: 14px;
    }

    .lk--stage-block--header>img {
        height: 45px;
        width: 45px;
    }

    .lk--stage-block--header {
        padding: 13px;
    }

    .lk--stage-block--content.roles-selected>div>div {
        height: 65px;
    }

    .lk--stage-block--content.roles-selection>div:nth-child(3) {
        grid-template-columns: 1fr;
        max-height: 235px;
        row-gap: 5px;
        overflow-y: scroll;
        overflow-x: auto;
        padding-right: var(--default-padding);
    }

    .lk--stage-block--content.roles-selection>div:nth-child(4) {
        justify-content: end;
    }

    .lk--stage-block--content.roles-selection>div:nth-child(3)>* {
        padding: 0px 15px;
        height: 55px;
    }

    .lk--stage-block--content.table>div:nth-child(1) {
        display: none;
    }

    .lk--stage-block--content.table>div:nth-child(2) {
        max-height: 699px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event {
        background: none;
        border: none
    }

    .lk--stage-block--content.table>div:nth-child(2)>div {
        flex-direction: column;
        gap: var(--default-padding);

        border: var(--border-width) solid var(--color-blue);
        border-radius: var(--border-radius);
        background: rgba(34, 201, 198, 0.20);

        padding: calc(var(--default-padding) - var(--border-width));

        position: relative;
    }

    .lk--stage-block--content.table .event {
        width: 100% !important;
        padding: 0px !important;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.placement {
        position: absolute;
        width: calc(100% + 4px);
        height: 45px;
        top: calc(100% + 5px);
        left: -2px;
        display: none;
        flex-direction: row;
        justify-content: space-between;


        border: var(--border-width) solid var(--color-blue);
        border-radius: var(--border-radius);
        padding: calc(var(--default-padding) - var(--border-width));
    }

    .lk--stage-block--content.table .item.active .placement {
        display: flex;
    }

    .lk--stage-block--content.table .item.active .placement>*:nth-child(1)>span:nth-child(2) {
        display: inline-block;
    }

    .lk--stage-block--content.table .item.active {
        margin-bottom: 50px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.placement>*:nth-child(2) {
        font-size: 15px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event {
        grid-template-columns: 1fr;
        row-gap: var(--default-padding)
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2) {
        flex-direction: row;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button:last-child {
        margin-left: auto;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button.wimg:nth-child(2) {
        display: flex;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button.wimg img {
        height: 100%;
        width: 70%;
        object-fit: contain;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.event>div:nth-child(2)>a.button.wimg {
        width: 45px;
    }

    .lk--stage-block--content.table>div:nth-child(2)>div>.status {
        width: 100%;
        height: 45px;
        font-size: 15px;
    }

    .lk--stage-block--content.table .lk-page--tags .in-progress,
    .lk--stage-block--content.table .lk-page--tags .scheduled,
    .lk--stage-block--content.table .lk-page--tags .completed {
        font-size: 10px;
        gap: 10px;
    }

    .lk--stage-block--content.table .role-font-icon {
        margin-right: 5px;
        margin-left: 5px;
    }

    .lk--stage-block--content.table .lk-page--tags>* {
        height: 30px;
    }
}

.lk--certif {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    padding: var(--default-padding);
    background: url(/public/img/certif-bg--desktop.webp);
    background-position: center top;
    background-size: 100% auto;
}

.lk--certif .lk--certif--tabs {
    display: flex;
    flex-direction: row;
    gap: var(--default-padding);
}

.lk--certif .lk--certif--tabs .button {
    font-size: 20px;
    white-space: nowrap;
}

.lk--certif .lk--certif--tabs .municipal {
    background: url(/public/img/events--stage-2.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .municipal.active {
    background: url(/public/img/events--stage-2.webp), linear-gradient(180deg, #22C9C6 0%, rgba(34, 201, 198, 0) 100%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .regional {
    background: url(/public/img/events--stage-3.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .regional.active {
    background: url(/public/img/events--stage-3.webp), linear-gradient(180deg, #22C9C6 0%, rgba(34, 201, 198, 0) 100%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .half {
    background: url(/public/img/events--stage-4.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .half.active {
    background: url(/public/img/events--stage-4.webp), linear-gradient(180deg, #22C9C6 0%, rgba(34, 201, 198, 0) 100%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .final {
    background: url(/public/img/events--stage-5.webp), linear-gradient(324.96deg, #000000 13.57%, #006C6A 107.03%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--tabs .final.active {
    background: url(/public/img/events--stage-5.webp), linear-gradient(180deg, #22C9C6 0%, rgba(34, 201, 198, 0) 100%);
    background-position: center top;
    background-size: 100% 100%;
}

.lk--certif .lk--certif--lists>div:not(.active) {
    display: none;
}

.lk--certif .lk--certif--lists>div {
    max-height: 349px;
    overflow-y: scroll;
    overflow-x: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 20px;
}

.lk--certif .lk--certif--lists>div>.news-nuffsaid>p {
    margin: 0px;
}

.lk--certif .lk--certif--lists>div>.news-nuffsaid {
    min-height: 103px;
    margin-bottom: 0px;
    border-radius: var(--border-radius);
}

.lk--certif .lk--certif--lists>div>.certif--item {
    width: 100%;
    height: 103px;
}

.lk--certif .lk--certif--lists>div>.certif--item>* {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: 500;
    gap: var(--default-padding);

    padding: 20px;
    box-sizing: border-box;
    background: var(--gradient-black-transparent);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.lk--certif .lk--certif--lists>div>.certif--item>*>*:nth-child(2) {
    display: block;
    width: 63px;
    height: 63px;
    box-sizing: border-box;
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--border-radius);

    background: url(/public/img/download-icon.svg), rgba(34, 201, 198, 0.20);
    background-repeat: no-repeat;
    background-size: 33px 33px;
    background-position: center center;
}

.lk--certif .lk--certif--lists>div>.certif--item.active>*>*:nth-child(2) {
    background: url(/public/img/checkmark--white.svg), var(--gradient-blue);
    background-repeat: no-repeat;
    background-size: 33px 33px, 100% 100%;
    background-position: center center;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .lk--certif {
        background: url(/public/img/certif-bg--tablet.webp);
        background-position: center top;
        background-size: 100% auto;
    }

    .lk--certif .lk--certif--tabs .button {
        font-size: 10px;
    }

    .lk--certif .lk--certif--lists>div>.certif--item {
        height: 55px;
    }

    .lk--certif .lk--certif--lists>div>.certif--item>* {
        font-size: 15px;
    }

    .lk--certif .lk--certif--lists>div>.certif--item>*>*:nth-child(2) {
        height: 35px;
        width: 35px;

        background-size: 19px 19px;
    }

    .lk--certif .lk--certif--lists>div>.certif--item.active>*>*:nth-child(2) {
        background-size: 19px 19px, 100% 100%;
    }

    .lk--certif .lk--certif--lists>div {
        gap: 8px;
        max-height: 181px;
        padding-right: 10px;
    }

    .lk--certif .lk--certif--lists>div>.news-nuffsaid {
        min-height: 55px;
        height: 55px;
        margin-bottom: 0px;
    }

    .lk--certif .lk--certif--lists>div>.certif--item>* {
        padding: 15px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk--certif {
        background: url(/public/img/certif-bg--mobile.webp);
        background-position: center top;
        background-size: 100% auto;
    }

    .lk--certif .lk--certif--lists>div>.certif--item>* {
        font-size: 10px;
        padding: 10px 15px;
    }

    .lk--certif .lk--certif--tabs {
        overflow-x: scroll;
        overflow-y: auto;
    }

    .lk--certif .lk--certif--tabs::-webkit-scrollbar {
        height: 0px;
    }

    .lk--certif .lk--certif--tabs .button {
        height: 35px;
    }

    .lk--certif .lk--certif--lists>div>.news-nuffsaid>p {
        font-size: 15px;
        margin: 0px;
    }
}


.profile-type {
    background-image: url(/public/img/profile-type-bg--desctop.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@media screen and (max-width: calc(720px + 2em)) {
    .profile-type {
        background-image: url(/public/img/profile-type-bg--mobile.webp);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}



.lk--stage-inform.tg {
    background: rgba(34, 201, 198, 0.4) url(/public/img/lk--stage-inform--tg.png);
    background-position: bottom right;
    background-size: 100% 100%;
    border-color: #F7C746;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .lk--stage-inform.tg {
        background: rgba(34, 201, 198, 0.4) url(/public/img/lk--stage-inform--tg-tablet.png);
        background-position: bottom right;
        background-size: 100% 100%;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk--stage-inform.tg {
        background: rgba(34, 201, 198, 0.4) url(/public/img/lk--stage-inform--tg-mobile.png);
        background-position: bottom right;
        background-size: 100% 100%;
    }
}

.lk--yunarmy--wrap {
    position: relative;
    margin-bottom: 20px;
}

.lk--yunarmy--shadow {
    position: absolute;
    z-index: 0;
    left: 24px;
    right: 24px;
    top: 12px;
    bottom: 35px;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 250px 0px #E6001959;
    pointer-events: none;
}

.lk--yunarmy--wrap>.lk--stage-inform.yunarmy {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.lk-page--mode-switches {
    margin: 24px 0 16px;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .lk-page--mode-switches {
        margin: 0;
    }
}

.lk--stage-inform.yunarmy {
    background: url(/public/img/yunarmy-desktop.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none;
    align-items: center;
    gap: 40px;
    padding: 24px 32px;
    min-height: 120px;
    box-sizing: border-box;
}

.lk--stage-inform.yunarmy>.lk--stage-inform-yunarmy--brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.lk--stage-inform.yunarmy>.lk--stage-inform-yunarmy--content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.lk--yunarmy--logo-wrap {
    flex-shrink: 0;
    display: block;
    height: 132px;
    overflow: hidden;
}

.lk--yunarmy--logo-wrap img {
    display: block;
    height: 132px;
    width: auto;
    max-width: none;
}

.lk--stage-inform-yunarmy--title {
    display: none;
    font-family: "Pragmatica", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}

.lk--stage-inform-yunarmy--text {
    margin: 0;
    color: #fff;
    text-transform: none;

    font-family: Pragmatica;
    font-weight: 400;
    font-style: Medium;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;

}

.lk--yunarmy--status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 35px;
    padding: 0 14px;
    border-radius: 10px;
    background: linear-gradient(254.58deg, rgba(0, 0, 0, 0.5) 21.83%, rgba(0, 0, 0, 0.23) 90.74%);
    white-space: nowrap;
}

.lk--yunarmy--status-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E40522;
}

.lk--yunarmy--status-text {
    color: #fff;
    font-family: Pragmatica, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
}

.lk--stage-inform.yunarmy .lk--stage-inform-yunarmy--button {
    margin: 0;
    background: #E40522;
    border: solid 1px #E40522;
    border-color: #E40522;
    color: #fff;
    text-transform: none;
}

.lk--stage-inform.yunarmy .lk--stage-inform-yunarmy--button:hover,
.lk--stage-inform.yunarmy .lk--stage-inform-yunarmy--button:focus {
    background: #c40015;
    border-color: #c40015;
    color: #fff;
}

@media screen and (max-width: calc(1312px + 2em)) {
    
    .lk--yunarmy--shadow {
        left: 16px;
        right: 16px;
        top: 10px;
        bottom: 15px;
    }

    .lk--stage-inform.yunarmy>.lk--stage-inform-yunarmy--content {
        gap: 10px;
    }

    .lk--stage-inform.yunarmy {
        background-image: url(/public/img/yunarmy-tablet.png);
        gap: 24px;
        padding: 15px 15px;
        min-height: 120px;
    }

    .lk--yunarmy--logo-wrap {
        height: 70px;
    }

    .lk--yunarmy--logo-wrap img {
        height: 70px;
        margin: 0;
    }

    .lk--stage-inform.yunarmy .lk--stage-inform-yunarmy--button {
        width: 203px;
        height: 35px;
        gap: 10px;
        border-radius: 5px;
        padding: 10px 14px;
        font-family: Pragmatica, sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 100%;
        text-align: center;
    }

    .lk--yunarmy--status {
        border-radius: 5px;
    }

    .lk--stage-inform-yunarmy--title {
        font-size: 28px;
    }

    .lk--stage-inform-yunarmy--text {
        font-size: 10px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .lk--yunarmy--shadow {
        left: 8px;
        right: 8px;
        top: 8px;
        bottom: 18px;
    }

    .lk--stage-inform.yunarmy {
        background-image: url(/public/img/yunarmy-mobile.png);
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 20px 16px;
        min-height: 0;
    }

    .lk--stage-inform.yunarmy>.lk--stage-inform-yunarmy--brand {
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .lk--yunarmy--logo-wrap {
        width: 40px;
        height: 40px;
        overflow: hidden;
    }

    .lk--yunarmy--logo-wrap img {
        height: 40px;
        width: auto;
    }

    .lk--stage-inform-yunarmy--title {
        display: block;
        font-size: 28px;
        line-height: 1;
    }

    .lk--stage-inform.yunarmy>.lk--stage-inform-yunarmy--content {
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .lk--stage-inform-yunarmy--text {
        font-size: 12px;
        line-height: 140%;
        text-align: left;
    }

    .lk--stage-inform.yunarmy .lk--stage-inform-yunarmy--button {
        width: auto;
        height: 35px;
        padding: 10px 14px;
        font-size: 14px;
        line-height: 100%;
        align-self: flex-start;
        justify-content: center;
    }

    .lk--yunarmy--status {
        height: 32px;
        padding: 0 12px;
        border-radius: 5px;
        align-self: flex-start;
    }

    .lk--yunarmy--status-text {
        font-size: 12px;
    }
}


.lk-page--team-invites {
    position: relative;
    background: var(--gradient-blue-2);
    background-size: 100% 100%;
    border-radius: 10px;
    border: unset;
    transition: all 0.15s ease-in-out;

    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    align-items: center;
    justify-content: space-between;
}

.lk-page--team-invites--controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.lk-page--team-invites--controls>div {
    width: 100%;
    height: 10px;
    border-radius: 100px;
    background: #010101;
    opacity: 0.3;

    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.lk-page--team-invites--controls>div.active {
    background: #22C9C6;
    opacity: 1;
}

.lk-page--team-invites--tabs,
.lk-page--team-invites--tabs>div {
    width: 100%;
    min-height: 517px;
}

.lk-page--team-invites--tabs>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    color: #22C9C6;
}

.lk-page--team-invites--tabs>div a:not(.button) {
    color: white;
}

.lk-page--team-invites--tabs>div:not(.active) {
    display: none;
}

.lk-page--team-invites--tabs>div>div {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    justify-content: start;
    align-items: center;
    text-align: center;
    margin-top: auto;
    /* max-width: calc(100% - 62px - 62px - (var(--default-padding))); */
}

.lk-page--team-invites--tabs>div>div>div:last-child {
    margin-top: auto;
}

.lk-page--team-invites--tabs>div>div:last-child {
    height: 62px;
    justify-content: center;
}

.lk-page--team-invites--tabs>div>div .button {
    width: 267px;
    max-width: 70%;
}

.lk-page--team-invites--arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: var(--default-padding);
}

.lk-page--team-invites--arrows>div {
    width: 62px;
    height: 62px;
}

.lk-page--team-invites--arrows>div img {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: calc(1312px + 2em)) {

    .lk-page--team-invites--tabs,
    .lk-page--team-invites--tabs>div {
        min-height: 392px;
    }

    .lk-page--team-creation,
    .lk-page--team-invites--tabs {
        font-size: 20px;
    }

    .lk-page--team-invites--arrows>div {
        height: 50px;
        width: 50px;
    }

    .lk-page--team-invites--tabs>div>div:last-child {
        height: 50px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {

    .lk-page--team-creation,
    .lk-page--team-invites--tabs {
        font-size: 15px;
    }
}

.lk--stage-inform.qualifying>div>div {
    white-space: nowrap;
}

.lk--stage-inform.qualifying>div>h2,
.lk--stage-inform.tg>div>h2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lk--stage-inform.qualifying>div>h2>span:nth-child(2) {
    opacity: 0.5;
    font-size: 18px;
    font-family: "Pragmatica";
    font-weight: 500;
    text-transform: none;
    line-height: 1em;
}

@media screen and (max-width: calc(1312px + 2em)) {
    .lk--stage-inform.qualifying>div>h2>span:nth-child(2) {
        font-size: 10px;
    }
}

@media screen and (min-width: calc(720px + 2em)) {
    .lk--stage-inform.qualifying>div>h2>span:nth-child(2) br {
        display: none;
    }
}



header>div.container>div .button {
    white-space: nowrap;
    text-align: center;
}

@media screen and (min-width: 1380px) {
    header>div.container>div .button br {
        display: none;
    }
}



.awards-page {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

.awards-page .awards-page--header {
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
    align-items: start;
    background: url(/public/img/awards-header-bg-desktop.png);
    background-size: cover;
    background-position: right bottom;
    border-radius: 10px;
    height: 185px;
    width: 100%;

    box-sizing: border-box;
    padding: var(--default-padding);

}

.awards-page .awards-page--header .btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 20px;
    overflow: auto;

    width: 100%;
}

.awards-page .awards-page--header .btns .button {
    border: none;
    white-space: nowrap;
}

.awards-page .awards-page--header .btns .button.active {
    background: var(--color-blue);
}

.awards-page .awards-page--content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--default-padding);
    row-gap: var(--default-padding);
}

.awards-page .awards-page--content .awards-page--content--item {
    border-radius: 10px;

    box-sizing: border-box;
    padding: var(--default-padding);
    background: var(--gradient-blue-2);
    background-size: 100% 100%;

    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(1) {
    border: var(--border-width) solid var(--color-blue);
    background: linear-gradient(180deg, #006C6A 0%, #000000 100%);
    border-radius: 10px;
    height: 213px;
    overflow: hidden;
    position: relative;
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img:nth-child(1) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 149px;
    width: auto;
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img.avatar-skin {
    position: absolute;
    bottom: var(--default-padding);
    right: var(--default-padding);
    width: 120px;
    height: auto;

    image-rendering: optimizeQuality;
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(2) {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.5) 100%);
    box-sizing: border-box;
    padding: var(--default-padding);
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(2)>div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #ffffff7f
}

.awards-page .awards-page--content .awards-page--content--item>div:nth-child(2)>div div {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-right: 5px;
}


@media screen and (max-width: calc(1312px + 2em)) {
    .awards-page .awards-page--header {
        height: 120px;

        background: url(/public/img/awards-header-bg-tablet.png);
        background-size: cover;
        background-position: right bottom;
    }

    .awards-page .awards-page--content {
        grid-template-columns: repeat(2, 1fr);
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(1) {
        height: 168px;
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img:nth-child(2) {
        height: 126px;
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img.avatar-skin {
        width: 94px;
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(2) {
        height: 120px;
        gap: 8px;
    }
}

/* --- Compact-ряд этапов: адаптив (не зависит от структуры) --- */
@media screen and (max-width: calc(1312px + 2em)) {
    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card {
        height: auto;
        min-height: 163px;
        padding: 16px;
    }

    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card p.current.icon-only-current {
        width: 36px;
        height: 36px;
        border-radius: 5px;
    }

    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card p.current.icon-only-current::before {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .index--season .index--season--stages .compact-stages-row {
        grid-template-columns: 1fr;
    }

    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card {
        min-height: 174px;
    }

    .index--season .index--season--stages .compact-stages-row>div.compact-stage-card p.current.icon-only-current {
        width: 45px;
        height: 45px;
        border-radius: 5px;
    }
}

@media screen and (max-width: calc(720px + 2em)) {
    .awards-page .awards-page--header {
        height: 120px;

        background: url(/public/img/awards-header-bg-mobile.png);
        background-size: cover;
        background-position: right bottom;
    }

    .awards-page .awards-page--content {
        grid-template-columns: repeat(1, 1fr);
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(1) {
        height: 168px;
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img:nth-child(2) {
        height: 126px;
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(1)>img.avatar-skin {
        width: 94px;
    }

    .awards-page .awards-page--content .awards-page--content--item>div:nth-child(2) {
        height: 120px;
        gap: 8px;
    }
}