* {
	margin: 0;
	list-style: none;
	box-sizing: border-box;
}

input,
textarea,
select {
	font-size: 16px !important;
}

html,
body {
	font-family: "conigen", sans-serif;
	box-sizing: border-box;
	margin: 0;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.loading-spinner {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 85px;
	width: 30px;
	height: 30px;
	border: 4px solid #ddd;
	border-top: 4px solid #333;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	display: none;
	z-index: 9;
}

@keyframes spin {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(360deg);
	}
}

#content {
	margin-top: 85px !important;
}

.bkg-img {
	height: 600px;
	background-color: black;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

html::-webkit-scrollbar {
	display: none;
}

body {
	font-size: 16px;
}

/* .header-section,
.contain-logo,
.responsive-logo {
	height: 100px;
} */

.header-section {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 20px;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	z-index: 998;
}

.responsive-logo {
	cursor: pointer;
	height: 50px;
	margin: 20px 0 0;
}

.contain-logo {
	width: 100%;
	position: fixed;
	z-index: 998;
	top: 0;
	left: 0;
	padding: 0 20px;
}

.header-section,
.contain-logo {
	margin-top: -15px;
}

.black {
	background-color: black;
}

header.black {
	background-color: black;
	border-bottom: 1px solid white;
}

.white {
	background-color: white;
}

header.white {
	background-color: white;
	border-bottom: 1px solid black;
}

.top-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 85px;
}

@media (max-width: 1000px) {
	/* .header-section,
	.contain-logo,
	.responsive-logo {
		height: 100px;
	} */

	#content,
	.top-content {
		margin-top: 85px !important;
	}
}

@media (max-width: 768px) {
	/* .header-section,
	.contain-logo,
	.responsive-logo {
		height: 80px;
	} */

	#content,
	.top-content {
		margin-top: 72px !important;
	}

	/* .header-section,
	.contain-logo {
		margin-top: -8px;
	} */
}

.button-logout {
	background: #ff4742;
	border: 1px solid #ff4742;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
	color: #ffffff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 800;
	outline: 0;
	padding: 12px 14px;
	text-align: center;
	text-rendering: geometricprecision;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	margin-top: 13px;
}

.button-logout:hover,
.button-logout:active {
	background-color: rgba(255, 71, 66, 0.5);
	background-position: 0 0;
	color: white;
}

.button-logout:active {
	opacity: 0.5;
}

@media (max-width: 768px) {
	.button-logout {
		font-size: 14px;
		padding: 10px 12px;
		min-height: 36px;
	}
}
@media (max-width: 600px) {
	.button-logout {
		font-size: 12px;
		padding: 8px 10px;
		min-height: 32px;
	}
}
@media (max-width: 400px) {
	.button-logout {
		font-size: 10px;
		padding: 6px 8px;
		min-height: 28px;
	}
}

.page_title {
	padding: 8px;
	margin-top: 10px;
	max-width: 550px;
	color: white;
	letter-spacing: 1.75px;
	text-align: center;
}

@media (max-width: 576px) {
	.page_title {
		padding: 5px;
		letter-spacing: normal;
		font-size: 1.5rem;
	}
}

/* Alert Styles */
.alert {
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Warning Alert Style */
.alert.alert-warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #856404;
    font-weight: 500;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 15px;
    color: inherit;
}

.alert.fade {
    transition: opacity 0.15s linear;
}

.alert.fade.show {
    opacity: 1;
}