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

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

a img,fieldset,img {
    border: none
}

input[type=email],input[type=password],input[type=tel],input[type=text],textarea {
    -webkit-appearance: none;
    box-shadow: none
}

button,input[type=submit] {
    cursor: pointer
}

button::-moz-focus-inner,input[type=submit]::-moz-focus-inner {
    border: 0;
    padding: 0
}

button {
    background: none
}

textarea {
    overflow: auto
}

button,input {
    border: 0;
    margin: 0;
    padding: 0
}

a,a:focus,button,div,h1,h2,h3,h4,h5,h6,input,select,span,textarea {
    outline: none
}

ol,ul {
    list-style-type: none
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

html {
    box-sizing: border-box
}

*,:after,:before {
    box-sizing: inherit
}

.slick-slider {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.slick-list,.slick-slider {
    display: block;
    position: relative
}

.slick-list {
    margin: 0;
    overflow: hidden;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,.slick-slider .slick-track {
    transform: translateZ(0)
}

.slick-track {
    display: block;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0
}

.slick-track:after,.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    border: 1px solid transparent;
    display: block;
    height: auto
}

.slick-arrow.slick-hidden {
    display: none
}

.nice-select {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left!important;
    transition: all .2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto
}

.nice-select:hover {
    border-color: #dbdbdb
}

.nice-select.open,.nice-select:active,.nice-select:focus {
    border-color: #999
}

.nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: "";
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: rotate(45deg);
    transform-origin: 66% 66%;
    transition: all .15s ease-in-out;
    width: 5px
}

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

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0)
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none
}

.nice-select.disabled:after {
    border-color: #ccc
}

.nice-select.wide {
    width: 100%
}

.nice-select.wide .list {
    left: 0!important;
    right: 0!important
}

.nice-select.right {
    float: right
}

.nice-select.right .list {
    left: auto;
    right: 0
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px
}

.nice-select.small:after {
    height: 4px;
    width: 4px
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px
}

.nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68,68,68,.11);
    box-sizing: border-box;
    left: 0;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: scale(.75) translateY(-21px);
    transform-origin: 50% 0;
    transition: all .2s cubic-bezier(.5,0,0,1.25),opacity .15s ease-out;
    z-index: 9
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent!important
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all .2s
}

.nice-select .option.focus,.nice-select .option.selected.focus,.nice-select .option:hover {
    background-color: #f6f6f6
}

.nice-select .option.selected {
    font-weight: 700
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default
}

.no-csspointerevents .nice-select .list {
    display: none
}

.no-csspointerevents .nice-select.open .list {
    display: block
}

.noUi-target,.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.noUi-target {
    direction: ltr;
    position: relative
}

.noUi-base,.noUi-connects {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

.noUi-connects {
    overflow: hidden;
    z-index: 0
}

.noUi-connect,.noUi-origin {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    width: 100%;
    will-change: transform;
    z-index: 1
}

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
    left: auto;
    right: 0
}

.noUi-vertical .noUi-origin {
    width: 0
}

.noUi-horizontal .noUi-origin {
    height: 0
}

.noUi-handle {
    position: absolute
}

.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin {
    transition: transform .3s
}

.noUi-state-drag * {
    cursor: inherit!important
}

.noUi-horizontal {
    height: 18px
}

.noUi-horizontal .noUi-handle {
    height: 28px;
    left: -17px;
    top: -6px;
    width: 34px
}

.noUi-vertical {
    width: 18px
}

.noUi-vertical .noUi-handle {
    height: 34px;
    left: -6px;
    top: -17px;
    width: 28px
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    left: auto;
    right: -17px
}

.noUi-target {
    background: #fafafa;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb
}

.noUi-connects {
    border-radius: 3px
}

.noUi-connect {
    background: #3fb8af
}

.noUi-draggable {
    cursor: ew-resize
}

.noUi-vertical .noUi-draggable {
    cursor: ns-resize
}

.noUi-handle {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;
    cursor: default
}

.noUi-active {
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb
}

.noUi-handle:after,.noUi-handle:before {
    background: #e8e7e6;
    content: "";
    display: block;
    height: 14px;
    left: 14px;
    position: absolute;
    top: 6px;
    width: 1px
}

.noUi-handle:after {
    left: 17px
}

.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before {
    height: 1px;
    left: 6px;
    top: 14px;
    width: 14px
}

.noUi-vertical .noUi-handle:after {
    top: 17px
}

[disabled] .noUi-connect {
    background: #b8b8b8
}

[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target {
    cursor: not-allowed
}

.noUi-pips,.noUi-pips * {
    box-sizing: border-box
}

.noUi-pips {
    color: #999;
    position: absolute
}

.noUi-value {
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.noUi-value-sub {
    color: #ccc;
    font-size: 10px
}

.noUi-marker {
    background: #ccc;
    position: absolute
}

.noUi-marker-large,.noUi-marker-sub {
    background: #aaa
}

.noUi-pips-horizontal {
    height: 80px;
    left: 0;
    padding: 10px 0;
    top: 100%;
    width: 100%
}

.noUi-value-horizontal {
    transform: translate(-50%,50%)
}

.noUi-rtl .noUi-value-horizontal {
    transform: translate(50%,50%)
}

.noUi-marker-horizontal.noUi-marker {
    height: 5px;
    margin-left: -1px;
    width: 2px
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 15px
}

.noUi-pips-vertical {
    height: 100%;
    left: 100%;
    padding: 0 10px;
    top: 0
}

.noUi-value-vertical {
    padding-left: 25px;
    transform: translate(0,-50%,0)
}

.noUi-rtl .noUi-value-vertical {
    transform: translateY(50%)
}

.noUi-marker-vertical.noUi-marker {
    height: 2px;
    margin-top: -1px;
    width: 5px
}

.noUi-marker-vertical.noUi-marker-sub {
    width: 10px
}

.noUi-marker-vertical.noUi-marker-large {
    width: 15px
}

.noUi-tooltip {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    color: #000;
    display: block;
    padding: 5px;
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.noUi-horizontal .noUi-tooltip {
    bottom: 120%;
    left: 50%;
    transform: translate(-50%)
}

.noUi-vertical .noUi-tooltip {
    right: 120%;
    top: 50%;
    transform: translateY(-50%)
}

.mfp-bg {
    background: #0b0b0b;
    opacity: .8;
    overflow: hidden;
    z-index: 1042
}

.mfp-bg,.mfp-wrap {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

.mfp-wrap {
    -webkit-backface-visibility: hidden;
    outline: none!important;
    z-index: 1043
}

.mfp-container {
    box-sizing: border-box;
    height: 100%;
    left: 0;
    padding: 0 8px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%
}

.mfp-container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: left;
    vertical-align: middle;
    z-index: 1045
}

.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content {
    cursor: auto;
    width: 100%
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none!important
}

.mfp-preloader {
    color: #ccc;
    left: 8px;
    margin-top: -.8em;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 50%;
    width: auto;
    z-index: 1044
}

.mfp-preloader a {
    color: #ccc
}

.mfp-preloader a:hover {
    color: #fff
}

.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader {
    display: none
}

button.mfp-arrow,button.mfp-close {
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    display: block;
    outline: none;
    overflow: visible;
    padding: 0;
    touch-action: manipulation;
    z-index: 1046
}

button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.mfp-close {
    color: #fff;
    font-family: Arial,Baskerville,monospace;
    font-size: 28px;
    font-style: normal;
    height: 44px;
    line-height: 44px;
    opacity: .65;
    padding: 0 0 18px 10px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 44px
}

.mfp-close:focus,.mfp-close:hover {
    opacity: 1
}

.mfp-close.nice-select.open,.mfp-close:active {
    top: 1px
}

.mfp-close-btn-in .mfp-close {
    color: #333
}

.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close {
    color: #fff;
    padding-right: 6px;
    right: -6px;
    text-align: right;
    width: 100%
}

.mfp-counter {
    color: #ccc;
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap
}

.mfp-arrow {
    -webkit-tap-highlight-color: transparent;
    height: 110px;
    margin: -55px 0 0;
    opacity: .65;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 90px
}

.mfp-arrow.nice-select.open,.mfp-arrow:active {
    margin-top: -54px
}

.mfp-arrow:focus,.mfp-arrow:hover {
    opacity: 1
}

.mfp-arrow:after,.mfp-arrow:before {
    border: inset transparent;
    content: "";
    display: block;
    height: 0;
    left: 0;
    margin-left: 35px;
    margin-top: 35px;
    position: absolute;
    top: 0;
    width: 0
}

.mfp-arrow:after {
    border-bottom-width: 13px;
    border-top-width: 13px;
    top: 8px
}

.mfp-arrow:before {
    border-bottom-width: 21px;
    border-top-width: 21px;
    opacity: .7
}

.mfp-arrow-left {
    left: 0
}

.mfp-arrow-left:after {
    border-right: 17px solid #fff;
    margin-left: 31px
}

.mfp-arrow-left:before {
    border-right: 27px solid #3f3f3f;
    margin-left: 25px
}

.mfp-arrow-right {
    right: 0
}

.mfp-arrow-right:after {
    border-left: 17px solid #fff;
    margin-left: 39px
}

.mfp-arrow-right:before {
    border-left: 27px solid #3f3f3f
}

.mfp-iframe-holder {
    padding-bottom: 40px;
    padding-top: 40px
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    max-width: 900px;
    width: 100%
}

.mfp-iframe-holder .mfp-close {
    top: -40px
}

.mfp-iframe-scaler {
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
    width: 100%
}

.mfp-iframe-scaler iframe {
    background: #000;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

img.mfp-img {
    box-sizing: border-box;
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    padding: 40px 0;
    width: auto
}

.mfp-figure,img.mfp-img {
    line-height: 0
}

.mfp-figure:after {
    background: #444;
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: -1
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px
}

.mfp-figure figure {
    margin: 0
}

.mfp-bottom-bar {
    cursor: auto;
    left: 0;
    margin-top: -36px;
    position: absolute;
    top: 100%;
    width: 100%
}

.mfp-title {
    word-wrap: break-word;
    color: #f3f3f3;
    line-height: 18px;
    padding-right: 36px;
    text-align: left
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

@media screen and (max-height: 300px),screen and (max-width:800px) and (orientation:landscape) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left:0;
        padding-right: 0
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0
    }

    .mfp-img-mobile .mfp-figure:after {
        bottom: 0;
        top: 0
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0,0,0,.6);
        bottom: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 3px 5px;
        position: fixed;
        top: auto
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }

    .mfp-img-mobile .mfp-close {
        background: rgba(0,0,0,.6);
        height: 35px;
        line-height: 35px;
        padding: 0;
        position: fixed;
        right: 0;
        text-align: center;
        top: 0;
        width: 35px
    }
}

@media (max-width: 900px) {
    .mfp-arrow {
        transform:scale(.75)
    }

    .mfp-arrow-left {
        transform-origin: 0
    }

    .mfp-arrow-right {
        transform-origin: 100%
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px
    }
}

.date-picker {
    border: 0;
    color: #303030;
    cursor: pointer;
    font-weight: 700;
    height: 25px;
    line-height: 25px;
    padding: 0 0 0 10px;
    position: relative;
    width: 170px;
    z-index: 2
}

.date-picker,.date-picker-wrapper {
    font-family: Arial,sans-serif;
    font-size: 12px
}

.date-picker-wrapper {
    background-color: #efefef;
    border: 1px solid #bfbfbf;
    box-shadow: 3px 3px 10px rgba(0,0,0,.5);
    box-sizing: initial;
    color: #aaa;
    line-height: 20px;
    padding: 5px 12px;
    position: absolute;
    z-index: 1
}

.dp-clearfix {
    clear: both;
    font-size: 0;
    height: 0
}

.date-picker-wrapper.inline-wrapper {
    box-shadow: none;
    display: inline-block;
    position: relative
}

.date-picker-wrapper.single-date {
    width: auto
}

.date-picker-wrapper.no-shortcuts {
    padding-bottom: 12px
}

.date-picker-wrapper.no-topbar {
    padding-top: 12px
}

.date-picker-wrapper .footer {
    font-size: 11px;
    padding-top: 3px
}

.date-picker-wrapper b {
    color: #666;
    font-weight: 700
}

.date-picker-wrapper a {
    color: #6bb4d6;
    text-decoration: underline
}

.date-picker-wrapper .month-name {
    text-transform: uppercase
}

.date-picker-wrapper .select-wrapper {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle
}

.date-picker-wrapper .select-wrapper:hover {
    text-decoration: underline
}

.date-picker-wrapper .month-element {
    display: inline-block;
    vertical-align: middle
}

.date-picker-wrapper .select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    left: 0;
    margin: 0;
    opacity: .01;
    outline: 0;
    padding: 0;
    position: absolute;
    text-transform: inherit;
    top: -1px
}

.date-picker-wrapper .month-wrapper {
    background-color: #fff;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    cursor: default;
    _overflow: hidden;
    padding: 5px;
    position: relative
}

.date-picker-wrapper .month-wrapper table,.date-picker-wrapper .month-wrapper table.month2 {
    float: left;
    width: 190px
}

.date-picker-wrapper .month-wrapper table td,.date-picker-wrapper .month-wrapper table th {
    line-height: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle
}

.date-picker-wrapper .month-wrapper table .day {
    color: #ccc;
    cursor: default;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 1px;
    padding: 5px 0
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,.date-picker-wrapper .month-wrapper table div.day.nextMonth {
    color: #999;
    cursor: default
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background-color: #9cdbf7
}

.date-picker-wrapper .month-wrapper table .week-name {
    font-weight: 100;
    height: 20px;
    line-height: 20px;
    text-transform: uppercase
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip {
    cursor: help!important
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip,.date-picker-wrapper .time label {
    white-space: nowrap
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
    color: #333;
    cursor: pointer
}

.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
    background-color: #cdecfa
}

.date-picker-wrapper .month-wrapper table .day.lastMonth,.date-picker-wrapper .month-wrapper table .day.nextMonth {
    display: none
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background-color: #ffe684
}

.date-picker-wrapper .month-wrapper table .day.real-today.checked,.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
    background-color: #70ccd5
}

.date-picker-wrapper table .caption {
    height: 40px
}

.date-picker-wrapper table .caption>th:first-of-type,.date-picker-wrapper table .caption>th:last-of-type {
    width: 27px
}

.date-picker-wrapper table .caption .next,.date-picker-wrapper table .caption .prev {
    cursor: pointer;
    padding: 0 5px
}

.date-picker-wrapper table .caption .next:hover,.date-picker-wrapper table .caption .prev:hover {
    background-color: #ccc;
    color: #fff
}

.date-picker-wrapper .gap {
    background-color: red;
    float: left;
    font-size: 0;
    height: 100%;
    height: 0;
    line-height: 0;
    margin: 0 10px -10px;
    position: relative;
    top: -5px;
    visibility: hidden;
    width: 15px;
    z-index: 1
}

.date-picker-wrapper .gap .gap-lines {
    height: 100%;
    overflow: hidden
}

.date-picker-wrapper .gap .gap-line {
    height: 15px;
    position: relative;
    width: 15px
}

.date-picker-wrapper .gap .gap-line .gap-1 {
    border-bottom: 8px solid #eee;
    border-left: 8px solid #fff;
    border-top: 8px solid #eee;
    height: 0;
    z-index: 1
}

.date-picker-wrapper .gap .gap-line .gap-2 {
    border-left: 8px solid transparent;
    border-top: 8px solid #fff;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2
}

.date-picker-wrapper .gap .gap-line .gap-3 {
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    height: 0;
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 2
}

.date-picker-wrapper .gap .gap-top-mask {
    background-color: #eee;
    height: 1px;
    left: 1px;
    position: absolute;
    top: -1px;
    width: 6px;
    z-index: 3
}

.date-picker-wrapper .gap .gap-bottom-mask {
    background-color: #eee;
    bottom: -1px;
    height: 1px;
    left: 7px;
    position: absolute;
    width: 6px;
    z-index: 3
}

.date-picker-wrapper .selected-days {
    display: none
}

.date-picker-wrapper .drp_top-bar {
    line-height: 1.4;
    padding: 10px 40px 10px 0;
    position: relative
}

.date-picker-wrapper .drp_top-bar .error-top,.date-picker-wrapper .drp_top-bar .normal-top {
    display: none
}

.date-picker-wrapper .drp_top-bar .default-top {
    display: block
}

.date-picker-wrapper .drp_top-bar.error .default-top {
    display: none
}

.date-picker-wrapper .drp_top-bar.error .error-top {
    color: red;
    display: block
}

.date-picker-wrapper .drp_top-bar.normal .default-top {
    display: none
}

.date-picker-wrapper .drp_top-bar.normal .normal-top {
    display: block
}

.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
    color: #333
}

.date-picker-wrapper .drp_top-bar .apply-btn {
    background: #0095cd;
    background: -moz-linear-gradient(top,#00adee,#0078a5);
    border: 1px solid #0076a3;
    border-radius: 4px;
    color: #d9eef7;
    color: #fff;
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00adee",endColorstr="#0078a5");
    font-size: 12px;
    line-height: normal;
    margin: 0;
    padding: 3px 5px;
    position: absolute;
    right: 0;
    top: 6px
}

.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
    background: #fff;
    background: -moz-linear-gradient(top,#fff,#ededed);
    border: 1px solid #b7b7b7;
    color: #606060;
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ededed")
}

.date-picker-wrapper .time {
    position: relative
}

.date-picker-wrapper.single-month .time {
    display: block
}

.date-picker-wrapper .time input[type=range] {
    height: 20px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 129px
}

.date-picker-wrapper .time1,.time2 {
    padding: 0 5px;
    text-align: center;
    width: 180px
}

.date-picker-wrapper .time1 {
    float: left
}

.date-picker-wrapper .time2 {
    float: right
}

.date-picker-wrapper .hour,.minute {
    text-align: right
}

.date-picker-wrapper .hide {
    display: none
}

.date-picker-wrapper .first-date-selected,.date-picker-wrapper .last-date-selected {
    background-color: #49e!important;
    color: #fff!important
}

.date-picker-wrapper .date-range-length-tip {
    background-color: #ff0;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    display: none;
    -moz-filter: drop-shadow(0 0 3px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 0 3px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 0 3px rgba(0,0,0,.3));
    filter: drop-shadow(0 0 3px rgba(0,0,0,.3));
    font-size: 12px;
    line-height: 16px;
    margin-left: -8px;
    margin-top: -4px;
    padding: 0 6px;
    position: absolute
}

.date-picker-wrapper .date-range-length-tip:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ff0;
    bottom: -4px;
    content: "";
    left: 50%;
    margin-left: -4px;
    position: absolute
}

.date-picker-wrapper.two-months.no-gap .month1 .next,.date-picker-wrapper.two-months.no-gap .month2 .prev {
    display: none
}

.date-picker-wrapper .week-number {
    color: #999;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 1px;
    padding: 5px 0
}

.date-picker-wrapper .week-number.week-number-selected {
    color: #49e;
    font-weight: 700
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fcfcfd;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 14px;
    line-height: 1.71429;
    min-width: 375px
}

body.dark {
    background: #1b1d21;
    color: #fcfcfd
}

a {
    text-decoration: none
}

img,svg {
    vertical-align: middle
}

.outer {
    min-height: 100vh;
    overflow: hidden
}

.outer,.outer__inner {
    display: flex;
    flex-direction: column
}

.outer__inner {
    flex-grow: 1
}

.anchor {
    left: 0;
    position: absolute;
    right: 0
}

.center {
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 0px;
    width: 100%
}

@media only screen and (max-width: 1023px) {
    .center {
        padding:0 20px
    }
}

@media only screen and (max-width: 767px) {
    .center {
        padding:0 10px
    }
}

.some-icon-dark,body.dark .some-icon {
    display: none
}

body.dark .some-icon-dark {
    display: inline-block
}

.play {
    background: #fcfcfd;
    border-radius: 50%;
    box-shadow: 0 8px 16px -8px hsla(0,0%,6%,.1);
    height: 80px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80px;
    z-index: 3
}

@media only screen and (max-width: 767px) {
    .play {
        height:48px;
        width: 48px
    }
}

.play .icon {
    fill: #777e90;
    height: 24px;
    transition: all .2s;
    width: 24px
}

@media only screen and (max-width: 767px) {
    .play .icon {
        height:12px;
        width: 12px
    }
}

.play:hover .icon {
    fill: #3772ff;
    transform: scale(1.2)
}

.play_small {
    height: 48px;
    width: 48px
}

.play_small .icon {
    height: 12px;
    width: 12px
}

.select {
    background: #fcfcfd;
    border: none;
    border-radius: 12px;
    box-shadow: inset 0 0 0 2px #e6e8ec;
    float: none;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    line-height: 48px;
    opacity: 1;
    padding: 0 48px 0 16px;
    width: 100%
}

.select:after {
    display: none
}

.select:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath fill-rule='evenodd' d='M9.207.793a1 1 0 0 0-1.414 0L5 3.586 2.207.793A1 1 0 1 0 .793 2.207l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0 0-1.414z' fill='%23777e91'/%3E%3C/svg%3E") no-repeat 50% 50%/10px auto;
    border-radius: 50%;
    content: "";
    height: 32px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .2s;
    width: 32px
}

body.dark .select {
    -webkit-appearance: none;
    background: #141416;
    box-shadow: inset 0 0 0 2px #353945
}

body.dark .select:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath fill-rule='evenodd' d='M9.207.793a1 1 0 0 0-1.414 0L5 3.586 2.207.793A1 1 0 1 0 .793 2.207l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0 0-1.414z' fill='%23FCFCFD'/%3E%3C/svg%3E")
}

.select.open,body.dark .select.open {
    box-shadow: inset 0 0 0 2px #777e90
}

.select.open:before {
    transform: translateY(-50%) rotate(180deg)
}

.select .current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select .list {
    background: #fcfcfd;
    border: 2px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(35,38,47,.1);
    margin-top: 2px;
    right: 0
}

body.dark .select .list {
    background: #141416;
    border-color: #353945;
    box-shadow: 0 4px 12px rgba(20,20,22,.1)
}

.select .option {
    font-weight: 500;
    line-height: 1.4;
    min-height: auto;
    padding: 10px 14px
}

.select .option.focus,.select .option.selected.focus,.select .option:hover {
    background: #f4f5f6
}

body.dark .select .option.focus,body.dark .select .option.selected.focus,body.dark .select .option:hover {
    background: #23262f
}

.select .option.selected {
    color: #3772ff;
    font-weight: 500
}

.slick-arrow {
    border-radius: 50%;
    font-size: 0;
    height: 40px;
    position: absolute;
    transition: all .2s;
    width: 40px;
    z-index: 2
}

.slick-arrow path {
    fill: #777e90;
    position: relative;
    transition: fill .2s;
    z-index: 2
}

.slick-arrow:hover {
    box-shadow: inset 0 0 0 2px #e6e8ec
}

body.dark .slick-arrow:hover {
    box-shadow: inset 0 0 0 2px #353945
}

body.dark .slick-arrow:hover path {
    fill: #e6e8ec
}

.date-picker-wrapper {
    background: none;
    border: none;
    border-radius: 24px;
    box-shadow: 0 40px 32px -24px hsla(0,0%,6%,.12);
    font-family: Poppins,sans-serif;
    overflow: hidden;
    padding: 0;
    z-index: 20
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper {
        padding:0 19px;
        width: 262px!important
    }
}

body.dark .date-picker-wrapper {
    background: none
}

.date-picker-wrapper.single-month .month-wrapper {
    padding: 0 19px;
    width: 252px!important
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper.single-month .month-wrapper {
        margin:0 5px;
        padding: 0
    }
}

.date-picker-wrapper.single-month .month-wrapper table {
    width: 100%!important
}

@media only screen and (min-width: 768px) {
    .date-picker-wrapper.two-months .month-wrapper {
        display:flex;
        width: 600px!important
    }

    .date-picker-wrapper.two-months .month-wrapper table {
        flex: 0 0 calc(50% - 48px);
        margin: 0 24px;
        width: calc(50% - 48px)
    }
}

.date-picker-wrapper.single-date .day {
    border-radius: 50%!important
}

.date-picker-wrapper.single-date .day.first-date-selected:before,.date-picker-wrapper.single-date .day.last-date-selected:before {
    display: none
}

.date-picker-wrapper .month-wrapper {
    background: none;
    border: none;
    box-shadow: none
}

.date-picker-wrapper .month-wrapper table {
    display: block
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper .month-wrapper table {
        width:100%
    }
}

.date-picker-wrapper .month-wrapper table tbody,.date-picker-wrapper .month-wrapper table thead {
    display: block;
    width: 100%
}

.date-picker-wrapper .month-wrapper table tr {
    align-items: center;
    display: flex;
    height: 36px
}

.date-picker-wrapper .month-wrapper table td,.date-picker-wrapper .month-wrapper table th {
    align-items: center;
    display: flex;
    flex: 1;
    font-weight: 500;
    height: 100%;
    justify-content: center
}

.date-picker-wrapper .month-wrapper table thead tr:first-child {
    height: 36px
}

.date-picker-wrapper .month-wrapper table thead tr:first-child th:first-child,.date-picker-wrapper .month-wrapper table thead tr:first-child th:nth-child(3) {
    flex: 0 0 24px
}

.date-picker-wrapper .month-wrapper table .caption,.date-picker-wrapper .month-wrapper table .week-name {
    height: auto
}

.date-picker-wrapper .month-wrapper table .week-name {
    height: 40px
}

.date-picker-wrapper .month-wrapper table .week-name th {
    height: auto
}

.date-picker-wrapper .month-wrapper table .day {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0;
    transition: background .2s,color .2s;
    width: 100%
}

.date-picker-wrapper .month-wrapper table .day.valid.toMonth {
    color: #23262f
}

body.dark .date-picker-wrapper .month-wrapper table .day.valid.toMonth {
    color: #fcfcfd
}

.date-picker-wrapper .month-wrapper table .day:hover {
    background: #e6e8ec;
    color: #23262f!important
}

body.dark .date-picker-wrapper .month-wrapper table .day:hover {
    background: #141416;
    color: #fcfcfd!important
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background: #e6e8ec;
    border-radius: 0
}

body.dark .date-picker-wrapper .month-wrapper table .day.checked {
    background: #141416;
    color: #fcfcfd!important
}

.date-picker-wrapper .month-wrapper table .day.hovering {
    background: #e6e8ec!important;
    border-radius: 0
}

body.dark .date-picker-wrapper .month-wrapper table .day.hovering {
    background: #141416!important;
    color: #fcfcfd!important
}

.date-picker-wrapper .month-wrapper table .day.real-today,body.dark .date-picker-wrapper .month-wrapper table .day.real-today {
    background: #3772ff!important;
    color: #fcfcfd!important
}

.date-picker-wrapper .month-wrapper table .day.day.real-today.checked,.date-picker-wrapper .month-wrapper table .day.day.real-today.hovering {
    background: #3772ff
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected,.date-picker-wrapper .month-wrapper table .day.last-date-selected {
    background: #23262f!important;
    border-radius: 50%!important;
    color: #fcfcfd!important;
    position: relative
}

body.dark .date-picker-wrapper .month-wrapper table .day.first-date-selected,body.dark .date-picker-wrapper .month-wrapper table .day.last-date-selected {
    background: #fcfcfd!important;
    color: #23262f!important
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected:before,.date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
    background: #e6e8ec;
    bottom: 0;
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    z-index: -1
}

body.dark .date-picker-wrapper .month-wrapper table .day.first-date-selected:before,body.dark .date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
    background: #141416
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected:before {
    right: 0
}

.date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
    left: 0
}

.date-picker-wrapper .month-name {
    color: #23262f;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: capitalize
}

body.dark .date-picker-wrapper .month-name {
    color: #fcfcfd
}

.date-picker-wrapper .month-element:not(:last-child) {
    margin-right: 5px
}

.date-picker-wrapper .week-name {
    color: #777e90;
    font-size: 14px
}

.date-picker-wrapper .week-name th {
    font-weight: 500;
    text-transform: capitalize
}

.date-picker-wrapper .gap {
    display: none
}

.date-picker-wrapper table .caption .next:hover,.date-picker-wrapper table .caption .prev:hover {
    background: none
}

.date-picker-wrapper table .caption .next:hover path,.date-picker-wrapper table .caption .prev:hover path {
    fill: #3772ff
}

