#mainNav,#mainFooter {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}
.jsPanel-hdr {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%)!important;
}



html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
    overflow:hidden;
}
#mainFooter {
    background: rgba(250,250,250,0.8);
    font-size: 0.8em;
    font-size: 0.8em;
    height: 20px;
    min-height: 20px;
}
#treeCanvas{
    position: absolute;
    top:0;
    left:0;
    background: #fff;
}
canvas[resize] {
    width: 100%;
    height: 100%;
}
#zoomControlBox {
    position: absolute;
    top: 44px;
    left: 10px;
}

#zoomControlBox img {
    display: block;
    width: 2.0em;
    cursor: pointer;
}

#controlBox .nav-tabs .nav-item {
    line-height: 1;
}

input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}
input[type=number] {
    line-height:1;
    background: #efefef;
    border: 1px solid #ddd;
}
#treeScaleLabel, #internalScaleFixed ,  #autoCollapseBoot , #exportName {
    line-height:1;
    background: #efefef;
    border: 1px solid #ddd;
    width: 100%;
}

.inputSuffix {
    display: inline-block;
    position: relative;
    width: 100%;
    font: 1em Arial;
}

.inputSuffix input {
    width: 100%;
    font:1em Arial;
}

.inputSuffix span {
    position: absolute;
    left: 0;
    bottom:4px;
    color: #777;
    padding-left: 5px;
    font-size: 0.8em;
}
.inputSuffix span.suffixTop {
    top:0;
    font-size: 1em;
}

.itol .toggle-on{

    background: #dde;
}
.itol .toggle-off {
    background: #efefef;
}
.toggle.itol .toggle-handle {
    background: white;
    border-color: #777;
}
#controlBox .btn-group-sm {
    width: 100%;
}
#controlBox .btn-group-sm label {
    line-height: 1.1;
}
#controlBox .tab-pane {
    border: none;

}
#controlBox .sp-replacer {
    height: 1.4rem;
}
#controlBox .sp-replacer .sp-dd {
    line-height: 1.4rem;
}
#basicControlTable {
    width: 100%;
    font-size: 0.9em;
}

#basicControlTable th {
    text-align: center;
    padding-right: 10px;
    padding-left: 5px;
    /*background: #ffffff linear-gradient(90deg,#efefef,#ffffff) repeat-y;*/
}

.btn-control {
    background: #ffffff linear-gradient(180deg,#eeeeee,#dddddd) repeat-x;
    color:black;
}

.btn-control:hover {
    border-color: #99a;
    background: #bbc;
}
.btn-control:not(:disabled):not(.disabled).active {
    background: #eeeeff linear-gradient(180deg,#ccccdd,#eeeeff) repeat-x;
}

.btn-group-control {
    line-height: 1;
}
.optionLabel {
    background: #ffffff!important;
    white-space: nowrap;
    width:99%;
    text-align: right!important;
    padding-right: 5px;
    font-weight: normal;
}
.controlSectionRow th,.controlSectionRow td {
    border-top: 1px solid #ddd;
}

#controls .jsPanel-content {
    overflow-y: hidden;
}
#advancedWrap,#dsControlWrap {
    overflow-y: auto;
}
#advControlTable {
    width: 100%;
    font-size: 0.9em;
}
#advControlTable th {
    white-space: nowrap;
    font-weight: normal;
    text-align: right;
    padding-right: 5px;
}
#advControlTable th.advTableHeader {
    text-align: left;
    border-top: 1px solid #aaa;
    background: #eee;
    font-weight: bold;
    padding-left: 5px;
}

.advSubTable {
    width: 100%;
}
.advSubTable table {
    width: 100%;
    font-size: 0.9em;
    border-collapse: collapse;
}
.advSubTable th {
    white-space: nowrap;
}
.toggleAdvBut {
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
}

#metadataSource, #multiBootRangeOperator, #autoCollapseClass {
    background: #eee;
    border-radius: 2px;
    width: 100%;
    border: 1px solid #ddd;
}

#colFillColorCell .sp-replacer, #treeScaleColT .sp-replacer,#bootSymbolColorCl .sp-replacer, #bootLabelColorCl .sp-replacer,#rngMetadataLabelColorCl .sp-replacer {
    width: 100%;
}
.colFWid .sp-replacer {
   width: 100%;
}
.colReplWid .sp-replacer {
    min-width: 50px;
    width: 100%;
}
.bootOption3 .sp-replacer {
    width: 75px;
}
.bootOption3 td {
    text-align: right;
}
#intScaleHd th {
    text-align: center;
    font-weight: bold;
}
#timeScaleModeHd {
    text-align: center!important;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa
}

