button {
  margin-top: 10px;
}
.full-width {
  width: 100%;
}
::ng-deep mat-form-field.ng-invalid.ng-touched .mat-input-underline {
  border-color: red;
}
::ng-deep mat-hint.error, .error {
  color: red;
}
.hide{
	display: none;
}

/*Login page*/
.logininner .card .row{margin: 0 }
.logininner .withsocial, .logininner .col-xs-12{ padding: 30px }
.heading{ font-size: 24px; font-family:'hindlight'; line-height: 1.2 }

.form-group{position:relative;margin-top:35px;margin-bottom:30px;}
.form-group .control-label{position:absolute;top:4px;pointer-events:none;padding-left:2px;z-index:1;font-size:14px;font-weight:normal;transition:all 0.28s ease;font-family:'hindmedium'}
.form-group .bar{position:relative;border-bottom:1px solid;display:block;}
.form-group .bar::before{content:'';height:2px;width:0;left:50%;bottom:-1px;position:absolute;transition:left 0.28s ease, width 0.28s ease;z-index:2;}
.form-group input{display:block;background:none;padding:2px 2px 1px;font-size:14px;border-width:0;border-color:transparent;line-height:1.9;width:100%;transition:all 0.28s ease;box-shadow:none;}
.form-group input:focus ~ .control-label,.form-group input:valid ~ .control-label{font-size:11px;color:gray;top:-16px;left:0;}
.form-group input:focus{outline:none;}
.form-group input:focus ~ .bar::before{width:100%;left:0;}
.logininner .formfield{ padding: 0 }
.logininner .formfield label{ font-size: 14px; font-family: 'hindmedium' }
.logininner .auth-btn{ line-height: 16px; display: block; font-size: 18px; font-family: 'hindregular'; padding: 18px 0; color: white;}
.loginlink > div{ padding: 0; line-height: 1.6}
.loginlink > div:nth-child(2){ text-align: right; }
.loginlink a{ display: inline-block; border-bottom: 1px solid; line-height: 15px; font-family: 'hindmedium'}

.logininner .withsocial h3{ font-size: 18px; line-height: 22px; margin-bottom: 40px;}
.logininner .withsocial h3:before{ display: none; }
.withsocial a{ display: block; margin-bottom: 20px }

/*Signup*/
.loginlink a.forgot{ font-size: 12px; border-bottom:1px solid transparent; }
.signupfree{ font-size: 12px; padding: 10px 0 }
#firebaseui-auth-container{
	margin-left: -23px;
	margin-top: 23px;
	width: 100%;
}

.startgame {
	min-width: 190px;
	height: 39px;
	width: 98%;
	border-radius: 4px;
	font-size: 17px;
	font-weight: 600;
	margin-top: 0px;
}

.emailLogin{
	width: 98%;
	height: 45px;
	background-color: #db4437;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	display: flex;
	border-radius: 4px;
	position: relative;
	border-top: 2px solid rgb(193, 90, 81);
    box-shadow: inset 0 0px 0px 0px rgb(255,255,255), inset 0 0px 1px 1px rgba(191, 99, 91, 0.75);
}

.emailLogin:hover{
	opacity: 0.7;
}

.phoneLogin{
	position: relative;
	width: 98%;
	height: 45px;
	background-color: #02bd7e;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	display: flex;
	border-radius: 4px;
	border-top: 2px solid #07ad23;
	box-shadow: inset 0 0px 0px 0px white, inset 0 0px 1px 1px rgb(2, 189, 126);
}

.phoneLogin:hover{
	opacity: 0.7;
}

.phone-login-layout{
	min-height: 250;
}
.loginText{
	line-height: 27px;
  padding-left: 39px;
}

.loginImage{
	line-height: 10px;
}

.email-login-divider {
	border-right: 1px solid #bb3a2f;
	height: 35px;
	position: absolute;
	top: 0px;
	left: 54px;
	box-shadow: 1px 0px #ce554b;
	border-image: linear-gradient(to bottom, rgba(199, 92, 92, 0) 0%, rgb(171, 45, 45) 48%, rgba(0, 0, 0, 0) 100%);
	border-image-slice: 1;
}

