html{
	width: 100vw;
	height: 100vh;
}

body {
	width: 100vw;
	height: 100vh;
	text-align: center;
	font-family: arial, sans-serif;
	font-size: 1em;
	margin: 0px;
	background-image: url('/images/v2/login/tiic_tilt.png'), url('/images/v2/login/ipak_fade.png'), url('/images/v2/login/dots.png'), url('/images/v2/login/bg_bottom.png'), url('/images/v2/login/bg_top.png');
	background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;
	background-position: bottom right, bottom left, top right, bottom, top;
	background-color: #FFF;
}

* {
	box-sizing: border-box;
}
	
input,select {
	font-size: 1em;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.fullw {
	width: 100%;
}

.fullh {
	height: 100%;
}

.bold {
	font-weight: bold;
}

.fleft {
	float: left;
}

.fright {
	float: right;
}

.mtr {
	margin: 5px 5px 0px 0px;
}

.title {
	font-family: times;
	font-size: 2em;
	font-weight: bold;
	font-style: italic;
}

.login_box {
	max-width: 200px;
	border: 3px solid #0074C2;
	border-radius: 30px;
	background-color: #FCFCFE;
	padding: 20px;
	text-align: left;
}

.error_msg {
	width: 100%;
	font-family: arial;
	font-size: 0.8em;
	color: red;
}

.qfsp {
	width: 100%;
	height: 100%;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}

.grid-container {
	width: 100vw;
	height: 100vh;
	display: grid;
	min-width: 0px;
	overflow: auto;
}

.flex-container {
	display: flex;
}

.flexbox {
	align-self: flex-end;
	padding: 50px;
	width: 50%;
}

@media (orientation: landscape) {
	.grid-container {
		grid-template-rows: auto auto auto;
		grid-template-columns: 40% 20% 40%;
	}

	.box1 { grid-area: 1 / span 3 / 2 / 4; }
	.box2 { grid-area: 2 / 1 / 3 / 2; }
	.box3 { grid-area: 2 / 2 / 3 / 3; }
	.box4 { grid-area: 2 / 3 / 3 / 4; }
	.box5 { grid-area: 3 / span 3 / 4 / 4; }
}

@media (orientation: portrait) {
	.grid-container {
		grid-template-rows: auto auto auto auto auto;
		grid-template-columns: auto;
	}

	.login_box {
		max-width: 400px;
		border: 4px solid #0074C2;
		border-radius: 50px;
	}
	
	body {
		font-size: 2em;
	}
	
	input,select {
		font-size: 1.1em;
		margin-bottom: 20px;
		border: 2px solid grey;
	}

	.box1 { grid-area: 1 / 1 / 2 / 2; }
	.box2 { grid-area: 3 / 1 / 4 / 2; }
	.box3 { grid-area: 2 / 1 / 3 / 2; }
	.box4 { grid-area: 4 / 1 / 5 / 2; }
	.box5 { grid-area: 5 / 1 / 6 / 2; }
}