@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-display: block;
    src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-display: block;
    src: url("../fonts/OpenSans-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-display: block;
    src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-display: block;
    src: url("../fonts/OpenSans-Bold.woff2") format("woff2");
    font-weight: 700;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
}

html {
    scrollbar-gutter: stable
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: rgba(0, 0, 0, 0)
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

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:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

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

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

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

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

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

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

:root {
    --grey-0: #ffffff;
    --grey-25: #F1F1F1;
    --grey-50: #F8F9FA;
    --grey-100: #F1F3F4;
    --grey-200: #E8EAED;
    --grey-300: #DADCE0;
    --grey-400: #BDC1C6;
    --grey-500: #9AA0A6;
    --grey-600: #80868B;
    --grey-700: #5F6368;
    --grey-800: #292A2E;
    --grey-900: #202124;
    --grey-1000: #000000;
    --blue-50: #E8F0FE;
    --blue-100: #D2E3FC;
    --blue-200: #AECBFA;
    --blue-300: #8AB4F8;
    --blue-400: #669DF6;
    --blue-500: #4285F4;
    --blue-600: #1A73E8;
    --blue-700: #1967D2;
    --blue-800: #185ABC;
    --blue-900: #125C92;
    --green-50: #E6F4EA;
    --green-100: #CEEAD6;
    --green-200: #A8DAB5;
    --green-300: #81C995;
    --green-400: #5BB974;
    --green-500: #34A853;
    --green-600: #1E8E3E;
    --green-700: #188038;
    --green-800: #137333;
    --green-900: #0D652D;
    --red-50: #FCE8E6;
    --red-100: #FAD2CF;
    --red-200: #F6AEA9;
    --red-300: #F28B82;
    --red-400: #EE675C;
    --red-500: #EA4335;
    --red-600: #D93025;
    --red-700: #C5221F;
    --red-800: #B31412;
    --red-900: #A50E0E;
    --yellow-50: #FEF7E0;
    --yellow-100: #FEEFC3;
    --yellow-200: #FDE293;
    --yellow-300: #FDD663;
    --yellow-400: #FCC934;
    --yellow-500: #FBBC04;
    --yellow-600: #F9AB00;
    --yellow-700: #F29900;
    --yellow-800: #EA8600;
    --yellow-900: #E37400;
    --card-bg-color: #FCFCFC;
    --main-bg-color: #fff;
    --secondary-bg-color: #f3f3f3;
    --main-border-color: var(--grey-300);
    --header-bg-color: var(--grey-50);
    --main-btn-bg-color: 56, 116, 214;
    --main-btn-text-color: var(--grey-0);
    --secondary-btn-text-color: var(--grey-800);
    --header-btn-hover-color: var(--grey-100);
    --header-btn-active-color: var(--grey-200);
    --accent-color: var(--blue-500);
    --title-color: var(--grey-900);
    --note-color: var(--grey-600);
    --text-color: var(--grey-800);
    --subtext-color: var(--grey-700);
    --breadcrumbs-bg-color: var(--grey-100);
    --breadcrumbs-text-color: #006ecc;
    --scrollbar-track-color: var(--blue-100);
    --scrollbar-thumb-color: var(--accent-color);
    --footer-bg-color: var(--grey-900);
    --footer-text-color: var(--grey-400);
    --footer-descr-color: var(--grey-800);
    --tooltip-bg-color: var(--grey-0);
    --tooltip-text-color: var(--grey-700);
    --pop-up-bg-color: rgba(0, 0, 0, 25%);
    --icon-secondary-color: var(--grey-400);
    --line-color: var(--main-border-color);
    --line-contrast-color: var(--grey-800);
    --video-text-color: #fff;
    --btn-share-main-color: var(--blue-500);
    --faq-hover-color: 232, 240, 254;
    --news-category-bg-color: 252, 252, 252;
    --news-category-text-color: var(--grey-800);
    --news-details-color: var(--grey-400);
    --news-shadow: #000000E5, #00000000;
    --news-title-color: var(--grey-200);
    --article-details-color: var(--grey-700);
    --select-bg-color: #FCFCFC;
    --select-hover-bg-color: #ececec;
    --select-accent-color: var(--accent-color);
    --select-text-color: var(--grey-800);
    --select-border-color: var(--grey-300);
    --dropdown-bg-color: var(--select-bg-color);
    --comment-border-color: var(--main-border-color);
    --comment-rate-color: var(--grey-500);
    --comment-bg-color: var(--card-bg-color);
    --comment-text-color: var(--subtext-color);
    --short-info-icon: var(--subtext-color);
    --short-info-text: var(--text-color);
    --toast-bg-color: var(--card-bg-color);
    --toast-border-color: var(--main-border-color);
    --toast-title-color: var(--subtext-color);
    --toast-descr-color: var(--grey-600);
    --toast-ok-color: var(--green-400);
    --toast-err-color: var(--red-400);
    --toast-alert-color: var(--yellow-400);
    --loadbar-bg-color: var(--blue-100);
    --loadbar-accent-color: var(--accent-color);
    --person-name-color: var(--subtext-color);
    --person-date-color: var(--grey-500);
    --person-red-ava-bg-color: var(--red-50);
    --person-red-ava-border-color: var(--red-100);
    --person-red-ava-sumbol-color: var(--red-400);
    --person-grey-ava-bg-color: var(--grey-50);
    --person-grey-ava-border-color: var(--grey-100);
    --person-grey-ava-sumbol-color: var(--grey-500);
    --person-green-ava-bg-color: var(--green-50);
    --person-green-ava-border-color: var(--green-100);
    --person-green-ava-sumbol-color: var(--green-400);
    --pagination-bg-color: var(--card-bg-color);
    --pagination-text-color: var(--grey-900);
    --pagination-hover-color: var(--blue-50);
    --pagination-border-color: var(--grey-200);
    --pagination-icon-color: var(--grey-400);
    --pagination-accent-color: var(--accent-color);
    --switch-bg-color: var(--accent-color);
    --switch-circle-color: var(--grey-0);
    --switch-text-color: var(--grey-700);
    --switch-outline-color: 66, 133, 244;
    --star-color: var(--yellow-400);
    --star-bg-color: var(--grey-400);
    --table-main-bg-color: var(--card-bg-color);
    --table-secondary-bg-color: var(--grey-100);
    --table-border-color: var(--grey-200);
    --table-text-color: var(--grey-800);
    --table-head-bg-color: 41, 42, 46;
    --table-head-text-color: var(--grey-400);
    --chips-bg-color: var(--card-bg-color);
    --chips-border-color: var(--main-border-color);
    --chips-text-color: var(--subtext-color);
    --chips-icon-color: var(--chips-text-color);
    --search-result-title-color: var(--blue-700);
    --search-result-descr-color: var(--grey-700);
    --search-result-link-color: var(--grey-400);
    --answer-bg-color: var(--blue-50);
    --answer-text-color: var(--blue-700);
    --answer-title-color: var(--blue-500);
    --answer-border-color: var(--blue-500);
    --cite-bg-color: #f1f6fe;
    --cite-text-color: #363636;
    --input-color: var(--grey-500);
    --checkbox-color: var(--grey-600);
    --checkbox-text-color: var(--grey-800);
    --checkbox-accent-color: var(--blue-500);
    --checkbox-outline-color: 66, 133, 244;
    --broker-title-color: var(--accent-color);
    --broker-descr-color: var(--subtext-color);
    --broker-border-color: var(--main-border-color);
    --broker-bg-color: var(--card-bg-color);
    --broker-rec-text-color: var(--grey-0);
    --broker-rec-color: var(--green-500);
    --broker-best-text-color: var(--grey-700);
    --broker-best-color: var(--yellow-500);
    --tooltip-shadow: 0 2px 5px 3px rgba(0, 0, 0, .10);
    --indentation-px: 8px;
    --btn-radius: 4px;
    --container-lg-px: 1200px;
    --container-md-px: 1000px;
    --container-sm-px: 860px;
    --container-smallest-px: 800px;
    --z-header: 10;
    --z-pop-up: 50;
    --z-toast: 51;
    --z-toolip: 60;
    --z-dropdown: 55;
    --z-reset: 0
}

@keyframes btn_arrow_left {
    0% {
        transform: rotate(45deg) translate(-50%, 150%)
    }
    25% {
        transform: rotate(0deg) translate(-80%, 50%)
    }
    50% {
        transform: rotate(-45deg) translate(-25%, -200%)
    }
    75% {
        transform: rotate(0deg) translate(-80%, 50%)
    }
    100% {
        transform: rotate(45deg) translate(-50%, 150%)
    }
}

@keyframes btn_arrow_right {
    0% {
        transform: rotate(-45deg) translate(0, -50%)
    }
    25% {
        transform: rotate(0) translate(0, 50%)
    }
    50% {
        transform: rotate(45deg) translate(-13%, -50%)
    }
    75% {
        transform: rotate(0) translate(0, 50%)
    }
    100% {
        transform: rotate(-45deg) translate(0, -50%)
    }
}

@keyframes btn_video_pulse {
    0% {
        opacity: 1
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2)
    }
    75% {
        transform: translate(-50%, -50%) scale(1.5)
    }
    90% {
        transform: translate(-50%, -50%) scale(1.7);
        opacity: 0
    }
    99% {
        opacity: 0
    }
    100% {
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes opacity-pulse {
    0% {
        opacity: 1
    }
    50% {
        opacity: .5
    }
    100% {
        opacity: 1
    }
}

@keyframes loadbar {
    0% {
        transform: scaleX(1)
    }
    100% {
        transform: scaleX(0)
    }
}

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

h1 span.note,
h2 span.note,
h3 span.note,
h4 span.note,
h5 span.note,
h6 span.note {
    opacity: .3
}

.h1 {
    font-weight: 700;
    font-size: 48px;
    line-height: 100%;
    color: var(--text-color)
}

.h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 120%;
    color: var(--text-color)
}

.h2_cols {
    margin-bottom: 20px
}

.h2_404 {
    margin: 0
}

.h2_short-info {
    margin-bottom: 32px
}

.h2 span {
    color: #125C92;
}

.h3 {
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    color: var(--text-color)
}

.h3_menu {
    line-height: 100%;
    text-decoration: none;
    transition: color .1s;
    width: fit-content
}

.h3_menu:hover {
    text-decoration: underline dotted currentColor
}

.h3_menu:active {
    color: var(--accent-color)
}

.h4 {
    font-weight: 700;
    font-size: 25px;
    line-height: 120%;
    color: var(--text-color)
}

.h5 {
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    color: var(--text-color)
}

.text-regular {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: var(--text-color)
}

.text-regular a {
    color: var(--accent-color);
    text-decoration: none
}

.text-regular a:hover {
    text-decoration: underline
}

.text-small {
    font-weight: 400;
    font-size: 12px;
    line-height: 130%
}

.btn {
    font-size: 16px;
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: rgba(var(--main-btn-bg-color), 1);
    padding: 12px 24px;
    gap: 4px;
    border: none;
    border-radius: var(--btn-radius);
    color: var(--main-btn-text-color);
    cursor: pointer;
    overflow: hidden;
    letter-spacing: .5px;
    text-decoration: none
}

.btn__text {
    line-height: 100%;
    white-space: nowrap
}

.btn_simple {
    width: fit-content;
    box-shadow: 0 0 0 0 rgba(var(--main-btn-bg-color), 1);
    transition: box-shadow .2s, filter .2s;
    font-weight: 500
}

.btn_simple:not(:disabled):hover {
    box-shadow: 0 0 0 4px rgba(var(--main-btn-bg-color), .2);
    filter: brightness(95%)
}

.btn_simple:active {
    filter: brightness(90%)
}

.btn_nav {
    font-size: 16px;
    padding: 14px 12px;
    color: var(--blue-900);
    background-color: transparent;
    font-weight: 600;
}

.btn_center {
    width: 100%;
    justify-content: center
}

.btn_share {
    border-radius: 20px;
    padding: 9px 14px 9px 16px
}

.btn_share .icon {
    background-color: currentColor
}

.btn_icon {
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: .1s opacity;
    overflow: visible
}

@media(hover:hover) {
    .btn_icon:hover {
        opacity: .6
    }
    .btn_icon:active {
        opacity: 1
    }
    .btn_icon:active:before {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: .2
    }
}

.btn_icon:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    transition: .2s opacity, .05s transform
}

