:root {
  --accent-color: #00d8d6;
  /* --darker-grey-reduced-opacity: #1e272ed2; */
  --dark-transparent: #343a40de;
  /* --blue-text: #36a2eb; */
  --weather-icon-light: #e9de82;
  --weather-icon-dark: #5c606e;
  --weather-icon-blue: #d9e3e9;
}

/* MAP CSS */

html,
body {
  height: 100%;
}

.map-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
}

#map {
  width: 100%;
  height: 100%;
  position: relative;
}

/* leaflet buttons */

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: none;
}

/* easy buttons */

.leaflet-touch .leaflet-bar button,
.leaflet-touch .leaflet-bar a {
  height: 35px;
  width: 35px;
  line-height: 35px;
  font-size: 16px;
}

.leaflet-touch .leaflet-bar a {
  font-size: 27px;
  font-weight: bold;
}

.leaflet-popup-content-wrapper {
  border-radius: 0.25rem;
  padding: 7px;
}

.leaflet-popup-content {
  margin: 5px;
}

/* easy buttons with hover fix for mobile */

.leaflet-bar button {
  color: var(--accent-color);
  background-color: var(--dark-transparent);
  transition: background-color 0.3s ease-in;
}

.leaflet-bar button:hover {
  color: var(--accent-color);
  background-color: var(--dark-transparent);
}

@media (hover: hover) and (pointer: fine) {
  .leaflet-bar button:hover {
    background-color: var(--bs-dark);
    color: var(--accent-color);
  }
}

.leaflet-bar button:active {
  background: var(--bs-light);
}

/* zoom buttons with hover fix for mobiles */

a.leaflet-control-zoom-in,
a.leaflet-control-zoom-out {
  color: var(--bs-light);
  background-color: var(--dark-transparent);
  transition: background-color 0.3s ease-in;
}

a.leaflet-control-zoom-in:hover,
a.leaflet-control-zoom-out:hover {
  color: var(--bs-light);
  background-color: var(--dark-transparent);
}

@media (hover: hover) and (pointer: fine) {
  a.leaflet-control-zoom-in:hover,
  a.leaflet-control-zoom-out:hover {
    background-color: var(--bs-dark);
    color: var(--bs-light);
  }
}

a.leaflet-control-zoom-in:active,
a.leaflet-control-zoom-out:active {
  /* color: var(--bs-light); */
  background-color: var(--bs-light);
}

/* For when the zoom in/out buttons are maximised */
a.leaflet-control-zoom-in.leaflet-disabled,
a.leaflet-control-zoom-out.leaflet-disabled,
a.leaflet-control-zoom-in.leaflet-disabled:hover,
a.leaflet-control-zoom-out.leaflet-disabled:hover {
  color: var(--bs-light);
  background: var(--bs-gray);
}

/* move easy buttons located top left */

.leaflet-top.leaflet-left {
  top: 48px;
}

div.leaflet-top.leaflet-right {
  top: 46px;
}

/* container for zoom */
.leaflet-verticalcenter {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  top: calc(
    100% - 61px
  ); /* possible because the placeholder's parent is the map */
  transform: translateY(-50%); /* using the CSS3 Transform technique */
  padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
  margin-bottom: 10px;
}

div.leaflet-control-layers-overlays {
  width: 90px;
}

/* END OF MAP CSS */

/* NAV/TITLE BAR CSS */
/* outermost nav div */
#nav-container-all {
  min-height: 3rem;
  box-shadow: 2px 2px 5px var(--bs-dark);
  background-color: var(--bs-dark);
  position: fixed;
  top: 0px;
  right: 0;
  z-index: 500;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.input-group-text {
  background-color: var(--accent-color);
  color: var(--bs-dark);
  border: 1px solid var(--accent-color);
}

.custom-select {
  border: 1px solid var(--bs-light);
}

#globe-icon {
  color: var(--accent-color);
  font-size: 30px;
  cursor: pointer;
}

@media only screen and (max-width: 340px) {
  #globe-logo-container {
    display: none !important;
  }
}

#logo {
  height: 30px;
  cursor: pointer;
}

@media only screen and (max-width: 512px) {
  #logo {
    display: none;
  }
}

#flag-select-container {
  /* display: flex; */
  min-width: 232px;
}

.nav-flag-div {
  background: no-repeat url("") center center/cover;
  height: 38px;
  width: 75px;
  margin-top: auto;
  margin-bottom: auto;
  border: 1px solid var(--bs-light);
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  cursor: pointer;
}

div.input-group {
  margin: 3px;
  max-width: 14.5rem;
  max-height: 37px;
}

#nav-buttons-div {
  justify-content: start;
}

@media only screen and (max-width: 768px) {
  #nav-buttons-div {
    justify-content: center;
  }
}

.api-flag {
  width: 50px;
  margin-left: 5px;
  margin-top: 3px;
  margin-right: 10px;
  border-radius: 3px;
}

