/* http://stackoverflow.com/questions/12082948/resize-the-content-propertys-image */
/*.secondaryToolbarButton.rotateCcw::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: '';
    background: url('images/rotateccw.svg') no-repeat 0 0;
    background-size: 100%;
}

.secondaryToolbarButton.rotateCw::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: '';
    background: url('images/rotatecw.svg') no-repeat 0 0;
    background-size: 100%;
}

@media screen and (min-resolution: 2dppx) {
    .secondaryToolbarButton.rotateCcw::before {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 5px;
        content: '';
        background: url('images/rotateccw.svg') no-repeat 0 0;
        background-size: 100%;
    }

    .secondaryToolbarButton.rotateCw::before {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 5px;
        content: '';
        background: url('images/rotatecw.svg') no-repeat 0 0;
        background-size: 100%;
    }
}
*/
/*noinspection CssUnknownProperty*/
.selectTextDisabled, .canvasWrapper > canvas {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*
.separator {
    padding: 8px 0;
    width: 1px;
    background-color: hsla(0,0%,0%,.5);
    z-index: 99;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
    display: inline-block;
    margin: 8px 2px;
}

.colorPicker {

}

.colorPicker img {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 3px;
    left: 7px;
}

.colorPicker div {
    position: absolute;
    width: 16px;
    height: 2px;
    bottom: 2px;
}

.colorPicker input {
    display: none;
}

.minicolors-swatch {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

.colorPickerHidden {
    position: absolute;
    top: auto;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

html[dir='ltr'] .colorPickerHidden {
    !* Use margin-elft instead of left since it does not work in IE *!
    margin-left: -10000px;
}

html[dir='rtl'] .colorPickerHidden {
    margin-right: 500px;
}

html[dir='rtl'] .minicolors {
    right: 173px !important;
}

.strikeThrough {
    position: relative;
    width: 100%;
    height: 100%;
}

.strikeThroughVertical {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px solid;
}

.strikeThroughHorizontal {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid;
}

#stampList {
    height: 200px;
    max-height: 200px;
    overflow-x: hidden;
}

#digitalSignatureList {
    max-height: 200px;
    overflow-x: hidden;
}*/
/*
!* http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropDown *!
.dropDownButton {
    position: relative;
    display: inline-block;
}

.dropDownButton ul * {
    color: #cccccc !important;
    font-size: 12px;
    vertical-align: middle;
}

.dropDownButton-content {
    display: none;
    position: absolute;
    background-color: #404040;
    min-width: 140px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    text-align: left;
}

.dropDownButton-content li {
    width: 100%;
}

!* For stamp/images that do not have a delete button beside it. *!
.dropDownButton-content li > a:first-child:nth-last-child(1) {
    display: inline-block;
    padding: 15px;
}

.dropDownButton-content li > a:first-child:nth-last-child(2) {
    display: inline-block;
    padding: 15px;
}

.dropDownButton a {
    color: black;
    text-decoration: none;
}

.dropDownButton li:hover {
    background-color: hsla(0, 0%, 0%, .7);
}

.show {
    display: block;
}

@media all and (max-width: 320px) {
    html[dir='ltr'] .innerCenter {
        right: -20% !important;
    }

    #stampList {
        right: 0;
    }
}

@media all and (min-width: 686px) and (max-width: 770px) {
    #sidebarContainer {
        top: 64px !important;
        z-index: 9999 !important;
    }
}

@media all and (max-width: 685px) {
    #sidebarContainer {
        top: 96px !important;
        z-index: 9999 !important;
    }
}*/

/*
#toolbarAnnotations {
    width: 100%;
    float: left;
}

html[dir='ltr'] #toolbarAnnotationsLeft {
    margin-left: -1px;
}
html[dir='rtl'] #toolbarAnnotationsRight {
    margin-right: -1px;
}

html[dir='ltr'] #toolbarAnnotationsLeft,
html[dir='rtl'] #toolbarAnnotationsRight {
    position: absolute;
    top: 0;
    left: 0;
}
html[dir='ltr'] #toolbarAnnotationsRight,
html[dir='rtl'] #toolbarAnnotationsLeft {
    position: absolute;
    top: 0;
    right: 0;
}
html[dir='ltr'] #toolbarAnnotationsLeft > *,
html[dir='ltr'] #toolbarAnnotationsMiddle > *,
html[dir='ltr'] #toolbarAnnotationsRight > * {
    position: relative;
    float: left;
}

html[dir='rtl'] #toolbarAnnotationsLeft > *,
html[dir='rtl'] #toolbarAnnotationsMiddle > *,
html[dir='rtl'] #toolbarAnnotationsRight > * {
    position: relative;
    float: right;
}
*/

/* Override sidebar icon */
#sidebarToggle::before {
    content: '' !important;
}

/* Override these viewer.css styles */

