@charset "UTF-8";
/**
设置字体和行高
*/
/**
设置padding或margin值
*/
/**
设置水平方向的padding或margin值
*/
/**
设置垂直方向的padding或margin值
*/
/**
设置padding-top或margin-top值
*/
/**
设置padding-right或margin-right值
*/
/**
设置padding-bottom或margin-bottom值
*/
/**
设置padding-left或margin-left值
*/
/**
设置padding或margin各种值
*/
/**
设置字体颜色
*/
/**
设置背景颜色
*/
/**
设置边框颜色
*/
/**
设置字体,背景,边框颜色
*/
/*
Copyright 2013-2015 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.

 */
/* custom elements */
ons-page, ons-navigator,
ons-split-view, ons-sliding-menu, ons-tabbar,
ons-gesture-detector {
  display: block; }

ons-navigator,
ons-tabbar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; }

ons-tab {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

ons-page, ons-navigator, ons-tabbar, ons-sliding-menu, ons-split-view {
  z-index: 2; }

ons-fab {
  z-index: 3; }

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent !important; }

input, textarea {
  -webkit-user-select: auto; }

ons-toolbar:not([inline]), ons-bottom-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10000; }

ons-toolbar:not([inline]) {
  top: 0; }

ons-bottom-toolbar {
  bottom: 0; }

.page__content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  -ms-touch-action: pan-y; }

.navigation-bar + .page__background + .page__content {
  /*margin-top: -1px;*/
  top: 44px; }

.page[status-bar-fill] > .page__content {
  top: 20px; }

.page[status-bar-fill] > .navigation-bar {
  padding-top: 20px;
  box-sizing: content-box; }

.page[status-bar-fill] > .navigation-bar + .page__background + .page__content {
  top: 64px; }

ons-tabbar[status-bar-fill] > .tab-bar--top__content {
  top: 71px; }

ons-tabbar[status-bar-fill] > .tab-bar--top {
  padding-top: 22px; }

ons-tabbar[position="top"] .page[status-bar-fill] > .page__content {
  top: 0px; }

.navigation-bar + .page__background + .page__content ons-tabbar[status-bar-fill] > .tab-bar--top {
  top: 0px; }

.navigation-bar + .page__background + .page__content ons-tabbar[status-bar-fill] > .tab-bar--top__content {
  top: 49px; }

.page-with-bottom-toolbar > .page__content {
  bottom: 44px; }

ons-dialog[disabled] > .dialog,
ons-alert-dialog[disabled],
ons-popover[disabled] {
  pointer-events: none;
  opacity: 0.75; }

ons-list-item[disabled] {
  pointer-events: none; }

ons-pull-hook {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  z-index: 20002; }

ons-splitter {
  overflow: hidden; }

ons-splitter, ons-splitter-mask, ons-splitter-content, ons-splitter-side {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  z-index: 0; }

ons-splitter-mask {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.1);
  display: none;
  opacity: 0; }

ons-splitter-content {
  z-index: 1; }

ons-splitter-side {
  right: auto;
  z-index: 1;
  width: 27.8rem; }

ons-splitter-side[side="right"] {
  right: 0;
  left: auto; }

ons-splitter-side[mode="collapse"] {
  z-index: 3;
  left: auto;
  right: 100%; }

ons-splitter-side[side="right"][mode="collapse"] {
  right: auto;
  left: 100%; }

ons-toolbar-button > ons-icon[icon*="ion-"] {
  font-size: 26px; }

ons-range {
  display: inline-block; }

ons-range > input {
  min-width: 50px;
  width: 100%; }

/*
Copyright 2013-2015 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.

 */
ons-carousel {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden; }

ons-carousel-item {
  display: block;
  height: 100%;
  visibility: hidden; }

ons-carousel[fullscreen] {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  box-sizing: border-box; }

ons-carousel[disabled] {
  pointer-events: none;
  opacity: 0.75; }

ons-carousel[image] {
  height: 16rem; }
  ons-carousel[image] ons-carousel-item img {
    width: inherit;
    height: inherit; }

ons-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box; }

ons-row[vertical-align="top"], ons-row[align="top"] {
  -webkit-box-align: start;
  box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-grid-row-align: flex-start;
      align-items: flex-start; }

ons-row[vertical-align="bottom"], ons-row[align="bottom"] {
  -webkit-box-align: end;
  box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-grid-row-align: flex-end;
      align-items: flex-end; }

ons-row[vertical-align="center"], ons-row[align="center"] {
  -webkit-box-align: center;
  box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-grid-row-align: center;
      align-items: center;
  text-align: inherit; }

ons-row + ons-row {
  padding-top: 0; }

ons-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  width: 100%;
  box-sizing: border-box; }

ons-col[vertical-align="top"], ons-col[align="top"] {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start; }

ons-col[vertical-align="bottom"], ons-col[align="bottom"] {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end; }

ons-col[vertical-align="center"], ons-col[align="center"] {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-flex-item-align: center;
  text-align: inherit; }

/*
Copyright 2013-2015 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.

 */
.ons-icon {
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.ons-icon--ion {
  line-height: 0.75em;
  vertical-align: -25%; }

ons-icon[spin] {
  -webkit-animation: ons-icon-spin 2s infinite linear;
  animation: ons-icon-spin 2s infinite linear; }

@-webkit-keyframes ons-icon-spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg); } }

@keyframes ons-icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

.ons-icon[rotate="90"] {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); }

.ons-icon[rotate="180"] {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.ons-icon[rotate="270"] {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg); }

ons-icon[fixed-width] {
  width: 1.28571429em;
  text-align: center; }

.ons-icon--lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%; }

.ons-icon--2x {
  font-size: 2em; }

.ons-icon--3x {
  font-size: 3em; }

.ons-icon--4x {
  font-size: 4em; }

.ons-icon--5x {
  font-size: 5em; }

ons-input {
  display: block;
  position: relative; }

ons-input .text-input__container {
  width: 100%;
  display: inline-block; }

ons-input .text-input__label:not(.text-input--material__label) {
  display: none; }

ons-input .text-input__label--active {
  transform: translate(0, -75%) scale(0.75);
  -webkit-transform: translate(0, -75%) scale(0.75);
  transform-origin: left top;
  -webkit-transform-origin: left top;
  -webkit-transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  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;
  -webkit-transition: transform 0.1s ease-in, color 0.1s ease-in; }

ons-input:not([float]) .text-input__label--active {
  display: none; }

ons-input[disabled] {
  pointer-events: none;
  background-color: #ddd; }

/*
Copyright 2013-2015 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.

 */
ons-progress-bar {
  display: block; }

ons-progress-circular {
  display: inline-block;
  width: 42px;
  height: 42px; }

ons-progress-circular > svg.progress-circular {
  width: 100%;
  height: 100%; }

/*
Copyright 2013-2015 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.

 */
.ripple {
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; }

ons-list-item .ripple__wave, ons-list-item .ripple__background {
  background: rgba(189, 189, 189, 0.3); }

.ripple__background {
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none; }

.ripple__wave {
  background: rgba(255, 255, 255, 0.2);
  width: 0;
  height: 0;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none; }

/*
Copyright 2013-2015 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.

*/
ons-sliding-menu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 0;
  overflow-x: hidden; }

.onsen-sliding-menu__menu,
.onsen-sliding-menu__main {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 0;
  margin: 0;
  padding: 0; }

.onsen-sliding-menu__menu {
  opacity: 0; }

/*
Copyright 2013-2015 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.

*/
ons-split-view {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 0;
  overflow: hidden; }

.onsen-split-view__secondary {
  opacity: 0;
  width: 100%; }

.onsen-split-view__secondary,
.onsen-split-view__main {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 0;
  overflow-x: hidden; }

