body {
    font: 100% "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 13.33px;

}

/* VIEWER ******************/
.viewer {
    background-image: url("/assets/images/viewer/bg.png");
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* TOP ******************/
.top_menu {
    background-image: url("/assets/images/viewer/bg.png");
    border-bottom: 1px solid #777777;
    color: #CCCCCC;
    width: 100%;
    position: absolute;
    z-index: 1000;

    -moz-box-shadow: 0px 2px 5px 0px #222222;
    -webkit-box-shadow: 0px 2px 5px 0px #222222;
    -o-box-shadow: 0px 2px 5px 0px #222222;
    box-shadow: 0px 2px 5px 0px #222222;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=180, Strength=5);
}

.top_right_buttons {
    display: flex;
    justify-content: flex-end;
}

.title {
    font-size: 16px;
    padding: 14px;
    overflow: hidden;
    white-space: nowrap;
    float: left;
}

h1.title {
    font-size: 16px;
    padding: 14px;
    overflow: hidden;
    white-space: nowrap;
    float: left;
    margin-block-end: initial;
    margin-block-start: initial;
    margin-inline-end: initial;
    margin-inline-start: initial;
}

.close_viewer {
    background: url("/assets/images/viewer/viewer-close.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
}

.open_viewer {
    background: url("/assets/images/viewer/viewer-open.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
}

.prev_record {
    background: url("/assets/images/viewer/prev_record.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
    /* display: none; */
}

.next_record {
    background: url("/assets/images/viewer/next_record.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
    /* display: none; */
}


.BtCollaborate {
    background: url("/assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #3d94f6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #337fed;
    display: inline-block;
    color: #ffffff;
    font-weight: normal;
    padding: 6px 24px 6px 48px;
    text-decoration: none;
    float: right;
    cursor: pointer;
    margin-top: 10px;
}

.BtCollaborate:hover {
    background: url("/assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #1e62d0;
}

.BtCollaborate:active {
    position: relative;
    top: 1px;
}

.BtCollaborate_exit {
    background: url("/assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #aa0000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #bb0000;
    display: inline-block;
    color: #ffffff;
    font-weight: normal;
    padding: 6px 24px 6px 48px;
    text-decoration: none;
    float: right;
    cursor: pointer;
    margin-top: 10px;
}

.BtCollaborate_exit:hover {
    background: url("/assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #cc0000;
}

.BtCollaborate_exit:active {
    position: relative;
    top: 1px;
}

/* THUMB ***************************/

.content_thumb,
.content_thumbbig {
    overflow-y: scroll;
    background-image: url("/assets/images/viewer/bg.png");
    position: absolute;
}

.thumbimg {
    border: 1px solid #777777;
    background-color: #111111;
    text-align: center;
    width: 140px;
    height: 160px;
    padding: 10px;
    margin-bottom: 10px;

    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=10);
}

.thumb {
    float: left;
    margin: 20px;
    text-align: center;
    color: #CCCCCC;
    font-size: 12px;
}

.thumb_mobile {
    margin: 5px;
}

.thumb_mobile .thumbimg {
    width: 90px;
    height: 110px;

    padding: 5px;
    margin-bottom: 5px;
}

.thumbbig {
    /*position: absolute;*/
    text-align: center;
    color: #CCCCCC;
    font-size: 12px;
    float: left;
    margin: 20px;
}

.thumbbigimg {
    border: 1px solid #777777;
    background-color: #111111;
    text-align: center;

    padding: 10px;
    margin-bottom: 10px;


    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=10);
}

.current_thumb {
    background-color: #2B2117;
    border: 1px solid #8F7449
}

/* FLIP ***************************/
.mybook_shadow {
    -moz-box-shadow: 0px 0px 20px 0px #000;
    -webkit-box-shadow: 0px 0px 20px 0px #000;
    -o-box-shadow: 0px 0px 20px 0px #000;
    box-shadow: 0px 0px 20px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=20);
}

/* PICTURE  ***********************/
.picture {
    overflow: hidden;
    background-image: url("/assets/images/viewer/bg.png");
    width: 100%;
}

.book {
    overflow: hidden;
    background-image: url("/assets/images/viewer/bg.png");
    width: 100%;
}

.grid {
    border: 0px solid #ff0000;
    cursor: move;
    -moz-box-shadow: 0px 0px 20px 0px #000;
    -webkit-box-shadow: 0px 0px 20px 0px #000;
    -o-box-shadow: 0px 0px 20px 0px #000;
    box-shadow: 0px 0px 20px 0px #000;
    /*filter:progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=20);*/
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 0;
}

.layer {
    position: absolute;
}

.page_next,
.page_next_flip {
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-left: 1px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
}

.page_prev,
.page_prev_flip {
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-right: 1px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
    left: 0px;
}

.page_prev img,
.page_next img,
.pae_prev_flip img,
.page_next_flip img {
    margin-top: 26px;
    margin-bottom: 18px;
}

.page_prev:hover,
.page_next:hover,
.page_prev_flip:hover,
.page_next_flip:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    cursor: pointer;
}

.content_picture,
.content_flip,
.content_book {
    overflow: hidden;
    background-image: url("/assets/images/viewer/bg.png");
    position: absolute;
    z-index: 2;
    text-align: center;
}

.navbox {
    float: left;
    z-index: 1000;
    position: absolute;
    background-color: #000;
    padding: 1px;
    z-index: 1200;
}

.navcontainer {
    margin-top: 3px;
}

.navcontainer img {
    border: 0px solid #000;
}

.navtoolbar {
    background-image: url("/assets/images/viewer/bg-dark.png");
    cursor: move;
    height: 22px;
}

.navtoolbar:hover {
    background-image: url("/assets/images/viewer/bg-title.png");
}

.navzone {
    background: none repeat scroll 0 0 #444;
    cursor: move;
    /*opacity: 0.4;
    filter : alpha(opacity=40);*/
    position: absolute;
    width: 100%;
    height: 100%;
}

.navzone_border {
    border: 1px solid yellow;
    width: 100%;
    height: 100%;
}

.navclose,
.navopen {
    color: #CCCCCC;
    font-size: 12px;
    float: right;
    text-align: right;
    cursor: pointer;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.navclose:hover,
.navopen:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navaction {
    display: block;
    color: #CCCCCC;
    font-size: 13.3px;
    background-image: url("/assets/images/viewer/bg-dark.png");
    height: 22px;
}

.zoomOut {
    width: 16px;
    float: left;
    padding: 2px 0px 0px 2px;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.zoomOut:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.prc {
    float: left;
    text-align: center;
}

.prc_mobile {
    padding: 7px 0px 0px 0px;
}

.viewer_control_page {
    padding-top: 14px;
}

.zoomIn {
    width: 16px;
    float: right;
    padding: 2px 2px 0px 0px;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.zoomIn:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}


/* BOTTOM *********************/

.bottom_menu {
    background-image: url("/assets/images/viewer/bg.png");
    border-top: 1px solid #777777;
    color: #CCCCCC;
    width: 100%;
    position: absolute;
    z-index: 1000;

    -moz-box-shadow: 0px -2px 5px 0px #222222;
    -webkit-box-shadow: 0px -2px 5px 0px #222222;
    -o-box-shadow: 0px -2px 5px 0px #222222;
    box-shadow: 0px -2px 5px 0px #222222;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=90, Strength=5);
}

.bottom_bt {
    float:
        left;
    padding: 0px 0px 0px 5px;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.bottom_bt_left {
    float:
        left;
    padding: 0px 0px 0px 5px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
}

.bottom_bt_left.tippy-interact {
    display: flex;
    justify-content:
        center;
    align-items: center;
    height: 100%;
}

.type_view {
    padding-right: 6px;
    background-image: url("/assets/images/viewer/bg-middle.png");
    border-right: 1px solid #444;
}

.type_view img {
    padding-right: 5px;
}

.type_share {
    margin-left: 10px;
    border-left: 1px solid #444;
}

.type_share img {
    padding-right: 5px;
}

.type_zoom {
    margin-left: 10px;
    border-left: 1px solid #444;
}

.bottom_bt_right {
    float:
        right;
    padding: 0px 10px 0px 0px;
    display: flex;
    align-items: center;
}


.button {
    cursor: pointer;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.button_type_view {
    cursor: pointer;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.selected {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.button:hover,
.button_type_view:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}


.content_left_button {
    cursor: pointer;
    color: #aaa;
    background-image: url("/assets/images/viewer/bg-title.png");
    border: 1px solid #444;
    cursor: pointer;
    padding: 5px;
    margin-bottom: -1px;
}

.content_left_button:hover {
    cursor: pointer;
    color: #fff;
    background-image: none;
    background-color: #000;
    border: 1px solid #444;
    cursor: pointer;
    padding: 5px;
}

.content_left_block {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.left_content h4 {
    margin-bottom: 5px;
    margin-top: 0px;
}


.content_left_title_print {
    background-image: url("/assets/images/viewer/print.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.content_left_title_image {
    background-image: url("/assets/images/viewer/image.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.content_left_title_attach {
    background-image: url("/assets/images/viewer/attach.png");
    background-position: 0 -7px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.content_left_title_volume {
    background-image: url("/assets/images/viewer/volumes.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.viewer_control_page {
    /* padding-top: 14px; */
    /* justify-self: flex-end; */
    /* margin-left: auto; */
    display: flex;
    align-items: center;
}

#viewer_volumes .content_left_button {
    color: #fff;
    text-decoration: none;
    opacity: 0.6;
}

#viewer_volumes .content_left_button:hover {
    opacity: 1;
}


.page {
    background-image: url("/assets/images/viewer/bg-dark.png");
    border: 1px solid #444;
    color: #999999;
    text-align: right;
    width: 28px;
    padding: 1px;
}

.page_control {
    float: left;
    padding: 0px 5px;
}

.page_control,
.page_next_mini,
.page_prev_mini {
    float: left;
}

.page_next_mini,
.page_prev_mini {
    margin-top: 3px;
}



.BtContrast img {
    float: left;
    position: relative;
    z-index: 1;
}

.contrast-value {
    background-image: url("/assets/images/viewer/bg-title.png");
    border: 0px solid #444;
    color: #999999;
    text-align: center;
    width: calc(100% - 4px);
    position: absolute;
    top: 230px;
}

.contrast_action {
    float: left;
    background-image: url("/assets/images/viewer/bg-title.png");
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #777;

    height: 300px;
    width: 32px;
    position: absolute;
    top: -250px;
}

.contrast_action_ie {
    float: left;
    width: 60px;
    height: 32px;
}

.slider-contrast {
    left: 10px;
    position: relative;
    top: 10px;
    z-index: 1;
}

.BtRotate img {
    float: left;
    position: relative;
    z-index: 1;
}

.rotate_bt {
    padding: 10px 2px 10px 2px;
    cursor: pointer;
    float: left;
    width: 28px;
    text-align: center;
    color: #777;
}

.rotate_bt:hover {
    color: #fff;
}

.rotate_action {
    float: left;
    background-image: url("/assets/images/viewer/bg-title.png");
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #777;

    height: 200px;
    width: 32px;
    position: absolute;
    top: -150px;

}

.rotate_load {
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 10000;
}

.rotate_load_txt {
    border: 1px solid #777777;
    background-color: #111111;
    filter: alpha(opacity=100);
    text-align: center;
    padding: 70px 10px 10px 10px;
    margin: auto;
    color: #fff;
    width: 250px;
    height: 100px;
    vertical-align: middle;
}



/* CONTENT LEFT ****************/
.content_left {
    position: absolute !important;
    background-image: url("/assets/images/viewer/bg-dark.png");
    border-right: 1px solid #777777;
    height: 100%;
    z-index: 10;
    left: 0;
    -moz-box-shadow: 2px 0px 5px 0px #222222;
    -webkit-box-shadow: 2px 0px 5px 0px #222222;
    -o-box-shadow: 2px 0px 5px 0px #222222;
    box-shadow: 2px 0px 5px 0px #222222;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=90, Strength=5);
}

.content_left_bar {
    background-image: url("/assets/images/viewer/bg-title.png");
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #777777;
    display: block;
}

.content_left_title {
    color: #e0e0e0;
    text-transform: uppercase;
    float: left;
}

.content_left_close {
    cursor: pointer;
    float: right;
}

.content_left_drag {
    font-size: 12px;
    background-color: #000;
    color: #CCCCCC;
    float: right;
    cursor: move;
}

.left_content {
    overflow-y: auto;
    height: 100%;
}

.bookmark_content ul {
    color: #CCC;
    padding-left: 15px;
    padding-right: 2px;
    font-size: 11px;
}

.bookmark_content ul li {
    cursor: pointer;
}

.bookmark_content ul li:hover {
    color: #46c7ec;
}

.bookmark_content ul li:focus {
    color: #46c7ec;
}

.info_content,
.ocr_content {
    color: #AAAAAA;
    padding: 10px;
}

/******/

.ui-widget-content {
    background-image: url("/assets/images/viewer/bg.png");
    background-color: #000;
    border: 0px solid #AAAAAA;
}

.ui-slider-vertical {
    height: 100px;
    width: 0.8em;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background-image: url("/assets/images/viewer/bg-dark.png");
    border: 1px solid #555;
    font-weight: normal;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background-image: url("/assets/images/viewer/bg-dark.png");
    border: 1px solid #555;
    font-weight: normal;
}

.ui-slider-vertical .ui-slider-handle {
    left: -0.3em;
    margin-bottom: -0.6em;
    margin-left: 0;
}

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}

.ui-tooltip {
    position: absolute;
    background-image: none;
    background-color: #181818 !important;
    color: #fff;
    z-index: 10000000;
    padding: 7px;
    -moz-box-shadow: 2px 0px 5px 0px #222222;
    -webkit-box-shadow: 2px 0px 5px 0px #222222;
    -o-box-shadow: 2px 0px 5px 0px #222222;
    box-shadow: 2px 0px 5px 0px #222222;
}

.ui-resizable-s {
    bottom: -5px;
    cursor: s-resize;
    height: 7px;
    left: 0;
    width: 100%;
}

.ui-resizable-e {
    cursor: e-resize;
    height: 100%;
    right: -5px;
    top: 0;
    width: 7px;
}

.ui-resizable-handle {
    display: block;
    font-size: 0.1px;
    position: absolute;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
}

.ui-icon-gripsmall-diagonal-se {
}

.ui-icon {
    background-image: url("/assets/images/viewer/annotate/resize.png");
}


.arrow {
    width: 100%;
    height: 16px;
    overflow: hidden;
    position: absolute;
    bottom: -16px;
    left: 0;
}

.arrow.top {
    top: -16px;
    bottom: auto;
}

.arrow.left {
    left: 0%;
}

.arrow:after {
    content: "";
    position: absolute;
    left: calc(50% - 12.5px);
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
    background-color: #181818 !important;
}

.arrow.top:after {
    bottom: -20px;
    top: auto;
}



.logo {
    /*  background-image: url("http://cdn.divvalib.net/tools/yoolib-viewer/logo-mini.png") ;
      bottom: 60px;
      height: 10px;
      position: absolute;
      right: 10px;
      width: 60px;
      z-index: 10000;*/
}



/**/


.search_form {
    color: #CCC;
    padding: 15px 15px 5px 15px;
    font-size: 13.3px;
}

.search_txt {
    color: #666;
    background-color: #fff;
    padding-left: 5px;
    font-size: 13.3px;
    border: 1px solid #000;
    width: 80%;
    height: 28px;
}

.search_bt {
    color: #666;
    background-color: #fff;
    padding: 6px;
    font-size: 13.3px;
    border: 1px solid #000;
}

.search_result {
    color: #CCC;
    padding-top: 0px;
    font-size: 13.3px;
}

#search_left {
    overflow-y: auto;
}

.search_result_total {
    padding: 5px 15px 35px 15px;
    color: #aaa;
    border-bottom: 1px solid #555;
}

.search_result_title,
.info_title {
    padding: 10px 10px 10px 5px;
    background-image: url("/assets/images/viewer/bg-title.png");
    border-bottom: 1px solid #555;
    cursor: pointer;
}

.search_result_title_span,
.info_title_span {
    padding-left: 20px;
    background-image: url("/assets/images/viewer/mini-circle.png");
    background-repeat: no-repeat;
    background-position: 0 3px;
}

.search_result_content,.search_result_content_list {
    padding: 10px 10px 10px 25px;
    background-image: url("/assets/images/viewer/bg.png");
    border-bottom: 1px solid #444;
    cursor: pointer;
}

.search_result_content:hover,.search_result_content_list:hover {
    padding: 10px 10px 10px 25px;
    background-image: url("/assets/images/viewer/bg-middle.png");
    border-bottom: 1px solid #444;
    cursor: pointer;
}

.search_result_content_span {
    padding-left: 20px;
    background-image: url("/assets/images/viewer/mini-dot.png");
    background-repeat: no-repeat;
}

.search_result_content em,.search_result_content_list em {
    background-color: #0066AA;
    color: #FFFFFF;
}

.picture_highlight_div {
    z-index: 1000;
    cursor: pointer;
    /* background-color: rgba(0, 255, 0,0.5); */
}

.picture_highlight {
    background-color: #ff0000;
    z-index: 1000;
    opacity: 0.2;
    position: absolute;
}

.picture_boxes {
    background-color: #ff0000;
    z-index: 1000;
    opacity: 0.2;
    position: absolute;
}

.picture_highlight_selected {
    background-color: #00ff00 !important;
}


.picture_boxes:hover {
    background-color: #ff9900;
}

.picture_boxes_selected {
    background-color: #00aaff;
}

.search_prev_next {
    padding: 20px 10px;
}

.search_prev_next_td {
    width: 33%;
    float: left;
}

.prev_next_bt {
    background-image: url("/assets/images/viewer/bg-title.png");
    border: 1px solid #555555;
    cursor: pointer;
    padding: 5px;
}

.prev_next_bt.prev {
    float: left;
    margin-right: 10px;
}

.prev_next_bt.next {
    float: right;
    margin-left: 10px;
}

.search_prev_next_page {
    padding: 5px;
    float: left;
    width: 100%;
    text-align: center;
}

.search_prev_next_bt {
    float: left;
    width: 100%;
}


/* RTL */


html.RTL .close_viewer {
    border-left: 0px;
    margin-left: 0px;
    border-right: 1px solid #444444;
    float: left;
    margin-right: 10px;
}

html.RTL .title {
    float: right;
}

html.RTL .content_left_title {
    float: right;
}

html.RTL .content_left_close {
    float: left;
}

html.RTL .search_result_title_span {
    padding-left: 0px;
    padding-right: 20px;
    float: right !important;
}

html.RTL .arrow_alto {
    float: left !important;
}

html.RTL .search_prev_next_td {
    float: right;
}

html.RTL .prev_next_bt.prev {
    float: right;
}

html.RTL .prev_next_bt.next {
    float: left;
}

html.RTL .thumb {
    float: right;
}


/**/


.page_prev_rtl,
.page_prev_rtl_flip {
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-left: 1px solid #777777;
    border-right: 0px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
}

.page_next_rtl,
.page_next_rtl_flip {
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-right: 1px solid #777777;
    border-left: 0px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
    left: 0px;
}

.thumbbig .openseadragon-canvas {
    z-index: 1 !important;
    cursor: pointer;
}

.thumbbig .keyboard-command-area {
    cursor: pointer;
    opacity: 0;
}

.pageflip_page {
    height: 100%;
    width: 100%;
}

.navscale_bigcontainer {
    position: absolute;
    bottom: 20px;
    left: 10px;
    z-index: 1000;
    cursor: move;
    display: none;
}

.navscale {
    background-color: rgba(20, 20, 20, .9);
    color: #ccc;
    font-size: 9px;
}

.navscale_container_h {
    height: 10px;
    float: right;
}

.navscale_h {
    width: 100px;
    height: 11px;
    margin-top: 3px;
    line-height: 9px;
}


.navscale_container_v {
    width: 20px;

}

.navscale_v {
    height: 100px;
    width: 12px !important;
    line-height: 9px;
    float: right;
}

.navscale_rotate_h {
    float: left;
}

.navscale_rotate img {
    height: 20px;
}


.navscale10h {
    float: left;
    width: 10%;
    height: 8px;
}

.navscale_grid_h {
    background-image: url("/assets/images/viewer/scale-grid-h.png");
    background-position: 50%;
}

.navscale_grid_h2 {
    background-image: url("/assets/images/viewer/scale-grid-h2.png");
    background-position: 50%;
}

.navscale10v {
    width: 8px;
    height: 10%;
    display: none;
}

.navscale_grid_v {
    background-image: url("/assets/images/viewer/scale-grid-v.png");
    background-position: 50%;
}

.navscale_grid_v2 {
    background-image: url("/assets/images/viewer/scale-grid-v2.png");
    background-position: 50%;
}






.div_scale_points {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.div_scale_point {
    padding: 5px;
    border: 1px solid #ff0000;
    width: 10px;
    height: 10px;
    background-color: #ff0000;
    z-index: 10;
}

.svgscale {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.svgscale svg {
    width: 100%;
    height: 100%;
}

.svgscale path {
    z-index: 100;
}


.annotate_highlight {
    background-color: #FF0000;
    position: absolute;
    z-index: 1;
    opacity: 0.3;
    font-size: 0px;
}

.search_annotate_full {
    border-right: 3px solid #991919;
    padding-right: 3px;
}

.zones_content_father {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.zones_content {
    position: absolute;

}

.zone_highlight_view0 {
    display: block;
}

.zones_content .annotation_highlight_hover,
.zones_content .annotation_highlight:hover {
    background-color: #ff0000 !important;
    border: 1px solid #ffffff;
    display: block !important;
}

.zones_content .annotation_selected {
    /* background-color: #ed9c00;*/
}

.zone_highlight_search {
    display: none;
}

.zone_highlight {
    /*
    background-color: #0077ff;
    border: 1px solid #ffffff;
    */
    opacity: 0.2;

    position: absolute;
    z-index: 1;
    font-size: 0px;
    z-index: 1000;
}

.zone_highlight_search_box .zone_highlight {
    background-color: #0077ff;
    border: 1px solid #ffffff;
}

.zones_content_show .zone_highlight {

    background-color: #0077ff;
    border: 1px solid #ffffff;

}


.zone_highlight_selected {
    background-color: #ff0000 !important;
    border: 1px solid #ffffff;
}

.zone_selected {
    display: block !important
}

#annotation_content {

}

.annotation_highlight_page .search_result_content_list{
    background-color: #600;
    background-image: none;
}
.annotation_highlight_page .search_result_content_list:hover, .annotation_highlight_page.annotation_highlight_hover .search_result_content_list{
    background-color: #300!important;
}

.annotation_highlight_id .search_result_content_list{
    background-color: #900;
    background-image: none;
}
.annotation_highlight_id .search_result_content_list:hover{
    background-color: #300;
}

.annotate_table {
    background-color: #444;
    color: #bcbcbc;
    padding: 5px;
}

.annotate_table tr {
    background-color: #393939;
}

.annotate_table tr:nth-child(2n+0) {
    background-color: #323232;
}

.annotation_td {
    padding: 5px 10px;
}

.annotation_td_title {
    background-color: #0f0f0f;
    color: #bcbcbc;
    padding: 5px 10px;
    text-transform: uppercase;
    font-size: 12px;
}

.annotate_td_border {
    border-left: 1px solid #666;
}
#list_annotation{
    width: calc(100% - 10px);
    margin: 15px 5px 0px 5px;
}

#list_annotation .annotation_highlight_hover {
    background-color: #470000 !important;
}

#list_annotation .annotation_selected {
    background-color: #6f5927;
}

.view_annotation {
    display: none;
}

.view_annotation_table {
    background-color: #444;
    color: #bcbcbc;
    padding: 5px;
    margin: 5px 0;
    width: 100%;
}

.view_annotation_table tr {
    background-color: #323232;
}

.view_annotation_table tr:nth-child(2n+0) {
    background-color: #393939;
}

.bt_blue_annotation {
    background-color: #0047d6;
    border: 1px solid #0083ff;
    color: #fff;
    cursor: pointer;
    float: right;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0px 20px 10px;
}

.bt_green_annotation {
    background-color: #056813;
    border: 1px solid #179a29;
    color: #fff;
    cursor: pointer;
    float: left;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0;
}

.bt_green_annotation_full {
    background-color: #056813;
    border: 1px solid #179a29;
    color: #fff;
    cursor: pointer;
    width: 100%;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0;
}

.bt_grey_annotation {
    background-color: #ddd;
    border: 1px solid #f0f0f0;
    color: #fff;
    cursor: pointer;
    float: left;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0;
}

#annotate_prev_next {
    display: table;
    width: 100%;

}

.hr_annotate {
    border-top: 0px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}

.bt_prev_next {
    background-color: #666;
    border: 1px solid #777;
    color: #fff;
    cursor: pointer;
    float: left;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0;
}

.bt_annotation_prev {
    float: left;
}

.bt_annotation_next {
    float: right;
}

.bt_prev_next:hover,
.bt_grey_annotation:hover,
.bt_green_annotation_full:hover,
.bt_green_annotation:hover,
.bt_blue_annotation:hover,
#bt_back_annotation:hover,
#bt_add_annotation:hover {
    background-color: #000;
    border: 1px solid #444;
    color: #fff;
}

#bt_back_annotation {
    float: left;
    margin-top: 20px;
}

#bt_add_annotation {
    float: right;
    margin-top: 20px;
}

.view_annotation_td_title {
    text-transform: uppercase;
}

td.annotation_edit,
td.annotation_delete,
td.annotation_add_zone {
    text-align: center;
    width: 20px;
    cursor: pointer;
}

td.annotation_edit:hover,
td.annotation_delete:hover,
td.annotation_add_zone:hover {
    color: #fff;
}

.view_annotation_div {
    background-color: #111;
    border: 1px solid #666;
    color: #ccc;
    display: inline-table;
    margin: 5px 0px 20px;
    padding: 10px;
    width: calc(100% - 22px);
}

.view_annotation_div textarea {
    background-color: #ddd;
    border: 1px solid #000;
    color: #333;
    padding: 5px;
    width: calc(100% - 10px);
}

.view_annotation_div select {
    width: 100%;
    background-color: #ddd;
    border: 1px solid #000;
    padding: 5px;
    color: #333;
}

.annotation_filter_itemtype {
    padding: 5px;
    width: calc(100% - 12px);
    background-color: #333;
    border: 1px solid #999;
    color: #ccc;
    margin-bottom: 0px;
    margin-top: 5px;
}

.annotation_filter_itemtype_bt {
    padding: 5px;
    width: calc(100%);
    background-color: #333;
    border: 1px solid #999;
    color: #ccc;
    margin-bottom: 15px;
    margin-top: 5px;
    cursor: pointer;
}

.annotation_filter_itemtype_bt:hover {
    background-color: #000;
    border: 1px solid #999;
    color: #fff;
}

.view_annotation_div select .level1 {
    margin-left: 30px;
}

.view_annotation_div select .level2 {
    margin-left: 60px;
}

.view_annotation_div select .level3 {
    margin-left: 90px;
}

.view_annotation_div select .level4 {
    margin-left: 120px;
}

.view_annotation_div a {
    color: #999;
    text-decoration: none;
    font-size: 10px;
    cursor: pointer;
}

.status_active {
    color: #95bf2d;
    font-size: 8px;
    text-align: center;
}

.status_noactive {
    color: #c33421;
    font-size: 8px;
    text-align: center;
}

.annotation_element {
    position: relative;
    margin-bottom: 5px;
}

.annotation_element .remove_element {
    color: #39aadc;
    position: absolute;
    right: -7px;
    top: -5px;
    color: #cc0000;
    cursor: pointer;
}

.annotation_element .remove_zone {
    float: right;
    background-color: #990000;
    border: 1px solid #ff0000;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0;
    opacity: 0.7;
}

.annotation_element .add_zone {
    float: left;
    background-color: #0047d6;
    border: 1px solid #0083ff;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    text-decoration: none;
    margin: 20px 0;
    opacity: 0.7;
}

.remove_zone {
    display: none;
}

.date_ymd {
    width: 40px;
    background-color: #ddd;
    border: 1px solid #000;
    color: #333;
    padding: 0px 5px;
}

.annotation_date {
    border: 1px dotted #666;
    padding: 5px;
}

.annotation_reorder {
    width: 20px;
    background-color: #222;
    border: 1px solid #333;
    color: #777;
    padding: 0px 5px;
}

#annotation_waiting {
   
    padding: 10px;
    text-align: center;
    color: #ccc;
}

#childs_to_parent_annotation {
}



@media only screen and (max-width: 1024px) {
    #template1 .bottom_bt_right {
        float: left;
        margin-left: 20px;
    }

    #template1.ui-tooltip {
        display: none !important;
    }

    #template1.bottom_menu {
        overflow-x: scroll;
        overflow-y: hidden;
        display: block !important;
        min-height: 50px;
    }

    #template1.bottom_menu_content {
        min-width: 500px;
        display: inline-block;
    }
}


