:root{
    --blue-color:#2085DE;
    --light-blue-color:#26CCF6;
    --green-color:#2DB98F;
    --magenta-color: #AF1EBD;

    --padding: 20px;
    --radius: 5px;

    --greybox-gradient: linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    --darker-gradient: linear-gradient(118deg, rgba(80, 80, 80, 0.7) 0%, rgba(29, 29, 29, 0.35) 100%);

    --gray-bg-gradient: #434343 linear-gradient(118deg, #bebebe63 0%, #63636300 82%, #8f8f8f2d 100%);

    --gap: 20px;


    --avatar-bg: #434343 linear-gradient(-45deg, #40414233 0%, #63636300 18%, #FFFFFF33 100%);
}
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.offset-anchor{
    position: relative;
}
#data{
    padding: 20px;
    position: fixed;
    top: 0px;
    left: 0px;
    color: white;

    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100vh;
    width: 400px;
    overflow: auto;
    box-sizing: border-box;

    display: none;
}
#data div{
    padding-left: 20px;

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

#data p{
    margin: 0px;
    margin-top: 10px;
}

/* width */
*:not(.default-scrollbar)::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* Track */
*:not(.default-scrollbar)::-webkit-scrollbar-track {
    background: #757575;
    border: 1px solid #505050;
    box-sizing: border-box;
}

/* Handle */
*:not(.default-scrollbar)::-webkit-scrollbar-thumb {
    background: white;
    border: 2px solid #757575;
    box-sizing: border-box;
}

body{
    font-family: "Roboto";
    font-size: 15px;
    letter-spacing: 0px;
    color: white;
    margin: 0px;

    background: black;

    position: relative;
    scroll-behavior: smooth;
    letter-spacing: 0px;

    /* padding-top: 160px; */
}

a{
    color: inherit;
    text-decoration: none;
}
h4{
    font-family: "spaceranger";
    font-size: 40px;
    margin: 0px;
    font-weight: 400;
}
h3{
    font-family: "spaceranger";
    font-size: 20px;
    margin: 0px;
    font-weight: 400;

}
h2{
    font-family: "spaceranger";
    font-size: 32px;
    margin: 0px;
    font-weight: 400;

}
h1{
    font-family: "spaceranger";
    font-size: 45px;
    margin: 0px;
    font-weight: 400;

}
h5{
    font-family: "spaceranger";
    font-size: 32px;
    margin: 0px;
    font-weight: 400;
}
@media screen and (max-width: 1312px) {
    h4{
        font-size: 20px;
    }
    h3{
        font-size: 15px;
    }
    body{
        font-size: 12px;
    }
    h1{
        font-size: 30px;
    }
    h2{
        font-size: 24px;
    }
    :root{
        --gap: 12px;
        --padding: 12px;
    }
    h5{
        font-size: 20px;
    }
}
@media screen and (max-width: 720px){
    h1{
        font-size: 20px;

    }
    h2{
        font-size: 26px;
    }
}
@media screen and (min-width: 720px){
    .mobile-only{
        display: none!important;
    }
}

.bg-stars{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
.bg-stars > div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.bg-stars > div:nth-child(1){
    background-image: url(/public/img/bg_1.svg);
    background-position: top left;
    background-size: 50% auto;
    background-repeat: repeat;
    animation: 3s infinite start_anim_1;
    filter: blur(1px);
}
.bg-stars > div:nth-child(2){
    background-image: url(/public/img/bg_2.svg);
    background-position: top left;
    background-size: 50% auto;
    background-repeat: repeat;
    animation: 3s infinite start_anim_1;
    animation-delay: -1s;
    filter: blur(1px);
}
.bg-stars > div:nth-child(3){
    background-image: url(/public/img/bg_3.svg);
    background-position: top left;
    background-size: 50% auto;
    background-repeat: repeat;
    animation: 5s infinite start_anim_1;
    animation-delay: -0.5s;
    filter: blur(1px);
}

@keyframes start_anim_1 {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}
@keyframes start_anim_2 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}
@media screen and (max-width: 720px) {
    .bg-stars > div:nth-child(1),
    .bg-stars > div:nth-child(2),
    .bg-stars > div:nth-child(3){
        filter: none;
    }
}

.container{
    width: 100%;
    max-width: 1312px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media screen and (max-width: 1312px) {
    .container{
        max-width: 720px;
    }
}
@media screen and (max-width: 720px){
    .container{
        max-width: calc(100% - 24px);
    }
}

body > content{
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}
@media screen and (max-width: 720px) {
    body > content{
        min-height: calc(100vh - 130px);
    }
}
/* content{
    background: linear-gradient(0deg, rgba(188, 188, 188, 0.07) 0%, rgba(196, 196, 196, 0.05) 100%);
} */

.blue{
    color: #2C98F7;
}
header{
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    height: 80px;
    width: calc(100% - (var(--padding) * 2));
    max-width: 1312px;
    border-radius: var(--radius);
    padding: 0px var(--padding);
    border-image-source: linear-gradient(118deg, rgba(12,255,0,1) 0%, rgba(255,0,0,1) 100%);
    background: linear-gradient(118deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr) 85px repeat(3, 1fr);
    align-items: center;
    column-gap: 20px;
    box-sizing: border-box;
    z-index: 999;
}
header > a > img{
    width: 85px;
    height: auto;
}
header > a{
    text-align: center;
    color: white;
    opacity: 0.75;
    font-size: 20px;
}
body > .header{
    background: url(/public/img/header_bg.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;

    height: 90px;
    /* position: absolute;
    top: 0px;
    left: 50%; */
    /* transform: translateX(-50%); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 75px;
    margin-bottom: 20px;

    position: relative;
    z-index: 99;
}
@media screen and (min-width: 1312px) {
    body > .header.active{
        margin-bottom: calc(20px + 33px);
    }
}
@media screen and (min-width: 720px) {
    body > .header.active{
        margin-bottom: calc(24px + 20px);
    }
}
body > .header > div:nth-child(1){
    width: 100%;
    box-sizing: border-box;
    padding: 0px 84px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
body > .header > div:nth-child(1) > a:nth-child(1) img{
    height: 77px;
    width: 84px;
    image-rendering: pixelated;
}
body > .header > div:nth-child(1) > a:not(:nth-child(1)){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 18px;
    height: 37px;
    padding: 0px 8px;
    min-width: 87px;
    border-radius: 8px;
    border: 1px solid #9F9F9F;
    cursor: pointer;

    background: #434343 linear-gradient(135deg, #ffffff4b 0%, #63636300 82%, #8F8F8F4b 100%);

    -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
    -moz-box-shadow:  0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;;
    box-shadow:  0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;;
}

body > .header > div:nth-child(1) > a.profile{
    min-width: 37px;
    width: 37px;
}
body > .header > div:nth-child(1) > a.profile > img{
    height: 65%;
}

body > .header.active > div:nth-child(1) > a:nth-child(2){
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
}

body > .header .walkin-text{
    height: 37px;
    position: relative;



    -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
    -moz-box-shadow:  0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
    box-shadow:  0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
    border: 1px solid #9F9F9F;

    background: var(--gray-bg-gradient);
    border-radius: 5px;
    padding: 0px 20px;

    display: grid;
    grid-template-columns: 54px 1fr 114px;
    column-gap: 8px;
    align-items: center;
}
body > .header .walkin-text > div:nth-child(1),
body > .header .walkin-text > div:nth-child(2),
body > .header .walkin-text > div:nth-child(3) > div{
    background: black url(/public/img/header--bg-lines.png);
    background-size: calc(100% - 6px) 100%;
    background-repeat: no-repeat;
    background-position: center center;

    height: 20px;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 0px 3px;

    line-height: 1em;

    font-family: "spaceranger";
    font-size: 15px;
    line-height: 1em;
    text-transform: uppercase;
    color: #2C98F7;
    text-decoration: none!important;
}
body > .header .walkin-text > div:nth-child(2){
    /* width: 100%; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body > .header .walkin-text > div:nth-child(2)::after{
    content: "---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
    position: relative;
    opacity: 0;
    width: 100%;
}
body > .header .walkin-text > div:nth-child(2) > *{
    width: fit-content;
    transition: all 0.5s linear;
}
body > .header .walkin-text > div:nth-child(1),
body > .header .walkin-text > div:nth-child(3) > div{
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
body > .header .walkin-text > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
}
body > .header .walkin-text > div:nth-child(3){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
body > .header .walkin-text > div:nth-child(3) > div{
    width: 58px;
}

body > .header .walkin-text > div:nth-child(3) > img{
    height: 20px;
    width: 20px;
    border-radius: 200px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 5px;
    box-sizing: border-box;
    background: var(--gray-bg-gradient);
    cursor: pointer;
}
body > .header .walkin-text > div:nth-child(3) > img:nth-child(1){
    transform: rotate(270deg);
}

body > .header .walkin-text > div:nth-child(3) > img:nth-child(3){
    transform: rotate(90deg);
}
body > .header .walkin-text > div:nth-child(3) > img.disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
body > .header > div:nth-child(2){
    position: absolute;
    top: calc(100% - 5px);

    /* z-index: -1; */
    left: 50%;
    transform: translate(-50%, 0%);
    width: calc(100% - 100px);
    height: 33px;
    background: url(/public/img/header--menu.svg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0px 20px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    transition: all 0.15s ease-in-out;
}
body > .header:not(.active) > div:nth-child(2){
    display: none;
}
body > .header > div:nth-child(2) a{
    cursor: pointer;
    text-decoration: none;
    color: white;
    font-size: 12px;

    transition: all 0.15s ease-in-out;
}
body > .header > div:nth-child(2) .blue,
body > .header > div:nth-child(2) a:hover{
    color: #2C98F7;
}

@media screen and (max-width: 1312px) {
    body > .header .walkin-text{
        /* width: 413px; */
        height: 22px;
        border-radius: 5px;
        grid-template-columns: 30px 1fr 60px;
        column-gap: 5px;
        padding: 0px 10px;
    }
    body > .header > div:nth-child(1) > a:not(:nth-child(1)){
        font-size: 10px;
        min-width: 50px;
        height: 22px;
        border-radius: 5px;
    }
    body > .header > div:nth-child(1) > a.profile{
        min-width: 22px;
        width: 22px;
        padding: 0px;
    }
    body > .header > div:nth-child(1) a:nth-child(1) > img{
        width: 50px;
        height: 45px;
    }
    body > .header > div:nth-child(1){
        padding: 0px 60px;
        gap: 12px;
    }
    body > .header .walkin-text > div:nth-child(1), body > .header .walkin-text > div:nth-child(2), body > .header .walkin-text > div:nth-child(3) > div{
        font-size: 8px;
        height: 11px;
    }
    body > .header .walkin-text > div:nth-child(3) > img{
        height: 10px;
        width: 10px;
        padding: 2px;
        box-shadow: none;
        border: 1px solid rgba(119, 119, 119, 0.7);
    }
    body > .header{
        height: 59px;
        background: url(/public/img/header_bg_tablet.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center bottom;
        /* margin-bottom: 50px; */
        margin-bottom: 24px;
    }

    body > .header > div:nth-child(2){
        height: 20px;
    }
    body > .header > div:nth-child(2) a{
        font-size: 7px;
    }
}

@media screen and (min-width: 720px){
    .mobile-header{
        display: none;
    }
}
@media screen and (max-width: 720px){
    body > .header{
        display: none;
    }
    body{
        padding-top: 108px;
    }
    .mobile-header{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        max-width: 100%;
        z-index: 10000;

        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-header > div:nth-child(1){
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: url(/public/img/mobile-header-bg-2.svg);
        background-size: 100% auto;
        background-position: center bottom;
        border-radius: 5px;
    }
    .mobile-header > div:nth-child(1) > a{
        height: 54px;
        width: 54px;
        box-sizing: border-box;
    }
    .mobile-header > div:nth-child(1) > a{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .mobile-header > div:nth-child(1) > a:nth-child(1) > img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
    .mobile-header > div:nth-child(1) > a.profile{
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #9F9F9F;
        cursor: pointer;
        background: #434343 linear-gradient(135deg, #ffffff4b 0%, #63636300 82%, #8F8F8F4b 100%);
        -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        -moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
    }
    .mobile-header > div:nth-child(1) > a.profile > img{
        width: 60%;
        height: 60%;
        object-fit: contain;
        object-position: center;
    }
    .mobile-header > div:nth-child(1) > a:last-child:not(.profile){
        border-radius: 100px 5px 100px 100px;
        border: 1px solid #9F9F9F;
        background: #434343 linear-gradient(135deg, #ffffff4b 0%, #63636300 82%, #8F8F8F4b 100%);
        -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        -moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
    }
    .mobile-header > div:nth-child(1) > a:last-child:not(.profile)::after{
        content: "";
        display: block;
        width: 29px;
        height: 50%;
        background: url(/public/img/menu-burger.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .mobile-header.active > div:nth-child(1) > a:last-child:not(.profile){
        background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    }
    .mobile-header.active > div:nth-child(1) > a:last-child:not(.profile)::after{
        background: url(/public/img/menu-cross.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .mobile-header.active{
        height: 100%;
    }

    .mobile-header:not(.active) > div:not(:nth-child(1)){
        display: none;
    }
    .mobile-header.active > div:nth-child(2){
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0px 12px;
    }


    .mobile-header .walkin-text{
        height: 41px;
        position: relative;



        -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
        -moz-box-shadow:  0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
        box-shadow:  0px 0px 8px 0px rgba(255, 255, 255, 0.32),  0px 2px 2px 0px black;
        border: 1px solid #9F9F9F;

        background: var(--gray-bg-gradient);
        border-radius: 5px;
        padding: 0px 10px;

        display: grid;
        grid-template-columns: 49px 1fr 99px;
        column-gap: 5px;
        align-items: center;
    }
    .mobile-header .walkin-text > div:nth-child(1),
    .mobile-header .walkin-text > div:nth-child(2),
    .mobile-header .walkin-text > div:nth-child(3) > div{
        background: black url(/public/img/header--bg-lines.png);
        background-size: calc(100% - 6px) 100%;
        background-repeat: no-repeat;
        background-position: center center;

        height: 19px;
        border-radius: 2px;
        box-sizing: border-box;
        padding: 0px 3px;

        line-height: 1em;

        font-family: "spaceranger";
        font-size: 12px;
        line-height: 1em;
        text-transform: uppercase;
        color: #2C98F7;
        text-decoration: none!important;
    }
    .mobile-header .walkin-text > div:nth-child(2){
        /* width: 100%; */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-header .walkin-text > div:nth-child(2) > span{
        width: fit-content;
        transition: all 0.5s linear;
    }
    .mobile-header .walkin-text > div:nth-child(1),
    .mobile-header .walkin-text > div:nth-child(3) > div{
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .mobile-header .walkin-text > div:nth-child(2){
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
    }
    .mobile-header .walkin-text > div:nth-child(2)::after{
        content: "---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
        position: relative;
        opacity: 0;
        width: 100%;
    }
    .mobile-header .walkin-text > div:nth-child(3){
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .mobile-header .walkin-text > div:nth-child(3) > div{
        width: 58px;
    }

    .mobile-header .walkin-text > div:nth-child(3) > img{
        height: 20px;
        width: 20px;
        border-radius: 200px;
        padding: 5px;
        box-sizing: border-box;
        background: var(--gray-bg-gradient);
        cursor: pointer;
        box-shadow: none;
        border: 1px solid rgba(119, 119, 119, 0.7);
    }
    .mobile-header .walkin-text > div:nth-child(3) > img:nth-child(1){
        transform: rotate(270deg);
    }

    .mobile-header .walkin-text > div:nth-child(3) > img:nth-child(3){
        transform: rotate(90deg);
    }
    .mobile-header .walkin-text > div:nth-child(3) > img:nth-child(1).disabled,
    .mobile-header .walkin-text > div:nth-child(3) > img:nth-child(3).disabled{
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mobile-header.active{
        background: url(/public/img/mobile-header-bg.png);
        background-size: 100% 100%;
        background-position: center center;
    }
    .mobile-header.active > div:nth-child(2) > a{
        height: 37px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #9F9F9F;
        cursor: pointer;
        background: #434343 linear-gradient(135deg, #ffffff4b 0%, #63636300 82%, #8F8F8F4b 100%);
        -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        -moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px black;
        font-size: 18px;
    }
    .mobile-header.active > div:nth-child(1){
        background: none;
    }
    .mobile-header.active > div:nth-child(2) > div:nth-child(3){
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%); */
        background: #161618 linear-gradient(283.92deg, rgba(255, 255, 255, 0.08) 16.95%, rgba(255, 255, 255, 0.08) 37.73%, rgba(255, 255, 255, 0) 66.73%, rgba(255, 255, 255, 0.08) 91.85%, rgba(255, 255, 255, 0.08) 91.86%);

        border-radius: 6px;
        padding: 10px 15px;
        padding-top: 18px;
        margin-top: -18px;
        border: 1px solid rgba(119, 119, 119, 0.7);
        font-size: 20px;
    }
    .mobile-header.active > div:nth-child(2) > div:nth-child(3) a{
        text-decoration: none;
        color: white;
        padding: 6px;
    }
    .mobile-header.active > div:nth-child(2) > div:nth-child(3) .blue{
        color: #2C98F7;
        background: #232A3A;
    }
}

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

    .mobile-header > div:nth-child(1){
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: url(/public/img/mobile-header-bg-2.svg);
        background-size: auto 101%;
        background-repeat: no-repeat;
        background-position: center bottom;
        border-radius: 5px;
    }
}


footer{
    position: relative;
    margin-top: 40px;
}
@media screen and (max-width: 1312px) {
    footer{
        margin-top: 24px;
    }
}
@media screen and (max-width: 720px) {
    footer{
        margin-top: 30px;
    }
}
footer::before{
    content: "";
    position: absolute;
    width: 100vw;
    height: 261px;
    bottom: 0px;
    left: 50%;
    transform: translateX(calc(-50% - 5px));
    z-index: 5;
    background: url(/public/img/footer-bg.svg);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
footer .container{
    height: 178px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 120px;
    padding-bottom: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}
footer .container > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    gap: 20px;
    font-size: 20px;
}
footer a{
    text-decoration: none;
}
footer .container > div:nth-child(2) > div:nth-child(3) a img,
footer .container > div:nth-child(1) a img{
    height: 100%;
    width: auto;
    /* filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.32)); */
}
footer .container > div:nth-child(1) a{
    height: 50px;
    width: auto;

    /* filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.32)); */
    box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px rgba(0, 0, 0, 1);
    border-radius: 100px;
}
footer .container > div:nth-child(2){
    text-align: end;
}
footer .container > div:nth-child(2) > div:nth-child(1){
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    flex-wrap: wrap;
    width: min-content;
    justify-content: end;
}
footer .container > div:nth-child(2) > div:nth-child(1) > *{
    font-size: 20px;
    opacity: 0.5;
}
footer .container > div:nth-child(2) > div:nth-child(1) > *:nth-child(3){
    width: 100%;
}
footer .container > div:nth-child(2) > div:nth-child(2){
    display: none;
}
footer .container > div:nth-child(2) > div:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
footer .container > div:nth-child(2) > div:nth-child(3) a{
    height: 40px;
    width: auto;

    box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px rgba(0, 0, 0, 1);
    border-radius: 100px;
}
@media screen and (max-width: 1312px) {
    footer::before{
        background: url(/public/img/footer-bg-tablet.svg);
        background-position: center;
        background-size: auto 100%;
        background-repeat: no-repeat;
        pointer-events: none;
        width: 100vw;
        height: 250px;
    }
    footer .container{
        height: 99px;
        padding: 0px 70px;
        padding-bottom: 20px;
    }
    footer .container > div:nth-child(2) > div:nth-child(3) a,
    footer .container > div:nth-child(1) a{
        height: 30px;
    }
    footer .container > div:nth-child(2) > div:nth-child(1) > *{
        font-size: 10px;
    }
    footer .container > div{
        gap: 12px;
    }

}
@media screen and (max-width: 720px) {
    footer::before{
        background: url(/public/img/footer-bg-mobile.svg);
        background-position: center top;
        background-size: 100% auto;
        background-repeat: no-repeat;
        pointer-events: none;
        width: 100vw;
        height: 105.12820vw;
        bottom: unset;
        top: 0px;
        z-index: 0;
        transform: translateX(-50%);
    }

    footer .container{
        height: 105.12820vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        padding: 0px 9vw;
    }
    footer .container > div{
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    footer .container > div:nth-child(1) a:nth-child(1) {
        height: 30px;
    }
    footer .container > div:nth-child(2) > div:nth-child(3) a{
        height: 45px;
    }
    footer .container > div:nth-child(2){
        text-align: center;
    }
    footer .container > div:nth-child(2) > div:nth-child(1) > *{
        font-size: 15px;
    }
    footer .container > div:nth-child(2) > div:nth-child(1){
        justify-content: center;
    }
    footer .container > div:nth-child(2) > div:nth-child(2){
        display: block;
    }
    footer .container > div:nth-child(2) > div:nth-child(2) .button{
        padding-left: var(--gap);
        padding-right: var(--gap);
    }
    footer .container > div:nth-child(2) > div:nth-child(3){
        flex-direction: row;
    }

}

.index-banner{
    position: relative;
    /* z-index: -1; */
    margin-bottom: -135px;
    min-height: 1030px;
    overflow: hidden;
    margin-top: -110px;
    z-index: 0;
}
@media screen and (min-width: 720px) {
    body > .header.active{
        margin-bottom: calc(24px + 20px);
    }
    body .header.active + .mobile-header + content > .index-banner{
        margin-top: -103px;
    }
}
@media screen and (min-width: 1312px) {
    body .header.active + .mobile-header + content > .index-banner{
        margin-top: -134px;
    }
}
.index-banner + *::after{
    content: "";
    position: absolute;
    top: 1030px;
    left: 0%;
    width: 100%;
    height: calc(100% - 1030px);
    background: linear-gradient(90deg, #D1D1D10F 0%, rgba(188, 188, 188, 0.022) 100%);
    z-index: -1;
}
.index-banner > img{
    width: 100%;
    height: auto;
    min-height: 1030px;
    object-fit: cover;
    object-position: center;
    pointer-events:none;
}
.index-banner > img:not(:nth-child(1)){
    display: none;
}
.index-banner > .logos{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 471px;
    height: auto;
    min-height: unset;
}
.index-banner > .logos > img{
    width: 100%;
    height: auto;
}

.index-banner > .logos > div{
    display: flex;
    gap: 50px;
}
.index-banner > .logos > div img{
    height: 100px;
    width: 88px;
}
.index-banner > .logos > div a{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: start;
    text-align: center;
    font-size: 9px;
    text-transform: uppercase;
    font-family: "EuropeExtendedC";
    font-weight: 700;
}
@media screen and (min-width: 720px) {
    .index-banner > .logos > div{
        display: none;
    }
}
.index-banner > img:nth-child(4){
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    width: 272px;
    height: auto;
    object-fit: contain;
    object-position: center;
    min-height: unset;
    z-index: -1;
}
.index-banner > .top-wings{
    position: absolute;

    top:96px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 1680px;

}
.index-banner > .top-wings::after{
    /* content: ""; */
    width: 175px;
    height: 25px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    background: url(/public/img/index-banner-rosmolodej.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
@media screen and (max-width: 1312px) {
    .index-banner > .top-wings::after{
        width: 100px;
        height: 15px;
        top: -8px;
    }
}
@media screen and (max-width: 720px) {
    .index-banner > .top-wings::after{
        top: 45px;
    }
}
.index-banner > .top-wings > img{
    width: 740px;
    height: 117px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0px 0px 16px rgba(255, 255, 255, 0.32)) drop-shadow(0px 2px 2px black);
}
.index-banner > .bottom-wings{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 135px;
    display: grid;
    grid-template-columns: 313px 1fr 313px;
    column-gap: 20px;
}
.index-banner > .bottom-wings > div:nth-child(1),
.index-banner > .bottom-wings > div:nth-child(3){
    position: relative;
}
.index-banner > .bottom-wings > div:nth-child(1) > div,
.index-banner > .bottom-wings > div:nth-child(3) > div{
    width: 100%;
    height: 81px;
    background: url(/public/img/index-banner-window--lb-wing.svg);
    background-size: 100% 100%;
    /* filter: drop-shadow(0px 0px 16px rgba(255, 255, 255, 0.32)) drop-shadow(0px 2px 2px black); */
}
.index-banner > .bottom-wings > div:nth-child(1)::before,
.index-banner > .bottom-wings > div:nth-child(3)::before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    border: 3px solid #474747;
    background: white;
    position: absolute;
    top: 50%;
    left: 89.5%;
    transform: translate(-50%, -50%);
    z-index: 1;


    -webkit-box-shadow: 2px 2px 20px 0px white;
    -moz-box-shadow: 2px 2px 20px 0px white;
    box-shadow: 2px 2px 20px 0px white;

    animation: 3s infinite wing_beep linear;
}
.paused .index-banner > .bottom-wings > div:nth-child(1)::before,
.paused .index-banner > .bottom-wings > div:nth-child(3)::before{
    animation-play-state: paused;
}
.index-banner > .bottom-wings > div:nth-child(3)::before{

    animation-delay: -1.5s;
}
.index-banner > .bottom-wings > div:nth-child(3){
    transform: scaleX(-1);
}
.index-banner > .bottom-wings > div:nth-child(2){
    position: relative;
}
.index-banner > .bottom-wings > div:nth-child(2) > img:nth-child(1){
    filter: drop-shadow(0px 0px 16px rgba(255, 255, 255, 0.32)) drop-shadow(0px 2px 2px black);
    width: 100%;
}
.index-banner > .bottom-wings > div:nth-child(2) > img.shutle{
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 162px;
    height: 162px;
}
.index-banner > .bottom-wings > div:nth-child(2) > .index-banner--button{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 193px;
    height: 193px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 400px;
    cursor: pointer;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.index-banner > .bottom-wings > div:nth-child(2) > .index-banner--button > *{
    width: 121px;
    height: 121px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 400px;
    cursor: pointer;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "spaceranger";
    font-size: 16px;
    text-decoration: none;
    color: white;
}

.index-banner > .solar-system{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 565px;
    background: url(/public/img/banner_radar.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.index-banner > .solar-system > div{
    position: absolute;
    width: 75px;
    height: 75px;
    transform: translate(-50%, -50%);
}
.index-banner > .solar-system > #planetRendererContainer1{
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    z-index: 0;
    border-radius: 200px;
}
.index-banner > .solar-system > #planetRendererContainer1 > canvas{
    animation: 3s infinite mod_trans linear;
}

@keyframes mod_trans {
    0% {
        filter: drop-shadow(0px 0px 32px rgba(245, 183, 60, 0.75));
    }
    50% {
        filter: drop-shadow(0px 0px 32px rgba(245, 183, 60, 0.9));
    }
    100% {
        filter: drop-shadow(0px 0px 32px rgba(245, 183, 60, 0.75));
    }
}
/* .index-banner > .solar-system > #planetRendererContainer4{
    width: 35px;
    height: 35px;
}
.index-banner > .solar-system > #planetRendererContainer5{
    width: 70px;
    height: 70px;
} */


@keyframes wing_beep {
    0% {
        background: white;
        -webkit-box-shadow: 2px 2px 20px 0px white;
        -moz-box-shadow: 2px 2px 20px 0px white;
        box-shadow: 2px 2px 20px 0px white;
    }
    49% {
        background: white;
        -webkit-box-shadow: 2px 2px 20px 0px white;
        -moz-box-shadow: 2px 2px 20px 0px white;
        box-shadow: 2px 2px 20px 0px white;
    }

    50% {
        background: #2C98F7;
        -webkit-box-shadow: 2px 2px 20px 0px #2C98F7;
        -moz-box-shadow: 2px 2px 20px 0px #2C98F7;
        box-shadow: 2px 2px 20px 0px #2C98F7;
    }
    100% {
        background: #2C98F7;
        -webkit-box-shadow: 2px 2px 20px 0px #2C98F7;
        -moz-box-shadow: 2px 2px 20px 0px #2C98F7;
        box-shadow: 2px 2px 20px 0px #2C98F7;
    }
}

.index-banner:not(.active) .solar-system{
    opacity: 0;
}
.index-banner:not(.active) > img:nth-child(4){
    display: none;
}
.index-banner > img:nth-child(5){
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 45%;
    width: 400px;
    height: auto;
    object-fit: contain;
    object-position: center;
    min-height: unset;
    z-index: -1;

    transition: all 0.25s ease-out;
}
.index-banner > .bottom-wings > div:nth-child(2) > div:nth-child(3){
    display: none;
}

@media screen and (max-width: 1312px){
    .index-banner > img{
        width: 100%;
        height: auto;
        min-height: 451px;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
    }
    .index-banner + *::after{
        content: "";
        position: absolute;
        top: 451px;
        left: 0%;
        width: 100%;
        height: calc(100% - 451px);
        background: linear-gradient(90deg, #D1D1D10F 0%, rgba(188, 188, 188, 0.022) 100%);
        z-index: -1;
    }
    .index-banner{
        min-height: 451px;
        margin-bottom: 0px;
        margin-top: -83px;
    }
    .index-banner > img:nth-child(2){
        display: block;
    }
    .index-banner > img:not(:nth-child(2)){
        display: none;
    }
    .index-banner > .bottom-wings > div:nth-child(1) > div, .index-banner > .bottom-wings > div:nth-child(3) > div{
        width: 257px;
        height: 62px;
        background: url(/public/img/index-banner-window--lb-wing-tablet.svg);
        background-size: 100% 100%;
        margin-left: auto;
    }
    .index-banner > .bottom-wings > div:nth-child(1)::before, .index-banner > .bottom-wings > div:nth-child(3)::before{
        width: 40px;
        height: 40px;
        left: 75.5%;
    }
    /* .index-banner > .bottom-wings > div:nth-child(2){
        display: none;
    } */
    .index-banner > .bottom-wings{
        grid-template-columns: 1fr 86px 1fr;
        gap: 0px;
        bottom: 23px;
    }

    .index-banner > .bottom-wings > div:nth-child(2) > img:nth-child(1){
        display: none;
    }
    .index-banner > .bottom-wings > div:nth-child(2) > img.shutle{
        width: 109px;
        height: 109px;
        bottom: 22px;
    }
    .index-banner > .top-wings{
        width: 720px;
        top: 68px;
    }
    .index-banner > .top-wings > img{
        width: 319px;
        height: 50px;
    }
    .index-banner > .logos{
        width: 160px;
    }
}
.index-banner > .top-wings > img:nth-child(3),
.index-banner > .top-wings > img:nth-child(4){
    display: none;
}
@media screen and (max-width: 720px){
    .index-banner + *::after{
        content: "";
        position: absolute;
        top: 159.8984vw;
        left: 0%;
        width: 100%;
        height: calc(100% - 667px);
        background: linear-gradient(90deg, #D1D1D10F 0%, rgba(188, 188, 188, 0.022) 100%);
        z-index: -1;
    }
    .index-banner > img:nth-child(3){
        display: block;
    }
    .index-banner > img:not(:nth-child(3)){
        display: none;
    }
    .index-banner{
        margin-top: -109px;
        margin-bottom: 0px;
        min-height: 630px;
    }
    .index-banner > .top-wings > img{
        width: 182px;
        height: 37px;
    }
    .index-banner > .top-wings{
        width: 373px;
    }
    .index-banner > .top-wings > img:nth-child(1),
    .index-banner > .top-wings > img:nth-child(2){
        display: none;
    }
    .index-banner > .top-wings > img:nth-child(3),
    .index-banner > .top-wings > img:nth-child(4){
        display: block;
    }
    .index-banner > .bottom-wings > div:nth-child(1) > div, .index-banner > .bottom-wings > div:nth-child(3) > div{
        width: 144px;
        height: 40px;
        background: url(/public/img/index-banner-window--lb-wing-mobile.svg);
        background-size: 100% 100%;
        margin-left: auto;
    }
    .index-banner > .top-wings{
        top: 90px;
    }
    .index-banner > .bottom-wings > div:nth-child(2) > img.shutle{
        width: 92px;
        height: 92px;
        bottom: 8px;
    }
    .index-banner > .bottom-wings{
        grid-template-columns: 1fr 76px 1fr;
        gap: 0px;
        bottom: 9px;
    }
    .index-banner > .logos{
        width: 300px;
        top: 50%;
    }
    .index-banner > .logos img{
        width: 212px;
    }
    .index-banner > .bottom-wings > div:nth-child(1)::before, .index-banner > .bottom-wings > div:nth-child(3)::before{
        height: 20px;
        width: 20px;
    }
}
@media screen and (max-width: 400px) {
    .index-banner > .bottom-wings > div:nth-child(1) > div, .index-banner > .bottom-wings > div:nth-child(3) > div{
        width: calc((100vw - 76px - 20px) / 2);
    }
}
@media screen and (max-width: 405px) {
    .index-banner > .bottom-wings{
        bottom: unset;
        /* top: 600px;
        524px */
        top: calc(600px - ((405px - 100vw) * 1.5));
    }
    .index-banner{
        min-height: calc(630px - ((405px - 100vw) * 1.5));;
    }
    .index-banner > .top-wings{
        top: calc(90px - ((405px - 100vw) / 5));
    }
}


.index--greetings{
    display: grid;
    grid-template-columns: 190px 1fr 190px;
    column-gap: var(--padding);
    align-items: center;
    margin-top: var(--padding);
}

/* .index--greetings > div:nth-child(2){
    height: 170px;
} */
.index--greetings > div:nth-child(2) > div{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.index--greetings > *:not(:nth-child(2)){
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 9px;
    text-transform: uppercase;
    font-family: "EuropeExtendedC";
    font-weight: 700;
}
.index--greetings > *:nth-child(3){
    gap: 2px;
}
.index--greetings > *:not(:nth-child(2)) > img{
    height: 150px;
    width: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 0 8px #ffffff49);
}
.index--greetings > *:nth-child(1) > img{
    height: 142px;
}
.index--greetings > *:nth-child(3) > img{
    height: 194px;
}
.index--greetings > *:not(:nth-child(2)) > span{
    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.index--greetings > *:nth-child(3) > span{
    display: none;
}
/* .index--greetings > div:nth-child(2) > div:nth-child(1){
    display: grid;
    grid-template-columns: 32px 1fr 2fr 1fr 32px;
    column-gap: var(--padding);
    align-items: center;
}
.index--greetings > div:nth-child(2) > div:nth-child(1) img{
    width: 32px;
    height: 32px;
} */
.grey-box{
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);
}
@media screen and (max-width: 1312px) {
    .grey-box{
        padding: 11px;
    }
}

.inner-box{
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}

.heartbeat{
    background: url(/public/img/heartbeat.svg);
    background-size: auto 100%;
    /* background-position: center left calc(-1% * (var(--alive-100) / 10.0)); */
    animation: 1s infinite heartbeat_anim steps(10, end);
}

.paused .heartbeat{
    animation-play-state: paused;
}

@keyframes heartbeat_anim {
    0% {
        background-position: center left;
    }

    100% {
        background-position: center left -100%;
    }
}

.index--greetings > div:nth-child(2) > div:nth-child(1) .heartbeat{
    height: 9px;
}
.index--greetings > div:nth-child(2) > div:nth-child(1) p{
    text-align: center;
    color:var(--blue-color);
    text-transform: uppercase;
    margin: 0px;
}
.index--greetings > div:nth-child(2) > div:nth-child(2){
    text-align: center;
    line-height: 1.1em;
}
.index--greetings > div:nth-child(2) > h2:nth-child(1){
    margin-top: calc(-37px - 0.25em);
}

@media screen and (max-width: 1312px){
    .index--greetings > div:nth-child(2) > h2:nth-child(1){
        font-size: 20px;
        margin-top: calc(-36px - 0.25em);
    }
}
@media screen and (max-width: 720px){
    .index--greetings > div:nth-child(2) > h2:nth-child(1){
        font-size: 20px;
        margin-top: calc(-16px - 0.25em);
    }
}
.skifi-panel{
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    column-gap: 5px;
    row-gap: 3px;
}
.skifi-panel > div{
    height: 3px;
    background: white;
}
@media screen and (max-width: 1312px) {
    .skifi-panel{
        column-gap: 1px;
        row-gap: 1px;
    }
}


.index--planet-grid{
    display: grid;
    grid-template-columns: 313px 1fr 313px;
    column-gap: var(--padding);
    min-height: 650px;
}
.index--planet-grid--planet{
    display: flex;
    flex-direction: column;
    gap: var(--padding);
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    z-index: 0;
    position: relative;
}
.index--planet-grid--planet #planetRendererContainer{
    height: 400px;
    width: 400px;
    z-index: 10;
}
.index--planet-grid--planet .planet-container > .wireframe-sphere{
    height: 317px;
    width: 317px;
    margin-bottom: 50px;
    border-radius: 1000px;
    box-sizing: border-box;
    border: 1px solid var(--blue-color);
    z-index: 10;
}
.index--planet-grid--planet .radar{
    width: 440px;
    height: 120px;
    position: relative;
    margin-top: -130px;
    z-index: -1;
}
.index--planet-grid--planet .radar > img{
    width: 100%;
}
.index--planet-grid--planet .radar > img:nth-child(1){
    transform: translate(-50%, -50%) scaleY(0.27);
    position: absolute;
    top: 50%;
    left: 50%;
}
.index--planet-grid--planet .radar > img:nth-child(2){
    animation: 3s infinite radar_anim linear;
    position: absolute;
    top: 50%;
    left: 50%;
}
.paused .index--planet-grid--planet .radar > img:nth-child(2){
    animation-play-state: paused;
}
@keyframes radar_anim {
    from {
        transform: translate(-50%, -50%) scaleY(0.27) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) scaleY(0.27) rotate(-360deg);
    }
}
.index--planet-grid--planet > h2{
    margin: 0px;
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
    color: #2C98F7;
    font-weight: 400;
    position: relative;
    z-index: 2;
    margin-top: auto;
    margin-bottom: auto;
}
.index--planet-grid.no-planet > .index--planet-grid--planet > h2{
    color: white;
}
.index--planet-grid--planet #planet-rotation{
    width: 100%;
    max-width: 424px;
    position: relative;
    height: 7px;
}
.index--planet-grid--planet #planet-rotation .swiper-scrollbar.swiper-scrollbar-horizontal{
    height: 7px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.index--planet-grid--planet #planet-rotation .swiper-scrollbar-drag{
    width: 65px;
}
@media screen and (max-width: 720px) {
    .index--planet-grid--planet .radar > img:nth-child(2){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .index--planet-grid--planet #planet-rotation .swiper-scrollbar-drag{
        width: 50px;
    }
    .index--planet-grid--planet #planet-rotation{
        max-width: 267px;
    }
}
.index--planet-grid--planet #planet-rotation.forced .swiper-scrollbar-drag{
    animation: planetRotationScroll 4s linear 0s infinite;
}
@keyframes planetRotationScroll {
    100%{
        left: 0%;
    }
    0%{
        left: 85%;
    }
}
.index--planet-grid--planet .planet-container{
    z-index: 0;
    position: relative;
}

.index--planet-grid--planet .planet-container .icons{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    pointer-events:none;
    z-index: 999;
}
.index--planet-grid--planet .planet-container .icons > div{
    width: 34px;
    height: 34px;
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 999;
    pointer-events:all;

    border-radius: 50px;

    box-sizing: border-box;
    padding: 8px;
    border: 1px solid white;
    background: var(--gray-bg-gradient);
    transition: width 0.15s ease-in-out, height 0.15s ease-in-out;
}

.index--planet-grid--planet .planet-container .icons > div > img{
    width: 100%;
    height: 100%;
}
.index--planet-grid--planet .planet-container .icons > div:hover:not(.active){
    width: 44px;
    height: 44px;
}
.index--planet-grid--planet .planet-container .icons > div.active{
    background: #161618;
}
.index--planet-grid--planet .planet-container .icons > div > *:nth-child(2){
    position: absolute;
    padding: 10px 20px;
    background: linear-gradient(118deg, rgba(80, 80, 80, 0.9) 0%, rgba(29, 29, 29, 0.6) 100%);
    top: 0px;
    left: calc(100% + 20px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 227px;
    width: max-content;
    /* white-space: nowrap; */
}
.index--planet-grid--planet .planet-container .icons > div:not(.active) > *:nth-child(2){
    display: none;
}
.index--planet-grid--planet .planet-container .icons > div > *:nth-child(2) > *:nth-child(1){
    color: var(--blue-color);
    text-transform: uppercase;
}
.index--planet-grid--planet .planet-container::before{
    content: "";
    background: url(/public/img/planet-bg.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    width: 99vw;
    height: 200%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    pointer-events: none;
}

@media screen and (max-width: 720px) {
    .index--planet-grid--planet .planet-container::before{
        width: 99vw;
        background-size: auto 100%;
    }
}
.index--planet-grid--planet #planet-selector{
    display: grid;
    grid-template-columns: 50px 500px 50px;
    column-gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin-top: auto;
    align-items: center;
}
.index--planet-grid--planet #planet-selector .swiper{
    width: 100%;
}

.index--planet-grid--planet #planet-selector .button-prev img{
    transform: rotate(180deg);
}
.index--planet-grid--planet #planet-selector .button-prev,
.index--planet-grid--planet #planet-selector .button-next{
    cursor: pointer;
    width: 50px;
    height: 50px;
}
.index--planet-grid--planet #planet-selector .button-prev.swiper-button-lock,
.index--planet-grid--planet #planet-selector .button-next.swiper-button-lock{
    display: block;
}
.index--planet-grid--planet #planet-selector .button-prev[aria-disabled="true"],
.index--planet-grid--planet #planet-selector .button-next[aria-disabled="true"]{
    opacity: 0.5;
    cursor: not-allowed;
}
.index--planet-grid--planet #planet-selector .button-prev img,
.index--planet-grid--planet #planet-selector .button-next img{
    border-radius: 100px;
    width: 100%;
    height: 100%;
    background: rgba(209, 209, 209, 0.3);
    transition: all 0.15s ease-in-out;
}
.index--planet-grid--planet #planet-selector .button-prev:active img,
.index--planet-grid--planet #planet-selector .button-next:active img{
    background: transparent;
}

.index--planet-grid--planet #planet-selector .swiper-slide{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 182px;

}
@media screen and (max-width: 1312px) {
    .index--planet-grid--planet #planet-selector .swiper-slide{
        width: 136px;
    }
}
@media screen and (max-width: 1312px) {
    .index--planet-grid--planet #planet-selector .swiper-slide{
        width: 120px;
    }
}
@media screen and (max-width: 720px) {
    .index--planet-grid--planet #planet-selector .swiper-slide{
        width: 150px;
    }
}
/* .index--planet-grid--planet #planet-selector .swiper-wrapper{
    overflow: hidden;
} */
.index--planet-grid--planet #planet-selector .swiper-slide span{
    opacity: 0.5;
    text-align: center;
    cursor: pointer;
}
.index--planet-grid--planet #planet-selector .swiper-slide > img{
    border-radius: 100px;
    border: 1px solid white;
    background: var(--greybox-gradient);
    padding: 5px;
    box-sizing: border-box;
    height: 60px;
    width: 60px;
    cursor: pointer;

    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
}
.index--planet-grid--planet #planet-selector .swiper-slide.planet-active > img{
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
/* .index--planet-grid--planet #planet-selector > div > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
} */

