/* ========================================================= NEWHORIZON BOOKING Easy!Appointments ========================================================= */ /* ========================================================= 1. PAGE ========================================================= */ html, body { background: transparent !important; background-color: transparent !important; } #main, #main > .wrapper { background: transparent !important; background-color: transparent !important; } body { color: #eeeeee !important; } #wizard-frame-4 > div.frame-container.py-3 > div.row.frame-content.m-auto.pt-md-4.mb-4 { flex-wrap: nowrap; } ::selection { background: #5C1FD9 !important; color: #ffffff !important; } ::-moz-selection { background: #5C1FD9 !important; color: #ffffff !important; } #notes { resize: none; } .form-control { background: #111111 !important; background-color: #111111 !important; color: #eeeeee !important; border: 1px solid #444444 !important; } #book-appointment-wizard #wizard-frame-3 input.form-control:focus, #book-appointment-wizard #wizard-frame-3 textarea.form-control:focus, #book-appointment-wizard #wizard-frame-3 select.form-select:focus { background: #111111 !important; background-color: #111111 !important; color: #ffffff !important; border-color: #5C1FD9 !important; box-shadow: 0 0 0 2px rgba(92, 31, 217, 0.18) !important; } #book-appointment-wizard #wizard-frame-4 input.form-control:focus, #book-appointment-wizard #wizard-frame-4 textarea.form-control:focus, #book-appointment-wizard #wizard-frame-4 select.form-select:focus { background: #111111 !important; background-color: #111111 !important; color: #ffffff !important; border-color: #5C1FD9 !important; box-shadow: 0 0 0 2px rgba(92, 31, 217, 0.18) !important; } /* ========================================================= 2. FLATPICKR GLOBAL ========================================================= */ .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-calendar .flatpickr-months .flatpickr-month, .flatpickr-calendar .flatpickr-weekdays, .flatpickr-calendar span.flatpickr-weekday { background: #171717 !important; color: var(--bs-white); -webkit-appearance: none; } /* ========================================================= 3. HEADER / FOOTER ========================================================= */ #header, #book-appointment-wizard #header { display: none !important; } #frame-footer, #book-appointment-wizard #frame-footer { display: none !important; } /* ========================================================= 4. MAIN BOOKING WIZARD ========================================================= */ #book-appointment-wizard { width: 1040px !important; max-width: calc(100vw - 32px) !important; flex: 0 0 auto !important; margin-left: auto !important; margin-right: auto !important; background: #171717 !important; background-color: #171717 !important; border: 1px solid #303030 !important; border-radius: 10px !important; box-shadow: none !important; color: #eeeeee !important; } #main > .wrapper { width: 100% !important; max-width: none !important; } /* ========================================================= 5. WIZARD FRAME 2 ========================================================= */ #book-appointment-wizard #wizard-frame-2 { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #171717 !important; background-color: #171717 !important; } #book-appointment-wizard #wizard-frame-2 .frame-container { width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } #book-appointment-wizard #wizard-frame-2 .frame-title { display: none !important; } /* ========================================================= 6. DESKTOP THREE-COLUMN LAYOUT ========================================================= */ #book-appointment-wizard #wizard-frame-2 .frame-content { display: grid !important; grid-template-columns: 280px minmax(0, 1fr) 280px !important; align-items: stretch !important; width: 100% !important; min-height: 500px !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: #171717 !important; background-color: #171717 !important; } #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12 { width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 500px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; } /* ========================================================= 7. LEFT INFORMATION PANEL ========================================================= */ #book-appointment-wizard #wizard-frame-2 .frame-content::before { content: "Ingyenes konzultáció\A\A" "Egy gyors hívás keretében\A" "felmérjük, miben tudok neked\A" "segíteni, rám van-e szüksége a\A" "vállalkozásodnak\A\A" "◷ 30 perc"; display: block !important; width: 280px !important; min-height: 500px !important; box-sizing: border-box !important; padding: 70px 24px 30px !important; background: #171717 !important; background-color: #171717 !important; border-right: 1px solid #303030 !important; color: #a9a9a9 !important; white-space: pre-wrap !important; font-size: 14px !important; line-height: 1.55 !important; } /* ========================================================= 8. CALENDAR COLUMN ========================================================= */ #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:first-of-type { position: relative !important; display: grid !important; grid-template-rows: auto 1fr !important; align-content: start !important; justify-items: stretch !important; width: 100% !important; height: 500px !important; min-height: 500px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; overflow: visible !important; } /* ========================================================= 9. CALENDAR WRAPPER ========================================================= */ #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:first-of-type > .flatpickr-wrapper { position: relative !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 24px !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; background: transparent !important; text-align: center !important; vertical-align: top !important; } /* ========================================================= 10. FLATPICKR CALENDAR ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; background: #171717 !important; background-color: #171717 !important; background-image: none !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; color: #eeeeee !important; text-align: left !important; } /* ========================================================= 11. FLATPICKR INTERNAL CONTAINERS ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-innerContainer, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-rContainer, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-days, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .dayContainer { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: #eeeeee !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-innerContainer { display: flex !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-rContainer { display: block !important; margin: 0 !important; padding: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-days { display: flex !important; margin: 0 !important; padding: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .dayContainer { padding: 4px 0 8px 0 !important; margin: 0 !important; } /* ========================================================= 12. MONTH HEADER ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-months { position: relative !important; width: 100% !important; height: 58px !important; background: #171717 !important; background-color: #171717 !important; background-image: none !important; border: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-month { position: relative !important; width: 100% !important; height: 58px !important; background: #171717 !important; background-color: #171717 !important; background-image: none !important; } /* ========================================================= 13. MONTH TITLE — DESKTOP ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-current-month { position: absolute !important; top: 50% !important; left: 50% !important; width: max-content !important; height: auto !important; padding: 0 !important; margin: 0 !important; transform: translate(-50%, -50%) !important; display: block !important; background: transparent !important; color: #eeeeee !important; font-size: 27px !important; font-weight: 400 !important; line-height: 1 !important; white-space: nowrap !important; z-index: 3 !important; } /* ========================================================= 14. MONTH HEADER PSEUDO-ELEMENT FIX ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-current-month .numInputWrapper span::before, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-current-month .numInputWrapper span::after { box-sizing: content-box !important; } /* ========================================================= 15. MONTH ARROWS — DESKTOP ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month { position: absolute !important; top: 50% !important; width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; transform: translateY(-50%) !important; color: #aaaaaa !important; fill: #aaaaaa !important; background: transparent !important; line-height: 1 !important; z-index: 4 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month { left: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month { right: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month:hover, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month:hover { color: #ffffff !important; fill: #ffffff !important; } /* ========================================================= 16. WEEKDAYS ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-weekdays { width: 100% !important; height: 40px !important; background: #171717 !important; background-color: #171717 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-weekday { height: 40px !important; line-height: 40px !important; background: #171717 !important; background-color: #171717 !important; color: #eeeeee !important; font-size: 14px !important; font-weight: 500 !important; } /* ========================================================= 17. DATE CELLS ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day { height: 52px !important; max-width: none !important; line-height: 52px !important; margin: 0 !important; box-sizing: border-box !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: #b5b5b5 !important; border: 1px solid transparent !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 400 !important; box-shadow: none !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day:hover { background: #292929 !important; background-color: #292929 !important; color: #ffffff !important; border-color: transparent !important; } /* ========================================================= 18. SELECTED DATE — PURPLE ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.selected, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.startRange, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.endRange { background: #5C1FD9 !important; background: linear-gradient( 316deg, rgba(92, 31, 217, 1) 0%, rgba(43, 0, 130, 1) 93% ) !important; border-color: #3a0575 !important; color: #ffffff !important; } /* ========================================================= 19. TODAY / DISABLED ========================================================= */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.today { border-color: #5C1FD9 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.flatpickr-disabled { background: transparent !important; background-color: transparent !important; color: #555555 !important; cursor: default !important; } /* ========================================================= 20. RIGHT / TIME COLUMN ========================================================= */ #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:last-of-type { position: relative !important; width: 100% !important; height: 500px !important; min-height: 500px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; border-left: 1px solid #303030 !important; overflow: hidden !important; } /* ========================================================= 21. TIME PANEL ========================================================= */ #book-appointment-wizard #select-time { width: 100% !important; height: 500px !important; min-height: 500px !important; max-width: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 56px 20px 20px !important; background: #171717 !important; background-color: #171717 !important; } #book-appointment-wizard #select-time .form-label { display: block !important; margin-bottom: 7px !important; color: #a5a5a5 !important; font-size: 12px !important; } #book-appointment-wizard #select-time .form-select { width: 100% !important; box-sizing: border-box !important; background: #111111 !important; background-color: #111111 !important; color: #eeeeee !important; border: 1px solid #444444 !important; border-radius: 9px !important; box-shadow: none !important; } /* ========================================================= 22. AVAILABLE HOURS ========================================================= */ #book-appointment-wizard #available-hours { width: 100% !important; max-width: none !important; max-height: 380px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; } #book-appointment-wizard #available-hours .available-hour { width: 100% !important; min-height: 42px !important; margin: 0 0 8px 0 !important; padding: 8px 10px !important; box-sizing: border-box !important; background: #111111 !important; background-color: #111111 !important; border: 1px solid #4b4b4b !important; border-radius: 9px !important; color: #eeeeee !important; box-shadow: none !important; font-size: 14px !important; } #book-appointment-wizard #available-hours .available-hour:hover, #book-appointment-wizard #available-hours .selected-hour { background: #5C1FD9 !important; background: linear-gradient( 316deg, rgba(92, 31, 217, 1) 0%, rgba(43, 0, 130, 1) 93% ) !important; border-color: #3a0575 !important; color: #ffffff !important; } /* ========================================================= 23. NAVIGATION ========================================================= */ #book-appointment-wizard #wizard-frame-2 .command-buttons { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 16px 24px !important; background: #171717 !important; border-top: 1px solid #303030 !important; } #book-appointment-wizard #wizard-frame-2 .button-next { background: #5C1FD9 !important; background: linear-gradient( 316deg, rgba(92, 31, 217, 1) 0%, rgba(43, 0, 130, 1) 93% ) !important; border-color: #2B0082 !important; border-radius: 8px !important; color: #ffffff !important; } #book-appointment-wizard #wizard-frame-2 .button-back { background: transparent !important; background-color: transparent !important; border-color: #444444 !important; border-radius: 8px !important; color: #aaaaaa !important; } /* ========================================================= 24. OTHER WIZARD STYLING ========================================================= */ #button-next-3 { background: #5C1FD9 !important; background: linear-gradient( 316deg, rgba(92, 31, 217, 1) 0%, rgba(43, 0, 130, 1) 93% ) !important; border-color: #2B0082 !important; } #button-back-3, #button-back-4 { border: 1px solid #303030 !important; color: #ffffff !important; } #button-back-3:hover, #button-back-4:hover { border: 1px solid #303030 !important; color: #ffffff !important; background: #303030 !important; } .form-label { color: #ffffff !important; } #wizard-frame-4 .frame-container h2.frame-title { color: #ffffff !important; } .text-muted { color: #ffffff !important; } /* ========================================================= 25. MOBILE TWO COLUMNS ========================================================= */ @media (max-width: 991px) { html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } #main, #main > .wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } #main > .wrapper { display: flex !important; justify-content: center !important; align-items: flex-start !important; box-sizing: border-box !important; } #book-appointment-wizard { position: relative !important; left: auto !important; right: auto !important; transform: none !important; width: calc(100% - 32px) !important; max-width: 1040px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; overflow: hidden !important; } #book-appointment-wizard #wizard-frame-2 { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } #book-appointment-wizard #wizard-frame-2 .frame-container { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== MOBILE TWO-COLUMN GRID ===================================================== */ #book-appointment-wizard #wizard-frame-2 .frame-content { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; background: #171717 !important; background-color: #171717 !important; } /* HIDE DESCRIPTION */ #book-appointment-wizard #wizard-frame-2 .frame-content::before { display: none !important; content: none !important; } /* ===================================================== MOBILE CALENDAR COLUMN ===================================================== */ #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:first-of-type { position: relative !important; display: block !important; grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; border: 0 !important; border-right: 1px solid #303030 !important; overflow: visible !important; } #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:first-of-type > .flatpickr-wrapper { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px 8px 22px !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; background: transparent !important; text-align: center !important; } /* ===================================================== MOBILE CALENDAR ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; background: #171717 !important; background-color: #171717 !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; } /* REMOVE FLATPICKR TRIANGLE */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline::before, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline::after { display: none !important; content: none !important; border: 0 !important; background: none !important; } /* INTERNAL WIDTH */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-innerContainer, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-rContainer, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-days, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .dayContainer { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } /* ===================================================== MOBILE MONTH HEADER ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-months { position: relative !important; width: 100% !important; height: 48px !important; background: #171717 !important; background-color: #171717 !important; border: 0 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-month { position: relative !important; width: 100% !important; height: 48px !important; background: #171717 !important; background-color: #171717 !important; } /* ===================================================== MOBILE MONTH TITLE ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-current-month { position: absolute !important; top: 50% !important; left: 50% !important; width: max-content !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; display: block !important; color: #eeeeee !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1 !important; white-space: nowrap !important; z-index: 3 !important; } /* ===================================================== MOBILE MONTH ARROWS ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month { position: absolute !important; top: 50% !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; background: transparent !important; color: #aaaaaa !important; fill: #aaaaaa !important; line-height: 1 !important; z-index: 5 !important; cursor: pointer !important; } /* LEFT ARROW POSITION */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month { left: 8px !important; } /* RIGHT ARROW POSITION */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month { right: 8px !important; } /* ACTUAL SVG CHEVRON */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month svg, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month svg { display: block !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; fill: currentColor !important; } /* ===================================================== MOBILE WEEKDAYS ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-weekdays { width: 100% !important; height: 30px !important; background: #171717 !important; background-color: #171717 !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-weekday { height: 30px !important; line-height: 30px !important; background: #171717 !important; background-color: #171717 !important; color: #eeeeee !important; font-size: 10px !important; font-weight: 500 !important; } /* ===================================================== MOBILE DATE CELLS ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day { width: 14.2857% !important; max-width: 14.2857% !important; height: 39px !important; line-height: 39px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 13px !important; background: transparent !important; background-color: transparent !important; color: #b5b5b5 !important; } /* MOBILE SELECTED DATE */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.selected, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.startRange, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day.endRange { background: #5C1FD9 !important; background: linear-gradient( 316deg, rgba(92, 31, 217, 1) 0%, rgba(43, 0, 130, 1) 93% ) !important; border-color: #3a0575 !important; color: #ffffff !important; } /* ===================================================== MOBILE TIME COLUMN ===================================================== */ #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:last-of-type { position: relative !important; display: block !important; grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; overflow: hidden !important; } /* ===================================================== MOBILE TIME PANEL ===================================================== */ #book-appointment-wizard #select-time { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px 10px 22px !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; } #book-appointment-wizard #select-time .form-label { margin-bottom: 6px !important; font-size: 10px !important; } #book-appointment-wizard #select-time .form-select { width: 100% !important; min-height: 38px !important; padding: 5px 7px !important; font-size: 11px !important; border-radius: 7px !important; } /* ===================================================== MOBILE TIME SLOTS ===================================================== */ #book-appointment-wizard #available-hours { width: 100% !important; max-width: none !important; max-height: 390px !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } #book-appointment-wizard #available-hours .available-hour { width: 100% !important; min-height: 39px !important; margin: 0 0 7px 0 !important; padding: 7px 4px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 12px !important; } /* ===================================================== MOBILE NAVIGATION ===================================================== */ #book-appointment-wizard #wizard-frame-2 .command-buttons { width: 100% !important; margin: 0 !important; padding: 12px 14px !important; box-sizing: border-box !important; background: #171717 !important; border-top: 1px solid #303030 !important; } #book-appointment-wizard #wizard-frame-2 .button-next { min-height: 42px !important; padding-left: 18px !important; padding-right: 18px !important; font-size: 13px !important; } } /* ========================================================= 26. VERY SMALL PHONES ========================================================= */ @media (max-width: 480px) { #wizard-frame-4 > div.frame-container.py-3 > div.row.frame-content.m-auto.pt-md-4.mb-4 { justify-content: center !important; } #captcha-text { max-width:260px !important; } #book-appointment-wizard { width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 8px !important; border-left: 1px solid #303030 !important; border-right: 1px solid #303030 !important; } #book-appointment-wizard #wizard-frame-2 .frame-content > .col-12:first-of-type > .flatpickr-wrapper { padding-left: 4px !important; padding-right: 4px !important; } /* ===================================================== VERY SMALL MOBILE — MONTH HEADER ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-current-month { font-size: 11px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; white-space: nowrap !important; z-index: 3 !important; } /* * Smaller LEFT / RIGHT month navigation buttons. * * These are the month arrows, not the year spinner arrows. */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 5 !important; } /* * Move the buttons right to the outer edges of the * narrow calendar column. */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month { left: 2px !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month { right: 2px !important; } /* * Actual SVG chevrons. */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-prev-month svg, #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-next-month svg { width: 9px !important; height: 9px !important; min-width: 9px !important; min-height: 9px !important; max-width: 9px !important; max-height: 9px !important; } /* ===================================================== VERY SMALL MOBILE — CALENDAR ===================================================== */ #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-day { height: 37px !important; line-height: 37px !important; font-size: 12px !important; } #book-appointment-wizard #wizard-frame-2 .flatpickr-calendar.inline .flatpickr-weekday { font-size: 9px !important; } /* ===================================================== VERY SMALL MOBILE — TIME ===================================================== */ #book-appointment-wizard #select-time { padding-left: 8px !important; padding-right: 8px !important; } #book-appointment-wizard #available-hours .available-hour { min-height: 37px !important; font-size: 11px !important; } /* ========================================================= CUSTOMER INFORMATION — MOBILE Easy!Appointments Wizard Frame 3 ========================================================= */ @media (max-width: 991px) { /* ----------------------------------------------------- Frame 3 container ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; overflow: hidden !important; } #book-appointment-wizard #wizard-frame-3 .frame-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; } /* ----------------------------------------------------- Frame 3 content ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .frame-content { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 28px 24px !important; box-sizing: border-box !important; background: #171717 !important; background-color: #171717 !important; overflow: hidden !important; } /* ----------------------------------------------------- Customer Information title ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .frame-title { width: 100% !important; max-width: 100% !important; margin: 0 0 32px 0 !important; padding: 0 !important; box-sizing: border-box !important; color: #ffffff !important; text-align: center !important; font-size: 32px !important; line-height: 1.2 !important; font-weight: 400 !important; } /* ----------------------------------------------------- Form rows / columns ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #book-appointment-wizard #wizard-frame-3 .row > * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------- Form groups ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .mb-3, #book-appointment-wizard #wizard-frame-3 .mb-4 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------- Labels ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .form-label { display: block !important; width: 100% !important; margin-bottom: 8px !important; color: #ffffff !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 400 !important; } /* ----------------------------------------------------- INPUTS ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 input.form-control, #book-appointment-wizard #wizard-frame-3 textarea.form-control, #book-appointment-wizard #wizard-frame-3 select.form-select { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; background: #111111 !important; background-color: #111111 !important; color: #eeeeee !important; border: 1px solid #444444 !important; border-radius: 9px !important; box-shadow: none !important; font-size: 15px !important; } /* ----------------------------------------------------- Text inputs ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 input.form-control { height: 48px !important; min-height: 48px !important; padding: 10px 13px !important; } /* ----------------------------------------------------- Notes textarea ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 textarea.form-control { min-height: 110px !important; padding: 11px 13px !important; resize: vertical !important; } /* ----------------------------------------------------- Placeholder ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 input.form-control::placeholder, #book-appointment-wizard #wizard-frame-3 textarea.form-control::placeholder { color: #777777 !important; opacity: 1 !important; } /* ----------------------------------------------------- Focus ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 input.form-control:focus, #book-appointment-wizard #wizard-frame-3 textarea.form-control:focus, #book-appointment-wizard #wizard-frame-3 select.form-select:focus { background: #111111 !important; background-color: #111111 !important; color: #ffffff !important; border-color: #5C1FD9 !important; box-shadow: 0 0 0 2px rgba(92, 31, 217, 0.18) !important; } /* ----------------------------------------------------- Required asterisk ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .required { color: #ff4d4d !important; } /* ----------------------------------------------------- Command buttons ----------------------------------------------------- */ #book-appointment-wizard #wizard-frame-3 .command-buttons { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; margin: 20px 0 0 0 !important; padding: 16px 0 0 0 !important; box-sizing: border-box !important; background: #171717 !important; border-top: 1px solid #303030 !important; gap: 12px !important; } #book-appointment-wizard #wizard-frame-3 .command-buttons .button-back, #book-appointment-wizard #wizard-frame-3 .command-buttons .button-next { width: auto !important; min-width: 130px !important; min-height: 48px !important; box-sizing: border-box !important; border-radius: 10px !important; font-size: 15px !important; } } /* ========================================================= CUSTOMER INFORMATION — VERY SMALL PHONES ========================================================= */ @media (max-width: 480px) { #wizard-frame-4 > div.frame-container.py-3 > div.row.frame-content.m-auto.pt-md-4.mb-4 { flex-wrap: wrap; } #book-appointment-wizard #wizard-frame-3 .frame-content { padding: 24px 16px !important; } #book-appointment-wizard #wizard-frame-3 .frame-title { margin-bottom: 28px !important; font-size: 27px !important; } #book-appointment-wizard #wizard-frame-3 .form-label { font-size: 15px !important; margin-bottom: 7px !important; } #book-appointment-wizard #wizard-frame-3 input.form-control { height: 44px !important; min-height: 44px !important; font-size: 14px !important; } #book-appointment-wizard #wizard-frame-3 textarea.form-control { min-height: 100px !important; font-size: 14px !important; } #book-appointment-wizard #wizard-frame-3 .command-buttons { gap: 10px !important; } #book-appointment-wizard #wizard-frame-3 .command-buttons .button-back, #book-appointment-wizard #wizard-frame-3 .command-buttons .button-next { min-width: 0 !important; width: 50% !important; min-height: 44px !important; padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; } }