stylesheet.css

body {
  margin: 0;
  width:100vw;
  /* height:100vh; */
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  background-color: rgb(0, 0, 0);
}
a {
  text-decoration: none;
}
main {
padding: 50px 0 0 0;
width: 100%;
display: flex;
height: auto;
}
header {
  background-color: rgba(2, 16, 19, 0.9);
  width: 100%;
  float: left;
  display: flex;
  height: 50px;
  /* Change the position property to fixed, and top property to 0 */
  position: fixed;
 /* Change the z-index property to 10 */
  z-index: 10;
}
.main-logo {
height:50px;
 width:50px;
}

.header-left {
float: left;
width: 25%;
}

.header-left a{
line-height: 50px;
height: 50px;
display: inline-block;
color: white;
margin: 0;
font-size: 23px;

}
.header-middle {
  width:25%;
  display: flex;
}
.header-middle input {
  margin: 9px 15px;
  width: 300px;
  }
.search-icon {
float: left;
/* display:inline-block; */
font-size: 150%;
color: white;
margin: 13px 5px 15px 5px;
}
.header-right {
float: right;
width: 50%;
/*background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s;*/
}
.header-right i {
  padding: 5px;
  /* margin: 7px; */
  /* float:right; */
  float: right;
  text-align: right;
  font-size: 150%;
  margin: 9px 8px;
  color: white;
}
.linkedin {
  width:50px;
  height: 50px;
}

.white-icon {
color: white;
}
.blood {
color: red;
}
.top-icons {
  color: white;
  float:right;
  /* position: absolute; */
}

.navbar-section {
  background-color: rgb(106, 102, 107);
  width: 3%;
  height: 100vh;
  font-size: 140%;
  display: flex;
  flex-direction: column;
 position: fixed;
 z-index: 10;
}

.navbar-section i{
white-space: normal;
padding: 5px 1.5px;
margin: 7px;
text-align: left;
color: rgb(6, 8, 8);
}
.virus-tooltip , .home-tooltip, .symptoms-tooltip, .selfcare-tooltip, .measures-tooltip, .testing-tooltip, .news-tooltip, .faq-tooltip, .vaccine-tooltip, .medications-tooltip, .helplines-tooltip, .donate-tooltip{
  position: relative;
  /* display: inline-block; */
}
.virus {
  width:400%;
}
.selfcare {
  width:160%;
}
.measures {
  width: 360%;
}
.donate {
  width: 290%;
}
.tooltiptext{
  position: absolute;
  left: 80%;
  top: 0;
  display: none;
  font-size: 15px;
  text-align:center;
  /* opacity: 0; */
  transition: opacity 0.3s;
  z-index: 1;
  background-color: rgb(71, 71, 71);
  color: white;
}
.virus-tooltip:hover .tooltiptext, .home-tooltip:hover .tooltiptext, .symptoms-tooltip:hover .tooltiptext,.selfcare-tooltip:hover .tooltiptext, .measures-tooltip:hover .tooltiptext, .testing-tooltip:hover .tooltiptext, .vaccine-tooltip:hover .tooltiptext, .news-tooltip:hover .tooltiptext, .faq-tooltip:hover .tooltiptext, .helplines-tooltip:hover .tooltiptext, .medications-tooltip:hover .tooltiptext, .donate-tooltip:hover .tooltiptext{
  display: inline-flex;
  float:left;
  /* max-width: 600% !important;
  min-width: 0; */
}
.middle-section {
width: 72%;
/* height: 100vh; */
background-color: #0f0f0f;
color: black;
font-size: 100%;
padding-left: 3%;
}
/* .fa-first-aid {
  margin:300px;
} */
.tabs{
  width: 100%;
}
.tab {
display: inline-block;
/* position: relative; */
height: 35px;
width: 33.3%;
position: relative;
/* width: 100%; */
text-align: center;
/* padding-top: 5px;
padding-bottom: 5px; */
float: left;
color: white;
font-size:17px;
}
.tab:hover{
cursor:pointer;
}
.tab-1 {
background-color: rgb(255, 143, 171)
}
.tab-2 {
background-color: rgb(228, 13, 199);
}
.tab-3 {
background-color: salmon;
}

/* Dropdown Button */
/* .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
} */

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  width: 33%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  /* position: relative; */
  display: inline-block;
  top: 35px;
  display: none;
  position: absolute;
  background-color: #292929;
  /* min-width: 160px; */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgb(126, 126, 126);}

/* Show the dropdown menu on hover */
.tab:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */

.map {
  /* border: 2px solid wheat; */
  /* margin-top: 70px; */
width: 100%;
padding: 20px 20px 20px 3px;
}
#regions_div{
  width: 100%;
  /* padding: 5px; */
  margin: 20px auto;
  text-align: center;
}

div .total-cases {
display: inline-block;
height: 30px;
width: 100%;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
float: left;
color: white;
background-color: rgb(233, 42, 74);
margin-top: 25px;
margin-bottom: 5px;
}

