* {
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

#BODY {
    width: 100%;
    height: 100%;
    position: fixed;
}

#ax {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    max-height: 100%;
    height: 100%;
}

#dark {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    max-height: 100%;
    height: 100%;
    background: rgba(45, 0, 0, 0.4);
    border-bottom-left-radius: 180px;
    border-top-right-radius: 180px;
    /*border-bottom-left-radius: 300px 200px;   */
    /*border-top-right-radius: 300px 200px;   */
}

#parmis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    font-family: E-vahid1;
    color: #ffd800;
}

#parmis .content {
    width: 492px;
    height: 180px;
    margin:auto;
}

#parmis .content .left {
    float: left;
    height: 180px;
    line-height: 180px;
    font-size: 110px;
    padding-right: 10px;
}

#parmis .content .right {
    float: left;
    height: 180px;
    line-height: 180px;
    font-size: 35px;
}

#main {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*height: calc(100% - 100px);*/
    height: 100%;
    padding-top: 180px;
}

#subMain {
    position: relative;
    width: 100%;
    height: 100%;
}

#recoveryBox {
    width: 80%;
    height: 70%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    text-align: center;
    min-height: 471px;
    max-height: 550px;
    max-width: 609px;
    background: #fff;
    border-radius: 45px;
    overflow: hidden;
}

#recoveryBox .title {
    height: 80px;
    width: 100%;
    line-height: 80px;
    font-size: 18px;
    text-align: center;
    color: #404040;
    font-family: vahid2;
    background: #f4f4f4;;
}


#password_img {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px !important;
    height: 100px !important;
}

#recoveryBox .text {
    position: absolute;
    top: 44%;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 40px;
    font-size: 16px;
    text-align: center;
    font-family: vahid1;
    padding: 0 15px;
    color: #737373;
}


.vorodi {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 160px;
    /*background: #f63a30;*/
}

.vorodi input {
    width: 70%;
    height: 37px;
    border: 1px solid #ccc;
    margin: 25px 15% 0 0;
    direction: ltr;
    text-align: center;
    padding: 0 10px;
    font-size: 20px;
    transition: all .6s ease-in-out;
}

.vorodi input:focus {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    background: #f2f2f2;
}

.vorodi input::placeholder {
    color: #ccc;
    opacity: 1;
    text-align: center;
    font-size: 16px;
}

#btn {
    position: absolute;
    bottom: 5%;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: #eee;
    width: 118px;
    height: 39px;
    line-height: 39px;
    /*border-radius: 2px;*/
    text-align: center;
    font-size: 16px;
    font-family: vahid2;
    padding: 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    transition: all .2s ease-in;
    cursor: pointer;
    border: none;
}

#btn:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

#ajax_msg {
    display: none;
    width: 100%;
    height: 260px;
    padding: 40px 0 0 0;
    text-align: center;
}

.txt1 {
    position: absolute;
    top: 52%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    line-height: 60px;
    color: red;
    height: 80px;
    font-size: 16px;
    text-align: center;
    font-family: vahid1;
}


#btn2 {
    display: inline-block;
    margin: 52% 0 0 0;
    background: #eee;
    width: 166px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 16px;
    font-family: vahid2;
    padding: 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    transition: all .2s ease-in;
    cursor: pointer;
    border: none;
    text-decoration: none;
    color: black;
}

#btn3 {
    display: inline-block;
    margin: 52% 10px 0 0;
    background: #eee;
    width: 166px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 16px;
    font-family: vahid2;
    padding: 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    transition: all .2s ease-in;
    cursor: pointer;
    border: none;
    text-decoration: none;
    color: black;
}

#btn4 {
    display: inline-block;
    /*margin:45px 120px 0 0;*/
    background: #eee;
    width: 190px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 14px;
    font-family: vahid2;
    padding: 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    transition: all .2s ease-in;
    cursor: pointer;
    border: none;
    text-decoration: none;
    color: black;
    margin: 52% auto 0 auto;
}

#btn2:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

#btn3:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

#btn4:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}