/* architecture */
.master-tile{
    background-color: #f8f9fa;
    padding: 30px
}
.section-title{
    color:#bbb;
    font-weight: bold;
    font-size: 1.2em !important;

}
.section-tile{
    margin-bottom:24px;
}
.section-box{
    background-color: #fff;
    padding: 16px;
    margin:8px;
}

/* viewer selection */
.icon_selector{
    color:#555;
}
.text_selector{
    margin-right:8px;
    color:#555;
}
.number-span{margin-left:1em;}

/* histogram  */
.axis path, .axis line {
    fill: none;
    stroke: #fff;
}
.axis text {
    font-size: 8px;
    font-weight: lighter;
    cursor:default
  }
.x.axis text{
    font-weight: lighter;
    font-family: monospace;
}
.y.axis text{
    font-weight: bolder;
}
.x.axis text:hover  {
    font-size: 8px;
    font-weight: bold;
}
.bar:hover {
    opacity: 0.8;
    /* fill: rgba(65,193,194,0.4); */
  }
svg text.label {
  fill:black;
  font-weight: 400;
  text-anchor: middle;
}

.nodetooltip {
    background-color: rgba(255,255,255,0.9);
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: none;
    padding:4px;
    margin:4px;
}
.settings_hist{
    position: absolute;
    top: 40px;
    right: 0px;
    width: auto;
    height: auto;
    background-color: white;
}
#settings_hist_collapse.collapse.in{
    margin:4px;
    padding:8px;
    border:1px #ccc solid !important;
    border-radius: 2px;

}
.hide_setting {
    position: absolute;
    top: 0px;
    right: 0px;
    width: auto;
    height: auto;
    background-color: white;
    padding:8px;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
  stroke-width: 0;
}

/* sunburst styles */
path {
  stroke: #fff;
}

div.nodetooltip {
    position: absolute;
    text-align: center;
    max-width: 220px;
    min-width: 200px;
    max-height: 380px;
    min-height: 100px;
    padding: 6px;
    color: azure;
    font: 10px "Helvetica Neue", Helvetica, Arial, "Droid sans", sans-serif;
    background: #4B79A1;
    background: -webkit-linear-gradient(to right, #283E51, #4B79A1);
    background: linear-gradient(to right, #283E51, #4B79A1);
    border: 1px;
    border-radius: 2px;
    /*pointer-events: none;*/
    -webkit-box-shadow: 0 1px 2px #777;
	box-shadow: 0 2px 1px #777;
}

div.selectedpopup {
    position: absolute;
    text-align: center;
    max-width: 220px;
    min-width: 200px;
    max-height: 380px;
    min-height: 100px;
    padding: 6px;
    color: azure;
    font: 10px "Helvetica Neue", Helvetica, Arial, "Droid sans", sans-serif;
    background: #4c5135;
    background: -webkit-linear-gradient(to right, #4c5135, #a19b25);
    background: linear-gradient(to right, #4c5135, #a19b25);
    border: 1px;
    border-radius: 2px;
    /*pointer-events: none;*/
    -webkit-box-shadow: 0 1px 2px #777;
	box-shadow: 0 2px 1px #777;
}

.selectedpopup a:hover, .selectedpopup a:focus, .selectedpopup a {
    color: #9acfea;
}
div.searchtip {
    position: absolute;
    text-align: center;
    padding: 4px;
    font: 12px sans-serif;
    background: #d5d5d5;
    color: #307C3B;
    border: 0px;
    border-radius: 2px;
    pointer-events: none;
}

.ui-menu .ui-menu-item a{
    background:red;
    height:10px;
    font-size:8px;
}

    body {
        /* overflow: hidden; */
    }


#sequence {
  //width: 600px;
  //height: 70px;
}

#sequence text {
    font: 10px "Helvetica Neue", Helvetica, Arial, "Droid sans", sans-serif;
    fill: azure;
}

#explanation {
  position: absolute;
  top: 260px;
  left: 305px;
  width: 140px;
  text-align: center;
  color: #666;
  z-index: -1;
}

.navbar {
    margin-bottom: 5px !important;
}

#colorscale {
    position: relative;
}

#colorbarNumber {
    position: absolute;
    top: 12px;
    /* left: 450px; */
    color: red;
}

.lineage span:not(:first-child):before {
    content: " > ";
}

.lineage span{
    cursor: pointer;
}

#permdiv p {
     text-align: left;
}

.ui-autocomplete {
        max-height: 90vh;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 25px;
        padding-bottom: 5px;
}

.ui-menu {
    padding-right: 20px !important;
    padding-bottom: 5px !important;
}

.ui-menu .ui-menu-item a {
    border-radius: 0px;
    border: 1px solid #454545;

}

.ui-menu-item-wrapper {
    color: #307C3B;
    font-size:10px;
}
#chart {
    height: 100%;
    width: 100%;
}