html {
    font-size: 10px;
}

body{
    font-size: 1.7rem;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#assembly-details dd,
.table-view-content .list-assms dd {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

h1 {
    margin: 0;
}

h1, h2, h3, h4, h5 {
    font-family: inherit;
}
h4 { margin:0; display:inline-block;}

h5 {
  color: #2e8540;
  font-size: 1.1em;
}

a {
  text-decoration: none;
}
#summary {
  background-color: hsl(145, 15%, 95%);
  width: 100%;
  padding: .5em 1em;
}
#summary>div{
    display: inline-block;
    vertical-align:top;
    width: calc(50% - 0.5rem);
}

p.tagline {
  margin: 0;
  font-style: italic;
}

.help-link {
    float: right;
    font-size:16px;
    color:rgb(27,27,27);
    line-height:26;
    top:12px;
    position:relative;
    max-width:476px;
}
.help-link a {
    text-decoration: underline;
    color: #0071BC;
}
.help-link strong {font-weight: normal;}
.help-link a:hover {
    color: #1a4480;
}

.help-link p {
    margin: 0;
}

#left {
  float: left;
  margin:0;
  width:calc(62% - 1em);
}
#right {
  float: right;
  margin: 1em 0;
  width: 38%;
  max-width: 28em;
}

.form-wrap label {
    white-space: nowrap;
    color: hsl(15, 15%, 36%);
    font-size: 90%;
    font-weight: bold;
    padding: 0 .2em;
    margin: 0;
}

.form-wrap {
    display: table;
    width: 100%;
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
}

.form-wrap > div {
    display: table-row;
}

.form-wrap form {
    display: table-cell;
    vertical-align: top;
    margin: 0;
    padding: .5em 1.5em;
}

.form-wrap .view-switch-wrap {
    margin: 0 1em 0 0;
    width: 6em;
}

#view-switch {
    margin: 0;
    padding: .2em 1em;
    border: solid 1px #777;
    border-radius: .2em;
    width: 100%;

    -webkit-transition-property:transform;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:transform;
    -moz-transition-duration: 200ms;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:transform;
    -ms-transition-duration: 200ms;
    -ms-transition-timing-function: ease-out;
    -o-transition-property:transform;
    -o-transition-duration: 200ms;
    -o-transition-timing-function: ease-out;
    transition-property:transform;
    transition-duration: 200ms;
    transition-timing-function: ease-out;

}

#view-switch:hover {
    background-color: hsl(210, 100%, 95%);
}

.tree-view-wrap {
    height: 0;
    overflow: hidden;
}
.view-tree .tree-view-wrap {
    height: auto;
    overflow: hidden;
}

.tree-view-wrap > div {
    display: inline-block;
}
.table-view-wrap > div:first-child {
    max-height: 90px;
    background-color: hsl(150, 100%, 98%);
    border: solid 1px hsl(150, 50%, 80%);
    font-family: Roboto, Source Sans Pro, sans-serif;
    font-size: 12px;
    font-style: italic;
}

.view-datasets input {
    display: block;
    margin: 0;
    padding: 0 1em;
    font-weight: bold;
    font-style: italic;
    color: hsl(210, 50%, 50%);
    text-align: center;
    text-decoration: underline;
    border-radius: .2em;
    cursor: pointer;
}

.view-datasets input:hover {
    color: hsl(60, 50%, 95%);
    background-color: hsl(210,100%,40%);
    border-color: hsl(210,50%, 30%);
}

.view-datasets label {
 /*   background-repeat: no-repeat;
    background-position: 6em center;
    background-size: .8em;
    background-image: url(../img/icons/download.svg);*/
}

.view-datasets > div {
    display: none;
    max-width: 10em;
}

.filter-assms select {
    border-radius: .2em;
    vertical-align: top;
    padding: .2em 1em;
    max-width: 10em;
    margin: 0;
}

.view-tree .filter-assms {
    display: none;
}

.view-table .view-datasets > div {
    display: block;
    float: right;
    padding-right: .5rem;
}

.table-view-wrap {
    height: 0;
    overflow: hidden;
}
.view-table .table-view-wrap {
    height: auto;
    min-height: 36em;
    box-sizing: content-box;
    overflow: visible;
}
table-view-wrap li {
    line-height: 1.5;
}

svg {
    position: relative;
    z-index: 10;
}

.table-view {
    padding: 0;
}

.table-view > div {
    padding: 0;
    margin: 0;
    cursor: default;
}

.table-view > div:hover .list-org {
    color: hsl(210, 90%, 10%);
}

.table-view .list-ctrl {
    height: 0;
    text-align: right;
    font-size: 1.5rem;
}
.table-view .list-ctrl > span {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    cursor: pointer;
    background-repeat: no-repeat;
}

