@font-face {
    font-family: "Francker";
    src: url(/fonts/francker/FranckerCYR-Black.otf) format('opentype'), url('/fonts/francker/FranckerCYRBlack.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Francker";
    src: url('/fonts/francker/FranckerCYR-Bold.otf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Francker";
    src: url('/fonts/francker/FranckerCYR-Semibold.otf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Francker";
    src: url('/fonts/francker/FranckerCYR-Medium.otf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Francker";
    src: url('/fonts/francker/FranckerCYR-Regular.otf');
    font-weight: 400;
    font-style: normal;
}

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

@font-face {
    font-family: "Rubik";
    src: url('/fonts/rubik/Rubik-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/*@font-face {
    font-family: "Rubik";
    src: url('/fonts/rubik/Rubik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}*/

@font-face {
    font-family: "Rubik";
    src: url('/fonts/rubik/Rubik-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/*@font-face {
    font-family: "Roboto";
    src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: "Roboto";
    src: url('/fonts/roboto/Roboto-Italic.ttf') format('truetype');
    font-style: italic;
}*/

/**/

/*
@font-face {
    font-family: "Ubuntu";
    src: url('/fonts/ubuntu/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "Ubuntu";
    src: url('/fonts/ubuntu/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: "Ubuntu";
    src: url('/fonts/ubuntu/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: "Ubuntu";
    src: url('/fonts/ubuntu/Ubuntu-Italic.ttf') format('truetype');
    font-style: italic;
}
*/

/**/

/*@font-face {
    font-family: "Montserrat";
    src: url('/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat";
    src: url('/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: "Montserrat";
    src: url('/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: "Montserrat";
    src: url('/fonts/montserrat/Montserrat-Italic.ttf') format('truetype');
    font-style: italic;
}*/
/*                                                                                                          Переменные
________________________________________________________________________________________________________________________
*/

:root {
    --main-color: black;

    --accuracy-hue: 201;
    --quickness-hue: 36;
    --reaction-hue: 330;
    --other-hue: 0;

    --accuracy-color: hsl(var(--accuracy-hue), 100%, 75%);
    --quickness-color: hsl(var(--quickness-hue), 100%, 75%);
    --reaction-color: hsl(var(--reaction-hue), 100%, 75%);
    --other-color: hsl(var(--other-hue), 0%, 75%);

    --error-color: palevioletred;

    --main-game-list-bg-color: hsl(250, 10%, 90%);
    /*--section-bg-color: hsl(240, 11%, 96%);*/
    --section-bg-color: rgba(0, 0, 50, 0.04);
    --section-bg-color-dark: rgba(0, 0, 0, 0.08);
    --popup-bg-color: white; /*#f5f5f7*/
    /*--bg-dark: rgba(0, 15, 45, 0.5);*/
    --bg-dark: #2B3B4E url(/images/bg-noise.gif);
    --color-dark: whitesmoke;

    --input-inset-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
    --input-hover-shadow: 0 1px 2px 0 rgba(100, 100, 100, 0.24), 0 2px 3px 0 rgba(100, 100, 100, 0.19);
    --button-hover-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 5px 0 rgba(0, 0, 0, 0.19);
    --default-shadow: 0 0 5px 0 black;
    --default-shadow-light: 0 0 2px 0 grey;
    --head-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
    --head-text-shadow-darked: 1px 1px 0 rgba(255, 255, 255, 0.2);
    --head-text-shadow-dark: 1px 1px 0 rgba(0, 0, 0, 0.2);
    --text-hover-shadow: 3px 3px 4px rgba(50, 50, 50, 0.24), 4px 4px 5px rgba(50, 50, 50, 0.19);
    --text-hover-shadow-dark: 3px 3px 4px rgba(0, 0, 0, 0.4), 4px 4px 5px rgba(0, 0, 0, 0.4);

    --primary-font-family: Rubik, sans-serif;
    --secondary-font-family: Francker, sans-serif;

    --underline-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.05));
    --underline-gradient2: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, transparent);

    --my-transition: all 0.2s ease;

    --button-bg: linear-gradient(90deg, #4d4d4d, transparent 10px, transparent calc(100% - 10px), #4d4d4d), linear-gradient(0deg, #000000, black 10px, black calc(100% - 10px), #4d4d4d);
    --button-2-bg: linear-gradient(90deg, #999, transparent 10px, transparent calc(100% - 10px), #999), linear-gradient(0deg, #999, #888 10px, #888 calc(100% - 10px), #999);
    --button-bg-dark: linear-gradient(90deg, #3d5775, transparent 4px, transparent calc(100% - 4px), #3d5775), linear-gradient(0deg, #728fb147, #4d6a8e 4px, #4d6a8e calc(100% - 4px), #728fb1);
    /*--button-2-bg-dark: linear-gradient(90deg, #3d5775, transparent 4px, transparent calc(100% - 4px), #3d5775), linear-gradient(0deg, #728fb147, #4d6a8e 4px, #4d6a8e calc(100% - 4px), #728fb1);
*/
    --editable-bg: rgba(200, 255, 200, 0.25);
}

.asd {
    color: #728fb147;
}

/*                                                                                                          Глобальные
________________________________________________________________________________________________________________________
*/
* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    font-family: var(--primary-font-family);
    background: white;
    color: var(--main-color);
    transition: var(--my-transition);
    /*cursor: url(/images/black-transparent.cur) 10 10, default;*/
}

body.dark {
    background: var(--bg-dark);
    color: var(--color-dark);
}

body.darked {
    user-select: none;
}

body.darked:not(.dark) {
    background: rgba(0, 15, 45, 0.5);
}

body.darked.dark {
    /*background: rgba(0, 0, 0, 0.1);*/
}

.darked button, .darked .button, .darked button.active, .darked .button.active {
    color: grey !important;
}

.dark .button, .dark button.active, .dark .button.active {
    color: #dcecff !important;
    background: var(--button-bg-dark) !important;
}

.dark form button:not(.active) {
    color: #2d3d50 !important;
}

.crosshair-0 {
    cursor: default;
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

h1 {
    line-height: calc(2 * 1.5rem);
}

textarea, input, button, select {
    font-family: inherit;
    font-size: inherit;
}

input[type='text'], input[type='password'] {
    /*padding: 0 calc(1.5rem / 2);*/
    padding: 0 0.5rem;
    line-height: 2rem;
}

input[type='number'] {
    padding-left: calc(1.5rem / 2);
    line-height: 2rem;
}

button {
    border: none;
}

/*form input[type='text'],
form input[type='password'] {
    box-sizing: border-box;
}*/

input[type='checkbox'],
input[type='radio'],
input[type='range'] {
    cursor: pointer;
    /*margin-right: calc(1.5rem / 2);*/
}

body > pre:first-child {
    font-family: inherit;
    background: lightgray;
    z-index: 9999;
    padding: 1rem;
    top: 0;
    position: absolute;
}

fieldset {
    border: 0 none;
}

a {
    color: inherit;
    text-decoration: none;
    /*transition: text-shadow 0.2s ease;*/
    transition: var(--my-transition);
}

a:active, a:visited, a:hover, a:focus {
    outline: none;
}

a:not(.button):hover {
    text-shadow: var(--text-hover-shadow);
}

/*.dark a:not(.button):not(h1 .skin-10):hover {
    color: white;
    text-shadow: var(--text-hover-shadow-dark);
}*/

.dark a:not(.button):hover {
    text-shadow: var(--text-hover-shadow-dark);
}

/*.profile-menu .menu > li:hover div*/

/*a, a:active, a:focus,*/
.button,
.button:active,
.button:focus {
    outline: none;
}

form button, form .button {
    margin-right: 0.5rem;
}

.type-line, /* Порядок имеет значение */
h1:after,
.main-game-list h2:after {
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 2px;
    background: var(--other-color);
}

h1:after {
    background: var(--main-color);
}

.profile h1:after {
    display: none;
}

/* .container контейнер */

.container .head, .container .footer {
    background: linear-gradient(60deg, hsl(250, 10%, 90%) 80%, hsl(250, 10%, 96%) calc(100% - 1.5rem / 2));
    font-family: var(--secondary-font-family);
    /*line-height: calc(1.5 * 1.5rem);*/
    line-height: 2.25rem;
    text-shadow: var(--head-text-shadow);
    /*padding-left: calc(1.5rem / 2);*/
    padding: 0 calc(1.5rem / 2);
    /*min-height: calc(1.5 * 1.5rem);*/
    min-height: 2.25rem;
    color: rgb(128 128 138);
}

.dark .container .head, .dark .container .footer {
    color: #395475 !important;
    background: #7e98b7 !important;
    text-shadow: var(--head-text-shadow-darked) !important;
}

.container .head {
    border-bottom: 1px solid lightgrey;
    font-weight: 600;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.dark .container .head {
    border-bottom: none;
}

.container .body {
    padding: calc(1.5rem / 2);
}

.container .footer {
    border-top: 1px solid lightgrey;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dark .container .footer {
    border-top: none;
}

#content > p {
    /*padding: 0.5rem;*/
}

/**
Используется в Ajax.js
 */
.ajax-loading {
    /*box-shadow: 0 0 0 4px orange !important;*/
}

/*.top-list i, #gameGraphics .section .head i ,*/
i.anchor {
    display: block;
    position: absolute;
    /*top: -40px;*/
    left: 0;
    width: 0;
    height: 0;
    z-index: 9999;
}

/*.anchor:target + h2, .anchor:target + div, .anchor:target + a {
    background: rgba(144, 238, 144, 0.5);
}*/

.anchor:target + h2:before, .anchor:target + div:before, .anchor:target + a:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /*padding: 1rem;
    margin: -1rem;*/
    /*background: rgba(200, 255, 200, 0.4);
    border-radius: 0.5rem;*/
    border-bottom: 4px solid rgb(182, 78, 255);
}

.anchor:target + a:before {
    top: -2px;
}

.anchor:target + div:before {
    top: 15px;
}

.dark .anchor:target + h2, .dark .anchor:target + div, .dark .anchor:target + a {
    text-shadow: none;
    color: white;
}

.loading:after {
    content: '.';
    animation: loading 1.2s ease infinite;
    margin-left: 2px;
}

@keyframes loading {
    60% {
        text-shadow: 0.35em 0 0 currentColor;
    }
    100% {
        text-shadow: 0.35em 0 0 currentColor, 0.75em 0 0 currentColor;
    }
}

.new:after {
    content: "New!";
    color: rgb(182, 78, 255);
    display: inline-block;
    margin-left: 0.5rem;
}

.darked .new:after {
    color: lightgrey;
}

#userMenu .new:after, #mainMenu .menu > li > .new:after, .content.friends .new:after {

}

.top-list .new:after {
    color: inherit;
}

.box404 {
    margin-top: 4rem;
    margin-left: 10%;
}

/*noinspection CssOptimizeSimilarProperties*/
hr {
    margin: 20px 0;
    padding: 0;
    height: 6px;
    border: none;
    box-sizing: border-box;
    background-position: 50%;
    color: orange;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="lightgrey"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
    background-size: 6px 6px;

    /*border: 0;
    height: 1px;
    background: grey;
    background-image: -webkit-linear-gradient(left, #fff, grey, #fff);
    background-image: -moz-linear-gradient(left, #fff, grey, #fff);
    background-image: -ms-linear-gradient(left, #fff, grey, #fff);
    background-image: -o-linear-gradient(left, #fff, grey, #fff);*/
}

.skin-example {
    font-size: 200%;
    font-family: var(--secondary-font-family);
    font-weight: 900;
    text-align: center;
    margin-bottom: 2rem;
}

.skin-example > span {
    transition: var(--my-transition)
}

.fav {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    color: rgba(0, 0, 0, 0.1);
    font-size: 322%;
    font-family: var(--secondary-font-family);
    font-weight: 600;
}

.fav:after {
    content: 'Ctrl+d';
}

.dark .fav {
    color: rgba(255, 255, 255, 0.1);
}

.page-right-side {
    width: 40%;
    margin-left: 2rem;
    margin-top: 4rem;
}

.site-stats {
    display: flex;
    column-gap: 1.5rem;
    position: absolute;
    top: 20px;
    opacity: 0.5;
    font-style: italic;
    font-size: smaller;
}

.site-stats span {
    font-weight: 700;
    font-size: 200%;
    font-style: normal;
    opacity: 0.35;
}

#popupMsg {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#popupMsg .box {
    color: black;
    background: white;
    border-radius: 0.5rem;
    position: absolute;
    width: fit-content;
    width: -moz-fit-content;
    padding: 1rem;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}

#popupMsg .text {
    min-width: 200px;
    max-width: 400px;
    min-height: 60px;
}

#popupMsg .close {
    cursor: pointer;
}

#popupMsg .close.x {
    right: 0.5rem;
    top: 0.5rem;
    position: absolute;
}

#popupMsg .close.ok {
    margin: 0 35% 0 35%;
    width: 30%;
}

/*                                                                                                  Стилизация инпутов
________________________________________________________________________________________________________________________
*/

.my-checkbox, .my-radio {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    user-select: none;
}

.my-checkbox input[type='checkbox'], .my-radio input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin-right: calc(1.5rem / 3);
    padding: 0 !important;
    outline: none;
    transition: var(--my-transition);
    /*background: url(https://snipp.ru/uploads/contents/checkbox-1.png) 0 0 no-repeat;*/
    border: 1px solid #999999;
    /*cursor: pointer;*/
    box-shadow: var(--input-inset-shadow);
    background: white;
}

.my-radio input[type='radio'] {
    border-radius: 50%;
}

/* Checked */
.my-checkbox input[type='checkbox']:checked:after {
    content: "✓";
    font-size: 1.5rem;
    font-weight: 900;
    position: absolute;
    left: 0;
    top: -4px;
    line-height: 1rem;
    color: var(--main-color);
}

.my-radio input[type='radio']:checked:after {
    content: "";
    background: #000;
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
}

/* Hover */
/* Focus */
/*.my-checkbox input[type=checkbox]:not([disabled]):focus,*/
.my-checkbox input[type='checkbox']:not([disabled]):hover,
.my-radio input[type='radio']:not([disabled]):hover {
    box-shadow: var(--input-inset-shadow), var(--input-hover-shadow);
}

/* Active */
.my-checkbox input[type='checkbox']:active {

}

/* Disabled */
.my-checkbox input[type='checkbox']:disabled {
    color: #666;
    cursor: default;
}

/* range */

input[type=range] {
    width: 100%;
}

/*
input[type=range] {
    width: 100%;
    margin: -2.05px 0;
    background-color: white;
    -webkit-appearance: none;
    box-shadow: var(--input-inset-shadow);
    border-radius: 3px;
    height: 14px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    !*background: rgba(208, 206, 208, 0);*!
    border: 1px solid #999999;
    border-radius: 3px;
    width: 100%;
    height: 14px;
    !*cursor: pointer;*!
}

input[type=range]::-webkit-slider-thumb {
    margin-top: 1px;
    width: 16px;
    height: 10px;
    background: #000000;
    border: 1px solid #212121;
    border-radius: 3px;
    !*cursor: pointer;*!
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    transition: ;
}

input[type=range]:hover::-webkit-slider-runnable-track {
    !*background: #dcdbdc;*!
    box-shadow: var(--input-hover-shadow);
}

input[type=range]::-moz-range-track {
    !*background: rgba(208, 206, 208, 0);*!
    border: 1px solid #999999;
    border-radius: 3px;
    width: 100%;
    height: 14px;
    !*cursor: pointer;*!
}

input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 10px;
    background: #000000;
    border: 1px solid #212121;
    border-radius: 3px;
    !*cursor: pointer;*!
}

input[type=range]::-ms-track {
    background: transparent;
    border: 0 transparent;
    color: transparent;
    width: 100%;
    height: 14px;
    !*cursor: pointer;*!
}

input[type=range]::-ms-fill-lower {
    background: #c4c1c4;
    border: 1px solid #999999;
    border-radius: 0.5rem;
}

input[type=range]::-ms-fill-upper {
    !*background: rgba(208, 206, 208, 0);*!
    border: 1px solid #999999;
    border-radius: 0.5rem;
}

input[type=range]::-ms-thumb {
    width: 16px;
    height: 10px;
    background: #000000;
    border: 1px solid #212121;
    border-radius: 3px;
    !*cursor: pointer;*!
    margin-top: 0;
    !*Needed to keep the Edge thumb centred*!
}

input[type=range]:focus::-ms-fill-lower {
    !*background: rgba(208, 206, 208, 0);*!
}

input[type=range]:hover::-ms-fill-upper {
    !*background: #dcdbdc;*!
    box-shadow: var(--input-hover-shadow);
}

!*how to remove the virtical space around the range input in IE*!
@supports (-ms-ime-align:auto) {
    !* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 *!
    input[type=range] {
        margin: 0;
        !*Edge starts the margin from the thumb, not the track as other browsers do*!
    }
}*/

/*                                                                                                             Эффекты
________________________________________________________________________________________________________________________
*/

/* Тень */
#tooltip,
.expanded-image img {
    border-radius: 0.5rem;
    box-shadow: var(--default-shadow);
    border: 1px solid rgb(180, 180, 180);
}

/* Неактивность */

#gameConfig .inactive, #settingsList .inactive, .shop .container .inactive {
    background: rgba(0, 0, 0, 0.1);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

#settingsList .inactive {
    margin: -0.5rem;
    padding: 0.5rem;
}

#settingsList .forInherit {
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    /*cursor: pointer;*/
}

/* Исправление бага с повторной прозрасчностью */
#gameConfig .inactive .inactive, #settingsList .inactive .inactive {
    opacity: 1;
    background: none;
}

/* Элемент с подсказкой */

.has-tt {
    border-bottom: 1px dotted;
    /*cursor: help;  вроде не красиво с этим курсором*/
}

.has-tt.no-underline {
    border-bottom: none;
}

/* Гибкость */

.flexible {
    display: -webkit-flex;
    display: flex;
}

/*                                                                                                               Цвета
________________________________________________________________________________________________________________________
*/

.errorMessage,
.rusIndicator,
.capsIndicator {
    color: var(--error-color);
}

form .attention {
    background: var(--error-color);
}

#gameConfigForm > ul > li {

}

/*                                                                                                               Сетки
________________________________________________________________________________________________________________________
*/

.top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;
}

/* Основная сетка */

.main-grid {
    line-height: 1.5rem;
    display: grid;
    /*width: 90%;*/
    max-width: 1720px;
    min-width: 950px;
    position: relative;
    margin: 0 auto 0 auto;
    grid-template-rows: calc(1.5rem * 7) auto auto auto;
    /*grid-template-columns: minmax(267px, calc(3 * (100% / 22) + 1.5rem)) auto;*/
    grid-template-columns: minmax(285px, calc(3 * (100% / 22) + 1.5rem)) auto;
    grid-column-gap: 2rem;
    grid-template-areas: "g-logo g-menu" "g-sidebar g-content" "g-sidebar g-pagebottom" "g-footer g-footer";
}

.main-grid > div {
    /*padding-left: 1.5rem;*/
}

#logo {
    grid-area: g-logo;
}

#mainMenu {
    grid-area: g-menu;
}

#sidebar {
    grid-area: g-sidebar;
}

#content {
    grid-area: g-content;
}

#pageBottom {
    grid-area: g-pagebottom;
}

#footer {
    grid-area: g-footer;
}

/*#logo, #sidebar {
    border-right:1px solid
}*/

/*#langMenu, #content {
    margin-right:calc(4*1.5rem);
}*/

/* Сетка главной страницы */

.homepage-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-gap: 2rem;
}

.main-game-list > ul > li > .content {
    /*display: flex;
    flex-wrap: wrap;*/
}

/* Сетка профиля ... */

/*                                                                                                               Шапка
________________________________________________________________________________________________________________________
*/

#logo {
    padding-left: 1.5rem;
    margin-left: 20px;
    position: relative;
}

#logo img {
    display: inline-block;
}

#logo > span {
    position: absolute;
    top: 64px;
    font-size: smaller;
    font-style: italic;
    display: block;
    text-align: right;
    width: 184px;
}

#logo > a:first-child {
    display: block;
    /*margin-top: calc(2 * 1.5rem - 8px);*/
    margin-top: 21px;
    width: 243px;
    height: 60px;
    background: url(/images/logo/black4.png) no-repeat;
}

#logo a:active, #logo a:focus {
    outline: none;
}

.dark #logo > a:first-child {
    background: url(/images/logo/def.png) no-repeat;
}

