.HG_loginseite {
	background-color: rgb(255, 255, 255,0);
	background-image: url(/css/images_web/hg/HG_Hexagon_weiss._liegend.png);
	background-size: cover;
	background-position: center;
}
form.loginseite {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	border: none;
}
.loginseite div {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	border: none;
	margin-bottom: 30px;
}
.loginseite h1 {
	letter-spacing: 0.4em;
	word-spacing: 0.5em;
	text-transform: uppercase;
}	
.loginseite input {
	font-family: "Roboto", Helvetica, sans-serif;
	font-size: 12pt;
	color: rgb(0, 0, 0);
	font-weight: 300;
	line-height: 1.65;
	text-align: justify;
	text-justify: inter-word;
}
.email::placeholder {
	color: black;
} 
.emailfehler::placeholder {
	color: red;
} 
.password::placeholder {
	color: black;
} 
.passwordfehler::placeholder {
	color: red;
} 
#LogInFormular label {
	
	font-family: "Roboto", Helvetica, sans-serif;
	font-size: 12pt;
	color: rgb(0, 0, 0);
	font-weight: 300;
	line-height: 1.65;
	text-align: justify;
	text-justify: inter-word;
	border: 1px solid silver;
	padding-left: 0;
	background-color: transparent;
	height: 30px;
}	
.loginseite input[type="email"] {
	width: 93%;
	height: 30px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: silver 1px solid;
	padding-left: 0;								
	color: rgb(117, 117, 117);
}	
.loginseite input[type="password"] {
	width: calc(93% - 55px);
	height: 30px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: silver 1px solid;
	padding-left: 0;								
	color: rgb(117, 117, 117);
	font-size: 12pt;
	font-weight: 300;
	line-height: 1.65;
	text-align: justify;
	text-justify: inter-word;
	background-color: transparent;
		}
.loginseite input[type="submit"] {
	width: 93%;
	height: 30px;
	border: 1px solid;
	border-color: rgb(192, 171, 171);
	border-radius: 5px;
	color: black;
	background-color: rgba(248, 248, 248, 0.281);
	z-index: 16;
	opacity: 0.9;
	text-align: center;
}
.loginseite input[type="reset"] {
											width: 93%;
											height: 30px;
											border: 1px solid;
											border-color: rgb(192, 171, 171);
											border-radius: 5px;
											color: black;
											background-color: rgba(248, 248, 248, 0.281);
											z-index: 16;
											opacity: 0.9;
											text-align: center;
											text-transform: uppercase;
											}
