/*
 * StyleSheet	for EZR-Home
 * version		1.0 by frank.beyer@soon-net.de
 *
 * revision 	1.1 
 * by 			jens.michael@logoform.de
 * date 		09.04.2020
 * notice		all changes marked with: 1.1
*/


:root {
	--maincolor: white;
	--errorcol: #5f0d2d;
	--fontsize: 12pt;
	--radius: 6px;
	--radius2: 4px;
	--width: 240px;
	--width2: 280px;
	--dblWidth2: 600px;
	--button-bg: #054a69;
	--blue-bg: #006599;
	--font: 'robotolight', sans-serif;
	--screen-margin: 5%;
	--content-width: 90%;
}

@font-face {
    font-family: 'robotolight';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff2') format('woff2'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
	box-sizing: border-box;
}

html, body {
	text-align: center;
	font-family: var(--font);
	margin: 0;
	font-size: var(--fontsize);
	line-height: 1.42857143;
	overflow-x: hidden;
	overflow-y: hidden;
}

::-webkit-scrollbar { 
    display: none; 
}

h1 {
	font-size: 2.5em;
	font-weight: lighter;
	margin: 0;
}

h2 {
	font-size: 15pt;
}

h3 {
	font-size: 13pt;
}

:after, :before {
	box-sizing: border-box;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

.fixed-background {
	position: fixed;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1000;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.blue-gradient-bg {
	background: #ebf1f6; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(top, #006699, #66cccc);
	/* For Safari */
	background: -o-linear-gradient(bottom, #006699, #66cccc); /* For Opera */
	background: -moz-linear-gradient(top, #006699, #66cccc); /* For Firefox */
	background: linear-gradient(to bottom, #006699, #66cccc); /* Standard */
}

h1, h2, h3 {
	text-align: left;
}

a, a:hover { 
	text-decoration: none;
	background-color: transparent;
}

/* Buttons mit abgerundeten Ecken */
.menu-button-centered, .menu-button, div.big-button, div.wide-button {
	display: block;
	margin: 0;
	padding: 15px 20px 15px;
	margin-bottom: 1em;
	text-decoration: none;
	font-family: var(--font);
	font-size: 1.2em;
	font-weight: light;
	border: none;
	border-radius: var(--radius);
	color: var(--maincolor);
	background-color: var(--button-bg);
	min-width: var(--width);
	cursor: pointer;
	vertical-align: middle;
	clear: both; 
}

.menu-button-centered {
	width: 100%;
}

div.big-button span, div.wide-button span {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	color:red;
}

.menu-button-centered {
	text-align: center;
}

input[type=submit].disabled {
	background-color: #357a99;
	color: #a0a0a0;
}

.menu-button, div.big-button, div.wide-button {
	text-align: left;
	width: 100%;
}

div.menu-button:hover, div.big-button:hover, div.wide-button:hover {
	color:#fff;
	background-color: #054a89;
}

div.rounded-top {
	/* top-left, top-right, bottom-right, bottom-left */
	border-radius: var(--radius) var(--radius) 0px 0px; 
	margin-bottom: 3px;
}

a.nav-link, div.rounded-top, div.rounded-bottom, div.button2, select {
	cursor: pointer;
}

input.inputbox, input.form-control, a.nav-link, div.rounded-top, div.rounded-bottom, div.button2, hr {
	color: var(--maincolor);
	font-size: var(--fontsize);
	font-weight: lighter;
}

a.bold {
	font-weight: bold !important;
}

div.link a:after {
	content: ">";
	float: right
}

div.button2 {
	margin-bottom: 3px;
}

div.rounded-bottom {
	border-radius:0px 0px var(--radius) var(--radius);
}

div.rounded-top, div.rounded-bottom, div.button2 {
	color:var(--maincolor);
	background-color: var(--blue-bg);
	margin-bottom: 2px;
	padding: 1.2em;
	width: 100%;
	/*min-width: var(--width):*/
	cursor: pointer;
	text-align: left;
}

div.link:hover, div.rounded-top :hover, div.rounded-bottom :hover, div.button2 :hover {
	background-color: #1075a9;
}

div.app-screen {
	display: none;
	/*border: 1px solid yellow;*/
	color: var(--maincolor);
	width: var(--content-width);
	overflow-y: auto;
	margin-left: auto;
	margin-right: auto;
}

h3 { 
	font-size: 1.2em;
}

div.big-button img, div.wide-button img {
	height: 42px;
	margin-right: 1em;
	vertical-align: middle;
}

div.page-header {
	background: transparent;
	width: 100%;
	color: var(--maincolor);
	border: none !important;
	padding-top: 2em;	 
	padding-left: var(--screen-margin); 
	padding-right: var(--screen-margin);
	margin: 0 !important;
}

a.nav-link, .nav-link, label { 
	color: var(--maincolor);
	font-weight: normal;
	font-size: var(--fontsize);
}

a.nav-link :link, a.nav-link :hover, a.nav-link :visited {
	text-decoration: none;
}

a.flow-link {
	text-decoration: underline;
}

select {
	/*appearance: none;*/
	background: transparent;
	border: none;
	color: var(--maincolor); 
	font-weight: normal; 
	font-size: var(--fontsize);
	-moz-appearance: none;
	-webkit-appearance: none;
	text-align: right;
}

select.big {
	width:90%;
	background: transparent;
	border: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
	padding:1em;
}

div.lightblue {
	background: var(--blue-bg);
	width: 240px;
	min-width: 200px;
	padding: 0em;
	border-radius: var(--radius2);
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
	vertical-align: middle;
}

div.lightblue img {
	height: 24px;
	vertical-align:middle; 
}

/* for IE */
select::-ms-expand {
	display: none;
}

select option {
	background-color: var(--button-bg);
	text-shadow: 0 1px 0 var(--button-bg);
	margin: 1em;
	padding: 1em;
}

.has-error {
	border: 2px solid var(--errorcol) !important;
}

span.form-error, div.form-error {
	font-weight: bold;
	color: var(--errorcol);
}

span.active {
	background-image: url('../image/ic_active.png');
	background-repeat: no-repeat;
	display: block;
}

span.inactive {
	background-image: url('../image/ic_inactive.png');
	background-repeat: no-repeat;
	display: block;
}

div.form-error {
	margin-bottom: 0.7em;
}

div#app-message {
	display: none;
}

label.big { 
	display: inline-block;
	text-align: left; 
	width: 100%;
	min-width: var(--width);
	background: var(--maincolor);
	border: none;
	border-radius: var(--radius);
	padding-left: 4em;
	padding-top: 1.5em;
	padding-bottom: 0;
	padding-right: 4em;
	height: 60px;
}

input.icon-big {
	border: none;
	color: black;
	padding-left: 0em;
	position: relative; 
	top: -20px;
}

input.big {
	border: none;
	color: black;
	padding-left: 1em; 
	height: 4em;
	margin-bottom: 0.7em;
}

/*input[type=checkbox].big {
	border-radius: 3px;
	width: 1.25em; 
	height: 1.25em;
	padding-top: 0;
	margin-top: 0;
	border: 2px solid #ccc;
	background: #fff;
}*/

input[type="checkbox"] {
  display: none;
  width: 40px;
  height: 40px;
}
.checker {
  background-image: url(../image/checkboxes.png);
  background-position: left center;
  background-size: auto 100%;
  width: 40px;
  /*height: 50px;*/
  background-repeat: no-repeat;
}
input[type="checkbox"]:checked + .checker {
  background-position: right center;
}

input.form-control {
	border-radius: var(--radius);
	width: 100%;
}

img.input-icon {
	height:32px; 
	padding-left: 1em; 
	position:relative; 
	top: -10px; 
	left: -45px;
}

br.big {
	margin-top:3em;
}

div#debug {
	left:0;
	top: 0;
	overflow-y: auto;
	color:black; 
	background: yellow;
	float:left;
	text-align: left;
	width:100%;
	display: none;
}

div#debug-inner {
	overflow-y: auto;
	border-top: 1px solid black;
	height: auto;
	display:none;
	max-height: 300px;
	height: 100px;	
}

div.container {
	margin: 0;
}

div#page-footer {
	position: absolute;
	width:100%;
	text-align: center;
	color: var(--maincolor);
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	/*border: 1px solid purple;*/
}

div.col-1 {
	width: 30%;
	min-width: var(--width2);
}

div.col-2 {
	min-width: var(--dblWidth2);
}

div.col-hspace {
	width: 1%;
}

div.col-1, div.col-2, div.col-hspace {
	background: transparent;
	text-align: left;
	vertical-align: top;
	display: inline-block;
	padding-left: 0;
	padding-right: 0;
}

div.row {
	text-align: center;
	width: 100%;
	display: table;
}

div.row div {
	text-align: left;
}

/* schmal hochkant */
@media screen and (max-width: 700px) /*and (orientation: portrait)*/ {
	div.app-screen { max-width: 100% !important; /*background-color: #e3b5b5;*/ }
	div.col-1 { width: 100% !important; float: left; }
	div.col-2 { width:  50% !important; }
	div.col-hspace { display: none !important; }
	
	div#div-dialog, div.dialog {
		min-width: 60%;
		max-width: 90%;
	}
	
	div.doc-cell-last {
		float: left;
		clear:both;
	}
		
	span#top-menu-wide { display: none }
	span#top-menu-slim { display: inline !important }
	span#top-menu      { display: none }
	a#lnk-back         { display: none !important }
	a#lnk-back2        { display: inline !important }
	div#mobile-screen  { display: block !important }

	/*since 1.1*/
	div.submitRegisterWrapper{
		text-align: center;
		position: relative;
	}
	/*submit button itself*/
	div.submitRegisterWrapper input{
		max-width: 100%;
		position: absolute;
		margin-right: 0%;
		margin-left: 0%;
	}

}

