/* 
    Created on : 27.08.2015, 03:15:19
    Author     : Tim Wettstein @helliwood
*/

.font-size2x {
    font-size: 18px;
}

body {
    font-family: regular;
    touch-action:none !important;
    -ms-touch-action:none !important;
}

.nano > .nano-pane { border-radius: 0px; width: 4px;}
.nano > .nano-pane > .nano-slider { background: rgba(255,255,255,1); border-radius: 0px;}

.modalFullFrame {
    border: 0px;
    margin-left: -15px;
    margin-top: -15px;
    margin-bottom: -20px;
    height: calc(100% + 30px);
    width: calc(100% + 30px);
}

.bookmark {
    width: 21px;
    height: 25px;
    background-image: url(/img/icon-bookmark.png);
    background-position: 0px -25px;
    position: absolute;
    top:0px;
    z-index: 20;
    cursor: pointer;
}

.bookmark:hover {
    opacity: 0.8;
}

.bookmark.active {
    background-position: 0px 0px;
}

#pdfContainer1 .bookmark {
    left: 15px;
}

#pdfContainer2 .bookmark {
    right: 15px;
}

.viewLeft {
    width: 240px;
    float: left;
    margin-left: 10px;
    position: relative;
    min-height: 10px;
    perspective: none;
    z-index: 150;
}

.viewRight {
    width: 190px;
    float: right;
    position: relative;
    min-height: 10px;
    margin-right: 10px;
}

.viewMiddle {
    position: relative;
    padding: 0px 10px;
    float: left;
    width: calc(100% - 450px);
}

.leftClose .viewLeft,
.leftClose .viewLeft #panel-left {
    width: 60px;
}

.leftClose .viewMiddle {
    width: calc(100% - 270px);
}


.rightClose .viewRight,
.rightClose .viewRight #panel-right {
    width: 60px;
}

.rightClose .viewMiddle {
    width: calc(100% - 320px);
}

.rightClose.leftClose .viewMiddle {
    width: calc(100% - 140px);
}


    .leftClose .viewLeft #panel-left {
        border-top: 43px solid transparent;
        background-color: transparent;
        display:none;
    }
    
    .viewLeft .opener {
        display:block;
        width: 60px;
        height: 41px;
        line-height: 43px;
        font-size: 21px;
        background-color: #30373E;
        text-align: center;
        color: #fff;
        margin:1px 0px 8px 0px;
        cursor: pointer;
    }
	.viewLeft .opener:hover {
		background-color:#FF5722;
	}
    
    .leftClose .viewLeft .opener {
        display:block;
    }

    
#panel-left .front,
#panel-left .back {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    position: absolute;
    background-color: #fff;
}
#panel-left .back {
    transform: rotateY( 180deg );
}

/* IE CSS HACK */
/***************/
@media screen\0 {
    #panel-left.flipped .back {
        backface-visibility:visible;
    }
}

_:-ms-lang(x), #panel-left.flipped .back {
    backface-visibility:visible;
}

_:-ms-fullscreen, :root #panel-left.flipped .back {
    backface-visibility:visible;
}
/*********************/
/* END - IE CSS HACK */

#panel-left.flipped {
  transform: translateX( -100% ) rotateY( -180deg );
}

#panel-left.flipped .front { display: none; }

#panel-left .back .switch { display: none; }
#panel-left.flipped .back .switch { display: block; }

#panel-left .planview {   
    border-right: 1px solid #e6e6e6;
}

#panel-left, #panel-right {
    background: #fff;
    width: 200px;
    box-sizing: border-box;
    border-bottom: 10px solid #ccc;
    z-index: 20;
    position: relative;
}

#panel-left {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 500ms;
}

#panel-left {
    width: 240px;
    transform-origin: right center;
}

#panel-left {
    float: left;
}

#panel-right {
    float: right;
    background-color: transparent;
    width: 190px;
    transition: width 200ms;
}

#panel-left ul, #panel-left li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    
}

