@import "vue2-datepicker/index.css";

//DATEPICKER

.mx-calendar {
    width: 50%;
    @media screen and (max-width: 750px) {
      width: 100% ;
    }
  }
  .mx-calendar-panel-date {
      width: 50%;
      @media screen and (max-width: 750px) {
        width: 100%;
     }
  }
  .input-date {
    @media screen and (max-width: 750px) {
        flex-direction: column;
     }
  }
  
  .input--md {
    @media screen and (max-width: 750px) {
      width: 100%;
    }
  }
  
  .mx-range-wrapper {
    background-color: transparent ;
  
    @media screen and (max-width: 750px) {
      width: auto ;
  
      .mx-calendar:nth-child(2) {
        display: none;
      }
    }
  }
  
  .half-day-arrival {
    background: linear-gradient(to left, #F3F3F3 50%, transparent 50%);
  }
  .half-day-departure {
    background: linear-gradient(to right, #F3F3F3 50%, transparent 50%);
  }