.rDocument {
    width: 100%;
    height: 100%;
    text-align: center !important;
    background-color: #E7E7E7;
    overflow: auto;
}

.rDocument .rMessage * {
    text-align: center
}

.rDocument .rRoot {
    position: relative;
    margin: 0 auto;
    width: max-content;
    /*https://css-tricks.com/fighting-the-space-between-inline-block-elements/*/
}

.rDocument .swiper-wrapper {
    display: flex;
    align-items: center;
}

.rDocument .swiper-scrollbar {
    height: 20px;
}

/*.rDocument .rSingle {
    height: 100%;
    display: flex;
    align-items: center;
}*/

.rDocument .rPage {
    position: relative;
    margin: 0 auto;
    border: 1px solid #CFCFCF;
    box-shadow: 0 0 3px #CFCFCF;
    overflow: visible;
}

.rDocument .swiper-slide {
    border: none !important;
    box-shadow: none !important;
}

.rDocument .rPage .rBackdrop {
    background: white url("../../common/image/loading.gif") no-repeat center;
}

.rDocument .rPage > div {
    position: absolute;
    text-align: left;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.rDocument .rBackdrop + .swiper-zoom-container {
    margin: 0 auto;
    position: relative !important
}

.rDocument .rPage .rBackdrop > img {
    width: 100%;
    height: 100%;
    border: none;
    /* background-color: #FFFFFF !important;*/
    pointer-events: none;
}

.rDocument .rPage .rCover {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 201;
}

.rDocument .rPage .rCover .rMark {
    position: absolute;
    filter: alpha(opacity=50);
    background: #FFEB3B;
    background: rgba(255, 235, 59, 0.5);
}

.rDocument .rPage .rCover .rNone {
    position: absolute;
}

.rDocument .rPage .rCover .rSemantic {
    position: absolute;
    filter: alpha(opacity=50);
    background-color: #03A9F4;
    background-color: rgba(3, 169, 244, 0.5);
}

.rDocument .rPage .rCover .rSelect {
    background: #03A9F4;
    background: rgba(3, 169, 244, 0.5);
}

.rDocument .rPage .rCover > span {
    position: absolute;
    cursor: pointer;
}

.rDocument .rPage .rCover .rALink :hover {
    cursor: crosshair !important;
}

.rDocument .rPage .rCover .rALink {
    border-bottom: 2px dashed #785;
    position: absolute;
    cursor: pointer;
}

.rDocument .rPage .rCover .rALink span {
    position: absolute !important;
    cursor: pointer;
    transform: rotate(45deg);
    top: auto;
    bottom: -8px;
    left: -15px;
}

.rPalette canvas {
    width: 100%;
    height: 100%;
}

.swiper-zoom-container > canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}