@media only screen and (max-device-width: 800px) and (orientation: portrait)  {

  .dateBox  {
    min-width: 20%;
    height: auto;
    padding: 0 1% 0 1%;
    font-size: 1em;
  }


  .schedule-topPanel {
    width: 35%;
    /* height: 25%; */
  }

  .schedule-LP-time {
    width: 35%;
  }

  .schedule-RP-Slots {
    width: 100%;
  }

  .time-Block-time {
    font-size: 3vw;
  }

  .cort-title-box {
    width: 35%;
    height: none;
  }

  .courtImage-Number {
    font-size: 20vw;
  }

  .cort-title h1 {
    margin-top: 10%;
    font-size: 3vw;
  }

  .cortBookingBox {
    width: 28%;
    font-size: 2.5vw;
  }

  .cort-title-image {
    height: 60%;
  }

  .addBoking-Popup {
    width: 90%;
    left: 5%;
  }

  .addBoking-body img {
    font-size: 8vw;
  }

  .addBoking-body-info {
    font-size: 3vw;
  }

  .addBoking-body p {
    font-size: 4vw;
  }

  .addBoking-body-info-extra label {
    font-size: 2.5vw;
  }

  .addBoking-body-info-extra input[type="checkbox"] {
    width: 2vw;
    height: 2vw;
  }

  .addBoking-button {
    font-size: 4vw;
  }
  .bookingAdminButton {
    font-size: 4vw;
  }
}

@media only screen and (max-device-width: 1001px) and (orientation: landscape) {

  .dateBox  {
    left: 0;
    min-width: 14%;
    height: auto;
    padding: 0 1% 0 1%;
    font-size: 1em;
  }


  .closeMobile-Calendar {
    position: absolute;
    width: 100%;
    height: 100%;

    background: #00000026;
    z-index: 5;
  }

  .schedule-LP-calendar {
    display: none;
    position: absolute;
    width: 300%;
    height: 300%;
  }

  .calanderWrapper table {
    font-size: 3vw;
  }

  .calendar {
    height: 70%;
  }





  .mobile-calendar-Btn  {
    display: block;
    width: 100%;
    /* margin: 10% auto; */
    padding-left: 8%;
    text-align: center;
    border-radius: .4em;
    /* background: #e6e6e6; */
    cursor: pointer;
  }

  .mobile-calendar-Btn i {
    font-size: 4em;
    margin: 0 auto;
  }

  .mobile-calendar-Btn img{
    /* font-size: 4em; */
    /* margin: 0 auto; */
    /* padding: 5%; */
    width: 100%;
    /* margin: 10% auto; */
  }







}