@font-face {
  font-family: 'ww-header';
  src: url('Yantramanav/Yantramanav-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'ww-body';
  src: url('Yantramanav/Yantramanav-Regular.ttf') format('truetype');
}

:root {
  --main-bg-color: #FEFEFE;;
  --main-emphasis-color: #CC3300;
  --header-font: "ww-header";
  --body-font: "ww-body";
}

@media (max-width: 767.98px){
  .row-container{
    gap: 10px; /*when charts stack on mobile*/ 
  }
}

@media (max-width: 767.98px), (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .header {
    flex-direction: column;
    background-position-x: -7px !important;
    background-position-y: -83px !important;
  }

  .dropdown-container {
    position: static; /* Remove absolute positioning */
    margin-top: 10px; /* Add space between the text and the dropdown */
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* CSS rules for tablets in portrait mode */
  .header {
    flex-direction: column;
    background-position-y: 30px !important;
  }
  
  .dropdown-container {
    position: static; /* Remove absolute positioning */
    margin-top: 10px; /* Add space between the text and the dropdown */
  }
  
}


body {
  font-family: var(--body-font);
  background-color: #F0F1F1;
}

.container-fluid {
  padding: 0px;
}
      
.header {
  background: url('images/eucalypt.png');
  background-size: cover;
  background-position: center;
  padding: 20px;
  position: relative;
  color: black;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.header-text {
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
}

.dropdown-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

selectize-dropdown, .selectize-dropdown.form-control {
  z-index: 10000;
}

.row-container{
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 0px;
}

.leaflet-top, .leaflet-bottom {
  z-index: 0;
}
    
#map{
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-container{
  padding: 20px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.chart-container a{
  color: #4F5E41;
}


footer {
  position: sticky;
  bottom: 0;
  text-align: center;
  background-color: #eaeaea;
  font-size: 16px;
  padding: 15px;
  color: black;
}

.credit-url {
  color: black;
}