.table-view .list-ctrl > span:nth-child(3) {
    font-size: 1.3rem;
    font-style: italic;
    text-align: left;
    width: 13rem;
    padding: 0 .2rem 0 1.5rem;
    margin: .1rem 0 0 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    color: hsl(130, 50%, 20%);
    text-shadow: white 1px 1px 1px;
    cursor: pointer;
    text-decoration:underline;
    background-position: left center;
    background-size: .9em;
    background-image: url(../img/icons/filter.svg);
}
.table-view .list-ctrl > span a {
    /*color: inherit;*/
}
.table-view .list-ctrl > span:nth-child(-n+2) {
    width: 5em;
    font-size: 1.5rem;
    text-align: center;
    padding: 0 .5em;
    margin: 1em 0 0;
}
.table-view .list-ctrl > span:nth-child(1) {
    width: 6em;
}
.table-view .list-ctrl > span:nth-child(-n+2) a {
    display: inline-block;
    min-width: 1em;
}
.table-view .list-ctrl > span:nth-child(-n+2) a span {
    padding: .1em .5em;
    border: solid 1px #999;
    border-radius: .3em;
    background-color: white;
}
.table-view .list-ctrl > span:nth-child(-n+2) a span:hover {
    color: hsl(60, 50%, 95%);
    background-color: hsl(210,100%,40%);
    border-color: hsl(210,50%, 30%);
}
.table-view .list-ctrl > span:nth-child(1) a span {
    padding: .1em 1em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1em;
    background-image: url(../img/icons/download-b.svg);
}
.table-view .list-ctrl > span:nth-child(1) a span:hover {
    background-image: url(../img/icons/download-w.svg);
}

.table-view-mask {
    position:relative;
    z-index:10;
    height: 0;
}
.table-view-mask>div {
    height:0;
    opacity: 0;

    -webkit-transition-property:opacity;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:opacity;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:opacity;
    -ms-transition-duration: 400ms;
    -ms-transition-timing-function: ease-out;
    -o-transition-property:opacity;
    -o-transition-duration: 400ms;
    -o-transition-timing-function: ease-out;
    transition-property:opacity;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
}
.gb-active-org .table-view-mask>div,
.gb-active-asm .table-view-mask>div {
    opacity: .5;
    background-color: hsl(210, 20%,90%);
}
.list-org-wrap {
    display: table;
    table-layout: fixed;
    width: 100%;
    color: #555;
    font-style: italic;
    font-size: 1.5rem;
    padding: .5rem 0 0;
    background-image: linear-gradient(hsl(120, 20%, 99%), hsl(120, 90%, 95%));
}

.list-org-wrap:hover {
    position: relative;
    z-index: 20;
    background-image: linear-gradient(hsl(120, 50%, 95%), hsl(120, 100%, 80%));
}

.list-org {
    display: table-row;
}

.list-org > span {
    display: table-cell;
    padding: .2em .5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-org > span a {
    color: hsl(210,100%,40%);
}

.list-org > span:nth-child(1) {
    width: auto;
    font-size: 1.7rem;
}
.list-org > span:nth-child(1) >div:nth-child(1) {
    font-size: 1.5rem;
    text-align: right;
}

.list-org > span:nth-child(n+2){
    position: relative;
    text-align: center;
    padding: .2em 1em;
    line-height: 1.5;
    vertical-align: bottom;
    overflow: visible;
}
.gb-active-org .list-org > span:nth-child(n+2){
    /*z-index: 15;*/
}

.list-org > span a {
    min-width: 1em;
}
.list-org > span:nth-child(n+2) a span {
    display: inline-block;
    padding: .1em .5em;
    border: solid 1px #999;
    border-radius: .3em;
    background-color: white;
}
.list-org > span:nth-child(n+2) a span:hover {
    color: hsl(60, 50%, 95%);
    background-color: hsl(210,100%,40%);
    border-color: hsl(210,50%, 30%);
}

.list-org > span.gb-disabled a span {
    border-color: #AAA;
    color: #888;
}
.list-org > span.gb-disabled a span:hover {
    color: #AAA;
    background-color: #CCC;
    border-color: #AAA;
}

.list-org > span.dataset {
    width: 2.5em;
}
.list-org > span.dataset a span {
    width: .2em;
    padding: .1em 1em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1em;
    background-image: url(../img/icons/download-b.svg);
}
.list-org > span.dataset a span:hover {
    background-image: url(../img/icons/download-w.svg);
}
.list-org > span.blast {
    width: 9em;
    font-style: normal;
}
.list-org > span.blast span {
    width: 7em;
}

.list-org span.filter {
    display: inline-block;
    white-space: nowrap;
    font-style: italic;
    text-align: left;
    min-width: 15rem;
    padding: 0 0 0 1.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: hsl(130, 50%, 20%);
    text-shadow: white 1px 1px 1px;
    background-position: left 60%;
    background-repeat: no-repeat;
    background-size: .9em;
    background-image: url(../img/icons/filter.svg);
    position: relative;
}
.list-org > span.filter a {
    text-decoration: underline;
}
.list-org .gdv-menu-link {
    font-weight: normal;
    font-style:normal;
    width: 2.5em;
}
.list-org .gdv-menu-link > a {
    display: inline-block;
    padding: .1em .5em;
    border: solid 1px #999;
    border-radius: .3em;
    background-color: white;
    width: 1.25em;
}
.list-org .gdv-menu-link:hover > a {
    color: hsl(60, 50%, 95%);
    background-color: hsl(210,100%,40%);
    border-color: hsl(210,50%, 30%);
}
.list-org .gdv-menu {
    margin-top: .2em;
    margin-right: .5em;
    text-align: left;
}

.table-view-tail > div {
    height: 10px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px 5px;
    background-image: url(../img/icons/splitter.svg);
    cursor: pointer;
}

.table-view-tail.gb-drag {
    background-color: #555;
}

.table-view-info {
    text-align: right;
    display: none;
    height: 0;
}
.show-info .table-view-info {
    display: block;
}

.table-view-info > div:nth-child(2) {
    display: inline-block;
    text-align:left;
    background-color: hsl(150,10%,99%);
    position: relative;
    right: 0;
    border: solid 1px hsl(150,50%,30%);
    border-radius: .5rem 0 0 .5rem;
    z-index: 100;
    box-shadow: 1em 1em 2em hsl(150,20%,30%);
    opacity: .85;
    min-width: 45rem;
}
.table-view-info > div:nth-child(2):hover {
    opacity:1;
}

.table-view-info > div > div {
    padding: 2rem;
}

.genome-overview {
    border-bottom: solid 1px hsl(150,50%,30%);
    background-color: hsl(150, 40%,40%);
    color: white;
    padding: 2rem;
}
.genome-overview h4 {
    font-size: 2rem;
}
.genome-overview h4 a {
    color: inherit;
}

.table-view-info > .gdv-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: .33;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 10;
}