/*noinspection CssOptimizeSimilarProperties*/
/*#logo div {
    position: absolute;
    color: white;
    top: 14px;
    width: 250px;
    height: 147px;
    border-radius: 50%;
    left: calc(1.5rem - 31px);
    border: 6px none;
    border-top-style: solid;
    border-top-color: lightgrey;
    transform: skewX(-15deg);
    pointer-events: none;
}

.dark #logo div {
    border-top-color: #6e88a7;
}


#logo div span {
    margin-top: 76px;
    display: block;
    margin-left: 2px;
    color: white;
    transform: skewX(15deg);
    font-size: smaller;
    font-style: italic;
    white-space: nowrap;
    text-align: center;
}

.dark #logo div span {
    color: #a6bcd9;
}*/

#mainMenu {
    display: flex;
    justify-content: space-between;
    height: 1.5rem; /* обязательно, иначе растягивается вниз и открывается раньше времени */
    margin-top: 96px;
    white-space: nowrap;
}

#mainMenu .menu {
    /*margin-top: calc(3 * 1.5rem - 11px);*/
    /*margin-top: calc(3 * 1.5rem - 9px);*/
    /*margin-top: 2rem;*/
    z-index: 10;
    align-items: center;
}

#mainMenu .menu > li > a, #mainMenu .menu > li > div {
    text-transform: uppercase;
    line-height: calc(1.5 * 1.5rem); /*Чтобы было видно затененный фон*/
    /*line-height: 1.5rem;*/
    color: white;
}

#mainMenu .game-type-section {
    max-width: 280px;
}

#mainMenu .game-type-section:not(:last-child) {
    margin-bottom: 2rem;
}

#mainMenu .game-type-section a {
    display: flex;
    justify-content: space-between;
    column-gap: 0.5rem;

}

#mainMenu .game-type-section a > div:first-child {
    text-overflow: ellipsis;
    overflow: hidden;
}

#mainMenu .type-line {
    margin-bottom: 0.5rem;
}

#mainMenu .main {
    margin-left: -0.75rem;
}

#mainMenu .lang {
    margin-right: 180px;
}

#mainMenu .lang [data-link] {
    cursor: pointer;
}

#mainMenu > ul > li:hover {
    /*background:rgba(255,255,255,0.15);*/
    background: rgba(0, 0, 0, 0.1);
}

.dark #mainMenu > ul > li:hover {
    /*background:rgba(255,255,255,0.15);*/
    background: rgba(0, 0, 0, 0.2);
}

#mainMenu > ul > li {
    transition: var(--my-transition);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 3px;
}

#mainMenu .unread:after {
    content: "!";
    position: absolute;
    top: -3px;
    right: -4px;
    color: white;
    background: hsl(277, 91%, 64%);
    border-radius: 0.5rem;
    padding: 0 5px;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    /*text-shadow: var(--head-text-shadow);*/
    /*box-shadow: 0 0 0 1px rgba(100, 100, 100, 0.5), 0 1px 1px 0 rgba(100, 100, 100, 0.4);*/
    /*border: 1px solid white;*/
    vertical-align: middle;
    font-size: 13px;
    /*font-weight: bold;*/
    margin-bottom: 3px;
}

/*#langMenu {
    text-align:right;



}*/

/*                                                                                                            #content
________________________________________________________________________________________________________________________
*/

#content {
    position: relative;
}

#content > div > .title {
    /*margin-bottom: calc(1.5rem / 2);*/
}

#content h2 {
    font-family: var(--secondary-font-family);
    font-style: italic;
    width: 100%;
}

.dark #content h2 {
    color: white;
}

#content h1 {
    font-family: var(--secondary-font-family);
    display: inline-block;
    font-weight: 800;
    margin-top: -1rem;
}

.dark #content h1 {
    /*color: white;*/
}

/* Настройки профиля */

#content .settings .content {
    display: flex;
    gap: 1rem;
}

#content .settings .content > ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
}

#content .settings .content > ul > li > div {
    box-shadow: var(--default-shadow-light);
    border: 1px solid white;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.dark #content .settings .content > ul > li > div {
    box-shadow: var(--default-shadow) !important;
    border-color: #4a5c71 !important;
    background: var(--section-bg-color-dark) !important;
}

#content .settings .content > ul > li {
    /*border-radius: 0.5rem;*/
    /*padding: 1.5rem;*/
    margin-bottom: 1rem;
}

#content .settings .content > ul > li .head {
    /*line-height: 3rem;*/
    padding: 0 1rem;
    background: var(--main-game-list-bg-color);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dark #content .settings .content > ul > li .head {
    /*color: var(--main-color);*/
}

#content .settings .content > ul > li .body {
    padding: 1rem;
    background: var(--section-bg-color);
}

/*.dark #content .settings .content > ul > li .body {
    background: var(--section-bg-color-dark);
}*/

#content .settings form {
    padding: 1rem;
    border: 1px solid lightgrey;
    border-radius: 0.5rem;
    position: relative;
}

.dark #content .settings form {
    border-color: #4a5c71;
}

#content .settings form:not(:last-child) {
    margin-bottom: 1.5rem;
}

#content .settings form .button {
    margin-top: 0.5rem;
}

#content .settings h3 {
    /*margin-bottom:1.5rem;*/

}

#content .settings h4 {
    margin-bottom: 1rem;
    font-size: 110%;
}

#nickList li, #themeList li {
    margin-bottom: 0.5rem;
}

#changePassForm li {
    margin-bottom: 0.5rem;
}

#selectNickSkinForm .has-tt {
    position: absolute;
    right: 1rem;
    bottom: 1.5rem;
}

#nickSkinList label span {
    font-size: 2rem;
    line-height: 4rem;
    font-family: var(--secondary-font-family);
    font-weight: 800;
    margin-right: 1rem;
    margin-bottom: 4px;
}

#nickSkinList .current i {
    font-weight: bold;
}

/*
#content .settings .options > li {
    padding:0;
}

#content .settings .options > li li {
    border:none;
}*/

/*                                                                                                        футер Footer
________________________________________________________________________________________________________________________
*/

#footer {
    background: var(--section-bg-color);
    text-shadow: var(--head-text-shadow);
    color: #999;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.dark #footer {
    color: var(--color-dark);
    text-shadow: var(--head-text-shadow-dark);
    background: var(--section-bg-color-dark);
}

#footer a {
    text-decoration: underline;
}

#footer a:hover {
    color: black;
}

.dark #footer a:hover {
    color: white;
}

#footer i {
    font-size: smaller;
}

#footer > div:last-child {
    text-align: right;
}

/*                                                                                                    Главная страница
________________________________________________________________________________________________________________________
*/

.main-game-list {
    margin-top: -4px;
}

.main-game-list a:hover {
    text-shadow: none;
}

.main-game-list .type-line {
    /*height: 4px;
    width: 100%;
    background: lightgrey;
    border-radius: 2px;*/
}

.main-game-list h2 {
    /* font-style: italic; */
    font-weight: 800;
    /*line-height: calc(1.5 * 1.5rem);*/
    line-height: 2rem;;
    margin-bottom: 1.5rem;
    position: relative;
}

.main-game-list h3, .game-card h3 {
    font-family: var(--secondary-font-family);
    font-size: 100%;
    line-height: calc(1.5 * 1.5rem);
    /*text-shadow: var(--head-text-shadow);*/
}

.main-game-list > ul {
    /*margin-right: calc(1*1.5rem);*/
}

.main-game-list > ul > li {
    margin-bottom: 1.5rem;
    position: relative;
}

.main-game-list > ul > li > .content {
    /* пока пусто */
}

/**/
.game-type-a h1:after,
.game-type-a h2:after,
.game-type-a .type-line {
    background: var(--accuracy-color) !important; /*--accuracy-color*/
}

.game-type-q h1:after,
.game-type-q h2:after,
.game-type-q .type-line {
    background: var(--quickness-color) !important; /*--quickness-color*/
}

.game-type-r h1:after,
.game-type-r h2:after,
.game-type-r .type-line {
    background: var(--reaction-color) !important; /*--reaction-color*/
}

.game-type-aq h1:after,
.game-type-aq h2:after,
.game-type-aq .type-line {
    background: linear-gradient(90deg, var(--accuracy-color) 46%, var(--quickness-color) 54%) !important;
}

/*todo del*/
/*.game-type-rq h1:after,
.game-type-rq h2:after,
.game-type-rq .type-line {
    background: linear-gradient(90deg, var(--quickness-color) 46%, var(--reaction-color) 54%) !important;
}*/

.game-type-qr h1:after,
.game-type-qr h2:after,
.game-type-qr .type-line {
    background: linear-gradient(90deg, var(--quickness-color) 46%, var(--reaction-color) 54%) !important;
}

.game-type-ar h1:after,
.game-type-ar h2:after,
.game-type-ar .type-line {
    background: linear-gradient(90deg, var(--reaction-color) 46%, var(--accuracy-color) 54%) !important;
}

/*todo del*/
/*.game-type-arq h1:after,
.game-type-arq h2:after,
.game-type-arq .type-line {
    background: linear-gradient(90deg, var(--accuracy-color) 31%, var(--quickness-color) 35%, var(--quickness-color) 64%, var(--reaction-color) 68%) !important;
}*/

.game-type-aqr h1:after,
.game-type-aqr h2:after,
.game-type-aqr .type-line {
    background: linear-gradient(90deg, var(--accuracy-color) 31%, var(--quickness-color) 35%, var(--quickness-color) 64%, var(--reaction-color) 68%) !important;
}

.game-type-other h1:after,
.game-type-other h2:after,
.game-type-other .type-line {
    background: var(--other-color) !important; /*--other-color*/
}

/* Секция с игрой */
.game-card {
    /*margin-right: 1.5rem;*/
    margin-bottom: 1.5rem;
}

.game-card .title {
    overflow: hidden;
    position: relative;
    padding-left: calc(1.5rem / 2);
    background: var(--main-game-list-bg-color);
    display: flex;
    align-items: baseline;
    column-gap: 0.5rem;
}

.dark .game-card .title {
    background: #7e98b7;
}

.game-card .title .popularity, .game-card .is-official {
    color: #999;
    text-shadow: var(--head-text-shadow);
    font-size: 80%;
}

.dark .game-card .title .popularity, .dark .game-card .is-official {
    color: #43566d;
    text-shadow: var(--head-text-shadow-darked);
}

.game-card .wrapper > a {
    display: block;
}

.dark .game-card .wrapper > a {
    color: black;
}

.main-game-list .fader {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent 80%, rgba(255, 255, 255, 0.5) calc(100% - 1.5rem / 2));
    pointer-events: none;
}

.dark .main-game-list .fader {
    background: linear-gradient(90deg, transparent 80%, #97b3d4 calc(100% - 1.5rem / 2));
}

.game-card .wrapper {
    box-shadow: var(--default-shadow-light);
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid transparent;
}

.dark .game-card .wrapper {
    box-shadow: var(--default-shadow);
    border-color: #aabdd4;
}

.game-card .body {
    position: relative;
    padding: calc(1.5rem / 2);
    overflow: hidden;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    display: grid;
    grid-template-columns: 1fr 1fr; /*todo вписат ьв контент*/
    column-gap: 0.5rem;
    grid-template-areas: "scoring extra" "ends ends";
    font-size: smaller;
    line-height: 1.2rem;
}

.game-card .body > ul:nth-child(1) {
    grid-area: scoring;
}

.game-card .body > ul:nth-child(2) {
    grid-area: extra;
}

.game-card .body > ul:nth-child(3) {
    grid-area: ends;
    display: flex;
    border-top: 1px solid lightgrey;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    justify-content: space-between;

}

/*.game-card .body > ul:nth-child(1) > li:first-child {
    border-bottom: 1px solid lightgrey;
}*/

.game-card .body:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: -9999;
}

.game-card .wrapper .type-line {
    position: absolute;
    height: 1px;
    z-index: -2;
    left: 0;
    border-radius: 0;
    transition: var(--my-transition);
}

.game-card .wrapper .type-line.top {
    /*top: -5px;*/
    top: calc(100% - 2px);
}

.game-card .wrapper .type-line.bottom {
    /*bottom: -5px;*/
    bottom: calc(100% - 2px);
}

.game-card .wrapper > a:hover .type-line {
    transform: scaleY(3);
}

/*.game-card .wrapper > a:hover .type-line.top {

    transform: translateY(-15px);
}

.game-card .wrapper > a:hover .type-line.bottom {

    transform: translateY(15px);
}*/

.game-card .wrapper h3 {
    transition: var(--my-transition);
}

.game-card .wrapper > a:hover h3,
.game-card .wrapper > a:hover .life-box {
    text-shadow: var(--text-hover-shadow);
    /*var(--head-text-shadow), */
}

.dark .game-card .wrapper > a:hover h3,
.dark .game-card .wrapper > a:hover .life-box {
    text-shadow: 1px 1px #a4bfe0 !important;
}

.dark .game-card .wrapper > a:hover {
    text-shadow: none;
}

/*noinspection CssOptimizeSimilarProperties*/
/*.main-game-list .nameplate {
    position: absolute;
    bottom: 0;
    left: calc(1.5rem / 2);
    width: 1.5rem;
    border-bottom-width: 4px;
    border-bottom-style: solid;
}*/

.game-card .footer {
    background: var(--main-game-list-bg-color);
    padding: 0 calc(1.5rem / 2);
    /* text-align: right; */
    text-shadow: var(--head-text-shadow);
    color: #999;
    /* font-family: var(--secondary-font-family); */
    height: calc(1.5 * 1.5rem);
    display: flex;
    /*font-weight: bold;*/
}

.dark .game-card .footer {
    background: #7e98b7;
    color: #43566d;
    text-shadow: var(--head-text-shadow-darked);
}

.game-card .footer a {
    color: #999;
}

.dark .game-card .footer a {
    color: #43566d;
}

.game-card .footer > div:first-child {
    flex-grow: 1;
    font-size: 120%;
    display: flex;
    column-gap: 0.3rem;
    align-items: center;
}

.game-card .footer > div:last-child {
    font-size: 80%;
    display: flex;
    column-gap: 0.3rem;
    align-items: center;
}

.game-card .footer a:hover {
    color: #000;
    /*text-shadow: var(--text-hover-shadow);*/
    /*text-decoration: underline;*/
}

.dark .game-card .footer a:hover {
    text-shadow: var(--text-hover-shadow-dark) !important;
    /*text-decoration: underline;*/
}

.game-card .control-panel {
    /*display: flex;
    flex-direction: column;
    gap: 0.5rem;*/
}

.game-card .life {
    width: 100px;
    margin: 0 !important;
    height: 10px !important;
    background: linear-gradient(90deg, black, black);
    opacity: 0.85;
    border: 1px solid black;
    box-sizing: border-box;
    pointer-events: none;
}

.dark .game-card .life {
    background: linear-gradient(90deg, #43566d, #43566d);
    border: 1px solid #43566d;
}

.game-card .life-box {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    margin-left: auto;
    margin-right: calc(1.5rem / 2);
    font-family: var(--secondary-font-family);
    font-weight: bold;
    z-index: 1;
    transition: var(--my-transition);
}

.game-card .life-box > span {
    pointer-events: none;
}

/*noinspection CssOptimizeSimilarProperties*/
.game-card .footer .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 3px;
    background-repeat: no-repeat;
}

.game-card .footer .icon:hover {
    background-position: 0 -2px;
}

.game-card .footer .icon.i-top {
    background-image: url(/images/icons/i_top.png);

}

.game-card .footer .icon.i-stat {
    background-image: url(/images/icons/i_stat.png);
}

.score-life-info hr {
    margin-top: 2px;
    margin-bottom: 0.25rem;

}

.score-life-info {
    margin: 0.25rem 0.5rem;
}

.score-life-info {
    line-height: 1.5rem;
}

/*                                                                                                          .menu меню
________________________________________________________________________________________________________________________
*/

.menu {
    display: -webkit-inline-flex;
    display: inline-flex;
    z-index: 2;
    font-family: var(--secondary-font-family);
    /*line-height: calc(1.5 * 1.5rem);*/
    line-height: 2rem;
}

.menu li a, .menu li > div:first-child, .menu li > form > div:first-child {
    transition: text-shadow 0.2s ease;
    color: #333;
}

.dark .menu li a, .dark .menu li > div:first-child, .dark .menu li > form > div:first-child {
    color: var(--color-dark);
}

.menu img {
    vertical-align: middle;
}

.menu li:hover > a, .menu li:hover > div:first-child, .menu li:hover > form > div:first-child {
    text-shadow: var(--text-hover-shadow);
    color: var(--main-color);
}

.dark .menu li:hover > a, .dark .menu li:hover > div:first-child, .dark .menu li:hover > form > div:first-child {
    text-shadow: var(--text-hover-shadow-dark) !important;
    color: white;
}

.menu li {
    position: relative;
}

.menu li li {
    /*transition: background-color 0.2s ease;*/
}

.menu li li:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .menu li li:hover {
    background: rgba(255, 255, 255, 0.04);
}

.menu > li {
    /*width: calc(2 * (100% + 1.5rem) / 16);*/
    margin-right: 1.5rem;
    white-space: nowrap;
}

.menu > li:last-child {
    margin-right: 0;
}

.menu span {
    /*color: grey;*/
    font-size: small;
    vertical-align: top;
}

.dark .menu span {
    color: #b6cce9;
}

/*.menu > li > a:not(:last-child),
.menu > li > div:not(:last-child) {
    background:red;
}*/

.menu > li > a:not(:last-child):after,
.menu > li > div:not(:last-child):after {
    content: "›";
    font-weight: bold;
    display: inline-block;
    margin-left: 10px;
    font-size: 130%;
    transform: rotate(90deg);
    line-height: 0;
}

/*.menu li > div > a:not(:last-child) {
    display: block;
}*/

.menu li > ul {
    visibility: hidden;
    position: absolute;
    background: var(--popup-bg-color);
    min-width: 100%;
    z-index: 9999;
    padding: calc(1.5rem / 2) 0;
    left: -0.75rem;
    /*right:-1.5rem;*/
    box-shadow: var(--default-shadow);
    border-radius: 0.25rem;
}

.dark .menu li > ul {
    background: var(--bg-dark);
    border: 1px solid #46586d;
}

.menu .divided {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(9, 1fr);
}

.menu li li a, .menu li li > div:first-child {
    /*padding: calc(1.5rem / 4) 1.5rem;*/
    padding: 0 1.5rem;
}

.menu li li {
    white-space: nowrap;
    /*width:fit-content;*/
}

.menu.main li li {
    max-width: 235px;
}

.menu li li > a:not(:last-child),
.menu li li > div:not(:last-child) {
    position: relative;
}

.menu li li > a:not(:last-child):after,
.menu li li > div:not(:last-child):after {
    content: "›";
    font-weight: bold;
    display: inline-block;
    margin-left: 10px;
    font-size: 120%;
    /*position:absolute;
    right:10px;*/
}

.menu li li ul {
    left: 100%;
    top: calc(-1.5rem / 2);
}

/*todo .menu .grid-mode - упразднить*/
.menu .grid-mode, .game-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.5rem;
    padding: 1.5rem !important;
}

.menu li:hover > ul {
    animation: showDiv 0.15s forwards;
}

@keyframes showDiv {
    0%,
    99% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

.menu li a, .menu li div {
    display: block;
    /*text-decoration: none;*/
}

.menu .selected {
    border-bottom: 3px solid;
    margin-bottom: -2px;
    /*border-bottom: 1px solid transparent;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, rgba(0, 0, 0, 0.05));*/
    /* border-image-source: var(--underline-gradient); */
}

/*                                                                                                             реклама
________________________________________________________________________________________________________________________
*/

.ad-game-top {
    /*width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;*/

    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--section-bg-color);
}

.dark .ad-game-top {
    background: var(--section-bg-color-dark);
}

.ad-game-top.small {
    border-radius: 0.5rem;
}

.ad-game-top.medium, .ad-game-top.large {
    border-radius: 0;
    border-bottom: 4px solid;
    border-image-slice: 1;
    border-image-source: var(--underline-gradient);
    border-top: 4px solid;
}

#sidebar .vidget.ad .content {

    display: flex;
    justify-content: center;
    padding: 1.5rem;
}

#sidebar .vidget.ad .small {
    padding: 0;
    background: none;
    border-radius: 0;
    border-bottom: 4px solid;
    border-image-slice: 1;
    border-image-source: var(--underline-gradient);
}

/* Recent events */

.recent-events {

}

.recent-events .event {
    font-size: smaller;
    margin-bottom: 1rem;
    line-height: 1rem;
}

