/* ENGINE */

#loading-layer {
    width: 100%;
    height: 100%;
    background-size: 200px 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../../templates/Live/images/loading-layer.svg');
}

#loading-layer > * {
    display: none !important;
}


/* GLOBAL */

html {
    min-height: 100dvh
}

.body {
    min-width: 640px;
    min-height: 100dvh;
}


body.scroll-lock {
    overflow: hidden
}

.grid {
    display: grid;
}

.grid-c {
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-areas:
            "header"
            "container"
            "footer"
}


/* AREAS */

.header {
    grid-area: header
}

.container {
    grid-area: container
}

.footer {
    grid-area: footer;
}

/* MORE */


.footer hr {
    border-color: inherit;
    opacity: .1;
}


.container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: calc(100dvh - 84px);
}

.container,
.width-limit {
    width: 600px;
    max-width: 600px;
}

.main {
    flex: 0 1 600px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    overflow: hidden;
}

.aside {
    flex: 0 0 400px;
}

#content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*align-items: stretch;*/
    gap: 20px;
}


.header, .footer {
    width: 100%;
}

.blocky {
    padding: 20px;
}

.positive:hover,
.negative:hover {
    opacity: .8;
}

.btn,
button,
.button,
input[type="button"],
input[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 2em;
    text-align: center;
    position: relative;
    text-transform: lowercase;
    overflow: hidden;
}

.buttons {
    display: flex;
    gap: 10px;
}

.button-large {
    padding: .5em 2em !important;
    font-size: 1.25rem !important;
}

.button-xlarge {
    padding: .5em 2em !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
}

.button-self {
    align-self: flex-start;
}


h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    line-height: inherit;
}

[data-move*="to-top"] {
    order: -1
}

form {
    width: 100%;
    padding: 0;
    margin: 0;
}

.wide {
    width: 100%
}

span.title {
    display: flex;
    line-height: 1.3em;
}


/* HEADER */

.header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.header hr {
    opacity: 1;
}

.header .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px 20px;
}

.header .row.line {
    padding: 0
}

.header .row-c {
    padding: 0 20px
}