html {
  height: 100%;
  width: 100%;
}
body {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  color: #333;
}
*:not(input):not(textarea):not(select) {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  box-sizing: border-box;
}
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
  outline: none;
}
/**
Copyright 2013-2014 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.

*/
/* topdoc
  name: Alert Dialog
  class: alert-dialog
  height: 360px
  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 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 13.5rem;
  margin: auto auto;
  background-color: #efefef;
  border-radius: 8px;
  overflow: visible;
  max-width: 90%;
  color: #333;
}
.alert-dialog-container {
  height: inherit;
  padding-top: 0.8rem;
  overflow: hidden;
}
.alert-dialog-title {
  font-size: 1rem;
  font-weight: 500;
  padding: 0 0.4rem;
  text-align: center;
}
.alert-dialog-content {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  min-height: 1.8rem;
  text-align: center;
}
.alert-dialog-footer {
  width: 100%;
}
.alert-dialog-button {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  letter-spacing: 0;
  vertical-align: middle;
  border: none;
  border-top: 1px solid #ddd;
  padding: 0 0.4rem;
  margin: 0;
  display: block;
  width: 100%;
  background-color: transparent;
  text-align: center;
  height: 2.2rem;
  line-height: 2.2rem;
  outline: none;
  color: #2196f3;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .alert-dialog-button {
    border-top: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    background-image: -webkit-linear-gradient(top, #ddd, #ddd 50%, transparent 50%);
    background-image: linear-gradient(180deg, #ddd, #ddd 50%, transparent 50%);
  }
}
.alert-dialog-button:active {
  background-color: rgba(0,0,0,0.05);
}
.alert-dialog-button--primal {
  font-weight: 500;
}
.alert-dialog-footer--one {
  white-space: nowrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.alert-dialog-button--one {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  width: 100%;
  border-left: 1px solid #ddd;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .alert-dialog-button--one {
    border-top: none;
    border-left: none;
    background-size: 100% 1px, 1px 100%;
    background-repeat: no-repeat;
    background-position: top, left;
    background-image: -webkit-linear-gradient(bottom, transparent, transparent 50%, #ddd 50%), -webkit-linear-gradient(left, transparent, transparent 50%, #ddd 50%);
    background-image: linear-gradient(0deg, transparent, transparent 50%, #ddd 50%), linear-gradient(90deg, transparent, transparent 50%, #ddd 50%);
  }
}
.alert-dialog-button--one:first-child {
  border-left: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .alert-dialog-button--one:first-child {
    border-top: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top, left;
    background-image: -webkit-linear-gradient(bottom, transparent, transparent 50%, #ddd 50%);
    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: rgba(0,0,0,0.2);
}
/**
*
* 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.
*
*/
/* topdoc
  name: Button Bar
  class: button-bar
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="button-bar" style="width:280px;margin:0 auto;">
      <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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  display: table;
  table-layout: fixed;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  position: relative;
  margin: 0;
  border: none;
}
.button-bar__item {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  display: table-cell;
  width: auto;
  border-radius: 0;
  position: relative;
  position: relative;
  overflow: hidden;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.button-bar__item > input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.button-bar__item:first-child > .button-bar__button {
  border-left: 1px solid rgba(18,114,224,0.77);
  border-right: 1px solid rgba(18,114,224,0.77);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.button-bar__item:last-child > .button-bar__button {
  border-right: 1px solid rgba(18,114,224,0.77);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.button-bar__button {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  border-radius: inherit;
  background-color: transparent;
  color: rgba(18,114,224,0.77);
  border: 0px solid rgba(18,114,224,0.77);
  border-top: 1px solid rgba(18,114,224,0.77);
  border-bottom: 1px solid rgba(18,114,224,0.77);
  border-right: 1px solid rgba(18,114,224,0.77);
  font-weight: 400;
  padding: 0 8px;
  height: 27px;
  line-height: 27px;
  font-size: 13px;
  width: 100%;
  -webkit-transition: #e8e9ec 0.2s linear, color 0.2s linear;
  transition: #e8e9ec 0.2s linear, color 0.2s linear;
  box-sizing: border-box;
}
.button-bar__button:active,
:active + .button-bar__button {
  background-color: rgba(18,114,224,0.2);
  border: 0px solid rgba(18,114,224,0.77);
  border-top: 1px solid rgba(18,114,224,0.77);
  border-bottom: 1px solid rgba(18,114,224,0.77);
  border-right: 1px solid rgba(18,114,224,0.77);
  height: 27px;
  line-height: 27px;
  font-size: 13px;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}
.button-bar__item.active > .button-bar__button,
:checked + .button-bar__button {
  background-color: rgba(18,114,224,0.77);
  color: #fff;
  -webkit-transition: none;
  transition: none;
}
.button-bar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.button-bar__button:hover {
  -webkit-transition: none;
  transition: none;
}
.button-bar__button:focus {
  outline: 0;
}
/* topdoc
  name: Segment
  use: Button Bar
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="button-bar" style="width:280px;margin:0 auto;">
      <div class="button-bar__item">
        <input type="radio" name="segment-a" checked>
        <button class="button-bar__button">One</button>
      </div>
      <div class="button-bar__item">
        <input type="radio" name="segment-a">
        <button class="button-bar__button">Two</button>
      </div>
      <div class="button-bar__item">
        <input type="radio" name="segment-a">
        <button class="button-bar__button">Three</button>
      </div>
    </div>
*/
/**
*
* 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.
*
*/
/* topdoc
  name: Button
  class: button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :focus: Focused
  markup:
    <button class="button">Button</button>
    <button class="button" disabled>Button</button>
*/
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  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;
  font-size: 1.7rem;
  height: 4rem;
  width: 14.3rem;
  text-decoration: none;
  line-height: 4rem;
  letter-spacing: 0;
  color: #fff;
  vertical-align: middle;
  background-color: #2196f3;
  border: 0px solid currentColor;
  border-radius: 0.3rem;
  -webkit-transition: none;
  transition: none;
  text-align: center;
}
.button:hover {
  -webkit-transition: none;
  transition: none;
}
.button:active {
  background-color: #0a6bb7;
  -webkit-transition: none;
  transition: none;
}
.button:focus {
  outline: 0;
}
/* topdoc
  name: Outline Button
  class: button--outline
  use: 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 #2196f3;
  color: #2196f3;
}
.button--outline:active {
  background-color: transparent;
  border: 1px solid #2196f3;
  color: #2196f3;
  opacity: 1;
}
/* topdoc
  name: Light Button
  class: button--light
  use: Button
  markup:
    <button class="button button--light">Button</button>
    <button class="button button--light" disabled>Button</button>
*/
/* topdoc
  name: Quiet Button
  class: button--quiet
  markup:
    <button class="button--quiet">Button</button>
    <button class="button--quiet" disabled>Button</button>
*/
.button--long {
  width: 29.6rem;
}
.button-group {
  font-size: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}
