@charset "UTF-8";

html {
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

main {
    display: block;
}

b,
strong {
    font-weight: 600;
}

*,
:after,
:before {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    border-style: none;
}

img[width="0"][height="0"] {
    display: none;
}

a {
    color: inherit;
    cursor: pointer;
    background-color: transparent;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

a:hover,
a:focus {
    text-decoration: none;
}

input,
select,
textarea,
button {
    border: none;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

textarea {
    overflow: auto;
}

textarea::-webkit-scrollbar {
    width: 0;
}

::-ms-clear {
    display: none;
}

input {
    overflow: visible;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2rem;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

select::-ms-expand {
    display: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
}

li {
    margin-left: 20rem;
}

/* li:not(:last-child) {
    margin-bottom: 8rem;
}

@media (max-width: 480px) {
    li:not(:last-child) {
        margin-bottom: 4rem;
    }
} */

textarea {
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    border-radius: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

label {
    margin: 0;
}

input,
button,
select {
    border: none;
    outline: none;
}

input {
    border-radius: 0;
}

*:focus {
    outline: none;
}

.no-scrolling {
	overflow: hidden;
}

.link {
    color: #D24A43;
	text-decoration: underline;
}

.link:hover {
	text-decoration: none;
}

.invert-link {
	text-decoration: none;
}

.invert-link:hover {
	text-decoration: underline;
}

.flex-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*styles config 
for example:
adaptive full-hd 1rem = calc(100vw / 1920)
adaptive 768px 1rem = calc(100vw / 768)
static 1rem = 1px
*/
html,
body {
    font-size: 1px;
    height: 100%;
}
/* installation root vars */
:root {
    --ON_toggle: initial;
    --OFF_toggle: ;
}

.theme-default,
.theme-light {
    --light: var(--ON_toggle);
    --dark: var(--OFF_toggle)
}

.theme-dark {
    --light: var(--OFF_toggle);
    --dark: var(--ON_toggle)
}

@media (prefers-color-scheme: dark) {
    .theme-default {
        --light: var(--OFF_toggle);
        --dark: var(--ON_toggle)
    }
}

body {
    --body-bg: var(--light, #F0F0F0) var(--dark, #101015);
    --heading-bg: var(--light, #08080B) var(--dark, #08080B);
    --main-bg: var(--light, #F7F7F7) var(--dark, #17171C);
    --block-bg: var(--light, #F0F0F0) var(--dark, #0E0E12);
    --main-color: var(--light, #313131) var(--dark, #F4F4F4);
    --hlines-color: var(--light, #161616) var(--dark, #F9F9F9);
    --gray-color: var(--light, #79798B) var(--dark, #A6A6C1);
    --border-color: var(--light, #DEDEDE) var(--dark, #2F2F2F);
    --logo: var(--light, url(../img/logo-white.svg)) var(--dark, url(../img/logo-dark.svg));
    --menu-color: var(--light, #676767) var(--dark, #A3A4A5);
    --block-bg-hover: var(--light, #C2D9EF) var(--dark, #282830);
    --box-shadow: var(--light, 0rem 8rem 22rem 0rem rgba(0, 0, 0, 0.12)) var(--dark, 0rem 8rem 40rem 0rem #0A0A0D);

    --dark-body-bg: #101015;
    --dark-heading-bg: #08080B;
    --dark-main-bg: #17171C;
    --dark-block-bg: #0E0E12;
    --dark-main-color: #F4F4F4;
    --dark-hlines-color: #F9F9F9;
    --dark-gray-color: #A6A6C1;
    --dark-border-color: #2F2F2F;
    --dark-mod-color: #FBAD8C;

    --white-body-bg: #F0F0F0;
    --white-heading-bg: #08080B;
    --white-main-bg: #F7F7F7;
    --white-block-bg: #FFFFFF;
    --white-main-color: #313131;
    --white-hlines-color: #161616;
    --white-gray-color: #79798B;
    --white-border-color: #DEDEDE;
    --white-mod-color: #ff4d01;

    --accent-blue: #0B7FEA;
    --accent-blue-hover: #0560B5;
    --dark-blue: #0D5EAA;
    --dark-red: #9F1A35;
    --dark-green: #0E5721;
    --gray-btn: var(--light, #D9D9D9) var(--dark, #24242B);
    --gray-btn-hover: var(--light, #CDCDCD) var(--dark, #55555C);
    --white-gray-btn: #D9D9D9;
    --white-gray-btn-hover: #CDCDCD;

    --gradient-red: linear-gradient(360deg, #9F1A35 -114.05%, rgba(159, 26, 53, 0.03) 43.91%);
    --gradient-blue: linear-gradient(360deg, #0D5EAA -114.05%, rgba(13, 94, 170, 0.03) 43.91%);

    --main-font: 'Montserrat';
    --second-font: 'Play';

    --border-radius: 12rem;
    --small-border-radius: 6rem;
}
/* end for example */

/*end styles config*/

/*SCROLL ---------------------- */
.simplebar-track.simplebar-vertical {
    width: 6rem;
    right: -20rem;
}

.simplebar-track.simplebar-vertical::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 6rem;
    height: 100%;
    background: #fff;
    border-radius: 20rem;
    z-index: 0;
}

.simplebar-scrollbar {
    transition: all .1s linear;
    z-index: 1;
}

.simplebar-scrollbar::before {
    top: 0 !important;
    left: -10rem;
    right: -10rem;
    bottom: 0 !important;
    width: 6rem;
    margin: auto;
    background: #D24A43;
    border: 0;
    border-radius: 20rem;
    opacity: 0;
    transition: all .2s linear;
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

@media (max-width: 480px) {
    .simplebar-track.simplebar-vertical {
        right: -12rem;
    }
}
/**/

/* browser scroll width */
::-webkit-scrollbar {
    width: 10rem;
    height: 6rem;
}

/* browser scroll track */
::-webkit-scrollbar-track {
    background: #1C1C24;
}

/* browser scroll handle */
::-webkit-scrollbar-thumb {
    background: #38384B;
    border-radius: 2rem;
}

body .mobile-visible,
body .adaptive-visible {
    display: none;
}

@media (max-width: 1024px) {
    body .adaptive-visible {
        display: block;
    }
}

@media (max-width: 480px) {
    body .mobile-visible {
        display: block;
    }

    body .desktop-visible,
    body .desktop-adaptive-visible,
    body .desktop-mobile-visible {
        display: none;
    }
}

/*main styles*/
body {
    margin: 0;
    color: var(--main-color);
    font: normal 16rem/normal var(--main-font), sans-serif;
    background: var(--body-bg);
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    /* overflow: hidden; */
}

.container {
    position: relative;
    max-width: 1240rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 20rem;
}

.header {
    position: fixed;
    width: 100%;
    height: 106rem;
    margin: auto;
    font-family: var(--second-font);
    z-index: 10;
}

.header-mob {
    display: none;
}

.header-top {
    height: 36rem;
    background: var(--dark-heading-bg);
}

.header-top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 18rem;
    height: 36rem;
    padding: 10rem 0;
}

.dropdown-block {
    position: relative;
    padding-right: 18rem;
    z-index: 1;
}

.header-top .dropdown-block {
    min-width: 130rem;
}

.dropdown-block::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1rem;
    height: 16rem;
    background: var(--dark-border-color);
}

.dropdown-block-title {
    display: none;
}

.dropdown {
    position: relative;
}

.dropdown-current {
    position: relative;
    padding-right: 16rem;
    font-size: 14rem;
    line-height: 1.2;
    color: #787879;
    cursor: pointer;
}

.dropdown-current.menu-link {
    position: relative;
    padding-right: 16rem;
    font-size: 18rem;
    line-height: 1.2;
    color: var(--menu-color);
    cursor: pointer;
}

.dropdown-current.menu-link.current {
    color: var(--main-color);
}

.dropdown-current::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 8rem;
    height: 4rem;
    background: url(../img/icons/arrow-down-gray.svg) center/contain no-repeat;
    transition: all .3s ease;
}

.dropdown-current.menu-link::after {
    background-image: var(--light, url(../img/icons/arrow-down-white.svg)) var(--dark, url(../img/icons/arrow-down-gray.svg));
}

.dropdown-current.menu-link.current::after {
    background-image: var(--light, url(../img/icons/arrow-down-white.svg)) var(--dark, url(../img/icons/arrow-down-hline.svg));
}

.dropdown.active .dropdown-current::after {
    transform: rotate(-180deg);
}

.dropdown-list {
    position: absolute;
    top: 30rem;
    left: 0;
    width: max-content;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    overflow: hidden;
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
    transition: all .3s ease;
    z-index: 1;
    font-family: var(--second-font);
}

.footer-menu .dropdown-list {
    top: auto;
    bottom: 30rem;
}

.dropdown-mini .dropdown-list {
    top: 20rem;
}

.footer-menu .dropdown-mini .dropdown-list {
    top: auto;
    bottom: 20rem;
}

.dropdown-builds .dropdown-list {
    width: 558rem;
    padding: 18rem 24rem;
    background: var(--block-bg);
}

.footer-menu .dropdown-builds .dropdown-list {
    top: auto;
    bottom: 30rem;
}

.dropdown-builds {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 36rem;
}

.dropdown-builds-list {
    width: 146rem;
}

.dropdown-builds-list-title {
    display: block;
    margin-bottom: 6rem;
    font-weight: bold;
    font-size: 20rem;
}

a.dropdown-builds-list-title:hover {
    color: #A3A4A5;
}

.dropdown-builds-list-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6rem;
    padding: 5rem 5rem 5rem 32rem;
    background: var(--block-bg);
    font-size: 16rem;
    line-height: 1.2;
    color: #A3A4A5;
}

.dropdown-builds-list-link:hover,
.dropdown-builds-list-link.current {
    background: var(--block-bg-hover);
    color: var(--main-color);
}

.dropdown-builds-list-link img {
    position: absolute;
    left: 5rem;
    width: 22rem;
    border-radius: 4rem;
}

.dropdown.active .dropdown-list {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.dropdown-list-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10rem 18rem;
    background: var(--block-bg);
    font-size: 18rem;
    line-height: 1.2;
    color: #A3A4A5;
}

.dropdown-mini .dropdown-list-link {
    padding: 8rem 12rem;
    font-size: 16rem;
}

.dropdown-list-link:hover {
    background: var(--block-bg-hover);
    color: var(--main-color);
}

.search-header-block {
    position: relative;
    max-width: 740rem;
    width: 100%;
}

.input-search {
    position: relative;
    width: 100%;
    height: 18rem;
    padding: 0 10rem 0 34rem;
    background: transparent;
    border-radius: var(--small-border-radius);
    font-family: var(--second-font);
    font-weight: normal;
    font-size: 14rem;
    line-height: 1.2;
    color: var(--dark-hlines-color);
    transition: all .3s ease;
    z-index: 1;
}

/* .input-search:focus {
    background: var(--dark-main-bg);
} */

.button-search {
    position: absolute;
    top: 0;
    left: 5rem;
    bottom: 0;
    margin: auto;
    width: 20rem;
    height: 18rem;
    background: url(../img/icons/search.svg) center/contain no-repeat;
    transition: all .3s ease;
    z-index: 1;
}

.input-search:focus + .button-search {
    background-image: url(../img/icons/search-blue.svg);
}

.input-search-overlay {
    position: absolute;
    top: -5rem;
    left: 0;
    width: 100%;
    height: 28rem;
    border-radius: var(--small-border-radius);
    background: transparent;
    pointer-events: none;
    transition: all .3s ease;
    z-index: 0;
}

.input-search:focus ~ .input-search-overlay {
    background: var(--dark-main-bg);
}

/* autocomplete */
.autoComplete_wrapper {
    display: inline-block;
    position: relative;
}

.search-header-result {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6rem 0;
    margin: 16rem 0 0 0;
    padding: 12rem;
    list-style: none;
    background-color: var(--block-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    outline: none;
    transition: opacity 0.15s ease-in-out;
    -moz-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
    z-index: 1;
}

.search-header-result[hidden],
.search-header-result:empty {
    display: flex;
    opacity: 0;
    transform: scale(0);
}

.search-header-result-item {
    margin: 0;
    padding: 8rem;
    border-radius: var(--small-border-radius);
    background: var(--main-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-header-result-item a {
    display: flex;
    align-items: center;
    gap: 0 12rem;
    text-decoration: none;
}

.search-header-result-item-text {
    font-family: var(--second-font);
    font-size: 16rem;
    line-height: 1.2;
    color: var(--light, #424242) var(--dark, #F2C94C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-header-result-item-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22rem;
    height: 22rem;
    border-radius: var(--small-border-radius);
    overflow: hidden;
}

.search-header-result-item-icon img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-header-result-item-tag {
    margin-left: auto;
    padding: 5rem 12rem;
    background: var(--light, #F2F2F2) var(--dark, #424755);
    border: 1rem solid var(--light, #DEDEDE) var(--dark, transparent);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 12rem;
    line-height: 1.2;
    color: var(--light, #79798B) var(--dark, #D0D0E9);
}

.search-header-result-item mark {
    background-color: transparent;
    font-weight: bold;
    color: var(--main-color);
}

.search-header-result-item:hover,
.search-header-result-item[aria-selected="true"] {
    background: var(--block-bg-hover);
}

.search-header-result-not-found {
    margin: 0;
    padding: 8rem;
    border-radius: var(--small-border-radius);
    background: var(--main-bg);
    font-family: var(--second-font);
    font-size: 16rem;
    line-height: 1.2;
    color: #717174;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* end autocomplete */

.profile-header-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120rem;
    cursor: pointer;
    font-size: 14rem;
    line-height: 1.2;
    color: #C3C3C3;
}

.dropdown .profile-header-link {
    cursor: pointer;
}

.profile-header-block .dropdown-list {
    left: auto;
    right: 0;
}

.profile-header-block .dropdown-list-link {
    gap: 0 8rem;
}

.profile-header-block .dropdown-list-link img {
    width: 22rem;
}

.notice-header-block {
    position: relative;
}

.notice-header-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24rem;
    height: 24rem;
    background: url(../img/icons/notice.svg) center/contain no-repeat;
    cursor: pointer;
}

.notice-header-link.have-notice {
    background-image: url(../img/icons/notice-have.svg);
}

.notice-block {
    position: absolute;
    top: 30rem;
    right: 0;
    width: 500rem;
    background: var(--light, #fff) var(--dark, var(--block-bg));
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
    transition: all .3s ease;
    z-index: 1;
}

.notice-header-block.active .notice-block {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.notice-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 8rem;
    padding: 8rem 18rem;
    border-bottom: 1rem solid var(--border-color);
}

.notice-block-header-title {
    margin-right: auto;
    font-weight: 600;
    font-size: 16rem;
    line-height: 1.5;
    color: var(--hlines-color);
}

.notice-block-list {
    display: flex;
    flex-direction: column;
    max-height: 580rem;
    overflow-y: auto;
}

.notice-block-element {
    display: block;
    padding: 12rem 18rem;
    border-bottom: 1rem solid var(--border-color);
}

.notice-block-element:last-child {
    border-bottom: 0;
}

.notice-block-element-text {
    font-size: 16rem;
    line-height: 1.2;
    color: var(--main-color);
}

.notice-block-element-text b {
    color: var(--hlines-color);
}

.notice-block-element-text a {
    font-weight: 600;
    color: var(--accent-blue);
}

.notice-block-element-text a:hover {
    color: var(--accent-blue-hover);
}

.notice-block-element-info {
    display: flex;
    justify-content: space-between;
    margin-top: 10rem;
}

.notice-block-element-date {
    font-size: 16rem;
    line-height: 1.5;
    color: #B0B0B1;
}

.notice-block-element-reading {
    padding: 0;
    background: none;
    color: var(--accent-blue);
    transition: all .3s ease;
}

.notice-block-element-reading:hover {
    color: var(--accent-blue-hover);
}

.notice-block-more {
    position: relative;
    padding: 12rem 18rem;
    background: var(--main-bg);
    border-top: 1rem solid var(--border-color);
    font-size: 16rem;
    line-height: 1.2;
    text-align: center;
    color: var(--light, #676767) var(--dark, #A3A4A5);
    cursor: pointer;
}

.notice-block-more::before {
    content: 'Показать больше';
    margin-right: 8rem;
}

.notice-block-more::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 12rem;
    height: 6rem;
    background: var(--light, url(../img/icons/arrow-down-white.svg)) var(--dark, url(../img/icons/arrow-down.svg)) center right / 12rem no-repeat;
}

.notice-block-more.active::before {
    content: 'Скрыть';
}

.notice-block-more.active::after {
    transform: rotate(-180deg);
}

.header-main {
    height: 70rem;
    background: var(--main-bg);
    user-select: none;
}

.header-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70rem;
}

.logo {
    position: relative;
    display: block;
    width: 182rem;
    height: 19rem;
    background: var(--logo) center/contain no-repeat;
}

.menu-links {
    display: flex;
    align-items: center;
    gap: 0 36rem;
}

.menu-link {
    position: relative;
    font-size: 18rem;
    line-height: 1.2;
    color: var(--menu-color);
    transition: all .3s ease;
}

.menu-link::before {
    content: '';
    position: absolute;
    bottom: -24rem;
    width: 100%;
    height: 4rem;
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    background: var(--accent-blue);
    opacity: 0;
    transition: all .3s ease;
}

.menu-link:hover,
.menu-link.current {
    color: var(--main-color);
}

.menu-link.current::before {
    opacity: 1;
}

.footer {
    position: relative;
    padding: 48rem 0 30rem;
    background: var(--dark-heading-bg);
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48rem 0;
}

.footer .logo {
    display: none;
    background: url(../img/logo-dark.svg) center/contain no-repeat;
}

.footer-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 60rem;
}

.footer-menu .menu-link {
    font-size: 16rem;
}

.copyright {
    margin-top: 20rem;
    font-size: 15rem;
    line-height: 1.5;
    text-align: center;
    color: #8B8E9B;
}

.copyright a {
    color: var(--accent-blue);
    text-decoration: underline;
}

.copyright a:hover {
    text-decoration: none;
}

/* buttons */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12rem;
}

.button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: auto;
    padding: 12rem 48rem;
    background: var(--accent-blue);
    border: 1rem solid transparent;
    border-radius: var(--border-radius);
    font-family: var(--second-font);
    font-weight: 700;
    font-size: 16rem;
    line-height: 1.2;
    text-align: center;
    color: var(--dark-main-color);
    transition: all .3s ease;
}

.button.button-configuration {
    padding: 8rem 16rem;
    background: transparent;
}

.button.small {
    padding: 12rem 22rem;
}

.button.button-icon {
    padding: 8rem 22rem;
}

.button.button-icon img {
    width: 30rem;
}

.button:hover {
    background: var(--accent-blue-hover);
}

.button.button-configuration:hover {
    background: var(--dark-main-bg);
}

.button.button-configuration.active {
    color: var(--accent-blue);
    background: var(--dark-main-bg);
}

.button.invert {
    background: transparent;
    border-color: var(--accent-blue);
    font-weight: normal;
    color: var(--main-color);
}

.button.invert:hover,
.button.invert:active {
    background: var(--accent-blue);
    color: var(--light, var(--dark-main-color)) var(--dark, var(--main-color));
}

.button.gray {
    background: var(--gray-btn);
    color: var(--light, #838383) var(--dark, var(--dark-main-color));
}

.button.gray:hover {
    background: var(--gray-btn-hover);
}

.button:active {
    background: var(--accent-blue-hover);
    box-shadow: 0rem 4rem 4rem 0rem rgb(0 0 0 25%) inset;
}

.button[disabled],
.button.disabled {
    background: var(--gray-btn);
    pointer-events: none;
}
/* end buttons */

/* tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
}

.tag {
    padding: 5rem 12rem;
    background: var(--light, #F2F2F2) var(--dark, #424755);
    border: 1rem solid var(--light, #DEDEDE) var(--dark, transparent);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 12rem;
    line-height: 1.2;
    text-align: center;
    color: var(--light, #79798B) var(--dark, #D0D0E9);
}

a.tag:hover {
    background: var(--light, #DEDEDE) var(--dark, #6B748B);
}
/* end tags */

/* typography */
.font-montserrat {
    font-family: 'Montserrat';
}

.font-play {
    font-family: 'Play';
}

h1 {
    font-weight: 600;
    font-size: 36rem;
    line-height: 1.3;
}

h2 {
    font-weight: 600;
    font-size: 20rem;
    line-height: 1.5;
}

h3 {
    font-weight: 500;
    font-size: 18rem;
    line-height: 1.5;
}

h4 {
    font-weight: 500;
    font-size: 16rem;
    line-height: 1.5;
}

h5 {
    font-weight: 500;
    font-size: 14rem;
    line-height: 1.5;
}

.build-page-main-info h1 {
    margin: 18rem 0;
}

.build-page-content-column h1,
.section-text-page h1,
.build-page-content-column h2,
.section-text-page h2,
.section-mainpage-cards h3,
.build-page-content-column h3,
.section-text-page h3,
.section-mainpage-cards h3,
.build-page-content-column h4,
.section-text-page h4,
.section-mainpage-cards h4,
.build-page-content-column h5,
.section-text-page h5,
.section-mainpage-cards h5 {
    font-family: var(--second-font);
}

.build-page-content-column h2,
.section-text-page h2,
.section-mainpage-cards h2 {
    font-weight: bold;
    font-size: 26rem;
    line-height: 1.4;
}

.build-page-content-column h2 {
    text-transform: uppercase;
}

.build-page-content-column h3,
.section-text-page h3,
.section-mainpage-cards h3 {
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.4;
}

.build-page-content-column h4,
.section-text-page h4,
.section-mainpage-cards h4 {
    font-weight: bold;
    font-size: 18rem;
    line-height: 1.4;
}

.build-page-content-column h5,
.section-text-page h5,
.section-mainpage-cards h5 {
    font-weight: bold;
    font-size: 16rem;
    line-height: 1.4;
}

.build-page-content-block h2,
.section-text-page h2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 18rem;
}

.section-text-page h2 {
    justify-content: center;
    text-align: center;
}

.build-page-content-block h2 span,
.section-text-page h2 span {
    position: relative;
    display: inline-block;
    min-width: fit-content;
    z-index: 1;
}

.build-page-content-block h2::after {
    content: '';
    position: relative;
    margin: auto;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.section-text-page h2::before {
    content: '';
    position: relative;
    margin: auto;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.section-text-page h2::after {
    content: '';
    position: relative;
    margin: auto;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

/* .section-text-page h2::after {
    content: '';
    position: absolute;
    top: 18rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
} */

.title-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 12rem;
}

.section-mainpage-cards h3 {
    position: relative;
    margin-bottom: 24rem;
}

.more-cards-link {
    position: absolute;
    right: 0;
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 18rem;
    line-height: 1.2;
    color: var(--accent-blue);
}

.more-cards-link:hover {
    color: var(--accent-blue-hover);
}

.title-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40rem;
    min-width: 40rem;
    height: 40rem;
    background: var(--main-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.title-icon img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    max-width: 24rem;
    height: 100%;
    object-fit: contain;
}

.search-page-title {
    font-weight: 500;
    margin-bottom: 48rem;
}

.search-page-title i {
    font-weight: 600;
}

.search-page-text {
    font-size: 18rem;
    line-height: 1.5;
}
/* end typography */

/* lists */
.list-elements,
.section-build-page ul:not([class]),
.section-build-page ul.striped,
.section-build-page ol:not([class]),
.section-build-page ol.striped,
.section-text-page ul:not([class]),
.section-text-page ul.striped,
.section-text-page ol:not([class]),
.section-text-page ol.striped {
    margin: 2rem 0;
}

.list-elements > *,
.section-build-page ul:not([class]) > *,
.section-build-page ul.striped > *,
.section-build-page ol:not([class]) > *,
.section-build-page ol.striped > *,
.section-text-page ul:not([class]) > *,
.section-text-page ul.striped > *,
.section-text-page ol:not([class]) > *,
.section-text-page ol.striped > * {
    position: relative;
    padding: 2rem 18rem;
}

.list-elements:not(.list-elements-yes, .list-elements-no) > li,
.section-build-page ul:not([class]) > li:not([class]),
.section-build-page ul.striped > li:not([class]),
.section-build-page ol:not([class]) > li:not([class]),
.section-build-page ol.striped > li:not([class]),
.section-text-page ul:not([class]) > li:not([class]),
.section-text-page ul.striped > li:not([class]),
.section-text-page ol:not([class]) > li:not([class]),
.section-text-page ol.striped > li:not([class]),
.section-text-page .article-big-list > li {
    margin-left: 36rem;
    padding-left: 0;
}

.list-elements.striped > *::before,
.section-build-page ul.striped > *::before,
.section-build-page ol.striped > *::before,
.section-text-page ul.striped > *::before,
.section-text-page ol.striped > * ::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* width: calc(100% + 20rem); */
    width: 100%;
    height: 100%;
    z-index: -1;
}

.list-elements.striped > li::before,
.section-build-page ul.striped > li:not([class])::before,
.section-build-page ol.striped > li:not([class])::before,
.section-text-page ul.striped > li:not([class])::before,
.section-text-page ol.striped > li:not([class])::before {
    left: -40rem;
    width: calc(100% + 40rem);
}

.list-elements.striped > *:nth-child(odd)::before,
.section-build-page ul.striped > *:nth-child(odd)::before,
.section-build-page ol.striped > *:nth-child(odd)::before,
.section-text-page ul.striped > *:nth-child(odd)::before,
.section-text-page ol.striped > *:nth-child(odd)::before {
    background: var(--light, var(--block-bg)) var(--dark, var(--main-bg));
}

.list-elements.striped > *:nth-child(even)::before,
.section-build-page ul.striped > *:nth-child(even)::before,
.section-build-page ol.striped > *:nth-child(even)::before,
.section-text-page ul.striped > *:nth-child(even)::before,
.section-text-page ol.striped > *:nth-child(even)::before {
    background: var(--light, transparent) var(--dark, var(--body-bg));
}

.list-elements > *::marker,
.section-build-page ul:not([class]) > *::marker,
.section-build-page ol:not([class]) > *::marker,
.section-text-page ul:not([class]) > *::marker,
.section-text-page ol:not([class]) > *::marker {
    position: relative;
}

.list-elements-yes,
.list-elements-no {
    list-style: none;
}

.list-elements-yes > *,
.list-element-yes,
.list-elements-no > *,
.list-element-no {
    position: relative;
    margin-left: 0;
    padding-left: 40rem;
}

.list-elements-yes > *::after,
.list-element-yes::after,
.list-elements-no > *::after,
.list-element-no::after {
    content: '';
    position: absolute;
    top: 7rem;
    left: 12rem;
    width: 15rem;
    height: 15rem;
}

.list-elements-yes > *::after,
.list-element-yes::after {
    background: url(../img/icons/check-green.svg) center/contain no-repeat;
}

.list-elements-no > *::after,
.list-element-no::after {
    background: url(../img/icons/cross-red.svg) center/contain no-repeat;
}

.article-big-list > li {
    margin-bottom: 20rem;
}

.gems-list > li {
    list-style: none;
    margin-left: 16rem;
}
/* end lists */

/* poe items */
.poe-items {
    display: inline;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.poe-items img {
    max-width: 60rem;
    /* max-height: 28rem; */
    height: 28rem;
    margin: -19rem 2rem -9rem 0;
    /* pointer-events: none; */
}
/* end poe items */

/* youtube */
.video-container {
    position: relative;
    margin: 16rem 0 28rem;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.youtube-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

.youtube {
    background-color: #000;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}

.youtube img {
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.7
}

.youtube .play-button {
    width: 90rem;
    height: 60rem;
    background-color: #333;
    box-shadow: 0 0 30rem rgba(0,0,0,0.6);
    z-index: 1;
    opacity: 0.8;
    border-radius: var(--border-radius);
    transition: all .3s ease;
}

.youtube:hover .play-button {
    background-color: #d20000
}

.youtube .play-button::before {
    content: "";
    border-style: solid;
    border-width: 15rem 0 15rem 26rem;
    border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
    cursor: pointer
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button::before {
    position: absolute
}

.youtube .play-button,
.youtube .play-button::before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}
/* end youtube */

/* accordion */
.accordion-block {
    display: flex;
    flex-direction: column;
    gap: 20rem;
}

.accordion-item {
    padding: 18rem 22rem;
    background: var(--block-bg);
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.accordion-title {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0 12rem;
    padding-right: 20rem;
    font-weight: 500;
    color: var(--hlines-color);
    cursor: pointer;
    user-select: none;
}

.accordion-title::after {
    content: '';
    position: absolute;
    top: 10rem;
    right: 0;
    width: 14rem;
    height: 8rem;
    background: var(--light, url(../img/icons/arrow-down-white.svg)) var(--dark, url(../img/icons/arrow-down-hline.svg)) center/contain no-repeat;
    transition: all .3s ease;
}

.accordion-title.active::after {
    transform: rotate(-180deg);
}

.accordion-title .tag {
    min-width: 80rem;
    padding: 5rem;
    background: #424755;
    border-radius: var(--small-border-radius);
    color: var(--dark-hlines-color);
}

.tag.easy {
    background: var(--dark-green);
}

.tag.mid {
    background: var(--dark-blue);
}

.tag.hard {
    background: var(--dark-red);
}

.tag.veryhard {
    background: #424755;
}

.accordion-text {
    /* display: none; */
    display: flex;
    flex-direction: column;
    gap: 20rem 0;
    height: 0;
    padding-top: 0;
    overflow: hidden;
    transition: all .1s ease;
}

.accordion-text.open {
    height: 100%;
    padding-top: 12rem;
    overflow: visible;
}
/* end accordion */

/* tabs */
.tabs {
    display: flex;
    gap: 6rem;
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 12rem;
    background: var(--light, var(--block-bg)) var(--dark, var(--main-bg));
    border: 1rem solid var(--light, #D8D8D8) var(--dark, transparent);
    border-bottom: 0;
    border-radius: var(--small-border-radius) var(--small-border-radius) 0 0;
    font-family: var(--second-font);
    font-weight: bold;
    color: var(--light, #777777) var(--dark, #A3A4A5);
    cursor: pointer;
    transition: all .3s ease;
}

.tab:hover {
    color: var(--main-color);
}

.tab.active {
    background: var(--accent-blue);
    color: var(--light, var(--dark-hlines-color)) var(--dark, var(--main-color));
}

.tabs-content {
    padding: 24rem 30rem;
    border: 1rem solid var(--border-color);
    border-radius: 0 0 12rem 12rem;
}

.tab-item {
    display: none;
    flex-direction: column;
    gap: 20rem;
}

.tab-item.active {
    display: flex;
}

.tab-trigger {
    user-select: none;
}
/* end tabs */

/* copy-details */
.copy-details-list {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.copy-detail-element {
    padding: 18rem 30rem;
    background: var(--light, #EDEDED) var(--dark, var(--dark-main-bg));
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.copy-detail-title {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0 12rem;
    padding-right: 20rem;
    font-weight: 500;
    color: var(--hlines-color);
    cursor: pointer;
}

.copy-link {
    position: absolute;
    top: 4rem;
    right: 110rem;
    width: 22rem;
    height: 22rem;
    background: url(../img/icons/copy.svg) center/contain no-repeat;
}

.detail-link {
    position: absolute;
    right: 0;
    padding-right: 22rem;
    font-family: var(--second-font);
    font-weight: bold;
    color: var(--accent-blue);
}

.detail-link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15rem;
    height: 16rem;
    background: url(../img/icons/arrow-blue.svg) center/contain no-repeat;
}

.copy-detail-text {
    padding-top: 18rem;
}
/* end copy-details */

/* table */
table {
    border-spacing: 0;
    font-weight: normal;
    font-size: 16rem;
    line-height: 1.4;
    text-align: left;
    color: var(--hlines-color);
}

th {
    background: var(--gray-btn);
    font-weight: 600;
}

th,
td {
    padding: 6rem 12rem;
}

tr:nth-child(even) td {
    background: var(--light, #EDEDED) var(--dark, var(--main-bg));
}
/* end table */

/* quote */
blockquote {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
    padding: 4rem 0 4rem 24rem;
    border-left: 6rem solid var(--dark-blue);
}

blockquote::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60rem;
    height: 32rem;
    background: var(--light, url(../img/icons/quote-white.svg)) var(--dark, url(../img/icons/quote.svg)) center/contain no-repeat;
}

blockquote * {
    position: relative;
}
/* end quote */

/* slider */
.slider-images {
    max-width: 100%;
    width: 100%;
    padding-bottom: 30rem;
}

.slide-image {
    position: relative;
    display: block;
    border: 1rem solid var(--dark-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    line-height: 0;
}

.slide-image-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10rem;
    background: rgb(11 11 11 / 80%);
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 16rem;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

.swiper-pagination {
    bottom: 0 !important;
}

.slider-cards .swiper-pagination {
    text-align: left;
}

.swiper-pagination-bullet {
    width: 15rem;
    height: 6rem;
    margin: 0 3rem !important;
    background: #38384B;
    border-radius: 2rem;
}

.swiper-pagination-bullet-active {
    background: var(--accent-blue);
}

.swiper-button-prev,
.swiper-button-next {
    width: 32rem;
    height: 32rem;
    background: rgb(56 56 75 / 70%);
    border: 1rem solid #38384B;
    border-radius: var(--small-border-radius);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 8rem;
    height: 12rem;
}

.swiper-button-prev::after {
    background: url(../img/icons/arrow-left.svg) center/contain no-repeat;
}

.swiper-button-next::after {
    background: url(../img/icons/arrow-right.svg) center/contain no-repeat;
}
/* end slider */

/* gallery images */
.gallery-images {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18rem;
}

.gallery-image {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: none !important;
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    grid-column-end: span 3;
    line-height: 0;
}

.gallery-image:nth-child(1),
.gallery-image:nth-child(2),
.gallery-image:nth-child(10n),
.gallery-image:nth-child(11n) {
    grid-column-end: span 6;
}

.gallery-image:nth-child(3),
.gallery-image:nth-child(4),
.gallery-image:nth-child(5),
.gallery-image:nth-child(12n),
.gallery-image:nth-child(13n),
.gallery-image:nth-child(14n) {
    grid-column-end: span 4;
}
/* end gallery images */

/* comments */
#comment {
    display: block;
    margin-top: 12rem;
}

.user-comment {
    position: relative
}

.user-comment-panel {
    position: absolute;
    bottom: 10rem;
    left: 25rem;
    right: 25rem
}

#user-comment-text {
    display: block;
    max-height: 320rem;
    min-height: 90rem;
    height: auto;
    resize: vertical;
    padding: 8rem 36rem 8rem 18rem;
    font-size: 16rem;
    line-height: 1.2;
    color: var(--hlines-color);
}

#user-comment-name {
    padding: 8rem 18rem;
    min-width: 180rem;
    font-size: 16rem;
    line-height: 1.2;
    color: var(--hlines-color);
}

#user-comment-name,
#user-comment-text {
    background-color: transparent;
    outline: none;
    border: 1rem solid var(--light, #B5B5B5) var(--dark, #686868);
    border-radius: var(--small-border-radius);
}

#user-comment-text {
    margin-bottom: 12rem;
}

#user-comment-text::placeholder,
#user-comment-name::placeholder {
    color: var(--light, #6B7380) var(--dark, #B4B1B1);
    opacity: 1;
}

#user_comment_form header {
    margin: 6rem 0 12rem 0;
}

#comment .input-field {
    /* margin-top: 0.5rem;
    margin-bottom: 0.5rem */
}

.comments-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24rem 0;
}

/* .init-comment-form-here ~ .comments-block {
    margin-top: 28rem;
} */

.init-comment-form-here ~ .comments-block .comments-high .comment-item:first-child {
    margin-top: 18rem;
}

.comment-item-self {
    position: relative;
    padding: 18rem 0;
}

.comment-item-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6rem 18rem;
    font-size: 16rem;
    line-height: 1.5;
}

.comment-item-header .comment-author {
    font-weight: 600;
    color: var(--hlines-color);
}

.comment-author-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
    color: #B0B0B1;
}

.comment-author-league {
    position: relative;
    padding-left: 12rem;
}

.show-hidden-comment,
.show-deleted-comment {
    position: absolute;
    right: 0;
    margin-left: auto;
    font-family: var(--second-font);
    cursor: pointer;
    transition: all .3s ease;
}

.show-hidden-comment:hover,
.show-deleted-comment:hover {
    color: var(--hlines-color);
}

.comment-author-info .comment-author-league::before {
    content: '•';
    position: absolute;
    left: 0;
    font-weight: 600;
}

.comment-item-content {
    position: relative;
    margin: 12rem 0;
    font-size: 17rem;
    line-height: 1.5;
}

.comment-item-content.hidden-comment,
.comment-item-content.deleted-comment {
    color: #B0B0B1;
}

.comment-item-content.hidden-comment::before {
    content: 'Комментарий скрыт';
}

.comment-item-content.deleted-comment::before {
    content: 'Комментарий был удален пользователем';
}

.comment-item-content.hidden-comment *,
.comment-item-content.deleted-comment * {
    display: none;
}

.comment-item-content p {
    margin: 0;
    word-wrap: break-word
}

.comment-item-footer {
    display: flex;
    align-items: center;
    gap: 0 24rem;
    font-family: var(--second-font);
}

.comment-likes {
    display: flex;
    align-items: center;
    gap: 0 6rem;
}

.comment-like-button {
    width: 22rem;
    height: 22rem;
    padding: 0;
    background: var(--main-bg);
    border-radius: 3rem;
    transition: all .3s ease;
}

.comment-like-button:first-child {
    background: url(../img/icons/comment-up.svg) center/13rem no-repeat var(--light, var(--block-bg)) var(--dark, var(--main-bg));
}

.comment-like-button:last-child {
    background: url(../img/icons/comment-down.svg) center/13rem no-repeat var(--light, var(--block-bg)) var(--dark, var(--main-bg));
}

.comment-like-button:hover {
    background-color: var(--light, #D6D6D6) var(--dark, var(--gray-btn));
}

.comment-like-button.comment-like {
    background-image: url(../img/icons/comment-up-green.svg);
}

.comment-like-button.comment-dislike {
    background-image: url(../img/icons/comment-down-red.svg);
}

.comment-likes-count {
    width: 28rem;
    font-weight: bold;
    font-size: 16rem;
    line-height: 1.2;
    text-align: center;
    color: #B0B0B1;
}

.comment-likes-count.like {
    color: #1AAA42;
}

.comment-likes-count.dislike {
    color: #E51039;
}

.comment-reply-btn,
.comment-refresh-btn {
    padding: 0;
    background-color: transparent;
    border: none;
    text-transform: none;
    font-size: 16rem;
    line-height: 1.2;
    color: #A3A4A5;
    cursor: pointer;
    transition: all .3s ease;
}

.comment-reply-btn:focus,
.comment-refresh-btn:focus {
    background-color: transparent
}

.comment-date {
    cursor: pointer;
    transition: all .3s ease;
}

.comment-date:hover,
.comment-reply-btn:hover,
.comment-refresh-btn:hover {
    color: var(--hlines-color);
}

.button-comment-more-info {
    width: 19rem;
    height: 19rem;
    background: url(../img/icons/menu-kebab.svg) center/19rem no-repeat;
}

.comment-item-footer .tooltip-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip.comment-more-info {
    width: 210rem;
    padding: 0;
    background: var(--block-bg);
    box-shadow: var(--box-shadow);
}

.comment-more-info-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6rem;
    padding: 10rem 8rem 10rem 38rem;
    background: var(--block-bg);
    border-radius: var(--small-border-radius);
    font-size: 16rem;
    line-height: 1.2;
    color: #A3A4A5;
}

.comment-more-info-link:hover {
    background: var(--block-bg-hover);
    color: var(--main-color);
}

.comment-more-info-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8rem;
    bottom: 0;
    width: 22rem;
    height: 22rem;
    margin: auto;
}

.comment-more-info-link.comment-report::before {
    background: url(../img/icons/report-gray.svg) center/contain no-repeat;
}

.comment-more-info-link.comment-copy::before {
    background: url(../img/icons/copy.svg) center/contain no-repeat;
}

.comment-more-info-link.comment-delete::before {
    background: url(../img/icons/delete-gray.svg) center/contain no-repeat;
}

.comment-reply {
    position: relative;
}

.stop-reply.comment-reply,
.comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply {
    z-index: 1;
}

.comment-reply-self {
    padding-left: 30rem;
}

.stop-reply.comment-reply > .comment-reply-self,
.comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply > .comment-reply-self {
    position: relative;
    padding-left: 0;
}

.comment-reply-self::before {
    content: '';
    position: absolute;
    top: 14rem;
    left: 7rem;
    width: 1rem;
    height: calc(100% - 14rem);
    background: var(--light, #D0D0D0) var(--dark, #202025);
}

.stop-reply.comment-reply > .comment-reply-self::before,
.comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply > .comment-reply-self::before {
    display: none;
}

.comment-reply-self::after {
    content: '—';
    position: absolute;
    top: 0;
    left: 0;
    width: 14rem;
    height: 14rem;
    font-weight: bold;
    font-size: 6rem;
    line-height: 12rem;
    text-align: center;
    color: #686870;
    border: 1rem solid var(--light, #D0D0D0) var(--dark, #202025);
    background: var(--body-bg);
}

.stop-reply.comment-reply > .comment-reply-self::after,
.comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply > .comment-reply-self::after {
    display: none;
}

.hide-re-tree {
    position: absolute;
    top: 0;
    left: 0;
    width: 30rem;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.stop-reply.comment-reply > .hide-re-tree,
.comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply > .hide-re-tree {
    display: none;
}

.hide-re-tree::before {
    content: '';
    position: absolute;
    top: 14rem;
    left: 7rem;
    width: 1rem;
    height: calc(100% - 14rem);
    background: var(--light, #D0D0D0) var(--dark, #202025);
    transition: all .3s ease;
}

.hide-re-tree:hover::before {
    background: var(--accent-blue);
}

.expand-re-tree {
    display: none;
    cursor: pointer;
    font-family: var(--second-font);
    color: var(--accent-blue);
    transition: all .3s ease;
}

.stop-reply.comment-reply > .expand-re-tree,
.comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply .comment-item > .comment-reply > .expand-re-tree {
    display: none;
}

.expand-re-tree:hover {
    color: var(--accent-blue-hover);
}

.comments-collapsed .comment-reply-self,
.comments-collapsed .hide-re-tree {
    display: none
}

.comments-collapsed .expand-re-tree {
    display: block
}

.comment-pinned-text {
    cursor: default;
    display: flex;
    align-items: center;
}

.comment-pinned-text i {
    font-size: 16rem;
}

.comment-reply-name-ref {
    font-weight: bold
}

.comment-reply-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    height: 30rem;
    padding: 0 10rem;
    background: var(--light, var(--block-bg-hover)) var(--dark, var(--main-bg));
    border-radius: var(--border-radius);
    font-size: 14rem;
    line-height: 30rem;
    color: var(--main-color);
    cursor: pointer;
}

.close-comment-reply {
    display: inline-block;
    width: 10rem;
    height: 10rem;
    background: var(--light, url(../img/icons/close-white.svg)) var(--dark, url(../img/icons/close.svg)) center/contain no-repeat;
}

.comment-dynamic-hidden {
    display: none;
}

.comment-dynamic-new {
    background: var(--light, #DFE9EE) var(--dark, linear-gradient(180deg, #0D5EAA -114.05%, rgba(13, 94, 170, 0.03) 43.91%));
}

/* .comment-dynamic-high {
    background: var(--light, #DFE9EE) var(--dark, linear-gradient(180deg, #34aa0d -114.05%, rgba(13, 94, 170, 0.03) 43.91%));
} */

.comments-refresh-btn {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    margin: -80rem auto 0;
    opacity: 0;
    pointer-events: none;
}

.comments-refresh-btn.scrolled {
    bottom: 30rem;
    margin: 0 auto;
    opacity: 1;
    pointer-events: auto;
}
/* end comments */

/* select */
.nice-select {
    width: 100%;
    height: 52rem;
    padding-left: 16rem;
    padding-right: 28rem;
    background-color: var(--light, #EDEDED) var(--dark, var(--main-bg));
    border-radius: var(--small-border-radius);
    border: 1rem solid var(--border-color);
    font-weight: normal;
    font-size: 16rem;
    line-height: 50rem;
    white-space: normal;
    color: var(--main-color);
}

.nice-select .current {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14rem;
}

.nice-select:hover,
.nice-select:active, 
.nice-select.open, 
.nice-select:focus {
    border: 1rem solid var(--border-color);
}

.nice-select::after {
    top: 0;
    right: 16rem;
    bottom: 0;
    width: 14rem;
    height: 8rem;
    margin: auto;
    border: 0;
    background: var(--light, url(../img/icons/arrow-down-white.svg)) var(--dark, url(../img/icons/arrow-down-hline.svg)) center/contain no-repeat;
    transform-origin: initial;
    transform: rotate(0);
}

.nice-select.open::after {
    transform: rotate(-180deg);
}

.nice-select .nice-select-dropdown {
    width: 100%;
    margin-top: 8rem;
    background-color: var(--main-bg);
    border: 1rem solid var(--border-color);
    border-radius: var(--small-border-radius);
    box-shadow: 0 0 0 1rem rgba(68, 68, 68, .11);
    transform: scale(0.75) translateY(19rem);
}

.nice-select .list {
    border-radius: var(--small-border-radius);
    max-height: 210rem;
}

.nice-select .option {
    margin: 0;
    padding: 8rem;
    font-weight: normal;
    line-height: 1.2;
    color: var(--menu-color);
}

.nice-select .option:hover, 
.nice-select .option.focus, 
.nice-select .option.selected.focus {
    background-color: var(--block-bg-hover);
}

.nice-select .option.selected {
    background-color: var(--block-bg-hover);
    font-weight: normal;
    color: var(--main-color);
}
/* end select */

/* swith theme */
.theme-switch-block {
    position: relative;
    min-width: 96rem;
    margin-left: auto;
    padding-right: 18rem;
}

.theme-switch-block::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1rem;
    height: 16rem;
    background: var(--dark-border-color);
}

.theme-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}

.light-switch {
    position: relative;
    width: 20rem;
    height: 20rem;
    background: url(../img/icons/sun.svg) center/contain no-repeat;
}

.dark-switch {
    position: relative;
    width: 20rem;
    height: 20rem;
    background: url(../img/icons/moon.svg) center/contain no-repeat;
}

.theme-switch input {
    position: absolute !important;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    bottom: 0;
}

.theme-switch label {
    display: inline-block;
    position: relative;
    width: 26rem;
    height: 16rem;
    background-color: #474747;
    border-radius: 22rem;
    cursor: pointer;
    transition: background-color 500ms ease;
}

.theme-switch input:checked + label {
    background: var(--accent-blue);
}

.theme-switch label::after {
    content: '';
    display: block;
    height: 14rem;
    width: 14rem;
    position: absolute;
    top: 1rem;
    right: 11rem;
    border-radius: 50%;
    background-color: #fff;
    transition: right 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
}

.theme-switch input:checked + label::after {
    right: 1rem;
}
/* end switch theme */

/* socs */
.socs-block {
    position: relative;
    padding-right: 18rem;
}

.footer .socs-block {
    padding-right: 0;
}

.socs-block::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1rem;
    height: 16rem;
    background: var(--dark-border-color);
}

.footer .socs-block::after {
    display: none;
}

.socs {
    display: flex;
    align-items: center;
    gap: 0 12rem;
}

.footer .socs {
    justify-content: center;
    gap: 0 50rem;
}

.soc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20rem;
    height: 20rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* .soc:hover {
    opacity: 0.8;
} */

.sharing-block {
    display: flex;
    align-items: center;
    gap: 8rem 12rem;
    margin-top: 30rem;
}

.sharing-block-title {
    color: var(--light, #313131) var(--dark, #D0D0E9);
}

.sharing-socs {
    display: flex;
    align-items: center;
    gap: 8rem;
}

.sharing-soc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rem;
    height: 32rem;
    background-color: var(--main-bg);
    background-size: 16rem;
    background-position: center;
    background-repeat: no-repeat;
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.sharing-soc:hover {
    opacity: 0.8;
}

.soc-tg {
    background-image: url(../img/socs/telegram.svg);
}

.soc.soc-tg:hover {
    background-image: url(../img/socs/telegram-blue.svg);
}

.soc-vk {
    background-image: url(../img/socs/vk.svg);
}

.soc.soc-vk:hover {
    background-image: url(../img/socs/vk-blue.svg);
}

.soc.soc-vk {
    width: 26rem;
}

.soc-fb {
    background-image: url(../img/socs/facebook.svg);
}

.soc.soc-fb:hover {
    background-image: url(../img/socs/facebook-blue.svg);
}

.soc-wa {
    background-image: url(../img/socs/whatsapp.svg);
}

.soc.soc-wa:hover {
    background-image: url(../img/socs/whatsapp-blue.svg);
}

.soc-tw {
    background-image: url(../img/socs/twitter.svg);
}

.soc.soc-tw:hover {
    background-image: url(../img/socs/twitter-blue.svg);
}

.soc-yt {
    background-image: url(../img/socs/youtube.svg);
}

.soc.soc-yt:hover {
    background-image: url(../img/socs/youtube-blue.svg);
}
/* end socs */

/* forms */
.form-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24rem 0;
    max-width: 406rem;
    width: 100%;
    margin: auto;
    padding: 36rem 48rem;
    background: var(--block-bg);
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.form-title {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.4;
    color: var(--hlines-color);
    text-align: center;
}

.form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12rem 0;
}

.ip-cell {
    position: relative;
    width: 100%;
}

.input-label {
    position: relative;
    display: inline-block;
    margin-bottom: 4rem;
    font-size: 14rem;
    line-height: 1.5;
    color: var(--light, #6B7380) var(--dark, #B4B1B1);
}

.required-symbol {
    color: var(--accent-blue);
}

.input-text {
    font-family: var(--main-font);
    font-weight: 400;
    font-size: 16rem;
    line-height: 1.2;
    color: var(--main-color);
    width: 100%;
    height: 48rem;
    padding: 14rem 16rem;
    background: var(--main-bg);
    border: 1rem solid var(--border-color);
    border-radius: var(--small-border-radius);
    transition: all 0.3s ease;
}

.input-password {
    padding-right: 40rem;
}

textarea.input-text {
    height: 96rem;
    padding-top: 24rem;
}

.input-text:hover,
.input-text:focus {
    border-color: var(--accent-blue);
}

.input-text.error,
.input-text.input-error {
    border-color: #FF0000;
}

.input-text.accept,
.input-text.success {
    border-color: #1AAA42;
}

.input-text.input-error.success {
    border-color: #FF0000;
}

.ip-cell span.error,
.password-error {
    display: block;
    margin-top: 4rem;
    font-size: 12rem;
    line-height: 0.8;
    color: #F54336;
}

.form-text {
    font-family: var(--second-font);
    font-size: 16rem;
    line-height: 1.2;
    text-align: center;
    color: #A3A4A5;
}

.form-text a {
    font-weight: bold;
    color: var(--accent-blue);
}

.form-text a:hover {
    color: var(--accent-blue-hover);
}

.ch,
.rd {
    display: none;
}

.ch + label,
.rd + label {
    position: relative;
    display: inline-block;
    padding-left: 30rem;
    cursor: pointer;
    font-size: 14rem;
    line-height: 1.4;
    color: var(--main-color);
    transition: all 0.3s ease;
}

.ch + label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20rem;
    height: 20rem;
    border: 1rem solid var(--light, #B5B5B5) var(--dark, #fff);
    border-radius: 4rem;
    background-color: transparent;
    transition: all 0.3s ease;
}

.ch + label:hover::before {
    border-color: var(--accent-blue);
}

input.error.ch + label::before {
    border-color: #FF0000;
}

.ch + label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20rem;
    height: 20rem;
    background: url(../img/icons/check.svg) center/13rem no-repeat var(--accent-blue);
    border-radius: 4rem;
    transform: scale(0);
    transition: all 0.3s ease;
}

.rd + label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 20rem;
    height: 20rem;
    border: 1rem solid #fff;
    border-radius: 20rem;
    background-color: transparent;
    transition: all 0.3s ease;
}

.rd + label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 20rem;
    height: 20rem;
    background: var(--accent-blue);
    border-radius: 20rem;
    transform: scale(0);
    transition: all 0.2s linear;
}

.ch:checked + label::before,
.rd:checked + label::before {
    border-color: var(--accent-blue);
}

.ch:checked + label::after,
.rd:checked + label::after {
    transform: scale(1);
}

.ch + label a,
.rd + label a {
    font-weight: bold;
    color: var(--accent-blue);
    text-decoration: underline;
}

.ch + label a:hover,
.rd + label a:hover {
    text-decoration: none;
}

.form .button:not(.button-configuration) {
    width: 100%;
}

.ch-button-configuration {
    display: none;
}

.ch-button-configuration + label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 8rem 16rem;
    background: transparent;
    border: 2rem solid var(--light, #DEDEDE) var(--dark, var(--main-bg));
    border-radius: var(--border-radius);
    font-family: var(--second-font);
    font-weight: 700;
    font-size: 16rem;
    line-height: 1.2;
    text-align: center;
    color: var(--light, #676767) var(--dark, var(--main-color));
    transition: all .3s ease;
    cursor: pointer;
}

.ch-button-configuration:hover + label {
    color: var(--light, var(--dark-hlines-color)) var(--dark, var(--accent-blue));
    background: var(--light, var(--accent-blue)) var(--dark, var(--main-bg));
}

.ch-button-configuration:checked + label {
    color: var(--light, var(--dark-hlines-color)) var(--dark, var(--accent-blue));
    background: var(--light, var(--accent-blue)) var(--dark, var(--main-bg));
}
/* end forms */

/* modals */
.modal {
    display: none;
    max-width: 406rem;
    width: 100%;
    padding: 0;
    border-radius: var(--border-radius);
    background: var(--dark-block-bg);
    border: 1rem solid var(--border-color);
}
/* end modals */

.section {
    position: relative;
    padding: 48rem 0 80rem;
}

.header + .section,
.header-mob + .section {
    margin-top: 100rem;
}

.section-build-page {
    padding: 80rem 0;
}

.build-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 480rem;
    z-index: 0;
    display: var(--light, none) var(--dark, block);
}

.build-page-main-info {
    padding: var(--light, 24rem) var(--dark, 0);
    background: var(--light, var(--main-bg)) var(--dark, transparent);
    border-radius: var(--border-radius);
}

.guide-time-block {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.guide-time {
    font-weight: 500;
    font-size: 14rem;
    line-height: 1.2;
    color: var(--gray-color);
}

.content-wrapper {
    display: flex;
    gap: 0 40rem;
    margin-top: 48rem;
}

.build-page-content-column {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20rem 0;
    max-width: 830rem;
    width: 100%;
    padding: var(--light, 36rem) var(--dark, 0);
    border-radius: var(--border-radius);
    font-size: 16rem;
    line-height: 1.5;
    /* overflow: hidden; */
}

.build-page-content-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light, var(--main-bg)) var(--dark, transparent);
    border-radius: var(--border-radius);
    z-index: -1;
}

.aside-navigation-menu-button,
.aside-navigation-menu {
    display: none;
}

.aside-navigation {
    max-width: 320rem;
    width: 100%;
}

.navigation-menu {
    position: sticky;
    top: 120rem;
    background: var(--light, var(--main-bg)) var(--dark, transparent);
    border-radius: var(--border-radius);
}

.navigation-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 100%;
    background: var(--light, transparent) var(--dark, #19191E);
}

.navigation-menu-list {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 290rem);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.navigation-menu-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.navigation-menu-title {
    padding: var(--light, 20rem) var(--dark, 35rem) 12rem 20rem 30rem;
    font-weight: 500;
}

.navigation-menu-link {
    position: relative;
    padding: 10rem 24rem 10rem 42rem;
    background: transparent;
    font-family: var(--second-font);
    font-size: 16rem;
    line-height: 1.5;
    color: var(--menu-color);
    transition: all .3s ease;
}

.navigation-menu-link:hover,
.navigation-menu-link.active {
    background: var(--light, var(--block-bg-hover)) var(--dark, var(--main-bg));
    color: var(--light, var(--hlines-color)) var(--dark, var(--main-color));
}

.navigation-menu-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 100%;
    background: transparent;
    transition: all .3s ease;
}

.navigation-menu-link.active::before {
    background: var(--accent-blue);
}

.navigation-menu .buttons {
    flex-wrap: nowrap;
    gap: 6rem;
    padding: 18rem 24rem;
}

.ch-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 6rem;
}

.navigation-menu .button {
    width: 100%;
}

.aside-navigation-parameters .buttons {
    padding: 0;
}

.aside-navigation-parameters {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 18rem 12rem;
    background: var(--block-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
    transition: all .3s ease;
}

.aside-navigation-parameters.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.aside-navigation-parameter-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12rem;
    padding-top: 18rem;
    padding-bottom: 18rem;
    border-bottom: 1rem solid var(--border-color);
}

.aside-navigation-parameter-block:first-child {
    padding-top: 0;
}

.aside-navigation-parameter-block:last-child {
    padding-bottom: 0;
    border: 0;
}

.aside-navigation-parameter-title {
    color: var(--hlines-color)
}

.aside-navigation-parameter-text {
    font-size: 14rem;
}

p a,
li a:not([class]),
.item_poetrade {
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: underline;
    cursor: pointer;
    transition: all .3s ease;
}

p a:hover,
li a:hover,
.item_poetrade:hover {
    color: var(--accent-blue-hover);
    text-decoration: none;
}

.update-build-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20rem 0;
    max-height: 300rem;
    padding: 24rem 30rem;
    margin-bottom: 80rem;
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.update-build-block::after {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--light, linear-gradient(180deg, rgba(247, 247, 247, 0) 52.22%, #F7F7F7 76%)) var(--dark, linear-gradient(180deg, rgba(14, 14, 18, 0) 52.22%, #0E0E12 75.86%));
    pointer-events: none;
}

.update-build-block.open {
    max-height: 100%;
    padding-bottom: 70rem;
}

.update-build-block.open::after {
    display: none;
}

.button-open {
    position: absolute;
    left: 30rem;
    bottom: 24rem;
    background: none;
    border: none;
    padding-right: 20rem;
    font-family: var(--second-font);
    font-size: 18rem;
    line-height: 1.2;
    color: var(--menu-color);
    z-index: 2;
}

.button-open::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 11rem;
    height: 100%;
    background: url(../img/icons/arrow-down.svg) center/contain no-repeat;
    transition: all .3s ease;
}

.open .button-open::after {
    transform: rotate(-180deg);
}

.build-page-content-block {
    display: flex;
    flex-direction: column;
    gap: 20rem 0;
    margin-bottom: 46rem;
    overflow: hidden;
}

.build-page-content-block:last-child {
    margin-bottom: 0;
}

.build-page-content-block#comments-block {
    overflow: visible;
}

.attention-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 20rem;
    margin-top: 30rem;
    padding: 36rem 30rem 24rem;
    background: var(--light, #EEDFE2) var(--dark, var(--gradient-red));
    border: 1rem solid var(--dark-red);
    border-radius: var(--border-radius);
}

.attention-block.interesting {
    background: var(--light, #DFE9EE) var(--dark, var(--gradient-blue));
    border-color: var(--dark-blue);
}

.attention-block-label {
    position: absolute;
    top: -14rem;
    left: 24rem;
    padding: 6rem 14rem;
    background: var(--dark-red);
    border-radius: var(--border-radius);
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 14rem;
    line-height: 1.2;
    color: var(--dark-hlines-color);
    text-align: center;
    text-transform: uppercase;
}

.attention-block.interesting .attention-block-label {
    background: var(--dark-blue);
}

.possibilities-block {
    display: flex;
    flex-wrap: wrap;
    gap: 10rem 6rem;
}

.possibility {
    display: flex;
    flex-direction: column;
    gap: 24rem 0;
    max-width: calc(50% - 6rem);
    width: 100%;
    padding: 24rem 18rem;
    border: 1rem solid var(--light, #B5B5B5) var(--dark, var(--dark-border-color));
}

.possibility:nth-child(odd) {
    border-radius: 12rem 0 0 12rem;
}

.possibility:nth-child(even) {
    border-radius: 0 12rem 12rem 0;
}

.possibility-can {
    background: var(--light, #DFEEDF) var(--dark, linear-gradient(180deg, rgba(19, 77, 34, 0.75) -49.63%, #17171C 40.15%));
}

.possibility-cant {
    background: var(--light, #EEDFE2) var(--dark, linear-gradient(180deg, rgba(123, 18, 40, 0.75) -49.81%, #17171C 39.81%));
}

.possibility h3 {
    padding-left: 38rem;
}

.possibility-list {
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
    list-style: none;
}

.possibility-list > *,
.possibility-element {
    position: relative;
    margin-left: 0;
    padding-left: 38rem;
}

.possibility-list > *::before,
.possibility-element::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0;
    width: 26rem;
    height: 26rem;
}

.possibility-can .possibility-list > *::before,
.possibility-element-can::before {
    background: var(--light, url(../img/icons/cross-yes-white.svg)) var(--dark, url(../img/icons/cross-yes.svg)) center/contain no-repeat;
}

.possibility-cant .possibility-list > *::before,
.possibility-element-cant::before {
    background: var(--light, url(../img/icons/cross-no-white.svg)) var(--dark, url(../img/icons/cross-no.svg)) center/contain no-repeat;
}

.separate {
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.two-columns-block {
    display: flex;
    justify-content: space-between;
    gap: 12rem;
    margin: 12rem 0;
}

.two-columns-block > * {
    display: flex;
    flex-direction: column;
    max-width: 50%;
    width: 100%;
    gap: 20rem;
}

.section-text-page .container {
    display: flex;
    flex-direction: column;
    gap: 24rem 0;
    max-width: 830rem;
    padding: var(--light, 36rem) var(--dark, 0 16rem);
    background: var(--light, var(--main-bg)) var(--dark, transparent);
    border-radius: var(--border-radius);
    font-size: 18rem;
    line-height: 1.6;
}

span.article-npc-friendly > span {
    color: #02bb10;
    text-decoration: none
}

span.article-npc-enemy > span {
    color: #b50606;
    text-decoration: none
}

span.article-location > span {
    color: #9c27b0;
    text-decoration: none
}

.article-npc-friendly, .article-npc-enemy, .article-location {
    font-weight: 600
}

.tarifs {
    display: flex;
    flex-wrap: wrap;
    gap: 24rem;
}

.tarif {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18rem 0;
    max-width: calc(33% - 12rem);
    width: 100%;
    padding: 24rem;
    background: var(--light, var(--main-bg)) var(--dark, transparent);
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 18rem;
    line-height: 1.5;
}

.tarif.popular {
    border-color: var(--accent-blue)
}

.tarif-title {
    display: block;
    vertical-align: middle;
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.4;
}

.tarif-title img {
    max-width: 60rem;
    max-height: 30rem;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

.tarif-text {
    font-weight: 500;
    text-align: center;
}

.tarif .possibility-list {
    position: relative;
    padding: 30rem 0;
}

.tarif .possibility-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.tarif .possibility-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.tarif .possibility-element-cant {
    color: #B0B0B1;
}

.tarif-price {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.5;
    text-align: center;
}

.tarif .button {
    width: 100%;
}

.premium-nickname {
    display: inline-block;
    padding: 2rem 4rem;
    background: var(--gray-btn);
    border-radius: var(--small-border-radius);
    font-weight: 600;
    color: var(--light, var(--dark-hlines-color)) var(--dark, var(--main-color));
}

.premium-nickname-comments {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
}

.premium-nickname-comments img {
    max-width: 48rem;
    max-height: 24rem;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

.premium-lite {
    background: #682D30;
}

.premium-nickname-comments.premium-lite {
    background: none;
    color: #CB1D26;
}

.premium-medium {
    background: #1B614A;
}

.premium-nickname-comments.premium-medium {
    background: none;
    color: #2AD999;
}

.premium-best {
    background: #A07434;
}

.premium-nickname-comments.premium-best {
    background: none;
    color: #DE9F42;
}

.admin-nickname {
    display: inline-block;
    padding: 2rem 8rem;
    background: var(--accent-blue);
    border-radius: var(--small-border-radius);
    font-weight: 600;
    font-size: 16rem;
    line-height: 1.5;
    color: #F9F9F9;
}

.admin-nickname img {
    max-width: 40rem;
    max-height: 20rem;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

.section-mainpage-cards {
    padding: 48rem 0;
}

.section-mainpage-cards:last-child {
    padding-bottom: 80rem;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24rem;
}

.slider-cards {
    width: 100%;
    padding-bottom: 24rem;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: calc(33% - 12rem);
    width: 100%;
    height: 262rem;
    gap: 12rem 0;
    padding: 24rem;
    border: 1rem solid var(--dark-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.slider-cards .swiper-wrapper {
    gap: 0 16rem;
}

.slider-cards .swiper-slide {
    width: 265rem !important;
}

.slider-cards .card {
    max-width: 265rem;
    height: 180rem;
    padding: 12rem;
}

.card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

.card:hover .card-bg-img {
    transform: scale(1.05);
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(8, 8, 11, 0.6) 25.32%, #08080B 100%);
}

.card-tags {
    position: absolute;
    top: 8rem;
    right: 8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8rem;
    z-index: 1;
}

.card-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 14rem;
    border-radius: var(--border-radius);
    background: #424755;
    font-weight: 600;
    font-size: 12rem;
    line-height: 1;
    color: var(--dark-hlines-color);
}

.card-date {
    position: relative;
    font-weight: 500;
    font-size: 14rem;
    line-height: 1.2;
    color: var(--gray-color);
    z-index: 1;
}

.card-name {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 20rem;
    line-height: 1.5;
    color: var(--dark-hlines-color);
    z-index: 1;
}

.slider-cards .card-name {
    font-size: 14rem;
}

.cards + .buttons {
    display: none;
}

.builds-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24rem;
    padding: 48rem 0;
}

.builds-class-list {
    padding-top: 0;
}

.builds {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: calc(25% - 18rem);
    width: 100%;
    height: 192rem;
    padding: 18rem;
    border: 1rem solid var(--dark-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    font-family: var(--second-font);
}

.builds-class-list .builds {
    max-width: calc(33% - 12rem);
    height: 68rem;
}

.builds-class-list .builds::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(8, 8, 11, 0.25) 19.36%, rgba(8, 8, 11, 0.9) 90.15%);
}

.builds-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

.builds-title {
    position: relative;
    margin-bottom: 6rem;
    font-weight: bold;
    font-size: 18rem;
    line-height: 1.2;
    color: var(--dark-hlines-color);
    z-index: 1;
}

.builds-title:hover {
    color: var(--dark-main-color);
}

.builds-title-mob {
    display: none;
}

.builds-title-separate {
    position: relative;
    width: 60rem;
    margin-bottom: 8rem;
    border-bottom: 2rem solid var(--dark-border-color);
    z-index: 1;
}

.builds-links {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    z-index: 1;
}

.build-link {
    font-size: 16rem;
    line-height: 1.2;
    color: #A3A4A5;
}

.build-link:hover {
    color: var(--dark-main-color);
}

.cards-long {
    display: flex;
    flex-wrap: wrap;
    gap: 24rem;
}

.card-long {
    position: relative;
    display: flex;
    gap: 6rem;
    max-width: calc(50% - 12rem);
    width: 100%;
    height: 136rem;
    background: var(--main-bg);
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.card-long-img {
    position: relative;
    width: 225rem;
    height: 136rem;
    border-radius: 12rem 0 0 12rem;
    overflow: hidden;
}

.card-long-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

.card-long:hover .card-long-img img {
    transform: scale(1.05);
}

.card-long-info {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    max-width: calc(100% - 232rem);
    padding: 12rem;
}

.card-long-name {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 18rem;
    line-height: 1.2;
    color: var(--hlines-color);
    z-index: 1;
}

.card-long-name-mob {
    display: none;
}

.card-long-text {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14rem;
    line-height: 1.5;
    color: var(--main-color);
    z-index: 1;
}

.card-long-date {
    position: relative;
    margin-top: auto;
    font-weight: 500;
    font-size: 14rem;
    line-height: 1.2;
    color: var(--gray-color);
    z-index: 1;
}

.cards-long + .buttons {
    display: none;
}

.videos {
    display: flex;
    flex-wrap: wrap;
    gap: 24rem;
}

.video {
    position: relative;
    max-width: calc(33% - 12rem);
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.video .play-button {
    width: 64rem;
    height: 45rem;
}

.video .play-button::before {
    border-width: 10rem 0 10rem 20rem;
}

.videos + .buttons {
    display: none;
}

.search-page-result-block + .search-page-result-block {
    margin-top: 48rem;
}

.poe-items-list,
.tags-items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12rem;
}

.poe-item-element,
.tag-item-element {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: calc(50% - 6rem);
    width: 100%;
    gap: 12rem;
    padding: 24rem;
    background: var(--light, var(--main-bg)) var(--dark, transparent);
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.tag-item-text {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    cursor: pointer;
}

.tag-item-text img {
    max-width: 60rem;
    max-height: 30rem;
    height: auto;
    margin-right: 5rem;
    vertical-align: middle;
    pointer-events: none;
}

.poe-item-type {
    text-align: right;
}

.seo-text-block {
    margin-top: 48rem;
}

.seo-text {
    display: flex;
    flex-direction: column;
    gap: 20rem 0;
    font-size: 18rem;
    line-height: 1.5;
}

.bg-class-page {
    position: absolute;
    top: 0;
    right: 0;
}

.section-registration {
    position: relative;
    background: var(--light, url(../img/bg_registration-light.png)) var(--dark, url(../img/bg_registration-dark.png)) center/cover no-repeat;
}

.with-tooltip {
    display: flex;
    align-items: center;
    gap: 6rem;
}

.tooltip-wrapper {
    position: relative;
}

.tooltip-trigger {
    cursor: pointer;
}

.help-click {
    position: relative;
    width: 18rem;
    height: 18rem;
    background: var(--light, url(../img/icons/help-white.svg)) var(--dark, url(../img/icons/help.svg)) center/contain no-repeat;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 6rem 0;
    width: 240rem;
    padding: 6rem 8rem;
    background: var(--light, #17171C) var(--dark, #C2C2C2);
    border-radius: var(--small-border-radius);
    font-size: 14rem;
    line-height: 1.5;
    color: var(--light, #F9F9F9) var(--dark, #0A0A0A);
    z-index: 1;
    transition: all .3s ease;
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
}

.tooltip-copy {
    top: 66%;
    width: 115rem;
}

.tooltip.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.tooltip-title {
    font-weight: 500;
    font-size: 14rem;
    line-height: 1.2;
    color: var(--light, #F9F9F9) var(--dark, #000);
}

.profile-wrapper {
    position: relative;
    display: flex;
    gap: 0 18rem;
}

.profile-column {
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
    max-width: 830rem;
    width: 100%;
}

.profile-block {
    position: relative;
    width: 100%;
    padding: 24rem;
    background: var(--light, var(--main-bg)) var(--dark, var(--block-bg));
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.profile-name {
    margin-bottom: 6rem;
    font-weight: 600;
    font-size: 20rem;
    line-height: 1.5;
    color: var(--hlines-color)
}

.profile-tarif {
    position: absolute;
    top: 24rem;
    right: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8rem;
    height: 26rem;
    padding: 3rem 8rem;
    border-radius: 3rem;
    font-size: 16rem;
    line-height: 1.2;
}

.profile-tarif img {
    width: 20rem;
}

.profile-rating {
    display: flex;
    align-items: center;
    gap: 0 6rem;
    margin-bottom: 18rem;
}

.profile-rating-text {
    font-size: 16rem;
    line-height: 1.5;
    color: var(--light, #787D86) var(--dark, #B0B0B1);
}

.profile-rating-count {
    font-weight: 600;
    font-size: 18rem;
    line-height: 1.6;
    color: #1AAA42;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
    margin-bottom: 18rem;
}

.profile-tag {
    padding: 5rem 12rem;
    background: var(--light, #F2F2F2) var(--dark, var(--main-bg));
    border: 1rem solid var(--light, #DEDEDE) var(--dark, transparent);
    border-radius: var(--small-border-radius);
    font-weight: 600;
    font-size: 16rem;
    line-height: 1.2;
    color: var(--light, #79798B) var(--dark, #D0D0E9);
}

.profile-rewards {
    display: flex;
    flex-direction: column;
    gap: 12rem 0;
}

.profile-rewards-title {
    font-weight: 600;
    font-size: 16rem;
    line-height: 1.5;
    color: var(--hlines-color);
}

.profile-rewards-text {
    font-size: 16rem;
    line-height: 1.5;
    color: #B0B0B1;
}

.profile-rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18rem;
}

.profile-reward-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rem;
    height: 60rem;
    cursor: pointer;
}

.profile-reward-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-info-block {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
    max-width: 352rem;
    width: 100%;
    padding: 18rem 24rem;
    background: var(--light, var(--main-bg)) var(--dark, var(--block-bg));
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.profile-info-title {
    font-weight: 600;
    font-size: 16rem;
    line-height: 1.5;
    color: var(--hlines-color);
}

.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
    padding: 17rem 0;
    border-top: 1rem solid var(--border-color);
    border-bottom: 1rem solid var(--border-color);
}

.profile-info-element {
    display: flex;
    gap: 0 24rem;
}

.profile-info-element-name {
    position: relative;
    width: 130rem;
    padding-left: 24rem;
    font-weight: 600;
    font-size: 14rem;
    line-height: 1.2;
}

.profile-info-element-name::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 18rem;
    height: 18rem;
}

.profile-info-element-name.reg::before {
    background: var(--light, url(../img/icons/birthday-white.svg)) var(--dark, url(../img/icons/birthday.svg)) center/contain no-repeat;
}

.profile-info-element-name.discord::before {
    background: var(--light, url(../img/icons/discord-white.svg)) var(--dark, url(../img/icons/discord.svg)) center/contain no-repeat;
}

.profile-info-element-name.username-poe::before {
    background: var(--light, url(../img/icons/user-white.svg)) var(--dark, url(../img/icons/user.svg)) center/contain no-repeat;
}

.profile-info-element-text {
    font-size: 14rem;
    line-height: 1.2;
}

.profile-info-element-text a {
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: underline;
}

.profile-info-element-text a:hover {
    color: var(--accent-blue-hover);
    text-decoration: none;
}

.profile-voting-info {
    font-size: 14rem;
    line-height: 1.5;
}

.profile-voting-info span {
    font-weight: 600;
}

.vote-plus {
    color: #1AAA42;
}

.vote-minus {
    color: #E51039;
}

.tippy-box {
    max-width: 400rem !important;
    font-size: 14rem;
    background-color: #33333375;
}

.profile-comments-block,
.profile-comments-block .tabs-block {
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
}

.profile-comments-block .tab {
    background: var(--light, #FAFAFA) var(--dark, var(--main-bg));
    border-radius: var(--small-border-radius);
    border-bottom: 1rem solid var(--light, #D8D8D8) var(--dark, transparent);
}

.profile-comments-block .tab.active {
    background: var(--accent-blue);
}

.profile-comments-block .tabs-content {
    padding: 0;
    border: 0;
}

.profile-comments-block .comments-block {
    gap: 18rem 0;
    margin-top: 0;
}

.profile-comments-block .comments-ajax {
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
}

.profile-comments-block .comment-item-self {
    padding: 24rem;
    background: var(--main-bg);
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
}

.comment-post-info {
    display: flex;
    gap: 0 6rem;
    width: 100%;
    color: #B0B0B1;
}

.comment-post-link {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 77%;
    color: var(--hlines-color);
}

.comment-post-link:hover {
    text-decoration: underline;
}

.profile-comments-block .comment-item-content {
    margin: 18rem 0;
}

.profile-comments-block .comment-like-button:first-child,
.profile-comments-block .comment-like-button:last-child {
    background-color: var(--light, #E9E9E9) var(--dark, var(--dark-block-bg));
}

.profile-comments-block .comment-like-button:hover {
    background-color: var(--light, #D6D6D6) var(--dark, var(--gray-btn));
}

.comments-high {
    display: flex;
    flex-direction: column;
    gap: 54rem 0;
}

.comments-high .comment-item {
    position: relative;
}

.comments-high > .comment-item .comment-item-self {
    padding-top: 0;
}

.comments-high .comment-item::before {
    content: '';
    position: absolute;
    inset: -18rem;
    width: calc(100% + 36rem);
    height: calc(100% + 36rem);
    margin: auto;
    background: var(--light, #F3F3F3) var(--dark, #121218);
    border-radius: var(--small-border-radius);
}

.comments-high > .comment-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 15rem;
    height: 15rem;
    background: var(--light, url(../img/icons/pin-white.svg)) var(--dark, url(../img/icons/pin.svg)) center/contain no-repeat;
}

.show_password {
    position: absolute;
    top: 38rem;
    right: 16rem;
    width: 24rem;
    height: 24rem;
    background: var(--light, url(../img/icons/eye-white.svg)) var(--dark, url(../img/icons/eye.svg)) center/contain no-repeat;
    cursor: pointer;
}

.show_password.showed {
    background: var(--light, url(../img/icons/eye-off-white.svg)) var(--dark, url(../img/icons/eye-off.svg)) center/contain no-repeat;
}

img[data-fancybox] {
    display: block;
    /* max-width: 480rem;
    width: 100%; */
    max-height: 300rem;
    margin: 0 auto;
    cursor: pointer;
}

img.slide-image {
    max-width: 100%;
    max-height: none;
}

.image-wrapper {
    max-width: 480rem;
    width: 100%;
    margin: 0 auto;
}

.wide-image {
    max-width: 100%;
}

.wide-image img {
    width: 100%;
}

img.wide-image[data-fancybox] {
    max-height: none;
}

.ru-poe,
.en-poe {
	color: var(--light, var(--white-mod-color)) var(--dark, var(--dark-mod-color));
}

.fancybox__caption {
    max-width: 1200rem;
}

/* preloader */
.lds-ellipsis,
.lds-ellipsis div {
    box-sizing: border-box;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80rem;
    height: 80rem;
}

.lds-ellipsis div {
    position: absolute;
    top: 33.33333rem;
    width: 13.33333rem;
    height: 13.33333rem;
    border-radius: 50%;
    background: currentColor;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8rem;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}
/* preloader end */

.section-tarifs-title {
    padding-bottom: 24rem;
}

.section-tarifs-title .container {
    max-width: 100%;
    padding: 0;
}

.yellow-gradient {
    color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: var(--light, linear-gradient(90deg, #0D5EAA 0%, #1E87E9 53.37%, #0D5EAA 100%)) var(--dark, linear-gradient(90deg, #FFCD0F 0%, #D78000 53.37%, #FFCD0F 100%));
}

.tarifs-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0 18rem;
    font-weight: bold;
    font-size: 48rem;
    line-height: 1;
}

.tarifs-title span {
    position: relative;
    display: inline-block;
    min-width: fit-content;
    z-index: 1;
}

.tarifs-title::before {
    content: '';
    position: relative;
    margin: auto;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.tarifs-title::after {
    content: '';
    position: relative;
    margin: auto;
    width: 100%;
    height: 1rem;
    background: var(--border-color);
}

.tarifs-subtitle {
    margin: 16rem auto 0;
    font-weight: 500;
    font-size: 18rem;
    text-align: center;
    color: var(--light, #0D5EAA) var(--dark, #DE9F42);
}

.section-tarifs {
    padding: 36rem 0 48rem;
}

.price-switch-block {
    position: relative;
    margin-bottom: 24rem;
}

.price-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rem;
}

.text-switch {
    position: relative;
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 20rem;
    line-height: 1;
    text-transform: uppercase;
}

.price-switch input {
    position: absolute !important;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    bottom: 0;
}

.price-switch label {
    display: inline-block;
    position: relative;
    width: 48rem;
    height: 30rem;
    background-color: #474747;
    border-radius: 30rem;
    cursor: pointer;
    transition: background-color 500ms ease;
}

.price-switch input:checked + label {
    background: var(--accent-blue);
}

.price-switch label::after {
    content: '';
    display: block;
    height: 26rem;
    width: 26rem;
    position: absolute;
    top: 2rem;
    right: 20rem;
    border-radius: 50%;
    background-color: #fff;
    transition: right 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
}

.price-switch input:checked + label::after {
    right: 2rem;
}

.tarifs-table {
    display: flex;
    flex-direction: column;
}

.tarifs-table-header,
.tarifs-table-body {
    display: flex;
    flex-direction: column;
}

.tarifs-table-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex: 1 0 100%;
    gap: 0 24rem;
}

.tarifs-table-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180rem;
    padding: 8rem 6rem;
    border-left-width: 2rem;
    border-right-width: 2rem;
    border-style: solid;
    border-color: transparent;
    font-size: 18rem;
    line-height: 1.5;
}

.tarifs-table-cell:first-child {
    align-items: flex-start;
    max-width: 384rem;
    width: 100%;
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    font-size: 16rem;
}

.tarifs-table-header .tarifs-table-row:first-child .tarifs-table-cell {
    padding-top: 24rem;
    border-top-width: 2rem;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.tarifs-table-body .tarifs-table-row:last-child .tarifs-table-cell {
    padding-bottom: 24rem;
    border-bottom-width: 2rem;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.tarifs-table-header .tarifs-table-row:last-child .tarifs-table-cell {
    padding-bottom: 24rem;
}

.tarifs-table-cell.popular {
    border-color: var(--accent-blue);
}

.tarifs-table-cell .button {
    width: 100%;
}

.tarif-table-title {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.5;
    text-align: center;
    width: 100%;
    margin-bottom: 16rem;
    padding-bottom: 20rem;
    border-bottom: 1rem solid var(--border-color);
}

.tarif-table-price {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.5;
}

.en-price,
.en-pricing .ru-price {
    display: none;
}

.en-pricing .en-price {
    display: block;
}

.en-pricing .en-price.button {
    display: flex;
}

.tarifs-table-info-title {
    font-weight: 600;
    font-size: 18rem;
}

.tarif-possibility {
    width: 26rem;
    height: 26rem;
}

.tarif-possibility-can {
    background: var(--light, url(../img/icons/cross-yes2-white.svg)) var(--dark, url(../img/icons/cross-yes2.svg)) center / contain no-repeat;
}

.tarif-possibility-cant {
    background: var(--light, url(../img/icons/cross-no2-white.svg)) var(--dark, url(../img/icons/cross-no2.svg)) center / contain no-repeat;
}

.tarif-possibility-list {
    display: flex;
    flex-direction: column;
    gap: 18rem 0;
    list-style: none;
}

.tarif-possibility-element {
    position: relative;
    margin-left: 0;
    padding-left: 38rem;
}

.tarif-possibility-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 26rem;
    height: 26rem;
}

.tarif-possibility-element-can::before {
    background: var(--light, url(../img/icons/cross-yes2-white.svg)) var(--dark, url(../img/icons/cross-yes2.svg)) center / contain no-repeat;
}

.tarif-possibility-element-cant::before {
    background: var(--light, url(../img/icons/cross-no2-white.svg)) var(--dark, url(../img/icons/cross-no2.svg)) center / contain no-repeat;
}

.tarif-possibility-element-cant {
    color: #B0B0B1;
}

.section-advantages {
    padding: 0;
}

.advantages {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24rem;
}

.advantage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12rem 0;
    padding: 18rem;
    border: 1rem solid var(--border-color);
    border-radius: var(--border-radius);
    grid-column-end: span 3;
}

.advantage.w33 {
    grid-column-end: span 4;
}

.advantage.w50 {
    grid-column-end: span 6;
}

.advantage-title-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12rem 0;
}

.advantage-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rem;
    min-width: 40rem;
    height: 40rem;
    background: var(--main-bg);
    border: 1rem solid var(--light, #DEDEDE) var(--dark, transparent);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.advantage-icon img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    max-width: 24rem;
    height: 100%;
    object-fit: contain;
}

.advantage-title {
    font-weight: 600;
    font-size: 20rem;
    line-height: 1.5;
}

.advantage-text {
    font-size: 14rem;
    line-height: 1.5;
}

.section-faq .container {
    max-width: 830rem;
}

.faq-title {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 24rem;
    line-height: 1.4;
    margin-bottom: 24rem;
}

.section-faq .accordion-title {
    font-size: 18rem;
    line-height: 1.2;
}

.form-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12rem 0;
}

/*end main styles*/

/*adaptive styles*/
@media (max-width: 1280px) {
    html {
        font-size: calc(100vw / 1280);
    }
}
/*end adaptive styles*/

/*mobile styles*/
@media (max-width: 480px) {
    html {
        font-size: calc(100vw / 480);
    }

    .container {
        padding: 0 16rem;
    }

    .header {
        display: none;
    }

    .header + .section,
    .header-mob + .section {
        margin-top: 60rem;
    }

    .header-mob {
        display: block;
        position: fixed;
        width: 100%;
        height: 60rem;
        margin: auto;
        background: var(--main-bg);
        font-family: var(--second-font);
        z-index: 10;
    }

    .header-mob-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60rem;
    }

    .logo {
        width: 156rem;
        height: 16rem;
    }

    .profile-header-block {
        width: 30rem;
        height: 30rem;
        margin-left: auto;
    }

    .profile-header-link {
        position: relative;
        display: block;
        width: 30rem;
        height: 30rem;
        background: url(../img/icons/profile.png) center/contain no-repeat;
        font-size: 0;
        line-height: 1;
    }

    .profile-header-link.auth {
        background: url(../img/icons/account.svg) center/contain no-repeat;
    }

    .profile-header-block .dropdown-list {
        left: auto;
        right: -40rem;
        width: max-content;
    }

    .notice-header-block + .profile-header-block {
        margin-left: 18rem;
    }

    .notice-header-block {
        position: static;
        margin-left: auto;
    }

    .notice-block {
        top: 60rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
    }

    .notice-block-list {
        max-height: calc(100vh - 145rem);
    }
    
    .menu {
        position: relative;
        display: block;
        width: 22rem;
        height: 16rem;
        margin-left: 18rem;
        background-color: transparent;
        font-size: 0;
        text-indent: -999rem;
        z-index: 11;
    }
    
    .menu span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 3rem;
        background: var(--light, #787879) var(--dark, #787879);
        border-radius: 3rem;
        transition: background 0s .3s;
    }
    
    .menu::before,
    .menu::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 3rem;
        background: var(--light, #787879) var(--dark, #787879);
        border-radius: 3rem;
        transition-duration: 0.3s, 0.3s;
        transition-delay: 0.3s, 0s;
    }
    
    .menu::before {
        top: -100%;
        transition-property: top, transform;
    }
    
    .menu::after {
        bottom: -100%;
        transition-property: bottom, transform;
    }
    
    .menu.active::before {
        top: 0;
        transform: rotate(45deg);
    }
    
    .menu.active::after {
        bottom: 0;
        transform: rotate(-45deg);
    }
    
    .menu.active::before,
    .menu.active::after {
        background: var(--light, #313131) var(--dark, #DADADA);
        transition-delay: 0s, 0.3s;
    }
    
    .menu.active span {
        background: none !important;
    }

    .menu-links-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24rem;
        position: absolute;
        top: 60rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        min-height: 100vh;
        height: fit-content;
        max-height: calc(100vh - 60rem);
        padding: 24rem 16rem;
        background: var(--light, #fff) var(--dark, var(--block-bg));
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: all .3s ease;
        overflow-y: auto;
        -ms-overflow-style: none;
		scrollbar-width: none;
    }

    .menu-links-wrapper::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    
    .header-mob.active .menu-links-wrapper {
        opacity: 1;
        pointer-events: all;
    }

    .input-search {
        height: 40rem;
        padding: 10rem 12rem 10rem 40rem;
        background: var(--light, #EDEDED) var(--dark, transparent);
        border: 1rem solid var(--border-color);
        color: var(--hlines-color);
    }

    .button-search {
        left: 12rem;
    }

    .input-search-overlay {
        top: 0;
        height: 40rem;
    }

    .dropdown-block {
        width: 100%;
        padding-right: 0;
        padding-bottom: 24rem;
    }

    .dropdown-block::after {
        top: auto;
        left: 0;
        right: auto;
        width: 100%;
        height: 1rem;
        background: var(--border-color);
    }

    .dropdown-block-title {
        display: block;
        margin-bottom: 12rem;
        font-family: var(--main-font);        
    }

    .dropdown-current {
        position: relative;
        display: block;
        width: 100%;
        height: 40rem;
        padding: 10rem 32rem 10rem 12rem;
        background: var(--light, #EDEDED) var(--dark, var(--main-bg));
        border: 1rem solid var(--border-color);
        border-radius: var(--small-border-radius);
        font-family: var(--second-font);
        font-size: 16rem;
        color: var(--hlines-color);
        transition: all .3s ease;
        z-index: 1;
    }

    .dropdown-current::after {
        right: 12rem;
        width: 10rem;
        height: 6rem;
        background: url(../img/icons/arrow-down-hline.svg) center / contain no-repeat;
    }

    .dropdown-list,
    .dropdown-mini .dropdown-list {
        top: 40rem;
    }

    .dropdown-list {
        width: 100%;
    }

    .menu-links {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24rem 0;
        width: 100%;
    }

    .accordion-text .menu-links {
        padding: 18rem 0;
    }

    .menu-links .accordion-block {
        gap: 24rem 0;
        width: 100%;
    }

    .menu-links .accordion-item {
        padding: 0;
        background: transparent;
        border: 0;
    }

    .menu-links .accordion-title {
        padding-right: 22rem;
        font-size: 18rem;
        line-height: 1.2;
        color: #A3A4A5;
    }

    .menu-links .accordion-title.menu-link:hover, 
    .menu-links .accordion-title.menu-link.current {
        color: var(--main-color);
    }

    .menu-links .accordion-title::after {
        background: url(../img/icons/arrow-down-gray.svg) center / contain no-repeat;
    }

    .menu-links .accordion-text.open {
        padding-top: 18rem;
    }

    .menu-link::before {
        display: none;
    }

    .dropdown-builds {
        position: relative;
        gap: 24rem 12rem;
        padding: 18rem 0;
    }

    .dropdown-builds::before,
    .accordion-text .menu-links::before {
        content: '';
        position: absolute;
        top: 0;
        left: -16rem;
        right: -16rem;
        margin: auto;
        width: calc(100% + 32rem);
        height: 100%;
        background: var(--light, var(--block-bg)) var(--dark, var(--main-bg));
    }

    .dropdown-builds-list {
        position: relative;
        width: calc(50% - 12rem);
    }

    .dropdown-builds-list-link {
        background: transparent;
    }

    .dropdown-builds .buttons,
    .dropdown-builds .button,
    .menu-links-wrapper .button.button-icon {
        width: 100%;
    }

    .footer {
        padding: 36rem 0 24rem;
    }

    .footer-wrapper {
        align-items: center;
    }

    .footer .logo {
        display: block;
    }

    .footer-menu.mobile-visible {
        display: flex;
        flex-direction: column;
        gap: 24rem 0;
    }

    .footer-menu .menu-link {
        font-size: 14rem;
    }

    .copyright {
        margin-top: 0;
        font-size: 14rem;
    }

    /* сначала контейнер, шапка и футер */

    /* buttons */
    .button.gray {
        color: var(--light, #838383) var(--dark, var(--dark-main-color));
    }
    /* end buttons */

    /* tags */

    /* end tags */

    /* typography */
    h1 {
        font-size: 30rem;
    }
    
    h2 {
        font-size: 20rem;
    }
    
    h3 {
        font-size: 18rem;
    }
    
    h4 {
        font-size: 16rem;
    }
    
    h5 {
        font-size: 14rem;
    }
    
    .build-page-content-column h2,
    .section-text-page h2,
    .section-mainpage-cards h2 {
        font-size: 24rem;
        gap: 0;
    }
    
    .build-page-content-column h3,
    .section-text-page h3,
    .section-mainpage-cards h3 {
        font-size: 22rem;
    }
    
    .build-page-content-column h4,
    .section-text-page h4,
    .section-mainpage-cards h4 {
        font-size: 18rem;
    }
    
    .build-page-content-column h5,
    .section-text-page h5,
    .section-mainpage-cards h5 {
        font-size: 16rem;
    }
    
    .build-page-content-block h2::after,
    .section-text-page h2::after {
        display: none;
    }

    .title-with-icon {
        align-items: flex-start;
    }

    .title-icon {
        width: 34rem;
        min-width: 34rem;
        height: 34rem;
        border-radius: 10rem;
    }

    .title-icon img {
        max-width: 18rem;
    }

    .search-page-text {
        font-size: 16rem;
    }
    /* end typography */

    /* lists */

    .list-elements:not(.list-elements-yes, .list-elements-no) > li,
    .section-build-page ul:not([class]) > li:not([class]),
    .section-build-page ul.striped > li:not([class]),
    .section-build-page ol:not([class]) > li:not([class]),
    .section-build-page ol.striped > li:not([class]),
    .section-text-page ul:not([class]) > li:not([class]),
    .section-text-page ul.striped > li:not([class]),
    .section-text-page ol:not([class]) > li:not([class]),
    .section-text-page ol.striped > li:not([class]),
    .section-text-page .article-big-list > li {
        margin-left: 20rem;
        padding-left: 0;
    }

    .section-build-page ul li, 
    .section-build-page ol li{
        padding-right: 0;
    }

    /* end lists */

    /* poe items */

    /* end poe items */

    /* youtube */
    .youtube .play-button {
        width: 56rem;
        height: 40rem;
        border-radius: var(--small-border-radius);
    }

    .youtube .play-button::before {
        border-width: 10rem 0 10rem 18rem;
    }
    /* end youtube */

    /* accordion */
    .accordion-item {
        padding: 12rem 18rem;
    }

    .accordion-title {
        flex-direction: column;
        gap: 10rem 0;
    }

    .accordion-title .tag {
        order: 1;
    }
    /* end accordion */

    /* tabs */
    .tabs {
        flex-wrap: wrap;
        margin-bottom: 8rem;
    }

    .tab {
        max-width: calc(50% - 3rem);
        width: 100%;
        border-radius: var(--small-border-radius);
        text-align: center;
    }

    .tabs-content {
        padding: 24rem 16rem;
    }
    /* end tabs */

    /* copy-details */
    .copy-detail-element {
        position: relative;
        padding: 18rem 18rem 80rem;
    }

    .copy-detail-title {
        position: static;
        padding: 0;
    }

    .copy-link {
        top: auto;
        left: 18rem;
        right: auto;
        bottom: 18rem;
        width: 44rem;
        height: 44rem;
        background: url(../img/icons/copy.svg) center/22rem no-repeat var(--gray-btn);
        border-radius: var(--border-radius);
    }

    .detail-link {
        top: auto;
        right: 18rem;
        bottom: 18rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 8rem;
        width: calc(100% - 86rem);
        height: 44rem;
        padding: 10rem;
        background: var(--gray-btn);
        border-radius: var(--border-radius);
    }

    .detail-link::after {
        position: static;
        margin: auto 0;
    }
    /* end copy-details */

    /* table */
    table {
        display: block;
        overflow-x: auto;
    }
    /* end table */

    /* quote */
    blockquote::before {
        width: 42rem;
        height: 26rem;
    }
    /* end quote */

    /* slider */

    /* end slider */

    /* gallery images */
    .gallery-images {
        gap: 8rem;
    }

    .gallery-image {
        border-radius: var(--small-border-radius);
    }
    /* end gallery images */

    /* comments */

    /* end comments */

    /* select */

    /* end select */

    /* swith theme */
    .theme-switch-block {
        width: 100%;
        padding-top: 24rem;
        padding-right: 0;
    }

    .theme-switch-block::after {
        left: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 1rem;
        background: var(--border-color);
    }

    .theme-switch {
        justify-content: flex-start;
    }

    .dark-switch {
        width: auto;
        padding-left: 30rem;
        background-position: center left;
        background-size: 24rem;
        font-size: 16rem;
        line-height: 1.2;
        color: var(--main-color);
    }

    .theme-switch label {
        width: 44rem;
        height: 24rem;
        margin-left: auto;
        background-color: var(--light, #8B8E9B) var(--dark, #474747);
    }
    
    .theme-switch label::after {
        top: 2rem;
        right: 22rem;
        width: 20rem;
        height: 20rem;
    }

    .theme-switch input:checked + label::after {
        right: 2rem;
    }
    /* end swith theme */

    /* socs */
    .socs-block {
        width: 100%;
        padding-top: 24rem;
        padding-right: 0;
    }

    .footer .socs-block {
        padding: 0;
    }

    .socs-block::after {
        left: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 1rem;
        background: var(--border-color);
    }

    .socs {
        justify-content: center;
    }

    .soc {
        width: 26rem;
        height: 26rem;
    }

    .footer .soc {
        width: 20rem;
        height: 20rem;
    }

    .soc.soc-vk {
        width: 34rem;
    }

    .footer .soc.soc-vk {
        width: 26rem;
    }

    .sharing-block {
        margin-top: 24rem;
    }

    .sharing-block-title {
        display: none;
    }
    /* end socs */

    /* forms */
    .form-wrapper {
        padding: 24rem 18rem;
    }

    .form-title {
        font-size: 22rem;
    }
    /* end forms */

    .section,
    .section-build-page {
        padding: 36rem 0 60rem;
    }

    .content-wrapper {
        flex-direction: column;
        margin-top: 60rem;
    }

    .section-build-page::before,
    .section-text-page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--light, #fff) var(--dark, transparent);
        z-index: -1;
    }

    .aside-navigation-menu-button {
        position: fixed;
        right: 16rem;
        bottom: 16rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rem;
        height: 40rem;
        background-color: var(--light, #F7F7F7) var(--dark, #424755);
        border-radius: var(--small-border-radius);
        box-shadow: var(--box-shadow);
        font-size: 0;
        text-indent: -999rem;
        z-index: 9;
    }

    .aside-navigation-menu {
        position: relative;
        display: block;
        width: 22rem;
        height: 16rem;
        background-color: transparent;
        font-size: 0;
        text-indent: -999rem;
        z-index: 9;
    }
    
    .aside-navigation-menu span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 3rem;
        background: var(--light, #787879) var(--dark, #BFBFBF);
        border-radius: 3rem;
        transition: background 0s .3s;
    }
    
    .aside-navigation-menu::before,
    .aside-navigation-menu::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 3rem;
        background: var(--light, #787879) var(--dark, #BFBFBF);
        border-radius: 3rem;
        transition-duration: 0.3s, 0.3s;
        transition-delay: 0.3s, 0s;
    }
    
    .aside-navigation-menu::before {
        top: -100%;
        transition-property: top, transform;
    }
    
    .aside-navigation-menu::after {
        bottom: -100%;
        transition-property: bottom, transform;
    }
    
    .aside-navigation-menu.active::before {
        top: 0;
        transform: rotate(45deg);
    }
    
    .aside-navigation-menu.active::after {
        bottom: 0;
        transform: rotate(-45deg);
    }
    
    .aside-navigation-menu.active::before,
    .aside-navigation-menu.active::after {
        background: var(--light, #787879) var(--dark, #DADADA);
        transition-delay: 0s, 0.3s;
    }
    
    .aside-navigation-menu.active span {
        background: none !important;
    }

    .aside-navigation {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24rem;
        position: fixed;
        top: 60rem;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        min-height: 100vh;
        height: fit-content;
        max-height: calc(100vh - 60rem);
        padding: 24rem 0 24rem 0;
        background: var(--light, #fff) var(--dark, var(--block-bg));
        z-index: 8;
        opacity: 0;
        pointer-events: none;
        transition: all .3s ease;
        overflow-y: auto;
        -ms-overflow-style: none;
		scrollbar-width: none;
    }

    .aside-navigation::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    
    .aside-navigation.active {
        opacity: 1;
        pointer-events: all;
    }

    .navigation-menu {
        position: relative;
        top: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        background: transparent;
    }

    .navigation-menu::before {
        display: none;
    }

    .navigation-menu > .buttons {
        padding: 0 16rem 0 16rem;
        order: -1;
    }

    .navigation-menu-title {
        position: relative;
        margin-top: 24rem;
        padding: 24rem 16rem 20rem 16rem;
    }

    .navigation-menu-title::before {
        content: '';
        position: absolute;
        top: 0;
        left: 16rem;
        width: calc(100% - 32rem);
        height: 1rem;
        background: var(--border-color);
    }

    .navigation-menu-list {
        max-height: calc(100vh - 230rem);
    }

    .aside-navigation-parameters {
        background: var(--light, #fff) var(--dark, var(--block-bg));
    }

    .build-page-main-info {
        padding: 0;
        background: transparent;
    }

    .section-text-page .container {
        padding: 0 16rem;
        background: transparent;
    }

    .build-page-content-column {
        gap: 60rem 0;
        padding: 0;
        font-size: 16rem;
        line-height: 1.5;
    }

    .build-page-content-column::before {
        display: none;
    }

    .update-build-block {
        padding: 24rem 16rem;
        margin-bottom: 10rem;
    }

    .button-open {
        left: 0;
        right: 0;
        margin: auto;
        width: calc(100% - 32rem);
        height: 36rem;
        padding: 8rem 10rem;
        background: var(--light, var(--white-gray-btn)) var(--dark, var(--main-bg));
    }

    .button-open::after {
        position: static;
        display: inline-block;
        vertical-align: middle;
        margin-left: 8rem;
    }

    .build-page-content-block:not(:last-child) {
        margin-bottom: 10rem;
    }

    .possibilities-block {
        gap: 6rem;
    }

    .possibility {
        max-width: 100%;
        padding: 18rem;
    }

    .possibility:nth-child(odd) {
        border-radius: 12rem 12rem 0 0;
    }

    .possibility:nth-child(even) {
        border-radius: 0 0 12rem 12rem;
    }

    .possibility h3 {
        padding-left: 0;
    }

    .two-columns-block {
        flex-direction: column;
    }

    .two-columns-block > * {
        max-width: 100%;
    }

    .tarifs {
        gap: 18rem 0;
    }

    .tarifs.mobile-visible {
        display: flex;
    }

    .tarif {
        max-width: 100%;
        padding: 24rem 18rem;
        font-size: 16rem;
    }

    .tarif-title,
    .tarif-price {
        font-size: 22rem;
    }

    .tarif .button.gray {
        background: var(--light, #24242B) var(--dark, var(--gray-btn));
        color: var(--dark-main-color);
    }

    .tarif .button.gray:hover {
        background: var(--gray-btn-hover);
    }

    .tarif .possibility-list {
        padding: 18rem 0;
    }

    .premium-nickname {
        padding: 0;
        background: none;
    }

    .premium-lite {
        background: none;
        color: #CB1D26;
    }

    .premium-medium {
        background: none;
        color: #2AD999;
    }

    .premium-best {
        background: none;
        color: #DE9F42;
    }

    .section-mainpage-cards {
        padding: 36rem 0;
    }

    .section-mainpage-cards:last-child {
        padding-bottom: 60rem;
    }

    .cards {
        gap: 12rem;
    }

    .card {
        gap: 8rem 0;
        max-width: 100%;
        height: 200rem;
        padding: 18rem;
    }

    .slider-cards .swiper-button-prev, 
    .slider-cards .swiper-button-next {
        display: none;
    }

    .card-tags {
        gap: 6rem;
    }

    .card-tag {
        padding: 4rem 10rem;
        font-size: 10rem;
    }

    .card-date {
        font-size: 12rem;
    }

    .card-name {
        font-size: 18rem;
    }

    .more-cards-link {
        display: none;
    }

    .cards + .buttons,
    .cards-long + .buttons,
    .videos + .buttons {
        display: flex;
        width: 100%;
        margin-top: 12rem;
    }

    .cards + .buttons .button,
    .cards-long + .buttons .button,
    .videos + .buttons .button {
        width: 100%;
    }

    .section-mainpage-cards .separate {
        display: none;
    }

    .builds-list {
        gap: 12rem;
        padding: 0;
    }

    .builds-class-list {
        padding-bottom: 24rem;
    }

    .builds {
        max-width: calc(50% - 6rem);
        height: 176rem;
    }

    .builds-class-list .builds {
        max-width: 100%;
        height: 56rem;
        padding: 12rem 18rem;
    }

    .builds-title {
        display: none;
    }

    .builds-class-list .builds-title {
        display: block;
    }

    .builds-title-mob {
        position: relative;
        display: block;
        margin-bottom: 8rem;
        font-weight: bold;
        font-size: 18rem;
        line-height: 1.2;
        color: var(--dark-hlines-color);
        z-index: 1;
    }

    .builds-links {
        gap: 10rem;
    }

    .builds-class-list + .separate {
        display: block;
    }

    .cards-long {
        gap: 12rem;
    }

    .card-long {
        flex-direction: column;
        max-width: 100%;
        height: 200rem;
    }

    .card-long-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 100%;
    }

    .card-long-img::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(8, 8, 11, 0.6) 25.32%, #08080B 100%);
    }

    .card-long-info {
        justify-content: flex-end;
        max-width: 100%;
        height: 100%;
    }

    .card-long-name {
        -webkit-line-clamp: 4;
        font-size: 16rem;
        color: var(--light, var(--dark-hlines-color)) var(--dark, var(--hlines-color))
    }

    .card-long-date {
        margin-top: 0;
        font-size: 12rem;
    }

    .cards-guides .card-long,
    .cards-guides .card {
        max-width: calc(50% - 6rem);
        height: 80rem;
    }

    .cards-guides .card-long-info {
        display: none;
    }

    .cards-guides .card-long-img {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rem;
    }

    .card-long-name-mob,
    .cards-guides .card-name {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16rem;
        line-height: 1.5;
        text-align: center;
        color: var(--dark-hlines-color);
        z-index: 1;
    }

    .videos {
        gap: 12rem;
    }

    .video {
        max-width: 100%;
    }

    .search-page-result-block {
        margin-top: 36rem;
    }

    .poe-item-element,
    .tag-item-element {
        max-width: 100%;
        padding: 12rem;
    }

    .seo-text-block {
        margin-top: 36rem;
    }

    .seo-text {
        font-size: 16rem;
    }

    .bg-class-page {
        display: none;
    }

    .section-registration {
        background: none;
    }

    .profile-info-block {
        position: relative;
    }

    .tippy-box {
        font-size: 12rem;
    }

    .profile-comments-block .comment-item-self {
        padding: 18rem 16rem;
    }

    .comment-item-content {
        font-size: 16rem;
    }

    .comments-high .comment-item::before {
        inset: -18rem -16rem;
        max-width: 480rem;
        width: calc(100% + 32rem);
    }

    .comments-high > .comment-item::after {
        top: 2rem;
    }

    .comment-item > .comment-reply .comment-item > .comment-reply {
        z-index: 1;
    }

    .comment-item > .comment-reply .comment-item > .comment-reply > .comment-reply-self {
        position: relative;
        padding-left: 0;
    }

    .comment-reply-self::before {
        content: '';
        position: absolute;
        top: 14rem;
        left: 7rem;
        width: 1rem;
        height: calc(100% - 14rem);
        background: var(--light, #D0D0D0) var(--dark, #202025);
    }

    .comment-item > .comment-reply .comment-item > .comment-reply > .comment-reply-self::before {
        display: none;
    }

    .comment-item > .comment-reply .comment-item > .comment-reply > .comment-reply-self::after {
        display: none;
    }

    .hide-re-tree {
        position: absolute;
        top: 0;
        left: 0;
        width: 30rem;
        height: 100%;
        cursor: pointer;
        z-index: 1;
    }

    .comment-item > .comment-reply .comment-item > .comment-reply > .hide-re-tree {
        display: none;
    }

    .comment-item > .comment-reply .comment-item > .comment-reply > .expand-re-tree {
        display: none;
    }

    img[data-fancybox] {
        max-height: none;
    }

    .section-tarifs-title {
        padding: 36rem 0 24rem;
    }

    .section-tarifs-title .container {
        padding: 0 16rem;
    }

    .tarifs-title {
        gap: 0;
        font-size: 40rem;
    }

    .tarifs-title::before,
    .tarifs-title::after {
        display: none;
    }

    .section-tarifs {
        padding: 24rem 0 40rem;
    }

    .tarif-table-title {
        font-size: 22rem;
        margin-bottom: 0;
        padding-bottom: 18rem;
    }

    .tarif-table-price {
        font-size: 22rem;
    }

    .tarif-possibility-element {
        padding-left: 36rem;
    }

    .tarif-possibility-element::before {
        width: 20rem;
        height: 20rem;
    }

    .advantages-title {
        font-family: var(--second-font);
        font-weight: bold;
        font-size: 24rem;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 18rem;
    }

    .advantages {
        gap: 18rem;
    }

    .advantage,
    .advantage.w33,
    .advantage.w50 {
        padding: 18rem;
        grid-column-end: span 12;
    }

    .advantage-title-icon {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0 12rem;
        width: 100%;
    }

    .advantage-icon {
        margin-bottom: auto;
        order: 1;
    }

    .advantage-title {
        font-size: 18rem;
        line-height: 1.3;
    }

    .section-advantages {
        padding: 0;
    }

    .faq-title {
        text-align: center;
    }
}

@media (max-width: 390px) {
    html {
        font-size: calc(100vw / 390);
    }

    .tippy-box {
        font-size: 10rem;
    }
}
/*end mobile styles*/

/* indentation */
.p0 {
    padding: 0;
}

.pt0 {
    padding-top: 0;
}

.pb0 {
    padding-bottom: 0;
}

.m0 {
    margin: 0;
}

.mt0 {
    margin-top: 0;
}

.mb0 {
    margin-bottom: 0;
}
/* end indentation */

.grecaptcha-badge {
    opacity: 0;
    pointer-events: none;
}

.locked-article .card-bg-img {
    filter: grayscale(100%);
}

.locked-article .card-long-img img {
    filter: grayscale(100%);
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.locked-overlay svg {
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.locked-time {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    background: var(--accent-blue);
    padding: 4px 12px;
    border-radius: 12px;
}

.locked-article {
    opacity: 0.85;
}

.locked-article:hover {
    opacity: 1;
}

.locked-content-message {
    text-align: center;
    padding: 60px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.locked-content-message svg {
    color: var(--accent-blue);
    margin-bottom: 24px;
}

.locked-content-message h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
}

.locked-content-message p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px;
    opacity: 0.8;
}

.locked-content-message .publish-date,
.locked-content-message .min-tier-info {
    font-weight: 600;
    margin-bottom: 16px;
    opacity: 1;
}

.locked-content-message .min-tier-info {
    color: var(--accent-blue);
}

.locked-content-message .button {
    display: inline-block;
    margin-top: 12px;
}