.btn_icon-transparent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    border: 1px solid rgba(var(--main-btn-bg-color), 1);
    transition: background-color .1s
}

.btn_icon-transparent:hover {
    opacity: 1;
    background-color: rgba(var(--main-btn-bg-color), .1)
}

.btn_pop-up {
    width: fit-content;
    margin-left: auto
}

.btn_more {
    border: 1px solid var(--main-border-color);
    background-color: var(--card-bg-color);
    color: var(--secondary-btn-text-color);
    gap: 8px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
    transition: color .1s, background-color .1s, border-color .1s
}

.btn_more .icon {
    background-color: currentColor
}

.btn_more:hover {
    background-color: var(--pagination-hover-color);
    border-color: var(--pagination-accent-color);
    color: var(--pagination-accent-color)
}

.btn_lined {
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--main-btn-bg-color));
    background: rgba(0, 0, 0, 0);
    color: rgb(var(--main-btn-bg-color));
    transition: background-color .1s;
    padding: 10px 24px
}

.btn_best-brokers {
    background-color: transparent;
    color: var(--blue-900);
    /* Использование "all" для всех свойств, которые могут измениться */
    transition: all .2s ease-in-out;
    white-space: nowrap;
    min-width: fit-content;
    border: 1px solid var(--blue-900);
}

.btn_best-brokers:hover {
    background-color: #125C92;
    color: white;
}
.btn_best-brokers.--active {
    background-color: #125C92;
    color: #fff;
}

@media(hover:hover) {
    .btn_best-brokers:not(.--active):hover {
        background-color: #0095ff17
    }
    .btn_lined:hover {
        background-color: rgba(var(--main-btn-bg-color), .1)
    }
}

.btn_transparent {
    align-items: center;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--main-btn-bg-color);
    width: 42px;
    height: 42px
}

.btn_broker {
    border-radius: 8px;
    align-items: center;
    padding: 16px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    transition: background-color .2s
}

@media(hover:hover) {
    .btn_broker:hover {
        background-color: var(--blue-50)
    }
}

.btn_glassy {
    border-radius: 8px;
    align-items: center;
    padding: 16px 32px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #e8f0fe;
    color: #e8f0fe;
    border: 1px solid var(--blue-blue-50, #E8F0FE);
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 12px 6px rgba(255, 255, 255, .1) inset;
    backdrop-filter: blur(2px);
    width: fit-content;
    margin-top: 12px;
    transition: background-color .1s
}

.btn_glassy .icon {
    background-color: #e8f0fe
}

@media(hover:hover) {
    .btn_glassy:hover {
        background: rgba(255, 255, 255, .3)
    }
}

.btn_characteristics {
    background-color: rgba(0, 0, 0, 0);
    color: var(--accent-color);
    padding: 4px 0;
    margin: 0;
    width: fit-content;
    gap: 2px
}

.btn_characteristics .icon {
    transition: transform .2s
}

.btn_characteristics.--active .icon {
    transform: rotate(180deg)
}

.btn_round {
    padding: 7px 16px 7px 12px;
    border-radius: 20px
}

.btn_clear .icon {
    background-color: currentColor;
}

.btn:has(.btn_icon) {
    padding-left: 16px
}

.btn:disabled {
    filter: grayscale(1);
    cursor: not-allowed
}

.social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap
}

.social .btn_icon {
    width: 40px;
    height: 40px
}

.reset-btn {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    margin-right: 0;
    margin-left: auto
}

.icon {
    display: inline-block;
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 24px;
    background-color: var(--accent-color);
    transition: transform .2s;
    mask-size: cover;
    -webkit-mask-size: cover
}

.icon_large {
    width: 32px;
    min-width: 32px;
    height: 32px
}

.icon_biggest {
    width: 80px;
    min-width: 80px;
    height: 80px
}

.icon_small {
    min-width: 16px;
    width: 16px;
    height: 16px
}

.icon_burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    min-width: 0;
    background-color: rgba(0, 0, 0, 0)
}

.icon_burger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--accent-color);
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: opacity .3s, transform .3s;
    transform-origin: left
}

.icon_burger span:nth-child(1) {
    top: 0
}

.icon_burger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center
}

.icon_burger span:nth-child(3) {
    bottom: 0
}

.icon_grey {
    background-color: var(--icon-secondary-color)
}

.icon_chevron-right {
    mask-image: url(../images/icons/chevron-right.svg);
    -webkit-mask-image: url(../images/icons/chevron-right.svg);
}

.icon_main-info {
    mask-image: url(../images/icons/main-info.svg);
    -webkit-mask-image: url(../images/icons/main-info.svg);
}

.icon_scales {
    mask-image: url(../images/icons/scales.svg);
    -webkit-mask-image: url(../images/icons/scales.svg);
}

.icon_login {
    mask-image: url(../images/icons/login.svg);
    -webkit-mask-image: url(../images/icons/login.svg);
}

.icon_arrow-forward {
    mask-image: url(../images/icons/arrow-forward.svg);
    -webkit-mask-image: url(../images/icons/arrow-forward.svg);
    background-color: currentColor
}

.icon_loupe {
    mask-image: url(../images/icons/loupe.svg);
    -webkit-mask-image: url(../images/icons/loupe.svg);
}

.icon_apps {
    mask-image: url(../images/icons/apps.svg);
    -webkit-mask-image: url(../images/icons/apps.svg);
}

.icon_delete {
    mask-image: url(../images/icons/delete.svg);
    -webkit-mask-image: url(../images/icons/delete.svg);
    background-color: var(--red-500)
}

.icon_no {
    mask-image: url(../images/icons/no.svg);
    -webkit-mask-image: url(../images/icons/no.svg);
    background-color: var(--red-400)
}

.icon_yes {
    mask-image: url(../images/icons/yes.svg);
    -webkit-mask-image: url(../images/icons/yes.svg);
    background-color: var(--green-500)
}

.icon_image {
    mask-image: url(../images/icons/image.svg);
    -webkit-mask-image: url(../images/icons/image.svg);
}

.icon_wallet {
    mask-image: url(../images/icons/wallet.svg);
    -webkit-mask-image: url(../images/icons/wallet.svg);
}

.icon_mail {
    mask-image: url(../images/icons/mail.svg);
    -webkit-mask-image: url(../images/icons/mail.svg);
}

.icon_more {
    mask-image: url(../images/icons/more.svg);
    -webkit-mask-image: url(../images/icons/more.svg);
}

.icon_person {
    mask-image: url(../images/icons/person.svg);
    -webkit-mask-image: url(../images/icons/person.svg);
}

.icon_home {
    mask-image: url(../images/icons/home.svg);
    -webkit-mask-image: url(../images/icons/home.svg);
}

.icon_settings {
    mask-image: url(../images/icons/settings.svg);
    -webkit-mask-image: url(../images/icons/settings.svg);
}

.icon_account-types {
    mask-image: url(../images/icons/account-types.svg);
    -webkit-mask-image: url(../images/icons/account-types.svg);
}

.icon_security {
    mask-image: url(../images/icons/security.svg);
    -webkit-mask-image: url(../images/icons/security.svg);
}

.icon_close {
    mask-image: url(../images/icons/close.svg);
    -webkit-mask-image: url(../images/icons/close.svg);
}

.icon_theme {
    mask-image: url(../images/icons/theme.svg);
    -webkit-mask-image: url(../images/icons/theme.svg);
}

.icon_support {
    mask-image: url(../images/icons/support.svg);
    -webkit-mask-image: url(../images/icons/support.svg);
}

.icon_translate {
    mask-image: url(../images/icons/translate.svg);
    -webkit-mask-image: url(../images/icons/translate.svg);
}

.icon_time {
    mask-image: url(../images/icons/time.svg);
    -webkit-mask-image: url(../images/icons/time.svg);
}

.icon_refresh {
    mask-image: url(../images/icons/refresh.svg);
    -webkit-mask-image: url(../images/icons/refresh.svg);
}

.icon_double-star {
    mask-image: url(../images/icons/double-star.svg);
    -webkit-mask-image: url(../images/icons/double-star.svg);
}

.icon_info {
    mask-image: url(../images/icons/info.svg);
    -webkit-mask-image: url(../images/icons/info.svg);
}

.icon_apple {
    mask-image: url(../images/icons/apple.svg);
    -webkit-mask-image: url(../images/icons/apple.svg);
}

.icon_youtube {
    mask-image: url(../images/icons/youtube.svg);
    -webkit-mask-image: url(../images/icons/youtube.svg);
}

.icon_language {
    mask-image: url(../images/icons/language.svg);
    -webkit-mask-image: url(../images/icons/language.svg);
}

.icon_clear {
    mask-image: url(../images/icons/clear.svg);
    -webkit-mask-image: url(../images/icons/clear.svg);
}

.icon_star {
    mask-image: url(../images/icons/star.svg);
    -webkit-mask-image: url(../images/icons/star.svg);
    background-color: var(--icon-secondary-color)
}

.icon_share {
    mask-image: url(../images/icons/share.svg);
    -webkit-mask-image: url(../images/icons/share.svg);
}

.icon_char {
    mask-image: url(../images/icons/char.svg);
    -webkit-mask-image: url(../images/icons/char.svg);
}

.icon_logout {
    mask-image: url(../images/icons/logout.svg);
    -webkit-mask-image: url(../images/icons/logout.svg);
}

.icon_cup {
    mask-image: url(../images/icons/cup.svg);
    -webkit-mask-image: url(../images/icons/cup.svg);
}

.icon_google {
    mask-image: url(../images/icons/google.svg);
    -webkit-mask-image: url(../images/icons/google.svg);
}

.icon_min-dep {
    mask-image: url(../images/icons/min-dep.svg);
    -webkit-mask-image: url(../images/icons/min-dep.svg);
}

.icon_email {
    mask-image: url(../images/icons/email.svg);
    -webkit-mask-image: url(../images/icons/email.svg);
}

.icon_circle-ok {
    mask-image: url(../images/icons/circle-ok.svg);
    -webkit-mask-image: url(../images/icons/circle-ok.svg);
}

.icon_undo {
    mask-image: url(../images/icons/undo.svg);
    -webkit-mask-image: url(../images/icons/undo.svg);
}

.icon_comment {
    mask-image: url(../images/icons/comment.svg);
    -webkit-mask-image: url(../images/icons/comment.svg);
}

.icon_calendar {
    mask-image: url(../images/icons/calendar.svg);
    -webkit-mask-image: url(../images/icons/calendar.svg);
}

.icon_facebook {
    mask-image: url(../images/icons/facebook.svg);
    -webkit-mask-image: url(../images/icons/facebook.svg);
}

.icon_edit {
    mask-image: url(../images/icons/edit.svg);
    -webkit-mask-image: url(../images/icons/edit.svg);
    background-color: var(--comment-rate-color)
}

.icon_x {
    mask-image: url(../images/icons/x.svg);
    -webkit-mask-image: url(../images/icons/x.svg);
}

.icon_linkedin {
    mask-image: url(../images/icons/linkedin.svg);
    -webkit-mask-image: url(../images/icons/linkedin.svg);
}

.icon_whatsapp {
    mask-image: url(../images/icons/whatsapp.svg);
    -webkit-mask-image: url(../images/icons/whatsapp.svg);
}

.icon_reddit {
    mask-image: url(../images/icons/reddit.svg);
    -webkit-mask-image: url(../images/icons/reddit.svg);
}

.icon_telegram {
    mask-image: url(../images/icons/telegram.svg);
    -webkit-mask-image: url(../images/icons/telegram.svg);
}

.icon_copy {
    mask-image: url(../images/icons/copy.svg);
    -webkit-mask-image: url(../images/icons/copy.svg);
}

.icon_pinterest {
    mask-image: url(../images/icons/pinterest.svg);
    -webkit-mask-image: url(../images/icons/pinterest.svg);
}

