.with-loader{
    position: relative;
}
.with-loader > .loader{
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: #FFFFFFB2;
    -webkit-box-shadow: 0px 4px 8px 16px #FFFFFFB2;
    -moz-box-shadow: 0px 4px 8px 16px #FFFFFFB2;
    box-shadow: 0px 4px 8px 16px #FFFFFFB2;
    z-index: 199;
    box-sizing: border-box;
    border-radius: 10px;
}
.with-loader > .loader > img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    object-position: center;
    width: 150px;
    height: 150px;
}
.with-loader > .loader::before,
.with-loader > .loader::after{
    content: none;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12{
    padding: 0.5em;
    box-sizing: border-box;
}


.m-t-0{
    margin-top: 0em!important;
}
.m-t-1{
    margin-top: 1em!important;
}
.m-t-2{
    margin-top: 2em!important;
}
.m-t-3{
    margin-top: 3em!important;
}
.m-t-4{
    margin-top: 4em!important;
}

.m-b-0{
    margin-bottom: 0em!important;
}
.m-b-1{
    margin-bottom: 1em!important;
}
.m-b-2{
    margin-bottom: 2em!important;
}
.m-b-3{
    margin-bottom: 3em!important;
}
.m-b-4{
    margin-bottom: 4em!important;
}

.col-1{
    flex-basis: calc(100% / 12 * 1 - 0.5em);
}
.col-2{
    flex-basis: calc(100% / 12 * 2 - 0.5em);
}
.col-3{
    flex-basis: calc(100% / 12 * 3 - 0.5em);
}
.col-4{
    flex-basis: calc(100% / 12 * 4 - 0.5em);
}
.col-5{
    flex-basis: calc(100% / 12 * 5 - 0.5em);
}
.col-6{
    flex-basis: calc(100% / 12 * 6 - 0.25em);
    max-width: calc(100% / 12 * 6 - 0.25em);
}
.col-7{
    flex-basis: calc(100% / 12 * 7 - 0.5em);
}
.col-8{
    flex-basis: calc(100% / 12 * 8 - 0.5em);
}

@media screen and (max-width: 1099px) {
    .col-md-1{
        flex-basis: calc(100% / 12 * 1 - 0.5em);
    }
    .col-md-2{
        flex-basis: calc(100% / 12 * 2 - 0.5em);
    }
    .col-md-3{
        flex-basis: calc(100% / 12 * 3 - 0.5em);
    }
    .col-md-4{
        flex-basis: calc(100% / 12 * 4 - 0.5em);
    }
    .col-md-5{
        flex-basis: calc(100% / 12 * 5 - 0.5em);
    }
    .col-md-6{
        flex-basis: calc(100% / 12 * 6 - 0.5em);
    }
    .col-md-7{
        flex-basis: calc(100% / 12 * 7 - 0.5em);
    }
    .col-md-8{
        flex-basis: calc(100% / 12 * 8 - 0.5em);
    }
    .col-md-12{
        flex-basis: calc(100%);
        max-width: 100%;
    }
}

a,a:hover,a:click,a:visited{
    -webkit-tap-highlight-color: white;
    color: inherit;
}

.row{
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    flex-wrap: wrap;
    flex-grow: 0;
}
.row-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
    flex-wrap: wrap;
}
.white-text{
    color: white;
}
.black-text{
    color: #2B2B2B;
}
.gray-text{
    color: #2B2B2B7f;
}
.darkgray-text{
    color: #2B2B2B;
}
.blue-text{
    color: #214FE2;
}
.default-font-size{
    font-size: 1em!important;
}
.semi-big-font{
    font-size: 1.5em!important;
}
.semi-small-font{
    font-size: 0.75em!important;
}
.main-gradient-text{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.container{
    width: 100%;
    max-width: 1340px;
    padding: 0px 0.5em;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.small-container{
    width: 100%;
    padding: 1em 3em;
    box-sizing: border-box;
    max-width: 955px;
    margin-left: auto;
    margin-right: auto;
}
.medium-container{
    width: 100%;
    padding: 1em 3em;
    box-sizing: border-box;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}
.round-container{
    border-radius: 2em;
}
.top-round-container{
    border-radius: 2em 2em 0px 0px;
}
.bottom-round-container{
    border-radius: 0px 0px 2em 2em;
}
.page-title-container{
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
}
.page-title-container h1{
    margin-top: 0px;
    margin-bottom: 30px;
}
.page-title-container.small-page-title{
    min-height: 160px;
}
@media screen and (max-width: 1100px){
    .page-title-container{
        padding: 10px;
        padding-top: 25px;
        padding-bottom: 25px;
    }
}
@media screen and (max-width: 988px) {

    content .page-title-container{
        min-height: 300px;
        margin-bottom: 25px;
        padding: 10px;
        padding-top: 25px;
        padding-bottom: 25px;
        box-sizing: border-box;
    }
    content .page-title-container h1{
        margin-top: 0px;
        margin-bottom: 25px;
    }
    content .page-title-container > .container{
        padding: 0px;
    }
    .page-title-container.small-page-title{
        min-height: 170px;
    }
}
@media screen and (max-width: 988px) {
    .round-container{
        /* padding: 0px 1em; */
        border-radius: 1em;
    }
    .bottom-round-container{
        padding: 0px 10px;
    }
    .small-container{
        padding: 0.5em;
    }
    .container{
        padding: 0px 1em;
    }
}
a{
    text-decoration: none;
    color: inherit;
}
.margin-bot-minus{
    margin-bottom: -2em!important;
    padding-bottom: 2em!important;
}
.background-blue{
    background: var(--color-blue) url(/public/img/background-blue.svg);
    background-repeat:no-repeat;
    background-size: cover;
}
.background-blue-wi{
    background: var(--color-blue);
}
.background-blue-big{
    background: var(--color-blue) url(/public/img/background-blue-big.svg);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
}
.background-red{
    background: var(--color-red) url(/public/img/background-red.svg);
    background-repeat: repeat-y;
    background-size: 100% auto;
}
.background-red-2{
    background: var(--color-red) url(/public/img/background-red-2.svg);
    background-repeat: repeat-y;
    background-size: 100% auto;
}
.background-white{
    background-color: white;
}
.background-gray{
    background-color: #EDEDED;
}
.background-red-blue{
    background: url(/public/img/red-blue-bg.svg), var(--color-main-gradient);
    background-repeat: repeat-y;
    background-size: 100% auto;
}
@media screen and (max-width: 988px) {
}
.background-red-blue-wi{
    background: var(--color-main-gradient);
}
@media screen and (orientation:portrait) {
    .background-red-blue,
    .background-red-2{
        background: url(/public/img/red-blue-bg-mob.svg), var(--color-main-gradient);
    }
}

.uppercase{
    text-transform: uppercase;
}
.full-w{
    width: 100%;
}
h1{
    font-size: 50px;
    margin: 0px;
}
.align-center-tablet,
.fs-40{
    font-size: 40px;
}
.fs-30{
    font-size: 30px;
}
.fs-20{
    font-size: 22px;
}
.h-margin-bottom,
.h-margin-bottom,
.h-margin-bottom,
.h-margin-bottom{
    margin-top: 0px;
    margin-bottom: 0.5em;
}
@media screen and (max-width: 988px) {
    h1,
    h1.align-center-tablet,
    .fs-40,
    .fs-30{
        font-size: 2.5em;
    }
    align-center-tablet{
        margin-bottom: 1em;
    }
}
@media screen and (max-width: 988px) {
    .fs-m-16{
        font-size: 16px;
    }
    .fs-20{
        font-size: 15px;
    }
}
@media screen and (min-width: 1100px) {
    .tablet-lower{
        display: none!important;
    }
}
@media screen and (max-width: 1100px) {
    .tablet-hide{
        display: none!important;
    }
}
@media screen and (max-width: 1099px) {
    .pc-only{
        display: none;
    }
}

.single-line-height{
    line-height: 0.75em;
}
.half-margin{
    margin-top: 30px!important;
    margin-bottom: 30px!important;
}
.half-margin-top{
    margin-top: 30px!important;
}
.half-margin-bottom{
    margin-bottom: 30px!important;
}
.default-margin{
    margin-top: 60px!important;
    margin-bottom: 60px!important;
}
.default-margin-top{
    margin-top: 60px!important;
}
.default-margin-bottom{
    margin-bottom: 60px!important;
}

.default-padding{
    padding-top: 60px!important;
    padding-bottom: 60px!important;
}
.default-padding-top{
    padding-top: 60px!important;
}
.default-padding-bottom{
    padding-bottom: 60px!important;
}
@media screen and (max-width: 988px) {
    .default-margin{
        margin-top: 25px!important;
        margin-bottom: 25px!important;
    }
    .default-margin-top{
        margin-top: 25px!important;
    }
    .default-margin-bottom{
        margin-bottom: 25px!important;
    }

    .default-padding{
        padding-top: 25px!important;
        padding-bottom: 25px!important;
    }
    .default-padding-top{
        padding-top: 25px!important;
    }
    .default-padding-bottom{
        padding-bottom: 25px!important;
    }
    .half-margin{
        margin-top: 10px!important;
        margin-bottom: 10px!important;
    }
    .half-margin-top{
        margin-top: 10px!important;
    }
    .half-margin-bottom{
        margin-bottom: 10px!important;
    }
}

:root{
    --color-blue: #214FE2;
    --color-red: #DE3A34;
    --color-peach: #E56A66;
    --color-blue-transparent: #214ee24f;
    --color-red-transparent: #DE3A344f;
    --color-main-gradient: linear-gradient(60deg, rgba(222,58,53,1) 0%, rgba(33,79,226,1) 100%);

}
:root{
    font-size: 18px;
}
@media screen and (max-width: 1100px){
    :root{
        font-size: 14px;
    }
}

body{
    font-family: "Pragmatica Extended";
    margin:0px;
    font-size: 15px;
    color: white;
    overflow-x: hidden;
    letter-spacing: 0px;

}

@media screen and (max-width: 988px){
    body{
        font-size: 8px;
    }
}

header{
    /* position: fixed; */
    position: relative;
    z-index: 300;
    top:0px;
    left:0px;
    width: 100%;
    background: var(--color-main-gradient);
    font-weight: 700;
    box-sizing: border-box;
    /* overflow-x: hidden; */

    -webkit-box-shadow: 0px 4px 16px 16px rgba(255, 255, 255, 0.15);
    -moz-box-shadow: 0px 4px 16px 16px rgba(255, 255, 255, 0.15);
    box-shadow: 0px 4px 16px 16px rgba(255, 255, 255, 0.15);
}
header > div.container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1em 0px;
    gap: 0.5em;
}
@media screen and (max-width: 1350px){
    header > div.container{
        padding: 1em 0.5em;
    }
}
body.red header{
    background-color: var(--color-red-transparent);
}
header a,
header .menu > span,
header .mobile-menu > span{
    font-size: 1em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    line-height: unset;
    display: block;
    width: fit-content;
    /* text-shadow: 0px 0px 7px white; */
}
@media screen and (max-width: 1300px){
    header a,
    header .menu > span,
    header .mobile-menu > span{
        font-size: 15px;
        margin-bottom: 1em;
    }
}
@media screen and (max-width: 988px){
    header a,
    header .menu > span,
    header .mobile-menu > span{
        font-size: 15px;
        margin-bottom: 1em;
    }
}
.header-left-side{
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items: center;
}
option,
.option{
    /* wrap text in compatible browsers */
    -moz-white-space: pre-wrap;
    -o-white-space: pre-wrap;
    white-space: pre-wrap;
    /* hide text that can't wrap with an ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;

    font-family: "Pragmatica Extended";
}
header .logo,
footer .logo{
    height: 5.25em;
}
header .logo img,
footer .logo img{
    height: 100%;
    width: 100%;
}
header .menu{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    align-items: center;
}
header .menu > div.expandable{
    position: relative;
}
header .menu > div.expandable > div{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    top: 100%;
    left: -20px;
    width: fit-content;
    opacity: 1;

    white-space: nowrap;

    transition: opacity 0.15s ease-in-out;

    overflow: hidden;

    border-radius: 0px 0px 20px 20px;
}
header .menu > div.expandable > div::after{
    content: "";
    background: var(--color-main-gradient);
    background-position: center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
    left: calc(((100vw - 1340px) / -2) - 34px);
    width: 100vw;
    /* background-repeat: no-repeat; */
    height: calc(100% - 27px);
    z-index: -10;

    transform: scaleY(-1);
}
header .menu > div.expandable > div a{
    /* text-shadow:
    2px 0px 2px black,
    -2px 0px 2px black,
    0px 2px 2px black,
    0px -2px 2px black; */
}
header .menu > div.expandable:not(:hover) > *:not(:nth-child(1)){
    opacity: 0;
    top: -1000%
}
@media screen and (max-width: 1350px) {
    header .menu > div.expandable > div::after{
        height: calc(100% - 26px);
    }
}
@media screen and (max-width: 1269px) {
    header .menu > div.expandable > div::after{
        height: calc(100% - 16px);
        left: calc(-34px);
    }
}
@media screen and (max-width: 1200px) {
    header .menu > div.expandable > div::after{
        height: calc(100% - 15px);
    }
}
@media screen and (max-width: 1100px) {
    header .menu > div.expandable > div::after{
        height: calc(100% - 11px);
    }
}
@media screen and (max-width: 1050px) {
    header .menu > div.expandable > div::after{
        height: calc(100% - 9px);
    }
}

.mobile-menu .expandable{
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    transition: all 0.15s linear;
}
.mobile-menu .expandable.active{
    gap: 15px;
}
.mobile-menu .expandable > div{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.mobile-menu .expandable *{
    margin-bottom: 0px;
}
.mobile-menu .expandable > div{
    margin-left: 10px;
    padding-left: 10px;
    border-left: 2px solid white;
    height: fit-content;
    max-height: 0vh;
    transition: all 0.15s ease-in-out;
    overflow: hidden;
}
.mobile-menu .expandable.active > div{

    max-height: 200vh;
}

header .menu a{
    padding: 1em;
    border: 2px solid transparent;
    border-radius: 3em;
    transition: all 0.25s ease-in-out;
    text-align: center;
    cursor: pointer;
}
header .menu a:hover{
    border: 2px solid white;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.507);
    -moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.507);
    box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.507);
}

header .menu .menu-link-w-img,
header .mobile-menu .menu-link-w-img{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 1em;
    border-radius: 3em;
    min-height: 2em;
}
header .menu .menu-link-w-submenu{
    position: relative;
}
header .menu .menu-link-w-img > img,
header .mobile-menu .menu-link-w-img > img{
    /* width: 2em; */
    width: 1.25em;
    height: 2em;
    object-fit: contain;
    object-position: center;
}
header .menu .menu--pilots img,
header .mobile-menu .menu-link-w-img.menu--pilots > img,
header .mobile-menu .menu-link-w-img > img{
    width: 2.5em;
}
header .menu .menu--pilots > span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}
header .menu .menu--pilots {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    border: 2px solid white;
}
.menu-link-no-highlight{
    border: none!important;
    box-shadow: none!important;
}
.menu-link-w-submenu > div{
    /* display: none; */
    display: flex;
    position: absolute;
    flex-direction: column;
    gap:1.5em;
    top: 100%;
    left:0px;
    width: 100%;
    height: auto;
    padding-left: 3em;
    overflow: hidden;
    height: auto;
    max-height: 0px;
    transition: max-height 0.25s ease-in-out;
}
.menu-link-w-submenu:hover > div{
    max-height: 30em;
}
.menu-link-w-submenu > div > a{
    position: relative;
    text-shadow: 0px 0px 10px black;
}
.menu-link-w-submenu > div > a::before{
    content: "";
    position: absolute;
    left:0px;
    top:100%;
    width: 0px;
    border-top: 2px solid white;
    transition: all 0.25s ease-in-out;
}
.menu-link-w-submenu > div > a:hover::before{
    width: 100%;
}

header .mobile-menu .mobile-menu--pilots{
    /* width: 100%;
    box-sizing: border-box;
    justify-content: center;
    width: fit-content;
    padding: 0.5em 1em;
    margin-left: auto;
    margin-right: auto;
    border-width: 2px; */
    padding: 0px;
}
header .mobile-menu .login,
header .mobile-menu .logout{

    border-radius: 2em;
    border: 2px solid white;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 2em;
    transition: all 0.25s ease-in-out;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 50px;
    box-sizing: border-box;
}
@media screen and (max-height: 500px) {
    header .mobile-menu .login,
    header .mobile-menu .logout{
        position: fixed;
        bottom: 1em;
        right: 1em;
    }
}
/* header .menu .menu--pilots:hover{
    background-color: #28235B;
} */


header .profile{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
@media screen and (max-width: 1300px){
    header{
        font-size: 0.9em;
    }
}
@media screen and (max-width: 1200px){
    header{
        font-size: 0.8em;
    }
}
@media screen and (max-width: 1050px){
    header{
        font-size: 0.7em;
    }
}
@media screen and (max-width: 988px){
    header{
        font-size: 1em;
    }
    header .profile a.profile-img{
        display: none;
    }
}
header .profile a:not(.profile-img){
    border-radius: 2em;
    border: 2px solid white;
    padding: 1em 2em;
    transition: all 0.25s ease-in-out;
}
header .profile a.profile-img img{
    height: 4.25em;
}
@media screen and (min-width: 988px){
    header .profile a:not(.profile-img):hover{
        -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.507);
        -moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.507);
        box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.507);
    }
}
@media screen and (max-width: 1100px){
    header .logo{
        display: block;
        height:4em;
    }
}
@media screen and (max-width: 988px){
    header .logo{
        display: block;
        height:60px;
    }
    footer .logo{
        height: 60px;
    }
    header{
        padding: 0.5em 0px;
    }
}
header .menu{
    font-size: 1em;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5em;
    align-items: center;
}
header.active{
    background-color: rgba(33, 78, 226, 1);
}
@media screen and (max-width: 1000px){
    header{
        position: fixed;
        transition: background-color 0.25s ease-in-out;
        background-color: rgba(33, 78, 226, 0.5);
    }
    header.body-scrolled{
        background-color: rgba(33, 78, 226, 1);
    }
    .road{
        padding-top: 100px;
    }
}
@media screen and (max-width: 500px){
    header > div.container{
        padding: 5px 1em;
    }
}
body.white header{
    color: white;
}
body.red{
    background-color: var(--color-red);
}
.align-center{
    text-align: center;
}
@media screen and (max-width: 1000px) {
    .align-center-tablet{
        text-align: center;
    }
}
.margin-auto{
    margin-left: auto;
    margin-right: auto;
}
.block-fit{
    display: block;
    width: fit-content;
}
.padding{
    padding: 1em;
}
.big-padding{
    padding: 2em;
}
.no-padding{
    padding: 0px;
}
.d-block{
    display: block;
}
.bold{
    font-weight: 700;
}
.medium{
    font-weight: 500;
}
.extrabold{
    font-weight: 800!important;
}
.normal{
    font-weight:400;
}
a.inherit-color{
    color: inherit;
    border-bottom: 2px solid;
}

input[type="submit"]:disabled,
input[type="submit"].disabled{
    filter:contrast(0.7);
    cursor: wait;
}