.index--planet-grid--planet > div.placeholder{
    display: grid;
    width: 100%;
    grid-template-columns: 91px 1fr 91px;
    column-gap: 20px;
    align-items: center;
    z-index: 2;
}
.index--planet-grid--planet > div.placeholder > div:nth-child(1),
.index--planet-grid--planet > div.placeholder > div:nth-child(3){
    border-radius: 100px;
    border: 1px solid white;
    background: var(--greybox-gradient);
    padding: 15px;
    box-sizing: border-box;
    height: 91px;

    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
}
/* .index--planet-grid--planet > div.placeholder > div:nth-child(3){
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--greybox-gradient);
    padding: 15px;
    box-sizing: border-box;
    height: 91px;
    height: 91px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
} */
.index--planet-grid--planet > div.placeholder > div:nth-child(3) > div,
.index--planet-grid--planet > div.placeholder > div:nth-child(1) > div{
    height: 100%;
    width: 100%;
    border-radius: 1000px;
    box-sizing: border-box;
    border: 1px solid #26CCF6;
}
.index--planet-grid--planet > div.placeholder > div:nth-child(1) > img{
    width: 100%;
    height: 100%;
}
.index--planet-grid--planet > div.placeholder > div:nth-child(2){
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--greybox-gradient);
    border-radius: 50px;
    height: 91px;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
}

.index--planet-grid--system-info{
    display: flex;
    flex-direction: column;
    gap:var(--padding);
    padding: 19px;
}
.index--planet-grid--system-info .wireframe-sphere{
    width: 178px;
    height: 178px;
    border-radius: 218px;
    box-sizing: border-box;
    border: 1px solid var(--blue-color);
}

.index--planet-grid.no-planet .index--planet-grid--system-info,
.index--planet-grid.no-planet > div:nth-child(3){
    justify-content: center;
    position: relative;
    align-items: center;
}

.index--planet-grid.no-planet .index--planet-grid--system-info::before,
.index--planet-grid.no-planet > div:nth-child(3)::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 12px;
    background: url(/public/img/no-planet-grid-top.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    pointer-events: none;
}
.index--planet-grid.no-planet .index--planet-grid--system-info > img,
.index--planet-grid.no-planet > div:nth-child(3) > img{
    width: 239px;
    height: auto;
}
.index--planet-grid.no-planet .index--planet-grid--system-info::after,
.index--planet-grid.no-planet > div:nth-child(3)::after{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 29px;
    background: url(/public/img/no-planet-grid-bottom.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    pointer-events: none;
}

.index--planet-grid--system-info > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap:var(--padding);
    padding: 10px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    border: 1px solid #12161A;
    box-shadow: 0px 1px 0px 0px rgb(114, 114, 114);
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > span{
    text-transform: uppercase;
    color: var(--blue-color);
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div{
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 46px;
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div > div{
    height: 5px;
    border: 1px solid white;
    box-sizing: border-box;
    width: 100%;
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div > div::after{
    content: "";
    animation: 3s infinite percentage_anim ease-in-out;
    height: 100%;
    background-color: var(--blue-color);
    display: block;
}
.paused .index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div > div::after{
    animation-play-state: paused;
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2)::after{
    animation-delay: -1s;
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(3)::after{
    animation-delay: -2s;
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(4)::after{
    animation-delay: -3s;
}

.index--planet-grid--system-info.paused > div:nth-child(1) > div > div::after{
    animation-play-state: paused;
}
@keyframes percentage_anim {
    0% {
        width: 0%;
        opacity: 0.3;
    }

    50% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 0%;
        opacity: 0.3;
    }
}

.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(2){
    display: grid;
    grid-template-columns: 11px 1fr 11px;
    column-gap: var(--padding);
}
.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    background: url(/public/img/dna-like.svg);
    background-size: 100% auto;
    background-repeat: repeat;
    /* background-position: center top calc(-1% * (var(--alive-10) / 1.0)); */
    animation: 10s infinite planet-grid_dna linear;
}


.paused .index--planet-grid--system-info > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    animation-play-state: paused;
}

@keyframes planet-grid_dna {
    0% {
        background-position: center top;
    }

    100% {
        background-position: center top -1000%;
    }
}

.index--planet-grid--system-info > div:nth-child(1) > div:nth-child(2) > div:nth-child(3){
    background: url(/public/img/crack-line.svg);
    background-size: 100% auto;
    background-repeat: repeat;
    /* background-position: center top calc(1% * (var(--alive-10) / 5.0)); */
    animation: 2s infinite planet-grid_crack linear;
}
.paused .index--planet-grid--system-info > div:nth-child(1) > div:nth-child(2) > div:nth-child(3){
    animation-play-state: paused;
}

@keyframes planet-grid_crack {
    0% {
        background-position: center bottom;
    }

    100% {
        background-position: center bottom -1000%;
    }
}
.index--planet-grid--system-info > div:nth-child(2){
    display: grid;
    grid-template-columns: 65px 1fr;
    column-gap: 20px;
    /* margin-bottom: 10px; */
}
.index--planet-grid--system-info > div:nth-child(2) > *:nth-child(1){
    border-radius: 100px;
    border: 1px solid white;
    background: var(--greybox-gradient);
    box-sizing: border-box;
    padding: 4px;
    box-sizing: border-box;
    height: 65px;
    width: 65px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
}
.index--planet-grid--system-info > div:nth-child(2) > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 100px;
}
.index--planet-grid--system-info > div:nth-child(2) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.index--planet-grid--system-info > div:nth-child(2) > div:nth-child(2) > *:nth-child(1){
    color: var(--blue-color);
    text-transform: uppercase;
}

.index--planet-grid--visual{
    display: grid;
    grid-template-columns: 16px 206px;
    column-gap: 10px;
    padding: 10px 20px;

    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    border: 1px solid #12161A;
    box-shadow: 0px 1px 0px 0px rgb(114, 114, 114);
}
.radar-m-container{
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.radar-m-container > div{
    height: 16px;
    width: 16px;
    position: relative;
}
.radar-m-container > div > img:nth-child(1){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}
.radar-m-container > div > img:nth-child(2){
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
}
.radar-m-container > div:nth-child(1) > img:nth-child(2),
.radar-m-container > div:nth-child(8) > img:nth-child(2){
    animation: 2.5s infinite radar_m_anim linear;
}
.radar-m-container > div:nth-child(2) > img:nth-child(2),
.radar-m-container > div:nth-child(7) > img:nth-child(2){
    animation: 3s infinite radar_m_anim linear;
}
.radar-m-container > div:nth-child(3) > img:nth-child(2){
    animation: 2s infinite radar_m_anim linear;
}
.radar-m-container > div:nth-child(4) > img:nth-child(2){
    animation: 4s infinite radar_m_anim linear;
}
.radar-m-container > div:nth-child(5) > img:nth-child(2){
    animation: 2.5s infinite radar_m_anim linear;
}
.radar-m-container > div:nth-child(6) > img:nth-child(2){
    animation: 4s infinite radar_m_anim linear;
}

.paused .radar-m-container > div > img:nth-child(2){
    animation-play-state: paused;
}
@keyframes radar_m_anim {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


.index--planet-grid--visual > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.index--planet-grid--visual > div:nth-child(2) > .skifi-panel{
    height: 11px;
    row-gap: 0px;
}
.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2){
    display: grid;
    grid-template-columns: 106px 91px;
    column-gap: 10px;
}
.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .equalizer{
    height: 34px;
}
.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .pseudolines{
    height: 16px;
    gap: 4px;
}
.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .pseudolines > div > div{
    height: 1px;
}
.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2) > div:nth-child(2){
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    height: 83px;
    width: 91px;
    box-sizing: border-box;
}
.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > img:nth-child(1){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66px;
    height: 66px;
    padding: 12px;

    border-radius: 200px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    background: var(--greybox-gradient);
}
.index--planet-grid--visual .radar-m-container{
    gap: 5px;
}
.pseudolines{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.pseudolines > div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
}
.pseudolines > div > div{
    height: 2px;
    flex-basis: 100%;
    background: white;
    opacity: 0.5;
}
.pseudolines.grey > div > div{
    opacity: 0.25;
}


.index--planet-grid--visual > div:nth-child(2) > div:nth-child(2) > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
}

.equalizer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    height: 49px;
}
.equalizer > div{
    width: 2px;
    height: 50%;
    background: white;
    border-radius: 3px;
}

.index--planet-grid > div:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.index--planet-grid > div:nth-child(3) > .skifi-panel,
.index--planet-grid--system-info > .skifi-panel{
    margin-top: auto;
    height: 14px;
}

.index--planet-grid--research{
    display: flex;
    flex-direction: column;
    gap: 20px;
    paddin: 10px;
}
.index--planet-grid--research > div:nth-child(1){
    display: grid;
    grid-template-columns: 65px 1fr;
    column-gap: 20px;
    /* margin-bottom: 10px; */
    align-items: center;
}
.index--planet-grid--research > div:nth-child(1) > *:nth-child(1){
    height: 65px;
    border-radius: 100px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #b6b6b6;
    box-shadow: 0px 1px 0px 0px rgb(114, 114, 114);

    /* background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%); */
    background: #434343 linear-gradient(318.96deg, rgba(143, 143, 143, 0.25) -1.9%, rgba(99, 99, 99, 0) 17.34%, rgba(255, 255, 255, 0.25) 87.36%);

}
.index--planet-grid--research > div:nth-child(1) > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    object-position: center;
    object-fit: contain;
}
.index--planet-grid--research > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 3px;
}
@media screen and (min-width: 1312px) {
    .index--planet-grid--research > div:nth-child(1) > div:nth-child(2){
        height: 82px;
    }
}
.index--planet-grid--research > div:nth-child(1) > div:nth-child(2) > *:nth-child(1){
    color: var(--blue-color);
    text-transform: uppercase;
}
.index--planet-grid--research > div:nth-child(1) > div:nth-child(2) > *:nth-child(3){
    opacity: 0.5;
}
.index--planet-grid--research > div:nth-child(1) > div:nth-child(2) > *:nth-child(2){
    text-decoration: none;
    color: white;
    cursor: pointer;
}
.index--planet-grid--no-research{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}
.index--planet-grid--no-research > span{
    color: #2C98F7;
    text-transform: uppercase;
}
.index--planet-grid--no-research > .pseudolines{
    width: 100%;
    height: 100%;
    gap: 15px;
}
.index--planet-grid--no-research > .pseudolines > div > div{
    height: 4px;
}

.button{
    display: flex;
    position: relative;
    gap: var(--gap);
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    cursor: pointer;
    height: 37px;
    font-size: 18px;
    font-weight: 400!important;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3),
    1px 1px 1px 1px rgba(188, 188, 188, 0.05),
    0px 0px 16px 0px rgba(255, 255, 255, 0.32),
    0px 4px 2px 0px black;
    border: 1px solid #B2B2B2;
    background: var(--gray-bg-gradient);

    transition: all 0.15s ease-in-out;

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

    box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 2px 2px 0px rgba(0, 0, 0, 1);

    border: 1px solid rgba(255, 255, 255, 0.4);
}
.button:active,
.button.active{
    background: #161618;
}
/* .button::after,
.button::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 17px;
    border: 3px solid rgba(255, 255, 255, 0.44);
    box-sizing: border-box;
}
.button::after{
    border-width: 6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-width: 3px;
    border-color: #979797;
    z-index: 1;
}
.button::before{
    z-index: 2;
    border: none;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    border-radius: 20px;
    border-width: 0px;
    opacity: 0;
    background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%);
    transition: all 0.25s ease-in-out;
}
.button:hover::before{
    opacity: 1;
} */

.index--research-slider--container{
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    column-gap: 20px;
}
.index--research-slider--container > div:nth-child(2){
    display: grid;
    grid-template-columns: 15px 994px 15px;
    column-gap: 20px;
    gap: var(--padding);
    padding: 20px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    border: 1px solid #12161A;
    box-shadow: 0px 1px 0px 0px rgb(114, 114, 114);
}
.index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)){
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}
.index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
    position: absolute;
    top: 0px;
    width: 130px;
    height: 53px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}