.icon_rate-star {
    mask-image: url(../images/icons/rate-star.svg);
    -webkit-mask-image: url(../images/icons/rate-star.svg);
}

.icon_fire {
    mask-image: url(../images/icons/fire.svg);
    -webkit-mask-image: url(../images/icons/fire.svg);
}

.badge {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--red-600)
}

.list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.list_horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 32px;
    overflow: hidden;
    max-height: 24px
}

.list_horizontal .list__item:not(:last-child) {
    position: relative
}

.list_horizontal .list__item:not(:last-child):before {
    position: absolute;
    content: "";
    left: calc(100% + 16px);
    width: 0;
    height: 100%;
    border-left: 1px dashed var(--main-border-color)
}

.list__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    line-height: 120%;
    color: var(--grey-700);
    font-size: 18px
}

.list__item .icon {
    background-color: currentColor
}

.list__item_title {
    width: 100%
}

.list__item a {
    text-decoration: none;
    color: var(--accent-color)
}

@media(hover:hover) {
    .list__item a:hover {
        text-decoration: underline
    }
}

.list__link .icon {
    margin-inline: 4px;
    vertical-align: middle
}

@media(hover:hover) {
    .list__link:hover .icon {
        transform: rotate(-45deg)
    }
}

.logo {
    display: flex;
    align-items: center
}

.line {
    position: relative;
    width: 100%;
    height: 1px;
    display: block;
    border-top: 1px dashed var(--line-color)
}

.line_vertical {
    width: 1px;
    height: 100%;
    border: none;
    border-left: 1px dashed var(--line-color);
    min-height: 16px
}

.line_contrast {
    border-color: var(--line-contrast-color)
}

.line__text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    line-height: 100%;
    color: var(--main-border-color);
    padding: 0 8px;
    background-color: var(--card-bg-color);
    user-select: none
}

.line_footer {
    border-top: 1px solid var(--footer-text-color);
    opacity: .2
}

.input {
    position: relative;
    color: var(--input-color)
}

.input__label {
    position: absolute;
    top: 18px;
    left: 16px;
    color: var(--input-color);
    font-size: 16px;
    cursor: text;
    user-select: none;
    background: var(--card-bg-color);
    padding: 2px 6px;
    transition: transform .2s;
    transform: translateX(-4px);
    transform-origin: left
}

.input__field {
    appearance: none;
    background: var(--card-bg-color);
    border: 2px solid var(--input-color);
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    max-width: 360px;
    line-height: 150%;
    font-size: 16px;
    outline: none;
    transition: border-color .2s;
    resize: vertical;
    min-height: 56px;
    text-overflow: ellipsis
}

.input__wrapper:not(:has(>.input__label))>.input__field::placeholder {
    color: rgba(0, 0, 0, .5);
}

.input__field_textarea {
    min-height: 120px;
    max-height: 280px
}

.input__field::placeholder {
    color: rgba(0, 0, 0, 0)
}

.input__field:focus-visible {
    border-color: var(--accent-color)
}

.input__field:focus-visible~.input__label {
    color: var(--accent-color)
}

.input__field:focus::placeholder {
    color: var(--input-color)
}

.input__wrapper {
    display: flex;
    flex-direction: column
}

.input__message {
    font-size: 12px;
    margin-left: 16px;
    line-height: 130%
}

.input__copy {
    display: grid;
    place-items: center;
    position: absolute;
    right: 0;
    top: 1px;
    height: 58px;
    width: 58px;
    background: none;
    border: none;
    cursor: pointer
}

.input__copy .icon {
    background-color: var(--input-color)
}

.input__clear {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    display: none;
    height: 60px;
    width: 40px
}

.input__clear .icon {
    background-color: var(--input-color)
}

.input__icon {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    height: 60px;
    width: 40px
}

.input__icon .icon {
    background-color: var(--input-color)
}

.input_readonly .input__field {
    padding-right: 56px
}

.input_readonly .input__field:focus {
    border-color: var(--input-color)
}

.input_readonly .input:hover {
    border-color: var(--input-color)
}

.input_clear .input__field {
    padding-right: 42px
}

.input_clear .input__label {
    left: 40px
}

.input_icon .input__field {
    padding-left: 42px
}

.input_search {
    flex: 1
}

.input_search .input__field {
    padding-left: 40px;
    max-width: 100%
}

.input_search .input__label {
    left: 40px
}

.input_copy .input__field {
    padding-right: 58px
}

.input.--focus .input__label {
    transform: scale(.8) translateY(-36px) translateX(-2px)
}

.ui-tooltip {
    z-index: var(--z-toolip);
    position: absolute;
    background-color: var(--tooltip-bg-color);
    box-shadow: var(--tooltip-shadow);
    color: var(--tooltip-text-color);
    border-radius: 20px;
    padding: 10px 16px;
    line-height: 120%;
    font-size: 14px;
    max-width: 320px
}

.ui-tooltip a {
    color: var(--accent-color)
}

.ui-helper-hidden-accessible {
    display: none
}

.checkbox {
    display: flex;
    gap: 8px;
    cursor: pointer;
    user-select: none
}

.checkbox__box {
    position: relative;
    display: inline-block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 2px;
    border: 2px solid var(--checkbox-color);
    opacity: .8
}

.checkbox__box:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--checkbox-accent-color);
    opacity: 0;
    transition: opacity .2s
}

.checkbox__box::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    width: 24px;
    height: 24px;
    clip-path: path("M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z");
    -webkit-clip-path: path("M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z");
    background-color: #fff;
    opacity: 0
}

.checkbox:hover .checkbox__box {
    opacity: .8;
    border-color: var(--checkbox-accent-color)
}

.checkbox:hover .checkbox__box:after {
    opacity: 0
}

.checkbox:active .checkbox__box {
    opacity: 1
}

.checkbox:active .checkbox__box:before {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: .2
}

.checkbox__input {
    position: absolute;
    appearance: none;
    opacity: 0;
    visibility: hidden;
    z-index: -1
}

.checkbox__input:checked~.checkbox__box {
    opacity: 1;
    background-color: var(--checkbox-accent-color);
    border-color: var(--checkbox-accent-color)
}

.checkbox__input:checked~.checkbox__box:after {
    opacity: 1
}

.checkbox__input:disabled~.checkbox__box {
    filter: grayscale(100%);
    opacity: .5
}

.checkbox__input:disabled~.checkbox__box:before {
    opacity: 0
}

.checkbox__text {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 12px;
    color: var(--checkbox-text-color);
    line-height: 120%;
    width: 100%;
    align-items: center
}

.checkbox__text a,
.checkbox__text button {
    color: var(--accent-color);
    text-decoration: none
}

@media(hover:hover) {
    .checkbox__text a:hover,
    .checkbox__text button:hover {
        text-decoration: underline
    }
}

.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    cursor: pointer
}

.switch__box {
    display: inline-block;
    padding: 4px;
    border-radius: 100px;
    background-color: var(--switch-bg-color);
    width: 52px;
    min-width: 52px;
    height: 32px;
    filter: grayscale(100%);
    opacity: .5;
    transition: filter .2s, opacity .2s, box-shadow .2s;
    box-shadow: 0 0 0 3px rgba(var(--switch-outline-color), 0)
}

.switch__circle {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--switch-circle-color);
    border-radius: 50%;
    transition: transform .2s
}

.switch:hover .switch__box {
    box-shadow: 0 0 0 3px rgba(var(--switch-outline-color), .5)
}

.switch:active .switch__box {
    box-shadow: none
}

.switch__input {
    position: absolute;
    appearance: none;
    opacity: 0;
    visibility: hidden;
    z-index: -1
}

.switch__input:checked~.switch__box {
    filter: none;
    opacity: 1
}

.switch__input:checked~.switch__box .switch__circle {
    transform: translateX(20px)
}

.switch__input:disabled~.switch__box {
    filter: grayscale(100%);
    opacity: .3;
    box-shadow: none
}

.switch__input:disabled:checked~.switch__box {
    filter: none;
    opacity: .5
}

.switch__text {
    font-weight: 600;
    color: var(--switch-text-color);
    font-size: 16px;
    line-height: 120%;
    user-select: none
}

.control-bar {
    display: flex;
    gap: 12px;
    padding-top: 24px;
    padding-bottom: 16px
}

.control-bar_search {
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    background-color: var(--card-bg-color);
    border-radius: 8px;
    border: 1px solid var(--main-border-color)
}

.control-bar_search .input__field {
    padding-left: 40px;
    max-width: 100%;
    padding-top: 6px;
    min-height: 44px;
    padding-bottom: 6px
}

.control-bar_search .input__label {
    top: 11px
}

.control-bar_search .input__icon {
    height: 44px
}

.rate {
    display: flex;
    position: relative;
    gap: 4px;
    width: fit-content;
    flex-direction: row-reverse
}

.rate__star {
    border: none
}

.rate__star:focus-visible {
    outline: 2px solid var(--accent-color)
}

.rate__star.--active {
    background-color: var(--star-color)
}

.rate__star.--halt {
    background: linear-gradient(to right, var(--star-color) 0%, var(--star-color) 50%, var(--icon-secondary-color) 51%, var(--icon-secondary-color) 100%)
}

.rate__star:is(button) {
    cursor: pointer
}

.rate__star:is(button):hover {
    background-color: var(--star-color)
}

.rate__star:is(button):hover~.rate__star {
    background-color: var(--star-color)
}

.rate__input {
    position: absolute;
    z-index: -10;
    opacity: 0;
    appearance: none
}

.rate__text {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap
}

.rate[data-rate] {
    margin-left: 26px
}

.rate[data-rate]::after {
    position: absolute;
    content: attr(data-rate);
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--subtext-color)
}

.rate_no-text[data-rate] {
    margin-left: 0
}

.rate_no-text::after {
    display: none
}

.news {
    position: relative;
    padding: 8px;
    min-height: 150px;
    max-height: 320px;
    border-radius: 8px;
    container-name: news;
    container-type: size;
}

.news:before {
    position: absolute;
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, var(--news-shadow));
    border-radius: 8px
}

.news-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.news-wrapper__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "n1 n1 n2 n3" "n1 n1 n4 n5"
}

.news-wrapper__grid_reverse {
    grid-template-areas: "n2 n3 n1 n1" "n4 n5 n1 n1"
}

.news-wrapper__row {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr)
}

.news-wrapper__tile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}

.news-wrapper__tile:has(.news:nth-child(4)) .news:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.news-wrapper__mesh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 20px;
}

.news-wrapper__mesh>*:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.news-wrapper__mesh:not(:has(>*:nth-child(5))) {
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}

.news-wrapper__mesh:not(:has(>*:nth-child(5)))>*:nth-child(1) {
    grid-column: auto;
    grid-row: auto;
}

.news-wrapper_single {
    margin-bottom: 32px
}

.news-cols3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.news__img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity .2s
}

.news__category {
    position: absolute;
    padding: 3px 6px 4px 6px;
    line-height: 100%;
    font-size: 12px;
    color: var(--grey-800);
    top: 8px;
    left: 8px;
    border-radius: 4px;
    background: rgba(252, 252, 252, .8);
    backdrop-filter: blur(2px);
    z-index: 2;
    text-decoration: none
}

.news__content {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    bottom: 8px;
    left: 8px;
    right: 8px;
    transform: translateY(20px);
    transition: transform .2s
}

