@import url(https://fonts.googleapis.com/css?family=Manrope);

@media (min-width: 1400px) {
  main,
  header,
  #main-navbar, #toolbar {
    padding-left: 240px;
  }
}

:root {
  --main-color-lightestblue:  #bfc8e7; 
  --main-color-lightblue:  #8092cf; 
  --main-color-blue:  #00249e; 

  --main-color-lightestred:  #facfdb; 
  --main-color-lightred:  #f4a0b7; 
  --main-color-red:  #e9406e; 


  --main-color-lightestgrey:  rgb(195, 195, 195);
  --main-color-lightgrey:  rgb(200, 200, 200);
  --main-color-grey:  #808080;
  --main-color-darkgrey:  rgb(94, 94, 94);
  --main-color-darkestgrey:  rgb(54, 54, 54);

  --main-color-white:  #ffffff; 
  --main-color-black:  rgb(20, 20, 20); 

  --mdb-dropdown-item-border-radius: 0px!important;

}

* {
  
  font-family: "Manrope";
 }

body {
  background-color: var(--main-color-lightgrey);
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;    */  
  margin: 0px;
}


h1, h2, h3, h4, h5 {
  color: var(--main-color-blue);
  font-weight: bold;
}
a {
  color: var(--main-color-red);
}

a:hover {
  color: var(--main-color-lightblue);
}

a:active {
  color: var(--main-color-lightblue);
}


/*background colors*/
.bg-level-0 {
  background-color: #00249e;
}

.bg-level-1 {
  background-color: #b1bce1;
}

.bg-level-2 {
  background-color: #d8d3d4;
}

.bg-level-3 {
  background-color: #f7bacb;
}

.bg-level-4 {
  background-color: #e9406e;
}

/*background colors*/
.bg-level-0-dark {
  background-color: #00249e;
}

.bg-level-1-dark {
  background-color: #3a2b92;
}

.bg-level-2-dark {
  background-color: #743286;
  color: white;
}

.bg-level-3-dark {
  background-color: #b1397a;
}

.bg-level-4-dark {
  background-color: #e9406e;
}

.text-level-0 {
  color: #2b83ba;
  font-weight: bold;
}

.text-level-1 {
  color: #abdda4;
  font-weight: bold;
}

.text-level-2 {
  color: #ffffbf;
  font-weight: bold;
}

.text-level-3 {
  color: #fdae61;
  font-weight: bold;
}

.text-level-4 {
  color: #d7191c;
  font-weight: bold;
}

.text-secondary {
  color:#999!important;
}

.landing-hero-background {
  position: absolute;
  top:0px;
  height: 95vh; 
  width: 100vw!important;
  overflow: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: none;
  z-index: -1;
  -webkit-transition: background-image 0.3s ease-in-out;
  transition: background-image 0.3s ease-in-out;

}

/* navbar */
.sidebar {
  height: 100vh;
  background: linear-gradient(rgba(81,81,81,0.9),rgba(81,81,81,0.95)), url(/static/img/bushfire.jpg);
  background-color: var(--main-color-grey);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 95%;
  box-shadow: 5px 7px 25px #999;
}

.bottom-border {
  border-bottom: 1px groove #eee;
}

.sidebar-link:hover {
  background-color: #444;
  border-radius: 5px;
}

.nav-link {
  padding: 0;
}
/* end of navbar */

/* cards */
.card {
  opacity: 0.9;
  box-shadow: 0 0;
  border-color:var(--main-color-lightred)!important;
  border-left: 1px solid;
  border-radius: 0;
}



.card-highlight {
  box-shadow: 1px 2px 5px #999;
  transition: all 0.2s;
}

.card-highlight:hover {
  box-shadow: 2px 3px 15px rgb(0, 0, 0);
}

.card-body {
  padding: .75rem;
}

.card-footer {
  padding: .5rem 0.75rem;
}



.intensity-number {
  font-weight: bold;
  font-size: 1.0em;
  white-space: nowrap;
}

/* buttons */
.btn {
  border-radius: 0;
}

.btn-radio {
  background-color: var(--main-color-white);
  color: var(--main-color-lightgrey);
  border-radius: 10%;
}

.btn-radio:hover {
  background-color: var(--main-color-lightgrey);
  color: var(--main-color-grey);
  font-weight: bold;
  transform: translateY(-1px)
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--main-color-lightgrey);
  color: var(--main-color-grey);
  border-width: 1px;
  border-color: var(--main-color-white);

}

.btn-secondary:not(:disabled):not(.disabled).active:hover, .btn-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--main-color-grey);
  color: var(--main-color-lightgrey);
  font-weight: bold;
}

.nopadding {
  padding: 0px;
}

.btn-rl-blue {
  background-color: var(--main-color-blue);
  border-color: var(--main-color-blue);
  color: white;
  
  font-weight: bold;
}

.btn-rl-blue:hover {
  background-color: var(--main-color-lightblue);
  border-color: var(--main-color-lightblue);
  font-weight: bold;
}

.btn-rl-outline-blue {
  background-color: white;
  border-color: var(--main-color-blue);
  border-width: 0.125rem;
  border-style: solid;
  color: var(--main-color-blue);
  font-weight: bold;
}

.btn-rl-red {
  background-color: var(--main-color-red);
  border-color: var(--main-color-red);
  font-weight: bold;
}

.btn-rl-red:hover {
  background-color: var(--main-color-lightred);
  border-color: var(--main-color-lightred);
  font-weight: bold;
}

.btn-rl-red:active {
  background-color: var(--main-color-lightred);
  border-color: var(--main-color-lightred);
  font-weight: bold;
}

.btn-rl-blue:hover {
  background-color: var(--main-color-lightblue);
  border-color: var(--main-color-lightblue);
  font-weight: bold;
  color: white;
}

.btn-rl-blue:active {
  background-color: var(--main-color-lightblue);
  border-color: var(--main-color-lightblue);
  font-weight: bold;
  color: white;
}

.btn-rl-outline-red {
  background-color: white;
  border-color: var(--main-color-red);
  border-width: 0.125rem;
  border-style: solid;
  color: var(--main-color-red);
  font-weight: bold;
}

.btn-rl-outline-red:hover {
  background-color:  var(--main-color-lightestgrey);
  border-color:var(--main-color-red);
  color: var(--main-color-red);
  font-weight: bold;
}

.btn-rl-outline-blue:hover {
  background-color:  var(--main-color-lightestgrey);
  border-color:var(--main-color-blue);
  color: var(--main-color-blue);
  
  font-weight: bold;
}


/*Map css*/
.map-overlay {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  min-width: 20ch;
  max-width: 35ch;
  max-height: 30%;
  top: 10px;
  left: 10px;
  padding: 10px;
}
 
.map-overlay .map-overlay-inner {
  background-color: #fff;
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
  border-radius: 3px;
  margin-bottom: 10px;
  max-height: 30%;
}


.map-overlay-legend {
  position: absolute;
  display: none;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  margin-left: 10px;
  font-family: Arial, sans-serif;
  border-radius: 3px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  line-height: 18px;
  height: auto;
  margin-bottom: 2rem;
  margin-right: 1rem;
  width: 15%;
  max-width: 30ch;
  max-height: 80%;
  
}
.legend-key {
  display:inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

@media only screen and (max-width: 960px) {
  .map-legend {
    max-height: 80%;
  }
}
.mappopup .leaflet-popup-tip,
.mappopup .leaflet-popup-content-wrapper {
    
    color: #ffffff;
    width: auto;
}
.leaflet-popup-tip,
.leaflet-popup-content-wrapper {
    
    
    backdrop-filter: blur(1px) brightness(75%);
    background-color:transparent;
    width: auto;
    border-radius: 0px;
}
.leaflet-popup-content {
  width: auto;
  color: #ffffff;
}

.leaflet-tile-container img {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}

/* sidenav */
.sidenav {
  background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.0));
  backdrop-filter: blur(4px) brightness(60%);
  background-color:transparent;
}

.navbar {
  background-color: var(--main-color-white);
}

.nav {
  background-color: var(--main-color-white);
}

.nav-item {
  color: var(--main-color-white);
  text-align: center;
  height: auto;
  margin-top: 0rem;
  font-size: 1.5rem;  
  margin-right: 1rem;
  background-color: var(--main-color-white);
}

.nav-link {
  min-width: 2.5rem;
  border-radius: 0;
  min-height: 2.5rem; 
  font-weight:bold;
  color: var(--main-color-blue);
}

.nav-link:hover {
  text-decoration: underline;
  color: var(--main-color-lightblue);
  color: var(--main-color-blue)!important;
}

.nav-link:focus {
  color: black;
  background-color: var(--main-color-white)!important;
  border-color: var(--main-color-red)!important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {
  color: black;
  border-color: var(--main-color-red)!important;
  border-bottom-width: 5px;
  
}

.nav-link.active  {
  color: black!important;
}

/* background */

.background-image {
  position: fixed;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 110%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat, repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter:  brightness(0.9);
  filter: brightness(0.9);
}

.dropdown-menu li {
  position: relative;
  }
  .dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
  }
  .dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
  }
  .dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
  }

.dropdown-item {
  padding: 0.3rem!important;

}

.list-group-item {
  padding: 0.3rem!important;
}

.list-group-layers {
  --mdb-list-group-light-item-py: 0.2rem;
  --mdb-list-group-light-item-border: 1px solid var(--mdb-divider-color);
  --mdb-list-group-light-item-border-width: 0px;
  --mdb-list-group-light-active-border-radius: 0.2rem;
  --mdb-list-group-light-active-bg: var(--mdb-primary-bg-subtle);
  --mdb-list-group-light-active-color: var(--mdb-primary-text-emphasis);
}

.range {
  --ticksThickness: 2px;
  --ticksHeight: 30%;
  --ticksColor: var(--main-color-lightgrey);
  
  display: inline-block;
  background: var(--main-color-lightgrey);
  background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
  background-size: calc(100%/((var(--max) - var(--min)) / var(--step)) - .1%) var(--ticksHeight);
  background-position: 0 bottom;
  position: relative;
}


/* min / max labels at the edges */
.range::before, .range::after {
  font: 10px monospace;
  content: counter(x);
  position: absolute;
  bottom: -2ch;
}

.range::before {
  counter-reset: x var(--min);
  transform: translateX(-50%);
}

.range::after {
  counter-reset: x var(--max);
  right: 0;
  transform: translateX(50%);
}