/* 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 }

section { font-weight: bold; padding-top: 5px; padding-bottom: 5px }

#tpExprViewTitle { 
        background-color: #eee;
        padding: 5px;
        height: 25px;
        /*border-bottom: 1px solid black; */
}

#tpExprView { 
        position: absolute;
        z-index: 100;
        display: block;
        background-color: white;
        top: 1%;
        left: 1%;
        height: 99%;
        width: 99%;
        border: 1px solid grey;
}

#tpGeneExprMetaLabel {
        margin-left: 6px;
        margin-right: 6px;
}

#tpExprViewPlot {
        display:flex;
        flex-direction: row;
        flex-flow: wrap;
        height:100%;
        padding-top:10px;
        overflow: scroll;
}

#tpExprViewContent {
        padding: 6px;
        height: 100%;
}

#tpGeneExprLabel {
        margin-right: 6px;
}

.tpTitle {
        z-index: 100;
}

.tpGeneExprCombo {
        margin-left: 6px;
        margin-right: 6px;
}

/* selectize dropdown triangle is black by default, make light grey like chosen's triangle */
.selectize-control.single .selectize-input:after {
        border-color: #888 transparent transparent transparent;
}

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

.tpDatasetPane { 
        padding: 5px !important; 
        padding-left: 10px !important; 
        overflow: hidden;
        line-height: 120%; 
}

#mpTitle {
    cursor : default;
    left : 8px;
    width : max-content;
    display : block;
    position : absolute;
    font-size : 16px;
    color: white;
    text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

.sliderContainer {
        position : absolute;
        display: grid;
        grid-template-columns: 45px 120px 15px;
        background: rgba(255,255,255,0.5);
}

.sliderLabel {
    font-size: 11px;
    z-index: 10;
    font-weight: bold;
}

.tpLegend { font-size:13px; /* border: 2px solid transparent; */ cursor:default; word-wrap: break-word; clear:both}
.tpLegendHl { background-color: #ccc; color: black; }
.tpHint { font-weight:normal; line-height:1.4; font-size: 80%; margin-top:4px}
#tpLegendHeader { background-color:#eee; color: #777; margin-top: 2px}
#tpLegendTitle { font-weight: bold }
#tpLegendSubTitle { font-size: 80%; font-style: italic }
#tpLegendCol1 { padding-left: 1px; vertical-align: middle}
#tpLegendCol2 { float: right; padding-right: 2px; padding-top: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} 
.tpLegend .tpLegendCheckbox { margin-right: 2px; margin-top: 2px}
.tpGrey { color: #bbb }

#tpLegendColorChecked,
#tpLegendAll,
#tpLegendNone,
#tpLegendInvert,
#tpLegendNotNull {
  font-size: 14px;
  margin: 1px 1px;
} 

.ui-helper-reset { font-size: 12px}
.ui-tabs { padding: 0 }
.ui-tabs { padding: 0 }
.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; padding:0} /* for marker panels */
.ui-tabs-anchor { padding: 3px }
.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: 24px; top: 1px; margin-right: 8px; border-radius: 4px; padding-top: 4px }
.tpDialogInput { margin-left: 12px; margin-top: 5px; margin-bottom: 12px; }
#tpDialog { z-index: 1001; }}

.tpIconButton { 
        padding: 1px 2px 1px 2px; 
        border-radius: 0; 
        height:28px; 
        width: 28px; 
        cursor: default
}

.tpRibbonButton {
        background-color: #ccc;
        padding:  1px 2px 1px 2px; 
        border-radius: 4px;
        height: 24px;
        border: 1px solid #c5c5c5;
        vertical-align: top;
        text-align: center;
        margin-right: 8px;
        top: 3px;
        position: relative;
        padding-left: 4px;
        padding-right: 4px;
}

.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,
.tpDatasetPane a { 
        text-decoration: underline; 
        color: #0000EE; 
        cursor: pointer; 
}

.tpSameLink {
    text-decoration: underline; 
    cursor: pointer; 
    color: darkgrey; 
    float: right
}

.tpDatasetPane {
        padding-top: 10px !important;
        border-radius: 4px;
}

.tpDatasetPane h4 {
        margin-top: 0;
}

/* modify bootstrap tooltip defaults */
.tooltip .tooltip-inner { 
        min-width: 220px; 
        border-radius: 0; 
        background-opacity: 50%;
        text-align: left
}

 .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;
}

/* expression progress bar only */
.ui-progressbar {
        position: relative;
}
.progress-label {
        position: absolute;
        left: 50%;
        top: 4px;
        font-weight: bold;
        /*text-shadow: 1px 1px 0 #fff;*/
}


