/* All styles in this file should be namespaced with
   .parkingpro-theme-default.parkingpro-customer-portal
   for stricter theme isolation.
*/
/* If you add more styles below, make sure to always start selectors with:
   .parkingpro-theme-default.parkingpro-customer-portal
   For example:
   .parkingpro-theme-default.parkingpro-customer-portal .my-class { ... }
   .parkingpro-theme-default.parkingpro-customer-portal #my-id { ... }
*/


.parkingpro-theme-default.parkingpro-customer-portal .parkingpro-customer-portal-svg-icon {
     /* ParkingPro color #1caf9a */
	/* Use https://codepen.io/sosuke/pen/Pjoqqp to determine filter */
    filter: invert(51%) sepia(90%) saturate(369%) hue-rotate(122deg) brightness(93%) contrast(93%);
}









/* FLATPICKR */
.pp-customer-portal-theme-default .customer_portal_datetime_overlay {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 5px #00000026, 0px -2px 2px var(--pp-customer-portal-main-color);
}
.pp-customer-portal-theme-default .customer_portal_datetime_overlay:before {
    border-bottom: 15px solid var(--pp-customer-portal-main-color);
}
.pp-customer-portal-theme-default .customer_portal_datetime_overlay:after {
    border-bottom: 15px solid #f2f2f2;
}
.pp-customer-portal-theme-default .flatpickr-day.selected,
.pp-customer-portal-theme-default .flatpickr-day.startRange,
.pp-customer-portal-theme-default .flatpickr-day.endRange,
.pp-customer-portal-theme-default .flatpickr-day.selected.inRange,
.pp-customer-portal-theme-default .flatpickr-day.startRange.inRange,
.pp-customer-portal-theme-default .flatpickr-day.endRange.inRange,
.pp-customer-portal-theme-default .flatpickr-day.selected:focus,
.pp-customer-portal-theme-default .flatpickr-day.startRange:focus,
.pp-customer-portal-theme-default .flatpickr-day.endRange:focus,
.pp-customer-portal-theme-default .flatpickr-day.selected:hover,
.pp-customer-portal-theme-default .flatpickr-day.startRange:hover,
.pp-customer-portal-theme-default .flatpickr-day.endRange:hover,
.pp-customer-portal-theme-default .flatpickr-day.selected.prevMonthDay,
.pp-customer-portal-theme-default .flatpickr-day.startRange.prevMonthDay,
.pp-customer-portal-theme-default .flatpickr-day.endRange.prevMonthDay,
.pp-customer-portal-theme-default .flatpickr-day.selected.nextMonthDay,
.pp-customer-portal-theme-default .flatpickr-day.startRange.nextMonthDay,
.pp-customer-portal-theme-default .flatpickr-day.endRange.nextMonthDay {
    background: var(--pp-customer-portal-main-color) !important;
    border-color: var(--pp-customer-portal-main-color) !important;
}
.pp-customer-portal-theme-default .customer_portal_datetime_overlay_content .flatpickr-day.inRange {
    -webkit-box-shadow: -5px 0 0 var(--pp-customer-portal-main-color), 5px 0 0 var(--pp-customer-portal-main-color) !important;
    box-shadow: -5px 0 0 var(--pp-customer-portal-main-color), 5px 0 0 var(--pp-customer-portal-main-color) !important;
    background: var(--pp-customer-portal-main-color) !important;
    border-color: var(--pp-customer-portal-main-color) !important;
}
.pp-customer-portal-theme-default .customer_portal_datetime_overlay_content .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
    -webkit-box-shadow: -2px 0 0 var(--pp-customer-portal-main-color), 5px 0 0 var(--pp-customer-portal-main-color) !important;
    box-shadow: -2px 0 0 var(--pp-customer-portal-main-color), 5px 0 0 var(--pp-customer-portal-main-color) !important;
}
.pp-customer-portal-theme-default .flatpickr-day.selected.startRange,
.pp-customer-portal-theme-default .flatpickr-day.startRange.startRange,
.pp-customer-portal-theme-default .flatpickr-day.endRange.startRange {
    -webkit-box-shadow: 5px 0 0 var(--pp-customer-portal-main-color) !important;
    box-shadow: 5px 0 0 var(--pp-customer-portal-main-color) !important;
}