/*
 * Copyright (C) 2012 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/>.
 *
 */


/*******************************************************************/
/* Left Panel 													   */
/*******************************************************************/
.left_panel_content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.left_panel_tabs_container {
    position: relative;
    /* Also declared in ui-tabs */
    min-width: 340px;
}

.left_panel_toolbar {
    position: relative;
}

.left_panel_tree_container {
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 0;
    right: 0;
}

.left_panel_tree {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    border-top: solid 1px hsl(210, 10%, 85%);
    border-right: solid 1px hsl(210, 10%, 85%);
}

/*******************************************************************/
/* Left bottom panel - displayed when a user clicks a well in grid */
/*******************************************************************/
.left_panel_preview {
    display: none;
    position: relative;
    width: 100%;
    overflow: auto;
    border-top: solid 1px hsl(210, 10%, 85%);
    border-right: solid 1px hsl(210, 10%, 85%);
}

.left_panel_preview__header {
    position: relative;
    padding: 4px 8px;
    height: 24px;
}

.left_panel_preview__close {
    position: absolute;
    top: 50%;
    left: 95%;
    transform: translate(-50%, -50%);
}

.left_panel_preview__title--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left_panel_preview__title--medium {
    font-size: medium;
}

.left_paneL_preview__content {
    position: relative;
    width: 100%;
    height: calc(100% - 32px);
}

.left_paneL_preview__well {
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    border: solid #bbb 1px;
}

/*******************************************************************/
/* Well Fields Panel - displayed at the center bottom of a well grid */
/*******************************************************************/
.well-fields {
    bottom: 0;
    height: 160px;
    /*160*/
}

.well-fields__toolbar {
    position: relative;
    width: 100%;
    height: 32px;
    border-bottom: solid 1px #ddd;
}

.well-fields__toolbar-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.well-fields__toolbar-tools--left {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 8px;
    margin-right: 8px;
    text-align: center;
}

.well-fields__images {
    top: 32px;
    bottom: 25px;
    margin: 8px 0;
}

.wrap-images-tool {
    width: auto;
    max-height: 32px;
}

.wrap-images-tool__input {
    width: 36px;
    font-size: medium;
    font-weight: bold;
    margin: 4px;
}

.text--medium {
    font-size: medium;
}

/*******************************************************************/

/* jstree */

#Public .jstree-default ul li ul li.isDisabled a ins {
    opacity: 0.5;
}


/* User Selection */

#group_user_selection {
    border-top: solid 1px #333940;
    border-top: solid 1px hsl(210, 20%, 20%);
    -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* FF3.5+ */
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* Opera 10.5, IE 9.0 */

    color: white;
    background-color: hsla(212, 8%, 40%, 1);
    /* Old browsers */
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .1) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, .1)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c9198', endColorstr='#6d747c', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%);
    /* W3C */
    border-bottom: solid 1px hsl(210, 20%, 25%);
    border-right: solid 1px hsl(210, 10%, 40%);
    position: relative;
    height: 31px;
    min-width: 340px;
}


#group_user_selection:hover {
    background-color: hsla(212, 8%, 44%, 1);
}



#group_user_chooser {
    background: #FE7730;
    float: left;
    display: block;
    width: 100%;
    padding-bottom: 1px;
}

.dropdown_menu {
    position: relative;
}

#group_user_chooser li.non_selectable:hover {
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    background: none;
}


#group_user_chooser li a {
    padding: .5em 0 .5em 8px !important;
}

#group_user_chooser li strong {
    font-weight: bold;
}



#groupsUsersButton {
    overflow: hidden;
    padding: .3em 1.8em .3em .7em;
    -webkit-border-radius: 5px;
    /* Saf3+, Chrome */
    -moz-border-radius: 5px;
    /* FF1+ */
    border-radius: 5px;
    /* Opera 10.5, IE 9 */
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: white;
    background: url(../image/group_dropdown_arrow.png) 97% center no-repeat;
    cursor: pointer;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
    margin-top: 4px;
}

#groupsUsersButton img {
    margin-right: 6px;
    float: left;
}

#groupsUsersButton span {
    display: inline-block;
    font-size: 1.15em;
    overflow: hidden;
    line-height: 1.6em;
    padding-right: 8px;
    color: white;
    font-weight: 900;
}

#groupsUsersButton span:last-child {
    color: rgba(255, 255, 255, .7);
    font-weight: 700;
    font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
}


.left_panel_tree_container p:last-child {
    display: none;
}

/* Generic Left and Right Panel Tabs */


#annotation_tabs {
    position: absolute;
    padding: 0;
    border-width: 0;
}

.ui-tabs {
    padding: 0 !important;
}

/* Move down the layout of the tab to give the impression of continuous background
     * between tab and the panel itself.
     */
.ui-tabs .ui-tabs-nav li {
    top: 1px !important;
}


#left_panel_tab_list>li,
{
bottom: 0px;
left: 0px;
right: 0px;
}

.right_tab_content {
    top: 28px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}






#left_panel_tab_list li a:hover,
#annotation_tabs_list li a:hover;

    {
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    color: white;
}


.right_panel_spinner {
    text-align: center;
    margin-top: 25px;
    font-size: 18px;
    /* transition: opacity 2s; */
    display: none;
}

/* .right_panel_spinner.fade {
        opacity: 1;
    } */
.right_panel_spinner span {
    opacity: 0.5;
}



/* Left Panel Tabs */

#left_panel_tab_list,
.left_panel_top {
    background: #B8C2CC;
    /* Old browsers */
    background: hsl(210, 10%, 80%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .7)), color-stop(100%, rgba(255, 255, 255, .1)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EBEDEF', endColorstr='#C8CDD2', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
    /* W3C */
    -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* FF3.5+ */
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* Opera 10.5, IE 9.0 */

    border-bottom: solid 1px hsl(210, 10%, 70%);
    border-right: solid 1px hsl(210, 10%, 80%);
    position: relative;
    height: 29px;
}




/* Non tabbed Left tree */

.left_panel_top {
    text-align: center;
}

.left_panel_top h1 {
    text-align: center;
    display: inline-block;
    color: #999;
    font-size: 1.4em;
    padding: .6em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    color: hsl(210, 10%, 50%);
}

.left_panel_top strong {
    color: hsl(210, 10%, 20%);
    font-weight: bold;
}

#metadata_details {
    background-color: #f2f2f2;
    background-color: hsl(210, 10%, 97%);
    padding: 20px;
}


/* Tabbed Left tree */


.ui-tabs-nav {
    padding: 0 !important;
}

.ui-tabs-panel {
    padding: 0 !important
}


