.modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal-fade-enter-active, .modal-fade-leave-active { transition: opacity .5s ease } .modal-backdrop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } .modal { background: #FFFFFF; /* box-shadow: 2px 2px 20px 1px; */ overflow-x: auto; display: flex; flex-direction: column; } .modal-alert { margin: 100px 10px 100px 10px; } /* .modal-avatar { } */ .modal-header, .modal-footer { padding: 15px; display: flex; } .modal-header { border: none; /* font-size: 20px; */ justify-content: space-between; } .modal-footer { border: none; justify-content: flex-end; } .modal-body { position: relative; padding: 20px 10px; } .btn-close { border: none; font-size: 40px; /* padding: 20px; */ cursor: pointer; font-weight: bold; background: transparent; }