#download_crop {
    position: absolute;
    z-index: 1;
    opacity: 0.5;
    font-size: 0px;
    z-index: 1000;
    border: 0px;
}


#download_crop_content_father {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

#download_crop_content {
    position: absolute;

}

.cl_download_bt {
    width: 100%;
    margin: 10px 0 0px 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    cursor: pointer;
}

.cl_download_bt:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.comparator_exist {
    margin: 10px 0 0px 0px;
    background-color: rgba(0, 0, 0, 0);
    padding: 20px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    border-radius: 10px;
    display: block;
    width: calc(100% - 22px);
    text-align: center;
}

.comparator_bt {
    margin: 10px 0 0px 0px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    cursor: pointer;
    border-radius: 10px;
    display: block;
    width: 100%;
}

.comparator_bt:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.comparator_add_bt {
    margin: 10px 0 0px 0px;
    background-color: rgba(0, 0, 0, 0);
    padding: 20px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    cursor: pointer;
    border-radius: 10px;
    display: block;
    width: 100%;
}

.comparator_add_bt:hover {
    background-color: rgba(0, 0, 0, 0.9);
}


.content_left_block_options {
    padding: 0px 20px 20px 10px;
}

.content_left_block_options:last-child {
    padding: 0px 20px 0px 10px;
}