#left_panel_tab_list li,
#annotation_tabs_list li {
    border-right: solid 1px hsl(210, 10%, 75%);
    -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.3);
    -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.3);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.3);
    margin: 0;
}





#left_panel_tab_list a,
#annotation_tabs_list li a {
    color: hsl(210, 10%, 50%);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    padding: 4px 12px 2px;
    margin: 0;
    line-height: 2em;
    font-size: 1.1em;
    font-weight: bold;
}

#annotation_tabs_list li a {
    padding: 4px 12px 4px;
}


#left_panel_tab_list a:hover,
#annotation_tabs_list a:hover {
    color: hsl(210, 10%, 45%);
    background-color: rgba(255, 255, 255, .2);
}

#left_panel_tab_list .ui-tabs-active,
#annotation_tabs_list .ui-tabs-active {
    position: relative;
    transition: none;
    padding: 0;
    margin: 0;
    background-color: #F0F2F5;
}

#left_panel_tab_list .ui-tabs-active a,
#annotation_tabs_list .ui-tabs-active a {
    position: relative;
    color: hsl(210, 10%, 30%);
    top: 1px;
    background-color: #F0F2F5;
}


/* Left Panel Tree */

.hiddenField {
    display: none;
}

.quote {
    background-color: #eee;
    font-family: monospace;
    font-style: italic;
    border: 1px dotted #333;
    font-size: 95%;
    margin: 15px 20px 15px 20px;
    padding: 6px;
    width: 85%;
    overflow: auto;
}



/*
	===============================================
	:: Right Panel
	===============================================
*/



/* Right & Center Panel Headers */

#center_panel_header,
#annotation_tabs_list,
.toolbarBg {
    background: hsl(215, 10%, 80%);
    /* Old browsers */
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .7)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EBEDEF', endColorstr='#C8CDD2', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* FF3.5+ */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Opera 10.5, IE 9.0 */

}


#center_panel_header,
#annotation_tabs_list {
    border-top: solid 1px hsl(210, 15%, 15%);
    height: 31px;
}



/* Right Tab Menu */

#annotation_tabs_list {
    border-bottom: solid 1px hsl(210, 10%, 55%);
    border-right: solid 1px hsl(210, 10%, 100%);

}

#annotation_tabs_list li {
    opacity: 1;
    border-bottom-width: 1px;
}

#annotation_tabs_list li:first-child {
    border-left: solid 1px hsl(210, 10%, 70%);
    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
    /* FF3.5+ */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
    /* Opera 10.5, IE 9.0 */
}

#annotation_tabs_list li a {
    opacity: 1;
    padding: 5px 12px 3px;
}




#toolbar_info_panel .panel_div {
    border-top: solid #ddd 1px;
}

#toolbar_info_panel p {
    margin: 5px
}

#toolbar_info_panel .show_more {
    margin-left: 10px
}




/* Right Inner Content */

.right_tab_inner {
    background: hsl(220, 20%, 95%);
    padding: 10px 15px;
    overflow: auto;
    top: 6px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    font-size: 1.1em;
    //border-left: solid 1px hsl(210,10%,85%);
    min-width: 240px;
}

#preview_tab .right_tab_inner {
    display: flex;
    flex-direction: column;
}

#preview_tab .right_tab_inner>* {
    flex-shrink: 0;
}

#preview_tab .right_tab_inner #rdef-container {
    flex-shrink: 1;
    overflow-y: auto;
}

/* Seperator */

hr {
    margin: 8px 0;
    display: block;
    border: none;
    border-bottom: solid 1px rgba(255, 255, 255, .8);
    border-top: solid 1px hsl(210, 10%, 90%);
}

/* Rating */
#rating_annotations ul {
    border-color: transparent;
}

.rating {
    float: left;
    border: solid 1px hsl(210, 20%, 85%);
    margin: 2px;
    border-radius: 5px;
    border-top: solid 1px hsl(210, 20%, 85%) !important;
    border-bottom: solid 1px hsl(210, 20%, 85%) !important;
}

.lnfiles:empty {
    opacity: 0.1;
}

.myRating img,
.addRating img {
    cursor: pointer;
}

.addRating .removeRating {
    display: none;
}

#rating_annotations a {
    padding-top: 5px;
    padding-bottom: 5px;
}

.removeRating {
    padding: 0px !important;
    top: 2px;
    right: 2px;
}

.rating .removeRating {
    visibility: hidden;
}

.rating:hover .removeRating {
    visibility: visible;
}

.rating img {
    opacity: 0.65;
}

.myRating img {
    opacity: 1.0;
}


/* Tables */


#right_panel table {
    width: 100%;
}

#right_panel th,
#right_panel td {
    padding: 0 5px 5px 0;
    overflow-wrap: break-word;
}

#right_panel th,
#right_panel td.title {
    color: hsl(210, 10%, 30%);
    vertical-align: top;
    text-align: left;
    font-weight: bold;
}

#right_panel td {
    color: hsl(210, 10%, 50%);
}





/* Title */


.data_heading {
    margin-bottom: 12px;
    border-bottom: solid 1px hsl(210, 10%, 90%);
    overflow: hidden;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    /* FF3.5+ */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    /* Opera 10.5, IE 9.0 */

    padding: 10px 0 5px 0;
}


.data_heading h1 {
    overflow: hidden;
    width: 85%;
    display: inline-block;
    padding: 5px 0;
}

.data_heading span {
    display: inline-block;
    line-height: 1.2em;
    float: left;
    overflow: hidden;
}

.data_heading img {
    float: right;
}

.data_heading form input[type=text] {
    font-size: 1.3em;
    margin-top: 10px;
    width: 90%;
}


.data_heading .btn {
    float: right;
}



.data_heading_id {
    position: relative;
    font-size: 1em;
    color: hsl(210, 5%, 60%);
}

.data_heading_id strong {
    font-weight: bold;
    color: hsl(210, 10%, 50%);
}

.split_filesets_info .split_fileset {
    font-size: 13px;
    line-height: 15px;
}

.fileset_image {
    max-width: 35px;
    margin: 3px;
    float: left;
}

.fileset_image.extra {
    display: none;
}

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

.chgrp_confirm_dialog .ui-dialog-buttonset {
    width: 100%;
}

.chgrp_confirm_dialog .ui-dialog-buttonset button {
    float: right;
}

.chgrp_confirm_dialog .ui-dialog-buttonset button:first-child {
    float: left;
    margin-left: 10px;
}


.tooltip_title {
    color: #3E5D74;
    display: inline-block;
    line-height: 1.5em;
}


/* Description */

.description {
    font-size: 1em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    line-height: 1.4em;
    overflow: hidden;
    padding: 0;
}

.description span {
    overflow: hidden;
    float: left;
    width: 90%;
    color: #666;
    word-wrap: break-word;
}

