@import url("theme.css");
html{
	background-color: var(--theme-page-bg, #EEF0F3);
	height:100%;
}

body{
	font:14px/1.5 Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	background-color: var(--theme-page-bg, #EEF0F3);
	min-height:100%
}

.swal-button{
 	background-color: var(--theme-btn-bg, #35498A);
}
.swal-button:not([disabled]):hover{
	background-color: var(--theme-hover, #29BB8A);
}
.swal-button:not([disabled]):active{
	background-color: var(--theme-active, #43BE95);
}
.swal-button--cancel{
  background-color: #EFEFEF;
}
.swal-button--cancel:not([disabled]):hover{
	background-color: #ECE9E9;
}
.swal-button--cancel:not([disabled]):active{
	background-color: #E8E8E8;
}

.form ul li a:hover {
    opacity: 1;
}

.form ul li{
    display: inline-block;
    height: 48px;
    width: 400px;
    padding: 0;
    
}

.main-content{
    margin-bottom: 75px;
}

/*-----Start CSS for Forms-----------------*/
.form{
    max-width: 460px;
    margin: 0 auto;
    padding: 50px;
    box-sizing: border-box;
	border-radius: 30px;
    background-color:  #ffffff;
    border-radius: 34px;
    box-shadow: 0px 0px 4px 1px #C2C2C2;
    font: bold 14px sans-serif;
    text-align: center;
}

.formcenter{
    max-width: 550px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
	border-radius: 30px;
    background-color:  #ffffff;
    border-radius: 34px;
    box-shadow: 0px 0px 4px 1px #C2C2C2;
    font: 14px sans-serif;
}

/*---------For login page and register page------------*/
.form .form-title-row{
    text-align: left;
    margin-bottom: 25px;
}
    
/* The form title */
 
.form h1{
    display: inline-block;
    box-sizing: border-box;
    color:  var(--theme-dark, #019947);
    font-size: 20px;
    padding: 0 10px 15px;
    /*border-bottom: 2px solid #6caee0;*/
    margin: 0;
 }

.form h2{
    display: inline-block;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0 10px 15px;
    /*border-bottom: 2px solid #6caee0;*/
    margin: 0;
}

.form .text-white{
	color: #fff !important;
}

.form .text-center
{
	text-align:center!important
}

div .btn{
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%);
	height: 54px;
  	padding-left: 30px;
  	padding-right: 30px;	
  	font-weight: bold;
  	border-radius: 30px;
	display: lock;
	width: 100%;	
	margin-top: 15px;
	background-color:var(--theme-btn-bg, #35498A);
	border-color:var(--theme-primary, #00BF58);
	color: #fff !important;
	border: 0px;
}
div .btn:hover{color:#fff;background-color:var(--theme-hover, #29BB8A);border-color:var(--theme-border, #27B183)}
div .btn:focus{-webkit-box-shadow:0 0 0 0.2rem var(--theme-focus, rgba(53, 185, 141, 0.5));box-shadow:0 0 0 0.2rem var(--theme-focus, rgba(53, 185, 141, 0.5))}
div .btn:disabled, div .btn[disabled]{background-color:#cccccc !important;border-color:#cccccc !important;color:#666666 !important;cursor:not-allowed !important;}
div .btnmini{
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%);
  	border-radius: 20px;
	display: lock;
	width: 94%;	
	background-color:var(--theme-btn-bg, #35498A);
	border-color:var(--theme-primary, #00BF58);
	color: #fff !important;
	border: 0px;
	max-width: 100px;
	min-height: 34px;
	min-width: 76px;
	margin-right: 20px;
}
div .btnmini:hover{color:#fff;background-color:var(--theme-hover, #29BB8A);border-color:var(--theme-border, #27B183)}
div .btnmini:focus{-webkit-box-shadow:0 0 0 0.2rem var(--theme-focus, rgba(53, 185, 141, 0.5));box-shadow:0 0 0 0.2rem var(--theme-focus, rgba(53, 185, 141, 0.5))}

.form ul li a:hover {
    opacity: 1;
}

.form .form-row > label span{
    display: inline-block;
    box-sizing: border-box;
    color: #5F5F5F;
    width: 180px;
    text-align: right;
    vertical-align: top;
    padding: 12px 25px;
}

.form input{
    color:  #5f5f5f;
    box-sizing: border-box;
    width: 360px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 12px;
    border: 1px solid #dbdbdb;
}

.form-input{
	float: left;
	width:100%;
    height: 50px;
    margin: 0;
    padding: 15px;
    font-size: 16px;
    font-family: 'Abel', sans-serif;
    color: #5E6472;
    outline: none;
	border: 1px solid #dbdbdb;
	border-radius:.25rem;
	display:block;
	line-height:1.5;
	background-color:#fff;
	background-clip:padding-box;
	transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.form-input:disabled{
	border: 1px solid #dbdbdb;
}
.form-group{margin-bottom:0;margin-top:-1px}
.form-group .form-input{border-radius:0;}
.form-account .form-group:first-child .form-input{border-top-left-radius:10px!important;border-top-right-radius:10px!important}
.form-account .form-group:last-child .form-input{border-bottom-left-radius:10px!important;border-bottom-right-radius:10px!important}

.field-icon {
  float: right;
  margin-left: -100px;
  margin-top: 10px;
  padding-right:10px;
  position: relative;
  font-size: 2em;
  color: var(--theme-primary, #00BF58);
  z-index: 2;
}

/*For title 'Forgot password' */						
.form .small-title {
  color: #b3b3b3;
  font-size: 12px;
}
.form .small-title a {
  margin-top: 15px;
  color: var(--theme-link, #4CAF50);
  text-decoration: none;
  float: right;
}
.form .small-title a:hover {
  color: var(--theme-dark, #019947);
}		

/*----icon FB, Google, Apple-------------------*/
.flex-c-m {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	margin-bottom: 0;
}

.flex-c-m a {
  font-size: 25px;
  color: #fff;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-left: 12px;
  margin-right: 12px;
}
/*-----[ Social item ]-----*/
.login100-social-item {
  font-size: 25px;
  color: #fff;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
}
.login100-social-item:hover {
  color: #fff;
  background-color: #333333;
}
/*background image <a> */

.bg1 {
	background: url(../img/logo-facebook.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.bg2 {
	background: url(../img/logo-google.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.bg3 {
	background: url(../img/logo-apple.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.bg4 {
	background: url(../img/logo-quick.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.bg5 {
	background: url(../img/logo-steam.png);
	background-size: contain;
	background-repeat:no-repeat;
}
.bg6 {
	background: url(../img/logo-steam-sign-in.png);
	background-size: contain;
	background-repeat:no-repeat;
	flex-basis:114px;
}
.bg7 {
	background: url(../img/logo-tiktok.png);
	background-size: contain;
	background-repeat:no-repeat;
}
@media screen and (max-width: 600px){
    .form{padding: 30px;border-radius: 35px; margin: 30px}
}
@media screen and (max-width: 500px), 
       screen and (max-height: 600px) {
    .form{padding: 20px;border-radius: 30px; margin: 20px}
    .form input{width: 100%;}
    .form .form-row{
        margin: 25px auto;
        text-align: left;
    }
    .form .form-title-row{
        margin-bottom: 50px;
    }
    .form .form-row > label span{
        display: block;
        text-align: left;
        padding: 0 0 15px;
    }
    .form button{
        margin: 0;
    }
	.flex-c-m a {
	  margin-top: 22px;
	}
}
@media screen and (max-width: 470px){
    .form{padding: 18px;border-radius: 25px; margin: 18px}
}
@media screen and (max-width: 440px){
    .form{padding: 16x;border-radius: 20px; margin: 16px}
}
@media screen and (max-width: 410px){
    .form{padding: 14px;border-radius: 15px; margin: 14px}
}
@media screen and (max-width: 380px){
    .form{padding: 12px;border-radius: 10px; margin: 12px}
}	   
@media screen and (max-width: 350px){
    .form{padding: 10px;border-radius: 5px; margin: 10px}
}