:root {
	/* Hermann Hofmann Colors */
	--hh_red: #b21f2c;
	--hh_blue: #458dcc;
	--hh_bronze: #857a70;
	--hh_green: #9bc33b;
	--hh_brown: #65361b;
	--hh_gray: #5e5e5d;
	
	--primary-color: #302AE6;
	--secondary-color: #536390;
	--font-color: #424242;
	--bg-color: #fff;
	--heading-color: #292922;
	--third-color: #f8f8f8;
	--fourth-color: #44414170;
	--fifth-color: #f2f2f2ea;
	--tr-nth-color:#f2f2f2;
	--hover_color: #458DCC59;
	--secondary_hover_color: #458dcc59;
	--shadow_color: rgba(0,0,0,0.5);
}

.light-mode {
	--primary-color: #302AE6;
	--secondary-color: #536390;
	--font-color: #424242;
	--bg-color: #fff;
	--heading-color: #292922;
	--third-color: #f8f8f8;
	--fourth-color: #44414170;
	--fifth-color: #f2f2f2ea;
	--tr-nth-color:#f2f2f2;
	--hover_color: #458DCC59;
	--secondary_hover_color: #458dcc59;
	--shadow_color: rgba(0,0,0,0.5);

}

/* Color choosen by JW
.dark-mode {
	--primary-color: #9A97F3;
	--secondary-color: #818cab;
	--font-color: #e1e1ff;
	--bg-color: #161625;
	--heading-color: #818cab;
	--third-color: #2C3333;
	--tr-nth-color: #413F42;
	--hover_color: var(--hh_blue);
}*/

/* Colors choosen by OC */
.dark-mode {
	--primary-color: #9A97F3;
	--secondary-color: Lightgray;
	--font-color: white;
	--bg-color: #343434;
	--heading-color: #818cab;
	--third-color: #565656;
	--fourth-color: #565656;
	--fifth-color: #565656;
	--tr-nth-color: #575757;
	--hover_color: var(--hh_blue);
	--secondary_hover_color: #458dcc59;
	/*rgba(69, 141, 204, 0.05)*/
	--shadow_color: rgba(0,0,0,0.5);

}


body {
	background-color: var(--bg-color);
	color: var(--font-color);
}

.header {
	height: 100%;
	text-align: center;
	border-radius: 5px;
	margin: auto;
}

h1 {
	color: var(--secondary-color);
	background-color: var(--hh_blue);
	color: white;
}

h2 {
	color: var(--secondary-color);
	background-color: var(--hh_blue);
	color: white;
}

a {
	color: var(--primary-color);
}



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--third-color);
  position: fixed;
  overflow: hidden;
}

li a {
  display: block;
  color: var(--font-color);
  padding: 8px 16px;
  text-decoration: none;
}

li a.dropdown_active {
  background-color: var(--hh_blue);
  color: white;
  text-decoration: none;
}

li a:hover:not(.dropdown_active) {
  background-color: var(--secondary_hover_color);
  color: var(--font-color);
  text-decoration: none;
}

.content {
	width: 100%;
	margin-top:85px;
	padding:5px 16px;
	flex: 1;
    min-height: 100vh;
}

.gauge_div {
	text-align:center;
	margin: auto;
	width:300px;
	height: 325px;

}

#svg_pc_gauge {
	width:300px;
	height:250px;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6));
}

.donut {
	stroke: none;
	fill: Lightgray;
}

.donut2 {
	stroke: none;
	fill: Lightgray;
}

.donut3 {
		fill: var(--hh_blue);
		stroke: var(--hh_blue);
		stroke-width: 2;
}

.instrRectangle {
	stroke: transparent;
	stroke-width: 2;
	fill: transparent;
}

.text {
	fill: var(--font-color);
}

.needle {
	fill: var(--hh_red);
	stroke-width: 3;
	stroke: var(--hh_red);
}

.table_div {
  width: auto;
  height: 100%;
  overflow: visible;
  margin-left:2%;
}

.table_div th {
	position: sticky;
	top: 0;
	background-color: var(--bg-color);
}

/* table hover color */
.table-hover > tbody > tr:hover {
	background-color: var(--hover_color);
}

/* center table header*/
.table th {
	text-align: center;
	background-color: #b3967c45;
}

/* table: center text */
.table {
	text-align: center;
}

/* subtable: center text */
.table td[data-column="name"] {
	text-align: center;
	vertical-align: middle;
}

/* subtable: background color (not nth row) */
.serial_row {
	background-color: #458dcc17;
}

/* subtable: background color (nth row) */
tr.serial_row:nth-child(even) {
	background-color: var(--tr-nth-color);
}

/* subtable: border color */
.table-bordered > tbody > tr.serial_row > td {
	border: 1px solid var(--hh_bronze);
}

.graph_title {
	font-weight: bold;
	font-size: 20px;
	fill: var(--font-color);
}

.axis_label {
	font-weight: bold;
	font-size: 12px;
	fill: var(--font-color);
}

.graph_axis line{
	stroke: var(--font-color);;
}

.graph_axis path{
  stroke: var(--font-color);;
}

.graph_axis text{
  fill: var(--font-color);;
}

@media only screen and (max-width: 1000px) {
	.content {
		margin-top: 45px;
	}
}
 

@media only screen and (max-width: 768px) {

	/* ul {
		position: fixed;
		list-style-type: none;
		margin: auto;
		padding: 0;
		overflow: visible;
		background-color: var(--third-color);
		width: 100%;
		height:48px;
	} */

	li a.menu_div {
		/*font-size: 1.5em;*/
		padding: 12px 20px;
		text-decoration: none;
	}

	li a.dropdown_active {
		background-color: var(--hh_blue);
		color: var(--font-color);
		text-decoration: none;
	}

	li a:hover:not(.dropdown_active) {
		background-color: var(--secondary_hover_color);
		color: var(--font-color);
		text-decoration: none;
	}
	
	.content {
		padding:40px 10px 0px 10px;
		margin: auto;
		width: 100%;
	}
	
	.table_div {
		width:auto;
		height: 375px;
		overflow: scroll;
	}
	
	.table_div th {
		position: sticky;
	}
	
	svg {
		width: 100%;
	}

}