.how-it-works {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
}
/* .how-it-works.colored_bg{
    background-color: #FBF9FF;
}   */

@media (min-width:905px) {
    .how-it-works {
        padding-top: 5rem;
        padding-bottom: 8rem;
    }
}

.modal-position {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;
}

.modal-content{
    height: 100%;
    border: none;
    border-radius: 0;
}

.modal-body{
    padding: 1.25rem;
}

.modal-header .btn-close{
    margin: unset !important;
}

.col-spacer {
    padding-inline-end: 4rem;
}

.step {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-block: 10px;
}

.step .step-sizer {
    width: 39px !important;
    height: 47px !important;
    flex-shrink: 0;
}
.how-it-works .b3 {
    color: #1F0A54;
}

@media (min-width:905px) {
    .step .step-sizer {
        width: 49px !important;
        height: 59px !important;
    }

    .col-spacer {
        padding-inline-end: 5.5rem;
    }
}

.loader {
    display: none;
}

.form-check-label {
    cursor: pointer;
}

.requires-validation>div{
    margin-bottom: 1.5rem;
}

.was-validated>div{
    margin-bottom: 0.75rem !important;
}

.tel-code{
    width: 32% !important;
}

/* body:not(.rtl) .country-code-btn{
    background-position: right 0.25rem center !important;
} */
@media(max-width: 800px){

    body:not(.rtl) .country-code-btn{
        background-position: right 0.25rem center !important;
    }
    }
    


.country-code-btn a{
    margin-left: -9px !important;
}

.tel-num{
    width: 65% !important;
}

.requires-validation .submit_wrapper{
    margin-bottom: 0;
}

.country-code-dropdown .country-code-btn{
    background-color: #FFF !important;
    color: #494949;
    font-size: 1rem;
    }
    
    .dropdown-menu{
      max-height: 300px;
        overflow: scroll; 
    }
    html[dir="rtl"] .text-right-ar[dir='ltr'] {
        text-align: revert;
    }
    
    
    html[dir="rtl"] .country-code-btn .select-list-link{
        margin-left: 0px!important;

    } 

    @media(min-width: 750px){
        .tel-code{
            width: 25% !important;
        }
        
        .tel-num{
            width: 72% !important;
        }
    }
    @media(min-width: 769px){
        .tel-code{
            width: 32% !important;
        }
        
        .tel-num{
            width: 65% !important;
        }
    }
    @media(max-width: 800px){
        .tel-code{
            width: 35% !important;
        }
        
        .tel-num{
            width: 63% !important;
        }
    }
    @media(max-width: 350px){
        .tel-code{
            width: 40% !important;
        }
        
        .tel-num{
            width: 59% !important;
        }
    }
    @media(max-width: 300px){
        .tel-code{
            width: 44% !important;
        }
        
        .tel-num{
            width: 55% !important;
        }
    }

    .country-code-dropdown .country-code-arrow{
        display: block;
        width: 100%;
        padding: 0.375rem 2.25rem 0.375rem 0.75rem;
        -moz-padding-start: calc(0.75rem - 3px);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        appearance: none;
        }
      
        html[dir="rtl"] .country-code-btn[dir='ltr'] {
          background-position: left 0.75rem center !important;
        }