.loginseite input[type="submit"]:hover {		
											background-color: #dbdbdb;
}
.loginseite input[type="reset"]:hover {		
											background-color: #d19595;
}	
.login_formularbereich ul {
											font-size: 1.55em;
											line-height: 2.0em;
											margin-top: 1em;
											margin-bottom: 1em;
											font-family: "Oswald";
											font-weight: 400;
											font-style: normal;
											color: black;
}
.login_formularbereich li {
											font-family: "Roboto", Helvetica, sans-serif;
											font-size: 12pt;
											font-weight: 300;
											line-height: 1.65em;
											list-style-position: inside;
											list-style-type: none;
}
.login_formularbereich a {
											font-family: "Roboto", Helvetica, sans-serif;
											font-size: 12pt;
											font-weight: 300;
											line-height: 1.65em;
											color: black;
}
.login_formularbereich a:hover a:visited {
											font-family: "Roboto", Helvetica, sans-serif;
											font-size: 12pt;
											font-weight: 300;
											line-height: 1.65em;
											text-decoration: underline;
											color: black;
}
.login_formularbereich table {
											
											width: 100%;
											border: none;
											margin-top: 2.4em;
											margin-bottom: 2.4em;
											text-align: left;
											height: auto;
											border-spacing: 0 1.2em;
											
}
.login_formularbereich tr {
											
											
}
.login_formularbereich th {
											width: 30%;
											border: none;
											font-family: "Roboto", Helvetica, sans-serif;
											font-size: 12pt;
											font-weight: 400;
											line-height: 0.9em;
											color: black;
											padding-right: 0.9em;
}
.login_formularbereich td {
											border: none;
											font-family: "Roboto", Helvetica, sans-serif;
											font-size: 12pt;
											font-weight: 300;
											line-height: 0.9em;
											color: black;
											padding-left: 1.2em;
											vertical-align: top;
}
.login_formularbereich input[type="submit"] {
											width: 93%;
											height: 30px;
											border: 1px solid;
											border-color: rgb(192, 171, 171);
											border-radius: 5px;
											color: black;
											background-color: rgba(248, 248, 248, 0.281);
											z-index: 16;
											opacity: 0.9;
											text-align: center;
}	
.login_formularbereich input[type="submit"]:hover {		
											background-color: #dbdbdb;
}
.icon_eye_open {
	width: 30px;
	height: 30px;
	background-color: transparent;
	background-image: url(/css/icons/icons_web/icon_eye_open.svg);
	background-position: right;
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
}
.icon_eye_closed {
	width: 30px;
	height: 30px;
	background-color: transparent;
	background-image: url(/css/icons/icons_web/icon_eye_closed.svg);
	background-position: right;
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
}
@media only screen and (orientation: portrait)  {	

											.login_formularcontainer {
												width: 100%;
												z-index: 500;
												padding: 0;
												display: flex;
												flex-direction: row;
												flex-wrap: wrap;
												align-content: stretch;
												align-items : stretch;
												justify-content: space-between;
												border: none;
												margin-bottom: 2em;
											}
											.login_icon {
												background-size: contain;
												background-position: center;
												background-repeat: no-repeat;
												width: 100%;
												height: 30vh;
												margin-bottom: 1em;
												display: flex;
												flex-direction: row;
												justify-content: center;
												align-items : center;
												border-radius: 3em 9em;
												border-color: #363636;
												border-width: 0.1em;
												background-image: radial-gradient(circle, rgba(240, 240, 240, 0.349) 0%, rgb(177, 177, 177,0.5) 93%), url(/css/icons/login.svg);
												box-shadow: 0 1em 1em -0.7em #696969, 5px 5px 15px 5px rgba(0,0,0,0);
											}
											.login_formularbereich  {
												background-color: transparent;
												min-width: 100%;
												border: none;
												height: auto;
												width: 100%;;
												min-height: calc(40vh - 90px);
												overflow-y: auto;
											}
											#HG_login_infobereich {
												width: 100%;
												min-height: 50vh;
												margin-top: 6%;
												padding: 0;
												background-size: 5em 5em;
												background-repeat: round;
												box-shadow: 0 1em 1em -0.7em #696969, 5px 5px 15px 5px rgba(0,0,0,0);
												border-radius: 0.5em;
												border-color: #363636;
												border-width: 0.1em;
												background-image: radial-gradient(circle, rgba(240, 240, 240, 0.349) 0%, rgb(177, 177, 177,0.5) 93%), url(/css/icons/HG_login.svg);
												box-shadow: 0 1em 1em -0.7em #696969, 5px 5px 15px 5px rgba(0,0,0,0);
											}	
}

@media only screen and (orientation: landscape)  {	

											.login_formularcontainer {
												width: 49%;
												height: 100%;
												z-index: 500;
												display: flex;
												flex-direction: column;
												justify-content: flex-start;
												align-items: center;
												border: none;
												
											}
											.login_icon  {
												background-size: contain;
												background-position: center;
												background-repeat: no-repeat;
												width: calc(45vw - 30px);
												max-width: 480px;
												height: 30%;
												margin: 3%;
												display: flex;
												flex-direction: row;
												justify-content: center;
												align-items : center;
												border-radius: 0.5em 25%;
												border-color: #363636;
												border-width: 0.1em;
												background-image: radial-gradient(circle, rgba(240, 240, 240, 0.349) 0%, rgb(177, 177, 177,0.5) 93%), url(/css/icons/login.svg);
												box-shadow: 0 1em 1em -0.7em #696969, 5px 5px 15px 5px rgba(0,0,0,0);
											}
											.login_formularbereich  {
												background-size: contain;
												background-position: center;
												background-repeat: no-repeat;
												width: calc(45vw - 30px);
												max-width: 480px;
												height: auto;
												width: 90%;
												display: flex;
												flex-direction: column;
												justify-content: center;
												align-items : center;
												text-align: justify;
												text-justify: inter-word;
												border: none;
												border-radius: 2%;
											}
											.login_formularfeld {
												width: 100%;
												height: 30px;
											}					
											.login_formularbereich h1 {
												text-align: center;
												margin-bottom: 2em;
											}
											.login_formularbereich p {
												margin: 0 0.3em 0 0;
												padding: 0 0.3em 0 0;
											}
											#HG_login_infobereich {
												width: 100%;
												height: 93%;
												min-height: 15em;
												margin: 3%;
												padding: 0;
												background-size: 5em 5em;
												background-repeat: round;
												box-shadow: 0 1em 1em -0.7em #696969, 5px 5px 15px 5px rgba(0,0,0,0);
												border-radius: 0.5em;
												border-color: #363636;
												border-width: 0.1em;
												background-image: radial-gradient(circle, rgba(240, 240, 240, 0.349) 0%, rgb(177, 177, 177,0.5) 93%), url(/css/icons/HG_login.svg);
												box-shadow: 0 1em 1em -0.7em #696969, 5px 5px 15px 5px rgba(0,0,0,0);
											}	
}