/*
Override some properties in the text layer positioning of Div layers so that in IE, range.getClientRects()
will work correctly.
- https://github.com/mozilla/pdf.js/issues/5513
*/
.textLayer > div {
    /* Removed !important in position attribute because text selection direction behavior is opposite. */
    position: relative;
    float: left !important;
    margin-bottom: -100%;
    margin-right: -100%;
}

.grab-to-pan-grab,
.grab-to-pan-grab canvas[id^='pageAnnotation'] {

    cursor: url('../images/grab.cur'), move !important;
}

.grab-to-pan-grabbing,
.grab-to-pan-grabbing canvas[id^='pageAnnotation'] {
    cursor: url("../images/grabbing.cur"), move !important;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .grab-to-pan-grab,
    .grab-to-pan-grab canvas[id^='pageAnnotation'] {
        cursor: url('lib/annotationeer/images/grab.cur'), move !important;
    }

    .grab-to-pan-grabbing,
    .grab-to-pan-grabbing canvas[id^='pageAnnotation'] {
        cursor: url('lib/annotationeer/images/grabbing.cur'), move !important;
    }
}

#viewerContainer {
    top: 64px !important;
}

/* We now have 2 rows of toolbar, so we increase the height */
#toolbarContainer {
    height: 64px !important;
}

/* modified so multi-layered canvas will overlap */
.pdfViewer .page canvas {
    margin: 0;
    position: absolute;
}

/* Settings for annotation list */
#annotationList {
    border-collapse: collapse;
    color: white;
}

#annotationList tr {
    border-bottom: solid grey 1px;
}

#annotationList tr:hover {
    background-color: hsla(0, 0%, 0%, 0.7);
}

#annotationList tr.selected {
    background-color: grey;
}

#annotationList td {
    padding: 5px;
    vertical-align: middle;
}

#annotationList .username {
    font-size: 13px;
    font-weight: bold;
}

#annotationList .page {
    font-size: 11px;
}

#annotationList .review-status-icon {
    margin-left: 5px;
    float: right;
    width: 13px;
}

#comment-list .username {
    font-size: 12px;
    margin-top: 10px;
}

#comment-list .comment {
    font-size: 12px;
    word-wrap: break-word;
    word-break: break-all;
}

#comment-list .date  {
    font-size: 9px;
    font-style: italic;
    margin-bottom: 10px;
}

#comment-list.top-border {
    border-top: 1px solid #cccccc;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* https://two-wrongs.com/draw-a-tree-structure-with-only-css */

#comment-list, #comment-list ul, #comment-list li {
    position: relative;
}

#comment-list ul {
    list-style: none;
    padding-left: 0;
    padding-top: 5px;
}

#comment-list ul ul {
    padding-left: 10px;
    padding-top: 0;
}

#comment-list ul ul li::before, #comment-list ul ul li::after {
    content: '';
    position: absolute;
    left: -9px;
}

/* Horizontal line */
#comment-list ul ul li::before {
    border-top: 1px solid #cccccc;
    top: 13px;
    width: 8px;
    height: 0;
}

/* Vertical line for list item except last child. */
#comment-list ul ul > li.normal-child::after {
    border-left: 1px solid #cccccc;
    height: 100% !important;
    width: 0;
    top: 5px;
}

/* Vertical line for list item last child. */
#comment-list ul ul > li.last-child::after {
    border-left: 1px solid #cccccc;
    height: 8px;
    width: 0;
    top: 5px;
}

#comment-list .comment-container {
    padding-top: 8px;
}

#comment-list li {
    border-top: none !important;
    border-bottom: none !important;
    line-height: normal !important;
}

#comment-list .comment-container span {
    padding: 0 !important;
    display: inline !important;
}

.expand-collapse {
    float: left;
    padding-left: 2px
}

img.button:hover {
    opacity: 0.8;
}

/* Annotation form */
/*textarea {
    resize: none;
}

.annotation-form-header-username {
    font-size: 14px;
    font-weight: bold;
}

.annotation-form-header-date-created {
    font-size: 10px;
}

.annotation-form-header-review-status {
    font-size: 10px;
    align-items: center;
    margin-bottom: 5px;
}
.annotation-form-header-comment {
    font-size: 12px;
    word-wrap: break-word;
    word-break: break-all;
}

.annotation-form-username {
    font-size: 12px;
    font-weight: bold;
}

.annotation-form-date-created {
    font-size: 12px;
}

.annotation-form-save {
    width: 50px !important;
    color: black;
    border: solid darkslategrey 1px;
}
*/
#form-modal_popup_annotationeer hr {
    min-height: 1px;
    max-height: 1px;
    clear: both;
    width: 100%;
    /*border-bottom: 1px solid darkslategrey;*/
    /*height: 1px; */
    padding-top:0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
