@media (max-width: 768px) {
    .mob-hidden {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .web-hidden {
        display: none !important;
    }
}
.descr ul li::before,.submenu>a::after {
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro'
}

.comment-item__letter,.fdl-btn-dl,.fdl-btn-title,.logo span,.nav__list>li>a,.page__btn-comments,.page__tags a,.pagination__btn-loader a,.pagination__btn-loader span,.side-block__title,.side-nav>li>a {
    text-transform: uppercase
}

.mobile-menu,body {
    overflow-x: hidden
}

.fdl-btn,.line-clamp,.login,.popular,.short,.ws-nowrap,body.mobile-menu-is-opened {
    overflow: hidden
}

.chat-bubble.show,.sect__sort ul li[class],.sect__sort ul:hover li {
    visibility: visible
}

*,.login-btn,.uc-gradient-border,.uc-video-item {
    box-sizing: border-box
}

.nav__list>li>a:hover,.uc-image-container:hover .uc-video-img {
    transform: scale(1.15)
}

.cMessage,.fdl-btn-title,.full-text {
    word-wrap: break-word
}

.music-list,ol,ul {
    list-style: none
}

.d-grid,.user-list tbody {
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
}

:root {
    --bg: #efefef;
    --bg-lighter: #fff;
    --bg-darker: #e6e6e6;
    --tt: #383838;
    --tt-lighter: #565656;
    --tt-lightest: #999;
    --bdc: #f2f2f2;
    --bdc-darker: #e3e3e3;
    --bsh: 0 5px 10px #00000015;
    --bsh-2: 0 10px 20px #00000005;
    --accent: #4f007f;
    --accent-darker: #3a065a;
    --ui-bg: #fff;
    --ui-bg-darker: #f6f6f6;
    --ui-bg-darkest: #f0f0f0;
    --ui-bg-accent: #11222c;
    --ui-tt-on-accent: #fff;
    --ui-bdc: #e6e6e6;
    --indent-negative: -30px;
    --indent: 30px;
    --max-width: 1466px;
    --gradient: linear-gradient(to right, #6a006a, indigo, #00bfff);
    --background: #fff;
    --blurback: rgb(255 255 255 / 11%);
    --purple: #4f007f;
    --txtcolor: #444;
    --line: #f0f0f0;
    --detback: #e0e0e0
}

[data-theme=dark] {
    --bg: #121212;
    --bg-lighter: #0f1f2e;
    --bg-darker: #0a0a0a;
    --tt: #e0e0e0;
    --tt-lighter: #b0b0b0;
    --tt-lightest: #dddddd;
    --bdc: #2c2c2c;
    --bdc-darker: #333333;
    --bsh: 0 5px 15px #00000070;
    --bsh-2: 0 10px 25px #00000090;
    --accent: #9d4edd;
    --accent-darker: #7b2cbf;
    --ui-bg: #1e1e1e;
    --ui-bg-darker: #252525;
    --ui-bg-darkest: #2d2d2d;
    --ui-bg-accent: #0a0a0a;
    --ui-tt-on-accent: #ffffff;
    --ui-bdc: #333333;
    --background: #0f1f2e;
    --blurback: rgb(0 0 0 / 40%);
    --purple: #bb86fc;
    --txtcolor: #f0f0f0;
    --line: #182d40;
    --detback: #1e364c
}

video {
    border-radius: 10px
}

* {
    background: 0 0;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

embed,frame,iframe,img,object,table,video {
    max-width: 100%;
    vertical-align: middle
}

body {
    font: 15px/1.4 NotoSansGeorgian-Regular,sans-serif;
    letter-spacing: .02em;
    color: var(--txtcolor);
    background: url(/images/background.jpg) center top / cover no-repeat fixed;
    width: 100%;
    min-height: 100vh}
html, body {cursor: url('/images/cursor.png'), default;}

a,a:focus,a:hover {
    color: var(--tt);
    text-decoration: none
}

h1,h2,h3,h4,h5 {
    font-weight: 700;
    font-size: 24px
}

::selection {
    background: #6a006a;
    color: #fff
}

.bolder,.popular__title,b,strong {
    font-weight: 700
}

img {
    transition: transform .8s ease-in-out
}

button,input[type=button],input[type=password],input[type=submit],input[type=text],select,textarea {
    color: var(--txtcolor);
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-family: inherit
}

.btn,.form__btn,.pm__links a,.qq-upload-button,.usp__btn a,button,input[type=button],input[type=reset],input[type=submit] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0 10px;
    height: 35px;
    white-space: nowrap;
    font-size: 12px;
    /* font-weight: 700; */
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--gradient);
    color: #fff;
    border-radius: 20px;
    box-shadow: none
}

.btn:hover,.form__btn:hover,.pm__links a:hover,.qq-upload-button:hover,.usp__btn a:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover {
    background-color: var(--accent-darker);
    color: #fff;
    border-color: var(--accent-darker)
}

button:active,input[type=button]:active,input[type=submit]:active {
    box-shadow: inset 0 1px 4px 0 rgba(0,0,0,.1)
}

.color-btn,.ui-dialog-titlebar-close,[class*=fr],[class*=owl-],[class*=plyr],[class*=tox-],[id*=mceu] {
    padding: 0;
    margin: 0;
    line-height: normal;
    border: 0;
    box-shadow: none;
    background: 0 0;
    border-radius: 0
}

input[type=password],input[type=text] {
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    padding: 0 15px
}

select {
    height: 25px;
    padding: 0 15px;
    font-size: 15px
}

select:not([multiple]) {
    background-image: url(../dleimages/chevron.svg);
    padding-right: 30px;
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto
}

select option {
    padding: 6px 10px
}

select[multiple] option {
    padding: 3px 10px
}

select[multiple] {
    padding: 9px 5px;
    border-radius: 3px
}

textarea {
    padding: 15px;
    overflow: auto;
    vertical-align: top;
    resize: vertical;
    min-height: 100px
}

input[type=password],input[type=text],select,textarea {
    width: 100%;
    background-color: #fff;
    color: #444;
    box-shadow: inset 0 0 0 1px #e3e3e3,inset 1px 2px 5px rgba(0,0,0,.1)
}

input[type=password]:focus,input[type=text]:focus,textarea:focus {
    box-shadow: inset 0 0 0 1px var(--accent),inset 1px 2px 5px rgba(0,0,0,.1)
}

input::placeholder,textarea::placeholder {
    color: #000;
    opacity: .4;
    font-size: 14px
}

#jeuwu28,.footer,.footer__text,.header a,.mcBBcodesBtn,.mcManageBtn,.mcReloadBtn,.mcSmilesBtn {
    color: #fff
}

input:focus::placeholder,textarea:focus::placeholder {
    color: transparent
}

.img-fit-cover,.img-responsive,.img-wide {
    position: relative;
    overflow: hidden;
}

.img-responsive {
    padding-top: 60%;
    /* max-width: 250px; */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 6px;
    background: var(--gradient);
    border-radius: 50%;
}

.img-fit-cover img,.img-responsive>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease-in-out;
    backface-visibility: hidden;
    border-radius: 50%;
    padding: 6px;
    /* background: var(--gradient); */
}

.anim,.attent img,.btn,.int,.nav__list-hidden,.popular img,.top-item img,a,button {
    transition: color .3s,background-color .3s,opacity .3s,box-shadow .3s,transform .3s
}

.img-fit-cover img:hover,.img-responsive> img:hover {
    transform: scale(1.1,1.1)
}

.img-responsive>img {
    position: absolute;
    left: 0;
    top: 0
}

.expand-link,.img-wide img,.img-wide>a {
    width: 100%;
    display: block
}

.clr {
    clear: both
}

.clearfix::after {
    content: "";
    display: table;
    clear: both
}

.expand-link::before,.img-mask::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0
}