.news__title {
    color: var(--grey-grey-200, #E8EAED);
    font-size: 18px;
    font-weight: 600;
    line-height: 120%;
    text-decoration: none;
    overflow: hidden;
    box-sizing: content-box;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.news__details {
    display: flex;
    gap: 12px;
    opacity: 0;
    transition: opacity .1s
}

.news__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.news_large {
    grid-area: n1
}

.news_large .news__title {
    font-size: 32px
}

.news_large .news__content {
    transform: none
}

.news_large .news__details {
    opacity: 1
}

.news_mini {
    min-height: 126px;
    min-width: 237px;
    margin-right: 8px
}

.news:hover .news__img {
    opacity: .8
}

.news:not(.news_large):hover .news__content {
    transform: none
}

.news:not(.news_large):hover .news__details {
    opacity: 1
}

.icon-text {
    display: flex;
    gap: 4px
}

.icon-text .icon {
    display: inline-block;
    background-color: currentColor
}

.icon-text__text {
    line-height: 100%;
    color: currentColor;
    white-space: nowrap
}

.icon-text_news {
    gap: 3px;
    color: var(--news-details-color);
    font-size: 16px;
    font-weight: 400;
}

.icon-text_forecast {
    gap: 3px;
    color: var(--grey-600);
}

.icon-text_article {
    gap: 2px
}

.icon-text_article .icon {
    background-color: var(--article-details-color)
}

.icon-text_article .icon-text__text {
    color: var(--article-details-color)
}

.video {
    position: relative;
    max-width: 100%;
    height: clamp(180px, 54.2vw, 475px);
    overflow: hidden;
    border-radius: 8px
}

.video__link {
    cursor: pointer
}

.video__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    filter: brightness(70%);
    transition: filter .2s
}

.video:hover .video__play {
    transform: translate(-50%, -50%) scale(1.1)
}

.video:hover .video__play::after {
    animation: btn_video_pulse 1.6s infinite
}

.video:hover .video__play:hover {
    transform: translate(-50%, -50%) scale(1.2)
}

.video:hover .video__img {
    filter: brightness(50%)
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background-color: var(--accent-color);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .2s, filter .2s
}

.video__play:before {
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #fff;
    content: "";
    clip-path: polygon(0% 0%, 75% 50%, 0% 100%);
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%)
}

.video__play::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.5);
    width: 100%;
    height: 100%;
    display: block;
    border: 10px solid var(--accent-color);
    opacity: 0;
    border-radius: 50%
}

.video__play:hover {
    filter: brightness(90%)
}

.video__content {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 16px;
    z-index: 2;
    color: var(--video-text-color);
    padding: 16px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(2px);
    max-width: 60%
}

.video__title {
    font-size: 20px;
    margin-bottom: 8px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500
}

.video__descr {
    font-size: 16px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 120%
}

.video iframe {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: none;
    background-color: #000;
    border-radius: 8px
}

.text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--text-color);
    line-height: 140%;
}

.text ul,
.text ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    gap: 16px
}

.text li {
    padding-left: 16px;
    position: relative;
    counter-increment: list-item
}

.text li:before {
    position: absolute;
    content: ""
}

.text a:not(.btn) {
    text-decoration: none;
    color: var(--accent-color)
}

.text a:not(.btn):hover {
    text-decoration: underline
}

.text ul:not(.plus-minus) li:before {
    top: 5px;
    left: 2px;
    width: 8px;
    height: 8px;
    clip-path: polygon(0% 0%, 75% 50%, 0% 100%);
    background-color: var(--accent-color)
}

.text ul.plus-minus li {
    line-height: 1
}

.text ul.plus-minus li::before {
    top: 0;
    left: -8px;
    width: 16px;
    height: 16px
}

.text ul.plus-minus li[data-status=true]::before {
    background-color: var(--green-500);
    mask-image: url(../images/icons/yes.svg);
    -webkit-mask-image: url(../images/icons/yes.svg)
}

.text ul.plus-minus li[data-status=false]::before {
    background-color: var(--red-400);
    mask-image: url(../images/icons/no.svg);
    -webkit-mask-image: url(../images/icons/no.svg)
}

.text ol li:before {
    top: 2px;
    left: -2px;
    content: counter(list-item) ".";
    color: var(--accent-color);
    font-weight: 700;
    line-height: 100%
}

.text p {
    line-height: 140%
}

.galery__for {
    margin-bottom: 12px;
    border: 1px solid var(--main-border-color);
    overflow: hidden;
    border-radius: 8px
}

.galery__nav {
    margin: 0 auto;
    max-width: calc(100% - 80px)
}

.galery__promo {
    max-width: 100%;
    display: inline-block
}

.galery__promo img {
    max-width: 100%
}

.galery__image {
    width: clamp(120px, 20vw, 200px);
    border: 1px solid var(--main-border-color);
    border-radius: 8px
}

.galery__mini {
    opacity: .6;
    transition: opacity .3s;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
    margin-right: 10px
}

.galery__mini.is-nav-selected {
    opacity: 1
}

.galery .flickity-viewport {
    transition: height .3s
}

.flickity-prev-next-button {
    background-color: rgba(0, 0, 0, 0);
    height: 100%;
    border-radius: 0;
    width: 40px;
    opacity: .6;
    box-shadow: none !important;
    outline: none !important;
}

.flickity-prev-next-button:hover {
    opacity: 1;
}

.flickity-prev-next-button.next {
    right: auto;
    left: 100%
}

.flickity-prev-next-button.previous {
    left: auto;
    right: 100%
}

.flickity-page-dots .flickity-page-dot {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    background-color: var(--accent-color);
    opacity: .25;
    &:is(.is-selected) {
        opacity: 1
    }
}

.comment {
    scroll-margin-top: 100px;
    position: relative;
    border: 1px solid var(--comment-border-color);
    background-color: var(--comment-bg-color);
    border-radius: 8px;
    padding: 24px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: fit-content
}

.comment__title {
    margin-bottom: 12px;
    color: var(--comment-text-color);
    font-size: 20px;
    line-height: 120%;
    font-weight: 700
}

.comment__descr {
    color: var(--comment-text-color)
}

.comment__details {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px
}

.comment__date {
    font-size: 14px;
    line-height: 120%;
    color: var(--comment-rate-color)
}

.comment__rate {
    position: absolute;
    top: 20px;
    right: 24px
}

.comment__rate .icon-text {
    gap: 2px;
    color: var(--comment-rate-color)
}

.comment__rate .icon-text__text {
    line-height: 110%
}

.comment__rate .icon {
    transform: scale(1.2)
}

.comment__icons {
    justify-self: end;
    display: flex;
    gap: 4px;
    margin-left: auto
}

.comment_cabinet {
    padding: 0;
    gap: 8px;
    border: none
}

.comment_cabinet .comment__rate {
    position: static
}

.comment_cabinet .comment__title {
    margin-bottom: 0
}

.comment_mini .comment__descr {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    box-orient: vertical;
}

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none
}

.pagination__li {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--pagination-bg-color);
    border: 1px solid var(--pagination-border-color);
    color: var(--pagination-text-color);
    transition: color .1s, background-color .1s, border-color .1s
}

.pagination__li_active {
    border-color: var(--pagination-accent-color);
    color: var(--pagination-accent-color)
}

.pagination__li_disabled {
    background-color: var(--pagination-border-color);
    cursor: not-allowed
}

.pagination__li_disabled a {
    cursor: not-allowed
}

.pagination__li_prev {
    transform: rotate(180deg)
}

.pagination__li:not(.pagination__li_disabled):hover {
    background-color: var(--pagination-hover-color);
    border-color: var(--pagination-accent-color);
    color: var(--pagination-accent-color)
}

.pagination__li:not(.pagination__li_disabled):hover .icon {
    background-color: var(--pagination-accent-color)
}

.pagination__link {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    color: currentColor
}

.pagination__link .icon {
    transition: background-color .1s;
    background-color: var(--pagination-icon-color)
}

.person {
    display: flex;
    align-items: center;
    gap: 12px
}

.person__ava {
    height: 48px;
    width: 48px;
    display: grid;
    place-items: center;
    color: var(--person-grey-ava-sumbol-color);
    background-color: var(--person-grey-ava-bg-color);
    border: 1px solid var(--person-grey-ava-border-color);
    border-radius: 8px
}

.person__ava span {
    color: currentColor;
    font-size: 28px;
    line-height: 100%;
    font-weight: 600
}

.person__col {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.person__name {
    color: var(--person-name-color);
    line-height: 120%;
    font-size: 16px;
    font-weight: 600
}

.person__date {
    color: var(--person-date-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 120%
}

.person_red .person__ava {
    color: var(--person-red-ava-sumbol-color);
    background-color: var(--person-red-ava-bg-color);
    border-color: var(--person-red-ava-border-color)
}

.person_green .person__ava {
    color: var(--person-green-ava-sumbol-color);
    background-color: var(--person-green-ava-bg-color);
    border-color: var(--person-green-ava-border-color)
}

.iframe {
    border: none
}

.answer {
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--answer-border-color);
    background-color: var(--answer-bg-color);
    margin-top: 12px
}

.answer__title {
    font-weight: 600;
    line-height: 130%;
    color: var(--answer-title-color);
    font-size: 16px
}

.answer__text {
    color: var(--answer-text-color);
    font-size: 15px;
    line-height: 130%
}

.hero {
    position: relative;
    padding-bottom: 90px;
    padding-top: 180px;
    margin-top: -132px;
    overflow: hidden;
    .h1,
    .h4 {
        color: #fff;
        line-height: 130%
    }
    .h1 {
        font-size: clamp(24px, 7vw, 48px)
    }
    .h4 {
        font-size: clamp(16px, 7vw, 25px);
        font-weight: 400
    }
}

.hero__top {
    max-width: 975px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
}

.hero__bottom {
    max-width: 868px;
    margin: 0 auto;
}

.hero__search {
    margin-bottom: 30px;
    .input__field {
        background-color: rgba(255, 255, 255, .4);
        border: none;
        color: #fff !important
    }
    .input__icon .icon {
        background-color: #fff
    }
    #search_input::placeholder {
        color: #fff
    }
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: brightness(65%) blur(4px);
    scale: 1.1;
    user-select: none;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.hero__links {
    display: flex;
    justify-content: center;
    list-style: none;
    flex-wrap: wrap;
    gap: 16px 24px;
    font-size: 15px;
}

.hero__link {
    position: relative;
    color: #fff;
    font-size: 17px;
    line-height: 120%;
    text-decoration: none;
    cursor: pointer;
}

.hero__link:before {
    position: absolute;
    content: '';
    left: -6px;
    top: -2px;
    width: calc(100% + 12px);
    height: calc(100% + 4px);
    background-color: rgba(255, 255, 255, .2);
    transition: .2s ease-in-out opacity;
    opacity: 0;
    border-radius: 4px;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.toast {
    position: relative;
    max-width: 320px;
    min-width: 200px;
    background-color: var(--toast-bg-color);
    border: 1px solid var(--toast-border-color);
    padding: 12px 16px 12px 36px;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    transform-origin: center;
    transition: transform .05s
}

.toast-wrapper {
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: height .2s;
    position: fixed;
    bottom: 24px;
    left: 24px
}

.toast__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--toast-title-color);
    padding-right: 18px
}

.toast__descr {
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: var(--toast-descr-color)
}

.toast__icon {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--toast-ok-color)
}

.toast__close {
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    transition: opacity .2s
}

.toast__close:hover {
    opacity: .6
}

.toast__loadbar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--loadbar-bg-color)
}

.toast__loadbar::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    height: 100%;
    width: 100%;
    background-color: var(--loadbar-accent-color);
    transform-origin: left;
    animation: loadbar 6s forwards
}

.toast_grab {
    cursor: grabbing
}

.chips {
    padding: 7px 16px 7px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    color: var(--chips-text-color);
    border: 1px solid var(--chips-border-color)
}

.chips__text {
    font-size: 14px;
    font-weight: 400;
    color: currentColor;
    line-height: 100%;
    white-space: nowrap
}

.chips__text b,
.chips__text strong {
    font-weight: 600
}

.chips__icon {
    background-color: currentColor
}

.broker {
    position: relative;
    display: flex;
    padding: 24px;
    gap: 40px;
    background-color: var(--broker-bg-color);
    border-radius: 8px;
    border: 1px solid var(--broker-border-color);
    margin-bottom: 24px
}

.broker__link {
    position: absolute;
    inset: 0
}

.broker__col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 206px
}

.broker__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1
}

.broker__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--broker-title-color)
}

.broker__details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 0;
    padding-right: 30px;
    color: var(--broker-descr-color)
}

.broker__logo {
    aspect-ratio: 2/1;
    object-fit: contain
}

.broker__descr {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    margin-bottom: 8px;
    color: var(--broker-descr-color)
}

.broker__icons {
    display: flex;
    gap: 4px;
    position: absolute;
    bottom: 28px;
    right: 24px
}