.table-view-info .gb-search {
}
.table-view-info label {
    font-size: 90%;
    font-weight: normal;
    margin-top: 1.5rem;
}

.table-view-info .gb-search input {
    font-size: inherit;
    display: inline-block;
    position: static;
}

.table-view-info .gb-search-ctrl {
    margin-left: 0;
    height: 5rem;
}

.table-view-info .gb-search .gb-search-ctrl button {
    height: 4.4rem;
}

.table-view-info .gb-search-help {
    font-size: 1.4rem;
}

.genome-overview.with-image {
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    background-size: contain;
    background-origin: border-box;
    padding-right: 8rem;
}

.gdv-none select {
    background-image: none;
}



.table-view-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(640px, 96vh);
    border-style: solid;
    border-color: hsl(210,30%,65%);
    border-width: 2px 1px 1px;
}

.table-view-header {
    margin-top: 4rem;
    font-size: 1.5rem;
    cursor: default;
    color: hsl(210,60%,35%);
    background-image: linear-gradient(hsl(210,40%,99%), hsl(210,20%,85%));
    text-shadow: hsl(60,50%,50%) 1px 1px 1px;
}

.table-view-header ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 0;
    margin: 0;
}

.table-view-header li {
    display: table-row;
}
.table-view-header li > span {
    display: table-cell;
    color: inherit;
}

.list-assms ul {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    padding: 0;
    margin: 0;
}
.list-assms li {
    display: table-row;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    color: hsl(210,10%,30%);
}
.list-assms li:nth-child(even) {
    background-color: hsl(180, 100%,98%);
}
.list-assms li>span,
.list-assms li>a {
    display: table-cell;
    padding: .2em .5em;
    border-width: 1px 0;
    border-style: solid;
    border-color: #AAA;
    margin: 0;
    vertical-align: top;
}
.list-assms li:hover>span,
.list-assms li:hover>a {
    z-index: 20;
    background-color: hsl(200,100%,95%);
}
.list-assms li a span {
    display: inline-block;
    padding: .1em .5em;
    border: solid 1px #999;
    border-radius: .3em;
    background-color: white;
}
.list-assms li a span:hover {
    color: hsl(60, 50%, 95%);
    background-color: hsl(210,100%,40%);
    border-color: hsl(210,50%, 30%);
}

.list-assms li>span a {
    display: inline-block;
    min-width: 1em;
}

.list-assms li>span:first-child {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: .7em;
}

.list-assms dl {
    margin: 0;
    padding: 0;
}

