body {

	/* --main-text-color: #07091d;
	--main-bg-color: #ffffff; */ 

	--main-text-color: #eeeeee;
	--main-bg-color:#314059; 
	/* --main-bg-color: #1f1f1f; */

	--main-window-bg-color: #314059;
	--main-window-text-color: #eeeeee;
	
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

#statsContainer > div {
	left: auto !important;
	right: 0px !important;
}

/*-- Legend --*/
#legend {
	position: absolute;
	right: 10px;
	/* width: 200px; */
	background-color: white;
	color: #0f123c;
}

#legend .legendBullet {
	display: inline-block; 
	width: 20px; 
	height: 20px;
	margin:10px;
}

.legendEntry {
	display: flex;
	align-items: center;
	padding-right: 10px;
}

#selectionContainer {
	display: inline-block;
	position: absolute;
	right: 220px;
	background-color: #314059;
	border-radius: 7px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#selectionContainer button {
	font-size: 1.2em;
	margin: 4px;
}

#selectedContainers {
	display: inline-block;
	color: #eeeeee;
	padding: 15px;
}

#selectedLocation {
	display: inline-block;
	color: #eeeeee;
	padding: 15px;
}

#selectedContainers > div {
	margin-top: 9px;
}

#selectedLocation > div {
	margin-top: 9px;
}


body {
	font-family: verdana;
	
}

/* Dropdown Button */
.dropbtn {
  color: var(--main-text-color);
  padding: 14px;
  font-size: 1.4em;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  background-color: var(--main-bg-color);
}
 
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
 background-color: #283347;
}
  
 /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
#menu.hide {display: none;}
 
.menu {
 display: flex;
 background-color: var(--main-bg-color);
 color: var(--main-text-color);
 border-radius: 7px;
 padding-top: 15px;
 padding-bottom: 15px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 10;
}

.menu .menuGroup{
 display: inline-block;
 padding-left: 15px;
 padding-right: 15px;
}

.menu .menuGroup:not(:first-child) {
	border-left: 1px solid white;
}

.menu .menuGroup h3{
 margin-top: 5px;
}

.menu button, .linkBtn {
	background-color: #476aa3; 
	border: none;
	color: white;
	padding: 7px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 3px;
	font-size: 1.4em;
	margin: 5px;
	z-index: 10;
}

 /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 #settings.hide {display: none;}
 #debug.hide {display: none;}

/* X Y Z coordinates */
.cursorPosition {
	border-radius: 4px;
	background-color: #314059; 
	display: inline-block;
	color: white;
	padding: 7px 10px;
}


.splash {
	/* The image used */
	position: absolute;
	/* z-index: 10; */
	background-image: url("assets/splash.png");
  
	/* Full height */
	height: 100%; 
	width: 100%;
  
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*----------------------*/ 
/* Login form */
/*----------------------*/ 

/* The popup form - hidden by default */
.form-popup {
	display: none;
	position: fixed;
	z-index: 9;
  	top: 50%;
  	left: 50%;
    transform: translate(-50%, -50%);
	border: 3px solid #f1f1f1;
	border-radius:3px;
}
  
/* Add styles to the form container */
.form-container {
	max-width: 300px;
	padding: 10px;
	background-color: white;
}
  
/* Full-width input fields */
.form-container .inputField {
	margin: 10px;
	padding: 14px;
	border: none;
	background: #f1f1f1;
    font-size: 17px;
}
  
/* When the inputs get focus, do something */
.form-container .inputField:focus {
	background-color: #ddd;
	outline: none;
}
 
/* Set a style for the submit/login button */
.form-container .btn {
	background-color: #314059;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}
  
  
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
	opacity: 1;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
#filterContainer.hide {display: none;}

#filterContainer {
	  display:flex;
	  padding-top:60px;
	  top: 50px;
	  left: 0px;
	  max-height: 100;
	  background-color: var(--main-bg-color);;
	  color: var(--main-text-color);
	  border-radius: 3px;;
	  padding: 5px;
	  padding-left: 20px;
	  z-index: 5;
}

#filterContent {
	max-height: 90vh;
	overflow: auto;
}

