@font-face {
    font-family: ocr a std;
    font-style: normal;
    font-weight: 400;
    src: local("OCR A Std"), url(../fonts/OCRAStd.woff) format("woff")
}

@font-face {
    font-family: YekanBakh;
    font-style: Hairline;
    font-weight: 100;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-01-Hairline.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-01-Hairline.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-01-Hairline.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: thin;
    font-weight: 200;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-02-Thin.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-02-Thin.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-02-Thin.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: light;
    font-weight: 300;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-03-Light.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-03-Light.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-03-Light.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: regular;
    font-weight: 400;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-04-Regular.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-04-Regular.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-04-Regular.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: medium;
    font-weight: 500;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-05-Medium.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-05-Medium.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-05-Medium.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: bold;
    font-weight: 600;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-06-Bold.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-06-Bold.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-06-Bold.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: heavy;
    font-weight: 700;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-07-Heavy.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-07-Heavy.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-07-Heavy.ttf) format("truetype")
}

@font-face {
    font-family: YekanBakh;
    font-style: fat;
    font-weight: 800;
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-08-Fat.eot);
    src: url(../fonts/FaNum/Yekan-Bakh-FaNum-08-Fat.woff) format("woff"), url(../fonts/FaNum/Yekan-Bakh-FaNum-08-Fat.ttf) format("truetype")
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 70rem
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 70rem
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 70rem
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
    border-radius: 70rem
}

.login {
    background: #fff;
    margin: 10% auto 10% auto !important;
    border-radius: 15px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 52px 0 rgba(13, 13, 125, .18);
    box-shadow: 0 0 52px 0 rgba(13, 13, 125, .18)
}

body {
    font-family: YekanBakh;
    font-weight: 400 !important;
    /*direction: rtl;*/
    background: rgb(240, 245, 255) !important;
}


.loginheader {
    background: #24d0da;
    text-align: center;
    padding: 2.5rem 0;
}

.loginheader img {
    max-width: 85px
}

.uptitle {
    text-align: center;
    padding: 1.5rem 0;
    padding-top: 2.5rem
}

.uptitle h5 {
    font-weight: 600;
    font-size: 20px;
    /*margin: 0px;*/
    color: black;
}

.uptitle p {
    font-size: 15px;
    color: #7c8c9f
}

input:focus, button:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important
}

a {
    color: #2424da
}

.errorinput .input-group {
    border: 2px solid !important;
    color: #ff5e33
}

.errorinput input, .errorinput button {
    color: #ff5e33
}

.errorinput .doneit, .errorinput .show {
    display: none
}

.errorinput .errorit {
    display: block;
}

.errorinput .errortext {
    display: block
}

.errortext {
    text-align: right;
    font-size: 12px;
    display: none;
    margin-top: 7px;
    color: #ff5e33
}

.errorit {
    display: none
}

.oninput {
    font-size: 14px;
    color: #7c8c9f;
    font-weight: 400;
    background: #fff;
    padding: 0 8px;
    text-align: right;
    position: absolute;
    -webkit-transition: .4s ease;
    transition: .4s ease;
    margin-top: -13px;
    display: inline;
    margin-right: 18px;
    z-index: 1
}

.psw {
    margin-left: 77%
}

.adddinput {
    border-left: 2px solid #e7ecf4;
    max-height: 30px;
    border-right: none !important
}

.addgroup {
    padding: 10px 7px !important;
    max-height: 53px
}

.addgroup input {
    color: #07142c;
    font-size: 13px !important
}

.btn-outline-secondary {
    padding: 2px 9px !important
}

.btn-outline-secondary img {
    height: 100%
}

.input-group {
    margin: 0 !important;
    padding: 8px;
    border-radius: 10px;
    border: 2px solid #e7ecf4;
    -webkit-transition: .4s ease;
    transition: .4s ease;

}

.input-group .input-group-prepend {
    max-height: 30px;
    border-right: 2px solid #e7ecf4
}

