:root {
    --wpex-black: #ffffff;
    --wpex-black-hover: #959595;
    --wpex-gold-dark: #5e3ec7;
    --wpex-gold-dark-dark: #a45600;
    --wpex-gold-middle: #000000;
    --wpex-gold-light: #fdd29a;
    --wpex-gold-primary: #977ecd;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    direction: rtl;
}

html,
body {
    margin:0;
    background-color: var(--wpex-black);
    font-family: 'Vazir', sans-serif, Arial;   
}

input,
button {
    font-family: 'Vazir', sans-serif, Arial;
}

    input:focus,
    button:focus,
    input:active,
    button:active {
        outline: none;
    }

a {
    text-decoration: none;
}

    a:focus,
    a:active {
        outline: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    letter-spacing: 1px;
}

.container {
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
}

    .container:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
    }

.formBox {
    width: 427px;
    max-width: 100%;
    height: 535px;
    margin-right: -4px;
    margin-top: 25px;
    margin-bottom: 20px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

    .formBox .box {
        text-align: right;
        background-color: #fff;
        border-radius: 8px;
        padding: 60px 0px 40px 0;
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow: 0px 2px 11px -2px rgba(0, 0, 0, 0.5);
        transition: all 0.2s cubic-bezier(0.35, 0.33, 0.75, 0.9);
    }

    .formBox h2 {
        border-right: 6px solid var(--wpex-gold-middle);
        color: var(--wpex-gold-middle);
        padding: 0px 45px;
        font-size: 1.82em;
        line-height: 25px;
        height: 40px;
        text-transform: uppercase;
        margin-bottom: 20px;
        position: relative;
    }

    .formBox p {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 30px;
        color: #696969;
    }

    .formBox form {
        display: block;
        padding: 0px 50px;
        position: relative;
    }

    .formBox .f_row {
        position: relative;
        margin-bottom: 45px;
        height: 52px;
    }

        .formBox .f_row.shake {
            animation: shake 0.4s linear;
        }

        .formBox .f_row.last {
            margin-bottom: 53px;
        }

        .formBox .f_row label {
            color: #3f3f3f;
            font-size: 1.0em;
            font-weight: normal;
            position: absolute;
            right: 0;
            top: 10px;
            opacity: 1;
            transition: all 0.3s cubic-bezier(1, -0.33, 0, 1.15);
            transform: translate(0px, 0px) scale(1);
            transform-origin: right top;
        }

        .formBox .f_row input {
            background-color: transparent;
            border: none;
            color: #3f3f3f;
            font-size: 1.0em;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .formBox .f_row u {
            background-color: #e1e1e1;
            width: 100%;
            height: 2px;
            position: absolute;
            right: 0;
            bottom: 0;
        }

            .formBox .f_row u:before {
                content: '';
                display: block;
                height: 100%;
                width: 0;
                background-color: var(--wpex-gold-middle);
                transition: all 0.35s cubic-bezier(0.35, 0.33, 0.84, 0.85);
            }

        .formBox .f_row.focus label {
            opacity: 0.5;
            transform: translate(0px, -30px) scale(0.8);
        }

        .formBox .f_row.focus u:before {
            width: 100%;
        }

    .formBox .reg_bg {
        border-radius: 50%;
        background-color: var(--wpex-gold-middle);
        position: absolute;
        width: 900px;
        height: 900px;
        right: -115px;
        top: -190px;
        transform-origin: 100% 40%;
        transform: scale(0);
    }

    .formBox .regTag {
        line-height: 125px;
        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.45);
        border-radius: 50%;
        background-color: var(--wpex-gold-primary);
        color: #fff;
        font-size: 3.0em;
        text-align: center;
        width: 100px;
        height: 100px;
        position: absolute;
        left: -50px;
        top: 40px;
        z-index: 2;
    }

        .formBox .regTag svg {
            fill: #fff;
            width: 38px;
            height: 38px;
        }

    .formBox .registerBox {
        border-radius: 8px;
        background-color: #fff;
        right: 0;
        overflow: hidden;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        backface-visibility: visible;
        z-index: 1;
    }

        .formBox .registerBox .f_row label,
        .formBox .registerBox .f_row input {
            color: #fff;
        }

        .formBox .registerBox .f_row u {
            background-color: #f87c98;
        }

            .formBox .registerBox .f_row u:before {
                background-color: #fff;
            }

        .formBox .registerBox .f_row.last {
            margin-bottom: 40px;
        }

        .formBox .registerBox h2 {
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translateX(-20px);
        }

        .formBox .registerBox .form > div {
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translateX(20px);
        }

            .formBox .registerBox .form > div:nth-child(1) {
                transition-delay: 0.15s;
            }

            .formBox .registerBox .form > div:nth-child(2) {
                transition-delay: 0.2s;
            }

            .formBox .registerBox .form > div:nth-child(3) {
                transition-delay: 0.25s;
            }

        .formBox .registerBox .btn-large {
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translateX(20px);
            transition-delay: 0.3s;
        }

    .formBox .forgetbox {
        background-color: #56ADC7;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translate(0px, 9px) scale(1.03);
    }

        .formBox .forgetbox .back {
            position: absolute;
            top: 13px;
            right: 26px;
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            animation: back 0.8s linear;
            animation-iteration-count: infinite;
        }

            .formBox .forgetbox .back svg {
                fill: #fff;
                width: 20px;
                height: 20px;
            }

        .formBox .forgetbox .f_row label,
        .formBox .forgetbox .f_row input {
            color: #fff;
        }

        .formBox .forgetbox .f_row u {
            background-color: #7DC6DC;
        }

            .formBox .forgetbox .f_row u:before {
                background-color: #fff;
            }

        .formBox .forgetbox .f_row.last {
            margin-bottom: 40px;
        }

        .formBox .forgetbox .btn {
            border-color: #7DC6DC;
            color: #7DC6DC;
        }

            .formBox .forgetbox .btn u {
                background-color: #7DC6DC;
            }

        .formBox .forgetbox h2 {
            color: #fff;
            border-right-color: #fff;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(-20px, 0px);
        }

        .formBox .forgetbox .form > div {
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(0px, 20px);
            transition-delay: 0.15s;
        }

        .formBox .forgetbox p {
            color: #fff;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(0px, 20px);
            transition-delay: 0.2s;
        }

        .formBox .forgetbox .btn {
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(0px, 20px);
            transition-delay: 0.25s;
        }

    .formBox .confirmBox {
        background-color: #c7af56;
        overflow: hidden;
        opacity: 1;
        transform: translate(0px, 9px) scale(1.03);
    }

        .formBox .confirmBox .back {
            position: absolute;
            top: 13px;
            right: 26px;
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            animation: back 0.8s linear;
            animation-iteration-count: infinite;
        }

            .formBox .confirmBox .back svg {
                fill: #fff;
                width: 20px;
                height: 20px;
            }

        .formBox .confirmBox .f_row label,
        .formBox .confirmBox .f_row input {
            color: #fff;
        }

        .formBox .confirmBox .f_row u {
            background-color: #dcce7d;
        }

            .formBox .confirmBox .f_row u:before {
                background-color: #fff;
            }

        .formBox .confirmBox .f_row.last {
            margin-bottom: 40px;
        }

        .formBox .confirmBox .btn {
            border-color: #7DC6DC;
            color: #7DC6DC;
        }

            .formBox .confirmBox .btn u {
                background-color: #dcda7d;
            }

        .formBox .confirmBox h2 {
            color: #fff;
            border-right-color: #fff;
            opacity: 1;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(-20px, 0px);
        }

        .formBox .confirmBox .form > div {
            opacity: 1;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(0px, 20px);
            transition-delay: 0.15s;
        }

        .formBox .confirmBox p {
            color: #fff;
            opacity: 1;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(0px, 20px);
            transition-delay: 0.2s;
        }

        .formBox .confirmBox .btn {
            opacity: 1;
            transition: all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
            transform: translate(0px, 20px);
            transition-delay: 0.25s;
        }


    .formBox.level-login .boxShaddow {
        opacity: 0.7;
        transform-origin: center top;
        transform: translate(0px, -9px) scale(0.97);
    }

    .formBox.level-reg h2 {
        border-right-color: #fff;
        color: #fff;
    }

    .formBox.level-reg .boxShaddow {
        opacity: 0.7;
        transform-origin: center top;
        transform: translate(0px, -18px) scale(0.94);
    }

    .formBox.level-reg .loginBox {
        opacity: 0.7;
        transform-origin: center top;
        transform: translate(0px, -9px) scale(0.97);
    }

    .formBox.level-reg .registerBox {
        opacity: 1;
        visibility: visible;
    }

    .formBox.level-reg .regTag {
        animation: regTag 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78), regTag2 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
        padding-top:8px;
    }

    .formBox.level-reg .reg_bg {
        animation: regMask 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
        animation-fill-mode: forwards;
    }

    .formBox.level-reg .form > div,
    .formBox.level-reg .btn-large,
    .formBox.level-reg h2 {
        visibility: visible;
        opacity: 1;
        transform: translateX(0px);
    }

    .formBox.level-reg-revers .regTag {
        animation: regTagR 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78), regTag2R 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
        animation-fill-mode: forwards;
        padding-top:8px;
    }

    .formBox.level-reg-revers .reg_bg {
        animation: regMaskR 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
        animation-fill-mode: forwards;
    }

    .formBox.level-forget .boxShaddow {
        opacity: 0.7;
        transform-origin: center top;
        transform: translate(0px, -18px) scale(0.94);
    }

    .formBox.level-forget .loginBox {
        opacity: 0.7;
        transform-origin: center top;
        transform: translate(0px, -9px) scale(0.97);
    }

    .formBox.level-forget .forgetbox {
        transform: translate(0px, 0px) scale(1);
        opacity: 1;
        visibility: visible;
    }

    .formBox.level-forget .confirmBox {
        transform: translate(0px, 0px) scale(1);
        opacity: 1;
        visibility: visible;
    }

        .formBox.level-forget .forgetbox p,
        .formBox.level-forget .forgetbox form > div,
        .formBox.level-forget .forgetbox .btn,
        .formBox.level-forget .forgetbox h2 {
            visibility: visible;
            opacity: 1;
            transform: translate(0px, 0px);
        }
    .formBox.level-forget .confirmBox p,
    .formBox.level-forget .confirmBox form > div,
    .formBox.level-forget .confirmBox .btn,
    .formBox.level-forget .confirmBox h2 {
        visibility: visible;
        opacity: 1;
        transform: translate(0px, 0px);
    }

