#appointmentPanel{margin-block:24px}#appointmentPanel [hidden]{display:none!important}.appointmentSettingsBox{border:1px solid #d4e1d9;border-radius:16px;padding:16px;margin-block:18px}.appointmentSettingsBox>summary{font-weight:700;cursor:pointer}.appointmentSettingsBox form{padding-top:18px}.appointmentWeekday{padding:12px 0;border-bottom:1px solid #e3ebe6}.appointmentWeekdayHead{display:flex;justify-content:space-between;gap:8px;align-items:center}.appointmentWeekdayHead .businessCheck{margin:4px 0}.appointmentPeriod{display:flex;align-items:end;gap:8px;margin-block:12px}.appointmentPeriod .businessField{flex:1}.appointmentPeriod input[type=time]{min-width:0}.appointmentLayout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(280px,1.1fr);gap:24px;align-items:start}.appointmentLegend{display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem;margin-block:16px}.appointmentLegend span{display:flex;align-items:center;gap:7px}.appointmentLegend span:before{content:'';width:12px;height:12px;border-radius:4px;background:#e7ebe9}.appointmentLegend .booked:before{background:#fac78f}.appointmentLegend .open:before{background:#dcf2df}.appointmentLegend .closed:before{background:#d8dedd}.appointmentMonthNav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.appointmentMonthNav h3{margin:0;font-size:1.1rem}.appointmentMonthNav button{font-size:1.4rem;padding:4px 14px}.appointmentMonthGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.appointmentDayName{text-align:center;font-size:.65rem;color:#687a73;padding:4px 0}.appointmentDay{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;padding:4px 1px!important;border:1px solid transparent;border-radius:9px;gap:3px;min-width:0;color:#243f36}.appointmentDay strong{font-size:.94rem}.appointmentDay small{font-size:.58rem;line-height:1.25;max-width:100%;overflow-wrap:anywhere}.appointmentDay.booked{background:#ffdfb8;border-color:#f3bf83}.appointmentDay.open{background:#e9f7e9;border-color:#cee7cf}.appointmentDay.closed{background:#edf0ef;color:#65736d}.appointmentDay.selected{outline:2px solid #174d42;outline-offset:1px}.appointmentSlots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-block:16px}.appointmentSlot{display:flex;flex-direction:column;gap:5px;text-align:start;min-height:88px;padding:12px!important;border-radius:12px;border:1px solid #d1ded6;background:#fff;overflow-wrap:anywhere}.appointmentSlot strong{direction:ltr;unicode-bidi:isolate;font-size:.9rem}.appointmentSlot span{font-size:.9rem}.appointmentSlot small{font-size:.72rem;color:#43715a}.appointmentSlot.booked{background:#d8efde;border-color:#a9d5b8;color:#174d32}.appointmentSlot:disabled{opacity:.48}.appointmentDialog{border:1px solid #c9dad0;border-radius:20px;padding:24px;width:min(480px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:85vh;box-sizing:border-box;overflow:auto;color:#173e32;background:#fff}.appointmentDialog::backdrop{background:#092e256b}.appointmentDialogHead{display:flex;justify-content:space-between;align-items:start;gap:10px}.appointmentDialogHead h3{margin-top:0}.appointmentDialog .businessField{margin-block:14px}.appointmentDialog button{margin-block:6px}.appointmentDialog form>button{margin-inline-end:8px}.appointmentBadge{display:inline-block;background:#d8efde;border-radius:20px;padding:5px 12px;font-size:.8rem}.appointmentSettingsBox form>.primary{margin-top:16px}#appointmentDay h3{margin-top:0}#appointmentStatus{min-height:1.5em}#appointmentDay details{margin-top:20px}#appointmentDay details button{display:block;margin-block:6px}@media(max-width:1000px){.appointmentLayout{grid-template-columns:1fr}.appointmentMonthGrid{gap:6px}.appointmentDay{min-height:66px}.appointmentDay small{font-size:.65rem}}@media(max-width:440px){.appointmentSettingsBox{padding:12px}.appointmentWeekdayHead{align-items:start}.appointmentWeekdayHead>button{font-size:.75rem;padding:7px}.appointmentPeriod{flex-wrap:wrap}.appointmentPeriod .businessField{min-width:100px}.appointmentSlots{gap:7px}.appointmentDialog{padding:18px}.appointmentDayName{font-size:.6rem}.appointmentDay{min-height:58px}.appointmentDay small{font-size:.57rem}}