.list-assms span dt {
    font-weight: normal;
    font-style: italic;
    width: 5em;
    padding: .3rem 0 0;
    margin: 0;
    line-height: 1;
    color: hsl(210,20%,50%);
    font-size: 1.4rem;
}
.list-assms span:nth-child(2) dt {
    width: 7em;
}
.list-assms dd {
    margin: 0;
    padding: .2rem 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-view-header li>span {
    padding: 0 .5em;
}
.table-view-header li>span>span {
    white-space: nowrap;
    position: relative;
    z-index: 5;
}
.table-view-header li>span>div {
    height: 0;
    margin: 0 -.5em;
}
.table-view-header li>span>div>div {
    position:relative;
    z-index:3;
    height: 0;
    opacity: 0;
    border-width: 0 1px;
    border-style: none;
    border-color: hsl(210,20%,80%);
    background-color: hsl(210,80%,95%);

    -webkit-transition-property: opacity;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:opacity;
    -moz-transition-duration: 200ms;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:opacity;
    -ms-transition-duration: 200ms;
    -ms-transition-timing-function: ease-out;
    -o-transition-property:opacity;
    -o-transition-duration: 200ms;
    -o-transition-timing-function: ease-out;
    transition-property:opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
}
.table-view-header li>span:hover>div>div {
    border-style: solid;
    opacity: .7;
}

.list-assms li>.details,
.table-view-header li>.details {
    text-align: center;
    width: 2.5em;
    padding: .2em 1em;
}
.table-view-header li>.details {
    position: relative;
    z-index: auto;
}

.list-assms li>.details {
    padding: .2em 1em;
}

.table-view-header li>.tail {
    padding: 0;
    width: 0;
}

.list-assms li>.details a>span {
    width: .2em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1em;
    padding: .1em 1em;
    background-image: url(../img/icons/search-b.svg);
}
.table-view-header li>.details > a {
    padding: .1em 1em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1em;
    background-image: url(../img/icons/details.svg);
    border-style: solid;
    border-width: 1px;
    /* background-color: hsl(210,100%,40%); */
    border-color: hsl(210,50%, 30%);
    border-radius: .3rem;
}
.table-view-header li>.details {
    -webkit-transition-property:transform;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:transform;
    -moz-transition-duration: 200ms;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:transform;
    -ms-transition-duration: 200ms;
    -ms-transition-timing-function: ease-out;
    -o-transition-property:transform;
    -o-transition-duration: 200ms;
    -o-transition-timing-function: ease-out;
    transition-property:transform;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
}

.list-assms li > :nth-child(n+6),
.table-view-header li>:nth-child(n+6) {
    text-align: center;
}
.list-assms li > :nth-child(n+4) {
    vertical-align: bottom;
}
.gb-active-asm .list-assms li > :nth-child(n+6) {
    z-index: 15;
}
.table-view-header li>.details > a:hover {
    background-color: hsl(210,100%,40%);
    background-image: url(../img/icons/details-w.svg);
}
.show-info .table-view-header li>.details {
    z-index: 20;
    transform: matrix(-1,0,0,1,0,0);
}
.show-info .table-view-header li>.details > a {
    background-image: url(../img/icons/close.svg);
}
.show-info .table-view-header li>.details > a:hover {
    background-image: url(../img/icons/close-w.svg);
}
.list-assms li>.details a>span:hover {
    background-image: url(../img/icons/search-w.svg);
}

.list-assms li>.browse,
.table-view-header li>.browse {
    width: 9em;
    padding: .2em 1em;
}
.list-assms li > .browse span {
    width: 7.5em;
}
.table-view-header li>.browse {
    text-align: center;
}

.list-assms li > .browse ext,
.list-org > .blast ext {
    display: inline;
    margin-left: .5em;
}

.list-assms li>span.annot-info {
    width: 2.5em;
    padding: .1em 1em;
    vertical-align: bottom;
}

.list-assms li>.annot-info a>span {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.2em;
    padding: .1em 1em;
    background-image: url(../img/icons/info-b.svg);
}
.list-assms li>.annot-info a>span:hover{
    background-image: url(../img/icons/info-w.svg);
}

.table-view-header li>span:nth-child(3) {
    width: 9.5em;
}
.list-assms li > span:nth-child(3){
    width: 5.5em;
}
.list-assms li > span:nth-child(3) i {
    font-size: 90%;
    color: hsl(210,20%,50%);
    margin-right: .3em;
}
a.annot-info {
    color: inherit;
    padding: 0 1.5em 0 .2em;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.1em;
    background-image: url(../img/icons/info-b.svg);
}

a.annot-info:hover {
    color: hsl(210, 75%, 50%);
    text-decoration: underline;
}
.list-assms span:nth-child(3) > * {
    white-space: nowrap;
}
.list-assms span:nth-child(3) > :nth-child(2) {
    color: hsl(210, 20%, 30%);
    font-style:italic;
}

.list-assms li > span:nth-child(2),
.table-view-header li>span:nth-child(2) {
    width: 7em;
}

.list-assms li.gb-selected {
    color: #100;
    background-color: hsl(210,100%,90%);
}
.list-assms li:hover {
    /*background-color: hsl(200,100%,95%);*/
}

.list-assms li.gb-selected>span:first-child {
    background-repeat: repeat-y;
    background-size: .5em;
    background-image: url(../img/icons/box.svg);
}
.list-assms li>span:nth-child(1),
.table-view-header li>span:nth-child(1) {
    width: 20em;
    padding-left: 1em;
}

.asm-wrap {
    width: calc(100% - 5em);
    display: inline-block;
}
.link-wrap {
    margin-left: 1rem;
}
.link-wrap .gdv-menu-link {
    display: inline-block;
}

.link-wrap .gdv-menu-link > button {
    width: 1em;
    min-width: 1em;
    padding: 1rem 1.5rem;
}

.node.group circle {
    fill: white;
    stroke: hsl(130, 50%, 36%);
    stroke-width: 1px;
    cursor: pointer;
}
.node.group:hover circle {
    fill: hsl(180, 100%, 90%);
}
.node.group circle.mark {
    fill: hsl(130, 50%, 36%);
}
.node.group-root circle {
    fill: hsl(130, 50%, 65%);
}

.table-view-wrap .link {
    stroke-width: 2px;
    stroke: hsl(130, 50%, 36%);
}

.table-view-wrap .node,
.table-view-wrap .node text {
    font: inherit;
}
.table-view-wrap .node .node-name {
/*    font-style: italic; */
}
.back-tree .group-root {
    font-weight: bold;
}
.back-tree .group-root .node-count {
    font-weight: normal;
}

.gb-tooltip {
    font-size: 1.4rem;
    position: absolute;
    z-index: 1000;
    display: none;
    text-align: center;
    padding: .5em 1em;
    background-color: hsl(210, 0%, 97%);
    border: solid 1px hsl(0, 0%, 75%);
    border-radius: .2em;
    box-shadow: .2em .2em 1em gray;
    color: hsl(0, 0%, 15%);
    text-shadow: 1px 1px 1px hsl(210, 50%, 90%);
}

.gb-tooltip ul {
    padding: 0;
    margin: 0;
}
.gb-tooltip li {
    list-style-type: none;
    text-align: left;
    line-height: 1;
    font-style: italic;
}
.gb-tooltip li span {
    margin-left: 1em;
}

.gb-tooltip .gb-comment {
    color: hsl(0,0%, 30%);
    font-size: 90%;
    font-style: normal;
    padding: 0;
}

#right > div {
    position: relative;
    -webkit-transition-property:top;
    -webkit-transition-duration: 600ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:top;
    -moz-transition-duration: 600ms;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:top;
    -ms-transition-duration: 600ms;
    -ms-transition-timing-function: ease-out;
    -o-transition-property:top;
    -o-transition-duration: 600ms;
    -o-transition-timing-function: ease-out;
    transition-property:top;
    transition-duration: 600mss;
    transition-timing-function: ease-out;
}

