body{
  font-family: 'Panton', sans-serif;
}
.container{
  display: flex;
  flex-flow: row wrap;
  margin: 20px auto;
  justify-content: center;
}
.custom-table {
  cursor: pointer;
}
.data-map{
  margin-left: 10px;
  height: 550px;
  width: 50%;
}
.data-map-station{
  margin-left: 10px;
  height: 650px;
  width: 50%;
}
.btn-indicator{
  box-shadow: 0 0 5px #bebebe,
  0 0 10px #bebebe;
  border-radius: 25px;
  width: 45px;
  height: 45px;
  background-color: #bebebe;
  border: none;
  cursor: pointer;
}

.map{
  height: 100%;
  width: 100%;
}

.btn-back{
  background-color: #d6d6d6 !important;
}

.div-rec{
  border-radius: 15px;
  border: none;
  background-color: #bebebe;
}

.image-recoms{
  width: 90%;
  margin: 20px;
}

h4 {
  text-align: center;
}

.container-img {
  height: 150px;
  width: 180px;
  object-fit: scale-down;
} 

.params-charts{
  width: 70%;
  margin: 20px auto;
}

  .ol-popup {
      font-family: 'Panton', sans-serif;
      font-size: 11px;
      position: absolute;
      background-color: white;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      min-width: 200px;
  }

  .ol-popup:after,
  .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }

  .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
  }

  .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
  }

  .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
  }

  .ol-popup-closer:after {
      content: "✖";
      color: #c3c3c3;
  }

  .div-gray{
    background-color: #bebebe;
    border-radius: 10px;
  }
  .div-green{
    background-color: #00e400;
    border-radius: 10px;
  }
  .div-yellow{
    background-color: #FFFF00;
    border-radius: 10px;
  }
  .div-orange{
    background-color: #ff7e00;
    border-radius: 10px;
  }
  .div-red{
    background-color: #FF0000;
    border-radius: 10px;
  }
  .div-purple{
    background-color: #8f3f97;
    border-radius: 10px;
  }

  #result {
    text-align: left;
    color: gray;
    min-height: 2em;
}

#table-sparkline {
    margin: 0 auto;
    border-collapse: collapse;
}

th {
    font-weight: bold;
    text-align: center;
}

td,
th {
    padding: 5px;
    border-bottom: 1px solid silver;
    height: 35px;
}

thead th {
    border-top: 1px solid gray;
    border-bottom: 2px solid gray;
}

.highcharts-tooltip > span {
    background: white;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}
.box {
  display: flex;
  flex-flow: row wrap;
  margin: 20px auto;
  justify-content: center;
}

/* here the rules for small windows */
@media (max-width: 600px) { 
  .data-map{
    margin-left: 0px;
    height: 550px;
    width: 100%;
  }
  .data-map-station{
    margin-left: 0px;
    height: 650px;
    width: 100%;
  }

}