.ws-nowrap {
    white-space: nowrap;
    text-overflow: ellipsis
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.vw100 {
    margin: 0 calc((100% - 100vw)/ 2);
    padding: 0 calc((100vw - 100%)/ 2)
}

.img-mask::before {
    z-index: 1;
    height: 60%;
    background: linear-gradient(to top,#000 0,transparent 100%);
    opacity: .8
}

.expand-link::before {
    top: 0
}

.d-flex,.fx-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row
}

.fd-column,.fx-col {
    flex-direction: column;
    flex-wrap: nowrap
}

.fx-row,.jc-space-between {
    justify-content: space-between
}

.fx-start,.jc-flex-start {
    justify-content: flex-start
}

.fx-center,.jc-center {
    justify-content: center
}

.jc-flex-end {
    justify-content: flex-end
}

.ai-flex-start {
    align-items: flex-start
}

.ai-center,.fx-middle {
    align-items: center
}

.ai-flex-end {
    align-items: flex-end
}

.order-first {
    order: -1
}

.order-last {
    order: 10
}

.flex-grow-1,.fx-1,.stretch-free-width {
    flex: 1 1 0;
    max-width: 100%;
    min-width: 50px
}

.pi-center {
    display: inline-grid;
    place-items: center
}

#category option:empty,#dofullsearch,#hnp_author span,#related_news:empty,#result-registration:empty,#scrolltop,#toggle-darkmod .i__sun,.comment-item__main .quote+br,.comments_subscribe+br,.d-none,.hidden,.uTopTd,.ui-helper-hidden-accessible:empty,[data-theme=dark] #toggle-darkmod .i__moon {
    display: none
}

.icon-at-left [class*=fa-] {
    margin-right: .8em
}

.icon-at-right [class*=fa-] {
    margin-left: .8em
}

.d-grid {
    display: grid;
    grid-gap: 15px 15px;
    grid-auto-flow: row dense;
}

.d-grid>:not(.grid-item) {
    grid-column: 1/-1;
}

@font-face {
    font-family: Manrope;
    src: url('../webfonts/manrope-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope;
    src: url('../webfonts/manrope-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope;
    src: url('../webfonts/manrope-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: NotoSansGeorgian-Regular;
    src: url('../fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

.uadm--fixed-body-top {
    padding-top: 0!important
}

.wrapper {
    min-width: 320px;
    position: relative
}

.wrapper-container {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 20
}

.col-side,.nav {
    z-index: 60;
    position: relative
}

.wrapper-main {
    padding: 0 var(--indent);
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.content {
    flex: 1 0 auto;
    padding: 15px;
    margin: 30px 0;
    background: var(--blurback);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: rgb(0 0 0 / 15%) 0 1px 3px,rgb(0 0 0 / 13%) 0 1px 2px,rgb(0 0 0 / 13%) 0 20px 30px -10px
}

.access-card,.content-block--bg,.sticker-box {
    backdrop-filter: blur(10px)
}

.header,.nav {
    background-color: var(--background);
    box-shadow: var(--bsh);
    padding-top: 15px;
    padding-bottom: 15px
}

.footer,.header {
    background: var(--gradient)
}

.header {
    gap: 20px 20px
}

.nav {
    border-top: 1px solid var(--background);
    box-shadow: rgba(0,0,0,.45) 0 25px 20px -20px;
    font-family: 'BPG Mrgvlovani Caps'
}

.cols {
    display: grid;
    gap: 30px 30px;
    grid-template-columns: 250px minmax(0,1fr) 300px
}

.col-side {
    display: grid;
    gap: 30px;
    align-content: start
}

.footer {
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 14px;
    line-height: 1.6
}

#scrolltop,.content-block--bg {
    background-color: var(--bg-lighter);
    text-align: center
}

.content-block--bg {
    border-radius: 20px;
    margin: 0 auto;
    background: var(--bg-lighter);
    padding: 30px 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2)
}

#scrolltop {
    position: fixed;
    width: 60px;
    height: 60px;
    line-height: 60px;
    right: 10px;
    bottom: 10px;
    z-index: 990;
    color: var(--tt-lightest);
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%;
    box-shadow: var(--bsh)
}

.logo {
    display: inline-flex;
    align-items: center;
    height: 40px;
    position: relative;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 1px;
    padding-left: 50px;
    margin-right: 40px;
    background: url(../images/logo.png) 0 3px/35px no-repeat;
    color: #fff!important;
    font-family: "Playwrite IE",cursive
}

.chatname,.page__comments-title {
    font-family: 'BPG Mrgvlovani Caps'
}

.logo span {
    font-weight: 400;
    font-size: 9px;
    color: #efefef;
    position: absolute;
    right: -20px;
    top: -8px
}

.search-block form {
    max-width: 400px;
    position: relative
}

.search-block__input[type=text],.search-block__input[type=text]:focus {
    border-radius: 20px;
    box-shadow: none;
    border: 1px solid var(--bdc);
    background-color: var(--background);
    height: 40px;
    color: var(--txtcolor);
    line-height: 38px;
    padding: 0 50px 0 20px
}

.search-block__input[type=text]:not(:focus):placeholder {
    color: var(--tt-lightest);
    opacity: 1;
    font-size: 14px
}

.search-block__btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    background: 0 0;
    color: var(--tt);
    border-radius: 20px;
    padding: 0;
    font-size: 16px
}

.nav__list {
    margin: 0 -40px
}

.nav__list>li,.side-nav>li {
    flex-grow: 1;
    font-size: 14px;
    position: relative
}

.nav__list>li+li {
    border-left: 0 solid var(--bdc)
}

.nav__list>li>a:hover {
    background: var(--background) url(/images/sp arkle.gif) center center/500px no-repeat;
    box-shadow: 0 0 15px #f0f;
    border-radius: 50px
}

.nav__list-hidden li:hover {
    background: var(--background);
    transform: scale(1)!important;
    box-shadow: 0 0 15px #f0f;
    border-radius: 50px
}

#statusers,.ff_content_en a:hover {
    background: var(--line)
}

.nav__list>li>a,.side-nav>li>a {
    height: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px 0;
    border-radius: 50px
}

.nav__list li i {
    color: var(--accent);
    padding-right: 10px;
    padding-bottom: 5px
}

.nav__list-hidden {
    width: max-content;
    min-width: 280px;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--background);
    box-shadow: var(--bsh-2);
    display: grid;
    gap: 10px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(40px)
}

.int__img,.sect__sort ul:hover,.top-item {
    box-shadow: var(--bsh)
}

.nav__list-hidden li {
    border-bottom: 1px solid var(--line);
    padding: 10px 20px 5px
}

.submenu>a::after {
    content: "\f107";
    margin-left: 7px;
    display: inline-block
}

.side-nav {
    border-radius: 6px;
    padding: 20px 0;
    background-color: var(--bg-lighter)
}

.side-nav .nav__list-hidden {
    left: 100%;
    top: -40px;
    border-radius: 0 10px 10px 0
}

.side-nav>li>a {
    justify-content: flex-start
}

.top {
    gap: 15px 15px;
    margin-top: 30px
}

.top-item {
    flex: 1 1 30%;
    border: 8px solid transparent;
    background: linear-gradient(var(--background),var(--background)) padding-box,linear-gradient(to right,#6a006a,indigo,#00bfff) border-box;
    border-radius: 200px;
    padding: 0
}

.sect__sort ul,.short {
    background-color: var(--bg-lighter)
}

.top-item:nth-child(2),.top-item:nth-child(3) {
    flex-basis: 60%
}

.top-item__desc {
    position: relative;
    z-index: 5;
    min-height: 140px;
    padding: 10px 40px;
    color: #fff;
    gap: 10px;
    max-width: 100%
}

.top-item__title {
    font-weight: 600;
    color: #fff!important;
    font-size: 15px
}

.top-item__date {
    font-size: 12px
}

.top-item::before {
    height: 100%;
    background: var(--gradient);
    opacity: .6
}

@media screen and (min-width: 1220px) {
    a.short__img:hover {
        opacity:.8
    }

    .attent:hover img,.popular:hover img,.top-item:hover img {
        transform: scale(1.1,1.1);
        border-radius: 50%;
    }

    .attent:hover .attent__title,.footer__text a:hover,.int:hover .int__title,.popular:hover .popular__title,.sect__sort a:hover,.short__title a:hover,.speedbar a:hover {
        text-decoration: none
    }

    .page__tags a:hover,.pagination__btn-loader a:hover,.pagination__pages a:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent)
    }

    .nav__list-hidden a:hover,.nav__list>li:hover>a,.side-nav>li:hover>a {
        color: var(--accent)
    }

    .nav__list li:hover .nav__list-hidden,.side-nav li:hover .nav__list-hidden {
        visibility: visible;
        opacity: 1;
        transform: translateY(0)
    }

    .top {
        display: grid;
        grid-template-columns: repeat(6,1fr)
    }

    .top-item {
        grid-column: span 1
    }

    .top-item:nth-child(3),.top-item:nth-child(4) {
        grid-column: span 2
    }

    .top-item:first-child {
        grid-column: span 3;
        grid-row: span 2
    }

    .top-item__desc {
        height: 100%
    }

    .top-item:first-child .top-item__title {
        font-size: 24px;
        margin-bottom: 30px
    }
}

