.modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: table; transition: opacity .3s ease; }

.modal-wrapper { display: table-cell; vertical-align: middle; }

.modal-container { width: 420px; margin: 0px auto; padding: 10px 20px; background-color: #f7f7f7; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; border-radius: 15px; }

.modal-header { padding: 15px 15px 0 15px; border: none; }

.modal-header h3 { font-size: 1.2857142857em; margin-top: 0; margin-bottom: 0.4444444444em; color: #00538f; font-weight: 800; padding-right: 2em; }

.modal-header span { padding: 0; }

.modal-body { margin: 0 0 20px 0; overflow: auto; height: calc(100% - 150px) }

.modal-default-button { float: right; }

.modal-enter { opacity: 0; }

.modal-leave-active { opacity: 0; }

.modal-enter .modal-container,
.modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); }

.modal-close { color: #fff; background: #666; width: 1.5em; height: 1.5em; position: absolute; top: 0; right: 0; line-height: 1.35em; text-align: center; font-size: 1.7142857143em; }

@media (min-width:768px) {
    .modal-container { width: 90%; }
}

@media (min-width:992px) {
    .modal-container { max-width: 1200px; width: 80%; }
}