:root{
	--map-buttons-bg-color: #99a0da;
	--map-modal-footer: #2f57bb;
	--map-modal-body: #6795c6;
}

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


body,
html {	
	overflow: hidden;
}


#map { 
	height: 100vh;
	width: 100%;
	position: relative;
}

#inputControls {
	position: absolute;
	z-index: 999;
	height: 40px;
	top: 10px;
    left: 50%;
    transform: translateX(-50%);
	background-color: transparent;
	border: transparent;
	max-width: 70%;
}


.leaflet-top,
.leaflet-right {
	right: 10px;
}

.leaflet-bar button {
	height: 40px !important;
	width: 40px !important;
	padding-top: 6px;
	box-shadow: none;
}

.leaflet-control-layers-toggle {
	height: 40px !important;
	width: 40px !important;
	padding-top: 6px;
} 

#countryDataBtn,
#currencyBtn,
#weatherBtn,
#newsBtn,
#wikiBtn,
#covidBtn,
#poiBtn {
	background-color: var(--map-buttons-bg-color);
}

#countryData .modal-footer,
#weatherData .modal-footer,
#currencyData .modal-footer,
#newsData .modal-footer,
#wikiData .modal-footer,
#covidData .modal-footer {
	background-color: var(--map-modal-footer);
}

#countryData .modal-body,
#weatherData .modal-body,
#currencyData .modal-body,
#newsData .modal-body,
#wikiData .modal-body,
#covidData .modal-body {
	background-color: var(--map-modal-body);
}


/* #flag {
	width: 150px;
	height: 75px;
	z-index: 999;
	position: relative;
} */

#covidData h4 {
	text-align: center;
	font-weight: bold;
}

.news-data {
	font-weight: bold;
}

th,
p .country-head {
	text-align: center;
}



/* User location circle color and fill */
.leaflet-interactive {
	stroke: rgb(255, 51, 51);
	fill: rgb(251, 255, 0);
}

a {
	text-decoration: none;
}

/* Change color of links on mouseover */
a:hover {
	color: green;
}

/* Remove inital dropdown select icon */
select#countrySearch {
	-o-appearance: none;
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Add dropdown icon for all select tags */
select.dropdown {
	background-image: linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%),
		linear-gradient(to right, #ccc, #ccc);
	background-position: calc(100% - 20px) calc(1em + 2px),
		calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
	background-size: 5px 5px, 5px 5px, 1px 1.5em;
	background-repeat: no-repeat;
}

select.dropdown:focus {
	background-image: linear-gradient(45deg, green 50%, transparent 50%),
		linear-gradient(135deg, transparent 50%, green 50%),
		linear-gradient(to right, #ccc, #ccc);
	background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em,
		calc(100% - 2.5em) 0.5em;
	background-size: 5px 5px, 5px 5px, 1px 1.5em;
	background-repeat: no-repeat;
	border-color: green;
	outline: 0;
}

select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}


/* Country select dropdown scrollbar styling */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: #0d6efd;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #f0caca;
}


/* Media query for map zoom buttons */
@media only screen and (max-width: 300px) {
	.leaflet-control-zoom.leaflet-bar.leaflet-control {
		margin-bottom: 100px;
	}
}