@charset "UTF-8";

.skeleton[data-v-394f762e] {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #ffffff0d;
    border-radius: 16px
}

.skeleton[data-v-394f762e]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #fff0, #ffffff10, #fff0);
    animation: loading-shimmer-394f762e 1.3s infinite
}

@keyframes loading-shimmer-394f762e {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(100%)
    }
}

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: #ffffffb3;
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    --toastify-color-progress-colored: #ddd
}

.Toastify__toast-container {
    box-sizing: border-box;
    color: #fff;
    padding: 4px;
    position: fixed;
    transform: translate3d(0, 0, var(--toastify-z-index) px);
    width: var(--toastify-toast-width);
    z-index: var(--toastify-z-index)
}

.Toastify__toast-container--top-left {
    left: 1em;
    top: 1em
}

.Toastify__toast-container--top-center {
    left: 50%;
    top: 1em;
    transform: translate(-50%)
}

.Toastify__toast-container--top-right {
    right: 1em;
    top: 1em
}

.Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em
}

.Toastify__toast-container--bottom-center {
    bottom: 1em;
    left: 50%;
    transform: translate(-50%)
}

.Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em
}

@media only screen and (max-width:480px) {
    .Toastify__toast-container {
        left: 0;
        margin: 0;
        padding: 0;
        width: 100vw
    }

    .Toastify__toast-container--top-center,
    .Toastify__toast-container--top-left,
    .Toastify__toast-container--top-right {
        top: 0;
        transform: translate(0)
    }

    .Toastify__toast-container--bottom-center,
    .Toastify__toast-container--bottom-left,
    .Toastify__toast-container--bottom-right {
        bottom: 0;
        transform: translate(0)
    }

    .Toastify__toast-container--rtl {
        left: auto;
        right: 0
    }
}

.Toastify__toast {
    border-radius: 4px;
    box-shadow: 0 1px 10px #0000001a, 0 2px 15px #0000000d;
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
    display: flex;
    font-family: var(--toastify-font-family);
    justify-content: space-between;
    margin-bottom: 1rem;
    max-height: var(--toastify-toast-max-height);
    min-height: var(--toastify-toast-min-height);
    overflow: hidden;
    padding: 8px;
    position: relative;
    z-index: 0
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast-body {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    margin: auto 0;
    padding: 6px;
    white-space: pre-wrap
}

.Toastify__toast-body>div:last-child {
    flex: 1
}

.Toastify__toast-icon {
    display: flex;
    flex-shrink: 0;
    margin-inline-end: 10px;
    width: 20px
}

.Toastify--animate {
    animation-duration: .7s;
    animation-fill-mode: both
}

.Toastify--animate-icon {
    animation-duration: .3s;
    animation-fill-mode: both
}

@media only screen and (max-width:480px) {
    .Toastify__toast {
        border-radius: 0;
        margin-bottom: 0
    }
}

.Toastify__toast-theme--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--colored.Toastify__toast--default,
.Toastify__toast-theme--light {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    background: var(--toastify-color-info);
    color: var(--toastify-text-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    background: var(--toastify-color-success);
    color: var(--toastify-text-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    background: var(--toastify-color-warning);
    color: var(--toastify-text-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    background: var(--toastify-color-error);
    color: var(--toastify-text-color-error)
}

.Toastify__progress-bar-theme--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
    background: var(--toastify-color-progress-colored)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    align-self: flex-start;
    background: #0000;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: .7;
    outline: none;
    padding: 0;
    transition: .3s ease
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentcolor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:focus,
.Toastify__close-button:hover {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    bottom: 0;
    height: 5px;
    left: 0;
    opacity: .7;
    position: absolute;
    transform-origin: left;
    width: 100%;
    z-index: var(--toastify-z-index)
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    left: auto;
    right: 0;
    transform-origin: right
}

.Toastify__spinner {
    animation: Toastify__spin .65s linear infinite;
    border: 2px solid;
    border-color: var(--toastify-spinner-color-empty-area);
    border-radius: 100%;
    border-right-color: var(--toastify-spinner-color);
    box-sizing: border-box;
    height: 20px;
    width: 20px
}

@keyframes Toastify__bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        transform: translate3d(10px, 0, 0)
    }

    90% {
        transform: translate3d(-5px, 0, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        transform: translate3d(5px, 0, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        transform: translate3d(0, 10px, 0)
    }

    90% {
        transform: translate3d(0, -5px, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes Toastify__bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        transform: translate3d(0, -10px, 0)
    }

    90% {
        transform: translate3d(0, 5px, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.Toastify__bounce-enter--bottom-left,
.Toastify__bounce-enter--top-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--bottom-right,
.Toastify__bounce-enter--top-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--bottom-left,
.Toastify__bounce-exit--top-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--bottom-right,
.Toastify__bounce-exit--top-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__none {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-duration: 0;
        animation-timing-function: none
    }

    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translateZ(0)
    }
}

.Toastify__none-enter--bottom-center,
.Toastify__none-enter--bottom-left,
.Toastify__none-enter--bottom-right,
.Toastify__none-enter--top-center,
.Toastify__none-enter--top-left,
.Toastify__none-enter--top-right {
    animation-name: Toastify__none
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }

    40% {
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateX(-20deg)
    }

    60% {
        opacity: 1;
        transform: perspective(400px) rotateX(10deg)
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: perspective(400px)
    }

    30% {
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg)
    }

    to {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(110%, 0, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-110%, 0, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0, 500px, 0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0, -500px, 0);
        visibility: hidden
    }
}

.Toastify__slide-enter--bottom-left,
.Toastify__slide-enter--top-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--bottom-right,
.Toastify__slide-enter--top-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--bottom-left,
.Toastify__slide-exit--top-left {
    animation-name: Toastify__slideOutLeft
}

.Toastify__slide-exit--bottom-right,
.Toastify__slide-exit--top-right {
    animation-name: Toastify__slideOutRight
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.player-container {
    outline: none;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9
}

.player-container.hide-cursor {
    cursor: none
}

.player-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #000
}

.player-container .preview-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer
}

.player-container .preview-container.background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0005;
    z-index: 1
}

.player-container .preview-container .background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: 0
}

.player-container .preview-container .background:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: var(--poster-url);
    background-size: cover;
    background-position: center;
    filter: blur(16px) brightness(.6);
    transform: scale(1.1);
    z-index: 0
}

.player-container .preview-container .gradient-top,
.player-container .preview-container .gradient-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 1;
    pointer-events: none
}

.player-container .preview-container .gradient-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent)
}

.player-container .preview-container .gradient-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent)
}

.player-container .preview-container .play-button {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff26;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s
}

@media (max-width: 768px) {
    .player-container .preview-container .play-button {
        width: 64px;
        height: 64px
    }
}

.player-container .preview-container .play-button:hover {
    background: #ffffff40
}

.player-container .preview-container .play-button img {
    width: 36px;
    height: 36px
}

.player-container .preview-container .preview-info {
    position: absolute;
    bottom: 32px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    z-index: 2;
    opacity: .85
}

@media (max-width: 768px) {
    .player-container .preview-container .preview-info {
        font-size: 14px;
        bottom: 8px
    }
}

.player-container .verify {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: #00000080
}

.player-container .verify .verify__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: var(--color-tertiary);
    border-radius: 16px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    width: 330px
}

.player-container .verify .verify__content .verify__title {
    font-family: Dela Gothic One;
    font-size: 20px;
    text-transform: uppercase
}

.player-container .verify .verify__content .verify__text {
    font-size: 14px;
    line-height: 24px
}

.player-container .verify .verify__content .verify__button {
    cursor: pointer;
    font-family: Dela Gothic One;
    font-size: 13px;
    text-transform: uppercase;
    padding: 12px 24px;
    background: var(--color-primary);
    color: #000;
    border-radius: 100px;
    transition: all .2s
}

.player-container .verify .verify__content .verify__button:hover {
    opacity: .8
}

.player-container .video-element {
    position: relative;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.player-container .video-element.cover {
    object-fit: cover
}

.player-container .controls {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2
}

.player-container .controls .touch-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    background: #0000
}

.player-container .controls .left {
    left: 0
}

.player-container .controls .right {
    right: 0
}

.player-container .controls .controls-up {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative
}

.player-container .controls .controls-up .controls-bar {
    display: flex;
    margin: 12px;
    width: 100%;
    height: 44px;
    justify-content: right;
    gap: 12px
}

.player-container .controls .controls-up .controls-bar.mobile {
    height: 30px;
    display: flex;
    gap: 12px
}

.player-container .controls .controls-up .controls-bar.mobile .chrome-cast {
    width: 40px;
    height: 40px
}

.player-container .controls .controls-up .controls-bar .chrome-cast {
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    align-content: center;
    text-align: center
}

.player-container .controls .controls-up .controls-bar .audio {
    width: 181px;
    height: 44px;
    border-radius: 100px;
    padding: 16px;
    gap: 8px;
    display: flex;
    justify-content: space-between;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px)
}

.player-container .controls .controls-up .controls-bar .subtitle {
    width: 161px;
    height: 44px;
    border-radius: 100px;
    padding: 16px;
    gap: 8px;
    display: flex;
    justify-content: space-between;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px)
}

.player-container .controls .controls-up .controls-bar .opacity {
    opacity: 0;
    display: none
}

.player-container .controls .controls-up .setting-button {
    position: absolute;
    left: 12px;
    top: 12px;
    cursor: pointer;
    width: 165px;
    height: 44px;
    padding: 16px;
    gap: 8px;
    display: flex;
    background: #ffffff1a;
    border-radius: 100px;
    align-items: center
}

.player-container .controls .controls-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.player-container .controls .controls-center .controls-bar {
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.player-container .controls .controls-center .controls-bar .volume {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    align-self: center
}

.player-container .controls .controls-center .controls-bar .volume svg {
    width: 22px;
    height: 22px;
    fill: #fff
}

.player-container .controls .controls-center .controls-bar .volume-percentage {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    align-self: center;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    margin-top: 80px
}

.player-container .controls .controls-center .controls-bar .loader {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, .1019607843);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.player-container .controls .controls-center .controls-bar .play {
    position: absolute;
    width: 75px;
    height: 75px;
    padding: 20px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    align-self: center;
    cursor: pointer;
    opacity: 0;
    display: none;
    transition: all .3s ease-in-out
}

.player-container .controls .controls-center .controls-bar .play.active {
    opacity: 1;
    display: grid
}

.player-container .controls .controls-center .controls-bar .play svg {
    width: 33px;
    height: 33px;
    fill: #fff
}

.player-container .controls .controls-center .controls-bar .skip {
    gap: 12px;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    align-self: center;
    opacity: 0;
    display: none;
    transition: all .3s ease-in-out
}

.player-container .controls .controls-center .controls-bar .skip img {
    width: 68px;
    height: 68px;
    padding: 18px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px)
}

.player-container .controls .controls-center .controls-bar .skip.left {
    position: relative;
    margin-right: auto
}

.player-container .controls .controls-center .controls-bar .skip.right {
    position: relative;
    margin-left: auto
}

.player-container .controls .controls-center .controls-bar .skip.active {
    opacity: 1;
    display: grid
}

.player-container .controls .controls-down {
    display: grid;
    align-items: end;
    width: 100%;
    height: 100%;
    position: relative
}

.player-container .controls .controls-down .skip_button {
    --duration: 10s;
    position: absolute;
    display: flex;
    gap: 8px;
    height: 39px;
    padding: 16px;
    margin: 12px 12px 70px;
    border-radius: 100px;
    background: #ffa9de;
    justify-self: end;
    cursor: pointer;
    z-index: 1;
    overflow: hidden
}

.player-container .controls .controls-down .skip_button.animated {
    animation: fadeOut 1s ease var(--duration) forwards
}

.player-container .controls .controls-down .skip_button.animated:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #ff6bc6;
    z-index: 0;
    animation: fillProgress var(--duration) linear forwards
}

.player-container .controls .controls-down .skip_button>span {
    gap: 8px;
    align-items: center;
    font-family: Geologica;
    font-weight: 500;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    color: #101010;
    position: relative;
    display: flex;
    z-index: 1
}

@keyframes fillProgress {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible
    }

    to {
        opacity: 0;
        visibility: hidden
    }
}

.player-container .controls .controls-down .controls-bar {
    height: 44px;
    display: flex;
    gap: 12px;
    margin: 12px
}

.player-container .controls .controls-down .controls-bar.mobile {
    display: grid;
    margin: unset;
    height: unset;
    padding: 12px
}

.player-container .controls .controls-down .controls-bar.mobile .controls-left {
    display: flex;
    justify-content: space-between
}

.player-container .controls .controls-down .controls-bar.mobile .controls-left .play-button {
    cursor: pointer;
    width: 40px;
    height: 40px
}

.player-container .controls .controls-down .controls-bar.mobile .controls-left .buttons {
    display: flex;
    gap: 12px
}

.player-container .controls .controls-down .controls-bar.mobile .controls-left .buttons .time {
    font-size: 16px
}

.player-container .controls .controls-down .controls-bar.mobile .controls-left .buttons .fullscreen {
    width: 40px;
    height: 40px;
    min-width: unset
}

.player-container .controls .controls-down .controls-bar .play-button {
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    align-content: center;
    text-align: center
}

.player-container .controls .controls-down .controls-bar .time {
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    align-self: center
}

.player-container .controls .controls-down .controls-bar .time span {
    color: #ffffff80
}

.player-container .controls .controls-down .controls-bar .volume {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    padding: 12px;
    gap: 12px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 100px;
    align-self: end;
    align-items: center;
    justify-content: center;
    justify-items: center;
    align-content: end
}

.player-container .controls .controls-down .controls-bar .volume.active {
    height: 128px
}

.player-container .controls .controls-down .controls-bar .volume .volume-slider {
    display: none;
    opacity: 0;
    position: relative;
    width: 8px;
    height: 68px;
    background: #ffffff1a;
    border-radius: 4px;
    cursor: pointer;
    align-content: end
}

.player-container .controls .controls-down .controls-bar .volume .volume-slider.active {
    margin-top: 4px;
    display: block;
    opacity: 1
}

.player-container .controls .controls-down .controls-bar .volume .volume-slider .volume-fill {
    height: 100%;
    background: #fff;
    border-radius: 100px
}

.player-container .controls .controls-down .controls-bar .volume .volume-slider .volume-tooltip {
    position: absolute;
    width: 44px;
    height: 24px;
    background: #ffffff1a;
    border-radius: 100px;
    top: -30px;
    left: -22px;
    text-align: center;
    font-size: 12px;
    line-height: 24px
}

.player-container .controls .controls-down .controls-bar .fullscreen {
    cursor: pointer;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 100px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    align-content: center;
    text-align: center;
    justify-content: center
}

.player-container .controls .controls-down .controls-bar .fullscreen .custom-dropdown__items {
    width: 131px;
    max-height: 290px
}

.player-container .controls .controls-down .controls-bar .quality {
    width: 110px;
    height: 44px;
    border-radius: 100px;
    padding: 16px;
    gap: 8px;
    display: flex;
    justify-content: space-between;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px)
}

.player-container .controls .controls-down .controls-bar .quality .custom-dropdown__items {
    width: 123px;
    transform: translate(10px)
}

.player-container .controls .controls-down .controls-bar .opacity {
    opacity: 0;
    display: none
}

.progress-bar {
    max-width: 100%;
    width: 100%;
    height: 6px;
    background: #ffffff1a;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 100px;
    position: relative;
    align-self: center;
    cursor: pointer
}

.progress-bar.mobile {
    align-self: end;
    height: 8px
}

.progress-bar .progress-buffered {
    position: absolute;
    height: 100%;
    background: #fff3;
    border-radius: 100px;
    z-index: 0
}

.progress-bar .progress-fill {
    position: relative;
    z-index: 1;
    height: 100%;
    background: #fff;
    border-radius: 100px
}

.progress-bar .progress-tooltip {
    position: absolute;
    padding: 1px 6px;
    background: #ffffff1a;
    border-radius: 100px;
    top: -30px;
    left: -22px;
    text-align: center;
    font-size: 12px;
    line-height: 24px
}

.select-episode {
    width: 100%;
    height: 500px;
    background: #ffffff0d;
    align-content: center;
    justify-items: center;
    text-align: -webkit-center;
    color: #fff;
    border-radius: 16px;
    font-family: Dela Gothic One;
    font-size: 20px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    align-self: center;
    border: 2px solid #FFFFFF
}

.header {
    width: 100%;
    max-height: 600px;
    display: flex;
    margin-bottom: -40px
}

.header.main_banner {
    margin-bottom: 0
}

@media screen and (max-width: 1100px) {
    .header {
        display: grid;
        max-height: unset;
        height: 100%
    }
}

.header.banner {
    align-content: end;
    height: 496px;
    justify-content: center
}

.header .header__banner {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center;
    top: 0;
    -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, var(--color-secondary) 25%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, var(--color-secondary) 25%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, 0) 100%)
}

.header .header__nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    width: 100%;
    position: relative;
    background-color: var(--color-quinary);
    padding: 0 32px;
    z-index: 10;
    height: 72px;
    border-bottom: 1px solid var(--color-tertiary)
}

@media screen and (max-width: 1100px) {
    .header .header__nav {
        padding: 0 16px;
        height: 68px;
        display: flex;
        justify-content: space-between
    }
}

.header .header__nav .header__nav__content {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    justify-content: right;
    padding: 0 16px;
    overflow: hidden
}

@media screen and (max-width: 1100px) {
    .header .header__nav .header__nav__content {
        width: unset;
        padding: unset
    }
}

@media screen and (max-width: 1500px) and (min-width: 1101px) {
    .header .header__nav .header__nav__content {
        overflow-x: auto;
        padding: 0 16px;
        white-space: nowrap;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .header .header__nav .header__nav__content.center {
        scrollbar-width: auto
    }

    .header .header__nav .header__nav__content::-webkit-scrollbar {
        opacity: 0;
        height: 6px
    }
}

.header .header__nav .header__nav__content.right {
    gap: 12px;
    justify-self: right
}

.header .header__nav .header__nav__content.mobile {
    width: calc(100% - 100px)
}

.header .header__nav .header__nav__content .premium {
    background: #f3b759;
    border-radius: 100px;
    width: 44px;
    height: 44px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-secondary);
    transition: all .3s ease
}

