html, body {
    background-color: #000;
    margin: 0px;
    padding: 0px;
    height: 100%
    /*overflow: scroll !important;*/
}
/*html {
    height: 100%;
}*/
body {
 font-family: "Arial";
    /*min-height: 100%*/
}

@keyframes onair {
	0% {text-shadow: 0 0 10px #fff, 0 0 20px #3FB3DA ;}
	50% {text-shadow: none;}
	100% {text-shadow: 0 0 10px #fff, 0 0 20px #3FB3DA;}
}
.onair {
    animation:onair 2s linear 0s normal none infinite running;
}

button[data-toggle="popover"] {
    z-index: 999;
}

/*********WEBIX FIX-UPS*************/
.webix_tree_folder {
    display: none
}

.webix_tree_folder_open {
    display: none
}
/* Reliable scroll bar styling soes not appear to be possible
even using the ::webkit extensions has no effect in Chrome */
.webix_ss_vscroll_header {
    background: #535353 none;
}

.webix_ss_vscroll.webix_vscroll_y {
    color: #2f2f2f !important;
    background: #535353 !important;
}

.webix_vscroll_body {
    background: #535353;
}

.webix_el_textarea textarea {
    color: #2f2f2f;
}

.webix_el_box {
    color: black;
}

.webix_slider_title {
    color: white;
}

.webix_resizer_x, .webix_resizer_y {
    background-color: #3d3d3d;
}


.webix_view. input {
    color: #EAEAEA;
    background-color: #2D2D2D;
}

input.webixtype_base {
    color: #EAEAEA;
    background: #535353 none;
}

input[type="file"] {
    color: #EAEAEA;
    background: #535353 none;
}

.webix_ss_filter input {
    color: #EAEAEA !important;
}

.webix_el_box input[readonly="true"] {
    background: #2D2D2D none;
}

input[type="text"] {
    color: #EAEAEA;
    background: #535353 none;
}



.webix_ss_header {
    background: #535353 none;
}


textarea.webix_inp_textarea {
    color: #EAEAEA;
    background: #535353 none;
}

.webix_slider_title {
    margin-bottom: -4px;
}

button.webixtype_base {
    color: #EAEAEA;
    background: #535353;
}

button.webixtype_base[disabled="true"] {
    color: #EAEAEA;
    background: #2D2D2D;
}

td div.webix_last, td div.webix_hcell, td div.webix_first {
    color: #EAEAEA;
    background: #535353 none;
}

/* force the accordion item control for Uploading selections to the left */
div.webix_accordionitem_button {
    float: left;
}

.webix_accordionitem.vertical > .webix_accordionitem_header .webix_accordionitem_button {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAAAx0lEQVQoU2OAgZkzZ7I2NDRU19XV3a6vr/8GZF8H0kVAzAJVAgGhoaHMQMEtQPwfHTc2Nq76//8/I1QpA0NTU1McNoUwDNQQDFXKwAC0cj1Q8APQCd3oGCQOlF8MVQpWfBAoeA/KRQEgcSDeBOWCFU8EmvIbiO8CJd4A6bdA+hWIDxIHslugSsFuVgUKfgUKYrgXKP6xo6NDBqoUAoCe8IaaCFcItPFlc3OzE1QJKmhvbxcEKooDaqwDKozu7OzkhUrRFDAwAAC585cWoFhvAwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
}
.webix_accordionitem.vertical.collapsed > .webix_accordionitem_header .webix_accordionitem_button {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAAA3UlEQVQoU7WPzwoBcRSFp5SysLL1Dp7BG8iOna2FGnvzL00zaTyDoiazVLZSsmZlZ6nYSDaixHdnruIBnPqa3zn3/GbuGB9FUVRwXdezLGvvOM4NdvhukiQ5rWSybTsPS3hRPsAczuK5FGstE2/oyECZSEZ59ZXV0qKI2wuGJxhwbkhGoS0eZKVxWhRhtoQbtT/ikqwzU5uuMaJ8hz2DoWScp+LhSdZPiyLP8yoED5AfjE3TLPBci4dLEARlrWYirMNVCx+OfLWqlV/5vl9i/xb0+FozDMOijv4qw3gDKbyKtJJ+mVQAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
}
/*********END WEBIX FIX-UPS*************/
/*.ontologyMultiview {
    float: right;
} */
.master- {
  height: 100vh;
}
.main_content {
    height: calc(100vh - 60px);
	white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100vw;
}

.content_visible {
	display: inline-block;
}

.content_hidden {
	display: none !important;
}

.layout_hidden {
    visibility: hidden;
}

.content_left {
	/*height: 90vh;*/
    height: calc(96vh - 60px);
    position: relative;
	display: inline-block;
    width: 100%;
    left: 6px;
    resize: horizontal;
}

/* used to nudge the layout to stop scroll */
.pad_layout {
    padding-left: 10px;
    padding-right: 40px;
}

.pad_plot {
    padding-left: 10px;
    padding-right: 10px;
}

.no_pad_plot {
    padding: 0;
    /*padding-left: 0;
    padding-right: 0;*/
}


.content_center {
	/*height: 95vh;*/
    vertical-align: top;
	/*width: 60%;*/
    width: 100%;
    position: relative;
    display: inline-block;
    top: 0%;
}

.content_right {
	/*height: 90vh;*/
    height: calc(96vh - 60px);
    width: 100%;
	font-size: 8px;
    /*position: relative;*/
	display: inline-block;
    /*right: 6px;*/
    overflow: hidden;
    resize: horizontal;
}

.dropdown-menu {
    padding: 6px;
    min-width:500px;
    background-color: #111;
    color:#eee;
}

#svgContainer {
    width: 100%;
    height:89vh;
    overflow:auto
}

#BrainLocator2D {
    width: 100%;
}


