*, *:before, *:after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: "Roboto", sans-serif;
	background-color: #0082c9;
}

.navbar li.nav-item>.nav-link {
	--bs-nav-link-color: white;
	--bs-nav-link-hover-color: #ddd;
	--bs-navbar-active-color: #ddd;
}

.navbar .dropdown-menu .nav-link {
	--bs-nav-link-color: black;
}

body>.container h1 {
	color: white;
	text-align: center;
}

body>.container>.container-inner {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	padding: 10px;
}

body>.container.narrow {
	max-width: 400px;
}

@media only screen and (max-width: 450px) {
	body>.container.narrow {
		max-width: 90%;
	}
}

#form-output {
	display: none;
}

/* HTML: <div class="loader"></div> */
.loader {
	width: 60px;
	aspect-ratio: 4;
	--_g: no-repeat radial-gradient(circle closest-side,#fff 90%,#0000);
	background:
			var(--_g) 0%   50%,
			var(--_g) 50%  50%,
			var(--_g) 100% 50%;
	background-size: calc(100%/3) 100%;
	animation: l7 1s infinite linear;
}
@keyframes l7 {
	33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
	50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
	66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

button .loader {
	margin: auto;
	display: inline-block;
}

.bottom-cancel-btn {
	text-align: center;
	margin-top: 10px;
}

.hidden {
	display: none;
}