.header .header__nav .header__nav__content .premium svg {
    transition: all .3s ease
}

.header .header__nav .header__nav__content .premium svg:hover {
    transform: scale(1.2)
}

.header .header__nav .header__nav__content .search {
    padding: 12px 24px;
    gap: 8px;
    background: var(--color-seventh);
    border-radius: 100px;
    display: flex;
    width: 136px;
    height: 44px;
    color: var(--color-secondary);
    align-content: center;
    cursor: pointer
}

@media screen and (max-width: 1300px) {
    .header .header__nav .header__nav__content .search {
        padding: 12px;
        width: 100%
    }
}

@media screen and (max-width: 1300px) and (min-width: 1101px) {
    .header .header__nav .header__nav__content .search .search__input {
        display: none
    }
}

@media screen and (max-width: 1100px) {
    .header .header__nav .header__nav__content .search {
        padding: 12px 24px;
        justify-content: center
    }
}

.header .header__nav .header__nav__content .search .search__input {
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    align-self: center
}

.header .header__nav .header__nav__content .auth {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Dela Gothic One;
    padding: 12px 24px;
    background: var(--color-primary);
    border-radius: 100px;
    font-size: 13px;
    letter-spacing: -1%;
    line-height: auto;
    text-transform: uppercase;
    height: 44px
}

.header .header__nav .header__nav__content .user {
    display: flex;
    gap: 12px;
    align-items: center
}

.header .header__nav .header__nav__content .user .user__notifications {
    cursor: pointer;
    display: flex;
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 100px;
    background: var(--color-seventh)
}

.header .header__nav .header__nav__content .user .user__notifications .dot {
    position: absolute;
    margin-left: 10px
}

.header .header__nav .header__nav__content .user .user__info {
    display: flex;
    width: 172px;
    height: 44px;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 16px 6px;
    border-radius: 100px;
    background: var(--color-seventh);
    cursor: pointer
}

@media screen and (max-width: 1100px) {
    .header .header__nav .header__nav__content .user .user__info {
        width: 100%;
        gap: 8px
    }
}

.header .header__nav .header__nav__content .user .user__info svg {
    transition: all .3s ease
}

.header .header__nav .header__nav__content .user .user__info .user__info__info {
    display: flex;
    gap: 8px
}

.header .header__nav .header__nav__content .user .user__info .user__info__info .user__info__info__avatar {
    max-width: 34px;
    max-height: 34px;
    border-radius: 100px
}

.header .header__nav .header__nav__content .user .user__info .user__info__info .user__info__info__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 88px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-secondary);
    align-self: center
}

