#viewer {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.80);
    z-index: 400;
    opacity: 0;
    display: none;
    transition: opacity 0.2s;
}

#viewer #viewer-content {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#viewer #viewer-content #viewer-image {
    max-width: 100%;
    max-height: 90%;
    margin: auto;
    display: block;
    cursor: zoom-in;
    transition: max-height 0.5s,  max-width 0.5s, transform 0.5s;
}

#viewer #viewer-content .dragging {
    transition: max-height 0.5s,  max-width 0.5s, transform 0.05s !important;
}

.zoom {
    cursor: grab !important;
    max-height: 200% !important;
    max-width: 200% !important;
}

.viewable {
    cursor: pointer;
}