:root {
    --bg-color:#eee;
    --bg-shadow-color:#aaa;
    --text-bg-color:#fff;
    /*--text-topbg-color:#fd0;
    --text-topfg-color:#000;*/
	--text-topbg-color:#326;
    --text-topfg-color:#fff;
    --text-botbg-color:#eee;
    --text-infocardbg-color:#999;
    --text-infocardfg-color:#eee;
	
	--main-placeholderfg-color:#666;
	
    --text-fg-color:#000;
    --text-bg-color-footer:#eee;
    --text-fg-color-footer:#000;
    --text-fg-color-link:#000;
    --text-fg-color-link-hover:#000;
    --text-fg-color-link-footer:#0F4176;
	
	--text-bg-color-hamburger:#eee;
    --text-fg-color-hamburger:#000;
    --text-bg-color-hamburger-hover:#999;
	
	
	--text-bg-color-tooltip: rgba(0,0,0,0.6);
	--text-fg-color-tooltip: #fff;
	
	
	
    --navbar-bg:#0F4176;
    --navbar-button:#0F4176;
    --navbar-button-hover:#147BBD;
    --navbar-text:#fff;
	
	
	--box-shadow-color: rgba(0,0,0,0.3);
	--box-color:#fff;
	--box-font-color:#000;
	
	
	
    --main-accent-color:#147BBD;
    --main-accent-light-color:#66aed4;
    --main-accent-bg-color:#ADD4E9;
    --main-accent-textover-color:#fff;
    --main-accent2-color:#97BF20;
    --main-positive-color:#97BF20;
	--main-positive-light-color:#bcd56f;
    --main-neutral-color:#147BBD;
    --main-neutral-light-color:#66aed4;
    --main-neutral-lighter-color:#add4e9;
    --main-negative-color:#EC6501;
	
	--text-bg-divheadbarA: #005B7F;
	--text-bg-divstyleA: #A6BBC8;
	--text-bg-divheadbarB: #179C7D;
	--text-bg-divstyleB: #BDE3DB;
	--text-bg-divheadbarC: #7C154D;
	--text-bg-divstyleC: #E7BDD0;
	
	--text-fg-divheadbar: #fff;

	
    --main-disabled-fg:#333;
    --main-disabled-bg:#bbb;
	
	--font-weight-button:400;
	
	--font:'GlossaryFont';
	--fontSC:'GlossaryFontSC';
	--font-sans:'GlossaryFontSans';
}