.input-group:hover button {
    color: #2424da;
    -webkit-transition: .4s ease;
    transition: .4s ease
}

.input-group:hover input {
    color: #2424da;
    border: none;
}

.input-group:hover .oninput {
    color: #2424da !important
}

.input-group input, .input-group button {
    border: none;
    font-size: 20px;

}

.input-group input:hover, .input-group button:hover {
    background: 0 0
}

.input-group .show {
    font-size: 24px;
    margin-top: 6px
}

.finalcheckbtn {
    width: 100%;
    border: none;
    margin-top: 15px;
    color: #fff;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    border-radius: 13px;
    padding: 20px;
    background: #24d0da;
    -webkit-box-shadow: 0 0 52px -12px rgba(36, 36, 218, .33);
    box-shadow: 0 0 52px -12px rgba(36, 36, 218, .33)
}

.finalcheckbtn:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #22c58b
}

.forget {
    font-size: 14px;
    color: #7c8c9f;
    font-weight: 400;
    color: #2424da;
    cursor: pointer;
    -webkit-transition: .3s ease;
    transition: .3s ease
}

.forget:hover {
    font-weight: 600
}

.pd0 {
    padding: 0 !important
}

.form-check {
    padding: 0
}

.form-check-label {
    margin-right: 20px;
    margin-top: 0;
    font-size: 14px;
    color: #7c8c9f;
    font-weight: 400
}

.ticks {
    margin: 0
}

.sign {
    text-align: center;
    font-size: 14px;
    color: #7c8c9f;
    font-weight: 400
}
.form-check .form-check-input {
 float: unset!important;
 margin-right: unset!important;
}
.sign a {
font-size: 14px;
color: #7c8c9f;
font-weight: 400;
color: #2424da
}

.inputs {
padding: 30px
}

.loginback {
position: absolute;
right: 40%;
margin-top: 1%;
-webkit-transition: .3s ease;
transition: .3s ease;
border-radius: 50%;
padding: 14px;
width: 50px;
height: 50px;
border: 1px solid #e7ecf4
}

.loginback:hover {
background: #2424da;
color: #fff
}

.loginback i {
font-size: 20px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}

@media only screen and (max-width: 992px) {
.steps {
    margin-left: 15px !important
}

#video {
    margin-top: 2rem !important
}

.formsdetail {
    border: none !important
}

.drag button {
    min-width: 100% !important
}
}

@media only screen and (max-width: 768px) {
.container {
    max-width: unset!important;
}
.radial-progress {
    left: 31% !important;
    top: 36% !important
}

.deleteimg {
    left: 38% !important;
    top: 42% !important
}

.goleftcard, .gorightcard {
    top: 113% !important;
    left: 17% !important
}

.gorightcard {
    left: 72% !important
}

.carddetailmodal {
    margin: 20% 5% !important
}

.bodycard .cardnum {
    font-size: 16px !important
}

.cardname span {
    font-size: 16px !important
}

.footercard p {
    font-size: 13px
}

.crdmbody {
    padding: 22px 15px !important
}

.flag98 {
    padding-left: 0 !important
}

.finalcheckbtn {
    padding: 15px;
    margin-top: 5px
}

.loginback {
    width: 40px;
    padding: 12px;
    height: 40px
}

.loginback i {
    font-size: 15px
}

.login {
    margin-top: 20px;
}
.form-control{
    background-color: #ffffff !important;
}

.loginheader {
    padding: 1rem 0
}

.loginheader img {
    max-width: 50px
}

.uptitle {
    padding-bottom: 0
}

.loginback {
    position: relative !important;
    top: 33px !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important
}

.alls {
    padding: 0 !important
}

.inputs {
    padding: 15px !important
}
}

@media only screen and (max-width: 576px) {
.oninput {
    margin-left: 45%
}

.psw {
    margin-left: 67%
}
}

.progress {
margin: 1rem 0;
height: 63px;
border-radius: 13px
}

