:root {
    --border-grey: #F2F2F2;
    --selected-grey: #E0E3E3;
}

/* Booking mask > Calendario */
.template_calendar { padding: 10px; position: absolute; top: 0; left: 0; width: 50%;  background-color: var(--white); }
.template_calendar.cal-open:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: var(--white); opacity: .9; }
.calendar_dates_info { padding: 10px; width: calc(100% - 30px); position: absolute; z-index: 1; left: calc(100% + 30px); color: var(--black); border-bottom: 1px solid var(--color1); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: center; align-items: center; justify-content: space-between; text-align: center; text-transform: uppercase; }
.calendar_dates_info .date_1_wrapper,
.calendar_dates_info .date_2_wrapper { margin: 0 10px; }
.calendar_dates_info .date_1_label,
.calendar_dates_info .date_2_label,
.calendar_dates_info .num_days_label { margin: 0 0 5px 0; font-size: var(--size-button); text-transform: uppercase; color: var(--color3); }
.calendar_dates_info .date_1_text,
.calendar_dates_info .date_2_text,
.calendar_dates_info .num_days_control { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: center; align-items: center; justify-content: center; text-align: center; color: var(--color2); }
.calendar_dates_info .remove_day_selector:before,
.calendar_dates_info .add_day_selector:before { margin: 0 10px; font-family: var(--font-icon); content: "\f0fe"; color: var(--color1); font-weight: var(--font-weight-solid); cursor: pointer; font-size: var(--medium);}
.calendar_dates_info .date_1_text:before, .calendar_dates_info .date_2_text:before { display: none; font-family: var(--font-icon); content: "\e0d6"; color: var(--azure); font-weight: var(--light); font-size: var(--medium); margin-right: 7px;}
.calendar_dates_info .remove_day_selector:before { content: "\f146"; }
.calendar_control { padding: 10px; }
.calendar_header { padding: 0; color: var(--color2); font-size: var(--size-button); height: auto; line-height: 40px; text-transform: uppercase;  font-weight: var(--light);}
.calendar_wrapper .fc-calendar .fc-head { background-color: var(--white); color: var(--dark_grey); font-size: var(--size-button); text-transform: uppercase; }
.calendar_wrapper .fc-calendar .fc-body,
.calendar_wrapper .fc-calendar .fc-row,
.calendar_wrapper .fc-calendar .fc-row > div { text-align: center; line-height: 40px;}
.calendar_wrapper .fc-calendar .fc-row > div.fc-past { pointer-events: none; }
.calendar_wrapper .fc-calendar .fc-row > div.fc-past > span.fc-date { color: var(--selected-grey); }
.calendar_wrapper .fc-calendar .fc-row .day-content { padding: 5px; font-size: 65%;}
.calendar_wrapper .fc-calendar .fc-row .day-content .tc-f-minStay,
.calendar_wrapper .fc-calendar .fc-row .day-content .tc-f-roomCount { display: none;}
.calendar_wrapper .fc-calendar .fc-row > div > span.fc-date { text-align: center; font-size: var(--mini); font-weight: var(--font-weight-light); color: var(--color2); position: initial; }
.calendar_wrapper .fc-calendar .fc-row > div.selected.sel-first,
.calendar_wrapper .fc-calendar .fc-row > div.selected.sel-last { background-color: var(--color1); color: var(--white); }
.calendar_wrapper .fc-calendar .fc-row > div.selected.sel-first .day-content,
.calendar_wrapper .fc-calendar .fc-row > div.selected.sel-last .day-content { color: var(--white); }
.calendar_wrapper .fc-calendar .fc-row > div.selected { background: var(--selected-grey); }
.calendar_wrapper .fc-calendar .fc-row > div.selected.sel-first > span.fc-date,
.calendar_wrapper .fc-calendar .fc-row > div.selected.sel-last > span.fc-date {color: var(--white);}
.calendar_wrapper .fc-calendar .fc-row > div {display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 3px;}
.calendar_wrapper .fc-calendar .fc-row div .day-content {padding: 0 !important; font-size: 60% !important; line-height: 0 !important; color: var(--black); display: none;}
.calendar_wrapper .fc-calendar .fc-row div.selected .day-content {color: var(--black);}
.calendar_wrapper .fc-calendar .fc-row > div.IBE-closed { background-color: #f15959; pointer-events: none; }
.calendar_wrapper .fc-calendar .fc-row > div.IBE-closed  > span.fc-date { color: var(--white); }
.controls .prev_month,
.controls .next_month { padding: 0 10px; top: 0; color: var(--black);}
.controls .prev_month { left: 0;}
.controls .next_month { right: 0;}
.pf_cal .template_calendar .fc-calendar .fc-row > div.fc-past { background: repeating-linear-gradient( -45deg , rgb(255, 255, 255), rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); cursor: inherit;}
.pf_cal .template_calendar .fc-calendar .fc-row > div.fc-past > span.fc-date { color: #b5b5b5}
.template_calendar .oob .tc-f-startingPrice { display: none;}
.template_calendar .tc-f-startingPrice:before { content: '\20ac'}
.template_calendar .confirm_btn { display: none; text-align: center; cursor: pointer; padding: 15px; background-color: var(--color1); text-transform: uppercase; color: var(--white); margin-top: 5px}
.fc-calendar .fc-row > div { height: 60px}
.template_calendar .oob, .template_calendar .fc-future.empty-c.empty-p:not(.fc-other-month) {background-color: #f15959; pointer-events: auto; }
.calendar_wrapper .fc-calendar .fc-row > .oob span.fc-date { color: var(--white); }
.fc-calendar .fc-row, .fc-calendar .fc-row > div, .fc-calendar .fc-body { border-color: var(--border-grey);}

.selection_preview { background-color: var(--selected-grey); }
.calendar_wrapper .fc-calendar .fc-row div.selection_preview .day-content {color: var(--black);}

.booking_mask .date .form_element_title { display: none; }
.booking_mask .date.element_6 { display: none; }
.booking_mask form .date_from_html { display: none; }
.booking_mask .template_calendar .oob, .booking_mask .template_calendar .fc-future.empty-c.empty-p:not(.fc-other-month) {background-color: initial; pointer-events: auto; }
.booking_mask .calendar_wrapper .fc-calendar .fc-row > div.selected.sel-first, .booking_mask .calendar_wrapper .fc-calendar .fc-row > div.selected.sel-last { background-color: var(--color1); }
.booking_mask .fc-future.empty-c.empty-p:not(.fc-other-month).selected,
.booking_mask .fc-future.empty-c.empty-p:not(.fc-other-month).selection_preview { background-color: var(--selected-grey); }


@media (max-width: 1023px){
    .booking_mask { margin-top: 0; }
    .booking_mask form .caption-fields { padding-left: 0; }
    .calendar_dates_info { position: inherit; display: none; }
    .booking_mask .date.element_6 { display: block; }
    .booking_mask .date .form_element_title { display: block; }
    .booking_mask form :where(.form.date.element_5, .form.date.element_6) .date-invisible { padding: 10px; height: auto; width: auto; width: 100%; cursor: pointer; text-align: center; }
    .booking_mask .template_calendar.cal-closed { display: none; }
    .template_calendar.cal-open { display: flex; position: fixed; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; background-color: transparent; }
    .template_calendar .confirm_btn { display: block; }
    .booking_mask form :where(.form.date.element_5, .form.date.element_6) { padding: 15px; display: block; background-color: var(--white); }
    .booking_mask form .caption-fields { margin: 0; }
    .booking_mask form .caption-fields .field { width: calc(50% - 10px); text-align: center; }
    .booking_mask form .caption-fields .b_mask .field { width: 100%; }
    .b_mask { margin: 0; }
    .booking_mask form .caption-fields .field.element_13,
    .booking_mask form input[type="submit"] { margin-left: 0; }
    .booking_mask form .caption-fields .field.field.element_19 { padding: 0; }
    .template_calendar.cal-open:before { position: fixed; top: 0; left: 0; z-index: -1; background-color: rgba(0, 0, 0, .7); width: 100%; height: 100%; content: ''; }
    .calendar_control { background-color: var(--white); width: 100%; max-width: 450px; }
}