/* Preloader */

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: #fff;
}

#preloader:before {
	content: "";
	position: absolute;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #f2f2f2;
	border-top: 6px solid #0d6efd;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Map fills full viewport */

#map {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}

/* Floating country select over map */

#selectContainer {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	width: 300px;
}

/* Custom purple for Compare modal header */

.bg-purple {
	background-color: #6f42c1;
	background-image: var(--bs-gradient);
}

/* Clickable neighbour badges */

.neighbour-badge {
	cursor: pointer;
	transition: background-color 0.2s;
}

.neighbour-badge:hover {
	background-color: #0d6efd !important;
	color: #fff !important;
}

/* Earthquake magnitude colours */

.mag-low {
	color: #198754;
	font-weight: bold;
}

.mag-medium {
	color: #fd7e14;
	font-weight: bold;
}

.mag-high {
	color: #dc3545;
	font-weight: bold;
}

/* Leaflet EasyButton sizing */

.leaflet-bar button {
	width: 34px;
	height: 34px;
}

/* MarkerCluster colours */

.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
}