#search-left {
  max-width: 640px;
}

#search-field-organism {
  border-right: 1px solid #5b616b;
  width: calc(100% - 0.5rem);
  border-radius: .2em;
}

#organism-tree {
  margin-left:0;
}

.overview {
  position: relative;
  top: 0.7rem;
}

#top-node, #subtree-root-parent-node {
  fill: #D2D3D4;
}

#top-node .arrow,
#subtree-root-parent-node .arrow {
  fill: #308641;
}

#top-node .arrow path,
#subtree-root-parent-node .arrow path {
    fill: none;
    stroke: #308641;
    stroke-width: 2px;
}
.node {
  cursor: default;
}

.node-leaf,
.node-more {
  cursor: pointer;
}

.node text {
  font: 0.9em 'Source Sans Pro', Arial, sans-serif;
  background-color: #fff;
  display: block;
}

.tooltip rect {
    fill: #e5fbff;
    filter: url(#shadow);
    stroke: #60959f;
    stroke-width: 1;
}

.tooltip .gb-comment {
    fill: #0b8e0b;
    font-style: italic;
    font-size: 90%;
}

.node.node-selected text {
  font-weight: bold;
}

.node-leaf circle {
    fill: rgb(4, 99, 90);
    stroke: rgb(4, 99, 90);
}

.node-internal circle {
    fill: rgb(255, 255, 255);
    stroke: rgb(4, 99, 90);
}

.node-leaf:hover circle {
    fill: #1A7890;
    stroke: #005266;
}

.node-leaf.node-selected circle {
    fill: rgb(48, 141, 198);
    stroke: rgb(48, 141, 198);
}

.node-leaf.node-selected:hover circle {
    stroke: #135a86;
}

.node-more:hover circle {
    stroke: #06C;
    fill: #cce6ff;
}

.node-more.node-pressed circle {
    fill: #0080ff;
    stroke: #004080;
}

.node circle.ext {
    opacity: .01;
    fill: white;
    stroke: none;
}

.node-more.node-pressed path {
    stroke: white;
}

.node-internal .plus-icon {
    stroke: rgb(4, 99, 90);
    stroke-width: 2px;
}

.node-leaf rect {
    fill: rgb(255, 255, 255);
    opacity: 0.8;
}

.node-pulse {
    stroke: rgb(48, 141, 198);
    fill: rgb(255, 255, 255);
}

pattern rect {
    fill: rgb(4, 99, 90);
}

pattern.node-hover rect {
    fill: #1A7890;
}

pattern.node-selected rect {
    fill: rgb(48, 141, 198);
}

.link {
    fill: none;
    stroke: #2e8541;
    stroke-width: 3px;
}

.node-expand .link {
    stroke-width: 2px;
    stroke: #008020;
}

.node-expand .node-internal circle {
    fill: white;
    stroke: #008020;
}

.node-expand .node-internal:hover circle {
    fill: #cce6ff;
}

.node-expand .node-internal.node-pressed circle {
    fill: #0080ff;
    stroke: #004080;
}

.node-expand .node-internal circle.dot {
    stroke: none;
    fill: #008020;
}

.node-expand .node-internal:hover circle.dot {
    fill: #004d13;
}

.node-expand .node text {
    fill: #000;
}

.node-expand .node {
    cursor: pointer;
}

.tree-expand {
    display: block;
}

.gb-hidden {
    display: none;
}

.gb-italic,
.node .gb-italic {
    font-style: italic;
}

.node-internal path {
    fill:none;
    stroke: none;
}

.node.node-back path {
    stroke: #373;
    stroke-width: 2;
}

.tree-expand .node-mask {
    fill: #FFF;
    opacity: 0.9;
}

#org-overview-icon {
  float: right;
}