.header .header__nav .header__nav__content .user .user__info__dropdown {
    display: grid;
    width: 202px;
    border-radius: 16px;
    padding: 4px;
    background: var(--color-quaternary);
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content .user .user__info__dropdown .user__info__dropdown__item {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color .3s ease
}

.header .header__nav .header__nav__content .user .user__info__dropdown .user__info__dropdown__item:hover {
    background: var(--color-seventh)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown {
    width: 427px;
    background: var(--color-tertiary);
    border-radius: 16px;
    padding: 16px;
    gap: 16px;
    display: grid;
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__title {
    display: flex;
    justify-content: space-between
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__title .title {
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-items: center
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__title .close {
    display: flex;
    cursor: pointer;
    align-self: center
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block {
    display: grid;
    gap: 16px;
    max-height: 395px;
    overflow-y: auto
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items {
    display: grid;
    gap: 8px
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .date {
    color: var(--color-ninth)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: var(--color-quinary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__info {
    display: flex;
    gap: 12px
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__info .user__notifications__dropdown__item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 100px
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__info .user__notifications__dropdown__item__info {
    display: grid;
    gap: 4px
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__info .user__notifications__dropdown__item__info .title {
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__info .user__notifications__dropdown__item__info .description {
    color: var(--color-ninth)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__actions {
    display: flex;
    gap: 8px
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__actions .user__notifications__dropdown__item__action {
    display: flex;
    padding: 16px;
    gap: 8px;
    border-radius: 100px;
    width: 100%;
    justify-content: center;
    height: 39px;
    align-items: center;
    font-weight: 500;
    cursor: pointer
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__actions .user__notifications__dropdown__item__action.pink {
    background: var(--color-primary);
    color: var(--color-quinary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__actions .user__notifications__dropdown__item__action.pink svg {
    fill: var(--color-quinary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__actions .user__notifications__dropdown__item__action.black {
    background: var(--color-seventh);
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__block .user__notifications__dropdown__items .user__notifications__dropdown__item .user__notifications__dropdown__item__actions .user__notifications__dropdown__item__action.black svg {
    fill: var(--color-secondary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__clear {
    font-family: Geologica;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-ninth);
    cursor: pointer;
    justify-self: center
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__empty {
    display: grid;
    gap: 4px;
    justify-content: center;
    align-content: center;
    justify-items: center;
    padding: 60px 0;
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content .user .user__notifications__dropdown .user__notifications__dropdown__empty img {
    width: 32px;
    height: 32px
}

.header .header__nav .header__nav__content__item {
    display: flex;
    gap: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-ninth);
    cursor: pointer;
    padding: 24px 0;
    height: 72px;
    white-space: nowrap;
    transition: all .3s ease
}

.header .header__nav .header__nav__content__item svg {
    fill: var(--color-ninth)
}

.header .header__nav .header__nav__content__item.active {
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content__item.active svg {
    fill: var(--color-secondary)
}

.header .header__nav .header__nav__content__item:hover {
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-secondary)
}

.header .header__nav .header__nav__content__item:hover svg {
    fill: var(--color-secondary)
}

.header .header__title {
    width: 90%;
    height: auto;
    z-index: 1;
    position: relative;
    align-self: end
}

@media screen and (min-width: 2000px) {
    .header .header__title {
        width: 55%
    }
}

@media screen and (max-width: 1100px) {
    .header .header__title {
        width: calc(100% - 16px);
        padding: 0 16px
    }
}

@media screen and (max-width: 1440px) and (min-width: 1101px) {
    .header .header__title {
        width: 90%
    }
}

@media screen and (min-width: 1685px) and (max-width: 2000px) {
    .header .header__title {
        width: 73%
    }
}

@media screen and (max-width: 1100px) {
    .header .header__title {
        padding: 0 16px
    }
}

.header .header__title .header__title__description {
    gap: 24px;
    display: grid
}

.header .header__title .header__title__description .title {
    z-index: 1;
    color: var(--color-secondary);
    max-width: 40%;
    height: auto;
    font-family: Dela Gothic One;
    font-size: 60px;
    letter-spacing: -2%;
    line-height: 100%
}

@media screen and (max-width: 1100px) {
    .header .header__title .header__title__description .title {
        font-size: 30px;
        text-transform: uppercase
    }
}

.header .header__title .header__title__description .description {
    color: var(--color-secondary);
    max-width: 40%;
    height: auto;
    opacity: .5;
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 150%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

@media screen and (max-width: 1100px) {
    .header .header__title .header__title__description .description {
        max-width: 80%
    }
}

.header .header__title .header__title__description .tags {
    display: flex;
    gap: 8px;
    flex-flow: wrap
}

.header .header__title .header__title__description .tags .tag {
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    padding: 8px 16px;
    border-radius: 100px;
    background-color: #ffffff1a;
    color: var(--color-secondary);
    font-size: 14px;
    letter-spacing: -1%;
    line-height: auto;
    text-transform: uppercase;
    height: 34px;
    align-items: center
}

.header .header__title .header__title__actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    justify-content: space-between
}

.header .header__title .header__title__actions .buttons {
    display: flex;
    gap: 8px
}

.header .header__title .header__title__actions .buttons .button,
.header .header__title .header__title__actions .buttons .save {
    width: 52px;
    height: 52px;
    padding: 16px;
    border-radius: 100px;
    background-color: #ffffff0d;
    color: var(--color-secondary);
    cursor: pointer
}

.header .header__title .header__title__actions .buttons .save:hover {
    filter: brightness(1.5)
}

.header .header__title .header__title__actions .buttons .save:hover .heart {
    animation: beat .5s infinite
}

@keyframes beat {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}

.header .header__title .header__title__actions .buttons .watch {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 100px;
    background-color: var(--color-primary);
    color: var(--color-quinary);
    font-family: Dela Gothic One;
    font-size: 15px;
    height: 52px;
    letter-spacing: -1%;
    line-height: auto;
    cursor: pointer;
    text-transform: uppercase
}

.header .header-mobile {
    width: 100%;
    height: 100%;
    margin-top: 68px;
    background: var(--color-quinary);
    z-index: 10;
    position: absolute;
    display: grid;
    gap: 32px;
    flex-direction: column;
    z-index: 1001
}

.header .header-mobile.notifications {
    margin: unset;
    display: flex;
    flex-direction: column;
    padding: 24px 0 0;
    gap: 0px;
    justify-content: space-between
}

.header .header-mobile.notifications .header-mobile-wrapper {
    display: flex;
    gap: 16px;
    margin-top: unset;
    height: calc(100% - 48px)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__header {
    display: flex;
    justify-content: space-between;
    gap: 16px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__header .title {
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    align-items: center
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__header .close {
    width: 44px;
    height: 44px;
    border-radius: 100px;
    background: var(--color-seventh);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 100%;
    max-height: 100%
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__title {
    color: var(--color-ninth)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items {
    display: grid;
    gap: 8px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item {
    display: grid;
    background: var(--color-tertiary);
    border-radius: 16px;
    padding: 16px;
    gap: 12px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__info {
    display: flex;
    gap: 12px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__info .notification__avatar {
    width: 36px;
    height: 36px;
    border-radius: 100px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__info .notification__info__user {
    display: grid;
    gap: 4px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__info .notification__info__user .notification__title {
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__info .notification__info__user .notification__description {
    color: var(--color-ninth)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__actions {
    display: flex;
    gap: 8px;
    height: 39px
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__actions .notification__action {
    display: flex;
    padding: 16px;
    gap: 8px;
    border-radius: 100px;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-weight: 500
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__actions .notification__action.pink {
    background: var(--color-primary);
    color: var(--color-quinary)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__actions .notification__action.pink svg {
    fill: var(--color-quinary)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__actions .notification__action.black {
    background: var(--color-seventh);
    color: var(--color-secondary)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__block .notifications__items .notification__item .notification__actions .notification__action.black svg {
    fill: var(--color-secondary)
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__empty {
    display: grid;
    gap: 4px;
    justify-content: center;
    align-content: center;
    justify-items: center;
    padding: 60px 0;
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%
}

.header .header-mobile.notifications .header-mobile-wrapper .notifications__container .notifications__empty img {
    width: 32px;
    height: 32px
}

.header .header-mobile.notifications .notifications__footer {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-ninth);
    text-align: center;
    cursor: pointer;
    padding: 12px
}

.header .header-mobile .header-mobile-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    gap: 32px;
    padding: 0 16px
}

.header .header-mobile .header-mobile-wrapper .auth {
    cursor: pointer;
    display: flex;
    border-radius: 100px;
    background: var(--color-seventh);
    height: 44px;
    color: var(--color-secondary)
}

.header .header-mobile .header-mobile-wrapper .auth .info {
    padding: 16px 16px 16px 6px;
    display: flex;
    gap: 8px;
    align-items: center
}

.header .header-mobile .header-mobile-wrapper .auth .info .avatar {
    width: 36px;
    height: 36px;
    border-radius: 100px
}

.header .header-mobile .header-mobile-wrapper .menu {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.header .header-mobile .header-mobile-wrapper .menu .route {
    cursor: pointer;
    display: flex;
    gap: 8px;
    color: var(--color-secondary);
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    align-items: center
}

.header .header-mobile .header-mobile-wrapper .menu .route.logout {
    color: #888
}

.header .header-mobile .header-mobile-wrapper .menu .route.logout svg {
    fill: #888
}

.header .header-mobile .header-mobile-wrapper .menu .route svg {
    fill: var(--color-secondary)
}

.header .header-mobile .header-mobile-wrapper .login {
    padding: 16px 24px;
    border-radius: 100px;
    background: var(--color-primary);
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.navigation {
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: 1000;
    width: 100%;
    height: 76px
}

.navigation__menu {
    position: relative;
    width: 100%;
    background-color: var(--color-quinary);
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #292929;
    padding: 8px 16px
}

.navigation__menu-block {
    display: flex;
    gap: 12px;
    width: 100%
}

.navigation__menu-item {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-size: 10px;
    border-radius: 8px;
    z-index: 100
}

.navigation__menu-item.active svg {
    fill: var(--color-primary)
}

.navigation__menu-item svg {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    fill: #fff
}

@font-face {
    font-family: Geologica;
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url(/assets/Geologica_cyrillic-JSVfklqO.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Geologica;
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url(/assets/Geologica_latin-CNR-BNiN.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Dela Gothic One;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/Dela_Gothic_One_cyrilic-BXbWTClq.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Dela Gothic One;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/Dela_Gothic_One_latin-AgyGD05y.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

html {
    background-color: var(--color-quinary)
}

img {
    -webkit-user-drag: none;
    user-drag: none
}

::-webkit-scrollbar {
    width: 4px;
    transition: all .3s ease
}

::-webkit-scrollbar-thumb {
    background: var(--color-seventh);
    border-radius: 10px;
    transition: background .3s ease
}

::-webkit-scrollbar-thumb:hover {
    background: #555
}

:root {
    --color-primary: #FFA9DE;
    --color-secondary: #FFFFFF;
    --color-tertiary: #1E1E1E;
    --color-quaternary: #292929;
    --color-quinary: #101010;
    --color-seventh: #FFFFFF0D;
    --color-ninth: #989898;
    --color-tenth: #2E1000;
    --color-hz: #888888
}

* {
    font-family: Geologica;
    font-weight: 400;
    font-size: 15px;
    line-height: 22.5px;
    letter-spacing: -1%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-font-smoothing: subpixel-antialiased !important
}

a {
    text-decoration: none;
    color: inherit
}

body {
    display: grid;
    gap: 56px
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s ease
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0
}

.main__content__list__roasts {
    display: flex;
    gap: 8px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    z-index: 1
}

.main__content__list__roasts.library {
    display: grid;
    overflow-x: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(343px, 1fr))
}

@media (min-width: 1024px) {
    .main__content__list__roasts.library {
        grid-template-columns: repeat(3, minmax(343px, 1fr))
    }
}

@media (max-width: 1023px) {
    .main__content__list__roasts.library {
        grid-template-columns: repeat(2, minmax(343px, 1fr))
    }
}

@media (max-width: 600px) {
    .main__content__list__roasts.library {
        grid-template-columns: repeat(1, minmax(343px, 1fr))
    }
}

.main__content__list__roasts.library .main__content__list__roasts__item {
    margin: unset
}

.main__content__list__roasts.profile {
    display: grid;
    overflow-x: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(343px, 1fr))
}

.main__content__list__roasts .main__content__list__roasts__item {
    cursor: pointer;
    flex: 1 1 343px;
    scroll-snap-align: start;
    background-color: var(--color-tertiary);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    min-height: 251px;
    height: 251px;
    min-width: 343px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .3s ease
}

@media screen and (min-width: 1100px) {
    .main__content__list__roasts .main__content__list__roasts__item:hover .cards .left {
        transform: translate(-20px, -32px) rotate(-5.34deg)
    }

    .main__content__list__roasts .main__content__list__roasts__item:hover .cards .center {
        transform: translate(-50%, -32px)
    }

    .main__content__list__roasts .main__content__list__roasts__item:hover .cards .right {
        transform: translate(20px, -32px) rotate(5.34deg)
    }

    .main__content__list__roasts .main__content__list__roasts__item:hover .title {
        opacity: .2;
        filter: blur(2px)
    }

    .main__content__list__roasts .main__content__list__roasts__item:hover .tag {
        transform: translateY(-60px);
        opacity: 1
    }
}

.main__content__list__roasts .main__content__list__roasts__item .title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    margin-top: 24px;
    height: auto;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 18px;
    letter-spacing: -1%;
    line-height: auto;
    width: 100%;
    text-transform: uppercase;
    transition: opacity .3s ease, filter .3s ease
}

.main__content__list__roasts .main__content__list__roasts__item .title .name {
    font-family: Dela Gothic One
}

.main__content__list__roasts .main__content__list__roasts__item .title .description {
    display: flex;
    gap: 12px;
    font-family: Geologica;
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 20px;
    opacity: .5;
    text-transform: none;
    justify-content: center
}

.main__content__list__roasts .main__content__list__roasts__item .cards {
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute
}

.main__content__list__roasts .main__content__list__roasts__item .cards .card {
    width: 155px;
    height: 233px;
    border-radius: 16px;
    outline: 2px solid var(--color-secondary);
    position: absolute
}

.main__content__list__roasts .main__content__list__roasts__item .cards .left {
    left: calc(50% - 160px);
    top: 99px;
    transform: rotate(-5.34deg);
    transition: transform .3s ease
}

.main__content__list__roasts .main__content__list__roasts__item .cards .center {
    left: 50%;
    top: 73px;
    transform: translate(-50%);
    transition: transform .3s ease
}

.main__content__list__roasts .main__content__list__roasts__item .cards .right {
    left: calc(50% + 10px);
    top: 95px;
    transform: rotate(5.34deg);
    transition: transform .3s ease
}

.main__content__list__roasts .main__content__list__roasts__item .tag {
    border-radius: 100px;
    padding: 6px 12px;
    background: var(--color-seventh);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    margin-top: 180px;
    margin-bottom: 16px;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 12px;
    letter-spacing: -1%;
    line-height: auto;
    text-transform: uppercase;
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease
}

.main__content__list__roasts .main__content__list__roasts__item .settings {
    position: absolute;
    right: 24px;
    top: 24px
}

.main__content__list__roasts .main__content__list__roasts__item .popper {
    margin-left: -24px !important
}

.main__content__list__roasts .main__content__list__roasts__item .settings_dropdown {
    background: var(--color-quaternary);
    border-radius: 16px;
    padding: 4px;
    place-self: end
}

.main__content__list__roasts .main__content__list__roasts__item .settings_dropdown .settings_dropdown__items {
    display: grid
}

.main__content__list__roasts .main__content__list__roasts__item .settings_dropdown .settings_dropdown__items .settings_dropdown__item {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    height: 39px;
    cursor: pointer;
    transition: background-color .3s ease;
    font-weight: 500;
    color: var(--color-secondary)
}

.main__content__list__roasts .main__content__list__roasts__item .settings_dropdown .settings_dropdown__items .settings_dropdown__item:hover {
    background: var(--color-seventh)
}

.main__content__list {
    padding-left: 5px;
    position: relative;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap
}

.main__content__list.library {
    display: grid;
    overflow: hidden;
    flex-wrap: wrap;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 24px;
    justify-content: center
}

@media screen and (max-width: 1440px) {
    .main__content__list.library {
        grid-template-columns: repeat(5, 1fr)
    }
}

@media screen and (max-width: 1200px) {
    .main__content__list.library {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media screen and (max-width: 992px) {
    .main__content__list.library {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (max-width: 768px) {
    .main__content__list.library {
        grid-template-columns: repeat(2, 1fr)
    }
}

.main__content__list.library .main__content__list__item {
    height: auto
}

.main__content__list.library.empty {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 16px;
    letter-spacing: -2%;
    line-height: 100%;
    text-transform: uppercase;
    border-radius: 16px;
    padding: 50px;
    justify-items: center;
    text-align: center
}

.main__content__list .main__content__list__item {
    position: relative;
    flex: 1 1 163.5px;
    min-width: 163.5px;
    min-height: 317.66px;
    width: 100%;
    scroll-snap-align: start;
    display: grid;
    gap: 16px
}

.main__content__list .main__content__list__item .rating {
    position: absolute;
    display: flex;
    z-index: 1;
    top: 0;
    left: 0
}

.main__content__list .main__content__list__item .rating .rectangle {
    position: absolute;
    width: 67.5px;
    height: 26px;
    left: -5px;
    top: 14px
}

.main__content__list .main__content__list__item .rating .rectangle .star {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 8px;
    top: 4px;
    display: flex;
    gap: 4px;
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    color: var(--color-tenth);
    align-items: center
}

.main__content__list .main__content__list__item .rating .triangle {
    position: absolute;
    width: 5px;
    height: 5px;
    left: -5px;
    top: 40px
}

.main__content__list .main__content__list__item .poster {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-width: 162px;
    min-height: 240px;
    width: 100%;
    height: auto;
    aspect-ratio: 240/370
}

.main__content__list .main__content__list__item .poster:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #10101000, #1d1d1d);
    opacity: 0;
    transition: opacity .3s ease
}

.main__content__list .main__content__list__item .poster.active:after {
    opacity: 1
}

@media screen and (min-width: 1100px) {
    .main__content__list .main__content__list__item .poster:hover:after {
        opacity: 1
    }

    .main__content__list .main__content__list__item .poster:hover img {
        transform: scale(1.1)
    }

    .main__content__list .main__content__list__item .poster:hover .play-icon,
    .main__content__list .main__content__list__item .poster:hover .save {
        opacity: 1
    }

    .main__content__list .main__content__list__item .poster:hover .episode {
        left: -100px
    }
}

.main__content__list .main__content__list__item .poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

.main__content__list .main__content__list__item .poster .play-icon {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s;
    padding: 16px;
    border-radius: 100px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1;
    background-color: var(--color-seventh)
}

.main__content__list .main__content__list__item .poster .play-icon svg {
    transition: .3s
}

.main__content__list .main__content__list__item .poster .play-icon:hover svg {
    transform: scale(1.2)
}

.main__content__list .main__content__list__item .poster .save {
    cursor: pointer;
    position: absolute;
    display: flex;
    gap: 8px;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s;
    padding: 16px;
    border-radius: 100px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--color-secondary);
    z-index: 1;
    background-color: var(--color-seventh);
    width: calc(100% - 42px);
    height: 44px;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: .3s
}

@media screen and (min-width: 1100px) {
    .main__content__list .main__content__list__item .poster .save:hover {
        filter: brightness(1.5)
    }

    .main__content__list .main__content__list__item .poster .save:hover .heart {
        animation: beat .5s infinite
    }

    @keyframes beat {
        0% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.2)
        }

        to {
            transform: scale(1)
        }
    }
}

.main__content__list .main__content__list__item .poster .save .text {
    font-family: Dela Gothic One;
    font-size: 12px;
    letter-spacing: -2%;
    text-transform: uppercase;
    height: 16px;
    display: flex;
    align-items: center
}

.main__content__list .main__content__list__item .poster .save .heart {
    width: 20px;
    height: 20px
}

.main__content__list .main__content__list__item .poster .save .heart svg {
    fill: var(--color-secondary)
}

.main__content__list .main__content__list__item .poster .episode {
    z-index: 1;
    position: absolute;
    display: grid;
    gap: 4px;
    bottom: 24px;
    left: 24px;
    transition: left .3s ease
}

.main__content__list .main__content__list__item .poster .episode .number {
    font-family: Dela Gothic One;
    font-size: 32px;
    letter-spacing: -2%;
    line-height: 41.6px;
    color: var(--color-primary)
}

.main__content__list .main__content__list__item .poster .episode .text {
    font-family: Dela Gothic One;
    font-size: 14px;
    letter-spacing: -2%;
    line-height: 18.2px;
    color: var(--color-secondary)
}

.main__content__list .main__content__list__item .content {
    display: grid;
    gap: 10px
}

.main__content__list .main__content__list__item .content .title {
    color: var(--color-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 23px
}

.main__content__list .main__content__list__item .content .title.text_more {
    max-height: unset;
    text-wrap: auto;
    white-space: normal;
    text-overflow: clip
}

.main__content__list .main__content__list__item .content .tags {
    display: flex;
    gap: 4px;
    max-height: 28px
}

.main__content__list .main__content__list__item .content .tags .tag {
    display: flex;
    gap: 4px;
    color: var(--color-secondary);
    padding: 6px 12px;
    background-color: #ffffff0d;
    border-radius: 100px;
    font-family: Dela Gothic One;
    font-size: 12px;
    letter-spacing: -1%;
    align-self: center;
    height: 28px;
    align-items: center
}

.main__content__list_top {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr))
}

@media (max-width: 500px) {
    .main__content__list_top {
        grid-template-columns: repeat(1, minmax(350px, 1fr))
    }
}

.main__content__list_top .main__content__list_top_item {
    cursor: pointer;
    display: flex;
    gap: 16px;
    background-color: var(--color-tertiary);
    border-radius: 12px;
    height: 56px;
    padding: 8px 16px 8px 24px;
    align-items: center;
    justify-content: space-between
}

.main__content__list_top .main__content__list_top_item .user {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 70%;
    position: relative
}

.main__content__list_top .main__content__list_top_item .user .main__content__list_top_item__number {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    color: #fff
}

.main__content__list_top .main__content__list_top_item .user .main__content__list_top_item__avatar {
    position: relative;
    display: flex
}

.main__content__list_top .main__content__list_top_item .user .main__content__list_top_item__avatar .avatar {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border-width: 1px;
    border: 1px solid rgba(255, 255, 255, .1019607843)
}

.main__content__list_top .main__content__list_top_item .user .main__content__list_top_item__avatar .frame {
    position: absolute;
    width: 44px;
    height: 44px;
    top: -2px;
    left: -2px
}

.main__content__list_top .main__content__list_top_item .user .main__content__list_top_item__name {
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -1%;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    width: 70%;
    display: flex;
    gap: 10px
}

.main__content__list_top .main__content__list_top_item .level {
    gap: 10px;
    border-radius: 100px;
    padding: 4px 8px;
    font-weight: 500;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: -1%;
    background: #ffffff0d;
    color: #fff
}

.main__content__list_top .main__content__list_top_item.top_1 {
    background: linear-gradient(90deg, #f6bf521a, #f6bf5200), linear-gradient(0deg, #1e1e1e, #1e1e1e)
}

.main__content__list_top .main__content__list_top_item.top_1 .main__content__list_top_item__number {
    color: #f6bf52
}

.main__content__list_top .main__content__list_top_item.top_2 {
    background: linear-gradient(90deg, #ffffff1a, #fff0), linear-gradient(0deg, #1e1e1e, #1e1e1e)
}

.main__content__list_top .main__content__list_top_item.top_2 .main__content__list_top_item__number {
    color: #efefef
}

.main__content__list_top .main__content__list_top_item.top_3 {
    background: linear-gradient(90deg, #e0a1871a, #e0a18700), linear-gradient(0deg, #1e1e1e, #1e1e1e)
}

.main__content__list_top .main__content__list_top_item.top_3 .main__content__list_top_item__number {
    color: #e0a187
}

.comments_container {
    padding-top: 40px;
    display: grid;
    gap: 24px
}

.comments_container .title {
    display: flex;
    gap: 16px;
    font-family: Dela Gothic One;
    font-size: 24px;
    letter-spacing: -2%;
    line-height: 100%;
    color: var(--color-secondary);
    text-transform: uppercase;
    align-items: center
}

.comments_container .new_comment {
    display: grid;
    gap: 16px;
    width: 100%
}

.comments_container .new_comment .comment {
    display: grid;
    gap: 16px;
    width: 100%;
    min-height: 120px;
    border-radius: 16px;
    padding: 12px 24px 16px 16px;
    background: var(--color-seventh)
}

.comments_container .new_comment .comment .write {
    display: flex;
    width: 100%;
    gap: 8px
}

.comments_container .new_comment .comment .write textarea {
    width: 100%;
    height: auto;
    background: none;
    border: none;
    color: var(--color-secondary);
    font-size: 15px;
    resize: none
}

.comments_container .new_comment .comment .write textarea:focus {
    outline: none
}

.comments_container .new_comment .comment .spoiler {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    width: 126px;
    cursor: pointer
}

.comments_container .new_comment .send {
    border-radius: 100px;
    padding: 16px 24px;
    height: 44px;
    background: var(--color-primary);
    font-family: Dela Gothic One;
    font-size: 13px;
    text-transform: uppercase;
    width: 153px;
    display: flex;
    align-items: center;
    cursor: pointer
}

.comments_container .comments {
    display: grid;
    gap: 24px
}

.comments_container .comments.empty {
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 16px;
    letter-spacing: -2%;
    line-height: 100%;
    text-transform: uppercase;
    border-radius: 16px;
    padding: 50px;
    justify-items: center;
    text-align: center
}

.comments_container .comments .comment {
    display: grid;
    gap: 24px
}

.comments_container .comments .comment.reply {
    margin-left: 40px;
    width: auto
}

.comments_container .comments .comment .comment__header {
    display: flex;
    gap: 16px;
    height: 50px
}

.comments_container .comments .comment .comment__header .comment__header__user {
    display: flex;
    gap: 8px
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__avatar {
    position: relative
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__avatar .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    margin-top: 3px;
    margin-left: 3px
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__avatar .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 55px
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__avatar .comment__header__user__level {
    position: absolute;
    margin-top: -20%;
    left: 50%;
    transform: translate(-50%, -20%);
    font-size: 12px;
    font-family: Dela Gothic One;
    letter-spacing: -2%;
    line-height: 18.2px;
    background: var(--color-tertiary);
    color: var(--color-secondary);
    gap: 10px;
    padding: 4px 8px;
    border-radius: 100px
}

@media screen and (max-width: 1100px) {
    .comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__avatar .comment__header__user__level {
        bottom: 0;
        margin-top: unset;
        left: 50%;
        transform: translate(-50%, 30%)
    }
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-secondary);
    height: 47px;
    align-self: center;
    justify-content: center
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__name .comment__header__user__name__title {
    display: flex;
    gap: 8px;
    color: var(--color-secondary);
    align-items: center
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__name .comment__header__user__name__title .tags {
    height: 22px;
    display: flex;
    gap: 8px;
    align-items: center
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__name .comment__header__user__name__title .tags .tag {
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--color-tertiary);
    color: var(--color-primary);
    font-size: 12px;
    letter-spacing: -1%;
    line-height: auto
}

.comments_container .comments .comment .comment__header .comment__header__user .comment__header__user__name .comment__header__user__name__date {
    font-size: 13px;
    letter-spacing: -1%;
    line-height: 19.5px;
    color: var(--color-hz)
}

.comments_container .comments .comment .comment__header .comment__header__date {
    color: var(--color-ninth)
}

.comments_container .comments .comment .comment__text {
    overflow-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    color: var(--color-secondary)
}

.comments_container .comments .comment .comment__text .mention {
    color: var(--color-primary)
}

.comments_container .comments .comment .comment__text .spoiler {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer
}

.comments_container .comments .comment .comment__text .spoiler-text {
    color: #fff;
    background: #333;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px
}

.comments_container .comments .comment .comment__text .hidden {
    display: none
}

.comments_container .comments .comment .comment__buttons {
    display: flex;
    gap: 16px
}

.comments_container .comments .comment .comment__buttons .comment__button {
    display: flex;
    gap: 8px;
    width: 97px;
    height: 23px;
    font-weight: 500;
    color: var(--color-ninth);
    cursor: pointer
}

.global_actions {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    gap: 8px;
    flex-direction: column;
    transition: all .5s
}

.global_actions.mobile {
    bottom: 86px
}

.global_actions.chat_openned {
    margin-right: 350px
}

.global_actions .button {
    position: relative;
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 100px;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s ease;
    box-sizing: border-box
}

.global_actions .button svg {
    fill: var(--color-quinary)
}

.global_actions .button .dot svg {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--color-quinary);
    background: #f73c3c
}

.main {
    width: 90%;
    justify-self: center;
    height: auto;
    display: grid;
    gap: 40px
}

@media screen and (min-width: 2000px) {
    .main {
        width: 55%
    }
}

@media screen and (max-width: 1100px) {
    .main {
        width: calc(100% - 8px);
        padding: 0 8px 40px
    }
}

@media screen and (max-width: 1440px) and (min-width: 1101px) {
    .main {
        width: 90%
    }
}

@media screen and (min-width: 1685px) and (max-width: 2000px) {
    .main {
        width: 73%
    }
}

.main.main-banner {
    padding-top: 24px
}

.main.not-found {
    align-items: center;
    justify-content: center;
    min-height: 520px;
    gap: 24px;
    display: flex;
    flex-direction: column
}

.main.not-found .not-found-image {
    object-fit: contain;
    object-position: 65px 24px;
    width: 288px;
    height: 288px
}

.main.not-found .not-found-title {
    width: 204px;
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -2%;
    text-align: center;
    text-transform: uppercase;
    color: #fff
}

.main.not-found .not-found-button {
    padding: 16px 24px;
    background: #ffa9de;
    border-radius: 100px;
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-items: center
}

.main.library,
.main.library .main__content {
    gap: 40px
}

.main .exit {
    display: flex;
    gap: 8px;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    width: 122px;
    margin-bottom: -36px
}

.main .main__content {
    display: grid;
    gap: 32px
}

@media screen and (max-width: 1100px) {
    .main .main__content {
        gap: 24px
    }
}

.main .main__content .main__content__header {
    gap: 24px;
    justify-content: space-between;
    width: 100%;
    max-width: 100vw
}

.main .main__content .main__content__header .block {
    display: flex;
    gap: 12px;
    font-family: Dela Gothic One;
    font-size: 24px;
    letter-spacing: -2%;
    line-height: 100%;
    color: var(--color-secondary);
    text-transform: uppercase;
    height: 100%;
    align-items: center;
    align-self: end;
    flex-wrap: wrap
}

@media screen and (max-width: 768px) {
    .main .main__content .main__content__header .block {
        font-size: 20px;
        gap: 12px
    }
}

.main .main__content .main__content__header .block.nowrap {
    flex-wrap: nowrap
}

.main .main__content .main__content__header .block .text_nowrap {
    font-family: Dela Gothic One;
    font-size: 24px;
    letter-spacing: -2%;
    line-height: 100%;
    color: var(--color-secondary);
    text-transform: uppercase;
    text-wrap: nowrap
}

@media screen and (max-width: 1100px) {
    .main .main__content .main__content__header .block .custom-dropdown {
        width: 100%
    }
}

.main .main__content .main__content__header .block .reverse {
    width: 48px;
    height: 48px;
    padding: 12px 16px;
    background: var(--color-seventh);
    border-radius: 100px;
    cursor: pointer
}

.main .main__content .main__content__header .block.new_episodes {
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    flex-flow: nowrap;
    gap: 0
}

.main .main__content .main__content__header .block .date {
    transition: all .3s ease-in-out;
    cursor: pointer;
    flex: 0 0 auto;
    text-transform: none;
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 18.75px;
    padding: 12px 24px;
    border-radius: 100px;
    transition: background-color .3s ease
}

.main .main__content .main__content__header .block .date.active {
    background-color: var(--color-seventh)
}

.main .main__content .main__content__header .block .description {
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 22.5px;
    color: var(--color-ninth);
    text-transform: none;
    grid-column: span 2;
    height: 22.5px;
    display: grid;
    gap: 8px
}

.main .main__content .main__content__header .block .description .user .name {
    transition: all .3s ease-in-out
}

.main .main__content .main__content__header .block .description .user .name:hover {
    color: var(--color-secondary)
}

.main .main__content .main__content__header .block .filter {
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 22.5px;
    color: var(--color-secondary);
    text-transform: none;
    align-self: end;
    display: grid;
    gap: 8px
}

.main .main__content .main__content__header .block .filter .text {
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content .main__content__header .block .filter.trash {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--color-seventh);
    width: 52px;
    height: 52px;
    align-items: center;
    align-self: end;
    cursor: pointer
}

.main .main__content .main__content__header .block .filter .custom-dropdown.custom {
    height: 52px;
    width: 90px;
    border-radius: 12px
}

.main .main__content .main__content__header .block .search {
    width: 100%;
    height: 44px;
    border-radius: 100px;
    background: #ffffff1a;
    display: flex;
    gap: 8px;
    padding: 12px 24px 12px 16px
}

.main .main__content .main__content__header .block .search input {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    color: var(--color-secondary);
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 18.75px;
    text-transform: none
}

.main .main__content .main__content__header .block .search input::placeholder {
    color: var(--color-hz)
}

.main .main__content .main__content__header .block .search input:focus {
    outline: none
}

.main .main__content .main__content__header .button {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    padding: 12px 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    cursor: pointer;
    height: 44px;
    justify-content: center
}

.main .main__content .main__content__header.grid {
    display: grid;
    grid-template-columns: 5fr 1fr
}

@media screen and (max-width: 700px) {
    .main .main__content .main__content__header.grid {
        grid-template-columns: 1fr
    }
}

.main .main__content .main__content__header .grid {
    display: grid;
    grid-template-columns: auto 1fr
}

.main .main__content .main__content__header.more {
    margin-top: -16px;
    cursor: pointer
}

.main .main__content .main__content__header.more .block .filter .text {
    transition: all .3s ease
}

.main .main__content .main__content__header.more .block .filter .text .reversed {
    transform: rotate(180deg)
}

.main .main__content .filter_button {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-secondary);
    text-transform: none;
    border-radius: 100px;
    padding: 12px 16px;
    background: var(--color-seventh);
    margin-top: -17px
}

.main .main__content .main__content__footer {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    max-width: 100vw;
    height: 52px
}

@media screen and (max-width: 500px) {
    .main .main__content .main__content__footer {
        height: 44px
    }

    .main .main__content .main__content__footer .button {
        width: 100%
    }
}

.main .main__content .main__content__footer .button {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 100px;
    background-color: #ffffff0d;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -1%;
    line-height: auto;
    text-transform: uppercase;
    align-items: center
}

.main .main__content .back {
    display: flex
}

.main .main__content .back .button {
    display: flex;
    gap: 8px;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    align-items: center
}

.main .main__content .anime {
    display: flex;
    gap: 40px
}

@media screen and (max-width: 900px) {
    .main .main__content .anime {
        display: grid
    }
}

.main .main__content .anime .anime__actions {
    position: sticky;
    top: 20px;
    align-self: start;
    display: grid;
    gap: 12px
}

@media screen and (max-width: 900px) {
    .main .main__content .anime .anime__actions {
        position: relative;
        justify-items: center;
        text-align: center
    }
}

.main .main__content .anime .anime__actions.cooperative {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 322px;
    height: 100%;
    width: 30%
}

@media screen and (max-width: 1100px) {
    .main .main__content .anime .anime__actions.cooperative {
        min-width: unset;
        width: 100%
    }
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__title {
    width: 100%;
    display: flex;
    gap: 12px;
    font-family: Dela Gothic One;
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: -2%;
    color: var(--color-secondary);
    text-transform: uppercase;
    align-items: center
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__title {
    width: 100%;
    display: flex;
    gap: 12px;
    font-family: Dela Gothic One;
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: -2%;
    color: var(--color-secondary);
    text-transform: uppercase;
    align-items: center
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat {
    width: 100%;
    border-radius: 16px;
    background: var(--color-seventh)
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container {
    display: flex;
    gap: 16px;
    height: 527px;
    padding: 16px 16px 0;
    overflow-y: auto;
    flex-direction: column
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container .anime__actions__chat__message {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container .anime__actions__chat__message .anime__actions__chat__message__user {
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container .anime__actions__chat__message .anime__actions__chat__message__user .avatar {
    width: 28px;
    height: 28px;
    border-radius: 100px
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container .anime__actions__chat__message .anime__actions__chat__message__user .name {
    font-weight: 500;
    color: var(--color-secondary)
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container .anime__actions__chat__message .anime__actions__chat__message__user .level {
    border-radius: 100px;
    padding: 4px 8px;
    background: var(--color-quaternary);
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: -1%
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__container .anime__actions__chat__message .anime__actions__chat__message__text {
    overflow-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
    width: calc(100% - 34px);
    align-self: end;
    text-align: start;
    color: var(--color-secondary);
    border-radius: 2px 12px 12px;
    padding: 10px 12px;
    background: var(--color-quinary)
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__input__container {
    width: 100%;
    display: flex;
    gap: 16px;
    padding: 8px 9px;
    opacity: .8;
    border-top: 1px solid var(--color-quaternary);
    margin-top: 10px
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__input__container .anime__actions__chat__input {
    width: 100%;
    background: var(--color-quinary);
    border-radius: 12px;
    padding: 12px 16px;
    justify-content: space-between;
    display: flex
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__input__container .anime__actions__chat__input input {
    background: none;
    border: none;
    color: var(--color-secondary);
    text-transform: none
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__input__container .anime__actions__chat__input input::placeholder {
    color: var(--color-hz)
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__input__container .anime__actions__chat__input input:focus {
    outline: none
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action__chat .anime__actions__chat .anime__actions__chat__input__container .anime__actions__chat__input svg {
    fill: var(--color-secondary);
    cursor: pointer
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users {
    width: 100%;
    border-radius: 16px;
    display: grid;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users .anime__actions__user {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--color-seventh);
    align-items: center
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users .anime__actions__user .anime__actions__user__name {
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users .anime__actions__user .anime__actions__user__name .avatar {
    width: 36px;
    height: 36px;
    border-radius: 100px
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users .anime__actions__user .anime__actions__user__name .name {
    font-weight: 500;
    color: var(--color-secondary)
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users .anime__actions__user .anime__actions__user__name .level {
    border-radius: 100px;
    padding: 4px 8px;
    background: var(--color-quaternary);
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 12px;
    line-height: 15.6px;
    letter-spacing: -2%
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__users .action {
    cursor: pointer
}

.main .main__content .anime .anime__actions.cooperative .anime__actions__action {
    cursor: pointer;
    display: flex;
    height: 44px;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 100px;
    background: var(--color-seventh);
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    color: var(--color-secondary);
    text-transform: uppercase;
    align-items: center;
    justify-content: center
}

.main .main__content .anime .anime__actions .anime__info-poster {
    width: 280px;
    border-radius: 16px
}

.main .main__content .anime .anime__actions .anime__info-buttons {
    display: grid;
    gap: 8px
}

@media screen and (max-width: 900px) {
    .main .main__content .anime .anime__actions .anime__info-buttons {
        width: 100%
    }
}

.main .main__content .anime .anime__actions .anime__info-buttons .anime__info-buttons-item {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center
}

.main .main__content .anime .anime__actions .anime__info-buttons .anime__info-buttons-item.watch {
    padding: 16px 24px;
    border-radius: 100px;
    background: var(--color-primary);
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    cursor: pointer
}

.main .main__content .anime .anime__actions .anime__info-buttons .anime__info-buttons-item.buttons {
    display: flex;
    gap: 8px
}

.main .main__content .anime .anime__actions .anime__info-buttons .anime__info-buttons-item.buttons .hover {
    background: var(--color-tertiary);
    border-radius: 12px;
    padding: 8px 12px;
    color: var(--color-secondary)
}

.main .main__content .anime .anime__actions .anime__info-buttons .anime__info-buttons-item.buttons .button {
    display: flex;
    justify-content: center;
    height: 52px;
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    text-align: center;
    cursor: pointer
}

.main .main__content .anime .anime__info {
    display: grid;
    gap: 24px;
    width: 100%
}

.main .main__content .anime .anime__info .anime__info-title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 963px
}

.main .main__content .anime .anime__info .anime__info-title .anime__info-title-name {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 44px;
    line-height: 130%;
    letter-spacing: -2%;
    color: var(--color-secondary);
    text-transform: uppercase
}

@media screen and (max-width: 900px) {
    .main .main__content .anime .anime__info .anime__info-title .anime__info-title-name {
        font-size: 24px
    }
}

.main .main__content .anime .anime__info .anime__info-title .anime__info-title-description {
    font-size: 15px;
    color: var(--color-ninth);
    max-width: 800px;
    height: 46px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box
}

.main .main__content .anime .anime__info .anime__info-title .anime__info-title-description.deactive {
    height: auto;
    -webkit-line-clamp: unset
}

.main .main__content .anime .anime__info .anime__info-title .anime__info-title-show_more {
    font-size: 15px;
    color: var(--color-secondary);
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    height: 39px;
    width: 146px
}

.main .main__content .anime .anime__info .anime__info-title .anime__info-title-show_more img {
    transition: transform .5s ease
}

.main .main__content .anime .anime__info .anime__info-title .anime__info-title-show_more img.active {
    transform: rotate(180deg)
}

.main .main__content .anime .anime__info .anime__info-info {
    display: grid;
    gap: 12px;
    color: var(--color-secondary)
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item {
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 15px;
    gap: 16px
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item .title {
    color: var(--color-ninth);
    flex-shrink: 0
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item .rectangle {
    position: absolute;
    right: 0
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item .rectangle .star {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 8px;
    top: 4px;
    display: flex;
    gap: 4px;
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    color: var(--color-tenth);
    align-items: center
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item .info {
    text-align: right
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item .info a {
    transition: color .3s ease
}

.main .main__content .anime .anime__info .anime__info-info .anime__info-info-item .info a:hover {
    color: var(--color-primary)
}

.main .main__content .anime .anime__info .anime__info-screenshots {
    width: 100%;
    display: grid
}

.main .main__content .anime .anime__info .anime__info-screenshots .anime__info-screenshots-title {
    font-family: Dela Gothic One;
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: -2%;
    color: var(--color-secondary);
    text-transform: uppercase;
    margin-bottom: 16px;
    text-align: center
}

.main .main__content .anime .anime__info .anime__info-screenshots .anime__info-screenshots-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    width: 100%
}

.main .main__content .anime .anime__info .anime__info-screenshots .anime__info-screenshots-wrapper::-webkit-scrollbar {
    display: none
}

.main .main__content .anime .anime__info .anime__info-screenshots .anime__info-screenshots-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-quaternary);
    border-radius: 16px
}

.main .main__content .anime .anime__info .anime__info-screenshots .anime__info-screenshots-wrapper .anime__info-screenshots-item {
    flex: 0 0 auto;
    width: 300px;
    height: auto;
    border-radius: 16px;
    border: 2px solid var(--color-quaternary);
    cursor: pointer
}

.main .main__content .anime .anime__info .anime__info-screenshots .anime__info-screenshots-wrapper .anime__info-screenshots-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform .3s ease;
    border-radius: 16px
}

.main .main__content .anime .anime__info .anime__info-episodes-type-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    margin-bottom: -20px;
    margin-top: 32px
}

.main .main__content .anime .anime__info .anime__info-episodes-type-wrapper .anime__info-episodes-type {
    background: var(--color-seventh);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    border-radius: 1000px;
    display: flex;
    gap: 8px;
    height: 48px;
    padding: 4px;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory
}

.main .main__content .anime .anime__info .anime__info-episodes-type-wrapper .anime__info-episodes-type .anime__info-episodes-type-item {
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 100px;
    cursor: pointer;
    height: 40px;
    align-items: center;
    color: var(--color-hz);
    transition: background .3s ease, color .3s ease
}

.main .main__content .anime .anime__info .anime__info-episodes-type-wrapper .anime__info-episodes-type .anime__info-episodes-type-item.active {
    background: var(--color-seventh);
    color: var(--color-secondary)
}

.main .main__content .anime .anime__info .anime__info-episodes {
    color: var(--color-secondary);
    display: grid;
    gap: 24px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-title {
    font-family: Dela Gothic One;
    font-size: 32px;
    line-height: 41.6px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--color-seventh);
    border-radius: 16px;
    padding: 8px;
    justify-content: space-between;
    position: relative
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-name {
    margin-left: 10px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-edit-button {
    background: var(--color-primary);
    padding: 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-tertiary);
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    transition: all .3s ease;
    cursor: pointer
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-edit-button:hover {
    transform: scale(1.05)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-input {
    width: 100%;
    height: 44px;
    border-radius: 16px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 18.75px;
    text-transform: none;
    padding: 12px 24px 12px 16px;
    outline: 0 !important;
    border: none
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-input::placeholder {
    color: var(--color-hz)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-input:focus {
    border: 1px solid var(--color-primary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search {
    position: absolute;
    left: 0;
    top: 65px;
    background: #1c1c1c;
    width: 100%;
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--color-quaternary);
    z-index: 10;
    box-shadow: 0 4px 16px #00000040;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search::-webkit-scrollbar {
    display: none
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search::-webkit-scrollbar-thumb {
    background: var(--color-quaternary);
    border-radius: 16px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search-item {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-seventh);
    cursor: pointer;
    align-items: center;
    transition: background .3s ease
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search-item:hover {
    background: var(--color-quinary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search-item-name {
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 18.75px;
    color: var(--color-secondary);
    text-transform: none
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search-item-image {
    width: 40px;
    border-radius: 8px;
    overflow: hidden
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-anime-search-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-info {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    height: 46px;
    padding: 12px;
    border-radius: 8px;
    background: var(--color-seventh);
    cursor: pointer
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-room-info .anime__info-room-info-item {
    color: var(--color-secondary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-seasons-wrapper {
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-seasons-wrapper.has-scroll:after {
    opacity: 1;
    background: unset
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-seasons-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, .5), transparent);
    pointer-events: none
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-seasons-wrapper .anime__info-episodes-seasons {
    display: flex;
    gap: 32px;
    height: 66px;
    border-bottom: 1px solid var(--color-seventh);
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    padding-right: 50px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-seasons-wrapper .anime__info-episodes-seasons .anime__info-episodes-seasons-item {
    font-family: Dela Gothic One;
    font-size: 14px;
    letter-spacing: -2%;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 24px 0
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-seasons-wrapper .anime__info-episodes-seasons .anime__info-episodes-seasons-item.active {
    border-bottom: 1px solid var(--color-primary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection {
    display: flex;
    gap: 16px
}

@media screen and (max-width: 900px) {
    .main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection {
        display: grid
    }
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item {
    display: grid;
    gap: 8px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .dropdown {
    width: 290px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .search {
    display: flex;
    gap: 8px;
    padding: 12px 24px 12px 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    width: 290px;
    align-items: center
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .search input {
    background: none;
    border: none;
    color: var(--color-secondary);
    width: 100%
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .search input::placeholder {
    color: var(--color-hz)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .search input:focus {
    outline: none
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .search input::-webkit-outer-spin-button,
.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item .search input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-selection .anime__info-episodes-selection-item-button {
    max-width: 180px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 20px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    cursor: pointer
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    position: relative;
    scrollbar-width: auto
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes::-webkit-scrollbar {
    opacity: 0;
    height: 6px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
    padding: 4px;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item.border {
    border-radius: 16px;
    background: var(--color-tertiary);
    padding: 16px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item.border.active {
    border: 2px solid var(--color-primary);
    outline-offset: 2px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item.empty {
    font-family: Dela Gothic One;
    font-size: 22px;
    letter-spacing: -2%;
    line-height: 28.6px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--color-seventh);
    border-radius: 16px;
    aspect-ratio: 16/9
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-download {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    margin: 8px;
    background: var(--color-primary);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px 16px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-download svg {
    width: 20px;
    height: 20px;
    fill: var(--color-tertiary);
    transition: all .3s ease
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-download svg path {
    fill: var(--color-tertiary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-download svg:hover {
    transform: scale(1.2)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-viewed {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    margin: 97px 8px 8px;
    background: var(--color-primary);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 6px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-viewed svg {
    width: 20px;
    height: 20px;
    fill: var(--color-tertiary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-viewed svg path {
    fill: var(--color-tertiary)
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-image {
    width: 229px;
    height: 129px;
    object-fit: cover;
    border-radius: 20px
}

@media screen and (max-width: 900px) {
    .main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-image {
        max-width: 145px;
        max-height: 83px
    }
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-image.active {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-info {
    display: grid;
    height: 100%;
    width: 100%;
    gap: 4px;
    align-items: start
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-info-title {
    font-family: Dela Gothic One;
    font-size: 14px;
    letter-spacing: -2%;
    line-height: 18px;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-info-title .tags {
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-info-title .tags .tag {
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--color-tertiary);
    color: var(--color-primary);
    font-size: 12px;
    letter-spacing: -1%;
    line-height: auto
}

.main .main__content .anime .anime__info .anime__info-episodes .anime__info-episodes-episodes .anime__info-episodes-episodes-item-info-duration {
    font-size: 14px;
    letter-spacing: -1%;
    line-height: 21px;
    color: var(--color-ninth);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.main .main__content.profile {
    width: 100%;
    display: grid;
    gap: 32px
}

.main .main__content.profile .profile__header {
    width: 100%;
    display: grid;
    gap: 64px
}

.main .main__content.profile .profile__header .profile__header__banner {
    position: relative
}

.main .main__content.profile .profile__header .profile__header__banner .banner {
    border-radius: 16px;
    width: 100%;
    height: 191px;
    max-height: 191px;
    object-fit: cover
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__banner__pen {
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(30%, 30%);
    background: var(--color-seventh);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    gap: 8px;
    padding: 12px;
    border-radius: 100px;
    z-index: 100
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__banner__pen svg {
    transition: all .3s ease
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__banner__pen:hover svg {
    transform: scale(1.2)
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar {
    position: absolute;
    top: 70%
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar {
        width: 100%;
        text-align: center
    }
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .avatar {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    outline: 8px solid var(--color-quinary)
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .frame {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .profile__header__avatar__level {
    position: absolute;
    margin-top: -20%;
    left: 50%;
    transform: translate(-50%);
    font-family: Dela Gothic One;
    font-size: 14px;
    letter-spacing: -2%;
    line-height: 18.2px;
    background: var(--color-tertiary);
    color: var(--color-secondary);
    gap: 10px;
    padding: 4px 8px;
    border-radius: 100px
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .profile__header__avatar__level {
        bottom: 0;
        margin-top: unset;
        transform: translate(-50%, 30%)
    }
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .profile__header__avatar__pen {
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: absolute;
    margin-right: 10%;
    top: 0;
    right: 0;
    transform: translate(50%);
    background: var(--color-seventh);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    gap: 8px;
    padding: 12px;
    border-radius: 100px;
    z-index: 100
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .profile__header__avatar__pen {
        bottom: 0;
        right: calc(50% - 40px);
        margin-right: unset
    }
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .profile__header__avatar__pen svg {
    transition: all .3s ease
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__avatar .profile__header__avatar__pen:hover svg {
    transform: scale(1.2)
}

.main .main__content.profile .profile__header .profile__header__banner .profile__header__premium {
    position: absolute;
    left: 0;
    margin-left: 110px;
    height: 44px;
    background: var(--color-seventh);
    border-radius: 100px;
    padding: 16px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    color: var(--color-secondary)
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__banner .profile__header__premium {
        margin-left: 0;
        display: flex;
        justify-content: center;
        left: 50%;
        top: 10px;
        transform: translate(-50%)
    }
}

.main .main__content.profile .profile__header .profile__header__info {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    position: relative
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__info {
        flex-direction: column;
        justify-items: center;
        align-items: center
    }

    .main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__name {
        justify-self: center
    }
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user {
    display: grid;
    gap: 8px
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__name {
    display: flex;
    gap: 8px;
    max-height: 31px
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__name .name {
    font-family: Dela Gothic One;
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    overflow: hidden;
    text-overflow: ellipsis
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__name .tags {
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__name .tags .tag {
    position: relative;
    background: var(--color-tertiary);
    padding: 2px 10px;
    border-radius: 100px;
    color: var(--color-primary);
    font-weight: 500
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status {
    display: flex;
    gap: 8px;
    color: #63bd53;
    align-items: center
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status {
        justify-content: center
    }
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status.offline {
    color: var(--color-hz)
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status.offline .status {
    display: none
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status .status {
    width: 24px;
    height: 24px;
    padding: 8px;
    position: relative
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status .status div {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #63bd53;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.main .main__content.profile .profile__header .profile__header__info .profile__header__info__user .profile__header__info__user__status .status:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #63bd53;
    transform: translate(-50%, -50%);
    animation: pulse 1.5s infinite ease-out
}

.main .main__content.profile .profile__header .profile__header__info .actions {
    display: grid;
    gap: 8px
}

.main .main__content.profile .profile__header .profile__header__info .actions .title {
    text-align: center;
    font-family: Dela Gothic One;
    font-size: 16px;
    letter-spacing: -2%;
    line-height: 100%;
    color: var(--color-secondary);
    text-transform: uppercase
}

.main .main__content.profile .profile__header .profile__header__info .actions .buttons {
    display: flex;
    gap: 8px
}

.main .main__content.profile .profile__header .profile__header__info .actions .buttons .button {
    display: flex;
    gap: 8px;
    height: 44px;
    padding: 16px 24px;
    border-radius: 100px;
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 16.9px;
    text-transform: uppercase;
    align-self: end;
    cursor: pointer;
    align-items: center
}

.main .main__content.profile .profile__header .profile__header__info .actions .buttons .button.pink {
    background: var(--color-primary);
    color: #000
}

.main .main__content.profile .profile__header .profile__header__info .actions .buttons .button.pink svg {
    fill: #000
}

.main .main__content.profile .profile__header .profile__header__info .actions .buttons .button.black {
    background: var(--color-seventh);
    color: #fff
}

.main .main__content.profile .profile__header .profile__header__info .actions .buttons .button.black svg {
    fill: #fff
}

.main .main__content.profile .profile__header .profile__header__info .right_block {
    display: flex;
    gap: 24px
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__header .profile__header__info .right_block {
        flex-direction: column
    }
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress {
    display: grid;
    gap: 8px;
    width: 330px
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .levels {
    display: flex;
    gap: 8px;
    align-items: center
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .levels .level {
    padding: 4px 8px;
    gap: 10px;
    background: var(--color-tertiary);
    font-family: Dela Gothic One;
    font-size: 14px;
    line-height: 18.2px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    border-radius: 100px
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .levels .progress {
    width: 100%;
    background: var(--color-tertiary);
    border-radius: 100px;
    height: 6px
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .levels .progress .progress__bar {
    background: var(--color-primary);
    border-radius: 100px;
    height: 100%
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .info {
    display: flex;
    justify-content: space-between;
    color: var(--color-ninth)
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .info .exp_hover {
    width: 252px;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 4px;
    background: var(--color-tertiary)
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .info .exp_hover .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__header .profile__header__info .right_block .exp_progress .info .exp_hover .description {
    color: var(--color-ninth)
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin .edit {
    cursor: pointer;
    background: var(--color-seventh);
    border-radius: 100px;
    padding: 16px 24px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin .edit svg {
    transition: all .3s ease
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin .edit:hover svg {
    transform: scale(1.2)
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin .reload {
    cursor: pointer;
    background: var(--color-seventh);
    border-radius: 100px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin .reload svg {
    transition: all .5s ease
}

.main .main__content.profile .profile__header .profile__header__info .right_block .admin .reload:hover svg {
    transform: rotate(90deg)
}

.main .main__content.profile .profile__container {
    display: flex;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    overflow-x: hidden
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container {
        display: contents
    }
}

.main .main__content.profile .profile__container .profile__container__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0
}

.main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--color-seventh);
    height: 45px;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    min-width: 0
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu {
        width: 100%;
        gap: 0
    }

    .main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu .profile__container__content__menu__item {
        flex-grow: 1;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 0 8px 21px
    }
}

.main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu .profile__container__content__menu__item {
    flex-shrink: 0;
    padding: 0 0 21px;
    border-bottom: 1px solid transparent;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-ninth);
    font-family: Dela Gothic One;
    font-size: 14px;
    line-height: 18.2px;
    letter-spacing: -2%;
    text-transform: uppercase;
    cursor: pointer
}

.main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu .profile__container__content__menu__item svg {
    fill: var(--color-ninth)
}

.main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu .profile__container__content__menu__item.active {
    border-bottom: 1px solid var(--color-primary);
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__container__content .profile__container__content__menu .profile__container__content__menu__item.active svg {
    fill: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__container__content .container {
    width: 100%
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container {
    display: grid;
    gap: 32px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block {
    display: grid;
    gap: 24px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block.sessions .settings_block_content {
    gap: 16px;
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_title {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_title .settings_block_title_button {
    cursor: pointer;
    display: flex;
    gap: 8px;
    place-items: center;
    height: 39px;
    padding: 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    font-weight: 500;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_title .settings_block_title_text {
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    align-items: center
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content {
    display: grid;
    gap: 24px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs {
    display: grid;
    gap: 16px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input {
    display: grid;
    gap: 8px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input.flex {
    display: flex;
    justify-content: space-between;
    height: 52px;
    align-items: center
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_title {
    font-weight: 500;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_title.primary {
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_checkbox {
    width: 40px;
    height: 24px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_checkbox.disabled {
    background: var(--color-tertiary)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_checkbox .ball {
    width: 16px;
    height: 16px;
    border-radius: 100px;
    background: var(--color-secondary);
    transition: all .3s ease;
    transform: translate(8px)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_checkbox .ball.disabled {
    transform: translate(-8px);
    background: #3d3d3d
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .settings_block_input_num {
    width: 52px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input input {
    border: none;
    height: 52px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--color-tertiary);
    color: var(--color-secondary);
    font-weight: 500
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input input::placeholder {
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input input:focus {
    outline: none
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input input::-webkit-inner-spin-button,
.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_inputs .settings_block_input .custom-dropdown {
    width: 100%;
    height: 52px;
    border-radius: 12px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_actions {
    display: flex;
    justify-content: space-between
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_actions {
        display: grid;
        gap: 8px
    }
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_actions .settings_block_action {
    display: flex;
    gap: 8px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_actions .settings_block_action .button {
    height: 44px;
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    cursor: pointer;
    align-items: center;
    font-weight: 500
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_actions .settings_block_action .button.uppercase {
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 16.9px;
    text-transform: uppercase
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_socials {
    display: grid;
    gap: 8px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_socials .settings_block_social {
    display: flex;
    justify-content: space-between;
    padding: 8px 0
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_socials .settings_block_social .settings_block_social_title {
    align-items: center;
    display: flex;
    gap: 8px;
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_socials .settings_block_social .settings_block_social_title .linked {
    background: #63bd531a;
    padding: 2px 10px;
    border-radius: 100px;
    display: flex;
    gap: 8px;
    color: #63bd53;
    font-weight: 500
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_socials .settings_block_social .settings_block_social_button {
    height: 39px;
    display: flex;
    gap: 8px;
    padding: 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    cursor: pointer;
    align-items: center
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table {
    display: grid;
    gap: 8px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table .settings_block_table_info {
    display: grid;
    gap: 12px
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table .settings_block_table_info .settings_block_table_row {
    display: grid;
    justify-content: space-between;
    padding: 8px 0;
    grid-template-columns: minmax(190px, 1fr) minmax(160px, 1fr) minmax(170px, 1fr) minmax(180px, 1fr) minmax(120px, 1fr);
    align-items: center
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table .settings_block_table_info .settings_block_table_row {
        grid-template-columns: repeat(4, minmax(230px, 1fr)) minmax(120px, 1fr)
    }
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table .settings_block_table_info .settings_block_table_row .settings_block_table_title {
    white-space: nowrap;
    color: var(--color-hz)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table .settings_block_table_info .settings_block_table_row .settings_block_table_data {
    white-space: wrap;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__container__content .container .settings_container .settings_block .settings_block_content .settings_block_table .settings_block_table_info .settings_block_table_row .settings_block_table_button {
    height: 39px;
    display: flex;
    gap: 8px;
    padding: 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center
}

.main .main__content.profile .profile__container .profile__container__content .container .back {
    display: flex;
    gap: 24px;
    margin-bottom: 32px
}

.main .main__content.profile .profile__container .profile__container__content .container .back .text {
    font-family: Dela Gothic One;
    font-size: 24px;
    line-height: 31.2px;
    letter-spacing: -2%;
    text-align: center;
    color: var(--color-secondary);
    text-transform: uppercase;
    align-self: center
}

.main .main__content.profile .profile__container .profile__container__content .container .back .button {
    width: auto;
    border-radius: 100px;
    padding: 12px 16px;
    background: var(--color-seventh);
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    cursor: pointer;
    align-items: center
}

.main .main__content.profile .profile__container .profile__container__content .collections_empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-secondary);
    align-items: center;
    justify-content: center;
    height: 400px
}

.main .main__content.profile .profile__container .profile__container__content .collections_empty img {
    width: 50px;
    height: 50px
}

.main .main__content.profile .profile__container .profile__blocks {
    flex-shrink: 0;
    display: grid;
    gap: 24px;
    min-width: 366px;
    text-wrap: nowrap
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container .profile__blocks {
        min-width: unset
    }
}

.main .main__content.profile .profile__container .profile__blocks .profile__block {
    border-radius: 16px;
    gap: 16px;
    display: grid;
    max-width: 366px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block.border {
    border: 1px solid var(--color-tertiary);
    padding: 16px;
    max-height: 500px
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container .profile__blocks .profile__block.status {
        gap: 8px
    }

    .main .main__content.profile .profile__container .profile__blocks .profile__block.status .profile__block__title {
        font-size: 14px
    }
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__container .profile__blocks .profile__block {
        max-width: 100%
    }
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__title {
    display: flex;
    gap: 12px;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    color: var(--color-secondary);
    text-transform: uppercase;
    line-height: 130%
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__title .profile__block__title__count {
    background: var(--color-tertiary);
    padding: 2px 10px;
    gap: 10px;
    border-radius: 100px;
    color: var(--color-primary);
    font-weight: 500
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__description {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-hz);
    text-wrap: auto;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items {
    display: flex;
    gap: 16px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items.friends {
    display: grid;
    gap: 8px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item {
    max-width: 100%
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.achievement {
    width: 54px;
    height: 54px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend {
    padding: 12px 24px 12px 16px;
    background: var(--color-seventh);
    border-radius: 12px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend svg {
    transition: transform .3s ease
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__empty {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    font-family: Dela Gothic One;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: -1%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user {
    display: flex;
    gap: 16px;
    position: relative
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .avatar {
    width: 44px;
    height: 44px;
    border-radius: 100px;
    align-self: center;
    cursor: pointer;
    margin-top: 2px;
    margin-left: 2px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 49px;
    height: 49px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info {
    display: grid;
    gap: 2px;
    height: 47px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .name {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-secondary);
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow: hidden
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .name span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .name svg {
    flex-shrink: 0
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    text-overflow: ellipsis
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status.online {
    color: #63bd53
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status.online .status {
    width: 24px;
    height: 24px;
    padding: 8px;
    position: relative
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status.online .status div {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #63bd53;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status.online .status:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #63bd53;
    transform: translate(-50%, -50%);
    animation: pulse 1.5s infinite ease-out
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status.offline {
    color: var(--color-hz)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status.offline .status {
    display: none
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .profile__block__item__user .info .user__status .text {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -1%;
    overflow-x: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    text-overflow: ellipsis
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .svgs {
    display: flex;
    gap: 16px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .svgs .svg {
    cursor: pointer;
    display: flex
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__items .profile__block__item.friend .svgs .svg.link svg:hover {
    transform: rotate(90deg)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .button {
    cursor: pointer;
    display: flex;
    gap: 8px;
    height: 39px;
    border-radius: 100px;
    padding: 16px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    align-items: center;
    width: auto;
    place-self: start
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .button.center {
    place-self: center
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .button span {
    font-weight: 500
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats .profile__block__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats .profile__block__line .profile__block__primary {
    height: 24px;
    font-weight: 400;
    color: var(--color-hz)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats .profile__block__line .profile__block__other {
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats .profile__block__line .profile__block__other .color-block {
    width: 12px;
    height: 12px;
    border-radius: 4px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats .profile__block__line .profile__block__secondary {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: none;
    line-height: 130%;
    letter-spacing: -2%;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats__chart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 2px
}

.main .main__content.profile .profile__container .profile__blocks .profile__block .profile__block__stats__chart .block {
    height: 44px;
    border-radius: 8px
}

.main .main__content.profile .profile__privacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center;
    gap: 16px
}

@media screen and (max-width: 1100px) {
    .main .main__content.profile .profile__privacy {
        margin-top: 32px;
        height: auto
    }
}

.main .main__content.profile .profile__privacy .profile__privacy__icon {
    width: 64px;
    height: 64px;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__privacy .profile__privacy__title {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.main .main__content.profile .profile__privacy .profile__privacy__description {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -1%;
    text-align: center;
    color: var(--color-hz);
    max-width: 400px
}

.main__content__rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px
}

.main__content__rooms .room__item {
    display: flex;
    background: #1e1e1e;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px #00000059;
    border: 1px solid rgba(255, 255, 255, .05)
}

.main__content__rooms .room__item:hover {
    box-shadow: 0 4px 16px #00000073
}

.main__content__rooms .room__item .room__poster {
    width: 110px;
    height: 100%;
    object-fit: cover;
    background: #111;
    flex-shrink: 0
}

.main__content__rooms .room__item .room__details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    flex-grow: 1
}

.main__content__rooms .room__item .room__details .room__title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px
}

.main__content__rooms .room__item .room__details .room__meta {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 12px
}

.main__content__rooms .room__item .room__details .room__meta .room__name {
    display: block
}

.main__content__rooms .room__item .room__details .room__meta .room__author {
    display: block;
    font-size: 13px;
    color: #777;
    transition: color .2s ease
}

.main__content__rooms .room__item .room__details .room__meta .room__author:hover {
    cursor: pointer;
    color: #fff
}

.main__content__rooms .room__item .room__details .room__action {
    display: flex;
    align-items: center
}

.main__content__rooms .room__item .room__details .room__action .room__join {
    padding: 6px 14px;
    background: var(--color-primary);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease
}

.main__content__rooms .room__item .room__details .room__action .room__join:hover {
    background: #ff6b6b
}

.main__content__rooms .room__item .room__details .room__action .room__private {
    font-size: 14px;
    color: #ff6b6b;
    font-weight: 500
}

@media screen and (max-width: 700px) {
    .main__content__rooms {
        grid-template-columns: 1fr
    }

    .main__content__rooms .room__item {
        flex-direction: column
    }

    .main__content__rooms .room__item .room__poster {
        width: 100%;
        height: 180px
    }

    .main__content__rooms .room__item .room__details {
        padding: 12px 16px
    }
}

.main__content__rooms__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center
}

.main__content__rooms__empty .empty__title {
    font-size: 24px;
    color: var(--color-secondary);
    margin-bottom: 8px
}

.main__content__rooms__empty .empty__subtitle {
    font-size: 16px;
    color: var(--color-hz);
    max-width: 400px
}

.create_collection {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);
    border-radius: 100px;
    font-family: Dela Gothic One;
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 16px;
    transition: font-size .3s ease
}

.create_collection:hover {
    font-size: 17px
}

.footer {
    width: 90%;
    justify-self: center;
    display: flex;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    margin: 32px 80px 60px;
    position: relative
}

@media screen and (max-width: 1100px) {
    .footer {
        display: grid;
        width: calc(100% - 8px);
        margin: unset
    }
}

@media screen and (max-width: 1440px) and (min-width: 1101px) {
    .footer {
        width: 90%
    }
}

@media screen and (min-width: 1685px) and (max-width: 2000px) {
    .footer {
        width: 73%
    }
}

.footer .footer__left {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footer .footer__left .info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Dela Gothic One;
    font-size: 24px;
    letter-spacing: -2%;
    line-height: auto;
    color: var(--color-secondary)
}

.footer .footer__left .copyright {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-secondary);
    opacity: .5;
    width: 100%
}

.footer .footer__left .copyright.mobile {
    text-align: center
}

.footer .footer__center {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 60px
}

.footer .footer__center .block {
    display: grid;
    gap: 16px
}

.footer .footer__center .block .title {
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    color: var(--color-secondary);
    text-transform: uppercase
}

.footer .footer__center .block .item {
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    color: var(--color-secondary);
    opacity: .5
}

.footer .footer__center .block .item:hover {
    opacity: 1;
    cursor: pointer
}

.footer .footer__right {
    display: flex;
    flex-direction: column;
    color: var(--color-secondary);
    text-align: end;
    gap: 12px
}

.footer .footer__right .social_block {
    display: grid;
    gap: 12px
}

.footer .footer__right .social_block .title {
    opacity: .5;
    width: 100%
}

.footer .footer__right .social_block .socials {
    display: flex;
    gap: 8px;
    justify-self: end
}

.footer .footer__right .social_block .socials .social__item {
    height: 52px;
    border-radius: 100px;
    padding: 16px;
    background-color: #ffffff0d
}

.footer .footer__right .social_block .socials .social__item svg {
    height: 21px;
    width: 21px;
    transition: all .3s ease
}

.footer .footer__right .social_block .socials .social__item.vk:hover svg {
    fill: #5b7be5
}

.footer .footer__right .social_block .socials .social__item.boosty:hover svg {
    fill: #f15f2c
}

.footer .footer__right .social_block .socials .social__item.telegram:hover svg {
    fill: #3b82f6
}

.footer .footer__right .contact {
    display: flex;
    height: 52px;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 100px;
    background-color: #ffffff0d;
    align-self: flex-end;
    width: 224px;
    cursor: pointer
}

.footer .footer__right .contact .contact__icon {
    display: flex
}

.footer .footer__right .contact .contact__text {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-content: center;
    width: 100%
}

.footer.mobile {
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 32px
}

.footer.mobile .footer__left {
    display: flex;
    align-items: center
}

.footer.mobile .footer__center {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    text-align: center
}

.footer.mobile .footer__right {
    align-items: center;
    text-align: center
}

.footer.mobile .footer__right .contact {
    align-self: center;
    margin-bottom: 30px
}

.search_window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #0e0e0ee5;
    z-index: 9999;
    padding-top: 60px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity .3s ease
}

@media screen and (max-width: 1100px) {
    .search_window {
        padding-top: 30px
    }
}

.search_window .search_main {
    width: 100%;
    min-width: 343px;
    max-width: 624px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-self: center;
    margin: 0 auto
}

.search_window .search_main .search {
    height: 62px;
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 1000px;
    position: relative;
    background: #ffffff0d;
    align-items: center
}

.search_window .search_main .search .close {
    cursor: pointer;
    transition: .3s
}

.search_window .search_main .search .close:hover {
    filter: brightness(1.5)
}

.search_window .search_main .search input {
    width: 100%;
    background: none;
    border: none;
    color: var(--color-secondary);
    font-size: 20px;
    letter-spacing: -1%;
    line-height: 30px
}

.search_window .search_main .search input::placeholder {
    color: var(--color-hz)
}

.search_window .search_main .search input:focus {
    outline: none
}

.search_window .search_main .search:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000004d;
    filter: blur(50px);
    z-index: -1;
    border-radius: 1000px
}

.search_window .search_main .search img {
    height: 24px;
    width: 24px
}

.search_window .search_main .info {
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    color: var(--color-hz)
}

.search_window .search_main .results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    overflow-y: auto;
    max-height: 600px
}

.search_window .search_main .results .item {
    position: relative;
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    background: var(--color-seventh);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px;
    color: var(--color-secondary);
    width: 100%;
    max-width: 100%
}

.search_window .search_main .results .item.user {
    cursor: pointer;
    gap: 0;
    height: 76px;
    border-radius: 12px;
    padding: 12px 24px 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.search_window .search_main .results .item.user:hover .button {
    transform: rotate(90deg)
}

.search_window .search_main .results .item.user .banner {
    width: 52px;
    height: 52px;
    border-radius: 100px;
    margin-right: 16px
}

.search_window .search_main .results .item.user .content {
    gap: 2px;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.search_window .search_main .results .item.user .button {
    width: 20px;
    height: 20px;
    align-self: center;
    transition: transform .3s ease
}

.search_window .search_main .results .item .banner {
    width: 70px;
    border-radius: 8px
}

.search_window .search_main .results .item .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
    max-width: calc(100% - 90px)
}

.search_window .search_main .results .item .content .title {
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search_window .search_main .results .item .content .tags {
    display: flex;
    gap: 8px
}

.search_window .search_main .results .item .content .tags .tag {
    height: 28px;
    display: flex;
    gap: 4px;
    font-family: Dela Gothic One;
    font-size: 12px;
    letter-spacing: -1%;
    line-height: auto;
    padding: 6px 12px;
    border-radius: 100px;
    background-color: #ffffff1a;
    text-transform: uppercase;
    align-items: center
}

.search_window .search_main .results .item .content .description {
    display: flex;
    gap: 8px;
    font-size: 14px;
    letter-spacing: -1%;
    line-height: 21px;
    color: #63bd53;
    align-items: center
}

.search_window .search_main .results .item .content .description.offline {
    color: var(--color-hz)
}

.search_window .search_main .results .item .content .description.offline .status {
    display: none
}

.search_window .search_main .results .item .content .description .status {
    width: 24px;
    height: 24px;
    padding: 8px;
    position: relative
}

.search_window .search_main .results .item .content .description .status div {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #63bd53;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.search_window .search_main .results .item .content .description .status:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #63bd53;
    transform: translate(-50%, -50%);
    animation: pulse 1.5s infinite ease-out
}

.search_window .search_main .more {
    display: flex;
    justify-content: center
}

.search_window .search_main .more .button {
    display: flex;
    gap: 8px;
    justify-content: center;
    border-radius: 100px;
    color: var(--color-ninth);
    font-size: 16px;
    letter-spacing: -1%;
    line-height: auto;
    cursor: pointer
}

.search_window .search_main .more .button img {
    transition: transform .3s ease
}

.search_window .search_main .more .button img:hover {
    transform: rotate(90deg)
}

.search_window .search_main .no-result {
    width: 100%;
    height: 600px;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column
}

.search_window .search_main .no-result .title {
    font-size: 15px;
    color: var(--color-secondary)
}

.v-enter-active,
.v-leave-active {
    transition: opacity .5s ease
}

.v-enter-from,
.v-leave-to {
    opacity: 0
}

.custom-dropdown {
    position: relative;
    display: flex;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    color: var(--color-secondary);
    width: 250px;
    border-radius: 100px;
    background: var(--color-seventh);
    padding: 12px 16px;
    justify-content: space-between;
    text-transform: none;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.custom-dropdown.modal__content__select {
    width: 100%;
    border-radius: 12px
}

.custom-dropdown.multi {
    border-radius: 16px;
    padding: 16px 12px;
    width: auto;
    height: 52px;
    gap: 8px
}

.custom-dropdown.multi .custom-dropdown__selected {
    width: 165px;
    height: 23px
}

.custom-dropdown.multi .custom-dropdown__selected.empty {
    color: var(--color-ninth)
}

.custom-dropdown .custom-dropdown__selected {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%
}

.custom-dropdown .custom-dropdown__arrow {
    display: flex;
    align-self: center;
    width: 20px;
    height: 20px;
    transition: transform .3s ease
}

.custom-dropdown .custom-dropdown__arrow.active {
    transform: rotate(180deg)
}

.custom-dropdown .custom-dropdown__items {
    position: absolute;
    display: grid;
    width: 100%;
    max-height: 230px;
    overflow-y: auto;
    z-index: 4;
    border-radius: 16px;
    right: 0;
    top: 100%;
    margin-top: 10px;
    background-color: var(--color-quaternary);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease
}

.custom-dropdown .custom-dropdown__items.has-scroll:after {
    content: "";
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.custom-dropdown .custom-dropdown__items.center {
    width: 100%;
    justify-content: center
}

.custom-dropdown .custom-dropdown__items.right {
    justify-content: flex-end
}

.custom-dropdown .custom-dropdown__items.left {
    justify-content: flex-start
}

.custom-dropdown .custom-dropdown__items.up {
    bottom: 100%;
    top: auto;
    margin-bottom: 10px
}

.custom-dropdown .custom-dropdown__items.down {
    top: 100%;
    bottom: auto
}

.custom-dropdown .custom-dropdown__items::-webkit-scrollbar {
    width: 4px
}

.custom-dropdown .custom-dropdown__items::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--color-seventh)
}

.custom-dropdown .custom-dropdown__items::-webkit-scrollbar-track {
    background: #ffffff1a;
    border-radius: 8px
}

.custom-dropdown .custom-dropdown__items.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

.custom-dropdown .custom-dropdown__items .custom-dropdown__item {
    margin: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 16px;
    color: var(--color-ninth);
    font-size: 15px;
    letter-spacing: -1%;
    line-height: auto;
    cursor: pointer
}

.custom-dropdown .custom-dropdown__items .custom-dropdown__item .custom-dropdown__item__content {
    display: grid;
    gap: 4px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap
}

.custom-dropdown .custom-dropdown__items .custom-dropdown__item .custom-dropdown__item__content .tags {
    display: flex;
    gap: 8px
}

.custom-dropdown .custom-dropdown__items .custom-dropdown__item .custom-dropdown__item__content .tags .tag {
    height: 19px;
    display: flex;
    gap: 4px;
    font-size: 10px;
    letter-spacing: -1%;
    line-height: auto;
    padding: 4px 6px;
    border-radius: 100px;
    background-color: var(--color-primary);
    color: var(--color-tenth);
    text-transform: uppercase;
    align-items: center
}

.custom-dropdown .custom-dropdown__items .custom-dropdown__item:hover {
    background-color: var(--color-seventh)
}

.custom-dropdown .custom-dropdown__items .custom-dropdown__item.active {
    color: var(--color-secondary)
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transform: translateZ(0);
    opacity: 0;
    transition: all .3s ease;
    align-content: center;
    background: #0e0e0ee5;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none
}

.modal.auth_modal.recovery .modal__content {
    width: 446px;
    min-height: unset
}

.modal.auth_modal.mobile .modal__content {
    background: var(--color-quinary);
    flex-direction: column;
    max-width: unset;
    width: 100%;
    height: auto;
    justify-content: end
}

.modal.auth_modal.mobile .modal__content .content_preview {
    position: relative;
    height: 100%;
    display: grid;
    gap: 8px;
    align-content: center;
    overflow: hidden
}

.modal.auth_modal.mobile .modal__content .content_preview .close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #000;
    transition: .3s
}

.modal.auth_modal.mobile .modal__content .content_preview .close:hover {
    filter: brightness(1.5)
}

.modal.auth_modal.mobile .modal__content .content_preview .block {
    display: flex;
    width: fit-content;
    animation: scroll-left 200s linear infinite;
    gap: 8px
}

.modal.auth_modal.mobile .modal__content .content_preview .block.inverse {
    animation: scroll-right 200s linear infinite
}

.modal.auth_modal.mobile .modal__content .content_preview .block .track {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}

.modal.auth_modal.mobile .modal__content .content_preview .block .track .card {
    width: 95px;
    border-radius: 8px;
    flex-shrink: 0
}

.modal.auth_modal.mobile .modal__content .content_preview:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, #101010, #10101000 15%, #10101000 85%, #101010);
    pointer-events: none
}

@keyframes scroll-left {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes scroll-right {
    0% {
        transform: translate(-50%)
    }

    to {
        transform: translate(0)
    }
}

.modal.auth_modal.mobile .modal__content .content .title_block .close {
    display: none
}

.modal.auth_modal.mobile .modal__content .content .slider {
    background: var(--color-tertiary)
}

.modal.auth_modal.mobile .modal__content .content .slider:before {
    background: var(--color-quaternary)
}

.modal.auth_modal.mobile .modal__content .content .inputs_block .inputs .input {
    background: var(--color-seventh)
}

.modal.auth_modal .modal__content {
    display: flex;
    flex-direction: row;
    padding: unset;
    max-width: 649px;
    width: 649px;
    min-height: 471px;
    background: var(--color-tertiary);
    gap: 0
}

.modal.auth_modal .modal__content .auth_image {
    width: 254px;
    object-fit: cover;
    object-position: -410px;
    border-radius: 16px 0 0 16px
}

.modal.auth_modal .modal__content .content {
    width: 100%;
    display: grid;
    gap: 16px;
    padding: 24px
}

.modal.auth_modal .modal__content .content .title_block {
    display: flex;
    justify-content: space-between;
    height: 26px;
    width: 100%
}

.modal.auth_modal .modal__content .content .title_block .title {
    display: flex;
    gap: 12px;
    color: var(--color-secondary);
    text-transform: uppercase;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%
}

.modal.auth_modal .modal__content .content .title_block img {
    cursor: pointer;
    transition: .3s
}

.modal.auth_modal .modal__content .content .title_block img:hover {
    filter: brightness(1.5)
}

.modal.auth_modal .modal__content .content .title_desc {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    margin-top: -8px;
    color: var(--color-hz)
}

.modal.auth_modal .modal__content .content .slider {
    position: relative;
    height: 44px;
    background: var(--color-quinary);
    border-radius: 100px;
    padding: 4px;
    display: flex;
    width: 100%
}

.modal.auth_modal .modal__content .content .slider.login:before {
    transform: translate(0)
}

.modal.auth_modal .modal__content .content .slider:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 100px;
    background-color: var(--color-quaternary);
    transition: .3s;
    transform: translate(100%)
}

.modal.auth_modal .modal__content .content .slider .slider__item {
    z-index: 1;
    max-height: 36px;
    font-weight: 500;
    color: var(--color-secondary);
    width: 100%;
    text-align: center;
    align-items: center;
    padding: 8px 24px;
    border-radius: 100px;
    transition: all .2s ease-in-out;
    cursor: pointer
}

.modal.auth_modal .modal__content .content .inputs_block {
    display: grid;
    gap: 8px;
    text-align: end;
    color: var(--color-hz);
    text-align: right
}

.modal.auth_modal .modal__content .content .inputs_block .inputs {
    display: grid;
    gap: 8px
}

.modal.auth_modal .modal__content .content .inputs_block .inputs .input {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-radius: 100px;
    background: var(--color-quinary)
}

.modal.auth_modal .modal__content .content .inputs_block .inputs .input input {
    width: 100%;
    color: var(--color-secondary);
    background: transparent;
    border: none
}

.modal.auth_modal .modal__content .content .inputs_block .inputs .input input::placeholder {
    color: var(--color-hz)
}

.modal.auth_modal .modal__content .content .inputs_block .inputs .input input:focus {
    outline: none
}

.modal.auth_modal .modal__content .content .inputs_block span {
    cursor: pointer;
    transition: .3s
}

.modal.auth_modal .modal__content .content .inputs_block span:hover {
    filter: brightness(1.5)
}

.modal.auth_modal .modal__content .content .buttons {
    display: grid;
    gap: 8px
}

.modal.auth_modal .modal__content .content .buttons.flex {
    display: flex;
    gap: 8px;
    justify-content: space-between
}

.modal.auth_modal .modal__content .content .buttons.flex .login {
    width: 100%
}

.modal.auth_modal .modal__content .content .buttons .login {
    gap: 8px;
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-primary);
    color: #000;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer
}

.modal.auth_modal .modal__content .content .buttons .login.pink {
    background: var(--color-primary);
    color: #000
}

.modal.auth_modal .modal__content .content .buttons .login.pink svg {
    fill: #000
}

.modal.auth_modal .modal__content .content .buttons .login.black {
    background: var(--color-seventh);
    color: #fff
}

.modal.auth_modal .modal__content .content .buttons .login.black svg {
    fill: #fff
}

.modal.auth_modal .modal__content .content .buttons .again {
    gap: 8px;
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-seventh);
    text-align: center
}

.modal.auth_modal .modal__content .content .buttons .again .text {
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    opacity: .5;
    color: var(--color-secondary);
    text-transform: uppercase;
    text-align: center
}

.modal.auth_modal .modal__content .content .buttons .again .text.active {
    opacity: 0
}

.modal.auth_modal .modal__content .content .other_methods_text {
    height: 20px;
    display: flex;
    gap: 15px;
    color: var(--color-hz);
    align-items: center;
    text-align: center;
    text-transform: uppercase
}

.modal.auth_modal .modal__content .content .other_methods_text span {
    text-wrap-mode: nowrap;
    font-weight: 500;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: -1%
}

.modal.auth_modal .modal__content .content .other_methods {
    display: flex;
    gap: 8px;
    justify-content: center
}

.modal.auth_modal .modal__content .content .other_methods .method {
    cursor: pointer;
    padding: 16px;
    gap: 8px;
    border-radius: 100px;
    background: var(--color-seventh)
}

.modal.auth_modal .modal__content .content_success {
    width: 100%;
    height: auto;
    display: grid;
    gap: 24px;
    padding: 24px;
    justify-items: center
}

.modal.auth_modal .modal__content .content_success .check_block {
    width: 100%;
    justify-items: center
}

.modal.auth_modal .modal__content .content_success .check_block .check {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    background: var(--color-primary);
    text-align: center;
    align-content: center
}

.modal.auth_modal .modal__content .content_success .text {
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-align: center;
    color: var(--color-secondary);
    text-transform: uppercase;
    width: 300px
}

.modal.auth_modal .modal__content .content_success .login {
    width: 100%;
    gap: 8px;
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-primary);
    color: #000;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    text-align: center
}

.modal.custom-dropdown__items__mobile {
    align-content: end
}

.modal.custom-dropdown__items__mobile .modal__content {
    height: auto
}

.modal.active {
    opacity: 1;
    pointer-events: auto
}

@media screen and (max-width: 1100px) {
    .modal.library .modal__content {
        border-radius: unset
    }
}

.modal.captcha .content {
    max-width: 400px
}

.modal.captcha .modal__body {
    align-items: center
}

.modal.captcha .modal__content {
    width: auto;
    border-radius: 16px
}

.modal.collections .modal__content {
    max-width: 385px;
    gap: 24px
}

@media screen and (max-width: 1100px) {
    .modal.collections .modal__content {
        max-width: 100%
    }
}

.modal.collections .modal__content .modal__body {
    gap: 24px
}

.modal.collections .modal__content .modal__body .modal__radio {
    display: grid;
    gap: 24px;
    max-height: 255px;
    overflow-y: auto;
    scrollbar-width: auto
}

.modal.collections .modal__content .modal__body .modal__radio::-webkit-scrollbar {
    width: 4px
}

.modal.collections .modal__content .modal__body .modal__radio::-webkit-scrollbar-thumb {
    background: var(--color-seventh);
    border-radius: 10px
}

.modal.collections .modal__content .modal__body .modal__radio::-webkit-scrollbar-thumb:hover {
    background: #555
}

.modal.collections .modal__content .modal__body .inputs {
    position: relative;
    display: grid;
    gap: 16px
}

.modal.collections .modal__content .modal__body .inputs input {
    border: 0;
    color: var(--color-secondary);
    border-radius: 100px;
    padding: 12px 16px;
    background: var(--color-quinary);
    font-weight: 500
}

.modal.collections .modal__content .modal__body .inputs input::placeholder {
    color: var(--color-hz)
}

.modal.collections .modal__content .modal__body .inputs input:focus {
    outline: none
}

.modal.collections .modal__content .modal__body .inputs .toggle {
    display: flex;
    gap: 8px;
    color: var(--color-hz);
    font-weight: 500
}

.modal.collections .modal__content .modal__body .inputs .anime-block {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    color: var(--color-secondary);
    font-weight: 500;
    background: var(--color-quaternary);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer
}

.modal.collections .modal__content .modal__body .inputs .anime-block__anime {
    display: flex;
    gap: 8px;
    align-items: center
}

.modal.collections .modal__content .modal__body .inputs .anime-block__anime__image {
    width: 44px;
    border-radius: 8px
}

.modal.collections .modal__content .modal__body .inputs .anime-block__anime__title {
    font-size: 16px;
    letter-spacing: -1%;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.modal.collections .modal__content .modal__body .inputs .anime-block__disable {
    display: flex;
    align-items: center;
    padding: 8px
}

.modal.collections .modal__content .modal__body .buttons {
    display: grid;
    gap: 8px;
    text-align: center
}

.modal.collections .modal__content .modal__body .buttons.flex {
    width: 100%;
    display: flex
}

.modal.collections .modal__content .modal__body .buttons .save {
    min-width: 164px;
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-primary);
    font-family: Dela Gothic One;
    font-size: 13px;
    text-transform: uppercase;
    height: 52px;
    cursor: pointer;
    transition: .3s
}

.modal.collections .modal__content .modal__body .buttons .save:hover {
    filter: brightness(1.5)
}

.modal.collections .modal__content .modal__body .buttons .info {
    width: 100%;
    min-width: 164px;
    display: flex;
    gap: 8px;
    color: var(--color-secondary);
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-seventh);
    font-family: Dela Gothic One;
    font-size: 13px;
    text-transform: uppercase;
    height: 52px
}

.modal.collections .modal__content .modal__body .buttons .create {
    width: 100%;
    min-width: 164px;
    display: flex;
    gap: 8px;
    color: var(--color-secondary);
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-seventh);
    font-family: Dela Gothic One;
    font-size: 13px;
    text-transform: uppercase;
    height: 52px;
    cursor: pointer;
    justify-content: center
}

.modal.collections .modal__content .modal__body .modal__slider {
    position: relative;
    height: 44px;
    background: var(--color-quinary);
    border-radius: 100px;
    padding: 4px;
    display: flex;
    width: 100%
}

.modal.collections .modal__content .modal__body .modal__slider:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% / var(--count) - 8px + 5.5px);
    height: calc(100% - 8px);
    border-radius: 100px;
    background-color: var(--color-quaternary);
    transition: transform .3s ease;
    transform: translate(calc(var(--index) * 100%))
}

.modal.collections .modal__content .modal__body .modal__slider .slider__item {
    z-index: 1;
    flex: 1 1 auto;
    width: calc(100% / var(--count) - 8px);
    font-weight: 500;
    color: var(--color-secondary);
    text-align: center;
    align-items: center;
    padding: 8px 24px;
    border-radius: 100px;
    transition: all .2s ease-in-out;
    cursor: pointer;
    display: flex;
    justify-content: center
}

.modal.collections .modal__content .modal__body .custom-dropdown {
    width: 100%
}

.modal.modal_rating .modal__content {
    gap: 24px
}

.modal.modal_rating .modal__content .modal__body {
    display: flex;
    gap: 8px;
    flex-direction: row
}

.modal.modal_rating .modal__content .modal__body .stars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center
}

.modal.modal_rating .modal__content .modal__body .stars .star {
    cursor: pointer;
    width: 44px;
    height: 44px
}

@media screen and (max-width: 1100px) {
    .modal.modal_rating .modal__content .modal__body .stars .star {
        width: 62px;
        height: 62px
    }
}

.modal.modal_rating .modal__content .modal__body .stars .star .full-yellow {
    fill: #f4a82b !important;
    transition: fill .2s ease-in-out
}

.modal.modal_rating .modal__content .modal__body .stars .star .empty {
    fill: #ffffff0d;
    transition: fill .2s ease-in-out
}

.modal.modal_rating .modal__content .modal__body .info {
    display: flex;
    gap: 10px
}

.modal.join .modal__content {
    max-height: 482px !important
}

.modal.join .modal__content .modal_items {
    gap: 4px !important
}

.modal.friends .modal__content {
    width: 446px;
    max-height: 450px;
    gap: 24px;
    padding: 24px;
    border-radius: 16px
}

@media screen and (max-width: 1100px) {
    .modal.friends .modal__content {
        max-width: 100%;
        width: 100%
    }
}

.modal.friends .modal__content .modal_head {
    display: flex;
    justify-content: space-between
}

.modal.friends .modal__content .modal_head .title {
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.modal.friends .modal__content .modal_head .close {
    cursor: pointer;
    transition: .3s
}

.modal.friends .modal__content .modal_head .close:hover {
    filter: brightness(1.5)
}

.modal.friends .modal__content .modal_search {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 24px 12px 16px;
    border-radius: 100px;
    background: var(--color-quinary);
    height: 44px
}

.modal.friends .modal__content .modal_search input {
    width: 100%;
    color: var(--color-secondary);
    background: transparent;
    border: none;
    font-weight: 500;
    line-height: 18.75px;
    letter-spacing: -1%
}

.modal.friends .modal__content .modal_search input::placeholder {
    color: var(--color-secondary)
}

.modal.friends .modal__content .modal_search input:focus {
    outline: none
}

.modal.friends .modal__content .modal_items {
    display: grid;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: auto
}

.modal.friends .modal__content .modal_items::-webkit-scrollbar {
    width: 4px
}

.modal.friends .modal__content .modal_items .modal_item {
    display: flex;
    gap: 16px;
    padding: 12px 24px 12px 16px;
    justify-content: space-between;
    align-items: center;
    background: var(--color-seventh);
    border-radius: 12px;
    color: var(--color-secondary);
    cursor: pointer;
    margin-right: 5px
}

.modal.friends .modal__content .modal_items .modal_item.empty {
    background: unset;
    display: grid;
    gap: 4px;
    justify-content: center;
    align-items: center;
    justify-items: center;
    cursor: unset
}

.modal.friends .modal__content .modal_items .modal_item.empty:hover svg {
    transform: unset
}

.modal.friends .modal__content .modal_items .modal_item.join {
    background: var(--color-quinary)
}

.modal.friends .modal__content .modal_items .modal_item svg {
    transition: transform .3s ease
}

.modal.friends .modal__content .modal_items .modal_item .user_info2 {
    display: flex;
    gap: 16px;
    align-items: center
}

.modal.friends .modal__content .modal_items .modal_item .user_info2 .avatar {
    width: 36px;
    height: 36px;
    border-radius: 100px
}

.modal.friends .modal__content .modal_items .modal_item .user_info2 .name {
    font-weight: 500;
    color: var(--color-secondary)
}

.modal.friends .modal__content .modal_items .modal_item .user_info2 .level {
    display: flex;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 100px;
    align-items: center;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    background: var(--color-quaternary)
}

.modal.friends .modal__content .modal_items .modal_item .user_info {
    position: relative;
    display: flex;
    gap: 16px
}

.modal.friends .modal__content .modal_items .modal_item .user_info .avatar {
    width: 44px;
    height: 44px;
    border-radius: 100px;
    margin-top: 2px;
    margin-left: 2px
}

.modal.friends .modal__content .modal_items .modal_item .user_info .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 49px;
    height: 49px
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info {
    display: grid;
    gap: 2px
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .name {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-secondary);
    display: flex;
    gap: 8px;
    align-items: center
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status {
    display: flex;
    gap: 8px;
    align-items: center
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.online {
    color: #63bd53
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.online .status {
    width: 20px;
    height: 20px;
    padding: 8px;
    position: relative
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.online .status div {
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background: #63bd53;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.online .status:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #63bd53;
    transform: translate(-50%, -50%);
    animation: pulse 1.5s infinite ease-out
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.online .text {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -1%
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1
    }

    to {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0
    }
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.offline {
    color: var(--color-hz)
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.offline .status {
    display: none
}

.modal.friends .modal__content .modal_items .modal_item .user_info .info .user__status.offline .text {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -1%
}

.modal.friends .modal__content .modal_items .modal_item .svgs {
    display: flex;
    gap: 16px
}

.modal.friends .modal__content .modal_items .modal_item .svgs .svg {
    cursor: pointer;
    display: flex
}

.modal.friends .modal__content .modal_items .modal_item .svgs .svg.link svg:hover {
    transform: rotate(90deg)
}

.modal.delete_friends .modal__content {
    max-width: 446px;
    gap: 24px;
    padding: 24px;
    border-radius: 16px
}

@media screen and (max-width: 1100px) {
    .modal.delete_friends .modal__content {
        max-width: 100%
    }
}

.modal.delete_friends .modal__content .avatar {
    position: relative;
    justify-items: center;
    align-self: center;
    width: 100px;
    height: 100px
}

.modal.delete_friends .modal__content .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 100px
}

.modal.delete_friends .modal__content .avatar .level {
    position: relative;
    z-index: 10;
    margin-top: -20%;
    padding: 4px 8px;
    border-radius: 100px;
    background-color: var(--color-quaternary);
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 14px;
    line-height: 18.2px;
    letter-spacing: -2%
}

.modal.delete_friends .modal__content .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center
}

.modal.delete_friends .modal__content .text .title {
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase
}

.modal.delete_friends .modal__content .text .desc {
    color: var(--color-hz);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%
}

.modal.delete_friends .modal__content .actions {
    display: flex;
    gap: 8px;
    justify-content: center
}

.modal.delete_friends .modal__content .actions .button {
    cursor: pointer;
    display: flex;
    height: 52px;
    border-radius: 100px;
    padding: 16px 24px;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    width: 100%
}

.modal.delete_friends .modal__content .actions .button.pink {
    background: var(--color-primary);
    color: #000
}

.modal.delete_friends .modal__content .actions .button.black {
    background: var(--color-seventh);
    color: var(--color-secondary)
}

.modal.confirm .modal__content {
    max-width: 446px;
    gap: 24px;
    padding: 24px;
    border-radius: 16px
}

@media screen and (max-width: 1100px) {
    .modal.confirm .modal__content {
        max-width: 100%
    }
}

.modal.confirm .modal__content .modal__content__info {
    display: grid;
    gap: 8px;
    text-align: center
}

.modal.confirm .modal__content .modal__content__info .modal__content__info__title {
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.modal.confirm .modal__content .modal__content__info .modal__content__info__description {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    text-align: center;
    color: var(--color-hz)
}

.modal.confirm .modal__content .modal__content__actions {
    display: flex;
    gap: 8px;
    justify-content: center
}

.modal.confirm .modal__content .modal__content__actions .button {
    cursor: pointer;
    display: flex;
    height: 52px;
    border-radius: 100px;
    padding: 16px 24px;
    gap: 8px;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    width: 100%
}

.modal.confirm .modal__content .modal__content__actions .button.pink {
    background: var(--color-primary);
    color: #000
}

.modal.confirm .modal__content .modal__content__actions .button.black {
    background: var(--color-seventh);
    color: var(--color-secondary)
}

.modal.premium .modal__content {
    position: relative;
    max-width: 772px !important;
    padding: 24px;
    border-radius: 16px !important;
    gap: 16px
}

@media screen and (max-width: 1100px) {
    .modal.premium .modal__content {
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        overflow-y: auto
    }

    .modal.premium .modal__content .modal__content__blocks {
        flex-direction: column
    }
}

.modal.premium .modal__content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, #fed74959, #fed74933, #fed7491a, #fed7490d, #fed74900);
    pointer-events: none
}

@media screen and (min-width: 1100px) {
    .modal.premium .modal__content:before {
        border-radius: 16px 16px 0 0 !important
    }
}

.modal.premium .modal__content .modal__content__blocks {
    display: flex;
    gap: 16px;
    text-align: center;
    align-items: center
}

.modal.premium .modal__content .modal__content__blocks .close_mobile {
    position: absolute;
    margin-top: -8px;
    margin-right: 32px;
    display: flex;
    width: 100%;
    justify-content: end;
    z-index: 20
}

.modal.premium .modal__content .modal__content__blocks .close_mobile .icon {
    display: flex;
    background: #ffffff0d;
    border-radius: 100px;
    padding: 12px
}

.modal.premium .modal__content .modal__content__blocks .button_buy {
    position: sticky;
    bottom: 0;
    z-index: 50;
    cursor: pointer;
    display: flex;
    height: 52px;
    width: 100%;
    border-radius: 100px;
    padding: 16px 24px;
    gap: 8px;
    background: #fed749;
    box-shadow: 0 4px 150px #fed7494d;
    color: #000;
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-items: center;
    justify-content: center
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block {
    display: flex;
    flex-direction: column;
    margin-bottom: auto;
    gap: 24px;
    width: 100%
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.premium {
    position: relative;
    max-height: 117px;
    top: 5.5px
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.premium img {
    width: 134px;
    height: 134px;
    left: 110px
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info .pre_buy {
    color: #888;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 150%
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info .pre_buy a {
    color: #fed749;
    text-decoration: underline
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info .close {
    display: flex;
    width: 100%;
    justify-content: end
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info .close .icon {
    cursor: pointer;
    display: flex;
    background: #ffffff0d;
    border-radius: 100px;
    padding: 6px
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods {
    display: flex;
    gap: 8px
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item {
    cursor: pointer;
    display: flex;
    border-radius: 16px;
    padding: 16px 20px;
    justify-content: space-between;
    width: 100%;
    background: #101010;
    transition: .3s
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item.selected {
    outline: 1px solid rgb(254, 215, 73)
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item.selected .select .radio {
    background: #fed749
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item.selected .select .radio .dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background: #101010;
    top: 4px;
    left: 4px
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .info {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .info .days {
    display: flex;
    font-weight: 500;
    font-style: Medium;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    color: #f6f6f6;
    opacity: .5
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .info .price {
    display: flex;
    gap: 8px;
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -2%;
    color: var(--color-secondary);
    align-items: center
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .info .price .discount {
    display: flex;
    height: 24px;
    padding: 2px 8px;
    gap: 10px;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    background: #fed749;
    font-weight: 500;
    font-size: 13px;
    line-height: 150%;
    color: #101010
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .info .price .old_price {
    opacity: .4;
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 130%;
    letter-spacing: -2%;
    text-decoration: line-through;
    color: #f6f6f6
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .select {
    display: flex;
    align-items: center;
    justify-content: center
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list_periods .item .select .radio {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    background: #ffffff0d
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list {
    display: flex
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list .item {
    display: flex;
    gap: 12px;
    width: 100%
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list .item .icon {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffe171, #feca0c)
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info.list .item .text {
    color: var(--color-secondary);
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -1%
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info .title {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.modal.premium .modal__content .modal__content__blocks .modal__content__block .modal__content__block__info .description {
    font-family: Geologica;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -1%;
    text-align: center;
    color: #888
}

.modal .modal__content {
    position: absolute;
    bottom: 0;
    border-radius: 16px;
    justify-self: center;
    background-color: var(--color-tertiary);
    width: auto;
    max-width: 560px;
    box-shadow: 0 0 10px #00000080;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-direction: column
}

@media screen and (max-width: 1100px) {
    .modal .modal__content {
        width: 100%;
        padding: 16px;
        max-width: unset;
        border-radius: 16px 16px 0 0
    }

    .modal .modal__content.fullscreen {
        height: 100% !important
    }
}

@media screen and (min-width: 1100px) {
    .modal .modal__content {
        position: relative;
        bottom: auto
    }
}

.modal .modal__content .modal__title {
    font-family: Dela Gothic One;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: auto;
    height: 44px
}

.modal .modal__content .modal__title img {
    width: 22px;
    height: 22px
}

.modal .modal__content .modal__title.sb {
    height: auto;
    display: flex;
    justify-content: space-between
}

.modal .modal__content .modal__title.sb .title {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Dela Gothic One;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -2%
}

.modal .modal__content .modal__back {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 16px;
    padding: 14px;
    left: 16px;
    background: var(--color-seventh);
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    place-items: center;
    justify-content: center
}

.modal .modal__content .modal__close {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 16px;
    padding: 14px;
    right: 16px;
    background: var(--color-seventh);
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    place-items: center;
    justify-content: center
}

.modal .modal__content .modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 95%
}

.modal .modal__content .modal__body.rating {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    color: #f4a82b;
    font-weight: 500
}

.modal .modal__content .modal__body .custom-dropdown__items__mobile__body {
    max-height: 260px;
    overflow-y: auto
}

.modal .modal__content .modal__body .custom-dropdown__items__mobile__body .custom-dropdown__item {
    display: flex;
    justify-content: space-between;
    color: var(--color-secondary);
    border-radius: 16px;
    padding: 12px 12px 12px 0;
    align-items: center
}

.modal .modal__content .modal__body .custom-dropdown__items__mobile__body .custom-dropdown__item .custom-dropdown__item__content {
    display: grid;
    gap: 4px
}

.modal .modal__content .modal__body .custom-dropdown__items__mobile__body .custom-dropdown__item .custom-dropdown__item__content .tags {
    display: flex;
    gap: 8px
}

.modal .modal__content .modal__body .custom-dropdown__items__mobile__body .custom-dropdown__item .custom-dropdown__item__content .tags .tag {
    height: 19px;
    display: flex;
    gap: 4px;
    font-size: 10px;
    letter-spacing: -1%;
    line-height: auto;
    padding: 4px 6px;
    border-radius: 100px;
    background-color: var(--color-primary);
    color: var(--color-tenth);
    text-transform: uppercase;
    align-items: center
}

.modal .modal__content .modal__body .modal__body__item {
    display: grid;
    gap: 16px
}

.modal .modal__content .modal__body .modal__body__item.save {
    background: var(--color-primary);
    padding: 12px 24px;
    border-radius: 100px;
    justify-items: center;
    width: 100%;
    margin-top: auto;
    cursor: pointer;
    transition: .3s
}

.modal .modal__content .modal__body .modal__body__item.save:hover {
    filter: brightness(1.5)
}

.modal .modal__content .modal__body .modal__body__item.save .modal__body__item__title {
    font-family: Dela Gothic One;
    font-size: 13px;
    letter-spacing: -2%;
    line-height: 17px;
    text-transform: uppercase;
    color: #000
}

.modal .modal__content .modal__body .modal__body__item .modal__body__item__title {
    color: var(--color-secondary);
    font-weight: 500
}

.modal .modal__content .modal__body .modal__body__item .modal__body__item__year {
    display: flex;
    gap: 8px
}

.modal .modal__content .modal__body .modal__body__item .modal__body__item__year .custom-dropdown .custom-dropdown__selected {
    color: var(--color-ninth)
}

.modal .modal__content .modal__body .modal__body__item .modal__body__item__year .custom-dropdown.custom {
    height: 52px;
    width: 100%;
    border-radius: 12px
}

.modal .modal__content .modal__body .container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-height: 250px;
    overflow-y: auto
}

.modal .modal__content .modal__body .container .label {
    font-weight: 500;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.modal .modal__content .modal__body .container .input_block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-quinary);
    padding: 12px 16px;
    border-radius: 100px;
    height: 47px;
    color: var(--color-hz);
    white-space: nowrap
}

.modal .modal__content .modal__body .container .input_block input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-secondary);
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    width: 100%
}

.modal .modal__content .modal__body .container .input_block input::placeholder {
    color: var(--color-secondary)
}

.modal .modal__content .modal__body .container .input_block input:focus {
    outline: none
}

.modal .modal__content .modal__body .container .input_block input::-webkit-inner-spin-button,
.modal .modal__content .modal__body .container .input_block input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.modal .modal__content .modal__body .container .input_group {
    display: flex;
    gap: 8px;
    align-items: center
}

.modal .modal__content .modal__body .container .input_group input {
    background: var(--color-quinary);
    border: none;
    outline: none;
    color: var(--color-secondary);
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    width: 100%;
    border-radius: 100px;
    padding: 12px 16px
}

.modal .modal__content .modal__body .container .input_group input::placeholder {
    color: var(--color-hz)
}

.modal .modal__content .modal__body .container .input_group input:focus {
    outline: none
}

.modal .modal__content .modal__body .container .input_group input::-webkit-inner-spin-button,
.modal .modal__content .modal__body .container .input_group input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.modal .modal__content .modal__body .container .input_group textarea {
    background: var(--color-quinary);
    border: none;
    outline: none;
    color: var(--color-secondary);
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    width: 100%;
    border-radius: 12px;
    padding: 12px 16px;
    resize: vertical;
    min-height: 80px
}

.modal .modal__content .modal__body .container .input_group textarea::placeholder {
    color: var(--color-hz)
}

.modal .modal__content .modal__body .container .input_group textarea:focus {
    outline: none
}

.modal .modal__content .modal__body .container .label_block {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modal .modal__content .modal__body .container .label_block .label {
    display: flex;
    color: var(--color-ninth);
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%
}

.modal .modal__content .modal__body .container .label_block .label.column {
    flex-direction: column;
    align-items: start;
    gap: 2px
}

.modal .modal__content .modal__body .container .label_block .label span {
    color: var(--color-secondary)
}

.modal .modal__content .modal__body .container .content {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.modal .modal__content .modal__body .container .content.line {
    flex-direction: row
}

.modal .modal__content .modal__body .container .content .button {
    cursor: pointer;
    display: flex;
    border-radius: 100px;
    padding: 16px 24px;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    background: var(--color-seventh)
}

.modal .modal__content .modal__body .container .content .button.pink {
    background: var(--color-primary);
    color: #000
}

.modal .modal__content .modal__body .container .content .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #bdbdbd;
    border-radius: 100px;
    padding: 16px 24px;
    background: var(--color-seventh);
    word-break: break-word
}

.modal .modal__content .modal__body .container .content .info span {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.modal .modal__content .modal__body .container .content .achievements {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: auto;
    max-height: 300px;
    padding: 8px 0
}

.modal .modal__content .modal__body .container .content .achievements::-webkit-scrollbar {
    height: 4px
}

.modal .modal__content .modal__body .container .content .achievements::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 100px
}

.modal .modal__content .modal__body .container .content .achievements .achievement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.modal .modal__content .modal__body .container .content .achievements .achievement .text {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 100px
}

.modal .modal__content .modal__body .container .content .achievements .achievement .text .icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--color-quinary);
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover
}

.modal .modal__content .modal__body .container .content .achievements .achievement .text .icon img {
    width: 50px;
    height: 50px
}

.modal .modal__content .modal__body .container .content .achievements .achievement .text .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: start;
    background: transparent;
    padding: 0
}

.modal .modal__content .modal__body .container .content .achievements .achievement .text .info .title {
    font-weight: 500;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.modal .modal__content .modal__body .container .content .achievements .achievement .text .info .subtitle,
.modal .modal__content .modal__body .container .content .achievements .achievement .text .info .timing {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-hz)
}

.modal .modal__content .modal__body .container .content .achievements .achievement .actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.modal .modal__content .modal__body .container .content .achievements .achievement .actions svg {
    cursor: pointer;
    transition: transform .3s ease
}

.modal .modal__content .modal__body .container .content .achievements .achievement .actions svg:hover {
    transform: scale(1.2)
}

.modal .modal__content .modal__body .container .toggle_block {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary)
}

.modal .modal__content .modal__body .container .toggle_block .switch {
    cursor: pointer;
    width: 40px;
    height: 24px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary)
}

.modal .modal__content .modal__body .container .toggle_block .switch.disabled {
    background: var(--color-tertiary)
}

.modal .modal__content .modal__body .container .toggle_block .switch .ball {
    width: 16px;
    height: 16px;
    border-radius: 100px;
    background: var(--color-secondary);
    transition: all .3s ease;
    transform: translate(8px)
}

.modal .modal__content .modal__body .container .toggle_block .switch .ball.disabled {
    transform: translate(-8px);
    background: #3d3d3d
}

.modal .modal__content .modal__body .container .file_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 47px;
    background: var(--color-quinary);
    border-radius: 100px;
    padding: 4px 4px 4px 16px;
    gap: 16px
}

.modal .modal__content .modal__body .container .file_input input {
    display: none
}

.modal .modal__content .modal__body .container .file_input label {
    display: flex;
    font-family: Geologica;
    font-weight: 500;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-hz)
}

.modal .modal__content .modal__body .container .file_input .info {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    overflow: hidden
}

.modal .modal__content .modal__body .container .file_input .info .image {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    object-fit: cover
}

.modal .modal__content .modal__body .container .file_input .info .link {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px
}

.modal .modal__content .modal__body .container .file_input .load {
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--color-seventh);
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase
}

.modal .modal__content .modal__body .container .file_input .load.delete {
    width: 39px;
    height: 39px;
    padding: 0
}

* {
    transition: opacity .3s
}

.hidden {
    opacity: 0;
    display: none
}

.custom-toast svg {
    flex-shrink: 0
}

.Toastify__toast-container {
    width: auto !important;
    left: 50% !important;
    bottom: 1em !important;
    transform: translate(-50%) !important
}

@media screen and (max-width: 1100px) {
    .Toastify__toast-container {
        width: 100% !important;
        padding: 0 16px !important
    }
}

.Toastify__toast {
    box-shadow: 0 4px 50px #0006 !important;
    display: block !important;
    align-items: center;
    padding: 12px 16px !important;
    border-radius: 100px !important;
    font-family: Geologica !important;
    font-size: 15px !important;
    letter-spacing: -1% !important;
    line-height: 22.5px !important;
    color: #fff;
    background: var(--color-tertiary);
    min-height: 47px !important
}

.Toastify__toast-body {
    text-align: center;
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    padding: 0 !important
}

.Toastify__toast-body>div:last-child {
    flex: unset !important
}

.custom-radio {
    display: flex;
    justify-content: space-between;
    margin-right: 5px
}

.custom-radio.custom-radio--reverse {
    gap: 8px;
    justify-content: flex-start
}

.custom-radio.custom-radio--reverse label {
    margin-left: 0
}

.custom-radio .radio-label {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.custom-radio input {
    display: none
}

.custom-radio input:checked+label {
    background: var(--color-primary)
}

.custom-radio label {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: var(--color-seventh);
    border-radius: 50%;
    margin-left: 16px;
    cursor: pointer
}

.custom-radio label:after {
    content: "";
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-secondary)
}

.custom-radio input:checked+label:after {
    display: block
}

.custom-radio a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1%
}

.reklama-info {
    position: fixed;
    bottom: 16px;
    left: 16px;
    padding: 16px;
    background: var(--color-tertiary);
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #0000001a;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.reklama-info__title {
    color: var(--color-secondary);
    font-family: Dela Gothic One;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -2%;
    text-transform: uppercase;
    display: flex;
    gap: 8px;
    align-items: center
}

.reklama-info__text {
    color: var(--color-ninth);
    font-family: Geologica;
    font-size: 14px
}

.reklama-info__text a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    font-size: 14px
}

.reklama-info__actions {
    display: flex;
    gap: 8px;
    justify-content: center
}

.reklama-info__actions--button {
    cursor: pointer;
    display: flex;
    border-radius: 12px;
    padding: 8px 12px;
    gap: 8px;
    width: 100%;
    justify-content: center;
    align-items: center
}

.reklama-info__actions--button.hide {
    background: var(--color-primary);
    color: #000;
    width: 40px
}

.reklama-info__actions--button.hide svg {
    transform: scale(1.2);
    transition: transform .3s
}

.reklama-info__actions--button.hide svg:hover {
    transform: scale(1.5)
}

.reklama-info__actions--button.settings {
    background: var(--color-seventh);
    color: var(--color-secondary);
    width: 100%
}

.reklama-info__actions--button.settings span {
    transition: transform .3s
}

.reklama-info__actions--button.settings:hover span {
    transform: scale(1.1)
}

.reklama {
    max-width: 280px;
    max-height: 400px;
    width: 280px;
    height: 400px
}

.reklama.mobile {
    width: 100%;
    height: 200px;
    max-width: 100%;
    max-height: 200px
}

.chat {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background-color: var(--color-quinary);
    z-index: 1001;
    transition: all .4s;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column
}

.chat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 16px;
    box-shadow: inset 0 -1px 0 0 var(--color-tertiary)
}

.chat-title-text {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -2%;
    color: #fff
}

.chat-title .close {
    cursor: pointer;
    transition: .3s
}

.chat-title .close:hover {
    filter: brightness(1.5)
}

.chat-messages {
    height: calc(100% - 129px);
    padding: 24px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: auto;
    overscroll-behavior: contain
}

.chat-messages-message {
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative
}

.chat-messages-message .avatar {
    position: relative;
    background: var(--color-secondary);
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 100px;
    margin-bottom: auto;
    top: 1px;
    left: 1px
}

.chat-messages-message .frame {
    position: absolute;
    top: 0;
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    overflow: hidden;
    margin-bottom: auto
}

.chat-messages-message .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.chat-messages-message .message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%
}

.chat-messages-message .message .info {
    display: flex;
    justify-content: space-between
}

.chat-messages-message .message .info .text {
    font-family: Geologica;
    font-weight: 500;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-ninth);
    display: flex;
    gap: 4px;
    align-items: center
}

.chat-messages-message .message .container {
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 100%;
    border-radius: 2px 12px 12px;
    padding: 10px 12px;
    background: var(--color-tertiary);
    font-family: Geologica;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.chat-messages-message .message .container .ping {
    display: inline-block;
    background: #ffa9deb3;
    color: var(--color-tenth);
    padding: 0 4px;
    border-radius: 6px
}

.chat-messages-message .delete {
    position: absolute;
    top: 28px;
    right: 0;
    width: 24px;
    cursor: pointer;
    padding: 4px
}

.chat-messages-message .delete svg {
    transition: fill .3s;
    fill: var(--color-hz)
}

.chat-messages-message .delete svg:hover {
    fill: var(--color-secondary)
}

.chat-input {
    border-top: 1px solid var(--color-quaternary);
    padding: 16px 18px;
    display: flex;
    height: 55px;
    justify-content: space-between;
    align-items: center;
    gap: 16px
}

.chat-input input {
    width: 100%;
    font-family: Geologica;
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    border: none;
    background: var(--color-quinary);
    color: var(--color-secondary)
}

.chat-input input:focus {
    outline: none
}

.chat-input .send-button {
    display: flex;
    cursor: pointer
}

.chat.hide {
    animation: slideOutRight .4s ease-in forwards
}

.chat.hidden {
    opacity: 0;
    visibility: hidden
}

.chat.show {
    visibility: visible;
    animation: slideInRight .4s ease-out forwards
}

.chat.mobile {
    width: 100%;
    height: 100%;
    max-width: unset;
    max-height: unset;
    border-radius: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0
}

@keyframes slideOutRight {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(100%)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

.new_input {
    width: 100%;
    color: var(--color-secondary);
    border-radius: 100px;
    padding: 12px 16px;
    background: var(--color-quinary);
    font-weight: 500;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color .3s ease
}

.new_input::placeholder {
    color: var(--color-hz)
}

.new_input:focus {
    outline: none;
    border-color: var(--color-primary)
}

.document {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    margin: 0 24px;
    background: var(--color-tertiary);
    border-radius: 16px
}

.document__text {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.document h2 {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary)
}

.document h3 {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -2%;
    color: var(--color-secondary)
}

.document p {
    font-family: Geologica;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.document p ul {
    margin-bottom: 1rem;
    line-height: 1.6
}

.document strong {
    font-family: Geologica;
    font-weight: 550;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.document ul {
    padding-left: 20px;
    margin: 0;
    color: var(--color-secondary);
    padding-left: 1.2rem;
    list-style: disc
}

.document li {
    font-family: Geologica;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.spinner {
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
    border-radius: 50%
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.search_results {
    position: absolute;
    left: 0;
    bottom: 160px;
    background: #1c1c1c;
    width: 100%;
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--color-quaternary);
    z-index: 10;
    box-shadow: 0 4px 16px #00000040;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: none
}

.search_results::-webkit-scrollbar {
    display: none
}

.search_results::-webkit-scrollbar-thumb {
    background: var(--color-quaternary);
    border-radius: 16px
}

.search_results-item {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-seventh);
    cursor: pointer;
    align-items: center;
    transition: background .3s ease
}

.search_results-item:hover {
    background: var(--color-quinary)
}

.search_results-item-name {
    font-family: Geologica;
    font-size: 15px;
    letter-spacing: -1%;
    line-height: 18.75px;
    color: var(--color-secondary);
    text-transform: none
}

.search_results-item-image {
    width: 40px;
    border-radius: 8px;
    overflow: hidden
}

.search_results-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center
}

.mobile_menu {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--color-quinary);
    z-index: 1002;
    opacity: 0;
    transform: translate(-10px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease
}

.mobile_menu .content {
    padding: 52px 16px 24px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    height: 100%
}

.mobile_menu .content .title {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: var(--color-secondary);
    display: flex;
    justify-content: space-between
}

.mobile_menu .content .items {
    display: flex;
    flex-direction: column
}

.mobile_menu .content .items .item {
    display: flex;
    padding: 12px 0;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--color-secondary)
}

.mobile_menu .content .mini-footer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 24px
}

.mobile_menu .content .mini-footer .buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center
}

.mobile_menu .content .mini-footer .buttons .button {
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: -1%;
    color: gray
}

.mobile_menu .content .mini-footer .socials {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.mobile_menu .content .mini-footer .socials .social__item {
    height: 52px;
    border-radius: 100px;
    padding: 16px;
    background-color: #ffffff0d
}

.mobile_menu .content .mini-footer .socials .social__item svg {
    height: 21px;
    width: 21px;
    transition: all .3s ease
}

.mobile_menu .content .mini-footer .socials .social__item.vk:hover svg {
    fill: #5b7be5
}

.mobile_menu .content .mini-footer .socials .social__item.boosty:hover svg {
    fill: #f15f2c
}

.mobile_menu .content .mini-footer .socials .social__item.telegram:hover svg {
    fill: #3b82f6
}

.mobile_menu .content .mini-footer .contact {
    display: flex;
    height: 52px;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 100px;
    background-color: #ffffff0d;
    align-self: center;
    width: 224px;
    color: var(--color-secondary);
    cursor: pointer
}

.mobile_menu .content .mini-footer .contact .contact__icon {
    display: flex
}

.mobile_menu .content .mini-footer .contact .contact__text {
    font-family: Dela Gothic One;
    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -2%;
    text-transform: uppercase;
    align-content: center;
    width: 100%
}

.mobile_menu.menu-opened {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all
}