:root {
    --lg-dark: linear-gradient(45deg, #444253, #282734);
    --lg-button-1:linear-gradient(45deg, #E4AB71, #B44FE4, #6152E8);
    --card-color: #080808;
    --color-blue: #5865f2
}

@font-face {
    font-family: 'Proxima Nova Light Italic';
    src: url(../fonts/proxima/ProximaNova-LightIt.eot);
    src: url(../fonts/proxima/ProximaNova-LightIt.eot?#iefix) format("embedded-opentype"), url(../fonts/proxima/ProximaNova-LightIt.woff) format("woff"), url(../fonts/proxima/ProximaNova-LightIt.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Proxima Nova Regular';
    src: url(../fonts/proxima/ProximaNova-Regular.eot);
    src: url(../fonts/proxima/ProximaNova-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/proxima/ProximaNova-Regular.woff) format("woff"), url(../fonts/proxima/ProximaNova-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Proxima Nova Bold';
    src: url(../fonts/proxima/ProximaNova-Bold.eot);
    src: url(../fonts/proxima/ProximaNova-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/proxima/ProximaNova-Bold.woff) format("woff"), url(../fonts/proxima/ProximaNova-Bold.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}


@font-face {
    font-family: 'Slush';
    src: url(https://cdn.disearch.space/fonts/slush/Slush.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

* {
    font-family: 'Proxima Nova Regular';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none
}

body {
    padding: 1rem 0;
    background: #020202;
    background: url(https://cdn.disearch.space/img/backgrounds/body_bg.png)
}
.form_scroll {

overflow-y: hidden;

scrollbar-width: thin;

scrollbar-color: #4a4abb #090909;

font-size: 15px;

padding: 16px;

color: white;

min-height: 90px;

width: 100%;

background: transparent;

border: solid 2px #e9e9e930;

backdrop-filter: blur(8px);

border-radius: 8px;

outline: none;

resize: vertical;

max-height: 149px;

resize: none;
}
.mention {
    overflow: hidden;
    max-width: 150px;
    text-overflow: ellipsis;
    cursor: pointer;
    width: fit-content;
    color: var(--color-blue);
    font-weight: bold;
    font-size: 16px
}

.er_sn {
    animation: animation_error 1s
}

#rew_message\ {
    margin-top: 1rem;
    padding: 10px 25px;
    display: none;
    color: white;
    justify-content: center;
    transition: all 0.35s;
    border: solid 1px #ffffff24;
    font-size: 16px;
    border-radius: 8px;
    width: fit-content
}

button.fm-rw {
    gap: 7px;
    cursor: pointer;
    transition: all 0.35s;
    background: #e6e6e6;
    color: black;
    border: solid 1px #ffffff24;
    font-size: 16px;
    height: 42px;
    border-radius: 8px;
    width: 331.42px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-spacing: 3px
}

.ananan {
    position: relative;
    overflow: hidden
}

.ananan:after {
    content: "";
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(250 250 250 / 0%) 0%, #be3e516e 50%, rgb(250 250 250 / 0%) 100%);
    animation: animation 3s ease-in-out infinite
}

@keyframes animation {
    from {
        left: -580px
    }

    to {
        left: 450px
    }

}

textarea#form_add_review {
    background: transparent;
    outline: none;
    resize: none;
    width: 100%;
    font-size: 17px;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    min-height: 105px;
    border: none;
    
}

.rw_btn {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: 14px
}

button.pw {
    padding: 2px 21px
}

.y_b {
    display: flex;
    gap: 15px
}

button#positive {
    cursor: pointer;
    transition: all 0.35s;
    background: transparent;
    color: white;
    border: solid 1px #ffffff24;
    font-size: 16px;
    height: 42px;
    border-radius: 8px
}

button#negative, button#positive {
    border-radius: 10px 0px 0px 10px;
    cursor: pointer;
    transition: all 0.35s;
    background: transparent;
    color: white;
    border: solid 1px #ffffff24;
    font-size: 16px;
    height: 42px;
    border-radius: 8px;
    letter-spacing: 1.1px;
    word-spacing: 6px
}

span.y_rw {
    font-size: 14px
}

img.banner {
    position: relative;
    z-index: 4;
    top: 0;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 400px;
    object-fit: cover;
    max-height: 300px;
    object-position: center;
    background: linear-gradient(188deg, #b9beff, #ff88e0)
}

svg.menu line {
    stroke: aliceblue
}

.like_1 {
    display: flex;
    gap: 10px;
    align-items: center
}

.server_body {
    padding: 1rem;
    background: #080808;
    border-radius: 1.2rem;
    height: fit-content;
    display: flex;
    flex-direction: column
}

.server_banner {
    position: relative;
    z-index: 0;
    height: 325px;
    border-radius: 0.5625rem 0.5625rem 0 0;
    overflow: hidden
}

.members {
    margin-top: 4px;
    display: flex;
    gap: 10px;
    font-size: 16px;
    display: grid;
    grid-template-columns: max-content max-content max-content 1fr;
    align-items: center
}

.server_header {
    background: #080808;
    border-radius: 1.2rem;
    display: grid;
    grid-template-columns: max-content 1fr auto;
    color: #fff;
    gap: 10px;
    padding: 1rem;
    height: 100px
}

.server_block {
    margin: 0 auto;
    max-width: 1685px;
    width: 95%
}

img.server_avatar {
    border-radius: 50%;
    border: solid 8px #080808;
    width: 116px;
    height: 116px;
    position: relative;
    bottom: 72px;
    background: #2a2a2a;
    animation: animation_spin 2.95s cubic-bezier(0.13, 0.95, 0.56, 0.97)
}

.server_wrap {
    position: relative;
    bottom: 2.9rem;
    display: flex;
    flex-direction: column;
    gap: .3rem
}

h1.server_name {
    display: flex;
    gap: 5px;
    font-size: 21px;
    text-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center
}

.r_good {
    border-radius: 8px;
    border: solid 2px #46c52e4f;
    padding: 2.25px;
}

.r_bad {
    border-radius: 8px;
    border: solid 2px #ff40404f;
    padding: 2.25px;
}

.review {
    display: flex;
    border-radius: .3rem;
    gap: 1rem;
    align-items: flex-start
}

.review-content {
    color: #919191;
    font-size: 16px;
}

.name_and_members {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px
}

.review_info h1 {
    display: flex;
    align-items: center;
    gap: 5px
}



.server_buttons {
    box-shadow: -20px 17px 20px 20px #080808;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    height: 38px
}

button.style {
    font-family: 'Proxima Nova Bold';
    padding: 6px 10px;
    border-radius: 50px;
    outline: none;
    height: 38px;
    font-size: 14px;
    letter-spacing: 1.1px
}

.dropbtn {
    width: 105px;
    text-shadow: 0 0 6px #4f4f4f9e
}

button.server_connect {
    width: 185px;
    background: #1d1d21c7;
    color: white;
    border: solid 1px #ffffff24;
    text-shadow: 0 0 6px #fff8f89e
}

button.server_menu {
    font-family: 'Slush'
}

svg.members {
    fill: var(--color-blue);
    width: 18px;
    height: 18px;
    margin-top: -1px
}

.wrap_info {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Slush'
}

.th {
    display: flex;
    align-items: center;
    gap: 10px
}

.th a {
    color: var(--color-blue);
    font-weight: bold
}

p.left {
    font-family: 'Proxima Nova Bold';
    flex: 0 0 180px;
    margin-bottom: 8px;
    display: flex;
    gap: 15px;
    align-items: center;
    letter-spacing: 0.3px
}

.left svg {
    background: #232323;
    padding: 7px;
    border-radius: 6px;
    width: 32px;
    height: 32px
}

button.menu {
    background: #232323;
    color: #fff;
    outline: none;
    border: none;
    display: flex;
    padding: 4px 10px;
    align-items: center;
    border-radius: .2rem;
    gap: .5rem;
    font-size: 14px;
    font-family: 'Slush';
    text-wrap: nowrap
}

.wrap_menu {
    display: flex;
    gap: .5rem;
    overflow: auto
}

button.menu {
    background: #232323;
    color: #fff;
    outline: none;
    border: none;
    display: flex;
    padding: 4px 10px;
    align-items: center;
    border-radius: .2rem;
    gap: .5rem;
    font-size: 14px;
    font-family: 'Slush';
    text-wrap: nowrap
}

.wrap_menu {
    display: flex;
    gap: .5rem;
    overflow: auto
}

p.right {
    font-family: 'Proxima Nova Regular';
    letter-spacing: 1.3px;
    margin-top: -8px;
}

.tab-menu {
    display: flex;
    gap: .5rem;
    overflow: auto;
    padding-bottom: 15px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch
}

.tab-button {
    background: #1d1d21c7;
    color: #fff;
    display: flex;
    font-family: 'Proxima Nova Bold';
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1.1px;
    font-size: 14px;
    text-wrap: nowrap;
    padding: 12px 33px;
    gap: .8rem;
    border-radius: 23px;
    align-content: center;
    align-items: center;
}

.tab-button.active {
    background-color: #5865f238;
    color: #ffffff
}

.tab-content {
    display: none;
    color: #fff;
    font-size: 17px;
}

.tab-content.show {
    display: block
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 5px
}

.tag_server {
    background: var(--lg-dark);
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-family: 'Slush'
}

.rc_ {
    display: flex;
    background: #2c2c2c;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: .8rem;
    padding: 1rem;
    height: 190px;
    width: 219px;
    gap: 10px
}

.description {
    font-family: 'Slush';
    white-space: pre-line;
    word-wrap: break-word;
    color: #ffffffe8;
}

.servers_recomendation h1 {
    color: #fff;
    font-size: 21px;
    display: flex;
    align-items: center;
    gap: 10px
}

.recomendation_wrap {
    display: flex;
    gap: 10px;
    margin: 0 auto;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center
}

.servers_recomendation {
    position: relative;
    display: flex;
    padding: 1rem;
    background: #080808;
    border-radius: 1.2rem;
    height: fit-content;
    gap: 10px;
    max-width: 1685px;
    width: 95%;
    margin: 0 auto;
    bottom: 2.5rem;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center
}

span.rec_name {
    color: #fff;
    font-size: 17px;
    font-family: 'Proxima Nova Bold';
    transition: all .35s;
    cursor: pointer;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden !important;
    height: fit-content;
    width: -webkit-fill-available;
    margin: 0 auto;
    text-align: center
}

img.rec_avatar {
    width: 96px;
    height: 96px
}

.likes_wrap {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: fit-content;
    padding-top: 15px
}

.likes {
    display: flex;
    border-radius: .3rem;
    gap: 1rem;
    align-items: center
}

p.channel, p.time {
    color: #919191;
    font-size: 12px
}


textarea#form_add_review {
    min-height: inherit;
    background: transparent;
    color: white;
    border: none;
    width: 100%;
    outline: none;
    resize: none;
    letter-spacing: 1.1px;
    font-size: 15px;
    backdrop-filter: blur(8px);
}



.th p.mention {
    font-size: 18px !important;
    margin-top: -8px;
    padding: 0 2px;
    max-width: 100%;
    text-wrap-mode: nowrap;
}

p.user {
    max-width: 140px;
    padding: 0 2px;
}

.like_user_avatar img {
border-radius: 7px
}

.like_info h1 {
display: flex;
align-items: center;
gap: 5px
}

p.boost {
font-size: 10px;
background: var(--lg-button-1);
padding: 3px 12px;
border-radius: 2px;
font-weight: 700
}

p.official {
font-size: 10px;
background: linear-gradient(45deg, #7178e4, #677dac, #52b1e8);
padding: 3px 12px;
border-radius: 2px;
font-weight: 700
}

.zn_wrap {
display: flex;
gap: 6px
}

.form_rw {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px
}



.apexcharts-toolbar {
display: none
}

.apexcharts-tooltip.apexcharts-theme-light {
background: #131313 !important
}

.apexcharts-tooltip-title {
background: #131313 !important
}

.apexcharts-text tspan {
font-family: var(--fontGraph);
color: red
}

.apexcharts-toolbar {
display: none !important
}

h2.tab-title {
display: flex;
align-items: center;
gap: 10px
}

img.dot {
width: 32px;
height: 32px;
filter: hue-rotate(77deg) drop-shadow(0px 0px 4px green)
}

line {
stroke: #0e0e0e40
}

.apexcharts-tooltip.apexcharts-theme-light {
background: #131313 !important
}

.apexcharts-tooltip-title {
background: #131313 !important
}

.apexcharts-text tspan {
font-family: var(--fontGraph);
font-size: 14px;
color: #61ed6d
}

.feedback {
display: flex;
border-radius: 0.3rem;
gap: 1rem;
align-items: flex-start;
align-content: flex-start
}

.feedback img {
display: flex;
border-radius: 7px;
width: 54px;
height: 54px
}

.feedback_info {
display: flex;
flex-direction: column;
gap: 0.5rem
}

.feedback_date {
color: #343434
}



.reviews_wrap {
padding-top: 15px;
display: flex;
flex-direction: column;
gap: 15px
}

.review_avatar {width: 54px;height: 54px;}

.feedback_content {
color: #888888
}

.feedbacks {
display: flex;
padding-left: 0.1px;
flex-direction: column;
align-items: flex-start;
gap: 12px
}

.reviews_wrap {
padding-top: 15px
}

.not_auth_review {margin-top: 1.5rem;padding: 1.5rem;background: #080808;border-radius: 8px;gap: 15px;height: fit-content;display: flex;flex-direction: column;border: solid 1px #3e3e3e75;color: #7d7d7d;transition: all 0.4s}

.not_auth_review:hover .ui923 {
color: white;
transition: all 0.4s
}

.ui923 {
transition: all 0.4s;
font-size: 15px
}

button.open_login {border: solid 1px #84a0ff30;max-width: fit-content;min-width: 250px;background: #1c203d2e;padding: 0.8rem 1rem;color: white;display: flex;font-size: 14px;gap: 0.8rem;border-radius: 8px;cursor: pointer;letter-spacing: 0.5px;transition: all 0.4s;display: flex;align-items: center;justify-content: center;}

span, p, div {
cursor: default
}

#open_modal_login_review svg {
transition: transform 0.3s cubic-bezier(0.55, 0.17, 0.35, 0.97)
}

#open_modal_login_review:hover {border: solid 1px #ffffff21;background-color: #0d0e14;transition: all 0.4s;transform: scale(0.98);box-shadow: 0px 0px 13px 1px #3948840a;}

#open_modal_login_review:hover svg {
transform: rotate(360deg)
}

.rw_owner::after {
display: block;
position: relative;
right: 0;
left: 14px;
bottom: 24px;
content: "";
width: 24px;
height: 24px;
background-size: cover;
object-fit: cover;
background-repeat: no-repeat;
background-image: url("/static/img/server/crown_server_owner_black.png");
filter: invert(1)
}

.wrap_th {
padding-top: 15px
}

div#chart {
margin-top: -5px
}
.tab_icon {
    width: 18px;
    height: 18px;
}

button.tab-button:hover .tab_icon svg {
    transition: all 0.4s;
    transform: scale(1.1); /* Пример: увеличиваем иконку */
    filter: drop-shadow(0 0 2px rgb(54 61 168)); /* Пример: добавляем тень */
    
}

.tab_icon svg {
    transition: all 0.4s;    
}


@media screen and (max-width:545px) {
button.open_login {
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s;
    }
.y_b {
    width: 100%
}

.rw_btn {
    width: 100%
}

button#positive, button#negative {
    width: 50%
}

button.fm-rw {
    width: 100%
}

.bmbm {
    width: 100% !important
}

.server_buttons {
    box-shadow: unset
}



.server_header {
    gap: 10px;
    height: auto;
    grid-template-rows: 40px 1fr auto;
    grid-template-columns: auto
}

button.server_connect {
    width: 100%
}

.rc_ {
    width: 100%
}

p.user {
    max-width: 140px
}

.likes, .likes_wrap {
    width: 100%
}

}
@keyframes animation_error {
0% {
    transform: translateX(0)
}

25% {
    transform: translateX(5px)
}

50% {
    transform: translateX(-5px)
}

75% {
    transform: translateX(5px)
}

100% {
    transform: translateX
}

}

@keyframes animation_spin {
from {
    transform: rotate(0deg) scale(1.25)
}

to {
    transform: rotate(360deg) scale(1)
}

}