html {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  font-family: "Open Sans";
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #F8F8F8;
}

#main {
  min-height: 100%;
  max-width: 40em;
  margin: 0 auto 0 auto;
  position: relative;
  background: #FFF;
}

#nav {
  position: sticky;
  top: 0;
}
#nav .buttons {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  background: #F8F8F8;
  border-bottom: 2px solid #57bc57;
}
#nav .buttons .button {
  cursor: pointer;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: 6rem;
  max-height: 6rem;
  width: 6rem;
  border-left: 1px solid #ebebeb;
  background: #FFF;
}
body.scrolled #nav .buttons .button {
  max-height: 2rem;
  height: 2rem;
}
@media (max-width: 25em) {
  #nav .buttons .button {
    height: 4rem;
    width: 4rem;
  }
}
#nav .buttons .button:first-child {
  border-left: 0;
}
#nav .buttons .button:hover {
  background: #f8f8f8;
  color: #000;
}
#nav .buttons .button.active {
  background: #57bc57;
  background: linear-gradient(#a0d9a0, #57bc57) #57bc57;
}
#nav .buttons .button .image_base {
  max-height: 70%;
  max-width: 100%;
  flex: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  position: relative;
}
body.scrolled #nav .buttons .button .image_base {
  display: none;
}
#nav .buttons .button .image_base img {
  max-height: 100%;
}
#nav .buttons .button .image_base #balance_label {
  position: absolute;
  font-size: 100%;
  top: 55%;
}
@media (max-width: 25em) {
  #nav .buttons .button .image_base #balance_label {
    font-size: 70%;
  }
}
#nav .buttons .button .label {
  flex: 0;
  padding: 0.2rem 0;
  color: #444;
  user-select: none;
  font-size: 100%;
}
@media (max-width: 25em) {
  #nav .buttons .button .label {
    font-size: 70%;
  }
}
#nav .buttons .logo {
  display: none;
}
@media (min-width: 35em) {
  #nav .buttons .logo {
    display: flex;
    position: relative;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    font-size: 200%;
    line-height: 105%;
  }
}
#nav .buttons .logo img {
  max-height: 80%;
  max-width: 80%;
  opacity: 0.005;
}

#status {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 40em;
  z-index: 1000;
}
#status .message {
  border-top: 1px solid #ebebeb;
  padding: 0.6em;
  background: rgba(255, 255, 255, 0.9);
}
#status .message.warning {
  background-color: rgba(255, 255, 170, 0.9);
}
#status .message.warning > * {
  padding-left: 1.4em;
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 0.9em;
  background-image: url(/images/warning.svg);
}

h1 {
  font-size: 200%;
  font-weight: normal;
  padding: 0;
  margin: 0;
  color: #40A040;
}

h2 {
  font-size: 160%;
  font-weight: normal;
  padding: 0;
  margin: 0;
  color: #40A040;
}

.document {
  padding: 0.6em;
}
.document.start {
  padding-bottom: 0;
}

.p {
  padding-top: 0.6em;
}
.p:first-child {
  padding-top: 0;
}

