/* --- Main stylesheet --- */
/* --- Import style of each component --- */
@import url("components/legend.css");
@import url("components/background.css");
@import url("components/button.css");
@import url("components/dropdown.css");
@import url("components/map.css");
@import url("components/mapGallery.css");
@import url("components/mapControls.css");
@import url("components/mapPopup.css");
@import url("components/navbar.css");
@import url("components/slider.css");
@import url("components/vizSections.css");
/* --- Import Google Fonts --- */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Montserrat:400,700");
@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');
@import url('https://fonts.googleapis.com/css?family=Sarabun:300,300i,400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

/* --- Settings for document body --- */
* {
  margin: 0 !important;
  padding: 0 !important;
}

html, body {
  height: 100% !important;
}

body {
  font-family: "Sarabun", "sans-serif" !important;
  overflow: visible;
  /*or hidden*/
  opacity: 0;
  background-color: black;
}

/* --- Hide document body (webpage) until fully loaded --- */
body.all-loaded {
  opacity: 1;
}

/* --- Main fonts --- */
h1 {
  font-family: "Abril Fatface", "sans-serif" !important;
  color: white !important;
}

h2, h3 {
  font-family: "Sarabun", "sans-serif" !important;
  color: white !important;
}

/* --- Custom scrollbar on the right side of the page --- */
/* --- Styling parameters based on Codepen by GhostRider https://codepen.io/GhostRider/pen/GHaFw --- */
.scrollbar-black::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: black;
  border-radius: 10px;
}

.scrollbar-black::-webkit-scrollbar {
  width: 12px;
  background-color: black;
}

.scrollbar-black::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #4a4a4a;
}