
/* Text on the top header */
span.myClass {display:table; margin:0 auto; 
 font-size: 20px; line-height: 50px; text-align: center;
 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 padding: 0 0px; overflow: hidden; color: white; width:100px; height: 100%;
}

.shiny-output-error-validation { color: red }

#DataTables_Table_0_filter { float: left }
.dataTables_filter input { margin-left: 0.5em; width: 450px}


.shiny-notification {
  position: fixed; opacity: 1; font-size: 30px; 
  top: 35%; left: 24%; height: 150px; width: 650px
}

/* Animation slider. */
div.form-group.shiny-input-container { width: 95% }

input[id='search'] { height: 28px; width: 500px; margin: 3px; padding: 0; font-size: inherit; border: 1px solid #CCCCCC }

label[for='search'] { display: table-cell; text-align: center; vertical-align: middle;   }

.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #d73925;
}

/* Scroll horizontally. */
/* .same-row {max-width: 2000px; display: table-cell; padding-right: 10px;} */

/* Padding of columns. */
.col-sm-9 {position: relative; min-height: 1px; padding-right: 6px; padding-left: 2px;}
.col-sm-3 {position: relative; min-height: 1px; padding-right: 2px; padding-left: 0px;}
.col-sm-12 {position: relative; min-height: 1px; padding-right: 2px; padding-left: 2px;}

/* Padding of box. */
.box-body { padding: 2px;}

.box.box-solid.box-primary>.box-header { color: #fff; background: #3c8dbc; background-color: #3c8dbc;}

.btn.btn-primary.action-button.dropdown-toggle.shiny-bound-input {background-color:#f4f4f4;border-color:#ddd;color:#444}


/* Tab colors. */

/* All tabs. */
/* .tabbable > .nav > li > a {background-color: grey; color:black} */
/* .tabbable > .nav > li > a[data-value='shm'] {background-color: #2471A3; color:white} */
.tabbable > .nav > li > a {background-color:#337ab7; color:white}

.tabbable > .nav > li[class=active] > a {background-color:#337ab7; color:white}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {border-top-color:red;}

.tabbable > ul[id='shmMhNet'] > li > a {background-color:#54a1d2; color:white}

/* Avoid overflowing in fluidrow and splitLayout. */
.shiny-split-layout > div {overflow: visible;}

.container-fluid {
  padding-right: 5px; padding-left: 5px;
}

/*Center image, video. */
img, video, iframe {
  display: block; margin: auto;
}


/* Avoid shiny elements overlap. */
[id='dropdown-menu-shmAll-dropdown'] {
  position: absolute
}


/* selectizeInput */
.selectize-dropdown.multi.form-control.shinyjs-resettable.plugin-selectize-plugin-a11y {
  position: static; z-index: 5
}

/*All genes in dropdown list.*/
.selectize-dropdown-content {
  position:absolute; z-index:5; background:#f6f6f6; width:100%
}

/* Search button. Dots are special characters in CSS, and should be escaped. So #sear-ids.but or [id='sear-ids.but'] is right. 

[id='sear-ids.but'] {
  background-color: #bec5cb;
  margin-top: -15px; margin-bottom: 5px;
}

*/

/*Avoid the top of navbarPage covering other elements. */
.navbar.navbar-default.navbar-static-top {
  z-index:0
}

/* Selected items in search box. */
.selectize-input.items.not-full.has-options has-items {
  display:table-cell
}

/* Top search box in the DEG table. */
div.form-group.has-feedback {
  z-index:0 !important
}


/* Main SHMs. */

#shmAll-shm img {
  max-width:none
}

/*Data table.

table#DataTables_Table_0 {
  position:sticky !important
}

*/

/*Content of dropdown menu.*/
#dropdown-menu-shmAll-scaleDrop, #dropdown-menu-shmAll-scroDrop, #dropdown-menu-shmAll-colDrop {
  width:500px !important
}

#dropdown-menu-shmAll-togDrop {
 width:500px !important; margin-left:-300px
}

#dropdown-menu-shmAll-titDrop {
 width:500px !important; margin-left:-60px
}

/*Basic parameters above SHMs. */
div[data-value='Basic'] .row {
  margin-top:-15px; margin-bottom:5px
}

/*Top margin of navbar. 
div[data-value='shm1'] > navbar.navbar-default.navbar-static-top > container-fluid div.navbar-header ul.nav.navbar-nav {
  margin-top:-10px
}
*/

/* Customized tooltip. */
.tp {
  width: 100%;
  width: -moz-available;          /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  width: fill-available;
  position: relative;
  display: inline-block;
  border-bottom: 0px dotted black;
}

/* Tooltip arrow. */
.tp .tpt::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color:  black transparent transparent transparent; /* Affect arrow direction. */
}