.progress .time {
color: #fff;
left: 50% !important;
margin-top: 30px;
font-size: 18px;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
position: absolute
}

.progress .progress-bar {
background: #2424da
}

.textvr {
font-size: 14px;
color: #7c8c9f;
font-weight: 400;
margin-bottom: 15px;
display: block
}

.verify div {
padding: 5px
}

.verify input {
background: #f7f9fb;
border: none;
border: 2px solid #f7f9fb;
border-radius: 10px;
-webkit-transition: .4s ease;
transition: .4s ease;
text-align: center;
padding: 15px 2px
}

.verify input:hover {
border: 2px solid #2424da;
background: 0 0
}

.mg0 {
margin: 0
}

.backehrz {
margin-left: 20px
}

.allehraz {
padding: 0 25px
}

.ehrazback {
position: relative !important;
right: auto;
top: auto
}

.stepsBox {
font-size: 12px;
line-height: 1em;
text-align: center;
padding: 1em 0
}

.step, .stepborder {
background: #f0f5ff;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 23px
}

.step span, .stepborder span {
margin-top: 13px;
display: inline-block
}

.line {
border-bottom: 3px solid #f0f5ff;
width: 80px;
margin-top: 27px;
margin-right: 10px;
height: 5px
}

.stepborder {
width: 68px;
height: 68px;
background: #fff;
padding: 3px
}

.steps {
margin-left: 20px
}

.steps p {
margin-top: 10px;
font-size: 12px;
color: #7c8c9f
}

.doneehraz {
display: none;
margin-top: 18px
}

.done .mobstep {
background: #22c58b
}

.done .step, .done .stepborder {
background: #22c58b
}

.done p {
color: #22c58b
}

.done .line {
border-bottom: 3px solid #22c58b
}

.done span {
display: none
}

.done img {
display: inline-block
}

.current .mobstep {
background: #2424da
}

.current .line {
border-bottom: 3px solid #2424da
}

.current p {
color: #2424da
}

.current span {
color: #fff !important
}

.current .stepborder {
border: 1px solid #2424da !important
}

.current .stepborder .step, .current .stepborder .stepborder {
background: #2424da
}

.stepcount {
color: #7b8ea7
}

.donemobile {
display: none
}

#mobilestep {
margin-top: 30px
}

.mobstep {
background: #f0f5ff;
font-size: 23px;
padding: 10px;
border-radius: 10px
}

.mobstep span {
font-size: 15px;
color: #7c8c9f
}

.mobsteps {
margin: 10px 0
}

.caps h6 {
color: #ff5e33
}

.lists {
direction: rtl;
font-size: 14px;
color: #7c8c9f
}

.lists ul {
margin-bottom: 5px;
padding-right: 14px
}

.alert {
margin: 1rem 0;
background: #fffcfb;
text-align: right;
padding: 20px;
border-radius: 20px
}

.alert img {
margin-left: 20px
}

.alert p {
max-width: 87%;
margin-bottom: 0;
font-size: 15px;
font-weight: 500;
color: #ff5e33
}

.btmtitle {
color: #3c4a5b;
margin-bottom: 1.5rem;
font-size: 14px
}

.lstchd {
color: #7c8c9f
}

.drag {
color: #3c4a5b;
border-radius: 15px;
overflow: hidden;
padding: 5rem 2rem;
background: #f0f5ff;
border: 2px dashed #7c8c9f
}

.drag .captions {
margin: 15px 0;
display: block
}

.drag button {
background: #7c8c9f;
-webkit-box-shadow: 0 6px 37px 0 rgba(60, 74, 91, .18);
box-shadow: 0 6px 37px 0 rgba(60, 74, 91, .18);
color: #fff;
border: none;
padding: 15px 10px;
min-width: 300px;
border-radius: 10px;
-webkit-transition: .3s ease;
transition: .3s ease
}

.drag button:hover {
background: #22c58b
}