.usa-search.usa-search-small [type="search"], .usa-search.usa-search-small .usa-search-input {
  width: calc(100% - 4.5rem);
  height: 4.54rem;
}

.usa-search.usa-search-small [type="submit"], .usa-search.usa-search-small .usa-search-submit {
  width: 3.5rem;
  height: 4.5rem;
  background-color: #0071bc;
}

.gb-grid-details-wrap {
    font-family: Roboto, Source Sans Pro, sans-serif;
    font-size: 12px;
}

.gb-grid-details-wrap ul {
    padding: 0;
    margin: 0;
}

#assembly-details dd a>span {
    margin-left: 1em;
}

.content-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.5;
}
.load-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    text-align:center;
    vertical-align: middle;
    display: none;
}
.load-mask > div:nth-child(1) {
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.5;
}

.load-mask > div:nth-child(2) {
    position: absolute;
    box-sizing: content-box;
    width: 10em;
    padding: 4rem 2rem;
    top: 20vh;
    left: calc(50vw - 7em);
    font-size: 3rem;
    font-style: italic;
    color: #777;
    background-color: white;
    border: solid .2rem #999;
    border-radius: 1rem;
    box-shadow: .5em .5em 1em gray;
    text-shadow: .1em .1em .2em;
}

.view-tree .load-mask,
.view-table .load-mask {
    display: block;
}
.view-tree .gb-hidden,
.view-table .gb-hidden {
    display: none;
}

.search-suggestions
{
    margin: 3em 0 0 0;
}

.search-suggestions > div {
    position: absolute;
    background: #FFF;
    border: 1px solid #CCC;
    z-index: 1000;
    overflow: auto;
    max-height: 45em;
}

.search-suggestions ul,
ul#search-suggestions {
  list-style-type:none;
  padding: 0;
  margin: 0;
}

.search-suggestions li,
#search-suggestions li {
  color: hsl(210,20%, 30%);
  height: 3.3rem;
  font-size: 1.7rem;
  line-height: 2.3rem;
  padding: 5px 10px 0 10px;
  margin-bottom: 0;
  box-sizing: border-box;
  list-style-image: none;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

.search-suggestions li.hover,
#search-suggestions li.hover {
  background-color: rgb(225, 243, 248);
}

.search-suggestions .search-instructions {
  font-style: italic;
  border-top: solid 1px hsl(15, 10%, 70%);
  color: hsl(15, 100%, 30%);
  background-color: hsl(60, 75%, 95%);
  cursor: default;
}
.search-suggestions .search-instructions:hover {
  background-color: hsl(60, 100%, 85%);
}
.gb-search-go.search-btn {
  width: 4.5rem;
}

.gb-search {
    margin-left: 0;
    font-size: 1.4rem;
    font-family: Roboto, Source Sans Pro, sans-serif;
    line-height: 1.2;
}

.gb-search-help {
    margin-left: 0;
    clear: both;
}

.gb-search-ctrl input {
    float: left;
    font-size: 14px;
    position: initial;
    vertical-align: initial;
    width: calc(100% - 4.5rem);
    height: 4.5rem;
    background-image: none;
    padding: 0 0.7em;
    font-family: Roboto, Source Sans Pro, sans-serif;
    border: 1px solid #5b616b;
    border-radius: 0;
}

