.modal{background:white;height:60vh;width:clamp(70%,500px,50%);border-radius:1rem;overflow:hidden;position:fixed;top:10%;left:15%;transform:translate(-50%,-50%);box-shadow:0 0 18px #000000bf;display:flex;flex-direction:column}.modal .modal-header{border-bottom:.1rem solid grey;height:10%;display:flex;align-items:center;padding:0 2rem;justify-content:space-between}.modal .modal-header button{padding:.5rem;background:transparent;border:none}.modal .modal-header button .modal-close-icon{font-size:2rem;color:#e04967}.modal .modal-header button .modal-close-icon:hover,.modal .modal-header button .modal-close-icon:focus{color:#dc3545}.modal article{flex-grow:1;background-color:#e4e4e4}.modal .modal-footer{justify-self:flex-end;width:100%;padding:1rem 0;display:flex;justify-content:center;gap:1rem}.modal .modal-footer button{color:#fff}.modal .modal-footer .close{background:#dc3545}.modal .modal-footer .save{background:#138496}@media screen and (max-width: 500px){.modal{top:0;left:0;transform:none;width:100%;height:100vh}}*,:after,:before{padding:0;margin:0;box-sizing:border-box}body{width:100vw;height:100vh}.btn{display:inline-block;padding:.5rem 2.5rem;border:none}.overlay{background:rgba(0,0,0,.5);position:fixed;width:100%;height:100%}.main-btn{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);padding:.7rem 2.1rem;background:#dc3545;color:#fff}