.context-menu-item { 
        font-size: 13px; 
        padding: 3px 
}

.contextmenu-customwidth { 
        width: 200px !important; 
        min-width: 200px !important
}

/* .tpGeneTable { 
        table-layout: fixed; 
        white-space: nowrap; 
        border-collapse:collapse 
}
*/

.tpGeneBarCell { 
        font-size: 12px; 
        color: black; 
        padding-left:1px; 
        padding-right:1px; 
        border: 1px solid #AAA;
        background: #F6;
        /*color:#AAAAAA; */
        display: inline-block;
}

.tpGeneBarCellSelected { 
        outline: 1px solid black 
}

#tpPeakListTitle { 
        padding-top: 8px;
        padding-bottom: 6px;
        padding-left: 3px;
}

#tpPeakList { 
        border-top: 1px solid #CCC; 
        border-bottom: 1px solid #CCC; 
        border-left: 1px solid #CCC; 
        margin-left: 4px;
        padding: 3px;
        padding-left: 4px;
        background-color: #EEE;
        height: 30%;
        overflow-y: scroll;
}

.tpPeak > label {
        font-weight: normal;
}

#tpPeakList > div { 
        background-color: #EEE;
}

input[type=checkbox], input[type=radio] {
        vertical-align : -2px; /* https://stackoverflow.com/a/2806786/233871 */
}


.tpSidebarHeader { font-weight: bold; padding-left: 4px; font-size: 16px; padding-top: 4px; height: 25px; background-color: white; text-align: center}

#tpLeftSidebar { 
        border-right: 1px solid #D7D7D7; 
        height: 100%
}
#tpLeftSidebar .ui-tabs-anchor {
        /* jquery UI tabs label */
        font-size: 14px
}

#tpSideMeta { padding-left: 2px}

#tpMetaPanel { 
        background-color: white;
        height: 100%;
        overflow-y: auto;
}

#tpLegendRows {
        width: 100%;
        overflow-y: auto;
        /* height: 100%; */
}

#tpLegendContent { 
        width: 100%;
        height: 100%;
        overflow-y: scroll;
}

#tpLeftTabs { 
        border: 0; 
        height: 100%;
}

#tpGeneTab, #tpAnnotTab, #tpLayoutTab { 
        border-top: 1px solid #AAA;
        padding:0;
        padding-top: 5px;
        height: 100%;
        overflow-y: auto;
}

.tpMetaBox { font-size: 13px; cursor:default; overflow:hidden }
.tpMetaHover { 
        color: white; 
        background-color: #333 !important;
}
.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; 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; }
/* bootstraps badges are too dark */
.list-group-item.active>.badge { background-color: darkgrey; color:white }
/* 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} 

.tpLeftSideItem { 
        display:inline-block; 
        white-space: nowrap;
        width:100%
}
.tpLeftSideItem > label { 
        margin-right: 7px; 
        display: inline; 
        display:block; 
        margin-bottom:8px; 
        padding-top: 8px;
        padding-left:4px
} 
#tpLayoutCombo_chosen {
        width:100%;
        padding-left:4px;
        padding-right:2px;
}

.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: 3px 3px;
        padding-left: 5px;
        overflow: visible; /* grrr!! otherwise baseline is ignored in tpToolBarItem */
        min-height: 0px;
}
#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: transparent; 
        border:0;
        color : black;
}

.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 ------- */

.ui-resizable-n {
        cursor : row-resize;
}
.ui-resizable-handle:hover {
        opacity : 0.5;
        background-color: grey;

}

#tpOpenDialogTabs > ul > li  {
        /*  !important here is the right choice. cannot use ID, cannot get specificty high enough with classes
        // Read: https://css-tricks.com/when-using-important-is-the-right-choice/ */
        border: 1px solid #D7D7D7 !important; 
        border-radius: 4px !important ;
        font-size: 14px !important; 
        font-weight: bold !important;
        line-height: 120% !important; 
}

.tpDatasetTab.ui-tabs-anchor{ 
        /*  !important here is the right choice. cannot use ID, cannot get specificty high enough with classes
        // Read: https://css-tricks.com/when-using-important-is-the-right-choice/ */
        overflow:hidden !important; 
        padding: 5px !important; 
}


/* obscure bugfix: https://stackoverflow.com/questions/31584544/jquery-ui-dialog-on-resizing-shrinks-the-content-of-the-dialog */
.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
}

/* for google material icons, http://google.github.io/material-design-icons/#icon-font-for-the-web */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(MaterialIcons-Regular.woff2) format('woff2'),
    url(MaterialIcons-Regular.woff) format('woff'),
    url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}