/*
#popupContainer {
    max-width: 480px;
}

#popupContainer #comment {
    width: 100%;
}

#popupContainer div div {
    text-align: left;
}

.annotation-row {
    display: table;
}

.annotation-icon {
    margin: 0 auto;
    width: 20px;
    transform : translateY(5px);
    vertical-align: middle;
}

.annotation-detail {
    display: table-cell;
    padding-left: 7px;
    width: 100%;
}

.annotation-action {
    width: 100%;
    text-align: right;
    margin-top: 5px;
}

.annotation-action-icon {
    margin-left: 10px;
}
*/
.user-reply-icon {
    transform : translateY(2px);
}
/*
#playerContainer {
    width: 450px !important;
}*/

/* This hides the swatch preview when a color is chosen in the custom color picker */
.minicolors-theme-default .minicolors-swatch {
    margin-left: -10000px;
}

#propertiesContainer {
    max-width: 280px;
}

.propertyRow {
    color: white;
    font-size: 15px !important;
    text-align: left;
    vertical-align:middle;
}

.propertyRow select {
    text-align: center !important;
    margin-top: 5px;
    font-size: 15px;
}

.properties-background {
    background: #333333 !important;
}

.propertyColor {
    width: 16px;
    height: 2px;
}

.propertyDivider {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid gray;
}

.propertyRow select {
    border: solid 1px #cccccc;
    width: 100%;
}

.propertyRow input[type="text"] {
    margin-top: 5px;
    margin-bottom: 5px;
    border: solid 1px #cccccc;
    transition: border 0.3s;
    height: 20px;
    width: 100%;
}

.propertyRow input[type="text"]:focus,
.propertyRow input[type="text"].focus {
    border: solid 1px #cccccc;
}

.propertyRow input[type="range"] {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 20px;
    width: 100%;
    background: none;
}

/* For Firefox only. */
.propertyRow input[type="range"]::-moz-range-track {
    width: 100%;
}

/* Disable tooltip in IE because input range will display incorrectly if step is decimal. */
::-ms-tooltip { display: none; }

.propertyRow span.subLabel {
    font-size: 10px;
}

#filterButton {
    display: table-cell;
}

#filterSpan {
    display: table-cell;
    width: 100% !important;
}

#filter {
    width: calc(100% - 16px) !important;
    clear: none !important;
    float: left !important;
    margin: 4px 0 4px 0 !important;
}

/*
Hide IE's clear button in the input field as this prevents ng-change from getting
triggered in Angular JS.
*/
/*noinspection CssInvalidPseudoSelector*/
#filter::-ms-clear {
    display: none;
}

/* Copied from viewer.css .textLayer with some attributes removed. */
.freeTextLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.freeTextLayer > div {
    position: absolute;
    white-space: pre-wrap;
    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%;
}

/* Set minimum width so that area border is visible as guide. */
/*noinspection CssUnknownProperty*/
.freeTextLayer div[contenteditable] {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
    min-width: 5px;
}

.freeText_button {
    position: absolute;
    bottom: 0;
    text-align: right;
}

span#form_field_group .separator {
    margin: 0 !important;
}

#digitalSignatureContainer {
    max-width: 500px;
    max-height: 400px;
}

#digitalSignatureContainer canvas {
    border: 1px solid black;
    width: 100% !important;
}

#signature-pad div.footer {
    margin-top: 10px !important;
}

#signature-pad div.footer .description {
    color: #c3c3c3;
    text-align: center;
    font-size: 1em;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
    vertical-align: middle;
}

#signature-pad .save-use, #signature-pad .just-use {
    width: 80px !important;
    color: black;
    border: solid darkslategrey 1px;
}

/* Removes remodal's blurry text effect. */
.remodal-is-opening, .remodal-is-opened {
    transform: none !important;
}

/* This block of code re-adjusts the rotate buttons in the innerCenter div layer and secondary toolbar menu. */
@media all and (max-width: 830px) {
    #aPageRotateCw, #aPageRotateCcw {
        display: none !important;
    }

    #secondaryPageRotateCw, #secondaryPageRotateCcw {
        display: block !important;
    }
}

@media all and (max-width: 1030px) {
    .sidebarOpen #aPageRotateCw, .sidebarOpen #aPageRotateCcw {
        display: none !important;
    }

    #secondaryPageRotateCw, #secondaryPageRotateCcw {
        display: block !important;
    }
}

/* Override opentip max width so that long text will not go beyond its tool tip area. */
.opentip-container {
    max-width: none !important;
}

/* For review status indicator in menu item. */
.review-status-chosen:before {
    position: absolute;
    top: 1%;
    left: .5em;
    z-index: 1;
    width: 0;
    height: 0;
    content:'\2713';
    color: black;
}

/* For stamp uploader dialog. */
div#uploadStampContainer {
    max-width: 400px;
}

form#stamp-dropzone {
    min-height: 125px;
}

button#bookmark_add {
    display: inline-block;
    background: url('images/add.svg') no-repeat 0 0;
    background-size: 16px 16px;
    background-position: center left 20px;
    height: 30px;
    width: 95%;
    font-size: 12px;
    padding: 0.5em 1em
}