.area {
  padding: 0.6em;
  background: linear-gradient(to right, #e9f6e9, #FFF);
}

a {
  text-decoration: none;
  color: #40A040;
}

.placeholder {
  color: #b8b8b8;
}

.action_button {
  width: 100%;
  border: 1px solid #40A040;
  border-radius: 0.6em;
  padding: 0.6em;
  cursor: pointer;
  font-size: 120%;
  background: linear-gradient(to right, #e9f6e9, #FFF);
}
.action_button:hover {
  background: #def2de;
}

label, .label {
  color: #444;
  font-size: 80%;
}

.form_input {
  position: relative;
}
.form_input label {
  padding: 0.2em 0 0 0.6em;
  position: absolute;
}
.form_input input {
  position: relative;
  width: 100%;
  font-size: 120%;
  padding: 1.6em 0.6em 0.6em 0.6em;
  z-index: 20;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  background: transparent;
}
.form_input input:focus {
  outline: 0px;
}

.expander {
  padding: 0.6em;
  color: #444;
  cursor: pointer;
}
.expander:hover {
  color: #000;
}
.expander .hide {
  display: none;
}

/* ---- combo input ---- */
.combo .data {
  display: none;
}
.combo > .input > .base {
  display: block;
  position: relative;
}
.combo > .input > .base > input.visible {
  margin-top: 0;
}
.combo > .input > .base > .menu.loading > .item {
  opacity: 0.5;
}
.combo > .dummy {
  position: absolute;
  top: 0;
  z-index: 0;
  padding: 1.6em 0.6em 0.6em 0.6em;
  font-size: 120%;
  color: #b8b8b8;
}
.combo > .dummy .spinner {
  display: inline-block;
  max-height: 1em;
  max-width: 1em;
  height: 1em;
  width: 1em;
}
.combo > .dummy .spinner .path {
  stroke: #b8b8b8;
}

.menu_base {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% - 1px);
  min-width: 15em;
  width: 100%;
  z-index: 100;
}
.menu .content {
  width: 100%;
  border-style: solid;
  border-color: #000;
  border-width: 1px;
  box-shadow: 0 2em 2em -1em #FFF;
  background: #FFF;
  text-align: left;
  font-size: 110%;
  color: #000;
}
@media (max-width: 40em) {
  .menu .content {
    border-left: 0;
    border-right: 0;
  }
}
.menu .content .label {
  display: block;
  padding: 0.6em;
  color: #b8b8b8;
}
.menu .content .item {
  display: block;
  padding: 0.6em;
}
.menu .content .item.default {
  color: #b8b8b8;
}
.menu .content .item.active {
  background: #57bc57;
}
.menu .content .item.active.long .coords {
  color: #FFF;
}
.menu .content .item.link {
  color: #444;
  cursor: pointer;
}
.menu .content .item.link:hover, .menu .content .item.link:focus {
  outline: 0px;
  color: #000;
  background: #f8f8f8;
}
.menu .content .item.long {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.menu .content .item.long .coords {
  font-size: 80%;
  color: #b8b8b8;
}

.swap_base {
  position: relative;
  width: 100%;
}
.swap_base .swap {
  position: absolute;
  right: 0.6em;
  top: -1.5em;
  height: 3em;
  width: 3em;
  z-index: 25;
  cursor: pointer;
  display: none;
  border: 1px solid #ebebeb;
  border-radius: 1.5em;
  background: #FFF;
  box-shadow: 0 0 0.6em 0.6em #FFF;
  font-size: 150%;
  align-items: center;
  justify-content: center;
}
.swap_base .swap:hover {
  background: #f8f8f8;
}
@media (max-width: 25em) {
  .swap_base .swap {
    top: -1em;
    height: 2em;
    width: 2em;
    border-radius: 1em;
    font-size: 120%;
  }
}
.swap_base .swap img {
  margin: 0.9em;
  max-width: 1.5em;
}
@media (max-width: 25em) {
  .swap_base .swap img {
    max-width: 1m;
  }
}

.datepicker {
  display: inline-block;
  font-size: 120%;
  border: 1px solid #000;
  box-shadow: 1em 1em 2em 0em #FFF;
  position: relative;
  top: -1px;
}
.datepicker .datepicker_header {
  padding: 0.6em;
  background-color: #ebebeb;
  color: #444;
  text-align: center;
  font-size: 100%;
  font-weight: bold;
  user-select: none;
}
.datepicker .datepicker_header a {
  user-select: none;
  cursor: pointer;
  color: #40A040;
}
.datepicker .datepicker_header a:hover {
  color: #7cca7c;
}
.datepicker .datepicker_header span {
  margin-left: 1em;
  margin-right: 1em;
  user-select: none;
}
.datepicker .datepicker_header .icon-home {
  position: absolute;
  display: block;
  float: left;
  margin-top: 0.2em;
  margin-left: 0.2em;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.datepicker .datepicker_header .icon-home > svg > g > path {
  fill: #40A040;
}
.datepicker .datepicker_header a:hover > svg > g > path {
  fill: #7cca7c;
}
.datepicker .datepicker_inner_container {
  border: 0;
  padding: 0.6em;
  background: #FFF;
}
.datepicker .datepicker_inner_container:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.datepicker .datepicker_inner_container .datepicker_calendar {
  float: left;
  border: 0;
}
.datepicker .datepicker_inner_container .datepicker_calendar table {
  padding: 0.6em;
  border-collapse: collapse;
  border: 0;
}
.datepicker .datepicker_inner_container .datepicker_calendar table th {
  text-align: center;
  color: #444;
  font-weight: normal;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td {
  padding: 0.6em;
  border: 0;
  margin: 0;
  text-align: center;
  color: #000;
  user-select: none;
  cursor: pointer;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.wday_sun {
  color: #e13b00;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.day_another_month {
  cursor: default;
  color: #ebebeb;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.day_in_past {
  cursor: default;
  color: #ebebeb;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.day_in_unallowed {
  cursor: default;
  color: #ebebeb;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.out_of_range {
  cursor: default;
  color: #ebebeb;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.active {
  color: #FFF;
  background-color: #40A040;
}
.datepicker .datepicker_inner_container .datepicker_calendar table td.hover {
  background-color: #f8f8f8;
}
.datepicker .datepicker_inner_container .datepicker_calendar .datepicker_timelist {
  display: none;
}

.spinner {
  animation: rotate 2s linear infinite;
  width: 5em;
  height: 5em;
  margin: 0;
  padding: 0;
}
.spinner .path {
  stroke: #ebebeb;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
#search_input {
  background: #FFF;
  position: sticky;
  top: calc(2rem + 2px);
  border-bottom: 2px solid #57bc57;
}

#more_nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: linear-gradient(to right, #e9f6e9, #FFF);
}
#more_nav:hover {
  background: #def2de;
}
#more_nav #more_summary {
  color: #444;
}

#more_area {
  display: none;
}

#results > .date {
  padding: 0.6em;
}
#results > .date .day {
  font-size: 120%;
}
#results .trip {
  padding: 0.6em;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
