/* ============== TABLE OF CONTENTS ============== */

/* LOGIN PAGE
*/

/* =============================================== */


/* || LOGIN PAGE */

body {
	background-color: #1b1b1d; /* Black */
}

.page {
	background-image: url("../img/background-img.png") !important;
	background-color: #1b1b1d; /* Black */
	background-size: cover;
	/* background-position: 70% 20%; */
	height: 100vh;
}

.header {
	background-color: unset;
}

.main--login {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80vh;
}

/* .main--login a {
	font-size: 12px;
	color: #48494e;
	transition: all 0.5s;
} */

/* .main--login a:hover {
	text-decoration: underline;
	color: #DFDFDF;
} */

.login__container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
	padding: 20px;
	position: absolute;
	z-index: 9999;
}

.login__container h1 {
	font-size: 44px;
	color: #feae01; /* Dark orange */
}

.login__container p {
	font-size: 12px;
	color: #48494e; /* Dark Grey */;
	text-align: left;
}

.login__container a {
	font-size: 12px;
	color: #48494e; /* Dark Grey */;
	transition: all 0.5s;
}

.login__container a:hover {
	text-decoration: underline;
	color: #DFDFDF;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.form input,
.form select,
.form button,
.form input[type=password] {
	text-align: center;
	border-radius: 40px;
	padding: 12px 24px;
	background-color: #48494e; /* Dark Grey */
	border: 2px solid #48494e; /* Dark Grey */
	width: 350px;
	color: #fff; /* White */
}

.form input:focus,
.form input[type=password]:focus,
.form select:focus {
	color: #212227; /* Darker blue */
	background-color: #fff; /* White */
}

.form input::placeholder,
.form option {
	color: #808080; /* Grey */
}

.form input:focus:invalid {
	border: 2px solid #e33434;; /* Red */;
}

.form button {
	text-transform: uppercase;
	background-color:#feae01; /* Dark orange */
	border: 1px solid #feae01; /* Dark orange */;
	font-weight: 700;
	color: #212227; /* Darker blue */
}

.form input:focus,
.form select:focus-visible {
	border: 2px solid #feae01; /* Dark orange */
	transition: all 0.5s;
	outline: none;
	/* background-color: #fff; */
}

.login__container .login__error-message {
	text-align: center;
	color: #e33434; /* Red */
}