.text_normal_extra_small {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.5vw);}
.text_normal_mid_small {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.6vw);}
.text_normal_small {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.7vw);}
.text_normal_small_bold {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.7vw); font-weight: bold; }
.text_normal_extra_small_bold {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.4vw); font-weight: bold; }
.text_normal_small_italic {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.7vw); font-style: italic;}
.text_normal_big_bold {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 1vw); font-weight: bold; }
.text_normal {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 0.8vw); }
.text_normal_bold {font-family: Arial, Helvetica, sans-serif; font-size: calc(var(--base-font) + 1vw); font-weight: bold; }
.text_login	{font-family: Arial, Helvetica, sans-serif; font-size: 1vw; }
.menu_section {font-family: Arial, Helvetica, sans-serif; font-size: 1.1vw; font-weight: bold; color: #6A66AB; }
.menu_normal {font-family: Arial, Helvetica, sans-serif; font-size: 1vw; color: #6A66AB; }

html, body {
	height: 100%;
	width: 100%;
	margin: auto;

	--base-font: 3px;
}

/* unvisited link */
a:link {
	color:darkblue;
}
  
/* visited link */
a:visited {
	color: #6A66AB;
}

/* mouse over link */
a:hover {
	color: red;
}

/* selected link */
a:active {
	color: blue;
}

::-webkit-scrollbar {
    /*width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
	border-radius: 5px;
    background: #2B2E37;
}

.button {
    background-color: #2B2E37;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: calc(var(--base-font) + 0.6vw);
}

.button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #cccccc;
	color: #666666;
	border: 1px solid #999999;
  }

.button:hover:enabled {
    background-color: #70788f;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: calc(var(--base-font) + 0.6vw);
	cursor: pointer;
}

.menu-table{
	padding-left: 3%;
	padding-top: 3%;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.header{
	height:100%;
	width:100%;
	background-color:#2B2E37;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
}

.header .image {
	height:40%;
	padding-left: 1%;

	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.header .text {
	color:#C2C2C2;
	padding-right: 1%;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2.8vw;
}

.header .textTest{
	color:#EE3235;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2.8vw;
}

.top-container {
	height: 10%;
	width: 100%;
}

.bottom-container {
	height: 90%;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.menu-container{
	position: absolute;
	left: -20%;
	max-width: 18%;
	width: fit-content;
	padding: 0 20px;
	height: 90%;
	overflow-x: hidden;
	background-color: #C2C2C2;
	transition: left 0.5s ease-in-out;
	box-shadow: 7px 2px 10px rgba(128, 128, 128, 0.8);
}
.menu-container.expanded {
	left: 0px;
}

#menu-trigger {
	width: 28px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('/pictures/open.svg');
	cursor: pointer;
}
#menu-trigger.expanded {
	background-image: url('/pictures/close.svg');
}

.data-container{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 90%;
	overflow-x: hidden;
	overflow-y: hidden;
}

.groovybutton{
	font-size:11px;
	font-family:Verdana,sans-serif;
	font-weight:bold;
	color:#888888;
	background-color:#EEEEEE;
	border-style:solid;
	border-color:#BBBBBB;
	border-width:1px;
}