*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
    background-color: transparent!important;
    margin-bottom: 0;
}

.table-cell {
    display: table-cell;
}

.align-middle {
    vertical-align: middle;
}

.pull-right {
    float: right;
}

.hidden {
    display: none;
}

.no-overflow-y {
    overflow-y: hidden;
}

.separator {
    display: inline-block;
    width: 1px;
    height: 35px;
    /*43px;*/
    position: relative;
    top: 2px;
    background-color: #E5F3FA;
}

.container {
    width: 100%;
    height: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: block;
    /*border: 1px solid red;*/
    /*box-sizing: border-box;*/
}


/* Estructura básica general */

#content-box {
    position: relative;
    height: calc(100vh - 120px);
    /* 100% - HEADER - FOOTER */
    overflow-x: hidden;
    top: var(--alt-header);
}

#pdf-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

/****************************************
	PAGINATION
****************************************/
.page-single {
	position: initial;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.page-left {
	display: inline-block;
}

.page-right {
	display: inline-block;
}


/* espacio para comentarios */

#comments-box {
    position: absolute;
    top: 0;
    right: -430px;
    /*0;*/
    width: 430px;
    /*385px;*/
    height: 100%;
    background-color: #4D4D4D;
    padding: 23px;
    /*box-sizing: content-box;*/
    /*border: 1px solid red;*/
}

#comments-box-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    height: 24px;
}

#add-comment {
    cursor: pointer;
    vertical-align: middle;
    margin-right: 15px;
    height: 37px;
    background-color: var(--main-book-color);
    border-radius: 5px;
}

.add-comment-text,
.view-comment-text {
    vertical-align: middle;
    color: #FFF;
    font-family: 'Circular Std Bold';
    font-weight: 700;
    font-size: 14px;
}

.comments-wrapper {
    background-color: #FFF;
    padding: 10px;
    border-radius: 2px;
    height: calc(100% - 60px);
    overflow-y: auto;
}

.add-comment-wrapper {
    margin-bottom: 25px;
}

#new-comment-box {
    display: none;
}


/* fin espacio para comentarios */

.hidden-desktop {
    display: none;
}


/* HEADER */

#fill-header-space {
    height: 60px;
    width: 100%;
}

#header {
    background-color: var(--main-book-color);
    height: 60px;
    display: block;
    color: #FFF;
    padding-left: 20px;
    padding-right: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

#header .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    /* 0 9.5px 10px 9.5px; */
    border-width: 10px 9.5px 0 9.5px;
    border-color: #0093d7 transparent transparent transparent;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 60px;
    /*display: none;*/
}

#headerBook {
    height: 100%;
}

#header .option {
    display: none;
    cursor: pointer;
}

#header .table .table-cell {
    /*border: 1px solid red;*/
}

#header .table .table-cell.first {
    width: 45px;
}


/*#header .table .table-cell.first .cell-first {
	display: flex;
	justify-content: space-between;
}*/

#header .table .table-cell.first img {
    vertical-align: middle;
    margin-right: 25px;
    cursor: pointer;
    /*width: 17px;
	height: 26px;*/
}

#header .table .table-cell.first .arrow-left {
    height: 26px;
}

#header .table .table-cell.first .arrow-left-mobile {
    height: 25px;
}

#header .table .table-cell.first .separator {
    vertical-align: middle;
}

#header .table .table-cell.second {
    padding-left: 20px;
    font-family: 'Circular Std Bold';
    font-weight: 600;
    /*700;*/
    font-size: 22px;
}

#header .table .table-cell.third {
    width: 170px;
    border-left: 2px solid #FFF;
    padding-left: 20px;
    font-family: 'Circular Std Bold';
    font-weight: 600;
    /*700;*/
    font-size: 15px;
    position: relative;
}

#header .table .table-cell.fourth {
    width: 175px;
    border-left: 2px solid #FFF;
    padding-left: 20px;
    font-family: 'Circular Std Bold';
    font-weight: 600;
    /*700;*/
    font-size: 15px;
    position: relative;
}

#header .table .table-cell.fifth {
    padding-left: 20px;
    width: 65px;
    border-left: 2px solid #FFF;
}

#header .table .table-cell.fifth img {
    cursor: pointer;
    height: 35px;
}

#header .arrow-left-mobile {
    display: none;
}

#toolbar {
    background-color: var(--main-book-color);
    height: 60px;
    position: fixed;
    left: 0;
    bottom: 0;
    /* 40px = 20px + 20px de padding lateral */
    width: 100%;
    /*calc(100% - 40px);*/
    padding-left: 20px;
    padding-right: 20px;
}

