body{
	background: #f9faff;
	position: relative;
}
main{
	margin-top: 70px;
}
.login-back{
	width: 1050px;
	height: 383px;
	background: url('../svg/login-back.svg') no-repeat right top;
	background-size: contain;
	top: 0;
	left: 50%;
	margin-left: -525px;
	position: absolute;
	z-index: -1;
}
.brand{
	width: 300px;
	outline: none;
}
.brand-logo{
	width: 100px;
}
.brand-logo::before{
	margin-top: 2px;
    margin-right: 76px;
	width: 25px;
    height: 8px;
	-webkit-animation-name: brandlogobefore2;
    animation-name: brandlogobefore2;
}
@-webkit-keyframes brandlogobefore2 {
	0%   {width: 25px;}
	50%  {width: 10px;}
	100% {width: 25px;}
}
.brand-logo::after{
	margin-top: 23px;
    margin-right: 90px;
    height: 8px;
}
.brand h3{
	margin-top: -4px;
	font-size: 35px;
}
.brand h4{
	font-size: 14.25px;
	font-weight: 500;
}
.main-box{
	width: 100%;
	float: right;
	margin-top: 40px;
}
#sendcode{
	display: none;
}
.login-box{
	border: 2px solid rgb(245, 245, 245);
	border-radius: 4px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.03);
	width: 35%;
	margin: auto;
	padding: 3% 2%;
	position: relative;
}
@media screen and (max-width: 800px){
	.login-box{
		width: 100%;
	}
}

.login-box h2{
	font-size: 22px;
	margin-top: 0;
}
.bottom-line-center{
	margin-bottom: 20px;
}
.login-box form{
	width: 100%;
    display: inline-block;
}
.login-box form input::placeholder,.form-input-class input::placeholder{
	opacity: 0.2;
}
.login-box form input{
	text-align: left;
	width: 90%;
	float: right;
	line-height: 45px;
	border-radius: 4px 0 0 4px;
	padding-right: 0;
	border-right: none !important;
	direction: ltr;
}
#termsok{
    text-align: left;
    width: 100%;
    right: 0;
    position: absolute;
    height: 50px;
    border-radius: 4px 0 0 4px;
    padding-right: 0;
    border-right: none !important;
    direction: ltr;
}
#dontforget{
    text-align: left;
	width: 100%;
	right: 0;
	position: absolute;
	line-height: 45px;
	border-radius: 4px 0 0 4px;
	padding-right: 0;
	border-right: none !important;
	direction: ltr;
}
.login-box form i{
	float: right;
	width: 10%;
	border:  1px solid #818a91;
	border-left: none;
	box-sizing: border-box;
	height: 42px;
	border-radius: 0 4px 4px 0;
	background: url(../svg/form-icons.png);
    background-size: 134px 22px;
    background-repeat: no-repeat;
}
.form-icon-phone{
    background-position: -99px 11px !important;
}
.form-icon-user{
	background-position: -5px 12px !important
}
.form-icon-password{
	background-position: -35px 12px !important
}
#firstname{
	text-align: right !important;
	direction: rtl !important;
}
#lastname{
	text-align: right !important;
	direction: rtl !important;
}
.resend{
	text-align: center;
	cursor: pointer;
	color: #457fff;
}
.login-buttons{
	width: 100%;
	float: right;
	padding: 15px 0;
	text-align: center;
}
.g-recaptcha{
	width: 100%;
	float: right;
}
.login-box form span{
	font-size: 14px;
	font-weight: 500;
}
.login-box form span a{
	float: left;
	color: #457fff;
	transition: all .5s;
}
.login-box form span a:hover{
	color: #1658c5;
}
.checkbox{
	margin-bottom: 0;
	position: relative;
	width: auto;
	float: right;
}
.checkbox span{
	width: auto;
	float: right;
	margin-right: 5px;
	margin-top: -2px;
}
.checkbox span a{
	float: none !important;
	position: relative;
	z-index: 101;
}
.buttons{
	margin-top: 10px;
}
.checkbox input {
	position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    float: right;
	height: 20px;
    z-index: 100;
}
.checkmark {
	position: relative;
	float: right;
	height: 20px !important;
	width: 20px !important;
	background-color: rgb(245,245,245);
	border-radius: 4px;
	transition: all .5s;
}
.checkbox:hover input ~ .checkmark {
  background-color: rgb(225,225,225);
}
.checkbox input:checked ~ .checkmark {
  background-color: rgb(70,126,255);
}
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox input:checked ~ .checkmark:after {
  display: block;
}
.checkbox .checkmark::after {
  right: 7px;
  top: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.register-link{
	margin-top: 25px;
	padding-top: 25px;
	padding-bottom: 15px;
	border-top: 2px solid rgb(245,245,245);
	width: 100%;
}
.register-link span{
	font-size: 15px;
	color: rgb(139, 164, 192);
	text-align: center;
	width: 100%;
	float: right;
	font-weight: 500;
}
.register-link span a{
	color: #457fff;
	transition: all .5s;
}
.register-link span a:hover{
	color: #1658c5;
}
footer .wrap{
	margin-top: 80px;
	border-top: 2px solid rgb(245,245,245);
}
.footer-list{
	width: 100%;
	margin: 30px auto;
	float: right;
}
.first-login-menu{
	margin-right: 0 !important;
}
.footer-list ul{
	margin: auto;
	width: 50%;
}
.footer-list ul li{
	list-style: none;
	float: right;
	margin-right: 8%;
}
.footer-list ul li a{
	float: right;
	color: rgb(139, 164, 192);
	font-size: 15px;
	font-weight: 500;
	transition: all .5s;
}
.footer-list ul li a:hover{
	color: #000;
}
.copyright{
	margin-top: 10px;
}