.login-box {
	vertical-align:middle;
	text-align:center;
	margin:0 auto;
	width:100%;
	padding:20px 0px;
}

input 
{
width:150px;
}

.form-control{display:block;padding:.375rem .75rem;font-size:16px; font-family:'Roboto';line-height:1;color:#fff;background-color:#0d2235;background-image:none;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:red;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#868e96;opacity:1}.form-control:-ms-input-placeholder{color:#868e96;opacity:1}.form-control::-ms-input-placeholder{color:#868e96;opacity:1}.form-control::placeholder{color:#868e96;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block}

.form-control2{display:block;padding:.375rem .75rem;font-size:14px;line-height:1;color:black; font-weight:bold; background-color:whitesmoke;
				 background-image:none;background-clip:padding-box;border:1px solid #4c0d06;
				 border-radius:.25rem;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.form-control2::-ms-expand{background-color:white;border:0}
.form-control2:focus{color:black; font-weight:bold; background-color:white; border-color:whitesmoke; 
					  outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control2::-webkit-input-placeholder{color:black;opacity:1}
					  .form-control2:-ms-input-placeholder{color:#868e96;opacity:1}
.form-control2::-ms-input-placeholder{color:#868e96;opacity:1}.form-control2::placeholder{color:#868e96;opacity:1}.form-control2:disabled,
.form-control2[readonly]{background-color:#e9ecef;opacity:1}select.form-control2:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select.form-control2:focus::-ms-value{color:#495057;background-color:#fff}
.form-control2-file,.form-control2-range{display:block}


.loading{

	left:15px;

	position:relative;

	top:3px;

	visibility:hidden;

}

.error{

	padding:7px 5px;

	text-align:left;

	margin-top:10px;

	visibility:hidden;

	font-size:12px;

}

.gagal {

	background-color:#ffebe8;

	border:1px solid #dd3c10;

}

.sukses {

	border:1px solid #4c0d06;
	color:white;
	font-weight: bold;
	background-color:#4c0d06;

}

#logout {

	position:relative;

	top:8px;

	display:none;

}

table.tabellogin {
	width:50%;
	background-color:whitesmoke;

	border:0px;

	padding:2px;

	border-collapse:collapse;

	font-size:11px;
	
	font-weight:bold;

	font-family: Arial, Helvetica, sans-serif;

}

table.tabellogin td {
	background-color:transparent;
	color:black;
	border:0;
	padding:10px;
    font-size:20px;
	font-family:'Roboto';
	font-weight:bold;
	
}

.Tombol-Submit{padding:.375rem .75rem;font-size:12px;line-height:1;color:white; font-weight:bold; background-color:#4c0d06; background-image:none;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.Tombol-Submit::-ms-expand{background-color:transparent;border:0}
.Tombol-Submit:hover{color:black;background-color:#efc74b; border-color:#efc74b;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}

/* Login Responsive */
body.login-page {
	margin: 0;
	min-height: 100vh;
	font-family: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;
	background:
		radial-gradient(circle at 12% 8%, rgba(255,255,255,.78), rgba(255,255,255,0) 38%),
		radial-gradient(circle at 88% 86%, rgba(173, 200, 223, .34), rgba(173, 200, 223, 0) 43%),
		linear-gradient(140deg, #f4f8fc 0%, #e4edf6 46%, #d8e4f0 100%);
	color: #1d3349;
}

.login-shell {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 14px;
	box-sizing: border-box;
	overflow: hidden;
}

.login-shell:before,
.login-shell:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.login-shell:before {
	width: 420px;
	height: 420px;
	left: -140px;
	top: -170px;
	background: radial-gradient(circle, rgba(123, 154, 184, .22) 0%, rgba(123, 154, 184, 0) 72%);
}

.login-shell:after {
	width: 360px;
	height: 360px;
	right: -110px;
	bottom: -150px;
	background: radial-gradient(circle, rgba(51, 88, 120, .17) 0%, rgba(51, 88, 120, 0) 72%);
}

.login-card {
	position: relative;
	width: 100%;
	max-width: 840px;
	display: grid;
	grid-template-columns: minmax(220px, 34%) minmax(0, 66%);
	background: #ffffff;
	border: 1px solid #c9d8e7;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 30px rgba(24, 50, 76, 0.18);
	z-index: 2;
}

.login-brand {
	position: relative;
	background:
		linear-gradient(155deg, rgba(11, 49, 84, .95) 0%, rgba(26, 78, 119, .92) 50%, rgba(22, 63, 96, .95) 100%);
	color: #ffffff;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
}

.login-brand:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255,255,255,.08) 0px,
			rgba(255,255,255,.08) 12px,
			rgba(255,255,255,0) 12px,
			rgba(255,255,255,0) 24px
		);
	opacity: .34;
}

.login-brand:after {
	content: "";
	position: absolute;
	inset: auto -70px -95px auto;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
}

.login-brand > * {
	position: relative;
	z-index: 1;
}

.login-logo {
	width: 190px;
	max-width: 100%;
	height: auto;
	margin-bottom: 12px;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,.28));
}

.login-brand h1 {
	margin: 0 0 8px 0;
	font-size: 29px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: .45px;
}

.login-brand p {
	margin: 0;
	font-size: 13px;
	opacity: .93;
}

.login-form {
	padding: 30px 26px 24px 26px;
	background:
		linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
}

.login-form label {
	display: block;
	margin: 0 0 8px 0;
	font-size: 12px;
	font-weight: 700;
	color: #23415d;
	text-transform: uppercase;
	letter-spacing: .18px;
}

.login-form .form-control2 {
	width: 100%;
	height: 44px;
	font-size: 15px;
	margin: 0 0 13px 0;
	box-sizing: border-box;
	border-color: #9cb4cb;
	border-radius: 9px;
	background: #fbfdff;
	color: #18334b;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.login-form .form-control2:focus {
	border-color: #3c6f9a;
	box-shadow: 0 0 0 .2rem rgba(39, 88, 128, .16);
}

.login-submit {
	width: 100%;
	height: 44px;
	font-size: 15px;
	margin-top: 4px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #8f1517 0%, #be2e2f 100%);
	color: #ffffff;
	box-shadow: 0 8px 14px rgba(109, 20, 22, .25);
}

.login-action-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.login-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	border-radius: .25rem;
	border: 1px solid #c8ccd2;
	background: #f3f5f8;
	color: #24303f;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}

.login-secondary:hover {
	background: #e7ebf0;
}

body.login-page .error {
	margin-top: 12px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 12px;
}

@media (max-width: 860px) {
	.login-card {
		max-width: 460px;
		grid-template-columns: 1fr;
	}

	.login-brand {
		padding: 22px 18px;
	}

	.login-brand h1 {
		font-size: 24px;
	}

	.login-form {
		padding: 18px 16px 20px 16px;
	}

	.login-form .form-control2,
	.login-submit {
		height: 42px;
	}
}