* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
.giphyEmbed {
  align-items: center;
  text-align: center;
  margin-top: 40vh;
  overflow: hidden;
  position: fixed;
  z-index: 2;
}
.frame {
  width: 180px; 
  height: 180px; 
}
.main {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  align-items: center;
}
.topPageSection {
  /* position: sticky; */
  background-color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  position: fixed;
  top: 0; 
  z-index: 4;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px solid black;
  width: 500px;
}
.newsHeading {
  padding: 10px;
  width: 200px;     /* <-- to center any div, set width */
  margin-left: auto; margin-right: auto;  /* <-- and then margin L&R to be auto */
}
.newsBox {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 7;
  width: 83%;
  max-width: 800px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 1px 2px 4px black;
}
.newsBoxInner {
  border: 1px solid black;
  background-color: black;
  color: white;
}
.childList {
  padding-top: 10px; padding-bottom: 10px;
  border: 0.5px solid rgba(0, 0, 0, 0.3);
  padding: 2vh;
}
.childList:hover {
  background-color: white;
  color: black;
}
.dataInfo {
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.8);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-left: 2vh; padding-right: 2vh; padding-top: 2vh; padding-bottom: 2vh;
  bottom: 40px;
  text-align: center;
  width: 500px;
  /* overflow: hidden; */
  position: fixed;
  z-index: 4;
}

/* WEATHER  */

.weather {
  /* display: flex; */
  /* justify-content: space-evenly; */
  color: black;
  z-index: 3;
  /* margin-left: auto; margin-right: auto; */
}
.weatherEmoji {
  text-align: center;
  font-size: 28px;
  margin-right: 5px;
}
.weatherCondition {
  text-align: center;
  align-items: center;
  /* padding-left: 5ex; */
}
.cloudyPicture {
  display: none;
}
.cloudyPicture {
  height: 34px;
}
.temp {
  text-align: right;
  font-size: 24px;
  white-space: nowrap;
  margin-right: 5px;
}
.weather table {
  width: 90%;
  margin-left: auto; margin-right: auto;
}
.humidity, .feelsLike {
  font-size: 11px;
  text-align: left;
  margin-right: 0;
  white-space: nowrap;
}
.weatherCondition {
  width: 100%;
  padding: 0;
  margin: 0;
  margin-left: auto; margin-right: auto;
}

/* WEATHER END */

#population {
  white-space: nowrap;
}
.covid {
  color: black;
  display: none;
  text-align: center;
  z-index: 3;
}
.covidHeading {
  background-color: #dddddd;
  padding: 8px;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.covid table, .panelInfo table {
  position: relative;
  border-collapse: collapse;
  width: 100%;
}
.covid td, .panelInfo td {
  padding: 8px;
}
.covidResultTittle {
  text-align: left;
  left: 20%;
}
.covid tr:nth-child(even), .panelInfo tr:nth-child(even){
  background-color: #dddddd;
}
.covidResultNumber {
  position: absolute;
  text-align: right;
  right: 5%;
}
.map {
  z-index: 0;
  position: relative;
  height: 100vh; 
}
.mapid { 
  height: 100vh; 
 }
.searchResults {
  background-color: rgba(255, 255, 255);
  overflow: hidden;
  position: fixed;
  margin-top: 480px;
  text-align: center;
  z-index: 5;
  border-radius: 20px;
  /* border: 1px solid black; */
  width: 300px;
  max-height: 315px;
}

/* BOTTOM SECTION */

.bottomPageSection {
  background: black;
  /* position: sticky; */
  overflow: hidden;
  position: fixed;
  bottom: 0; 
  height: 40px;
  width: 100%;
  z-index: 4;
}
.navBar {
  color: white;
  display: flex;
  justify-content: space-evenly;
  z-index: 5;
  margin-top: 10px;
}

/* BOTTOM SECTION END */

.searchList {
  margin-top: 20px;
}
.wikiLink {
  text-decoration: underline;
}
.loading {
  height: 20px;
  display: none;
  border: none; /* Remove borders */
  font-size: 16px /* Set a font size */
}
#loadingSmall {
  margin-right: 10px;
}
.showLoading {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

 /* SEARCH INPUT */

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  width: 300px;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
  text-align: center;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
/* input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
} */
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  bottom: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: black;
  border-bottom: 1px solid #d4d4d4;
  color: white;
  position: relative;
  z-index: 7;
  /* overflow: visible; */
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
  color: black;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/* SELECT OPTION */

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  /* font-family: Arial; */
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  color: #818181;
  padding: 12px 16px;
  background-color: rgb(240, 240, 240);
  width: 300px;
  margin-left: auto; margin-right: auto;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent white transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: black;
  bottom: 100%;
  left: 0;
  right: 0;
  width: 300px;
  margin-left: auto; margin-right: auto;
  max-height: 80vh;
  overflow: auto;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: white;
  color: black;
}
.selectSwitch {
  display: none;
}