#download_content hr,
#share_content hr {
    margin: 30px 0;
    border-top: 0px;
    border-bottom: 1px dotted #666;
}

.cl_download_attached_file {
    padding: 5px;
    cursor: pointer;
}

.cl_download_attached_file:hover {
    padding: 5px;
    color: #fff;
}

.cl_download_attached_file .content_left_title_attach {
    padding-left: 25px;
}

.cl_share_permalink_txt {
    background-color: #333;
    border: 1px solid #666;
    padding: 5px;
    color: #ccc;
    width: calc(100% - 180px);
}

.cl_share_permalink_bt {
    background-color: #222;
    border: 1px solid #666;
    padding: 5px 15px;
    border-left: 0px;
    color: #ccc;
    cursor: pointer;
    width: 168px;
}

.cl_share_permalink_bt:hover {
    color: #fff;
    background-color: #000;
}

#cl_share_crop_img_content {
    height: 160px;
    text-align: center;
}

#cl_share_crop_img_content img {
    max-height: 150px;
    max-width: 100%;
}

#cl_share_embeded_iframe {
    width: 100%;
    height: 160px;
    border: 1px solid #000;
}

#cl_share_crop_img {
    border: 0;
}

#viewer_volumes .selected_volume {
    color: #46c7ec !important;
    opacity: 1 !important;
    font-weight: normal !important;
}
#viewer_media_organization .selected_volume {
    color: #46c7ec !important;
    opacity: 1 !important;
    font-weight: normal !important;
}