#toolbar .logo-wrapper span {
    color: #FFF;
    vertical-align: middle;
    font-size: 22px;
    font-weight: 600;
}

#toolbar .logo-wrapper img {
    height: 34px;
}

#toolbar .logo-mobile {
    display: none;
}

#toolbar .options-wrapper {
    display: inline-block;
    vertical-align: middle;
}

#toolbar .options {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#toolbar ul.options>li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    position: relative;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#toolbar ul.options>li#squares-icon {
    margin-right: 0;
}

#toolbar ul.options li:last-child {
    margin-right: 0;
}

#toolbar ul li .action {
    cursor: pointer;
    height: 34px;
    /*min-width: 25px;
	min-height: 31px;*/
}

#toolbar ul li div.action.toolbar-icon,
#toolbar-mobile ul li div.action.toolbar-icon {
    display: inline-block;
    width: 33px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-align: center center;
}


/* Iconos de las diferentes acciones */

#toolbar ul li div.action.toolbar-icon.toolbar-audio,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-audio {
    display: none;
    background-image: url('../img/toolbars/tool_audio.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-audio.selected,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-audio.selected {
    background-image: url('../img/toolbars/tool_audio_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-pointer,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-pointer {
    background-image: url('../img/toolbars/tool_pointer.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-pointer.selected,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-pointer.selected {
    background-image: url('../img/toolbars/tool_pointer_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-draw,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-draw {
    background-image: url('../img/toolbars/tool_draw.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-draw.selected,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-draw.selected {
    background-image: url('../img/toolbars/tool_draw_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-draw.selected.option1,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-draw.selected.option1 {
    background-image: url('../img/toolbars/tool_draw_1_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-draw.selected.option2,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-draw.selected.option2 {
    background-image: url('../img/toolbars/tool_draw_2_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-draw.selected.option3,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-draw.selected.option3 {
    background-image: url('../img/toolbars/tool_draw_3_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-draw.selected.option4,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-draw.selected.option4 {
    background-image: url('../img/toolbars/tool_draw_4_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-erase,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-erase {
    background-image: url('../img/toolbars/tool_erase.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-erase.selected,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-erase.selected {
    background-image: url('../img/toolbars/tool_erase_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-highlight,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-highlight {
    background-image: url('../img/toolbars/tool_highlight.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-highlight.selected,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-highlight.selected {
    background-image: url('../img/toolbars/tool_highlight_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-highlight.selected.option1,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-highlight.selected.option1 {
    background-image: url('../img/toolbars/tool_highlight_1_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-highlight.selected.option2,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-highlight.selected.option2 {
    background-image: url('../img/toolbars/tool_highlight_2_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-highlight.selected.option3,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-highlight.selected.option3 {
    background-image: url('../img/toolbars/tool_highlight_3_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-highlight.selected.option4,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-highlight.selected.option4 {
    background-image: url('../img/toolbars/tool_highlight_4_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-annotations,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-annotations {
    background-image: url('../img/toolbars/tool_annotations.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-annotations.selected,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-annotations.selected {
    background-image: url('../img/toolbars/tool_annotations_on.png');
}

#toolbar ul li div.action.toolbar-icon.toolbar-mobiletools,
#toolbar-mobile ul li div.action.toolbar-icon.toolbar-mobiletools {
    background-image: url('../img/toolbars/tool_mobiletools.png');
}

#toolbar ul li.mobiletools-visible div.action.toolbar-icon.toolbar-mobiletools,
#toolbar-mobile ul li.mobiletools-visible div.action.toolbar-icon.toolbar-mobiletools {
    background-image: url('../img/toolbars/tool_mobiletools_on.png');
}

#toolbar ul li .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9.5px 10px 9.5px;
    border-color: transparent transparent var(--main-book-color) transparent;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

#toolbar ul li.active .triangle {
    display: block;
}

#pencil-icon .triangle {
    bottom: 50px;
    /*47px;*/
}

#annotations-icon .triangle {
    bottom: 50px;
    /*44px;*/
}

#eraser-icon .triangle {
    bottom: 50px;
    /*44px;*/
}

#highlighter-icon .triangle {
    bottom: 50px;
    /*47px;*/
}

#zoom-text-icon .triangle {
    bottom: 49px;
}

#musical-note-icon .triangle {
    bottom: 51px;
    /*50px;*/
    /*42px;*/
}

#toolbar .toolbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#toolbar ul li .zoom {
    color: #FFF;
    font-family: 'Circular Std';
    font-weight: 400;
    /*700;*/
    font-size: 18px;
}

#toolbar ul li .pagination {
    color: #FFF;
    line-height: 60px;
    font-family: 'Open Sans Light';
    font-weight: 200;
    /*700;*/
    font-size: 16px;
    display: block;
}

#toolbar ul li .pagination .arrow {
    vertical-align: middle;
    cursor: pointer;
    height: 34px;
}

#toolbar ul li .pagination .arrow.left {
    /*margin-right: 10px;*/
}

#toolbar ul li .pagination .arrow.right {
    /*margin-left: 10px;*/
}

#toolbar ul.options>li#tool-icon {
    display: none;
}

#toolbar-mobile {
    display: none;
}

#toolbar ul.options>li#squares-mobile-icon {
    display: none;
}

#toolbar .pagination .pagination-wrapper {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
}

