/* SCHRIFTART + Größe */
:root {
    --main-font: Calibri; 
	--main-size: 18px;
}

body {
margin-top: 0px; margin-left: 10px; margin-right: 0px;margin-bottom: 0px;
background-color: #333333;padding:0px; color: white; font-family: var(--main-font);
font-size: var(--main-size);
}


h1 { 
color:white;
margin-bottom:20px;letter-spacing:0.8px;
font-family: var(--main-font); font-size: 240%;
}

h3 { 
color:white;
margin-bottom:20px;letter-spacing:0.65px;
font-family: var(--main-font); font-size: 125%;
}

hr {
border: 0;
height: 5px; 
background-color: gray;
}

a:link {color:#FFFFFF; font-family: var(--main-font); text-decoration: none; }
a:visited {color:#FFFFFF; font-family: var(--main-font); text-decoration: none;}
a:hover {color:#FFFFFF; font-family: var(--main-font); font-weight:bold; background-color:#555555; }
a:active {color:#FFFFFF; font-family: var(--main-font); text-decoration: none;}

input {
background-color: #222222;
font-family: var(--main-font);
color: gray;
}

pre
{margin-top: 0px; margin-left: 10px; margin-right: 0px;margin-bottom: 0px;
background-color: #333333;padding:0px; color: white; font-family: var(--main-font);
font-size: var(--main-size);
}

table, th, td {
    border: 1px solid white;
	border-color: white;
    border-collapse: collapse;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
}
tr:hover {background-color: gray;}

th {
    background-color: gray;
    color: white;
}

input[type=submit] {
    background-color: #5e6368; 
    border: none;
    color: white;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

input[type=submit]:hover {
    background-color: white; 
    color: black;	
}

button {
    background-color: #5e6368;
    border: none;
    color: white;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button:hover {
    background-color: white;
    color: black;	
}

input[type=text] {
    width: 20%;
	padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid black;
    border-radius: 0px;
	font-size: 18px;
}
input[type=text]:focus {
    background-color: black;
	border: 3px solid gray;
    font-size: 18px;
}

input[type=number] {
    width: 20%;
	padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid black;
    border-radius: 0px;
	font-size: 18px;
}

input[type=password] {
    width: 20%;
	padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid black;
    border-radius: 0px;
	font-size: 18px;
}
input[type=password]:focus {
    background-color: black;
	border: 3px solid gray;
	font-size: 18px;
}	
input[type=email] {
    width: 20%;
	padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid black;
    border-radius: 0px;
	font-size: 18px;
}
input[type=email]:focus {
    background-color: black;
	border: 3px solid gray;
	font-size: 18px;
}	
input[type=date] {
    width: 20%;
	padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid black;
    border-radius: 0px;
	font-size: 18px;
    color: white;	
	font-size: 18px;
}
input[type=date]:focus {
    background-color: black;
	border: 3px solid gray;
	font-size: 18px;
}	

textarea {
    width: 20%;
	padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid black;
    border-radius: 0px;
	background-color: #222222;
	color: white;
	font-size: 12px;	
    resize: none;
}
textarea:focus {
    background-color: black;
	border: 3px solid white;
}	

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
  font-size: 18px;
}
::-moz-placeholder { /* Firefox 19+ */
  color: white;
  font-size: 18px;
}
:-ms-input-placeholder { /* IE 10+ */
  color: white;
  font-size: 18px;
}
:-moz-placeholder { /* Firefox 18- */
  color: white;
  font-size: 18px;
}

div.a {
    border: 5px solid gray;
	padding: 12px 20px;
	width: 40%;
}


/* -----------------  SELECT Anmeldung  ------------------ */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #222222;
  background-image: none;
}
/* Custom Select */
.select {
  position: relative;
  display: block;
  width: 8em;
  height: 3em;
  line-height: 3;
  background: #222222;
  overflow: hidden;
}
select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
  color: white;
  cursor: pointer;
  font-size: 17px;
  font-family: var(--main-font); 
}
select::-ms-expand {
  display: none;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em;
  background: #222222;
  pointer-events: none;
}
/* Transition */
.select:hover::after {
  color: darkgray;
}
.select::after {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

/* The container CHECKBOX ----------------------------------------------*/
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: black;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a grey background */
.container input:checked ~ .checkmark {
    background-color: gray;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* The message box is shown when the user clicks on the password field */
#message {
    display:none;
    position: relative;
    padding: 10px;
    margin-top: 0px;
}

#message p {
    padding: 0px 35px;
    font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -35px;
    content: "✔";
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #404040;
    color: white;
    text-align: left;
	border-bottom:1px solid #666;
    border-top:1px solid #666;
}