.email-dividier{
	top: 0;
	background-color: #bb3a2f;
	height: 70%;
	width: 1;
	border-left-color: #bb3a2f;
	border-left-width: 2;
	border-left-width: 1;
	padding-bottom: 50;
	padding-top: 0;
}

.phone-dividier{
	top: 0;
	background-color: #0b9e6e;
	height: 70%;
	width: 1;
	border-left-color: #039c69;
	border-left-width: 2;
	border-left-width: 1;
	padding-bottom: 50;
	padding-top: 0;
}


.phone-login-divider {
	border-right: 1px solid #399809;
	height: 35px;
	position: absolute;
	top: 0px;
	left: 54px;
	box-shadow: 1px 0px #55c7adeb;
	border-image: linear-gradient(to bottom, rgba(199, 92, 92, 0) 0%, #08a270  48%, rgba(0, 0, 0, 0) 100%);
	border-image-slice: 1;
}

.search-box {
  border-width: 2px;
  border-radius: 5;
  border-color:rgb(187, 187, 187);
  margin: 15;
  padding-bottom: 5;
}
.list-group{
  width:100%;
}
.list-name {
  font-size: 12;
  display: block;
}
.country {
  font-size: 20;
  vertical-align: center;
}
.no-border{
	border: none;
}

@media screen and ( min-width:767px){
	//.landinginner, .logininner{ position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding:0 }
	.landinginner img{  height:auto; }
	.landinginner p{ font-size: 48px; line-height: 58px }
	.landinginner .auth-btn, .logininner .auth-btn{ width: 217px; margin: 35px 10px; }
	.ladding-copyr{ position: absolute; bottom: 30px; width: 100% }
	.logininner .auth-btn{ margin: 35px 0 25px; }

	.signupinner .auth-btn{ display: block; margin: 35px auto 25px;}
	.heading{ font-size: 30px;}
}
@media screen and ( min-width:1000px){
	/*loginpage*/
	.logininner{  width: 800px; right: 0; margin: auto;  }
	.logininner .withsocial, .logininner .col-sm-7.col-xs-12{ display: table-cell; float: none; }
	.loginlink a:hover{ border-bottom:1px solid transparent; }
	.signupinner{width: 405px;}
}
a {
  cursor: pointer;
}
.hide {
  display: none;
}
.logininner input {
	background-color: transparent;
}

.auth-msg{
	padding-top: 10px;	
	padding-bottom: 10px;
}

.error{
	color: red;
}

.success{
	color: #008004;
}

.disabled-btn{
	background-color: #dddddd;
}

.active-btn{
	background-color: #af3424;
}

TextField {
	border: none;
	border-width: 0;
	padding:20px;
  // border-bottom-width: 2;
	// border-bottom-color:#D3D3D3;
}

.mobile {
	.error{
		margin:5 0 5 0;
	}

	.btn-primary{
		font-size:18; 
		background-color:#3e5b95;
		color:#ffffff;
		margin: 20 0 10 0;
		padding:10 0 10 0;
	}
}

.initial-container {
  margin: 50 20 0 20;
}
.initial-label {
  color: white;
  horizontal-align: center;
	margin-bottom: 10;

}

.message-label{
	margin-bottom: 25px;
	height: auto;
	width: 100%;
	overflow: visible;
}
.initial-button {
  // background-color: white;
	vertical-align: center;
}

.initial-button-label {
  horizontal-align: center;
  font-weight: bold;
}

.login-button {
	border-radius: 5;
  background-color: #71b02f;
  color: white;
	height: 45;
	width: 50%;
	vertical-align: center;
}
.initial-button-label {
  horizontal-align: center;
  font-weight: bold;
}

.forgotScreen{
	background-color:white; 
	border-radius:15;
	padding: 40 30 20 30;
  margin:0 5 50 5;
}

.border-field{
	border-radius: 10 0 0 10;
}

.text-icon-field{
	border-radius: 0 10 10 0;
}

.input-border-field{
	border-radius: 10 10 10 10;
}
