@font-face { font-family: 'RobotoCondensed'; src: url('/inc/fonts/RobotoCondensed-Regular-2015.ttf'); }
*, *:before, *:after {
	box-sizing: border-box;
}


html {
	width: 100%;
	height: 100%;
	min-height: 600px;
}

body {
	text-align:center;
	margin: 0px;
	font-family: RobotoCondensed;
	/*
	background-image: url('/images/loginbackground/20160718.jpg');
	*/
	background-size: cover;
	background-position: 50% 50%;


}

.rememberMeInput{
	margin: 7px 0px 0px -80px;
	position: absolute;
}
.rememberMeLabel{
	margin: 5px 10px 0px -60px;
    font-size: small;
    /* text-transform: capitalize; */
    display: inline-block;
}
.rememberMeLabel:first-letter {
	text-transform: uppercase
}
.loginWindow {
	margin: 0px auto;
	position: relative;
	text-align: center;
	width: 250px;
	height: 410px;
	border: 1px solid rgba(255,255,255,0.4);
	text-overflow: hidden;
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}


_:-ms-lang(x), .loginWindowBlur { background: rgba(255,255,255,0.5) !important; } 


.loginWindowBlur {
	margin: -30px -30px;
	/*
	background: rgba(255,255,255,0.3) url('/images/loginbackground/20160718.jpg') ;
	*/

	z-index: 0;
	background: rgba(255,255,255,0.3);
	background-position: 50% 50%;
	
	background-clip: content-box;
	background-attachment: fixed;
	background-size: cover;
	opacity: 1;

	background-blend-mode: overlay;
	width: 460px;
	height: 660px;

	-webkit-filter: blur(8px);
	filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	-ms-filter: blur(8px);

}


.customerLogo {
	margin: 20px 0px;
	max-width: 400px;
	max-height: 400px;
	display: inline-block;

}

.steamLogo {
	position: fixed;
	left: 40px;
	top: 40px;
	width: 200px;
	max-width: 30%;
}

.loginWindowContent {
	width: 630px;
	right: 0;
	position: absolute;
	top: 0;
	height: 100%;
	padding: 80px 50px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
}

.input {
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 16px;
	font-family: RobotoCondensed;
	outline: none;
	width: 100%;
	border: none;
	line-height: 28px;
}

.passGrid {
	border: 0px solid red;
	text-align:center;
	margin-top: 20px;
}

.passGridCircle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 26px;
	color: #000;
	border: 1px solid rgba(0,0,0,0.3);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	font-family: RobotoCondensed;
}

.passGridNumber {
	font-size: 15px;
	text-align: center;
}

.passGridCircleStyle1 {
	background-color: white;
	color: #666;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.passGridCircleStyle2 {
	background-color: #4C384D;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.btnLogin:hover {
	background-color: #31aeff;
}

.btnLogin {
	cursor: pointer;
	color: white;
	font-family: RobotoCondensed; 
	border: 1px solid #007fd1;
	border-radius: 2px;
	padding: 0px 2px 2px 2px;
	text-align: center;
	box-shadow: 0px 0px 3px rgba(255,255,255,0.2), 2px 2px 2px rgba(0,0,0,0.2);
	background-color: #009bff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.btnLogin[disabled] {
	background-color: white;
    color: #524f4f;
	cursor:default;
}

@media (max-width: 600px) {
	.datetime {
		font-size: 25px !important;
	}
}

.datetime {
	position: fixed;
	text-align:right;
	
	bottom: 20px;
	right: 20px;
	font-size: 35px;
	font-family: RobotoCondensed;
	color: rgba(255,255,255,0.95);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}

.loginMessage {
	height: 20px;
	color: var(--primary-100);
	font-weight: 600;
	font-size: 13px;
	border: 0px solid red;
	margin: 10px 10px 0px 10px;
}


.gridInfo_1 {
	color: #b94a48;
	font-weight: 500;
}

.btnLoginReset:hover, .btnLoginSave:hover, .btnLoginSaveTM:hover {
	background-color: #31aeff;
}

.lvlOver {
	background: #cde802;
    color: #333;
}

.lvlSelected {
	background: #ff3865;
    color: white;
}
.btnLoginSave{
	cursor: pointer;
	position: absolute;
	width: 100px;
	height: 25px;
	left: 20px;
	color: white;
	font-family: RobotoCondensed; 
	border: 1px solid #007fd1;
	border-radius: 2px;
	padding: 3px 2px 2px 2px;
	text-align: center;
	box-shadow: 0px 0px 3px rgba(255,255,255,0.2), 2px 2px 2px rgba(0,0,0,0.2);
	background-color: #009bff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	font-size: 13.333333px;
}
.btnLoginReset{
	cursor: pointer;
	position: absolute;
	width: 100px;
	height: 25px;
	right: 20px;
	color: white;
	font-family: RobotoCondensed; 
	border: 1px solid #007fd1;
	border-radius: 2px;
	padding: 3px 2px 2px 2px;
	text-align: center;
	box-shadow: 0px 0px 3px rgba(255,255,255,0.2), 2px 2px 2px rgba(0,0,0,0.2);
	background-color: #009bff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	font-size: 13.333333px;
}