@font-face
{
	font-family: "GlossaryFont";
	src: url("fonts/Alegreya-Regular.woff") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "GlossaryFont";
	src: url("fonts/Alegreya-ExtraBold.woff") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face
{
	font-family: "GlossaryFont";
	src: url("fonts/Alegreya-Italic.woff") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face
{
	font-family: "GlossaryFont";
	src: url("fonts/Alegreya-ExtraBoldItalic.woff") format("truetype");
	font-weight: bold;
	font-style: italic;
}

@font-face
{
	font-family: "GlossaryFontSans";
	src: url("fonts/AlegreyaSans-Regular.woff") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "GlossaryFontSans";
	src: url("fonts/AlegreyaSans-ExtraBold.woff") format("truetype");
	font-weight: bold;
	font-style: normal;
}






@font-face
{
	font-family: "GlossaryFontSC";
	src: url("fonts/AlegreyaSC-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "GlossaryFontSC";
	src: url("fonts/AlegreyaSC-ExtraBold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face
{
	font-family: "GlossaryFontSC";
	src: url("fonts/AlegreyaSC-Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face
{
	font-family: "GlossaryFontSC";
	src: url("fonts/AlegreyaSC-ExtraBoldItalic.ttf") format("truetype");
	font-weight: bold;
	font-style: italic;
}




form
{
    margin-block-end: 0px;
}


h1
{
	font-size: large;
}

h2
{
	font-size: medium;
}

h3
{
	font-size: small;
}





em {
   font-style: italic;
}

strong {
   font-weight: bold;
}

/**{
	font-family: var(--font), serif;
	font-weight: 300;
}*/


body{
	background: var(--bg-color);
	font-family: var(--font), serif;
	line-height: 150%;
	margin:0px;
}

div.card{
	width: 500px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	background: var(--text-bg-color);
	box-shadow: 0px 0px 20px -2px var(--bg-shadow-color);
	padding: 20px 40px;
	border-radius: 	15px 15px 15px 15px;
}

div.disabled{
	background: var(--main-disabled-bg);
	color: var(--main-disabled-fg);
}


.headmenu {
	position: fixed;
	top: 0;
	/*width: 100%;*/
	margin: 0px;
	background: var(--text-bg-color);
	box-shadow: 0px 0px 20px -2px var(--bg-shadow-color);
	padding: 0px 0px;
	justify-content: center;
	font-family: var(--font-sans), sans;
	display: flex;
	z-index: 100;
}

.headmenucentercolumn {
	background: var(--text-bg-color);
	padding: 0px 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height:0px;
	width: 800px;
}

.headmenurow {
	/*width: 100%;*/
	background: var(--text-bg-color);
	padding: 0px 10px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


.hamburgermenu {
	/*position: fixed;
	top: 60;
	width: 50%;*/
	border-top: 5px solid var(--text-bg-color-hamburger);
	color: var(--text-fg-color-hamburger);
	display: flex;
	flex-wrap : wrap;
	flex-direction: row;
	justify-content : flex-end;
	align-items : flex-end;
}

.hamburgerbuttonpressed {
	background: var(--text-bg-color-hamburger);
}



.hamburgermenu > a {
	display: block;
	color: var(--text-fg-color-hamburger);
	/*background: var(--text-bg-color-hamburger);*/
	text-align: center;
	padding: 24px 24px;
	text-decoration: none;
}

.hamburgermenu > a:hover {
  background: var(--text-bg-color-hamburger);
}


.searchbox {
	width: 600px;
	max-width: 60%;
	margin:0px 0px;
	padding: 0px 10px;
	display: flex;
    align-items: center;
}



.titleboxsym {
	height:100%;
	margin-bottom:0px;
	padding: 0px 20px;
	min-width:60px;
	/*flex: none;*/
	font-size: small;
	line-height: 120%;
	min-width:64px;
	display: flex;
    align-items: center;
	background:transparent;
}




.revealOnMobile
{
	display:none !important;
}

@media (max-width: 700px)
{
	.titleboxsym {
	padding: 10px 8px;
	min-width:40px;
	text-align: right;
	width: 10%;
	}
	
	.searchbox {
	width: 70%;
	max-width: 60%;
	margin:0px 10px;
	padding: 0px 8px;
	flex: none;
	}
	
	.headmenucentercolumn {
	width: 100%;
	}
	
	.hideOnMobile
	{
		display:none;
	}

	.revealOnMobile
	{
		display:block !important;
	}


}

.titlebox {
	background:transparent;
	flex: none;
	/*border-right: 2px solid #19a;*/
	line-height:90%;
}
.titlebox > a {
	text-decoration: none;
}

.titleboxsym > a {
	text-decoration: none;
}

.main
{
	margin-top: 60px;
	padding: 10px;
}



.cardcontainer {
	width: 500px;
	max-width: 100%;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;

	box-sizing: border-box;

	background: var(--text-bg-color);

	box-shadow: 0px 0px 20px -2px var(--bg-shadow-color);
	padding: 0px 0px;
	border-radius: 20px;
}

.cardhead {
	/*margin: -20px -40px;*/
	margin-bottom:0px;
	padding: 15px 40px;
	background-color: var(--text-topbg-color);
	color: var(--text-topfg-color);
	background: rgb(25,171,160);
	background: linear-gradient(90deg, rgba(25,171,160,1) 0%, rgba(29,122,161,1) 100%);
	border-top-right-radius: 20px;
	/*border-top-left-radius: 10px;*/
}


.cardheadB {
	background: linear-gradient(90deg, rgba(187,0,86,1) 0%, rgba(124,21,77,1) 100%) !important;
}





.cardtopline {
	/*margin: -20px -40px;*/
	padding: 5px 40px;
	background-color: var(--text-bg-color);
	font-size: small;
	border-bottom: 2px solid black;
}

.cardmain {
	padding: 10px 40px;
	background-color: var(--text-bg-color);
}

.cardadditionalinfoarea {
	padding: 10px 40px;
	background-color: var(--text-bg-divstyleA);
}


.cardfoot {
	/*margin: -20px -40px;*/
	padding: 5px 40px;
	background-color: var(--text-botbg-color);
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	font-size: small;
}


.infocard {
	background-color: var(--text-infocardbg-color) !important;
	color: var(--text-infocardfg-color) !important;
	font-size: small;
	overflow: hidden;
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}








input[type=text], input[type=email], input[type=password], input[type=date], input[type=url], input[type=number], input[type=time], select, textarea {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  /*font-weight: bold;*/
}


input[type=button], input[type=submit], input[type=reset], a.button, .custom-file-button, button
{
	background-color: var(--main-accent-color);
	border: none;
	color: #fff !important;
	padding: 8px 10px;
	text-decoration: none;
	margin: 4px 4px;
	cursor: pointer;
	border-radius: 4px;
	text-align: center;
	font-size: medium;
	display: inline-block;
	font-weight: var(--font-weight-button);
	align-items: center;
	justify-content: center;
	display: flex;
	position: relative;
	height:32px;
	box-sizing: border-box;
	font-family: var(--font-sans), sans;
}

.small {
	font-size: small;
	line-height: 100%;
}




input[type=text].searchfield
{
	font-weight: bold !important;
	font-family: var(--font), serif;
	width: 100%;
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-weight: normal !important;
  color: var(--main-placeholderfg-color);
}
::-moz-placeholder { /* Firefox 19+ */
  font-weight: normal !important;
  color: var(--main-placeholderfg-color);;
}
:-ms-input-placeholder { /* IE 10+ */
  font-weight: normal !important;
  color: var(--main-placeholderfg-color);
}
:-moz-placeholder { /* Firefox 18- */
  font-weight: normal !important;
  color: var(--main-placeholderfg-color);
}





a:link {
  color: inherit;
  font-weight: 400;
}

/* visited link */
a:visited {
  color: inherit;
  font-weight: 400;
}

/* mouse over link */
a:hover {
  color: inherit;
  font-weight: 400;
}

/* selected link */
a:active {
  color: inherit;
  font-weight: 400;
}



ul.tools {
    display: none;
    list-style: none;
    box-shadow: 0px 0px 4px rgba(0,0,0,.5);
    border: solid 1px #000;
    position: absolute;
    background: #fff;
	box-shadow: 0px 0px 20px -2px var(--bg-shadow-color);
	padding: 5px 5px;
	border-radius: 5px;
}

.infobox {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 2px;
  display: inline-block;
  border-radius: 0px 4px 4px 4px;
  box-sizing: border-box;
}

.infoboxsmall {
  width: 100%;
  padding: 2px 16px;
  margin: 8px 2px;
  display: inline-block;
  border-radius: 0px 4px 4px 4px;
  box-sizing: border-box;
  font-size:small;
  font-family: var(--font-sans), sans;
}


.sharpTop {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  margin-top: 0px !important;
}

.sharpBot {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  margin-bottom: 0px !important;
}

.lightbg {
	background-color: #bbb !important;
	color: #000 !important;
}


.error{
	background-color: #e5babd !important;
	color: #a92028 !important;
}


.okay{
	background-color: #bcd56f !important;
	color: #000 !important;
}

.info{
	background-color: #b6d9eb !important;
	color: #000 !important;
}

.negative{
	background-color: var(--main-negative-color) !important;
	color: #a92028 !important;
}


.positive{
	background-color: var(--main-positive-color) !important;
	color: #000 !important;
}

.neutral{
	background-color: var(--main-neutral-color) !important;
	color: #000 !important;
}





.divheadbarA{
	background-color: var(--text-bg-divheadbarA)  !important;
	color: var(--text-fg-divheadbar) !important;
}
.divheadbarB{
	background-color: var(--text-bg-divheadbarB)  !important;
	color: var(--text-fg-divheadbar) !important;
}
.divheadbarC{
	background-color: var(--text-bg-divheadbarC)  !important;
	color: var(--text-fg-divheadbar) !important;
}

.divstyleA{
	background-color: var(--text-bg-divstyleA)  !important;
}
.divstyleB{
	background-color: var(--text-bg-divstyleB)  !important;
}
.divstyleC{
	background-color: var(--text-bg-divstyleC)  !important;
}

.fontColorA{
	color: var(--text-bg-divheadbarA) !important;
}
.fontColorB{
	color: var(--text-bg-divheadbarB) !important;
}
.fontColorC{
	color: var(--text-bg-divheadbarC) !important;
}



hr {
    display: block;
    overflow: hidden;
    border: 1px solid #000;
}


.tooltip {
  position: relative;
  display: inline-block;
}

.pointerUnderlined {
	cursor: pointer;
	text-decoration: underline;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: var(--text-bg-color-tooltip);
  color: #fff;
  text-align: center;
  border-radius: 0px 10px 10px 10px;
  padding: 15px;
  margin: 15px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -50px;
  opacity: 0;
  transition: opacity 0.3s;
  line-height: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent  var(--text-bg-color-tooltip) transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.strikethrough{
	text-decoration: line-through;
}


.del{
	background: #EAB0CA;
	color: #BB0056;
	text-decoration: line-through;
}
.ins{
	background: #BDE3DB;
	color: #179C7D;
	text-decoration: underline;
}



table {
  padding: 5px;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}

tr {
	padding: 5px;
	border-top: solid 1px #444; 
	border-bottom: solid 1px #444;
}

tr:hover {
	background-color: var(--text-bg-divstyleA);
}



.barchartContainer {
  width: 100%; /* Full width */
  /*background-color: var(--main-accent-light-color)*/;
  box-sizing:border-box;
}

.barchartBar {
  text-align: right; /* Right-align text */
  padding-top: 0px; /* Add top padding */
  padding-bottom: 0px; /* Add bottom padding */
  padding-left: 0px; /* Add bottom padding */
  padding-right: 0px; /* Add bottom padding */
  /*color: white;*/ /* White text color */
  box-sizing:border-box;
  /*background-color: var(--main-accent-color);*/
  overflow: visible;
  white-space: nowrap;
}