@media (max-width: 768px) {
    #pickup-dates,
    #pickup-dates > tbody,
    #pickup-dates > tbody > tr {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    #pickup-dates > tbody > tr > td {
      display: block;
      width: 100%;
      text-align: left;
    }
    .xdsoft_inline td {
        padding: 0 !important;
    }
    .xdsoft_datetimepicker{
        --dateTableCellFontSize: 0.5em !important;
    }

  }
/* Force the datepicker to not exceed the screen width on mobile */
.xdsoft_datetimepicker {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box;
}

/* Allow the month/year layout and time panel to wrap gracefully */
.xdsoft_datetimepicker .xdsoft_datepicker,
.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 100% !important;
    float: none !important;
}

/* Handle overflow for the table/time blocks so it's horizontally scrollable if needed */
.xdsoft_calendar table,
.xdsoft_time_box {
    width: 100% !important;
    max-width: 100% !important;
}

/* If you are also using the inline calendar option, restrict its width */
.xdsoft_inline {
    width: 100% !important;
}