:root {
/*    --main-color:#2C2C2C;*/

/*ver 1 darkmode blue */
/*--dark1 :#1A2537;*/
/*--dark2 :#001330;*/

/*ver-2 grey figma*/
/*--dark1 :#2C2C2C; */
/*--dark2 :#232323;*/


/*ver-2 darkmode green*/
--dark1 :#1B2E2A;
--dark2 :#0C1F1A;


}


html, body {
	height: 100%;
	margin: 0;
	color: #fff;
}

.login-page {
	height: 100%;
}

.box-kiri-login {
	height: 100%;
	background-size: cover;
	position: relative;
}

.box-kanan-login {
	height: 100%;
	padding: 40px 60px;
	display: flex;
	flex-direction: column;
	background-color: var(--dark2);
	padding-top: 105px;
}

.box-logo-login {
	position: absolute;
	top: 60px;
}

.box-caption-login {
	position: absolute;
	bottom: 90px;
	width: 75%;
	display: flex;
	flex-direction: column;
	margin: auto;
	left: 80px;
}

.box-caption-login {
	color: #fff;
}

.meta-box-caption {
	font-size: 12px;
}

.logo-login-mobile {
	width: 100%;
}

.form-login {
	position: relative;
	width: 100%;
}

.form-login input{
	backdrop-filter: blur(26px);
	background-color: #80808047;
	border: 3px solid #eaeaea;
	color: #ffff;
	border-radius: 50px;
}

input::placeholder {
	color: #ffcc00;
	opacity: 1;
}

input::-webkit-input-placeholder {
	color: #ffcc00;
}

input:-ms-input-placeholder {
	color: #ffcc00;
}

.container-login,
.container-reset {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	height: 0px;
	position: absolute;
	top: 0px;
}

.container-login.active,
.container-reset.active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
	height: 80%;

}

.hr-text {
	line-height: 1em;
	position: relative;
	outline: 0;
	border: 0;
	color: black;
	text-align: center;
	height: 1.5em;
	opacity: 0.5;
}
.hr-text:before {
	content: "";
	background: linear-gradient(to right, transparent, #fff, transparent);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
}
.hr-text:after {
	content: attr(data-content);
	position: relative;
	display: inline-block;
	color: black;
	padding: 0 0.5em;
	line-height: 1.5em;
	color: #fff;
	background-color: #001330;
}

.gradient-btn {
	background: linear-gradient(90deg, #00815A, #01DE43, #00815A);
	background-size: 200% 200%;
	background-position: left center;

	letter-spacing: 4px;
	font-weight: bolder;
	border-color: #00815A !important;
	transition: background-position 3s ease-out;
}

.gradient-btn:hover,
.gradient-btn:active,
.gradient-btn:focus {
	background-position: right center;
	border-color: #00815A !important;
}


.form-login .input-group-text {
	border-radius: 50px;
	cursor: pointer;
}