.date-picker-wrapper .footer {
    display: none
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-uppercase {
    text-transform: uppercase
}

.m-auto {
    margin: auto
}

.ml-auto {
    margin-left: auto
}

.mr-auto {
    margin-right: auto
}

.align-baseline {
    align-items: baseline
}

@media only screen and (max-width: 1179px) {
    .desktop-hide {
        display:none!important
    }
}

.desktop-show {
    display: none!important
}

@media only screen and (max-width: 1179px) {
    .desktop-show {
        display:block!important
    }

    .desktop-text-right {
        text-align: right!important
    }
}

@media only screen and (max-width: 1023px) {
    .tablet-hide {
        display:none!important
    }
}

.tablet-show {
    display: none!important
}

@media only screen and (max-width: 1023px) {
    .tablet-show {
        display:block!important
    }

    .tablet-text-right {
        text-align: right!important
    }
}

@media only screen and (max-width: 767px) {
    .mobile-hide {
        display:none!important
    }
}

.mobile-show {
    display: none!important
}

@media only screen and (max-width: 767px) {
    .mobile-show {
        display:block!important
    }

    .mobile-text-right {
        text-align: right!important
    }
}

[class^=section] {
    margin-bottom: 136px
}

@media only screen and (max-width: 1179px) {
    [class^=section] {
        margin-bottom:112px
    }
}

@media only screen and (max-width: 767px) {
    [class^=section] {
        margin-bottom:64px
    }
}

.section-bg {
    background: #f4f5f6;
    padding: 80px 0
}

@media only screen and (max-width: 1179px) {
    .section-bg {
        padding:60px 0
    }
}

@media only screen and (max-width: 767px) {
    .section-bg {
        padding:30px 0
    }
}

body.dark .section-bg {
    background: #1f2125;
}

.section-mb0 {
    margin-bottom: 0
}

@media only screen and (max-width: 1179px) {
    .section-mb0 {
        margin-bottom:0
    }
}

@media only screen and (max-width: 767px) {
    .section-mb0 {
        margin-bottom:0
    }
}

.section-padding {
    padding: 136px 0
}

@media only screen and (max-width: 1179px) {
    .section-padding {
        padding:112px 0
    }
}

@media only screen and (max-width: 767px) {
    .section-padding {
        padding:64px 0
    }
}

.h1,.h2,.h3,.h4,.hero {
    font-family: DM Sans,sans-serif;
    font-weight: 700
}

.hero {
    font-size: 96px;
    letter-spacing: -.02em;
    line-height: 1
}

@media only screen and (max-width: 1339px) {
    .hero {
        font-size:80px
    }
}

@media only screen and (max-width: 1179px) {
    .hero {
        font-size:64px
    }
}

.h1 {
    font-size: 64px;
    letter-spacing: -.02em;
    line-height: 1
}

@media only screen and (max-width: 767px) {
    .h1 {
        font-size:48px;
        line-height: 1.16667
    }
}

.h2 {
    font-size: 48px;
    letter-spacing: -.02em;
    line-height: 1.16667
}

@media only screen and (max-width: 767px) {
    .h2 {
        font-size:40px;
        letter-spacing: -.01em;
        line-height: 1.2
    }
}

.h3 {
    font-size: 40px;
    letter-spacing: -.01em;
    line-height: 1.2
}

@media only screen and (max-width: 767px) {
    .h3 {
        font-size:32px;
        line-height: 1.25
    }
}

.h4 {
    font-size: 32px;
    letter-spacing: -.01em;
    line-height: 1.25
}

[class^=category] {
    background: #23262f;
    border-radius: 4px;
    color: #fcfcfd;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 8px 8px 6px;
    text-transform: uppercase
}

.category-blue {
    background: #3772ff
}

.category-purple {
    background: #9757d7
}

.category-green {
    background: #58bd7d
}

.category-red {
    background: #ff6838
}

.category-gray {
    background: #b1b5c3
}

body.dark .category-gray {
    background: #353945;
    color: #fcfcfd
}

.category-stroke-green {
    background: none;
    box-shadow: inset 0 0 0 2px #58bd7d;
    color: #58bd7d
}

[class^=button] {
    align-items: center;
    background: #062a7e;
    /*border-radius: 24px;*/
    color: #fcfcfd;
    /*display: inline-flex;*/
    font-family: DM Sans,sans-serif;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    line-height: 1;
    padding: 0 24px;
    text-align: center;
    transition: all .2s
}

[class^=button]:hover {
    background: #0045ea
}

[class^=button].disabled,[class^=button]:disabled {
    opacity: .5;
    pointer-events: none
}

[class^=button] .icon {
    fill: #fcfcfd;
    height: 16px;
    transition: all .2s;
    width: 16px
}

[class^=button]:not([class^=button-circle]) .icon:first-child {
    margin-right: 12px
}

[class^=button]:not([class^=button-circle]) .icon:last-child {
    margin-left: 12px
}

.button-stroke {
    background: none;
    box-shadow: inset 0 0 0 2px #e6e8ec;
    color: #23262f
}

.button-stroke .icon {
    fill: #777e90
}

body.dark .button-stroke {
    box-shadow: inset 0 0 0 2px #28ab62;
    color: #fcfcfd
}

body.dark .button-stroke .icon {
    fill: #fcfcfd
}

.button-stroke.active,.button-stroke:hover {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f;
    color: #fcfcfd
}

.button-stroke.active .icon,.button-stroke:hover .icon {
    fill: #fcfcfd
}

body.dark .button-stroke.active,body.dark .button-stroke:hover {
    background: #353945;
    box-shadow: inset 0 0 0 2px #353945
}

.button-black {
    background: #141416
}

.button-black.active,.button-black:hover {
    background: #353945
}

body.dark .button-black {
    background: #f4f5f6;
    color: #23262f
}

body.dark .button-black .icon {
    fill: #23262f
}

body.dark .button-black.active,body.dark .button-black:hover {
    background: #e6e8ec
}

.button-red {
    background: #03a84e;
}

.button-red.active,.button-red:hover {
    background: #a80303;
}

.button-green {
    background: #097221;
}

.button-green.active,.button-green:hover {
    background: #23262f;
}

.button-white {
    background: #fcfcfd;
    color: #23262f
}

.button-white .icon {
    fill: #23262f
}

.button-white:hover {
    background: #f4f5f6
}

.button-small {
    border-radius: 20px;
    font-size: 14px;
    height: 40px;
    padding: 0 16px
}

.button-circle,.button-circle-stroke {
    border-radius: 50%;
    flex: 0 0 48px;
    height: 48px;
    padding: 0;
    width: 48px
}

.button-circle-stroke {
    background: transparent;
    box-shadow: inset 0 0 0 2px #e6e8ec;
    transition: all .2s
}

.button-circle-stroke .icon {
    fill: #777e90
}

.button-circle-stroke:hover {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f
}

.button-circle-stroke:hover .icon {
    fill: #fcfcfd
}

body.dark .button-circle-stroke {
    box-shadow: inset 0 0 0 2px #353945
}

body.dark .button-circle-stroke:hover {
    background: #353945
}

.button-circle-stroke.button-small {
    flex: 0 0 40px;
    height: 40px;
    width: 40px
}

[class^=stage] {
    color: #777e90;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 16px;
    text-transform: uppercase
}

.stage-small {
    font-size: 12px
}

.favorite {
    height: 16px;
    position: relative;
    width: 16px
}

.favorite .icon {
    fill: #777e90;
    height: 16px;
    transition: all .2s;
    width: 16px
}

.favorite:after {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M7.388 2.085a.67.67 0 0 1 1.224 0l1.453 3.368a.67.67 0 0 0 .561.401l3.727.288a.67.67 0 0 1 .373 1.179l-2.803 2.314a.667.667 0 0 0-.223.674l.863 3.486a.67.67 0 0 1-.985.735l-3.24-1.907a.665.665 0 0 0-.676 0l-3.24 1.907a.67.67 0 0 1-.985-.735l.863-3.486a.665.665 0 0 0-.223-.674L1.273 7.32a.67.67 0 0 1 .373-1.179l3.727-.288a.666.666 0 0 0 .561-.401l1.453-3.368z' fill='%23ffd166'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s;
    width: 100%
}

.favorite:hover .icon {
    fill: #ffd166
}

.favorite.active .icon {
    opacity: 0
}

.favorite.active:after {
    opacity: 1
}

.sorting {
    cursor: pointer;
    display: inline-block;
    padding-right: 16px;
    position: relative
}

.sorting:after,.sorting:before {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 4px;
    position: absolute;
    right: 0;
    width: 7px
}

.sorting:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1.148 3.804c.26.26.682.26.943 0l1.862-1.862 1.862 1.862a.668.668 0 0 0 .943-.943L4.425.528a.668.668 0 0 0-.943 0L1.148 2.862a.668.668 0 0 0 0 .943z' fill='%23777e91'/%3E%3C/svg%3E");
    top: calc(50% - 5px)
}

.sorting:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1.148.195c.26-.26.682-.26.943 0l1.862 1.862L5.815.195a.668.668 0 0 1 .943.943L4.425 3.471a.668.668 0 0 1-.943 0L1.148 1.137a.668.668 0 0 1 0-.943z' fill='%23777e91'/%3E%3C/svg%3E");
    top: calc(50% + 1px)
}

.sorting.up:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1.148 3.804c.26.26.682.26.943 0l1.862-1.862 1.862 1.862a.668.668 0 0 0 .943-.943L4.425.528a.668.668 0 0 0-.943 0L1.148 2.862a.668.668 0 0 0 0 .943z' fill='%2323262F'/%3E%3C/svg%3E")
}

.sorting.up:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1.148.195c.26-.26.682-.26.943 0l1.862 1.862L5.815.195a.668.668 0 0 1 .943.943L4.425 3.471a.668.668 0 0 1-.943 0L1.148 1.137a.668.668 0 0 1 0-.943z' fill='%23B1B5C3'/%3E%3C/svg%3E")
}

.sorting.down:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1.148 3.804c.26.26.682.26.943 0l1.862-1.862 1.862 1.862a.668.668 0 0 0 .943-.943L4.425.528a.668.668 0 0 0-.943 0L1.148 2.862a.668.668 0 0 0 0 .943z' fill='%23B1B5C3'/%3E%3C/svg%3E")
}

.sorting.down:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1.148.195c.26-.26.682-.26.943 0l1.862 1.862L5.815.195a.668.668 0 0 1 .943.943L4.425 3.471a.668.668 0 0 1-.943 0L1.148 1.137a.668.668 0 0 1 0-.943z' fill='%2323262F'/%3E%3C/svg%3E")
}

.header {
    box-shadow: inset 0 -1px 0 #e6e8ec;
    padding: 20px 0;
    position: relative;
    z-index: 10
}

@media only screen and (max-width: 767px) {
    .header {
        box-shadow:none;
        padding: 32px 0 24px
    }
}

body.dark .header {
    box-shadow: inset 0 -1px 0 #23262f;
}

@media only screen and (max-width: 767px) {
    body.dark .header {
        box-shadow:none
    }
}

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

@media only screen and (max-width: 1179px) {
    .header__center {
        padding:0 40px
    }
}

@media only screen and (max-width: 1023px) {
    .header__center {
        padding:0 20px
    }
}

@media only screen and (max-width: 767px) {
    .header__center {
        padding:0 24px
    }
}

.header__logo {
    margin-right: 32px
}

@media only screen and (max-width: 1023px) {
    .header__logo {
        margin-right:16px
    }
}

@media only screen and (max-width: 767px) {
    .header__logo {
        margin-right:auto;
        position: relative;
        z-index: 15
    }
}

.header__pic {
    width: 136px
}

@media only screen and (max-width: 1023px) {
    .header__pic {
        width:42px
    }

    .header__pic_desktop {
        display: none!important
    }
}

.header__pic_mobile {
    display: none
}

@media only screen and (max-width: 1023px) {
    .header__pic_mobile {
        display:inline-block
    }
}

.header__wrapper {
    align-items: center;
    border-left: 1px solid #e6e8ec;
    display: flex;
    flex-grow: 1;
    padding-left: 32px
}

@media only screen and (max-width: 1339px) {
    .header__wrapper {
        border:none;
        padding-left: 0
    }
}

@media only screen and (max-width: 767px) {
    .header__wrapper {
        flex-grow:0
    }
}

body.dark .header__wrapper {
    border-color: #353945
}

@media only screen and (max-width: 767px) {
    .header__wrapper>.header__btns {
        display:none
    }
}

.header__wrap {
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .header__wrap {
        background:#fcfcfd;
        display: flex;
        flex-direction: column;
        left: 0;
        min-height: calc(var(--vh, 1vh)*100);
        opacity: 0;
        padding: 100px 0 32px;
        position: absolute;
        top: 0;
        transition: all .2s;
        visibility: hidden;
        width: 100%;
        z-index: 10
    }

    body.dark .header__wrap {
        background: #141416
    }

    .header__wrap.visible {
        opacity: 1;
        visibility: visible
    }
}

.header__wrap>.header__button {
    display: none
}

@media only screen and (max-width: 767px) {
    .header__wrap>.header__button {
        margin:auto 24px 0
    }
}

.header__wrap .header__btns {
    display: none
}

@media only screen and (max-width: 767px) {
    .header__wrap .header__btns {
        display:flex
    }
}

.header__nav {
    display: flex
}

@media only screen and (max-width: 767px) {
    .header__nav {
        flex-direction:column
    }
}

.header__nav .header__item:not(:last-child) {
    margin-right: 40px
}

@media only screen and (max-width: 1179px) {
    .header__nav .header__item:not(:last-child) {
        margin-right:32px
    }
}

@media only screen and (max-width: 1023px) {
    .header__nav .header__item:not(:last-child) {
        margin-right:20px
    }
}

@media only screen and (max-width: 767px) {
    .header__nav .header__item:not(:last-child) {
        margin:0
    }
}

.header__item[href] {
    color: #03a84e;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    transition: all .2s
}

@media only screen and (max-width: 767px) {
    .header__item[href] {
        border-left:2px solid transparent;
        font-family: Poppins,sans-serif;
        font-size: 24px;
        font-weight: 600;
        line-height: 64px;
        padding: 0 22px
    }
}

.header__item[href].active,.header__item[href]:hover {
    color: #23262f
}

body.dark .header__item[href].active,body.dark .header__item[href]:hover {
    color: #fcfcfd
}

@media only screen and (max-width: 767px) {
    .header__item[href].active,.header__item[href]:hover {
        border-color:#3772ff
    }
}

.header__item_dropdown {
    position: relative
}

.header__item_settings {
    margin-right: 32px
}

@media only screen and (max-width: 1179px) {
    .header__item_settings {
        margin-right:16px
    }
}

@media only screen and (max-width: 1023px) {
    .header__item_settings {
        margin-right:4px
    }
}

.header__item_notifications,.header__item_settings,.header__item_user {
    position: relative
}

@media only screen and (max-width: 767px) {
    .header__item_notifications,.header__item_settings,.header__item_user {
        position:static
    }
}

.header__item_dropdown .header__head,.header__item_settings .header__head {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    align-items: center;
    display: flex;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    transition: color .2s
}

.header__item_dropdown .header__head .icon,.header__item_settings .header__head .icon {
    fill: #777e90;
    height: 16px;
    transition: all .2s;
    width: 16px
}

.header__item_dropdown .header__head:hover,.header__item_settings .header__head:hover {
    color: #23262f
}

.header__item_dropdown .header__head:hover .icon,.header__item_settings .header__head:hover .icon {
    fill: #23262f
}

body.dark .header__item_settings .header__head:hover,body.dark .header__item_dropdown .header__head:hover {
    color: #fcfcfd
}

body.dark .header__item_settings .header__head:hover .icon,body.dark .header__item_dropdown .header__head:hover .icon {
    fill: #fcfcfd
}

.header__item_dropdown .header__head {
    color: #777e90
}

@media only screen and (max-width: 767px) {
    .header__item_dropdown .header__head {
        border-left:2px solid transparent;
        font-family: Poppins,sans-serif;
        font-size: 24px;
        font-weight: 600;
        line-height: 64px;
        padding: 0 22px;
        width: 100%
    }
}

.header__item_dropdown .header__head .icon {
    margin-left: 4px
}

@media only screen and (max-width: 767px) {
    .header__item_dropdown .header__head .icon {
        height:32px;
        margin-left: auto;
        width: 32px
    }
}

.header__item_settings .header__head {
    text-transform: uppercase
}

body.dark .header__item_settings .header__head {
    color: #fcfcfd
}

.header__item_settings .header__head .icon {
    margin-left: 12px
}

@media only screen and (max-width: 1023px) {
    .header__item_settings .header__head .icon {
        margin-left:4px
    }
}

.header__item_notifications .header__head,.header__item_user .header__head {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    height: 40px;
    position: relative;
    width: 40px
}

.header__item_notifications .header__head .icon {
    fill: #777e90;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.header__item_notifications .header__head:hover .icon {
    fill: #23262f
}

body.dark .header__item_notifications .header__head:hover .icon {
    fill: #e6e8ec
}

.header__item_notifications .header__head.active:before {
    background: #58bd7d;
    border-radius: 50%;
    content: "";
    height: 12px;
    position: absolute;
    right: 0;
    top: 0;
    width: 12px
}

.header__item_user .header__head img {
    border-radius: 50%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.header__item_dropdown.active .header__head,.header__item_settings.active .header__head {
    color: #23262f
}

.header__item_dropdown.active .header__head .icon,.header__item_settings.active .header__head .icon {
    fill: #23262f;
    transform: rotate(180deg)
}

body.dark .header__item_settings.active .header__head,body.dark .header__item_dropdown.active .header__head {
    color: #fcfcfd
}

body.dark .header__item_settings.active .header__head .icon,body.dark .header__item_dropdown.active .header__head .icon {
    fill: #777e90
}

.header__item_notifications.active .header__head .icon {
    fill: #23262f
}

body.dark .header__item_notifications.active .header__head .icon {
    fill: #e6e8ec
}

.header__body {
    background: #fcfcfd;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(31,47,70,.1);
    opacity: 0;
    position: absolute;
    top: calc(100% + 20px);
    transition: all .3s;
    visibility: hidden
}

body.dark .header__body {
    background: #23262f
}

@media only screen and (max-width: 767px) {
    .header__body {
        top:100%
    }
}

.header__body:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9' fill='none'%3E%3Cpath d='M6.343 2.657 0 9h24l-6.343-6.343a8 8 0 0 0-11.314 0z' fill='%23fcfcfd'/%3E%3C/svg%3E") no-repeat 50% 100%/100% auto;
    bottom: 100%;
    content: "";
    height: 12px;
    position: absolute;
    width: 24px
}

body.dark .header__body:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9' fill='none'%3E%3Cpath d='M6.343 2.657 0 9h24l-6.343-6.343a8 8 0 0 0-11.314 0z' fill='%2323262F'/%3E%3C/svg%3E")
}

.header__item_dropdown .header__body {
    left: 50%;
    padding: 0 16px;
    transform: translate(-50%,10px);
    width: 256px
}

@media only screen and (max-width: 767px) {
    .header__item_dropdown .header__body {
        box-shadow:none;
        display: none;
        opacity: 1;
        padding: 0 24px;
        position: static;
        transform: translate(0);
        visibility: visible;
        width: 100%
    }

    body.dark .header__item_dropdown .header__body {
        background: none
    }
}

.header__item_dropdown .header__body:before {
    left: 50%;
    transform: translateX(-50%)
}

@media only screen and (max-width: 767px) {
    .header__item_dropdown .header__body:before {
        display:none
    }
}

.header__item_settings .header__body {
    left: 50%;
    padding: 16px;
    transform: translate(-50%,10px);
    width: 365px;
    z-index: 2
}

@media only screen and (max-width: 767px) {
    .header__item_settings .header__body {
        left:16px;
        right: 16px;
        transform: translateY(10px);
        width: auto
    }
}

body.dark .header__item_settings .header__body {
    background: #23262f
}

.header__item_settings .header__body:before {
    left: 50%;
    transform: translateX(-50%)
}

@media only screen and (max-width: 767px) {
    .header__item_settings .header__body:before {
        left:auto;
        right: 208px
    }
}

.header__item_notifications .header__body {
    border-radius: 24px;
    box-shadow: 0 16px 64px -24px rgba(31,47,70,.15);
    padding: 16px;
    right: -70px;
    transform: translateY(10px);
    width: 286px
}

@media only screen and (max-width: 767px) {
    .header__item_notifications .header__body {
        left:16px;
        right: 16px;
        width: auto
    }
}

.header__item_notifications .header__body:before {
    right: 78px
}

@media only screen and (max-width: 767px) {
    .header__item_notifications .header__body:before {
        right:111px
    }
}

.header__item_user .header__body {
    box-shadow: 0 16px 64px -24px rgba(31,47,70,.15);
    padding: 4px 16px;
    right: -40px;
    transform: translateY(10px);
    width: 256px
}

@media only screen and (max-width: 1179px) {
    .header__item_user .header__body {
        right:-20px
    }
}

@media only screen and (max-width: 1023px) {
    .header__item_user .header__body {
        right:0
    }
}

@media only screen and (max-width: 767px) {
    .header__item_user .header__body {
        left:16px;
        right: 16px;
        width: auto
    }
}

.header__item_user .header__body:before {
    right: 48px
}

@media only screen and (max-width: 1179px) {
    .header__item_user .header__body:before {
        right:28px
    }
}

@media only screen and (max-width: 1023px) {
    .header__item_user .header__body:before {
        right:10px
    }
}

@media only screen and (max-width: 767px) {
    .header__item_user .header__body:before {
        right:60px
    }
}

.header__item_settings.active .header__body {
    transform: translate(-50%)
}

@media only screen and (max-width: 767px) {
    .header__item_settings.active .header__body {
        transform:translate(0)
    }
}

.header__item_dropdown.active .header__body {
    transform: translate(-50%)
}

@media only screen and (max-width: 767px) {
    .header__item_dropdown.active .header__body {
        display:block;
        transform: translate(0)
    }
}

.header__item_notifications.active .header__body,.header__item_user.active .header__body {
    transform: translateY(0)
}

.header__item.active .header__body {
    opacity: 1;
    visibility: visible
}

.header__link {
    align-items: center;
    color: #353945;
    display: flex;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    padding: 16px 0;
    transition: color .2s
}

@media only screen and (max-width: 767px) {
    .header__link {
        border-radius:8px;
        font-family: Poppins,sans-serif;
        font-size: 16px;
        font-weight: 500;
        height: 56px;
        padding: 0 16px
    }
}

body.dark .header__link {
    color: #777e90
}

@media only screen and (max-width: 767px) {
    body.dark .header__link {
        color:#fcfcfd
    }
}

.header__link .icon {
    fill: #777e90;
    flex-shrink: 0;
    height: 20px;
    margin-right: 8px;
    transition: fill .2s;
    width: 20px
}

@media only screen and (max-width: 767px) {
    .header__link .icon {
        margin-right:12px
    }

    .header__link.active,.header__link:hover {
        background: #f4f5f6
    }
}

.header__link.active .icon,.header__link:hover .icon {
    fill: #353945
}

@media only screen and (max-width: 767px) {
    .header__link.active .icon,.header__link:hover .icon {
        fill:#777e90
    }
}

body.dark .header__link.active,body.dark .header__link:hover {
    color: #fcfcfd
}

body.dark .header__link.active .icon,body.dark .header__link:hover .icon {
    fill: #fcfcfd
}

@media only screen and (max-width: 767px) {
    body.dark .header__link.active,body.dark .header__link:hover {
        background:#353945
    }

    body.dark .header__link.active .icon,body.dark .header__link:hover .icon {
        fill: #fcfcfd
    }
}

.header__link:not(:last-child) {
    border-bottom: 1px solid #e6e8ec
}

@media only screen and (max-width: 767px) {
    .header__link:not(:last-child) {
        border:none
    }
}

body.dark .header__link:not(:last-child) {
    border-color: #353945
}

.header__row {
    display: flex;
    margin: 0 -24px
}

.header__col {
    flex: 0 0 50%;
    padding: 0 24px
}

.header__col:first-child {
    border-right: 1px solid #e6e8ec
}

body.dark .header__col:first-child {
    border-color: #353945
}

.header__category {
    color: #777e90;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667;
    margin-bottom: 4px
}

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

.header__currency,.header__language {
    color: #777e90;
    cursor: pointer;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    padding: 12px 0;
    transition: color .2s
}

.header__currency.active,.header__currency:hover,.header__language.active,.header__language:hover {
    color: #23262f
}

body.dark .header__currency.active,body.dark .header__currency:hover,body.dark .header__language.active,body.dark .header__language:hover {
    color: #fcfcfd
}

.header__currency:not(:last-child),.header__language:not(:last-child) {
    border-bottom: 1px solid #e6e8ec
}

body.dark .header__currency:not(:last-child),body.dark .header__language:not(:last-child) {
    border-color: #353945
}

.header__currency {
    padding-left: 28px;
    position: relative
}

.header__currency:before {
    background: #e6e8ec;
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 6px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background .2s;
    width: 8px
}

body.dark .header__currency:before {
    background: #353945
}

.header__currency.active:before,.header__currency:hover:before {
    background: #23262f
}

body.dark .header__currency.active:before,body.dark .header__currency:hover:before {
    background: #fcfcfd
}

.header__flag {
    margin-right: 8px
}

.header__item_notifications .header__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 4px
}

.header__notification {
    color: #23262f;
    display: block;
    padding: 12px 0;
    position: relative;
    transition: color .2s
}

body.dark .header__notification {
    color: #fcfcfd
}

.header__notification:hover,body.dark .header__notification:hover {
    color: #3772ff
}

.header__notification_new {
    padding-right: 24px
}

.header__notification_new:after {
    background: #58bd7d;
    border-radius: 50%;
    content: "";
    height: 12px;
    position: absolute;
    right: 0;
    top: 16px;
    width: 12px
}

.header__notification:not(:last-child) {
    border-bottom: 1px solid #e6e8ec
}

body.dark .header__notification:not(:last-child) {
    border-color: #353945
}

.header__subtitle {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

.header__date {
    color: #777e90;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6
}

.header__item_notifications .header__btns {
    display: flex;
    margin: 4px -8px 0
}

.header__item_notifications .header__btns .header__button {
    flex: 0 0 calc(50% - 16px);
    margin: 0 8px;
    width: calc(50% - 16px)
}

.header__el {
    color: #23262f;
    display: flex;
    padding: 12px 0;
    position: relative;
    transition: color .2s
}

body.dark .header__el {
    color: #fcfcfd
}

.header__el:hover {
    color: #3772ff
}

.header__el:not(:last-child) {
    border-bottom: 1px solid #e6e8ec
}

body.dark .header__el:not(:last-child) {
    border-color: #353945
}

.header__icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    margin-right: 8px;
    width: 20px
}

.header__icon .icon {
    fill: #777e90;
    height: 20px;
    width: 20px
}

.header__details {
    flex-grow: 1;
    padding-top: 2px
}

.header__line {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: -4px
}

.header__item_user .header__title {
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286
}

.header__content {
    color: #777e90;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 2px
}

.header__control {
    align-items: center;
    display: none
}

@media only screen and (max-width: 767px) {
    .header__control .header__button {
        display:none
    }
}

@media only screen and (max-width: 1179px) {
    .header__control>.theme {
        display:none
    }
}

.header__activity,.header__control .header__button,.header__control>.theme,.header__item_notifications {
    margin-right: 20px
}

@media only screen and (max-width: 1179px) {
    .header__activity,.header__control .header__button,.header__control>.theme,.header__item_notifications {
        margin-right:16px
    }
}

@media only screen and (max-width: 1023px) {
    .header__activity,.header__control .header__button,.header__control>.theme,.header__item_notifications {
        margin-right:8px
    }
}

@media only screen and (max-width: 767px) {
    .header__activity,.header__control .header__button,.header__control>.theme,.header__item_notifications {
        margin-right:12px
    }
}

.header__activity {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px
}

@media only screen and (max-width: 767px) {
    .header__activity {
        margin-right:4px
    }
}

.header__activity .icon {
    fill: #777e90;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.header__activity.active .icon,.header__activity:hover .icon {
    fill: #23262f
}

body.dark .header__activity.active .icon,body.dark .header__activity:hover .icon {
    fill: #fcfcfd
}

.header__btns {
    display: flex
}

@media only screen and (max-width: 767px) {
    .header__btns {
        margin:auto 16px 0
    }

    .header__btns .header__button {
        flex: 0 0 calc(50% - 16px);
        margin: 0 8px;
        width: calc(50% - 16px)
    }
}

.header__btns .header__button:not(:last-child) {
    margin-right: 8px
}

@media only screen and (max-width: 767px) {
    .header__btns .header__button:not(:last-child) {
        margin-right:8px
    }
}

.header__burger {
    display: none
}

@media only screen and (max-width: 767px) {
    .header__burger {
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        background: none;
        display: block;
        height: 32px;
        margin-left: 12px;
        position: relative;
        width: 32px;
        z-index: 15
    }

    .header__burger:after,.header__burger:before {
        background: #777e90;
        border-radius: 2px;
        content: "";
        height: 2px;
        left: 6px;
        position: absolute;
        top: 16px;
        transition: transform .2s;
        width: 20px
    }

    .header__burger:before {
        transform: translateY(-4px)
    }

    .header__burger:after {
        transform: translateY(3px)
    }

    .header__burger.active:before {
        transform: translateY(0) rotate(-45deg)
    }

    .header__burger.active:after {
        transform: translateY(0) rotate(45deg)
    }
}

.header_wide {
    box-shadow: none
}

.header_wide .header__center {
    max-width: 100%;
    padding: 0 20px
}

@media only screen and (max-width: 767px) {
    .header_wide .header__center {
        padding:0 24px
    }
}

.header.registered .header__btns {
    display: none
}

.header.registered .header__control,.header.registered .header__item_notifications .header__btns {
    display: flex
}

@media only screen and (max-width: 767px) {
    .header.registered .header__wrap>.header__button {
        display:flex
    }
}

.theme {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.theme__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0
}

.theme__input:checked+.theme__inner .theme__box {
    background: #3772ff
}

.theme__input:checked+.theme__inner .theme__box:before {
    background: #fcfcfd;
    transform: translate(20px,-50%)
}

.theme__inner {
    display: inline-block
}

.theme__box,.theme__inner {
    position: relative;
    transition: all .2s
}

.theme__box {
    background: #e6e8ec;
    border-radius: 12px;
    display: block;
    height: 20px;
    width: 40px
}

body.dark .theme__box {
    background: #353945
}

.theme__box:before {
    background: #3772ff;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s;
    width: 12px
}

.theme__icon,.theme__icon .icon {
    height: 24px;
    width: 24px
}

.theme__icon .icon {
    fill: #777e90;
    transition: fill .2s
}

.theme__icon .icon:nth-child(2) {
    display: none
}

.theme__icon:hover .icon {
    fill: #23262f
}

body.dark .theme__icon:hover .icon {
    fill: #fcfcfd
}

.main {
    overflow: hidden;
    padding-top: 160px;
    position: relative
}

@media only screen and (max-width: 1179px) {
    .main {
        padding-top:80px
    }
}

@media only screen and (max-width: 767px) {
    .main {
        padding-top:32px
    }
}

.main__wrap {
    margin-bottom: 143px;
    max-width: 545px;
    position: relative;
    z-index: 3
}

@media only screen and (max-width: 1179px) {
    .main__wrap {
        margin-bottom:80px;
        max-width: 420px
    }
}

@media only screen and (max-width: 767px) {
    .main__wrap {
        margin-bottom:16px
    }
}

.main__title {
    margin-bottom: 20px
}

.main__text {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px
}

@media only screen and (max-width: 1023px) {
    .main__text {
        max-width:300px
    }
}

.main__button {
    margin-bottom: 80px
}

@media only screen and (max-width: 1179px) {
    .main__button {
        margin-bottom:0
    }

    .main__scroll.scroll {
        display: none
    }
}

.main__bg {
    pointer-events: none;
    position: absolute;
    right: calc(50% - 750px);
    top: -145px;
    width: 913px
}

@media only screen and (max-width: 1179px) {
    .main__bg {
        right:calc(50% - 550px);
        top: -80px;
        width: 600px
    }
}

@media only screen and (max-width: 1023px) {
    .main__bg {
        right:calc(50% - 500px)
    }
}

@media only screen and (max-width: 767px) {
    .main__bg {
        position:static;
        width: auto
    }
}

@media only screen and (max-width: 767px) and (max-width:474px) {
    .main__bg {
        margin:0 -64px
    }
}

.main__bg img {
    width: 100%
}

.main__cards {
    background: #f4f5f6;
    border-radius: 24px;
    display: flex;
    padding: 24px 8px
}

@media only screen and (max-width: 1023px) {
    .main__cards {
        margin:0 -20px
    }
}

@media only screen and (max-width: 767px) {
    .main__cards {
        display:block;
        margin: -32px -16px 0;
        padding: 24px
    }
}

body.dark .main__cards {
    background: #23262f
}

.main__card {
    border-radius: 16px;
    color: #23262f;
    flex: 0 0 calc(33% - 32px);
    margin: 0 16px;
    padding: 32px;
    transition: all .2s;
    width: calc(25% - 32px)
}

@media only screen and (max-width: 1179px) {
    .main__card {
        padding:24px 16px
    }
}

@media only screen and (max-width: 1023px) {
    .main__card {
        padding:16px 0
    }
}

@media only screen and (max-width: 767px) {
    .main__card {
        display:flex;
        margin: 0;
        padding: 16px 24px;
        width: 100%
    }
}

body.dark .main__card {
    color: #fcfcfd
}

.main__card:hover {
    background: #fcfcfd;
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1)
}

@media only screen and (max-width: 1023px) {
    .main__card:hover {
        background:none;
        box-shadow: none
    }
}

body.dark .main__card:hover {
    background: #353945
}

@media only screen and (max-width: 1023px) {
    body.dark .main__card:hover {
        background:none
    }
}

.main__icon {
    align-items: center;
    display: flex;
    height: 40px;
    margin-bottom: 16px
}

