.clearfix::after, .recover-trigger:before {
    content: "";
}

.clearfix {
    overflow: auto;
}

    .clearfix::after {
        clear: both;
        display: table;
    }

.recover-box {
    padding: 18px 0;
    background-color: #f9f9f9;
}

.recover-box-email {
    text-align: center;
    margin-top: 5px;
    display: block;
    font-size: 11px;
}

#selected-calling-code, .caret, button.previous-step {
    display: inline-block;
    vertical-align: middle;
}

.recover-box-email.recover-error {
    color: red;
}

.recover-box-email.recover-success {
    color: #138200;
}
.password-recovery-type-page, .password-recovery-by-phonenumber-page {
    
}

.login-page .button-1, .registration-page .button-1, .registration-result-page .button-1, .password-recovery-page .button-1 {
    width: 96%;
    margin-bottom: 10px;
}

#selected-calling-code {
    width: 30%;
    -webkit-appearance: none;
    height: 50px;
    padding: 0;
    position: absolute;
    float: left;
    margin-right: -9%;
}

    #selected-calling-code .btn {
        border-radius: 0;
        height: 50px;
        border: 0;
        width: 100%;
        text-align: right;
        padding-right: 15px;
        background-color: #909090;
        color: #fff;
        outline: 0;
        /* margin: 10px; */
    }

    #selected-calling-code ~ .tip-error {
        margin-left: 30%;
        text-align: left
    }

.registration-page #selected-calling-code {
    width: 25%;
    max-width: 70px;
}


.phonenumber-confirmation-form .inputs, .tip-error {
    text-align: center;
}

#selected-calling-code .btn span {
    position: absolute;
    left: 7px;
    top: 50%;
}

#selected-calling-code .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

#selected-calling-code ul li {
    background-repeat: no-repeat;
    background-position: 10px center;
    padding: 5px 15px;
    cursor: pointer;
}

    #selected-calling-code ul li:not(.first):hover {
        background-color: #ddd;
    }

    #selected-calling-code ul li.first {
        margin-bottom: 10px;
    }

#filter-country {
    width: 300px;
    max-width: 100%;
}

#selected-calling-code ~ #PhoneNumber, #selected-calling-code ~ #PhoneNumberConfirmation_PhoneNumber {
    width: 70%;
}

#selected-calling-code ~ input.valid-number {
    background: url(../img/tick.png) 98% center no-repeat;
    background-size: 20px;
}

.phonenumber-verification-form .form-fields {
    border-top: 0;
}

.login-page .returning-wrapper .form-fields {
    overflow: initial;
    padding: 30px;
}

.pha-hint {
    background: #deebf3;
    padding: 15px;
    margin: 0;
    line-height: 20px;
}

.phonenumber-verification-form .btn.btn-danger {
    height: 36px;
    vertical-align: middle;
    width: 30%;
    border: none;
    float: left;
}

.signIn-form #recaptcha {
    margin: 15px 15px 15px 0;
}

.login-page .calling-code-no-data {
    margin: 0 15px;
}

.caret {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.tip-error {
    font-size: 11px;
    color: red;
    margin-top: 5px;
}

button.previous-step {
    margin-top: 4px;
    margin-bottom: 4px;
    position: relative;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    touch-action: manipulation;
    color: #000;
    border-style: solid;
    border-color: transparent;
    height: 24px;
    width: 24px;
    min-width: 24px;
    float: left;
    padding: 0;
    background-color: #fff;
    border-width: 0;
    border-radius: 12px;
    margin-right: 2px;
}

    button.previous-step:hover {
        background-color: rgba(0,0,0,.1);
    }

.resendCodeButton {
    display: none;
}

.sms-code-verification-form .resendCodeButton,
.sms-code-verification-form .smsCodeVerificationButton {
    margin: 5px;
}

.remainingTimeForResendCodeRequest {
    display: block;
    margin-top: 15px;
}

.recover-trigger {
    position: relative;
    padding: 15px 45px 15px 0;
    margin-top: 30px;
    border-top: 1px solid #ddd;
    display: block;
    text-align: left;
}

    .recover-trigger:before {
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        background: url(../img/pointer.png) center no-repeat;
        transform: rotate(90deg);
        -webkit-transition: all .5s;
        transition: all .5s;
        background-size: 8px;
    }

    .recover-trigger.open:before {
        transform: rotate(270deg);
    }

#recover-box-collapse .button-1 {
    vertical-align: middle;
    height: 36px;
    display: block;
    margin-top: 15px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    min-width: 120px;
}

.signIn-form .credential {
    font-size: 16px;
    line-height: 30px;
}

.signIn-form .previous-step-container {
    margin: 0 0 30px;
    background: #eaeaea;
    padding: 5px;
}

    .signIn-form .previous-step-container button {
        margin-right: 10px;
    }

.signIn-form #Password-error {
    text-align: center;
}

input[type=password].loading, input[type=text].loading {
    background-image: url(../img/loader.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 70px;
}

#selected-calling-code ~ input.valid-number.loading {
    background-image: url(../img/loader.gif),url(../img/tick.png);
    background-position: left bottom,98% center;
    background-size: 70px,20px;
}

.sms-code-verification-form #Code-error {
    text-align: center;
    margin-left: 0;
}

.phonenumber-verification-form #PhoneNumber-error {
    text-align: center;
    font-size: 10px;
}

.phonenumber-verification-form .btn.btn-danger {
    margin-top: 15px;
}

.password-recovery-type-page .tooltip, .password-recovery-by-phonenumber-page .tooltip {
    margin: 0 0 25px;
}