#panel-right .switch,
#panel-left .switch {
    position: absolute;
    top:0px;
    right:0px;
    width: 20px;
    height: 20px;
    background-image: url(/img/icon-menu.png);
    background-size: contain;
    cursor: pointer;
	border: 1px solid  #fff;
	border-top:0px;
	border-right: 0px;
}

#panel-left .flipAction {
    padding: 8px;
    color:#fff;
    background-color: #7C7C7C;
    line-height: 25px;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display:none;
}
#panel-left .flipAction:hover {
    background-color: #4b4b4b;
}

#panel-left .bookTitle {
    padding: 8px;
    color:#fff;
    background-color: #30373E;  
}

#panel-left .reihe {
    padding: 8px;
    color: #fff;
    background-color: #47515C;
}

#panel-left .register {
    overflow: hidden;
}

#panel-left .pageLink {
    padding: 8px;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
}

#panel-left .register  ul > li > ul > li .pageLink {
    padding: 2px 8px;
}

#panel-left .pageLink.current:before {
    content: " ";
    position: absolute;
    top:0px;
    left: 0px;
    height: 100%;
    width: 2px;
    border-left: 2px solid #FF5722;
}

#panel-left .pageLink.current:after {
    content: " ";
    position: absolute;
    left: 1px;
    top: 11px;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-left-color: #FF5722;
}

#panel-left .register  ul > li > ul > li .pageLink.current:after {
    top: 7px;
}

#panel-left .pageLink:hover {
    background-color: #efefef;
	color: #FF5722;
}

#panel-left .dir {
    position: relative;
}

#panel-left .dir:after {
    content: " ";
    border: 5px solid transparent;
    border-left-color: #30373E;
    position: absolute;
    right: 0px;
    top:6px;
}

#panel-left .dir.active:after {
    border: 5px solid transparent;
    border-top-color: #30373E;
    right: 5px;
    top:10px;
}

#panel-left .p1.dir:after {
    top:14px;
}

#panel-left .p1.dir.active:after {
    top:18px;
}

#panel-left .register  ul > li {
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
}

#panel-left .register  ul > li.active {
    background-color: #becdd6;
}

#panel-left .register  ul > li > ul > li {
    background-color: #e2e8eb;
    display: none;
}

#panel-left .register ul li.active > ul > li {
    display: block;
    border:0px;
}

#panel-left .register  ul > li .number {
    width: 24px;
    display:block;
    float: left;
}

#panel-left .register ul li .title {
    line-height: 17px;
    float: left;
    width: 100%;
    padding-left: 5px;
    box-sizing: border-box;
}

#panel-left .register ul li .number {
    width: 38px;
    display:block;
    float: left;
    line-height: 17px;
    height: 17px;
    text-align: right;
    color: #FF5722;
    white-space: nowrap;
}
#panel-left .planview .pageLink {
    background-color: #e2e8eb;
    cursor: default;
}

#panel-left .planview .pageLink.planItem:hover {
    background-color: #efefef;
}

#panel-left .planview .pageLink.planItem {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    cursor: pointer;
}

#panel-left .planview .pageLink span {
    font-size: 10px;
    line-height: 10px;
}



#panel-left .planview .pageLink .title {
    padding-left: 0px;
}

#panel-left .planview .pageLink img {
    border: 1px solid #ccc;
}
#panel-left .planview .pageLink .img {
    border: 1px solid #ccc;
    background-color: #00b5ec;
    height: 34px;
    width: 34px;
    color: #fff;
    text-align: center;
    line-height: 34px;
}

#panel-left .planview  .planTitle {
    background-color: #47515C;
    color: #fff;
}


/*
#panel-left .register  ul > li > ul > li .title {
    width: 161px;
    display:inline-block;
}*/


#panel-right > .head {
    height: 42px;
    line-height: 42px;
    background-color: #47515C;
    color: #FFF;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px;
    overflow: hidden;
    width: 190px;
    float: right;
}