.dark .recent-events .event {
    color: #a6bcd9;
}

.recent-events .date {
    font-style: italic;
    color: #7e98b7;
    display: inline-block;
    margin-right: 0.5rem;
}

.recent-events .event a {
    font-weight: bold;
}

.dark .recent-events a {
    font-weight: normal;
    color: white;
}

.recent-events .type-line {
    height: 2px;
}

.recent-events .score {

}

.recent-events .congrats {
    background: white;
    display: inline-block;
    border-radius: 0.25rem;
    padding: 1px 0.5rem;
}

.vidget.recent-events .congrats {
    margin-top: 0.25rem;
    box-shadow: inset 0 0 2px black;
    border: 1px solid whitesmoke;
}

.recent-events .congrats.bronze span {
    color: #cC603B;
    background: linear-gradient(180deg, #ffd6c8, #cC603B, #ffd6c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.recent-events .congrats.silver span {
    color: #aeacac;
    background: linear-gradient(180deg, #e6e6e6, #484848, #e6e6e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.recent-events .congrats.gold span {
    color: #EBA316;
    background: linear-gradient(180deg, #ffdd9c, #EBA316, #ffdd9c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.darked .recent-events .congrats {
    /*color: var(--main-color);*/
    opacity: 0.1;
}

.darked .recent-events .type-line {
    background: var(--main-color) !important;
}

/*.dark .recent-events .congrats {
    color: #f378ff;
}*/

.content .recent-events .box {
    display: flex;
    column-gap: 1rem;
}

.content .recent-events .box > div:first-child {
    flex-basis: 50%;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    padding-right: 1rem;
}

.content .recent-events .box > div:last-child {
    flex-basis: 50%;
}

.content .recent-events .event a {
    display: inline-block;
}

.content .recent-events .event {
    font-size: 100%;
    background: var(--section-bg-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.dark .content .recent-events .event {
    background: var(--section-bg-color-dark);
}

.content .recent-events .event .date {
    display: block;
}

.content .recent-events .comments {
    margin-top: 0;
}

.vidget.recent-events .content > a {
    font-size: small;
    line-height: 1rem;
    display: block !important;
}

.recent-events .filter {
    display: flex;
    /*position: relative;*/
    margin-bottom: 1rem;
}

.recent-events form > ul {
    margin-bottom: 1rem;
    display: flex;
    column-gap: 2rem;
}

.recent-events form > ul > li {
    margin-bottom: 0.5rem;
}

.recent-events .filter .bt {
    border-bottom: 1px dotted;
    margin-bottom: 2rem;
    cursor: pointer;
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.recent-events .filter .bt:hover {
    text-shadow: var(--text-hover-shadow);
}

.recent-events .filter .cnt {
    margin-left: 1rem;
}

/*.ad-game-top > a:first-child {
    position: absolute;
    right: 0;
    bottom: 100%;
    font-size: 80%;
    !*color:rgba(0,0,0,0.6);*!
    color: #999999;
}

.ad-game-top + .content {
    margin-top: calc(1.5 * 1.5rem);
}*/
/*                                                                                                        магазин shop
________________________________________________________________________________________________________________________
*/

.shop .container > .body {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
}

.shop .container .body {
    padding: 1.5rem !important;
}

.shop .container .button {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.shop .container .goods {
    padding: 1rem 2rem;
    border: 1px solid lightgrey;
    border-radius: 0.5rem;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}

.shop .container .goods .title {
    font-family: var(--secondary-font-family);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 3.5rem;
    padding: 2rem 0;
}

.shop .container .goods > div:last-child {
    margin-top: 0.5rem;
}

.shop .container.buy-premium .goods .title {
    font-size: 2rem;
    line-height: 3rem;
    padding: 1rem 0;
}

.shop .container.buy-premium .article {
    /*width: 100%;*/
}

.shop .container input.hidden {
    display: none;
}

.shop .container.buy-nick-skin .body form {
    display: flex;
    gap: 1.5rem;
}

.shop .container.buy-nick-skin .cost {
    text-align: right;
}

.shop .container.buy-nick-skin .cost > div {

}

.shop .container.buy-nick-skin .cost > div:last-child {
    margin-top: 0.5rem;
}

.shop .purse {
    margin-bottom: 2rem;
}

.shop .purse tr td:first-child {
    white-space: nowrap;
    padding-right: 1rem;
    vertical-align: baseline;
}

.shop .article {
    padding-top: 1rem;
}

.shop .ac-price {
    font-family: var(--secondary-font-family);
    margin-left: 2rem;
    margin-bottom: 0.5rem;
}

.shop .container.purchase-aimcoins {
    /*white-space: nowrap;*/
}

/*.shop .container.purchase-aimcoins #paymentForm {
    display: inline-block;
    vertical-align: top;
    padding: 1.5rem;
}*/

.shop .container.purchase-aimcoins .goods {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 50, 0.03);
}

.dark .shop .container.purchase-aimcoins .goods {
    border-color: #4a5c71;
}

.shop .container.purchase-aimcoins #paymentResult {
    display: inline-block;
    vertical-align: top;
    padding: 1.5rem;
}

.shop .container.purchase-aimcoins .body > div:first-child .buy {
    margin-left: 1.5rem;
}

.shop .container.purchase-aimcoins > .body {
    padding-top: 1rem !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 2rem;
}

.shop .container.purchase-aimcoins .other {
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    display: inline-block;
    color: grey;
}

.shop .container.purchase-aimcoins input[type='number'] {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: bold;
}

.shop .container.purchase-aimcoins > .body label b {
    font-size: 2rem;
    line-height: 3rem;
}

.shop .container.purchase-aimcoins > .body label:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.shop .container.purchase-aimcoins input[type='range'] {
    margin-top: 1rem;
    display: block;
}

.shop .container.purchase-aimcoins label .aim-coins {
    font-size: 1.5rem;
    line-height: 1.5rem;
    border-radius: 1rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-weight: bold;
}

.shop .container.purchase-aimcoins .methods {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.shop .payment-method {
    position: relative;
    width: 110px;
    height: 75px;
    background: rgba(0, 0, 50, 0.03) no-repeat center;
    border-radius: 0.5rem;
    display: inline-block;
    cursor: pointer;
}

.dark .shop .payment-method {
    background-color: white;
}

.shop .payment-method + div {
    font-size: smaller;
    line-height: 1rem;
    padding-left: 0.5rem;
    text-align: center;
}

.shop .payment-method.card {
    background-image: url(/images/payments/card.png);
}

.shop .payment-method.qiwi {
    background-image: url(/images/payments/qiwi.png);
}

.shop .payment-method.yoomoney {
    background-image: url(/images/payments/yoomoney.png);
}

.shop .payment-method.webmoney {
    background-image: url(/images/payments/webmoney.png);
}

.shop .payment-method.tinkoff {
    background-image: url(/images/payments/tinkoff.png);
}

.shop .payment-method.cash {
    background-image: url(/images/payments/cash.png);
}

.donate .container.purchase-aimcoins {
    margin-bottom: 2.5rem;
}

.article.donate ul {
    list-style-type: disc;
}

.article.donate ul li {
    margin-bottom: 1.5rem;
}

.article.donate a {
    text-decoration: none !important;
}

.article.donate .section {
    border-bottom: 2px solid transparent !important;
    border-image-slice: 1;
    border-image-source: var(--underline-gradient);
}

/*                                                                                                  заголовок контента
________________________________________________________________________________________________________________________
*/

.menu + .content-title, script + .content-title, .social + .content-title {
    /*margin-top: 1.5rem;*/
    margin-top: 2rem;
}

.title + .content-title {
    margin-top: 1.5rem;
}

.content-title {
    display: flex;
    align-items: flex-end;
    /*margin-bottom: 1.5rem;*/
}

.game .content-title.score {
    font-size: 150%;
    line-height: 2rem;
    /*margin-bottom: 1.5rem;*/
}

.content-title h2 {
    font-family: var(--secondary-font-family);
    border-bottom: 2px solid transparent;
    border-image-slice: 1;
    /*border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.05));*/
    border-image-source: var(--underline-gradient);
}

.content-title.score {
    /*font-size: 2.5rem;
    line-height: 3.5rem;
    margin-top: 2rem;*/
}

.content-title h2, .content-title .page-hint {
    padding-bottom: calc(1.5rem / 3);
}

.content-title .page-hint {
    padding-left: calc(1.5rem / 2);
}

/*                                                                                                    #sidebar Сайдбар
________________________________________________________________________________________________________________________
*/

#sidebar {
    /*overflow: hidden; использовать в виджете*/
}

#sidebar > .vidget {
    margin-bottom: 1.5rem;
}

#sidebar .content {
    /*padding-right: 1.5rem;*/
}

#sidebar li a {
    /*display: inline-block;*/
}

#sidebar .vidget a {
    /*text-decoration: none;*/
    display: inline-block;
}

#sidebar .vidget {

    margin-bottom: 1.5rem;
    /*background: var(--section-bg-color);*/

    padding-bottom: calc(1.5rem / 2);
}

#sidebar .vidget > .title {
    display: inline-block; /* Против схлопывания */
    /*margin-top: 1.5rem;*/
    position: relative;
    width: 100%;
}

#sidebar .vidget > .content {
    border-top: 4px solid black;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background: var(--section-bg-color);
    padding: 1.5rem 2rem;
    /*padding: 1.5rem;*/
}

/*#sidebar .vidget > .content:before {
    content: "";
    display:block;
    width:100%;
    height:4px;
    background:black;

}*/

.dark #sidebar .vidget > .content {
    background: var(--section-bg-color-dark);
}

#sidebar .vidget > .title h2 {
    line-height: 2rem;
    /*line-height: calc(1.5 * 1.5rem);*/
    font-family: var(--secondary-font-family);
    font-weight: 500;
    font-size: 125%;
    display: inline-block;
    transition: var(--my-transition);
}

#sidebar .vidget > .title h2 + span {
    /*font-style:italic;*/
}

#sidebar .vidget > .title > div {
    /*margin-right: calc(0.5 * 1.5rem);
    overflow: hidden;*/
}

#sidebar input[type='text'],
#sidebar input[type='password'] {
    box-sizing: border-box;
    width: 100%;
}

#sidebar .vidget > .content ul > li:not(:last-child) {
    /*margin-bottom: calc(1.5rem / 2);*/
}

#sidebar .vidget > .content ul > li li {
    margin-bottom: 0; /* Чтобы не накладывались маргины на менюшные .menu */
}

#sidebar .vidget li a {

}

#sidebar .vidget li a:before {
    /*content:"";
    width:10px;
    height:10px;
    background:green;
    display: inline-block;*/
}

#sidebar .vidget.welcome .fogot-pw {
    /*text-decoration: underline;*/
}

#sidebar .vidget.welcome .content {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#sidebar .vidget.welcome .content > ul {
    /*margin-top: calc(1.5rem / 2);*/
    /*margin-top: 1rem;*/
}

#sidebar .vidget .rank {
    padding: 0 0.3rem;
    font-size: smaller;
    line-height: 1.2rem;
    border-radius: 0.4rem;
    font-weight: 700 !important;
}

/*#loginForm input {
    padding: 0 calc(1.5rem / 2);
    line-height: calc(1.5 * 1.5rem);
}*/
#sidebar .vidget.welcome li:not(:last-child) {
    /*margin-bottom: calc(1.5rem / 2);*/
    margin-bottom: 1rem;
}

#loginForm ul li:last-child {
    display: flex;
    /*align-items: center;*/
    flex-wrap: wrap;
}

#loginForm ul li:last-child input {
    margin-left: 0.5rem;
}

#loginForm button, #loginForm label {
    margin-bottom: 1rem;
}

/* Кнопки настроек */

/*#settingsButtonList {
    display: none;
}

.profile-menu .popup {
    white-space: nowrap;
    left: 100%;
    top: -1rem;
}

.profile-menu .popup li:last-child {
    margin-bottom: 0 !important;
}*/

.profile-menu {

}

.profile-menu .menu {
    flex-direction: column;
    /*line-height: calc(1.5 * 1.5rem);*/
    line-height: 2rem;
    text-shadow: var(--head-text-shadow);
}

.darked .profile-menu .menu {
    text-shadow: var(--head-text-shadow-darked);
}

.dark .profile-menu .menu {
    text-shadow: var(--head-text-shadow-dark);
}

.profile-menu .menu li li {
    /*line-height: 1.5;*/
}

.profile-menu .menu > li > a, .profile-menu .menu > li > div, .profile-menu .menu > li > form {
    font-weight: 500;
}

.profile-menu .menu li > ul {
    left: 100%;
    top: calc(-1.5rem / 2);
}

.profile-menu .menu > li > a:not(:last-child):after,
.profile-menu .menu > li > div:not(:last-child):after {
    transform: none;
}

.profile-menu .menu > li div:last-child {
    cursor: pointer; /* Это отдельная кнопка  */
}

/*.profile-menu .menu > li:hover div {
    text-shadow: var(--text-hover-shadow);
    color: var(--main-color);
}*/

.profile-menu .menu > li {
    width: fit-content;
    width: -moz-fit-content;
    /*padding-right: 0.5rem;*/
}

.profile-menu .menu > li > a span {
    color: black;
}

.profile-menu .content {
    position: relative;
}

.profile-menu .content .c-notices {
    position: absolute;
    top: 0;
    right: 0.5rem;
}

.profile-menu .content .c-notices .num:after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 13px;
    background: url("/images/icons/comment_notice.png") center;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.c-notifications {
    margin-top: 0.5rem;
}

.c-notifications .show-more {
    margin-top: 1rem;
}

.c-notifications .n-row {
    cursor: pointer;
    transition: var(--my-transition);
}

.c-notifications .n-row:hover {
    text-shadow: var(--text-hover-shadow);
}

.dark .c-notifications .n-row:hover {
    text-shadow: var(--text-hover-shadow-dark);
}

.dark .show-more {
    background: var(--section-bg-color-dark);
}

.c-notifications .unread {
    font-weight: bold;
}

.dark .c-notifications {
    color: #a6bcd9;
}

.dark .c-notifications .unread {
    font-weight: normal;
    color: var(--color-dark);
}

.c-notifications .unread a {
    border-bottom: 1px dotted;
}

.c-notifications .date {
    display: inline-block;
    min-width: 200px;
}

.c-notifications > li:not(.show-more) {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
    width: fit-content;
    width: -moz-fit-content;
    line-height: 2rem;
}

.dark .c-notifications > li {
    border-color: rgba(255, 255, 255, 0.1);
}

.profile-menu .m-notice {
    color: white !important;
    background: rgb(182, 78, 255);
    border-radius: 0.5rem;
    padding: 4px;
    font-size: small;
    text-shadow: none;
}

/*
.profile-menu li {
    position: relative;
    width: fit-content;
}
*/

/*.profile-menu li a {
    transition: ;
}

.profile-menu li a:hover {
    color:black;
    text-shadow: var(--text-hover-shadow);
}*/

/* logout */

/*#logoutForm .submit {
    display:inline-block; !*
}*/

/*#content .page-description {
    display:block !important;
}*/

/*
#content .body .head {
    font-weight: bold;
    background: pink;
}

#content .body .body {
    !*background: #fcfcfc;*!
}

#content .body .footer {
    font-style: italic;
    background: #ececec;
}

#content .settings .body .body form {
    flex-grow: 1;
    background: #f9f9f9;
    margin: 5px;
    padding: 5px;
}*/

.online-users .content {
    /*line-height: calc(1.5 * 1.5rem);*/
    line-height: 2rem;
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.online-users .content li {
    white-space: nowrap;
    position: relative;
}

.online-users .content .me {
    position: relative;
}

.online-users .content .me:before {
    content: "❱"; /*➤*/
    position: absolute;
    right: calc(100% + 0.5rem);
}

.online-users .pos {
    font-size: x-small;
    color: rgba(0, 0, 0, 0.4);
    font-family: var(--primary-font-family);
    padding-right: 0.5rem;
    text-shadow: var(--head-text-shadow);
    vertical-align: middle;
}

.dark .online-users .pos {
    color: #7e98b7;
    text-shadow: none;
}

/*                                                                                                          .game Игра
________________________________________________________________________________________________________________________
*/

#gameBox {
    position: relative;
}

#gameBox .game-timer {
    font-family: var(--secondary-font-family);
}

/* Сетка заголовка игры*/

#gameBox > .head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5rem;
    margin-bottom: calc(1.5 * 1.5rem);
    align-items: end;
}

/* Сетка тела игры*/

#gameBox > .body {
    display: grid;
    /*grid-template-columns: max-content auto;*/
    grid-template-columns: min-content auto;
    /*grid-column-gap: 1.5rem;*/
    grid-column-gap: 1.5rem;
}

/* Кнопка сохранения игры */

#saveConstructorForm {
    margin-top: 1.5rem;
    /*margin-bottom: calc(1.5 * 1.5rem);*/
    margin-bottom: 1rem;
}

/* liveData liveStats живая статистика*/

#liveData {
    position: relative;
    min-width: 300px;
    overflow: hidden;
}

#liveData .score-right {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0, 0, 0, 0.2);
    font-family: var(--secondary-font-family);
    font-weight: bold;
    font-size: 150%;
}

#liveData .score-right.system-avg-score {
    top: calc(2rem + 3px);
}

.dark #liveData .score-right {
    color: rgba(255, 255, 255, 0.3);
}

#liveData .score-right:hover {
    color: rgba(0, 0, 0, 0.4);
}

#liveData .deduct {
    font-size: smaller;
}

.dark #liveData .score-right:hover {
    color: rgba(255, 255, 255, 0.8);
}

#gameScore {
    margin-bottom: 1.5rem;
}

#gameScore .title {
    border-bottom: 4px solid;
    margin-bottom: 2rem;
    font-family: var(--secondary-font-family);
    font-weight: bold;
}

.dark #gameScore .title {
    border-color: var(--main-color);
}

#gameScore .title span {
    /*vertical-align:baseline;*/
}

#gameScore .title .prefix {

}

#gameScore .title .value {
    font-size: 150%;
}

#gameScore .title > span:not(.value) {
    color: rgba(0, 0, 0, 0.4);
}

.dark #gameScore .title > span:not(.value) {
    color: var(--color-dark);
}

#gameScore .title .postfix {

}

#gameScore .description {
    display: grid;
    grid-template-columns: max-content auto;
    /*grid-column-gap: 1.5rem;*/
}

#gameScore .description > div {
    padding-right: 1rem;
}

#gameScore .description > span {
    display: block;
    /*border-top:1px solid rgba(0,0,0,0.1);*/
    /*margin-top:0.5rem;*/
}

#gameScore .total-extra {
    border-top: 1px solid;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}

.game .metrics {

}

.game .metrics .head {
    position: relative;
    margin-bottom: 1.5rem;
    border-bottom: 4px solid;
}

.dark .game .metrics .head {
    border-color: var(--main-color);
}

.game .metrics .head > span {
    /*font-family: var(--secondary-font-family);*/
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4);
}

.dark .game .metrics .head > span {
    color: var(--color-dark);
}

.game.studio .metrics #liveStats .head {
    border-bottom: none;
    background: orange;
}

.game.studio .metrics #liveStats .head > span {
    color: var(--main-color);
    padding-left: 0.5rem;
    font-weight: normal;
    font-family: var(--primary-font-family);
    /*content: "!";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: orange;
    color: var(--main-color);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    margin-right: 0.5rem;
    padding: 2px;*/
}

.game.studio .metrics #liveStats .head > span span {
    color: white;
}

#hitPoolPrecision {
    color: black;
}

/* декор игры */

/* Контейнер игры */

#gameField {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    box-shadow: var(--default-shadow-light);
    border-radius: 10px;
    overflow: hidden;
}

.dark #gameField {
    box-shadow: var(--default-shadow);
}

.studio #gameField {
    border: 10px solid orange;
    border-radius: 20px;

    /*padding-top: 0.5rem;*/
}

/* Заголовок игры */

.game-type-default > .title {
    /*margin-bottom: calc(1.5rem / 2);*/
}

.game > .title {
    position: relative;
    /*margin-bottom: 1.5rem;*/
}

.game > .title > div {
    display: inline-block;
}

.game > .title .popularity {
    margin-left: 0.75rem;
}

.game:not(.is-settings) > .title > h1 {
    font-size: 3rem;
    line-height: 4rem;
}

.game > .title > .owner {
    position: absolute;
    right: 0;
    top: 0;
}

.game > .title > .owner .has-tt {
    /*font-style: italic;*/
    color: grey;
}

