/* FORM */
.view-lessons-calendar form {
  margin: 4rem 0rem 3rem 0rem;

  .form-actions {
    margin: 2rem 0 0 0 !important;
  }
}

@media (min-width: 992px) {
  .view-lessons-calendar form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 40px;
    margin: 4rem 0rem 3rem 0rem;

    .form-actions {
      margin: 0 !important;
      display: flex;
      align-items: end;
    }

    .select-wrapper,
    .form-group {
      margin-bottom: 0;
    }
  }
}

/* CALENDAR */
/* calendar widget in /calendario */
body main .js-drupal-fullcalendar {
  .fc-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px 0px;

    button {
      font-size: 14px;
    }
  }

  /* empty mode */
  .fc-list-empty-wrap2 {
    position: relative;
    .fc-list-empty {
      padding: 1rem 0rem;
    }
  }

  /* popup when there is more event in calendar  */
  .fc-popover.fc-more-popover {
    width: 100%;
    left: 0 !important;

    /* close button icon x */
    .fc-header .fc-close {
      opacity: 1;
    }

    .fc-widget-header.fc-widget-header {
      padding: 10px;
    }
  }

  /* container to scroll */
  .fc-scroller {
    height: auto !important;
    max-width: 200vh;
  }

  .fc-list-table {
    td {
      border: 0px solid transparent;
    }
    .fc-list-item {
      padding: 1rem 0;
      /* time */
      .fc-list-item-time {
        padding-bottom: 0;
        font-size: 0.875rem;
      }
      .fc-list-item-title {
        padding-top: 0;
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }

  /* oggi + arrows  */
  .fc-left {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }

  /* month + year */
  .fc-center {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
  }

  /* mese/agenda  */
  .fc-right {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    display: flex;
    justify-content: end;
  }

  /* header  */
  .fc-widget-header {
    font-weight: 400;

    a {
      text-decoration: none;
      font-size: 14px;
    }
  }

  /* calendar view */
  .fc-dayGridMonth-view {
    .fc-widget-header {
      padding: 3px 0px;
      span {
        font-size: 14px;
      }
    }
  }

  /* item in calendar */
  .fc-list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    .fc-list-item-marker {
      display: none;
    }
    a {
      pointer-events: none;
    }
  }
}

@media (min-width: 768px) {
  body main .js-drupal-fullcalendar {
    .fc-list-item {
      flex-direction: row;
    }
  }
}

@media (min-width: 992px) {
  body main .js-drupal-fullcalendar {
    margin-bottom: 4rem;

    .fc-toolbar {
      grid-template-columns: auto auto auto;
      grid-template-rows: auto;
      gap: 12px 0px;
      button {
        font-size: 1.125rem;
      }

      /* oggi + arrows  */
      .fc-left {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
      }

      /* month + year */
      .fc-center {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
      }

      /* mese/agenda  */
      .fc-right {
        grid-column: 3 / span 1;
        grid-row: 1 / span 1;
      }
    }

    & .fc-list-item {
      * {
        width: AUTO;
      }
    }

    .fc-widget-header {
      padding: 14px 34px;
    }

    .fc-list-item {
      flex-direction: row;
    }

    .fc-list-item-time {
      width: 20%;
      display: flex;
      justify-content: end;
      font-size: 1rem;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.5rem;
    }
    .fc-list-item-title {
      width: auto;
      font-size: 1rem;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.5rem;
    }
  }
}