﻿.daterangepicker {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
    animation: fadeIn 0.25s ease;
}

.daterangepicker .start-date.active,
.daterangepicker .start-date.active:hover,
.daterangepicker .start-date.active.in-range,
.daterangepicker .start-date.active.in-range:hover,
.daterangepicker .end-date.active.in-range,
.daterangepicker .end-date.active.in-range:hover {
    color: #fff !important;
    background-color: #81c5be !important;
    font-weight: 600;
}

.daterangepicker .in-range.available,
.daterangepicker .in-range.available:hover,
.daterangepicker .available:hover {
    color: #000 !important;
    background-color: #81c5be44 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.daterangepicker .drp-calendar {
    padding: 16px 18px !important;
}

.daterangepicker .calendar-table {
    border: none !important;
    width: 100% !important;
}

.daterangepicker th.month {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding-bottom: 6px;
    text-transform: capitalize;
    text-align: center;
}

.daterangepicker td,
.daterangepicker th {
    border: none !important;
    text-align: center;
}

.daterangepicker td {
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    transition: 0.15s ease;
    font-size: 14px;
    line-height: 36px;
    cursor: pointer;
}

.daterangepicker td.off {
    color: #ccc !important;
}

.daterangepicker .drp-buttons {
    border: none !important;
    padding: 0 12px 12px 0 !important;
}

.daterangepicker .drp-buttons .applyBtn {
    color: #fff !important;
    background-color: #81c5be !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background-color: #6db0a9 !important;
}

.daterangepicker .drp-buttons .applyBtn,
.daterangepicker .drp-buttons .cancelBtn {
    border: 0 !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    font-weight: 800 !important;
}

.daterangepicker .drp-buttons .drp-selected {
    display: none !important;
}

@media (max-width: 768px) {
    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right {
        float: none !important;
        width: 100% !important;
    }
}
