@font-face {
  font-family: "Unbounded";
  src: url("/wp-content/themes/keine_exchange_2024/fonts/Unbounded-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("/wp-content/themes/keine_exchange_2024/fonts/Mulish-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

.container_form h3{
    font-family: "Unbounded";
}

.container_form h2{
    font-family: "Unbounded";
}

.container_form p{
    font-family: "Unbounded";
}

.container_form span{
    font-family: "Unbounded";
}

.container_form label{
    font-family: "Unbounded";
}

.container_form input{
    font-family: "Mulish";
}

.container_form select{
    font-family: "Mulish";
}

.container_form .custom-arrow img{
    width: 15px;
    height: 20px;
    object-fit: contain;
}

.container_form{
    background: #ffff;
}

.container_form h3{
    margin-bottom: 10px;
}

body.light .container_form .custom-arrow img{
    width: 15px;
    height: 20px;
    object-fit: contain;
}

body.light .container_form{
    background: #ffff;
}

body.light .dark_icon{
    display: none !important;
}

body.dark .light_icon{
    display: none !important;
}

body.light .container_form.mobile .left-section{
    border: 1px solid #302759;
}

body.light .container_form .cta-button{
    border: 2px solid #302759;
}

body.light .container_form h3{
    color: #302759 !important;
}

body.light .container_form h2{
    color: #302759 !important;
    font-size: 20px;
}

body.light .container_form p{
    color: #302759 !important;
}

body.light .container_form span{
    color: #302759 !important;
}

body.light .container_form label{
    color: #302759 !important;
    font-size: 14px;
}

body.dark .container_form h3{
    color: #ffff !important;
}

body.dark .container_form h2{
    color: #ffff !important;
}

body.dark .container_form .right-section h2{
    color: #1F1F1F !important;
    font-size: 20px;
}

body.dark .container_form .right-section h3{
    color: #1F1F1F !important;
}

body.dark .container_form .right-section p{
    color: #1F1F1F !important;
}

body.dark .container_form .right-section span{
    color: #1F1F1F !important;
    font-size: 14px;
}

body.dark .container_form .right-section label{
    color: #1F1F1F !important;
}

body.dark .container_form p{
    color: #ffff !important;
}

body.dark .container_form span{
    color: #ffff !important;
}

body.dark .container_form label{
    color: #ffff;
}

body.dark .container_form .cta-button{
    color: #1e2746 !important;
}

body.light .container_form .exchange-form{
    background: #F9F7FE;
    box-shadow: 0px 0px 16px 10px #00000017;
    border: 1px solid #F9F7FE !important;
}

body.light .exchange-form select{
    background: #F9F7FE;
    border: 1px solid #302759;
    color: #302759;
}

body.light .container_form input, select{
    background: #F9F7FE;
    border: 1px solid #302759;
    color: #302759;
}

body.light .container_form .cta-box-text{
    background: #fff;
}

body.light .container_form .cta-button{
    background: #302759 !important;
    color: #fff !important;
}

body.light .container_form.mobile .currency-input input{
    background: #F9F7FE;
    border: 1px solid #302759;
    color: #302759;
}

.container_form input, select{
    font-family: "Mulish";
}

.container_form input:focus{
    outline: none;
}

.container_form p{
    color: #ffffff94;
}

.container_form .mbi{
    margin-bottom: 25px;
}

.container_form .mbi_two{
    margin-bottom: 15px;
}

.container_form .mbl{
    margin-bottom: 10px;
}

.container_form .checkboxes label{
    font-family: "Mulish";
}

.container_form .swap-button{
    display: flex;
    justify-content: center;
}

.container_form .email-input.mbi{
    margin-bottom: 35px;
}

.container_form {
    background-color: #302759;
    display: flex;
    justify-content: center;
}

.container_form .container_form_div{
    color: white;
    margin: 0;
    padding: 50px 0px;
    display: flex;
    justify-content: center;
    max-width: 1328px;
    gap: 15px;
}

.container_form.mobile{
    display: none;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    font-family: Arial, sans-serif;
    background-color: #1e2746;
    color: white;
    margin: 0;
    padding: 50px 0px;
}

/* левая секция */

.container_form.mobile .left-section{
    width: 95%;
    border: 1px solid #fff;
    border-radius: 20px;
}

.container_form .left-section {
    width: 40%;
}

.container_form.mobile .cta-box-text{
    border-radius: 20px 20px 00px 0px;
}

.container_form.mobile .cta-button{
    border-radius: 0px;
    text-align: center;
    display: block;
}

.container_form .benefit {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.container_form.mobile .left-section h2{
    text-align: center;
    margin: 20px;
}

.container_form.mobile .benefit{
    display: block;
    text-align: center;
}

.container_form .benefit p{
    font-family: "Mulish";
}

.container_form .benefit.mb{
    margin-bottom: 20px;
}

.container_form .icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.container_form .cta-box-text{
    background-color: #2d375b;
    padding: 20px;
    border-radius: 20px 20px 20px 0px;
}

.container_form .cta-box-text p span{
    font-weight: 600;
    color: #ffff;
}

.container_form .cta-button {
    display: inline-block;
    background-color: #fff;
    color: #2d375b;
    border: 2px solid #fff;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 0px 0px 20px 0px;
    transition: all 0.3s ease;
}

.container_form.mobile .right-section{
    width: 95%;
}

.right-section {
    width: 55%;
}

.container_form .exchange-form {
    padding: 40px 35px;
    border-radius: 20px;
    background: #F9F7FE;
    box-shadow: 0px 0px 16px 10px #00000017;
    border: 1px solid #F9F7FE !important;
}

.container_form.mobile .exchange-form{
    padding: 15px;
    border: 0px solid #fff;
}

.container_form.mobile .currency-input input{
    padding: 20px 24px;
    border-radius: 20px;
    width: 86%;
    background: #F9F7FE;
    border: 1px solid #302759;
    color: #302759;
}

.container_form.mobile .exchange-form .select_js_title{
    height: 60px !important;
}

.container_form .currency-input input {
    flex-grow: 1;
    padding: 14px 24px;
    border-radius: 20px;
    width: 85%;
    background: #F9F7FE;
    border: 1px solid #302759;
    color: #1F1F1F !important;
    font-family: "Mulish";
}

.currency-input-div{
    position: relative;
}

.container_form.mobile .currency-input-div .currency-input-select{
    position: absolute;
    width: 50%;
    top: 0;
    right: -5px;
}

.container_form .currency-input-div .currency-input-select{
    position: absolute;
    width: 30%;
    top: 0;
    right: -16px;
}

.container_form.mobile .email-input input{
    width: 86%;
}

.container_form.mobile .currency-input-div .currency-input-select select{
    padding: 20px 24px;
}

.container_form .currency-input-div .currency-input-select select{
    padding: 16px 24px;
}

.currency-input-select{
    position: relative;
    width: 30%;
}

.currency-input select{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.currency-input-select.city{
    position: relative;
    width: auto;
}

.container_form.mobile .currency-input-select.city select{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 44px 10px 24px;
}

.container_form .currency-input-select.city select{
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 44px 10px 24px;
}

.custom-arrow {
  position: absolute;
  right: 10px;
  top: 55%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 20px;
  color: #888;
}

.exchange-form select{
    padding: 10px 24px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: #4B426E;
    color: #fff;
    font-size: 20px;
}

.swap-button button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.swap-button i {
    font-size: 24px;
    color: #facc15;
}

.email-input label {
    width: 100px;
}

.email-input input {
    flex-grow: 1;
    padding: 14px 24px;
    border-radius: 20px;
    width: 95%;
    background: #F9F7FE;
    border: 1px solid #302759;
    color: #1F1F1F !important;
    font-family: "Mulish";
}

.checkboxes label {
    display: block;
    margin-bottom: 10px;
}

.buttons {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.exchange-button {
    background-color: #CEEF4C;
    color: #312759;
    font-size: 20px;
    border: none;
    padding: 20px 60px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.exchange-button:hover{
    background-color: #B6D248;
}

.advanced-options {
    background: #C4B9FA;
    border-radius: 20px;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.advanced-options:hover{
    background: #ACA2DF;
}

.advanced-options i {
    font-size: 24px;
    color: #facc15;
}


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

.right-section label{
    display: block;
}

.checkboxes{
    color: #C4B9FA82;
    display: flex;
    justify-content: center;
}

.checkboxes input{
    background: #1e2746;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox{
    cursor: pointer;
}

/* Создаем стиль для кастомного чекбокса */
.container_form .checkmark {
    height: 20px;
    width: 20px;
    background-color: #0000;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    margin-right: 10px;
    vertical-align: middle;
    border: 1px solid #C4B9FA82;
}

/* Меняем цвет при наведении */
.container_form .custom-checkbox:hover .checkmark {
  background-color: #cccccc00;
}

/* Стиль галочки */
.container_form .checked .checkmark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid rgb(46, 175, 57);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Цвет чекбокса при активном состоянии */
.container_form .checked .checkmark {
  background-color: #00000000;
}

.container_form.mobile select{
    font-size: 14px;
}

.container_form.mobile .title_form h2{
    font-size: 14px;
}

.container_form.mobile label{
    font-size: 12px;
}

.container_form.mobile input{
    font-size: 14px;
}

.container_form.mobile .currency-input-select.city{
    width: 50%;
}

.container_form.mobile .title_form{
    flex-wrap: nowrap;
}

.container_form.mobile .right-section{
    margin-bottom: 50px;
}

.currency-input-div .select_js{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 62px !important;
    width: 250px;
}

.exchange-form .js_sum1_error{
    margin-top: 0px !important;
    float: left !important;
}

.exchange-form .js_sum2_error{
    margin-top: 0px !important;
    float: left !important;
}

.exchange-form .select_js_title{
    height: 50px !important;
    border: 1px solid #302759 !important;
    background: #F9F7FE !important;
    border-radius: 20px;
}

body.dark .exchange-form .select_js_title{
    height: 50px !important;
    border: 1px solid #302759 !important;
    background: #F9F7FE !important;
    border-radius: 20px;
}

body.dark .exchange-form  .select_txt{
    color: #1F1F1F !important;
    font-family: "Mulish";
}

.exchange-form .block-title{
    display: none;
}

.exchange-form .email-input .xchange_pers_div_ins{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
}

.exchange-form .email-input:not(:has(.xchange_pers_line ~ .xchange_pers_line)) .xchange_pers_line {
  order: initial;
  width: 100%;
}

.exchange-form .email-input:has(.xchange_pers_line ~ .xchange_pers_line) .xchange_pers_line:nth-of-type(1) {
  order: 2;
  width: 45%;
}
.exchange-form .email-input .xchange_pers_line:nth-child(2) {
  width: 55%;
}

.exchange-form .email-input .info_window{
    display: none;
}

.exchange-form .buttons .xchange_submit_div .xchange_submit{
    padding: 15px 60px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 0px;
}

body.light .exchange-form .buttons .xchange_submit_div .xchange_submit{
    background-color: #CEEF4C;
    border: 1px solid #CEEF4C !important;
}

.exchange-form .xchange_checkdata_div .none_int{
    display: none;
}

.container_form .mobile_dark_icon{
    display: none;
}

@media (max-width:768px) {
    .container_form .left-section{
        order: 2;
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
        border: 1px solid #fff;
        border-radius: 20px;
    }

    .container_form .left-section .left-section-content-text{
        order: 2;
        text-align: center;
    }

    .container_form .left-section .left-section-content-text h2{
        font-size: 16px;
    }

    .container_form .benefit h3{
        font-size: 16px;
    }

    .right-section{
        width: 100%;
    }

    .container_form .container_form_div{
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
        padding: 20px 0px;
    }

    .currency-input-div .select_js{
        width: 185px;
        font-size: 12px;
    }

    .container_form .grid-layout .b-btn--primary{
        margin-top: 0px !important;
    }

    .container_form .benefit{
        margin-bottom: 0px;
        margin-top: 45px;
        display: block;
    }

    .container_form .cta-button{
        border-radius: 0px;
        text-align: center;
        font-size: 10px;
        width: 100%;
    }

    .exchange-form .buttons .xchange_submit_div .xchange_submit{
        margin-top: 0px !important;
    }

    .container_form .right-section span{
        font-size: 9px;
    }

    body.dark .container_form .exchange-form{
        background: #302759 !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.dark .container_form .right-section h2{
        color: #ffff !important;
        font-size: 16px;
    }

    body.dark .container_form .right-section label{
        color: #ffff !important;
    }

    body.dark .container_form .right-section span{
        color: #ffff !important;
        font-size: 10px;
    }

    body.dark .container_form .currency-input input{
        background: #302759 !important;
        border: 1px solid #fff !important;
        color: #fff !important;
    }

    body.dark .exchange-form .select_js_title{
        border: 1px solid #fff !important;
        background: #302759 !important;
    }

    body.dark .exchange-form .select_txt{
        color: #ffff !important;
    }

    body.dark .email-input input{
        background: #302759;
        border: 1px solid #fff;
        color: #fff !important;
    }
    
    body.light .container_form .exchange-form{
        background: #fff;
        box-shadow: none;
        border: none;
    }

    body.light .container_form .cta-box-text{
        background: #C4B9FA;
        border-radius: 20px 20px 0px 0px;
    }

    body.light .container_form .left-section{
        border: 1px solid #302759;
    }

    body.dark .container_form .mobile_dark_icon{
        display: block;
    }

    body.dark .container_form .desc_icon{
        display: none;
    }

    body.light .container_form .mobile_dark_icon{
        display: none;
    }

    body.light .container_form .desc_icon{
        display: block;
    }
    body.light .container_form .right-section h2{
        font-size: 16px;
    }
    body.dark .exchange-form .select_js_ul_ins .select_js_ulli{
        background: #302759;
    }

    body.light .exchange-form .select_js_ul_ins .select_js_ulli{
        background: #ffff;
    }

    .exchange-form .select_js .select_js_ul{
        border: 1px solid #fff !important;
    }

    .container_form .icon{
        margin-right: 0px;
    }

    .container_form .cta-box-text p span{
        font-size: 14px;
    }

    body.light .container_form .right-section label{
        font-size: 9px;
    }
    body.dark .container_form .right-section label{
        font-size: 9px;
    }
    
    body.dark .container_form .dop_input input{
        border: 1px solid #fff;
        color: #fff;
    }
    body.dark .container_form .dop_input input, select{
        color: #fff !important;
    }

    body.dark .container_form .right-section p{
        color: #fff !important;
    }
}

.ds-popup .ds-popup-wrapper{
    border: none !important;
}

.ds-popup .ds-popup-wrapper .ds-button{
    background-color: #CEEF4C !important;
    color: #1F1F1E !important;
    box-shadow: 0 0 20px 0 rgba(206,239,76,0.5) !important;
    border-radius: 10px !important;
}

body.dark .container_form h2{
    font-size: 20px;
}

body.dark .container_form label{
    font-size: 14px;
}

body.light .exchange-form .select_txt{
    font-family: "Mulish";
}

.exchange-form  .select_js_ul{
    top:0px;
    border: 1px solid #302759 !important;
}

.exchange-form .color_b .select_js_ulli:hover, .exchange-form .color_b .select_js_ulli.active{
    height: 48px;
}

body.dark .exchange-form .select_js_ulli{
    background: #F9F7FE;
}

body.light .exchange-form .select_js_ulli{
    background: #F9F7FE;
}

.exchange-form .select_js_ul::-webkit-scrollbar {
  width: 6px;
}

.exchange-form .select_js_ul::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 10px;
}

.exchange-form .select_js_ul::-webkit-scrollbar-track {
  background-color: #F9F7FE;
  border-radius: 10px;
}

.container_form .dop_input input, select{
    border-radius: 20px;
    padding: 14px 24px;
    border: 1px solid #302759;
    color: #1F1F1F;
}

body.dark .container_form .dop_input input, select{
    color: #1F1F1F;
}

.container_form .dop_input input:focus{
    border: 1px solid #302759;
}

.container_form .grid-layout .b-btn--primary{
    margin-top: 0px !important;
}

.container_form .swap-button span{
    cursor: pointer;
}

.container_form .dop_input{
    margin-bottom: 25px;
}

.container_form .xchange_curs_input input{
    width:100%;
}