.sect__header {
    margin-bottom: 30px
}

.sect__sort {
    height: 36px
}

.sect__sort ul {
    height: 36px;
    border-radius: 6px;
    position: relative;
    z-index: 50;
    cursor: pointer;
    text-align: center
}

.sect__sort ul li {
    height: 36px;
    line-height: 36px;
    visibility: hidden;
    padding: 0 10px;
    font-size: 13px
}

.sect__sort ul:hover {
    height: auto
}

.TopButton a:hover,.int:hover,.user-list tr:hover {
    box-shadow: 0 0 15px #f0f
}

.sect__sort ul li[class]::before {
    content: 'Сортировать по:';
    margin-right: 6px
}

.sect__sort li.asc a::after,.sect__sort li.desc a::after {
    content: "\f063";
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    margin-left: 6px;
    font-weight: 300;
    font-size: 10px
}

.sect__sort li.desc a::after {
    content: "\f062"
}

.speedbar {
    margin-bottom: 15px;
    margin-top: -15px;
    font-size: 13px;
    color: var(--tt-lightest)
}

.short.grid-item .short__title,.short__title {
    font-size: 16px
}

.descr,.popular__text,.short__meta,.short__text {
    color: var(--tt-lighter)
}

.descr {
    display: grid;
    grid-gap: 20px;
    line-height: 1.7;
    grid-column: 1/-1;
    padding: 20px 0
}

.descr h1,.descr h2,.descr h3 {
    font-weight: 400;
    font-size: 18px;
    color: var(--tt);
    line-height: 1.3
}

.descr a,.footer__text a,.short__meta-item a {
    color: var(--accent)
}

.descr a {
    text-decoration: underline
}

.comment-item__rating a:hover>span:first-child,.short__meta-item a {
    text-decoration: none
}

.descr ul li {
    position: relative;
    padding-left: 25px;
    margin-left: 25px
}

.descr ul li::before {
    content: "\f00c";
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 0
}

.short {
    border-radius: 10px
}

.short__desc,.short__header {
    padding: 30px 20px
}

.short__title {
    font-weight: 700
}

.short__meta {
    margin-top: 15px;
    gap: 10px 20px;
    font-size: 12px
}

.comment-item__footer a:hover,.full-text a,.login__caption a,.page__prev-next-link:hover,.popular-item:hover {
    text-decoration: underline
}

.short__meta .fal {
    margin-right: 6px;
    opacity: .6
}

.short__img {
    height: 260px;
    display: block;
    width: 260px;
    margin: 0 auto;
    border-radius: 50%
}

.attent,.popular {
    border-radius: 6px
}

.short__text {
    line-height: 1.6;
    margin-bottom: 38px
}

.short.grid-item {
    position: relative;
    padding-bottom: 60px
}

.short.grid-item .short__desc,.short.grid-item .short__header {
    padding: 20px
}

.short.grid-item .short__header {
    padding-bottom: 0
}

.short.grid-item .short__img {
    height: 0
}

.pagination__pages,.short.grid-item .short__meta {
    gap: 10px 10px
}

.short.grid-item .short__text {
    -webkit-line-clamp: 4;
    font-size: 14px;
    margin: 0
}

.short__btn .fal {
    opacity: 1;
    font-size: 18px;
    margin: 0
}

.short__btn {
    padding: 0;
    width: 40px
}

.short__desc .short__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px
}

.side-block__title {
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bdc-darker)
}

.side-block__content {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr))
}

.side-block--sticky {
    position: sticky;
    left: 0;
    top: 20px
}

.attent,.fdl-btn,.fdl-btn>*,.int,.page__fav a,.popular,.video-responsive {
    position: relative
}

.popular {
    background-color: var(--background);
    padding: 5px;
}

.popular__desc {
    padding: 14px 20px 16px
}

.popular__text {
    font-size: 13px;
    margin-top: 6px;
    -webkit-line-clamp: 4
}

.attent {
    text-align: center;
    padding: 20px;
    background-color: var(--bg-lighter)
}

.int,.intbox {
    border-radius: 36px
}

.attent__title {
    font-weight: 700;
    margin: 20px 0
}

.attent .short__meta {
    margin: 0 0 20px
}

.intbox {
    padding: 2px;
    background: var(--gradient)
}

.int {
    gap: 20px;
    background-color: var(--background);
    padding: 4px
}

.int__img {
    width: 60px;
    height: 60px;
    border-radius: 50%
}

.int__title div {
    -webkit-line-clamp: 3;
    font-size: 14px
}

.int:hover {
    transform: scale(1.1);
    border-radius: 50px
}

.footer__text a {
    margin: 0 20px 0 0
}

.pagination {
    text-align: center;
    display: grid;
    gap: 20px;
    padding-top: 15px
}

.pagination__btn-loader a,.pagination__btn-loader span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 0 50px;
    border-radius: 30px;
    background: var(--bg-darker);
    color: var(--tt-lighter);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    width: 400px;
    max-width: 100%
}

.pagination__pages a,.swchItemA {
    display: inline-block;
    line-height: 38px;
    padding: 0 10px;
    min-width: 40px;
    font-size: 16px;
    background: var(--background);
    border-radius: 20px
}

.swchItemA:not(.nav_ext) {
    background: linear-gradient(44deg,#6a006a 10%,indigo 50%,#00bfff 90%);
    color: #fff
}

.page__tags {
    font-size: 0;
    gap: 10px 4px;
    margin-top: 40px
}

.page__tags .fal {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-right: 6px
}

.page__tags a {
    display: inline-flex;
    pointer-events: none;
    align-items: center;
    white-space: nowrap;
    height: 30px;
    border-radius: 2px;
    padding: 0 10px;
    font-size: 11px;
    color: var(--tt-lighter);
    border: 1px solid var(--bdc-darker)
}

.page__tags+.page__footer {
    margin-top: -10px
}

.page__footer {
    font-size: 14px;
    border-top: 1px solid var(--bdc);
    padding-top: 20px
}

.page__fav a {
    padding-left: 50px;
    display: block;
    color: var(--tt-lightest);
    line-height: 1.3;
    font-size: 13px
}

.page__fav .fal {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bdc);
    border-radius: 50%;
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -20px
}

.page__btn-comments {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    margin-left: 20px
}

.page__prev-next {
    background-color: var(--bg-2);
    width: 300px;
    padding: 20px 20px 3px;
    float: left;
    margin: 0 20px 10px 0
}

.page__prev-next-link {
    line-height: 1.5;
    display: block;
    margin-bottom: 20px;
    font-weight: 300
}

.page__prev-next-link div {
    font-size: 12px;
    color: var(--tt-lightest);
    margin-bottom: 5px
}

.popular-item__img {
    width: 100px;
    height: 60px;
    margin-right: 20px
}

.popular-item__title {
    line-height: 1.4;
    -webkit-line-clamp: 3
}

.full-text {
    line-height: 1.7;
    font-size: 15px
}

.full-text a {
    color: #5278b1
}

.full-text>.highslide img[style*=left],.full-text>img[style*=left] {
    margin: 0 10px 10px 0
}

.full-text>.highslide img[style*=right],.full-text>img[style*=right] {
    margin: 0 0 10px 10px
}

.full-text>ol li,.full-text>ul li {
    padding-left: 60px;
    position: relative
}

.full-text>ul li:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    position: absolute;
    top: 5px;
    left: 34px
}

.full-text>ol {
    counter-reset: num
}

.full-text>ol li:before {
    content: counter(num);
    counter-increment: num;
    background-color: var(--accent);
    color: #fff;
    position: absolute;
    top: -2px;
    left: 17px;
    width: 24px;
    height: 30px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 6px;
    box-sizing: border-box
}

.full-text>ol li:after {
    content: '';
    border: 10px solid transparent;
    border-left-color: var(--accent);
    position: absolute;
    left: 41px;
    top: -2px;
    transform: scale(.66,1.5);
    transform-origin: 0 0
}

.full-text>ol li+li,.full-text>ul li+li {
    margin-top: 10px
}

.full-text table,.video-inside>* {
    width: 100%
}

