/* import icon question mark */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css");

/* keep value-box with a lesser height */

.bslib-value-box .value-box-area {
  padding: .75rem 1rem !important;
}

.bslib-value-box .value-box-area :first {
  font-size:1rem !important;
}

.bslib-value-box .value-box-area :nth-child(2) {
  font-size:1.25rem !important;
}

/* to avoid that the value box icons position at the top when shrinking the window. Always on the left */

.bslib-value-box {
  container-name:bbslib-value-box; 
  container-type:inline-size;
}

/* footer */

#footer:focus, #footer:hover {
  color:white !important; 
  font-weight:bold !important; 
  text-decoration:underline !important; 
  text-decoration-thickness: 1px !important;
}

#footer {
  text-decoration:none !important;
}

#mail {
  color:white !important; 
  font-weight:bold !important; 
  text-decoration:none !important;
}

/* link layout in the text */

#lien {
  border-bottom: 2px solid #d6dced !important; 
  text-decoration:none !important;
}

#lien:hover {
  color: #69aa41 !important;
  border-bottom: 2px solid #69aa41 !important;
} 

/* language selection */

#lg {
  color:white !important; 
  border-radius:20px !important; 
  padding:10px 10px !important; 
  font-weight: 700 !important;
}

#lg:hover {
  color:#69aa41 !important; 
  background-color:white !important;
} 

#lg.active {
  color:#69aa41 !important; 
  background-color:white !important;
} 

/* tooltip layout */
.tooltip-inner {
  text-align:left !important;
}

/* leaflet layout */

.leaflet-tooltip {
  width: max-content !important; 
  max-width:250px !important; 
  white-space:normal !important; 
  background-color:white !important; 
  color:#69aa41 !important; 
  border-radius:5px !important; 
  padding:3.6px 7.25px !important; 
  line-height:1.8 !important; 
  font-size:0.875rem !important; 
  font-family:sans-serif !important; 
  box-shadow:none !important;
}

.leaflet-control {
  width: max-content !important; 
  border: 0px !important; 
  font-family:'Open Sans', sans-serif !important; 
  line-height:1.8 !important; 
  background-color:white !important; 
  font-size:0.875rem !important; 
  opacity:0.9 !important; 
  color:#58595b !important; 
  border-radius:5px !important; 
  padding:3.6px 7.25px !important; 
  box-shadow:none !important;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  width:90px !important;
  border: 0px !important; 
  font-family:'Open Sans', sans-serif !important; 
  line-height:1.8 !important; 
  background-color:white !important; 
  font-size:0.875rem !important; 
  opacity:0.9 !important; 
  color:#58595b !important;
  border-radius:5px !important; 
  padding:3.6px 7.25px !important;
} 

.leaflet-container {
  background: #a5a5a5 !important;
}

/* adaptation when window is bigger */
.sm-card {
  margin: 0 15%;
}

.sm-card2 {
  margin: 0 25%;
}

@media (max-width: 1440px) {
  .sm-shadow {
    box-shadow: none;
  }
}


/* adaptation when window is smaller */


.map_plot_resize {
    grid-template-columns:1fr !important;
  }
  
.logo_resize {
    grid-template-columns:0.33fr 0.33fr 0.33fr !important;
  }
  
.logo_resize2 {
    grid-template-columns:0.33fr 0.33fr 0.33fr!important;
  }

.navbar {
  padding-left:40px !important;
  padding-right:40px !important;
}

.leaflet-tooltip {
      max-width: 200px !important;
}

.sm-card {
  margin: 0 0%;
}

.sm-card2 {
  margin: 0 0%;
}