#custom_viewer {
    position: absolute;
    top: 51px;
    width: 100%;
    height: calc(100% - 50px);
}

/*RGAA / WCAG */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

}

#multimedia {
    margin: auto;
    display: table;
}

/* TEMPLATE 2 */
#template2 .content_left {
    left: auto;
    border-right: 0;
}

#template2 .button {
    opacity: 1;
}

#template2 .left_content {
    border-right: 0;
    border-left: 1px solid #000;
    box-shadow: none;
}

#template2 .bottom_menu {
    background-image: none;
    border-top: 0;
    width: calc(100% - 400px);
    box-shadow: none;
    left: 400px;
}

#template2 .bottom_bt {
    float: right;
}


#template2 .borderbar {
    float: right;
    padding: 25px 15px;
}

#template2 .borderbar .bar {
    border-right: 1px solid #6B6B6B;
    height: 21px;
}

#template2 .type_view {
    padding-right: 0px;
    background-image: none;
    border-right: 0px solid #444;
}

#template2 .bottom_bt_right {
    padding: 25px 8px 0px 8px;
}

#template2 .type_view img {
    padding: 0 8px;
}


#template2 .bottom_bt {
    padding: 25px 8px 0px 8px;
}

#template2 .img_modif_buttons_wrapper_flex .bottom_bt{
    padding: 0px 8px 0px 8px;
}