.broker__rate {
    position: absolute;
    top: 24px;
    right: 24px
}

.broker__label {
    position: absolute;
    display: flex;
    font-size: 14px;
    line-height: 130%;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
    white-space: nowrap;
    top: 0;
    left: 136px;
    transform: translateX(-50%)
}

.broker__label .icon {
    background-color: currentColor
}

.broker_recommendation {
    border-color: var(--broker-rec-color)
}

.broker_recommendation .broker__label {
    background-color: var(--broker-rec-color);
    color: var(--broker-rec-text-color)
}

.broker_best {
    border-color: var(--broker-best-color)
}

.broker_best .broker__label {
    background-color: var(--broker-best-color);
    color: var(--broker-best-text-color)
}

.broker_single {
    margin-bottom: 0
}

.broker_single .broker__icons {
    top: 24px;
    bottom: auto
}

.broker_single .broker__rate {
    right: auto;
    top: 136px;
    left: 136px;
    transform: translateX(-50%)
}

.dropdown {
    display: none;
    z-index: var(--z-dropdown);
    position: absolute;
    background: var(--dropdown-bg-color);
    padding: 4px;
    border: 1px solid var(--select-border-color);
    border-radius: 8px;
    z-index: var(--z-dropdown);
    padding: 4px;
    min-width: 200px;
    max-width: 100dvw;
    box-shadow: 0 4px 20px 10px rgba(0, 0, 0, .05);
}

.dropdown__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.dropdown_li {
    width: 100%
}

.dropdown__link {
    display: flex;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    border: none;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--select-text-color);
    padding: 12px 8px;
    transition: background-color .2s, color .05s, filter .1s;
    font-weight: 500;
    cursor: pointer;
    text-align: left
}

.dropdown__link .icon {
    background-color: var(--select-text-color);
    transition: background-color .05s
}

.dropdown__link b {
    font-weight: 600;
    padding-right: 4px;
    opacity: .8
}

@media(hover:hover) {
    .dropdown__link:hover,
    .header-dropdown__link:hover {
        background-color: var(--select-accent-color);
        color: var(--dropdown-bg-color)
    }
    .dropdown__link:hover .icon {
        background-color: var(--dropdown-bg-color)
    }
    .hero__link:hover {
        &::before {
            opacity: 1
        }
    }
}

.dropdown__link:active {
    filter: brightness(90%)
}

.dropdown__link_red {
    color: var(--red-500)
}

.dropdown__link_red .icon {
    background-color: currentColor
}

@media(hover:hover) {
    .dropdown__link_red:hover {
        background-color: var(--red-500);
        color: --dropdown-bg-color
    }
}

.graph {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    border: 1px solid var(--main-border-color);
    padding: 20px
}

.graph__title {
    align-self: flex-start;
    font-size: 32px;
    text-align: left;
    margin-bottom: 12px;
    line-height: 100%;
    margin-top: -4px;
}

.short-info__icon {
    margin-bottom: 20px
}

.short-info__icon .icon {
    background-color: var(--short-info-icon)
}

.short-info__text {
    color: var(--short-info-text);
    text-align: justify
}

.faq__btn {
    display: flex;
    justify-content: space-between;
    padding: 14px 10px;
    margin: 6px 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
    color: var(--text-color);
    font-weight: 600;
    line-height: 120%;
    width: 100%;
    text-align: left;
    font-size: 18px;
    transition: background-color .2s, box-shadow .2s;
    border-radius: 8px
}

.asks__wrapper {
    .faq__btn {
        background-color: #fff;
        padding: 24px 18px;
        margin: 0
    }
    .faq__body {
        background-color: #fff;
        border: none;
        border-radius: 8px;
        margin-inline: 0;
        margin-top: 12px;
        padding: 18px
    }
}

@media(hover:hover) {
    .faq__btn:hover {
        box-shadow: 0 0 0 4px rgba(var(--faq-hover-color), .5);
        background-color: rgb(var(--faq-hover-color))
    }
}

.faq__btn .icon {
    background-color: currentColor;
    transform: rotate(90deg)
}

.faq__btn.--active .icon {
    transform: rotate(-90deg)
}

.faq__body {
    display: none;
    line-height: 130%;
    color: var(--subtext-color);
    font-size: 16px;
    padding: 10px;
    padding-left: 16px;
    margin-left: 16px;
    margin-bottom: 16px;
    border-left: 1px dashed var(--main-border-color)
}

.info-baner {
    min-height: 120px;
    width: 100%;
    border-radius: 8px;
    background-color: rgba(60, 120, 255, .1);
    margin-bottom: 12px
}

.illustrations {
    display: inline-block;
    width: clamp(296px, 500px, 50vw);
    height: clamp(296px, 500px, 50vw);
    aspect-ratio: 1/1;
    max-width: 100%;
    min-width: 296px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat
}

.illustrations_welcome {
    background-image: url(../images/illustrations/welcome.svg)
}

.illustrations_404 {
    background-image: url(../images/illustrations/404.svg)
}

.illustrations_our-team {
    background-image: url(../images/illustrations/our-team.svg)
}

.illustrations_mission {
    background-image: url(../images/illustrations/mission.svg)
}

.illustrations_contact {
    background-image: url(../images/illustrations/contact.svg)
}

.illustrations_questions {
    background-image: url(../images/illustrations/questions.svg)
}

.illustrations_reset {
    height: auto;
    width: auto
}

.scroll-top {
    display: none;
    outline: none;
    border: 1px solid var(--main-border-color);
    position: fixed;
    right: 30px;
    bottom: 24px;
    border-radius: 8px;
    background-color: var(--card-bg-color);
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .05);
    z-index: calc(var(--z-pop-up) - 1)
}

.scroll-top .icon {
    margin: 0 auto;
    transform: rotate(-90deg) translate(-50%, -50%);
    transition: .2s background-color;
    position: absolute;
    left: 50%;
    right: 50%;
    background-color: var(--accent-color);
}

@media(hover:hover) {
    .scroll-top:hover {
        background-color: var(--blue-50);
        border-color: var(--accent-color)
    }
}

.cookie {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    max-width: calc(100dvw - 48px);
    padding: 20px;
    border-radius: 8px;
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--main-border-color);
    z-index: var(--z-pop-up);
}

.cookie__title {
    margin-bottom: 16px
}

.cookie__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.cookie .btn {
    min-width: fit-content
}

.cite {
    background-color: var(--cite-bg-color);
    border-radius: 8px;
    padding: 16px;
    padding-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--cite-text-color);
    font-weight: 500;
    border-left: 3px solid var(--accent-color);
    line-height: 130%
}

.cite__footer {
    display: flex;
    justify-content: end;
    align-items: baseline;
    gap: 8px
}

.cite__footer span {
    font-size: 14px;
    opacity: .8
}

.cite__link {
    font-style: normal;
    font-size: 15px;
    text-decoration: none;
    color: var(--blue-800)
}

@media(hover:hover) {
    .cite__link:hover {
        text-decoration: underline
    }
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    accent-color: var(--accent-color)
}

*::-moz-selection {
    background-color: var(--accent-color);
    color: var(--grey-0)
}

*::selection {
    background-color: var(--accent-color);
    color: var(--grey-0)
}

*:focus-visible {
    outline-color: var(--accent-color);
    outline-width: 2px;
    outline-offset: 2px
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--main-bg-color)
}

::-webkit-scrollbar {
    width: 6px
}

.container {
    margin: 0 auto;
    width: calc(100% - var(--indentation-px));
    max-width: calc(var(--container-lg-px) + var(--indentation-px)*2);
    padding: 0 var(--indentation-px)
}

.container-860 {
    max-width: calc(var(--container-sm-px) + var(--indentation-px)*2)
}

.container-800 {
    max-width: calc(var(--container-smallest-px) + var(--indentation-px)*2)
}

.container_graph {
    margin-top: 32px;
    margin-bottom: 32px
}

.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 100vw
}

body {
    -webkit-transition: background-color .2s;
    transition: background-color .2s
}

.block-scroll {
    overflow: hidden
}

span.logo {
    min-width: 76px;
    height: 66px;
    display: inline-block;
    background: url(../images/logo/logo_icon.svg) center center/cover no-repeat
}

[title] {
    position: relative
}

.cols3 {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr)
}

.cols3_about {
    margin-bottom: 48px;
    gap: 40px
}

.section {
    padding: 20px 0 50px 0
}

.section__subtitle {
    font-size: 18px;
    line-height: 100%;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--subtext-color)
}

.section__subtitle_note {
    line-height: 130%;
    color: var(--note-color)
}

.section__title {
    font-size: 40px;
    line-height: 100%;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--title-color)
}

.section__title_other {
    font-size: 32px;
    margin-bottom: 24px;
    line-height: 130%
}

.section__title_comments {
    margin-bottom: 12px
}

.section__title_single {
    margin-top: 0;
    margin-bottom: 8px
}

.section__descr {
    color: var(--subtext-color);
    line-height: 130%
}

.section__descr_sm {
    max-width: 600px
}

.section__descr_800 {
    max-width: 800px
}

.section-promo {
    margin-bottom: 32px
}

.section_grey {
    background-color: var(--secondary-bg-color)
}

.section_blue {
    background-color: #F2F9FF;
}

.section_other-news {
    padding: 32px 0 48px 0
}

.section_comments {
    padding: 48px 0
}

.main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: var(--main-bg-color);
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
    padding-top: 20px;
    padding-bottom: 32px
}

[data-step] {
    display: none
}

[data-step="1"] {
    display: block
}

mark {
    background-color: var(--yellow-300);
    color: var(--grey-900)
}

img.lazyload {
    background-size: cover
}

.title-hide {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    position: absolute;
    z-index: -1000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cols2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px
}

.cols2__col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 20px
}

.cols2__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px
}

.cols2__image {
    -ms-flex-item-align: center;
    align-self: center;
    max-width: 100%
}

.cols2:not(:last-of-type) {
    margin-bottom: 48px
}

.--bold {
    font-weight: 700
}

b,
strong {
    font-weight: normal
}

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

.advantage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 32px 8px 28px 8px;
    background-color: #EBF6FF;
    color: var(--blue-900);
    border-radius: 8px 40px 8px 40px;
}

.advantage_contrast {
    background-color: var(--blue-900);
    color: #EBF6FF;
}

.advantage__title {
    font-weight: 700;
    font-size: clamp(24px, 5vw, 40px);
    text-align: center;
}

.advantage__descr {
    font-weight: 700;
    line-height: 125%;
    font-size: clamp(14px, 5vw, 16px);
    text-align: center;
}

.faqs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px
}

.faqs__control-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    gap: 12px
}

.faqs .line {
    margin: -18px 0
}

.header {
    position: sticky;
    top: 0;
    background-color: var(--header-bg-color);
    padding: 8px 0;
    z-index: var(--z-header);
    transition: background-color .2s, translate .2s ease-in-out, backdrop-filter .2s;
}

.header__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;
}

.header__inner {
    display: flex;
    flex-direction: row;
    gap: 24px
}

.header__icons {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px
}

.header__menu {
    display: flex;
    flex-direction: row;
    scrollbar-width: thin;
}

.header__menu.__active {
    transform: none;
    z-index: 2
}

.header__bottom {
    display: flex;
    justify-content: space-between;
    list-style: none;
    gap: 16px;
    transition: transform .2s ease-in-out;
}

.header__registration-mobi {
    display: none;
}

.header_hidden {
    translate: 0 -52px;
}

.header__item {
    position: relative;
}

.header__item:last-of-type .header-dropdown {
    left: auto;
    right: 0;
}

.header_transparent {
    background: rgba(0, 0, 0, .1);
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1)
}

.header_transparent .header__icons .icon {
    background-color: var(--grey-50)
}

.header_transparent .btn {
    color: var(--grey-50)
}

.header_transparent .btn_simple {
    background-color: var(--grey-50);
    color: var(--blue-900);
}

.header_transparent .logo {
    filter: brightness(120%)
}

.header-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dropdown-bg-color);
    padding: 4px;
    min-width: 200px;
    border: 1px solid var(--select-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px 10px rgba(0, 0, 0, .05)
}