#goto-page {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -13px;
    width: 100%;
    height: 26px;
    display: none;
}


/* selector de colores de lápiz */

#pencil-selector {
    padding: 10px;
    background-color: #4D4D4D;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    bottom: 50px;
    text-align: center;
    height: 56px;
    display: none;
}

#pencil-icon.active #pencil-selector {
    display: block;
}

#pencil-selector ul {
    padding-left: 0;
    list-style-type: none;
}

#pencil-selector ul>li {
    display: inline-block;
    margin-right: 3px;
}

#pencil-selector ul>li:last-child {
    margin-right: 0;
}

#pencil-selector .color {
    width: 35px;
    height: 35px;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
}

#pencil-selector .color.red {
    background-color: #FF0000;
}

#pencil-selector .color.orange {
    background-color: #F7931E;
}

#pencil-selector .color.blue {
    background-color: #29ABE2;
}

#pencil-selector .color.green {
    background-color: #39B54A;
}


/* fin selector de colores de lápiz */


/* selector de borrado */

#eraser-selector {
    padding: 15px 10px;
    background-color: #4D4D4D;
    position: absolute;
    left: 50%;
    margin-left: -190px;
    width: 400px;
    bottom: 50px;
    text-align: center;
    display: none;
}

#eraser-icon.active #eraser-selector {
    display: block;
}

#eraser-selector ul {
    padding-left: 0;
    list-style-type: none;
}

#eraser-selector ul>li {
    display: inline-block;
    margin-right: 18px;
    color: #FFF;
    font-family: 'Open Sans Light';
    font-weight: 200;
    font-size: 20px;
    cursor: pointer;
}

#eraser ul>li:last-child {
    margin-right: 0;
}


/* selector de borrado */


/* selector de colores de subrayado */

#highlighter-selector {
    padding: 10px;
    background-color: #4D4D4D;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    bottom: /*47px;*/
    50px;
    text-align: center;
    height: 56px;
    display: none;
}

#highlighter-icon.active #highlighter-selector {
    display: block;
}

#highlighter-selector ul {
    padding-left: 0;
    list-style-type: none;
}

#highlighter-selector ul>li {
    display: inline-block;
    margin-right: 3px;
}

#highlighter-selector ul>li:last-child {
    margin-right: 0;
}

#highlighter-selector .color {
    width: 35px;
    height: 35px;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
}

#highlighter-selector .color.pink {
    background-color: #FF00FF;
}

#highlighter-selector .color.yellow {
    background-color: #FFFF00;
}

#highlighter-selector .color.blue {
    background-color: #00FFFF;
}

#highlighter-selector .color.green {
    background-color: #00FF00;
}


/* fin selector de colores de subrayado */


/* selector de zoom */

#zoom-selector {
    padding: 10px;
    background-color: #4D4D4D;
    position: absolute;
    left: 50%;
    margin-left: -136px;
  	width: 272px /*312px*/;
    bottom: 49px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    display: none;
}

#zoom-text-icon.active #zoom-selector {
    display: flex;
}

#zoom-selector>.left,
#zoom-selector>.right {
    height: 36px;
}

#zoom-selector ul {
    padding-left: 0;
    list-style-type: none;
}

#zoom-selector ul>li {
    display: inline-block;
    margin-right: 2px;
    vertical-align: top;
}

#zoom-selector ul>li:last-child {
    margin-right: 0;
}

#zoom-selector .zoom-info {
    border: 1px solid #FFF;
    color: #FFF;
    background-color: #fff;
    border-radius: 2px;
    width: 65px;
    height: 35px;
    text-align: center;
    font-weight: 200;
    font-size: 21px;
}

#zoom-minus, #zoom-more, #zoom-vertical, #zoom-horizontal, #zoom-pagemode_1, #zoom-pagemode_2 {
    cursor: pointer;
    height: 35px;
}

