body {
    position: relative;
    margin: 0 auto;
    overflow-x: auto !important;
}

[dir='auto']:not(body),
.back-page-container {
    display: none !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    transform-origin: left top;
    /*
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    */
}

body div.back-page-container {
    margin-top: 0 !important;
}

[dir='auto'].visible,
.back-page-container.visible {
    display: block !important;
}

.controls {
    display: block !important;
}

.control {
    width: 30px;
    height: 50px;
    background: rgba(0,0,0,0.1);
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

.control i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.control:hover {
    background: rgba(0,0,0,0.3)
}

.controls-left {
    left: 0;
}

.controls-right {
    right: 0;
}

.controls-page {
    top: 10px;
    right: 10px;
    position: fixed;
    color: #999;
    padding: 5px 20px;
    background: #eee;
    font-size: 13px;
    font-weight: bold;
    font-family: sans-serif;

}

.page-break-element {
    visibility: hidden;
}