/*
Theme: Arkeo Theme ver. 5.0
Description: Stylesheet for Arkeo QR portal.
Author: Dipl.-Ing. Dimitri Papadopoulos
Author URI: http://www.die-digitalexperten.de/  
*/
@font-face {
    font-family: 'opensansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#opensansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensanssemibold';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#opensanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensanscondbold';
    src: url('fonts/OpenSans-CondBold-webfont.eot');
    src: url('fonts/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-CondBold-webfont.woff') format('woff'),
         url('fonts/OpenSans-CondBold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-CondBold-webfont.svg#opensanscondbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'raleway-extralight';
    src: url('fonts/raleway-extralight-webfont.eot');
    src: url('fonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extralight-webfont.woff') format('woff'),
         url('fonts/raleway-extralight-webfont.ttf') format('truetype'),
         url('fonts/raleway-extralight-webfont.svg#raleway-extralight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
html {
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
}
body {
    padding: 0; /*remove padding */
    margin: 0; /* remove margins */
    border: 0; /* remove borders */
    color: #363636;
    font: 92%/1.5 'opensansregular'; /*, arial, verdana, sans-serif*/
    background: #FFF url("images/header_mobilebg.png") top left repeat-x;
}
#header {
	position: absolute; 
	margin: 0; 
	top: 0; 
	right: 18px; 
	display: block; 
	background: transparent url("images/logo-langenpreising.png") 32px 12px no-repeat;
    background-size: 190px 50px;
	width: 100%;
	height: 136px;
	z-index: 10;
}
#headerform {
	position: absolute; 
	margin: 12px auto;
    max-width: 568px;
	top: 0; 
    left: 30vw;
	display: block; 
	width: 100%;
	height: 136px;
	z-index: 10;
}
#content {
	padding: 96px 13px 0px 18px;
    margin: 0px auto;
    max-width: 568px;
}
h1, h2, h3, h4, h5, h6 { font-family: "opensanscondbold"; font-style: normal; font-weight: normal; color: #363636; } /*font*/
h1 { font-size: 2.5em; margin: 0.6em 0em 0.4em 0em; }
h2 { font-size: 2em; margin: 0.6em 0em 0.3em 0em; }
h3 { font-size: 1.5em; margin: 0.6em 0em 0.3em 0em; }
h4 { font-size: 1.17em; margin: 0.6em 0em 0.3em 0em; }
h5 { font-size: 1.12em; margin: 0.6em 0em 0.3em 0em; }
h6 { font-size: .83em; margin: 0.6em 0em 0.3em 0em; }

.clear {
	clear:both;
}
.hint {
	margin: 6px 0px 8px 0px;
	font-size: 0.8em;
}
/** Arkeo Forms CSS Start **/
#valSummary, #valSummary2 {
    padding: 4px;
    border: 2px solid #ff0000;
    margin: 10px 10px 10px 0px;
    background-color: #ffcccc;
}
#valSummary ul, #valSummary2 ul {
    margin: 0.5em 0 0.5em 0;
    padding: 0 0 0 0.3em;
}
#valSummary li, #valSummary2 li {
    margin: 0.5em 0 0.5em 0;
    list-style: none;
    padding:0 0 0 12px;
    color: #ff0000;
    background: transparent url("images/elements.png") no-repeat 0px -696px;
}
.req {
    display: none;
}
.rstar {
    color: #ff0000;
    vertical-align: super;
    font-size: 0.75em;
    padding: 0px 1px 0px 2px;
}
input, select {
    border: 1px solid #888888; /*A9A9A9*/
}
#btnCancel1, #btnCancel2, #btnStep1, #btnStep2, #btnStep2b, #btnStep3, #btnStep4 {
    background: #009DDA;
    background-image: -webkit-linear-gradient(top, #34B0E1, #009DDA );
    background-image: -moz-linear-gradient(top, #34B0E1, #009DDA);
    background-image: -ms-linear-gradient(top, #34B0E1, #009DDA);
    background-image: -o-linear-gradient(top, #34B0E1, #009DDA);
    background-image: linear-gradient(to bottom, #34B0E1, #009DDA);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 8px 25px 8px 25px;
    text-decoration: none;
    border-color: #7B9CBD;
    margin: 1em;
}
#btnCancel1:hover, #btnCancel2:hover, #btnStep1:hover, #btnStep2:hover, #btnStep2b:hover, #btnStep3:hover, #btnStep4:hover {
    background: #016A91;
    color: #fff;
}
input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="email"], textarea {
    font: 15px/24px "opensanssemibold", Arial, sans-serif;
    color: #363636;
    width: 100%;
    letter-spacing: 1px;
    padding: 2px 4px 2px 4px;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="time"]:focus, input[type="date"]:focus, input[type="email"]:focus, textarea:focus {
background-color: #ECF0EC; 
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
    color: #000; 
    background-color: #ECF0EC; 
    background-image: -webkit-linear-gradient(top, #fff, #ECF0EC );
    background-image: -moz-linear-gradient(top, #fff, #ECF0EC);
    background-image: -ms-linear-gradient(top, #fff, #ECF0EC);
    background-image: -o-linear-gradient(top, #fff, #ECF0EC);
    background-image: linear-gradient(to bottom, #fff, #ECF0EC);
}
select {
    font: 15px/24px "opensanssemibold", Arial, sans-serif;
    color: #363636;
}


.rowtarif:after, .rowtarif:before, .rowform:after, .rowform:before {
    content: " ";
    display: table;
}
.borderbtm {
    border-bottom: 1px solid #34B0E1;
    padding-bottom: 1em;
}
/* Grid Start */
.row, .rowtarif, .rowfg, .rowform {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
}
.rowtarif {
    align-items: stretch;
    max-width: 700px;
}
.rowform {
    align-items: stretch;
    max-width: 600px;
    margin: 0px auto;
}
.rowform .column {
    padding: 6px 0px;
}
.column, .columfg, .columnffg {
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
}
.columntarif {
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    max-width: 380px;
}
._15 {
    flex: 1.5;
    -ms-flex: 1.5;
    -webkit-flex: 1.5;
}
._2 {
    flex: 2;
    -ms-flex: 2;
    -webkit-flex: 2;
}
._25 {
    flex: 2.5;
    -ms-flex: 2.5;
    -webkit-flex: 2.5;
}
._3 {
    flex: 3.0;
    -ms-flex: 3.0;
    -webkit-flex: 3.0;
}
._33 {
    flex: 3.33;
    -ms-flex: 3.33;
    -webkit-flex: 3.33;
}
._4 {
    flex: 4.0;
    -ms-flex: 4.0;
    -webkit-flex: 4.0;
}
._5 {
    flex: 5;
    -ms-flex: 5;
    -webkit-flex: 5;
}
._6 {
    flex: 6;
    -ms-flex: 6;
    -webkit-flex: 6;
}
._66 {
    flex: 6.6;
    -ms-flex: 6.6;
    -webkit-flex: 6.6;
}
._7 {
    flex: 7;
    -ms-flex: 7;
    -webkit-flex: 7;
}
._75 {
    flex: 7.5;
    -ms-flex: 7.5;
    -webkit-flex: 7.5;
}
._8 {
    flex: 8;
    -ms-flex: 8;
    -webkit-flex: 8;
}
.borderbottom {
    border-bottom: 1px solid #003F72;
}
.borderbottom2 {
    border-bottom: 2px solid #303030;
}
.borderbottomg {
    border-bottom: 1px solid #ccc;
}
.borderbottomb {
    border-bottom: 2px solid #2299D1;
}
.bordertop {
    border-top: 1px solid #f6f6f6;
}
.borderright {
    border-right: 1px solid #808080;
}
.borderleft {
    border-left: 1px solid #808080;
}
.border {
    border: 1px solid #808080;
}
.tbcenter {
    text-align: center;
}
.tbleft {
    text-align: left;
}
.tbright {
    text-align: right;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.resright {
    text-align: right;
}
.resleft {
    text-align: left;
}
.spacer2 .column {
    padding: 2px;
}
.spacer81 {
    padding: 0px 0px 0px 8px;
}
.spacer120, .spacer120 column {
    padding: 12px 0px 12px 8px;
}
.spacer5 .column, .spacer5 .columnfg, .spacer5 .columnffg {
    padding: 5px;
}
.columnffg {
    max-width: 370px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.columnffg img {
    margin: 0px 10px 0px 0px;
}
.spacer50 .column {
    padding: 5px 0px 5px 5px;
}
.mspacer12 {
    margin: 5px 12px;
}
.mspacer120 {
    margin: 12px 0px 12px 8px;
}
.spacer12, .spacer12 .column {
    padding: 12px 0px 12px 0px;
}
.spacer20 .column {
    padding: 20px;
}
.meterNo {
    font-size: 1.1em;
    letter-spacing: 1px;
    font-family: 'opensanscondbold', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.rowmeterno {
    color: #fff;
    background-color:#009DDA;
    padding: 8px 3px 8px 8px;
    margin-bottom: 8px;
}
.consumptionPoint {
    font: 15px/24px 'opensanscondbold', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #363636;
    width: 100%;
    letter-spacing: 1px;
    padding: 2px 4px 2px 4px;
}


/*div.input, div.input2 {
	padding: 2px;
	clear: both;
}

div.input label {
	display: block;
	width: 140px;
	float: left;
	padding-left: 16px;
}
div.input2 label {
	display: block;
	width: 200px;
	float: left;
	padding-left: 16px;
}
#lblHT, #lblHT2, #lblNT, #lblNT2, #lblB1, #lblB2 {
	display: block;
	width: 40px;
	float: left;
	padding-left: 6px;
}
div.options {
	padding: 4px 180px 20px 0;
	text-align: right;
	margin-top: 8px;
}

div.options input {
	font-weight: bold;
	border: 1px outset #F5F5F5;
	background-color: #94BFE5;
	color: #000000;
}

ul {
	margin-top: 2px;
}

div.input input, div.input select, div.input textarea, div.input2 input, div.input2 select, div.input2 textarea {
	border: 1px solid #7B9CBD;
}

div.input input.error, div.input textarea.error, div.input select.error, div.input2 input.error, div.input2 textarea.error, div.input2 select.error
 {
	border: 2px solid red;
	background-color: #ffcccc;
}

div.input label.error, div.input2 label.error {
	color: #ff0000;
	font-weight: bold;
}
div.input #btnSubmit {
	margin: 5px 0 0 200px;
}
.rstar {
    color: #ff0000;
}
/** Arkeo Forms CSS Ende **/

#chkDs {
    float: left;
}
div.inputbox {
	width: 520px;
	padding: 6px 0px 0px 12px;
	font-size: 0.9em;
	float: left;
}
div.inputbox label {
    display: block;
    padding: 0px 0px 0px 24px;
}
div.inputbox a, div.inputbox a:link, div.inputbox a:active
 {
    text-decoration: none;
    color: #378de5;
}
div.inputbox a:hover {
    text-decoration: underline;
 }*/