.full-text table tr td {
    padding: 10px;
    border: 2px solid #fff
}

.full-text table tr:nth-child(odd) {
    background-color: #f2f6f9
}

.full-text table tr:first-child {
    background-color: #cee0ed
}

.full-text table img:not(.emoji) {
    margin: 0;
    max-width: 350px
}

.full-text>:last-child {
    margin-bottom: 0
}

.video-responsive {
    padding-top: 60%
}

.video-responsive>iframe,.video-responsive>video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.full-text h1,.full-text h2,.full-text h3,.full-text h4,.full-text h5 {
    font-size: 21px
}

.full-text iframe {
    width: 100%;
    height: 400px;
    margin-bottom: 20px
}

.fdl-btn {
    display: block;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
    text-decoration: none!important;
    padding: 15px 15px 15px 130px;
    background: linear-gradient(to top,#27ae60,#2ecc71);
    color: #fff!important
}

.fdl-btn-title {
    font-weight: 500
}

.fdl-btn-size {
    font-size: 14px;
    margin-top: -2px;
    margin-bottom: 6px;
    opacity: .9
}

.fdl-btn-caption {
    opacity: .7;
    font-size: 14px
}

.login__close,.overlay {
    opacity: .6;
    cursor: pointer
}

.fdl-btn-dl {
    font-size: 12px;
    margin-left: 15px
}

.fdl-btn>* {
    z-index: 3
}

.fdl-btn-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: -25px;
    font-size: 24px;
    position: absolute;
    left: 40px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 15px rgba(0,0,0,.13),0 0 0 30px rgba(0,0,0,.08),0 0 0 45px rgba(0,0,0,.04)
}

.page__comments {
    margin: 30px 0 0;
    padding: 20px;
    border-radius: 10px;
    background: var(--bg-lighter)
}

.comment-item,.page__comments-title {
    background-color: var(--background);
    border-radius: 10px;
    padding: 10px 10px 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1)
}

.page__comments-title {
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0;
    position: relative;
    color: var(--txtcolor)
}

.chatname::before,.page__comments-title::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--background)
}

.page__comments-info {
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: -15px;
    color: var(--tt-lighter);
    line-height: 1.5
}

.page__comments-info .fal {
    color: #eb4d4b;
    margin-right: 6px
}

.page__comments-btn {
    width: 100%
}

.ac-form {
    display: grid;
    gap: 20px
}

.ac-form__bottom {
    gap: 10px 20px
}

.ac-form .message-info {
    margin: 0
}

.ac-form .tox-tinymce {
    height: 160px!important
}

.mass_comments_action {
    display: flex;
    align-items: center;
    max-width: 800px;
    white-space: nowrap;
    margin-bottom: 20px
}

.mass_comments_action select {
    flex: 1 1 0;
    margin: 0 -8px 0 20px
}

.mass_comments_action .bbcodes {
    border-radius: 0;
    padding: 0 10px
}

.has-comms {
    margin-bottom: -20px
}

.comment-item__title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px
}

.comment-item {
    margin: 20px 0;
    color: var(--txtcolor)
}

.comment-item__img,.login__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px
}

.comment-item__letter {
    width: 100%;
    height: 100%;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    color: #fff;
    font-size: 18px
}

.comment-item__controls a:not(:hover),.comment-item__date,.comment-item__reply a,.login__row,.login__title a {
    color: var(--tt-lightest)
}

.comment-item__author {
    font-weight: 600;
    font-size: 14px
}

.comment-item__date {
    margin-top: 4px;
    font-size: 12px
}

.comment-item__main {
    margin: 18px 0 6px;
    font-size: 15px;
    background: #fff;
    border-radius: 12px;
    padding: 4px 6px
}

.comment-item__rating {
    white-space: nowrap;
    font-size: 14px
}

.comment-item__rating a {
    margin-left: 6px
}

.comment-item__rating a>span:first-child {
    color: #6ab04c;
    margin-right: 2px
}

.comment-item__rating a:last-child>span:first-child {
    color: #eb4d4b
}

.comment-item__reply a {
    font-size: 12px;
    margin-right: 20px
}

.comment-item__reply a .fal {
    margin-left: 5px
}

.comment-item__reply+.comment-item__reply a .fal {
    margin-left: 0;
    margin-right: 5px
}

.comment-item__controls {
    text-align: right;
    font-size: 12px;
    margin-right: -15px
}

.comment-item__controls li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 10px;
    height: 16px;
    line-height: 16px
}

.comment-item__controls .checkbox {
    transform: scale(.8,.8);
    margin-left: 5px
}

.login {
    position: fixed;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--ui-bg);
    border-radius: 4px;
    width: 400px;
    box-shadow: 0 0 0 10px rgba(255,255,255,.2),0 15px 45px #000
}

.login__menu a,.login__social {
    background-color: var(--ui-bg-darker);
    text-align: center
}

.login__content,.login__header {
    padding: 20px 40px
}

.login__title {
    font-size: 18px;
    font-weight: 600;
    padding: 1px 0;
    text-transform: capitalize
}

.login__close {
    font-size: 24px;
    margin-left: 20px
}

.login__title a {
    border-bottom: 1px dotted var(--tt-lighter);
    margin-left: 10px;
    font-weight: 400
}

.login__row {
    margin-bottom: 20px;
    position: relative;
    display: block;
    font-size: 14px
}

.mobile-menu,.overlay {
    position: fixed;
    height: 100%
}

.login__caption {
    font-size: 14px;
    color: var(--tt);
    margin-bottom: 10px
}

.login__caption a {
    margin-left: 6px;
    color: var(--accent)
}

.login__input input {
    padding-left: 40px
}

.login__row .fal {
    opacity: .5;
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 40px;
    width: 40px;
    text-align: center;
    color: #6a006a
}

.login__row button {
    width: 100%
}

.login__social {
    padding: 20px 40px
}

.login__social-caption {
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 10px
}

.login__social-btns a {
    display: inline-block;
    margin: 0 3px;
    vertical-align: top
}

.login__social-btns img {
    display: block;
    width: 34px;
    height: 34px
}

.login__menu {
    padding-left: 35px;
    padding-right: 35px;
    margin-bottom: -10px
}

.login__menu li {
    flex: 1 1 0;
    min-width: auto;
    max-width: 100%;
    margin: 0 5px 10px
}

.login__menu a {
    display: block;
    border-radius: 6px;
    padding: 10px;
    white-space: nowrap;
    box-shadow: inset 0 0 10px rgba(0,0,0,.1);
    font-size: 13px
}

.login__menu .fal {
    display: block;
    height: 30px;
    font-size: 24px;
    opacity: .3
}

.overlay {
    z-index: 998;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #000;
    display: none
}

.mobile-menu {
    width: 280px;
    overflow-y: auto;
    padding: 10px 20px;
    z-index: 999;
    left: -320px;
    top: 0;
    transition: left .4s;
    background-color: var(--bg-lighter);
    color: var(--tt)
}

.mobile-menu.is-active {
    left: 0
}

.mobile-menu-close {
    cursor: pointer;
    display: block;
    left: 280px;
    top: -40px;
    position: fixed;
    z-index: 999;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    opacity: 0;
    background-color: #e84e36;
    color: #fff;
    transition: top .4s,opacity .4s
}

.chat-bubble,.ff_content_en,.msgr-btn {
    background: var(--background)
}

.access-card,.access-card h2,.chat-bubble {
    color: var(--txtcolor)
}

.mobile-menu-close.is-active {
    top: 0;
    opacity: 1
}

body.mobile-menu-is-opened {
    width: 100%;
    height: 100%
}

.mobile-menu ul {
    margin: 0;
    padding: 0;
}

.mobile-menu ul>li {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0
}

.mobile-menu ul>li>a {
    line-height: 40px;
    padding: 0;
    display: block
}
 
.mobile-menu .nav__list-hidden {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: calc(100% + 40px);
    margin: 15px -20px;
    padding: 10px 20px;
    border-radius: 0!important;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--bg)
}

@media screen and (max-width: 1220px) {
    :root {
        --indent-negative:-20px;
        --indent: 20px
    }

    .wrapper-container {
        max-width: 1000px
    }

    #scrolltop {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px
    }

    .col-side .js-this-in-mobile-menu,.header__link,.hm,.nav {
        display: none
    }

    .header__btn-menu {
        display: inline-flex;
        width: 35px;
        padding: 0;
        font-size: 18px
    }

    .cols {
        grid-template-columns: minmax(0,1fr)
    }

    .col-side {
        order: 10
    }

    .footer {
        display: block;
        text-align: center
    }

    .footer__text {
        margin: 20px 0
    }

    .footer__logo {
        margin: 0
    }

    .side-block--sticky {
        position: static
    }

    .top-item {
        flex: 1 0 30%!important
    }
}

