/* Copyright (C) 2014 University of Dundee & Open Microscopy Environment.
 All rights reserved.

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http:www.gnu.org/licenses/>.
*/

    body {
        padding: 0;
    }
    header {
        background: gray;
        height: 30px;
        width: 100%;
        position: fixed;
        top: 0;
    }

    main {
        position: fixed;
        top: 47px;
        bottom: 36px;
        width: 100%;
        overflow: auto;
        background-color: #bbb;
    }

    #canvas_wrapper {
        overflow: hidden;
        position: relative;
        margin: auto;
    }

    #canvas_wrapper svg {
        z-index: 10;
    }

    #canvas {
        z-index: 1;
        background-color: #EFF1F4;
        position: absolute;
    }

    .pixelated {
        /* Try to show images in their original pixelated form Although 'pixelated' isn't 
        supported yet: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
        Code from http://phrogz.net/tmp/canvas_image_zoom.html */
        image-rendering:optimizeSpeed;             /* Legal fallback */
        image-rendering:-moz-crisp-edges;          /* Firefox        */
        image-rendering:-o-crisp-edges;            /* Opera          */
        image-rendering:-webkit-optimize-contrast; /* Safari         */
        image-rendering:optimize-contrast;         /* CSS3 Proposed  */
        image-rendering:crisp-edges;               /* CSS4 Proposed  */
        image-rendering:pixelated;                 /* CSS4 Proposed  */
        -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
    }

    /* #figure is a container of .paper */
    #figure {
        position: absolute;
    }

    .paper {
        position: absolute;
        border: solid gray 2px;
        background: white;
    }

    .imagePanel {
        position: absolute;
        background: #fff;
    }

    .dragging{
        background: none;
    }

    .imgContainer {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .imgContainer img, .imgContainer div {
        position: absolute;
        top: 0;
        left: 0;
    }

    .dragging .imgContainer {
        opacity: 0.7;
    }

    .img_panel{
        position: absolute;
    }

    .export_pdf>span {
        margin-left: 6px;
    }

    .wh_disabled {
        /*opacity: 0.5;*/
        display: none;
    }

    .figure-title {
        color: #FFFFFF;
        font-size: 18px;
        left: 365px;
        line-height: 20px;
        padding: 12px;
        position: absolute;
        right: 450px;
        text-align: center;
        height: 100%;
    }
    .figure-title:hover {
        color: #eee;
        text-decoration: underline;
    }
    /* when editing name */
    .figure-title input {
        width: 75%;
        text-align: center;
    }

    /* -- Legend -- */
    .legend-container {
        z-index: 1;
        position:fixed;
        bottom: 54px;
        width: 60%;
        min-width:400px;
        left:20%;
        right:20%;
    }

    .legend-container .panel {
        background-color:white;
        margin-bottom: 0;
        padding-bottom: 0;
        overflow-y: auto;
    }

    .legend-expanded {
        max-height: 250px;
    }

    .legend-collapsed {
        max-height: 25px;
    }

    .legend-collapsed .panel-body{
        padding: 3px 15px;
    }

    .legend-container .markdown-info {
        display: none;
    }
    .legend-container .editing .markdown-info {
        display: block;
    }

    /* hide appropriate collapse/hide button */
    .legend-collapsed .collapse-legend{
        display: none;
    }
    .legend-expanded .expand-legend{
        display: none;
    }

    .legend-collapsed textarea {
        position: relative;
        top: -12px;
        width: 95%;
    }

    .legend-footer {
        position: absolute;
        right: 0;
        bottom: -54px;
    }

    footer {
        background: rgb(97, 97, 97);
        height: 36px;
        width: 100%;
        position: fixed;
        bottom: 0;
    }

    footer .btn-xs, .legend-footer .btn-xs {
        padding: 5px 10px;
    }

    footer input {
        position: absolute;
        left: 250px;
        top: 5px;
    }

    footer .ui-slider {
        border: 1px solid #aaa;
        height: 6px;
        left: 15px;
        position: absolute;
        top: 15px;
        width: 220px;
        background: #bbb;
    }

    footer .zoom-paper-to-fit {
        left: 300px;
        position: absolute;
        top: 3px;
    }
    #zoom_slider .ui-slider-handle {
        background: #ddd;
        border: 1px solid white;
        height: 14px;
        border-radius: 5px;
    }
    .toggle_channel {
        border-radius: 6px 6px 6px 6px;
        margin: 2px;
        padding: 4px 4px 4px 6px;
    }
    .ch-btn-down {
        background-image: url("../images/button-down.png")
    }
    .ch-btn-up {
        background-image: url("../images/button-up.png")
    }
    .ch-btn-flat {
        background-image: url("../images/button-flat.png")
    }
    .ch-btn-down, .ch-btn-up, .ch-btn-flat {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .zp-btn-down {
        background-image: url("../images/button-down-grey.png")
    }

    .pixel_size_div {
        position: absolute;
        top: -27px;
        left: 100px;
    }

    .pixel_size_display {
        cursor: pointer;
    }

    .new-label-form .input-group {
        width:160px;
        margin-right: 4px;
    }

    .scalebar_form .input-group {
        width:80px;
        margin-right: 4px;
    }

    .scalebar_form .form-group {
        margin-bottom: 0;
    }

    .scalebar_form .row {
        align-items: center;
        display: flex;
        gap: 3px;
        margin-top: 3px;
    }

    .scalebar_form .scalebar_length {
        padding-right: 0;
    }

    .scalebar_form .scalebar_text {
        padding-right: 0;
    }

    .scalebar_form .scalebar_unit {
        padding-left: 0;
        padding-right: 10px;
    }

    .scalebar {
        position: absolute;
        margin: 5% !important;
    }

    .scalebar-label {
        position: absolute;
        left: -100%;
        width: 300%;
        text-align: center;
        line-height: 1;
    }
    .label_topleft .scalebar-label, .label_topright .scalebar-label {
        top: 3px;
    }
    .label_bottomleft .scalebar-label, .label_bottomright .scalebar-label {
        bottom: 4px;
    }

    .edit-label-form .input-group {
        width:140px;
        margin-right: 4px;
    }

    .form-inline .close {
        color: #FF0000;
        left: 3px;
        top: 2px;
        margin-left: 4px;
        opacity: 0.5;
        position: relative;
    }
    .label_layout {
        position:absolute;
    }
    .label_layout p {
        margin: 0;
    }
    .left_vlabels>div {
        margin-bottom: 5px;
    }
    .label_middle, .label_middle table, .label_middle td {
        height:100%;
        width:10000px;
    }
    .label_middle td {
        vertical-align: middle;
    }

    .left_vlabels{
        position: absolute;
        right: 100%;
        height: 300%;
        top: -100%;
        width: 300%;
        text-align: center;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .left_vlabels>div {
        position: absolute;
        bottom:0;
        width:100%;
    }

    .previewIdChange .glyphicon-ok {
        color: #0f0;
    }
    .previewIdChange .glyphicon-flag {
        color: #f00;
    }
    /* Classes here are generated in templates from 'top' etc See labelicon classes below */
    .label_top {
        bottom: 100%;
        width: 300%;
        left: -100%;
        text-align: center;
        margin-bottom: 3px;
    }
    .label_bottom {
        top: 100%;
        width: 300%;
        left: -100%;
        text-align:center;
    }
    .label_left {
        right: 100%;
        text-align: right;
    }
    .label_right {
        left: 100%;
        text-align: left;
        width: 100%;
    }
    .label_topleft,
    .label_topright,
    .label_bottomleft,
    .label_bottomright {
        margin: 0 5px 1px 4px;
    }

    .label_topleft {
        top: 0;
        left: 0;
        text-align: left;
    }
    .label_topright {
        top: 0;
        right: 0;
        text-align: right;
    }
    .label_bottomleft {
        bottom: 0;
        left: 0;
        text-align: left;
    }
    .label_bottomright {
        bottom: 0;
        right: 0;
        text-align: right;
    }

    /* Transformation to font-based icons - These are split('-') to get position: 'top' etc */
    .labelicon-topleft {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }
    .labelicon-bottomleft {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        position: relative;
        top: 5px;
    }
    .labelicon-bottomright {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .labelicon-top {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .labelicon-left {
        position: relative;
        top: 5px;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
    .labelicon-leftvert {
        position: relative;
        top: 5px;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
    .labelicon-right {
    }
    .labelicon-bottom {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .imageViewer {
        height: 270px;
    }
    .vp_img {
        position:absolute;
    }
    .vp_frame {
        position: absolute;
        left: 20px;
        overflow: hidden;
        border: solid black 1px;
        background: #ddd;
    }
    #vp_z_label {
        position:absolute;
        top: 0;
        left: 0;
        padding: 0 2px;
    }
    #vp_z_value {
        position: absolute;
        bottom: 20px;
        right: 95%;
        white-space: nowrap;
    }
    #vp_t_label {
        position: absolute;
        left: 20px;
        bottom: 0;
    }
    #vp_t_value {
        position: absolute;
        left: 240px;
        bottom: 0;
    }
    #vp_deltaT {
        position: absolute;
        right: 100px;
        bottom: -19px;
    }
    .no-padding {
        padding: 0;
    }
    .tab-footer {
        border-top: solid #dddddd 1px;
        margin-top:15px;
        padding-top: 4px;
    }
    .tab-pane .ui-slider {
        margin: 13px 5px 6px;
        border: 4px solid #fff;
        cursor: pointer;
    }
    #vp_z_slider, #vp_t_slider {
        background: none repeat scroll 0 0 #BBBBBB;
    }
    .tab-pane .ui-slider-handle {
        background: none repeat scroll 0 0 #DDDDDD;
        border: 1px solid #aaa;
        height: 14px;
    }
    .tab-pane .ui-slider-horizontal {
        height: 10px;
        width: 215px;
    }
    .tab-pane .ui-slider-horizontal .ui-slider-handle {
        top: -6px;
    }
    .tab-pane .ui-slider-vertical {
        width: 10px;
        height: 188px;
        margin-right: 10px;
        margin-top: 30px;
    }
    .image-display-options {
        padding: 2px;
    }
    .rotation-controls-shown .rotation-slider {
        height: 150px;
        margin-left: 15px;
        margin-top: 35px;
        background: #666;
    }
    .show-rotation {
        padding: 5px 2px;
        min-width: 45px;
    }
    .z-projection {
        padding: 3px 5px 1px;
    }
    .z-projection span{
        background-image: url("../images/projection20.png");
        width: 20px;
        height: 20px;
    }
    .crop-btn span{
        background-image: url("../images/crop20.png");
        width: 20px;
        height: 20px;
    }
    .tab-pane .ui-slider-vertical .ui-slider-handle {
        left: -7px;
    }
    #channel_sliders>div{
        position: relative;
    }
    .ch_slider {
        height: 12px !important;
        width: 144px !important;
        top: -2px;
        left: 130px;
        position: absolute !important;
    }
    .ch_start, .ch_end {
        position: absolute;
        top: 0px;
    }
    .ch_start, .ch_end {
        position: absolute;
        top: 0px;
    }
    .ch_start input, .ch_end input {
        width: 45px;
        height: 33px;
        text-align: center;
    }
    /* Hide spinner added to 'number' inputs */
    input[type='number'] {
        -moz-appearance:textfield;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .ch_start {
        left: 80px;
        text-align: right;
        width: 30px;
    }
    .ch_end {
        right: 0;
    }
    .ui-slider-disabled a {
        display: none;
    }
    #vp_t_slider {
        position: absolute;
        bottom: -1px;
        left: 40px;
        width: 180px;
    }
    #vp_zoom_slider {
        background: #aaa;
    }
    .z-decrement, .z-increment, .time-decrement, .time-increment {
        position: absolute;
        padding: 2px;
        display: none;
    }
    /* only show these buttons when container div is slider */
    .ui-slider .time-increment, .ui-slider .time-decrement,
    .ui-slider .z-increment, .ui-slider .z-decrement {
        display: block;
    }
    .time-increment:hover, .time-decrement:hover,
    .z-increment:hover, .z-decrement:hover {
        border: solid #ddd 1px;
    }
    .z-decrement {
        left: -8px;
        bottom: -23px;
    }
    .z-increment {
        left: -8px;
        top: -22px;
    }
    .time-decrement {
        left: -20px;
        top: -10px;
    }
    .time-increment {
        right: -20px;
        top: -10px;
    }
    .rotation-controls-shown {
        background-color: #FAFAFA;
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        height: 200px;
        padding: 2px;
        position: absolute;
        z-index: 100;
    }
    /* Over-riding Bootstrap Styles */
    .alert {
        margin-bottom: 10px;
        padding: 5px;
    }
    .modal-dialog {
        left: 0;
    }
    .modal-header {
        padding: 10px;
    }
    .modal-body {
        padding: 15px;
        max-height: 450px;
        overflow-y: auto;
    }
    .non-modal-dialog {
        position:relative;
        left:auto;
        margin-right:20px;
        padding-top:0;
        top:55px;
        width:375px;
        z-index:50;
    }
    .tab-pane {
        padding: 10px;
    }
    .btn-group > .btn.dropdown-toggle, .input-group-btn > .btn.dropdown-toggle {
        padding-left: 3px;
        padding-right: 3px;
    }
    .navbar-brand {
        padding: 12px;
    }
    .navbar-nav > li > a {
        padding-bottom: 12px;
        padding-top: 12px;
    }
    .navbar-fixed-top {
        z-index:100;
    }
    .navbar {
        min-height: 40px;
    }
    .navbar>div.container {
        max-width: 100%;
    }
    /** Add my class to boost size of font icons **/
    .icon-buttons {
        margin-right: 20px;
    }
    .icon-buttons .glyphicon {
        font-size: 14px;
    }
    .icon-buttons .btn-sm {
        padding: 4px 9px;
    }
    /* drop-down list uses radio buttons to choose grid gap */
    /* copies from bootstrap .dropdown-menu li a */
    .dropdown-menu li label {
        font-weight: normal;
        display: block;
        padding: 3px 20px;
        white-space: nowrap;
    }
    .dropdown-menu li label:hover{
        color: #ffffff;
        text-decoration: none;
        background-color: #428bca;
    }
    /* hide radio buttons - show tick icon after checked input */
    .dropdown-menu input { display: none; }
    .dropdown-menu input + span { visibility: hidden; }
    .dropdown-menu input:checked + span { visibility: visible; }

    .rotate-font .glyphicon {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .rotate-font.btn-sm {
        padding: 6px 11px 2px 7px;
    }

    .navbar-left .btn-sm {
        font-size: 14px;
        padding: 4px 8px;
    }

    .toggleRoi {
        transition: transform 300ms ease;
        transform-origin: 30% 75%;
    }
    .rotate90 {
        transform: rotate(90deg);
    }

    @keyframes spin {
        100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
    }

    .navbar-right .glyphicon-refresh, .imgContainer .glyphicon-refresh {
        animation: spin 2s linear infinite;
        padding: 1px 2px 2px 2px;
    }

    .imgContainer .glyphicon-refresh {
        font-size: 50px;
        left: 50%;
        top: 50%;
        display: block;
        margin-left: -25px;
        margin-top: -25px;
        color: #bbb;
        padding: 1px 2px 9px 2px;
    }

    .colorpicker span,
    .label-color span:first-child,
    .shape-color span:first-child {
        border: solid 1px #bbb;
    }

    /* remove border from above */
    .colorpicker .reverseIntensity span {
        border-width: 0;
    }

    .lutOption {
        text-align: left;
    }

    .lutOption span {
        width: 85px;
        display: inline-block;
    }

    .ch_slider .ui-slider-range {
        background-image: url('../images/gradient.png');
        background-size: 100% 50px;
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .lutBg, .ch_slider .lutBg {
        /* NB: when updating png, consider using different name to avoid cache */
        background-image: url('../images/luts_10.png');   /* each lut is 10px high */
        background-size: 100% 1950px;  /* height is stretched 5x (50px per LUT) */
        background-repeat: no-repeat;
    }

    .channel-btn {
        width: 59px;
        padding-left: 6px;
        padding-right: 6px;
        overflow: hidden;
    }

    .font-white {
        color: white;
    }

    .lutPreview {
        width: 100%;
        height: 45px;
        border-top: 1px solid #e5e5e5;
    }

    .small-thumb {
        width: 40px;
        height: 40px;
    }

    .missingThumb {
        background: #eeeeee;
    }

    .table-sort-btn {
        padding-left: 3px;
        padding-right: 3px;
    }

    #figure_files th .btn-sm:first-child {
        padding-right: 0
    }
    #figure_files th .btn-sm:last-child {
        padding-left: 0
    }
    .muted {
        opacity: 0.4;
    }

    #cropViewer {
        width: 500px;
        height: 450px;
        overflow: auto;
        position: relative;
    }

    #crop_paper svg {
        cursor:  crosshair;
        cursor:  url("../images/crop20.png") 10 10, crosshair;
        z-index: 10;
    }

    .roiPickMe {
        cursor: pointer;
    }
    /* On hover, use selected blue color */
    .roiPickMe:hover {
        background-color: rgb(190, 212, 253);
    }

    .roiViewer {
        overflow: hidden;
        position: relative;
    }

    table.roiPicker {
        margin-bottom: 5px;
    }


    /*  color-picker  */

    .colorpickerOption {
        background-image: url("../3rdparty/bootstrap-colorpicker/img/bootstrap-colorpicker/hue.png");
        background-size: 20px 50px;
        background-position: 0 100%;
    }

    .colorpicker-hue {
        height: 200px;
        width: 30px;
        background-size: 200px 200px;
    }
    .colorpicker-saturation {
        width: 200px;
        height: 200px;
        background-size: 200px 200px;
    }
    .colorpicker-color {
        display: none;
    }

    .oldNewColors {
        width: 120px;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .oldNewColors li {
        height: 60px;
    }

    .rgb-group {
        position: absolute;
        top: 40px;
        width: 120px;
        right: 175px;
    }

    .pickedColors {
        position: absolute;
        right: 15px;
        bottom: 15px;
        width: 120px;
    }

    .pickedColors .btn-group {
        margin-left: 0 !important;
    }

    .pickedColors .btn {
        height: 30px;
        width: 30px;
    }

    /** ------------------- Shape Editor styles --------------------- **/

    .shape_canvas {
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .image_wrapper img {
        width: 100%;
        height: 100%;
    }
    .new_shape_layer {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    /** toolbar buttons **/

    .btn-toolbar span.glyphicon {
        width: 16px;
        height: 16px;
        position: relative;
        top: 3px;
        background-repeat: no-repeat;
    }

    .roiModalForm .modal-body {
        max-height: 650px;
        padding-top: 10px;
    }

    .roi_toolbar {
        overflow: visible;
        padding-bottom: 10px;
    }

    .roi_toolbar .pressed {
        background: #ddd;
    }

    .roiModalRoiItem .glyphicon {
        width: 16px;
        height: 16px;
    }

    .select-icon {
        background-image: url("../images/cursor-icon-16.png");
    }
    .rect-icon{
        background-image: url("../images/square-outline-icon-16.png");
    }
    .line-icon{
        background-image: url("../images/line-icon-16.png");
    }
    .arrow-icon{
        background-image: url("../images/arrow-icon-16.png");
    }
    .ellipse-icon{
        background-image: url("../images/ellipse-icon-16.png");
    }
    .polygon-icon{
        background-image: url("../images/polygon-icon-16.png");
    }
    .polyline-icon{
        background-image: url("../images/polyline-icon-16.png");
    }
    .roiModalRoiItem {
        cursor: pointer;
    }
    .roiModalRoiItem.shape td {
        border-top: 0 solid transparent;
    }
    .roiViewport {
        position:relative;
        width:55px;
        height:55px;
    }
    .roiModalRoiItem .btn-sm {
        padding: 3px 6px;
        visibility: hidden;
    }
    .roiModalRoiItem:hover .btn-sm {
        visibility: visible;
    }

    .aspectRatioSelected .okSign {
        display: inline-block
    }
    .aspectRatioSelected {
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
    }
    .okSign {
        display: none
    }