.dark .game > .title > .owner .has-tt {
    color: var(--color-dark);
}

.game > .title > .owner a {
    font-weight: bold;
    /*text-decoration: underline;*/
}

/* Меню игры */

.game .menu {
    margin-top: calc(1.5rem / 3);
}

.game .menu, #friendMenu, .menu.h {
    border-bottom: 1px solid lightgrey;
}

.menu.h {
    margin-top: 0.25rem;
}

.dark .menu, .dark .profile .body-after a {
    border-color: #617ea1 !important;
}

.game .menu li a, .game .menu li div {
    /*border-top: 4px solid transparent;*/
}

/*.game .menu li > span {
    height: 60%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1rem;
    z-index:2;
}*/

.game .menu > li {
    text-transform: uppercase;
}

.game .menu > li li {
    text-transform: none;
}

.game .menu li > ul ul {
}

.game .menu > li > a, .game .menu > li > div {
    line-height: calc(1.5 * 1.5rem); /* Чтобы выпадающее меню не было прижато */
    /*text-transform: uppercase;*/
    font-weight: 500;
}

/* Содержимое игры */

.game > .content {
    /*margin-top: calc(1 * 1.5rem);*/
    margin-bottom: 1.5rem;
}

/* Лицевой фрейм игры */

.game .face div {
    border: none;
    padding: 0;
}

.game .face {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    padding-left: 20px;
    padding-top: 15px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.dark .game .face {
    color: var(--main-color);
}

.game .face .title {
    font-family: var(--secondary-font-family);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

.game .face .light {
    opacity: 0.25;
}

.game .face .description {

}

.game .face .center {
    position: absolute;
    top: calc(50% - 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 1.5rem;
    font-style: italic;
}

.game .face .description span {
    font-family: var(--secondary-font-family);
    font-weight: bold;
    font-size: 1.2rem;
}

.game .face .description ul {
    margin-bottom: 1rem;
}

.game .face #systemAvgScore {
    display: block;
}

#gameControlForm {
    margin-bottom: 1rem;
}

#controlPanel {
    display: flex;
    position: relative;
    margin-top: 1rem;
    align-items: center;
}

#controlPanel > div {
    margin-right: 0.5rem;
}

#controlPanel #gameControlForm {
    margin-bottom: 0;
}

/* Выбор прицела */

#changeCrosshair {
    display: none;
    position: absolute;
    right: -0.5rem;
    z-index: 1;
    top: 3rem;
}

#changeCrosshair > ul {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: var(--default-shadow-light);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid lightgray;
    align-items: flex-end;
}

.dark #changeCrosshair > ul {
    border-color: #a3a3a3;
    box-shadow: var(--default-shadow);
}

#changeCrosshair li li {
    width: 64px;
    height: 64px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
    border-radius: 0.5rem;
    margin: 0.5rem;
    background-color: #7f8695 !important;
}

#changeCrosshair li li:not(:first-child) {
    /*border-top: 1px solid rgba(255,255,255,0.1);*/
}

#curBt {
    /*background: url(/images/cursors/2px_dashed/white.cur) no-repeat center var(--button-bg);*/
    width: 3rem;
    height: 2rem;
    position: relative;
}

#curBt:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(/images/cursors/2px_dashed/white.cur) no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.game .content .button.reset {
    margin-bottom: calc(1.5 * 1.5rem);
}

.menu + .content, script + .content, .social + .content {
    margin-top: 1.5rem;
}

.game .menu + .content, .game script + .content {
    margin-top: calc(1.5 * 1.5rem);
}

.game .title .played {
    font-size: 150%;
    font-weight: bold;
    opacity: 0.15;
    padding-left: 1rem;
    transition: var(--my-transition);
}

.game .title .played:hover {
    opacity: 0.2;
}

/* Game top */

.game .top .left-side {

}

.game .top .right-side {

}

/* Top */

.top .right-side .ad {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.improvements .head {
    border-bottom: 1px solid;
    margin: 1rem 0;
}

.improvements .body ul {
    margin-bottom: 0.5rem;
}

.game-statistics #moreStats {
    width: 100%;
    text-align: center;
}

/*                                                                                                          #liveStats
________________________________________________________________________________________________________________________
*/

/*
todo стилизовать галочки в лайфстатсе,
todo стилизовать табличку с сообщениями после игры
*/

#liveStats li .content {

}

#liveStats li > ul {
    margin-bottom: 1rem;
    /*padding: 50px;*/
}

#liveStats ul li.inactive {
    opacity: 0.5;
}

#liveStats li > span {
    width: 50%;
    min-width: 150px;
    display: inline-block;
    white-space: nowrap;
}

#liveStats li[data-id='0'] .title {
    display: none;
}

#liveStats .title {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 0.5rem;
}

.dark #liveStats .title {
    border-color: rgba(255, 255, 255, 0.15);
}

#liveStats li .content li > span {
    font-style: italic;
    font-size: smaller;
    text-align: right;
    margin-right: 1rem;
    /*color:grey;*/
}

#liveStats li[data-id='0'] .content li > span {
    font-style: normal;
    font-size: initial;
    text-align: left;
}

#liveStats li li:not(.title) {
    /*font-style:italic;*/
}

#liveStats .body {
    white-space: nowrap;
    /*overflow:hidden;*/
}

#liveStats .dashboard {
    position: absolute;
    /*right: -0.5rem;*/
    right: 0;
    top: calc(100% + 4px);
    display: flex;
    line-height: 1.2rem;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
    /*background: rgba(0,0,0,0.1);
    padding-left:0.5rem;*/
    /*background: grey;*/
}

#liveStats .dashboard > div {
    transition: var(--my-transition);
    /*font-style: italic;*/
    font-size: 85%;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid lightgrey;
    margin-left: 0.5rem;
}

.dark #liveStats .dashboard > div {
    color: #728fb1 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#liveStats .dashboard > div:hover {
    text-shadow: var(--text-hover-shadow);
    color: var(--main-color);
    cursor: pointer;
}

.dark #liveStats .dashboard > div:hover {
    text-shadow: var(--text-hover-shadow-dark) !important;
}

#liveStats .dashboard .save,
#liveStats .dashboard .cancel,
#liveStats .dashboard .reset {
    display: none;
}

/* #hitPool */

#hitPool {
    display: flex;
    justify-content: center;
}

/*                                                                                                    .profile профиль
________________________________________________________________________________________________________________________
*/

/* Структура */

.profile > .head {
    margin-bottom: 1.5rem;
}

.profile > .head .title {
    display: flex;
}

.profile > .head .title h1 {
    font-family: var(--secondary-font-family);
    font-weight: 800;
    margin-bottom: 0;
    margin-right: calc(1.5rem / 2);
}

.profile > .head .description {
    display: flex;
}

.profile > .head .description .sign {
    position: relative;
    padding: 0;
    display: inline-block;
    min-height: 1.5rem;
    vertical-align: top;
    /*font-family: var(--secondary-font-family)*/
}

.profile > .body {

}

.profile > .body .top {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1.5rem;

}

/* Элементы */

.aim-coins, .exp-coins, .exp-points, .mp-rank-points {
    /*border-radius: 0.5rem;
    padding: 3px;
    line-height: 11px;
    display: inline-block;
    text-align: center;
    text-shadow: var(--head-text-shadow);
    box-shadow: 0 1px 0 1px rgba(100, 100, 100, 0.24), 0 1px 1px 0 rgba(100, 100, 100, 0.4);
    border: 1px solid white;
    vertical-align: top;
    font-size: small;*/

    border-radius: 0.5rem;
    padding: 0 3px;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    text-shadow: var(--head-text-shadow);
    box-shadow: 0 1px 0 1px rgba(100, 100, 100, 0.24), 0 1px 1px 0 rgba(100, 100, 100, 0.4);
    border: 1px solid white;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 3px;
    font-family: var(--secondary-font-family);

    /*border-radius: 50%;
    padding: 0 3px;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    height: 17px;
    text-shadow: var(--head-text-shadow);
    box-shadow: 0 1px 0 1px rgba(100, 100, 100, 0.24), 0 2px 3px 0 rgba(100, 100, 100, 0.4);
    border: 1px solid white;
    vertical-align: text-top;*/
}

.mp-rank-points {
    font-size: small;
    color: hsl(277, 78%, 47%);
    background: hsl(277, 100%, 84%);
    padding-top: 1px;
}

.aim-coins {
    color: #796600;
    background: #ffe247;
}

.exp-coins {
    color: #00568b;
    background: lightskyblue;
}

.exp-points {
    color: grey;
    background: var(--main-game-list-bg-color);
}

.top-list .exp-points, .my-top-info .exp-points, .top-list .aim-coins, .my-top-info .aim-coins {
    /*line-height: 22px;
    border-radius: 11px;*/
}

.profile .container {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--default-shadow-light);
    border: 1px solid white;
}

.dark .profile .container {
    box-shadow: var(--default-shadow);
    border-color: #4a5c71;
    background: var(--section-bg-color-dark);
}

.profile .container .body {
    padding-left: 2rem;
    padding-right: 2rem;
}

.profile .container .head .online {
    color: #00ce00;
}

.dark .profile .container .head .online {
    color: #00ce00;
    /*color: #677f9c;*/
}

.profile .container .head .offline {
    font-weight: 400;
    font-style: italic;
    font-family: var(--primary-font-family);
    font-size: 85%;
}

.profile .sidebar .msg.button {
    margin-bottom: 1.5rem;
    display: block;
    text-align: center;
    flex-grow: 1;
}

/**/

.profile .container.avatar .head {
    /*line-height: 1.5rem;
    font-size: 80%;*/
}

.profile .container.avatar .p-online {
    line-height: 2.4rem;
}

.profile .container.avatar .body {
    padding: 0;
}

.profile .container.avatar .footer span {
    color: black;
    font-weight: bold;
}

.profile .container.info .body {
    min-height: 1.5rem;
}

.profile .container .body table {
    margin: 0.25rem 0;
    border-spacing: 0 0.5rem;
    /*border-collapse: collapse;*/
    /*display: grid;
    grid-template-columns: max-content auto;
    grid-column-gap: 1rem;
    */
}

.profile .container.info .body tr {
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
}

.profile .container .body tr td:first-child {
    white-space: nowrap;
    padding-right: 1rem;
    vertical-align: baseline;
    font-size: smaller;
    color: grey;
}

.profile .container .body tr td:last-child {
    max-width: 450px;
    word-wrap: break-word;
}

.dark .profile .container .body tr td:first-child {
    color: #7e98b7;
}

.profile .container.info .body .nick-list span {
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

/* Инфо */

.profile .infoLine {

}

.profile .infoLine .value {
    padding-left: 3px;
    margin-left: -3px;
    display: inline-block;
    min-width: 200px;
}

/*.profile .infoLine .value:focus {
    box-sizing: border-box;
}*/

.profile .infoLine .value:hover {
    background: var(--editable-bg);
}

.profile .infoLine .value[placeholder]:empty:before {
    content: attr(placeholder);
    color: lightgrey;
}

.profile .infoLine .value[placeholder]:empty:focus:before {
    content: "";
}

.profile .infoLine .save {
    line-height: 1.5rem;
    display: none;
}

.profile .container.info .body .section:not(.content0) {
    display: none;
}

.profile .container.info .notFilled {
    border-top: 3px solid rgba(255, 50, 50, 0.5);
    margin-top: -3px;
}

.profile .menu > li > div {
    cursor: pointer;
    /*margin-left:0.5rem;
    margin-right:0.5rem;*/
}

.profile .menu > li {
    /*margin: 0 0.5rem;*/
}

.profile .menu {
    margin-top: 0 !important;
    margin-bottom: 1rem;
}

.profile .container.info .body:not(.info) {
    display: none;
}

/*.profile .container.info .menuButton {
    margin-bottom: -2px;
}*/

/*.profile .container.info .menuButton.selected {
    border-bottom: none;
}

.profile .container.info .menuButton.selected:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: black;
}*/

.profile .content .body.activ ul li a {
    display: inline-block;
}

.profile .content .body.activ ul .spacer {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.dark .profile .content .body.activ ul .spacer {
    color: #b6cce9;
}

.profile .content .body.activ ul .spacer:after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 50%, transparent);
}

.profile .content .body.activ ul .spacer span {

}

.profile .content .body.activ .type-line {
    height: 2px;
    margin-top: -3px;
}

.profile .content .body.activ .box-button {
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(171, 171, 171, 0.1) 50%, transparent);
    border-radius: 4px;
    font-size: smaller;
}

.profile .content .body.activ .box-button:hover {
    background: linear-gradient(90deg, rgba(171, 171, 171, 0.2), transparent);
}

.profile .content .body.activ .box-button:before {
    content: "›";
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 130%;
    transform: rotate(90deg);
    line-height: 0;
    vertical-align: middle;
    margin-top: -1px;
}

.profile .content .body.activ .box-button.collapse:before {
    transform: rotate(-90deg);
}

.profile .content .body.activ .box-content {
    display: none;
}

.profile .content .body.activ .time {
    display: inline-block;
    width: 30px;
    margin-right: 1rem;
    margin-left: 1rem;
}

.profile .content .body.activ .subtitle {
    text-align: right;
    /*font-style: italic;*/
    margin-bottom: -0.5rem;
    margin-top: -0.25rem;
}

.profile .content .body.activ .comment-preview {
    /*font-style: italic;*/
    /*font-size: small;*/
}

.profile .content .body.activ .game-link {
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.profile .content .body.activ .score-events {
    font-weight: bold;
    display: inline-block;
}

.profile .content .body.activ .score-events span {
    font-size: 150%;
    line-height: 1rem;
    font-weight: normal;
}

.profile .content .body.activ .score-events:before {
    content: '— '
}

.profile .container.info .body.activ li:not(.spacer) {
    color: grey;
    font-size: smaller;
}

.dark .profile .container.info .body.activ li:not(.spacer) {
    color: #7e98b7;
}

.profile .container.info .body.activ a {
    color: initial;
    /*font-size: initial;*/
}

.dark .profile .container.info .body.activ a {
    color: var(--color-dark);
}

.profile .content .body.activ .score-events a {
    /*vertical-align: bottom;*/
    font-size: inherit;
}

.dark .profile .content .body.activ .score-events a {
    color: #7e98b7;
}

.social-links {
    margin-left: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

.social {
    display: inline-block;
}

/**/

.profile .container.own-games {

}

.profile .container.own-games .type-line {
    margin-bottom: 0.25rem;
}

.profile .container.own-games .body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 1.5rem;
    margin-bottom: 1rem;
}

.profile .container.own-games ul {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    list-style-type: none;
    line-height: 2rem;
}

.profile .container.own-games li {
    /*margin-top: 0.25rem;*/
    display: flex;
    column-gap: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    align-items: baseline;
}

.profile .container.own-games li .game-link {
    font-family: var(--secondary-font-family);
    font-weight: 500;
    padding-top: 0.25rem;
    /*white-space: nowrap;*/
}

.profile .container.own-games li > span {
    font-size: smaller;
    color: grey;
    height: 1.2rem;
    white-space: nowrap;
}

.dark .profile .container.own-games li > span {
    color: #7e98b7;
}

.profile .container.own-games li > span:last-child {
    margin-left: auto;
}

/*user stats*/

.profile .content .body.stats {

}

.profile .content .body.stats table {
    border-collapse: collapse;
}

.profile .content .body.stats .section > div {
    border: 1px solid;

}

.profile .content .body.stats tr:not(.game-type) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .profile .content .body.stats tr:not(.game-type) {
    border-color: rgba(0, 0, 0, 0.2);
}

.profile .content .body.stats tr:first-child {
    border-bottom: 2px solid rgba(0, 0, 0, 1);
    /*font-size: smaller;*/
}

.dark .profile .content .body.stats tr:first-child {
    color: #7e98b7;
}

/*.profile .content .body.stats tr:first-child td:first-child {
    font-size: 100%;
}*/

.profile .content .body.stats tr:first-child + .game-type {
    padding-top: 1.5rem;
}

.profile .content .body.stats tr.game-type {
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 0.25rem;
}

.profile .content .body.stats td .game-link {
    font-family: var(--secondary-font-family);
    font-weight: 500;
    padding-top: 0.25rem;
    display: inline-block;
}

.profile .content .body.stats td.buttons {
    font-size: 100% !important;
}

.profile .content .body.stats td:first-child {
    width: 200px;
    color: var(--main-color);
    font-size: 100%;
    /*display:flex;*/
}

.dark .profile .content .body.stats td:first-child {
    color: var(--color-dark);
}

/*.profile .content .body.stats td:first-child a:last-child {
    margin-left:auto;
}*/

.profile .content .body.stats td:not(:first-child) {
    padding-left: 1rem;
    font-size: smaller;
    vertical-align: baseline;
}

.dark .profile .content .body.stats tr:not(:first-child) td:not(:first-child):not(:last-child) {
    color: #b6cce9;
}

.profile .content .body.stats .tp-box {
    position: relative;
}

.profile .content .body.stats .tp-button {
    display: inline-block;
    line-height: 1rem;
    cursor: pointer;
}

.profile .content .body.stats .tp-content {
    display: none;
    position: absolute;
    left: 40px;
    top: -40px;
}

.profile .content .body.stats#gameGraphics {
    margin: 0;
}

.profile .content .body.stats#gameGraphics .axis-description-y {
    text-anchor: start;
}

.profile .content .body.stats#gameGraphics .extreme-value-text.best {
    font-size: 100%;
}

.profile .content .body.stats#gameGraphics .graphic-point-text {
    font-weight: normal;
}

.profile .content .body.stats#gameGraphics .graphic-line.default {
    fill: rgba(0, 165, 255, 0.1);
}

.profile .content .body.stats#gameGraphics .g-head {
    font-family: var(--secondary-font-family);
    font-weight: 500;
    font-size: initial;
    margin-bottom: 1rem;
}

.dark .profile .content .body.stats#gameGraphics .g-head {
    color: var(--color-dark);
}

.profile .content .body.stats#gameGraphics .tp-content.ajaxResponse {
    padding-bottom: 0.25rem;
}

.profile .body-after {
    margin-top: 1rem;
}

.profile .body-after a {
    font-family: var(--secondary-font-family);
    font-weight: 500;
    display: inline-block;
    border-top: 1px solid lightgray;
    padding-top: 0.25rem;
}

/*.profile .content .body.stats td.head-line {
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 50%, transparent);
}*/

/*                                                                                                            медальки
________________________________________________________________________________________________________________________
*/

.profile .container.achievement .body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    column-gap: 1.7rem;

}

.profile .container.achievement .spacer {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.2) 60%, transparent);
    margin: 1rem 0;
}

.profile .container.achievement .life {
    height: 4px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    opacity: 0.85;
    border: 1px solid transparent;
}

.profile .container.achievement .life:hover {
    opacity: 1;
}

.profile .container.achievement .life div {
    height: 100%;
    background: whitesmoke;
}

.profile .sub-section {
    display: flex;
    column-gap: 1.5rem;
}

.profile .sub-section > div {
    width: 100%
}

.profile .sub-section .head > span {
    /*color:initial;*/
}

.profile .sub-section .head a {
    border-bottom: 1px solid;
}

.profile .sub-section .head a:hover {
    color: #324760;
    text-shadow: inherit;
}

/*.dark .profile .sub-section .head a:hover {
    color: #324760;
}*/

/*.dark .profile .container.achievement .life {
    background: #b6cce9;
}

.dark .profile .container.achievement .life div {
    background: #395475;
}*/

.award {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 55px;
    height: 83px;
    /*background: rgba(0, 0, 50, 0.03) no-repeat center;*/
    background: transparent no-repeat center;
    border-radius: 0.5rem;
}

.award .num {
    color: whitesmoke;
    font-size: 11px;
    padding-right: 1px;
    /*font-family: var(--secondary-font-family);*/
    font-weight: bold;
    line-height: 11px;
    pointer-events: none;
}

.award.regular-visitor {
    background-image: url(/images/awards/regular-visitor.png);
}

.award.regular-visitor .num, .award.exp .num {
    margin-bottom: 9px;
    color: white;
    background: linear-gradient(45deg, lightgrey, white, lightgrey);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.award.game:not(.ext) {
    background-position-y: -5px;
}

.award.game {
    align-items: flex-start;
}

.award.game .num {
    color: black;
    margin-top: 16px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.8);
}

.award.game.ext .num {

}

.award.type.a10 {
    background-image: url(/images/awards/medals/a/type-10.png);
}