content{
    min-height: calc(100vh - 100px);
    /* margin-top: 1em; */
    /* margin-bottom: 1em; */
    display: block;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: -1px;
}
@media screen and (max-width:988px) {
    content{
        min-height: calc(100vh);
    }
}
body.red content{
    margin-top: 8em;
}
.column-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
content.column-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
body.menu{
    position: fixed;
    width: 100%;
}
.mobile-menu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    height: calc(100vh);
    padding-top: 108px;
    width: 100%;
    top:0px;
    right: -100%;
    background: var(--color-main-gradient);
    transition: all 0.25s ease-in-out;
    padding-bottom: calc(2em + 24px + 2em);
    box-sizing: border-box;

    display: none;
    color: white;
}
header.active .container > div:not(.mobile-menu){
    z-index: 100;
}
@media (orientation: landscape) {
    .mobile-menu{
        max-width: 550px;
    }
}
.mobile-menu.active{
    right: 0px;
    display: flex;
}
.mobile-menu > div{
    padding: 1em 2em;
    font-size: 1.5em;
    line-height: 2em;
}
.blind{
    display: none;
    height: 3em;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.blind:hover{
    transform: scale(1.05);
    filter:invert(1);
}
.burger{
    display: none;
    position: relative;
    border: 2px solid white;
    border-radius: 100% 0px 100% 100%;
    cursor: pointer;
}
body.white .burger{
    border-color: white;
}
body.red .burger{
    border-color: white
}

.burger > span{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 2em;
    height: 2px;
    background-color: white;
    transition: all 0.25s ease-in-out;
}
.burger > span::before,
.burger > span::after{
    content: "";
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    display: block;
    width: 2em;
    height: 2px;
    background-color: white;

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

body.red .burger > span::before,
body.red .burger > span::after,
body.red .burger > span{
    background-color: white;
}

.burger > span::before{
    top: -0.5em;
}
.burger > span::after{
    bottom: calc(-0.5em);
}
.burger.active > span{
    width: 0px;
}
.burger.active > span::before{
    top: 0px;
    transform: translateX(-50%) rotate(45deg);
}
.burger.active > span::after{
    bottom: 0px;
    transform: translateX(-50%) rotate(-45deg);
}
/* .burger{
    display: flex;
    height: 4em;
    width: 4em;
} */
/* body{
    padding-top: 8em;
} */
header{
    /* position: fixed; */
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    z-index: 300;
}
body.white header{
    /* background-color: white; */
}
body.red header{
    background-color: var(--color-red);
}

header .profile > a.logout{
    display: none;
}
@media screen and (max-width: 988px){
    header > .container{
        height: 70px;
    }
}
@media screen and (max-width: 988px) {
    .burger{
        display: flex;
        height: 4em;
        width: 4em;
    }
    header .menu{
        display: none;
    }
    header .profile > a.login{
        display: none;
    }
    header.active .profile > a.login,
    header.active .profile > a.logout{
        display: none;
        /* display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 2em;
        left: 50%;
        width: 150px;
        height: 50px;
        box-sizing: border-box;
        transform: translateX(-50%);
        z-index: 99999; */
    }
    header.active .profile > a.profile-img{
        display: block;
        height: 60px;
        margin-bottom: 0px;
    }
    header .logo{
        margin-bottom: 0px;
        width: 60px;
    }
    header .logo img{
        width: fit-content;
    }
    header .profile{
        height: 60px;
    }
    header .profile > a:last-child img{
        height: 100%;
    }
}
@media screen and (max-width: 500px) {
    .burger{
        display: flex;
        height: 50px;
        width: 50px;
    }
}


.road{
    background-image: url(/public/img/road_bg.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* .road > .row{
    justify-content: center;
} */
.road > div.container{
    min-height: calc(100vh - 100px + 3em);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;

    background-image: url(/public/img/road_cup.png);
    background-size: auto 95%;
    /* background-size: auto min(95%, 750px); */
    background-position: center bottom;
    background-repeat: no-repeat;
}
@media screen and (max-width: 988px) {
    .road > div.container{
        min-height: calc(100vh - 100px + 2em);
    }
}
@media screen and (max-width: 500px) {
    .road > div.container{
        min-height: min(150vw, calc(100vh - 100px));
        background-size: 80% auto;
        background-position: center center;


    }
}
.road img{
    margin-bottom: 5vh;
    height: min(250px);
    max-width: 100%;
    object-fit: contain;
    object-position: center;

}
.road .buttons{
    justify-content: center;
    gap: 1em;
    margin-bottom: 4em;
    width: 100%;
}
.road .buttons a{
    border-radius: 3em;
    border: 2px solid white;
    padding: 0.5em 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    flex-basis: min(calc(50% - 0.5em), 500px);
    text-transform: uppercase;
    background: var(--color-main-gradient);
    text-align: center;
    font-size: 1.33em;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

@media screen and (max-width: 988px){
    .road .buttons{
        margin-bottom: 6em;
        gap: 15px;
    }
}
@media screen and (max-width: 500px){
    .road .buttons{
        margin-bottom: 5em;
    }
}
@media screen and (max-width: 400px){
    .road .buttons{
        margin-bottom: 4em;
    }
}
@media screen and (max-width: 350px){
    .road .buttons{
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 1000px){
    .road .buttons > a{
        /* width: 100%; */
        /* width: 400px; */
        width: calc(50% - 1em);
        max-width: 90vw;
        padding-left: 1em;
        padding-right: 1em;
        /* font-size: 1em; */
    }
    .road img{
        height: 200px;
        margin-bottom: 44px;
    }
    body content > *:not(.js-app-content):first-child,
    body content > *.js-app-content:first-child > *:first-child{
        padding-top: 103px;
    }
}
@media screen and (max-width: 1000px){
    .road .buttons > a{
        min-height: 50px;
    }
}
@media screen and (max-width: 600px){
    .road .buttons{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .road .buttons > a{
        width: 260px;
        font-size: 2em;
        padding: 0.75em 0px;
    }
    .road img{
        height: 150px;
    }
}
@media screen and (max-width: 988px){
    body content > *:not(.js-app-content):first-child,
    body content > *.js-app-content:first-child > *:first-child{
        padding-top: 103px;
    }
}

.slider{
    margin-left: auto;
    margin-right: auto;
}
.slider .slider-container .row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(2, calc(300px - 1em)); */
    grid-auto-rows: 1fr;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}
/* @media screen and (max-width: 1200px){
    .slider .slider-container .row{
        grid-template-rows: repeat(2, calc(25vw - 1em));
    }
}
@media screen and (max-width: 1200px){
    .slider .slider-container .row{
        grid-template-rows: repeat(2, calc(25vw - 1em));
    }
} */
@media screen and (max-width: 600px){
    .slider .slider-container .row{
        display: grid;
        grid-template-rows: auto;
    }
}
.slider.profile-slider .slider-container .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.slider .slider-container .slide > *{
    flex-basis: calc((100% - 6em) / 7);
    /* display: none; */
    padding: 0.25em;
    border-radius: 0.5em;
    background: white;
    cursor: pointer;
}
.slider .slider-container .slide > * img:not(.info){
    width: 100%;
    box-sizing: border-box;
    padding: 2em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1em;
    padding-top: 1em;
    width: 100%;
    object-fit: contain;
}
@media screen and (max-width: 1300px){
    .slider.profile-slider .slider-container .slide > *{
        flex-basis: calc((100% - 4em) / 5);
    }
    .slider.profile-slider .slide > * img{
        padding: 1em;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 900px){
    .slider.profile-slider .slider-container .slide > *{
        flex-basis: calc((100% - 3em) / 4);
    }
}
@media screen and (max-width: 600px){
    .slider.profile-slider .slider-container .slide > *{
        flex-basis: calc((100% - 2em) / 3);
    }
    .slider.profile-slider .slide > * img{
        height: 30vw;
    }
}

.slider .slider-container .slide > * img.info{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: 2em;
    height: 2em;
    display: block;
    cursor: pointer;
}
.slider .slider-container .slide > * span{
    display: flex;
    border-radius: 0px 0px 0.5em 0.5em;
    background: var(--color-main-gradient);
    color: white;
    height: 3em;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    line-height: 1em;
}

.slider-3{
    width: 100%;
}
@media screen and (max-width: 988px) {
    .slider-3{
        /* padding: 0px 1em; */
        box-sizing: border-box;
    }
}
.slider-3 .slide{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}
.slider-3 .slide > *{
    flex-basis: calc(100% / 12 * 2 - 1em);
    /* display: none; */
    padding: 0.25em;
    box-sizing: border-box;
    border-radius: 1em;
    background: white;
    cursor: pointer;
}

.slider-3 .slide > * span{
    display: flex;
    border-radius: 0px 0px 0.75em 0.75em;
    background: var(--color-main-gradient);
    color: white;
    height: 3em;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    line-height: 1em;
}
@media screen and (max-width: 1300px) {
    .slider-3 .slide > * span{
        font-size: 0.7em;
    }
}
@media screen and (max-width: 988px) {
    .slider-3 .slide > * span{
        font-size: 1em;
    }
}
.slider-3 .slide > * img{
    width: 100%;
    box-sizing: border-box;
    padding: 2em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1em;
    padding-top: 1em;
    width: 100%;
    object-fit: contain;
}
@media screen and (max-width: 1100px){
    .slider-3 .slide > * img{
        height: auto;
    }
}
@media screen and (max-width: 1300px){
    /* .slider-3 .slide > *{
        flex-basis: calc(100% / 10 * 2 - 1.5em);
    } */
    /* .slider-3 .slide > * img{
        padding: 1em;
        box-sizing: border-box;
    } */
}
@media screen and (max-width: 900px) and (orientation: portrait){
    .slider-3 .slide > *{
        flex-basis: calc(100% / 3 - 1.5em);
    }
}
@media screen and (max-width: 600px){
    .slider-3 .slide > *{
        flex-basis: calc(100% / 6 * 2 - 1em);
    }
    /* .slider-3 .slide > * img{
        height: 30vw;
        padding: 6vw 1em;
    } */
}


.slider-controls{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    /* padding: 0px 2em; */
    /* margin: 2em 0px; */
}
.slider-controls > div{
    width: 100%;
    padding: 1em 0px;
    margin-top: -1em;
    margin-bottom: -1em;
    height: 0.75em;
    cursor: pointer;
}
.slider-controls > div::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2em;
    background-color: #C6C6C6;
}
.slider-controls > div.active::before{
    background-color: white;
}

@media screen and (min-width: 1300px) {
    .slider-controls{
        display: none;
    }
}
@media screen and (max-width: 988px) {
    .slider-controls.half-margin{
        margin-top: 25px!important;
        margin-bottom: 25px!important;
    }
}

@media screen and (max-width: 1100px) {
    .slider .slider-container .row{
        grid-template-columns: repeat(4, 1fr);
    }
    .slider .slider-container .slide > * img:not(.info){
        height: auto;
    }
    .slider .slider-container .slide > * span{
        font-size: 1em;
    }
    .slider .slider-container .slide > *{
        gap: 0.5em;
        /* padding-top: 2em; */
    }
    /* .slider .slider-controls > div{
        height: 1.5em;
    } */
    .slider-controls{
        gap: 1em;
    }
}

@media screen and (max-width: 600px) {
    .slider .slider-container .row,
    .slider.profile-slider .slider-container .row{
        grid-template-columns: repeat(2, 1fr);
    }
    /* .slider .slider-controls > div{
        width: 1em;
        height: 1em;
    } */
}

.popup{
    position: fixed;
    top:0px;
    left:0px;
    width: 100vw;
    height: 100vh;
    background-color: #000000af;
    backdrop-filter: blur(4px);
    display: none;
    z-index: 9999999;
}
.popup.popup-blur-bg{
    background-color: #000000af;
    backdrop-filter: blur(4px);
}
.popup.active{
    display: block;
}
.popup .pl{
    position: absolute;
    top:50%;
    left: 50%;
    max-height: 100vh;
    max-width: 100vw;
    border-radius: 1em;
    transform: translate(-50%, -50%);
    background-color: var(--color-red);
    width: 900px;
    box-sizing: border-box;
    overflow-y: auto;
}

.popup .pl::-webkit-scrollbar {
    width: 10px;
}
.popup .pl::-webkit-scrollbar-track {
    background-color: var(--color-blue);
}
.popup .pl::-webkit-scrollbar-thumb {
    background-color: var(--color-red);
}
.popup .pl > img.cross{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: 2em;
    height: 2em;
    cursor: pointer;
}
.popup .pl > div:nth-child(2){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border-radius: 1em;
    background-color: white;
    color: var(--color-red);
    padding: 1.5em 0px;
}

.popup .pl > div:nth-child(2) img{
    height: 15em;
    max-height: 20vh;
}
.popup .pl > div:nth-child(2) span{
    /* width: 100%; */
    text-align: right;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5em;
}

.popup .pl > div:nth-child(3){
    padding: 1em;
}
.popup .pl > div:nth-child(3) > span{
    text-transform: uppercase;
}
.popup .pl > div:nth-child(3) > h2:not(:first-child){
    margin-top: 1em;
    margin-bottom: 0.25em;
}

.popup .pl > div:nth-child(3) > .row > div{
    border-radius: 0.5em;
    border: 2px solid white;
    background-color: var(--color-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup .pl > div:nth-child(3) > .row > div span:first-child{
    text-transform: uppercase;
}
.popup .pl > div:nth-child(3) > .row > div span:last-child{
    opacity: 0.56;
}
.popup .pl .pl-button{
    display: block;
    margin-top: 2em;
    cursor: pointer;
    background-color: var(--color-blue);
    border-radius: 2em;
    font-size: 1.5em;
    font-weight: 700;
    padding: 0.5em;
    text-align: center;
    border: 4px solid white;
}

.peach-button{
    padding: 1em 2em;
    border-radius: 2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
    background-color: var(--color-peach);
    margin-top: 1em;
    margin-bottom: 1em;
    cursor: pointer;
    text-align: center;
}
input{
    margin-bottom: 1em;
}
input[type="text"]{
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 10px 20px;
    line-height: 0.75em;
    font-weight: 400;
    border-radius: 1em;
    background-color: #f4f4f4;
    outline: none;
    box-sizing: border-box;
    font-size: 15px;
    font-family: "Pragmatica Extended";
    margin-bottom: 10px;
}
.input-like{
    max-width: 100%;
    width: 700px;

    line-height: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: rgba(43, 43, 43, 0.75);
    font-size: 15px;
}
@media screen and (min-width: 988px) {
    .input-like{

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
input[type="text"].red{
    border: 1px solid var(--color-red);
}

.reg-page form{
    padding-top: 17px;
}
.reg-page > form > div:not(.submit-button){
    max-width: 100%;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height:42px;
    padding: 10px 20px;

    border-radius: 1em;
    background-color: #f4f4f4;
    outline: none;
    box-sizing: border-box;
    border: 1px solid var(--color-red);
}
.reg-page > form > div:not(:first-child){
    margin-top: 10px;
}
input.submit-button{
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 1em 1.5em;
    box-sizing: border-box;
    border-radius: 2em;
    font-size: 30px;

    display: block;
    border: 4px solid var(--color-main-gradient);

    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;

    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.86;
    color: white;
    outline: none;
    box-shadow: none;
    font-family: "Pragmatica Extended";

    transition: opacity 0.25s ease-in-out;
    cursor: pointer;
}
input.submit-button:hover{
    opacity: 1;
}

div.submit-button{
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--color-main-gradient);
    border-radius: 2em;
    position: relative;
    font-weight: bold;
    min-height: 75px;
    font-size: 2em;
}

div.submit-button::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 2em;
    background-color: white;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}
div.submit-button > input{
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-sizing: border-box;
    border-radius: 2em;
    font-size: 1em;

    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;

    border: none;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.99;
    outline: none;
    box-shadow: none;
    font-family: "Pragmatica Extended";
    margin: 0px;
    transition: opacity 0.25s ease-in-out;
    cursor: pointer;
}

.tabs-container{
    /* margin-top: -2em; */
}
.tabs-container > div{
    padding-top: calc(60px + 2em);
    margin-top: calc(-60px - 2em);
    /* margin-top: -2em;
    padding-top: 4em; */
    padding-bottom: 1px;
    /* padding-top: 1px; */
}
@media screen and (max-width: 988px) {
    div.submit-button{
        font-size: 1.5em;
        min-height: 50px;
        width: 260px;
    }
    .tabs-container > div{
        padding-top: calc(25px + 2em);
        margin-top: calc(-25px - 2em);
    }
}
.tabs-container > div.background-red-blue{
    min-height: calc(100vh - 320px);
}
.tabs-container > div:not(.active){
    display: none;
}
.tabs-control{
    /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 30px;
}
.lk-control{
    font-size: 10px;
    align-items: center;
}
@media screen and (min-width: 988px) {
    .lk-control{
        height: 40px;
        align-items: self-start;
    }
}
.lk-control .lk-control--logout,
.tabs-control > div{
    padding: 1em 1.5em;
    border-radius: 2em;
    min-height: 40px;
    box-sizing: border-box;
    color: #2B2B2B;
    border: 2px solid white;
    cursor: pointer;

    transition: all 0.25s linear;
    text-align: center;
}
.lk-control .lk-control--logout{
    font-size: 15px;
    border-radius: 2em;
    border: 2px solid white;
    padding: 1em 1.75em;
    transition: all 0.25s ease-in-out;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    line-height: unset;
    display: block;
    width: 126px;
    margin-right: -7.5px;
    margin-top: -13px;
}

@media screen and (max-width: 400px) {
    .tabs-control{
        width: 100%;
    }
    .tabs-control > div{
        padding-left: 0px;
        padding-right: 0px;
        line-height: 2em;
        min-height: 47px;
        border-radius: 3em;
        box-sizing: border-box;
    }
}
.tabs-control > div.active{
    color: white;
    background-color: white;
    cursor: default;
}
.lk-control .lk-control--logout,
.tabs-control > div > span{
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.tabs-control > div.active > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 988px){
    .tabs-control > div > span{
        font-weight: 800;
    }
}

@media screen and (max-width:1200px) {
    .tabs-control{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 13px;
        /* flex-basis: calc(50% - 2em);
        box-sizing: border-box; */
    }
    .lk-control .lk-control--logout{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
    }
}
@media screen and (max-width:898px){
    .lk-control .lk-control--logout{
        display: none;
    }
    .tabs-control{
        font-size: 2em;
    }
}
@media screen and (max-width:720px){
    .tabs-control{
        font-size: 1em;
    }
}


@media screen and (max-width: 750px) {
    .tabs-control{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 16px;
    }
    .tabs-control > div{
        height: 47px;
    }
}
.profile-info{
    display: grid;
    grid-template-columns: 33.334% calc(66.667% - 24px);
    grid-column-gap: 24px;
    grid-row-gap: 15px;
}

.profile-info > p, .profile-info > span{
    min-height: 58px;
    box-sizing: border-box;
    display: flex;
}
.profile-info > p{
    padding: 10px 20px;
    color: #2B2B2B;
    align-items: center;
    text-align: start;
    flex-direction: row;
    justify-content: start;
    margin: 0px;
    background-color: #F4F4F4;
    border-radius: 1em;
}
.profile-info > span{
    color: rgba(0, 0, 0, 0.3);
    text-align: right;
    align-items: center;
    justify-content: end;
}
@media screen and (max-width: 988px) {
    .profile-info > p{
        min-height: 40px;
    }
    .profile-info > span{
        min-height: unset;
    }
}

a.red-button,
a.gray-button,
a.black-button{
    padding: 1em 1.5em;
    border-radius: 2em;
    border: 2px solid white;
    cursor: pointer;
    display: block;
    width: fit-content;
}
a.gray-button{
    background-color: #FFFFFFB2;
    color: #2B2B2B;
    text-align: center;
}
a.red-button{
    background-color: var(--color-red);
    color: white;
    text-align: center;
}
a.black-button{
    background-color: #2B2B2B;
    color: white;
    text-align: center;
}

a.button-center{
    margin-left: auto;
    margin-right: auto;
}

.blue-button{
    display: block;
    margin-top: 2em;
    cursor: pointer;
    background-color: var(--color-blue);
    border-radius: 2em;
    font-size: 1.5em;
    font-weight: 700;
    padding: 0.5em;
    text-align: center;
    border: 4px solid white;
}
/* .types-filter{
    margin-bottom: 2em;
} */
.types-filter form{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: space-evenly; */
    gap: 30px;
}
.types-filter input[type="text"]{
    margin: 0px;
    background: white url(/public/img/search_magnifier.svg);
    background-position: center right 1em;
    background-repeat: no-repeat;
    background-size: auto 50%;
    color: #2B2B2B;
    border-radius: 2em;
    outline: none;
    /* width: fit-content; */
    padding: 0.25em 1.5em;
    padding-right: 5em;
    border: 4px solid white;
}
.types-filter input[type="text"]::placeholder{
    color: #2b2b2b86;
    font-size: 0.66em;
}
.types-filter--wrap-column > form > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}
@media screen and (max-width: 1100px) {
    .types-filter--wrap-column > form > div{
        gap: 10px;
    }
    .types-filter--wrap-column > form.types-filter-div-2-2 > div{
        gap: 16px;
    }
    .types-filter--wrap-column > form.types-filter-div-2-1{
        gap: 16px;
    }
    .types-filter form{
        gap: 10px;
    }
}

.types-filter-div-3-2 > div:nth-child(1) select,
.types-filter-div-3-2 > div:nth-child(1) .select,
.types-filter-div-3-2 > div:nth-child(1) input{
    width: 100%;
}
.types-filter-div-3-2 > div:nth-child(2) select,
.types-filter-div-3-2 > div:nth-child(2) .select,
.types-filter-div-3-2 > div:nth-child(2) input{
    width: 100%;
}
.types-filter-div-3-2 > div:nth-child(1){
    flex-basis: 60%;
}
.types-filter-div-3-2 > div:nth-child(1) > *{
    flex-basis: 33%;
}
.types-filter-div-3-2 > div:nth-child(2){
    flex-basis: 40%;
}
.types-filter-div-3-2 > div:nth-child(2) > *{
    flex-basis: 50%;
}

.types-filter-div-2-2 > div{
    flex-basis: 50%;
}
.types-filter-div-2-2 > div > *{
    flex-basis: 50%;
}
.types-filter-div-2-2 select,
.types-filter-div-2-2 .select{
    width: 100%!important;
}
.types-filter.types-filter--wrap-column form > div select, .types-filter.types-filter--wrap-column form > div .select, .types-filter.types-filter--wrap-column form > div input{
    min-height: 40px;
    font-weight: 800;
}
.types-filter.types-filter--wrap-column form > div select, .types-filter.types-filter--wrap-column form > div .select, .types-filter.types-filter--wrap-column form > div input, .types-filter.types-filter--wrap-column form > div input::placeholder{
    border-width: 1px;
    letter-spacing: 0.5px;
}
.types-filter.types-filter--wrap-column form > div input::placeholder{
    font-size: 10px;
    text-transform: uppercase;
}
@media screen and (max-width: 988px) {
    .types-filter form{
        flex-direction: column;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .types-filter form > select,
    .types-filter form > .select{
        width: 100%;
    }
    .types-filter.types-filter--wrap-column form{
        flex-direction: row;
        width: 100%;
    }
}
@media screen and (max-width: 1100px){
    .types-filter.types-filter--wrap-column form > div select, .types-filter.types-filter--wrap-column form > div .select, .types-filter.types-filter--wrap-column form > div input, .types-filter.types-filter--wrap-column form > div input::placeholder{

        font-weight: 800;
        font-family: "Pragmatica Extended";
        text-transform: uppercase;
    }
    .types-filter.types-filter--wrap-column form{
        align-items: start;
    }
    .types-filter.types-filter--wrap-column form > div{
        flex-direction: column;
        width: 100%;
    }
    .types-filter.types-filter--wrap-column.wrap-row form > div{
        flex-direction: row;
        width: 100%;
        flex-basis: 100%;
    }
    .types-filter-div-3-2 > div:nth-child(1),
    .types-filter-div-3-2 > div:nth-child(2){
        flex-basis: 50%;
    }
    .types-filter.types-filter--wrap-column form > div input::placeholder{
        font-size: 1em;
    }
    .types-filter.types-filter--wrap-column form > div > div{
        flex-basis: 100%;
        width: 100%;
    }
    .types-filter.types-filter--wrap-column form > div select, .types-filter.types-filter--wrap-column form > div .select, .types-filter.types-filter--wrap-column form > div input{
        width: 100%;
        font-size: 1.33em;
        line-height: 2em;
        border-radius: 3em;
        min-height: 47px;
        padding-top: 0px;
        padding-bottom: 0px;
        border-width: 2px;
    }
    .types-filter.types-filter--wrap-column form.types-filter-div-3-2 > div > *{
        min-height: 30px;
    }
    .types-filter.types-filter--wrap-column form > div input{

        padding: 1em 1em;
        padding-top: 0px;
        padding-bottom: 0px;
        border: 1px solid white;
    }
}
@media screen and (max-width: 1100px){
    .types-filter.types-filter--wrap-column form > div select, .types-filter.types-filter--wrap-column form > div .select, .types-filter.types-filter--wrap-column form > div input{
        width: 100%;
        font-size: 1em;
        letter-spacing: 0px;
    }
}
select, .select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background: var(--color-red) url(/public/img/select_arrow.svg);
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 1em;
    color: white;
    font-size: 1.25em;
    padding: 0.5em 1em;
    padding-right: 3em;
    border-radius: 2em;
    outline: none;
    width: 400px;
    max-width: 100%;
}
select.blue, .select.blue{
    appearance:none;
    background: var(--color-blue) url(/public/img/select_arrow.svg);
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 1em;

}
select.white-hollow, .select.white-hollow{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background: transparent url(/public/img/select_arrow_right.svg);
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 1em;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    padding: 1em 1em;
    padding-right: 3em;
    border-radius: 2em;
    border: 2px solid white;
    outline: none;
    font-size: 10px;
    width: 200px;
    min-width: fit-content;
    max-width: 100%;
    /* transition: all 0.25s ease-in-out; */

}
select.white-hollow:hover:focus,
.select.white-hollow:hover:focus{
    background: transparent url(/public/img/select_arrow_bottom.svg);
    background-repeat: no-repeat;
    background-position: center right 1.25em;
    background-size: 1em;
}
select.white-hollow option,
.select.white-hollow .option{
    color: #2B2B2B;
}
@media screen and (max-width: 898px) {
    select.white-hollow, .select.white-hollow{
        font-size: 1.33em;
    }
}

.lk-profile-info--w-save > span:first-child{
    background:url(/public/img/select_arrow_gradient_bottom.svg);
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 1em;
}
select.black-hollow{
    font-family: "Pragmatica Extended";
    background: none!important;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    color: #2B2B2B;
    font-size: 1em;
    padding: 0px;
    /* padding: 1em 1em;
    padding-right: 3em;
    border-radius: 2em; */
    /* border: 2px solid #2B2B2B; */
    border: none;
    outline: none;
    width: 200px;
    min-width: fit-content;
    max-width: 100%;
    font-size: 1em;
    width: 100%;
    cursor: pointer;

}
.lk-profile-info > div > * a.lk-profile-info--w-save{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.lk-profile-info--w-save > a{
    max-width: calc(100% - 4em);
    width: 100%;
    display: block;
    overflow: hidden;
}
.lk-profile-info > div > * > a span:last-child{
    background: var(--color-main-gradient);
    border-radius: 2em;
    padding: 2px;
}
.select-inline-save{
    padding: 0.5em 1em;
    display: block;
    cursor: pointer;
    outline: none;
    border: none;
    color: #2B2B2B;
    margin: 0px;
    font-family: "Pragmatica Extended";
    font-weight: 500;
    background-color: white;
    /* border: 2px solid #2B2B2B; */
    border-radius: 2em;
    transition: all 0.25s ease-in-out;
    /* text-transform: uppercase; */
}
.select-inline-save:hover{
    background-color: transparent;
    color: white;
}
@media screen and (max-width: 988px) {
    .select-inline-save{
        font-size: 15px;
    }
}

.lk-profile-info > div > * > span.lk-double-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}
.lk-double-info > a{
    display: block;
    padding: 0px 10px;
}
.lk-double-info > a:first-child{
    padding-left: 0px;
}
.lk-double-info > a:last-child{
    padding-right: 0px;
}
.lk-double-info > a:not(:last-child){
    border-right: 1px solid black;
}

/* @media screen and (min-width:988px){
    .lk-profile-info > div > div > .button-gradient-hollow{
        display: none;
    }
}
@media screen and (max-width:988px) {
    .select-inline-save{
        display: none;
    }
} */

select.px400,
.select.px400{
    max-width: 400px;
    width: 100%;
}

.reg-modal{
    position: absolute;
    top:50%;
    left: 50%;
    max-width: calc(100vw - 40px);
    border-radius: 2em;
    transform: translate(-50%, -50%);
    background-color: transparent;
    width: 900px;
    box-sizing: border-box;
    overflow-y: hidden;
    overflow-x: hidden;
    text-align: center;
    max-height: 90vh;
}

.reg-modal::before{
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    right: 0px;
    bottom: -1px;
    background: white;
    z-index: -1;
}
.reg-modal > div:not(.popup-footer):not(.popup-types-header){
    overflow-y: auto;
    max-height: calc(90vh - 125px - 135px - 20px);
}
@media screen and (max-width: 988px) {
    .reg-modal{
        border-radius: 10px;
    }
}
.reg-modal > form{
    padding: 1em;
}
.reg-modal .small-info{
    text-align: left;
}
.reg-modal > img.cross{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: 2em;
    height: 2em;
    cursor: pointer;
}

.reg-modal input[type="text"]{
    height: 75px;
}
.reg-modal input.submit{

    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 1em 1.5em;
    box-sizing: border-box;
    border-radius: 2em;
    background-color: var(--color-blue);
    opacity: 0.86;
    color: white;
    outline: none;
    box-shadow: none;
    border: none;
    font-family: "Pragmatica Extended";
    border: 2px solid white;

    transition: opacity 0.25s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

div.submit{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: var(--color-main-gradient);
    border-radius: 2em;
    position: relative;
}
div.submit::before{
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 2em;
    background-color: white;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}
div.submit > input{
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 1em 1.5em;
    box-sizing: border-box;
    border-radius: 2em;

    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;

    border: none;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.99;
    outline: none;
    box-shadow: none;
    font-family: "Pragmatica Extended";

    transition: opacity 0.25s ease-in-out;
    cursor: pointer;
}

.multiple-choose{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}
.multiple-choose input{
    display: none;
}
.multiple-choose label{
    display: block;
    position: relative;
    background: var(--color-main-gradient);
    color:rgba(0, 0, 0, 0.6);
    border-radius: 2em;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.multiple-choose label > span{
    z-index: 2;
    position: relative;
    padding: 0.5em 1em;
    display: block;
    text-align: center;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    font-weight: bold;
}

.multiple-choose label::before{

    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 2em;
    background-color: white;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}
.multiple-choose input[type="checkbox"]:checked+label::before{
    background: var(--color-main-gradient);
}
.multiple-choose input[type="checkbox"]:checked+label span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 988px) {
    .multiple-choose{
        font-size: 0.75em;
    }
}
.link-copy{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 700px;
    max-width: calc(100% - 1em);
    gap: 1em;
    background: var(--color-main-gradient);
    color:#2B2B2B7f;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
    position: relative;
    border-radius: 10em;
}
.link-copy::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 10em;
    background: white;
}
.link-copy p{
    margin: 0px;
    position: relative;
    z-index: 2;
    border-radius: 10em;
    text-transform: uppercase;
    font-weight: bold;
}
.link-copy p:first-child{
    padding: 0.5em 1em;
    width: 200px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 20px;
}
.link-copy p:last-child{
    padding: 0.5em 1em;
    background: var(--color-main-gradient);
    color: white;
    cursor: pointer;
    border-radius: 10em;
    font-size: 30px;
}
@media screen and (max-width: 988px) {
    .link-copy p{
        font-size: 12px!important;
        padding: 1.5em!important;
    }
}
footer{
    background-color: black;
    padding: 3em 1em;
    margin-top: -1px;
}
footer .row{
    flex-wrap: nowrap;
    align-items: center;
    gap: 1em;
}
.row.space-between{
    justify-content: space-between;
}
.row.space-evenly{
    justify-content: space-evenly;
}
.row.nowrap{
    flex-wrap: nowrap;
}
footer a.enter{
    display: none;
    width: fit-content;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 4em;
    box-sizing: border-box;
    border-radius: 3em;
    height: 75px;
    text-transform: uppercase;
    border: 2px solid white;
    transition: all 0.25s ease-in-out;
}
@media screen and (max-width: 988px) {
    footer a.enter{
        height: 50px;
        font-weight: bold;

    }
}
footer > .row > div:nth-child(2){
    width: 100%;
}
footer > .row{
    /* max-width: 90vw; */
    margin-left: auto;
    margin-right: auto;
}
footer .footer--links{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
    row-gap: 1em;
}
footer .footer--links > a{
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    -webkit-text-fill-color: white;
    font-size: 1.33em;
}
footer .footer--links > a:hover{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.footer--links > a:last-child{
    width: 100%;
    text-align: center;
}
@media screen and (max-width: 1100px) {
    footer > .row{
        max-width: unset;
    }
}
@media screen and (max-width: 898px) {
    footer a.enter{
        display: flex;
    }
}

footer .social img{
    height: 4.25em;
}

@media screen and (max-width: 898px) {
    footer > div.row{
        flex-direction: column;
        align-items: center;
        gap: 2em;
    }
    footer > .row > div:nth-child(2){
        padding-top: 1em;
        padding-bottom: 1em;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;
        row-gap: 2em;
        font-weight: bold;
    }
    /* footer > .row > div:nth-child(2) > a:not(:first-child){
        width: calc(50% - 1em);
    }
    footer > .row > div:nth-child(2) > a:first-child{
        width: 100%
    } */
    footer{
        font-size: 1.5em;
    }
}
@media screen and (max-width:988px) {
    footer > .row > div:nth-child(2){
        font-size: 1.15em;
    }
}

.alert-danger{
    width: 100%;
    box-sizing: border-box;
    max-width: 955px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
    padding: 2em;
    background-color: white;
    color: var(--color-red);
    text-align: center;
    border: 4px solid var(--color-red);
}

.error-cont{
    position: relative;
    min-height: calc(100vh - 8em);
    text-align: left;
    margin: 2em 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.error-cont > h1{
    font-size: 20em;
    line-height: 0.75em;
    margin: 0px;
}
.error-cont > h2{
    font-size: 4em;
    margin: 0px;
    margin-top: 1em;
    max-width: 50%;
}
.error-cont > img{
    position: absolute;
    width: 50%;
    top: 2em;
    max-height: 100%;
    right: 0px;
}
@media screen and (max-width: 1700px) {
    .error-cont > h1{
        font-size: 15em;
    }
}
@media screen and (max-width: 1280px) {
    .error-cont > h1{
        font-size: 12.5em;
    }
}
@media screen and (max-width: 900px) {
    .error-cont > h1{
        font-size: 7.5em;
    }
    .error-cont > h2{
        font-size: 3em;
    }
}
@media screen and (max-width: 500px) {
    .error-cont > h2{
        max-width: unset;
    }
}
@media screen and (max-width: 400px) {
    .error-cont > h1{
        margin-top: 1em;
    }
    .error-cont > h2{
        font-size: 2em;
    }
}

.blind-modal{
    display: none;
    position: fixed;
    top: 6em;
    left: 0px;
    max-height: 90vh;
    width: 100%;
    max-width: 100vw;
    background-color: white;
    color: #2B2B2B;
    box-sizing: border-box;
    padding: 1em;
    box-sizing: border-box;
    overflow-y: auto;

    flex-direction: row;
    gap: 16px;

    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;

    z-index: 999999;

}
.blind-modal.active{
    display: flex;
}
.blind-modal > div > div{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
}
.blind-modal > div > div > label{
    cursor: pointer;
    width: 100%;
}
.blind-modal > div > div > label > input{
    display: none;
}
.blind-modal > div > div > label > p{
    padding: 8px;
    display: block;
    height: 100%;
    border-radius: 16px;
    border: 2px solid #2B2B2B;
    margin: 0px;
    font-weight: bold;
    text-align: center;
}
.blind-modal > div > div > label > input:checked ~ p{
    background-color: #2B2B2B;
    color: white;
}

.blind-modal select{
    border-radius: 0.5em;
    background-color: #2B2B2B;
    color: white;

}

.blind-modal > a{
    display: none;
}

@media screen and (max-width: 1000px) {

    .blind-modal{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 1em;
        width: 900px;
    }
    .blind-modal > a{
        display: block;
    }

}

.inline-img{
    height: 1.5em;
    width: 1.5em;
    display: inline-block;
    /* margin-left: 0.5em; */
    transform: translateY(0.25em);
}

.inline-img > img{
    height: 100%;
    width: auto;
}





.calendar-future{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(2, calc(300px - 1em)); */
    grid-auto-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    gap: 30px;
    font-weight: bold;
}
.calendar-future > *{
    flex-basis: calc(33.333333% - 0.66666em);
    box-sizing: border-box;
    background: var(--color-main-gradient);
    color: white;
    display: flex;
    justify-content: space-between;
    border-radius: 1em;
    padding: 1.5em 1em;
    flex-direction: column;
    position: relative;
}
@media screen and (min-width: 987px) {
    .calendar-future > * > .calendar-future--team-info a:first-child{
        margin-bottom: 0.5em;
    }
    .calendar-future > *{
        gap: 3em;
    }
}

.calendar-future > * .calendar-future--date{
    display: block;
    font-size: 1.33em;
    text-transform: uppercase;
    /* min-height: 2.5em; */
    margin-bottom: 0.5em;
    line-height: 1em;

}
.calendar-future > *  .calendar-future--tags{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
}

.calendar-future > *  .calendar-future--tags > a{
    background: white;
    border-radius: 2em;
    font-size: 0.6em;
    padding: 0.5em 1em;
    text-transform: uppercase;

}
.calendar-future > *  .calendar-future--tags > a > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.calendar-future > * > .calendar-future--team-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

.calendar-future > * > .calendar-future--team-info > img{
    filter:grayscale(10) brightness(10);
    height: 70px;
    width: 70px;
    object-fit: contain;

}
@media screen and (max-width: 988px) {
    .calendar-future > * > .calendar-future--team-info > img{
        height: 39px;
        width: 39px;

    }
}
.calendar-future > * > .calendar-future--team-info a:first-child{
    font-size: 1.33em;
    display: flex;
    text-transform: uppercase;
    line-height: 1em;
    min-height: 2em;
    flex-direction: row;
    /* align-items: end; */
}
.calendar-future > * > .calendar-future--team-info a:last-child{
    background: white;
    border-radius: 2em;
    font-size: 0.6em;
    padding: 0.5em 1em;
    text-transform: uppercase;
}
.calendar-future > * > .calendar-future--team-info a:last-child > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;

}


.calendar-future > * > *{
    z-index: 2;
}
.calendar-future > *::before{
    content: "";
    position: absolute;
    top:2px;
    left:2px;
    opacity: 0;
    border-radius: 0.75em;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: white;

}

.calendar-future > *:hover::before{
    opacity: 1;
}
.calendar-future > *:hover  .calendar-future--date{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

.calendar-future > *:hover  .calendar-future--tags > a{
    background: var(--color-main-gradient);
}
.calendar-future > *:hover  .calendar-future--tags > a > span{
    color: white;
    -webkit-text-fill-color: unset;
}
.calendar-future > *:hover > .calendar-future--team-info > img{
    filter: brightness(1);
}
.calendar-future > *:hover > .calendar-future--team-info a:first-child > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    /* polygon(50% 0, 100% 50%, 50% 100%, 0 50%) */

    -webkit-text-fill-color: transparent;
}
.calendar-future > *:hover > .calendar-future--team-info a:last-child{
    background: var(--color-main-gradient);
}
.calendar-future > *:hover > .calendar-future--team-info a:last-child > span{
    color:white;
    -webkit-text-fill-color: unset;

}

@media screen and (max-width: 1700px) {
    .calendar-future > *{
        font-size: 0.9em;
    }
}
@media screen and (max-width: 1500px) {
    .calendar-future > *{
        font-size: 0.75em;
    }
}
@media screen and (max-width: 1300px) {
    .calendar-future > *{
        font-size: 1em;
        /* flex-basis: calc(50% - 1em); */
    }
}
.calendar-future > * .calendar-future--tags.nowrap{
    flex-wrap: nowrap;
}
.calendar-future > * .calendar-future--tags.nowrap > a{
    white-space: nowrap;
}
span.nowrap{
    white-space: nowrap;
}
@media screen and (max-width: 1150px) {
    .calendar-future{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .calendar-future > * > *:first-child{
        flex-basis: 40%;
    }
    .calendar-future > * > *:last-child{
        flex-basis: calc(59% - 10px);
        /* max-width: calc(40%); */
    }
    .calendar-future > * > .calendar-future--team-info a:first-child{
        width: 100%;
    }
    /* .calendar-future > * > .calendar-future--team-info a:first-child > span{
        display: block;
        width: 1em;
        position: absolute;
        white-space: nowrap;
        overflow: visible;
    } */
    .calendar-future > * > *:first-child{
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: end;
        gap: 1em;
    }
    .calendar-future > * .calendar-future--tags{
        justify-content: end;
        flex-wrap: nowrap;
    }
    .calendar-future > * .calendar-future--tags > a{
        white-space: nowrap;
    }
    .calendar-future > * > .calendar-future--team-info a:last-child,
    .calendar-future > * .calendar-future--tags > a{
        font-size: 0.85em;
        width: min-content;
    }
    .calendar-future > * .calendar-future--date{
        text-align: end;
        margin-bottom: 0px;
    }
    .calendar-future > *{
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
    }
    .calendar-future--team-info > div:last-child{
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: end;
        gap: 1em;
        flex-basis: calc(100% - 40px);
    }
}

@media screen and (max-width: 380px) {
    /* .calendar-future > * > *:last-child{
        flex-basis: calc(50vw - 2em);
    }
    .calendar-future--team-info > div:nth-child(2){
        flex-basis: calc(50vw - 2em - 40px);
        overflow: hidden;
        position: relative;
    }
    .calendar-future--team-info > div:nth-child(2) a:first-child{
        max-width: calc(50vw - 40px - 4em);
        display: block;
        overflow: visible;
    } */
}

@media screen and (max-width: 400px) {
    .calendar-future > div{
        font-size: 0.9em;
    }
}
@media screen and (max-width: 380px) {
    .calendar-future > div{
        font-size: 0.8em;
    }
}
@media screen and (max-width: 350px) {
    .calendar-future > div{
        font-size: 0.7em;
    }
}

.checkbox{
    border-radius: 3em;
    font-size: 2em;
    cursor: pointer;
    display: block;
    width: min-content;
    border: 2px solid white;
    background: var(--color-main-gradient);
    overflow: hidden;
}
.checkbox > label{
    position: relative;
    display: block;
    width:fit-content;
    padding: 0.5em 1em;
    cursor: pointer;
}
.checkbox > input{
    display: none;
}
.checkbox > label::before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    height: calc(2.5em);
    width: calc(2.5em);
    border-radius: 100%;
    border: 2px solid white;
    background-color: white;
    transition: all 0.25s ease-in-out;
}

.checkbox > label > span{
    transition: opacity 0.25s ease-in-out;
    text-transform: uppercase;
    font-weight: bold;
}
.checkbox > label > span:first-child{
    padding-right: 3em;
    line-height: 1.5em;
}
.checkbox > label > span:last-child{
    position: absolute;
    top:50%;
    right: 1em;
    transform: translateY(-50%);
}
.checkbox > input:not(:checked) ~ label > span:first-child{
    opacity: 0;
}
.checkbox > input:not(:checked) ~ label > span:last-child{
    opacity: 1;
}

.checkbox > input:checked ~ label > span:first-child{
    opacity: 1;
}
.checkbox > input:checked ~ label > span:last-child{
    opacity: 0;
}
.checkbox > input:checked ~ label::before{
    left:calc(100% - 2.5em + 2px);
    /* right: calc(-1em + 1px); */
}
@media screen and (max-width: 988px) {
    .checkbox{
        font-size: 1.5em;
    }
    .checkbox > label{
        padding: 1em;
        width: 231px;
        box-sizing: border-box;
    }
    .checkbox > label::before{
        height: calc(3.5em);
        width: calc(3.5em);
    }.checkbox > input:checked ~ label::before{
         left: calc(100% - 4em + 3px);
     }
}

.button-gradient-hollow.small,
.button-white-hollow.small{
    font-size: 10px;
}
@media screen and (max-width: 988px) {
    .button-gradient-hollow.small,
    .button-white-hollow.small{
        font-size: 7px;
    }
}
.button-gradient-hollow.big-padding,
.button-white-hollow.big-padding{
    padding: 1em 2em;
}



.button-white-hollow, .button-gradient-hollow, .button-disabled-hollow{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 2em;
    font-size: 2em;
    padding: 0.5em 0.5em;
    font-weight: bold;
    /* cursor: pointer; */
    text-transform: uppercase;
    min-height: 75px;
    box-sizing: border-box;
    outline: none;
    color: white;
    border: none;
}
.button-disabled-hollow{
    color: #F4F4F4;
    background: #F4F4F4;
}

.button-gradient-hollow{
    background: var(--color-main-gradient);
}
.button-gradient-hollow::before,
.button-disabled-hollow::before{
    content: "";
    position: absolute;
    top:2px;
    left:2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 2em;
    background: white;
}
@media screen and (max-width:988px) {
    .button-gradient-hollow::before,
    .button-disabled-hollow::before{
        top:2px;
        left:2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
    }
    .expanding-table--header--details-button .button-gradient-hollow::before,
    .expanding-table--header--status .button-gradient-hollow::before,
    .button-disabled-hollow::before{
        top:1px;
        left:1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
}
.button-gradient-hollow > span{
    position: relative;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    display: block;
    /* padding: 1px; */
    -webkit-text-fill-color: transparent;
    z-index: 2;
    display: block;
}
.button-disabled-hollow > span{
    z-index: 2;
    display: block;
    position: relative;
}

.reg-modal .button-gradient-hollow > span{
    clip-path: inset(1px);
    padding: 1px;
}
.expanding-table--header--details-button .button-gradient-hollow > span,
.expanding-table--header--status .button-gradient-hollow > span{
    clip-path: inset(0px);
}
.expanding-table--header--status .button-gradient-hollow:not(.active):hover::before{
    content: "";
}
.expanding-table--header--status .button-gradient-hollow:not(.active):hover > span{

    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.button-gradient-hollow.active::before,
.button-gradient-hollow:hover::before{
    content: none;
}
.button-gradient-hollow.completed:hover::before{
    content: "";
}
.button-gradient-hollow.active > span,
.button-gradient-hollow:hover > span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}


.button-white-hollow{

    color: white;
    border: 2px solid white;
}

.button-white-hollow:hover{
    background: white;
}
.button-white-hollow:hover > span{

    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    display: block;
    /* padding: 1px; */
    -webkit-text-fill-color: transparent;
}

.button-white-hollow.wfull,
.button-gradient-hollow.wfull{
    width: 100%;
}
.button-white-hollow.w600,
.button-gradient-hollow.w600{
    width: 600px;
    max-width: 100%;
    text-align: center;
}
@media screen and (max-width: 988px) {
    .button-white-hollow.w600,
    .button-gradient-hollow.w600{
        width: 260px;
        max-width: 100%;
        text-align: center;
    }
}
@media screen and (min-width:988px) {
    .button-white-hollow.w700,
    .button-gradient-hollow.w700{
        width: 700px;
        max-width: 100%;
        text-align: center;
    }
}
.button-white-hollow.w400,
.button-gradient-hollow.w400{
    width: 400px;
    max-width: 100%;
    text-align: center;
}
.button-white-hollow.w300,
.button-gradient-hollow.w300{
    width: 300px;
    max-width: 100%;
    text-align: center;
}
@media screen and (max-width:500px){
    .button-white-hollow.w400,
    .button-gradient-hollow.w400{
        width: 60%;
        max-width: 100%;
        text-align: center;
    }
    .button-white-hollow.w300,
    .button-gradient-hollow.w300{
        width: 260px;
        max-width: 100%;
        text-align: center;
    }
}
@media screen and (max-width:988px) {
    .button-white-hollow,
    .button-gradient-hollow,
    .button-disabled-hollow{
        padding: 1em 1em;
        border-radius: 3em;
        font-size: 1.5em;
        min-height: 50px;
        /* margin-top: 2em;
        margin-bottom: 2em; */
    }
    .button-gradient-hollow::before,
    .button-disabled-hollow::before{
        border-radius: 3em;
    }
}
@media screen and (max-width:988px){
    .button-white-hollow.w700,
    .button-gradient-hollow.w700{
        width: 260px;
        max-width: 95%;
        text-align: center;
    }
}
.table-scroller{
    overflow: visible;
    max-width: 100%;
}
.seven-grid .table-scroller{
    margin-top: -1px;
}
.rating-table{
    padding: 1px;
}
.rating-table th{
    color: #2B2B2B;
    text-transform: uppercase;
}
.rating-table th > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
@media screen and (max-width:988px) {
    .tablet-4-fullwidth th:nth-child(1),
    .tablet-4-fullwidth td:nth-child(1){
        min-width: calc(5vw - 2px - 1em);
    }
    .tablet-4-fullwidth th:nth-child(2),
    .tablet-4-fullwidth td:nth-child(2){
        min-width: calc(35vw - 2px);
    }
    .tablet-4-fullwidth th:nth-child(3),
    .tablet-4-fullwidth td:nth-child(3){
        min-width: calc(29vw - 2px);
    }
    .tablet-4-fullwidth th:nth-child(4),
    .tablet-4-fullwidth td:nth-child(4){
        min-width: calc(25vw - 4px - 3em);
    }
}
@media screen and (max-width:700px) {
    .tablet-4-fullwidth th:nth-child(1),
    .tablet-4-fullwidth td:nth-child(1){
        min-width: calc(10vw - 2px - 1em);
        box-sizing: border-box;
    }
    .tablet-4-fullwidth th:nth-child(2),
    .tablet-4-fullwidth td:nth-child(2){
        min-width: calc(40vw - 2px);
        box-sizing: border-box;
    }
    .tablet-4-fullwidth th:nth-child(3),
    .tablet-4-fullwidth td:nth-child(3){
        min-width: calc(25vw - 2px);
        box-sizing: border-box;
    }
    .tablet-4-fullwidth th:nth-child(4),
    .tablet-4-fullwidth td:nth-child(4){
        min-width: calc(25vw - 4px - 3em);
        box-sizing: border-box;
    }
}
.rating-table .small-th{
    font-size: 0.75em;
}
.rating-table .small-th.help-img{
    position: relative;
    padding-right: 3em;

}
.rating-table .small-th.help-img img{
    height: 2em;
    cursor: pointer;
    filter:grayscale(1);
}
.rating-table .small-th.help-img img:hover{
    filter:grayscale(0);
}
.rating-table .small-th.help-img a{
    display: block;
    position: absolute;
    right: 0.25em;
    height: 2em;
    width: auto;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 988px) {
    .rating-table .small-th.help-img > a{
        display: none;
    }
    .rating-table .small-th.help-img{
        padding-right: 0.5em;
        font-size: 1em;
    }
}
.rating-table td,
.rating-table th{
    border-radius: 5px;
}
.rating-table td span{
    display: block;
    color: #2B2B2B;
    font-weight: 500;
}
.rating-table td:first-child{
    text-align: center;
}
.rating-table td, .rating-table th{
    font-weight: bold;

    border: 1px solid #F4F4F4;
    padding: 0.5em 1em;
    background-color: white;
    height: 100%;
    min-height: 30px;
    overflow: visible;
}

.rating-table .rating-table--team-name img{
    height: 2.5em;
}

.rating-table tr:first-child th:first-child{
    border-top-left-radius: calc(1em - 4px);
}
.rating-table tr:first-child th:last-child{
    border-top-right-radius: calc(1em - 4px);
}
.rating-table tr:last-child td:first-child{
    border-bottom-left-radius: calc(1em - 4px);
}
.rating-table tr:last-child td:last-child{
    border-bottom-right-radius: calc(1em - 4px);
}
.rating-table .rating-table--first-place,
.rating-table .rating-table--second-place,
.rating-table .rating-table--third-place{
    background-image: url(/public/img/season-result-img-1.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 2.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rating-table.rating-page-rt{
    font-size: 1.25em;
    width: 100%;
}
.rating-table.rating-page-rt tr > *:nth-child(2),
.rating-table.rating-page-rt tr > *:nth-child(3){
    width: 20%;
}

.rating-table.main-page-rt{
    width: 100%;
}
.rating-table.main-page-rt tr > *:nth-child(2),
.rating-table.main-page-rt tr > *:nth-child(3){
    width: 20%;
}
@media screen and (max-width: 988px){
    .rating-table.main-page-rt tr > *:nth-child(4),
    .rating-table.main-page-rt tr > *:nth-child(5),
    .rating-table.main-page-rt tr > *:nth-child(6),
    .rating-table.main-page-rt tr > *:nth-child(7){
        display: none;
    }

    .rating-table.main-page-rt tr > *:nth-child(1){
        width: 10%;
    }
    .rating-table.main-page-rt tr > *:nth-child(8){
        width: 15%;
    }
    .rating-table.main-page-rt tr > *:nth-child(2),
    .rating-table.main-page-rt tr > *:nth-child(3){
        width: 35%;
    }
}

.tournament-page-rt{
    font-size: 1.25em;
    width: 100%;
    border-radius: 0px 0px 1em 1em;
}
.rating-table.tournament-page-rt tr > *:nth-child(2),
.rating-table.tournament-page-rt tr > *:nth-child(3){
    width: 25%;
}
.rating-table.tournament-page-rt tr:first-child th:first-child{
    border-top-left-radius: 0px;
}
.rating-table.tournament-page-rt tr:first-child th:last-child{
    border-top-right-radius: 0px;
}

.roadmap-img{
    width: 100%;
    height: auto;
}
.roadmap-img:nth-child(3){
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (orientation: landscape) {
    .roadmap-img:nth-child(2){
        display: block;
    }
    .roadmap-img:nth-child(3){
        display: none;
    }
}
@media screen and (orientation: portrait) {
    .roadmap-img:nth-child(2){
        display: none;
    }
    .roadmap-img:nth-child(3){
        display: block;
    }

}

.banner-slider{
    width: 100%;
}
.slider-2,
.banner-slider{
    position: relative;
    padding: 0px 5em;
}
.slider-2 > img,
.banner-slider > img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.75;
    width: 5em;
    height: auto;
    cursor: pointer;
    transition: opacity 0.25s ease-in-out;
}
.slider-2 > img:not(.disabled):hover,
.banner-slider > img:not(.disabled):hover{
    opacity: 1;
}
.slider-2 > img:first-child,
.banner-slider > img:first-child{
    transform: translateY(-50%) rotate(180deg);
    left: 0px;
}
.slider-2 > img:last-child,
.banner-slider > img:last-child{
    right: 0px;
}
@media screen and (min-width:988px) {
    .slider-2 .slider-container,
    .banner-slider .slider-container{
        padding: 0px 2em;
    }
}
/*
.slider-2 > div.slider-2--content{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
    padding: 0px 2em;
}

.slider-2 > div.slider-2--content > *{
    flex-basis: calc((100% / 6) - 2.25em);
    padding: 2px;
    border-radius: 0.5em;
    background: white;
}
.slider-2 > div.slider-2--content > * > img{
    width: 100%;
    max-width: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    object-fit: contain;
}
.slider-2 > div.slider-2--content > * > span{
    display: flex;
    border-radius: 0px 0px 0.5em 0.5em;
    background: var(--color-main-gradient);
    color: white;
    height: 3em;
    text-align: center;
    align-items: center;
    justify-content: center;
}

} */
#banner-slider{
    width: 100%;
}
.slider-2.banner-slider .slider-container .slide > *{
    flex-basis: 100%;
    background: unset;
}
.slider-2 .slider-container .slide > *{
    flex-basis: calc((100% - 5em) / 6);
    box-sizing: border-box;
}
.banner-slider .slider-container .slide > *{
    flex-basis: 100%;
    box-sizing: border-box;
}
@media screen and (max-width: 1300px) and (orientation:landscape){
    .slider-2 .slider-container{
        padding: 0px 2em;
    }
}
@media screen and (max-width: 1300px) and (orientation:portrait) {
    .slider-2{
        padding: 0px;
    }
    .slider-2 > img{
        display: none
    }
    .slider-2 > div.slider-2--content{
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    .slider-2 > div.slider-2--content > * > img{
        padding: 10px;
        box-sizing: border-box;
    }
    .slider-2 > div.slider-2--content > *{
        flex-basis: calc((100% / 3) - 2em);
    }
    .slider-2 .slider-container .slide > *{
        flex-basis: calc((100% - 2em) / 3);
        box-sizing: border-box;
    }
}
@media screen and (max-width: 500px){
    .slider-2 > div.slider-2--content > * > img{
        height: 100px;
    }
}

@media screen and (max-width: 600px) {
    .slider-2 .slider-container .row,
    .slider-2 .slider-container .row{
        grid-template-columns: repeat(2, 1fr);
    }
    /* .slider .slider-controls > div{
        width: 1em;
        height: 1em;
    } */
}
.slider-2 .slider-container .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/* @media screen and (max-width: 1300px){
    .slider-2 .slider-container .slide > *{
        flex-basis: calc((100% - 4em) / 5);
    }
    .slider-2 .slide > * img{
        padding: 1em;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 900px){
    .slider-2 .slider-container .slide > *{
        flex-basis: calc((100% - 3em) / 4);
    }
}
@media screen and (max-width: 600px){
    .slider-2 .slider-container .slide > *{
        flex-basis: calc((100% - 2em) / 3);
    }
    .slider-2 .slide > * img{
        height: 30vw;
    }
} */


.my-team--team-name{
    display: flex;
    flex-direction: row;
    gap: 1em;
    /* align-items: center; */
}
.my-team--team-name h2{
    text-transform: uppercase;
    display: flex;
    gap: 0.5em;
    flex-direction: column;
    margin: 0px;
}
.my-team--team-name h2 > span:first-child{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.my-team--team-name h2 >span:last-child{
    font-size: 0.75em;
    color: rgba(43, 43, 43, 0.5);
    font-weight: 400;
}

.my-team--team-name img{
    height: 6em;
}

.my-team--season-result{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 43px;
}
.my-team--season-result > div{
    flex-basis: calc(33%);
    border: 2px solid #F4F4F4;
    background-color: #F4F4F4;
    border-radius: 2em;
    box-sizing: border-box;
}
.my-team--season-result > div > div{
    position: relative;
}
.my-team--season-result > div > div > img{
    width: 60%;
    margin-top: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
.my-team--season-result > div > div > span{
    color: #2B2B2B;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: bold;
}
.my-team--season-result > div > span{
    margin-top: 1em;
    font-size: 20px;
    display: flex;
    border-radius: 0px 0px 1.33em 1.33em;
    background: var(--color-main-gradient);
    text-transform: uppercase;
    color: white;
    height: 3em;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


.my-team--edit > img{
    cursor: pointer;
    height: 4em;
    width: 2em;
    object-fit: contain;
}
.my-team--moderation{
    padding: 0.5em 1em;
    border-radius: 1em;
    margin-top: 1em;
    height: fit-content;
    background-color: #F4F4F4;
    color: #2b2b2b7a;
}

.my-schedule .rating-table{
    width: 100%;
    border-radius: 0px 0px 1em 1em;
}

/* .my-schedule .rating-table tr:first-child th:first-child{
    border-top-left-radius: 0px;
}
.my-schedule .rating-table tr:first-child th:last-child{
    border-top-right-radius: 0px;
} */


.tags{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
}

.tags > a{
    background: var(--color-main-gradient);
    border-radius: 2em;
    font-size: 0.6em;
    padding: 0.5em 1em;
    text-transform: uppercase;
    position: relative;

}
.tags > a.hoverable-tooltip{
    cursor: pointer;
}
.tags > a.hoverable-tooltip::before{
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 2em;
    background: white;
}
.tags > a.hoverable-tooltip > span{
    position: relative;
    z-index: 2;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 988px) {
    .tags > a.hoverable-tooltip:hover > span{
        background: white;
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
    .tags > a.hoverable-tooltip:hover::before{
        background: var(--color-main-gradient);
    }
}
@media screen and (max-width: 988px) {
    .tags > a.hoverable-tooltip.active > span{
        background: white;
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
    .tags > a.hoverable-tooltip.active::before{
        background: var(--color-main-gradient);
    }
}
@media screen and (max-width: 988px) {
    .tags > a{
        font-size: 1em;
    }
}
.tags > a > span{
    color: white;
}

.controls-buttons-gradient{
    /* margin-top: 1.5em;
    margin-bottom: 1.5em; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
}
.controls-buttons-gradient > a.arrow{
    height: min(6em, 6vh);
    cursor: pointer;
    opacity: 0.5;
    transition: 0.25s ease-in-out;
}
.controls-buttons-gradient > a.arrow.disabled{
    opacity: 0.25!important;
}
.controls-buttons-gradient > a.arrow:hover{
    opacity: 1;
}
.controls-buttons-gradient > a.arrow > img{
    height: min(6em, 6vh);
}
.controls-buttons-gradient > a.arrow:first-child > img{
    transform: rotate(180deg);
}
.controls-buttons-gradient > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 34px;
}
.controls-buttons-gradient > div > a{
    height: min(6em, 6vh);
    width: min(6em, 6vh);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-main-gradient);
    border-radius: 100%;
    cursor: pointer;
}
.controls-buttons-gradient > div > a::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background: white;
    border-radius: 100%;
}
@media screen and (max-width: 988px) {
    .controls-buttons-gradient > div > a::before{
        top: 1px;
        left: 1px;
        bottom: 1px;
        right: 1px;
    }
}
.controls-buttons-gradient > div > a > span{
    position: relative;
    z-index: 2;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.25em;
}

.controls-buttons-gradient > div > a.active::before{
    display: none;
}
.controls-buttons-gradient > div > a.active > span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}


.controls-buttons-white{
    /* margin-top: 1.5em;
    margin-bottom: 1.5em; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
}
.controls-buttons-white > a.arrow{
    height: min(6em, 6vh);
    cursor: pointer;
    opacity: 0.8;
    transition: 0.25s ease-in-out;
}
.controls-buttons-white > a.arrow.disabled{
    opacity: 0.25!important;
}
.controls-buttons-white > a.arrow:hover{
    opacity: 1;
}
.controls-buttons-white > a.arrow > img{
    height: min(6em, 6vh);
}
.controls-buttons-white > a.arrow:first-child > img{
    transform: rotate(180deg);
}
.controls-buttons-white > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 34px;
}
.controls-buttons-white > div > a{
    height: min(6em, 6vh);
    width: min(6em, 6vh);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid white;
    box-sizing: border-box;
    border-radius: 100%;
    cursor: pointer;
}
.controls-buttons-white > div > a > span{
    position: relative;
    z-index: 2;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.25em;
}

.controls-buttons-white > div > a.active{
    background-color: white;
}
.controls-buttons-white > div > a.active > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 988px) {
    .controls-buttons-white, .controls-buttons-gradient{
        justify-content: space-between;
        gap: unset;
        width: 100%;
    }
    .controls-buttons-gradient > div,
    .controls-buttons-white > div{
        gap: 15px;
    }
    .controls-buttons-white > div > a{
        border-width: 1px;
    }

}

/* Раскрывающися таблицы в ЛК -> Игровые туры */

.expanding-table--header--details-button.active .button-gradient-hollow::before{
    content: none;
}
.expanding-table--header--details-button.active .button-gradient-hollow > span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

.expanding-table .expanding-table--header .button-gradient-hollow{
    min-height: 40px;
    padding-left: 3em;
    padding-right: 3em;
}
.expanding-table .expanding-table--header .expanding-table--header--status .button-gradient-hollow{
    width:150px;
}
@media screen and (max-width: 988px) {
    .expanding-table .expanding-table--header .button-gradient-hollow{
        min-height: 26px;
        padding-left: 1em;
        padding-right: 1em;
    }
    .expanding-table .expanding-table--header .expanding-table--header--status .button-gradient-hollow{
        width:100px;
    }
    .expanding-table--header{
        row-gap: 20px;
    }
}

.expanding-table--header--date{
    flex-basis: 26%;
}
.expanding-table--header--status{
    flex-basis: 25%;
}
.expanding-table--header--details-button{
    flex-basis: 40%;
    display: none;
}
.expanding-table--header--details-button .expanding-table--header--tags{
    background-color: transparent;
    justify-content: center;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 25px;
}
.expanding-table--header--details-button .expanding-table--header--tags a{
    font-size: 7px;
    font-weight: bold;
}

.expanding-table--header--status,
.expanding-table--header--expand-button{
    height: fit-content;
}

.expanding-table--header--expand-button div{
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.expanding-table.active .expanding-table--header--expand-button div{
    transform: rotate(90deg);
}



.expanding-table--header--team-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-basis: 44%;
}
.page-title-container .expanding-table--header--team-info{
    gap: 40px;
}
.expanding-table--header--team-info > img{
    height: 70px;
}
.page-title-container .expanding-table--header--team-info > img{
    height: 108px;
}
.expanding-table--header--team-info > div > img{
    display: none;
}

.competitions-group-header .expanding-table--header--team-info > div > span,
.competitions-group-header .expanding-table--header--team-info > div > div.cgh--team-name > span:first-child{
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    flex-basis: unset;
}
@media screen and (max-width: 988px) {
    .competitions-group-header .expanding-table--header--team-info > div > span{
        font-size: 2.5em;
    }
    .competitions-group-header .expanding-table--header--team-info > div > div.cgh--team-name > span:first-child{
        font-size: 20px;
    }
}
.expanding-table--header--team-info > div > span{
    font-size: 1.33em;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}


.expanding-table--header--tags{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
    position: relative;
}

.expanding-table--header--tags > a{
    background: var(--color-main-gradient);
    border-radius: 2em;
    font-size: 0.6em;
    padding: 0.5em 1em;
    text-transform: uppercase;
    position: relative;
}
.expanding-table--header--tags > a > span{
    z-index: 2;
    position: relative;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.expanding-table--header--tags > a.hoverable{
    cursor: pointer;
}

.expanding-table--header--tags > a.active::before{
    content: none;
}
@media screen and (min-width: 988px) {
    .expanding-table--header--tags > a.hoverable:hover::before,
    .expanding-table--header--tags > a:hover::before{
        content: none;
    }
    .expanding-table--header--tags > a:hover img{
        filter: brightness(10);
    }
}
.expanding-table--header--tags > a.active img{
    filter: brightness(10);
}
.expanding-table--header--tags > a.active > span,
.expanding-table--header--tags > a.hoverable:hover > span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 2;
    color: white;
}
@media screen and (min-width: 988px) {
    .expanding-table--header--tags > a:hover > span{
        background: white;
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
}
.expanding-table--header--tags > a.hoverable:hover > span img{
    filter: brightness(10);
}
.expanding-table--header--tags--expand.expand-right{

    transform: translateX(calc(-100% + 2em));
}
.expanding-table--header--tags--expand.expand-right::before{
    background-position: right 1em bottom;
}
.hoverable-tooltip.always-hoverable:hover .expanding-table--header--tags--expand{
    display: block;
}
.always-hoverable:hover .expanding-table--header--tags--expand.grid{
    display: grid;
}
.expanding-table--header--tags--expand--text{
    color: #2B2B2B;
    position: relative;
    z-index: 2;
    border-radius: 1em;
    padding: 0.5em;
    overflow: hidden;
    /* max-width: 200px; */
}
.expanding-table--header--tags--expand--text{
    text-align: left!important;
}

.expanding-table--header--tags--expand > div.expanding-table--header--tags--expand--grid{
    grid-template-columns: 1fr 8fr;
    display: grid;
    position: relative;
    z-index: 2;
    border-radius: 1em;
    gap: 2px;
}
.expanding-table--header--tags--expand > div > *{
    background-color: white;
    border-radius: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.expanding-table--header--tags--expand img{
    height: 1.5em;
    width: 1.5em;
    margin-left: auto;
    margin-right: auto;
}
.expanding-table--header--tags--expand::before{
    content: "";
    background: url(/public/img/popup_triangle.svg);
    display: block;
    width: 100%;
    height: 2em;
    background-size: 1.5em;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    bottom: calc(100% - 0.3em);
    left: 50%;
    transform: translateX(-50%);
}
.expanding-table--header--tags--expand::after{
    position: absolute;
    content: "";
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #F4F4F4;
    border-radius: 1em;
}

@media screen and (max-width: 988px) {
    .expanding-table--header--team-info > div{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .expanding-table--header--team-info > div > img{
        display: block;
        flex-basis: 4em;
        width: 4em;
    }
    .expanding-table--header--team-info > div > span{
        flex-basis: calc(100% - 4em);
    }
    .expanding-table--header--team-info > div > div{
        padding-left: 0.5em;
    }
    .expanding-table--header--date > span:nth-child(1){
        width: fit-content;
        margin-left: auto;
    }
    .expanding-table--header{
        align-items: unset;
    }
}

.inline-img{
    display: inline-block;
    height: 1.25em;
    width: 1.25em;
    margin-right: 0.5em;
}

.expanding-table--header--date{
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-weight: 700;
    text-transform: lowercase;
}
.expanding-table--header--date > span:nth-child(1){
    font-size: 1.33em;
}
.expanding-table--header--date > span:nth-child(2){
    font-size: 0.66em;
    line-height: 1em;
    position: relative;
    padding: 1em 2em;
    padding-left: 4em;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 2em;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 3em;
    display: block;
    width: fit-content;
    border: 2px solid #F4F4F4;
}
.expanding-table--header--date > span:nth-child(2) > img{
    position: absolute;
    left: 1em;
    top:1em;
    height: 2.5em;

}

@media screen and (max-width: 988px) {
    .hoverable-tooltip.active .expanding-table--header--details-button--content{
        display: flex;
    }
}
.expanding-table--header--details-button--content > img:first-child{
    position: fixed;
    top: 20px;
    right: 15px;
    height: 40px;
}
.expanding-table--header--details-button--content > img:nth-child(2){
    width: 100%;
    height: 8em;
    object-fit: contain;
    object-position: center;
    margin-top: 2em;
    object-position: center;
}
.expanding-table--header--details-button--content h1{
    text-align: center;
    text-transform: uppercase;
    color: #2B2B2B;
}
.expanding-table--header--details-button--content > div{
    max-height: 4em;
    padding: 1em;
    overflow: auto;
    border-radius: 1em;
    box-sizing: border-box;
    color: #2B2B2B;
    background-color: #F4F4F4;
}
.active .expanding-table--header--details-button--content .lk-profile-info{
    display: flex;
    flex-direction: column;
    max-height: unset;
    background: white;
}
.active .expanding-table--header--details-button--content .lk-profile-info img{
    filter: unset;
    margin-right: 1em;
    height: 1.5em;
    width: 1.5em;
}
.active .expanding-table--header--details-button--content .lk-profile-info span{
    text-transform: none;
}
.active .expanding-table--header--details-button--content .lk-profile-info span:nth-child(odd){
    color: #2B2B2B85;
}
.active .expanding-table--header--details-button--content .lk-profile-info span:nth-child(even){
    background: #F4F4F4;
    border-radius: 0.5em;
    padding: 10px 10px;
    margin-bottom: 10px;
    color: #2B2B2B;
}


.expanding-table--header--date > span:first-child > br {
    display: none;
}
@media screen and (max-width: 1300px) {
    .expanding-table--header--date > span:first-child > br{
        display: unset;
    }
}

@media screen and (max-width:987px){
    .expanding-table--header{
        flex-wrap: wrap;
        font-size: 1.33em;
    }
    .expanding-table--header--date > span:nth-child(2){
        display: none;
    }
    .expanding-table--header--team-info{
        flex-basis: 60%;
        gap:
    }
    .expanding-table--header--date{
        flex-basis: 40%;
    }
    .expanding-table--header--details-button{
        display: block;
    }
    .expanding-table--header--details-button{
        flex-basis: 50%;
    }
    .expanding-table--header--status{
        flex-basis: 30%;
    }
    .expanding-table--header--expand-button{
        flex-basis: 20%!important;
        /* margin-top: 1.22em; */
    }
}



.expanding-table.active .expanding-table--grid-container{
    display: block;
}
.expanding-table.active .expanding-table--grid-container > div{
    padding-bottom: 2px;
}

.expanding-table--grid-header span{
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

.expanding-table--grid > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.25em 1em;
    border-radius: 5px;
    background-color: white;
}
.expanding-table--grid > div:nth-child(2) img{
    height: 2.5em;
}
.expanding-table--grid > div:nth-child(1),
.expanding-table--grid > div:nth-child(2){
    justify-content: center;
}
.expanding-table--grid > div:nth-child(4),
.seven-grid .expanding-table--grid > div:last-child{
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
}
.seven-grid .expanding-table--grid > div:nth-child(4){
    cursor: unset;
}
.expanding-table--grid--row-details--content img{
    height: 1.5em;
    transition: all 0.15s ease-in-out;
}
.expanding-table--grid > div:last-child.active img{

}
.expanding-table--grid--row-details-container.disabled{
    background-color: #F4F4F4;
}
.expanding-table--grid--row-details-container.disabled img{
    filter: grayscale(1) brightness(0.5);
}
.expanding-table--grid--row-details-container.active > img{
    transform: rotate(90deg);
}
.expanding-table--grid--row-details-container.active .expanding-table--grid--row-details{
    display: block;
}
.expanding-table--grid--row-details--header, .expanding-table--grid--row-details--content{

    display: grid;
    grid-template-columns: 1fr 3.5fr 3fr 1.5fr 1fr;
    grid-gap: 2px;
    margin-bottom: 2px;
    overflow: visible;
    /* padding-left: 2px; */
}
.expanding-table--grid--row-details--content:last-child{
    margin-bottom: 0px;
}
@media screen and (max-width: 1100px) {

    .expanding-table--grid--row-details--header, .expanding-table--grid--row-details--content{
        grid-template-columns: 1fr 3.5fr 3fr 1.5fr auto;
    }
}
/* tr.selected{
    border: 2px solid #214FE2;
} */
.expanding-table--grid--row-details--content.selected,
tr.selected,
.expanding-table--grid.selected{
    /* background-color: red; */
    /* border: 2px solid #214FE2;
    border-radius: 8px; */
    position: relative;
}
.expanding-table--grid--row-details--content.selected{
    width: 100%;
    min-width: fit-content;
}
tr.selected td:first-child{
    border-radius: 8px 0px 0px 8px;
}
tr.selected td:last-child{
    border-radius: 0px 8px 8px 0px;
}
.expanding-table--grid--row-details--content.selected::before,
.expanding-table--grid.selected::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 2px solid var(--color-red);
    border-radius: 8px;
    z-index: 2;
    pointer-events: none;
}
tr.selected{
    position: relative;
}
/* tr.selected td{
    position: relative;
    z-index: 2;
} */
tr.selected::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: -0px;
    border: 2px solid var(--color-red);
    border-radius: 8px;
    z-index: 2;
    pointer-events: none;
}

.expanding-table--grid.selected::before{
    z-index: 0;
}
@media screen and (max-width:988px) {
    .expanding-table--grid--row-details--header, .expanding-table--grid--row-details--content{
        grid-template-columns: 100px 300px 300px 200px 100px;
    }
    .expanding-table--grid--row-details--header{
        padding-top: 2px;
    }
}
@media screen and (max-width:700px) {
    .expanding-table--grid--row-details--header, .expanding-table--grid--row-details--content{
        /* grid-template-columns: 50px 142px 160px 100px 50px; */
        grid-template-columns: calc(20vw - 2em - 10px) 30vw 30vw 20vw;
    }
    .disable-school .expanding-table--grid--row-details--header > *:nth-child(3), .disable-school .expanding-table--grid--row-details--content > *:nth-child(3){
        display: none;
    }
}
.expanding-table--grid--row-details--header span{
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    display: block;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.expanding-table--grid--row-details--content > div:nth-child(5n + 3),
.expanding-table--grid--row-details--content > div:nth-child(5n + 2){
    justify-content: start;
}
.expanding-table--grid--row-details > div:nth-child(5n + 7) img{
    height: 2.5em;
}
.expanding-table--grid--row-details--title{
    display: none;
    background: var(--color-main-gradient);
    flex-direction: row;
    padding: 1em;

}
.expanding-table--grid--row-details--title h1{
    color: white;
    font-size: 2em;
    text-transform: uppercase;
    line-height: 1em;
}
.expanding-table--grid--row-details--title > div{
    flex-basis: calc(100% - 6em);
    display: flex;
    flex-direction: row;
}
.expanding-table--grid--row-details--title > img{
    flex-basis: 40px;
    object-position: center;
    height: 40px;
}
.expanding-table--grid--row-details--title > div > img{
    filter: brightness(10);
    height: 6em;
    object-position: center;
    padding: 0px 1em;
    width: 4em;
    object-fit: contain;
}

@media screen and (max-width: 897px) {
    .expanding-table--grid--row-details{
        width: calc(100vw - 3.5em);
        position: fixed;
        top: 1em;
        left: 1em;
        z-index: 99999;
        max-height: calc(100vh - 2em);
    }
    .expanding-table--grid--row-details--title{
        display: flex;
    }
}

.my-schedule--table-header > .row{
    border: 2px solid #F4F4F4;
    align-items: center;
    padding: 0.5em 1.5em;
    border-radius: 4em;
    width: fit-content;
}
@media screen and (max-width: 898px) {
    .my-schedule--table-header{
        flex-direction: column;
        gap: 1em;
    }
    .my-schedule--table-header h2{
        font-size: 2em;
    }
}

.table-header-dif > .row{
    border: 2px solid #F4F4F4;
    border-radius: 4em;
    padding: 0.5em 1em;
}
.table-header-dif > .row h3{
    font-size: 1.33em;
    margin: 0px;
}








.expanding-table {
    background-color: white;
    border-radius: 1em;
    /* padding-bottom: 0.5em; */
    color: #2B2B2B;
    padding-top: 0px;
}
.expanding-table--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
}
@media screen and (max-width: 988px) {
    .expanding-table--header {
        padding: 8px;
    }
}
.expanding-table--header--team-info > div {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    gap: 12px;
}
.expanding-table--header--team-info > div > img {
    display: none;
}
.expanding-table--header--team-info > div > span {
    font-size: 1.33em;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.expanding-table--header--tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
    position: relative;
}
.expanding-table--header--tags > a {
    background: var(--color-main-gradient);
    border-radius: 4em;
    font-size: 0.6em;
    padding: 0.5em 1em;
    text-transform: uppercase;
    position: relative;
}
@media screen and (max-width: 988px) {
    .expanding-table--header--tags > a{
        font-size: 7px;
    }
}
.expanding-table--header--tags > a.active > span,
.expanding-table--header--tags > a.hoverable:hover > span {
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.expanding-table--header--tags > a > span {
    z-index: 2;
    position: relative;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.expanding-table--header--tags > a.hoverable {
    cursor: pointer;
}
.expanding-table--header--date {
    color: #2B2B2B;
}

.expanding-table--header--date {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-weight: 700;
    text-transform: uppercase;
}
@media screen and (min-width:1300px) {
    .expanding-table--header--date{
        line-height: 0.75em;
    }
}
.expanding-table--header--date {
    flex-basis: 30%;
}
.expanding-table--header--date > span:nth-child(1) {
    font-size: 1.33em;
}
.expanding-table--header--date > span:nth-child(2) {
    font-size: 0.66em;
    position: relative;
    padding: 1em 2em;
    padding-left: 4em;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 2.5em;
    border-radius: 3em;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    border: 2px solid #F4F4F4;
}
.expanding-table--header--date > span:nth-child(2) > img {
    position: absolute;
    left: 1em;
    top: 1em;
    height: 2.5em;
}
.expanding-table--header--details-button {
    flex-basis: 40%;
    display: none;
}
.expanding-table--header--details-button--content {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 10px;
    /* transform: translateY(-50%); */
    left: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    background-color: white;
    border-radius: 10px;
    z-index: 999999999999;
    padding: 1em;
    padding-bottom: 0px;
    box-sizing: border-box;
    overflow: auto;
    text-transform: uppercase;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 1);
    box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 1);
    overflow-x: hidden;
}
.expanding-table--header--details-button--content.with-header{
    padding: 0px;
}
.expanding-table--header--details-button--content.with-header h2{
    padding: 0px 15px;
    margin: 20px 0px;
    text-align: left;
    color: #2B2B2B;
    font-size: 15px;
    text-transform: uppercase;
}
.expanding-table--header--details-button--content.with-header > img:first-child{
    filter: brightness(10)!important;
    top: 20px;
    right: 15px;
    z-index: 4;
}
.expanding-table--header--details-button--content.with-header > .popup-footer{
    overflow: hidden;
    padding: 25px 15px;
    max-height: unset;
}
.expanding-table--header--details-button--content.with-header > .popup-footer > h1{
    margin: 0px;
    color: white;
    text-align: left;
    width: 100%;
    padding-right: 40px;
}
.expanding-table--header--details-button--content.with-header > div
.expanding-table--header--details-button--content > img:first-child {
    position: fixed;
    top: 1.5em;
    right: 1.5em;
    height: 5em;
}
.expanding-table--header--details-button--content > img:nth-child(2) {
    width: 100%;
    height: 8em;
    object-fit: contain;
    object-position: center;
    margin-top: 2em;
    object-position: center;
}
@media screen and (max-width: 988px) {
    .expanding-table--header--details-button--content > img:nth-child(2){
        height: 50px;
        margin-bottom: 10px;
        margin-top: 25px;
    }
    .expanding-table--header--details-button--content h1{
        font-size: 15px;
    }
}
.expanding-table--header--details-button--content h1 {
    text-align: center;
    text-transform: uppercase;
    color: #2B2B2B;
}
.expanding-table--header--details-button--content > span {
    display: block;
    color: rgba(43, 43, 43, 0.5);
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.expanding-table--header--details-button--content  div {
    max-height: 4em;
    padding: 1em;
    overflow: auto;
    border-radius: 10px;
    box-sizing: border-box;
    color: #2B2B2B;
    background-color: #F4F4F4;
}
@media screen and (max-width: 988px) {
    .expanding-table--header--details-button--content > span{
        font-size: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .expanding-table--header--details-button--content > span > img{
        height: 11px;
        width: 11px;
        transform: unset;
        margin-right: 11px;
    }
    .expanding-table--header--details-button--content > div{
        font-size: 11px;
    }
}
.expanding-table--header--status, .expanding-table--header--expand-button {
    height: fit-content;
}
.expanding-table--header--status {
    flex-basis: 25%;
}
.expanding-table--header--expand-button {
    flex-basis: 40px;
}
.expanding-table.active .expanding-table--header--expand-button div {
    transform: rotate(90deg);
}

.expanding-table--header--expand-button div {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.expanding-table.active .expanding-table--grid-container {
    display: block;
}

.expanding-table--grid-container {
    display: none;
    /* display: block; */
    background-color: #F4F4F4;
    /* background-color: red; */
    padding-top: 2px;
    /* padding-left: 2px; */
    /* padding-right: 4px; */
    /* padding-bottom: 2px; */
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
@media screen and (max-width: 1100px) {
    .expanding-table--grid-container{
        padding-right: 2px;
    }
}
@media screen and (max-width: 988px) {
    .expanding-table--grid-container{
        padding-right: 4px;
    }
}
.expanding-table--grid-header {
    display: grid;
    grid-template-columns: 30% calc(44.5% + 2px) calc(25% - 0px);
    grid-gap: 2px;
    padding-left: 2px;
    padding-right: 2px;
}
/* @media screen and (max-width: 650px) {
    .expanding-table--grid-header {
        grid-template-columns: 30% calc(45% - 2px) calc(25% - 0px);
    }
}
@media screen and (max-width: 1000px) {
    .expanding-table--grid-header {
        grid-template-columns: 30% calc(45% - 0px) calc(25% - 0px);
    }
} */
.expanding-table--grid-header div {
    padding: 1em 0px;
    border-radius: 5px;
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.expanding-table--grid--row-details--header span {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    display: block;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

.expanding-table--grid-header span {
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

.expanding-table--grid {
    display: grid;
    grid-template-columns: 30% 10% 34.5% 25%;
    grid-gap: 2px;
    font-weight: 500;
    padding-left: 2px;
    padding-right: 2px;
}
.expanding-table--grid:last-child > div:first-child{
    border-bottom-left-radius: 1em;
}
.expanding-table--grid:last-child > div:last-child{
    border-bottom-right-radius: 1em;
}
.expanding-table--grid > div:nth-child(1), .expanding-table--grid > div:nth-child(2) {
    justify-content: center;
}
.expanding-table--grid > div:nth-child(2) img {
    height: 2.5em;
}
.expanding-table--grid > div:nth-child(4),
.seven-grid .expanding-table--grid > div:last-child {
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
}
/* .seven-grid .expanding-table--grid > div.active:last-child{
    background: var(--color-main-gradient);
}
.seven-grid .expanding-table--grid > div.active:last-child > span{
    color: white;
}
.seven-grid .expanding-table--grid > div.active:last-child > img{
    filter: brightness(10);
} */

.expanding-table--grid--row-details-container img {
    height: 1.5em;
    transition: all 0.15s ease-in-out;
    margin-right: 0.5em;
}
.expanding-table--grid--row-details {
    position: absolute;
    width: calc(100vw - 1em - 4px);
    max-width: calc(1300px - 1em - 4px);
    box-sizing: border-box;
    top: 100%;
    right: 0px;
    display: none;
    /* display: block; */
    grid-template-columns: 1fr 3fr 4fr 1fr 1fr;
    grid-gap: 2px;
    border-radius: 1em;
    border: 3px solid #F4F4F4;
    -webkit-box-shadow: 0px 4px 16px 16px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 4px 16px 16px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 4px 16px 16px rgba(0, 0, 0, 0.15);
    background-color: #F4F4F4;
    padding: 2px;
    /* background-color: red; */
    z-index: 10;
}
.expanding-table--grid--row-details--header{
    margin-bottom: 2px;
}
@media screen and (max-width:1300px) {
    .expanding-table--grid--row-details{
        max-width: calc(100vw - 0px);
    }
}
@media screen and (max-width:400px) {
    .expanding-table--grid--row-details--header, .expanding-table--grid--row-details--content{
        font-size: 0.9em;
    }
    .expanding-table--grid--row-details--header.no-discipline, .expanding-table--grid--row-details--content.no-discipline{
        font-size: 0.9em;
    }
}
.expanding-table--grid--row-details--title {
    display: none;
    background: var(--color-main-gradient);
    flex-direction: row;
    padding: 1em;
}
.expanding-table--grid--row-details--header > div,
.expanding-table--grid--row-details--content > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.5em 0.5em;
    background-color: white;
    border-radius: 5px;
    box-sizing: border-box;
}
.expanding-table--grid--row-details--header:nth-child(2) > div:first-child{
    border-top-left-radius: 0.75em;
}
.expanding-table--grid--row-details--header:nth-child(2) > div:last-child{
    border-top-right-radius: 0.75em;
}
.expanding-table--grid--row-details--content:nth-child(2)  > div:last-child{
    border-bottom-right-radius: 0.75em;
}
.expanding-table--grid--row-details--content:not(.no-discipline):last-child  > div:nth-last-child(5){
    border-bottom-left-radius: 0.75em;
}
.expanding-table--grid--row-details--content.no-discipline:last-child  > div:nth-last-child(4){
    border-bottom-left-radius: 0.75em;
}

.expanding-table--grid--row-details-container.active .expanding-table--grid--row-details {
    display: block;
}
.expanding-table--grid--row-details--content > div:nth-child(5n + 3), .expanding-table--grid--row-details--content > div:nth-child(5n + 2) {
    justify-content: start;
}


.expanding-table--grid--row-details--header.no-discipline, .expanding-table--grid--row-details--content.no-discipline {
    display: grid;
    grid-template-columns: 1fr 3.5fr 3.5fr 1fr;
    grid-gap: 2px;
}
@media screen and (max-width: 1100px) {
    .expanding-table--grid--row-details--header.no-discipline, .expanding-table--grid--row-details--content.no-discipline{
        grid-template-columns: calc(25vw - 2em - 6px) 50vw 25vw auto;
        /* calc(20vw - 3em - 10px) 30vw 30vw 20vw */
    }
}
.expanding-table--grid--row-details--content.no-discipline > div:nth-child(5n + 3), .expanding-table--grid--row-details--content.no-discipline > div:nth-child(5n + 2) {
    justify-content: center;
}
.expanding-table--grid--row-details--content.no-discipline > div:nth-child(4n + 3), .expanding-table--grid--row-details--content.no-discipline > div:nth-child(4n + 2) {
    justify-content: start;
}


.expanding-table--grid--row-details-container.disabled {
    background-color: #F4F4F4;
}
.expanding-table--grid--row-details-container.disabled img {
    filter: grayscale(1) brightness(0.5);
}
.expanding-table--header--details-button.active .expanding-table--header--details-button--content{
    display: flex;
}

.hoverable-tooltip.active .expanding-table--header--details-button--content.tablet-lower{
    display: none;
}
@media screen and (max-width: 1100px) {
    .hoverable-tooltip.active .expanding-table--header--details-button--content.tablet-lower{
        display: flex;
    }
}
.inline-img {
    display: inline-block;
    height: 1.25em;
    width: 1.25em;
    margin-right: 0.5em;
    transform: translateY(0.25em);
}
.expanding-table--grid--row-details--title > div > img {
    filter: brightness(10);
    height: 6em;
    object-position: center;
    padding: 0px 1em;
    width: 4em;
}
.expanding-table--grid--row-details--title h1 {
    color: white;
    font-size: 2em;
    text-transform: uppercase;
}
.expanding-table--grid--row-details--title > img {
    flex-basis: 40px;
    object-position: center;
    height: 40px;
    margin-right: 0px;
}
.expanding-table--grid--row-details--title > div {
    flex-basis: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    align-items: center;
}



@media screen and (max-width: 988px)
{
    body {
        font-size: 8px;
    }
}
@media screen and (max-width: 1100px){
    .table-scroller {
        overflow-x: auto;
    }
}
@media screen and (max-width: 898px)
{
    .my-schedule--table-header {
        flex-direction: column;
        gap: 1em;
    }
}
@media screen and (max-width: 987px)
{
    .expanding-table--header {
        flex-wrap: wrap;
        font-size: 1.33em;
    }
}

@media screen and (max-width: 988px)
{
    .expanding-table--header {
        align-items: unset;
    }
}
@media screen and (max-width: 988px)
{
    .expanding-table--header--team-info > img {
        display: none;
    }
}
@media screen and (max-width: 988px)
{
    .expanding-table--header--team-info > div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: start;
        gap: 10px;
    }
}
@media screen and (max-width: 988px)
{
    .expanding-table--header--team-info > div > img {
        display: block;
        flex-basis: 2.8em;
        width: 2.8em;
    }
}
@media screen and (max-width: 988px)
{
    .expanding-table--header--team-info > div > span {
        font-size: 10px;
    }
    .expanding-table--header--team-info:first-child > div > span {
        flex-basis: calc(100% - 45px);
    }

}
@media screen and (max-width: 988px)
{
    .expanding-table--header--team-info > div > div {
        padding-left: 0px;
    }
}
@media screen and (max-width: 987px)
{
    .expanding-table--header--team-info {
        flex-basis: 60%;
        /* border-radius: 4px 0px 0px 4px;
        border: 1px solid #F4F4F4;
        box-sizing: border-box; */
    }
    .expanding-table--header--date {
        flex-basis: 40%;
    }
    .expanding-table--header--details-button {
        flex-basis: 43%;
        display: block;
    }
    .expanding-table--header--details-button a {
        margin-left: unset;
    }
    .expanding-table--header--status {
        flex-basis: 37%;
    }
    .expanding-table--header--status a{
        margin-right: unset;

    }
    .expanding-table--header--expand-button div {
        width: 26px;
        height: 26px;
        box-sizing: border-box;
        padding: 1px;
        border-radius: 0.5em;
        background: var(--color-main-gradient);
        margin-left: auto;
    }
    .expanding-table--header--expand-button img {
        padding: 0.4em;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        border-radius: 0.5em;
        background-color: white;
    }
    .expanding-table--grid--row-details {
        width: calc(100vw - 2em);
        max-width: unset;
        position: fixed;
        top: 1em;
        left: 1em;
        z-index: 99999;
        max-height: calc(100vh - 2em);
        border: 0px;
        padding: 0px;
        -webkit-box-shadow: 0px 4px 16px 16px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 4px 16px 16px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 4px 16px 16px rgba(0, 0, 0, 0.5);
    }
    .expanding-table--grid--row-details--title {
        display: flex;
        border-radius: 7px;
    }
}
@media screen and (max-width: 988px)
{
    .expanding-table--header--date > span:nth-child(1) {
        width: fit-content;
        margin-left: auto;
        font-size: 10px;
    }
    .expanding-table--header--date > span:nth-child(2) {
        display: none;
    }
}

.mobile-tooltip-button{
    display: block;

}
.rating-table .rating-table--team-name .mobile-tooltip-button > img{
    height: 1.5em;
    position: absolute;
    top: 0px;
    right: 0px;
}

@media screen and (min-width:650px) {

    .mobile-tooltip-button{
        display: none;
    }
}

.hoverable-tooltip{
    position: relative;
}
@media screen and (min-width: 1100px) {
    .expanding-table--header--tags > *:hover > .expanding-table--header--tags--expand,
    .tags > *:hover > .expanding-table--header--tags--expand,
    .hoverable-tooltip:hover .expanding-table--header--tags--expand{
        display: block;
    }
    .expanding-table--header--tags > *:hover > .expanding-table--header--tags--expand.grid,
    .tags > *:hover > .expanding-table--header--tags--expand.grid,
    .hoverable-tooltip:hover .expanding-table--header--tags--expand.grid{
        display: grid;
    }
}
@media screen and (max-width: 650px){
    .hoverable-tooltip:hover > .mobile-tooltip{
        display: block;
    }
}
.mobile-tooltip{
    display: none;
    /* display: block; */
    position: absolute;
    left: 50%;
    top: calc(100% + 1.5em);
    background: var(--color-main-gradient);
    border-radius: 1em;

    width: max-content;
    max-width: 400px;
    z-index: 1000;
    padding: 2px;

    font-size: 500;



    transform: translateX(-50%);
}

.expanding-table--header--tags--expand{
    display: none;
    /* display: block; */
    position: absolute;
    left: 50%;
    top: calc(100% + 1.5em);
    background: var(--color-main-gradient);
    border-radius: 1em;

    /* width: max-content; */
    width: 350px;
    z-index: 1000;
    padding: 2px;

    font-size: 500;



    transform: translateX(-50%);
}

.expanding-table--header--tags--expand.grid{
    grid-template-columns: 32px 1fr;
    /* grid-template-rows: repeat(2, calc(300px - 1em)); */
    grid-auto-rows: 1fr;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    color: red;
    padding: 4px;
    text-transform: none;
}

.expanding-table--header--tags--expand.grid.placement{
    grid-template-columns: 120px 1fr;
}
.expanding-table--header--tags--expand.grid.placement > div{
    width: 120px;
}

.expanding-table--header--tags--expand.grid > div,
.expanding-table--header--tags--expand.grid > span{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 32px;
    color: #2B2B2B;
    font-size: 15px!important;
    font-weight: 500!important;
    border-radius: 5px;
    background-color: white;
    /* background-color: red; */
}
.expanding-table--header--tags--expand.grid > div{
    justify-content: center;
}
.expanding-table--header--tags--expand.grid > span{
    padding-left: 0.5em;
}
.expanding-table--header--tags--expand.grid > *:nth-child(1){
    border-top-left-radius: 0.5em;
}
.expanding-table--header--tags--expand.grid > *:nth-child(2){
    border-top-right-radius: 0.5em;
}
.expanding-table--header--tags--expand.grid > *:nth-last-child(2){
    border-bottom-left-radius: 0.5em;
}
.expanding-table--header--tags--expand.grid > *:nth-last-child(1){
    border-bottom-right-radius: 0.5em;
}
.expanding-table--header--tags--expand.grid > div{
    height: 32px;
    width: 32px;
}
.expanding-table--header--tags--expand.grid > div > img{
    height: 20px;
    width: 20px;
    margin-left: auto;
    margin-right: auto;
    filter: none;

}
.expanding-table--header--tags--expand.grid .inline-img,
.expanding-table--header--details-button--content .inline-img
{
    height: 11px;
    width: 11px;
}

.expanding-table--header--details-button--content span,
.expanding-table--header--details-button--content div{
    font-weight: 500!important;
    text-transform: none;
}

.expanding-table--header--tags--expand--text{
    color: #2B2B2B;
    position: relative;
    z-index: 2;
    border-radius: 1em;
    padding: 1em;
    overflow: hidden;
    background-color: white;
}

.expanding-table--header--tags--expand > div.expanding-table--header--tags--expand--grid{
    grid-template-columns: 1fr 8fr;
    display: grid;
    position: relative;
    z-index: 2;
    border-radius: 1em;
    gap: 2px;
    padding: 0.5em;
    width: max-content;
    max-width: 400px;
}
.expanding-table--header--tags--expand > div > *{
    background-color: white;
    border-radius: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* height: 2.5em; */
}
.expanding-table--header--tags--expand img{
    height: 1.5em;
    width: 1.5em;
    margin-left: auto;
    margin-right: auto;
}
.expanding-table--header--tags--expand::before{
    content: "";
    background: url(/public/img/popup_triangle.svg);
    display: block;
    width: 100%;
    height: 2em;
    background-size: 1.5em;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    bottom: calc(100% - 0.3em);
    left: 50%;
    transform: translateX(-50%);
}
.expanding-table--header--tags--expand::after{
    position: absolute;
    content: "";
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #F4F4F4;
    border-radius: 1em;
}

.expanding-table--header--tags > a{
    background: var(--color-main-gradient);
    border-radius: 4em;
    font-size: 0.6em;
    padding: 0.5em 1em;
    text-transform: uppercase;
    position: relative;
}
.expanding-table--header--tags > a::before{
    content: "";
    position: absolute;
    background-color: white;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 2em;
}
@media screen and (max-width: 988px) {
    .expanding-table--header--tags > a::before{
        left: 1px;
        top: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
}
.expanding-table--header--tags > a > span{
    z-index: 2;
    position: relative;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.expanding-table--header--tags > a.hoverable{
    cursor: pointer;
}

.expanding-table--header--tags > a.active::before,
.expanding-table--header--tags > a.hoverable:hover::before{
    content: none;
}
.expanding-table--header--tags > a.active > span,
.expanding-table--header--tags > a.hoverable:hover > span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
@media screen and (min-width:988px){
    .expanding-table--header--tags > a.active::before,
    .expanding-table--header--tags > a.hoverable:hover::before{
        content: none;
    }
    .expanding-table--header--tags > a.active > span,
    .expanding-table--header--tags > a.hoverable:hover > span{
        background: white;
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
}
.expanding-table--header--tags > a.hoverable:hover > span img{
    filter: brightness(10);
}

.my-schedule .rating-table {
    width: 100%;
    border-radius: 0px 0px 1em 1em;
}

.rating-table {
    margin-left: auto;
    margin-right: auto;
    min-width: fit-content;
    /* width: 100%; */
    border-radius: 1em;
    border: 2px solid white;
    background-color: #F4F4F4;
    overflow: visible;
    border-spacing: 0px;
}
/* .my-schedule .rating-table tr:first-child th:first-child {
    border-top-left-radius: 0px;
} */
/* .my-schedule .rating-table tr:first-child th:last-child {
    border-top-right-radius: 0px;
} */
.rating-table tr:last-child td:first-child {
    border-bottom-left-radius: calc(1em - 4px);
}
.rating-table tr:last-child td:last-child {
    border-bottom-right-radius: calc(1em - 4px);
}

.rating-table tr:first-child th:first-child {
    border-top-left-radius: calc(1em - 4px);
}
.rating-table td,
.rating-table th {
    font-weight: bold;
    border: 1px solid #F4F4F4;
    padding: 0.5em 1em;
    background-color: white;
}
.rating-table th {
    color: #2B2B2B;
    text-transform: uppercase;
}
.rating-table .small-th {
    font-size: 0.75em;
}
.rating-table .rating-table--team-name > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    position: relative;
    /* padding-right: 2.5em; */
}
.rating-table .rating-table--team-name img {
    height: 2.5em;
}
.rating-table td:first-child{
    text-align: center;
}



.my-schedule--table-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: white;
    border-radius: 1em 1em 0px 0px;
    padding: 20px 1em;
    /* margin-top: 1em; */
    /* max-height: 102px; */
    box-sizing: border-box;
}
.my-schedule--table-header h2{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 2em;
}
.my-schedule--table-header h3{
    font-size: 1.33em;
    margin: 0px;
    max-width: calc(450px - 3em);

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media screen and (max-width: 988px) {
    .my-schedule--table-header h3{
        font-size: 1em;
        max-width: unset;
    }
}

.my-schedule--table-header h2,
.my-schedule--table-header h3{
    font-weight: 700;
}
.my-schedule--table-header > .row{
    border: 2px solid #F4F4F4;
    align-items: center;
    padding: 0.5em 1.5em;
    border-radius: 4em;
    width: fit-content;
    max-width: 450px;
}
.my-schedule--table-header > .row > img{
    height: 2.5em
}
@media screen and (max-width: 988px) {
    .my-schedule--table-header{
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        /* align-items: end; */
    }
    .my-schedule--table-header h2{
        font-size: 2em;
    }
    .my-schedule--table-header > .row{
        max-width: 100%;
    }
    .my-schedule--table-header > .row > img{
        height: 2em;
    }.my-schedule--table-header .column-space-between{
         gap: 10px;
     }
}


.ellipsis-2{
    overflow: hidden;
    display: -webkit-box!important;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.text-nowrap{
    white-space: nowrap;
}

.competitions-group-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}
.competitions-group-header > div{
    flex-basis: 50%;
}

.competitions-group-header .backlink-arrow{
    display: none;
}

@media screen and (max-width: 987px) {
    .competitions-group-header{
        flex-direction: column-reverse;
        gap: 10px;
    }
    .competitions-group-header .backlink-arrow{
        display: block;
        position: absolute;
        top: 0px;
        right:0px;
        width: 35px;
        height: 35px;
    }
    .competitions-group-header .backlink-arrow img{
        width: 35px;
        height: 35px;
        transform: rotate(180deg);
    }
    .team-rating-page,
    .tournament-group{
        flex-direction: column;
    }
    .competitions-group-header > div{
        flex-basis: 100%;
    }
    .competitions-group-header .expanding-table--header--team-info > div{
        justify-content: start;
    }
    .competitions-group-header .expanding-table--header--team-info > div > div{
        padding-left: 0px;
    }
}

@media screen and (min-width: 898px) {
    .competitions-group-header .expanding-table--header--team-info.inverse{
        text-align: right;
        flex-direction: row-reverse;
    }
    .inverse .expanding-table--header--tags{
        flex-direction: row-reverse;
    }
}
.competitions-group-header .expanding-table--header--tags > a:not(:first-child){
    display: block;
}
.competitions-group-header .expanding-table--header--team-info img{
    filter: brightness(10);
}
.competitions-group-header .expanding-table--header--team-info .expanding-table--header--details-button--content > img:first-child{
    filter: unset;
}
.w-min-content{
    width: min-content;
}
.competitions-group-header .expanding-table--header--team-info > div > div.cgh--team-name{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
}
@media screen and (max-width: 897px) {
    .competitions-group-header .expanding-table--header--team-info > div > div.cgh--team-name{
        flex-direction: column;
        align-items: start;
        gap: 0px;
        flex-basis: calc(100% - 73px);
    }
}
@media screen and (max-width: 988px)
{
    .competitions-group-header .expanding-table--header--team-info > div > img {
        display: block;
        flex-basis: 63px;
        width: 63px;
        /* margin-right: 1em; */
    }
}
.competitions-group-header .expanding-table--header--tags{
    gap: 20px;
}
@media screen and (max-width: 988px)
{
    .competitions-group-header .expanding-table--header--tags{
        gap: 10px;
    }
}
.competitions-group-header .expanding-table--header--tags > a > span{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.competitions-group-header .expanding-table--header--tags > a.active > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 988px) {
    .competitions-group-header .expanding-table--header--tags > a:hover > span{
        background: var(--color-main-gradient);
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
}
.competitions-group-header .expanding-table--header--tags > a::before{
    content: none;
}
.competitions-group-header .expanding-table--header--tags > a{
    background: transparent;
    border: 2px solid white;
    font-size: 0.66em;
    padding: calc(1.5em - 3px) 2em;
    border-radius: 3em;
}
@media screen and (max-width: 988px) {
    .competitions-group-header .expanding-table--header--tags > a{
        font-size: 1em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
}
.competitions-group-header .expanding-table--header--tags > a.active{
    background: white;
    border: 2px solid white;
}
@media screen and (min-width: 988px) {
    .competitions-group-header .expanding-table--header--tags > a:hover{
        background: white;
        border: 2px solid white;
    }
}
.competitions-group-header .expanding-table--header--tags > a.active > span, .competitions-group-header .expanding-table--header--tags > a.hoverable:hover > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

.full-height{
    height: 100%;
}
.column-v-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.column-space-between{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.row-v-center{
    align-items: center;
}
.bright10{
    filter: brightness(10);
}
.geomark{
    border: 2px solid #F4F4F4;
    align-items: center;
    padding: 0.5em 1.5em;
    border-radius: 4em;
    width: fit-content;
    max-width: 100%;
    flex-wrap: nowrap;
    height: fit-content;
}

@media screen and (min-width: 898px){
    .geomark{

        margin-left: auto;
    }
}
.geomark > img{
    height: 2.5em;
}
.geomark > h3{
    font-size: 1em;
    margin: 0px;
    /* max-width: calc(100% - 3em); */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 700;
}

.team-id{
    font-weight: 300;
    color: hsla(0, 0%, 100%, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2em;
    white-space: nowrap;
}
@media screen and (max-width: 988px) {
    .team-id{
        font-size: 10px;
    }
}

.team-rating--statistic5{
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
}
.team-rating--statistic5 > div{
    background-color: white;
    border-radius: 2em;
    /* overflow: hidden; */
    /* padding: 1px; */
    border: 2px solid #F4F4F4;
    flex-basis: calc(20%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.team-rating--statistic5 > div > span:first-child{
    color: #2B2B2B;
    height: calc((1300px / 5) - (40px * 2));
    padding-top: 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-align: center;
    font-size: 31.8px;
    font-weight: bold;
}
@media screen and (max-width: 1300px) {
    .team-rating--statistic5 > div > span:first-child{
        height: calc((100vw / 5) - (40px * 2));
    }
}
.team-rating--statistic5 > div > span.trs--smaller-text{
    font-size: 24px;
}
.team-rating--statistic5 > div > span:nth-child(2){
    background: var(--color-main-gradient);
    display: block;
    text-align: center;
    border-radius: 0px 0px 2.5em 2.5em;
    font-size: 11px;
    line-height: 4em;
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width: 988px) {
    .team-rating--statistic5 > div{
        border-radius: 1em;
    }
}

.my-team--season-result.tablet-ver{
    display: none;
}
@media screen and (max-width: 1050px) {
    .my-team--season-result > div > span{
        height: 200px;
        display: flex;
        margin-top: 0px;
        font-size: 20px;
        width: 33%;
        border-radius: 0px 1.5em 1.5em 0px;
    }
}
@media screen and (max-width: 988px) {
    .my-team--season-result > div > span{
        height: 200px;
        display: flex;
        margin-top: 0px;
        font-size: 20px;
        width: 33%;
        border-radius: 0px 0.75em 0.75em 0px;
    }
}
@media screen and (max-width: 1050px) {
    .my-team--season-result.tablet-ver{
        display: flex;
    }
    .my-team--season-result.pc-ver{
        display: none;
    }
    .my-team--season-result{
        flex-direction: column;
        gap: 10px;
    }
    .my-team--season-result > div{
        width: 100%;
        flex-basis: 100%;
        max-width: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .my-team--season-result > div > div > img{
        width: unset;
        height: 150px;
        padding: 0.5em;
        margin-top: 0px;
        margin-left: 1em;
    }
    .my-team--season-result > div > div{
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .my-team--season-result > div > div > span{
        position: relative;
        top:unset;
        left: unset;
        transform: unset;
        font-size: 2em;
        text-transform: uppercase;
        /* width: min-content; */
    }

    .team-rating--statistic5{
        flex-direction: column;
        gap: 10px;
    }
    .team-rating--statistic5 > div{
        flex-direction: row-reverse;
    }
    .team-rating--statistic5 > div > span:nth-child(2),
    .team-rating--statistic5 > div > span:first-child{
        font-size: 2em;
        height: unset;
        padding: 1em;
    }
    .team-rating--statistic5 > div > span:nth-child(2){
        background: none;
        color: #2B2B2B;
        font-weight: bold;
        line-height: 1.25em;
        text-align: start;
        flex-basis: 66%;
        box-sizing: border-box;
    }
    .team-rating--statistic5 > div > span:first-child{
        background: var(--color-main-gradient);
        color: white;
        flex-basis: 33%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 0px 0.5em 0.5em 0px;
        text-transform: uppercase;
    }
}
@media screen and (max-width: 800px){
    .my-team--season-result > div > div > img{
        height: 51px;
    }
    .my-team--season-result > div > span{
        height: 80px;
    }
    .my-team--season-result > div > div > span{
        /* font-size: 1.5em; */
    }
}
@media screen and (max-width: 600px){
    .my-team--season-result > div > div > img{
        height: 51px;
    }
    .my-team--season-result > div > span{
        height: 80px;
    }
    .my-team--season-result > div > div > span{
        /* font-size: 1.5em; */
    }
    .team-rating--statistic5 > div > span:nth-child(2),
    .team-rating--statistic5 > div > span:first-child{
        font-size: 1.5em;
    }
    .team-rating--statistic5 > div > span:first-child{
        border-radius: 0px 0.5em 0.5em 0px;
    }
}
@media screen and (max-width: 500px){
    .my-team--season-result > div > div > span{
        font-size: 12px;
    }
}


.my-team--season-result.always-tablet{
    display: flex;
}
.my-team--season-result.always-tablet{
    flex-direction: column;
    gap: 25px;
    justify-content: space-between;
    height: 100%;
}
.my-team--season-result.always-tablet > div{
    width: 100%;
    flex-basis: 100%;
    border-radius: 30px;
    max-width: unset;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: none;
    position: relative;
    background: var(--color-main-gradient);
    border: none;
}
.my-team--season-result.always-tablet > div::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 30px;
}
.my-team--season-result.always-tablet > div > div > img{
    width: unset;
    height: 89px;
    margin-top: 0px;
    margin-left: 1em;
}
.my-team--season-result.always-tablet > div > div{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}
.my-team--season-result.always-tablet > div > div > span{
    position: relative;
    top:unset;
    left: unset;
    transform: unset;
    font-size: 20px;
    text-transform: uppercase;
    /* width: min-content; */
}
.my-team--season-result.always-tablet > div > span{
    position: relative;
    z-index: 2;
    width: 33%;
    border-radius: 0px 30px 30px 0px;
    font-size: 30px;
    height: 100%;
    margin-top: 0px;
}
@media screen and (min-width: 988px) {
    .my-team .my-team--season-result.always-tablet > div{
        min-height: 140px;
    }
}
@media screen and (max-width: 988px) {
    .my-team--season-result.always-tablet{
        gap: 10px;
    }
    .my-team--season-result.always-tablet > div{
        border-radius: 10px;
    }
    .my-team--season-result.always-tablet > div::before{
        border-radius: 10px;
    }
    .my-team--season-result.always-tablet > div > div{

    }
    .my-team--season-result.always-tablet > div > div > img{
        height: 50px;
    }
    .my-team--season-result.always-tablet > div > span{
        height: 80px;
        font-size: 20px;
        border-radius: 0px 10px 10px 0px;
    }
    .my-team--season-result.always-tablet > div > div > span{
        font-size: 12px;
    }
}

.popup-types-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: var(--color-main-gradient);
    padding: 15px 50px;
    padding-right: 15px;
    border-radius: 2em;
    min-height: 100px;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.popup-types-header > div{
    width: calc(100% - 4em);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.popup-types-header > div > img{
    filter: brightness(10);
    height: 60px;
}
.popup-types-header > div > h2{
    font-size: 30px;
    text-transform: uppercase;
    text-align: left;
    margin: 0px;
    font-weight: 800;
    line-height: 1em;
}
.popup-types-header .cross{
    width: 40px;
    height: 40px;
    cursor: pointer;
}
#disciplina h3{
    font-size: 20px;
}
@media screen and (max-width: 988px) {
    #disciplina h3{
        font-size: 15px;
    }
    .popup-types-header{
        min-height: 80px;
        padding: 10px;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    /* .popup-types-header > div{
        gap: 10px;
    } */
    .popup-types-header > div > h2{
        font-size: 15px;
    }
    .popup-types-header > div > img{
        height: 52px;
    }
}
@media screen and (max-width: 988px) {
    .popup-types-header .cross{
        height: 5em;
        width: 5em;
    }
}
.popup-types--categories{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.popup-types--categories > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: var(--color-main-gradient);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 4px 20px;
    padding-right: 10px;
}
.popup-types--categories > div > span:nth-child(1){
    font-weight: bold;
    text-transform: uppercase;
}
.popup-types--categories > div > span:nth-child(2){
    font-weight: 300;
}
.popup-types--categories > div > a{
    font-weight: 100;
    font-size: 10px;
    border-radius: 2em;
    padding: 1em 2em;
    border: 1px solid white;
    /* cursor: pointer; */
}
.reg-modal > .profile-info, .reg-modal > .popup-types--categories, #disciplina .row-center{
    max-width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:988px) {
    .profile-info{
        font-size: 10px;
    }
    .popup-types--categories{
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 15px;
    }
    .popup-types--categories > div{
        flex-basis: calc(50% - 8px);
        flex-direction: column;
        gap: 5px;
        padding: 8px;
    }
    .popup-types--categories > div > span:nth-child(1){
        font-size: 15px;
    }
    .popup-types--categories > div > span:nth-child(2){
        margin-bottom: 10px;
        font-size: 7px;
        font-weight: 500;
    }
    .reg-modal > .profile-info, .reg-modal > .popup-types--categories, #disciplina .row-center{
        max-width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
    }
    .popup-types--categories > div > a{
        padding: 4px;
        font-size: 10px;
        line-height: 0.75em;
    }
    .profile-info > p{
        width: calc(100%);
        padding: 7px 10px;
    }
}
@media screen and (max-width:700px){
    .reg-modal > .profile-info{
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: start;
    }
    .popup-types--categories > div > a{
        width: 60%;
    }
}

.default-video{
    width: 100%;
    height: 731px;
}
@media screen and (max-width: 1300px) {
    .default-video{
        width: 100%;
        height: calc(100vw / 16 * 9);
    }
}
.half-video{
    width: 752px;
    height: 423px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 800px) {
    .half-video{
        width: 100%;
        height: calc(100vw / 16 * 9);
    }
}

.lk-profile-info{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.lk-profile-info > div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(50% - 10px);
}
.lk-profile-info > div > *{
    margin: 0px;
}
.lk-profile-info > div > * >span{
    display: block;
}
.lk-profile-info > div > * > span:nth-child(1){
    color: #2b2b2b85;
    margin-bottom: 0.25em;
}
.lk-profile-info > div > * >span:not(:nth-child(1)),
.lk-profile-info > div > * > a span:first-child{
    color: #2B2B2B;
    background-color: #f4f4f4;
    border-radius: 0.66em;
    padding: 0.8em 1.5em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}

.lk-profile-info > div > * >span:nth-child(n+2){
    margin-bottom: 10px;
}
.lk-profile-info > div > * > a span:first-child{
    width: 90%;
}
@media screen and (min-width: 988px){
    .my-team .lk-profile-info > div > * >span:not(:nth-child(1)){
        width: 90%;
    }
}

@media screen and (max-width: 988px) {
    .lk-profile-info > div > * >span:not(:nth-child(1)),
    .lk-profile-info > div > * > a span:first-child{
        padding: 0.8em 1em;
        border-radius: 0.5em;
        letter-spacing: -1px;
    }
    .lk-profile-info{
        flex-direction: column;
        gap: 1.5em;
    }
    .lk-profile-info > div{
        width: 100%;
        gap: 10px;
    }
    .lk-profile-info > div > * > span,
    .lk-profile-info > div > * > a span,
    select.black-hollow{
        font-size: 15px;
        font-weight: 500;
    }
}


.my-team .lk-profile-info > div{
    flex-basis: 100%;
}

.popup-footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: var(--color-main-gradient);
    padding: 0em;
    border-radius: 1em;

    /* -webkit-box-shadow: 0px 1px 1px 1px var(--color-main-gradient);
    -moz-box-shadow: 0px 1px 1px 1px var(--color-main-gradient);
    box-shadow: 0px 1px 1px 1px var(--color-main-gradient); */
}

.popup-discipline-choose{
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 20px;
    max-height: 500px;
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
    padding-right: 30px;
    box-sizing: border-box;
}
@media screen and (max-height: 800px) {
    .popup-discipline-choose{
        max-height: 50vh;
    }
}
.popup-discipline-choose input{
    display: none;
}
.popup-discipline-choose label{
    width: 100%;
    background: var(--color-main-gradient);
    padding: 0px;
    display: block;
    border-radius: 2em;
    height: fit-content;
    font-size: 22.5px;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-discipline-choose span{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 17px 0px;
    box-sizing: border-box;
    border-radius: 2em;
    text-transform: uppercase;
    font-weight: bold;
    color :#2B2B2B;
}
.popup-discipline-choose span::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 2em;
    background-color: white;
}
.popup-discipline-choose span p{
    margin: 0px;
    position: relative;
    z-index: 2;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}
.popup-discipline-choose input:checked + span::before{
    content: none;
}
.popup-discipline-choose input:checked +  span > p{
    background: white;
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}

#net-disciplin h3{
    font-size: 20px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

#vybor-discipliny .popup-footer > div{
    width: calc(100% - 100px);
    padding-right: 45px;
    box-sizing: border-box;
}
#vybor-discipliny .popup-footer > div > a.button-white-hollow{
    width: 100%;
}


@media screen and (max-width: 988px) {
    .popup-discipline-choose{
        gap: 10px;
        width: calc(100% - 30px);
        padding-right: 10px;
    }
    .popup-discipline-choose label{
        font-size: 12px;
    }
    #vybor-discipliny .popup-footer a{
        width: calc(100% - 30px);
    }
    #net-disciplin h3{
        font-size: 15px;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px!important;
        margin-bottom: 20px!important;
    }

    #vybor-discipliny .popup-footer > div{
        width: calc(100% - 30px);
        padding-right: 17px;
        box-sizing: border-box;
    }
    #vybor-discipliny .popup-footer > div > a.button-white-hollow{
        width: 100%;
        max-width: unset;
    }
}


/* width */
*::-webkit-scrollbar {
    width: 1em;
    height: 1em;
    cursor: pointer;
}

/* Track */
*::-webkit-scrollbar-track {
    background: #f4f4f473;
    cursor: pointer;
}

/* Handle */
*::-webkit-scrollbar-thumb {
    background: var(--color-main-gradient);
    border-radius: 1em;
    cursor: pointer;
}
@media screen and (max-width: 988px) {
    /* width */
    *::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    /* Track */
    *::-webkit-scrollbar-track {
        background: #f4f4f473;
    }

    /* Handle */
    *::-webkit-scrollbar-thumb {
        background: var(--color-main-gradient);
        border-radius: 1em;
    }
}
.location{
    cursor: pointer;
}
@media screen and (max-width: 988px) {
    .location.active{
        background: var(--color-main-gradient);
    }
    .location.active > img{
        filter: brightness(10);
    }
    .location.active > h3{
        color: white;
    }
}
@media screen and (min-width: 988px) {
    .location.hoverable-tooltip:hover{
        background: var(--color-main-gradient);
    }
    .location.hoverable-tooltip:hover > img{
        filter: brightness(10);
    }
    .location.hoverable-tooltip:hover > h3{
        color: white;
    }
    .location.hoverable-tooltip.gradient-highlight:hover{
        background: white;
    }
    .location.hoverable-tooltip.gradient-highlight:hover > img{
        filter: unset;
    }
    .location.hoverable-tooltip.gradient-highlight:hover > h3{
        background: var(--color-main-gradient);
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
}
@media screen and (max-width: 988px){
    .location.hoverable-tooltip.gradient-highlight.active{
        background: white;
    }
    .location.hoverable-tooltip.gradient-highlight.active > img{
        filter: unset;
    }
    .location.hoverable-tooltip.gradient-highlight.active > h3{
        background: var(--color-main-gradient);
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
}
.expanding-table--grid-container.seven-grid{
    overflow: visible;
}
.seven-grid .expanding-table--grid-header, .seven-grid .expanding-table--grid, .seven-grid .expanding-table--grid--row-details--header{
    box-sizing: border-box;
    grid-template-columns: calc(20% - 2px) calc(15% - 2px) calc(10% - 2px) calc(12.5% - 2px) calc(12.5% - 2px) calc(10% - 2px) 20%;
}
.seven-grid .expanding-table--grid--row-details--header, .seven-grid .expanding-table--grid--row-details--content{
    box-sizing: border-box;
    grid-template-columns: calc(8.5% - 2px) calc(25% - 2px) calc(18% - 2px) calc(14% - 2px) calc(12.5% - 2px) calc(14.5% - 2px)  calc(7.5%);
}
.seven-grid .expanding-table--grid-header, .seven-grid .expanding-table--grid,.expanding-table--grid-container.seven-grid, .seven-grid .expanding-table--grid--row-details--header, .seven-grid .expanding-table--grid--row-details--content{
    min-width: 1200px;
}
.seven-grid .expanding-table--grid--row-details--header > div, .seven-grid .expanding-table--grid--row-details--content > div{
    justify-content: center;
}
.seven-grid .expanding-table--grid > div{
    justify-content: center;
    min-height: 60px;
}
.seven-grid .expanding-table--grid > div:nth-child(2),
.seven-grid .expanding-table--grid > div:nth-child(1){
    justify-content: start;
}
.seven-grid .expanding-table--grid--row-details--content > div:nth-child(2),
.seven-grid .expanding-table--grid--row-details--content > div:nth-child(3){
    justify-content: start;
}
.seven-grid .expanding-table--grid--row-details--content > div > img{
    height: 40px;
    margin-right: 3px;
}

@media screen and (max-width:1100px) {
    .seven-grid .expanding-table--grid-header, .seven-grid .expanding-table--grid{
        grid-template-columns: calc(20% - 2px) calc(25% - 2px) calc(5% - 2px) calc(10% - 2px) calc(12.5% - 2px) calc(12.5% - 2px)  15%;
    }
    .seven-grid .expanding-table--grid--row-details--header, .seven-grid .expanding-table--grid--row-details--content{
        grid-template-columns: calc(7.5% - 2px) calc(25% - 2px) calc(15% - 2px) calc(12.5% - 2px) calc(12.5% - 2px) calc(12.5% - 2px)  15%;
    }
}
@media screen and (max-width:700px) {
    .seven-grid .expanding-table--grid-header, .seven-grid .expanding-table--grid{
        grid-template-columns: calc(15% - 2px) calc(16.25% - 2px) calc(13.5% - 2px) calc(10% - 2px) calc(12.5% - 2px) calc(14.75% - 2px)  18.5%;
    }
    .seven-grid .expanding-table--grid--row-details--header, .seven-grid .expanding-table--grid--row-details--content{
        grid-template-columns: calc(10% - 2px) calc(21.5% - 2px) calc(15% - 2px) calc(11.5% - 2px) calc(12.5% - 2px) calc(15% - 2px)  14.5%;
    }
    .seven-grid .expanding-table--grid-header, .seven-grid .expanding-table--grid,.expanding-table--grid-container.seven-grid{
        min-width: 800px;
    }
    .seven-grid .expanding-table--grid--row-details--header, .seven-grid .expanding-table--grid--row-details--content{
        min-width: 600px;
    }
    .seven-grid .expanding-table--grid > div{
        min-height: 30px;
    }
}

.seven-grid .my-schedule--table-header h2{
    margin-bottom: 15px;
    margin-left: -1px;
}
@media screen and (max-width:988px){
    .seven-grid .my-schedule--table-header h2{
        margin-bottom: 8px;
    }
    .seven-grid .expanding-table--grid--row-details--content > div > img{
        height: 16px;
    }
}
@media screen and (min-width: 988px) {
    .seven-grid .cross{
        display: none;
    }
}
.seven-grid .cross{
    position: absolute;
    object-position: center;
    width: 40px;
    top: 12px;
    right: 12px;
    height: 40px;
    filter: unset;
    margin-right: -5px;
}
.expanding-table--header--for-seven-grid .expanding-table--header--team-info{
    flex-basis: calc(100% - 80px);
}
.expanding-table--header--for-seven-grid .expanding-table--header--expand-button{

}
.expanding-table--header--for-seven-grid .expanding-table--header--team-info span{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width: 700px) {
    .expanding-table--header--for-seven-grid .expanding-table--header--team-info span{
        font-size: 15px;
    }
}
@media screen and (max-width:988px){
    .competitions-group-header .expanding-table--header--team-info:first-child > div > span{
        flex-basis: calc(100% - 73px);
    }
}

.group-table--header h2{
    margin-bottom: 15px;
    margin-left: -1px;
}
.group-table--header .tags{
    gap: 10px;
}
@media screen and (max-width:988px){
    .group-table--header h2{
        margin-bottom: 8px;
    }
    /* .tournament-group--page-title-geomark{
        font-size: 2em;
    } */
}
.no-hoverable{
    cursor: default;
}
.location.no-hoverable{
    background: white;
}
.location.no-hoverable > h3{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
}




.types-filter-div-2-1 > div:nth-child(1) select,
.types-filter-div-2-1 > div:nth-child(1) .select,
.types-filter-div-2-1 > div:nth-child(1) input{
    width: 100%;
}
.types-filter-div-2-1 > div:nth-child(2) select,
.types-filter-div-2-1 > div:nth-child(2) .select,
.types-filter-div-2-1 > div:nth-child(2) input{
    width: 100%;
}
.types-filter-div-2-1 > div:nth-child(1){
    flex-basis: 50%;
}
.types-filter-div-2-1 > div:nth-child(1) > *{
    flex-basis: 50%;
}
.types-filter-div-2-1 > div:nth-child(2){
    flex-basis: 50%;
}
.types-filter-div-2-1 > div:nth-child(2) > *{
    flex-basis: calc(50% - 15px);
}


@media screen and (max-width: 1100px){
    .types-filter-div-2-1 > div:nth-child(1),
    .types-filter-div-2-1 > div:nth-child(2){
        flex-basis: 100%;
    }
    .types-filter.types-filter--wrap-column form.types-filter-div-2-1{
        flex-direction: column;
    }
    .types-filter.types-filter--wrap-column form.types-filter-div-2-1 > div{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .types-filter.types-filter--wrap-column form.types-filter-div-2-1 > div > *{
        flex-basis: calc(50% - 5px);
    }
}


@media screen and (max-width: 1100px) {
    .types-filter-div-2-2 select,
    .types-filter-div-2-2 .select,
    .types-filter-div-2-2 input{
        min-height: 47px!important;
    }
    .types-filter-div-2-1 select,
    .types-filter-div-2-1 .select,
    .types-filter-div-2-1 input{
        min-height: 47px!important;
    }
    .types-filter-div-3-2 select,
    .types-filter-div-3-2 .select,
    .types-filter-div-3-2 input{
        min-height: 30px!important;
    }
}

.type-details p{
    /* margin: 0px; */
    font-size: 2em;
}
.type-details p:first-of-type{
    margin-top: -0.25em;
}

.type-details p:last-of-type{
    margin-bottom: -0.25em;
}

.type-details--header h1{
    margin: 0px!important;
}
.type-details--header img{
    height: 96px;
    width: auto;
    object-fit: contain;
}
@media screen and (max-width: 988px) {
    .type-details p{
        font-size: 10px;
    }
    .type-details--header > .row{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 25px;
    }
}


.seven-grid .expanding-table--grid--row-details .table-scroller{
    padding-top: 3px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
}
@media screen and (max-width: 988px) {
    .seven-grid .expanding-table--grid--row-details .table-scroller{
        padding-top: 2px;
    }
    .seven-grid .expanding-table--header--tags > a::before{
        content: none;
    }
    .seven-grid .expanding-table--header--tags > a > span{
        background: white;
        -webkit-background-clip: text;
        /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
        -webkit-text-fill-color: transparent;
    }
    .seven-grid .geomark{
        background: var(--color-main-gradient);
        border: none;
    }
    .seven-grid .geomark > h3{
        color: white;
    }
    .seven-grid .geomark > img{
        filter: brightness(10);
    }
}

.control-n-button{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.control-n-button img{
    height: 75px;
}
.control-n-button > a:first-child img{
    transform: rotate(180deg);
}

@media screen and (min-width: 988px) {
    .control-n-button > div{
        max-width: calc(100% - 200px);
    }
}

@media screen and (max-width: 988px) {
    .control-n-button{
        justify-content: center;
        margin-top: 25px;
    }
    .control-n-button > a{
        display: none;
    }
}

.my-team--header{
    display: flex;
    flex-direction: row;
    gap:40px;
}
.my-team--header > img{
    height: 115px;
}
.my-team--header h2{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    font-size: 30px;
    margin: -0.25em 0px;
}
.my-team--header > div{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.my-team--header > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.my-team--header > div > div:first-child img{
    height: 32px;
    cursor: pointer;
}
.my-team--header > div > div:last-child > span:first-child{
    color: #2B2B2B7f;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 0.75em;
    text-transform: uppercase;
}
.my-team--header > div > div:last-child > span.member{
    color: #2b2b2b57;
    font-size: 15px;
    font-weight: 400;
    background-color: #F4F4F4;
    border-radius: 3em;
    padding: 10px 15px;
    line-height: 0.75em;
}
.my-team--header > div > div:last-child > span.member.active{
    background: var(--color-main-gradient);
    color: white;
}

@media screen and (max-width: 988px) {
    .my-team--header{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .my-team--header > img{
        height: 50px;
        width: 50px;
    }
    .my-team--header h2{
        font-size: 20px;
        text-align: center;
    }
    .my-team--header > div{
        gap: 10px;
    }
    .my-team--header > div > div{
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
    .my-team--header > div > div:first-child img{
        height: 16px;
    }
    .my-team--header > div > div:nth-child(2){
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .my-team--header > div > div:last-child > span:first-child{
        font-size: 10px;
    }
    .my-team--header > div > div:last-child > span:last-child{
        font-size: 10px;
        padding: 8px 10px
    }
    .my-team .col-md-12:first-child .expanding-table--header--tags{
        margin-top: 25px!important;
        margin-bottom: 25px!important;
        align-items: center;
        justify-content: center;
    }
    .my-team .col-md-12:first-child .expanding-table--header--tags > a:last-child{
        display: none;
    }

    .my-team .col-md-12{
        padding: 0px 1em;
    }
}
@media screen and (max-width: 700px){
    .my-team--header > div > div{
        flex-direction: column;
    }
}
@media screen and (min-width: 988px) {

    .my-team .col-md-12{
        padding: 0px;
    }
}

.my-team .expanding-table--header--tags > a{
    padding: 10px 15px;
    font-size: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;

}
.my-team .expanding-table--header--tags > a span{
    font-size: 10px;
    font-weight: 800;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.my-team .expanding-table--header--tags > a span img{
    height: 11px;
    width: 11px;
    transform: unset;
}
.my-team > .col-md-12:first-child{
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.pointer{
    cursor: pointer;
}

.my-team-buttons{
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
}
/* .my-team-buttons > a:first-child{
    display: none;
} */
.my-team-buttons > a:nth-child(1){
    flex-basis: 30%;
}
.my-team-buttons > a:nth-child(2){
    flex-basis: 70%;
}

/* .member-buttons > a:nth-child(2){
    flex-basis: 700px;
} */
/* .member-buttons > a:nth-child(3){
    display: none;
} */

@media screen and (max-width: 1300px) {
    .my-team-buttons{
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .my-team-buttons > a:first-child{
        display: flex;
    }
    .my-team-buttons > a{
        flex-basis: unset!important;
    }
}


.maintenance-container > div > div{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.maintenance-container > div > div > p{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    font-size: 20px;
    gap: 20px;
    height: 50px;
    margin: 0px;
    font-weight: 500;
}
.maintenance-container > div > div > p:first-child{
    margin-top: -15px;
}
.maintenance-container > div > div > p  >img{
    filter: brightness(10);
    width: 35px;
    object-fit: contain;
    object-position: center;
    margin-right: 0px;
    transform: none;
}
.maintenance-container > div > div > p:nth-child(1)  >img{
    height: 32px;
}
.maintenance-container > div > div > p:nth-child(2)  > img{
    height: 42px;
}

.error-code-container, .maintenance-container{
    display: flex;
    flex-direction: row;
    margin-top: 150px;
    min-height: calc(100vh - 300px);
}
.error-code-container > img,
.maintenance-container > img{
    width: 400px;
    height: 400px;
}
.error-code-container > div,
.maintenance-container > div{
    flex-basis: calc(100% - 400px);
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.error-code-container h1{
    font-size: 300px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 0.75em;
    margin: 0px;
    margin-top: -0.025em;
}
.error-code-container h2,
.maintenance-container h2{
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;
    margin-bottom: -0.25em;
}


@media screen and (max-width: 1150px) {
    .error-code-container > img, .maintenance-container > img{
        width: 300px;
        height: 300px;
    }
    .error-code-container > div, .maintenance-container > div{
        flex-basis: calc(100% - 300px);
        height: 400px;
    }
    .error-code-container h1{
        font-size: 250px;
    }
}
@media screen and (max-width: 988px) {
    .error-code-container, .maintenance-container{
        flex-direction: column-reverse;
        justify-content: start;
        align-items: baseline;
        gap:70px;
        margin-top: 0px;
        padding-top: 103px!important;
        align-items: center;
        text-align: center;
        min-height: calc(100vh);
    }
    .error-code-container > div{
        flex-basis: unset;
        height: unset;
        gap: 30px;
    }
    .error-code-container h1{
        font-size: 87px;
        min-height: 100px;
    }
    .error-code-container h2{
        font-size: 24px;
    }
    /* .maintenance-container{
        flex-direction: column-reverse;
        gap: 40px;
        padding-top: 60px!important;
        justify-content: start;
    } */
    .maintenance-container > img,
    .error-code-container > img{
        width: 50vw;
        height: auto;
        flex-basis: unset;
    }
    .maintenance-container > div > div > p  >img{
        flex-basis: 20px;
        width: 20px;
    }
    .maintenance-container > div > div > p:nth-child(1)  >img{
        height: 18px;
        transform: translateY(0.25em);
    }
    .maintenance-container > div > div > p:nth-child(2)  > img{
        height: 24px;
        margin-right: 5px;
    }
    .maintenance-container > div{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    .maintenance-container h2{
        font-size: 24px;
        text-align: center;
        /* margin-bottom: 40px; */
        min-height: 100px;
    }
    .maintenance-container > div > div > p:first-child{
        margin-top: 5px;
    }
    .maintenance-container > div > div > p:last-child > a{
        margin-left: -15px;
    }
    .maintenance-container > div > div > p{
        width: 70vw;
        height: fit-content;
        align-items: start;
        gap: 13px;
    }
    .maintenance-container{
        padding-bottom: 50px;
    }
    .maintenance-container > div > div{
        gap: 20px;
    }
}



@media screen and (max-width: 988px) {
    .margin-bot-minus.default-padding{
        padding-bottom: 2em!important;
    }
}

.polozhenie p{
    margin: 0px;
    color: #2B2B2B;
}
.polozhenie a{
    margin: 0px;
    display: block;
    color: #2B2B2B;
    margin-bottom: 1em;
    font-size: 30px;
}
.polozhenie a img{
    height: 1em;
    margin-right: 0.5em;
}
.auth-btn a{
    width: 902px;
    max-width: 100%;
    text-align: center;
}
@media screen and (max-width: 988px) {
    .polozhenie a{
        font-size: 2.5em;
    }
    .auth-btn a{
        width: 260px;
        max-width: 100%;
    }
}


.team-creation--info{
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 20px;
    row-gap: 15px;
    width: 700px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.team-creation--info > *{
    font-size: 15px;
    font-weight: 400;
}
.team-creation--info > *:nth-child(even){
    padding:20px;
    background-color: #f4f4f4;
    color: #2B2B2B;
    text-align: left;
    max-height: 60px;
    box-sizing: border-box;
}
.team-creation--info > *:nth-child(odd){
    color: #2B2B2B5f;
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    box-sizing: border-box;
}
@media screen and (min-width: 988px) {
    .team-creation--info > *:nth-child(even) > span{
        /* display: none; */
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(532px - 40px);
        /* overflow: hidden;
        white-space: nowrap;
        display: -webkit-box!important;
        -webkit-line-clamp: 1;
                line-clamp: 1;
        -webkit-box-orient: vertical; */
    }
}
@media screen and (max-width: 988px) {
    #team-creation-1 a.button-white-hollow{
        width: 100%;
        max-width: 100%;
    }
}

.default-select{
    width: 700px;
    max-width: 100%;
    font-size: 23px;
    height: 75px;
    text-transform: uppercase;
    padding:0px 2em;
    font-weight: 700;
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    /* clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */
    -webkit-text-fill-color: transparent;
    position: relative;
    outline: none;
    border: none;

    z-index: 2;
}
.default-select--container{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5em;
    background: var(--color-main-gradient);

    position: relative;
    width: 700px;
    max-width: 100%;
}
.default-select--container::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 5em;
    z-index: 0;
}
.default-select--container > img{
    content: "";
    position: absolute;
    right: 1.5em;
    top: 50%;
    height: 20px;
    width: 20px;
    background-image: url(/public/img/select_arrow_gradient.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    z-index: 3;
    transform: translateY(-50%);
    pointer-events: none;
}

.default-select option,
.default-select .option{
    color: #2B2B2B;
}
.default-select--container select:hover:focus + img
.default-select--container .select:hover:focus + img{
    transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width: 988px) {
    .team-creation--info{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 10px;
        width: 700px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 10px;
        font-size: 10px;
        box-sizing: border-box;
    }
    .team-creation--info > *:nth-child(odd){
        text-align: left;
        justify-content: start;
    }
    .team-creation--info > *:nth-child(even){
        padding: 8px;
        max-height: 47px;
    }
    .team-creation--info > *{
        font-weight: 500;
        font-size: 10px;
    }
    .default-select--container{
        width: calc(100% - 20px);
        box-sizing: border-box;
        font-size: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .default-select{
        font-size: 10px;
        max-height: 47px;
        font-weight: 800;
    }
    .reg-modal input[type="text"]{
        width: calc(100% - 20px);
        height: 47px;
        font-size: 10px;
        font-weight: 400;
        margin-bottom: 10px;
    }
}
.popup-footer, .popup-types-header{
    position: relative;
    overflow: hidden;
    z-index: 2;
    margin-left: -1px;
    margin-right: -1px;
    margin-top: -1px;
}
.popup-footer::before, .popup-types-header::before{
    position: absolute;
    content: "";
    background: var(--color-main-gradient);
    left:-2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    z-index: -1;
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: -2px;
    margin-top: -2px;
}

.popup-footer{
    margin-bottom: -2px;
}
.popup-types-header{
    margin-top: -1px;
}

@media screen and (max-width: 988px) {
    /* .expanding-table--header--team-info */
    .expanding-table--header{
        position: relative;
    }
    .expanding-table--header.graylined::before{
        content: "";
        position: absolute;
        top: 60%;
        left: 0px;
        height: 2px;
        width: 100%;
        background: #F4F4F4;
    }
}

.popup-types-header.pth-white{
    background: white;
    min-height: 50px;
    margin-bottom: 0px;
}
.popup-types-header.pth-white::before{
    content: none;
}



/* Специально для сафари */
@supports (-webkit-touch-callout: none) {
    tr.selected::after{
        content: none!important;
    }
    tr.selected td{
        position: relative;
        border: 2px solid var(--color-red);
        border-right: none;
        border-left: none;
    }
    tr.selected td:first-child{
        border-left: 2px solid var(--color-red);
    }
    tr.selected td:last-child{
        border-right: 2px solid var(--color-red);
    }
    tr.selected::after{
        content: none!important;
    }
}




.button-gradient-hollow.completed{
    background: #F4F4F4;
}
.button-gradient-hollow.completed::before{
    background-color: white;
}
.button-gradient-hollow.completed span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.expanding-table--header--expand-button.completed div img{
    filter:grayscale(1) brightness(0.5);
}

.lk-profile-info > div .lk-profile-info--pilots{
    background: #28235B;
    display: flex;
    flex-direction: row;
    align-items: center;

    border-radius: 10em;
    padding: 1.25em 1.5em;
    gap: 10px;
}
.lk-profile-info > div .lk-profile-info--pilots > span{
    background-color: transparent;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 0px;
}
.lk-profile-info > div .lk-profile-info--pilots > img{
    height: 17px;
}



/* Баннер на главной */
.mbanner-2{
    background: url(/public/img/banner_2.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -1px;
}
.mbanner-2 > div.container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
}
.mbanner-2 > div.container > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-basis: 50%;
    height: 100%;
    gap: 30px;
}
.mbanner-2 > div.container > div > img{
    width: 80%;
    height: calc(1300px * 0.4);
    max-height: calc(100vh - 75px - 120px - 150px);
    /* height: auto; */
    object-fit: contain;
    object-position: center;
}
.mbanner-2 > div.container > div > a{
    border: 2px solid white;
    font-size: 30px;
    font-weight: 800;
    border-radius: 138px;
    text-transform: uppercase;
    min-height: 75px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 28px;
    max-width: 100%;
    cursor: pointer;

    transition: all 0.25s ease-in-out;
}
.mbanner-2 > div.container > div > a:hover{

    -webkit-box-shadow: 0px 4px 8px 8px rgba(255, 255, 255, 0.15);
    -moz-box-shadow: 0px 4px 8px 8px rgba(255, 255, 255, 0.15);
    box-shadow: 0px 4px 8px 8px rgba(255, 255, 255, 0.15);
}
@media screen and (max-width: 1350px){
    .mbanner-2 > div.container > div > img{
        width: 80%;
        height: calc(100vh * 0.4);
        /* height: auto; */
        object-fit: contain;
        object-position: center;
    }
    .mbanner-2 > div.container{
        min-height: fit-content;
    }
}

.mbanner-2 > div.container > div:first-child > a{
    background: var(--color-main-gradient);
}

@media screen and (max-width: 1100px) {
    .mbanner-2 > div.container > div > a{
        font-size: 20px;
    }
}
@media screen and (orientation:portrait) {
    .mbanner-2 > div.container > div:first-child{
        padding-top: 0px!important;
        padding-bottom: 0px!important;
    }
    .mbanner-2{
        background: url(/public/img/banner_2_mobile.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .mbanner-2 > div.container{
        flex-direction: column;
        gap: 20px;
        padding: 0px;
        min-height: unset;
    }
    .mbanner-2 > div.container > div:last-child{
        background: url(/public/img/banner_2_mobile_bottom.svg);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 50px!important;
        width: 100%;
    }
    .mbanner-2 > div.container > div > img{
        width: 100%;
        max-width: 250px;
        max-height: calc(25vh);
        height: auto;
        object-fit: contain;
        object-position: center;
    }
}

@media screen and (max-width: 988px){
    .mbanner-2 > div.container > div > a{
        font-size: 15px;
        min-height: 60px;
    }
}




/* Баннер на главной 3 */
.mbanner-3{
    background: url(/public/img/banner_3.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -1px;
}
.mbanner-3 > div.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    min-height: calc(100vh - 100px);
}
.mbanner-3 > div.container .mbanner-3 > div.container{
    min-height: unset;
}
.mbanner-3 > div.container > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 20px;
    flex-basis: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: 30px;
    padding-bottom: 120px!important;
}
.mbanner-3 > div.container > div > img{
    width: 80%;
    /* height: calc(1300px * 0.4); */
    max-height: calc(100vh - 75px - 120px - 150px);
    /* height: auto; */
    object-fit: contain;
    object-position: center;
}
.mbanner-3 > div.container > div > img:nth-child(2){
    width: 147px;
    height: auto;
}
@media screen and (max-width: 988px) {
    .mbanner-3 > div.container > div > img{
        max-height: calc(100vh - 75px - 100px);
        height: calc(100vh * 0.5);
    }
    .mbanner-3 > div.container > div > img:nth-child(2){
        width: 147px;
        height: auto;
    }
}
.mbanner-3 > div.container > div > a{
    border: 2px solid white;
    font-size: 30px;
    font-weight: 800;
    border-radius: 138px;
    text-transform: uppercase;
    min-height: 75px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 28px;
    max-width: 100%;
    cursor: pointer;

    transition: all 0.25s ease-in-out;
}
.mbanner-3 > div.container > div > a:hover{

    -webkit-box-shadow: 0px 4px 8px 8px rgba(255, 255, 255, 0.15);
    -moz-box-shadow: 0px 4px 8px 8px rgba(255, 255, 255, 0.15);
    box-shadow: 0px 4px 8px 8px rgba(255, 255, 255, 0.15);
}
@media screen and (max-width: 1350px){
    .mbanner-3 > div.container > div > img{
        width: 80%;
        /* height: calc(100vh * 0.4); */
        /* height: auto; */
        object-fit: contain;
        object-position: center;
    }
    .mbanner-3 > div.container{
        min-height: fit-content;
    }
    .mbanner-3 > div.container > div > img:nth-child(2){
        width: 120px;
    }
}


@media screen and (max-width: 1100px) {
    .mbanner-3 > div.container > div > a{
        font-size: 20px;
    }
}
@media screen and (orientation:portrait) {
    .mbanner-3 > div.container > div:first-child{
        padding-top: 0px!important;
        padding-bottom: 0px!important;
    }
    .mbanner-3{
        background: url(/public/img/banner_3_mobie.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .mbanner-3 > div.container{
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0px;
        min-height: unset;
    }
    .mbanner-3 > div.container > div{
        gap: 15px;
    }
    .mbanner-3 > div.container > div > img:nth-child(2){
        width: 100px;
    }
    .mbanner-3 > div.container > div:last-child{
        width: 100%;
        padding-bottom: 60px!important;
    }
    .mbanner-3 > div.container > div > img{
        width: 100%;
        max-width: 250px;
        max-height: calc(25vh);
        height: auto;
        object-fit: contain;
        object-position: center;
    }
}
@media screen and (orientation:portrait) and (max-width: 988px){
    .mbanner-3 > div.container > div:last-child{
        width: 100%;
        padding-bottom: 25px!important;
    }
}

@media screen and (max-width: 988px){
    .mbanner-3 > div.container > div > a{
        font-size: 15px;
        min-height: 60px;
    }
}

.select{
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.select > .option{
    width: calc(100% - 4em);
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    color: white;
}
.select > .select-list{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left:0%;
    width: 100%;
    height: auto;
    max-height: min(500px, 90vh);
    overflow: auto;
    z-index: 9999;
}
.select.active > .select-list{
    display: block;
    gap: 8px;
}
.select > .select-list .option{
    font-size: 1em;
    border-radius: 2em;
    padding: 1em;
    margin-bottom: 8px;
    display: block;
    box-sizing: border-box;
    color: white;
    background: var(--color-main-gradient);
    border: 1px solid white;
    /* background: var(--color-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    cursor: pointer;
}
.select.active{
    background-color: white;
}
.select.active > .option{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.select .option{
    line-height: 1em;
}

/* @media screen and (orientation: landscape){
    .select.active::before{
        content: "";
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #000000af;
        backdrop-filter: blur(4px);
        max-height: unset;
        box-sizing: border-box;
    }
} */
@media screen and (orientation: portrait) {
    .select > .select-list{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #000000af;
        backdrop-filter: blur(4px);
        max-height: unset;
        padding: 10vh 5vw;
        box-sizing: border-box;
    }
}

.mbanner-3 .slider-controls{
    display: flex;
}


.pnd ul{
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: 0px;
}
.pnd ul ul{
    padding-left: 1em;
}

.pnd li li::marker{
    content: "- ";
}
.pnd ul > li:not(:last-child) {
    margin-bottom: 1em;
}
.pnd ul > li > ul > li:not(:last-child) {
    margin-bottom: 0px;
}
.pnd a{
    text-decoration: underline;
    font-weight: bold;
}
.pnd h1{
    line-height: 1em;
}

.lk-manager--my-team{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}
.lk-manager--my-team > div{
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    text-transform: uppercase;
    border-radius: 20px;
    background: var(--color-main-gradient);
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    column-gap: 20px;
}
.lk-manager--my-team > div::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 20px;
    background: white;
}
.lk-manager--my-team > div > div{
    z-index: 2;
}
.lk-manager--my-team > div h2{
    color: #2B2B2B;
}
.lk-manager--my-team > div > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lk-manager--my-team > div > div:nth-child(1) h2{
    font-size: 35px;
    line-height: 1em;
    margin: 0px;
}
.lk-manager--my-team > div > div:nth-child(1) span{
    background: var(--color-main-gradient);
    color: white;
    border-radius: 2em;
    padding: 0.25em 1em;
    width: fit-content;
}
.lk-manager--my-team > div > div:nth-child(2){
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.lk-manager--my-team > div > div:nth-child(2) h2{
    font-size: 35px;
    line-height: 1em;
    letter-spacing: 0.1em;
}
.lk-manager--my-team > div > div:nth-child(2) img{
    width: 66px;
}
@media screen and (max-width: 1300px){
    .lk-manager--my-team > div{
        grid-template-columns: 2fr 1fr 2fr;
    }
    .lk-manager--my-team a.button-gradient-hollow span{
        font-size: 0.75em;
    }
}
@media screen and (max-width: 900px){
    .lk-manager--my-team > div{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }
    .lk-manager--my-team > div > div:nth-child(2) img{
        width: 41px;
    }
    .lk-manager--my-team > div > div:nth-child(1){
        flex-basis: calc(70% - 10px);
    }
    .lk-manager--my-team > div > div:nth-child(2){
        flex-basis: 30%;
        gap: 10px;
    }
    .lk-manager--my-team > div > div:nth-child(3){
        flex-basis: 100%;
        height: 50px;
    }
    .lk-manager--my-team > div > div:nth-child(1) h2,
    .lk-manager--my-team > div > div:nth-child(2) h2{
        font-size: 20px;
    }
    .lk-manager--my-team a.button-gradient-hollow span{
        font-size: 1em;
    }
}

.docs-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding-top: 60px;
}
.docs-container > div{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 206px;
    column-gap: 20px;
    align-items: center;
    border-radius: 20px;
    position: relative;
    padding: 20px;
    box-sizing: border-box;

    background: var(--color-main-gradient);
}
.docs-container > div::before{
    content: "";
    position: absolute;
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    background: white;
    border-radius: 20px;
    z-index: 0;
}
.docs-container > div > div{
    width: 100%;
    display: grid;
    grid-template-columns: 35px 1fr;
    column-gap: 20px;
    align-items: center;
    z-index: 1;
}

.docs-container > div > div{
    color: #2B2B2B;
    font-family: "Pragmatica Extended";
    font-size: 35px;
    text-transform: uppercase;
    font-weight: bold;
}
.docs-container > div > div > img{
    width: 35px;
}
.docs-container > div > a{
    font-family: "Pragmatica Extended";
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    margin:0px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 206px;
    box-sizing: border-box;
    height: 62px;

    border-radius: 138px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--color-main-gradient);
    z-index: 1;
    transition: all 0.25s ease-in-out;
}
.docs-container > div > a > span{
    background: var(--color-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


    z-index: 99;
}
.docs-container > div > a::before{
    content: "";
    position: absolute;
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    background: white;
    border-radius: 138px;
    transition: all 0.25s ease-in-out;
}

.docs-container > div > a:hover > span{
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.docs-container > div > a:hover::before{
    opacity: 0;
}
@media screen and (max-width: 1300px) {
    .docs-container > div > div{
        font-size: 25px;
        column-gap: 10px;
        grid-template-columns: 25px 1fr;
    }
    .docs-container > div{
        column-gap: 10px;
        grid-template-columns: 1fr 150px;
    }
    .docs-container > div > div > img{
        width: 25px;
    }
    .docs-container > div > a{
        font-size: 15px;
        height: 48px;
        width: 150px;
    }
}
@media screen and (max-width: 750px){
    .docs-container > div{
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .docs-container > div > a{
        font-size: 12px;
        height: 47px;
        width: 100%;
    }
    .docs-container > div > div{
        font-size: 20px;
    }
    .docs-container > div > div > img{
        width: 17px;
    }
}

.slider .slider-container .slide > *,
.slider-3 .slide > *{
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.slider .slider-container .slide > * span:nth-child(3),
.slider-3 .slide > * span:nth-child(3){
    display: block;
    order: -1;
    font-size: 0.5em;
    line-height: 1.25em;
    border-radius: 100px 0px 0px 100px;

    padding: 0.5em 1em;
    text-transform: uppercase;
    height: auto;
    width: fit-content;
    margin-left: auto;
    margin-right: -3.75px;
    margin-bottom: auto;
    margin-top: 1px;

    text-align: end;
}
.slider-3 .slide > * span:nth-child(3){
    margin-top: 7px;
}
@media screen and (max-width: 1300px) and (orientation: portrait){
    .slider .slider-container .slide > * span:nth-child(3),
    .slider-3 .slide > * span:nth-child(3){
        margin-right: -2px;
    }
}
@media screen and (max-width: 1100px) {
    .slider .slider-container .slide > * span:nth-child(3){
        font-size: 0.75em;
        padding: 0.5em 0.75em;
        margin-right: -2px;
    }
}
@media screen and (max-width: 988px) {
    .slider-3 .slide > * span:nth-child(3){
        font-size: 0.75em;
        padding: 0.5em 0.75em;
        margin-right: -2px;
    }
}