@keyframes back {
    0% {
        transform: translateX(0px);
    }

    70% {
        transform: translateX(-13px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes regMask {
    0% {
        transform: translate(0px, 0px) scale(0);
    }

    50% {
        transform: translate(100px, 100px) scale(0.5);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes regMaskR {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    50% {
        transform: translate(150px, -150px) scale(0.5);
    }

    100% {
        transform: translate(0px, 0px) scale(0);
    }
}

@keyframes regTag {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    25% {
        transform: translate(4px, 25px) rotate(11.25deg);
    }

    50% {
        transform: translate(-88px, 40px) rotate(22.5deg);
    }

    100% {
        transform: translate(-96px, 8px) rotate(45deg);
    }
}

@keyframes regTag2 {
    0% {
        width: 140px;
        height: 140px;
        line-height: 140px;
        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.45);
    }

    100% {
        width: 70px;
        height: 70px;
        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0);
        line-height: 68px;
    }
}

@keyframes regTagR {
    0% {
        transform: translate(-96px, 8px) rotate(45deg);
    }

    25% {
        transform: translate(-88px, 40px) rotate(22.5deg);
    }

    50% {
        transform: translate(4px, 25px) rotate(11.25deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes regTag2R {
    0% {
        width: 70px;
        height: 70px;
        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0);
        line-height: 68px;
    }

    100% {
        width: 140px;
        height: 140px;
        line-height: 140px;
        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.45);
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.btn {
    transition: all 0.6s ease;
    background-color: #fff;
    border: 3px solid #dfdfdf;
    cursor: pointer;
    color: #dfdfdf;
    display: block;
    text-align: center;
    width: 243px;
    height: 73px;
    line-height: 73px;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.btn span{
    color:var(--wpex-gold-dark)
}

 .btn:hover {
    color: white;
    background-color: var(--wpex-gold-middle);
}

btn.active {
    transform: scale(1);
}


.btn-large {
    transition: all 0.6s ease;
    background-color: #fff;
    border: 3px solid #fff;
    cursor: pointer;
    color: var(--wpex-gold-middle);
    display: block;
    text-align: center;
    width: 100%;
    height: 70px;
    line-height: 67px;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
}

    .btn-large.active, .btn-large:hover {
        background-color: var(--wpex-gold-middle);
        border-color: #fff;
        color: #fff;
    }


.f_link {
    text-align: center;
    padding-top: 50px;
}

    .f_link a {
        color: #bdbdbd;
        font-size: 1.4em;
        transition: all 0.6s ease;
    }

        .f_link a:hover {
            color: #56ADC7;
        }


@media screen and (max-height: 650px) {
    .formBox {
    }
}

.logosection {
    text-align: center;
    padding-top:10px
}
    .logosection img {
        height:69px;
    }
    .logosection h7{
    display:block;
    color:var(--wpex-gold-middle);
    font-size:24px
}


#validationResult, #validationResultForgot, #validationResultSignUp {
    display: none;
    color: #ff0000
}

.alert {
    font-size: 12px !important
}
#password-strength-status {
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 4px;
    margin-top: 5px;
    font-size: 11px;
}

.medium-password {
    background-color: #E4DB11;
    border: #BBB418 1px solid;
}

.weak-password {
    background-color: #FF6600;
    border: #AA4502 1px solid;
}

.strong-password {
    background-color: #12CC1A;
    border: #0FA015 1px solid;
}

.alert-danger {
    font-size: 15px !important;
    margin-bottom: 12px;
}
.verification {
    margin: 0 5px;
    text-align: center;
    line-height: 53px;
    font-size: 45px;
    border: solid 1px #ccc;
    box-shadow: 0 0 5px #ccc inset;
    outline: none;
    width: 20%;
    transition: all .2s ease-in-out;
    border-radius: 3px;
}

    .verification:focus {
        border-color: purple;
        box-shadow: 0 0 5px #a45600 inset;
    }

    .verification::selection {
        background: transparent;
    }

#cornometer {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 24px;
    color: #7e7a00;
    text-align: center;
}

#retryCode {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    color: #d50026;
    text-align: center;
    display: none;
    text-decoration: underline;
    cursor: pointer
}

#timeout {
    display: none;
    margin-top: 25px;
}
.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 2px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0px;
    pointer-events: none;
    font-family: "Vazir";
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f12a";
    font-family: FontAwesome;
    font-size: 16px;
    color: #c80000;
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}

#listPrices {
    background-color: var(--wpex-gold-dark-dark);
    text-align:center;
    font-weight:700;
    font-size:1.7rem;
}
#listPrices a{
    color:#fff;
    text-decoration:none;
}