.index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1) > .pseudolines:nth-child(3),
.index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1) > .pseudolines:nth-child(4){
    display: none;
}
@media screen and (min-width: 1312px) {
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
        flex-direction: column-reverse;
    }
}
.index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(2){
    height: 333px;
    width: 15px;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(1) > div:nth-child(1){
    left: 0px;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(1) > div:nth-child(2){
    background: url(/public/img/dna-like.svg);
    background-size: 100% auto;
    background-repeat: repeat;
    /* background-position: center top calc(-1%*(var(--alive-10) / 1.0)); */
    animation: 20s infinite planet-grid_dna linear;
}
.paused .index--research-slider--container > div:nth-child(2) > div:nth-child(1) > div:nth-child(2){
    animation-play-state: paused;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(3) > div:nth-child(1){
    right: 0px;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) .pseudolines:not(.grey),
.index--research-slider--container > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) .pseudolines:not(.grey){
    width: 69px;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) .pseudolines:not(.grey){
    margin-left: auto;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(3) > div:nth-child(2){
    background: url(/public/img/crack-line.svg);
    background-size: 100% auto;
    background-repeat: repeat;
    /* background-position: center top calc(1%*(var(--alive-10) / 5.0)); */
    animation: 13s infinite planet-grid_crack linear;
}
.paused .index--research-slider--container > div:nth-child(2) > div:nth-child(3) > div:nth-child(2){
    animation-play-state: paused;
}

.index--research-slider--container > div:nth-child(2) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > span{
    font-size: 40px;
    font-family: "spaceranger";
    text-align: center;
    color: #2C98F7;
}

.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-prev,
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-next{
    width: 36px;
    height: 36px;
    border-radius: 1000px;
    background: rgba(209, 209, 209, 0.3);
    cursor: pointer;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-prev.swiper-button-disabled,
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-next.swiper-button-disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-prev > img, .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-next > img {
    width: 100%;
    height: 100%;
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1){
    transform: rotate(90deg);
}
.index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(3){
    transform: rotate(-90deg);
}

.index--research-slider--container .radar-m-container{
    justify-content: space-between;
}
.index--research-slider--container .radar-m-container > div{
    width: 60px;
    height: 60px;
}
@media screen and (min-width: 1312px){
    /* .index--research-slider--container .radar-m-container > div:nth-child(6){
        display: none;
    } */
    .index--research-slider--container .radar-m-container > div:nth-child(7),
    .index--research-slider--container .radar-m-container > div:nth-child(8){
        display: none;
    }
}
@media screen and (min-width: 720px){
    .index--research-slider--container .radar-m-container > div:nth-child(7){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .index--research-slider--container .radar-m-container > div{
        width: 30px;
        height: 30px;
    }
}

#research-swiper{
    height: 373px;
    width: 100%;
    padding: 2px;
    padding-top: 50px!important;
    position: relative;
    box-sizing: border-box;
    /* overflow: visible; */
}
#research-swiper .swiper-slide{
    overflow: visible;
    height: fit-content;
}
#research-swiper .no-research{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    border-radius: 8px;
    background: var(--gray-bg-gradient);
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    position: relative;
    height: 213px;

}
#research-swiper .no-research > img{
    height: 130px;
}
#research-swiper .no-research::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 12px;
    background: url(/public/img/no-research-top.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    pointer-events: none;
}
#research-swiper .no-research::after{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 29px;
    background: url(/public/img/no-research-bottom.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    pointer-events: none;
}
/* #research-swiper */
/* #research-swiper .swiper-slide{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 100%;
    align-items: center;
    justify-content: top;
    backdrop-filter: none;
}
#research-swiper .swiper-slide > div{
    display: grid;
    grid-template-columns: 82px 1fr;
    column-gap: 20px;
    width: 100%;
}
#research-swiper .swiper-slide > div > div:nth-child(1){
    height: 82px;
    width: 82px;
    border-radius: 100px;
    border: 1px solid white;
    background: var(--greybox-gradient);
    padding: 15px;
    box-sizing: border-box;

    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
}
#research-swiper .swiper-slide > div > div:nth-child(1) > img{
    height: 100%;
    width: 100%;
}
#research-swiper .swiper-slide > div > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#research-swiper .swiper-slide > div > div:nth-child(2) > span:nth-child(1){
    font-size: 20px;
    color: var(--green-color);
    text-transform: uppercase;
}
#research-swiper .swiper-slide > div > div:nth-child(2) > span:nth-child(3){
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
}
#research-swiper .swiper-slide > img{
    width: 100%;
    height: auto;
} */

.swiper-scrollbar{
    border: 1px solid rgba(255, 255, 255, 0.322)!important;
    border-radius: 0px!important;
    background: var(--greybox-gradient)!important;
    padding: 1px;
}
.swiper-scrollbar-drag{
    background: white!important;
    border-radius: 0px!important;
}
.index--research-slider--scrollbar{
    height: 20px;
    position: relative;
}


.container.partners{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
}
.container.partners .partners--card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    border-radius: 5px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3),
    1px 1px 1px 1px rgba(188, 188, 188, 0.05),
    0px 0px 16px 0px rgba(255, 255, 255, 0.32);
    background: var(--gray-bg-gradient);
    position: relative;
    padding: 0px 20px;
    padding-top: 30px;
    padding-bottom: 0px;
    box-sizing: border-box;
}
.container.partners .partners--card > div:nth-child(1){
    position: absolute;
    bottom: 100%;
    left: 30px;
    width: calc(100% - 60px);

    background: var(--gray-bg-gradient);
    height: 0px;
    box-sizing: border-box;

    transition: all 0.15s ease-in-out;

    z-index: 99;

    /* overflow: hidden; */
    padding: 0px 20px;
}
.container.partners .partners--card > div:nth-child(1) > div:nth-child(1){
    overflow-x: auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: 20px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.container.partners .partners--card > div:nth-child(1) > div:nth-child(1) p{
    margin: 0px;
}
@media screen and (max-width: 720px) {
    .container.partners .partners--card > div:nth-child(1) > div:nth-child(1){
        gap: 6px;
    }
}

.container.partners .partners--card.active > div:nth-child(1){
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3),
    1px 1px 1px 1px rgba(188, 188, 188, 0.05),
    0px 0px 16px 0px rgba(255, 255, 255, 0.32);
    height: calc(100% - 50px);
    bottom: 50px;
    padding: 20px;
}
.container.partners .partners--card > div:nth-child(1) > div:nth-child(2){
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    width: 44px;
    height: 15px;
    transform: translateX(-50%);
    cursor: pointer;
    background: url(/public/img/partner-btn.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 1;
}
.container.partners .partners--card.active > div:nth-child(1) > div:nth-child(2){
    background: url(/public/img/partner-btn-active.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
.container.partners .partners--card > div:nth-child(1)::after{
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 0px;
    width: 100%;
    height: 50px;
    background: url(/public/img/partner-card--top.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;

    pointer-events: none;
}
.container.partners .partners--card > div:nth-child(2){
    display: grid;
    grid-template-columns: 95px 1fr;
    width: 100%;
    column-gap: 20px;
    align-items: center;
}
.container.partners .partners--card > div:nth-child(2) > div:nth-child(1){
    width: 95px;
    height: 95px;
    border-radius: 1000px;
    box-sizing: border-box;
    padding: calc(var(--gap) / 2);
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32); */
    background: linear-gradient(115.33deg, rgba(209, 209, 209, 0.3) -8.48%, rgba(188, 188, 188, 0.05) 130.76%);
    border: 1px solid rgb(151, 151, 151);
    filter: drop-shadow(0px 0px 8px black);
}
.container.partners .partners--card > div:nth-child(2) > div:nth-child(1) *{
    width: 100%;
    height: 100%;
}
.container.partners .partners--card > div:nth-child(2) > div:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.container.partners .partners--card > div:nth-child(2) > div:nth-child(2){
    font-family: "spaceranger";
    font-size: 32px;
}
.container.partners .partners--card > div:nth-child(3){
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    width: 100%;
    height: 40px;
}
.container.partners .partners--card > img{
    width: 362px;
    max-width: 100%;
}
@media screen and (max-width: 1312px) {
    .container.partners .partners--card > img{
        height: 29px;
        width: 315px;
    }
}

.container.partners .partners--card > div:nth-child(3) > div > * > *:nth-child(1) img{
    cursor: pointer;
    border-radius: 100%;
    box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.32),
    0px 4px 4px 0px black;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid white;
    background: var(--gray-bg-gradient);
    transition: all 0.15s ease-in-out;
}
.container.partners .partners--card > div:nth-child(3) > div > *:hover > *:nth-child(1) img,
.container.partners .partners--card > div:nth-child(3) > div > *.active > *:nth-child(1) img{
    background: #161618;
}
.container.partners .partners--card > div:nth-child(3) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.container.partners .partners--card > div:nth-child(3) > div:nth-child(1){
    justify-content: start;
}
.container.partners .partners--card > div:nth-child(3) > div:nth-child(3){
    justify-content: end;
}

.tooltip-container{
    position: relative;
}
.tooltip-container.parent-relative{
    position: unset;
}
.tooltip-container .tooltip-content{
    position: absolute;
    --offset: 20px;
    bottom: calc(100% + var(--offset));
    left: calc(50% - 24px);


    border-radius: 5px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3),
    1px 1px 1px 1px rgba(188, 188, 188, 0.05),
    0px 0px 16px 0px rgba(255, 255, 255, 0.32),
    0px 3px 2px 0px black;
    background: var(--gray-bg-gradient);
    padding: 10px;

    z-index: 999;
    max-width: 300px;
    width: max-content;

}
.tooltip-container.parent-relative .tooltip-content{
    bottom: unset;
    left: unset;
    right: unset;
    transform: translate(0px, calc(-100% - 24px));
}
.tooltip-container.right.parent-relative .tooltip-content{
    bottom: unset;
    left: unset;
    right: unset;
    transform: translate(-100%, calc(-100% - 24px));
}
@media screen and (max-width: 1312px) {
    .tooltip-container .tooltip-content{
        font-size: 15px;
    }
}
.tooltip-container .tooltip-content::after,
.tooltip-container .tooltip-content::before{
    display: block;
    content: "";
    width: 100%;
    height: 16px;
    mask-image: url(/public/img/tooltip-triangle.png);
    mask-repeat: no-repeat;
    mask-position: 8px top;
    mask-size: auto 17px;
    /* mask-size: 100% 100%; */
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: absolute;
    top: calc(100% - 1px);
    left: 0px;
    z-index: 2;

    /* filter: drop-shadow(-1px -1px 1px rgba(209, 209, 209, 0.3)) drop-shadow(1px 1px 1px rgba(188, 188, 188, 0.05)) drop-shadow(0px 0px 16px rgba(255, 255, 255, 0.32)); */
    /* box-shadow:  inset 0px 0px 4px 4px red; */
    /* filter: drop-shadow(0 0 0.75rem crimson); */
}
.tooltip-container .tooltip-content::after{
    filter: drop-shadow(-1px -1px 1px rgba(209, 209, 209, 0.3)) drop-shadow(1px 1px 1px rgba(188, 188, 188, 0.05)) drop-shadow(0px 0px 16px rgba(255, 255, 255, 0.32));
    background: var(--gray-bg-gradient);
    /* background: red; */
}
.tooltip-container .tooltip-content::before{
    height: 18px;
    mask-position: 7px top;
    mask-size: auto 18px;
    top: calc(100%);
    /* background: linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%); */
    background: rgba(0, 0, 0, 0.5);
    /* background: green; */
}
.tooltip-container.right .tooltip-content{
    left: unset;
    /* right: 0px; */
    right: calc(50% - 24px);
}
.tooltip-container.right .tooltip-content::after,
.tooltip-container.right .tooltip-content::before{
    mask-position: calc(100% - 7px) top;
}
.tooltip-container:not(.active) .tooltip-content{
    display: none;
}
/* .container.partners .partners--card > div:nth-child(3) > div:nth-child(2) > div > div:nth-child(1).active::before{
    content: "";
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
} */

@media screen and (max-width: 1312px) {
    .container.partners{
        grid-template-columns: 1fr 1fr;
        row-gap: 24px;
        column-gap: 24px;
    }
    .container.partners .partners--card{
        padding: 0px 12px;
        padding-top: 23px;
        padding-bottom: 0px;
        gap: 12px;
    }
    .container.partners .partners--card > div:nth-child(3){
        height: 30px;
    }
    .container.partners .partners--card > div:nth-child(3) > div > * > *:nth-child(1) img{
        padding: 7px;
        width: 30px;
        height: 30px;
    }
    .container.partners .partners--card > div:nth-child(3) > div{
        gap: 5px;
    }
    .container.partners .partners--card > div:nth-child(2){
        grid-template-columns: 55px 1fr;
        column-gap: 12px;
    }
    .container.partners .partners--card > div:nth-child(2) > div:nth-child(1){
        width: 55px;
        height: 55px;
    }
    .container.partners .partners--card > div:nth-child(2) > div:nth-child(2){
        font-size: 20px;
    }
}
@media screen and (max-width: 720px){
    .container.partners{
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .partners + .list-arrow-more{
        margin-top: 10px;
    }
}
.auth-page{
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
    align-items: center;
}
.auth-page p{
    font-size: 25px;
    color: rgba(255, 255, 255, 0.5);
}
.auth-page a{
    color: #2C98F7;
    text-decoration: none;
    cursor: pointer;
}
.auth-page a.fingerprint{
    position: relative;
    width: 560px;
}
.auth-page a.fingerprint > img{
    transition: 0.15s ease-in-out;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.auth-page a.fingerprint > img:nth-child(2){
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.001;
}
.auth-page a.fingerprint:hover > img:nth-child(2){
    opacity: 1;
}
.auth-page .auth--missing-data{
    color: white;
    font-size: 25px;

    background: #2D0008;
    padding: var(--gap);
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #E81F1F;
}
.auth-page .auth--missing-data > a{
    color: #E81F1F;
}
@media screen and (min-width: 1312px){
    .auth-page p > span > br:nth-of-type(2){
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .auth-page .auth--missing-data{
        font-size: 15px;
    }
    .auth-page{
        gap: 24px;
    }
    .auth-page p{
        font-size: 15px;
    }
    .auth-page a.fingerprint{
        width: 519px;
    }
}
@media screen and (max-width: 720px){
    .auth-page a.fingerprint{
        width: 100%;
    }
}

.docs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
}
.docs > div{
    box-sizing: border-box;

    border-radius: 5px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3),
    1px 1px 1px 1px rgba(188, 188, 188, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    min-height: 335px;

    padding: 0px var(--gap);
}
.docs > div > .img{
    position: relative;
    cursor: pointer;
}
.docs > div > .img > img{
    height: 108px;
    width: auto;
}
.docs > div > .img > img:nth-child(2){
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.001;
    transition: all 0.15s ease-in-out;
}
.docs > div > .img:hover > img:nth-child(2){
    opacity: 1;
}
.docs > div > span:nth-child(3){
    font-size: 32px;
    font-family: "spaceranger";
    font-weight: 400;

    text-align: center;
}
.docs > div > span:nth-child(4){
    opacity: 0.5;
    margin-top: auto;
    font-size: 15px;
}
.docs > div > img:nth-child(1){
    height: 12px;
}
.docs > div > div:nth-child(5){
    height: 29px;
}
.docs > div > div:nth-child(5) > img{
    height: 29px
}
.docs > div > div:nth-child(5) > img:nth-child(2){
    display: none;
}
@media screen and (max-width: 1312px){
    .docs > div{
        min-height: 226px;
    }
    .docs > div > img:nth-child(1){
        width: 235px;
    }
    .docs{
        grid-template-columns: 1fr 1fr;
        row-gap: 24px;
        column-gap: 24px;
    }
    .docs > div > .img > img{
        height: 80px;
        width: auto;
    }
    .docs > div > span:nth-child(3){
        font-size: 20px;
    }
    .docs > div > div:nth-child(5) > img:nth-child(1){
        display: none;
    }
    .docs > div > div:nth-child(5) > img:nth-child(2){
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 720px){
    .docs{
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
}

.contacts-page{
    height: 714px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(/public/img/contacts--circles.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.contacts-page > div:nth-child(1){
    z-index: 2;
}
.contacts-page > div:nth-child(1) > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.contacts-page > div:nth-child(1) > div:not(.active){
    display: none;
}
.contacts-page > div:nth-child(1) > div > span{
    font-size: 20px;
    opacity: 0.5;
}
.contacts-page > div:nth-child(1) > div > a{
    color: white;
    text-decoration: none;
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.contacts-page > div:nth-child(1) > div > a img{
    height: 30px;
}
.contacts-page > div:nth-child(1) > div > a:not(.active) img{
    filter:grayscale(2);
}
.contacts-page > div:nth-child(2){
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.contacts-page > div:nth-child(2) > div{
    position: absolute;

    border-radius: 300px;
    border: 1px solid rgb(163, 163, 163);
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3),
    1px 1px 1px 1px rgba(188, 188, 188, 0.05),
    0px 0px 16px 4px rgba(255, 255, 255, 0.32);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gray-bg-gradient);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.contacts-page > div:nth-child(2) > div:hover,
.contacts-page > div:nth-child(2) > div.active{
    background: #161618;
}
.contacts-page > div:nth-child(2) > div > a:nth-child(1){
    display: block;
    width: 50%;
    height: 50%;
}
.contacts-page > div:nth-child(2) > div > a:nth-child(1) img{
    display: block;
    width: 100%;
    height: 100%;
}
.contacts-page > div:nth-child(2) > div:nth-child(1),
.contacts-page > div:nth-child(2) > div:nth-child(2),
.contacts-page > div:nth-child(2) > div:nth-child(3){
    width: 120px;
    height: 120px;
}
.contacts-page > div:nth-child(2) > div:nth-child(4),
.contacts-page > div:nth-child(2) > div:nth-child(5),
.contacts-page > div:nth-child(2) > div:nth-child(6){
    width: 80px;
    height: 80px;
}
.contacts-page > div:nth-child(2) > div:nth-child(1){
    left: 10%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.contacts-page > div:nth-child(2) > div:nth-child(2){
    top: 50%;
    right: 10%;
    transform: translate(50%, -50%);
}
.contacts-page > div:nth-child(2) > div:nth-child(3){
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);
}
.contacts-page > div:nth-child(2) > div:nth-child(4){
    bottom: 12%;
    right: 30%;
    transform: translate(50%, -50%);
}
.contacts-page > div:nth-child(2) > div:nth-child(5){
    top: 12%;
    left: 30%;
    transform: translate(-50%, -50%);
}
.contacts-page > div:nth-child(2) > div:nth-child(6){
    bottom: 12%;
    left: 30%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1312px) {
    .contacts-page{
        height: 750px;
        background: url(/public/img/contacts--circles-tablet.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
    .contacts-page > div:nth-child(2) > div:nth-child(1),
    .contacts-page > div:nth-child(2) > div:nth-child(2),
    .contacts-page > div:nth-child(2) > div:nth-child(3){
        width: 80px;
        height: 80px;
    }
    .contacts-page > div:nth-child(2) > div:nth-child(4),
    .contacts-page > div:nth-child(2) > div:nth-child(5),
    .contacts-page > div:nth-child(2) > div:nth-child(6){
        width: 50px;
        height: 50px;
    }
    .contacts-page > div:nth-child(2) > div:nth-child(5){
        top: 20%;
        left: 20%;
        transform: translate(-50%, -50%);
    }
    .contacts-page > div:nth-child(1) > div > span{
        font-size: 15px;
    }
    .contacts-page > div:nth-child(1) > div > a{
        font-size: 20px;
    }
    .contacts-page > div:nth-child(1) > div > a img{
        height: 20px;
    }
}
@media screen and (max-width: 720px) {
    .contacts-page{
        height: 708px;
        background: url(/public/img/contacts--circles-mobile.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
    }
    .contacts-page > div:nth-child(2) > div:nth-child(1),
    .contacts-page > div:nth-child(2) > div:nth-child(2),
    .contacts-page > div:nth-child(2) > div:nth-child(3){
        width: 70px;
        height: 70px;
    }
    .contacts-page > div:nth-child(2) > div:nth-child(4),
    .contacts-page > div:nth-child(2) > div:nth-child(5),
    .contacts-page > div:nth-child(2) > div:nth-child(6){
        width: 50px;
        height: 50px;
    }
    .contacts-page > div:nth-child(2) > div:nth-child(4){
        top: 20%;
        left: 20%;
        transform: translate(-50%, -50%);
    }
    .contacts-page > div:nth-child(2) > div:nth-child(6){
        top: 20%;
        left: 80%;
        transform: translate(-50%, -50%);
    }

    .contacts-page > div:nth-child(2) > div:nth-child(1){
        top: 80%;
        left: 20%;
        transform: translate(-50%, -50%);
    }
    .contacts-page > div:nth-child(2) > div:nth-child(2){
        top: 80%;
        left: 80%;
        transform: translate(-50%, -50%);
    }
    .contacts-page > div:nth-child(2) > div:nth-child(5){
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .contacts-page > div:nth-child(1) > div > span{
        font-size: 12px;
    }
    .contacts-page > div:nth-child(1) > div > a{
        font-size: 20px;
    }
    .contacts-page > div:nth-child(1) > div > a img{
        height: 20px;
    }
}

.maintenance{
    display: flex;
    flex-direction: column;
    gap: 47px;
    align-items: center;
    min-height: calc(100vh - 90px - 90px);
    position: relative;
}
.maintenance::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 100%;
    background: url(/public/img/maintenance-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);

    pointer-events: none;
}
.maintenance > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.maintenance > div:nth-child(1) > div > *:nth-child(1){
    border-radius: 300px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 4px rgba(255, 255, 255, 0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gray-bg-gradient);
    cursor: pointer;
    transition: all 0.15s ease-in-out;

    border: 1px solid rgb(184, 184, 184);

    width: 80px;
    height: 80px;
}
.maintenance > div:nth-child(1) > div > *:nth-child(1).active,
.maintenance > div:nth-child(1) > div > *:nth-child(1):hover{
    background: #161618;
}
.maintenance > div:nth-child(1) > div > *:nth-child(1) > a:nth-child(1),
.maintenance > div:nth-child(1) > div > *:nth-child(1) > img{
    width: 50%;
    height: 50%;
    display: block;
}
.maintenance > div:nth-child(1) > div > *:nth-child(1) > a:nth-child(1) img{
    width: 100%;
    height: 100%;
    display: block;
}
.maintenance > div:nth-child(2) > span{
    display: block;
    align-items: center;
    text-align: center;
    font-family: "spaceranger";
    font-size: 130px;
}
/* .maintenance > div:nth-child(2) > span:nth-child(2){
    background: -webkit-linear-gradient(85deg, #0891F4 0%, #ffffff 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */
.maintenance > div:nth-child(2){
    z-index: -10;
    position: relative;
}

@media screen and (max-width: 1600px){
    .maintenance::before{
        background: url(/public/img/maintenance-bg.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        min-height: calc(100vh - 90px - 90px);
    }
}
@media screen and (max-width: 1312px){
    .maintenance{
        gap: 37px;
        min-height: calc(100vh - 56px - 120px);
    }
    .maintenance::before{

        background: url(/public/img/maintenance-bg-tablet.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .maintenance > div:nth-child(2) > span{
        font-size: 80px;
    }
    .maintenance > div:nth-child(1) > div > *:nth-child(1){
        width: 40px;
        height: 40px;
    }
}
@media screen and (max-width: 800px){
    .maintenance{
        min-height: 600px;
        position: unset;
        gap: 33px;
    }
    .maintenance::before{

        background: url(/public/img/maintenance-bg-mobile.png);
        background-position: top -50px center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .maintenance > div:nth-child(2) > span{
        font-size: 50px;
    }
}
@media screen and (max-width: 720px){
    .maintenance > div:nth-child(1) > div > *:nth-child(1){
        width: 48px;
        height: 48px;
    }
}



.error-page{
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    min-height: calc(100vh - 90px - 90px);
    position: relative;
}
@media screen and (min-width: 1312px) {
    .error-page > div{
        margin-top: 17px;
    }
}
.error-page::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 100%;
    background: url(/public/img/maintenance-bg.png);
    background-position: center top -140px;
    background-repeat: no-repeat;
    background-size: 1920px 1009px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);

    pointer-events: none;
}
.error-page > div > span{
    text-align: center;
}
.error-page > div > span:nth-child(1){
    font-size: 30px;
    color: white;
    opacity: 0.5;
    display: block;
}
.error-page > div > span:nth-child(2){
    display: block;
    align-items: center;
    text-align: center;
    font-family: "spaceranger";
    font-size: 400px;

    margin-top: 20px;
}
/* .error-page > div > span:nth-child(2):nth-child(2){
    background: -webkit-linear-gradient(85deg, #0891F4 0%, #ffffff 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */
.error-page > div:nth-child(2){
    z-index: -10;
    position: relative;
}

@media screen and (max-width: 1600px){
    .error-page::before{
        background: url(/public/img/maintenance-bg.png);
        background-position: center top -140px;
        background-repeat: no-repeat;
        background-size: 1920px 1009px;
        min-height: calc(100vh - 90px - 90px);
    }
}
@media screen and (max-width: 1312px){
    .error-page{
        gap: 20px;
        min-height: calc(100vh - 56px - 120px);
    }
    .error-page::before{

        background: url(/public/img/maintenance-bg-tablet.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .error-page > div > span:nth-child(1){
        font-size: 20px;
    }
    .error-page > div > span:nth-child(2){
        font-size: 250px;
        margin-top: 22px;
    }
}
@media screen and (min-width: 800px){
    .error-page > div > span:nth-child(1) br{
        display: none;
    }
}
@media screen and (max-width: 800px){
    .error-page{
        min-height: 600px;
        position: unset;
        gap: 40px;
    }
    .error-page::before{

        background: url(/public/img/maintenance-bg-mobile.png);
        background-position: top -50px center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .error-page > div > span:nth-child(1){
        font-size: 20px;
    }
    .error-page > div > span:nth-child(2){
        font-size: 160px;
    }
}
@media screen and (max-width: 720px){
    .error-page > div > span:nth-child(2){
        margin-top: 25px;
    }
}

.awards-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.awards--header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px 20px;

    box-sizing: border-box;

    /* border-image: linear-gradient(to right, #ffffff 0%, #ffffff00 50%, #ffffff 100%) 1;
    border-width: 4px;
    border-style: solid;
    border-radius: 5px; */
    text-align: center;

    background: url(/public/img/awards--header--rt.svg), url(/public/img/awards--header--rb.svg), url(/public/img/awards--header--lt.svg), url(/public/img/awards--header--lb.svg);
    background-repeat: no-repeat;
    background-position: right -1px top, right -1px bottom, left -1px top, left -1px bottom;
    background-size: 50% auto;

    border-radius: 5px;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
@media screen and (max-width: 500px) {
    .awards--header{
        background-size: 25% auto;
    }
}
.awards--header h2{
    margin-top: calc(-30px - 0.5em);
    color: #2C98F7;
}
.awards--header span{
    display: block;
}

.awards-container .awards--list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
}
.awards-container .awards--list > div{
}
.awards-container .awards--list > div > img:last-child{
    margin-top: auto;
}
.awards-container .awards--list > div > div.stat + img:last-child,
.awards-container .awards--list > div > span + img:last-child{
    margin-top: 0px;
}

.awards--card.single,
.awards--card.stage{

    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32);
    background: var(--gray-bg-gradient);
    border-radius: 5px;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}
.awards--card.stage{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.awards--card.single,
.awards--card.stage > div > div{
    position: relative;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.awards--card.stage > div > div:not(.active){
    display: none;
}
.awards--card.single > div:nth-child(1),
.awards--card.stage > div > div > div:nth-child(1){
    position: absolute;
    bottom: 100%;
    left: 20px;
    width: calc(100% - 40px);
    background: var(--gray-bg-gradient);
    height: 0px;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
    z-index: 99;
    /* overflow: hidden; */
    padding: 0px 20px;
}
.awards--card.stage > div > div > div:nth-child(1){
    width: 100%;
    left: 0px;
}
.awards--card.single.active > div:nth-child(1),
.awards--card.stage.active > div > div > div:nth-child(1){

    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32);
    height: calc(100% - 50px);
    bottom: 50px;
    padding: 20px;
}
.awards--card.stage.active > div > div > div:nth-child(1){
    height: calc(100%);
    bottom: 0px;
}
.awards--card.single > div:nth-child(1) > img,
.awards--card.stage > div > div > div:nth-child(1) > img{
    position: absolute;
    top: 100%;
    left: 0%;
    width: 100%;
    height: 14px;
    object-fit: cover;
    object-position: center;

    cursor: pointer;
}
.awards--card.single > div:nth-child(1) > div,
.awards--card.stage > div > div > div:nth-child(1) > div{
    overflow-x: auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: 20px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.awards--card.single > div:nth-child(2),
.awards--card.stage > div > div > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.awards--card.single > div:nth-child(2),
.awards--card.stage > div > div > div:nth-child(2) > div{
    height: 95px;
    width: 95px;
    border-radius: 200px;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 20px;
    box-sizing: border-box;
    background: var(--greybox-gradient);
}
.awards--card.single > div:nth-child(2){
    margin-left: auto;
    margin-right: auto;
}
.awards--card.single > div:nth-child(2) img,
.awards--card.stage > div > div > div:nth-child(2) > div img{
    width: 100%;
    height: 100%;
}
.awards--card.stage > div > div > div:nth-child(2) > img:first-child,
.awards--card.stage > div > div > div:nth-child(2) > img:last-child{
    height: 30px;
    width: 30px;
    border-radius: 200px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 8px;
    box-sizing: border-box;
    background: var(--gray-bg-gradient);
    cursor: pointer;
}
.awards--card.stage > div > div > div:nth-child(2) > img:last-child{
    transform: rotate(180deg);
}
.awards--card.single > h2,
.awards--card.single > span,
.awards--card.stage > div > div > h2,
.awards--card.stage > div > div > span{
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}
.awards--card.stage > div > div > h2,
.awards--card.single > h2{
    min-height: 58px;
}
.awards--card.single > span,
.awards--card.stage > div > div > span{
    margin-top: auto;
}
.awards--card.single > div.stat{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 5px;
    box-sizing: border-box;
    padding-left: 20px;
    border-radius: 8px;

    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3),
    inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    margin-top: auto;
}
.awards--card.single > span + div.stat{
    margin-top: 0px;
}
.awards--card.single > div.stat > span:nth-child(1){
    opacity: 0.5;
}
.awards--card.single > div.stat > span:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #2C98F7;
    border-top: 2px solid #b2dbff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.7);
    border-radius: 6px;
    height: 44px;
    min-width: 121px;
    box-sizing: border-box;

    font-family: "spaceranger";
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.awards--card.stage > div > div > div.stat{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.awards--card.stage > div > div > div.stat > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    opacity: 0.5;
}
.awards--card.stage > div > div > div.stat > div:nth-child(2){
    position: relative;

    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3),
    inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);

    height: 31px;
    padding: 1px;
    box-sizing: border-box;
    border-radius: 100px;
}
.awards--card.stage > div > div > div.stat > div:nth-child(2) > div{
    margin-right: auto;

    background: #2C98F7;
    border-top: 2px solid #b2dbff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.7),
    0px 0px 10px 0px #2C98F7;
    border-radius: 100px;
    height: 31px;
    min-width: 12px;
    max-width: calc(100% - 2px);
    box-sizing: border-box;
    position: absolute;
}
.awards--card.stage > div > div > div.stat > div:nth-child(2) span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    z-index: 2;
}
@media screen and (max-width: 1312px){
    .awards-container .awards--list > div > img:last-child{
        width: 100%;
        height: 29px;
    }
    .awards--card.single, .awards--card.stage{
        padding-left: 12px;
        padding-right: 12px;
    }
    .awards-container .awards--list{
        grid-template-columns: 1fr 1fr;
    }
    .awards--card.single > div.stat > span:nth-child(2){
        height: 40px;
        min-width: 101px;
    }
    .awards--card.single > div.stat{
        padding: 12px;
        height: 50px;
        border-radius: 6px;
    }
    .awards--card.single > div:nth-child(2), .awards--card.stage > div > div > div:nth-child(2) > div{
        height: 55px;
        width: 55px;
        padding: 11px;
    }
    .awards--card.single, .awards--card.stage > div > div{
        gap: 12px;
    }
    .awards--card.stage > div > div > h2,
    .awards--card.single > h2{
        min-height: 36px;
    }
    .awards--card.stage > div > div > div:nth-child(2) > img:first-child, .awards--card.stage > div > div > div:nth-child(2) > img:last-child{
        width: 23px;
        height: 23px;
    }
    .awards--card.stage > div > div > div.stat{
        gap: 5px;
    }
}
@media screen and (max-width: 720px){
    .awards-container .awards--list{
        grid-template-columns: 1fr;
    }
    .awards-container .awards--list > div > img:last-child{
        width: 100%;
    }

    .awards--header{
        padding: 12px;
    }
}


.researches-container{
    display: grid;
    grid-template-columns: 313px 1fr;
    column-gap: 20px;
}
.researches-container > .researches--content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.researches-container > .researches--content > .researches--calendar-scroll{
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 8px;
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);

    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
}
.researches-container > .researches--content > .researches--calendar-scroll > h5{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar{
    position: relative;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar .pbl--scroll-calendar--trash{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
    z-index: 10;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 17px;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > img{
    padding: 8px;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
    margin-top: 30px;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > img:last-child{
    transform: rotate(180deg);
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
    justify-content: start;
    overflow: auto;
    width: 859px;

    overflow: hidden;
}
/* .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div{
    display: flex;
    flex-direction: column;
    gap: 20px;
} */
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.15s ease-in-out;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div > span{
    position: sticky;
    left: 0px;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.5);
    width: fit-content;
    font-size: 20px;
    /* line-height: 1em; */
}
@media screen and (max-width: 1312px) {
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div > span{
        font-size: 15px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div{
        gap: 15px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > h5{
        font-size: 20px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar .pbl--scroll-calendar--trash{
        width: 23px;
        height: 23px;
    }
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div > span::before{
    content: "";
    position: absolute;
    top: 0px;
    right: -50px;
    height: 100%;
    width: calc(100% + 100px);
    z-index: -1;
    background: #1c1c1e94;
    box-shadow: 0px 0px 39px -7px #1C1C1E;
    backdrop-filter: brightness(0.5) blur(2px);
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(1){
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    column-gap: 10px;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2){
    display: flex;
    flex-direction: row;
    /* align-items: center;
    justify-content: center; */
    width: fit-content;
    gap: 12px;
    padding: 4px;

    z-index: 10;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 11px;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div{
    width: 55px;
    height: 75px;;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* padding: 10px; */
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 8px 0px rgba(255, 255, 255, 0.7);
    background: var(--gray-bg-gradient);
    cursor: pointer;
    align-items: center;

    position: relative;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div.active{
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div.active:not(.to)::after{
    content: "";
    position: absolute;
    top: 0px;
    left: calc(100% - 6px);
    width: calc(11px + 12px);
    height: 100%;

    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    /* background: red; */
    z-index: -1;
}
/* .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div.active.to{
    background: green;
} */
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div > span:nth-child(1){
    font-family: "spaceranger";
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
}
.researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div > span:nth-child(2){
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
}

.researches--title{
    color: #2C98F7;
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
@media screen and (max-width:1312px){
    .researches--title h2{
        font-size: 26px;
    }
}
.researches--title::before,
.researches--title::after{
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: calc(1312px / 2 - 20px - 50%);
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%);
}
.researches--title::before{
    right: calc(100% + 20px);
}
.researches--title::after{
    left: calc(100% + 20px);
}

.researches--filter{
    display: flex;
    flex-direction: column;
    gap: 20px;

    box-sizing: border-box;
    height: fit-content;

    padding: 20px;
    border-radius: 8px;
    background: #161618 linear-gradient(-80deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
}
.researches--filter .scroll{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.researches--filter .skifi-panel{
    height: 14px;
}


.researches--filter--title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.researches--filter--title h2{
    color: #2C98F7;
}
.researches--filter--title > img:nth-child(2){padding: 5px;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
}
.researches--filter--select{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.researches--filter--select select{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: 1px solid #818181;
    padding: 10px 15px;
    height: 38px;
    width: 100%;
    box-sizing: border-box;

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

    background: url(/public/img/select-arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 13px 8px;
    background-position: center right 15px;
    font-family: "Roboto";
    font-size: 15px;
}
.researches--filter--date,
.researches--filter--t-text{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.researches--filter--date > label,
.researches--filter--t-text > label{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: 1px solid #818181;
    padding: 10px 15px;
    height: 38px;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.researches--filter--date > label span,
.researches--filter--t-text > label span{
    opacity: 0.5;
}
.researches--filter--date > label input,
.researches--filter--t-text > label input{
    outline: none;
    background: none;
    border: none;
    width: 81px;
    color: white;
    font-family: "Roboto";
}
.researches--filter--t-text > label input{
    width: calc(100% - 18px - 10px);
    text-align: start;
}
.researches--filter--date > label div,
.researches--filter--t-text > label div{
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;

    background: url(/public/img/icon_magnifier.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-left: auto;
}
.researches--filter--date > label input:not(:placeholder-shown) + div,
.researches--filter--t-text > label input:not(:placeholder-shown) + div{
    background: url(/public/img/icon_trash.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.researches--filter--text{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: 1px solid #818181;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;

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

    background: url(/public/img/icon_magnifier.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center right 15px;

}

.researches--filter--select select option{
    background: #161618;
    color: white;
}
.researches--filter--checkbox{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.researches--filter--checkbox span,
.researches--filter--select span,
.researches--filter--date > span,
.researches--filter--radio-img > span{
    font-size: 20px;
}
.researches--filter--radio-img{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.researches--filter--radio-img > div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.researches--filter--radio-img > div label{
    cursor: pointer;
    height: 58px;
    width: 58px;
}
.researches--filter--radio-img > div label input{
    display: none;
}
.researches--filter--radio-img > div label img{
    width: 100%;
    height: 100%;
    background-image: url(/public/img/researches--filter--radio-img--default.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 18%;
    box-sizing: border-box;
}
.researches--filter--radio-img > div label input:checked + img{
    background-image: url(/public/img/researches--filter--radio-img--active.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.researches--filter--checkbox input{
    display: none
}
.researches--filter--checkbox input + span{
    display: block;
    box-shadow: inset -1px -1px 1px 1px rgba(209, 209, 209, 0.7), inset 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    background: var(--gray-bg-gradient);
    width: 24px;
    height: 24px;
    border-radius: 100px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
}
.researches--filter--checkbox input + span::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2C98F7;
    width: 16px;
    height: 16px;
    display: block;
    border-radius: 100px;
    box-sizing: border-box;
    box-shadow: inset 0px 0px 1px 3px rgba(0, 0, 0, 0.7);

    /* transition: all 0.15s ease-in-out; */
}
.researches--filter--checkbox input:not(:checked) + span::before{
    opacity: 0;
}

.researches--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
}
.no-content--placeholder{
    text-align: center;
    font-size: 25px;
}
.text-wall{
    text-align: center;
    font-size: 25px;
}
@media screen and (max-width: 1312px) {
    .no-content--placeholder{
        font-size: 15px;
    }
    .researches--filter--title h2{
        font-size: 20px;
    }

    .researches--filter--checkbox span,
    .researches--filter--select span,
    .researches--filter--date > span{
        font-size: 15px;
    }
    .researches--filter--checkbox input + span{
        width: 18px;
        height: 18px;
    }
    .text-wall{
        font-size: 15px;
    }
}
.researches--list-item{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 8px;
    background: var(--gray-bg-gradient);
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.5);

    position: relative;

    transition: background 0.15s ease-in-out;
}
.researches--list-item:hover{
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.researches--list-item .fav-star{
    width: 23px;
    height: 23px;
    display: block;

    position: absolute;
    top: 20px;
    right: 20px;
}
@media screen and (max-width: 1312px) {
    .researches--list-item .fav-star{
        top: 12px;
        right: 12px;
        width: 19px;
        height: 19px;
    }
}
.researches--list-item > .fav-star.favorite{
    background: url(/public/img/researches--fav-star.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.researches--list-item > .fav-star.not-favorite{
    background: url(/public/img/researches--nonfav-star.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.researches--list-item > .fav-star.not-favorite:hover{
    background: url(/public/img/researches--nonfav-star--hover.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.researches--list-item > div:nth-child(1){
    display: grid;
    grid-template-columns: 57px 1fr;
    column-gap: 20px;
}
.researches--list-item > div:nth-child(1) > div:nth-child(1){
    width: 57px;
    height: 57px;
}
.researches--list-item > div:nth-child(1) > div:nth-child(1) > img{
    width: 100%;
    height: 100%;
    object-fit: contain;

    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
    background: linear-gradient(115.33deg, rgba(209, 209, 209, 0.3) -8.48%, rgba(188, 188, 188, 0.05) 130.76%);

}
.researches--list-item > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.researches--list-item > div:nth-child(1) > div:nth-child(2) > h3{
    padding-right: 50px;
    box-sizing: border-box;
}
.researches--list-item > div:nth-child(1) > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
}
.researches--list-item > div:nth-child(1) > div:nth-child(2) > div > span{
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    line-height: 1em;
    text-transform: uppercase;
    font-family: "spaceranger";
    color: white;
    box-sizing: border-box;
}
.researches--list-item > div:nth-child(1) > div:nth-child(2) > div > span.blue{
    background: #2C98F7;
}
.researches--list-item > div:nth-child(1) > div:nth-child(2) > div > span.green{
    background: #20CE55;
}
.researches--list-item > div:nth-child(1) > div:nth-child(2) > div > span.yellow{
    background: #FCBC1D;
}
.researches--list-item > div:nth-child(2){
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    gap: calc(var(--gap) / 2);
}
.researches--list-item > div:nth-child(2) > div.tooltip-container > *:nth-child(1) > img{
    padding: 4px;
    box-sizing: border-box;
    width: 39px;
    height: 39px;
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7); */
    border-radius: 100px;
    cursor: pointer;
    /* background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%); */


    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.researches--list-item > div:nth-child(2) > div.tooltip-container:hover > div:nth-child(1) > img{
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.researches--list-item > div:nth-child(2) > div:not(.tooltip-container){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    gap: 10px;

    font-size: 18px;
    font-family: "spaceranger";
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.researches--list-item > div:nth-child(2) > div.tooltip-container{
    height: 38px;
}
.researches--list-item > div:nth-child(2) > div:not(.tooltip-container) > img{
    height: calc(1em - 1px);
}



.pbl--calendar > div:nth-child(1),
.pbl--calendar > div:nth-child(2),
.pbl--calendar > div:nth-child(3){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.pbl--calendar > div:nth-child(1) h2,
.pbl--calendar > div:nth-child(2) h2{
    font-size: 20px;
}
.pbl--calendar > div:nth-child(2) h2{
    min-height: 18px;
    margin-top: var(--gap);
}
.pbl--calendar > div:nth-child(1) img,
.pbl--calendar > div:nth-child(3) img{
    padding: 5px;
    box-sizing: border-box;
    width: 23px;
    height: 23px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
}
.pbl--calendar > div:nth-child(1) img{
    border-radius: 5px;
}

.pbl--calendar > div:nth-child(3) > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    width: 100%;
}
.pbl--calendar > div:nth-child(3) > div:nth-child(1) span{
    opacity: 0.5;
    min-width: 100px;
    text-align: center;
}
.pbl--calendar.active > div:nth-child(3) > div:nth-child(1) img:nth-child(3){
    transform: rotate(180deg);
}


.pbl--calendar > div:nth-child(1) h2,
.pbl--calendar > div:nth-child(2) h2{
    color: white;
    transition: all 0.15s ease-in-out;
}
.researches--filter.active .researches--filter--title h2,
.pbl--calendar.active > div:nth-child(1) h2,
.pbl--calendar.active > div:nth-child(2) h2{
    color: #2C98F7;
}

.pbl--calendar > div:nth-child(4),
.pbl--calendar > div:nth-child(5){
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 12px;
    row-gap: 12px;
}
.pbl--calendar a.button{
    margin-top: auto;
}
.pbl--calendar > div:nth-child(4) > *,
.pbl--calendar > div:nth-child(5) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.pbl--calendar > div:nth-child(5) > *{
    border-radius: 8px;
    background: var(--gray-bg-gradient);
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    height: 37px;
}
.pbl--calendar > div:nth-child(5) > *.active{
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}

@media screen and (min-width: 720px) {
    .researches--filter .button{
        display: none;
    }
    .researches--mobile-menu-btns{
        display: none;
    }
}

@media screen and (max-width: 1312px) {
    .researches--list-item > div:nth-child(1) > div:nth-child(2) > div > span{
        height: 23px;
    }
    .researches--filter--title > img:nth-child(2){
        width: 23px;
        height: 23px;
    }
    .researches-container{
        grid-template-columns: 224px 1fr;
        gap: 12px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > img{
        display: none;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(1){
        height: 20px;
    }
    .researches-container > .researches--content{
        gap: 12px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll{
        padding: 12px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div{
        overflow: auto;
        padding-bottom: 12px;
        width: calc(720px - 224px - 12px - 24px);
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div{
        height: 66px;
        gap: 10px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div > span:nth-child(1){
        font-size: 20px;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div > div > div:nth-child(2) > div > div{
        padding: 10px 0px;
        width: 40px;
    }
    .researches--title::before, .researches--title::after{
        width: calc(720px / 2 - 20px - 50%);
    }
    .researches--list-item{
        padding: 9px;
        gap: 11px;
    }
    .researches--list-item > div:nth-child(1){
        display: flex;
        position: relative;
    }
    .researches--list-item > div:nth-child(1) > div:nth-child(1){
        position: absolute;
        top: 0px;
        left: 0px;
        width: 45px;
        height: 45px;
    }
    .researches--list-item > div:nth-child(1) > div:nth-child(1) > img{
        padding: 5px;
    }
    #research-swiper .researches--list-item .button{

        font-size: 14px;
        height: 28px;
    }
    .researches--list-item > div:nth-child(1) > div:nth-child(2) > h3{
        padding-left: 57px;
        box-sizing: border-box;
        min-height: 45px;
        padding-right: 33px;
        font-size: 15px;

        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .researches--list-item > img:last-child{
        width: 21px;
        height: 21px;
    }
    .researches--list-item > div:nth-child(2) > div.tooltip-container > *:nth-child(1) > img{
        height: 23px;
        width: 23px;
        padding: 2px;
    }
    .researches--list-item > div:nth-child(2) > div:not(.tooltip-container){
        height: 23px;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 6px;
    }
    .researches--list-item > div:nth-child(2) > div.tooltip-container{
        height: 23px;
    }
    .researches--filter{
        padding: 12px;
        gap: 15px;
    }

    .researches--filter .scroll{
        gap: 15px;
    }
    .researches--filter--title{
        margin-bottom: 9px;
    }
}
@media screen and (min-width: 720px){
    .researches--filter--title > img:nth-child(3){
        display: none;
    }

    .pbl--calendar{
        display: none;
    }
}
@media screen and (max-width: 720px){
    .researches-container{
        grid-template-columns: 1fr;
    }
    .researches--mobile-menu-btns{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--gap);
    }
    .researches--mobile-menu-btns .button{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
        font-size: 18px;
    }
    .researches--mobile-menu-btns .button img{
        height: 21px;
    }
    .researches--filter--title > img:nth-child(3){
        padding: 5px;
        box-sizing: border-box;
        width: 23px;
        height: 23px;
        box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
        border-radius: 100px;
        cursor: pointer;
        background: var(--gray-bg-gradient);
        transform: rotate(-90deg);
    }
    .researches--title::before, .researches--title::after{
        width: calc(100vw / 2 - 20px - 50%);
    }
    .researches--filter--title{
        justify-content: end;
        gap: 12px;
        margin-bottom: 9px;
    }
    .researches--filter--title h2{
        margin-right: auto;
    }

    .researches--filter:not(.active) .researches--filter--title > img:nth-child(2){
        opacity: 0;
    }

    .researches--filter{
        transition: all 0.15s ease-in-out;
        overflow: hidden;
    }
    .researches--filter:not(.active){
        display: none;
    }
    .researches--filter.active{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999999;
        border-radius: 0px;
    }
    .researches--filter > .scroll{
        height: calc(100% - 23px - 37px - 14px - 45px - 4px);
        overflow: auto;
    }
    .researches-container > .researches--content > .researches--calendar-scroll{
        display: none;
    }
    .researches-container > .researches--content > .researches--calendar-scroll > .pbl--scroll-calendar > div > div{
        width: calc(100vw - 24px - 24px);
    }

    .pbl--calendar{
        display: flex;
        flex-direction: column;
        gap: 15px;
        box-sizing: border-box;
        padding: 15px;
        background: #161618 linear-gradient(-80deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
        box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);

        max-height: 1000vh;
        transition: all 0.15s ease-in-out;
        overflow: hidden;

        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 99999;
    }
    .pbl--calendar:not(.active){
        display: none;
    }
}




@media screen and (max-width: 1312px) {
    .index--planet-grid{
        grid-template-columns: 190px 1fr 190px;
        min-height: 382px;
    }
    .index--planet-grid--planet #planetRendererContainer{
        width: 220px;
        height: 220px;
    }
    .planet-page .index--planet-grid--planet #planetRendererContainer{
        width: 243px;
        height: 243px;
    }
    .index--planet-grid--planet .radar{
        width: 245px;
        height: 67px;
    }
    .index--planet-grid--system-info > div:nth-child(1){
        display: none;
    }
    .index--planet-grid--visual{
        display: none;
    }
    .index--planet-grid--planet #planet-selector{
        grid-template-columns: 23px 1fr 23px;
    }
    .index--planet-grid--planet #planet-selector .button-prev, .index--planet-grid--planet #planet-selector .button-next{
        width: 23px;
        height: 23px;
    }
    .index--planet-grid--planet .radar{
        margin-top: -73px;
    }
    .planet-page .index--planet-grid--planet .radar{
        margin-top: -111px;
    }
    .index--planet-grid--system-info,
    .index--planet-grid > div:nth-child(3){
        padding: 11px;
    }
    .index--planet-grid--research > div:nth-child(1),
    .index--planet-grid--system-info > div:nth-child(2){
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 0px;
    }
    .index--planet-grid--research > div:nth-child(1) > div:nth-child(2),
    .index--planet-grid--system-info > div:nth-child(2) > div:nth-child(2){
        gap: 6px;
        width: 100%;
        text-align: center;
        align-items: center;
    }
    .index--planet-grid--research > div:nth-child(1) > *:nth-child(1){
        width: 65px;
        height: 65px;
    }
    .index--planet-grid--research{
        gap: 15px;
    }
    .index--planet-grid--planet #planet-selector .swiper-slide > img{
        height: 40px;
        width: 40px;
        padding: 2px;
    }
    .index--planet-grid--planet .planet-container .icons > div > *:nth-child(2){
        max-width: 150px;
        font-size: 8px;
    }
    .index--planet-grid--planet > h2{
        font-size: 20px;
    }
    .index--planet-grid--system-info, .index--planet-grid > div:nth-child(3){
        gap: 15px;
    }
    .index--greetings{
        grid-template-columns: 1fr;
    }
    .index--greetings > *:not(:nth-child(2)){
        display: none;
    }
    .index--research-slider--container{
        grid-template-columns: 30px 1fr 30px;
        column-gap: 12px;
    }
    .index--research-slider--container > div:nth-child(2){
        padding: 12px;
    }
    .index--research-slider--container > div:nth-child(2){
        grid-template-columns: 10px 1fr 10px;
        column-gap: 21px;
    }
    #research-swiper .no-research > img{
        height: 75px;
    }
    #research-swiper .no-research{
        height: 148px;
    }
    /* .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
        position: unset;
        left: unset;
        right: unset;
        top: unset;
        width: 60px;
    } */
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)){
        justify-content: end;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(1){
        align-items: start;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(3){
        align-items: end;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(2){
        height: 242px;
        width: 10px;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1) .pseudolines{
        width: 64px;
        height: 8px;
        gap: 1px;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1) .pseudolines > div{
        gap: 1px;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1) .pseudolines > div > div{
        height: 1px;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
        height: 19px;
        width: 64px;
        gap: 0px;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-prev,
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-next{
        width: 23px;
        height: 23px;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-prev > img,
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-next > img{
        width: 100%;
        height: 100%;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > span{
        font-size: 20px;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) .pseudolines:not(.grey), .index--research-slider--container > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) .pseudolines:not(.grey){
        width: 49px;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
        flex-direction: column-reverse;
    }
    #research-swiper{
        /* height: 212px;
        padding: 2px;
        padding-top: 42px!important;
        padding-bottom: 42px!important; */

        height: 273px;
        padding: 2px;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        /* margin-bottom: -86px; */
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2){
        overflow: hidden;
    }
    #research-swiper .researches--list-item > div:nth-child(1) > div:nth-child(2) > div > span{
        padding: 4px 9px;
        font-size: 9px;
        border-radius: 4px;
        height: 16px;
    }
    #research-swiper .researches--list-item > div:nth-child(2) > div:not(.tooltip-container){
        padding: 4px 9px;
        font-size: 9px;
        border-radius: 4px;
        gap: 6px;
    }
    #research-swiper .researches--list-item > div:nth-child(2) > div.tooltip-container{
        height: 18px;
    }
    #research-swiper .researches--list-item > div:nth-child(2) > div.tooltip-container > *:nth-child(1) > img{
        height: 18px;
        width: 18px;
    }
    #research-swiper .researches--list-item > div:nth-child(2){
        gap: 4px;
    }


    .index--planet-grid.no-planet .index--planet-grid--system-info > img, .index--planet-grid.no-planet > div:nth-child(3) > img{
        width: 146px;
    }
    .index--planet-grid.no-planet .index--planet-grid--system-info::before, .index--planet-grid.no-planet > div:nth-child(3)::before{
        background: url(/public/img/no-planet-grid-top--tablet.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: auto 100%;
    }
    .index--planet-grid.no-planet .index--planet-grid--system-info::after, .index--planet-grid.no-planet > div:nth-child(3)::after{
        background: url(/public/img/no-planet-grid-bottom--tablet.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: auto 100%;
    }
    .index--planet-grid--planet .planet-container > .wireframe-sphere{
        width: 200px;
        height: 200px;
    }
    .index--planet-grid--planet > div.placeholder > div:nth-child(1), .index--planet-grid--planet > div.placeholder > div:nth-child(3){
        height: 60px;
        width: 60px;
        padding: 8px;
    }
    .index--planet-grid--planet > div.placeholder{
        grid-template-columns: 60px 1fr 60px;
        column-gap: 12px;
    }
    .index--planet-grid--planet > div.placeholder > div:nth-child(2){
        padding: 8px;
        height: 60px;
    }
    .index--planet-grid--planet > div.placeholder > div:nth-child(2) > div:nth-child(odd){
        display: none;
    }
}
.index--planet-grid--visual--mobile{
    display: none;
}
@media screen and (max-width: 720px) {
    .index--planet-grid--planet > h2{
        margin-top: 18px;
    }
    .index--planet-grid--planet .planet-container .icons > div > *:nth-child(2){
        left: -12px;
        top: calc(100% + 12px);
        padding: 12px;
        max-width: 133px;
    }
    #research-swiper .researches--list-item > div:nth-child(2) > div:not(.tooltip-container){
        padding: 4px 4px;
    }
    /* .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
        position: unset;
        left: unset;
        right: unset;
        top: unset;
        width: 60px;
    } */
    .index--planet-grid{
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .index--planet-grid--system-info{
        order: 1;
        background: unset;
        box-shadow: none;
        padding: 0px;
        border: none;
    }
    .index--planet-grid--system-info > div:nth-child(3){
        text-align: center;
    }
    .index--planet-grid--system-info > *:nth-child(1),
    .index--planet-grid--system-info > *:nth-child(2),
    .index--planet-grid--system-info > .skifi-panel{
        display: none!important;
    }
    .index--planet-grid > div:nth-child(3){
        order: 2;
        min-height: 297px;
    }
    .index--planet-grid--planet #planet-selector{
        order: -1;
        /* grid-template-columns: 1fr; */
    }
    .index--greetings > div:nth-child(2){
        height: auto;
    }

    .index--planet-grid--research > div:nth-child(1){
        display: grid;
        grid-template-columns: 65px 1fr;
        column-gap: 12px;
        margin-bottom: 10px;
        align-items: left;
    }
    .index--planet-grid--research > div:nth-child(1) > *:nth-child(1){
        width: 65px;
        height: 65px;
    }
    .index--planet-grid--research > div:nth-child(1) > div:nth-child(2){
        align-items: start;
    }
    .index--planet-grid--no-research > .pseudolines{
        gap: 5px;
        height: 23px;
    }
    .index--planet-grid--no-research > .pseudolines:nth-child(3){
        margin-bottom: 12px;
    }
    .index--planet-grid--no-research > .pseudolines > div > div{
        height: 2px;
    }
    .index--planet-grid--no-research{
        gap: 12px;
    }

    .index--planet-grid--visual{
        display: none;
    }
    .index--planet-grid--visual--mobile{
        display: grid;
        grid-template-columns: 5px 8px 1fr 32px 1fr 8px 5px;
        column-gap: 8px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(1),
    .index--planet-grid--visual--mobile > div:nth-child(7),
    .index--planet-grid--visual--mobile > div:nth-child(2),
    .index--planet-grid--visual--mobile > div:nth-child(6){
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(1) > div,
    .index--planet-grid--visual--mobile > div:nth-child(7) > div{
        width: 5px;
        height: 5px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(2) > div,
    .index--planet-grid--visual--mobile > div:nth-child(6) > div{
        width: 8px;
        height: 8px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(3),
    .index--planet-grid--visual--mobile > div:nth-child(5){
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > div:nth-child(2),
    .index--planet-grid--visual--mobile > div:nth-child(5) > div:nth-child(2){
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) .pseudolines,
    .index--planet-grid--visual--mobile > div:nth-child(5) > div:nth-child(2) > div:nth-child(2) .pseudolines{
        gap: 2px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) .pseudolines > div > div,
    .index--planet-grid--visual--mobile > div:nth-child(5) > div:nth-child(2) > div:nth-child(2) .pseudolines > div > div{
        height: 1px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > div:nth-child(2)  .equalizer,
    .index--planet-grid--visual--mobile > div:nth-child(5) > div:nth-child(2)  .equalizer{
        height: 21px;
    }
    .index--planet-grid--visual--mobile > div:nth-child(4){
        height: 30px;
        width: 30px;
        box-sizing: border-box;
        border: 1px solid rgba(156, 156, 156, 0.5);
        position: relative;
    }
    .index--planet-grid--visual--mobile > div:nth-child(4) > img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 23px;
        height: 23px;
        padding: 4px;
        border-radius: 200px;
        /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7); */
        border: 1px solid rgba(156, 156, 156, 0.5);
        box-sizing: border-box;
        background: var(--greybox-gradient);
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > .skifi-panel,
    .index--planet-grid--visual--mobile > div:nth-child(5) > .skifi-panel{
        grid-template-columns: repeat(15, 1fr);
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > .skifi-panel > div:nth-child(odd),
    .index--planet-grid--visual--mobile > div:nth-child(5) > .skifi-panel > div:nth-child(odd){
        display: none;
    }
    .index--planet-grid--visual--mobile > div:nth-child(3) > .skifi-panel > div,
    .index--planet-grid--visual--mobile > div:nth-child(5) > .skifi-panel > div{
        height: 2px;
    }

    .index--planet-grid.no-planet .index--planet-grid--system-info, .index--planet-grid.no-planet > div:nth-child(3){
        display: none;
    }

    .index--research-slider--container{
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .index--research-slider--container .radar-m-container:first-child{
        display: none;
    }
    .index--research-slider--container .radar-m-container:last-child{
        flex-direction: row;
        justify-content: space-between;
        gap: 0px;
    }
    .index--research-slider--container .radar-m-container > div{
        width: 30px;
        height: 30px;
    }
    .index--research-slider--container > div:nth-child(2){
        grid-template-columns: 1fr;
        position: relative;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)){
        position: absolute;
        width: 50px;
        padding-top: 35px;
        box-sizing: border-box;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(1){
        left: 12px;
        bottom: 12px;
        height: calc(100% - 24px);
        align-items: start;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(3){
        right: 12px;
        bottom: 12px;
        height: calc(100% - 24px);
        align-items: end;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(2){
        width: 10px;
        height: 265px;
    }
    #research-swiper .no-research{
        height: 170px;
    }
    .index--research-slider--container > div:nth-child(2) > div:not(:nth-child(2)) > div:nth-child(1){
        width: 50px;
        top: 35px;

        display: none;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2){
        gap: 10px;
    }
    #research-swiper{
        height: 296px;
        padding: 2px;
        padding-top: 53px !important;
        padding-bottom: 53px !important;
        /* margin-bottom: -86px; */
        padding-left: 22px;
        padding-right: 22px;
    }
    .index--research-slider--container > div:nth-child(2){
        overflow: hidden;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > span{
        font-size: 20px;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1){
        gap: 12px;
        z-index: 10;
    }
    .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-prev, .index--research-slider--container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) .button-next{
        width: 23px;
        height: 23px;
    }
    #research-swiper .no-research::after{
        background: url(/public/img/no-research-bottom--mobile.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: auto 100%;
    }
    #research-swiper .no-research::before{
        background: url(/public/img/no-research-top--mobile.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: auto 100%;
    }
    #research-swiper .no-research > img{
        height: 88px;
    }
    #research-swiper .button{
        font-size: 13px;
    }
}



.lk-conainer{
    display: grid;
    grid-template-columns: 1fr 979px;
    column-gap: 20px;
    row-gap: 20px;
}
.lk-conainer > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.lk-conainer > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.lk-conainer .lk-container--menu{
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 19px;
    background: #161618 linear-gradient(-80deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 16px 0px rgba(240, 240, 240, 0.32);
    /* background: #161618 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%); */
    height: min-content;
}
.lk-conainer .lk-container--menu .radar-m-container{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
}
.lk-conainer .lk-container--menu .radar-m-container > div{
    height: 39px;
    width: 39px;
}
.lk-conainer .lk-container--menu .lk-container--menu--list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lk-conainer .lk-container--menu .lk-container--menu--list > *{
    display: block;
    width: 100%;
    height: 38px;
    border-radius: 8px;
    padding: 9px 0px;
    box-sizing: border-box;
    border: 1px solid #818181;
    color: #818181;
    text-align: center;
    font-size: 15px;
}
.lk-conainer .lk-container--menu .lk-container--menu--list > *.active{
    color: white;
    background: #2C98F7;
    border-color: #2C98F7;
}


.volunteer-profile{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.volunteer-profile--stats{
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding-top: calc(var(--padding) * 1.5);

    position: relative;
}
.volunteer-profile--stats > div:nth-child(1){
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    gap: var(--padding);
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) .volunteer-profile--stats--profile-pic{
    position: relative;

    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    border: 1px solid #12161A;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    border: 1px solid #A5A5A5;
    box-sizing: border-box;

    box-shadow: 0px 2px 0px 0px #000000;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) .volunteer-profile--stats--profile-pic > img:nth-child(1){
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.volunteer-profile--stats.class > div:nth-child(1) > div:nth-child(1) .volunteer-profile--stats--profile-pic > img:nth-child(1){
    width: 70%;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) .volunteer-profile--stats--profile-pic > img:nth-child(2){
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 1000px;
    border: 1px solid #A5A5A5;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px #000000;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span{
    max-width: 700px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span:nth-child(1){
    font-size: 20px;
}
.volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span:nth-child(2){
    opacity: 0.5;
}
.volunteer-profile--stats > div:nth-child(1) > a:last-child{
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    border: 1px solid #12161A;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}
.volunteer-profile--stats > div:nth-child(1) > a:last-child > img{
    width: 17px;
    height: 17px;
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container{
    display: flex;
    flex-direction: row;
    align-items: center;

    flex-wrap: wrap;
    gap: 10px;

    font-family: "spaceranger";
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *:nth-child(1){
    font-size: 30px;
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *:nth-child(2){
    font-size: 25px;
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *:nth-child(3){
    font-size: 20px;
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *{

    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);

    padding: 0px 15px;
    height: 38px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > * img{
    width: 0.7em;
    /* width: auto; */
}

.volunteer-profile--stats--progressbar{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: end;
    position: relative;
    height: 57px;
    padding: 0px 25px;
    padding-bottom: 8px;
    box-sizing: border-box;
}
.volunteer-profile--stats--progressbar::after{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 62px;
    height: 34px;
    display: block;
    background: url(/public/img/division_rocket.svg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.volunteer-profile--stats--progressbar > div{
    position: relative;
    width: 100%;
    height: 16px;
    border-radius: 100px;


    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.volunteer-profile--stats--progressbar > div  >div:nth-child(1){
    position: absolute;
    right: 0px;
    bottom: 8px;
    transform: translate(50%, 50%);
    z-index: 99;
}
.volunteer-profile--stats--progressbar > div  >div:nth-child(1) > img{
    width: 35px;
    height: 35px;
}
.volunteer-profile--stats--progressbar > div  >div:nth-child(1) > div:nth-child(1){
    position: absolute;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.volunteer-profile--stats--progressbar > div  >div:nth-child(1) > div:nth-child(1) span{
    font-size: 10px;
}
.volunteer-profile--stats--progressbar > div  >div:nth-child(1) > div:nth-child(1) img{
    width: 12px;
    height: 12px;
}
.volunteer-profile--stats--progressbar > div >div:nth-child(2){
    height: 16px;
    border-radius: 100px;
    background: blue;
}

.volunteer-profile--stats--progressbar > div:nth-child(1) >div:nth-child(2){
    background: #2C98F7;
    box-shadow: 0px 0px 4px 0px #2C98F7;
}
.volunteer-profile--stats--progressbar > div:nth-child(2) >div:nth-child(2){
    background: #20CE55;
    box-shadow: 0px 0px 4px 0px #20CE55;
}
.volunteer-profile--stats--progressbar > div:nth-child(3) >div:nth-child(2){
    background: #FCBC1D;
    box-shadow: 0px 0px 4px 0px #FCBC1D;
}
.volunteer-profile--stats--progressbar > div:nth-child(4) >div:nth-child(2){
    background: #F24125;
    box-shadow: 0px 0px 4px 0px #F24125;
}


.volunteer-profile--info{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: auto;
}
.volunteer-profile--info:not(.active) > *:not(:nth-child(1)){
    display: none;
}
.volunteer-profile--info > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.volunteer-profile--info > div:nth-child(1) > img{
    height: 30px;
    width: 30px;
    transform: rotate(90deg);
    box-sizing: border-box;

    border: 1px solid #A5A5A5;
    border-radius: 1000px;
}
.volunteer-profile--info.active > div:nth-child(1) > img{
    scale: -1;
    background: #161618;
}
.volunteer-profile--info--list{
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}
.volunteer-profile--info--list .double{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.volunteer-profile--info--list .triple-excentro{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: 20px;
}
.volunteer-profile--info--list .double > div,
.volunteer-profile--info--list .single,
.volunteer-profile--info--list .triple-excentro > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
}
.volunteer-profile--info--list .double > div{
    width: 459px;
}
.volunteer-profile--info--list .triple-excentro > div:nth-child(1){
    width: 459px;
}
.volunteer-profile--info--list .triple-excentro > div:not(:nth-child(1)){
    width: 219px;
}
.volunteer-profile--info--list .single{
    width: 100%;
}
.volunteer-profile--info--list option{
    color: black;
}
.volunteer-profile--info--list .double > div > *:nth-child(2),
.volunteer-profile--info--list .single > *:nth-child(2),
.volunteer-profile--info--list .triple-excentro > div > *:nth-child(2){
    height: 38px;
    padding: 10px 15px;

    box-sizing: border-box;
    width: 100%;

    outline: none;
    opacity: 1;

    color: white;

    border: none;


    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.volunteer-profile--info--list .single > *:nth-child(2){
    height: auto!important;
    white-space: normal;

}
.volunteer-profile--info--list .double > div > *,
.volunteer-profile--info--list .single > *,
.volunteer-profile--info--list .triple-excentro > div > *{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.volunteer-profile--info--list .double > div > select:nth-child(2),
.volunteer-profile--info--list .single > select:nth-child(2),
.volunteer-profile--info--list .triple-excentro > div > select:nth-child(2){
    appearance: none;
    padding-right: 35px;
    box-sizing: border-box;
    background-image: url(/public/img/select-arrow.svg), linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    background-position: right 15px center, center center;
    background-size: 8px 13px, 100% 100%;
    background-repeat: no-repeat;
}

.volunteer-profile--info--list .double > div.editable,
.volunteer-profile--info--list .single.editable,
.volunteer-profile--info--list .triple-excentro > div.editable{
    position: relative;
    padding-right: 48px;
}
.volunteer-profile--info--list div.editable > a{
    position: absolute;
    bottom: 0px;
    right: 0px;

    width: 38px;
    height: 38px;
    background: #2C2E2F linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    border-radius: 8px;
    border: 1px solid #A5A5A5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.volunteer-profile--info--list *:not(.editing) .save{
    display: none!important;
}
.volunteer-profile--info--list *.editing .save{
    display: flex!important;
}
.volunteer-profile--info--list *.editing .edit{
    display: none!important;
}
.volunteer-profile--info--list div.editable > a > img{
    width: 17px;
    height: 17px;
}

.volunteer-profile--info--list .id-block{
    display: grid;
    grid-template-columns: 152px 1fr;
    column-gap: 20px;
}
.volunteer-profile--info--list .id-block > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.volunteer-profile--info--list .id-block > div:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 152px;
    width: 152px;
    gap: 6px;
    box-sizing: border-box;

    background: #2C2E2F linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    border-radius: 8px;
    border: 1px solid #A5A5A5;
}
.volunteer-profile--info--list .id-block > div:nth-child(1) > img:nth-child(1){
    width: 106px;
    height: 91px;
    object-fit: contain;
    object-position: center;
}

.volunteer-profile--info--list .id-block > div:nth-child(1) > img:nth-child(2){
    width: 38px;
    height: 38px;
    background: #2C2E2F linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    border-radius: 8px;
    border: 1px solid #A5A5A5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
}
.volunteer-researches{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
@media screen and (max-width: 1312px) {
    .volunteer-researches > .researches--filter--checkbox{
        font-size: 15px;
    }
}
@media screen and (max-width: 720px) {
    .volunteer-researches > .researches--filter--checkbox{
        font-size: 12px;
    }
}
.volunteer-researches--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    width: 100%;
}
.volunteer-researches--item{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    width: 100%;

    box-sizing: border-box;
}
.volunteer-researches--item > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    width: 100%;

    box-sizing: border-box;
    padding: 20px;
    border-radius: 8px;
    background: var(--gray-bg-gradient);

    transition: all 0.15s ease-in-out;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    position: relative;
}
.volunteer-researches--item > div:nth-child(1):hover{
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.volunteer-researches--item.active > div:nth-child(1){
    background: linear-gradient(0deg, #161618 0%, #2C2E2F 100%);
    /* box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5); */
    /* border: 1px solid #A5A5A5; */
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
    display: grid;
    grid-template-columns: 57px 1fr;
    column-gap: 20px;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(1){
    width: 57px;
    height: 57px;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(1) img{
    width: 57px;
    height: 57px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2) > *{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2) > * span{
    padding: 5px 10px;
    height: 23px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    line-height: 1em;
    text-transform: uppercase;
    font-family: "spaceranger";
}

.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2) > * span.blue{
    background: #2C98F7;
    color: white;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2) > * span.green{
    background: #20CE55;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2) > * span.yellow{
    background: #FCBC1D;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.volunteer-researches--item .fav-star{
    width: 25px;
    height: 25px;
    display: block;
}
.volunteer-researches--item .fav-star.not-favorite{
    background: url("/public/img/researches--nonfav-star.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.volunteer-researches--item .fav-star.favorite{
    background: url("/public/img/researches--fav-star.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > img{
    height: 28px;
    width: 28px;
    transform: rotate(90deg);
    box-sizing: border-box;
    border: 1px solid #A5A5A5;
    border-radius: 1000px;

    cursor: pointer;
}
.volunteer-researches--item.active > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > img{
    transform: rotate(-90deg);
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 10px;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div.tooltip-container{
    height: 39px;
}
@media screen and (max-width: 1312px) {
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div.tooltip-container, .volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div.tooltip-container > div{
        height: 23px;
    }
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div:not(.tooltip-container){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    gap: 10px;
    font-size: 20px;
    font-family: "spaceranger";
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div.tooltip-container > *:nth-child(1) > img{
    padding: 4px;
    box-sizing: border-box;
    width: 39px;
    height: 39px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    cursor: pointer;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}

.volunteer-researches--item:not(.active) > .volunteer-researches--item--stats{
    display: none;
}

.volunteer-researches--item--stats{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 20px;
    border-radius: 8px;
    background: var(--gray-bg-gradient);
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
}
.volunteer-researches--item--stats > div.grid,
.volunteer-researches--item--stats > div.grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--gap);
}
.volunteer-researches--item--stats > div.grid > div{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    border-radius: 8px;
    padding: 1em;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.volunteer-researches--item--stats > div.grid > div > span:nth-child(1){
    color: rgba(44, 152, 247, 1);
    text-transform: uppercase;
}
.volunteer-researches--item--stats > div.grid > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    flex-wrap: wrap;
}
.volunteer-researches--item--stats > div.grid > div:nth-child(2) > div .tooltip-container > div:nth-child(1){
    width: 44px;
    height: 44px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
}
.volunteer-researches--item--stats > div.grid > div:nth-child(2) > div img{
    width: 100%;
    height: 100%;
}
.volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2){
    font-size: 20px;
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) / 2);
}
.volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2){
    font-size: 20px;
    align-items: center;
}
.volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2) img{
    height: 19px;
    width: 21px;
    object-fit: contain;
    object-position: center;
}

.volunteer-researches--item--stats > div.directions{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    border-radius: 8px;
    padding: 1em;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.volunteer-researches--item--stats > div.directions > div{
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) / 2);
    flex-wrap: wrap;
}
.volunteer-researches--item--stats > div.directions > span:nth-child(1){
    color: rgba(44, 152, 247, 1);
}
.volunteer-researches--item--stats > div.directions > div > div{
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    line-height: 1em;
    text-transform: uppercase;
    font-family: "spaceranger";
    color: white;
    box-sizing: border-box;
}
.volunteer-researches--item--stats > div.directions > div > div > span{
    font-family: "Roboto";
}
.volunteer-researches--item--stats > div.directions > div > div.blue{
    background: #2C98F7;
}
.volunteer-researches--item--stats > div.directions > div > div.green{
    background: #20CE55;
}
.volunteer-researches--item--stats > div.directions > div > div.yellow{
    background: #FCBC1D;
}

.volunteer-researches .researches--filter--checkbox{
    width: 100%;
}
.list-arrow-more{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position: relative;
}
.list-arrow-more img{
    width: 65px;
    height: 65px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border-radius: 1000px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 8px 0px rgba(255, 255, 255, 0.7);
    background: var(--gray-bg-gradient);
    cursor: pointer;
    align-items: center;
}
.researches-container > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.researches-container .arrow-up,
.lk-conainer .arrow-up{
    border-radius: 8px;
    width: 65px;
    height: 65px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 8px 0px rgba(255, 255, 255, 0.7);
    background: var(--gray-bg-gradient);
    cursor: pointer;
    align-items: center;

    position: sticky;
    top: calc(100% - var(--gap) - 65px);
}

@media screen and (min-width: 720px) {
    .list-arrow-more > .arrow-up{
        display: none   ;
    }
}

@media screen and (max-width:1312px) {
    .list-arrow-more{
        margin-top: 12px;
    }
    .list-arrow-more > img,
    .researches-container .arrow-up,
    .lk-conainer .arrow-up{
        width: 40px;
        height: 40px;
        padding: 12px!important;
        top: calc(100% - var(--gap) - 40px);
    }
}
@media screen and (max-width:720px){
    .volunteer-researches--list + .list-arrow-more{
        margin-top: 18px;
    }
    .list-arrow-more > .arrow-up{
        left: unset;
        right: 0px;

        top: 0px;
        position: absolute;
    }
    .list-arrow-more > img{
        width: 50px!important;
        height: 50px!important;
    }
    .researches-container .researches--filter + .arrow-up{
        display: none;
    }
    .researches-container > div:nth-child(1){
        margin-bottom: calc(var(--gap) * -1);
    }
}


.volunteer-researches--item > .volunteer-researches--item--comments{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.volunteer-researches--item:not(.active) > .volunteer-researches--item--comments{
    display: none;
}
.volunteer-researches--item > .volunteer-researches--item--comments .volunteer-researches--item--comments--list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}
.volunteer-researches--item > .volunteer-researches--item--comments .volunteer-researches--item--comments--list.scroll{
    max-height: 586px;
    overflow: auto;
    padding-right: 25px;
}

@media screen and (max-width: 1312px) {
    .lk-conainer{
        grid-template-columns: 1fr 484px;
        column-gap: 12px;
    }
    .volunteer-researches--item--stats{
        padding: 12px;
    }
    .volunteer-researches--item--stats > div.grid,
    .volunteer-researches--item--stats > div.grid-3{
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--gap);
    }

    .volunteer-researches--item--stats > div.grid > div:nth-child(2) > div .tooltip-container > div:nth-child(1){
        width: 30px;
        height: 30px;
    }
    .volunteer-researches--item--stats > div.grid > div:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .volunteer-researches--item--stats > div.grid > div:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .volunteer-researches--item--stats > div.grid > div:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

    .volunteer-profile--stats > div:nth-child(1){
        flex-direction: column;
        gap: 12px;
        align-items: start;
        position: relative;
    }
    .volunteer-profile--stats > div:nth-child(1) > a:last-child{
        top: 0px;
        transform: none;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1){
        gap: 12px;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) .volunteer-profile--stats--profile-pic{
        width: 45px;
        height: 45px;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) .volunteer-profile--stats--profile-pic > img:nth-child(2){
        width: 14px;
        height: 14px;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2){
        gap: 6px;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span{
        max-width: 370px;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span:nth-child(1){
        font-size: 12px;
    }
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span:nth-child(2){
        font-size: 10px;
    }
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container{
        flex-wrap: wrap;
        justify-content: start;
    }
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *:nth-child(1),
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *:nth-child(2),
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *:nth-child(3){
        font-size: 12px;
    }
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > * img{
        height: 18px;
        width: auto;
    }
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *{
        height: 30px;
        padding: 0px 12px;
        gap: 6px;
    }
    .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > *{
        gap: 6px;
    }
    .lk-conainer .lk-container--menu .radar-m-container > div:last-child{
        display: none;
    }
    .volunteer-profile--stats--progressbar > div >div:nth-child(1) > div:nth-child(1) span{
        font-size: 8px;
    }
    .volunteer-profile--stats--progressbar > div >div:nth-child(1) > div:nth-child(1){
        bottom: calc(100% + 4px);
    }
    .volunteer-profile--info--list .double,
    .volunteer-profile--info--list .triple-excentro{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .volunteer-profile--info--list .id-block > div:nth-child(2){
        gap: 12px;
    }
    .volunteer-profile--info--list .double > div,
    .volunteer-profile--info--list .triple-excentro > div,
    .volunteer-profile--info--list .triple-excentro > div:not(:nth-child(1)),
    .volunteer-profile--info--list .triple-excentro > div:nth-child(1),
    .volunteer-profile--info--list .single{
        width: 100%;
        font-size: 12px;
    }
    .volunteer-profile--info > div:nth-child(1) > img{
        height: 23px;
        width: 23px;
    }
    .volunteer-profile--info--list .id-block > div:nth-child(1){
        width: 120px;
        height: 120px;
    }
    .volunteer-profile--info--list .id-block > div:nth-child(1) > img:nth-child(1){
        width: 84px;
        height: 71px;
    }
    .volunteer-profile--info--list .id-block > div:nth-child(1) > img:nth-child(2){
        width: 34px;
        height: 34px;
        padding: 6px;
    }
    .volunteer-profile--info--list .id-block{
        grid-template-columns: 120px 1fr;
        column-gap: 12px;
    }

    .volunteer-profile--info--list .double > div > *:nth-child(2), .volunteer-profile--info--list .single > *:nth-child(2), .volunteer-profile--info--list .triple-excentro > div > *:nth-child(2){
        height: 34px;
    }
    .volunteer-profile--info--list div.editable > a{
        height: 34px;
        width: 34px;
    }
    .volunteer-profile--info--list .double > div.editable, .volunteer-profile--info--list .single.editable, .volunteer-profile--info--list .triple-excentro > div.editable{
        padding-right: 40px;
    }
    .volunteer-profile--info--list .double > div, .volunteer-profile--info--list .single, .volunteer-profile--info--list .triple-excentro > div{
        gap: 6px;
    }



    .volunteer-researches--item > div:nth-child(1){
        position: relative;
    }
    .volunteer-researches--item .fav-star{
        position: absolute;
        top: 12px;
        right: 12px;
        width: 19px;
        height: 19px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > img{
        position: absolute;
        bottom: 12px;
        right: 12px;
        width: 23px;
        height: 23px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(1) img,
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(1){
        width: 45px;
        height: 45px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(1){
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
        position: relative;
        display: block;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2) > *:nth-child(1){
        margin-left: calc(45px + 12px);
        min-height: 45px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(2){
        gap: 6px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div:not(.tooltip-container){
        height: 23px;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 6px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div:not(.tooltip-container) img{
        height: 1em;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(2) > div.tooltip-container > *:nth-child(1) > img{
        height: 23px;
        width: 23px;
        padding: 2px;
    }
    .lk-conainer .lk-container--menu{
        padding: 11px;
        gap: 15px;
    }
    .volunteer-researches{
        gap: 12px;
    }

    .volunteer-researches--item > .volunteer-researches--item--comments{
        padding: 12px;
        gap: 12px;
    }
    .volunteer-researches--item > .volunteer-researches--item--comments .volunteer-researches--item--comments--list{
        gap: 12px;
    }
    .volunteer-researches--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > *:nth-child(2){
        gap: 12px;
    }
    .volunteer-researches--item > div:nth-child(1){
        padding: 12px;
    }
    .volunteer-profile--stats{
        gap: 12px;
    }
}

@media screen and (max-width: 720px) {
    .lk-conainer{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .lk-conainer .lk-container--menu .radar-m-container,
    .lk-conainer .lk-container--menu .skifi-panel{
        display: none;
    }
    .lk-conainer .lk-container--menu{
        box-shadow: none;
        background: none;
        border: none;
        padding: 0px;
    }
    .lk-conainer .lk-container--menu .lk-container--menu--list{
        flex-direction: row;
        overflow: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
    }
    .lk-conainer .lk-container--menu .lk-container--menu--list > *{
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 15px;
    }
    /*
        .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > div:nth-child(1), .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > div:nth-child(2), .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > div:nth-child(3){
            font-size: 10px;
        } */
    .volunteer-profile--stats > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > span{
        max-width: calc(100vw - 48px - 45px - 12px - 40px - 12px);
    }
    .volunteer-profile--stats > div:nth-child(1){
        padding-right: 0px;
    }
    .volunteer-profile--info--list .double > div, .volunteer-profile--info--list .single{
        width: 100%;
    }
    .volunteer-profile--info--list .id-block{
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
    .volunteer-profile--info--list .id-block > div:nth-child(2){
        width: 100%;
    }
    .volunteer-profile--info h2{
        font-size: 20px;
    }
}


.article{
    display: grid;
    grid-template-columns: 506px 1fr;
    background: var(--gray-bg-gradient);
    border-radius: 10px 5px 5px 10px;
    height: 716px;
}
.article > div:nth-child(1){
    position: relative;
    background: #1A7CE9;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    text-align: center;
    height: 716px;

    z-index: 30;
}
.article > div:nth-child(1)::before{
    content: "";
    position: absolute;
    top: 30%;
    left: 99%;
    width: 27px;
    height: 166px;
    background: url("/public/img/article-thing.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.article > div:nth-child(1) > img{
    height: 122px;
    width: auto;
}
.article > div:nth-child(1) > a:last-child{
    opacity: 0.5;
}
.article > div:nth-child(1) > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.article > div:nth-child(1) .article--planet{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: center;
    align-items: center;
    min-height: 57px;
}
.article > div:nth-child(1) .article--planet img{
    width: 65px;
    height: 65px;
    border-radius: 1000px;
    border: 1px solid #A0A0A0;
    background: rgba(198, 198, 198, 0.17);
    padding: 5px;
    box-sizing: border-box;
}
.article > div:nth-child(1) .article--planet span,
.article > div:nth-child(1) .article--planet span *{
    font-size: 15px!important;
    font-family: "Roboto"!important;
}
@media screen and (min-width: 1312px) {
    .article > div:nth-child(1) > a:last-child{
        font-size: 20px;
    }
}
@media screen and (max-width: 1312px){
    .article > div:nth-child(1) .article--planet{
        min-height: 33px;
    }
    .article > div:nth-child(1) > div{
        gap: 20px;
    }
    .article > div:nth-child(1) .article--planet{
        flex-direction: row;
        gap: 6px;
    }
    .article > div:nth-child(1) .article--planet img{
        width: 33px;
        height: 33px;
    }
    .article > div:nth-child(1) h5{
        font-size: 32px;
    }
    .article > div:nth-child(1) .article--planet span,
    .article > div:nth-child(1) .article--planet span *{
        font-size: 12px!important;
    }
}
@media screen and (max-width: 720px){
    .article > div:nth-child(1) h5{
        font-size: 20px;
    }
}

.article .article--content{
    height: 100%;
    padding: 20px 40px;
    box-sizing: border-box;
    padding-right: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: 1px solid #A5A5A5;
    border-radius: 5px;
    border: 1px solid #A5A5A5;
}
.article .article--content .article--text{
    height: calc(700px - 24px - 12px - 26px - 12px);
    /* display: none; */
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 20px;
    position: relative;
    z-index: 1;
    line-height: 1.2em;
}
.article .article--content .article--text > div{
    position: absolute;
}
.article .article--content .article--text img{
    max-height: calc(700px - 24px - 12px - 26px - 12px);
    height: auto;
    max-width: 100%;
    min-width: 50%;
    object-fit: contain;
    object-position: center;
}
.article .article--content .article--text iframe{
    width: 100%;
    max-height: calc(700px - 24px - 12px - 26px - 12px);
}
.article .article--content .article--text p{
    margin: 1.2em 0px;
}
.article .article--content .article--text p:first-child{
    margin-top: 0px;
}
.article .article--content .article--pagination{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    position: relative;
    z-index: 1;
}
.article .article--content .article--pagination > span:nth-child(1),
.article .article--content .article--pagination > span:nth-child(3){
    cursor: pointer;
    user-select: none;
}
.article .article--content .article--pagination > span{
    opacity: 0.5;
}
.article .article--content .article--pagination > span.disabled{
    opacity: 0.25;
    cursor: not-allowed;
}

.article .article--content .article--text a{
    color: #1A7CE9;
    text-decoration: underline;
}


.article .article--content .article--visuals{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: var(--gray-bg-gradient);

    border-radius: 5px;
}

.article .article--content .article--visuals > div,
.article .article--content .article--visuals::before,
.article .article--content .article--visuals::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background: var(--gray-bg-gradient);
    box-sizing: border-box;

    border-radius: 5px;
    border: 1px solid #A5A5A5;
}
.article .article--content .article--visuals > div,
.article .article--content .article--visuals::after{
    width: calc(100% - 40px);
}
.article .article--content .article--visuals::before{
    width: calc(100% - 20px);
}
.article .article--content .article--visuals > div{
    /* animation: 0.15s infinite article; */
}



@keyframes article {
    0% {
        transform:rotate(0deg);
        z-index: 2;
    }

    100% {
        transform:rotate(-45deg) translateY(-100%);
        opacity: 0;
        z-index: 2;
    }
}

@media screen and (max-width: 1312px) {
    .article .article--content .article--text img,
    .article .article--content .article--text iframe{
        max-height: calc(396px - 18px - 12px - 18px - 12px);
    }
    .article{
        display: flex;
        flex-direction: column-reverse;
    }
    .article .article--content{
        padding: 40px 12px;
        padding-bottom: 20px;
        flex-direction: column-reverse;
        height: calc((18px * 25) + 12px + 24px + 12px);
    }
    .article .article--content .article--pagination{
        font-size: 15px;
    }
    .article > div:nth-child(1) > img{
        height: 58px;
    }

    .article .article--content .article--text{
        height: 396px;
        /* display: none; */
        overflow: hidden;
        text-overflow: ellipsis;

        font-size: 15px;
        position: relative;
        z-index: 1;
    }
    .article{
        height: auto;
    }
    .article > div:nth-child(1){
        height: auto;
        gap: 20px;
        padding: 24px;
    }
    .article .article--content .article--visuals > div, .article .article--content .article--visuals::before, .article .article--content .article--visuals::after{
        width: 100%;
        top: unset;
        bottom: 0px;
    }
    .article .article--content .article--visuals::before{
        height: calc(100% - 12px);
    }
    .article .article--content .article--visuals > div, .article .article--content .article--visuals::after{
        height: calc(100% - 24px);
    }
    .article > div:nth-child(1)::before{
        left: 30%;
        top: -10px;
        z-index: 5;
        transform: translate(-50%, -50%) rotate(-90deg);
    }
}
@media screen and (max-width: 720px) {
    .article > div:nth-child(1)::before{
        width: 14px;
        height: 83px;
        top: -5px;
    }
    .article > div:nth-child(1){
        gap: 12px;
    }
    .article > div:nth-child(1) > img{
        height: 46px;
    }
}


.research-project{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: min-content;
}
.research-project--header{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-project--header > div:nth-child(1){
    display: grid;
    grid-template-columns: 58px 1fr 30px;
    column-gap: var(--gap);
}
.research-project--header > div:nth-child(1) > div:nth-child(1){
    width: 58px;
    height: 58px;
}
.research-project--header > div:nth-child(1) > div:nth-child(1) > img{
    width: 100%;
    height: 100%;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    cursor: pointer;
    background: var(--gray-bg-gradient);
}
.research-project--header > div:nth-child(1) > span:nth-child(2){
    font-family: "spaceranger";
    font-size: 32px;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}
.research-project--header .fav-star{
    width: 30px;
    height: 30px;
    display: block;
}
.research-project--header .fav-star.not-favorite{
    background: url(/public/img/researches--nonfav-star.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.research-project--header .fav-star.favorite{
    background: url(/public/img/researches--fav-star.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.research-project--header .fav-star.not-favorite:hover{
    background: url(/public/img/researches--nonfav-star--hover.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.research-project--header > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
}
.research-project--header > div:nth-child(2) > span{
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    line-height: 1em;
    text-transform: uppercase;
    font-family: "spaceranger";
    height: 28px;
    box-sizing: border-box;
}
.research-project--header > div:nth-child(2) > span.blue{
    background: #2C98F7;
    color: white;
}
.research-project--header > div:nth-child(2) > span.green{
    background: #20CE55;
}
.research-project--header > div:nth-child(2) > span.yellow{
    background: #FCBC1D;
}

.research-project--status{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 10px;
}
@media screen and (max-width: 1312px) {
    .research-project--status{
        gap: 6px;
    }
}
.research-project--status > div:not(.tooltip-container){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    gap: 10px;
    font-size: 20px;
    font-family: "spaceranger";
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.research-project--status > div:not(.tooltip-container) img{
    height: 1em;
}
.research-project--status > div.tooltip-container > *:nth-child(1) > img{
    padding: 4px;
    box-sizing: border-box;
    width: 39px;
    height: 39px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    cursor: pointer;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}

.research-project .research-project--description{
    opacity: 0.5;
    font-size: 20px;
}
.research-project .research-project--description p{
    margin: 0px;
}
.research-project .research-project--tablet-box h3 + .research-project--description{
    margin-top: calc(var(--gap) * -0.5);
}
@media screen and (max-width: 1312px) {
    .research-project .research-project--description{
        font-size: 15px;
    }
}
.research-project > h3 + p{
    margin-top: -10px;
}

.research-project--info{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: var(--gap);
    width: 100%;

}

.research-project--info > div{
    height: 100px;
}
.research-project--info > .research-project--info--region{
    height: 112px;
    position: relative;
}
.research-project--info > div:nth-child(4),
.research-project--info > div:nth-child(5){
    height: 110px;
}

.research-project--info > div{
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}

.research-project--info .research-project--info--planet > *{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.research-project--info .research-project--info--planet > * > *:nth-child(1){
    color: #2C98F7;
}
.research-project--info .research-project--info--planet > * > div{
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    column-gap: var(--gap);
}
.research-project--info .research-project--info--planet > * > div > *:nth-child(1){
    width: 42px;
    height: 42px;
    padding: 4px;
    box-sizing: border-box;
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7); */
    border-radius: 100px;
    cursor: pointer;
    border: 1px solid #B2B2B2;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.research-project--info .research-project--info--dir > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    height: 100%;
    padding-right: 10px;
}
.research-project--info .research-project--info--dir > div > span{
    color: #2C98F7;
}
.research-project--info .research-project--info--dir > div > ul{
    list-style-type: decimal;
    margin: 0px;
    padding-left: 1.5em;
}
.research-project--info .research-project--info--clock > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.research-project--info .research-project--info--clock > div > span{
    color: #2C98F7;
}
.research-project--info .research-project--info--clock > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}
.research-project--info .research-project--info--clock > div > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.research-project--info .research-project--info--clock > div > div > div img{
    height: 18px;
}
.research-project--info .research-project--info--clock > div > div > div:nth-child(2){
    padding: 9px 14px;
    background: #434343 linear-gradient(170deg, #ebdbaf69 0%, #63636300 82%, #8f8f8f2d 100%);
    border: 1px solid #EBDBAF;
    border-radius: 8px;
    box-shadow: 0px 0px 5px 0px white, 0px 5px 0px 0px black;
}

.research-project--info .research-project--info--region > div{
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 10px;
}
.research-project--info .research-project--info--region > div > span:nth-child(1){
    color: #2C98F7;
}
.research-project--info .research-project--info--region > div > div{
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) / 2);
    flex-wrap: wrap;
}
.research-project--info .research-project--info--region > div > div > * > *:nth-child(1){
    width: 40px;
    height: 40px;
    padding: 4px;
    box-sizing: border-box;
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7); */
    border-radius: 100px;
    border: 1px solid #B2B2B2;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.research-project--info .research-project--info--region > div > div > * > *:nth-child(1) > img{
    width: 100%;
    height: 100%;
}

.research-project--partners{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: var(--gap);
    width: 100%;
}
.research-project--partners > div > div > h3{
    color: #2C98F7;
}
.research-project--partners > div > div{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    overflow: auto;
    height: 100%;
}
.research-project--partners > div{
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.research-project--partners .research-project--partners--partner > div > div{
    display: grid;
    grid-template-columns: 65px 1fr;
    column-gap: 20px;
    align-items: center;
}
.research-project--partners .research-project--partners--partner > div > div > *:nth-child(1){
    width: 65px;
    height: 65px;
    padding: 4px;
    box-sizing: border-box;
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(255, 255, 255, 0.7); */
    border-radius: 100px;
    cursor: pointer;
    border: 1px solid #B2B2B2;
    background: #434343 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.research-project--partners .research-project--partners--partner > div > div > *:nth-child(1) img{
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    object-fit: contain;
    object-position: center;
}

.research-project--partners > div{
    height: 123px;
}

.research-project--partners > div.research-project--partners--author > div > div > div > div > span{
    display: block;
}
.research-project--partners > div.research-project--partners--author > div > div > div > div > span:nth-child(2){
    opacity: 0.5;
}

.research-members{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-members--item{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.research-members--item > div:nth-child(1){
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: var(--padding);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.research-members--item > div:nth-child(1) > div:nth-child(1){
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: var(--gap);
}
.research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
    width: 46px;
    height: 46px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    background: var(--gray-bg-gradient);

}
.research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) img{
    width: 100%;
    height: 100%;
}
.research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > *:nth-child(1){
    font-family: "spaceranger";
    font-size: 20px;
    text-transform: uppercase;
}
.research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > *:nth-child(2){
    opacity: 0.5;
}
.research-members--item > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
}
.research-members--item > div:nth-child(1) > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    gap: calc(var(--gap) / 2);
    font-size: 20px;
    font-family: "spaceranger";
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.research-members--item > div:nth-child(1) > div:nth-child(2) > div img{
    height: 1em;
}
.research-members--item > div:nth-child(1) > div:nth-child(2) > img{
    height: 38px;
    width: 38px;
    cursor: pointer;
    transform: rotate(90deg);
}
.research-members--item.active > div:nth-child(1) > div:nth-child(2) > img{
    transform: rotate(-90deg);
}
.research-members--item.active > div:nth-child(1){
    background: linear-gradient(0deg, #161618 0%, #2C2E2F 100%);
    border: 1px solid #A5A5A5;
}
.research-members--item > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-members--item > div:nth-child(2) > div:nth-child(1){
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > *{
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);
    display: grid;
    grid-template-columns: 61px 1fr;
    column-gap: var(--gap);

    transition: all 0.15s ease-in-out;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > *.user-card,
.research-members--item > div:nth-child(2) > div:nth-child(1) > *:hover{
    background: linear-gradient(0deg, #161618 0%, #2C2E2F 100%);
    border: 1px solid #A5A5A5;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(1){
    position: relative;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    border: 1px solid #12161A;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1px solid #A5A5A5;
    box-sizing: border-box;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(1) > img:nth-child(1){
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(1) > img:nth-child(2){
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 1000px;
    border: 1px solid #A5A5A5;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 38px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    gap: var(--gap);
    font-size: 20px;
    font-family: "spaceranger";
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div > .region{
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    background: var(--gray-bg-gradient);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div > .region > img{
    width: 100%;
    height: 100%;
    border-radius: 100px;
}
.research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div > img{
    width: 18px;
    height: 18px;
}
.research-members--item:not(.active) > div:nth-child(2){
    display: none;
}

.research-articles{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: min-content;
}
.research-article-item{
    display: grid;
    grid-template-columns: 1fr 106px;
    align-items: center;
    column-gap: var(--gap);
    padding: var(--padding);
}
.research-article-item > div{
    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    column-gap: var(--gap);
}
.research-article-item > div > div:nth-child(1){
    width: 45px;
    height: 45px;
}
.research-article-item > div > div:nth-child(1) img{
    width: 100%;
    height: auto;
}
.research-article-item > div{
    font-family: "spaceranger";
    text-transform: uppercase;
    font-size: 20px;
}

.research-comments{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: min-content;
}
.research-comment .answer-user{
    color: rgba(44, 152, 247, 1);
    margin-right: 0.5em;
}
.research-comments .research-comments--header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.research-comments .research-comments--header select{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: none;
    padding-right: 30px;
    height: 38px;
    width: min-content;
    box-sizing: border-box;

    cursor: pointer;

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

    background: url(/public/img/select-arrow-down.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center right;
    font-family: "Roboto";
    font-size: 1em;
    height: 1em;
    border-radius: 0px;
    text-align: end;
}

.research-comments .research-comments--header select option{
    background: #404142;
    color: white;
    text-align: start;
}

.research-comments h3 span.research-comments--count{
    font-family: "Roboto";
    font-size: 15px;
    font-weight: 400;
}
@media screen and (max-width: 1312px) {
    .research-comments h3 span.research-comments--count{
        font-size: 12px;
    }
}
.research-comments > .research-comments--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-comments > .research-comments--list.scroll{
    max-height: 944px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 20px;
}
.research-comments > .research-comments--list .research-comments--branch{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap));
}
.research-comment{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.research-comment > *:nth-child(1){
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-comment > *:nth-child(1) p{
    margin: 0px;
    display: inline;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1){
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: var(--gap);
}
.research-comment > *:nth-child(1) > *:nth-child(2).edit{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.research-comment > *:nth-child(1) > *:nth-child(2).edit > *:nth-child(1){
    color: rgba(44, 152, 247, 1);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(1){
    position: relative;
    /* background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%); */
    background: var(--gray-bg-gradient);
    border-radius: 8px;
    border: 1px solid #12161A;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid #A5A5A5;
    box-sizing: border-box;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(1) > img:nth-child(1){
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    object-fit: contain;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(1) > img:nth-child(2){
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border-radius: 1000px;
    border: 1px solid #A5A5A5;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: var(--gap);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(1) > *:nth-child(1){
    font-size: 20px;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(1) > *{
    margin: 0px;
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) / 2);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(1) > *:nth-child(2){
    opacity: 0.5;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(2){
    padding: 6px 12px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #A5A5A5;
    text-align: center;

    font-family: "spaceranger";
    height: 25px;
    text-transform: uppercase;
    white-space: nowrap;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(2).rejected{
    color: rgba(232, 31, 31, 1);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(2).accepted{
    color: rgba(32, 206, 85, 1);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(2).moderation{
    color: rgba(252, 188, 29, 1);
}
.research-comment > *:nth-child(1) > *:nth-child(1) > div:nth-child(2){
    text-align: end;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    align-items: end;
}
.research-comment > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > *{
    opacity: 0.5;
}
.research-comment > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    margin-bottom: calc(var(--gap) * -0.5);
}
.research-comment > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}
.research-comment > div:nth-child(2) > div > *{
    opacity: 0.5;
    cursor: pointer;
    outline: none;
    color: white;
    border: none;
    background: none;
    font-family: "Roboto";
    font-size: 1em;
    padding: 0px;
}
.research-comments > .research-comments--list .research-comments--branch.active .research-comments--show-answer{
    opacity: 1!important;
}
.research-comments > .research-comments--list .research-comments--branch:not(.active) .research-comments--show-answer > span:nth-child(2){
    display: none;
}
.research-comments > .research-comments--list .research-comments--branch.active .research-comments--show-answer > span:nth-child(1){
    display: none;
}
.research-comment > div:nth-child(2) > div > *.not-accepted{
    color: #F24125;
    cursor: default;
}
.research-comment > div:nth-child(2) > div > *.on-moderation{
    color: #FCBC1D;
    cursor: default;
}
.research-comment > div:nth-child(2) > div > *.accepted{
    color: #20CE55;
    cursor: default;
}

.research-comment--answer-container{
    padding-left: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap));

    background: url(/public/img/comment-answer-icon.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: top left;
}
.research-comments > .research-comments--list .research-comments--branch:not(.active) .research-comment--answer-container{
    display: none;
}


.research-comments--input{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.research-comments--input > div:nth-child(1) a{
    color: #2C98F7;
}
.research-comments--input > div:nth-child(1){
    display: grid;
    grid-template-columns: 1fr 38px;
    column-gap: 10px;
}
.research-comments--input > div:nth-child(1) > *:nth-child(2){
    display: flex;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    cursor: pointer;
    height: 38px;
    font-size: 18px;
    border-radius: 8px;
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 4px 2px 0px black; */
    border: 1px solid #B2B2B2;
    background: url(/public/img/input-send.svg), var(--gray-bg-gradient);
    background-size: 17px 14px, 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.15s ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (max-width: 1312px) {
    .research-comments--input > div:nth-child(1) > *:nth-child(2){
        width: 34px;
        height: 34px;
    }
    .research-comments--input > div:nth-child(1){
        grid-template-columns: 1fr 34px;
    }
}

.research-comments--input > div:nth-child(2){
    text-align: end;
    width: 80%;
    margin-left: auto;
}
.research-comments--input > div:nth-child(2) a{
    color: rgba(44, 152, 247, 1);
}

.research-comments--input.disabled .comment-textarea,
.research-comments--input.disabled > div:nth-child(1) > *:nth-child(2){
    opacity: 0.5;
}
.comment-textarea textarea:disabled + span{
    display: none;
}
.research-comments--input.disabled .comment-textarea,
.research-comments--input.disabled textarea,
.research-comments--input.disabled > div:nth-child(1) > *:nth-child(2){
    cursor: not-allowed;
}

.research-curators{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.research-curators .research-curators--curator,
.research-curators .research-curators--partner{
    border-radius: 5px;
    box-sizing: border-box;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.research-curators .research-curators--curator > div:nth-child(2),
.research-curators .research-curators--partner > div:nth-child(2){
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) / 2);
}
.research-curators .research-curators--curator > div:nth-child(2) .tooltip-container div > img,
.research-curators .research-curators--partner > div:nth-child(2) .tooltip-container div > img{
    cursor: pointer;
    border-radius: 100%;
    box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 4px 4px 0px black;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid white;
    background: var(--gray-bg-gradient);
    transition: all 0.15s ease-in-out;
}
.research-curators .research-curators--curator > div:nth-child(2) .tooltip-container.active div > img,
.research-curators .research-curators--partner > div:nth-child(2) .tooltip-container.active div > img{
    background: #161618;
}
.research-curators .research-curators--curator > div:nth-child(1),
.research-curators .research-curators--partner > *:nth-child(1){
    display: grid;
    grid-template-columns: 65px 1fr;
    column-gap: 20px;
}
.research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(1){
    position: relative;
    background: var(--gray-bg-gradient);
    border-radius: 8px;
    border: 1px solid #12161A;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border: 1px solid #A5A5A5;
    box-sizing: border-box;
}
.research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(1) > img:nth-child(1){
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(1) > img:nth-child(2){
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 1000px;
    border: 1px solid #A5A5A5;
}
.research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(1){
    width: 65px;
    height: 65px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    background: var(--gray-bg-gradient);
}
.research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(1) > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(2),
.research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(2) > *:nth-child(1),
.research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(2) > *:nth-child(1){
    font-family: "spaceranger";
    font-size: 20px;
    text-transform: uppercase;
}
.research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(2) > *:nth-child(2),
.research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(2) > *:nth-child(2){
    opacity: 0.5;
}

.research-curators .research-curators--list{
    border-radius: 5px;
    box-sizing: border-box;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: var(--padding);
    padding: 15px;
}
.research-curators .research-curators--list > div{
    height: 100%;
    overflow: auto;
}
.research-curators .research-curators--list ul{
    padding-left: 1.5em;
    margin: 0px;
    list-style-type: decimal;
}
.research-curators .research-curators--list ul span:nth-child(2){
    opacity: 0.5;
}

.send-rocket{
    width: 100%;
    height: 100%;


    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: 18px;
}
.send-rocket > div:nth-child(1){
    height: 65px;
    width: 65px;
    border-radius: 200px;
    box-sizing: border-box;
    padding: 19px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 20px;
    box-sizing: border-box;
    background: var(--greybox-gradient);
}
.send-rocket > div:nth-child(1) img{
    width: 100%;
    height: 100%;
}
.send-rocket > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    align-items: center;
    justify-content: center;
    text-align: center;
}
.send-rocket > div:nth-child(2) > *:nth-child(1){
    color: #20CE55;
}
.send-rocket > div:nth-child(2) > *:nth-child(2),
.send-rocket a{
    opacity: 0.5;
}
.research-report > *:not(.sended) .send-rocket{
    display: none;
}
.research-report > *.sended > *:not(.send-rocket){
    display: none;
}
@media screen and (max-width: 1312px) {

}
.research-report > *:invalid input[type="submit"],
.research-report > *:invalid .submit,
.research-report .report-photo--container:not(:has( > *)) ~ .report-btns .submit,
.research-report .report-photo--container:not(:has( > *)) ~ .report-btns input[type="submit"],
.research-report .report-video--container:not(:has( > *)) ~ .report-btns .submit,
.research-report .report-video--container:not(:has( > *)) ~ .report-btns input[type="submit"]{
    opacity: 0.5!important;
    cursor: not-allowed!important;
}
.research-report{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-report > *{
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: var(--padding);

    position: relative;
}

.research-report .comment-textarea:not(.oneliner) textarea{
    min-height: 250px;
}
.research-report .comment-textarea:not(.oneliner){
    padding-right: 15px;
    padding-bottom: 40px;
}
.research-report .comment-textarea:not(.oneliner).no-limits{
    padding-bottom: 10px;
}
.research-report .comment-textarea:not(.oneliner) > span{
    right: unset;
    left: 15px;
}
.research-report .comment-textarea.no-limits > span{
    display: none;
}
.research-report .report-question-block > span{
    font-size: 20px;
}
.research-report p,
.research-report ul{
    font-size: 20px;
}

.research-report .tag{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    gap: 10px;
    font-size: 20px;
    font-family: "spaceranger";
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
}
.research-report .tag img{
    height: 1em;
}
/* .research-report textarea{
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 20px;
    line-height: 1em;
    height: 400px;
    resize: vertical;
    color: white;
    outline: none;
    box-sizing: border-box;
}
.research-report textarea.small{
    height: 56px;
} */
.research-report input[type="text"]{
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    line-height: 1em;
    height: 38px;
    resize: vertical;
    color: white;
    outline: none;
    box-sizing: border-box;
}

.research-report input[type="submit"],
.research-report input[type="button"]{
    display: flex;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    cursor: pointer;
    height: 37px;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 4px 2px 0px black;
    border: 1px solid #B2B2B2;
    background: var(--gray-bg-gradient);
    transition: all 0.15s ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.research-report input[type="submit"]:active,
.research-report input[type="button"]:active{
    background: #161618;
}
.research-report .text-report-btns{
    display: grid;
    grid-template-columns: 38px 1fr 1fr;
    column-gap: var(--gap);
}
.research-report .report-btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
}
.research-report .report-btns--link{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--gap);
}
.research-report .report-btns--link:not(.active) .submit{
    opacity: 0.5;
    cursor: not-allowed;
}


.research-report .img-btn{
    width: 37px;
    height: 37px;
    box-sizing: border-box;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 4px 2px 0px black;
    border: 1px solid #B2B2B2;
    background: var(--gray-bg-gradient);
    transition: all 0.15s ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.research-report .img-btn:active{
    background: #161618;
}

.research-report .swiper{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-left: calc(var(--padding) * -1);
    margin-right: calc(var(--padding) * -1);
    padding: 0px var(--padding);
}
.swiper-report-btns{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}
.report-pagination{
    text-align: center;
    width: 100%;
    opacity: 0.5;
}
.swiper-report-btns .button{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}
.swiper-report-btns .button.swiper-button-disabled{
    display: none;
}

.research-report .report-question-block{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.research-report label{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.research-report label input{
    display: none;
}
.research-report label > div{
    width: 24px;
    height: 24px;

    border-radius: 100px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.3), 1px 1px 1px 1px rgba(188, 188, 188, 0.05), 0px 0px 16px 0px rgba(255, 255, 255, 0.32), 0px 4px 2px 0px black;
    border: 1px solid #B2B2B2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.research-report label > input[type="checkbox"] + div,
.research-report .report-question-block.checkbox label > div{
    border-radius: 8px;
}
.research-report label > div::after{
    content: "";
    border-radius: 100px;
    background: #2C98F7;
    width: 16px;
    height: 16px;
    border: 3px solid #0E0E0E;
    opacity: 0;
    transition: all 0.15s ease-in-out;
}
@media screen and (max-width: 1312px) {
    .research-report label > div{
        width: 18px;
        height: 18px;
    }
    .research-report label > div::after{
        width: 10px;
        height: 10px;
    }
}
.research-report label > input:checked + div::after,
.research-report .report-question-block label.true >  div::after,
.research-report .report-question-block label.false >  div::after{
    opacity: 1;
}
.research-report .report-question-block label.true >  div::after{
    background: #20CE55;
}
.research-report .report-question-block label.false >  div::after{
    background: #E81F1F;
}
.research-report .swiper-slide{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-report .report-photo--container{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-report .report-photo--container > div{
    display: grid;
    grid-template-columns: 38px 60px 1fr 38px;
    column-gap: calc(var(--gap) / 2);
    align-items: center;
}
.research-report .report-photo--container > div input[type="file"]{
    display: none;
}
.research-report .report-photo--container > div img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.research-report .report-photo--container > div img.img-btn{
    padding: 12px;
}
.research-report .report-photo--container > div > div:not(.comment-textarea){
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 4px;
    box-sizing: border-box;
}
.research-report ul{
    list-style-type: decimal;
    margin: 0px;
    padding-left: 1.5em;
}
.research-report p{
    margin: 0px;
}

.research-report .report-photo--input{
    box-sizing: border-box;
    height: 83px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--gap) / 2);
    text-align: center;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    padding: var(--gap);
    text-align: center;

    background: url(/public/img/report-photo--input--border.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
}
.research-report .report-photo--input span:nth-child(1){
    font-size: 18px;
}
.research-report .report-photo--input:hover{
    opacity: 1;
}
.research-report .report-photo--input input{
    display: none;
}
.research-report .report-video--container{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.research-report .report-video--container > div input{
    display: none;
}
.research-report .report-video--container > div{
    display: grid;
    grid-template-columns: 1fr 38px;
    column-gap: var(--gap);
    align-items: center;
}
.research-report .report-video--container > div > *:not(img){
    opacity: 0.5;
}

.research-report .report-video--upload{
    display: grid;
    grid-template-columns: 1fr 38px 38px;
    column-gap: var(--gap);
}
.research-report .report-video--upload > img{
    width: 38px;
    height: 38px;
    padding: 9px;
}

.research-project .research-project--tablet-box{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
/* @media screen and (min-width: 1312px) {

    .research-project .research-project--tablet-box{
        background: none;
        padding: 0px;
        border: none;
        box-shadow: none;
    }
} */

@media screen and (max-width: 1312px) {
    .research-report .report-photo--input span:nth-child(1){
        font-size: 12px;
    }
    .research-report .report-photo--input span:nth-child(2){
        font-size: 10px;
    }
    .research-curators > h3{
        margin-bottom: -6px;
    }
    .research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1){
        grid-template-columns: 38px 1fr;
    }
    .research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(1){
        width: 38px;
        height: 38px;
    }
    .research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(1) > img:nth-child(2){
        height: 11px;
        width: 11px;
    }
    .research-comment > *:nth-child(1) > *:nth-child(1) > *:nth-child(1) > div:nth-child(2) > div:nth-child(1) > *:nth-child(1){
        font-size: 15px;
    }
    .research-comment > div:nth-child(1){
        padding: 12px;
    }
    .research-article-item{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .research-article-item > div > div:nth-child(1){
        width: 34px;
        height: 36px;
    }
    .research-article-item > div{
        grid-template-columns: 36px 1fr;
    }
    .research-project--status > div:not(.tooltip-container){
        font-size: 12px;
        height: 23px;
        border-radius: 6px;
        padding: 10px 12px;
        gap: 6px;
    }
    .research-project--header > div:nth-child(1) > span:nth-child(2){
        font-size: 20px;
    }
    .research-project--header > div:nth-child(1){
        grid-template-columns: 36px 1fr 21px;
    }
    .research-project--header > div:nth-child(1) > div:nth-child(1){
        width: 36px;
        height: 36px;
    }
    .research-project--header .fav-star{
        width: 23px;
        height: 23px;
    }
    .research-project--header > div:nth-child(2){
        gap: 6px;
    }
    .research-project--header > div:nth-child(2) > span{
        padding: 5px 10px;
        height: 23px;
    }

    .research-project--info,.research-project--partners{
        flex-wrap: wrap;
    }
    .research-project--info .research-project--info--clock > div > div > div:nth-child(2){
        padding: 6px 12px;
    }

    .research-project--info > div{
        padding: 12px;
    }
    .research-project--info > div.research-project--info--dir{
        height: auto;
    }
    .research-project--info .research-project--info--dir > div{
        gap: 6px;
    }
    .research-project--info > div:nth-child(4){
        height: 95px;
    }
    .research-project--info > .research-project--info--planet,
    .research-project--info > .research-project--info--clock{
        width: calc(50% - 6px);
        height: 77px;
    }
    .research-project--info .research-project--info--planet > * > div > *:nth-child(1){
        height: 33px;
        width: 33px;
        padding: 2px;
    }
    .research-project--info > .research-project--info--region{
        height: 77px;
    }
    .research-project--info .research-project--info--planet > * > div{
        grid-template-columns: 33px 1fr;
    }
    .research-project--info > .research-project--info--planet:last-child{
        width: 100%;
    }
    .research-project--info > div.research-project--info--dir + .research-project--info--clock:nth-child(2),
    .research-project--info > .research-project--info--clock:nth-child(1){
        width: 100%;
    }
    .research-project--info .research-project--info--region > div > div > * > *:nth-child(1){
        height: 33px;
        width: 33px;
    }
    .research-project--info .research-project--info--region > div{
        gap: 6px;
    }
    .research-project--info > .research-project--info--region.text{
        height: 58px;
    }
    .research-project--partners > div > div{
    }
    .research-project{
        /* background: none;
        padding: 0px;
        border: none;
        box-shadow: none; */
    }
    .research-project--partners .research-project--partners--partner > div{
        grid-template-columns: 54px 1fr;
        gap: 6px;
    }
    .research-project--partners .research-project--partners--partner > div > div{
        grid-template-columns: 34px 1fr;
        column-gap: 12px;
    }
    .research-project--partners .research-project--partners--partner > div > div > *:nth-child(1){
        width: 34px;
        height: 34px;
    }
    .research-project--partners > div.research-project--partners--partner,
    .research-project--partners > div.research-project--partners--author{
        height: 77px;
        padding: 12px;
    }
    .research-project--partners > div.research-project--partners--partner:nth-child(1){
        height: auto;
    }
    .research-project--partners > div.research-project--partners--author > div > div > div > div > span{
        display: inline-block;
    }
    .research-project--partners > div.research-project--partners--author > div > div > div > div > span:nth-child(1){
        margin-right: 0.5em;
    }
    .research-project--partners > div > div > h3 br{
        display: none;
    }
    .research-members--item > div:nth-child(1){
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .research-members--item > div:nth-child(1) > div{
        width: 100%;
    }
    .research-members--item > div:nth-child(1) > div:nth-child(2){
        justify-content: space-between;
    }
    .research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > *:nth-child(1){
        font-size: 15px;
    }
    .research-members--item > div:nth-child(1) > div:nth-child(1){
        grid-template-columns: 45px 1fr;
        column-gap: 12px;
    }
    .research-members--item > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
        width: 47px;
        height: 47px;
    }
    .research-members--item > div:nth-child(1) > div:nth-child(2) > div{
        font-size: 12px;
        height: 30px;
    }
    .research-members--item > div:nth-child(1) > div:nth-child(2) > img{
        height: 30px;
        width: 30px;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1){
        grid-template-columns: 1fr 1fr;

    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > *{
        grid-template-columns: 50px 1fr;
        padding: 12px;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(1){
        width: 50px;
        height: 50px;
        /* position: absolute;
        left: 12px;
        top: 12px; */
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(1) > img:nth-child(2){
        width: 15px;
        height: 15px;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > *:nth-child(1){
        /* padding-left: 52px; */
        /* min-height: 40px; */
        /* width: 100%; */
        box-sizing: border-box;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div{
        height: 30px;
        padding: 6px 12px;
        gap: 12px;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div > h3{
        font-size: 12px;
    }
    .research-articles{
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .research-comment--answer-container{
        padding-left: 32px;
        background-size: 20px 20px;
    }
    .research-curators .research-curators--curator, .research-curators .research-curators--partner{
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    .research-curators .research-curators--curator > div:nth-child(1), .research-curators .research-curators--partner > *:nth-child(1){
        grid-template-columns: 34px 1fr;
        column-gap: 12px;
        width: 100%;
    }
    .research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(1),
    .research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(1){
        width: 34px;
        height: 34px;
    }
    .research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(1){
        padding: 2px;
    }
    .research-curators .research-curators--curator > div:nth-child(2) .tooltip-container div > img, .research-curators .research-curators--partner > div:nth-child(2) .tooltip-container div > img{
        width: 30px;
        height: 30px;
        padding: 6px;
    }
    .research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(1) > img:nth-child(2){
        width: 12px;
        height: 12px;
    }
    .research-curators .research-curators--curator > div, .research-curators .research-curators--partner > div{
        width: 100%;
    }
    .research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(2), .research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(2){
        gap: 3px;
    }
    .research-curators .research-curators--curator, .research-curators .research-curators--partner{
        padding: 12px;
    }
    .research-curators .research-curators--list{
        padding: 12px;
    }
    .research-curators .research-curators--partner > *:nth-child(1) > div:nth-child(2) > *:nth-child(1), .research-curators .research-curators--curator > div:nth-child(1) > div:nth-child(2) > *:nth-child(1){
        font-size: 15px;
    }
    .research-report .tag{
        font-size: 12px;
        height: 23px;
        border-radius: 6px;
        padding: 10px 10px;
    }
    .research-report .report-question-block > span, .research-report p, .research-report ul{
        font-size: 12px;
    }
    .research-report textarea{
        padding: 12px;
    }
    .research-report .report-photo--input{
        border-radius: 6px;
    }
    .research-report .report-photo--container > div > div:nth-child(2){
        height: 34px;
        width: 54px;
    }
    .research-report .report-photo--container > div img.img-btn{
        padding: 8px;
        height: 34px;
        width: 34px;
    }
    .research-report input[type="text"]{
        padding: 0px 10px;
        height: 34px;
    }
    .research-report .report-video--upload > img,
    .research-report .report-video--container > div img{
        height: 34px;
        width: 34px;
        padding: 8px;
    }
    .research-report .report-video--upload{
        grid-template-columns: 1fr 34px 34px;
    }
    .research-report .report-video--container > div{
        grid-template-columns: 1fr 26px;
    }
    .swiper-report-btns > div:nth-child(2){
        flex-wrap: wrap;
    }
    .swiper-report-btns > div:nth-child(2) > input{
        order: 1;
    }
    .swiper-report-btns > div:nth-child(2) .button{
        width: calc(50% - 7px);
    }
    .research-report textarea.small{
        height: 40px;
    }
    .research-report > *{
        padding: 12px;
    }
}

@media screen and (max-width: 720px) {
    .research-project--info{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1){
        grid-template-columns: 1fr;
    }
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2){
        display: grid;
        grid-template-columns: 1fr 100px;
        column-gap: 12px;
        align-items: center;
    }
    /* .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > *:nth-child(1){
        padding-left: 42px;
        min-height: 30px;
    } */
    .research-members--item > div:nth-child(2) > div:nth-child(1) > * > *:nth-child(2) > div > h3{
        font-size: 12px;
    }
    .research-project--info > .research-project--info--planet, .research-project--info > .research-project--info--clock{
        width: 100%!important;
    }
    .research-project--info > .research-project--info--clock{
        height: 74px;
    }
    .research-article-item > div{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        align-items: center;
        text-align: center;
    }
    .research-report .photo-report-form:not(.result) .report-photo--container > div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--gap);
        flex-wrap: wrap;
    }
    .research-report .photo-report-form:not(.result) .report-photo--container > div .comment-textarea{
        order: 1;
        width: 100%;
    }

}

.planet-page{
    display: flex;
    flex-direction: column;
    gap: var(--gap);

}

.planet-page .index--planet-grid--planet{
    padding-bottom: 40px;
}
.planet-page .index--planet-grid--planet > h2{
    max-width: calc(100% - 600px);
    min-height: 2em;
    display: flex
;
    flex-direction: row;
    align-items: end;
    justify-content: center;
}
.planet-page #planet-selector{
    width: fit-content!important;
    grid-template-columns: 50px 1fr 50px;
    order: -1;
    padding: 0px 140px;
    margin-bottom: 10px;
}
.planet-page #planet-selector .swiper{
    width: auto;
    max-width: 100%;
}
@media screen and (max-width: 1312px) {
    .planet-page .index--planet-grid--planet{
        padding-bottom: 12px;
    }
    .planet-page .index--planet-grid--planet > h2{
        max-width: calc(100% - 300px);
    }
    .planet-page #planet-selector .swiper{
        max-width: 589px;
    }
    .planet-page #planet-selector{
        grid-template-columns: 23px 1fr 23px;
        /* order: 0; */
        padding: 0px 0px;
        width: 614px;
        margin-top: 20px;
    }
    /* .index--planet-grid--planet #planet-selector .button-prev, .index--planet-grid--planet #planet-selector .button-next{
        display: none;
    } */
    .planet-page #planet-rotation{
        display: unset;
        order: 1;
        width: 320px;
    }
}
@media screen and (max-width: 720px) {
    .planet-page .index--planet-grid--planet{
        padding-bottom: 0px;
    }
    .planet-page .index--planet-grid--planet > h2{
        max-width: calc(100%);
        min-height: unset;
    }
    .planet-page #planet-selector{
        padding: 0px 0px;
        width: 100%;
        order: -2;
    }
    /* .index--planet-grid--planet #planet-selector .button-prev, .index--planet-grid--planet #planet-selector .button-next{
        display: none;
    } */
    .planet-page #planet-rotation{
        display: unset;
        order: 0;
        width: 100%;
    }
    .planet-page #planet-selector .swiper{
        max-width: 100%;
    }
}


.loading{
    position: relative;
}
.loading::before{
    z-index: 99;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000cc;
    box-shadow: 0px 0px 20px 0px black;
    border-radius: 5px;
}
.loading::after{
    z-index: 100;
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: url(/public/img/loading.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    animation: loadingAnim 1s linear 0s infinite;
}

@keyframes loadingAnim {
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



.popup-container{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(0deg, #404142bc 0%, #2C2E2Fbc 100%);

    z-index: 999999999999;
}
.popup-container:not(.active){
    display: none;
}
.popup-container > .popup-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 847px;
    height: fit-content;
    max-height: calc(100% - 40px);
    /* background: #; */
    background: #161618 linear-gradient(283.92deg, rgba(255, 255, 255, 0.08) 16.95%, rgba(255, 255, 255, 0.08) 37.73%, rgba(255, 255, 255, 0) 66.73%, rgba(255, 255, 255, 0.08) 91.85%, rgba(255, 255, 255, 0.08) 91.86%);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--padding);
    border-radius: 8px;
    border: 1px solid #A5A5A5;
    padding: calc(var(--padding) - 1px);
}
.popup-content.popup--avatar-change{
    text-align: center;
}
.popup-content.popup--avatar-change > div:nth-child(2){
    height: 483px;
    background: url(/public/img/avatar-change-bg.svg);
    background-position: center center;
    background-size: contain;
    border-radius: 8px;
    border: 1px solid #A5A5A5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.popup-content.popup--avatar-change > div:nth-child(2) > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 158px;
    width: 158px;
    gap: 6px;
    box-sizing: border-box;
    background: #2C2E2F linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    border-radius: 8px;
    border: 1px solid #A5A5A5;
}
.popup-content.popup--avatar-change > div:nth-child(2) > div > img{
    width: 110px;
    height: 94px;
    object-fit: contain;
    object-position: center;
}
.popup-content.popup--avatar-change > div:nth-child(3){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.popup-content.popup--avatar-change > div:nth-child(3) > div{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-height: 170px;
    overflow: auto;
    padding-right: 20px;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.popup-content.popup--avatar-change > div:nth-child(3) > div > *{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 75px;
    width: 75px;
    gap: 6px;
    box-sizing: border-box;
    background: #2C2E2F linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    border-radius: 8px;
    border: 1px solid #A5A5A5;
}
.popup-content.popup--avatar-change > div:nth-child(3) > div > *.active{
    background: #161618 linear-gradient(283.92deg, rgba(255, 255, 255, 0.08) 16.95%, rgba(255, 255, 255, 0.08) 37.73%, rgba(255, 255, 255, 0) 66.73%, rgba(255, 255, 255, 0.08) 91.85%, rgba(255, 255, 255, 0.08) 91.86%);
}
.popup-content.popup--avatar-change > div:nth-child(3) > div > * img{
    width: 52px;
    height: 52px;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
}
.popup-content.popup--avatar-change > div:nth-child(4){
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
}
@media screen and (max-width: 1312px) {
    .popup-container > .popup-content{
        width: 366px;
    }
    .popup-content.popup--avatar-change > div:nth-child(2){
        height: 188px;
    }
    .popup-content.popup--avatar-change > div:nth-child(2) > div{
        width: 64px;
        height: 64px;
    }
    .popup-content.popup--avatar-change > div:nth-child(2) > div > img{
        width: 45px;
        height: 45px;
    }
    .popup-content.popup--avatar-change > div:nth-child(3) > div{
        grid-template-columns: repeat(5, 1fr);
        row-gap: 12px;
        column-gap: 12px;
        padding-right: 12px;
        max-height: 236px;
    }
    .popup-content.popup--avatar-change > div:nth-child(3) > div > *{
        width: 50px;
        height: 50px;
    }
    .popup-content.popup--avatar-change > div:nth-child(3) > div > * img{
        width: 35px;
        height: 35px;
    }
}


.lk-placeholder-text{
    text-align: center;
    font-size: 25px;
}
.lk-placeholder-text a{
    color: rgba(44, 152, 247, 1);
}
@media screen and (max-width: 1312px) {

    .lk-placeholder-text{
        font-size: 15px;
    }
}

.lk-breadcrumbs{
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    gap: 10px;
}
.lk-breadcrumbs > *{
    color: #818181;
}
.lk-breadcrumbs > *:not(:last-child)::after{
    margin-left: 10px;
    content: ">";
}
.lk-breadcrumbs > *:last-child{
    color: #2C98F7;
}
@media screen and (max-width: 1312px){
    .lk-breadcrumbs{
        font-size: 12px;
    }
}
@media screen and (min-width: 720px){
    .lk-container--menu > .lk-breadcrumbs{
        display: none;
    }
}
@media screen and (max-width: 720px){
    .lk-conainer > div:nth-child(2) > .lk-breadcrumbs{
        display: none;
    }
}



.docs-header{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 20px;
}
.docs-header > h2{
    width: fit-content;
    color: #2C98F7;
}
.docs-header > div{
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #ffffff00 0%, #ffffff 50%, #ffffff00 100%);
}

.register{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.register > div.register--title{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    text-align: center;
}
.register > div.register--title h2{
    color: #2C98F7;
}
.register > div.register--title span{
    font-size: 25px;
}
.register > div.register--form > *{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.register > div.register--form > *:not(.active){
    display: none;
}
.register > div.register--form .register--btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
}
.register > div.register--form .double{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
}
.register > div.register--form .single > div,
.register > div.register--form .double > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.register > div.register--form .single > div > *:nth-child(2),
.register > div.register--form .double > div > *:nth-child(2){
    padding: 10px 15px;
    box-sizing: border-box;
    width: 100%;
    outline: none;
    opacity: 1;
    color: white;
    border: none;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.register > div.register--form .double > div > select:nth-child(2){
    height: 38px;
}
.register > div.register--form > * > div:nth-child(1){
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: var(--gap);
}
.register > div.register--form > * > div:nth-child(1) > div:nth-child(1){
    font-size: 32px;
    font-family: "spaceranger";
    text-transform: uppercase;
    white-space: nowrap;
}
.register > div.register--form > * > div:nth-child(1) > div:nth-child(2){
    font-size: 25px;
}
.register > div.register--form > * > div:nth-child(1) a{
    color: #2C98F7;
}


.register > div.register--form .double > div > select:nth-child(2),
.register > div.register--form .single > div > select:nth-child(2){
    appearance: none;
    padding-right: 35px;
    box-sizing: border-box;
    background-image: url(/public/img/select-arrow.svg), linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    background-position: right 15px center, center center;
    background-size: 8px 13px, 100% 100%;
    background-repeat: no-repeat;
}
.register > div.register--form div > select option{
    background: #161618;
    color: white;
}
@media screen and (max-width: 1312px) {
    .register > div.register--form > * > div:nth-child(1) > div:nth-child(2){
        font-size: 15px;
    }
    .register > div.register--form > * > div:nth-child(1) > div:nth-child(1){
        font-size: 20px;
    }
    .register > div.register--form > * > div:nth-child(1){
        grid-template-columns: 65px 1fr;
    }
    /* .register > div.register--form .single > div > *:nth-child(2), .register > div.register--form .double > div > *:nth-child(2){
        height: 34px;
    } */
    .register > div.register--form .double > div > select:nth-child(2){
        height: 34px;
    }
    .register > div.register--form .register--btns{
        grid-template-columns: 1fr;
        row-gap: var(--gap);
    }
    .register > div.register--form .double{
        grid-template-columns: 1fr;
        row-gap: var(--gap);
    }
    .register > div.register--title h2{
        font-size: 26px;
    }
    .register > div.register--title span{
        font-size: 15px;
    }
}



.expandable-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 20px; */
    padding: 20px;
    padding-top: 30px;
    box-sizing: border-box;
    text-align: center;
    background: url(/public/img/awards--header--rt.svg), url(/public/img/awards--header--rb.svg), url(/public/img/awards--header--lt.svg), url(/public/img/awards--header--lb.svg);
    background-repeat: no-repeat;
    background-position: right -1px top, right -1px bottom, left -1px top, left -1px bottom;
    background-size: 50% auto;
    border-radius: 5px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    margin-top: 16px;
}
.expandable-title > h2{
    margin-top: calc(-30px - 0.5em);
    margin-bottom: 20px;
    color: #2C98F7;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.expandable-title > div{
    font-size: 25px;
}
.expandable-title > div > p:first-child{
    margin-top: 0px;
}
.expandable-title > div > p:last-child{
    margin-bottom: 0px;
}
.expandable-title:not(.active) > div{
    display: none;
}
.expandable-title.active{
    margin-top: 32px;
}
.expandable-title:not(.active){
    padding: 0px;
    /* height: 1px; */
    background: none!important;
    border: none!important;
}
.expandable-title:not(.active) > h2{
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}
.expandable-title > h2::before,
.expandable-title > h2::after{
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: calc(1312px / 2 - 20px - 50%);
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%);
}
.expandable-title.active > h2::before, .expandable-title.active > h2::after{
    display: none;
}
.expandable-title > h2::before {
    right: calc(100% + 20px);
}
.expandable-title > h2::after {
    left: calc(100% + 20px);
}
@media screen and (max-width: 1312px) {
    .expandable-title{
        margin-top: 0px;
    }
    .expandable-title.active{
        margin-top: 12px;
    }
    .expandable-title > div{
        font-size: 15px;
    }
    .expandable-title{
        padding: 12px;
        padding-top: 24px;
    }
    .expandable-title > h2{
        margin-top: calc(-24px - 0.5em);
        font-size: 26px;
    }
    .expandable-title > h2::before,.expandable-title > h2::after{
        width: calc(720px / 2 - 20px - 50%);
    }
}
@media screen and (max-width: 720px) {
    .expandable-title > h2::before,.expandable-title > h2::after{
        width: calc(100vw / 2 - 20px - 50%);
    }
}
@media screen and (max-width: 380px) {
    .expandable-title > h2{
        font-size: 22px;
    }
}

.articles--content{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.articles--content > a.button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 18px;
}
@media screen and (min-width: 720px) {
    .articles--content > a.button{
        display: none;
    }
}
.articles--content .articles--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
}

.articles--list > .articles--list-item{
    display: grid;
    grid-template-columns: 125px 313px 1fr;
    align-items: center;
    column-gap: var(--gap);
    min-height: 184px;
    height: min-content;
    width: 100%;
}
.articles--list > .articles--list-item .articles--list-item--icon{
    position: relative;
    width: 115px;
    height: 144px;

    background: #3394F0;
    border-radius: 10px;
    border: 2px solid #4E9AEF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 15px;
    box-sizing: border-box;

    transition: all 0.15s ease-in-out;
}
.articles--list > .articles--list-item .articles--list-item--icon:hover{
    background: linear-gradient(90deg, #525252 0%, #636363 100%);
    background: #525252;
    padding-right: 25px;
    width: 125px;
    border-color: #A0A0A0;
}
.articles--list > .articles--list-item .articles--list-item--icon img{
    height: 54px;
    position: relative;
    z-index: 1;
}
.articles--list > .articles--list-item .articles--list-item--icon::before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 108px;
    height: calc(100% + 4px);
    background: url(/public/img/articles--folder.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 0;
}
.articles--list > .articles--list-item .articles--list-item--title{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: center;
}
.articles--list > .articles--list-item .articles--list-item--title > a{
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: var(--gap);
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.articles--list > .articles--list-item .articles--list-item--title > a > p{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0px;
}
.articles--list > .articles--list-item .articles--list-item--title > a > p > span:nth-child(1){
    color: #2C98F7;
}
.articles--list > .articles--list-item .articles--list-item--title > a > img{
    width: 42px;
    height: 42px;
    border-radius: 1000px;
    border: 1px solid #A0A0A0;
    background: rgba(198, 198, 198, 0.17);
    padding: 5px;
    box-sizing: border-box;
}

.articles--list > .articles--list-item .articles--list-item--text{
    height: 100%;
    position: relative;
    color: rgba(255, 255, 255, 0.5);
}
.articles--list > .articles--list-item .articles--list-item--text > div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
    height: calc(100%);
    overflow: hidden;
    display: inline-block; /* for inline elements e.g. span, strong, em etc */
    text-overflow: ellipsis;
}

@media screen and (max-width: 1312px) {
    .articles--list > .articles--list-item{
        grid-template-columns: 101px 1fr;
        min-height: 134px;
    }
    .articles--list > .articles--list-item .articles--list-item--text{
        display: none;
    }
    .articles--list > .articles--list-item .articles--list-item--icon{
        height: 112px;
        width: 90px;
    }
    .articles--list > .articles--list-item .articles--list-item--icon:hover{
        width: 100px;
    }
    .articles--list > .articles--list-item .articles--list-item--icon img{
        height: 42px;
    }
    .articles--list > .articles--list-item .articles--list-item--icon::before{
        width: 84px;
    }
    .articles--list > .articles--list-item .articles--list-item--title > a > img{
        width: 33px;
        height: 33px;

    }
    .articles--list > .articles--list-item .articles--list-item--title > a{
        grid-template-columns: 33px 1fr;
        padding: 6px 12px;
    }
    .articles--list > .articles--list-item .articles--list-item--title > a > p{
        gap: 6px;
    }
}


.planet-page--stats{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 531px;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    z-index: -1;
}
.planet-page--stats > div{
    position: absolute;
    width: 293px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    border-radius: 5px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    padding: calc(var(--gap) - 1px);
    box-sizing: border-box;
    text-align: center;
}
.planet-page--stats > div::before,
.planet-page--stats > div::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    width: calc(100% - 5px);
    height: 1px;
    background: linear-gradient(90deg, white 0%, #ffffff00 25%, #ffffff00 75%, #ffffff 100%);
}
.planet-page--stats > div::after{
    top: unset;
    bottom: 0px;
}
.planet-page--stats > div:nth-child(1){
    top: 0px;
    left: 0px;
}
.planet-page--stats.authorized > div:nth-child(2){
    bottom: 0px;
    left: 0px;
}
.planet-page--stats:not(.authorized) > div:nth-child(2),
.planet-page--stats > div:nth-child(3){
    top: 0px;
    right: 0px;
}
.planet-page--stats > div:nth-child(4){
    bottom: 0px;
    right: 0px;
}
.planet-page--stats > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);

    font-size: 30px;
    font-family: "spaceranger";
    font-weight: 400;
    text-transform: uppercase;
}
.planet-page--stats > div > span{
    font-size: 20px;
}
.planet-page--stats > div > div img{
    max-width: 76px;
    width: auto;
    height: 67px;
    object-fit: contain;
    object-position: center;
}

.planet-page--researches-list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.planet-page--researches-list > .controls{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.planet-page--researches-list > .controls h2{
    color: rgba(44, 152, 247, 1);
    width: 75%;
}
@media screen and (max-width: 1312px) {
    .planet-page--researches-list > .controls h2{
        font-size: 20px;
    }
}
.planet-page--researches-list > .controls > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}
.planet-page--researches-list > .controls > div a{
    height: 36px;
    width: 36px;
}
.planet-page--researches-list > .controls > div img{
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 1000px;
    background: rgba(67, 67, 67, 1);
    display: block;
}
.planet-page--researches-list > .controls > div img:nth-child(1){
    transform: rotate(180deg);
}
.planet-page--researches-list > .controls > div img.disabled{
    opacity: 0.5;
}
.planet-page--researches-list .swiper{
    width: 100%;
    height: min-content;
    overflow: hidden;
}
.planet-page--researches-list .swiper-slide{
    display: grid;
    grid-template-columns: 144px 1fr;
    align-items: center;
    column-gap: var(--gap);
    min-height: 184px;
    height: min-content!important;
    width: 100%;
}
.planet-page--researches-list .swiper-slide .articles--list-item--text{
    display: grid;
    grid-template-columns: 313px 1fr;
    min-height: 100%;
    height: min-content;
    align-items: center;
    column-gap: var(--gap);
}
.planet-page--researches-list .swiper-slide .articles--list-item--text > div{
    position: relative;
    height: 100%;
}
.planet-page--researches-list .swiper-slide .articles--list-item--text > div > div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
    height: calc(100%);
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    opacity: 0.5;
    font-size: 20px;
}


.planet-page--researches-list .swiper-slide .articles--list-item--icon{
    position: relative;
    width: 115px;
    height: 144px;
    background: #3394F0;
    border-radius: 10px;
    border: 2px solid #4E9AEF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 15px;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
}
.planet-page--researches-list .swiper-slide .articles--list-item--icon:hover{
    background: linear-gradient(90deg, #525252 0%, #636363 100%);
    background: #525252;
    border-color: #A0A0A0;
    padding-right: 25px;
    width: 125px;
}
.planet-page--researches-list .swiper-slide .articles--list-item--icon img{
    height: 54px;
    position: relative;
    z-index: 1;
}
.planet-page--researches-list .swiper-slide .articles--list-item--icon::before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 108px;
    height: calc(100% + 4px);
    background: url(/public/img/articles--folder.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 0;
}

.articles-swiper .swiper-wrapper{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.articles-swiper .swiper-wrapper .swiper-slide:not(.active){
    display: none;
}

.planet-page--tabs{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.planet-page--tabs .planet-page--tabs--controls{
    margin-top: var(--gap);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    padding: var(--gap);
    background: linear-gradient(0deg, #2b2b2ccc 0%, #232525cc 100%);
    background: rgba(22, 22, 24, 1) linear-gradient(283.92deg, rgba(255, 255, 255, 0.08) 16.95%, rgba(255, 255, 255, 0.08) 37.73%, rgba(255, 255, 255, 0) 66.73%, rgba(255, 255, 255, 0.08) 91.85%, rgba(255, 255, 255, 0.08) 91.86%);

    border: 1px solid #818181;
    border-radius: 8px;
    z-index: 1;
}
.planet-page--tabs .planet-page--tabs--controls > *{
    display: block;
    width: 100%;
    border-radius: 8px;
    padding: 9px 9px;
    box-sizing: border-box;
    border: 1px solid #818181;
    color: #818181;
    text-align: center;
    white-space: nowrap;
    font-size: 15px;
    height: 38px;
    cursor: pointer;
}
.planet-page--tabs .planet-page--tabs--controls > *.active{
    color: white;
    background: #2C98F7;
    border-color: #2C98F7;
}
.planet-page--tabs > div:nth-child(2) > div{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.planet-page--tabs > div:nth-child(2) > div:not(.active){
    display: none!important;
}

.planet-page .planet-description{
    font-size: 20px;
    font-family: "Roboto"!important;
}
.planet-penta{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
@media screen and (max-width: 1312px) {
    .planet-page .planet-description{
        font-size: 15px;
    }
}
@media screen and (max-width: 720px) {
    .planet-page--tabs .planet-page--tabs--controls > *{
        /* min-width: 107px; */
        width: fit-content;
        padding: 9px 17px;
    }
}


@media screen and (max-width: 1312px) {
    .planet-page--researches-list .swiper-slide .articles--list-item--icon{
        height: 112px;
        width: 90px;
    }
    .planet-page--researches-list .swiper-slide .articles--list-item--icon:hover{
        width: 100px;
    }
    .planet-page--researches-list .swiper-slide .articles--list-item--icon img{
        height: 42px;
    }
    .planet-page--researches-list .swiper-slide .articles--list-item--icon::before{
        width: 84px;
    }
    .planet-page--researches-list .swiper-slide{
        grid-template-columns: 101px 1fr;
        min-height: 136px;
    }
    .planet-page--researches-list .swiper-slide .articles--list-item--text{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        align-items: start;
        height: 100%;
    }
    .planet-page--researches-list .swiper-slide .articles--list-item--text > div > div{
        position: unset;
        top: unset;
        left: unset;
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        height: 82px;
    }
    .planet-page--researches-list > .controls > div a,
    .planet-page--researches-list > .controls > div img{
        height: 23px;
        width: 23px;
    }
    .planet-page .index--planet-grid--planet .planet-container{
        height: 277px;
    }
    .planet-page--stats > div > div{
        font-size: 15px;
    }
    .planet-page--stats > div > span{
        font-size: 12px;
    }
    .planet-page--stats > div > div img{
        height: 39px;
        width: 44px;
    }
    .planet-page--stats > div{
        width: 142px;
    }
    .planet-page--stats{
        height: 309px;
    }
    .planet-page #planet-rotation{
        margin-bottom: 12px;
    }
}
@media screen and (max-width: 720px) {
    .planet-page--researches-list .swiper-slide .articles--list-item--text > div{
        display: none;
    }
    .planet-page--researches-list .swiper-slide .articles--list-item--text{
        justify-content: center;
    }
    .planet-page--stats{
        position: unset;
        top: unset;
        left: unset;
        width: 100%;
        overflow: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        padding-bottom: 2px;
        z-index: 0;
    }
    .planet-page--stats > div{
        position: relative!important;
        top: unset!important;
        left: unset!important;
        min-width: 142px;
        height: 103px;
    }
    .planet-page--tabs .planet-page--tabs--controls{
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow: auto;
        background: unset;
        border: unset;
        padding: 0px;
    }

    .planet-page--stats:not(.authorized){
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--gap);
    }
    .planet-page--stats:not(.authorized) > div{
        width: 100%;
    }
}



.comment-textarea{
    width: 100%;
    position: relative;

    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
    padding: 9px 15px;
    padding-right: calc(30px + 60px);
}
.comment-textarea > textarea{
    width: 100%;
    display: block;
    background: none;
    border: none;
    outline: none;
    color: white;
    padding: 0px;
    resize: none;
    height: 1.35em;
    font-family: "Roboto";
    line-height: 1.2;
    font-size: 1em;
}
.comment-textarea > span{
    opacity: 0.5;
    position: absolute;
    bottom: 10px;
    right: 15px;
}
@media screen and (max-width: 1312px) {
    .comment-textarea{
        padding-right: calc(50px + 24px);
        font-size: 12px;
    }
}


.popup--delete-comment{
    text-align: center;
}
.popup--delete-comment > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
}




.volunteer-researches--item--stats > div.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.volunteer-researches--item--stats > div.grid-3 > div,
.volunteer-researches--item--stats > div.grid-2 > div{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    border-radius: 8px;
    padding: 15px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);

    font-size: 20px;
}
.volunteer-researches--item--stats > div.grid-2 > div{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.volunteer-researches--item--stats > div.grid-2 > div > span:nth-child(1),
.volunteer-researches--item--stats > div.grid-3 > div > span:nth-child(1){
    color: rgba(44, 152, 247, 1);
    font-size: 15px;
}
@media screen and (min-width: 720px) {

    .volunteer-researches--item--stats > div.grid-2 > div > span:nth-child(1) br,
    .volunteer-researches--item--stats > div.grid-3 > div > span:nth-child(1) br{
        display: none;
    }
}
.volunteer-researches--item--stats > div.grid-3 > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}
.volunteer-researches--item--stats > div.grid-3 > div > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.volunteer-researches--item--stats > div.grid-3 > div > div > div > img{
    height: 44px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
    object-position: center;
}
.volunteer-researches--item--stats > div.grid-3 > div > div > div > div{
    width: 44px;
    height: 44px;
    padding: calc(var(--gap) / 2);
    border-radius: 100px;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
    border-radius: 100px;
    background: var(--gray-bg-gradient);
}
.volunteer-researches--item--stats > div.grid-3 > div > div > div > div img{
    width: 100%;
    height: 100%;
}


@media screen and (max-width: 1312px) {
    .volunteer-researches--item--stats > div.grid-3 > div, .volunteer-researches--item--stats > div.grid-2 > div{
        font-size: 12px;
        padding: 10px;
    }
    .volunteer-researches--item--stats > div.grid-2 > div > span:nth-child(1), .volunteer-researches--item--stats > div.grid-3 > div > span:nth-child(1){
        font-size: 12px;
    }
    .volunteer-researches--item--stats > div.grid-3 > div > div > div > img,
    .volunteer-researches--item--stats > div.grid-3 > div > div > div > div{
        width: 30px;
        height: 30px;
    }
    .volunteer-researches--item--stats > div.grid-3 > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .volunteer-researches--item--stats > div.grid-3 > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
    .volunteer-researches--item--stats > div.grid-3 > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
}

.rating--class-list{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.rating--class-list > *{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: center;

    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px) 0px;

    transition: all 0.15s ease-in-out;
}
.rating--class-list > *.active,
.rating--class-list > *:hover{
    background: #161618 linear-gradient(-80deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.rating--class-list > * > *{
    margin: 0px;
}
.rating--class-list > * > img{
    width: 51px;
    height: 51px;
}
.rating--class-list > * > img:nth-child(1){

    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    padding: calc(var(--gap) / 2 - 1px);
}

.rating-content > .volunteer-profile--stats{
    position: sticky;
    top: var(--gap);

    /* overflow: hidden; */

    z-index: 10
}
.volunteers-list,
.classes-list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
@media screen and (max-width: 720px) {
    .rating-content > .volunteer-profile--stats{
        top: calc(var(--gap) + 78px);
    }
}
.rating--class-list + .list-arrow-more,
.rating--volunteer-list + .list-arrow-more,
.classes-list + .list-arrow-more,
.volunteers-list + .list-arrow-more{
    margin-top: var(--gap);
}

.rating-content > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *,
.classes-list > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *,
.volunteers-list > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *{
    font-size: 20px!important;
}

.rating--volunteer-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.rating--volunteer-list > *{
    display: grid;
    grid-template-columns: 66px 1fr;
    column-gap: var(--gap);

    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);

    transition: all 0.15s ease-in-out;
}
.rating--volunteer-list > *.active,
.rating--volunteer-list > *:hover{
    background: #161618 linear-gradient(-80deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
}
.rating--volunteer-list > * > div:nth-child(1){
    position: relative;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    border-radius: 8px;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1px solid #A5A5A5;
    box-sizing: border-box;
}
.rating--volunteer-list > * > div:nth-child(1) img:nth-child(1){
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.rating--volunteer-list > * > div:nth-child(1) img:nth-child(2){
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 19px;
    height: 19px;
    box-sizing: border-box;
    border-radius: 1000px;
    border: 1px solid #A5A5A5;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
}
.rating--volunteer-list > * > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.rating--volunteer-list > * > div:nth-child(2) > div{
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 0px 15px;
    height: 38px;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap);

    width: fit-content;

    font-family: "spaceranger";
}
.rating--volunteer-list > * > div:nth-child(2) > div img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    object-position: center;
}
.rating--volunteer-list > * > div:nth-child(2) > div img:nth-child(3){
    border-radius: 1000px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    padding: 3px;
}

.rating-content > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > * img,
.classes-list > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > * img,
.volunteers-list > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > * > * img{
    height: 18px;
    width: 18px;
}
@media screen and (max-width: 1312px) {
    .rating--volunteer-list{
        grid-template-columns: repeat(2, 1fr);
    }
    .rating--volunteer-list > *{
        grid-template-columns: 50px 1fr;
    }
    .rating--volunteer-list > * > div:nth-child(1) img:nth-child(2){
        width: 15px;
        height: 15px;
    }
    .rating--volunteer-list > * > div:nth-child(1){
        width: 50px;
        height: 50px;
    }
    .rating--volunteer-list > * > div:nth-child(2) > div{
        height: 30px;
    }

    .rating--class-list{
        grid-template-columns: repeat(3, 1fr);
    }
    .rating--class-list > *{
        flex-direction: row;
    }
    .rating--class-list > * > img{
        width: 39px;
        height: 39px;
    }
    .rating-content > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *,
    .classes-list > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *,
    .volunteers-list > .volunteer-profile--stats > div:nth-child(1) .volunteer-profile--stats--stat-container > *{
        font-size: 12px!important;
    }
}
@media screen and (max-width: 720px) {
    .rating--volunteer-list{
        grid-template-columns: 1fr;
    }
    .rating--volunteer-list > * > div:nth-child(2){
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .rating--class-list{
        grid-template-columns: repeat(2, 1fr);
    }
    .rating--class-list > *{
        padding: calc(var(--padding) - 1px);
        justify-content: start;
    }
}

.volunteer-profile--stats .rating--stats-info{
    position: absolute;
    right: 0px;
    top: 0px;
    height: calc(100% - (var(--gap) * 2));
    width: calc(100% - var(--gap) - 12px);


    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);


    transition: all 0.15s ease-in-out;
    max-height: 0px;
    min-height: 0px;

}
.volunteer-profile--stats .rating--stats-info .rating--stats-info--btn{
    position: absolute;
    top: 0px;
    left: -12px;
    height: 100%;
    width: 12px;
    background: url(/public/img/rating--stats-info--btn.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    pointer-events: none;

    cursor: pointer;
}
.volunteer-profile--stats .rating--stats-info .rating--stats-info--btn::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 15px;
    transform: translateX(-50%);
    cursor: pointer;
    background: url(/public/img/partner-btn.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 0;
    pointer-events: all;

    transform: translate(-54%, -50%) rotate(90deg);
}
.volunteer-profile--stats .rating--stats-info.active .rating--stats-info--btn::after{
    background: url(/public/img/partner-btn-active.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
.volunteer-profile--stats .rating--stats-info > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow: auto;
    overflow-y: scroll;
    height: 100%;
    padding-right: var(--gap);
}
.volunteer-profile--stats .rating--stats-info.active > div:nth-child(2){

    min-height: calc(100% - var(--gap) - 12px);
    max-height: min(calc(400px - (calc(var(--padding) - 1px) * 2)), calc(50vh - (calc(var(--padding) - 1px) * 2)));
    height: fit-content;
}
.volunteer-profile--stats .rating--stats-info > div:nth-child(2) > div{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.volunteer-profile--stats .rating--stats-info > div:nth-child(2) > div > div{
    padding: 10px 15px;
    box-sizing: border-box;
    width: 100%;
    outline: none;
    opacity: 1;
    color: white;
    border: none;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}

.volunteer-profile--stats .rating--stats-info{
    width: 100%;
    height: 0px;
    top: 0px;
    box-sizing: border-box;
}
.volunteer-profile--stats .rating--stats-info:not(.active){
    padding-top:0px;
    padding-bottom: 0px;
}
.volunteer-profile--stats .rating--stats-info .rating--stats-info--btn{
    top: 100%;
    left: var(--gap);
    width: calc(100% - var(--gap) - var(--gap));
    height: 12px;
    background: url(/public/img/rating--stats-info--btn-h.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}
.volunteer-profile--stats .rating--stats-info .rating--stats-info--btn::after{
    transform: translate(-54%, -50%) rotate(0deg)
}
.volunteer-profile--stats .rating--stats-info.active{
    min-height: calc(100% - var(--gap) - 12px);
    max-height: min(400px, 50vh);
    height: fit-content;

    z-index: 99;
}

@media screen and (max-width: 1312px) {
    .volunteer-profile--stats .rating--stats-info{
        width: 100%;
        top: 0px;
    }
    .volunteer-profile--stats .rating--stats-info .rating--stats-info--btn{
        top: 100%;
        left: var(--gap);
        width: calc(100% - var(--gap) - var(--gap));
        height: 12px;
        background: url(/public/img/rating--stats-info--btn-h.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
    }
    .volunteer-profile--stats .rating--stats-info .rating--stats-info--btn::after{
        transform: translate(-54%, -50%) rotate(0deg)
    }
    .volunteer-profile--stats .rating--stats-info{
        transform: translate(0%, -100%);
    }
    .volunteer-profile--stats .rating--stats-info.active{
        transform: translate(0%, 0%);
    }
}

.volunteer-profile--stats--directions{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    gap: 10px;
}
.volunteer-profile--stats--directions > *{
    padding: 7px 10px;
    border-radius: 8px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25);
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    line-height: 1em;
    text-transform: uppercase;
    font-family: "spaceranger";
    height: 28px;
    box-sizing: border-box;
}

.volunteer-profile--stats--directions > *.blue{
    background: #2C98F7;
    color: white;
}
.volunteer-profile--stats--directions > *.green{
    background: #20CE55;
}
.volunteer-profile--stats--directions > *.yellow{
    background: #FCBC1D;
}
.volunteer-profile .classes-list .volunteer-profile--stats,
.volunteer-profile .volunteers-list .volunteer-profile--stats,
.class-members .volunteers-list .volunteer-profile--stats{
    transition: all 0.15s ease-in-out;
}

.volunteer-profile .classes-list .volunteer-profile--stats:hover,
.volunteer-profile .volunteers-list .volunteer-profile--stats:hover,
.class-members .volunteers-list .volunteer-profile--stats:hover,
.volunteer-profile .classes-list .volunteer-profile--stats.active,
.volunteer-profile .volunteers-list .volunteer-profile--stats.active,
.class-members .volunteers-list .volunteer-profile--stats.active{
    /* background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%); */
    /* box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5); */

    background: #161618;
}
@media screen and (min-width: 1312px) {
    .classes-list .volunteer-profile--stats,
    .volunteers-list .volunteer-profile--stats{
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        padding-right: calc(var(--padding) - 1px + 12px);
    }
}
@media screen and (max-width: 1312px) {
    .volunteer-profile--stats--directions{
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }
    .volunteer-profile--stats--directions > *{
        padding: 5px 10px;
        height: 23px;
    }
}

.double-margin-bot{
    margin-bottom: var(--gap);
}



.research-reports .volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2){
    width: fit-content;
    padding: 9px 14px;
    box-sizing: border-box;
    background: linear-gradient(318.96deg, #8F8F8F37 -1.9%, rgba(99, 99, 99, 0) 17.34%, #EBDBAF47 87.36%);


    border-radius: 8px;
    border: 1px solid rgba(235, 219, 175, 1)
}
@media screen and (max-width: 1312px) {
    .research-reports .volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2){
        padding: 6px 12px;
        height: 30px;
    }
    .research-reports .volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2) img{
        width: 16px;
        height: 15px;
    }
    .research-reports .volunteer-researches--item--stats > div.grid > div:nth-child(3) > span:nth-child(2){
        font-size: 12px;
    }
}



.research-reports--list--item .status{

    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.32); */
    gap: 6px;

    padding: 5px 11px;

    color: rgba(252, 188, 29, 1);

    font-size: 12px;
}
.research-reports--list--item .status img{
    height: 12px;
    width: auto;
}
.research-reports--list--item .status.rejected{
    font-family: "spaceranger";
    color: rgba(232, 31, 31, 1);
    font-size: 15px;
}
.research-reports--list--item .status.accepted{
    font-family: "spaceranger";
    color: rgba(32, 206, 85, 1);
    font-size: 15px;
}
.research-reports--list--item .status.moderation{
    font-family: "spaceranger";
    color: rgba(252, 188, 29, 1);
    font-size: 15px;
}
.research-reports--list--item .status.edit{
    color: rgba(252, 188, 29, 1);
}


.research-reports--list--item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.research-reports--list--item > a.button{
    width: fit-content;
    padding-left: 16px;
    padding-right: 16px;
}

.research-reports--list--item > div:nth-child(1){
    display: grid;
    grid-template-columns: 53px 1fr;
    column-gap: var(--gap);
}
.research-reports--list--item > div:nth-child(1) > div:nth-child(1){
    width: 53px;
    height: 53px;
    border-radius: 100px;

    background: linear-gradient(115.33deg, rgba(209, 209, 209, 0.3) -8.48%, rgba(188, 188, 188, 0.05) 130.76%);

    border: 1px solid #B2B2B2;

    box-sizing: border-box;
    padding: 11px;

    box-shadow: 0px 1px 8.8px 0px rgba(0, 0, 0, 0.52);

}

.research-reports--list--item > div:nth-child(1) > div:nth-child(1) img{
    width: 100%;
    height: 100%;
}

.research-reports--list--item > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--gap) / 2);
}
.research-reports--list--item > div:nth-child(1) > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.research-reports--list--item > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    gap: var(--gap);
}
.research-reports--list--item > div:nth-child(1) > div:nth-child(2) > div:nth-child(2){
    gap: calc(var(--gap) / 2);
}
.research-reports--list--item > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > *:nth-child(1){
    opacity: 0.5;
}

.research-reports--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

@media screen and (min-width: 1312px){
    .research-reports--list--item > .status{
        display: none;
    }
}

@media screen and (max-width: 1312px){
    .research-reports--list--item .status img{
        height: 10px;
    }
    .research-reports--list--item > div .status{
        display: none;
    }
    .research-reports--list--item .status.rejected,
    .research-reports--list--item .status.accepted,
    .research-reports--list--item .status.moderation{
        font-size: 12px;
    }

    .research-reports--list--item{
        flex-direction: column;
        gap: var(--gap);
        align-items: end;
    }
    .research-reports--list--item > div:nth-child(1){
        width: 100%;
        grid-template-columns: 33px 1fr;
    }
    .research-reports--list--item > div:nth-child(1) > div:nth-child(1){
        width: 33px;
        height: 33px;
        padding: 6px;
    }
    .research-reports--list--item .status:not(.edit){
        margin-right: auto;
    }

    .research-reports--list--item .status:not(.edit) + a.button{
        margin-top: calc(-22px - var(--gap));
    }
}


.volunteer-profile--statistic{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.volunteer-profile--statistic .title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.volunteer-profile--statistic .title select{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: none;
    padding-right: 25px;
    height: 38px;
    width: min-content;
    box-sizing: border-box;

    cursor: pointer;

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

    background: url(/public/img/select-arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 13px 8px;
    background-position: center right;
    font-family: "Roboto";
    font-size: 1em;
    height: 1em;
    border-radius: 0px;

    text-align: end;
}
.volunteer-profile--statistic .title select option{
    background: #161618;
    color: white;
    text-align: start;
}
.volunteer-profile--statistic .grid{
    display: grid;
    grid-template-columns: 87px 198px 198px 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.volunteer-profile--statistic .grid > div > img{
    width: 100%;
    height: auto;
}
.volunteer-profile--statistic .grid > div{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    justify-content: center;
    border-radius: 8px;
    padding: var(--gap);
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    height: 87px;
    box-sizing: border-box;
}
.volunteer-profile--statistic .grid > div > span{
    color: #2C98F7;
    text-transform: uppercase;
}
.volunteer-profile--statistic .grid > div > div{
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}
.volunteer-profile--statistic .grid > div > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.penta{
    display: flex;
    flex-direction: column;
    gap: 15px;

    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 15px;
}
.penta > p{
    color :#2C98F7;
    text-transform: uppercase;
    margin: 0px;
}
.penta > span{
    opacity: 0.5;
}
.penta > div{
    display: grid;
    grid-template-columns: 274px 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.penta > div > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow: auto;
    max-height: 268px;
}
.penta > div > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    padding-right: var(--gap);
}
.penta > div > div:nth-child(2) > div > div:nth-child(1){
    font-family: "spaceranger";
    font-size: 30px;
    text-transform: uppercase;
    min-width: 41px;
    text-align: center;
}
.penta > div > div:nth-child(2) > div > div:nth-child(2){
    padding: 7px 10px;
    border-radius: 8px;
    /* box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25); */
    background: #161618 linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    line-height: 1em;
    text-transform: uppercase;
    font-family: "spaceranger";
    color: white;
    box-sizing: border-box;
    min-height: 28px;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.penta > div > div:nth-child(2) > div > div:nth-child(3){
    margin-left: auto;
}
.penta > div > div:nth-child(1){
    position: relative;
    width: 274px;
    height: 268px;
    box-sizing: border-box;
    padding: 16px 12px;
}
.penta > div > div:nth-child(1) canvas{
    width: 100%;
    height: 100%;

    position: relative;
    z-index: 1;
}
.penta > div > div:nth-child(1) > div:nth-child(2){
    position: absolute;
    top: 16px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 32px);

    background: url(/public/img/penta-bg.svg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}
.penta > div > div:nth-child(1) > div:nth-child(2) > div{
    position: absolute;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    transform: translate(-50%, -50%);
}
.penta > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    top: 0px;
    left: 50%;
}
.penta > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(2){
    top: 38%;
    left: 97%;
}
.penta > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(3){
    top: 99%;
    left: 82%;
}
.penta > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(4){
    top: 99%;
    left: 18%;
}
.penta > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(5){
    top: 38%;
    left: 2%;
}


.penta > div > div:nth-child(1) > div.penta-points{
    position: absolute;
    top: 16px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 32px);

    z-index: 3;
}
.penta > div > div:nth-child(1) > div.penta-points > div{
    position: absolute;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 1px solid #2C98F7;
    border-radius: 100px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    top: 50%;
    left: 50%;
}
.penta > div > div:nth-child(1) > div.penta-points > div::before{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: #2C98F7;
}

.volunteer-profile--statistic .grid > div > div > div img{
    width: 29px;
    height: auto;
}

@media screen and (max-width: 1312px) {
    .volunteer-profile--statistic .grid {
        grid-template-columns: 62px 1fr 1fr;
    }
    .volunteer-profile--statistic .grid > div{
        height: 62px;
    }
    .volunteer-profile--statistic .grid > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .volunteer-profile--statistic .grid > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
    .volunteer-profile--statistic .grid > div:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
    .volunteer-profile--statistic .grid > div:nth-child(4) { grid-area: 2 / 1 / 3 / 4; }

    .volunteer-profile--statistic .grid > div > div > div img{
        width: 18px;
    }
    .penta{
        padding: 12px;
    }
    .penta > div{
        grid-template-columns: 168px 1fr;
    }
    .penta > div > div:nth-child(1){
        width: 168px;
        height: 163px;
    }
    .penta > div > div:nth-child(1) > div:nth-child(2) > div{
        width: 21px;
        height: 21px;
        border-width: 2px;
    }
    .penta > div > div:nth-child(2){
        max-height: 163px;
    }
    .penta > div > div:nth-child(2) > div > div:nth-child(2){
        min-height: 23px;
        padding: 5px 10px;
        border-radius: 6px;
    }
    .penta > div > div:nth-child(2) > div > div:nth-child(1){
        font-size: 20px;
    }
    .penta > div > div:nth-child(1) > div.penta-points > div{
        width: 9px;
        height: 9px;
    }
    .penta > div > div:nth-child(1) > div.penta-points > div::before{
        width: 5px;
        height: 5px;
    }
    .volunteer-profile--statistic .grid > div:nth-child(1){
        padding: 8px;
    }
}
@media screen and (max-width: 720px) {
    .volunteer-profile--statistic .grid{
        grid-template-columns: 62px 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .volunteer-profile--statistic .grid > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .volunteer-profile--statistic .grid > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
    .volunteer-profile--statistic .grid > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
    .volunteer-profile--statistic .grid > div:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }

    .penta > div{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        align-items: center;
    }
    .penta > div > div:nth-child(1){
        height: 310px;
        width: 318px;
    }.penta > div > div:nth-child(1) > div:nth-child(2) > div{
         width: 40px;
         height: 40px;
     }


    .penta > div > div:nth-child(1) > div.penta-points > div{
        width: 16px;
        height: 16px;
    }
    .penta > div > div:nth-child(1) > div.penta-points > div::before{
        width: 10px;
        height: 10px;
    }
    .penta > div > div:nth-child(2){
        width: 100%;
    }
}

.grey-text{
    opacity: 0.5;
}
.green-text{
    color: #20CE55;
}
.grey-subbox{
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 15px;
}

.planet-page--tabs > div:nth-child(2) > div.planet-stats{
    display: grid;
    grid-template-columns: 1fr 313px;
    column-gap: var(--gap);
}


.planet-stats--charts,
.planet-stats--info{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.planet-stats--charts--numbers{
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);
    height: 97px;

    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}

.planet-stats--numbers{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.planet-stats--numbers > div:nth-child(1){
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;

    height: 97px;
}

.planet-stats--numbers > div:nth-child(1) > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.planet-stats--numbers > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
}
.planet-stats--numbers > div:nth-child(1) > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.planet-stats--numbers > div:nth-child(1) > div:nth-child(2) > div img{
    width: 18px;
    height: auto;
}

.planet-stats--numbers > div:nth-child(2){
    display: grid;
    grid-template-columns: 1fr 313px;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.planet-stats--numbers > div:nth-child(2) > div{
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);

    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);

    height: 97px;
}
.planet-stats--numbers > div:nth-child(2) > div > div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
}
.planet-stats--numbers > div:nth-child(2) > div > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.planet-stats--numbers > div:nth-child(2) > div > div > div img{
    width: 29px;
    height: auto;
}

.planet-stats--info--regions{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.planet-stats--info--regions .grey-subbox{

}
.planet-stats--info--regions .grey-subbox > div{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
    max-height: 280px;
    box-sizing: border-box;
    overflow: auto;
    padding-right: 15px;
}
.planet-stats--info--regions .grey-subbox > div > div{
    display: grid;
    grid-template-columns: 40px 167px 1fr;
    align-items: center;
    column-gap: calc(var(--gap) / 2);
}
.planet-stats--info--regions .grey-subbox > div > div > *:nth-child(1){
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    border-radius: 100px;
    padding: 5px;
}
.planet-stats--info--regions .grey-subbox > div > div > *:nth-child(1) img{
    width: 100%;
    height: 100%;
}
.planet-stats--info--regions .grey-subbox > div > div > *:nth-child(2){
    min-width: 30px;
    background: #2C98F7;
    box-shadow: 0px 1px 1px 0px black, 0px 2px 0px 0px grey;
    height: 20px;
    min-width: 20px;
    border-radius: 20px;
    border-top: 1px solid white;
}

.planet-stats--charts--chart{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.planet-stats--charts--chart > div:nth-child(2){
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}
.planet-stats--charts--chart > div:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) / 2);
}
.planet-stats--charts--chart > div:nth-child(2) > div > div{
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 100px;
    background: white;
}
.planet-stats--charts--chart.green-chart > div:nth-child(2) > div:nth-child(1) > div{
    background: #20CE55;
}
.planet-stats--charts--chart.blue-chart > div:nth-child(2) > div:nth-child(1) > div{
    background: #2C98F7;
}
.planet-stats--charts--chart > div:nth-child(3){
    height: 111px;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: center;
    gap: var(--gap);

    background: url(/public/img/planet-stats--charts--bg.svg);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;

    position: relative;

    overflow: hidden;
}
.planet-stats--charts--chart > div:nth-child(3)::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 272px;
    height: 272px;
    background: url(/public/img/planet-stats--charts--blue--s.svg);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    transform: rotate(calc(12deg + 168deg * var(--percent)));
    /* animation: test 5s linear 0s infinite; */
}
.planet-stats--charts--chart.green-chart > div:nth-child(3)::before{
    background: url(/public/img/planet-stats--charts--green--s.svg);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.planet-stats--charts--chart > div:nth-child(3) canvas{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

@keyframes test {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.planet-stats--charts--chart > div:nth-child(3) > div{
    display: flex;
    flex-direction: row;
    gap: var(--gap);

}
.planet-stats--charts--chart > div:nth-child(3) > div > *{
    font-family: "spaceranger";
    font-size: 25px;
    text-transform: uppercase;
    color: white;
}
.planet-stats--charts--chart.green-chart > div:nth-child(3) > div > *:nth-child(1){
    color: #20CE55;
}
.planet-stats--charts--chart.blue-chart > div:nth-child(3) > div > *:nth-child(1){
    color: #2C98F7;
}

@media screen and (min-width: 1312px) {
    .planet-stats--info .planet-stats--charts{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .planet-stats .planet-stats--charts{
        display: none;
    }
    .planet-stats--info .planet-stats--charts {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-column-gap: var(--gap);
        grid-row-gap: var(--gap);
    }

    .planet-stats--info .planet-stats--charts > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .planet-stats--info .planet-stats--charts > *:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
    .planet-stats--info .planet-stats--charts > *:nth-child(3) { grid-area: 1 / 5 / 2 / 7; }
    .planet-stats--info .planet-stats--charts > *:nth-child(4) { grid-area: 2 / 1 / 3 / 4; }
    .planet-stats--info .planet-stats--charts > *:nth-child(5) { grid-area: 2 / 4 / 3 / 7; }

    .planet-page--tabs > div:nth-child(2) > div.planet-stats{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .planet-stats--numbers > div:nth-child(1),
    .planet-stats--numbers > div:nth-child(2) > div,
    .planet-stats--charts--numbers{
        height: 62px;
    }
    .planet-stats--numbers > div:nth-child(2) > div > div > div img{
        height: 18px;
    }
    .planet-stats--numbers > div:nth-child(1) > div:nth-child(2) > div img{
        height: 11px;
    }
    .planet-stats--numbers > div:nth-child(2){
        grid-template-columns: 1fr 1fr;
    }
    .planet-stats--charts--chart {
        display: grid;
        grid-template-columns:220px 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 6px;
    }
    .planet-stats--charts--chart > div:nth-child(2){
        flex-direction: column;
        justify-content: center;
    }

    .planet-stats--charts--chart > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .planet-stats--charts--chart > *:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
    .planet-stats--charts--chart > *:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }

    .planet-stats--charts--chart > div:nth-child(3)::before{
        width: 220px;
        height: 220px;
        top: 15px;
    }
    .planet-stats--charts--chart > div:nth-child(3){
        height: 105px;
    }
    .planet-stats--info--regions .grey-subbox > div > div{
        grid-template-columns: 40px 224px 1fr;
    }
    .planet-stats--info--regions .grey-subbox > div{
        grid-template-columns: 1fr 1fr;
        padding-right: 12px;
    }
    .planet-stats--charts--chart > div:nth-child(3) > div > *{
        font-size: 20px;
    }
    .planet-stats--info--regions .grey-subbox > div{
        max-height: 404px;
    }
}
@media screen and (max-width: 720px) {
    .planet-stats--numbers > div:nth-child(2){
        grid-template-columns: 1fr;
    }
    .planet-stats--numbers > div:nth-child(1){
        height: auto;
        align-items: center;
    }
    .planet-stats--numbers > div:nth-child(1) > div:nth-child(2){
        flex-direction: column;
        gap: 12px;
    }
    .planet-stats--info .planet-stats--charts{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .planet-stats--info--regions .grey-subbox > div{
        grid-template-columns: 1fr;
    }
    .planet-stats--info--regions .grey-subbox > div > div{
        grid-template-columns: 40px 203px 1fr;
    }
    .planet-stats--info--regions .grey-subbox > div{
        max-height: 820px;
    }
}
.planet-penta h5,
.planet-stats--info--regions h5{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.research-stats--grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: var(--gap);
    grid-row-gap: var(--gap);
}

.research-stats--grid > div:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.research-stats--grid > div:nth-child(2) { grid-area: 1 / 4 / 2 / 7; }
.research-stats--grid > div:nth-child(3) { grid-area: 2 / 1 / 3 / 5; }
.research-stats--grid > div:nth-child(4) { grid-area: 2 / 5 / 3 / 7; }
.research-stats--grid > div:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
.research-stats--grid > div:nth-child(6) { grid-area: 3 / 3 / 4 / 5; }
.research-stats--grid > div:nth-child(7) { grid-area: 3 / 5 / 4 / 7; }


.research-stats--grid > div{
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    height: 97px;
}
.research-stats--grid > div > div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
}
.research-stats--grid > div > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--gap) / 2);
}
.research-stats--grid > div > div > div img{
    width: 29px;
    height: auto;
}
.research-stats--charts{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
}

.research-stats--charts .planet-stats--charts--chart {
    display: grid;
    grid-template-columns:273px 1fr;
    grid-column-gap: 12px;
    grid-row-gap: 6px;
}
.research-stats--charts .planet-stats--charts--chart > div:nth-child(2){
    flex-direction: column;
    justify-content: center;
}

.research-stats--charts .planet-stats--charts--chart > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.research-stats--charts .planet-stats--charts--chart > *:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
.research-stats--charts .planet-stats--charts--chart > *:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }

.research-stats--charts .planet-stats--charts--chart > div:nth-child(3)::before{
    width: 273px;
    height: 273px;
    top: 1px;
}
.research-stats--charts .planet-stats--charts--chart > div:nth-child(3){
    height: 111px;
}

@media screen and (max-width: 1312px) {
    .research-stats--charts .planet-stats--charts--chart{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .research-stats--charts .planet-stats--charts--chart > div:nth-child(3)::before{
        width: 212px;
        height: 212px;
        top: 4px;
    }
    .research-stats--charts .planet-stats--charts--chart > div:nth-child(3){
        height: 90px;
    }
    .research-stats--charts .planet-stats--charts--chart > div:nth-child(2){
        order: 1;
    }
    .research-stats--grid > div{
        height: 62px;
    }
    .research-stats--grid > div > div > div img{
        height: 18px;
    }
    .research-stats--grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .research-stats--grid > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .research-stats--grid > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
    .research-stats--grid > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
    .research-stats--grid > div:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
    .research-stats--grid > div:nth-child(5) { grid-area: 3 / 2 / 4 / 3; }
    .research-stats--grid > div:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }
    .research-stats--grid > div:nth-child(7) { grid-area: 4 / 2 / 5 / 3; }
}
@media screen and (max-width: 720px){
    .research-stats--charts{
        grid-template-columns: 1fr;
        row-gap: var(--gap);
    }

    .research-stats--charts .planet-stats--charts--chart {
        display: grid;
        grid-template-columns:220px 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 6px;
    }
    .research-stats--charts .planet-stats--charts--chart > div:nth-child(2){
        flex-direction: column;
        justify-content: center;
    }

    .research-stats--charts .planet-stats--charts--chart > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .research-stats--charts .planet-stats--charts--chart > *:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
    .research-stats--charts .planet-stats--charts--chart > *:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }

    .research-stats--charts .planet-stats--charts--chart > div:nth-child(3)::before{
        width: 220px;
        height: 220px;
        top: 15px;
    }
    .research-stats--charts .planet-stats--charts--chart > div:nth-child(3){
        height: 105px;
    }
    .research-stats--grid{
        grid-template-columns: 1fr;
    }
}

.volunteer-profile--awards{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.volunteer-profile--awards > .title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.volunteer-profile--awards > .title select{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: none;
    padding-right: 25px;
    height: 38px;
    width: min-content;
    box-sizing: border-box;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url(/public/img/select-arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 13px 8px;
    background-position: center right;
    font-family: "Roboto";
    font-size: 1em;
    border-radius: 0px;

    text-align: end;
}

.volunteer-profile--awards > .title select option{

    background: #161618;
    color: white;
    text-align: start;
}

.volunteer-profile--awards--swiper{
    display: grid!important;
    grid-template-columns: 28px 1fr 28px;
    column-gap: var(--gap);
    align-items: center;
}
.volunteer-profile--awards--swiper > .swiper{
    width: 100%;
}
.volunteer-profile--awards--swiper > img{
    height: 30px;
    width: 30px;
    border-radius: 200px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 8px;
    box-sizing: border-box;
    background: var(--gray-bg-gradient);
    cursor: pointer;
    display: block;
}
.volunteer-profile--awards--swiper > img.swiper-button-disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.volunteer-profile--awards--swiper > img:last-child{
    transform: rotate(180deg);
}
.volunteer-profile--awards--swiper .swiper-slide{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: space-between;
    align-items: center;
    padding: var(--gap);
    box-sizing: border-box;
    text-align: center;
    min-height: 265px;
    height: unset;
    /* width: 195px; */
}
.volunteer-profile--awards--swiper .swiper-slide > div:nth-child(1){
    height: 95px;
    width: 95px;
    border-radius: 200px;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 20px;
    box-sizing: border-box;
    background: var(--greybox-gradient);
}
.volunteer-profile--awards--swiper .swiper-slide.disabled > div:nth-child(1){
    opacity: 0.25;
}
.volunteer-profile--awards--swiper .swiper-slide > div:nth-child(1) img{
    width: 100%;
    height: 100%;
}
.volunteer-profile--awards--swiper .swiper-slide .multiple{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
}
.volunteer-profile--awards--swiper .swiper-slide .multiple span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #2C98F7;
    border-top: 2px solid #b2dbff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.7);
    border-radius: 6px;
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    font-family: "spaceranger";
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}
.volunteer-profile--awards--swiper .swiper-slide .single{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    width: 100%;
}
.volunteer-profile--awards--swiper .swiper-slide .single span{
    opacity: 0.5;
}
.volunteer-profile--awards--swiper .swiper-slide .single > div{
    position: relative;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    height: 31px;
    padding: 1px;
    box-sizing: border-box;
    border-radius: 100px;
    width: 100%;
    overflow: hidden;
}
.volunteer-profile--awards--swiper .swiper-slide .single > div > div{
    margin-right: auto;
    background: #2C98F7;
    border-top: 2px solid #b2dbff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.7), 0px 0px 10px 0px #2C98F7;
    border-radius: 100px;
    height: 31px;
    max-width: calc(100% - 2px);
}

.volunteer-profile--awards--swiper .swiper-slide h3{
    min-height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 1312px) {
    .volunteer-profile--awards--swiper{
        grid-template-columns: 1fr;
    }
    .volunteer-profile--awards--swiper > img{
        display: none;
    }
    .volunteer-profile--awards--swiper .swiper-slide{
        width: 145px;
        min-height: 192px;
    }
    .volunteer-profile--awards--swiper .swiper-slide > div:nth-child(1){
        width: 55px;
        height: 55px;
        padding: 11px;
    }
    .volunteer-profile--awards--swiper .swiper-slide .multiple{
        height: 50px;
    }
    .volunteer-profile--awards--swiper .swiper-slide .multiple span{
        height: 40px;
    }
}

.research-past-res{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.research-past-res .volunteer-researches--item--stats > div.grid-3{
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--gap);
}

.research-past-res .volunteer-researches--item--stats > div.grid-3 > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.research-past-res .volunteer-researches--item--stats > div.grid-3 > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.research-past-res .volunteer-researches--item--stats > div.grid-3 > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }

.volunteer-notifications > .title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.volunteer-notifications > .title h3 span:nth-child(2){
    font-family: "Roboto";
    font-size: 15px;
}
.volunteer-notifications > .title select{
    border-radius: 8px;
    background: transparent;
    color: white;
    outline: none;
    border: none;
    padding-right: 25px;
    height: 38px;
    width: min-content;
    box-sizing: border-box;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url(/public/img/select-arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 13px 8px;
    background-position: center right;
    font-family: "Roboto";
    font-size: 1em;
    height: 1em;
    border-radius: 0px;
    text-align: end;
}
.volunteer-notifications > .title select option{
    background: #161618;
    color: white;
    text-align: start;
}

.volunteer-notifications{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.volunteer-notifications--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.volunteer-notifications--list > *{
    display: grid;
    grid-template-columns: 165px 1fr;
    column-gap: var(--gap);

    padding: var(--gap);

    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}
.volunteer-notifications--list > * > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.volunteer-notifications--list > * > div:nth-child(1) > span:nth-child(1){
    opacity: 0.5;
}
.volunteer-notifications--list > * > div:nth-child(1) > span.green{
    color: #20CE55;
}
.volunteer-notifications--list > * > div:nth-child(1) > span.yellow{
    color: #FCBC1D;
}
.volunteer-notifications--list > * > div:nth-child(1) > span.red{
    color: #F24125;
}
.volunteer-notifications--list > * > div:nth-child(1) > span.blue{
    color: #2C98F7;
}
@media screen and (max-width: 1312px) {
    .volunteer-notifications--list > *{
        grid-template-columns: 130px 1fr;
    }
}
.class-members .class-members--stats{
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.class-members .class-members--stats > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}

@media screen and (min-width: 1312px) {
    .class-members .class-members--stats .planet-stats--charts--chart{
        display: grid;
        grid-template-columns: 216px 328px;
        grid-column-gap: var(--gap);
        grid-row-gap: calc(var(--gap) / 2);
    }

    .class-members .class-members--stats .planet-stats--charts--chart > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .class-members .class-members--stats .planet-stats--charts--chart > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .class-members .class-members--stats .planet-stats--charts--chart > *:nth-child(3) { grid-area: 1 / 2 / 3 / 3; }

    .class-members .class-members--stats .planet-stats--charts--chart > div:nth-child(3){
        height: 57px;
        justify-content: end;
        padding: var(--gap);
        box-sizing: border-box;

        background: url(/public/img/planet-stats--charts--bg.svg);
        background-size: 161px auto;
        background-position: left top;
        background-repeat: no-repeat;
    }
    .class-members .class-members--stats .planet-stats--charts--chart > div:nth-child(3)::before{
        width: 161px;
        height: 161px;
        /* 20px
        168px */
        transform: rotate(calc(20deg + 148deg * var(--percent)));
    }
}
@media screen and (max-width: 1312px) {
    .class-members .class-members--stats{
        grid-template-columns: 1fr;
    }
}


.class-near,
.class-near--container{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.class-near--header{
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #434343 linear-gradient(118deg, rgba(209, 209, 209, 0.3) 0%, rgba(188, 188, 188, 0.05) 100%);
    padding: calc(var(--padding) - 1px);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}
.class-near--container.active .class-near--header{
    background: linear-gradient(0deg, #161618 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    border: 1px solid #A5A5A5;
}
.class-near--header > div:nth-child(1){
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap);
}
.class-near--header > div:nth-child(1) > div:nth-child(1){
    width: 46px;
    height: 46px;

    background: var(--greybox-gradient);
    border-radius: 100px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
}
.class-near--header > div:nth-child(1) > div:nth-child(1) img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.class-near--header > div:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.class-near--header > div:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: var(--gap);
}
.class-near--header > div:nth-child(2) > *:nth-child(1){
    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 0px 15px;
    height: 38px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: "spaceranger";
    text-transform: uppercase;
}
.class-near--header > div:nth-child(2) > *:nth-child(2){
    transform: rotate(90deg);
    cursor: pointer;
    width: 38px;
    height: 38px;
}
.class-near--container.active .class-near--header > div:nth-child(2) > *:nth-child(2){
    transform: rotate(-90deg);
}
.class-near--container.active .class-near--list{
    display: flex;
    flex-direction: column;
}
.class-near--container:not(.active) .class-near--list{
    display: none;
}
@media screen and (max-width: 1312px) {
    .class-near--container .class-near--header{
        flex-direction: column;
    }
    .class-near--header > div{
        width: 100%;
    }
    .class-near--header > div:nth-child(2){
        width: 100%;
        justify-content: space-between;
    }
    .class-near--header > div:nth-child(2) > *:nth-child(1){
        height: 30px;
        font-size: 12px;
    }
    .class-near--header > div:nth-child(2) > *:nth-child(2){
        height: 30px;
        width: 30px;
    }
}

.uni-bonuses--list{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.uni-bonus{
    width: calc(100% - 124px);
    margin-right: auto;
    position: relative;
    padding-right: 169px;
    padding-left: 32px;
    display: grid;
    grid-template-columns: 1fr 220px;
    column-gap: var(--gap);
    row-gap: var(--gap);
    min-height: 229px;
}
.uni-bonus::before{
    content: "";
    width: 12px;
    height: 189px;
    position: absolute;
    left: 6px;
    top: 50%;
    background: url(/public/img/uni_bonus--line.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    transform: translate(-50%, -50%);
}
.uni-bonus > *:nth-child(1),
.uni-bonus > *:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    height: fit-content;
}
.uni-bonus > *:nth-child(2){
    padding: 15px;
    margin-top: auto;
    margin-bottom: auto;
}
.uni-bonus > *:nth-child(2) > div + *{
    margin-top: calc(var(--gap) / 2);
}
.uni-bonus > *:nth-child(2) > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: calc(var(--gap) / 2);
}
.uni-bonus > *:nth-child(2) span{
    letter-spacing: 0.16em;
    white-space: nowrap;
}
.uni-bonus > *:nth-child(2) > div > *{
    width: 40px;
    height: 40px;
    border-radius: 1000px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 8px;
    box-sizing: border-box;
    background: var(--greybox-gradient);
}
.uni-bonus > *:nth-child(2) > div > * img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.uni-bonus > *:nth-child(3){
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    width: 273px;
    height: 229px;
    background: url(/public/img/hatch.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.uni-bonus:not(.disabled):not(.requested) > *:nth-child(3){
    cursor: pointer;
}
.uni-bonus > *:nth-child(3) div{
    width: 117px;
    height: 110px;
    position: relative;
}
.uni-bonus > *:nth-child(3) div img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
    position: relative;
}
.uni-bonus > *:nth-child(3) div h3{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    z-index: 1;
}
.uni-bonus.requested > *:nth-child(3) div h3{
    color: #20CE55;
}
.uni-bonus.disabled > *:nth-child(3) div{
    filter: grayscale(1);
}
.uni-bonus.disabled > *:nth-child(3) div h3{
    filter: contrast(0.5);
}
.uni-bonus:not(.disabled):not(.requested) > *:nth-child(3) div::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(52,219,207,0.5) 8%, rgba(17,201,227,0.5) 50%, rgba(8,145,244,0.1) 100%);
    border-radius: 1000px;
    z-index: 0;
    opacity: 0;
    transition: all 0.15s ease-in-out;
}
.uni-bonus:not(.disabled):not(.requested) > *:nth-child(3):hover div::before{
    opacity: 1;
}

@media screen and (min-width: 720px){
    .researches--content > .button{
        display: none;
    }
}
@media screen and (max-width: 1312px) {
    .uni-bonus {
        display: grid;
        grid-template-columns: 1fr 251px;
        padding-right: 11px;
        padding-top: 24px;
        width: 100%;
        align-items: center;
        padding-left: 11px;
    }

    .uni-bonus > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .uni-bonus > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .uni-bonus > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
    .uni-bonus > *:nth-child(3){
        position: relative;
        top: unset;
        left: unset;
        transform: unset;

        width: 251px;
        height: 210px;
    }
    .uni-bonus > *:nth-child(2) > div > *{
        width: 33px;
        height: 33px;
        padding: 6px;
    }
    .uni-bonus::before{
        content: "";
        width: 12px;
        height: 189px;
        position: absolute;
        left: 50%;
        top: 6px;
        background: url(/public/img/uni_bonus--line.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% auto;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}
@media screen and (max-width: 720px){
    .uni-bonus{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        align-items: center;
        padding-bottom: calc(105px + var(--gap));
        margin-bottom: 105px;
    }
    .uni-bonus > *{
        grid-area: unset!important;
    }
    .uni-bonus > *:nth-child(1),
    .uni-bonus > *:nth-child(2){
        width: 100%;
    }
    .uni-bonus > *:nth-child(3){
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -50%);
    }
}

.volunteer-bonuses--status{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    background: rgba(22, 22, 24, 1) linear-gradient(283.92deg, rgba(255, 255, 255, 0.08) 16.95%, rgba(255, 255, 255, 0.08) 37.73%, rgba(255, 255, 255, 0) 66.73%, rgba(255, 255, 255, 0.08) 91.85%, rgba(255, 255, 255, 0.08) 91.86%);
    border: 1px solid #818181;
    border-radius: 8px;
    padding: calc(var(--gap) - 1px);
    gap: var(--gap);
}
.volunteer-bonuses--status .button{
    width: fit-content;
    padding-left: var(--gap);
    padding-right: var(--gap);
}
.volunteer-bonuses--status > *:nth-child(1){
    font-size: 20px;
}
@media screen and (max-width: 1312px){
    .volunteer-bonuses--status > *:nth-child(1){
        font-size: 15px;
    }
}



.bonus-request{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
@media screen and (min-width: 720px) {
    .bonus-request .researches--title br{
        display: none;
    }
}
.bonus-request > .bonus-request--container{
    display: grid;
    grid-template-columns: 1fr 313px;
    column-gap: var(--gap);
    row-gap: var(--gap);
}

.bonus-request > .bonus-request--container > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.bonus-request > .bonus-request--container > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.bonus-request > .bonus-request--container > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

.bonus-request > .bonus-request--container > *:nth-child(1) > div{
    display: grid;
    grid-template-columns: 1fr 38px;
    gap: calc(var(--gap) / 2);
}
.bonus-request > .bonus-request--container.sended > *:nth-child(1) > div{
    opacity: 0.5;
}
.bonus-request > .bonus-request--container > *:nth-child(1) > div img{
    width: 38px;
    height: 38px;

    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 10px;
    box-sizing: border-box;
    background: var(--greybox-gradient);
    opacity: 0.5;
    cursor: pointer;

    transition: all 0.15s ease-in-out;
}
.bonus-request > .bonus-request--container > *:nth-child(1) > div > div:not(.empty) + img{
    opacity: 1;
}
.bonus-request > .bonus-request--container > *{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.bonus-request > .bonus-request--container > *:nth-child(1){
    gap: calc(var(--gap) / 2);
}
.bonus-request > .bonus-request--container > *:nth-child(2) > div{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}
.bonus-request > .bonus-request--container > *:nth-child(2) > div > *:nth-child(2){
    outline: none;
    border: none;

    border-radius: 8px;
    background: linear-gradient(0deg, #404142 0%, #2C2E2F 100%);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);

    padding: 10px 15px;
    box-sizing: border-box;
    width: 100%;

    height: auto;

    color: white;

    font-family: "Roboto";
}
.bonus-request > .bonus-request--container > *:nth-child(2) > div > *:nth-child(2)::placeholder{
    font-size: inherit;
    font-family: "Roboto";
}
.bonus-request > .bonus-request--container > *:nth-child(3){
    justify-content: space-between;
}
.bonus-request > .bonus-request--container > *:nth-child(3) > div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    text-align: center;
}
.bonus-request > .bonus-request--container > *:nth-child(3) > div:nth-child(1) a{
    color: #2C98F7;
}
.bonus-request > .bonus-request--container > *:nth-child(3) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    text-align: center;
    align-items: center;
}
.bonus-request > .bonus-request--container > *:nth-child(3) > div:nth-child(2) > div{
    height: 65px;
    width: 65px;
    border-radius: 200px;
    box-sizing: border-box;
    padding: 19px;
    box-shadow: -1px -1px 1px 1px rgba(209, 209, 209, 0.7), 1px 1px 1px 1px rgba(188, 188, 188, 0.25), 0px 0px 16px 0px rgba(0, 0, 0, 0.7);
    padding: 20px;
    box-sizing: border-box;
    background: var(--greybox-gradient);
    cursor: pointer;
}
.bonus-request > .bonus-request--container > *:nth-child(3) > div:nth-child(2) > div img{
    width: 100%;
    height: 100%;
}
.bonus-request > .bonus-request--container.sended > *:nth-child(3) > div:nth-child(1){
    margin-top: auto;
    margin-bottom: auto;
}
.bonus-request > .bonus-request--container.sended > *:nth-child(3) > div:nth-child(2) > div{
    background: #161618 linear-gradient(-80deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.03) 100%);
    cursor: default;
}

@media screen and (max-width: 1312px) {
    .bonus-request > .bonus-request--container{
        grid-template-columns: 1fr 224px;
    }
}
@media screen and (max-width: 720px){
    .bonus-request > .bonus-request--container{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
}

.error-block{
    padding: var(--gap);
    background: #2D0008;
    border: 1px solid #E81F1F;
    border-radius: 5px;
}
.success-block{
    padding: var(--gap);
    background: #002D08;
    border: 1px solid #1FE81F;
    border-radius: 5px;
}

#send-confirm span{
    font-size: 25px;
}
@media screen and (max-width: 1312px){
    #send-confirm span{
        font-size: 15px;
    }
}


.popup--image-view img{
    height: 480px;
    width: 100%;
    object-fit: contain;
    object-position: center;
}
@media screen and (max-width: 1312px){
    .popup--image-view img{
        height: 203px;
    }
}