#panel-right .mediaView {
    background-color: #FFF;
    box-sizing: border-box;
    height: calc(100% - 42px);
    border-top: 8px solid #ccc;
    overflow: hidden;
    position: relative;
}

.rightClose .viewRight .opener {
    margin-bottom: 0px;
}

.rightClose .viewRight #panel-right {
    border-top: 0px;
    background-color: transparent;
    border-top: 8px solid transparent;
    /*display:none;*/
}

.rightClose .viewRight #panel-right .mediaView .box {
    background-color: transparent;
}
.rightClose .viewRight #panel-right .box .icon {
    display: block;
}

.rightClose .viewRight #panel-right .mediaView .box > .cont,
.rightClose .viewRight #panel-right .mediaView .box > .head,
.rightClose .viewRight #panel-right .mediaView .icon .ilabel,
.rightClose .viewRight #panel-right > .head,
.rightClose .viewRight #panel-right .switch {
    display:none;
}
.rightClose .viewRight #panel-right .mediaView {
    border-top: 0px;
}

.rightClose .viewRight #panel-right .mediaView .icon .i .badge {
    right: -7px;
}


    
    .viewRight .opener {
        display:block;
        width: 60px;
        height: 41px;
        line-height: 43px;
        font-size: 21px;
        background-color: #30373E;
        text-align: center;
        color: #fff;
        margin:1px 0px 8px 0px;
        cursor: pointer;
    }
	.viewRight .opener:hover {
		background-color: #FF5722;
	}
    
    .rightClose .viewRight .opener {
        display:block;
    }

    .mediaView {
        padding:10px;
        overflow: hidden;
    }
    
    .mediaView .icon .i {
        height: 40px;
        width: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        font-size: 25px;
        float:left;
        position: relative;
    }
    
    .mediaView .icon.active .i {
        background-color: #FF5722 !important;
    }
    
    .mediaView .icon .i .badge {
        position: absolute;
        top: -7px;
        background-color: #47515C;
        color: #fff;
        font-family: regular;
    }
    
    .mediaView .icon {
        margin: 0px 0px 10px 0px;
        cursor: pointer;
        transition: all 200ms;
    }
    
    .mediaView .icon .ilabel {
        color: #4B4B4B;
        line-height: 40px;
        padding-left: 10px;
        float:left;
    }
    
    .mediaView .icon .clear {
        clear: left;
    }
    
    .mediaView .icon:hover {
        background-color: #e2e8eb;
    }
    
    .rightLargeOpen.searchresult .viewRight #panel-right .mediaView {
        background-image: url(/img/right_search_backg.gif);
    }
    
    .rightLargeOpen.searchresult .viewRight #panel-right .mediaView .preload {
        position: relative;
    }
    
    .rightLargeOpen .viewRight #panel-right {
        position: relative;        
        width: 600px;
        transition: width 200ms;
        box-shadow: 0px 2px 2px 2px #ccc;
    }
    
    .rightLargeOpen .viewRight #panel-right .mediaView {
        background-image: url(/img/right_media_backg.gif);
        background-position: left top;
        background-repeat: repeat-y;
    }
    
    .rightLargeOpen .viewRight #panel-right .icons {
        float: left;
        width: 50px;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .icons {
        display:none;
    }
    
    .viewRight #panel-right .details  {
        display:none;
    }
    .rightLargeOpen .viewRight #panel-right .details {
        float: right;
        width: 515px;
        overflow: hidden;
        display: block;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details {
        width: 580px;
    }
    
    .viewRight #panel-right .details h1 {
        margin-left: 173px;
        margin-bottom: 0px;
        font-size: 20px;
    }
    .viewRight #panel-right .details h2 {
        margin-left: 173px;
        margin-top: 0px;
        font-size: 12px;
    }
    
    .rightLargeOpen .viewRight #panel-right .icon {
        width: 40px;
    }
    
    .rightLargeOpen .viewRight #panel-right .icon .ilabel {
        display:none;
    }

    .viewRight #panel-right .details {
        /*height: calc(100% - 155px);*/
        height: 100%;
    }
    
    .viewRight #panel-right .details #loader {
        top: 80px;
        left: 80px;
    }
    
    .viewRight #panel-right .details .item  {
        width: 247px;
        max-height: 300px;
        overflow: hidden;
        margin: 0px 10px 20px 0px;
        float:left;
        cursor: pointer;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item  {
        width: 100%;
        padding-left: 10px;
    }
    
    
    .viewRight #panel-right .details .item:hover {
        background-color: #becdd6;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item:hover .img:after {
        display:none;
    }
    
    .viewRight #panel-right .details .item .img {
        width: 105px;
        height: 75px;
        float: left;
    	background-position: center center;
        background-size: cover;
        background-color: #00b5ec;
    	border: 1px solid #CCC;
        text-align: center;
        line-height: 75px;
        font-size: 50px;
        color: #fff;
        position: relative;
    }
    
    .viewRight #panel-right .details .item .img .lb {
        position: absolute;
        top:10px;
        left: -8px;
        height: 18px;
        line-height: 18px;
        font-size: 10px;
        color: #fff;
        padding: 0px 5px;
        background-color: #30373E;
    }
    
    
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item .img {
        width: 130px;
        height: 88px;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item .img:after {
        content: " ";
        width: 0px;
        height: 0px;
        border: 9px solid transparent;
        border-left-color: #e2e8eb;
        position: absolute;
        top:10px;
        right: -38px;
    }
    
    .viewRight #panel-right .details .item .title {
        float: right;
        width: 132px;
        height: 20px;
        font-size: 13px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item .title {
        width: calc(100% - 165px);
        font-weight: normal;
        margin-top: 10px;
    }
    
    .viewRight #panel-right .details .item .desc {
        float: right;
        width: 132px;
        height: 42px;
        font-size: 12px;
        line-height: 14px;
        overflow: hidden;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item .desc {
        width: calc(100% - 165px);
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item .desc span {
        font-weight: bold;
    }
    .rightLargeOpen.searchresult .viewRight #panel-right .details .item .desc b {
        font-weight: normal;
        text-decoration: underline;
        color: #00B5EC;
    }

    .viewRight #panel-right .details .item .action {
        font-size: 12px;
        line-height: 13px;
        float: right;
        width: 132px;
        height: 13px;
    }
    
    .viewRight #panel-right .box {
        position: absolute;
        bottom: 10px;
        right:10px;
        background-color: #eeeeee;
        width: calc(100% - 20px);
        max-width: 250px;
    }
    .rightLargeOpen .viewRight #panel-right .box {
        display:none;
    }
        
    .viewRight #panel-right .box .head {
        background-color: #47515C;
        color: #fff;
        padding: 0px 10px;
        line-height: 25px;
    }
    
    .viewRight #panel-right .box .cont {
        padding: 10px;
    }
    
    .viewRight #panel-right .box .cont .btn {
        width: 100%;
        margin-top: 8px;
    }
    
    .viewRight #panel-right .box .icon {
        width: 40px;
        height: 40px;
        line-height: 37px;
        font-size: 22px;
        margin: 10px 0px 0px 0px;
        display:none;
    }