#tab > .card {
    box-shadow: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  
  .map_plot_resize {
    grid-template-columns:1fr !important;
  }
  
  .logo_resize {
    grid-template-columns:0.25fr 0.25fr 0.25fr 0.25fr !important;
  }
  
  .logo_resize2 {
    grid-template-columns:0.33fr 0.33fr 0.33fr !important;
  }
  
  .navbar {
    padding-left:100px !important;
    padding-right:100px !important;
  }
  
  .sm-card {
    margin: 0 10%;
  }
  
  .sm-card2 {
    margin: 0 10%;
  }

  .sm-shadow {
    box-shadow: none;
  }
  
  #tab > .card {
    box-shadow: none;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  
  
  .map_plot_resize {
    grid-template-columns:1fr !important;
  }
  
  .logo_resize {
    grid-template-columns:0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr !important;
  }
  
  .logo_resize2 {
    grid-template-columns:0.2fr 0.2fr 0.2fr 0.2fr 0.2fr !important;
  }
  
  .navbar {
    padding-left:100px !important;
    padding-right:100px !important;
  }
  
  .sm-card {
    margin: 0 0%;
  }
  
  .sm-card2 {
    margin: 0 10%;
  }
  
  .sm-shadow {
    box-shadow: none;
  }
  
  #tab > .card {
    box-shadow: none;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  
  .map_plot_resize {
    grid-template-columns:0.5fr 0.5fr !important;
  }
  
  .logo_resize {
    grid-template-columns:0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr !important;
  }
  
  .logo_resize2 {
    grid-template-columns:0.2fr 0.2fr 0.2fr 0.2fr 0.2fr !important;
  }
  
  .navbar {
    padding-left:150px !important;
    padding-right:150px !important;
  }
  
  .sm-card {
    margin: 0 10%;
  }
  
  .sm-card2 {
    margin: 0 20%;
  }
  
  .sm-shadow {
    box-shadow: none;
  }
  
  #tab > .card {
    box-shadow: none;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  
  .map_plot_resize {
    grid-template-columns:0.5fr 0.5fr !important;
  }
  
  .logo_resize {
    grid-template-columns:0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr !important;
  }
  
  .logo_resize2 {
    grid-template-columns:0.2fr 0.2fr 0.2fr 0.2fr 0.2fr !important;
  }
  
  .navbar {
    padding-left:150px !important;
    padding-right:150px !important;
  }
  
  .sm-card {
    margin: 0 15%;
  }
  
  .sm-card2 {
    margin: 0 25%;
  }
  
  .sm-shadow {
    box-shadow: none;
  }
  
  #tab > .card {
    box-shadow: none;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  
  .map_plot_resize {
    grid-template-columns:0.5fr 0.5fr !important;
  }
  
  .logo_resize {
    grid-template-columns:0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr 0.143fr !important;
  }
  
  .logo_resize2 {
    grid-template-columns:0.2fr 0.2fr 0.2fr 0.2fr 0.2fr !important;
  }
  
  .navbar {
    padding-left:150px !important;
    padding-right:150px !important;
  }
  
  .sm-card {
    margin: 0 15%;
  }
  
  .sm-card2 {
    margin: 0 25%;
  }
  
  .sm-shadow {
    box-shadow: 0 5px 10px #ddd;
  }
  
  #tab > .card {
    box-shadow: 0 5px 10px #ddd
  }
  
  .card_custom {
    width:1335px;
    margin-left:auto;
    margin-right:auto;
  }

}

/* Change the button color on hover */

.btn-outline-secondary {
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: #69AA41;
  --bs-btn-hover-border-color: #D2E2C2
}

/* Change the nav for the middle card */

#tab .nav {
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom:-0.15rem;
    margin-top:0rem;
    padding-bottom:0rem;
    padding-top:0rem;
  }
  
#tab > .card {
  border: none !important;
  margin: 0 !important;
}
  
#tab .card-header {
    background-color: white;
    border-width:3px;
    border-color:#69AA41;
    margin-left:1.5rem;
    margin-right:1.5rem;
    margin-top:1.5rem;
    margin-bottom:1.5rem;
    padding-bottom:0rem;
    padding-top:0rem;
}
  
#tab .nav-link {
    padding-bottom:0.22rem;
    padding-top:0rem;
    font-weight: 400;
    color:#69AA41;
    border-bottom: 0;
}
  
#tab .nav-link.active {
    border: 3px solid;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    padding-bottom:0.22rem;
    padding-top:0rem;
    font-weight: 700;
}

/* Dropdown list in the navbar to select dashboard */

.nav-item.dropdown > a.nav-link {
      color: white !important;
      font-weight: 700;
      font-size:1rem;
      border: 2px solid white !important;  
      border-radius: 5px;                  
      padding: 0px 10px !important; 
      margin-top:10px !important;
      width:210px;
      margin-bottom:0.85rem;
    }
    
.dropdown-menu {
      border: 2px solid #bccf00 !important;
      border-radius: 5px; 
      background-color: white !important;
      padding: 1px 10px !important;
      width:210px;
      margin-bottom:0.85rem;
    }

#menu {color:#69AA41;
      padding:0;
      font-weight: 700;
      border: 0px
}

#menu:hover {
  background-color: white !important; 
  color: #58595b !important;             
  border-radius: 5px;                    
}

/* To have the arrow on the extreme right of the dropdown */

.navbar .dropdown-toggle {
  display: flex !important;
  align-items: center;
}

.navbar .dropdown-toggle::after {
  margin-left: auto !important;
}

/* Adapt title of the navbar */

.navbar-brand {
      font-weight: 700;
      line-height: 1.75rem;
      margin-right:50px;
}

/* To have a green border for partners for smartphone only */

.card-small {
    border-width: 0px;
}

@media (max-width: 576px) {
  .card-small {
    border-width: 2px;
    border-color:#69aa41;
  }
}   

/* To have 2 green valueboxes on the same row when on smartphone */

@media (max-width: 575.98px) {
  .smallbox .bslib-grid {
    grid-template-columns: 0.5fr 0.5fr !important;
    
  }
  
}

.smallbox .bslib-mb-spacing, .smallbox2 .bslib-mb-spacing {
  margin-bottom: 0;
}