@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    box-sizing: border-box;
}

html {
	font-family: 'Open Sans';
}

body {
	font-family: 'Open Sans';
	color:rgba(255, 255, 255, 0.9);
	margin:0;
	padding:0;
	font-size:18px;
	font-weight:300;
}
div {
	  box-sizing: border-box;
}

h1 {
/*    color: black;*/
    font-size: 1.75rem !important;
	font-weight:300;
	line-height:2;
}

h4 {
	margin:0.5em 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border-width: thin 1px 0 thin;
/*	border-color: black;*/
}

tr {
	border-width: thick;
	margin-bottom: 2px;
	margin-top: 2px;
}

.striped-tbody tr:nth-child(even) td {
	background-color: #f2f2f2;
}

th, td {
	text-align: left;
}

a,a:link,a:active,a:visited {
	color: rgba(167, 220, 229, 0.9);
	text-decoration:none;
	transition: background-color 0.5s ease 0s;
	transition: color 0.5s ease 0s;
}
a:hover {
	color: rgba(255, 255, 255, 0.9);
	background-color: rgba(26, 95, 167, 1);
}
.header {
	padding-top: 32px;
	padding-bottom: 12px;
	background-color:#1f262f;
}

.page-header {
	color: #fffffc;
	font-size: 1.5rem;
	margin-top: 12px;
	margin-bottom: unset;
}

.logo {
	
	text-align: center;
}

section {
	float:left;
	width:75%;
	margin-left:25px;
}

.login {
	text-align:center;
	margin: 8px 0 8px 0;
}
.login img {
	width:52%;
	min-width:260px;
	display:inline-block;
}

.inner-container {
    max-width:50rem;
    margin: 0 auto;
    background-color: #fff;
    box-shadow:0 0 5rem 0 rgba( 0, 0, 0, 0.1 );
    width: 90vw;	
}

.login-form {
	background: rgba(19, 40, 58, 0.9);
	text-align:left;
	padding:1.5rem;
}

.logo-image {
    display: block;
}

hr {
    margin: 2rem 0;
    border:none;
    height: 0;
    border-top: 1px solid #ddd;
}

input,
textarea{
	color:rgba(19, 40, 58, 0.9) !important;
	border:1px solid #ddd;
	font-size:0.8em;
	padding:0.5rem;
	display:block;
    width: 100%;
	margin: 0.25rem 0 0.5rem;
	background-color:rgba(255,255,255,0.9) !important;
	font-family: 'Open Sans';

}
.ripple-hover-button[type="submit"]{
	margin-top:3rem;

}
.ripple-hover-button {
	position: relative;
	background-color:#13283A;
	border:none;
    font-size: 1.25rem;
	color:rgba(255,255,255,0.9);
	width:10rem;
	padding:0.5rem 1rem;
	display:block;

	margin: 0 auto;
	cursor: pointer;
	/* overflow ist wichtig damit nur der Button den Ripple Effekt hat */
	overflow: hidden;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	text-decoration: none;
}

.ripple-hover-button:hover {
	background-color: rgba(26, 95, 167, 1);
}
/*
.ripple-hover-button:after {
	content: "";
	background: #98fb98;
	display: block;
	position: absolute;
	padding-top: 300%;
	padding-left: 350%;
	margin-left: -20px!important;
	margin-top: -120%;
	opacity: 0;
	transition: all 1s
}

.ripple-hover-button:active:after {
	padding: 0;
	margin: 0;
	opacity: 1;
	transition: 0s
}
*/
/*
	Diese CSS Klasse mit ihren Zusätzen für hover und ripple Effekt sind Kopien
	der anderen CSS Klasse für die primären Buttons. Nur die Farbe ändert. Das könnte schöner gelöst werden,
	aber ich habe nicht die Zeit mich in alle möglichen Lösungsansätze einzulesen... :-(
*/
.secondary-ripple-hover-button {
	position: relative;
	background-color: #dfdddd;
	border:none;
	font-weight:bold;
	font-size: 1.25rem;
/*	color: #1e1e1e;*/

	width:10rem;
	padding:0.5rem 1rem;
	display:block;

	margin:2rem auto;
	cursor: pointer;
	/* overflow ist wichtig damit nur der Button den Ripple Effekt hat */
	overflow: hidden;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	text-decoration: none;
}

.secondary-ripple-hover-button:hover {
	background-color: #bfbfbf;
}
/*
.secondary-ripple-hover-button:after {
	content: "";
	background: darkgray;
	display: block;
	position: absolute;
	padding-top: 300%;
	padding-left: 350%;
	margin-left: -20px!important;
	margin-top: -120%;
	opacity: 0;
	transition: all 0.8s
}

.secondary-ripple-hover-button:active:after {
	padding: 0;
	margin: 0;
	opacity: 1;
	transition: 0s
}
*/
input[type="checkbox"]{
	border:none;
	width:20px;
	height:15px;
	display:inline;
	transform: scale(1.3);
	padding:0.5rem;
	margin: 0;
}

input[type="file"] {
	border:0px solid #ddd;
}
input.ripple-hover-button[type="submit"] {
	margin-top:10rem;
}

textarea {
	width:100%;
	height:8rem;
    resize: vertical;
    min-height: 8rem;
    max-height: 20rem;
}

label {
/*
	font-weight:bold;
*/
	font-size:1rem;
	margin-top:55px;
	line-height:1.75;
 /*   color: black; */
}
.file-label {
	width: 4rem;
    margin-top: 15px;
    float: left;
}
.mussfeld {
	font-weight: normal;
	font-size:0.7em;
	vertical-align: super;
}

/* Fehler auf der Seite */
.error {
/*	color:#be1624; */
}

/* Fehler im Formular */
.formularError {
	color:#be1624;
	font-weight: bold;
	font-size:0.75em;
    display:block;
    margin: 0.25rem 0;
}

.formularParagraph {
	padding-top:0.5rem;
	margin-top: 0;
	margin-bottom: 8px;
}

.formularSectionTitle {
	margin-top: 32px;
	margin-bottom: unset;
}

.transparent {
	opacity: 0.6;
}

.klein {
	font-size:0.8em;
	display:inline-block;
}
.gross {
	font-size:1em;
}

@media screen and (max-width:645px) {
	
	.login {
		padding:0;
	}
	.login-form {
		width:100% !important;
	}

	select.language-selector {
		margin-left: unset !important;
	}
}

select {
	/* styling */
	background-color:rgba(255,255,255,0.9);
	border: thin solid #ddd;
	display: inline-block;
	font: inherit;
	font-size: 0.8em;
	line-height: 1.25em;
	padding: 0.75em 3.5em 0.75em 1em;
	width: 100%;
/*	color: black; */

	/* reset */
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
}

select.minimal {
	background-image:
			linear-gradient(45deg, transparent 50%, gray 50%),
			linear-gradient(135deg, gray 50%, transparent 50%),
			linear-gradient(to right, #ccc, #ccc);
	background-position:
			calc(100% - 20px) calc(1em + 2px),
			calc(100% - 15px) calc(1em + 2px),
			calc(100% - 2.5em) 0.5em;
	background-size:
			5px 5px,
			5px 5px,
			1px 1.5em;
	background-repeat: no-repeat;
	margin: 0.25rem 0 0.5rem;
}

select.language-selector {
	float: right;
	width: unset;
	height: unset;
	margin: unset;
}

select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}
.inner-container {
    width: 100vw;
}