.bookSytle {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-overflow-scrolling: touch; /* Safari */
    text-align: center;
    margin: 50px 0px 10px 0px;
    background-color: #fbfbfb;
}

.bookSytle.drag .dragContainer{
    /*-webkit-transition: all 0s; /* Safari */
    /*transition: all 0s;*/
    cursor: move;
}

.bookSytle .dragContainer {
    position: relative;    
    /*-webkit-transition: all 0.5s; /* Safari */
    /*transition: all 0.5s;*/
}

.bookSytle.drag .dragContainer .textLayer {
    display:none;
}



.bookControls .btn-primary:focus,
.bookControls .btn-primary:hover {
    background-color: #FF5722;
    border-color: #FF5722;
}
.bookControls .btn-primary:active {
	background-color: #B03C17 !important;
    border-color: #fff !important;
}

.bookControls.left {
    position: absolute; 
    z-index: 100; 
    left: 9px; 
    top:0px; 
    width: 80%;
}

.bookControls.left .bookNav {

}

.bookControls.left .btn{
    width: 50px; 
    height: 42px;
    border-color: #EEEEEE;
    line-height: 23px;
}

.bookControls.left .bookNav .btn {
    float: left;
}

.bookControls.left .bookNav #selectPage {
    height: 42px;
    text-align: center;
    border-color: #EEEEEE;
    box-shadow: none;
    line-height: 23px;
    width: 77px;
    float:left;
    border-radius: 0px;
}