.description img {
    float: right;
}


.description .btn {
    position: relative;
    top: -2px;
}

.description form {
    overflow: hidden;
    clear: left;
    top: 0px;
    left: 0px;
    width: 100%;
}

.description textarea {
    width: 95%;
    display: block;
    margin: 0;
}

.description input[type=submit] {
    margin-right: 5px;
}






/* Meta Data Values */

.metadata_details {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* Table of 'core metadata' */
.core_metadata td>div {
    position: relative;
    padding-right: 22px;
}

.core_metadata .btn {
    position: absolute;
    right: 0px;
    top: -3px;
}

.core_metadata .btn span {
    height: 13px;
    width: 16px;
}

.core_metadata input[type="text"] {
    border: 1px solid #DDDDDD;
    border-radius: 3px 3px 3px 3px;
    font-size: 0.9em;
    margin: 1px;
    padding-left: 2px;
}

.core_metadata form button {
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    font-size: 0.95em;
    margin: 2px 1px;
}

.exposureTimeData {
    border-width: 0
}

.exposureTimeData td {
    white-space: nowrap;
}


/* Tags, Attachments, Ratings, Comments */


.annotations_section {
    overflow: hidden;
}

.annotations_section h2 {
    float: left;
    font-size: .9em;
}

.annotations_section .btn {
    float: right;
    position: relative;
    overflow: hidden;
}

.annotations_section .btn span {
    font-size: 1.3em;
    font-weight: bold;
    line-height: .7em;
    padding: 0 5px 4px;
    font-family: 'Helvetica-Bold';
}





/* Tags */

#tags_container,
.lnfiles {
    clear: left;
    overflow: hidden;
}





/* Attachments */


.lnfiles {
    overflow: hidden;
    border: solid 1px hsl(210, 20%, 80%);
    -webkit-border-radius: 5px;
    margin-top: 3px;
    -webkit-border-radius: 5px;
    /* Saf3+, Chrome */
    -moz-border-radius: 5px;
    /* FF1+ */
    border-radius: 5px;
    /* Opera 10.5, IE 9 */

}

.lnfiles li {
    overflow: hidden;
    background: hsl(210, 20%, 90%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    border-bottom: solid 1px hsl(210, 20%, 85%);
    border-top: solid 1px rgba(255, 255, 255, .5);
}

.lnfiles li:first-child {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;

    -webkit-border-top-left-radius: 5px;
    /* Saf3+, Chrome */
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    /* FF1+ */
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    /* Opera 10.5, IE 9 */
    border-top-right-radius: 5px;

    border-top: none;
}

.lnfiles li:last-child {
    border-bottom: none;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;

    -webkit-border-bottom-right-radius: 5px;
    /* Saf3+, Chrome */
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    /* FF1+ */
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    /* Opera 10.5, IE 9 */
    border-bottom-left-radius: 5px;

}

.lnfiles li input[type=checkbox] {
    vertical-align: middle;
    margin-top: 1px;
    margin-right: 0px;
    padding-right: 0px;
}

.lnfiles li>a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    font-size: 1em;
    padding: 8px 10px;
    display: inline-block;
    color: hsl(210, 15%, 35%);
    -webkit-border-radius: inherit;

    -webkit-border-radius: inherit;
    /* Saf3+, Chrome */
    -moz-border-radius: inherit;
    /* FF1+ */
    border-radius: inherit;
    /* Opera 10.5, IE 9 */
}


.lnfiles li.selected {
    background: hsl(210, 20%, 85%)
}

.lnfiles li a.tooltip span {
    color: hsl(210, 15%, 55%);
}


/* Actions for Attachments */

.attachment_actions {
    float: right;
    margin-right: 4px;
}


.action {
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: solid 1px transparent;
    margin-top: 3px;
    -webkit-border-radius: 3px;
    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */
    color: hsl(210, 40%, 30%);
    line-height: 1.3em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.action:hover {
    color: hsl(210, 40%, 20%);
    border: solid 1px hsl(210, 15%, 65%);
}

.removeFile {}



/* Map Annotations */

.mapAnnContainer {
    position: relative;
    max-height: 250px;
    overflow-y: auto;
}

.keyValueTable {
    position: relative;
    margin-bottom: 20px;
    width: 98% !important;
}

.keyValueTable td,
.keyValueTable th {
    width: 50%;
    max-width: 100px;
    /* still expands to 50% */
    overflow: hidden;
    padding: 2px 5px !important;
    color: hsl(210, 10%, 30%) !important;
    vertical-align: middle;
}

.editableKeyValueTable td,
.editableKeyValueTable th {
    height: 20px;
}

.keyValueTable input {
    width: 96%;
}

.keyValueTable tr:hover {
    background-color: #eee;
}

.keyValueTable tr.ui-selected {
    background-color: #cddcfc;
}

.keyValueTable tbody tr {
    border: solid #ddd 1px;
}

.editableKeyValueTable tbody tr {
    background-color: #fff;
}

.mapAnnToolbar {
    position: absolute;
    top: -5px;
    right: 15px;
    z-index: 10;
}

.editableKeyValueTable tr.placeholder td {
    font-style: italic;
    color: #999 !important;
}


/* Comments */






/* Comments Form */


#add_comment_form {
    overflow: hidden;
    clear: left;
}

#add_comment_form textarea {
    width: 98%;
    clear: left;
    display: block;
    -webkit-border-radius: 3px;

    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */

    border: solid 1px hsl(210, 9%, 82%);
    border-top: solid 1px hsl(210, 9%, 77%);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 1), inset 0 1px 1px rgba(0, 0, 0, .1);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 1), inset 0 1px 1px rgba(0, 0, 0, .1);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 1), inset 0 1px 1px rgba(0, 0, 0, .1);
    /* FF3.5+ */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1), inset 0 1px 1px rgba(0, 0, 0, .1);
    /* Opera 10.5, IE 9.0 */
}


#add_comment_form input[type=submit] {
    background: hsl(210, 10%, 80%);
    cursor: pointer;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    border: solid 1px hsl(210, 10%, 72%);
    display: inline-block;
    padding: .4em 1.2em .3em;
    line-height: 1.4em;
    font-size: 1em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* FF3.5+ */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Opera 10.5, IE 9.0 */
    color: hsl(210, 10%, 30%);
    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */
}

#add_comment_form input[type=submit]:hover {
    background: hsl(210, 10%, 85%);
}

#add_comment_form input[type=submit]:active,
#add_comment_form input[type=submit]:focus {
    background: hsl(210, 10%, 75%);
    /* Old browsers */
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, .2)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
    /* IE10+ */

    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
    /* W3C */
}