#maincontent .gb-search-help > p > span {
  display: inline-block;
  color: #555;
}


.gb-search-ctrl .gb-search-go {
  left: 0;
}

.gb-search-ctrl label {
    display: initial;
    position: initial;
    width: initial;
    height: initial;
    padding: initial;
    vertical-align: initial;
    background-repeat: initial;
    background-position: initial;
    background-image: initial;
    background-size: initial;
    z-index: initial;
}

.table-view-info label,
.genome-info label {
  font-size: 1.5rem;
  font-family: Roboto, Source Sans Pro, sans-serif;
  font-weight: normal;
  color:#555;
}

.gb-search-ctrl {
    margin-left: 0;
    height: auto;
}

.gb-search .content-results {
    width: calc(100% + 3rem);
    margin: 0 -1.5rem;
}

.gb-search .content-tabs li {
  font-style: normal;
  text-shadow: none;
}

.gb-search .content-grid {
  font-size: 14px;
}

.gb-search th, .gb-search td {
  border: none;
}

.gb-search th {
  text-align: center;
}

.gb-search tr.gbs-odd {
  background-color: #e5f0ff;
}

.gb-search td {
  background-color: transparent;
}

.gb-search table th {
  /*background-color: #f1f1f1;*/
  /*background-image: none;*/
}

#asm-options {
    padding-right: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

#maincontent .tooltip {
    position: absolute;
    text-align: center;
    width: auto;
    height: auto;
    padding: 3px 5px;
    font: 14px 'Source Sans Pro', Arial, sans-serif;
    background: #9bdaf1;
    border: 0px;
    border-radius: 4px;
    pointer-events: none;
}

#maincontent .usa-form {
  max-width: 40rem;
}

.genome-info {
  border: 1px solid #2e8540;
  padding:0 .5em 1em 1em;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.2);
  overflow: visible;
}

#go-head img {
  float: right;
  max-height: 100px;
  max-width: 150px;
  margin-right: 15px;
}


#asm-options-container {
  margin-bottom:0.8em;
}
#asm-dropdown-label {
  margin-top:1.5rem;
}
#asm-value-label, #asm-value {
  display:inline-block;
  margin-top:1em;
  font-weight: bold;
}
#asm-value {
  font-weight: normal;
  margin-left:10px;
}
#ideo {
  clear: both;
}

.ideo-img-wrap img {
  max-width: inherit;
}

.ideo-hlt-wrap {
  cursor: pointer;
}

.ideo-chrom-label {
  text-decoration: none;
}

.ideo-body:hover {
    border: solid 1px hsl(120, 100%, 40%);
}

.ideo-body {
    border: solid 1px transparent;
    margin: 5px 1px;
}

dl {
  margin-top: 0;
}

dt {
  float: left;
  width: 9em;
  font-weight: bold;
}

dd {
  margin-left: 9em;
}

input::-ms-clear {
    display: none;
}

.gb-help {
    font-size: 1.5rem;
    margin: 1.5rem 0 2rem;
    border: solid 1px #CCC;
    border-radius: .3rem;
    background-color: #FCFCFC;
    color: #777;
    display: none;
}
.view-tree .gb-help {
    display: block;
}

.view-tree .gb-help.gb-hidden {
    display: none;
}

.gb-help .content {
    padding: 1rem 2rem;
}
.gb-help p {
    line-height: 1.25;
    margin: .5rem 0;
}

.gb-help > div:first-child {
    height: 0;
    text-align: right;
}
.gb-help > div:first-child > span {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: padding-box;
    background-size: 1rem;
    background-image: url(../img/icons/close-x.svg);
    cursor: pointer;
}

@media screen and (max-width: 600px) {
}

/* --- media --- */
@media screen and (max-width: 1050px) {
  #right {
    width:35%;
  }
  #left {
    width:calc(65% - 1em);
  }
  #organism-tree {
    max-width: none;
  }
}
@media screen and (max-width: 1020px) {
  .help-link {
    top: -8px;
    max-width: unset;
  }
  #right {
    width:30%;
  }
  #left {
    width:calc(70% - 1em);
  }
  #assembly-details dt {
    float:none;
  }
  #assembly-details dd {
    margin-left:2em;
  }
}
@media screen and (max-width: 840px) {
  #organism-tree {
    max-width: 524px;
  }

}
@media screen and (max-width: 800px) {
  #organism-tree {
    max-width: 500px;
  }
}
@media screen and (max-width: 785px) {
    #organism-tree {
        max-width: 488px;
    }
}
@media screen and (max-width: 768px) {
    #organism-tree {
        max-width: 480px;
    }
}
@media screen and (max-width: 740px) {
  #right {
    float:none;
    width:100%;
    max-width: none;
  }
  #left {
    float:none;
    width: 100%;
  }
  #search-field-organism {
    width: 100%;
  }
  #asm-search.usa-form {
    max-width: none;
  }
  #right > div {
    position: static;
  }
  input, select {
    max-width: none;
  }
  #organism-tree {
    max-width: 740px;
  }
  #assembly-details dt {
    float:left;
  }
  #assembly-details dd {
    margin-left:9em;
  }
}
@media screen and (max-width: 460px) {
  #organism-tree {
    max-width: 600px;
  }
}