.bookControls.right .btn,
.bookControls.right input {
    height: 42px;
    border-color: #EEEEEE;
    box-shadow: none;
}

.bookControls.right {
    position: absolute; 
    z-index: 100; 
    right: 9px; 
    top:0px; 
    width: 20%;
    min-width: 163px;
}

.pdf-content.phidden {
    display: none !important;
}

.pdf-content {
    display:inline-block;
    vertical-align: top;
    white-space: normal;
    position: relative;
    /*min-height: 737px;
    min-width: 552px;*/
    background-color: #ffffff;
    //-webkit-transition: all 0.s; /* Safari */
    //transition: all 0.5s;
}

.pdf-content.right-paper {
    border-left: 1px solid #cccccc;
}

.pdf-content .loaderContainer {
    position: absolute;
    top: calc(50% + 35px);
    left: calc(50% + 35px);
}


.pdf-content .spot {
    position: absolute !important;
    z-index: 10;
    cursor: pointer;
    background-size: cover;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
.pdf-content .spot .icon {
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    background-color: #00b5ec;
    color: #fff;
}
.pdf-content .spot .icon.closed {
    background-color: #4b4b4b !important;
    color: #ffffff !important;
}


.pdf-content .spot.edit {
    cursor: move !important;
}

.pdf-content .spot.edit.current,
.pdf-content .spot.edit.ui-draggable-dragging {
    z-index: 11;
}

.pdf-content .spot .input-group input {
    width: 30px;
    font-size: 9px;
    float: right;
}

.pdf-content .spot .input-group {
    top:2px;
    left:-45px;
    width: 63px;
}

.pdf-content .spot .input-group label {
    background-color: #fff;
    border-radius: 2px;
    padding: 2px;
    margin: 0px 0px 0px 0px;
    font-size: 9px;
    width: 44px;
}

/*
.pdf-content .spot.edit button {
    border: 1px solid #000000;
    margin: 0px 0px 2px 0px;
    position: absolute;
    font-size: 10px;
}

.pdf-content .spot.edit button.save {
    bottom: -20px;
    left: 70px;
}

.pdf-content .spot.edit button.cancel {
    bottom: -20px;
    left: 187px;
    
}

.pdf-content .spot.edit button.remove {
    bottom: -20px;
    left: 132px;
    
}

.pdf-content .spot.edit button.modify {
    bottom: -20px;
}
*/

.pdf-content .spot .spotLabel {
    position: absolute;
    top: 7px;
    left: 53px;
    margin: 0 0 15% 0;
    height: 70%;
    box-sizing: border-box;
    line-height: 15px;
    padding: 10px;
    background-color: rgba(255,255,255,0.8);
    font-family: arial;
    white-space: NOWRAP;
    border: 1px solid #cccccc;
}

.pdf-content .spot .spotLabel.left {
    left: auto;
    right: 53px;
}


#exportInfo {
    position: relative;
    float: right;
    /*top:10px;*/
    /*left: 10px;*/
    width: 250px;
    min-height: 400px;
    background-color: rgba(55,55,55,0.8);
    color: #ffffff;
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;
    font-family: arial;
}

#exportInfo  .number {
    font-size: 30px;
}

#exportInfo .process {
    height: 347px;
    overflow-y: scroll;
    font-size: 10px;
}

.textLayer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.textLayer ::selection {
    background: rgba(82, 234, 253, 0.5);
}

