html, body {
	height: 100%;
}
/** Body **/
body {
	min-height: 550px;
	padding: 0;
	margin: 0;
	background-size: cover;
}

/** Container **/
#container {
	height: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
	color: #304d71;
}

/** Layout **/
#layout {
	background: rgba(116, 67, 167, 0.7);  /* fallback for old browsers */
	background: linear-gradient(180deg, rgba(116,67,167, 0.7) 45%, rgba(255,128,86, 0.7) 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	border-radius: 20px;
	height: 480px;
	width: 818px;
	display: inline-block;
	backdrop-filter: blur(5px);
}

/** Infrasys Logo **/
#infrasys-logo {
	width: 160px;
	position: relative;
	left: 50px;
	top: 50px;
}

/** Right Content of Layout **/
#layout-right {
	width: 334px;
	height: 540px;
	background-color: white;
	position: relative;
	left: 454px;
	bottom: 80px;
	border-radius: 6px;
}

/** Shiji Logo **/
.shiji-logo {
	width:100%;
	display: block;
	margin-bottom: 10px;
}

/** Form **/
.form-group label {
	display: block;
	font-size: 12px;
}
.form-group input {
	display: block;
	margin-bottom: 16px;
}
.form-group label,
.form-group input {
	width: 100%;
}

.form-control:focus {
	box-shadow: 0 0 0 0.1rem rgb(13 110 253 / 25%) !important;
}

.form-button {
	border-radius: 3px;
	border-color: #304d71;
	background-color: #163760;
	color: white;
	width: 33%;
	height: 30px;
	font-size: 14px;
}

/** Custom Form Style **/
#layout-form {
	padding: 16px;
}

.form-content {
	margin-bottom: 20px;
}

.form-header {
	margin: 10px 0;
}

/** Redirect URL **/
.redirect-url {
	text-decoration: none;
	color: #304d71;
	font-weight: 500;
	font-size: 12px;
}

/** sql dump **/
#sqlDump {
	background-color: white;
}

/** Error Message **/
#ErrorMsg {
	color: #E50518;
	font-size: 12px;
	margin-bottom: 20px;
	margin-top: 10px;
}

/** Hide MS Edge Reveal password icon **/
::-ms-reveal {
	display: none;
}

/** Style for valid/invalid inputs **/
input:focus:invalid {
	border:1px solid #F5192F;
	box-shadow:0 0 4px #F5192F;
}
input:focus:valid {
	border: 1px solid #64C364;
	box-shadow: 0 0 4px #64C364;
}
.invalid {
	border: 1px solid #F5192F !important;
	box-shadow:0 0 4px #F5192F;
}

/** Mobile View **/
@media (max-width: 768px) {
	body {
		background-image: none !important;
	}
	#container {
		visibility: hidden;
	}
	#layout-form {
		padding-top: 0;
	}
	#layout-right {
		visibility: visible;
		float: left;
		left: 0;
		width: 100%;
	}
}