#template2 .bottom_menu,
#template2 .top_menu {
    background-image: none;
    background-color: #212225;
    border-bottom: 1px solid #212225;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    filter: none;
}

#template2 h1.title {
    line-height: 70px;
    padding: 0px 14px;
    /* width: calc(100% - 300px); */
}

#template2 .content_left,
#template2 .content_picture,
#template2 .content_flip,
#template2 .picture,
#template2 .viewer {
    background-image: none;
    background-color: #3A3D40;
}

#template2 .info_title {
    display: none;
}

#template2 .button_type_view {
    opacity: 1;
}

#template2 .button_type_view:hover {
    opacity: 0.5;
}

#template2 .button:hover {
    opacity: 0.5;
}

#template2 .type_control_share {
    padding-right: 10px;
}

#template2 .viewer_control_page {
    /* padding-top: 18px !important; */
}

#template2 .page_prev_mini,
#template2 .page_next_mini {
    display: none !important;
}

#template2 .page {
    background-image: none;
    background-color: #fff;
    border: 1px solid #A9ADAD;
    color: #000;
    text-align: right;
    width: 40px;
    padding: 0 5px;
    border-radius: 5px;
    height: 36px;
}

#template2 .top_menu,
#template2 .info_content,
#template2 .ocr_content,
#template2 .bottom_menu {
    color: #fff;
}