.header .logo {
    flex: 0 0 200px;
    display: flex;
    overflow: hidden;
    height: 30px;
    background-image: url("/static/images/logo/vonline.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

.header .logo:hover {
    opacity: 0.8;
}


.header .header-nav {
    flex: 1 0 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.header-nav > .icons .icon {
    cursor: pointer;
}


/* MENU MAIN */

.menu-main {
    flex: 1 0 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 25px;
    overflow: hidden;
}

.menu-main > .item {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    /*border-bottom: 3px solid transparent;*/
}

.menu-main > .item .link {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: lowercase;
    font-weight: bold;
    padding: 10px 0;
    transition: all .2s;
    overflow: hidden;
}

.menu-main > .item .link img {
    display: flex;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

.menu-main > .item .link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    transition: width 0.2s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.menu-main > .item.exclude {
    flex: 0 0 auto;
}

.menu-main > .item:not(.exclude) .link.active::after,
.menu-main > .item:hover:not(.exclude) .link::after {
    width: 100%;
    transition: width 0.2s;
}

.menu-main.no-after > .item .link.active:not(:hover)::after {
    width: 0;
}

.age-lang {
    display: flex;
    flex-direction: row;
}

.age-lang .age {
    font-weight: bold;
}

.age-lang .lang-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
}

.age-lang .age,
.age-lang .lang-button,
.age-lang .home-link {
    padding: 1px 5px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.age-lang .home-link {

}

.age-lang .home-link,
.age-lang .lang-button {

}

.age-lang .lang-button:hover {
    opacity: .8;
}


/* FOOTER */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    /*border-top: 1px solid whitesmoke;*/
}

.footer .row {
    display: flex;
    gap: 20px;
    overflow: hidden;
    justify-content: space-between;
}

.footer .column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    overflow: hidden;
}

.footer .links {
    display: flex;
    gap: 5px 20px;
    white-space: nowrap;
}

.footer .links .active {
    text-decoration: underline;
}

.footer .row-a .links {
    flex-direction: column;
    align-items: flex-end;
}

.footer .row-b .links {
    flex-direction: row;
    flex-wrap: wrap;
}

.footer .logo {
    width: 100%;
    height: 140px;
    background-image: url("/static/images/logo/vonline.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    opacity: .5;
}


.footer a:hover {
    text-decoration: underline;
    color: inherit !important;
}


/* SHORTSTORY */


.shortstory {
    display: flex;
    overflow: hidden;
    position: relative;
}

.shortstory .title {
    align-self: flex-start;
    font-weight: bold;
}

.shortstory .text {
    overflow: hidden;
    position: relative;
}


.shortstory .category .sep {
    display: none
}


/* SHORTSTORY A */

.shortstory-a {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 0 0 calc(50% - 10px);
    padding: 0 0 10px 0;
}

.shortstory-a > .row {
    padding: 0 20px
}

.shortstory-a .story {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    flex: 1 0 auto
}

.shortstory-a .link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.shortstory-a .link:hover .image {
    opacity: .8;
}


.shortstory-a .title,
.shortstory-a .text {
    padding: 0 20px
}

.shortstory-a .text {
    padding-bottom: 10px
}

/* SHORTSTORY AC */

.shortstory-ac {

}

.shortstory-ac .link {
    padding-top: 20px
}

/* FULL CONTENT */

.fullstory {
    flex: 1 0 100%;
    overflow: hidden;
    gap: 20px;
    justify-content: flex-start;
    align-items: stretch;
}


/* CONTENTS */

.hmenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
}

.hmenu .h-background {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("/static/images/logo/e.svg");
    background-repeat: no-repeat;
    background-position: calc(100% + 40px) calc(100% + 20px);
    background-size: 80%;
    z-index: 0;
    opacity: .1;
}


.hmenu .h-menu {
    display: flex;
    flex-direction: column;
    z-index: 1;
}


.hmenu .h-menu > .item .item {
    padding-left: 20px
}

/* FULLSTORY */

.fullstory-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.fullstory-poll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

/* FS HEADER */

.fullstory-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    position: relative;
}


/* FULL STORY */

.fullstory-text {
    width: 100%;
}


.fullstory-text h1,
.fullstory-text h2,
.fullstory-text h3,
.fullstory-text h4,
.fullstory-text h5,
.fullstory-text h6 {
    margin-top: 2.5rem
}

.fullstory-text h1 + h2,
.fullstory-text h2 + h3,
.fullstory-text h3 + h4,
.fullstory-text h4 + h5,
.fullstory-text h5 + h6,
.fullstory-text h6 + h6 {
    margin-top: .64rem /* все верно!!! */
}

.fullstory-text .noncontenteditable[style*="box-shadow"] {
    box-shadow: none !important;
    border: none !important;
}

.fullstory-text a:not(.attachment):not(.highslide):not(.pages a) {
    padding: 0 5px;
}

.fullstory-text a[rel~="external"]:after {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f35d';
    display: inline;
    padding-left: .5em;
    font-size: .875em;
}

.fullstory-text a[rel~="external"].button.button-xlarge {
    justify-content: space-between;
    padding: .5em 1em !important
}


.fullstory-text iframe {
    width: 100%;
    height: 360px;
}


.fullstory-text .image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 1.5em 0 0;
    overflow: hidden;
    width: 100%;
}

.fullstory-text .image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 360px;
}

.fullstory-text .image-container.thumb-image {
    width: 30%;
    height: auto;
}

.fullstory-text .image-container.thumb-image.left {
    float: left;
    margin: 0 1.5em 0 0;
}

.fullstory-text .image-container.thumb-image.right {
    float: right;
    margin: 0 0 0 1.5em;
}

.fullstory-text .image-container.medium-image,
.fullstory-text .image-container.original-image {
    width: 100%;
}

.fullstory-text .image-container.medium-image.left img,
.fullstory-text .image-container.original-image.left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fullstory-text .image-container.medium-image.right img,
.fullstory-text .image-container.original-image.right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: none;
}

.fullstory-text > * {
    margin-top: 1rem
}

.fullstory-text > p:empty {
    display: none
}

.fullstory-text > p:first-child .image-container {
    margin-top: 0
}

.fullstory-text > .auto-gallery {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden;
}

.fullstory-text > .auto-gallery .item-auto-gallery {
    display: flex;
    flex-direction: column;
    flex: 1 1 40%;
    overflow: hidden;
}

.fullstory-text > .auto-gallery .image-container {
    margin: 0;
    padding: 0;
}

.fullstory-text > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.fullstory-text > div > div {
    margin: 0
}

.fullstory-text > *:first-child {
    margin-top: 0
}

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


.fullstory-text .native-emoji {
    font-size: 1em;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols';
}


.fullstory-text .image-desc {
    margin: .5em 0 0 0 !important;
    display: flex;
    font-style: italic;
}

.fullstory-text ul:not([class]),
.fullstory-text ol:not([class]) {
    margin-top: 1em;
    padding-left: 20px
}

