*,
:before,
:after {
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
:focus {
	outline:0
}
html,
body,
div,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
hr,
blockquote,
fieldset,
input {
	margin:0;
	padding:0;
	border:none
}
h1,
h2,
h3,
h4,
h5 {
	line-height:normal;
	font-weight:700
}
.hide-h {
	line-height:0;
	text-indent:0;
	color:transparent
}
a {
	color:#0042a0;
	text-decoration:none;
	-webkit-transition:.2s;
	-o-transition:.2s;
	transition:.2s;
	cursor:pointer
}
p {
	margin:0;
	padding:0;
	line-height:30px
}
b {
	font-weight:700
}
i {
	font-style:normal;
	font-family:ficon;
	font-size:24px
}
i:before {
	margin:0!important
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance:none;
	margin:0
}
input,
button,
textarea {
	font-family:YekanBakh
}
button {
	border:none;
	cursor:pointer
}
input {
	background:0 0;
	color:#fff
}
input[type=radio],
input[type=checkbox] {
	width:18px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border-radius:100px;
	width:18px;
	min-width:18px;
	height:18px;
	min-height:18px;
	border:2px solid #21262e;
	-webkit-transition:.3s all linear;
	-o-transition:.3s all linear;
	transition:.3s all linear;
	margin-left:5px;
	position:relative;
	cursor:pointer;
	text-align:center;
	line-height:21px;
	vertical-align:middle
}
input[type=checkbox] {
	border-radius:7px
}
input[type=radio]:active,
input[type=radio]:checked,
input[type=checkbox]:active,
input[type=checkbox]:checked {
	background-color:transparent;
	color:#fff;
	border-color:#4983d7
}
input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
	content:"";
	height:10px;
	width:10px;
	background:#4983d7;
	display:block;
	margin:2px auto;
	border-radius:3px
}
input[type=radio]:checked:before {
	border-radius:100px
}
.checkboxs label {
	margin-left:15px
}
input[type=number] {
	-moz-appearance:textfield
}
input,
select {
	font-size:inherit
}
@media screen and (device-aspect-ratio:2/3) {
	select,
	textarea,
	input[type=text],
	input[type=password],
	input[type=datetime],
	input[type=datetime-local],
	input[type=date],
	input[type=month],
	input[type=time],
	input[type=week],
	input[type=number],
	input[type=email],
	input[type=url] {
		font-size:16px
	}
}
@media screen and (device-aspect-ratio:40/71) {
	select,
	textarea,
	input[type=text],
	input[type=password],
	input[type=datetime],
	input[type=datetime-local],
	input[type=date],
	input[type=month],
	input[type=time],
	input[type=week],
	input[type=number],
	input[type=email],
	input[type=url] {
		font-size:16px
	}
}
@media screen and (device-aspect-ratio:375/667) {
	select,
	textarea,
	input[type=text],
	input[type=password],
	input[type=datetime],
	input[type=datetime-local],
	input[type=date],
	input[type=month],
	input[type=time],
	input[type=week],
	input[type=number],
	input[type=email],
	input[type=tel],
	input[type=url] {
		font-size:16px
	}
}
@media screen and (device-aspect-ratio:9/16) {
	select,
	textarea,
	input[type=text],
	input[type=password],
	input[type=datetime],
	input[type=datetime-local],
	input[type=date],
	input[type=month],
	input[type=time],
	input[type=week],
	input[type=number],
	input[type=email],
	input[type=tel],
	input[type=url] {
		font-size:16px
	}
}
::-webkit-input-placeholder {
	color:#8f959e;
	font-size:.9em
}
::-moz-placeholder {
	color:#8f959e;
	font-size:.9em
}
:-ms-input-placeholder {
	color:#8f959e;
	font-size:.9em
}
::-ms-input-placeholder {
	color:#8f959e;
	font-size:.9em
}
::placeholder {
	color:#8f959e;
	font-size:.9em
}
img[src=""],
img:not([src]) {
	visibility:hidden
}
i {
	font-size:22px
}
input[type=text],
textarea {
	color:#fff
}
input,
textarea,
select,
button {
	font-size:16px;
	-webkit-text-size-adjust:100%
}
.green {
	color:#3fe3a8!important
}
.red {
	color:#ff6594!important
}
.orange {
	color:#e8a700!important
}
.blue {
	color:#45d6f0!important
}
img {
	display:block
}
body {
	background:#0c111a;
	direction:rtl;
	font:13px/30px YekanBakh,ficon,Tahoma,Arial,sans-serif;
	font-weight:400;
	-webkit-text-size-adjust:100%;
	padding:0;
	margin:0;
	position:relative;
	color:#fff;
	min-height:100vh;
	letter-spacing:-1px
}
.btn {
	height:45px;
	padding:0 20px;
	line-height:45px;
	border-radius:100px
}
.btn .img {
	display:inline-block;
	vertical-align:middle;
	border-left:1px solid #21262e;
	padding-left:10px;
	margin-left:10px
}
.btn-blue {
	color:#fff;
	background:#0042a0
}
.btn-border {
	border:1px solid #21262e;
	background:0 0;
	color:#fff
}
.submitbtn:disabled {
	background:gray;
	opacity:.3;
	cursor:not-allowed
}
.list-input {
	margin:0 -10px;
	display:flex;
	flex-wrap:wrap
}
.input-bg {
	background:#0b0e12
}
.input-border {
	box-shadow:0 0 0 1px #21262e
}
.input-border.error {
	box-shadow:0 0 0 2px #ff4a4a
}
.input-border.valid {
	box-shadow:0 0 0 2px #239f40
}
.input-text {
	margin:10px 10px 20px;
	flex-grow:1;
	height:48px;
	display:flex;
	align-items:center;
	border-radius:10px;
	position:relative
}
.input-text input {
	padding:0 15px;
	height:100%;
	width:0;
	flex-grow:1
}
.input-text .icon {
	padding:0 10px;
	border-right:1px solid #21262e
}
.input-text .icon i {
	vertical-align:middle
}
.input-info {
	width:100%;
	text-align:right;
	color:#ffd675;
	padding:0 20px;
	font-size:12px;
	display:none
}
span.error {
	position:absolute;
	top:100%;
	font-size:11px;
	right:10px;
	color:#ff4a4a
}
input[type=checkbox].error,
input[type=radio].error {
	border-color:#ff4a4a
}
input[type=checkbox]~span.error,
input[type=radio]~span.error {
	display:none!important
}
.pinlogin {
	display:flex;
	/*! flex-wrap:wrap; */justify-content:space-around;
	direction:ltr;
	margin-bottom:20px
}
.pinlogin .pinlogin-field {
	width:0;
	color:#fff;
	border-radius:10px;
	background:#252e3e;
	text-align:center;
	font-size:20px;
	height:45px;
	flex-basis: 45px;
	flex-basis:30px;
	flex-grow:1;
	margin:10px 2px;
	max-width:45px
}
.pinlogin-error {
	display:none;
	color:#ff4a4a;
	font-size:12px
}
.showpass {
	cursor:pointer
}
.showpass.show::before {
	content:"\e8a5"
}
.rule {
	text-align:right
}
.rule-text {
	display:inline-block;
	text-align:right!important;
	color:#8f959e
}
.rule-text a {
	margin-left:4px
}
.line-gr {
	display:block;
	width:100%;
	min-height:1px;
	max-width:1200px;
	position:relative
}
.line-gr:before {
	content:"";
	position:absolute;
	display:block;
	width:100%;
	height:1px;
	width:100%;
	background:linear-gradient(270deg,rgba(49,54,64,0) 0%,#313640 49.01%,rgba(49,54,64,0) 100%);
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.line-gr span {
	padding:0 15px;
	background:#0b0e12;
	position:relative;
	z-index:1;
	color:#8f959e
}
.login-page {
	min-height:100vh
}
.login-page>div {
	flex-basis:400px;
	flex-grow:1;
	padding:40px
}
.login-info {
	background-color:#0042a0;
	background:linear-gradient(0deg,rgba(1,29,58,0.88),rgba(15,97,255,0.5)),url('28.jpg');
	background-size:cover,cover;
	background-position-x:90%;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	animation:mymove 5s infinite
}
@keyframes mymove {
	50% {
		background-size:calc(cover + 100px)
	}
}
@media(max-width:800px) {
	.login-info {
		display:none
	}
}
.login-info .logo {
	width:100%;
	max-width:200px
}
.login-info .logo img {
	width:100%;
	filter:drop-shadow(0 0 10px #081d3e)
}
.login-info .img {
	position:relative;
	right:36%;
	margin:60px 0
}
.login-info .img img {
	width:100%
}
.login-info .info {
	font-size:1.2em;
	font-weight:300
}
.login-box {
	justify-content:center;
	align-items:center;
	text-align:center
}
.login-form {
	width:100%;
	max-width:400px;
	position:relative
}
.login-form .title h2 {
	font-weight:400;
	font-size:1.6em
}
.login-form .title span {
	font-size:1.2em;
	font-weight:300;
	color:#8f959e
}
.login-form .title span strong {
	color:#fdbe43
}
.resendcode {
	margin-top:20px;
	color:#8f959e
}
.resendcode .timer {
	margin:0 5px;
	color:#ffc045
}
#resendCode {
	background:0 0;
	color:#0042a0;
	display:none;
	margin:20px auto 0;
	font-size:.9em
}
.loginback {
	background:0 0;
	color:#8f959e;
	font-size:.9em;
	display:block;
	margin:10px auto 0
}
.loginback i {
	vertical-align:middle;
	font-size:16px
}
.alert {
	padding:20px;
	border-radius:10px
}
.alert-text {
	margin-right:5px
}
.alert-green {
	background:rgba(35,159,64,.2);
	border:1px solid rgba(35,159,64,.5);
	color:#239f40
}
.alert-orange {
	background:rgba(255,193,47,.2);
	border:1px solid rgba(255,168,75,.5);
	color:#d9881f
}
.alert-red {
	background:rgba(159,35,35,.2);
	border:1px solid rgba(159,35,35,.5);
	color:#bf2626
}
.select-box {
	position:relative;
	flex-basis:200px;
	flex-grow:1;
	cursor:pointer;
	margin:10px 0 20px;
	box-shadow:0 0 0 1px #21262e;
	border-radius:10px;
	height:48px
}
.select-box.error {
	box-shadow:0 0 0 1px #ff4a4a,0 0 15px rgba(255,74,74,.4)
}
.select-box.valid {
	box-shadow:0 0 0 1px #239f40,0 0 15px rgba(35,159,64,.37)
}
.select {
	display:flex;
	align-items:center;
	padding:10px;
	height:100%;
	position:relative
}
.select .img {
	height:24px;
	width:24px;
	min-width:24px;
	overflow:hidden;
	margin-left:5px
}
.select .img img {
	width:100%;
	height:100%;
	display:block;
	object-fit:cover
}
.select-input {
	width:100%;
	cursor:pointer;
	text-align:right
}
.select .icon i {
	font-size:18px
}
.select-list {
	position:absolute;
	z-index:4;
	border-radius:10px;
	background:#0b0e12;
	width:100%;
	top:calc(100% + 10px);
	display:none;
	max-height:40vh;
	box-shadow:0 0 30px rgba(0,0,0,.1),0 0 0 1px #21262e
}
.select-option {
	display:flex;
	align-items:center;
	padding:10px 15px;
	cursor:pointer;
	color:#fff
}
.select-option.active {
	background:#1b2431;
	font-weight:700
}
.select-option:hover {
	background:#1b2431
}
.select-option .icon {
	height:24px;
	width:24px;
	display:block;
	overflow:hidden;
	margin-left:5px
}
.select-option .icon img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block
}
.select-option .symbol {
	margin-right:10px;
	color:#8f959e
}
.checked-list {
	display:flex;
	text-align:center
}
.checked-item {
	background:#171f2f;
	margin:5px;
	height:48px;
	line-height:48px;
	border-radius:10px;
	color:#fff
}
.checked-item.active {
	background:#0042a0
}
.app-header {
	position:fixed;
	bottom:20px;
	z-index:12;
	width:90%;
	max-width:600px;
	padding:10px;
	left:0;
	right:0;
	margin:0 auto;
	background:#fff;
	border-radius:10px;
	box-shadow:0 0 20px rgba(0,0,0,.3);
	color:#777
}
@media(min-width:1024px) {
	.app-header {
		display:none!important
	}
}
.app-header .icon {
	height:40px;
	width:40px;
	overflow:hidden;
	border-radius:10px
}
.app-header .icon img {
	width:100%;
	height:100%
}
.app-header .info {
	line-height:20px;
	margin-right:10px;
	color:#444
}
.app-header .add-to-home-screen {
	background:#f4f4f4;
	padding:0 10px;
	border-radius:10px;
	color:#2174ea;
	font-size:1.1em
}
.install-info {
	border-top:1px solid #eee;
	margin-top:10px
}
.captcha-img img {
	height:100%;
	width:100%
}
.login-qr {
	padding:15px;
	background:#fff;
	border-radius:5px
}
#loginQrcode {
	position:relative
}
#loginQrcode .qr-logo {
	height:30px;
	width:30px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	padding:2px;
	border-radius:4px
}
#loginQrcode .qr-logo img {
	width:100%
}
.refresh-box {
	position:absolute;
	background:rgba(255,255,255,.9);
	backdrop-filter:blur(2px);
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#444;
	text-align:center;
	display:none
}
.refresh-box .btn {
	font-size:1em;
	border-radius:10px;
	height:36px;
	line-height:36px
}
.refresh-box .btn i {
	font-size:18px;
	vertical-align:middle
}
.loadbox {
	position:absolute;
	left:0;
	right:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgba(255,255,255,.95);
	backdrop-filter:blur(2px);
	z-index:1;
	flex-direction:column;
	color:#444;
	text-align:center
}
.loader {
	border:3px solid rgba(172,172,172,.24);
	border-left-color:#e44c7a;
	border-radius:50%;
	margin-bottom:10px;
	width:50px;
	height:50px;
	display:inline-block;
	animation:spin 1s ease-in-out infinite;
	vertical-align:middle
}
@keyframes spin {
	from {
		transform:rotate(0deg)
	}
	to {
		transform:rotate(360deg)
	}
}