.header-dropdown__list {
    list-style: none;
}

.header-dropdown__link {
    display: block;
    text-decoration: none;
    width: 100%;
    font-size: 16px;
    border-radius: 4px;
    color: var(--select-text-color);
    padding: 12px 8px;
    transition: background-color .2s, color .05s, filter .1s;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.breadcrumbs {
    background: var(--breadcrumbs-bg-color);
    padding: 10px 0;
    overflow: hidden;
    transition: background-color .2s;
    .container {
        overflow: hidden
    }
}

.breadcrumbs .icon {
    background-color: var(--breadcrumbs-text-color)
}

.breadcrumbs__list {
    position: relative;
    display: flex;
    width: fit-content;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    list-style: none;
    transition: transform 2s
}

.breadcrumbs__item:not(:first-child) {
    position: relative;
    padding-left: 18px
}

.breadcrumbs__item:not(:first-child):before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    mask-image: url(../images/icons/chevron-right.svg);
    -webkit-mask-image: url(../images/icons/chevron-right.svg);
    background-color: var(--breadcrumbs-text-color)
}

.breadcrumbs__wrapper {
    display: flex;
    align-items: center
}

.breadcrumbs__link {
    font-size: 14px;
    display: flex;
    align-items: center;
    line-height: 100%;
    text-decoration: none;
    color: var(--breadcrumbs-text-color);
    white-space: nowrap
}

.breadcrumbs__link:hover {
    text-decoration: underline
}

.breadcrumbs__link_home {
    width: fit-content;
    transition: transform .2s
}

.breadcrumbs__link_home:hover {
    transform: scale(1.2)
}

.burger {
    display: none;
    background-color: rgba(0, 0, 0, 0);
    width: 32px;
    height: 32px;
    border-radius: 0;
    padding: 5px 4px;
    transition: transform .3s ease-in-out
}

.burger.__active {
    transform: translateX(2px)
}

.burger.__active span span:nth-child(1) {
    transform: scaleY(1.1) rotate(45deg)
}

.burger.__active span span:nth-child(2) {
    opacity: 0;
    transform: rotate(45deg) translateY(-50%)
}

.burger.__active span span:nth-child(3) {
    transform: scaleY(1.1) rotate(-45deg)
}

.content {
    display: flex;
    gap: 20px;
    width: 100%
}

.content__col {
    position: sticky;
    top: 120px;
    width: 285px;
    border-radius: 8px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--main-border-color);
    height: fit-content
}

.content__col_info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.content__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    flex: 1;
    border-radius: 8px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--main-border-color)
}

.content__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    padding-bottom: 4px
}

.content__li {
    display: flex;
    flex: 1
}

.content__btns {
    display: flex;
    margin-block: auto 0;
    gap: 16px;
}

.btn-prev:has(.icon) {
    padding-right: 24px;
    padding-left: 16px;
    .icon {
        rotate: 180deg
    }
}

.btn-prev {
    margin-left: 0;
    margin-right: auto;
}

.btn-next {
    margin-left: auto;
    margin-right: 0;
}

.content__aside-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--title-color);
    display: flex;
    gap: 4px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--main-border-color);
    align-items: center
}

.content__aside-title .icon {
    background-color: currentColor
}

.content__link {
    position: relative;
    color: var(--text-color);
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color .2s;
    flex: 1
}

.content__link::after {
    position: absolute;
    content: attr(data-count);
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: currentColor;
    opacity: .5;
    font-size: 14px
}

.content__link.--active {
    background-color: var(--blue-50);
    color: var(--blue-900)
}

.content__link.--active:before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 100%;
    width: 2px;
    background-color: var(--accent-color)
}

@media(hover:hover) {
    .content__link:hover {
        background-color: var(--blue-50);
        color: var(--blue-900)
    }
    .btn_nav:hover {
        background-color: rgba(211, 223, 245, .2);
        backdrop-filter: blur(5px)
    }
}

.content__wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.content__results {
    line-height: 120%;
    color: var(--subtext-color);
    margin-bottom: 4px
}

.tabs .content__results {
    margin-bottom: 20px
}

.table-wrapper {
    overflow: auto;
    max-width: 842px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(0, 0, 0, 0)
}

.table-wrapper::-webkit-scrollbar {
    width: 4px
}

.table-wrapper::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0)
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 8px
}

.table-wrapper::-webkit-scrollbar {
    height: 4px
}

.article__promo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px
}

.article__img {
    border-radius: 8px;
    max-width: 100%;
    border: 1px solid var(--main-border-color);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article__title {
    margin: 0;
    font-size: clamp(20px, 5vw, 32px);
    scroll-margin-top: 100px;
}

.article__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px
}

.article__details {
    display: flex;
    gap: 12px
}

.article__wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap-reverse;
    justify-content: space-between
}

.page {
    display: flex;
    gap: 20px
}

.page__content {
    flex: 1
}

.page__content_broker {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.page__aside {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.page__aside .page__block:last-child {
    position: sticky;
    top: 120px
}

.page__block {
    border-radius: 8px;
    padding: 20px 24px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--main-border-color);
    height: fit-content
}

.page__block_characteristics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px
}

.page__block_broker {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.page__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(18px, 3vw, 25px)
}

.page__cols2 {
    display: flex;
    gap: 16px
}

.page__col {
    flex: 1;
    max-width: 50%
}

.page__summary {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px
}

.page__summary .page__block {
    height: 100%
}

.page__image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--main-border-color)
}

.page_broker {
    display: grid;
    grid-template-columns: minmax(320px, 894px) 288px
}

.page .--full-height .list {
    max-height: none
}

.aside__title {
    color: var(--accent-color);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px
}

.aside__news {
    padding-bottom: 28px
}

.aside__news .news {
    width: 100%;
    max-width: 700px;
}

.aside__news .flickity-page-dots {
    bottom: 4px;
    max-width: calc(100% - 48px);
    left: 50%;
    transform: translateX(-50%)
}

.aside__news .flickity-prev-next-button {
    height: 24px;
    width: 24px;
    top: auto;
    transform: none;
    bottom: 0
}

.aside__news .flickity-prev-next-button.next {
    left: auto;
    right: 0
}

.aside__news .flickity-prev-next-button.previous {
    right: auto;
    left: 0
}

.comments {
    padding-top: 12px
}

.comments__control-bar {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 12px;
    flex-wrap: wrap-reverse;
    gap: 12px
}

.comments__grid {
    display: block;
    columns: 2;
    gap: 20px;
    margin-bottom: 20px
}

.comments__grid>.comment {
    break-inside: avoid;
    margin-bottom: 20px
}

.comments_cabinet {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.footer {
    padding-top: 20px;
    background-color: var(--main-bg-color);
    transition: background-color .2s
}

.footer__promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 36px 0;
    border-top: 1px solid var(--main-border-color)
}

.footer__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 12px
}

.footer__body {
    background-color: var(--footer-bg-color);
    padding: 28px 0
}

.footer__wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.footer__descr {
    color: var(--footer-descr-color);
    line-height: 130%
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.footer__link {
    color: var(--grey-400);
    text-decoration: none;
    padding: 1px 6px 2px 6px;
    border-radius: 4px;
    transition: .1s background-color ease-in-out;
    cursor: default;
    .bold {
        color: var(--grey-300)
    }
}

a.footer__link {
    cursor: pointer;
    user-select: none;
}

.footer__link:not(div):hover {
    background-color: rgba(252, 252, 252, .1);
}

.footer__warning {
    font-size: 14px;
    color: var(--footer-text-color);
    opacity: .7;
    line-height: 140%
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 48px;
}

.footer__copyright {
    color: var(--footer-text-color);
    opacity: .8;
    line-height: 130%
}

.pop-up {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: var(--z-pop-up);
    display: none
}

.pop-up p {
    color: var(--subtext-color)
}

.pop-up__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    min-height: 100dvh;
    background-color: var(--pop-up-bg-color);
    border: none;
}

.pop-up__wrapper {
    display: grid;
    place-items: center;
    width: 100dvw;
    min-height: 100dvh;
    padding: 0 8px
}

.pop-up__wrapper_search {
    display: flex;
    flex-direction: column
}

.pop-up__body {
    position: relative;
    padding: 24px;
    padding-bottom: 28px;
    border-radius: 8px;
    background-color: var(--card-bg-color);
    z-index: 2;
    min-width: 304px;
    width: 380px;
    max-width: 480px;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overflow-x: hidden;
    margin: 0 auto;
    margin-top: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) transparent
}

.pop-up__body_auth {
    max-height: none;
}

.pop-up__body::-webkit-scrollbar {
    width: 4px
}

.pop-up__body::-webkit-scrollbar-track {
    background-color: transparent
}

.pop-up__body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 8px
}

.pop-up__body_search {
    padding: 16px;
    width: 480px;
    max-width: 100%
}

.pop-up__body_cookie {
    width: 480px
}

.pop-up__title {
    color: var(--title-color);
    margin-bottom: 4px;
    padding-right: 36px;
    text-wrap: balance
}

.pop-up__form {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.pop-up__descr {
    color: var(--subtext-color);
    margin-bottom: 12px;
    line-height: 120%
}

.pop-up-close.btn_icon {
    position: absolute;
    top: 12px;
    right: 12px
}

.pop-up__btns {
    margin-top: 24px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    gap: 8px
}

.pop-up__btns .btn {
    height: 40px;
    font-size: 14px
}

.pop-up__btns_cookie {
    margin: 0;
    justify-content: end;
    flex-wrap: wrap
}

.pop-up__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background-color: #000;
    border: none;
    box-shadow: none;
    cursor: pointer
}

.pop-up__close:hover {
    opacity: .5
}

.share {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
    margin: 12px 0
}

.share__item {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    transition: .2s
}

.share__item:not(:last-child) {
    margin-right: 12px
}

.share__item .icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    background-color: #fff
}

.share__item:hover {
    opacity: .6
}

.share:not(.share_slider) {
    margin: 20px 0;
    display: flex
}

.search-result {
    z-index: var(--z-pop-up);
    margin: 0 auto;
    margin-top: 12px;
    width: 100%;
    max-width: 480px;
    background-color: var(--card-bg-color);
    border-radius: 8px;
    padding: 12px 16px 12px 16px;
    height: 400px;
    max-height: calc(100dvh - 136px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
    .pagination {
        margin-top: 32px
    }
}

.search-result::-webkit-scrollbar {
    width: 4px
}

.search-result::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color)
}

.search-result::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 8px
}

.search-result__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column
}

.search-result__item {
    position: relative;
    text-decoration: none
}

.search-result__item:hover .search-result__title {
    text-decoration: underline
}

.search-result__li:not(:last-child) {
    margin-bottom: 16px
}

.search-result__title {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
    color: var(--search-result-title-color);
    margin-top: 16px;
}

.search-result__descr {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: var(--search-result-descr-color)
}

.search-result__link {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: var(--search-result-link-color)
}

.search-result__href {
    position: absolute;
    inset: 0;
    z-index: 2
}

.search-result_page {
    max-width: 100%;
    overflow: visible;
    margin: 0;
    padding: 0;
    height: auto;
    max-height: none;
    z-index: auto
}

.search-result_page .search-result__descr {
    -webkit-line-clamp: 4
}

.icon_load {
    mask-image: url(../images/icons/load.svg);
    -webkit-mask-image: url(../images/icons/load.svg);
    background: #fff;
}

.icon_gift {
    mask-image: url(../images/icons/gift.svg);
    -webkit-mask-image: url(../images/icons/gift.svg);
}

.icon_filter {
    mask-image: url(../images/icons/filter.svg);
    -webkit-mask-image: url(../images/icons/filter.svg);
    background-color: currentColor;
}

.icon_arrow {
    mask-image: url(../images/icons/arrow.svg);
    -webkit-mask-image: url(../images/icons/arrow.svg);
}

.icon_instagram {
    mask-image: url(../images/icons/instagram.svg);
    -webkit-mask-image: url(../images/icons/instagram.svg);
}

.icon_calculate {
    mask-image: url(../images/icons/calculate.svg);
    -webkit-mask-image: url(../images/icons/calculate.svg);
}