/* mittlere Breite */
@media screen and (min-width: 701px) and (max-width: 1080px) {
	div.app-screen { max-width: 70% !important; /*background-color: #55b8e6;*/ }
	div.col-1 { width: 49% !important; max-width: 49% !important; }
	div.col-2 { width: 100% !important; max-width: 100% !important; }
	
	div#div-dialog, div.dialog {
		min-width: 40%;
		max-width: 70%;
		/*background-color: blue !important;*/
	}
	
	div.doc-cell-last {
		float: left;
	}
	/*div.doc-download1 { display: table-cell; }
	div.doc-download2 { display: none; }*/
	
	span#top-menu-wide { display: inline }
	span#top-menu-slim { display: none }
	span#top-menu      { display: inline }
	div#mobile-screen  { display: none }
}

/* (sehr) breit */
@media screen and (min-width: 1081px) and (max-width: 400000px) {
	div.app-screen { max-width: 60% !important; /*background-color: #73de73;*/ }
	div.col-1 { width: 49% !important; max-width: 49% !important; }
	div.col-2 { width: 100% !important; max-width: 100% !important; }
	
	div#div-dialog, div.dialog {
		min-width: 30%;
		max-width: 40%;
		/*background-color: green !important;*/
	}
	
	div.doc-cell-last {
		float:right;
	}
	/*div.doc-download2 { display: none; }*/
	
	span#top-menu-wide { display: inline }
	span#top-menu-slim { display: none }
	span#top-menu      { display: inline }
	div#mobile-screen  { display: none }

	/*since 1.1
	  Submit-Button for registration
	  also see media-query: max-width: 700px
	*/
	div.submitRegisterWrapper{
		text-align: center;
		position: relative;
	}
	/*submit button itself*/
	div.submitRegisterWrapper input{
		max-width: 50%;
		position: absolute;
		margin-right: 25%;
		margin-left: 25%;
	}
}



