@font-face {
    font-family: light;
    src: url(../fonts/light.eot);
    src: url(../fonts/light.eot?#iefix) format('embedded-opentype'), url(../fonts/light.otf) format('otf'), url(../fonts/light.svg#light) format('svg'), url(../fonts/light.ttf) format('truetype'), url(../fonts/light.woff) format('woff'), url(../fonts/light.woff2) format('woff2')
}

@font-face {
    font-family: regular;
    src: url(../fonts/regular.eot);
    src: url(../fonts/regular.eot?#iefix) format('embedded-opentype'), url(../fonts/regular.otf) format('otf'), url(../fonts/regular.woff2) format('woff2'), url(../fonts/regular.woff) format('woff'), url(../fonts/regular.ttf) format('truetype'), url(../fonts/regular.svg#regular) format('svg')
}

@font-face {
    font-family: bold;
    src: url(../fonts/bold.eot);
    src: url(../fonts/bold.eot?#iefix) format('embedded-opentype'), url(../fonts/bold.otf) format('otf'), url(../fonts/bold.svg#bold) format('svg'), url(../fonts/bold.ttf) format('truetype'), url(../fonts/bold.woff) format('woff'), url(../fonts/bold.woff2) format('woff2')
}

@font-face {
    font-family: extra-bold;
    src: url(../fonts/extra-bold.eot);
    src: url(../fonts/extra-bold.eot?#iefix) format('embedded-opentype'), url(../fonts/extra-bold.otf) format('otf'), url(../fonts/extra-bold.svg#extra-bold) format('svg'), url(../fonts/extra-bold.ttf) format('truetype'), url(../fonts/extra-bold.woff) format('woff'), url(../fonts/extra-bold.woff2) format('woff2')
}

.toastify.on {
    font-family: regular
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

::placeholder {
    color: #696969;
    opacity: 1
}

::-ms-input-placeholder {
    color: #696969
}

.light-font {
    font-family: light, serif
}

.regular-font, input {
    font-family: regular, serif
}

.bold-font {
    font-family: bold, serif
}

.extra-font {
    font-family: extra-bold, serif
}

.big-font {
    font-size: 1.5em
}

.medium-font {
    font-size: 1em
}

.small-font {
    font-size: .8em
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

:root {
    --box-border-radius: 15px;
    --big-font-size: 1.5em;
    --small-font-size: 0.75em;
    --hint-font-size: 0.7em
}

body {
    font-size: 16px;
    direction: rtl;
    background: var(--dashboad-bg-color)
}

* {
    border: none;
    outline: 0;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    color: var(--link-color)
}

.ltr {
    direction: ltr
}

label {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    margin: 10px 0;
    position: relative
}

.loading-spinner {
    width: 20px;
    animation: 1s linear infinite spin;
    fill: #7f8c8d;
    display: none;
    margin-left: 5px
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

.submit-btn:disabled {
    background-color: var(--disable-btn-bg-color);
    color: var(--disable-btn-color);
    cursor: not-allowed
}

input {
    border: 1px solid var(--input-border-color);
    background: var(--input-bg-color);
    border-radius: 10px;
    color: var(--input-label-color);
  	transition: all .3s;
}

input:focus {
    border-color: var(--primary-shadow); 
}

input:focus + .input-icon svg {
    fill: var(--primary-color);
}

input:disabled, input[type=submit]:disabled {
    background: var(--disable-input-bg-color);
    border: 1px solid var(--disable-input-border-color);
    color: var(--disable-input-text-color)
}

#phone_number:disabled + .input-icon svg {
    fill: var(--disable-input-text-color)
}

input[type=submit]:disabled {
    background: var(--disable-btn-bg-color);
    color: var(--disable-btn-color)
}

.login-1 .otp span,.login-2 .otp span, label span {
    color: var(--input-label-color)
}

input[type=password], input[type=text] {
    padding: 15px 10px 15px 50px
}

button[type=submit], input[type=submit] {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--primary-color);
    font-family: bold, serif;
    font-size: .9em;
    color: var(--btn-text-color);
    border-radius: 10px;
    margin-top: 20px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .3s;
    padding: 15px 10px
}

input[type=submit]:hover {
    box-shadow: 0 5px 15px var(--primary-shadow)
}

input[type=submit]:disabled:hover {
    box-shadow: none
}

label .input-icon {
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 50px;
    height: 50px;
    border-radius: 10px 0 0 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    align-items: center
}

label .input-icon img {
    width: 17px
}

label .input-icon svg {
    fill: #6a6a6a;
    width: 18px
}

label span {
    margin: 0 0 10px
}

.pointer, button {
    cursor: pointer
}

.anime {
    transition: .3s
}

.login-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-box-left{
 max-width:400px;max-height:500px 
}
.login-box-left img{
 width:100% 
}
.login-box-right{
 width:350px;display:flex;align-items:center;flex-direction:column 
}
.login-2{
 	width:768px !important;flex-direction:row  !important;justify-content:space-between  !important;align-items:center  !important; 
}
.login-2 .login-box-left img{
 	display:block !important; 
}
.login-1 .login-box-left img{
 	display:none !important; 
}

.login-box .bottom-links {
    display: flex;
    justify-content: center;
    width: 100%
}

.login-box .bottom-links a {
    margin-top: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed #696969
}

.login-box .bottom-links a:hover {
    color: var(--login-link-hover-color)
}

.login-form-1, .login-form-2 {
    width: 100%;
    margin-top: 20px
}

.login-form-1 input::placeholder, .login-form-2 input::placeholder {
    text-align: right
}

.login-1 {
    width: 350px;
    padding: 20px;
    border: 1px solid var(--box-border-color);
    border-radius: var(--box-border-radius);
    background: var(--box-color);
    display: flex;
    flex-direction: column;
    align-items: center;
  	position:relative;
}
.shahkar_auth_step{
 	display:flex;
  	align-items:center;
  	flex-direction:column;
  	width:100%;
}
.shahkar_auth_step{
	display:none;
}

.shahkarBackBtn, .shahkarBackBtn svg{
  color:var(--input-label-color) !important;
  fill: var(--input-label-color) !important;
}
.shahkarBackBtn{
  background: none;
  border: none;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: 'bold';
  margin-top: 15px;
  cursor: pointer;
  opacity: .5;
  width:100%;
  justify-content:end;
}
.shahkarBackBtn svg {
    width: 15px;
  	margin-right: 7px;
}
.shahkar_auth_resend_code_box{
 	width:100%;display:flex;justify-content:space-between;align-items:center;margin:20px 0 
}
.shahkar_auth_resend_code_btn{
  border:1px solid var(--primary-color);border-radius:50px;padding:5px 7px;cursor:pointer;color:var(--primary-color);font-family:bold;font-size:12px;background:transparent;
}
.shahkar_auth_resend_code_btn:hover{
 	background: var(--primary-color);
  	color:white;
}
.shahkar_auth_resend_code_btn:disabled{
	background:#696969 !important;
  	color:#121212;
  	opacity:.2;
  	border:1px solid transparent;
}
.shahkar_auth_resend_code_timer{
 color:var(--input-label-color);font-family:regular;font-size:13px 
}
.shahkarAuthPopupLoginWays {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    gap: 10px;
    padding: 10px 0;
}

.shahkarAuthPopupLoginWays a {
    text-align: center;
    flex: 1;
    font-size: 13px;
    text-decoration: none;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 5px;
  	color:var(--input-label-color);
  	border: 1px solid var(--login-with-google-border-color);
  	font-family:'bold';
}
.shahkarAuthPopupLoginWays a svg {
    width: 20px;
    margin-left: 7px;
  	fill:var(--black-icon);
  	opacity:.5;
}

.shahkarAuthPopupLoginWays a:hover {
    border:1px solid rgba(200,200,200,.3);
}


.login-1 .website-logo img,.login-2 .website-logo img {
    max-width: 120px;
    margin-bottom: 30px
}

.login-1 .login-title, .login-2 .login-title {
    color: var(--primary-color)
}

.login-1 .login-hint, .login-2 .login-hint {
    color: var(--hint-color);
    font-size: .8em;
    margin-top: 5px
}

.login-1 .login-way, .login-2 .login-way {
    color: var(--login-way-text-color);
    font-size: var(--hint-font-size)
}

.centered-lines {
    width: 100%;
    text-align: center;
    font-family: Arial, sans-serif
}

.line {
    display: inline-block;
    width: 50px;
    height: 1px;
    margin: 2px 0;
    background: var(--break-line-color)
}

.login-with-google {
    display: flex;
    justify-content: center;
    width: 100%;
    border: 1px solid var(--login-with-google-border-color);
    margin: 15px 0;
    color: var(--login-with-google-text-color);
    border-radius: 10px;
    padding: 15px 0
}

.login-with-google, input {
    font-size: var(--small-font-size)
}

.shahkar_other_login_way{
 	width: 100%;
  display: flex;
  justify-content: space-between; 
  gap: 10px;
}

.shahkar_other_login_way > .way {
  width: 100%;
  flex: 1;
  align-items:center;
}
.shahkar_other_login_way svg{
 	fill:var(--black-icon); 
}

.shahkar_auth_loader {
    -webkit-animation: spin .5s linear infinite;
    animation: spin .5s linear infinite;
    border:5px solid var(--primary-color-bg-wave);
    border-top-color: var(--primary-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-bottom: 10px;
}

.shahkar_auth_loader_cover {
    position: absolute;
  	border-radius:var(--box-border-radius);
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    bottom: 0;
    background: var(--box-color);
    z-index: 99999;
}


.login-with-google:hover {
    border-color: var(--login-with-google-hover-border-color)
}

.login-with-google img, .login-with-google svg {
    margin-left: 8px;
    width: 20px;
    height: 20px;
}

.login-2 {
    width: 750px;
    padding: 20px;
    border: 1px solid var(--box-border-color);
    border-radius: var(--box-border-radius);
    background: var(--box-color);
    display: flex;
    align-items: center;
  	position:relative;
}

.login-2-left, .login-2-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.login-2-left img {
    width: 350px;
    margin-right: 20px
}

.login-1 .otp,.login-2 .otp {
    display: flex;
    flex-direction: column
}

.resend-btn {
    display: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 30px;
    font-size: .7em;
    font-family: bold, serif;
    background: 0 0;
    padding: 5px 10px
}

.resend-btn:hover {
    background: var(--primary-color);
    color: #fff
}

.login-1 .otp .resend-otp ,.login-2 .otp .resend-otp {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.login-1 .otp span,.login-2 .otp span {
    margin: 0
}

.login-1 .otp .otp-inputs,.login-2 .otp .otp-inputs {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between
}

.login-1 .otp .otp-inputs input ,.login-2 .otp .otp-inputs input {
    font-size: 1em;
    width: 50px;
    height: 50px;
    text-align: center;
    font-family: extra-bold, serif
}

.login-1 .otp .otp-inputs input::placeholder,.login-2 .otp .otp-inputs input::placeholder {
    text-align: center
}

.shahkar-change-language-box{
    cursor: pointer;
    display: flex;
    margin-top: 20px;
    border-radius: 15px;
    width:calc(100% - 20px);
    font-size:13px;
    align-items:center;
    font-family: 'extra-bold';
    justify-content:space-between;
    background:white;
    background:var(--input-bg-color);
    color: var(--input-label-color);
    padding: 5px 10px;
}
.shahkar-change-language-item{
    display:inline-flex;align-items:center;  padding: 10px 5px;cursor:pointer;opacity:.5;
}
.shahkar-change-language-item:hover{
    opacity:1 !important;
}
.shahkar-change-language-item span{
    margin-left:7px;
}
.shahkar-change-language-item svg{
    width:20px;
    height:20px;
}

.shahkar-wave-box, .shahkar-wave-box-mobile {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;

}

.shahkar-wave-box {
    bottom: 0;
}

.shahkar-wave-box-mobile {
    transform: rotate(180deg);
    top: 0;
}

.shahkar-wave-box-mobile {
    display: none;
}

.shahkar-wave-box svg, .shahkar-wave-box-mobile svg {
    position: absolute;
    bottom: 0
}

.shahkar-wave-box svg path, .shahkar-wave-box-mobile svg path {
    fill: var(--primary-color) !important;
    position: absolute;
    bottom: 0
}

@media screen and (max-width: 768px) {
    .shahkar-wave-box-mobile {
        display: block;
    }
}



@media screen and (max-width: 768px) {
    .login-box {
        align-items: normal;
        min-height: auto
    }

    .login-1, .login-2,.login-box-right {
        width: 100% !important;
        border: none;
        border-radius: 0;
        max-height: 100vh;
      	height: calc(100vh - 40px);
      	justify-content:center;
    }
  	.shahkar_auth_loader_cover{
    	border-radius:unset;  
  	}

    .login-2 .login-2-left,.login-box-left {
        display: none
    }

    .login-1 .login-hint, .login-2 .login-hint {
        text-align: center
    }

    .centered-lines .line {
        width: 30px
    }
}