.fullstory-text ul:not([style]) {
    /*list-style: none*/
}

.fullstory-text > ul:not([class]):not(.xfieldimagegallery) > li:first-child {
    margin-top: 0
}

.fullstory-text > ul:not(.xfieldimagegallery) > li {
    margin-top: .25em
}

.fullstory-text ul:not([style]):not(.xfieldimagegallery) li:before {
    /*font-family: FontAwesome;*/
    /*font-weight: 900;*/
    /*content: '\f105';*/
    /*padding-right: .5em*/
}

.fullstory-text ul.stats li:before {
    content: '\f200' !important;
}

/* OL LI */

.fullstory-text ol:not([class]) li > ol {
    margin-top: 0
}

.fullstory-text ol.counter {
    counter-reset: count;
    list-style-type: none;
}

.fullstory-text ol.counter ol {
    counter-reset: count;
    list-style-type: none;
    margin: 0
}

.fullstory-text ol.counter > li {
    margin-top: 1em
}

.fullstory-text ol.counter > li:first-child {
    margin-top: 0
}

.fullstory-text ol.counter,
.fullstory-text ol.counter > li,
.fullstory-text ol.counter > li > ol {
    padding-left: 0
}

.fullstory-text ol.counter li:before {
    counter-increment: count;
    content: counters(count, ".") ". ";
}


/* QUOTE */

.fullstory-text .quote {
    display: flex;
    flex-direction: column;
    padding: 20px 0 20px 48px;
    position: relative;
    border-top: 3px solid;
    border-bottom: 3px solid;
}

.fullstory-text .quote:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f10d';
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 2em;
}

.fullstory-text .quote p:not(:first-child) {
    margin-top: 1em
}

/* HIDDEN */

.fullstory-text .quote.dlehidden {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 68px;
    position: relative;
    border: 3px solid;
}

.fullstory-text .quote.dlehidden:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f071';
    font-size: 2em;
    padding-left: 20px;
}


/* NEXT */

.next-url {
    padding: 20px;
}


/* CAT HEADER */