.upbtn {
margin: 2rem 0
}

.formsdetail {
border-left: 2px solid #e7ecf4;
padding-left: 5%;
padding-right: 3%
}

#video {
margin-top: 30%
}

.capsdetail {
padding-top: 4%;
padding-left: 3%;
padding-right: 5%
}

.pd5 {
padding: 6px
}

.borndate {
margin-top: 1rem;
text-align: center
}

.borndate span {
font-size: 14px;
color: #7c8c9f;
font-weight: 400
}

.borndate input {
font-size: 14px;
text-align: center;
border-radius: 10px;
padding: 10px 12px;
border: 2px solid #e7ecf4
}

.textarea {
max-height: auto !important
}

.textarea textarea:focus {
-webkit-box-shadow: none;
box-shadow: none
}

.textarea textarea {
font-size: 13px;
border: none
}

.titleleft {
margin-bottom: 20px;
color: #ff5e33;
font-weight: 500
}

.alltable {
overflow-x: scroll
}

.upby1 {
min-width: 695px
}

.upbytitle, .alllastrows {
font-size: 14px;
background: #f5f8fa;
border-radius: 10px;
padding: 16px 30px
}

.alllastrows {
background: #fff;
padding-top: 4px;
height: 280px;
min-width: 695px;
overflow-y: scroll !important;
color: #7c8c9f
}

.colrow {
padding: 20px 0;
border-bottom: 1px solid #e7ecf4
}

.joziat {
text-align: center !important
}

.upbytitle .col, .alllastrows .col {
padding: 0 2px
}

.joziat i {
padding: 3px;
font-size: 16px;
color: #3c4a5b;
border: 1px solid #7c8c9f;
-webkit-transition: .3s ease;
transition: .3s ease;
border-radius: 6px
}

.joziat i:hover {
border-color: #2424da;
background: #2424da;
color: #fff
}

.vaziat span {
padding: 2px 8px;
border-radius: 6px;
background: #f1f3f6;
font-size: 12px
}

.confirm {
background: #e8f9f3 !important;
color: #22c58b
}

.reject {
background: #ffeeea !important;
color: #ff5e33
}

.waiting {
background: #fff8ea !important;
color: #ffb533
}

.alllastrows .netdes {
font-weight: 400
}

.exstep span {
font-weight: 600;
font-size: 14px;
display: block;
margin-right: 10px
}

.cardstable {
padding: 5%
}

.cardnum {
font-family: OCR A Std !important;
font-size: 12px
}

.addcard {
font-size: 13px;
padding: 13px 25px;
color: #fff;
border: none;
background: #ee9700;
margin-bottom: 2rem;
-webkit-box-shadow: 0 8px 41px 0 rgba(238, 151, 0, .1);
box-shadow: 0 8px 41px 0 rgba(238, 151, 0, .1);
border-radius: 8px;
-webkit-transition: .3s ease;
transition: .3s ease
}

.addcard:hover {
background: #22c58b
}

.addcard img {
margin-left: 10px;
max-width: 18px
}

.modal-header {
background: #2424da;
color: #fff
}

.modal-content {
border-radius: 15px;
overflow: hidden;
border: none
}

.modal-body {
padding: 20px 25px
}

.modal-header i {
font-size: 20px !important;
cursor: pointer;
width: 20px;
height: 20px;
-webkit-transition: .3s ease;
transition: .3s ease
}

.modal-header .exstep {
margin: 0 !important
}

.modal-body .finalcheckbtn {
background: #ee9700;
-webkit-box-shadow: 0 0 51px 0 rgba(238, 151, 0, .19);
box-shadow: 0 0 51px 0 rgba(238, 151, 0, .19)
}

.modal-body .finalcheckbtn:hover {
background: #22c58b;
-webkit-box-shadow: none;
box-shadow: none
}

#addcrdinput input {
font-size: 15px !important;
font-weight: 500
}

