@media(min-width:721px){
 #modal.appointment-composer-dialog[open]{width:calc(100vw - 48px);max-width:1800px;height:calc(100dvh - 70px);max-height:calc(100dvh - 40px);padding:0;border:1px solid #dce2e7;border-radius:3px;overflow:hidden;color:#333;background:#fff}
 #modal.appointment-composer-dialog #modal-content{height:100%;display:flex;flex-direction:column;overflow:hidden}
 #modal.appointment-dialog.appointment-composer-dialog #modal-content>h2{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:52px;padding:12px 20px;margin:0;border:0;border-bottom:1px solid #dcdfe4;font-size:18px;font-weight:500;box-sizing:border-box;background:#fff;color:#555;line-height:26px}
 .booking-composer-close{border:0;background:transparent;color:#7a8187;font-size:25px;padding:0 4px;line-height:28px}
 #modal.appointment-composer-dialog #modal-form{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
 #modal.appointment-composer-dialog #modal-form>.appointment-form-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,18vw,320px) clamp(230px,22vw,380px);gap:0;align-items:stretch;flex:1;min-height:0;overflow:hidden}
 #modal.appointment-composer-dialog .booking-board{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 12px 0 16px;border-right:1px solid #dce2e7;overflow:hidden}
 #modal.appointment-composer-dialog h3{font-size:15px;font-weight:600;margin:14px 0;padding-left:9px;border-left:3px solid #00a6c4;line-height:20px}
 .booking-board h3 span{font-size:13px;color:#697279;font-weight:400;padding-left:8px}
 .booking-board-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 0 10px;border-bottom:1px solid #e4e8ec}
 .booking-board-toolbar>strong{font-size:13px;flex:1;min-width:105px}
 .booking-board-toolbar button{min-height:30px;padding:3px 9px;border-radius:2px;font-size:12px}
 .booking-board-toolbar [data-booking-prev],.booking-board-toolbar [data-booking-next]{border:0;font-size:22px;padding:0 5px}
 .booking-board-toolbar input{width:126px;min-height:30px;padding:4px 6px;border-radius:2px;font-size:12px;box-sizing:border-box}
 .booking-board-toolbar [role=group]{display:flex}
 .booking-board-toolbar [role=group] button{border-radius:0}
 .booking-board-toolbar .active{background:#00a6c4;border-color:#00a6c4;color:#fff}
 .booking-patient-drag{display:flex;gap:10px;align-items:center;padding:8px 10px;margin:8px 0;color:#4c5b62;background:#f3f8fa;font-size:12px;border:1px dashed #c8e0e6;border-radius:2px;cursor:grab}
 .booking-patient-drag strong{color:#1199b5;font-weight:500;overflow-wrap:anywhere}
 .booking-patient-drag span{color:#7c858b}
 [data-booking-load]{margin:4px 0;font-size:12px}
 .booking-board-calendar{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
 .booking-board-calendar>.calendar-legend,.booking-board-calendar>.calendar-empty,.booking-board-calendar>.calendar-help,.booking-board-calendar>.calendar-business{display:none}
 .booking-board-calendar .schedule-scroll{max-height:none;flex:1;min-height:0;border:1px solid #dce2e7;border-bottom:0;border-radius:0;scrollbar-width:thin;scrollbar-gutter:auto}
 .booking-board-calendar .schedule-grid{--calendar-column-width:90px!important;width:100%;min-width:650px;grid-template-columns:48px repeat(var(--calendar-columns),minmax(86px,1fr))}
 .booking-board-calendar .schedule-column-title,.booking-board-calendar .schedule-corner{min-height:48px;padding:7px 3px;background:#fafbfc;color:#414951;border-color:#e2e5e8;font-size:12px}
 .booking-board-calendar .schedule-column-title small{font-size:10px;color:#9ba2a8}
 .booking-board-calendar .schedule-column-title.is-today{background:#e4f8fb;color:#009bbb}
 .booking-board-calendar .schedule-time{height:var(--calendar-slot-height);font-size:11px;color:#969da5;border-color:#e3e6e9;line-height:20px}
 .booking-board-calendar .schedule-slot{height:var(--calendar-slot-height);border-color:#edf0f2;background:#fff}
 .booking-board-calendar .schedule-slot.outside-business-hours{background:#f7f8f9}
 .booking-board-calendar .schedule-slot:hover,.booking-board-calendar .schedule-slot:focus-visible{background:#e7f9fc}
 .booking-board-calendar .schedule-slot.booking-selected-slot{background:#c6eef6;box-shadow:inset 2px 0 #00a6c4}
 .booking-board-calendar .schedule-event{border-left-width:3px;border-radius:3px;padding:3px;font-size:11px}
 .booking-board-calendar .schedule-event strong{font-size:11px}
 .booking-board-calendar .event-doctor,.booking-board-calendar .event-purpose{display:none}
 .booking-existing-note{font-size:12px;background:#eff8fa;color:#43636c;padding:8px;margin:5px 0;overflow-wrap:anywhere}
 #modal.appointment-composer-dialog .booking-information{display:block;padding:0 16px 15px;overflow:auto;min-height:0;scrollbar-width:none}
 #modal.appointment-composer-dialog .booking-information>label{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:11px 0;font-size:13px;color:#4b535a;border:0;padding:0}
 #modal.appointment-composer-dialog .booking-information input,#modal.appointment-composer-dialog .booking-information select,#modal.appointment-composer-dialog .booking-information textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box;min-height:34px;border-radius:2px;border-color:#d7dde2;font-size:13px}
 #modal.appointment-composer-dialog .booking-information textarea{min-height:65px}
 .booking-information .booking-patient{border:0;border-radius:0;background:transparent;padding:8px 0;font-size:13px;line-height:1.8}
 .booking-information .appointment-duration{margin:8px 0 12px}
 .booking-information .appointment-duration>div{gap:4px}
 .booking-information .appointment-duration button{padding:4px 6px;font-size:11px;border-radius:2px}
 #modal.appointment-composer-dialog .booking-projects{padding:0 14px 14px;border-left:1px solid #dce2e7;min-width:0;overflow:auto;scrollbar-width:none}
 .booking-projects .appointment-projects{border:0;padding:0;background:transparent;border-radius:0}
 .booking-projects .appointment-projects>summary{margin:14px 0;padding-left:9px;border-left:3px solid #00a6c4;font-size:15px;font-weight:600;list-style:none;pointer-events:none}
 .booking-projects .appointment-project-grid{display:block}
 .booking-projects .appointment-project-grid>div{border:0;border-bottom:1px solid #e1e5e9;border-radius:0;background:transparent;padding:12px 0}
 .booking-projects .appointment-project-grid>div>strong{display:block;font-weight:500;color:#4b535a;font-size:13px;margin-bottom:8px}
 .booking-projects .appointment-project-grid>div>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}
 .booking-projects .appointment-projects button{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:5px 0;text-align:left;font-size:12px;border-radius:0;color:#4d565c}
 .booking-projects .appointment-projects button:before{content:'';width:12px;height:12px;flex:none;border:1px solid #cbd4da;border-radius:2px;background:#fff}
 .booking-projects .appointment-projects button.active{color:#009cba}
 .booking-projects .appointment-projects button.active:before{background:#00a6c4;border-color:#00a6c4;box-shadow:inset 0 0 0 3px #fff}
 .booking-project-search input{margin:0;width:100%;min-height:34px;font-size:12px;border-radius:2px;box-sizing:border-box}
 #modal.appointment-composer-dialog #modal-form>.actions{position:static;flex:none;justify-content:flex-end;gap:10px;padding:10px 18px;margin:0;border-top:1px solid #dce2e7;background:#fff;box-shadow:none;z-index:4}
 #modal.appointment-composer-dialog #modal-form>.actions button{min-width:90px;min-height:36px;border-radius:2px;font-size:14px}
 #modal.appointment-composer-dialog #form-error:not(:empty){flex:none;max-height:70px;overflow:auto;padding:0 18px;background:#fff6f5}
 #modal.appointment-composer-dialog #form-error:empty{display:none}
 @media(max-width:1100px){
  #modal.appointment-composer-dialog #modal-form>.appointment-form-layout{grid-template-columns:minmax(0,1fr) 280px 200px}
  .booking-board-toolbar>strong{width:100%;flex-basis:calc(100% - 70px)}
  .booking-board-calendar .schedule-grid{min-width:620px}
  .booking-patient-drag{display:block}.booking-patient-drag span{display:block;margin-top:3px}
  .booking-projects .appointment-project-grid>div>div{grid-template-columns:1fr}
 }
 @media(max-width:900px){
  #modal.appointment-composer-dialog #modal-form>.appointment-form-layout{grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:minmax(0,1fr) 190px}
  #modal.appointment-composer-dialog .booking-board{grid-row:1 / 3}
  #modal.appointment-composer-dialog .booking-information{grid-column:2;grid-row:1}
  #modal.appointment-composer-dialog .booking-projects{grid-column:2;grid-row:2;border-top:1px solid #dce2e7}
  .booking-projects .appointment-project-grid>div>div{grid-template-columns:1fr 1fr}
 }
}

.booking-information::-webkit-scrollbar,.booking-projects::-webkit-scrollbar{display:none}