@media screen and (max-width: 1499px) {
  .calendar-lists {
    padding: 0px 20px;
    height: 650px;
  }

}

@media screen and (max-width: 1399px) {
  .main-wrapper {
    margin-left: 356px;
    padding: 0px 24px;
  }

}

@media screen and (max-width: 1299px) {
  .main-wrapper {
    margin-left: 334px;
    padding: 0px 24px;
  }
}

@media screen and (max-width: 1199px) {
  .main-wrapper {
    margin-left: 0px;
    padding: 0px 24px;
  }

}

@media screen and (max-width: 991px) {

  .day {
    font-size: 23px;
    line-height: 22px;
  }

}

@media screen and (max-width: 767px) {


  .ec-header {
    padding: 12px 12px;
    flex-wrap: wrap;
    gap: 7px;
  }

  .ec-btns {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .calendar-header {
    grid-template-columns: 37px repeat(7, 1fr);
  }

  .day {
    font-size: 23px;
    line-height: 22px;
    width: 100px;
  }

  .time {
    padding: 0px 4px;
    font-size: 12px;
    width: 37px;
  }

  .day-cell {
    min-height: 96px;
    width: max-content;
  }

  .day-cell-item {
    width: 100px;
  }


  .calendar-body {
    display: flex;
    height: 430px;
    overflow: visible;
  }

  .calendar {
    width: 100%;
    max-width: 100%;
    border-radius: 0px;
    overflow: scroll;
    height: 500px;
  }

  .header-infos {
    gap: 11px;
  }

  .header-wrapper {
    gap: 10px;
  }

  .main-wrapper {
    padding: 0px 14px;
  }

  .calendar-lists {
    padding: 0px 11px;
    height: 500px;
  }

  .day-columns {
    /* margin-left: 38px; */
  }

  .calendar-body {
    position: relative;
  }

  .time-column {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 11;
    background: #fff;
  }


}