.daterangepicker {
    width: fit-content;
    border-radius: 16px;
    box-shadow: 0 2px 8px 0 #3C3C3C26;
    border: 0;
}

.daterangepicker::before,
.daterangepicker::after {
    border: 0;
}

.daterangepicker .drp-calendar {
    max-width: fit-content !important;
}

.daterangepicker .drp-calendar table {
    border-collapse:separate;
    border-spacing: 6px;
}

.daterangepicker .drp-calendar.left {
    padding: 6px 0 6px 6px;
}

.daterangepicker .drp-calendar.right {
    padding: 6px;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    font-family: Poppins, 'sans-serif';
    height: 36px;
    width: 36px;
    border: 0;
}

.daterangepicker .calendar-table th.month {
    font-size: 14px;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 5px 0;
}

.daterangepicker .calendar-table td {
    font-size: 12px;
    position: relative;
}

.daterangepicker .calendar-table thead tr:nth-child(2) th {
    color: #6D7D88;
    font-size: 12px;
}

.daterangepicker .calendar-table td:not(:last-child)::after {
    content: '';
    display: block;
    height: 36px;
    width: 6px;
    background-color: transparent;
    position: absolute;
    right: -6px;
    top: 0;
}

.daterangepicker .calendar-table td:not(:first-child)::before {
    content: '';
    display: block;
    height: 36px;
    width: 6px;
    background-color: transparent;
    position: absolute;
    left: -6px;
    top: 0;
}

@media (min-width: 640px) {
    .daterangepicker .drp-calendar table {
        border-spacing: 12px;
    }

    .daterangepicker .drp-calendar.left {
        padding: 12px 0 12px 12px;
    }

    .daterangepicker .drp-calendar.right {
        padding: 12px;
    }

    .daterangepicker .calendar-table th.month {
        font-size: 20px;
    }

    .daterangepicker .calendar-table td {
        font-size: 16px;
    }

    .daterangepicker .calendar-table thead tr:nth-child(2) th {
        font-size: 14px;
    }

    .daterangepicker .calendar-table td:not(:last-child)::after,
    .daterangepicker .calendar-table td:not(:first-child)::before {
        width: 12px;
    }

    .daterangepicker .calendar-table td:not(:first-child)::before {
        left: -12px;
    }

    .daterangepicker .calendar-table td:not(:last-child)::after {
        right: -12px;
    }

    .daterangepicker .drp-calendar.left .next.available {
        display: none;
    }
}

.daterangepicker .calendar-table thead tr:first-child {
    height: 56px;
}

.daterangepicker .calendar-table thead tr:first-child th {
    vertical-align: top;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border: 0;
    height: 40px;
    width: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.7779 12.7786C16.1684 12.3881 16.1684 11.7549 15.7779 11.3644L8.70684 4.29334C8.31632 3.90281 7.68315 3.90281 7.29263 4.29334C6.9021 4.68386 6.9021 5.31703 7.29263 5.70755L13.6566 12.0715L7.29263 18.4355C6.9021 18.826 6.9021 19.4592 7.29263 19.8497C7.68315 20.2402 8.31632 20.2402 8.70684 19.8497L15.7779 12.7786Z' fill='black'/%3E%3C/svg%3E");
    padding: 4px;
}

.daterangepicker .calendar-table .next span {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.daterangepicker .calendar-table .prev span {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.daterangepicker th.available:hover {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
}

.daterangepicker th.available:hover span {
    background-color: #eee;
    border-color: transparent;
    color: inherit;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.daterangepicker td.active,
.daterangepicker td.in-range,
.daterangepicker td.active:hover {
    background-color: #00B5E2;
}

.daterangepicker td.start-date:not(:last-child)::after,
.daterangepicker td.in-range:not(.off):not(:last-of-type):not(:first-of-type)::after,
.daterangepicker td.start-date:not(:last-child)::before,
.daterangepicker td.in-range:not(.off):not(:last-of-type)::before {
    background-color: #00B5E2;
}

.daterangepicker td.in-range:not(.off):last-of-type::after,
.daterangepicker td.in-range:not(.off):not(.end-date):not(.weekend):last-of-type::before {
    background-color: white;
}

.daterangepicker td.start-date.active::before,
.daterangepicker td.end-date.in-range::after {
/*.daterangepicker td.active.start-date.available::after {*/
    background-color: transparent !important;
}

.daterangepicker td.active.start-date.available + .daterangepicker td.in-range:not(.off):hover::before {
    background-color: #00B5E2;
}

.daterangepicker td.start-date.end-date::after,
.daterangepicker td.off.in-range::after,
.daterangepicker td.start-date.end-date::before {
    background-color: transparent !important;
}

.daterangepicker td.off.in-range::before,
.daterangepicker td.available:not(.in-range)::before {
    background-color: white;
    z-index: 9999;
}

.daterangepicker .td.available.in-range:first-of-type:last-of-type::before {
    background-color: white !important;
}

.daterangepicker td.in-range.available:not(:first-of-type):not(:last-of-type):hover::after,
.daterangepicker td.in-range.available:not(:last-of-type):hover::before {
    background-color: transparent !important;
}

.daterangepicker td.weekend.in-range + .daterangepicker td.in-range:hover::before {
    background-color: #00B5E2 !important;
}

.daterangepicker td.in-range.available + .daterangepicker td.off.ends::before {
    z-index: 9999;
    background-color: white;
}

.daterangepicker td.in-range {
    color: white;
}

.daterangepicker td.start-date {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.daterangepicker td.start-date {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.daterangepicker td.end-date{
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.daterangepicker td.start-date.end-date {
    border-radius: 9999px;
}

.daterangepicker td.start-date:hover,
.daterangepicker td.end-date:hover,
.daterangepicker td.start-date.end-date:hover {
    background-color: #eee !important;
    color: black;
}