html,
body {
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	min-height: 100vh;
	letter-spacing: 0;
	color: #bdbdbd;
	background-color: #000;
	-webkit-font-smoothing: subpixel-antialiased;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings: "liga= 1", "calt=0";
	-moz-font-feature-settings: "liga" 1, "calt" 0;
	-webkit-font-feature-settings: "liga" 1, "calt" 0;
	-ms-font-feature-settings: "liga= 1", "calt=0";
	-o-font-feature-settings: "liga" 1, "calt" 0;
	font-feature-settings: "liga" 1, "calt" 0;
}

#main-container {
	width: 100%;
	height: 100%;
	display: block;
}

#left-panel {
	width: 15%;
	height: 100%;
}

#map {
	width: 65%;
	height: 100%;
	margin: 0px;
	position: absolute;
	top: 0px;
	left: 15%;
}

#right-panel {
	width: 20%;
	height: 100%;
}

#header {
	line-height: 1.5;
	font-weight: 400;
	width: 100%;
	height: 7%;
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#content {
	width: 100%;
	height: 100%;
	display: flex;
}

#header-content {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #474747;
	height: auto;
	width: 100%;
	margin: 5px;
	display: flex;
	padding: 10px;
	position: relative;
	background-color: #474747;
}

#map-section {
	width: 65%;
	height: 100%;
	box-sizing: border-box;
	overflow: visible;
}

#select-box {
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

#map-options {
	background-color: rgb(71, 71, 71);
	border: 1px solid #bdbdbd;
	box-sizing: border-box;
	font-size: 1vw;
	padding: 0.5em;
	margin: 0.5em;
	outline: none;
	color: #bdbdbd;
	line-height: 1.5;
}

#total-confirmed-count {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #474747;
	height: 10%;
	margin: 5px;
	padding: 10px;
	position: relative;
	background-color: #474747;
	text-align: center;
}

#cases-by-region {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #474747;
	height: auto;
	margin: 5px;
	padding: 10px;
	position: relative;
	background-color: #474747;
	text-align: center;
	max-height: 80%;
	overflow: auto;
}

#cases-by-district-content {
	display: flex;
	flex-flow: column;
}

::-webkit-scrollbar {
	height: 7px;
	width: 7px;
	background: #404040;
}

::-webkit-scrollbar-corner {
	background: #404040;
}

::-webkit-scrollbar-thumb {
	background: #5c5c5c;
}

#last-updated {
	box-sizing: border-box;
	border: 1px solid #474747;
	height: 7%;
	margin: 5px;
	padding: 10px;
	position: relative;
	background-color: #474747;
	text-align: center;
	overflow: hidden;
}

#total-deaths-recovered {
	width: 100%;
	height: auto;
	max-height: 60%;
	display: flex;
}

#total-deaths {
	box-sizing: border-box;
	height: auto;
	position: relative;
	text-align: center;
	overflow: hidden;
	width: 50%;
	max-height: 100%;
	margin: 5px;
	margin-right: 2.5px;
}

#total-recovered {
	box-sizing: border-box;
	height: auto;
	position: relative;
	text-align: center;
	overflow: hidden;
	width: 50%;
	max-height: 100%;
	margin: 5px;
	margin-left: 2.5px;
}

.death-recovered-title {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #474747;
	height: 10%;
	padding: 10px;
	position: relative;
	background-color: #474747;
	text-align: center;
	width: calc(100%-5px);
	font-size: 1vw;
}

.recovered-content-wrapper {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: auto;
	margin-top: 5px;
	padding: 10px;
	position: relative;
	background-color: #474747;
	text-align: left;
	max-height: 100%;
	overflow: auto;
}

.death-content-wrapper {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: auto;
	margin-top: 5px;
	padding: 10px;
	position: relative;
	background-color: #474747;
	text-align: left;
	max-height: 100%;
	overflow: auto;
}

#death-content {
	display: flex;
	flex-flow: column;
}

#recovered-content {
	display: flex;
	flex-flow: column;
}

#trend-graph {
	box-sizing: border-box;
	border: 1px solid #474747;
	height: 40%;
	margin: 5px;
	margin-top: 0px;
	/* padding: 10px; */
	position: relative;
	background-color: #474747;
	text-align: center;
	overflow: hidden;
	width: 100%;
	max-height: 40%;
}

.leaflet-popup-content-wrapper {
	border-radius: 0px;
	border: 1px solid #474747;
	box-sizing: border-box;
	background-color: #474747;
	color: #bdbdbd;
}

.leaflet-popup-content {
	box-sizing: border-box;
	border: 1px solid #474747;
	background-color: #474747;
	text-align: center;
	padding: 1px;
	text-align: justify;
	/* overflow: hidden; */
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background-color: #474747;
}

.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #474747;
	color: #bdbdbd;
	border: 1px;
}

.mobile-btns {
	display: none;
}

#mobile-charts {
	display: none;
}

#mobile-stats {
	display: none;
}

#mobile-date {
	display: none;
}

/* Smartphones (portrait and landscape) ---------- */