/* SELECT OPTION END */

/* BUTTON  */

.options {
  overflow: hidden;
  position: fixed;
  right: 0; 
  top: 50%;
  transform: translate(0, -50%);
  z-index: 7;
  max-height: 100%;
  padding: 3px
}
.eachBtn button {
  font-size: 10px;
}
.eachBtn {
  background-color: white;  
  margin-bottom: 5px;
  border-radius: 50%;
  box-shadow: 1px 2px 2px black;
}
.navBtn {
  font-weight: bold;
}
.covidSlide:hover, .newsSlide:hover, .infoButton:hover, .searchButton:hover {
  cursor: pointer;
}
.covidButton, .newsButton, .infoButton, .searchButton, .selectButton {
  padding: 10px;
}
.flag, .essayIcon, .buttonUpStyle, .submit, .wikiLinkIcon {
  text-shadow: 1px 2px 2px black;
}
.flip button:hover {
  transform: scale(1.2);
}
.buttonUpStyle {
  margin-bottom: 10px;
  font-size: 20px;
  /* color: red; */
}
.submit:hover {
  transform: scale(1.2);
 }
 .eachBtn:hover {
  transform: scale(1.1);
 }
 .covidButton:hover {
  background-color: red;
 }
 .infoButton:hover {
  background-color: yellow;
 }
 .newsButton:hover {
  background-color: green;
 }
 .searchButton:hover, .selectButton:hover {
  background-color: skyblue;
 }
 button {
   border: none;
   background-color: transparent;
   outline: none;
   cursor: pointer;
 }

/* BUTTON END  */

.panel {
  padding: 10px;
  display: none;
}
.panelInfo {
  width: 95%;
  text-align: left;
  text-align: top;
  margin-left: auto; margin-right: auto;
  background-color: #dddddd;
  /* border-radius: 20px; */
}
#exchangeRate {
  white-space: nowrap;
}
.wikiSummary {
  text-align: justify;
}
.flip {
  margin-top: -20px;
}
.search-container {
  top: 0%;
  display: none;
}
a:link, a:visited {
  text-decoration: none; color: inherit;
}
a:hover, .wikipedia:hover {
  transform: scale(1.2);
}

/* SCREEN SIZING */

@media (max-width: 550px) {
    .topPageSection {
        margin-left: 10px; margin-right: 10px;
        width: 300px;
    }
    .dataInfo {
        padding-left: 2vh; padding-right: 2vh; padding-top: 2vh; padding-bottom: 2vh;
        width: 380px;
    }
    .panelInfo {
      width: 90%;
      text-align: left;
      margin-left: auto; margin-left: auto;
    }
    .weather table {
      width: 100%;
      /* font-size: 12%; */
    }
    .weatherCondition {
      font-size: 12px;
    }
    .humidity, .feelsLike {
      font-size: 9px;
      text-align: left;
    }
    .temp {
      text-align: right;
      font-size: 14px;
    }
    .panelInfo {
      font-size: 12px;
    }
}