html {
	font-size: 16px;
}

body {
	margin: 0;
	padding: 0;
	background-color: #0E4B81;
	height: 100vh;
	overflow: hidden;
	color: var(--black);
}

.navbar {
	background-color: var(--blue) !important;
	color: var(--white) !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.nav-link {
	color: white !important;
}

main {
	position: relative;
	height: calc(100vh - 120px);
	max-height: calc(100vh - 120px);
}

a {
	color: inherit;
	text-decoration: none;
	font-size: 0.8rem;
}

.nav-title {
	margin-left: 10px;
	color: white;
}

.username {
	color: white;
}

.footer {
	background-color: var(--blue);
	display: flex;
	width: 100vw;
	flex-direction: column;
	justify-content: start;
	position: fixed;
	height: 40px;
	overflow: hidden;
	bottom: 0;
	transition: height 0.3s ease;
	font-size: 0.8rem;
}

.footer:hover {
	flex-direction: column-reverse !important;
	padding-top: 30px;
	height: 300px !important;
}

.copyright {
	min-height: 40px;
}

.flex-wrapper {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
}

#alert-message {
	z-index: 100;
	position: absolute;
	top: 70px;
	right: 10px;
	transition: opacity 1s;
}

#back {
	position: absolute;
	top: 90px;
	left: 30px;
}

.all-reports-wrapper {
	min-width: 100%;
	height: 100%;
}

.all-reports-wrapper-container {
	height: 100%;
}

.report-table-container {
	display: block;
	height: 85%;
	max-height: 85%;
	margin-bottom: 20px;
	overflow: auto;
	width: 100%;
}

.dt-length {
	display: flex;
	gap: 10px;
}

.error-title {
	color: grey;
	margin-top: 5%;
	font-size: 14em;
}

.error-subtitle {
	color: #0E4B81FF;
	font-size: 40px;
}

.error-text {
	color: #0E4B81FF;
	font-size: 20px;
	margin-top: 10px;
}

.btn-back {
	position: fixed;
	top: 3rem;
	left: 2rem;
	z-index: 100;
}

label, li, td, th, button {
	font-size: 0.8rem !important;
}

input, select, textarea, .select2-selection__rendered, .form-control {
	font-size: 0.8rem !important;
}

/* Ensure alerts, badges, and other Bootstrap components use small font */
.alert, .alert *, .badge, .btn, .btn *, .card-text, .form-text, .text-muted, p {
	font-size: 0.8rem !important;
}

.invalid-feedback {
	font-size: 0.75rem !important;
}

.nav-item {
	color: var(--very-light-grey) !important;
}

.nav-item:hover {
	background-color: var(--dark-blue) !important;
}


.form-input {
	width: 100%;
	padding: 0.375rem 0.75rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-input.is-invalid {
	border-color: #dc3545;
}

.form-input.is-invalid:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	cursor: pointer;
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
  opacity: 0.7;
}

.select2-container--default .select2-selection--single {
	height: 31px;
	padding: 6px 10px;
	display: flex;
	align-items: center;
	width: 100%;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	height: 30px;
}

.select2-container {
	height: 2.5rem;
}

.select2-container--default .select2-search--dropdown input:focus {
	border: none;
	outline-color: #80bdff;
}

.section-divider {
	width: 100%;
	height: 2px;
	background-color: #81a8c5;
	margin:  2rem 0;
}

/* Media query for small screens */
@media screen and (max-width: 412px) {
	.footer {
		overflow: scroll;
	}

	.footer:hover {
		height: fit-content !important;
	}
}