#addcrdinput input::-webkit-input-placeholder {
color: #d7dde3
}

#addcrdinput input:-ms-input-placeholder {
color: #d7dde3
}

#addcrdinput input::-ms-input-placeholder {
color: #d7dde3
}

#addcrdinput input::placeholder {
color: #d7dde3
}

#addcrdinput .adddinput {
border: none !important
}

.reject {
background: #ffeeea !important;
color: #ff5e33;
padding: 2px 8px;
border-radius: 6px;
background: #f1f3f6;
font-size: 12px
}

.confirm {
background: #ebffe6 !important;
color: #67d634;
padding: 2px 8px;
border-radius: 6px;
background: #f1f3f6;
font-size: 12px
}

.pending {
background: #fffcf4 !important;
color: #a57700;
padding: 2px 8px;
border-radius: 6px;
background: #f1f3f6;
font-size: 12px
}

.cardname span {
font-weight: 500;
font-size: 18px
}

.cardname img {
height: 40px;
margin-right: 0 !important;
margin: 0 10px
}

.bodycard .cardnum {
font-size: 24px;
margin-top: 2rem
}

.bodycard span {
font-weight: 600;
margin-right: 14%;
margin-top: 1.3rem;
margin-bottom: 1.3rem;
display: block
}

.backlogo {
position: absolute;
left: -14%;
width: 56%;
top: 32%;
opacity: .2
}

.cardclose {
border: none;
background: #434e60;
opacity: 1;
top: -5%;
right: -3%;
color: #fff;
padding: 5px;
position: absolute;
z-index: 1;
font-size: 17px;
width: 30px;
border-radius: 50%;
height: 30px;
-webkit-transition: .3s ease;
transition: .3s ease
}

.cardclose:hover {
background: #ff5e33
}

.crdmbody {
padding: 35px 25px
}

.carddetailmodal {
margin-top: 10%
}

.carddetailmodal .modal-content {
overflow: visible !important
}

.carddetailmodal .modal-body {
overflow: hidden;
border-radius: 15px
}

.goleftcard, .gorightcard {
position: absolute;
left: -15%;
top: 39%;
padding: 16px;
border: none;
border-radius: 50%;
background: #fff;
height: 50px;
-webkit-transition: .3s ease;
transition: .3s ease;
width: 50px
}

.goleftcard:hover, .gorightcard:hover {
background: #2424da;
color: #fff
}

.gorightcard {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
left: 105%
}

.uploading, .uploaded {
-webkit-transition: .3s ease;
transition: .3s ease;
padding: 0 !important;
border: none;
background: #000
}

.uploading .captions, .uploaded .captions, .uploading button, .uploaded button {
display: none
}

.uploading .radial-progress, .uploaded .radial-progress {
position: absolute
}

.uploading .imguploaded, .uploaded .imguploaded {
display: block
}

.uploading .radial-progress, .uploaded .radial-progress {
opacity: 1;
display: block
}

.deleteimg {
display: none
}

.uploaded .radial-progress {
opacity: 0
}

.uploaded .deleteimg {
border-radius: 50%;
z-index: 2;
left: 42%;
font-size: 30px;
display: block;
padding: 24px;
position: absolute;
-webkit-transition: .3s ease;
transition: .3s ease;
color: #fff;
cursor: pointer;
top: 34%;
background: rgba(255, 255, 255, .301);
width: 80px;
height: 80px
}

.uploaded .deleteimg:hover {
background: #fff;
color: #ff5e33
}

.imguploaded {
display: none;
opacity: .5
}

.circlebar {
position: absolute;
top: 27%
}

.padding2 {
padding: 10rem !important
}

.progress2 {
width: 150px;
height: 150px;
line-height: 150px;
background: 0 0;
margin: 0 auto;
-webkit-box-shadow: none;
box-shadow: none;
position: relative
}

.progress2:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0
}

.progress2 > span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1
}

.progress2 .progress-left {
left: 0
}