@media screen and (max-width: 950px) {
    .wrapper-container {
        max-width:768px
    }

    .top-item {
        flex: 1 0 200px!important
    }

    .content-block--bg,.short__desc,.short__header {
        padding: 5px;
    }

    .short__text {
        margin-bottom: 20px
    }
}

@media screen and (max-width: 760px) {
    .wrapper-container {
        max-width:640px
    }

    .header__logo,.header__search form {
        max-width: 100%
    }

    .header {
        gap: 20px 10px
    }

    .d-grid {
        grid-template-columns: repeat(auto-fill,minmax(100%,1fr))
    }

    .header__search {
        min-width: 100%;
        order: 10;
        margin: 0
    }

    .header__logo {
        flex: 1 1 0;
        min-width: 80px;
        margin: 0;
        font-size: 16px;
    }

    .comment-item__controls,.comment-item__rating-caption,.header__logo span,.mass_comments_action {
        display: none
    }

    .top {
        gap: 10px 10px
    }

    .full-text h1,.full-text h2,.full-text h3,.full-text h4,.full-text h5,.sect__title,.short__title,h1,h2,h3,h4,h5 {
        font-size: 18px
    }

    .header__btn-login {
        width: 35px;
        overflow: hidden;
        font-size: 0;
        padding: 0;
        display: block
    }

    .header__btn-login::before {
        display: block;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 18px;
        content: "\f007";
        font-weight: 300;
        font-family: 'Font Awesome 5 Pro'
    }

    .content-block--bg,.page .short,.page__comments {
        border-radius: 12px
    }

    .page__text .quote {
        margin-left: var(--indent-negative);
        margin-right: var(--indent-negative);
        padding-right: var(--indent)
    }

    .ac-form__bottom>* {
        min-width: 100%
    }

    .ac-form__bottom button {
        width: 100%;
        order: 10
    }
}

@media screen and (max-width: 590px) {
    .wrapper-container {
        max-width:480px
    }

    .login {
        max-width: 90%;
        max-height: 90%;
        overflow-x: hidden;
        overflow-y: auto
    }

    .login__content,.login__header,.login__social,.pages-bg {
        padding-left: 20px;
        padding-right: 20px
    }

    .page__share {
        display: flex;
        min-width: 100%;
        margin: 0 0 20px
    }

    .page__yadzen {
        width: 100%;
        margin-bottom: 20px
    }

    .page__date,.page__meta {
        font-size: 12px
    }

    .page__header h1 {
        line-height: 1.4;
        font-size: 19px
    }

    .page__poster {
        height: 240px
    }

    .page__date {
        position: absolute;
        left: 0;
        top: 30px
    }

    .page__rating {
        top: 20px;
        bottom: auto;
        font-size: 13px
    }

    .page__rating>* {
        width: 40px;
        padding: 5px;
        text-align: center;
        height: 70px
    }

    .page__rating .fal {
        margin: 0 0 6px
    }
}

@media screen and (max-width: 470px) {
    .wrapper-container22 {
        max-width:360px
    }

    .header__logo {
        font-size: 15px;
    }

    .hm2,.page__comments-info {
        display: none
    }

    .short__img {
        height: 160px
    }

    .short__text {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .pagination__btn-loader>* {
        width: 100%!important;
        padding: 0!important
    }

    .hm {
        display: block
    }

    .full-text iframe {
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        height: 260px;
        margin-left: -20px;
        margin-right: -20px
    }
}

.lovschat-wrapper {
    position: fixed;
    bottom: 80px;
    right: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.msgr-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    transition: .3s cubic-bezier(.175, .885, .32, 1.275)
}

.msgr-btn img {
    width: 35px;
    height: 35px
}

.msgr-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 30px rgba(0,0,0,.2)
}

.chat-bubble {
    padding: 12px 18px;
    border-radius: 15px 15px 0;
    font-size: 14px;
    width: 200px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: .5s;
    border: 1px solid var(--background);
    position: relative
}

.chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 15px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--background)
}

.chat-bubble.show {
    opacity: 1;
    transform: translateY(0)
}

#statday:hover,.color-box:hover,.login-btn:hover {
    transform: translateY(-2px)
}

@media screen and (max-width: 1220px) {
    .lovschat-wrapper {
        bottom:60px
    }

    .msgr-btn {
        width: 40px;
        height: 40px
    }

    .msgr-btn img {
        width: 20px;
        height: 20px
    }
}

.ff_fon {
    float: right;
    display: block;
    position: relative
}

.ff_fon .drox {
    padding: 0 7px
}

.ff_cell_ff,.ff_ugol_ff {
    width: 35px
}

.ff_cell_ff {
    left: -999em;
    z-index: 998;
    position: absolute;
    margin: 10px 4px 0 auto
}

.ff_content_en {
    margin: 0;
    width: 35px;
    text-align: center;
    overflow: hidden;
    border-radius: 5px
}

.ff_content_en a:link,.ff_content_en a:visited {
    float: left;
    width: 35px;
    padding: 5px 0 3px;
    border-bottom: 1px solid var(--line)
}

.ff_content_en img {
    height: 20px;
    object-fit: cover
}

.no_bb:link,.no_bb:visited {
    border-bottom: none!important
}

.ff_fon:hover .ff_cell_ff {
    top: 27px;
    right: 0;
    left: auto
}

.ff_ugol_ff {
    height: 7px;
    top: -7px;
    position: absolute;
    background: url() center bottom no-repeat
}

.access-denied-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(to right,#6a006a,indigo,#00bfff);
    background-size: 400% 400%;
    animation: 10s infinite gradientBG
}

#statday,.login-btn,.statistics .block,.uc-author-name a {
    display: inline-block
}

@keyframes gradientBG {
    0%,100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.access-card {
    background: var(--background);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
    text-align: center;
    max-width: 600px;
    margin: 40px auto
}

.icon-lock {
    font-size: 50px;
    color: #ff4757;
    margin-bottom: 20px
}

.access-card h2 {
    margin: 0 0 10px;
    font-size: 24px
}

.access-card p {
    color: #747d8c;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px
}

.login-btn {
    background-color: #3742fa;
    color: #fff!important;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
    width: 100%
}

.login-btn:hover {
    background-color: #2f35cd;
    box-shadow: 0 5px 15px rgba(55,66,250,.3)
}

.card-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 13px
}

.card-footer a {
    color: #57606f;
    text-decoration: none;
    margin: 0 5px
}

.uc-code-text,.uc-footer,.uc-meta a,.uc-more {
    color: var(--txtcolor)
}

.card-footer a:hover {
    color: #3742fa
}

.uc-video-item {
    max-width: 850px;
    margin: 20px auto 50px;
    position: relative
}

.uc-image-container {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(0);
    z-index: 10
}

.uc-gradient-border,.uc-video-img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.uc-gradient-border {
    padding: 6px;
    background: var(--gradient);
    overflow: hidden;
    box-shadow: 0 10px 25px rgb(0 0 0 / 45%);
    display: flex;
    align-items: center;
    justify-content: center
}

.uc-video-img {
    object-fit: cover;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    display: block
}

#statday a,.mcm-user,.uc-body,.uc-footer {
    display: flex
}

.uc-content-block {
    background-color: transparent;
    margin-left: 140px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.12)
}

.uc-body {
    background-color: var(--background);
    padding: 20px 20px 20px 120px;
    min-height: 160px;
    flex-direction: column;
    justify-content: center
}

.uc-code-text {
    height: 84px;
    overflow: hidden
}

.uc-footer {
    background-color: var(--detback);
    padding: 8px 20px 8px 60px;
    justify-content: space-between;
    align-items: center
}

.uc-meta a {
    letter-spacing: .1px;
    font-size: 14px
}

#statday a,.uc-author-name a {
    color: #fff!important;
    text-decoration: none
}

.uc-more {
    text-decoration: none
}

.uc-more:hover {
    opacity: .7
}