.password-recovery-type-page .type {
    display: inline-block;
}

    .password-recovery-type-page .type span {
        display: inline-block;
        margin: 0 10px 0 0;
    }

        .password-recovery-type-page .type span > * {
            display: inline !important;
            margin: 0 5px;
            line-height: 32px;
            font-weight: bold;
        }

.password-recovery-type-page .button-1, .password-recovery-by-phonenumber-page .button-1 {
    min-width: 140px;
    border: none;
    background-color: #0c6d37;
    padding: 10px 30px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
}

    .password-recovery-type-page .button-1:hover, .password-recovery-by-phonenumber-page .button-1:hover {
        background-color: #0c6d37;
    }

.password-recovery-by-phonenumber-page .inputs {
    text-align: center;
}

.country-dropdown {
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.registration-page .country-dropdown {
    text-align: center
}

.captcha-box {
    margin: 0;
    text-align: center
}

@media all and (min-width:480px) {
    #selected-calling-code ~ #PhoneNumber, #selected-calling-code ~ #PhoneNumberConfirmation_PhoneNumber {
        width: 70%;
    }

    .registration-page #selected-calling-code ~ #PhoneNumber,
    .registration-page #selected-calling-code ~ #PhoneNumberConfirmation_PhoneNumber {
        width: 100%;
        float: left;
        /* max-width: 300px; */
    }

    .phonenumber-verification-form #PhoneNumber-error {
        font-size: 11px;
    }
}


@media (min-width:768px) {
    #recover-box-collapse .button-1 {
        vertical-align: middle;
        display: inline-block;
        width: auto;
        margin-top: 0;
    }
}


@media all and (min-width:992px) {
    .sms-code-verification-form #Code-error {
        text-align: left;
        margin-left: 225px;
    }


    .registration-page #selected-calling-code {
        width: 15%;
    }
}

@media all and (min-width:1000px) {


    #selected-calling-code {
        width: 30%;
        -webkit-appearance: none;
        height: 40px;
        padding: 0;
        position: absolute;
        float: left;
        display: initial;
        /* margin-right: 90%; */
    }

        #selected-calling-code ~ #PhoneNumber,
        #selected-calling-code ~ #PhoneNumberConfirmation_PhoneNumber {
            width: 70%;
        }

        #selected-calling-code .btn {
            height: 50px;
            /* margin: -5px; */
        }

    .registration-page .country-dropdown {
        text-align: left;
        max-width: 100%;
    }


    .phonenumber-verification-form .btn.btn-danger {
        float: none;
        height: 36px;
        vertical-align: middle;
        margin-left: 15px;
        width: 100px;
        border: none;
        margin-top: 0;
    }

    .phonenumber-verification-form #PhoneNumber-error, .recover-box-email, .signIn-form #Password-error {
        text-align: left;
    }

    #recover-box-collapse .button-1,
    .phonenumber-verification-form .btn.btn-danger {
        height: 50px;
        width: 30%;
    }

    .phonenumber-verification-form .btn.btn-danger {
        width: 10%;
    }

    .password-recovery-by-phonenumber-page .inputs {
        text-align: left;
    }

    .sms-verify label {
        width: 30% !important;
        margin-right: 0;
        padding-right: 10px;
    }


    .sms-code-verification-form #Code-error {
        margin-left: 30%;
    }

    .phonenumber-verification-after-registration-page .sms-code-verification-form #Code-error {
        margin-left: 30%;
    }

    .login-page .signIn-form .returning-wrapper input[type=password] {
        width: 290px;
    }

    .signIn-form #recaptcha {
        margin-left: 30%;
    }

    .signIn-form #Password-error {
        margin-left: 30%;
    }

    .login-page .customer-blocks {
        overflow: initial;
    }

    .login-page .inputs.reversed a {
        color: #909090;
    }

    .login-page .returning-wrapper .inputs .tip-error {
        text-align: left;
        margin-left: 40%;
    }

    .phonenumber-confirmation-form #PhoneNumber-error {
        margin-left: 30%;
    }

    .email-or-phonenumber-form .inputs {
        margin-bottom: 0;
    }

    .signIn-form label[for=Password] {
        width: 30% !important;
        margin: 0;
        padding-right: 10px;
    }

    .login-page .returning-wrapper .signIn-form input[type=password] {
        width: 70%;
    }

    .login-page .returning-wrapper .inputs.reversed {
        white-space: normal;
        padding-left: 30%;
        text-align: left;
    }

        .login-page .returning-wrapper .inputs.reversed .forgot-password {
            margin-left: 30px
        }

    .email-or-phonenumber-form .inputs label {
        width: 40% !important;
        margin: 0;
        padding-right: 10px;
    }

    .email-or-phonenumber-form input[type=text], .signIn-form input[type=text] {
        width: 60% !important;
    }

    .password-recovery-type-page .type span > * {
        margin: 0 5px 0 0;
    }

    .captcha-box {
        text-align: left
    }
}




@media all and (min-width:1367px) {

    .email-or-phonenumber-form .inputs label {
        width: 30% !important;
        margin: 0;
        padding-right: 10px;
    }

    .email-or-phonenumber-form input[type=text], .signIn-form input[type=text] {
        width: 70% !important;
    }

    .login-page .returning-wrapper .inputs .tip-error {
        margin-left: 30%;
    }

    .signIn-form #recaptcha {
        margin-left: 30%;
    }

    .sms-code-verification-form #Code-error {
        margin-left: 30%;
    }

    .sms-verify label {
        width: 30%;
    }
}