.dialog-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    animation: dialog-container-entry 0.2s;
}

@keyframes dialog-container-entry {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.dialog {
    background-color: white;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    align-self: center;
    margin: auto;
    width: 700px;
    max-height: calc(100% - 3rem);
    animation: dialog-entry 0.4s;
    animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

@keyframes dialog-entry {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateX(0px) scale(1.0);
    }
}