.calendar-wrapper {
  display: flex;
  gap: 5em;
}

#mini-calendar {
  width: 20%;

  .clear-filter {
    text-align: end;
  }

  #calendar-obj {
    width: 100% !important;
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;

    .bootstrap-calendar-weekday-row .text-warning {
      color: #0d3863 !important;
    }

    .js-weekdays {
      background-color: #cedfef;

      .js-day-name-short {
        color: #656363 !important;
      }
    }

    .js-weeks {
      .text-warning {
        color: #0d3863 !important;
      }

      .text-bg-primary {
        background-color: #0d3863 !important;
        color: #f7f7f7 !important;
      }

      .bootstrap-calendar-week{
        background-color: #cedfef;
        color: #656363 !important;
      }

      .bootstrap-calendar-day{
        div{
          font-size: 1.1em !important;
        }
      }

      .bootstrap-calendar-day:has(small.bg-danger){
        border-radius: 50% !important;
        overflow: hidden;
        background-color: #0d3863;
        color: #ffffff;
        border: 5px solid #ffffff !important;

        small.bg-danger{
          background-color: transparent !important;
          color: transparent !important;
        }

        div {
          font-weight: bold;
        }
      }

      .bootstrap-calendar-day:not(:has(small.bg-danger)){
        div {
          font-weight: normal;
        }
      }
    }
    .js-day-name {
      display: none;
    }
    /* .js-day-name:hover {
      cursor: pointer;
      background-color: #0d3863 !important;
      color: #f7f7f7 !important;
    } */

    .p-2.js-collapse{
      padding: 0 !important;
    }
  }

  #calendar-obj > div:first-child,
  #calendar-obj > div:nth-child(2) {
    background-color: #0d3863;
    color: #f7f7f7;
  }

  #calendar-obj > div:nth-child(2) a {
    color: #f7f7f7f7 !important;
  }

  #calendar-obj > div:nth-child(2) a:hover {
    color: #0d3863 !important;
    background-color: #f7f7f7;
  }

  #organisers {
    #collapseOne.accordion-collapse.collapse {
      display: none;
    }

    #collapseOne.accordion-collapse.collapse.show {
      display: block;
    }

    .accordion-button::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    #headingOne .accordion-button {
      background-color: #0d3863;
      color: #f7f7f7;
    }

    #headingOne .accordion-button::after {
      color: #f7f7f7;
    }

    .accordion-body {
      padding: 0;

      ul {
        padding: 0;
        list-style-type: none;
        margin-bottom: 0;

        li {
          border-bottom: 1px solid #0d3863;
          padding: 0.5em;

          a {
            text-decoration: none;
            color: #0d3863;
            font-size: 1.3em;
          }
        }

        li:hover {
          background-color: #0d3863;
        }

        li:hover a {
          color: #f7f7f7;
        }

        li:last-child {
          border: none;
        }
      }
    }
  }
}

.calendar-events >div:first-child{
  margin-top: 2em;
}

.calendar-events > div:last-child {
  border-bottom: none;
}

.calendar-events {
  width: 60%;

  .current-events,
  .future-events,
  .past-events,
  .that-day-events,
  .ongoing-events {
    margin: 5em 2em;
    border-bottom: 4px solid #0d3863;

    h2 {
      font-size: 3em;
    }
  }

  h2 {
    padding-left: 1.5em;
  }
  .event {
    margin: 1.5em 0;

    a {
      display: flex;
      gap: 0.5em;
      min-height: 15em;
      text-decoration: none;
      color: #1d1d1d;

      .date-panel {
        min-width: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .big-date {
          margin: 0 1em;
          background-color: #0d3863;
          color: #f7f7f7;
          display: flex;
          flex-direction: column;
          text-align: center;
          justify-content: center;
          width: 110px;
          height: 110px;
          border: 7px solid #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);

          p {
            font-weight: bold;
            margin: 0;
          }

          .big-date-num {
            font-size: 3em;
          }

          .big-date-month  {
            font-size: 1.1em;
          }

        }

        .ongoing {
          text-align: center;

          p {
            margin: 0.5em;
            font-weight: bold;
          }
        }
      }

      .event-info {
        padding: 0 0.5em 1em 0.5em;
        width: 60%;

        .event-dates {
          margin: 0.5em 0;
          p {
            margin: 0;
          }
        }
      }

      .event-image {
        width: 12em;
        min-width: 12em;
        overflow: hidden;
        display: flex;
        justify-content: center;

        img {
          width: 12em;
          height: 12em;
          object-fit: cover;
        }
      }
    }
  }

  .that-day-events h2,
  .ongoing-events h2,
  .no-events {
    padding-left: 1.5em;
  }

  .no-events {
    font-size: 1.5em;
    margin-top: 2em;
  }
}

@media (max-width: 1400px) {

  #mini-calendar {
    width: 25%;
  }
}


@media (max-width: 800px) {
  .calendar-wrapper {
    flex-direction: column;
    gap: 2em;

    .calendar-events {
      width: 100%;

      .current-events,
      .future-events,
      .past-events,
      .that-day-events,
      .ongoing-events {
        h2 {
          padding-left: 0;
        }
      }

      .events .event-info {
        margin : 0 1.5em;
      }
    }
  }

  #mini-calendar {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;

    #calendar-obj{
      width: 50% !important;
    }
    
    #organisers {
      width: 100%;
    }
  }
}

@media (max-width: 500px) {
  .calendar-wrapper .events .event .event-image {
    display: none;
  }
}