#rangesControl {
    max-width: 100px;
}
#rangesControl {
    font-size: 0.9em;
}
#rangesControl th {
    text-align: right;
}
#rangesControl .btn-group-sm label {
    line-height: 1;
}
.dsSettings {
    color: #666;
    cursor: pointer;
}
.dsSettings:hover {
    color: #4169e1;
}
.rangeRow a.rangeDelButton,.dsRow a.dsDelButton {
    display:none;

}
.rangeRow:hover a.rangeDelButton,.dsRow:hover a.dsDelButton {
    display:block;
    color:white;
}
.rangeRow:hover .legendBoxButton,.dsRow:hover .legendBoxButton {
    display:none;
}
#rangeTable, #datasetTable {
    width: 100%;
}
.boxTableWrapper {
    max-height: 300px!important;
    overflow-x: auto;
    overflow-y: auto;

}
.rangeDelButton, .dsDelButton {
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #444;
    background: red;
    color: white;
    border-radius: 2px;
    margin-right: 5px;
    text-align: center;
    line-height: 22px;
}
.legendBoxButton {
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #444;
    border-radius: 2px;
    margin-right: 5px;
}
.legendBoxButton:hover {
    border: 1px solid #000;
}
.rboxLbl {
    cursor: all-scroll;
    width: 99%;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rangeDelButton {
    margin:0;
}
.dragGhost td,.dragGhost th {
    background: #f5f6f7 linear-gradient(to bottom, #c9c4c0 0, #b2aaa4 100%) repeat-x;
}
.dragDrag td,.dragDrag th {
    background: rgba(150,150,150, 0.5);
}
.dsLabCell {
    padding-right: 10px;
    width: 99%;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:move;
}

.drawButton {
    outline: none!important;
}
.drawButton:before {
    content: "";
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0px;
    vertical-align: text-top;
    background-color: transparent;
    background-size: cover;
}
#drawCircleTool:before {
    background-image: url(../img/ellipse.svg);
}
#drawSquareTool:before {
    background-image: url(../img/rectangle.svg);
}
#drawTextTool:before {
    background-image: url(../img/text.svg);
}
#drawPencilTool:before {
    background-image: url(../img/pencil.svg);
}
#drawLineTool:before {
    background-image: url(../img/pen.svg);
}
#drawUndoBtn:before {
    background-image: url(../img/obj_delete.svg);
}
#drawEditTool:before {
    background-image: url(../img/obj_edit.svg);
}
#drawClearBtn:before {
    background-image: url(../img/clear.svg);
}
#drawPanTool:before {
    background-image: url(../img/pan.svg);
}
#drawingToolOption {
    margin-top: 10px;
    width: 100%;
}
#drawingToolOption td {
    border: 1px solid #ddd;
    padding: 0 0 3px 0;
}
#drawingToolOption div.hdr {
    width: 100%;
    font-size: 1em;
    font-weight: bold;
    background: #ddd;
    margin:0 0px 1px 0px;
}
#drawingToolOption .sp-replacer {
    line-height: 1;
}

#drawingToolOption .btn-control {
    line-height: 1;
}
#drawingToolsT {
    border-collapse: collapse;
    width: 100%;
}
#drawingToolsT td {
    padding: 1px;
}

#drawingToolHelp {
    max-width: 190px;
    font-size: 0.8em;
    color: #666;
    font-style: italic;
    text-align: justify;
}
.drawingToolR {
    display: none;
}
.drawActive {
    background: #aaa;
}
.memeMotifPop {
    background: rgba(255,255,255,0.8);
}
.memeMotifPop th {
    text-align: right;
    padding-right: 5px;
}
.memeFlank {
    font-family: 'Courier New', Courier, monospace;
    color: gray;
    font-weight: bold;
}
.memeSeq {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.bootstrap-select.dropdown {
    z-index: 3000;
}
.treeInfo {
    width: 100%;
    font-size: 1.1em;
}
.treeInfo th {
    padding: 2px 5px;
    text-align:right;
}
.popMetaWrap {
    max-height: 50vh;
    overflow-y: auto;
}
.popMetaWrap table {
    width: 100%;
}
#nPopContent h2 {
    font-size: 1rem;
    margin:0 0 5px 0;
    border-bottom: 1px solid #aaa;
}
#nPopContent ol {
    margin:0;
    padding:0;
}
#nPopContent li {
    margin: 0 0 0 15px;
}
#nPopContent a {
    display:inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    overflow:hidden;
    max-width: 300px;
    text-overflow: ellipsis
}
#nPopContent .nLcur {
    background: #eee;

}