img.selected_thumbnail {
    height: 135px;
    width: auto;
    border: 4px solid rgb(250, 0, 60);
}

img.unselected_thumbnail {
    height: 135px;
    width: auto;
    border: 1px solid rgb(0, 0, 0);
}


/* dat gui is picking up some inline styles that force it to top left - disable these */
div.dg[style] {
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.close-button {
    display: none;
}

.title {
	color: #eee;
}

.myfooter {
	clear: both;
	/*color: #eee;*/
}

.transparent_img {
    background-color: #ddd;
    margin: 2px;
}
/* adjust popover to match dark theme */
.popover-title {
    color: #eee;
    background-color: black;
}

/* adjust popover to match dark theme */
.popover-content {
    color: #eee;
    background-color: black;
}

/* allow fat popover to accomodate the dat-gui */
.popover {
    max-width: 500px;
}

.ontology_style {
	font-size: 12px;
}


#dat-gui-container{
    margin-bottom: 20px;
}

#loading {
    left: 35%;
    margin: auto;
    position: fixed;
    text-align: center;
    top: 30%;
    /*width: 20%;*/
    z-index: 899;
    padding: 20px;
	color: #eee;
}
a {
    color: #3FB3DA;
}

.tutorialWindow {
    z-index: 999 !important;
    background: #000000;
}
.open ul li  a {
    color: #3FB3DA;
}
.btn.btn-small.navbar-btn  {
    color: #EAEAEA;
    background-color: #2D2D2D;
}
.xtk-progress-bar {
    display: none !important;
}

select {
    color: #EAEAEA;
    background-color: #535353;
}

select[disabled="true"] {
    color: #EAEAEA;
    background-color: #2D2D2D;
}



.loader-bg {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@keyframes boxair {
	0% {box-shadow: 0 0 10px #fff, 0 0 20px #3FB3DA;}
	50% {box-shadow: none;}
	100% {box-shadow: 0 0 10px #fff, 0 0 20px #3FB3DA;}
}

.boxair {
    animation:boxair 2s linear 0s normal none infinite running;
}

.brain_view_style {
    background-color: #000;	
	color: #fff;	
}

.BrainLocator3D {
    background-color: #000;	
	color: #fff;	
}

.BrainLocatorSvg {
    background-color: #000;
	color: #fff;
}

/* dat selections are black on white */
div div.c select {
    color: black;
}

/* bulletless liet items */
.no_bullet {list-style-type: none;}

.selection {
    stroke          : white;
    stroke-width    : 2px;
    stroke-dasharray: 4px;
    stroke-opacity  : 0.9;
    fill            : transparent;
}

.selected_circle {
    stroke          : #d0d0d0 ;
    stroke-width    : 2px;
    stroke-dasharray: 4px;
    stroke-opacity  : 0.5;
    fill            : #d0d0d0;
	opacity			: 0.5;
}

.brscale {
    background: linear-gradient(to right, #1010D0, #A0A0A0, #B01010 );
}

/*.body {
    position:relative;
    z-index: 1;
}*/

.left-tip {
    text-align: left;
    padding-left: 10px;
}

#front_screen {
    position:relative;
    z-index: 100;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background: black;
}

#front_screen_spacer {
    height: 160px; 
    z-index: 100;
    pointer-events: none; 
    background: transparent;
}

.visible_strip_footer {
    /*clear: both;*/
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    /* Set the fixed height of the footer here */
    height: 160px;
    background-color: black;
    color: #aaaaaa;
    /*overflow:scroll;*/
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    /*height: 160px;
    width: 100%;
    bottom: 0;
    left: 0;*/
}

.hidden_strip_footer {
    display: none;
    position: relative;
    height: 0%;
    width: 0%;
}

.charts_space {
    max-height: 100%;
    overflow-y: auto;
}

.plot_title {
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: small;
    padding-left: 10px;
}

.tooltip-inner {
    min-width: 200px;
    max-width: 350px;
    text-align: left;
    font-size: 14px;
}

.tooltip.top-left .tooltip-arrow {
    bottom: -5px;
    left: 5px;
    border-width: 5px 5px 0;
    border-top-color: black;
}
.tooltip.top-right .tooltip-arrow {
    bottom: -5px;
    right: 5px;
    border-width: 5px 5px 0;
    border-top-color: black;
}
.tooltip.bottom-left .tooltip-arrow {
    top: -5px;
    left: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: black;
}
.tooltip.bottom-right .tooltip-arrow {
    top: -5px;
    right: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: black;
}

option[disabled] {
    font-weight: bold;
    font-style: italic;
}