:root {
	--background-color: #f9f9f9;
	--default-color: #040000;
	--heading-color: #425ea6;
	--accent-color: #425ea6;
	--surface-color: #425ea650;
	--contrast-color: #ffffff;
	--btn-hover-color: #2c3e87;
	--input-bg-color: #ffffff;
	--input-color: #000000;
	--input-border-color: #f8f8f8;
	--placeholder-color: #6b6c6f;
	--a-hover-color: #e59d02;
	--container: #ffffff;
}

:root.dark {
	--background-color: #5d5d5d;
	--default-color: #f8f8f8;
	--heading-color: #ffffff;
	--accent-color: #906200;
	--surface-color: #191919;
	--contrast-color: #ffffff;
	--btn-hover-color: #e59d02;
	--input-bg-color: #191919;
	--input-color: #e9e9e9;
	--input-border-color: #5d5d5d;
	--placeholder-color: #b3b3b3;
	--a-hover-color: #000;
	--container: #2c3035;
}

body {
	background-color: var(--background-color) !important;
	color: var(--default-color) !important;
}

.btn-primary {
	background-color: var(--accent-color) !important;
	border-color: var(--accent-color) !important;
	color: var(--contrast-color) !important;

	&:hover {
		background-color: var(--btn-hover-color) !important;
		border-color: var(--btn-hover-color) !important;
	}
}

input,
select {
	background-color: var(--input-bg-color) !important;
	border-color: var(--input-border-color) !important;
	color: var(--input-color) !important;
}

input::placeholder {
	color: var(--placeholder-color) !important;
}

/* ========================= NAV ========================= */
#nav_menu {
	background-color: var(--accent-color) !important;
}

.container-fluid a {
	color: var(--contrast-color) !important;
}

.navbar-toggler {
	color: var(--contrast-color) !important;
	background-color: var(--contrast-color) !important;
}

.navbar-nav a:hover {
	color: var(--a-hover-color) !important;
}

#themeToggle {
	content: var(--modo-icon);
}

/* ========================= SECTION ========================= */
section {
	padding: 2em;
}

.card {
	background-color: var(--container) !important;
}

.card label {
	color: var(--default-color) !important;
}

/* ========================= TABLE ========================= */
.dt-search {
	margin-bottom: 1em;
}

.dt-info {
	margin: 1em 0;
}