:root {
    --main-color: #E28E28;
    --main-color-600: #B46E18;
    --main-color-800: #5A370C;
    --bg: #131217;
    --grayscale-900: #191A1F;
    --grayscale-800: #2E2F38;
    --grayscale-700: #444755;
    --grayscale-400: #8E92A4;
    --grayscale-300: #AAADBB;
    --grayscale-200: #C7C8D1;
}

* {
    padding: 0;
    margin: 0;
    border: 0;
}

@font-face {
    font-family: 'Gilroy';
    src: url("../fonts/gilroy-regular.woff") format("woff"), url("../fonts/gilroy-regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Gilroy';
    src: url("../fonts/gilroy-medium.woff") format("woff"), url("../fonts/gilroy-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url("../fonts/gilroy-semibold.woff") format("woff"), url("../fonts/gilroy-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'Gilroy';
    src: url("../fonts/gilroy-bold.woff") format("woff"), url("../fonts/gilroy-bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url("../fonts/gilroy-extrabold.woff") format("woff"), url("../fonts/gilroy-extrabold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "circe";
    font-display: swap;
    src: url("../fonts/circe.woff") format("woff"), url("../fonts/circe.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "circe-bold";
    font-display: swap;
    src: url("../fonts/circe-bold.woff") format("woff"), url("../fonts/circe-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: 'Gilroy', serif;
    margin: 0;
    color: white;
    background: #131217;
}

body::-webkit-scrollbar {
    width: 2px;
    background-color: none;
}

body::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #f3972b;
}

section {
    position: relative;
    z-index: 1;
}

button {
    cursor: pointer;
    font-family: 'Gilroy', serif;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.fade-enter-active,
.fade-leave-active {
    transition: all .5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--grayscale-800);
    color: var(--grayscale-300);
    transition: all .2s;
}

.btn-outline:hover {
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

.btn-outline-main {
    background: transparent;
    border: 1px solid var(--main-color-600);
    color: var(--main-color-600);
    transition: all .2s;
}

.btn-outline-main:hover {
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: white;
}

.btn-main {
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: white;
}

.btn-underline {
    border: unset;
    background: transparent;
    padding: 0;
    font-size: .88rem;
    color: var(--main-color);
    text-decoration: underline;
}

.sms-input {
    display: flex;
    flex-direction: row !important;
    border: 1px solid var(--grayscale-800);
    padding: 1rem;
    justify-content: space-between;
    border-radius: .19rem;
    font-size: 1rem;
}

.sms-input input {
    font-size: 1rem;
    color: white;
    border: unset;
    background: transparent;
    font-family: 'Gilroy', serif;
}

.sms-input input:focus {
    outline: none;
}

.bg-main-800 {
    background: var(--main-color-800);
}

.grid-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* Создает три строки: первая и последняя строки будут автоматически подстраиваться под содержимое, вторая строка будет занимать оставшееся пространство */
    grid-template-areas:
        "header"
        "main"
        "footer";
    min-height: 100vh;
    /* Занимает всю высоту экрана */
    margin: 0;
    padding: 0;
    background: #131217;
    position: relative;
    overflow: hidden;
}

.bg-element-start {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100vw;
}

.bg-element-mid {
    position: absolute;
    top: 10%;
    right: 0;
    width: 100vw;
}

.bg-element-end {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
}

.grid-header {
    grid-area: header;
    /* Дополнительные стили для заголовка */
}

.grid-footer {
    grid-area: footer;

}

.sms-container {
    max-width: 80rem;
    margin: auto;
    padding: 0 1rem;
}

.hidden {
    display: none;
}

.flex {
    display: flex;
}

.grow {
    flex-grow: 1;
}

.grid {
    display: grid;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.flex-col {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

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

.gap-6 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-3 {
    gap: 0.75rem
}

.gap-2 {
    gap: .5rem;
}

.text-grayscale-300 {
    color: var(--grayscale-300);
}

.text-grayscale-200 {
    color: var(--grayscale-200);
}


.text-main {
    color: var(--main-color);
}

.text-white {
    color: white;
}

.text-sm {
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.25rem;
    /* 20px */
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.75rem;
    /* 28px */
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

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

.p-3_5 {
    padding: 0.875rem;
}

.p-3 {
    padding: .75rem;
}

.p-2 {
    padding: .5rem;
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem;
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.py-15px {
    padding-top: .94rem;
    padding-bottom: .94rem;
}

.py-8 {
    padding-bottom: 2rem;
    padding-top: 2rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-auto {
    margin: auto;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.border {
    border: 1px solid;
}

.rounded-sm {
    border-radius: .19rem;
}

.h-3_5 {
    height: 3.5rem;
}

.w-5 {
    width: 1.25rem;
}

.w-full {
    width: 100%;
}

.max-w-51 {
    max-width: 51.5rem;
}

.max-w-38 {
    max-width: 38rem;
}


.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.inset-0 {
    inset: 0;
}

.z-40 {
    z-index: 40;
}

.dropdown-content-header {
    display: flex;
    gap: 0 !important;
    flex-direction: column;
    padding: .25rem;
    background: var(--grayscale-900);
}

.dropdown-content-header .drop-item {
    display: flex;
    gap: .5rem;
    padding: .5rem;
}

.menu .dropdown-body {
    width: 100%;
    left: 0 !important;
    top: 100% !important;
    margin-top: .5rem !important;
    transform: translateX(0) !important;
}

.dropdown-content-menu {
    display: flex;
    width: 100%;
    gap: .5rem !important;
    flex-direction: column;
    padding: .25rem;
    background: var(--grayscale-900);
    align-items: start !important;
    border-radius: .19rem;
}

.dropdown-content-menu .drop-item {
    display: flex;
    gap: .5rem;
    padding: .5rem;
}

.absolute {
    position: absolute;
}

.menu-block {
    position: fixed;
    top: 4.38rem;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 40%);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.menu-block .menu {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    gap: .75rem;
    padding: .5rem;
}

.menu-block .menu .menu-btns {
    display: grid;
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    grid-auto-flow: column;
    gap: .75rem;
    flex-grow: 1;
}

.menu-block .menu .menu-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.menu-block .menu .menu-list-item {
    padding: .75rem;
    border-radius: .19rem;
    background: var(--grayscale-900);
}

.menu-block .menu .menu-list-lang {
    display: flex;
    justify-content: space-between;
}

.menu-block .menu .menu-list-lang div:first-child {
    display: flex;
    gap: .5rem;
    align-items: center;
}

header {
    background: #131217;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--grayscale-800);
    z-index: 10;
}

header .nav-block {
    display: flex;
    padding: 1rem 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

header .nav-block .header-logo {
    display: flex;
    gap: 1rem;
    align-items: center;
}

header .nav-block .header-logo div:first-child {
    display: flex;
    cursor: pointer;
}

header .nav-block .header-logo div:last-child {
    display: none;
    color: var(--grayscale-300);
    font-size: 0.75rem;
    line-height: 1rem;
}

header .nav-block .header-links {
    display: none;
    gap: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}


header .nav-block .header-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

header .nav-block .header-actions .dropdown-content-header,
header .nav-block .header-actions-trigger {
    display: none;
    gap: .5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

header .nav-block .header-actions-trigger {
    align-items: center;
}

header .nav-block .header-actions .drop-item {
    align-items: center;
    cursor: pointer;
}

header .nav-block .header-actions>div:last-child {
    display: flex;
    gap: 1rem;
}

header .nav-block .header-actions .btn-outline,
header .nav-block .header-actions .btn-outline-main,
header .nav-block .header-actions .btn-main {
    padding: .5rem .75rem;
    font-size: .88rem;
    line-height: 1.125rem;
}

header .nav-block .header-actions div:last-child button:nth-child(1),
header .nav-block .header-actions div:last-child button:nth-child(2) {
    display: none;
}

header .nav-block .header-actions div:last-child button:last-child {
    border: 1px solid var(--grayscale-800);
    background: transparent;
    padding: .5rem;
    border-radius: .19rem;
}

.btn-menu span {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    transition: transform 0.3s ease;
}

.btn-menu span span {
    position: absolute;
    height: 1px;
    background: var(--grayscale-300);
    left: .19rem;
}

.btn-menu span span:first-child {
    top: .25rem;
    width: .63rem;
}

.btn-menu span span:nth-child(2) {
    width: .82rem;
    top: 50%;
    transform: translateY(-50%);
}

.btn-menu span span:last-child {
    bottom: .25rem;
    width: .38rem;
}

.open-menu span span:nth-child(1) {
    transform: rotate(45deg);
    width: 100%;
    top: 0.6rem;
    left: 0;
}

.open-menu span span:nth-child(2) {
    opacity: 0;
}

.open-menu span span:nth-child(3) {
    transform: rotate(-45deg);
    width: 100%;
    left: 0;
    bottom: .55rem;
}

.main-section {
    margin-top: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
    padding: 0 1rem;
}

.main-section>.headers {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.main-section>.headers h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    text-align: center;
}

.main-section>.headers h5 {
    text-align: center;
    color: var(--grayscale-300);
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.main-section>.headers>.subheaders {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.main-section button {
    padding: .5rem .75rem;
    font-size: 0.875rem;
    line-height: 1.15rem;
}

.list-marker {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    width: max-content;
    margin: auto;
    padding-left: 0;
    align-items: center;
}

.list-marker li {
    position: relative;
    padding-left: .75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    width: max-content;
}

.list-marker li::before {
    content: "";
    /* Создаем пустой контент */
    position: absolute;
    left: 0;
    /* Позиционируем маркер слева */
    top: 50%;
    transform: translateY(-50%);
    width: .25rem;
    /* Задаем ширину маркера */
    height: .25rem;
    /* Задаем высоту маркера */
    background-color: var(--main-color);
    /* Задаем цвет маркера */
    border-radius: 50%;
    /* Делаем маркер круглым */
    margin-right: .4rem;
    /* Добавляем отступ справа для текста элемента списка */
}

.second-section {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 80rem;
}

.second-section h5 {
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
}

.second-section-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.section-header>h5 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
    font-weight: 400;
}

.how-work {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.how-work>.how-work-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
}

.how-work>.how-work-head {
    display: flex;
    margin: 0 auto;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--grayscale-700);
    height: 2.5rem;
    align-items: center;
}

.how-work>.how-work-head>.how-work-head-number {
    font-size: 1.5rem;
    line-height: 1.8rem;
    height: fit-content;
}

.how-work>.how-work-head>.how-work-head-sms {
    display: flex;
    gap: .5rem;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    height: fit-content;
}

.how-work>.how-work-body>span:first-child {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.how-work>.how-work-body>span:last-child {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--grayscale-200);
}

.sms-card-country {
    background: var(--grayscale-800);
    padding: 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .5s;
}

.sms-card-country:hover {
    border-color: var(--main-color);
}

.sms-card-country-body {
    display: flex;
    gap: .75rem;
    align-items: center;
    height: 1.5rem;
}

.sms-card-country-body div:first-child {
    display: flex;
}

.sms-card-country-body div:first-child img {
    width: 1.25rem;
}

.sms-card-country-body div:nth-child(2) {
    flex-grow: 1;
}

.sms-card-messages {
    background: var(--grayscale-800);
    padding: .5rem;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.sms-card-messages div:first-child {
    display: flex;
    justify-content: space-between;
}

.sms-card-messages>div:first-child div:first-child {
    font-weight: 500;
}

.sms-card-messages>div:first-child div:last-child {
    color: var(--grayscale-400)
}

.sms-card-messages>div:last-child {
    background: var(--grayscale-900);
    padding: .5rem .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: .19rem;

}

.sms-card-messages div:last-child div {
    font-weight: 500;
    gap: .25rem;
}

.sms-card-messages div:last-child span:last-child {
    color: var(--main-color-600);
    text-transform: uppercase;
}

.sms-card-notification {
    background: var(--grayscale-800);
    padding: .63rem;
    border-radius: 1rem;
    width: 18.75rem;
}

.sms-card-notification>div {
    display: flex;
    gap: .5rem;
}

.sms-card-notification>div>div:first-child {
    display: flex;
    background: var(--grayscale-700);
    border-radius: .63rem;
    padding: 5px;
}

.sms-card-notification>div>div:first-child>img {
    width: 30px;
}

.sms-card-notification>div>div:last-child {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.sms-card-notification>div>div:last-child div:first-child {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.sms-card-notification>div>div:last-child div:last-child {
    font-size: 0.75rem;
    line-height: 1rem;
}

.sms-card-number {
    background: var(--grayscale-800);
    padding: 1rem;
    border-radius: 0.375rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    cursor: pointer;
    transition: all .5s;
    border: 1px solid transparent;
}

.sms-card-number.active {
    cursor: default;
}

.sms-card-number:hover {
    border-color: var(--main-color);
}


.third-section {
    margin-top: 4.375rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.third-section-body {}

.third-section-body .body-item {
    display: flex;
    flex-direction: column;
    position: relative;
    width: calc(100vw - 2rem);
    flex-shrink: 0;
}

.third-section-body .body-item button {
    padding: .5rem .75rem;
    font-size: .88rem;
    line-height: 1.25rem;
}

.third-section-body .body-item .body-item-head {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    text-align: center;
    display: none;
    position: absolute;
    width: 100%;
}

.third-section-body .body-item:first-child .body-item-head {
    top: -5rem;
    left: 50%;
    transform: translateX(-50%) rotate(6.52deg);
}

.third-section-body .body-item:first-child .body-item-head svg {
    position: absolute;
    left: 40%;
    top: 100%;
    transform: rotate(-6.52deg);
}

.third-section-body .body-item:nth-child(2) .body-item-head {
    top: -5.5rem;
    left: 50%;
    transform: translateX(-50%) rotate(-6.52deg);
}

.third-section-body .body-item:nth-child(2) .body-item-head svg {
    position: absolute;
    top: 70%;
    left: 105%;
    transform: rotate(6.52deg);
}

.third-section-body .body-item:nth-child(3) .body-item-head {
    top: -5.5rem;
    left: 45%;
    transform: translateX(-50%) rotate(6.52deg);
}

.third-section-body .body-item:nth-child(3) .body-item-head svg {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%) rotate(-6.52deg);
}

.sms-card {
    padding: .75rem 0 .75rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--grayscale-900);
    border-radius: 0.375rem;
    height: 82vh;
    transition: all .5s;
}

.sms-card>div:first-child {
    margin-right: .75rem;
}

.sms-card .list-messages-container {
    height: 85%;
}

.sms-card .list-messages {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .75rem;
    overflow: hidden;
    max-height: 700px;
    padding-right: .75rem;
}

.list-messages-empty {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .75rem;
    padding-right: .75rem;
    overflow: hidden;
    max-height: 700px;
}

.sms-card .list-messages .os-content>div {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .75rem;

}

.sms-card .list-messages .os-content:before,
.sms-card .list-messages .os-content:after {
    display: none;
}


.login-section {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-section a {
    text-decoration: underline;
    color: white;
}

.login-section .list-login {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.login-section .list-login > div {
    cursor: pointer;
}

.use-conditions-link {
    cursor: pointer;
}

.price-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 3.75rem;
    align-items: center;
}

.pricing {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
    border: 1px solid var(--grayscale-700);
    background: var(--grayscale-800);
    border-radius: .38rem;
}

.pricing-card .btn-main {
    padding: 1rem 1.25rem;
    border: unset;
}

.pricing-card .price-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
    padding: .5rem;
}

.price-container .price-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.price-block .price-country {
    display: flex;
    flex-direction: column;
    padding: .75rem;
    gap: .25rem;
    border-radius: .19rem;
    background: var(--grayscale-700);
}

.price-block .price-country div:first-child {
    line-height: 1.5rem;
}

.price-block .price-country div:last-child {
    font-size: 1.25rem;
    line-height: 2rem;
    color: var(--main-color);
}

.price-block .price {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: .5rem;
    border-radius: 0.375rem;
    background: var(--grayscale-900);
}

.price-block .price div:first-child {
    color: var(--grayscale-400);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.price-block .price div:last-child {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 600;
}


.price-container .price-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.price-list .item-list {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.price-list .item-list .item-list-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.price-list .item-list .item-list-description {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.price-list .item-list .item-list-description span:first-child {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--grayscale-400);
}

.price-list .item-list .item-list-description span:last-child {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: white;
    font-weight: normal;
}

.section-faq {
    /* display: flex;
    flex-direction: column;
    gap: 1rem; */
    margin-top: 2.5rem;
}

.section-faq-content h1 {
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 800;
}

.section-faq-content h2 {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 700;
}

.section-faq-content h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
}

.section-faq-content h4 {
    font-size: 1.375rem;
    line-height: 1.875rem;
    font-weight: 600;
}

.section-faq-content h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
}

.section-faq-content h6 {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.section-faq-content p {
    line-height: 1.375;
}

.section-faq-content li {
    /* list-style: none;
    font-size: 14px;
    line-height: 37px;
    color: #e5e5e5;
    position: relative;
    padding-left: 25px; */

    font-size: 16px;
    line-height: 22px;
}

.section-faq-content ul,
.section-faq-content ol {
    list-style-position: inside;
    padding-left: 10px;
}

.section-faq-content ul li::marker {
    font-size: 10px;
}

.section-faq-content ol li::marker {
    font-size: 14px;
}

.faq {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.faq .faq-items {
    display: flex;
    flex-direction: column;
}

.sms-collapse {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    position: relative;
}

.sms-collapse-header {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 500;
    cursor: pointer;
}

.sms-collapse-body {
    color: var(--grayscale-400);
    font-size: .875rem;
}

.sms-collapse:before {
    content: '';
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, #2E2F38 0%, #17181C 100%);
    position: absolute;
}

.arrow-back {
    display: flex;
    align-items: center;
}

.list-messages-header {
    display: flex;
    width: 100%;
    gap: .5rem;
    padding: .75rem 0;
    margin-bottom: .25rem;

}

.list-messages-header>div:nth-child(2) {
    gap: .5rem;
    display: flex;
    align-items: center;
    width: 100%;
}

.list-messages-header-number {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .875rem;
    line-height: 1.125rem;
}

.list-messages-header-number>svg:first-child {
    width: 1rem;
    height: 1rem;
}

.list-messages-btns-top {
    display: none;
}

.list-messages-btns-bot {
    display: flex;
    gap: .75rem;
    padding-right: .75rem;
}

.list-messages-btns-bot button {
    flex-grow: 1;
    font-size: .88rem !important;
    line-height: 1.125rem;
    padding: .5rem .75rem !important;
}

footer {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.5rem;
    position: relative;
    z-index: 10;
}

footer>div {
    margin: 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid #2D3139;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer>div>div:first-child {
    display: none;
    gap: 1rem;
    align-items: center;
}

footer>div>div:first-child>div {
    cursor: pointer;
}

footer>div>div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

footer>div>div:last-child>a {
    color: var(--grayscale-300);
    text-decoration: none;
}

.section-slider {
    display: none;
}

.list-messages-header-empty {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-grow: 1;
    padding: .66rem 0;
}

.list-messages-header-number-update {
    background: var(--main-color-800);
    padding: .25rem .5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: .19rem;
}

.header-number {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .875rem 0;
}

.header-flag {
    display: flex;
    height: fit-content;
}

.header-flag img {
    width: 1.25rem;
}

.header-country {
    flex-grow: 1;
    font-weight: 600;
    font-size: 1rem;
}

.header-code {
    font-weight: 500;
    font-size: 1rem;
}

.body-item-content {
    height: 700px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow: hidden;
}

.body-item-content .active {
    border-color: var(--main-color);
    ;
}


.simplebar-vertical {
    width: .75rem !important;
    cursor: pointer;
}

.simplebar-visible {
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
    height: 3rem;
    background: #f3972b !important;
    cursor: pointer;
}

.simplebar {
    min-height: 100px;

}

.ps-container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-right: .75rem;
}

.simplebar.ps-container {
    padding-right: 1.25rem;
}

.simplebar-content-wrapper {
    padding-right: .75rem;
}

.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-center {
    scroll-snap-align: center;
}

.slick-track {
    display: flex !important;
    gap: 1.25rem;
}

.empty-block {
    background: var(--grayscale-800);
    border-radius: 6px;
    flex-shrink: 0;
}

.sms-hint {
    position: absolute;
    padding: 1rem 1.25rem;
    background: var(--main-color);
    left: 105%;
    top: 13.35rem;
    white-space: nowrap;
    z-index: 100;
    border-radius: .19rem;
    display: none;
}

.sms-hint:before {
    content: '';
    position: absolute;
    left: -.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 1rem;
    height: 1rem;
    background: var(--main-color);
}

.modal {
    z-index: 20;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    padding: 1rem;
    backdrop-filter: blur(10px);
}

.modal-background {
    z-index: 20;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 40%);
    display: flex;
    padding: 1rem;
}

.modal .modal-content {
    margin: auto;
    border: 1px solid var(--grayscale-800);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    gap: 1.25rem;
    border-radius: .75rem;
    width: 37.5rem;
    position: relative;
    z-index: 25;
}

.modal-body, .modal-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-body .modal-text>div {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-weight: 600;
}

.modal-body ul {
    color: var(--grayscale-300);
    font-size: .875rem;
    font-weight: 400;
    padding-left: 2rem;
}

.modal-body button {
    padding: .5rem .75rem;
    font-size: .875rem;
}

.modal-body .number-busy {
    font-weight: 400;
    color: var(--grayscale-200);
    font-size: .875rem;
}

.modal-all-country .modal-content {
    gap: 1rem;
    padding-right: 0;
}

.modal-all-country .modal-content .modal-header {
    padding-right: 1.25rem;
}

.modal-content .sms-input {
    margin-right: 1.25rem;
}

.modal-all-country .modal-content .modal-all-country-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.modal-all-country .modal-content .list-country {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    padding-right: 1.25rem;
}

.modal-all-country .modal-content .list-country .item-country {
    padding: .5rem 0;
    display: flex;
    gap: .75rem;
    font-size: 1rem;
    line-height: 1.38rem;
    font-weight: 400;
}

.modal-all-country .modal-content .list-country .item-country div:first-child {
    display: flex;
    align-items: center;
}

.modal-all-country .modal-content .list-country .item-country div:nth-child(2) {
    flex-grow: 1;
}

.overflow-hidden {
    overflow: hidden;
}

.modal-all-country-body>.os-content {
    gap: 0 !important;
    display: flex;
}

.modal-all-country .ps__rail-y {
    width: 1.25rem !important;
}

.ps__rail-y:hover,
.ps__rail-y:focus,
.ps--clicking {
    background: transparent !important;
}

.ps__rail-y {
    width: .75rem !important;
    opacity: 1 !important;
}

.ps__thumb-y {
    width: 2px !important;
    left: 50%;
    transform: translateX(-50%);
    background: #f3972b !important;
    cursor: pointer;
}

.body-item-content {
    padding-right: .75rem;
}

.body-item-content .os-content>div {
    display: flex;
    gap: .5rem;
    flex-direction: column;
}


.os-scrollbar-vertical {
    right: 6px !important;
    width: 2px !important;
}

.os-scrollbar-handle {
    width: 2px !important;
    height: 3rem;
    background: #f3972b !important;
    cursor: pointer;
}

.os-scrollbar-unusable {
    display: none;
}

@media screen and (min-width: 1024px) {

    .sms-hint {
        display: block;
    }

    .section-slider {
        display: flex;
        gap: 1.25rem;
        flex-direction: column;
    }

    .section-header>h5 {
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 400;
    }

    .arrow-back {
        display: none;
    }

    .list-messages-btns-bot {
        display: none;
    }


    .list-messages-btns-top {
        display: flex;
        gap: .75rem;
    }


    header .nav-block .header-logo div:last-child {
        display: block;
    }

    header .nav-block .header-links {
        display: flex;

    }

    .header-links div {
        cursor: pointer;
    }

    header .nav-block .header-actions div:first-child {
        display: flex;
    }

    header .nav-block .header-actions div:last-child button:nth-child(1),
    header .nav-block .header-actions div:last-child button:nth-child(2) {
        display: block;
    }

    header .nav-block .header-actions div:last-child button:last-child {
        display: none;
    }

    .main-section {
        margin-top: 7.5rem;
        margin-bottom: 2rem;
        gap: 2rem;
    }

    .main-section>.headers {
        gap: 1.5rem;
    }

    .main-section>.headers h1 {
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 800;
    }

    .main-section>.headers h5 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .main-section button {
        padding: .75rem 1.25rem;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .list-marker {
        flex-direction: row;
        gap: 1rem;
        padding: 0;
        margin: auto;
        align-items: unset;
    }

    .list-marker li {
        padding-left: 1.25rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .second-section {
        margin-top: 6.25rem;
        gap: 3rem;
    }

    .second-section h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .second-section h5 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .second-section-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4.75rem;
    }

    .how-work {
        gap: 1rem;
    }

    .third-section {
        margin-top: 7.5rem;
        gap: 11.5rem;
    }

    .third-section-body {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        overflow-x: visible;
    }

    .third-section>.section-header>h5 {
        display: none;
    }

    .third-section-body .body-item .body-item-head {
        display: block;
    }

    .third-section-body .body-item {
        width: 100%;

    }

    .sms-card .list-messages .os-content>div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-messages-empty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-section {
        margin-top: 7.5rem;
        gap: 2rem;
    }

    .login-section .list-login {
        gap: 2rem;
    }


    .price-section {
        margin-top: 7.5rem;
        gap: 3rem;
    }


    .pricing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-card .price-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        padding: .75rem;
    }

    .section-faq {
        /* gap: 3rem; */
        margin-top: 7.5rem;
    }

    .faq {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
    }

    .sms-card {
        height: 100%;
    }

    .sms-card .list-messages-container {
        height: 100%;
    }

    .sms-card .list-messages .ps-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    footer {
        margin-top: 7.5rem;
        ;

    }

    footer>div {
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 0;
    }

    footer>div>div:first-child {
        display: flex;
    }

    footer>div>div:last-child {
        display: flex;
        gap: 1.5rem;
    }

    .header-number {
        display: flex;
        gap: .75rem;
        align-items: center;
        padding: .875rem;
    }

    .header-country {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .header-code {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .list-messages-header {
        padding: .55rem 0;
        margin-bottom: 0;
        justify-content: space-between;
    }


    .list-messages-header>div:nth-child(2) {
        width: auto;
    }

    .list-messages-header-number {
        font-size: 1rem;
    }

    .list-messages-header-number-update {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .bg-element-start {
        width: 30rem;
    }

    .bg-element-mid {
        width: 45rem;
    }

    .bg-element-end {
        width: 45rem;
    }

    .sms-collapse-header {
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 500;
    }

    .sms-collapse-body {
        line-height: 1.63rem;
        font-size: 1.125rem;
    }

    .modal-body>div {
        font-size: 1.25rem;
    }

    .modal-body ul {
        font-size: 1rem;
        line-height: 1.38rem;
    }

    .modal-body button {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }

    .modal-body .number-busy {
        font-size: 1.25rem;
    }

    .modal-all-country .modal-content {
        max-width: 22.5rem;
    }

    .list-messages-header-number>svg:first-child {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Popup Box Styles */

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
    z-index: 70;
}

.popup.open {
    opacity: 1;
    visibility: visible;
}

.popup.open .popup__content {
    opacity: 1;
}

.popup__area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.popup__body {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 30px 10px;
    -webkit-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
}

.popup__content {
    color: #000;
    /* max-width: 620px; */
    position: relative;
    -webkit-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
    background: #19181e;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
}

.popup__box-form {
    background: #19181e;
}

.popup__content_image {
    padding: 0;
}

.popup__close {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 10px;
    top: 15px;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    z-index: 5;
    cursor: pointer;
}

.popup__close:before,
.popup__close:after {
    content: '';
    display: block;
    background: #33303c;
    height: 1px;
    width: 20px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.popup__close:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.popup__close:hover:before,
.popup__close:hover:after {
    background: #f3972b;
}


.popup__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.popup__box-form {
    padding: 43px;
    position: relative;
}

.popup__change {
    font-size: 16px;
    line-height: 36px;
    font-family: "Gilroy";
    font-weight: 600;
    color: #919095;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    right: -16px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.popup__title {
    font-size: 20px;
    line-height: 30px;
    font-family: "Gilroy";
    font-weight: 600;
    color: #818181;
    margin: 0px 0px 1em 0px;
}

.popup__form label {
    font-size: 14px;
    line-height: 36px;
    color: #818181;
    font-weight: normal;
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
}

.popup__input-box {
    margin-bottom: 20px;
    position: relative;
}

.popup__input-box::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 18px;
    right: 13px;
    bottom: 17px;
}

.popup__btn-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 5px;
}

.popup-registrations .popup__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.popup__btn {
    font-size: 16px;
    line-height: 50px;
    color: #ffffff;
    background: #f3972b;
    border-radius: 3px;
    font-family: "circe-bold";
    padding: 0 20px;
}

.popup__btn.entrance-btn {
    width: 90px;
    padding: 0
}

.popup__box-social {
    background: #131316;
    padding: 90px 60px 45px 60px;
}

.popup__social-name {
    font-size: 14px;
    line-height: 36px;
    color: #818181;
}

.popup__social-btn {
    border-radius: 4px;
    border-radius: 4px;
    padding: 15px 35px 15px 55px;
    width: 100%;
    font-size: 14px;
    font-family: "circe";
    color: #ffffff;
    position: relative;
    margin-bottom: 10px;
    line-height: 14px;
}

.popup__social-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.popup__social-btn--fb {
    background: #156ace;
}

.popup__social-btn--fb::before {
    width: 8px;
    height: 13px;
    background: url("../img/icons/fc-popup.svg");
    left: 40px;
}

.popup__social-btn--tg {
    background: #2AABEE;
}

.popup__social-btn--tg:hover {
    background: #207DAD;
}

.popup__social-btn--tg::before {
    width: 14px;
    height: 12px;
    background: url("../img/icons/tg-popup.svg");
    left: 32px;
}

.popup__social-btn--vk {
    background: #478ccc;
}

.popup__social-btn--vk:hover {
    background: #235D93;
}

.popup__social-btn--vk::before {
    width: 14px;
    height: 8px;
    background: url("../img/icons/vk-popup.svg");
    left: 32px;
}

.popup__social-btn--gg {
    background: #fe6359;
    margin-bottom: 25px;
}

.popup__social-btn--gg:hover {
    background: #C3544D;
}

.popup__social-btn--gg::before {
    width: 14px;
    height: 14px;
    background: url("../img/icons/gg-popup.svg");
    background-repeat: no-repeat !important;
    left: 42px;
}

.popup__social-box {
    margin: 5px 0 0;
}

.popup-registrations .popup__content {
    max-width: 350px;
}

.popup-registrations .popup__input-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 14px;
    color: #919095;
    white-space: nowrap;
    cursor: pointer;
    padding-top: 5px;
    font-family: "circe";
}

.popup-registrations .popup__input-label span {
    margin-left: 8px;
}

.popup-registrations .popup__check-link {
    color: #f3972b;
    margin-left: 2px;
}

.popup-registrations .popup__checkbox {
    display: block;
    margin: -2px 0 0 0px;
}

.popup__form .popup__registration-link {
    padding-bottom: 15px
}

.popup-registrations .jq-checkbox,
.popup-registrations .jq-radio {
    width: 24px;
    height: 24px;
    background: #2f2e38;
    border-radius: 3px;
}

.popup-registrations .jq-checkbox.checked .jq-checkbox__div,
.popup-registrations .jq-radio.checked .jq-checkbox__div {
    display: block;
}

.popup-registrations .jq-checkbox__div {
    width: 10px;
    height: 10px;
    position: absolute;
    background: url("../img/icons/check.svg") no-repeat;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: none;
}

.popup-registrations .popup__link-entrance {
    font-size: 14px;
    line-height: 14px;
    color: #f3972b;
    margin: 45px 0 5px;
    display: inline-block;
}

.popup-registrations .popup__btn-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 25px;
}

.popup-discharge .popup__content {
    max-width: 350px;
}

.popup-discharge .popup__btn {
    width: 100%;
    margin-bottom: 10px;
}

.popup-send-email .popup__content {
    max-width: 350px;
}

.popup-new-password .popup__content {
    max-width: 350px;
}

.popup-new-password .popup__btn {
    width: 100%;
}

.popup__form .popup__content {
    max-width: 350px;
}

.popup__form .popup__social-name {
    margin-top: 25px;
}

.popup__btn.registrations-btn {
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
}

.popup__btn:hover {
    background: #d4801c;
}

@media (max-width: 850px) {
    .popup__title {
        font-size: 17px;
    }
}

@media (max-width: 530px) {
    .popup__box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .popup__change {
        display: none;
    }

    .popup__box-form {
        padding: 28px;
    }

    .popup__box-social {
        flex: 0;
        padding: 0 30px;
        background: #19181e;
        max-width: unset;
    }

    .popup__social-btn:not(:last-child) {
        margin-right: 10px;
    }

    .cabinet__social-box {
        gap: unset;
    }

    .popup__social-btn::before {
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .popup__social-btn span {
        display: none;
    }

    .popup__social-btn {
        width: 70px;
        height: 35px;
        padding: 0;
    }

    .popup__social-name {
        line-height: initial;
        padding-bottom: 10px;
    }

    .popup__social-name:nth-child(1) {
        display: block;
        line-height: 34px;
        padding: 0;
    }

    .popup__social-box {
        margin: 0
    }

    /* .popup__content{max-width: 400px !important;} */
    .popup-registrations .popup__input-label {
        font-size: 13px;
    }

    .popup-registrations .jq-checkbox,
    .popup-registrations .jq-radio {
        width: 23px;
        height: 23px;
    }
}

@media (max-width: 340px) {
    .popup__box-social {
        padding: 25px;
    }
}


@supports (-webkit-appearance: none) {
    .popup__input--user::after {
        background: url("../img/icons/user-popap.svg");
    }

    .popup__input--password::after {
        background: url("../img/icons/lock-popup.svg");
    }

    .popup__social-btn--fb::before {
        background: url("../img/icons/fc-popup.svg");
    }

    .popup__social-btn--fb::before {
        background: url("../img/icons/tg-popup.svg");
    }

    .popup__social-btn--vk::before {
        background: url("../img/icons/vk-popup.svg");
    }

    .popup__social-btn--gg::before {
        background: url("../img/icons/gg-popup.svg");
    }

    .popup-registrations .jq-checkbox__div {
        background: url("../img/icons/check.svg") no-repeat;
    }
}

.popup__close svg,
.aside__close picture,
.header__people-avatar picture {
    display: none;
}

.jq-checkbox,
.jq-radio {
    position: relative;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jq-checkbox input,
.jq-radio input {
    position: absolute;
    z-index: -1;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

.registrations-input.checked {
    border: 1px solid transparent;
}

.jq-checkbox,
.jq-radio {
    position: relative;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type=checkbox],
input[type=radio] {
    --active: #f3972b;
    --active-inner: #fff;
    --focus: 0px #2f2e38;
    --border: 0px #2f2e38;
    --border-hover: 0px #f3972b;
    --background: #2f2e38;
    --disabled: #acacb3;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 22px;
    width: 22px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

input[type=checkbox]:after,
input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
}

input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
}

input[type=checkbox]:disabled+label,
input[type=radio]:disabled+label {
    cursor: not-allowed;
}

input[type=checkbox]:hover:not(:checked):not(:disabled),
input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
}


input[type=checkbox]:focus,
input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
}

input[type=checkbox]:not(.switch):after,
input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
}

input[type=checkbox]:not(.switch):checked,
input[type=radio]:not(.switch):checked {
    --o: 1;
}

input[type=radio]:not(.switch):after,
input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 8px;
    top: 5px;
    transform: rotate(var(--r, 20deg));
}

input[type=radio]:not(.switch):checked,
input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
}

input:required {
    box-shadow: none;
}

:focus {
    outline-style: none;
    outline-width: 0px !important;
    outline-color: none !important;
}

button {
    cursor: pointer;
}

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

.popup__box a,
.popup__box a:visited {
    color: #f3972b;
    -webkit-transition: text-decoration-color 0.2s ease;
    -o-transition: text-decoration-color 0.2s ease;
    transition: text-decoration-color 0.2s ease;
    text-decoration: underline transparent;
}

.popup__box a:hover {
    text-decoration-color: #f3972b;
}

.popup__registration-link {
    font-size: 14px;
    color: #f3972b;
    padding: 0 0 35px;
    display: inline-block;
    line-height: 14px;
}

.registrations-input:valid {
    border-color: transparent;
}

.popup__link-password {
    font-size: 14px;
    line-height: 18px;
    color: #818181 !important;
    border-bottom: 1px dashed #818181 !important;
    margin-left: 50px;
    position: relative;
    white-space: nowrap;
    text-decoration: none !important;
    -webkit-transition: color 0.2s ease, border-color 0.2s ease;
    -o-transition: color 0.2s ease, border-color 0.2s ease;
    transition: color 0.2s ease, border-color 0.3s ease;
}

.popup__link-password:hover {
    color: #f3972b;
    border-bottom: 1px dashed #f3972b;
    text-decoration: none;
}

.popup__link-password:hover path {
    fill: #f3972b;
}

.popup__link-password .lock-popup {
    position: absolute;
    left: -28px;
}

.popup__link-password .lock-popup path {
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.popup__input:-webkit-autofill,
.popup__input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-animation-delay: 1s;
    /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
    border: 1px solid transparent;
    -webkit-text-fill-color: #818181;
}

.popup__input:-internal-autofill-selected {
    background: #2f2e38 !important;
    background-image: none !important;
    color: #818181 !important;
}

.popup__input {
    color: #818181;
    border: 1px solid transparent;
    background: #2f2e38;
    padding: 15px;
    width: 100%;
    border-radius: 4px;
    font-size: 14px;
    line-height: 16px;
    filter: none;
}

.popup__input--user::after {
    background: url("../img/icons/user-popap.svg");
    height: 15px;
}

.popup__input--password::after {
    background: url("../img/icons/lock-popup.svg");
}