@use '../../../vendor/twbs/bootstrap/scss/bootstrap' as *;
@use "../../../assets/styles/variables" as variables;
@use 'data2ui_mini-bootstrap';

/* Color of the Map */
#map svg {
  fill: white;
  /* stroke: #424648; stroke-width: 2px; */

  .windGustText {
    font-size: 0.8rem;
  }
}

/* Color department border */
#map .department {
  fill: #e6e5e5;
  stroke: #fff;
  stroke-width: 1px;
  transition: background 0.2s;
  cursor: pointer;
}

#map .department:hover {
  fill: #dedddd;
}

//.tooltip {
//  background-color: white;
//  border-radius: 0;
//  border: 1px solid variables.$primary;
//  padding: 0;
//  font-size: 0.9rem;
//  z-index: 2000;
//
//  > div {
//    display: flex;
//    flex-direction: row;
//    align-items: stretch;
//    padding: 10px;
//
//    &.tooltipTitles {
//      flex: 1 0 60%;
//      display: flex;
//      flex-direction: column;
//      justify-content: space-between;
//      background-color: variables.$primary;
//      color: white;
//      padding: 5px;
//      margin: 0;
//    }
//
//    > img {
//      flex: 0 1 100%;
//      margin-left: 5px;
//      margin-right: 5px;
//      min-height: 20px;
//      max-width: 50px;
//    }
//
//  }
//
//  > ul {
//    list-style: none;
//    margin: 10px;
//    padding: 0;
//
//    > li {
//      margin: 0 10px;
//      padding: 0;
//    }
//  }
//
//  .tooltipsubTitles {
//    color: variables.$primary;
//    padding: 10px;
//  }
//}


.periodSelector .list-group-item.active {
  background-color: variables.$secondary !important;
  border-color: variables.$secondary !important;
}

.days-selector {
  //margin: 15px 0;
  a {
    transition: linear 0.4s;
    display: block;
    line-height: 1;
    text-decoration:none;
    text-align: right;
    color: darken(variables.$secondary,20%);
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 10px 10px !important;

    @include media-breakpoint-up(lg) {
      &:not(:last-child) {
        border-bottom: solid #dfdfdf 1px;
      }
    }
    @include media-breakpoint-down(md) {
      border-bottom: solid #dfdfdf 1px;
    }

    &.active, &:hover {
      background: darken(variables.$secondary, 20%);
      color: #ffffff;
    }

    .day-of-week {
      display: block;
      font-size: 0.8em;
      font-weight: 700;
    }

    .day-of-month {
      display: block;
      font-size: 1.2em;
    }
  }
}