@media screen and (max-width: 800px) {
    .uc-video-item {
        margin:30px auto
    }

    .uc-image-container {
        width: 200px;
        height: 200px;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 0 auto -60px
    }

    .uc-content-block {
        margin-left: 0
    }

    .uc-body {
        padding: 80px 20px 30px;
        text-align: center
    }

    .uc-footer {
        padding: 15px 20px;
        gap: 12px;
        text-align: center
    }

    .uc-code-text {
        font-size: 15px;
        white-space: normal;
        word-break: break-all
    }
}

.uc-author-overlay {
    position: absolute;
    bottom: 0;
    left: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    pointer-events: auto
}

.chatname,.h_newpm,.material_informat,.uc-author-avatar,.usAVA {
    position: relative
}

.uc-author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    object-fit: cover;
    background: #fff;
    z-index: 10;
   
}
.uc-author-avatar img {border-radius: 50%;  overflow: visible!important}
.uc-author-name {
    margin-top: -12px
}

.uc-author-name a {
    background: #00000082;
    font-size: 12px;
    font-weight: 700;
    padding: 15px 10px 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: .3s;
    font-family: monospace;
    letter-spacing: .1em
}

.chat-body,.chatname,.mcm-user-name b {
    color: var(--txtcolor)
}

.uc-author-name a:hover {
    background: #000
}

.mchat-body {
    background: #ffffff00
}

.chat-body {
    background-color: var(--background);
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 50px;
    border-bottom: 8px solid #8700a9
}

.chatname {
    border-radius: 24px;
    padding: 10px 10px 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    border: 4px solid transparent;
    background: linear-gradient(var(--background),var(--background)) padding-box,var(--gradient) border-box
}

#statusers,.cBlock1,.cBlock2 {
    box-shadow: 0 2px 5px rgba(0,0,0,.05)
}

.chatname span {
    position: absolute;
    top: -15px;
    right: 8px
}

.chatname span img {
    width: 36px;
    height: auto;
    display: block;
    border-radius: 50%
}

select.mchat {
    height: 20px
}

textarea.mchat {
    font-size: 13px;
    height: 80px!important;
    border-radius: 8px
}

.cBlock1,.cBlock2 {
    background: var(--background);
    border-radius: 12px;
    padding: 4px 6px!important;
    margin: 8px 5px!important;
    border: 1px solid var(--background);
    transition: transform .2s
}

.cBlock1:hover,.cBlock2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1)
}

.mcm-user {
    align-items: center;
    gap: 8px;
    margin-bottom: 5px
}

.mcm-user-name b {
    font-size: 13px;
    text-decoration: none;
    font-weight: 600
}

.mcm-user-profile img {
    border-radius: 50%
}

.mcm-time {
    color: #999;
    font-size: 10px!important;
    font-weight: 400
}

#statusers,.cMessage {
    color: var(--txtcolor)
}

.cMessage {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 4px
}

.mcm-user-email,.mcm-user-www {
    font-size: 10px;
    text-decoration: none;
    color: #007bff;
    background: #eef6ff;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700
}

.mcm-user-email:hover,.mcm-user-www:hover {
    background: #007bff;
    color: #fff
}

.statistics {
    margin: 20px 0 17px;
    text-align: center
}

.statistics .block {
    margin: 0 8px;
    position: relative
}

.statistics .block div {
    border: 1px solid;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 53px;
    font-size: 16px
}

.statistics span {
    display: block;
    border-radius: 3px;
    width: 54px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    right: 3px;
    top: 47px
}

.statistics .block:first-of-type div {
    border-color: #ca6539;
    color: #ca6539
}

.statistics .block:first-of-type span {
    background: #ca6539
}

.statistics .block:nth-of-type(2) div {
    border-color: #8bca39;
    color: #8bca39
}

.statistics .block:nth-of-type(2) span {
    background: #8bca39
}

.statistics .block:nth-of-type(3) div {
    border-color: #cac839;
    color: #cac839
}

.statistics .block:nth-of-type(3) span {
    background: #cac839
}

#statday,#statusers {
    width: 100%;
    font-size: 13px;
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 3px 16px;
    transition: .3s;
    justify-content: center
}

#statday a,.gKay {
    align-items: center
}

#statday {
    background: linear-gradient(135deg,#6c5ce7,#a29bfe);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108,92,231,.2);
    color: #fff;
    text-align: center
}

#statday a::before {
    content: '📅';
    margin-right: 8px;
    font-size: 16px
}

#statday:hover {
    box-shadow: 0 6px 20px rgba(108,92,231,.4);
    filter: brightness(1.1)
}

#statusers {
    border-left: 4px solid #00b894;
    line-height: 1.6
}

#statusers b,#statusers strong {
    color: #00b894
}

#statusers a {
    color: #0984e3;
    text-decoration: none;
    font-weight: 500
}

@media (prefers-color-scheme: dark) {
    #statusers {
        color:var(--txtcolor);
        border-left-color: #7465ea
    }
}

.music-list li.active,.music-list li:hover {
    border-left: 3px solid #0fc
}

a.groupAdmin:hover,a.groupAdmin:link,a.groupAdmin:visited {
    background: url(/group/admin-mini.png) left/15px no-repeat;
    color: #ff097d!important;
    padding-left: 18px;
    text-decoration: none;
    font-size: 13px
}

a.groupUser:hover,a.groupUser:link,a.groupUser:visited {
    background: url(/group/member-mini.png) left/15px no-repeat;
    color: #5a29b1!important;
    padding-left: 18px;
    text-decoration: none;
    font-size: 13px
}

a.groupVerify:hover,a.groupVerify:link,a.groupVerify:visited {
    background: url(/group/user-mini.png) left/15px no-repeat;
    color: #bb0bdb!important;
    padding-left: 18px;
    text-decoration: none;
    font-size: 13px
}

a.groupModer:hover,a.groupModer:link,a.groupModer:visited {
    background: url(/group/moder-mini.png) left/15px no-repeat;
    color: #359ff0!important;
    padding-left: 18px;
    text-decoration: none;
    font-size: 13px
}

a.groupFriends:hover,a.groupFriends:link,a.groupFriends:visited {
    background: url(/group/friend-mini.png) left/15px no-repeat;
    color: #95e04a!important;
    padding-left: 18px;
    text-decoration: none;
    font-size: 13px
}

a.groupBanned:hover,a.groupBanned:link,a.groupBanned:visited {
    background: url(/group/banned-mini.png) left/15px no-repeat;
    color: #000!important;
    padding-left: 18px;
    text-decoration: none;
    font-size: 13px
}

.avtor_infa a,.material_informat_title a {
    color: #8e4d8b!important
}

.material_informat_title span {
    color: #eee;
    font-size: 14px;
    clear: both;
    display: block;
    text-align: center
}

.avtor_info i,.avtor_user a {
    color: #8e4d8b;
    font-size: 14px
}

.material_informat_title {
    font-size: 22px;
    color: #fff;
    margin-bottom: 19px;
    text-align: center
}

@media only screen and (max-width: 850px) {
    .material_informat {
        display:flex;
        flex-direction: column;
        align-items: flex-start
    }
}

.material_informat {
    width: 100%;
    background: var(--background);
    padding: 10px;
    color: var(--txtcolor);
    margin-bottom: 30px;
    border-radius: 10px
}

.material_informat_left,.material_informat_right {
    padding-top: 5px;
    padding-bottom: 5px;
    display: table-cell;
    vertical-align: top
}

.material_informat_right {
    padding-left: 5px
}

.avtor_avatar_mat img {
    width: 90px;
    height: 90px;
    margin: 0 10px 10px 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ddd;
    box-shadow: 0 0 1px 1px #fff;
    background: #fff
}

.avtor_avatar_mat {
    display: table-cell;
    vertical-align: top;
    width: 100px;
    padding-right: 5px;
    float: left
}

.avtor_block {
    display: table;
    width: 100%
}

.avtor_avatar {
    display: table-cell;
    vertical-align: super;
    width: 90px
}

.avtor_info {
    display: table-cell;
    vertical-align: middle;
    padding-left: 6px
}

.avtor_user a {
    display: block
}

.avtor_infa {
    margin-top: 3px;
    color: var(--txtcolor)
}

.avtor_inform {
    font-size: 13px;
    color: #444
}

.material_informat:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 10px solid var(--background);
    position: absolute;
    top: -10px;
    left: 40px
}

