.media-viewer {
    position: relative;
    overflow: hidden;

    .max-size {
        max-width: 100%;
        max-height: 100%;
    }

    .media-viewer-data {
        transition: transform .2s;
    }

    .media-viewer-zoom-wrapper {
        overflow: auto;
        height: 100%;
    }

    .media-viewer-toolbar {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 0px;
        margin-right: 20px;
        font-size: 1em;
        z-index: 100;

        & > a:not(:last-child) {
            margin-right: 10px;
        }
    }

    .media-viewer-zoom {
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 10px;
        z-index: 100;
        padding-right: 0;
        margin-right: 25px;

        & > div {
            background-color: rgba(142, 155, 160, 0.2);
            border-radius: 50%;
            font-size: 1em;
            width: 85%;
            text-align: center;
            margin: 8px;
            padding: 7px;
            cursor: pointer;
        }
    }

    .media-viewer-navigation {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(214, 214, 214, 0.85);
        padding: 15px 4px;
        cursor: pointer;

        &.media-viewer-navigation-prev {
            left: 0;
        }

        &.media-viewer-navigation-next {
            right: 0;
        }
    }

    .media-viewer-loader {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        text-align: center;
        background-color: rgba(128, 128, 128, 0.5);
        z-index: 101;

        & > i {
            position: absolute;
            display: inline-block;
            top: 50%;
            right: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
