/*--------------------------------------------------------------
# fonts
--------------------------------------------------------------*/

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

@font-face {
    font-family: "ChakraPetchBoldItalic";
    src:
        url("../fonts/ChakraPetchBoldItalic/ChakraPetchBoldItalic.woff") format("woff"),
        url("../fonts/ChakraPetchBoldItalic/ChakraPetchBoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
}

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

@font-face {
    font-family: "ChakraPetchSemiBoldItalic";
    src:
        url("../fonts/ChakraPetchSemiBoldItalic/ChakraPetchSemiBoldItalic.woff") format("woff"),
        url("../fonts/ChakraPetchSemiBoldItalic/ChakraPetchSemiBoldItalic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
}

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

@font-face {
    font-family: "ChakraPetchMediumItalic";
    src:
        url("../fonts/ChakraPetchMediumItalic/ChakraPetchMediumItalic.woff") format("woff"),
        url("../fonts/ChakraPetchMediumItalic/ChakraPetchMediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}

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

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

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

@font-face {
    font-family: "ChakraPetchLightItalic";
    src:
        url("../fonts/ChakraPetchLightItalic/ChakraPetchLightItalic.woff") format("woff"),
        url("../fonts/ChakraPetchLightItalic/ChakraPetchLightItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
}

/*--------------------------------------------------------------
# end fonts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Bootstrap style
--------------------------------------------------------------*/

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 1200px;
}

/*--------------------------------------------------------------
# End Bootstrap style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# general style
--------------------------------------------------------------*/

*:focus {
    outline: none !important;
}

body {
    font-family: "ChakraPetchRegular", serif;
}

/* buttons */

.btn-reset {
    padding: 0;
    border: none;
    outline: none;
    background-color: transparent;
}

.btn-sq {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    padding: 0 25px;
}

.btn-long {
    width: 115px;
    text-align: center;
    padding: 0;
}

.btn-sq-br {
    border: 1px solid #78ff73;
    background-color: transparent;
    line-height: 38px;
    color: #78ff73;
}

.btn-sq-br:hover,
.btn-sq-br:focus,
.btn-sq-br:active {
    border-color: #fff;
    color: #fff;
}

.btn-nm {
    font-family: "ChakraPetchBold", serif;
    font-size: 30px;
    line-height: 42px;
    height: 42px;
    padding: 0 40px;
    filter: drop-shadow(3px 4px 0px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 0;
}

@media (max-width: 575.98px) {
    .btn-nm {
        font-size: 15px;
        line-height: 20px;
        height: 20px;
        padding: 0 20px;
    }
}

.btn-green,
.btn-green.active {
    background-color: #78ff73;
    color: #000;
}

.btn-grey {
    background-color: #d5d5d5;
    color: #ffffff;
}

.btn-grey-bg {
    background: #ffffff;
    color: #777e8a;
    border: 1px solid #777e8a;
}

.btn-trpr {
    background-color: transparent;
    color: #000;
}

.btn-white {
    background-color: #ffffff;
    color: #000;
}

.btn-blue {
    background-color: #3f48cc;
    color: #ffffff !important;
    border: 1px solid #3f48cc !important;
}

.btn-blue:hover {
    color: #ffffff;
    opacity: 0.8;
}

.btn-green:hover,
.btn-green:focus,
.btn-green:active,
.btn-trpr:hover,
.btn-white:hover,
.btn-white:focus,
.btn-white:active {
    color: #000;
    opacity: 0.8;
}

.btn-red {
    color: #ffffff;
    background: #f30909;
}

.btn-octagon::before,
.btn-octagon::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    left: 0;
    right: 0;
}

.btn-nm::before {
    bottom: 100%;
    height: 17px;
}

@media (max-width: 575.98px) {
    .btn-nm::before {
        height: 8px;
    }
}

.btn-green::after,
.btn-green::before {
    border: 16px solid transparent;
    border-bottom: 16px solid #78ff73;
}

@media (max-width: 575.98px) {
    .btn-green::after,
    .btn-green::before {
        border: 8px solid transparent;
        border-bottom: 8px solid #78ff73;
    }
}

.btn-nm::after {
    top: 100%;
    height: 17px;
}

@media (max-width: 575.98px) {
    .btn-nm::after {
        height: 8px;
    }
}

.btn-green::after {
    transform: rotate(180deg);
}

.btn-back {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    padding-left: 26px;
    position: relative;
}

.btn-back:before {
    content: "";
    width: 10px;
    height: 16px;
    position: absolute;
    top: calc(50% - 8px);
    left: 2px;
    background-image: url(../img/back.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

/* end buttons */

/*octagon*/

.octagon {
    position: relative;
    z-index: 0;
}

.octagon::before,
.octagon::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    left: 0;
    right: 0;
    height: 30px;
}

.octagon::before {
    bottom: 100%;
}

.octagon::after {
    top: 100%;
    transform: rotate(180deg);
}

.octagon-whit {
    background: #ffffff;
}

.octagon-whit::after,
.octagon-whit::before {
    border: 30px solid transparent;
    border-bottom: 30px solid #fff;
}

/*end octagon*/

/*custom radio&checkbox*/

.custom-control {
    padding-left: 35px;
}

.custom-control-label {
    font-family: "ChakraPetchMedium", serif;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    padding-top: 5px;
}

.custom-control-label a {
    color: #78ff73;
}

.custom-control-label::before {
    width: 20px;
    height: 20px;
    border-color: #78ff73;
    background-color: transparent;
    left: -35px;
}

.custom-control-label:hover::before {
    border-color: #9da6b7;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #78ff73;
}

.custom-control-input:active ~ .custom-control-label::before {
    background-color: #fff !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #78ff73;
    background-color: #78ff73;
}

/*radio button*/

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000 none;
    top: 9px;
    bottom: 0;
    left: -30px;
    right: 0;
}

/*checkbox button*/

.custom-checkbox .custom-control-label::before {
    border-radius: 0;
}

.custom-radio .custom-control-label::after,
.custom-checkbox .custom-control-label::after {
    width: 21px;
    height: 21px;
    left: -35px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("../img/check.svg");
}

.input {
    background: #fff;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    font-family: "ChakraPetchSemiBold", serif;
    padding: 0 20px;
    color: #000;
    border: none;
    outline: none;
    width: 100%;
}

.input-brdr {
    border: 1px solid #c3ced7;
}

.input-brdr:hover,
.input-brdr:focus {
    border-color: #000;
    transition: all 0.3s;
}

select.input {
    padding-right: 25px;
    background-image: url(../img/drop-grey-sm.svg);
    background-position: 93% center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.label {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 15px;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.no-decorate:hover {
    text-decoration: none;
}

a,
button {
    display: inline-block;
}

.h2 {
    font-family: "ChakraPetchRegular", serif;
    font-size: 66px;
    line-height: 76px;
    text-transform: uppercase;
}

.h2 > span {
    color: #78ff73;
}

@media (max-width: 767.98px) {
    .h2 {
        font-size: 24px;
        line-height: 28px;
    }
}

.h3 {
    font-family: "ChakraPetchRegular", serif;
    font-size: 28px;
    line-height: 32px;
}

.slogan {
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    color: #78ff73;
    margin-bottom: 142px;
}

@media (max-width: 767.98px) {
    .slogan {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 80px;
    }
}

@media (max-width: 575.98px) {
    .slogan {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 30px;
    }
}

.shadows {
    position: relative;
}

.shadows::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 75px;
    left: 0;
    right: 0;
    bottom: -75px;
    top: auto;
    background: linear-gradient(180deg, #23007c 0%, rgba(71, 0, 249, 0.0001) 100%);
    opacity: 0.4;
}

.visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.popover {
    filter: drop-shadow(25px 25px 40px rgba(16, 39, 83, 0.6));
    border-radius: 0;
    border: none;
}

.popover-header {
    font-family: "ChakraPetchBold", serif;
    font-size: 18px;
    line-height: 18px;
    background-color: transparent;
    padding: 15px 20px;
}

.popover-body {
    padding: 20px 20px;
}

.popover ul {
    padding-left: 15px;
    margin: 0;
}

.main-content_one-card .modal {
    background: rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
    .main-content_one-card .modal-dialog {
        max-width: 440px;
    }
}

.main-content_one-card .modal-content {
    padding: 20px;
    border-radius: 0;
}

.main-content_one-card .modal-header {
    border: none;
    padding: 0;
    justify-content: left;
    margin-bottom: 0;
}

.main-content_one-card .modal-header .close {
    position: absolute;
    top: 20px;
    right: 25px;
    left: auto;
    opacity: 1;
    transition: all 0.3s ease;
    border: none;
    background: none;
}

.main-content_one-card .modal-header .close:hover path {
    fill: #000;
}

.main-content_one-card .modal-title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 18px;
    line-height: 23px;
    color: #0d1118;
    margin-bottom: 10px;
    text-align: left;
}

.main-content_one-card .modal-body {
    padding: 0;
}

.main-content_one-card .modal-body p {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
    margin-bottom: 18px;
    width: 88%;
}

.verification-notice .modal-text {
    margin-bottom: 40px;
}

.verification-notice .modal-btns__butt {
    min-width: 158px;
    display: block;
    margin: 0 auto;
}

.verification-notice .btn-sq-br {
    color: #0d1118;
    border-color: #c3ced7;
    margin-right: 20px;
}

@media (max-width: 767.98px) {
    .verification-notice .btn-sq-br {
        margin: 0 auto 20px;
    }
}

@media (max-width: 991.98px) {
    .notification {
        margin-bottom: 40px;
    }
}

.notification__caption {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 28px;
    line-height: 37px;
    margin-bottom: 38px;
}

.notification-box {
    background-color: #fff;
    padding: 40px 30px;
    margin-bottom: 40px;
}

@media (max-width: 991.98px) {
    .notification-box {
        padding: 40px 30px;
    }
}

.notification__icon {
    width: 46px;
    height: 46px;
    display: block;
    margin: 0 auto 12px;
}

.notification__title {
    font-family: "ChakraPetchRegular", serif;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    color: #0d1118;
    margin-bottom: 10px;
}

.notification__text {
    font-family: "ChakraPetchRegular", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    margin-bottom: 0;
}

.link-green:hover,
.link-green:active,
.link-green:focus,
.link-green {
    color: #78ff73;
}

.link-blue:hover,
.link-blue:active,
.link-blue:focus,
.link-blue {
    color: #2048e6;
}

.div-h1 {
    font-family: "ChakraPetchMedium", serif;
    font-style: normal;
    font-size: 30px;
    line-height: 1.3;
    color: #000000;
}

@media (max-width: 1300px) {
    .div-h1 {
        font-size: 28px;
    }
}

@media (max-width: 575.98px) {
    .div-h1 {
        width: 100%;
    }
}

::-webkit-scrollbar-button {
    width: 6px;
    height: 0;
}

::-webkit-scrollbar-track {
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    width: 6px;
}

::-webkit-resizer {
    width: 6px;
    height: 0;
}

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

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: -20px;
}

/*--------------------------------------------------------------
# end general style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# footer style
--------------------------------------------------------------*/

.footer {
    background-color: #4700f9;
    padding: 100px 0 80px;
    color: #fff;
}

@media (max-width: 575.98px) {
    .footer {
        padding: 40px 0;
    }

    .footer-row > div {
        width: 50%;
    }

    .footer__cell_mob {
        width: 33.33%;
    }
}

.footer-info,
.footer__item {
    margin-bottom: 80px;
}

@media (max-width: 575.98px) {
    .footer-info {
        margin-bottom: 40px;
        text-align: center;
    }

    .footer__item {
        margin-bottom: 20px;
    }

    .footer__item {
        text-align: center;
    }
}

.footer__title {
    font-family: "ChakraPetchRegular", serif;
    font-size: 22px;
    line-height: 34px;
    margin-bottom: 20px;
}

@media (max-width: 575.98px) {
    .footer__title {
        font-family: "ChakraPetchSemiBold", serif;
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 10px;
    }
}

.footer__link {
    font-family: "ChakraPetchRegular", serif;
    font-size: 16px;
    line-height: 40px;
    color: #78ff73;
}

@media (max-width: 575.98px) {
    .footer__link {
        font-size: 12px;
        line-height: 34px;
    }
}

.footer-info__tel:focus,
.footer-info__tel:active,
.footer-info__tel:hover,
.footer__link:hover,
.footer__link:active,
.footer__link:focus {
    color: #fff;
}

.footer-info__img {
    display: block;
    margin-bottom: 29px;
}

@media (max-width: 575.98px) {
    .footer-info__img {
        margin: 0 auto 10px;
    }
}

.footer-info__tel {
    color: #78ff73;
    font-size: 16px;
    line-height: 32px;
    display: inline-block;
    vertical-align: middle;
}

.footer-info__date {
    font-size: 16px;
    line-height: 32px;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .footer-info__date,
    .footer-info__tel {
        font-size: 14px;
        line-height: 24px;
    }
}

.footer__license {
    font-size: 16px;
    line-height: 26px;
}

.footer__license:first-child {
    margin-bottom: 20px;
}

.footer__license > span {
    color: #78ff73;
}

@media (max-width: 575.98px) {
    .footer-info__license {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .footer__license {
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin-bottom: 0;
    }

    .footer__license:first-child {
        margin-right: 20px;
    }
}

@media (max-width: 991.98px) {
    .footer__logo {
        display: none;
    }
}

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

@media (max-width: 991.98px) {
    .footer__payments {
        justify-content: center;
        margin-bottom: 20px;
    }
}

.footer__payments-title {
    font-size: 14px;
    line-height: 14px;
    margin-right: 30px;
}

@media (max-width: 575.98px) {
    .footer__payments-title {
        font-size: 12px;
        line-height: 12px;
        margin-right: 10px;
    }
}

.footer__payments-img {
    display: block;
    margin: 0 15px 0 0;
}

.footer__payments-img:last-child {
    margin: 0;
}

.footer__copy {
    color: #78ff73;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .footer__copy {
        font-size: 12px;
        line-height: 12px;
    }
}

/*--------------------------------------------------------------
# end footer style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# header-sidebar style
--------------------------------------------------------------*/

header {
    position: relative;
    z-index: 999;
}

.header-sidebar {
    background: #fff;
    width: 80px;
    height: 100vh;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    padding: 40px 0;
}

@media (max-width: 991px) {
    .header-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        padding: 2px 16px;
        text-align: left;
        display: flex;
        align-items: center;
    }
}

.header-sidebar_logo {
    display: inline-block;
    margin: 0 auto 50px;
}
@media (max-width: 991px) {
    .header-sidebar_logo {
        margin: 0;
    }

    .header-sidebar_nav {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 80px;
        background: #fff;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        height: 100vh;
    }

    .header-sidebar_nav.active {
        padding-top: 60px;
        padding-bottom: 20px;
        overflow: visible;
        pointer-events: all;
        opacity: 1;
    }
}

.btn-header-sidebar {
    display: none;
    width: 18px;
    height: 18px;
    margin-right: 20px;
    background-image: url(../img/menu.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    background-color: transparent;
    position: relative;
}

.btn-header-sidebar::before,
.btn-header-sidebar::after {
    content: "";
    position: absolute;
    top: 9px;
    width: 18px;
    height: 2px;
    background-color: #000;
    left: 0;
    opacity: 0;
    transition: 0.3s all;
}

.btn-header-sidebar::before {
    transform: rotate(45deg);
}

.btn-header-sidebar::after {
    transform: rotate(135deg);
}

.btn-header-sidebar.is-active {
    background-image: none;
    transition: 0.3s all;
}

.btn-header-sidebar.is-active::before,
.btn-header-sidebar.is-active::after {
    opacity: 1;
    transition: 0.3s all;
}

@media (max-width: 991px) {
    .btn-header-sidebar {
        display: block;
    }
}

.header-sidebar_li {
    text-align: center;
    line-height: 1;
}

.header-sidebar_li a {
    display: block;
    line-height: 1;
    padding: 10px 0;
}

.header-sidebar_li svg {
    width: 20px;
    margin: 0 auto 5px;
}

.header-sidebar_li span {
    font-family: "ChakraPetchMedium", serif;
    font-style: normal;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    color: #777e8a;
    display: block;
}

.header-sidebar_li--active svg path,
.header-sidebar_li a.active svg path {
    fill: #000;
}

.header-sidebar_li--active span,
.header-sidebar_li a.active span {
    color: #0d1118;
}

/*--------------------------------------------------------------
# end header-sidebar style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Transaction History style
--------------------------------------------------------------*/

.blue-bg {
    background: #fbfaff;
    padding-left: 100px;
    padding-right: 320px;
    position: relative;
}

.background {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}

.background.active {
    display: block;
}

@media (max-width: 991px) {
    .blue-bg {
        padding-left: 0;
        padding-right: 0;
    }
}

.main-content {
    padding: 40px;
    padding-bottom: 30px;
    width: 100%;
    min-height: 100vh;
}

@media (max-width: 991px) {
    .main-content {
        padding: 10px 16px 0;
    }
}

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

@media (max-width: 767.98px) {
    .main-content_top-line {
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
    }
}

.main-content_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

@media (max-width: 575.98px) {
    .main-content_left {
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
    }
}

.main-content_btn {
    display: flex;
    gap: -1px;
}

.form-orders {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
}

@media (max-width: 767.98px) {
    .form-orders {
        flex-wrap: wrap;
    }
}

.form-orders_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

@media (max-width: 575.98px) {
    .form-orders_left {
        flex-wrap: wrap;
        gap: 12px 15px;
    }
}

.form-orders_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

@media (max-width: 767.98px) {
    .form-orders_right {
        width: 100%;
        justify-content: space-between;
        order: -1;
    }
}

.form-orders_submit {
    padding-left: 40px;
    background-image: url(../img/search.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 24px center;
    border-radius: 0;
}

.form-orders_item_date {
    max-width: 125px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 38px;
    border: 1px solid #c3ced7;
    min-width: 150px;
}
.form-orders_item_date .react-datepicker__close-icon::after {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: silver !important;
}
@media (max-width: 575.98px) {
    .form-orders_item {
        width: 140px;
    }
}

.form-orders_item label {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    margin-bottom: 5px;
    display: block;
}

@media (max-width: 575.98px) {
    .form-orders_item label {
        margin-bottom: 4px;
    }
}

.form-orders_item select {
    display: block;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #0d1118;
    background-color: transparent;
    border: none;
    padding-right: 25px;
    background-image: url(../img/drop-grey-sm.svg);
    background-position: 93% center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (max-width: 575.98px) {
    .form-orders_item select {
        font-size: 11px;
        padding-right: 18px;
    }
}

.form-orders_clear {
    background: #ffffff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.form-orders_clear img {
    width: 18px;
}

.table-orders {
    background: #ffffff;
    padding: 0 40px;
    height: auto;
    overflow: auto;
    border: 1px solid #e1e0e3;
}

@media (max-width: 1300px) {
    .table-orders {
        padding: 0 20px;
        overflow: visible;
        max-height: 100%;
    }
}

.table-orders_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0 30px;
}

@media (max-width: 1300px) {
    .table-orders_header {
        padding: 20px 0;
    }
}

@media (max-width: 575.98px) {
    .table-orders_header {
        flex-wrap: wrap;
    }
}

.table-orders_title {
    font-family: "ChakraPetchRegular", serif;
    font-size: 18px;
    line-height: 23px;
    color: #0d1118;
}

@media (max-width: 1300px) {
    .table-orders_title {
        font-size: 16px;
        line-height: 21px;
    }
}

.table-orders_title span {
    font-family: "ChakraPetchSemiBold", serif;
}

.table-orders_date {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
}

@media (max-width: 1300px) {
    .table-orders_body {
        overflow: auto;
        max-height: 465px;
    }
}

@media (max-width: 575.98px) {
    .table-orders_body {
        width: calc(100% + 20px);
        padding-right: 20px;
    }
}

.table-orders_item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
    border-top: 1px solid #f0f5f9;
    padding: 48px 0 39px;
}

@media (max-width: 1300px) {
    .table-orders_item {
        min-width: 815px;
        width: 100%;
        padding: 22px 0;
    }
}

.table-orders_item-number {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    width: 5%;
}

.table-orders_item-logo {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 16px;
    line-height: 107%;
    color: #000000;
    display: flex;
    align-items: center;
    width: 11.5%;
    position: relative;
}

@media (max-width: 1300px) {
    .table-orders_item-logo {
        font-size: 14px;
    }
}

@media (max-width: 991.98px) {
    .table-orders_item-logo {
        width: 8.5%;
    }
}

.table-orders_item-logo img {
    margin-right: 5px;
    width: 20px;
    flex: none;
}

@media (max-width: 1300px) {
    .table-orders_item-logo img {
        width: 18px;
    }
}

.nologo {
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    flex: none;
}

@media (max-width: 1300px) {
    .nologo {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 991.98px) {
    .nologo {
        display: none;
    }
}

.table-orders_item-date {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    color: #777e8a;
    width: 12%;
}

@media (max-width: 991.98px) {
    .table-orders_item-date {
        width: 9%;
        text-align: left;
    }
}

.table-orders_item-code {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    color: #0d1118;
    width: 30%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (max-width: 991.98px) {
    .table-orders_item-code {
        width: 33%;
    }
}

.table-orders_item-code::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.table-orders_item-from {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 12px;
    color: #777e8a;
    width: 4.5%;
}

.table-orders_item-from-card {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 12px;
    color: #777e8a;
    width: 11%;
    padding-left: 25px;
}

@media (max-width: 991.98px) {
    .table-orders_item-from-card {
        padding-left: 0;
    }
}

.table-orders_item-to {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 18px;
    line-height: 23px;
    color: #0d1118;
    width: 15%;
}

.table-orders_item-to span {
    color: #777e8a;
}

.table-orders_item-to-card {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    width: 10%;
}

.table-orders_item-to-card span {
    font-family: "ChakraPetchMediumItalic", serif;
    font-size: 12px;
    line-height: 96.5%;
    color: #2bb867;
}

.table-orders_item-status {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    width: auto;
    flex: 1;
}

.table-orders_item-status--received {
    color: #fda24c;
}

.table-orders_item-status--fulfilled {
    color: #b47cc0;
}

.table-orders_item-status--charged {
    color: #53bd73;
}

.table-orders_item-status--executed {
    color: #2bb867;
}

.table-orders_item-bank {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    color: #777e8a;
    width: 15%;
}

.table-orders_item-view {
    width: 20px;
    position: relative;
}

.button-view-hover {
    width: 20px;
    height: 20px;
    background-image: url(../img/view.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.view-hover {
    position: absolute;
    background: #ffffff;
    box-shadow: 16px 13px 35px rgba(5, 9, 78, 0.2);
    width: 300px;
    right: 0;
    top: calc(100% + 15px);
    z-index: 999;
    display: none;
}

.active .view-hover {
    display: block;
}

@media (max-width: 575.98px) {
    .active .view-hover {
        position: fixed;
        top: 150px;
        left: calc(50% - 150px);
    }
}

.view-hover--logo {
    right: auto;
    left: 0;
}

.view-hover_close {
    z-index: 999;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 18px;
    height: 18px;
    background-image: url(../img/close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    cursor: pointer;
}

.view-hover_tilte {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 16px;
    line-height: 107%;
    color: #000000;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.transaction-info-popover {
    position: fixed !important;
    min-height: 400px;
}

.view-hover_body {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}

.view-hover_item {
    width: 100%;
    margin-bottom: 20px;
}

.view-hover_item:last-child {
    margin-bottom: 0;
}

.view-hover_item--short {
    width: 50%;
}

.view-hover_lavel {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 96.5%;
    color: #777e8a;
    margin-bottom: 10px;
}

.view-hover_value {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #0d1118;
}

.view-hover_value span.grey {
    color: #777e8a;
}

.view-hover_value span.red {
    color: #f30909;
}

.view-hover_value span.green {
    color: #2bb867;
}

.btn-load-more {
    display: inline-block;
    margin: 0 auto;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #0d1118;
    cursor: pointer;
}

.btn-load-more img {
    width: 22px;
    vertical-align: sub;
    margin-right: 4px;
}

.load-more-center {
    text-align: center;
    margin: 30px 0 40px;
}

@media (max-width: 575.98px) {
    .load-more-center {
        margin: 30px 0;
    }
}

/*--------------------------------------------------------------
# end Transaction History style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# account-sidebar  style
--------------------------------------------------------------*/

.account-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100svh;
    background: #fff;
    padding: 40px 24px;
    overflow-y: auto;
    z-index: 999999999 !important;
}
.account-sidebar__hidden {
    right: -320px;
    transition: 0.3s all;
}

@media (max-width: 911px) {
    .account-sidebar {
        right: -320px;
        transition: 0.3s all;
    }
}
.account-sidebar.active {
    right: 0 !important;
}
@media (max-width: 911px) {
    .account-sidebar {
        width: 300px;
        right: -300px;
        padding: 28px 18px 30px 18px;
    }
}

.btn-account-sidebar {
    display: none;
    width: 50px;
    height: 40px;
    position: fixed;
    right: 0;
    top: 10px;
    background: #ffffff;
    background-image: url(../img/btnas.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    transition: 0.3s all;
    z-index: 30000;
}

.btn-account-sidebar.is-active {
    background-image: url(../img/btnash.svg);
    right: 320px;
    transition: 0.3s all;
    top: 50px !important;
}

@media (max-width: 911px) {
    .btn-account-sidebar {
        display: block !important;
    }
}

@media (max-width: 575.98px) {
    .btn-account-sidebar.is-active {
        right: 300px;
    }
}

.account-sidebar_header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .account-sidebar_header {
        margin-bottom: 20px;
    }
}

.account-sidebar_image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

@media (max-width: 575.98px) {
    .account-sidebar_image {
        width: 35px;
        height: 35px;
    }
}

.account-sidebar_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-sidebar_name {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 3px;
}

@media (max-width: 575.98px) {
    .account-sidebar_name {
        font-size: 12px;
        margin-bottom: 0;
    }
}

.account-sidebar_status {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
}

@media (max-width: 575.98px) {
    .account-sidebar_status {
        font-size: 11px;
    }
}

.account-sidebar_verified {
    position: relative;
}

.account-sidebar_verified:after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-image: url(../img/verif.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(calc(100% + 5px));
    margin-top: -2px;
}

@media (max-width: 575.98px) {
    .account-sidebar_verified:after {
        width: 14px;
        height: 14px;
        left: calc(100% + 5px);
        top: 2px;
    }
}

.account-sidebar_btn {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}

@media (max-width: 575.98px) {
    .account-sidebar_btn {
        margin-bottom: 30px;
    }
}

.account-sidebar_btn .btn-sq {
    padding: 0 20px;
}

.account-sidebar_cards {
    border-top: 1px solid #f0f5f9;
    padding-top: 20px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-right: 20px;
}

@media (max-width: 575.98px) {
    .account-sidebar_cards {
        padding-right: 15px;
        margin-bottom: 30px;
        padding-top: 30px;
    }
}

.account-sidebar_cards-title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 16px;
    color: #777e8a;
}

.account-sidebar_cards-add {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #eaeef1;
    background-color: #ffffff;
    font-family: "ChakraPetchBold", serif;
    cursor: pointer;
}

.account-sidebar_cards-add:hover {
    opacity: 0.8;
    text-decoration: none;
}

.account-sidebar_cards-add img {
    width: 8px;
}

.account-sidebar_cards-item {
    width: 100%;
    display: flex;
    font-size: 14px;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #f0f5f9;
    padding: 10px 0;
}

.account-sidebar_cards-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.account-sidebar_cards-name,
.account-sidebar_cards-value {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #011928;
}

.account-sidebar_cards-name img {
    width: 25px;
    margin-right: 7px;
    vertical-align: middle;
}

.account-sidebar_cards-name span,
.account-sidebar_cards-value span {
    color: #777e8a;
    display: block;
    margin-top: 3px;
}

.account-sidebar_cards-value {
    text-align: right;
}

.account-sidebar_cards-value strong {
    line-height: 25px;
}

.account-sidebar_footer {
    border-top: 1px solid #f0f5f9;
    margin: 0 0 30px;
    padding-top: 20px;
}

@media (max-width: 575.98px) {
    .account-sidebar_footer {
        margin: 30px 0;
        padding-top: 30px;
    }
}

.account-sidebar_footer:last-child {
    margin-bottom: 0;
}

.account-sidebar_footer-title {
    margin-bottom: 20px;
    font-family: "ChakraPetchMedium", serif;
    font-size: 18px;
    line-height: 25px;
    color: #000000;
}

@media (max-width: 575.98px) {
    .account-sidebar_footer-title {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 15px;
    }
}

.account-sidebar_footer-desc {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 159%;
    color: #777e8a;
}

@media (max-width: 575.98px) {
    .account-sidebar_footer-desc {
        font-size: 11px;
    }
}

.account-sidebar_footer-desc a,
.account-sidebar_footer-desc span {
    color: #000000;
    display: inline;
}

.account-sidebar_footer-btn {
    margin-top: 20px;
}

.table-orders_header-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 50px;
}

@media (max-width: 575.98px) {
    .table-orders_header-filter {
        justify-content: flex-start;
        width: 100%;
        margin-top: 20px;
    }
}

.btn-filter {
    display: flex;
    align-items: center;
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #3f48cc;
    cursor: pointer;
}

.btn-filter svg {
    width: 20px;
    margin-right: 5px;
}

.btn-search {
    display: flex;
    align-items: center;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
}

.btn-search svg {
    margin-right: 5px;
    width: 12px;
}

.block-filter {
    position: relative;
}

.filter-hover {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    z-index: 999;
    background: #ffffff;
    box-shadow: 16px 13px 35px rgba(5, 9, 78, 0.2);
    width: 232px;
    border: none;
    border-radius: 0;
    padding: 0;
}

@media (max-width: 575.98px) {
    .filter-hover {
        right: auto;
        left: 0;
    }
}

.filter-hover.active {
    display: block;
}

.filter-hover_title {
    padding: 20px;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 107%;
    color: #000000;
    border-bottom: 1px solid #f0f5f9;
}

.filter-hover_block {
    padding: 20px;
}

.filter-hover_block label {
    padding-left: 21px;
    position: relative;
    display: block;
    line-height: 1;
    margin-bottom: 14px;
}

.filter-hover_block label:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #777e8a;
    border-radius: 4px;
}

.filter-hover_block input:checked + label:before {
    background-image: url(../img/verif.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #3f48cc;
}

.filter-hover_block input {
    position: absolute;
    opacity: 0;
    z-index: -999;
}

.filter-hover_block label span {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #0d1118;
}

.filter-hover_btn {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.filter-hover_btn .btn-white {
    padding: 0 16px;
    flex: none;
}

.filter-hover_btn .btn-blue {
    flex: 1;
    padding: 0;
    text-align: center;
}

.table-orders_cards-filter {
    border-top: 1px solid #f0f5f9;
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1300px) {
    .table-orders_cards-filter {
        min-width: 815px;
        padding-top: 20px;
    }
}

.table-orders_cards-filter div {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
}

.table-orders_cards-filter span {
    position: relative;
    padding-right: 15px;
    cursor: pointer;
}

.table-orders_cards-filter span.active {
    color: #3f48cc;
}

.table-orders_cards-filter span:after {
    content: "";
    width: 10px;
    height: 6px;
    background-image: url(../img/noactive.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 5px;
}

.table-orders_cards-filter span.active:after {
    background-image: url(../img/active.svg);
}

.table-orders_cards-filter_label {
    margin-right: 8px;
    display: inline-block;
    vertical-align: sub;
}

.table-orders_cards-filter_label label {
    width: 16px;
    height: 16px;
    border: 1px solid #777e8a;
    border-radius: 4px;
    margin: 0;
    display: block;
    cursor: pointer;
}

.table-orders_cards-filter_label input:checked + label {
    background-image: url(../img/verif.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #3f48cc;
}

.table-orders_cards-filter_label input {
    position: absolute;
    opacity: 0;
    z-index: -999;
}

.table-orders_body {
    padding-bottom: 40px;
}

.table-orders_cards-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0 0;
}

@media (max-width: 1300px) {
    .table-orders_cards-item {
        min-width: 815px;
    }
}

.table-orders_cards-item div {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
}

.table-orders_cards-item .table-orders_cards-filter_account {
    color: #3f48cc;
}

.table-orders_cards-item .table-orders_cards-filter_status {
    color: #53bd73;
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 16px;
}

.table-orders_cards-filter_title {
    width: 20%;
}

.table-orders_cards-filter_name {
    width: 12%;
}

.table-orders_cards-filter_nickname {
    width: 13%;
}

.table-orders_cards-filter_date {
    width: 10%;
}

.table-orders_cards-filter_type {
    width: 6%;
}

.table-orders_cards-filter_account {
    width: 8%;
}

.table-orders_cards-filter_status {
    width: 7%;
}

.main-content_one-card {
    background: #ffffff;
    padding: 25px 40px;
    margin-bottom: 40px;
}

@media (max-width: 1300px) {
    .main-content_one-card {
        padding: 20px;
        margin-bottom: 20px;
    }
}

.main-content_one-card_title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 18px;
    line-height: 23px;
    color: #0d1118;
    margin-bottom: 20px;
}

.main-content_one-card_info {
    font-family: "ChakraPetchMedium", serif;
    font-size: 10px;
    line-height: 13px;
    color: #777e8a;
}

.main-content_one-card_ul {
    display: flex;
    gap: 40px;
    margin-bottom: 20px !important;
}

.main-content_one-card_ul li {
    position: relative;
    padding: 0 0 5px;
    border-bottom: 2px solid transparent;
}

.main-content_one-card_ul li a {
    font-family: "ChakraPetchSemiBold", serif;
    line-height: 16px;
    color: #777e8a;
    display: block;
}

.main-content_one-card_ul li:hover a {
    text-decoration: none;
    color: #3f48cc;
}

.main-content_one-card_ul li.active {
    border-color: #3f48cc;
}

.main-content_one-card_ul li.active a {
    color: #3f48cc;
}

.main-content_list-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 30px 0;
}

@media (max-width: 575.98px) {
    .main-content_list-btn {
        margin: 20px 0;
        flex-wrap: wrap;
    }
}

.btn-modal {
    padding: 7px 15px;
    border: none;
    background: #f3f7fd;
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-modal img {
    width: 16px;
    margin-right: 5px;
}

.btn-modal--red {
    color: #f30909;
}

.block-one-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 991.98px) {
    .block-one-card {
        flex-wrap: wrap;
        gap: 20px;
    }
}

.block-one-card_visual {
    width: 285px;
    flex: none;
    background: #380bd7;
    box-shadow: 16px 13px 35px rgba(5, 9, 78, 0.2);
    border-radius: 10px;
    padding: 17px 20px 20px;
}

@media (max-width: 575.98px) {
    .block-one-card_visual {
        width: 100%;
        max-width: 285px;
    }
}

.block-one-card_visual_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 43px;
}

.block-one-card_visual_view {
    width: 20px;
    height: 20px;
    display: block;
    background-image: url(../img/view-w.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition:
        opacity 0.3s,
        visibility 0.3s;
}

.block-one-card_visual_view:hover {
    opacity: 0.7;
}

.block-one-card_visual_logo {
    width: 40px;
    height: auto;
}

.block-one-card_visual_number-card {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.29em;
    color: #ffffff;
    margin-bottom: 35px;
}

.block-one-card_visual_label {
    font-family: "ChakraPetchMedium", serif;
    font-size: 10px;
    line-height: 13px;
    color: #a4b2c9;
}

.block-one-card_visual_value {
    font-family: "ChakraPetchMedium", serif;
    font-size: 10px;
    line-height: 13px;
    color: #ffffff;
    margin-bottom: 2px;
}

.block-one-card_visual_bottom {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.button-view-details {
    width: 16px;
    height: 16px;
    background-image: url(../img/view.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

.block-one-card_info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 67px;
    flex: 1;
}

@media (max-width: 991.98px) {
    .block-one-card_info {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 575.98px) {
    .block-one-card_info {
        flex-wrap: wrap;
        gap: 30px;
    }
}

.block-one-card_details {
    flex: 1;
}

@media (max-width: 575.98px) {
    .block-one-card_details {
        min-width: 270px;
    }
}

.block-one-card_info-title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 107%;
    color: #000000;
    border-bottom: 1px solid #f0f5f9;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.block-one-card_info-label {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
}

.block-one-card_info-value {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 107%;
    text-align: right;
    color: #000000;
}

.block-one-card_info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.block-one-card_info-item:not(:last-child) {
    margin-bottom: 15px;
}

.btn-change {
    width: 14px;
    height: 14px;
    border: none;
    background-image: url(../img/pencil.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

.block-card-limits {
    border-top: 1px solid #f0f5f9;
    padding-top: 20px;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

.block-card-limits_one {
    width: calc(50% - 10px);
    border: 1px solid #f3f7fd;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .block-card-limits_one {
        width: 100%;
    }
}

.block-card-limits_one-top {
    width: 100%;
    margin-bottom: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block-card-limits_one-title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
}

.block-card-limits_one-item {
    width: calc(50% - 10px);
}

.block-card-limits_one-value {
    display: flex;
    align-items: center;
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 107%;
    color: #000000;
    border-bottom: 4px solid #380bd7;
    padding-bottom: 9px;
    margin-bottom: 10px;
}

.disabled .block-card-limits_one-value {
    color: #777e8a;
    border-color: #777e8a;
}

.disabled .btn-change {
    opacity: 0.5;
}

/*.block-card-limits_one-value span {
    margin-right: 5px;
}*/

.block-card-limits_one-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
}

.checkbox-ios {
    display: inline-block;
    height: 15px;
    line-height: 15px;
    margin-bottom: 0;
    position: relative;
    vertical-align: middle;
    user-select: none;
}

.checkbox-ios .checkbox-ios-switch {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 28px;
    height: 15px;
    border-radius: 25%/50%;
    vertical-align: top;
    background: #777e8a;
    transition: 0.2s;
    border: none;
}

.checkbox-ios .checkbox-ios-switch:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transition: 0.15s;
}

.checkbox-ios input[type="checkbox"] {
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox-ios input[type="checkbox"]:not(:disabled):active + .checkbox-ios-switch:before {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

.checkbox-ios input[type="checkbox"]:checked + .checkbox-ios-switch {
    background: #380bd7;
}

.checkbox-ios input[type="checkbox"]:checked + .checkbox-ios-switch:before {
    transform: translateX(13px);
}

.checkbox-ios input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch {
    cursor: pointer;
    border-color: rgba(0, 0, 0, 0.3);
}

.checkbox-ios.focused .checkbox-ios-switch:before {
    box-shadow: inset 0 0 4px #ff5623;
}

.modal-body form label {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.modal-body form input:not([type="submit"]):not(.custom-autocomplete__input) {
    font-family: "ChakraPetchRegular", serif;
    margin: 0;
    width: 100%;
    background: #f3f7fd;
    border: none;
    height: 40px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
    margin-bottom: 10px;
}

.modal-body form input[type="submit"] {
    margin-top: 10px;
}

.modal-body form .iti,
.modal-body form .intl-tel-input {
    margin-bottom: 10px;
    width: 100%;
}

.modal-body form .iti input,
.modal-body form .intl-tel-input input {
    margin-left: 70px !important;
    width: calc(100% - 70px);
    padding: 0 10px !important;
}

.modal-body form .iti__selected-flag,
.modal-body form .intl-tel-input .selected-flag {
    background: #f3f7fd;
    width: 55px;
    padding: 0 10px;
}

/*--------------------------------------------------------------
# end account-sidebar style
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# buy step 1
--------------------------------------------------------------*/

.buy-steps {
    position: relative;
    z-index: 0;
    background: #4700f9;
}

.buy-steps__wrapper {
    padding: 44px 0 180px;
    position: relative;
    z-index: 1;
    color: #fff;
}

@media (max-width: 575.98px) {
    .buy-steps__wrapper {
        padding-bottom: 80px;
    }
}

.buy-steps__logo {
    display: block;
    margin: 0 auto 37px;
    width: 110px;
}

.buy-steps::after,
.buy-steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 50%;
    height: 100%;
    top: 0;
    bottom: 0;
}

.buy-steps::before {
    left: 0;
    background: url(../img/pattern-blu.svg) left top repeat;
}

.buy-steps::after {
    right: 0;
    left: auto;
    background: #000 url(../img/dark_pattern.svg) left top repeat;
}

.buy-steps--blue::after {
    background: url(../img/pattern-blu.svg) left top repeat;
}

.buy-steps__h2 {
    margin-bottom: 34px;
}

.buy-steps__line {
    max-width: 830px;
    margin: 0 auto 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

@media (max-width: 991.98px) {
    .buy-steps__line {
        max-width: 545px;
    }
}

@media (max-width: 767.98px) {
    .buy-steps__line {
        max-width: 305px;
    }
}

.buy-steps__line-item {
    padding-bottom: 40px;
    margin-right: 2px;
    position: relative;
    z-index: 0;
    width: 100%;
}

.buy-steps__line-item > span {
    position: absolute;
    z-index: 0;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
}

.buy-steps__line-item.done > span,
.buy-steps__line-item.active > span {
    color: #78ff73;
}

@media (max-width: 991.98px) {
    .buy-steps__line-item > span {
        font-size: 14px;
        line-height: 14px;
    }
}

@media (max-width: 767.98px) {
    .buy-steps__line-item > span {
        font-size: 10px;
        line-height: 10px;
        white-space: pre-wrap;
        text-align: left;
        max-width: 60px;
    }
}

.buy-steps__line-item:first-child > span {
    left: -92px;
}

.buy-steps__line-item:nth-child(2) > span {
    left: -13px;
}

.buy-steps__line-item:nth-child(3) > span {
    left: 51px;
}

.buy-steps__line-item:last-child > span {
    right: -75px;
}

@media (max-width: 991.98px) {
    .buy-steps__line-item:first-child > span {
        left: -56px;
    }

    .buy-steps__line-item:nth-child(2) > span {
        left: -6px;
    }

    .buy-steps__line-item:nth-child(3) > span {
        left: 28px;
    }

    .buy-steps__line-item:last-child > span {
        right: -62px;
    }
}

@media (max-width: 767.98px) {
    .buy-steps__line-item:first-child > span {
        left: -10px;
    }

    .buy-steps__line-item:nth-child(2) > span {
        left: 14px;
    }

    .buy-steps__line-item:nth-child(3) > span {
        left: 34px;
    }

    .buy-steps__line-item:last-child > span {
        right: -35px;
    }
}

.buy-steps__line-item::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    border-bottom: 1px dashed #78ff73;
    bottom: -2px;
}

.buy-steps__line-item:first-child::after {
    left: 13px;
    width: 275px;
}

.buy-steps__line-item:nth-child(2)::after {
    left: 80px;
    width: 260px;
}

.buy-steps__line-item:nth-child(3)::after {
    left: 135px;
    width: 275px;
}

@media (max-width: 991.98px) {
    .buy-steps__line-item:first-child::after {
        left: 11px;
        width: 175px;
    }

    .buy-steps__line-item:nth-child(2)::after {
        left: 62px;
        width: 175px;
    }

    .buy-steps__line-item:nth-child(3)::after {
        left: 98px;
        width: 175px;
    }
}

@media (max-width: 767.98px) {
    .buy-steps__line-item:first-child::after {
        left: 10px;
        width: 95px;
    }

    .buy-steps__line-item:nth-child(2)::after {
        left: 30px;
        width: 95px;
    }

    .buy-steps__line-item:nth-child(3)::after {
        left: 50px;
        width: 95px;
    }
}

.buy-steps__line-item:last-child::after {
    display: none;
}

.buy-steps__line-item.done::after,
.buy-steps__line-item.active::after {
    border-bottom-style: solid;
}

.buy-steps__line-item::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #78ff73;
    position: absolute;
    z-index: 1;
    bottom: -10px;
}

.buy-steps__line-item.active::before {
    border-width: 5px;
    background: #000000;
}

.buy-steps__line-item.done::before {
    content: url(../img/done.svg);
    border: none;
}

.buy-steps__line-item:first-child::before {
    left: -4px;
}

.buy-steps__line-item:nth-child(2)::before {
    left: 70px;
}

.buy-steps__line-item:nth-child(3)::before {
    left: 124px;
}

.buy-steps__line-item:last-child::before {
    right: -9px;
}

@media (max-width: 991.98px) {
    .buy-steps__line-item:first-child::before {
        left: -4px;
    }

    .buy-steps__line-item:nth-child(2)::before {
        left: 48px;
    }

    .buy-steps__line-item:nth-child(3)::before {
        left: 86px;
    }

    .buy-steps__line-item:last-child::before {
        right: -9px;
    }
}

@media (max-width: 767.98px) {
    .buy-steps__line-item:first-child::before {
        left: -4px;
    }

    .buy-steps__line-item:nth-child(2)::before {
        left: 27px;
    }

    .buy-steps__line-item:nth-child(3)::before {
        left: 48px;
    }

    .buy-steps__line-item:last-child::before {
        right: -4px;
    }
}

.buy-steps__payment .buy-steps__caption {
    margin-bottom: 40px;
}

.buy-steps__info .buy-steps__caption {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .buy-steps__payment {
        margin-bottom: 100px;
    }
}

@media (max-width: 575.98px) {
    .buy-steps__payment {
        margin-bottom: 40px;
    }
}

.buy-steps__payment-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.buy-steps__payment-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 0 5px;
    min-height: 96px;
    width: 100%;
    margin-bottom: 13px;
}

.buy-steps__payment-wrap:not(:last-child) {
    margin-right: 28px;
}

@media (max-width: 575.98px) {
    .buy-steps__payment-wrap:not(:last-child) {
        margin-right: 10px;
    }
}

.buy-steps__item {
    margin-bottom: 13px;
}

.buy-steps__actions {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.buy-steps__payment-start .buy-steps__actions {
    padding-top: 13px;
}

@media (max-width: 575.98px) {
    .buy-steps__actions {
        flex-direction: column;
    }
}

.buy-steps__checkboxes {
    padding-right: 36px;
}

@media (max-width: 575.98px) {
    .buy-steps__checkboxes {
        padding: 0 0 40px;
    }
}

.buy-steps__captcha {
    flex-grow: 1;
    padding-top: 6px;
}

.buy-steps__checkboxes .custom-control:not(:last-child) {
    margin-bottom: 9px;
}

.buy-steps__payment-start .buy-steps__checkboxes .custom-control:not(:last-child) {
    margin-bottom: 14px;
}

.buy-steps__ssl {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 16px;
    line-height: 16px;
    color: #78ff73;
    margin-bottom: 0;
}

.buy-steps__ssl:before {
    content: url(../img/lock.svg);
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    transform: translateY(2px);
}

.buy-steps__change-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .buy-steps__change-info {
        justify-content: space-between;
    }
}

.buy-steps__from,
.buy-steps__to {
    font-family: "ChakraPetchRegular", serif;
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 55px;
    position: relative;
    z-index: 0;
}

.buy-steps__exchange-ic {
    display: block;
    margin: 0 38px 55px;
}

@media (max-width: 575.98px) {
    .buy-steps__exchange-ic {
        margin-left: auto;
        margin-right: auto;
    }
}

.buy-steps__name {
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 14px;
    color: #78ff73;
    text-transform: uppercase;
    position: absolute;
    left: 2px;
    bottom: -25px;
}

.buy-steps__info-top {
    margin-bottom: 37px;
}

.buy-steps__link-recalc,
.buy-steps__info-recalc {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 12px;
}

.buy-steps__link-recalc:hover,
.buy-steps__link-recalc:focus,
.buy-steps__link-recalc:active {
    color: #78ff73;
}

.buy-steps__info-recalc {
    margin-bottom: 8px;
}

.buy-steps__link-recalc {
    display: inline-block;
    vertical-align: middle;
    color: #78ff73;
    margin-bottom: 41px;
}

.buy-steps__info-full {
    max-width: 318px;
}

@media (max-width: 991.98px) {
    .buy-steps__info-full {
        max-width: 350px;
    }
}

@media (max-width: 575.98px) {
    .buy-steps__info-full {
        max-width: 100%;
    }
}

.buy-steps__info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 100%;
}

.buy-steps__info-row:last-child {
    margin-bottom: 0;
}

.buy-steps__info-rate {
    font-family: "ChakraPetchRegular", serif;
    font-size: 16px;
    line-height: 12px;
    margin-right: 10px;
}

.buy-steps__info-val {
    font-family: "ChakraPetchRegular", serif;
    font-size: 16px;
    line-height: 14px;
    color: #78ff73;
    text-align: right;
    word-break: break-all;
}

.buy-steps__info-wallet {
    line-height: 24px;
    transform: translateY(-6px);
}

.buy-steps__butt {
    font-family: "ChakraPetchRegular", serif;
}

.buy-steps__butt-cancel {
    margin-right: 20px;
}

.warning-info {
    background: #fcf7d1;
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    color: #896e39;
    padding: 15px;
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.warning-info img {
    width: 23px;
    height: auto;
    margin-right: 10px;
    flex: none;
}

.block-table-octagon {
    margin: 70px 0;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 60px;
}

@media (max-width: 991.98px) {
    .block-table-octagon {
        padding: 10px 20px;
    }
}

@media (max-width: 575.98px) {
    .block-table-octagon {
        margin: 50px 0;
    }
}

.table-octagon_title {
    width: 100%;
    font-family: "ChakraPetchRegular", serif;
    font-size: 22px;
    line-height: 29px;
    color: #0d1118;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f5f9;
}

.block-table-octagon form {
    width: 43%;
    margin: 0 auto 40px;
}

@media (max-width: 991.98px) {
    .block-table-octagon form {
        width: 65%;
        max-width: 455px;
    }
}

@media (max-width: 767.98px) {
    .block-table-octagon form {
        width: 100%;
        max-width: 100%;
    }
}

.form-row {
    gap: 20px;
}

@media (max-width: 575.98px) {
    .form-row {
        flex-wrap: wrap;
    }
}

.form-item {
    flex: 1;
}

@media (max-width: 575.98px) {
    .form-row:first-child .form-item:nth-child(2) label {
        width: 15px;
        white-space: nowrap;
    }
}

.form-item-fixed {
    width: 115px;
    flex: none;
}

.form-item-short {
    width: 75px;
    flex: none;
}

.form-item label {
    display: block;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    margin-bottom: 10px;
}

.block-table-octagon form input:not([type="submit"]):not(.custom-autocomplete__input) {
    border: 1px solid #c3ced7;
    height: 40px;
    background: #ffffff;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    padding: 0 10px;
    width: 100%;
}

.block-table-octagon form select {
    border: 1px solid #c3ced7;
    height: 40px;
    background: #ffffff;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    padding: 0 10px;
    width: 100%;
}

.block-table-octagon form select option {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    text-align: left;
}

.table-octagon_content {
    width: 100%;
    padding-top: 20px;
}

@media (max-width: 991.98px) {
    .table-octagon_content {
        overflow: auto;
    }
}

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

@media (max-width: 991.98px) {
    .table-octagon_header {
        min-width: 815px;
    }
}

.table-octagon_header div {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
}

.table-octagon_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
}

@media (max-width: 991.98px) {
    .table-octagon_item {
        min-width: 815px;
    }
}

.table-octagon_item div {
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
}

.table-octagon_item div span {
    font-family: "ChakraPetchBold", serif;
}

.table-octagon_item .table-octagon_current {
    font-family: "ChakraPetchSemiBold", serif;
    color: #000000;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 107%;
}

.table-octagon_item .table-octagon_current img {
    width: 20px;
    margin-right: 10px;
}

.table-octagon_current {
    width: 19%;
    flex: none;
}

.table-octagon_feep {
    width: 12%;
    flex: none;
}

.table-octagon_fee {
    width: 15%;
    flex: none;
}

.table-octagon_completion {
    width: auto;
    flex: 1;
}

.table-octagon_spend {
    width: 15%;
    flex: none;
}

.table-octagon_btn {
    width: 115px;
    flex: none;
}

.block-payment-confirmation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

@media (max-width: 575.98px) {
    .block-payment-confirmation {
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
    }
}

.payment-confirmation_credited {
    width: 100%;
}

.payment-confirmation_label {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    margin-bottom: 10px;
}

.payment-confirmation_value {
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.payment-confirmation_value span {
    color: #f30909;
}

.block-table-octagon_text p {
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 15px;
}

.block-table-octagon_text ul {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 15px;
}

.block-table-octagon_text li {
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.block-table-octagon_text li:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 8px;
    background: #000000;
    width: 4px;
    height: 4px;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.block-table-octagon_text *:last-child {
    margin-bottom: 0;
}

.block-qr-code {
    height: calc(100% - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .block-qr-code {
        height: auto;
    }
}

.block-qr-code_text {
    text-align: center;
}

.block-qr-code_img {
    width: 205px;
    margin-bottom: 20px;
}

.block-qr-code_val {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    margin-bottom: 8px;
}

.block-qr-code_val-from {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    margin-bottom: 20px;
}

.btn-copy {
    background-color: transparent;
    width: 20px;
    height: 20px;
    border: none;
    background-image: url(../img/copy.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    margin: 0 auto;
}

.block-qr-code_code {
    margin-top: 10px;
    font-family: "ChakraPetchMedium", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    margin-bottom: 10px;
}

.block-qr-code_time {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
}

/*--------------------------------------------------------------
# end buy step 1
--------------------------------------------------------------*/

.main-form-cards {
    background: #ffffff;
    padding: 60px 0 40px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .main-form-cards {
        padding-top: 40px;
    }
}

.main-form-cards_header {
    text-align: center;
    margin-bottom: 30px;
}

.main-form-cards_header.mb40 {
    margin-bottom: 40px;
}

@media (max-width: 575.98px) {
    .main-form-cards_header.mb40 {
        margin-bottom: 30px;
    }
}

.main-form-cards_logo.mb40 {
    margin-bottom: 40px;
}

@media (max-width: 575.98px) {
    .main-form-cards_logo.mb40 {
        margin-bottom: 30px;
    }
}

.main-form-cards_logo {
    width: 70px;
    margin: 0 auto 20px;
    display: inline-block;
}

@media (max-width: 575.98px) {
    .main-form-cards_logo {
        margin-bottom: 30px;
    }
}

.main-form-cards_logo img {
    width: 100%;
    height: auto;
}

.main-form-cards_title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 24px;
    line-height: 31px;
    color: #000000;
    margin-bottom: 20px;
}

@media (max-width: 575.98px) {
    .main-form-cards_title {
        margin-bottom: 10px;
    }
}

.main-form-cards_subtitle {
    font-family: "ChakraPetchRegular", serif;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
}

@media (max-width: 575.98px) {
    .main-form-cards_subtitle {
        font-size: 14px;
        line-height: 18px;
    }

    .main-form-cards_subtitle--dop {
        font-size: 16px;
        line-height: 21px;
    }
}

.main-form-cards_flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 662px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .main-form-cards_flex {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .main-form-cards_flex {
        gap: 30px;
    }
}

.main-form-cards_item {
    border: 1px solid #e8e8e8;
    text-align: center;
    padding: 40px 30px;
    flex: 1;
}

@media (max-width: 767.98px) {
    .main-form-cards_item {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 575.98px) {
    .main-form-cards_item {
        padding: 25px;
    }
}

.main-form-cards_item_icon {
    background: #f3f7fd;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

@media (max-width: 575.98px) {
    .main-form-cards_item_icon {
        margin-bottom: 25px;
    }
}

.main-form-cards_item_icon img {
    width: 30px;
}

.main-form-cards_item_title {
    font-family: "ChakraPetchMedium", serif;
    font-size: 16px;
    line-height: 107%;
    text-align: center;
    color: #303030;
    margin-bottom: 10px;
}

.main-form-cards_item_description {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #777e8a;
    margin-bottom: 20px;
}

@media (max-width: 575.98px) {
    .main-form-cards_item_description {
        margin-bottom: 25px;
    }
}

.main-form-cards_btn {
    display: inline-block;
    cursor: pointer;
}

.main-form-cards_btn:disabled {
    cursor: default;
}

.main-form-cards_description {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    margin-top: 10px;
}

@media (max-width: 575.98px) {
    .main-form-cards_description {
        font-size: 14px;
        line-height: 18px;
    }
}

.main-form-cards_form {
    max-width: 500px;
    margin: 0 auto;
}

.main-form-cards-back {
    position: absolute;
    top: 60px;
    left: 44px;
    z-index: 999;
    font-family: "ChakraPetchMedium", serif;
    background: transparent;
    border: none;
    color: #3f48cc;
    font-size: 14px;
    line-height: 18px;
    padding-left: 22.7px;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .main-form-cards-back {
        display: none;
    }
}

.main-form-cards-back:before {
    content: "";
    width: 9.4px;
    height: 16px;
    position: absolute;
    top: calc(50% - 8px);
    left: 0;
    background-image: url(../img/back-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

.main-form-cards_form select {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #000000;
    height: 40px;
    padding-left: 0;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    -webkit-padding-start: 10px;
    -moz-padding-start: 10px;
}

.main-form-cards_form select::-ms-expand {
    display: none;
}

@media (max-width: 575.98px) {
    .main-form-cards_form select {
        font-size: 14px;
        height: 46px;
        -webkit-padding-start: 15px;
        -moz-padding-start: 15px;
    }
}

.main-form-cards_form .select-form {
    position: relative;
}

.main-form-cards_form .select-form:after {
    content: "";
    position: absolute;
    right: 10px;
    top: calc(50% - 3px);
    width: 10px;
    height: 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/select.svg);
    z-index: 2;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .select-form:after {
        right: 15px;
    }
}

.main-form-cards_form .select-card {
    position: relative;
}

.main-form-cards_form .select-card select,
.main-form-cards_form .select-card select option {
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .select-card select,
    .main-form-cards_form .select-card select option {
        -webkit-padding-start: 45px;
        -moz-padding-start: 45px;
    }
}

.main-form-cards_form .select-card:before {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    top: 8px;
    left: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/card-blue.svg);
    z-index: 2;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .select-card:before {
        top: 10px;
        left: 15px;
    }
}

.main-form-cards_form .select-card-green:before {
    background-image: url(../img/card-green.svg);
}

.main-form-cards_form .mb10 {
    margin-bottom: 10px;
}

.main-form-cards_form .mb15 {
    margin-bottom: 15px;
}

.main-form-cards_form .mb20 {
    margin-bottom: 20px;
}

.main-form-cards_form .mb30 {
    margin-bottom: 30px;
}

.main-form-cards_form .mb33 {
    margin-bottom: 33px;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .mb33 {
        margin-bottom: 30px;
    }
}

.main-form-cards_form .mb40 {
    margin-bottom: 40px;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .mb40 {
        margin-bottom: 30px;
    }
}

.main-form-cards_form input:not([type="submit"]):not(.custom-autocomplete__input) {
    background: #ffffff;
    border: 1px solid #c3ced7;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #000000;
    padding: 0 10px !important;
    height: 40px;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (max-width: 575.98px) {
    .main-form-cards_form input:not([type="submit"]):not(.custom-autocomplete__input) {
        padding: 0 15px;
        font-size: 14px;
        height: 46px;
    }
}

.main-form-cards_form textarea {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #000000;
    padding: 13px 10px;
    height: 90px;
    width: 100%;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (max-width: 575.98px) {
    .main-form-cards_form textarea {
        padding: 15px 15px;
        font-size: 14px;
    }
}

.main-form-cards_form input:not([type="submit"])::placeholder:not(.custom-autocomplete__input),
.main-form-cards_form textarea::placeholder:not(.custom-autocomplete__input) {
    color: #777e8a;
}

.main-form-cards_form label {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    display: block;
}

@media (max-width: 575.98px) {
    .main-form-cards_form label {
        font-size: 14px;
        line-height: 18px;
    }
}

.main-form-cards_form .grey-form {
    background: #fcfcfc;
    width: 100%;
    padding: 20px;
}

.main-form-cards_form .line-form {
    background: #e9e9e9;
    width: 100%;
    height: 1px;
}

.main-form-cards_form .info-form-block {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.main-form-cards_form .info-form {
    max-width: 33%;
    min-width: 30%;
    flex: 1;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .info-form {
        max-width: 50%;
    }

    .main-form-cards_form .info-form:nth-child(1) {
        order: 1;
    }

    .main-form-cards_form .info-form:nth-child(2) {
        order: 7;
    }

    .main-form-cards_form .info-form:nth-child(3) {
        order: 4;
    }

    .main-form-cards_form .info-form:nth-child(4) {
        order: 3;
    }

    .main-form-cards_form .info-form:nth-child(5) {
        order: 9;
    }

    .main-form-cards_form .info-form:nth-child(6) {
        order: 6;
    }

    .main-form-cards_form .info-form:nth-child(7) {
        order: 5;
    }

    .main-form-cards_form .info-form:nth-child(8) {
        order: 2;
    }

    .main-form-cards_form .info-form:nth-child(9) {
        order: 8;
    }
}

.main-form-cards_form .info-form-label {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
    margin-bottom: 10px;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .info-form-label {
        font-size: 14px;
    }
}

.main-form-cards_form .info-form-value {
    font-family: "ChakraPetchMedium", serif;
    font-size: 12px;
    line-height: 107%;
    color: #000000;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .info-form-value {
        font-size: 14px;
    }
}

.main-form-cards_form .label-checkbox {
    position: relative;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .label-checkbox {
        font-size: 14px;
    }
}

.main-form-cards_form .label-checkbox:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #777e8a;
    border-radius: 3px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-form-cards_form .input-checkbox {
    position: absolute;
    z-index: -999;
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

.main-form-cards_form input:checked + .label-checkbox:before {
    background-image: url(../img/check-blue.svg);
    border-color: transparent;
}

.main-form-cards_form input[type="submit"] {
    width: 100%;
}

.main-form-cards_form .btn-long {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.main-form-cards_form .radio-form {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    padding: 15px 0 15px 50px;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .radio-form {
        padding-left: 45px;
    }
}

.main-form-cards_form .radio-input {
    position: absolute;
    z-index: -999;
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

.main-form-cards_form .radio-label {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    display: block;
    margin-bottom: 0;
    position: relative;
}

.main-form-cards_form .radio-label:before {
    content: "";
    border: 1px solid #777e8a;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    top: 8px;
}

.main-form-cards_form .radio-label:after {
    content: "";
    border: 1px solid #777e8a;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    left: -27px;
    top: 11px;
    background: #3f48cc;
    opacity: 0;
}

.main-form-cards_form .radio-label span {
    display: block;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
    margin-top: 5px;
}

.main-form-cards_form .radio-label span.price {
    position: absolute;
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #777e8a;
    right: 20px;
    top: 9px;
    margin: 0;
}

@media (max-width: 575.98px) {
    .main-form-cards_form .radio-label span.price {
        right: 15px;
    }
}

.main-form-cards_form input:checked + .radio-label span.price {
    color: #3f48cc;
}

.main-form-cards_form input:checked + .radio-label:after {
    opacity: 1;
}

.main-form-cards_form input:checked + .radio-label:before {
    border-color: #3f48cc;
}

.main-form-cards_form .iti,
.main-form-cards_form .intl-tel-input {
    width: 100%;
    margin-bottom: 10px;
}

#change-password .invalid-feedback,
.main-form-cards_form .invalid-feedback {
    margin: -6px 0 12px 0;
    display: block;
}

.main-form-cards_form .is-invalid {
    border-color: #fc141c !important;
}

.main-form-cards_form .iti input,
.main-form-cards_form .intl-tel-input input {
    margin-left: 80px !important;
    width: calc(100% - 80px);
}

.iti__flag-container,
.intl-tel-input .flag-container {
    border: 1px solid #f0f0f0;
    width: 70px !important;
}

.intl-tel-input.allow-dropdown .selected-flag {
    width: 100% !important;
}

.country-select {
    width: 100%;
    margin-bottom: 10px;
}

.country-select.inside input,
.country-select.inside input[type="text"] {
    padding-left: 51px !important;
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.country-select.inside .flag-dropdown {
    width: 100%;
    z-index: 2;
}

.country-select.inside .flag-dropdown:before {
    content: "";
    position: absolute;
    right: 10px;
    top: calc(50% - 3px);
    width: 10px;
    height: 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/select.svg);
}

@media (max-width: 575.98px) {
    .country-select.inside .flag-dropdown:before {
        right: 15px;
    }
}

.country-select.inside .selected-flag {
    width: 100%;
    padding-left: 10px;
}

.country-select.inside .flag-dropdown:hover .selected-flag {
    background-color: transparent;
}

.country-select .selected-flag .arrow {
    display: none !important;
}

.main-form-cards_step {
    display: flex;
    justify-content: space-between;
    max-width: 500px;
    margin: 40px auto;
}

@media (max-width: 575.98px) {
    .main-form-cards_step {
        max-width: 346px;
        margin: 30px auto;
    }
}

.main-form-cards_one-step {
    text-align: center;
    position: relative;
    line-height: 1;
}

.main-form-cards_one-step:nth-child(2) {
    margin-left: 12px;
}

@media (max-width: 575.98px) {
    .main-form-cards_one-step {
        max-width: 64px;
    }

    .main-form-cards_one-step:nth-child(2) {
        margin-left: 0;
    }
}

.main-form-cards_one-step:after {
    content: "";
    width: 159px;
    height: 1px;
    position: absolute;
    top: 9.5px;
    left: calc(50% + 20px);
    background: #f2f2f2;
}

.main-form-cards_one-step:first-child:after {
    width: 162px;
}

@media (max-width: 575.98px) {
    .main-form-cards_one-step:after,
    .main-form-cards_one-step:first-child:after {
        width: 101px;
    }
}

.main-form-cards_one-step:last-child:after {
    display: none;
}

.main-form-cards_one-step_number {
    font-family: "ChakraPetchRegular", serif;
    font-size: 11px;
    line-height: 14px;
    color: #68e063;
    width: 20px;
    height: 20px;
    border: 2px solid #68e063;
    background: #ffffff;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-form-cards_one-step_title {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
}

.main-form-cards_one-step--done .main-form-cards_one-step_number {
    border-color: #3f48cc;
    background: #3f48cc;
    color: #ffffff;
}

.main-form-cards_one-step--done .main-form-cards_one-step_title {
    color: #3f48cc;
    font-family: "ChakraPetchSemiBold", serif;
}

.main-form-cards_one-step--done:after {
    background: #3f48cc;
}

.main-form-cards .information-block {
    width: 100%;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
    background: #f3f7fd;
    padding: 13px 10px;
    min-height: 40px;
    display: flex;
    align-items: end;
}

.main-form-cards .information-block img {
    width: 16px;
    margin-right: 10px;
    flex: none;
}

@media (max-width: 575.98px) {
    .main-form-cards .information-block {
        font-size: 14px;
        line-height: 18px;
        align-items: flex-start;
    }
}

.range-form {
    padding: 18px 10px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    position: relative;
    z-index: 1;
}

@media (max-width: 575.98px) {
    .range-form {
        padding: 15px 15px 20px;
    }
}

.range-form label {
    margin-bottom: 6px;
    font-family: "ChakraPetchRegular", serif;
}

@media (max-width: 575.98px) {
    .range-form label {
        margin-bottom: 7px;
    }
}

.range-form:before {
    z-index: -1;
    content: "";
    position: absolute;
    bottom: 24px;
    left: 10px;
    width: calc(100% - 20px);
    height: 6px;
    background: #f3f7fd;
}

@media (max-width: 575.98px) {
    .range-form:before {
        left: 15px;
        width: calc(100% - 30px);
        bottom: 26px;
    }
}

.range-procent {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .range-procent {
        top: 8px;
        right: 15px;
    }
}

.range-procent span {
    background: #f3f7fd;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "ChakraPetchRegular", serif;
    font-size: 14px;
    line-height: 107%;
    color: #777e8a;
}

.range-procent .range-procent-val {
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #f0f0f0;
}

.range-form input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    height: auto;
    padding: 0;
    margin-top: 0;
    background: linear-gradient(to right, #3f48cc 0%, #3f48cc 25%, transparent 25%, transparent 100%);
}

.range-form input[type="range"]::-webkit-slider-runnable-track {
    border-radius: 0;
    height: 6px;
    border: none !important;
    background: transparent;
}

.range-form input[type="range"]::-moz-range-track {
    border-radius: 0;
    height: 6px;
    border: none !important;
    background: transparent;
}

.range-form input[type="range"]::-webkit-slider-thumb {
    background: #3f48cc;
    border: 1px solid #3f48cc;
    border-radius: 50%;
    cursor: pointer;
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    margin-top: -5px;
}

.range-form input[type="range"]::-moz-range-thumb {
    background: #3f48cc;
    border: 1px solid #3f48cc;
    border-radius: 50%;
    cursor: pointer;
}

.range-form input[type="range"]::-ms-fill-lower {
    background: #3f48cc;
}

.range-form input[type="range"]::-ms-fill-upper {
    height: 10px;
    background: red;
    border: 0;
    margin-top: 0;
}

.field-form {
    width: 100%;
    position: relative;
    text-align: center;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    padding: 20px;
}

.field-file {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.field-image {
    width: 30px;
    height: auto;
    margin: 0 auto 15px;
}

.field-fake {
    font-family: "ChakraPetchRegular", serif;
    font-size: 16px;
    line-height: 107%;
    color: #000000;
    margin-bottom: 10px;
}

.field-fake span {
    color: #3f48cc;
}

.field-format {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 107%;
    color: #777e8a;
}

.field-button {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    border-radius: 0;
    border: none;
    cursor: pointer;
}

.percon-block {
    background: #ffffff;
    border: 1px solid #f0f0f0;
}

.percon-block-body {
    padding: 10px 20px 20px;
}

.percon-block .percon-block-brn-send {
    margin-left: 0;
}

.percon-block-brn-add {
    background: transparent;
    border: none;
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 16px;
    color: #3f48cc;
    cursor: pointer;
    display: block;
}

@media (max-width: 575.98px) {
    .percon-block-brn-add {
        font-size: 14px;
        line-height: 18px;
    }
}

.percon-block-header {
    padding: 20px 20px 10px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.percon-block-status {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    background: #f0f0f0;
    padding: 5px;
    display: inline-block;
}

.percon-block-title {
    font-family: "ChakraPetchSemiBold", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    display: flex;
    align-items: center;
}

.percon-block-title .info {
    width: 16px;
    height: 16px;
    flex: none;
    display: inline-block;
    margin-right: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/info.svg);
}

.percon-block-btn {
    display: flex;
    align-items: center;
    top: 24px;
    right: 20px;
    position: absolute;
    gap: 20px;
}

.percon-block-btn-close {
    width: 10px;
    height: 10px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    background-image: url(../img/arrow-down.svg);
}

.percon-block-btn-more {
    width: 15px;
    height: 3px;
    display: block;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/dot3.svg);
    position: relative;
}

.percon-block-hover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background: #ffffff;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
    z-index: 999;
    padding: 10px;
    width: 152px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: 0.3s all;
}

.percon-block-btn-more:hover .percon-block-hover {
    opacity: 1;
    height: auto;
    transition: 0.3s all;
}

.percon-block-hover-label {
    font-family: "ChakraPetchRegular", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.percon-block-hover .line {
    width: 100%;
    height: 1px;
    background: #ebebeb;
    margin: 10px 0;
}

.change-number {
    width: 16px;
    height: 16px;
    border: none;
    background-image: url(../img/pencilg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.person-number {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 16px;
    color: #777e8a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.person-number-send {
    font-family: "ChakraPetchRegular", serif;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

@media (max-width: 575.98px) {
    .person-number-send {
        font-size: 14px;
        line-height: 18px;
    }
}

#change-name {
    text-align: left;
}

.table-orders_cards-item .table-orders_cards-filter_status.card-status-closed {
    color: red;
}

.table-orders_cards-item .table-orders_cards-filter_status.card-status-blocked {
    color: #3f48cc;
}