@media only screen and (max-width: 767px) {
    .main__icon {
        flex-shrink:0;
        margin: 0 16px 0 0;
        width: 40px
    }
}

.main__icon img {
    max-height: 100%;
    max-width: 100%
}

@media only screen and (max-width: 767px) {
    .main__details {
        flex-grow:1
    }
}

.main__line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    margin-bottom: 4px
}

.main__subtitle {
    color: #777e90;
    margin-right: 12px
}

.main__negative,.main__positive {
    border-radius: 12px;
    color: #fcfcfd;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding: 2px 8px
}

.main__positive {
    background: #58bd7d
}

.main__negative {
    background: #ff6838
}

.main__price {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 4px
}

.main__money {
    font-size: 12px;
    line-height: 1.66667
}

.scroll {
    align-items: center;
    background: none;
    border: 2px solid #e6e8ec;
    border-radius: 50%;
    display: flex;
    height: 32px;
    justify-content: center;
    overflow: hidden;
    transition: border-color .2s;
    width: 32px
}

.scroll .icon {
    fill: #b1b5c3;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.scroll:hover {
    border-color: #23262f
}

.scroll:hover .icon {
    fill: #23262f
}

body.dark .scroll {
    border-color: #353945
}

body.dark .scroll:hover {
    border-color: #fcfcfd
}

body.dark .scroll:hover .icon {
    fill: #fcfcfd
}

.scroll__line {
    animation: arrowsDown 1.4s ease-out infinite;
    display: flex;
    flex-direction: column;
    transform: translateY(-23px)
}

.scroll__line .icon:not(:last-child) {
    margin-bottom: 24px
}

@keyframes arrowsDown {
    80% {
        transform: translateY(23px)
    }

    to {
        transform: translateY(23px)
    }
}

.learn {
    position: relative
}

@media only screen and (max-width: 767px) {
    .learn {
        padding-bottom:80px
    }
}

.learn__anchor {
    top: -30px
}

.learn__head {
    align-items: flex-start;
    display: flex;
    margin-bottom: 80px
}

@media only screen and (max-width: 1179px) {
    .learn__head {
        margin-bottom:48px
    }
}

@media only screen and (max-width: 767px) {
    .learn__head {
        display:block
    }
}

.learn__head .learn__button {
    flex-shrink: 0;
    margin-left: 40px
}

@media only screen and (max-width: 767px) {
    .learn__head .learn__button {
        bottom:0;
        left: 32px;
        margin: 0;
        position: absolute;
        right: 32px;
        width: calc(100% - 64px)
    }
}

.learn__wrap {
    flex-grow: 1
}

.learn__title {
    margin-bottom: 40px
}

@media only screen and (max-width: 767px) {
    .learn__title {
        margin-bottom:24px;
        text-align: center
    }

    .learn .nav {
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -32px;
        overflow: auto;
        overflow-x: auto;
        scrollbar-width: none
    }

    .learn .nav::-webkit-scrollbar {
        display: none
    }

    .learn .nav:after,.learn .nav:before {
        content: "";
        flex-shrink: 0;
        height: 1px;
        width: 32px
    }

    .learn .nav__link {
        flex-shrink: 0
    }
}

.learn .nav__link:not(:last-child) {
    margin-right: 24px
}

@media only screen and (max-width: 767px) {
    .learn .nav__link:not(:last-child) {
        margin-right:20px
    }
}

.learn__wrapper {
    margin: -32px -18px 0
}

@media only screen and (max-width: 1179px) {
    .learn__wrapper {
        margin:0 -16px
    }
}

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

@media only screen and (max-width: 1179px) {
    .learn__wrapper:after {
        display:none
    }
}

.learn__item {
    color: #23262f;
    display: block;
    float: right;
    margin: 32px 18px 0;
    width: calc(50% - 36px)
}

@media only screen and (max-width: 1179px) {
    .learn__item {
        float:left;
        margin: 0;
        width: 100%
    }
}

body.dark .learn__item {
    color: #fcfcfd
}

.learn__item:hover .learn__preview img {
    transform: scale(1.1)
}

.learn__item:hover .learn__subtitle {
    color: #3772ff
}

.learn__item:first-child {
    float: left
}

@media only screen and (max-width: 1179px) {
    .learn__item:first-child {
        float:left
    }
}

.learn__item:first-child .learn__preview {
    border-radius: 20px;
    margin-bottom: 40px
}

@media only screen and (max-width: 1179px) {
    .learn__item:first-child .learn__preview {
        border-radius:16px;
        margin-bottom: 24px
    }
}

.learn__item:first-child .learn__subtitle {
    font-family: DM Sans,sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 40px;
    margin-bottom: 16px
}

@media only screen and (max-width: 1179px) {
    .learn__item:first-child .learn__subtitle {
        font-family:Poppins,sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 32px
    }
}

@media only screen and (max-width: 767px) {
    .learn__item:first-child .learn__subtitle {
        font-size:16px;
        margin-bottom: 8px
    }
}

.learn__item:first-child .learn__content {
    font-size: 16px;
    line-height: 1.5
}

@media only screen and (max-width: 1179px) {
    .learn__item:first-child .learn__content {
        font-size:14px
    }
}

.learn__item:not(:first-child) {
    display: flex;
    flex-direction: row-reverse;
    padding-left: 60px
}

@media only screen and (max-width: 1179px) {
    .learn__item:not(:first-child) {
        display:block;
        padding: 0
    }
}

.learn__item:not(:first-child) .learn__preview {
    border-radius: 16px;
    flex: 0 0 45.65%
}

.learn__item:not(:first-child) .learn__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 16px
}

@media only screen and (max-width: 1179px) {
    .learn__item:not(:first-child) .learn__subtitle {
        font-size:24px;
        line-height: 32px
    }
}

@media only screen and (max-width: 767px) {
    .learn__item:not(:first-child) .learn__subtitle {
        font-size:16px;
        margin-bottom: 8px
    }
}

.learn__item:not(:first-child) .learn__content {
    margin-bottom: auto
}

.learn__preview {
    overflow: hidden;
    position: relative
}

@media only screen and (max-width: 1179px) {
    .learn__preview {
        border-radius:16px;
        margin-bottom: 24px
    }

    .learn__preview:before {
        content: "";
        display: block;
        padding-bottom: 77%
    }
}

.learn__preview img {
    transition: transform 1s;
    width: 100%
}

@media only screen and (max-width: 1179px) {
    .learn__preview img {
        height:100%;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: 0
    }
}

.learn__line {
    display: flex
}

.learn__line .learn__button {
    flex-shrink: 0;
    margin-left: 32px
}

@media only screen and (max-width: 1179px) {
    .learn__line .learn__button {
        display:none
    }
}

.learn__subtitle {
    transition: color .2s
}

@media only screen and (max-width: 1179px) {
    .learn__subtitle {
        margin-bottom:16px
    }
}

@media only screen and (max-width: 767px) {
    .learn__subtitle {
        margin-bottom:8px
    }
}

.learn__content {
    color: #777e90
}

.learn__details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 16px
}

@media only screen and (max-width: 1179px) {
    .learn__details {
        display:block;
        padding: 0
    }
}

.learn__date {
    color: #777e90;
    margin-top: 24px
}

@media only screen and (max-width: 1179px) {
    .learn__date {
        display:none
    }

    .learn__slider {
        padding-bottom: 72px;
        visibility: hidden
    }

    .learn__slider.slick-initialized {
        visibility: visible
    }
}

.learn .slick-list {
    overflow: visible
}

.learn .slick-slide {
    opacity: 0;
    padding: 0 16px;
    transition: opacity .4s
}

.learn .slick-slide.slick-active {
    opacity: 1
}

.learn .slick-arrow {
    bottom: 0
}

.learn .slick-prev {
    left: 16px
}

@media only screen and (max-width: 767px) {
    .learn .slick-prev {
        left:calc(50% - 48px)
    }
}

.learn .slick-next {
    left: 64px
}

@media only screen and (max-width: 767px) {
    .learn .slick-next {
        left:auto;
        right: calc(50% - 48px)
    }
}

.nav,.nav__link {
    display: flex
}

.nav__link {
    background: none;
    border-radius: 14px;
    color: #03a84e;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    padding: 6px 12px;
    transition: all .2s
}

.nav__link .icon {
    fill: #777e90;
    height: 16px;
    margin-right: 8px;
    transition: fill .2s;
    width: 16px
}

.nav__link:hover {
    color: #353945
}

.nav__link:hover .icon {
    fill: #353945
}

body.dark .nav__link:hover {
    color: #e6e8ec
}

body.dark .nav__link:hover .icon {
    fill: #e6e8ec
}

.nav__link.active {
    background: #353945;
    color: #fcfcfd
}

.nav__link.active .icon {
    fill: #fcfcfd
}

body.dark .nav__link.active {
    background: #a30917;
    color: #fcfcfd
}

body.dark .nav__link.active .icon {
    fill: #fcfcfd
}

.nav__link:not(:last-child) {
    margin-right: 8px
}

@media only screen and (max-width: 767px) {
    .trend {
        padding-bottom:80px;
        position: relative
    }
}

.trend__line {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px
}

@media only screen and (max-width: 767px) {
    .trend__line {
        display:block;
        margin-bottom: 32px
    }
}

.trend__line .trend__button {
    flex-shrink: 0;
    margin-left: 40px
}

@media only screen and (max-width: 767px) {
    .trend__line .trend__button {
        bottom:0;
        left: 32px;
        margin: 0;
        position: absolute;
        right: 32px;
        width: calc(100% - 64px)
    }
}

.trend .nav {
    margin-bottom: 64px
}

@media only screen and (max-width: 767px) {
    .trend .nav {
        display:none
    }
}

.trend .nav__link:not(:last-child) {
    margin-right: 24px
}

.trend .select {
    display: none
}

@media only screen and (max-width: 767px) {
    .trend .select {
        display:block;
        margin-bottom: 32px
    }
}

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

.trend__row {
    color: #23262f;
    display: table-row
}

.trend__row:first-child .trend__col {
    border-bottom: 1px solid #e6e8ec;
    color: #03a84e;
    padding: 24px 16px
}

@media only screen and (max-width: 767px) {
    .trend__row:first-child .trend__col {
        padding:8px
    }

    .trend__row:first-child .trend__col:nth-child(2) {
        padding-left: 0
    }

    .trend__row:first-child .trend__col:last-child {
        padding-right: 0
    }
}

body.dark .trend__row:first-child .trend__col {
    border-color: #353945
}

.trend__row:not(:first-child) {
    border-radius: 12px;
    transition: background .2s
}

.trend__row:not(:first-child) .trend__col {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    vertical-align: middle
}

@media only screen and (max-width: 767px) {
    .trend__row:not(:first-child) .trend__col {
        font-size:12px
    }
}

.trend__row:not(:first-child) .trend__col:first-child {
    border-radius: 12px 0 0 12px;
    color: #03a84e;
}

@media only screen and (max-width: 1023px) {
    .trend__row:not(:first-child) .trend__col:first-child {
        border-radius:0
    }
}

.trend__row:not(:first-child) .trend__col:last-child {
    border-radius: 0 12px 12px 0
}

@media only screen and (max-width: 1023px) {
    .trend__row:not(:first-child) .trend__col:last-child {
        border-radius:0
    }
}

.trend__row:not(:first-child):hover {
    background: #f4f5f6
}

@media only screen and (max-width: 1023px) {
    .trend__row:not(:first-child):hover {
        background:none
    }
}

body.dark .trend__row:not(:first-child):hover {
    background: #23262f
}

.trend__col {
    display: table-cell;
    padding: 20px 16px
}

@media only screen and (max-width: 1023px) {
    .trend__col:nth-child(5) {
        display:none
    }
}

@media only screen and (max-width: 767px) {
    .trend__col {
        font-size:12px;
        padding: 8px 8px 6px
    }

    .trend__col:first-child,.trend__col:nth-child(6) {
        display: none
    }

    .trend__col:nth-child(2) {
        padding-left: 0
    }

    .trend__col:last-child {
        padding-right: 0
    }
}

body.dark .trend__col {
    color: #fcfcfd
}

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

.trend__icon {
    flex-shrink: 0;
    margin-right: 32px;
    width: 40px
}

@media only screen and (max-width: 767px) {
    .trend__icon {
        margin-right:16px
    }
}

.trend__icon img {
    max-width: 100%
}

.trend__currency {
    color: #b1b5c3;
    margin-left: 12px
}

@media only screen and (max-width: 767px) {
    .trend__currency {
        display:none
    }
}

.trend__positive {
    color: #58bd7d
}

.trend__negative {
    color: #ff6838
}

.trend__chart {
    margin: -17px 0;
    width: 136px
}

@media only screen and (max-width: 1179px) {
    .popular__center {
        padding:0 40px
    }
}

@media only screen and (max-width: 767px) {
    .popular__center {
        padding:0 32px
    }
}

.popular__head {
    margin: 0 auto 64px;
    max-width: 455px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .popular__head {
        margin-bottom:48px;
        text-align: left
    }
}

.popular__title {
    margin-bottom: 20px
}

.popular__info {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5
}

.popular__wrapper {
    margin: 0 -12px
}

@media only screen and (max-width: 767px) {
    .popular__wrapper {
        margin:0 -4px
    }
}

.popular__item {
    align-items: center;
    background: #fcfcfd;
    border-radius: 20px;
    display: flex!important;
    flex-direction: column;
    padding: 50px 32px;
    text-align: center;
    transition: all .2s
}

.popular__item:hover {
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1)
}

body.dark .popular__item {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f
}

body.dark .popular__item:hover {
    background: transparent
}

.popular__item .popular__button {
    margin-top: auto
}

.popular__preview {
    align-items: center;
    display: flex;
    height: 160px;
    justify-content: center;
    margin: 0 auto 32px
}

.popular__preview img {
    max-height: 100%;
    max-width: 100%
}

.popular__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 16px
}

.popular__content {
    color: #777e90;
    margin-bottom: 16px
}

.popular__btns {
    margin-top: 64px;
    text-align: center
}

@media only screen and (max-width: 1023px) {
    .popular__btns {
        margin-top:40px
    }
}

@media only screen and (max-width: 767px) {
    .popular__btns .popular__button {
        width:100%
    }
}

.popular__slider {
    visibility: hidden
}

@media only screen and (max-width: 1023px) {
    .popular__slider {
        padding-bottom:72px
    }
}

.popular__slider.slick-initialized {
    visibility: visible
}

.popular .slick-list {
    overflow: visible
}

.popular .slick-track {
    display: flex
}

.popular .slick-slide {
    height: auto;
    margin: 0 12px;
    opacity: 0;
    transition: opacity .4s
}

@media only screen and (max-width: 767px) {
    .popular .slick-slide {
        margin:0 4px;
        opacity: 1
    }
}

.popular .slick-slide.slick-active {
    opacity: 1
}

.popular .slick-arrow {
    bottom: 0
}

.popular .slick-prev {
    left: calc(50% - 50px)
}

.popular .slick-next {
    right: calc(50% - 50px)
}

.download {
    align-items: center;
    display: flex;
    min-height: 908px;
    padding: 136px 0;
    position: relative
}

@media only screen and (max-width: 1179px) {
    .download {
        min-height:764px;
        padding: 112px 0
    }
}

@media only screen and (max-width: 767px) {
    .download {
        min-height:auto;
        padding: 8px 0 64px
    }
}

.download__wrap {
    max-width: 450px;
    position: relative;
    z-index: 3
}

@media only screen and (max-width: 1023px) {
    .download__wrap {
        max-width:300px
    }
}

.download__title {
    margin-bottom: 16px
}

.download__info {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 64px
}

@media only screen and (max-width: 767px) {
    .download__info {
        margin-bottom:48px
    }
}

.download__list {
    max-width: 348px
}

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

.download__item:hover .download__icon:after {
    opacity: 1;
    visibility: visible
}

.download__item:not(:last-child) {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 32px;
    padding-bottom: 32px
}

body.dark .download__item:not(:last-child) {
    border-color: #353945
}

.download__icon {
    align-items: center;
    background: #23262f;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 56px;
    justify-content: center;
    margin-right: 24px;
    position: relative;
    width: 56px
}

.download__icon img {
    max-width: 24px
}

.download__icon:after {
    background: #3772ff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath fill-rule='evenodd' d='M9.091.265a1 1 0 0 1 1.413.057l3.231 3.5a1 1 0 0 1 0 1.357l-3.231 3.5a1 1 0 0 1-1.47-1.357L10.716 5.5H1a1 1 0 1 1 0-2h9.716L9.034 1.678A1 1 0 0 1 9.091.265z' fill='%23fcfcfd'/%3E%3C/svg%3E") no-repeat 50% 50%/14px auto;
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .2s;
    visibility: hidden;
    width: 100%
}

.download__details {
    flex-grow: 1
}

.download__subtitle {
    color: #23262f;
    font-size: 24px;
    letter-spacing: -.01em;
    line-height: 1.33333
}

body.dark .download__subtitle {
    color: #fcfcfd
}

.download__content {
    color: #777e90
}

.download__bg {
    pointer-events: none;
    position: absolute;
    right: calc(50% - 750px);
    top: 50%;
    transform: translateY(-50%);
    width: 800px
}

@media only screen and (max-width: 1179px) {
    .download__bg {
        right:calc(50% - 620px);
        width: 620px
    }
}

@media only screen and (max-width: 1023px) {
    .download__bg {
        right:calc(50% - 520px);
        width: 540px
    }
}

@media only screen and (max-width: 767px) {
    .download__bg {
        margin-right:-32px;
        position: static;
        transform: translateY(0);
        width: auto
    }
}

.download__bg img {
    width: 100%
}

.news__center {
    max-width: 1132px
}

.news__head {
    margin: 0 auto 80px;
    max-width: 545px;
    text-align: center
}

@media only screen and (max-width: 1023px) {
    .news__head {
        margin-bottom:48px
    }
}

@media only screen and (max-width: 767px) {
    .news__head {
        margin-bottom:24px
    }
}

.news__logo {
    margin-bottom: 16px
}

.news__title {
    margin-bottom: 20px
}

.news__info {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5
}

.news__item {
    background: #fcfcfd;
    border-radius: 24px;
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1);
    display: flex!important;
    min-height: 544px;
    padding: 80px 96px;
    position: relative;
    width: 100%
}

@media only screen and (max-width: 1179px) {
    .news__item {
        padding:80px
    }
}

@media only screen and (max-width: 1023px) {
    .news__item {
        background:none;
        box-shadow: none;
        display: block!important;
        min-height: auto;
        padding: 0
    }
}

body.dark .news__item {
    background: #23262f
}

@media only screen and (max-width: 1023px) {
    body.dark .news__item {
        background:none
    }
}

.news__preview {
    align-items: center;
    display: flex;
    height: 563px;
    justify-content: center;
    position: absolute;
    right: -30px;
    top: -30px;
    width: 563px
}

@media only screen and (max-width: 1179px) {
    .news__preview {
        height:500px;
        top: 20px;
        width: 500px
    }
}

@media only screen and (max-width: 1023px) {
    .news__preview {
        margin:0 auto;
        position: static
    }
}

@media only screen and (max-width: 639px) {
    .news__preview {
        height:320px;
        width: 100%
    }
}

.news__preview img {
    max-height: 100%;
    max-width: 100%
}

.news__wrap {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    max-width: 352px;
    position: relative;
    z-index: 3
}

@media only screen and (max-width: 1023px) {
    .news__wrap {
        display:block;
        margin: 0 auto;
        max-width: 500px;
        text-align: center
    }
}

.news__stage {
    margin-top: auto
}

.news__subtitle {
    font-size: 24px;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 16px
}

.news__content {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: auto
}

.news__button {
    margin-top: 48px
}

.news__slider {
    visibility: hidden
}

@media only screen and (max-width: 767px) {
    .news__slider {
        padding-bottom:72px
    }
}

.news__slider.slick-initialized {
    visibility: visible
}

.news .slick-list {
    overflow: visible
}

.news .slick-slide {
    opacity: 0;
    transition: opacity .4s
}

.news .slick-slide.slick-active {
    opacity: 1
}

.news .slick-arrow {
    top: 50%;
    transform: translateY(-50%)
}

@media only screen and (max-width: 767px) {
    .news .slick-arrow {
        bottom:0;
        top: auto;
        transform: translateY(0)
    }
}

.news .slick-prev {
    left: -96px
}

@media only screen and (max-width: 1419px) {
    .news .slick-prev {
        left:-64px
    }
}

@media only screen and (max-width: 1179px) {
    .news .slick-prev {
        left:-48px
    }
}

@media only screen and (max-width: 1023px) {
    .news .slick-prev {
        left:0
    }
}

@media only screen and (max-width: 767px) {
    .news .slick-prev {
        left:calc(50% - 48px)
    }
}

.news .slick-next {
    right: -96px
}

@media only screen and (max-width: 1419px) {
    .news .slick-next {
        right:-64px
    }
}

@media only screen and (max-width: 1179px) {
    .news .slick-next {
        right:-48px
    }
}

@media only screen and (max-width: 1023px) {
    .news .slick-next {
        right:0
    }
}

@media only screen and (max-width: 767px) {
    .news .slick-next {
        right:calc(50% - 48px)
    }
}

.steps__head {
    margin: 0 auto 80px;
    max-width: 380px;
    text-align: center
}

@media only screen and (max-width: 1179px) {
    .steps__head {
        margin-bottom:64px
    }
}

@media only screen and (max-width: 767px) {
    .steps__head {
        margin-bottom:40px
    }
}

.steps__title {
    margin-bottom: 20px
}

.steps__info {
    color: #353945
}

body.dark .steps__info {
    color: #e6e8ec
}

.steps__list {
    display: flex;
    margin: 0 -16px
}

@media only screen and (max-width: 1023px) {
    .steps__list {
        -ms-overflow-style:none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -40px;
        overflow: auto;
        overflow-x: auto;
        scrollbar-width: none
    }

    .steps__list::-webkit-scrollbar {
        display: none
    }

    .steps__list:after,.steps__list:before {
        content: "";
        flex-shrink: 0;
        height: 1px;
        width: 40px
    }
}

.steps__item {
    flex: 0 0 calc(25% - 32px);
    margin: 0 16px;
    position: relative;
    text-align: center;
    width: calc(25% - 32px)
}

@media only screen and (max-width: 1023px) {
    .steps__item {
        flex:0 0 256px;
        margin: 0;
        width: 256px
    }
}

@media only screen and (max-width: 767px) {
    .steps__item {
        text-align:left
    }
}

.steps__item:after {
    background-image: linear-gradient(90deg,#b1b5c3,#b1b5c3 6px,transparent 0,transparent 14px);
    background-repeat: repeat-x;
    background-size: 12px auto;
    content: "";
    height: 2px;
    position: absolute;
    right: -84px;
    top: 47px;
    width: 130px
}

@media only screen and (max-width: 1259px) {
    .steps__item:after {
        right:-66px;
        width: 100px
    }
}

@media only screen and (max-width: 1179px) {
    .steps__item:after {
        right:-50px;
        width: 60px
    }
}

@media only screen and (max-width: 1023px) {
    .steps__item:after {
        right:-79px;
        width: 120px
    }
}

@media only screen and (max-width: 767px) {
    .steps__item:after {
        right:0
    }
}

.steps__item:first-child .steps__preview:before,.steps__item:last-child .steps__preview:after,.steps__item:last-child:after {
    display: none
}

@media only screen and (max-width: 1023px) {
    .steps__item:not(:last-child) {
        margin-right:32px
    }
}

.steps__preview {
    align-items: center;
    border-radius: 24px;
    display: flex;
    height: 96px;
    justify-content: center;
    margin: 0 auto 80px;
    position: relative;
    width: 96px
}

@media only screen and (max-width: 767px) {
    .steps__preview {
        margin:0 0 32px
    }
}

.steps__preview:after,.steps__preview:before {
    border: 2px solid #b1b5c3;
    border-radius: 50%;
    content: "";
    height: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px
}

.steps__preview:before {
    left: -24px
}

.steps__preview:after {
    right: -24px
}

.steps__preview img {
    width: 100%
}

.steps__number {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    margin-bottom: 32px
}

.steps__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 16px
}

.steps__content {
    color: #353945
}

body.dark .steps__content {
    color: #e6e8ec
}

.footer {
    border-top: 1px solid #e6e8ec
}

body.dark .footer {
    border-color: #23262f
}

.footer__center {
    display: flex
}

@media only screen and (max-width: 767px) {
    .footer__center {
        display:block
    }

    .footer__body {
        padding-top: 32px;
        position: relative
    }
}

.footer__col {
    flex: 0 0 30.5%;
    padding: 80px 86px 64px
}

@media only screen and (max-width: 1339px) {
    .footer__col {
        padding:80px 64px 64px
    }
}

@media only screen and (max-width: 1179px) {
    .footer__col {
        flex:0 0 34%
    }
}

@media only screen and (max-width: 1023px) {
    .footer__col {
        padding:64px 32px 48px
    }
}

@media only screen and (max-width: 767px) {
    .footer__col {
        border-bottom:1px solid #e6e8ec;
        padding: 32px 0
    }

    body.dark .footer__col {
        border-color: #23262f
    }
}

.footer__col:first-child {
    display: flex;
    flex: 0 0 39%;
    padding-left: 0
}

@media only screen and (max-width: 1179px) {
    .footer__col:first-child {
        flex:0 0 32%
    }
}

@media only screen and (max-width: 767px) {
    .footer__col:first-child {
        display:block
    }
}

.footer__col:nth-child(3) {
    padding-right: 0
}

.footer__col:nth-child(2),.footer__col:nth-child(3) {
    border-left: 1px solid #e6e8ec
}

@media only screen and (max-width: 767px) {
    .footer__col:nth-child(2),.footer__col:nth-child(3) {
        border-left:none
    }
}

body.dark .footer__col:nth-child(2),body.dark .footer__col:nth-child(3) {
    border-color: #23262f
}

.footer__logo {
    display: inline-block;
    margin-right: 160px;
    overflow: hidden;
    width: 32px
}

@media only screen and (max-width: 1339px) {
    .footer__logo {
        margin-right:80px
    }
}

@media only screen and (max-width: 1023px) {
    .footer__logo {
        margin-right:32px
    }
}

@media only screen and (max-width: 767px) {
    .footer__logo {
        margin:0 0 32px;
        width: 140px
    }
}

.footer__logo img {
    width: 140px
}

.footer__item .footer__category {
    display: none
}

@media only screen and (max-width: 767px) {
    .footer__item .footer__category {
        align-items:center;
        display: flex;
        margin-bottom: 0
    }
}

.footer__item .footer__category .icon {
    fill: #777e90;
    height: 24px;
    margin-left: auto;
    transition: transform .2s;
    width: 24px
}

.footer__item .footer__category.active .icon {
    transform: rotate(180deg)
}

.footer__menu {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

@media only screen and (min-width: 768px) {
    .footer__menu {
        display:flex!important
    }
}

@media only screen and (max-width: 767px) {
    .footer__menu {
        display:none;
        padding-top: 40px
    }
}

.footer__link {
    color: #777e90;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    transition: color .2s
}

@media only screen and (max-width: 767px) {
    .footer__link {
        display:block
    }
}

.footer__link.active,.footer__link:hover {
    color: #23262f
}

body.dark .footer__link.active,body.dark .footer__link:hover {
    color: #fcfcfd
}

.footer__link:not(:last-child) {
    margin-bottom: 24px
}

.footer__category {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 41px;
    text-transform: uppercase
}

.footer__info {
    font-size: 14px;
    line-height: 1.71429
}

.footer__info p:not(:last-child) {
    margin-bottom: 8px
}

.footer__info:not(:last-child) {
    margin-bottom: 24px
}

.footer__foot {
    border-top: 1px solid #e6e8ec;
    padding: 25px 0 20px
}

@media only screen and (max-width: 767px) {
    .footer__foot {
        border:none;
        padding: 56px 0 48px
    }
}

body.dark .footer__foot {
    border-color: #23262f
}

.footer__copyright {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .footer__copyright {
        margin:0 0 24px
    }
}

.footer__socials {
    display: flex
}

.footer__social {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    width: 20px
}

.footer__social .icon {
    fill: #777e90;
    height: 16px;
    transition: fill .2s;
    width: 16px
}

.footer__social .icon-twitter {
    height: 18px;
    width: 18px
}

.footer__social .icon-behance {
    height: 20px;
    width: 20px
}

.footer__social:hover .icon {
    fill: #23262f
}

body.dark .footer__social:hover .icon {
    fill: #fcfcfd
}

.footer__social:not(:last-child) {
    margin-right: 24px
}

.subscription {
    position: relative
}

.subscription__input {
    background: none;
    border: 2px solid #e6e8ec;
    border-radius: 24px;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 14px;
    height: 48px;
    line-height: 1.71429;
    padding: 0 48px 0 14px;
    transition: border-color .2s;
    width: 100%
}

body.dark .subscription__input {
    border-color: #353945;
    color: #fcfcfd
}

.subscription__input:focus,body.dark .subscription__input:focus {
    border-color: #777e90
}

.subscription__input::-moz-placeholder {
    color: #777e90
}

.subscription__input::placeholder {
    color: #777e90
}

.subscription__btn {
    background: #3772ff;
    border-radius: 50%;
    bottom: 8px;
    height: 32px;
    position: absolute;
    right: 8px;
    top: 8px;
    transition: background .2s;
    width: 32px
}

.subscription__btn .icon {
    fill: #fcfcfd;
    height: 14px;
    width: 14px
}

.subscription__btn:hover {
    background: #044eff
}

.subscription_big .subscription__input {
    border: 2px solid #f4f5f6;
    border-radius: 36px;
    font-size: 16px;
    height: 72px;
    padding: 0 72px 0 22px
}

.subscription_big .subscription__input::-moz-placeholder {
    color: #b1b5c3
}

.subscription_big .subscription__input::placeholder {
    color: #b1b5c3
}

.subscription_big .subscription__input:focus {
    border-color: #b1b5c3
}

body.dark .subscription_big .subscription__input {
    border-color: #353945
}

body.dark .subscription_big .subscription__input:focus {
    border-color: #b1b5c3
}

.subscription_big .subscription__btn {
    bottom: 16px;
    height: 40px;
    right: 16px;
    top: 16px;
    width: 40px
}

.subscription_big .subscription__btn .icon {
    height: 20px;
    width: 20px
}

.home {
    background: #decbe9;
    min-height: 692px;
    padding-top: 156px;
    position: relative
}

@media only screen and (max-width: 767px) {
    .home {
        min-height:auto;
        padding: 64px 0 112px
    }
}

body.dark .home {
    background: #18191d
}

.home__wrap {
    margin-bottom: 143px;
    max-width: 545px;
    position: relative;
    z-index: 3
}

@media only screen and (max-width: 767px) {
    .home__wrap {
        margin-bottom:8px
    }
}

.home__title {
    margin-bottom: 32px
}

@media only screen and (max-width: 767px) {
    .home__title {
        font-size:40px;
        line-height: 48px;
        margin-bottom: 16px
    }
}

.home__text {
    color: #353945;
    font-size: 24px;
    letter-spacing: -.01em;
    line-height: 1.33333
}

@media only screen and (max-width: 767px) {
    .home__text {
        font-size:16px
    }
}

body.dark .home__text {
    color: #b1b5c3
}

.home__text strong {
    font-weight: 600
}

.home__bg {
    pointer-events: none;
    position: absolute;
    right: calc(50% - 760px);
    top: 0;
    width: 780px
}

@media only screen and (max-width: 1179px) {
    .home__bg {
        right:calc(50% - 820px)
    }
}

@media only screen and (max-width: 767px) {
    .home__bg {
        margin:0 -76px 24px -30px;
        position: static;
        width: auto
    }
}

.home__bg img {
    width: 100%
}

.panel {
    margin: -137px 0 72px;
    position: relative
}

.panel__wrapper {
    background: #fcfcfd;
    border: 1px solid #f4f5f6;
    border-radius: 24px;
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1)
}

