.mnt-overlay { display: none; position: absolute; z-index: 1000; right: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / .5) } .mnt-side-panel { opacity: 0; visibility: hidden; position: fixed; right: 0; top: 0; width: 85%; height: 100%; background-color: #fff; z-index: 1001; transform: translateX(100%); padding: 1rem 0 1rem 0; box-sizing: border-box; overflow: auto; transition: transform 0.3s ease-out, visibility 0.3s ease-out, opacity 0.3s ease-out; overflow: hidden } .mnt-side-panel.open { visibility: visible; opacity: 1; transform: translateX(0); overflow-y: scroll; } .mnt-overlay.open { display: block } .mnt-side-panel-content { height: 100%; margin-top: 50px; width: calc(100% + 17px) } .mnt-close-btn { position: absolute; top: 3%; right: 3%; background: none; border: none; width: 20px; height: 20px; cursor: pointer } .mnt-close-btn::before, .mnt-close-btn::after { content: ''; position: absolute; width: 100%; height: 3px; background-color: currentColor; top: 50%; left: 0 } .mnt-close-btn::before { transform: rotate(45deg) } .mnt-close-btn::after { transform: rotate(-45deg) } @media only screen and (max-width:1024px) { .mnt-side-panel { width: 100% } .mnt-side-panel .ModalAppointment_overlay__7UyOe { padding-left: 0; align-items: center } .mnt-side-panel .ModalAppointment_modal-container__YIRqB { padding-bottom: 40px } } @media only screen and (max-width:768px) { .mnt-side-panel .ModalAppointment_overlay__7UyOe { padding-left: 20px; padding-right: 35px } .mnt-side-panel .ModalAppointment_modal-container__YIRqB { width: 100% } .mnt-side-panel .ModalAppointment_form-container__sL9mz { width: 100% } }