.icon_currency_exchange {
    mask-image: url(../images/icons/currency_exchange.svg);
    -webkit-mask-image: url(../images/icons/currency_exchange.svg);
}

.icon_bank {
    mask-image: url(../images/icons/bank.svg);
    -webkit-mask-image: url(../images/icons/bank.svg);
}

.icon_hourglass {
    mask-image: url(../images/icons/hourglass.svg);
    -webkit-mask-image: url(../images/icons/hourglass.svg);
}

.broker__logo {
    margin-top: 8px;
}

.news_aside {
    width: 236px;
}

.section_no-padding {
    padding: 0 !important;
}

.rate {
    flex-direction: row;
}

.rate_interactive {
    flex-direction: row-reverse;
}

.bold {
    font-weight: 700;
}

.broker {
    min-height: 244px;
}

address {
    font-style: normal;
}

.page__block_characteristics {
    padding-top: 16px;
}

.input__message {
    display: flex;
    gap: 4px;
    .icon {
        background-color: currentColor
    }
}

.input__wrapper {
    gap: 2px;
}

.input__field_disabled {
    cursor: not-allowed;
}

.content__col {
    position: static;
}

.notification {
    display: none;
    position: fixed;
    bottom: 32px;
    min-width: 300px;
    max-width: calc(100vw - 16px);
    left: 50%;
    transform: translate(-50%);
    font-size: 13px;
    color: #fff;
    background: #2a2a2a;
    padding: 14px 16px;
    border-radius: 4px;
    border: 1px solid rgba(155, 155, 155, 1);
    transition: box-shadow .3s, transform .6s;
    z-index: 5;
    padding-right: 32px;
    .icon {
        background: #fff
    }
    .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 6px;
        vertical-align: middle
    }
}

.notification_hide {
    transform: translate(-50%, 100px);
}

.notification:hover {
    box-shadow: 0 0 0 5px rgba(155, 155, 155, .5);
}

.illustrations_authorization {
    background-image: url(../images/illustrations/authorization.svg)
}

.illustrations_instruments {
    background-image: url(../images/illustrations/instruments.svg)
}

.asks {
    display: flex;
    gap: 80px;
}

.asks__wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    max-width: 700px;
}

.asks__form {
    width: 420px;
    border-radius: 20px;
    background-color: #fff;
    padding: 32px 24px;
    max-width: 100%;
    height: fit-content;
    .input__field {
        max-width: none
    }
}

.instruments {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));
    margin-top: 30px;
}

.instrument {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background-color: #EBF6FF;
    transition: box-shadow .2s ease-in-out, background .1s ease-in-out;
}

.instrument__icon {
    background-color: var(--blue-900);
}

.instrument__title {
    font-size: 25px;
    font-weight: 600;
    color: var(--blue-900);
}

.instrument__descr {
    padding: 0;
    color: var(--grey-800);
}

.instruments__link {
    position: absolute;
    inset: 0;
}

.instrument:hover {
    background-color: #FFFFFF;
    box-shadow: 0 3px 10px 0 #0000001F;
}

.page__image {
    max-height: 500px;
}

.list__item {
    font-size: 16px;
}

.best-brokers__control {
    display: flex;
    gap: 24px;
    margin-top: 30px;
    overflow: auto;
}

.best-brokers__wrapper {
    margin-top: 46px;
}

.best-brokers__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    list-style: none;
    gap: 20px;
}

.best-brokers__inner:not(.--visible) {
    display: none;
}

.best-broker {
    position: relative;
    flex: 1;
    padding: 24px;
    border-radius: 20px;
    background-color: var(--card-bg-color);
    transition: background-color .2s ease-in-out, background-color .1s ease-in-out;
    min-height: 160px;
}

.best-broker__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.best-broker__logo {
    width: 100%;
    object-fit: contain;
    aspect-ratio: 2 / 1;
    transition: opacity .2s ease-in-out;
}

.table-terms {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    color: var(--table-text-color);
    border-radius: 8px;
    thead {
        background-color: var(--table-text-color);
        color: var(--table-main-bg-color)
    }
    tr {
        vertical-align: baseline;
        border-radius: 12px
    }
    tr:nth-child(even) {
        background-color: var(--grey-100)
    }
    tr:not(:last-child) {
        border-bottom: 1px solid var(--main-border-color)
    }
    th {
        font-weight: 700;
        width: fit-content
    }
    th,
    td {
        text-align: left;
        padding: 14px 10px
    }
    a {
        text-decoration: none;
        color: var(--accent-color)
    }
    @media (hover:hover) {
        a:hover {
            text-decoration: underline
        }
    }
    @media (hover:none) {
        a:hover {
            text-decoration: underline
        }
    }
}

.broker__descr_short {
    overflow: hidden;
    box-sizing: content-box;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.broker_recommendation {
    background: color-mix(in srgb, var(--broker-bg-color) 93%, var(--broker-rec-color) 7%);
}

.broker_recommendation .chips {
    background: color-mix(in srgb, var(--broker-bg-color) 96%, var(--broker-rec-color) 4%);
    border-color: color-mix(in srgb, var(--chips-border-color) 80%, var(--broker-rec-color) 20%);
}

.load-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
    z-index: 2;
    top: 0;
    left: 0;
}

.load-screenimg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.header_index {
    background-color: rgba(248, 249, 250, .8);
    backdrop-filter: blur(20px);
}

.header_transparent {
    background: rgba(0, 0, 0, .1);
    backdrop-filter: none;
}

.scroll-top:focus-visible {
    outline: 2px solid var(--accent-color);
}

.aside__news .flickity-viewport {
    border-radius: 8px;
}

.toast {
    cursor: default;
}

.rate_interactive .acf-input-prepend {
    display: flex;
    position: relative;
    gap: 4px;
    width: fit-content;
    flex-direction: row-reverse;
}

.graph {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.burger {
    padding: 0;
    border-radius: var(--btn-radius);
}

.burger.__active {
    transform: none;
}

.burger.__active .icon {
    mask-image: url(../images/icons/close.svg);
    -webkit-mask-image: url(../images/icons/close.svg);
}

.last-comments .comment {
    position: absolute;
    width: calc(33.333% - 24px);
    margin-right: 24px;
}

@media(max-width:1200px) {
    .logo__img {
        width: 44px;
        height: 36px
    }
}

@media(max-width:1080px) {
    .header__inner {
        gap: 12px
    }
    .asks {
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
    .breadcrumbs:not(.breadcrumbs_footer) {
        top: 56px;
        padding: 8px 0
    }
    .breadcrumbs__link {
        font-size: 12px
    }
    .breadcrumbs_footer {
        padding: 8px 12px
    }
    .footer__descr {
        font-size: 14px
    }
    .page__summary {
        display: flex;
        flex-direction: column-reverse
    }
}

@media(max-width:1000px) {
    .last-comments .comment {
        position: absolute;
        width: calc(50% - 24px);
        margin-right: 24px
    }
    .broker {
        flex-direction: column;
        gap: 4px
    }
    .news-wrapper__tile:has(.news:nth-child(4)) .news:first-child {
        grid-column: auto;
        grid-row: auto
    }
    .broker__col {
        display: contents
    }
    .broker_single .broker__rate {
        position: static;
        transform: none
    }
    .rate__text {
        top: 50%;
        left: calc(100% + 4px);
        transform: translateY(-50%)
    }
    .broker__details {
        padding-right: 0
    }
    .broker__icons {
        bottom: auto;
        right: 24px
    }
    .broker__label {
        left: 50%
    }
    .broker .btn_broker {
        margin-top: 16px;
        order: 2
    }
    .news-wrapper__grid {
        display: contents
    }
    .news-wrapper__row {
        display: contents
    }
    .news-wrapper_single .news__title {
        font-size: 24px
    }
    .news-wrapper_single .news__content {
        transform: none
    }
    .news-wrapper_single .news__details {
        opacity: 1
    }
    .news-wrapper_single .news_large {
        grid-area: auto
    }
    .content_glossary {
        display: grid;
        grid-template-columns: minmax(220px, 285px) 1fr;
        grid-template-rows: repeat(2, 1fr);
        .content__main {
            grid-area: 1 / 2
        }
        #glossary-list {
            .content__list {
                max-height: 320px
            }
        }
    }
}

@media(max-width:900px) {
    .header {
        padding: 4px 0;
        padding-top: 6px
    }
    .breadcrumbs:not(.breadcrumbs_footer) {
        top: 49px
    }
    .cols3 {
        flex-wrap: wrap
    }
    .cols2 {
        gap: 20px
    }
    .cols2__image {
        width: 420px
    }
    .logo__img {
        width: auto;
        height: auto
    }
    .content_cabinet {
        flex-direction: column
    }
    .content_cabinet .content__col {
        position: static;
        width: 100%
    }
}

@media(max-width:768px) {
    .best-brokers__inner {
        grid-template-columns: repeat(2, 1fr)
    }
    .best-broker {
        min-height: 96.2px
    }
    .comments__grid {
        columns: 1
    }
    .advantage__descr {
        font-weight: 400
    }
    .cols2 {
        display: flex;
        flex-direction: column
    }
    .cols2_404 .cols2__image {
        width: auto;
        height: auto
    }
    .cols2_reversed {
        flex-direction: column-reverse
    }
    .page {
        flex-direction: column
    }
    .page__block_widget {
        display: flex;
        grid-area: w
    }
    .page__block_widget iframe {
        margin: 0 auto
    }
    .page__block_info {
        display: flex;
        justify-content: center;
        grid-area: a2
    }
    .page__block_news {
        grid-area: n
    }
    .page__block_broker {
        align-items: center;
        grid-area: a
    }
    .page__block_broker .page__block {
        break-inside: avoid
    }
    .page__block_broker .btn {
        width: 100%
    }
    .page__aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "n n" "w a2"
    }
    .page__aside .page__block:last-child {
        position: static
    }
    .page__aside_broker {
        grid-template-rows: auto 182px auto;
        grid-template-areas: "n n" "w a" "w a2"
    }
    .page_broker {
        display: flex
    }
    .news-wrapper_single {
        grid-template-rows: repeat(9, 160px)
    }
    .news-wrapper_single .news__title {
        font-size: 20px
    }
    .news-wrapper_single .news__content {
        transform: none
    }
    .news-wrapper_single .news__details {
        opacity: 1
    }
    .news-wrapper_single .news_large {
        grid-area: auto
    }
    .broker__logo {
        max-width: calc(100% - 52px)
    }
    .broker__title {
        padding-right: 100px
    }
    .broker__rate {
        top: 114px
    }
    .content__col {
        position: static;
        width: 100%
    }
    .content_search {
        flex-direction: column
    }
    .content_glossary {
        display: flex;
        .content__main {
            order: -1
        }
        .page__block_news {
            order: 2 !important
        }
    }
    .video__title {
        font-size: 18px;
        -webkit-line-clamp: 1
    }
    .video__descr {
        font-size: 15px;
        -webkit-line-clamp: 2
    }
    .video__content {
        padding: 12px;
        max-width: none;
        right: 0;
        left: 0;
        top: 0
    }
}

@media(max-width:620px) {
    .page__aside {
        display: flex
    }
    .page__block_news {
        order: -1
    }
    .last-comments .comment {
        position: absolute;
        width: calc(100% - 12px);
        margin-right: 24px
    }
}

@media(max-width:600px) {
    .footer__promo {
        flex-direction: column;
        align-items: start
    }
}

@media(max-width:567px) {
    .text ul,
    .text ol {
        padding-left: 8px
    }
    .video__play {
        width: 76px;
        height: 76px
    }
    .video__play:before {
        width: 32px;
        height: 32px
    }
    .galery__nav {
        max-width: calc(100% - 64px)
    }
    .flickity-prev-next-button {
        width: 28px
    }
    .page__cols2 {
        flex-direction: column
    }
    .control-bar_search {
        flex-direction: column
    }
}