#template2 .close_viewer {
    height: 70px;
    background: url("/assets/images/viewer2/close.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 0px;
    cursor: pointer;
    float: left;
    width: 44px;
    margin-left: 10px;
}

#template2 .arrow:after {
    background-color: #fff !important;
}

#template2 .ui-tooltip {
    background-color: #fff !important;
    color: #000;
}

#template2 .contrast_action {
    top: 15px;
    left: 2px;

    border-bottom: 1px solid #777;
}

#template2 .slider-contrast {
    top: 50px;
}

#template2 .contrast-value {
    top: 270px;
    left: 0px;
}

#template2 .content_left_bar {
    background: none;
    border: 0;
    padding-bottom: 30px;
}

#template2 .content_left_title {
    line-height: 20px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1.3em;
}

#template2 .content_left_ico {
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    margin-right: 10px;
    background-repeat: no-repeat;
}

#template2 .ico_information {
    background-image: url("/assets/images/viewer2/info.png");
}

#template2 .ico_search {
    background-image: url("/assets/images/viewer2/search.png");
}

#template2 .ico_text {
    background-image: url("/assets/images/viewer2/ocr-black.png");

}

#template2 .ico_comparator {
    background-image: url("/assets/images/viewer2/comparator.png");

}

#template2 .ico_annotate {
    background-image: url("/assets/images/viewer2/annotate.png");

}

#template2 .ico_download {
    background-image: url("/assets/images/viewer2/download.png");

}

#template2 .ico_share {
    background-image: url("/assets/images/viewer2/share.png");

}



#template2 .left_content_type_ocr {
    background-color: #fff;
}

#template2 .left_content_type_ocr .content_left_title,
#template2 .left_content_type_ocr .ocr_content {
    color: #000;
}

#template2 .search_result_content em,#template2 .search_result_content_list em {
    background-color: #9d5254;
    color: #FFFFFF;
}

#template2 .page_next,
#template2 .page_next_flip {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border: 0px;
    background-color: transparent;
    opacity: 1;
    filter: alpha(opacity=100);
    width: 40;
    height: 40;
    position: absolute;
    z-index: 10000;
}

