: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;
}

@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 > .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 > .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(720px + 2em)){
    header > div.container:first-child{
        display: none;
    }
}
@media screen and (min-width: calc(2em + 720px)) {
    header > div.mobile-header{
        display: none;
    }
    header .mobile-menu{
        display: none;
    }
}
@media screen and (max-width: calc(2em + 720px)) {
    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: 0px;
    }
    header .mobile-menu > .mobile-menu-items > a{
        width: 100%;
    }
    header .mobile-menu > .mobile-menu-items > a:not(:last-child){
        border-bottom: none;
    }
    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{
    width: 36px;
}
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{
        width: 22px;
    }
}
@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{
        width: 30px;
    }
    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: 1fr;
    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:nth-child(1){
    background: url(/public/img/season-stage-1.webp);
    background-position: right top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.index--season .index--season--stages > div:nth-child(2){
    background: url(/public/img/season-stage-2.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: 1em;
    height: 1em;
    border-radius: 100%;
    background-color: #E64156;
}
.index--season .index--season--stages > div > div:last-child{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}
.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--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;
}
.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;
}

@media screen and (max-width: calc(1312px + 2em)){
    .index--season{
        padding: 16px;
        
        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 .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 > 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 > 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{
        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{
        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 .index--season--stages > div > div:first-child{
        display: none;
    } */
    .index--season > div:first-child p{
        font-size: 0px;
        gap: 0px;
        padding: 5px;
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }
}

#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;
    }
    .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: 15px;
        padding-bottom: 17px;
        
        background: url(/public/img/season-stage-5--mobile.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;
    }
    .index--season--stage-final > div:first-child > a.button{
        position: absolute;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    .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:nth-child(1){
        background: url(/public/img/season-stage-1--mobile.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-2--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:nth-child(4){
        background: url(/public/img/season-stage-4--mobile.webp);
        background-position: left bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.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;
    }
}

.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 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{
    background: url(/public/img/lk_bg_4.webp);
    background-size: 100% 100%;
    min-height: 251px;
}
.lk-page--near-events.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,
.team--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{
    padding: 20px;
}
.lk-page--near-events > div{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lk-page--near-events > 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-events > div > div > div > span:nth-child(1){
    font-size: 20px;
    line-height: 20px;
}
.lk-page--near-events > div > div > div > span:nth-child(2){
    font-size: 20px;
    line-height: 20px;
    opacity: 0.5;
}
.lk-page--near-events .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,
    .team--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{
        background: url(/public/img/lk_bg_4--tablet.webp);
        background-size: 100% 100%;
        padding: 15px;
    }
    .lk-page--near-events > 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){
        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{
        background: var(--gradient-blue-2);
        border-radius: 5px;
        padding: 10px;
    }
    .lk-page--near-events > div > div{
        flex-direction: column;
        border-width: var(--border-width) ;
        padding: 10px;
    }
    .lk-page--near-events > 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: 756px;
    object-fit: contain;
    object-position: bottom center;
}
.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;
    }
    .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: 720px;
        bottom: 0px;
    }
    .banner > img:nth-child(1),
    .banner > img:nth-child(2){
        display: none;
    }
}

.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-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):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;
}

.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);
}
.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);
    }
}

.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: flex;
    flex-direction: column;
    gap: var(--default-padding);
}
.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) ;
    }
}


.team--trophy{
    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 > div{
    display: flex;
    flex-direction: row;
    gap: var(--default-padding);
    overflow: auto;
    padding-bottom: 15px;
    /* scrollbar-width: thin; */
}
.team--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;
}
.team--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)){
    .team--trophy{
        background: url(/public/img/team-trophy--bg-tablet.webp);
        background-size: 100% 100%;
    }
    .team--trophy > div > div{
        height: 57px;
        width: 61px;
        min-height: 57px;
        min-width: 61px;
    }
    .team--trophy > div > div.locked::before{
        width: 34px;
        height: 27px;
    }
}


@media screen and (max-width: calc(720px + 2em)){
    .team--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);
    }
}
.team--trophy{
    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{
        background: url(/public/img/team-trophy--bg-tablet.webp);
        background-size: 100% 100%;
    }
}
@media screen and (max-width: calc(720px + 2em)){
    .team--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 > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.lk--stage-inform > 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 > div > div{
        font-size: 10px;
        padding: 10px 15px;
        height: 35px;
    }
}
@media screen and (max-width: calc(720px + 2em)){
    .lk--stage-inform > div > div{
        display: none;
    }
    .lk--stage-inform > 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-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 > div > div{
    white-space: nowrap;
}
.lk--stage-inform > div > h2{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lk--stage-inform > 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 > div > h2 > span:nth-child(2){
        font-size: 10px;
    }
}
@media screen and (min-width: calc(720px + 2em)){
    .lk--stage-inform > 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;

    cursor: pointer;
}
.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: scroll;
    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;
    }
}
@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;
    }
}