.alert-container .alert-message {
    cursor: pointer;
}

.alert-container:not(:last-child) .alert-message {
    margin-bottom: 10px;
}

.alert-container:last-child {
    margin-bottom: 1rem;
}

.alert-container .background-dimmer {
    background-color: hsla(0, 0%, 0%, 0.5);
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}

.alert-container .modal {
    display: block;
    width: 80%;
    max-height: 70%;
    opacity: 0.9;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -10%);
}

@media only screen and (min-width: 992px) {
    .alert-container .modal {
        width: 55%;
    }
}

.alert-container .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.alert-container .fade-enter-active,
.alert-container .fade-leave-active {
    transition: opacity 0.5s ease;
}

.alert-container .fade-enter-from,
.alert-container .fade-leave-to {
    opacity: 0;
}