w@keyframes fadeIn {
  0%  {opacity: 0; background-color: black;}
  100%  {opacity: 1; background-color: white;}
}
@keyframes wavein {
  0% {transform: scale(0.1); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}
@keyframes waveout {
  0% {transform: scale(1); opacity: 1;}
  30% {transform: scale(1.25); opacity: 1;}
  99% {display: none;}
  100% {transform: scale(0); opacity: 0;}
}

html {
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
	border:0;
	}

body {
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
    font-family: 'Solectris',sans-serif;
    font-size: 15pt;
	border:0;
	}

#cookie {
  display: block;
  position: absolute;
  z-index:6;
  bottom: 175px;
  width: 77%;
  text-align:justify;
  background-color: #dd8833;
  border-radius: 6px;
  padding: 10px;
  margin-left: 45px;
  border: 2px solid darkblue;
}

#ckclose {
  text-size: 15pt;
  text-color: white;
}

#content {
	display: block;
	overflow: auto;
	position:absolute;
    padding-left: 22pt;
    padding-right: 22pt;
	z-index:3;
	top:71px;
	bottom:123px;
	#border-left:1px solid #000;
	#border-right:1px solid #000;
	#background:#fff;
    -webkit-animation: wavein 1s;
    animation: fadeIn 1s;
	}

* html #content {
	top:0;
	bottom:0;
	height:100%;
	width:100px;
	border-top:154px solid #fff;
	border-bottom:50px solid #fff;
	}

.infoPop {
  display: none;
  position:absolute;
  left:73px;
  top:250px;
  width:597pt;
  padding:8px;
  border: 1px solid #e1e1ff;
  border-radius:9px;
  background-color: #ffffef;
  box-shadow: 1px 6px 14px 0px rgba(0,0,0,0.2);
  font-size:12pt;
  color:#343464;
  text-align:justify;
  transition-property: display opacity;
  transition-duration: 2s;
  transition-behavior: allow-discrete;
}
.infoPop[open] {
  display: block;
  opacity: 1;
}
.infoPop[open]::backdrop {
  display: none;
}

.pintro {
  margin-top:-2px;
  text-align:justify;
  font-size:18px;
}

.pinfo {
  margin-top:-2px;
}

#head {
	position:absolute;
	top:0;
	width:100%;
	height:40px;
	z-index:5;
	}

* html #head {
	top:2px; width:642px; height:70px;
	}

.footnote {
  position: absolute;
  bottom: 0px;
  font-family: Solectris, sans-serif;
  width: 100%;
  margin: 0px;
  padding: 10px 35px;
  font-size: 12pt;
  background-color: #252560;
  color: #fdfdf0;
}

#foot {
	position:absolute;
	#margin-left:-321px;
	#left:50%;
	bottom:0;
	width:100%;
	#min-width:640px;
	height:80px;
	#background:url(heading.jpg); background-position:0 100px;
	#font-size:1em;
	z-index:5;
	#border:1px solid #000;
	#font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	#font-weight:bold;
	color: #e2e2b4;
    margin: 0px;
    padding: 0px 35px;
    font-size: 12pt;
    background-color: #252560;
}
#foot a {
    color: #e2e2b4;
    text-decoration: none;
    }

.impress {
    background-color:#ffffe6;
    font-size:12pt;
    text-align:justify;
	width: auto;
    margin: 0 15%;
}

li {margin-bottom: 4px;}

.topline {
  display: block;
  # padding: 0;
  # margin: 0;
  padding-bottom: 2px;
  width: 100%;
  height:3px;
  color: #43488e;
  background-color: #8383b7;
}
.topLogoFrame {
  display: table;
  width: 100%;
  height: 40px;
  # border-style: dotted dashed solid double;
  # box-shadow: 20px 10px 25px #d0d0d0;
}
.topLogoText {
  padding:0pt;
  margin:0pt;
  border-spacing: 0;
  border-collapse: collapse;
  width:245px;
  font-size:12.5px;
  color: #4040d5;
}
.topLogo {
  margin:auto;
  width: 390px;
  height: 46px;
}

.topNav {
  display:table-cell;
  width:62px;
  height:40px;
  font-size:21pt;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  background-color:#b4b4e9;
}

h1 {
  font-size:21pt;
  color: darkblue;
  font-weight:bold;
  font-style: normal;
  text-align:left;
  margin-bottom: 5px;
}

h2 {
  font-size:19pt;
  color:#323232;
  font-weight:bold;
  font-style: normal;
  text-align: left;
  margin-bottom: 0px;
}

.h2 {
  font-size:19pt;
  color:#323232;
  font-weight:bold;
  font-style: normal;
  text-align: left;
  margin-bottom: 5px;
}

.h2bl {
  font-size:18pt;
  color:darkblue;
  font-weight:bold;
  font-style: normal;
  text-align:left;
  margin-bottom: 5px;
}

