body {background-color: #c4c2c5; display: flex; align-items: center; justify-content: center; height: 94vh; margin: 0; font-family: San Francisco, Helvetica, Noto, Roboto, Arial, sans-serif;} .modal {background-color: #fffeff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); padding: 0px; text-align: center; width: 75vw; min-width: 200px; max-width: 500px; display: flex; flex-direction: column; justify-content: space-between; height: 22vh; max-height: 180px;} .vl {border-left: 1px solid rgba(219,217,221,0.7); height: 96%; vertical-align: top;} .modal h2 {flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 380; color: #08090A;} .modal-buttons {border-top: 1px solid rgba(219,217,221,0.7); display: flex; justify-content: flex-end;} .modal-button {flex: 1; padding: 20px; margin: 0px; font-size:1.2rem; border: none; border-radius: 16px; cursor: pointer; font-weight: 560; transition: background-color 0.3s ease;} .modal-button.cancel {background-color: #fffeff; font-weight: 500; color: #9c989c;} .modal-button.ok {background-color: #fffeff; color: #649daf;} .modal-button:active, .modal-button:hover {background-color: #dbd9dd;} .modal-button.ok:active{background-color: #71b8e4;} .modal.hidden {display: none;}