.cat-header {
    width: 100%;
    flex: 1 0 100%;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

.cat-header.blocky {
    padding-left: 40px;
}

.cat-header h1 {
    display: flex;
    align-items: center;
}

.cat-header h1 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-header .info {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    overflow: hidden;
    gap: 10px;
}

.cat-header .sort {
    flex: 0 0 auto;
}

.cat-header .description {

}


/* SPEEDBAR */

.speedbar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.speedbar a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.speedbar a:hover {

}

/* INFO */

.info-message {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.info-message-text ul {
    padding-left: 20px;
}

.info-message-text a {
    font-weight: bold;
}

.info-message.error {
    background-color: pink;
}

.info-message.warning {
    background-color: lightgoldenrodyellow;
}

.info-message.success {
    background-color: #d9efd9;
}

.info-message.normal {
    background-color: whitesmoke;
}

.info-img {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}


/* COMMON BLOCKS */

.common {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}


.common > h1,
.common > h2,
.common > h3,
.common > h4 {
    align-self: flex-start;
}


.common h1 a,
.common h2 a,
.common h3 a,
.common h4 a {
    line-height: 1.3em;
}

.common > .items {
    display: flex;
    flex-wrap: wrap;
    /*overflow: hidden;*/
}

.common.blocky > .items > * {
    box-shadow: none !important;
}

/* MAIN MINI BLOCK */

.mini-block {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 calc(50% - 10px);
    padding: 20px;
    gap: 20px
}

.mini-block .image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 100%;
}

.mini-block .image img {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.mini-block .summary {
    flex: 1 0 100%;
    line-height: 1.3em;
    text-align: center;
}


.mini-block.horizontal {
    flex-wrap: nowrap;
    align-items: center;
}

.mini-block.horizontal .image {
    flex: 0 0 80px;
}

.mini-block.horizontal .summary {
    text-align: left;
    flex: 1 1 100%;
}


.mini-block.horizontal .image img {
    height: 80px
}


/* independent INFO */

.common-info {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    /*height: 290px;*/
    overflow: hidden;
}

.common-info .logo {
    display: flex;
    width: 280px;
    height: 62px;
    background-image: url("/static/images/logo/vonline.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.common-info .summary {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;
    justify-content: space-between;
    z-index: 1;
    gap: 20px
}

.common-info .description {

}

.common-info .description p {
    margin-top: 1em;
}

.common-info .description p:first-child {
    margin-top: 0;
}

.common-info .image {
    display: flex;
    flex: 0 1 50%;
    position: relative;
}

.common-info .image .logo {
    width: 280px;
    height: 280px;
    position: absolute;
    top: -20%;
    right: -26%;
    background-image: url('../images/logo/e.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/*OFFLINE*/

.page-offline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    max-width: 400px;
    min-height: 100vh;
    margin: auto;
}

.page-offline .image {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.page-offline .image img {
    width: 250px;
    object-fit: contain;
}

.page-offline h3 {
    text-align: center;
}

.page-offline .text {
    text-align: center;
}

/* OL COUNTER */

ol.counter {
    counter-reset: count;
    list-style-type: none;
}

ol.counter ol {
    counter-reset: count;
    list-style-type: none;
    margin: 0
}

ol.counter > li {
    margin-top: 1em
}

ol.counter > li:first-child {
    margin-top: 0
}

ol.counter,
ol.counter > li,
ol.counter > li > ol {
    padding-left: 0
}

ol.counter li:before {
    counter-increment: count;
    content: counters(count, ".") ". ";
}

/* WARNING MESSAGE */


.warning-message {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    padding: 5px 20px;
    text-align: center;
}

/* ----- CSS COMMON ----- */

html {
    font-size: 16px;
}

.fs-xsmall {
    font-size: .75rem !important;
}

.fs-small,
select,
.shortstory .text,
.warning-message,
.main-chat .link .short,
.notice.nofull {
    font-size: 0.875rem !important;
}

.fs-medium {
    font-size: 1rem !important;
}

.fs-xmedium,
.next-url,
.hmenu,
.shortstory .title,
.notice.full {
    font-size: 1.25rem !important;
}

.fs-large,
.hmenu .title,
.mini-block .summary,
.main-chat .link .title,
.menu-container .link .title,
.menu-container .main-chat .link .icon {
    font-size: 1.5rem !important;
}

.fs-xlarge {
    font-size: 1.75rem !important;
}


.fs-xxlarge,
.lang .item,
.main-chat .link .icon,
.main-chat h1 {
    font-size: 2rem !important;
}


/* BORDER RADIUS */


.blocky,
.shortstory,
button,
.button,
input[type="button"],
input[type="submit"],
.hmenu,
.fullstory-text iframe,
.fullstory-text .image-container,
.next-url,
.info-message,
.info-img,
.mini-block,
.menu-main > a {
    border-radius: 10px;
}

.fullstory-text a:not(.attachment):not(.highslide):not(.pages a):not(.button) {
    border-radius: 3px;
}

.fullstory-content {
    border-radius: 0 0 10px 10px;
}

/* ----- CSS COLORS ----- */

/*
color palette
https://colorscheme.ru/#3y11TkWRsw0w0
https://colorscheme.ru/#00x1TK-hWpBpB  gray


*/

/* BLACK WHITE */

body {
    color: black
}

body,
.hmenu,
.fullstory-text .image-container,
.next-url {
    background-color: whitesmoke;
}

.body.main-page {
    /*background-color: white; */
}

hr,
.text_spoiler,
table thead,
.main-chat .link,
.header hr {
    border-color: whitesmoke;
}

.lang,
#loading-layer,
.notice-wrapper {
    background-color: rgba(0, 0, 0, 0.9);
    color: black;
}

a,
.info-message,
.menu-main > a {
    color: black;
}

.blocky,
.shortstory,
.mini-block,
.menu-main > a,
.main-chat .link {
    background-color: white;
}

/* header font color */

.header,
.header .row,
.menu-container {
    background-color: white;
}

.header {
    color: black;
}

.footer {
    background-color: white;
    color: black
}


/* other white color */

.any-chat .buttons.fixed > .icon,
.any-chat .buttons.static > .icon,
.warning-message,
.notice.full {
    color: white;
}

.lang .item,
.lang a:hover,
.lang a.active {
    color: white !important;
}


/* MAIN COLOR */

.lang a:hover,
.lang a.active {
    background-color: #59A5E4;
}

.color-main {
    color: #59A5E4;
}

/* MAIN OTHER */

.age-lang .home-link,
.age-lang .lang-button,
.notice.nofull .button.agree {
    background-color: #E7F6FF;
    color: #1D5E94 !important;
}

.notice.full .button.agree {
    background-color: #1D5E94;
}

/*  EXTRA */

.menu-main .link::after {
    background-color: #1D5E94 !important;
    color: white
}

.age-lang .age,
.color-extra {
    color: #A66C1D;
}

.age-lang .age {
    background: #FFD8A3;
}


/* EXTRA HIGHTLIGHT LINKS MAIN*/

.fullstory-text a:hover:not(.highslide):not(.attachment),
.shortstory a:hover:not(* .reveal-button),
a:hover,
.menu-main > a:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover:not(.dleplyrplayer *),
.menu-main > .item .link.active {
    color: #1D5E94 !important;
}

.button,
input[type="button"],
input[type="submit"],
button,
.fullstory-text a:not(.attachment):not(.highslide):not(.pages a) {
    background-color: rgba(29, 94, 148, 0.1); /* opacity 10% */
    color: black;
}

/* GRAY */

.speedbar,
.shortstory-a .text,
.fullstory-text .image-container,
.fullstory-text .image-desc {
    color: gray;
}

/* CHAT */

.preloader,
.any-chat .buttons.fixed > .icon,
.any-chat .buttons.static > .icon {
    background-color: #2B2B2B;
}

.lang .item,
.notice.full,
.any-chat .buttons.static {
    color: whitesmoke;
    background-color: #1E1E1E;
}

.notice.full .button {
    color: whitesmoke !important;
    background-color: #323232;
}


/* DARK */

body.dark {
    background-color: #2B2B2B;
}

.dark .logo {
    background-image: url("/static/images/logo/vonline-dark.svg");
}

.dark .header hr,
.dark .main-chat .link {
    border-color: #323232
}

.dark .header a,
.dark .header .menu-main a {
    color: whitesmoke;
}

.dark .menu-container,
.dark .main-chat .link,
.dark .header > .row {
    color: whitesmoke;
    background-color: #1F1F1F;
}

.dark .header .menu-main > .item .link.active,
.dark .header .menu-main a:hover {
    color: #A1CDF2 !important;
}

.dark .age-lang .lang-button {
    color: whitesmoke !important;
    background-color: #5D88AB !important;
}

.dark .age-lang .age {
    color: whitesmoke !important;
    background-color: #A66C1D !important;
}

.dark .menu-main .link::after,
.dark .header .menu-main > .item:hover:not(.exclude) .link::after {
    background-color: #A1CDF2 !important;
}

/* ----- CSS SITE ----- */

body.main-page {
    background-image: url("/static/images/backgrounds/balls.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* PWA */

.pwa-noactive {

}

.pwa-noactive,
.pwa-noactive:hover {
    cursor: default;
    color: gray !important;
}

/* LANG */

.lang {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lang {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1100
}

.lang .list {
    width: 500px;
    gap: 10px
}

.lang .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('/static/images/close.svg') no-repeat center;
    background-size: 100% 100%
}

.lang .close:hover {
    opacity: .85;
    cursor: pointer
}

.lang .item {
    flex: .5 0 auto;
    font-weight: normal;
    padding: 20px 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    border-radius: 10px
}

.lang a:hover,
.lang a.active {

}

/* MAIN PAGE */

.main-page .main {
    /*min-height: calc(100dvh - 44px)*/
}

.main-page .container {
    min-height: calc(100vh - 84px)
}


.main-chat {
}

.main-chat .link {
    flex: 1 0 100%;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top-width: 1px;
    border-top-style: solid;
}

.main-chat .link:first-child {
    border-top: none;
}


.main-chat .link .image {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.main-chat .link .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.main-chat .link .text {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    gap: 5px
}

.main-chat .link .title {

}

.main-chat .link .short {
    max-width: 60%;
}

.main-chat .link .icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

/* PRELOADER */

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    transition: 0.5s !important
}

.preloader .preloader-image {
    width: 180px;
    height: 180px;
    overflow: hidden
}

.preloader .preloader-image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.preloader-hide {
    opacity: 0
}

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

@keyframes pulse {
    0% {
        width: 180px;
        height: 180px
    }
    20% {
        width: 250px;
        height: 250px
    }
    100% {
        width: 180px;
        height: 180px
    }
}

/* NOTICE */

.notice {
    display: flex;
    flex-direction: column;
    line-height: 1.5em;
}

.notice .content {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* NOTICE NOFULL */

.notice.nofull {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 360px;
    overflow: hidden;
    z-index: 110;
    box-shadow: 0 0 10px whitesmoke;
    gap: 20px;
}

.notice.nofull .button.agree {
    font-weight: bold;
}


/* NOTICE FULL  */

.notice-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 120;
    overflow: hidden;
}

.notice.full {
    gap: 20px;
    position: static;
    width: 450px;
}

.notice.full hr {
    opacity: .05;
}

.notice.full .buttons {
    gap: 20px;
}