@media screen and (max-width: 507px) {
    .list-org > span:nth-child(1) {
        max-width: 20rem;
    }
    .list-assms li>span:nth-child(1),
    .table-view-header li>span:nth-child(1) {
        width: auto;
    }
    .list-assms li>span:nth-child(5),
    .table-view-header li>span:nth-child(5) {
        display: none;
    }
    .form-wrap form {
        padding: .5em 1em;
    }
    .table-view-info > div:nth-child(2) {
        min-width: unset;
    }
    .table-view-wrap .usa-button-outline {
        width: auto;
    }
}


@media screen and (max-width: 350px) {
  #assembly-details dt {
    float:none;
  }
  #assembly-details dd {
    margin-left:2em;
  }
}

@media screen and (max-width: 800px) {
    .list-assms li>span:nth-child(1),
    .table-view-header li>span:nth-child(1) {
      width: auto;
    }
    .list-assms li>span:nth-child(5),
    .table-view-header li>span:nth-child(5) {
      display: none;
    }
}
@media screen and (max-width: 850px) {
    .list-assms li > :nth-child(3),
    .list-assms li > :nth-child(4),
    .table-view-header li>span:nth-child(3) {
        display: none;
    }
}
@media screen and (min-width: 780px) {
    .table-view-info .info-wrap {
        display: none;
    }
}
@media screen and (max-width: 580px) {
    .list-assms li > span:nth-child(2),
    .table-view-header li>span:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 520px) {
    .list-assms li>.browse,
    .table-view-header li>.browse,
    .list-org > span.blast {
        width: 5em;
    }
    .list-assms li > .browse span,
    .list-org > span.blast span {
        width: 3.5em;
    }

    .list-assms li > .browse ext,
    .list-org > .blast ext {
        display: none;
    }
}

@media screen and (max-width: 380px) {
    .list-org > span:nth-child(1) {
        max-width: 15rem;
    }
    .list-assms span dt {
        display: none;
    }
}
@media screen and (max-width: 320px) {
    .list-org > span:nth-child(1) {
        max-width: 12rem;
    }
}

/* XIdeo */
.x-ideo-root img {
    max-width: none;
}
.x-ideo-body .x-ideo-chrom-label {
    font-size: 1.2rem;
}
.x-ideo-wrap {
    padding: .2rem .3rem;
}

.gb-band-panel {
    padding: .5rem 2rem;
    position: absolute;
    visibility: hidden;
    z-index: 60000;
}

.gb-band-panel:hover {
    visibility: visible;
}
.gb-band-content {
    font-size: 1.2rem;
    color: #555;
    background-color: #FFF;
    padding: .5rem 2rem;
    border: solid 1px #777;
    border-radius: .3rem;
    box-shadow: 1rem 1rem 2rem #444;
}

/* nwds fixes */

.content-wrap dd,
.content-wrap dt {
    border: none;
    padding: .3rem .5rem;
    width: auto;
}
.content-wrap dt {
    white-space: nowrap;
    width: 35%;
}

.content-wrap dl {
    border: none;
    margin: 0;
    padding: 0;
    clear: both;
}
.content-wrap h5 {
    margin: 1rem 0 .2rem 2rem;
    font-size: 1.1em;
}

.x-ideo-chrom-label,
.x-ideo-chrom {
    cursor: pointer;
}

.genome-info a,
.genome-info span {
    display: inline-block;
}

.gdv-menu {
    visibility: hidden;
    position: absolute;
    margin: 0;
    padding: 1rem 0;
    background-color: #FFF;
    border: solid 2px hsl(210, 65%, 35%);
    border-radius: .5rem;
    box-shadow: 1rem 1rem 2rem #555;
    right: 0;
    z-index: 20;
}

.gdv-menu-link:hover .gdv-menu {
    visibility: visible;
}

.gdv-menu-link {
    position: relative;
    width: 3em;
}

.gdv-menu-link button {
    min-width: 3.5em;
}

.gdv-menu-link:hover button {
    background-color: #0071bc;
    box-shadow: inset 0 0 0 2px #0071bc;
    color: #ffffff;
}

.gdv-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.gdv-menu li {
    margin: 0;
    padding: .5rem 2rem;
    border-style: solid;
    border-width: 1px 0;
    border-color: transparent;
    white-space: nowrap;
}

.gdv-menu li:hover {
    border-color: hsl(210, 65%, 35%);
    background-color: hsl(210,50%,95%);
}