:root{
    --authMainColor: #111727;
    --authSecondColor: #1f2a31;
    --height-input: 48px;
}
body{
    overflow-x: hidden;
    direction: rtl;
    padding: 0;
    background: #f7f7f7 !important;
    line-height: 24px;
    text-align: right;
    color: #4B5259 !important;
}
.modal_div_active{
    transition: all .3s !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.form-item{
    width: 100%;
}

.modal_div{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background: #4b4b4b99;
    justify-content: center;
    align-items: center;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
}
.modal_div_main{
    border-radius: 8px;
    background: #fff;
    display: flex;
    padding: 0;
    flex-direction: column;
    width: 400px;
    height: 560px;
    min-width: 250px;
    min-height: 100px;
    top: 50%;
    left: 50%;
    /*! position: fixed; */
    /*! transform: translate(-50%,-50%); */
}
.parent-modal-login{
    margin: 40px 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 480px;
    background: #fff;
    overflow: hidden;
    gap: 20px;
    border: 1px solid #ccc;
    border-radius: 8px !important;
}
.parent-confirmation h2{
    font-size: 18px;
    color: #555;
}
.remove{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.remove svg{
    width: 24px;
    height: 24px;
    fill: #808080;
    transition: all ease .3s;
}
.parent-modal .logo-login{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    /*! margin: 0 0 50px; */
    flex-direction: column;
}
.logo-login img{
    width: 120px;
}
.logo-login h4{
    margin-bottom: 0;
    font-size: 16px;
    /*! display: none; */
    color: #555;
}
.parent-login{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.parent-login h2{
    font-size: 22px;
    margin-bottom: 0;
    color: #222;
}
.parent-login p{
    margin-bottom: 0;
    font-size: 14px;
    color: #777;
}
.parent-modal form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.input-mobile{
    width: 100%;
    height: var(--height-input);
    color: #333;
    background: #f0f3f7;
    border-radius: 8px;
    line-height: 32px;
    font-size: 16px;
    padding: 0 12px;
    caret-color: #999;
    border: 1px solid transparent;
}
.input-mobile:focus{
    border-color: #777;
    box-shadow: none;
    outline: none;
}
.btn-form{
    background: var(--authMainColor);
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all ease .3s;
    height: var(--height-input);
    width: 100%;
    text-align: center;
    cursor: default;
    cursor: not-allowed;
    opacity: .525;
    margin-top: 10px;
}
.parent-rules{
    margin-top: 30px;
    padding: 0 8px;
    font-size: 14px;
    color: #565656;
    text-align: center;
}
.rules{
    color: #3662d8;
    cursor: pointer;
    transition: all ease .3s;
}
.rules:hover{
    color: #003f75;
    text-decoration: none;
}
.modal-login{
    display: flex;
    align-items: center;
    justify-content: center;
    /*! width: 100%; */
    /*! height: 100%; */
}
.arrow-right{
    /*! display: none; */
}
.icon-xmark{
    margin-right: auto;
}
.form1{
    /*! display: none; */
}
.form2{
    display: none;
}
.form2 h2{
    font-size: 22px;
    color: #222;
    width: 100%;
    text-align: right;
    margin: 20px 0 15px;
    display: none;
}
.form2 form{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}
.form2 form input{
    width: 100%;
    height: var(--height-input);
    color: #333;
    background: #f0f3f7;
    border-radius: 8px;
    line-height: 32px;
    font-size: 14px;
    padding: 0 12px;
    caret-color: #999;
    border: 1px solid transparent;
}
.form2 form input:focus{
    border-color: #777;
}
.data-supplementary{
    font-size: 14px;
    color: #777;
}
.number-mobile-data-supplementary{
    font-size: 16px;
    color: #222;
}
.btn-form2 {
    background: var(--mainColor);
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all ease .3s;
    height: var(--height-input);
    width: 100%;
    text-align: center;
    /*cursor: not-allowed;*/
    margin-top: 10px;
}
.gds-login-register-inner form > div {
    direction: rtl;
    display: block !important;
}
.login-captcha span {
    background: #f3f3f3;
    display: flex;
    padding: 5px;
    align-items: center;
    border-radius: 8px !important;
    height: var(--height-input);
}
.login-captcha.gds-l-r-error input {
    min-width: 100px !important;
    width: 200px;
    background: #f3f3f3;
    outline: none;
    border-radius: 4px;
    font-size: 16px;
    direction: ltr;
    color: #333;
    transition: all linear 0.3s;
    text-align: right;
    height: 38px;
}
.login-captcha #captchaRefresh {
    margin-top: 0px !important;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5MS4yMzYgNDkxLjIzNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkxLjIzNiA0OTEuMjM2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNTUuODksMjYyLjgxOGMtMy0yNi0wLjUtNTEuMSw2LjMtNzQuM2MyMi42LTc3LjEsOTMuNS0xMzMuOCwxNzcuNi0xMzQuOHYtNTAuNGMwLTIuOCwzLjUtNC4zLDUuOC0yLjZsMTAzLjcsNzYuMiAgICBjMS43LDEuMywxLjcsMy45LDAsNS4xbC0xMDMuNiw3Ni4yYy0yLjQsMS43LTUuOCwwLjItNS44LTIuNnYtNTAuM2MtNTUuMywwLjktMTAyLjUsMzUtMTIyLjgsODMuMmMtNy43LDE4LjItMTEuNiwzOC4zLTEwLjUsNTkuNCAgICBjMS41LDI5LDEyLjQsNTUuNywyOS42LDc3LjNjOS4yLDExLjUsNywyOC4zLTQuOSwzN2MtMTEuMyw4LjMtMjcuMSw2LTM1LjgtNUM3NC4xOSwzMzAuNjE4LDU5Ljk5LDI5OC4yMTgsNTUuODksMjYyLjgxOHogICAgIE0zNTUuMjksMTY2LjAxOGMxNy4zLDIxLjUsMjguMiw0OC4zLDI5LjYsNzcuM2MxLjEsMjEuMi0yLjksNDEuMy0xMC41LDU5LjRjLTIwLjMsNDguMi02Ny41LDgyLjQtMTIyLjgsODMuMnYtNTAuMyAgICBjMC0yLjgtMy41LTQuMy01LjgtMi42bC0xMDMuNyw3Ni4yYy0xLjcsMS4zLTEuNywzLjksMCw1LjFsMTAzLjYsNzYuMmMyLjQsMS43LDUuOCwwLjIsNS44LTIuNnYtNTAuNCAgICBjODQuMS0wLjksMTU1LjEtNTcuNiwxNzcuNi0xMzQuOGM2LjgtMjMuMiw5LjItNDguMyw2LjMtNzQuM2MtNC0zNS40LTE4LjItNjcuOC0zOS41LTk0LjRjLTguOC0xMS0yNC41LTEzLjMtMzUuOC01ICAgIEMzNDguMjksMTM3LjcxOCwzNDYuMDksMTU0LjUxOCwzNTUuMjksMTY2LjAxOHoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    opacity: 0.5;
    background-size: contain !important;
    width: 18px;
    order: 3;
    margin: 0 5px;
    cursor: pointer;
}
#captchaRefresh{
    width: 30px !important;
    height: 30px !important;
    background: url(../images/refresh.png) no-repeat center center;
    margin: 8px 0px 0;
}
.login-captcha span img {
    max-height: 38px;
    width: 115px;
    border-radius: 8px;
    order: 2;
}
.login-captcha{
    border-radius: 8px;
}
#reagent-input:focus{
    border-color: #777;
    box-shadow: none;
    outline: none;
}
#name-input:focus{
    border-color: #777;
    box-shadow: none;
    outline: none;
}
#password-input:focus{
    border-color: #777;
    box-shadow: none;
    outline: none;
}
.form3 .parent-confirmation{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 20px;
    margin-top: 36px;
}
.form3 .parent-confirmation h2{
    font-size: 24px;
    margin-bottom: 4px;
    color: #222;
}
.form3 .parent-confirmation p{
    margin-bottom: 0;
    font-size: 14px;
    color: #777;
}
.parent-input-sms{
    /*! display: grid; */
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.parent-input-sms input {
    width: 100%;
    height: var(--height-input);
    background: #f0f3f7;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.parent-input-sms input:focus{
    border-color: #777;
    box-shadow: none;
    outline: none;
}
.parent-submit-edit{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.resend-sms{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #6c7680 ;
}
.edit-mobile-number{
    font-size: 14px;
    color: #0077DB;
    transition: all ease .3s;
}
.edit-mobile-number:hover{
    text-decoration: none;
    color: #003f75;
}
.btn-form3{
    background: var(--mainColor);
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all ease .3s;
    height: var(--height-input);
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin-top: 50px;
    margin-bottom: 10px;
}
.login-password{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #0077DB;
    transition: all ease .3s;
}
.login-password:hover{
    text-decoration: none;
    color: #003f75;
}
.form3{
    display: none;
}
.form4 .parent-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.form4 form input {
    width: 100%;
    height: var(--height-input);
    color: #333;
    background: #f0f3f7;
    border-radius: 8px;
    line-height: 32px;
    font-size: 16px;
    padding: 0 12px;
    caret-color: #999;
    border: 1px solid transparent;
    margin-bottom: 6px;
}
.btn-form4 {
    /*background: var(--authMainColor);*/
    background: var(--mainColor);
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all ease .3s;
    height: var(--height-input);
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 12px;
}
.colleague-login{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #3662d8;
    transition: all ease .3s;
}
.colleague-login svg{
    fill: #3662d8;
    transition: all ease .3s;
    width: 14px;
}
.colleague-login:hover{
    color: #003f75;
}
.colleague-login:hover svg{
    fill: #003f75;
    transform: translateX(-3px);
}
.eye-not-slash{
    display: none;
}
.parent-form-tour-width{
    width: 480px;
}
.s-u-popup-in-result .cd-user-modal{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.form4 .parent-confirmation h2 {
    font-size: 24px;
    margin-bottom: 0;
    color: #222;
}
.form4 .parent-confirmation p {
    margin-bottom: 0;
    font-size: 14px;
}
.parent-input-word-crossing{
    display: flex;
    flex-direction: column;
    /*! gap: 25px; */
}
.parent-forget-sms{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*margin-top: 30px;*/
    font-size: 14px;
}
.forget-word-crossing,.login-sms-disposable {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #0077DB;
    transition: all ease .3s;
}
.forget-word-crossing:hover{
    text-decoration: none;
    color: #004a89;
}
.login-sms-disposable:hover{
    text-decoration: none;
    color: #003f75;
}
.eye{
    position: absolute;
    top: 35%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}
.parent-input-word-crossing input:focus{
    border-color: #777;
    box-shadow: none;
    outline: none;
}
.form4{
    display: none;
}
.parent-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /*margin-bottom: 30px;*/
    /*margin-top: 50px;*/
}
.form5 .parent-confirmation h2 {
    font-size: 24px;
    margin-bottom: 5px;
    color: #222;
}
.form5 .parent-confirmation p {
    margin-bottom: 0;
    font-size: 14px;
}
.parent-forget-box{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}
.form5 form input {
    width: 100%;
    height: var(--height-input);
    color: #333;
    background: #f0f3f7;
    border-radius: 8px;
    line-height: 32px;
    font-size: 16px;
    padding: 0 12px;
    caret-color: #999;
    border: 1px solid transparent;
}
.parent-forget-box input:focus {
    border-color: #777;
    box-shadow: none;
    outline: none;
}
.btn-form5{
    background: var(--mainColor);
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all ease .3s;
    height: var(--height-input);
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.login-password-sms{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #0077DB;
    transition: all ease .3s;
}
.login-password-sms:hover{
    text-decoration: none;
    color: #003f75;
}
.form5{
    display: none;
}
.remove svg:hover{
    fill: #333;
}

@media (max-width: 576px) {
    .parent-modal-login{
        width: 100%;
    }
}
@media (max-width: 545px) {
    .parent-form-tour-width{
        width: 100%;
    }
}