.language-action-sheet .action-sheet-title {
  font-weight: bold;
}
.container-fluid,
.container {
  margin-right: auto;
  margin-left: auto;
}
.container-fluid {
  padding-right: 2rem;
  padding-left: 2rem;
}
.row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -0.5rem;
}
.row.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.col.reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.hide-to-md {
  display: none;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.gutter .col-xs,
.gutter .col-xs-1,
.gutter .col-xs-2,
.gutter .col-xs-3,
.gutter .col-xs-4,
.gutter .col-xs-5,
.gutter .col-xs-6,
.gutter .col-xs-7,
.gutter .col-xs-8,
.gutter .col-xs-9,
.gutter .col-xs-10,
.gutter .col-xs-11,
.gutter .col-xs-12,
.gutter .col-xs-offset-0,
.gutter .col-xs-offset-1,
.gutter .col-xs-offset-2,
.gutter .col-xs-offset-3,
.gutter .col-xs-offset-4,
.gutter .col-xs-offset-5,
.gutter .col-xs-offset-6,
.gutter .col-xs-offset-7,
.gutter .col-xs-offset-8,
.gutter .col-xs-offset-9,
.gutter .col-xs-offset-10,
.gutter .col-xs-offset-11,
.gutter .col-xs-offset-12 {
  padding: 8px;
}
.col-xs {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}
.col-xs-1 {
  -ms-flex-preferred-size: 8.33333333%;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}
.col-xs-2 {
  -ms-flex-preferred-size: 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}
.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}
.col-xs-4 {
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}
.col-xs-5 {
  -ms-flex-preferred-size: 41.66666667%;
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}
.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.col-xs-7 {
  -ms-flex-preferred-size: 58.33333333%;
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}
.col-xs-8 {
  -ms-flex-preferred-size: 66.66666667%;
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}
.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.col-xs-10 {
  -ms-flex-preferred-size: 83.33333333%;
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}
.col-xs-11 {
  -ms-flex-preferred-size: 91.66666667%;
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}
.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
.col-xs-offset-0 {
  margin-left: 0;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: start;
}
.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}
.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: end;
}
.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.around-xs {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.between-xs {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.first-xs {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}
.last-xs {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}
@media only screen and (min-width: 48em) {
  .container {
    width: 49rem;
  }
  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-offset-0,
  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11,
  .col-sm-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .gutter .col-sm,
  .gutter .col-sm-1,
  .gutter .col-sm-2,
  .gutter .col-sm-3,
  .gutter .col-sm-4,
  .gutter .col-sm-5,
  .gutter .col-sm-6,
  .gutter .col-sm-7,
  .gutter .col-sm-8,
  .gutter .col-sm-9,
  .gutter .col-sm-10,
  .gutter .col-sm-11,
  .gutter .col-sm-12,
  .gutter .col-sm-offset-0,
  .gutter .col-sm-offset-1,
  .gutter .col-sm-offset-2,
  .gutter .col-sm-offset-3,
  .gutter .col-sm-offset-4,
  .gutter .col-sm-offset-5,
  .gutter .col-sm-offset-6,
  .gutter .col-sm-offset-7,
  .gutter .col-sm-offset-8,
  .gutter .col-sm-offset-9,
  .gutter .col-sm-offset-10,
  .gutter .col-sm-offset-11,
  .gutter .col-sm-offset-12 {
    padding: 8px;
  }
  .col-sm {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .col-sm-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .col-sm-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .col-sm-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .col-sm-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .col-sm-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .col-sm-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .col-sm-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .col-sm-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .start-sm {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }
  .center-sm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .end-sm {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }
  .top-sm {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .middle-sm {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bottom-sm {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .around-sm {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .between-sm {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .first-sm {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .last-sm {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@media only screen and (min-width: 64em) {
  .container {
    width: 65rem;
  }
  .hide-from-md {
    display: none;
  }
  .hide-to-md {
    display: block;
  }
  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-offset-0,
  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11,
  .col-md-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .gutter .col-md,
  .gutter .col-md-1,
  .gutter .col-md-2,
  .gutter .col-md-3,
  .gutter .col-md-4,
  .gutter .col-md-5,
  .gutter .col-md-6,
  .gutter .col-md-7,
  .gutter .col-md-8,
  .gutter .col-md-9,
  .gutter .col-md-10,
  .gutter .col-md-11,
  .gutter .col-md-12,
  .gutter .col-md-offset-0,
  .gutter .col-md-offset-1,
  .gutter .col-md-offset-2,
  .gutter .col-md-offset-3,
  .gutter .col-md-offset-4,
  .gutter .col-md-offset-5,
  .gutter .col-md-offset-6,
  .gutter .col-md-offset-7,
  .gutter .col-md-offset-8,
  .gutter .col-md-offset-9,
  .gutter .col-md-offset-10,
  .gutter .col-md-offset-11,
  .gutter .col-md-offset-12 {
    padding: 8px;
  }
  .col-md {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .col-md-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .col-md-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .col-md-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .col-md-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .col-md-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .col-md-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .col-md-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .col-md-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .start-md {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }
  .center-md {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .end-md {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }
  .top-md {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .middle-md {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bottom-md {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .around-md {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .between-md {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .first-md {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .last-md {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@media only screen and (min-width: 75em) {
  .container {
    width: 76rem;
  }
  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .gutter .col-lg,
  .gutter .col-lg-1,
  .gutter .col-lg-2,
  .gutter .col-lg-3,
  .gutter .col-lg-4,
  .gutter .col-lg-5,
  .gutter .col-lg-6,
  .gutter .col-lg-7,
  .gutter .col-lg-8,
  .gutter .col-lg-9,
  .gutter .col-lg-10,
  .gutter .col-lg-11,
  .gutter .col-lg-12,
  .gutter .col-lg-offset-0,
  .gutter .col-lg-offset-1,
  .gutter .col-lg-offset-2,
  .gutter .col-lg-offset-3,
  .gutter .col-lg-offset-4,
  .gutter .col-lg-offset-5,
  .gutter .col-lg-offset-6,
  .gutter .col-lg-offset-7,
  .gutter .col-lg-offset-8,
  .gutter .col-lg-offset-9,
  .gutter .col-lg-offset-10,
  .gutter .col-lg-offset-11,
  .gutter .col-lg-offset-12 {
    padding: 8px;
  }
  .col-lg {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .col-lg-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .col-lg-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .col-lg-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .col-lg-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .start-lg {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }
  .center-lg {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .end-lg {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }
  .top-lg {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .middle-lg {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bottom-lg {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .around-lg {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .between-lg {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .first-lg {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .last-lg {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
.customInquery .textarea {
  width: 100%;
  height: 100px;
  background: white;
  border-color: #0000002b;
  border-style: dashed;
}
.customInquery .inquery-container {
  height: 100%;
  display: grid;
  place-content: center;
  padding: 60px;
  box-sizing: border-box;
  text-align: center;
  gap: 36px;
}
.customInquery .inquery-container img {
  justify-self: center;
  max-width: 150px;
}
.customInquery .inquery-container h2 {
  color: #8A55FF;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
}
.customInquery .inquery-container .question {
  gap: 20px;
  align-items: center;
}
.customInquery .inquery-container .question .question-text {
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 1rem;
}
.customInquery .inquery-container .question .check-question {
  align-items: flex-start;
  gap: 8px;
}
.customInquery .inquery-container .question .check-question strong {
  text-align: left;
}
.customInquery .inquery-container .question .check-question input {
  width: 18px;
  height: 18px;
}
.customInquery .inquery-container .question .check-question input:checked {
  accent-color: #6625df;
}
.customInquery .inquery-container .save-button {
  background-color: #6625df;
  gap: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-transform: none;
  color: white;
  justify-self: center;
}
.customInquery .inquery-container .save-button[disabled="disabled"] {
  background-color: #EEEEEE;
  color: #D9D9D9;
}
.customInquery canvas {
  border: 1px dashed;
  border-color: #0000002b;
  margin: 0 !important;
}
.email-signup ons-input {
  width: 100%;
}
.email-signup span.tipe-label {
  font-family: 'pmxPwaDefault', 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #afafaf;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1rem;
  font-weight: 400;
  pointer-events: none;
}
.email-signup span.month-label {
  position: absolute;
  left: 5px;
  bottom: 3px;
  opacity: 0.3;
}
.email-signup ons-select select {
  height: 23px;
  background: none;
  line-height: 17px;
  border-bottom: 1px solid #afafaf;
}
.email-signup .refresh-captcha {
  position: absolute;
  right: 60px;
  top: 50%;
  margin-top: -10px;
  opacity: 0.64;
  color: #2ea92e;
  cursor: pointer;
}
.email-signup .loading-captcha {
  top: 50%;
  position: absolute;
  left: 50%;
  margin: -8px 0 0 -5px;
  color: blue;
}
.email-signup .loadingCheckerboard {
  background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), /* checkered effect */ linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 2em 2em;
}
.home {
  height: 100%;
  position: relative;
}
.home .dots {
  position: absolute;
  width: 95%;
  margin-left: 2.5%;
  bottom: 0;
  text-align: center;
  z-index: 10;
}
.home .dots .text {
  color: white;
  opacity: 0.81;
  font-size: 20px;
  margin-top: 5px;
  text-transform: uppercase;
}
.home .dots .dot {
  height: 3px;
  margin: 12px 1%;
  margin-bottom: 12px;
  background-color: rgba(128, 128, 128, 0.7);
}
.home .dots .dot.car-active {
  background-color: white;
}
.home ons-carousel ons-carousel-item {
  position: relative;
}
.home ons-carousel .play-button {
  transition: opacity 300ms ease-in;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}
.home ons-carousel video {
  width: 100%;
  height: auto;
}
.home ons-carousel video.bg-cover-desktop {
  height: auto;
}
.home ons-carousel video.bg-cover-mobile {
  height: 100%;
}
.home ons-carousel video.bg-cover-both {
  height: auto;
}
.home ons-carousel video.bg-cover-none {
  height: 100%;
}
.home ons-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home ons-carousel img.bg-cover-desktop {
  object-fit: cover;
}
.home ons-carousel img.bg-cover-mobile {
  object-fit: contain;
}
.home ons-carousel img.bg-cover-both {
  object-fit: cover;
}
.home ons-carousel img.bg-cover-none {
  object-fit: contain;
}
.home .url {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 502px) {
  .home ons-carousel img {
    object-fit: cover;
  }
  .home ons-carousel img.bg-cover-desktop {
    object-fit: cover;
  }
  .home ons-carousel img.bg-cover-mobile {
    object-fit: cover;
  }
  .home ons-carousel img.bg-cover-both {
    object-fit: cover;
  }
  .home ons-carousel img.bg-cover-none {
    object-fit: cover;
  }
  .home ons-carousel video {
    height: auto;
  }
  .home ons-carousel video.bg-cover-desktop {
    height: 100%;
  }
  .home ons-carousel video.bg-cover-mobile {
    height: auto;
  }
  .home ons-carousel video.bg-cover-both {
    height: auto;
  }
  .home ons-carousel video.bg-cover-none {
    height: 100%;
  }
}
.login-form {
  text-align: center;
  width: 80%;
  margin: 20px auto 0;
}
.login-form .warn {
  font-size: 15px;
  line-height: 16px;
  text-align: justify;
  margin-bottom: 15px;
  color: #ff7b7b;
}
.login-form .ref {
  margin: 10px auto 35px auto;
  opacity: 0.64;
  max-width: 270px;
  font-size: 20px;
}
.login-form .logo {
  height: 140px;
  width: 140px;
  object-fit: contain;
  margin-bottom: 10px;
}
.login-form .social-box {
  color: white;
  cursor: pointer;
  border-radius: 5px;
  max-width: 300px;
  transition-property: box-shadow, color, background-color, border-color;
  transition-duration: .4s;
  transition-timing-function: ease;
  margin: auto;
  margin-bottom: 10px;
  min-height: 40px;
  overflow: hidden;
  /*&:hover{*/
  /*background-color: white!important;*/
  /*.icon{*/
  /*background-color: transparent;*/
  /*box-shadow: none;*/
  /*border-right: 1px solid transparent;*/
  /*}*/
  /*}*/
}
@media (max-height: 450px) {
  .login-form .social-box {
    zoom: 0.75;
  }
}
.login-form .social-box .icon {
  width: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-top: 12px;
  box-sizing: border-box;
  background: #00000024;
  box-shadow: 0 0 10px #0000006b;
  margin-right: 15px;
}
.login-form .social-box .icon i {
  font-size: 20px;
}
.login-form .social-box .text {
  text-align: left;
}
.login-form .social-box .text .main-text {
  font-size: 16px;
}
.login-form .social-box .text .sub-text {
  font-size: 13px;
  opacity: 0.64;
}
.login-form .social-box.facebook {
  background-color: #3b5999;
  border-color: #3b5999;
}
.login-form .social-box.facebook .icon {
  border-color: #3b5999;
}
.login-form .social-box.facebook:hover {
  background-color: #32456d;
}
.login-form .social-box.google {
  background-color: #dc3e33;
  border-color: #dc3e33;
}
.login-form .social-box.google .icon {
  border-color: #dc3e33;
}
.login-form .social-box.google:hover {
  background-color: #bf3e35;
}
.login-form .social-box.email {
  background-color: #009788;
  border-color: #009788;
}
.login-form .social-box.email .icon {
  border-color: #009788;
}
.login-form .social-box.email:hover {
  background-color: #038477;
}
.login-form .social-box.free {
  background-color: #484848;
  border-color: #484848;
}
.login-form .social-box.free .icon {
  border-color: #484848;
}
.login-form .social-box.free:hover {
  background-color: #272727;
}
.login-form input[type=email],
.login-form input[type=password] {
  display: block;
  width: 100%;
  margin: 0 auto;
  outline: none;
  height: 100%;
  padding-top: 15px;
  padding-bottom: 16px;
}
.login-form .login-button {
  width: 100%;
  margin: 0 auto;
}
.login-form .forgot-password {
  display: block;
  margin: 8px auto 0 auto;
  font-size: 14px;
}
.loginRequired .note {
  margin-top: 0;
  margin-bottom: 30px;
}
.mercadoPagoByApi .saved-cards {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.mercadoPagoByApi .active {
  color: green;
  font-weight: bold;
}
.mercadoPagoByApi .paying {
  opacity: 0.64;
  margin-top: 20px;
  font-size: 12px;
  margin-botton: 10px;
}
.mercadoPagoByApi .amount {
  font-size: 40px;
  color: green;
  opacity: 0.64;
  margin-top: 0;
  margin-bottom: 10px;
}
.mercadoPagoByApi .comment {
  padding: 0 20px;
  opacity: 0.64;
  margin-bottom: 30px;
  font-size: 14px;
}
.mercadoPagoByApi .protected {
  text-align: center;
}
.mercadoPagoByApi .protected span {
  font-size: 12px;
  color: #5bc89b;
  vertical-align: super;
  margin-left: 5px;
}
.mercadoPagoByApi .protected img {
  height: 20px;
}
.mercadoPagoByApi label {
  opacity: 0.64;
  display: block;
  margin-top: 10px;
  font-size: 13px;
  margin-bottom: 5px;
}
.mercadoPagoByApi input,
.mercadoPagoByApi select {
  width: 90%;
}
.mercadoPagoByApi .done {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #66BB6A;
}
.mercadoPagoByApi .done .cent {
  margin: auto;
  height: 70px;
  width: 100%;
  top: 50%;
  margin-top: -35px;
  position: absolute;
  text-align: center;
  color: white;
}
.mercadoPagoByApi .done .cent i {
  font-size: 30px;
}
.mercadoPagoByApi .done .cent p {
  font-size: 20px;
}
.missingFields .text {
  max-width: 300px;
  margin: 40px 0;
  opacity: 0.64;
}
.missingFields ons-input {
  width: 280px;
}
.missingFields span.month-label {
  position: absolute;
  left: 5px;
  bottom: 3px;
  opacity: 0.3;
}
.missingFields ons-select select {
  height: 24px;
  background: none;
  border-bottom: 1px solid #afafaf;
}
.missingFields .custom input,
.missingFields .custom select {
  min-width: 280px;
}
.notifications-view ons-list {
  background: transparent;
}
.notifications-view ons-list ons-list-item {
  background: white;
  margin-bottom: 10px;
}
.notifications-view .removeButton {
  width: auto;
  margin: 0 10px 10px 10px;
  border-left: 1px solid;
  font-size: 0.9rem;
}
.nps-view .score-button {
  min-width: 50px;
  margin: 4px;
}
.nps-view .textarea {
  width: 90%;
  height: 100px;
  background: white;
  border-color: #0000002b;
  border-style: dashed;
}
.singletonDetected {
  height: 100%;
}
.selectRouter .active {
  color: green;
  font-weight: bold;
}
.selectRouter .angular-google-map {
  height: 100%;
}
.selectRouter .angular-google-map .angular-google-map-container {
  height: 100%;
}
.user-conf .avatar {
  background: #f1f0f0;
  border: 2px solid white;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  overflow: hidden;
  padding: 5px;
  box-shadow: 0 0 10px #0000001f;
  object-fit: cover;
}
/*@primaryColor: #2962FF;*/
/*@primaryColor: #1976d2;*/
/*@left-menu-background: white;*/
/*@left-menu-shadow: 0 58px 3px rgba(0, 0, 0, 0.13);*/
/*@page-background: #eef5f9;*/
.error-alert-pentaerror .alert-dialog.alert-dialog--material {
  min-width: 400px;
}
.error-alert-pentaerror .alert-dialog-container {
  padding: 22px 14px 14px 14px;
}
.error-alert-pentaerror .alert-dialog-title {
  color: #5E28D5;
  text-align: center;
}
.error-alert-pentaerror .alert-dialog-technical {
  align-items: center;
  font-size: 14px;
  color: #8a8a8a;
}
.error-alert-pentaerror .alert-dialog-technical div {
  margin-top: 4px;
}
.error-alert-pentaerror .alert-dialog-technical .error-id {
  -webkit-user-select: all;
  /* Chrome all / Safari all */
  -moz-user-select: all;
  /* Firefox all */
  -ms-user-select: all;
  /* IE 10+ */
  user-select: all;
  /* Likely future */
}
.error-alert-pentaerror .alert-dialog-image {
  width: 100%;
  text-align: center;
  margin: 16px auto;
}
.error-alert-pentaerror .alert-dialog-image img {
  width: 160px;
}
.error-alert-pentaerror .alert-dialog-content {
  color: #333;
  text-align: center;
  margin: 0 0 12px 0;
}
.error-alert-pentaerror .alert-dialog-content .human-message {
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 8px;
  font-weight: bold;
}
.error-alert-pentaerror .alert-dialog-content .fixed-message {
  font-size: 14px;
  line-height: 16px;
}
.error-alert-pentaerror .alert-dialog-button {
  color: #5E28D5;
}
.toastError .toast.toast--material,
.toastInfo .toast.toast--material {
  bottom: initial;
  min-width: 200px;
  height: auto;
  padding: 2px 2px;
  min-height: initial;
  border-radius: 5px;
  left: initial;
  right: 8px;
  margin: 0 auto;
  top: 8px;
  font-size: 13px;
}
.toastError .toast.toast--material .toast__message.toast--material__message,
.toastInfo .toast.toast--material .toast__message.toast--material__message {
  margin: 0 10px 0 10px;
}
.toastInfo .toast.toast--material {
  background-color: #111111;
}
.veil .page__content:after,
.veil .modal__content:after {
  content: '';
  position: fixed;
  top: 0;
  background-color: rgba(158, 158, 158, 0.35);
  bottom: 0;
  right: 0;
  left: 0;
  background-image: url(static/img/loading.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  -webkit-animation: fadein 1s ease 1 normal forwards;
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pmxPwa-col {
  display: flex !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  flex-direction: column !important;
  -webkit-flex-direction: column !important;
  overflow: hidden !important;
}
.pmxPwa-row {
  display: flex !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
  overflow: hidden !important;
}
.pmxPwa-noflx {
  flex: 0 0 auto !important;
  -webkit-box-flex: 0 0 auto !important;
  -moz-box-flex: 0 0 auto !important;
  -webkit-flex: 0 0 auto !important;
  -ms-flex: 0 0 auto !important;
}
.pmxPwa-flx1 {
  flex: 1 !important;
  -webkit-box-flex: 1 !important;
  -moz-box-flex: 1 !important;
  -webkit-flex: 1 !important;
  -ms-flex: 1 !important;
}
.pmxPwa-aling-center {
  align-items: center !important;
}
.pmxPwa-scr-y {
  overflow-y: auto !important;
}
.qr-code canvas {
  margin-top: 10px;
}
.qr-code .note {
  padding: 0 20px;
  white-space: pre-wrap;
  opacity: 0.64;
}
.appRate-modal {
  width: 100%;
  height: 100%;
  background: white;
  padding-top: 10px;
  padding-bottom: 10px;
  max-height: 60px;
  min-height: 60px;
  overflow: hidden;
}
.appRate-modal .rating-component {
  margin: 0 0 20px 0;
}
.appRate-modal textarea {
  height: 50px;
  width: 80%;
  border-radius: 5px;
  border-style: dashed;
  border-color: lightgray;
  margin-top: 20px;
  padding: 8px;
  resize: none;
}
.appRate-modal ons-button.save {
  width: 80%;
  box-sizing: content-box;
  padding: 0 8px;
}
.appRate-modal.expand {
  transition: all 0.8s ease-in-out;
  max-height: 280px;
}
.adjust-size {
  pointer-events: none;
}
.adjust-size .action-sheet-mask {
  display: none;
}
.adjust-size .action-sheet {
  pointer-events: all;
}
.manualGeolocation i {
  font-size: 40px;
  margin-top: -45px;
  margin-left: -15px;
  color: red;
}
.manualGeolocation .angular-google-map {
  height: 100%;
  padding: 12px 0px;
  box-sizing: border-box;
}
.manualGeolocation .angular-google-map .angular-google-map-container {
  height: 100%;
}
.ntn-shopping-view {
  width: 100%;
  height: 100%;
  background: white;
  padding-top: 25px;
  padding-bottom: 10px;
  position: relative;
}
.ntn-shopping-view .shopping-list {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 50vmax;
}
.ntn-shopping-view .shopping-list .shopping-item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  max-width: 45vw;
  margin: 0.5rem;
  box-shadow: 0 0 5px #00000080;
  border-radius: 0.2rem;
  min-width: 45vw;
}
.ntn-shopping-view .shopping-list .shopping-item img {
  width: 100%;
  object-fit: contain;
}
@media only screen and (min-width: 450px) {
  .ntn-shopping-view .shopping-list .shopping-item {
    max-width: 200px;
    min-width: 200px;
  }
}
.payWithPoints-modal .rating-component {
  margin: 20px 0;
}
.payWithPoints-modal input,
.payWithPoints-modal select {
  width: 100%;
}
.payWithPoints-modal .field-group {
  margin-bottom: 15px;
}
.payWithPoints-modal .field-title {
  font-size: 12px;
  opacity: 0.4;
}
.payWithPoints-modal textarea {
  height: 50px;
  width: 80%;
  border-radius: 5px;
  border-style: dashed;
  border-color: lightgray;
  margin-top: 20px;
  padding: 8px;
}
.payWithPoints-modal ons-button {
  width: 80%;
  box-sizing: content-box;
  padding: 0 8px;
}
.chat-view ons-toolbar .left {
  opacity: 0.81;
}
.chat-view ons-toolbar .ceter {
  opacity: 0.81;
}
.chat-view ons-toolbar .right ons-button {
  font-size: 20px;
  opacity: 0.81;
}
.chat-view ons-list {
  background: none !important;
}
.chat-view ons-bottom-toolbar.send-menu {
  background-color: #f0f0f0 !important;
}
.chat-view ons-bottom-toolbar.send-menu input {
  border: 0;
  outline: 0;
  border-bottom: 2px solid #9a9a9a;
  background-color: transparent;
  font-size: 20px;
  width: 100%;
}
.chat-view ons-bottom-toolbar.send-menu input:focus {
  border-bottom: 2px solid #5192ff;
}
.chat-view ons-bottom-toolbar.send-menu ons-button {
  padding: initial;
  font-size: 20px;
  color: #9a9a9a;
}
.chat-view ons-bottom-toolbar.send-menu ons-button.emojis {
  margin: 0 1rem 0 1rem;
}
.chat-view ons-bottom-toolbar.send-menu ons-button.attachment {
  margin: 0 1rem 0 1rem;
}
.chat-view ons-bottom-toolbar.send-menu ons-button.camera {
  margin: 0 0.5rem 0 0rem;
}
.chat-view ons-bottom-toolbar.send-menu ons-button.send {
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.91);
  background-color: #00b09c;
  border-radius: 50%;
  margin: 0 0.4rem;
  line-height: initial;
}
.chat-view ons-bottom-toolbar.send-menu ons-button.send i {
  font-size: 20px;
  line-height: initial;
}
.chat-view ons-bottom-toolbar.send-menu ons-button.send[disabled] {
  opacity: 0.5;
}
@keyframes pulse-call-beth {
  15% {
    box-shadow: 0 0 0 5px rgba(178, 178, 177, 0.4);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(178, 178, 177, 0.4), 0 0 0 20px rgba(178, 178, 177, 0.2);
  }
  25% {
    box-shadow: 0 0 0 15px rgba(178, 178, 177, 0.4), 0 0 0 30px rgba(178, 178, 177, 0.2);
  }
}
.chat-view .minimize-call-modal {
  height: 120px !important;
  width: 120px !important;
  margin: initial !important;
  top: 60px !important;
  left: calc(100% - 125px) !important;
}
ons-toast.securityToast {
  z-index: 10003 !important;
}
ons-toast.securityToast .toast {
  background-color: #F5F5F5;
  box-shadow: 0 0 10px #00000054;
}
ons-toast.securityToast .toast .toast__message {
  color: black;
  font-size: 16px;
  text-align: center;
}
ons-modal.callModal {
  height: 100%;
  width: 100%;
  background: transparent;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 10002 !important;
}
ons-modal.callModal .modalCall {
  position: relative;
  padding: initial;
  margin: initial;
  background: white;
  height: 100%;
}
ons-modal.callModal .modalCall .pulse {
  background: white;
  box-shadow: 0 0 0 0 #ffffff;
  animation: pulse-call 2s infinite;
}
ons-modal.callModal .modalCall .information {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 25px;
  padding: 1.5%;
  height: 90%;
  justify-content: flex-start;
}
ons-modal.callModal .modalCall .information ons-icon.call-phone {
  color: gray;
  font-size: 40px;
}
ons-modal.callModal .modalCall .information span.callAction {
  color: gray;
  font-size: 20px;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}
ons-modal.callModal .modalCall .information span.callId {
  color: gray;
  font-size: 20px;
}
ons-modal.callModal .modalCall .information span.callName {
  color: gray;
  font-size: 30px;
}
ons-modal.callModal .modalCall .information span.callStatus {
  color: gray;
  font-size: 20px;
}
ons-modal.callModal .modalCall .information span.callWait {
  color: gray;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
ons-modal.callModal .modalCall .information > img {
  border-radius: 50%;
  opacity: 0.91;
  margin: 2.5rem;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
ons-modal.callModal .modalCall .myself-fullscreen,
ons-modal.callModal .modalCall video#peer {
  background-color: black;
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
}
ons-modal.callModal .modalCall .myself-window {
  background-color: black;
  width: 25%;
  height: 25%;
  position: absolute;
  border: 1px solid;
}
ons-modal.callModal .modalCall .answer-call {
  color: white;
  background-color: green;
  box-shadow: 0 0 10px 0px #ffffff54;
  transition: none !important;
}
ons-modal.callModal .modalCall .end-call {
  z-index: 9999;
  transform: rotate(225deg) !important;
  color: white;
  background-color: red;
  box-shadow: 0 0 10px 0px #ffffff54;
  transition: none !important;
}
ons-modal.callModal .modalCall .two-btn {
  left: 10% !important;
  right: initial !important;
  bottom: 10%;
  background-color: #000000;
  box-shadow: none;
  color: red;
  opacity: 0.81;
}
ons-modal.callModal .modalCall .one-btn {
  left: 0;
  right: 0;
  margin: 0 auto;
}
ons-popover.emoji-panel .popover {
  bottom: 42px !important;
  right: initial !important;
  left: 0px !important;
  width: 100% !important;
  height: 150px !important;
}
ons-popover.emoji-panel .popover > div {
  width: 100%;
  text-align: center;
  opacity: 0.9;
  overflow: hidden;
}
ons-popover.emoji-panel .popover > div ons-toolbar {
  background-color: #f0f0f0;
  color: black;
  overflow: hidden;
  opacity: 0.9;
  position: initial;
  height: 30px;
}
ons-popover.emoji-panel .popover > div ons-toolbar .center {
  text-align: center;
  height: 30px;
  line-height: initial;
  justify-content: center;
  margin: initial;
}
ons-popover.emoji-panel .popover > div ons-toolbar .center .close-panel {
  font-size: 20px;
  padding: initial;
  cursor: pointer;
}
ons-popover.emoji-panel .popover > div ons-list {
  height: 110px;
  opacity: 0.9;
  text-align: center;
  padding: 0px 20px;
}
ons-popover.emoji-panel .popover > div ons-list .emoji {
  font-size: 20px;
  margin: 2px 2px;
  padding: 2px;
}
@keyframes pulse-call {
  15% {
    box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.4);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(255, 102, 0, 0.4), 0 0 0 20px rgba(255, 102, 0, 0.2);
  }
  25% {
    box-shadow: 0 0 0 15px rgba(255, 102, 0, 0.4), 0 0 0 30px rgba(255, 102, 0, 0.2);
  }
}
.toastError .toast--material {
  background-color: #E53935;
}
ons-modal.callModal {
  height: 100%;
  width: 100%;
  background: transparent;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 10002 !important;
}
ons-modal.callModal .containerCallModal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: initial;
  margin: initial;
  background: white;
  height: 100%;
}
ons-modal.callModal .containerCallModal .pulse {
  background: white;
  box-shadow: 0 0 0 0 #ffffff;
  animation: pulse-call-beth 2s infinite;
}
ons-modal.callModal .containerCallModal .information {
  left: 0px;
  right: 0px;
  top: 25px;
  padding: 1.5%;
  height: 90%;
  justify-content: flex-start;
}
ons-modal.callModal .containerCallModal .information.minimize-information {
  top: 0px !important;
  bottom: 0px !important;
  padding: initial !important;
  justify-content: initial !important;
  border: 1px solid #9e9e9e;
  height: 98% !important;
}
ons-modal.callModal .containerCallModal .information ons-icon.call-phone {
  color: gray;
  font-size: 40px;
}
ons-modal.callModal .containerCallModal .information span.callAction {
  color: gray;
  font-size: 20px;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}
ons-modal.callModal .containerCallModal .information span.callId {
  color: gray;
  font-size: 20px;
}
ons-modal.callModal .containerCallModal .information span.callName {
  color: gray;
  font-size: 30px;
}
ons-modal.callModal .containerCallModal .information span.callStatus {
  color: gray;
  font-size: 20px;
}
ons-modal.callModal .containerCallModal .information span.callWait {
  color: gray;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
}
ons-modal.callModal .containerCallModal .information > img {
  border-radius: 50%;
  opacity: 0.91;
  margin: 2.5rem;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
ons-modal.callModal .containerCallModal .information img.img-fullscreen {
  border-radius: initial !important;
  width: 120px !important;
  height: 120px !important;
  box-shadow: initial !important;
  margin: initial !important;
}
ons-modal.callModal .containerCallModal #localVideo {
  position: absolute;
  top: 3%;
  right: 5%;
  width: 70px;
  height: 100px;
  object-fit: fill;
  outline: 1px solid #bebebe;
  outline-offset: -1px;
  z-index: 2;
}
ons-modal.callModal .containerCallModal #remoteVideo {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: 2px solid #bebebe;
  outline-offset: -2px;
  z-index: 1;
}
ons-modal.callModal .containerCallModal ons-fab.option-btn,
ons-modal.callModal .containerCallModal ons-fab.call-btn {
  margin: 5px !important;
}
ons-modal.callModal .containerCallModal ons-fab.option-btn ons-icon,
ons-modal.callModal .containerCallModal ons-fab.call-btn ons-icon {
  line-height: inherit !important;
}
ons-modal.callModal .containerCallModal ons-fab.call-btn {
  height: 66px;
  width: 66px;
  font-size: 30px;
}
ons-modal.callModal .containerCallModal ons-fab.call-btn .fab__icon {
  line-height: 66px !important;
}
ons-modal.callModal .containerCallModal .end-call-btn {
  transform: rotate(225deg) !important;
  color: white;
  background-color: red;
  transition: none !important;
  box-shadow: 0px 0px 12px #ff000073 73;
}
ons-modal.callModal .containerCallModal .answer-call-btn {
  color: white;
  background-color: green;
  transition: none !important;
  box-shadow: 0px 0px 12px #00800073;
}
ons-modal.callModal .containerCallModal .on-off-media-btn.on {
  background-color: white;
  color: black;
}
ons-modal.callModal .containerCallModal .on-off-media-btn.off {
  background-color: gray;
  color: white;
}
ons-modal.callModal .containerCallModal ons-icon.float-icon {
  position: absolute;
  color: white;
  left: 0px;
  right: 9px;
  top: 0;
  bottom: 0;
  font-size: 12px;
}
ons-modal.callModal .containerCallModal .rota-horizontal {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
/* Teléfonos */
@media only screen and (max-width: 575px) {
  ons-modal.callModal .containerCallModal .information {
    top: 10px !important;
    height: initial !important;
  }
  ons-modal.callModal .containerCallModal .information ons-icon.call-phone {
    font-size: 30px !important;
  }
  ons-modal.callModal .containerCallModal .information span.callAction {
    font-size: 16px !important;
    opacity: 0.91;
  }
  ons-modal.callModal .containerCallModal .information span.callName {
    font-size: 16px !important;
  }
  ons-modal.callModal .containerCallModal .information span.callStatus {
    font-size: 14px !important;
    opacity: 0.91;
  }
  ons-modal.callModal .containerCallModal .information span.callWait {
    font-size: 16px !important;
  }
  ons-modal.callModal .containerCallModal .information > img {
    width: 130px !important;
    height: 130px !important;
  }
  ons-modal.callModal .containerCallModal .buttons {
    bottom: 5% !important;
  }
}
.chatModal {
  z-index: 10001 !important;
}
.chatModal .ripple__wave,
.chatModal .ripple__background {
  background: initial !important;
}
.chatModal .conteinerChatModal {
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: #F6F6F6 !important;
  flex-direction: column-reverse !important;
  overflow-y: auto !important;
}
.chatModal .conteinerChatModal .button--material--flat:focus,
.chatModal .conteinerChatModal .button--material--flat:active {
  background-color: initial !important;
}
.chatModal .conteinerChatModal ons-toolbar .left ons-button {
  padding: 4px 10px;
  font-size: 20px;
  opacity: 0.81;
}
.chatModal .conteinerChatModal ons-toolbar .ceter {
  opacity: 0.81;
}
.chatModal .conteinerChatModal ons-toolbar .right ons-button {
  padding: 4px 15px 4px 0;
  font-size: 20px;
  opacity: 0.81;
}
.chatModal .conteinerChatModal ons-list {
  background: #F6F6F6 !important;
  flex-direction: column;
  margin: 56px 0;
  padding: 0 10px;
  opacity: 1;
  display: flex !important;
  flex: 0 auto !important;
  overflow-y: auto !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.systemMsg {
  padding: 5px 10%;
}
.chatModal .conteinerChatModal ons-list ons-list-item.systemMsg > div.center {
  min-height: initial;
  padding: initial;
}
.chatModal .conteinerChatModal ons-list ons-list-item.systemMsg > div.center .fromSystem {
  color: #000000cc;
  background: #bebebe;
  border-radius: 10px;
  padding: 5px;
  font-size: 15px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.systemMsg > div.center .fromSystem .from {
  text-align: center;
}
.chatModal .conteinerChatModal ons-list ons-list-item.systemMsg > div.center .fromSystem .ts {
  padding: 0 5px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg {
  padding: initial;
  position: relative;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .msgError {
  background: red !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .msgWarning {
  background: yellow !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .msgLog {
  background: gray !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .msgInfo {
  background: lightblue !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .tailError {
  color: red !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .tailWarning {
  color: yellow !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .tailLog {
  color: gray !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .tailInfo {
  color: lightblue !important;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center {
  padding: initial;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromUser {
  padding: 5px 20% 5px 10px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromUser > div {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 8px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromUser > div .status {
  opacity: 0.6;
  margin-bottom: 5px;
  min-height: 22px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromUser > div .status .ts {
  font-size: 14px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromUser > div > span {
  opacity: 0.8;
  margin-bottom: 5px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromClient {
  padding: 5px 10px 5px 20%;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromClient > div {
  background-color: #dcf8c6;
  padding: 10px;
  border-radius: 8px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromClient > div > .status {
  opacity: 0.6;
  margin-bottom: 5px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromClient > div > .status > .ts {
  font-size: 14px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center ons-row.fromClient > div > span {
  opacity: 0.8;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg > div.center .actionMessagePanel {
  padding: 0px 5px 0 5px;
  margin: initial;
  line-height: initial;
  min-height: initial;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .tail {
  display: block;
  position: absolute;
  z-index: 100;
  font-size: 30px;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .in {
  top: 6px;
  left: 3px;
  color: #ffffff;
}
.chatModal .conteinerChatModal ons-list ons-list-item.usersMsg .out {
  top: 6px;
  right: 3px;
  color: #dcf8c6;
}
.chatModal .conteinerChatModal ons-list .actionsMessage .remove {
  padding: initial;
  min-height: auto;
  line-height: initial;
  opacity: 1;
  color: black;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu {
  display: flex !important;
  z-index: 9999;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu input#chatInput {
  border: 0;
  outline: 0;
  border-bottom: 2px solid #9a9a9a;
  background-color: transparent;
  font-size: 20px;
  width: 100%;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu input#chatInput:focus {
  border-bottom: 2px solid #5192ff;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu ons-button {
  padding: initial;
  font-size: 20px;
  color: #9a9a9a;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu ons-button.emojis {
  margin: 0 1rem 0 1rem;
  cursor: pointer;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu ons-button.attachment {
  margin: 0 1rem 0 1rem;
  cursor: pointer;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu ons-button.camera {
  margin: 0 0.5rem 0 0rem;
  cursor: pointer;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu .btn-send {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.91);
  background-color: #00b09c;
  border-radius: 50%;
  margin: 0 0.4rem;
  line-height: initial;
  cursor: pointer;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu .btn-send i {
  line-height: initial;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu .btn-sendText {
  position: absolute;
  padding: 0.5rem 0.5rem;
  font-size: 18px;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu .btn-audioRec {
  position: absolute;
  padding: 0.5rem 0.7rem;
  font-size: 18px;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu .btn-send[disabled] {
  opacity: 0.5;
}
.chatModal .conteinerChatModal ons-bottom-toolbar.send-menu .blink {
  color: red;
  animation: icon-blinker 0.8s linear infinite alternate;
}
.chatModal ons-popover.message-panel .popover--material__arrow {
  display: initial !important;
}
.chatModal ons-popover.message-panel .popover--material__content {
  padding: 5px !important;
  height: auto !important;
  min-height: initial !important;
}
.chatModal ons-popover.message-panel .removeButton {
  font-size: 12px;
  min-height: initial;
  line-height: 2;
}
.chatModal ons-popover.message-panel .removeIcon {
  position: absolute;
  color: white;
  left: 10px;
  top: 10px;
  font-size: 14px;
}
/* Teléfonos */
@media only screen and (max-width: 575px) {
}
.additionalInformation-component .ai-label {
  margin: 3px 0px;
  font-size: 13px;
  text-align: left;
  padding-top: initial !important;
}
.additionalInformation-component .encrypted {
  pointer-events: none;
}
.additionalInformation-component .ai-input {
  padding: 7px 7px !important;
  margin-right: 10px !important;
  border: 1px solid #bdbdbd;
  border-radius: 5px !important;
}
.additionalInformation-component .ai-input.ng-invalid {
  border-color: #ff8484 !important;
}
.additionalInformation-component .ai-button {
  font-size: 1rem !important;
  padding: 0px 10px !important;
  opacity: 0.9;
}
.additionalInformation-component .name {
  opacity: 0.9;
  text-transform: uppercase;
}
.additionalInformation-component .description {
  opacity: 0.7;
  text-transform: initial;
}
.additionalInformation-component .additionalInformationFile {
  position: relative;
  width: 250px;
  align-items: center;
  display: flex;
}
.additionalInformation-component .additionalInformationFile span {
  margin: 0px 0px 0px 0px;
  font-size: 16px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
  text-align: left;
}
.additionalInformation-component .additionalInformationFile ons-icon {
  font-size: 14px;
  opacity: 0.6;
  margin-left: 10px;
}
.additionalInformation-component .additionalInformation-divider {
  min-width: 100%;
  text-align: left;
  font-weight: bold;
  margin-bottom: 10px;
}
.additionalInformation-component .additionalInformation-divider span {
  margin-right: 10px;
  opacity: 1;
}
ons-dialog.additional-information-log-dialog .dialog {
  border-radius: 10px;
}
ons-dialog.additional-information-log-dialog .dialog .log-dialog-container {
  padding: 18px;
  position: relative;
  opacity: 0.91;
}
ons-dialog.additional-information-log-dialog .dialog .log-dialog-container .container-title {
  font-size: 16px;
  text-transform: uppercase;
}
ons-dialog.additional-information-log-dialog .dialog .log-dialog-container .container-log {
  margin: 10px 0;
  padding-right: 10px;
}
ons-dialog.additional-information-log-dialog .dialog .log-dialog-container .container-log .log-date {
  font-size: 14px;
  color: #9c27b0;
  font-weight: initial;
  font-style: italic;
}
ons-dialog.additional-information-log-dialog .dialog .log-dialog-container .container-log .log-value {
  font-size: 14px;
  font-weight: initial;
  margin-top: 8px;
}
ons-dialog.additional-information-log-dialog .dialog .log-dialog-container .container-btn-hide {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.81;
}
.additional-information-value-component.value {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.additional-information-value-component .crypt {
  margin-right: 4px;
  color: #5d7cff;
  cursor: pointer;
}
.additional-information-value-component .ai-value-btn {
  text-transform: initial;
  min-height: initial;
  line-height: initial;
  margin: initial;
}
.additional-information-value-component table,
.additional-information-value-component th,
.additional-information-value-component td {
  border: 1px solid #b3b3b3;
  padding: 5px;
  border-collapse: collapse;
  text-align: center;
  opacity: 0.81;
}
.additional-information-value-component table {
  width: 100%;
  border-radius: 5px;
  border-style: hidden;
  box-shadow: 0 0 0 1px #b3b3b3;
}
.additional-information-value-component td {
  border: 1px solid #ccc;
}
.additional-information-value-component .pmx-row {
  flex-wrap: wrap-reverse;
}
.additional-information-value-component .pmx-row .md-button {
  min-width: 60px;
}
.attached-files-component {
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
}
.attached-files-component .select-file {
  position: relative;
  width: 250px;
  align-items: center;
  display: flex;
}
.attached-files-component .select-file span {
  margin: 0px 0px 0px 10px;
  font-size: 16px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
  text-align: left;
}
.attached-files-component .select-file img {
  width: 40px;
  min-width: 40px;
  max-height: 40px;
}
.attached-files-component .select-file ons-icon {
  font-size: 14px;
  opacity: 0.6;
  margin-left: 10px;
}
.attached-files-component .select-file .single-file {
  margin: 0 20px 5px 0;
  min-height: 40px;
}
.attached-files-component .select-file .multiple-files {
  margin: 0 20px 5px 0;
  min-height: 40px;
}
.attached-files-component .requiredFile {
  box-shadow: inset 0 0 4px 4px #ff0000;
  border-radius: 10px;
}
.file-viewer-component .imageContainer {
  position: relative;
}
.file-viewer-component .md-button {
  min-width: 20px;
}
.file-viewer-component .imageContainer .imgBtn {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 53%);
  -ms-transform: translate(-50%, 53%);
  background-color: rgba(190, 190, 190, 0.623);
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
.file-viewer-component .hideImgButtons {
  display: none;
}
.file-viewer-component .imageContainer:hover .hideImgButtons {
  display: flex !important;
}
.file-viewer-component .media {
  flex: initial;
  height: 150px !important;
  margin: 0 !important;
}
.file-viewer-component span {
  font-size: 0.85rem;
}
.file-viewer-component img,
.file-viewer-component video {
  border-radius: 0.35rem;
  box-shadow: 0.8px 2px 3px #00000075;
}
flyers {
  display: block;
}
.flyers-component {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  position: relative;
}
.flyers-component .dots {
  position: absolute;
  width: 95%;
  margin-left: 2.5%;
  bottom: 5px;
  text-align: center;
  z-index: 10;
}
.flyers-component .dots .text {
  color: white;
  opacity: 0.81;
  font-size: 20px;
  margin-top: 5px;
  text-transform: uppercase;
}
.flyers-component .dots .dot {
  height: 3px;
  margin: 12px 1%;
  margin-bottom: 12px;
  background-color: rgba(128, 128, 128, 0.7);
}
.flyers-component .dots .dot.car-active {
  background-color: white;
}
.flyers-component .link {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flyers-component .link ons-fab.fab--mini {
  position: initial !important;
  width: 30px;
  height: 30px;
  line-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.flyers-component .link ons-fab.fab--mini span {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flyers-component .inquiry {
  position: absolute;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 40px;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.flyers-component .inquiry ons-card {
  text-align: center;
  padding: 25px 16px 16px 16px;
  width: 100%;
  position: relative;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.flyers-component .inquiry ons-card .question {
  font-size: 18px;
  font-weight: 600;
}
.flyers-component .inquiry ons-card .answer {
  margin-top: 20px;
}
.flyers-component .inquiry ons-card .answer .text-answer,
.flyers-component .inquiry ons-card .answer .option {
  padding: 10px 0;
  background: #e9e9e9;
  white-space: normal;
  border-radius: 8px;
  border: 1px solid #bdbdbd;
  text-align: center;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.flyers-component .inquiry ons-card .answer .text-answer span,
.flyers-component .inquiry ons-card .answer .option span {
  padding: 0 50px 0 30px;
  line-height: initial;
  color: black;
}
.flyers-component .inquiry ons-card .answer .text-answer {
  resize: none;
  padding: 10px !important;
}
.flyers-component .inquiry ons-card .answer .text-answer textarea {
  width: 100%;
  background: transparent;
  border: none;
  resize: none;
  text-align: center;
}
.flyers-component .inquiry ons-card .answer .option[disabled] {
  opacity: initial;
  pointer-events: none;
}
.flyers-component .inquiry ons-card .answer .percent {
  font-size: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  text-align: center;
  font-size: 16px;
}
.flyers-component .inquiry ons-card .answer .active {
  background-color: aquamarine;
}
.flyers-component .inquiry ons-card .answer .icon-trivia {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
}
.flyers-component .inquiry ons-card .icon-question {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
}
.flyers-component .inquiry ons-card .icon-question ons-icon {
  height: 30px;
  width: 30px;
  background: #838383;
  border-radius: 50%;
  border: solid 2px white;
  color: white;
  font-size: 20px;
  line-height: 1.5;
}
.flyers-component .video ons-fab.fab--mini {
  position: absolute;
  background-color: gray;
  bottom: 25px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.flyers-component .video ons-fab.fab--mini span {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}
.flyers-component .video ons-fab.fab--mini span .slash {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: -1px 1px 1px grey;
}
.identification-component .identification-select {
  padding-right: 20px !important;
  margin-right: 10px !important;
  flex: 0 0 auto !important;
}
.identification-component .identification-input {
  min-height: 32px !important;
  padding: initial;
  background-image: linear-gradient(to top, #7f7f7f 50%, transparent 50%);
}
.identification-component .text-input--underbar:invalid {
  background-image: linear-gradient(#ff6161, #ff6161), linear-gradient(to top, transparent 1px, #afafaf 1px) !important;
}
.identification-component .ng-invalid .text-input--underbar {
  background-image: linear-gradient(#ff6161, #ff6161), linear-gradient(to top, transparent 1px, #afafaf 1px) !important;
}
.identification-component .max-height-31 {
  max-height: 31px !important;
}
.identification-component .max-height-32 {
  max-height: 32px !important;
}
.identification-component .max-height-37 {
  max-height: 37px !important;
}
.loginComponent {
  text-align: center;
}
.loginComponent ons-input {
  width: 100%;
}
.loginComponent span.month-label {
  position: absolute;
  left: 5px;
  bottom: 3px;
  opacity: 0.3;
}
.loginComponent ons-select select {
  height: 23px;
  background: none;
  line-height: 17px;
  border-bottom: 1px solid #afafaf;
}
.loginComponent .refresh-captcha {
  position: absolute;
  right: 60px;
  top: 50%;
  margin-top: -10px;
  opacity: 0.64;
  color: #2ea92e;
  cursor: pointer;
}
.loginComponent .loading-captcha {
  top: 50%;
  position: absolute;
  left: 50%;
  margin: -8px 0 0 -5px;
  color: blue;
}
.loginComponent .loadingCheckerboard {
  background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), /* checkered effect */ linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 2em 2em;
}
.loginComponent .field-title {
  font-size: 12px;
  opacity: 0.4;
}
.loginComponent .error-label {
  font-size: 14px;
  opacity: 0.91;
  color: red;
}
.loginComponent .warn {
  font-size: 15px;
  line-height: 16px;
  text-align: justify;
  margin-bottom: 15px;
  color: #ff7b7b;
}
.loginComponent .ref {
  margin: 10px auto 35px auto;
  opacity: 0.64;
  max-width: 270px;
  font-size: 20px;
}
.loginComponent .logo {
  height: 140px;
  width: 140px;
  object-fit: contain;
  margin-bottom: 10px;
}
.loginComponent .social-box {
  color: white;
  cursor: pointer;
  border-radius: 5px;
  max-width: 300px;
  transition-property: box-shadow, color, background-color, border-color;
  transition-duration: .4s;
  transition-timing-function: ease;
  margin: auto;
  margin-bottom: 10px;
  min-height: 40px;
  overflow: hidden;
  /*&:hover{*/
  /*background-color: white!important;*/
  /*.icon{*/
  /*background-color: transparent;*/
  /*box-shadow: none;*/
  /*border-right: 1px solid transparent;*/
  /*}*/
  /*}*/
}
@media (max-height: 450px) {
  .loginComponent .social-box {
    zoom: 0.75;
  }
}
.loginComponent .social-box .icon {
  width: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-top: 12px;
  box-sizing: border-box;
  background: #00000024;
  box-shadow: 0 0 10px #0000006b;
  margin-right: 15px;
}
.loginComponent .social-box .icon i {
  font-size: 20px;
}
.loginComponent .social-box .text {
  text-align: left;
}
.loginComponent .social-box .text .main-text {
  font-size: 16px;
}
.loginComponent .social-box .text .sub-text {
  font-size: 13px;
  opacity: 0.64;
}
.loginComponent .social-box.facebook {
  background-color: #3b5999;
  border-color: #3b5999;
}
.loginComponent .social-box.facebook .icon {
  border-color: #3b5999;
}
.loginComponent .social-box.facebook:hover {
  background-color: #32456d;
}
.loginComponent .social-box.google {
  background-color: #dc3e33;
  border-color: #dc3e33;
}
.loginComponent .social-box.google .icon {
  border-color: #dc3e33;
}
.loginComponent .social-box.google:hover {
  background-color: #bf3e35;
}
.loginComponent .social-box.email {
  background-color: #009788;
  border-color: #009788;
}
.loginComponent .social-box.email .icon {
  border-color: #009788;
}
.loginComponent .social-box.email:hover {
  background-color: #038477;
}
.loginComponent .social-box.free {
  background-color: #484848;
  border-color: #484848;
}
.loginComponent .social-box.free .icon {
  border-color: #484848;
}
.loginComponent .social-box.free:hover {
  background-color: #272727;
}
.loginComponent input[type=email],
.loginComponent input[type=password] {
  display: block;
  width: 100%;
  margin: 0 auto;
  outline: none;
  height: 100%;
  margin-top: 10px;
}
.loginComponent .login-button {
  width: 100%;
  margin: 0 auto;
}
.loginComponent .forgot-password {
  display: block;
  margin: 8px auto 0 auto;
  font-size: 14px;
}
.loginComponent .disableButtons {
  background-color: silver!important;
  pointer-events: none;
}
.ntn-list-vertical-component .list-vertical-list {
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eeeeee;
  overflow: initial;
}
.ntn-list-vertical-component .list-vertical-value {
  margin-right: 0.5rem;
}
.ntn-list-vertical-component .list-vertical-date {
  font-size: 0.6rem;
  font-weight: 400;
  color: #e0e0e0;
}
.ntn-list-vertical-component .list-vertical-button {
  margin-top: 10px;
  border: 1px solid #048848;
  border-radius: 8px;
  padding: 0rem 0.5rem !important;
  color: #048848 !important;
  min-height: 1rem !important;
  line-height: 1.7 !important;
  font-size: 0.7rem !important;
  opacity: 0.71;
}
.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}
.hide-scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media only screen and (min-width: 450px) {
  .ntn-list-vertical-component .list-vertical-title {
    font-size: 1.5rem;
    font-weight: 600;
  }
}
@media only screen and (max-width: 450px) {
  .ntn-list-vertical-component .list-vertical-title {
    font-size: 1rem;
    font-weight: 600;
  }
}
.ntn-mall-back-bar-component {
  height: 6.5vh;
  background-color: #EFEFEF;
  position: relative;
}
.ntn-mall-back-bar-component .back-bar-panel {
  height: 100%;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.ntn-mall-back-bar-component .back-bar-button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #929292;
  cursor: pointer;
}
.ntn-mall-back-bar-component .vertical-space-bar {
  border-left: 1.5px solid #bdbdbd;
  height: 60%;
}
.ntn-mall-back-bar-component .back-bar-category {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  letter-spacing: 0.5px;
}
@media only screen and (min-width: 450px) {
  .ntn-mall-back-bar-component .back-bar-icon {
    font-size: 0.9rem;
    margin-right: 0.3rem;
  }
  .ntn-mall-back-bar-component .back-bar-text {
    font-size: 0.9rem;
  }
  .ntn-mall-back-bar-component .back-bar-category {
    padding: 0 10rem;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 450px) {
  .ntn-mall-back-bar-component .back-bar-icon {
    font-size: 0.6rem;
    margin-right: 0.3rem;
  }
  .ntn-mall-back-bar-component .back-bar-text {
    font-size: 0.6rem;
  }
  .ntn-mall-back-bar-component .back-bar-category {
    padding: 0 5rem;
    font-size: 1rem;
  }
}
ntn-mosaic-view-horizontally {
  display: flex;
  height: 100%;
  width: 100%;
}
.ntn-mosaic-view-horizontally-component {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}
.ntn-mosaic-view-horizontally-component .mosaic-view-card {
  position: relative;
  display: flex;
  margin: 0 0.5rem;
  border-radius: 0.2rem;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.ntn-mosaic-view-horizontally-component .mosaic-view-card .mosaic-name {
  color: #424242;
  line-height: 1.4;
  text-align: center;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ntn-mosaic-view-horizontally-component .mosaic-view-card .mosaic-name-float {
  color: white !important;
  padding: initial !important;
  position: absolute;
  bottom: 0rem;
  left: 5%;
}
.ntn-mosaic-view-horizontally-component .mosaic-view-card .mosaic-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top right;
}
.ntn-mosaic-view-horizontally-component .mosaic-view-card .mosaic-image-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.ntn-mosaic-view-horizontally-component .mosaic-view-card:hover {
  outline: 2px solid #607d8b45;
}
.ntn-mosaic-view-horizontally-component.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}
.ntn-mosaic-view-horizontally-component.hide-scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media only screen and (min-width: 450px) {
  .ntn-mosaic-view-horizontally-component {
    font-size: 1.2rem;
  }
  .ntn-mosaic-view-horizontally-component .mosaic-name-float {
    font-size: 1rem !important;
  }
  .ntn-mosaic-view-horizontally-component .mosaic-image-shadow {
    box-shadow: inset -20px -20px 51px -10px #000000;
  }
}
@media only screen and (max-width: 450px) {
  .ntn-mosaic-view-horizontally-component .mosaic-name {
    font-size: 0.8rem;
  }
  .ntn-mosaic-view-horizontally-component .mosaic-name-float {
    font-size: 0.8rem !important;
  }
  .ntn-mosaic-view-horizontally-component .mosaic-image-shadow {
    box-shadow: inset -9px -20px 20px -15px #000000;
  }
}
.ntn-mosaic-view-vertical-component {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.ntn-mosaic-view-vertical-component .mosaic-name {
  color: #424242;
  font-size: 1.3rem;
  line-height: 1.5rem;
  text-align: center;
}
.ntn-mosaic-view-vertical-component .mosaic-name-float {
  color: white !important;
  font-size: 1rem !important;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
}
.ntn-mosaic-view-vertical-component .mosaic-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ntn-mosaic-view-vertical-component .mosaic-image-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset -20px -20px 51px -10px #000000;
  top: 0;
  left: 0;
}
.ntn-mosaic-view-vertical-component:hover {
  outline: 2px solid #607d8b45;
}
@media only screen and (min-width: 450px) {
}
@media only screen and (max-width: 450px) {
}
qr-reader {
  background: black;
  display: block;
  position: relative;
}
qr-reader video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  transform: none!important;
}
qr-reader .controls {
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: right;
}
qr-reader .controls i {
  background: white;
  padding: 5px;
  border-radius: 5px;
  width: 20px;
  text-align: center;
  margin-left: 5px;
}
.rating-component {
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
}
.router-select-component {
  display: flex;
  flex-direction: column;
  position: relative;
}
.router-select-component .routerAlert {
  text-align: center;
  opacity: 0.41;
  margin: 10px 0;
  padding-left: 10px;
}
.router-select-component .pmx-tree,
.router-select-component .router-list {
  margin: initial !important;
  padding: 15px 0 10px 10px !important;
}
.router-select-component .pmx-tree .active-router,
.router-select-component .router-list .active-router {
  background-color: #d1ffaa !important;
}
.router-select-component .pmx-tree .group-line,
.router-select-component .router-list .group-line {
  padding-left: 15px;
  padding: 0px 0 0px 10px;
  margin: 0px 0 0px 17px;
  border-left: 1px solid #0f101133;
}
.router-select-component .pmx-tree .group-divider,
.router-select-component .router-list .group-divider {
  background-color: #f4f4f4;
  border-radius: 8px;
  margin: 3px 0;
  padding: 5px 5px 5px 15px;
  align-items: center;
}
.router-select-component .pmx-tree .group-i,
.router-select-component .router-list .group-i {
  width: 15px;
  text-align: center;
  font-size: 14px;
}
.router-select-component .pmx-tree .rotate,
.router-select-component .router-list .rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}
.router-select-component .pmx-tree .down,
.router-select-component .router-list .down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.router-select-component .pmx-tree .group-label,
.router-select-component .router-list .group-label {
  margin: 3px 0px;
  text-align: left;
  display: flex;
  flex: 1;
  align-items: center;
}
.router-select-component .pmx-tree .router-name,
.router-select-component .router-list .router-name,
.router-select-component .pmx-tree .group-name,
.router-select-component .router-list .group-name {
  opacity: 1;
  font-size: 16px;
  margin-right: 10px;
}
.router-select-component .pmx-tree .router-address,
.router-select-component .router-list .router-address,
.router-select-component .pmx-tree .group-description,
.router-select-component .router-list .group-description {
  opacity: 0.8;
  font-size: 12px;
  text-transform: initial;
  font-weight: initial;
  white-space: normal;
}
.translator-component {
  position: fixed;
  z-index: 99999999;
  width: 400px;
  height: 600px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
  overflow: hidden;
}
.translator-component .title {
  text-align: center;
  padding: 5px;
  background: #4820ab;
  color: white;
  box-shadow: 0 0 5px #00000066;
}
.translator-component .search {
  padding: 10px;
  box-shadow: 0 0 10px #e4e4e4;
}
.translator-component .search i {
  margin-right: 5px;
  margin-top: 3px;
  opacity: 0.41;
}
.translator-component .search .clean {
  color: #4820ab;
  opacity: 1;
  margin-left: 5px;
  margin-right: 0;
}
.translator-component .search input {
  border-color: #d2d2d2;
  border-style: solid;
}
.translator-component .text {
  padding: 12px 5px;
  border-bottom: 1px solid #eeeeee;
}
.translator-component .text .key {
  font-size: 12px;
  margin-bottom: 3px;
  color: #4e0ed1;
}
.translator-component .text .value {
  border-style: dashed;
  border-color: #cbcbcb;
  color: #3f3f3f;
}
.translator-component .text .value.modified {
  background-color: #e9fff7;
}
.translator-component .buttons {
  text-align: right;
  padding: 10px;
}
.chat-call-buttons-component ons-fab.option-btn,
.chat-call-buttons-component ons-fab.call-btn {
  margin: 5px !important;
}
.chat-call-buttons-component ons-fab.option-btn ons-icon,
.chat-call-buttons-component ons-fab.call-btn ons-icon {
  line-height: inherit !important;
}
.chat-call-buttons-component ons-fab.call-btn {
  height: 66px;
  width: 66px;
  font-size: 30px;
}
.chat-call-buttons-component ons-fab.call-btn .fab__icon {
  line-height: 66px !important;
}
.chat-call-buttons-component .end-call-btn {
  transform: rotate(225deg) !important;
  color: white;
  background-color: red;
  transition: none !important;
  box-shadow: 0px 0px 12px #ff000073 73;
}
.chat-call-buttons-component .answer-call-btn {
  color: white;
  background-color: green;
  transition: none !important;
  box-shadow: 0px 0px 12px #00800073;
}
.chat-call-buttons-component .on-off-media-btn.on {
  background-color: white;
  color: black;
}
.chat-call-buttons-component .on-off-media-btn.off {
  background-color: gray;
  color: white;
}
.chat-call-buttons-component ons-icon.float-icon {
  position: absolute;
  color: white;
  left: 0px;
  right: 9px;
  top: 0;
  bottom: 0;
  font-size: 12px;
}
.chat-message-component .chat-message-container p > a {
  word-break: break-word;
  user-select: auto;
}
.chat-message-component .chat-message-container .msg-status {
  opacity: 0.9;
  margin-right: 5px;
  color: #757575;
}
.chat-message-component .chat-message-container .msg-redo {
  opacity: 0.9;
  margin-right: 5px;
  cursor: pointer;
}
.chat-message-component .chat-message-container .msg-error {
  opacity: 0.9;
  margin-right: 5px;
  color: red;
}
.chat-message-component .chat-message-container .user-style {
  display: none;
}
.chat-message-component .chat-message-container .chat-message-status:hover .user-style {
  display: block;
}
.chat-message-component .chat-message-container .chat-file img {
  aspect-ratio: 2;
  object-fit: contain;
}
.ntn-club-card-view .club-card-body {
  border-radius: 0.4rem;
  border: 2px solid #eeeeee;
  margin: 1em;
  margin-top: initial;
  padding: 1em;
  -webkit-box-shadow: 0px 0px 5px -4px #000000bf bf;
  -moz-box-shadow: 0px 0px 5px -4px #000000bf bf;
  box-shadow: 0px 0px 5px -4px #000000bf bf;
}
.ntn-club-card-view .club-card-body .club-card-title {
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3rem;
}
.ntn-club-card-view .club-card-body .club-card-description,
.ntn-club-card-view .club-card-body .club-card-products {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.938rem;
  margin: initial;
  margin-top: 0.2rem;
  color: #808080;
}
.ntn-club-card-view .club-card-body .club-card-remaining-uses {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.938rem;
  margin: initial;
  margin-top: 0.2rem;
  text-align: center;
  color: #048848;
}
.ntn-club-card-view .club-card-body .club-card-conditions {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.938rem;
  margin: initial;
  margin-top: 0.2rem;
  color: #026C39;
}
.ntn-club-card-view .club-card-body .club-card-expand-button {
  font-style: normal;
  font-weight: 600;
  font-size: 0.625rem;
  line-height: 1rem;
  text-decoration-line: underline;
  color: #808080;
  margin-top: 0.3rem;
}
.ntn-club-card-view .club-card-body .club-card-button,
.ntn-club-card-view .club-card-body .club-card-gift-button {
  background: #048848;
  border: 1px solid #048848;
  border-radius: 0.3rem;
  color: white;
  padding: 0 0.625rem;
  font-size: 0.813rem;
  line-height: 1rem;
  height: 2.5rem;
  max-width: 6rem;
  white-space: initial;
}
.ntn-club-card-view .club-card-body .club-card-button:hover,
.ntn-club-card-view .club-card-body .club-card-gift-button:hover {
  background: #00A756;
  border: 1px solid #00A756;
  color: white;
  opacity: 1 !important;
}
.ntn-club-card-view .club-card-body .club-card-button:active,
.ntn-club-card-view .club-card-body .club-card-gift-button:active {
  background: #026C39;
  border: 1px solid #026C39;
  color: white;
  opacity: 1 !important;
}
.ntn-club-card-view .club-card-body .club-card-gift-button {
  margin-left: 0.2rem;
}
.ntn-club-card-view .club-card-body .collapse-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-height: 1rem;
  transition: max-height 0.5s ease;
}
.ntn-club-card-view .club-card-body .expand-text {
  white-space: normal !important;
  max-height: 100% !important;
}
@media screen and (min-width: 1024px) {
  .ntn-club-card-view .club-card-title {
    font-size: 1.2rem !important;
  }
  .ntn-club-card-view .club-card-conditions {
    font-size: 1rem !important;
  }
  .ntn-club-card-view .club-card-button {
    font-size: 0.8rem !important;
    max-width: initial !important;
  }
  .ntn-club-card-view .club-card-remaining-uses {
    font-size: 0.8rem !important;
  }
  .ntn-club-card-view .club-card-body {
    margin: 0 0 1rem 0 !important;
  }
}
html,
body {
  position: fixed;
  overflow: hidden;
}
html .pac-container,
body .pac-container {
  position: fixed!important;
}
html.preload {
  background-image: url(static/img/loading.gif);
  background-position: center;
  background-size: 10vh;
  background-repeat: no-repeat;
}
@media (min-width: 450px) {
  ::-webkit-scrollbar {
    width: 5px;
    /* for vertical scrollbars */
    height: 5px;
    /* for horizontal scrollbars */
  }
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
  }
}
ons-toolbar-button {
  position: relative;
}
ons-toolbar-button span.notification,
.left-menu span.notification {
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 1;
  line-height: 0.813rem;
  font-size: 0.813rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.share-icon {
  width: 20px!important;
  opacity: 0.41;
  margin-right: 4px!important;
  margin-left: 4p!important;
}
.top-bar-center {
  padding-top: 10px!important;
  text-align: center!important;
}
.top-bar-center .txt-top {
  font-size: 0.7rem;
  line-height: 0.9rem;
  opacity: 0.41;
}
.top-bar-center .txt-bot {
  font-size: 1rem;
  line-height: 1rem;
  margin-top: 1px;
  overflow: hidden;
  margin: auto;
  text-overflow: ellipsis;
  font-weight: bold;
  border: none!important;
}
.top-bar-center .txt-bot .fa.fa-chevron-down {
  margin-left: 5px;
  font-size: 0.875rem;
}
ons-toolbar.toolbar {
  background-color: white!important;
  box-shadow: none;
}
ons-pull-hook {
  opacity: 0.8;
}
.toolbar {
  background: white;
}
.note {
  opacity: 0.64;
  max-width: 290px;
  font-size: 0.875rem;
}
.no-data {
  opacity: 0.41!important;
  font-size: 0.875rem;
  padding: 20px;
}
.left-menu {
  background-color: white;
}
.left-menu span.notification {
  position: relative;
  top: auto;
  right: auto;
}
.left-menu .list-item--material__center {
  font-size: 0.95rem;
}
.left-menu ons-list-item img {
  width: 20px;
}
.left-menu ons-list-item .on {
  display: none;
}
.left-menu ons-list-item .off {
  display: block;
}
.left-menu ons-list-item.active .on {
  display: block;
}
.left-menu ons-list-item.active .off {
  display: none;
}
.left-menu .left-user-box {
  background-color: white;
  box-shadow: none;
  text-align: center;
}
.left-menu .left-user-box img {
  display: inline-block;
  border-radius: 50px;
  width: 60px;
  height: 60px;
  margin-top: 20px;
  margin-bottom: 7px;
}
.left-menu .page__background {
  background-color: white;
}
.left-menu .list {
  background: none;
}
.left-menu ons-list-item {
  opacity: 0.64;
}
.left-menu .left-menu-bottom {
  box-shadow: none;
  height: auto;
  border-top: 1px solid #e2e2e2;
  border-radius: 0;
  background: white;
  margin: 0 20px;
}
.left-menu .left-menu-bottom ons-list-item {
  padding: 0;
}
.left-menu .list-item__left {
  min-width: 35px;
}
/*@font-face {*/
/*font-family: 'Segoe UI Regular';*/
/*font-style: normal;*/
/*font-weight: normal;*/
/*src: local('Segoe UI Regular'), url('/frontend/static/fonts/segoe.woff') format('woff');*/
/*}*/
/*@font-face {*/
/*font-family: 'Segoe UI Italic';*/
/*font-style: normal;*/
/*font-weight: normal;*/
/*src: local('Segoe UI Italic'), url('/frontend/static/fonts/segoe-italic.woff') format('woff');*/
/*}*/
/*@font-face {*/
/*font-family: 'Segoe UI Bold';*/
/*font-style: normal;*/
/*font-weight: normal;*/
/*src: local('Segoe UI Bold'), url('/frontend/static/fonts/segoe-bold.woff') format('woff');*/
/*}*/
/*@font-face {*/
/*font-family: 'Segoe UI Bold Italic';*/
/*font-style: normal;*/
/*font-weight: normal;*/
/*src: local('Segoe UI Bold Italic'), url('/frontend/static/fonts/segoe-bold-italic.woff') format('woff');*/
/*}*/
/*.page--material__content, .page, .list, .list--material{*/
/*font-family: 'Segoe UI Regular'!important;*/
/*}*/
.toolbar .center {
  opacity: 0.81;
}
#leftMenu .active {
  background-color: #efefef;
  opacity: 1;
}
#app-update {
  position: fixed;
  z-index: 9999999;
  bottom: 0;
  color: white;
  background: #81C784;
  width: 100%;
  font-family: Arial;
  left: 0;
  right: 0;
  text-align: center;
  padding: 9px 0;
  box-shadow: 0 0 10px #0000008c;
}
#app-update .txt {
  margin-bottom: 10px;
}
#ios-install {
  position: fixed;
  background: #0000007d;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}
#ios-install .ios-install-inner {
  position: relative;
  width: 270px;
  margin: auto;
  top: 50%;
  background-color: white;
  margin-top: -150px;
  border-radius: 3px;
  box-shadow: 0 0 5px #00000073;
  overflow: hidden;
  font-family: 'Roboto', 'Noto', sans-serif;
}
#ios-install .ios-install-title {
  margin-top: 5px;
  font-size: 1.25rem;
  text-transform: capitalize;
  text-align: center;
  opacity: 0.64;
  font-weight: bold;
}
#ios-install .ios-install-instructions {
  bottom: 0;
  background: #f8f8fa;
  width: 100%;
  text-align: center;
  height: 40px;
}
#ios-install .ios-install-instructions span {
  font-size: 0.75rem;
  opacity: 0.64;
}
#ios-install .ios-install-instructions img {
  height: 25px;
  margin: 10px 5px;
}
#ios-install .close-bar {
  text-align: right;
}
#ios-install .close-bar i {
  margin: 8px 10px 0 0;
  opacity: 0.64;
}
#ios-install .ios-install-comment {
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.64;
  margin: 10px;
}
#ios-install .app-icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  background-color: #00000042;
  border-radius: 10px;
  margin: 13px 5px;
}
#ios-install .app-icon img {
  width: 80%;
  height: 80%;
  margin: 10%;
}
html .page--material__background {
  background-color: white!important;
}
html .notification.dot {
  width: 11px;
  min-width: 11px;
  height: 11px;
  min-height: 11px;
}
html .toolbar__right img {
  height: 39px;
  width: 39px;
  margin: 8px;
  margin-right: 13px;
}
html .bottom-bar {
  height: 50px;
  box-shadow: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 6px 24px #00000091;
}
html .bottom-bar .bottom-bar-text {
  font-size: 11px;
}
html .bottom-bar .active .bottom-bar-text {
  border-bottom: 8px solid;
  padding-bottom: 3px;
}
html .bottom-bar img {
  width: 20px;
  height: 20px;
}
html .page-with-bottom-toolbar > .page__content {
  bottom: 40px;
}
/*
div.pmx-row.pmx-flx-wrap
  div.pmx-flx1.pmx-cel-minwidth
  div.pmx-flx1.pmx-cel-minwidth
*/
/*
OPACIDADES:
Negro: 0.81;
Secundario: 0.64;
Terciario: 0.41;
*/
.ph-input {
  font-size: 17px;
  padding-top: 16px;
  padding-bottom: 13px;
  border: none;
  color: #000000d1;
  border: 1px solid #dedede;
}
.ph-input.ng-invalid-ng-intl-tel-input {
  border: 1px solid red;
}
.ph-input.ng-valid.ng-valid-ng-intl-tel-input {
  border: 1px solid green;
}
.pmx-flx1 {
  flex: 1;
}
.pmx-flx2 {
  flex: 2;
}
.pmx-flx3 {
  flex: 3;
}
.pmx-noflex {
  flex: 0 0 auto;
}
.pmx-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pmx-row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.pmx-flx-wrap {
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}
.pmx-center {
  justify-content: center;
}
.pmx-txt-center {
  text-align: center;
}
.pmx-scr-y {
  overflow-y: auto;
}
.pmx-scr-x {
  overflow-x: auto;
}
.pmx-flx-justify-center {
  justify-content: center;
}
.pmx-flx-align-center {
  align-items: center;
}
.pmx-flx-content-start {
  align-content: center;
}
.pmx-cel-minwidth {
  min-width: 300px;
}
.pmx-noise {
  position: relative;
  z-index: 1;
}
.pmx-noise:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}
.pmx-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.pmx-hover-dark {
  background-color: rgba(0, 0, 0, 0.1);
}
.pmx-default-html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.pmx-default-body {
  height: 100%;
  width: 100%;
  margin: 0;
}
.pmx-large-modal .ngdialog-content {
  width: 800px!important;
  min-height: 70%;
}
.pmx-larger-modal .ngdialog-content {
  width: 80%!important;
  min-height: 70%!important;
}
.no-data,
.pmx-no-data {
  text-align: center;
  margin: 10px;
  opacity: 0.8;
  font-style: italic;
}
.pmx-form.pmx-form-h {
  display: flex;
  flex-direction: row;
}
.pmx-form.pmx-form-h .pmx-form-array-box > label,
.pmx-form.pmx-form-h .pmx-form-box > label {
  margin-left: 10px;
  margin-right: 3px;
}
.pmx-form .pmx-form-array-box {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
}
.pmx-form .pmx-form-array-box > label {
  flex: 0 0 auto;
  text-align: right;
  margin: 2px 10px;
  font-size: 13px;
  opacity: 0.7;
}
.pmx-form .pmx-form-array-box i {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 3px;
}
.pmx-form .pmx-form-array-box .pmx-form-array-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.09);
}
.pmx-form .pmx-form-array-box .pmx-form-array-right .pmx-form-array-adder {
  height: 30px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}
.pmx-form .pmx-form-array-box .pmx-form-array-right .pmx-form-array-adder input,
.pmx-form .pmx-form-array-box .pmx-form-array-right .pmx-form-array-adder select,
.pmx-form .pmx-form-array-box .pmx-form-array-right .pmx-form-array-adder div[angucomplete-alt] {
  width: 0;
  flex: 1 1 auto;
  margin-right: 5px;
}
.pmx-form .pmx-form-array-box .pmx-form-array-right .pmx-form-array-item {
  display: flex;
  flex-direction: row;
}
.pmx-form .pmx-form-array-box .pmx-form-array-right .pmx-form-array-item span {
  margin-right: 5px;
  flex: 1;
  padding: 3px;
  font-size: 13px;
}
.pmx-form .pmx-form-box-v {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}
.pmx-form .pmx-form-box-v .input-array {
  display: flex;
  flex-direction: row;
}
.pmx-form .pmx-form-box-v .input-array input,
.pmx-form .pmx-form-box-v .input-array select {
  margin-right: 5px;
}
.pmx-form .pmx-form-box-v > label {
  flex: 0 0 auto;
  margin: 2px 0px;
  font-size: 13px;
  opacity: 0.7;
  text-align: left;
}
.pmx-form .pmx-form-box-v input,
.pmx-form .pmx-form-box-v select,
.pmx-form .pmx-form-box-v div[angucomplete-alt] {
  flex: 1 0 auto;
}
.pmx-form .pmx-form-box-v div[angucomplete-alt] input {
  width: 100%;
}
.pmx-form .pmx-form-box-v > input[type=checkbox] {
  align-self: center;
  flex: initial;
}
.pmx-form .pmx-form-box {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
}
.pmx-form .pmx-form-box > label {
  flex: 0 0 auto;
  text-align: right;
  margin: 2px 10px;
  font-size: 13px;
  opacity: 0.7;
}
.pmx-form .pmx-form-box input,
.pmx-form .pmx-form-box select,
.pmx-form .pmx-form-box div[angucomplete-alt] {
  flex: 1 0 auto;
}
.pmx-form .pmx-form-box div[angucomplete-alt] input {
  width: 100%;
}
.pmx-form .pmx-form-box > input[type=checkbox] {
  align-self: center;
  flex: initial;
}
.pmx-form .pmx-form-buttons {
  text-align: right;
}
/*
div.pmx-tree
  div.pmx-tree-item(ng-repeat="place in placesTree" ng-include="'pmxTreeItem'"
                    ng-hide="place._noShow")
  script(type="text/ng-template" id="pmxTreeItem")
    div.pmx-tree-arrow(ng-click="place._hide = !place._hide"
                       ng-class="{hidden: place._hide}")
    div.pmx-tree-item-content
      div.pmx-tree-current-item.peron(
          ng-click="selectPlace(place)"
          ng-class="{selected: selectedPlace === place}")
        span(title="{{place.name}}") {{place.name}}
        div.pmx-tree-controls
          i(class="fa fa-trash action")
          i(class="fa fa-plus action")
      div.pmx-tree-child-items(ng-hide="place._hide")
        div.pmx-tree-item(ng-repeat="place in place._childs" ng-hide="place._noShow"
        ng-include="'pmxTreeItem'")
*/
.pmx-tree {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  position: relative;
  margin: initial !important;
  padding: 15px 0 10px 10px !important;
}
.pmx-tree::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
.pmx-tree::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.21);
}
.pmx-tree::-webkit-scrollbar {
  width: 9px;
}
.pmx-tree > .pmx-tree-item:first-child:after {
  display: none;
}
.pmx-tree .pmx-tree-item {
  display: flex;
  flex-direction: row;
  flex: 0 0;
}
.pmx-tree .pmx-tree-item .pmx-tree-input {
  border: none;
}
.pmx-tree .pmx-tree-item .pmx-tree-input:focus {
  border: 1px solid rgba(243, 0, 0, 0.2);
}
.pmx-tree .pmx-tree-item .pmx-tree-controls {
  flex: 1;
  text-align: right;
}
.pmx-tree .pmx-tree-item .pmx-tree-controls i {
  font-size: 14px;
  opacity: 0.81;
  margin-right: 5px;
}
.pmx-tree .pmx-tree-item .pmx-tree-arrow {
  display: flex;
  flex-direction: column;
  width: 25px;
  align-items: flex-end;
  justify-content: flex-start;
  cursor: pointer;
}
.pmx-tree .pmx-tree-item .pmx-tree-item-content {
  display: flex;
  flex-direction: column;
  flex: 1 0;
}
.pmx-tree .pmx-tree-item .pmx-tree-item-content .pmx-tree-parent {
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 8px;
  margin: 3px 0;
}
.pmx-tree .pmx-tree-item .pmx-tree-item-content .pmx-tree-parent:hover {
  background-color: #e0e0e0;
}
.pmx-tree .pmx-tree-item .pmx-tree-item-content .pmx-tree-current-item {
  min-height: 30px;
  flex: 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1em;
  padding-left: 10px;
}
.pmx-tree .pmx-tree-item .pmx-tree-item-content .pmx-tree-current-item.selected {
  background-color: #d1ffaa;
}
.pmx-tree .pmx-tree-item .pmx-tree-item-content .pmx-tree-child-items {
  padding: 0px 0 0px 10px;
  margin: 0px 0 0px 17px;
  border-left: 1px solid #0f101133;
}
.cards-page ons-toolbar.toolbar {
  -webkit-box-shadow: 0px 0px 5px 0px #000000bf;
  -moz-box-shadow: 0px 0px 5px 0px #000000bf;
  box-shadow: 0px 0px 5px 0px #000000bf;
}
.cards-page .cards-vouchers-title {
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 1em 0;
}
.cards-page .cards-vouchers-title span {
  display: inline-block;
  box-sizing: border-box;
  white-space: pre-line;
  word-wrap: break-word;
  max-width: 50%;
  text-align: center;
  font-size: 1.2em;
  text-shadow: 0 0.02em 0.02em #00000059;
  font-style: normal;
  font-weight: 400;
}
.cards-page .card-button {
  justify-content: end;
}
.cards-page .card-button .button-redeem {
  font-size: 0.7rem;
  padding: 0.3em 1.2em;
  text-shadow: 0 0.04em 0.04em #00000059;
  display: inline-block;
  margin: 0 0.1em 0.1em 0;
  text-decoration: none;
  box-sizing: border-box;
  font-weight: 300;
  text-align: center;
  line-height: 1.4em;
}
.float-button {
  position: absolute;
  bottom: 0;
  height: 40px;
  left: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  overflow: visible;
  padding: 10px 0;
  padding-top: 30px;
  background: #ffffff;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.73) 80%, rgba(255, 255, 255, 0) 100%);
}
.def-product-v {
  width: 142px;
}
.def-product-v img {
  width: 100%;
  height: 94px;
  object-fit: cover;
  border-radius: 6px;
}
.def-product-v .name {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.81;
  font-size: 0.85em;
  font-weight: bold;
}
.def-product-v .price {
  opacity: 0.64;
  margin-top: 3px;
  font-size: 0.9em;
}
.def-product-v .price .discounted {
  font-weight: bold;
  color: #0c0cff;
}
.cashOnly {
  background: #6b6b6b;
  color: white;
  padding: 0 3px;
  font-size: 11px;
  border-radius: 5px;
  margin-left: 5px;
  white-space: nowrap;
}
.mosaic-product {
  padding-bottom: 8px;
}
.mosaic-product img {
  height: 170px;
  object-fit: cover;
  margin-top: -3px;
  padding-left: 1px;
  padding-right: 1px;
}
.mosaic-product .data {
  margin: 8px;
}
.mosaic-product .data .name {
  font-size: 0.8rem;
  opacity: 0.81;
}
.mosaic-product .data .description {
  font-size: 0.8rem;
  opacity: 0.41;
  max-height: 2.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
.mosaic-product .data .price {
  margin-top: 5px;
  font-size: 0.8rem;
}
.category-full-image-view {
  height: 100px;
  background-size: cover!important;
  background-position: center!important;
  position: relative;
}
.category-full-image-view .cfiv-txt {
  background: #00000021;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: inherit;
}
.category-full-image-view .cfiv-txt .full-card-title {
  text-shadow: 0 0 3px #00000066;
  color: white!important;
  opacity: 1;
}
.horizontal-category-view {
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
}
.horizontal-category-view .def-product-v {
  display: inline-block;
  margin: 0 10px 0 0;
}
.def-product-h img {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}
.def-product-h .name {
  font-weight: bold;
  opacity: 0.81;
  font-size: 0.9em;
}
.def-product-h .description {
  opacity: 0.41;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 0.85em;
  margin-top: 5px;
  white-space: pre-wrap;
}
.def-product-h .price {
  margin-top: 5px;
  opacity: 0.81;
  font-size: 0.9em;
}
.def-product-h .price .discounted {
  font-weight: bold;
  color: #0c0cff;
}
.store-delivery-method .category-title {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.4em;
  opacity: 0.81;
}
.store-delivery-method .list-item {
  min-height: 80px;
}
.store-delivery-method .list-item .list-item__title {
  font-size: 1.2em;
  line-height: 1.5em;
}
.store-delivery-method .list-item .list-item__left {
  min-width: 50px;
  text-align: center;
  justify-content: center;
}
.store-delivery-method .list-item i {
  font-size: 30px;
  opacity: 0.81;
}
.store-product-filter .search input {
  width: calc(100% - 20px);
  margin: 15px 0;
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
  background-color: #f1f1f1;
  padding-left: 49px;
  height: 39px;
}
.store-product-filter .def-product-h,
.store-product-filter .def-product-v {
  margin-bottom: 30px;
}
.store-product-filter .category-group .def-product-h {
  width: 100%;
  margin-bottom: 25px;
}
.store-product-personalization .addInfo-value {
  font-size: 0.9rem;
  opacity: 0.81;
}
.store-product-personalization button.button--quiet {
  color: #565656 !important;
  font-size: 0.7rem;
}
.store-product-personalization .list-item-nodivider__center {
  width: 100%;
}
.store-product-personalization .pers-array {
  font-size: 0.9rem;
}
.store-product-personalization .pers-title {
  font-size: 1.1rem;
  font-weight: bold;
  opacity: 0.81;
  padding: 10px 15px;
}
.store-product-personalization .list {
  background: white;
}
.store-product-personalization .def-product-h img {
  width: 100px;
  height: 83px;
  margin-right: 10px;
  border-radius: 5px;
}
.store-product-personalization .plus-price {
  color: #ff0000;
  font-weight: bold;
  opacity: 0.64;
  white-space: nowrap;
}
.store-product-personalization .category-title {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.4rem;
  opacity: 0.81;
}
.store-product-personalization .quantity {
  min-width: 50px;
  margin-top: 5px;
  text-align: center;
  display: inline-block;
}
.store-product-personalization .fab i {
  font-size: 15px;
  vertical-align: middle;
}
.store-product-personalization .select-txt {
  color: #F44336;
  background: none;
  text-align: center;
  width: 120px;
  margin-top: -40px;
  justify-content: center;
}
.store-tracking .mini-icon {
  width: 12px;
  opacity: 0.81;
  text-align: right;
  margin-right: 6px;
}
.store-tracking .list {
  background: none;
}
.store-tracking .track-header {
  color: white;
  background: #46bc2e;
  padding-bottom: 30px;
  box-shadow: 0 0 10px #0000001f;
}
.store-tracking .track-header i {
  font-size: 40px;
  margin-top: 40px;
}
.store-tracking .track-header .txt {
  margin-top: 20px;
  width: 220px;
  font-weight: bold;
}
.store-tracking .track-header .progress-bar {
  margin-top: 20px;
  width: 220px;
}
.store-tracking .track-header .progress-bar--indeterminate:after {
  background-color: white;
}
.store-tracking .track-header .progress-bar--indeterminate:before {
  background-color: white;
}
.store-product-selection {
  width: auto;
}
.store-product-selection .address-popup {
  z-index: 999999999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  padding: 0px;
  overflow: auto;
}
.store-product-selection .address-popup form {
  max-width: 90%;
  margin-top: 10px;
  text-align: left;
}
.store-product-selection .address-popup form label {
  opacity: 0.81;
}
.store-product-selection .address-popup .progress-bar--material {
  height: 2px;
  background: #d2d2d2;
}
.store-product-selection .address-popup .angular-google-map-container {
  width: 100%;
  height: 200px;
}
.store-product-selection .address-popup .angucomplete-title {
  width: 100%;
}
.store-product-selection .address-popup .angucomplete-description {
  opacity: 0.5;
  margin-left: 5px;
}
.store-product-selection .address-popup ._addressLoading input {
  background-image: none !important;
}
.store-product-selection .address-popup .angucomplete-holder {
  position: relative;
}
.store-product-selection .address-popup .angucomplete-holder input {
  width: 100%;
}
.store-product-selection .address-popup .angucomplete-holder .angucomplete-dropdown {
  position: absolute;
  background: white;
  width: 100%;
  z-index: 1;
  box-shadow: 0 0 4px #0000002e;
  border-radius: 0 0 3px 3px;
  max-height: 200px;
  overflow: auto;
}
.store-product-selection .address-popup .angucomplete-holder .angucomplete-dropdown .angucomplete-row,
.store-product-selection .address-popup .angucomplete-holder .angucomplete-dropdown .angucomplete-searching {
  padding: 5px;
  opacity: 0.81;
  border-bottom: 1px solid #efefef;
  min-height: 35px;
  display: flex;
  align-items: center;
}
.store-product-selection .address-popup .angucomplete-holder .angucomplete-dropdown .angucomplete-row:hover,
.store-product-selection .address-popup .angucomplete-holder .angucomplete-dropdown .angucomplete-searching:hover {
  padding: 5px;
  opacity: 0.81;
  border-bottom: 1px solid #efefef;
  background: #efefef;
}
.store-product-selection .router-data {
  background: white;
  padding: 20px 15px;
  text-align: left;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 0 10px #00000026;
}
.store-product-selection .router-data .title {
  opacity: 0.81;
}
.store-product-selection .router-data .subtitle {
  opacity: 0.41;
  font-size: 0.9em;
}
.store-product-selection .checkoutMethod .sub-title {
  margin-bottom: 10px;
  margin-top: 10px;
}
.store-product-selection .checkoutMethod .sub-title.warn {
  color: #ff3d00;
}
.store-product-selection .checkoutMethod form span {
  opacity: 0.64;
  margin-left: 10px;
}
.store-product-selection .checkoutMethod .main-label {
  margin-left: 0;
  margin-top: 0;
  opacity: 0.81;
  font-weight: bold;
}
.store-product-selection .checkoutMethod .thin-button {
  margin: 0;
  line-height: 30px;
  height: 30px;
  min-width: auto;
  padding: 0 10px;
  margin-top: 10px;
}
.store-product-selection .top-card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  background: #00000026;
  /*z-index: 4;*/
  /*overflow: visible;*/
  /*box-shadow: 0 0 10px #00000036;*/
  /*margin-bottom: 20px;*/
}
.store-product-selection .top-card .minilabel {
  margin-left: 5px;
  font-weight: bold;
  font-size: 0.8em;
}
.store-product-selection .top-card .inner {
  position: relative;
  padding: 20px;
  text-align: left;
  background: white;
  box-shadow: 0 0 10px #00000063;
  border: none;
  border-radius: 0 0 10px 10px;
}
.store-product-selection .top-card .inner .close {
  padding: 10px;
  opacity: 0.64;
  position: absolute;
  top: 0;
  right: 0;
}
.store-product-selection .top-card .title {
  font-size: 1.3em;
  margin-bottom: 10px;
  opacity: 0.81;
}
.store-product-selection .top-card .sub-title {
  opacity: 0.81;
}
.store-product-selection .top-card button {
  margin-top: 15px;
  min-width: 200px;
  height: 36px;
  padding: 0px;
}
.store-product-selection .carousel {
  height: 150px;
  position: relative;
  box-shadow: 0 0 10px #00000085;
}
.store-product-selection .carousel img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.store-product-selection .carousel .dots {
  position: absolute;
  width: 95%;
  margin-left: 2.5%;
  bottom: 0;
  text-align: center;
  z-index: 10;
}
.store-product-selection .carousel .dots .text {
  color: white;
  opacity: 0.81;
  font-size: 20px;
  margin-top: 5px;
  text-transform: uppercase;
}
.store-product-selection .carousel .dots .dot {
  height: 3px;
  margin: 12px 1%;
  margin-bottom: 12px;
  background-color: rgba(128, 128, 128, 0.7);
}
.store-product-selection .carousel .dots .dot.car-active {
  background-color: white;
}
.store-product-selection .search input {
  width: calc(100% - 20px);
  margin: 15px 0;
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
  background-color: #f1f1f1;
  padding-left: 49px;
  height: 39px;
}
.store-product-selection .categories {
  text-align: left;
  padding: 4px 5px;
  margin-bottom: 15px;
  background: white;
  white-space: nowrap;
  overflow-x: auto;
  margin-top: 0;
}
.store-product-selection .categories .category {
  padding: 5px 10px;
  display: inline-block;
  margin: 4px;
  border-radius: 6px;
  color: #8a8a8a;
  font-size: 0.8em;
}
.store-product-selection .prepairing {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e8e8e8;
}
.store-product-selection .prepairing .icon {
  font-size: 40px;
  padding: 0 20px 0 10px;
}
.store-product-selection .prepairing .title {
  font-weight: bold;
}
.store-product-selection .prepairing .description {
  max-height: 60px;
  overflow: hidden;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.store-product-selection .prepairing .product {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-product-selection .prepairing .button--material {
  margin-top: 8px;
  height: 20px;
  line-height: 30px;
  font-size: 13px;
  min-height: 30px;
  font-weight: bold;
}
.store-product-selection .category-group .def-product-h {
  width: 100%;
  margin-bottom: 25px;
}
.store-cart textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px dashed #00000029;
  border-radius: 5px;
  height: 50px;
  padding: 10px;
}
.store-cart .table:nth-child(odd) {
  background: #f8f8f8;
}
.store-cart .client-divider {
  min-width: 100%;
  text-align: right;
}
.store-cart .client-divider span {
  margin-right: 10px;
  opacity: 0.64;
}
.store-cart .bottom-popup {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: 700px;
}
.store-cart .bottom-popup .backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0000004a;
}
.store-cart .bottom-popup .full-card {
  margin-bottom: 0px;
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 0;
  padding-top: 18px;
  text-align: center;
}
.store-cart .bottom-popup .full-card .full-card-subtitle {
  padding: 0 20px;
}
.store-cart .bottom-popup .full-card .fa-spin {
  font-size: 20px;
  margin: 20px;
}
.store-cart .category-title {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.4em;
  opacity: 0.81;
}
.store-cart .quantity {
  min-width: 50px;
  margin-top: 5px;
  text-align: center;
  display: inline-block;
}
.store-cart .button-discount {
  position: absolute;
  top: -15px;
  right: 5%;
  padding-bottom: 5px;
  background: #4CAF50;
  border-radius: 5px;
  font-size: 11px;
  min-height: auto;
  font-weight: bold;
  line-height: initial;
  z-index: -1;
  padding: 1px 5px 5px 5px;
}
.store-cart .recomendations {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: left;
  padding: 10px 10px;
  white-space: nowrap;
  background: white;
  overflow-x: auto;
}
.store-cart .recomendations .def-product-v {
  display: inline-block;
  margin: 0 10px 0 0;
}
.store-cart .category-group {
  text-align: left;
  padding: 10px;
  background: white;
  margin: 20px 0;
}
.store-cart .category-group .category-title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 1.4em;
  opacity: 0.81;
}
.store-cart .category-group .def-product-h {
  width: 100%;
  margin-bottom: 25px;
}
.store-cart .tip-local-note {
  font-size: 0.9rem;
  opacity: 0.64;
  margin-top: 10px;
}
.store-cart button.tip {
  background: initial;
  color: black;
  border: solid 1px black;
  border-radius: 5px;
  padding: 0px 10px;
  font-size: 16px;
  margin-right: 5px;
  height: 35px;
  opacity: 0.41;
}
.store-cart button.tip.selected {
  opacity: 1;
}
.store-cart button.tips:focus,
.store-cart button.selected:focus {
  outline: initial !important;
}
.new-club .page__content {
  overflow: hidden !important;
}
.new-club ons-toolbar.toolbar {
  box-shadow: 0px 0px 5px 0px #000000bf;
  -webkit-box-shadow: 0px 0px 5px 0px #000000bf;
  -moz-box-shadow: 0px 0px 5px 0px #000000bf;
}
.new-club-page {
  align-items: center;
}
.new-club-page .new-club-point {
  width: 80%;
  max-width: 600px;
  background-color: #00A756;
  border-radius: 5px;
  margin-top: 1rem;
}
.new-club-page .new-club-point .point-symbol img {
  width: 12vw;
  object-fit: contain;
  max-width: 80px;
  max-height: 80px;
}
.new-club-page .new-club-point .point-content {
  text-align: right;
}
.new-club-page .new-club-point .point-expire {
  text-align: right;
}
.new-club-page .new-club-content {
  width: 90%;
  max-width: 600px;
}
.new-club-page .new-club-content .change-title {
  text-align: center;
  font-weight: 400;
}
.new-club-page .new-club-content .point-actions-panel {
  justify-content: center;
  margin-top: 1rem;
}
.new-club-page .new-club-content .point-actions-panel .rules-button,
.new-club-page .new-club-content .point-actions-panel .history-button,
.new-club-page .new-club-content .point-actions-panel .voucher-button {
  color: #929292;
  font-weight: 600;
  background: #EFEFEF !important;
  border-radius: 1rem;
  cursor: pointer;
}
.new-club-page .new-club-content .point-benefits {
  margin-top: 1rem;
  overflow-y: scroll;
  padding: 0 1rem;
}
.new-club-page .new-club-content .point-benefits .point-benefit {
  border: 1px solid #F2F2F2;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: initial !important;
  margin-bottom: 1rem;
}
.new-club-page .new-club-content .point-benefits .point-benefit .benefit-description {
  margin: 0.5rem 0 0 0;
  color: #929292;
}
.new-club-page .new-club-content .point-benefits .point-benefit .benefit-button {
  border: 1px solid #048848;
  border-radius: 8px;
  padding: 0rem 0.8rem;
  color: #048848;
  min-height: 1.8rem;
  line-height: 2;
  cursor: pointer;
}
.new-club-page .new-club-content .point-benefits .point-benefit .benefit-amount {
  justify-content: end;
  align-items: center;
  display: flex;
}
.new-club-page .new-club-content .benefit-conditions {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.938rem;
  margin: initial;
  margin-top: 0.2rem;
  color: #026C39;
}
.new-club-page .new-club-content .benefit-expand-button {
  font-style: normal;
  font-weight: 600;
  font-size: 0.5rem;
  line-height: 1rem;
  text-decoration-line: underline;
  color: #808080;
  margin-top: 0.3rem;
  text-align: right;
}
.new-club-page .new-club-content .collapse-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-height: 1rem;
  transition: max-height 0.5s ease;
}
.new-club-page .new-club-content .expand-text {
  white-space: normal !important;
  max-height: 100% !important;
}
.point-benefits::-webkit-scrollbar {
  display: none;
}
.point-benefits {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media only screen and (min-width: 450px) {
  .new-club-point {
    padding: 1.5rem 1.5rem;
  }
  .new-club-point .point-content .point-total {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .new-club-point .point-content .point-name {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
  }
  .new-club-point .point-expire {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.2rem;
  }
  .new-club-content {
    margin-top: 1rem;
  }
  .new-club-content .change-title {
    font-size: 2.2rem;
    line-height: 1.3;
    padding: 0 5rem;
  }
  .new-club-content .point-actions-panel .rules-button,
  .new-club-content .point-actions-panel .history-button,
  .new-club-content .point-actions-panel .voucher-button {
    min-width: 10rem;
    font-size: 1rem;
  }
  .new-club-content .point-actions-panel .rules-button {
    margin-right: 1rem;
  }
  .new-club-content .point-actions-panel .history-button {
    margin-left: 1rem;
  }
  .new-club-content .point-actions-panel .voucher-button {
    margin-left: 2rem;
  }
  .new-club-content .point-benefits .benefit-name {
    font-size: 1.5rem;
    font-weight: 600;
  }
  .new-club-content .point-benefits .benefit-description {
    font-size: 1rem;
    font-weight: 400;
  }
  .new-club-content .point-benefits .benefit-amount {
    font-size: 1rem;
    font-weight: 600;
  }
  .new-club-content .point-benefits .benefit-maxAmount {
    font-size: 0.9rem;
    opacity: 0.64;
    text-align: right;
  }
}
@media only screen and (max-width: 450px) {
  .new-club-point {
    padding: 0.5rem 1rem;
  }
  .new-club-point .point-content .point-total {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
  }
  .new-club-point .point-content .point-name {
    font-size: 1rem;
    font-weight: 600;
  }
  .new-club-point .point-expire {
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 0.4rem;
  }
  .new-club-content {
    margin-top: 1rem;
  }
  .new-club-content .change-title {
    font-size: 1.3rem;
    padding: 0 1rem;
  }
  .new-club-content .point-actions-panel .rules-button,
  .new-club-content .point-actions-panel .history-button,
  .new-club-content .point-actions-panel .voucher-button {
    min-width: 8rem;
    font-size: 0.75rem;
  }
  .new-club-content .point-actions-panel .rules-button {
    margin-right: 0.5rem;
  }
  .new-club-content .point-actions-panel .history-button {
    margin-left: 0.5rem;
  }
  .new-club-content .point-actions-panel .voucher-button {
    margin-left: 0.5rem;
  }
  .new-club-content .point-benefits .benefit-name {
    font-size: 1rem;
    font-weight: 600;
  }
  .new-club-content .point-benefits .benefit-description {
    font-size: 0.8rem;
    font-weight: 400;
  }
  .new-club-content .point-benefits .benefit-amount {
    font-size: 0.8rem;
    font-weight: 600;
  }
  .new-club-content .point-benefits .benefit-maxAmount {
    font-size: 0.7rem;
    opacity: 0.64;
    text-align: right;
  }
}
.scoring-rules-modal {
  max-height: 50vh;
  height: 100%;
  background: white;
  padding: 1rem 0.6rem 1rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.club-log-history-modal {
  max-height: 50vh;
  height: 100%;
  background: white;
  padding: 1rem 0.6rem 1rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.turns {
  background: white;
}
.turns-container {
  padding: 2rem;
}
.turns .information {
  color: white;
  border-radius: 7px;
  padding: 10px;
  background-color: #E53935;
  box-shadow: 0 0 10px #0000006b;
  display: flex;
  align-items: center;
}
.turns .information .infoMessage {
  background-color: #E53935;
  color: white;
  text-align: left;
}
.turns .badge {
  color: orange;
}
@media (min-width: 600px) {
  .turns .carousel {
    height: 280px !important;
  }
  .turns .list-item {
    flex-direction: row !important;
  }
  .turns .stats {
    flex-direction: column !important;
  }
  .turns .stats .info {
    font-size: 12px !important;
  }
  .turns .stats .info::after {
    content: initial !important;
  }
  .turns .stats .blod {
    font-size: 18px !important;
  }
}
.turns .button:not(.button--material--flat) {
  padding: 4px 32px;
  border-radius: 5px;
  box-shadow: 3px 3px 15px #63686E4D;
}
.turns .note {
  margin-bottom: 20px;
}
.turns .list {
  overflow: visible;
}
.turns .custom-list-item {
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 3px 3px 15px #63686E66;
}
.turns .custom-list-item:first-child {
  margin-top: 8px;
}
.turns .custom-list-item-header {
  display: flex;
  padding: 12px;
  color: white;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.turns .custom-list-item-header div {
  display: flex;
  flex-direction: column;
}
.turns .custom-list-item-header div:not(:last-child) {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid white;
}
.turns .custom-list-item-header div span {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 1px;
}
.turns .custom-list-item-header div b {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
}
.turns .custom-list-item-content {
  padding: 12px;
  font-size: 14px;
  background: #EFEFF0;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}
.turns .custom-list-item-content .button {
  min-height: 30px !important;
  height: 30px;
  padding: 0 8px;
  text-align: left;
  display: flex;
  align-items: center;
  text-transform: capitalize;
}
.turns .custom-list-item-content .button i,
.turns .custom-list-item-content .button img {
  margin-right: 6px;
}
.turns .custom-list-item-content .button span {
  margin-top: 2px;
}
.turns .custom-list-item-content .list-item {
  padding: 8px 8px 12px 8px;
  color: #63686E;
  border-bottom: 1px solid #ccc;
  flex-direction: column;
  align-items: flex-start;
}
.turns .custom-list-item-content .stats {
  display: flex;
  flex-direction: row;
}
.turns .custom-list-item-content .stats .info {
  font-size: initial;
}
.turns .custom-list-item-content .stats .info::after {
  content: ':\00a0';
}
.turns .custom-list-item-content .stats .blod {
  font-size: initial;
  font-weight: bold;
}
.turns .custom-list-item ons-button.tracking,
.turns .custom-list-item ons-button.cancel,
.turns .custom-list-item ons-button.message {
  flex: 1 !important;
  margin: 0 0.5rem 0 0.5rem;
}
.turns .custom-list-item ons-button.message div.panelBadges {
  justify-content: center;
  text-align: center;
  align-items: center;
  padding-right: 0.5rem;
}
.turns .custom-list-item ons-button.message div.panelBadges .statusBar {
  width: 20px;
  font-size: 20px;
  margin: 0 0.2rem 0 0.2rem;
}
.turns .carousel {
  height: 150px;
  position: relative;
}
.turns .carousel img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.turns .carousel .dots {
  position: absolute;
  width: 95%;
  margin-left: 2.5%;
  bottom: 0;
  text-align: center;
  z-index: 10;
}
.turns .carousel .dots .text {
  color: white;
  opacity: 0.81;
  font-size: 20px;
  margin-top: 5px;
  text-transform: uppercase;
}
.turns .carousel .dots .dot {
  height: 3px;
  margin: 12px 1%;
  margin-bottom: 12px;
  background-color: rgba(128, 128, 128, 0.7);
}
.turns .carousel .dots .dot.car-active {
  background-color: white;
}
.turnTracking iframe {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
.noTurnsAvailable img.hand-img {
  width: 100%;
  height: 100%;
  max-width: 90px;
  max-height: 90px;
}
.noTurnsAvailable .head-text {
  font-weight: 600;
  font-size: 18px;
  color: #5E28D5;
}
.noTurnsAvailable .body-text {
  max-width: 400px;
}
.noTurnsAvailable ons-button {
  border-radius: 5px;
}
@media only screen and (max-width: 48em) {
  .noTurnsAvailable img.hand-img {
    max-width: 64px;
    max-height: 64px;
  }
  .noTurnsAvailable .head-text {
    font-size: 16px;
  }
  .noTurnsAvailable .body-text {
    max-width: 350px;
  }
  .noTurnsAvailable ons-button {
    font-size: 12px;
    min-height: 30px;
    line-height: 2.7;
  }
}
@media only screen and (min-width: 64em) {
  .noTurnsAvailable img.hand-img {
    max-width: 64px;
    max-height: 64px;
  }
  .noTurnsAvailable .head-text {
    font-size: 16px;
  }
  .noTurnsAvailable .body-text {
    max-width: 350px;
  }
}
.joinWaitlist img.circle-check-img {
  width: 100%;
  height: 100%;
  max-width: 90px;
  max-height: 90px;
}
.joinWaitlist .head-text {
  font-weight: 600;
  font-size: 18px;
  color: #5E28D5;
}
.joinWaitlist .body-text {
  max-width: 400px;
}
.joinWaitlist ons-button {
  margin-top: 40px;
  border-radius: 5px;
  border: 1px solid;
}
@media only screen and (max-width: 48em) {
  .joinWaitlist img.circle-check-img {
    max-width: 64px;
    max-height: 64px;
  }
  .joinWaitlist .head-text {
    font-size: 16px;
  }
  .joinWaitlist .body-text {
    max-width: 350px;
  }
}
.newTurn {
  /*input, textarea{*/
  /*font-size: 15px;*/
  /*}*/
  height: 100%;
}
.newTurn form .ph-input {
  padding: 5px 5px !important;
  margin-right: 10px !important;
}
.newTurn .navButton {
  font-size: 21px;
  margin-right: 12px;
  color: #1e88e5;
}
.newTurn .navButton:hover {
  color: #79b8f0;
}
.newTurn .over-button-label {
  max-width: 250px;
  text-align: center;
  margin-bottom: 8px;
  font-size: 16px;
}
.newTurn .removeBackButton ons-back-button {
  display: none !important;
}
.newTurn .event-header {
  height: 200px;
}
.newTurn .event-header .event-txt {
  font-size: 40px;
  text-align: center;
  height: 100%;
  background: #e0e0e0;
  opacity: 0.64;
  text-transform: uppercase;
  font-size: 32px;
  color: black;
  transition: color 0.5s ease;
}
.newTurn .event-header img {
  display: block;
  width: 100%;
  height: 200px;
  /*background: #272727;*/
  object-fit: contain;
}
.newTurn .pay .num {
  font-size: 15px;
  padding: 10px 3px;
  text-align: center;
}
.newTurn .pay .fa.fa-minus,
.newTurn .pay .fa.fa-plus {
  margin: 5px;
  background: #c5c5c5;
  border-radius: 70px;
  height: 20px;
  padding: 9px 9px 1px 9px;
  width: 13px;
}
.newTurn textarea.comment-input {
  width: 90%;
  margin-top: 20px;
  height: 50px;
  border: 1px solid #cecece;
  opacity: 0.81;
  font-size: 15px;
}
.newTurn .intl-tel-input {
  margin-top: 20px;
}
.newTurn .buttons-box {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.newTurn .buttons-box .pri-button {
  width: 100%;
  font-size: 14px;
  padding: 8px;
  margin-bottom: 8px;
  background: url(/frontend/static/icons/webres/buttondegradee.png);
  background-size: cover;
  color: white;
}
.newTurn .inside-button {
  width: 300px;
  margin: auto;
  display: block;
  left: -6px;
  height: 40px;
  margin-top: 20px;
}
.newTurn .logo {
  min-height: 35%;
  max-height: 35%;
  height: 35%;
  margin: auto;
  display: block;
  position: relative;
  margin-top: 4%;
  transition: all ease 1s;
  left: 0;
}
.newTurn .main-step {
  min-height: 40%;
  max-height: 40%;
  height: 40%;
  background-size: cover;
  color: white;
  position: relative;
  box-shadow: 0 0 10px black;
  z-index: 1;
  overflow: hidden;
  transition: height ease 0.8s;
}
.newTurn .main-step img.back {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  object-fit: cover;
}
.newTurn .main-step .title {
  position: absolute;
  bottom: 100px;
  text-align: center;
  width: 100%;
  font-size: 42px;
  padding-top: 30px;
  font-weight: 100;
}
.newTurn .main-step .maintitle {
  position: relative;
  text-align: center;
  margin-top: 8%;
  font-size: 21px;
  transition: all ease 1s;
  width: 100%;
}
.newTurn .main-step .maintitle.transf {
  display: block;
  margin-top: -26px;
  margin-left: 73px;
  text-align: center;
  width: 0;
  padding-left: 10px;
  white-space: nowrap;
  border-left: 1px solid white;
  font-size: 13px;
}
.newTurn .main-step .subtitle {
  opacity: 0.7;
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 15px;
  font-weight: normal;
  padding: 0 5px;
  bottom: 10%;
  box-sizing: border-box;
  transition: opacity ease 0.5s;
}
.newTurn .main-step .subtitle.tobottom {
  position: absolute;
  top: 166px;
  font-size: 15px;
}
.newTurn button {
  text-transform: uppercase;
}
.newTurn .button:not(.button--material--flat) {
  padding: 4px 32px;
  border-radius: 5px;
  box-shadow: 3px 3px 15px #63686E4D;
}
.newTurn .branch-call {
  color: #4c4cda;
  text-decoration: none;
  font-size: 16px;
}
.newTurn .branch-call i {
  margin-right: 6px;
}
.newTurn .branch-call div {
  font-size: 11px;
}
.newTurn .r-comment {
  width: 100%;
  height: 50px;
  background-color: white;
  padding: 10px;
  font-size: 13px;
  border-radius: 0;
  border-left: 0;
  border: 0;
  padding-left: 20px;
}
.newTurn .res-head {
  padding-left: 10px;
  min-height: 27px;
  max-height: 36px;
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
}
.newTurn .res-head i {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 24px;
  width: 24px;
  min-width: 24px;
  color: white;
  background: #63686E;
  border-radius: 50%;
}
.newTurn .res-head i span {
  font-family: sans-serif;
  margin-bottom: 1px;
  margin-right: 1px;
}
.newTurn .res-head i.fas.fa-hourglass-half:before,
.newTurn .res-head i.fa.fa-check:before {
  font-size: 14px;
}
.newTurn .res-head i.fas.fa-hourglass-half:after,
.newTurn .res-head i.fa.fa-check:after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0px;
  height: 24px;
  width: 1px;
  background: #63686E;
  transform: translate(13px, 120%);
}
.newTurn .res-head i:after {
  content: none;
}
.newTurn .res-head .result-p {
  padding-left: 10px;
}
.newTurn .res-head.summ-head {
  min-height: 31px;
  max-height: 31px;
  padding-top: 10px;
}
.newTurn .res-head.summ-head img {
  width: 25px;
}
.newTurn .res-head img {
  position: absolute;
  right: 20px;
  top: 14px;
  width: 30px;
}
.newTurn .res-head img.check {
  left: 0px;
  right: inherit;
}
.newTurn .res-process {
  background: white;
  width: auto;
  height: 100%;
}
.newTurn .res-summary {
  background-color: white;
  color: rgba(0, 0, 0, 0.81);
  text-align: left;
  line-height: 19px;
  font-size: 14px;
  font-weight: 100;
  padding: 15px;
}
.newTurn .res-summary img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.newTurn .res-body {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  flex: 0.9;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 23px;
  border-left: 1px solid #0f1011;
  border-top: 0;
  /*&::-webkit-scrollbar-track {*/
  /*background: rgba(0, 0, 0, 0.04);*/
  /*}*/
  /*&::-webkit-scrollbar-thumb {*/
  /*background: rgba(0, 0, 0, 0.21);*/
  /*}*/
  /*&::-webkit-scrollbar {*/
  /*width: 9px;*/
  /*}*/
}
.newTurn .res-body .hour-container {
  gap: 11px;
  font-weight: 600;
  align-items: center;
}
.newTurn .res-body .hour-container .availableSlots {
  border-radius: 3px;
  padding: 2px 6px;
  background-color: #AEDDC2;
}
.newTurn .res-body .address {
  font-size: 12px;
  margin-top: 5px;
  opacity: 0.64;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newTurn .res-body .disabled {
  color: #292929;
}
.newTurn .res-body > div {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.82);
  padding-top: 20px;
  margin: 5px 0;
  padding-left: 20px;
  cursor: pointer;
}
.newTurn .res-body .longday {
  text-transform: uppercase;
}
.newTurn .res-body .routerAlert {
  opacity: 0.64;
  margin: 0;
  padding-top: 0;
}
.newTurn .required {
  display: block;
  position: absolute;
  right: 10px;
  top: 17px;
  font-size: 11px;
  color: #ff8484;
}
.newTurn label {
  margin: 2px 0px;
  font-size: 13px;
  opacity: 0.7;
  text-align: left;
  text-transform: uppercase;
}
.newTurn textarea {
  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
}
.newTurn .success {
  background: white;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.newTurn .success-container {
  padding: 0 2rem;
}
.newTurn .success .ticket {
  margin: 1.5rem 0;
  text-align: left;
  border-radius: 5px;
  box-shadow: 3px 3px 15px #63686E66;
}
.newTurn .success .ticket-header {
  display: flex;
  padding: 12px;
  color: white;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.newTurn .success .ticket-header div {
  display: flex;
  flex-direction: column;
}
.newTurn .success .ticket-header div:first-child {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid white;
}
.newTurn .success .ticket-header div span {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 1px;
}
.newTurn .success .ticket-header div b {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
}
.newTurn .success .ticket-body {
  padding: 20px;
  font-size: 14px;
  color: #63686E;
  background: #EFEFF0;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  text-transform: capitalize;
}
.newTurn .success .icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 0 auto;
}
.newTurn .success .icon img {
  width: 40px;
}
.newTurn .success h2 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
}
.newTurn .success h5 {
  font-size: 14px;
  color: #63686E;
}
.newTurn center .stats {
  justify-content: center;
  padding: 10px 0;
  width: 250px;
  box-shadow: 0px 0px 0px 2px #ddd inset;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.newTurn .additionalInformationFile {
  position: relative;
  width: 250px;
  align-items: center;
  display: flex;
}
.newTurn .additionalInformationFile span {
  margin: 0px 0px 0px 0px;
  font-size: 16px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
  text-align: left;
}
.newTurn .additionalInformationFile ons-icon {
  font-size: 14px;
  opacity: 0.6;
  margin-left: 10px;
}
.newTurn .additionalInformation-divider {
  min-width: 100%;
  text-align: left;
  font-weight: bold;
  margin-bottom: 15px;
}
.newTurn .additionalInformation-divider span {
  margin-right: 10px;
  opacity: 1;
}
.newTurn ._720kb-datepicker-calendar {
  position: relative;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.newTurn ._720kb-datepicker-calendar-header:nth-child(odd) {
  background: #ffffff;
}
.newTurn ._720kb-datepicker-calendar-header:nth-child(odd) ._720kb-datepicker-calendar-month {
  color: #210471;
}
.newTurn ._720kb-datepicker-calendar-header:nth-child(odd) ._720kb-datepicker-calendar-month span {
  color: #210471;
}
.newTurn ._720kb-datepicker-calendar-header:nth-child(odd) ._720kb-datepicker-calendar-month-button {
  color: #210471;
}
.newTurn ._720kb-datepicker-calendar-days-header {
  background-color: transparent;
}
.newTurn ._720kb-datepicker-calendar-days-header div {
  color: #210471;
}
.newTurn .calendarLegend {
  display: flex;
  flex-direction: row;
  padding-top: initial !important;
  padding-left: initial !important;
  justify-content: center;
  gap: 10px;
}
.newTurn .calendarLegend .circle-legend {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/* Custom Theme for Onsen UI 2.10.4 */



/*!

 * Copyright 2013-2017 ASIAL CORPORATION

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *    http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 *

 */

/*!

 * Copyright 2012 Adobe Systems Inc.;

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 * http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 *

 */



 :root {

  /* variables for iOS components */



  /* variables for Material Design components */



  /* others */

}



/* PMX ADDED */





 @font-face { font-family: pmxPwaDefault; src: url('static/font/default.ttf') format('truetype'); } 



#leftMenu .active{

	color: #1e88e5;

	color: #5b2add;

}

.bottom-bar .bottom-bar-icon{

	font-size: 1.125rem;

	color: #0000006e;

}

.bottom-bar .active .bottom-bar-icon{

	color: #1e88e5;

	color: #5b2add;

}

.color-three {
  color: #5b2add !important;
}

.border-color-three {
  border-color: #5b2add !important;
}
.left-menu .left-user-box{
  background-color: white;
  opacity: 1;
}

.bottom-modal .action-sheet{
  border-radius: 15px 15px 0 0;
  overflow: hidden;    
  max-height: 100%;
  overflow: auto;
}
.def-product-v .name,.def-product-h .name{
    color: black;
}
.def-product-v .price .discounted,.def-product-h .price .discounted{
    color: #a100c2;
}

.full-card{
  background: white;
  margin: 15px 0;
  overflow: auto;



  padding: 15px;
  text-align: left;
}
.full-card .full-card-title{
  font-weight:  bold;
  margin-bottom: 25px;
  font-size: 1.2rem;
  opacity: 0.81;
    color: black;
}
.full-card .full-card-subtitle{
    color: black;
}



.card.card--full{
  margin-right: 0;
  margin-left: 0;
  box-shadow: none;
}

.card .card--material__title{
  font-size: 1.2rem;
}
.card .list-item{
  padding-left: 0;
}
.full-card .list-item{
  padding-left: 0;
}

.card .list-header{
  padding-left: 0;
}
.full-card .list-header{
  padding-left: 0;
}

.bg-color-three {

  background: #5b2add !important;

}


/*Esto se agregó para que funcione el ícono de share en la barra superior*/
.toolbar__right{
  min-width: 90px!important;
}
.toolbar__left{
  min-width: 90px!important;
}


/* FIN PMX ADDED */



html {

  height: 100%;

  width: 100%;

  background: #444444;

  font-family: pmxPwaDefault;

  font-size: 16px;
  font-size: 16px;

}

body {

  position: absolute;

  overflow: hidden;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  margin: 0;

  -webkit-text-size-adjust: 100%;

  touch-action: manipulation;

  max-width: 700px;

  margin: auto;

  box-shadow: 0 0 5px #00000026;

}



@media (min-width: 700px){

  body{

    border-radius: 8px;

    height: 95%;

  }

  ons-splitter{

    border-radius: 8px;

  }

}

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

}

input, textarea, select {

  -webkit-user-select: auto;

      -ms-user-select: auto;

          user-select: auto;

  -moz-user-select: text;

  -webkit-touch-callout: none;

}

a, button, input, textarea, select {

  touch-action: manipulation;

}

input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {

  outline: none;

}

h1 {

  font-size: 2.25rem;
  opacity: 0.81;

}

h2 {

  font-size: 1.87rem;
  opacity: 0.81;

}

h3 {

  font-size: 1.5rem;
  opacity: 0.81;

}

h4, h5, h6 {

  font-size: 1.125rem;
  opacity: 0.81;

}

:root {

}

.page {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  background-color: #efeff4;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  overflow-x: visible;

  overflow-y: hidden;

  color: #1f1f21;

  -ms-overflow-style: none;

  -webkit-font-smoothing: antialiased;

}

.page::-webkit-scrollbar {

  display: none;

}

.page__content {

  background-color: #efeff4;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  box-sizing: border-box;

}

.page__background {

  background-color: #efeff4;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  box-sizing: border-box;

}

.page--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  background-color: #eceff1;

}

.page--material__content {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-weight: 400;

}

.page__content h1,

.page__content h2,

.page__content h3,

.page__content h4,

.page__content h5 {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-weight: 500;

  margin: 0.6em 0;

  padding: 0;

}

.page__content h1 {

  font-size: 1.75rem;

}

.page__content h2 {

  font-size: 1.5rem;

}

.page__content h3 {

  font-size: 1.25rem;

}

.page--material__content h1,

.page--material__content h2,

.page--material__content h3,

.page--material__content h4,

.page--material__content h5 {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-weight: 500;

  margin: 0.6em 0;

  padding: 0;

}

.page--material__content h1 {

  font-size: 1.75rem;

}

.page--material__content h2 {

  font-size: 1.5rem;

}

.page--material__content h3 {

  font-size: 1.25rem;

}

.page--material__background {

  background-color: #eceff1;

  background-color: #efeff4;

}

:root { /* background color active */

}

/*~

  name: Switch

  category: Switch

  elements: ons-switch

  markup: |

    <label class="switch">

      <input type="checkbox" class="switch__input">

      <div class="switch__toggle">

        <div class="switch__handle"></div>

      </div>

    </label>

    <label class="switch">

      <input type="checkbox" class="switch__input" checked>

      <div class="switch__toggle">

        <div class="switch__handle"></div>

      </div>

    </label>

    <label class="switch">

      <input type="checkbox" class="switch__input" disabled>

      <div class="switch__toggle">

        <div class="switch__handle"></div>

      </div>

    </label>

*/

.switch {

  display: inline-block;

  vertical-align: top;

  box-sizing: border-box;

  background-clip: padding-box;

  position: relative;

  min-width: 51px;

  font-size: 17px;

  padding: 0 20px;

  border: none;

  overflow: visible;

  width: 51px;

  height: 32px;

  z-index: 0;

  text-align: left;

}

.switch__input {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  z-index: 0;

}

/* switch toggle background */

.switch__toggle {

  background-color: white;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 30px;

  transition-property: all;

  transition-duration: 0.35s;

  transition-timing-function: ease-out;

  box-shadow: inset 0 0 0 2px #e5e5e5;

}

/* switch toggle circle */

.switch__handle {

  box-sizing: border-box;

  background-clip: padding-box;

  position: absolute;

  content: '';

  border-radius: 28px;

  height: 28px;

  width: 28px;

  background-color: white;

  left: 1px;

  top: 2px;

  transition-property: all;

  transition-duration: 0.35s;

  transition-timing-function: cubic-bezier(.59, .01, .5, .99);

  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);

}

.switch--active__handle {

  transition: none;

}

:checked + .switch__toggle {

  box-shadow: inset 0 0 0 2px #44db5e;

  background-color: #44db5e;

}

:checked + .switch__toggle > .switch__handle {

  left: 21px;

  box-shadow: 0 3px 2px rgba(0, 0, 0, .25);

}

:disabled + .switch__toggle {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.switch__touch {

  position: absolute;

  top: -5px;

  bottom: -5px;

  left: -10px;

  right: -10px;

}

/*~

  name: Material Switch

  category: Switch

  elements: ons-switch

  markup: |

    <label class="switch switch--material">

      <input type="checkbox" class="switch__input switch--material__input">

      <div class="switch__toggle switch--material__toggle">

        <div class="switch__handle switch--material__handle">

        </div>

      </div>

    </label>

    <label class="switch switch--material">

      <input type="checkbox" class="switch__input switch--material__input" checked>

      <div class="switch__toggle switch--material__toggle">

        <div class="switch__handle switch--material__handle">

        </div>

      </div>

    </label>

    <label class="switch switch--material">

      <input type="checkbox" class="switch__input switch--material__input" disabled>

      <div class="switch__toggle switch--material__toggle">

        <div class="switch__handle switch--material__handle">

        </div>

      </div>

    </label>

*/

.switch--material {

  width: 36px;

  height: 24px;

  padding: 0 10px;

  min-width: 36px;

}

.switch--material__toggle {

  background-color: #b0afaf;

  margin-top: 5px;

  height: 14px;

  box-shadow: none;

}

.switch--material__input {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  z-index: 0;

}

.switch--material__handle {

  background-color: #f1f1f1;

  left: 0;

  margin-top: -5px;

  width: 20px;

  height: 20px;

  box-shadow:

      0 4px 5px 0 rgba(0, 0, 0, .14),

      0 1px 10px 0 rgba(0, 0, 0, .12),

      0 2px 4px -1px rgba(0, 0, 0, .4);

}

:checked + .switch--material__toggle {

  background-color: #37474f;

  background-color: #37474f;

  background-color: rgba(55, 71, 79, 0.5);

  box-shadow: none;

}

:checked + .switch--material__toggle > .switch--material__handle {

  left: 16px;

  background-color: #37474f;

  background-color: #37474f;

  box-shadow:

      0 2px 2px 0 rgba(0, 0, 0, .14),

      0 1px 5px 0 rgba(0, 0, 0, .12),

      0 3px 1px -2px rgba(0, 0, 0, .2);

}

:disabled + .switch--material__toggle {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.switch--material__handle:before {

  background: transparent;

  content: '';

  display: block;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  z-index: 0;

  box-shadow: 0 0 0 0 rgba(0, 0, 0, .12);

  transition: box-shadow 0.1s linear;

}

.switch--material__toggle > .switch--active__handle:before {

  box-shadow: 0 0 0 14px rgba(0, 0, 0, .12);

}

:checked + .switch--material__toggle > .switch--active__handle:before {

  box-shadow: 0 0 0 14px rgba(55, 71, 79, 0.2);

}

.switch--material__touch {

  position: absolute;

  top: -10px;

  bottom: -10px;

  left: -15px;

  right: -15px;

}

/*~

  name: Range

  category: Range

  elements: ons-range

  markup: |

    <div class="range">

      <input type="range" class="range__input">

      <input type="range" class="range__focus-ring">

    </div>



    <div class="range range--disabled">

      <input type="range" class="range__input" disabled>

      <input type="range" class="range__focus-ring" disabled>

    </div>

*/

.range {

  display: inline-block;

  position: relative;

  width: 100px;

  height: 30px;

  margin: 0;

  padding: 0;

  background-image: linear-gradient(#a4aab3, #a4aab3);

  background-position: left center;

  background-size: 100% 2px;

  background-repeat: no-repeat;

  background-color: transparent;

}

.range__input {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  background-image: linear-gradient(#0076ff, #0076ff);


  background-image: linear-gradient(#5b2add, #5b2add);


  background-position: left center;

  background-size: 0% 2px;

  background-repeat: no-repeat;

  height: 30px;

  position: relative;

  z-index: 1;

  width: 100%;

}

.range__input::-moz-range-track {

  position: relative;

  border: none;

  background: none;

  box-shadow: none;

  top: 0;

  margin: 0;

  padding: 0;

}

.range__input::-ms-track {

  position: relative;

  border: none;

  background-color: #a4aab3;

  height: 0;

  border-radius: 50%;

}

.range__input::-webkit-slider-thumb {

  cursor: pointer;

  position: relative;

  height: 28px;

  width: 28px;

  background-color: #fff;

  border: none;

  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);

  border-radius: 50%;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-appearance: none;

          appearance: none;

  top: 0;

  z-index: 1;

}

.range__input::-moz-range-thumb {

  cursor: pointer;

  position: relative;

  height: 28px;

  width: 28px;

  background-color: #fff;

  border: none;

  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);

  border-radius: 50%;

  margin: 0;

  padding: 0;

}

.range__input::-ms-thumb {

  cursor: pointer;

  position: relative;

  height: 28px;

  width: 28px;

  background-color: #fff;

  border: none;

  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);

  border-radius: 50%;

  margin: 0;

  padding: 0;

  top: 0;

}

.range__input::-ms-fill-lower {

  height: 2px;

  background-color: #0076ff;

  background-color: #5b2add;

}

.range__input::-ms-tooltip {

  display: none;

}

.range__input:disabled {

  opacity: 1;

  pointer-events: none;

}

.range__focus-ring {

  pointer-events: none;

  top: 0;

  left: 0;

  display: none;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  background: none;

  height: 30px;

  position: absolute;

  z-index: 0;

  width: 100%;

}

.range--disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

  pointer-events: none;

}

/*~

  name: Material Range

  category: Range

  elements: ons-range

  markup: |

    <div class="range range--material">

      <input type="range" class="range__input range--material__input" min="0" max="100">

      <!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->

    </div>



    <div class="range range--material range--disabled">

      <input type="range" class="range__input range--material__input" disabled>

      <!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->

    </div>

*/

.range--material {

  position: relative;

  background-image: linear-gradient(#bdbdbd, #bdbdbd);

}

.range--material__input {

  background-image: linear-gradient(#31313a, #31313a);

  background-position: center left;

  background-size: 0% 2px;

}

.range--material__focus-ring {

  display: block;

}

.range--material__focus-ring::-webkit-slider-thumb {

  -webkit-appearance: none;

          appearance: none;

  width: 14px;

  height: 14px;

  border: none;

  box-shadow: 0 0 0 9px #31313a;

  background-color: #31313a;

  border-radius: 50%;

  opacity: 0;

  transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;

  transition: opacity 0.25s ease-out, transform 0.25s ease-out;

  transition: opacity 0.25s ease-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out;

}

.range--material__input.range__input--active + .range--material__focus-ring::-webkit-slider-thumb {

  opacity: 0.2;

  -webkit-transform: scale(1.5, 1.5, 1.5);

          transform: scale(1.5, 1.5, 1.5);

}

.range--material__input::-webkit-slider-thumb {

  position: relative;

  box-sizing: border-box;

  border: none;

  background-color: transparent;

  width: 14px;

  height: 32px;

  border-radius: 0;

  box-shadow: none;

  background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px);

  transition: -webkit-transform 0.1s linear;

  transition: transform 0.1s linear;

  transition: transform 0.1s linear, -webkit-transform 0.1s linear;

  overflow: visible;

}

.range--material__input[_zero]::-webkit-slider-thumb {

  background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd 6.4px, transparent 7px);

}

.range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb {

  box-shadow: 0 0 0 9px #bdbdbd;

}

.range--material__input::-moz-range-track {

  background: none;

}

.range--material__input::-moz-range-thumb,

.range--material__input:focus::-moz-range-thumb {

  box-sizing: border-box;

  border: none;

  width: 14px;

  height: 32px;

  border-radius: 0;

  background-color: transparent;

  background-image: -moz-radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px); /* stylelint-disable-line */

  box-shadow: none;

}

.range--material__input:active::-webkit-slider-thumb,

.range--material__input.range__input--active::-webkit-slider-thumb { /* NOTICE: ":active" does not work on Android Chrome. */

  -webkit-transform: scale(1.5);

          transform: scale(1.5);

  transition: -webkit-transform 0.1s linear;

  transition: transform 0.1s linear;

  transition: transform 0.1s linear, -webkit-transform 0.1s linear;

}

/* stylelint-disable */

.range--disabled.range--material { /* stylelint-enable */

  opacity: 1;

}

/* stylelint-disable */

.range--disabled > .range--material__input { /* stylelint-enable */

  background-image: none;

}

.range--material__input:disabled::-webkit-slider-thumb {

  background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px);

  transition: none;

}

.range--material__input:disabled::-moz-range-thumb {

  background-image: -moz-radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px); /* stylelint-disable-line */

  transition: none;

}

/*~

  name: Notification

  category: Notification

  markup: |

    <span class="notification">1</span>

    <span class="notification">10</span>

    <span class="notification">999</span>

*/

.notification {

  position: relative;

  display: inline-block;

  vertical-align: top;

  font: inherit;

  border: none;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  text-decoration: none;

  margin: 0;

  padding: 0 4px;

  width: auto;

  height: 19px;

  border-radius: 19px;

  background-color: #fe3824;

  color: white;

  text-align: center;

  font-size: 1rem;

  min-width: 19px;

  line-height: 19px;

  font-weight: 400;

}

.notification:empty {

  display: none;

}

/*~

  name: Material Notification

  category: Notification

  markup: |

    <span class="notification notification--material">1</span>

    <span class="notification notification--material">10</span>

    <span class="notification notification--material">999</span>

*/

.notification--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  background-color: #e91e63;

  font-size: 1rem;

  font-weight: 500;

  color: white;

}

/*~

  name: Toolbar

  category: Toolbar

  elements: ons-toolbar

  markup: |

    <div class="toolbar">

      <div class="toolbar__center">Navigation Bar</div>

    </div>

*/

.toolbar {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  box-sizing: border-box;

  background-clip: padding-box;

  white-space: nowrap;

  overflow: hidden;

  word-spacing: 0;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  z-index: 2;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-box-align: stretch;

  -webkit-align-items: stretch;

          align-items: stretch;

  -webkit-flex-wrap: nowrap;

          flex-wrap: nowrap;

  height: 44px;

  padding-left: 0;

  padding-right: 0;

  color: #1f1f21;

  box-shadow: none;

  font-weight: 400;

  width: 100%;

  white-space: nowrap;

  border-bottom: none;

  /*background-size: 100% 1px;*/

  /*background-repeat: no-repeat;*/

  /*background-position: bottom;*/

  /*background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);*/

  background: transparent;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .toolbar {

    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);

  }

}

.toolbar__bg {

  /*background: #fafafa;*/

}

.toolbar__item {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  height: 44px;

  overflow: visible;

  display: block;

  vertical-align: middle;

}

.toolbar__left {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  max-width: 50%;

  width: 27%;

  text-align: left;

  line-height: 44px;

}

.toolbar__right {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  max-width: 50%;

  width: 27%;

  text-align: right;

  line-height: 44px;

}

.toolbar__left img{

  height: 23px;

  margin-top: 15px;

  opacity: 0.64;

}

.toolbar__right img{

  height: 36px;

  width: 36px;

  object-fit: contain;

  margin: 10px;

}

.toolbar__center {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  width: 46%;

  text-align: center;

  line-height: 44px;

  font-size: 1.06rem;

  font-weight: 500;

  color: #1f1f21;

}

.toolbar__title {

  line-height: 44px;

  font-size: 1.063rem;

  font-weight: 500;

  color: #1f1f21;

  margin: 0;

  padding: 0;

  overflow: visible;

}

.toolbar__center:first-child:last-child {

  width: 100%;

}

/*~

  name: Toolbar Item

  category: Toolbar

  elements: ons-toolbar ons-toolbar-button

  markup: |

    <div class="toolbar">

      <div class="toolbar__left">

        <span class="toolbar-button">

          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>

        </span>

      </div>



      <div class="toolbar__center">

        Navigation Bar

      </div>



      <div class="toolbar__right">

        <span class="toolbar-button">Label</span>

      </div>

    </div>

*/

/*~

  name: Toolbar with Outline Button

  category: Toolbar

  elements: ons-toolbar ons-toolbar-button

  markup: |

    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->

    <div class="toolbar">

      <div class="toolbar__left">

        <span class="toolbar-button toolbar-button--outline">

          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>

        </span>

      </div>



      <div class="toolbar__center">

        Title

      </div>



      <div class="toolbar__right">

        <span class="toolbar-button toolbar-button--outline">Button</span>

      </div>

    </div>

*/

/*~

  name: Bottom Bar

  category: Toolbar

  elements: ons-bottom-toolbar

  markup: |

    <div class="bottom-bar">

      <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>

    </div>

*/

.bottom-bar {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  box-sizing: border-box;

  background-clip: padding-box;

  white-space: nowrap;

  overflow: hidden;

  word-spacing: 0;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  z-index: 2;

  display: block;

  height: 55px;

  padding-left: 0;

  padding-right: 0;

  background: #fafafa;

  color: #1f1f21;

  box-shadow: none;

  font-weight: 400;

  border-bottom: none;

  /*border-top: 1px solid #b2b2b2;*/

  position: absolute;

  bottom: 0;

  right: 0;

  left: 0;

  border-top: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: top;

  box-shadow: 0 0 5px #00000024;

  /*background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%);*/

}

.bottom-bar .bottom-bar-text{

  line-height: 12px;

  font-size: 0.75rem;

  opacity: 0.64;

}

.bottom-bar .active .bottom-bar-text{

  color: #1e88e5;

  color: #5b2add;

  opacity: 1;

}

.bottom-bar .active img.on{

  display: inline;

}

.bottom-bar .active img.off{

  display: none;

}

.bottom-bar img.on{

  display: none;

}

.bottom-bar img{

  width: 22px;

  height: 22px;

  opacity: 0.64;

  border-color:  #5b2add;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .bottom-bar {

    /*background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%);*/

  }

}

.bottom-bar__line-height {

  line-height: 44px;

  padding-bottom: 0;

  padding-top: 0;

}

.bottom-bar--aligned {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: nowrap;

          flex-wrap: nowrap;

  line-height: 44px;

}

.bottom-bar--transparent {

  background-color: transparent;

  background-image: none;

  border: none;

}

/*~

  name: Toolbar with Segment

  category: Toolbar

  elements: ons-toolbar

  markup: |

    <div class="toolbar">

      <div class="toolbar__center">

        <div class="segment" style="width:200px;margin:7px 50px;">

          <div class="segment__item">

            <input type="radio" class="segment__input" name="navi-segment-a" checked>

            <div class="segment__button">One</div>

          </div>



          <div class="segment__item">

            <input type="radio" class="segment__input" name="navi-segment-a">

            <div class="segment__button">Two</div>

          </div>

        </div>

      </div>

    </div>

*/

/*~

  name: Material Toolbar

  category: Toolbar

  elements: ons-toolbar

  markup: |

    <div class="toolbar toolbar--material">

      <div class="toolbar__center toolbar--material__center">

        Title

      </div>

    </div>

*/

.toolbar--material {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: nowrap;

          flex-wrap: nowrap;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

          justify-content: space-between;

  height: 56px;

  border-bottom: 0;

  box-shadow: 0 1px 5px rgba(0, 0, 0, .15);

  padding: 0;

  background-color: #ffffff;

  background-size: 0;

}

/*~

  name: No Shadow Toolbar

  category: Toolbar

  elements: ons-toolbar

  markup: |

    <div class="toolbar toolbar--noshadow">

      <div class="toolbar__left">

        <span class="toolbar-button">

          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>

        </span>

      </div>

      <div class="toolbar__center">

        Navigation Bar

      </div>

      <div class="toolbar__right">

        <span class="toolbar-button">Label</span>

      </div>

    </div>

*/

.toolbar--noshadow {

  box-shadow: none;

  background-image: none;

  border-bottom: none;

}

.toolbar--material__left, .toolbar--material__right {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-size: 1.25rem;

  font-weight: 500;

  color: #31313a;

  height: 56px;

  min-width: 72px;

  width: auto;

  line-height: 56px;

}

.toolbar--material__center {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-size: 1.125rem;

  font-weight: 500;

  color: #31313a;

  height: 56px;

  width: auto;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

          flex-grow: 1;

  overflow: hidden;

  text-overflow: ellipsis;

  text-align: left;

  line-height: 56px;

}

.toolbar--material__center:first-child {

  margin-left: 16px;

}

.toolbar--material__center:last-child {

  margin-right: 16px;

}

.toolbar--material__left:empty, .toolbar--material__right:empty {

  min-width: 16px;

}

/*~

  name: Material Toolbar with Icons

  category: Toolbar

  elements: ons-toolbar

  markup: |

    <div class="toolbar toolbar--material">

      <div class="toolbar__left toolbar--material__left">

        <span class="toolbar-button toolbar-button--material">

          <i class="zmdi zmdi-menu"></i>

        </span>

      </div>

      <div class="toolbar__center toolbar--material__center">

        Title

      </div>

      <div class="toolbar__right toolbar--material__right">

        <span class="toolbar-button toolbar-button--material">

          <i class="zmdi zmdi-search"></i>

        </span>

        <span class="toolbar-button toolbar-button--material">

          <i class="zmdi zmdi-favorite"></i>

        </span>

        <span class="toolbar-button toolbar-button--material">

          <i class="zmdi zmdi-more-vert"></i>

        </span>

      </div>

    </div>

*/

/*~

  name: Transparent Toolbar

  category: Toolbar

  elements: ons-toolbar

  markup: |

    <div class="toolbar toolbar--transparent">

      <div class="toolbar__left">

        <span class="toolbar-button">

          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>

        </span>

      </div>

      <div class="toolbar__center">

        Navigation Bar

      </div>

      <div class="toolbar__right">

        <span class="toolbar-button">Label</span>

      </div>

    </div>

*/

.toolbar--transparent {

  background-color: transparent;

  box-shadow: none;

  background-image: none;

  border-bottom: none;

}

/*~

  name: Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button">Button</button>

    <button class="button" disabled>Button</button>

*/

.button {

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size: 1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

}

.button::-moz-focus-inner {

  outline: 0;

}

.button:hover {

  transition: none;

}

.button:active {

  background-color: #0076ff;

  background-color: #5b2add;

  transition: none;

  opacity: 0.2;

}

.button:focus {

  outline: 0;

}

.button:disabled, .button[disabled] {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*~

  name: Outline Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button button--outline">Button</button>

    <button class="button button--outline" disabled>Button</button>

*/

.button--outline {

  background-color: transparent;

  border: 1px solid #0076ff;


	border: 1px solid #5b2add;


  color: #0076ff;

  color: #5b2add;

}

.button--outline:active {

  background-color: rgb(179, 214, 255);

  border: 1px solid #0076ff;


	border: 1px solid #5b2add;


  color: #0076ff;

  color: #5b2add;

  opacity: 1;

}

.button--outline:hover {

  border: 1px solid #0076ff;


  border: 1px solid #5b2add;


  transition: 0;

}

/*~

  name: Light Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button button--light">Button</button>

    <button class="button button--light" disabled>Button</button>

*/

.button--light {

  background-color: transparent;

  color: #000000;

  color: rgba(0, 0, 0, 0.4);

  border: 1px solid #000000;

  border: 1px solid rgba(0, 0, 0, 0.2);

}

.button--light:active {

  background-color: #000000;

  background-color: rgba(0, 0, 0, 0.05);

  color: #000000;

  color: rgba(0, 0, 0, 0.4);

  border: 1px solid #000000;

  border: 1px solid rgba(0, 0, 0, 0.2);

  opacity: 1;

}

/*~

  name: Quiet Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button--quiet">Button</button>

    <button class="button--quiet" disabled>Button</button>

*/

.button--quiet {

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size: 1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

  background: transparent;

  border: 1px solid transparent;

  box-shadow: none;

  background: transparent;

  color: #0076ff;

  color: #5b2add;

  border: none;

}

.button--quiet:disabled,

.button--quiet[disabled] {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

  border: none;

}

.button--quiet:hover {

  transition: none;

}

.button--quiet:focus {

  outline: 0;

}

.button--quiet:active {

  background-color: transparent;

  border: none;

  transition: none;

  opacity: 0.2;

  color: #0076ff;

  color: #5b2add;

}

/*~

  name: Call To Action Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button--cta">Button</button>

    <button class="button--cta" disabled>Button</button>

*/

.button--cta {

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size:  1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

  border: none;

  background-color: #25a6d9;

  color: white;

}

.button--cta:hover {

  transition: none;

}

.button--cta:focus {

  outline: 0;

}

.button--cta:active {

  color: white;

  background-color: #25a6d9;

  transition: none;

  opacity: 0.2;

}

.button--cta:disabled,

.button--cta[disabled] {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*

  name: Large Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button button--large" style="width: 95%; margin: 0 auto;">Button</button>

*/

.button--large {

  font-size:  1.063rem;

  font-weight: 500;

  line-height: 36px;

  padding: 4px 12px;

  display: block;

  width: 100%;

  text-align: center;

}

.button--large:active {

  background-color: #0076ff;

  background-color: #5b2add;

  transition: none;

  opacity: 0.2;

  transition: none;

}

.button--large:disabled,

.button--large[disabled] {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.button--large:hover {

  transition: none;

}

.button--large:focus {

  outline: 0;

}

/*~

  name: Large Quiet Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>

*/

.button--large--quiet { /* stylelint-disable-line */

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size:  1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

  font-size:  1.063rem;

  font-weight: 500;

  line-height: 36px;

  padding: 4px 12px;

  display: block;

  width: 100%;

  background: transparent;

  border: 1px solid transparent;

  box-shadow: none;

  color: #0076ff;

  color: #5b2add;

  text-align: center;

}

.button--large--quiet:active { /* stylelint-disable-line */

  transition: none;

  opacity: 0.2;

  color: #0076ff;

  color: #5b2add;

  background: transparent;

  border: 1px solid transparent;

  box-shadow: none;

}

.button--large--quiet:disabled, .button--large--quiet[disabled] { /* stylelint-disable-line */

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.button--large--quiet:hover { /* stylelint-disable-line */

  transition: none;

}

.button--large--quiet:focus { /* stylelint-disable-line */

  outline: 0;

}

/*~

  name: Large Call To Action Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>

*/

.button--large--cta { /* stylelint-disable-line */

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size:  1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

  border: none;

  background-color: #25a6d9;

  color: white;

  font-size:  1.063rem;

  font-weight: 500;

  line-height: 36px;

  padding: 4px 12px;

  width: 100%;

  text-align: center;

  display: block;

}

.button--large--cta:hover { /* stylelint-disable-line */

  transition: none;

}

.button--large--cta:focus { /* stylelint-disable-line */

  outline: 0;

}

.button--large--cta:active { /* stylelint-disable-line */

  color: white;

  background-color: #25a6d9;

  transition: none;

  opacity: 0.2;

}

.button--large--cta:disabled, .button--large--cta[disabled] { /* stylelint-disable-line */

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*~

  name: Material Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button button--material">BUTTON</button>

    <button class="button button--material" disabled>DISABLED</button>

*/

.button--material {

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size:  1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

  box-shadow:

      0 2px 2px 0 rgba(0, 0, 0, .14),

      0 1px 5px 0 rgba(0, 0, 0, .12),

      0 3px 1px -2px rgba(0, 0, 0, .2);


  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  min-height: 36px;

  line-height: 36px;

  padding: 0 16px;

  text-align: center;

  font-size: 0.875rem;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

  text-transform: uppercase;

  background-color: #2979ff;

  background-color: #5b2add;

  color: #ffffff;

  font-weight: 500;

  transition: background-color 0.25s linear;

  opacity: 1;

  transition: all 0.25s linear;

}

.button--material:hover {

  transition: all 0.25s linear;

}

.button--material:active {

  box-shadow:

      0 6px 10px 0 rgba(0, 0, 0, .14),

      0 1px 18px 0 rgba(0, 0, 0, .12),

      0 3px 5px -1px rgba(0, 0, 0, .4);

  background-color: #2979ff;

  background-color: #5b2add;

  opacity: 0.9;

  transition: all 0.25s linear;

}

.button--material:focus {

  outline: 0;

}

.button--material:disabled,

.button--material[disabled] {

  transition: none;

  box-shadow: none;

  background-color: #4f4f4f;

  background-color: rgba(79, 79, 79, 0.26);

  color: #000000;

  color: rgba(0, 0, 0, 0.26);

  opacity: 1;

}

/*~

  name: Material Flat Button

  category: Button

  elements: ons-button

  markup: |

    <button class="button button--material--flat">BUTTON</button>

    <button class="button button--material--flat" disabled>DISABLED</button>

*/

.button--material--flat { /* stylelint-disable-line */

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  height: auto;

  text-decoration: none;

  padding: 4px 10px;

  font-size: 1.063rem;

  line-height: 32px;

  letter-spacing: 0;

  color: white;

  vertical-align: middle;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 3px;

  transition: none;

  box-shadow:

      0 2px 2px 0 rgba(0, 0, 0, .14),

      0 1px 5px 0 rgba(0, 0, 0, .12),

      0 3px 1px -2px rgba(0, 0, 0, .2);

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  min-height: 36px;

  line-height: 36px;

  padding: 0 16px;

  text-align: center;

  font-size: 0.875rem;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

  text-transform: uppercase;

  background-color: #2979ff;

  background-color: #5b2add;

  color: #ffffff;

  font-weight: 500;

  transition: background-color 0.25s linear;

  box-shadow: none;

  background-color: transparent;

  color: #2979ff;

  color: #5b2add;

  transition: all 0.25s linear;

}

.button--material--flat:hover { /* stylelint-disable-line */

  transition: all 0.25s linear;

}

.button--material--flat:focus { /* stylelint-disable-line */

  box-shadow: none;

  background-color: transparent;

  color: #2979ff;

  color: #5b2add;

  outline: 0;

  opacity: 1;

  border: none;

}

.button--material--flat:active { /* stylelint-disable-line */

  box-shadow: none;

  outline: 0;

  opacity: 1;

  border: none;

  background-color: #999999;

  background-color: rgba(153, 153, 153, 0.2);

  color: #2979ff;

  color: #5b2add;

  transition: all 0.25s linear;

}

.button--material--flat:disabled, .button--material--flat[disabled] {/* stylelint-disable-line */

  transition: none;

  opacity: 1;

  box-shadow: none;

  background-color: transparent;

  color: #000000;

  color: rgba(0, 0, 0, 0.26);

}

/*~

  name: Button Bar

  category: Segment

  markup: |

    <div class="button-bar" style="width:280px;">

      <div class="button-bar__item">

        <button class="button-bar__button">One</button>

      </div>

      <div class="button-bar__item">

        <button class="button-bar__button">Two</button>

      </div>

      <div class="button-bar__item">

        <button class="button-bar__button">Three</button>

      </div>

    </div>

*/

.button-bar {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: -webkit-inline-box;

  display: -webkit-inline-flex;

  display: inline-flex;

  -webkit-box-align: stretch;

  -webkit-align-items: stretch;

          align-items: stretch;

  -webkit-align-content: stretch;

          align-content: stretch;

  -webkit-flex-wrap: nowrap;

          flex-wrap: nowrap;

  margin: 0;

  padding: 0;

  border: none;

}

.button-bar__item {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border-radius: 0;

  width: 100%;

  padding: 0;

  margin: 0;

  position: relative;

  overflow: hidden;

  box-sizing: border-box;

}

.button-bar__button {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border-radius: 0;

  background-color: transparent;

  color: #0076ff;

  color: #5b2add;

  border: 1px solid #0076ff;


  border: 1px solid #5b2add;


  border-top-width: 1px;

  border-bottom-width: 1px;

  border-right-width: 1px;

  border-left-width: 0;

  font-weight: 400;

  padding: 0;

  font-size: 0.813rem;

  height: 27px;

  line-height: 27px;

  width: 100%;

  transition: background-color 0.2s linear, color 0.2s linear;

  box-sizing: border-box;

}

.button-bar__button:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.button-bar__button:hover {

  transition: none;

}

.button-bar__button:focus {

  outline: 0;

}

:checked + .button-bar__button {

  background-color: #0076ff;

  background-color: #5b2add;

  color: #fff;

  transition: none;

}

.button-bar__button:active,

:active + .button-bar__button {

  background-color: rgb(179, 214, 255);

  border: 0 solid #0076ff;


  border: 0 solid #5b2add;


  border-top: 1px solid #0076ff;


  border-top: 1px solid #5b2add;


  border-bottom: 1px solid #0076ff;

  #5b2add

  border-bottom: 1px solid #5b2add;

  #5b2add

  border-right: 1px solid #0076ff;


  border-right: 1px solid #5b2add;


  font-size: 0.813rem;

  width: 100%;

  transition: none;

}

.button-bar__item:first-child > .button-bar__button {

  border-left-width: 1px;

  border-radius: 4px 0 0 4px;

}

.button-bar__item:last-child > .button-bar__button {

  border-right-width: 1px;

  border-radius: 0 4px 4px 0;

}

/*~

  name: Segment

  category: Segment

  markup: |

    <div class="segment" style="width: 280px; margin: 0 auto;">

      <div class="segment__item">

        <input type="radio" class="segment__input" name="segment-a" checked>

        <div class="segment__button">One</div>

      </div>

      <div class="segment__item">

        <input type="radio" class="segment__input" name="segment-a">

        <div class="segment__button">Two</div>

      </div>

      <div class="segment__item">

        <input type="radio" class="segment__input" name="segment-a">

        <div class="segment__button">Three</div>

      </div>

    </div>

*/

.segment {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: -webkit-inline-box;

  display: -webkit-inline-flex;

  display: inline-flex;

  -webkit-box-align: stretch;

  -webkit-align-items: stretch;

          align-items: stretch;

  -webkit-align-content: stretch;

          align-content: stretch;

  -webkit-flex-wrap: nowrap;

          flex-wrap: nowrap;

  margin: 0;

  padding: 0;

  border: none;

}

.segment__item {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border-radius: 0;

  width: 100%;

  padding: 0;

  margin: 0;

  position: relative;

  overflow: hidden;

  box-sizing: border-box;

  display: block;

  background-color: transparent;

  border: none;

}

.segment__input {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}

.segment__button {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border-radius: 0;

  background-color: transparent;

  color: #0076ff;

  color: #5b2add;

  border: 1px solid #0076ff;


  border-top-width: 1px;

  border-bottom-width: 1px;

  border-right-width: 1px;

  border-left-width: 0;

  font-weight: 400;

  padding: 0;

  font-size: 0.813rem;

  height: 29px;

  line-height: 29px;

  width: 100%;

  transition: background-color 0.2s linear, color 0.2s linear;

  box-sizing: border-box;

  text-align: center;

}

.segment__item:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.segment__button:hover {

  transition: none;

}

.segment__button:focus {

  outline: 0;

}

:active + .segment__button {

  background-color: rgb(179, 214, 255);

  border: 0 solid #0076ff;

  border-top: 1px solid #0076ff;

  border-bottom: 1px solid #0076ff;

  border-right: 1px solid #0076ff;

	border-color: #5b2add;

  font-size: 0.813rem;

  width: 100%;

  transition: none;

}

:checked + .segment__button {

  background-color: #0076ff;

  background-color: #5b2add;

  color: #fff;

  transition: none;

}

.segment__item:first-child > .segment__button {

  border-left-width: 1px;

  border-radius: 4px 0 0 4px;

}

.segment__item:last-child > .segment__button {

  border-right-width: 1px;

  border-radius: 0 4px 4px 0;

}

/*~

  name: Material Segment

  category: Segment

  markup: |

    <div class="segment segment--material" style="width: 280px; margin: 0 auto;">

      <div class="segment__item segment--material__item">

        <input type="radio" class="segment__input segment--material__input" name="segment-b" checked>

        <div class="segment__button segment--material__button">One</div>

      </div>

      <div class="segment__item segment--material__item">

        <input type="radio" class="segment__input segment--material__input" name="segment-b">

        <div class="segment__button segment--material__button">Two</div>

      </div>

      <div class="segment__item segment--material__item">

        <input type="radio" class="segment__input segment--material__input" name="segment-b">

        <div class="segment__button segment--material__button">Three</div>

      </div>

    </div>

*/

.segment--material {

  border-radius: 2px;

  overflow: hidden;

  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);

}

.segment--material__button {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-size: 0.875rem;

  height: 32px;

  line-height: 32px;

  border-width: 0;

  color: #000000;

  color: rgba(0, 0, 0, 0.38);

  border-radius: 0;

  background-color: #fafafa;

}

:active + .segment--material__button {

  background-color: #fafafa;

  border-radius: 0;

  border-width: 0;

  font-size: 0.875rem;

  transition: none;

  color: #000000;

  color: rgba(0, 0, 0, 0.38);

}

:checked + .segment--material__button {

  background-color: #c8c8c8;

  color: #353535;

  border-radius: 0;

  border-width: 0;

}

.segment--material__item:first-child > .segment--material__button,

.segment--material__item:last-child > .segment--material__button {

  border-radius: 0;

  border-width: 0;

}

:root { /* Text color */ /* Text color active */

}

/*~

  name: Icon Tabbar

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->

    <div class="tabbar">

      <label class="tabbar__item">

        <input type="radio" name="tabbar-a" checked="checked">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-stop"></i>

          <div class="tabbar__label">One</div>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="tabbar-a">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-record"></i>

          <div class="tabbar__label">Two</div>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="tabbar-a">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-star"></i>

          <div class="tabbar__label">Three</div>

        </button>

      </label>

    </div>

*/

/*~

  name: Tabbar

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <div class="tabbar">

      <label class="tabbar__item">

        <input type="radio" name="tabbar-c" checked="checked">

        <button class="tabbar__button">

          <div class="tabbar__label">One</div>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="tabbar-c">

        <button class="tabbar__button">

          <div class="tabbar__label">Two</div>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="tabbar-c">

        <button class="tabbar__button">

          <div class="tabbar__label">Three</div>

        </button>

      </label>

    </div>

*/

.tabbar {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  white-space: nowrap;

  margin: 0;

  padding: 0;

  height: 49px;

  background-color: #fafafa;

  border-top: 1px solid #ccc;

  width: 100%;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .tabbar {

    border-top: none;

    background-size: 100% 1px;

    background-repeat: no-repeat;

    background-position: top;

    /*background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);*/

  }

}

.tabbar__item {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  position: relative;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

          flex-grow: 1;

  -webkit-flex-basis: 0;

          flex-basis: 0;

  width: auto;

  border-radius: 0;

}

.tabbar__item > input {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}

.tabbar__button {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  position: relative;

  display: inline-block;

  text-decoration: none;

  padding: 0;

  height: 49px;

  letter-spacing: 0;

  color: #999;

  vertical-align: top;

  background-color: transparent;

  border-top: none;

  width: 100%;

  font-weight: 400;

  line-height: 49px;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .tabbar__button {

    border-top: none;

  }

}

.tabbar__icon {

  font-size: 1.5rem;

  padding: 0;

  margin: 0;

  line-height: 26px;

  display: block !important; /* stylelint-disable-line declaration-no-important */

  height: 28px;

}

.tabbar__label {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: inline-block;

}

.tabbar__badge.notification {

  vertical-align: text-bottom;

  top: -1px;

  margin-left: 5px;

  z-index: 10;

  font-size: 0.75rem;

  height: 16px;

  min-width: 16px;

  line-height: 16px;

  border-radius: 8px;

}

.tabbar__icon ~ .tabbar__badge.notification {

  position: absolute;

  top: 5px;

  margin-left: 0;

}

.tabbar__icon + .tabbar__label {

  display: block;

  font-size: 0.625rem;

  line-height: 1;

  margin: 0;

  font-weight: 400;

}

.tabbar__label:first-child {

  font-size: 1rem;

  line-height: 49px;

  margin: 0;

  padding: 0;

}

:checked + .tabbar__button {

  color: #0076ff;

  color: #5b2add;

  background-color: transparent;

  box-shadow: none;

  border-top: none;

}

.tabbar__button:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.tabbar__button:focus {

  z-index: 1;

  border-top: none;

  box-shadow: none;

  outline: 0;

}

.tabbar__content {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 49px;

  z-index: 0;

}

.tabbar--autogrow .tabbar__item {

  -webkit-flex-basis: auto;

          flex-basis: auto;

}

/*~

  name: Icon Only Tabbar

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->

    <div class="tabbar">

      <label class="tabbar__item">

        <input type="radio" name="tabbar-b" checked="checked">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-stop"></i>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="tabbar-b">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-record"></i>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="tabbar-b">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-star"></i>

        </button>

      </label>



    </div>

*/

/*~

  name: Top Tabbar

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <div class="tabbar tabbar--top">

      <label class="tabbar__item">

        <input type="radio" name="top-tabbar-a" checked="checked">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-stop"></i>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="top-tabbar-a">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-record"></i>

        </button>

      </label>



      <label class="tabbar__item">

        <input type="radio" name="top-tabbar-a">

        <button class="tabbar__button">

          <i class="tabbar__icon ion-star"></i>

        </button>

      </label>

    </div>

*/

.tabbar--top {

  position: relative;

  top: 0;

  left: 0;

  right: 0;

  bottom: auto;

  border-top: none;

  border-bottom: 1px solid #ccc;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .tabbar--top {

    border-bottom: none;

    background-size: 100% 1px;

    background-repeat: no-repeat;

    background-position: bottom;

    /*background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);*/

  }

}

.tabbar--top__content {

  top: 49px;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 0;

}

/*~

  name: Bordered Top Tabbar

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <div class="tabbar tabbar--top tabbar--top-border">

      <label class="tabbar__item tabbar--top-border__item">

        <input type="radio" name="top-tabbar-b" checked="checked">

        <button class="tabbar__button tabbar--top-border__button">

          Home

        </button>

      </label>



      <label class="tabbar__item tabbar--top-border__item">

        <input type="radio" name="top-tabbar-b">

        <button class="tabbar__button tabbar--top-border__button">

          Comments

        </button>

      </label>



      <label class="tabbar__item tabbar--top-border__item">

        <input type="radio" name="top-tabbar-b">

        <button class="tabbar__button tabbar--top-border__button">

          Activity

        </button>

      </label>

    </div>

*/

/*~

  name: Material Tabbar

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <div class="tabbar tabbar--top tabbar--material">

      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-a" checked="checked">

        <button class="tabbar__button tabbar--material__button">

          Music

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-a">

        <button class="tabbar__button tabbar--material__button">

          Movies

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-a">

        <button class="tabbar__button tabbar--material__button">

          Books

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-a">

        <button class="tabbar__button tabbar--material__button">

          Games

        </button>

      </label>



    </div>

*/

.tabbar--top-border__button {

  background-color: transparent;

  border-bottom: 4px solid transparent;

}

:checked + .tabbar--top-border__button {

  background-color: transparent;

  border-bottom: 4px solid #0076ff;

  border-color: #5b2add;

}

.tabbar__border {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 4px;

  background-color: #0076ff;

  background-color: #5b2add;

}

.tabbar--material {

  background: none;

  background-color: #ffffff;

  border-bottom-width: 0;

  box-shadow:

    0 4px 2px -2px rgba(0, 0, 0, .14),

    0 3px 5px -2px rgba(0, 0, 0, .12),

    0 5px 1px -4px rgba(0, 0, 0, .2);

}

.tabbar--material__button {

  background-color: transparent;

  color: #31313a;

  text-transform: uppercase;

  font-size: 0.875rem;

  font-weight: 500;

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

}

.tabbar--material__button:after {

  content: '';

  display: block;

  width: 0;

  height: 2px;

  bottom: 0;

  position: absolute;

  margin-top: -2px;

  background-color: #31313a;

}

:checked + .tabbar--material__button:after {

  width: 100%;

  transition: width 0.2s ease-in-out;

}

:checked + .tabbar--material__button {

  background-color: transparent;

  color: #31313a;

}

.tabbar--material__item:not([ripple]):active {

  background-color: #31313a;

  background-color: rgba(49, 49, 58, .1);

}

.tabbar--material__border {

  height: 2px;

  background-color: #31313a;

}

/*~

  name: Material Tabbar (Icon only)

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <div class="tabbar tabbar--top tabbar--material">

      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-b" checked="checked">

        <button class="tabbar__button tabbar--material__button">

          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-b">

        <button class="tabbar__button tabbar--material__button">

          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-b">

        <button class="tabbar__button tabbar--material__button">

          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>

        </button>

      </label>

    </div>

*/

.tabbar--material__icon {

  font-size: 22px !important; /* stylelint-disable-line declaration-no-important */

  line-height: 36px;

}

/*~

  name: Material Tabbar (Icon and Label)

  category: Tabbar

  elements: ons-tabbar ons-tab

  markup: |

    <div class="tabbar tabbar--top tabbar--material">

      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-c" checked="checked">

        <button class="tabbar__button tabbar--material__button">

          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>

          <div class="tabbar__label tabbar--material__label">Call</div>

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-c">

        <button class="tabbar__button tabbar--material__button">

          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>

          <div class="tabbar__label tabbar--material__label">Favorites</div>

        </button>

      </label>



      <label class="tabbar__item tabbar--material__item">

        <input type="radio" name="tabbar-material-c">

        <button class="tabbar__button tabbar--material__button">

          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-delete"></i>

          <div class="tabbar__label tabbar--material__label">Delete</div>

        </button>

      </label>

    </div>

*/

.tabbar--material__label {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

}

.tabbar--material__label:first-child {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  letter-spacing: 0.015em;

  font-weight: 500;

  font-size: 0.875;

}

.tabbar--material__icon + .tabbar--material__label {

  font-size: 10px;

}

/*~

  name: Toolbar Button

  category: Toolbar Button

  elements: ons-toolbar-button

  markup: |

    <!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->

    <button class="toolbar-button">

      <i class="fa fa-bell" style="font-size:17px"></i>

    </button>



    <button class="toolbar-button">

      Label

    </button>



    <button class="toolbar-button toolbar-button--outline">

      <i class="fa fa-bell" style="font-size:17px"></i> Label

    </button>

*/

.toolbar-button {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  padding: 4px 10px;

  letter-spacing: 0;

  color: #0076ff;

  color: #5b2add;

  background-color: #000000;

  background-color: rgba(0, 0, 0, 0);

  border-radius: 2px;

  border: 1px solid transparent;

  font-weight: 400;

  font-size: 1.063rem;

  transition: none;

}

.toolbar-button:active {

  background-color: #000000;

  background-color: rgba(0, 0, 0, 0);

  transition: none;

  opacity: 0.2;

}

.toolbar-button:disabled,

.toolbar-button[disabled] {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.toolbar-button:focus {

  outline: 0;

  transition: none;

}

.toolbar-button:hover {

  transition: none;

}

.toolbar-button--outline {

  border: 1px solid #0076ff;

	border-color: #5b2add;

  margin: auto 8px;

  padding-left: 6px;

  padding-right: 6px;

}

/*~

  name: Material Toolbar Button

  category: Toolbar Button

  elements: ons-toolbar-button

  markup: |

    <!-- Prerequisite=This example use Material Design Iconic Font(http://zavoloklom.github.io/material-design-iconic-font/) to display icons. -->

    <span class="toolbar-button toolbar-button--material">

      <i class="zmdi zmdi-menu"></i>

    </span>

    <span class="toolbar-button toolbar-button--material">

      Label

    </span>

    <span class="toolbar-button toolbar-button--material">

      <i class="zmdi zmdi-favorite"></i>

    </span>

*/

.toolbar-button--material {

  font-size: 1.375rem;

  color: #898989;

  display: inline-block;

  padding: 0 12px;

  height: 100%;

  margin: 0;

  border: none;

  border-radius: 0;

  vertical-align: baseline;

  vertical-align: initial;

  transition: background-color 0.25s linear;

}

.toolbar-button--material:first-of-type {

  margin-left: 4px;

}

.toolbar-button--material:last-of-type {

  margin-right: 4px;

}

.toolbar-button--material:active {

  opacity: 1;

  transition: background-color 0.25s linear;

}

.back-button {

  height: 44px;

  line-height: 44px;

  padding-left: 8px;

  color: #0076ff;

  color: #5b2add;

  background-color: #000000;

  background-color: rgba(0, 0, 0, 0);

  display: inline-block;

}

.back-button:active {

  opacity: 0.2;

}

.back-button__label {

  display: inline-block;

  height: 100%;

  vertical-align: top;

  line-height: 44px;

  font-size: 1.063rem;

  font-weight: 500;

}

.back-button__icon {

  margin-right: 6px;

  display: -webkit-inline-box;

  display: -webkit-inline-flex;

  display: inline-flex;

  fill: #0076ff;

  fill: #5b2add;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  height: 100%;

}

.back-button--material {

  font-size: 1.375rem;

  color: #1e88e5;

  color: #5b2add;

  display: inline-block;

  padding: 0 12px;

  height: 100%;

  margin: 0 0 0 4px;

  border: none;

  border-radius: 0;

  vertical-align: baseline;

  vertical-align: initial;

  line-height: 56px;

}

.back-button--material__label {

  display: none;

  font-size: 1.25rem;

}

.back-button--material__icon {

  display: -webkit-inline-box;

  display: -webkit-inline-flex;

  display: inline-flex;

  fill: #1e88e5;

  fill: #5b2add;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  height: 100%;

}

.back-button--material:active {

  opacity: 1;

}

:root { /* background color active */

}

/*~

  name: Checkbox

  category: Checkbox

  elements: ons-input

  markup: |

    <label class="checkbox">

      <input type="checkbox" class="checkbox__input">

      <div class="checkbox__checkmark"></div>

      OFF

    </label>



    <label class="checkbox">

      <input type="checkbox" class="checkbox__input" checked="checked">

      <div class="checkbox__checkmark"></div>

      ON

    </label>



    <label class="checkbox">

      <input type="checkbox" class="checkbox__input" disabled>

      <div class="checkbox__checkmark"></div>

      Disabled

    </label>

*/

.checkbox {

  position: relative;

  display: inline-block;

  vertical-align: top;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  line-height: 22px;

}

.checkbox__checkmark {

  box-sizing: border-box;

  background-clip: padding-box;

  position: relative;

  display: inline-block;

  vertical-align: top;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  position: relative;

  height: 22px;

  width: 22px;

  pointer-events: none;

}

.checkbox__input,

.checkbox__input:checked {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}

.checkbox__checkmark:before {

  content: '';

  position: absolute;

  box-sizing: border-box;

  background-clip: padding-box;

  width: 22px;

  height: 22px;

  background: transparent;

  border: 1px solid #c7c7cd;

  border-radius: 22px;

  left: 0;

}

/* checkmark's line */

.checkbox__checkmark:after {

  content: '';

  position: absolute;

  top: 7px;

  left: 5px;

  width: 11px;

  height: 5px;

  background: transparent;

  border: 2px solid #fff;

  border-width: 1px;

  border-top: none;

  border-right: none;

  border-radius: 0;

  -webkit-transform: rotate(-45deg);

          transform: rotate(-45deg);

  opacity: 0;

}

:checked + .checkbox__checkmark:before {

  background: #0076ff;

  background: #5b2add;

  border: none;

}

:checked + .checkbox__checkmark:after {

  opacity: 1;

}

:disabled + .checkbox__checkmark {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

:disabled:active + .checkbox__checkmark:before { /* FIXME */

  background: transparent;

}

/*~

  name: No border Checkbox

  category: Checkbox

  elements: ons-input

  markup: |

    <label class="checkbox--noborder">

      <input type="checkbox" class="checkbox__input checkbox--noborder__input">

      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>

      OFF

    </label>



    <label class="checkbox--noborder">

      <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">

      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>

      ON

    </label>



    <label class="checkbox--noborder">

      <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">

      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>

      Disabled

    </label>

 */

.checkbox--noborder {

  position: relative;

  display: inline-block;

  vertical-align: top;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  line-height: 22px;

  position: relative;

}

.checkbox--noborder__input {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}

.checkbox--noborder__checkmark {

  position: relative;

  display: inline-block;

  vertical-align: top;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  box-sizing: border-box;

  background-clip: padding-box;

  width: 22px;

  height: 22px;

  background: transparent;

  border: none;

}

.checkbox--noborder__checkmark:before {

  content: '';

  position: absolute;

  width: 22px;

  height: 22px;

  background: transparent;

  border: none;

  border-radius: 22px;

  left: 0;

}

/* checkmark's line */

.checkbox--noborder__checkmark:after {

  content: '';

  position: absolute;

  top: 7px;

  left: 4px;

  opacity: 0;

  width: 11px;

  height: 4px;

  background: transparent;

  border: 2px solid #0076ff;

	border-color: #5b2add;

  border-top: none;

  border-right: none;

  border-radius: 0;

  -webkit-transform: rotate(-45deg);

          transform: rotate(-45deg);

}

:checked + .checkbox--noborder__checkmark:before {

  background: transparent;

  border: none;

}

:checked + .checkbox--noborder__checkmark:after {

  opacity: 1;

}

:focus + .checkbox--noborder__checkmark:before {

  border: none;

}

:disabled + .checkbox--noborder__checkmark {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

:disabled:active + .checkbox--noborder__checkmark:before {

  background: transparent;

  border: none;

}

/*~

  name: Material Checkbox

  category: Checkbox

  elements: ons-input

  markup: |

    <label class="checkbox checkbox--material">

      <input type="checkbox" class="checkbox__input checkbox--material__input">

      <div class="checkbox__checkmark checkbox--material__checkmark"></div>

      OFF

    </label>

    <label class="checkbox checkbox--material">

      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">

      <div class="checkbox__checkmark checkbox--material__checkmark"></div>

      ON

    </label>

    <label class="checkbox checkbox--material">

      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>

      <div class="checkbox__checkmark checkbox--material__checkmark"></div>

      ON

    </label>

    <label class="checkbox checkbox--material">

      <input type="checkbox" class="checkbox__input checkbox--material__input" disabled>

      <div class="checkbox__checkmark checkbox--material__checkmark"></div>

      Disabled

    </label>

*/

.checkbox--material {

  line-height: 18px;

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  overflow: visible;

}

.checkbox--material__checkmark {

  width: 18px;

  height: 18px;

}

.checkbox--material__checkmark:before {

  border-radius: 2px;

  height: 18px;

  width: 18px;

  border: 2px solid #717171;

  transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;

  background-color: transparent;

}

:checked + .checkbox--material__checkmark:before {

  border: 2px solid #37474f;

  border-color: #37474f

  background-color: #37474f;

  background-color: #37474f;

  transition: background-color 0.1s linear, border-color 0.1s linear;

}

.checkbox--material__checkmark:after {

  border-color: #ffffff;

  transition: -webkit-transform 0.2s ease 0;

  transition: transform 0.2s ease 0;

  transition: transform 0.2s ease 0, -webkit-transform 0.2s ease 0;

  width: 10px;

  height: 5px;

  top: 4px;

  left: 3px;

  -webkit-transform: scale(0) rotate(-45deg);

          transform: scale(0) rotate(-45deg);

  border-width: 2px;

}

:checked + .checkbox--material__checkmark:after {

  transition: -webkit-transform 0.2s ease 0.2s;

  transition: transform 0.2s ease 0.2s;

  transition: transform 0.2s ease 0.2s, -webkit-transform 0.2s ease 0.2s;

  width: 10px;

  height: 5px;

  top: 4px;

  left: 3px;

  -webkit-transform: scale(1) rotate(-45deg);

          transform: scale(1) rotate(-45deg);

  border-width: 2px;

}

/* active ring effect */

.checkbox--material__input:before {

  content: '';

  opacity: 0;

  position: absolute;

  top: 0;

  left: 0;

  width: 18px;

  height: 18px;

  box-shadow: 0 0 0 11px #717171;

  box-sizing: border-box;

  border-radius: 50%;

  background-color: #717171;

  pointer-events: none;

  display: block;

  -webkit-transform: scale3d(0.2, 0.2, 0.2);

          transform: scale3d(0.2, 0.2, 0.2);

  transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;

  transition: opacity 0.25s ease-out, transform 0.1s ease-out;

  transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;

}

.checkbox--material__input:checked:before {

  box-shadow: 0 0 0 11px #37474f;


  box-shadow: 0 0 0 11px #37474f;


  background-color: #37474f;

  background-color: #37474f;

}

.checkbox--material__input:active:before {

  opacity: .15;

  -webkit-transform: scale3d(1, 1, 1);

          transform: scale3d(1, 1, 1);

}

:disabled + .checkbox--material__checkmark {

  opacity: 1;

}

:disabled + .checkbox--material__checkmark:before {

  border-color: #afafaf;

}

:disabled:checked + .checkbox--material__checkmark:before {

  background-color: #afafaf;

}

:disabled:checked + .checkbox--material__checkmark:after {

  border-color: #ffffff;

}

/*~

  name: Radio Button

  category: Radio Button

  elements: ons-input

  markup: |

    <label class="radio-button">

      <input type="radio" class="radio-button__input" name="r" checked="checked">

      <div class="radio-button__checkmark"></div>

      Label

    </label>



    <label class="radio-button">

      <input type="radio" class="radio-button__input" name="r">

      <div class="radio-button__checkmark"></div>

      Label

    </label>



    <label class="radio-button">

      <input type="radio" class="radio-button__input" name="r">

      <div class="radio-button__checkmark"></div>

      Label

    </label>

*/

.radio-button__input {

  position: absolute;

  right: 0;

  top: 0;

  left: 0;

  bottom: 0;

  padding: 0;

  border: 0;

  background-color: transparent;

  z-index: 1;

  vertical-align: top;

  outline: none;

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}

.radio-button__input:active,

.radio-button__input:focus {

  outline: 0;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.radio-button {

  position: relative;

  display: inline-block;

  vertical-align: top;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  position: relative;

  line-height: 24px;

  text-align: left;

}

.radio-button__checkmark:before {

  content: '';

  position: absolute;

  border-radius: 100%;

  box-sizing: border-box;

  background-clip: padding-box;

  width: 22px;

  height: 22px;

  background: transparent;

  border: none;

  border-radius: 22px;

  left: 0;

}

.radio-button__checkmark {

  box-sizing: border-box;

  background-clip: padding-box;

  position: relative;

  display: inline-block;

  vertical-align: top;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  position: relative;

  position: relative;

  width: 24px;

  height: 24px;

  background: transparent;

  pointer-events: none;

}

.radio-button__checkmark:after {

  content: '';

  position: absolute;

  top: 7px;

  left: 4px;

  opacity: 0;

  width: 11px;

  height: 4px;

  background: transparent;

  border: 2px solid #0076ff;

	border-color: #5b2add;

  border-top: none;

  border-right: none;

  border-radius: 0;

  -webkit-transform: rotate(-45deg);

          transform: rotate(-45deg);

}

:checked + .radio-button__checkmark {

  background: #000000;

  background: rgba(0, 0, 0, 0);

}

:checked + .radio-button__checkmark:after {

  opacity: 1;

}

:checked + .radio-button__checkmark:before {

  background: transparent;

  border: none;

}

:disabled + .radio-button__checkmark {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*~

  name: Material Radio Button

  category: Radio Button

  elements: ons-input

  markup: |

    <label class="radio-button radio-button--material">

      <input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">

      <div class="radio-button__checkmark radio-button--material__checkmark"></div>

      Label

    </label>

    <label class="radio-button radio-button--material">

      <input type="radio" class="radio-button__input radio-button--material__input" name="r">

      <div class="radio-button__checkmark radio-button--material__checkmark"></div>

      Label

    </label>

    <label class="radio-button radio-button--material">

      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>

      <div class="radio-button__checkmark radio-button--material__checkmark"></div>

      Label

    </label>

    <label class="radio-button radio-button--material">

      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>

      <div class="radio-button__checkmark radio-button--material__checkmark"></div>

      Label

    </label>

*/

.radio-button--material {

  line-height: 22px;

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

}

.radio-button--material__input:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  width: 20px;

  height: 20px;

  box-shadow: 0 0 0 14px #717171;

  border: none;

  box-sizing: border-box;

  border-radius: 50%;

  background-color: #717171;

  pointer-events: none;

  display: block;

  -webkit-transform: scale3d(0.2, 0.2, 0.2);

          transform: scale3d(0.2, 0.2, 0.2);

  transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;

  transition: opacity 0.25s ease-out, transform 0.1s ease-out;

  transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;

}

.radio-button--material__input:checked:before {

  box-shadow: 0 0 0 14px #37474f;


  box-shadow: 0 0 0 14px #37474f;


  background-color: #37474f;

  background-color: #37474f;

}

.radio-button--material__input:active:before {

  opacity: .15;

  -webkit-transform: scale3d(1, 1, 1);

          transform: scale3d(1, 1, 1);

}

.radio-button--material__checkmark {

  width: 20px;

  height: 20px;

  overflow: visible;

}

.radio-button--material__checkmark:before {

  background: transparent;

  border: 2px solid #717171;

  border-color: #37474f;

  box-sizing: border-box;

  border-radius: 50%;

  width: 20px;

  height: 20px;

  transition: border 0.2s ease;

}

.radio-button--material__checkmark:after {

  transition: background 0.2s ease, -webkit-transform 0.2s ease;

  transition: background 0.2s ease, transform 0.2s ease;

  transition: background 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;

  top: 5px;

  left: 5px;

  width: 10px;

  height: 10px;

  border: none;

  border-radius: 50%;

  -webkit-transform: scale(0);

          transform: scale(0);

}

:checked + .radio-button--material__checkmark:before {

  background: transparent;

  border: 2px solid #37474f;

  border-color: #37474f;

}

.radio-button--material__input + .radio-button__checkmark:after {

  background: #717171;

  opacity: 1;

  -webkit-transform: scale(0);

          transform: scale(0);

}

:checked + .radio-button--material__checkmark:after {

  opacity: 1;

  background: #37474f;

  background: #37474f;

  -webkit-transform: scale(1);

          transform: scale(1);

}

:disabled + .radio-button--material__checkmark {

  opacity: 1;

}

:disabled + .radio-button--material__checkmark:after {

  background-color: #afafaf;

  border-color: #afafaf;

}

:disabled + .radio-button--material__checkmark:before {

  border-color: #afafaf;

}

/*~

  name: List

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">Dog</div>

      </li>

      <li class="list-item">

        <div class="list-item__center">Cat</div>

      </li>

      <li class="list-item">

        <div class="list-item__center">Hamster</div>

      </li>

    </ul>

*/

.list {

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  list-style-type: none;

  text-align: left;

  display: block;

  -webkit-overflow-scrolling: touch;

  overflow: hidden;

  background-image:

    linear-gradient(#ccc, #ccc),

    linear-gradient(#ccc, #ccc);

  background-size: 100% 1px, 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom, top;

  border: none;

  background-color: #fff;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list {

    background-image:

      linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),

      linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);

  }

}

.list-item {

  position: relative;

  width: 100%;

  list-style: none;

  box-sizing: border-box;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

          flex-direction: row;

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

          justify-content: flex-start;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  padding: 0 0 0 14px;

  margin: 0 0 -1px 0;

  color: #1f1f21;

  transition: background-color 0.2s linear;

}

/*~

  name: Expandable List

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item list-item--expandable expanded">

        <div class="list-item__top">

          <div class="list-item__center">Item</div>

          <div class="list-item__right">

            <span class="list-item__expand-chevron"></span>

          </div>

        </div>

        <div class="list-item__expandable-content">Expanded content</div>

      </li>

    </ul>

*/

.list-item__top {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

          flex-direction: row;

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

          justify-content: flex-start;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  -webkit-box-ordinal-group: 1;

  -webkit-order: 0;

          order: 0;

  width: 100%;

}

.list-item--expandable {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

          flex-direction: column;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #ccc, #ccc 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item--expandable {

    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);

  }

}

.list-item--expandable {

  background-position-x: 14px;

}

.list-item__expandable-content {

  display: none;

  width: 100%;

  padding: 12px 14px 12px 0;

  box-sizing: border-box;

  -webkit-box-ordinal-group: 2;

  -webkit-order: 1;

          order: 1;

  overflow: hidden;

}

.list-item.expanded > .list-item__expandable-content {

  display: block;

  height: auto;

}

.list-item__left {

  box-sizing: border-box;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  padding: 12px 14px 12px 0;

  -webkit-box-ordinal-group: 1;

  -webkit-order: 0;

          order: 0;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  -webkit-align-self: stretch;

          align-self: stretch;

  line-height: 1.2em;

  min-height: 44px;

}

.list-item__left:empty {

  width: 0;

  min-width: 0;

  padding: 0;

  margin: 0;

}

.list-item__center {

  box-sizing: border-box;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

          flex-grow: 1;

  -webkit-flex-wrap: wrap;

          flex-wrap: wrap;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

          flex-direction: row;

  -webkit-box-ordinal-group: 2;

  -webkit-order: 1;

          order: 1;

  margin-right: auto;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  -webkit-align-self: stretch;

          align-self: stretch;

  margin-left: 0;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #ccc, #ccc 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item__center {

    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);

  }

}

.list-item__center {

  padding: 12px 6px 12px 0;

  line-height: 1.2em;

  min-height: 44px;

}

.list-item__right {

  box-sizing: border-box;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  margin-left: auto;

  padding: 12px 12px 12px 0;

  -webkit-box-ordinal-group: 3;

  -webkit-order: 2;

          order: 2;

  -webkit-box-align: center;

  -webkit-align-items: center;

          align-items: center;

  -webkit-align-self: stretch;

          align-self: stretch;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #ccc, #ccc 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item__right {

    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);

  }

}

.list-item__right {

  line-height: 1.2em;

  min-height: 44px;

}

.list-header {

  margin: 0;

  list-style: none;

  text-align: left;

  display: block;

  box-sizing: border-box;

  padding: 0 0 0 15px;

  font-size: 0.75rem;

  font-weight: 500;

  color: #1f1f21;

  min-height: 24px;

  line-height: 25px;

  text-transform: uppercase;

  position: relative;

  background-color: #eee;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: top;

  background-image: linear-gradient(0deg, #ccc, #ccc 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-header {

    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);

  }

}

/*~

  name: Noborder List

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list list--noborder">

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

    </ul>

 */

.list--noborder {

  border-top: none;

  border-bottom: none;

  background-image: none;

}

/*~

  name: Category List Header

  category: List

  elements: ons-list ons-list-header ons-list-item

  markup: |

    <ul class="list">

      <li class="list-header">

        Header

      </li>

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

    </ul>

 */

/*~

  name: Tappable List

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item list-item--tappable">

        <div class="list-item__center">Tappable Item</div>

      </li>

      <li class="list-item list-item--tappable">

        <div class="list-item__center">Tappable Item</div>

      </li>

      <li class="list-item list-item--tappable">

        <div class="list-item__center">Tappable Item</div>

      </li>

    </ul>

 */

.list-item--tappable:active {

  transition: none;

  background-color: #d9d9d9;

}

/*~

  name: Switch in List Item

  category: List

  elements: ons-list ons-list-item ons-switch

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">

          Label

        </div>

        <div class="list-item__right">

          <label class="switch">

            <input type="checkbox" class="switch__input" checked>

            <div class="switch__toggle">

              <div class="switch__handle"></div>

            </div>

          </label>

        </div>

      </li>

      <li class="list-item">

        <div class="list-item__center">

          Label

        </div>

        <div class="list-item__right">

          <label class="switch">

            <input type="checkbox" class="switch__input">

            <div class="switch__toggle">

              <div class="switch__handle"></div>

            </div>

          </label>

        </div>

      </li>

    </ul>

*/

/*~

  name: Inset List

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list list--inset">

      <li class="list-item list--inset__item list-item--chevron list-item--tappable">

        <div class="list-item__center">List Item with Chevron</div>

      </li>

      <li class="list-item list--inset__item list-item--chevron list-item--tappable">

        <div class="list-item__center">List Item with Chevron</div>

      </li>

    </ul>

 */

.list--inset {

  margin: 0 8px;

  border: 1px solid #ccc;

  border-radius: 4px;

  background-image: none;

}

/*~

  name: Radio Button in List Item

  category: List

  elements: ons-list ons-list-item ons-input

  markup: |

    <ul class="list">

      <li class="list-item list-item--tappable">

        <div class="list-item__left">

          <label class="radio-button">

            <input type="radio" id="r1" class="radio-button__input" name="r" checked="checked">

            <div class="radio-button__checkmark"></div>

          </label>

        </div>

        <label for="r1" class="list-item__center">

          Radio Button

        </label>

      </li>

      <li class="list-item list-item--tappable">

        <div class="list-item__left">

          <label class="radio-button">

            <input type="radio" id="r2" class="radio-button__input" name="r">

            <div class="radio-button__checkmark"></div>

          </label>

        </div>

        <label for="r2" class="list-item__center">

          Radio Button

        </label>

      </li>

    </ul>

*/

/*~

  name: Checkbox in List Item

  category: List

  elements: ons-list ons-list-item ons-input

  markup: |

    <ul class="list">

      <li class="list-item list-item--tappable">

        <div class="list-item__left">

          <label class="checkbox">

            <input type="checkbox" id="checkbox1" class="checkbox__input" name="c" checked="checked">

            <div class="checkbox__checkmark"></div>

          </label>

        </div>

        <label for="checkbox1" class="list-item__center">

          Checkbox

        </label>

      </li>

      <li class="list-item list-item--tappable">

        <div class="list-item__left">

          <label class="checkbox">

            <input type="checkbox" id="checkbox2" class="checkbox__input" name="c">

            <div class="checkbox__checkmark"></div>

          </label>

        </div>

        <label for="checkbox2" class="list-item__center">

          Checkbox

        </label>

      </li>

    </ul>

*/

/*~

  name: No border Checkbox in List Item

  category: List

  elements: ons-list ons-list-item ons-input

  markup: |

    <ul class="list">

      <li class="list-item list-item--tappable">

        <div class="list-item__left">

          <label class="checkbox checkbox--noborder">

            <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">

            <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>

          </label>

        </div>

        <label for="s1" class="list-item__center">

          Checkbox

        </label>

      </li>

      <li class="list-item list-item--tappable">

        <div class="list-item__left">

          <label class="checkbox checkbox--noborder">

            <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>

            <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>

          </label>

        </div>

        <label for="s2" class="list-item__center">

          Checkbox

        </label>

      </li>

    </ul>

*/

/*~

  name: Text Input in List Item

  category: List

  elements: ons-list ons-list-item ons-input

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">

          <input type="text" class="text-input" placeholder="Name">

        </div>

      </li>

      <li class="list-item">

        <div class="list-item__center">

          <input type="text" class="text-input" placeholder="Email">

        </div>

      </li>

    </ul>

*/

/*~

  name: Textarea in List Item

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">

          <textarea class="textarea textarea--transparent" placeholder="Text message"></textarea>

        </div>

      </li>

    </ul>

*/

/*~

  name: Right Label in List Item

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">

          Title

        </div>

        <div class="list-item__right">

          <div class="list-item__label">Label</div>

        </div>

      </li>

    </ul>

*/

.list-item__label {

  font-size: 0.825rem;

  padding: 0 4px;

  opacity: 0.6;

}

/*~

  name: List Item with Subtitle

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">

          <div class="list-item__title">

            Title

          </div>

          <div class="list-item__subtitle">

            Subtitle

          </div>

        </div>

      </li>

    </ul>

*/

.list-item__title {

  -webkit-flex-basis: 100%;

          flex-basis: 100%;

  -webkit-align-self: flex-end;

          align-self: flex-end;

  -webkit-box-ordinal-group: 1;

  -webkit-order: 0;

          order: 0;

}

.list-item__subtitle {

  opacity: 0.75;

  font-size: 0.825rem;

  -webkit-box-ordinal-group: 2;

  -webkit-order: 1;

          order: 1;

  -webkit-flex-basis: 100%;

          flex-basis: 100%;

  -webkit-align-self: flex-start;

          align-self: flex-start;

}

/*~

  name: List Item with Thumbnail

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__left">

          <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">

        </div>



        <div class="list-item__center">

          <div class="list-item__title">Lily</div>

          <div class="list-item__subtitle">Very friendly cat</div>

        </div>

      </li>



      <li class="list-item">

        <div class="list-item__left">

          <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">

        </div>



        <div class="list-item__center">

          <div class="list-item__title">Molly</div>

          <div class="list-item__subtitle">Loves tuna!</div>

        </div>

      </li>

    </ul>

*/

.list-item__thumbnail {

  width: 40px;

  height: 40px;

  border-radius: 6px;

  display: block;

  margin: 0;

}

/*~

  name: List Item with Icon

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item">

        <div class="list-item__left">

          <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">

        </div>



        <div class="list-item__center">

          <div class="list-item__title">Alice</div>

          <div class="list-item__subtitle">Description</div>

        </div>



        <div class="list-item__right">

          <i class="ion-ios-information list-item__icon"></i>

        </div>

      </li>



      <li class="list-item">

        <div class="list-item__left">

          <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">

        </div>



        <div class="list-item__center">

          <div class="list-item__title">Bob</div>

          <div class="list-item__subtitle">Description</div>

        </div>



        <div class="list-item__right">

          <i class="ion-ios-information list-item__icon"></i>

        </div>

      </li>

    </ul>

*/

.list-item__icon {

  font-size: 22px;

  padding: 0 6px;

}

/*~

  name: Material List

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list list--material">

      <li class="list-item list-item--material">

        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Orange</div>

          <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>

        </div>

      </li>

      <li class="list-item list-item--material">

        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Pear</div>

          <div class="list-item__subtitle list-item--material__subtitle">Funny-shaped fruit.</div>

        </div>

      </li>

    </ul>

*/

.list--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  background-image: none;

  background-color: #fff;

}

.list-item--material {

  border: 0;

  padding: 0 0 0 16px;

  line-height: normal;

}

.list-item--material__subtitle {

  margin-top: 4px;

}

.list-item--material:first-child {

  box-shadow: none;

}

.list-item--material__left {

  padding: 14px 0;

  min-width: 56px;

  line-height: 1;

  min-height: 48px;

}

.list-item--material__left:empty,

.list-item--material__center {

  padding: 14px 6px 14px 0;

  border-color: #eee;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #eee, #eee 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item--material__left:empty,

.list-item--material__center {

    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);

  }

}

.list-item--material__left:empty,

.list-item--material__center {

  min-height: 48px;

}

.list-item--material__right {

  padding: 14px 16px 14px 0;

  line-height: 1;

  border-color: #eee;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #eee, #eee 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item--material__right {

    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);

  }

}

.list-item--material__right {

  min-height: 48px;

}

.list-item--material.list-item--expandable {

  border-bottom: 1px solid #eee;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #eee, #eee 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item--material.list-item--expandable {

    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);

  }

}

.list-item--material.list-item--expandable {

  background-position-x: 16px;

}

.list-item--material.list-item--longdivider,

.list-item--material.list-item--expandable.list-item--longdivider

 {

  border-bottom: 1px solid #eee;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #eee, #eee 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item--material.list-item--longdivider,

.list-item--material.list-item--expandable.list-item--longdivider

 {

    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);

  }

}

/*~

  name: Material List with Header

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list list--material">

      <li class="list-header list-header--material">

        Fruits

      </li>

      <li class="list-item list-item--material">

        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Orange</div>

          <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>

        </div>

      </li>

    </ul>

*/

.list-header--material {

  background: #fff;

  border: none;

  font-size: 0.875rem;

  text-transform: none;

  margin: -1px 0 0 0;

  color: #757575;

  font-weight: 500;

  padding: 8px 16px;

}

.list-header--material:not(:first-of-type) {

  border-top: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: top;

  background-image: linear-gradient(180deg, #eee, #eee 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-header--material:not(:first-of-type) {

    background-image: linear-gradient(180deg, #eee, #eee 50%, transparent 50%);

  }

}

.list-header--material:not(:first-of-type) {

  padding-top: 16px;

}

/*~

  name: Material List with Checkboxes

  category: List

  elements: ons-list ons-list-item ons-input

  markup: |

    <ul class="list list--material">

      <li class="list-item list-item--material">

        <div class="list-item__left list-item--material__left">

          <label class="checkbox checkbox--material">

            <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">

            <div class="checkbox__checkmark checkbox--material__checkmark"></div>

          </label>

        </div>



        <label for="checkbox3" class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Notifications</div>

          <div class="list-item__subtitle list-item--material__subtitle">Allow notifications</div>

        </label>

      </li>



      <li class="list-item list-item--material">

        <div class="list-item__left list-item--material__left">

          <label class="checkbox checkbox--material">

            <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">

            <div class="checkbox__checkmark checkbox--material__checkmark"></div>

          </label>

        </div>



        <label for="checkbox4" class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Sound</div>

          <div class="list-item__subtitle list-item--material__subtitle">Hangouts message</div>

        </label>

      </li>



    </ul>

*/

/*~

  name: Material List with Thumbnails

  category: List

  markup: |

    <ul class="list list--material">

      <li class="list-item list-item--material">

        <div class="list-item__left list-item--material__left">

          <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/42/41" alt="Cute kitten">

        </div>



        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Lily</div>

          <div class="list-item__subtitle list-item--material__subtitle">Very friendly cat</div>

        </div>

      </li>



      <li class="list-item list-item--material">

        <div class="list-item__left list-item--material__left">

          <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">

        </div>



        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Molly</div>

          <div class="list-item__subtitle list-item--material__subtitle">Loves tuna!</div>

        </div>

      </li>



    </ul>

*/

.list-item--material__thumbnail {

  width: 40px;

  height: 40px;

  border-radius: 100%;

}

/*~

  name: Material List with Icons

  category: List

  markup: |

    <ul class="list list--material">

      <li class="list-item list-item--material">

        <div class="list-item__left list-item--material__left">

          <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">

        </div>



        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Alice</div>

          <div class="list-item__subtitle list-item--material__subtitle">Description</div>

        </div>



        <div class="list-item__right list-item--material__right">

          <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>

        </div>

      </li>



      <li class="list-item list-item--material">

        <div class="list-item__left list-item--material__left">

          <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">

        </div>



        <div class="list-item__center list-item--material__center">

          <div class="list-item__title list-item--material__title">Bob</div>

          <div class="list-item__subtitle list-item--material__subtitle">Description</div>

        </div>



        <div class="list-item__right list-item--material__right">

          <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>

        </div>

      </li>

    </ul>

*/

.list-item--material__icon {

  font-size: 20px;

  padding: 0 4px;

}

/*~

  name: List Item with Chevron

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item list-item--chevron">

        <div class="list-item__center">Item A</div>

      </li>

      <li class="list-item list-item--chevron">

        <div class="list-item__center">Item B</div>

        <div class="list-item__right list-item--chevron__right">

          <div class="list-item__label">Label</div>

        </div>

      </li>

    </ul>

 */

.list-item--chevron:before,

.list-item__expand-chevron {

  border-right: 2px solid #c7c7cc;

  border-bottom: 2px solid #c7c7cc;

  width: 7px;

  height: 7px;

  background-color: transparent;

  z-index: 5;

}

.list-item--chevron:before {

  position: absolute;

  content: '';

  right: 16px;

  top: 50%;

  -webkit-transform: translateY(-50%) rotate(-45deg);

          transform: translateY(-50%) rotate(-45deg);

}

.list-item__expand-chevron {

  -webkit-transform: rotate(45deg);

          transform: rotate(45deg);

  margin: 1px; /* this improves alignment with normal chevrons */

}

.list-item--expandable.expanded .list-item__expand-chevron {

  -webkit-transform: rotate(225deg);

          transform: rotate(225deg);

}

.list-item--chevron__right {

  padding-right: 30px;

}

/*~

  name: Nodivider List Item with Chevron

  category: List

  elements: ons-list ons-list-item

  markup: |

    <ul class="list">

      <li class="list-item list-item--nodivider list-item--chevron">

        <div class="list-item__center list-item--nodivider__center">Item A</div>

      </li>

      <li class="list-item list-item--nodivider list-item--chevron">

        <div class="list-item__center list-item--nodivider__center">Item B</div>

        <div class="list-item__right list-item--nodivider__right list-item--chevron__right">

          <div class="list-item__label">Label</div>

        </div>

      </li>

    </ul>

 */

/*~

  name: List item without divider

  category: List

  markup: |

    <ul class="list">

      <li class="list-item list-item--nodivider">

        <div class="list-item__center list-item--nodivider__center">Item</div>

      </li>

      <li class="list-item list-item--nodivider">

        <div class="list-item__center list-item--nodivider__center">Item</div>

      </li>

    </ul>

 */

.list-item--nodivider__center,

.list-item--nodivider__right,

.list-item--nodivider.list-item--expandable,

.list-item--expandable .list-item__center,

.list-item--expandable .list-item__right {

  border: none;

  background-image: none;

}

/*~

  name: List item with long divider

  category: List

  markup: |

    <ul class="list">

      <li class="list-item list-item--longdivider">

        <div class="list-item__center list-item--longdivider__center">Item</div>

      </li>

      <li class="list-item list-item--longdivider">

        <div class="list-item__center list-item--longdivider__center">Item</div>

      </li>

    </ul>

 */

.list-item--longdivider {

  border-bottom: 1px solid #ccc;

  border-bottom: none;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, #ccc, #ccc 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .list-item--longdivider {

    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);

  }

}

.list-item--longdivider:last-of-type {

  border: none;

  background-image: none;

}

.list-item--longdivider__center {

  border: none;

  background-image: none;

}

.list-item--longdivider__right {

  border: none;

  background-image: none;

}

/*~

  name: List title

  category: List

  markup: |

    <div class="list-title">List Title</div>

    <ul class="list">

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

      <li class="list-item">

        <div class="list-item__center">Item</div>

      </li>

    </ul>

 */

.list-title {

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: block;

  color: #6d6d72;

  text-align: left;

  box-sizing: border-box;

  padding: 0 0 0 16px;

  margin: 0;

  font-size: 0.813rem;

  font-weight: 500;

  line-height: 24px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}

/*~

  name: Material List Title

  category: List

  markup: |

    <h3 class="list-title list-title--material">LIST TITLE</h3>

    <ul class="list list--material">

      <li class="list-item list-item--material">

        <div class="list-item__center list-item--material__center">Item</div>

      </li>

      <li class="list-item list-item--material">

        <div class="list-item__center list-item--material__center">Item</div>

      </li>

    </ul>

 */

.list-title--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  color: #757575;

  font-size: 0.875rem;

  margin: 0;

  padding: 12px 0 12px 16px;

  font-weight: 500;

  line-height: 24px;

}

/*~

  name: Search Input

  category: Search Input

  markup: |

    <input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">

*/

.search-input {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  -webkit-appearance: textfield;

     -moz-appearance: textfield;

          appearance: textfield;

  box-sizing: border-box;

  height: 28px;

  font-size: 0.875rem;

  background-color: #030303;

  background-color: rgba(3, 3, 3, .09);

  box-shadow: none;

  color: #1f1f21;

  line-height: 1.3;

  padding: 0 8px 0 28px;

  margin: 0;

  border-radius: 5.5px;

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTMgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW9zLXNlYXJjaC1pbnB1dC1pY29uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImNvbXBvbmVudHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpb3Mtc2VhcmNoLWlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDguMDAwMDAwLCAtNDMuMDAwMDAwKSIgZmlsbD0iIzdBNzk3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTcyNDgyLDE1LjUwNDE0NjYgQzE3LjA3NzM2NTcsMTUuNTQwNTkzOCAxNy4xNTIyNzMxLDE1LjU5MTYxMjkgMTcuMjE3NzUxNiwxNS42NTcwOTE0IEwyMC42NDk5OTEsMTkuMDg5MzMwOCBDMjAuOTQ0ODQ0OSwxOS4zODQxODQ3IDIwLjk0ODQ3NjQsMTkuODU4NjA2IDIwLjY1MzU0MTIsMjAuMTUzNTQxMiBDMjAuMzYwNjQ4LDIwLjQ0NjQzNDQgMTkuODgxMjcxNiwyMC40NDE5MzE3IDE5LjU4OTMzMDgsMjAuMTQ5OTkxIEwxNi4xNTcwOTE0LDE2LjcxNzc1MTYgQzE2LjA5MTM3LDE2LjY1MjAzMDEgMTYuMDQwMTE3MSwxNi41NzczODc0IDE2LjAwMzQxNDEsMTYuNDk3Nzk5NSBDMTUuMTY3MTY5NCwxNy4xMjcwNDExIDE0LjEyNzEzOTMsMTcuNSAxMywxNy41IEMxMC4yMzg1NzYzLDE3LjUgOCwxNS4yNjE0MjM3IDgsMTIuNSBDOCw5LjczODU3NjI1IDEwLjIzODU3NjMsNy41IDEzLDcuNSBDMTUuNzYxNDIzNyw3LjUgMTgsOS43Mzg1NzYyNSAxOCwxMi41IEMxOCwxMy42Mjc0Njg1IDE3LjYyNjgyMzIsMTQuNjY3Nzc2OCAxNi45OTcyNDgyLDE1LjUwNDE0NjYgWiBNMTMsMTYuNSBDMTUuMjA5MTM5LDE2LjUgMTcsMTQuNzA5MTM5IDE3LDEyLjUgQzE3LDEwLjI5MDg2MSAxNS4yMDkxMzksOC41IDEzLDguNSBDMTAuNzkwODYxLDguNSA5LDEwLjI5MDg2MSA5LDEyLjUgQzksMTQuNzA5MTM5IDEwLjc5MDg2MSwxNi41IDEzLDE2LjUgWiIgaWQ9Imlvcy1zZWFyY2gtaW5wdXQtaWNvbiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');

  background-position: 8px center;

  background-repeat: no-repeat;

  background-size: 13px;

  font-weight: 400;

  display: inline-block;

  text-indent: 0;

}

.search-input::-webkit-search-cancel-button {

  -webkit-appearance: textfield;

          appearance: textfield;

  display: none;

}

.search-input::-webkit-search-decoration {

  display: none;

}

.search-input:focus {

  outline: none;

}

.search-input::-webkit-input-placeholder {

  color: #7a797b;

  font-size: 0.875rem;

  text-indent: 0;

}

.search-input:-ms-input-placeholder {

  color: #7a797b;

  font-size: 0.875rem;

  text-indent: 0;

}

.search-input::-ms-input-placeholder {

  color: #7a797b;

  font-size: 0.875rem;

  text-indent: 0;

}

.search-input::placeholder {

  color: #7a797b;

  font-size: 0.875rem;

  text-indent: 0;

}

.search-input:placeholder-shown {

}

.search-input:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*~

  name: Material Search Input

  category: Search Input

  markup: |

    <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">

*/

.search-input--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  border-radius: 2px;

  height: 48px;

  background-color: #fafafa;

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJhbmRyb2lkLXNlYXJjaC1pbnB1dC1pY29uIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM4OTg5ODkiPgogICAgICAgICAgICA8ZyBpZD0iY29tcG9uZW50cyI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibWF0ZXJpYWwtc2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ic2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ik1hdGVyaWFsL0ljb25zLWJsYWNrL3NlYXJjaCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNTAyLDYuNDkxIEwxMS43MDgsNi40OTEgTDExLjQzMiw2Ljc2NSBDMTIuNDA3LDcuOTAyIDEzLDkuMzc2IDEzLDEwLjk5MSBDMTMsMTQuNTgxIDEwLjA5LDE3LjQ5MSA2LjUsMTcuNDkxIEMyLjkxLDE3LjQ5MSAwLDE0LjU4MSAwLDEwLjk5MSBDMCw3LjQwMSAyLjkxLDQuNDkxIDYuNSw0LjQ5MSBDOC4xMTUsNC40OTEgOS41ODgsNS4wODMgMTAuNzI1LDYuMDU3IEwxMS4wMDEsNS43ODMgTDExLjAwMSw0Ljk5MSBMMTUuOTk5LDAgTDE3LjQ5LDEuNDkxIEwxMi41MDIsNi40OTEgTDEyLjUwMiw2LjQ5MSBaIE02LjUsNi40OTEgQzQuMDE0LDYuNDkxIDIsOC41MDUgMiwxMC45OTEgQzIsMTMuNDc2IDQuMDE0LDE1LjQ5MSA2LjUsMTUuNDkxIEM4Ljk4NSwxNS40OTEgMTEsMTMuNDc2IDExLDEwLjk5MSBDMTEsOC41MDUgOC45ODUsNi40OTEgNi41LDYuNDkxIEw2LjUsNi40OTEgWiIgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Ljc0NTAwMCwgOC43NDU1MDApIHNjYWxlKC0xLCAxKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtOC43NDUwMDAsIC04Ljc0NTUwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');

  background-size: 18px;

  background-position: 18px center;

  font-size: 0.875rem;

  padding: 0 24px 0 64px;

  /*Esto lo editó nico*/
  /*box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24), 0 1px 0 0 rgba(255, 255, 255, .06) inset;*/
  box-shadow: none;
  /*Fin edición nico*/

  

}

/*~

  name: Text Input

  category: Text Input

  elements: ons-input

  markup: |

    <div><input type="text" class="text-input" placeholder="text" value=""></div>

    <div><input type="text" class="text-input" placeholder="text" value="" disabled></div>

*/

.text-input {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border: none;

  background-color: transparent;

  letter-spacing: 0;

  box-shadow: none;

  color: #1f1f21;

  padding: 0;

  margin: 0;

  width: auto;

  font-size: 1rem;

  height: 31px;

  font-weight: 400;

  box-sizing: border-box;

}

.text-input::-ms-clear {

  display: none;

}

.text-input:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.text-input::-webkit-input-placeholder {

  color: #999;

}

.text-input:-ms-input-placeholder {

  color: #999;

}

.text-input::-ms-input-placeholder {

  color: #999;

}

.text-input::placeholder {

  color: #999;

}

.text-input:disabled::-webkit-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.text-input:disabled:-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.text-input:disabled::-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.text-input:disabled::placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.text-input:invalid {

  border: none;

  background-color: transparent;

  color: #1f1f21;

}

/*~

  name: Underbar Text Input

  category: Text Input

  elements: ons-input

  markup: |

    <div><input type="text" class="text-input text-input--underbar" placeholder="text" value=""></div>

    <div><input type="text" class="text-input text-input--underbar" placeholder="text" value="" disabled></div>

*/

.text-input--underbar {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border: none;

  background-color: transparent;

  letter-spacing: 0;

  box-shadow: none;

  color: #1f1f21;

  padding: 0;

  margin: 0;

  width: auto;

  font-size: 1rem;

  height: 31px;

  font-weight: 400;

  box-sizing: border-box;

  border: none;

  background-color: transparent;

  border-bottom: 1px solid #ccc;

  border-radius: 0;

}

.text-input--underbar:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

  border: none;

  background-color: transparent;

  border-bottom: 1px solid #ccc;

}

.text-input--underbar:disabled::-webkit-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.text-input--underbar:disabled:-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.text-input--underbar:disabled::-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.text-input--underbar:disabled::placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.text-input--underbar:invalid {

  border: none;

  color: #1f1f21;

  background-color: transparent;

  background-image: linear-gradient(#fe3d3d, #fe3d3d), linear-gradient(to top, transparent 1px, #afafaf 1px);

}

/*~

  name: Material Input

  category: Text Input

  elements: ons-input

  markup: |

    <span>

      <div><input class="text-input text-input--material" placeholder="Username" type="text" required></div>

      <br />

      <div><input class="text-input text-input--material" placeholder="Password" type="password" required></div>

    </span>

*/

.text-input--material {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  color: #212121;

  background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);

  background-size: 100% 2px;

  background-repeat: no-repeat;

  background-position: center bottom;

  background-color: transparent;

  font-size: 1rem;

  font-weight: 400;

  border: none;

  padding-bottom: 2px;

  border-radius: 0;

  height: 24px;

  vertical-align: middle;

  -webkit-transform: translate3d(0, 0, 0); /* FIXME: prevent ios flicker */

}

.text-input--material__label {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  color: #afafaf;

  position: absolute;

  left: 0;

  top: 2px;

  font-size: 1rem;

  font-weight: 400;

  pointer-events: none;

}

.text-input--material.ng-invalid{

  background-image: linear-gradient(#ff6161, #ff6161), linear-gradient(to top, transparent 1px, #afafaf 1px)!important;

}

.text-input--material__label--active {

  color: #3d5afe;

  -webkit-transform: translate(0, -75%) scale(0.75);

          transform: translate(0, -75%) scale(0.75);

  -webkit-transform-origin: left top;

          transform-origin: left top;

  transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;

  transition: transform 0.1s ease-in, color 0.1s ease-in;

  transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;

}

.text-input--material:focus {

  background-image:

    linear-gradient(#3d5afe, #3d5afe),

    linear-gradient(to top, transparent 1px, #afafaf 1px);

  -webkit-animation: material-text-input-animate 0.3s forwards;

          animation: material-text-input-animate 0.3s forwards;

}

.text-input--material:invalid:focus {

  background-image: linear-gradient(#fe3d3d, #fe3d3d), linear-gradient(to top, transparent 1px, #afafaf 1px);

}



.text-input--material::-webkit-input-placeholder {

  color: #afafaf;

  line-height: 20px;

}

.text-input--material:-ms-input-placeholder {

  color: #afafaf;

  line-height: 20px;

}

.text-input--material::-ms-input-placeholder {

  color: #afafaf;

  line-height: 20px;

}

.text-input--material::placeholder {

  color: #afafaf;

  line-height: 20px;

}

@-webkit-keyframes material-text-input-animate {

  0% {

    background-size: 0% 2px, 100% 2px;

  }



  100% {

    background-size: 100% 2px, 100% 2px;

  }

}

@keyframes material-text-input-animate {

  0% {

    background-size: 0% 2px, 100% 2px;

  }



  100% {

    background-size: 100% 2px, 100% 2px;

  }

}

/*~

  name: Textarea

  category: Textarea

  markup: |

    <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>

*/

.textarea {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  vertical-align: top;

  resize: none;

  outline: none;

  padding: 5px 5px 5px 5px;

  font-size: 1rem;

  font-weight: 400;

  border-radius: 4px;

  border: 1px solid #ccc;

  background-color: #efeff4;

  color: #1f1f21;

  letter-spacing: 0;

  box-shadow: none;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  width: auto;

}

.textarea:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.textarea::-webkit-input-placeholder {

  color: #999;

}

.textarea:-ms-input-placeholder {

  color: #999;

}

.textarea::-ms-input-placeholder {

  color: #999;

}

.textarea::placeholder {

  color: #999;

}

/*~

  name: Textarea Transparent

  category: Textarea

  markup: |

    <textarea class="textarea textarea--transparent" rows="3" placeholder="Textarea"></textarea>

*/

.textarea--transparent {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  vertical-align: top;

  resize: none;

  outline: none;

  padding: 5px 5px 5px 5px;

  padding-left: 0;

  padding-right: 0;

  font-size: 1rem;

  font-weight: 400;

  border-radius: 4px;

  border: none;

  background-color: transparent;

  color: #1f1f21;

  letter-spacing: 0;

  box-shadow: none;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  width: auto;

}

.textarea--transparent:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

.textarea--transparent::-webkit-input-placeholder {

  color: #999;

}

.textarea--transparent:-ms-input-placeholder {

  color: #999;

}

.textarea--transparent::-ms-input-placeholder {

  color: #999;

}

.textarea--transparent::placeholder {

  color: #999;

}

/*~

  name: Dialog

  category: Dialog

  elements: ons-dialog

  markup: |

    <div class="dialog-mask"></div>

    <div class="dialog">

      <div class="dialog-container">

        <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>

      </div>

    </div>

*/

.dialog {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  margin: auto auto;

  overflow: hidden;

  min-width: 270px;

  min-height: 100px;

  text-align: left;

}

.dialog-container {

  height: inherit;

  min-height: inherit;

  overflow: hidden;

  border-radius: 4px;

  background-color: #f4f4f4;

  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');

  color: #1f1f21;

}

.dialog-mask {

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .2);

}

/*~

  name: Material Dialog

  category: Dialog

  elements: ons-dialog

  markup: |

    <div class="dialog-mask dialog-mask--material"></div>

    <div class="dialog dialog--material">

      <div class="dialog dialog-container--material">

        <p style="margin-left:24px;margin-right:24px">The quick brown fox jumps over the lazy dog.</p>

      </div>

    </div>

*/

.dialog--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  text-align: left;

  box-shadow:

      0 16px 24px 2px rgba(0, 0, 0, .14),

      0 6px 30px 5px rgba(0, 0, 0, .12),

      0 8px 10px -5px rgba(0, 0, 0, .4);

}

.dialog-container--material {

  border-radius: 2px;

  background-color: #ffffff;

  color: #1f1f21;

}

.dialog-mask--material {

  background-color: #000000;

  background-color: rgba(0, 0, 0, .3);

}

/*~

  name: Alert Dialog

  category: Alert Dialog

  elements: ons-alert-dialog

  markup: |

    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog">

      <div class="alert-dialog-container">

        <div class="alert-dialog-title">Alert</div>



        <div class="alert-dialog-content">

          Hello World!

        </div>



        <div class="alert-dialog-footer">

          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>

        </div>

      </div>

    </div>

*/

.alert-dialog {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  width: 270px;

  margin: auto;

  background-color: #f4f4f4;

  border-radius: 8px;

  overflow: visible;

  max-width: 95%;

  color: #1f1f21;

}

.alert-dialog-container {

  height: inherit;

  padding-top: 16px;

  overflow: hidden;

}

.alert-dialog-title {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  font-size: 1.063rem;

  font-weight: 500;

  padding: 0 8px;

  text-align: center;

  color: #1f1f21;

}

.alert-dialog-content {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 4px 12px 8px;

  font-size: 0.875rem;

  min-height: 36px;

  text-align: center;

  color: #1f1f21;

}

.alert-dialog-footer {

  width: 100%;

}

.alert-dialog-button {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  text-decoration: none;

  letter-spacing: 0;

  vertical-align: middle;

  border: none;

  border-top: 1px solid #ddd;

  font-size: 1rem;

  padding: 0 8px;

  margin: 0;

  display: block;

  width: 100%;

  background-color: transparent;

  text-align: center;

  height: 44px;

  line-height: 44px;

  outline: none;

  color: #0076ff;

  color: #5b2add;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .alert-dialog-button {

    border-top: none;

    background-size: 100% 1px;

    background-repeat: no-repeat;

    background-position: top;

    background-image: linear-gradient(180deg, #ddd, #ddd 50%, transparent 50%);

  }

}

.alert-dialog-button:active {

  background-color: #000000;

  background-color: rgba(0, 0, 0, .05);

}

.alert-dialog-button--primal {

  font-weight: 500;

}

.alert-dialog-footer--rowfooter {

  white-space: nowrap;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: wrap;

          flex-wrap: wrap;

}

.alert-dialog-button--rowfooter {

  -webkit-box-flex: 1;

  -webkit-flex: 1;

          flex: 1;

  display: block;

  width: 100%;

  border-left: 1px solid #ddd;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .alert-dialog-button--rowfooter {

    border-top: none;

    border-left: none;

    background-size: 100% 1px, 1px 100%;

    background-repeat: no-repeat;

    background-position: top, left;

    background-image:

      linear-gradient(0deg, transparent, transparent 50%, #ddd 50%),

      linear-gradient(90deg, transparent, transparent 50%, #ddd 50%);

  }

}

.alert-dialog-button--rowfooter:first-child {

  border-left: none;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .alert-dialog-button--rowfooter:first-child {

    border-top: none;

    background-size: 100% 1px;

    background-repeat: no-repeat;

    background-position: top, left;

    background-image: linear-gradient(0deg, transparent, transparent 50%, #ddd 50%);

  }

}

.alert-dialog-mask {

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .2);

}

/*~

  name: Alert Dialog without Title

  category: Alert Dialog

  elements: ons-alert-dialog

  markup: |

    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog">

      <div class="alert-dialog-container">

        <div class="alert-dialog-content">

          Hello World!

        </div>



        <div class="alert-dialog-footer">

          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>

        </div>

      </div>

    </div>

*/

/*~

  name: Alert Dialog with Multiple Buttons

  category: Alert Dialog

  elements: ons-alert-dialog

  markup: |

    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog">

      <div class="alert-dialog-container">

        <div class="alert-dialog-content">

          Hello World!

        </div>



        <div class="alert-dialog-footer">

          <button class="alert-dialog-button">Cancel</button>

          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>

        </div>

      </div>

    </div>

*/

/*~

  name: Alert Dialog with Multiple Buttons 2

  category: Alert Dialog

  elements: ons-alert-dialog

  markup: |

    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog">

      <div class="alert-dialog-container">

        <div class="alert-dialog-title">Alert</div>



        <div class="alert-dialog-content">

          Hello World!

        </div>



        <div class="alert-dialog-footer alert-dialog-footer--rowfooter">

          <button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>

          <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>

          <button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>

        </div>

      </div>

    </div>

*/

/*~

  name: Material Alert Dialog

  category: Alert Dialog

  elements: ons-alert-dialog

  markup: |

    <div class="alert-dialog-mask alert-dialog-mask--material"></div>

    <div class="alert-dialog alert-dialog--material">

      <div class="alert-dialog-container alert-dialog-container--material">

        <div class="alert-dialog-title alert-dialog-title--material">

          Dialog title

        </div>

        <div class="alert-dialog-content alert-dialog-content--material">

          Some dialog content.

        </div>

        <div class="alert-dialog-footer alert-dialog-footer--material">

          <button class="alert-dialog-button alert-dialog-button--material">OK</button>

          <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>

        </div>

      </div>

    </div>

*/

.alert-dialog--material {

  border-radius: 2px;

  background-color: #ffffff;

}

.alert-dialog-container--material {

  padding: 22px 0 0 0;

  box-shadow:

      0 16px 24px 2px rgba(0, 0, 0, .14),

      0 6px 30px 5px rgba(0, 0, 0, .12),

      0 8px 10px -5px rgba(0, 0, 0, .4);

}

.alert-dialog-title--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  text-align: left;

  font-size: 1.25rem;

  font-weight: 500;

  padding: 0 24px;

  color: #31313a;

}

.alert-dialog-content--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  text-align: left;

  font-size: 1rem;

  font-weight: 400;

  line-height: 20px;

  padding: 0 24px;

  margin: 24px 0 10px 0;

  min-height: 0;

  color: #31313a;

  color: rgba(49, 49, 58, .85);

}

.alert-dialog-footer--material {

  display: block;

  padding: 0;

  height: 52px;

  box-sizing: border-box;

  margin: 0;

  line-height: 1;

}

.alert-dialog-button--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  text-transform: uppercase;

  display: inline-block;

  width: auto;

  float: right;

  background: none;

  border: none;

  border-radius: 2px;

  font-size: 0.875rem;

  font-weight: 500;

  outline: none;

  height: 36px;

  line-height: 36px;

  padding: 0 8px;

  margin: 8px 8px 8px 0;

  box-sizing: border-box;

  min-width: 50px;

  color: #37474f;

  color: #37474f;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .alert-dialog-button--material {

    background: none;

  }

}

.alert-dialog-button--material:active {

  background-color: transparent;

  background-color: initial;

}

/* stylelint-disable */

.alert-dialog-button--rowfooter--material,

.alert-dialog-button--rowfooter--material:first-child { /* stylelint-enable */

  border: 0;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .alert-dialog-button--rowfooter--material,

.alert-dialog-button--rowfooter--material:first-child {

    background: none;

  }

}

/* stylelint-disable */

.alert-dialog-button--primal--material { /* stylelint-enable */

  font-weight: 500;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .alert-dialog-button--primal--material {

    background: none;

  }

}

.alert-dialog-mask--material {

  background-color: #000000;

  background-color: rgba(0, 0, 0, .3);

}

/*~

  name: Popover

  category: Popover

  elements: ons-popover

  markup: |

    <div class="popover-mask"></div>

    <div class="popover popover--bottom" style="bottom: 20px; left: 65px;">

      <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"></div>

      <div class="popover__content popover--bottom__content">

        <div style="text-align:center;opacity:0.8;margin-top:40px">Content</div>

      </div>

    </div>

*/

/*~

  name: Popover(top)

  category: Popover

  elements: ons-popover

  markup: |

    <div class="popover-mask"></div>

    <div class="popover popover--top" style="top: 20px; left: 50px;">

      <div class="popover__arrow popover--top__arrow" style="margin-left: 110px;"></div>

      <div class="popover__content popover--top__content">

        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>

      </div>

    </div>

*/

/*~

  name: Popover(left)

  category: Popover

  elements: ons-popover

  markup: |

    <div class="popover-mask"></div>

    <div class="popover popover--right" style="top: 20px; right: 20px;">

      <div class="popover__arrow popover--right__arrow" style="bottom: 50px;"></div>

      <div class="popover__content popover--right__content">

        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>

      </div>

    </div>

*/

/*~

  name: Popover(right)

  category: Popover

  elements: ons-popover

  markup: |

    <div class="popover-mask"></div>

    <div class="popover popover--left" style="top: 20px;left: 20px;">

      <div class="popover__arrow popover--left__arrow" style="top: 50px;"></div>

      <div class="popover__content popover--left__content">

        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>

      </div>

    </div>

*/

.popover {

  position: absolute;

  z-index: 20001;

}

.popover--bottom {

  bottom: 0;

}

.popover--top {

  top: 0;

}

.popover--left {

  left: 0;

}

.popover--right {

  right: 0;

}

.popover-mask {

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .2);

  position: absolute;

  z-index: 19999;

}

.popover__content {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: block;

  width: 220px;

  overflow: auto;

  min-height: 100px;

  max-height: 100%;

  background-color: white;

  border-radius: 8px;

  color: #1f1f21;

  pointer-events: auto;

}

.popover--top__content {



}

.popover--bottom__content {



}

.popover--left__content {



}

.popover--right__content {



}

.popover__arrow {

  position: absolute;

  width: 18px;

  height: 18px;

  -webkit-transform-origin: 50% 50% 0;

          transform-origin: 50% 50% 0;

  background-color: transparent;

  background-image: linear-gradient(45deg, white, white 50%, transparent 50%);

  border-radius: 0 0 0 4px;

  margin: 0;

  z-index: 20001;

}

/* NOTE: If you changed this properties, you should check if ons-popover is broken. */

.popover--bottom__arrow {

  -webkit-transform: translateY(6px) translateX(-9px) rotate(-45deg);

          transform: translateY(6px) translateX(-9px) rotate(-45deg);

  bottom: 0;

  margin-right: -18px;

}

.popover--top__arrow {

  -webkit-transform: translateY(-6px) translateX(-9px) rotate(135deg);

          transform: translateY(-6px) translateX(-9px) rotate(135deg);

  top: 0;

  margin-right: -18px;

}

.popover--left__arrow {

  -webkit-transform: translateX(-6px) translateY(-9px) rotate(45deg);

          transform: translateX(-6px) translateY(-9px) rotate(45deg);

  left: 0;

  margin-bottom: -18px;

}

.popover--right__arrow {

  -webkit-transform: translateX(6px) translateY(-9px) rotate(225deg);

          transform: translateX(6px) translateY(-9px) rotate(225deg);

  right: 0;

  margin-bottom: -18px;

}

/*~

  name: Material Popover

  category: Popover

  elements: ons-popover

  markup: |

    <div class="popover-mask popover-mask--material"></div>

    <div class="popover popover--material popover--left" style="top: 50px; left: 65px;">

      <div class="popover__arrow popover--material__arrow popover--left__arrow"></div>

      <div class="popover__content popover--material__content popover--left__content">

        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>

      </div>

    </div>

*/

.popover--material {

}

.popover-mask--material {

  background-color: transparent;

}

.popover--material__content {

  background-color: #fafafa;

  border-radius: 2px;

  color: #1f1f21;

  box-shadow:

      0 2px 2px 0 rgba(0, 0, 0, .14),

      0 1px 5px 0 rgba(0, 0, 0, .12),

      0 3px 1px -2px rgba(0, 0, 0, .2);

}

.popover--material__arrow {

  display: none;

}

/*~

  name: Progress Bar

  category: Progress Bar

  elements: ons-progress-bar

  markup: |

    <div class="progress-bar">

      <div class="progress-bar__primary" style="width: 30%"></div>

    </div>

    <br />

    <div class="progress-bar">

      <div class="progress-bar__primary" style="width:20%"></div>

      <div class="progress-bar__secondary" style="width:76%"></div>

    </div>

    <br />

    <div class="progress-bar progress-bar--indeterminate">

    </div>

*/

.progress-bar {

  position: relative;

  height: 2px;

  display: block;

  width: 100%;

  background-color: transparent;

  background-clip: padding-box;

  margin: 0;

  overflow: hidden;

  border-radius: 4px;

}

.progress-bar__primary,

.progress-bar__secondary {

  position: absolute;

  background-color: #0076ff;

  background-color: #5b2add;

  top: 0;

  bottom: 0;

  transition: width .3s linear;

  z-index: 100;

  border-radius: 4px;

}

.progress-bar__secondary {

  background-color: #65adff;

  z-index: 0;

}

.progress-bar--indeterminate:before {

  content: '';

  position: absolute;

  background-color: #0076ff;

  background-color: #5b2add;

  top: 0;

  left: 0;

  bottom: 0;

  will-change: left, right;

  -webkit-animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;

          animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;

  border-radius: 4px;

}

.progress-bar--indeterminate:after {

  content: '';

  position: absolute;

  background-color: #0076ff;

  background-color: #5b2add;

  top: 0;

  left: 0;

  bottom: 0;

  will-change: left, right;

  -webkit-animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;

          animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;

  -webkit-animation-delay: 1.15s;

          animation-delay: 1.15s;

  border-radius: 4px;

}

@-webkit-keyframes progress-bar__indeterminate {

  0% {

    left: -35%;

    right: 100%;

  }



  60% {

    left: 100%;

    right: -90%;

  }



  100% {

    left: 100%;

    right: -90%;

  }

}

@keyframes progress-bar__indeterminate {

  0% {

    left: -35%;

    right: 100%;

  }



  60% {

    left: 100%;

    right: -90%;

  }



  100% {

    left: 100%;

    right: -90%;

  }

}

@-webkit-keyframes progress-bar__indeterminate-short {

  0% {

    left: -200%;

    right: 100%;

  }



  60% {

    left: 107%;

    right: -8%;

  }



  100% {

    left: 107%;

    right: -8%;

  }

}

@keyframes progress-bar__indeterminate-short {

  0% {

    left: -200%;

    right: 100%;

  }



  60% {

    left: 107%;

    right: -8%;

  }



  100% {

    left: 107%;

    right: -8%;

  }

}

/*~

  name: Material Progress Bar

  category: Progress Bar

  elements: ons-progress-bar

  markup: |

    <div class="progress-bar progress-bar--material">

      <div class="progress-bar__primary progress-bar--material__primary" style="width: 30%"></div>

    </div>

    <br />

    <div class="progress-bar progress-bar--material">

      <div class="progress-bar__primary progress-bar--material__primary" style="width:20%"></div>

      <div class="progress-bar__secondary progress-bar--material__secondary" style="width:76%"></div>

    </div>

    <br />

    <div class="progress-bar progress-bar--material progress-bar--indeterminate">

    </div>

*/

.progress-bar--material {

  height: 4px;

  background-color: transparent;

  border-radius: 0;

}

.progress-bar--material__primary,

.progress-bar--material__secondary {

  background-color: #37474f;

  background-color: #37474f;

  border-radius: 0;

}

.progress-bar--material__secondary {

  background-color: #548ba7;

  z-index: 0;

}

.progress-bar--material.progress-bar--indeterminate:before { /* FIXME */

  background-color: #37474f;

  background-color: #37474f;

  border-radius: 0;

}

.progress-bar--material.progress-bar--indeterminate:after { /* FIXME */

  background-color: #37474f;

  background-color: #37474f;

  border-radius: 0;

}

/*~

  name: Progress Circle

  category: Progress Circle

  elements: ons-progress-circular

  markup: |

    <svg class="progress-circular progress-circular--indeterminate">

      <circle class="progress-circular__background"/>

      <circle class="progress-circular__primary progress-circular--indeterminate__primary"/>

      <circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>

    </svg>



    <svg class="progress-circular">

      <circle class="progress-circular__background"/>

      <circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>

      <circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>

    </svg>



    <svg class="progress-circular">

      <circle class="progress-circular__background"/>

      <circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>

    </svg>

*/

.progress-circular {

  height: 32px;

  position: relative;

  width: 32px;

  -webkit-transform: rotate(270deg);

          transform: rotate(270deg);

  -webkit-animation: none;

          animation: none;

}

.progress-circular__background,

.progress-circular__primary,

.progress-circular__secondary {

  cx: 50%;

  cy: 50%;

  r: 40%;

  -webkit-animation: none;

          animation: none;

  fill: none;

  stroke-width: 5%;

  stroke-miterlimit: 10;

}

.progress-circular__background {

  stroke: transparent;

}

.progress-circular__primary {

  stroke-dasharray: 1, 200;

  stroke-dashoffset: 0;

  stroke: #0076ff;

  stroke: #5b2add;

  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);

}

.progress-circular__secondary {

  stroke: #65adff;

}

.progress-circular--indeterminate {

  -webkit-animation: progress__rotate 2s linear infinite;

          animation: progress__rotate 2s linear infinite;

  -webkit-transform: none;

          transform: none;

}

.progress-circular--indeterminate__primary {

  -webkit-animation: progress__dash 1.5s ease-in-out infinite;

          animation: progress__dash 1.5s ease-in-out infinite;

}

.progress-circular--indeterminate__secondary {

  display: none;

}

@-webkit-keyframes progress__rotate {

  100% {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg);

  }

}

@keyframes progress__rotate {

  100% {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg);

  }

}

@-webkit-keyframes progress__dash {

  0% {

    stroke-dasharray: 10%, 241.32%;

    stroke-dashoffset: 0;

  }



  50% {

    stroke-dasharray: 201%, 50.322%;

    stroke-dashoffset: -100%;

  }



  100% {

    stroke-dasharray: 10%, 241.32%;

    stroke-dashoffset: -251.32%;

  }

}

@keyframes progress__dash {

  0% {

    stroke-dasharray: 10%, 241.32%;

    stroke-dashoffset: 0;

  }



  50% {

    stroke-dasharray: 201%, 50.322%;

    stroke-dashoffset: -100%;

  }



  100% {

    stroke-dasharray: 10%, 241.32%;

    stroke-dashoffset: -251.32%;

  }

}

/*~

  name: Material Progress Circle

  category: Progress Circle

  elements: ons-progress-circular

  markup: |

    <svg class="progress-circular progress-circular--material progress-circular--indeterminate">

      <circle class="progress-circular__background progress-circular--material__background"/>

      <circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>

      <circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>

    </svg>



    <svg class="progress-circular progress-circular--material">

      <circle class="progress-circular__background progress-circular--material__background"/>

      <circle class="progress-circular__secondary progress-circular--material__secondary" style="stroke-dasharray: 140%, 251.32%"/>

      <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 100%, 251.32%"/>

    </svg>



    <svg class="progress-circular progress-circular--material">

      <circle class="progress-circular__background progress-circular--material__background"/>

      <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 80%, 251.32%"/>

    </svg>

*/

.progress-circular--material__background,

.progress-circular--material__primary,

.progress-circular--material__secondary {

  stroke-width: 9%;

}

.progress-circular--material__background {

  stroke: transparent;

}

.progress-circular--material__primary {

  stroke: #37474f;

  stroke: #37474f;

}

.progress-circular--material__secondary {

  stroke: #548ba7;

}

/*~

  name: Fab

  category: Fab

  elements: ons-fab

  markup: |

    <button class="fab"><i class="zmdi zmdi-car"></i></button>

    <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>

*/

.fab-1{

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  width: 56px;

  height: 56px;

  text-decoration: none;

  font-size: 25px;

  line-height: 56px;

  letter-spacing: 0;

  color: #ffffff;

  vertical-align: middle;

  text-align: center;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 50%;

  overflow: hidden;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .12);

  transition: all 0.1s linear;

}

.fab:active {

  box-shadow: 0 3px 6 rgba(0, 0, 0, .12);

  background-color: #0076ff;

  background-color: #5b2add;

  background-color: rgba(0, 118, 255, 0.7);

  transition: all 0.2s ease;

  box-shadow: 0 0 6 rgba(0, 0, 0, .12);

}

.fab:focus {

  outline: 0;

}

.fab__icon {

  position: relative;

  overflow: hidden;

  height: 100%;

  width: 100%;

  display: block;

  border-radius: 100%;

  padding: 0;

  z-index: 100;

  line-height: 56px;

}

.fab:disabled,

.fab[disabled] {

  background-color: #000000;

  background-color: rgba(0, 0, 0, 0.5);

  box-shadow: none;

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*~

  name: Material Fab

  category: Fab

  elements: ons-fab

  markup: |

    <button class="fab fab--material"><i class="zmdi zmdi-car"></i></button>

    <button class="fab fab--material" disabled><i class="zmdi zmdi-car"></i></button>

*/

.fab--material {

  position: relative;

  display: inline-block;

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  width: 56px;

  height: 56px;

  text-decoration: none;

  font-size: 25px;

  line-height: 56px;

  letter-spacing: 0;

  color: #ffffff;

  vertical-align: middle;

  text-align: center;

  background-color: #0076ff;

  background-color: #5b2add;

  border: 0 solid currentColor;

  border-radius: 50%;

  overflow: hidden;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .12);

  transition: all 0.1s linear;

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  width: 56px;

  height: 56px;

  text-decoration: none;

  font-size: 25px;

  line-height: 56px;

  color: #31313a;

  background-color: #ffffff;

  box-shadow:

      0 4px 5px 0 rgba(0, 0, 0, .14),

      0 1px 10px 0 rgba(0, 0, 0, .12),

      0 2px 4px -1px rgba(0, 0, 0, .4);

  transition: all 0.2s ease-in-out;

}

.fab--material:active {

  box-shadow:

      0 8px 10px 1px rgba(0, 0, 0, .14),

      0 3px 14px 2px rgba(0, 0, 0, .12),

      0 5px 5px -3px rgba(0, 0, 0, .4);

  background-color: #ffffff;

  background-color: rgba(255, 255, 255, .75);

  transition: all 0.2s ease;

}

.fab--material:focus {

  outline: 0;

}

.fab--material__icon {

  position: relative;

  overflow: hidden;

  height: 100%;

  width: 100%;

  display: block;

  border-radius: 100%;

  padding: 0;

  z-index: 100;

  line-height: 56px;

}

.fab--material:disabled,

.fab--material[disabled] {

  background-color: #000000;

  background-color: rgba(0, 0, 0, 0.5);

  box-shadow: none;

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

}

/*~

  name: Fab Mini

  category: Fab

  elements: ons-fab

  markup: |

    <button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>

    <button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>

*/

/*~

  name: Material Fab Mini

  category: Fab

  elements: ons-fab

  markup: |

    <button class="fab fab--material fab--mini"><i class="zmdi zmdi-plus"></i></button>

    <button class="fab fab--material fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>

*/

.fab--mini {

  width: 40px;

  height: 40px;

  line-height: 40px;

}

.fab--mini__icon {

  line-height: 40px;

}

.speed-dial__item {

  position: absolute;

  -webkit-transform: scale(0);

          transform: scale(0);

}

.fab--top__right {

  top: 20px;

  bottom: auto;

  right: 20px;

  left: auto;

  position: absolute;

}

.fab--bottom__right {

  top: auto;

  bottom: 20px;

  right: 20px;

  left: auto;

  position: absolute;

}

.fab--top__left {

  top: 20px;

  bottom: auto;

  right: auto;

  left: 20px;

  position: absolute;

}

.fab--bottom__left {

  top: auto;

  bottom: 20px;

  right: auto;

  left: 20px;

  position: absolute;

}

.fab--top__center {

  top: 20px;

  bottom: auto;

  margin-left: -28px;

  left: 50%;

  right: auto;

  position: absolute;

}

.fab--bottom__center {

  top: auto;

  bottom: 20px;

  margin-left: -28px;

  left: 50%;

  right: auto;

  position: absolute;

}

/*~

  name: Modal

  category: Modal

  elements: ons-modal

  markup: |

    <div class="modal">

      <div class="modal__content">

        Message Text

      </div>

    </div>

*/

.modal {

  box-sizing: border-box;

  background-clip: padding-box;

  white-space: nowrap;

  overflow: hidden;

  word-spacing: 0;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  box-sizing: border-box;

  background-clip: padding-box;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  overflow: hidden;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .7);

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  display: table;

  z-index: 2147483647;

}

.modal__content {

  box-sizing: border-box;

  background-clip: padding-box;

  white-space: nowrap;

  overflow: hidden;

  word-spacing: 0;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  line-height: normal;

  box-sizing: border-box;

  background-clip: padding-box;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

  color: #fff;

  white-space: normal;

}

/*~

  name: Select Input

  category: Select Input

  markup: |

    <select class="select-input">

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>



    &nbsp;



    <select class="select-input" disabled>

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>

*/

.select-input {

  box-sizing: border-box;

  background-clip: padding-box;

  padding: 0;

  margin: 0;

  font: inherit;

  color: inherit;

  background: transparent;

  border: none;

  vertical-align: top;

  outline: none;

  line-height: 1;

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  border: none;

  background-color: transparent;

  position: relative;

  font-size: 17px;

  height: 32px;

  line-height: 32px;

  border-color: #ccc;

  color: #1f1f21;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  display: inline-block;

  border-radius: 0;

  border: none;

  padding: 0 20px 0 0;

  background-color: transparent;

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');

  background-repeat: no-repeat;

  background-position: right center;

  border-bottom: none;

}

.select-input::-ms-clear {

  display: none;

}

.select-input::-webkit-input-placeholder {

  color: #999;

}

.select-input:-ms-input-placeholder {

  color: #999;

}

.select-input::-ms-input-placeholder {

  color: #999;

}

.select-input::placeholder {

  color: #999;

}

.select-input:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

  border: none;

  background-color: transparent;

}

.select-input:disabled::-webkit-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.select-input:disabled:-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.select-input:disabled::-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.select-input:disabled::placeholder {

  border: none;

  background-color: transparent;

  color: #999;

}

.select-input:invalid {

  border: none;

  background-color: transparent;

  color: #1f1f21;

}

.select-input[multiple] {

  height: 64px;

}

/*~

  name: Material Select Input

  category: Select Input

  markup: |

    <select class="select-input select-input--material">

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>



    &nbsp;



    <select class="select-input select-input--material" disabled>

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>

*/

.select-input--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  color: #1f1f21;

  font-size: 15px;

  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4='), linear-gradient(to top, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 50%);

  background-size: auto, 100% 1px;

  background-repeat: no-repeat;

  background-position: right center, left bottom;

  border: none;

  font-weight: 400;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0); /* prevent ios flicker */

}





.select-input--material.ng-invalid{

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), linear-gradient(to top, #ff6161 50%, #ff6161 50%)!important;

  background-size: auto, 100% 2px!important;

}

.select-input--material__label {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  color: #000000;

  color: rgba(0, 0, 0, .81);

  position: absolute;

  left: 0;

  top: 2px;

  font-size: 16px;

  pointer-events: none;

}

.select-input--material__label--active {

  color: #000000;

  color: rgba(0, 0, 0, .15);

  -webkit-transform: translate(0, -75%) scale(0.75);

          transform: translate(0, -75%) scale(0.75);

  -webkit-transform-origin: left top;

          transform-origin: left top;

  transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;

  transition: transform 0.1s ease-in, color 0.1s ease-in;

  transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;

}

.select-input--material::-webkit-input-placeholder {

  color: #000000;

  color: rgba(0, 0, 0, .81);

  line-height: 20px;

}

.select-input--material:-ms-input-placeholder {

  color: #000000;

  color: rgba(0, 0, 0, .81);

  line-height: 20px;

}

.select-input--material::-ms-input-placeholder {

  color: #000000;

  color: rgba(0, 0, 0, .81);

  line-height: 20px;

}

.select-input--material::placeholder {

  color: #000000;

  color: rgba(0, 0, 0, .81);

  line-height: 20px;

}

@-webkit-keyframes material-select-input-animate {

  0% {

    background-size: 0% 2px, 100% 2px;

  }



  100% {

    background-size: 100% 2px, 100% 2px;

  }

}

@keyframes material-select-input-animate {

  0% {

    background-size: 0% 2px, 100% 2px;

  }



  100% {

    background-size: 100% 2px, 100% 2px;

  }

}

/*~

  name: Underbar Select Input

  category: Select Input

  markup: |

    <select class="select-input select-input--underbar">

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>



    &nbsp;



    <select class="select-input select-input--underbar" disabled>

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>

*/

.select-input--underbar {

  border: none;

  border-bottom: 1px solid #ccc;

}

.select-input--underbar:disabled {

  opacity: 0.3;

  cursor: default;

  pointer-events: none;

  border: none;

  background-color: transparent;

  border: none;

  background-color: transparent;

  border-bottom: 1px solid #ccc;

}

.select-input--underbar:disabled::-webkit-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.select-input--underbar:disabled:-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.select-input--underbar:disabled::-ms-input-placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.select-input--underbar:disabled::placeholder {

  border: none;

  background-color: transparent;

  color: #999;

  border: none;

  background-color: transparent;

}

.select-input--underbar:invalid {

  border: none;

  background-color: transparent;

  color: #1f1f21;

  border: none;

  background-color: transparent;

  border-bottom: 1px solid #ccc;

}

/*~

  name: Action Sheet

  category: Action Sheet

  markup: |

    <div class="action-sheet-mask"></div>

    <div class="action-sheet">

      <div class="action-sheet-title">Title</div>

      <button class="action-sheet-button">Label</button>

      <button class="action-sheet-button">Cancel</button>

    </div>

*/

/*~

  name: Action Sheet with Delete Label

  category: Action Sheet

  markup: |

    <div class="action-sheet-mask"></div>

    <div class="action-sheet">

      <button class="action-sheet-button">Label</button>

      <button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>

      <button class="action-sheet-button">Cancel</button>

    </div>

*/

.action-sheet {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  cursor: default;

  position: absolute;

  left: 10px; /* iOS 9, 10, 11 */

  right: 10px; /* iOS 9, 10, 11 */

  bottom: 10px; /* iOS 9, 10, 11 */

  z-index: 2;

}

.action-sheet-button {

  box-sizing: border-box;

  height: 56px;

  font-size: 1.25rem;

  text-align: center;

  color: #0076ff;

  color: #5b2add;

  background-color: #ffffff;

  background-color: rgba(255, 255, 255, .9);

  border-radius: 0;

  line-height: 56px;

  border: none;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  display: block;

  width: 100%;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .action-sheet-button {

    background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 50%, transparent 50%);

  }

}

.action-sheet-button:first-child {

  border-top-left-radius: 12px;

  border-top-right-radius: 12px;

}

.action-sheet-button:active {

  background-color: #e9e9e9;

  background-image: none;

}

.action-sheet-button:focus {

  outline: none;

}

.action-sheet-button:nth-last-of-type(2) {

  border-bottom-right-radius: 12px;

  border-bottom-left-radius: 12px;

  background-image: none;

}

.action-sheet-button:last-of-type {

  border-radius: 12px;

  margin: 8px 0 0 0; /* iOS 9, 10, 11 */

  background-color: #fff;

  background-image: none;

  font-weight: 600;

}

.action-sheet-button:last-of-type:active {

  background-color: #e9e9e9;

}

.action-sheet-button--destructive {

  color: #fe3824;

}

.action-sheet-title {

  box-sizing: border-box;

  height: 56px;

  font-size: 0.813rem;

  color: #8f8e94;

  text-align: center;

  background-color: #ffffff;

  background-color: rgba(255, 255, 255, .9);

  line-height: 56px;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  background-size: 100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

  background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {



  .action-sheet-title {

    background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 50%, transparent 50%);

  }

}

.action-sheet-title:first-child {

  border-top-left-radius: 12px;

  border-top-right-radius: 12px;

}

.action-sheet-icon {

  display: none;

}

.action-sheet-mask {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .1);

  z-index: 1;

}

/*~

  name: Material Action Sheet

  category: Action Sheet

  markup: |

    <div class="action-sheet-mask action-sheet-mask--material"></div>

    <div class="action-sheet action-sheet--material">

      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>

      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>

      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>

    </div>

*/

/*~

  name: Material Action Sheet with Title

  category: Action Sheet

  markup: |

    <div class="action-sheet-mask action-sheet-mask--material"></div>

    <div class="action-sheet action-sheet--material">

      <div class="action-sheet-title action-sheet-title--material">Title</div>

      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>

      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>

    </div>

*/

.action-sheet--material {

  left: 0;

  right: 0;

  bottom: 0;

  box-shadow:

      0 16px 24px 2px rgba(0, 0, 0, .14),

      0 6px 30px 5px rgba(0, 0, 0, .12),

      0 8px 10px -5px rgba(0, 0, 0, .4);

}

.action-sheet-title--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  border-radius: 0;

  background-image: none;

  text-align: left;

  height: 56px;

  line-height: 56px;

  font-size: 1rem;

  padding: 0 0 0 16px;

  color: #686868;

  background-color: white;

  font-weight: 400;

}

.action-sheet-title--material:first-child {

  border-radius: 0;

}

.action-sheet-button--material {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  border-radius: 0;

  background-image: none;

  height: 52px;

  line-height: 52px;

  text-align: left;

  font-size: 1rem;

  padding: 0 0 0 16px;

  color: #686868;

  font-weight: 400;

  background-color: white;

}

.action-sheet-button--material:first-child {

  border-radius: 0;

}

.action-sheet-button--material:nth-last-of-type(2) {

  border-radius: 0;

}

.action-sheet-button--material:last-of-type {

  margin: 0;

  border-radius: 0;

  font-weight: 400;

  background-color: white;

}

.action-sheet-icon--material {

  display: inline-block;

  float: left;

  height: 52px;

  line-height: 52px;

  margin-right: 32px;

  font-size: 1rem;

  width: 0.8em;

  text-align: center;

}

.action-sheet-mask--material {

  background-color: #000000;

  background-color: rgba(0, 0, 0, .2);

}

/*~

  name: Card

  category: Card

  markup: |

    <div style="height: 200px; padding: 1px 0 0 0;">

      <div class="card">

        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

      </div>

    </div>

*/

.card {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);

  border-radius: 8px;

  background-color: white;

  box-sizing: border-box;

  display: block;

  margin: 8px;

  padding: 16px;

  text-align: left;

  word-wrap: break-word;

}

.card__content {

  margin: 0;

  font-size: 1rem;

  line-height: 1.4;

  color: #030303;

}

/*~

  name: Card with Title

  category: Card

  markup: |

    <div style="height: 200px; padding: 1px 0 0 0;">

      <div class="card">

        <h2 class="card__title">Card Title</h2>

        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

      </div>

    </div>

*/

.card__title {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  font-weight: 400;

  font-size: 1.125rem;

  margin: 4px 0 8px 0;

  padding: 0;

  display: block;

  box-sizing: border-box;

}

/*~

  name: Material Card

  category: Card

  markup: |

    <div style="height: 200px; padding: 1px 0 0 0;">

      <div class="card card--material">

        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

      </div>

    </div>

*/

.card--material {

  background-color: white;

  border-radius: 2px;

  box-shadow:

      0 2px 2px 0 rgba(0, 0, 0, .14),

      0 1px 5px 0 rgba(0, 0, 0, .12),

      0 3px 1px -2px rgba(0, 0, 0, .2);

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;




}

.card--material__content {

  font-size: 0.875rem;

  line-height: 1.4;

  color: #000000;

  color: rgba(0, 0, 0, .54);

}

/*~

  name: Material Card with Title

  category: Card

  markup: |

    <div style="height: 200px; padding: 1px 0 0 0;">

      <div class="card card--material">

        <div class="card__title card--material__title">Card Title</div>

        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

      </div>

    </div>

*/

.card--material__title {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  font-size: 1.5rem;

  margin: 8px 0 12px 0;

}

/*~

  name: Toast

  category: Toast

  markup: |

    <div class="toast">

      <div class="toast__message">Message Message Message Message Message Message</div>

      <button class="toast__button">ACTION</button>

    </div>

*/

.toast {

  font-family: pmxPwaDefault, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;

  position: absolute;

  z-index: 2;

  left: 8px;

  right: 8px;

  bottom: 0;

  margin: 8px 0;

  border-radius: 8px;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .8);

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  min-height: 48px;

  line-height: 1.5;

  box-sizing: border-box;

  padding: 16px 16px;

}

.toast__message {

  font-size: 0.875rem;

  color: white;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

          flex-grow: 1;

  text-align: left;

  margin: 0 16px 0 0;

  white-space: normal;

}

.toast__button {

  font-size: 0.875rem;

  color: white;

  -webkit-box-flex: 0;

  -webkit-flex-grow: 0;

          flex-grow: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  border: none;

  background-color: transparent;

  cursor: default;

  text-transform: uppercase;

}

.toast__button:focus {

  outline: none;

}

.toast__button:active {

  opacity: 0.4;

}

/*~

  name: Material Toast

  category: Toast

  markup: |

    <div class="toast toast--material">

      <div class="toast__message toast--material__message">Message Message Message Message Message Message</div>

      <button class="toast__button toast--material__button">ACTION</button>

    </div>

*/

.toast--material {

  left: 0;

  right: 0;

  bottom: 0;

  margin: 0;

  background-color: #000000;

  background-color: rgba(0, 0, 0, .8);

  border-radius: 0;

  padding: 16px 24px;

}

.toast--material__message {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  margin: 0 24px 0 0;

}

.toast--material__button {

  font-family: 'pmxPwaDefault','Roboto', 'Noto', sans-serif;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  color: #bbdefb;

}

/* ------- */

/* Default */

/* ------- */

/* All toolbar */

.toolbar {

  top: 0;

  box-sizing: border-box;

  padding-top: 0;

  background: none;

}

.bottom-bar {

  bottom: 0;

  box-sizing: border-box;

  padding-bottom: 0;

}

/* All page__background with a ordinal toolbar */

.toolbar+.page__background {

  top: 44px;

}

/* All page__content without toolbars */

.page__content {

  top: 0;

  padding-top: 0;



  bottom: 0;

}

/* All page__content with a toolbar */

.toolbar+.page__background+.page__content {

  top: 44px;

  padding-top: 0;

}

/* All page__content with a bottom-bar */

.page-with-bottom-toolbar > .page__content {

  bottom: 55px;

}

/* -------- */

/* Material */

/* -------- */

/* All page__background with a material toolbar */

.toolbar.toolbar--material+.page__background {

  top: 56px;

}

/* All page__content with a material toolbar */

.toolbar.toolbar--material+.page__background+.page__content {

  top: 56px;

  padding-top: 0;

}

/* -------- */

/*  Others  */

/* -------- */

/* All page__background with a transparent toolbar */

.toolbar.toolbar--transparent+.page__background {

  top: 0;

}

/* All page__content with a transparent cover-content toolbar and its direct descendant page_content */

.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,

.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {

  top: 0;

  padding-top: 44px;

}

/* All page__content with a material transparent cover-content toolbar and its direct descendant page_content */

.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,

.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {

  top: 0;

  padding-top: 56px;

}

/* -------- */

/*  Tabbar  */

/* -------- */

/* All top tabbar */

.tabbar--top {

  padding-top: 0;

}

/* All bottom tabbar */

.tabbar:not(.tabbar--top) {

  padding-bottom: 0;

} /* non BEM */

/* @import './util.css'; */

@media (orientation: landscape) {

  html[onsflag-iphonex-landscape] .page__content {

    padding-left: 44px;

    padding-right: 44px;

  }

  /* Ignore if the page is in dialogs or modals */

  html[onsflag-iphonex-landscape] .dialog .page__content,

  html[onsflag-iphonex-landscape] .modal .page__content {

    padding-left: 0;

    padding-right: 0;

  }

}

/* @import './switch.css'; */

/* @import './range.css'; */

/* @import './notification.css'; */

@media (orientation: landscape) {

  html[onsflag-iphonex-landscape] .toolbar__left {

    padding-left: 44px;

  }



  html[onsflag-iphonex-landscape] .toolbar__right {

    padding-right: 44px;

  }



  html[onsflag-iphonex-landscape] .bottom-bar {

    padding-right: 44px;

    padding-left: 44px;

  }

}

/* @import './button.css'; */

/* @import './button-bar.css'; */

/* @import './segment.css'; */

@media (orientation: landscape) {

  html[onsflag-iphonex-landscape] .tabbar {

    padding-left: 44px;

    padding-right: 44px;

    width: calc(100% - 88px);

  }

}

/* @import './toolbar-button.css'; */

/* @import './checkbox.css'; */

/* @import './radio-button.css'; */

/* @import './list.css'; */

/* @import './search-input.css'; */

/* @import './text-input.css'; */

/* @import './textarea.css'; */

/* @import './dialog.css'; */

/* @import './alert-dialog.css'; */

/* @import './popover.css'; */

/* @import './progress-bar.css'; */

/* @import './progress-circular.css'; */

@media (orientation: portrait) {

  /* For top safe area */

  html[onsflag-iphonex-portrait] .fab--top__left,

  html[onsflag-iphonex-portrait] .fab--top__center,

  html[onsflag-iphonex-portrait] .fab--top__right {

    top: 64px;

  }



  /* For bottom safe area */

  html[onsflag-iphonex-portrait] .fab--bottom__left,

  html[onsflag-iphonex-portrait] .fab--bottom__center,

  html[onsflag-iphonex-portrait] .fab--bottom__right {

    bottom: 34px; /* Omit 20px space */

  }

}

@media (orientation: landscape) {

  /* For bottom safe area */

  html[onsflag-iphonex-landscape] .fab--bottom__left,

  html[onsflag-iphonex-landscape] .fab--bottom__center,

  html[onsflag-iphonex-landscape] .fab--bottom__right {

    bottom: 21px; /* Omit 20px space */

  }

  

  /* For left safe area */

  html[onsflag-iphonex-landscape] .fab--top__left,

  html[onsflag-iphonex-landscape] .fab--bottom__left {

    left: 44px; /* Omit 20px space */

  }



  /* For right safe area */

  html[onsflag-iphonex-landscape] .fab--top__right,

  html[onsflag-iphonex-landscape] .fab--bottom__right {

    right: 44px; /* Omit 20px space */

  }

}

/* @import './modal.css'; */

/* @import './select.css'; */

@media (orientation: portrait) {

  html[onsflag-iphonex-portrait] .action-sheet {

    bottom: 48px; /* bottom safe area + 14 pt (extra bottom margin) */

  }

}

@media (orientation: landscape) {

  html[onsflag-iphonex-landscape] .action-sheet {

    /* The width in landscape mode is the same as the width in portrait mode */

    left: calc((100vw - 100vh + 20px) / 2);

    right: calc((100vw - 100vh + 20px) / 2);

    bottom: 33px; /* bottom safe area + 12 pt (extra bottom margin) */

  }

}

/* @import './card.css'; */

@media (orientation: portrait) {

  html[onsflag-iphonex-portrait] .toast {

    bottom: 34px;

  }

}

@media (orientation: landscape) {

  html[onsflag-iphonex-landscape] .toast {

    left: 52px;

    right: 52px;

    bottom: 21px;

  }

}

/*

  Note:



  :not(X) does not work if X is a complex selector like `.foo .bar` due to the spec of :not(X).

  Instead we have to use the following form for representing A:not(X A):not(Y A):not(Z A),

  which means `A which does not have any X, Y and Z as its ancestors`.



  // Equivalent to A:not(X A):not(Y A):not(Z A) { foo: bar; }

  A {

    // Apply styles for A

    foo: bar;

  }

  X A,

  Y A,

  Z A {

    // Subtract `X A`, `Y A` and `Z A`

    // (Restore original styles of A)

  }

*/

/*

  Note:



  @apply has been deprecated as of Oct, 2017.

  Please do not use @apply to restore original styles.

*/

/* Bars and page contents */

@media (orientation: portrait) {

  /* Outermost toolbar */

  html[onsflag-iphonex-portrait] .toolbar {

    top: 0;

    box-sizing: content-box;

    padding-top: 44px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .toolbar, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar, /* if wrapped with a page with a toolbar */

  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar { /* if wrapped with a top tabbar */

    /* Restore original styles */

    top: 0;

    box-sizing: border-box;

    padding-top: 0;

  }



  /* Outermost bottom-bar */

  html[onsflag-iphonex-portrait] .bottom-bar {

    bottom: 0;

    box-sizing: content-box;

    padding-bottom: 34px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .bottom-bar, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    bottom: 0;

    box-sizing: border-box;

    padding-bottom: 0;

  }



  /* Outermost page__content without toolbars or bottom-bars */

  html[onsflag-iphonex-portrait] .page__content {

    top: 0;

    padding-top: 44px;

    bottom: 0;

    padding-bottom: 34px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .page__content, /* if wrapped with a page with a toolbar */

  html[onsflag-iphonex-portrait] .tabbar--top__content .page__content, /* if wrapped with a top tabbar */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if the page has a toolbar */

    /* Restore original styles */

    top: 0;

    padding-top: 0;

  }

  html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */

    /* Restore original styles */

    bottom: 0;

    padding-bottom: 0;

  }



  /* Outermost page__content with a toolbar */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background,

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content {

    top: 88px;

    padding-top: 0;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background,

  html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with dialogs */



  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background,

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with a page with a toolbar */



  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background,

  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if wrapped with a top tabbar */

    /* Restore original styles */

    top: 44px;

    padding-top: 0;

  }



  /* Outermost page__content with a bottom-bar */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content {

    bottom: 78px;

    padding-bottom: 0;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    bottom: 44px;

    padding-bottom: 0;

  }



  /* Outermost page__content with a transparent cover-content toolbar and its direct descendant page_content */

  html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,

  html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {

    top: 0;

    padding-top: 88px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content,

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with a page with a toolbar */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page__content,

  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,

  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {  /* if wrapped with a top tabbar */

    /* Restore original styles */

    top: 0;

    padding-top: 44px;

  }



  /* Outermost top tabbar */

  html[onsflag-iphonex-portrait] .tabbar--top {

    padding-top: 44px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .tabbar--top, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top, /* if wrapped with a page with a toolbar */

  html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top { /* if wrapped with a top tabbar */

    /* Restore original styles */

    padding-top: 0;

  }



  /* Outermost tabbar--top__content */

  html[onsflag-iphonex-portrait] .tabbar--top__content {

    top: 93px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .tabbar--top__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top__content, /* if wrapped with a page with a toolbar */

  html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top__content { /* if wrapped with a top tabbar */

    /* Restore original styles */

    top: 49px;

  }



  /* Outermost bottom tabbar */

  html[onsflag-iphonex-portrait] .tabbar:not(.tabbar--top):not(.tabbar--top) {

    padding-bottom: 34px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .tabbar:not(.tabbar--top):not(.tabbar--top), /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    padding-bottom: 0;

  }



  /* Outermost.tabbar__content:not(.tabbar--top__content) */

  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) {

    bottom: 83px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-portrait] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    bottom: 49px;

  }

}

@media (orientation: landscape) {

  /* Outermost bottom-bar */

  html[onsflag-iphonex-landscape] .bottom-bar {

    bottom: 0;

    box-sizing: content-box;

    padding-bottom: 21px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-landscape] .dialog .bottom-bar, /* if wrapped with dialogs */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    bottom: 0;

    box-sizing: border-box;

    padding-bottom: 0;

  }



  /* Outermost page__content without bottom-bars */

  html[onsflag-iphonex-landscape] .page__content {

    bottom: 0;

    padding-bottom: 21px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-landscape] .dialog .page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */

    /* Restore original styles */

    bottom: 0;

    padding-bottom: 0;

  }



  /* Outermost page__content with a bottom-bar */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content {

    bottom: 65px;

    padding-bottom: 0;

  }

  /* Non-outermost */

  html[onsflag-iphonex-landscape] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    bottom: 44px;

    padding-bottom: 0;

  }



  /* Outermost bottom tabbar */

  html[onsflag-iphonex-landscape] .tabbar:not(.tabbar--top) {

    padding-bottom: 21px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-landscape] .dialog .tabbar:not(.tabbar--top), /* if wrapped with dialogs */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    padding-bottom: 0;

  }



  /* Outermost.tabbar__content:not(.tabbar--top__content) */

  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) {

    bottom: 70px;

  }

  /* Non-outermost */

  html[onsflag-iphonex-landscape] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */

  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */

  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */

    /* Restore original styles */

    bottom: 49px;

  }

}

/* Lists in .page__content */

@media (orientation: landscape) {

  /* Only patching lists just under .page__content */

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) {

    margin-left: -44px;

    margin-right: -44px;

  }



  /* For left safe area */

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-header {

    padding-left: 59px;

  }

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item {

    /* margin-left is not suitable for iPhone X patch. Using padding-left here. */

    padding-left: 58px;

  }



  /* For right safe area */

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item--chevron:before {

    right: 60px;

  }

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {

    padding-right: 50px;

  }

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {

    padding-right: 56px;

  }

  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {

    padding-right: 74px;

  }

}

/* Lists in .page__content in dialogs and modals */

@media (orientation: landscape) {

  /* Only patching lists just under .page__content */

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) {

    margin-left: 0;

    margin-right: 0;

  }



  /* For left safe area */

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-header {

    padding-left: 15px;

  }

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item {

    padding-left: 14px;

  }



  /* For right safe area */

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item--chevron:before {

    right: 16px;

  }

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {

    padding-right: 6px;

  }

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__right {

    padding-right: 12px;

  }

  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {

    padding-right: 30px;

  }

}

.grecaptcha-badge { visibility: hidden; }


/* non BEM */