h3 {
    margin-bottom: 0px;
}

h4 {
    margin-bottom: 0px;
}

.cblue {
  color:darkblue;
}
.cred {
  color:darkred;
}
.bbl {
  font-weight:bold;
  color:darkblue;
  margin-bottom: 5px;
}

.pagetext {
  border: 1px solid darkred;
  position: absolute;
  top: 10pt;
  padding: 40px 40px;
  text-align: justify;
  font-size: 14pt;
  height: 450pt;
  overflow-y: scroll;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.Rechnung {
  border: 1px solid darkred;
  position: absolute;
  top: 10pt;
  padding: 40px 40px;
  text-align: justify;
  font-size: 14pt;
  height: 450pt;
  overflow-y: scroll;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#### Begin Dir List ####
.DIRMAIN {
  position: relative;
  overflow: hidden;
  width: 98%;
  margin-left: 30px;
  border: 1px solid #232323;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 1;
}

.dirlist {
  # position: relative;
  # display: block;
  # float: left;
  overflow: hidden;
  min-width: 120px;
  # text-align: center;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: #d9d9ef;
  font-size: 10pt;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #5353c1;
  border-bottom-right-radius: 7px;
  padding: 4px 6px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
}

.dirlist a , .dirlist-item a {
  font-weight: bold;
  text-decoration: none;
  color: #5353c1;
}

.dirlist-content {
  display: none;
  position: absolute;
  # overflow: auto;
  background-color: #f9f9f9;
  # top: 10px;
  # left: -5px;
  # text-align: left;
  margin-left: 4px;
  # width: auto;
  max-width:650px;
  min-width: 442px;
  # max-height: 570px;
  # width:370px;
  box-shadow: 1px 6px 14px 0px rgba(0,0,0,0.2);
  border-bottom-right-radius: 9px;
  padding: 4px 6px;
  z-index: 1;
}

.dirlist-dir {
  position: relative:
  width: 100px;
  float: left;
  # text-align: center;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: #d9d9ef;
  font-size: 10pt;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #5353c1;
  border-bottom-right-radius: 7px;
  padding: 4px 6px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
}
.dirlist-item {
  # float:left;
  margin-left:7px;
  margin-right:7px;
  margin-bottom:6px;
  width: 110px;
  padding:3px;
  font-size: 10pt;
  background-color: #d9d9ef;
  box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.2);
  border-bottom-right-radius: 6px;
}

.dirlist-dir:hover .dirlist-content {
  display: block;
}
#### End Dir List ####

.picmenu {
  min-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  # display: flex;
  # align-items: center;
  # justify-content: center;
}

.menupic {
  position: relative;
  display: inline-block;
  float: left;
  width: 590px;
  height: 340px;
  margin-left: 20pt;
  margin-right: 20pt;
  margin-bottom: 50px;
  background-color: #6f6fce;
  box-shadow: 20px 10px 25px #d0d0d0;
}

.menuitmdes {
  display: none;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #f9f9f9;
  text-align: left;
  margin-left: 4px;
  min-width: 135px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-bottom-right-radius: 9px;
  padding: 4px 6px;
  transition: width 2s;
  z-index: 1;
}

.menupic:hover .menuitmdes {
  display: inline-block;
}

.DMENU {
  position: relative;
  width: 90%;
  margin-left: 30px;
}

.dropdown {
  position: relative;
  display: block;
  float: left;
  min-width: 120px;
  # text-align: center;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: #d9d9ef;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #5353c1;
  border-bottom-right-radius: 7px;
  padding: 4px 6px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
}

.dropdown a {
  font-weight: bold;
  text-decoration: none;
  color: #5353c1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  top: -45px;
  left: -45px;
  text-align: left;
  margin-left: 4px;
  min-width: 480px;
  # width:370px;
  box-shadow: 1px 6px 14px 0px rgba(0,0,0,0.2);
  border-bottom-right-radius: 9px;
  padding: 4px 6px;
  transition: width 2s;
  z-index: 1;
}

.dropdown-item {
  float:left;
  margin-left:7px;
  margin-right:7px;
  margin-bottom:6px;
  width: 110px;
  padding:3px;
  font-size: 12pt;
  background-color: #d9d9ef;
  box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.2);
  border-bottom-right-radius: 6px;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

.DBUTTON {
  position: relative;
  width: 1050px;
  margin: auto;
  padding-top: 1px;
  /* border: 1px solid blue; */
  text-align: center;
}

.dropbutton {
  position: relative;
  display: inline-block;
  min-width: 90px;
  text-align: center;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: #6f6fce;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15pt;
  font-weight: bold;
  color: #ffffff;
  border-bottom-right-radius: 7px;
  padding: 4px 6px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
}

.dropbutton a {
  font-weight: bold;
  text-decoration: none;
  color: #fefed9;
}

.dropbutton-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  text-align: left;
  margin-left: 4px;
  min-width: 135px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-bottom-right-radius: 9px;
  padding: 4px 6px;
  transition: width 2s;
  z-index: 1;
}