.award.type.a50 {
    background-image: url(/images/awards/medals/a/type-50.png);
}

.award.type.a100 {
    background-image: url(/images/awards/medals/a/type-100.png);
}

.award.game.a10 {
    background-image: url(/images/awards/medals/a/game-10.png);
}

.award.game.a50 {
    background-image: url(/images/awards/medals/a/game-50.png);
}

.award.game.a100 {
    background-image: url(/images/awards/medals/a/game-100.png);
}

.award.popularity.top-10 {
    background-image: url(/images/awards/popularity/top_10.png);
}

.award.popularity.top-50 {
    background-image: url(/images/awards/popularity/top_50.png);
}

.award.popularity.top-100 {
    background-image: url(/images/awards/popularity/top_100.png);
}

.award.donate.top-10 {
    background-image: url(/images/awards/donate/top_10.png);
    width: 60px;
}

.award.donate.top-50 {
    background-image: url(/images/awards/donate/top_50.png);
}

.award.donate.top-100 {
    background-image: url(/images/awards/donate/top_100.png);
}

.award.popularity .num {
    margin-bottom: 36px;
    margin-left: 1px;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.8), 1px -1px 2px rgba(255, 255, 255, 0.8), -1px 1px 2px rgba(255, 255, 255, 0.8);*/
}

.award.donate .num {
    margin-bottom: 34px;
    margin-left: 1px;
}

.award.popularity.top-10 .num, .award.donate.top-10 .num {
    font-size: 14px;
    color: #EBA316;
    background: linear-gradient(45deg, white, #EBA316, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.award.popularity.top-50 .num, .award.donate.top-50 .num {
    color: #888;
    background: linear-gradient(45deg, white, #888, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.award.popularity.top-100 .num, .award.donate.top-100 .num {
    font-size: 10px;
    color: #cC603B;
    background: linear-gradient(45deg, white, #cC603B, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.6), 1px -1px 2px rgba(255, 255, 255, 0.6), -1px 1px 2px rgba(255, 255, 255, 0.6);*/
}

/* За опыт */

.award.exp.top-10 {
    background-image: url(/images/awards/exp/top_10.png);
    width: 60px;
}

.award.exp.top-50 {
    background-image: url(/images/awards/exp/top_50.png);
}

.award.exp.top-100 {
    background-image: url(/images/awards/exp/top_100.png);
}

.homepage-award {
    width: 41px;
    height: 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.7);
    font-size: smaller;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/*.homepage-award.top100 {
    background-image: url(/images/awards/medals/a/game-100-block.png);
}

.homepage-award.top50 {
    background-image: url(/images/awards/medals/game-50-block.png);
}

.homepage-award.top10 {
    background-image: url(/images/awards/medals/game-10-block.png);
}*/

/*                                                                                                          скины skin
________________________________________________________________________________________________________________________
*/

/*Office*/
.skin-1 {
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, .1),
    0 0 2px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15) !important;
}

.dark .skin-1 {
    /*color: black;*/
    text-shadow: 0 1px 0 rgba(204, 204, 204, .6),
    0 2px 0 rgba(201, 201, 201, .5),
    0 3px 0 rgba(187, 187, 187, .4),
    0 4px 0 rgba(185, 185, 185, .3),
    0 5px 0 rgba(170, 170, 170, .2),
    0 6px 1px rgba(0, 0, 0, .1),
    0 0 5px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15) !important;
}

/*Hockey*/
.skin-2 {
    text-shadow: 0 3px 0 #b2a98f,
    0 14px 10px rgba(0, 0, 0, 0.15),
    0 18px 2px rgba(0, 0, 0, 0.1),
    0 24px 30px rgba(0, 0, 0, 0.1) !important;
}

.dark .skin-2 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5),
    -1px -1px 2px rgba(0, 0, 0, 0.5),
    0 3px 0 #b2a98f,
    0 14px 10px rgba(255, 255, 255, 0.15),
    0 18px 2px rgba(255, 255, 255, 0.1),
    0 24px 30px rgba(255, 255, 255, 0.1) !important;
}

/*Simple shadow*/
.skin-3 {
    text-shadow: 0 4px 3px rgba(0, 0, 0, 0.4),
    0 3px 13px rgba(0, 0, 0, 0.1),
    0 6px 23px rgba(0, 0, 0, 0.1) !important;
}

.dark .skin-3 {
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5),
    -1px -1px 2px rgba(0, 0, 0, 0.5),
    0 4px 3px rgba(255, 255, 255, 0.4),
    0 3px 13px rgba(255, 255, 255, 0.1),
    0 6px 23px rgba(255, 255, 255, 0.1) !important;
}

/*Reflection*/
.skin-4 {
    text-shadow: 4px 3px 0 #fff, 9px 8px 0 rgba(0, 0, 0, 0.15) !important;
}

.dark .skin-4 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5), 4px 3px 0 rgba(255, 255, 255, 0.4), 9px 8px 0 rgba(0, 0, 0, 0.15) !important;
}

/*Superhero*/
.skin-5 {
    text-shadow: -6px -4px 0 #00e6e6,
    -16px -9px 0 #01cccc,
    -26px -14px 0 #00bdbd !important;
}

.dark .skin-5 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5),
    -1px -1px 3px rgba(0, 0, 0, 0.5),
    -6px -4px 0 #00e6e6,
    -16px -9px 0 #01cccc,
    -26px -14px 0 #00bdbd !important;
}

/*Shaking*/
.skin-6 {
    text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
    -3px 3px hsla(0, 0%, 60%, .2),
    -2px 2px hsla(0, 0%, 70%, .2),
    -1px 1px hsla(0, 0%, 70%, .2),
    0 0 hsla(0, 0%, 50%, .5),
    1px -1px hsla(0, 0%, 30%, .6),
    2px -2px hsla(0, 0%, 30%, .7),
    3px -3px hsla(0, 0%, 32%, .8),
    4px -4px hsla(0, 0%, 30%, .9),
    5px -5px hsla(0, 0%, 30%, 1.0) !important;
}

.dark .skin-6 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5),
    -1px -1px 3px rgba(0, 0, 0, 0.5),
    -4px 4px rgba(57, 84, 117, 1),
    -3px 3px rgba(57, 84, 117, .8),
    -2px 2px rgba(57, 84, 117, .6),
    -1px 1px rgba(57, 84, 117, .4),
    0 0 rgba(182, 204, 233, 0.2),
    1px -1px rgba(182, 204, 233, 0.3),
    2px -2px rgba(182, 204, 233, 0.4),
    3px -3px rgba(182, 204, 233, 0.5),
    4px -4px rgba(182, 204, 233, 0.6),
    5px -5px rgba(182, 204, 233, 0.7) !important;
}

/*Flame*/
.skin-7 {
    /*text-shadow: 0 0 10px #fefcc9, 5px -5px 10px #feec85,
    -10px -10px 15px #ffae34,
    10px -14px 20px #ec760c,
    -10px -20px 25px #cd4606,
    0 -10px 20px #973716,
    5px -10px 25px #451b0e !important;
    color: #4b2400;*/
    text-shadow: 1px 1px 3px #feec85,
    -1px -1px 3px #973716,
    0 0 10px #fefcc9,
    5px -5px 10px #feec85,
    -10px -10px 15px #ffae34,
    10px -14px 20px #ec760c,
    -10px -20px 25px #cd4606,
    0 -10px 20px #973716,
    5px -10px 25px #451b0e !important
}

.dark .skin-7 {
    /*text-shadow: 1px 1px 3px #973716,
    -1px -1px 3px #973716,
    0 0 10px #fefcc9,
    5px -5px 10px #feec85,
    -10px -10px 15px #ffae34,
    10px -14px 20px #ec760c,
    -10px -20px 25px #cd4606,
    0 -10px 20px #973716,
    5px -10px 25px #451b0e !important;*/
    color: black;
}

/*Neon*/
.skin-8 {
    text-shadow: 0 0 5px #fff,
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 10px #ff00de,
    0 0 15px #ff00de,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 55px #ff00de !important;

    /*text-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px #ff00de,
    0 0 35px #ff00de,
    0 0 40px #ff00de,
    0 0 50px #ff00de,
    0 0 75px #ff00de !important;*/

    color: #a919b0;
}

/*Vintage*/
.skin-9 {
    text-shadow: 1px 1px 0 #eee, 2px 2px 0 #707070 !important;
}

.dark .skin-9 {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 1), 2px 2px 0 rgba(182, 204, 233, 0.5) !important;
}

/*Interior*/
.skin-10 {
    background-color: #666666;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5), 0 0 #333 !important;
}

.dark .skin-10 {
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5),
    0 0 #333,
    3px 3px 3px white,
    -3px -3px 3px white,
    -3px 3px 3px white,
    3px -3px 3px white !important;
    /*text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.5),
    0 0 #333,
    3px 3px 5px white,
    -1px -1px 0 rgba(182, 204, 233, 0.5),
    -1px 1px 1px rgba(182, 204, 233, 0.5),
    1px -1px 1px rgba(182, 204, 233, 0.5) !important;*/
}

/*Tabby*/
.skin-11, .skin-11:hover {
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: initial !important;
}

/*.skin-12 {
    background: repeating-linear-gradient(0deg, rgba(255,0,0,0.2), rgba(255,0,0,0.2) 3px, rgba(255,0,0,0.4) 3px, rgba(255,0,0,0.4) 4px), repeating-linear-gradient(90deg, rgba(255,0,0,0.2), rgba(255,0,0,0.2) 3px, rgba(255,0,0,0.4) 3px, rgba(255,0,0,0.4) 4px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}*/

/*Eclipse*/
.skin-12 {
    text-shadow: 1px -1px 3px #fff, -1px 1px 3px #fff,
    -1px 1px 1px rgba(0, 0, 0, 0.175),
    -2px 1px 1px rgba(0, 0, 0, 0.17),
    -3px 2px 1px rgba(0, 0, 0, 0.165),
    -4px 2px 1px rgba(0, 0, 0, 0.16),
    -5px 3px 1px rgba(0, 0, 0, 0.155),
    -6px 3px 1px rgba(0, 0, 0, 0.15),
    -7px 4px 1px rgba(0, 0, 0, 0.145),
    -8px 4px 1px rgba(0, 0, 0, 0.14),
    -9px 5px 1px rgba(0, 0, 0, 0.135),
    -10px 5px 1px rgba(0, 0, 0, 0.13),
    -11px 6px 1px rgba(0, 0, 0, 0.125),
    -12px 6px 1px rgba(0, 0, 0, 0.12),
    -13px 7px 1px rgba(0, 0, 0, 0.115),
    -14px 7px 1px rgba(0, 0, 0, 0.11),
    -15px 8px 1px rgba(0, 0, 0, 0.105),
    -16px 8px 1px rgba(0, 0, 0, 0.1),
    -17px 9px 1px rgba(0, 0, 0, 0.095),
    -18px 9px 1px rgba(0, 0, 0, 0.09),
    -19px 10px 1px rgba(0, 0, 0, 0.085),
    -20px 10px 1px rgba(0, 0, 0, 0.08),
    -21px 11px 1px rgba(0, 0, 0, 0.075),
    -22px 11px 1px rgba(0, 0, 0, 0.07),
    -23px 12px 1px rgba(0, 0, 0, 0.065),
    -24px 12px 1px rgba(0, 0, 0, 0.06),
    -25px 13px 1px rgba(0, 0, 0, 0.055),
    -26px 13px 1px rgba(0, 0, 0, 0.05) !important;
}

.dark .skin-12 {
    text-shadow: 0 0 2px #000, 0 0 2px #000,
    -1px 1px 1px rgba(255, 255, 255, 0.175),
    -2px 1px 1px rgba(255, 255, 255, 0.17),
    -3px 2px 1px rgba(255, 255, 255, 0.165),
    -4px 2px 1px rgba(255, 255, 255, 0.16),
    -5px 3px 1px rgba(255, 255, 255, 0.155),
    -6px 3px 1px rgba(255, 255, 255, 0.15),
    -7px 4px 1px rgba(255, 255, 255, 0.145),
    -8px 4px 1px rgba(255, 255, 255, 0.14),
    -9px 5px 1px rgba(255, 255, 255, 0.135),
    -10px 5px 1px rgba(255, 255, 255, 0.13),
    -11px 6px 1px rgba(255, 255, 255, 0.125),
    -12px 6px 1px rgba(255, 255, 255, 0.12),
    -13px 7px 1px rgba(255, 255, 255, 0.115),
    -14px 7px 1px rgba(255, 255, 255, 0.11),
    -15px 8px 1px rgba(255, 255, 255, 0.105),
    -16px 8px 1px rgba(255, 255, 255, 0.1),
    -17px 9px 1px rgba(255, 255, 255, 0.095),
    -18px 9px 1px rgba(255, 255, 255, 0.09),
    -19px 10px 1px rgba(255, 255, 255, 0.085),
    -20px 10px 1px rgba(255, 255, 255, 0.08),
    -21px 11px 1px rgba(255, 255, 255, 0.075),
    -22px 11px 1px rgba(255, 255, 255, 0.07),
    -23px 12px 1px rgba(255, 255, 255, 0.065),
    -24px 12px 1px rgba(255, 255, 255, 0.06),
    -25px 13px 1px rgba(255, 255, 255, 0.055),
    -26px 13px 1px rgba(255, 255, 255, 0.05) !important;
}

/*Empty*/
.skin-13 {
    color: transparent;
    -webkit-text-stroke: 1px var(--main-color);
}

.dark .skin-13 {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-dark);
}

/*Tabby shadow*/
.skin-14 {
    background: repeating-linear-gradient(45deg, grey, grey 1px, white 2px, white 3px);
    -webkit-background-clip: text;
    text-shadow: -5px -4px var(--main-color), -4px -3px #fff;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5);
}

.dark .skin-14 {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 2px, transparent 3px);
    -webkit-background-clip: text;
    text-shadow: -5px -4px white, -4px -3px black;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
}

/*V-striped*/
.skin-15 {
    background: repeating-linear-gradient(90deg, grey, grey 1px, white 1px, white 2px);
    -webkit-background-clip: text;
    /*text-shadow: var(--text-hover-shadow);*/
    color: transparent;
}

/*Sea*/
.skin-16 {
    /*background: repeating-linear-gradient(45deg, grey, grey 1px, white 2px, white 3px);
    -webkit-background-clip: text;
    text-shadow: var(--text-hover-shadow);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.8);*/

    text-shadow: var(--text-hover-shadow);
    -webkit-text-stroke: 1px #87cefa;
    color: #00609b;
}

.dark .skin-16 {
    text-shadow: var(--text-hover-shadow-dark);
}

/*pit*/
.skin-17 {
    /*background: repeating-linear-gradient(45deg, black, black 1px, white 2px, white 3px);
    -webkit-background-clip: text;
    text-shadow: 0 0 10px white, -5px -2px black, -4px -1px #fff;
    color: transparent;
    -webkit-text-stroke: 1px black;*/

    background: repeating-linear-gradient(180deg, black, black 1px, white 1px, white 2px);
    -webkit-background-clip: text;
    text-shadow: 0 0 10px white, -5px -2px black, -4px -1px #fff;
    color: transparent;
    /* -webkit-text-stroke: 1px black; */
    margin-left: 5px;
}

.dark .skin-17 {
    text-shadow: 0 0 10px rgba(37, 53, 72, 0.75), -5px -2px white, -4px -1px black;
}

/*diagonal gradient, Zebra*/
.skin-18 {
    /*background: repeating-linear-gradient(45deg, black, black 1px, white 2px, white 3px);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px black;*/
    background: repeating-linear-gradient(45deg, black, black 0px, transparent 9px);
    -webkit-background-clip: text;
    color: transparent;
}

.dark .skin-18 {
    background: repeating-linear-gradient(45deg, white, white 0px, transparent 9px);
    -webkit-background-clip: text;
    color: transparent;
}