/* Bulk Annotations */
.bulk_annotations_table td {
    white-space: normal !important;
}



/* Comments already Made */

.ann_comment_wrapper {
    overflow: hidden;
    padding-bottom: 15px;
}




.ann_comment_wrapper div.avatar {
    float: left;
    width: 35px;
    margin-right: 6px;
    overflow: hidden;
}

.ann_comment_wrapper div.avatar img {
    width: 100%;
}


.ann_comment_text {
    overflow: hidden;
}

.hidden_spinner {
    display: none;
}

#comments_container {
    margin-top: 10px;
}


.ann_comment_header {
    margin-bottom: 5px;
    display: inline-block;
    color: #999;
    color: hsl(210, 5%, 50%);
}

.ann_comment_header strong {
    font-weight: bold;
    color: #333;
}

.commentText {
    white-space: pre-wrap
}

.removeComment {
    float: right;
    cursor: pointer;
    -webkit-border-radius: 2px;
    -webkit-border-radius: 2px;
    /* Saf3+, Chrome */
    -moz-border-radius: 2px;
    /* FF1+ */
    border-radius: 2px;
    /* Opera 10.5, IE 9 */
    border: solid 1px transparent;
    padding: 2px;
}

.removeComment:hover {
    border: solid 1px rgba(0, 0, 0, .2);
}

.ann_comment_wrapper:hover .removeComment {
    display: block;
}



#hierarchy-pane {
    clear: left;
}

#hierarchy-pane a {
    text-decoration: underline;
    color: hsl(210, 40%, 50%);
}

#hierarchyTree li {
    white-space: nowrap;
    display: block;
    min-height: 18px;
    line-height: 18px;
    white-space: nowrap;
    margin-left: 18px;
    min-width: 18px;
}


/* Batch Annotation */

#batch_ann_msg_container {
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
    background: #ffb;
    width: 200px;
}

#batch_ann_msg,
#batch_ann_error,
.postit_msg {
    background: #ffb;
    padding: 10px;
    border: solid #ddd 1px;
}

#batch_ann_error {
    background: #fbb;
    cursor: pointer;
}

#batch_ann_msg,
#batch_ann_error {
    display: none;
}





/*   Acquisition Details */

h1.can-collapse {
    border: 1px solid #bbb;
    margin: 5px 0;
    padding: 7px;
}

.can-collapse {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .7);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    /* FF3.5+ */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    /* Opera 10.5, IE 9.0 */


    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.05) 100%);
    /* Chrome10+,Safari5.1+ */

    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.05)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    /* IE10+ */

    background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    /* W3C */


    cursor: pointer;
    -webkit-border-radius: 4px;

    -webkit-border-radius: 4px;
    /* Saf3+, Chrome */
    -moz-border-radius: 4px;
    /* FF1+ */
    border-radius: 4px;
    /* Opera 10.5, IE 9 */
    position: relative;
}


.can-collapse:after {
    position: absolute;
    content: '';
    top: 10px;
    right: 8px;
    width: 10px;
    height: 10px;
    display: block;
    background: url(../image/group_dropdown_arrow.png) center center no-repeat;
}


.closed:after {
    background: url(../image/dropdown_right_arrow.png) center center no-repeat;
}

.annotationCount {
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    display: inline-block;
    padding: 0 3px;
    color: hsl(210, 10%, 50%);
    margin-left: 10px;
}





/*   Preview */

.miniview {
    /* This is for the miniviewer in image_details */
    width: 300px;
    height: 300px;
    position: relative;
}



.ui-state-disabled {
    /*display:none; it breaks calendar layout see #9130*/
}


.ui-state-disabled a {
    opacity: 0.3 !important;
}








/*
	===============================================
	:: Center Panel
	===============================================
*/



/* Center Panel Header */

#center_panel_header {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    right: 0px;
    border-bottom: solid 1px rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2);
    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2);
    /* FF3.5+ */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2);
    /* Opera 10.5, IE 9.0 */
}


/* Center Panel View Selector */

#center_panel_chooser {
    float: right;
    position: relative;
    top: 5px;
    right: 5px;
    width: 110px;

}

#center_panel_chooser:hover {
    background: rgba(255, 255, 255, 0.02);
}

#center_panel_chooser select {
    -webkit-appearance: none;
    cursor: pointer;
    width: 100%;
    padding: 3px 5px 2px 5px;
    background: transparent;
    -webkit-border-radius: 3px;
    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */
    background: rgba(0, 0, 0, .05) url(../image/select_dropdown_arrow.png) 90% 60% no-repeat;
    top: -1px;
    position: relative;
    color: #444;
    font-family: "HelveticaNeue-Medium", Helvetica, Arial, sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    border: solid 1px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}

#center_panel_chooser select:hover {
    background-color: rgba(255, 255, 255, .05);

}











/* Center Panel Header */



#center_panel_header h1 {
    text-align: center;
    font-size: 1.1em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    overflow: hidden;
    display: block;
    margin: 0 auto;
    color: #666;
    color: hsl(210, 10%, 40%);
}

#center_panel_header #filtersearch input {
    border: solid 1px hsl(210, 7%, 60%);
    border-top: solid 1px hsl(210, 10%, 50%);
}




/* Center Panel Toolbar */

#content_details .toolbar {
    border-bottom: solid 1px hsl(210, 10%, 90%);
    overflow: hidden;
    background: none repeat scroll 0 0 #EFF1F4;
}


#icon_layout {
    background: url("../image/icon_layout.png") no-repeat scroll center center transparent;
}

#table_layout {
    background: url("../image/table_layout.png") no-repeat scroll center center transparent;
}






/* Center Panel Content */

.center_panel_content {
    position: absolute;
    top: 33px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
    /* flexbox */
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */

    box-orient: vertical;
    flex-direction: column;
}

#icon_table {
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    overflow: auto;
}

.center_panel_content>div {
    position: relative;
    border-right: 0px
}


img.thumbnail {
    margin-right: 5px;
    border: 1px solid #bbb;
}





/* One Column Content */

#center_details {
    background: #C6CBD1;
    /* Old browsers */
    background-color: hsl(213, 14%, 82%);
    -webkit-border-radius: 4px;
    background-image: -moz-linear-gradient(center top, #C6CBD1 0%, #AAB1BA 100%);
    -webkit-border-radius: 4px;
    /* Saf3+, Chrome */
    -moz-border-radius: 4px;
    /* FF1+ */
    border-radius: 4px;
    /* Opera 10.5, IE 9 */


    border: solid 1px #AFB3B6;
    border: solid 1px hsl(210, 10%, 75%);
    ;
    margin-top: 20px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    /* FF3.5+ */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    /* Opera 10.5, IE 9.0 */

}

.one_column_content {
    padding: 20px;
    background-color: #F6F7F8;
}





/* One Column Header */


.one_column_header {
    background: hsl(215, 10%, 80%);
    /* Old browsers */
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* FF3.5+ */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Opera 10.5, IE 9.0 */

    overflow: hidden;
    position: relative;


    background-image: -moz-linear-gradient(top, hsl(210, 2%, 98%) 0%, hsl(210, 4%, 94%) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(210, 2%, 98%)), color-stop(100%, hsl(210, 4%, 94%)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, hsl(210, 2%, 98%) 0%, hsl(210, 4%, 94%) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, hsl(210, 2%, 98%) 0%, hsl(210, 4%, 94%) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, hsl(210, 2%, 98%) 0%, hsl(210, 4%, 94%) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F7FA', endColorstr='#E6EBF0', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, hsl(210, 2%, 98%) 0%, hsl(210, 4%, 94%) 100%);
    /* W3C */

    border-bottom: solid 1px hsl(210, 4%, 75%);
    min-height: 40px;
    clear: left;
}


.one_column_header #filtersearch {
    padding: 5px 0;

}


.one_column_header #filtersearch input {
    border: solid 1px rgba(0, 0, 0, .3);
    border-top: solid 1px rgba(0, 0, 0, .4);
    color: #333;
    box-sizing: border-box;
}




/* Thumbnails */

#dataIcons {
    list-style-type: none;
    margin: 0;
    top: 0;
    left: 0;
    position: relative;
    width: 100%;
}

#dataIcons div.image {
    width: var(--iconSize);
    height: var(--iconSize);
}

#dataIcons img {
    width: 100%;
    height: 100%;
    /* fit the image to container, regardless of aspect ratio */
    object-fit: contain;
    object-position: center top;
}

#dataIcons .ratingFilter_hidden {
    display: none;
}

#dataIcons .tagFilter_hidden {
    display: none;
}

#dataIcons .mapFilter_hidden {
    display: none;
}

#dataIcons .ui-selecting {
    background-color: hsl(0, 0%, 90%);
}

#dataIcons .fs-selected {
    background-color: #cddcfc;
    border: solid 1px #cddcfc;
}

#dataIcons .ui-selected {
    color: white;
    background-color: #3875d7;
    border: solid 1px #3875d7;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    /* FF3.5+ */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    /* Opera 10.5, IE 9.0 */
}

.thumb_size_slider {
    border: 1px solid #aaa;
    height: 6px;
    right: 25px;
    position: absolute !important;
    bottom: 8px;
    width: 120px;
    background: #eee;
}

.thumb_size_slider .ui-slider-handle {
    background: #727C86;
    border-radius: 3px;
}

/* disable transition delay on slider handles */
.ui-slider-handle.ui-state-default {
    transition-duration: 0s;
}

/* Style a <ul> as a Table or Icons, depending on class .tableLayout or .iconLayout */
.tableLayout {
    display: table;
    position: relative;
    width: 100%;
}

.tableLayout li {
    display: table-row;
}

.tableLayout li div {
    display: table-cell;
}

.tableLayout li {
    padding: 10px 0px;
    font-size: 1.2em;
    vertical-align: middle;
}

.tableLayout div.image {
    padding: 5px;
}

.tableLayout li:nth-child(2n) {
    background-color: #EFEFF0;
}

.tableLayout li:nth-child(2n) {
    background-color: #EFEFF0;
}

.tableLayout li.thead {
    height: 30px;
}

.element_sorter .clickable {
    cursor: pointer;
    background: url("../image/table_arrow_up_down.png") no-repeat scroll center left transparent;
    padding: 10px;
    padding-left: 20px;
}

.element_sorter .sorted-desc {
    background: url("../image/table_arrow_up.png") no-repeat scroll center left transparent;
}

.element_sorter .sorted-asc {
    background: url("../image/table_arrow_down.png") no-repeat scroll center left transparent;
}

.element_sorter .hidden_sort_text {
    display: none;
}

.iconLayout {
    height: 100%;
}

.iconLayout li {
    display: inline-block;
    background-color: hsl(0, 0%, 95%);
    margin: 5px;
    padding: 5px;
    background-color: #F2F2F2;
    border: 1px solid white;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
    float: left;
}

.iconLayout .desc,
.iconLayout .date,
.iconLayout .thead,
.iconLayout .sizeX,
.iconLayout .sizeY,
.iconLayout .sizeZ,
.iconLayout .sizeT {
    display: none;
}

/* Button Styles */
#layout_chooser {
    position: absolute;
    right: 20px;
    top: 4px;
    border: 1px solid #9EA5AC;
    background-color: #E3E5E7;
    border-radius: 4px;
    padding: 0px;
}

#layout_chooser button {
    width: 25px;
    height: 20px;
    border-left: 0px;
    border-bottom: 0px;
    border-top: 0px;
}

#icon_layout {
    border-right: 1px solid #9EA5AC;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

#table_layout {
    border-right: 0px solid #9EA5AC;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

#layout_chooser button.checked {
    background-color: #B2BDCB;
}





/*
	===============================================
	:: History
	===============================================
*/


#history_calendar {
    overflow: hidden;
    bottom: 0px;
}

.legend {
    font-size: 1.2em;
    margin: 5px;
    padding: 5px;
    display: inline-block;
}

/* Used in tag search - only */
.left_panel_inner {
    padding: 16px;
}

/*
	===============================================
	:: Search Page
	===============================================
*/

.search_panel {
    position: relative;
    padding: 0;
}

.search_panel_header {
    position: relative;
    padding: 10px 10px 0 10px;
}

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

.search_panel_header__text--title {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.search_panel_header__text--hints {
    float: right;
}

.search_tips__button {
    text-decoration: underline
}

.search_tips__image {
    vertical-align: middle;
}

.search_panel select {
    max-width: 55%;
}

#basic_search input.search {
    width: calc(100% - 65px);
    float: right;
}

#basic_search hr {
    clear: both;
    margin: 15px 0 10px 0;
}

#advanced_search input.advanced_search {
    width: calc(100% - 6px);
    /* padding & border = 6px */
    margin: 5px 0;
}

#advanced_search p {
    margin: 5px 0;
}

#advanced_search code {
    background: #fff;
    margin: 5px 0;
    padding: 3px;
    font-size: 110%;
}


/*#searching_form {*/
/*border-bottom: solid 1px hsl(210, 20%, 90%);*/
/*-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .3);*/

/*-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); !* Saf3.0+, Chrome *!*/
/*-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); !* FF3.5+ *!*/
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); !* Opera 10.5, IE 9.0 *!*/
/*}*/

#searchHints {
    position: relative;
    font-size: 120%;
    background: #fef69c;
    padding: 3px;
    border: solid #ddd 1px;
    margin-bottom: 10px;
}

#searchHints strong {
    display: block;
    width: 35px;
    float: left;
}

#searching input[type=text],
#searching textarea {
    width: 65%;
}

#startdateinput,
#enddateinput {
    width: 30% !important;
}

.clearDate {
    position: absolute;
    right: 5px;
    top: -5px;
}

.criteria {
    overflow: hidden;
}

ul.criteria li {
    list-style: none;
    float: left;
    margin: 0;
    margin-right: 5px;
    width: 30%;
    line-height: 1.9em;
    font-size: 1.1em;
}

ul.criteria_right li {
    width: 40%;
    float: right;
    clear: right;
}

ul.criteria_right input {
    margin-left: 20px;
}

.criteria input[type=checkbox] {
    display: inline-block;
    margin-right: 5px;
}

#searching input[type=submit] {
    float: right;
    margin-top: 2px;
}










/*
	===============================================
	:: Admin
	===============================================
*/







#webadmin_main_tabs {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;

    -webkit-border-top-left-radius: 4px;
    /* Saf3+, Chrome */
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    /* FF1+ */
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    /* Opera 10.5, IE 9 */
    border-top-right-radius: 4px;

    border-bottom: solid 1px hsl(210, 10%, 60%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    /* FF3.5+ */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Opera 10.5, IE 9.0 */

    background-image: -webkit-gradient(linear, left bottom, left top, from(hsl(212, 10%, 70%)), to(hsl(212, 10%, 80%)));

    background-image: -moz-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(212, 10%, 80%)), color-stop(100%, hsl(212, 10%, 70%)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B8C1CC', endColorstr='#A1A9B3', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* W3C */

}

#webadmin_main_tabs li {
    float: left;
    display: block;
    text-align: center;
    cursor: pointer;
    margin: 0;
}


#webadmin_main_tabs li:hover {
    background-color: hsl(210, 10%, 87%);
}


#webadmin_main_tabs li:first-child {
    border-right: solid 1px rgba(0, 0, 0, .1);
    -webkit-border-top-left-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius-topleft: 3px;
    /* FF1+ */
    border-top-left-radius: 3px;
    /* Opera 10.5, IE 9 */
}

#webadmin_main_tabs li:last-child {
    border-left: solid 1px rgba(255, 255, 255, .2);
    border-right: solid 1px rgba(0, 0, 0, .2);
}

#webadmin_main_tabs .ui-tabs-active {
    background: hsl(215, 10%, 80%);
    /* Old browsers */
    background-image: -moz-linear-gradient(top, hsl(210, 10%, 95%) 0%, hsl(210, 5%, 98%) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(210, 10%, 95%)), color-stop(100%, hsl(210, 5%, 98%)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, hsl(210, 10%, 95%) 0%, hsl(210, 5%, 98%) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, hsl(210, 10%, 95%) 0%, hsl(210, 5%, 98%) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, hsl(210, 10%, 95%) 0%, hsl(210, 5%, 98%) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F7FA', endColorstr='#F5F7FA', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, hsl(210, 2%, 98%) 0%, hsl(210, 4%, 94%) 100%);
    /* W3C */
}

#webadmin_main_tabs li a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    padding: 56px 18px 8px;
    font-size: 1em;
    font-weight: 600;
    color: hsl(210, 10%, 50%);
    display: block;
}

#Group_content,
#experimenters_content,
#drivespace_content {
    background-color: #f2f2f2;
    background-color: hsl(210, 10%, 97%);
}

#experimenters_tab a {
    background: url(../image/icon_scientist_36.png) center 40% no-repeat;
}

#groups_tab a {
    background: url(../image/icon_scientist_group_36.png) center 40% no-repeat;
}

#drivespace_tab a {
    background: url(../../webclient/image/icon_settings_drivespace.png) center 14px no-repeat;
}

#email_tab a {
    background: url(../../webclient/image/icon_settings_mail.png) center 14px no-repeat;
}


.one_column_header .btn {
    float: right;
    margin-top: 7px;
    margin-right: 7px;
}

.one_column_header .btn span {
    padding: .5em 1em;
    display: inline-block;
    font-size: 1.2em;
}













/*
	===============================================
	:: Personal Settings
	===============================================
*/


/* Settings Tabs */
#settings_tabs {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;

    -webkit-border-top-left-radius: 4px;
    /* Saf3+, Chrome */
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    /* FF1+ */
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    /* Opera 10.5, IE 9 */
    border-top-right-radius: 4px;

    border-bottom: solid 1px hsl(210, 10%, 60%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    /* FF3.5+ */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Opera 10.5, IE 9.0 */

    background-image: -webkit-gradient(linear, left bottom, left top, from(hsl(212, 10%, 70%)), to(hsl(212, 10%, 80%)));

    background-image: -moz-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(212, 10%, 80%)), color-stop(100%, hsl(212, 10%, 70%)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B8C1CC', endColorstr='#A1A9B3', GradientType=0);
    /* IE6-9 */
    background: linear-gradient(top, hsl(212, 10%, 80%) 0%, hsl(212, 10%, 70%) 100%);
    /* W3C */


}


#settings_tabs a {
    padding: 56px 18px 8px;
    color: hsl(212, 6%, 40%);
    font-size: 1em;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}


#settings_tabs .ui-tabs-active {
    background-color: #F6F7F8;
}

#settings_tabs .ui-tabs-active a {
    color: hsl(212, 9%, 30%);
    background-color: rgba(255, 255, 255, .3);
}

#settings_tabs li:hover {
    background-color: hsl(210, 10%, 87%);
}


#settings_tabs li:first-child {
    border-right: solid 1px rgba(0, 0, 0, .1);
    -webkit-border-top-left-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius-topleft: 3px;
    /* FF1+ */
    border-top-left-radius: 3px;
    /* Opera 10.5, IE 9 */
}

#settings_tabs li:last-child {
    border-left: solid 1px rgba(255, 255, 255, .2);
    border-right: solid 1px rgba(0, 0, 0, .2);
}


/* Individual Images */

#personal_settings_tab {
    background: url(../../webclient/image/icon_settings_user.png) center 14px no-repeat;
}

#group_settings_tab {
    background: url(../../webclient/image/icon_settings_groups.png) center 14px no-repeat;
}


#drivespace_settings_tab {
    background: url(../../webclient/image/icon_settings_drivespace.png) center 14px no-repeat;
}













/* Settings Content */


/* Personal Settings */

#personal_settings,
#drivespace_settings,
#groups_settings {
    background-color: #f2f2f2;
    background-color: hsl(210, 10%, 97%);
}

#personal_settings,
#drivespace_settings {
    padding: 20px !important;
}



#avatar {
    width: 30%;
    float: left;
    margin: 40px 20px;
}

#avatar img {
    background-color: #fff;
    background-color: hsl(210, 1%, 99%);
    border-top: solid 1px white;
    border-bottom: solid 1px rgba(0, 0, 0, .15);
    padding: 5px;
    max-width: 80%;
    max-height: 200px;
    -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .1);

    -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
    /* FF3.5+ */
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
    /* Opera 10.5, IE 9.0 */

    margin-bottom: 8px;
}

#avatar a,
#password_change a {
    font-size: 1.1em;
}

#avatar a:nth-of-type(1) {
    margin-left: 14px;
}

/* improve display of E.g. "group-name (rw----)" */
.chzn-results li {
    white-space: nowrap;
}

.chzn-results {
    max-height: 160px !important;
    display: block;
}

#password {
    position: relative;
}

#password_change {
    margin-top: 2px;
}

#password_change_message {
    font-size: 1.3em;
}


/* Group Settings */

#groups_settings .table_settings {
    width: 20px !important;
    text-align: center;
}

#groups_settings strong {
    padding-left: 5px;
    font-weight: bold;
}





/* Settings Form */

.settings_form {
    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */
    border-top: solid 1px rgba(0, 0, 0, .1);
    border: solid 1px rgba(0, 0, 0, .1);
    background-color: white;
    margin: 20px 0;
    padding: 20px;
}














/* Display Messages */


.center_message {
    display: block;
    width: 190px;
    padding-top: 120px;
    font-size: 1.6em;
    margin: 50px auto;
    text-align: center;
    color: hsl(210, 10%, 50%);
    text-shadow: 0 1px 0 white;
}

.message_nodata {
    background: url(../image/message_nodata.png) center top no-repeat;
}

.loading_center {
    width: 200px;
    margin: 50px auto;
    display: block;
    height: 200px;
    font-size: 1.2em;
    color: rgba(0, 0, 0, .5);
    text-align: center;
}

.loading_center img {
    padding: 40px;
    display: inline-block;
}

















/* ROGUE CSS */



div.plane_info {
    width: 100%;
    overflow: auto;
    background: white;
    border: solid #ccc 1px;
}

div.plane_info table div {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 1px 4px
}



.show_xml {
    color: #1B7BC7;
    cursor: pointer;
}






#dataTable img {
    /*border: 1px solid white;*/
    padding: 2px;
}





.hide {
    display: none !important;
}

.details {
    border-bottom: 1px solid #BBBBBB;
}


.box {
    float: left;
    margin: 15px 0 10px 0;
}

.link_box {
    border-top: 1px solid #BBBBBB;
}












.active-result em {
    text-decoration: underline;
}


div.paging {
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 10px 0px 30px 0px;
}

div.paging input.button_pagination {
    border: 0;
    background-color: transparent;
    color: #1b7bc7;
    padding: 0;
}

#spw {
    width: 100%;
    overflow: auto;
}

#spw table {
    background: #fff none repeat scroll 0 0;
    width: 0;
    table-layout: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Need these to preserve sticky th borders on scroll */
    border-collapse: separate;
    border-spacing: 0
}

#spw table th {
    vertical-align: middle;
    position: sticky;
    top: 0;
    left: 0;
    background: white;
    padding: 5px;
    z-index: 1;
}

#spw table thead th {
    border-bottom: 1px solid #ccc;
}

#spw table tbody th {
    border-right: 1px solid #ccc;
}

#spw table td {
    padding: 1px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
    position: relative;
}

#spw table td.placeholder {
    vertical-align: top;
}

#spw table td.ui-selecting {
    background-color: #87ABD2;
}

#spw table td.ui-selected {
    background-color: #87ABD2;
}

#spw table td.ui-selected img {
    border: solid 3px transparent;
}

.wellSize {
    position: relative;
    width: 96px;
}

.wellSize img {
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

.wellSize::before {
    height: 0px;
    content: "";
    display: block;
    /* padding-bottom: 75%; This aspectratio set in ome.plateview.js */
    box-sizing: border-box;
}

.wellLabel {
    display: none;
    position: absolute;
    background: #eee;
    padding: 2px;
    color: black;
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
}

.wellLabelOffset .wellLabel {
    top: auto;
    left: auto;
    bottom: 100%;
    right: 100%;
}

.well:hover .wellLabel {
    display: block;
}


#content_details .fillSpace {
    position: absolute;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.zoomLabel {
    font-size: 12px;
    margin-top: 6px;
    margin-left: 9px;
    display: block;
    opacity: 0.8;
}

.wellImages {
    border-top: solid 1px #bbb;
}

.wellImages li {
    margin: 5px;
    cursor: pointer;
}

#wellImages li {
    display: inline-block;
}

#wellImages ul,
#wellImages h1 {
    margin: 5px;
}

#wellImages .ui-selected {
    background-color: #87ABD2;
}

#wellImages .ui-selected img {
    border: solid transparent 4px;
}

.wellImagesLabel {
    width: 30px;
    vertical-align: middle;
}

#wellImages td {
    border-bottom: solid #bbb 1px;
}

#well_birds_eye img {
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid black 1px;
    background: #bbb;
    cursor: pointer;
}

#well_birds_eye .ui-selected {
    width: 6px;
    height: 6px;
    border: solid 3px #87ABD2;
    z-index: 10;
}

#wellImagesContainer span {
    font-size: 12px;
}


/** Annotation Styles **/



img.thumbnail {
    margin-right: 5px;
    border: 1px solid #bbb;
}

select.existing {
    width: 300px;
}


div.plane_info {
    width: 100%;
    overflow: auto;
    border: solid 5px red;
    background: white;
    border: solid #ccc 1px;
}

div.plane_info table div {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 1px 4px
}


.show_xml {
    color: #1B7BC7;
    cursor: pointer;
}


/** tooltip **/

.ui-tooltip {
    position: absolute;
    background: #000;
    color: #bbb;
    z-index: 3000;
    border: solid 1px black;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 3px 3px 3px rgba(0, 0, 0, .3);

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, .3);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, .3);
    /* FF3.5+ */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 3px 3px 3px rgba(0, 0, 0, .3));
    /* Opera 10.5, IE 9.0 */


    -webkit-border-radius: 3px;

    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */

    line-height: 1.4em;
    font-size: 1.1em;
    padding: 5px;
    width: 250px;
}

.ui-tooltip p {
    font-size: 1.0em;
}

.ui-tooltip b {
    font-weight: bold;
    color: white;
}

/* tooltip plugin */
.ui-tooltip h3,
.ui-tooltip div {
    margin: 0;
    word-wrap: break-word;
}




/** Chgrp form **/

#chgrp-form .group_option {
    padding: 5px;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1.4em;
    -webkit-border-radius: 3px;
    /* Saf3+, Chrome */
    -moz-border-radius: 3px;
    /* FF1+ */
    border-radius: 3px;
    /* Opera 10.5, IE 9 */
    border: solid 1px transparent;
}

#chgrp-form .selected {
    background: hsl(210, 30%, 80%);
    color: hsl(210, 20%, 30%);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    border: solid 1px hsl(210, 20%, 60%);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */

    background: hsl(210, 30%, 80%);
    /* Old browsers */
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera11.10+ */
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */

    background: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C */

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Saf3.0+, Chrome */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* FF3.5+ */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* Opera 10.5, IE 9.0 */


}

/* Figure scripts dialog */
.rowDragHandle {
    float: left;
    visibility: hidden;
    position: relative;
    left: -5px;
    width: 11px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    background: #ddd url(../image/drag_handle_arrows_up-down.png) no-repeat center center;
}

tr.figImageData:hover .rowDragHandle {
    visibility: visible;
}



input#id_tag_filter {
    background: #fff url(../image/search.png) no-repeat right center;
    width: 334px;
    height: 15px;
    margin-bottom: 0;
    border: 1px solid #9ea5ac;
}

input#id_tag {
    margin-top: 0;
    height: 1.1em;
    float: left;
    width: 200px;
    vertical-align: top;
}

textarea#tag_description {
    width: 464px;
    height: 1.1em;
    margin: 0 5px 0 10px;
    vertical-align: top;
}

button#id_add_new_tag {
    vertical-align: top;
    margin-top: 0px;
    height: 25px;
}

div#id_move_tags {
    width: 40px;
    padding: 120px 0 40px;
    margin: 10px;
    text-align: center;
}

div#id_move_tags button {
    width: 25px;
    height: 25px;
    margin-bottom: 10px;
    border: 1px solid #9ea5ac;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
}

div.tag_selection_container {
    display: flex;
}

/* wrapper is a hack to make overflow:hidden work with .selectable()
   without it items become deselected when scrollbar is clicked */
div.tag_selection_wrapper {
    height: 200px;
    width: 335px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: larger;
    border: 1px solid #9ea5ac;
    padding: 3px;
    padding-right: 0;
    background-color: white;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

div.tag_selection_wrapper.filtered {
    height: 175px;
}

div.tag_selection {
    overflow: visible;
}

div.tag_selection div {
    white-space: nowrap;
    padding-left: 22px;
    padding-top: 2px;
    height: 1.5em;
}

div.tag_selection div.alltags-tagset {
    background: url(../image/left_sidebar_icon_tags.png) no-repeat left center;
}

div.tag_selection div.alltags-tag {
    background: url(../image/left_sidebar_icon_tag.png) no-repeat left center;
}

div.tag_selection div.alltags-childtag {
    background: url(../image/left_sidebar_icon_tag.png) no-repeat left center;
    margin-left: 20px;
}

div.tag_selection div.alltags-locked {
    background: url(../image/icon_tag_unremovable.png) no-repeat left center;
}

div#id_selected_tags div.alltags-childtag {
    margin-left: 0;
}

div.tag_selection div.ui-selected {
    background-color: hsl(215, 20%, 75%) !important;
}

div.tag_selection div:hover {
    background-color: #f0f0f0;
}

div.tag_selection div.filtered {
    display: none;
}

div.tag_selection span.alltags-take {
    background: url(../image/icon-add-to-tags.png) no-repeat center center;
    float: relative;
    top: 1px;
    right: -322px;
    width: 20px;
    height: 16px;
    vertical-align: middle;
}

div.tag_selection div.owner-tagged span.alltags-take {
    background-image: url(../image/icon-added-to-tags.png);
}

.tagset-title {
    color: #5d8499;
    font-weight: normal;
}

/* TODO This does not correspond to any element as the id is never applied to anything */
/*#id_tag_info_button {
    float: right;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    background: hsl(210,8%,80%);
    border: solid 1px hsl(210,8%,70%);
    margin: 3px 5px 0 0;
}*/

/* #Progress Bar
================================================== */
.ui-progressbar {
    background-color: #ccc;
    height: 14px !important;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding-right: 1px;
    width: 68px;
}

.progress-striped {
    -moz-background-size: 30px 30px;
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .5) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%,
            transparent 75%, transparent);
    background-image: -webkit-gradient(linear, left top, right bottom,
            color-stop(.25, rgba(255, 255, 255, .5)), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .5)),
            color-stop(.75, rgba(255, 255, 255, .5)), color-stop(.75, transparent),
            to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .5) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%,
            transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .5) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%,
            transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .5) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%,
            transparent 75%, transparent);
    -webkit-animation: animate-stripes 3s linear infinite;
    -moz-animation: animate-stripes 3s linear infinite;

}

/*animates the stripes*/
@-moz-keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

@-webkit-keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

.ui-progressbar-value {
    height: 15px !important;
    background-color: #476a93;
    background-image: -moz-linear-gradient(top, #98b8d7, #476a9e);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#98b8d7), to(#476a9e));
    background-image: -webkit-linear-gradient(top, #98b8d7, #476a9e);
    background-image: linear-gradient(to bottom, #98b8d7, #476a9e);
    background-repeat: repeat-x;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff80a1a2', endColorstr='#ff547879', GradientType=0);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-right: 1px solid #628c51;
    border-left: 1px solid #628c51;
    border-radius: 1px;
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0, 0.2);
    height: 100%;
    -moz-transition: width .4s ease-in-out;
    -webkit-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
    width: 0;
}

#add_tags_progress {
    margin: 15px 0 0 10px;
}

#add_tags_progress>div {
    float: left;
}

#add_tags_progress .progress-label {
    margin-top: 2px;
    width: 95px;
    text-align: left;
}

#add_tags_progress .progress-striped {
    width: 200px;
    margin: 0 10px;
}

/* tooltip formatting */
#tooltip hr {
    border: 0;
    height: 1px;
    background-color: #aaaaaa;
}

#tooltip img {
    margin: 3px 10px 3px 5px;
    vertical-align: middle;
}

#tooltip {
    color: #ffffff;
}

/* disabled dialog button */
.ui-dialog .ui-dialog-buttonpane button.ui-state-disabled,
.ui-dialog .ui-dialog-buttonpane button.ui-state-disabled:hover {
    background: hsl(210, 8%, 80%);
    color: gray;
}

/* placeholders in input boxes */
.standard_form input[type=text].placeholder,
.standard_form textarea.placeholder {
    color: #aaa;
}