/* fin de selector de zoom */


/* reproductor musical */

#music-player {
    padding: 10px;
    background-color: #4D4D4D;
    position: absolute;
    left: 50%;
    margin-left: -295px;
    width: 590px;
    bottom: 51px;
    /*47px;*/
    color: #FFF;
    display: none;
}

#musical-note-icon.active #music-player {
    display: block;
}

#music-player .time {
    font-family: 'Open Sans Light';
    font-weight: 200;
    font-size: 20px;
}

#music-player .file-name {
    font-family: 'Circular Std Bold';
    font-weight: 600;
    /*700;*/
    font-size: 16px;
}

#music-player .copyright {
    font-family: 'Open Sans Light';
    font-weight: 200;
    font-size: 16px;
}

#music-player .music-player-v {
    position: absolute;
    top: 7px;
    right: 30px;
    cursor: pointer;
    height: 17px;
}

#music-player .music-player-v-mobile {
    position: absolute;
    top: 47px;
    right: 8px;
    cursor: pointer;
    height: 33px;
}

#music-player .music-player-close {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    height: 17px;
}

#music-player .music-player-close-mobile {
    position: absolute;
    top: 10px;
    right: 8px;
    cursor: pointer;
    height: 33px;
}

#music-player .music-player-slider-container {
    width: 173px;
    padding-left: 10px;
    padding-right: 10px;
}

#music-player .music-player-info-container {
    padding-left: 10px;
    padding-right: 45px;
}

#music-player-slider.ui-widget.ui-widget-content {
    border: 0;
    background-color: #000;
    border-radius: 0;
}

#music-player-slider.ui-state-default,
#music-player-slider.ui-widget-content .ui-state-default,
#music-player-slider.ui-state-default,
#music-player-slider .ui-button.ui-state-disabled:hover,
#music-player-slider .ui-button.ui-state-disabled:active {
    background-color: #F6F6F6;
    border: 0;
}

#music-player-slider.ui-widget.ui-slider-horizontal {
    height: 4px;
}

#music-player-slider.ui-slider .ui-slider-handle {
    width: 5px;
    height: 20px;
    margin-left: 0;
    top: -8px;
    border-radius: 0;
}

#music-player-stop,
#music-player-play {
    cursor: pointer;
    height: 36px;
}


/* fin reproductor musical */


/* VELO DE CARGA */

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
}

.circle_loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    width: 80px;
    height: 80px;
    border-radius: 48px;
    border: 12px solid var(--main-book-color);
}


/* Spinning circle (inner circle) */

.loading .maskedCircle {
    width: 80px;
    height: 80px;
    border-radius: 48px;
    border: 12px solid white;
}


/* Spinning circle mask */

.loading .mask {
    width: 40px;
    height: 40px;
    overflow: hidden;
}


/* Spinner */

.loading .spinner {
    position: absolute;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* FIN VELO DE CARGA */

@media (min-width: 576px) {
    .container {
        width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

@media (min-width: 769px) and (max-width: 770px) {
    #toolbar ul.options > li {
        margin-right: 2px;
    }
}

@media (min-width: 771px) and (max-width: 781px) {
    #toolbar ul.options > li {
        margin-right: 3px;
    }
}

@media (min-width: 781px) and (max-width: 790px) {
    #toolbar ul.options > li {
        margin-right: 4px;
    }
}

@media (min-width: 790px) and (max-width: 800px) {
    #toolbar ul.options > li {
        margin-right: 5px;
    }
}

@media (min-width: 800px) and (max-width: 810px) {
    #toolbar ul.options > li {
        margin-right: 6px;
    }
}

@media (min-width: 810px) and (max-width: 820px) {
    #toolbar ul.options > li {
        margin-right: 7px;
    }
}

@media (min-width: 820px) and (max-width: 830px) {
    #toolbar ul.options > li {
        margin-right: 8px;
    }
}

@media (min-width: 830px) and (max-width: 840px) {
    #toolbar ul.options > li {
        margin-right: 9px;
    }
}

@media (min-width: 840px) and (max-width: 850px) {
    #toolbar ul.options > li {
        margin-right: 10px;
    }
}

@media (min-width: 850px) and (max-width: 860px) {
    #toolbar ul.options > li {
        margin-right: 11px;
    }
}

@media (min-width: 860px) and (max-width: 870px) {
    #toolbar ul.options > li {
        margin-right: 12px;
    }
}

@media (min-width: 870px) and (max-width: 880px) {
    #toolbar ul.options > li {
        margin-right: 13px;
    }
}