.btnLoginSaveTM{
	cursor: pointer;
	position: absolute;
	width: 210px;
	height: 25px;
	right: 20px;
	color: white;
	font-family: RobotoCondensed; 
	border: 1px solid #007fd1;
	border-radius: 2px;
	padding: 3px 2px 2px 2px;
	text-align: center;
	box-shadow: 0px 0px 3px rgba(255,255,255,0.2), 2px 2px 2px rgba(0,0,0,0.2);
	background-color: #009bff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	font-size: 13.333333px;
	margin-top: 70px;
}

.browserCheck{
	background: rgba(255,255,255,0.3);
	background-clip: content-box;
	margin: 20px auto;
	position: relative;
	text-align: center;
	width: 500px;
	border: 1px solid rgba(255,255,255,0.4);
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-family: RobotoCondensed;
    color: rgba(255,255,255,0.95);
    text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}
.labelLoginCS {
	color: rgba(255,255,255,0.95);
    text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	display:none;
}

.msgKick {
	margin-top: 50px;
}

.btnLogin {
	background-color: var(--secondary-100) !important;
	border-color: var(--secondary-100) !important;
}

.passGrid {
	display: inline-grid;
	margin-top: 50px;
	grid-template-areas: 
	".      .       .         .        pg1       .        .        .        ."

	".      .       .        pg2        .       pg6       .        .        ."
	
	".      .      pg3        .        pg7       .       pg11      .        ."
	
	".     pg4      .        pg8        .       pg12      .       pg16      ."

	"pg5    .      pg9        .        pg13      .       pg17      .      pg21"
	
	".     pg10     .        pg14       .       pg18      .       pg22      ."

	".      .      pg15       .        pg19      .       pg23      .        ."
	
	".      .       .        pg20       .       pg24      .        .        ."
	
	".      .       .         .        pg25       .       .        .        .";
}

#pg1 { grid-area: pg1; }
#pg2 { grid-area: pg2; }
#pg3 { grid-area: pg3; }
#pg4 { grid-area: pg4; }
#pg5 { grid-area: pg5; }
#pg6 { grid-area: pg6; }
#pg7 { grid-area: pg7; }
#pg8 { grid-area: pg8; }
#pg9 { grid-area: pg9; }
#pg10 { grid-area: pg10; }
#pg11 { grid-area: pg11; }
#pg12 { grid-area: pg12; }
#pg13 { grid-area: pg13; }
#pg14 { grid-area: pg14; }
#pg15 { grid-area: pg15; }
#pg16 { grid-area: pg16; }
#pg17 { grid-area: pg17; }
#pg18 { grid-area: pg18; }
#pg19 { grid-area: pg19; }
#pg20 { grid-area: pg20; }
#pg21 { grid-area: pg21; }
#pg22 { grid-area: pg22; }
#pg23 { grid-area: pg23; }
#pg24 { grid-area: pg24; }
#pg25 { grid-area: pg25; }

.login-form-wrapper {
	height: 100%;
	border-radius: 10px;
	background-color: #F6F6F6;
	padding: 70px 50px;
}

.login-inputs-wrapper {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	row-gap: 40px;
	align-items: center;
}

.login-input {
	position: relative;
	width: 100%;
}

.input-label {
	font-size: 14px;
	color: #68555E;
	position: absolute;
	left: 8px;
	top: 8px;
	transition-property: top;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
}

.login-input--focus .input-label {
	top: -22px;
}

.btn-reset-password {
	font-size: 12px;
	margin-top: 6px;
	align-self: flex-start;
}

.grid-login-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	align-items: center;
}

.btnLogin {
	width: 100%;
	font-size: 16px;
	height: 40px;
	border-radius: 6px;
}

.btnLogin:disabled {
	background-color: var(--secondary-70) !important;
	color: var(--btn-primary-disabled) !important;
	border-color: var(--secondary-70) !important;
	box-shadow: none;
}

.login-contact-list {
	display: flex;
	flex-direction: column;
	align-self: end;
	row-gap: 6px;
}

@media (max-height: 1030px) {
	.login-form-wrapper {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

@media (max-height: 980px) {
	.loginWindowContent {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

@media (max-height: 920px) {
	.loginWindowContent {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}