.events-cont {
  .calendar-box .month {
    background: $secondary-color;
  }

  .calendar-box ul li {
    color: #606060;
    margin: 0 0.88% 30px 0.88%;

    span.date-wrap {
      font-size: 18px;
    }

    &.IM-11-19-bg a.hasEvents,
    .IM-11-20-bg a.hasEvents,
    .IM-11-22-bg a.hasEvents,
    .IM-11-23-bg a.hasEvents,
    .IM-16-23-bg a.hasEvents,
    .IM-16-24-bg a.hasEvents {
      span.visitor-count-calender-icon {
        position: absolute;
        left: 0;
        bottom: -3px;
        transform: translateY(100%);

        img {
          display: block;
          width: 100%;
          height: 15px;
        }
      }
    }

    &.IM-11-19-bg a.hasEvents {
      background-color: #ffed00;
    }

    &.IM-11-20-bg a.hasEvents {
      background-color: #ec8f00;
    }

    &.IM-11-22-bg a.hasEvents {
      background-color: #ea7962;
    }

    &.IM-11-23-bg a.hasEvents {
      background-color: #9fd8ef;
    }

    &.IM-16-23-bg a.hasEvents {
      background-color: #ee4b2b;
    }

    &.IM-12-21-bg a.hasEvents {
      background-color: #f548b6;
    }

    &.IM-16-24-bg a.hasEvents {
      background-color: #f548b6;
    }

    &.AM-115-22-bg a.hasEvents {
      border-top: 8px solid #251da3;
    }

    &.AM-115-19-bg a.hasEvents {
      border-top: 8px solid #a1d03f;
    }

    &.AM-115-20-bg a.hasEvents {
      border-top: 8px solid #251da3;
    }

    &.orange-bg a {
      background-color: transparent;
      border: 3px solid #f29100;

      &:hover {
        background: #f29100;
      }
    }

    &.turquoise-bg a {
      background-color: transparent;
      border: 3px solid #10a19a;

      &:hover {
        background: #10a19a;
      }
    }

    &.gray-bg a {
      background: #c9c9c9;
      border: none;
      border-top: 8px solid #393737;
    }

    a {
      color: $black;

      .txtsml {
        display: none;
      }
    }

    .visitor-count-calender-icon {
      position: absolute;
      bottom: -19px;
      left: 0;

      img {
        width: 100%;
        height: 14px;
      }
    }
  }

  .events-highlights ul li {
    color: $black;

    &.dark-green-bg:before,
    &.brown-red-bg:before,
    &.orange-bg:before,
    &.yellow-bg:before,
    &.rose-bg:before {
      font-size: $font-size-14;
      display: inline-block;
      position: relative;
      top: 0;
      background: none;
      white-space: nowrap;
    }

    &.dark-green-bg:before {
      content: "Parc privatisé"; //add campaign titles here
    }

    &.brown-red-bg:before {
      content: "10h30 - 19h00"; //add campaign titles here
    }

    &.orange-bg:before {
      content: "10h30 - 18h00"; //add campaign titles here
    }

    &.yellow-bg:before {
      content: "10h30 - 18h00"; //add campaign titles here
    }

    &.rose-bg:before {
      content: "journées spéciales groupes scolaires"; //add campaign titles here
    }

    &:after {
      top: 0;
      left: 0;
      transform: translate(0, 0%);
    }
  }

  .events-articles {
    background: $secondary-color;

    .visitor-count-content {
      display: flex;
      margin-top: 15px;

      span.icon {
        display: block;
        margin-right: 10px;
      }
    }

    &:before {
      border-right: 19px solid $secondary-color;

      @include media-breakpoint-down(md) {
        border-bottom: 19px solid $secondary-color;
        border-left: 24px solid transparent;
        border-right: 24px solid transparent;
      }
    }

    .articles-out .box {
      color: $black;
    }

    .events-flex-wrapper {
      .calenderdatesession {
        padding-top: 10px;
      }

      .articles-out {
        float: none;

        span.icon {
          img {
            width: auto;
            height: 15px;
            position: relative;
            top: -3px;
          }
        }

        span.icon,
        .txt {
          flex: 0 0 auto;
          width: auto;
          padding-bottom: 20px;
        }

        p.description {
          flex: 0 0 auto;
          width: 100%;
        }
      }

    }
  }

  .events-calendar {
    .events-highlights {
      text-align: center;
      padding: 0 0 0 0px;
      margin-bottom: 50px;

      ul {
        width: 100%;
        list-style: none;
        flex-wrap: nowrap;
        float: none;
        margin: 0px;
        justify-content: center;
        gap: 15px;
        margin-bottom: 10px;

        li {
          width: auto;
          margin: 0;
          padding: 0;
          float: none;
          display: flex;
          align-items: center;

          &::after {
            display: none;
          }

          span.icon {
            display: block;
            margin-right: 10px;
            margin-top: -5px;

            img {
              width: 100%;
              height: 14px;
            }
          }

          .txt {
            font-size: 16px;
          }
        }
      }
    }
  }
}

.color-code-des {
  .color-code {
    border: 1px solid #d1d1d1;
    height: 100%;
    .color-code-container {
      padding: 10px 15px;
    }
  }
  .row.equal-height {
    @include media-breakpoint-down(md) {
      margin: 0px -10px;
    }
    .col-md-3 {
      @include media-breakpoint-down(lg) {
        width: 33.33%;
      }
      @include media-breakpoint-down(md) {
        width: 50%;
        padding: 20px 10px 0px 10px;
      }
      @include media-breakpoint-down(sm) {
        width: 100%;
      }
    }
  }
}

.frame-type-news_newsliststicky {
  .news {
    .news-list-view {
      display: flex;
      flex-wrap: wrap;
    }
  }
}