#template2 .page_prev,
#template2 .page_prev_flip {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border: 0px;
    background-color: transparent;
    opacity: 1;
    filter: alpha(opacity=100);
    width: 40;
    height: 40;
    position: absolute;
    z-index: 10000;
    left: 10px;
}

#template2 .page_prev img,
#template2 .page_next img,
#template2 .page_prev_flip img,
#template2 .page_next_flip img {
    margin: 0;
}

#template2 .page_prev:hover,
#template2 .page_next:hover,
#template2 .page_prev_flip:hover,
#template2 .page_next_flip:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    cursor: pointer;
}

#template2 .search_txt {
    color: #666;
    background-color: #fff;
    padding-left: 5px;
    font-size: 13.3px;
    border: 1px solid #000;
    width: 80%;
    height: 28px;
    margin-right: 10px;
}

#template2 .search_bt {
    color: #7de3f4;
    background-color: transparent;
    padding: 6px;
    font-size: 13.3px;
    border: 1px solid #7de3f4;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;

    line-height: 40px;
}

#template2 .search_bt:hover {
    background-color: #000;
}

#template2 .search_txt {
    border-radius: 5px;
}

#template2 .search_bt::before {
    content: "";
    background-image: url('/assets/images/viewer2/search-selected.png');
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px;
    margin-right: 10px;
}

#template2 .search_result_total {
    padding: 15px 15px 35px 15px;
    color: #fff;
    border-bottom: 0px;
    font-size: 1.2em;
}


#template2 .search_result_title_span,
#template2 .info_title_span {
    background-image: none;
}

#template2 .search_result_title,
#template2 .info_title {
    background-image: none;
    color: #fff;
    font-weight: 600;
    border: 0;
    background-color: rgba(0, 0, 0, .1);
}

#template2 .search_result_content_span {
    padding-left: 0;
    background-image: none;
    padding-bottom: 20px;
}

#template2 .search_result_content,#template2 .search_result_content_list {
    background-image: none;
}

#template2 .search_ocr {
    padding-bottom: 20px;
}

#template2 .search_result_title_span,
#template2 .info_title_span {
    padding-left: 5px;
}

#template2 .view {
    color: #3FCDE3;
}

#html_ocr_current .view {
    display: none;
}

#template2 #share_custom {
    background-color: #212225;
    width: 200px;
    position: absolute;
    right: 0;
    top: 70px;
    padding: 20px;
}

#template2 .share_copy_link {
    color: #7de3f4;
    background-color: transparent;
    padding: 6px;
    font-size: 13.3px;
    border: 1px solid #7de3f4;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    margin-left: 10px;
    cursor: pointer;
}

#template2 .share_copy_link:hover {
    background-color: #000;
}

#template2 #modal_content div {
    padding: 20px;
    background-color: #fff;

}

#template2 #modal_content {
    border-top: 1px solid #ccc;
    width: 100%;
    float: left;
    background-color: #fff;
}

#template2 .cl_share_page_link_txt {
    border-bottom: 1px solid #ccc;
    width: 200px;
    padding: 5px 5px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    float: left;
}

#template2 .cl_share_page_link {
    color: #177C9C;
    background-color: transparent;
    padding: 6px;
    font-size: 13.3px;
    border: 1px solid #177C9C;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    margin-left: 10px;
    cursor: pointer;
}

#template2 .cl_share_page_link_copied {
    color: #375A22;
}

#template2 .cl_share_page_link_copied::before {
    content: "";
    background-image: url('/assets/images/viewer2/status-overlay.png');
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px;
    margin-right: 10px;
}


#modal {
    display: none;
    background: rgba(0, 0, 0, 0.65);
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#modal_box {
    margin: auto;
    background-color: #fff;
    width: 25%;
    max-width: 400px;
    margin-top: 50vh;
    transform: translateY(-50%);
    display: table;
}

#modal_title {
    font-size: 15px;
    font-weight: 600;
    padding: 10px;
    float: left;
    width: calc(100% - 60px);

}

#modal.continue #modal_content {
    float: none;
    border: 1px solid #ccc;
    /* border-radius: 6px; */
}

#modal_close {
    float: right;
    cursor: pointer;
    width: 20px;
    padding: 10px;
}


@media only screen and (max-width: 870px) {
    #template2 .viewer_control_action ,
    #template2 .type_control_action
    {
        display: none !important;
    }

    #template1 .type_img_modif
    {
        display: none !important;
    }

    .BtContrast,
    .BtComparator,
    .Btnavbox,
    .BtScale,
    .BtZoomOptimize,
    .BtThumbBig,
    .BtFlip,
    .BtRotate1,
    .BtRotate2,
    .BtRotate,
    .BtInvert,
    .type_share,
    /* .type_view, */
    .BtOcr{
        display: none !important;
    }
    .viewer_top_left .prev_record, .viewer_top_left .next_record{
        display: none !important;
    }
    .viewer_top_left .borderbar_title {
        display: none !important;
    }
    .viewer_top_left{        
        max-width: 60% !important;        
    }
}

@media only screen and (max-width: 700px) {
    #template2 .viewer_control {
        display: none !important;
    }
}

@media only screen and (max-width: 500px) {

    #template2 .BtComparator,
    #template2 .BtFlip,
    #template2 .BtThumbBig {
        display: none !important;
    }

    #template2 .borderbar {
        padding: 25px 5px;
    }

    #template2 h1.title {
        display: none !important;
    }

    #template2 .viewer_control_page {
        display: none !important;
    }

    #template2 .search_txt {
        width: calc(100% - 10px);
    }

    #template2 .search_bt {
        display: block;
        line-height: 20px;
        margin-top: 5px;
    }



}

.ui-resizable-n {
    cursor: n-resize;

    width: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}


.main_thumb_element {
    width: 100%;
    /* percentage fixes the X axis white space when zoom out */
    height: calc(100vh - (50px + 50px));
    /* this is still an issue where you see white space when zoom out in the Y axis */
    overflow: scroll;
    /* needed for safari to show the x axis scrollbar */
    margin-top: 50px;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
}

#template2 .main_thumb_element {
    width: 100%;
    /* percentage fixes the X axis white space when zoom out */
    height: 100vh;
    /* this is still an issue where you see white space when zoom out in the Y axis */
    overflow: scroll;
    /* needed for safari to show the x axis scrollbar */
    margin-top: 71px;
    position: absolute;
    overflow-y: auto;
}

