.appointment{margin:2rem 0;border:1px solid #cbd9e2;border-radius:12px;background:#f7fafc;overflow:hidden}
.appointment>summary{cursor:pointer;padding:17px 22px;color:#174e78;font-weight:700;font-size:1.1rem;list-style-position:inside}
.appointment[open]>summary{border-bottom:1px solid #dce5eb}
.appointment-content{padding:8px 24px 24px}
.appointment-form{display:grid;gap:16px;margin-top:22px}
.appointment-form label{display:grid;gap:7px;font-weight:600}
.appointment-form input,.appointment-form select,.appointment-form textarea{box-sizing:border-box;width:100%;max-width:100%;padding:12px;border:1px solid #aabcc9;border-radius:6px;background:white;color:#20343e;font:inherit;font-weight:400}
.appointment-form textarea{min-height:130px;resize:vertical}
.appointment-form :focus-visible,.appointment>summary:focus-visible{outline:3px solid #467fa9;outline-offset:3px}
.appointment-form button{justify-self:start;padding:13px 22px;border:0;border-radius:7px;background:#175782;color:white;font:inherit;font-weight:700;cursor:pointer}
.appointment-form button:hover{background:#123f60}
.appointment-note,.appointment-status,.appointment-fallback{font-size:.94rem;line-height:1.5}
.appointment-destination{font-size:.94rem;overflow-wrap:anywhere;margin:0}
.appointment-status:empty{display:none}
@media(max-width:500px){.appointment-content{padding:6px 16px 20px}.appointment-form button{width:100%}}