/*H-striped*/
.skin-19 {
    /*
    background: repeating-linear-gradient(
0deg
, black, black 1px, rgba(255, 255, 255, 0.8) 1px, rgba(255, 255, 255, 0.8) 2px), repeating-linear-gradient(
0deg
, white, white 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
     */

    background: repeating-linear-gradient(0deg, black, black 1px, rgba(255, 255, 255, 0.8) 1px, rgba(255, 255, 255, 0.8) 2px),
    repeating-linear-gradient(0deg, white, white 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-19 {
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, white 1px, white 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

/*breeze*/
.skin-20 {
    background: repeating-linear-gradient(0deg, black, black 1px, white 1px, white 2px);
    -webkit-background-clip: text;
    text-shadow: 0 0 10px #87cefa, -5px -3px #465298;
    color: transparent;
    -webkit-text-stroke: 1px white;
}

/*H-striped outline*/
.skin-21 {
    background: repeating-linear-gradient(0deg, black, black 1px, rgba(255, 255, 255, 0.8) 1px,
    rgba(255, 255, 255, 0.8) 2px), repeating-linear-gradient(0deg, white, white 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 2px);
    -webkit-background-clip: text;
    color: transparent;
    /* text-shadow: 1px 1px 0 #eee, 2px 2px 0 #707070 !important; */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1);
}

/*Deep light*/
.skin-22 {
    background: linear-gradient(-45deg, #ffdd9c 10%, #feec85, #EBA316 90%);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 3px white, var(--text-hover-shadow);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8);

    /*background: linear-gradient(-45deg, #ffdd9c 10%, #feec85, #EBA316 90%);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0,0,0,0.3);*/
}

/*Gold bar*/
.skin-23 {
    color: transparent;
    text-shadow: 1px 0 2px #feec85, -1px -1px 2px #973716;
}

.skin-23:hover {
    text-shadow: 1px 0 2px #feec85, -1px -1px 2px #973716, 3px 3px 7px black !important;
}

/*.skin-23:hover {
    color:goldenrod;
    -webkit-text-stroke: 1px var(--color-dark);
    text-shadow: initial !important;
}*/

.dark .skin-23 {
    text-shadow: 1px 0 2px #feec85, -1px -1px 2px #973716, -1px -1px 4px #000;
}

/*Silver bar*/
.skin-24 {
    color: transparent;
    text-shadow: 1px 0 2px #ffffff, -1px -1px 2px #000000;
}

.skin-24:hover {
    text-shadow: 1px 0 2px #ffffff, -1px -1px 2px #000000, 3px 3px 7px black !important;
}

/*Small Grid*/
.skin-25 {
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-25 {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*Medium Grid*/
.skin-26 {
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 2px, transparent 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 2px, transparent 2px, transparent 3px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-26 {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 2px, transparent 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 2px, transparent 2px, transparent 3px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*Large Grid*/
.skin-27 {
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 3px, transparent 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 3px, transparent 3px, transparent 4px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-27 {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 3px, transparent 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 3px, transparent 3px, transparent 4px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*textile*/
.skin-28 {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.5) 4px, rgba(0, 0, 0, 0.5) 8px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.5) 4px, rgba(0, 0, 0, 0.5) 8px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-28 {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 4px, rgba(255, 255, 255, 0.5) 4px, rgba(255, 255, 255, 0.5) 8px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 4px, rgba(255, 255, 255, 0.5) 4px, rgba(255, 255, 255, 0.5) 8px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*Oblique grid small*/
.skin-29 {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-29 {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*Oblique grid medium*/
.skin-30 {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 2px, transparent 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 2px, transparent 2px, transparent 3px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-30 {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 2px, transparent 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 2px, transparent 2px, transparent 3px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*Oblique grid large*/
.skin-31 {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 3px, transparent 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 3px, transparent 3px, transparent 4px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-31 {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 3px, transparent 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 3px, transparent 3px, transparent 4px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*Oblique lines*/
.skin-32 {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 2px, transparent 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 2px, transparent 2px, transparent 2px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--text-hover-shadow);
}

.dark .skin-32 {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85) 1px, transparent 1px, transparent 3px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/*
хороший
text-shadow: 2px 0 2px #feec85, -1px -1px 2px #973716 !important;
    -webkit-text-stroke: 1px var(--color-dark);
 */

/*
repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0,0,0,0.5) 4px, rgba(0,0,0,0.5) 5px),    repeating-linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 4px, transparent 4px, transparent 5px)
 */

/*

    background: repeating-linear-gradient(
90deg
, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 3px, transparent 3px, transparent 4px), repeating-linear-gradient(
0deg
, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 3px, transparent 3px, transparent 4px);
    -webkit-background-clip: text;
color: transparent;

 */

/*
{
color: transparent;
-webkit-text-stroke: 1px blue;
}

{
background: repeating-linear-gradient(45deg, blue, blue 1px, white 2px, white 3px);
-webkit-background-clip: text;
text-shadow: -5px -2px blue, -4px -1px #fff;
color: transparent;
-webkit-text-stroke: 1px blue;
}

{
    background: repeating-linear-gradient(
45deg
, blue, blue 1px, white 2px, white 3px);
    -webkit-background-clip: text;
    text-shadow: 0 0 10px white, -5px -2px blue, -4px -1px #fff;
color: transparent;
-webkit-text-stroke: 1px blue;
}

{
    background: repeating-linear-gradient(
45deg
, blue, blue 1px, white 2px, white 3px);
    -webkit-background-clip: text;
color: transparent;
-webkit-text-stroke: 1px blue;
}

{
-webkit-text-stroke: .04em black;
}

 */

/*.skin-12:hover {
    text-shadow: 1px -1px 3px #000, -1px 1px 3px #000 !important;
    color:white;
}*/

/*.skin-13 {
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.05),
    -2px 5px 1px rgba(0, 0, 0, 0.1),
    -4px 6px 0 rgba(0, 0, 0, 0.15),
    -6px 7px 0 rgba(0, 0, 0, 0.2),
    -8px 8px 0 rgba(0, 0, 0, 0.25),
    -10px 9px 0 rgba(0, 0, 0, 0.3),
    -12px 10px 0 rgba(0, 0, 0, 0.35),
    -14px 11px 0 rgba(0, 0, 0, 0.4)
}*/

/*---*/

.skin-25:hover,
.skin-26:hover,
.skin-27:hover,
.skin-28:hover,
.skin-29:hover,
.skin-30:hover,
.skin-31:hover,
.skin-32:hover {
    /*text-shadow: var(--text-hover-shadow-dark) !important;*/
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    text-shadow: initial !important;
}

.dark .skin-25:hover,
.dark .skin-26:hover,
.dark .skin-27:hover,
.dark .skin-28:hover,
.dark .skin-29:hover,
.dark .skin-30:hover,
.dark .skin-31:hover,
.dark .skin-32:hover {
    text-shadow: var(--text-hover-shadow-dark) !important;
    /*-webkit-text-stroke: 1px rgba(0,0,0,0.5);*/
}

.has-skin.skin-1:hover,
.has-skin.skin-2:hover,
.has-skin.skin-3:hover,
.has-skin.skin-4:hover,
.has-skin.skin-5:hover,
.has-skin.skin-6:hover,
.has-skin.skin-7:hover,
.has-skin.skin-8:hover,
.has-skin.skin-9:hover,
.has-skin.skin-10:hover,
.has-skin.skin-16:hover,
.has-skin.skin-19:hover,
.has-skin.skin-12:hover,
.has-skin.skin-22:hover {
    text-shadow: initial !important;
}

/*                                                                                                              Аватар
________________________________________________________________________________________________________________________
*/

#avatar {
    position: relative;
    display: flex;
    justify-content: center;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
}

#avatar form .button {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#avatar form .button:hover {
    color: white;
    background: black !important;
    /* border:1px solid lightgrey;*/
}

#avatarUpload {
    bottom: 5px;
    left: 5px;
}

#avatarDelete {
    top: 5px;
    right: 5px;
}

#avatarDelete .button {
    margin: 0 !important;
}

/*#avatarDelete .response > div {
    right: 1pt;
}*/

#avatarUpload,
#avatarDelete {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    /* color: white; */
    /* background: rgba(0, 0, 0, 0.25); */
    /* padding: 0 5px; */
    /* border-radius: 3px; */
    transition: var(--my-transition);
}

#avatar:hover #avatarUpload,
#avatar:hover #avatarDelete {
    opacity: 1;
    visibility: visible;
}

#avatarImage {
    cursor: zoom-in;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0 -1px;
}

#avatarImage .preloader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
}

#avatarImage img {
    display: block;
}

#avatarImage .default, .msg-opp-info .default {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    background: rgba(0, 0, 50, 0.04);
    cursor: default;
}

#avatarControlPanel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    pointer-events: none;
}

#avatarControlPanel .c-pointer {
    pointer-events: all;
    cursor: pointer;
}

/* Загрузка аватара */

.upload-container {
    position: relative;
    z-index: 10;
}

.upload-container input[type=file] {
    /*noinspection CssFloatPxLength*/
    width: 0.1px;
    /*noinspection CssFloatPxLength*/
    height: 0.1px;
    opacity: 0;
    position: absolute;
    z-index: -10;
}

/* Разворачивание аватара */

.expanded-image {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.expanded-image {
    z-index: 9999;
    cursor: zoom-out;
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

/*                                                                                                   Подпись в профиле
________________________________________________________________________________________________________________________
*/

#signEdit {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}

#signEdit:hover {
    background: var(--editable-bg);
}

#signPlaceholder {
    padding: 0;
}

#signContent {
    padding: 0;
    /*noinspection CssInvalidPropertyValue*/
    overflow-wrap: anywhere;
    word-wrap: break-word;
    /*noinspection CssInvalidPropertyValue*/
    word-break: break-word;
}

#signEdit, #signContent {
    /*font-style: italic;*/
}

#signEditForm {
    visibility: hidden;
    position: absolute;
    top: -24px;
    left: -26px;
    background: var(--popup-bg-color);
    padding: 1rem;
    border: 1px solid white;
    /* flex-direction: column; */
    z-index: 1;
    border-radius: 0.5rem;
    box-shadow: var(--default-shadow-light);
}

.dark #signEditForm {
    background: var(--bg-dark);
    border-color: #46586d;
    box-shadow: var(--default-shadow);
}

#signEditForm textarea {
    resize: none;
    margin-bottom: 0.5rem;
    height: 1.5rem;
    padding: 0.5rem;
    min-width: 350px;
    /*font-style: italic;*/
    outline: none;
    box-shadow: var(--input-inset-shadow);
}

#signEditForm button {
    /*margin-right: 5px;*/
}

/*                                                                                                         Регистрация
________________________________________________________________________________________________________________________
*/

#regFormContainer {
    margin-top: 1.5rem;
}

#regForm a {
    text-decoration: underline;
}

#regForm table {
    border-collapse: separate;
    border-spacing: 0 1rem;
}

#regForm table td:first-child {
    padding-right: 1rem;
}

#regForm table td:nth-child(3) {
    padding-left: 0.5rem;
    font-style: italic;
}

#regFormContainer p {
    margin-bottom: 0.5rem;
}

#confirmForm button,
#pwRecoverForm button {
    margin-left: 0.5rem;
}

.confirm-pw p {
    margin-bottom: 1rem;
}

#pwRecoverConfirmForm li {
    margin-bottom: 1rem;
}

.button.email-service {
    background: #0366d6;
    padding: 0.5rem 1rem;
    margin: 0.5rem 1rem;
}

.pw-recover-success p {
    margin: 1rem 0;
}

/*                                                                                                             Tooltip
________________________________________________________________________________________________________________________
*/

#tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    border: 1px solid grey;
    z-index: 999999;
    border-radius: 0.5rem;
    box-sizing: border-box;
    /*box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 3px 5px -1px rgba(0, 0, 0, 0.2);*/
    /*background: white;*/
}

/*.dark #tooltip {
    background: #7a8191;
}*/

#tooltip .arrow {
    position: absolute;
    padding: 0;
    width: 10px;
    height: 10px;
    bottom: 0;
    left: 2px;
    transform: rotate(45deg);
    transform-origin: bottom left;
    box-shadow: var(--default-shadow);
    background: white;
    border: 1px solid grey;
}

#tooltip > div:first-child {
    border: none;
    border-radius: inherit;
    /*white-space: nowrap;*/
    position: relative;
    z-index: 1;
    min-width: 50px;
    max-width: 400px;
    word-wrap: break-word;
    box-sizing: border-box;
    padding: 8px;
    background: white;
}

.dark #tooltip, .dark #tooltip > div:first-child, .dark #tooltip .arrow {
    /*background: var(--bg-dark);*/
}

.dark #tooltip, .dark #tooltip .arrow {
    border: 1px solid #46586d;
}

.dark #tooltip {
    color: var(--main-color);
}

/*                                                                                                            Элементы
________________________________________________________________________________________________________________________
*/

/* Верхняя линия */

.top-line {
    height: calc(1.5rem);
    position: absolute;
    width: 100%;
    pointer-events: none;
    top: calc(4 * 1.5rem);
    background: black;
}

/* Пользовательская кнопка */
form .button.submit, .button.inactive {
    background: lightgrey;
    color: white;
    cursor: default;
    /*border-color: lightgrey;*/
}

.button {
    cursor: pointer;
    background: var(--button-bg);
    /*line-height: calc(1.5 * 1.5rem);*/
    line-height: 2rem;
    padding: 0 calc(1.5rem / 2);
    border-radius: 0.5rem;
    box-sizing: border-box;
    color: #eeeeee;
    display: inline-block;
    /*text-decoration: none;*/
    /*-webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;*/
    /*transition: box-shadow, color, background-color 0.2s ease;*/
    transition-property: box-shadow, color, background-color, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    user-select: none;
    border: 1px solid #c5c5c5;
    white-space: nowrap;
    text-align: center;
}

.dark .button {
    background: var(--button-bg-dark) !important;
    border-color: #526b88;
}

.button.secondary {
    background: var(--button-2-bg) !important;
    opacity: 0.4;
}

.button.secondary:hover {
    opacity: 1;
}

.dark .button.secondary {
    color: white !important;
    border-color: #c5c5c5;
}

/*.button:first-letter {
    -webkit-transition-duration: 0.2s; !* Safari *!
    transition-duration: 0.2s;
}*/

.button.active {
    color: #eeeeee !important;
    background: var(--button-bg) !important;
    cursor: pointer !important;
}

/*.button:hover:first-letter {
    color:lightskyblue;
}*/

.button:not(.submit):hover,
.button:not(.submit):focus,
.button.active:hover,
.button.active:focus {
    box-shadow: var(--button-hover-shadow);
}

/*.button.active:hover:first-letter,
.button:not(.submit):hover:first-letter {
    color:lightskyblue;
}*/
/* Иконка таймера */

.timer-icon {
    width: 20px;
    height: 20px;
    /*background: url(/images/timer.png) no-repeat center;*/
    display: inline-block;
    color: lightgrey;
    margin-left: 0.5rem;
    font-size: 150%;
}

.timer-icon:before {
    content: "⌚";
}

.timer-icon:hover {
    color: black;
}

.dark .timer-icon {
    color: #b6cce9;
}

.dark .timer-icon:hover {
    color: white;
}

/* Индикаторы форм */

.rusIndicator,
.capsIndicator {
    display: none;
}

/* Поле пароля */

.showPass {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(/images/eye.png) no-repeat 0 0;
    cursor: pointer;
    margin-left: calc(-15px - 1.5rem / 2);
    vertical-align: middle;
}

#regForm .showPass {
    margin-right: 15px;
}

.closed-eye {
    background-position: 100% 0 !important;
}

/* Иконки групп пользователя */

.user-group-icons {
    display: inline-flex;
    align-items: baseline;
    font-size: 21px; /*Строго для эмоджи*/
    margin-right: 0.5rem;
    vertical-align: text-bottom;
}

.profile .title .user-group-icons {
    margin-top: -0.25rem;
}

h1 .user-group-icons {
    vertical-align: initial;
}

.dialog-list .user-group-icons {
    vertical-align: top;
    margin-right: 0.25rem;
}

.dialog-list .online + .user-group-icons {
    margin-left: -0.25rem;
}

.user-group-icons img {
    display: block;
    /*height: 1.5rem;*/
    /*margin-top: calc(1.5rem/2);*/
}

.user-group-icons .group:not(:last-child) {
    /*margin-right: 2px;*/
}

.user-group-icons .group {
    width: 1.5rem;
    text-align: center;
    line-height: 1.5rem; /* need */
    font-weight: normal; /* need */
    font-family: var(--primary-font-family); /* need */
    text-shadow: none; /* need */
    color: #6DB0EB;
    font-size: smaller;
}

.user-group-icons .id-1:before,
.user-group-icons .id-2:before,
.user-group-icons .id-3:before,
.user-group-icons .id-4:before {
    /*border: 1px solid;
    border-radius: 50%;*/
    height: 1.5rem;
    width: 1.5rem;
}

.user-group-icons .id-1:before { /*superuser*/
    content: "💻"; /*🐙💻🔧*/
    /*background: black;
    color: gold;*/
    display: block;
    /*border-color: black;*/
    /*line-height: 1.4rem;*/
}

.user-group-icons .id-2:before { /*admin*/
    content: "👔";
    /*background: black;
    color: white;*/
    display: block;
    /*border-color: black;*/
}

.user-group-icons .id-3:before { /*moder*/
    content: "✍"; /*✎*/
    /*background: grey;
    color: white;*/
    display: block;
    /*font-size: 26px;*/
    /*border-color: #474747;*/
}

.user-group-icons .id-4:before { /*premium*/
    content: "💎"; /*✬☆ 💎 ✯ ⭐ ⭐ 💫🌟👑*/
    /*background: gold;
    color: black;*/
    display: block;
    line-height: 1.6rem;
    /*border-color: #b49800;*/
}

/*                                                                                                  Окошко ответа AJAX
________________________________________________________________________________________________________________________
*/
.ajaxResponse a {
    text-decoration: underline;
    color: black;
}

.dark .ajaxResponse a {
    color: white;
}

/*.ajaxResponse.success {
    max-width: 400px;
}*/

.ajaxResponse, .popup {
    position: absolute;
    background: white;
    box-shadow: var(--default-shadow);
    z-index: 9998;
    border-radius: 0.5rem;
    padding: 1rem;
    /*margin-top: 15px;
    margin-left: -15px;*/
}

.dark .ajaxResponse, .popup {
    background: var(--bg-dark);
    border: 1px solid #46586d;
}

.ajaxResponse .close, #changeCrosshair .close, .game-box .close {
    position: absolute;
    top: 6px;
    right: 6px;
    cursor: pointer;
    height: 12px;
    width: 12px;
    padding: 0;
    background: url("/images/close.png") no-repeat 0 0;
    border: none;
}

.ajaxResponse .content {
    /*max-width: 400px;*/
}

.ajaxResponse .content p {
    margin-bottom: 0.5rem;
}

.ajaxResponse .button-section {
    white-space: nowrap;
    /*text-align: center;*/
    margin-top: 0.5rem;
}

.ajaxResponse .button-section > .button {
    margin-right: 0.5rem;
}

.ajaxResponse.success .content {

}

.ajaxResponse.error .content {
    color: var(--error-color);
}

.flashMessage {
    position: absolute;
    background: white;
    box-shadow: var(--default-shadow);
    padding: 10px 20px 10px 10px;
    top: 5px;
    z-index: 9999;
    opacity: 0.9;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.dark .flashMessage {
    color: var(--main-color);
}

/*                                                                                                 Графики результатов
________________________________________________________________________________________________________________________
*/

#gameGraphics {
    margin-top: calc(3 * 1.5rem);
}

#gameGraphics .section {
    margin-bottom: calc(1.5rem * 2);
}

#gameGraphics .section .head {
    font-weight: bold;
    font-size: 120%;
    position: relative;
}

#gameGraphics .section .body {
    display: flex;
    /*color: #90a3c0;*/
}

#gameGraphics .section .body .left {
    width: 60%;
}

#gameGraphics.stats .section .body .left {
    width: initial;
}

#gameGraphics .section .body .right {
    flex-grow: 1;
}

#gameGraphics .section .body .right li > span:first-child {
    width: 150px;
    display: inline-block;
}

#gameGraphics .section .body .right li:not(:first-child) > span:first-child {
    font-size: smaller;
    font-style: italic;
}

#gameGraphics .section .body .right li:first-child > span:last-child {
    font-weight: bold;
}

#gameGraphics .section .body .right ul {
    margin-top: 40px;
}

#gameGraphics .axis {
    stroke: rgba(0, 0, 0, 0.8);
    fill: none;
    marker-end: url(#endArrow);
    marker-start: url(#startArrow);
}

#gameGraphics .axis-description-x, #gameGraphics .axis-description-y {
    text-anchor: end;
}

.dark #gameGraphics .axis-description-x, .dark #gameGraphics .axis-description-y {
    fill: #6e88a7;
}

#gameGraphics .axis-description-x {
    dominant-baseline: hanging;
}

#gameGraphics .axis-gradation {
    stroke: rgba(0, 0, 0, 0.8);
    fill: none;
}

#gameGraphics .actual-bg {
    stroke: none;
    fill: url(#my-lg) rgba(0, 0, 0, 0.04);
}

#gameGraphics .bg {
    stroke: none;
    fill: rgba(0, 0, 50, 0.04);
}

.target-parts {
    pointer-events: none;
}

/*#gameGraphics .lg {

}*/

/*#gameGraphics .lg .stop1 {
    offset: 0%;
    stop-color: gold;
}

#gameGraphics .lg .stop2 {
    offset: 100%;
    stop-color: teal;
}*/

#gameGraphics .axis-gradation-text {
    font-size: 0.8rem;
    fill: rgba(0, 0, 0, 0.25);
    text-anchor: middle;
    dominant-baseline: hanging;
}

.dark #gameGraphics .axis-gradation-text {
    fill: rgba(255, 255, 255, 0.25);
}

#moreStats {
    padding: 0.5rem 2rem;
    visibility: hidden;
}

.graphic-line {
    fill: none;
}

.graphic-line.default {
    stroke: rgba(0, 0, 0, 0.5);
}

.stats .graphic-line.default {
    stroke: rgba(0, 0, 0, 0.1);
}

.dark .stats .graphic-line.default {
    stroke: rgba(255, 255, 255, 0.15);
}

.graphic-line.dynamic {
    stroke: rgb(11 199 255);
    stroke-width: 2px;
    /* stroke-dasharray: 8 2;*/
}

.graphic-line.best {
    stroke: rgba(255, 0, 0, 0.3);
    stroke-dasharray: 2;
}

.graphic-line.worst {
    stroke: rgba(0, 0, 0, 0.3);
    stroke-dasharray: 2;
}

.graphic-line.average {
    stroke: rgba(255, 0, 0, 0.3);
}

.graphic-point {
    stroke: none;
}

.graphic-point.default {
    fill: transparent;
}

.graphic-point.best {
    fill: rgba(255, 0, 0, 0.8);
}

.graphic-point.actualBest {
    fill: rgba(232, 0, 255, 1);
}

.graphic-point.worst {
    fill: rgba(0, 0, 0, 0.6);
}

.graphic-point.active {
    fill: rgba(0, 0, 255, 0.7);
}

.graphic-point-text {
    font-weight: bold;
}

.dark .graphic-point-text {
    fill: white;
}

.extreme-value-text {
    font-weight: bold;
    /*font-family: var(--secondary-font-family);*/
    text-anchor: end;
    dominant-baseline: central;
}

.extreme-value-text.best {
    fill: black;
    font-size: 120%;
}

.dark .extreme-value-text {
    fill: white;
}

.extreme-value-text > tspan > tspan {
    font-size: 0.8rem;
}

/*                                                                                                  Страницы с опциями
________________________________________________________________________________________________________________________
*/

.options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
}

.options > li {
    border-radius: 0.5rem;
    background: var(--section-bg-color);
    padding: calc(1.5rem / 2);
    box-shadow: var(--default-shadow-light);
    border: 1px solid white;
}

.dark .options > li {
    border-color: #4a5c71;
    box-shadow: var(--default-shadow);
    background: var(--section-bg-color-dark) !important;
}

.options > li li {
    margin-bottom: 1rem;
    border: 1px solid lightgrey;
    padding: 0.5rem;
}

.dark .options > li li {
    border-color: #4a5c71;
}

.options > li > div > div {
    margin-left: 40px;
}

.options input[type='number'] {
    width: 60px;
    margin-right: calc(1.5rem / 2);
}

.options > li li .body {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.options b + ul {
    margin-top: 1rem;
}

.options .body.soundList > ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}

.options .body.soundList .checkSoundBt {
    /*display: inline-block;*/
    cursor: pointer;
}

/*                                                                                                              Детали
________________________________________________________________________________________________________________________
*/

/* Демонстрация цвета в настройках */

.colorSample {
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    width: 100%;
    height: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

/* Прокрутка вверх */

#topScroll {
    position: fixed;
    left: 0;
    bottom: 0;
    /*width: calc(100% / 24);*/
    width: 70px;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.12) url(/images/arrow_top.png) no-repeat center center;*/
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
    display: none;
    cursor: pointer;
}

