.modal {padding: var(--container-padding-x); overflow: auto; position: fixed; width: 100vw; height: 100vh; opacity: 0; visibility: hidden; transition: all 0.3s ease; top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal.open {visibility: visible; opacity: 1; transition-delay: 0s;}
.modal-bg {position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .5); width: 100%; height: 100%;}
.modal-container {margin: auto; width: 100%; background: var(--color-light); position: relative; padding: 60px; max-width: 500px;}
.modal-container h2 {margin-bottom: 20px;}
.modal-container .default-button {padding: 10px 80px; max-width: 100%;}
.modal-close {position: absolute; right: 0; top: 0; outline: none; appearance: none; background: var(--color-red-dark-medium) url("/assets/images/close-ico.svg") no-repeat center center; border: none; cursor: pointer; width: 50px; height: 50px; transition: all .3s ease; padding: 0; transition: var(--transition-fast);}
.modal-close:hover {opacity: var(--opacity-70);}
.modal-container .form-styled .alert{position: absolute; width: 100%; box-sizing: border-box; }
.modal-container .buttons{display: flex; gap: 20px; margin-top: 50px;}

@media (max-width: 768px) {
   .modal-container {
      padding: 45px;
   }
   .modal-close {
      width: 40px;
      height: 40px;
   }
}