/* Tooltip speed. */
.tp .tpt {
  visibility: hidden;
  width: auto;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 80%;
  left: 30%;
  margin-left: -60px;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0; transition: opacity 1s;
}

.tp:hover .tpt {
  visibility: visible;
  opacity: 1;
} 

/* Suppress tooltip overflowing. */
span {
    display: inline-block; white-space: normal
}

/* plotOutput images take all available space in column/div. 
#shmAll-shm.img, #barSHM {
  max-width: 100%; width: 100%; height: auto
}
*/

/*
#shmAll-ggly iframe {
  max-width: 100%; width: 100%; height: 100%
}
*/

/* Full-screen SHMs takes all space. */
#barSHM:-webkit-full-screen {
  height: 100%;width: 100%; margin: 0;
  overflow-x: scroll;overflow-y: scroll;overflow:auto;
  background-color: white
}
#barSHM:-ms-fullscreen {
  height: 100%;width: 100%;
  overflow-x: scroll;overflow-y: scroll;overflow:auto;
  background-color: white
}
#barSHM:fullscreen {
  height: 100%;width: 100%;
  overflow-x: scroll;overflow-y: scroll;overflow:auto;
  background-color: white
}

/* Modal dialog in the upload tab. */
#datFormat img {
  width: 1400px
}

#datFormat .modal-dialog {
  width: 100%; height: 100%; margin-left: 5px; margin-right: 5px
}


/* Scrolling bars in SHM box. 
#barSHM div:nth-child(2), #barSHM div:nth-child(4) {
  overflow-y: auto; overflow-x: auto; height: auto;
}
*/

#shmAll-ggly {
  overflow: scroll
}

/*Image gallery in landing page. */

#brainHum img, #mouse img, #chicken img, #organArab img, #shootArab img, #rootArab img, #stageArab img, #clpRice img {
  transition: transform linear 0.5s; transition-delay: 0.5s;
}

#brainHum:hover, #mouse:hover, #chicken:hover, #organArab:hover, #shootArab:hover, #rootArab:hover, #stageArab:hover, #clpRice:hover {
  z-index: 5
}

#brainHum img:hover, #organArab img:hover, #stageArab img:hover, #clpRice img:hover {
  transform: scale(3); transform-origin: left;
}

#shootArab img:hover, #mouse img:hover {
  transform: scale(3); transform-origin: center;
}
          
#chicken img:hover, #rootArab img:hover {
  transform: scale(3); transform-origin: right;
}

/*HTML file in About. */
body { text-align: justify }


button[id='sear-sch.sgl.but'], button[id='sear-sch.mul.but'], button[id='deg-deg-sch.sgl.but'], button[id='deg-deg-sch.mul.but'], button[id='dat-dat.all.but'], a[id='shmAll-dld.shm'], button[id='shmAll-rematch-match'], button[id='shmAll-val.lgd'] {
 margin-top:2px;margin-bottom:-10px;margin-left:20px;padding-top:2px;padding-bottom:2px;background-color:#ddd
}

/*tooltip in shinyBS. */
div[class='tooltip-inner'] {
  text-align: left
}