div#div-dialog, div.dialog {
	border-radius: var(--radius);
	display: none;
	position: fixed;
	margin: 5% auto;
	border: 1px solid #66cccc;
	padding: 0;
	background: #006599; /*#c4d3fb;*/
	margin: 0 auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

div#div-dialog > div#header, div.dialog > div.dlg-header {
	background: var(--button-bg); 
	color: var(--maincolor);
	padding: 0.5em;
	font-weight: bold;
	border: 2px solid var(--maincolor);
	border-radius: 3px;
}

div#div-dialog > div#message, div.dialog > div.dlg-message {
	color: var(--maincolor);
	font-size: 1.2em;
	margin: 1em;
	min-width: 30%;
}

div#div-dialog > button, div.dialog > button {
	background: var(--button-bg);
	color: var(--maincolor);
	border: 2px solid var(--maincolor);
	border-radius: 3px;
	padding: 0.5em 1.5em 0.5em 1.5em; 
	float:right;
	margin-right:1em;
	margin-bottom:1em;
}

div#grey-background {
	display: none;
	background: #006699;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 200%;
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity:0.4;
	z-index: 8888;
}

div.doc-hr {
	width:100%;
	display: block;
	border-top: 1px solid var(--maincolor);
	height: 0.8em;
}

div.doc-table {
	display: table;
	border-spacing: 0em;
	width: 100%;
}