.dropbutton:hover .dropdown-content {
  display: block;
}
html1 {
  float: bottom;
  height: 100%;
  overflow: hidden;
}

.scrolleff {
  height: 60%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.scrolleff {
  # background: linear-gradient(to right, #d3d3d3 25%, #1d1515, #d3d3d3 75%);
  display: grid;
  justify-items: center;
  perspective: 600px;
  perspective-origin: center center;
  // Previously JS was needed, but with body { height: 100% } instead of body { height: 100vh }, it works!
  // perspective-origin: center calc((var(--s, 1) * 1px) + 50%);
}

.xtr_input {
  font-size:12pt;
  height: auto;
  color: black;
  border-radius: 5px;
  background-color:#d2d2f4;
  border-top:1px solid #dfdffa;
  border-left:1px solid #dfdffa;
  border-bottom:1px solid #c0c0e4;
  border-right:1px solid #c0c0e4;
  }

.xtr_input:hover {
  background-color:#e4e4e4;
  border-top:1px solid #d0d0e6;
  border-left:1px solid #d0d0e6;
  border-bottom:1px solid #f9f9fa;
  border-right:1px solid #f9f9fa;
}

.xtr_input:focus {
  background-color:#e6e6c0;
  border-top:1px solid #f7f7f7;
  border-left:1px solid #5f5f5f;
  border-bottom:1px solid #5f5f5f;
  border-right:1px solid #f7f7f7;
}

.right_buttn {
  font-size:14pt;
  height: auto;
  background-color: #454585;
  color: #fdfdf0;
  font-family: Solectris, sans-serif;
  font-weight: bold;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border:1px solid #8f8fe2;
  border-style: outset;
  padding: 4px 20px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
  }

.right_buttn:hover {
  background-color: #e9e9c0;
  color: #2f2fa0;
}

.right_buttn:focus {
  background-color: #d7e7f4;
}

.left_buttn {
  font-size:14pt;
  height: auto;
  background-color: #454585;
  color: #fdfdf0;
  font-family: Solectris, sans-serif;
  font-weight: bold;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  border:1px solid #8f8fe2;
  border-style: outset;
  padding: 4px 20px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
  }
.left_buttn:hover {
  background-color: #e9e9c0;
  color: #2f2fa0;
}

.left_buttn:focus {
  background-color: #d7e7f4;
}
  
.xtr_buttn {
  font-size:14pt;
  height: auto;
  background-color: #454585;
  color: #fdfdf0;
  font-family: Solectris, sans-serif;
  font-weight: bold;
  border-radius: 9px;
  border:1px solid #8f8fe2;
  border-style: outset;
  padding: 4px 20px;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
  }

.xtr_buttn:hover {
  background-color: #e9e9c0;
  color: #2f2fa0;
}

.xtr_buttn:focus {
  background-color: #d7e7f4;
}

.box {
  content: url(/art/solectris_ball.png);
  # background: linear-gradient(to right, white 10%, #b9b0b0);
  width: 100vw;
  height: 50px;
  transform-style: preserve-3d;
  transform: translateX(-11%) rotateY(95deg);
  transform-origin: right center;
}

.box2 {
  content: url(/art/solectris_ball.png);
  # background: linear-gradient(to left, white 70%, #b9b0b0);
  transform: translateX(11%) rotateY(-95deg);
  transform-origin: left center;
}

.CONT1 {
  margin-top: 20px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  width: 100%;
}

input[type="file"]::file-selector-button {
  border-radius: 3px;
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: white;
  border: 1px solid #000000;
  # box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}

/* ------------------------ */

/* default boilerplate to center input */



input[type="file"] {
  position: relative;
}

input[type="file"]::file-selector-button {
  width: 136px;
  color: transparent;
}

/* Faked label styles and icon */
input[type="file"]::before {
  position: absolute;
  pointer-events: none;
  top: 10px;
  left: 16px;
  height: 20px;
  width: 20px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}

input[type="file"]::after {
  position: absolute;
  pointer-events: none;
  top: 11px;
  left: 40px;
  color: #0964b0;
  font-family: Arial, non-serif;
  font-size: 13pt;
  content: "Browse ";
}

/* ------- From Step 1 ------- */

/* file upload button */
input[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 33px;
  cursor: pointer;
  width:110px;
  background-color: #dfdfff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4c6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}

input[type="file"] {
  position: relative;
  outline: none;
  padding: 4px;
  margin: -4px;
}

input[type="file"]:focus-within::file-selector-button,
input[type="file"]:focus::file-selector-button {
  outline: 2px solid #0964b0;
  outline-offset: 2px;
}