.progress2 .progress-bar {
width: 100%;
height: 100%;
background: 0 0;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0
}

.progress2 .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left
}

.progress2 .progress-right {
right: 0
}

.progress2 .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
-webkit-animation: loading-1 1.8s linear forwards;
animation: loading-1 1.8s linear forwards
}

.progress2 .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: 0 0;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%
}

.progress2.blue .progress-bar {
border-color: #fff
}

.progress2.blue .progress-left .progress-bar {
-webkit-animation: loading-2 1.5s linear forwards 1.8s;
animation: loading-2 1.5s linear forwards 1.8s
}

.progress-left .progress-bar {
-webkit-animation: loading-3 1s linear forwards 1.8s;
animation: loading-3 1s linear forwards 1.8s
}

.progress-left .progress-bar {
-webkit-animation: loading-4 .4s linear forwards 1.8s;
animation: loading-4 .4s linear forwards 1.8s
}

.progress-left .progress-bar {
-webkit-animation: loading-5 1.2s linear forwards 1.8s;
animation: loading-5 1.2s linear forwards 1.8s
}

@-webkit-keyframes loading-1 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
}

@keyframes loading-1 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
}

@-webkit-keyframes loading-2 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
}

@keyframes loading-2 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
}

@-webkit-keyframes loading-3 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}
}

@keyframes loading-3 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}
}

@-webkit-keyframes loading-4 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
}

@keyframes loading-4 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
}

@media only screen and (max-width: 990px) {
.progress {
    margin-bottom: 20px
}
}

.arrow {
border: 2em solid transparent;
height: 0;
margin: 50vh auto;
width: 0
}

.arrow.down {
border-bottom: none;
border-top-color: #e5e5e5
}

.arrow.up {
border-bottom-color: #e5e5e5;
border-top: none
}

.radial-progress {
left: 37%;
top: 30%;
z-index: 1;
opacity: 0;
display: none;
width: 120px !important
}

svg.radial-progress {
height: auto;
max-width: 200px;
padding: 1em;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100%
}

svg.radial-progress circle {
fill: transparent;
stroke: #fff;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
stroke-width: 4
}

svg.radial-progress circle.incomplete {
opacity: .25
}

svg.radial-progress circle.complete {
stroke-dasharray: 219.91148575129
}

svg.radial-progress text {
fill: #fff;
text-anchor: middle
}

svg.radial-progress:nth-of-type(6n+1) circle {
stroke: #fff
}

svg.radial-progress:nth-of-type(6n+2) circle {
stroke: #fff
}

svg.radial-progress:nth-of-type(6n+3) circle {
stroke: #fff
}

svg.radial-progress:nth-of-type(6n+4) circle {
stroke: #fff
}

svg.radial-progress:nth-of-type(6n+5) circle {
stroke: #fff
}

#mobilesteps {
text-align: left;
padding-left: 0
}

#mobilesteps .radial-progress {
margin-top: 6px;
display: inline-block;
opacity: 1;
max-width: 85px
}

#mobilesteps svg.radial-progress:nth-of-type(6n+1) circle {
stroke: #2424da
}

#mobilesteps svg.radial-progress circle.incomplete {
opacity: 1;
stroke: #eee !important
}

#mobilesteps svg.radial-progress text {
fill: #333;
font-weight: 600;
text-anchor: middle;
font-size: 20px
}

#mobilesteps svg.radial-progress circle {
stroke-width: 4px
}

#loginpage .input-group-prepend {
margin-top: 4px
}

#loginpage .btn img {
margin-right: 4px
}

#loginpage input {
padding-top: 12px;
direction: ltr;
}

#signuppage input {
padding-top: 10px
}

#signuppage .input-group-prepend {
margin-top: 4px
}

#signuppage .btn img {
margin-right: 5px
}
.password-input {
}

.sms_input{
    font-size: 23px;
    font-weight: 600;
}

.persian-ltr{
    direction : rtl !important;
}