@media(max-width:480px) {
    .text ul,
    .text ol {
        padding-left: 0
    }
    .footer__list {
        flex-direction: column
    }
    .footer__li:not(:first-child) {
        padding: 0
    }
    .footer__li:before {
        display: none
    }
    .video__title {
        font-size: 16px
    }
    .video__play {
        width: 60px;
        height: 60px
    }
    .video__play:before {
        width: 24px;
        height: 24px
    }
    .input__field {
        min-width: 240px
    }
    .pop-up__body {
        max-width: 100%
    }
    .pop-up__body:not(.pop-up__body_search) {
        width: auto
    }
    .faq__btn {
        padding: 8px 0
    }
    .faq__body {
        margin-left: 6px;
        padding-left: 12px
    }
    .galery__nav {
        width: 100%
    }
    .news-wrapper_single {
        grid-template-columns: 1fr;
        grid-template-rows: auto
    }
    .news-wrapper_single .news {
        min-height: 220px
    }
    .news-wrapper_single .news__title {
        font-size: 20px
    }
    .news-wrapper_single .news__content {
        transform: none
    }
    .news-wrapper_single .news__details {
        opacity: 1
    }
    .news-wrapper_single .news_large {
        grid-area: auto
    }
    .broker__rate {
        position: static
    }
    .broker__rate .rate__text {
        top: auto;
        left: calc(100% + 6px);
        transform: none
    }
    .cookie {
        max-width: calc(100dvw - 32px);
        left: 16px;
        bottom: 16px
    }
    .cookie__wrapper {
        flex-wrap: wrap
    }
}

@media(max-width:360px) {
    .page__block_characteristics {
        padding: 18px
    }
}

@media (max-width:900px) {
    .header_transparent .btn {
        color: var(--secondary-btn-text-color)
    }
    .cols2_instruments {
        display: flex
    }
    .cols2_instruments .cols2__col:last-child {
        display: none
    }
}

@media (max-width:480px) {
    .footer__links {
        flex-direction: column
    }
}

.list__item {
    align-items: start;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: var(--pop-up-bg-color);
    display: none;
    z-index: calc(var(--z-header) - 1);
}

@media (hover:none) {
    .news .news__content {
        transform: none
    }
    .news .news__details {
        opacity: 1
    }
}

.page__block_table {
    width: 100%;
    overflow: auto;
}

.section__subtitle_note {
    font-size: 14px;
    font-weight: 400;
}

.cols3_about {
    margin: 0;
}

.footer__wrapper {
    position: relative;
}

.cols3_about {
    display: flex;
    flex-wrap: wrap;
}

.cols3_about.cols3__col {
    flex-grow: 1;
    flex-basis: 220px
}

.content__row-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.content__row-inputs.input {
    flex-grow: 1;
    flex-basis: 220px
}

.text ol li:before {
    left: auto;
    right: calc(100% - 14px);
}

.text__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pop-up-bg-color);
}

.filter__window {
    --filter-padding-v: 18px;
    --filter-padding-h: 24px;
    --filter-width: 320px;
    display: flex;
    height: 100%;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    background: var(--card-bg-color);
    height: 100%;
    min-width: var(--filter-width);
    max-width: var(--filter-width);
    transform: translateX(100%);
    transition: transform .3s ease-in-out;
    padding: var(--filter-padding-v) var(--filter-padding-h);
    overflow-y: scroll;
    border-radius: 20px 0 0 20px;
    scrollbar-gutter: stable;
}

.filter__title {
    margin-bottom: 24px;
}

.filter__close {
    position: absolute;
    top: 8px;
    right: 8px;
}

.--active-pop-up .filter__window {
    transform: none;
}

.faq_mini .faq__btn {
    font-size: 18px;
    padding: 8px 6px;
    border-radius: 4px;
    padding-top: 8px;
}

.faq_mini .faq__content {
    padding: 4px 0;
}

.filter__cell {
    margin: 12px 0;
}

.faq__content {
    display: none;
}

.faq__content .checkbox {
    margin-bottom: 8px;
}

.faq__content .checkbox__text {
    font-size: 14px;
}

.filter__footer {
    display: flex;
    gap: 12px;
    justify-content: start;
    position: fixed;
    bottom: 0;
    right: 0;
    width: var(--filter-width);
    padding: 8px var(--filter-padding-h);
    background: var(--card-bg-color);
    border-top: 1px solid var(--main-border-color);
    border-radius: 12px 12px 0 20px;
}

.filter__footer .btn {
    padding: 10px 16px;
    gap: 2px;
}

.filter__footer .btn .icon {
    background-color: currentColor;
}

.filter__wrapper {
    flex: 1;
    padding-bottom: 32px;
}

.btn_clear {
    background-color: var(--red-500);
}

.btn_clear:not(:disabled):hover {
    box-shadow: 0 0 0 4px #f8251669;
}

.btn_filter {
    min-height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.faqs_2cols {
    flex-direction: row;
    flex-wrap: wrap;
}

.faqs_2cols .faq {
    flex: 1;
    flex-basis: 400px;
}

.tools {
    flex-wrap: wrap;
    display: flex;
    gap: 20px;
}

.tool {
    display: grid;
    place-items: center;
    height: 180px;
    position: relative;
    background-color: #2d78f3;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--main-border-color);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;
    flex: 1;
    flex-basis: 180px;
    transition: .2s opacity;
    text-align: center;
}

.tool__icon {
    width: 140px;
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .2;
    background-color: #fff;
    aspect-ratio: 1;
    mask-position: center;
    -webkit-mask-position: center;
}

.faq {
    scroll-margin-top: 100px;
}

.select {
    padding: 8px;
    color: var(--select-text-color);
    border: 1px solid var(--select-border-color);
    background-color: var(--select-bg-color);
    border-radius: 4px;
    cursor: pointer;
    &:focus-visible {
        border-color: var(--accent-color);
        outline: none
    }
}

.faq__body>div {
    :where(ol,
    ul):not(:last-child) {
        padding-bottom: 20px
    }
    :where(ol,
    ul):not(:first-child) {
        padding-top: 20px
    }
}

.input__field_small {
    padding: 6px 8px;
    border-radius: 4px;
    line-height: 100%;
    min-height: auto;
    font-size: 16px;
}

.input__field_small::placeholder {
    color: rgba(0, 0, 0, .5);
}

.input:has(>.btn_reset) {
    .btn_reset {
        display: none;
        position: absolute;
        top: 50%;
        right: 0;
        width: 24px;
        height: calc(100% + 12px);
        transform: translateY(-50%);
        .icon {
            margin: 0 auto;
            background-color: var(--text-color)
        }
    }
    .input__field {
        padding-right: 24px
    }
}

.checkbox__count {
    font-size: 12px;
    color: var(--text-color);
    opacity: .4;
}

#commentform {
    .acf-field-65dcb09ffdf1b {
        display: none;
        input {
            appearance: none;
            visibility: hidden;
            pointer-events: none
        }
    }
    .acf-field-65dca95232d14 {
        position: relative;
        display: block;
        margin: 0;
        .acf-label {
            display: none;
            visibility: hidden
        }
        .acf-input-prepend {
            padding: 0;
            background-color: transparent;
            border: none;
            min-height: auto
        }
        &::after {
            right: auto;
            left: calc(100% + 4px);
            transform: none;
            font-size: 18px
        }
    }
    .--form-author {
        order: 1
    }
    .--form-email {
        order: 2
    }
    .--form-comment_field {
        order: 3
    }
    .--form-checkbox {
        order: 5
    }
    .--form-submit {
        order: 6
    }
    .acf-comment-fields {
        order: 4
    }
}

.rate__star:focus-visible {
    background-color: var(--yellow-700);
}

.checkbox__input:focus-visible~.checkbox__box {
    border-color: var(--accent-color);
}

#search_result {
    display: none;
    height: auto;
}

.search-result__li:first-child {
    .line {
        display: none
    }
}

.icon_spinner {
    display: block;
    margin: 0 auto;
    background-color: var(--accent-color);
}

.search-result>a.link {
    display: block;
    width: fit-content;
    margin-top: 16px;
}

.link {
    color: var(--accent-color);
    text-decoration: none;
}

.link:active {
    text-decoration: underline;
}

.scroll-down {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 72px;
    height: 72px;
    display: block;
    background: url(../images/scroll-down.gif);
    background-size: contain;
    transition: .2s opacity, .2s scale;
}

#how-does-invest-finance-work {
    scroll-margin-top: 100px;
}

.text_privacy-policy {
    gap: 16px;
    .h3 {
        margin-top: 24px;
        margin-bottom: -8px
    }
}

.container__header {
    max-width: 800px;
    margin-bottom: 40px;
}

.analytics {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.analytics__col {
    flex: 1;
}

.analytics__col-news {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 20px;
}

.last-news {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}

.last-news__wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.last-news__title {
    display: contents;
    font-size: 22px;
    font-weight: 400;
}

.forecast {
    font-size: 16px;
    line-height: 140%;
    color: var(--text-color);
}

.forecast__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--title-color);
}

.forecast__title {
    font-weight: 600;
    color: inherit;
    overflow: hidden;
    box-sizing: content-box;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color .1s;
}

.forecast__details {
    display: flex;
    gap: 8px;
}

.content__filter {
    padding: 12px 0 0 0;
    margin-inline: 10px;
    margin-bottom: -4px;
    .input {
        margin-bottom: 12px
    }
}

.content_glossary {
    flex-wrap: wrap
}

#glossary-list {
    .content__list {
        overflow: auto;
        max-height: 320px;
        scrollbar-width: thin;
        scrollbar-color: var(--accent-color) transparent
    }
}

@media (hover:hover) {
    .tool:hover {
        opacity: .8
    }
    .menu__link:hover {
        color: var(--accent-color)
    }
    .link:hover {
        text-decoration: underline
    }
    .scroll-down:hover {
        scale: 1.2;
        opacity: .6
    }
    .forecast__wrapper:hover {
        .forecast__title {
            color: var(--accent-color);
            text-decoration: underline
        }
    }
}

@media (max-width:420px) {
    .tool {
        height: 160px;
        flex-basis: 140px
    }
    .tool__icon {
        width: 100px;
        height: 100px
    }
}

@media (max-width:614px) {
    .hero {
        padding-top: 160px
    }
    .analytics__col-news {
        display: flex;
        overflow-x: scroll;
        padding-bottom: 8px;
        margin-bottom: 20px;
        .news {
            min-width: 285px
        }
    }
    .analytics {
        display: block
    }
}

@media(max-width:1224px) {
    .burger {
        display: flex
    }
    .header__bottom {
        position: absolute;
        padding: 8px;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background-color: var(--grey-50);
        box-shadow: 0 4px 20px 10px rgba(0, 0, 0, .05);
        border-top: 1px solid var(--grey-300);
        border-radius: 0 0 12px 12px;
        max-height: calc(100dvh - 50px);
        overflow: auto
    }
    .header__registration {
        display: none
    }
    .header__registration-mobi {
        display: block
    }
    .header_transparent .header__registration-mobi .btn {
        color: var(--grey-50);
        background-color: rgba(var(--main-btn-bg-color), 1)
    }
    .header-dropdown {
        position: static;
        box-shadow: none;
        border-radius: 0;
        border: none;
        padding: 0;
        background-color: transparent;
        color: #000
    }
    .header-dropdown__link {
        padding: 8px;
        padding-left: 32px
    }
    .header__wrapper {
        margin: 0
    }
    .news-wrapper__mesh>*:nth-child(1) {
        grid-area: auto
    }
    .mobile-news-slider {
        display: flex;
        overflow-x: scroll;
        padding-bottom: 8px
    }
    .mobile-news-slider.news {
        min-width: 285px
    }
}

@media (prefers-reduced-motion:no-preference) {
    body,
    html {
        scroll-behavior: smooth
    }
}

@container news (min-height:300px) {
    :has(.news) {
        padding: 16px
    }
    .news__title {
        font-size: 32px
    }
    .news__content {
        transform: none;
        gap: 8px
    }
    .news__details {
        opacity: 1
    }
}

@container (min-height:300px) {
    .news {
        opacity: 0
    }
}

img.lazyload {
    background-size: cover;
}

.comment__footer {
    margin-top: 10px !important;
    /* Добавляет отступ сверху */
    padding-top: 5px !important;
    /* Если нужен дополнительный внутренний отступ */
    */
}