/* CSS Document */ #FilterContainer { width: 100%; margin: 60px auto 100px; background: #fff; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); position: relative; } #FilterForm { display: flex; padding: 20px; transition: opacity 0.5s; gap: 15px; } #FilterForm.loading { opacity: 0.3; } #FilterContainer .spinner { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); text-align: center; } #FilterContainer .spinner i { color: #a440bf; } #FilterForm > .control-group { } #FilterForm #dates { width: 280px; border: 1px solid #e9e9e9; border-radius: 8px; padding: 13px 15px; outline: none; } #FilterForm #dates:focus { background: #f9f9f9; } #FilterForm #property-id, #FilterForm .ui-multiselect.property-id, .ui-multiselect-menu.property-id { width: 325px !important; } #FilterForm #room-codes, #FilterForm .ui-multiselect.room-codes, .ui-multiselect-menu.room-codes { width: 240px !important; } /*#FilterForm #view-id, #FilterForm .ui-multiselect.view-id, .ui-multiselect-menu.view-id { width: 160px !important; }*/ /*#FilterForm #accessible { width: 165px; }*/ #FilterForm input[type="submit"] { font-size: 14.5px; width: 168px; padding: 14px 0; } #FilterForm, .select2-container { font-size: 14.5px; } #FilterForm .select2-container--dvcrequest .select2-selection--multiple .select2-selection__choice { padding-left: 15px; } #FilterForm .select2-container--dvcrequest .select2-selection--multiple .select2-selection__rendered li .select2-search__field { padding-left: 15px; } .select2-container--dvcrequest .select2-results__option { padding-left: 15px; padding-right: 15px; } div.narrow h4 { font-size: 20px; font-weight: 300; text-align: center; letter-spacing: 0.03em; color: #231F20; padding: 10px 50px 20px; line-height: 1.4; } div.narrow h4 strong { font-weight: 600; } div.narrow h5 { font-size: 16px; font-weight: 300; text-align: center; letter-spacing: 0.03em; color: #231F20; line-height: 1.4; font-style: italic; } div.narrow h5 strong { font-weight: 600; } #availability-results-table { width: 100%; margin-bottom: 100px; } #availability-results-table > tr.header > td { padding: 60px 0 20px; font-weight: bold; font-size: 24px; color: #1E3A74; } #availability-results-table > tr.header > td a.btn-link { color: #a440bf; } #availability-results-table > tr.availability > td { position: relative; padding: 20px 30px 10px 0; border-top: 1px solid #999; border-bottom: 1px solid #999; transition: background-color 0.3s; } #availability-results-table > tr.availability:hover > td, #availability-results-table > tr.availability.open > td { background: rgba(235, 219, 240, 0.5); } #availability-results-table > tr.availability > td.expand { vertical-align: top; padding: 16px 16px 20px 14px; cursor: pointer; width: 50px; } #availability-results-table > tr.availability > td.expand i { transition: transform 0.5s; } #availability-results-table > tr.availability.open > td.expand i { transform: rotate(90deg); } #availability-results-table > tr.availability > td > div.room-type { font-size: 20px; font-weight: 500; line-height: 1.25; padding-bottom: 6px; padding-right: 180px; cursor: pointer; } #availability-results-table > tr.availability > td > div.occupancy { color: #a440bf; font-style: italic; } #availability-results-table > tr.availability > td > div.price { position: absolute; top: 20px; right: 30px; font-size: 24px; font-weight: 600; color: #a440bf; transition: opacity 0.5s; } #availability-results-table > tr.availability > td > div.price span.badge { font-size: 0.55em; position: relative; top: -4px; } #availability-results-table > tr.availability > td > div.points { position: absolute; top: 52px; right: 30px; font-size: 16px; font-style: italic; transition: opacity 0.5s; } #availability-results-table > tr.availability > td > div.calendar-container { overflow: hidden; max-height: 0; transition: all 0.5s; background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); margin-top: 10px; padding: 0 20px; } #availability-results-table > tr.availability.open > td > div.calendar-container { height: auto; max-height: 500px; padding-top: 20px; padding-bottom: 20px; } #availability-results-table > tr.availability div.calendar-container .legend { display: flex; justify-content: space-evenly; text-align: center; margin-top: 12px; padding-left: 1.2em; padding-right: 1.2em; } #availability-results-table > tr.availability div.calendar-container .legend > div { display: inline-block; } #availability-results-table > tr.availability div.calendar-container .legend > div > span { display: inline-block; width: 16px; height: 16px; border-radius: 10px; border: 1.5px solid #fff; position: relative; top: 2px; margin-left: 20px; } #availability-results-table > tr.availability div.calendar-container .legend > div > span:first-child { margin-left: 0; } #availability-results-table > tr.availability div.calendar-container .spinner i { color: #ebdbf0; color: #a440bf; position: absolute; left: calc(50% - 24px); top: 200px; z-index: 1000; } #availability-results-table > tr.availability div.calendar-container .calendar.loading { opacity: 0.2; } #availability-results-table > tr.availability.open.dates-modified > td > div.price { opacity: 0; } #availability-results-table > tr.availability.open.dates-modified > td > div.points { opacity: 0; } #availability-results-table > tr.availability > td > div.booking-container { overflow: hidden; max-height: 0; padding: 0 20px; transition: all 0.5s ease 0s; } #availability-results-table > tr.availability.open > td > div.booking-container { height: auto; max-height: 220px; padding-top: 40px; padding-bottom: 10px; transition: all 0.5s ease 0.25s; } #availability-results-table > tr.availability > td > div.booking-container .checkin { font-size: 18px; } #availability-results-table > tr.availability > td > div.booking-container .checkin strong { color: #1E3A74; } #availability-results-table > tr.availability > td > div.booking-container .checkout { font-size: 18px; } #availability-results-table > tr.availability > td > div.booking-container .checkout strong { color: #1E3A74; } #availability-results-table > tr.availability > td > div.booking-container .price { color: #a440bf; font-weight: bold; font-size: 30px; line-height: 1; } #availability-results-table > tr.availability > td > div.booking-container .points strong { color: #1E3A74; } #availability-results-table > tr.availability > td > div.booking-container .spinner i { color: #a440bf; } #availability-results-table > tr.availability > td > div.booking-container > .confirmed-reservations-row a.link { font-weight: bold; color: #1E3A74; text-decoration: none; } #availability-results-table > tr.availability > td > div.booking-container > .confirmed-reservations-row a.link:hover { text-decoration: underline; } #availability-results-table > tr.availability .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 5px; opacity: 0; } #availability-results-table > tr.availability.open .fc .fc-toolbar.fc-header-toolbar { opacity: 1; } #availability-results-table .fc .fc-daygrid-event-harness { position: static; } #availability-results-table .fc .fc-daygrid-day-events { top: 0; height: 100%; } #availability-results-table .fc .fc-day:not(.fc-day-disabled) .fc-daygrid-day-events:not(:has(.fc-daygrid-event-harness)) { background: #ddd; } #availability-results-table .fc .fc-daygrid-day-number { padding: 2px; text-decoration: none; font-size: 13px; } #availability-results-table .fc .fc-daygrid-day.fc-day-disabled { opacity: 0.4; cursor: not-allowed; background: rgba(0, 0, 0, 0.05); } #availability-results-table .fc .fc-daygrid-day.fc-day-disabled .fc-daygrid-day-frame { pointer-events: none; } #availability-results-table .fc .fc-multimonth { border: 0; overflow: hidden; } #availability-results-table .fc .fc-multimonth .fc-multimonth-month { width: 31% !important; margin-right: 3.5%; } #availability-results-table .fc .fc-multimonth .fc-multimonth-month:last-child { margin-right: 0; } #availability-results-table .fc .fc-multimonth table.fc-multimonth-daygrid-table { height: 250px !important; } #availability-results-table .fc .fc-multimonth-title { padding-top: 0; padding-bottom: 10px; } #availability-results-table .fc .fc-multimonth-singlecol .fc-multimonth-header { background: none; } #availability-results-table .fc .fc-view-harness { height: 300px !important; } #availability-results-table .fc .fc-multimonth-header-table { border: 0; } #availability-results-table .fc .fc-multimonth-header-table .fc-col-header-cell { border-left-color: transparent; border-top-color: transparent; border-right-color: transparent; } #availability-results-table .fc .fc-multimonth-header-table .fc-col-header-cell-cushion { text-decoration: none; font-weight: 500; color: #555; } #availability-results-table .fc .fc-multimonth-singlecol .fc-multimonth-daygrid-table, #availability-results-table .fc .fc-multimonth-singlecol .fc-multimonth-header-table { border-left: 1px solid #ddd; border-right: 1px solid #ddd; } #availability-results-table .fc .fc-daygrid-day-frame { border-bottom: 1px solid #ddd; } #availability-results-table .fc .fc-h-event { width: 24px; height: 24px; border-radius: 12px; cursor: pointer; border-width: 1.5px; margin: 0; position: absolute; top: calc(50% - 8px); left: calc(50% - 12px); } #availability-results-table .fc .fc-h-event.available, #availability-results-table > tr.availability div.calendar-container .legend > div > span.available { background: #9e9; border-color: #8b8; } #availability-results-table .fc .fc-h-event.limited, #availability-results-table > tr.availability div.calendar-container .legend > div > span.limited { background: #ee9; border-color: #bb8; } #availability-results-table .fc .fc-h-event.unavailable, #availability-results-table > tr.availability div.calendar-container .legend > div > span.unavailable { background: #e99; border-color: #b88; } #availability-results-table .fc .fc-header-toolbar .fc-button { font-size: 16px; padding: 6px 12px; border-radius: 8px; border: none; background: #a440bf; color: #fff; line-height: 1; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } #availability-results-table .fc .fc-header-toolbar .fc-button:hover { background: #882299; } #availability-results-table .fc .fc-daygrid-bg-harness .fc-bg-event { background: rgb(164,64,191); } #availability-results-table .fc .fc-daygrid-bg-harness .fc-bg-event.fc-event-start { background: linear-gradient(132deg, transparent 31px, rgb(164,64,191) 31px); } #availability-results-table .fc .fc-daygrid-bg-harness .fc-bg-event.fc-event-end { background: linear-gradient(312deg, transparent 31px, rgb(164,64,191) 31px); } #availability-results-table .fc .fc-daygrid-bg-harness .fc-bg-event.fc-event-start.fc-event-end { background: linear-gradient(132deg, transparent 31px, rgb(164,64,191) 31px, rgb(164,64,191) calc(100% - 31px), transparent calc(100% - 31px)); } #availability-results-table .fc .fc-daygrid-bg-harness .fc-highlight { background: rgba(164,64,191,0.12); pointer-events: none; } #availability-results-table .fc .fc-event-title { display: none; } #availability-faq-section h2 { margin-bottom: 1.5em; } #faqAccordion .accordion-item { position: relative; box-shadow: 0 0 20px rgba(150,150,150,0.15); border: none; margin-bottom: 50px; border-radius: 16px; } #faqAccordion .accordion-button { background: #ecdced; color: #1e3a74; border-radius: 16px 16px 0 0; font-size: 20px; font-weight: bold; padding: 20px 35px 20px 25px; outline: none; } #faqAccordion .accordion-button:active, #faqAccordion .accordion-button:focus { box-shadow: none; outline: none !important; } #faqAccordion .accordion-button.collapsed { border-radius: 16px; } #faqAccordion .accordion-body { padding: 25px; color: #717171; } #faqAccordion .accordion-button::after { transform: translateX(10px) rotate(-180deg); } #faqAccordion .accordion-button:not(.collapsed)::after { transform: translateX(10px); } @media ( max-width: 575px ) { #faqAccordion .accordion-button { padding: 16px 30px 16px 20px; } #faqAccordion .accordion-body { padding: 20px; } } /***********************/ /* Multiselect Styling */ /***********************/ /* RESET */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-state-default .ui-icon, .ui-widget-content, .ui-widget-header, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon { background: none; border: 0; } .ui-state-default { padding: 13px 15px; border: 1px solid #e9e9e9; border-radius: 8px; color: #777; font-size: 14.5px; font-family: DMSans; text-align: left; } .ui-state-active { border-radius: 8px 8px 0 0; } .ui-state-active.ui-opens-up { border-radius: 0 0 8px 8px; } .ui-state-default .ui-icon { display: none; } .ui-multiselect-menu { display: none; border: 1px solid #e9e9e9; border-radius: 0 0 8px 8px; border-width: 0 1px 1px; background: #fff; font-size: 14.5px; font-family: DMSans; } .ui-multiselect-menu.ui-opens-up { border-radius: 8px 8px 0 0; border: 1px solid #e9e9e9; border-width: 1px 1px 0; } .select2-container--dvcrequest .select2-selection--single .select2-selection__rendered { line-height: 23px; } .select2-container--dvcrequest .select2-selection--single { height: 49.75px; } .select2-container--dvcrequest .select2-selection--single .select2-selection__arrow { height: 47.75px; } .ui-multiselect-header { display: none; padding: 6px 12px 0; border: 0; } .ui-multiselect-header .ui-helper-reset { } .ui-multiselect-menu.property-id .ui-multiselect-header .ui-helper-reset li { cursor: pointer; display: inline-block; width: 50% !important; } .ui-multiselect-menu.room-codes .ui-multiselect-header .ui-helper-reset li { cursor: pointer; display: inline-block; width: 100% !important; } .ui-multiselect-menu.view-id .ui-multiselect-header .ui-helper-reset li { cursor: pointer; display: inline-block; width: 100% !important; } .ui-multiselect-header .ui-helper-reset li.ui-multiselect-close { display: none !important; } .ui-multiselect-header .ui-helper-reset li a.btn { padding-left: 0; padding-right: 0; margin-bottom: 6px; width: 100%; } .ui-multiselect-menu.property-id .ui-multiselect-header .ui-helper-reset li a.btn { width: 98%; } .ui-multiselect-menu.property-id .ui-multiselect-header .ui-helper-reset li:nth-child(2) { padding-left: 2%; } .ui-multiselect-checkboxes .ui-multiselect-optgroup .ui-multiselect-grouplabel { text-decoration: none; font-weight: bold; cursor: pointer; padding: 8px 12px 4px; width: 100%; display: inline-block; } .ui-multiselect-checkboxes .ui-multiselect-optgroup .ui-multiselect-grouplabel:hover { background: #ecdced; } .ui-multiselect-checkboxes { padding: 0 0 6px; height: 250px !important; overflow: auto !important; } .ui-multiselect-checkboxes li ul { list-style: none; padding-left: 0; } .ui-multiselect-checkboxes li label { display: flex; padding: 10px 12px; border-radius: 0; } .ui-multiselect-checkboxes li label:hover { background: #ecdced; } .ui-multiselect-checkboxes li label input[type="checkbox"] { accent-color: #a440bf; width: 20px; height: 20px; flex: 0 0 20px; } .ui-multiselect-checkboxes li label span { padding-left: 8px; padding-top: 2px; letter-spacing: 0.01em; } .ui-multiselect-checkboxes li label span > small { display: block; font-style: italic; } /*********************/ /* Responsive Styles */ /*********************/ @media ( max-width: 1200px ) { #FilterContainer { width: 740px; margin: 60px calc(50% - 370px) 100px; } #FilterForm { flex-wrap: wrap; } #FilterForm #dates { width: 340px; } #FilterForm .ui-multiselect.property-id, .ui-multiselect-menu.property-id { width: 345px !important; } #FilterForm .ui-multiselect.room-codes, .ui-multiselect-menu.room-codes { width: 340px !important; } #FilterForm #accessible { width: 250px; } #FilterForm input[type="submit"] { width: 345px; } #availability-results-table .fc .fc-multimonth .fc-multimonth-month { width: 48% !important; margin-right: 4%; } } @media ( max-width: 991px ) { #availability-results-table > tr.availability div.calendar-container .legend { padding-left: 0; padding-right: 0; } #availability-results-table > tr.availability.open > td > div.booking-container { padding-top: 20px; } #availability-results-table > tr.availability.open > td > div.booking-container .start-booking-row { text-align: center; } #availability-results-table > tr.availability.open > td > div.booking-container .confirmed-reservations-row a.btn { width: 300px; margin: 20px auto 0; } #availability-results-table > tr.availability > td > div.booking-container .price { line-height: 1.5; } #availability-results-table > tr.availability.open > td > div.booking-container .start-booking-now-button { margin: 10px auto 0; width: 300px; } } @media ( max-width: 767px ) { #FilterContainer { width: 100%; margin-left: 0; margin-right: 0; } #FilterForm .control-group { width: 100%; } #FilterForm #dates, #FilterForm .ui-multiselect.property-id, #FilterForm .ui-multiselect.room-codes, #FilterForm .ui-multiselect.view-id, #FilterForm #accessible, #FilterForm div.submit, #FilterForm input[type="submit"] { width: 100% !important; } .ui-multiselect-menu.room-codes .ui-multiselect-header .ui-helper-reset li, .ui-multiselect-menu.view-id .ui-multiselect-header .ui-helper-reset li { cursor: pointer; display: inline-block; width: 50% !important; } .ui-multiselect-menu.property-id, .ui-multiselect-menu.room-codes, .ui-multiselect-menu.view-id { width: calc(100vw - 10vw - 40px) !important; } .ui-multiselect-menu.room-codes .ui-multiselect-header .ui-helper-reset li a.btn, .ui-multiselect-menu.view-id .ui-multiselect-header .ui-helper-reset li a.btn { width: 98%; } .ui-multiselect-menu.room-codes .ui-multiselect-header .ui-helper-reset li:nth-child(2), .ui-multiselect-menu.view-id .ui-multiselect-header .ui-helper-reset li:nth-child(2) { padding-left: 2%; } #availability-results-table .fc .fc-multimonth .fc-multimonth-month { width: 100% !important; margin-right: 0; } } @media ( max-width: 750px ) { #availability-results-table > tr.availability div.calendar-container .legend > div { display: flex; flex-direction: column; align-items: center; padding: 0 10px; line-height: 1.1; } #availability-results-table > tr.availability div.calendar-container .legend > div > span { margin-bottom: 5px; } } @media ( max-width: 575px ) { #availability-results-table > tr.header > td { text-align: center; } #availability-results-table > tr.header > td a.btn-link { display: block; } #availability-results-table > tr.availability > td > div.room-type { padding-right: 0; } #availability-results-table > tr.availability > td > div.price { position: static; } #availability-results-table > tr.availability > td > div.price span.badge { position: static; top: auto; } #availability-results-table > tr.availability > td > div.points { position: static; } #availability-results-table > tr.availability > td > div.calendar-container { margin-left: -40px; padding: 0 15px; } #availability-results-table > tr.availability > td > div.booking-container { margin-left: -40px; padding-top: 15px; } #availability-results-table > tr.availability > td > div.booking-container .booking-row { text-align: center; } #availability-results-table > tr.availability > td.room { padding-right: 10px; } #availability-results-table .fc .fc-multimonth-multicol .fc-multimonth-month { padding-left: 0; padding-right: 0; } } @media ( max-width: 400px ) { #availability-results-table > tr.availability.open > td > div.booking-container .confirmed-reservations-row a.btn, #availability-results-table > tr.availability.open > td > div.booking-container .start-booking-now-button { width: 225px; padding-left: 0; padding-right: 0; } #availability-results-table > tr.availability div.calendar-container .legend { flex-direction: column; } #availability-results-table > tr.availability div.calendar-container .legend > div { flex-direction: row; } #availability-results-table > tr.availability div.calendar-container .legend > div > span { margin-right: 6px; } }