#tooltip {
    display:none;
    position: absolute;
    border: 1px solid #bbbbbb;
    z-index: 9999;
    background: rgba(255,255,255,0.9);
    min-width: 200px;
    max-width: 60vw;
    border-radius: 2px;
}
#tooltipTitle {
    font-size: 1rem;
    margin: 0;
    background: #f5f6f7 linear-gradient(180deg, rgba(220,220,220,0.9), rgba(255,255,255,0.9)) repeat-x;
    padding: 2px 5px 5px 5px;
}
#tooltipBody {
    font-size: 0.9rem;
    margin: 0;
    padding: 5px;
}
.dsPopupTable th {
    font-weight: bold!important;
    text-align: right;
}

.tPop h1 {
    margin:0;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.tPop h2 {
    margin: 0;
    font-size: 1rem;
}
.tPop h3 {
    margin: 0;
    font-size: 0.9rem;
    margin-top: 10px;
}
.tPop h4 {
    margin: 0;
    font-size: 0.8rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tPop td {
    font-size: 1rem;
    vertical-align: top;
    padding: 0px;
}
.tPop th {
    vertical-align: top;
    text-align: right;
    font-size: 0.9rem;
    padding: 0px 5px 0px 0px;
}
.tPop table {
    margin-top: 10px;
}
.tPop .ncbi th {
    font-size: 1rem;
}
.tPop div {
    text-align:center;
}
.tPop ul {
    margin-bottom: 0;
}

#leafmenu, #nodemenu, #viewmenu, #tleafmenu, #tnodemenu {
    padding-top: 0;
}
.nodeMenuSep {
    background: #f5f6f7 linear-gradient(180deg, #dddddd, #eeeeee) repeat-x;
    font-weight: bold;
    padding-left: 15px!important;
    padding: 3px 15px!important;
    margin: 0!important;
}

.e-menu-parent .sp-replacer {
    height: 1.3rem;
}
.e-menu-parent .sp-replacer .sp-dd {
    line-height: 1.3rem;
}
.e-menu-parent .btn-group-sm label {
    line-height: 1.1;
}
.e-contextmenu-wrapper ul .e-menu-item.menuCellLarge {
    background-color: transparent;
    cursor: default;
    line-height: normal;
    height: auto;
}
.e-contextmenu-wrapper ul .e-menu-item.e-selected, .e-contextmenu-container ul .e-menu-item.e-selected {
    background-color: #c9c4c0;
    color: #000;
    outline: 0 solid #c9c4c0;
}
.e-grid .e-paste::before, .e-grid-menu .e-paste::before {
    content: '\e739';
}
.menuCellLarge p {
    font-size: 0.8em;
    padding: 2px;
    text-align: center;
    margin: 3px 0 0 0;
}
.intLabEditNote {
    font-size: 0.8em;
    padding: 2px!important;
    text-align: center;
    margin: 0;
}
.menuCellTbl .sp-replacer {
    width: 100%;
}
.menuCellTbl  .btn-group{
    width: 100%;
}
.menuCellTbl button {
    width: 100%;
}
#pruneD {
    max-width: 300px;
    padding: 3px;
}
#pruneD .alert {
    font-size: 0.8em;
    text-align: center;
    padding: 3px;
    margin: 0;
}
#pruneD h4 {
    text-align: center;
    margin: 0 0 3px 0;
    font-size: 1.3rem;
}
.existRangeBoxButton {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    border: 1px solid #444;
    border-radius: 2px;
    margin-right: 0.5rem;
    margin-bottom: -0.2rem;
}

#dsControlTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
#dsControlTable th {
  font-weight: normal;
    text-align: right;
    padding-right: 5px
}
#dsControlTable .e-inplaceeditor .e-editable-value-wrapper {
    padding: 0 5px 0 0;
}
#dsControlTable th.dsTableHeader {
    text-align: left;
    background: #eee;
    font-weight: bold;
    padding-left: 10px;
    border-top: 1px solid #aaa;
}
#dsControlTable .sp-replacer {
    width: 100%;
}
#dsControlTable .dsEditButtons {
    display:flex;
}
#dsControlTable .dsEditButtons button {
    flex-grow:1;
    white-space:nowrap;
    line-height:1;
}