.tab-nav,.tab-pane.active {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.emoji-panel {
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    margin: 5px 0 0
}

.tab-nav {
    background: #f6f6f6;
    border-bottom: 1px solid #eee;
    border-radius: 8px;
}

.tab-link {
    padding: 0 10px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    color: red;
}

.tab-link.active {
    background: #fff;
    border: 1px solid #eee;
    border-bottom: none;
    margin-bottom: -1px
}

.tab-link img {
    height: 18px
}

.tab-body {
    background: #fff;
    border-radius: 6px
}

.tab-pane {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 128px;
    overflow: hidden;
    overflow: overlay;
}

.emoji-item {
    cursor: pointer;
    border: 0;
    padding: 2px
}

.emoji-item img {
    /* height: 22px; */
    border: 0
}

.emoji-item:hover img {
    transform: scale(1.2)
}

.smbox {
    padding: 10px;
    max-height: 110px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-top: 3px
}

.flag-wrapper09,.h_npimg {
    overflow: hidden
}

.helloday {
    justify-content: center;
    line-height: 23px;
    text-align: center;
    padding: 70px 0 10px;
    flex-direction: column
}

.helloday img {
    width: 50px;
    vertical-align: middle;
    margin-right: 10px
}

.timetop {
    font-size: 11px;
    color: var(--txtcolor);
    border-top: 1px solid var(--line);
    padding: 3px 40px
}

.h_npr,.h_nptitle {
    font-size: 13px;
    color: #fff
}

.usAVA {
    text-align: center;
    margin-bottom: -120px;
    z-index: 999999
}

.usAVA img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    background: var(--gradient);
    border-radius: 50%;
    padding: 6px
}

.h_newpm,.h_npimg {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px
}

#one_pm {
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 99999
}

#hnp_sound {
    position: absolute;
    top: -1000px;
    left: -1000px
}

.h_newpm {
    width: 350px;
    height: 110px;
    margin-bottom: 20px;
    background: rgba(0,0,0,.7);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 10px #000;
    border-radius: 5px
}

.h_del,.h_nover,.h_npl,.h_npr {
    position: absolute
}

.h_newpm #hnp_author {
    color: #a4dcfa;
    font-weight: 700;
    text-decoration: none
}

.h_newpm #hnp_author:hover {
    color: #a4dcfa;
    text-decoration: underline
}

.h_npin {
    padding: 10px 14px 14px
}

.h_nptitle {
    font-weight: 700;
    padding-bottom: 12px
}

.h_npimg {
    width: 57px;
    height: 57px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    border-radius: 5px
}

.h_npimg img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.h_npl {
    left: 13px;
    top: 38px;
    z-index: 3;
    width: 70px
}

.h_npr {
    left: 84px;
    top: 38px;
    z-index: 3;
    padding-right: 14px
}

.h_npr #hnp_text,.h_npr #hnp_text:hover {
    display: block;
    text-decoration: none;
    color: #fff
}

.h_newpm:hover .h_del,[data-theme=dark] #toggle-darkmod .i__sun {
    display: inline-block
}

.h_del {
    display: none;
    top: 12px;
    right: 12px;
    z-index: 3;
    cursor: pointer;
    background: url('https://yraaa.ru/634294/del023.png');
    width: 18px;
    height: 18px
}

.h_del:hover {
    background-position: 0 18px
}

.h_nover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.gKay {
    display: inline-flex;
    gap: 8px;
    border: 2px solid #f1f1f1;
    background: #fff;
    padding: 0 10px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    width: max-content;
    color: #444
}

.flag-slider img,.flag-wrapper09 {
    width: 25px;
    height: 16px
}

.flag-slider {
    display: flex;
    width: 50px;
    transition: transform .3s
}

.cursor-pulse {
    position: fixed;
    width: 10px;
    height: 10px;
    border: 2px solid #4f007f;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    animation: .6s linear ripple;
    z-index: 10000
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1
    }

    100% {
        width: 100px;
        height: 100px;
        opacity: 0
    }
}

.clickable,a,button,input[type=button],input[type=submit] {
    cursor: url('/images/click.png'),pointer!important
}

a:hover {
    cursor: url('/images/cursor-hover.png'),pointer
}

#pagesBlock2,.csTop {
    background-color: var(--background);
    border-radius: 10px;
    padding: 10px 10px 6px
}

.ucoz-music-wrapper {
    background: var(--background);
    color: var(--txtcolor);
    padding: 5px;
    border-radius: 12px;
    font-family: 'Segoe UI',Roboto,sans-serif;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5)
}

.ucoz-music-wrapper img {
    max-height: 158px;
    border-radius: 50%;
}

.TopButton a,.dropdown button,.dropdown-content,.dropdown-content a:hover,.music-list li,.music-list li:hover {
    background: linear-gradient(135deg,#6c5ce7,#a29bfe)
}

#main-player {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
    background: var(--background)
}

.music-list {
    padding: 0;
    margin: 0;
    max-height: 510px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ffcc var(--background);
    color: #fff;
}

.music-list li {
    padding: 12px 15px;
    margin-bottom: 5px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    transition: .2s
}

.music-list li.active {
    background: #282828;
    color: #0fc;
    font-weight: 700
}

.music-list li span.track-num {
    margin-right: 10px;
    opacity: .5;
    font-size: 11px
}

.music-list::-webkit-scrollbar {
    width: 4px
}

.music-list::-webkit-scrollbar-track {
    background: #111
}

.music-list::-webkit-scrollbar-thumb {
    background: #0fc;
    border-radius: 10px
}

.music-list li.show,.music-tabs {
    display: flex
}

.music-tabs {
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 25px
}

.tab-btn {
    flex: 1;
    padding: 10px 5px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #888;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: .3s
}

.tab-btn:hover {
    background: rgba(255,255,255,.12);
    color: #fff
}

.tab-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0,123,255,.3)
}

.music-list li {
    display: none
}

.color-box,.style-btn {
    cursor: pointer;
    transition: .2s
}

.chat-customizer {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 10px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
    justify-content: space-between
}

.chat-section,.color-box {
    align-items: center;
    display: flex
}

.chat-section {
    flex-wrap: wrap;
    gap: 8px;
}

.colors {
    margin-bottom: 14px
}

.chat-section .label {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    min-width: 45px
}

.color-box {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 2px solid transparent;
    justify-content: center;
    box-shadow: inset 0 0 2px rgba(0,0,0,.1)
}

.color-box.active {
    border-color: #333;
    transform: scale(1.15);
    box-shadow: 0 2px 5px rgba(0,0,0,.2)
}

.default-color {
    font-size: 16px;
    font-weight: 700;
    color: #444;
    line-height: 1
}

@media screen and (max-width: 767px) {
    .chat-customizer {
        display: flex;
        flex-direction: column-reverse;
    }

    .chat-section.colors .label , .chat-section.styles .label {
        flex-basis: 100%;
        margin-bottom: 8px;
        font-weight: bold;
        text-align: left;
    }

    .chat-section {
        flex-wrap: wrap;
        gap: 4px;
    }
}

.style-btn {
    height: 22px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Times New Roman",Times,serif;
    font-size: 14px;
    color: #333;
    padding: 0 8px
}

.style-btn:hover {
    background: #f0f0f0;
    color: #444
}

.style-btn.active {
    background: #3d464d;
    color: #fff;
    border-color: #3d464d;
    box-shadow: 0 2px 4px rgba(0,0,0,.2)
}

.sticker-trigger-btn,.sticker-trigger-btn:hover {
    background: linear-gradient(44deg,#6a006a 10%,indigo 50%,#00bfff 90%)
}

.chat-avatar img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    transition: transform .3s
}

#toggle-darkmod:hover,.chat-avatar img:hover {
    transform: scale(1.1)
}

#mchatIfm2 {
    height: 450px!important
}

.sticker-container {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.sticker-trigger-btn {
    color: #fff;
    border: none;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    transition: .3s;
    height: 25px
}

.sticker-box {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 280px;
    background: rgba(255,255,255,.2);
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    z-index: 9999;
    padding: 10px
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px
}

.sticker-grid img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
    transition: transform .2s
}

.sticker-grid img:hover {
    transform: scale(1.15);
    background: rgba(0,0,0,.05)
}

.sticker-grid::-webkit-scrollbar {
    width: 5px
}

.sticker-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px
}

.dess {
    display: flex;
    gap: 5px;
}

.photo-block,.photo-eblock {
    background: var(--background)!important
}

