#agenda {

  @media (max-width: 768px) {

    .mobile-content-canvas {

      position: relative;
      padding-top: 50px;

    }

  }

  // aside content
  .sidebar {


    footer {

      display: none;

    }

    padding: 0;
    position: absolute;
    left: 0;
    top: -15px;
    right: 0;

    // z-index: 2000;

    &.fixed {

      padding-top: 50px;
      position: fixed;
      z-index: 99;

    }

    @media (min-width: 768px) {

      display: block;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 0 !important;
      position: relative !important;
      width: 33.3333%;

      footer {

        display: block;

      }

    }

    @media (min-width: 1200px) {
      padding-left: 70px;
      padding-right: 0;
    }

  }

  .side-content {

    .list-group {

      padding-left: 10px;

      .oa-group-first-tag {

        padding-top: 3em;

      }

    }

    @media (min-width: 768px) {
      display: block;
    }

  }

  .side-icon {

    color: $oa-silver;
    cursor: pointer;
    display: block;
    font-size: 23px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    width: 100%;

    &:hover {
      color: $oa-blue;
    }

    @media (min-width: 768px) {
      display: inline-block;
      font-size: 18px;
      text-align: left;
      width: 30px;
    }

  }

  .side-item {

    display: none;

    &.side-search {

      display: block;
      width: 100;

      .side-content {

        display: block;

      }

    }

    a {
      color: $oa-gray;
      text-decoration: none;

      &:hover {
        color: $oa-blue;
      }
    }

    h3 {
      color: $oa-gray;
      font-size: 18px;
      margin: 0;
    }

    @media (min-width: 768px) {

      display: block;

      margin-bottom: 40px;

      h3 {
        margin-bottom: 10px;
        margin-top: 20px;
      }

    }

    @media (max-width: 767px) {
      &.open {
        background: $oa-gray-lighter;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        text-align: center;
        z-index: 1;

        h3 {
          background: $oa-white;
          text-align: center;
        }

        .side-content {
          display: block;
        }

        .side-icon {
          display: inline-block;
          width: auto;
          margin-right: 10px;
        }

        .side-title {
          display: inline-block;
        }

        &:after {
          font-family: 'Font Awesome 6 Free';
          font-weight: 400;
          content: "\f057";
          color: $oa-red;
          font-size: 23px;
          line-height: 50px;
          position: absolute;
          top: 0;
          right: 15px;
        }
      }
    }
  }

  .side-title {

    @media (min-width: 768px) {
      display: inline;
    }
  }

  .filtres {
    margin-bottom: 10px;
  }
  .collapse,
  .collapse.in,
  .collapsing {
    .btn-primary {
      display: block;
    }
  
    .filter {
      margin-bottom: 40px;
    }
    .back,
    .small-map,
    .calendar {
      margin-bottom: 40px;
    }
  
    .btn-primary,
    .small-map,
    .calendar,
    .filter {
      margin-left: auto;
      margin-right: auto;
    }
    .map,
    .calendar,
    .filter {
      width: 95%;
    }
    .map {
      .mobile-map {
        max-height: 360px;
      }
    }
    .calendar {
      .calmonthnav {
        background: #1d77ce;
        border: 1px solid silver;
        font-weight: 600;
        color: white;
      }
      .calweekdays {
        li {
          background-color: #eee;
        }
      }
    }
    .filter {
      span {
        padding-left: 0;
      }
      .bullet:after {
        outline: 1px solid silver;
        &:hover {
          background-color: #1d77ce;
          border: 5px solid white;
        }
      }
      .side-item {
        display: block;
      }
    }
    .list-group-item label {
      font-weight: normal;
      margin-left: 8px;
    }
    .list-group {
      margin-bottom: 0;
    }
    .total-event {
      background-color: $oa-blue;
      height: 7vh;
      position: fixed;
      left: 0;
      width: 100%;
      z-index: 4000;
      bottom: 0;
      padding: auto;
      display: flex;
      .total-text {
        margin: auto;
        color: #fff;
        font-size: 16px;
      }
    }
  }
  
  #collapse-filters {
    display: block;
    .open-sidebar {
      position: fixed;
      display: block;
      background-color: #fff;
      height: 93vh;
      top: 0;
      padding: 20px;  
      width: 100vw; 
      z-index: 3000;
      overflow: scroll;
    }
  }
  .collapse {
    .open-sidebar,
    .total-event {
      left: 150vw;
    }
  }
  .collapsing {
    .open-sidebar,
    .total-event {
      left: 100%;
      transition: all .6s ease;
    }
  }
  .collapse.in {
    .open-sidebar,
    .total-event {
      left: 0vw;
      transition: all .6s ease;    
    }
  }
}