#dsLegendEntryWrap, #dsScaleEntryWrap  {
    max-height: 400px;
    overflow-y: auto;
}
.dsFieldEntry {
    border-collapse: collapse;
    width: 100%;
}
.dsFieldEntry th {
    text-align: center;
    border-bottom: 1px solid #aaa;
    padding: 0 5px;
}
#dsLegendPosX,#dsLegendPosY {
    background: white;
}
#dsLegEntryHead {
    width: 100%;
    border-collapse: collapse;
}
#dsLegEntryHead th {
    text-align: right;
    padding-right: 5px;
}
#dsLegendEdit th, #dsScaleEdit th {
    font-weight: normal;
}
#dsLegendEntry .sp-replacer,#dsScaleEntry .sp-replacer, #dsEditAddFBox .sp-replacer{
    width: 100%;
    height: calc(1.5em + .5rem - 1px);
}
#dsLegendEntry .btn-control {
    height: calc(1.5em + .5rem + 2px);
}
.bsLegImg {
    height: 20px;
}
.dsLegendAdvRow {
    display: none;
}
.prsErrorLog {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 3px;
    font-size: 0.9em;
    font-family: Courier;
}
.fixSelCell button.btn-control {
    left: 0!important;
}
.plMatchSeq {
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;

}

.plMatchNfo td {
    padding: 2px 10px;
}

.plMatchNfo th {
    padding: 2px 10px;
}
.plMatchNfo td {
    padding: 2px 10px;
}
.viewMenuTbl {
    margin: 0 -10px;
}
.viewMenuTbl th {

    padding: 3px 10px 3px 0;
}
.viewMenuTbl a {
    display:block;
    color: black;
    text-decoration: none;
    font-weight: normal;
    padding: 0 5px ;
}

.viewMenuTbl th:hover {
    background: #eee;
}
.newDsTable {
    width:100%;
}
.newDsTable th {
    text-align: right;
    padding-right: 10px;
    font-weight: normal;
}
.newDsTable .sp-replacer {
    width: 100%;
}
#autocompleteHelper {
    box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
    position:absolute;
    background: white;
    max-height: 150px;
    overflow-y: auto;
    padding: 0px;
}
#autocompleteHelper ul {
    padding:0;
    margin:0;
}
#autocompleteHelper li {
    list-style: none;
}
#autocompleteHelper li:hover {
    background: #eee;
}
#autocompleteHelper .activeAutoHit {
    background: #dddddd;
}

#autocompleteHelper li a {
    display: block;
    color: #212529;
    padding: 5px;
}
#autocompleteHelper li a:hover {
    text-decoration: none;
}
#autocompleteHelper div.err {
    color: darkred;
    padding:5px;
}
.e-help::before {
    content: '\e73d';
}
#rangesLegendControl {
    width: 100%;
    font-size: 0.9em;
}
#rangesLegendControl th {
    width: 99%;
    text-align: right;
}
#rangesLegendTitle {
    line-height: 1;
    background: #efefef;
    font: 1em Arial;
    border: 1px solid #ddd;
    width: 140px;
}

.exCol,.exBmp,.exTxt {
    display:none;
}
.exCol {
    font-size: 0.8em;
    text-align: justify;
}
#exportControlTable {
    width: 100%;
    font-size: 0.9em;
}
#exportControlTable th {
    font-weight: normal;
    text-align:right;
    padding-right: 5px;
}
.alnConPop {
    border-collapse: collapse;
}
.alnConPop th {
    padding: 1px 10px;
    text-align: left;
    border-bottom: 1px solid #bbb;
}

.alnConPop td {
    padding: 1px 10px;
    text-align: right;
    border-bottom: 1px solid #bbb;
}
#labelStyleOptions {
    border-collapse: collapse;
    width: 100%;
}
#labelStyleOptions th {
    text-align: right;
}
#labelStyleOptions input {
    width: 100%;
}

#labelStyleCreatorTable th {
    white-space: nowrap;
}
#labelStyleCreatorTable td {
    text-align: center;
}
#labelStyleCreatorTable input[type=number] {
    max-width: 75px;
}

.metadataEditHead th {
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}
.metadataEditLbl {
    font-family: Courier;
    text-align: right;
    padding: 0 5px;
}
.metadataEditLbl input {
    text-align: right;
}
.metaEditTh {
    text-align: right;
    padding: 0 5px;
}
.mathEx {
    font-family: Courier;
    background: #eee;
    padding: 3px;
}
.colorBlock {
    width: 100%;
}

.keySh {
    width: 100%;
    border-collapse: collapse;
}
.keySh th {
    background: #eee;
    font-size: 1.2em;
}
.keyHd {
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
}
.kbCur span {
    font-family: Courier;
    background: #efefef;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #666;
}
.kbHelp h1 {
    border-bottom: 1px solid #ddd;
    background: #eee;
    font-size: 1.4em;
    margin:-5px -10px 10px -10px;
    padding: 5px;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
}
.kbHelp .kbHt {
    white-space: nowrap;
    text-align: center;
    background: #efefef;
    padding: 3px 5px;
}
.kbHelp td span {
    font-family: Courier;
    padding: 0px 6px;
    font-weight: bold;
    border: 1px solid #666;
    background: #eee;
    border-radius: 3px;
}
.kbHelp