/* WePro V1.2 date range — single field + presets sidebar + one range calendar */ .wepro-v12-date-range-field__field-label { color: #64748b; display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; } .wepro-v12-date-range-field { --wepro-dr-accent: #4faa32; --wepro-dr-accent-soft: #edf9e9; --wepro-dr-accent-line: #bfe6b5; --wepro-dr-border: #e2e8f0; --wepro-dr-border-hover: #cfd9e8; --wepro-dr-ink: #111827; --wepro-dr-muted: #64748b; --wepro-dr-soft: #f8fafc; position: relative; width: 100%; } .wepro-v12-date-range-field__control { position: relative; width: 100%; } .wepro-v12-date-range-field__display { background: #ffffff; border: 1px solid var(--wepro-dr-border); border-radius: 12px; color: var(--wepro-dr-ink); cursor: pointer; font-size: 14px; font-weight: 500; min-height: 44px; padding: 10px 72px 10px 14px; width: 100%; } .wepro-v12-date-range-field__display:hover:not(:disabled) { border-color: var(--wepro-dr-border-hover); } .wepro-v12-date-range-field__display:focus, .wepro-v12-date-range-field__display:focus-visible { border-color: var(--wepro-dr-border-hover); box-shadow: none; outline: none; } .wepro-v12-date-range-field__display:disabled { background: var(--wepro-dr-soft); color: #94a3b8; cursor: not-allowed; } .wepro-v12-date-range-field__clear, .wepro-v12-date-range-field__toggle { align-items: center; background: transparent; border: none; color: var(--wepro-dr-muted); cursor: pointer; display: flex; height: 44px; justify-content: center; margin: 0; padding: 0; position: absolute; top: 0; width: 36px; } .wepro-v12-date-range-field__clear { right: 36px; } .wepro-v12-date-range-field__toggle { right: 0; width: 44px; } .wepro-v12-date-range-field__clear:hover, .wepro-v12-date-range-field__toggle:hover { color: var(--wepro-dr-accent); } .wepro-v12-date-range-field__clear:focus, .wepro-v12-date-range-field__clear:focus-visible, .wepro-v12-date-range-field__toggle:focus, .wepro-v12-date-range-field__toggle:focus-visible, .wepro-v12-date-range-field__clear:active, .wepro-v12-date-range-field__toggle:active { box-shadow: none; outline: none; } .wepro-v12-date-range-field.is-disabled .wepro-v12-date-range-field__clear, .wepro-v12-date-range-field.is-disabled .wepro-v12-date-range-field__toggle { color: #94a3b8; cursor: not-allowed; pointer-events: none; } .wepro-v12-date-range-field__panel { background: #ffffff; border: 1px solid var(--wepro-dr-border); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14); display: flex; left: 0; max-width: 96vw; min-width: 0; overflow: visible; position: absolute; top: calc(100% + 6px); width: max-content; z-index: 5400; } /* Teleported to while open — always above Bootstrap modals (5000) */ .wepro-v12-date-range-field__panel[data-wepro-dr-panel-owner], body > .wepro-v12-date-range-field__panel { position: fixed; z-index: 5400; } body.modal-open .wepro-v12-date-range-field__panel, body.modal-open .wepro-v12-date-range-field__panel[data-wepro-dr-panel-owner], body.modal-open > .wepro-v12-date-range-field__panel { z-index: 5400; } .wepro-v12-date-range-field__panel[hidden] { display: none !important; } .wepro-v12-date-range-field__presets { background: #ffffff; border-right: 1px solid var(--wepro-dr-border); display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; padding: 10px 8px; width: 210px; flex: 0 0 210px; } .wepro-v12-date-range-field__preset { background: transparent; border: none; border-radius: 8px; color: var(--wepro-dr-accent); cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.3; padding: 8px 10px; text-align: left; width: 100%; } .wepro-v12-date-range-field__preset:hover { background: var(--wepro-dr-accent-soft); } .wepro-v12-date-range-field__preset.is-active { background: var(--wepro-dr-accent-soft); color: #2f7d20; font-weight: 700; } .wepro-v12-date-range-field__preset:focus, .wepro-v12-date-range-field__preset:focus-visible, .wepro-v12-date-range-field__preset:active { box-shadow: none; outline: none; } .wepro-v12-date-range-field__calendars { display: flex; flex-direction: column; min-width: 0; padding: 8px 10px 20px; } .wepro-v12-date-range-field__calendar-host { min-height: 280px; min-width: 308px; position: relative; } .wepro-v12-date-range-field__fp-input { border: 0 !important; height: 0 !important; margin: 0 !important; opacity: 0 !important; padding: 0 !important; position: absolute !important; width: 0 !important; z-index: -1 !important; } .wepro-v12-date-range-field__times { border-top: 1px solid var(--wepro-dr-border); display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 8px; padding-top: 12px; } .wepro-v12-date-range-field__times[hidden] { display: none !important; } .wepro-v12-date-range-field__time-field label { color: var(--wepro-dr-muted); display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; } .wepro-v12-date-range-field__time-field .wepro-v12-time-field__trigger { border-radius: 10px; min-height: 40px; } .wepro-v12-date-range-field__time-field .wepro-v12-time-field__trigger:focus, .wepro-v12-date-range-field__time-field .wepro-v12-time-field__trigger:focus-visible, .wepro-v12-date-range-field__time-field .wepro-v12-time-field.is-open .wepro-v12-time-field__trigger { border-color: var(--wepro-dr-border-hover); box-shadow: none; outline: none; } /* Flatpickr range calendar — panel may be on */ .flatpickr-calendar.wepro-v12-dr-flatpickr, .wepro-v12-date-range-field__panel .flatpickr-calendar.inline, .wepro-v12-date-range-field__panel .flatpickr-calendar.open { background: #ffffff !important; border: none !important; box-shadow: none !important; display: block !important; left: auto !important; margin: 0 !important; max-height: none !important; opacity: 1 !important; padding: 0 !important; position: relative !important; top: 0 !important; visibility: visible !important; width: 307.875px !important; z-index: 1 !important; } .flatpickr-calendar.wepro-v12-dr-flatpickr { width: 307.875px !important; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-innerContainer { overflow: visible; padding-top: 4px; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-rContainer { display: inline-block; width: auto !important; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-days { display: flex !important; overflow: hidden; width: 307.875px !important; } .flatpickr-calendar.wepro-v12-dr-flatpickr .dayContainer { display: flex !important; flex-wrap: wrap !important; max-width: 307.875px !important; min-width: 307.875px !important; width: 307.875px !important; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-weekdays { background: transparent; margin-bottom: 6px; overflow: hidden; width: 100%; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-months { align-items: center; margin-bottom: 12px; overflow: visible; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-month { color: var(--wepro-dr-ink, #111827); height: 40px; overflow: visible; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-current-month { align-items: center; display: inline-flex !important; font-size: 13px; font-weight: 600; gap: 2px; height: 40px; justify-content: flex-start; left: 8px; line-height: 1; padding: 0 !important; position: relative; text-transform: none; top: 0; width: auto; z-index: 5; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-current-month .cur-month, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-current-month .numInputWrapper { display: none !important; } .flatpickr-calendar.wepro-v12-dr-flatpickr .wepro-v12-fp-dd__btn { font-size: 13px; font-weight: 600; height: 28px; padding: 0 5px; } .flatpickr-calendar.wepro-v12-dr-flatpickr .wepro-v12-fp-dd--year .wepro-v12-fp-dd__menu { max-height: 240px; min-width: 88px; } .flatpickr-calendar.wepro-v12-dr-flatpickr .wepro-v12-fp-dd__option { font-size: 13px; font-weight: 500; padding: 7px 10px; } .flatpickr-calendar.wepro-v12-dr-flatpickr .wepro-v12-fp-dd__option.is-selected { background: var(--wepro-dr-accent-soft, #edf9e9); color: #2f7d20; font-weight: 700; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-prev-month, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-next-month { fill: var(--wepro-dr-accent, #4faa32); height: 40px; padding: 8px; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-prev-month:hover svg, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-next-month:hover svg { fill: #2f7d20; } .flatpickr-calendar.wepro-v12-dr-flatpickr span.flatpickr-weekday { color: var(--wepro-dr-muted, #64748b); font-size: 12px; font-weight: 600; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day { border-radius: 999px; color: var(--wepro-dr-ink, #111827); font-weight: 500; height: 39px; line-height: 39px; max-width: 39px; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day:hover, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day:focus { background: var(--wepro-dr-accent-soft, #edf9e9); border-color: var(--wepro-dr-accent-line, #bfe6b5); outline: none; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.today { border-color: var(--wepro-dr-accent, #4faa32); } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.selected, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.startRange, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.endRange { background: var(--wepro-dr-accent, #4faa32); border-color: var(--wepro-dr-accent, #4faa32); color: #ffffff; box-shadow: none; } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.inRange { background: var(--wepro-dr-accent-soft, #edf9e9); border-color: transparent; box-shadow: none; color: var(--wepro-dr-ink, #111827); } .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.flatpickr-disabled, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.prevMonthDay, .flatpickr-calendar.wepro-v12-dr-flatpickr .flatpickr-day.nextMonthDay { color: #cbd5e1; } @media (max-width: 767.98px) { .wepro-v12-date-range-field__panel { flex-direction: column; left: 0; min-width: 0; right: 0; width: 100%; } .wepro-v12-date-range-field__presets { border-bottom: 1px solid var(--wepro-dr-border); border-right: none; flex: none; max-height: 160px; width: 100%; } }