div .total-globalcases {
display: inline-block;
width: 100%;
text-align: center;
/* padding-top: 5px;
padding-bottom: 5px; */
float:left;
color: white;
background-color: rgb(224, 129, 4);
margin: 20px 5px 10px 5px;
/* position: relative; */
height: 35px;
text-align: center;
/* padding-top: 5px;
padding-bottom: 5px; */
float: left;
color: white;
font-size:17px;
}

.country-name {
  height: 30px
  margin-bottom: 20px;
}

.main-data {
padding: 10px 10px;

}
.main-data i {
font-size: 170%;
padding: 0px 5px;
}
/*table, th, td {
border: 1px solid black;

}*?
/*table.center {
margin-left: auto;
margin-right: auto;
}*/
.main-table {
width: 100%;
margin: 0 auto;
text-align: center;
}

.th-contents {
/*flex:auto;
width:100%;
/*padding: 0 15px;
margin: 0 auto;*/
}

.th-1 {
background-color: rgb(204, 151, 5);
}
.th-2 {
background-color:rgb(245, 231, 37) ;
}
.th-3 {
background-color: rgb(192, 223, 21);
}
.th-4 {
background-color: rgb(111, 210, 30);
}
.th-5 {
background-color: rgb(236, 118, 22);
}
.th-6 {
background-color: rgb(199, 25, 25);
}
/* .map {
width: 650px;
padding:7px;
border: 2px solid wheat;
text-align: center;
margin: 0 auto;
} */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Hide the images by default */
.mySlides {
display: none;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

.right-section {
background-color:rgb(29, 28, 28);
/* height: 100vh; */
color:rgb(252, 250, 246);
width: 30%;

}
.top-wrapper {
display: flex;
text-align: center;
height : 35px;
padding: 5px 5px;
flex-direction: column;
background-color: crimson;
}
.right-heading {
padding-bottom: 17px;
}
input .search{
width: 5px;
}
.middle-wrapper {
color: black;
height: 80px;
padding: 5px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.side-table {
border:0.5px solid rgb(252, 250, 246);
width: 70%;
margin: 20px auto;
text-align: center;
font-size: 17px;
/* font-size:10px; */
}
.side-table th {
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;


}
.stats-table th {
  padding:15px;
  text-align: center;
}


/* .calendar-table {
margin: 60px 0 0px 10px;

}
.calendar-table tr,th {
text-align:center;
padding: 5px; */

}
.last-column {
text-align: left;
}
.stats-table {
text-align:center;
margin: 60px 20px 10px 20px;

}
img.flags {
border-radius : 100%;
width: 30px;
height: 30px;
font-size: 50%;
}
img.data{
margin:0 auto;
}
.lower-wrapper {
padding: 10px;

}

#testimonials{
background-color: #ff8ba7;
}

.testimonial-image{
width: 60%;
/* border-radius: 100%; */
margin: 2px;
}

.press-logo{
width: 15%;
margin: 60px 20px 50px;
}

#press{
background-color: #ff8ba7;
padding-bottom: 3%;
}

/* -------- SEARCH COUNTRY -------- */
.search-country{
  position: relative;
  /* top: 10px; */
}
.search-box{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  height: 30px;
  background-color: #111;
  z-index: 1;
}
.search-box input{
  width: 360px;
  height: 25px;
  border: none;
  background-color: transparent;
  color: #FFF;

  /* padding-left: 15px; */
  font-size: 1.1em;
}
.search-box img{
  width: 20px;
  /* padding-right: 5px; */
  cursor: pointer;
  margin-left: 375px;
}
.hide {
  display: none;
}
div .close{
  float:right;
}

.country-list{
  display: flex;
  position: absolute;
  top: 20px;
  width: 400px;
  height: 300px;
  background-color: #111;
  opacity: 0.9;
  overflow-y: scroll;
  padding-left: 0;
  margin:0;
  float:left;
  text-align:left;
}

.country-list ul{
  width: 100%;
}

.country-list ul li{
  list-style: none;
  cursor: pointer;
  padding: 10px 0 0 0;
  /* padding: 10px; */
  color: #FFF;
}
.country-list ul li:hover{
  border-left: 1px solid #FFF;
}
/* SCROLL BAR */
.country-list::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.country-list::-webkit-scrollbar-track {
  background: #111;
}

/* Handle */
.country-list::-webkit-scrollbar-thumb {
  background: #F1F1F1;
}

/* Handle on hover */
.country-list::-webkit-scrollbar-thumb:hover {
  background: #FFF;
}
.hide{
  display: none;
}
.country-name{
  color: #F1F1F1;
  padding:5px 5px 0px 5px;
}

/* -------- CHART -------- */
.chart{
  width: 80%;
  height: 70vh;
  min-height: 500px;

  margin: 0 auto;
  padding: 50px 0;
}