@charset "utf-8";
html {
    --checked-color: #2196F3;
    --bg-color: #fff;
}

BODY {
	background-color: #FFFFFF; 
	font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:#000000; 
	margin: 0; 
	padding: 0; 
	display: block; 
	min-width: 1000px;
}

/* Universal Selector section */
* {box-sizing: border-box}

/* Id selector section */
#DEV {background-color: orange;}
#TEST {background-color: orange;}
#PROD {background-color: orange;}
#Check {background-color: orange;}
#DAY {background-color: #00ADEF;}
#MONTH {background-color: #00ADEF;}
#YEAR {background-color: #00ADEF;}
#WEEK {background-color: #00ADEF;}

/* Element Selector section */
DIV { margin: 0; padding: 0; border: 0 none; }

IFRAME { 
	visibility:hidden;
	margin: 0; 
	padding: 0; 
	border: 0 none; 
}

.myframe {
   	min-width: 400px;
}

/* SVG and IMG are inline-block elements, that sits on text baseline -> +4px below for character descenders i.e. y or g */
IMG, SVG { 
	/* use vertical-align:top; if inline-block is needed */
	display: block;
}
TABLE TR TD SVG {
	display: inline;
	vertical-align:top;
}
TABLE { font-size: 1em; margin: 0; padding: 0; }

TR.alternate:nth-child(odd) {
  background-color: #EEEEEE; 
  color: #000000;
}

TR.alternate:nth-child(even) { 
  background-color: #FFFFFF;
  color: #000000;
}

