@font-face {
	font-family: "Century Gothic";
	src: local("Century Gothic");
}

:root {
	--esl-yellow: #FCC805;
	--esl-green: #47B549;
	--esl-green-dark: #007803;
	--esl-white: #FFFFFF;
	--esl-black: #000000;
	--esl-bg: #0f1114;
	--esl-surface: #171b20;
	--esl-surface-alt: #1f252c;
	--esl-border: rgba(255, 255, 255, 0.12);
	--esl-text-soft: rgba(255,255,255,0.74);
}

html, body {
	font-family: "Century Gothic", Arial, sans-serif;
	background-color: var(--esl-bg);
	color: var(--esl-white);
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
}

.navbar {
	background-color: var(--esl-black) !important;
	border-bottom: 4px solid var(--esl-green);
}

.navbar-brand,
.navbar .nav-link,
.navbar-text {
	color: var(--esl-white) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.nav-link.active {
	color: var(--esl-yellow) !important;
}

.navbar-logo {
	width: auto;
	display: block;
}

main.container {
	max-width: 1280px;
}

.page-hero {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--esl-border);
	border-radius: 1rem;
	background: linear-gradient(180deg, var(--esl-surface-alt) 0%, var(--esl-surface) 100%);
}

.card {
	background-color: var(--esl-surface);
	border: 1px solid var(--esl-border);
	border-radius: 1rem;
	color: var(--esl-white);
}

.esl-form-card .card-body,
.card.p-3,
.card.p-4 {
	padding: 1.25rem !important;
}

.esl-form-section + .esl-form-section {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--esl-border);
}

h1, .h1 {
	color: var(--esl-yellow);
	font-weight: 700;
}

h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	color: var(--esl-white);
	font-weight: 700;
}

.text-muted,
.text-secondary,
.form-text {
	color: var(--esl-text-soft) !important;
}

.form-control,
.form-select {
	background-color: var(--esl-black) !important;
	border: 1px solid var(--esl-border) !important;
	color: var(--esl-white) !important;
	border-radius: 0.75rem;
}

.form-control:focus,
.form-select:focus,
.btn:focus {
	border-color: var(--esl-yellow) !important;
	box-shadow: 0 0 0 0.2rem rgba(252, 200, 5, 0.2) !important;
}

.form-label,
.form-check-label {
	color: var(--esl-white);
}

.btn-primary {
	background-color: var(--esl-yellow);
	color: var(--esl-black);
	border-color: var(--esl-yellow);
	font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--esl-yellow);
	color: var(--esl-black);
	border-color: var(--esl-yellow);
	filter: brightness(0.98);
}

.btn-outline-light {
	border-color: var(--esl-green);
	color: var(--esl-white);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
	background-color: var(--esl-green-dark);
	border-color: var(--esl-green-dark);
	color: var(--esl-white);
}

.table {
	color: var(--esl-white);
	border-color: var(--esl-border);
}

.table thead {
	background-color: var(--esl-black);
	color: var(--esl-yellow);
}

.table-hover > tbody > tr:hover > * {
	color: var(--esl-white);
	background-color: rgba(71, 181, 73, 0.08);
}

.badge-soft {
	background-color: rgba(71, 181, 73, 0.12);
	color: var(--esl-white);
	border: 1px solid rgba(71, 181, 73, 0.3);
	border-radius: 999px;
	padding: 0.4rem 0.65rem;
	font-weight: 600;
}

.alert-danger.esl-alert {
	background-color: rgba(252, 200, 5, 0.12);
	border: 1px solid rgba(252, 200, 5, 0.35);
	color: var(--esl-white);
}

a {
	color: var(--esl-green);
	text-decoration: none;
}

a:hover {
	color: var(--esl-yellow);
}

.field-validation-error,
.validation-summary-errors,
.text-danger {
	color: var(--esl-yellow) !important;
}

::placeholder {
	color: rgba(255,255,255,0.45) !important;
}

.esl-form-actions {
	margin-top: 1.5rem;
	padding-top: 0.5rem;
}