/* Globe */
#globe {
  cursor: -webkit-grabbing; cursor: grabbing;
  padding-top: 150px;
}

/* Body*/
body {
  margin: 0;
  background-color: #000011;
}

/* Top content */
.top-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  position: absolute;
  width: 80vw;
  height: 100px;
  left: calc(50% - 80vw/2);
  top: 50px;
}
.title {
  position: static;
  left: 0px;
  top: 0px;
  /* font-family: 'GT Flexa Trial'; */
  font-style: normal;
  font-weight: 400;
  font-size: 56px;
  line-height: 68px;
  color: #FFFFFF;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 56px;
}

/* Dropdowns */
.dropdowns {
  display: flex;
}
.dropdown {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 13px 0px 0px;
  position: static;
  flex: none;
  flex-grow: 0;
  margin: 0px 56px;
}
.dropdown-menu {
  background-color: transparent ;
}
.dropdown p {
  padding: 13px 0px 0px;
  color: #FFFFFF;
  margin-right: 13px;
  /* font-family: 'DM Sans'; */
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 31px;
  position: relative;
}
.dropdown-toggle::after {
  float: right;
  margin-top: 7px;
}
.dropdown-timespan {
  order: 1;
}
.dropdown-risk-level {
  order: 2;
}
/* Buttons */
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  background-color: #272730;
  color: white;
  border-radius: 50px;
  /* font-family: 'DM Sans'; */
  font-style: normal;
  /* font-weight: 700; */
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  min-width: 200px;
  text-align: left;
}
.button:hover {
  background-color: #272730;
  color: white;
}
.bottom-right {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/* Risk levels */
.rl-low {
  background-color: #2f835a;
}
.rl-moderate {
  background-color: #3eaf70;
}
.rl-medium {
  background-color: #fbc93a;
}
.rl-high {
  background-color: #e1874d;
}
.rl-extreme {
  background-color: #bd2f35;
}
.rl-all {
  background-color: #FFFFFF;
}
/* Risk level dots */
.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

/* Tooltip */
#tooltip {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(64px);
  border-radius: 24px;
  padding: 20px;
  opacity: 0;
    -webkit-animation: fading ease-in 0.3s;
    animation: fading ease-in 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
#tooltip .country-risk-level {
  display: flex;
  justify-content: space-between;
}
#tooltip .country-risk-level .country {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#tooltip .country-risk-level .risk-level {
  display: flex;
  flex-direction: row;
}
#tooltip .country-risk-level .country-name {
  font-weight: 700;
  font-size: 18px;
}
#tooltip .country-risk-level .risk-level {
  font-weight: 500;
  font-size: 12px;
}
#tooltip .category {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 20px;
  margin-bottom: 12px;
}
#tooltip .alert-title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
}
#tooltip .alert-time {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.flag {
  border-radius: 50%;
  margin-right: 10px;
}

@-webkit-keyframes fading {
  from {
      opacity: 0;
  }
  to {
       opacity: 1;   
  }
}
@-moz-keyframes fading {
  from {
      opacity: 0;
  }
  to {
       opacity: 1;   
  }
}

@keyframes fading {
  from {
      opacity: 0;
  }
  to {
       opacity: 1;   
  }
}
/*

*/