.modal-icon {
  background-color: var(--bs-dark);
  color: var(--accent-color);
  height: 35px;
  width: 35px;
  font-size: 16px;
  padding-top: 9px;
  margin-left: 5px;
  margin-top: 3px;
  margin-right: 10px;
  border-radius: 3px;
}

.nav-button {
  font-size: 1.2rem;
  width: 50%;
  max-width: 100px;
}

/* END OF NAV/TITLE BAR CSS */

/* MODALS CSS */
/* Loading Modal */

.progress {
  height: 3px;
}

/* all modals */

/* modal tables */

.blue-striped tr:nth-child(even) {
  background-color: aliceblue;
}

.orange-striped tr:nth-child(even) {
  background-color: rgb(236 224 227 / 20%);
}

/* CITIES MODAL  */

.bi {
  vertical-align: -0.125em;
  pointer-events: none;
  fill: currentColor;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
  border: 0;
}

.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, 0.85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, 0.85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav li {
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #f2d2f4;
}

.fw-semibold {
  font-weight: 600;
}

#city-name-accordion-body {
  top: -1px;
}

.find-on-map {
  cursor: pointer;
  position: relative;
}

/* yelp */

.yelp-image-div {
  width: 5rem;
  height: 5rem;
}

.yelp-image {
  object-fit: cover;
  position: relative;
  top: 2px;
}

.yelp-businesses:hover h5 {
  color: var(--bs-dark);
  text-decoration: none;
}

@media (hover: hover) {
  .yelp-businesses:hover h5 {
    color: #0a58ca;
    text-decoration: underline;
    text-decoration-color: var(--bs-blue);
    text-decoration-color: #0a58ca;
  }
}

a,
a:hover {
  /* color: var(--light-grey); */
  text-decoration: none;
}

.articles-container h5 {
  color: var(--bs-dark);
}

.articles-container:hover h5 {
  color: var(--bs-dark);
  text-decoration: none;
}

@media (hover: hover) {
  .articles-container:hover h5 {
    color: #0a58ca;
    text-decoration: underline;
    text-decoration-color: var(--bs-blue);
    text-decoration-color: #0a58ca;
  }
}

/* .articles-container:hover {
  background-color: var(--darker-grey);
  transition: color 1s ease;
  transition: background 0.7s ease;
}

.articles-container:hover {
  background-color: hsla(208, 22%, 85%, 0.103); 
  background-color: var(--dark);
  color: var(--light);
} */

/*
a:active {
  color: var(--light-grey);
} */

a.leaflet-popup-close-button {
  display: none;
}

/* infoModal image carousel */

#country-flag {
  height: 175px;
  -webkit-box-shadow: 3px 3px 1px 1px rgba(0, 0, 0, 0.56);
  box-shadow: 3px 3px 1px 1px rgba(0, 0, 0, 0.56);
  /* outline: 1px solid rgba(223, 242, 255, 0.2); */
  outline: 1px solid black;
  border-radius: 5px;
}

.carousel-img-parent {
  height: 350px;
}

.carousel-img-size {
  object-fit: cover;
}

.carousel-caption {
  text-transform: capitalize;
  background: #00000029;
  border-radius: 5px;
}

/* infoModal weather */

#icon-div {
  height: 15rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://live.staticflickr.com/65535/52231365453_7f0fc6948b_n.jpg");
}

#inner-icon-div {
  height: 100%;
  width: 100%;
  background-color: #f0f8ffc9;
}
#current-weather-icon {
  font-size: 7rem;
}

/* wiki and news modals */

#wiki-data,
#news-data {
  text-align: justify;
}

.news-image,
.wiki-thumbnail {
  width: 160px;
  object-fit: cover;
  max-height: 117px;
}

.news-image::after {
  content: "";
  clear: both;
  display: table;
}

div#wiki-data .lead,
div#news-data .lead {
  font-weight: bold;
}

/* .news-story-date {
  color: var(--gray);
} */

/* weather modal */

.weather-icon-light {
  color: var(--weather-icon-light);
}

.weather-icon-dark {
  color: var(--weather-icon-dark);
}

.weather-icon-blue {
  color: var(--weather-icon-blue);
}

caption {
  caption-side: top;
}

#current-weather-card {
  max-width: 10rem;
}

/* about modal */

#about-modal-flag {
  height: 23px;
  width: 40px;
  background: url("https://flagcdn.com/w320/gb.png") no-repeat center
    center/cover;
  border-radius: 4px;
}

/* CITIES MODAL */

.text-yellow {
  color: var(--bs-yellow);
}

.text-orange {
  color: var(--bs-orange);
}

.text-violet {
  color: var(--bs-purple);
}

.unclickable {
  cursor: wait;
  user-select: none;
  background: blue;
}
.unclickable * {
  pointer-events: none;
}

/* COVID MODAL */

/* charts dont't display properly on screens this size */
@media only screen and (max-width: 350px) {
  #confirmed-deaths-per-day {
    display: none !important;
  }
  #covid-infections-per-day {
    display: none !important;
  }
}

/* END OF MODALS CSS */

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #343a40;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}