@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

.accordion,
.dropdown-item {
  cursor: pointer;
}

.dropdown-item:hover {
  filter: brightness(90%);
  transition: all 250ms;
}

.page {
  background-color: #f8f9fa;
}

.container {
  font-family: "Roboto", sans-serif;
  overflow: "hidden" !important;
}

/* Individual sections */
.accordion {
  background-color: #fff !important;
  color: rgb(0, 0, 0);
  padding: 15 0;
  width: 100%;
  border-bottom: 1px solid #f7f7f7;
  border-top: none;
  border-right: none;
  text-align: left;
  outline: none;
  font-size: 17px;
  font-weight: 400;
  transition: 0.4s;
  outline: none;
}

/* Each piece of small text */
.position {
  padding-top: 3px;
  font-size: smaller;
  color: #969696;
}

.deletepadding {
  padding-right: 0px;
  padding-left: 5px;
}

.countryname {
  display: inline-block; 
  padding-left: 7px;
}

.currentVaccineNumber {
  background-color: #37b12d1a;
  float: right;
  font-size: 15px;
  margin-left: 5;
  color: #159655;
  padding: 3px;
  padding-right: 10px;
  padding-right: 10px;
  border-radius: 30px;
}

.differenceCounter {
  padding-left: 15px;
  padding-left: 15px;
  font-size: 13px;
  font-weight: bold;
  color: rgb(71 144 103);
  padding: 4px 6px;
  border-radius: 30px;
  float: right;
}

/* Percentage of population */
.populationpercent {
  padding-left: 15px;
  background-color: #00bbd409;
  font-size: 12px;
  font-weight: bold;
  color: #00bcd4;
  padding: 4px 6px;
  border-radius: 30px;
}

/* Logo */
.topTitle {
  font-family: "Rubik", sans-serif;
  font-size: 21px;
  font-weight: 300;
  color: #69bf8a;
}

.navbar-light .navbar-toggler {
  border: 0px !important;
}


.active{
  font-size: 16px;
  font-weight: 300;
}

.accordion:hover {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 1px solid black;
}

/* Boxes at top of the page */
.counter-box {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: 100%;
  border-radius: 8px;
  display: block;
  background: #f6f6f6;
  padding: 30px 20px 37px;
  text-align: center;
  box-shadow: 6px 6px 4px -4px #f1f1;
  max-height: 140px;
}

.counter-box p {
  margin: 5px 0 0;
  padding: 0;
  color: #909090;
  font-size: 15px;
  font-weight: 500;
}

.counter-box i {
  font-size: 50px;
  margin: 0 0 15px;
  color: #d2d2d2;
}

/* Population in boxes at top of the page */
.counter {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-variant: tabular-nums;
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #666;
  line-height: 28px;
  transition: 0.4s;
}

.counter:hover {
  font-size: 35px;
  cursor: default;
}

/* Fully vaccinated population percentage */
.counter1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-variant: tabular-nums;
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #00bcd4;
  line-height: 28px;
  transition: 0.4s;
}

.counter1:hover {
  font-size: 35px;
  cursor: default;
}

/* One dose population percentage */
.counter2 {
  font-variant: tabular-nums;
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #2abfa7;
  line-height: 28px;
  transition: 0.4s;
}

.counter2:hover {
  font-size: 35px;
  cursor: default;
}

/* Population boxes coloring */
.counter-box.green {
  background-image: linear-gradient(to bottom right, #6abf69, #2fbeba);
  padding: 35px 20px 43px;
}

.counter-box.blue {
  background-image: linear-gradient(to bottom left, rgb(47, 192, 173), #2fbeba);
  padding: 35px 20px 43px;
}

.counter-box.blue-light {
  background: #ffffff;
  padding: 30px 20px 37px;
  max-height: 170px;
}

.counter-box.green-light {
  background: #ffffff;
  padding: 30px 20px 37px;
  max-height: 170px;
}

.counter-box.blue p,
.counter-box.blue i,
.counter-box.blue .counter,
.counter-box.green p,
.counter-box.green i,
.counter-box.green .counter {
  color: #ffffff;
}


.counter-box.blue-light .counter,
.counter-box.blue-light p,
.counter-box.blue-light i {
  color: #00bcd4;
}

.counter-box.green-light .counter,
.counter-box.green-light p,
.counter-box.green-light i {
  color: #2abfa7;
}

.counter-box.green-light p,
.counter-box.blue-light p {
  font-size: 13px;
}

/* Containers for all the countries and continents */

.left-right-padding15 {
  padding-left: 15px;
  padding-right: 15px;
}

.grouplist {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 6px 6px 4px -4px #f1f1;
}


.nav-link:hover,
.nav-gitLink:hover {
  color: #2abfa7 !important;
}

/* Title for all the countries */
.groupList-title {
  position: relative;
  padding: 13px 1rem;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: rgb(253, 253, 253);
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
  z-index: 2;
  font-size: 20px;
  color: #424242;
  font-weight: 500;
}

/* Search bar for countries */
.search{
  transition: 0.3s;
  width: 100%;
  border: none;
  padding: 10px 0px 10px 50px;
  border-radius: 5px;
  box-shadow: rgb(0 0 0 / 3%) 0px 4px 10px -1px,
    rgb(0 0 0 / 1%) 0px 2px 4px -1px;
}
.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4%;
  width: 20px;
}
.search:focus {
  outline: none;
  box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px -1px, rgb(0 0 0 / 7.5%) 0px 2px 4px -1px
}

#dropdownMenuButton > img {
  width: 25px; 
  padding-right:10px;
}