@media only screen and (max-width: 767px) {
    .panel__wrapper {
        margin:0 -16px 32px
    }
}

body.dark .panel__wrapper {
    background: #18191d;
    border-color: #23262f
}

.panel__list {
    display: flex;
    margin: 0 -18px
}

@media only screen and (max-width: 1023px) {
    .panel__list {
        -ms-overflow-style:none;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        overflow: auto;
        overflow-x: auto;
        scrollbar-width: none
    }

    .panel__list::-webkit-scrollbar {
        display: none
    }

    .panel__list:after,.panel__list:before {
        content: "";
        flex-shrink: 0;
        height: 1px;
        width: 24px
    }
}

.panel__item {
    color: #23262f;
    display: flex;
    flex: 0 0 calc(33.333% - 36px);
    margin: 0 18px;
    padding: 24px;
    width: calc(33.333% - 36px)
}

@media only screen and (max-width: 1023px) {
    .panel__item {
        flex:0 0 250px;
        margin: 0;
        padding: 24px 0;
        width: 250px
    }
}

@media only screen and (max-width: 767px) {
    .panel__item {
        flex:0 0 220px;
        width: 220px
    }
}

body.dark .panel__item {
    color: #fcfcfd
}

.panel__item:hover .panel__price {
    color: #3772ff
}

.panel__icon {
    flex-shrink: 0;
    margin-right: 16px;
    width: 40px
}

.panel__line {
    align-items: center;
    display: flex;
    margin-bottom: 4px
}

.panel__title {
    color: #777e90;
    margin-right: 12px
}

.panel__negative,.panel__positive,.panel__title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

.panel__negative,.panel__positive {
    border-radius: 12px;
    color: #fcfcfd;
    display: inline-block;
    padding: 2px 8px
}

.panel__positive {
    background: #58bd7d
}

.panel__negative {
    background: #ff6838
}

.panel__price {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 4px;
    transition: color .2s
}

.panel__money {
    font-size: 12px;
    line-height: 1.66667
}

.panel__foot {
    align-items: center;
    border-top: 1px solid #e6e8ec;
    display: flex;
    padding: 34px 32px
}

@media only screen and (max-width: 767px) {
    .panel__foot {
        display:block
    }
}

body.dark .panel__foot {
    border-color: #23262f
}

.panel .nav {
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .panel .nav {
        display:none
    }
}

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

@media only screen and (max-width: 1023px) {
    .panel .nav__link:not(:last-child) {
        margin-right:6px
    }
}

@media only screen and (max-width: 767px) {
    .panel__button {
        display:none
    }
}

.panel .select {
    display: none
}

@media only screen and (max-width: 767px) {
    .panel .select {
        display:block;
        width: 100%
    }

    body.dark .panel .select {
        background: none
    }
}

.panel__chart {
    margin: -16px 0 0 6px;
    width: 100px
}

@media only screen and (max-width: 1339px) {
    .panel__chart {
        flex-grow:1
    }
}

@media only screen and (max-width: 1179px) {
    .panel__chart {
        display:none
    }
}

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

@media only screen and (max-width: 1023px) {
    .market__table {
        display:block
    }
}

.market__row {
    color: #23262f;
    display: table-row
}

@media only screen and (max-width: 1023px) {
    .market__row {
        display:block;
        position: relative
    }

    .market__row:first-child {
        display: none
    }
}

.market__row:first-child .market__col {
    border-bottom: 1px solid #e6e8ec;
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding: 0 16px 32px
}

body.dark .market__row:first-child .market__col {
    border-color: #23262f
}

.market__row:first-child .market__col .icon {
    fill: #777e90;
    height: 20px;
    margin-left: 4px;
    width: 20px
}

.market__row:not(:first-child) {
    transition: background .2s
}

.market__row:not(:first-child) .market__col {
    font-weight: 500;
    vertical-align: middle
}

.market__row:not(:first-child) .market__col:first-child {
    border-radius: 12px 0 0 12px;
    color: #777e90
}

@media only screen and (max-width: 1023px) {
    .market__row:not(:first-child) .market__col:first-child {
        border-radius:0
    }
}

.market__row:not(:first-child) .market__col:last-child {
    border-radius: 0 12px 12px 0
}

@media only screen and (max-width: 1023px) {
    .market__row:not(:first-child) .market__col:last-child {
        border-radius:0
    }
}

.market__row:not(:first-child):hover {
    background: #f4f5f6
}

body.dark .market__row:not(:first-child):hover {
    background: #23262f
}

.market__row:not(:first-child):hover .market__button {
    display: inline-flex
}

.market__row:not(:first-child):hover .market__chart {
    display: none
}

@media only screen and (max-width: 1023px) {
    .market__row:not(:last-child) {
        border-bottom:1px solid #e6e8ec;
        margin-bottom: 24px;
        padding-bottom: 20px
    }

    body.dark .market__row:not(:last-child) {
        border-color: #353945
    }
}

.market__col {
    display: table-cell;
    font-weight: 500;
    padding: 16px;
    text-align: right
}

@media only screen and (max-width: 1023px) {
    .market__col {
        align-items:center;
        display: flex;
        margin-bottom: 4px;
        padding: 0
    }
}

body.dark .market__col {
    color: #fcfcfd
}

.market__col:first-child,.market__col:nth-child(2) {
    text-align: left
}

@media only screen and (max-width: 1023px) {
    .market__col:nth-child(2) {
        margin-bottom:16px
    }
}

@media only screen and (max-width: 1179px) {
    .market__col:nth-last-child(2) {
        display:none
    }
}

.market__col:first-child {
    font-size: 12px
}

@media only screen and (max-width: 1023px) {
    .market__col:first-child {
        display:none
    }

    .market__col:last-child {
        margin-bottom: 0
    }
}

.market__line {
    align-items: center;
    color: #777e90;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

.market .favorite {
    margin-right: 10px;
    position: relative;
    top: -1px
}

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

.market__icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 32px
}

.market__icon img {
    max-width: 100%
}

.market__subtitle {
    margin-right: 4px
}

.market__currency {
    color: #777e90;
    font-weight: 400
}

.market__positive {
    color: #58bd7d
}

.market__negative {
    color: #ff6838
}

.market__button {
    display: none;
    width: 96px
}

@media only screen and (max-width: 1179px) {
    .market__button {
        display:inline-flex
    }
}

@media only screen and (max-width: 1023px) {
    .market__button {
        position:absolute;
        right: 0;
        top: -6px
    }
}

.market__chart {
    margin: -15px 0 -15px auto;
    width: 96px
}

@media only screen and (max-width: 1179px) {
    .market__chart {
        display:none
    }
}

.market__label {
    display: none
}

@media only screen and (max-width: 1023px) {
    .market__label {
        color:#777e90;
        display: block;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.66667;
        margin-right: auto
    }
}

.loader {
    animation: loader 1.1s ease infinite;
    border-radius: 50%;
    font-size: 4px;
    height: 1em;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    width: 1em
}

.loader_white,body.dark .loader {
    animation-name: loader-white
}

@keyframes loader {
    0%,to {
        box-shadow: 0 -2.6em 0 0 #777e90,1.8em -1.8em 0 0 rgba(119,126,144,.2),2.5em 0 0 0 rgba(119,126,144,.2),1.75em 1.75em 0 0 rgba(119,126,144,.2),0 2.5em 0 0 rgba(119,126,144,.2),-1.8em 1.8em 0 0 rgba(119,126,144,.2),-2.6em 0 0 0 rgba(119,126,144,.5),-1.8em -1.8em 0 0 rgba(119,126,144,.7)
    }

    12.5% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.7),1.8em -1.8em 0 0 #777e90,2.5em 0 0 0 rgba(119,126,144,.2),1.75em 1.75em 0 0 rgba(119,126,144,.2),0 2.5em 0 0 rgba(119,126,144,.2),-1.8em 1.8em 0 0 rgba(119,126,144,.2),-2.6em 0 0 0 rgba(119,126,144,.2),-1.8em -1.8em 0 0 rgba(119,126,144,.5)
    }

    25% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.5),1.8em -1.8em 0 0 rgba(119,126,144,.7),2.5em 0 0 0 #777e90,1.75em 1.75em 0 0 rgba(119,126,144,.2),0 2.5em 0 0 rgba(119,126,144,.2),-1.8em 1.8em 0 0 rgba(119,126,144,.2),-2.6em 0 0 0 rgba(119,126,144,.2),-1.8em -1.8em 0 0 rgba(119,126,144,.2)
    }

    37.5% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.2),1.8em -1.8em 0 0 rgba(119,126,144,.5),2.5em 0 0 0 rgba(119,126,144,.7),1.75em 1.75em 0 0 #777e90,0 2.5em 0 0 rgba(119,126,144,.2),-1.8em 1.8em 0 0 rgba(119,126,144,.2),-2.6em 0 0 0 rgba(119,126,144,.2),-1.8em -1.8em 0 0 rgba(119,126,144,.2)
    }

    50% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.2),1.8em -1.8em 0 0 rgba(119,126,144,.2),2.5em 0 0 0 rgba(119,126,144,.5),1.75em 1.75em 0 0 rgba(119,126,144,.7),0 2.5em 0 0 #777e90,-1.8em 1.8em 0 0 rgba(119,126,144,.2),-2.6em 0 0 0 rgba(119,126,144,.2),-1.8em -1.8em 0 0 rgba(119,126,144,.2)
    }

    62.5% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.2),1.8em -1.8em 0 0 rgba(119,126,144,.2),2.5em 0 0 0 rgba(119,126,144,.2),1.75em 1.75em 0 0 rgba(119,126,144,.5),0 2.5em 0 0 rgba(119,126,144,.7),-1.8em 1.8em 0 0 #777e90,-2.6em 0 0 0 rgba(119,126,144,.2),-1.8em -1.8em 0 0 rgba(119,126,144,.2)
    }

    75% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.2),1.8em -1.8em 0 0 rgba(119,126,144,.2),2.5em 0 0 0 rgba(119,126,144,.2),1.75em 1.75em 0 0 rgba(119,126,144,.2),0 2.5em 0 0 rgba(119,126,144,.5),-1.8em 1.8em 0 0 rgba(119,126,144,.7),-2.6em 0 0 0 #777e90,-1.8em -1.8em 0 0 rgba(119,126,144,.2)
    }

    87.5% {
        box-shadow: 0 -2.6em 0 0 rgba(119,126,144,.2),1.8em -1.8em 0 0 rgba(119,126,144,.2),2.5em 0 0 0 rgba(119,126,144,.2),1.75em 1.75em 0 0 rgba(119,126,144,.2),0 2.5em 0 0 rgba(119,126,144,.2),-1.8em 1.8em 0 0 rgba(119,126,144,.5),-2.6em 0 0 0 rgba(119,126,144,.7),-1.8em -1.8em 0 0 #777e90
    }
}

@keyframes loader-white {
    0%,to {
        box-shadow: 0 -2.6em 0 0 #fff,1.8em -1.8em 0 0 hsla(0,0%,100%,.2),2.5em 0 0 0 hsla(0,0%,100%,.2),1.75em 1.75em 0 0 hsla(0,0%,100%,.2),0 2.5em 0 0 hsla(0,0%,100%,.2),-1.8em 1.8em 0 0 hsla(0,0%,100%,.2),-2.6em 0 0 0 hsla(0,0%,100%,.5),-1.8em -1.8em 0 0 hsla(0,0%,100%,.7)
    }

    12.5% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.7),1.8em -1.8em 0 0 #fff,2.5em 0 0 0 hsla(0,0%,100%,.2),1.75em 1.75em 0 0 hsla(0,0%,100%,.2),0 2.5em 0 0 hsla(0,0%,100%,.2),-1.8em 1.8em 0 0 hsla(0,0%,100%,.2),-2.6em 0 0 0 hsla(0,0%,100%,.2),-1.8em -1.8em 0 0 hsla(0,0%,100%,.5)
    }

    25% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.5),1.8em -1.8em 0 0 hsla(0,0%,100%,.7),2.5em 0 0 0 #fff,1.75em 1.75em 0 0 hsla(0,0%,100%,.2),0 2.5em 0 0 hsla(0,0%,100%,.2),-1.8em 1.8em 0 0 hsla(0,0%,100%,.2),-2.6em 0 0 0 hsla(0,0%,100%,.2),-1.8em -1.8em 0 0 hsla(0,0%,100%,.2)
    }

    37.5% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.2),1.8em -1.8em 0 0 hsla(0,0%,100%,.5),2.5em 0 0 0 hsla(0,0%,100%,.7),1.75em 1.75em 0 0 #fff,0 2.5em 0 0 hsla(0,0%,100%,.2),-1.8em 1.8em 0 0 hsla(0,0%,100%,.2),-2.6em 0 0 0 hsla(0,0%,100%,.2),-1.8em -1.8em 0 0 hsla(0,0%,100%,.2)
    }

    50% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.2),1.8em -1.8em 0 0 hsla(0,0%,100%,.2),2.5em 0 0 0 hsla(0,0%,100%,.5),1.75em 1.75em 0 0 hsla(0,0%,100%,.7),0 2.5em 0 0 #fff,-1.8em 1.8em 0 0 hsla(0,0%,100%,.2),-2.6em 0 0 0 hsla(0,0%,100%,.2),-1.8em -1.8em 0 0 hsla(0,0%,100%,.2)
    }

    62.5% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.2),1.8em -1.8em 0 0 hsla(0,0%,100%,.2),2.5em 0 0 0 hsla(0,0%,100%,.2),1.75em 1.75em 0 0 hsla(0,0%,100%,.5),0 2.5em 0 0 hsla(0,0%,100%,.7),-1.8em 1.8em 0 0 #fff,-2.6em 0 0 0 hsla(0,0%,100%,.2),-1.8em -1.8em 0 0 hsla(0,0%,100%,.2)
    }

    75% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.2),1.8em -1.8em 0 0 hsla(0,0%,100%,.2),2.5em 0 0 0 hsla(0,0%,100%,.2),1.75em 1.75em 0 0 hsla(0,0%,100%,.2),0 2.5em 0 0 hsla(0,0%,100%,.5),-1.8em 1.8em 0 0 hsla(0,0%,100%,.7),-2.6em 0 0 0 #fff,-1.8em -1.8em 0 0 hsla(0,0%,100%,.2)
    }

    87.5% {
        box-shadow: 0 -2.6em 0 0 hsla(0,0%,100%,.2),1.8em -1.8em 0 0 hsla(0,0%,100%,.2),2.5em 0 0 0 hsla(0,0%,100%,.2),1.75em 1.75em 0 0 hsla(0,0%,100%,.2),0 2.5em 0 0 hsla(0,0%,100%,.2),-1.8em 1.8em 0 0 hsla(0,0%,100%,.5),-2.6em 0 0 0 hsla(0,0%,100%,.7),-1.8em -1.8em 0 0 #fff
    }
}

.lessons__head {
    margin: 0 auto 64px;
    max-width: 455px;
    text-align: center
}

@media only screen and (max-width: 1179px) {
    .lessons__head {
        margin-bottom:48px
    }
}

.lessons__title {
    margin-bottom: 20px
}

.lessons__info {
    color: #353945;
    font-size: 16px;
    line-height: 1.5
}

body.dark .lessons__info {
    color: #b1b5c3
}

.lessons__list {
    display: flex;
    flex-wrap: wrap;
    margin: -48px -16px 0
}

@media only screen and (max-width: 767px) {
    .lessons__list {
        display:block;
        margin: 0
    }
}

.lessons__item {
    align-items: flex-start;
    border-bottom: 2px solid #e6e8ec;
    color: #23262f;
    display: flex;
    flex: 0 0 calc(33.333% - 32px);
    flex-direction: column;
    margin: 48px 16px 0;
    padding-bottom: 48px;
    transition: color .2s;
    width: calc(33.333% - 32px)
}

@media only screen and (max-width: 1023px) {
    .lessons__item {
        flex:0 0 calc(50% - 32px);
        width: calc(50% - 32px)
    }
}

@media only screen and (max-width: 767px) {
    .lessons__item {
        border:none;
        margin: 32px 0 0;
        padding-bottom: 0;
        width: 100%
    }
}

body.dark .lessons__item {
    border-color: #353945;
    color: #fcfcfd
}

.lessons__item:hover {
    color: #3772ff
}

.lessons__item:hover .lessons__preview img {
    transform: scale(1.1)
}

.lessons__item:nth-child(n+4) {
    display: none
}

@media only screen and (max-width: 1023px) {
    .lessons__item:nth-child(n+4) {
        display:flex
    }
}

@media only screen and (max-width: 767px) {
    .lessons__item:nth-child(n+4) {
        display:none
    }
}

.lessons__preview {
    border-radius: 12px;
    margin-bottom: 48px;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .lessons__preview {
        margin-bottom:32px
    }
}

.lessons__preview:before {
    content: "";
    display: block;
    padding-bottom: 57%
}

@media only screen and (max-width: 1179px) {
    .lessons__preview:before {
        padding-bottom:75%
    }
}

.lessons__preview img {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    transition: transform 1s;
    width: 100%
}

.lessons__category {
    margin-bottom: 16px
}

.lessons__subtitle {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 48px
}

@media only screen and (max-width: 767px) {
    .lessons__subtitle {
        margin-bottom:32px
    }
}

.lessons__line {
    color: #777e90;
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    justify-content: space-between;
    margin-top: auto;
    width: 100%
}

.lessons__author {
    align-items: center;
    display: flex;
    margin-right: 16px
}

.lessons__avatar {
    background: #58bd7d;
    border-radius: 50%;
    flex-shrink: 0;
    height: 24px;
    margin-right: 12px;
    overflow: hidden;
    width: 24px
}

.lessons__avatar img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.lessons__btns {
    margin-top: 64px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .lessons__btns {
        margin-top:48px
    }
}

.lessons__button .loader {
    margin: 0 16px 0 5px;
    transform: scale(.8)
}

.discover {
    padding-top: 80px
}

@media only screen and (max-width: 767px) {
    .discover {
        padding-top:64px
    }
}

.discover__head {
    margin: 0 auto 80px;
    max-width: 730px;
    text-align: center
}

.discover__title {
    margin-bottom: 16px
}

.discover__info {
    color: #777e90;
    font-size: 24px;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 32px
}

@media only screen and (max-width: 767px) {
    .discover__info {
        font-size:16px
    }
}

.discover__btns {
    display: flex;
    justify-content: center
}

.discover__button:not(:last-child) {
    margin-right: 16px
}

.discover__video {
    border-radius: 16px;
    overflow: hidden;
    position: relative
}

@media only screen and (max-width: 767px) {
    .discover__video:before {
        content:"";
        display: block;
        padding-bottom: 122%
    }
}

.discover__video img {
    width: 100%
}

@media only screen and (max-width: 767px) {
    .discover__video img {
        height:100%;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: 0
    }
}

.releases {
    position: relative
}

.releases__anchor {
    top: 48px
}

.releases__head {
    display: flex;
    margin-bottom: 80px
}

@media only screen and (max-width: 1023px) {
    .releases__head {
        display:block;
        margin-bottom: 48px
    }
}

.releases__stage {
    width: 352px
}

@media only screen and (max-width: 1023px) {
    .releases__stage {
        margin-bottom:20px;
        width: 100%
    }
}

.releases__wrap {
    flex-shrink: 0;
    margin-left: auto;
    width: 640px
}

@media only screen and (max-width: 1179px) {
    .releases__wrap {
        width:500px
    }
}

@media only screen and (max-width: 1023px) {
    .releases__wrap {
        width:100%
    }
}

.releases__title {
    margin-bottom: 20px
}

.releases__info {
    color: #353945;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 64px;
    max-width: 450px
}

@media only screen and (max-width: 1023px) {
    .releases__info {
        margin-bottom:48px
    }
}

body.dark .releases__info {
    color: #f4f5f6
}

@media only screen and (max-width: 767px) {
    .releases .nav {
        display:none
    }
}

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

.releases .select {
    background: transparent;
    display: none
}

@media only screen and (max-width: 767px) {
    .releases .select {
        display:block
    }
}

body.dark .releases .select {
    background: none
}

.releases__item {
    color: #23262f;
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    transition: color .2s
}

@media only screen and (max-width: 1023px) {
    .releases__item {
        display:block
    }
}

body.dark .releases__item {
    color: #fcfcfd
}

.releases__item:hover {
    color: #3772ff
}

.releases__item:hover .releases__arrow {
    transform: translateX(10px)
}

.releases__item:hover .releases__arrow .icon {
    fill: #3772ff
}

.releases__item:not(:last-child) {
    margin-bottom: 80px
}

.releases__preview {
    flex-shrink: 0;
    margin-left: auto;
    width: 640px
}

@media only screen and (max-width: 1179px) {
    .releases__preview {
        width:500px
    }
}

@media only screen and (max-width: 1023px) {
    .releases__preview {
        margin-bottom:32px;
        width: 100%
    }
}

.releases__preview img {
    border-radius: 16px;
    width: 100%
}