/* TR, TD, TH { margin:0; padding: 0; border: 0 none; border-spacing: 0; } */
TH { color: white; background-color: #182B45; font-weight: bold; }
TH.small { font-size:13px; }
TD { font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; font-size:14px; color: black;}  
TD.small { font-size:13px; }

H1 { font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; border-bottom:6px solid #117B94; color:#117B94; margin: 0px; }
H2 { font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; font-size:22px; font-weight: bold; color:#117B94; margin: 0 0; }
H3 { font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; font-size:20px; font-weight: bold; color:#117B94; }
H4 { font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; font-size:18px; font-weight: bold; color:#117B94; }

A, A:link, A:active, A:visited { font-weight: 600; color: #117B94; text-decoration: none; }
A:hover { color: #4CAF50; margin-bottom:-2px; border-bottom:2px solid #46bd87}

SELECT, .boxed {
	background-color: #F0F0F0;
	color: #3F9AC9;
	border: 1px solid transparent;
	-webkit-border-radius: 4px;
  	border-radius: 4px;
	margin: 1px;
	padding: 2px 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

SELECT:hover {
	border: 1px solid #3F9AC9;
	/* box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */
}

FORM {  margin: 0px; padding: 0px; border-width: 0; }

TEXTAREA { 
	font-family: monospace;
	resize: none;
	font-size: 14px;
}

input, BUTTON {
	font-family: -apple-system, CorpoS, Verdana, Arial, Helvetica, sans-serif; 
	margin: 0; 
	padding: 0; 
}

input[type=submit], BUTTON[type=submit]  {
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  background-color: white;
  color: black;
  border: 1px solid #3F9AC9;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

input[type=submit]:hover, BUTTON[type=submit]:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  /* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); */
  background-color: #4CAF50; /* Green */
  color: white;
}

input[type=button] {
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  background-color: #C0C0C0;
  color: black;
  border: 1px solid #3F9AC9;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

input[type=button]:hover, button[type=button].tryout:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: #4CAF50; /* Green */
  color: white;
}

button[type=button].tryout {
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  background-color: #C0C0C0;
  color: black;
  border: 1px solid #3F9AC9;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 2px;  
}

input[type=submit]:disabled, input[type=button]:disabled, button[type=button].tryout:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

input[type=radio] { 
  font-size: 16px;
  accent-color: var(--checked-color);
}

input[type=checkbox] {
  font-size:16px;
  accent-color: var(--checked-color);
  vertical-align: middle;
  position: relative;
}

fieldset {
  background-color: #FFFFFF;
  border: 1px solid silver;
  border-radius: 4px;
  margin: 5px; 
  padding: 5px;
}

fieldset div {
    border: 1px none transparent;
    margin: 0px;
}

legend {
/*	border: 1px none transparent; */
	padding: 0.2em 0.4em;
	border:1px solid silver;
	border-radius: 4px;
	margin-left: 10px;
  color: #FFFFFF;
	text-align: left;
	background-image: linear-gradient(gray, silver 5%, gray);
}

nav{
    width: 100%;
    height: 45px;
    background-color: white;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.11);
}
nav ul{
    float: right;
    padding: 0px;
    margin: 0px;
}
nav ul li{
    float: left;
    list-style: none;
    position: relative;
    padding: 15px 10px 15px 10px;
    margin: 0px;
    font-weight: 600;
    color: #117B94;
    text-decoration: none; 
}
nav ul li ul{
    display: none;
    position: absolute;
    background-color: #eee;
    padding: 5px;
    margin-top: 15px;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
    display: block;
}
nav ul li ul li {
    padding: 5px;
}

/* Class Selector section*/

/*make use of GridViewImages.headerSortUp/Down*/

.headerSortDown:after,
.headerSortUp:after {
  content: ' ';
  position: relative;
  left: 8px;
  border: 5px solid transparent;
}

.headerSortDown:after {
  top: 14px;
  border-top-color: #6699FF;
}

.headerSortUp:after {
  top: -14px;
  border-bottom-color: #6699FF;
}

.headerSortDown,
.headerSortUp {
  padding-right: 10px;
}

.hl { font-size:14px; font-weight:normal; color: #FFFFFF; background-color: #182B45; }    
.hl_big { font-size:14px; font-weight:bold; color:#3F9AC9; }

.farbe_a { background-color: #000000; color: #FFFFFF; }
.farbe_b { background-color: #182B45; color: #FFFFFF; }
.farbe_c { background-color: #EEEEEE; color: #000000; } 
.farbe_d { background-color: #929292; color: #FFFFFF; }
.farbe_e { background-color: #FFFFFF; color: #000000; }

.farbe_silver { background-color: #C0C0C0; color: #FFFFFF; }
.farbe_rot { background-color: #CC0000; color: #FFFFFF; }
.farbe_blau { background-color: #0066CC; color: #FFFFFF; }
.farbe_hblau { background-color: #6699FF; color: #FFFFFF; }  
.farbe_gruen { background-color: #009900; color: #FFFFFF; }
.farbe_grau { background-color: #DDDDDD; color: #000000; }
.farbe_gold { background-color: #D9B526; color: #0000FF; }
.farbe_gelb { background-color: #FFFF00; color: #000000; }
.farbe_amber { background-color: #FFC600; color: #000000; }
.farbe_purple { background-color: #5A12B3; color: #FFFFFF; }
.farbe_green { background-color: #00FF00; color: #000000; }
.farbe_red { background-color: #FF0000; color: #FFFFFF; }
.farbe_mediumvioletred { background-color: mediumvioletred; color: white; }
.farbe_steelblue { background-color: steelblue; color: white; }
.farbe_mediumslateblue { background-color: mediumslateblue; color: white; }
.farbe_royalblue { background-color: royalblue; color: white; }
.farbe_darkcyan { background-color: darkcyan; color: white; }
.farbe_deepskyblue { background-color: deepskyblue; color: white; }
.farbe_mediumseagreen { background-color: mediumseagreen; color: white; }
.farbe_chocolate { background-color: chocolate; color: white; }
.farbe_firebrick { background-color: firebrick; color: white; }
.farbe_indianred { background-color: indianred; color: white; }
.farbe_darkviolet { background-color: darkviolet; color: white; }

.colorOrange { background-color: #F86900; color: white; }
.colorPurple { background-color: #9370DB; color: white; }
.colorLightBlue { background-color: #66B2FF; color: white; }
.colorPink { background-color: #FF66FF; color: white; }

.bg_light_yellow { background-color: #FFFFD0; }
.bg_light_red { background-color: #FFD0D0; }

.font_gray { color: #999999; }
.font_green { color: #009900; }
.font_red { color: #CC0000; }
.font_lawngreen { color: lawngreen; }
.font_lblue { color: #6699FF; }
.font_white { color: #FFFFFF; }
.font_black { color: #000000; }
.font_orange { color: #FFC600; }
.font_yellow { color: #FFFF00; }
.font_small { font-size:14px; }
.font_medium { font-size:16px; }
.font_large { font-size:20px; }

.error { font-weight: bold; color: #CC2E2B; }
.hint { color: royalblue; }
.delta { font-weight: bold;  background-color: yellow; color: red; }

.piclink { text-decoration: none; color: #FFFFFF; background-color: #FFFFFF; border: 0 none;}

.pwd {font-family: -apple-system, CorpoS, Verdana, Arial; font-size: 14px; }

.fehler { background-color:#dd0000; color: white; }
.fehler td { background-color:#dd0000; color: white; }

.InfoBoxHead { background-color : #6699FF; font-family : -apple-system, CorpoS, Verdana, Helvetica, Arial; font-size : 14px; color : #FFFF00; }
.InfoBoxBody { background-color : #000000; font-family : -apple-system, CorpoS, Verdana, Helvetica, Arial; font-size : 16px; color : #FFFFFF; }
.InfoBoxTail { background-color : #DDDDDD; font-family : -apple-system, CorpoS, Verdana, Helvetica, Arial; font-size : 14px; color : #000000; }

.left { text-align: left; }

.right { text-align: right; }

.top { vertical-align: top; }

.bottom { vertical-align: bottom; }

.mitte { text-align: center; }

.zentriert { vertical-align: middle; text-align: center; }

.center { margin-left: auto; margin-right: auto; }

.block { display: block; }

.floatleft {
    float: left; width: 27em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
}
 
.floatright {
    float: right; width: 27em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
}
  
.floatmiddle {
    margin: 0 27em 0 27em;
    padding: 0 ;
    border: 1px dashed silver;
}

.hl_userstat { 
	text-align: center;
	font-family: -apple-system, CorpoS, Verdana; 
	font-size:16px; 
	font-weight: bold;  
	margin: 0 0;
	background-image:url(/pic/background.jpg); 
	color: #182B45;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.autoscroll {
	height: 95px;
	overflow: auto;
	/* border: 1px solid #000; */
	padding: 1px;
}

.niceBorder {
	/* border: 1px none transparent;*/
	padding: 0.2em 0.4em;
	border: 1px solid silver;
	border-radius: 4px;
	margin-left: 0px;
  color: #FFFFFF;
	text-align: left;
	background-color : #B0B0B0;
}

.fineTable {
	margin: 10px;
	padding: 5px;
	border-collapse: collapse;
	border-spacing: 0px;
	border: 1px solid silver;
}

.colorCode {
	border: 1px solid silver;
	border-radius: 4px;
}

.nav-text {
  float: left;
  padding: 12px;
  margin: 0px;
  font-size: 20px;
  /* font-weight: 600; */
  color: #2c3e50;
}
 
/* Style tab links */
.tablink3 {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  font-size: 16px;
  width: 33.33%;
  &:hover {
    background-color: #777;
  }
}

.tablink4 {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  font-size: 16px;
  width: 25%;
  &:hover {
    background-color: #777;
  }
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 20px 20px;
}

.highlight { background-color: #D0D0FF; }

div.settings {
    display:grid;
    grid-template-columns: max-content max-content max-content;
    grid-gap:10px;
}

div.settings label       { text-align: right; }
div.settings label:after { content: ":"; }

div.tworows {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:10px;
}

div.tworows label       { text-align:left; vertical-align: text-top;}
div.tworows select	{ display: block; }
div.tworows label:after { content: ":"; }
div.tworows input[type=checkbox] { width:16px; }

div.tworows SELECT { width: 275px; }

.above input {
   display:block;
}

.hidden {
    position: absolute;
    visibility: hidden;
}

.infobox {
	opacity: .95;
}
.smallborder {
	border: 2px solid black;

}
/* fancy toggle */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 17px;
  &:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
  }
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

.form-inline {
  display: inline;
  flex-flow: row wrap;
  align-items: center;
}

/* Add some margins for each label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

@media (max-width: 800px) {
  .form-inline {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #6699FF;
  color: #fff;
  font-size:14px;
  text-align: center;
  border-radius: 4px;
  padding: 0px 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

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

.bigText {
  font-weight: bold;
   font-size:16px;
}

.biggerText {
  font-weight: bold;
   font-size:20px;
}