/* .content_thumb {
    width: 100%;
    height: fit-content !important;
    transform-origin: 0 0;
    position: initial;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 4000px;
    min-width: 100%;
} */


.content_thumb::-webkit-scrollbar {
    width: 0px;
}

.content_thumb::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.content_thumb::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

#modal_content {
    background-color: rgb(51, 51, 51);
}

#modal_content .modal-continue,
#template2 #modal_content .modal-continue {
    background-color: rgb(51, 51, 51);
    /* border: 1px solid #ccc;
    border-radius: 6px; */
    padding: 0em 2em 1em 2em;
    color: #ccc;
}

.modal-continue h3 {
    padding-top: 0em;
    color: #ccc;
    margin-top: 0;
    font-size: 1em;
    text-align: center;
    margin-bottom: 1.5em;
}


#template2 #modal_content .yes-no-continue,
.yes-no-continue {
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 0 auto;
    font-size: 1.2em;
    background: none;
}

.yes-no-continue span {
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    width: 50px;
    text-align: center;
}

.yes-no-continue span:hover {
    transition: all 0.3s ease-in-out 0s;
    color: #fff;
    border-color: #fff;
}

#modal_close .close {
    position: absolute;
    right: 14px;
    top: 8px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}

#modal_close .close:hover {
    transition: all 0.3s ease-in-out 0s;
    opacity: 1;
}

#modal_close .close:before,
#modal_close .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 21px;
    width: 2px;
    background-color: #fff;
}

#template2 #modal_close .close:before,
#template2 #modal_close .close:after {
    background-color: #cc0000;
}

#modal_close .close:before {
    transform: rotate(45deg);
}

#modal_close .close:after {
    transform: rotate(-45deg);
}

.max-reached:after {
    font-family: 'Ionicons';
    content: '\f3e8';
    background-color: rgba(0, 0, 0, 0);
    /* margin: 0 10px 0 0; */
    font-size: 8em;
}

.max-reached {
    display: flex;
    width: 140;
    height: 160;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.tippy-template {
    display: none;
}

.tippy-box {
    /* background-color: #fff; */
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 10px;

}

.tippy-box .tippy-content {
    padding: 0;
}

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(238, 238, 238, 0.3);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(212, 212, 212, 0.6);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(212, 212, 212, 1);
    ;
}

#template1 .bottom_menu_content {
    display:
        flex;
    align-items:
        center;
    justify-content: left;
    height: 100%;
}


#template1 .bottom_menu_content .ico_white i {
    padding-top: 3px;
    color: #fff;
}
#template1 .bottom_menu_content .ico_black i {
    padding-top: 3px;
    color: #000;
}

#template2 .bottom_menu_content i {
    /* padding-top: 3px; */
    color: #fff;
}

#template1 .tippy-interact > span {
    display: inline-block;
    width: 37px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
}

#template2 .tippy-interact > span {
    display: inline-block;
    width: 37px;
    display: flex;
    align-items: center;
    font-size: 25px;
    justify-content: center;
}

.display_buttons_wrapper_flex, .img_modif_buttons_wrapper_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#template2 .bottom_bt_right.type_view {

    display:
        flex;
    align-items:
        center;
}
#template2 .bottom_bt_right.type_control_action {
    padding: 25px 0px 0px 0px;
    display:
        flex;
    align-items:
        center;
}

.arrow-disabled{
    display: none;
}


.mytestoverlay{
    /* background-color: rgba(0, 102, 170, 0.5); */
}

.thumb_page{
    color:#ccc !important;
    font-size: .8em;
    text-align: center;
    text-decoration: none;
    /* margin-top: 10px; */
}

#annotation_content_all{
    line-height: 1.5em;
}
#annotation_content_all .main{
    font-weight: 600;
}
#annotation_content_all .extend{
    display:none;
}
#annotation_content_all .annotation_highlight_page .extend{
    display:block;
}
#annotation_content_all .view{
margin-top: 0.5em;
font-style: italic;
font-size: 0.9em;
display: block;
}
.bt_type_annotation{
background-color: #000;
border: 1px solid #333;
color: #fff;
cursor: pointer;
padding: 10px;
text-decoration: none;
width: 100%;
text-align: center;
}
.bt_type_annotation:hover{
background-color: #c33c00;
border: 1px solid #000;
color: #fff;
cursor: pointer;
padding: 10px;
text-decoration: none;
width: 100%;
text-align: center;
}

.BtAnnotate .button{
animation: blink 1s 8, psychedelic 1s 8;

}
@keyframes blink { 
  0% { opacity:0.5; }
  50% { opacity:1; } 
  100% { opacity:0.5; }
}

@keyframes psychedelic {
  from {
    width:100%;
  }
  to {
    width:60%;
    padding-left:20%;
  }
}

#bt_refresh_annotations_list{
    float: right;
    cursor: pointer;
}
#bt_refresh_annotations_list:hover{
    float: right;
    cursor: pointer;
    color: #c33c00;
}


.viewer_top_left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 80%;
    align-content: center;
}
#template2 .top_menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#template2 .viewer_control_page{
    padding-top: 0px !important;
}

 #template2 .next_record{
    background: url("/library/books/assets/images/viewer2/viewer-next.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border:none;
 }
 #template2 .prev_record{
    background: url("/library/books/assets/images/viewer2/viewer-prev.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border:none;
 }

 #template2 .viewer_top_left .top_left_btn:hover{
    opacity: 0.5;
 }
 
 .viewer_top_left .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 515px;
}


@media only screen and (max-width: 1700px) {
    #template2 .viewer_control_page {
        /* width: 100%; */
        padding-top: 18px !important;
        padding-right: 12px !important;
        /* position: absolute; */
        /* right: 0; */
    }
  
    #template2 .top_menu {
        /* justify-content: flex-start !important; */
        height: 70px !important;
        /* flex-direction: column; */
        align-content: flex-start;
        align-items: flex-start !important;
        /* z-index: 1111; */
    }

    

    #template2 .cl_share_page_link {
        margin-left: 0px;
        margin-top: 5px;
        width: 100%;
    }

    #template2 .main_thumb_element {
        margin-top: 142px;
    }
}