@media only screen and (max-width: 1023px) {
    .releases__preview img {
        min-height:240px;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.releases__details {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    width: 352px
}

@media only screen and (max-width: 1179px) {
    .releases__details {
        padding-right:32px;
        width: auto
    }
}

@media only screen and (max-width: 1023px) {
    .releases__details {
        padding-right:0
    }
}

.releases__category {
    margin-bottom: auto
}

.releases__subtitle {
    margin: 24px 0 8px
}

@media only screen and (max-width: 1023px) {
    .releases__subtitle {
        margin-top:16px
    }
}

.releases__currency {
    color: #353945;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px
}

body.dark .releases__currency {
    color: #b1b5c3
}

.releases__content {
    color: #777e90;
    margin-bottom: auto
}

.releases__arrow {
    height: 24px;
    left: 0;
    position: absolute;
    top: calc(100% + 14px);
    transition: transform .2s;
    width: 24px
}

@media only screen and (max-width: 1023px) {
    .releases__arrow {
        margin-top:16px;
        position: static
    }
}

.releases__arrow .icon {
    fill: #777e90;
    height: 14px;
    transition: fill .2s;
    width: 14px
}

.catalog {
    position: relative
}

.catalog__anchor {
    top: 48px
}

.catalog__form {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 48px;
    padding-bottom: 32px;
    position: relative
}

@media only screen and (max-width: 767px) {
    .catalog__form {
        margin-bottom:24px
    }
}

body.dark .catalog__form {
    border-color: #353945
}

.catalog__input {
    background: none;
    border: none;
    border-radius: 0;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 24px;
    font-weight: 600;
    height: 48px;
    letter-spacing: -.01em;
    line-height: 1.33333;
    padding-right: 64px;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .catalog__input {
        font-size:16px;
        font-weight: 500
    }
}

.catalog__input::-moz-placeholder {
    color: #23262f
}

.catalog__input::placeholder {
    color: #23262f
}

body.dark .catalog__input {
    color: #fcfcfd
}

body.dark .catalog__input::-moz-placeholder {
    color: #e6e8ec
}

body.dark .catalog__input::placeholder {
    color: #e6e8ec
}

.catalog__result {
    position: absolute;
    right: 0;
    top: 0
}

.catalog__result .icon {
    height: 24px;
    margin: 0;
    width: 24px
}

.catalog__sorting {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px
}

@media only screen and (max-width: 767px) {
    .catalog__sorting {
        display:block
    }
}

.catalog .select {
    width: 256px
}

@media only screen and (max-width: 767px) {
    .catalog .select {
        width:100%
    }

    .catalog .select:not(:last-child) {
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 1023px) {
    .catalog .nav {
        display:none
    }
}

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

.catalog__group,.catalog__list {
    display: flex;
    flex-wrap: wrap;
    margin: -32px -16px 0
}

@media only screen and (max-width: 767px) {
    .catalog__group,.catalog__list {
        display:block;
        margin: 0
    }
}

.catalog .card {
    flex: 0 0 calc(33.333% - 32px);
    margin: 32px 16px 0;
    width: calc(33.333% - 32px)
}

@media only screen and (max-width: 1179px) {
    .catalog .card {
        flex:0 0 calc(50% - 32px);
        width: calc(50% - 32px)
    }
}

@media only screen and (max-width: 767px) {
    .catalog .card {
        margin:0;
        width: 100%
    }

    .catalog .card:not(:last-child) {
        margin-bottom: 32px
    }
}

.catalog__group .card:nth-child(n+4) {
    display: none
}

@media only screen and (max-width: 1179px) {
    .catalog__group .card:nth-child(n+4) {
        display:block
    }

    .catalog__group .card:nth-child(n+5) {
        display: none
    }
}

.catalog__btns {
    margin-top: 32px;
    text-align: center
}

.card {
    color: #23262f;
    display: block;
    transition: color .2s
}

body.dark .card {
    color: #fcfcfd
}

.card:hover {
    color: #3772ff
}

.card:hover .card__preview img {
    transform: scale(1.1)
}

.card__preview {
    border-radius: 16px;
    overflow: hidden;
    position: relative
}

.card__preview img {
    transition: transform 1s;
    width: 100%
}

.card__category {
    left: 8px;
    position: absolute;
    top: 8px;
    z-index: 2
}

.card__body {
    display: flex;
    padding: 20px 0
}

.card__avatar {
    background: #e4d7cf;
    border-radius: 50%;
    flex-shrink: 0;
    height: 40px;
    overflow: hidden;
    position: relative;
    top: 2px;
    width: 40px
}

body.dark .card__avatar {
    background: #353945
}

.card__avatar img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.card__details {
    flex-grow: 1;
    padding: 0 16px
}

.card__title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 2px
}

.card__author {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667
}

.card__status {
    align-self: flex-start
}

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

.breadcrumbs__item {
    color: #23262f;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286
}

body.dark .breadcrumbs__item {
    color: #fcfcfd
}

.breadcrumbs__item:not(:last-child) {
    margin-right: 16px
}

.breadcrumbs__item:not(:last-child):after {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' fill='none'%3E%3Cpath fill-rule='evenodd' d='M.793.793a1 1 0 0 0 0 1.414L3.586 5 .793 7.793a1 1 0 0 0 1.414 1.414l3.5-3.5a1 1 0 0 0 0-1.414l-3.5-3.5a1 1 0 0 0-1.414 0z' fill='%23777E90'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
    content: "";
    display: inline-block;
    height: 9px;
    margin-left: 16px;
    width: 6px
}

@media only screen and (max-width: 767px) {
    .breadcrumbs__item:not(:last-child):not(:nth-last-child(2)) {
        display:none
    }
}

.breadcrumbs__link {
    color: #777e90;
    transition: color .2s
}

.breadcrumbs__link:hover {
    color: #3772ff
}

.article {
    padding-top: 80px
}

@media only screen and (max-width: 767px) {
    .article {
        padding-top:40px
    }
}

.article__head {
    margin: 0 auto 80px;
    max-width: 730px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .article__head {
        margin-bottom:32px
    }
}

.article__title {
    margin-bottom: 24px
}

.article .breadcrumbs {
    justify-content: center
}

@media only screen and (max-width: 1179px) {
    .article__body {
        margin-bottom:80px
    }
}

@media only screen and (max-width: 767px) {
    .article__body {
        margin-bottom:32px
    }
}

.article__wrap .article__center {
    max-width: 888px
}

.article .actions {
    margin-top: 80px
}

@media only screen and (max-width: 1179px) {
    .article .actions {
        margin-top:64px
    }
}

@media only screen and (max-width: 767px) {
    .article .actions {
        margin-top:32px
    }
}

.player {
    position: relative
}

.player:before {
    content: "";
    display: block;
    padding-bottom: 53.6%
}

@media only screen and (max-width: 1179px) {
    .player:before {
        padding-bottom:69%
    }
}

@media only screen and (max-width: 767px) {
    .player:before {
        padding-bottom:150%
    }
}

.player img {
    border-radius: 16px;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.player__control {
    align-items: center;
    background: #fcfcfd;
    border-radius: 20px;
    bottom: 8px;
    display: flex;
    height: 40px;
    left: 8px;
    padding: 0 20px;
    position: absolute;
    right: 8px;
    z-index: 3
}

body.dark .player__control {
    background: #141416
}

.player__button .icon {
    fill: #777e90;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.player__button:hover .icon {
    fill: #23262f
}

body.dark .player__button:hover .icon {
    fill: #fcfcfd
}

.player__button:not(:last-child) {
    margin-right: 24px
}

@media only screen and (max-width: 767px) {
    .player__button:not(:last-child) {
        margin-right:16px
    }
}

.player__line {
    background: #e6e8ec;
    border-radius: 4px;
    flex-grow: 1;
    height: 8px;
    margin-right: 24px;
    position: relative
}

@media only screen and (max-width: 767px) {
    .player__line {
        margin-right:16px
    }
}

body.dark .player__line {
    background: #353945
}

.player__progress {
    background: #3772ff;
    border-radius: 4px;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0
}

.player__time {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-right: 24px
}

@media only screen and (max-width: 767px) {
    .player__time {
        margin-right:16px
    }
}

.content h1 {
    font-size: 64px;
    letter-spacing: -.02em;
    line-height: 1
}

@media only screen and (max-width: 767px) {
    .content h1 {
        font-size:48px;
        line-height: 1.16667
    }
}

.content h2 {
    font-size: 48px;
    letter-spacing: -.02em;
    line-height: 1.16667
}

@media only screen and (max-width: 767px) {
    .content h2 {
        font-size:40px;
        letter-spacing: -.01em;
        line-height: 1.2
    }
}

.content h3 {
    font-size: 40px;
    letter-spacing: -.01em;
    line-height: 1.2
}

@media only screen and (max-width: 767px) {
    .content h3 {
        font-size:32px;
        line-height: 1.25
    }
}

.content h4 {
    font-size: 32px;
    letter-spacing: -.01em;
    line-height: 1.25
}

.content h1,.content h2,.content h3,.content h4 {
    font-family: DM Sans,sans-serif;
    font-weight: 700;
    margin-bottom: 32px;
    padding-bottom: 32px;
    position: relative
}

.content h1:after,.content h2:after,.content h3:after,.content h4:after {
    background: #e6e8ec;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 166px
}

body.dark .content h2:after,body.dark .content h3:after,body.dark .content h4:after,body.dark .content h1:after {
    background: #353945
}

.content h1:not(:first-child),.content h2:not(:first-child),.content h3:not(:first-child),.content h4:not(:first-child) {
    margin-top: 80px
}

@media only screen and (max-width: 767px) {
    .content h1:not(:first-child),.content h2:not(:first-child),.content h3:not(:first-child),.content h4:not(:first-child) {
        margin-top:40px
    }
}

.content p {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5
}

.content p:not(:last-child) {
    margin-bottom: 32px
}

.content figure {
    margin: 0 -76px
}

@media only screen and (max-width: 1023px) {
    .content figure {
        margin-left:0;
        margin-right: 0
    }
}

.content figure img {
    border-radius: 16px;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .content figure img {
        min-height:360px;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.content figure:not(:first-child) {
    margin-top: 80px
}

@media only screen and (max-width: 767px) {
    .content figure:not(:first-child) {
        margin-top:40px
    }
}

.actions,.actions__item_share {
    position: relative
}

.actions__item:not(:last-child) {
    margin-right: 16px
}

.actions__button .icon {
    height: 24px;
    width: 24px
}

.actions__item.active .actions__button {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f;
    color: #fcfcfd
}

.actions__item.active .actions__button .icon {
    fill: #fcfcfd
}

body.dark .actions__item.active .actions__button {
    background: #353945;
    box-shadow: inset 0 0 0 2px #353945
}

.actions__body {
    background: #fcfcfd;
    border: 1px solid #e6e8ec;
    opacity: 0;
    position: absolute;
    transition: all .3s;
    visibility: hidden;
    z-index: 5
}

.actions__item.active .actions__body {
    opacity: 1;
    visibility: visible
}

.actions__item_share .actions__body {
    border-radius: 16px;
    box-shadow: 0 32px 32px -8px rgba(31,47,70,.12);
    left: 50%;
    padding: 32px 16px;
    text-align: center;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: 220px
}

body.dark .actions__item_share .actions__body {
    background: #23262f;
    border-color: #353945
}

.actions__item_share .actions__body_up {
    bottom: calc(100% + 8px);
    top: auto
}

.actions__title {
    font-weight: 500;
    margin-bottom: 24px
}

.actions__link span,.actions__list {
    display: flex;
    justify-content: center
}

.actions__link span {
    align-items: center;
    background: #e6e8ec;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    height: 48px;
    transition: all .2s;
    width: 48px
}

.actions__link span .icon {
    height: 20px;
    transition: fill .2s;
    width: 20px
}

.actions__link span:hover {
    background: #3772ff
}

.actions__link span:hover .icon {
    fill: #fcfcfd
}

body.dark .actions__link span {
    background: #353945
}

body.dark .actions__link span .icon {
    fill: #fcfcfd
}

body.dark .actions__link span:hover {
    background: #3772ff
}

body.dark .actions__link span:hover .icon {
    fill: #fcfcfd
}

.actions__link:not(:last-child) {
    margin-right: 24px
}

.actions__favorite {
    position: relative
}

.actions__favorite .icon {
    height: 24px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: all .2s;
    width: 24px
}

.actions__favorite .icon:nth-child(2) {
    opacity: 0;
    z-index: 2
}

.actions__favorite:hover {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f
}

body.dark .actions__favorite:hover {
    box-shadow: inset 0 0 0 2px #353945
}

.actions__favorite:hover .icon {
    fill: #fcfcfd
}

.actions__favorite.active {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f;
    color: #23262f
}

.actions__favorite.active .icon {
    fill: #fcfcfd
}

.actions__favorite.active .icon:first-child {
    opacity: 0
}

.actions__favorite.active .icon:nth-child(2) {
    opacity: 1
}

body.dark .actions__favorite.active {
    background: #353945;
    box-shadow: inset 0 0 0 2px #353945
}

.contact {
    position: relative
}

.contact__body .contact__center {
    align-items: center;
    display: flex;
    min-height: 740px;
    padding-bottom: 112px;
    padding-top: 112px
}

@media only screen and (max-width: 1179px) {
    .contact__body .contact__center {
        padding-top:80px
    }
}

@media only screen and (max-width: 767px) {
    .contact__body .contact__center {
        display:block;
        min-height: auto;
        padding-bottom: 16px;
        padding-top: 32px
    }
}

.contact__wrap {
    max-width: 545px;
    position: relative;
    z-index: 3
}

@media only screen and (max-width: 1023px) {
    .contact__wrap {
        max-width:350px
    }
}

@media only screen and (max-width: 767px) {
    .contact__wrap {
        margin-bottom:16px;
        max-width: 100%
    }
}

.contact__stage {
    margin-bottom: 12px
}

.contact__title {
    margin-bottom: 20px
}

.contact__text {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px
}

.contact .subscription {
    max-width: 300px
}

@media only screen and (max-width: 767px) {
    .contact .subscription {
        max-width:100%
    }
}

.contact__bg {
    pointer-events: none;
    position: absolute;
    right: calc(50% - 730px);
    top: 12px;
    width: 785px
}

@media only screen and (max-width: 1179px) {
    .contact__bg {
        right:calc(50% - 670px);
        width: 700px
    }
}

@media only screen and (max-width: 767px) {
    .contact__bg {
        padding-left:16px;
        position: static;
        width: 100%
    }
}

.contact__bg img {
    width: 100%
}

.contact__foot .contact__center {
    max-width: 1440px;
    padding: 0
}

.contact__info {
    color: #777e90;
    font-weight: 500;
    margin: 0 auto 40px;
    max-width: 350px;
    text-align: center
}

.contact__item {
    color: #23262f;
    display: block;
    transition: color .2s
}

body.dark .contact__item {
    color: #fcfcfd
}

.contact__item:hover {
    color: #3772ff
}

.contact__item:hover .contact__preview img {
    transform: scale(1.1)
}

.contact__preview {
    align-items: center;
    display: flex;
    height: 296px;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.contact__preview img {
    max-height: 100%;
    max-width: 100%;
    transition: transform 1s
}

.contact__category {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2
}

.contact__box {
    padding: 40px 40px 0
}

.contact__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 16px
}

.contact__content {
    color: #777e90
}

.contact__slider {
    padding-bottom: 88px;
    visibility: hidden
}

.contact__slider.slick-initialized {
    visibility: visible
}

.contact .slick-list {
    overflow: visible
}

.contact .slick-slide {
    opacity: 0;
    transition: opacity .4s
}

.contact .slick-slide.slick-active {
    opacity: 1
}

.contact .slick-slide:nth-child(odd) .contact__preview {
    background: #f4f5f6
}

body.dark .contact .slick-slide:nth-child(odd) .contact__preview {
    background: #323642
}

.contact .slick-slide:nth-child(2n) .contact__preview {
    background: #e6e8ec
}

body.dark .contact .slick-slide:nth-child(2n) .contact__preview {
    background: #23262f
}

.contact .slick-arrow {
    bottom: 0
}

.contact .slick-prev {
    left: calc(50% - 48px)
}

.contact .slick-next {
    right: calc(50% - 48px)
}

.faq__title {
    margin-bottom: 48px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .faq__title {
        margin-bottom:40px
    }
}

.faq .nav {
    justify-content: center;
    margin-bottom: 40px
}

@media only screen and (max-width: 767px) {
    .faq .nav {
        display:none
    }
}

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

.faq .select {
    display: none;
    text-align: left
}

@media only screen and (max-width: 767px) {
    .faq .select {
        display:block;
        margin-bottom: 24px
    }
}

.faq__list {
    margin: 0 auto;
    max-width: 546px
}

.faq__item.active .faq__number,.faq__item:hover .faq__head,.faq__item:hover .faq__number {
    color: #3772ff
}

.faq__item.active .faq__arrow .icon {
    transform: rotate(180deg)
}

.faq__item:not(:last-child) .faq__head {
    border-bottom: 1px solid #e6e8ec
}

body.dark .faq__item:not(:last-child) .faq__head {
    border-color: #353945
}

.faq__head {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding: 24px 0;
    position: relative;
    transition: color .2s
}

.faq__number {
    color: #777e90;
    flex-shrink: 0;
    transition: color .2s;
    width: 40px
}

.faq__subtitle {
    flex-grow: 1
}

.faq__arrow {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    margin-left: 16px;
    width: 24px
}

.faq__arrow .icon {
    fill: #777e90;
    height: 24px;
    transition: transform .2s;
    width: 24px
}

.faq__body {
    color: #777e90;
    display: none;
    padding: 24px 0 0 40px
}

.field__label {
    color: #b1b5c3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
    text-transform: uppercase
}

.field__wrap {
    position: relative
}

.field__input,.field__textarea {
    background: none;
    border: 2px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: none;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.71429;
    transition: border-color .2s;
    width: 100%
}

body.dark .field__input,body.dark .field__textarea {
    border-color: #197844;
    color: #fcfcfd
}

.field__input::-moz-placeholder,.field__textarea::-moz-placeholder {
    color: #777e90
}

.field__input::placeholder,.field__textarea::placeholder {
    color: #777e90
}

.field__input:focus,.field__textarea:focus,body.dark .field__input:focus,body.dark .field__textarea:focus {
    border-color: #777e90
}

.field__input {
    height: 48px;
    padding: 0 14px
}

.field__textarea {
    height: 156px;
    padding: 10px 14px;
    resize: none
}

.field__button {
    bottom: 12px;
    font-size: 14px;
    height: 24px;
    padding: 0 16px;
    position: absolute;
    right: 12px
}

body.dark .field__button {
    box-shadow: inset 0 0 0 2px #353945
}

.field__view {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px
}

.field__view .icon {
    fill: #b1b5c3;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.field__view:hover .icon {
    fill: #777e90
}

.field__view.active .icon {
    fill: #141416
}

body.dark .field__view .icon {
    fill: #777e90
}

body.dark .field__view:hover .icon {
    fill: #b1b5c3
}

body.dark .field__view.active .icon {
    fill: #fcfcfd
}

.field__icon {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px
}

.field__icon .icon {
    fill: #777e90;
    height: 24px;
    width: 24px
}

.field__note {
    color: #777e90;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 12px
}

.field_button .field__input {
    padding-right: 136px
}

.field_textarea {
    font-size: 0
}

.field_empty .field__input {
    border: none;
    height: 26px
}

.field_empty .select {
    height: 26px;
    line-height: 26px;
    padding: 0 36px 0 14px
}

.field_empty .select,body.dark .field_empty .select {
    background: none;
    box-shadow: none
}

.field_empty .select:before {
    box-shadow: none;
    height: 24px;
    right: 12px;
    width: 24px
}

body.dark .field_empty .select:before {
    box-shadow: none
}

.field_empty .option {
    padding: 8px 14px
}

.field_icon .field__input,.field_view .field__input {
    padding-right: 48px
}

.question__form {
    margin: 0 auto;
    max-width: 546px
}

.question__fieldset {
    margin-bottom: 40px
}

.question .field:not(:last-child),.question__field:not(:last-child) {
    margin-bottom: 32px
}

.question__label {
    color: #b1b5c3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 24px;
    text-transform: uppercase
}

.question__variants {
    display: flex;
    margin: 0 -10px
}

.question__radio {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
    flex: 0 0 calc(50% - 20px);
    margin: 0 10px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: calc(50% - 20px)
}

.question__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0
}

.question__input:checked+.question__inner,body.dark .question__input:checked+.question__inner {
    box-shadow: inset 0 0 0 2px #3772ff
}

.question__inner {
    align-items: center;
    background: #fcfcfd;
    border-radius: 8px;
    display: flex;
    height: 80px;
    justify-content: center;
    padding: 12px;
    transition: box-shadow .2s
}

@media only screen and (max-width: 767px) {
    .question__inner {
        height:48px
    }
}

.question__inner:hover {
    box-shadow: inset 0 0 0 2px #e6e8ec
}

body.dark .question__inner {
    background: #23262f
}

body.dark .question__inner:hover {
    box-shadow: inset 0 0 0 2px #353945
}

.question__icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    margin-right: 14px;
    width: 44px
}

@media only screen and (max-width: 767px) {
    .question__icon {
        display:none
    }
}

.question__icon .icon {
    fill: #fcfcfd;
    height: 20px;
    width: 20px
}

.question .field__input,.question .field__textarea {
    background: #fcfcfd
}

body.dark .question .field__textarea,body.dark .question .field__input,body.dark .question .select {
    background: #23262f
}

.question__text {
    color: #23262f;
    font-family: DM Sans,sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1
}

body.dark .question__text {
    color: #fcfcfd
}

.question__btns {
    text-align: right
}

.checkbox {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.checkbox__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0
}

.checkbox__input:checked+.checkbox__inner .checkbox__tick {
    background: #3772ff;
    border-color: #3772ff
}

.checkbox__input:checked+.checkbox__inner .checkbox__tick:before {
    opacity: 1
}

.checkbox__inner {
    display: flex
}

.checkbox__inner:hover .checkbox__tick {
    border-color: #3772ff
}

.checkbox__tick {
    border: 2px solid #e6e8ec;
    border-radius: 4px;
    flex-shrink: 0;
    height: 24px;
    margin-right: 12px;
    position: relative;
    transition: all .2s;
    width: 24px
}

body.dark .checkbox__tick {
    background: none;
    border-color: #353945
}

.checkbox__tick:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' fill='none'%3E%3Cpath fill-rule='evenodd' d='M13.707.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L5 7.586 12.293.293a1 1 0 0 1 1.414 0z' fill='%23fcfcfd'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
    content: "";
    height: 10px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: opacity .2s;
    width: 14px
}

.checkbox__text {
    color: #23262f;
    font-weight: 500;
    line-height: 1.71429
}

body.dark .checkbox__text {
    color: #fcfcfd
}

.checkbox__link {
    color: #23262f;
    transition: color .2s
}

body.dark .checkbox__link {
    color: #fcfcfd
}

.checkbox__link:hover,body.dark .checkbox__link:hover {
    color: #3772ff
}

.notifications {
    background: #f4f5f6;
    padding: 32px 0
}

@media only screen and (max-width: 1023px) {
    .notifications {
        padding-bottom:64px
    }
}

body.dark .notifications {
    background: none
}

.notifications__body {
    background: #fcfcfd;
    border-radius: 8px;
    padding: 40px
}

@media only screen and (max-width: 1023px) {
    .notifications__body {
        background:none;
        padding: 0
    }
}

body.dark .notifications__body {
    background: #18191d
}

@media only screen and (max-width: 1023px) {
    body.dark .notifications__body {
        background:none
    }
}

.notifications__top {
    align-items: center;
    border-bottom: 1px solid #e6e8ec;
    display: flex;
    margin-bottom: 32px;
    padding-bottom: 32px
}

@media only screen and (max-width: 767px) {
    .notifications__top {
        border:none;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding-bottom: 0
    }
}

body.dark .notifications__top {
    border-color: #353945
}

.notifications__top .notifications__button:not(:last-child) {
    margin-right: 16px
}

.notifications__title {
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .notifications__title {
        flex:0 0 100%;
        margin: 0 0 20px
    }
}

.notifications__row {
    display: flex;
    flex-direction: row-reverse
}

@media only screen and (max-width: 767px) {
    .notifications__row {
        display:block
    }
}

.notifications__toggle {
    display: none
}

@media only screen and (max-width: 767px) {
    .notifications__toggle {
        display:flex;
        width: 100%
    }
}

.notifications__wrapper {
    flex-grow: 1;
    padding-right: 80px
}

@media only screen and (max-width: 1179px) {
    .notifications__wrapper {
        padding-right:48px
    }
}

@media only screen and (max-width: 1023px) {
    .notifications__wrapper {
        padding-right:32px
    }
}

@media only screen and (max-width: 767px) {
    .notifications__wrapper {
        padding:48px 0 0
    }
}

.notifications__filters {
    flex-shrink: 0;
    width: 352px
}

@media only screen and (max-width: 1339px) {
    .notifications__filters {
        width:300px
    }
}

@media only screen and (max-width: 1179px) {
    .notifications__filters {
        width:230px
    }
}

@media only screen and (max-width: 767px) {
    .notifications__filters {
        display:none;
        padding-top: 32px
    }

    .notifications__filters.visible {
        display: block
    }

    .notifications__list {
        margin: 0 -32px
    }
}

.notifications__btns {
    margin-top: 56px;
    text-align: center
}

@media only screen and (max-width: 1023px) {
    .notifications__btns {
        margin-top:32px
    }
}

.notifications__info {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 32px
}

.notifications__group {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.notifications .checkbox:not(:last-child) {
    margin-bottom: 24px
}

.notifications__control {
    display: flex;
    margin-top: 24px
}

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

.notifications__item {
    display: flex
}

@media only screen and (max-width: 767px) {
    .notifications__item {
        padding-left:32px;
        padding-right: 32px
    }
}

.notifications__item:not(:last-child) {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 32px;
    padding-bottom: 24px
}

body.dark .notifications__item:not(:last-child) {
    border-color: #353945
}

.notifications__item.active .notifications__status {
    display: block
}

.notifications__icon {
    align-items: center;
    border: 2px solid #e6e8ec;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    margin-right: 16px;
    width: 48px
}

body.dark .notifications__icon {
    border-color: #353945
}

.notifications__icon .icon {
    fill: #777e90;
    height: 24px;
    width: 24px
}

.notifications__line {
    display: flex;
    margin-bottom: 8px
}

@media only screen and (max-width: 767px) {
    .notifications__line {
        flex-wrap:wrap
    }
}

.notifications__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-right: auto;
    padding-right: 32px
}

@media only screen and (max-width: 767px) {
    .notifications__subtitle {
        flex:0 0 100%;
        margin: 0 0 8px;
        padding-right: 0
    }
}

.notifications__date {
    color: #777e90;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.66667;
    margin-top: 2px
}

@media only screen and (max-width: 767px) {
    .notifications__date {
        margin:0 auto 0 0
    }
}

.notifications__status {
    background: #58bd7d;
    border-radius: 50%;
    display: none;
    flex-shrink: 0;
    height: 12px;
    margin: 5px 0 0 16px;
    width: 12px
}

@media only screen and (max-width: 767px) {
    .notifications__status {
        margin-top:3px
    }
}

.notifications__content {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667
}

.post {
    background: #fcfcfd;
    border-radius: 8px;
    margin-top: 16px;
    padding: 32px
}

@media only screen and (max-width: 1023px) {
    .post {
        background:none;
        margin-top: 56px;
        padding: 0
    }
}

body.dark .post {
    background: #18191d
}

@media only screen and (max-width: 1023px) {
    body.dark .post {
        background:none
    }
}

.post__list {
    display: flex;
    flex-wrap: wrap;
    margin: -32px -16px 0
}

@media only screen and (max-width: 767px) {
    .post__list {
        -ms-overflow-style:none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        margin: 0 -32px;
        overflow: auto;
        overflow-x: auto;
        scrollbar-width: none
    }

    .post__list::-webkit-scrollbar {
        display: none
    }

    .post__list:after,.post__list:before {
        content: "";
        flex-shrink: 0;
        height: 1px;
        width: 32px
    }
}

.post__item {
    color: #23262f;
    display: flex;
    flex: 0 0 calc(50% - 32px);
    margin: 32px 16px 0;
    width: calc(50% - 32px)
}

@media only screen and (max-width: 1023px) {
    .post__item {
        flex-direction:column
    }
}

@media only screen and (max-width: 767px) {
    .post__item {
        flex:0 0 222px;
        margin: 0;
        width: 222px
    }

    .post__item:not(:last-child) {
        margin-right: 16px
    }
}

body.dark .post__item {
    color: #fcfcfd
}

.post__preview {
    align-items: center;
    border-radius: 16px;
    display: flex;
    flex-shrink: 0;
    height: 144px;
    justify-content: center;
    margin-right: 32px;
    padding: 12px;
    width: 128px
}

@media only screen and (max-width: 1023px) {
    .post__preview {
        margin:0 0 24px;
        width: 100%
    }
}

.post__preview img {
    max-width: 100%
}

.post__details {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.post__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 8px
}

@media only screen and (max-width: 767px) {
    .post__title {
        font-size:16px
    }
}

.post__content {
    color: #777e90;
    margin-bottom: 16px
}

.post__button {
    margin-top: auto
}

.activity {
    background: #f4f5f6;
    padding: 32px 0
}

@media only screen and (max-width: 767px) {
    .activity {
        background:#fcfcfd
    }
}

body.dark .activity {
    background: none
}

@media only screen and (max-width: 1179px) {
    .activity__center {
        padding:0 40px
    }
}

@media only screen and (max-width: 767px) {
    .activity__center {
        padding:0 32px
    }
}

.activity__wrapper {
    background: #fcfcfd;
    border-radius: 8px;
    padding: 40px
}

@media only screen and (max-width: 1179px) {
    .activity__wrapper {
        padding:24px
    }
}

@media only screen and (max-width: 1023px) {
    .activity__wrapper {
        background:none;
        padding: 0
    }
}

body.dark .activity__wrapper {
    background: #18191d
}

@media only screen and (max-width: 1023px) {
    body.dark .activity__wrapper {
        background:none
    }
}

.activity__top {
    align-items: center;
    border-bottom: 1px solid #e6e8ec;
    display: flex;
    margin-bottom: 32px;
    padding-bottom: 32px
}

@media only screen and (max-width: 767px) {
    .activity__top {
        border:none;
        display: block;
        padding: 0
    }
}

body.dark .activity__top {
    border-color: #353945
}

.activity .select {
    background: none;
    display: none
}

@media only screen and (max-width: 1023px) {
    .activity .select {
        display:block;
        margin-right: auto;
        width: 256px
    }
}

@media only screen and (max-width: 767px) {
    .activity .select {
        margin:0 0 16px;
        width: 100%
    }
}

.activity .nav {
    margin-right: auto
}

@media only screen and (max-width: 1023px) {
    .activity .nav {
        display:none
    }
}

.activity .nav__link:not(:last-child) {
    margin-right: 16px
}

@media only screen and (max-width: 1179px) {
    .activity .nav__link:not(:last-child) {
        margin-right:8px
    }
}

.activity__form {
    flex-shrink: 0;
    margin-right: 16px;
    position: relative;
    width: 276px
}

@media only screen and (max-width: 1179px) {
    .activity__form {
        width:230px
    }
}

@media only screen and (max-width: 767px) {
    .activity__form {
        margin:0 0 16px;
        width: 100%
    }
}

.activity__input {
    background: none;
    border: 2px solid #e6e8ec;
    border-radius: 8px;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 12px;
    height: 40px;
    line-height: 1.66667;
    padding: 0 40px 0 14px;
    transition: border-color .2s;
    width: 100%
}

@media only screen and (max-width: 1023px) {
    .activity__input {
        height:48px
    }
}

body.dark .activity__input {
    border-color: #353945;
    color: #fcfcfd
}

.activity__input::-moz-placeholder {
    color: #777e90
}

.activity__input::placeholder {
    color: #777e90
}

.activity__input:focus {
    border-color: #777e90
}

.activity__result {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px
}

.activity__result .icon {
    fill: #777e90;
    height: 20px;
    transition: fill .2s;
    width: 20px
}

.activity__result:hover .icon {
    fill: #3772ff
}

.activity__line {
    align-items: center;
    display: flex;
    margin-bottom: 42px
}

.activity__title {
    margin-right: auto
}

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

@media only screen and (max-width: 1023px) {
    .activity__table {
        display:block
    }
}

.activity__row {
    color: #23262f;
    display: table-row
}

@media only screen and (max-width: 1023px) {
    .activity__row {
        display:flex;
        flex-wrap: wrap
    }

    .activity__row:first-child {
        display: none
    }
}

.activity__row:first-child .activity__col {
    border-bottom: 1px solid #e6e8ec;
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding: 0 16px 24px
}

body.dark .activity__row:first-child .activity__col {
    border-color: #353945
}

@media only screen and (max-width: 1179px) {
    .activity__row:first-child .activity__col:first-child {
        padding-left:0
    }

    .activity__row:first-child .activity__col:last-child {
        padding-right: 0
    }
}

.activity__row:not(:first-child) {
    transition: background .2s
}

.activity__row:not(:first-child) .activity__col {
    font-weight: 500;
    vertical-align: middle
}

.activity__row:not(:first-child) .activity__col:first-child {
    border-radius: 12px 0 0 12px;
    color: #777e90
}

@media only screen and (max-width: 1023px) {
    .activity__row:not(:first-child) .activity__col:first-child {
        border-radius:0
    }
}

.activity__row:not(:first-child) .activity__col:last-child {
    border-radius: 0 12px 12px 0
}

@media only screen and (max-width: 1023px) {
    .activity__row:not(:first-child) .activity__col:last-child {
        border-radius:0
    }
}

.activity__row:not(:first-child):hover {
    background: #f4f5f6
}

@media only screen and (max-width: 1023px) {
    .activity__row:not(:first-child):hover {
        background:none
    }
}

body.dark .activity__row:not(:first-child):hover {
    background: #23262f
}

@media only screen and (max-width: 1023px) {
    body.dark .activity__row:not(:first-child):hover {
        background:none
    }

    .activity__row:not(:last-child) {
        border-bottom: 1px solid #e6e8ec;
        margin-bottom: 32px;
        padding-bottom: 32px
    }

    body.dark .activity__row:not(:last-child) {
        border-color: #353945
    }
}

.activity__col {
    display: table-cell;
    font-weight: 500;
    padding: 20px 16px
}

@media only screen and (max-width: 1023px) {
    .activity__col {
        align-items:center;
        display: flex;
        padding: 0
    }
}

body.dark .activity__col {
    color: #fcfcfd
}

@media only screen and (max-width: 1179px) {
    .activity__col:first-child {
        padding-left:0
    }
}

@media only screen and (max-width: 1023px) {
    .activity__col:nth-child(2) {
        margin-left:auto
    }
}

.activity__col:nth-child(5),.activity__col:nth-child(6) {
    color: #777e90
}

.activity__col:last-child {
    text-align: right
}

@media only screen and (max-width: 1179px) {
    .activity__col:last-child {
        padding-right:0
    }
}

@media only screen and (max-width: 1023px) {
    .activity__col:not(:first-child):not(:nth-child(2)) {
        flex:0 0 100%;
        margin-top: 8px
    }
}

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

.activity__icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 32px
}

.activity__icon img {
    max-width: 100%
}

.activity__label {
    display: none
}

@media only screen and (max-width: 1023px) {
    .activity__label {
        color:#777e90;
        display: block;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.66667;
        margin-right: auto
    }
}

.activity__item {
    position: relative
}

@media only screen and (max-width: 767px) {
    .activity__item_calendar .activity__button {
        width:100%
    }
}

.activity__item_calendar.active>.activity__button {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f;
    color: #fcfcfd
}

.activity__item_calendar.active>.activity__button .icon {
    fill: #fcfcfd
}

body.dark .activity__item_calendar.active>.activity__button {
    background: #353945;
    box-shadow: inset 0 0 0 2px #353945
}

.activity__body {
    background: #fcfcfd;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    box-shadow: 0 40px 32px -24px hsla(0,0%,6%,.12);
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: calc(100% + 16px);
    transition: all .2s;
    visibility: hidden;
    z-index: 2
}

body.dark .activity__body {
    background: #23262f;
    border-color: #353945
}

.activity__item_calendar .activity__body {
    padding: 16px 16px 32px;
    width: 660px
}

@media only screen and (max-width: 767px) {
    .activity__item_calendar .activity__body {
        background:none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: none;
        opacity: 1;
        padding: 16px 0 0;
        position: static;
        visibility: visible;
        width: auto
    }

    body.dark .activity__item_calendar .activity__body {
        background: none
    }

    .activity__item_calendar .activity__datepicker {
        display: none
    }
}

.activity__item_export .activity__body {
    padding: 32px;
    width: 364px
}

@media only screen and (max-width: 767px) {
    .activity__item_export .activity__body {
        padding:16px 0 24px;
        width: 311px
    }
}

.activity__item.active .activity__body {
    opacity: 1;
    visibility: visible
}

@media only screen and (max-width: 767px) {
    .activity__item.active .activity__body {
        display:block
    }
}

.activity__variants {
    display: flex;
    flex-wrap: wrap;
    margin: -8px 0 0
}

@media only screen and (max-width: 767px) {
    .activity__variants {
        margin-left:-16px
    }
}

.activity__variants .activity__button {
    margin: 8px 0 0 16px
}

.activity__range {
    background: none;
    color: #23262f;
    display: none;
    font-family: Poppins,sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 8px 0 16px;
    pointer-events: none;
    text-align: center;
    width: 100%
}

body.dark .activity__range {
    color: #fcfcfd
}

.activity__body .activity__button {
    margin-top: 16px
}

.profile {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.profile__head {
    border-bottom: 1px solid #f1f2f4;
    padding: 40px 0
}

@media only screen and (max-width: 767px) {
    .profile__head {
        padding:16px 0 32px
    }
}

body.dark .profile__head {
    border-color: #23262f
}

.profile__head .profile__center {
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

@media only screen and (max-width: 1179px) {
    .profile__head .profile__center {
        padding:0 40px
    }
}

@media only screen and (max-width: 767px) {
    .profile__head .profile__center {
        display:block;
        padding: 0 32px
    }
}

.profile__title {
    margin-right: auto
}

@media only screen and (max-width: 1179px) {
    .profile__title {
        font-size:40px;
        letter-spacing: -.01em;
        line-height: 48px
    }
}

@media only screen and (max-width: 1023px) {
    .profile__title {
        font-size:32px;
        line-height: 40px
    }
}

.profile .breadcrumbs {
    margin-left: 40px
}

@media only screen and (max-width: 767px) {
    .profile .breadcrumbs {
        margin:16px 0 0
    }
}

.profile__body {
    background: #f8f8f9;
    flex-grow: 1;
    padding: 80px 0
}

@media only screen and (max-width: 1179px) {
    .profile__body {
        padding-top:64px
    }
}

@media only screen and (max-width: 1023px) {
    .profile__body {
        padding-top:40px
    }
}

@media only screen and (max-width: 767px) {
    .profile__body {
        padding:16px 0
    }
}

body.dark .profile__body {
    background: none
}

.profile__body .profile__center {
    align-items: flex-start;
    display: flex
}

@media only screen and (max-width: 1179px) {
    .profile__body .profile__center {
        padding:0 40px
    }
}

@media only screen and (max-width: 1023px) {
    .profile__body .profile__center {
        display:block
    }
}

@media only screen and (max-width: 767px) {
    .profile__body .profile__center {
        padding:0 16px
    }
}

.profile__sidebar {
    flex-shrink: 0;
    margin-right: 80px;
    width: 288px
}

@media only screen and (max-width: 1339px) {
    .profile__sidebar {
        margin-right:48px
    }
}

@media only screen and (max-width: 1179px) {
    .profile__sidebar {
        margin-right:32px;
        width: 224px
    }
}

@media only screen and (max-width: 1023px) {
    .profile__sidebar {
        margin-bottom:32px;
        width: 100%
    }
}

@media only screen and (max-width: 767px) {
    .profile__sidebar {
        margin-bottom:24px
    }
}

.profile__wrapper {
    background: #fcfcfd;
    border-radius: 16px;
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1);
    flex-grow: 1;
    padding: 40px
}

@media only screen and (max-width: 1023px) {
    .profile__wrapper {
        padding:40px 32px
    }
}

@media only screen and (max-width: 767px) {
    .profile__wrapper {
        padding:16px
    }
}

body.dark .profile__wrapper {
    background: #0a235c;
}

@media only screen and (max-width: 1023px) {
    .profile__dropdown {
        position:relative;
        z-index: 5
    }

    .profile__dropdown.active .profile__top:after {
        transform: translateY(-50%) rotate(180deg)
    }

    .profile__dropdown.active .profile__menu {
        opacity: 1;
        visibility: visible
    }
}

.profile__top {
    display: none
}

@media only screen and (max-width: 1023px) {
    .profile__top {
        align-items:center;
        background: #fcfcfd;
        border-radius: 24px;
        display: flex;
        font-family: DM Sans,sans-serif;
        font-size: 14px;
        font-weight: 700;
        height: 48px;
        line-height: 1.14286;
        padding: 0 64px 0 16px;
        position: relative
    }

    body.dark .profile__top {
        background: #23262f
    }

    .profile__top .icon {
        fill: #23262f;
        height: 24px;
        margin-right: 8px;
        width: 24px
    }

    body.dark .profile__top .icon {
        fill: #fcfcfd
    }

    .profile__top:after {
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' d='M16.207 9.793a1 1 0 0 0-1.414 0L12 12.586 9.207 9.793a1 1 0 0 0-1.414 1.414l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0 0-1.414z' fill='%23777e91'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
        content: "";
        height: 24px;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .2s;
        width: 24px
    }

    .profile__menu {
        background: #fcfcfd;
        border-radius: 24px;
        box-shadow: 0 40px 32px -24px hsla(0,0%,6%,.12);
        left: 0;
        opacity: 0;
        padding: 16px;
        position: absolute;
        right: 0;
        top: calc(100% + 4px);
        transition: all .2s;
        visibility: hidden;
        z-index: 2
    }

    body.dark .profile__menu {
        background: #23262f
    }
}

.profile__link {
    align-items: center;
    color: #777e90;
    display: flex;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    line-height: 1.14286;
    padding: 0 16px;
    transition: color .2s
}

@media only screen and (max-width: 1179px) {
    .profile__link {
        padding:0
    }
}

.profile__link .icon {
    fill: #777e90;
    height: 24px;
    margin-right: 8px;
    transition: fill .2s;
    width: 24px
}

.profile__link.active,.profile__link:hover {
    color: #23262f
}

.profile__link.active .icon,.profile__link:hover .icon {
    fill: #23262f
}

body.dark .profile__link.active,body.dark .profile__link:hover {
    color: #fcfcfd
}

body.dark .profile__link.active .icon,body.dark .profile__link:hover .icon {
    fill: #fcfcfd
}

.profile__link:not(:last-child) {
    margin-bottom: 12px
}

@media only screen and (max-width: 1023px) {
    .profile__link:not(:last-child) {
        margin-bottom:4px
    }
}

.profile__link:not(:last-child).profile__link_separator {
    margin-bottom: 25px;
    position: relative
}

@media only screen and (max-width: 1023px) {
    .profile__link:not(:last-child).profile__link_separator {
        margin-bottom:4px
    }
}

.profile__link:not(:last-child).profile__link_separator:after {
    background: #e6e8ec;
    content: "";
    height: 1px;
    left: 16px;
    position: absolute;
    right: 16px;
    top: calc(100% + 12px)
}

@media only screen and (max-width: 1179px) {
    .profile__link:not(:last-child).profile__link_separator:after {
        left:0;
        right: 0
    }
}

@media only screen and (max-width: 1023px) {
    .profile__link:not(:last-child).profile__link_separator:after {
        display:none
    }
}

body.dark .profile__link:not(:last-child).profile__link_separator:after {
    background: #23262f
}

.switch {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.switch__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0
}

.switch__input:checked+.switch__inner .switch__box {
    background: #3772ff
}

.switch__input:checked+.switch__inner .switch__box:before {
    background: #fcfcfd;
    transform: translate(20px,-50%)
}

.switch__inner {
    display: inline-block
}

.switch__box,.switch__inner {
    position: relative;
    transition: all .2s
}

.switch__box {
    background: #e6e8ec;
    border-radius: 12px;
    display: block;
    height: 20px;
    width: 40px
}

body.dark .switch__box {
    background: #353945
}

.switch__box:before {
    background: #3772ff;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s;
    width: 12px
}

.account__head {
    display: flex
}

@media only screen and (max-width: 767px) {
    .account__head {
        display:block
    }
}

.account__details {
    margin-right: auto
}

.account__user {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

.account__email {
    color: #777e90;
    font-weight: 500
}

.account__level {
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px #e6e8ec;
    color: #58bd7d;
    display: inline-block;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    margin-top: 20px;
    padding: 8px 16px
}

@media only screen and (max-width: 767px) {
    .account__level {
        margin-top:12px
    }
}

body.dark .account__level {
    box-shadow: inset 0 0 0 2px #353945
}

.account .select {
    background: #f4f5f6;
    border-radius: 24px;
    box-shadow: inset 0 0 0 2px #f4f5f6;
    flex-shrink: 0;
    margin: 12px 0 0 36px;
    width: 200px
}

@media only screen and (max-width: 767px) {
    .account .select {
        margin:40px 0 0;
        width: 100%
    }
}

body.dark .account .select {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f
}

.account__settings:not(:first-child) {
    margin-top: 48px
}

@media only screen and (max-width: 767px) {
    .account__settings:not(:first-child) {
        margin-top:24px
    }
}

.account__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

.account__box:not(:last-child),.account__title {
    margin-bottom: 40px
}

.account__subtitle {
    border-bottom: 1px solid #e6e8ec;
    color: #b1b5c3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 24px;
    padding-bottom: 24px;
    text-transform: uppercase
}

body.dark .account__subtitle {
    border-color: #353945
}

.account__item {
    align-items: center;
    display: flex;
    font-weight: 500
}

.account__item:not(:last-child) {
    margin-bottom: 24px
}

.account__category {
    margin-right: auto
}

.account__content {
    color: #777e90;
    margin-left: 16px;
    text-align: right
}

.account__btns {
    margin-top: 48px;
    text-align: right
}

@media only screen and (max-width: 767px) {
    .account__btns {
        margin-top:24px;
        text-align: left
    }
}

.referrals__stage {
    color: #353945;
    font-weight: 500
}

body.dark .referrals__stage {
    color: #e6e8ec
}

.referrals__price {
    margin-bottom: 12px
}

.referrals__price span {
    color: #58bd7d
}

.referrals__info {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    margin-bottom: 48px;
    max-width: 280px
}

@media only screen and (max-width: 767px) {
    .referrals__info {
        margin-bottom:32px
    }
}

.referrals__wrap {
    background: #f1f2f4;
    border-radius: 16px;
    padding: 32px
}

@media only screen and (max-width: 767px) {
    .referrals__wrap {
        padding:24px
    }
}

body.dark .referrals__wrap {
    background: #23262f
}

.referrals__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 32px
}

.referrals__row {
    display: flex;
    margin: 0 -8px
}

@media only screen and (max-width: 767px) {
    .referrals__row {
        display:block;
        margin: 0
    }
}

.referrals__col {
    flex: 0 0 calc(50% - 16px);
    margin: 0 8px;
    position: relative;
    width: calc(50% - 16px)
}

@media only screen and (max-width: 767px) {
    .referrals__col {
        margin:0;
        width: 100%
    }

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

.referrals .field__label {
    color: #23262f
}

body.dark .referrals .field__label {
    color: #fcfcfd
}

.referrals .field__input {
    background: #fcfcfd;
    border-color: #fcfcfd;
    padding-right: 82px
}

body.dark .referrals .field__input {
    background: #353945
}

.referrals .field__input:focus {
    border-color: #58bd7d
}

.referrals__category {
    bottom: 11px;
    position: absolute;
    right: 12px
}

.referrals__button {
    margin-top: 48px
}

@media only screen and (max-width: 767px) {
    .referrals__button {
        margin-top:32px
    }
}

.keys__stage {
    color: #353945;
    font-size: 12px;
    line-height: 1.66667
}

@media only screen and (max-width: 767px) {
    .keys__stage {
        margin-bottom:12px
    }
}

body.dark .keys__stage {
    color: #e6e8ec
}

.keys__title {
    margin-bottom: 12px
}

.keys__disabled .keys__title span {
    color: #ff6838
}

.keys__enabled .keys__title span {
    color: #58bd7d
}

.keys__email {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 48px
}

@media only screen and (max-width: 767px) {
    .keys__email {
        margin-bottom:32px
    }
}

.keys__email .icon {
    fill: #23262f;
    height: 24px;
    margin-right: 12px;
    width: 24px
}

body.dark .keys__email .icon {
    fill: #fcfcfd
}

.keys__subtitle {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 24px
}

.keys__info {
    color: #353945;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px
}

body.dark .keys__info {
    color: #e6e8ec
}

.keys__row {
    display: flex;
    margin: 0 -8px
}

@media only screen and (max-width: 767px) {
    .keys__row {
        display:block;
        margin: 0
    }
}

.keys__row .field {
    flex: 0 0 calc(50% - 16px);
    margin: 0 8px;
    position: relative;
    width: calc(50% - 16px)
}

@media only screen and (max-width: 767px) {
    .keys__row .field {
        margin:0;
        width: 100%
    }

    .keys__row .field:not(:last-child) {
        margin-bottom: 16px
    }
}

.keys__form .keys__button {
    margin-top: 16px
}

@media only screen and (max-width: 767px) {
    .keys__form .keys__button {
        width:100%
    }
}

.keys__preview {
    margin-bottom: 48px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .keys__preview {
        margin-top:16px
    }

    .keys__preview img {
        max-width: 300px
    }
}

.keys__text {
    color: #777e90;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center
}

.keys__btns,.keys__confirm .keys__email {
    justify-content: center
}

.keys__btns {
    display: flex
}

@media only screen and (max-width: 767px) {
    .keys__btns {
        display:block
    }

    .keys__btns .keys__button {
        width: 100%
    }
}

.keys__btns .keys__button:not(:last-child) {
    margin-right: 16px
}

@media only screen and (max-width: 767px) {
    .keys__btns .keys__button:not(:last-child) {
        margin:0 0 12px
    }
}

.keys__item {
    border-top: 1px solid #e6e8ec;
    margin-top: 48px;
    padding-top: 48px
}

@media only screen and (max-width: 767px) {
    .keys__item {
        margin-top:24px;
        padding-top: 24px
    }
}

body.dark .keys__item {
    border-color: #353945
}

@media only screen and (max-width: 767px) {
    .keys__item:last-child .keys__button {
        width:100%
    }
}

.keys__group {
    margin-bottom: 24px
}

.keys__box {
    position: relative
}

.keys__box .field {
    padding-right: 36px;
    position: relative
}

.keys__box .field__label {
    color: #23262f
}

body.dark .keys__box .field__label {
    color: #777e90
}

.keys__box .field__input {
    background: #f4f5f6;
    border-color: #f4f5f6;
    padding-right: 82px
}

body.dark .keys__box .field__input {
    background: #23262f;
    border-color: #23262f
}

.keys__box .field__input:focus {
    background: transparent;
    border-color: #58bd7d
}

.keys__box:not(:last-child) {
    margin-bottom: 24px
}

.keys__remove {
    bottom: 12px;
    position: absolute;
    right: 0
}

.keys__remove .icon {
    fill: #777e90;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.keys__remove:hover .icon {
    fill: #23262f
}

.keys__category {
    bottom: 11px;
    position: absolute;
    right: 48px
}

.keys__confirm,.keys__enabled {
    display: none
}

.sessions__section:not(:last-child) {
    margin-bottom: 48px
}

.sessions__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 32px
}

@media only screen and (max-width: 767px) {
    .sessions__title {
        margin-bottom:16px
    }
}

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

.sessions__row {
    display: table-row
}

.sessions__row:first-child .sessions__col {
    border-bottom: 1px solid #f4f5f6;
    color: #353945;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

body.dark .sessions__row:first-child .sessions__col {
    border-color: #23262f;
    color: #b1b5c3
}

.sessions__row:not(:first-child):not(:last-child) .sessions__col {
    border-bottom: 1px solid #e6e8ec
}

body.dark .sessions__row:not(:first-child):not(:last-child) .sessions__col {
    border-color: #353945
}

.sessions__col {
    display: table-cell;
    padding-bottom: 16px;
    padding-top: 16px
}

.sessions__col:nth-child(2) {
    padding-left: 32px;
    padding-right: 32px
}

.sessions__col:last-child {
    text-align: right
}

.sessions__content {
    font-weight: 500
}

.sessions__note {
    color: #777e90
}

.sessions__location,.sessions__status {
    min-width: 64px;
    text-align: center
}

body.dark .sessions__location {
    background: #fcfcfd;
    color: #23262f
}

.sessions__btns {
    margin-top: 36px;
    text-align: right
}

@media only screen and (max-width: 767px) {
    .sessions__btns {
        margin-top:16px
    }

    .sessions__button {
        width: 100%
    }
}

.security__title {
    margin-bottom: 16px
}

.security__disabled .security__title span {
    color: #ff6838
}

.security__enabled .security__title span {
    color: #58bd7d
}

.security__text {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    margin-bottom: 40px
}

.security__text span {
    color: #23262f;
    font-weight: 600
}

body.dark .security__text span {
    color: #fcfcfd
}

.security__email {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 24px
}

.security__email .icon {
    fill: #23262f;
    height: 24px;
    margin-right: 12px;
    width: 24px
}

body.dark .security__email .icon {
    fill: #fcfcfd
}

.security__subtitle {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 8px
}

.security__info {
    color: #353945;
    margin-bottom: 24px
}

body.dark .security__info {
    color: #b1b5c3
}

.security__row {
    display: flex;
    margin: 0 -8px
}

@media only screen and (max-width: 767px) {
    .security__row {
        display:block;
        margin: 0
    }
}

.security__row .field {
    flex: 0 0 calc(50% - 16px);
    margin: 0 8px;
    position: relative;
    width: calc(50% - 16px)
}

@media only screen and (max-width: 767px) {
    .security__row .field {
        margin:0;
        width: 100%
    }

    .security__row .field:not(:last-child) {
        margin-bottom: 16px
    }
}

.security__box {
    background: #f4f5f6;
    border-radius: 16px;
    display: flex;
    margin-top: 32px
}

@media only screen and (max-width: 767px) {
    .security__box {
        margin-top:24px
    }
}

body.dark .security__box {
    background: #23262f
}

.security__details {
    background: #fcfcfd;
    border-radius: 32px 32px 0 0;
    margin: 64px auto 0;
    max-width: 256px;
    padding: 32px 48px
}

body.dark .security__details {
    background: #353945
}

.security__details .security__button {
    margin-top: 48px;
    width: 100%
}

.security__code {
    border: 2px dashed #3772ff;
    border-radius: 8px;
    padding: 16px
}

.security__code img {
    border-radius: 8px;
    width: 100%
}

.security__btns {
    margin-top: 32px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .security__btns {
        margin-top:24px
    }

    .security__btns .security__button {
        width: 100%
    }
}

.security__enabled .security__button {
    margin-top: 16px
}

@media only screen and (max-width: 767px) {
    .security__enabled .security__button {
        width:100%
    }
}

.security__disabled {
    display: none
}

.password__form {
    margin: 0 auto;
    max-width: 380px
}

.password__title {
    text-align: center
}

.password .field:not(:last-child),.password__form .password__title {
    margin-bottom: 32px
}

.password__form .password__button {
    width: 100%
}

.password__wrap {
    display: none;
    text-align: center
}

.password__wrap .password__title {
    margin-bottom: 8px
}

.password__info {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
    text-align: center
}

.login {
    display: flex
}

@media only screen and (max-width: 1023px) {
    .login {
        display:block
    }
}

.login__col {
    position: relative
}

.login__col:first-child {
    background-color: #23262f;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
    min-height: 100vh;
    width: 512px
}

@media only screen and (max-width: 1339px) {
    .login__col:first-child {
        width:420px
    }
}

@media only screen and (max-width: 1179px) {
    .login__col:first-child {
        width:350px
    }
}

@media only screen and (max-width: 1023px) {
    .login__col:first-child {
        background:none!important;
        min-height: auto;
        width: auto
    }
}

body.dark .login__col:first-child {
    background-color: #23262f
}

.login__col:nth-child(2) {
    display: flex;
    flex-grow: 1;
    padding: 148px 64px 132px;
    position: relative
}

@media only screen and (max-width: 1419px) {
    .login__col:nth-child(2) {
        padding:124px 48px 76px
    }
}

@media only screen and (max-width: 1023px) {
    .login__col:nth-child(2) {
        min-height:calc(var(--vh, 1vh)*100);
        padding-bottom: 100px
    }
}

@media only screen and (max-width: 767px) {
    .login__col:nth-child(2) {
        flex-direction:column;
        padding: 100px 32px 32px
    }
}

.login__logo {
    left: 80px;
    position: absolute;
    top: 64px;
    width: 156px
}

@media only screen and (max-width: 1419px) {
    .login__logo {
        left:64px;
        top: 48px
    }
}

@media only screen and (max-width: 767px) {
    .login__logo {
        left:50%;
        top: 40px;
        transform: translateX(-50%)
    }
}

.login__logo img {
    width: 100%
}

.login__logo img:first-child {
    display: none
}

@media only screen and (max-width: 1023px) {
    .login__logo img:first-child {
        display:inline-block
    }

    .login__logo img:nth-child(2),body.dark .login__logo img:first-child {
        display: none
    }

    body.dark .login__logo img:nth-child(2) {
        display: inline-block
    }
}

.login__head {
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    left: 80px;
    line-height: 1.14286;
    position: absolute;
    right: 80px;
    text-align: right;
    top: 80px
}

@media only screen and (max-width: 1419px) {
    .login__head {
        left:64px;
        right: 64px;
        top: 56px
    }
}

@media only screen and (max-width: 1023px) {
    .login__head {
        right:48px
    }
}

@media only screen and (max-width: 767px) {
    .login__head {
        margin-bottom:32px;
        position: static;
        text-align: center
    }
}

.login__head .login__link {
    color: #3772ff;
    margin-left: 5px;
    transition: color .2s
}

.login__head .login__link:hover {
    color: #044eff
}

.login__wrap {
    margin: auto;
    width: 380px
}

@media only screen and (max-width: 639px) {
    .login__wrap {
        width:100%
    }
}

.login__top {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 32px;
    padding-bottom: 32px
}

body.dark .login__top {
    border-color: #353945
}

.login__title {
    margin-bottom: 32px;
    text-align: center
}

.login__form .login__info {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    text-align: center
}

.login__form .login__button,.login__new .login__button {
    width: 100%
}

.login__form .login__button {
    margin-top: 32px
}

.login__foot {
    margin-top: 24px;
    text-align: center
}

.login__form .login__link {
    color: #23262f;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    transition: color .2s
}

body.dark .login__form .login__link {
    color: #fcfcfd
}

.login__form .login__link:hover {
    color: #3772ff
}

.login__verification .login__title {
    margin: 0 -5px 32px;
    text-align: center
}

.login__note {
    color: #353945;
    font-size: 12px;
    line-height: 1.66667;
    margin-bottom: 4px;
    text-align: center
}

.login__text,body.dark .login__note {
    color: #777e90
}

.login__text {
    margin-bottom: 24px;
    text-align: center
}

.login__text span {
    color: #23262f;
    font-weight: 500
}

body.dark .login__text span {
    color: #fcfcfd
}

.login__numbers {
    display: flex;
    margin: 0 -8px 32px
}

.login__number {
    flex: 0 0 calc(25% - 16px);
    margin: 0 8px;
    width: calc(25% - 16px)
}

.login__number input {
    background: #f4f5f6;
    border: 1px solid #f4f5f6;
    border-radius: 8px;
    color: #23262f;
    font-family: DM Sans,sans-serif;
    font-size: 32px;
    font-weight: 600;
    height: 96px;
    text-align: center;
    transition: all .2s;
    width: 100%
}

.login__number input:focus {
    background: #fcfcfd;
    border-color: #e6e8ec
}

body.dark .login__number input {
    background: #23262f;
    border-color: #23262f;
    color: #fcfcfd
}

body.dark .login__number input:focus {
    background: none;
    border-color: #353945
}

.login__btns {
    display: flex;
    justify-content: space-between
}

.login__new .field:not(:last-child) {
    margin-bottom: 32px
}

.login__new,.login__verification {
    display: none
}

.entry__top {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 32px;
    padding-bottom: 32px
}

body.dark .entry__top {
    border-color: #353945
}

.entry__title {
    margin-bottom: 32px;
    text-align: center
}

.entry__info {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    margin-bottom: 12px;
    text-align: center
}

.entry__correct {
    align-items: center;
    background: #f4f5f6;
    border-radius: 20px;
    color: #58bd7d;
    display: flex;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    padding: 0 24px
}

body.dark .entry__correct {
    background: #353945
}

.entry__correct .icon {
    fill: #58bd7d;
    height: 24px;
    margin-right: 4px;
    width: 24px
}

.entry__correct span {
    color: #23262f
}

body.dark .entry__correct span {
    color: #fcfcfd
}

.entry .nav {
    justify-content: center;
    margin-bottom: 32px
}

.entry .nav__link:not(:last-child) {
    margin-right: 24px
}

.entry__container {
    margin-bottom: 32px
}

.entry__item {
    display: none
}

.entry__line {
    align-items: flex-end;
    display: flex
}

.entry__line .field:first-child {
    flex-shrink: 0;
    margin-right: 8px;
    width: 128px
}

.entry__line .field:nth-child(2) {
    flex-grow: 1
}

.entry__foot {
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-content: space-between;
    line-height: 1.66667;
    margin-top: 16px
}

.entry__foot .entry__link {
    color: #3772ff;
    transition: color .2s
}

.entry__foot .entry__link:hover {
    color: #044eff
}

.entry__scan {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    transition: color .2s
}

.entry__scan:hover {
    color: #23262f
}

body.dark .entry__scan:hover {
    color: #fcfcfd
}

.entry__form .entry__button {
    margin-top: 32px;
    width: 100%
}

.entry__box {
    background: #f4f5f6;
    border-radius: 16px;
    display: flex;
    margin-top: 32px
}

@media only screen and (max-width: 767px) {
    .entry__box {
        background:none;
        margin-bottom: -32px
    }
}

body.dark .entry__box {
    background: #23262f
}

@media only screen and (max-width: 767px) {
    body.dark .entry__box {
        background:none
    }
}

.entry__details {
    background: #fcfcfd;
    border-radius: 32px 32px 0 0;
    margin: 64px auto 0;
    max-width: 256px;
    padding: 32px 48px
}

@media only screen and (max-width: 767px) {
    .entry__details {
        background:#f4f5f6;
        margin-top: 0
    }
}

body.dark .entry__details {
    background: #353945
}

.entry__code {
    border: 2px dashed #3772ff;
    border-radius: 8px;
    padding: 16px
}

.entry__code img {
    border-radius: 8px;
    width: 100%
}

.entry__wrap {
    display: none
}

.entry__wrap .entry__button {
    margin-top: 48px;
    width: 100%
}

body.dark .entry__wrap .entry__button {
    box-shadow: inset 0 0 0 2px #777e90
}

body.dark .entry__wrap .entry__button:hover {
    box-shadow: inset 0 0 0 2px #b1b5c3
}

.registration__top {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 32px;
    padding-bottom: 32px
}

body.dark .registration__top {
    border-color: #353945
}

.registration__top .registration__info {
    margin-bottom: 20px
}

.registration__title {
    margin-bottom: 32px;
    text-align: center
}

.registration__info {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    text-align: center
}

.registration__btns {
    display: flex;
    justify-content: center;
    margin: 0 -10px
}

@media only screen and (max-width: 767px) {
    .registration__btns {
        margin:0 -6px
    }
}

.registration__btns .registration__button {
    flex: 0 0 calc(50% - 20px);
    margin: 0 10px
}

@media only screen and (max-width: 767px) {
    .registration__btns .registration__button {
        flex:0 0 calc(50% - 12px);
        margin: 0 6px
    }
}

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

@media only screen and (max-width: 767px) {
    .registration__btns .registration__button:not(:last-child) {
        margin-right:6px
    }
}

.registration .field:not(:last-child) {
    margin-bottom: 32px
}

.registration .checkbox__text {
    color: #777e90;
    font-weight: 400
}

body.dark .registration .checkbox__text {
    color: #777e90
}

.registration .checkbox__link {
    font-weight: 500
}

.registration__confirm .registration__button,.registration__form>.registration__button {
    margin-top: 32px;
    width: 100%
}

.registration__confirm .registration__info,.registration__form>.registration__info {
    margin-bottom: 32px
}

.registration__code .registration__info {
    margin-bottom: 12px
}

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

.registration .radio:not(:last-child) {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 16px;
    padding-bottom: 16px
}

body.dark .registration .radio:not(:last-child) {
    border-color: #353945
}

.registration__numbers {
    display: flex;
    margin: 0 -8px
}

.registration__number {
    flex: 0 0 calc(25% - 16px);
    margin: 0 8px;
    width: calc(25% - 16px)
}

.registration__number input {
    background: #f4f5f6;
    border: 1px solid #f4f5f6;
    border-radius: 8px;
    color: #23262f;
    font-family: DM Sans,sans-serif;
    font-size: 32px;
    font-weight: 600;
    height: 96px;
    text-align: center;
    transition: all .2s;
    width: 100%
}

.registration__number input:focus {
    background: #fcfcfd;
    border-color: #e6e8ec
}

body.dark .registration__number input {
    background: #23262f;
    border-color: #23262f;
    color: #fcfcfd
}

body.dark .registration__number input:focus {
    background: none;
    border-color: #353945
}

.registration__code,.registration__confirm {
    display: none
}

.radio {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.radio__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0
}

.radio__input:checked+.radio__inner .radio__tick:before {
    transform: translate(-50%,-50%) scale(1)
}

.radio__inner {
    display: flex
}

.radio__inner:hover .radio__tick {
    border-color: #3772ff
}

.radio__tick {
    border: 2px solid #e6e8ec;
    border-radius: 50%;
    flex-shrink: 0;
    height: 24px;
    margin-right: 12px;
    position: relative;
    transition: all .2s;
    width: 24px
}

body.dark .radio__tick {
    background: #141416;
    border-color: #353945
}

.radio__tick:before {
    background: #3772ff;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: transform .2s;
    width: 12px
}

.radio__text {
    color: #23262f;
    line-height: 1.71429
}

body.dark .radio__text {
    color: #fcfcfd
}

.radio__phone {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

.radio__email {
    font-weight: 500
}

.popup {
    background: #fcfcfd;
    border-radius: 20px;
    box-shadow: 0 64px 64px -48px rgba(31,47,70,.12);
    margin: auto;
    max-width: 448px;
    padding: 32px;
    width: 100%;
    z-index: 2
}

body.dark .popup {
    background: #23262f
}

@media only screen and (max-width: 767px) {
    .popup {
        padding:32px 16px
    }
}

.popup__title {
    margin-bottom: 32px;
    padding-right: 56px
}

@media only screen and (max-width: 767px) {
    .popup__title {
        font-family:Poppins,sans-serif;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px
    }
}

.popup__title .icon {
    height: 32px;
    margin-right: 16px;
    position: relative;
    top: -2px;
    width: 32px
}

@media only screen and (max-width: 767px) {
    .popup__title .icon {
        margin-right:8px;
        top: 0
    }
}

body.dark .popup__title .icon {
    fill: #fcfcfd
}

.popup .checkbox:not(:last-child),.popup .field:not(:last-child),.popup__list:not(:last-child),.popup__percent:not(:last-child),.popup__sign:not(:last-child),.popup__wrap:not(:last-child) {
    margin-bottom: 32px
}

body.dark .popup .select {
    background: none
}

.popup__wrap {
    background: #f4f5f6;
    border-radius: 4px;
    display: flex;
    padding: 20px 24px
}

body.dark .popup__wrap {
    background: #353945
}

.popup__wrap .popup__category {
    color: #353945;
    font-weight: 500;
    margin-right: auto
}

body.dark .popup__wrap .popup__category {
    color: #e6e8ec
}

.popup__wrap .popup__details {
    text-align: right
}

.popup__currency {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.popup__wrap .popup__price {
    color: #777e90
}

.popup__sign {
    align-items: center;
    background: #e6e8ec;
    border-radius: 50%;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px
}

.popup__sign .icon {
    fill: #353945;
    height: 16px;
    width: 16px
}

body.dark .popup__sign {
    background: #353945
}

body.dark .popup__sign .icon {
    fill: #e6e8ec
}

.popup__line {
    display: flex;
    justify-content: space-between
}

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

.popup__line .popup__category {
    color: #353945;
    font-weight: 500
}

body.dark .popup__line .popup__category {
    color: #e6e8ec
}

.popup__line .popup__details {
    text-align: right
}

@media only screen and (max-width: 767px) {
    .popup__line .popup__details {
        position:relative;
        top: 2px
    }
}

.popup__line .popup__price {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

@media only screen and (max-width: 767px) {
    .popup__line .popup__price {
        font-size:14px
    }
}

.popup__line .popup__note {
    color: #777e90
}

.popup__percent {
    display: flex;
    justify-content: space-between
}

.popup__percent .popup__button {
    border-radius: 12px;
    height: 24px;
    padding: 0 16px
}

.popup>.popup__button {
    width: 100%
}

.popup .mfp-close {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: #fcfcfd url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='none'%3E%3Cpath fill-rule='evenodd' d='M.293 1.289a1 1 0 0 1 1.414 0L7 6.582l5.293-5.293a1 1 0 0 1 1.414 1.414L8.414 7.996l5.293 5.293a1 1 0 0 1-1.414 1.414L7 9.41l-5.293 5.293a1 1 0 0 1-1.414 0 1 1 0 0 1 0-1.414l5.293-5.293L.293 2.703a1 1 0 0 1 0-1.414z' fill='%2323262F'/%3E%3C/svg%3E") no-repeat 50% 50%/14px auto;
    border: 1px solid #e6e8ec;
    border-radius: 50%;
    font-size: 0;
    height: 40px;
    line-height: normal;
    opacity: 1;
    position: absolute;
    right: 32px;
    top: 32px;
    transition: all .2s;
    width: 40px
}

@media only screen and (max-width: 767px) {
    .popup .mfp-close {
        right:16px;
        top: 28px
    }
}

body.dark .popup .mfp-close {
    background-color: #23262f;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath fill='%23FCFCFD' d='m1.613.2.094.083L5 3.585 8.293.293a1 1 0 0 1 1.414 0 1 1 0 0 1 .083 1.32l-.083.094L6.415 5l3.292 3.293a1 1 0 0 1-1.32 1.497l-.094-.083L5 6.415 1.707 9.707A1 1 0 0 1 .21 8.387l.083-.094L3.585 5 .293 1.707a1 1 0 0 1 0-1.414A1 1 0 0 1 1.613.21z'/%3E%3C/svg%3E");
    border-color: #353945
}

.popup .mfp-close:hover {
    border-color: #e6e8ec
}

body.dark .popup .mfp-close:hover {
    border-color: #fcfcfd
}

.mfp-container {
    padding: 48px
}

@media only screen and (max-width: 767px) {
    .mfp-container {
        padding:16px 8px
    }
}

@media (max-width: 900px) {
    .mfp-container {
        padding:16px 8px
    }
}

.mfp-bg {
    background: rgba(20,20,22,.5)
}

body.dark .mfp-bg {
    background: rgba(20,20,22,.75)
}

.mfp-zoom-in .popup {
    opacity: 0;
    transform: scale(.8);
    transition: all .2s ease-in-out
}

.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all .2s ease-out
}

.mfp-zoom-in.mfp-ready .popup {
    opacity: 1;
    transform: scale(1)
}

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 1
}

.mfp-zoom-in.mfp-removing .popup {
    opacity: 0;
    transform: scale(.8)
}

.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0
}

.wallet {
    background: #f4f5f6;
    display: flex;
    padding: 4px
}

@media only screen and (max-width: 1023px) {
    .wallet {
        display:block;
        padding: 32px 16px 16px
    }
}

body.dark .wallet {
    background: #141416
}

.wallet__sidebar {
    background: #fcfcfd;
    border-radius: 4px;
    display: flex;
    flex: 0 0 256px;
    flex-direction: column;
    height: calc(100vh - 88px);
    padding-top: 24px;
    width: 256px
}

@media only screen and (max-width: 1179px) {
    .wallet__sidebar {
        flex:0 0 180px;
        width: 180px
    }
}

@media only screen and (max-width: 1023px) {
    .wallet__sidebar {
        background:none;
        height: auto;
        margin-bottom: 16px;
        padding-top: 0;
        width: 100%
    }
}

body.dark .wallet__sidebar {
    background: #18191d
}

@media only screen and (max-width: 1023px) {
    body.dark .wallet__sidebar {
        background:none
    }
}

.wallet__wrapper {
    flex-grow: 1;
    height: calc(100vh - 88px);
    overflow: auto;
    padding-left: 4px
}

@media only screen and (max-width: 1023px) {
    .wallet__wrapper {
        height:auto;
        padding-left: 0
    }
}

.wallet__group {
    margin-bottom: auto
}

@media only screen and (max-width: 1023px) {
    .wallet__group {
        margin:32px 0 0;
        position: relative;
        z-index: 5
    }

    .wallet__group.active .wallet__top {
        box-shadow: inset 0 0 0 2px #3772ff
    }

    .wallet__group.active .wallet__top:after {
        transform: translateY(-50%) rotate(180deg)
    }

    .wallet__group.active .wallet__menu {
        opacity: 1;
        visibility: visible
    }
}

.wallet__top {
    display: none
}

@media only screen and (max-width: 1023px) {
    .wallet__top {
        align-items:center;
        background: #fcfcfd;
        border-radius: 12px;
        box-shadow: inset 0 0 0 2px #e6e8ec;
        display: flex;
        font-weight: 500;
        height: 48px;
        padding: 0 64px 0 0;
        position: relative;
        transition: all .2s
    }

    body.dark .wallet__top {
        background: #18191d;
        box-shadow: inset 0 0 0 2px #353945
    }

    .wallet__top:after {
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' d='M16.207 9.793a1 1 0 0 0-1.414 0L12 12.586 9.207 9.793a1 1 0 0 0-1.414 1.414l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0 0-1.414z' fill='%23777e91'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
        content: "";
        height: 24px;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .2s;
        width: 24px
    }
}

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

@media only screen and (max-width: 1023px) {
    .wallet__menu {
        background:#fcfcfd;
        border-radius: 12px;
        box-shadow: 0 16px 64px -16px rgba(31,47,70,.15);
        left: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: calc(100% + 4px);
        transition: all .2s;
        visibility: hidden
    }

    body.dark .wallet__menu {
        background: #353945
    }
}

.wallet__link {
    align-items: center;
    color: #777e90;
    display: flex;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 48px;
    line-height: 1.14286;
    transition: color .2s
}

.wallet__link .icon {
    fill: #777e90;
    height: 20px;
    margin: 0 14px 0 22px;
    transition: fill .2s;
    width: 20px
}

.wallet__link.active,.wallet__link:hover {
    color: #23262f
}

@media only screen and (max-width: 1023px) {
    .wallet__link.active,.wallet__link:hover {
        background:#e6e8ec
    }
}

.wallet__link.active .icon,.wallet__link:hover .icon {
    fill: #23262f
}

body.dark .wallet__link.active,body.dark .wallet__link:hover {
    color: #fcfcfd
}

@media only screen and (max-width: 1023px) {
    body.dark .wallet__link.active,body.dark .wallet__link:hover {
        background:#353945
    }
}

body.dark .wallet__link.active .icon,body.dark .wallet__link:hover .icon {
    fill: #fcfcfd
}

.wallet__link:not(:last-child).wallet__link_separator {
    margin-bottom: 41px;
    position: relative
}

@media only screen and (max-width: 1023px) {
    .wallet__link:not(:last-child).wallet__link_separator {
        margin-bottom:0
    }
}

.wallet__link:not(:last-child).wallet__link_separator:after {
    background: #e6e8ec;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% + 20px)
}

body.dark .wallet__link:not(:last-child).wallet__link_separator:after {
    background: #23262f
}

@media only screen and (max-width: 1023px) {
    .wallet__link:not(:last-child).wallet__link_separator:after,.wallet__link_separator~.wallet__link {
        display:none
    }
}

.wallet__color {
    border-radius: 4px;
    flex-shrink: 0;
    height: 12px;
    margin: 0 18px 0 26px;
    width: 12px
}

.wallet__btns {
    margin-top: 24px;
    padding: 16px
}

@media only screen and (max-width: 1023px) {
    .wallet__btns {
        display:flex;
        margin: 0 -6px;
        order: -1;
        padding: 0
    }
}

.wallet__btns .wallet__button {
    width: 100%
}

@media only screen and (max-width: 1023px) {
    .wallet__btns .wallet__button {
        flex:1;
        margin: 0 6px
    }
}

.wallet__btns .wallet__button:last-child {
    display: none
}

@media only screen and (max-width: 1023px) {
    .wallet__btns .wallet__button:last-child {
        display:flex
    }
}

.wallet__btns .wallet__button:not(:last-child) {
    margin-bottom: 12px
}

@media only screen and (max-width: 1023px) {
    .wallet__btns .wallet__button:not(:last-child) {
        margin-bottom:0
    }
}

.wallet__main {
    background: #fcfcfd;
    border-radius: 4px;
    padding: 32px
}

body.dark .wallet__main {
    background: #18191d
}

.wallet__line {
    align-items: center;
    display: flex;
    margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
    .wallet__line {
        flex-wrap:wrap
    }
}

.wallet__title {
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .wallet__title {
        flex:0 0 100%;
        margin: 0 0 20px
    }
}

.wallet__description {
    align-items: center;
    display: flex;
    margin-right: auto
}

.wallet__text {
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .wallet__text {
        font-family:Poppins,sans-serif;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px
    }
}

.wallet__text span {
    color: #b1b5c3;
    margin-left: 12px
}

@media only screen and (max-width: 1023px) {
    .wallet__text span {
        margin-left:6px
    }
}

.wallet__back {
    margin-right: 12px
}

.wallet__back .icon {
    fill: #777e90;
    height: 32px;
    transition: fill .2s;
    width: 32px
}

.wallet__back:hover .icon {
    fill: #23262f
}

.wallet__control {
    display: flex
}

@media only screen and (max-width: 767px) {
    .wallet__control {
        display:none
    }
}

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

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

@media only screen and (max-width: 767px) {
    .wallet__wrap {
        flex-wrap:wrap
    }
}

.wallet .subscription {
    margin-right: 8px;
    width: 256px
}

@media only screen and (max-width: 1179px) {
    .wallet .subscription {
        width:220px
    }
}

@media only screen and (max-width: 767px) {
    .wallet .subscription {
        margin:0 0 16px;
        width: 100%
    }
}

.wallet .subscription__input {
    font-size: 12px;
    height: 40px
}

.wallet .subscription__btn {
    background: none;
    height: 40px;
    right: 0;
    top: 0;
    width: 40px
}

.wallet .subscription__btn .icon {
    fill: #777e90;
    height: 20px;
    transition: fill .2s;
    width: 20px
}

.wallet .subscription__btn:hover .icon {
    fill: #23262f
}

body.dark .wallet .subscription__btn:hover .icon {
    fill: #fcfcfd
}

.wallet .select {
    background: #e6e8ec;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    margin-right: 8px;
    width: 104px
}

body.dark .wallet .select {
    background: #353945
}

.wallet__info {
    font-weight: 500;
    margin-bottom: 4px
}

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

.wallet__number {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

.wallet__category {
    margin-left: 8px
}

.wallet__price {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5
}

.wallet__head {
    color: #777e90;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667;
    padding: 20px 32px 8px
}

@media only screen and (max-width: 767px) {
    .wallet__head {
        padding:20px 0 8px
    }
}

.wallet__body {
    background: #fcfcfd;
    border-radius: 4px;
    overflow: hidden
}

body.dark .wallet__body {
    background: #18191d
}

.successfully {
    padding-top: 40px
}

.successfully__title {
    margin-bottom: 32px;
    text-align: center
}

.successfully__info {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 auto 32px;
    max-width: 280px;
    text-align: center
}

.successfully__info span {
    color: #58bd7d
}

.successfully__list {
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    padding: 24px
}

@media only screen and (max-width: 767px) {
    .successfully__list {
        padding:24px 16px
    }
}

body.dark .successfully__list {
    border-color: #353945
}

.successfully__item:first-child {
    margin-right: auto
}

.successfully__item:first-child .successfully__content {
    color: #58bd7d
}

.successfully__item:nth-child(3) {
    border-top: 1px solid #e6e8ec;
    flex: 0 0 100%;
    margin-top: 16px;
    padding-top: 16px
}

body.dark .successfully__item:nth-child(3) {
    border-color: #353945
}

.successfully__category {
    color: #777e90;
    margin-bottom: 10px
}

.successfully__content {
    color: #23262f;
    font-weight: 500
}

body.dark .successfully__content {
    color: #fcfcfd
}

.successfully>.successfully__button {
    margin-top: 32px;
    width: 100%
}

.successfully__btns {
    display: flex;
    margin: 32px -8px 0
}

.successfully__btns .successfully__button {
    flex: 0 0 calc(50% - 16px);
    margin: 0 8px;
    width: calc(50% - 16px)
}

.overview__list {
    background: #f4f5f6;
    display: flex;
    flex-wrap: wrap;
    margin: -2px
}

body.dark .overview__list {
    background: #141416
}

.overview__item {
    background: #fcfcfd;
    border-radius: 4px;
    flex: 0 0 calc(50% - 4px);
    margin: 2px;
    width: calc(50% - 4px)
}

@media only screen and (max-width: 767px) {
    .overview__item {
        flex:0 0 calc(100% - 4px);
        width: calc(100% - 4px)
    }
}

body.dark .overview__item {
    background: #18191d
}

@media only screen and (max-width: 767px) {
    .overview__item_soon {
        display:none
    }
}

.overview__head {
    align-items: flex-start;
    border-bottom: 1px solid #f1f2f4;
    display: flex;
    min-height: 89px;
    padding: 20px 32px
}

body.dark .overview__head {
    border-color: #23262f
}

.overview__title {
    align-items: center;
    color: #353945;
    display: flex;
    font-weight: 500;
    margin-right: auto
}

body.dark .overview__title {
    color: #f4f5f6
}

.overview__details {
    text-align: right
}

.overview__currency {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.overview__price {
    color: #777e90
}

.overview__color {
    border-radius: 4px;
    flex-shrink: 0;
    height: 12px;
    margin-right: 8px;
    width: 12px
}

.overview__body {
    padding: 20px 32px
}

.overview__soon {
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px #e6e8ec;
    color: #58bd7d;
    display: inline-block;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    padding: 8px 16px
}

body.dark .overview__soon {
    box-shadow: inset 0 0 0 2px #353945
}

.overview__btns {
    display: flex
}

.overview__button {
    height: 32px
}

.overview__button:not(:last-child) {
    margin-right: 8px
}

.overview__wrap {
    padding-bottom: 4px
}

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

.overview__row {
    color: #23262f;
    display: table-row;
    transition: background .2s
}

.overview__row:first-child .overview__col {
    border-bottom: 1px solid #f4f5f6;
    color: #353945;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding-top: 20px
}

body.dark .overview__row:first-child .overview__col {
    border-color: #23262f;
    color: #fcfcfd
}

.overview__row:not(:first-child):not(:last-child) .overview__col {
    border-bottom: 1px solid #e6e8ec
}

body.dark .overview__row:not(:first-child):not(:last-child) .overview__col {
    border-color: #23262f
}

.overview__row:not(:first-child):hover {
    background: #f4f5f6
}

body.dark .overview__row:not(:first-child):hover {
    background: #23262f
}

.overview__col {
    display: table-cell;
    padding: 16px
}

@media only screen and (max-width: 767px) {
    .overview__col {
        padding:16px 8px
    }
}

body.dark .overview__col {
    color: #fcfcfd
}

.overview__col:first-child {
    padding-left: 32px
}

.overview__col:last-child {
    padding-right: 32px
}

.overview__col:last-child,.overview__col:nth-child(3),.overview__col:nth-child(4) {
    text-align: right
}

@media only screen and (max-width: 1023px) {
    .overview__col:nth-child(2) {
        display:none
    }
}

@media only screen and (max-width: 767px) {
    .overview__col:not(:first-child):not(:last-child) {
        display:none
    }
}

.overview__element {
    display: flex
}

@media only screen and (max-width: 767px) {
    .overview__element {
        bottom:-3px;
        position: relative
    }
}

.overview__icon {
    flex-shrink: 0;
    margin-right: 20px;
    width: 32px
}

@media only screen and (max-width: 767px) {
    .overview__icon {
        margin-right:12px
    }
}

.overview__icon img {
    width: 100%
}

.overview__info {
    font-weight: 500
}

.overview__text {
    color: #777e90
}

.integrations__list {
    background: #f4f5f6;
    display: flex;
    flex-wrap: wrap;
    margin: -2px
}

body.dark .integrations__list {
    background: #141416
}

.integrations__item {
    background: #fcfcfd;
    border-radius: 4px;
    display: flex;
    flex: 0 0 calc(50% - 4px);
    flex-direction: column;
    margin: 2px;
    width: calc(50% - 4px)
}

@media only screen and (max-width: 767px) {
    .integrations__item {
        flex:0 0 calc(100% - 4px);
        width: calc(100% - 4px)
    }
}

body.dark .integrations__item {
    background: #18191d
}

.integrations__head {
    align-items: flex-start;
    border-bottom: 1px solid #f1f2f4;
    display: flex;
    flex-grow: 1;
    padding: 20px 32px
}

body.dark .integrations__head {
    border-color: #23262f
}

.integrations__title {
    color: #353945;
    font-weight: 500;
    margin-right: auto;
    padding-left: 20px;
    position: relative
}

body.dark .integrations__title {
    color: #f4f5f6
}

.integrations__title:before {
    border: 2px solid #777e90;
    border-radius: 4px;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 12px
}

.integrations__content {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    margin-left: 24px;
    max-width: 336px;
    text-align: right
}

.integrations__body {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 20px 32px
}

.integrations__radio {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.integrations__radio:not(:last-child) {
    margin-right: 24px
}

.integrations__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0
}

.integrations__input:checked+.integrations__inner .integrations__line {
    color: #58bd7d
}

.integrations__input:checked+.integrations__inner .integrations__line .icon {
    fill: #58bd7d
}

.integrations__input:checked+.integrations__inner .integrations__text span:first-child {
    display: inline
}

.integrations__input:checked+.integrations__inner .integrations__text span:nth-child(2) {
    display: none
}

.integrations__line {
    align-items: center;
    color: #777e90;
    display: flex;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.14286;
    transition: color .2s
}

.integrations__line .icon {
    fill: #777e90;
    height: 16px;
    margin-right: 12px;
    transition: fill .2s;
    width: 16px
}

body.dark .integrations__line .icon {
    fill: #777e90
}

.integrations__line:hover {
    color: #23262f
}

body.dark .integrations__line:hover {
    color: #fcfcfd
}

body.dark .integrations__line:hover .icon {
    fill: #fcfcfd
}

.integrations__text span:first-child {
    display: none
}

.integrations__button {
    height: 32px
}

.deposit__head {
    padding-top: 72px
}

.deposit__head .deposit__icon {
    background: #9757d7
}

.deposit__icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 80px;
    justify-content: center;
    margin: 0 auto 32px;
    width: 80px
}

.deposit__icon .icon {
    fill: #fcfcfd;
    height: 24px;
    width: 24px
}

.deposit__info {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 32px;
    text-align: center
}

.deposit__btns .deposit__button {
    width: 100%
}

.deposit__btns .deposit__button:not(:last-child),.deposit__title {
    margin-bottom: 8px
}

.deposit__title {
    padding-right: 56px
}

@media only screen and (max-width: 767px) {
    .deposit__title .h4 {
        font-family:Poppins,sans-serif;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px
    }
}

.deposit__back {
    display: inline-block;
    margin-right: 16px;
    position: relative;
    top: -7px
}

@media only screen and (max-width: 767px) {
    .deposit__back {
        top:-5px
    }
}

.deposit__back .icon {
    height: 32px;
    transition: fill .2s;
    width: 32px
}

body.dark .deposit__back .icon {
    fill: #fcfcfd
}

.deposit__back:hover .icon {
    fill: #3772ff
}

.deposit__subtitle {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
    padding-left: 48px
}

.deposit__wrap {
    background: #f4f5f6;
    border-radius: 4px;
    display: flex;
    margin-bottom: 32px;
    padding: 20px 32px
}

@media only screen and (max-width: 767px) {
    .deposit__wrap {
        padding:20px
    }
}

body.dark .deposit__wrap {
    background: #353945
}

.deposit__category {
    color: #353945;
    font-weight: 500;
    margin-right: auto;
    padding-left: 20px;
    position: relative
}

body.dark .deposit__category {
    color: #e6e8ec
}

.deposit__category:before {
    background: #58bd7d;
    border-radius: 4px;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 12px
}

.deposit__details {
    text-align: right
}

@media only screen and (max-width: 767px) {
    .deposit__details {
        padding-top:2px
    }
}

.deposit__currency {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

@media only screen and (max-width: 767px) {
    .deposit__currency {
        font-size:14px
    }
}

.deposit__price {
    color: #777e90
}

.deposit__stage {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 12px;
    text-align: center
}

.deposit__content {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667;
    margin-bottom: 32px;
    text-align: center
}

.deposit__code {
    align-items: center;
    background: #f4f5f6;
    border: 1px solid #e6e8ec;
    border-radius: 4px;
    display: flex;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    margin: 0 auto 32px;
    max-width: 310px;
    position: relative
}

body.dark .deposit__code {
    background: #353945;
    border-color: #353945
}

.deposit__copy {
    margin-left: 12px
}

.deposit__copy .icon {
    fill: #777e90;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.deposit__copy:hover .icon {
    fill: #23262f
}

body.dark .deposit__copy:hover .icon {
    fill: #fcfcfd
}

.deposit__preview {
    border: 2px dashed #3772ff;
    border-radius: 12px;
    margin: 0 auto 32px;
    padding: 14px;
    width: 160px
}

.deposit__preview img {
    border-radius: 8px;
    width: 100%
}

.deposit__note {
    color: #777e90;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center
}

.details__row {
    background: #f4f5f6;
    display: flex
}

@media only screen and (max-width: 767px) {
    .details__row {
        display:block
    }
}

body.dark .details__row {
    background: #141416
}

.details__col:first-child {
    flex-grow: 1;
    padding-right: 4px
}

@media only screen and (max-width: 767px) {
    .details__col:first-child {
        padding-right:0
    }
}

.details__col:first-child .details__price {
    color: #777e90
}

.details__col:nth-child(2) {
    background: #fcfcfd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 24px;
    width: 285px
}

@media only screen and (max-width: 767px) {
    .details__col:nth-child(2) {
        margin-top:4px;
        width: 100%
    }
}

body.dark .details__col:nth-child(2) {
    background: #17181b
}

.details__col:nth-child(2) .details__price {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 16px
}

.details__list {
    display: flex;
    flex-wrap: wrap;
    margin: -2px
}

.details__item {
    align-items: flex-start;
    background: #fcfcfd;
    border-radius: 4px;
    display: flex;
    flex: 0 0 calc(50% - 4px);
    margin: 2px;
    padding: 20px 32px;
    width: calc(50% - 4px)
}

@media only screen and (max-width: 1339px) {
    .details__item {
        flex:0 0 calc(100% - 4px);
        width: calc(100% - 4px)
    }
}

@media only screen and (max-width: 767px) {
    .details__item {
        padding:20px 24px
    }
}

body.dark .details__item {
    background: #17181b
}

.details__item:last-child {
    flex: 0 0 calc(100% - 4px);
    width: calc(100% - 4px)
}

.details__title {
    align-items: center;
    color: #353945;
    display: flex;
    font-weight: 500;
    margin-right: auto
}

body.dark .details__title {
    color: #f4f5f6
}

.details__color {
    border-radius: 4px;
    flex-shrink: 0;
    height: 12px;
    margin-right: 8px;
    width: 12px
}

.details__wrap {
    text-align: right
}

.details__currency {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.details__info {
    align-items: center;
    display: flex;
    margin-bottom: 4px
}

.details__info .details__category {
    border-radius: 13px
}

.details__money {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    margin-right: 12px
}

.details__chart {
    margin: -8px 0 -16px;
    width: 100%
}

.faq1 {
    padding: 32px
}

@media only screen and (max-width: 767px) {
    .faq1 {
        padding:24px
    }
}

.faq1__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -32px
}

@media only screen and (max-width: 767px) {
    .faq1__list {
        display:block;
        margin-top: -20px
    }
}

.faq1__item {
    align-items: center;
    color: #23262f;
    display: flex;
    flex: 0 0 33.333%;
    margin-top: 32px;
    padding-right: 20px;
    transition: color .2s;
    width: 33.333%
}

@media only screen and (max-width: 1339px) {
    .faq1__item {
        flex:0 0 50%;
        width: 50%
    }
}

@media only screen and (max-width: 767px) {
    .faq1__item {
        margin-top:20px;
        padding-right: 0;
        width: 100%
    }
}

body.dark .faq1__item {
    color: #fcfcfd
}

.faq1__item:hover {
    color: #3772ff
}

.faq1__preview {
    flex-shrink: 0;
    margin-right: 20px;
    width: 128px
}

@media only screen and (max-width: 767px) {
    .faq1__preview {
        margin-right:12px
    }
}

.faq1__preview img {
    border-radius: 8px;
    width: 100%
}

.faq1__details {
    flex-grow: 1
}

.faq1__category {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667
}

.faq1__title {
    font-weight: 500
}

.faq1__button {
    margin-top: 32px
}

.margin {
    background: #fcfcfd;
    border-radius: 4px;
    padding: 32px
}

body.dark .margin {
    background: #17181b
}

@media only screen and (max-width: 767px) {
    .margin {
        padding:24px 16px
    }
}

.margin__title {
    margin-bottom: 20px
}

.margin__list {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

@media only screen and (max-width: 767px) {
    .margin__list {
        display:block
    }
}

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

.margin__item_flex .margin__number {
    color: #58bd7d
}

@media only screen and (max-width: 767px) {
    .margin__item:not(:last-child) {
        margin-bottom:16px
    }
}

.margin__info {
    color: #353945;
    font-weight: 500;
    margin-bottom: 4px
}

body.dark .margin__info {
    color: #777e90
}

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

.margin__number {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

@media only screen and (max-width: 1023px) {
    .margin__number {
        font-size:20px
    }
}

@media only screen and (max-width: 767px) {
    .margin__number {
        font-size:24px
    }
}

.margin__category {
    margin-left: 8px
}

.margin__price,.margin__stage {
    color: #777e90;
    font-size: 16px;
    line-height: 1.5
}

.margin__chart {
    margin-right: 24px
}

.margin__group {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

@media only screen and (max-width: 767px) {
    .margin__group {
        flex-wrap:wrap;
        margin-top: -24px
    }

    .margin__element {
        flex: 0 0 50%;
        margin-top: 24px;
        width: 50%
    }
}

@media only screen and (max-width: 1179px) {
    .margin__element .margin__info {
        font-size:12px
    }

    .margin__element .margin__number {
        font-size: 16px
    }
}

@media only screen and (max-width: 767px) {
    .margin__element .margin__number {
        font-size:14px
    }
}

@media only screen and (max-width: 1179px) {
    .margin__element .margin__price {
        font-size:12px
    }
}

.balances {
    padding: 20px 0 0
}

@media only screen and (max-width: 767px) {
    .balances {
        padding:0
    }
}

.balances__line {
    align-items: center;
    display: flex;
    padding: 0 32px
}

@media only screen and (max-width: 767px) {
    .balances__line {
        display:none
    }
}

.balances .subscription {
    margin-right: auto
}

.balances__link {
    align-items: center;
    color: #777e90;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667;
    transition: color .2s
}

.balances__link .icon {
    fill: #777e90;
    height: 24px;
    margin-left: 4px;
    transition: fill .2s;
    width: 24px
}

.balances__link:hover {
    color: #23262f
}

.balances__link:hover .icon {
    fill: #23262f
}

body.dark .balances__link:hover {
    color: #fcfcfd
}

body.dark .balances__link:hover .icon {
    fill: #fcfcfd
}

.balances__row {
    display: flex
}

.balances__list>.balances__row {
    border-bottom: 1px solid #f4f5f6
}

body.dark .balances__list>.balances__row {
    border-color: #23262f
}

.balances__col {
    flex: 1;
    padding: 16px
}

.balances__col:first-child {
    padding-left: 32px
}

@media only screen and (max-width: 767px) {
    .balances__col:first-child {
        padding-left:16px
    }
}

.balances__col:last-child {
    padding-right: 32px
}

@media only screen and (max-width: 767px) {
    .balances__col:last-child {
        padding-right:16px
    }
}

.balances__col:not(:first-child) {
    text-align: right
}

@media only screen and (max-width: 767px) {
    .balances__col:not(:first-child):not(:nth-child(2)) {
        display:none
    }
}

.balances__list>.balances__row .balances__col {
    color: #353945;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

body.dark .balances__list>.balances__row .balances__col {
    color: #e6e8ec
}

.balances__item {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: background .2s
}

.balances__item.active,.balances__item:hover {
    background: #f8f8f9
}

body.dark .balances__item.active,body.dark .balances__item:hover {
    background: #23262f
}

.balances__item.active .balances__btns {
    display: flex
}

.balances__item:not(:last-child) {
    border-bottom: 1px solid #e6e8ec
}

body.dark .balances__item:not(:last-child) {
    border-color: #23262f
}

@media only screen and (max-width: 1023px) {
    body.dark .balances__item:not(:last-child) {
        border-color:#353945
    }
}

.balances__item .balances__row {
    cursor: pointer;
    display: flex;
    padding: 16px 0 20px
}

.balances__item .balances__col {
    padding: 0 16px
}

.balances__item .balances__col:first-child {
    padding-left: 32px
}

@media only screen and (max-width: 767px) {
    .balances__item .balances__col:first-child {
        padding-left:16px
    }
}

.balances__item .balances__col:last-child {
    padding-right: 32px
}

@media only screen and (max-width: 767px) {
    .balances__item .balances__col:last-child {
        padding-right:16px
    }
}

.balances__currency {
    display: flex
}

.balances__currency .balances__text {
    font-weight: 400
}

.balances__icon {
    flex-shrink: 0;
    margin-right: 20px;
    width: 32px
}

.balances__icon img {
    width: 100%
}

.balances__info {
    font-weight: 500
}

.balances__text {
    color: #777e90;
    font-weight: 500
}

.balances__btns {
    display: none;
    margin-top: -10px;
    padding: 0 32px 20px
}

@media only screen and (max-width: 767px) {
    .balances__btns {
        padding:0 16px 20px
    }
}

.balances__button {
    height: 32px
}

@media only screen and (max-width: 767px) {
    .balances__button {
        flex-grow:1;
        padding: 0
    }
}

.balances__button:not(:last-child) {
    margin-right: 8px
}

.bidding__head {
    padding: 40px 0
}

@media only screen and (max-width: 767px) {
    .bidding__head {
        padding:16px 0 32px
    }
}

.bidding__head .bidding__center {
    align-items: center
}

.bidding__center {
    display: flex
}

@media only screen and (max-width: 1179px) {
    .bidding__center {
        padding:0 40px
    }
}

@media only screen and (max-width: 767px) {
    .bidding__center {
        display:block;
        padding: 0 32px
    }
}

.bidding__title {
    margin-right: auto
}

@media only screen and (max-width: 767px) {
    .bidding__title {
        font-size:32px;
        line-height: 40px;
        margin: 0 0 16px
    }
}

.bidding__info {
    color: #777e90;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667
}

.bidding__link {
    color: #23262f;
    margin-left: 8px;
    transition: color .2s
}

.bidding__link .icon {
    fill: #23262f;
    height: 20px;
    transition: fill .2s;
    width: 20px
}

body.dark .bidding__link {
    color: #e6e8ec
}

body.dark .bidding__link .icon {
    fill: #e6e8ec
}

.bidding__link:hover {
    color: #3772ff
}

.bidding__link:hover .icon {
    fill: #3772ff
}

.bidding__body {
    background: #f8f8f9;
    padding: 80px 0 136px
}

@media only screen and (max-width: 1179px) {
    .bidding__body {
        padding-bottom:80px
    }
}

@media only screen and (max-width: 1023px) {
    .bidding__body {
        padding-top:48px
    }
}

@media only screen and (max-width: 767px) {
    .bidding__body {
        background:none;
        border-top: 1px solid #e6e8ec;
        padding: 32px 0
    }
}

body.dark .bidding__body {
    background: none;
    box-shadow: inset 0 1px 0 0 #23262f
}

@media only screen and (max-width: 767px) {
    body.dark .bidding__body {
        border:none
    }
}

@media only screen and (max-width: 1023px) {
    .bidding__body .bidding__center {
        display:block
    }
}

.bidding__steps {
    flex-shrink: 0;
    margin-right: auto;
    width: 220px
}

@media only screen and (max-width: 1023px) {
    .bidding__steps {
        display:none
    }
}

.bidding__step {
    align-items: center;
    border-radius: 24px;
    color: #777e90;
    display: flex;
    font-family: DM Sans,sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 48px;
    line-height: 1.14286;
    padding: 0 8px;
    position: relative;
    transition: all .2s
}

.bidding__step.next {
    color: #23262f
}

.bidding__step.next .bidding__number {
    border-color: #58bd7d
}

.bidding__step.active {
    background: #fcfcfd;
    box-shadow: 0 4px 16px -8px hsla(0,0%,6%,.1);
    color: #23262f
}

.bidding__step.active .bidding__number {
    border-color: #58bd7d
}

.bidding__step.active .bidding__number:after {
    opacity: 1
}

.bidding__step:not(:last-child) {
    margin-bottom: 24px
}

.bidding__step:not(:last-child):after {
    border-left: 2px dashed #b1b5c3;
    content: "";
    height: 24px;
    left: 23px;
    position: absolute;
    top: 100%
}

body.dark .bidding__step.next {
    color: #fcfcfd
}

body.dark .bidding__step.active {
    background: #23262f;
    color: #fcfcfd
}

body.dark .bidding__step.active:not(:last-child):after {
    border-color: #777e90
}

.bidding__number {
    align-items: center;
    border: 2px solid #e6e8ec;
    border-radius: 50%;
    display: flex;
    height: 32px;
    justify-content: center;
    margin-right: 16px;
    position: relative;
    transition: all .2s;
    width: 32px
}

body.dark .bidding__number {
    border-color: #777e90
}

.bidding__number:after {
    background: #58bd7d url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='m4 8 2.667 2.667L12 5.333' stroke='%23fcfcfd' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50%/16px auto;
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s;
    width: 100%
}

.bidding__wrapper {
    background: #fcfcfd;
    border-radius: 16px;
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1);
    padding: 40px;
    width: 736px
}

@media only screen and (max-width: 1179px) {
    .bidding__wrapper {
        flex-grow:1;
        margin-left: 64px;
        padding: 32px;
        width: auto
    }
}

@media only screen and (max-width: 1023px) {
    .bidding__wrapper {
        margin-left:0;
        padding: 40px
    }
}

@media only screen and (max-width: 767px) {
    .bidding__wrapper {
        background:none;
        border-radius: 0;
        box-shadow: none;
        padding: 0
    }
}

body.dark .bidding__wrapper {
    background: #18191d
}

@media only screen and (max-width: 767px) {
    body.dark .bidding__wrapper {
        background:none
    }
}

.bidding__item:not(:first-child) {
    display: none
}

.bidding__control {
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px
}

@media only screen and (max-width: 767px) {
    .bidding__control {
        display:block;
        margin-bottom: 32px
    }
}

.bidding__back {
    align-items: center;
    display: flex;
    font-family: Poppins,sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

body.dark .bidding__back {
    color: #fcfcfd
}

.bidding__back .icon {
    fill: #777e90;
    height: 14px;
    margin-right: 16px;
    transition: transform .2s;
    width: 14px
}

.bidding__back:hover .icon {
    transform: translateX(-2px)
}

.bidding__money {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

@media only screen and (max-width: 767px) {
    .bidding__money {
        display:none
    }
}

.bidding__money img {
    margin-left: 12px;
    width: 24px
}

.currency__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 48px
}

@media only screen and (max-width: 767px) {
    .currency__title {
        margin-bottom:32px
    }
}

.currency__row {
    display: flex;
    margin: 0 -12px
}

@media only screen and (max-width: 767px) {
    .currency__row {
        display:block;
        margin: 0
    }
}

.currency__row:not(:last-child) {
    margin-bottom: 48px
}

.currency__col {
    flex: 0 0 calc(50% - 24px);
    margin: 0 12px;
    width: calc(50% - 24px)
}

@media only screen and (max-width: 767px) {
    .currency__col {
        margin:0;
        width: 100%
    }

    .currency__col:not(:last-child) {
        margin-bottom: 24px
    }
}

.currency__label {
    color: #23262f;
    font-weight: 500;
    margin-bottom: 12px
}

body.dark .currency__label {
    color: #fcfcfd
}

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

.currency .select,body.dark .currency .select {
    background: none
}

.currency__field {
    position: relative
}

.currency__input,.currency__value {
    color: #23262f;
    font-family: DM Sans,sans-serif;
    font-size: 96px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1
}

@media only screen and (max-width: 767px) {
    .currency__input,.currency__value {
        font-size:64px
    }
}

.currency__value {
    max-width: 500px;
    min-height: 96px;
    min-width: 72px;
    opacity: 0;
    padding-right: 5px
}

@media only screen and (max-width: 767px) {
    .currency__value {
        max-width:280px;
        min-height: 64px;
        padding-bottom: 10px
    }
}

.currency__input {
    background: none;
    border: none;
    box-shadow: none;
    color: #23262f;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

body.dark .currency__input {
    color: #fcfcfd
}

.currency__sign {
    position: relative;
    top: 8px
}

@media only screen and (max-width: 767px) {
    .currency__sign {
        font-size:24px
    }
}

.currency__sign:first-child {
    margin-right: 8px
}

.currency__sign:last-child {
    margin-left: 4px
}

.currency__price {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 12px;
    text-align: center
}

.currency__note {
    color: #777e90;
    margin-left: 8px
}

.currency__note:not(:last-child) {
    margin-right: 8px
}

.currency__variants {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -8px
}

.currency__variants .currency__button {
    color: #777e90;
    margin: 8px 8px 0
}

.currency__variants .currency__button.active,.currency__variants .currency__button:hover {
    color: #fcfcfd
}

.currency__btns,.currency__foot {
    margin-top: 48px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .currency__btns,.currency__foot {
        margin-top:32px
    }
}

.currency__btns .currency__button {
    min-width: 184px
}

@media only screen and (max-width: 767px) {
    .currency__btns .currency__button {
        min-width:100%
    }
}

.notes__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 24px
}

.notes__info,.notes__text {
    margin-bottom: 12px
}

.notes__text {
    color: #777e90
}

.notes__code,.notes__info {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.notes__code {
    background: #e6e8ec;
    border-radius: 4px;
    padding: 12px;
    text-align: center
}

body.dark .notes__code {
    background: #353945
}

.notes__btns,.notes__foot {
    margin-top: 24px
}

.notes__btns {
    text-align: right
}

.notes__foot {
    text-align: center
}

.notes__button {
    min-width: 184px
}

.notes__list {
    margin-bottom: 32px
}

.notes__line {
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

.notes__line:not(:last-child) {
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 12px;
    padding-bottom: 12px
}

body.dark .notes__line:not(:last-child) {
    border-color: #353945
}

.notes__subtitle {
    color: #777e90;
    margin-right: auto;
    padding-right: 20px
}

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

.notes__content {
    font-weight: 500;
    margin-right: 12px
}

.notes__copy .icon {
    fill: #777e90;
    height: 24px;
    transition: fill .2s;
    width: 24px
}

.notes__copy:hover .icon {
    fill: #23262f
}

body.dark .notes__copy:hover .icon {
    fill: #fcfcfd
}

.crypto__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-bottom: 20px
}

.crypto__form {
    flex-shrink: 0;
    margin-bottom: 40px;
    position: relative
}

.crypto__input {
    background: none;
    border: 2px solid #e6e8ec;
    border-radius: 8px;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 12px;
    height: 48px;
    line-height: 1.66667;
    padding: 0 48px 0 14px;
    transition: border-color .2s;
    width: 100%
}

body.dark .crypto__input {
    border-color: #353945;
    color: #fcfcfd
}

.crypto__input::-moz-placeholder {
    color: #777e90
}

.crypto__input::placeholder {
    color: #777e90
}

.crypto__input:focus {
    border-color: #3772ff
}

.crypto__result {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px
}

.crypto__result .icon {
    fill: #777e90;
    height: 20px;
    transition: fill .2s;
    width: 20px
}

.crypto__result:hover .icon {
    fill: #3772ff
}

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

.crypto__row {
    color: #23262f;
    display: table-row
}

.crypto__row:first-child .crypto__col {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding-bottom: 24px;
    padding-top: 0
}

.crypto__row:not(:first-child) {
    cursor: pointer
}

.crypto__row:not(:first-child) .crypto__col {
    border-top: 1px solid #e6e8ec;
    font-weight: 500;
    vertical-align: middle
}

body.dark .crypto__row:not(:first-child) .crypto__col {
    border-color: #353945
}

.crypto__row:not(:first-child) .crypto__col:first-child {
    color: #777e90
}

.crypto__row:not(:first-child):hover .crypto__subtitle {
    color: #3772ff
}

.crypto__col {
    display: table-cell;
    font-weight: 500;
    padding: 16px;
    text-align: right
}

body.dark .crypto__col {
    color: #fcfcfd
}

.crypto__col:first-child,.crypto__col:nth-child(2) {
    text-align: left
}

.crypto__col:first-child {
    font-size: 12px;
    padding-left: 0
}

@media only screen and (max-width: 767px) {
    .crypto__col:first-child {
        display:none
    }
}

.crypto__col:last-child {
    padding-right: 0
}

@media only screen and (max-width: 767px) {
    .crypto__col:last-child {
        display:none
    }
}

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

.crypto .favorite {
    margin-right: 10px;
    position: relative;
    top: -4px
}

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

.crypto__icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 32px
}

.crypto__icon img {
    max-width: 100%
}

.crypto__subtitle {
    margin-right: 4px;
    transition: color .2s
}

.crypto__currency {
    color: #777e90;
    font-weight: 400
}

.crypto__positive {
    color: #58bd7d
}

.crypto__negative {
    color: #ff6838
}

.payment__options {
    background: #f4f5f6;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
    padding: 24px 36px
}

@media only screen and (max-width: 767px) {
    .payment__options {
        display:block;
        margin-bottom: 32px
    }
}

body.dark .payment__options {
    background: #23262f
}

.payment__option {
    display: flex
}

@media only screen and (max-width: 767px) {
    .payment__option:not(:last-child) {
        margin-bottom:32px
    }
}

.payment__icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    margin-right: 10px;
    width: 40px
}

.payment__icon .icon {
    fill: #fcfcfd;
    height: 20px;
    width: 20px
}

.payment__category {
    color: #777e90;
    font-size: 12px;
    line-height: 1.66667
}

.payment__content {
    font-weight: 500
}

.payment__line {
    align-items: center;
    display: flex;
    margin-bottom: 40px
}

.payment__subtitle {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333;
    margin-right: auto
}

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

.payment__fieldset>.field {
    margin-bottom: 32px
}

.payment__row {
    display: flex;
    margin: 0 -8px
}

.payment__row .field {
    flex: 0 0 calc(50% - 16px);
    margin: 0 8px;
    width: calc(50% - 16px)
}

.payment .checkbox {
    margin-top: 32px
}

.payment__info {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 48px
}

@media only screen and (max-width: 767px) {
    .payment__info {
        margin-bottom:32px
    }
}

.payment__flex {
    display: flex;
    justify-content: space-between
}

.payment__flex:first-child {
    border-bottom: 1px solid #e6e8ec;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom: 12px
}

body.dark .payment__flex:first-child {
    border-color: #353945
}

.payment__flex:not(:first-child) .payment__cell:first-child {
    color: #777e90
}

.payment__flex:not(:last-child) {
    margin-bottom: 12px
}

.payment__cell:nth-child(2) {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5
}

.payment__btns {
    margin-top: 48px;
    text-align: right
}

@media only screen and (max-width: 767px) {
    .payment__btns {
        margin-top:32px
    }
}

.payment__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 48px
}

@media only screen and (max-width: 767px) {
    .payment__foot {
        display:block;
        margin-top: 32px
    }

    .payment__foot .payment__button {
        width: 100%
    }

    .payment__foot .payment__button:not(:last-child) {
        margin-bottom: 10px
    }
}

.exchange {
    background: #f1f2f4;
    min-height: calc(100vh - 88px);
    padding: 4px
}

@media only screen and (max-width: 1023px) {
    .exchange {
        min-height:calc(100vh - 114px);
        padding: 16px 16px 132px
    }
}

body.dark .exchange {
    background: #1c2130;
}

.exchange__main {
    align-items: center;
    background: #fcfcfd;
    border-radius: 4px;
    display: flex;
    padding: 20px
}

@media only screen and (max-width: 1023px) {
    .exchange__main {
        display:block;
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 767px) {
    .exchange__main {
        padding:16px
    }
}

body.dark .exchange__main {
    background: #0c1b3f;
}

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

@media only screen and (max-width: 1023px) {
    .exchange__details {
        margin-bottom:16px
    }
}

@media only screen and (max-width: 767px) {
    .exchange__details {
        display:block;
        margin-bottom: 24px
    }
}

.exchange__box .exchange__content {
    align-items: center;
    color: #777e90;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

.exchange__box .exchange__content .icon {
    fill: #777e90;
    height: 16px;
    margin-right: 4px;
    width: 16px
}

.exchange__box:not(:last-child) {
    margin-right: 32px
}

@media only screen and (max-width: 767px) {
    .exchange__box:not(:last-child) {
        margin:0 0 8px
    }
}

.exchange__line {
    align-items: center;
    display: flex;
    margin-bottom: 4px
}

.exchange__info {
    color: #141416;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

body.dark .exchange__info {
    color: #fcfcfd
}

.exchange__category {
    border-radius: 12px;
    margin-left: 4px;
    padding: 7px 8px 5px
}

.exchange__price {
    color: #ff6838;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

.exchange__list {
    display: flex;
    margin-left: auto
}

@media only screen and (max-width: 1023px) {
    .exchange__list {
        margin:0
    }
}

@media only screen and (max-width: 767px) {
    .exchange__list {
        flex-wrap:wrap;
        margin: -12px 0 0
    }
}

.exchange__item {
    flex: 0 0 160px;
    padding-right: 24px;
    width: 160px
}

@media only screen and (max-width: 1179px) {
    .exchange__item {
        flex:0 0 auto;
        width: auto
    }
}

@media only screen and (max-width: 1023px) {
    .exchange__item {
        flex:1 0 auto
    }
}

@media only screen and (max-width: 767px) {
    .exchange__item {
        flex:0 0 50%;
        margin: 12px 0;
        width: 50%
    }
}

.exchange__item .exchange__content {
    color: #141416;
    font-weight: 500
}

body.dark .exchange__item .exchange__content {
    color: #fcfcfd
}

.exchange__item:not(:last-child) {
    border-right: 1px solid #e6e8ec;
    margin-right: 24px
}

body.dark .exchange__item:not(:last-child) {
    border-color: #23262f
}

@media only screen and (max-width: 767px) {
    .exchange__item:not(:last-child) {
        border:none;
        margin: 12px 0 0
    }
}

.exchange__subtitle {
    -webkit-margin-after: 4px;
    align-items: center;
    color: #777e90;
    display: flex;
    font-size: 12px;
    line-height: 1.66667;
    margin-block-end:4px}

.exchange__subtitle .icon {
    fill: #777e90;
    height: 16px;
    margin-right: 4px;
    width: 16px
}

.exchange>.nav {
    display: none
}

@media only screen and (max-width: 1023px) {
    .exchange>.nav {
        display:flex;
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 767px) {
    .exchange>.nav {
        justify-content:space-between
    }

    .exchange>.nav .nav__link:not(:last-child) {
        margin-right: 0
    }
}

.exchange .nav__link.active {
    background: #e6e8ec;
    color: #23262f
}

.exchange__row {
    display: flex;
    margin-top: 4px
}

@media only screen and (max-width: 1179px) {
    .exchange__row {
        display:block
    }

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

@media only screen and (max-width: 1179px) and (max-width:1023px) {
    .exchange__row:after {
        display:none
    }
}

.exchange__col:first-child,.exchange__col:nth-child(3) {
    flex-shrink: 0;
    width: 256px
}

@media only screen and (max-width: 1179px) {
    .exchange__col:first-child,.exchange__col:nth-child(3) {
        float:left
    }
}

@media only screen and (max-width: 1023px) {
    .exchange__col:first-child,.exchange__col:nth-child(3) {
        float:none;
        width: 100%
    }
}

.exchange__col:nth-child(2) {
    flex: 0 0 calc(100% - 520px);
    margin: 0 4px;
    width: calc(100% - 520px);
}

@media only screen and (max-width: 1179px) {
    .exchange__col:nth-child(2) {
        float:right;
        margin: 0 0 0 4px;
        width: calc(100% - 260px)
    }
}

@media only screen and (max-width: 1023px) {
    .exchange__col:nth-child(2) {
        float:none;
        margin: 0;
        width: 100%
    }
}

@media only screen and (max-width: 1179px) {
    .exchange__col:first-child {
        margin-bottom:4px
    }
}

@media only screen and (max-width: 1023px) {
    .exchange__col:first-child {
        display:none;
        margin-bottom: 0
    }

    .exchange__col:nth-child(3) {
        display: none
    }
}

@media only screen and (min-width: 1024px) {
    .exchange__col {
        display:block!important
    }
}

.balance {
    background: #fcfcfd;
    border-radius: 4px
}

body.dark .balance {
    background: #1f2023;
}

.balance__head {
    align-items: center;
    display: flex;
    padding: 16px 16px 12px
}

.balance__sorting {
    align-items: center;
    display: flex;
    margin-right: auto
}

.balance__direction {
    align-items: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    transition: all .2s;
    width: 32px
}

.balance__direction span {
    border-radius: 1;
    height: 2px;
    width: 12px
}

.balance__direction span:not(:last-child) {
    margin-bottom: 2px
}

.balance__direction.active,.balance__direction:hover {
    background: #f1f2f4
}

body.dark .balance__direction.active,body.dark .balance__direction:hover {
    background: #23262f
}

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

.balance .select {
    background: #f1f2f4;
    border-radius: 4px;
    box-shadow: none;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    padding: 0 36px 0 8px;
    width: 62px
}

body.dark .balance .select {
    background: #23262f;
    box-shadow: inset 0 0 0 2px #23262f
}

.balance .select:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath fill-rule='evenodd' d='M9.207.793a1 1 0 0 0-1.414 0L5 3.586 2.207.793A1 1 0 1 0 .793 2.207l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0 0-1.414z' fill='%23777E90'/%3E%3C/svg%3E");
    right: 4px
}

.balance .select .list {
    border-radius: 4px
}

.balance .select .option {
    font-size: 12px;
    padding: 4px 8px
}

.balance__top {
    color: #777e90;
    font-weight: 600;
    margin-bottom: 4px
}

.balance__item,.balance__top {
    display: flex;
    font-size: 12px;
    line-height: 1.66667;
    padding: 4px 16px
}

.balance__item {
    font-weight: 500;
    position: relative
}

.balance__item.negative .balance__line {
    background: rgba(255,104,56,.15)
}

.balance__item.negative .balance__price {
    color: #ff6838
}

.balance__item.positive .balance__line {
    background: rgba(88,189,125,.15)
}

.balance__item.positive .balance__price {
    color: #58bd7d
}

.balance__item:not(:last-child) {
    margin-bottom: 4px
}

@media only screen and (max-width: 1179px) {
    .balance__item:nth-child(n+10) {
        display:none
    }
}

@media only screen and (max-width: 1023px) {
    .balance__item:nth-child(n+10) {
        display:flex
    }
}

.balance__price {
    font-weight: 600
}

.balance__amount,.balance__price {
    flex-shrink: 0;
    width: 70px
}

.balance__amount,.balance__total {
    text-align: right
}

.balance__total {
    flex-grow: 1
}

.balance__line {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0
}

.balance__statistics {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 12px;
    padding: 12px 16px
}

@media only screen and (max-width: 1179px) {
    .balance__statistics {
        margin-top:4px
    }
}

@media only screen and (max-width: 1023px) {
    .balance__statistics {
        margin-top:12px
    }
}

.balance__statistics .icon {
    height: 16px;
    margin-left: 8px;
    width: 16px
}

.balance__statistics:not(:last-child) {
    margin-bottom: 12px
}

@media only screen and (max-width: 1179px) {
    .balance__statistics:not(:last-child) {
        margin-bottom:0
    }
}

@media only screen and (max-width: 1023px) {
    .balance__statistics:not(:last-child) {
        margin-bottom:12px
    }
}

.balance__statistics.positive .balance__currency {
    color: #58bd7d
}

.balance__statistics.positive .balance__icon {
    fill: #58bd7d
}

.balance__statistics.negative .balance__currency {
    color: #ff6838
}

.balance__statistics.negative .balance__icon {
    fill: #ff6838
}

.balance__money {
    margin-left: 8px
}

.currencies {
    background: #fcfcfd;
    border-radius: 4px;
    padding: 16px
}

body.dark .currencies {
    background: #1f2023;
}

.currencies .nav,.currencies__form {
    margin-bottom: 12px
}

.currencies__form {
    position: relative
}

.currencies__input {
    background: none;
    border: 2px solid #e6e8ec;
    border-radius: 8px;
    color: #23262f;
    font-family: Poppins,sans-serif;
    font-size: 12px;
    height: 40px;
    line-height: 1.66667;
    padding: 0 40px 0 14px;
    transition: border-color .2s;
    width: 100%
}

body.dark .currencies__input {
    border-color: #353945;
    color: #fcfcfd
}

.currencies__input::-moz-placeholder {
    color: #777e90
}

.currencies__input::placeholder {
    color: #777e90
}

.currencies__input:focus {
    border-color: #777e90
}

.currencies__result {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px
}

.currencies__result .icon {
    fill: #777e90;
    height: 20px;
    transition: fill .2s;
    width: 20px
}

.currencies__result:hover .icon {
    fill: #3772ff
}

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

.currencies__row {
    display: table-row
}

.currencies__row:first-child .currencies__col {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding-bottom: 12px
}

.currencies__row:not(:first-child) .currencies__col {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667
}

.currencies__col {
    display: table-cell;
    padding: 4px
}

.currencies__col:first-child {
    padding-left: 0
}

.currencies__col:last-child {
    padding-right: 0;
    text-align: right
}

.currencies__line {
    align-items: center;
    display: inline-flex
}

.currencies .favorite {
    margin-right: 4px;
    position: relative;
    top: -2px
}

.currencies__info span {
    color: #777e90
}

.currencies__positive {
    color: #58bd7d
}

.currencies__negative {
    color: #ff6838
}

.trades {
    background: #fcfcfd;
    border-radius: 4px;
    margin-top: 4px;
    padding: 16px
}

body.dark .trades {
    background: #17181b
}

.trades .nav {
    margin-bottom: 12px
}

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

.trades__row {
    display: table-row
}

.trades__row:first-child .trades__col {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding-bottom: 12px
}

.trades__row:not(:first-child) .trades__col {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667
}

@media only screen and (max-width: 1179px) {
    .trades__row:nth-child(n+12) {
        display:none
    }
}

.trades__col {
    display: table-cell;
    padding: 2px 4px
}

.trades__col:first-child {
    padding-left: 0
}

.trades__col:nth-child(2) {
    padding-right: 12px;
    text-align: right
}

.trades__col:last-child {
    padding-right: 0;
    text-align: right
}

.trades__col.positive {
    color: #58bd7d
}

.trades__col.negative {
    color: #ff6838
}

.trades__line {
    align-items: center;
    display: inline-flex
}

.trades .favorite {
    margin-right: 4px;
    position: relative;
    top: -2px
}

.trades__info span {
    color: #777e90
}

.table {
    background: #fcfcfd;
    border-radius: 4px;
    margin-top: 4px;
    padding: 16px
}

body.dark .table {
    background: #1f2023;
}

@media only screen and (min-width: 1024px) {
    .table {
        display:block!important
    }
}

.table .select {
    display: none
}

@media only screen and (max-width: 767px) {
    .table .select {
        display:block;
        margin-bottom: 16px;
        width: 100%
    }
}

.table .nav {
    margin-bottom: 16px
}

@media only screen and (max-width: 767px) {
    .table .nav {
        display:none
    }
}

.table .nav__link:not(:last-child) {
    margin-right: 16px
}

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

.table__row {
    display: table-row
}

.table__row:first-child .table__col {
    color: #777e90;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667;
    padding-bottom: 10px
}

.table__row:not(:first-child) .table__col {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667
}

.table__col {
    display: table-cell;
    padding: 6px
}

.table__col:first-child {
    color: #777e90;
    padding-left: 0
}

@media only screen and (max-width: 767px) {
    .table__col:nth-child(3) {
        padding-right:0;
        text-align: right
    }
}

.table__col:last-child {
    padding-right: 0;
    text-align: right
}

@media only screen and (max-width: 767px) {
    .table__col:last-child {
        display:none
    }
}

.table__col.positive {
    color: #58bd7d
}

.table__col.negative {
    color: #ff6838
}

.bargaining {
    background: #fcfcfd;
    border-radius: 4px;
    margin-top: 4px;
    padding: 16px
}

@media only screen and (max-width: 1023px) {
    .bargaining {
        bottom:0;
        box-shadow: 0 -16px 64px hsla(0,0%,6%,.1);
        left: 0;
        margin: 0;
        position: fixed;
        right: 0;
        z-index: 5
    }
}

body.dark .bargaining {
    background: #1f2023;
}

.bargaining__main {
    align-items: center;
    display: flex;
    margin-bottom: 24px
}

@media only screen and (max-width: 1023px) {
    .bargaining__main {
        margin-bottom:16px
    }
}

.bargaining__info {
    color: #777e90;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667
}

@media only screen and (max-width: 767px) {
    .bargaining__info {
        display:none
    }
}

.bargaining__info a {
    color: #23262f;
    margin-left: 8px;
    transition: color .2s
}

.bargaining__info a .icon {
    height: 20px;
    transition: fill .2s;
    width: 20px
}

body.dark .bargaining__info a {
    color: #e6e8ec
}

body.dark .bargaining__info a .icon {
    fill: #e6e8ec
}

.bargaining__info a:hover {
    color: #3772ff
}

.bargaining__info a:hover .icon {
    fill: #3772ff
}

.bargaining .nav {
    margin-right: auto
}

.bargaining .nav__link:not(:last-child) {
    margin-right: 16px
}

@media only screen and (max-width: 1023px) {
    .bargaining__wrapper {
        background:#fcfcfd;
        left: 0;
        padding: 16px;
        position: fixed;
        right: 0;
        top: 100%;
        transition: all .3s;
        z-index: 6
    }

    body.dark .bargaining__wrapper {
        background: #161c22;
    }

    .bargaining__wrapper.show {
        box-shadow: 0 -16px 64px hsla(0,0%,6%,.1);
        transform: translateY(-100%)
    }
}

.bargaining__btns {
    display: none
}

@media only screen and (max-width: 1023px) {
    .bargaining__btns {
        display:flex;
        margin: 0 -6px
    }
}

.bargaining__btns .bargaining__button {
    flex: 0 0 calc(50% - 12px);
    margin: 0 6px;
    width: calc(50% - 12px)
}

.bargaining__item,.bargaining__top {
    display: none
}

@media only screen and (max-width: 1023px) {
    .bargaining__top {
        align-items:center;
        display: flex;
        margin-bottom: 16px
    }
}

.bargaining__subtitle {
    color: #03a84e;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-right: auto
}

.bargaining__close .icon {
    fill: #777e90;
    height: 24px;
    width: 24px
}

.bargaining__row {
    display: flex;
    margin: 0 -16px
}

@media only screen and (max-width: 1023px) {
    .bargaining__row {
        display:block;
        margin: 0
    }
}

.bargaining__col {
    flex: 0 0 calc(50% - 32px);
    margin: 0 16px;
    width: calc(50% - 32px)
}

@media only screen and (min-width: 1024px) {
    .bargaining__col {
        display:block!important
    }
}

@media only screen and (max-width: 1023px) {
    .bargaining__col {
        display:none;
        margin: 0;
        width: 100%
    }
}

.bargaining__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px
}

.bargaining__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.33333
}

.bargaining__counter {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.66667
}

.bargaining__counter .icon {
    height: 16px;
    margin-right: 4px;
    width: 16px
}

.bargaining__field {
    align-items: center;
    /*border-radius: 12px;*/
    box-shadow: inset 0 0 0 2px #e6e8ec;
    cursor: pointer;
    display: flex;
    margin-bottom: 12px;
    padding: 0 36px;
}

body.dark .bargaining__field {
    box-shadow: inset 0 0 0 2px #6a0710;
}

.bargaining__input {
    background: none;
    color: #23262f;
    flex-grow: 1;
    font-family: Poppins,sans-serif;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    padding: 0 10px;
    text-align: right
}

body.dark .bargaining__input {
    color: #fcfcfd
}

.bargaining__currency,.bargaining__label {
    color: #ffffff;
    font-weight: 500;
    pointer-events: none
}

.bargaining__col>.bargaining__button {
    width: 100%
}

.range {
    height: 36px;
    position: relative
}

.range__slider {
    left: 0;
    position: absolute;
    right: 0;
    top: 12px
}

.range__indicators {
    display: flex;
    justify-content: space-between;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 10px
}

.range__indicators span {
    background: #e6e8ec;
    border-radius: 2px;
    height: 6px;
    width: 2px
}

body.dark .range__indicators span {
    background: #353945
}

.noUi-horizontal {
    height: 2px
}

.noUi-target {
    background: #e6e8ec;
    border: none;
    box-shadow: none
}

body.dark .noUi-target {
    background: #9b9b9b;
}

.noUi-connect,.noUi-handle {
    background: #3772ff
}

.noUi-handle {
    border: none;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer
}

.noUi-handle:after,.noUi-handle:before {
    display: none
}

.noUi-horizontal .noUi-handle {
    background: #a50e1c;
    border: 4px solid rgb(0 0 0 / 64%);
    box-shadow: 0 8px 16px -8px hsla(0,0%,6%,.2);
    height: 20px;
    right: -12px;
    top: -9px;
    width: 20px
}

.noUi-tooltip {
    align-items: center;
    background: #23262f;
    border: none;
    border-radius: 8px;
    color: #fcfcfd;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    min-width: 40px;
    opacity: 0;
    padding: 3px 10px;
    transition: all .2s;
    visibility: hidden
}

.noUi-tooltip:before {
    border-color: #141416 transparent transparent;
    border-style: solid;
    border-width: 4px 4px 0;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 0
}

body.dark .noUi-tooltip {
    background: #353945
}

body.dark .noUi-tooltip:before {
    border-color: #353945 transparent transparent;
    border-style: solid;
    border-width: 4px 4px 0;
    height: 0;
    width: 0
}

.noUi-handle:hover .noUi-tooltip {
    opacity: 1;
    visibility: visible
}

.noUi-horizontal .noUi-tooltip {
    bottom: 24px
}

.range_time .noUi-horizontal {
    height: 2px
}

.range_time .noUi-handle {
    top: -11px
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    right: -12px
}

.charts {
    border-radius: 4px;
    box-shadow: 0 64px 64px -48px hsla(0,0%,6%,.1);
    position: relative;
    z-index: 2
}

@media only screen and (min-width: 1024px) {
    .charts {
        display:block!important
    }
}

.charts__head {
    align-items: center;
    background: #fcfcfd;
    border-bottom: 1px solid #e6e8ec;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    padding: 16px
}

body.dark .charts__head {
    background: #1f2023;
    border-color: #23262f
}

.charts .nav {
    display: flex
}

@media only screen and (max-width: 767px) {
    .charts__group .nav {
        display:none
    }
}

.charts .select {
    background: #e6e8ec;
    display: none;
    height: 28px;
    line-height: 28px
}

body.dark .charts .select {
    background: #353945
}

@media only screen and (max-width: 767px) {
    .charts .select {
        display:block
    }
}

.charts__item {
    display: none
}

.charts__inner {
    overflow: hidden
}

.charts__inner>div {
    height: 492px!important;
    margin: -1px
}

@media only screen and (max-width: 1023px) {
    .charts__inner>div {
        position:relative;
        z-index: -1
    }
}

.charts__inner:nth-child(2),body.dark .charts__inner:first-child {
    display: none
}

body.dark .charts__inner:nth-child(2) {
    display: block
}

.charts__element {
    background: #fcfcfd;
    height: 490px;
    width: 100%
}

body.dark .charts__element {
    background: #17181b
}

body.dark .charts__element .highcharts-axis-line,body.dark .charts__element .highcharts-grid-line,body.dark .charts__element .highcharts-tick {
    stroke: #353945!important
}

/*# sourceMappingURL=test.css.map*/