@font-face {
    font-family: 'ALS Unios';
    src: url('/public/font/ALS_Unios_0.8_desktop/ALS_Unios_VF_0.8.ttf') format('truetype-variations');
    font-weight: 1 999;
    font-stretch: 25% 200%;
    font-style: normal italic;
}
@font-face {
    font-family: 'Codec Pro';
    src: url('/public/font/Codec_PRO/Codec-Pro-Variable-trial.ttf') format('truetype-variations');
    font-weight: 1 899;
    font-stretch: 25% 200%;
    font-style: normal italic;
}
@font-face {
    font-family: 'Codec Pro';
    src: url('/public/font/Codec_PRO/Codec-Pro-Ultra-Black-Italic-trial.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}
a{
    text-decoration: none;
    color: inherit;
}
form{
    margin: 0px;
}
:root{
    --grey: #2D3841;
    --white: #ffffff;
    --light-grey: #41515D;
    --dark-grey: #171A1F;
    --orange: #FF6B12;
    --red: #ED1D24;
    --light-red: #FF5757;
    --purple: #8D22FF;
    --yellow: #FFCE00;
    --green: #00EA80;
    --dark-green: #1EA473;
    --blue: #39E8FF;

    --radius: 10px;
    --padding: 20px;
    --gap: 20px;

    --transition: all 0.25s ease-in-out;
    --transition-slow: all 1s ease-in-out;
    --transition-med: all 0.5s ease-in-out;
}
*::-webkit-scrollbar{
    width: 4px;
    height: 4px;
    scrollbar-width: thin;
    background-color: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 100px;
}
@media screen and (max-width: 1312px) {
    :root{
        --gap: 15px;
        --padding: 20px;
    }
    *::-webkit-scrollbar{
        width: 4px;
        height: 4px;
    }
}
@media screen and (max-width: 720px) {
    :root{
        --gap: 10px;
        --padding: 10px;
    }
    *::-webkit-scrollbar{
        width: 2px;
        height: 2px;
    }
}
@media screen and (max-width: 720px) {
    .mobile-hidden{
        display: none!important;
    }
}
@media screen and (max-width: 1312px) and (min-width: 720px) {
    .tablet-hidden{
        display: none!important;
    }
}
@media screen and (min-width: 1312px) {
    .desktop-hidden{
        display: none!important;
    }
}

body{
    font-family: "ALS Unios";
    font-size: 15px;

    margin: 0px;
    background: #171A1F;
    color: var(--white);

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: var(--gap);
    scroll-behavior: smooth;
}
body > content{
    min-height: calc(100vh - 330px - var(--gap) - var(--gap));
}
content{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: var(--gap);
}

.container{
    width: 100vw;
    max-width: 1312px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 1312px) {
    .container{
        max-width: 720px;
    }
    body > content{
        min-height: calc(100vh - 162px - var(--gap) - var(--gap));
    }
}
@media screen and (max-width: 720px) {
    .container{
        width: calc(100vw - 20px);
    }
}

h1,h2,h3,h4,h5{
    margin: 0px;
    font-family: "Codec PRO";
}


.button{
    font-weight: 500;
    background-color: var(--grey);
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                            supported by Chrome, Edge, Opera and Firefox */

                            
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    color: inherit;
    font-size: inherit;
    outline: unset;
    border: unset;

    transition: var(--transition);
}
.button:active{
    background-color: var(--light-grey);
}
/* .button::placeholder{
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    color: inherit;
} */
.button.light-grey{
    background-color: var(--light-grey);
}
.button.active{
    background-color: var(--orange);
}
.button.red{
    background-color: var(--light-red);
}
.button.green{
    background-color: var(--green);
    color: var(--grey);
}
.checkbox{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                            supported by Chrome, Edge, Opera and Firefox */
}
.checkbox > input{
    display: none;
}
.checkbox > span{
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.checkbox > span::before{
    content: "";
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    box-sizing: border-box;
    border: 2px solid var(--light-grey);
    background-color: var(--grey);
    border-radius: 10px;
}
.checkbox > input:checked + span::before{
    background-image: url(/public/img/checkbox_check.svg);
    background-size: 10px 10px;
    background-position: center center;
    background-repeat: no-repeat;
}
.btn-checkbox > input{
    display: none;
}
.btn-checkbox > *:nth-child(2){
    font-weight: 500;
    background-color: var(--grey);
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    display: block;
    transition: var(--transition);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                            supported by Chrome, Edge, Opera and Firefox */
}
.btn-checkbox > input:checked + *{
    background-color: var(--orange);
}

header{
    width: 100%;
    background: var(--grey);
    height: 100px;
}
header > .container{
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
header > .container .logo{
    width: 61px;
}
header > .container .logo img{
    width: 100%;
    height: auto;
}
header > .container .bookmarks{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: var(--gap);
    height: 100%;
}
header > .container .bookmarks > *{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 15px;
    padding: 15px 25px;
    box-sizing: border-box;
    background-color: var(--light-grey);
    border-radius: 0px 0px var(--radius) var(--radius);
    height: 82px;
    width: 124px;
    font-family: "Codec Pro";
    font-size: 22px;
    font-style: italic;
    font-weight: 900;
    cursor: pointer;
}
header > .container .bookmarks > *,
header > .container .bookmarks > * *{
    transition: var(--transition);
}
header > .container .bookmarks > * img:nth-child(1){
    height: 18px;
}
header > .container .bookmarks > * img:last-child{
    height: 20px;
}
header > .container .bookmarks > *:nth-child(1){
    background-color: var(--orange);
}
header > .container .bookmarks > *:nth-child(2).active{
    background-color: var(--white);
}
header > .container .bookmarks > *:nth-child(2).active img:nth-child(2),
header > .container .bookmarks > *:not(.active):hover img:last-child{
    filter: brightness(0.15);
}
header > .container .bookmarks > *:nth-child(1):not(.active):hover img:nth-child(1){
    filter: invert(1);
}
header > .container .bookmarks > *:not(.active){
    transform: translateY(-33px);
}
header > .container .bookmarks > *:not(.active):hover{
    transform: translateY(-15px);
    background-color: var(--white);
}
header > .container .burger{
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-image: url(/public/img/burger.svg);
    background-size: 100% 100%;
    position: relative;
    transition: var(--transition);
}
header > .container .burger.active{
    background-image: url(/public/img/burger_active.svg);
}
header > .container .burger > div{
    position: absolute;
    width: fit-content;
    max-width: 305px;
    max-height: 400px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius);
    background: var(--light-grey);
    
    right: 10px;
    top: calc(100% + 10px);

    z-index: 999;
    
    transition: var(--transition);
    overflow: hidden;
    box-sizing: border-box;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                            supported by Chrome, Edge, Opera and Firefox */
}
header > .container .burger > div > *{
    height: 38px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: var(--grey);
    padding: 0px 20px;
    min-width: 266px;
    transition: var(--transition);
}
header > .container .burger:not(.active) > div{
   pointer-events: none;
   opacity: 0;
   max-height: 0px;
}
header > .container .burger > div > *:nth-child(1){
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
header > .container .burger > div > *:last-child{
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
header > .container .burger > div > *.active,
header > .container .burger > div > *:hover{
    background: var(--orange);
}
@media screen and (max-width: 1312px) {
    header{
        height: 80px;
    }
    header > .container .logo{
        width: 51px;   
    }
    header > .container .bookmarks > * img:nth-child(1){
        height: 17px;
    }
    header > .container .bookmarks > * img:nth-child(2){
        height: 17px;
    }
    header > .container .burger{
        width: 50px;
        height: 50px;
    }
    header > .container .bookmarks > *{
        width: 110px;
        height: 61px;
        padding: 7px 0px;
        gap: 10px;
    }
    header > .container .bookmarks > *:not(.active){
        transform: translateY(-28px);
    }
    header > .container .bookmarks > *:not(.active):hover{
        transform: translateY(-15px);
    }
}
@media screen and (max-width: 720px) {
    header{
        height: 41px;
    }
    header > .container .logo{
        width: 22px;   
    }
    header > .container .bookmarks > * img:nth-child(1){
        height: 7px;
    }
    header > .container .bookmarks > * img:nth-child(2){
        height: 7px;
    }
    header > .container .burger{
        width: 25px;
        height: 25px;
    }
    header > .container .bookmarks > *{
        width: 47px;
        height: 30px;
        padding: 7px 0px;
        gap: 5px;
        border-radius: 0px 0px 5px 5px;
    }
    header > .container .bookmarks > *:not(.active){
        transform: translateY(-10px);
    }
    header > .container .bookmarks > *:not(.active):hover{
        transform: translateY(0);
    }
}

footer{
    height: 230px;
    background: var(--grey);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
footer > .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(var(--gap) * 2);
}

footer > .container > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}
footer > .container > div:nth-child(1) img{
    height: 31px;
}
footer > .container > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: center;
    align-items: end;
}
footer > .container > div:nth-child(2) span{
    opacity: 0.5;
    font-size: 20px;
}
footer > .container > div:nth-child(2) *{
    width: 220px;
    display: block;
}
footer > .container > div:nth-child(3){
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--gap);
    column-gap: calc(var(--gap) * 2);
}
footer > .container > div:nth-child(3) *{
    opacity: 0.5;
    font-size: 20px;
}
footer > .container > div:nth-child(3) p{
    margin: 0px;
    width: 100%;
}
footer > .container > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
footer > .container > div:nth-child(2) { grid-area: 1 / 2 / 3 / 3; }
footer > .container > div:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }

@media screen and (max-width: 1312px) {
    footer{
        height: 207px;   
    }
    footer > .container{
        grid-template-columns: 1fr 200px;
    }
    footer > .container > div:nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
    footer > .container > div:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
    footer > .container > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
    footer > .container > div:nth-child(2){
        align-items: start;
    }
    footer > .container > div:nth-child(2) *{
        width: 153px;
    }
    footer > .container > div:nth-child(3) *,
    footer > .container > div:nth-child(2) span{
        font-size: 15px;
    }
    footer > .container > div:nth-child(1){
        justify-content: end;
        align-items: start;
        gap: 15px;
    }
}
@media screen and (max-width: 720px){
    footer{
        height: 121px;
    }
    footer.fl{
        padding-bottom: 92px;
    }
    footer > .container > div:nth-child(1){
        gap: 10px;
    }
    footer > .container > div:nth-child(1) img{
        height: 19px;
    }
    footer > .container > div:nth-child(3) *,
    footer > .container > div:nth-child(2) span{
        font-size: 8px;
    }
    footer > .container > div:nth-child(2) *{
        width: 77px;
    }
}

.index-banner{
    height: 396px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
/* @media screen and (min-width: 720px) {
    .index-banner .swiper-wrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 0px;
    }
} */
.index-banner .swiper-slide{
    width: calc(100% - 218px - 218px);
}
.index-banner .swiper-slide:nth-child(1):last-child{
    width: 100%;
}
.index-banner .swiper-slide > *{
    display: block;
    width: 218px;
    transition: var(--transition);
    cursor: pointer;
    height: 100%;
    position: relative;
    margin-left: calc(100% - 218px);
    margin-right: 0px;
}
.index-banner .swiper-slide.swiper-slide-active > *{
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}
.index-banner .swiper-slide.swiper-slide-active ~ .swiper-slide > *{
    margin-right: calc(100% - 218px);
    margin-left: 0px;
}
.index-banner .swiper-slide > * > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.index-banner .swiper-slide.placeholder > *{
    background: var(--grey);
    position: relative;
}
.index-banner .swiper-slide.placeholder > * > span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 20px;
}
.index-banner .swiper-slide > * > .text{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg,#000000ff 0%, #00000000 100%);
    padding: 35px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    justify-content: end;
    box-sizing: border-box;
}
.index-banner .swiper-slide > * > .text h2{
    font-size: 30px;
    transition: var(--transition);
    font-family: "ALS Unios";
}
.index-banner .swiper-slide > * > .text span{
    opacity: 0.5;
    transition: var(--transition);
}
@media screen and (min-width: 720px){
    .index-banner .swiper-slide:not(.swiper-slide-active) > * h2{
        font-size: 20px;
    }
    .index-banner .swiper-slide:not(.swiper-slide-active) > * span{
        font-size: 12px;
    }
    .index-banner .button-prev,
    .index-banner .button-next{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .index-banner{
        height: 269px;
    }
    .index-banner .swiper-slide > *{
        width: 140px;
    }
    .index-banner .swiper-slide > *.swiper-slide-active{
        width: 100%;
    }
    .index-banner .swiper-slide{
        width: calc(100% - 140px - 140px);
    }
    .index-banner .swiper-slide > * > .text h2{
        font-size: 25px;
    }
    .index-banner .swiper-slide:not(.swiper-slide-active) > * > .text{
        opacity: 0;
    }
    .index-banner .swiper-slide > * > .text{
        padding: 25px;
    }

    .index-banner .swiper-slide > *{
        margin-left: calc(100% - 140px);
        margin-right: 0px;
    }
    .index-banner .swiper-slide.swiper-slide-active > *{
        margin-left: 0px;
        margin-right: 0px;
    }
    .index-banner .swiper-slide.swiper-slide-active ~ .swiper-slide > *{
        margin-right: calc(100% - 140px);
        margin-left: 0px;
    }

}
@media screen and (max-width: 720px) {
    .index-banner{
        height: 170px;
    }
    .index-banner .swiper-slide > *{
        width: 100%;
    }
    .index-banner .swiper-slide:not(.swiper-slide-active) > * > .text{
        opacity: 1;
    }
    .index-banner .swiper-slide > * > .text h2{
        font-size: 14px;
    }
    .index-banner .swiper-slide > * > .text span{
        font-size: 8px;
    }
    .index-banner .swiper-slide > *{
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
    .index-banner .button-prev,
    .index-banner .button-next{
        display: block;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        opacity: 0.3;
    }
    .index-banner .button-prev{
        left: 20px;
        background: url(/public/img/arrow-left.svg);
        background-size: 100% 100%;
    }
    .index-banner .button-next{
        right: 20px;
        background: url(/public/img/arrow-right.svg);
        background-size: 100% 100%;
    }
    .index-banner .swiper-slide > * > .text{
        padding: 15px;
    }
}



.index-banner-2{
    height: 396px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
/* @media screen and (min-width: 720px) {
    .index-banner-2 .swiper-wrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 0px;
    }
} */
.index-banner-2 .swiper-slide{
    width: 100%ж
}
.index-banner-2 .swiper-slide > *{
    display: block;
    width: 100%;
    transition: var(--transition);
    cursor: pointer;
    height: 100%;
    position: relative;
}
.index-banner-2 .swiper-slide.swiper-slide-active > *{
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}
.index-banner-2 .swiper-slide.swiper-slide-active ~ .swiper-slide > *{
    margin-right: calc(100% - 218px);
    margin-left: 0px;
}
.index-banner-2 .swiper-slide > * > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.index-banner-2 .swiper-slide.placeholder > *{
    background: var(--grey);
    position: relative;
}
.index-banner-2 .swiper-slide.placeholder > * > span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 20px;
}
.index-banner-2 .swiper-slide > * > .text{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg,#000000ff 0%, #00000000 100%);
    padding: 35px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    justify-content: end;
    box-sizing: border-box;
}
.index-banner-2 .swiper-slide > * > .text.empty{
    display: none!important;
}
.index-banner-2 .swiper-slide > * > .text h2{
    font-size: 30px;
    transition: var(--transition);
    font-family: "ALS Unios";
}
.index-banner-2 .swiper-slide > * > .text span{
    opacity: 0.5;
    transition: var(--transition);
}
.index-banner-2 .button-prev,
.index-banner-2 .button-next{
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 1;
}
.index-banner-2 .button-prev{
    left: 20px;
    background: url(/public/img/arrow-left.svg);
    background-size: 100% 100%;
}
.index-banner-2 .button-next{
    right: 20px;
    background: url(/public/img/arrow-right.svg);
    background-size: 100% 100%;
}
@media screen and (max-width: 1312px) {
    .index-banner-2 .button-prev,
    .index-banner-2 .button-next{
        width: 30px;
        height: 30px;
    }
    .index-banner-2{
        height: 269px;
    }
    .index-banner-2 .swiper-slide > *{
        width: 140px;
    }
    .index-banner-2 .swiper-slide > *.swiper-slide-active{
        width: 100%;
    }
    .index-banner-2 .swiper-slide{
        width: calc(100% - 140px - 140px);
    }
    .index-banner-2 .swiper-slide > * > .text h2{
        font-size: 25px;
    }
    .index-banner-2 .swiper-slide:not(.swiper-slide-active) > * > .text{
        opacity: 0;
    }
    .index-banner-2 .swiper-slide > * > .text{
        padding: 25px;
    }

    .index-banner-2 .swiper-slide > *{
        margin-left: calc(100% - 140px);
        margin-right: 0px;
    }
    .index-banner-2 .swiper-slide.swiper-slide-active > *{
        margin-left: 0px;
        margin-right: 0px;
    }
    .index-banner-2 .swiper-slide.swiper-slide-active ~ .swiper-slide > *{
        margin-right: calc(100% - 140px);
        margin-left: 0px;
    }

}
@media screen and (max-width: 720px) {
    .index-banner-2 .button-prev,
    .index-banner-2 .button-next{
        width: 25px;
        height: 25px;
    }
    .index-banner-2 .button-prev,
    .index-banner-2 .button-next{
        display: none;
    }
    .index-banner-2{
        height: 170px;
    }
    .index-banner-2 .swiper-slide > *{
        width: 100%;
    }
    .index-banner-2 .swiper-slide:not(.swiper-slide-active) > * > .text{
        opacity: 1;
    }
    .index-banner-2 .swiper-slide > * > .text h2{
        font-size: 14px;
    }
    .index-banner-2 .swiper-slide > * > .text span{
        font-size: 8px;
    }
    .index-banner-2 .swiper-slide > *{
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
    .index-banner-2 .swiper-slide > * > .text{
        padding: 15px;
    }
}

.index-links{
    height: 150px;
}
.index-links .swiper-slide{
    height: 150px;
    width: 246px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}
.index-links .swiper-slide > img{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.index-links .swiper-slide span{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: var(--padding);
    box-sizing: border-box;
    width: 100%;
    font-size: 17px;
    font-weight: bold;
}
.index-links .swiper-slide h2{
    position: absolute;
    top: 50%;
    left: 50%;
    padding: var(--padding);
    box-sizing: border-box;
    text-align: center;
    transform: translate(-50%, -50%);
    
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
}
.index-links .swiper-slide .grey{
    color: var(--grey);
}
@media screen and (max-width: 1312px) {
    .index-links .swiper-slide,
    .index-links{
        height: 85px;
    }
    .index-links .swiper-slide span{
        font-size: 10px;
        padding: 8.66px;
    }
    .index-links .swiper-slide h2{
        font-size: 18.5px;
        padding: 8.66px;
    }
}
@media screen and (max-width: 720px) {
    .index-links .swiper-slide,
    .index-links{
        height: 69px;
    }
    .index-links .swiper-slide{
        width: 110px;
    }
}

.default-container{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    box-sizing: border-box;
}

.block-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    padding: var(--padding);
    gap: var(--gap);
    border-radius: var(--radius) var(--radius) 0px 0px;
}
@media screen and (min-width: 1312px) {
    *:not(.default-container) > .block-header{
        padding: 0px;
        padding-bottom: var(--padding);
    }
}
@media screen and (min-width: 720px) and (max-width: 1312px) {
    *:not(.default-container):not(.tablet) > .block-header{
        padding: 0px;
        padding-bottom: var(--padding);
    }
}
@media screen and (max-width: 720px) {
    *:not(.default-container):not(.mobile) > .block-header{
        padding: 0px;
        padding-bottom: var(--padding);
    }
}
.block-header > .block-link{
    opacity: 0.5;
    cursor: pointer;
    text-decoration: underline;
}
.block-header.underline{
    box-sizing: border-box;
}
.block-header:not(.underline).purple{
    background-color: var(--purple);
}
.block-header:not(.underline).yellow{
    background-color: var(--yellow);
    color: var(--grey);
}
.block-header:not(.underline).green{
    background-color: var(--green);
    color: var(--grey);
}
.block-header:not(.underline).blue{
    background-color: var(--blue);
    color: var(--grey);
}
@media screen and (min-width: 1312px) {
    .block-header.underline.purple{
        background-color: var(--purple);
    }
    .block-header.underline.yellow{
        background-color: var(--yellow);
        color: var(--grey);
    }
    .block-header.underline.green{
        background-color: var(--green);
        color: var(--grey);
    }
    .block-header.underline.blue{
        background-color: var(--blue);
        color: var(--grey);
    }
    
    .block-header.yellow .block-title.arrow::after,
    .block-header.green .block-title.arrow::after,
    .block-header.blue .block-title.arrow::after{
        filter: brightness(0.15);
    }
}
.block-header .block-title{
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
}
.block-header .sub-title{
    opacity: 0.5;
    margin-right: auto;
    line-height: 1em;
}
@media screen and (max-width: 1312px) {
    .block-header .sub-title{
        font-size: 10px;
    }
}
.block-header .arrows{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.block-header .arrows > a.disabled,
.block-header .arrows > a.swiper-button-disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.block-header .arrows > a{
    display: block;
    cursor: pointer;
    width: 25px;
    height: 25px;
    background: url(/public/img/arrow-left.svg);
    background-size: 100% 100%;
    transition: var(--transition);
}
.block-header .arrows > a:nth-child(2){
    background: url(/public/img/arrow-right.svg);
    background-size: 100% 100%;
}
.block-header .block-title.arrow{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
    cursor: pointer;
}
.block-header .block-title.arrow::after{
    content: "";
    display: block;
    height: 12px;
    width: 6px;
    background: url(/public/img/title_arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.default-container{
    padding: var(--padding);
    background: var(--grey);
    border-radius: var(--radius);
}
.default-container.no-padding{
    padding: 0px;
}
.default-container.no-padding > .block-header.underline{
    margin-top: 0px;
    transform: unset;
    padding-bottom: var(--padding);
    width: 100%;
}
.default-container .block-header.underline{
    transform: translateX(calc(var(--padding) * -1));
    margin-top: calc(var(--padding) * -1);
    width: calc(100% + var(--padding) + var(--padding));
    padding: var(--padding);
    border-bottom: 2px solid var(--light-grey);
}
.default-container .block-header.yellow,
.default-container .block-header.purple,
.default-container .block-header.green,
.default-container .block-header.blue{
    padding-bottom: var(--padding);
}
.default-container .block-header{
    padding-bottom: 0px;
}

@media screen and (max-width: 1312px) {
    .default-container:not(.tablet){
        padding: 0px;
        background: unset;
        border-radius: 0px;
    }
    .default-container:not(.tablet) .block-header.underline{
        transform: unset;
        margin-top: 0px;
        width: 100%;
        padding: 0px;
        border-bottom: unset;
    }
}
@media screen and (max-width:720px) {
    .default-container:not(.mobile){
        padding: 0px;
        background: unset;
        border-radius: 0px;
    }
    .default-container:not(.mobile) .block-header.underline{
        transform: unset;
        margin-top: 0px;
        width: 100%;
        padding: 0px;
        border-bottom: unset;
    }
}
.tournament-grid{
    width: 100%;
    overflow: auto;
}
.tournament-grid > div{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 31px 45px;
    box-sizing: border-box;
    background-image: url(/public/img/tournament-grid--bg.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: var(--radius);
    box-sizing: border-box;
    width: 1272px;
}
.tournament-grid > div > div{
    width: 100%;
}
.tournament-grid > div > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.tournament-grid > div > div:nth-child(1) > span{
    display: block;
    text-align: center;
    font-family: "Codec Pro";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    width: 149px;
}
.tournament-grid > div > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
}
.tournament-grid > div > div:nth-child(2) .finale{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tournament-grid > div > div:nth-child(2) .finale > div::before{
    content: "финал";
    display: block;
    text-align: center;
    position: absolute;
    bottom: calc(100% + 15px);
    font-family: "Codec Pro";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 100%;
    line-height: 20px;
}
.tournament-grid > div > div:nth-child(2) > div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 30px;
    height: 566px;
}
.tournament-grid > div > div:nth-child(2) > div > div{
    border-radius: var(--radius);
    background: var(--grey);
    border: 2px solid var(--light-grey);
    padding: 3px;
    display: flex;
    display: grid;
    grid-template-rows: repeat(2, 52px);
    gap: 5px;
    position: relative;
    width: 149px;
    box-sizing: border-box;
}
.tournament-grid > div > div:nth-child(2) > div > div .sub-score{
    position: absolute;
    top: 50%;
    right: calc(5px + 5px + 32px + 5px);
    transform: translateY(-50%);
    background: var(--grey);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    gap: 5px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
}
.tournament-grid > div > div:nth-child(2) > div > div .sub-score > div:nth-child(2){
    width: 7px;
    height: 2px;
    border-radius: 20px;
    background: var(--light-grey);
}
.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--light-grey);
    padding: 10px;
    border-radius: var(--radius);
}
.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2) > div{
    display: grid;
    grid-template-columns: 25px 48px;
    gap: 10px;
}
.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2) > div img{
    width: 25px;
    height: 25px;
    object-fit: contain;
    object-position: center;
}
.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2) > div span{
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}
.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2) > span{
    border-radius: var(--radius);
    background: var(--grey);
    width: 31px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Codec Pro";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
}
.tournament-grid > div > div:nth-child(2) > div > div.empty::after{
    content: "";
    display: block;
    width: 76px;
    height: 85px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tournament-grid > div > div:nth-child(2) > div.o8 > div:nth-child(odd):not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    height: 144px;
    width: 19px;
    background: url(/public/img/tournament-grid--fork-1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
}
.tournament-grid > div > div:nth-child(2) > div.o8:nth-child(1) > div:nth-child(odd):not(:last-child)::after{
    left: calc(100% + 20px);
}
.tournament-grid > div > div:nth-child(2) > div.o8:nth-child(7) > div:nth-child(odd):not(:last-child)::after{
    right: calc(100% + 20px);
    transform: rotate(180deg);
}

.tournament-grid > div > div:nth-child(2) > div.o4 > div:nth-child(odd):not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    height: 293px;
    width: 19px;
    background: url(/public/img/tournament-grid--fork-2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
}
.tournament-grid > div > div:nth-child(2) > div.o4:nth-child(2) > div:nth-child(odd):not(:last-child)::after{
    left: calc(100% + 20px);
}
.tournament-grid > div > div:nth-child(2) > div.o4:nth-child(6) > div:nth-child(odd):not(:last-child)::after{
    right: calc(100% + 20px);
    transform: rotate(180deg);
}

.tournament-grid > div > div:nth-child(2) > div.finale > div::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    height: 19px;
    width: 340px;
    background: url(/public/img/tournament-grid--fork-3.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
}

.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2) > span.active{
    background: var(--orange);
}
.tournament-grid > div > div:nth-child(2) > div > div > div:nth-child(-n + 2).active{
    background: var(--orange);
}
.tournament-grid > div > div:nth-child(2) > div > div.active{
    border-color: var(--orange);
}

.tournament-grid.x7 > div > div:nth-child(2) > div > div > div:nth-child(-n + 2) > span.active{
    background: var(--purple);
}
.tournament-grid.x7 > div > div:nth-child(2) > div > div > div:nth-child(-n + 2).active{
    background: var(--purple);
}
.tournament-grid.x7 > div > div:nth-child(2) > div > div.active{
    border-color: var(--purple);
}
.tournament-grid.x7 > div{
    background-image: url(/public/img/tournament-grid--bg-7x7.svg);
}
.tournament-grid.x7 > div > div:nth-child(2) > div.o8 > div:nth-child(odd):not(:last-child)::after,
.tournament-grid.x7 > div > div:nth-child(2) > div.o4 > div:nth-child(odd):not(:last-child)::after,
.tournament-grid.x7 > div > div:nth-child(2) > div.finale > div::after{
    filter: brightness(3);
}
.tournament-grid.x7 > div > div:nth-child(2) > div > div.empty{
    border: 2px solid var(--grey);
    background: var(--light-grey);
}

@media screen and (max-width: 1312px) {
    .tournament-grid{
        border-radius: var(--radius);
        border: 10px solid var(--light-grey);
        box-sizing: border-box;
    }
    .tournament-grid > div{
        padding: 21px 35px;
    }
}
@media screen and (max-width: 720px) {
    .tournament-grid{
        border: 5px solid var(--light-grey);
    }
}

.grid-2-1{
    display: grid;
    grid-template-columns: calc(100% - 444px - var(--gap)) 444px;
    gap: var(--gap);
}

.index--best-players{
    width: 100%;
}
@media screen and (min-width: 720px) {
    .index--best-players > div > div.hidden{
        display: none;
    }
}
.index--best-players > div > div{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.index--best-players > div > div > span{
    font-size: 20px;
    font-weight: 500;
    opacity: 0.5;
}
.index--best-players > div > div > *:nth-child(2){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--light-grey);
    border-radius: var(--radius);
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(1){
    width: 100%;
    height: 276px;
    position: relative;
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) > .player-img{
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    background-color: var(--orange);
    background-image: url(/public/img/peak-bg.svg);
    background-size: cover;
    object-fit: contain;
    object-position: center bottom;
}


.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) > .player-img.purple{
    background-color: var(--purple);
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) > .player-img.yellow{
    background-color: var(--yellow);
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) > .player-img.green{
    background-color: var(--green);
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) > .player-img.blue{
    background-color: var(--blue);
}


.index--best-players > div > div > *:nth-child(3) > *.orange{
    background: var(--orange);
}
.index--best-players > div > div > *:nth-child(3) > *.purple{
    background: var(--purple);
}
.index--best-players > div > div > *:nth-child(3) > *.yellow{
    background: var(--yellow);
    color: var(--grey);
}
.index--best-players > div > div > *:nth-child(3) > *.green{
    background: var(--green);
    color: var(--grey);
}
.index--best-players > div > div > *:nth-child(3) > *.blue{
    background: var(--blue);
    color: var(--grey);
}


.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) .club{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(1) span{
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 5px 10px;
    border-radius: 0px var(--radius) 0px var(--radius);
    background: var(--light-grey);
    text-align: center;
    font-family: "Codec Pro";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
.index--best-players > div > div > *:nth-child(2) > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    
    font-family: "Codec Pro";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
.index--best-players > div > div > *:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.index--best-players > div > div > *:nth-child(3) > *{
    display: grid;
    grid-template-columns: 20px 1fr 50px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--light-grey);

    position: relative;
    min-height: 46.4px;
    box-sizing: border-box;
}
.index--best-players > div > div > *:nth-child(3) > * *:nth-child(1){
    text-align: center;
}
.index--best-players > div > div > *:nth-child(3) > * *:nth-child(3){
    text-align: end;
}
.index--best-players > div > div > *:nth-child(3) > *.empty::before{
    content: "";
    display: block;
    width: 26px;
    height: 29px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.index--match-review{
    height: 692px;
    width: 100%;
}
.index--match-review > div > *{
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--light-grey);
    position: relative;
    height: 316px;
}
.index--match-review > div > * > *:nth-child(1){
    position: relative;
    height: 203px;
    overflow: hidden;
}
.index--match-review > div > * > *:nth-child(1) img.preview{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.index--match-review > div > * > *:nth-child(1) img.play{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
}
.index--match-review > div > * > *:nth-child(1) span{
    padding: 5px 10px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--grey);

    position: absolute;
    top: 10px;
    right: calc(10px + 35px + 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 35px;
    box-sizing: border-box;
}
.index--match-review > div > * > *:nth-child(2){
    padding: 19px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.index--match-review > div > * > *:nth-child(2) span{
    opacity: 0.5;
    font-size: 12px;
}
.index--match-review > div > * > *:nth-child(2) h2{
    font-weight: 500;
    font-family: "ALS Unios";
    font-size: 20px;
    display: -webkit-box; /* Required for -webkit-line-clamp */
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
    overflow: hidden; /* Hides overflowing content */
    text-overflow: ellipsis; /* Ensures ellipsis is displayed */
}
.index--match-review > div > *.empty::before{
    content: "";
    display: block;
    width: 150px;
    height: 168px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (min-width: 1312px){
    .index--match-review > div > *.hidden{
        display: none;
    }
}

@media screen and (max-width: 1312px) {
    .grid-2-1{
        display: flex;
        flex-direction: column-reverse;
    }
    .index--match-review{
        height: 199px;
    }
    .index--match-review > div > *{
        width: 230px;
        min-width: 230px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 199px;
    }
    .index--match-review > div > * > *:nth-child(1){
        height: 134px;
    }
    .index--match-review > div > * > *:nth-child(1) img.play{
        width: 20px;
        height: 20px;
    }
    .index--match-review > div > * > *:nth-child(1) span{
        height: 20px;
        font-size: 10px;
        border-radius: 5px;
        right: calc(10px + 20px + 10px);
    }
    .index--match-review > div > * > *:nth-child(2) h2{
        font-size: 12px;
    }
    .index--match-review > div > * > *:nth-child(2) span{
        font-size: 8px;
    }
    .index--match-review > div > * > *:nth-child(2){
        padding: 10px;
    }
    .index--match-review > div > *.empty::before{
        width: 90px;
    }

    .index--best-players{
        padding: var(--padding);
        border-radius: var(--radius);
        background: var(--grey);
        box-sizing: border-box;
    }
    .index--best-players > div > div > span{
        font-size: 12px;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(1){
        height: 245px;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(1) span{
        font-size: 17px;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(1) .club{
        width: 35px;
        height: 35px;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(2){
        font-size: 13.75px;
    }
    .index--best-players > div > div > *:nth-child(3) > *{
        font-size: 10px;
        min-height: 32px;
    }
    .index--best-players > div > div > *:nth-child(3) > *.empty::before{
        width: 17px;
    }
}
@media screen and (max-width: 720px) {
    .index--best-players{
        display: flex;
        flex-direction: row;
        overflow: auto;
        background: none;
        padding: unset;
        border-radius: unset;
        scroll-snap-type: x mandatory;
    }
    .index--best-players > div > div{
        width: 218px;
        min-width: 218px;
        
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(1){
        height: 214px;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(2){
        font-size: 12px;
    }
    .index--best-players > div > div > *:nth-child(2) > *:nth-child(1) span{
        font-size: 15px;
    }
    .index--best-players > div > div > *:nth-child(3) > *:not(:nth-child(-n + 3)){
        display: none;
    }

    .index--best-players{
        max-width: calc(100vw - 20px);
        width: 100vw;
        transform: translateX(-50%);
        position: relative;
        left: 50%;
    }
    .index--best-players > *{
        scroll-snap-align: center;
    }
    
    .index--match-review{
        max-width: calc(100vw - 20px);
        width: 100vw;
        transform: translateX(-50%);
        position: relative;
        left: 50%;
    }
    .index--match-review > div > *{
        scroll-snap-align: center;
    }
}

.latest-goals{
    width: 100%;
}
.latest-goals > div > *{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 364px;
    position: relative;
    border: 2px solid var(--light-grey);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}
.latest-goals > div > * > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.latest-goals > div > * > *:nth-child(2){
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg,#000000ff 0%, #00000000 100%);
    text-align: center;
    padding: 15px;
    box-sizing: border-box;

    font-family: "Codec Pro";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
.latest-goals > div > * > *:nth-child(3){
    position: absolute;
    bottom: 15px;
    left: 50%;
    max-width: calc(100% - 30px);
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    transform: translateX(-50%);
    background: var(--grey);
    border-radius: var(--radius);
}
.latest-goals > div > * > *:nth-child(3) span{
    font-size: 16px;
    font-weight: 900;
    width: 72px;
    text-align: center;
}
.latest-goals > div > * > *:nth-child(3) img{
    width: 45px;
    height: 45px;
    object-fit: contain;
    object-position: center;
}
.latest-goals > div > *.empty::before{
    content: "";
    display: block;
    width: 123px;
    height: 138px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (min-width: 1312px){
    .latest-goals > div > *.hidden{
        display: none;
    }
}

@media screen and (max-width: 1312px) {
    .latest-goals > div > *{
        height: 254px;
        width: 172.5px;
        min-width: 172.5px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .latest-goals > div > * > *:nth-child(2){
        padding: 10px;
        font-size: 12.69px;
    }
    .latest-goals > div > * > *:nth-child(3){
        bottom: 13px;
        max-width: calc(100% - 20px);
        border-radius: 10px;
    }
    .latest-goals > div > * > *:nth-child(3) img{
        width: 30px;
        height: 30px;
    }
    .latest-goals > div > * > *:nth-child(3) span{
        font-size: 10px;
    }
}
@media screen and (max-width: 720px) {
    .latest-goals > div{
        max-width: calc(100vw - 20px);
    }
    .latest-goals > div > *{
        scroll-snap-align: center;
    }
}

.partners{
    width: 100%;
    height: 137px;
    padding: 0px var(--padding);
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 40px calc(100% - 80px - var(--gap) - var(--gap) - 4px) 40px;
    gap: var(--gap);
}
.partners .button-next{
    transform: rotate(180deg);
}
.partners .button-next,
.partners .button-prev{
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius);
    overflow: hidden;
}
.partners .button-next.swiper-button-disabled,
.partners .button-prev.swiper-button-disabled{
    opacity: 0.5;
}
.partners .swiper{
    width: 100%;
}
.partners .swiper-slide{
    width: 425px;
    border-radius: var(--radius);
    overflow: hidden;
}
.partners .swiper .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.partners .swiper .swiper-slide img:nth-child(2){
    display: none;
}
@media screen and (max-width: 720px) {
    .partners .swiper .swiper-slide img:nth-child(2){
        display: block;
    }
    .partners .swiper .swiper-slide img:nth-child(1):not(:last-child){
        display: none;
    }
    .partners .swiper .swiper-slide.placeholder:nth-child(n + 3){
        display: none;
    }
    .partners .swiper .swiper-slide:not(.placeholder) + .swiper-slide.placeholder:nth-child(even){
        display: block;
    }
}

@media screen and (max-width: 1312px) {
    .partners{
        width: 100%;
        max-width: 720px;
        grid-template-columns: 1fr;
        padding: 0px;
        height: auto;
    }
    .partners .button-next, .partners .button-prev{
        display: none;
    }
    .partners .swiper .swiper-wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        transform: none!important;
    }
    .partners .swiper .swiper-wrapper .swiper-slide{
        height: 107px;
        width: 100%;
        margin: 0px!important;
    }
}
@media screen and (max-width: 720px) {
    .partners{
        max-width: calc(100vw - 20px);
    }
    .partners .swiper .swiper-wrapper .swiper-slide{
        height: calc((100vw - 30px) / 2 / 170 * 77);
    }
}
@media screen and (min-width: 720px) {
    .partners .block-header{
        display: none;
    }
}


.streams{
    width: 100%;
    height: 137px;
    padding: 0px var(--padding);
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 40px calc(100% - 80px - var(--gap) - var(--gap) - 4px) 40px;
    gap: var(--gap);
}
.streams .button-next{
    transform: rotate(180deg);
}
.streams .button-next,
.streams .button-prev{
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius);
    overflow: hidden;
}
.streams .button-next.swiper-button-disabled,
.streams .button-prev.swiper-button-disabled{
    opacity: 0.5;
}
.streams .swiper{
    width: 100%;
}
.streams .swiper-slide{
    width: 348px;
    border-radius: var(--radius);
    background: var(--grey);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding);
    box-sizing: border-box;
    position: relative;
}
.streams .swiper .swiper-slide p{
    margin: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.streams .swiper .swiper-slide p:nth-child(1){
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}
.streams .swiper .swiper-slide p:nth-child(1) > span:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.streams .swiper .swiper-slide p:nth-child(1) > span:nth-child(1)::before{
    content: "";
    display: block;
    height: 1em;
    width: 1em;
    border-radius: 100px;
}
.streams .swiper .swiper-slide.live p:nth-child(1) > span:nth-child(1)::before{
    background: var(--red);
}
.streams .swiper .swiper-slide.ended p:nth-child(1) > span:nth-child(1)::before{
    background: var(--light-grey);
}
.streams .swiper .swiper-slide.scheduled p:nth-child(1) > span:nth-child(1)::before{
    background: var(--orange);
}
.streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    text-transform: uppercase;
}
.streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong{
    font-weight: 500;
}
@media screen and (min-width: 1312px) {
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong:nth-child(2){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong:nth-child(3){
        display: none;
    }
}
.streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) img{
    height: 31px;
    width: 31px;
    object-fit: contain;
    object-position: center;
}
.streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(2){
    font-weight: 900;
    font-size: 25px;
    text-transform: uppercase;
    margin-left: auto;
}
.streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(3){
    font-size: 20px;
    opacity: 0.5;
}
.streams .swiper .swiper-slide.empty::before{
    content: "";
    display: block;
    width: 80px;
    height: 89px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 1312px){
    .streams .swiper .swiper-slide p:nth-child(4){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .streams{
        width: 100%;
        grid-template-columns: 1fr;
        height: auto;
    }
    .streams .button-next, .streams .button-prev{
        display: none;
    }
    .streams .swiper .swiper-slide{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        row-gap: 10px;
        width: 171px;
    }
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) img{
        width: 30px;
        height: 30px;
    }
    .streams .swiper .swiper-slide p:nth-child(1){
        font-size: 8px;
    }

    .streams .swiper .swiper-slide > p:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
    .streams .swiper .swiper-slide > p:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .streams .swiper .swiper-slide > p:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
    .streams .swiper .swiper-slide > p:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
    
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3){
        align-items: center;
        justify-content: center;
    }
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1){
        flex-direction: column;
        font-size: 12px;
    }
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(2),
    .streams .swiper .swiper-slide p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(3){
        display: none;
    }
    .streams .swiper .swiper-slide p:nth-child(4){
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .streams .swiper .swiper-slide p:nth-child(4) span:nth-child(1){
        font-size: 15px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .streams .swiper .swiper-slide p:nth-child(4) span:nth-child(2){
        font-size: 8px;
        text-transform: uppercase;
        opacity: 0.5;
    }
}

.advbanner{
    height: min-content;
}
.advbanner > img{
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 2px solid var(--grey);
    overflow: hidden;
}
.match--main-info{
    padding: 0px;
}
.match--main-info .block-header.underline{
    transform: unset;
    width: 100%;
    margin-top: 0px;
}
.match--main-info > .block-header{
    min-height: 84px;
}
.match--main-info > .block-header > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.match--main-info > .block-header > *:nth-child(2) img{
    height: 22px;
    width: auto;
}
.match--main-info > .block-header > *:nth-child(2),
.match--main-info > .block-header > *:nth-child(3){
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
}
.match--main-info > .block-header > *{
    max-width: 30%;
}
.match--main-info > .score{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 20px;
    border-radius: var(--radius);
    background-color: var(--dark-grey);
    background-image: url(/public/img/peak-bg-2.svg);
    background-size: 50% auto;
    background-position: center center;
    padding: 30px;
    box-sizing: border-box;
}
.match--main-info > .score > *:nth-child(odd){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: start;
}
.match--main-info > .score > *:nth-child(odd) > *:nth-child(1){
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--grey);
    border-radius: var(--radius);
}
.match--main-info > .score > *:nth-child(odd) > *:nth-child(1) img{
    width: 64%;
    height: 64%;
    object-fit: contain;
    object-position: center;
}
.match--main-info > .score > *:nth-child(odd).winner > *:nth-child(1){
    background: var(--orange);
}
.match--main-info.x7 > .score > *:nth-child(odd).winner > *:nth-child(1){
    background: white;
}
.match--main-info.x7 > .score > *:nth-child(odd).winner > *:nth-child(1) img{
    filter: invert(1);
}
.match--main-info > .score > *:nth-child(odd) > *:nth-child(2){
    font-size: 25px;
    font-weight: 500;
    text-align: center;
}
.match--main-info > .score > *:nth-child(even){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: start;
}
.match--main-info > .score > *:nth-child(even) .score,
.match--main-info > .score > *:nth-child(even) .sub-score{
    font-size: 100px;
    font-weight: 900;
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    gap: 10px;
}
.match--main-info > .score > *:nth-child(even) .sub-score{
    font-size: 40px;
    font-weight: 400;
    opacity: 0.5;
}
.match--main-info > .score > *:nth-child(even) .score > *:nth-child(1),
.match--main-info > .score > *:nth-child(even) .sub-score > *:nth-child(1){
    text-align: end;
}
.match--main-info > .score > *:nth-child(even) .score > *:nth-child(2),
.match--main-info > .score > *:nth-child(even) .sub-score > *:nth-child(2){
    text-align: center;
}
.match--main-info > .score > *:nth-child(even) .location{
    text-align: center;
}
.match--main-info > .score > *:nth-child(even) .location img{
    height: 22px;
    width: auto;
    display: inline-block;
}
@media screen and (min-width: 720px) {
    .match--main-info > .score > *:nth-child(even) .location{
        display: none;
    }
}

.spoiler{
    height: auto;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.spoiler .spoiler--head{
    padding: var(--padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.spoiler .spoiler--head > div:last-child{
    height: 25px;
    width: 25px;
    background-image: url(/public/img/spoiler_arrow.svg);
    background-size: 100% 100%;
    transition: var(--transition);
    margin-left: auto;
}
.spoiler.active .spoiler--head > div:last-child{
    background-image: url(/public/img/spoiler_arrow_orange.svg);
}
.spoiler .spoiler--body{
    max-height: 10000px;
    transition: var(--transition);
    overflow: hidden;
}
.spoiler:not(.active) .spoiler--head:not(.active) + .spoiler--body{
    max-height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.match--judges-spoiler,
.match--events-spoiler{
    border-top: 2px solid var(--light-grey);
}
.match--judges-spoiler .spoiler--body{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.match--judges-spoiler .spoiler--body > *{
    border-bottom: 2px solid var(--light-grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding);
    box-sizing: border-box;
}
.match--judges-spoiler .spoiler--body > *:nth-child(1),
.match--judges-spoiler .spoiler--body > *:nth-child(2){
    border-top: 2px solid var(--light-grey);
}
.match--judges-spoiler .spoiler--body > *:nth-last-child(1),
.match--judges-spoiler .spoiler--body > *:nth-last-child(2):nth-child(odd){
    border-bottom: unset;
}
.match--judges-spoiler .spoiler--body > *:nth-child(odd){
    border-right: 2px solid var(--light-grey);
}
.match--judges-spoiler .spoiler--body > * > span:nth-child(1){
    opacity: 0.5;
}
.match--judges-spoiler .spoiler--body > * > span:nth-child(2){
    font-weight: 500;
}
.match--main-info .spoiler + .spoiler{
    margin-top: calc(var(--gap) * -1);
}

.match--events-spoiler .spoiler--body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: var(--padding);
    box-sizing: border-box;
    max-height: 100000px;
}
.match--events-spoiler .spoiler--body > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.match--events-spoiler .spoiler--body > div:nth-child(1){
    padding-right: var(--padding);
    border-right: 1px solid var(--light-grey);
}
.match--events-spoiler .spoiler--body > div:nth-child(2){
    padding-left: var(--padding);
    border-left: 1px solid var(--light-grey);
}
.match--events-spoiler .spoiler--body > div .goal,
.match--events-spoiler .spoiler--body > div .pass,
.match--events-spoiler .spoiler--body > div .yellow-card,
.match--events-spoiler .spoiler--body > div .red-card,
.match--events-spoiler .spoiler--body > div .autogoal{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--light-grey);

    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}
.match--events-spoiler .spoiler--body > div .goal::before,
.match--events-spoiler .spoiler--body > div .pass::before,
.match--events-spoiler .spoiler--body > div .yellow-card::before,
.match--events-spoiler .spoiler--body > div .red-card::before,
.match--events-spoiler .spoiler--body > div .autogoal::before{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url(/public/img/events_goal.svg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
.match--events-spoiler .spoiler--body > div .pass::before{
    background-image: url(/public/img/events_pass.svg);
    width: 20px;
}
.match--events-spoiler .spoiler--body > div .yellow-card::before{
    background-image: url(/public/img/events_yellowcard.svg);
}
.match--events-spoiler .spoiler--body > div .red-card::before{
    background-image: url(/public/img/events_redcard.svg);
}
.match--events-spoiler .spoiler--body > div .autogoal::before{
    background-image: url(/public/img/events_autogoal.svg);
}
.match--events-spoiler .spoiler--body > div .group{
    display: grid;
    grid-template-columns: 1fr 22px 1fr;
    gap: 10px;
    align-items: center;
}
.match--events-spoiler .spoiler--body > div .group > *:nth-child(2){
    order: 2;
}
.match--events-spoiler .spoiler--body > div .group::before{
    content: "";
    display: block;
    width: 22px;
    height: 15px;
    background-image: url(/public/img/events_arrow.svg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;

    order: 1;
}

@media screen and (min-width: 1312px) {
    .match--tabs-control{
        display: none;
    }
}

.match--bets{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.match--bets > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.match--bets > div:nth-child(1) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}
.match--bets > div:nth-child(1) span{
    font-size: 20px;
    opacity: 0.5;
}
.match--bets > div:nth-child(1) > div > *:not(span){
    width: 50px;
    height: 50px;
    padding: 9px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--light-grey);
    border-radius: var(--radius);
}
.match--bets > div:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.match--bets > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.match--bets > div:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;

    height: 55px;
    min-width: 4%;
    font-size: 20px;

    transition: var(--transition);
}
.match--bets > div:nth-child(2) > *:nth-child(odd){
    background-color: var(--orange);
}
.match--bets.purple > div:nth-child(2) > *:nth-child(odd){
    background-color: var(--purple);
}
.match--bets.green > div:nth-child(2) > *:nth-child(odd){
    background-color: var(--green);
    color: var(--grey);
}
.match--bets.yellow > div:nth-child(2) > *:nth-child(odd){
    background-color: var(--yellow);
    color: var(--grey);
}
.match--bets.blue > div:nth-child(2) > *:nth-child(odd){
    background-color: var(--blue);
    color: var(--grey);
}

@media screen and (min-width: 1312px) {
    .x7#match--bets .block-header,
    .x7#match--bets .match--bets > div:nth-child(2) > *:nth-child(odd){
        background-color: var(--yellow);
        color: var(--grey);
    }
}
@media screen and (max-width: 1312px) {
    .x7#match--bets .match--bets > div:nth-child(2) > *:nth-child(odd){
        background-color: var(--purple);
    }
}

.match--bets > div:nth-child(2) > *:nth-child(even){
    background-color: white;
    color: var(--grey);
}
.match--bets > div:nth-child(2) > *:nth-child(1){
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}
.match--bets > div:nth-child(2) > *:nth-child(3){
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.match--teams{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--gap);
}
.match--teams > div{
    background: var(--grey);
    border-radius: var(--radius);
    overflow: hidden;
}
.match--teams > div > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding);
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
    box-sizing: border-box;
}
.match--teams > div.orange > div:nth-child(1){
    background: var(--orange);
}
.match--teams > div.purple > div:nth-child(1){
    background: var(--purple);
}
.match--teams > div.yellow > div:nth-child(1){
    background: var(--yellow);
    color: var(--grey);
}
.match--teams > div.green > div:nth-child(1){
    background: var(--green);
    color: var(--grey);
}
.match--teams > div.blue > div:nth-child(1){
    background: var(--blue);
    color: var(--grey);
}
.match--teams > div > div:nth-child(1) > *:nth-child(2),
.match--teams > div > div:nth-child(1) > *:nth-child(2) img{
    height: 24px;
    width: auto;
    object-fit: contain;
    object-position: center;
}
.match--teams > div > div:nth-child(2),
.match--teams > div > div:nth-child(3) > *{
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 5px var(--padding);
    height: 50px;
    align-items: center;
    font-weight: 500;
}
.match--teams > div > div:nth-child(2).empty,
.match--teams > div > div:nth-child(2).placeholder{
    height: 350px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: unset;
}
.match--teams > div > div:nth-child(2).empty{
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: center center;
}
.match--teams > div > div:nth-child(2).placeholder{
    opacity: 0.5;
    font-size: 20px;
    font-weight: 400;
}
.match--teams > div > div:nth-child(2){
    background: var(--light-grey);
}
.match--teams > div > div:nth-child(3) > *:not(:first-child){
    border-top: 2px solid var(--light-grey);
}
.match--teams > div > div:nth-child(3){
    max-height: 300px;
    overflow-y: auto;
}
.match--teams > div > div:nth-child(3) > * > *:nth-child(1){
    text-align: center;
}
.match--teams > div > div:nth-child(3) > * > *:nth-child(2){
    padding: 5px 10px;
    border-radius: var(--radius);
    background: var(--light-grey);
    width: 100%;
    box-sizing: border-box;
}
.match--teams > div > div:nth-child(3) > * > *:nth-child(3),
.match--teams > div > div:nth-child(2) > *:nth-child(3){
    text-align: end;
}
.match--teams > div.orange > div:nth-child(3) > * > *:nth-child(3),
.match--teams > div > div:nth-child(3) > * > *:nth-child(3){
    color: var(--orange);
}
.match--teams > div.purple > div:nth-child(3) > * > *:nth-child(3){
    color: var(--purple);
}
.match--teams > div.yellow > div:nth-child(3) > * > *:nth-child(3){
    color: var(--yellow);
}
.match--teams > div.green > div:nth-child(3) > * > *:nth-child(3){
    color: var(--green);
}
.match--teams > div.blue > div:nth-child(3) > * > *:nth-child(3){
    color: var(--blue);
}

.match--fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.match--fields .block-header .logo{
    height: 24px;
    width: auto;
    object-fit: contain;
    object-position: center;
}
.match--fields > * > *:nth-child(2){
    margin-bottom: var(--padding);
    width: 100%;
    background-color: var(--dark-grey);
    background-image: url(/public/img/peak-bg-2.svg), url(/public/img/field.svg);
    background-position: center center, center center;
    background-repeat: repeat, no-repeat;
    background-size: auto auto, 100% auto;

    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
    height: 628px;
}
.match--fields > * > *:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}
.match--fields > * > *:nth-child(2) > * > *{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--grey);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--grey);
    width: 88px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 500;
}
.match--fields > * > *:nth-child(2) > * > * > img{
    width: 100%;
    height: 65px;
    background-image: url(/public/img/peak-bg.svg);
    background-color: var(--light-grey);
    background-size: 100% auto;
    object-fit: contain;
    object-position: center top;
}
.match--fields > * > *:nth-child(2) > * > * *:nth-child(2),
.match--fields > * > *:nth-child(2) > * > * *:nth-child(3){
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}
.match--fields > * > *:nth-child(2) > * > * *:nth-child(3){
    background: var(--light-grey);
}
.match--fields > * > *:nth-child(2) > *.centered-top > *:not(:first-child):not(:last-child),
.match--fields > * > *:nth-child(2) > *.centered-top > *:first-child:last-child{
    transform: translateY(calc(var(--gap) * -0.5));
}

.match--meetings{
    display: grid;
    grid-template-columns: 1fr 130px 1fr;
    margin-top: calc(var(--gap) * -1);
    margin-bottom: calc(var(--gap) * -1);
    transform: translateX(calc(var(--padding) * -1));
    width: calc(100% + var(--padding) + var(--padding));
}

.match--meetings > *:nth-child(-n + 3){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.match--meetings > *:nth-child(3){
    flex-direction: row-reverse;
}
.match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(3),
.match--meetings > *:nth-child(2){
    font-size: 60px;
    font-family: "Codec Pro";
    font-weight: 900;
    font-style: italic;
}
.match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(3){
    min-width: 100px;
    text-align: center;
}
.match--meetings > *:nth-child(1) > *:nth-child(3){
    margin-left: auto;
}
.match--meetings > *:nth-child(3) > *:nth-child(3){
    margin-right: auto;
}
.match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(1){
    width: 100px;
    height: 100px;
    padding: 18px;
    box-sizing: border-box;
    background: var(--light-grey);
    border-radius: var(--radius);
}
.match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(2){
    font-size: 25px;
    font-weight: 500;
}
.match--meetings > *:nth-child(-n + 3){
    border-bottom: 2px solid var(--light-grey);
}
.match--meetings > *:nth-child(2),
.match--meetings > *:nth-child(5){
    border-left: 2px solid var(--light-grey);
    border-right: 2px solid var(--light-grey);
}
.match--meetings > *{
    padding: var(--padding);
    box-sizing: border-box;
}
.match--meetings > *:nth-last-child(-n + 3){
    font-size: 20px;
    opacity: 0.5;
}
.match--meetings > *:nth-child(5){
    text-align: center;
}
.match--meetings > *:nth-child(6){
    text-align: end;
}

.streams.match--streams{
    padding: 0px;
    grid-template-columns: 1fr;
}
.streams.match--streams .button-next,
.streams.match--streams .button-prev{
    display: none;
}
.streams.match--streams .swiper-slide{
    width: 313px;
}

.x7#latest-goals .block-header,
.x7#latest-goals .latest-goals > div > * > *:nth-child(3){
    background-color: var(--blue);
    color: var(--grey);
}
@media screen and (max-width: 1312px) {
    .match--tabs-control{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        align-items: center;
        gap: var(--gap)
    }
    .match--tabs-control > *{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
        background: var(--grey);
        cursor: pointer;
        font-size: 15px;
        font-weight: bold;
        padding: 10px;
        height: 100%;
        box-sizing: border-box;
        border-radius: var(--radius);

        transition: var(--transition);
    }
    .match--tabs-control > * img{
        width: auto;
        height: 30px;
        object-fit: contain;
        object-position: center;
    }
    .match--tabs-control > *.active{
        background: var(--orange);
    }
    .x7.match--tabs-control > *.active{
        background: white;
        color: var(--grey);
    }
    .x7.match--tabs-control > *.active img{
        filter: invert(1);
    }

    body:not(.tab0) .match--teams,
    body:not(.tab2) .match--teams,
    body:not(.tab0) .match--fields,
    body:not(.tab2) .match--fields{
        display: none;
    }
    body.tab0 .match--teams,
    body.tab2 .match--teams,
    body.tab0 .match--fields,
    body.tab2 .match--fields{
        display: grid;
    }
    .match--teams{
        grid-template-columns: 1fr 1fr;
    }
    .match--fields{
        grid-template-columns: 1fr;
    }
    .match--main-info > .score > *:nth-child(odd) > *:nth-child(1){
        width: 100px;
        height: 100px;
    }
    .match--main-info > .score > *:nth-child(odd) > *:nth-child(2){
        font-size: 20px;
    }
    .match--main-info > .score > *:nth-child(even) .score{
        font-size: 60px;
    }
    .match--main-info > .score > *:nth-child(even) .sub-score{
        font-size: 30px;
    }
    .match--main-info .block-header.underline{
        padding: var(--padding);
        min-height: 64px;
    }
    .block-header .block-title,
    .match--main-info > .block-header > *:nth-child(2),
    .match--main-info > .block-header > *:nth-child(3){
        font-size: 15px;
    }
    .match--main-info > .block-header > *:nth-child(2) img{
        height: 18px;
    }
    .match--events-spoiler .spoiler--body > div .group{
        grid-template-columns: 24px 1fr;
    }
    .match--events-spoiler .spoiler--body > div .group > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .match--events-spoiler .spoiler--body > div .group > *:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }
    .match--events-spoiler .spoiler--body > div .group::before {
        grid-area: 2 / 1 / 3 / 2;
        background-image: url(/public/img/events_arrow_2.svg);
        width: 24px;
        height: 24px;
    }
    .match--bets > div:nth-child(2) > *{
        min-width: 7%;
    }
    .match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(2){
        display: none;
    }
    .streams.match--streams .swiper-slide{
        width: 171px;
    }

    body.tab0 #match--bets,
    body.tab2 #match--bets,
    body.tab0 .match--bets-grid,
    body.tab2 .match--bets-grid{
        display: none;
    }
    body.tab0 .match--teams > *:nth-last-child(-n + 2){
        display: none;
    }
    body.tab2 .match--teams > *:nth-child(-n + 2){
        display: none;
    }
    body.tab0 .match--teams > *:nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
    body.tab0 .match--teams > *:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
    
    body.tab0 .match--fields > *:nth-child(2){
        display: none;
    }
    body.tab2 .match--fields > *:nth-child(1){
        display: none;
    }

    .match--fields > * > *:nth-child(2){
        height: 340px;
        background-size: auto auto, auto 120%;
    }
    .match--fields > * > *:nth-child(2) > * > * *:nth-child(2),
    .match--fields > * > *:nth-child(2) > * > * *:nth-child(3){
        font-size: 8px;
        height: 10px;
    }
    .match--fields > * > *:nth-child(2) > * > * > img{
        height: 40px;
    }
    .match--fields > * > *:nth-child(2) > * > *{
        width: 50px;
        border-radius: 5.5px;
        border-width: 1px;
    }

    body.tab0 #latest-goals,
    body.tab2 #latest-goals{
        display: none;
    }
    body.tab0 #match--meetings,
    body.tab2 #match--meetings{
        display: none;
    }
    body.tab0 .match--streams,
    body.tab2 .match--streams{
        display: none;
    }
}

@media screen and (max-width: 720px) {
    .streams.match--streams .swiper-wrapper{
        padding: 0px 10px;
    }
    .match--main-info > .score > *:nth-child(odd) > *:nth-child(1){
        width: 50px;
        height: 50px;
    }
    .match--main-info > .score > *:nth-child(even) .score{
        font-size: 25px;
    }
    .match--main-info > .score > *:nth-child(even) .sub-score{
        font-size: 15px;
    }
    .match--main-info > .block-header > *:nth-child(2){
        display: none;
    }
    .match--main-info > .block-header > *:nth-child(2), .match--main-info > .block-header > *:nth-child(3){
        font-size: 10px;
    }
    .match--main-info > .block-header > *{
        max-width: 45%;
    }
    .match--main-info > .score > *:nth-child(even) .location{
        font-size: 8px;
        gap: 5px;
    }
    .match--main-info > .score > *:nth-child(even) .location img{
        height: 13px;
        margin-right: 5px;
        transform: translateY(3px);
    }
    .match--main-info > .score > *:nth-child(odd) > *:nth-child(2){
        font-size: 10px;
    }
    .match--main-info > .score{
        margin: 0px;
        background-image: none;
        background-color: transparent;
        padding: var(--padding) calc(var(--padding) * 2);
    }
    .match--main-info > .score > *:nth-child(odd) > *:nth-child(1){
        background-color: var(--light-grey);
    }
    .match--main-info > .score > *:nth-child(1){
        align-items: start;
        text-align: start;
    }
    .match--main-info > .score > *:nth-child(3){
        align-items: end;
        text-align: end;
    }
    .match--main-info > .score > *:nth-child(even) .score, .match--main-info > .score > *:nth-child(even) .sub-score{
        grid-template-columns: 1fr 15px 1fr;
    }
    .match--main-info > .score > *:nth-child(even){
        gap: 5px;
    }
    .spoiler .spoiler--head{
        font-size: 10px;
    }
    .match--judges-spoiler .spoiler--body > * > span{
        font-size: 8px;
    }
    .match--events-spoiler .spoiler--body > div .goal,
    .match--events-spoiler .spoiler--body > div .autogoal,
    .match--events-spoiler .spoiler--body > div .pass,
    .match--events-spoiler .spoiler--body > div .yellow-card,
    .match--events-spoiler .spoiler--body > div .red-card{
        font-size: 8px;
        border-radius: 100px;
    }
    .match--events-spoiler .spoiler--body > div .goal::before,
    .match--events-spoiler .spoiler--body > div .autogoal::before,
    .match--events-spoiler .spoiler--body > div .pass::before,
    .match--events-spoiler .spoiler--body > div .yellow-card::before,
    .match--events-spoiler .spoiler--body > div .red-card::before{
        height: 10px;
        width: 10px;
    }
    .match--events-spoiler .spoiler--body > div .pass::before{
        width: 16px;
    }
    body.tab0 .match--teams,
    body.tab2 .match--teams{
        display: flex;
        flex-direction: column;

        font-size: 10px;
    }
    .match--teams > div > div:nth-child(1){
        font-size: 10px;
    }
    body.tab0 .match--teams{
        flex-direction: column-reverse;
    }
    body.tab0 .match--teams > *:nth-child(1),
    body.tab0 .match--teams > *:nth-child(2){
        grid-area: unset;
    }
    .match--teams > div > div:nth-child(1) > *:nth-child(2),
    .match--teams > div > div:nth-child(1) > *:nth-child(2) img{
        height: 12px;
        width: auto;
    }
    .match--teams > div > div:nth-child(1),
    .match--teams > div > div:nth-child(2){
        height: 30px;
    }
    .match--teams > div > div:nth-child(3) > *{
        height: 40px;
    }
    .match--bets > div:nth-child(1) span{
        font-size: 10px;
    }
    .match--bets > div:nth-child(2) > *{
        font-size: 10px;
        height: 30px;
    }
    .match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(1){
        width: 50px;
        height: 50px;
        padding: 8px;
    }
    .match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(3),
    .match--meetings > *:nth-child(2){
        font-size: 30px;
    }
    .match--meetings{
        grid-template-columns: 1fr 100px 1fr;
    }
    .match--meetings > *:nth-child(-n + 3):nth-child(odd) > *:nth-child(3){
        min-width: 50px;
    }
    .match--meetings > *:nth-child(-n + 3){
        gap: 0px;
    }
    .match--meetings > *:nth-last-child(-n + 3){
        font-size: 10px;
    }
}

.videos{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--gap);
}
.videos > *{
    height: 393px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}
.videos > * > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.videos > * p{
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    justify-content: end;

    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: var(--padding);
    box-sizing: border-box;
    
    background: linear-gradient(0deg,#000000ff 0%, #00000000 100%);
}
.videos > * p span:nth-child(1){
    opacity: 0.5;
}
.videos > * p span:nth-child(2){
    font-size: 30px;
    font-weight: 500;
}
.videos > *::before{
    content: "";
}

@media screen and (max-width: 1312px) {
    .videos > *{
        height: 214.5px;
    }
    .videos > * p span:nth-child(1){
        font-size: 10px;
    }
    .videos > * p span:nth-child(2){
        font-size: 20px;
    }
    body.tab0 .videos,
    body.tab2 .videos{
        display: none;
    }
}

@media screen and (max-width: 720px) {
    .videos{
        grid-template-columns: 1fr;
    }
    .videos > *{
        height: 214.5px;
    }
    .videos > * p span:nth-child(1){
        font-size: 10px;
    }
    .videos > * p span:nth-child(2){
        font-size: 20px;
    }
}


.popup{
    position: fixed!important;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

    z-index: 9999;
    background: #171A1Fa8;
}
.popup:not(.active){
    display: none;
}
.popup .popup-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);

    width: 800px;
    height: 450px;

    box-shadow: 0px 0px 50px 10px #000000, inset 0px 0px 100px 50px #000000;
    border-radius: 20px;
}
.popup .popup-content::after{
    content: "";
    display: none;
    width: 100px;
    height: 100px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: url(/public/img/loading.svg);
    background-position: center;
    background-size: contain;

    animation: pbl_loading 1s linear infinite;
    z-index: -1;
}
.popup.loading .popup-content::after,
.popup.loading-over .popup-content::after{
    display: block;
}
.popup.loading-over .popup-content::after{
    z-index: 99;
}
@keyframes pbl_loading {
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.popup .popup-content iframe,
.popup .popup-content video{
    width: 100%;
    height: 100%;
}
.popup .popup-content .cross{
    position: absolute;
    bottom: calc(100% + 10px);
    left: calc(100% + 10px);
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.popup .popup-content .left-arrow,
.popup .popup-content .right-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 137px;
    cursor: pointer;
    border-radius: var(--radius);
    overflow: hidden;
}
.popup .popup-content .left-arrow.disabled,
.popup .popup-content .right-arrow.disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.popup .popup-content .left-arrow img,
.popup .popup-content .right-arrow img{
    width: 100%;
    height: 100%;
}
.popup .popup-content .left-arrow{
    right: calc(100% + 10px);
}
.popup .popup-content .right-arrow{
    left: calc(100% + 10px);
    transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 1312px) {
    .popup .popup-content .cross{
        left: calc(100% - 40px);
    }
    .popup .popup-content .left-arrow,
    .popup .popup-content .right-arrow{
        top: calc(100% + 20px);
        transform: unset;

        width: 60px;
        height: 60px;
        display: none;
    }
    .popup .popup-content .left-arrow{
        left: calc(20px);
        right: unset;
    }
    .popup .popup-content .right-arrow{
        right: calc(20px);
        left: unset;
    }
}
.popup-content .video-title{
    margin: 0px;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 60px;
    font-size: 30px;
    font-weight: 900;
}
.tournament--tabs + .default-container > .block-header{
    padding-bottom: var(--gap);
}
.tournament--tabs + .default-container > .tournament--group-list,
.block-header.yellow +  .tournament--group-list,
.block-header.blue +  .tournament--group-list,
.block-header.purple +  .tournament--group-list,
.block-header.green +  .tournament--group-list{
    margin-top: calc(var(--gap) * -1);
}
.tournament--group-list{
    display: flex;
    flex-direction: column;
    /* padding-bottom: 10px; */
}
.tournament--group-list > *:nth-child(1):not(.spoiler){
    height: 50px;
}
.tournament--group-list > .spoiler .spoiler--head{
    height: 60px;
}
.tournament--group-list > *:nth-child(1):not(.spoiler),
.tournament--group-list > .spoiler .spoiler--head{
    display: grid;
    grid-template-columns: 30px 263px repeat(7, 60px) 120px 89px 1fr;
    align-items: center;
    gap: 30px;
    padding: 10px 20px;
    box-sizing: border-box;
}
.tournament--group-list.media-tour > *:nth-child(1):not(.spoiler),
.tournament--group-list.media-tour > .spoiler .spoiler--head{
    grid-template-columns: 30px 248px repeat(8, 50px) 120px 89px 1fr;
}
.tournament--group-list > *:nth-child(1):not(.spoiler) > *,
.tournament--group-list > .spoiler .spoiler--head > *{
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.tournament--group-list > *:nth-child(1):not(.spoiler) > *::after,
.tournament--group-list > .spoiler .spoiler--head > *::after{
    content: "";
    width: 2px;
    height: 100%;
    display: block;
    border-radius: 10px;
    background-color: #ffffff;
    opacity: 0.2;
    position: absolute;
    top: 0px;
    left: calc(100% + 14px);
}
.tournament--group-list > *:nth-child(1):not(.spoiler) > *:nth-child(2){
    justify-content: start;
}
.tournament--group-list > .spoiler .spoiler--head > *:nth-child(1):after,
.tournament--group-list > .spoiler .spoiler--head > *:nth-last-child(1):after,
.tournament--group-list > .spoiler .spoiler--head > *:nth-last-child(2):after,
.tournament--group-list > *:nth-child(1):not(.spoiler) > *:nth-last-child(1):after{
    content: unset;
}
.tournament--group-list > *:nth-child(1):not(.spoiler){
    font-weight: 500;
    background-color: var(--light-grey);
}
.tournament--group-list > .spoiler .spoiler--head{
    font-weight: 500;
}
.tournament--group-list > .spoiler .spoiler--head > *:nth-child(2),
.tournament--group-list > .spoiler .spoiler--head > *:nth-last-child(2){
    width: 100%;
    border-radius: var(--radius);
    background-color: var(--light-grey);
    justify-content: start;
    gap: 5px;
    box-sizing: border-box;
    padding: 0px 5px;
}
.tournament--group-list > .spoiler .spoiler--head > *:nth-last-child(2){
    font-size: 14px;
}
.tournament--group-list > .spoiler .spoiler--head > *:nth-child(2){
    width: calc(100% + 15px);
    transform: translateX(-15px);
}
.tournament--group-list > .spoiler .spoiler--head > *:nth-child(2) > *:not(img){
    width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.tournament--group-list > .spoiler .spoiler--head > *:last-child{
    margin-right: auto;
}
.tournament--group-list:not(.media-tour) > .spoiler .spoiler--head > *:nth-child(10),
.tournament--group-list.media-tour > .spoiler .spoiler--head > *:nth-child(11){
    gap: 5px;
    justify-content: center;
}
.tournament--group-list:not(.media-tour) > .spoiler .spoiler--head > *:nth-child(10) > *,
.tournament--group-list.media-tour > .spoiler .spoiler--head > *:nth-child(11) > *{
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}
.tournament--group-list:not(.media-tour) > .spoiler .spoiler--head > *:nth-child(10) > *.green,
.tournament--group-list.media-tour > .spoiler .spoiler--head > *:nth-child(11) > *.green{
    background-image: url(/public/img/tournament-green-circle.svg);
}
.tournament--group-list:not(.media-tour) > .spoiler .spoiler--head > *:nth-child(10) > *.red,
.tournament--group-list.media-tour > .spoiler .spoiler--head > *:nth-child(11) > *.red{
    background-image: url(/public/img/tournament-red-circle.svg);
}
.tournament--group-list:not(.media-tour) > .spoiler .spoiler--head > *:nth-child(10) > *.yellow,
.tournament--group-list.media-tour > .spoiler .spoiler--head > *:nth-child(11) > *.yellow{
    background-image: url(/public/img/tournament-yellow-circle.svg);
}
.tournament--group-list > .spoiler .spoiler--head > * img{
    width: 25px;
    height: 25px;
    object-fit: contain;
    object-position: center;
}
.tournament--group-list > .spoiler .spoiler--body{
    position: relative;
    height: 388px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    padding: var(--padding);
    gap: var(--gap);
}
.tournament--group-list > .spoiler:not(.active) .spoiler--body{
    padding-top: 0px;
    padding-bottom: 0px;
}
.tournament--group-list > .spoiler .spoiler--body canvas{
    height: 300px;
    width: 1177px;
    margin-left: auto;
}
.tournament--group-list > .spoiler .spoiler--body > *:nth-last-child(-n + 2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 1177px;
    font-weight: bold;
    font-size: 20px;
}
.tournament--group-list > .spoiler .spoiler--body > *:nth-last-child(1){
    opacity: 0.5;
    justify-content: center;
    font-weight: 400;
}
.tournament--group-list > .spoiler .spoiler--body > *:nth-child(1){
    position: absolute;
    top: var(--padding);
    left:  var(--padding);
    width: 29px;
    height: 200px;
}
.tournament--group-list > .spoiler .spoiler--body > *:nth-child(2){
    position: absolute;
    top: var(--padding);
    left: calc(29px + var(--padding) + var(--gap));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 300px;
    font-size: 20px;
    font-weight: bold;
}
.tournament--group-list > .spoiler .spoiler--body > *:nth-child(1) span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0.5;
    font-weight: 20px;
}

.tournament--pretendants{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--gap);
}
.tournament--pretendants > *{
    height: 137px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.tournament--pretendants > * > *{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.tournament--pretendants > * > *:nth-child(2){
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--orange);
    border-radius: var(--radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
    transition: var(--transition);
}
.tournament--pretendants.x7 > * > *:nth-child(2){
    background-color: white;
    color: var(--grey);
}
/* .tournament--pretendants > * > *:nth-child(2), */
.tournament--pretendants > *:not(:hover) > *:nth-child(2){
    pointer-events: none;
    top: 100%
}
.tournament--pretendants > * > *:nth-child(2) > *{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tournament--pretendants > * > *:nth-child(2) > *:not(:last-child)::after{
    content: "";
    width: 2px;
    height: 100%;
    display: block;
    border-radius: 10px;
    background-color: #ffffff;
    opacity: 0.2;
    position: absolute;
    top: 0px;
    left: calc(100% + 30px);
    cursor: default;
}
.tournament--pretendants > * > *:nth-child(2) > * img{
    width: 56px;
    height: 56px;
}
.tournament--pretendants > * > *:nth-child(1){
    width: 100%;
    border-radius: var(--radius);
    background: var(--grey);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding);
    box-sizing: border-box;
    position: relative;
}
.tournament--pretendants > * > *:nth-child(1) p{
    margin: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(1){
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(1) > span:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(1) > span:nth-child(1)::before{
    content: "";
    display: block;
    height: 1em;
    width: 1em;
    border-radius: 100px;
}
.tournament--pretendants > * > *:nth-child(1).live p:nth-child(1) > span:nth-child(1)::before{
    background: var(--red);
}
.tournament--pretendants > * > *:nth-child(1).ended p:nth-child(1) > span:nth-child(1)::before{
    background: var(--light-grey);
}
.tournament--pretendants > * > *:nth-child(1).scheduled p:nth-child(1) > span:nth-child(1)::before{
    background: var(--orange);
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    text-transform: uppercase;
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong{
    font-weight: 500;
}
@media screen and (min-width: 1312px) {
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong:nth-child(2){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong:nth-child(3){
        display: none;
    }
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) img{
    height: 31px;
    width: 31px;
    object-fit: contain;
    object-position: center;
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(2){
    font-weight: 900;
    font-size: 25px;
    text-transform: uppercase;
    margin-left: auto;
}
.tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(3){
    font-size: 20px;
    opacity: 0.5;
}
.tournament--pretendants > * > *:nth-child(1).empty::before{
    content: "";
    display: block;
    width: 80px;
    height: 89px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tournament--pretendants > * > *:nth-child(2) > *{
    cursor: pointer;
}
@media screen and (min-width: 1312px){
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(4){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .tournament--pretendants > * > *:nth-child(2){
        gap: 20px;
        font-size: 12px;
    }
    .tournament--pretendants > * > *:nth-child(2) > *:not(:last-child)::after{
        left: calc(100% + 10px);
    }
    .tournament--pretendants > * > *:nth-child(2) > * img{
        width: 46px;
        height: 46px;
    }
    .tournament--pretendants > * > *:nth-child(1){
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        row-gap: 10px;
        width: 171px;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) img{
        width: 30px;
        height: 30px;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(1){
        font-size: 8px;
    }

    .tournament--pretendants > * > *:nth-child(1) > p:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
    .tournament--pretendants > * > *:nth-child(1) > p:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .tournament--pretendants > * > *:nth-child(1) > p:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
    .tournament--pretendants > * > *:nth-child(1) > p:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
    
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3){
        align-items: center;
        justify-content: center;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1){
        flex-direction: column;
        font-size: 12px;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(2),
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(3){
        display: none;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(4){
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(4) span:nth-child(1){
        font-size: 15px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .tournament--pretendants > * > *:nth-child(1) p:nth-child(4) span:nth-child(2){
        font-size: 8px;
        text-transform: uppercase;
        opacity: 0.5;
    }
}

@media screen and (max-width: 1312px) {
    .tournament--group-list > *:nth-child(1):not(.spoiler) > *:nth-child(11),
    .tournament--group-list > .spoiler .spoiler--head > *:nth-child(11){
        display: none;
    }
    .tournament--group-list > *:nth-child(1):not(.spoiler),
    .tournament--group-list > .spoiler .spoiler--head{
        font-size: 10px;
    }
    .tournament--group-list > *:nth-child(1):not(.spoiler),
    .tournament--group-list > .spoiler .spoiler--head{
        grid-template-columns: 20px 170px repeat(7, 20px) 120px 1fr;
        gap: 20px;
    }
    .tournament--group-list.media-tour > *:nth-child(1):not(.spoiler),
    .tournament--group-list.media-tour > .spoiler .spoiler--head{
        grid-template-columns: 20px 140px repeat(8, 20px) 120px 1fr;
    }
    .tournament--group-list > *:nth-child(1):not(.spoiler) > *::after,
    .tournament--group-list > .spoiler .spoiler--head > *::after{
        content: unset;
    }
    .tournament--group-list > .spoiler .spoiler--head > *:nth-child(2){
        width: 100%;
        transform: unset;
    }
    .tournament--group-list > .spoiler .spoiler--head > *:nth-child(2) > *:not(img){
        width: calc(100% - 30px);
    }
    .tournament--group-list > *:nth-child(1):not(.spoiler){
        height: 32px;
        padding: 10px;
    }
    .tournament--group-list > .spoiler .spoiler--head{
        height: 50px;
        padding: 10px;
    }
    .tournament--group-list > *:nth-child(1):not(.spoiler) > *,
    .tournament--group-list > .spoiler .spoiler--head > *{
        height: 100%;
    }
    .tournament--group-list > .spoiler .spoiler--head > * img{
        height: 20px;
        width: 20px;
    }
    .tournament--group-list > .spoiler .spoiler--body > *:nth-child(1) span,
    .tournament--group-list > .spoiler .spoiler--body > *:nth-last-child(1){
        font-size: 12px;
    }
    .tournament--group-list > .spoiler .spoiler--body > *:nth-child(2),
    .tournament--group-list > .spoiler .spoiler--body > *:nth-last-child(2){
        font-size: 10px;
    }
    .tournament--group-list > .spoiler .spoiler--body canvas,
    .tournament--group-list > .spoiler .spoiler--body > *:nth-child(1),
    .tournament--group-list > .spoiler .spoiler--body > *:nth-child(2){
        height: 140px;
    }
    .tournament--group-list > .spoiler .spoiler--body canvas,
    .tournament--group-list > .spoiler .spoiler--body > *:nth-last-child(-n + 2){
        width: 595px;
    }
    .tournament--group-list > .spoiler .spoiler--body{
        height: 207px;
    }

    .tournament--pretendants{
        display: flex;
        flex-direction: row;
        align-items: center;
        scroll-snap-type: x mandatory;
        overflow: auto;
        padding-bottom: 4px;
        gap: 10px;
    }
    .tournament--pretendants > *{
        height: 95px;
        width: 172px;
        min-width: 172px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .tournament--pretendants > * > *:nth-child(1){
        padding: 10px;
    }
}

@media screen and (max-width: 720px) {
    .tournament--group-list > *:nth-child(1):not(.spoiler),
    .tournament--group-list > .spoiler .spoiler--head{
        grid-template-columns: 20px calc(100vw - 180px - 100px) repeat(7, 20px);
        gap: 10px;
    }
    .tournament--group-list.media-tour > *:nth-child(1):not(.spoiler),
    .tournament--group-list.media-tour > .spoiler .spoiler--head{
        grid-template-columns: 20px calc(100vw - 180px - 100px) repeat(8, 20px);
        gap: 7px;
    }
    .tournament--group-list:not(.media-tour) > *:nth-child(1):not(.spoiler) > *:not(:nth-child(-n + 9)),
    .tournament--group-list:not(.media-tour) > .spoiler .spoiler--head > *:not(:nth-child(-n + 9)){
        display: none;
    }
    .tournament--group-list.media-tour > *:nth-child(1):not(.spoiler) > *:not(:nth-child(-n + 10)),
    .tournament--group-list.media-tour > .spoiler .spoiler--head > *:not(:nth-child(-n + 10)){
        display: none;
    }
    .tournament--group-list > .spoiler .spoiler--body{
        display: none;
    }
}

.tournament--tabs{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.tournament--tabs > *{
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    background-color: var(--grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.tournament--tabs > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.tournament--tabs > *:first-child{
    border-radius: var(--radius) 0px 0px var(--radius);
}
.tournament--tabs > *:last-child{
    border-radius: 0px var(--radius) var(--radius) 0px;
}
.tournament--tabs > *.active{
    background-color: var(--orange);
}
.tournament--tabs.x7 > *.active{
    background-color: var(--white);
    color: var(--grey)
}
@media screen and (max-width: 1312px) {
    .tournament--tabs > *{
        font-size: 15px;
        padding: 15px 20px;
    }
    .tournament--tabs > * > span{
        display: none;
    }
    .tournament--tabs > *:not(:last-child){
        border-right: 1px solid var(--light-grey);
    }
}
@media screen and (max-width: 720px){
    .tournament--tabs{
        overflow: auto;
        gap: 10px;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }
    .tournament--tabs > *{
        border-radius: var(--radius)!important;
        padding: 10px 15px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .tournament--tabs > *:not(:last-child){
        border-right: unset;
    }
}


.stats--short-stat{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
    grid-template-rows: 1fr;
}
.stats--short-stat > *{
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    grid-template-rows: 1fr;
    gap: 40px;
    padding: var(--padding);
    box-sizing: border-box;
    border-radius: var(--radius);
    background-color: var(--grey);
}
.stats--short-stat > * > *{
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}
.stats--short-stat > * > * > p{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px;
}
.stats--short-stat > * > *:nth-child(1){
    order: -1;
}
.stats--short-stat > *::before{
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    border-radius: 10px;
    background-color: #ffffff;
    opacity: 0.2;
}
.stats--short-stat > * > *:nth-child(1) > span:nth-child(3),
.stats--short-stat > * > *:nth-child(2) > p > span:nth-child(2){
    opacity: 0.5;
}
.stats--short-stat > * > *:nth-child(1) > span:nth-child(1){
    font-weight: bold;
}
.stats--short-stat > * > *:nth-child(1){
    gap: 10px;
}
.stats--short-stat > * > *:nth-child(1) > span:nth-child(2){
    font-family: "Codec Pro";
    font-size: 60px;
    font-weight: 900;
    font-style: italic;
    line-height: 1em;
}
.stats--short-stat > * > *:nth-child(2) > p > span:nth-child(1){
    font-family: "Codec Pro";
    font-size: 25px;
    font-weight: 900;
    font-style: italic;
}

.stats--tables .swiper-slide > div:nth-child(2){
    display: flex;
    flex-direction: column;
}
.stats--tables .swiper-slide > div:nth-child(2) > *{
    display: grid;
    grid-template-columns: 30px 193px 50px;
    gap: 10px;
    padding: 10px;
    align-items: center;
}
.stats--tables .swiper-slide > div:nth-child(2) > *:nth-child(1){
    height: 50px;
    box-sizing: border-box;
    background-color: var(--light-grey);
}
.stats--tables .swiper-slide > div:nth-child(2) > * > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.stats--tables .swiper-slide{
    gap: 0px;
}
.stats--tables .swiper-slide .block-header{
    padding-bottom: var(--padding);
}
.stats--tables .swiper-slide > div:nth-child(2) > * span,
.stats--tables .swiper-slide > div:nth-child(2) > * a,
.stats--tables .swiper-slide > div:nth-child(2) > * p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.stats--tables .swiper-slide > div:nth-child(2) > * > *:nth-child(2){
    justify-content: start;
    text-align: start;
    padding: 5px 10px;
    border-radius: var(--radius);
    background-color: var(--light-grey);
    gap: 10px;
}
.stats--tables .swiper-slide > div:nth-child(2) > * > *:nth-child(2) img{
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.stats--tables .swiper-slide > div:nth-child(2) > * > *:nth-child(2) span{
    width: calc(100% - 40px);
}
@media screen and (max-width: 1312px) {
    .stats--short-stat > *{
        gap: 19px;
        padding: 20px 15px;
        grid-template-columns: 75px 2px 1fr;
    }
    .stats--short-stat > * > *:nth-child(1) > span:nth-child(3),
    .stats--short-stat > * > *:nth-child(2) > p > span:nth-child(2){
        font-size: 10px;
    }
    .stats--short-stat > * > *:nth-child(1) > span:nth-child(2){
        font-size: 30px;
    }
    .stats--short-stat > * > *:nth-child(2) > p > span:nth-child(1){
        font-size: 20px;
    }
    .stats--short-stat > * > *:nth-child(1){
        justify-content: space-between;
    }
    .stats--tables .swiper-slide{
        font-size: 10px;
    }
    .stats--tables .swiper-slide > div:nth-child(2) > *{
        grid-template-columns: 30px 255px 30px;
        gap: 10px;
    }
    .stats--tables .swiper-slide .block-header .block-title{
        font-size: 20px;
    }
    .stats--tables .swiper-slide > div:nth-child(2) > * > *:nth-child(2) img{
        width: 20px;
        height: 20px;
    }
    .stats--tables .swiper-slide > div:nth-child(2) > *:nth-child(1){
        height: 32px;
    }
    .stats--tables .swiper-slide > div:nth-child(2) > * > *:nth-child(2) span{
        width: calc(100% - 30px);
    }
}
@media screen and (max-width: 720px){
    .stats--short-stat{
        display: flex;
        flex-direction: row;
        overflow: auto;
        padding-bottom: 4px;
    }
    .stats--short-stat > *{
        gap: 19px;
        padding: 20px;
        grid-template-columns: 1fr 2px 1fr;
        white-space: nowrap;
    }
    .stats--short-stat > * > *:nth-child(1){
        justify-content: start;
    }
    .stats--short-stat > * > *:nth-child(1) > span:nth-child(2){
        font-size: 40px;
    }
    .stats--short-stat > * > *:nth-child(2) > p > span:nth-child(1){
        font-size: 25px;
    }
    .stats--short-stat > * > *:nth-child(1) > span:nth-child(3),
    .stats--short-stat > * > *:nth-child(2) > p > span:nth-child(2){
        font-size: 15px;
    }

    .stats--tables .swiper-slide{
        width: fit-content;
    }
    .stats--tables .swiper-slide > div:nth-child(2) > *{
        grid-template-columns: 20px 100px 20px;
        gap: 10px;
    }
    .stats--tables .swiper-slide > div:nth-child(2) > * > *:nth-child(2){
        padding: 5px;
        gap: 5px;
    }
    .stats--tables .swiper-slide .block-header .block-title{
        font-size: 10px;
    }
}

.teams-list{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap);
}
.teams-list > *{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
    border-radius: var(--radius);
    background-color: var(--grey);
    max-width: 246px;
}
.teams-list > * > *:nth-child(1){
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--light-grey);
    text-align: center;
    font-weight: 500;
    padding: 20px;
    box-sizing: border-box;
}
.teams-list > * > *:nth-child(1) > *:not(img){
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.teams-list > * > *:nth-child(1) img{
    height: 72px;
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.teams-list > * > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    padding: 5px 0px;
}
.teams-list > * > *:nth-child(2) > *{
    width: fit-content;
    height: 15px;
    cursor: pointer;
}
.teams-list > * > *:nth-child(2) > * img{
    width: auto;
    height: 100%;
}
@media screen and (max-width: 1312px) {
    .teams-list{
        grid-template-columns: repeat(3, 1fr);
    }
    .teams-list > *{
        max-width: 226px;
    }
}
@media screen and (max-width: 720px) {
    .teams-list{
        grid-template-columns: repeat(2, 1fr);
    }
    .teams-list > * > *:nth-child(1) img{
        height: 60px;
    }
    .teams-list > * > *:nth-child(1){
        font-size: 12px;
    }
    .teams-list > *{
        max-width: calc((100vw - 20px - 20px) / 2);
    }
}

.videos-page{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--gap);
}
.videos-page > *{
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--light-grey);
    position: relative;
    height: 316px;
}
.videos-page.x7 > *{
    background-color: var(--green);
    color: var(--grey);
}
.videos-page > * > *:nth-child(1){
    position: relative;
    height: 203px;
    overflow: hidden;
}
.videos-page > * > *:nth-child(1) img.preview{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.videos-page > * > *:nth-child(1) .play{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background-image: url(/public/img/play-btn-2.svg);
    background-size: 100% 100%;
}
.videos-page.x7 > * > *:nth-child(1) .play{
    background-image: url(/public/img/play-btn-2-x7.svg);
}
.videos-page > * > *:nth-child(1) span{
    padding: 5px 10px;
    border-radius: var(--radius);
    background: var(--light-grey);

    position: absolute;
    top: 10px;
    right: calc(10px + 35px + 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 35px;
    box-sizing: border-box;
}
.videos-page.x7 > * > *:nth-child(1) span{
    background: white;
}
.videos-page > * > *:nth-child(2){
    padding: 19px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.videos-page > * > *:nth-child(2) span{
    opacity: 0.5;
    font-size: 12px;
}
.videos-page > * > *:nth-child(2) h2{
    font-weight: 500;
    font-family: "ALS Unios";
    font-size: 20px;
    display: -webkit-box; /* Required for -webkit-line-clamp */
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
    overflow: hidden; /* Hides overflowing content */
    text-overflow: ellipsis; /* Ensures ellipsis is displayed */
}
.videos-page > *.empty::before{
    content: "";
    display: block;
    width: 150px;
    height: 168px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (min-width: 1312px){
    .videos-page > *.hidden{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .videos-page{
        grid-template-columns: 1fr 1fr;
    }
    .videos-page > *{
        width: 352px;
        min-width: 352px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 262px;
    }
    .videos-page > * > *:nth-child(1){
        height: 162px;
    }
    .videos-page > * > *:nth-child(1) .play{
        width: 30px;
        height: 30px;
    }
    .videos-page > * > *:nth-child(1) span{
        height: 20px;
        font-size: 12px;
        border-radius: 5px;
        top: 15px;
        right: calc(10px + 30px + 10px);
    }
    .videos-page > * > *:nth-child(2) h2{
        font-size: 17px;
    }
    .videos-page > * > *:nth-child(2) span{
        font-size: 12px;
    }
    .videos-page > * > *:nth-child(2){
        padding: 10px;
    }
    .videos-page > *.empty::before{
        width: 90px;
    }
}
@media screen and (max-width: 720px){
    .videos-page > *{
        scroll-snap-align: center;
        width: calc((100vw - 20px - 10px) / 2);
        min-width: calc((100vw - 20px - 10px) / 2);
        height: 180px;
    }
    .videos-page > * > *:nth-child(1){
        height: 100px;
    }
    .videos-page > * > *:nth-child(2) h2{
        display: -webkit-box; /* Required for -webkit-line-clamp */
        -webkit-line-clamp: 3; /* Limits text to 2 lines */
        -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
        overflow: hidden; /* Hides overflowing content */
        text-overflow: ellipsis; /* Ensures ellipsis is displayed */
        font-size: 12px;
    }
    .videos-page > * > *:nth-child(2){
        gap: 5px;
    }
    .videos-page > * > *:nth-child(2) span{
        font-size: 8px;
    }
    .videos-page > * > *:nth-child(1) .play{
        width: 20px;
        height: 20px;
    }
    .videos-page > * > *:nth-child(1) span{
        font-size: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        top: 10px;
        right: calc(10px + 20px + 5px);
    }
}

.videos-page--filter{
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--gap);
}
.videos-page--filter > div{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
}

input.search{
    background-color: var(--grey);
    background-image: url(/public/img/magnifier.svg);
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 1em 1em;
    outline: none!important;
    border: 2px solid var(--light-grey);
    padding: 10px 15px;
    padding-left: calc(15px + 1em + 10px);
    border-radius: 10px;

    font-family: "ALS Unios";
    font-size: 15px;
    font-weight: 500;
    color: white;

    transition: var(--transition);
    box-sizing: border-box;
}
input.search::placeholder{
    font-family: "ALS Unios";
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}
input.search:focus{
    padding-left: 15px;
    background-position: left -1em center;
}

input.text{
    background-color: var(--grey);
    outline: none!important;
    border: 2px solid var(--light-grey);
    padding: 10px 15px;
    border-radius: 10px;

    font-family: "ALS Unios";
    font-size: 15px;
    font-weight: 500;
    color: white;

    transition: var(--transition);
    box-sizing: border-box;
}
input.text::placeholder{
    font-family: "ALS Unios";
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}
input.text:focus{
    padding-left: 15px;
    background-position: left -1em center;
}

.pagination{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    font-weight: 500;
}
.pagination a{
    cursor: pointer;
}
.pagination > a{
    background-image: url(/public/img/arrow-left.svg);
    background-size: 100% 100%;
    height: 50px;
    width: 50px;
    box-sizing: border-box;
}
.pagination > a:last-child{
    transform: rotate(180deg);
}
.pagination > a.disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

}
.pagination > div > *{
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: var(--grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.pagination > div > *.active{
    background-color: var(--orange);
}

@media screen and (max-width: 1312px) {
    .pagination,
    .pagination > div{
        gap: 10px;
    }
    .videos-page--filter{
        grid-template-columns: 1fr 200px;
    }
}
@media screen and (max-width: 720px){
    .pagination > div *.ofb{
        display: none;
    }
    .videos-page--filter{
        display: flex;
        flex-direction: column-reverse;
    }
    .videos-page--filter > .search{
        orphans: -1;
    }
    .videos-page--filter > div{
        overflow: auto;
        padding-bottom: 4px;
    }
    .videos-page--filter .pbl-select{
        min-width: 150px;
    }
    .pagination{
        grid-template-columns: 40px 1fr 40px;
    }
    .pagination > div > *,
    .pagination > a{
        width: 40px;
        height: 40px;
    }
}
@media screen and (max-width: 360px){
    .pagination{
        grid-template-columns: 35px 1fr 35px;
    }
    .pagination > div > *,
    .pagination > a{
        width: 35px;
        height: 35px;
    }
}

.player-container{
    padding-left: 276px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-height: 1326px;
}
.player-container.x7{
    min-height: 1100px;
}
.player-container .container{
    width: 100%!important;
    box-sizing: border-box;
}
.player-container .player--bio{
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 256px;
}
.player-container .player--bio > *:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--grey);
    border-radius: 10px;
}
.player-container .player--bio > *:nth-child(1) > *:nth-child(1){
    width: 100%;
    height: 276px;
    position: relative;
}
.player-container .player--bio > *:nth-child(1) > *:nth-child(1) > .player-img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: var(--orange);
    background-image: url(/public/img/peak-bg-2.svg);
    background-size: cover;
    object-fit: contain;
    object-position: center bottom;
}

.player-container .player--bio > *:nth-child(1) > *:nth-child(1) .club{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.player-container .player--bio > *:nth-child(1) > *:nth-child(1) span{
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 5px 10px;
    border-radius: 0px 10px 0px 10px;
    background: var(--grey);
    text-align: center;
    font-family: "Codec Pro";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
.player-container .player--bio > *:nth-child(1) > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    
    font-family: "Codec Pro";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
}
.player-container .player--bio > *:nth-child(1) > *:nth-child(2) > *{
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.player-container .player--bio > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}
.player-container .player--bio > *:nth-child(2) a,
.player-container .player--bio > *:nth-child(2) img{
    width: auto;
    height: 31px;
}
.player-container .player--bio > *{
    border-radius: 10px;
}

.player-container .player--bio > *:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.player-container .player--bio > *:nth-child(3) > *:nth-child(1){
    font-size: 40px;
    font-weight: 800;
    font-family: "Codec Pro";
    font-style: italic;   
}
.player-container .player--bio > *:nth-child(3) > *:nth-child(2){
    opacity: 0.5;
}
.player-container .player--bio > *:nth-child(4){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.player-container .player--bio > *:nth-child(4) > *:nth-child(1){
    font-size: 40px;
    font-weight: 800;
    font-family: "Codec Pro";
    font-style: italic;   
}
.player-container .player--bio > *:nth-child(4) > *:nth-child(2){
    opacity: 0.5;
}
.player-container .player--bio > *.banner{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: space-between;;
    padding: calc(var(--padding) * 2) var(--padding);
    border-radius: var(--radius);
    border: 2px solid var(--grey);
    background-image: url(/public/img/peak-bg.svg);
    background-color: var(--orange);
    background-size: 100% auto;
    object-fit: contain;
    object-position: center top;
}
.player-container .player--bio > *.banner > img{
    width: 100%;
    height: auto;
}
.player-container .player--bio > *.banner > *:not(img){
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    width: 178px;
    height: 69px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 500;
    color: white;
    cursor: pointer;
}
.player-container .player--bio > *.team > *:nth-child(2){
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius);
    padding: 36px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--light-grey);
}
.player-container .player--bio > *.team > *:nth-child(2) img{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.player-container .player--bio > *.banner > *:nth-child(3){
    font-size: 20px;
    display: block;
    text-align: center;
}


.player-container .player--stats > *:nth-child(2){
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 2px solid var(--light-grey);
}
.player-container .player--stats > *:nth-child(2) > *{
    padding: var(--padding);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.player-container .player--stats > *:nth-child(2) > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.player-container .player--stats > *:nth-child(2) > * > *:nth-child(1){
    font-size: 40px;
    font-weight: 800;
    font-family: "Codec Pro";
    font-style: italic;   
}
.player-container .player--stats > *:nth-child(2) > * > *:nth-child(2){
    opacity: 0.5;
}
.player-container .player--stats .block-header{
    position: relative
}
.player-container .player--stats .block-header .sub-title{
    color: var(--orange);
    opacity: 1;
    font-size: 20px;
}
.player-container .player--stats .block-header .role{
    opacity: 0.5;
}
.player-container .player--stats .block-header .status{
    position: absolute;
    top: 0px;
    right: 200px;
    border-radius: 0px 0px 10px 10px;
    min-width: 69px;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--orange);
    font-family: "Codec Pro";
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.player--season{
    display: flex;
    flex-direction: column;
}
.player--season > div:nth-child(1),
.player--season > div:nth-child(2) > div{
    display: grid;
    grid-template-columns: 80px 336px repeat(6, 50px);
    gap: 40px;
    align-items: center;
    padding: 0px 20px;
    font-weight: 500;
}
.player--season > div:nth-child(1){
    height: 50px;
    background-color: var(--light-grey);
}
.player--season > div:nth-child(2) > div{
    height: 60px;
}
.player--season > div:nth-child(1) > *,
.player--season > div:nth-child(2) > div > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
.player--season > div:nth-child(1) > *:nth-child(2){
    justify-content: start;
    text-align: start;
}
.player--season > div:nth-child(2) > div > *:nth-child(2){
    gap: 10px;
    justify-content: start;
    text-align: start;
    background-color: var(--light-grey);
    border-radius: 10px;
    padding:5px 10px;
}
.player--season > div:nth-child(2) > div > *:nth-child(2) img{
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.player--season > div:nth-child(2) > div > *:nth-child(2) *:not(img){
    width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.player--season > div:nth-child(1) > *:not(:last-child)::after,
.player--season > div:nth-child(2) > div > *:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    left: calc(100% + 19px);
    top: 50%;
    transform: translateY(-50%);
}
.player--season > div:nth-child(2) > div:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}

.player--matches > div:nth-child(1),
.player--matches .spoiler--head{
    display: grid;
    grid-template-columns: 62px 422px 222px 50px 1fr;
    gap: 40px;
    padding: 0px 20px;
    font-weight: 500;
}
.player--matches > div:nth-child(1){
    background-color: var(--light-grey);
    align-items: center;
    height: 50px;
}
.player--matches .spoiler--head{
    height: 60px;
}
.player--matches > div:nth-child(1) > *,
.player--matches .spoiler--head > *{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.player--matches > div:nth-child(1) > *:nth-child(2),
.player--matches > div:nth-child(1) > *:nth-child(3),
.player--matches .spoiler--head > *:nth-child(2),
.player--matches .spoiler--head > *:nth-child(3){
    justify-content: start;
    text-align: start;
}
.player--matches > div:nth-child(1) > *:not(:last-child)::after,
.player--matches .spoiler--head > *:not(:nth-last-child(-n + 2))::after{
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    left: calc(100% + 19px);
    top: 50%;
    transform: translateY(-50%);
}
.player--matches .spoiler--head > *:nth-child(3){
    gap: 10px;
    justify-content: start;
    text-align: start;
    background-color: var(--light-grey);
    border-radius: 10px;
    padding: 5px 10px;
}
.player--matches .spoiler--head > *:nth-child(3) img{
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.player--matches .spoiler--head > *:nth-child(3) *:not(img){
    width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.player--matches .spoiler:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.player--matches .spoiler--body{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.player--matches .spoiler--body > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.player--matches .spoiler--body > * > *:nth-child(1){
    opacity: 0.5;
}
.player--matches .spoiler--body > * > *:nth-child(2){
    font-weight: 500;
}
.player--matches .spoiler--body > *:last-child:nth-child(odd){
    grid-column: 1 / -1;
}
.player--matches .spoiler--body > *{
    border-top: 2px solid var(--light-grey);
}
.player--matches .spoiler--body > *:nth-child(odd):not(:last-child){
    border-right: 2px solid var(--light-grey);
}

.player-container.x7 .player--bio > *:nth-child(1) > *:nth-child(1) > .player-img{
    background-color: white;
}
.player-container.x7 .player--stats .block-header .sub-title{
    color: var(--yellow);
}
.player-container.x7 .player--stats .block-header .status{
    background-color: var(--purple);
}
.player-container .block-header.green,
.player-container .block-header.yellow,
.player-container .block-header.purple,
.player-container .block-header.blue{
    margin-bottom: calc(var(--padding) * -1);
    padding-bottom: var(--padding);
}
.player-container .player--bio > *.team > *:nth-child(4){
    display: none;
}
@media screen and (min-width: 1312px) {
    .player-container .player--bio > *:nth-child(4) > *:nth-child(2) br{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .player-container .x7#latest-goals .block-header{
        background-color: unset;
        color: white;
    }
    .player-container .player--bio > *.banner{
        display: none;
    }
    .player-container{
        padding-left: 0px;
        gap: 15px;
    }
    .player-container .player--stats{
        width: calc(100% - 213px);
        margin-left: auto;
        margin-bottom: calc(79px - 10px + 15px);
    }
    .player-container .player--stats > *:nth-child(2){
        grid-template-columns: repeat(3, 1fr);
    }
    .player-container .player--bio{
        width: 198px;
        display: grid;
        grid-template-columns: 198px 156px 180px 156px;
        grid-template-rows: 251px 79px;
        gap: 10px;
        width: 100%;
    }
    .player-container .player--bio > *:nth-child(1){
        padding: 9px;
    }
    .player-container .player--bio > *:nth-child(1) > *:nth-child(1){
        height: 213px;
    }
    .player-container .player--stats > *:nth-child(2) > *:nth-child(3){
        border-right: unset;
    }
    .player-container .player--stats > *:nth-child(2) > *:nth-child(-n + 3){
        border-bottom: 2px solid var(--light-grey);
    }
    .player-container .player--stats > *:nth-child(2) > * > *:nth-child(1){
        font-size: 35px;
    }
    .player-container .player--bio > *:nth-child(1) > *:nth-child(2){
        margin-top: auto;
        margin-bottom: auto;
    }
    .player-container .player--bio > *:nth-child(1) > *:nth-child(2) > *{
        font-size: 12px;
    }
    .player-container .player--stats .block-header .sub-title{
        font-size: 15px;
    }
    .player-container .player--stats{
        gap: 10px;
    }
    .player-container .player--stats .block-header .status{
        right: 130px;
    }
    .player-container .player--bio > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .player-container .player--bio > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .player-container .player--bio > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
    .player-container .player--bio > *:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
    .player-container .player--bio > *.team { grid-area: 2 / 4 / 3 / 5; }

    .player-container .player--bio > *:nth-last-child(-n + 4){
        padding: 10px;
    }
    .player-container .player--bio > *:nth-child(3) > *:nth-child(1),
    .player-container .player--bio > *:nth-child(4) > *:nth-child(1){
        font-size: 30px;
    }
    .player-container .player--bio > *:nth-child(3) > *:nth-child(2),
    .player-container .player--bio > *:nth-child(4) > *:nth-child(2){
        font-size: 10px;
    }
    .player-container .player--bio > *.team{
        justify-content: start!important;
    }
    .player-container .player--bio > *.team .block-header{
        display: none;
    }
    .player-container .player--bio > *.team > *:nth-child(2){
        padding: 9px;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .player-container .player--bio > *.team{
        flex-direction: row;
        align-items: center;
        position: relative;
    }
    .player-container .player--bio > *.team > *:nth-child(3){
        display: none;
    }
    .player-container .player--bio > *.team > *:nth-child(4){
        display: block;
    }
    
    .player-container .player--bio > *:nth-child(3),
    .player-container .player--bio > *:nth-child(4){
        position: relative;
        padding-right: 20px;
        box-sizing: border-box;
        justify-content: space-between;
    }
    .player-container .player--bio > *:nth-child(3)::after,
    .player-container .player--bio > *:nth-child(4)::after,
    .player-container .player--bio > *.team::after{
        content: "";
        position: absolute;
        right: 0px;
        width: 18px;
        height: 100%;
        top: 0px;
        border-left: 2px solid var(--light-grey);
        background: url(/public/img/title_arrow.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 6px 11px;
        border-radius: 0px 10px 10px 0px;
    }
    .player-container .player--bio > *:nth-child(3)::after,
    .player-container .player--bio > *:nth-child(4)::after{
        background-color: var(--orange);
    }
    .player--season > div:nth-child(1),
    .player--season > div:nth-child(2) > div{
        grid-template-columns: 45px 405px repeat(6, 30px);
        gap: 10px;
        font-size: 10px;
        padding: 0px 10px;
        white-space: nowrap;
    }
    .player--season > div:nth-child(1) > *:not(:last-child)::after,
    .player--season > div:nth-child(2) > div > *:not(:last-child)::after{
        content: unset;
    }
    .player--season > div:nth-child(2) > div > *:nth-child(2) img{
        width: 20px;
        height: 20px;
    }
    .player--season > div:nth-child(1){
        height: 32px;
    }
    .player--season > div:nth-child(2) > div{
        height: 50px;
    }
    .player--matches > div:nth-child(1) > *:not(:last-child)::after,
    .player--matches .spoiler--head > *:not(:nth-last-child(-n + 2))::after{
        content: unset;
    }
    .player--matches > div:nth-child(1),
    .player--matches .spoiler--head{
        grid-template-columns: 43px 464px 47px 40px 1fr;
        padding: 0px 10px;
        gap: 10px;
        font-size: 10px;
    }
    .player--matches .spoiler--head{
        font-weight: 600;
    }
    .player--matches > div:nth-child(1){
        height: 32px;
    }
    .player--matches .spoiler--head{
        height: 50px;
    }
    .player--matches .spoiler--head > *:nth-child(3) *:not(img){
        display: none;
    }
    .player--matches .spoiler--head > *:nth-child(3){
        width: 30px;
        height: 30px;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    .player--matches .spoiler--head > *:nth-child(3) img{
        width: 100%;
        height: 100%;
    }
    .player--matches .spoiler--body > * > *{
        font-size: 10px;
    }
    .player-container{
        min-height: unset!important;
    }
    .player--season > div:nth-child(2) > div > *:nth-child(2) *:not(img){ 
        width: calc(100% - 30px);
    }
}
@media screen and (max-width: 720px) {
    .player-container .player--bio > *:nth-child(4) > *:nth-child(2) br{
        display: none;
    }
    .player-container .player--bio{
        position: unset;
        top: unset;
        left: unset;
        grid-template-columns: calc(100vw - 143px - 10px - 20px) 143px;
        grid-template-rows: 68px 68px 68px 37px;
    }
    .player-container .player--bio > *:nth-child(1) { grid-area: 1 / 1 / 5 / 2; }
    .player-container .player--bio > *.team { grid-area: 1 / 2 / 2 / 3; }
    .player-container .player--bio > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
    .player-container .player--bio > *:nth-child(4) { grid-area: 3 / 2 / 4 / 3; }
    .player-container .player--bio > *:nth-child(2) { grid-area: 4 / 2 / 5 / 3; }
    
    .player-container .player--bio > *:nth-child(1) > *:nth-child(1){
        height: 214px;
    }
    .player-container .player--stats{
        width: 100%;
        margin-bottom: 0px;
    }
    .player-container .player--bio > *:nth-child(3) > *:nth-child(1),
    .player-container .player--bio > *:nth-child(4) > *:nth-child(1){
        font-size: 20px;
    }
    .player-container .player--bio > *:nth-child(3) > *:nth-child(2),
    .player-container .player--bio > *:nth-child(4) > *:nth-child(2){
        font-size: 8px;
    }
    .player-container .player--bio > *:nth-child(2) a,
    .player-container .player--bio > *:nth-child(2) img{
        height: 17px;
    }
    .player-container .player--bio > *:nth-child(2){
        gap: 20px;
    }
    .player-container .player--stats .block-header .status{
        right: 100px;
        font-size: 10px;
        min-width: 43px;
        padding: 5px;
        border-radius: 0px 0px 5px 5px;
    }
    .player-container .player--stats .block-header *,
    .player-container .player--stats .block-header .sub-title{
        font-size: 10px;
    }
    .player-container .player--stats > *:nth-child(2) > * > *:nth-child(1){
        font-size: 20px;
    }
    .player-container .player--stats > *:nth-child(2) > * > *:nth-child(2){
        font-size: 8px;
    }
    .player--season > div:nth-child(1),
    .player--season > div:nth-child(2) > div{
        grid-template-columns: 35px 106px repeat(6, 1fr);
    }
    .player--season > div:nth-child(2) > div > *:nth-child(2){
        padding: 5px;
        gap: 5px;
    }
    .player--season > div:nth-child(2) > div > *:nth-child(2) *:not(img){ 
        width: calc(100% - 25px);
    }
    .player--matches > div:nth-child(1),
    .player--matches .spoiler--head{
        grid-template-columns: 43px calc(100% - 155px - 40px) 47px 40px 25px;
    }
}

.leaders-page--filter,
.leaders-container .block-header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.leaders-container .block-header input{
    width: 100%;
    box-sizing: border-box;
}
.leaders-container.x7 .block-header{
    margin-bottom: calc(var(--gap) * -1);
    padding-bottom: var(--padding);
    background-color: var(--purple);
}

.leaders-table > *:nth-child(1),
.leaders-table > *:nth-child(2) > *{
    display: grid;
    grid-template-columns: 30px 430px 122px repeat(6, 50px) 1fr;
    align-items: center;
    padding: 0px 20px;
    gap: 30px;
}
.leaders-table.bombardirs > *:nth-child(1),
.leaders-table.bombardirs > *:nth-child(2) > *,
.leaders-table.assistant > *:nth-child(1),
.leaders-table.assistant > *:nth-child(2) > *,
.leaders-table.gp > *:nth-child(1),
.leaders-table.gp > *:nth-child(2) > *{
    grid-template-columns: 30px 605px 267px repeat(2, 50px) 1fr;
}
.leaders-table.card > *:nth-child(1),
.leaders-table.card > *:nth-child(2) > *{
    grid-template-columns: 30px 565px 227px repeat(3, 50px) 1fr;
}
.leaders-table > *:nth-child(1) > *,
.leaders-table > *:nth-child(2) > * > *{
    position: relative;
}
.leaders-table > *:nth-child(1) > *:nth-child(2){
    justify-content: start;
    text-align: start;
}
.leaders-table > *:nth-child(1) > *:not(:last-child)::after,
.leaders-table > *:nth-child(2) > * > *:not(:last-child)::after{
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    left: calc(100% + 19px);
    top: 50%;
    transform: translateY(-50%);
}
.leaders-table > *:nth-child(1){
    height: 50px;
    background-color: var(--light-grey);
}
.leaders-table > *:nth-child(2) > *{
    height: 60px;
}
.leaders-table > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}

.leaders-table > *:nth-child(1) > *,
.leaders-table > *:nth-child(2) > * > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(3){
    justify-content: start;
    text-align: start;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(3) img{
    width: 30px;
    height: 30px;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(3) *:not(img){
    width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(3),
.leaders-table > *:nth-child(2) > * > *:nth-child(2){
    background-color: var(--light-grey);
    border-radius: 10px;
    padding: 5px 10px;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(2){
    text-align: start;
    justify-content: start;
    box-sizing: border-box;
    width: calc(100% + 15px);
    transform: translateX(-15px);
}
.leaders-table > *:nth-child(2) > * > *:nth-child(2) > *{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(1)::after{
    content: unset;
}

.leaders-table > *:nth-child(1) > *:nth-child(8) > *,
.leaders-table > *:nth-child(1) > *:nth-child(9) > *,
.leaders-table.card > *:nth-child(1) > *:nth-child(5) > *,
.leaders-table.card > *:nth-child(1) > *:nth-child(6) > *{
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 2px solid var(--grey);
    box-sizing: border-box;
}
.leaders-table > *:nth-child(1) > *:nth-child(8) > *,
.leaders-table.card > *:nth-child(1) > *:nth-child(5) > *{
    background-color: var(--yellow);
}
.leaders-table > *:nth-child(1) > *:nth-child(9) > *,
.leaders-table.card > *:nth-child(1) > *:nth-child(6) > *{
    background-color: var(--red);
}
.leaders-table > *:nth-child(2) > * > *:nth-child(10),
.leaders-table.bombardirs > *:nth-child(2) > * > *:nth-child(6),
.leaders-table.assistant > *:nth-child(2) > * > *:nth-child(6),
.leaders-table.gp > *:nth-child(2) > * > *:nth-child(6),
.leaders-table.card > *:nth-child(2) > * > *:nth-child(7){
    gap: 5px;
    justify-content: center;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(10) > *,
.leaders-table.bombardirs > *:nth-child(2) > * > *:nth-child(6) > *,
.leaders-table.assistant > *:nth-child(2) > * > *:nth-child(6) > *,
.leaders-table.gp > *:nth-child(2) > * > *:nth-child(6) > *,
.leaders-table.card > *:nth-child(2) > * > *:nth-child(7) > *{
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(10) > *.green,
.leaders-table.bombardirs > *:nth-child(2) > * > *:nth-child(6) > *.green,
.leaders-table.assistant > *:nth-child(2) > * > *:nth-child(6) > *.green,
.leaders-table.gp > *:nth-child(2) > * > *:nth-child(6) > *.green,
.leaders-table.card > *:nth-child(2) > * > *:nth-child(7) > *.green{
    background-image: url(/public/img/tournament-green-circle.svg);
}
.leaders-table > *:nth-child(2) > * > *:nth-child(10) > *.red,
.leaders-table.bombardirs > *:nth-child(2) > * > *:nth-child(6) > *.red,
.leaders-table.assistant > *:nth-child(2) > * > *:nth-child(6) > *.red,
.leaders-table.gp > *:nth-child(2) > * > *:nth-child(6) > *.red,
.leaders-table.card > *:nth-child(2) > * > *:nth-child(7) > *.red{
    background-image: url(/public/img/tournament-red-circle.svg);
}
.leaders-table > *:nth-child(2) > * > *:nth-child(10) > *.yellow,
.leaders-table.bombardirs > *:nth-child(2) > * > *:nth-child(6) > *.yellow,
.leaders-table.assistant > *:nth-child(2) > * > *:nth-child(6) > *.yellow,
.leaders-table.gp > *:nth-child(2) > * > *:nth-child(6) > *.yellow,
.leaders-table.card > *:nth-child(2) > * > *:nth-child(7) > *.yellow{
    background-image: url(/public/img/tournament-yellow-circle.svg);
}
.leaders-table:not(.bombardirs):not(.assistant):not(.gp):not(.card) > *:nth-child(2) > * > *:nth-child(5){
    color: var(--orange);
}
.x7 .leaders-table:not(.bombardirs):not(.assistant):not(.gp):not(.card) > *:nth-child(2) > * > *:nth-child(5){
    color: var(--yellow);
}

.leaders-table > *:nth-child(2) > * > *:nth-child(2){
    height: 40px;
    position: relative
}
.leaders-table > *:nth-child(2) > * > *:nth-child(2).media::before,
.leaders-table > *:nth-child(2) > * > *:nth-child(2).pro::before{
    position: absolute;
    right: 20px;
    top: 0px;
    border-radius: 0px 0px 10px 10px;
    min-width: 59px;
    font-family: "Codec Pro";
    font-size: 12px;
    font-weight: 900;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.leaders-table > *:nth-child(2) > * > *:nth-child(2).media::before{
    background-color: var(--orange);
    content: "MEDIA";
}
.x7 .leaders-table > *:nth-child(2) > * > *:nth-child(2).media::before{
    background-color: var(--purple);
}
.leaders-table > *:nth-child(2) > * > *:nth-child(2).pro::before{
    background-color: white;
    content: "PRO";
    color: var(--grey)
}
.leaders-table > *:nth-child(2) > * > *:nth-child(2).pro > *,
.leaders-table > *:nth-child(2) > * > *:nth-child(2).media > *{
    max-width: calc(100% - 59px - 20px);
}

.leaders-table > *:nth-child(2) > *.empty{
    display: flex!important;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100px!important;
    opacity: 0.5;
}

@media screen and (max-width: 1312px) {
    .leaders-table > *:nth-child(1),
    .leaders-table > *:nth-child(2) > *{
        grid-template-columns: 20px 230px 30px repeat(6, 20px) 1fr;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(3) *:not(img){
        display: none;
    }
    .leaders-table{
        font-size: 10px;
    }
    .leaders-table > *:nth-child(1) > *:not(:last-child)::after,
    .leaders-table > *:nth-child(2) > * > *:not(:last-child)::after{
        content: unset;
    }
    .leaders-table > *:nth-child(1),
    .leaders-table > *:nth-child(2) > *{
        grid-template-columns: 20px 230px 30px repeat(6, 20px) 1fr;
        gap: 20px;
        padding: 0px 10px;
    }
    .leaders-table.bombardirs > *:nth-child(1),
    .leaders-table.bombardirs > *:nth-child(2) > *,
    .leaders-table.assistant > *:nth-child(1),
    .leaders-table.assistant > *:nth-child(2) > *,
    .leaders-table.gp > *:nth-child(1),
    .leaders-table.gp > *:nth-child(2) > *{
        grid-template-columns: 20px 390px 30px repeat(2, 20px) 1fr;
    }
    .leaders-table.card > *:nth-child(1),
    .leaders-table.card > *:nth-child(2) > *{
        grid-template-columns: 20px 350px 30px repeat(3, 20px) 1fr;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(2){
        width: 100%;
        transform: unset;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(3){
        padding: 5px;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(3) img{
        width: 20px;
        height: 20px;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(2){
        height: 30px;
    }
    .leaders-table > *:nth-child(2) > *{
        height: 50px;
    }
    .leaders-table > *:nth-child(1){
        height: 35px;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(2).media::before,
    .leaders-table > *:nth-child(2) > * > *:nth-child(2).pro::before{
        right: 0px;
        min-width: 12px;
        height: 100%;
        border-radius: 0px 5px 5px 0px;
        font-size: 10px;
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(2).media::before{
        content: "M";
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(2).pro::before{
        content: "P";
    }
    .leaders-table > *:nth-child(2) > * > *:nth-child(2).pro > *,
    .leaders-table > *:nth-child(2) > * > *:nth-child(2).media > *{
        max-width: calc(100% - 10px);
    }
    .leaders-table > *:nth-child(1) > *:nth-child(8) > *,
    .leaders-table > *:nth-child(1) > *:nth-child(9) > *,
    .leaders-table.card > *:nth-child(1) > *:nth-child(5) > *,
    .leaders-table.card > *:nth-child(1) > *:nth-child(6) > *{
        width: 15px;
        height: 15px;
    }
}
@media screen and (max-width: 720px) {
    .leaders-table > *:nth-child(1),
    .leaders-table > *:nth-child(2) > *{
        grid-template-columns: 20px calc(100vw - 20px - 20px - 110px - 50px) 30px repeat(3, 20px);
        gap: 10px;
    }
    .leaders-table.bombardirs > *:nth-child(1),
    .leaders-table.bombardirs > *:nth-child(2) > *,
    .leaders-table.assistant > *:nth-child(1),
    .leaders-table.assistant > *:nth-child(2) > *,
    .leaders-table.gp > *:nth-child(1),
    .leaders-table.gp > *:nth-child(2) > *{
        grid-template-columns: 20px calc(100vw - 20px - 20px - 110px - 20px) 30px repeat(2, 20px);
    }
    .leaders-table.card > *:nth-child(1),
    .leaders-table.card > *:nth-child(2) > *{
        grid-template-columns: 20px calc(100vw - 20px - 20px - 110px - 50px) 30px repeat(3, 20px);
    }
    .leaders-table:not(.bombardirs):not(.assistant):not(.gp):not(.card) > *:nth-child(1) > *:not(:nth-child(-n + 7)),
    .leaders-table:not(.bombardirs):not(.assistant):not(.gp):not(.card) > *:nth-child(2) > * > *:not(:nth-child(-n + 7)),
    .leaders-table:not(.bombardirs):not(.assistant):not(.gp):not(.card) > *:nth-child(1) > *:nth-child(4),
    .leaders-table:not(.bombardirs):not(.assistant):not(.gp):not(.card) > *:nth-child(2) > * > *:nth-child(4){
        display: none;
    }
    .leaders-table.bombardirs > *:nth-child(1) > *:nth-child(6),
    .leaders-table.bombardirs > *:nth-child(2) > * > *:nth-child(6){
        display: none;
    }
    .leaders-table.assistant > *:nth-child(1) > *:nth-child(6),
    .leaders-table.assistant > *:nth-child(2) > * > *:nth-child(6){
        display: none;
    }
    .leaders-table.gp > *:nth-child(1) > *:nth-child(6),
    .leaders-table.gp > *:nth-child(2) > * > *:nth-child(6){
        display: none;
    }
    .leaders-table.card > *:nth-child(1) > *:nth-child(7),
    .leaders-table.card > *:nth-child(2) > * > *:nth-child(7){
        display: none;
    }
    .leaders-table > *:nth-child(2) > *{
        height: 39px;
    }
    .leaders-table > *:nth-child(1){
        height: 29px;
    }
}

.team-container{
    box-sizing: border-box;
    padding-left: 276px;
    position: relative;
    min-height: 1344px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.team-container > .container{
    width: 100%;
}
.team-container > .block-header{
    padding-bottom: 0px!important;
}
.team-container .team--stats{
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 256px;
}
.team-container .team--stats > *:nth-child(1){
    padding: var(--padding);
    border-radius: 10px;
    margin-bottom: 91px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    background-color: var(--grey);
}
.team-container .team--stats > *:nth-child(1) > *:nth-child(1){
    padding: 35px;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: var(--light-grey);
}
.team-container .team--stats > *:nth-child(1) > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.team-container .team--stats > *:nth-child(1) > *:nth-child(2){
    width: 100%;
}
.team-container .team--stats > *:nth-child(1) > *:nth-child(2) *{
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 20px;
    font-weight: 500;
}
.team-container .team--stats > *:nth-child(1) > *:nth-child(3){
    position: absolute;
    top: calc(100% + var(--gap));
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    border-radius: 10px;
}
.team-container .team--stats > *:nth-child(1) > *:nth-child(3) > *,
.team-container .team--stats > *:nth-child(1) > *:nth-child(3) img{
    width: auto;
    height: 31px;
}
.team-container .team--stats > *:nth-child(2){
    font-size: 20px;
    font-weight: 500;
}

.team-container .team--stats > *:nth-child(3):not(:last-child){
    width: 100%;
    border-radius: 10px;
    background: var(--grey);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding);
    box-sizing: border-box;
    position: relative;
    gap: 10px;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p{
    margin: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(1){
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(1) > span:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(1) > span:nth-child(1)::before{
    content: "";
    display: block;
    height: 1em;
    width: 1em;
    border-radius: 100px;
}
.team-container .team--stats > *:nth-child(3):not(:last-child).live p:nth-child(1) > span:nth-child(1)::before{
    background: var(--red);
}
.team-container .team--stats > *:nth-child(3):not(:last-child).ended p:nth-child(1) > span:nth-child(1)::before{
    background: var(--light-grey);
}
.team-container .team--stats > *:nth-child(3):not(:last-child).scheduled p:nth-child(1) > span:nth-child(1)::before{
    background: var(--orange);
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    text-transform: uppercase;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong{
    font-weight: 500;
}
@media screen and (min-width: 1312px) {
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong:nth-child(2){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) strong:nth-child(3){
        display: none;
    }
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) img{
    height: 31px;
    width: 31px;
    object-fit: contain;
    object-position: center;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(2){
    font-weight: 900;
    font-size: 25px;
    text-transform: uppercase;
    margin-left: auto;
}
.team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(3){
    font-size: 20px;
    opacity: 0.5;
}
.team-container .team--stats > *:nth-child(3):not(:last-child).empty::before{
    content: "";
    display: block;
    width: 80px;
    height: 89px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 1312px){
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(4){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .team-container .team--stats > *:nth-child(3):not(:last-child){
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        row-gap: 10px;
        width: 171px;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1) img{
        width: 30px;
        height: 30px;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(1){
        font-size: 8px;
    }

    .team-container .team--stats > *:nth-child(3):not(:last-child) > p:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
    .team-container .team--stats > *:nth-child(3):not(:last-child) > p:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .team-container .team--stats > *:nth-child(3):not(:last-child) > p:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
    .team-container .team--stats > *:nth-child(3):not(:last-child) > p:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
    
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3){
        align-items: center;
        justify-content: center;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(1){
        flex-direction: column;
        font-size: 12px;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(2),
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(n + 2):nth-child(-n + 3) > span:nth-child(3){
        display: none;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(4){
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(4) span:nth-child(1){
        font-size: 15px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child) p:nth-child(4) span:nth-child(2){
        font-size: 8px;
        text-transform: uppercase;
        opacity: 0.5;
    }
}
.team-container .team--stats > *:last-child{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
}
.team-container .team--stats > *:last-child > *{
    background-color: var(--grey);
    border-radius: 10px;
    padding: var(--padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.team-container .team--stats > *:last-child > * > *:nth-child(1){
    font-family: "Codec Pro";
    font-size: 40px;
    font-weight: 900;
    font-style: italic;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 10px;
    margin: 0px;
}
.team-container .team--stats > *:last-child > * > *:nth-child(1) > *{
    font-size: 20px;
    opacity: 0.5;
}
.team-container .team--stats > *:last-child > * > *:nth-child(2){
    opacity: 0.5;
}
.team-container .team--stats > *:last-child > * > *:nth-child(3){
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.team-container .team--tabs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.team-container .team--tabs > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 64px;
    background-color: var(--grey);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.team-container .team--tabs > *:first-child{
    border-radius: 10px 0px 0px 10px;
}
.team-container .team--tabs > *:last-child{
    border-radius: 0px 10px 10px 0px;
}
.team-container .team--tabs > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.team-container .team--tabs > *.active{
    background-color: var(--orange);
}
.team-container.x7 .team--tabs > *.active{
    background-color: white;
    color: var(--grey);
}

.team-container .team--members .swiper-slide{
    display: grid;
    grid-template-columns: 183px 1fr;
    gap: var(--gap);
}
.team-container .team--members .swiper-slide > *:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background: var(--light-grey);
    border-radius: 10px;
    width: 100%;
}
.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(1){
    width: 100%;
    height: 197px;
    position: relative;
}
.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(1) > .player-img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: var(--orange);
    background-image: url(/public/img/peak-bg-2.svg);
    background-size: cover;
    object-fit: contain;
    object-position: center bottom;
}

.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(1) .club{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(1) span{
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 5px 10px;
    border-radius: 0px 10px 0px 10px;
    background: var(--grey);
    text-align: center;
    font-family: "Codec Pro";
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    
    font-family: "Codec Pro";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
    padding: 0px 5px;
    box-sizing: border-box;
}
.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(2) > *:nth-child(1){
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(2) > *{
    padding: 5px 0px;
}
.team-container .team--members .swiper,
.team-container .team--members .swiper-wrapper{
    width: 100%;
}
.team-container .team--members{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.team-container .team--members .swiper-slide > *:nth-child(2){
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid var(--light-grey);
    width: 100%;
}
.team-container .team--members .swiper-slide > *:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
}
.team-container .team--members .swiper-slide > *:nth-child(2) > * > *:nth-child(1){
    opacity: 0.5;
}
.team-container .team--members .swiper-slide > *:nth-child(2) > * > *:nth-child(2){
    font-weight: 500;
}
.team-container .team--members .swiper-slide > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.team--videos-filter{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.team--videos-filter > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.team--videos-filter > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.team--videos-filter > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

.team--videos{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--gap);
}
.team--videos > *{
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--light-grey);
    position: relative;
    height: 316px;
}
.team--videos.x7 > *{
    background-color: var(--green);
    color: var(--grey);
}
.team--videos > * > *:nth-child(1){
    position: relative;
    height: 203px;
    overflow: hidden;
}
.team--videos > * > *:nth-child(1) img.preview{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.team--videos > * > *:nth-child(1) .play{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background-image: url(/public/img/play-btn-2.svg);
    background-size: 100% 100%;
}
.team--videos.x7 > * > *:nth-child(1) .play{
    background-image: url(/public/img/play-btn-2-x7.svg);
}
.team--videos > * > *:nth-child(1) span{
    padding: 5px 10px;
    border-radius: 10px;
    background: var(--light-grey);

    position: absolute;
    top: 10px;
    right: calc(10px + 35px + 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 35px;
    box-sizing: border-box;
}
.team--videos.x7 > * > *:nth-child(1) span{
    background: white;
}
.team--videos > * > *:nth-child(2){
    padding: 19px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.team--videos > * > *:nth-child(2) span{
    opacity: 0.5;
    font-size: 12px;
}
.team--videos > * > *:nth-child(2) h2{
    font-weight: 500;
    font-family: "ALS Unios";
    font-size: 20px;
    display: -webkit-box; /* Required for -webkit-line-clamp */
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
    overflow: hidden; /* Hides overflowing content */
    text-overflow: ellipsis; /* Ensures ellipsis is displayed */
}
.team--videos > *.empty::before{
    content: "";
    display: block;
    width: 150px;
    height: 168px;
    background: url(/public/img/placeholder--tournament-grid-card.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (min-width: 1312px){
    .team--videos > *.hidden{
        display: none;
    }
    .team-container .team--members .swiper-wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        transform: unset!important;
    }
    .team-container .team--members .swiper-slide{
        margin-right: 0px!important;
    }
    .team-container .team--members .block-header .arrows{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .team--videos{
        grid-template-columns: 1fr 1fr;
    }
    .team--videos > *{
        width: 352px;
        min-width: 352px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 262px;
    }
    .team--videos > * > *:nth-child(1){
        height: 162px;
    }
    .team--videos > * > *:nth-child(1) .play{
        width: 30px;
        height: 30px;
    }
    .team--videos > * > *:nth-child(1) span{
        height: 20px;
        font-size: 12px;
        border-radius: 5px;
        top: 15px;
        right: calc(10px + 30px + 10px);
    }
    .team--videos > * > *:nth-child(2) h2{
        font-size: 17px;
    }
    .team--videos > * > *:nth-child(2) span{
        font-size: 12px;
    }
    .team--videos > * > *:nth-child(2){
        padding: 10px;
    }
    .team--videos > *.empty::before{
        width: 90px;
    }
}
@media screen and (max-width: 720px){
    .team--videos > *{
        scroll-snap-align: center;
        width: calc((100vw - 20px - 10px) / 2);
        min-width: calc((100vw - 20px - 10px) / 2);
        height: 180px;
    }
    .team--videos > * > *:nth-child(1){
        height: 100px;
    }
    .team--videos > * > *:nth-child(2) h2{
        display: -webkit-box; /* Required for -webkit-line-clamp */
        -webkit-line-clamp: 3; /* Limits text to 2 lines */
        -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
        overflow: hidden; /* Hides overflowing content */
        text-overflow: ellipsis; /* Ensures ellipsis is displayed */
        font-size: 12px;
    }
    .team--videos > * > *:nth-child(2){
        gap: 5px;
    }
    .team--videos > * > *:nth-child(2) span{
        font-size: 8px;
    }
    .team--videos > * > *:nth-child(1) .play{
        width: 20px;
        height: 20px;
    }
    .team--videos > * > *:nth-child(1) span{
        font-size: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        top: 10px;
        right: calc(10px + 20px + 5px);
    }
}
.team-container .tournament--pretendants{
    grid-template-columns: 1fr 1fr 1fr;
}
.team-container .team--members .swiper-slide > *:nth-child(1),
.team-container .team--members .swiper-slide > *:nth-child(2){
    box-sizing: border-box;
}

@media screen and (max-width: 1312px) {
    .team-container{
        padding-left: 0px;
    }
    .team-container .team--stats{
        position: unset;
        top: unset;
        left: unset;
        width: 100%;
        display: grid;
        grid-template-columns: 171px 1fr;
        grid-template-rows: 180px 61px 95px;
        gap: 15px;
    }
    .team-container .team--stats > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .team-container .team--stats > *:nth-child(3):not(:last-child) { grid-area: 3 / 1 / 4 / 2; }
    .team-container .team--stats > *:last-child { grid-area: 1 / 2 / 4 / 3; }
    .team-container .team--stats > *:nth-child(2){
        display: none;
    }
    .team-container .team--stats > *:last-child{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0px;
        background-color: var(--grey);
        border-radius: 10px;
    }
    .team-container .team--stats > *:last-child > *{
        background-color: unset;
        border-radius: 0px;
    }
    .team-container .team--stats > *:last-child > * > *:nth-child(3){
        position: unset;
        top: unset;
        right: unset;
        order: -1;
        margin-left: auto;
        margin-bottom: auto;
    }
    .team-container .team--stats > *:last-child > *:nth-child(-n + 3){
        border-bottom: 2px solid var(--light-grey);
    }
    .team-container .team--stats > *:last-child > *:nth-child(1),
    .team-container .team--stats > *:last-child > *:nth-child(2),
    .team-container .team--stats > *:last-child > *:nth-child(4),
    .team-container .team--stats > *:last-child > *:nth-child(5){
        border-right: 2px solid var(--light-grey);
    }
    .team-container .team--stats > *:nth-child(1){
        margin-bottom: 0px;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(1){
        width: 100px;
        height: 100px;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3){
        top: calc(100% + 15px);
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3) > *,
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3) img{
        height: 21px;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child){
        padding: 10px;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(2) *{
        font-size: 15px;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(1){
        padding: 15px;
    }
    .team-container .team--tabs > *{
        font-size: 15px;
        height: 48px;
    }
    .team-container .team--members .swiper-slide{
        grid-template-columns: 1fr;
        padding: 10px;
        background-color: var(--grey);
        border-radius: 10px;
        box-sizing: border-box;
    }
    .team-container .team--members .swiper-slide > *:nth-child(1),
    .team-container .team--members .swiper-slide > *:nth-child(2){
        width: 213px;
        box-sizing: border-box;
    }
    .team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(2){
        font-size: 12px;
    }
    .team-container .team--members .swiper-slide > *:nth-child(2) > *{
        font-size: 10px;
    }
    .team-container .tournament--pretendants{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        display: grid;
    }
}
@media screen and (max-width: 720px) {
    .team-container .team--stats{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .team-container .team--stats > *{
        grid-area: unset!important;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3){
        position: unset;
        top: unset;
        left: unset;
    }
    .team-container .team--stats > *:nth-child(1){
        display: grid;
        grid-template-columns: 100px calc(100vw - 20px - 100px - 20px - 20px);
        column-gap: 20px;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(2){
        margin-top: auto;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3){
        margin-bottom: auto;
        justify-content: start;
        padding-left: 0px;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3) > *,
    .team-container .team--stats > *:nth-child(1) > *:nth-child(3) img{
        height: 25px;
    }
    .team-container .team--stats{
        grid-template-rows: unset;
    }
    .team-container .team--stats > *:nth-child(1) > *:nth-child(2) *{
        font-size: 20px;
        font-weight: 500;
        text-align: start;
    }
    .team-container .team--stats > *:nth-child(3):not(:last-child){
        display: none;
    }
    .team-container .team--stats > *:last-child > * > *:nth-child(3){
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
    }
    .team-container .team--stats > *:last-child > * > *:nth-child(1){
        font-size: 20px;
    }
    .team-container .team--stats > *:last-child > * > *:nth-child(1) > *{
        font-size: 10px;
    }
    .team-container .team--stats > *:last-child > * > *:nth-child(2){
        font-size: 8px;
    }
    .team-container .team--tabs{
        gap: 10px;
    }
    .team-container .team--tabs > *{
        border-radius: 10px!important;
        border-right: unset!important;
    }
    .team-container .team--members .swiper-slide{
        width: 218px;
        grid-template-columns: 1fr 1fr;
    }
    .team-container .team--members .swiper-slide > *:nth-child(1),
    .team-container .team--members .swiper-slide > *:nth-child(2){
        width: calc((100vw - 20px - 30px) / 2);
    }
    .team-container .team--members .swiper-slide > *:nth-child(2) > *{
        padding: 10px 10px;
        height: 32px;
        box-sizing: border-box;
    }
    .team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(1){
        height: 159px;
    }
    .team-container .tournament--pretendants{
        grid-template-columns: 1fr 1fr;
    }
    .tournament--pretendants > *,
    .team-container .tournament--pretendants > * > *:nth-child(1),
    .team-container .tournament--pretendants > * > *:nth-child(2){
        width: 100%;
    }
    .team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(2){
        font-size: 10px;
    }
    .team-container .team--members .swiper-slide > *:nth-child(1) > *:nth-child(1) span{
        font-size: 12px;
    }
}
@media screen and (min-width: 1312px) {
    .team-container.x7 .team--members .default-container:nth-child(1) .block-header{
        background-color: var(--yellow);
        color: var(--grey);
    }
    .team-container.x7 .team--members .default-container:nth-child(2) .block-header{
        background-color: var(--green);
        color: var(--grey);
    }
    .team-container.x7 .team--members .default-container:nth-child(3) .block-header{
        background-color: var(--purple);
    }
    .team-container.x7 .team--members .default-container:nth-child(4) .block-header{
        background-color: var(--blue);
        color: var(--grey);
    }
}
.team-container.x7 .team--members .default-container:nth-child(1) .swiper-slide > div:nth-child(1) > *:nth-child(1) > .player-img{
        background-color: var(--yellow);
}
.team-container.x7 .team--members .default-container:nth-child(2) .swiper-slide > div:nth-child(1) > *:nth-child(1) > .player-img{
        background-color: var(--green);
}
.team-container.x7 .team--members .default-container:nth-child(3) .swiper-slide > div:nth-child(1) > *:nth-child(1) > .player-img{
        background-color: var(--purple);
}
.team-container.x7 .team--members .default-container:nth-child(4) .swiper-slide > div:nth-child(1) > *:nth-child(1) > .player-img{
        background-color: var(--blue);
}
.team-container.x7 .team--videos > *{
    background-color: var(--green);
}
.team-container.x7 .team--videos > * > *:nth-child(2) h2,
.team-container.x7 .team--videos > * > *:nth-child(2) span{
    color: var(--grey);
}
.team-container.x7 .tournament--pretendants > * > *:nth-child(2){
    background-color: white;
    color: var(--grey);
}


.match--bets-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--gap);
}
.match--bets-grid > *{
    width: 100%;
    box-sizing: border-box;
    min-height: 273px;
}
.match--fl-play{
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    padding: var(--padding);
    border-radius: var(--radius);
    border: 2px solid var(--grey);
    background-image: url(/public/img/peak-bg.svg);
    background-color: var(--orange);
    background-size: 100% auto;
    object-fit: contain;
    object-position: center top;
    align-items: center;
}
.match--fl-play > *:nth-child(odd){
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--grey);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--grey);
    width: 154px;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 500;
}
.match--fl-play > *:nth-child(odd) > img{
    width: 100%;
    height: 115px;
    background-image: url(/public/img/peak-bg.svg);
    background-color: var(--light-grey);
    background-size: 100% auto;
    object-fit: contain;
    object-position: center top;
}
.match--fl-play > *:nth-child(odd) *:nth-child(2),
.match--fl-play > *:nth-child(odd) *:nth-child(3){
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    font-size: 17.6px;
}
.match--fl-play > *:nth-child(odd) *:nth-child(3){
    background: var(--light-grey);
}
.match--fl-play > *:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    align-items: center;
}
.match--fl-play > *:nth-child(2) > *:nth-child(1){
    width: 222px;
    height: auto;
}
.match--fl-play > *:nth-child(2) > *:nth-child(2){
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    width: 178px;
    height: 69px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 500;
    color: white;
    cursor: pointer;
}

.match--bets-grid .match--bets > div:nth-child(2) > *{
    min-width: 7%;
}
.match--bets-grid .match--bets > div:nth-child(2) > *:nth-child(1){
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.match--bets-grid .match--bets > div:nth-child(2) > *:nth-child(3){
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.match--bets-grid .match--bets > div:nth-child(1) > div > *:not(span){
    border-radius: 10px;
}
.match--pick-quiz{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.match--pick-quiz > h2{
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
    width: 100%;
}
.match--pick-quiz > span{
    opacity: 0.5;
    width: 100%;
    text-align: center;
}
.match--pick-quiz > a{
    font-size: 20px;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    background-color: var(--light-grey);
    cursor: pointer;
    border-radius: 10px;
}
.match--bets-grid .match--pick-quiz .block-header,
.match--bets-grid #match--bets .block-header{
    background-color: var(--orange);
}
.match--bets-grid .match--pick-quiz .block-header img,
.match--bets-grid #match--bets .block-header img{
    height: 26px;
    width: auto;
}
.match--bets-grid .match--pick-quiz .block-header a,
.match--bets-grid #match--bets .block-header a{
    padding: 10px 15px;
    color: var(--grey);
    background-color: white;
    border-radius: 10px;
}
.match--bets-grid #match--bets > span{
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
}
.match--bets-grid #match--bets > a{
    display: none;
}
@media screen and (max-width: 1312px) {
    .match--bets-grid{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 720px) {
    .match--fl-play > *:nth-child(odd) > img{
        height: 65px;
    }
    .match--fl-play > *:nth-child(odd){
        width: 84px;
    }
    .match--fl-play > *:nth-child(odd) *:nth-child(2), .match--fl-play > *:nth-child(odd) *:nth-child(3){
        height: 20px;
        font-size: 10px;
    }
    .match--fl-play > *:nth-child(2) > *:nth-child(1){
        width: 90%;
    }
    .match--fl-play > *:nth-child(2) > *:nth-child(2){
        font-size: 15px;
        width: auto;
        height: auto;
        box-sizing: border-box;
        padding: 10px 15px;
    }
    .match--bets-grid > *{
        min-height: 150px;
    }
    .match--fl-play{
        grid-template-columns: 84px 1fr 84px;
        gap: 10px;
    }
    .match--fl-play > *:nth-child(2){
        gap: 15px;
    }
    .match--pick-quiz > h2{
        font-size: 20px;
        max-width: 331px;
        margin-left: auto;
        margin-right: auto;
    }
    .match--pick-quiz > span{
        font-size: 10px;
    }
    .match--pick-quiz > a{
        font-size: 15px;
        height: 50px;
    }
    .match--bets-grid #match--bets > span{
        font-size: 15px;
    }
    .match--bets-grid #match--bets > a{
        font-size: 15px;
        font-weight: 700;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        background-color: var(--light-grey);
        cursor: pointer;
        border-radius: 10px;
    }
    .match--bets-grid .match--pick-quiz .block-header a, .match--bets-grid #match--bets .block-header a{
        display: none;
    }
}

.fl-tabs{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.fl-tabs > *{
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    background-color: var(--grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.fl-tabs > * p{
    margin: 0px;
}
.fl-tabs > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.fl-tabs > *:first-child{
    border-radius: 10px 0px 0px 10px;
}
.fl-tabs > *:last-child{
    border-radius: 0px 10px 10px 0px;
}
.fl-tabs > *.active{
    background-color: var(--orange);
}
.fl-tabs.x7 > *.active{
    background-color: var(--white);
    color: var(--grey)
}
@media screen and (min-width: 720px){
    .fl-tabs > * img{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .fl-tabs > *{
        font-size: 12px;
    }
}
@media screen and (max-width: 720px){
    .fl-tabs > * p span{
        display: none;
    }
    .fl-tabs{
        margin-top: auto;
        overflow: auto;
        gap: 10px;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }
    .fl-tabs > *{
        border-radius: var(--radius)!important;
        padding: 10px 15px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .fl-tabs > *:not(:last-child){
        border-right: unset;
    }
}

.fl-rating{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.fl-rating > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: calc((1312px - 20px) / 2);
}
.fl-rating > div:nth-child(1) > *:nth-child(1){
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fl-rating > div:nth-child(1) > *:nth-child(1) .search{
    width: 100%;
    box-sizing: border-box;
}
.fl-rating > div:nth-child(1) > *:nth-child(1) > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 105px 137px;
    gap: 10px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2){
    border-radius: 10px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2){
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2){
    max-height: 558px;
    overflow-x: auto;
    min-height: 300px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)).selected > *:nth-child(2){
    background-color: var(--orange);
}

.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2).media::after,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2).pro::after{
    position: absolute;
    content: "";
    font-family: "Codec Pro";
    font-weight: 900;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    right: 0px;
    top: 0px;
    min-width: 15px;
    height: 100%;
    border-radius: 0px 5px 5px 0px;
    font-size: 10px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2).media::after{
    background-color: var(--orange);
    content: "M";
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2).pro::after{
    background-color: white;
    content: "P";
    color: var(--grey)
}

.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)){
    display: grid;
    width: fit-content;
    grid-template-columns: 50px 262px repeat(auto-fit, 50px);
    grid-template-columns: 50px 262px repeat(var(--tours-count), 50px) 50px;
    grid-auto-flow: column;
    align-items: center;
    gap: 20px;
    padding: 0px 10px;
    box-sizing: border-box;
    font-weight: 500;
    position: relative;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(1)::before{
    background-color: var(--light-grey);
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(1) > *:nth-child(2){
    height: 100%;
    background-color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1),
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2){
    z-index: 1;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2).tooltip.active,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2).tooltip:hover{
    z-index: 10;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-last-child(-n + 2){
    width: 50px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2){
    position: relative;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2)::before{
    content: "";
    position: sticky;
    margin-bottom: -50px;
    top: 0px;
    left: 0px;
    display:block;
    width: 100%;
    min-height: 50px;
    background: var(--light-grey);
    z-index: 1;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *{
    position: relative;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1){
    text-align: center;
    position: sticky!important;
    left: 10px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1)::after,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:last-child::before{
    content: ""!important;
    width: 80px!important;
    height: 39px!important;
    position: absolute!important;
    top: 50%!important;
    left: -10px!important;
    transform: translateY(-50%)!important;
    background-color: var(--grey)!important;
    z-index: -1!important;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:last-child{
    position: sticky!important;
    right: 0px!important;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(1) > *:nth-child(1)::after,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(1) > *:last-child::before{
    background-color: var(--light-grey)!important;
}

.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *.placeholder{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    min-height: 200px;
    font-size: 20px!important;
    width: 100%;
}
@media screen and (max-width: 1312px) {
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1)::after,
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:last-child::before{
        width: 50px!important;
        height: 29px!important;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *.placeholder{
        font-size: 15px!important;
    }
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2){
    text-align: center;
    position: sticky!important;
    left: 80px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)){
    min-height: 62px;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)):not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(1){
    background-color: var(--light-grey);
    min-height: 50px;
    position: sticky;
    top: 0px;
    z-index: 20;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *{
    position: relative;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *::before,
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *:not(:first-child)::before{
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    right: calc(100% + 9px);
    top: 50%;
    transform: translateY(-50%);
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1):before{
    right: unset;
    left: calc(100% + 9px);
}
/* .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2)::before{
    content: unset!important;
} */
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:not(:first-child),
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *:not(:first-child){
    text-align: center;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *:nth-child(2){
    padding: 10px 10px;
    border-radius: 10px;
    background-color: var(--light-grey);
    overflow: hidden;
    text-overflow: ellipsis;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *:nth-child(2).tooltip{
    overflow: unset;
}
.fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(-n + 3) > *:nth-child(2).tooltip > *:nth-child(2){
    bottom: unset;
    top: calc(100% + 15px);
    z-index: 10;
    max-width: 500px;
}
.sort{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.sort::after{
    content: "";
    display: block;
    width: 11px;
    height: 6px;
    background-image: url(/public/img/icon_sort.svg);
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
.sort.asc::after{
    background-image: url(/public/img/icon_sort_asc.svg);
}
.sort.desc::after{
    background-image: url(/public/img/icon_sort_desc.svg);
}

.field-container{
    background-color: var(--dark-grey);
    background-image:  url(/public/img/peak-bg-2.svg);
    background-position: center center;
    background-repeat: repeat;
    background-size: auto auto;
    border-radius: 10px;
    padding: var(--padding);
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    position: relative;
}
.field{
    width: 100%;
    background-image:url(/public/img/field-2.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
    height: 536px;
}
.field > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}
.field-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--grey);
    border-radius: 10px;
    border: 2px solid var(--grey);
    width: 103px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 500;
    position: relative;
}
.field-card .cross{
    position: absolute;
    top: -1px;
    right: -1px;
    cursor: pointer;
    border-radius: 0px 10px 0px 10px;
    background-color: var(--grey);
    background-image: url(/public/img/tournament-red-circle.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 23px;
    height: 23px;
}
.field-card .swap{
    position: absolute;
    top: -15px;
    left: -15px;
    cursor: pointer;
    border-radius: 10px;
    background-color: var(--grey);
    background-image: url(/public/img/field_swap.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 30px;
    height: 30px;
}
.field-card .swap.active{
    background-color: var(--orange);
}
.field-card > img:nth-child(1){
    width: 100%;
    height: 78px;
    background-image: url(/public/img/peak-bg.svg);
    background-color: var(--light-grey);
    background-size: 100% auto;
    object-fit: contain;
    object-position: center top;
    border-radius: 10px;
}
.field-card *:nth-child(2),
.field-card *:nth-child(3){
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    gap: 5px;
}
.field-card *:nth-child(3) img{
    height: 1.2em;
    width: 1.2em;
}
.field-card *:nth-child(3){
    background: var(--light-grey);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.field-card.add{
    background-color: rgba(255, 255, 255, 0.39);
    border: unset;
    cursor: pointer;
    transition: var(--transition);
}
.field-card.add.active{
    background-color: var(--orange);
}
.field-card.trauma > img:nth-child(1){
    opacity: 0.3;
}
.field-card.trauma .trauma{
    position: absolute;
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
}
.field-card .cap{
    position: absolute;
    top: 50px;
    left: 6px;
    width: 14px;
    height: 14px;
}
.field-card.add > img{
    width: 35px;
    object-position: center;
    background-image: unset;
    background-color: unset;
}
.field-card.add span{
    height: 40px;
}
.field > *.centered-top > *:not(:first-child):not(:last-child),
.field > *.centered-top > *:first-child:last-child{
    transform: translateY(calc(40px * -0.5));
}
.field > *.centered-bot > *:not(:first-child):not(:last-child),
.field > *.centered-bot > *:first-child:last-child{
    transform: translateY(calc(40px * 0.5));
}
.field > .spread-bot{
    gap: calc((var(--gap) * 2) + 100px);
}
.field > .centered-goalkeeper{
    margin-top: 0px;
    height: 0px;
}
.field > .centered-goalkeeper > *{
    transform: translateY(calc(-40px));
}
@media screen and (max-width: 1312px) {
    .field > .spread-bot{
        gap: calc((var(--gap) * 2) + 50px);
    }
    .field > .centered-goalkeeper{
        margin-top: -10px;
        height: 0px;
    }
    .field > .centered-goalkeeper > *{
        transform: translateY(calc(-10px));
    }
}
.field-container > .summ{
    position: absolute;
    top: var(--padding);
    right: var(--padding);
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 5px;
    text-align: end;
}
.field-container > .summ > *:nth-child(1){
    opacity: 0.5;
}
.field-container > .summ > *:nth-child(2){
    font-size: 20px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.field-container > .summ > *:nth-child(2) img{
    width: 1em;
    height: 1em;
    object-fit: contain;
    object-position: center;
}
.field-container .bench{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-evenly;
}
.field-container .bench > *{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 10px;
    box-sizing: border-box;
    gap: 10px;
    min-height: 150px;
    width: 113px;
    background-image: url(/public/img/field-bench.svg);
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}
.field-container .bench > * > .swap{
    position: absolute;
    top: -10px;
    left: -10px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: block;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 10px;
    background-color: var(--grey);
    transition: var(--transition);
}
.field-container .bench > * > .swap.active{
    background-color: var(--orange);
}
.field-container .bench > * > .swap img{
    width: 100%;
    height: 100%;
}
.field-container .bench > * > span:nth-child(1){
    display: block;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
}
.fl-rating > div:nth-child(2) .block-header > *:nth-child(2){
    font-size: 20px;
    font-weight: 500;
    color: var(--orange);
    margin-right: auto;
}
.fl-rating > div:nth-child(2) .block-header > *:nth-child(3){
    opacity: 0.5;
}
.fl-rating > div:nth-child(2){
    border-radius: 10px;
}

@media screen and (max-width: 1312px) {
    .field-card .swap{
        width: 15px;
        height: 15px;
        background-size: 9px 9px;
        border-radius: 5px;
        left: -7px;
        top: -7px;
    }
    .field-card.trauma .trauma{
        height: 10px;
        width: 10px;
        top: 2px;
        left: 2px;
    }
    .field-card .cap{
        top: 26px;
        left: 4px;
        width: 7px;
        height: 7px;
    }
    .field-card *:nth-child(2),
    .field-card *:nth-child(3){
        font-size: 8px;
        height: 10px;
        gap: 3px;
    }
    .field-card *:nth-child(2), .field-card *:nth-child(3){
        font-size: 6px;
    }
    .field-card > img:nth-child(1){
        height: 40px;
        border-radius: 5px;
    }
    .field-card.add > img{
        width: 25px;
    }
    .field-card.add span{
        height: 20px;
    }
    .field-card{
        width: 50px;
        border-radius: 5.5px;
        border-width: 1px;
    }
    .field-container .bench > *{
        width: 62px;
        min-height: 82px;
        gap: 5px;
        padding-top: 5px;
    }
    .field-container .bench > * > span:nth-child(1){
        font-size: 10px;
    }
    .field{
        height: 302px;
        gap: 10px;
    }
    .field-card .cross{
        width: 13px;
        height: 13px;
        background-size: 8px 8px;
        border-radius: 0px 5.5px 0px 5.5px;
    }
}
@media screen and (min-width: 1312px) {
    .fl-rating > div:nth-child(2) .button:last-child{
        display: none;
    }
}

@media screen and (max-width: 1312px) {
    .fl-rating > div:nth-child(1){
        width: calc((720px - 20px) / 2);
    }
    .fl-rating > div:nth-child(1) > *:nth-child(1) > *:nth-child(2){
        grid-template-columns: 239px 105px;
        gap: 10px;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(1) > *:nth-child(2) > *:last-child{
        display: none;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *::before,
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *:not(:first-child)::before{
        content: unset;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *,
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)){
        grid-template-columns: 30px 127px repeat(auto-fit, 30px);
        grid-template-columns: 30px 127px repeat(var(--tours-count), 30px) 30px;
        font-size: 10px;
        gap: 10px;
    }
    .fl-rating .pagination > div *.ofb{
        display: none;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)){
        min-height: 39px;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:nth-child(1){
        min-height: 29px;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2)::before{
        min-height: 29px;
        margin-bottom: -29px;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(2){
        left: 50px;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)) > *:nth-child(2){
        padding: 8px 10px;
    }
    .pagination > div > *, .pagination > a{
        width: 40px;
        height: 40px;
    }
    .fl-rating > div:nth-child(2) .block-header > *:nth-child(2){
        font-size: 10px;
        font-weight: 400;
    }
    .fl-rating > div:nth-child(2) .block-header > *:nth-child(3){
        font-size: 10px;
    }
    .fl-rating > div:nth-child(2) .block-header{
        padding: 10px;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2){
        max-height: 312px;
    }
}
@media screen and (max-width: 720px) {
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2){
        max-height: unset;
    }
    .fl-rating{
        grid-template-columns: 1fr;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(1) > *:nth-child(2){
        grid-template-columns: 1fr 1fr;
    }
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *,
    .fl-rating > div:nth-child(1) > *:nth-child(2) > *:nth-child(2) > *:not(:nth-child(1)){
        grid-template-columns: 30px calc(100vw - 20px - 20px - 120px - 40px) repeat(auto-fit, 30px);
        grid-template-columns: 30px calc(100vw - 20px - 20px - 150px - 50px) repeat(var(--tours-count), 30px) 30px;
        font-size: 10px;
        gap: 10px;
    }
    .fl-rating > div:nth-child(1){
        width: calc(100vw - 20px);
    }
    .fl-rating.active > *:nth-child(1),
    .fl-rating:not(.active) > *:nth-child(2){
        display: none;
    }
    .fl-tabs{
        order: 1;
        position: fixed;
        bottom: -12px;
        left: 0px;
        width: 100vw;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0px;
        z-index: 999;
    }
    .fl-tabs > *{
        border-radius: 0px!important;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-transform: capitalize;
        font-size: 10px;
        font-weight: 500;
        padding: 10px 0px;
        padding-bottom: 25px;
    }
    .fl-tabs > *:first-child{
        border-top-left-radius: 10px!important;
    }
    .fl-tabs > *:last-child{
        border-top-right-radius: 10px!important;
    }
    .fl-tabs > * img{
        height: 30px;
        width: 30px;
        object-fit: contain;
        object-position: center;
    }
    .fl-tabs > *:not(:last-child){
        border-right: 2px solid var(--light-grey);
    }
}

.fl-stats{
    display: grid;
    grid-template-columns: 848px 444px;
    gap: var(--gap);
}
.fl-stats .fl-stats--points { grid-area: 1 / 1 / 2 / 3; }
.fl-stats .fl-stats--players { grid-area: 2 / 1 / 3 / 2; }
.fl-stats .fl-stats--field { grid-area: 2 / 2 / 3 / 3; }

.fl-stats .fl-stats--points > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 256px;
    overflow: auto;
}
.fl-stats .fl-stats--points > div:nth-child(2) > *{
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    gap: 10px;
    align-items: center;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(odd){
    opacity: 0.5;
    font-size: 20px;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2){
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(1),
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    text-align: end;
    gap: 0.5em;
    white-space: nowrap;
    min-width: 5%;
    max-width: 95%;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(1) > *,
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    text-align: end;
    gap: 0.5em;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(1) > *,
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3) > *{
    transform: translateX(50%);
}

.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(1) > *,
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3) > *{
    font-weight: 400;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(1) > * > *:nth-child(1),
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3) > * > *:nth-child(1){
    opacity: 0.5;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(2){
    position: relative;
    height: 7px;
    background-color: var(--light-grey);
}


.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(2) > div{
    position: absolute;
    overflow: visible;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(2) > div{
    height: 100%;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(2) > *:nth-child(1){
    background-color: white;
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(2) > *:nth-child(2){
    background-color: var(--orange);
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3) > * > *:nth-child(2){
    color: var(--orange);
}
.fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(2) > div::after{
    content: "";
    width: 2px;
    height: calc(100% + 4px);
    position: absolute;
    top: -2px;
    right: 0px;
    z-index: 2;
    background-color: inherit;
}
.fl-stats .fl-stats--field{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.fl-stats .fl-stats--field > .block-header{
    padding-bottom: 0px;
}

.fl-stats .default-container{
    border-radius: 10px;
}
@media screen and (min-width: 1312px) {
    .fl-stats .field-container{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .fl-stats .field{
        height: 366px;
        gap: 20px;
    }
    .fl-stats .field-card{
        width: 70px;
    }
    .fl-stats .field-card > img:nth-child(1){
        height: 53px;
    }
    .fl-stats .field-card *:nth-child(2),
    .fl-stats .field-card *:nth-child(3){
        font-size: 7px;
        height: 13px;
    }
    .fl-stats .field-card .cross{
        width: 15px;
        height: 15px;
        background-size: 10px 10px;
    }
    .fl-stats .field-container .bench > *{
        width: 78px;
        min-height: 103px;
        padding-top: 5px;
        gap: 5px;
    }
    .fl-stats .field-container .bench > * > span:nth-child(1){
        font-size: 11px;
    }
}
.fl-stats .fl-stats--field > .default-container > .block-header > *:nth-child(2){
    color: var(--orange);
}
@media screen and (max-width: 1312px){
    .fl-stats{
        grid-template-columns: 351px 351px;
    }
    .fl-stats .fl-stats--points { grid-area: 1 / 1 / 2 / 2; }
    .fl-stats .fl-stats--field { grid-area: 1 / 2 / 2 / 3; }
    .fl-stats .fl-stats--players { grid-area: 2 / 1 / 3 / 3; }
    .fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(1),
    .fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > div:nth-child(3){
        font-size: 10px;
        min-width: 12%;
        max-width: 88%;
    }
    .fl-stats .fl-stats--points > div:nth-child(2){
        max-height: 473px;
    }
    .fl-stats .fl-stats--points > div:nth-child(2) > *{
        gap: 10px;
        grid-template-columns: 45px 1fr 30px;
        padding-right: 5px;
    }

    .fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(3){
        text-align: end;
    }
    .fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(1),
    .fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(3){
        font-size: 15px;
    }
    .fl-stats .fl-stats--points > div:nth-child(2) > * > *:nth-child(2) > *{
        font-size: 10px;
    }
    .fl-stats .default-container{
        padding: 10px;
    }
    .fl-stats .default-container .block-header.underline{
        transform: translateX(-10px);
        width: calc(100% + 20px);
        padding: 10px;
        margin-top: -10px;
    }
    .fl-stats .fl-stats--field > .block-header{
        display: none;
    }
    .fl-stats .index--best-players{
        padding: 0px;
    }
}
@media screen and (max-width: 720px) {
    .fl-stats{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .fl-stats .fl-stats--players{
        order: 1;
    }
}

.fl-profile{
    min-height: calc(100vh - 330px - var(--gap) - var(--gap));
    gap: 0px;
}
.fl-profile .block-header{
    margin: 0px!important;
    transform: unset!important;
    width: 100%!important;
}
.fl-profile > div:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 330px - var(--gap) - var(--gap) - 67px);
}
.fl-profile > div:nth-child(2) > div:nth-child(2) img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0px 0px 10px 0px;
}
.fl-profile > div:nth-child(2) > *:nth-child(1){
    padding: var(--padding);
    box-sizing: border-box;
    height: 100%;
    min-height: fit-content;
}
.fl-profile > div:nth-child(2) > *:nth-child(1) > *{
    height: 100%;
    min-height: fit-content;
    background-color: var(--dark-grey);
    background-image: url(/public/img/peak-bg-2.svg);
    padding: var(--padding);
    box-sizing: border-box;
    background-position: center center;
    background-repeat: repeat;
    background-size: auto auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.fl-profile > div:nth-child(2) > *:nth-child(1) > * img{
    width: 86px;
    height: 86px;
}
.fl-profile > div:nth-child(2) > *:nth-child(1) > * > *{
    width: 440px;
}
.fl-profile .button{
    font-size: 27px;
    padding: 18px 20px;
}
.fl-profile--pass-grid{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.fl-profile--pass-grid > a{
    opacity: 0.5;
}
@media screen and (max-width: 1312px) {
    .fl-profile > div:nth-child(2){
        grid-template-columns: 1fr;
        min-height: calc(100vh - 162px - var(--gap) - var(--gap) - 61px);
    }
    .fl-profile > div:nth-child(2) > div:nth-child(2){
        display: none;
    }

    .fl-profile{
        min-height: calc(100vh - 162px - var(--gap) - var(--gap));
        gap: 0px;
    }
    .fl-profile .block-header{
        margin: 0px!important;
        transform: unset!important;
        width: 100%!important;
    }
    .fl-profile > div:nth-child(2) > *:nth-child(1) > * > *{
        width: 255px;
    }
    .fl-profile .button{
        font-size: 20px;
    }
    .fl-profile .button.btn-small{
        font-size: 15px;
    }
    .fl-profile--pass-grid{
        flex-direction: column-reverse;
        gap: var(--gap);
        align-items: start;
    }
    .fl-profile > div:nth-child(2) > *:nth-child(1) > * > br{
        display: none;
    }
}
.fl-leagues,
.fl-h2h{
    border-radius: 10px;
}
.fl-leagues .block-header > *:nth-child(2){
    opacity: 0.5;
}
.fl-leagues > div:nth-child(2){
    display: flex;
    flex-direction: column;
}
.fl-leagues > div:nth-child(2) > div:nth-child(1),
.fl-leagues > div:nth-child(2) > div:nth-child(2) > *{
    display: grid;
    grid-template-columns: 884px 100px 50px 50px 110px;
    align-items: center;
    padding: 0px 20px;
    gap: 20px;
    font-weight: 500;
}
.fl-leagues > div:nth-child(2) > div:nth-child(1) > *:not(:last-child),
.fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:not(:last-child){
    position: relative;
}
.fl-leagues > div:nth-child(2) > div:nth-child(1) > *:not(:first-child),
.fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:not(:first-child){
    text-align: center;
}
.fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:nth-child(4):last-child{
    grid-area: 1 / 4 / 2 / 6;
}
.fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:nth-child(3):last-child{
    grid-area: 1 / 3 / 2 / 6;
}
.fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:first-child > *{
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (min-width: 1312px) {
    .fl-leagues > div:nth-child(2) > div:nth-child(1) > *:not(:last-child)::after,
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:not(:last-child)::after{
        content: "";
        width: 2px;
        height: 36.5px;
        display: block;
        border-radius: 10px;
        background-color: #ffffff;
        opacity: 0.2;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: calc(100% + 9px);
    }
}
.fl-leagues > div:nth-child(2) > div:nth-child(1){
    background-color: var(--light-grey);
    height: 50px;
}
.fl-leagues > div:nth-child(2) > div:nth-child(2) > *{
    height: 78px;
}
.fl-leagues > div:nth-child(2) > div:nth-child(2) > *{
    border-bottom: 2px solid var(--light-grey);
}
.fl-leagues > div:nth-child(2) > div:nth-child(2) > *.placeholder{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
}
.fl-leagues > div:nth-child(2) .button{
    background-color: var(--light-grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.fl-leagues .button img{
    height: 18px;
    width: 18px;
}
.create-league{
    position: relative;
    padding: var(--padding);
    margin-top: calc(var(--gap) * -1);
}
.create-league > .button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    font-size: 21px;
    font-weight: 500;
    position: absolute;
    transition: var(--transition);
}
.create-league.active > .button{
    opacity: 0;
   pointer-events: none;
}
.create-league > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 90px 90px;
    gap: var(--gap);
    align-items: center;
}
@media screen and (max-width: 720px) {
    .create-league > *:nth-child(2){
        grid-template-columns: 1fr 1fr;
    }
    .create-league > *:nth-child(2) .button{
        font-size: 15px;
    }
    .create-league > *:nth-child(2) > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .create-league > *:nth-child(2) > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .create-league > *:nth-child(2) > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
}


.fl-h2h .block-header > *:nth-child(2){
    opacity: 0.5;
}
.fl-h2h > div:nth-child(2){
    display: flex;
    flex-direction: column;
}
.fl-h2h > div:nth-child(2) > div:nth-child(1),
.fl-h2h > div:nth-child(2) > div:nth-child(2) > *{
    display: grid;
    grid-template-columns: 844px 100px 177px 101px;
    align-items: center;
    padding: 0px 20px;
    gap: 20px;
    font-weight: 500;
}
.fl-h2h > div:nth-child(2) > div:nth-child(1) > *:not(:last-child),
.fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:not(:last-child){
    position: relative;
}
.fl-h2h > div:nth-child(2) > div:nth-child(1) > *:not(:first-child),
.fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:not(:first-child){
    text-align: center;
}
.fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:first-child{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:first-child img{
    width: 36px;
    height: 36px;
}
.fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:first-child *:not(img){
    width: calc(100% - 36px - 10px);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (min-width: 1312px) {  
    .fl-h2h > div:nth-child(2) > div:nth-child(1) > *:not(:last-child)::after,
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:not(:last-child)::after{
        content: "";
        width: 2px;
        height: 36.5px;
        display: block;
        border-radius: 10px;
        background-color: #ffffff;
        opacity: 0.2;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: calc(100% + 9px);
    }
}
.fl-h2h > div:nth-child(2) > div:nth-child(1){
    background-color: var(--light-grey);
    height: 50px;
}
.fl-h2h > div:nth-child(2) > div:nth-child(2) > *{
    height: 78px;
}
.fl-h2h > div:nth-child(2) > div:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.fl-h2h > div:nth-child(2) > div:nth-child(2) > *.placeholder{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
}
.fl-h2h > div:nth-child(2) .button{
    background-color: var(--light-grey);
}

.fl-leagues > .block-header,
.fl-h2h > .block-header{
    margin-bottom: calc(var(--gap) * -1);
}
@media screen and (max-width: 1312px) {
    .fl-leagues > div:nth-child(2) > div:nth-child(1),
    .fl-h2h > div:nth-child(2) > div:nth-child(1){
        height: 29px;
    }
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > *,
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > *{
        height: 39px;
    }
    .fl-leagues > div:nth-child(2) > div:nth-child(1),
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > *{
        grid-template-columns: 510px 32px 40px 40px 40px;
        gap: 10px;
        padding: 0px 10px;
        font-size: 10px;
    }
    .fl-leagues > div:nth-child(2) .button{
        padding: 6px 11px;
        height: 30px;
    }
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:nth-child(5):last-child{
        font-size: 0px;
    }
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > * > *:nth-child(5):last-child::after{
        content: "";
        width: 18px;
        height: 18px;
        display: block;
        background-image: url(/public/img/select-arrow.svg);
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(-90deg);
    }
    .fl-leagues .default-container,
    .fl-h2h .default-container{
        border-radius: 10px;
    }
    .fl-leagues > .block-header,
    .fl-h2h > .block-header{
        padding: 10px!important;
    }
    .fl-leagues .block-header > *:nth-child(2),
    .fl-h2h .block-header > *:nth-child(2){
        font-size: 10px;
    }
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > *.placeholder,
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > *.placeholder{
        font-size: 15px;
    }
    
    .fl-h2h > div:nth-child(2) > div:nth-child(1),
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > *{
        grid-template-columns: 589px 55px 40px;
        gap: 10px;
        padding: 0px 10px;
        font-size: 10px;
    }
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:nth-last-child(2){
        display: none;
    }
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:last-child{
        font-size: 0px;
    }
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:last-child::after{
        content: "";
        width: 18px;
        height: 18px;
        display: block;
        background-image: url(/public/img/select-arrow.svg);
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(-90deg);
    }
    .fl-h2h > div:nth-child(2) .button{
        padding: 6px 11px;
        height: 30px;
    }
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:first-child img{
        width: 25px;
        height: 25px;
    }
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > * > *:first-child *:not(img){
        width: calc(100% - 35px);
    }
    .create-league > .button{
        padding: 15px 0px;
        font-size: 15px;
    }
}
@media screen and (max-width: 720px) {
    .fl-leagues > div:nth-child(2) > div:nth-child(1),
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > *{
        grid-template-columns: calc(100vw - 40px - 32px - 120px - 40px) 32px 40px 40px 40px;
        gap: 10px;
        padding: 0px 10px;
        font-size: 10px;
    }
    .fl-h2h > div:nth-child(2) > div:nth-child(1),
    .fl-h2h > div:nth-child(2) > div:nth-child(2) > *{
        grid-template-columns: calc(100vw - 40px - 95px - 20px) 55px 40px;
        gap: 10px;
        padding: 0px 10px;
        font-size: 10px;
    }
    .fl-leagues .block-header > *:nth-child(2), .fl-h2h .block-header > *:nth-child(2){
        font-size: 8px;
    }
    .fl-leagues > div:nth-child(2) > div:nth-child(2) > *.placeholder, .fl-h2h > div:nth-child(2) > div:nth-child(2) > *.placeholder{
        font-size: 10px;
    }
}

.fl-tour-swiper{
    display: grid;
    grid-template-columns: 38px calc(100% - 38px - 38px - 40px) 38px;
    gap: 20px;
    align-items: center;
}
.fl-tour-swiper .swiper{
    width: 100%;
}
.fl-tour-swiper .button-prev,
.fl-tour-swiper .button-next{
    display: block;
    width: 38px;
    height: 38px;
}
.fl-tour-swiper .button-prev{
    left: 20px;
    background: url(/public/img/arrow-left.svg);
    background-size: 100% 100%;
}
.fl-tour-swiper .button-next{
    right: 20px;
    background: url(/public/img/arrow-right.svg);
    background-size: 100% 100%;
}
.fl-tour-swiper .swiper-slide{
    border-radius: 10px;
    background-color: var(--grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    box-sizing: border-box;
}
.fl-tour-swiper .swiper-slide > *:nth-child(1){
    font-weight: 500;   
}
.fl-tour-swiper .swiper-slide.active:not(.future) > *:nth-child(2){
    opacity: 0.7;
}
.fl-tour-swiper .swiper-slide.active{
    background-color: var(--orange);
}
.fl-tour-swiper .swiper-slide.future{
    background-color: var(--grey);
    opacity: 0.5;
}
@media screen and (min-width: 720px) {
    .fl-index-tabs{
        display: none;
    }
}

.fl-index{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.fl-index > *,
.fl-index > * > *{
    width: 100%;
}

.fl-index-field{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.fl-index-field > *,
.fl-index-transfer > *{
    border-radius: 10px;
}
.fl-index-team-change{
    gap: 0px;
}
.fl-index-team-change > *:last-child{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.fl-index-team-change > *:last-child > *{
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    gap: 9px;
}
@media screen and (max-width: 1312px) {
    .fl-index-team-change > *:last-child > *{
        gap: var(--gap);
    }
}
.fl-index-team-change > *:last-child > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.fl-index-team-change > *:last-child > * > *:nth-child(1){
    font-family: "Codec Pro";
    font-size: 30px;
    font-weight: 900;
    font-style: italic;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.fl-index-team-change > *:last-child > * > *:nth-child(1) img{
    height: 0.7em;
    width: 0.7em;
    object-fit: contain;
    object-position: center;
}
.fl-index-team-change > *:last-child > * > *:nth-child(2){
    opacity: 0.5;
}
.fl-index-field > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
}
.fl-index-field > *:nth-child(2) > *{
    height: 68px;
}
.fl-index-field > *:nth-child(2).completed-tour > *{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    background-color: var(--grey);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}
.fl-index-field > *:nth-child(2).completed-tour > * > *:nth-child(2){
    opacity: 0.5;
}
.fl-index-field > *:last-child > .block-header:nth-child(1) > *:nth-child(2){
    opacity: 0.5;    
}
@media screen and (max-width: 1312px) {
    .fl-index-field > *:last-child > .block-header:nth-child(1){
        display: none;
    }
    .fl-index-field > *:nth-child(2).completed-tour > *{
        gap: 10px;
    }
    .fl-index-field > *:nth-child(2).completed-tour > * > *{
        font-size: 12px;
    }
}
.fl-index-field > *:last-child > .block-header:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.fl-index-field > *:last-child > .block-header:nth-child(2){
    margin-top: calc(var(--gap) * -1);
}
.fl-index-field > *:last-child > .block-header:nth-child(2) > * > *{
    margin: 0px;
}
.fl-index-field > *:last-child > .block-header:nth-child(2) > * > *:nth-child(1){
    opacity: 0.5;
}
.fl-index-field > *:last-child > .block-header:nth-child(2) > * > *:nth-child(2){
    font-size: 20px;
    font-weight: 500;
}
.fl-index-field > *:last-child > .field-container{
    width: calc(100% - var(--padding) - var(--padding));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.fl-index-field > *:last-child > .field-container > .pbl-select{
    position: absolute;
    top: var(--padding);
    left: var(--padding);
    width: 52px;
    height: 52px;
}
.fl-index-field > *:last-child > .field-container > .pbl-select .pbl-select--placeholder{
    padding: 15px;
}
.fl-index-field > *:last-child > .field-container > .pbl-select .pbl-select--placeholder span{
    display: none;
}
.fl-index-field > *:last-child > .field-container > .pbl-select .pbl-select--placeholder::after{
    background-image: url(/public/img/field-sort.svg);
    width: 22px;
    height: 22px;
    background-size: 100% 100%;
}
.fl-index-field > *:last-child{
    margin-bottom: calc(38px + var(--gap));
    position: relative;
    padding-bottom: var(--padding);
}
.fl-index-field > *:last-child > *:last-child{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    position: absolute;
    top: calc(100% + var(--gap));
    width: 100%;
    height: 38px;
}
.fl-index-field > *:last-child > *:last-child > *{
    height: 38px;
}
.fl-index-field > *:last-child > *:last-child > *:last-child:nth-child(odd){
    grid-column: 1 / -1;
}

.fl-index-transfer{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.fl-index-transfer > .default-container{
    gap: 0px;
}
.fl-index-transfer--filter{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.fl-index-transfer--filter > *:nth-child(6){
    display: grid;
    grid-template-columns: 66px 116px 116px;
    gap: 10px;
}
.fl-index-transfer--filter > *:nth-child(6) > span{
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--grey);
    font-weight: 500;
    box-sizing: border-box;
}
@media screen and (min-width: 1312px) {
    .fl-index-transfer--filter > *:nth-child(1),
    .fl-index-transfer--filter > *:nth-child(2){
        display: none;
    }
}
@media screen and (min-width: 1312px) {
    *:not(.fl-index-field) > .fl-index-team-change{
        display: none;
    }
}

.fl-index-transfer .default-container .block-header{
    gap: 10px;
}
.fl-index-transfer .default-container .block-header > input{
    margin-left: auto;
}
.fl-index-transfer .default-container .block-header > span:last-child{
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 2px solid var(--light-grey);
    padding: 10px 15px;
}
.fl-index-transfer--list{
    display: flex;
    flex-direction: column;
}
.fl-index-transfer--list.v1 > *:nth-child(1){
    background-color: var(--light-grey);
    height: 50px;
}
.fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(-n + 2){
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > *{
    height: 66px;
}
.fl-index-transfer--list.v1 > *:nth-child(1),
.fl-index-transfer--list.v1 > *:nth-child(2) > *{
    display: grid;
    grid-template-columns: 178px 89px 50px 35px 50px 53px 1fr;
    align-items: center;
    box-sizing: border-box;
    padding: 0px 10px;
    gap: 20px;
    font-weight: 500;
}
.fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min-content;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}

.fl-index-transfer--list.v1 > *:nth-child(2),
.fl-index-transfer--list.v2 > *:nth-child(2){
    min-height: 792px;
}
@media screen and (max-width: 1312px) {
    .fl-index-transfer--list.v1 > *:nth-child(2),
    .fl-index-transfer--list.v2 > *:nth-child(2){
        min-height: 492px;
    }
}

@media screen and (min-width: 1312px) {
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:not(:first-child)::before,
    .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:not(:first-child)::before{
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.2);
        right: calc(100% + 9px);
        top: 50%;
        transform: translateY(-50%);
    }
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1),
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(3){
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--light-grey);
    height: 40px;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1){
    justify-content: start;
    text-align: start;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1) > *:nth-child(1){
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(3) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2):not(.tooltip),
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2).tooltip > *:nth-child(1){
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2):not(.tooltip) > *:nth-child(1),
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2).tooltip > *:nth-child(1) > *:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    font-size: 12px;
    font-weight: 500;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2):not(.tooltip) > *:nth-child(2),
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2).tooltip > *:nth-child(1) > *:nth-child(2){
    opacity: 0.5;
    font-size: 10px;
    font-weight: 400;
}



.fl-index-transfer--list.v2 > *:nth-child(1){
    background-color: var(--light-grey);
    height: 50px;
}
.fl-index-transfer--list.v2 > *:nth-child(2) > *{
    height: 66px;
}
.fl-index-transfer--list.v2 > *:nth-child(1),
.fl-index-transfer--list.v2 > *:nth-child(2) > *{
    display: grid;
    grid-template-columns: 323px repeat(4, 1fr);
    align-items: center;
    box-sizing: border-box;
    padding: 0px 10px;
    gap: 20px;
    font-weight: 500;
}
.fl-index-transfer--list.v2 > *:nth-child(1) > *:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.fl-index-transfer--list.v2 > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 1312px) {
    .fl-index-transfer--list.v2 > *:nth-child(1) > *:not(:first-child)::before,
    .fl-index-transfer--list.v2 > *:nth-child(2) > * > *:not(:first-child)::before{
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.2);
        right: calc(100% + 9px);
        top: 50%;
        transform: translateY(-50%);
    }
}
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1){
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--light-grey);
    height: 40px;
}
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1){
    justify-content: start;
    text-align: start;
}
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1) > *{
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1).media::after,
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1).pro::after,
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1).media::after,
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1).pro::after{
    position: absolute;
    content: "";
    font-family: "Codec Pro";
    font-weight: 900;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    right: 0px;
    min-width: 12px;
    height: 100%;
    border-radius: 0px 5px 5px 0px;
    font-size: 10px;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1).media::after,
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1).media::after{
    background-color: var(--orange);
    content: "M";
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1).pro::after,
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1).pro::after{
    background-color: white;
    content: "P";
    color: var(--grey)
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1).pro > *:nth-child(1),
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1).media > *:nth-child(1),
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1).pro > *:nth-child(1),
.fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1).media > *:nth-child(1){
    max-width: calc(100% - 10px);
}
.fl-index-transfer--list.v1 > *:nth-child(2) > *.empty,
.fl-index-transfer--list.v2 > *:nth-child(2) > *.empty{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
    font-weight: 500;
    height: 100px;
}

.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(7){
    height: 40px;
    width: 40px;
}
.fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(7) img{
    height: 100%;
    width: 100%;
}
@media screen and (min-width: 720px) {
    .fl-tour-select{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .fl-index-field > .fl-index-team-change{
        display: none;
    }
    .fl-index-transfer--list.v1 > *:nth-child(1),
    .fl-index-transfer--list.v1 > *:nth-child(2) > *{
        grid-template-columns: 115px 30px 30px 30px 40px 1fr;
        gap: 10px;
        font-size: 10px;
    }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(2),
    .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(2){
        display: none!important;
    }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(1), .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(4), .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(4) { grid-area: 1 / 2 / 2 / 3; }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(3), .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(5), .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(5) { grid-area: 1 / 4 / 2 / 5; }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(6), .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(6) { grid-area: 1 / 5 / 2 / 6; }
    .fl-index-transfer--list.v1 > *:nth-child(1) > *:nth-child(7), .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(7) { grid-area: 1 / 6 / 2 / 7; }

    .fl-index-transfer--list.v2 > *:nth-child(1), .fl-index-transfer--list.v2 > *:nth-child(2) > *{
        grid-template-columns: 140px repeat(4, 1fr);
        gap: 10px;
        font-size: 10px;
    }
    .fl-index-transfer--list.v1 > *:nth-child(2) > *.empty, .fl-index-transfer--list.v2 > *:nth-child(2) > *.empty{
        font-size: 15px;
    }
    .fl-index-transfer .default-container .block-header > input,
    .fl-index-transfer .default-container .block-header > *:nth-child(3){
        display: none;
    }
    .fl-index-transfer--filter{
        grid-template-columns: calc(50vw - 60px - 86px) 10px 43px 43px;
    }
    .fl-index-transfer--filter > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .fl-index-transfer--filter > :nth-child(5) { grid-area: 1 / 3 / 2 / 4; }
    .fl-index-transfer--filter > :nth-child(2) { grid-area: 1 / 4 / 2 / 5; }
    .fl-index-transfer--filter > :nth-child(3) { grid-area: 2 / 1 / 3 / 5; }
    .fl-index-transfer--filter > :nth-child(4) { grid-area: 3 / 1 / 4 / 5; }
    .fl-index-transfer--filter > :nth-child(6) { grid-area: 4 / 1 / 5 / 5; }

    .fl-index-transfer .pagination > div *.ofb{
        display: none;
    }
    .fl-index-transfer--filter > *:nth-child(6){
        width: 100%;
    }
    .fl-index-transfer--filter > *:nth-child(6){
        grid-template-columns: 66px 134px 134px;
    }
    .fl-index-transfer--filter > :nth-child(2),
    .fl-index-transfer--filter > :nth-child(5) .pbl-select--placeholder{
        padding: 10px;
        height: 43px;
    }
    .fl-index-transfer--filter > :nth-child(5) .pbl-select--placeholder span{
        display: none;
    }
    .fl-index-transfer--filter > :nth-child(5) .pbl-select--placeholder::after{
        background-image: url(/public/img/field-sort.svg);
    }
    .fl-index-transfer--filter > :nth-child(2) img,
    .fl-index-transfer--filter > :nth-child(5) .pbl-select--placeholder::after{
        width: 23px;
        height: 23px;
    }
    .fl-index-transfer--filter.active .button{
        background-color: var(--orange);
    }
    .fl-index-transfer--filter{
        transition: var(--transition);
    }
    .fl-index-transfer--filter:not(.active){
        row-gap: 0px;
    }
    .fl-index-transfer--filter > *:nth-child(3),
    .fl-index-transfer--filter > *:nth-child(4),
    .fl-index-transfer--filter > *:nth-child(6){
        transition: var(--transition);
    }
    .fl-index-transfer--filter:not(.active) > *:nth-child(3),
    .fl-index-transfer--filter:not(.active) > *:nth-child(4),
    .fl-index-transfer--filter:not(.active) > *:nth-child(6){
        height: 0px!important;
        overflow: hidden;
    }
    
    .fl-index-transfer .default-container .block-header{
        padding: 10px!important;
    }
    .fl-index-transfer--list.v1 > *:nth-child(1),
    .fl-index-transfer--list.v2 > *:nth-child(1){
        height: 29px;
    }
    .fl-index-transfer--list.v1 > *:nth-child(2) > *,
    .fl-index-transfer--list.v2 > *:nth-child(2) > *{
        height: 41px;
    }
    .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(1),
    .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(3),
    .fl-index-transfer--list.v2 > *:nth-child(2) > * > *:nth-child(1){
        height: 30px;
        padding: 5px;
    }
    .fl-index-transfer--list.v1 > *:nth-child(2) > * > *:nth-child(7){
        height: 30px;
        width: 30px;
    }
    .fl-index-field > *:last-child > .field-container > .pbl-select{
        height: 30px;
        width: 30px;
        left: 10px;
        top: 10px;
    }
    .fl-index-field > *:last-child > .field-container > .pbl-select .pbl-select--placeholder{
        padding: 7.5px;
    }
    .fl-index-field > *:last-child > .field-container > .pbl-select .pbl-select--placeholder::after{
        height: 17px;
        width: 17px;
    }
    .field-container > .summ{
        top: 10px;
        right: 10px;
    }
    .field-container > .summ > *:nth-child(1),
    .field-container > .summ > *:nth-child(2){
        font-size: 10px;
        gap: 5px;
    }
    .field-container .bench > * > .swap{
        position: unset;
        order: 1;
    }
    .fl-index-field > *:last-child > .block-header:nth-child(2) > * > *:nth-child(1),
    .fl-index-field > *:last-child > .block-header:nth-child(2) > * > *:nth-child(2){
        font-size: 10px;
    }
    .fl-index-field > *:last-child > .block-header:nth-child(2) > * > * > span{
        display: none;
    }
}
@media screen and (max-width: 720px) {
    
    .fl-index-transfer--filter{
        grid-template-columns: calc(100vw - 60px - 86px) 10px 43px 43px;
    }
    .fl-index-transfer--filter > *:nth-child(6){
        grid-template-columns: 66px calc((100vw - 66px - 20px - 20px) / 2) calc((100vw - 66px - 20px - 20px) / 2);
    }
    .fl-index-field > *:last-child{
        margin-bottom: calc((38px + var(--gap)) * 2);
    }
    .fl-index-field > *:last-child > .block-header:nth-child(2){
        margin-top: 0px;
    }
    .fl-index{
        grid-template-columns: 1fr;
    }
    .fl-index-tabs{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
    }
    .fl-index-tabs.active > *:nth-child(2){
        background-color: var(--orange);
    }
    .fl-index-tabs:not(.active) > *:nth-child(1){
        background-color: var(--orange);
    }
    .fl-index.active > *:nth-child(1){
        display: none;
    }
    .fl-index:not(.active) > *:nth-child(2){
        display: none;
    }
    .fl-index.active + .tournament--pretendants{
        display: none;
    }
    .fl-index-transfer--list.v1 > *:nth-child(1), .fl-index-transfer--list.v1 > *:nth-child(2) > *{
        grid-template-columns: calc(100vw - 40px - 220px) 30px 30px 30px 40px 30px;
    }
    .fl-index-transfer--list.v2 > *:nth-child(1), .fl-index-transfer--list.v2 > *:nth-child(2) > *{
        grid-template-columns: calc(100vw - 40px - 120px - 50px) repeat(4, 30px);
    }
    .fl-tour-swiper{
        display: none;
    }
    .fl-tour-select .pbl-select .pbl-select--placeholder span,
    .fl-tour-select .pbl-select .pbl-select--list > div span{
        display: flex!important;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .fl-tour-select .pbl-select .pbl-select--placeholder span strong,
    .fl-tour-select .pbl-select--list strong{
        font-weight: 400;
        font-size: 10px;
        opacity: 0.5;
    }
    .fl-index-team-change > *:last-child > * > *:nth-child(1){
        font-size: 20px;
    }
    .fl-index-team-change > *:last-child > * > *:nth-child(2){
        font-size: 8px;
    }
}

.popup-content.player-profile{
    width: 720px;
    min-height: 608px;
    background-color: var(--dark-grey);
    box-shadow: unset;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.popup-content.player-profile > .grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.popup-content.player-profile .block-header img{
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.popup-content.player-profile > .grid > div:nth-child(1){
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(6) { grid-area: 4 / 1 / 5 / 3; }

.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background: var(--light-grey);
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(1){
    width: 100%;
    height: 167px;
    position: relative;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(1) > .player-img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: var(--orange);
    background-image: url(/public/img/peak-bg-2.svg);
    background-size: cover;
    object-fit: contain;
    object-position: center bottom;
}

.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(1) .club{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(1) span{
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 5px 10px;
    border-radius: 0px 10px 0px 10px;
    background: var(--grey);
    text-align: center;
    font-family: "Codec Pro";
    font-size: 15px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    
    font-family: "Codec Pro";
    font-size: 12px;
    font-weight: 900;
    font-style: italic;
    padding: 0px 5px;
    box-sizing: border-box;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(2) > *:nth-child(1){
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(1) > *:nth-child(2) > *{
    padding: 5px 0px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2){
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid var(--light-grey);
    width: 100%;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    background-color: var(--grey);
    height: 100%;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2) > * > *{
    font-size: 10px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2) > * > *:nth-child(1){
    opacity: 0.5;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2) > * > *:nth-child(2){
    font-weight: 500;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}

.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(3),
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(4){
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(3) > *:nth-child(1),
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(4) > *:nth-child(1){
    font-family: "Codec Pro";
    font-weight: bold;
    font-style: italic;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(3) > *:nth-child(2),
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(4) > *:nth-child(2){
    opacity: 0.5;
    font-size: 10px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *{
    border-radius: 10px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(6){
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(6) > div:nth-child(odd){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    opacity: 0.5;
    font-size: 10px;
}
.popup-content.player-profile > .grid > div:nth-child(1) > *:nth-child(6) > canvas{
    height: 100px;
}
.popup-content.player-profile .table{
    display: flex;
    flex-direction: column;
}
.popup-content.player-profile .table > div:nth-child(2){
    max-height: 367px;
    overflow: auto;
}
.popup-content.player-profile .table > div:nth-child(1),
.popup-content.player-profile .table > div:nth-child(2) > .spoiler .spoiler--head{
    display: grid;
    grid-template-columns: 60px 30px 90px 40px 1fr;
    gap: 10px;
    font-size: 10px;
    align-items: center;
    padding: 5px 10px;
}
.popup-content.player-profile .table > div:nth-child(1){
    height: 29px;
    background-color: var(--light-grey);
}
.popup-content.player-profile .table > div:nth-child(1) > *{
    text-align: center;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.popup-content.player-profile .table > div:nth-child(2) > .empty{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        opacity: 0.5;
        font-size: 20px;
        font-weight: 500;
        height: 350px;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--head{
    height: 39px;
    text-align: center;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--head img{
    padding: 5px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--light-grey);
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--head > *:nth-child(3){
    border-radius: 10px;
    padding: 10px 0px;
    text-align: center;
    background-color: var(--orange);

    font-family: "Codec Pro";
    font-size: 12px;
    font-weight: 900;
    font-style: italic;
}

.popup-content.player-profile .table > div:nth-child(2) .spoiler--body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 10px;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--body > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--body > * > *:nth-child(1){
    opacity: 0.5;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--body > * > *:nth-child(2){
    font-weight: 500;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--body > *:last-child:nth-child(odd){
    grid-column: 1 / -1;
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--body > *{
    border-top: 2px solid var(--light-grey);
}
.popup-content.player-profile .table > div:nth-child(2) .spoiler--body > *:nth-child(odd):not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.popup-content.player-profile .btns{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}
.popup-content.player-profile .btns .button{
    padding: 10px 0px;
}
@media screen and (max-width: 720px) {
    .popup-content.player-profile .grid{
        grid-template-columns: 1fr;
    }
    .popup .popup-content.player-profile{
        overflow: auto;
        height: 100%;
        max-width: calc(100vw - 10px);
    }
    .popup-content.player-profile .table > div:nth-child(1),
    .popup-content.player-profile .table > div:nth-child(2) > .spoiler .spoiler--head{
        grid-template-columns: 60px 30px 70px 40px 1fr;
    }
    .popup-content.player-profile .table > div:nth-child(2) .spoiler--head > *:nth-child(3){
        font-size: 10px;
    }
}
@media screen and (max-width: 357px){
    .popup-content.player-profile .btns .button{
        font-size: 12px;
    }
}

.field-container.announce > *{
    height: 536px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 400;
    opacity: 0.5;
    font-size: 20px;
}
.field-container.profile > *{
    width: 440px;
    height: fit-content;
    min-height: 536px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}
.field-container.profile > * > *{
    width: 100%;
}

@media screen and (max-width: 1312px) {
    .field-container.announce > *{
        height: 366px;
        font-size: 15px;
    }
    .field-container.profile > *{
        height: 366px;
        width: 255px;
    }
}

.cookie-accept{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    background: var(--grey);
    border-top: 2px solid var(--light-grey);
    padding: 40px calc((100vw - 1380px) / 2);
    box-sizing: border-box;

    z-index: 9999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: white;
    text-align: center;
}
.cookie-accept:not(.active){
    display: none;
}

.cookie-accept .btns{
    display: flex;
    flex-direction: row;
    gap: 20px;
    text-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.cookie-accept > *:not(.btns){
    font-size: 15px;
}
.cookie-accept .btns > *{
    width: 100%;
    font-size: 20px;
}
@media screen and (max-width: 1312px) {
    .cookie-accept{
        padding: 40px calc((100vw - 720px) / 2);
    }
    .cookie-accept > *:not(.btns){
        font-size: 12px;
    }
    .cookie-accept .btns > *{
        font-size: 15px;
    }
}
@media screen and (max-width: 740px) {
    .cookie-accept{
        padding: 40px 20px;
        font-size: 1.5em;
        flex-direction: column;
    }
}

.fl-tournament--header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    border-radius: 10px;
}
.fl-tournament--header > .button{
    margin-left: auto;
}
.fl-tournament--header > *:nth-child(1){
    width: 79px;
    min-width: 79px;
    height: 79px;
    min-height: 79px;
}
.fl-tournament--header > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.fl-tournament--header > *:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}
.fl-tournament--header > *:nth-child(2) > *:nth-child(1){
    font-family: "Codec Pro";
    font-size: 30px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}
.fl-tournament--header > *:nth-child(2) > *:nth-child(2){
    font-size: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0px;
}
.fl-tournament--header > *:nth-child(2) > *:nth-child(2) > *:nth-child(1){
    font-weight: 500;
}
.fl-tournament--header > *:nth-child(2) > *:nth-child(2) > *:nth-child(2){
    font-weight: 600;
    color: var(--orange);
}
.fl-tournament--table{
    display: flex;
    flex-direction: column;
}
.fl-tournament--table > *:nth-child(1),
.fl-tournament--table > *:nth-child(2) > *{
    display: grid;
    grid-template-columns: 30px 736px repeat(6, 50px);
    align-items: center;
    gap: 30px;
    padding: 0px 10px;
    font-weight: 500;
}
.fl-tournament--table > *:nth-child(2) > *.empty{
    display: flex!important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
    font-weight: 500;
    height: 100px;
}
.fl-tournament--table > *:nth-child(1) > *,
.fl-tournament--table > *:nth-child(2) > * > *{
    position: relative;
}
@media screen and (min-width: 1312px) {
    .fl-tournament--table > *:nth-child(1) > *:not(:first-child):not(:last-child)::after,
    .fl-tournament--table > *:nth-child(2) > * > *:not(:first-child):not(:last-child)::after{
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.2);
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);
    }
}
.fl-tournament--table > *:nth-child(1){
    background-color: var(--light-grey);
    height: 50px;
}
.fl-tournament--table > *:nth-child(2){
    max-height: 285px;
    overflow: auto;
}
.fl-tournament--table > *:nth-child(2) > *{
    height: 56px;
}
.fl-tournament--table > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
.fl-tournament--table > *:nth-child(1) > *:not(:nth-child(2)),
.fl-tournament--table > *:nth-child(2) > * > *:not(:nth-child(2)){
    text-align: center;
}
.fl-tournament--table > *:nth-child(1) > *:nth-child(2),
.fl-tournament--table > *:nth-child(2) > * > *:nth-child(2){
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-corner{
    border-radius: 10px;
}
.fl-tournament--matches{
    gap: 0px;
}
.fl-tournament--matches > *:nth-child(2) > .empty{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
    font-weight: 500;
    height: 100px;
}
.fl-tournament--matches .spoiler--head{
    display: grid;
    grid-template-columns: 1fr 40px;
    border-bottom: 2px solid var(--light-grey);
}
@media screen and (min-width: 1312px) {
    .fl-tournament--matches .spoiler .spoiler--head > *:last-child{
        width: 40px;
        height: 40px;
    }
}
.fl-tournament--matches .spoiler--head > *:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd) > span{
    opacity: 0.5;
    white-space: nowrap;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd) > div > *{
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd) > div > *.green{
    background-image: url(/public/img/tournament-green-circle.svg);
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd) > div > *.red{
    background-image: url(/public/img/tournament-red-circle.svg);
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd) > div > *.yellow{
    background-image: url(/public/img/tournament-yellow-circle.svg);
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2){
    display: grid;
    grid-template-columns: 150px 140px 150px;
    align-items: center;
    gap: 40px;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2) > *:nth-child(2){
    border-radius: 10px;
    background-color: var(--orange);
    text-align: center;
    font-family: "Codec Pro";
    font-size: 25px;
    font-weight: 800;
    font-style: italic;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 41px;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2) > *:nth-child(odd){
    font-weight: 500;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2) > *:nth-child(1){
    text-align: end;
}
.fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2) > *:nth-child(3){
    text-align: start;
}
.fl-tournament--matches .spoiler--body .info{
    display: grid;
    grid-template-columns: 655px 655px;
}
.fl-tournament--matches .spoiler--body .info > *:nth-child(1){
    border-right: 1px solid var(--light-grey);
}
.fl-tournament--matches .spoiler--body .info > *:nth-child(2){
    border-left: 1px solid var(--light-grey);
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding);
    gap: 10px;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: 5px;
    white-space: nowrap;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > span{
    opacity: 0.5;
    display: block;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div > *{
    padding: 5px 10px;
    border-radius: 10px;
    background-color: var(--light-grey);
    font-weight: 500;
    box-sizing: border-box;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div > *.red{
    background-color: var(--light-red);
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div > *.green{
    background-color: var(--dark-green);
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div > *.yellow{
    background-color: var(--yellow);
    color: var(--dark-grey);
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(2){
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Codec Pro";
    font-size: 25px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.fl-tournament--matches .spoiler--body .info > *:nth-child(1) > *:nth-child(1) > *:nth-child(2){
    text-align: end;
}
.fl-tournament--matches .spoiler--body .info > *:nth-child(2) > *:nth-child(1){
    flex-direction: row-reverse;
}
.fl-tournament--matches .spoiler--body .info > *:nth-child(2) > *:nth-child(1) > *:nth-child(1) > span{
    text-align: end;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(2){
    padding: var(--padding);
    background-color: var(--light-grey);
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}
.fl-tournament--matches .spoiler--body .info > *.red > *:nth-child(2){
    background-color: var(--light-red);
}
.fl-tournament--matches .spoiler--body .info > *.green > *:nth-child(2){
    background-color: var(--dark-green);
}
.fl-tournament--matches .spoiler--body .info > *.yellow > *:nth-child(2){
    background-color: var(--yellow);
    color: var(--dark-grey);
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(3){
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > *{
    border-bottom: 2px solid var(--light-grey);
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.fl-tournament--matches .spoiler--body .info > *:nth-child(2) > *:nth-child(3) > *{
    flex-direction: row-reverse;
}
.fl-tournament--matches .spoiler--body .info > *:nth-child(2) > *:nth-child(3) > * > *:nth-child(1){
    text-align: end;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > * > *:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > * > *:nth-child(2){
    font-size: 20px;
    font-weight: 500;
}
.fl-tournament--matches .spoiler--body .info > *.red > *:nth-child(3) > * > *:nth-child(2){
    color: var(--light-red);
}
.fl-tournament--matches .spoiler--body .info > *.green > *:nth-child(3) > * > *:nth-child(2){
    color: var(--dark-green);
}
.fl-tournament--matches .spoiler--body .info > *.yellow > *:nth-child(3) > * > *:nth-child(2){
    color: var(--yellow);
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > * > *:nth-child(1) *:nth-child(1){
    font-weight: 500;
}
.fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > * > *:nth-child(1) *:nth-child(2){
    opacity: 0.5;
}
@media screen and (min-width: 1312px) {
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > *:nth-child(odd):not(:last-child){
        border-right: 1px solid var(--light-grey);
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > *:nth-child(even){
        border-left: 1px solid var(--left-grey);
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > *:nth-child(odd):last-child{
        grid-column: 1 / -1;
    }
}
.fl-tournament--matches .spoiler--body .title{
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 2px solid var(--light-grey);
    font-weight: 500;
    text-align: center;
}
.fl-tournament--matches .spoiler--body .table{
    display: grid;
    grid-template-columns: 655px 655px;
}
.fl-tournament--matches .spoiler--body .table > *.empty{
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
    font-weight: 500;
    height: 100px;
}
.fl-tournament--matches .spoiler--body .table > *{
    display: flex;
    flex-direction: column;
}
.fl-tournament--matches .spoiler--body .table > *:nth-child(1){
    border-right: 1px solid var(--light-grey);
}
.fl-tournament--matches .spoiler--body .table > *:nth-child(2){
    border-left: 1px solid var(--light-grey);
}
.fl-tournament--matches .spoiler--body .table > * > *{
    padding: 10px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--light-grey);
}
.fl-tournament--matches .spoiler--body .table > *:nth-child(2) > *{
    flex-direction: row-reverse;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1){
    width: calc(100% - 70px - 10px);
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    position: relative;
    border-radius: 10px;
    padding: 5px 10px;
    background-color: var(--light-grey);
}
.fl-tournament--matches .spoiler--body .table > *:nth-child(2) > * > *:nth-child(1){
    flex-direction: row-reverse;
    text-align: end;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1) > img{
    width: 40px;
    height: 40px;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1) > *:not(img){
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
    width: fit-content;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).cap::after{
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    background-image: url(/public/img/field_cap.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).vice-cap::after{
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    background-image: url(/public/img/field_vicecap.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).pro > *:not(img),
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).media > *:not(img){
    max-width: calc(100% - 59px - 20px - 45px - 1.5em);
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(2){
    text-align: center;
    width: 70px;
}
.fl-tournament--matches .spoiler--body .table > * > *.red > *:nth-child(2){
    color: var(--light-red);
}
.fl-tournament--matches .spoiler--body .table > * > *.green > *:nth-child(2){
    color: var(--dark-green);
}
.fl-tournament--matches .spoiler--body .table > * > *.yellow > *:nth-child(2){
    color: var(--yellow);
}


.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).media::before,
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).pro::before{
    position: absolute;
    right: 20px;
    top: 0px;
    border-radius: 0px 0px 10px 10px;
    min-width: 59px;
    font-family: "Codec Pro";
    font-size: 12px;
    font-weight: 900;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.fl-tournament--matches .spoiler--body .table > *:nth-child(2) > * > *:nth-child(1).media::before,
.fl-tournament--matches .spoiler--body .table > *:nth-child(2) > * > *:nth-child(1).pro::before{
    right: unset;
    left: 20px;
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).media::before{
    background-color: var(--orange);
    content: "MEDIA";
}
.fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).pro::before{
    background-color: white;
    content: "PRO";
    color: var(--grey)
}

@media screen and (max-width: 1312px) {
    .fl-tournament--table > *:nth-child(1),
    .fl-tournament--table > *:nth-child(2) > *{
        gap: 10px;
        grid-template-columns: 20px 476px repeat(5, 20px) 28px;
        font-size: 10px;
    }
    .fl-tournament--table > *:nth-child(1){
        height: 29px;
    }
    .fl-tournament--table > *:nth-child(2) > *{
        height: 39px;
    }
    .fl-tournament--matches .spoiler--body .info{
        grid-template-columns: 355px 355px;
    }
    .fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(odd){
        display: none;
    }
    .fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2) > *:nth-child(2){
        font-size: 12px;
        height: 30px;
    }
    .fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2) > *:nth-child(odd){
        font-size: 10px;
    }
    .fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2){
        grid-template-columns: 270px 80px 270px;
        gap: 10px;
    }
    .fl-tournament--matches .spoiler--head{
        padding: 10px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1){
        flex-direction: column-reverse!important;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(2){
        width: 100%;
        text-align: center!important;
        font-size: 15px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > span{
        text-align: center!important;
        font-size: 10px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1),
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div{
        width: 100%;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div > *{
        font-size: 5px;
        width: 100%;
        text-align: center;
        border-radius: 5px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(2){
        font-size: 20px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(3){
        grid-template-columns: 1fr;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > *{
        flex-direction: column-reverse!important;
        text-align: center!important;
    }
    .fl-tournament--matches .spoiler--body .info > *:nth-child(2) > *:nth-child(3) > * > *:nth-child(1){
        text-align: center;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(3) > * > *:nth-child(1) *:nth-child(2){
        font-size: 10px;
    }
    .fl-tournament--matches .spoiler--body .table > * > *{
        flex-direction: column!important;
        gap: 5px;
    }
    .fl-tournament--matches .spoiler--body .table{
        grid-template-columns: 355px 355px;
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1) > *:not(img){
        text-align: center;
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1){
        width: 100%;
        box-sizing: border-box;
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).media::before,
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).pro::before{
        right: 0px;
        min-width: 12px;
        height: 100%;
        border-radius: 0px 5px 5px 0px;
        font-size: 10px;
    }
    .fl-tournament--matches .spoiler--body .table > *:nth-child(2) > * > *:nth-child(1).media::before,
    .fl-tournament--matches .spoiler--body .table > *:nth-child(2) > * > *:nth-child(1).pro::before{
        right: unset;
        left: 0px;
        border-radius: 5px 0px 0px 5px;
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).media::before{
        content: "M";
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).pro::before{
        content: "P";
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1) > img{
        height: 30px;
        width: 30px;
    }
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).pro > *:not(img),
    .fl-tournament--matches .spoiler--body .table > * > * > *:nth-child(1).media > *:not(img){
        max-width: calc(100% - 10px - 35px - 1.5em);
    }
}

@media screen and (max-width: 720px) {
    .fl-tournament--table > *:nth-child(1),
    .fl-tournament--table > *:nth-child(2) > *{
        grid-template-columns: 20px calc(100vw - 40px - 148px - 70px) repeat(5, 20px) 28px;
    }
    .fl-tournament--matches .spoiler--body .info,
    .fl-tournament--matches .spoiler--body .table{
        grid-template-columns: repeat(2, calc(50vw - 10px));
    }
    .fl-tournament--matches .spoiler--head > *:nth-child(1) > *:nth-child(2){
        grid-template-columns: calc((100vw - 40px - 25px - 10px - 80px - 30px) / 2) 80px calc((100vw - 40px - 25px - 10px - 80px - 30px) / 2);
        gap: 10px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div{
        gap: 5px;
    }
    .fl-tournament--matches .spoiler--body .info > * > *:nth-child(1) > *:nth-child(1) > div > *{
        padding: 5px;
    }
    .fl-tournament--header{
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px 10px;
        border: 10px solid var(--grey);
        background-color: var(--dark-grey);
        background-image: url(/public/img/peak-bg-2.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .fl-tournament--header > .button{
        margin-left: 0px;
    }
    .fl-tournament--header > *:nth-child(2) > *:nth-child(2){
        justify-content: center;
    }
    .fl-tournament--header > *:nth-child(2) > *:nth-child(1){
        font-size: 20px;
        text-align: center;
    }
    .fl-tournament--header > *:nth-child(2) > *:nth-child(2){
        font-size: 15px;
    }
}

.p-rating--filter{
    display: grid;
    grid-template-columns: 1fr 105px;
    gap: 10px;
    margin: 0px;
}
.p-rating--filter > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.p-rating--filter > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.p-rating--filter > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

.p-rating--table{
    display: grid;
    grid-template-columns: 537px calc(1312px - 537px - 53px - 20px) 73px;
}
.p-rating--table > *{
    display: flex;
    flex-direction: column;
}
.p-rating--table > *:nth-child(1) > *{
    display: grid;
    grid-template-columns: 30px 472px;
    align-items: center;
    gap: 20px;
    padding: 0px 10px;
}
.p-rating--table > *:nth-child(2){
    width: 100%;
    overflow: auto;
}
.p-rating--table > *:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: fit-content;
    align-items: center;
}
.p-rating--table > *:nth-child(2) > * > *{
    width: 50px;
    min-width: 50px;
    text-align: center;
}
.p-rating--table > *:nth-child(3) > *{
    width: 53px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.p-rating--table > *:nth-child(3) > * > *::before{
    content: unset;
}
.p-rating--table > *:nth-child(1) > * > *:nth-child(1){
    width: 30px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.p-rating--table > * > *:nth-child(1){
    background-color: var(--light-grey);
    height: 50px;
}
.p-rating--table > * > *:not(:nth-child(1)){
    height: 60px;
}
.p-rating--table > * > *{
    padding: 0px 10px;
}
.p-rating--table > * > * > *{
    position: relative;
}
.p-rating--table{
    font-weight: 500;
}
.p-rating--table > *:nth-child(1) > *:not(:first-child) > *:nth-child(2){
    border-radius: 10px;
    background-color: var(--light-grey);
    padding: 10px;
    box-sizing: border-box;
}
.p-rating--table > *:nth-child(1) > * > *:nth-child(2) > *{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.p-rating--table > * > *:not(:nth-child(1)):not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
@media screen and (min-width: 1312px) {
    .p-rating--table > * > * > *::before{
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.2);
        left: calc(100% + 9px);
        top: 50%;
        transform: translateY(-50%);
    }
    .p-rating--table > *:nth-child(1) > * > *:nth-child(2){
        width: calc(100% - 5px);
    }
}
@media screen and (max-width: 1312px){
    .p-rating--table{
        font-size: 10px;
        grid-template-columns: 280px calc(720px - 20px - 280px - 30px) 30px;
    }
    .p-rating--table > * > *:nth-child(1){
        height: 29px;
    }
    .p-rating--table > * > *:not(:nth-child(1)){
        height: 39px;
    }
    .p-rating--table > *:nth-child(1) > *:not(:first-child) > *:nth-child(2){
        padding: 8px 10px;
    }
    .p-rating--table > *:nth-child(1) > *{
        grid-template-columns: 20px 240px;
        gap: 10px;
        padding-right: 0px;
    }
    .p-rating--table > *:nth-child(2) > *{
        gap: 10px;
    }
    .p-rating--table > *:nth-child(2) > * > *{
        width: 30px;
        min-width: 30px;
    }
    .p-rating--table > *:nth-child(3) > *{
        width: 30px;
    }
    .p-rating--table > *:nth-child(1) > * > *:nth-child(1){
        width: 20px;
    }
}
@media screen and (max-width: 720px){
    .p-rating--table{
        grid-template-columns: 201px calc(100vw - 40px - 201px - 30px - 20px) 30px;
    }
    .p-rating--table > *:nth-child(1) > *{
        grid-template-columns: 20px 161px;
    }
}


.p-index--stats{
    gap: 0px;
}
.p-index--stats > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.p-index--stats > *:nth-child(2) > *{
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    gap: var(--gap);
}
.p-index--stats > *:nth-child(2) > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.p-index--stats > *:nth-child(2) > * > *:nth-child(1){
    font-family: "Codec Pro";
    font-size: 30px;
    font-weight: 900;
    font-style: italic;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.p-index--stats > *:nth-child(2) > * > *:nth-child(1) img{
    height: 0.7em;
    width: 0.7em;
    object-fit: contain;
    object-position: center;
}
.p-index--stats > *:nth-child(2) > * > *:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.p-index--stats > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1){
    opacity: 0.5;
}
.p-index--stats > .block-header .block-title:nth-child(2){
    opacity: 1;
    color: var(--orange);
    margin-right: auto;
}
.p-index--stats > .block-header *:nth-child(3){
    opacity: 0.5;
}

@media screen and (max-width: 1312px) {
    .p-index--stats > .block-header *:nth-child(3){
        display: none;
    }
}
.p-index--predict--current{
    display: flex;
    flex-direction: column;
}
.p-index--predict--current > *:nth-child(1),
.p-index--predict--current > *:nth-child(2) > *{
    display: grid;
    grid-template-columns: 80px 860px 191px 81px;
    align-items: center;
    padding: 0px 10px;
    gap: 20px;
    text-align: center;
}
.p-index--predict--current > *:nth-child(1) > *,
.p-index--predict--current > *:nth-child(2) > * > *{
    position: relative;
}
.p-index--predict--current > *:nth-child(1){
    height: 50px;
    background-color: var(--light-grey);
}
.p-index--predict--current > *:nth-child(2) > *{
    height: 80px;
}
.p-index--predict--current > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
@media screen and (min-width: 1312px) {
    .p-index--predict--current > *:nth-child(1) > *::before,
    .p-index--predict--current > *:nth-child(2) > * > *::before{
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.2);
        left: calc(100% + 9px);
        top: 50%;
        transform: translateY(-50%);
    }
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(1){
    opacity: 0.5;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2){
    display: grid;
    grid-template-columns: 261px 318px 261px;
    gap: 10px;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(3){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(3) > *{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(3) > * > *:nth-child(1){
    border-radius: 10px;
    background-color: var(--orange);
    padding: 5px 15px;
    font-size: 10px;
    white-space:nowrap;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(3) > * > *:nth-child(2){
    opacity: 0.5;
    font-size: 10px;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd){
    border-radius: 10px;
    background-color: var(--light-grey);
    padding: 5px 10px;
    box-sizing: border-box;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    text-align: start;
    gap: 10px;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1){
    justify-content: end;
    text-align: end;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd) img{
    height: 30px;
    width: 30px;
    object-fit: contain;
    object-position: center;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd) *:not(img){
    width: calc(100% - 50px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > *{
    border-radius: 10px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--light-grey);
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * input{
    width: 70px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid var(--light-grey);
    background-color: var(--dark-grey);
    font-family: "Codec Pro";
    font-size: 25px;
    font-style: italic;
    font-weight: 900;
    outline: none;
    color: white;
    text-align: center;
     -moz-appearance: textfield;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * input::-webkit-outer-spin-button,
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1),
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(3){
    width: 40px;
    height: 40px;
    display: block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(1){
    background-image: url(/public/img/num_minus.svg);
}
.p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) > * > *:nth-child(3){
    background-image: url(/public/img/num_plus.svg);
}

.checkbox-x2 > div{
    width: 100%;
    height: 38px;
    background-color: var(--light-grey);
    position: relative;
    border-radius: 10px;
    cursor: pointer;
}
.checkbox-x2 > input:disabled + div{
    cursor: default;
}
.checkbox-x2 > input{
    display: none;
}
.checkbox-x2 > div::after{
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 4px;
    transition: var(--transition);
    transform: translateY(-50%);
    background-color: var(--grey);
    background-image: url(/public/img/icon_x2.svg);
    background-position: center center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.checkbox-x2 > input:checked + div::after{
    background-color: var(--orange);
    left: calc(100% - 4px - 30px);
}
@media screen and (max-width: 1312px) {
    .checkbox-x2 > div{
        height: 30px;
        border-radius: 5px;
    }
    .checkbox-x2 > div::after{
        width: 22px;
        height: 22px;
        border-radius: 5px;
        background-size: 15px 15px;
    }
    .checkbox-x2 > input:checked + div::after{
        left: calc(100% - 4px - 22px);
    }
}

.p-index--predict--past > *:nth-child(1),
.p-index--predict--past > *:nth-child(2) > *{
    display: grid;
    grid-template-columns: 80px 840px 70px 121px 81px;
    align-items: center;
    padding: 0px 10px;
    gap: 20px;
    text-align: center;
}
.p-index--predict--past > *:nth-child(1) > *,
.p-index--predict--past > *:nth-child(2) > * > *{
    position: relative;
}
.p-index--predict--past > *:nth-child(1){
    height: 50px;
    background-color: var(--light-grey);
}
.p-index--predict--past > *:nth-child(2) > *{
    height: 80px;
}
.p-index--predict--past > *:nth-child(2) > *:not(:last-child){
    border-bottom: 2px solid var(--light-grey);
}
@media screen and (min-width: 1312px) {
    .p-index--predict--past > *:nth-child(1) > *::before,
    .p-index--predict--past > *:nth-child(2) > * > *::before{
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.2);
        left: calc(100% + 9px);
        top: 50%;
        transform: translateY(-50%);
    }
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(1){
    opacity: 0.5;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2){
    display: grid;
    grid-template-columns: 251px 154px 154px 251px;
    gap: 10px;
}

.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1),
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4){
    border-radius: 10px;
    background-color: var(--light-grey);
    padding: 5px 10px;
    box-sizing: border-box;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    text-align: start;
    gap: 10px;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1){
    justify-content: end;
    text-align: end;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1) img,
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4) img{
    height: 30px;
    width: 30px;
    object-fit: contain;
    object-position: center;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1) *:not(img),
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4) *:not(img){
    width: calc(100% - 50px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2),
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(3){
    border-radius: 10px;
    border: 2px solid var(--light-grey);
    box-sizing: border-box;
    padding: 10px;
    font-family: "Codec Pro";
    font-weight: 900;
    font-size: 25px;
    font-style: italic;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(1){
    font-weight: 500;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(1).green{
    color: var(--green);
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(1).red{
    color: var(--red);
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(1).yellow{
    color: var(--yellow);
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(2){
    opacity: 0.5;
    font-size: 10px;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) > *:nth-child(1){
    border-radius: 10px;
    background-color: var(--orange);
    font-family: "Codec Pro";
    font-weight: 900;
    font-size: 25px;
    font-style: italic;
    padding: 10px;
}
.p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) > *:nth-child(2){
    display: none;
}
.p-index--questions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.p-index--questions > * > img{
    width: 646px;
    height: 325px;
}
.p-index--questions > * > *:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: var(--padding);
    min-height: 169px;
    box-sizing: border-box;
}
.p-index--questions > * > *:nth-child(3) h2{
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
}
.p-index--questions > * > *:nth-child(3) .radio{
    display: grid;
    grid-template-columns: 1fr 81px 1fr;
    gap: 10px;
}
.p-index--questions > * > *:nth-child(3) .radio > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.p-index--questions > * > *:nth-child(3) .radio > div > span{
    opacity: 0.5;
    text-align: center;
}
.p-index--questions > * > *:nth-child(3) .radio > div > label{
    width: 100%;
}
.p-index--questions > * > *:nth-child(3) .radio > div > label > span{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: var(--light-grey);
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid var(--light-grey);
    height: 38px;
}
.p-index--questions > * > *:nth-child(3) .radio > div > label > input:disabled + span{
    cursor: default;
}
.p-index--questions > * > *:nth-child(3) .radio > div > label > input:checked + span{
    background-color: var(--orange);
    border-color: var(--orange);
}
.p-index--questions > * > *:nth-child(3) .radio > div > label > span.outline{
    border: 2px solid var(--orange);
}
.p-index--questions > * > *:nth-child(3) .radio > div > label input{
    display: none;
}
.p-index--questions > * > *:nth-child(3) .text{
    display: grid;
    grid-template-columns: 1fr 81px;
    gap: 10px;
}
.p-index--questions > * > *:nth-child(3) .text > input{
    height: 38px;
}
.p-index--questions > * > *:nth-child(3) .text,
.p-index--questions > * > *:nth-child(3) .radio{
    margin-top: auto;
}
.p-index--questions > * .block-header .points{
    color: var(--orange);
    font-weight: 500;
    font-size: 20px;
}
.p-index--questions > * .block-header .result{
    font-size: 10px;
    font-weight: 500;
    padding: 5px 0px;
    width: 195px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 2px solid var(--light-grey);
    text-align: center;
}
.p-index--questions > * .block-header .result.orange{
    background-color: var(--orange);
    border-color: var(--orange);
}
.p-index--questions > * > *:nth-child(3) .text > input.outline{
    border-color: var(--orange);
}

@media screen and (max-width: 1312px) {
    .p-index--questions > * > img{
        width: 351px;
        height: 187px;
    }
    .p-index--predict--current > *:nth-child(1),
    .p-index--predict--past > *:nth-child(1){
        display: none;
    }
    .p-index--predict--current > *:nth-child(2){
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }
    .p-index--predict--current > *:nth-child(2) > *{
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        height: auto;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(1) { grid-area: 1 / 1 / 2 / 7; }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) { grid-area: 2 / 1 / 3 / 7; }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(3) { grid-area: 3 / 1 / 4 / 7; }

    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2){
        display: grid;
        grid-template-columns: 164px 164px;
        gap: 10px;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(1) br{
        display: none;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(1){
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 10px;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(1)::before{
        content: "|";
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(1) > *:nth-child(1){
        order: -1;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(3){
        width: calc(100% - 30px);
        margin-left: auto;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1){
        width: calc(100% - 30px);
        margin-right: auto;
    }
    .p-index--predict--current > *:nth-child(2) > *,
    .p-index--predict--past > *:nth-child(2) > *{
        position: relative;
        padding: 10px;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(4),
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(5){
        position: absolute;
        top: 33px;
        left: 50%;
        transform: translateX(-50%);
        width: 52px;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd) img{
        height: 20px;
        width: 20px;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd){
        font-size: 10px;
        gap: 5px;
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd) *:not(img){
        width: calc(100% - 25px);
    }
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(3) > *,
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(3) > * > *:nth-child(1){
        width: 100%;
        box-sizing: border-box;
    }
    .p-index--predict--current > *:nth-child(2){
        border-top: 2px solid var(--light-grey);
        gap: 0px
    }
    .p-index--predict--current > *:nth-child(2) > *{
        border-bottom: 2px solid var(--light-grey);
    }
    .p-index--predict--current > *:nth-child(2) > *:nth-child(odd){
        border-right: 1px solid var(--light-grey);
    }
    .p-index--predict--current > *:nth-child(2) > *:nth-child(even){
        border-left: 1px solid var(--light-grey);
    }
    .p-index--predict--past > *:nth-child(2) {
        display: grid;
        gap: 0px;
        grid-template-columns: 1fr 1fr;
    }
    .p-index--predict--past > *:nth-child(2) > *,
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2){
        grid-template-columns: 164px 164px;
        gap: 10px;   
    }
    .p-index--predict--past > *:nth-child(2) > *{
        height: auto;
        padding: 10px;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2),
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(3){
        display: none;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1) img, .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4) img{
        height: 20px;
        width: 20px;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1), .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4){
        gap: 5px;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1) *:not(img), .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4) *:not(img){
        font-size: 10px;
        width: calc(100% - 25px);
    }

    
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(1){
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        font-size: 10px;
        gap: 5px;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(1)::before{
        content: "|";
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(1) > *:nth-child(1){
        order: -1;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(2){
        display: none;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(3) > *:nth-child(1){
        font-size: 10px;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(3){
        align-items: end;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(1){
        width: calc(100% - 30px);
        margin-right: auto;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(4){
        width: calc(100% - 30px);
        margin-left: auto;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(4){
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) > *:nth-child(1){
        border: 2px solid var(--orange);
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) > *:nth-child(2){
        display: block;
        border-radius: 10px;
        border: 2px solid var(--light-grey);
        height: 100%;
        font-family: "Codec Pro";
        font-weight: 900;
        font-style: italic;
        box-sizing: border-box;
    }
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) > *:nth-child(1),
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(4) > *:nth-child(2){
        font-size: 20px;
        width: 100%;
        padding: 5px 10px;
        box-sizing: border-box;
    }
    .p-index--predict--past > *:nth-child(2) > *:nth-child(odd){
        border-right: 1px solid var(--light-grey);
    }
    .p-index--predict--past > *:nth-child(2) > *:nth-child(even){
        border-left: 1px solid var(--light-grey);
    }
    .p-index--predict--past > *:nth-child(2){
        border-top: 2px solid var(--light-grey);
    }
    .p-index--questions > * .block-header .result{
        width: 103px;
    }
    .p-index--questions > * .block-header .points{
        font-size: 15px;
    }
    .p-index--questions > * > *:nth-child(3) h2{
        font-size: 20px;
    }
    .p-index--questions > * > *:nth-child(3) .radio > div > label > span,
    .p-index--questions > * > *:nth-child(3) .text > input{
        height: 30px;
    }
    .p-index--questions > * > *:nth-child(3) .text{
        grid-template-columns: 1fr 52px;
    }
    .p-index--questions > * > *:nth-child(3) .radio{
        grid-template-columns: 1fr 52px 1fr;
    }
    .p-index--questions > * > *:nth-child(3){
        min-height: 153px;
    }
}
@media screen and (max-width: 720px) {
    .p-index--questions{
        grid-template-columns: 1fr;
    }
    .p-index--questions > * > img{
        width: calc(100vw - 20px);
        height: calc((100vw - 20px) / 351 * 187);
    }
    .p-index--predict--current > *:nth-child(2),
    .p-index--predict--past > *:nth-child(2){
        grid-template-columns: 1fr;
    }
    .p-index--predict--past > *:nth-child(2) > *,
    .p-index--predict--past > *:nth-child(2) > * > *:nth-child(2),
    .p-index--predict--current > *:nth-child(2) > * > *:nth-child(2){
        grid-template-columns: repeat(2, calc((100vw - 50px) / 2));
    }
    .p-index--stats > *:nth-child(2) > * > *:nth-child(1){
        font-size: 20px;
    }
    .p-index--stats > *:nth-child(2) > * > *:nth-child(2){
        font-size: 8px;
    }
}


.error-page{
    min-height: calc(100vh - 330px);
    width: 100vw;
    margin-top: calc(var(--gap) * -1);
    margin-bottom: calc(var(--gap) * -1);

    background-color: var(--orange);
    background-image: url(/public/img/peak-bg-3.svg);
    background-position: center center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
    align-items: center;
}
.error-page h1{
    font-size: 332px;
    margin: 0px;
    position: relative;
    font-style: italic;
}
.error-page h1 > *:nth-child(1){
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 10px var(--grey);
}
.error-page h1 > *:nth-child(2){
    position: absolute;
    top: 0px;
    left: 0px;
    text-shadow: 20px 20px 0px var(--grey);
}
.error-page h2{
    text-align: center;
    font-size: 50px;
    font-style: italic;
}
.error-page .button{
    border: 2px solid white;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    font-size: 26px;
}
@media screen and (max-width: 1312px) {
    .error-page{
        min-height: calc(100vh - 162px);
    }
    .error-page h1{
        font-size: 200px;
    }
    .error-page h1 > *:nth-child(1){
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 5px var(--grey);
    }
    .error-page h1 > *:nth-child(2){
        text-shadow: 20px 20px 0px var(--grey);
    }
    .error-page h2{
        font-size: 40px;
        max-width: 452px
    }
}
@media screen and (max-width: 720px) {
    .error-page h1{
        font-size: 120px;
    }
    .error-page h1 > *:nth-child(1){
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 5px var(--grey);
    }
    .error-page h1 > *:nth-child(2){
        text-shadow: 20px 20px 0px var(--grey);
    }
    .error-page h2{
        font-size: 20px;
        max-width: 242px
    }
}

.loading{
    position: relative;
    pointer-events: none;
}
.loading::before{
    content: "";
    background-color: var(--dark-grey);
    opacity: 0.75;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 999;
    display: block;
    border-radius: inherit;
}
.loading::after{
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
    max-height: 50%;
    background-image: url(/public/img/loading.svg);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: pbl_loading 1s linear infinite;
    z-index: 999;
}

.tooltip{
    position: relative;
}
.tooltip > *:nth-child(2){
    position: absolute;
    left: -10px;
    bottom: calc(100% + 15px);
    width: max-content;
    max-width: 40vw;
    background: var(--grey);
    font-weight: 500;
    
    border: 2px solid var(--light-grey);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 20px;
    height: fit-content;

    z-index: 9999;
}
.tooltip.right > *:nth-child(2){
    right: -10px;
    left: unset;
}
.tooltip:not(:hover):not(.active) > div:nth-child(2){
    display: none;
}

@media screen and (min-width: 720px) {
    .tickets .block-title{
        font-size: 25px;
    }
}
.tickets > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
}
.tickets > *:nth-child(2) > *{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: var(--padding);
    box-sizing: border-box;
    border-radius: var(--radius);
    background-color: var(--grey);
}
.tickets > *:nth-child(2) > * > *:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.tickets > *:nth-child(2) > * > *:nth-child(1) > *{
    color: white;
    opacity: 0.5;
    text-decoration: none;
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
}
.tickets > *:nth-child(2) > * > *:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    align-items: center;
}
.tickets > *:nth-child(2) > * > *:nth-child(2) > *{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.tickets > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd){
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: white;
}
.tickets > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(odd) img{
    height: 68px;
    width: auto;
}
.tickets > *:nth-child(2) > * > *:nth-child(2) > *:nth-child(2){
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}
.tickets > *:nth-child(2) > * > *:nth-child(1),
.tickets > *:nth-child(2) > * > *:nth-child(2){
    padding: 0px var(--padding);
}
.tickets > *:nth-child(2) > * > *:nth-child(2){
    margin-top: -8px;
}
.tickets > *:nth-child(2) > * > *:nth-child(3){
    border-radius: 0px 0px var(--radius) var(--radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--orange);
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: 900;
    height: 64px;
}
.tickets.x7 > *:nth-child(2) > * > *:nth-child(3){
    background-color: var(--purple);
}
.tickets > *:nth-child(2) > *.disabled{
    cursor: default;
}
.tickets > *:nth-child(2) > *.disabled > *:nth-child(3){
    background-color: var(--light-grey);
    color: #ffffff88;
}
.tickets > *:nth-child(2) > *.no-tickets{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    background-color: unset;
    height: 5em;
    padding: 0px;
    grid-area: 1 / 1 / 2 / 4;
}
@media screen and (max-width: 1312px) {
    .tickets > *:nth-child(2){
        grid-template-columns: 1fr 1fr;
    }
    .tickets > *:nth-child(2) > *{
        border-radius: 10px;
    }
    .tickets > *:nth-child(2) > * > *:nth-child(3){
        border-radius: 0px 0px 10px 10px;
        font-size: 15px;
        height: 38px;
    }
    .tickets > *:nth-child(2) > * > *:nth-child(1) > *{
        max-width: 200px;
    }
    .tickets > *:nth-child(2) > * > *:nth-child(1), .tickets > *:nth-child(2) > * > *:nth-child(2){
        padding: 0px 10px;
    }
    .tickets > *:nth-child(2) > *.no-tickets{
        font-size: 20px;
        grid-area: 1 / 1 / 2 / 3;
    }
}
@media screen and (max-width: 720px){
    .tickets > *:nth-child(2){
        grid-template-columns: 1fr;
    }
    .tickets > *:nth-child(2) > * > *:nth-child(1) > *{
        max-width: 60vw;
    }
    .tickets > *:nth-child(2) > *.no-tickets{
        font-size: 15px;
        grid-area: unset;
    }
}

.player--season > div:nth-child(2) > div.placeholder,
.player--matches > div:nth-child(2) > div.placeholder{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    height: 100px;
}

.popup-content.confirm-form{
    box-shadow: unset;
    background-color: var(--dark-grey);
    padding: var(--padding);
    box-sizing: border-box;
    height: unset!important;
}
.popup .popup-content.confirm-form .cross{
    position: unset;
    margin-left: auto;
    display: block;
}
.popup .popup-content.confirm-form h2{
    min-height: 90px;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gap);
}
.popup .popup-content.confirm-form .btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.popup .popup-content.confirm-form .btns > *:last-child:nth-child(odd){
    grid-column: 1 / -1;
}

.rules{
    column-count: 2;
    gap: var(--gap);
}
.rules > *{
    margin-bottom: var(--gap);
    break-inside: avoid;
}
.rules > .full{
    column-span: all;
}
.rules > .rules-text,
.rules > .rules-img{
    display: flex;
    flex-direction: column;
    gap: 0px;
    box-sizing: border-box;
    background-color: var(--grey);
    border-radius: var(--radius);
}
.rules > .rules-img{
    padding: var(--padding);
}
.rules > .rules-img img{
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.rules > .rules-text > h3{
    font-family: "Codec Pro";
    font-weight: 900;
    font-size: 30px;
    text-transform: uppercase;
    font-style: italic;
    padding: var(--padding);
    border-bottom: 2px solid var(--light-grey);
}
.rules > .rules-text > div{
    padding: var(--padding);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
}
.rules > *:nth-child(10){
    break-after: column;
}
.rules .rules-marks > div{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0px;
}
.rules .rules-marks > div > *{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--padding);
}
.rules .rules-marks > div > * img{
    width: 40px;
    height: auto;
}
.rules .rules-marks > div > * > *:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width: 720px){
    .rules .rules-marks > div > *:nth-child(-n + 3){
        border-bottom: 2px solid var(--light-grey);
    }
    .rules .rules-marks > div > *:not(:nth-child(3n)){
        border-right: 2px solid var(--light-grey);
    }
}
@media screen and (max-width: 1312px) {
    .rules > *{
        column-span: all;
    }
    .rules > .rules-text,
    .rules > .rules-img{
        border-radius: 10px;
    }
    .rules > .rules-text > h3,
    .rules > .rules-text > div{
        padding: 10px;
        font-size: 15px;
    }
}
@media screen and (max-width: 720px){
    .rules .rules-marks > div{
        grid-template-columns: 1fr 1fr;
    }
    .rules .rules-marks > div > *:nth-child(-n + 4){
        border-bottom: 2px solid var(--light-grey);
    }
    .rules .rules-marks > div > *:not(:nth-child(2n)){
        border-right: 2px solid var(--light-grey);
    }
}

.rules-table{
    padding: var(--padding);
    font-size: 20px;
    text-align: center;
}
.rules-table table{
    border-collapse: collapse;
}
.rules-table tr:not(:last-child) > *{
    border-bottom: 2px solid var(--light-grey);
}
.rules-table tr > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
}
.rules-table tr > *{
    padding: var(--padding);
}
.rules-table tr:first-child > *{
    padding-top: 0px;
}
.rules-table tr:last-child > *{
    padding-bottom: 0px;
}
.rules-table tr > *:first-child{
    padding-left: 0px;
    text-align: start;
}
.rules-table tr > *:last-child{
    padding-right: 0px;
}
@media screen and (max-width: 1312px) {
    .rules-table{
        font-size: 15px;
    }
    .rules-table,
    .rules-table tr > *{
        padding: 10px;
    }
}
@media screen and (max-width: 360px) {
    .fl-index-transfer .pagination > div > *,
    .fl-index-transfer .pagination > a{
        width: 35px;
        height: 35px;
    }
    .fl-index-field > *:last-child > *:last-child > *:nth-child(1):not(:last-child),
    .fl-index-field > *:last-child > *:last-child > *:nth-child(2){
        height: 58px;
    }
    .fl-index-field > *:last-child > *:last-child{
        height: 58px;
    }
    .fl-index-field > *:last-child{
        margin-bottom: calc((58px + var(--gap)) * 2);
    }
}

.fl-index-field.no-btns-tour > *:nth-child(3){
    margin-bottom: 0px!important;
}
.fl-index-field.no-btns-tour > *:nth-child(3) > *:last-child{
    display: none;
}
    .fl-index-field > *:nth-child(2) > .pbl-select .pbl-select--placeholder{
        padding-left: 10px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2) .pbl-select--placeholder::before{
        content: "test";
        white-space: nowrap;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(1) .pbl-select--placeholder::before{
        content: "Капитан";
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(2) .pbl-select--placeholder::before{
        content: "Вице-капитан";
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2) .pbl-select--placeholder{
        row-gap: 5px;
        grid-template-rows: 10px;
        padding-top: 27px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2) .pbl-select--placeholder span{
        grid-area: 2 / 1 / 3 / 3;
        opacity: 0.5;
        position: relative;
        font-size: 12px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2)::after{
        content: "";
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        background-image: url(/public/img/field_vicecap.svg);
        background-position: center center;
        background-size: 100% 100%;
        top: 10px;
        left: 10px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(1)::after{
        background-image: url(/public/img/field_cap.svg);
    }
@media screen and (max-width: 1312px){
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2) .pbl-select--placeholder::before{
        font-size: 10px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2) .pbl-select--placeholder{
        grid-template-columns: 1fr 10px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2) .pbl-select--placeholder span{
        font-size: 8px;
    }
    .fl-index-field > *:nth-child(2) > .pbl-select:nth-child(-n+2)::after{
        width: 10px;
        height: 10px;
    }
}

@media screen and (max-width: 720px) {
    :root{
        --card-w: 18vw;
    }
    .field-card{
        width: var(--card-w);
    }
    .field-card > img:nth-child(1){
        height: calc(var(--card-w) * 0.6);
    }
    .field > .spread-bot{
        gap: calc((var(--gap) * 2) + var(--card-w));
    }
    .field-container .bench > *{
        width: var(--card-w);
    }
    .field-card.add{
        min-height: calc(var(--card-w) + 2px);
    }
    .field-card *:nth-child(2), .field-card *:nth-child(3){
        font-size: 10px;
    }
    .field-card *:nth-child(2), .field-card *:nth-child(3){
        height: 15px;
    }
}
@media screen and (min-width: 720px) {
    .field-card.add > img{
        opacity: 0;
    }
}
.popup.loading{
    pointer-events: all;
}
#video-popup.loading::before{
    content: unset;
}
#video-popup.loading::after{
    z-index: -1;
}

.block-header > .pbl-select{
    width: 300px;
    border: 2px solid var(--light-grey);
}
@media screen and (max-width: 720px) {
    .block-header > .pbl-select{
        width: calc(50vw - 20px);
    }
}
@media screen and (min-width: 720px) {
    .player-container .player--bio > *.placeholder{
        display: none;
    }
}

.player-container .player--bio > *.placeholder{
    grid-area: 1 / 2 / 3 / 3;
    border-radius: var(--radius);
    background-color: var(--grey);
    padding: 10%;
}
.player-container .player--bio > *.placeholder img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popup-content.match--main-info{
    background-color: var(--grey);
    box-shadow: unset;
    width: 1312px;
    height: fit-content;
    overflow: auto;
    box-sizing: border-box;
}
.popup-content.match--main-info .block-header{
    position: relative;
    padding-right: calc(var(--padding) + 10px + 2em);
}
.popup-content.match--main-info .block-header > img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 2em;
    height: 2em;
    cursor: pointer;
}
.popup-content.match--main-info > .score > *:nth-child(odd) > *:nth-child(1){
    width: 100px;
    height: 100px;
}
.popup-content.match--main-info > .score > *:nth-child(even) .score{
    font-size: 60px;
}
.popup-content.match--main-info > .score > *:nth-child(even) .sub-score{
    font-size: 30px;
}
@media screen and (max-width: 720px) {
    .popup-content.match--main-info > .score > *:nth-child(even) .score{
        font-size: 25px;
    }
    .popup-content.match--main-info > .score > *:nth-child(even) .sub-score{
        font-size: 15px;
    }
    .popup-content.match--main-info > .block-header > *{
        max-width: 60%;
    }
    .popup-content.match--main-info > .score > *:nth-child(odd) > *:nth-child(1){
        width: 50px;
        height: 50px;
    }
    .popup-content.match--main-info .block-header > img{
        width: 1.5em;
        height: 1.5em;
    }
    .popup-content.match--main-info .block-header{
        position: relative;
        padding-right: calc(var(--padding) + 10px + 1.5em);
    }
}

.popup-content.tournament--match-setup{
    background-color: var(--grey);
    box-shadow: unset;
    width: 646px;
    height: fit-content;
    box-sizing: border-box;
}
.popup-content.tournament--match-setup .field-container{
    overflow: auto;
}

.popup-content.tournament--match-setup .block-header > *:nth-child(2){
    font-size: 20px;
    font-weight: 500;
    color: var(--orange);
    margin-right: auto;
}
.popup-content.tournament--match-setup .block-header > *:nth-child(3){
    opacity: 0.5;
}
.popup-content.tournament--match-setup .field-card .cross{
    position: absolute;
    top: -1px;
    right: -1px;
    cursor: pointer;
    border-radius: 0px 10px 0px 10px;
    background-color: var(--grey);
    background-image: url(/public/img/tournament-red-circle.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 23px;
    height: 23px;
    left:unset;
    bottom: unset;
}
.popup-content.tournament--match-setup .block-header{
    position: relative;
    padding-right: calc(var(--padding) + 10px + 2em);
}
.popup-content.tournament--match-setup .block-header > img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 2em;
    height: 2em;
    cursor: pointer;
}
@media screen and (max-width: 1312px) {
    .popup-content.tournament--match-setup{
        width: 352px;
    }
    .popup-content.tournament--match-setup .block-header > *:nth-child(2){
        font-size: 10px;
        font-weight: 400;
    }
    .popup-content.tournament--match-setup .block-header > *:nth-child(3){
        font-size: 10px;
    }
    .popup-content.tournament--match-setup .field-card .cross{
        width: 13px;
        height: 13px;
        background-size: 8px 8px;
        border-radius: 0px 5.5px 0px 5.5px;
    }
    .popup-content.tournament--match-setup .block-header > img{
        width: 1.5em;
        height: 1.5em;
    }
    .popup-content.tournament--match-setup .block-header{
        position: relative;
        padding-right: calc(var(--padding) + 10px + 1.5em);
    }
}

.team-boost{
    gap: 0px;
}
.team-boost > .spoiler--head{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.team-boost > .spoiler--head::after{
    content: "";
    width: 10px;
    height: 10px;
    transform: scaleY(1);
    background-image: url(/public/img/select-arrow.svg);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    transition: var(--transition);
}
.team-boost.active > .spoiler--head::after,
.team-boost > .spoiler--head.active::after{
    transform: scaleY(-1);
}
.team-boost > .spoiler--body{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.team-boost > .spoiler--body > * > *{
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--light-grey);
    padding: 4px;
    cursor: pointer;
    transition: var(--transition);
}
.team-boost > .spoiler--body > *{
    border-top: 2px solid var(--light-grey);
    padding: 20px;
    box-sizing: border-box;
    padding-top: 18px;
}
.team-boost > .spoiler--body > *:not(:last-child){
    border-right: 2px solid var(--light-grey);
    padding-right: 18px;
}
.team-boost > .spoiler--body > * > * > img{
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
    margin-left: 0px;
    display: block;
    transition: var(--transition);
}
.team-boost > .spoiler--body > * > *.active{
    background-color: var(--orange);
}
.team-boost > .spoiler--body > * > *.active > img{
    margin-left: auto;
}
.team-boost > .spoiler--body.team-boost--description > *:nth-child(2){
    grid-area: 1 / 2 / 2 / 6;
    color: #ffffff7e;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

@media screen and (max-width: 1312px) {
    .team-boost > .spoiler--body > *{
        padding: 10px;
    }
    .team-boost > .spoiler--head{
        padding: 10px;
        font-size: 10px;
    }
    .team-boost > .spoiler--body.team-boost--description > *:nth-child(2){
        font-size: 10px;
    }
    
    .team-boost > .spoiler--body > *{
        padding-top: 8px;
    }
    .team-boost > .spoiler--body > *:not(:last-child){
        padding-right: 8px;
    }
}

.popup-content.booster-popup{
    box-shadow: unset;
    height: unset;
    background-color: var(--dark-grey);
    padding: 10px;
}
.popup-content.booster-popup > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
}
.popup-content.booster-popup > div:nth-child(1) img{
    cursor: pointer;
    width: 30px;
    height: 30px;
    box-shadow: 0px 0px 50px 10px #000000, inset 0px 0px 100px 50px #000000;
}
.popup-content.booster-popup > div:nth-child(2){
    position: relative;
}
.popup-content.booster-popup > div:nth-child(2) .button-prev,
.popup-content.booster-popup > div:nth-child(2) .button-next{
    position: absolute;
    top: calc(50px);
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(calc(-50px - 20px - 100%), -50%) rotate(90deg);
    background-color: var(--light-grey);
    background-image: url(/public/img/select-arrow.svg);
    background-position: center center;
    background-size: 30% 30%;
    background-repeat: no-repeat;
    transition: var(--transition);
    border-radius: 1000px;
    cursor: pointer;
    z-index: 10;
}
.popup-content.booster-popup > div:nth-child(2) .button-next{
    transform: translate(calc(50px + 20px), -50%) rotate(-90deg);
}
.popup-content.booster-popup .swiper-slide > *:nth-child(1){
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--gap);
}
.popup-content.booster-popup .swiper-slide > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    transition: var(--transition-med);
}
.popup-content.booster-popup .swiper-slide > *:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    justify-content: start;
}
.popup-content.booster-popup .swiper-slide > *:nth-child(2) > *:nth-child(2){
    font-size: 12px;
    opacity: 0.5;
}
.popup-content.booster-popup .btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.popup-content.booster-popup .swiper-slide{
    transition: var(--transition-med);
}
.popup-content.booster-popup .swiper-slide:not(.swiper-slide-active){
    opacity: 0;
}
.popup-content.booster-popup .swiper-slide:not(.swiper-slide-active) > *:nth-child(1) img{
    transform: rotateY(120deg);
}
@media screen and (max-width: 720px) {
    
}