.popup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    z-index: var(--popup-layer);
}

.popupContent {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 64px;
    max-width: 100%;
    max-height: 100%;
}

.popupFullscreen {
    min-width: 100%;
    min-height: 100%;
}

.popupInnerContent {
    background: var(--popup-inner-background-color);
    color: var(--popup-inner-color);
    padding: 2em;
    border-radius: 25px;
}

.leftDialogButtons, .rightDialogButtons {
    align-self: stretch;
    margin-top: 2em;
    display: flex;
    flex-direction: column;
}

.closeButtonContainer, .nextButtonContainer, .previousButtonContainer, .emptyButtonContainer, .downloadButtonContainer {
    flex-basis: 50%;
}

.closeButton, .nextButton, .previousButton, .downloadButton {
    background-size: contain;
    background-repeat: no-repeat;
    width: 64px;
    height: 64px;
    margin: 0;
}

.downloadButtonContainer {
    margin-top: 64px;
}

.closeButton {
    background-image: url('../image/ui/close.png');
}

.nextButton {
    background-image: url('../image/ui/next.png');
}

.previousButton {
    background-image: url('../image/ui/previous.png');
}

.downloadButton {
    background-image: url('../image/ui/download.png');
}

.clickable {
    cursor: pointer;
}