/* The main color is usually the primary color from the customer */
/* width of the main logo visible on the starting screen */
/* Default font family to use */
@font-face {
  font-family: 'Helvetica_now';
  src: url('../font/HelveticaNowText-Regular.eot');
  src: local('../font/Helvetica Now Text  Regular'), local('HelveticaNowText-Regular'), url('../font/HelveticaNowText-Regular.eot?#iefix') format('embedded-opentype'), url('../font/HelveticaNowText-Regular.woff2') format('woff2'), url('../font/HelveticaNowText-Regular.woff') format('woff'), url('../font/HelveticaNowText-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'RobotoRegular';
  src: local('../font/Roboto Regular'), local('RobotoRegular'), url('../font/Roboto-Regular.ttf') format('truetype'), url('../font/Roboto-Regular.woff2') format('woff2'), url('../font/Roboto-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Default global font size */
/* */
/* Background-color which is visible on desktop if the viewport is less than 720px */
/* Background of the app 
 * change this value to set header and content background-color simultaneously */
/* By default header and content background color is the same */
/* Color of the back label in the top navigation */
/* Font size of the main menu */
/* Background color of alternating menu items
 * by default uneven entries have a white background */
/* Text color of the started charging text. */
/* Button styles */
/* Station list background color */
html,
body,
form,
button {
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Helvetica_now;
  font-size: 16px;
}
html {
  height: 100%;
}
img {
  border: none;
}
h4 {
  margin-bottom: 0.5rem;
}
body {
  height: 100%;
  padding: 0;
  width: 100%;
  max-width: 720px;
  min-width: 320px;
  margin: auto;
  background-color: #ffffff;
}
input:hover,
input.ui-inputfield:hover {
  border: 1px solid #007bc2;
}
input:focus,
input.ui-inputfield:focus,
input:active,
input.ui-inputfield:active,
input.ui-state-focus,
input.ui-inputfield.ui-state-focus {
  box-shadow: none;
}
@media screen and (min-width: 720px) {
  body {
    -webkit-box-shadow: 0 0 10px 2px #9C9C9C;
    box-shadow: 0 0 10px 2px #9C9C9C;
  }
}
.container {
  height: 100%;
}
#masterForm.normal-height {
  height: auto;
}
#masterForm {
  height: 100%;
}
.header {
  height: 3.5rem;
  vertical-align: middle;
  line-height: 3.5rem;
  position: fixed;
  width: 100%;
  max-width: 720px;
  top: 0;
  z-index: 1;
  min-width: 320px;
  background-color: #ffffff;
}
.flexbox .header {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  justify-content: space-between;
}
.flexbox .header > * {
  /*	flex-grow: 1
		flex-shrink: 1
		flex-basis: 0 */
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}
.homeButton {
  height: 3.5rem;
  text-align: right;
}
.reloadButton {
  height: 3.5rem;
  text-align: right;
}
.homeLink {
  margin-right: 8px;
}
.reloadLink {
  margin-right: 8px;
}
.homeIcon {
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
  /* 	margin-right: 10px; */
}
.reloadIcon {
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
  /* 	margin-right: 45px; */
}
.backNavigator {
  width: 31%;
  height: 3.5rem;
  /* top: 0; */
  /* left: 0; */
  color: #5d5d5d;
  font-weight: bold;
  text-align: left;
  min-width: 0;
}
.no-flexbox .backNavigator {
  position: absolute;
}
.backNavigator a {
  align-items: center;
  color: inherit;
  line-height: 3.5rem;
  height: 3.5rem;
}
.flexbox .backNavigator a {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
}
.no-flexbox .backNavigator a {
  display: inline-block;
}
.linkPanelNormalPadding {
  /* padding-top: 12px; */
}
.linkPanelLessPadding {
  padding-top: 8px;
}
.headerPanel {
  padding-top: 5px;
}
img.backArrow {
  padding: 0 8px;
  height: 0.8rem;
}
img.backArrow.big-back-arrow {
  height: 1.05rem;
}
.backLabel {
  vertical-align: middle;
  line-height: 3.5rem;
}
.headerLabel {
  vertical-align: -webkit-baseline-middle;
}
.header-button-wrapper {
  text-align: right;
}
.no-flexbox .header-button-wrapper {
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
}
#headerText {
  height: 3.5rem;
  z-index: 2;
  font-size: 1.5rem;
  font-weight: bold;
  color: #222222;
  text-align: -webkit-center;
  padding: 0 .5rem;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.no-flexbox .headerText,
.IE .headerText {
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.topLogo {
  width: 100%;
  max-width: 720px;
  background-color: #007bc2;
  text-align: left;
  padding: 0 0.5rem;
  height: 3rem;
  line-height: 3rem;
  color: #f2f2f2;
  font-weight: bold;
  box-sizing: border-box;
  position: fixed;
  top: 3.5rem;
  z-index: 1;
}
.topLogo-wrapper {
  text-align: right;
  height: 100%;
}
.topLogoWhite {
  position: relative;
  width: 100%;
  height: 60%;
  border-top: 1px solid gray;
  background-color: #fff;
  text-align: right;
  padding-right: 10px;
}
.topLogo img,
.topLogoWhite img {
  height: 60%;
  vertical-align: middle;
}
.topLogoText {
  font-weight: bold;
  color: #f2f2f2;
  vertical-align: -webkit-baseline-middle;
}
.searchPanel {
  background-color: #007bc2;
  padding-bottom: 0.5rem;
  height: 2em;
  position: fixed;
  max-width: 720px;
  width: 100%;
  z-index: 1;
}
.searchComponent {
  width: 98%;
  margin: 0px auto;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
}
.searchField {
  text-align: left;
  border: 0;
  margin: 2px auto;
  width: 88%;
  background-color: #fff;
  outline: 0;
  font-size: 1rem;
  outline: none;
}
.searchField:hover,
.searchField.ui-inputfield:hover {
  border: none;
}
.searchImage {
  /* 	vertical-align:middle; */
  /* 	margin:0px auto; */
  /* 	top:-10px; */
  /* 	height:50%; */
}
.menu {
  text-align: left;
  position: relative;
  width: 100%;
  height: 4rem;
  padding: 0;
  background: url('../img/arrownext.png') no-repeat center right;
  background-size: 2vh;
  background-position: 98% 50%;
  vertical-align: middle;
}
.menu > .menu_inner {
  height: 4rem;
}
.menu img {
  position: relative;
  vertical-align: middle;
  height: 3rem;
  width: 3rem;
  object-fit: contain;
  display: inline-block;
  margin: 0.5rem;
  margin-left: 1.5rem;
}
.menuText {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
  font-size: 1.5rem;
  line-height: 4rem;
  color: #222222;
}
a.menuLink {
  color: #222222;
}
.menuEven {
  background-color: #d3d3d3;
}
.logo {
  padding: 5%;
  font-size: 1rem;
  color: #222222;
}
.logo img {
  width: 60%;
}
.stationItem {
  text-align: left;
  position: relative;
  width: 100%;
  height: 2.5rem;
  margin: 0 0;
  background: url('../img/arrownext.png') no-repeat 98% 50%;
  background-size: 2%;
  vertical-align: middle;
  color: #222222;
  border-bottom: 1px solid #aaa;
  line-height: 2.5rem;
  font-size: 0.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  box-sizing: border-box;
}
.stationItem > .menu_inner {
  top: 35%;
  position: relative;
  padding: 0;
}
.stelleDescription {
  text-align: left;
  position: relative;
  width: 100%;
  margin: 0 0;
  background-color: #f9f9f9;
  color: #222222;
  border-top: 1px solid #878787;
  border-bottom: 1px solid #878787;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.stelleDescription > .menu_inner {
  position: relative;
  margin: 10px;
}
.stationTypeItem {
  text-align: left;
  position: relative;
  height: 2.5rem;
  background: url('../img/arrownext.png') no-repeat 98% 50%;
  background-size: 2%;
  color: #222222;
  padding-top: 0;
  vertical-align: middle;
  line-height: 2.5rem;
  /* margin-right: 8px; */
  font-size: 0.8em;
}
.stationTypeItem img {
  position: relative;
  margin: 4px 16px 4px 4px;
  height: 80%;
  display: inherit;
  vertical-align: middle;
  /* vertical-align: middle; */
}
.stationTypeItemOdd {
  background-color: #f9f9f9;
}
.stationTypeItemEven {
  background-color: #f9f9f9;
}
.stationTypeItemDisabled {
  background-color: gainsboro !important;
  opacity: 0.5;
  font-style: italic;
}
.ladedauer {
  text-align: center;
  position: relative;
  width: 100%;
  height: 22%;
  /*font-size:4vh;*/
  margin: 0 0;
  background-color: #B1E6EE;
  color: #222222;
  border-top: 1px solid #878787;
  border-bottom: 1px solid #878787;
  padding: 0;
}
.ladedauer > .menu_inner {
  position: relative;
  margin: 10px;
}
.ladedauer input,
.ladedauer input[disabled=disabled] {
  background-color: inherit;
  border: 0;
  height: 50%;
  width: 25%;
  color: #00ABC7;
  text-align: center;
}
.ladedauer span.minutes {
  border: 0;
  height: 50%;
  color: #00ABC7;
  text-align: center;
}
.ladedauer_slider {
  height: 20%;
  vertical-align: middle;
  border-bottom: 1px solid gray;
  background-color: #fff;
  text-align: center;
}
.ladedauer_button {
  width: 5vh;
  height: 5vh;
  vertical-align: middle !important;
  top: 30% !important;
}
.ladedauerLoadingBlock {
  height: 100%;
}
.infoWindow {
  /*min-width:250px;*/
  /*min-height:3rem;*/
  color: #222222;
  /*text-decoration:none;*/
  text-align: left;
  /*background-size:10px 10px;*/
  font-size: 1rem;
}
.infoWindow a {
  text-decoration: none;
}
/* disable infoview image */
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
  display: none;
}
.active {
  background: url('../img/arrownext.png') no-repeat center right;
}
.connector_dot_img {
  padding-right: 10px;
}
.content,
.content-anonymous,
.content-user-reg {
  background-color: #ffffff;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  box-sizing: border-box;
}
.content.direkteingabeBG {
  background: none;
  background-size: cover;
  background-position-y: 8.5rem;
}
.content-anonymous {
  padding-top: 6.5rem;
}
.content-anonymous.direkteingabeBG {
  background: none;
  background-size: cover;
  background-position-y: 8.5rem;
}
.content-user-reg {
  padding-top: 7.5rem;
}
#map {
  height: 90%;
  height: calc(100% - 2.5em);
  position: relative;
  top: 2.5em;
}
.section-label {
  position: relative;
  text-align: left;
  margin-left: 10px;
  margin-top: 1rem;
}
.confirm-or-cancel {
  margin: auto;
  margin-bottom: 1rem;
}
.confirm-or-cancel .ui-widget {
  font-family: Helvetica_now;
  font-size: 1rem;
}
.confirm-or-cancel .ui-widget-content {
  border: none;
  color: #F0EFF5;
  background-color: transparent;
}
.confirm-or-cancel .ui-widget-content .ui-panelgrid-cell {
  border: none;
}
input[type='checkbox'] {
  width: 0.75rem;
  height: 0.75rem;
}
.confirm-or-cancel .ui-state-default {
  background-image: none;
  background-color: #007bc2;
  color: #fff;
  text-shadow: none;
}
.agb {
  font-size: 1rem;
  text-align: left;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.simple-info {
  padding-top: 20px;
}
.infoWindowPanel {
  font-family: Helvetica_now;
  font-size: 1rem;
}
.ui-widget {
  font-family: Helvetica_now;
  font-size: 1rem;
}
.infoWindowLink {
  text-decoration: none;
  color: inherit;
}
img[src="https://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png"] {
  display: none;
}
.searchIcon {
  width: 1.1rem;
  height: 1.1rem;
  margin-bottom: 2px;
  vertical-align: middle;
}
.stationIdLabel {
  vertical-align: middle;
  display: table-cell;
  font-weight: bold;
}
.addressLabel {
  vertical-align: middle;
  display: table-cell;
  font-size: 1rem;
}
#address {
  -webkit-box-shadow: none;
  box-shadow: none;
}
a.ui-commandlink {
  text-decoration: none;
}
a.ui-commandlink.agb-link {
  text-decoration: underline;
}
.connectorsList {
  width: 100%;
  border-top: 1px solid #878787;
  border-bottom: 1px solid #878787;
  border-collapse: collapse;
}
.connectorsList td {
  padding: 0;
  border-top: 1px solid #ccc;
}
.connectorsList tr:first-child td {
  border-top: 1px solid #878787;
}
.margin-left {
  margin-left: 10px;
}
.table-list {
  /* border-collapse: collapse; */
  border-top: 1px solid #aaa;
  width: 100%;
}
.table-list td {
  padding: 0;
}
#stationsPanel table tr {
  background-color: #f9f9f9;
}
.stationsPanel {
  padding-top: 3.5em;
}
#footer {
  position: fixed;
  bottom: 0;
  height: 3em;
  overflow: hidden;
  text-align: center;
  width: 100%;
  background-color: #F0EFF5;
}
#footer img {
  height: 2em;
  padding: 0.5em;
}
#logo img {
  width: 60%;
  margin-top: 1.5rem;
  text-align: center;
}
.info-text {
  padding: 0.5rem;
  display: inline-block;
}
.info-text-small {
  padding: 0.5rem;
  display: inline-block;
  font-size: small;
  text-align: left;
}
.payment-wrapper {
  padding: 1rem;
}
#openStationLink > span {
  display: block;
  text-align: left;
  padding: 0.25rem;
}
.ui-dialog {
  top: 50% !important;
  left: 50% !important;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.ui-button {
  padding: 0.125rem;
}
.back-label {
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
  color: #007bc2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-flexbox .back-label.short-back-label {
  width: 72%;
  position: absolute;
}
.no-flexbox .back-label {
  width: 90%;
  position: absolute;
}
#charging-started {
  background: none;
}
.started-charging-text .invalid-token-text {
  font-weight: bold;
  padding-bottom: 1rem;
  font-size: 1.1rem;
  display: inline-block;
  color: inherit;
}
.authInfo {
  width: 100%;
  max-width: 720px;
  background-color: #007bc2;
  text-align: right;
  padding: 0 0.5rem;
  height: 2rem;
  line-height: 2rem;
  color: #f2f2f2;
  box-sizing: border-box;
  position: fixed;
  top: 5.5rem;
  z-index: 1;
  font-size: 0.9rem;
}
.dataEntryForm {
  width: 80%;
  text-align: left;
  margin: auto;
  display: inline-block;
}
.dataEntryForm input {
  margin: 0px auto 0px;
  display: block;
  background-image: none;
  width: 100%;
  box-sizing: border-box;
}
.dataEntryForm select {
  margin: 0px auto 0px;
  display: block;
  background-image: none;
  width: 100%;
  box-sizing: border-box;
}
.dataEntryForm #remember-me {
  display: inline;
  width: auto;
  margin-right: 1em;
}
.dataEntryForm #remember-me + label {
  display: inline;
}
.dataEntryForm #loginButton {
  width: 100%;
  display: block;
  padding: 0.415rem 1.125rem;
}
.dataEntryForm #resetPwdLink {
  text-align: center;
  color: #aaa;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 8px;
  display: block;
}
.dataEntryForm #resetPasswordButton {
  display: block;
  width: 100%;
}
.dataEntryForm #new_password_button {
  display: block;
  width: 100%;
}
.dataEntryForm #gender,
.dataEntryForm #security_question {
  display: block;
  width: calc(100% - 34px);
  margin: auto;
}
.dataEntryForm label {
  display: block;
}
.labelColumnInGrid {
  text-align: right;
  background-color: #f9f9f9;
}
.contentColumnInGrid {
  text-align: left;
  background-color: #f9f9f9;
}
.button {
  border-radius: 4px;
  background-color: #007bc2;
  background-image: none;
  border: 1px solid #007bc2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  color: white;
  font-size: 1rem;
}
.padding-top {
  padding-top: 2rem;
}
#lastTransactionPanel {
  margin: auto;
}
#lastTransactionPanel .ui-widget-content {
  border: #f9f9f9;
}
.horizontal-ruler {
  border-top: 1px solid #c9c9c9;
  border-bottom: 0;
}
.hidden {
  display: none !important;
  visibility: none !important;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background-color: #007bc2;
}
.ui-growl {
  max-width: calc(100% - 40px);
}
.ui-growl .ui-growl-item {
  background-color: #333;
}
.ui-growl .ui-growl-item .ui-growl-message {
  width: 210px;
  width: calc(100% - 30px - 32px);
}
.ui-accordion {
  text-align: left;
}
.ui-accordion .ui-accordion-header {
  padding: .5em 2rem .5em .5rem;
  font-size: 1.25rem;
  border-radius: unset;
  z-index: auto;
}
.ui-accordion .ui-accordion-header.ui-state-default {
  border: none;
  border-bottom: 1px solid #333;
  margin: 0;
}
.ui-accordion .ui-accordion-header.ui-state-active {
  border: none;
}
.ui-accordion .ui-accordion-header .ui-icon {
  left: unset;
  right: .5rem;
  display: block;
}
.ui-accordion .ui-accordion-header .ui-icon.ui-icon-triangle-1-s {
  background-position: 0 0;
}
.ui-accordion .ui-accordion-header .ui-icon.ui-icon-triangle-1-e {
  background-position: -65px 0;
}
.ui-accordion .ui-accordion-content {
  margin: 0;
  top: 0;
  border-bottom: 1px solid #333;
}
.ui-accordion .ui-accordion-content.ui-widget-content {
  padding: 0;
  background: none;
}
.ui-accordion .ui-accordion-inner .ui-accordion-header {
  color: #007bc2;
  font-size: 100%;
  font-weight: 700;
}
.ui-accordion .ui-accordion-inner .ui-accordion-header.ui-state-default {
  border: none;
}
.ui-accordion .ui-accordion-inner .ui-accordion-content {
  padding: .5rem;
  border: none;
}
#cookies {
  border: 1px solid #333;
  border-collapse: collapse;
}
#cookies thead {
  background-color: #007bc2;
  color: #f2f2f2;
}
#cookies td {
  padding: .5rem;
  border: 1px solid #333;
}
.gm-svpc {
  display: none;
}
button.gm-control-active.gm-fullscreen-control {
  display: none;
}
@supports (color: revert) {
  .ui-widget-content a {
    color: revert;
  }
}
@supports not (color: revert) {
  .ui-widget-content a:link {
    color: #00e;
  }
  .ui-widget-content a:visited {
    color: #551a8b;
  }
  .ui-widget-content a:active {
    color: #e00;
  }
}