@media (min-width: 880px) and (max-width: 890px) {
    #toolbar ul.options > li {
        margin-right: 14px;
    }
}

@media (max-width: 992px) {}

@media (max-width: 930px) {
    #music-player {
        margin-left: -140px;
    }
}

@media (max-width: 768px) {
    /* toolbar */
    #toolbar .logo {
        display: none;
    }
    #toolbar .logo-mobile {
        display: block;
    }
    #toolbar ul.options>li#pointer-icon {
        display: none;
    }
    #toolbar ul.options>li#pencil-icon {
        display: none;
    }
    #toolbar ul.options>li#eraser-icon {
        display: none;
    }
    #toolbar ul.options>li#highlighter-icon {
        display: none;
    }
    #toolbar ul.options>li#annotations-icon {
        display: none;
    }
    #toolbar ul.options>li#zoom-text-icon {
        display: none;
    }
    #toolbar ul.options>li#squares-icon {
        display: none;
    }
    #toolbar ul.options>li#zoom-pagemode_1 {
        display: none;
    }
    #toolbar ul.options>li#zoom-pagemode_2 {
        display: none;
    }

    #toolbar #page-mode {
        display: none;
    }


    .separator {
        background-color: #E5F3FA;
        width: 2px;
    }
    .separator.last {
        display: none;
    }
    #toolbar ul.options>li#tool-icon {
        display: inline-block;
    }
    #toolbar ul.options>li#squares-mobile-icon {
        display: inline-block;
    }
    #toolbar ul.options>li {
        margin-right: 5px;
    }
    #toolbar {
        padding-left: 10px;
        padding-right: 10px;
    }
    .hidden-mobile {
        display: none;
    }
    #toolbar-mobile {
        display: block;
        width: calc(100% - 20px);
        height: 56px;
        background-color: var(--main-book-color);
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 75px;
        border-radius: 8px;
        padding-left: 15px;
        padding-right: 15px;
        display: none;
    }
    #toolbar-mobile.active {
        display: block;
    }
    #toolbar-mobile ul.options {
        list-style-type: none;
        margin-bottom: 0;
        padding-left: 0;
        display: flex;
        justify-content: space-between;
    }
    #toolbar-mobile ul.options>li {
        padding: 0 !important;
        position: relative;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }
    #toolbar-mobile ul li .triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 9.5px 10px 9.5px;
        border-color: transparent transparent var(--main-book-color) transparent;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
        display: none;
    }
    #pencil-icon-mobile .triangle {
        bottom: 48px;
    }
    .isChrome #pencil-icon-mobile .triangle,
    .isiOS #pencil-icon-mobile .triangle {
        bottom: 43px;
    }
    #pencil-selector-mobile {
        padding: 10px;
        background-color: #4D4D4D;
        position: absolute;
        left: 45px;
        /*50%;*/
        margin-left: -100px;
        width: 200px;
        bottom: 48px;
        text-align: center;
        height: 56px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: none;
    }
    .isChrome #pencil-selector-mobile,
    .isiOS #pencil-selector-mobile {
        bottom: 43px;
    }
    #pencil-selector-mobile .color {
        width: 35px;
        height: 35px;
        border: 1px solid #FFF;
        border-radius: 3px;
        cursor: pointer;
    }
    #pencil-selector-mobile ul {
        padding-left: 0;
        list-style-type: none;
    }
    #pencil-selector-mobile ul>li {
        display: inline-block;
        margin-right: 3px;
    }
    #pencil-selector-mobile .color.red {
        background-color: #FF0000;
    }
    #pencil-selector-mobile .color.orange {
        background-color: #F7931E;
    }
    #pencil-selector-mobile .color.blue {
        background-color: #29ABE2;
    }
    #pencil-selector-mobile .color.green {
        background-color: #39B54A;
    }
    #eraser-selector-mobile {
        padding: 15px 10px;
        background-color: #4D4D4D;
        position: absolute;
        left: 0;
        right: 0;
        /*margin-left: -190px;*/
        width: 100%;
        /*380px;*/
        bottom: 56px;
        text-align: center;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: none;
        /*height: 57px;*/
    }
    #eraser-selector-mobile ul {
        padding-left: 0;
        list-style-type: none;
    }
    #eraser-selector-mobile ul>li {
        display: inline-block;
        margin-right: 10px;
        color: #FFF;
        font-family: 'Open Sans Light';
        font-weight: 200;
        font-size: 18px;
        cursor: pointer;
    }
    #toolbar-mobile ul.options li:last-child {
        margin-right: 0;
    }
    #toolbar-mobile ul.options>li#eraser-icon-mobile {
        position: static;
    }
    #toolbar-mobile ul.options>li#eraser-icon-mobile .img-wrapper {
        position: relative;
    }
    #eraser-icon-mobile-aux {
        background-color: #4D4D4D;
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
        height: 15px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 116px;
        display: none;
    }
    #eraser-icon-mobile .triangle {
        bottom: 48px;
        z-index: 1;
    }
    .isChrome #eraser-icon-mobile .triangle,
    .isiOS #eraser-icon-mobile .triangle {
        bottom: 38px;
        /*39px;*/
    }
    #highlighter-icon-mobile .triangle {
        bottom: 48px;
    }
    .isChrome #highlighter-icon-mobile .triangle,
    .isiOS #highlighter-icon-mobile .triangle {
        bottom: 43px;
    }
    #highlighter-selector-mobile {
        padding: 10px;
        background-color: #4D4D4D;
        position: absolute;
        left: 25px;
        /*-18px;*/
        /*50%;*/
        margin-left: -100px;
        width: 200px;
        bottom: 48px;
        text-align: center;
        height: 56px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: none;
    }
    .isChrome #highlighter-selector-mobile,
    .isiOS #highlighter-selector-mobile {
        bottom: 43px;
    }
    #highlighter-selector-mobile ul {
        padding-left: 0;
        list-style-type: none;
    }
    #highlighter-selector-mobile ul>li {
        display: inline-block;
        margin-right: 3px;
    }
    #highlighter-selector-mobile .color {
        width: 35px;
        height: 35px;
        border: 1px solid #FFF;
        border-radius: 3px;
        cursor: pointer;
    }
    #highlighter-selector-mobile .color.pink {
        background-color: #FF00FF;
    }
    #highlighter-selector-mobile .color.yellow {
        background-color: #FFFF00;
    }
    #highlighter-selector-mobile .color.blue {
        background-color: #00FFFF;
    }
    #highlighter-selector-mobile .color.green {
        background-color: #00FF00;
    }
    #toolbar-mobile ul li .zoom {
        color: #FFF;
        font-family: 'Open Sans Light';
        font-weight: 200;
        font-size: 16px;
        line-height: 30px;
        position: relative;
        top: 4px;
    }
    #toolbar-mobile ul.options>li.separator-element {
        margin-left: -3%;
        /*-10px;*/
        margin-right: -1%;
        /*-10px;*/
    }
    #toolbar-mobile ul.options>li .separator {
        position: absolute;
        top: 50%;
        margin-top: -17.5px;
    }
    #zoom-selector-mobile {
        padding: 10px;
        background-color: #4D4D4D;
        position: absolute;
        /*left: 50%;*/
        right: -15px;
        /*0;*/
        margin-left: -136px;
	    width: 312px /*272px*/;
	    bottom: 48px; /*42px;*/
        text-align: center;
        display: flex;
        justify-content: space-between;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: none;
    }
    .isChrome #zoom-selector-mobile,
    .isiOS #zoom-selector-mobile {
        bottom: 43px;
    }
    #zoom-selector-mobile>.left,
    #zoom-selector-mobile>.right {
        height: 36px;
    }
    #zoom-selector-mobile ul {
        padding-left: 0;
        list-style-type: none;
    }
    #zoom-selector-mobile ul>li {
        display: inline-block;
        margin-right: 2px;
        vertical-align: top;
    }

	#zoom-minus-mobile, #zoom-more-mobile, #zoom-vertical-mobile, #zoom-horizontal-mobile, #zoom-pagemode_1-mobile, #zoom-pagemode_2-mobile {
        cursor: pointer;
        height: 35px;
    }
    #zoom-selector-mobile .zoom-info {
        border: 1px solid #FFF;
        color: #FFF;
        background-color: #FFF;
        border-radius: 2px;
        width: 65px;
        height: 35px;
        text-align: center;
        font-family: 'Circular Std';
        font-weight: 200;
        font-size: 21px;
    }
    #zoom-selector-mobile-aux {
        background-color: #4D4D4D;
        width: 272px;
        margin-left: auto;
        margin-right: auto;
        height: 15px;
        position: fixed;
        left: auto;
        right: 10px;
        /*15px;*/
        bottom: 116px;
        display: none;
    }
    #zoom-text-icon-mobile .triangle {
        bottom: 48px;
    }
    .isChrome #zoom-text-icon-mobile .triangle,
    .isiOS #zoom-text-icon-mobile .triangle {
        bottom: 43px;
    }
    #annotations-icon-mobile .triangle {
        bottom: 48px;
    }
    #annotations-icon-mobile.annotations-visible .img-wrapper .triangle {
        display: block;
    }
    .isChrome #annotations-icon-mobile .triangle,
    .isiOS #annotations-icon-mobile .triangle {
        bottom: 38px;
        /*39px;*/
    }
    #comments-box-mobile {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        position: absolute;
        width: 100%;
        padding: 15px 15px;
        bottom: 56px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        background-color: #4D4D4D;
        display: none;
        overflow-y: hidden;
    }
    #toolbar-mobile ul.options>li#annotations-icon-mobile {
        position: static;
    }
    #comments-box-close-mobile {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        height: 24px;
    }
    #comments-box-mobile .add-comment-wrapper {
        margin-bottom: 0;
    }
    #comments-box-mobile .add-comment-text,
    #comments-box-mobile .view-comment-text {
        font-size: 13px;
    }
    #add-comment-mobile {
        cursor: pointer;
        vertical-align: middle;
        margin-right: 15px;
        height: 37px;
        background-color: var(--main-book-color);
        border-radius: 5px;
    }
    #comments-box-mobile-aux {
        background-color: #4D4D4D;
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
        height: 15px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 116px;
        display: none;
    }
    #comments-box-mobile .comments-wrapper {
        margin-top: 10px;
        display: none;
    }
    /* Gerard */
    /*#comments-box-mobile .comments-wrapper .comment {
		display: none;
	}*/
    #annotations-icon-mobile .img-wrapper {
        position: relative;
    }
    #toolbar-mobile ul li .action {
        cursor: pointer;
        height: 34px;
    }
    #toolbar-mobile ul li.active .triangle {
        display: block;
    }
    #pencil-icon-mobile.active #pencil-selector-mobile {
        display: block;
    }
    #eraser-icon-mobile.active #eraser-selector-mobile {
        display: block;
    }
    #highlighter-icon-mobile.active #highlighter-selector-mobile {
        display: block;
    }
    #annotations-icon-mobile.active #comments-box-mobile {
        display: block;
    }
    #zoom-text-icon-mobile.active #zoom-selector-mobile {
        display: flex;
    }
    #musical-note-icon.active #music-player {
        /*display: none;*/
        position: fixed;
        bottom: auto;
        top: 77px;
        left: 0;
        width: 100%;
        margin-left: auto;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    #music-player>.table {
        display: block;
        padding-right: 30px;
        /* fix whitespace */
        font-size: 0;
    }
    #music-player .music-player-button-container {
        display: inline-block;
        width: 38px;
        margin-bottom: 10px;
    }
    #music-player .music-player-slider-container {
        display: inline-block;
        width: calc(100% - 88px);
    }
    #music-player .music-player-time-container {
        display: inline-block;
        width: 50px;
    }
    #music-player .music-player-info-container {
        display: block;
        padding-left: 0;
    }
    #music-player .file-name {
        line-height: 16px;
        margin-bottom: 5px;
    }
    #music-player .copyright {
        line-height: 16px;
    }
    #toolbar ul li#musical-note-icon.active .triangle {
        display: none;
    }
    #new-comment-box-mobile .comment-header .right ul.options {
        list-style-type: none;
        margin-bottom: 0;
        padding-left: 0;
    }
    #new-comment-box-mobile .comment-header .right ul.options li {
        display: inline-block;
        cursor: pointer;
        color: #FFF;
        font-family: 'Circular Std';
        font-weight: 400;
        font-size: 18px;
        margin-right: 15px;
    }
    #new-comment-box-mobile .comment-header .right ul.options li.bold {
        font-weight: 700;
    }
    #new-comment-box-mobile .comment-header .right ul.options li.italic {
        font-style: italic;
    }
    #new-comment-box-mobile .comment-header .right ul.options li.underline {
        text-decoration: underline;
    }
    #new-comment-box-mobile .comment-header .right ul.options li:last-child {
        margin-right: 5px;
    }
    #new-comment-box-mobile .button-wrapper {
        text-align: right;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    #new-comment-box-mobile .button-wrapper button {
        background-color: transparent;
        border: 2px solid var(--main-book-color);
        color: var(--main-book-color);
        border-radius: 3px;
        font-family: 'Circular Std';
        font-weight: 400;
        font-size: 14px;
        padding: 5px 0;
        width: 90px;
        cursor: pointer;
    }
    #new-comment-box-mobile .comment-body textarea {
        width: 100%;
        resize: none;
        border: 0;
        font-family: 'Circular Std';
        font-weight: 400;
        font-size: 14px;
        color: #4D4D4D;
    }
    #new-comment-box-mobile .note-toolbar.panel-heading {
        /*display: none;*/
    }
    #new-comment-box-mobile .note-resizebar {
        display: none;
    }
    #new-comment-box-mobile .note-editor.note-frame .note-editing-area .note-editable {
        font-family: 'Circular Std';
        font-weight: 400;
        font-size: 14px;
        color: #4D4D4D;
    }
    #new-comment-box-mobile .note-editor.note-frame {
        border: 0;
    }
    #new-comment-box-mobile .note-editor.note-frame .note-statusbar {
        border: 0;
    }
    #comments-box-mobile .view-comment-wrapper {
        margin-bottom: 5px;
    }
    #comments-box-mobile .view-comment-wrapper,
    #comments-box-mobile .add-comment-wrapper {
        display: inline-block;
        margin-right: 30px;
    }
    #view-comments-mobile {
        cursor: pointer;
        vertical-align: middle;
        margin-right: 15px;
        height: 37px;
        background-color: var(--main-book-color);
        border-radius: 5px;
    }
    /* fin toolbar */
    /* header */
    #header {
        padding-left: 20px;
        padding-right: 0;
    }
    #header .arrow-left {
        display: none;
    }
    #header .arrow-left-mobile {
        display: inline;
    }
    #header .table .table-cell.first img {
        margin-right: 27px;
    }
    #header .table .table-cell.third {
        border-left: 0;
        width: 73px;
        text-align: center;
        padding-left: 0;
        position: relative;
    }
    #header .table .table-cell.third .option.users {
        height: 35px;
    }
    #header .table .table-cell.third .separator,
    #header .table .table-cell.fourth .separator {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -17.5px;
    }
    #header .table .table-cell.fourth {
        border-left: 0;
        padding-left: 0;
        width: 50px;
        text-align: center;
        position: relative;
    }
    #header .table .table-cell.fourth .option.user {
        height: 35px;
    }
    #header .table .table-cell.fifth {
        border-left: 0;
    }
    #header .info {
        display: none;
    }
    #header .option {
        display: inline;
    }
    #header .option.hidden {
        display: none;
    }
    #header .table .table-cell.first {
        width: 50px;
    }
    #header .separator {
        top: 0;
    }
    .hidden-desktop {
        display: inline-block;
    }
    #user-menu-mobile {
        position: fixed;
        width: calc(100% - 130px);
        top: 60px;
        left: 0;
        right: 0;
        background-color: #cce9f7;
        margin-left: auto;
        margin-right: auto;
        z-index: 99;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    #user-menu-mobile .user {
        font-family: 'Circular Std Bold';
        font-weight: 700;
        font-size: 15px;
        color: #0093d7;
        padding-top: 7px;
        padding-bottom: 7px;
        border-bottom: 1px solid #FFF;
        /*cursor: pointer;*/
    }
    #user-menu-mobile .user-menu-mobile-option {
        font-family: 'Circular Std';
        font-weight: 400;
        font-size: 15px;
        color: #0093d7;
        padding-top: 7px;
        padding-bottom: 7px;
        cursor: pointer;
    }
    #users-menu-mobile {
        position: fixed;
        width: calc(100% - 130px);
        top: 60px;
        left: 0;
        right: 0;
        background-color: #cce9f7;
        margin-left: auto;
        margin-right: auto;
        z-index: 99;
        text-align: center;
    }
    #users-menu-mobile .subject {
        font-family: 'Circular Std Bold';
        font-weight: 700;
        font-size: 13px;
        color: #0093d7;
        padding-top: 7px;
        padding-bottom: 7px;
        /*border-bottom: 1px solid #FFF;*/
        line-height: 15px;
        /*cursor: pointer;*/
        padding-left: 20px;
        padding-right: 20px;
    }
    #users-menu-mobile .subject .subject-wrapper {
        border-bottom: 1px solid #FFF;
        padding-top: 7px;
        padding-bottom: 10px;
    }
    #users-menu-mobile .users-menu-mobile-option {
        font-family: 'Circular Std';
        font-weight: 400;
        font-size: 15px;
        color: #0093d7;
        padding-top: 7px;
        padding-bottom: 7px;
        cursor: pointer;
    }
    #users-menu-mobile .users-menu-mobile-option.active,
    #users-menu-mobile .users-menu-mobile-option:hover {
        background-color: #a3d8f1;
    }
    /* fin header */
}

@media (max-width: 330px) {
    #toolbar ul.options>li {
        margin-right: 3px;
    }
}