#results .trip:hover {
  background: #f8f8f8;
}
#results .trip .times {
  width: 5.8em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 150%;
}
@media (max-width: 32em) {
  #results .trip .times {
    width: 5.5em;
    font-size: 120%;
  }
}
@media (max-width: 25em) {
  #results .trip .times {
    width: 5.5em;
    font-size: 100%;
  }
}
#results .trip .operator {
  width: calc(2.5rem+2*$padding);
  padding-left: 0.6em;
}
#results .trip .operator img {
  max-height: 2.5rem;
  max-width: 2.5rem;
}
#results .trip .details {
  padding-left: 0.6em;
  font-size: 80%;
  overflow: hidden;
}
#results .trip .details .duration {
  color: #57bc57;
}
#results .trip .price {
  flex: 1;
  color: #444;
  white-space: nowrap;
  font-size: 150%;
  text-align: right;
}
@media (max-width: 32em) {
  #results .trip .price {
    font-size: 120%;
  }
}
@media (max-width: 25em) {
  #results .trip .price {
    font-size: 100%;
  }
}

.dialog {
  position: fixed;
  top: 0;
  height: 100%;
  min-height: 100%;
  width: 100%;
  max-width: 40em;
  z-index: 50;
  background: #FFF;
}
.dialog .head {
  padding: 0.6em;
  position: relative;
  background: #57bc57;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%;
}
.dialog .head .close {
  position: absolute;
  left: 0;
  padding-left: 0.6em;
  cursor: pointer;
  color: #444;
  display: flex;
  align-items: center;
}
.dialog .head .close:hover {
  color: #000;
}
.dialog .head .close .intro {
  padding-left: 0.3em;
  font-size: 80%;
}
.leg {
  border-bottom: 1px solid #ebebeb;
  padding: 0.6em;
}
.leg .part {
  display: flex;
  align-items: baseline;
}
.leg .part .time {
  width: 2.5em;
  font-size: 120%;
}
.leg .part .space {
  width: 2.5em;
  font-size: 120%;
  text-align: center;
}
.leg .part .station {
  padding-left: 0.6em;
  font-weight: bold;
}
.leg .part .operator {
  width: calc(1.2rem+2*$padding);
  padding-left: 0.6em;
}
.leg .part .operator img {
  max-height: 1.2rem;
  max-width: 1.2rem;
}
.leg .part .train {
  padding-left: 0.6em;
}

#trip .price {
  font-size: 200%;
}
#trip .price_section {
  border-top: 2px solid #57bc57;
}
#trip .action_button {
  display: flex;
}
#trip .action_button .icon {
  width: calc(1.5rem+2*$padding);
}
#trip .action_button .icon img {
  max-height: 1.5rem;
  max-width: 1.5rem;
}
#trip .action_button .text {
  padding-left: 0.6em;
}

#ticket .qr img {
  width: 100%;
  max-width: 100%;
}

.tickets .ticket {
  padding: 0.6em;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  justify-content: space-between;
  align-items: end;
  cursor: pointer;
}
.tickets .ticket:hover {
  background: #f8f8f8;
}
.tickets .ticket .icon {
  width: calc(2.5rem+2*$padding);
  padding-left: 0.6em;
}
.tickets .ticket .icon img {
  max-height: 3rem;
  max-width: 3rem;
}
.tickets .ticket .details {
  padding-left: 0.6em;
  font-size: 100%;
  overflow: hidden;
}
.tickets .ticket .details .distance {
  font-size: 120%;
}
.tickets .ticket .price {
  flex: 1;
  padding-left: 0.6em;
  text-align: right;
}
.tickets .ticket .price .price {
  font-size: 120%;
}

/*# sourceMappingURL=style.css.map */