/* ---------------------- */
/*       Bayview 	      */
/* ---------------------- */
.bayViewTable th {
	text-align: left;
	padding-left: 20px;
}

.bayViewTable td {
	padding-left: 20px;
	padding-top: 5px;  
}

.bayWindowMenuSelection {
	margin-left: 10px;
}

input[type="color" i] {
	padding: 0px;
	margin-left: 10px;
	border-style: none;
	border-width: 0px;
	height: 20px;
	width: 20px;
}

.importStacks {
	padding: 25px;
}

.containerSelected {
	stroke-width: 3px; 
	stroke: red;
	fill: red;
}

.svgBayView {
	animation-duration: 0.6s;
	animation-name: fade-in;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------------------- */
/*    Config editor       */
/* ---------------------- */
.configTable td {
	padding-left:20px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.configTable th {
	padding-left: 10px;
}

#devInfo {
	
	top: 500px;
	left: 100px;
	border: 1px solid grey;
	padding: 3px;
}

.devInfoHeader {
	padding: 3px;
	background-color: #314059;;
	color: white;
	cursor: grab;
}

#progressInfo {
	bottom: 30px;
	right: 20px;
	background-color: #314059;
	color: white;
	visibility: hidden;
}

/* ------------------------- */
/*			Tab strip        */
/* ------------------------- */
.tabholder > .tab {
	display: inline-block;
	padding: 10px;
	background-color: #476aa3;
	margin-left: 10px;
	
}


/* ------------------------- */  
/*          Window           */
/* ------------------------- */  
.windowContainer {
	background-color: var(--main-window-bg-color);
	box-shadow: 7px 8px 17px 5px rgba(94,94,94,0.55);
	box-sizing: border-box;
	color: var(--main-window-text-color);
	padding: 10px;
	border-radius: 3px;
	resize: both;
	min-height: 100px;
	min-width: 120px;
	max-height: 90vh;
	display: flex; 
	flex-direction: column;
}

.windowContainer .svg-text {
	fill: var(--main-window-text-color);
}

.windowContainer[style*="height"] {
	max-height: unset !important;   
}

.windowHeaderOwnSpace{
	display: flex;
	align-content: stretch;
	justify-content: space-between;
	border-bottom: 1px solid var(--main-text-color);
	padding-bottom: 15px;
	user-select: none;
}

.windowHeaderUserSpace {
	padding-top: 5px;
	padding-bottom: 5px;
}

.windowTitle {
	text-align: center;
	flex-grow: 1;
}

.windowCloseBtn {
	margin-left: 10px;
}

.windowContent { 
    flex-grow: 1;
	padding-top: 15px;
}

/* ------------------------- */  
/*          Stack overview   */
/* ------------------------- */

.stackOverview {
	border: 1px solid var(--main-text-color);
}

.stackOverviewHeader {
	padding: 10px;
	border-bottom: 1px solid var(--main-text-color);
}

.stackOverviewDivider {
	display: flex;
}

.stackOverviewLeft {
	border-right: 1px solid var(--main-text-color);
	padding: 10px;
}

.stackOverviewRight {
	padding: 10px;
}

.drag-select {
	background-color: rgba(20, 137, 189, 0.5);
  }

/* svg.intersected rect{
	fill: red !important;
  } */

.visible {
	visibility: visible ! important;
}


.bayviewCell svg text {
	user-select: none;
}

.btn-active {
	font-weight: bolder;
}

/* ------------------------- */  
/*          Tooltip          */
/* ------------------------- */
.tooltip {
	pointer-events: none;
	background-color: #fffaf0;
	display: inline-block;
	color: black;
	padding: 10px;
	border-radius: 3px;
	position: fixed;
	z-index: 20; 
	white-space: pre-wrap;
	border: 1px solid black;
	box-shadow: 7px 8px 17px 5px rgba(94,94,94,0.55);
}

/* ------------------------- */
/*          Stackview        */
/* ------------------------- */
.svgStackView text {
	user-select: none;
}