/* CSS Document */

body {
	margin: 0;
	height: 100vh;
	overflow:hidden;
	font-family:'Raleway', sans-serif;
	position:relative;
}

html, body{
	height: 100% !important;
}

#login-page, #terms-page{
	display:block;
	position:relative;
	height:100vh;
}

#background-img{
	background-image: url("../img/background.png");
	height: 100%;
	/* display: block; */
	/* position: relative; */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#login-area{
	position:absolute;
	top:0;
	right:0;
	display:block;
}
#login-area-inner{
	max-width:550px;
	width:100%;
	padding:100px 50px;
	background:none;
}

#login-arc{
	left: -49.4%;
	top: -48px;
	display: block;
	position: absolute;
	height: 831px;
	filter: drop-shadow(5px 5px 5px #222);
}

#logo{
	width:100%;
	position: relative;
}
#logo-addition{
	float:right;
	margin-top:-15px;
	width:35%;
}
#login-area-inner form{
	display:block;
	clear:both;
	z-index: 10;
}
#login-arc-left{
	position:absolute;
	left:-46.5%;
	top:0;
	fill:#2F4050;
	height:100%;
	width:-46.5%;
}
#login-arc-left img{
	height:100%;
}
#login-arc-bottom{
	position:absolute;
	left:1px;
	top:100%;
	fill:#2F4050;
	height:100%;
	width:100%
}
#login-arc-bottom img{
	width:100%;
	display:block;
}
#login-arc-mobile{
	display:none;
}

.login-form-group{
	display:block;
	position:relative;
}
.login-form-group .form-control{
	background:none;
	border:none;
	color:#b7b7b7;
	border-radius:0;
	padding:10px 30px 10px 0px;
	line-height:20px;
	font-size:20px;
	margin-top:10px;
	margin-left:50px;
	border-bottom:1px solid #b7b7b7;
	width:calc(100% - 50px);
}
.form-control::placeholder {
	color: #b7b7b7;
	opacity: 1;
}
.form-control:focus{
	box-shadow:none;
}
.login-form-group svg{
	display:block;
	position:absolute;
	font-size:28px;
	color:#fff;
	left:5px;
	top:10px;
}

#login-area-inner .btn{
	display:block;
	width:100%;
	border-radius:0;
	background:#fff;
	border:none;
	font-size:20px;
	color:#373A3C;
	margin-top:10px;
}
#login-area-inner .btn:hover{
	background:#b7b7b7;
}
#login-area-inner a{
	font-size:20px;
	color:#b7b7b7;
	text-align:center;
	display:block;
}

#copyright{
	position:absolute;
	bottom:0;
	left:0;
	font-size:13px;
	color:#fff;
	padding:0px 20px;
}


@media(max-width:1330px){
	#background-img{
		min-height:100vh
	}
}
@media(max-width:1025px){
	#login-arc-left, #login-arc-bottom, #login-arc{
		display:none;
	}
	#login-page{
		overflow:hidden;
		height:auto;
	}
	#login-area{
		width:100%;
		margin-bottom:300px;
		display:block;
	}
	#login-area-inner{
		width:100%;
		max-width:100%;
		padding:40px 20px;
		background:#2F4050;
	}
	#logo{
		max-width:400px;
		display:block;
		margin:0 auto;
	}
	#logo-addition{
		max-width:150px;
		margin-right:calc(50% - 200px);
	}
	#login-arc-mobile{
		display:block;
		position:absolute;
		top:100%;
		left:0;
		fill:#2F4050;
		width:100%;
	}
	body{
		height:auto;
		overflow:scroll;
	}
	#background-img{
		min-height:100vh;
		width:150%;
	}

	#terms-page > #background-img{
		min-height:100vh;
		width:100%;
	}
}
@media(max-width:800px){
	#background-img{
		width:250%;
	}

	#terms{
		width: 80% !important;
	}

}
@media(max-width:500px){
	#background-img{
		width:350%;
	}
	#logo-addition{
		max-width:150px;
		margin-right:0px;
	}

	#terms{
		width: 80% !important;
	}
}



/* PASSWORD */
.password-verification{
	color:#ccc;
}
.password-verification .text-active{
	color:#8ac7a8;
}
.password-verification .text-inactive{
	color:#e88f8f;
}

.p-viewer{
	float: right;
	position: relative;
	margin-top: -45px;
	margin-right: 40px;
}

#terms{
	width: 50%;
	height: 70%;
	overflow-y: scroll;
	background-color: white;
	margin: auto;
	padding: 18px;
}

/*
 *  terms scrollbar
 */

#terms::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#terms::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#terms::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
	left bottom,
	left top,
	color-stop(0.44, rgb(122,153,217)),
	color-stop(0.72, rgb(73,125,189)),
	color-stop(0.86, rgb(28,58,148)));
}

.btn-close{
	margin: auto;
	display: block;
	width: 50%;
	margin-top: 10px;
}

#support{
	background:rgba(5,26,57,.8);
	padding:10px;
}
#support a{
	color:#b3cef2;
}