/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@200;300;400;500;600&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Sen', sans-serif;
}

body {
	background-color: #4070f4;
}

.containers {
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
}

.form {
	max-width: 430px;
	width: 100%;
	padding: 30px;
	border-radius: 8px;
	background: #FFF;
}

.form .signup {
	display: none;
}

.forms.show-signup .form .signup {
	display: block;
}

.forms.show-signup .form .login {
	display: none;
}

header {
	font-size: 28px;
	font-weight: 600;
	color: #232836;
	text-align: center;
}

.form {
	margin-top: 20px;
}

.form .field {
	position: relative;
	height: 50px;
	width: 100%;
	margin-top: 15px;
	border-radius: 6px;
}

.form .input-field {
	height: auto;
}

.field input,
.field button {
	height: 50px;
	width: 100%;
	border: none;
	font-size: 16px;
	font-weight: 400;
	border-radius: 6px;
}

.field input {
	outline: none;
	padding: 0 15px;
	border: 1px solid #CACACA;
}

.field input:focus {
	border-bottom-width: 2px;
}

.input-field label.error {
	display: block;
	font-size: .8rem;
	color: #f64e60;
	margin-top: 5px;
}

.input-field label.error:not([style*="display: none"]) + .eye-icon {
	transform: translateY(-85%);
}

.eye-icon {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-size: 18px;
	color: #8b8b8b;
	cursor: pointer;
	padding: 5px;
}

.field button {
	color: #fff;
	background-color: #0171d3;
	transition: all 0.3s ease;
	cursor: pointer;
}

.field button:hover {
	background-color: #016dcb;
}

.field button:disabled {
	cursor: default;
	color: #ffffffAA;
	background-color: #0171d3AA;
}

.form-link {
	text-align: center;
	margin-top: 10px;
}

.form-link span,
.form-link a {
	font-size: 14px;
	font-weight: 400;
	color: #232836;
}

.form a {
	color: #0171d3;
	text-decoration: none;
}

.form-content a:hover {
	text-decoration: underline;
}

.line {
	position: relative;
	height: 1px;
	width: 100%;
	margin: 36px 0;
	background-color: #d4d4d4;
}

.line::before {
	content: 'Atau';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #FFF;
	color: #8b8b8b;
	padding: 0 15px;
}

.media-options a {
	display: flex;
	align-items: center;
	justify-content: center;
}

a.facebook {
	color: #fff;
	background-color: #4267b2;
}

a.facebook .facebook-icon,
a.google .google-img {
	height: 28px;
	width: 28px;
	color: #0171d3;
	font-size: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

a.google .google-img {
	padding: 6px;
	background-color: #E3E3E3;
}

.facebook-icon,
.google-img {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
}

.google-img {
	height: 20px;
	width: 20px;
	object-fit: cover;
}

a.google {
	border: 1px solid #CACACA;
}

a.google span {
	font-weight: 500;
	opacity: 0.6;
	color: #232836;
}

/* toast */
.toast {
	width: auto;
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1em;
	border-radius: 10px;
	background-color: #FFF;
	overflow: hidden;
	z-index: -1;
}

.toast.show,
.toast.hide {
	z-index: 1111;
}

.toast-body {
	padding: 1em 2em 1em 1.6em;
}

.toast .btn-close {
	width: 5px;
	height: 5px;
	box-shadow: none;
}

.toast-body:before {
	content: "";
	width: 6px;
	height: 42px;
	background-color: var(--primary);
	border-radius: 6px;
	position: absolute;
	left: 6px;
	top: 5px;
}

.danger .toast-body:before {
	background-color: #FD6161;
}

.warning .toast-body:before {
	background-color: #FFAC2B;
}

.success .toast-body:before {
	background-color: #2ECC71;
}

.primary .toast-body:before {
	background-color: #2F80ED;
}

@media screen and (max-width: 420px) {
	.form {
		margin: 30px 20px;
		padding: 20px;
	}
}

@media screen and (max-height: 700px) {
	.containers {
		align-items: start;
	}

	.form {
		margin-top: 30px;
	}
}