.button-group .button {
  display: table-cell;
  border-radius: 0;
  width: auto;
}
.button--white {
  background: #fff;
  color: #2196f3;
}
.button--circle {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  line-height: 4.4rem;
}
.button--circle .iconfont {
  font-size: 2.4rem;
  line-height: 4.800000000000001rem;
}
.button--response {
  width: auto;
  padding: 0 2rem;
}
.button--default {
  background: #fff;
  color: #333;
}
.button--default:active {
  background: #b3b3b3;
}
.button--primary {
  background: #2196f3;
}
.button--primary:active {
  background: #0a6bb7;
}
.button--success {
  background: #60be29;
}
.button--success:active {
  background: #43851d;
}
.button--warning {
  background: #ef971c;
}
.button--warning:active {
  background: #af6b0c;
}
.button--danger {
  background: #e24034;
}
.button--danger:active {
  background: #aa2218;
}
.button--tag {
  width: auto;
  min-width: 4.4rem;
  height: 2.4rem;
  line-height: 2.4rem;
  font-size: 1.2rem;
  background: #efefef;
  color: #333;
}
.button--tag.button--active {
  color: #fff;
  background: #2196f3;
}
.button--tag:disabled,
.button--tag[disabled] {
  color: #fff;
  background: #ccc;
}
/* topdoc
  name: Call To Action Button
  class: button--cta
  markup:
    <button class="button--cta">Button</button>
    <button class="button--cta" disabled>Button</button>
*/
/* topdoc
  name: Large Button
  class: button--large
  use: Button
  markup:
    <button class="button button--large">Button</button>
*/
.button--large {
  font-weight: 500;
  line-height: 4.8rem;
  height: 4.8rem;
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 0;
}
/* topdoc
  name: Large Quiet Button
  class: button--large--quiet
  markup:
    <button class="button--large--quiet">Button</button>
*/
/* topdoc
  name: Large Call To Action Button
  class: button--large--cta
  markup:
    <button class="button--large--cta" >Button</button>
*/
.button:disabled,
.button[disabled] {
  cursor: not-allowed;
  background: #ccc;
  color: #fff;
  border: none;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Checkbox
  class: checkbox
  modifiers:
    :focus: Focus state
    :disabled: Disabled state
  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>
*/
.radio-button,
.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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6rem;
}
.checkbox__checkmark,
.radio-button__checkmark {
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  width: 1.6rem;
  height: 1.6rem;
  pointer-events: none;
}
.radio-button__input,
.checkbox__input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.checkbox__input:checked,
.radio-button__input:checked {
  background: #2196f3;
}
.checkbox__input:checked + .checkbox__checkmark:before,
.radio-button__input:checked + .radio-button__checkmark:before {
  background: #2196f3;
  border-color: #2196f3;
}
.checkbox__input:checked + .checkbox__checkmark:after,
.radio-button__input:checked + .radio-button__checkmark:after {
  opacity: 1;
}
.checkbox__checkmark:before,
.radio-button__checkmark:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 1.6rem;
  height: 1.6rem;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 9999px;
  box-shadow: none;
  left: 0;
}
.checkbox__checkmark:after,
.radio-button__checkmark:after {
  content: '';
  position: absolute;
  top: 0.35rem;
  left: 0.3rem;
  width: 0.8rem;
  height: 0.45rem;
  background: transparent;
  border: 3px solid #fff;
  border-width: 2px;
  border-top: none;
  border-right: none;
  border-radius: 0px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
.checkbox__input:focus + .checkbox__checkmark:before,
.radio-button__input:focus + .radio-button__checkmark:before {
  box-shadow: none;
}
ons-input[disabled].checkbox,
ons-input[disabled].radio-button {
  background-color: transparent;
}
ons-input[disabled] .checkbox__checkmark:before,
ons-input[disabled] .radio-button__checkmark:before,
ons-input[disabled] .checkbox__input:checked + .checkbox__checkmark:before,
ons-input[disabled] .radio-button__input:checked + .radio-button__checkmark:before {
  background-color: #ccc;
  border-color: #ccc;
}
.checkbox__input:disabled + .checkbox__checkmark,
.radio-button__input:disabled + .radio-button__checkmark {
  cursor: default;
  pointer-events: none;
}
/* topdoc
  name: No border Checkbox
  class: checkbox--noborder
  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__input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6rem;
  position: relative;
  overflow: hidden;
}
.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;
  height: 1.6rem;
  background: transparent;
}
.checkbox--noborder__input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.checkbox--noborder__input:checked + .checkbox--noborder__checkmark:before {
  background: transparent;
  border: none;
}
.checkbox--noborder__input:checked + .checkbox--noborder__checkmark:after {
  opacity: 1;
}
.checkbox--noborder__checkmark:before {
  content: '';
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  background: transparent;
  border: none;
  border-radius: 9999px;
  left: 0;
}
.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: 1.6rem;
  height: 1.6rem;
  border: none;
}
.checkbox--noborder__checkmark:after {
  content: '';
  position: absolute;
  top: 0.35rem;
  left: 0.3rem;
  opacity: 0;
  width: 0.8rem;
  height: 0.45rem;
  background: transparent;
  border: 3px solid #ddd;
  border-width: 2px;
  border-top: none;
  border-right: none;
  border-radius: 0px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox--noborder__input:focus + .checkbox--noborder__checkmark:before {
  border: none;
  box-shadow: none;
}
.checkbox--noborder__input:disabled + .checkbox--noborder__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.checkbox--noborder__input:disabled:active + .checkbox--noborder__checkmark:before {
  background: transparent;
  box-shadow: none;
  border: none;
}
/*
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.
*/
/* topdoc
  name: Dialog
  class: dialog
  markup:
    <div class="dialog-mask"></div>
    <div class="dialog">
      <div class="dialog-container">
        <div class="page">
          <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
        </div>
      </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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  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: #f8f8f8;
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
}
.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: rgba(0,0,0,0.2);
}
/* topdoc
  name: Fab
  class: fab
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :focus: Focused
  markup:
    <button class="fab"><i class="zmdi zmdi-car"></i></button>
    <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
*/
.fab {
  position: relative;
  display: inline-block;
  vertical-align: top;
  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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 4.4rem;
  height: 4.4rem;
  text-decoration: none;
  font-size: 25px;
  line-height: 4.4rem;
  letter-spacing: 0;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  background-color: #2196f3;
  border: 0px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.fab .iconfont {
  font-size: inherit;
}
.fab:active {
  background-color: #2196f3;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.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: 4.4rem;
}
.fab:disabled,
.fab[disabled] {
  background-color: rgba(0,0,0,0.5);
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.fab--top__right {
  top: 20px;
  bottom: auto;
  right: 20px;
  left: auto;
  position: fixed;
}
.fab--bottom__right {
  top: auto;
  bottom: 20px;
  right: 20px;
  left: auto;
  position: fixed;
}
.fab--top__left {
  top: 20px;
  bottom: auto;
  right: auto;
  left: 20px;
  position: fixed;
}
.fab--bottom__left {
  top: auto;
  bottom: 20px;
  right: auto;
  left: 20px;
  position: fixed;
}
.fab--top__center {
  top: 20px;
  bottom: auto;
  margin-left: -28px;
  left: 50%;
  right: auto;
  position: fixed;
}
.fab--bottom__center {
  top: auto;
  bottom: 20px;
  margin-left: -28px;
  left: 50%;
  right: auto;
  position: fixed;
}
/* topdoc
  name: Fab Mini
  use: Fab
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :focus: Focused
  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>
*/
.fab--mini {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
.fab--mini .fab__icon {
  line-height: 40px;
}
.speed-dial__item {
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
}
/**
*
* 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.
*
*/
/* topdoc
  name: List
  class: list
  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>
*/
ons-list-item {
  position: relative;
}
ons-list-item:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #999;
}
.list__item__left {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0.6rem 0.6rem 0.6rem 0;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  min-height: 4.4rem;
}
.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: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  margin-right: auto;
  min-height: 4.4rem;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  margin-left: 0;
  padding: 0.6rem 0.3rem 0.6rem 0;
}
.list__item__right {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  padding: 0.6rem 1.2rem 0.6rem 0;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  min-height: 4.4rem;
}
.list__item--all-middle .list__item__left,
.list__item--all-middle .list__item__center,
.list__item--all-middle .list__item__right,
.list__item--all-middle .list__item__title {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
}
.list__item__middle {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
}
.list__header {
  list-style: none;
  display: block;
  padding: 0.5rem 1.2rem;
  font-size: 1.5rem;
  color: #999;
  min-height: 0.12rem;
  text-transform: uppercase;
  position: relative;
  background-color: #f8f8f8;
}
.list__header:not(:first-of-type) {
  border-top: 1px solid #ccc;
}
.list {
  display: block;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}
.list--subList {
  height: 0;
  overflow: hidden;
}
.list--subList[expand] {
  height: auto;
}
.list--subList .list__item {
  background: #efefef;
  font-size: 1.2rem;
}
.list--subList .list__item .list__item__center {
  background-image: none;
}
.list__item {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  list-style: none;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 4.4rem;
  font-size: 1.5rem;
  padding: 0 0 0 1.2rem;
  color: #333;
  background-color: #fff;
}
.list__item:active {
  background: #efefef;
}
.list__item:first-child {
  box-shadow: inset 0px 1px 0px 0px #ccc;
  margin-top: 0;
}
.list__item_active:active {
  background-color: #ddd;
  -webkit-transition: none;
  transition: none;
}
/* topdoc
  name: Noborder List
  class: list--noborder
  use: List
  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;
}
.list--noborder .list__item:first-child {
  box-shadow: none;
}
/* topdoc
  name: List item without divider
  class: list__item--nodivider
  use: 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 {
  border: none;
  background-image: none;
}
.list__item--nodivider__right {
  border: none;
  background-image: none;
}
.list__item--nodivider.list__item--chevron:before {
  border: none;
  background-image: none;
}
/* topdoc
  name: List item with long divider
  class: list__item--longdivider
  use: 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: -webkit-linear-gradient(bottom, #ccc, #ccc 100%);
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .list__item--longdivider {
    background-image: -webkit-linear-gradient(bottom, #ccc, #ccc 50%, transparent 50%);
    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;
}
.list__item--longdivider.list__item--chevron:before {
  border: none;
  background-image: none;
}
/* topdoc
  name: Category List Header
  class: list__header
  use: List
  markup:
    <ul class="list">
      <li class="list__header">
        Header
      </li>
      <li class="list__item">
        <div class="list__item__center">Item</div>
      </li>
    </ul>
 */
/* topdoc
  name: Tappable List
  class: list__item--tappable
  use: List
  markup:
    <ul class="list">
      <li class="list__item list__item--tappable">
        <div class="list__item__center">Tappable Item</div>
      </li>
    </ul>
 */
.list__item--tappable:active {
  background-color: #ddd;
}
/* topdoc
  name: Switch in List Item
  use: Switch, List
  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>
*/
/* topdoc
  name: List Item with Chevron
  class: list__item--chevron
  use: List
  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>
      </li>
    </ul>
 */
.list__item--chevron {
  -webkit-transition: #e8e9ec 0.2s linear;
  transition: #e8e9ec 0.2s linear;
  overflow: hidden;
}
.list__item--chevron:hover {
  -webkit-transition: none;
  transition: none;
}
.list__item--chevron:before {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ccc;
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  font-size: 2.8rem;
  font-family: "iconfont";
  font-style: normal;
  font-weight: normal;
  content: "\e79e";
  margin-left: auto;
  text-align: right;
  padding-right: 0.4rem;
  padding-top: 0.2rem;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  background-image: none;
}
/* topdoc
  name: Inset List
  use: List, List Item with Chevron, Tappable List
  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-left: 8px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-image: none;
}
.list--inset > .list__item:first-child {
  box-shadow: none;
}
/* topdoc
  name: Radio Button in List Item
  modifiers:
  use: Radio Button, List
  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>
*/
/* topdoc
  name: Checkbox in List Item
  use: Checkbox, List, Tappable List, Switch in List Item
  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>
*/
/* topdoc
  name: No border Checkbox in List Item
  use: Checkbox in List Item, No border Checkbox
  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>
*/
/* topdoc
  name: Text Input in List Item
  use: List
  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>
*/
/* topdoc
  name: Textarea in List Item
  use: List, Textarea Transparent
  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>
*/
/* topdoc
  name: Right Label in List Item
  use: List, Switch in List Item
  class: list__right-label
  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: 17px;
  padding: 0 4px;
  opacity: 0.6;
}
/* topdoc
  name: List Item with Subtitle
  use: List, Switch in List Item
  class: list__item__subtitle
  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 {
  font-size: 1.5rem;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.list__item__subtitle {
  opacity: 0.75;
  font-size: 17px;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.list__item__describe {
  font-size: 1.2rem;
  line-height: 1.9rem;
  color: #999;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
/* topdoc
  name: List Item with Thumbnail
  use: List, List Item with Subtitle
  class: list__item__thumbnail
  markup:
    <ul class="list">
      <li class="list__item">
        <div class="list__item__left">
          <img class="list__item__thumbnail" src="http://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="http://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;
}
/* topdoc
  name: List Item with Icon
  use: List, List Item with Thumbnail
  class: list__item__icon
  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>

        <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>

        <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;
}
.list__item[expand]:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  background-image: none;
}
/*
Copyright 2013-2014 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.

*/
/* topdoc
  name: Modal
  class: 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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  overflow: hidden;
  background-color: rgba(0,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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  white-space: normal;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Navigation Bar
  class: navigation-bar
  markup:
    <div class="navigation-bar">
      <div class="navigation-bar__center">Navigation Bar</div>
    </div>
*/
.navigation-bar {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  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: 44px;
  padding-left: 0;
  padding-right: 0;
  background: #fff;
  color: #333;
  box-shadow: none;
  font-weight: 400;
  width: 100%;
  white-space: nowrap;
  overflow: visible;
  overflow-x: hidden;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: -webkit-linear-gradient(bottom, #ccc, #ccc 100%);
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .navigation-bar {
    background-image: -webkit-linear-gradient(bottom, #ccc, #ccc 50%, transparent 50%);
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.navigation-bar__bg {
  background: #fff;
}
.navigation-bar__item,
.navigation-bar__left,
.navigation-bar__right,
.navigation-bar__center {
  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;
  vertical-align: top;
  overflow: visible;
  display: block;
  vertical-align: middle;
  float: left;
}
.navigation-bar__left {
  max-width: 50%;
  width: 27%;
  text-align: left;
  line-height: 44px;
}
.navigation-bar__right {
  max-width: 50%;
  width: 27%;
  text-align: right;
  line-height: 44px;
}
.navigation-bar__center {
  width: 46%;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  font-weight: 500;
  color: #333;
}
.navigation-bar__title {
  line-height: 44px;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.navigation-bar__center:first-child:last-child {
  width: 100%;
}
/* topdoc
  name: Navigation Bar Item
  use: Toolbar Button, Navigation Bar
  markup:
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span class="toolbar-button--quiet">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Navigation Bar
      </div>

      <div class="navigation-bar__right">
        <span class="toolbar-button--quiet">Label</span>
      </div>
    </div>
*/
/* topdoc
  name: Navigation Bar with Outline Button
  use: Toolbar Button, Navigation Bar
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span class="toolbar-button--outline">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Title
      </div>

      <div class="navigation-bar__right">
        <span class="toolbar-button--outline">Button</span>
      </div>
    </div>
*/
/* topdoc
  name: Transparent Navigation Bar
  class: navigation-bar--transparent
  use: Toolbar Button, Navigation Bar
  markup:
    <div class="navigation-bar navigation-bar--transparent">
      <div class="navigation-bar__left">
        <span class="toolbar-button--quiet">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="navigation-bar__center">
        Navigation Bar
      </div>
      <div class="navigation-bar__right">
        <span class="toolbar-button--quiet">Label</span>
      </div>
    </div>
*/
.navigation-bar--transparent {
  background-color: transparent;
  background-image: none;
  border: none;
}
/* topdoc
  name: Navigation Bar with Outline Button
  use: Toolbar Button, Navigation Bar
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span class="toolbar-button--outline">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Title
      </div>

      <div class="navigation-bar__right">
        <span class="toolbar-button--outline">Button</span>
      </div>
    </div>
*/
/* topdoc
  name: Transparent Navigation Bar
  class: navigation-bar--transparent
  use: Toolbar Button, Navigation Bar
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="navigation-bar navigation-bar--transparent">
      <div class="navigation-bar__left">
        <span class="toolbar-button--quiet">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="navigation-bar__center">
        Navigation Bar
      </div>
      <div class="navigation-bar__right">
        <span class="toolbar-button--quiet">Label</span>
      </div>
    </div>
*/
.navigation-bar--transparent {
  background-color: transparent;
  background-image: none;
  border: none;
}
/* topdoc
  name: Bottom Bar
  class: bottom-bar
  use: Navigation Bar
  markup:
    <div class="bottom-bar">
      <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
    </div>
*/
.bottom-bar {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  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: 4.9rem;
  padding-left: 0;
  padding-right: 0;
  background: #fff;
  color: #333;
  box-shadow: none;
  font-weight: 400;
  border-bottom: none;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  border-top: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
  background-image: -webkit-linear-gradient(top, #ccc, #ccc 100%);
  background-image: linear-gradient(180deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bottom-bar {
    background-image: -webkit-linear-gradient(top, #ccc, #ccc 50%, transparent 50%);
    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.bottom-bar__line-height {
  line-height: 44px;
  padding-bottom: 0;
  padding-top: 0;
}
.bottom-bar--transparent {
  background-color: transparent;
  background-image: none;
  border: none;
}
/* topdoc
  name: Navigation Bar with Segment
  class: navigation-bar
  hint: .navigation-bar .button-bar
  use: Segment, Navigation Bar
  markup:
    <div class="navigation-bar">
      <div class="navigation-bar__center">
        <div class="button-bar" style="width:200px;margin:7px 50px;">
          <div class="button-bar__item">
            <input type="radio" name="navi-segment-a" checked>
            <div class="button-bar__button">One</div>
          </div>

          <div class="button-bar__item">
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">Two</div>
          </div>
        </div>
      </div>
    </div>
*/
.navigation-bar--noshadow {
  box-shadow: none;
  background-image: none;
  border-bottom: none;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Notification
  class: 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;
  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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  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;
  padding: 0 4px;
  width: auto;
  height: 19px;
  border-radius: 19px;
  background-color: #e24034;
  color: #fff;
  text-align: center;
  font-size: 16px;
  min-width: 19px;
  line-height: 19px;
  font-weight: 400;
}
.notification:empty {
  display: none;
}
.page {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: visible;
  font-size: 20px;
  color: #333;
  -ms-overflow-style: none;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.page::-webkit-scrollbar {
  display: none;
}
.page__content {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  box-sizing: border-box;
}
.page__background {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  box-sizing: border-box;
}
.content-padded {
  padding: 8px;
}
/*
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.
*/
/* topdoc
  name: Popover
  class: popover
  markup:
    <div class="popover">
      <div class="popover-mask"></div>
      <div class="popover popover--bottom" style="bottom:20px;left:50px;">
        <div class="popover__arrow"></div>
        <div class="popover__content">
          <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
        </div>
      </div>
    </div>
*/
.popover {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 20000;
  display: none;
}
.popover-mask {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1);
  position: fixed;
}
.popover__container {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  position: absolute;
  display: block;
  width: 220px;
  overflow: auto;
  min-height: 100px;
  max-height: 100%;
  background-color: #fff;
  border-radius: 8px;
  color: #333;
  pointer-events: auto;
}
.popover__content > * {
  overflow: hidden;
}
.popover__content .page,
.popover__content .page__content {
  position: static;
}
.popover__arrow {
  position: absolute;
  width: 18px;
  height: 18px;
  -webkit-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  background-color: transparent;
  background-image: -webkit-linear-gradient(45deg, #fff, #fff 50%, transparent 50%);
  background-image: linear-gradient(45deg, #fff, #fff 50%, transparent 50%);
  border-radius: 0 0 0 4px;
  margin: -9px;
}
.popover--bottom .popover__arrow {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  bottom: 1px;
}
.popover--top .popover__arrow {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 1px;
}
.popover--left .popover__arrow {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  left: 1px;
}
.popover--right .popover__arrow {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  right: 1px;
}
/* topdoc
  name: Progress Bar
  class: progres-bar
  markup:
    <div class="progress-bar progress-bar--indeterminate">
      <div class="progress-bar__primary"></div>
      <div class="progress-bar__secondary"></div>
    </div>
    <br />
    <div class="progress-bar progress-bar--determinate">
      <div class="progress-bar__primary" style="width:20%"></div>
      <div class="progress-bar__secondary" style="width:76%"></div>
    </div>
*/
.progress-bar {
  position: relative;
  height: 0.65rem;
  display: block;
  width: 100%;
  background-color: #ddd;
  background-clip: padding-box;
  margin: 0;
  border-radius: 0.3rem;
  overflow: hidden;
}
.progress-bar--determinate > .progress-bar__primary,
.progress-bar--determinate > .progress-bar__secondary {
  position: absolute;
  background-color: #2196f3;
  top: 0;
  bottom: 0;
  -webkit-transition: width 0.3s linear;
  transition: width 0.3s linear;
  border-radius: 0.3rem;
  z-index: 100;
}
.progress-bar--determinate > .progress-bar__secondary {
  background-color: #68b8f7;
  z-index: 0;
}
.progress-bar--indeterminate:before {
  content: '';
  position: absolute;
  background-color: #2196f3;
  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: 0.3rem;
}
.progress-bar--indeterminate:after {
  content: '';
  position: absolute;
  background-color: #2196f3;
  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;
}
/* topdoc
  name: Progress Circle
  class: progres-circle
  markup:
    <svg class="progress-circular">
      <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10"/>
    </svg>
    <svg class="progress-circular progress-circular--determinate">
      <circle class="progress-circular__secondary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10" style="stroke-dasharray:140%,251.32%"/>
      <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10" style="stroke-dasharray:100%,251.32%"/>
    </svg>

*/
.progress-circular {
  -webkit-animation: progress__rotate 2s linear infinite;
          animation: progress__rotate 2s linear infinite;
  height: 80px;
  position: relative;
  width: 80px;
}
.progress-circular__primary {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: progress__dash 1.5s ease-in-out infinite;
          animation: progress__dash 1.5s ease-in-out infinite;
  stroke: #2196f3;
  -webkit-transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-circular--determinate {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-animation: none;
          animation: none;
}
.progress-circular--determinate > .progress-circular__primary {
  -webkit-animation: none;
          animation: none;
}
.progress-circular--determinate > .progress-circular__secondary {
  -webkit-animation: none;
          animation: none;
  stroke: #68b8f7;
}
/*
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.
*/
/* topdoc
  name: Range
  class: range
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :focus: Focused
  markup:
    <input type="range" class="range">
    <input type="range" class="range" disabled>
  showcase:
    <div class="navigation-bar">
        <div class="navigation-bar__item center full">
            <h1 class="navigation-bar__title">Range</h1>
        </div>
    </div>

    <div style="padding:8px">
      <input type="range" class="range" style="width:100%" value="0">
    </div>

    <div style="padding:8px">
      <input type="range" class="range" style="width:100%" value="30">
    </div>

    <div style="padding:8px">
      <input type="range" class="range" style="width:100%" value="60">
    </div>

    <div style="padding:8px">
      <input type="range" class="range" style="width:100%" value="90">
    </div>
*/
ons-range:before {
  content: '';
  display: block;
  position: relative;
  top: 17px;
  height: 2px;
  margin-bottom: -2px;
  background-color: #ccc;
}
ons-range .range {
  position: relative;
  background: transparent;
}
ons-range .range::-moz-range-track {
  background: transparent;
}
ons-range[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
ons-range[disabled] .range {
  opacity: 1;
}
.range {
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
  border: none;
  height: 2px;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(#ccc, #ccc);
  background-image: linear-gradient(#ccc, #ccc);
  background-position: left center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 32px;
}
.range::-moz-range-track {
  position: relative;
  border: none;
  background-color: #ccc;
  height: 2px;
  border-radius: 30px;
  box-shadow: none;
  top: 0;
  margin: 0;
  padding: 0;
}
.range::-ms-track {
  position: relative;
  border: none;
  background-color: #ccc;
  height: 0;
  border-radius: 30px;
}
.range::-webkit-slider-thumb {
  cursor: pointer;
  position: relative;
  height: 29px;
  width: 29px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-shadow: none;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  top: 0;
}
.range::-moz-range-thumb {
  cursor: pointer;
  position: relative;
  height: 29px;
  width: 29px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.range::-ms-thumb {
  cursor: pointer;
  position: relative;
  height: 29px;
  width: 29px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-shadow: none;
  margin: 0;
  padding: 0;
  top: 0;
}
.range::-ms-fill-lower {
  height: 2px;
  background-color: #2196f3;
}
.range::-ms-tooltip {
  display: none;
}
.range:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.range__left {
  position: relative;
  top: 17px;
  height: 2px;
  width: 0;
  background-color: #2196f3;
  pointer-events: none;
}
[disabled] > .range__left {
  visibility: hidden;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Search Input
  class: search-input
  modifiers:
    :disabled: Disabled state
  markup:
    <input type="search" value="" placeholder="Search" class="search-input">
*/
input[type="search"].search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.search-input {
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: 31px;
  font-size: 15px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  box-shadow: none;
  color: #333;
  padding: 4px 0 0 28px;
  border-radius: 4px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDFweCcgaGVpZ2h0PSc0MHB4JyB2aWV3Qm94PScwIDAgNDEgNDAnIHZlcnNpb249JzEuMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgeG1sbnM6c2tldGNoPSdodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMnPjx0aXRsZT5TbGljZSAxPC90aXRsZT48ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+PGRlZnM+PC9kZWZzPjxnIGlkPSdQYWdlIDEnIHN0cm9rZT0nbm9uZScgc3Ryb2tlLXdpZHRoPScxJyBmaWxsPSdub25lJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnPjxnIGlkPSdzZWFyY2gnIGZpbGw9JyNDNkM4QzgnPjxwYXRoIGQ9J00wLjUwNCwxNi4zMzggQzAuNTA0LDI1LjA4NSA3LjYzNSwzMi4xNjUgMTYuNDQ0LDMyLjE2NSBDMjUuMjQsMzIuMTY1IDMyLjM4MiwyNS4wODUgMzIuMzgyLDE2LjMzOCBDMzIuMzgyLDcuNTkxIDI1LjI0LDAuNSAxNi40NDQsMC41IEM3LjYzNSwwLjUgMC41MDQsNy41OTEgMC41MDQsMTYuMzM4IEwwLjUwNCwxNi4zMzggWiBNNS41NTUsMTYuMzM4IEM1LjU1NSwxMC4zNTkgMTAuNDIzLDUuNTIxIDE2LjQ0NSw1LjUyMSBDMjIuNDU1LDUuNTIxIDI3LjMzMywxMC4zNiAyNy4zMzMsMTYuMzM4IEMyNy4zMzMsMjIuMzE3IDIyLjQ1NSwyNy4xNTYgMTYuNDQ1LDI3LjE1NiBDMTAuNDIzLDI3LjE1NiA1LjU1NSwyMi4zMTYgNS41NTUsMTYuMzM4IEw1LjU1NSwxNi4zMzggWiBNMjcuNjY2LDMwLjg2MSBMMzQuNTIxLDM4LjY3IEMzNS42MjUsMzkuNzcyIDM2LjMzOCwzOS43ODEgMzcuNDYsMzguNjcgTDM5LjY2MSwzNi40ODkgQzQwLjc0MywzNS40MDggNDAuODExLDM0LjcxMSAzOS42NjEsMzMuNTY4IEwzMS43NjUsMjYuNzkzIEwyNy42NjYsMzAuODYxIEwyNy42NjYsMzAuODYxIFogTTI3LjY2NiwzMC44NjEnIGlkPSdTaGFwZSc+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 20px;
  font-weight: 400;
  display: block;
  width: 100%;
}
.search-input:focus {
  background-color: #f8f8f8;
  color: #333;
  border: 1px solid #ccc;
  box-shadow: none;
}
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  margin-right: 0px;
}
.search-input::-webkit-input-placeholder {
  color: #999;
}
.search-input::-moz-placeholder {
  color: #999;
}
.search-input::-ms-input-placeholder {
  color: #999;
}
.search-input:-ms-input-placeholder {
  color: #999;
}
.search-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Switch
  class: switch
  modifiers:
    :focus: Focus state
    :disabled: Disabled state
  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 {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
  min-width: 4.05rem;
  font-size: 20px;
  padding: 0 1rem;
  border: none;
  overflow: visible;
  width: 4.05rem;
  height: 2.5rem;
  z-index: 0;
  text-align: left;
}
.switch__input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  z-index: -1;
}
.switch__toggle {
  background-color: #ccc;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 1.25rem;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.35s;
          transition-duration: 0.35s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.switch__handle {
  box-sizing: border-box;
  background-clip: padding-box;
  position: absolute;
  content: '';
  border-radius: 2.3rem;
  height: 2.3rem;
  width: 2.3rem;
  background-color: #fff;
  left: 0.15rem;
  top: 0.1rem;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.35s;
          transition-duration: 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.59, 0.01, 0.5, 0.99);
          transition-timing-function: cubic-bezier(0.59, 0.01, 0.5, 0.99);
}
.switch--active .switch__handle {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
input:checked + .switch__toggle {
  box-shadow: inset 0 0 0 2px #2196f3;
  background-color: #2196f3;
}
input:checked + .switch__toggle .switch__handle {
  left: 1.6rem;
}
input:disabled + .switch__toggle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.switch__touch {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: -0.5rem;
  right: -0.5rem;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Icon Tab Bar
  class: tab-bar
  use: Tab Bar
  modifiers:
    :disabled: Disabled state
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="tab-bar">
      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-a" checked="checked">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-stop"></i>
          <div class="tab-bar__label">One</div>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-a">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-record"></i>
          <div class="tab-bar__label">Two</div>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-a">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-star"></i>
          <div class="tab-bar__label">Three</div>
        </button>
      </label>
    </div>
*/
/* topdoc
  name: Tab Bar
  class: tab-bar
  modifiers:
    :disabled: Disabled state
  markup:
    <div class="tab-bar">
      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-c" checked="checked">
        <button class="tab-bar__button">
          <div class="tab-bar__label">One</div>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-c">
        <button class="tab-bar__button">
          <div class="tab-bar__label">Two</div>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-c">
        <button class="tab-bar__button">
          <div class="tab-bar__label">Three</div>
        </button>
      </label>
    </div>
*/
.tab-bar {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  display: table;
  table-layout: fixed;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 4.9rem;
  background-color: #fff;
  border-top: 1px solid #ccc;
  width: 100%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tab-bar {
    border-top: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    background-image: -webkit-linear-gradient(top, #ccc, #ccc 50%, transparent 50%);
    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.tab-bar__item {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  display: table-cell;
  width: auto;
  border-radius: 0;
}
.tab-bar__item > input {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  padding: 0;
  border: 0;
  opacity: 0.001;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.tab-bar__button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  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;
  text-decoration: none;
  padding: 0;
  height: 4.9rem;
  letter-spacing: 0;
  color: #999;
  text-shadow: 0 1px none;
  vertical-align: top;
  background-color: transparent;
  box-shadow: none;
  border-top: none;
  width: 100%;
  font-weight: 400;
  line-height: 4.9rem;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tab-bar__button {
    border-top: none;
  }
}
.tab-bar__icon {
  font-size: 3rem;
  padding: 0;
  line-height: 26px;
  display: block;
  height: 28px;
  margin: 0.3rem 0;
}
.tab-bar__icon .iconfont {
  font-size: 3rem;
}
.tab-bar__label {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  font-size: 1.4rem;
}
.tab-bar__icon + .tab-bar__label {
  line-height: 1;
  margin: 0;
  font-weight: 400;
}
.tab-bar__label:first-child {
  line-height: 4.9rem;
  margin: 0;
  padding: 0;
}
.tab-bar__button {
  color: #999;
}
:checked + .tab-bar__button {
  color: #2196f3;
  background-color: transparent;
  box-shadow: none;
  border-top: none;
}
.tab-bar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.tab-bar__button:focus {
  z-index: 1;
  border-top: none;
  box-shadow: none;
  outline: 0;
}
.tab-bar__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 4.9rem;
  z-index: 0;
}
/* topdoc
  name: Icon Only Tab Bar
  use: Tab Bar
  class: tab-bar
  hint: .tab-bar .fa
  modifiers:
    :disabled: Disabled state
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="tab-bar">
      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-b" checked="checked">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-stop"></i>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-record"></i>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-star"></i>
        </button>
      </label>

    </div>
*/
/* topdoc
  name: Top Tab Bar
  class: tab-bar--top
  use: Tab Bar
  markup:
    <div class="tab-bar tab-bar--top">
      <label class="tab-bar__item">
        <input type="radio" name="top-tab-bar-a" checked="checked">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-stop"></i>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="top-tab-bar-a">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-record"></i>
        </button>
      </label>

      <label class="tab-bar__item">
        <input type="radio" name="top-tab-bar-a">
        <button class="tab-bar__button">
          <i class="tab-bar__icon ion-star"></i>
        </button>
      </label>
    </div>
*/
.tab-bar--top {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: auto;
  border-top: none;
  border-bottom: 1px solid #ccc;
  background: #e6e6e6;
  height: 3rem;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tab-bar--top {
    border-bottom: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: -webkit-linear-gradient(bottom, #ccc, #ccc 50%, transparent 50%);
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.tab-bar--top .tab-bar__label {
  line-height: 3rem;
}
.tab-bar--top .tab-bar__button {
  height: 3rem;
  color: #333;
}
.tab-bar--top :checked + .tab-bar__button {
  color: #2196f3;
}
.tab-bar--top__content {
  top: 4.9rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
/* topdoc
  name: Bordered Top Tab Bar
  class: tab-bar--top-border
  use: Top Tab Bar
  markup:
    <div class="tab-bar tab-bar--top tab-bar--top-border">
      <label class="tab-bar__item tab-bar--top-border__item">
        <input type="radio" name="top-tab-bar-b" checked="checked">
        <button class="tab-bar__button tab-bar--top-border__button">
          Home
        </button>
      </label>

      <label class="tab-bar__item tab-bar--top-border__item">
        <input type="radio" name="top-tab-bar-b">
        <button class="tab-bar__button tab-bar--top-border__button">
          Comments
        </button>
      </label>

      <label class="tab-bar__item tab-bar--top-border__item">
        <input type="radio" name="top-tab-bar-b">
        <button class="tab-bar__button tab-bar--top-border__button">
          Activity
        </button>
      </label>
    </div>
*/
.tab-bar--top-border__button {
  background-color: transparent;
  border-bottom: 4px solid transparent;
}
:checked + .tab-bar--top-border__button {
  background-color: transparent;
  border-bottom: 4px solid #2196f3;
}
.tab-bar--scroll {
  overflow-x: auto;
  display: block;
}
.tab-bar--scroll .tab-bar__item {
  display: inline-block;
  vertical-align: middle;
  padding: 0 12px;
}
.tab-bar--simple {
  background: transparent;
  margin: 0 auto;
  width: 29.6rem;
  height: 2.4rem;
  border: #2196f3 solid 1px;
  border-radius: 0.3rem;
}
.tab-bar--simple .tab-bar__button {
  color: #2196f3;
}
.tab-bar--simple :checked + .tab-bar__button {
  color: #fff;
  background: #2196f3;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Text Input
  class: text-input
  modifiers:
    :disabled: Disabled state
    :focus: Focused
    :invalid: Hover state
  markup:
    <input type="text" class="text-input" placeholder="text" value="">
    <br>
    <input type="text" class="text-input" placeholder="text" value="" disabled>
*/
.text-input {
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  background-color: transparent;
  border: 1px solid #e6e6e6;
  letter-spacing: 0;
  box-shadow: none;
  padding: 1.2rem 1.4rem;
  margin: 0;
  width: 100%;
  font-size: 1.5rem;
  height: 3.6rem;
  font-weight: 400;
  box-sizing: border-box;
}
.text-input:hover {
  border-color: #2196f3;
}
.bh-danger .text-input,
.bh-danger .text-input:hover {
  border-color: #e24034;
}
.text-input::-webkit-input-placeholder {
  color: #999;
}
.text-input::-moz-placeholder {
  color: #999;
}
.text-input::-ms-input-placeholder {
  color: #999;
}
.text-input:-ms-input-placeholder {
  color: #999;
}
.text-input:disabled {
  cursor: default;
  pointer-events: none;
  background-color: transparent;
}
.text-input:disabled::-webkit-input-placeholder {
  background-color: transparent;
  color: #999;
}
.text-input:disabled::-moz-placeholder {
  background-color: transparent;
  color: #999;
}
.text-input:disabled::-ms-input-placeholder {
  background-color: transparent;
  color: #999;
}
.text-input:disabled:-ms-input-placeholder {
  background-color: transparent;
  color: #999;
}
.text-input::-ms-clear {
  display: none;
}
.text-input:invalid {
  background-color: transparent;
  color: #333;
}
/* topdoc
  name: Underbar Text Input
  class: text-input--underbar
  markup:
    <input type="text" class="text-input--underbar" placeholder="text" value="">
    <br>
    <input type="text" class="text-input--underbar" placeholder="text" value="" disabled>
*/
.text-input--underbar {
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  background-color: transparent;
  border: 1px solid #e6e6e6;
  letter-spacing: 0;
  box-shadow: none;
  padding: 1.2rem 1.4rem;
  margin: 0;
  width: 100%;
  font-size: 1.5rem;
  height: 3.6rem;
  font-weight: 400;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #2196f3;
  border-radius: 0px;
}
.text-input--underbar:disabled {
  cursor: default;
  pointer-events: none;
  background-color: transparent;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #2196f3;
}
.text-input--underbar:disabled::-webkit-input-placeholder {
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:disabled::-moz-placeholder {
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:disabled::-ms-input-placeholder {
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:disabled:-ms-input-placeholder {
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:invalid {
  background-color: transparent;
  color: #333;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Textarea
  class: textarea
  modifiers:
    :disabled: Disabled state
  markup:
    <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>
  showcase:
*/
.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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  vertical-align: top;
  resize: none;
  outline: none;
  padding: 5px 5px 5px 5px;
  font-size: 1.5rem;
  font-weight: 400;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  color: #333;
  letter-spacing: 0;
  box-shadow: none;
  -webkit-appearance: none;
  width: 100%;
}
.textarea:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.textarea::-webkit-input-placeholder,
.textarea::-moz-placeholder,
.textarea:-ms-input-placeholder {
  color: #999;
}
/* topdoc
  name: Textarea Transparent
  class: textarea--transparent
  modifiers:
    :disabled: Disabled state
  markup:
    <textarea class="textarea--transparent" rows="3" placeholder="Textarea"></textarea>
  showcase:
*/
.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: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  vertical-align: top;
  resize: none;
  outline: none;
  padding: 5px 5px 5px 5px;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.5rem;
  font-weight: 400;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  color: #333;
  letter-spacing: 0;
  box-shadow: none;
  -webkit-appearance: none;
  width: 100%;
}
.textarea--transparent:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.textarea--transparent::-webkit-input-placeholder,
.textarea--transparent::-moz-placeholder,
.textarea--transparent:-ms-input-placeholder {
  color: #999;
}
/**
*
* 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.
*
*/
/* topdoc
  name: Toolbar Button
  class: toolbar-button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :focus: Focused
  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> Label
    </button>

    <button class="toolbar-button toolbar-button--outline">
      <i class="fa fa-bell" style="font-size:17px"></i> Label
    </button>
*/
.toolbar-button,
.toolbar-button--outline,
.toolbar-button--quiet {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1rem;
  padding: 4px 10px;
  letter-spacing: 0;
  color: #2196f3;
  text-shadow: 0 1px none;
  background-color: rgba(0,0,0,0);
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: 400;
  font-size: 20px;
  -webkit-transition: none;
  transition: none;
}
.toolbar-button:active,
.toolbar-button--outline:active,
.toolbar-button--quiet:active {
  background-color: rgba(0,0,0,0);
  -webkit-transition: none;
  transition: none;
  opacity: 0.2;
}
.toolbar-button:disabled,
.toolbar-button[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.toolbar-button:focus,
.toolbar-button--outline:focus,
.toolbar-button--quiet:focus {
  outline: 0;
  -webkit-transition: none;
  transition: none;
}
.toolbar-button:hover,
.toolbar-button--outline:hover,
.toolbar-button--quiet:hover {
  -webkit-transition: none;
  transition: none;
}
.toolbar-button--outline {
  border: 1px solid #2196f3;
  margin: auto 8px;
  padding-left: 6px;
  padding-right: 6px;
}
.back-button {
  height: 44px;
  line-height: 44px;
  padding-left: 8px;
  color: #2196f3;
  background-color: rgba(0,0,0,0);
}
.back-button:active {
  opacity: 0.2;
}
.back-button__label {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  margin-left: 12px;
}
.back-button__icon {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}
.back-button__icon:before {
  font-family: 'Ionicons';
  content: '\f3cf';
  font-size: 32px;
}
@-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%;
  }
}
@-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%;
  }
}

@charset "UTF-8";
/**
设置字体和行高
*/
/**
设置padding或margin值
*/
/**
设置水平方向的padding或margin值
*/
/**
设置垂直方向的padding或margin值
*/
/**
设置padding-top或margin-top值
*/
/**
设置padding-right或margin-right值
*/
/**
设置padding-bottom或margin-bottom值
*/
/**
设置padding-left或margin-left值
*/
/**
设置padding或margin各种值
*/
/**
设置字体颜色
*/
/**
设置背景颜色
*/
/**
设置边框颜色
*/
/**
设置字体,背景,边框颜色
*/
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body,
div, iframe, p,
h1, h2, h3, h4, h5, h6,
img, i, span, caption,
dl, dt, dd, ol, ul, li,
form, label,
table, tbody, tfoot, thead, tr, th, td,
article, aside, footer, header, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

body {
  font-family: "PingFang SC", "San Fransico", "source Han Sans", "Roboto", -apple-system, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background-color: #e8e9ec; }

article, aside, footer, header, nav, section {
  display: block; }

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

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

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {
  list-style: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  outline: none; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0; }

input, select, img {
  vertical-align: middle; }

img {
  border: 0; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

.bh-animated {
  -webkit-animation-duration: 0.45s;
          animation-duration: 0.45s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

.bh-animate-scale {
  -webkit-transform: scale(0);
          transform: scale(0); }
  .bh-animate-scale.bh-active {
    -webkit-transform: scale(1);
            transform: scale(1); }

.bh-animate-origin-TR {
  -webkit-transform-origin: top right;
          transform-origin: top right; }

.bh-animate-origin-TL {
  -webkit-transform-origin: top left;
          transform-origin: top left; }

.bh-animate-origin-BR {
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right; }

.bh-animate-origin-BL {
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left; }

@-webkit-keyframes bh-animate-into-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  50% {
    opacity: 0.8; }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes bh-animate-into-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  50% {
    opacity: 0.8; }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.bh-animate-into-bottom {
  -webkit-animation-name: bh-animate-into-bottom;
          animation-name: bh-animate-into-bottom; }

@-webkit-keyframes bh-animate-out-bottom {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  50% {
    opacity: 0.4; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes bh-animate-out-bottom {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  50% {
    opacity: 0.4; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.bh-animate-out-bottom {
  -webkit-animation-name: bh-animate-out-bottom;
          animation-name: bh-animate-out-bottom; }

@-webkit-keyframes bh-animate-fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes bh-animate-fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.bh-animate-fadeOut {
  -webkit-animation-name: bh-animate-fadeOut;
          animation-name: bh-animate-fadeOut; }

@-webkit-keyframes bh-animate-fadeOut-lv1 {
  0% {
    opacity: 0.4; }
  100% {
    opacity: 0; } }

@keyframes bh-animate-fadeOut-lv1 {
  0% {
    opacity: 0.4; }
  100% {
    opacity: 0; } }

.bh-animate-fadeOut-lv1 {
  -webkit-animation-name: bh-animate-fadeOut-lv1;
          animation-name: bh-animate-fadeOut-lv1; }

@-webkit-keyframes bh-animate-fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes bh-animate-fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.bh-animate-fadeIn {
  -webkit-animation-name: bh-animate-fadeIn;
          animation-name: bh-animate-fadeIn; }

@-webkit-keyframes bh-animate-fadeIn-lv1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 0.4; } }

@keyframes bh-animate-fadeIn-lv1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 0.4; } }

.bh-animate-fadeIn-lv1 {
  -webkit-animation-name: bh-animate-fadeIn-lv1;
          animation-name: bh-animate-fadeIn-lv1; }

/**
标题字
*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

h1 {
  font-size: 1.7rem;
  line-height: 2rem;
  font-weight: normal; }

h2 {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: normal; }

h3 {
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-weight: normal; }

h4 {
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: normal; }

h5 {
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: normal; }

h6 {
  font-size: 1.1rem;
  line-height: 1.6rem;
  font-weight: normal; }

.bh-font-caption {
  color: #999;
  font-size: 1.1rem;
  line-height: 1.5rem; }

/**
颜色
*/
.bh-color-theme-lv1 {
  color: #3E50B4 !important; }

.bh-bgColor-theme-lv1 {
  background-color: #3E50B4 !important; }

.bh-bColor-theme-lv1 {
  border-color: #3E50B4 !important; }

.bh-color-theme-lv2 {
  color: #7C88CC !important; }

.bh-bgColor-theme-lv2 {
  background-color: #7C88CC !important; }

.bh-bColor-theme-lv2 {
  border-color: #7C88CC !important; }

.bh-color-theme-lv3 {
  color: #D8DCF0 !important; }

.bh-bgColor-theme-lv3 {
  background-color: #D8DCF0 !important; }

.bh-bColor-theme-lv3 {
  border-color: #D8DCF0 !important; }

.bh-color-primary-lv1 {
  color: #2196F3 !important; }

.bh-bgColor-primary-lv1 {
  background-color: #2196F3 !important; }

.bh-bColor-primary-lv1 {
  border-color: #2196F3 !important; }

.bh-color-primary-lv2 {
  color: #68B8F7 !important; }

.bh-bgColor-primary-lv2 {
  background-color: #68B8F7 !important; }

.bh-bColor-primary-lv2 {
  border-color: #68B8F7 !important; }

.bh-color-primary-lv3 {
  color: #D3EAFD !important; }

.bh-bgColor-primary-lv3 {
  background-color: #D3EAFD !important; }

.bh-bColor-primary-lv3 {
  border-color: #D3EAFD !important; }

.bh-color-success-lv1 {
  color: #60BE29 !important; }

.bh-bgColor-success-lv1 {
  background-color: #60BE29 !important; }

.bh-bColor-success-lv1 {
  border-color: #60BE29 !important; }

.bh-color-success-lv2 {
  color: #93D36E !important; }

.bh-bgColor-success-lv2 {
  background-color: #93D36E !important; }

.bh-bColor-success-lv2 {
  border-color: #93D36E !important; }

.bh-color-success-lv3 {
  color: #DFF2D4 !important; }

.bh-bgColor-success-lv3 {
  background-color: #DFF2D4 !important; }

.bh-bColor-success-lv3 {
  border-color: #DFF2D4 !important; }

.bh-color-warning-lv1 {
  color: #EF971C !important; }

.bh-bgColor-warning-lv1 {
  background-color: #EF971C !important; }

.bh-bColor-warning-lv1 {
  border-color: #EF971C !important; }

.bh-color-warning-lv2 {
  color: #F4B865 !important; }

.bh-bgColor-warning-lv2 {
  background-color: #F4B865 !important; }

.bh-bColor-warning-lv2 {
  border-color: #F4B865 !important; }

.bh-color-warning-lv3 {
  color: #FCEAD2 !important; }

.bh-bgColor-warning-lv3 {
  background-color: #FCEAD2 !important; }

.bh-bColor-warning-lv3 {
  border-color: #FCEAD2 !important; }

.bh-color-danger-lv1 {
  color: #E24034 !important; }

.bh-bgColor-danger-lv1 {
  background-color: #E24034 !important; }

.bh-bColor-danger-lv1 {
  border-color: #E24034 !important; }

.bh-color-danger-lv2 {
  color: #EB7D75 !important; }

.bh-bgColor-danger-lv2 {
  background-color: #EB7D75 !important; }

.bh-bColor-danger-lv2 {
  border-color: #EB7D75 !important; }

.bh-color-danger-lv3 {
  color: #F9D9D6 !important; }

.bh-bgColor-danger-lv3 {
  background-color: #F9D9D6 !important; }

.bh-bColor-danger-lv3 {
  border-color: #F9D9D6 !important; }

.bh-color-gray-lv1 {
  color: #403f44 !important; }

.bh-bgColor-gray-lv1 {
  background-color: #403f44 !important; }

.bh-bColor-gray-lv1 {
  border-color: #403f44 !important; }

.bh-color-gray-lv2 {
  color: #666 !important; }

.bh-bgColor-gray-lv2 {
  background-color: #666 !important; }

.bh-bColor-gray-lv2 {
  border-color: #666 !important; }

.bh-color-gray-lv3 {
  color: #999 !important; }

.bh-bgColor-gray-lv3 {
  background-color: #999 !important; }

.bh-bColor-gray-lv3 {
  border-color: #999 !important; }

.bh-color-gray-lv4 {
  color: #ccc !important; }

.bh-bgColor-gray-lv4 {
  background-color: #ccc !important; }

.bh-bColor-gray-lv4 {
  border-color: #ccc !important; }

.bh-color-gray-lv5 {
  color: #ddd !important; }

.bh-bgColor-gray-lv5 {
  background-color: #ddd !important; }

.bh-bColor-gray-lv5 {
  border-color: #ddd !important; }

.bh-color-gray-lv6 {
  color: #e6e6e6 !important; }

.bh-bgColor-gray-lv6 {
  background-color: #e6e6e6 !important; }

.bh-bColor-gray-lv6 {
  border-color: #e6e6e6 !important; }

.bh-color-gray-lv7 {
  color: #efefef !important; }

.bh-bgColor-gray-lv7 {
  background-color: #efefef !important; }

.bh-bColor-gray-lv7 {
  border-color: #efefef !important; }

.bh-color-white {
  color: #fff !important; }

.bh-bgColor-white {
  background-color: #fff !important; }

.bh-bColor-white {
  border-color: #fff !important; }

.bh-base-bg-color {
  background-color: #e8e9ec; }

.bh-str-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.bh-clearfix {
  clear: both; }
  .bh-clearfix:after {
    content: " ";
    display: table;
    clear: both; }

.bh-clearfix-child:after {
  content: " ";
  display: table;
  clear: both; }

.bh-pull-right {
  float: right !important; }

.bh-pull-left {
  float: left !important; }

.bh-m-clear {
  margin: 0 !important; }

.bh-ml-clear {
  margin-left: 0 !important; }

.bh-mr-clear {
  margin-right: 0 !important; }

.bh-mt-clear {
  margin-top: 0 !important; }

.bh-mb-clear {
  margin-bottom: 0 !important; }

.bh-mh-clear {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.bh-mv-clear {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.bh-m-4 {
  margin: 0.2rem !important; }

.bh-mh-4 {
  margin-left: 0.2rem !important;
  margin-right: 0.2rem !important; }

.bh-mv-4 {
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem !important; }

.bh-mt-4 {
  margin-top: 0.2rem !important; }

.bh-mr-4 {
  margin-right: 0.2rem !important; }

.bh-mb-4 {
  margin-bottom: 0.2rem !important; }

.bh-ml-4 {
  margin-left: 0.2rem !important; }

.bh-m-8 {
  margin: 0.4rem !important; }

.bh-mh-8 {
  margin-left: 0.4rem !important;
  margin-right: 0.4rem !important; }

.bh-mv-8 {
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important; }

.bh-mt-8 {
  margin-top: 0.4rem !important; }

.bh-mr-8 {
  margin-right: 0.4rem !important; }

.bh-mb-8 {
  margin-bottom: 0.4rem !important; }

.bh-ml-8 {
  margin-left: 0.4rem !important; }

.bh-m-16 {
  margin: 0.8rem !important; }

.bh-mh-16 {
  margin-left: 0.8rem !important;
  margin-right: 0.8rem !important; }

.bh-mv-16 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important; }

.bh-mt-16 {
  margin-top: 0.8rem !important; }

.bh-mr-16 {
  margin-right: 0.8rem !important; }

.bh-mb-16 {
  margin-bottom: 0.8rem !important; }

.bh-ml-16 {
  margin-left: 0.8rem !important; }

.bh-m-24 {
  margin: 1.2rem !important; }

.bh-mh-24 {
  margin-left: 1.2rem !important;
  margin-right: 1.2rem !important; }

.bh-mv-24 {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important; }

.bh-mt-24 {
  margin-top: 1.2rem !important; }

.bh-mr-24 {
  margin-right: 1.2rem !important; }

.bh-mb-24 {
  margin-bottom: 1.2rem !important; }

.bh-ml-24 {
  margin-left: 1.2rem !important; }

.bh-m-32 {
  margin: 1.6rem !important; }

.bh-mh-32 {
  margin-left: 1.6rem !important;
  margin-right: 1.6rem !important; }

.bh-mv-32 {
  margin-top: 1.6rem !important;
  margin-bottom: 1.6rem !important; }

.bh-mt-32 {
  margin-top: 1.6rem !important; }

.bh-mr-32 {
  margin-right: 1.6rem !important; }

.bh-mb-32 {
  margin-bottom: 1.6rem !important; }

.bh-ml-32 {
  margin-left: 1.6rem !important; }

.bh-p-clear {
  padding: 0 !important; }

.bh-pl-clear {
  padding-left: 0 !important; }

.bh-pr-clear {
  padding-right: 0 !important; }

.bh-pt-clear {
  padding-top: 0 !important; }

.bh-pb-clear {
  padding-bottom: 0 !important; }

.bh-ph-clear {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.bh-pv-clear {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.bh-p-4 {
  padding: 0.2rem !important; }

.bh-ph-4 {
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important; }

.bh-pv-4 {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important; }

.bh-pt-4 {
  padding-top: 0.2rem !important; }

.bh-pr-4 {
  padding-right: 0.2rem !important; }

.bh-pb-4 {
  padding-bottom: 0.2rem !important; }

.bh-pl-4 {
  padding-left: 0.2rem !important; }

.bh-p-8 {
  padding: 0.4rem !important; }

.bh-ph-8 {
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important; }

.bh-pv-8 {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important; }

.bh-pt-8 {
  padding-top: 0.4rem !important; }

.bh-pr-8 {
  padding-right: 0.4rem !important; }

.bh-pb-8 {
  padding-bottom: 0.4rem !important; }

.bh-pl-8 {
  padding-left: 0.4rem !important; }

.bh-p-16 {
  padding: 0.8rem !important; }

.bh-ph-16 {
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important; }

.bh-pv-16 {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important; }

.bh-pt-16 {
  padding-top: 0.8rem !important; }

.bh-pr-16 {
  padding-right: 0.8rem !important; }

.bh-pb-16 {
  padding-bottom: 0.8rem !important; }

.bh-pl-16 {
  padding-left: 0.8rem !important; }

.bh-p-24 {
  padding: 1.2rem !important; }

.bh-ph-24 {
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important; }

.bh-pv-24 {
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important; }

.bh-pt-24 {
  padding-top: 1.2rem !important; }

.bh-pr-24 {
  padding-right: 1.2rem !important; }

.bh-pb-24 {
  padding-bottom: 1.2rem !important; }

.bh-pl-24 {
  padding-left: 1.2rem !important; }

.bh-p-32 {
  padding: 1.6rem !important; }

.bh-ph-32 {
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important; }

.bh-pv-32 {
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important; }

.bh-pt-32 {
  padding-top: 1.6rem !important; }

.bh-pr-32 {
  padding-right: 1.6rem !important; }

.bh-pb-32 {
  padding-bottom: 1.6rem !important; }

.bh-pl-32 {
  padding-left: 1.6rem !important; }

.bh-box-shadow-lv1 {
  box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.28); }

.bh-box-shadow-lv2 {
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.28); }

.bh-box-shadow-lv3 {
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.24); }

.bh-box-shadow-lv4 {
  box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.24); }

.bh-text-left {
  text-align: left; }

.bh-text-center {
  text-align: center; }

.bh-text-right {
  text-align: right; }

.bh-overflowHide-relative {
  position: relative;
  overflow: hidden; }

.bh-overflowHide-absolute {
  position: absolute;
  overflow: hidden; }

bh-carousel-btns {
  position: absolute;
  width: 100%; }
  bh-carousel-btns[center] {
    text-align: center; }
  bh-carousel-btns[right] {
    text-align: right; }
  bh-carousel-btns[bottom] {
    bottom: 0; }

.bh-carousel-btns-item {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-top-left-radius: 999px;
  /* 左上角 */
  border-top-right-radius: 999px;
  /* 右上角 */
  border-bottom-right-radius: 999px;
  /* 右下角 */
  border-bottom-left-radius: 999px;
  /* 左下角 */
  border-radius: 999px;
  background-color: #ddd;
  background-clip: padding-box; }
  .bh-carousel-btns-item.bh-active {
    background-color: #2196F3; }

bh-input-select {
  display: block;
  position: relative;
  height: 3.6rem;
  border: 1px solid #e6e6e6;
  font-size: 1.5rem;
  padding: 0.8rem 1.2rem; }

.bh-input-select-label {
  float: left; }

.bh-input-select-caption {
  color: #999;
  float: right; }
  .bh-input-select-caption i {
    float: right;
    margin-left: 0.6rem;
    font-size: 1.8rem; }

bh-input {
  display: block;
  position: relative;
  font-size: 1.5rem; }

.bh-input {
  width: 100%;
  height: 3.6rem;
  border: 1px solid #e6e6e6;
  padding: 0 1.2rem 0 9.2rem;
  font-size: 1.5rem; }
  .bh-input:focus {
    border-color: #2196F3; }

.bh-input-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.8rem 1.2rem;
  width: 8rem;
  height: 3.6rem; }

bh-modal-bottom,
.bh-modal-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; }
  bh-modal-bottom .icon-close,
  .bh-modal-bottom .icon-close {
    position: absolute;
    font-size: 1.9rem;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 9999; }

.bh-modal-bottom-content {
  position: absolute;
  width: 100%;
  max-height: 80%;
  background-color: #fff;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 1.6rem 0.8rem; }

.bh-modal-bottom-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #efefef; }

.bh-search-bar {
  width: 100%;
  border-radius: 8px;
  background-color: #efefef;
  height: 3rem;
  line-height: 3rem;
  text-align: center; }
  .bh-search-bar .icon-search {
    font-size: 1.3rem;
    color: #999;
    cursor: pointer; }
  .bh-search-bar span {
    font-size: 1.2rem; }

.bh-search-wrap {
  padding: 0 1.3rem 0 0.8rem; }
  .bh-search-wrap .bh-search-cancel {
    color: #2196F3;
    font-size: 1.2rem;
    margin: 1rem 0 0 1rem;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle; }

.bh-search-box {
  display: inline-block;
  background: #efefef;
  border-radius: 0.4rem;
  width: calc(100% - 3.8rem);
  height: 3rem;
  padding: 0 0.75rem; }
  .bh-search-box .bh-search-input {
    border: none;
    background: none;
    width: calc(100% - 3.2rem);
    font-size: 1.2rem;
    padding: 0 0.5rem;
    line-height: 1.4rem;
    margin-top: 0.8rem;
    vertical-align: middle; }
  .bh-search-box .iconfont {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0.8rem; }
  .bh-search-box .icon-search {
    font-size: 1.3rem;
    color: #999; }
  .bh-search-box .icon-cancel {
    display: none;
    font-size: 1.2rem;
    color: #999; }

bh-select-roll {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none; }

.bh-select-roll-body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); }

.bh-select-roll-box,
.bh-select-roll-list {
  height: 3rem;
  line-height: 3rem;
  margin-top: -1.5rem; }

.bh-select-roll-box {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999; }

.bh-select-roll-list {
  z-index: 1;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%; }
  .bh-select-roll-list li {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    overflow: hidden;
    font-size: 1.6rem;
    color: #999;
    padding: 0 0.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
    visibility: hidden; }
    .bh-select-roll-list li.bh-active {
      color: #403f44;
      visibility: visible; }
    .bh-select-roll-list li.bh-visible {
      visibility: visible; }

bh-stepping {
  display: block; }
  bh-stepping:after {
    content: "";
    display: table;
    clear: both; }

.bh-stepping-icon {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  background-color: #ccc;
  text-align: center; }
  .bh-stepping-icon.bh-left, .bh-stepping-icon.bh-right {
    float: left; }
  .bh-stepping-icon.bh-active {
    background-color: #2196F3; }
  .bh-stepping-icon i {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 1.2rem; }

.bh-stepping-input {
  font-size: 1.5rem;
  width: 4.8rem;
  height: 2.2rem;
  text-align: center;
  border: none;
  background-color: transparent;
  float: left; }