.openModalButton {
    display: inline-flex;
    width: 314px;
    height: 52px;
    padding: 12px 24px 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 30px;
    background: #7C5CFC;
    color: #FFF;
    text-align: center;
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
    margin-top: 15px;
}
/*modal style*/
.modal {
    position: fixed;
    z-index: -50;
    opacity: 0;
    display: block!important;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 250px;
    max-width: 450px;
    max-height: 450px;
    background: #FFFFFF;
    padding: 45px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 10px;
}

.modal_bloor {
    position: fixed;
    z-index: -51;
    opacity: 0;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100vh;
}

.modal_bloor:hover {
    cursor: pointer;
}

.modal .title {
    color: #352E70;
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
    letter-spacing: -0.24px;
    margin-bottom: 20px;
}

.modal_desc {
    color: var(--black);
    text-align: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.19px;
    max-width: 340px;
    margin: 14px auto 0;
}

.modal .form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 24px;
    /* Hover/active */
    /* Disabled */
}

.modal .form input[type=tel],
.modal .form input[type=iin],
.modal .form input[type=number],
.modal .form input[type=text],
.modal .form input[type=email],
.modal .form input[type=file] {
    width: 100%;
    padding: 18px 24.5px 16px 24.5px;
    margin-bottom: 10px;
    border-radius: 30px;
    background: #F1F5FE;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #352E70;
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
    border: .5px solid transparent;
}

.modal .form input[type=tel]:focus,
.modal .form input[type=iin]:focus,
.modal .form input[type=number]:focus,
.modal .form input[type=text]:focus,
.modal .form input[type=email]:focus,
.modal .form input[type=file]:focus {
    border: .5px solid #5c587c;
}

.modal .form input[type=tel]::-webkit-input-placeholder, .modal .form input[type=iin]::-webkit-input-placeholder, .modal .form input[type=number]::-webkit-input-placeholder, .modal .form input[type=text]::-webkit-input-placeholder, .modal .form input[type=email]::-webkit-input-placeholder, .modal .form input[type=file]::-webkit-input-placeholder {
    color: #757575;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal .form input[type=tel]::-moz-placeholder, .modal .form input[type=iin]::-moz-placeholder, .modal .form input[type=number]::-moz-placeholder, .modal .form input[type=text]::-moz-placeholder, .modal .form input[type=email]::-moz-placeholder, .modal .form input[type=file]::-moz-placeholder {
    color: #757575;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal .form input[type=tel]:-ms-input-placeholder, .modal .form input[type=iin]:-ms-input-placeholder, .modal .form input[type=number]:-ms-input-placeholder, .modal .form input[type=text]:-ms-input-placeholder, .modal .form input[type=email]:-ms-input-placeholder, .modal .form input[type=file]:-ms-input-placeholder {
    color: #757575;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal .form input[type=tel]::-ms-input-placeholder, .modal .form input[type=iin]::-ms-input-placeholder, .modal .form input[type=number]::-ms-input-placeholder, .modal .form input[type=text]::-ms-input-placeholder, .modal .form input[type=email]::-ms-input-placeholder, .modal .form input[type=file]::-ms-input-placeholder {
    color: #757575;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal .form input[type=tel]::placeholder,
.modal .form input[type=iin]::placeholder,
.modal .form input[type=number]::placeholder,
.modal .form input[type=text]::placeholder,
.modal .form input[type=email]::placeholder,
.modal .form input[type=file]::placeholder {
    color: #757575;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal .form .input-file {
    position: relative;
    display: inline-block;
}

.modal .form .input-file-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    vertical-align: middle;
    color: #757575;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    background-color: #F9F9F9;
    border: 0.5px solid #B6B6B6;
    line-height: 22px;
    padding: 14px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.modal .form .input-file-text {
    padding: 0 10px;
    line-height: 40px;
    display: inline-block;
}

.modal .form .input-file input[type=file] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    display: block;
    width: 0;
    height: 0;
    outline: none;
}

.modal .form .input-file:hover .input-file-btn {
    background: #757575;
    color: #F9F9F9;
}

.modal .form .input-file:active .input-file-btn {
    opacity: 0.8;
}

.modal .form .input-file input[type=file]:disabled + .input-file-btn {
    background-color: #eee;
}

.modal .form input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: #352E70;
}

.modal .form input[type=checkbox]:hover {
    cursor: pointer;
}

.modal .form button {
    color: #FFF;
    text-align: center;
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
    height: 61px;
    margin-top: 30px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: none;
    border-radius: 30px;
    background: #7C5CFC;
}

.modal .form button:hover {
    background: #7451fd;
}

.modal_close {
    position: absolute;
    top: 20px;
    right: 20px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    width: 23px;
    height: 23px;
}

.modal_close:hover {
    rotate: 180deg;
    cursor: pointer;
}

.modal_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
}

.modal_row .desc {
    width: 389px;
    margin-left: 10px;
}

.modal_row .desc b {
    color: var(--col-1);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

@-webkit-keyframes load {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes load {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

.modal.signatureModal.show {
    opacity: 1;
    background: transparent;
    max-width: unset;
    transform: unset;
    max-height: unset;
}

.modal.modalPreview.show {
    opacity: 1;
    background: transparent;
    max-width: unset;
    transform: unset;
    max-height: unset;
}

.modal.fade.show {
    opacity: 1;
    background: transparent;
    max-width: unset;
    transform: unset;
    max-height: unset;
}