div.doc-row {
	display: table-row;
	width: 100%;
}

div.doc-row:after {
	content: "";
	display: table;
	clear: both;
}

div.doc-download /*, div.doc-download2, div.doc-download1*/ {
	border-radius: var(--radius2);
	background-color: var(--button-bg);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-align: center !important;
	height: 2.3em;
	max-width: 270px;
	min-width:180px;
	
	margin-left: 48px;
	margin-right: auto;
	float: left;
	cursor: pointer;
}

div.doc-download > a {
	color: var(--maincolor);
}

div.doc-cell, div.doc-cell-text, div.doc-cell-last {
	text-align: left;
	padding-left: 0.8em;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	vertical-align: top;
	display: table-cell;
}

div.doc-cell, div.doc-cell-text {
	float: left;	
}

div.doc-cell-text {
	width: 260px;
	clear: right;
}

/* Bild für Dokuument-Anzeige, pro Zeile */
img.doc-icon {
	height: 48px;
}

span.doc-head {
	font-weight: bold;
}

div.doc-head {
	display: table-cell;
	width: 65px;
	float:left;
	clear: left;
}

div.doc-head2 {
	display: table-cell;
	width: auto;
	float:left;
	clear: right;
}

span#top-menu-slim {
	display: none;
}

span#top-menu-slim img {
	height: 20px;
}

div#div-burgermenu {
	position: absolute;
	left: 0;
	top: 0;
	background-color: black;
	height: 100%;
	width: 85%;
	margin-left: 15%;
	float: right;
	opacity: 0.85;
	z-index: 1000;
	padding: 1.5em;	
}

div#div-burgermenu div {
	float:right;
}

div#div-burgermenu table {
	width: 100%;
	text-align: right;
	float: right;
	cursor: pointer;
}

div#div-burgermenu img {
	height: 48px;
}

div#div-burgermenu td {
	border-bottom: 1px solid #353535;
	padding-right: 1em;	
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	text-align: left;
	width: auto;
	vertical-align: top;
}

div#div-burgermenu a {
	font-size: 14pt;
	font-family: var(--font);
	color: inherit;	
}

a#lnk-back, a#lnk-back2, div#mobile-screen {
	display: none;
}

div#mobile-screen {
	position: absolute;
	left: 0;
	top: 0;
	right:1;
	bottom: 1;
	background: transparent;
	z-index: 500;
}

div#errFrmMyaccountGeneral {
	display: none;	
}

div#burgermenu-close {
	text-align: right;
}

tr.userlist > td, table#userlist > th {
	vertical-align: middle;
	border-bottom: 1px solid white;
	padding-bottom: 0.8em;
}

/* Für die Anzeige der Nutzungsbedingungen */
#chkAccept[type="checkbox"] { display:none; }

#chkAccept[type="checkbox"] + label::before {
	width: 22px;
	height: 18px;
	background-image: url("../image/unchecked.png");
	display: block;
	content: "";
	float: left;
	margin-right: 5px;
}
#chkAccept[type="checkbox"]:checked+label::before {
	background-image: url("../image/checked.png");
}

a.conditions {
	color: #00ffff;
	text-decoration: underline;	
}

/*since 1.1
  user registration -checkbox table
*/
table.conditionsTable{
	margin-top:1rem;
}
table.conditionsTable td{
	padding-top:1rem;
}