#topScroll:before {
    content: "❱"; /*❱❯›➵❱⇧*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* display: inline-block; */
    /* right: 0; */
    margin: auto 0;
    /* height: fit-content; */
    height: 20px;
    font-size: 390%;
    color: white;
    transition: var(--my-transition);
    transform: rotate(-90deg);
    width: 0;
}

#topScroll:hover:before {
    text-shadow: var(--text-hover-shadow);
}

.dark #topScroll:hover:before {
    text-shadow: var(--text-hover-shadow-dark) !important;
}

.topScroll.button {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-title + .content,
h1 + .content {
    margin-top: calc(1.5 * 1.5rem);
}

.article .content {
    /*margin-top: 2rem;*/
}

.article .content h2, .article .content h3 {
    margin: 1.5rem 0;
    line-height: 2rem;
}

.article.news .section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.article.news h3 {
    margin-bottom: 0;
}

.article.news p {
    margin-top: 0.5rem;
}

.article p {
    margin: 1rem 0;
}

.dark .article p, .dark .article ul {
    color: #b6cce9;
}

.article ul {
    list-style-type: circle;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.article ul, .article ol {
    margin: 1rem;
}

.article .content {
    width: 50%;
}

/*
todo в случае если есть комментарии, контент статьи 100%
 */

.article.about .content {
    width: 100%;
}

.article .content a {
    text-decoration: underline;
}

.article.about p:last-child {
    border-top: 1px solid lightgrey;
    font-size: smaller;
    padding-top: 1rem;
}

/*                                                                                                           .top-list
________________________________________________________________________________________________________________________
*/

.top-list {

}

.top-list .container {
    position: relative;
    margin-bottom: 2rem;
    border-radius: 0.6rem; /* 0.6 чтобы перекрывал под ним 0.5 */
    box-shadow: var(--default-shadow-light);
    border: 2px solid white;
}

.dark .top-list .container {
    box-shadow: var(--default-shadow);
    border-color: #43556b;
    /*border-color: #354558;*/
}

.top-list .container .body {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
}

.top-list .container .head,
.top-list .container .footer {
    display: flex;
    align-items: center;
    font-family: var(--primary-font-family);
}

.top-list .container .footer {
    /*min-height: calc(1.5 * 1.5rem);*/
    min-height: 2rem;
}

.top-list .container .head .button {
    text-shadow: none;
    line-height: 1.5rem;
    font-weight: normal;
}

.top-list .position {
    font-weight: 800;
}

.top-list .position,
.top-list .sign {
    flex-grow: 1;
}

.top-list .body > div:first-child {
    flex-grow: 1;
    display: flex;
    align-items: center;
    /*display: flex;
    align-items: center;*/
}

.top-list .nick {
    z-index: 1;
}

.top-list .nick a {
    font-family: var(--secondary-font-family);
    /*font-weight: 800;*/
    font-size: 1.5rem;

}

.top-list .ava img {
    display: block;
    border-radius: 0.5rem;
    border: 1px solid grey;
}

.dark .top-list .ava img {
    border-color: #394b61;
}

.top-list .ava a {
    display: block;
}

.top-list .ava {
    opacity: 0.85;
    margin-right: 0.5rem;
}

.top-list .ava:hover {
    opacity: 1;
}

.top-list .score {
    font-size: 150%;
    font-weight: bold;
    /*line-height: calc(1.5 * 1.5rem);*/
}

.top-list .score .value {
    /*padding-top: 0.25rem;*/
    white-space: nowrap;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.top-list .score .value.rnk {
    align-items: baseline;
    column-gap: 0.1rem;
    /*justify-content: flex-end;*/
}

.top-list .score .life {
    height: 0.75rem;
    background: linear-gradient(90deg, grey, lightgrey);
    opacity: 0.85;
    border: 1px solid grey;
    box-sizing: border-box;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.top-list .score .life.overdue {
    border-color: darkred;
}

.top-list .score .life:hover, .game-card .life:hover {
    opacity: 1;
}

.top-list .score .life div, .game-card .life div {
    height: 100%;
    background: whitesmoke;
}

.menu span.bronze {
    color: #cC603B;
    background: linear-gradient(45deg, #ffd6c8, #cC603B, #ffd6c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu span.silver {
    color: #aeacac;
    background: linear-gradient(45deg, #e6e6e6, #929292, #e6e6e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu span.gold {
    color: #EBA316;
    background: linear-gradient(45deg, #ffdd9c, #EBA316, #ffdd9c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*.game-card .bronze {
    box-shadow: 0 0 5px #cC603B;
}

.game-card .silver {
    box-shadow: 0 0 5px black;
}

.game-card .gold {
    box-shadow: 0 0 5px #EBA316;
}

.dark .game-card .bronze {
    border-color: #ecab99;
}

.dark .game-card .silver {
    border-color: #c2c5ca;
}

.dark .game-card .gold {
    border-color: #e4bf71;
}*/

.game-card .bronze .life {
    background: linear-gradient(90deg, #cC603B, #ffece6);
    border-color: white;
}

.game-card .silver .life {
    background: linear-gradient(90deg, #aeacac, #efefef);
    border-color: white;
}

.game-card .gold .life {
    background: linear-gradient(90deg, #EBA316, #ffeecc);
    border-color: white;
}

.top-list .sign {
    word-break: break-all;
    font-style: italic;
    margin-left: 0.5rem;
    /*word-wrap: break-word;*/
    /*white-space: nowrap;*/
    /*margin-right: 0.5rem;*/
}

.top-list .new {
    /*color: black;*/
}

.top-list .mini, .my-top-info .mini {
    font-size: 50%;
}

.my-top-info .mini {
    padding-left: 0.1rem;
}

.top-list .rank {
    font-size: small;
    padding: 0 0.4rem;
}

.top-list .user-group-icons .group {
    /*text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);*/
    /*border: none;*/

}

.top-list .its-me {
    box-shadow: 0 0 5px 2px black !important;
}

.top-list .top3 .nick a {
    font-weight: 800;
}

.top-list .elite .ava img,
.top-list .elite .no-ava {

}

.top-list .online, .c-online {
    /*color: #00ce00 !important;*/
    color: #00ce00 !important;
    font-size: 210% !important;
    /*position: absolute;*/
    right: calc(100% - 2px);
    text-shadow: none;
    vertical-align: top;
}

.top-list .online {
    margin-right: 0.5rem;
    font-weight: normal !important;
    vertical-align: bottom;
}

.c-online {
    margin-right: 0.25rem;
}

.p-online {
    color: #00ce00 !important;
    font-size: 200%;
    position: absolute;
    text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white, 0 0 3px white;
}

.dark .p-online {
    text-shadow: 0 0 3px black;
}

.profile .avatar .p-online:hover {
    text-shadow: 0 0 3px black;
}

.top-list .online:hover {
    /*opacity: 1;*/
}

.top-list .units {
    font-size: 1rem;
    font-weight: normal;
}

/*.top-list .container .head,
.top-list .container .footer {
    background: linear-gradient(60deg, hsl(250, 10%, 90%) 80%, hsl(250, 10%, 97%) calc(100% - 1.5rem / 2));
    font-family: var(--secondary-font-family);
    line-height: calc(1.5 * 1.5rem);
    text-shadow: var(--head-text-shadow);
    padding-left: calc(1.5rem / 2);
    min-height: 1.5rem;
    color: rgb(128 128 138);
}

.top-list .container .head {
    border-bottom: 1px solid lightgrey;
    font-weight: 600;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.top-list .container .body {
    padding: calc(1.5rem / 2);
}

.top-list .container .footer {
    border-top: 1px solid lightgrey;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}*/
.has-skin:hover {
    /*text-shadow: initial !important;*/
}

.has-skin {
    font-weight: 800 !important;
}

/*.top-list .nick .has-skin, .online-users .has-skin {
    font-weight: 800;
}*/

.top-list a:not(.has-skin) {
    color: var(--main-color);
}

.dark .top-list a:not(.has-skin) {
    color: inherit;
}

.dark .top-list a:hover {
    color: var(--color-dark);
}

.top-list .no-ava {
    box-shadow: var(--input-inset-shadow);
    width: 52px;
    height: 52px;
    border-radius: 0.5rem;
}

/*.top-list .dark {
    background: rgba(0, 0, 0, 0.06) !important;
}*/

.top-list .spacer {
    height: 3px;
    background: var(--underline-gradient2);
    width: 62%;
    margin: 0 auto 2rem auto;
}

.top-list .main-top-pos {
    font-weight: normal;
    color: inherit !important;
    text-decoration: underline;
}

.top-list .latency {
    margin-left: auto;
    font-size: small;
}

/* my-top-info */

.my-top-info {
    /*display: inline-block;*/
}

.my-top-info a {
    text-decoration: underline;
}

.my-top-info h3 {
    border-bottom: 1px solid lightgray;
    margin-bottom: 0.4rem;
    font-size: 150%;
    line-height: 2rem;
}

.dark .my-top-info h3 {
    border-color: #4a5c71;
}

.my-top-info .hooray {

}

.my-top-info .head {
    /*margin-bottom: 0.5rem;*/
}

.my-top-info .body {
    border-bottom: 4px solid black;
    line-height: 2rem;
}

.my-top-info .footer {
    background: var(--section-bg-color);
    padding: 0.5rem 1rem;
    line-height: 2rem;

    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dark .my-top-info .footer {
    background: var(--section-bg-color-dark);
}

.my-top-info .footer span {
    font-size: 21px;
    margin: 0 1rem;
    color: #b4b4b4;
    vertical-align: bottom;
    transform: rotate(90deg);
    display: inline-block;
}

.my-top-info b {
    font-size: 150%;
}

.dark .my-top-info b {
    color: #b6cce9;
}

.my-top-info .myRes .exp-points {
    vertical-align: text-top;
}

.top .my-top-info {
    margin-bottom: 1.5rem;
}

.score-life-info span {
    font-weight: bold;
}

/*                                                                             Окно информации о моем состоянии в топе
________________________________________________________________________________________________________________________
*/

#myTopInfo .updated {
    color: blueviolet;
}

.dark #myTopInfo .updated {
    color: #ffdb59;
}

/*                                                                                                         Уведомления
________________________________________________________________________________________________________________________
*/

/* Виджет 🔔 */

#sidebar #notices {
    /*margin-bottom: 1.5rem;*/
}

#sidebar .banned > div {
    border-top: 1px solid var(--error-color);
}

#sidebar .banned > div:last-child {
    border-bottom: 1px solid var(--error-color);
}

#sidebar #notices > div:last-child,
#sidebar .banned {
    margin-bottom: 1.5rem;
}

#sidebar #notices a {
    display: inline-block;
}

#sidebar #notices a > span:last-child {
    /*text-decoration: underline;*/
    font-weight: bold;
}

#sidebar #notices .symbol {
    font-size: 22px;
    vertical-align: bottom;
    /*cursor:help;*/
}

#sidebar #notices .warnings .symbol {
    /*color:var(--error-color);*/
}

/*#sidebar #notices .warnings:before,
#sidebar #notices .adm_messages:before {
    font-size: 22px;
    margin-right: 0.25rem;
}

#sidebar #notices .warnings:before {
    content: "⚠";
}

#sidebar #notices .adm_messages:before {
    content: "✉";
}*/

/* Страница */

.notices p {

}

.notices p.unread {
    background: pink;
}

/*                                                                                               Окно покупки действия
________________________________________________________________________________________________________________________
*/

.purchase #purchaseOfferForm {
    margin-top: 0.5rem;
}

.purchase p {
    padding: 1rem;
}

.purchase p:first-child {
    background: lightgrey;
    background: var(--section-bg-color);
    border-radius: 0.5rem;
}

.dark .purchase p:first-child {
    background: var(--section-bg-color-dark);
}

.purchase ul {
    min-width: 520px;
}

.purchase li {
    display: flex;
    padding: 0.5rem;
    border-bottom: 1px dashed gray;
}

.purchase li:not(:last-child) {

}

.purchase li > div {
}

.purchase li > div:first-child {
    width: 150px;
}

.purchase li > .limit-info {
    flex-grow: 1;
    text-align: right;
}

.purchase li.reached {
    opacity: 0.5;
}

/*                                                                                                      Мои тренировки
________________________________________________________________________________________________________________________
*/

#content .title + .content {
    margin-top: 2rem;
}

#content > .title {
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
}

.cp-mode .game-card .wrapper { /*todo упразднить после проработки списков будет не нужен*/
    width: 31.5%;
}

.cp-mode .game-card > div {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.my-games ul {

}

.my-games ul li {

}

.my-games ul li > div {
    /*display: inline-block;*/
}

.my-games ul li > div:first-child {
    /*margin-right: 1rem;*/
}

/*                                                                                                Комментарии Comments
________________________________________________________________________________________________________________________
*/

.comments {
    position: relative;
    /*margin-top: 1rem;*/
}

.comments .input-text, #messageInputText {
    padding: 0.5rem;
    background: white;
    outline: none;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.15);
    /*box-sizing: border-box;*/
    min-height: 3rem;
    margin: 0.5rem 0 0.5rem -0.5rem;
    border-radius: 0.5rem;
    width: calc(100% - 0.5rem) !important;
    cursor: text;
    /*noinspection CssInvalidPropertyValue*/
    word-break: break-word;
}

.input-text[placeholder]:empty:before, #messageInputText[placeholder]:empty:before {
    content: attr(placeholder);
    color: lightgrey;
}

.input-text[placeholder]:empty:focus:before, #messageInputText[placeholder]:empty:focus:before {
    content: "";
}

.comments-head {
    background: var(--section-bg-color);
    padding: 1rem 1rem 1rem 1.5rem;
}

.dark .comments-head {
    background: var(--section-bg-color-dark) !important;
}

.comments .active .input-text {
    min-height: 6.5rem;
    border: 2px solid black;
    box-shadow: inset 0 0 7px #bfbfbf;
}

.dark .comments .active .input-text {
    border: 2px solid #b6cce9;
    box-shadow: inset 0 0 7px black;
}

.comments-head .submit {
    display: none;
}

.comments .comment.parent {
    margin-top: 1rem;
}

.comments .comment.parent > .c-body {
    background: var(--section-bg-color);
    padding: 1rem;
    border-radius: 0.5rem;
}

.dark .comments .comment.parent > .c-body {
    background: var(--section-bg-color-dark) !important;
}

.comments .comment.parent .c-body {

}

.comments .comment.child {
    margin-top: 1.5rem;

}

.comments .comment.child .c-head {

}

.comments .comment.child .c-text {

}

.comments .reply-container {

}

.comments .c-text {
    background: white;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-left: -0.5rem;
    margin-bottom: 0.25rem;
    color: black;
    cursor: text;
    box-shadow: inset 0 0 7px #bfbfbf;
}

.dark .comments .c-text {
    box-shadow: inset 0 0 7px black;
}

.comments .comment {
    position: relative;
}

.comments .comment .input-text {
    border: 2px solid black;
}

.comments .comment .c-head {
    position: relative;
    margin-bottom: 0.25rem;
}

.comments .comment .c-head .c-nick {
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.comments .comment .c-head .c-date {
    font-style: italic;
    font-size: small;
    margin-left: 0.5rem;
    color: rgba(0, 0, 0, 0.6);
}

.dark .comments .c-date,
.dark .comments .c-button {
    color: #b6cce9 !important;
}

.comments .comment .c-body {
    display: flex;
}

/* Подписки на комменты ------------*/

.page-follow {
    position: relative;
}

.page-follow > div:first-child {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 1;
}

#subscribeControl {
    position: absolute;
    right: 0;
    top: 100%;
}

#subscribeControl .container {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
}

#subscribeControl ul {
    line-height: 1.75rem;
}

#subscribeControl hr {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

#subscribeControl form {
    margin: 0.5rem 1rem 1rem 0.25rem;
}

#subscribeControl .glob {
    margin-bottom: 1.5rem;
}

#subscribeControl .loc {

}

#subscribeControl li {
    white-space: nowrap;
}

#subscribeControl li i {
    opacity: 0.5;
    min-width: 390px;
    display: inline-block;
    white-space: normal;
}

#subscribeControl label + a {
    display: inline-block;
    margin-left: 0.5rem;
}

#subscribeControl .open {
    cursor: pointer;
    border-bottom: 1px solid lightgrey;
    transition: var(--my-transition);
    line-height: 2rem;
    font-weight: bold;
}

#subscribeControl .open:hover {
    text-shadow: var(--text-hover-shadow);
}

/*noinspection CssInvalidPropertyValue*/
#subscribeControl .button.close {
    margin: 0 auto;
    max-width: fit-content;
    max-width: -moz-fit-content;
    display: block;
}

/* --------------------------------*/

.c-ava {
    opacity: 0.85;
    margin-right: 1rem;
    width: 50px;
    height: 50px;
    overflow: hidden;
    min-width: 50px;
}

.profile .sub-section li .c-ava {
    margin: 0;
}

.profile .sub-section li .c-ava + .nick {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 50px;
    font-size: small;
}

.profile .sub-section .container ul {
    display: flex;
    column-gap: 0.5rem;
    flex-wrap: wrap;
}

.profile .sub-section .container ul > li {
    position: relative;
}

.profile .sub-section .container ul > li .p-online {
    top: -11px;
    left: -5px;
}

/*.comments .comment .c-body .c-ava .no-ava{
    box-sizing: border-box;
    border:1px solid lightgrey;
    background: rgba(0, 0, 50, 0.04);
    height: 100%;
    border-radius: 0.5rem;
}*/

.c-ava img {
    display: block;

}

.c-ava a {
    display: block;
    box-sizing: border-box;
    border: 1px solid lightgrey;
    background: rgba(0, 0, 50, 0.04);
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

.c-ava a {
    border-color: #4a5c71;
}

.c-ava:hover {
    opacity: 1;
}

.comments .comment .c-body .c-content {
    flex-grow: 1;
    /*noinspection CssInvalidPropertyValue*/
    word-break: break-word;
}

.comments .comment.parent > .c-body > .c-content > .c-text {
    min-height: 50px;
}

.comments .comment .c-body .action-bar {
    display: flex;
    justify-content: space-between;
}

.comments .comment .c-body .c-edit-form {
    margin-top: calc(-0.5rem - 1px);
    margin-left: -1px;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
}

.comments .comment .c-body .c-edit-form .input-text {

}

.comments .comment .c-body .c-reply-form {
    margin-top: 1rem;
}

.comments .comment .c-button {
    transition: var(--my-transition);
    font-size: smaller;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
}

.dark .comments .c-button {
    border-color: rgba(255, 255, 255, 0.15);
}

.comments .comment .c-button:hover {
    text-shadow: var(--text-hover-shadow);
    color: var(--main-color);
    cursor: pointer;
}

.dark .comments .comment .c-button:hover {
    text-shadow: var(--text-hover-shadow-dark) !important;
}

.comments .comment .c-left {
    display: flex;
}

.comments .comment .c-left .c-button {
    margin-right: 0.5rem;
}

.comments .comment .c-right .c-button {
    margin-left: 0.5rem;
}

.comments .comment .c-rate {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    opacity: 0.85;
}

.comments .comment .c-rate-panel {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.comments .comment .c-rate-panel .who-rate {
    cursor: pointer;
}

.comments .comment .c-rate-panel div {
    display: inline-block;
    vertical-align: middle;
}

.comments .comment .c-rate-panel .c-likers {
    margin-left: 0.5rem;
}

.comments .comment .c-rate-panel .who-rate {
    border-bottom: 1px dotted;
    position: relative;
}

.comments .comment .c-rate-panel .who-rate .c-rater {
    width: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: normal;
    color: black;
    white-space: normal;
    margin: 0.25rem;
}

.comments .comment .c-rate-panel .who-rate .c-rater > a {
    font-size: small;
    color: black;
}

.comments .comment .c-rate-panel .who-rate .who-rate-result {
    padding: 0.5rem;
    position: absolute;
    box-shadow: var(--default-shadow);
    background: white;
    border-radius: 0.5rem;
    z-index: 9999;
    left: -2rem;
    bottom: 100%;
    white-space: nowrap;
}

.comments .comment .c-rate-panel .c-rate.like {
    background: url(/images/like.png) no-repeat center;
    margin-left: 0.5rem;
}

.comments .comment .c-rate-panel .c-rate.dislike {
    background: url(/images/dislike.png) no-repeat center;
    margin-right: 0.5rem;
}

.comments .comment .c-rate-panel .c-rate:hover {
    /*background-position:0 -16px;*/
    opacity: 1;
}

.comments .comment .c-rate-panel .c-rate.active {
    background-color: white;
    border-radius: 6px;
    padding: 2px;
    border: 1px solid lightgray;
}

.dark .comments .comment .c-rate-panel .c-rate.active {
    border-color: #647c99;
}

.comments .comment.selected > .c-body > .c-content > .c-text {
    border: 2px solid rgb(182, 78, 255);
    /*border: 2px solid #f378ff;*/
}

.comments .user-group-icons {
    font-size: 16px;
    vertical-align: top;
    margin-right: 0.25rem;
}

.comments .has-skin {
    font-weight: 800 !important;
}

.comments .comment .c-bottom .c-reply-info {
    display: none;
    font-weight: bold;
    margin-top: 0.5rem;
}

.comments .comment .c-more-children {
    font-weight: bold;
    transition: var(--my-transition);
    margin-top: 1.5rem;
}

.comments .comment .c-more-children:hover {
    cursor: pointer;
    text-shadow: var(--text-hover-shadow);
}

.dark .comments .comment .c-more-children:hover {
    text-shadow: var(--text-hover-shadow-dark) !important;
}

.comments .c-more-parents {
    margin-top: 1rem;
    width: 100%;
    text-align: center;
}

#commentsAdminForm .current {
    font-weight: bold;
}

.deployment {
    position: relative;
}

.deployment .d-content {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.c-admin {
    /*margin-bottom: 0.5rem;
    justify-content: flex-end;*/
    display: flex;
    position: relative;
    z-index: 1;
}

.c-admin ul {
    margin-bottom: 1rem;
}

.c-admin form {
    margin-bottom: 1.5rem;
}

.c-admin .d-open {
    /*display: inline-block;
    border-bottom: 1px dotted;
    cursor: pointer;*/
    display: inline-block;
    border-bottom: 1px dotted;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    height: 1.3rem;
}

.c-admin .d-content, #subscribeControl .container {
    background: white;
    padding: 1rem;
    box-shadow: var(--default-shadow);
    z-index: 1;
    border-radius: 0.5rem;
}

.dark .c-admin .d-content, .dark #subscribeControl .container {
    background: var(--bg-dark) !important;
}

