html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #000000;
            font-family: "Open Sans", sans-serif;
            color: #ccc
        }

        .loading {
            color: #ccc;
            font-size: 30px;
            z-index: 10;
            display: block;
            text-align: center;
            position: absolute;
            top: 0;
            left: 55%;
        }

        .floating_button {
            position: fixed;
            top: 1px;
            right: 1px;
            width: 50px;
            height: 50px;
            z-index: 1;
            color: #ccc;
            border: none;
            background-color: transparent;
            margin: 1em;
        }

        /* Darker background on mouse-over */
        .floating_button:hover {
            color: #fff
        }

        /* OpenSeadragon */
        * {
            outline: 0;
        }

        #container {
            position: relative;
            height: 100%;
        }

        .slider-handle {

            position: absolute;

            height: 44px;
            width: 44px;

            /* center the element */
            left: 50%;
            top: 50%;

            margin-left: -22px;
            margin-top: -22px;

            border-radius: 50%;

            background: #ccc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#FFF" d="M13 21l-5-5 5-5m6 0l5 5-5 5"/></svg>') no-repeat center center;
            cursor: move;

            box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
            z-index: 2;

        }

        .slider-handle.draggable {
            background-color: #445b7c;
        }


        .m-image-slider__viewer {
            height: 100%;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .m-image-slider__handle {
            position: absolute;

            /* center the element */
            left: 50%;
            top: 50%;
        }

        /* overflow is hidden by .m-image-slider__viewer */
        .m-image-slider__handle__divider {
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: white;
            width: 3px;
            height: 150vh;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        .m-image-slider__handle__circle {
            position: absolute;

            height: 45px;
            width: 45px;

            /* center the element */
            left: 50%;
            top: 50%;

            margin-left: -23px;
            margin-top: -23px;

            border-radius: 50%;

            background: white !important;
            cursor: move;

            box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
            z-index: 3;
        }

        .m-image-slider__handle svg {
            display: block;
            margin-left: auto;
            margin-right: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }