/* tsneViewer.js class definitions */
/* * {padding: 0; margin: 0} */ /* important, otherwise precise placement is impossible */ 
/* body { font-family: Roboto, sans-serif } */
body { font-family: Arial,Helvetica,sans-serif; overflow:hidden; line-height:1.0}
canvas { user-select: none }

#tpLegendBar { cursor:default; overflow-y: scroll; padding-left: 2px; border-left: 1px solid #D7D7D7; height:100%}

.tpLegend { font-size:13px; /* border: 2px solid transparent; */ cursor:default; word-wrap: break-word; clear:both}
.tpHint { font-weight:normal; line-height:1.4; font-size: 80%}
#tpLegendHeader { background-color:#eee; color: #777 }
#tpLegendCol1 { padding-left: 2px}
#tpLegendCol2 { float: right; padding-right: 2px}
.tpLegendSelect { outline: 2px solid black }
.tpLegendLabel { display:inline; user-select: none; }
/*.tpLegendCount { display:inline-block; position: absolute; right: 4px; color: #888} */
.tpLegendCount { display:inline-block; float: right; color: #888} 
.tpGrey { color: #bbb }

.ui-helper-reset { font-size: 12px}
.ui-tabs { padding: 0 !important}
.ui-tabs { padding:0 !important}
.ui-tabs-nav { border: 0 } /* color control should not be separated from tabs */
.ui-tabs .ui-tabs-panel { padding-top:5px; border:1px solid lightgray !important; padding:0} /* for marker panels */
.ui-tabs-anchor { padding: 3px !important}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 3px }
.tab-pane { padding: .4em 1em; border: 1px solid lightgrey }
.ui-corner-all { border-radius: 0px } /* dialogs */
#tpOpenDatasetButton { border-radius: 4px }
.ui-menu-item { font-size:13px }
.ui-menu .ui-menu-item-wrapper { padding: 1px 1em 1px .4em; }
.ui-tooltip { font-size: 13px }
#tpButtonInfo { height: 25px; top: 2px; margin-right: 8px; width: 40px; border-radius: 4px }

.tpIconButton { padding: 1px 2px 1px 2px; border-radius: 0; height:28px; width: 28px; cursor: default}
.tpClicked { background-color: #AAA }
.tpClicked:hover { background-color: #AAA }
.btn-primary.load-dataset {float: right; margin-left: 10px; color: white; font-size: 12px; margin-top: -4px;}
.list-group-item.active>.btn-primary {color: #337ab7;background-color: #fff;}
.list-group-item .badge {margin-top: -2px;}

.link { text-decoration: underline; color: #0000EE; cursor: pointer; }

/* modify bootstrap tooltip defaults */
.tooltip-inner { min-width: 220px; border-radius: 0}

 .ui-widget-header { background: white} 
.ui-state-active { background: green }

.ui-progressbar { position: relative; }
.ui-progressbar-value { background-color: #888 }

.tpProgressLabel {
    position: absolute;
    left: 40%;
    top: 4px;
    font-weight: bold;
}

.context-menu-item { font-size: 13px; padding: 3px }
.contextmenu-customwidth { width: 200px !important; min-width: 200px !important}
.tpGeneBarCell { font-size: 12px; width:58px; color: black; padding-left:1px; padding-right:1px; border: 1px solid #AAA; max-width: 80px; background: #DDDDDD; color:#AAAAAA }
.tpGeneBarCellSelected { outline: 2px solid black}
#tpGeneTable { table-layout: fixed; background-color: #EEE; white-space: nowrap; border-collapse:collapse }

.tpSidebarHeader { font-weight: bold; padding-left: 4px; font-size: 16px; padding-top: 4px; height: 25px; background-color: white; text-align: center}
#tpLeftSidebar { overflow-y:scroll; border-right: 1px solid #D7D7D7; height: 100%}
#tpSideMeta { padding-left: 2px}
#tpMetaPanel { background-color: white}
#tpLeftTabs { border: 0}
#tpGeneTab, #tpAnnotTab { border-top: 1px solid #AAA; padding:0; padding-top: 5px }

.tpMetaBox { font-size: 13px; cursor:default; overflow:hidden }
.tpMetaLabel { font-weight: bold; padding-left: 2px}
.tpMetaLabelGrey { color: #666666}
.tpMetaMultiVal { font-style: italic; color: gray }
.tpMetaHistLabel { text-decoration: underline; color: blue }
.tpMetaValue { height: 1.3em; margin-left: 8px; padding-left: 3px; background-color:#EEE; }
.tpMetaSelect { outline: 2px solid black; background-color: #DEDEDE }
.tpMetaValueSelect { background-color: #CCC}
.tpMetaPerc { color:grey; float:right }
.tpMetaSpark { float:right }

#tpMetaTip { padding: 2px; border: 1px solid grey; background: white; display: none; position: absolute}
.tpMetaTipBar { display: inline-block; position: absolute; left:0; background-color: #AAAAAA; z-index: 2 }
.tpMetaTipPerc { display: inline-block; position: relative; left:0; z-index: 3; }
.tpMetaTipName { display: inline-block; position: relative; left:20px; z-index: 3; }

/* #tpSelectBox { border: 1px dotted black; } */

button { line-height: 12px }

.btn-default { background: linear-gradient(#fff 20%, #f7f7f7 60%, #f5f5f5 100%) }

#tpButtonBar {display: block; }
.tpButton { border-radius: 0; font-size: 15px; display: inline-block; background-color: #f6f6f6; border: 1px solid #c5c5c5; margin: 1px 3px 1px 1px; padding: 1px 3px 1px 3px; cursor:default; vertical-align: middle; user-select: none}
.tpButton:active { background-color: #888; }
.tpButton active { background-color: #888; }
.tpButton:hover { background-color: #eee }

.tpButtonInactive { background-color: #EEE; user-select: none; color:#AAA; cursor:default}

.tpMenu { z-index: 999; background: white; display:none; position:absolute}

.sp-replacer { height: 17px; width: 18px; border: none; padding: 0px; margin-right: 5px; background-color: white; vertical-align: top }
.sp-preview { height: 17px; width: 18px; border: none }
.sp-dd { line-height: 11px; display:none }

/* make bootstrap's navbar smaller */
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
/* bootstrap's small buttons have a lot of padding, for the toolbar, that's too much */
.noPad {padding:0 2 0 2}

/* make the navbar dividers smaller */
.half-rule { 
    margin-left: 0;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
}

#tpToolBar { margin-left: 5px; margin-top: 1px}

#tpCanvas { }

.tpToolBarItem { display:inline-block; white-space: nowrap }
.tpToolBarItem > label { margin-right: 7px; display: inline} 

.tpCombo { display: inline-block} 



/* adapt the chosen.js style a little */
.chosen-container-single .chosen-single { border-radius: 0; }
.tpCombo > a { border-radius: 0;}


/* same for select2 */
.select2-container .select2-selection--single { 
        border-radius: 0;
        background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
        padding: 2px
}
/* and selectize */
.selectize-input {
        border-radius: 0;
        background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
        padding: 2px;
        padding-left: 5px;
        overflow: visible; /* grrr!! otherwise baseline is ignored in tpToolBarItem */
}
#tpToolBar > div.selectize-control.tpCombo.single {
        border-color: #aaaaaa;
        display: inline-block;
}

/* for links in the open dataset dialog */
.ui-widget-content .tab-content a { color: blue !important; text-decoration: underline; }

/* make bootstrap look more like jquery tabs */
.nav-tabs>li.active>a { background-color: lightblue}

.gradientBackground { background-color: #f6f6f6 }

.selectize-control.single .selectize-input { background: none; background-color: #f6f6f6 }
.selectize-input { background: none; background-color: #f6f6f6; box-shadow: none }

/* make bootstrap's navbar show menus on mouse hover */
/* ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } */

/* flying-sheep's suggestions */
.ui-dialog-titlebar { border: none }
a.list-group-item { background-color: #EEE }
.nav-tabs > li > a { border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #EEE; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom:4px}
.nav-tabs > li.active > a { background-color: #337ab7; color: white; border: 1px solid #EEE }
/* .nav-tabs > li { background-color: #E9E9E9 } */
.ui-corner-all { border-radius: 4px }
.nav-tabs > li > a:hover { background-color: #EEE;}
.nav-tabs > li.active > a:hover  { background-color: #397cba; color: white }
.nav-tabs > li.active > a:focus  { background-color: #397cba; color: white }
.nav-tabs { border-bottom: none}

/*
.nav-tabs>li>a:hover { background-color: #DDD; color: black ; }
.nav-tabs>li.active>a:hover { background-color: #DDD; color: black ; }
.nav-tabs>li>a:focus { background-color: #DDD; color: black ; }
.nav-tabs>li.active>a:focus { background-color: #DDD; color: black ; }
*/

.chosen-container-single .chosen-single { box-shadow: none; background: none; background-color: #f6f6f6 }

/* ----- FOR SORTTABLE.JS ------- */
th[role=columnheader]:not(.no-sort) {
        cursor: pointer;
}

th[role=columnheader]:not(.no-sort):after {
        content: '';
        float: right;
        margin-top: 7px;
        border-width: 0 4px 4px;
        border-style: solid;
        border-color: #404040 transparent;
        visibility: hidden;
        opacity: 0;
        -ms-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
}

th[aria-sort=ascending]:not(.no-sort):after {
        border-bottom: none;
        border-width: 4px 4px 0;
}

th[aria-sort]:not(.no-sort):after {
        visibility: visible;
        opacity: 0.4;
}

th[role=columnheader]:not(.no-sort):hover:after {
        visibility: visible;
        opacity: 1;
}
/* END: ----- FOR SORTTABLE.JS ------- */