@font-face {
  font-family: 'Bazaar';
  src: url('fonts/Bazar\ 500.ttf');
  src: url('fonts/bazar_500-webfont.woff') format('woff'),
       url('fonts/bazar_500-webfont.woff2') format('woff2');
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;1,400;1,700&display=swap');

#landingPage {
  z-index: 9999;
}
#landingPage,
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #3f6379;
}
#preloader {
  z-index: 9999;
}
  #preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 37px);
    left: calc(50% - 30px);
    border: 6px solid #2c2e38;
    border-top: 6px solid #d7ceb2;
    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);
    }
  }
  #preloader > p {
    position: fixed;
    top: calc(50% + 37px);
    left: calc(50% - 113px);
    font: small-caps 1.5rem 'Bazaar', cursive;
    letter-spacing: 10px;
  }
  #landingPage > h1,
  #preloader > p,
  #appLogo,
  #exchangeImg {
    color: #d7ceb2;
    text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
  }

body {
  color: white;
  background-color: #3f6379;
}
a {
  color: white;
}
a:hover {
  color: #d7ceb2;
}

#appLogo,
#landingPage > h1 {
	font: small-caps 2rem 'Bazaar', cursive;
  letter-spacing: 10px;
}
/*Buttons*/
#allowGeoLoc,
#continueToApp,
#locateMe,
#showDataBtn,
#myTab .nav-link,
#wikiLink,
#currencySwap,
#convertBtn {
  color: #2c2e38;
  background-color: #d7ceb2;
  border: 2px solid #5c5f72;
}
  #allowGeoLoc:hover,
  #continueToApp:hover,
  #locateMe:hover,
  #showDataBtn:hover,
  #myTab .nav-link:hover,
  #wikiLink:hover,
  #convertBtn:hover {
    font-weight: bold;
    border-color: #2c2e38; 
  }
#allowGeoLoc,
#continueToApp {
  min-width: 150px; 
}
#locateMe {
  min-width: 110px;
}

/*Custom Popups*/
.customPopup .leaflet-popup-content-wrapper {
  background-color: #3f6379;
  color:white;
  border-radius: .25rem;
  border-bottom: 0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.leaflet-popup-content-wrapper > div > div > div:nth-child(1) > h2 {
  font-family: Cochin, Georgia, Times, 'Times New Roman', serif;
}
.customPopup .leaflet-popup-tip {
  background-color: #3f6379;
}
.leaflet-popup-content-wrapper > div > div > div.d-flex.flex-column > p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/*Offcanvas*/
.offcanvas-backdrop::before {
  background-color: #3f637946 !important;
}
#offcanvasBottom {
  border: none;
  height: 60vh;
  background-color: #3f637900;
  opacity: 0.90;
}
.offcanvas-body {
  border-radius: 0 0 .25rem .25rem;
  background-color: #3f6379;
}
#showDataBtn {
  z-index: 1041;
}
#showDataBtn > i {
  margin: auto;
}

#myTab .nav-link.active {
  font-weight: bold;
  color: white;
  background-color:  #3f6379;
}
#myTab .nav-link {
  border: none;
}

#country-name,
h2.capital {
  font-family: Cochin, Georgia, Times, 'Times New Roman', serif;
}
.flag {
  height: 50px;
  margin-left: 1rem;
}
#info > div > div:nth-child(even),
.day > div > div > div:nth-child(even),
#exchangeResult,
.leaflet-popup-content-wrapper > div > div > div:nth-child(even) {
  background-color: #5c5f72;
}
#countrySummary {
  font-size: small;
}

#exchangeImg {
  padding-right: 5px;
}
#currencySwap {
  width: 38px;
  height: 38px;
  padding: 7px;
}

.imageRot {
  -webkit-animation:spin 0.6s ease-in-out;
   -moz-animation:spin 0.6s ease-in-out;
   animation:spin 0.6s ease-in-out;
}
@-moz-keyframes spin {
   100% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
}
@-webkit-keyframes spin {
   100% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
}
@keyframes spin { 
   100% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
}

/* City popup */
.leaflet-popup-content-wrapper {
  max-height: 375px;
  overflow-y: auto;
}
.customPopup > a.leaflet-popup-close-button {
  right: 10px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}