@media screen and (min-width: 320px) and (max-width: 480px) {
	#left-panel {
		display: none;
	}
	#right-panel {
		display: none;
	}
	#map-section {
		width: 100%;
		height: 100%;
	}
	#map {
		width: 100%;
		height: 100%;
		left: 0%;
	}
	.mobile-btns {
		display: flex;
		box-sizing: border-box;
		font-size: 4vw;
		padding: 0em;
		outline: none;
		width: 50%;
		color: #bdbdbd;
		margin-right: 5px;
		height: 100%;
	}
	#map-options {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=)
			no-repeat 100% 50%;
		width: 50%;
		padding: 0;
		background-color: #474747;
		border: 1px solid #bdbdbd;
		color: #bdbdbd;
		margin: 0;
		margin-left: 5px;
		font-size: 3.5vw;
	}
	#map {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	#select-box {
		position: relative;
		top: 0px;
		left: 0px;
		z-index: 1000;
		margin-top: 5px;
		display: flex;
		height: 6%;
		width: 100%;
		margin-left: 0%;
	}
	#select-box button {
		outline: none;
		border: 1px solid #bdbdbd;
		font-size: 3.5vw;
		color: #bdbdbd;
		padding: 0.5em;
		line-height: 1.5;
		width: 50%;
		border-radius: 5px;
		outline: none;
		height: 100%;
	}
	.active {
		background-color: #3a2e2e94;
	}
	.passive {
		background-color: #474747;
	}
	#mobile-charts {
		display: none;
		position: absolute;
		top: 10%;
		height: 90%;
		width: 100%;
	}
	#mobile-stats {
		display: none;
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}
	.m_stats_label {
		line-height: 2;
		font-size: 6vw;
	}
	#mobile-date {
		display: flex;
		position: absolute;
		bottom: 0px;
		right: 0px;
	}
	#m-stats-table {
		overflow: auto;
		height: 95%;
		background: #474747;
	}
	table {
		border: none;
		border-collapse: collapse;
		text-align: center;
	}
	table td {
		border-left: 1px solid #fff;
	}
	table th {
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	table td:first-child {
		border-left: none;
	}
	.confirmed {
		color: #ff0000;
	}
	.deaths {
		color: #ffff00;
	}
	.recovered {
		color: #0dd30d;
	}
	#m-stats {
		height: 5%;
	}
	#m-date {
		height: 3%;
	}
	#table-wrap {
		height: 87%;
	}
}

/* Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	#left-panel {
		display: none;
	}
	#right-panel {
		display: none;
	}
	#map-section {
		width: 100%;
		height: 100%;
	}
	#map {
		width: 100%;
		height: 100%;
		left: 0%;
	}
	.mobile-btns {
		display: flex;
		/* background-color: rgb(71, 71, 71); */
		/* border: 1px solid #bdbdbd; */
		box-sizing: border-box;
		font-size: 4vw;
		padding: 0em;
		outline: none;
		width: 50%;
		color: #bdbdbd;
		margin-right: 5px;
		height: 100%;
	}
	#map-options {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=)
			no-repeat 100% 50%;
		width: 50%;
		padding: 0;
		background-color: #474747;
		border: 1px solid #bdbdbd;
		color: #bdbdbd;
		margin: 0;
		margin-left: 5px;
		font-size: 2vw;
	}
	#map {
		width: 100%;
		height: 93%;
		margin: 0px;
		padding: 0px;
		position: absolute;
		top: 7%;
		right: 0px;
	}
	#select-box {
		position: relative;
		top: 0px;
		left: 0px;
		z-index: 1000;
		margin-top: 5px;
		display: flex;
		height: 9%;
		width: 100%;
		margin-left: 0%;
	}
	#select-box button {
		outline: none;
		border: 1px solid #bdbdbd;
		font-size: 2vw;
		color: #bdbdbd;
		padding: 0.5em;
		line-height: 1.5;
		width: 50%;
		border-radius: 5px;
		outline: none;
		height: 100%;
	}
	.active {
		background-color: #3a2e2e94;
	}
	.passive {
		background-color: #474747;
	}
	#mobile-charts {
		display: none;
		position: absolute;
		top: 10%;
		height: 90%;
		width: 100%;
	}
	#mobile-stats {
		display: none;
		position: absolute;
		top: 0%;
		height: 100%;
		width: 100%;
	}
	.m_stats_label {
		line-height: 2;
		font-size: 4vw;
	}
	#mobile-date {
		display: flex;
		position: absolute;
		bottom: 0px;
		right: 0px;
	}
	#m-stats-table {
		overflow: auto;
		height: 90%;
		background: #474747;
	}
	table {
		border: none;
		border-collapse: collapse;
		text-align: center;
	}
	table td {
		border-left: 1px solid #fff;
	}
	table th {
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	table td:first-child {
		border-left: none;
	}
	.leaflet-container .leaflet-control-attribution,
	.leaflet-container .leaflet-control-scale {
		font-size: 9px;
	}
	.confirmed {
		color: #ff0000;
	}
	.deaths {
		color: #ffff00;
	}
	.recovered {
		color: #0dd30d;
	}
	#m-stats {
		height: 10%;
	}
	#m-date {
		height: 5%;
	}
	#table-wrap {
		height: 85%;
	}
}