.textLayer > div {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;

  background-color: rgb(180, 0, 170);
  border-radius: 4px;
}

.textLayer .highlight.begin {
  border-radius: 4px 0px 0px 4px;
}

.textLayer .highlight.end {
  border-radius: 0px 4px 4px 0px;
}

.textLayer .highlight.middle {
  border-radius: 0px;
}

.textLayer .highlight.selected {
  background-color: rgb(0, 100, 0);
}


#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #999;
    border-right-color: #999;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader.small {
    width: 40px;
    height: 40px;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #cd3c58;
        border-right-color: #cd3c58;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #f9c922;
        border-right-color: #f9c922;
        border-bottom-color: #f9c922;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    
    #selectPage {
        width: 80px;
        padding-left: 0;
        padding-right: 0;
    }

    
    
.spotContent .details {
    padding: 10px 0px;
}

.spotContent .details .panel {
    margin-bottom: 0px;
}

.hover:hover {
    transform: scale(1.01);
    opacity: 0.8;
    transition: all 300ms linear;
    cursor: pointer;
}

.modal .ui360.ui360-vis {
    display: inline-block;
}

.sm2-bar-ui {
    font-size: 16px;
}
.sm2-bar-ui .sm2-main-controls,
.sm2-bar-ui .sm2-playlist-drawer {
    background-color: #337ab7;
}
.sm2-bar-ui .sm2-inline-texture {
    background: transparent;
}

/* fuse.js suggestion list styles */
ul.autoCompleteList {
	background-color: #FFF;
	max-width: 292px;
	position: absolute;
	top: 42px;
	left: 1px;
	padding: 0;
	overflow: hidden;
}

ul.autoCompleteList li {
	padding: 10px 15px;
	list-style-type: none;
}

ul.autoCompleteList li.selected {
	background-color: #00b5ec;
	cursor: pointer;
	color: #FFF;
}

.buttonsHolder .btn-success {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.printModal .selectPage {
    border: 1px solid #ccc;
    cursor: pointer;
}
.printModal .selectPage:hover {
    opacity: 0.8;
    border-color: #528e1f;
}

#textmarkerLeft, #textmarkerRight {
    position: absolute;
    left: 0px;
    top: 0px;
}

#textmarkerLeftEvents, #textmarkerRightEvents {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 20;
    display: none;
    cursor: url('../img/pen.png') 0 19, default;
}

#textmarkerLeftEvents.eraser, #textmarkerRightEvents.eraser {
    cursor: url('../img/eraser.png') 0 19, default;
}

.pdf-content > img {
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ctr-marker {
    position: relative;
}

.ctr-marker-color {
    position: absolute;
    width: 25px;
    bottom: 0px;
    display: block;
    background-color: #fff;
    border: 1px solid #999;
    right: 10px;
    top: 0px;
}
.ctr-marker-color.active {
    border-color: #333;
}

.ctr-marker-color:hover,
.ctr-marker-color:active {
    background-color: #fff;
    border: 1px solid #666;
}

.ctr-marker-color:before {
    position: absolute;
    content: " ";
    display: block;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.3;
}

.ctr-marker-color.blue {
    right: 115px
}

.ctr-marker-color.blue:before {
    background-color: #1FCBFF;
}

.ctr-marker-color.yellow {
    right: 80px
}

.ctr-marker-color.yellow:before {
    background-color: #ffff00;
}

.ctr-marker-color.green {
    right: 45px;
}

.ctr-marker-color.green:before {
    background-color: #36d100;
}

.ctr-marker-color.rose {
    right: 10px
}

.ctr-marker-color.rose:before {
    background-color: #ff00a8;
}

.ctr-marker-color.black {
    right: 10px
}

.ctr-marker-color.black:before {
    background-color: #e6e4e1;
}
.ctr-marker-color.black:after {
    content:" ";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    border-bottom:2px solid #000000;
    border-radius: 100% 50%;
}

.spotContent .media-preview {
    border: 1px solid #CCC;
    padding: 10px;
}