:root {
	--pkp-teal: #0E5B73;
	--pkp-teal-hover: #064F66;
	--pkp-teal-pressed: #072E3A;
	--pkp-khaki-surface-light: #FCFBF7;
	--pkp-khaki-surface: #F2EBD9;
	--pkp-khaki: #D5C58A;
}

body {
	font-family: 'Manrope', sans-serif;
	background-color: var(--pkp-khaki-surface-light);
	background-image: radial-gradient(var(--pkp-khaki-surface) 2px, transparent 2px);
	background-size: 16px 16px;
}

.login-shell {
	width: min(100%, 800px);
	background: #FFFFFF;
	border-radius: 8px;
	overflow: hidden;
}

.brand-panel {
	position: relative;
	overflow: hidden;
	padding: 3rem;
	background: var(--pkp-teal);
	color: #FFFFFF;
}

.brand-panel::after {
	position: absolute;
	bottom: -120px;
	left: -120px;
	width: 320px;
	height: 320px;
	border: 40px solid var(--pkp-khaki);
	border-radius: 50%;
	opacity: 0.8;
	animation: login-circle-main 20s ease-in-out infinite alternate;
	content: '';
}

.brand-panel::before {
	position: absolute;
	right: -120px;
	bottom: -240px;
	width: 480px;
	height: 480px;
	border: 96px solid var(--pkp-khaki);
	border-radius: 50%;
	opacity: 0.2;
	animation: login-circle-accent 16s ease-in-out infinite alternate;
	content: '';
}

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

@keyframes login-circle-main {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	48% {
		transform: translate(-18px, 12px) scale(1.28);
	}
	64% {
		transform: translate(12px, 24px) scale(.96);
	}
}

@keyframes login-circle-accent {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	32% {
		transform: translate(32px, 16px) scale(.8);
	}
	72% {
		transform: translate(-16px, 32px) scale(1.2);
	}
}

.ministry-logo {
	width: min(100%, 256px);
	height: auto;
}

.brand-rule {
	width: 60px;
	height: 4px;
	background: var(--pkp-khaki);
}

.login-panel {
	padding: 3rem 3rem 2rem;
}

.form-control,
.input-group-text,
.btn {
	min-height: 48px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-primary {
	--bs-btn-bg: var(--pkp-teal);
	--bs-btn-border-color: var(--pkp-teal);
	--bs-btn-hover-bg: var(--pkp-teal-hover);
	--bs-btn-hover-border-color: var(--pkp-teal-hover);
	--bs-btn-active-bg: var(--pkp-teal-pressed);
	--bs-btn-active-border-color: var(--pkp-teal-pressed);
}

.kedinasan-button {
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: #00A8F6;
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-hover-bg: #00A8F6;
	--bs-btn-active-color: #FFFFFF;
	--bs-btn-active-bg: #00A8F6;
	background-image: linear-gradient(100deg, #00A8F6 0%, #864AEE 50%, #6BBD00 100%);
	/* background-image: linear-gradient(100deg, #00A8F6 25%, #6BBD00 45%, #FFB500 75%, #FF3D00 100%); */
	background-position: 0 50%;
	background-size: 200% 100%;
	color: #FFFFFF;
	transition: background-position .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kedinasan-button:hover,
.kedinasan-button:focus {
	background-position: 100% 50%;
	color: #FFFFFF;
}

.kedinasan-button:active {
	background-position: 50% 50%;
	color: #FFFFFF;
}

.divider {
	color: #61787e;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: 0;
}

.divider::before,
.divider::after {
	width: 100%;
	height: 1px;
	background: #d8e2e1;
	content: '';
}

@media (max-width: 767.98px) {
	.login-shell {
		min-height: auto;
	}

	.brand-panel,
	.login-panel {
		padding: 2rem;
	}

	.brand-panel::after,
	.brand-panel::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brand-panel::after,
	.brand-panel::before {
		animation: none;
	}
}

/* HUT RI 81 */
body {
	background-color: #FFFFFF;
	background-image: url('images/hut-ri-81-top-left.svg'), url('images/hut-ri-81-bottom-right.svg');
	background-position: left top, right bottom;
	background-repeat: no-repeat;
	background-size: auto 60vh, auto 100vh;
}

@media (max-width: 600px) {
	body {
		background-image: url('images/hut-ri-81-bottom-right.svg');
		background-position: right bottom;
		background-size: auto 100vh;
	}
}

.brand-panel::after {
	border: 40px solid #E61E19;
}

.brand-panel::before {
	border: 96px solid #FFFFFF;
	opacity: 0.4;
}
/* END OF HUT RI 81 */