#toggle-darkmod {
    background: 0 0;
    border: none;
    color: var(--background);
    background: var(--txtcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: transform .2s
}

.TopButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

.TopButton a {
    padding: 4px 10px;
    border-radius: 50px;
    margin: 3px;
    color: #eef0f3!important;
    position: relative;
    transition: .3s
}

.TopButton a:hover {
    transform: translateY(-2px);
    filter: brightness(1.1)
}

.TopButton span {
    font: 13px Georgia,sans-serif;
    top: -10px;
    position: absolute;
    right: 3px;
    color: #4caf50
}

#StickerAdd {
    padding: 4px 8px 2px;
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
    background-image: linear-gradient(#d71b67,#7909a9);
    border: none;
    color: #fff
}

.dropdown {
    float: left;
    overflow: hidden
}

.dropdown .dropbtn {
    border: none;
    outline: 0;
    color: #fff;
    padding: 4px 10px;
    background-color: inherit;
    background: linear-gradient(135deg,#6c5ce7,#a29bfe);
    box-shadow: none;
    border-radius: 50px;
    margin: 3px;
    height: 31px
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 4px 4px 7px 0 #000;
    z-index: 9;
    border-radius: 4px
}

.dropdown-content i {
    padding-right: 8px;
    color: #fff;
    text-shadow: 1px 1px 1px #000
}

.dropdown-content a {
    border-radius: 0;
    float: none;
    color: #dadde1;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    background: #fff0;
    border-bottom: 1px solid #cccccc1c;
    transition: .3s
}

.dropdown-content a:hover {
    transform: scale(1.1)!important;
    box-shadow: 0 0 15px #f0f;
    border-radius: 50px
}

.dropdown:hover .dropdown-content {
    display: block
}

.form,.swchItem {
    background: #fff
}

.user-list {
    border: none!important;
    display: block;
    width: 100%!important;
    color: var(--txtcolor)
}

.user-list tbody {
    display: grid;
    gap: 20px;
    width: 100%
}

.user-list tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--layer-gray-150);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.05);
    transition: transform .3s;
    position: relative;
    color: #444
}

.user-list tr:hover {
    transform: translateY(-5px)
}

.uTd {
    display: block!important;
    border: none!important;
    padding: 5px 0!important;
    width: 100%;
    text-align: center;
    color: #444
}

.user_avatar img {
    width: 80px!important;
    height: 80px!important;
    border-radius: 50%;
    object-fit: cover;
    margin: 10px 0
}

.uTd:empty::before {
    content: url('https://via.placeholder.com/80?text=No+Ava');
    display: block;
    opacity: .5
}

.uTd a[href*="/index/8-"] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 5px
}

.uTd img[name=rankimg] {
    display: block;
    margin: 10px auto 0!important;
    max-height: 20px
}

div[style*="float:right"] {
    position: absolute;
    top: 15px;
    right: 15px;
    float: none!important
}

.uPM img {
    filter: hue-rotate(180deg);
    margin-left: 5px
}

.form {
    padding: 10px;
    border-radius: 10px;
    margin-top: 20px;
}

.pagination__pages {
    margin-top: 30px
}

.user-list tr:first-child {
    display: none!important
}

.video-container {
    background: var(--gradient);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    transition: transform .4s;
    will-change: transform
}

.video-container:hover video {
    transform: scale(1.1)
}

.flex-justify-between {
    background: var(--gradient);
    color: #fff;
}
nav.page a { color: #fff;} 
 
.avatars-menu a { color: #fff;line-height:28px;font-family: "Playwrite IE", cursive;}
.mobcats {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobcats {
        display: block;
    }
}
 .mobcatst{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--background);
    box-shadow: var(--bsh-2);
    }
    .mobcatst li {
    border-bottom: 1px solid var(--line);
    padding: 10px 20px 5px;
}
    .mobcatst li i {
    color: var(--accent);
    padding-right: 10px;
    padding-bottom: 5px;
}
.mobcatst li:hover {
    background: var(--background);
    transform: scale(1)!important;
    box-shadow: 0 0 15px #f0f;
    border-radius: 50px
}
.mobcatst li:last-child{
 border-bottom: 0px !important;
}

 .user-stat {margin:15px 0;}
 .unlock-modal {
 position: relative;
  background: var(--background);
 backdrop-filter: blur(15px);
 border-radius: 24px;
 padding: 40px 30px;
 color: var(--txtcolor);
 box-shadow: 0 20px 50px rgba(0,0,0,0.5);
 margin: 20px auto;
}

.close-btn {
 position: absolute;
 top: 15px;
 right: 20px;
 background: none;
 border: none;
 color: #fff;
 font-size: 28px;
 cursor: pointer;
 opacity: 0.5;
 transition: 0.3s;
}

.close-btn:hover {
 opacity: 1;
 transform: rotate(90deg);
}


.modal-grid {
 display: flex;
 flex-direction: row;
 gap: 50px;
 align-items: center;
}

.modal-left, .modal-right {
 flex: 1;text-align: center;
}


@media (max-width: 600px) {
 .modal-grid {
 flex-direction: column;
 text-align: center;
 }
 
 .features-list {
 text-align: left;
 }
}

.lock-icon {
 font-size: 40px;
 margin-bottom: 10px;
}

.progress-container {
 width: 100%;
 height: 8px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 10px;
 margin: 15px 0;
}

.progress-bar {
 height: 100%;
 background: linear-gradient(90deg, #6366f1, #a855f7);
 border-radius: 10px;
}

.features-list {
 list-style: none;
 padding: 0;
}

.features-list li {
 padding: 12px 0;
 border-bottom: 1px solid var(--line);
 display: flex;
 align-items: center;
 font-size: 0.9rem;
}

.action-btn {
 width: 100%;
 padding: 12px;
 margin-top: 15px;
 border-radius: 10px;
 border: none;
 background: rgba(255,255,255,0.1);
 color: #666;
}
.myWinCont {}
.myWinCont img {max-height:80px;border:1px solid #f2f2f2;padding:4px;margin:2px;border-radius:3px;transition: transform .2s;}
.myWinCont img:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,.1);}


 
.cont {
    margin: 5px auto;
    width: 100%;
    position: relative;
}
.cont span {
    position: absolute;
    left: -10px;
}
.cont span img {
    width: 50px;
    height: auto;
    display: block;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgb(0 0 0 / 45%);
}
.infoBox {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 8px 20px 8px 55px;
    overflow: hidden;
    background: linear-gradient(135deg, #d70054 0%, #2a5298 100%);
    color: #fff;
    box-shadow: rgb(0 0 0 / 15%) 0 1px 3px, rgb(0 0 0 / 13%) 0 1px 2px, rgb(0 0 0 / 13%) 0 20px 30px -10px;
    margin-bottom: 8px;
}

 

 
.cont:nth-of-type(2) .infoBox {
    background: linear-gradient(135deg, #ff0844 0%, #5c9ffa 100%);
    color: #fff;
}

 
.infoBox .label-text {
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
    margin-right: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2; 
}

 
.marquee-wrapper {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
}

 .hbd {
        display: inline-block;
        margin-right: 30px;
        background: linear-gradient(to right, #6a006a, indigo, #00bfff);
        border-radius: 50px;
        padding: 2px 8px 2px 8px;
      list-style: none;
    white-space: nowrap;
    animation: scroll-left 0s linear infinite;
    }
 .hbd span {position:inherit;padding-left:4px;}
.nus {
    display: flex;
    list-style: none;
    white-space: nowrap;
    animation: scroll-left 25s linear infinite;
}

.nus li, .hbd li {
    display: inline-block;
    margin-right: 30px;
    background: linear-gradient(to right, #6a006a, indigo, #00bfff);
    border-radius: 50px;
    padding:2px 8px 2px 2px;
}

.nus li a, .hbd li a {
    color: #fdfdfd;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.nus li a:hover, .hbd li a:hover {
    opacity: 0.8;
}

 
@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

 
@media (max-width: 768px) {
    .infoBox {
        flex-direction: column; 
        align-items: flex-start;
        padding: 10px 15px;
    }

    .infoBox .label-text {
        margin-bottom: 8px;
        font-size: 12px; padding:2px 6px 2px 36px;
    }

    .marquee-wrapper {
        width: 100%;
    }

    .nus li, .hbd li {
        margin-right: 20px;
        width: max-content;
    }
    .cont span {
    left: -10px; top:-10px;
}
.cont span img {
    width: 40px;
}
}