.c-admin .d-close, #subscribeControl .close:not(.button) {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    width: 1rem;
    transition: var(--my-transition);
    cursor: pointer;
}

.c-admin .d-close:hover, #subscribeControl .close:not(.button):hover {
    text-shadow: var(--text-hover-shadow);
}

.c-plug {
    padding: 1rem;
    background: var(--section-bg-color);
    box-sizing: border-box;
}

.c-online {
    right: calc(100% - 5px);
}

.scroll-to {
    background: var(--section-bg-color);
    padding: 1rem;
    display: block;
    text-align: center;
    margin-top: 2rem;
}

.dark .scroll-to {
    background: var(--section-bg-color-dark);
}

.topScroll.scroll-to {
    cursor: pointer;
    transition: var(--my-transition);
}

.topScroll.scroll-to:hover {
    text-shadow: var(--text-hover-shadow);
}

.content.n-comm {
    display: flex;
    column-gap: 2rem;
}

.content.n-comm > div {
    width: 50%;
}

.content.n-comm #response > a {
    font-weight: bold;
}

/*                                                                                         Дружба, подписки, отношения
________________________________________________________________________________________________________________________
*/

.profile .profile-buttons {
    display: grid;
    align-items: baseline;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
}

#relations {
    flex-grow: 1;
}

#relations .button {
    width: 100%;
}

#relations .deployment {
    background: var(--section-bg-color);
    text-align: center;
    padding: 0.25rem 0;
    margin-bottom: 1.5rem;
    margin-top: -0.75rem;
    border-radius: 0.5rem;
}

.dark #relations .deployment {
    background: var(--section-bg-color-dark);
}

#relations .deployment .d-content, .user-blocking.deployment .d-content {
    background: var(--popup-bg-color); /*#f5f5f7;*/
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--default-shadow);
    top: 100%;
    right: 0;
    display: block;
    visibility: hidden;

}

#relations .deployment .d-content > span {
    display: inline-block;
    text-align: left;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
}

.dark #relations .deployment .d-content > span {
    color: black;
}

#relations .deployment:hover .d-content, .user-blocking.deployment:hover .d-content {
    animation: showDiv 0.15s forwards;
    z-index: 1;
}

#relations .deployment .d-open, .user-blocking.deployment .d-open {
    padding: 0.25rem 1rem 0.25rem 2rem;
    position: absolute;
    right: 0;
    top: 0;
}

#relations .deployment .d-open:after, .user-blocking.deployment .d-open:after {
    content: "›";
    font-weight: bold;
    display: inline-block;
    font-size: 130%;
    transform: rotate(90deg);
}

#friendMenu .counter {
    position: absolute;
    left: 0;
    top: 100%;
    font-size: 100%;
}

#friendMenu .counter > span {
    font-size: small;
    color: rgb(182, 78, 255);
    position: absolute;
    top: -20%;
    left: 100%;
}

/*.content.friends .new-member {
    color:green;
    border-bottom: 2px orangered;
}*/

#friendMenu > li {
    /*margin-right: 2rem;*/
}

#friendMenu {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.content.friends {
    margin-top: 2rem;
}

.content.friends ul {

}

.content.friends ul li:not(.show-more) {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
    width: fit-content;
    width: -moz-fit-content;
    padding: 0.5rem 0;
}

.content.friends ul:not(.history) li {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.content.friends ul:not(.history) li .p-online {
    top: -4px;
    left: -5px;
}

.content.friends ul li > span:first-child {
    font-size: smaller;
    font-style: italic;
    display: inline-block;
    margin-right: 0.5rem;
    color: grey;
    min-width: 135px;
}

.dark .content.friends ul li > span:first-child {
    color: #7e98b7;
}

.dark .content.friends ul li {
    border-color: rgba(255, 255, 255, 0.1);
    /*color: #b6cce9;*/
}

.content.friends ul li .button {
    /*line-height: 1.25rem;
    font-size: smaller;*/
}

/**/

.button.fr {
    background: linear-gradient(90deg, rgb(182, 78, 255), transparent 10px, transparent calc(100% - 10px), rgb(182, 78, 255)), linear-gradient(0deg, #000000, black 10px, black calc(100% - 10px), #4d4d4d) !important;
    border-color: rgb(182, 78, 255);
}

.dark .button.fr {
    /*color: #7e98b7 !important;*/
    background: var(--button-bg-dark) !important;
    border-color: whitesmoke;
}

.button.sub {

}

.dark .button.sub {

}

.button.unsub {
    background: none !important;
    color: grey;
}

.dark .button.unsub {
    color: #7e98b7 !important;
}

/**/

.content.friends ul li > div:first-child {
    display: flex;
    min-width: 255px;
    align-items: center;
    margin-right: 0.5rem;
}

.content.friends .show-more {
    margin-top: 1rem;
    border: none;
}

.content.friends .nick {
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.dark .content.friends .nick:not(.has-skin) {
    color: white;
}

.content.friends li.conn > span:first-child {
    border-right: 4px solid rgba(0, 0, 0, 1);
}

.content.friends li.dis > span:first-child {
    border-right: 4px solid rgba(0, 0, 0, 0.4);
}

.dark .conn > span:first-child {
    border-color: rgba(255, 255, 255, 1) !important;
}

.dark .dis > span:first-child {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/*                                                                                                           Сообщения
________________________________________________________________________________________________________________________
*/

.messages-container {
    display: flex;
    column-gap: 1rem;
}

.messages-container > div:first-child {
    flex-basis: 50%;
}

.messages-container > div:last-child {
    flex-basis: 50%;
}

#messages {
    background: var(--section-bg-color);
    border-radius: 0.5rem;
    padding: 1rem 1rem 1rem 1.5rem;
}

#messages #typing {
    visibility: hidden;
    font-size: small;
    color: rgba(0, 0, 0, 0.5);
    margin-top: -0.5rem;
    font-style: italic;
}

#oppStatus {
    visibility: hidden;
    color: #86f586;
}

#messagesBoxContainer {
    /*display: flex;
    flex-direction: column;
    justify-content: flex-end;*/
}

#messagesBoxContainer {
    height: 500px;
    overflow-y: auto;
    position: relative;
    background: white;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    padding: 1rem 1rem 0 1rem;
    margin-left: -0.5rem;
    margin-bottom: 0.25rem;
    color: black;
    cursor: text;
}

#messagesBoxContainer.fl {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#messagesBox {
    margin-bottom: 10px;
}

#messageInputText.active {
    border: 2px solid black;
    margin-bottom: calc(0.5rem - 2px);
}

#saveMessageBt {
    margin-left: -0.5rem;
    margin-top: 0.25rem;
}

#msg-show-more, .show-more {
    background: var(--section-bg-color);
    padding: 1rem;
    display: block;
    text-align: center;
    cursor: pointer;
    transition: var(--my-transition);
}

#msg-show-more:hover {
    text-shadow: var(--text-hover-shadow);
}

.msg-body {
    margin: 1rem 0;
    transition: opacity 0.5s cubic-bezier(0, 0, 1, 0);
}

.msg-text {
    padding-left: 10px;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-left: 4px solid;
}

.msg-text.me {
    border-color: rgba(0, 0, 0, 0.1);
}

.msg-text.opp {
    border-color: #a6bcd9;
}

.msg-text-head {
    font-size: smaller;
}

.msg-text-body {
    cursor: text;
}

.opp .msg-nick a {
    /*color: #b5c385;*/
}

.msg-nick a {
    color: #b5c385;
    /*color: #a6bcd9;*/
    /*color: #7e98b7;*/
}

.msg-nick a:hover {
    color: var(--main-color) !important;
}

.msg-date {
    font-style: italic;
    color: #a6bcd9;
}

.msg-online {
    color: #00ce00;
    font-size: 250%;
}

.msg-opp-info {

}

.msg-opp-info .ava a {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
}

.msg-opp-info .ava img {
    display: block;
    border-radius: 0.5rem;
}

.msg-opp-info .footer {
    display: flex;
    column-gap: 0.25rem;
}

.msg-opp-info .footer a:last-child {
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.msg-opp-info .default {
    cursor: pointer;
}

/*                                                                                                             Диалоги
________________________________________________________________________________________________________________________
*/

.dialog-list {
    width: 60%;
}

.dialog-line {
    margin-bottom: 1rem;
    position: relative;
    height: 70px;
    background: var(--section-bg-color);
    border-radius: 0.5rem;
    /*    display:flex;
        column-gap: 1rem;*/
}

.dark .dialog-line {
    background: var(--section-bg-color-dark);
}

.dialog-line.me-last .msg {
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}

.dark .dialog-line.me-last .msg {
    border-color: rgba(0, 0, 0, 0.2);
    color: #a6bcd9;
}

.dialog-line > div {

}

.dialog-line > a {
    display: block;
    position: absolute;
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    /*display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background:var(--section-bg-color);*/
}

.dialog-line > a:hover {
    /*background:rgba(0,0,0,0.05);*/
    box-shadow: var(--default-shadow);
}

.dialog-line .ava {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    opacity: 0.85;
    margin-right: 1rem;
    width: 50px;
    height: 50px;
    overflow: hidden;
    min-width: 50px;
    border-radius: 0.5rem;
    transition: var(--my-transition);
}

.dialog-line .ava:hover {
    /*box-shadow: var(--text-hover-shadow);*/
    opacity: 1;
}

.dialog-line .ava a {
    display: block;
    box-sizing: border-box;
    border: 1px solid lightgrey;
    background: rgba(0, 0, 50, 0.04);
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

.dark .dialog-line .ava a {
    border-color: #394b61;
}

.dialog-line .nick {
    position: absolute;
    top: 10px;
    left: 70px;
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.dialog-line .nick span {
    font-size: smaller;
    font-weight: normal;
    font-family: var(--primary-font-family);
}

/*.dialog-line .nick a:last-child {
    font-weight: 500;
    font-family: var(--secondary-font-family);
}*/

.dialog-line .info {
    position: absolute;
    top: 37px;
    left: 70px;
    font-size: smaller;
}

.dark .dialog-line .info {
    color: #a6bcd9;
}

.dialog-line .info .total {

}

.dialog-line .info .unread {
    margin-left: 0.5rem;
}

.dialog-line .info .unread b {
    font-size: 150%;
    padding-left: 0.2rem;
    color: rgb(182, 78, 255);
}

/*.dark .dialog-line .info .unread b {
    color: rgb(182, 78, 255);
}*/

.dialog-line .msg {
    position: absolute;
    top: 10px;
    left: 310px;
    height: 52px;
    border-left: 4px solid #a6bcd9;
    /*border-left: 4px solid #B5C385;*/
    padding-left: 10px;
    word-break: break-all;
    white-space: pre-wrap;
}

.dialog-line .online {
    color: #00ce00 !important;
    margin-right: 0.25rem;
    font-size: 210%;
    text-shadow: none;
    display: inline-block;
    vertical-align: bottom;
    line-height: 1.3rem;
}

/*--------------------------------------------------------------------------------------------------------------------*/

.find-player form .submit {
    margin-left: 0.5rem;
}

.find-player form ul {
    margin-bottom: 1rem;
}

.find-player form li {
    margin: 0.25rem 0;
}

.find-player #searchResults ul {
    margin: 1.5rem 0;
}

.find-player #searchResults ul li {
    margin: 0.5rem 0;
}

.find-player #searchResults a {
    font-family: var(--secondary-font-family);
    font-weight: 500;
}

.find-player #searchResults .id-section {
    display: inline-block;
    margin-right: 1rem;
    opacity: 0.5;
}

#loader {
    position: absolute;
    z-index: 10;
    left: -10000px;
    top: -10000px;
    width: 100%;
    height: 100%;
}

#loader .bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
}

/*noinspection CssInvalidPropertyValue*/
#loader .fg {
    width: 30%;
    color: black;
    position: absolute;
    background: white;
    /*width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    min-width: 300px;
    cursor: default;
    box-shadow: var(--default-shadow);
    border: 1px solid #a4b0bc;
}

.ny-gift {
    cursor: pointer;
    position: absolute;
    top: 9px;
    left: 114px;
    transform: rotate(-10deg);
    /*width: 25px;
    height: 46px;
    background: url(/images/ny23_gift.png) no-repeat 0 0;
    background-size: 25px auto;*/
}

.ny-top {
    position: absolute;
    display: block;
    top: 1px;
    left: 36px;
    transform: rotate(18deg);
    /*width: 80px;
    height: 56px;*/
    /*background: url(/images/ny23.png) no-repeat 0 0;*/
}

/* DUEL */

#rank, .rank {
    font-family: Francker, sans-serif;
    background: black;
    padding: 0.1rem 0.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    line-height: 1.5rem;
    box-shadow: 0 0 5px;
    font-weight: 600 !important;
    white-space: nowrap;
}

.rank-color-0 {
    color: hsl(0, 0%, 60%)
}

.rank-lamp-0 {
    background-color: hsl(0, 0%, 100%);
    box-shadow: inset hsl(0, 0%, 15%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-1 {
    color: hsl(200, 100%, 50%)
}

.rank-lamp-1 {
    /*background-color: #24E0FF;*/
    background-color: hsl(188, 100%, 57%);
    box-shadow: inset #006 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-2 {
    color: hsl(120, 100%, 50%)
}

.rank-lamp-2 {
    background-color: hsl(120, 100%, 50%);
    box-shadow: inset hsl(120, 37%, 10%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-3 {
    color: hsl(60, 100%, 50%)
}

.rank-lamp-3 {
    background-color: hsl(60, 100%, 50%);
    box-shadow: inset hsl(60, 37%, 10%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-4 {
    color: hsl(35, 100%, 50%)
}

.rank-lamp-4 {
    background-color: hsl(40, 100%, 50%);
    box-shadow: inset hsl(35, 37%, 15%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-5 {
    color: hsl(0, 100%, 50%)
}

.rank-lamp-5 {
    background-color: hsl(0, 100%, 50%);
    box-shadow: inset hsl(0, 37%, 10%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-6 {
    color: hsl(310, 100%, 50%)
}

.rank-lamp-6 {
    background-color: hsl(310, 100%, 50%);
    box-shadow: inset hsl(310, 37%, 10%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

.rank-color-7 {
    color: hsl(280, 100%, 50%)
}

.rank-lamp-7 {
    background-color: hsl(280, 100%, 50%);
    box-shadow: inset hsl(280, 100%, 10%) 0 -1px 9px, hsl(0, 0%, 5%) 0 2px 5px;
}

/*---*/

.fav-train-bt {
    cursor: pointer;
    transition: var(--my-transition);
    width: 20px;
    height: 22px;
    background-image: url(/images/icons/heart_big.png);
}

.dark .fav-train-bt {
    background-image: url(/images/icons/heart_big_2.png);
}

#controlPanel .fav-train-bt {
    margin-left: 0.5rem;
}

.fav-train-bt.added {
    background-position: 0 -22px;
}

.fav-train-bt:hover {
    background-position: 0 -2px;
}

.fav-train-bt.added:hover {
    background-position: 0 -24px;
}

.game-card .fav-train-bt {
    width: 20px;
    height: 20px;
    background-image: url(/images/icons/heart.png);
}

.game-card .fav-train-bt.added {
    background-position: 0 -20px;
}

.game-card .fav-train-bt:hover {
    background-position: 0 -2px;
}

.game-card .fav-train-bt.added:hover {
    background-position: 0 -22px;
}

.game-card .is-official {
    font-size: initial;
}

.game-list .is-official {
    position: absolute;
    left: 6px;
    color: #999;
}

.premium-content {
    width: 15px;
    height: 15px;
    background: url(/images/icons/premium_content.png) no-repeat;
}

.menu .premium-content {
    display: inline-block;
    margin-right: 0.25rem;
    margin-bottom: -2px;
}

.is-official:before {
    content: "☑";
}

h1 .is-official, #gameBox .is-official {
    font-size: 70%;
    opacity: 0.15;
    padding-right: 0.5rem;
}

.lucky-medal {
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: flex-end;
    line-height: 16px;
    justify-content: center;
}

.lucky-medal {
    width: 79px;
    height: 69px;
}

/*.lucky-medal.small {
    width: 61px;
    height: 69px;
}*/

.lucky-medal span {
    padding-right: 2px;
    font-size: 11px;
    color: #e3e3e3;
    font-weight: 600;
    font-family: 'Francker', sans-serif;
    background-image: linear-gradient(180deg, white, lightgrey, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}

.lucky-medal.medium span {
    /*background-image: linear-gradient(180deg, white, rgb(182, 78, 255), white);*/
}

.gg-msg {
    max-width: 400px;
}

.gg-msg .lucky-medal {
    margin: 1rem 0;
}

.nice-number .congrats {
    font-family: var(--secondary-font-family);
    font-weight: 800;
}

.nice-number .congrats span {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nice-number .congrats.small span {
    background-image: linear-gradient(180deg, black, hsl(210, 9%, 53%), black);
}

.nice-number .congrats.medium span {
    background-image: linear-gradient(180deg, rgb(182, 78, 255), hsl(275, 100%, 84%), rgb(182, 78, 255));
}

.recent-event-filter {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, 1fr);
    column-gap: 1.5rem;
}

.recent-event-filter .friend-only {
    color: lightslategray;
}

.article.news h3 {
    border-bottom: 4px solid;
    margin-bottom: 2rem;
}

.article.news h4 {
    border-bottom: 2px solid;
    margin: 2rem 0;
}

.award-bar {
    position: relative;
    margin: 0.5rem 0;
    pointer-events: none;
}

.award-bar > div:first-child {
    font-size: small;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.award-bar .outer {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: hsl(0, 0%, 90%) linear-gradient(180deg, hsl(210, 14%, 80%), hsl(210, 14%, 90%), hsl(210, 14%, 80%));
}

.award-bar .inner {
    width: 100px;
    height: 13px;
    background: lightslategray linear-gradient(180deg, lightslategray, hsl(210, 14%, 65%), lightslategray);
}

.award-bar.onl .inner {
    background: hsl(120, 100%, 37%) linear-gradient(180deg, hsl(120, 100%, 27%), hsl(120, 100%, 37%), hsl(120, 100%, 27%));
}

.site_awards .award-bar {

}

.site_awards .award-bar .inner {
    height: 18px;
}

.site_awards .award-bar > div:first-child {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) translateY(50%);
    font-weight: bold;
    margin-bottom: 0;
}