/* --- filters calendar ---*/

.ts-date-range-calendar.daterangepicker::before,
.ts-date-range-calendar.daterangepicker::after{display: none;}

.ts-date-range-calendar.daterangepicker{width: auto;}

.ts-date-range-calendar.daterangepicker{margin-top: 4px; padding: 16px 40px 20px 40px; background: #FCFCFC; border: none;
    border-radius: 4px;   box-shadow: 0 16px 16px 4px rgba(0, 0, 0, 0.16);
    color: #505050;  font-family: montserratlight, sans-serif;  font-size: 14px; line-height: 16px;}

.ts-date-range-calendar.daterangepicker .drp-calendar { max-width: 100%;}

.ts-date-range-calendar.daterangepicker .drp-calendar.left { padding: 0;}
.ts-date-range-calendar.daterangepicker .drp-calendar.left .calendar-table { padding-right: 20px;}
.ts-date-range-calendar.daterangepicker .drp-calendar.right {padding: 0;}

.ts-date-range-calendar.daterangepicker .drp-calendar .calendar-table {border: none;  background: transparent;}


.ts-date-range-calendar .table-condensed > thead > tr > th,
.ts-date-range-calendar .table-condensed > tbody > tr > th,
.ts-date-range-calendar .table-condensed > tfoot > tr > th,
.ts-date-range-calendar .table-condensed > thead > tr > td,
.ts-date-range-calendar .table-condensed > tbody > tr > td,
.ts-date-range-calendar .table-condensed > tfoot > tr > td { padding: 0;}

.ts-date-range-calendar.daterangepicker .calendar-table th.month{color: #2E2E2E;  font-size: 16px; line-height: 20px;
    font-family:montserratmedium, sans-serif; font-weight: normal; margin-bottom: 16px;}

.ts-date-range-calendar.daterangepicker .calendar-table .next span,
.ts-date-range-calendar.daterangepicker .calendar-table .prev span { border-color: #505050; }


.ts-date-range-calendar.daterangepicker .calendar-table th{color: #707070; font-weight: normal;
    font-family: montserratlight, sans-serif; padding: 8px 4px;
    min-width: 42px;  width: 42px;  height: 42px;font-size: 14px; line-height: 16px;}



.ts-date-range-calendar.daterangepicker .calendar-table td{ color: #505050;
    font-family:montserratregular, sans-serif; font-weight: normal;
    min-width: 42px;  width: 42px;  height: 42px;font-size: 14px; line-height: 16px;}

/* calendar buttons on footer */
.ts-date-range-calendar.daterangepicker .calendar-table td.off.ends.off{color: #EAEAEA;  background: #FCFCFC;}
.ts-date-range-calendar.daterangepicker .calendar-table td.off{color: #CBCBCB; background: #FCFCFC;}

.ts-date-range-calendar.daterangepicker .calendar-table td.off.ends.available{color: #A8A8A8;}


.ts-date-range-calendar.daterangepicker th.available:hover {background: #EEEEEE; border-radius: 4px;}

.ts-date-range-calendar.daterangepicker td.available:hover{  color: #2E2E2E;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"> <path fill="%23fff" stroke="%23cf1c34" d="m21,.5h0c11.32,0,20.5,9.18,20.5,20.5h0c0,11.32-9.18,20.5-20.5,20.5h0C9.68,41.5.5,32.32.5,21h0C.5,9.68,9.68.5,21,.5Z"/> </svg>') no-repeat;
    background-size: 42px 42px;
    background-position-y: 0;
    background-position-x: 0;
}


.ts-date-range-calendar.daterangepicker td.off,
.ts-date-range-calendar.daterangepicker td.off.in-range,
.ts-date-range-calendar.daterangepicker td.off.start-date,
.ts-date-range-calendar.daterangepicker td.off.end-date {
    background-color: #FCFCFC; border-color: transparent; color: inherit;}

.ts-date-range-calendar.daterangepicker td.in-range,
.ts-date-range-calendar.daterangepicker td.in-range:hover{background: #FFEBF0; border-color: transparent; color: #707070;}




.ts-date-range-calendar.daterangepicker td.active{}

.ts-date-range-calendar.daterangepicker td.start-date,
.ts-date-range-calendar.daterangepicker td.start-date:hover,
.ts-date-range-calendar.daterangepicker td.start-date.in-range{border-radius: 0; color: #fff;
    background: #FCFCFC url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"> <path fill="%23ffebf0"  d="m42,0h-21c-5.57,0-10.91,2.21-14.85,6.15C2.21,10.09,0,15.43,0,21s2.21,10.91,6.15,14.85c3.94,3.94,9.28,6.15,14.85,6.15h21V0Z"/>  <circle fill="%23cf1c34" cx="21" cy="21" r="21" /> </svg>') no-repeat;
    background-size: 42px 42px;
    background-position-y: 0;
    background-position-x: 0;
}
.ts-date-range-calendar.daterangepicker td.end-date,
.ts-date-range-calendar.daterangepicker td.end-date:hover,
.ts-date-range-calendar.daterangepicker td.end-date.in-rang{border-radius: 0; color: #fff;
    background: #FCFCFC url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"> <path fill="%23ffebf0"  d="m0,0h21c5.57,0,10.91,2.21,14.85,6.15,3.94,3.94,6.15,9.28,6.15,14.85s-2.21,10.91-6.15,14.85c-3.94,3.94-9.28,6.15-14.85,6.15H0V0Z"/>  <circle fill="%23cf1c34" cx="21" cy="21" r="21" /> </svg>') no-repeat;
    background-size: 42px 42px;
    background-position-y: 0;
    background-position-x: 0;
}

.ts-date-range-calendar.daterangepicker td.start-date.end-date { border-radius: 50px; background: #cf1c35; color: #fff;}



/* calendar period on footer */
.ts-date-range-calendar.daterangepicker .drp-selected{display: none;}

/* calendar buttons on footer */
.ts-date-range-calendar.daterangepicker .drp-buttons {  padding: 24px 0 0 0;  border: none; display: flex !important;
    justify-content: flex-end; width: 100%;  }
.ts-date-range-calendar.daterangepicker .drp-buttons .btn{display: flex; align-items: center; justify-content: center;
    width: 146px; height: 40px; border-radius: 4px; font-family:montserratmedium, sans-serif;
    font-size: 14px; font-weight: normal;  padding: 0 8px;}

.ts-date-range-calendar.daterangepicker .drp-buttons .btn-default{background: transparent;
    border: 1px solid #EAEAEA; color: #2F2F2F; }
.ts-date-range-calendar.daterangepicker .drp-buttons .btn-primary{color: #fff; background: #cf1c35; border: none; }
.ts-date-range-calendar.daterangepicker .drp-buttons .btn-primary[disabled]{background: #EEEEEE; color: #858585;}

.ts-date-range-calendar.daterangepicker .drp-buttons .btn-default{margin: 0 8px 0 0;}
.ts-date-range-calendar.daterangepicker .drp-buttons .btn-primary{margin: 0 0 0 8px;}



@media (max-width: 992px){

    /* calendar buttons on footer */
    .ts-date-range-calendar.daterangepicker{padding: 0;}

    .ts-date-range-calendar.daterangepicker .drp-calendar.right{padding: 20px 24px;}
    .ts-date-range-calendar.daterangepicker .drp-buttons{padding: 16px 24px;}

    .ts-date-range-calendar.daterangepicker .drp-buttons .btn { width: calc( 50% - 4px);}
    .ts-date-range-calendar.daterangepicker .drp-buttons { position: relative; box-shadow: 0 -20px 20px 0 rgba(0, 0, 0, 0.04);}

}


@media (max-width: 767px){

    .ts-date-range-calendar.daterangepicker{left: calc(50vw - 172px) !important; top: calc(50vh - 228px) !important;
        width: 343px !important; position: fixed;}
    .frozen {height: 100%; overflow: hidden; width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0;}
}


@media (max-width: 360px){

    .ts-date-range-calendar.daterangepicker .calendar-table th,
    .ts-date-range-calendar.daterangepicker .calendar-table td{ min-width: 36px;  width: 36px;  height:36px;}


    .ts-date-range-calendar.daterangepicker{left: calc(50vw - 150px) !important; width: 300px !important;
        top: calc(50vh - 204px) !important;}

    .ts-date-range-calendar.daterangepicker td.available:hover,
    .ts-date-range-calendar.daterangepicker td.start-date,
    .ts-date-range-calendar.daterangepicker td.start-date:hover,
    .ts-date-range-calendar.daterangepicker td.start-date.in-range,
    .ts-date-range-calendar.daterangepicker td.end-date,
    .ts-date-range-calendar.daterangepicker td.end-date:hover,
    .ts-date-range-calendar.daterangepicker td.end-date.in-rang{  background-size: 36px 36px; }

}