/*! onsenui - v2.11.2 - 2021-01-12 */
ons-page, ons-navigator,
ons-tabbar,
ons-gesture-detector {
  display: block;
  touch-action: manipulation; /* Remove click delay */
}

ons-navigator,
ons-tabbar,
ons-splitter,
ons-action-sheet,
ons-dialog,
ons-toast,
ons-alert-dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  touch-action: manipulation; /* Remove click delay */
}

ons-toast {
  pointer-events: none;
}

ons-toast .toast {
  pointer-events: auto;
}

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

ons-page, ons-navigator, ons-tabbar, ons-dialog, ons-alert-dialog, ons-action-sheet, ons-toast {
  z-index: 2;
}

ons-fab, ons-speed-dial {
  z-index: 10001;
}

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, .page__content,
.page--material, .page--material__content {
  background-color: transparent !important;
  background: transparent !important;
}

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

.page.overflow-visible,
.page.overflow-visible .page,
.page.overflow-visible .page__content,
.page.overflow-visible ons-navigator,
.page.overflow-visible ons-splitter {
  overflow: visible;
}

.page.overflow-visible .page__content.content-swiping,
.page.overflow-visible .page__content.content-swiping .page,
.page.overflow-visible .page__content.content-swiping .page__content {
  overflow: auto;
}

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

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

.page[status-bar-fill] > .toolbar:not(.toolbar--transparent) + .page__background,
.page[status-bar-fill] > .toolbar:not(.toolbar--cover-content) + .page__background + .page__content {
  top: 64px;
}

.page[status-bar-fill] > .toolbar--material:not(.toolbar-transparent) + .page__background,
.page[status-bar-fill] > .toolbar--material:not(.toolbar--cover-content) + .page__background + .page__content {
  top: 76px;
}

.page[status-bar-fill] > .toolbar.toolbar--transparent + .page__background {
  top: 0;
}

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

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

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

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

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

.page__content > .list:not(.list--material):first-child {
  margin-top: -1px; /* Avoid double border with toolbar */
}

.page--wrapper > .page__background {
  display: none;
}

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

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

ons-range[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

ons-pull-hook {
  position: relative;
  display: block;
  margin: auto;
  text-align: center;
  z-index: 20002;
}

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: 4;
  background-color: rgba(0, 0, 0, 0.1);
  display: none;
  opacity: 0;
}

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

ons-splitter-side {
  right: auto;
  z-index: 2;
}

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

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

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

ons-splitter-side[mode="split"] {
  z-index: 3;
}

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

ons-range, ons-select {
  display: inline-block;
}

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

ons-select > select {
  width: 100%;
}

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

ons-carousel[fullscreen] {
  height: 100%;
}

.ons-status-bar-mock {
  position: absolute;
  width: 100%;
  height: 20px;
  padding: 0 16px 0 6px;
  box-sizing: border-box;
  z-index: 30000;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  font-size: 12px;
  line-height: 20px;
  font-family: Arial, Helvetica;
}

.ons-status-bar-mock i {
  padding: 0 2px;
}

.ons-status-bar-mock.android {
  color: white;
  background-color: #222;
  font-family: Roboto, Arial, Helvetica;
}

.ons-status-bar-mock.android ~ * {
  top: 20px;
  bottom: 0;
  position: inherit;
  width: 100%;
}

.ons-ios-scroll-fix .page:not(.page--wrapper)[shown] > .page__content {
  overflow-y: hidden;
}
.ons-ios-scroll-fix ons-splitter-side > .page:not(.page--wrapper)[shown] > .page__content {
  overflow-y: auto;
}

ons-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-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;
  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;
  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;
  align-items: center;
  text-align: inherit;
}

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

ons-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-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;
  -moz-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;
  -moz-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;
  line-height: inherit;
  font-style: normal;
  font-weight: normal;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.segment__button .ons-icon {
  line-height: initial;
}

:not(ons-toolbar-button):not(ons-action-sheet-button):not(.segment__button) > .ons-icon--ion {
  line-height: 0.75em;
  vertical-align: -25%;
}

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

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

@-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);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

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

.ons-icon[rotate="270"] {
  -webkit-transform: rotate(270deg);
  -moz-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-icon with Font Awesome backward compatibility
 */
.ons-icon.fa {
  font-family: 'Font Awesome 5 Brands', 'Font Awesome 5 Free';
  font-weight: 900;
}

ons-input, ons-radio, ons-checkbox, ons-search-input {
  display: inline-block;
  position: relative;
}

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

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

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

ons-input[disabled],
ons-radio[disabled],
ons-checkbox[disabled],
ons-segment[disabled],
ons-search-input[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

ons-input input.text-input--material::-webkit-input-placeholder {
  color: transparent;
}

ons-input input.text-input--material::-moz-placeholder {
  color: transparent;
}

ons-input input.text-input--material:-ms-input-placeholder {
  color: transparent;
}

/* Suppress safe area support for pages in splitter sides */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content {
    padding-right: 0;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content {
    padding-left: 0;
  }
}
/* Support the situation that a progress bar is located just below a toolbar */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .page__content > ons-progress-bar > .progress-bar {
    margin-left: -44px;
    margin-right: -44px;
    width: calc(100% + 88px);
  }
}
/* Lists in .page__content in splitter-sides */
@media (orientation: landscape) {
  /* Suppress left safe area support for pages in right splitter sides */
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content > .list:not(.list--inset) {
    margin-left: 0;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content > .list:not(.list--inset) > .list-header {
    padding-left: 15px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content > .list:not(.list--inset) > .list-item {
    padding-left: 14px;
  }

  /* Suppress right safe area support for pages in left splitter sides */
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) {
    margin-right: 0;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item--chevron:before {
    right: 16px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
    padding-right: 6px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
    padding-right: 12px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
    padding-right: 30px;
  }
}

/*
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: 32px;
  height: 32px;
}

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

.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;
}

/* FIXME */
ons-list-item .ripple__wave,
ons-list-item .ripple__background,
.button--material--flat .ripple__wave,
.button--material--flat .ripple__background {
  background: rgba(189, 189, 189, 0.3);
}

.ripple--light-gray__wave,
.ripple--light-gray__background {
  background: rgba(189, 189, 189, 0.3);
}


/*
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-swiper {
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

.ons-swiper-target {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  z-index: 1;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.ons-swiper-target--vertical {
  -webkit-flex-direction: column;
          flex-direction: column;
}

.ons-swiper-target > * {
  height: inherit;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative !important;
}

.ons-swiper-target.active:not(.swiping) > .page:not([shown]) {
  visibility: hidden;
}

.ons-swiper-tabbar .tabbar--material__button:after {
  display: none;
}

.ons-swiper-blocker {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none
}


/*!
 *  Material Design Iconic Font by Sergey Kupletsky (@zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/
 *  License - http://zavoloklom.github.io/material-design-iconic-font/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
.zmdi {
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.zmdi-hc-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.zmdi-hc-2x {
  font-size: 2em;
}
.zmdi-hc-3x {
  font-size: 3em;
}
.zmdi-hc-4x {
  font-size: 4em;
}
.zmdi-hc-5x {
  font-size: 5em;
}
.zmdi-hc-fw {
  width: 1.28571429em;
  text-align: center;
}
.zmdi-hc-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.zmdi-hc-ul > li {
  position: relative;
}
.zmdi-hc-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.zmdi-hc-li.zmdi-hc-lg {
  left: -1.85714286em;
}
.zmdi-hc-border {
  padding: .1em .25em;
  border: solid 0.1em #9e9e9e;
  border-radius: 2px;
}
.zmdi-hc-border-circle {
  padding: .1em .25em;
  border: solid 0.1em #9e9e9e;
  border-radius: 50%;
}
.zmdi.pull-left {
  float: left;
  margin-right: .15em;
}
.zmdi.pull-right {
  float: right;
  margin-left: .15em;
}
.zmdi-hc-spin {
  -webkit-animation: zmdi-spin 1.5s infinite linear;
          animation: zmdi-spin 1.5s infinite linear;
}
.zmdi-hc-spin-reverse {
  -webkit-animation: zmdi-spin-reverse 1.5s infinite linear;
          animation: zmdi-spin-reverse 1.5s infinite linear;
}
@-webkit-keyframes zmdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes zmdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@-webkit-keyframes zmdi-spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
            transform: rotate(-359deg);
  }
}
@keyframes zmdi-spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
            transform: rotate(-359deg);
  }
}
.zmdi-hc-rotate-90 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.zmdi-hc-rotate-180 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.zmdi-hc-rotate-270 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.zmdi-hc-flip-horizontal {
  -webkit-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
.zmdi-hc-flip-vertical {
  -webkit-transform: scale(1, -1);
      -ms-transform: scale(1, -1);
          transform: scale(1, -1);
}
.zmdi-hc-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.zmdi-hc-stack-1x,
.zmdi-hc-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.zmdi-hc-stack-1x {
  line-height: inherit;
}
.zmdi-hc-stack-2x {
  font-size: 2em;
}
.zmdi-hc-inverse {
  color: #ffffff;
}
/* Material Design Iconic Font uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.zmdi-3d-rotation:before {
  content: '\f101';
}
.zmdi-airplane-off:before {
  content: '\f102';
}
.zmdi-airplane:before {
  content: '\f103';
}
.zmdi-album:before {
  content: '\f104';
}
.zmdi-archive:before {
  content: '\f105';
}
.zmdi-assignment-account:before {
  content: '\f106';
}
.zmdi-assignment-alert:before {
  content: '\f107';
}
.zmdi-assignment-check:before {
  content: '\f108';
}
.zmdi-assignment-o:before {
  content: '\f109';
}
.zmdi-assignment-return:before {
  content: '\f10a';
}
.zmdi-assignment-returned:before {
  content: '\f10b';
}
.zmdi-assignment:before {
  content: '\f10c';
}
.zmdi-attachment-alt:before {
  content: '\f10d';
}
.zmdi-attachment:before {
  content: '\f10e';
}
.zmdi-audio:before {
  content: '\f10f';
}
.zmdi-badge-check:before {
  content: '\f110';
}
.zmdi-balance-wallet:before {
  content: '\f111';
}
.zmdi-balance:before {
  content: '\f112';
}
.zmdi-battery-alert:before {
  content: '\f113';
}
.zmdi-battery-flash:before {
  content: '\f114';
}
.zmdi-battery-unknown:before {
  content: '\f115';
}
.zmdi-battery:before {
  content: '\f116';
}
.zmdi-bike:before {
  content: '\f117';
}
.zmdi-block-alt:before {
  content: '\f118';
}
.zmdi-block:before {
  content: '\f119';
}
.zmdi-boat:before {
  content: '\f11a';
}
.zmdi-book-image:before {
  content: '\f11b';
}
.zmdi-book:before {
  content: '\f11c';
}
.zmdi-bookmark-outline:before {
  content: '\f11d';
}
.zmdi-bookmark:before {
  content: '\f11e';
}
.zmdi-brush:before {
  content: '\f11f';
}
.zmdi-bug:before {
  content: '\f120';
}
.zmdi-bus:before {
  content: '\f121';
}
.zmdi-cake:before {
  content: '\f122';
}
.zmdi-car-taxi:before {
  content: '\f123';
}
.zmdi-car-wash:before {
  content: '\f124';
}
.zmdi-car:before {
  content: '\f125';
}
.zmdi-card-giftcard:before {
  content: '\f126';
}
.zmdi-card-membership:before {
  content: '\f127';
}
.zmdi-card-travel:before {
  content: '\f128';
}
.zmdi-card:before {
  content: '\f129';
}
.zmdi-case-check:before {
  content: '\f12a';
}
.zmdi-case-download:before {
  content: '\f12b';
}
.zmdi-case-play:before {
  content: '\f12c';
}
.zmdi-case:before {
  content: '\f12d';
}
.zmdi-cast-connected:before {
  content: '\f12e';
}
.zmdi-cast:before {
  content: '\f12f';
}
.zmdi-chart-donut:before {
  content: '\f130';
}
.zmdi-chart:before {
  content: '\f131';
}
.zmdi-city-alt:before {
  content: '\f132';
}
.zmdi-city:before {
  content: '\f133';
}
.zmdi-close-circle-o:before {
  content: '\f134';
}
.zmdi-close-circle:before {
  content: '\f135';
}
.zmdi-close:before {
  content: '\f136';
}
.zmdi-cocktail:before {
  content: '\f137';
}
.zmdi-code-setting:before {
  content: '\f138';
}
.zmdi-code-smartphone:before {
  content: '\f139';
}
.zmdi-code:before {
  content: '\f13a';
}
.zmdi-coffee:before {
  content: '\f13b';
}
.zmdi-collection-bookmark:before {
  content: '\f13c';
}
.zmdi-collection-case-play:before {
  content: '\f13d';
}
.zmdi-collection-folder-image:before {
  content: '\f13e';
}
.zmdi-collection-image-o:before {
  content: '\f13f';
}
.zmdi-collection-image:before {
  content: '\f140';
}
.zmdi-collection-item-1:before {
  content: '\f141';
}
.zmdi-collection-item-2:before {
  content: '\f142';
}
.zmdi-collection-item-3:before {
  content: '\f143';
}
.zmdi-collection-item-4:before {
  content: '\f144';
}
.zmdi-collection-item-5:before {
  content: '\f145';
}
.zmdi-collection-item-6:before {
  content: '\f146';
}
.zmdi-collection-item-7:before {
  content: '\f147';
}
.zmdi-collection-item-8:before {
  content: '\f148';
}
.zmdi-collection-item-9-plus:before {
  content: '\f149';
}
.zmdi-collection-item-9:before {
  content: '\f14a';
}
.zmdi-collection-item:before {
  content: '\f14b';
}
.zmdi-collection-music:before {
  content: '\f14c';
}
.zmdi-collection-pdf:before {
  content: '\f14d';
}
.zmdi-collection-plus:before {
  content: '\f14e';
}
.zmdi-collection-speaker:before {
  content: '\f14f';
}
.zmdi-collection-text:before {
  content: '\f150';
}
.zmdi-collection-video:before {
  content: '\f151';
}
.zmdi-compass:before {
  content: '\f152';
}
.zmdi-cutlery:before {
  content: '\f153';
}
.zmdi-delete:before {
  content: '\f154';
}
.zmdi-dialpad:before {
  content: '\f155';
}
.zmdi-dns:before {
  content: '\f156';
}
.zmdi-drink:before {
  content: '\f157';
}
.zmdi-edit:before {
  content: '\f158';
}
.zmdi-email-open:before {
  content: '\f159';
}
.zmdi-email:before {
  content: '\f15a';
}
.zmdi-eye-off:before {
  content: '\f15b';
}
.zmdi-eye:before {
  content: '\f15c';
}
.zmdi-eyedropper:before {
  content: '\f15d';
}
.zmdi-favorite-outline:before {
  content: '\f15e';
}
.zmdi-favorite:before {
  content: '\f15f';
}
.zmdi-filter-list:before {
  content: '\f160';
}
.zmdi-fire:before {
  content: '\f161';
}
.zmdi-flag:before {
  content: '\f162';
}
.zmdi-flare:before {
  content: '\f163';
}
.zmdi-flash-auto:before {
  content: '\f164';
}
.zmdi-flash-off:before {
  content: '\f165';
}
.zmdi-flash:before {
  content: '\f166';
}
.zmdi-flip:before {
  content: '\f167';
}
.zmdi-flower-alt:before {
  content: '\f168';
}
.zmdi-flower:before {
  content: '\f169';
}
.zmdi-font:before {
  content: '\f16a';
}
.zmdi-fullscreen-alt:before {
  content: '\f16b';
}
.zmdi-fullscreen-exit:before {
  content: '\f16c';
}
.zmdi-fullscreen:before {
  content: '\f16d';
}
.zmdi-functions:before {
  content: '\f16e';
}
.zmdi-gas-station:before {
  content: '\f16f';
}
.zmdi-gesture:before {
  content: '\f170';
}
.zmdi-globe-alt:before {
  content: '\f171';
}
.zmdi-globe-lock:before {
  content: '\f172';
}
.zmdi-globe:before {
  content: '\f173';
}
.zmdi-graduation-cap:before {
  content: '\f174';
}
.zmdi-home:before {
  content: '\f175';
}
.zmdi-hospital-alt:before {
  content: '\f176';
}
.zmdi-hospital:before {
  content: '\f177';
}
.zmdi-hotel:before {
  content: '\f178';
}
.zmdi-hourglass-alt:before {
  content: '\f179';
}
.zmdi-hourglass-outline:before {
  content: '\f17a';
}
.zmdi-hourglass:before {
  content: '\f17b';
}
.zmdi-http:before {
  content: '\f17c';
}
.zmdi-image-alt:before {
  content: '\f17d';
}
.zmdi-image-o:before {
  content: '\f17e';
}
.zmdi-image:before {
  content: '\f17f';
}
.zmdi-inbox:before {
  content: '\f180';
}
.zmdi-invert-colors-off:before {
  content: '\f181';
}
.zmdi-invert-colors:before {
  content: '\f182';
}
.zmdi-key:before {
  content: '\f183';
}
.zmdi-label-alt-outline:before {
  content: '\f184';
}
.zmdi-label-alt:before {
  content: '\f185';
}
.zmdi-label-heart:before {
  content: '\f186';
}
.zmdi-label:before {
  content: '\f187';
}
.zmdi-labels:before {
  content: '\f188';
}
.zmdi-lamp:before {
  content: '\f189';
}
.zmdi-landscape:before {
  content: '\f18a';
}
.zmdi-layers-off:before {
  content: '\f18b';
}
.zmdi-layers:before {
  content: '\f18c';
}
.zmdi-library:before {
  content: '\f18d';
}
.zmdi-link:before {
  content: '\f18e';
}
.zmdi-lock-open:before {
  content: '\f18f';
}
.zmdi-lock-outline:before {
  content: '\f190';
}
.zmdi-lock:before {
  content: '\f191';
}
.zmdi-mail-reply-all:before {
  content: '\f192';
}
.zmdi-mail-reply:before {
  content: '\f193';
}
.zmdi-mail-send:before {
  content: '\f194';
}
.zmdi-mall:before {
  content: '\f195';
}
.zmdi-map:before {
  content: '\f196';
}
.zmdi-menu:before {
  content: '\f197';
}
.zmdi-money-box:before {
  content: '\f198';
}
.zmdi-money-off:before {
  content: '\f199';
}
.zmdi-money:before {
  content: '\f19a';
}
.zmdi-more-vert:before {
  content: '\f19b';
}
.zmdi-more:before {
  content: '\f19c';
}
.zmdi-movie-alt:before {
  content: '\f19d';
}
.zmdi-movie:before {
  content: '\f19e';
}
.zmdi-nature-people:before {
  content: '\f19f';
}
.zmdi-nature:before {
  content: '\f1a0';
}
.zmdi-navigation:before {
  content: '\f1a1';
}
.zmdi-open-in-browser:before {
  content: '\f1a2';
}
.zmdi-open-in-new:before {
  content: '\f1a3';
}
.zmdi-palette:before {
  content: '\f1a4';
}
.zmdi-parking:before {
  content: '\f1a5';
}
.zmdi-pin-account:before {
  content: '\f1a6';
}
.zmdi-pin-assistant:before {
  content: '\f1a7';
}
.zmdi-pin-drop:before {
  content: '\f1a8';
}
.zmdi-pin-help:before {
  content: '\f1a9';
}
.zmdi-pin-off:before {
  content: '\f1aa';
}
.zmdi-pin:before {
  content: '\f1ab';
}
.zmdi-pizza:before {
  content: '\f1ac';
}
.zmdi-plaster:before {
  content: '\f1ad';
}
.zmdi-power-setting:before {
  content: '\f1ae';
}
.zmdi-power:before {
  content: '\f1af';
}
.zmdi-print:before {
  content: '\f1b0';
}
.zmdi-puzzle-piece:before {
  content: '\f1b1';
}
.zmdi-quote:before {
  content: '\f1b2';
}
.zmdi-railway:before {
  content: '\f1b3';
}
.zmdi-receipt:before {
  content: '\f1b4';
}
.zmdi-refresh-alt:before {
  content: '\f1b5';
}
.zmdi-refresh-sync-alert:before {
  content: '\f1b6';
}
.zmdi-refresh-sync-off:before {
  content: '\f1b7';
}
.zmdi-refresh-sync:before {
  content: '\f1b8';
}
.zmdi-refresh:before {
  content: '\f1b9';
}
.zmdi-roller:before {
  content: '\f1ba';
}
.zmdi-ruler:before {
  content: '\f1bb';
}
.zmdi-scissors:before {
  content: '\f1bc';
}
.zmdi-screen-rotation-lock:before {
  content: '\f1bd';
}
.zmdi-screen-rotation:before {
  content: '\f1be';
}
.zmdi-search-for:before {
  content: '\f1bf';
}
.zmdi-search-in-file:before {
  content: '\f1c0';
}
.zmdi-search-in-page:before {
  content: '\f1c1';
}
.zmdi-search-replace:before {
  content: '\f1c2';
}
.zmdi-search:before {
  content: '\f1c3';
}
.zmdi-seat:before {
  content: '\f1c4';
}
.zmdi-settings-square:before {
  content: '\f1c5';
}
.zmdi-settings:before {
  content: '\f1c6';
}
.zmdi-shield-check:before {
  content: '\f1c7';
}
.zmdi-shield-security:before {
  content: '\f1c8';
}
.zmdi-shopping-basket:before {
  content: '\f1c9';
}
.zmdi-shopping-cart-plus:before {
  content: '\f1ca';
}
.zmdi-shopping-cart:before {
  content: '\f1cb';
}
.zmdi-sign-in:before {
  content: '\f1cc';
}
.zmdi-sort-amount-asc:before {
  content: '\f1cd';
}
.zmdi-sort-amount-desc:before {
  content: '\f1ce';
}
.zmdi-sort-asc:before {
  content: '\f1cf';
}
.zmdi-sort-desc:before {
  content: '\f1d0';
}
.zmdi-spellcheck:before {
  content: '\f1d1';
}
.zmdi-storage:before {
  content: '\f1d2';
}
.zmdi-store-24:before {
  content: '\f1d3';
}
.zmdi-store:before {
  content: '\f1d4';
}
.zmdi-subway:before {
  content: '\f1d5';
}
.zmdi-sun:before {
  content: '\f1d6';
}
.zmdi-tab-unselected:before {
  content: '\f1d7';
}
.zmdi-tab:before {
  content: '\f1d8';
}
.zmdi-tag-close:before {
  content: '\f1d9';
}
.zmdi-tag-more:before {
  content: '\f1da';
}
.zmdi-tag:before {
  content: '\f1db';
}
.zmdi-thumb-down:before {
  content: '\f1dc';
}
.zmdi-thumb-up-down:before {
  content: '\f1dd';
}
.zmdi-thumb-up:before {
  content: '\f1de';
}
.zmdi-ticket-star:before {
  content: '\f1df';
}
.zmdi-toll:before {
  content: '\f1e0';
}
.zmdi-toys:before {
  content: '\f1e1';
}
.zmdi-traffic:before {
  content: '\f1e2';
}
.zmdi-translate:before {
  content: '\f1e3';
}
.zmdi-triangle-down:before {
  content: '\f1e4';
}
.zmdi-triangle-up:before {
  content: '\f1e5';
}
.zmdi-truck:before {
  content: '\f1e6';
}
.zmdi-turning-sign:before {
  content: '\f1e7';
}
.zmdi-wallpaper:before {
  content: '\f1e8';
}
.zmdi-washing-machine:before {
  content: '\f1e9';
}
.zmdi-window-maximize:before {
  content: '\f1ea';
}
.zmdi-window-minimize:before {
  content: '\f1eb';
}
.zmdi-window-restore:before {
  content: '\f1ec';
}
.zmdi-wrench:before {
  content: '\f1ed';
}
.zmdi-zoom-in:before {
  content: '\f1ee';
}
.zmdi-zoom-out:before {
  content: '\f1ef';
}
.zmdi-alert-circle-o:before {
  content: '\f1f0';
}
.zmdi-alert-circle:before {
  content: '\f1f1';
}
.zmdi-alert-octagon:before {
  content: '\f1f2';
}
.zmdi-alert-polygon:before {
  content: '\f1f3';
}
.zmdi-alert-triangle:before {
  content: '\f1f4';
}
.zmdi-help-outline:before {
  content: '\f1f5';
}
.zmdi-help:before {
  content: '\f1f6';
}
.zmdi-info-outline:before {
  content: '\f1f7';
}
.zmdi-info:before {
  content: '\f1f8';
}
.zmdi-notifications-active:before {
  content: '\f1f9';
}
.zmdi-notifications-add:before {
  content: '\f1fa';
}
.zmdi-notifications-none:before {
  content: '\f1fb';
}
.zmdi-notifications-off:before {
  content: '\f1fc';
}
.zmdi-notifications-paused:before {
  content: '\f1fd';
}
.zmdi-notifications:before {
  content: '\f1fe';
}
.zmdi-account-add:before {
  content: '\f1ff';
}
.zmdi-account-box-mail:before {
  content: '\f200';
}
.zmdi-account-box-o:before {
  content: '\f201';
}
.zmdi-account-box-phone:before {
  content: '\f202';
}
.zmdi-account-box:before {
  content: '\f203';
}
.zmdi-account-calendar:before {
  content: '\f204';
}
.zmdi-account-circle:before {
  content: '\f205';
}
.zmdi-account-o:before {
  content: '\f206';
}
.zmdi-account:before {
  content: '\f207';
}
.zmdi-accounts-add:before {
  content: '\f208';
}
.zmdi-accounts-alt:before {
  content: '\f209';
}
.zmdi-accounts-list-alt:before {
  content: '\f20a';
}
.zmdi-accounts-list:before {
  content: '\f20b';
}
.zmdi-accounts-outline:before {
  content: '\f20c';
}
.zmdi-accounts:before {
  content: '\f20d';
}
.zmdi-face:before {
  content: '\f20e';
}
.zmdi-female:before {
  content: '\f20f';
}
.zmdi-male-alt:before {
  content: '\f210';
}
.zmdi-male-female:before {
  content: '\f211';
}
.zmdi-male:before {
  content: '\f212';
}
.zmdi-mood-bad:before {
  content: '\f213';
}
.zmdi-mood:before {
  content: '\f214';
}
.zmdi-run:before {
  content: '\f215';
}
.zmdi-walk:before {
  content: '\f216';
}
.zmdi-cloud-box:before {
  content: '\f217';
}
.zmdi-cloud-circle:before {
  content: '\f218';
}
.zmdi-cloud-done:before {
  content: '\f219';
}
.zmdi-cloud-download:before {
  content: '\f21a';
}
.zmdi-cloud-off:before {
  content: '\f21b';
}
.zmdi-cloud-outline-alt:before {
  content: '\f21c';
}
.zmdi-cloud-outline:before {
  content: '\f21d';
}
.zmdi-cloud-upload:before {
  content: '\f21e';
}
.zmdi-cloud:before {
  content: '\f21f';
}
.zmdi-download:before {
  content: '\f220';
}
.zmdi-file-plus:before {
  content: '\f221';
}
.zmdi-file-text:before {
  content: '\f222';
}
.zmdi-file:before {
  content: '\f223';
}
.zmdi-folder-outline:before {
  content: '\f224';
}
.zmdi-folder-person:before {
  content: '\f225';
}
.zmdi-folder-star-alt:before {
  content: '\f226';
}
.zmdi-folder-star:before {
  content: '\f227';
}
.zmdi-folder:before {
  content: '\f228';
}
.zmdi-gif:before {
  content: '\f229';
}
.zmdi-upload:before {
  content: '\f22a';
}
.zmdi-border-all:before {
  content: '\f22b';
}
.zmdi-border-bottom:before {
  content: '\f22c';
}
.zmdi-border-clear:before {
  content: '\f22d';
}
.zmdi-border-color:before {
  content: '\f22e';
}
.zmdi-border-horizontal:before {
  content: '\f22f';
}
.zmdi-border-inner:before {
  content: '\f230';
}
.zmdi-border-left:before {
  content: '\f231';
}
.zmdi-border-outer:before {
  content: '\f232';
}
.zmdi-border-right:before {
  content: '\f233';
}
.zmdi-border-style:before {
  content: '\f234';
}
.zmdi-border-top:before {
  content: '\f235';
}
.zmdi-border-vertical:before {
  content: '\f236';
}
.zmdi-copy:before {
  content: '\f237';
}
.zmdi-crop:before {
  content: '\f238';
}
.zmdi-format-align-center:before {
  content: '\f239';
}
.zmdi-format-align-justify:before {
  content: '\f23a';
}
.zmdi-format-align-left:before {
  content: '\f23b';
}
.zmdi-format-align-right:before {
  content: '\f23c';
}
.zmdi-format-bold:before {
  content: '\f23d';
}
.zmdi-format-clear-all:before {
  content: '\f23e';
}
.zmdi-format-clear:before {
  content: '\f23f';
}
.zmdi-format-color-fill:before {
  content: '\f240';
}
.zmdi-format-color-reset:before {
  content: '\f241';
}
.zmdi-format-color-text:before {
  content: '\f242';
}
.zmdi-format-indent-decrease:before {
  content: '\f243';
}
.zmdi-format-indent-increase:before {
  content: '\f244';
}
.zmdi-format-italic:before {
  content: '\f245';
}
.zmdi-format-line-spacing:before {
  content: '\f246';
}
.zmdi-format-list-bulleted:before {
  content: '\f247';
}
.zmdi-format-list-numbered:before {
  content: '\f248';
}
.zmdi-format-ltr:before {
  content: '\f249';
}
.zmdi-format-rtl:before {
  content: '\f24a';
}
.zmdi-format-size:before {
  content: '\f24b';
}
.zmdi-format-strikethrough-s:before {
  content: '\f24c';
}
.zmdi-format-strikethrough:before {
  content: '\f24d';
}
.zmdi-format-subject:before {
  content: '\f24e';
}
.zmdi-format-underlined:before {
  content: '\f24f';
}
.zmdi-format-valign-bottom:before {
  content: '\f250';
}
.zmdi-format-valign-center:before {
  content: '\f251';
}
.zmdi-format-valign-top:before {
  content: '\f252';
}
.zmdi-redo:before {
  content: '\f253';
}
.zmdi-select-all:before {
  content: '\f254';
}
.zmdi-space-bar:before {
  content: '\f255';
}
.zmdi-text-format:before {
  content: '\f256';
}
.zmdi-transform:before {
  content: '\f257';
}
.zmdi-undo:before {
  content: '\f258';
}
.zmdi-wrap-text:before {
  content: '\f259';
}
.zmdi-comment-alert:before {
  content: '\f25a';
}
.zmdi-comment-alt-text:before {
  content: '\f25b';
}
.zmdi-comment-alt:before {
  content: '\f25c';
}
.zmdi-comment-edit:before {
  content: '\f25d';
}
.zmdi-comment-image:before {
  content: '\f25e';
}
.zmdi-comment-list:before {
  content: '\f25f';
}
.zmdi-comment-more:before {
  content: '\f260';
}
.zmdi-comment-outline:before {
  content: '\f261';
}
.zmdi-comment-text-alt:before {
  content: '\f262';
}
.zmdi-comment-text:before {
  content: '\f263';
}
.zmdi-comment-video:before {
  content: '\f264';
}
.zmdi-comment:before {
  content: '\f265';
}
.zmdi-comments:before {
  content: '\f266';
}
.zmdi-check-all:before {
  content: '\f267';
}
.zmdi-check-circle-u:before {
  content: '\f268';
}
.zmdi-check-circle:before {
  content: '\f269';
}
.zmdi-check-square:before {
  content: '\f26a';
}
.zmdi-check:before {
  content: '\f26b';
}
.zmdi-circle-o:before {
  content: '\f26c';
}
.zmdi-circle:before {
  content: '\f26d';
}
.zmdi-dot-circle-alt:before {
  content: '\f26e';
}
.zmdi-dot-circle:before {
  content: '\f26f';
}
.zmdi-minus-circle-outline:before {
  content: '\f270';
}
.zmdi-minus-circle:before {
  content: '\f271';
}
.zmdi-minus-square:before {
  content: '\f272';
}
.zmdi-minus:before {
  content: '\f273';
}
.zmdi-plus-circle-o-duplicate:before {
  content: '\f274';
}
.zmdi-plus-circle-o:before {
  content: '\f275';
}
.zmdi-plus-circle:before {
  content: '\f276';
}
.zmdi-plus-square:before {
  content: '\f277';
}
.zmdi-plus:before {
  content: '\f278';
}
.zmdi-square-o:before {
  content: '\f279';
}
.zmdi-star-circle:before {
  content: '\f27a';
}
.zmdi-star-half:before {
  content: '\f27b';
}
.zmdi-star-outline:before {
  content: '\f27c';
}
.zmdi-star:before {
  content: '\f27d';
}
.zmdi-bluetooth-connected:before {
  content: '\f27e';
}
.zmdi-bluetooth-off:before {
  content: '\f27f';
}
.zmdi-bluetooth-search:before {
  content: '\f280';
}
.zmdi-bluetooth-setting:before {
  content: '\f281';
}
.zmdi-bluetooth:before {
  content: '\f282';
}
.zmdi-camera-add:before {
  content: '\f283';
}
.zmdi-camera-alt:before {
  content: '\f284';
}
.zmdi-camera-bw:before {
  content: '\f285';
}
.zmdi-camera-front:before {
  content: '\f286';
}
.zmdi-camera-mic:before {
  content: '\f287';
}
.zmdi-camera-party-mode:before {
  content: '\f288';
}
.zmdi-camera-rear:before {
  content: '\f289';
}
.zmdi-camera-roll:before {
  content: '\f28a';
}
.zmdi-camera-switch:before {
  content: '\f28b';
}
.zmdi-camera:before {
  content: '\f28c';
}
.zmdi-card-alert:before {
  content: '\f28d';
}
.zmdi-card-off:before {
  content: '\f28e';
}
.zmdi-card-sd:before {
  content: '\f28f';
}
.zmdi-card-sim:before {
  content: '\f290';
}
.zmdi-desktop-mac:before {
  content: '\f291';
}
.zmdi-desktop-windows:before {
  content: '\f292';
}
.zmdi-device-hub:before {
  content: '\f293';
}
.zmdi-devices-off:before {
  content: '\f294';
}
.zmdi-devices:before {
  content: '\f295';
}
.zmdi-dock:before {
  content: '\f296';
}
.zmdi-floppy:before {
  content: '\f297';
}
.zmdi-gamepad:before {
  content: '\f298';
}
.zmdi-gps-dot:before {
  content: '\f299';
}
.zmdi-gps-off:before {
  content: '\f29a';
}
.zmdi-gps:before {
  content: '\f29b';
}
.zmdi-headset-mic:before {
  content: '\f29c';
}
.zmdi-headset:before {
  content: '\f29d';
}
.zmdi-input-antenna:before {
  content: '\f29e';
}
.zmdi-input-composite:before {
  content: '\f29f';
}
.zmdi-input-hdmi:before {
  content: '\f2a0';
}
.zmdi-input-power:before {
  content: '\f2a1';
}
.zmdi-input-svideo:before {
  content: '\f2a2';
}
.zmdi-keyboard-hide:before {
  content: '\f2a3';
}
.zmdi-keyboard:before {
  content: '\f2a4';
}
.zmdi-laptop-chromebook:before {
  content: '\f2a5';
}
.zmdi-laptop-mac:before {
  content: '\f2a6';
}
.zmdi-laptop:before {
  content: '\f2a7';
}
.zmdi-mic-off:before {
  content: '\f2a8';
}
.zmdi-mic-outline:before {
  content: '\f2a9';
}
.zmdi-mic-setting:before {
  content: '\f2aa';
}
.zmdi-mic:before {
  content: '\f2ab';
}
.zmdi-mouse:before {
  content: '\f2ac';
}
.zmdi-network-alert:before {
  content: '\f2ad';
}
.zmdi-network-locked:before {
  content: '\f2ae';
}
.zmdi-network-off:before {
  content: '\f2af';
}
.zmdi-network-outline:before {
  content: '\f2b0';
}
.zmdi-network-setting:before {
  content: '\f2b1';
}
.zmdi-network:before {
  content: '\f2b2';
}
.zmdi-phone-bluetooth:before {
  content: '\f2b3';
}
.zmdi-phone-end:before {
  content: '\f2b4';
}
.zmdi-phone-forwarded:before {
  content: '\f2b5';
}
.zmdi-phone-in-talk:before {
  content: '\f2b6';
}
.zmdi-phone-locked:before {
  content: '\f2b7';
}
.zmdi-phone-missed:before {
  content: '\f2b8';
}
.zmdi-phone-msg:before {
  content: '\f2b9';
}
.zmdi-phone-paused:before {
  content: '\f2ba';
}
.zmdi-phone-ring:before {
  content: '\f2bb';
}
.zmdi-phone-setting:before {
  content: '\f2bc';
}
.zmdi-phone-sip:before {
  content: '\f2bd';
}
.zmdi-phone:before {
  content: '\f2be';
}
.zmdi-portable-wifi-changes:before {
  content: '\f2bf';
}
.zmdi-portable-wifi-off:before {
  content: '\f2c0';
}
.zmdi-portable-wifi:before {
  content: '\f2c1';
}
.zmdi-radio:before {
  content: '\f2c2';
}
.zmdi-reader:before {
  content: '\f2c3';
}
.zmdi-remote-control-alt:before {
  content: '\f2c4';
}
.zmdi-remote-control:before {
  content: '\f2c5';
}
.zmdi-router:before {
  content: '\f2c6';
}
.zmdi-scanner:before {
  content: '\f2c7';
}
.zmdi-smartphone-android:before {
  content: '\f2c8';
}
.zmdi-smartphone-download:before {
  content: '\f2c9';
}
.zmdi-smartphone-erase:before {
  content: '\f2ca';
}
.zmdi-smartphone-info:before {
  content: '\f2cb';
}
.zmdi-smartphone-iphone:before {
  content: '\f2cc';
}
.zmdi-smartphone-landscape-lock:before {
  content: '\f2cd';
}
.zmdi-smartphone-landscape:before {
  content: '\f2ce';
}
.zmdi-smartphone-lock:before {
  content: '\f2cf';
}
.zmdi-smartphone-portrait-lock:before {
  content: '\f2d0';
}
.zmdi-smartphone-ring:before {
  content: '\f2d1';
}
.zmdi-smartphone-setting:before {
  content: '\f2d2';
}
.zmdi-smartphone-setup:before {
  content: '\f2d3';
}
.zmdi-smartphone:before {
  content: '\f2d4';
}
.zmdi-speaker:before {
  content: '\f2d5';
}
.zmdi-tablet-android:before {
  content: '\f2d6';
}
.zmdi-tablet-mac:before {
  content: '\f2d7';
}
.zmdi-tablet:before {
  content: '\f2d8';
}
.zmdi-tv-alt-play:before {
  content: '\f2d9';
}
.zmdi-tv-list:before {
  content: '\f2da';
}
.zmdi-tv-play:before {
  content: '\f2db';
}
.zmdi-tv:before {
  content: '\f2dc';
}
.zmdi-usb:before {
  content: '\f2dd';
}
.zmdi-videocam-off:before {
  content: '\f2de';
}
.zmdi-videocam-switch:before {
  content: '\f2df';
}
.zmdi-videocam:before {
  content: '\f2e0';
}
.zmdi-watch:before {
  content: '\f2e1';
}
.zmdi-wifi-alt-2:before {
  content: '\f2e2';
}
.zmdi-wifi-alt:before {
  content: '\f2e3';
}
.zmdi-wifi-info:before {
  content: '\f2e4';
}
.zmdi-wifi-lock:before {
  content: '\f2e5';
}
.zmdi-wifi-off:before {
  content: '\f2e6';
}
.zmdi-wifi-outline:before {
  content: '\f2e7';
}
.zmdi-wifi:before {
  content: '\f2e8';
}
.zmdi-arrow-left-bottom:before {
  content: '\f2e9';
}
.zmdi-arrow-left:before {
  content: '\f2ea';
}
.zmdi-arrow-merge:before {
  content: '\f2eb';
}
.zmdi-arrow-missed:before {
  content: '\f2ec';
}
.zmdi-arrow-right-top:before {
  content: '\f2ed';
}
.zmdi-arrow-right:before {
  content: '\f2ee';
}
.zmdi-arrow-split:before {
  content: '\f2ef';
}
.zmdi-arrows:before {
  content: '\f2f0';
}
.zmdi-caret-down-circle:before {
  content: '\f2f1';
}
.zmdi-caret-down:before {
  content: '\f2f2';
}
.zmdi-caret-left-circle:before {
  content: '\f2f3';
}
.zmdi-caret-left:before {
  content: '\f2f4';
}
.zmdi-caret-right-circle:before {
  content: '\f2f5';
}
.zmdi-caret-right:before {
  content: '\f2f6';
}
.zmdi-caret-up-circle:before {
  content: '\f2f7';
}
.zmdi-caret-up:before {
  content: '\f2f8';
}
.zmdi-chevron-down:before {
  content: '\f2f9';
}
.zmdi-chevron-left:before {
  content: '\f2fa';
}
.zmdi-chevron-right:before {
  content: '\f2fb';
}
.zmdi-chevron-up:before {
  content: '\f2fc';
}
.zmdi-forward:before {
  content: '\f2fd';
}
.zmdi-long-arrow-down:before {
  content: '\f2fe';
}
.zmdi-long-arrow-left:before {
  content: '\f2ff';
}
.zmdi-long-arrow-return:before {
  content: '\f300';
}
.zmdi-long-arrow-right:before {
  content: '\f301';
}
.zmdi-long-arrow-tab:before {
  content: '\f302';
}
.zmdi-long-arrow-up:before {
  content: '\f303';
}
.zmdi-rotate-ccw:before {
  content: '\f304';
}
.zmdi-rotate-cw:before {
  content: '\f305';
}
.zmdi-rotate-left:before {
  content: '\f306';
}
.zmdi-rotate-right:before {
  content: '\f307';
}
.zmdi-square-down:before {
  content: '\f308';
}
.zmdi-square-right:before {
  content: '\f309';
}
.zmdi-swap-alt:before {
  content: '\f30a';
}
.zmdi-swap-vertical-circle:before {
  content: '\f30b';
}
.zmdi-swap-vertical:before {
  content: '\f30c';
}
.zmdi-swap:before {
  content: '\f30d';
}
.zmdi-trending-down:before {
  content: '\f30e';
}
.zmdi-trending-flat:before {
  content: '\f30f';
}
.zmdi-trending-up:before {
  content: '\f310';
}
.zmdi-unfold-less:before {
  content: '\f311';
}
.zmdi-unfold-more:before {
  content: '\f312';
}
.zmdi-apps:before {
  content: '\f313';
}
.zmdi-grid-off:before {
  content: '\f314';
}
.zmdi-grid:before {
  content: '\f315';
}
.zmdi-view-agenda:before {
  content: '\f316';
}
.zmdi-view-array:before {
  content: '\f317';
}
.zmdi-view-carousel:before {
  content: '\f318';
}
.zmdi-view-column:before {
  content: '\f319';
}
.zmdi-view-comfy:before {
  content: '\f31a';
}
.zmdi-view-compact:before {
  content: '\f31b';
}
.zmdi-view-dashboard:before {
  content: '\f31c';
}
.zmdi-view-day:before {
  content: '\f31d';
}
.zmdi-view-headline:before {
  content: '\f31e';
}
.zmdi-view-list-alt:before {
  content: '\f31f';
}
.zmdi-view-list:before {
  content: '\f320';
}
.zmdi-view-module:before {
  content: '\f321';
}
.zmdi-view-quilt:before {
  content: '\f322';
}
.zmdi-view-stream:before {
  content: '\f323';
}
.zmdi-view-subtitles:before {
  content: '\f324';
}
.zmdi-view-toc:before {
  content: '\f325';
}
.zmdi-view-web:before {
  content: '\f326';
}
.zmdi-view-week:before {
  content: '\f327';
}
.zmdi-widgets:before {
  content: '\f328';
}
.zmdi-alarm-check:before {
  content: '\f329';
}
.zmdi-alarm-off:before {
  content: '\f32a';
}
.zmdi-alarm-plus:before {
  content: '\f32b';
}
.zmdi-alarm-snooze:before {
  content: '\f32c';
}
.zmdi-alarm:before {
  content: '\f32d';
}
.zmdi-calendar-alt:before {
  content: '\f32e';
}
.zmdi-calendar-check:before {
  content: '\f32f';
}
.zmdi-calendar-close:before {
  content: '\f330';
}
.zmdi-calendar-note:before {
  content: '\f331';
}
.zmdi-calendar:before {
  content: '\f332';
}
.zmdi-time-countdown:before {
  content: '\f333';
}
.zmdi-time-interval:before {
  content: '\f334';
}
.zmdi-time-restore-setting:before {
  content: '\f335';
}
.zmdi-time-restore:before {
  content: '\f336';
}
.zmdi-time:before {
  content: '\f337';
}
.zmdi-timer-off:before {
  content: '\f338';
}
.zmdi-timer:before {
  content: '\f339';
}
.zmdi-android-alt:before {
  content: '\f33a';
}
.zmdi-android:before {
  content: '\f33b';
}
.zmdi-apple:before {
  content: '\f33c';
}
.zmdi-behance:before {
  content: '\f33d';
}
.zmdi-codepen:before {
  content: '\f33e';
}
.zmdi-dribbble:before {
  content: '\f33f';
}
.zmdi-dropbox:before {
  content: '\f340';
}
.zmdi-evernote:before {
  content: '\f341';
}
.zmdi-facebook-box:before {
  content: '\f342';
}
.zmdi-facebook:before {
  content: '\f343';
}
.zmdi-github-box:before {
  content: '\f344';
}
.zmdi-github:before {
  content: '\f345';
}
.zmdi-google-drive:before {
  content: '\f346';
}
.zmdi-google-earth:before {
  content: '\f347';
}
.zmdi-google-glass:before {
  content: '\f348';
}
.zmdi-google-maps:before {
  content: '\f349';
}
.zmdi-google-pages:before {
  content: '\f34a';
}
.zmdi-google-play:before {
  content: '\f34b';
}
.zmdi-google-plus-box:before {
  content: '\f34c';
}
.zmdi-google-plus:before {
  content: '\f34d';
}
.zmdi-google:before {
  content: '\f34e';
}
.zmdi-instagram:before {
  content: '\f34f';
}
.zmdi-language-css3:before {
  content: '\f350';
}
.zmdi-language-html5:before {
  content: '\f351';
}
.zmdi-language-javascript:before {
  content: '\f352';
}
.zmdi-language-python-alt:before {
  content: '\f353';
}
.zmdi-language-python:before {
  content: '\f354';
}
.zmdi-lastfm:before {
  content: '\f355';
}
.zmdi-linkedin-box:before {
  content: '\f356';
}
.zmdi-paypal:before {
  content: '\f357';
}
.zmdi-pinterest-box:before {
  content: '\f358';
}
.zmdi-pocket:before {
  content: '\f359';
}
.zmdi-polymer:before {
  content: '\f35a';
}
.zmdi-share:before {
  content: '\f35b';
}
.zmdi-stackoverflow:before {
  content: '\f35c';
}
.zmdi-steam-square:before {
  content: '\f35d';
}
.zmdi-steam:before {
  content: '\f35e';
}
.zmdi-twitter-box:before {
  content: '\f35f';
}
.zmdi-twitter:before {
  content: '\f360';
}
.zmdi-vk:before {
  content: '\f361';
}
.zmdi-wikipedia:before {
  content: '\f362';
}
.zmdi-windows:before {
  content: '\f363';
}
.zmdi-aspect-ratio-alt:before {
  content: '\f364';
}
.zmdi-aspect-ratio:before {
  content: '\f365';
}
.zmdi-blur-circular:before {
  content: '\f366';
}
.zmdi-blur-linear:before {
  content: '\f367';
}
.zmdi-blur-off:before {
  content: '\f368';
}
.zmdi-blur:before {
  content: '\f369';
}
.zmdi-brightness-2:before {
  content: '\f36a';
}
.zmdi-brightness-3:before {
  content: '\f36b';
}
.zmdi-brightness-4:before {
  content: '\f36c';
}
.zmdi-brightness-5:before {
  content: '\f36d';
}
.zmdi-brightness-6:before {
  content: '\f36e';
}
.zmdi-brightness-7:before {
  content: '\f36f';
}
.zmdi-brightness-auto:before {
  content: '\f370';
}
.zmdi-brightness-setting:before {
  content: '\f371';
}
.zmdi-broken-image:before {
  content: '\f372';
}
.zmdi-center-focus-strong:before {
  content: '\f373';
}
.zmdi-center-focus-weak:before {
  content: '\f374';
}
.zmdi-compare:before {
  content: '\f375';
}
.zmdi-crop-16-9:before {
  content: '\f376';
}
.zmdi-crop-3-2:before {
  content: '\f377';
}
.zmdi-crop-5-4:before {
  content: '\f378';
}
.zmdi-crop-7-5:before {
  content: '\f379';
}
.zmdi-crop-din:before {
  content: '\f37a';
}
.zmdi-crop-free:before {
  content: '\f37b';
}
.zmdi-crop-landscape:before {
  content: '\f37c';
}
.zmdi-crop-portrait:before {
  content: '\f37d';
}
.zmdi-crop-square:before {
  content: '\f37e';
}
.zmdi-exposure-alt:before {
  content: '\f37f';
}
.zmdi-exposure:before {
  content: '\f380';
}
.zmdi-filter-b-and-w:before {
  content: '\f381';
}
.zmdi-filter-center-focus:before {
  content: '\f382';
}
.zmdi-filter-frames:before {
  content: '\f383';
}
.zmdi-filter-tilt-shift:before {
  content: '\f384';
}
.zmdi-gradient:before {
  content: '\f385';
}
.zmdi-grain:before {
  content: '\f386';
}
.zmdi-graphic-eq:before {
  content: '\f387';
}
.zmdi-hdr-off:before {
  content: '\f388';
}
.zmdi-hdr-strong:before {
  content: '\f389';
}
.zmdi-hdr-weak:before {
  content: '\f38a';
}
.zmdi-hdr:before {
  content: '\f38b';
}
.zmdi-iridescent:before {
  content: '\f38c';
}
.zmdi-leak-off:before {
  content: '\f38d';
}
.zmdi-leak:before {
  content: '\f38e';
}
.zmdi-looks:before {
  content: '\f38f';
}
.zmdi-loupe:before {
  content: '\f390';
}
.zmdi-panorama-horizontal:before {
  content: '\f391';
}
.zmdi-panorama-vertical:before {
  content: '\f392';
}
.zmdi-panorama-wide-angle:before {
  content: '\f393';
}
.zmdi-photo-size-select-large:before {
  content: '\f394';
}
.zmdi-photo-size-select-small:before {
  content: '\f395';
}
.zmdi-picture-in-picture:before {
  content: '\f396';
}
.zmdi-slideshow:before {
  content: '\f397';
}
.zmdi-texture:before {
  content: '\f398';
}
.zmdi-tonality:before {
  content: '\f399';
}
.zmdi-vignette:before {
  content: '\f39a';
}
.zmdi-wb-auto:before {
  content: '\f39b';
}
.zmdi-eject-alt:before {
  content: '\f39c';
}
.zmdi-eject:before {
  content: '\f39d';
}
.zmdi-equalizer:before {
  content: '\f39e';
}
.zmdi-fast-forward:before {
  content: '\f39f';
}
.zmdi-fast-rewind:before {
  content: '\f3a0';
}
.zmdi-forward-10:before {
  content: '\f3a1';
}
.zmdi-forward-30:before {
  content: '\f3a2';
}
.zmdi-forward-5:before {
  content: '\f3a3';
}
.zmdi-hearing:before {
  content: '\f3a4';
}
.zmdi-pause-circle-outline:before {
  content: '\f3a5';
}
.zmdi-pause-circle:before {
  content: '\f3a6';
}
.zmdi-pause:before {
  content: '\f3a7';
}
.zmdi-play-circle-outline:before {
  content: '\f3a8';
}
.zmdi-play-circle:before {
  content: '\f3a9';
}
.zmdi-play:before {
  content: '\f3aa';
}
.zmdi-playlist-audio:before {
  content: '\f3ab';
}
.zmdi-playlist-plus:before {
  content: '\f3ac';
}
.zmdi-repeat-one:before {
  content: '\f3ad';
}
.zmdi-repeat:before {
  content: '\f3ae';
}
.zmdi-replay-10:before {
  content: '\f3af';
}
.zmdi-replay-30:before {
  content: '\f3b0';
}
.zmdi-replay-5:before {
  content: '\f3b1';
}
.zmdi-replay:before {
  content: '\f3b2';
}
.zmdi-shuffle:before {
  content: '\f3b3';
}
.zmdi-skip-next:before {
  content: '\f3b4';
}
.zmdi-skip-previous:before {
  content: '\f3b5';
}
.zmdi-stop:before {
  content: '\f3b6';
}
.zmdi-surround-sound:before {
  content: '\f3b7';
}
.zmdi-tune:before {
  content: '\f3b8';
}
.zmdi-volume-down:before {
  content: '\f3b9';
}
.zmdi-volume-mute:before {
  content: '\f3ba';
}
.zmdi-volume-off:before {
  content: '\f3bb';
}
.zmdi-volume-up:before {
  content: '\f3bc';
}
.zmdi-n-1-square:before {
  content: '\f3bd';
}
.zmdi-n-2-square:before {
  content: '\f3be';
}
.zmdi-n-3-square:before {
  content: '\f3bf';
}
.zmdi-n-4-square:before {
  content: '\f3c0';
}
.zmdi-n-5-square:before {
  content: '\f3c1';
}
.zmdi-n-6-square:before {
  content: '\f3c2';
}
.zmdi-neg-1:before {
  content: '\f3c3';
}
.zmdi-neg-2:before {
  content: '\f3c4';
}
.zmdi-plus-1:before {
  content: '\f3c5';
}
.zmdi-plus-2:before {
  content: '\f3c6';
}
.zmdi-sec-10:before {
  content: '\f3c7';
}
.zmdi-sec-3:before {
  content: '\f3c8';
}
.zmdi-zero:before {
  content: '\f3c9';
}
.zmdi-airline-seat-flat-angled:before {
  content: '\f3ca';
}
.zmdi-airline-seat-flat:before {
  content: '\f3cb';
}
.zmdi-airline-seat-individual-suite:before {
  content: '\f3cc';
}
.zmdi-airline-seat-legroom-extra:before {
  content: '\f3cd';
}
.zmdi-airline-seat-legroom-normal:before {
  content: '\f3ce';
}
.zmdi-airline-seat-legroom-reduced:before {
  content: '\f3cf';
}
.zmdi-airline-seat-recline-extra:before {
  content: '\f3d0';
}
.zmdi-airline-seat-recline-normal:before {
  content: '\f3d1';
}
.zmdi-airplay:before {
  content: '\f3d2';
}
.zmdi-closed-caption:before {
  content: '\f3d3';
}
.zmdi-confirmation-number:before {
  content: '\f3d4';
}
.zmdi-developer-board:before {
  content: '\f3d5';
}
.zmdi-disc-full:before {
  content: '\f3d6';
}
.zmdi-explicit:before {
  content: '\f3d7';
}
.zmdi-flight-land:before {
  content: '\f3d8';
}
.zmdi-flight-takeoff:before {
  content: '\f3d9';
}
.zmdi-flip-to-back:before {
  content: '\f3da';
}
.zmdi-flip-to-front:before {
  content: '\f3db';
}
.zmdi-group-work:before {
  content: '\f3dc';
}
.zmdi-hd:before {
  content: '\f3dd';
}
.zmdi-hq:before {
  content: '\f3de';
}
.zmdi-markunread-mailbox:before {
  content: '\f3df';
}
.zmdi-memory:before {
  content: '\f3e0';
}
.zmdi-nfc:before {
  content: '\f3e1';
}
.zmdi-play-for-work:before {
  content: '\f3e2';
}
.zmdi-power-input:before {
  content: '\f3e3';
}
.zmdi-present-to-all:before {
  content: '\f3e4';
}
.zmdi-satellite:before {
  content: '\f3e5';
}
.zmdi-tap-and-play:before {
  content: '\f3e6';
}
.zmdi-vibration:before {
  content: '\f3e7';
}
.zmdi-voicemail:before {
  content: '\f3e8';
}
.zmdi-group:before {
  content: '\f3e9';
}
.zmdi-rss:before {
  content: '\f3ea';
}
.zmdi-shape:before {
  content: '\f3eb';
}
.zmdi-spinner:before {
  content: '\f3ec';
}
.zmdi-ungroup:before {
  content: '\f3ed';
}
.zmdi-500px:before {
  content: '\f3ee';
}
.zmdi-8tracks:before {
  content: '\f3ef';
}
.zmdi-amazon:before {
  content: '\f3f0';
}
.zmdi-blogger:before {
  content: '\f3f1';
}
.zmdi-delicious:before {
  content: '\f3f2';
}
.zmdi-disqus:before {
  content: '\f3f3';
}
.zmdi-flattr:before {
  content: '\f3f4';
}
.zmdi-flickr:before {
  content: '\f3f5';
}
.zmdi-github-alt:before {
  content: '\f3f6';
}
.zmdi-google-old:before {
  content: '\f3f7';
}
.zmdi-linkedin:before {
  content: '\f3f8';
}
.zmdi-odnoklassniki:before {
  content: '\f3f9';
}
.zmdi-outlook:before {
  content: '\f3fa';
}
.zmdi-paypal-alt:before {
  content: '\f3fb';
}
.zmdi-pinterest:before {
  content: '\f3fc';
}
.zmdi-playstation:before {
  content: '\f3fd';
}
.zmdi-reddit:before {
  content: '\f3fe';
}
.zmdi-skype:before {
  content: '\f3ff';
}
.zmdi-slideshare:before {
  content: '\f400';
}
.zmdi-soundcloud:before {
  content: '\f401';
}
.zmdi-tumblr:before {
  content: '\f402';
}
.zmdi-twitch:before {
  content: '\f403';
}
.zmdi-vimeo:before {
  content: '\f404';
}
.zmdi-whatsapp:before {
  content: '\f405';
}
.zmdi-xbox:before {
  content: '\f406';
}
.zmdi-yahoo:before {
  content: '\f407';
}
.zmdi-youtube-play:before {
  content: '\f408';
}
.zmdi-youtube:before {
  content: '\f409';
}
.zmdi-3d-rotation:before {
  content: '\f101';
}
.zmdi-airplane-off:before {
  content: '\f102';
}
.zmdi-airplane:before {
  content: '\f103';
}
.zmdi-album:before {
  content: '\f104';
}
.zmdi-archive:before {
  content: '\f105';
}
.zmdi-assignment-account:before {
  content: '\f106';
}
.zmdi-assignment-alert:before {
  content: '\f107';
}
.zmdi-assignment-check:before {
  content: '\f108';
}
.zmdi-assignment-o:before {
  content: '\f109';
}
.zmdi-assignment-return:before {
  content: '\f10a';
}
.zmdi-assignment-returned:before {
  content: '\f10b';
}
.zmdi-assignment:before {
  content: '\f10c';
}
.zmdi-attachment-alt:before {
  content: '\f10d';
}
.zmdi-attachment:before {
  content: '\f10e';
}
.zmdi-audio:before {
  content: '\f10f';
}
.zmdi-badge-check:before {
  content: '\f110';
}
.zmdi-balance-wallet:before {
  content: '\f111';
}
.zmdi-balance:before {
  content: '\f112';
}
.zmdi-battery-alert:before {
  content: '\f113';
}
.zmdi-battery-flash:before {
  content: '\f114';
}
.zmdi-battery-unknown:before {
  content: '\f115';
}
.zmdi-battery:before {
  content: '\f116';
}
.zmdi-bike:before {
  content: '\f117';
}
.zmdi-block-alt:before {
  content: '\f118';
}
.zmdi-block:before {
  content: '\f119';
}
.zmdi-boat:before {
  content: '\f11a';
}
.zmdi-book-image:before {
  content: '\f11b';
}
.zmdi-book:before {
  content: '\f11c';
}
.zmdi-bookmark-outline:before {
  content: '\f11d';
}
.zmdi-bookmark:before {
  content: '\f11e';
}
.zmdi-brush:before {
  content: '\f11f';
}
.zmdi-bug:before {
  content: '\f120';
}
.zmdi-bus:before {
  content: '\f121';
}
.zmdi-cake:before {
  content: '\f122';
}
.zmdi-car-taxi:before {
  content: '\f123';
}
.zmdi-car-wash:before {
  content: '\f124';
}
.zmdi-car:before {
  content: '\f125';
}
.zmdi-card-giftcard:before {
  content: '\f126';
}
.zmdi-card-membership:before {
  content: '\f127';
}
.zmdi-card-travel:before {
  content: '\f128';
}
.zmdi-card:before {
  content: '\f129';
}
.zmdi-case-check:before {
  content: '\f12a';
}
.zmdi-case-download:before {
  content: '\f12b';
}
.zmdi-case-play:before {
  content: '\f12c';
}
.zmdi-case:before {
  content: '\f12d';
}
.zmdi-cast-connected:before {
  content: '\f12e';
}
.zmdi-cast:before {
  content: '\f12f';
}
.zmdi-chart-donut:before {
  content: '\f130';
}
.zmdi-chart:before {
  content: '\f131';
}
.zmdi-city-alt:before {
  content: '\f132';
}
.zmdi-city:before {
  content: '\f133';
}
.zmdi-close-circle-o:before {
  content: '\f134';
}
.zmdi-close-circle:before {
  content: '\f135';
}
.zmdi-close:before {
  content: '\f136';
}
.zmdi-cocktail:before {
  content: '\f137';
}
.zmdi-code-setting:before {
  content: '\f138';
}
.zmdi-code-smartphone:before {
  content: '\f139';
}
.zmdi-code:before {
  content: '\f13a';
}
.zmdi-coffee:before {
  content: '\f13b';
}
.zmdi-collection-bookmark:before {
  content: '\f13c';
}
.zmdi-collection-case-play:before {
  content: '\f13d';
}
.zmdi-collection-folder-image:before {
  content: '\f13e';
}
.zmdi-collection-image-o:before {
  content: '\f13f';
}
.zmdi-collection-image:before {
  content: '\f140';
}
.zmdi-collection-item-1:before {
  content: '\f141';
}
.zmdi-collection-item-2:before {
  content: '\f142';
}
.zmdi-collection-item-3:before {
  content: '\f143';
}
.zmdi-collection-item-4:before {
  content: '\f144';
}
.zmdi-collection-item-5:before {
  content: '\f145';
}
.zmdi-collection-item-6:before {
  content: '\f146';
}
.zmdi-collection-item-7:before {
  content: '\f147';
}
.zmdi-collection-item-8:before {
  content: '\f148';
}
.zmdi-collection-item-9-plus:before {
  content: '\f149';
}
.zmdi-collection-item-9:before {
  content: '\f14a';
}
.zmdi-collection-item:before {
  content: '\f14b';
}
.zmdi-collection-music:before {
  content: '\f14c';
}
.zmdi-collection-pdf:before {
  content: '\f14d';
}
.zmdi-collection-plus:before {
  content: '\f14e';
}
.zmdi-collection-speaker:before {
  content: '\f14f';
}
.zmdi-collection-text:before {
  content: '\f150';
}
.zmdi-collection-video:before {
  content: '\f151';
}
.zmdi-compass:before {
  content: '\f152';
}
.zmdi-cutlery:before {
  content: '\f153';
}
.zmdi-delete:before {
  content: '\f154';
}
.zmdi-dialpad:before {
  content: '\f155';
}
.zmdi-dns:before {
  content: '\f156';
}
.zmdi-drink:before {
  content: '\f157';
}
.zmdi-edit:before {
  content: '\f158';
}
.zmdi-email-open:before {
  content: '\f159';
}
.zmdi-email:before {
  content: '\f15a';
}
.zmdi-eye-off:before {
  content: '\f15b';
}
.zmdi-eye:before {
  content: '\f15c';
}
.zmdi-eyedropper:before {
  content: '\f15d';
}
.zmdi-favorite-outline:before {
  content: '\f15e';
}
.zmdi-favorite:before {
  content: '\f15f';
}
.zmdi-filter-list:before {
  content: '\f160';
}
.zmdi-fire:before {
  content: '\f161';
}
.zmdi-flag:before {
  content: '\f162';
}
.zmdi-flare:before {
  content: '\f163';
}
.zmdi-flash-auto:before {
  content: '\f164';
}
.zmdi-flash-off:before {
  content: '\f165';
}
.zmdi-flash:before {
  content: '\f166';
}
.zmdi-flip:before {
  content: '\f167';
}
.zmdi-flower-alt:before {
  content: '\f168';
}
.zmdi-flower:before {
  content: '\f169';
}
.zmdi-font:before {
  content: '\f16a';
}
.zmdi-fullscreen-alt:before {
  content: '\f16b';
}
.zmdi-fullscreen-exit:before {
  content: '\f16c';
}
.zmdi-fullscreen:before {
  content: '\f16d';
}
.zmdi-functions:before {
  content: '\f16e';
}
.zmdi-gas-station:before {
  content: '\f16f';
}
.zmdi-gesture:before {
  content: '\f170';
}
.zmdi-globe-alt:before {
  content: '\f171';
}
.zmdi-globe-lock:before {
  content: '\f172';
}
.zmdi-globe:before {
  content: '\f173';
}
.zmdi-graduation-cap:before {
  content: '\f174';
}
.zmdi-home:before {
  content: '\f175';
}
.zmdi-hospital-alt:before {
  content: '\f176';
}
.zmdi-hospital:before {
  content: '\f177';
}
.zmdi-hotel:before {
  content: '\f178';
}
.zmdi-hourglass-alt:before {
  content: '\f179';
}
.zmdi-hourglass-outline:before {
  content: '\f17a';
}
.zmdi-hourglass:before {
  content: '\f17b';
}
.zmdi-http:before {
  content: '\f17c';
}
.zmdi-image-alt:before {
  content: '\f17d';
}
.zmdi-image-o:before {
  content: '\f17e';
}
.zmdi-image:before {
  content: '\f17f';
}
.zmdi-inbox:before {
  content: '\f180';
}
.zmdi-invert-colors-off:before {
  content: '\f181';
}
.zmdi-invert-colors:before {
  content: '\f182';
}
.zmdi-key:before {
  content: '\f183';
}
.zmdi-label-alt-outline:before {
  content: '\f184';
}
.zmdi-label-alt:before {
  content: '\f185';
}
.zmdi-label-heart:before {
  content: '\f186';
}
.zmdi-label:before {
  content: '\f187';
}
.zmdi-labels:before {
  content: '\f188';
}
.zmdi-lamp:before {
  content: '\f189';
}
.zmdi-landscape:before {
  content: '\f18a';
}
.zmdi-layers-off:before {
  content: '\f18b';
}
.zmdi-layers:before {
  content: '\f18c';
}
.zmdi-library:before {
  content: '\f18d';
}
.zmdi-link:before {
  content: '\f18e';
}
.zmdi-lock-open:before {
  content: '\f18f';
}
.zmdi-lock-outline:before {
  content: '\f190';
}
.zmdi-lock:before {
  content: '\f191';
}
.zmdi-mail-reply-all:before {
  content: '\f192';
}
.zmdi-mail-reply:before {
  content: '\f193';
}
.zmdi-mail-send:before {
  content: '\f194';
}
.zmdi-mall:before {
  content: '\f195';
}
.zmdi-map:before {
  content: '\f196';
}
.zmdi-menu:before {
  content: '\f197';
}
.zmdi-money-box:before {
  content: '\f198';
}
.zmdi-money-off:before {
  content: '\f199';
}
.zmdi-money:before {
  content: '\f19a';
}
.zmdi-more-vert:before {
  content: '\f19b';
}
.zmdi-more:before {
  content: '\f19c';
}
.zmdi-movie-alt:before {
  content: '\f19d';
}
.zmdi-movie:before {
  content: '\f19e';
}
.zmdi-nature-people:before {
  content: '\f19f';
}
.zmdi-nature:before {
  content: '\f1a0';
}
.zmdi-navigation:before {
  content: '\f1a1';
}
.zmdi-open-in-browser:before {
  content: '\f1a2';
}
.zmdi-open-in-new:before {
  content: '\f1a3';
}
.zmdi-palette:before {
  content: '\f1a4';
}
.zmdi-parking:before {
  content: '\f1a5';
}
.zmdi-pin-account:before {
  content: '\f1a6';
}
.zmdi-pin-assistant:before {
  content: '\f1a7';
}
.zmdi-pin-drop:before {
  content: '\f1a8';
}
.zmdi-pin-help:before {
  content: '\f1a9';
}
.zmdi-pin-off:before {
  content: '\f1aa';
}
.zmdi-pin:before {
  content: '\f1ab';
}
.zmdi-pizza:before {
  content: '\f1ac';
}
.zmdi-plaster:before {
  content: '\f1ad';
}
.zmdi-power-setting:before {
  content: '\f1ae';
}
.zmdi-power:before {
  content: '\f1af';
}
.zmdi-print:before {
  content: '\f1b0';
}
.zmdi-puzzle-piece:before {
  content: '\f1b1';
}
.zmdi-quote:before {
  content: '\f1b2';
}
.zmdi-railway:before {
  content: '\f1b3';
}
.zmdi-receipt:before {
  content: '\f1b4';
}
.zmdi-refresh-alt:before {
  content: '\f1b5';
}
.zmdi-refresh-sync-alert:before {
  content: '\f1b6';
}
.zmdi-refresh-sync-off:before {
  content: '\f1b7';
}
.zmdi-refresh-sync:before {
  content: '\f1b8';
}
.zmdi-refresh:before {
  content: '\f1b9';
}
.zmdi-roller:before {
  content: '\f1ba';
}
.zmdi-ruler:before {
  content: '\f1bb';
}
.zmdi-scissors:before {
  content: '\f1bc';
}
.zmdi-screen-rotation-lock:before {
  content: '\f1bd';
}
.zmdi-screen-rotation:before {
  content: '\f1be';
}
.zmdi-search-for:before {
  content: '\f1bf';
}
.zmdi-search-in-file:before {
  content: '\f1c0';
}
.zmdi-search-in-page:before {
  content: '\f1c1';
}
.zmdi-search-replace:before {
  content: '\f1c2';
}
.zmdi-search:before {
  content: '\f1c3';
}
.zmdi-seat:before {
  content: '\f1c4';
}
.zmdi-settings-square:before {
  content: '\f1c5';
}
.zmdi-settings:before {
  content: '\f1c6';
}
.zmdi-shield-check:before {
  content: '\f1c7';
}
.zmdi-shield-security:before {
  content: '\f1c8';
}
.zmdi-shopping-basket:before {
  content: '\f1c9';
}
.zmdi-shopping-cart-plus:before {
  content: '\f1ca';
}
.zmdi-shopping-cart:before {
  content: '\f1cb';
}
.zmdi-sign-in:before {
  content: '\f1cc';
}
.zmdi-sort-amount-asc:before {
  content: '\f1cd';
}
.zmdi-sort-amount-desc:before {
  content: '\f1ce';
}
.zmdi-sort-asc:before {
  content: '\f1cf';
}
.zmdi-sort-desc:before {
  content: '\f1d0';
}
.zmdi-spellcheck:before {
  content: '\f1d1';
}
.zmdi-storage:before {
  content: '\f1d2';
}
.zmdi-store-24:before {
  content: '\f1d3';
}
.zmdi-store:before {
  content: '\f1d4';
}
.zmdi-subway:before {
  content: '\f1d5';
}
.zmdi-sun:before {
  content: '\f1d6';
}
.zmdi-tab-unselected:before {
  content: '\f1d7';
}
.zmdi-tab:before {
  content: '\f1d8';
}
.zmdi-tag-close:before {
  content: '\f1d9';
}
.zmdi-tag-more:before {
  content: '\f1da';
}
.zmdi-tag:before {
  content: '\f1db';
}
.zmdi-thumb-down:before {
  content: '\f1dc';
}
.zmdi-thumb-up-down:before {
  content: '\f1dd';
}
.zmdi-thumb-up:before {
  content: '\f1de';
}
.zmdi-ticket-star:before {
  content: '\f1df';
}
.zmdi-toll:before {
  content: '\f1e0';
}
.zmdi-toys:before {
  content: '\f1e1';
}
.zmdi-traffic:before {
  content: '\f1e2';
}
.zmdi-translate:before {
  content: '\f1e3';
}
.zmdi-triangle-down:before {
  content: '\f1e4';
}
.zmdi-triangle-up:before {
  content: '\f1e5';
}
.zmdi-truck:before {
  content: '\f1e6';
}
.zmdi-turning-sign:before {
  content: '\f1e7';
}
.zmdi-wallpaper:before {
  content: '\f1e8';
}
.zmdi-washing-machine:before {
  content: '\f1e9';
}
.zmdi-window-maximize:before {
  content: '\f1ea';
}
.zmdi-window-minimize:before {
  content: '\f1eb';
}
.zmdi-window-restore:before {
  content: '\f1ec';
}
.zmdi-wrench:before {
  content: '\f1ed';
}
.zmdi-zoom-in:before {
  content: '\f1ee';
}
.zmdi-zoom-out:before {
  content: '\f1ef';
}
.zmdi-alert-circle-o:before {
  content: '\f1f0';
}
.zmdi-alert-circle:before {
  content: '\f1f1';
}
.zmdi-alert-octagon:before {
  content: '\f1f2';
}
.zmdi-alert-polygon:before {
  content: '\f1f3';
}
.zmdi-alert-triangle:before {
  content: '\f1f4';
}
.zmdi-help-outline:before {
  content: '\f1f5';
}
.zmdi-help:before {
  content: '\f1f6';
}
.zmdi-info-outline:before {
  content: '\f1f7';
}
.zmdi-info:before {
  content: '\f1f8';
}
.zmdi-notifications-active:before {
  content: '\f1f9';
}
.zmdi-notifications-add:before {
  content: '\f1fa';
}
.zmdi-notifications-none:before {
  content: '\f1fb';
}
.zmdi-notifications-off:before {
  content: '\f1fc';
}
.zmdi-notifications-paused:before {
  content: '\f1fd';
}
.zmdi-notifications:before {
  content: '\f1fe';
}
.zmdi-account-add:before {
  content: '\f1ff';
}
.zmdi-account-box-mail:before {
  content: '\f200';
}
.zmdi-account-box-o:before {
  content: '\f201';
}
.zmdi-account-box-phone:before {
  content: '\f202';
}
.zmdi-account-box:before {
  content: '\f203';
}
.zmdi-account-calendar:before {
  content: '\f204';
}
.zmdi-account-circle:before {
  content: '\f205';
}
.zmdi-account-o:before {
  content: '\f206';
}
.zmdi-account:before {
  content: '\f207';
}
.zmdi-accounts-add:before {
  content: '\f208';
}
.zmdi-accounts-alt:before {
  content: '\f209';
}
.zmdi-accounts-list-alt:before {
  content: '\f20a';
}
.zmdi-accounts-list:before {
  content: '\f20b';
}
.zmdi-accounts-outline:before {
  content: '\f20c';
}
.zmdi-accounts:before {
  content: '\f20d';
}
.zmdi-face:before {
  content: '\f20e';
}
.zmdi-female:before {
  content: '\f20f';
}
.zmdi-male-alt:before {
  content: '\f210';
}
.zmdi-male-female:before {
  content: '\f211';
}
.zmdi-male:before {
  content: '\f212';
}
.zmdi-mood-bad:before {
  content: '\f213';
}
.zmdi-mood:before {
  content: '\f214';
}
.zmdi-run:before {
  content: '\f215';
}
.zmdi-walk:before {
  content: '\f216';
}
.zmdi-cloud-box:before {
  content: '\f217';
}
.zmdi-cloud-circle:before {
  content: '\f218';
}
.zmdi-cloud-done:before {
  content: '\f219';
}
.zmdi-cloud-download:before {
  content: '\f21a';
}
.zmdi-cloud-off:before {
  content: '\f21b';
}
.zmdi-cloud-outline-alt:before {
  content: '\f21c';
}
.zmdi-cloud-outline:before {
  content: '\f21d';
}
.zmdi-cloud-upload:before {
  content: '\f21e';
}
.zmdi-cloud:before {
  content: '\f21f';
}
.zmdi-download:before {
  content: '\f220';
}
.zmdi-file-plus:before {
  content: '\f221';
}
.zmdi-file-text:before {
  content: '\f222';
}
.zmdi-file:before {
  content: '\f223';
}
.zmdi-folder-outline:before {
  content: '\f224';
}
.zmdi-folder-person:before {
  content: '\f225';
}
.zmdi-folder-star-alt:before {
  content: '\f226';
}
.zmdi-folder-star:before {
  content: '\f227';
}
.zmdi-folder:before {
  content: '\f228';
}
.zmdi-gif:before {
  content: '\f229';
}
.zmdi-upload:before {
  content: '\f22a';
}
.zmdi-border-all:before {
  content: '\f22b';
}
.zmdi-border-bottom:before {
  content: '\f22c';
}
.zmdi-border-clear:before {
  content: '\f22d';
}
.zmdi-border-color:before {
  content: '\f22e';
}
.zmdi-border-horizontal:before {
  content: '\f22f';
}
.zmdi-border-inner:before {
  content: '\f230';
}
.zmdi-border-left:before {
  content: '\f231';
}
.zmdi-border-outer:before {
  content: '\f232';
}
.zmdi-border-right:before {
  content: '\f233';
}
.zmdi-border-style:before {
  content: '\f234';
}
.zmdi-border-top:before {
  content: '\f235';
}
.zmdi-border-vertical:before {
  content: '\f236';
}
.zmdi-copy:before {
  content: '\f237';
}
.zmdi-crop:before {
  content: '\f238';
}
.zmdi-format-align-center:before {
  content: '\f239';
}
.zmdi-format-align-justify:before {
  content: '\f23a';
}
.zmdi-format-align-left:before {
  content: '\f23b';
}
.zmdi-format-align-right:before {
  content: '\f23c';
}
.zmdi-format-bold:before {
  content: '\f23d';
}
.zmdi-format-clear-all:before {
  content: '\f23e';
}
.zmdi-format-clear:before {
  content: '\f23f';
}
.zmdi-format-color-fill:before {
  content: '\f240';
}
.zmdi-format-color-reset:before {
  content: '\f241';
}
.zmdi-format-color-text:before {
  content: '\f242';
}
.zmdi-format-indent-decrease:before {
  content: '\f243';
}
.zmdi-format-indent-increase:before {
  content: '\f244';
}
.zmdi-format-italic:before {
  content: '\f245';
}
.zmdi-format-line-spacing:before {
  content: '\f246';
}
.zmdi-format-list-bulleted:before {
  content: '\f247';
}
.zmdi-format-list-numbered:before {
  content: '\f248';
}
.zmdi-format-ltr:before {
  content: '\f249';
}
.zmdi-format-rtl:before {
  content: '\f24a';
}
.zmdi-format-size:before {
  content: '\f24b';
}
.zmdi-format-strikethrough-s:before {
  content: '\f24c';
}
.zmdi-format-strikethrough:before {
  content: '\f24d';
}
.zmdi-format-subject:before {
  content: '\f24e';
}
.zmdi-format-underlined:before {
  content: '\f24f';
}
.zmdi-format-valign-bottom:before {
  content: '\f250';
}
.zmdi-format-valign-center:before {
  content: '\f251';
}
.zmdi-format-valign-top:before {
  content: '\f252';
}
.zmdi-redo:before {
  content: '\f253';
}
.zmdi-select-all:before {
  content: '\f254';
}
.zmdi-space-bar:before {
  content: '\f255';
}
.zmdi-text-format:before {
  content: '\f256';
}
.zmdi-transform:before {
  content: '\f257';
}
.zmdi-undo:before {
  content: '\f258';
}
.zmdi-wrap-text:before {
  content: '\f259';
}
.zmdi-comment-alert:before {
  content: '\f25a';
}
.zmdi-comment-alt-text:before {
  content: '\f25b';
}
.zmdi-comment-alt:before {
  content: '\f25c';
}
.zmdi-comment-edit:before {
  content: '\f25d';
}
.zmdi-comment-image:before {
  content: '\f25e';
}
.zmdi-comment-list:before {
  content: '\f25f';
}
.zmdi-comment-more:before {
  content: '\f260';
}
.zmdi-comment-outline:before {
  content: '\f261';
}
.zmdi-comment-text-alt:before {
  content: '\f262';
}
.zmdi-comment-text:before {
  content: '\f263';
}
.zmdi-comment-video:before {
  content: '\f264';
}
.zmdi-comment:before {
  content: '\f265';
}
.zmdi-comments:before {
  content: '\f266';
}
.zmdi-check-all:before {
  content: '\f267';
}
.zmdi-check-circle-u:before {
  content: '\f268';
}
.zmdi-check-circle:before {
  content: '\f269';
}
.zmdi-check-square:before {
  content: '\f26a';
}
.zmdi-check:before {
  content: '\f26b';
}
.zmdi-circle-o:before {
  content: '\f26c';
}
.zmdi-circle:before {
  content: '\f26d';
}
.zmdi-dot-circle-alt:before {
  content: '\f26e';
}
.zmdi-dot-circle:before {
  content: '\f26f';
}
.zmdi-minus-circle-outline:before {
  content: '\f270';
}
.zmdi-minus-circle:before {
  content: '\f271';
}
.zmdi-minus-square:before {
  content: '\f272';
}
.zmdi-minus:before {
  content: '\f273';
}
.zmdi-plus-circle-o-duplicate:before {
  content: '\f274';
}
.zmdi-plus-circle-o:before {
  content: '\f275';
}
.zmdi-plus-circle:before {
  content: '\f276';
}
.zmdi-plus-square:before {
  content: '\f277';
}
.zmdi-plus:before {
  content: '\f278';
}
.zmdi-square-o:before {
  content: '\f279';
}
.zmdi-star-circle:before {
  content: '\f27a';
}
.zmdi-star-half:before {
  content: '\f27b';
}
.zmdi-star-outline:before {
  content: '\f27c';
}
.zmdi-star:before {
  content: '\f27d';
}
.zmdi-bluetooth-connected:before {
  content: '\f27e';
}
.zmdi-bluetooth-off:before {
  content: '\f27f';
}
.zmdi-bluetooth-search:before {
  content: '\f280';
}
.zmdi-bluetooth-setting:before {
  content: '\f281';
}
.zmdi-bluetooth:before {
  content: '\f282';
}
.zmdi-camera-add:before {
  content: '\f283';
}
.zmdi-camera-alt:before {
  content: '\f284';
}
.zmdi-camera-bw:before {
  content: '\f285';
}
.zmdi-camera-front:before {
  content: '\f286';
}
.zmdi-camera-mic:before {
  content: '\f287';
}
.zmdi-camera-party-mode:before {
  content: '\f288';
}
.zmdi-camera-rear:before {
  content: '\f289';
}
.zmdi-camera-roll:before {
  content: '\f28a';
}
.zmdi-camera-switch:before {
  content: '\f28b';
}
.zmdi-camera:before {
  content: '\f28c';
}
.zmdi-card-alert:before {
  content: '\f28d';
}
.zmdi-card-off:before {
  content: '\f28e';
}
.zmdi-card-sd:before {
  content: '\f28f';
}
.zmdi-card-sim:before {
  content: '\f290';
}
.zmdi-desktop-mac:before {
  content: '\f291';
}
.zmdi-desktop-windows:before {
  content: '\f292';
}
.zmdi-device-hub:before {
  content: '\f293';
}
.zmdi-devices-off:before {
  content: '\f294';
}
.zmdi-devices:before {
  content: '\f295';
}
.zmdi-dock:before {
  content: '\f296';
}
.zmdi-floppy:before {
  content: '\f297';
}
.zmdi-gamepad:before {
  content: '\f298';
}
.zmdi-gps-dot:before {
  content: '\f299';
}
.zmdi-gps-off:before {
  content: '\f29a';
}
.zmdi-gps:before {
  content: '\f29b';
}
.zmdi-headset-mic:before {
  content: '\f29c';
}
.zmdi-headset:before {
  content: '\f29d';
}
.zmdi-input-antenna:before {
  content: '\f29e';
}
.zmdi-input-composite:before {
  content: '\f29f';
}
.zmdi-input-hdmi:before {
  content: '\f2a0';
}
.zmdi-input-power:before {
  content: '\f2a1';
}
.zmdi-input-svideo:before {
  content: '\f2a2';
}
.zmdi-keyboard-hide:before {
  content: '\f2a3';
}
.zmdi-keyboard:before {
  content: '\f2a4';
}
.zmdi-laptop-chromebook:before {
  content: '\f2a5';
}
.zmdi-laptop-mac:before {
  content: '\f2a6';
}
.zmdi-laptop:before {
  content: '\f2a7';
}
.zmdi-mic-off:before {
  content: '\f2a8';
}
.zmdi-mic-outline:before {
  content: '\f2a9';
}
.zmdi-mic-setting:before {
  content: '\f2aa';
}
.zmdi-mic:before {
  content: '\f2ab';
}
.zmdi-mouse:before {
  content: '\f2ac';
}
.zmdi-network-alert:before {
  content: '\f2ad';
}
.zmdi-network-locked:before {
  content: '\f2ae';
}
.zmdi-network-off:before {
  content: '\f2af';
}
.zmdi-network-outline:before {
  content: '\f2b0';
}
.zmdi-network-setting:before {
  content: '\f2b1';
}
.zmdi-network:before {
  content: '\f2b2';
}
.zmdi-phone-bluetooth:before {
  content: '\f2b3';
}
.zmdi-phone-end:before {
  content: '\f2b4';
}
.zmdi-phone-forwarded:before {
  content: '\f2b5';
}
.zmdi-phone-in-talk:before {
  content: '\f2b6';
}
.zmdi-phone-locked:before {
  content: '\f2b7';
}
.zmdi-phone-missed:before {
  content: '\f2b8';
}
.zmdi-phone-msg:before {
  content: '\f2b9';
}
.zmdi-phone-paused:before {
  content: '\f2ba';
}
.zmdi-phone-ring:before {
  content: '\f2bb';
}
.zmdi-phone-setting:before {
  content: '\f2bc';
}
.zmdi-phone-sip:before {
  content: '\f2bd';
}
.zmdi-phone:before {
  content: '\f2be';
}
.zmdi-portable-wifi-changes:before {
  content: '\f2bf';
}
.zmdi-portable-wifi-off:before {
  content: '\f2c0';
}
.zmdi-portable-wifi:before {
  content: '\f2c1';
}
.zmdi-radio:before {
  content: '\f2c2';
}
.zmdi-reader:before {
  content: '\f2c3';
}
.zmdi-remote-control-alt:before {
  content: '\f2c4';
}
.zmdi-remote-control:before {
  content: '\f2c5';
}
.zmdi-router:before {
  content: '\f2c6';
}
.zmdi-scanner:before {
  content: '\f2c7';
}
.zmdi-smartphone-android:before {
  content: '\f2c8';
}
.zmdi-smartphone-download:before {
  content: '\f2c9';
}
.zmdi-smartphone-erase:before {
  content: '\f2ca';
}
.zmdi-smartphone-info:before {
  content: '\f2cb';
}
.zmdi-smartphone-iphone:before {
  content: '\f2cc';
}
.zmdi-smartphone-landscape-lock:before {
  content: '\f2cd';
}
.zmdi-smartphone-landscape:before {
  content: '\f2ce';
}
.zmdi-smartphone-lock:before {
  content: '\f2cf';
}
.zmdi-smartphone-portrait-lock:before {
  content: '\f2d0';
}
.zmdi-smartphone-ring:before {
  content: '\f2d1';
}
.zmdi-smartphone-setting:before {
  content: '\f2d2';
}
.zmdi-smartphone-setup:before {
  content: '\f2d3';
}
.zmdi-smartphone:before {
  content: '\f2d4';
}
.zmdi-speaker:before {
  content: '\f2d5';
}
.zmdi-tablet-android:before {
  content: '\f2d6';
}
.zmdi-tablet-mac:before {
  content: '\f2d7';
}
.zmdi-tablet:before {
  content: '\f2d8';
}
.zmdi-tv-alt-play:before {
  content: '\f2d9';
}
.zmdi-tv-list:before {
  content: '\f2da';
}
.zmdi-tv-play:before {
  content: '\f2db';
}
.zmdi-tv:before {
  content: '\f2dc';
}
.zmdi-usb:before {
  content: '\f2dd';
}
.zmdi-videocam-off:before {
  content: '\f2de';
}
.zmdi-videocam-switch:before {
  content: '\f2df';
}
.zmdi-videocam:before {
  content: '\f2e0';
}
.zmdi-watch:before {
  content: '\f2e1';
}
.zmdi-wifi-alt-2:before {
  content: '\f2e2';
}
.zmdi-wifi-alt:before {
  content: '\f2e3';
}
.zmdi-wifi-info:before {
  content: '\f2e4';
}
.zmdi-wifi-lock:before {
  content: '\f2e5';
}
.zmdi-wifi-off:before {
  content: '\f2e6';
}
.zmdi-wifi-outline:before {
  content: '\f2e7';
}
.zmdi-wifi:before {
  content: '\f2e8';
}
.zmdi-arrow-left-bottom:before {
  content: '\f2e9';
}
.zmdi-arrow-left:before {
  content: '\f2ea';
}
.zmdi-arrow-merge:before {
  content: '\f2eb';
}
.zmdi-arrow-missed:before {
  content: '\f2ec';
}
.zmdi-arrow-right-top:before {
  content: '\f2ed';
}
.zmdi-arrow-right:before {
  content: '\f2ee';
}
.zmdi-arrow-split:before {
  content: '\f2ef';
}
.zmdi-arrows:before {
  content: '\f2f0';
}
.zmdi-caret-down-circle:before {
  content: '\f2f1';
}
.zmdi-caret-down:before {
  content: '\f2f2';
}
.zmdi-caret-left-circle:before {
  content: '\f2f3';
}
.zmdi-caret-left:before {
  content: '\f2f4';
}
.zmdi-caret-right-circle:before {
  content: '\f2f5';
}
.zmdi-caret-right:before {
  content: '\f2f6';
}
.zmdi-caret-up-circle:before {
  content: '\f2f7';
}
.zmdi-caret-up:before {
  content: '\f2f8';
}
.zmdi-chevron-down:before {
  content: '\f2f9';
}
.zmdi-chevron-left:before {
  content: '\f2fa';
}
.zmdi-chevron-right:before {
  content: '\f2fb';
}
.zmdi-chevron-up:before {
  content: '\f2fc';
}
.zmdi-forward:before {
  content: '\f2fd';
}
.zmdi-long-arrow-down:before {
  content: '\f2fe';
}
.zmdi-long-arrow-left:before {
  content: '\f2ff';
}
.zmdi-long-arrow-return:before {
  content: '\f300';
}
.zmdi-long-arrow-right:before {
  content: '\f301';
}
.zmdi-long-arrow-tab:before {
  content: '\f302';
}
.zmdi-long-arrow-up:before {
  content: '\f303';
}
.zmdi-rotate-ccw:before {
  content: '\f304';
}
.zmdi-rotate-cw:before {
  content: '\f305';
}
.zmdi-rotate-left:before {
  content: '\f306';
}
.zmdi-rotate-right:before {
  content: '\f307';
}
.zmdi-square-down:before {
  content: '\f308';
}
.zmdi-square-right:before {
  content: '\f309';
}
.zmdi-swap-alt:before {
  content: '\f30a';
}
.zmdi-swap-vertical-circle:before {
  content: '\f30b';
}
.zmdi-swap-vertical:before {
  content: '\f30c';
}
.zmdi-swap:before {
  content: '\f30d';
}
.zmdi-trending-down:before {
  content: '\f30e';
}
.zmdi-trending-flat:before {
  content: '\f30f';
}
.zmdi-trending-up:before {
  content: '\f310';
}
.zmdi-unfold-less:before {
  content: '\f311';
}
.zmdi-unfold-more:before {
  content: '\f312';
}
.zmdi-apps:before {
  content: '\f313';
}
.zmdi-grid-off:before {
  content: '\f314';
}
.zmdi-grid:before {
  content: '\f315';
}
.zmdi-view-agenda:before {
  content: '\f316';
}
.zmdi-view-array:before {
  content: '\f317';
}
.zmdi-view-carousel:before {
  content: '\f318';
}
.zmdi-view-column:before {
  content: '\f319';
}
.zmdi-view-comfy:before {
  content: '\f31a';
}
.zmdi-view-compact:before {
  content: '\f31b';
}
.zmdi-view-dashboard:before {
  content: '\f31c';
}
.zmdi-view-day:before {
  content: '\f31d';
}
.zmdi-view-headline:before {
  content: '\f31e';
}
.zmdi-view-list-alt:before {
  content: '\f31f';
}
.zmdi-view-list:before {
  content: '\f320';
}
.zmdi-view-module:before {
  content: '\f321';
}
.zmdi-view-quilt:before {
  content: '\f322';
}
.zmdi-view-stream:before {
  content: '\f323';
}
.zmdi-view-subtitles:before {
  content: '\f324';
}
.zmdi-view-toc:before {
  content: '\f325';
}
.zmdi-view-web:before {
  content: '\f326';
}
.zmdi-view-week:before {
  content: '\f327';
}
.zmdi-widgets:before {
  content: '\f328';
}
.zmdi-alarm-check:before {
  content: '\f329';
}
.zmdi-alarm-off:before {
  content: '\f32a';
}
.zmdi-alarm-plus:before {
  content: '\f32b';
}
.zmdi-alarm-snooze:before {
  content: '\f32c';
}
.zmdi-alarm:before {
  content: '\f32d';
}
.zmdi-calendar-alt:before {
  content: '\f32e';
}
.zmdi-calendar-check:before {
  content: '\f32f';
}
.zmdi-calendar-close:before {
  content: '\f330';
}
.zmdi-calendar-note:before {
  content: '\f331';
}
.zmdi-calendar:before {
  content: '\f332';
}
.zmdi-time-countdown:before {
  content: '\f333';
}
.zmdi-time-interval:before {
  content: '\f334';
}
.zmdi-time-restore-setting:before {
  content: '\f335';
}
.zmdi-time-restore:before {
  content: '\f336';
}
.zmdi-time:before {
  content: '\f337';
}
.zmdi-timer-off:before {
  content: '\f338';
}
.zmdi-timer:before {
  content: '\f339';
}
.zmdi-android-alt:before {
  content: '\f33a';
}
.zmdi-android:before {
  content: '\f33b';
}
.zmdi-apple:before {
  content: '\f33c';
}
.zmdi-behance:before {
  content: '\f33d';
}
.zmdi-codepen:before {
  content: '\f33e';
}
.zmdi-dribbble:before {
  content: '\f33f';
}
.zmdi-dropbox:before {
  content: '\f340';
}
.zmdi-evernote:before {
  content: '\f341';
}
.zmdi-facebook-box:before {
  content: '\f342';
}
.zmdi-facebook:before {
  content: '\f343';
}
.zmdi-github-box:before {
  content: '\f344';
}
.zmdi-github:before {
  content: '\f345';
}
.zmdi-google-drive:before {
  content: '\f346';
}
.zmdi-google-earth:before {
  content: '\f347';
}
.zmdi-google-glass:before {
  content: '\f348';
}
.zmdi-google-maps:before {
  content: '\f349';
}
.zmdi-google-pages:before {
  content: '\f34a';
}
.zmdi-google-play:before {
  content: '\f34b';
}
.zmdi-google-plus-box:before {
  content: '\f34c';
}
.zmdi-google-plus:before {
  content: '\f34d';
}
.zmdi-google:before {
  content: '\f34e';
}
.zmdi-instagram:before {
  content: '\f34f';
}
.zmdi-language-css3:before {
  content: '\f350';
}
.zmdi-language-html5:before {
  content: '\f351';
}
.zmdi-language-javascript:before {
  content: '\f352';
}
.zmdi-language-python-alt:before {
  content: '\f353';
}
.zmdi-language-python:before {
  content: '\f354';
}
.zmdi-lastfm:before {
  content: '\f355';
}
.zmdi-linkedin-box:before {
  content: '\f356';
}
.zmdi-paypal:before {
  content: '\f357';
}
.zmdi-pinterest-box:before {
  content: '\f358';
}
.zmdi-pocket:before {
  content: '\f359';
}
.zmdi-polymer:before {
  content: '\f35a';
}
.zmdi-share:before {
  content: '\f35b';
}
.zmdi-stackoverflow:before {
  content: '\f35c';
}
.zmdi-steam-square:before {
  content: '\f35d';
}
.zmdi-steam:before {
  content: '\f35e';
}
.zmdi-twitter-box:before {
  content: '\f35f';
}
.zmdi-twitter:before {
  content: '\f360';
}
.zmdi-vk:before {
  content: '\f361';
}
.zmdi-wikipedia:before {
  content: '\f362';
}
.zmdi-windows:before {
  content: '\f363';
}
.zmdi-aspect-ratio-alt:before {
  content: '\f364';
}
.zmdi-aspect-ratio:before {
  content: '\f365';
}
.zmdi-blur-circular:before {
  content: '\f366';
}
.zmdi-blur-linear:before {
  content: '\f367';
}
.zmdi-blur-off:before {
  content: '\f368';
}
.zmdi-blur:before {
  content: '\f369';
}
.zmdi-brightness-2:before {
  content: '\f36a';
}
.zmdi-brightness-3:before {
  content: '\f36b';
}
.zmdi-brightness-4:before {
  content: '\f36c';
}
.zmdi-brightness-5:before {
  content: '\f36d';
}
.zmdi-brightness-6:before {
  content: '\f36e';
}
.zmdi-brightness-7:before {
  content: '\f36f';
}
.zmdi-brightness-auto:before {
  content: '\f370';
}
.zmdi-brightness-setting:before {
  content: '\f371';
}
.zmdi-broken-image:before {
  content: '\f372';
}
.zmdi-center-focus-strong:before {
  content: '\f373';
}
.zmdi-center-focus-weak:before {
  content: '\f374';
}
.zmdi-compare:before {
  content: '\f375';
}
.zmdi-crop-16-9:before {
  content: '\f376';
}
.zmdi-crop-3-2:before {
  content: '\f377';
}
.zmdi-crop-5-4:before {
  content: '\f378';
}
.zmdi-crop-7-5:before {
  content: '\f379';
}
.zmdi-crop-din:before {
  content: '\f37a';
}
.zmdi-crop-free:before {
  content: '\f37b';
}
.zmdi-crop-landscape:before {
  content: '\f37c';
}
.zmdi-crop-portrait:before {
  content: '\f37d';
}
.zmdi-crop-square:before {
  content: '\f37e';
}
.zmdi-exposure-alt:before {
  content: '\f37f';
}
.zmdi-exposure:before {
  content: '\f380';
}
.zmdi-filter-b-and-w:before {
  content: '\f381';
}
.zmdi-filter-center-focus:before {
  content: '\f382';
}
.zmdi-filter-frames:before {
  content: '\f383';
}
.zmdi-filter-tilt-shift:before {
  content: '\f384';
}
.zmdi-gradient:before {
  content: '\f385';
}
.zmdi-grain:before {
  content: '\f386';
}
.zmdi-graphic-eq:before {
  content: '\f387';
}
.zmdi-hdr-off:before {
  content: '\f388';
}
.zmdi-hdr-strong:before {
  content: '\f389';
}
.zmdi-hdr-weak:before {
  content: '\f38a';
}
.zmdi-hdr:before {
  content: '\f38b';
}
.zmdi-iridescent:before {
  content: '\f38c';
}
.zmdi-leak-off:before {
  content: '\f38d';
}
.zmdi-leak:before {
  content: '\f38e';
}
.zmdi-looks:before {
  content: '\f38f';
}
.zmdi-loupe:before {
  content: '\f390';
}
.zmdi-panorama-horizontal:before {
  content: '\f391';
}
.zmdi-panorama-vertical:before {
  content: '\f392';
}
.zmdi-panorama-wide-angle:before {
  content: '\f393';
}
.zmdi-photo-size-select-large:before {
  content: '\f394';
}
.zmdi-photo-size-select-small:before {
  content: '\f395';
}
.zmdi-picture-in-picture:before {
  content: '\f396';
}
.zmdi-slideshow:before {
  content: '\f397';
}
.zmdi-texture:before {
  content: '\f398';
}
.zmdi-tonality:before {
  content: '\f399';
}
.zmdi-vignette:before {
  content: '\f39a';
}
.zmdi-wb-auto:before {
  content: '\f39b';
}
.zmdi-eject-alt:before {
  content: '\f39c';
}
.zmdi-eject:before {
  content: '\f39d';
}
.zmdi-equalizer:before {
  content: '\f39e';
}
.zmdi-fast-forward:before {
  content: '\f39f';
}
.zmdi-fast-rewind:before {
  content: '\f3a0';
}
.zmdi-forward-10:before {
  content: '\f3a1';
}
.zmdi-forward-30:before {
  content: '\f3a2';
}
.zmdi-forward-5:before {
  content: '\f3a3';
}
.zmdi-hearing:before {
  content: '\f3a4';
}
.zmdi-pause-circle-outline:before {
  content: '\f3a5';
}
.zmdi-pause-circle:before {
  content: '\f3a6';
}
.zmdi-pause:before {
  content: '\f3a7';
}
.zmdi-play-circle-outline:before {
  content: '\f3a8';
}
.zmdi-play-circle:before {
  content: '\f3a9';
}
.zmdi-play:before {
  content: '\f3aa';
}
.zmdi-playlist-audio:before {
  content: '\f3ab';
}
.zmdi-playlist-plus:before {
  content: '\f3ac';
}
.zmdi-repeat-one:before {
  content: '\f3ad';
}
.zmdi-repeat:before {
  content: '\f3ae';
}
.zmdi-replay-10:before {
  content: '\f3af';
}
.zmdi-replay-30:before {
  content: '\f3b0';
}
.zmdi-replay-5:before {
  content: '\f3b1';
}
.zmdi-replay:before {
  content: '\f3b2';
}
.zmdi-shuffle:before {
  content: '\f3b3';
}
.zmdi-skip-next:before {
  content: '\f3b4';
}
.zmdi-skip-previous:before {
  content: '\f3b5';
}
.zmdi-stop:before {
  content: '\f3b6';
}
.zmdi-surround-sound:before {
  content: '\f3b7';
}
.zmdi-tune:before {
  content: '\f3b8';
}
.zmdi-volume-down:before {
  content: '\f3b9';
}
.zmdi-volume-mute:before {
  content: '\f3ba';
}
.zmdi-volume-off:before {
  content: '\f3bb';
}
.zmdi-volume-up:before {
  content: '\f3bc';
}
.zmdi-n-1-square:before {
  content: '\f3bd';
}
.zmdi-n-2-square:before {
  content: '\f3be';
}
.zmdi-n-3-square:before {
  content: '\f3bf';
}
.zmdi-n-4-square:before {
  content: '\f3c0';
}
.zmdi-n-5-square:before {
  content: '\f3c1';
}
.zmdi-n-6-square:before {
  content: '\f3c2';
}
.zmdi-neg-1:before {
  content: '\f3c3';
}
.zmdi-neg-2:before {
  content: '\f3c4';
}
.zmdi-plus-1:before {
  content: '\f3c5';
}
.zmdi-plus-2:before {
  content: '\f3c6';
}
.zmdi-sec-10:before {
  content: '\f3c7';
}
.zmdi-sec-3:before {
  content: '\f3c8';
}
.zmdi-zero:before {
  content: '\f3c9';
}
.zmdi-airline-seat-flat-angled:before {
  content: '\f3ca';
}
.zmdi-airline-seat-flat:before {
  content: '\f3cb';
}
.zmdi-airline-seat-individual-suite:before {
  content: '\f3cc';
}
.zmdi-airline-seat-legroom-extra:before {
  content: '\f3cd';
}
.zmdi-airline-seat-legroom-normal:before {
  content: '\f3ce';
}
.zmdi-airline-seat-legroom-reduced:before {
  content: '\f3cf';
}
.zmdi-airline-seat-recline-extra:before {
  content: '\f3d0';
}
.zmdi-airline-seat-recline-normal:before {
  content: '\f3d1';
}
.zmdi-airplay:before {
  content: '\f3d2';
}
.zmdi-closed-caption:before {
  content: '\f3d3';
}
.zmdi-confirmation-number:before {
  content: '\f3d4';
}
.zmdi-developer-board:before {
  content: '\f3d5';
}
.zmdi-disc-full:before {
  content: '\f3d6';
}
.zmdi-explicit:before {
  content: '\f3d7';
}
.zmdi-flight-land:before {
  content: '\f3d8';
}
.zmdi-flight-takeoff:before {
  content: '\f3d9';
}
.zmdi-flip-to-back:before {
  content: '\f3da';
}
.zmdi-flip-to-front:before {
  content: '\f3db';
}
.zmdi-group-work:before {
  content: '\f3dc';
}
.zmdi-hd:before {
  content: '\f3dd';
}
.zmdi-hq:before {
  content: '\f3de';
}
.zmdi-markunread-mailbox:before {
  content: '\f3df';
}
.zmdi-memory:before {
  content: '\f3e0';
}
.zmdi-nfc:before {
  content: '\f3e1';
}
.zmdi-play-for-work:before {
  content: '\f3e2';
}
.zmdi-power-input:before {
  content: '\f3e3';
}
.zmdi-present-to-all:before {
  content: '\f3e4';
}
.zmdi-satellite:before {
  content: '\f3e5';
}
.zmdi-tap-and-play:before {
  content: '\f3e6';
}
.zmdi-vibration:before {
  content: '\f3e7';
}
.zmdi-voicemail:before {
  content: '\f3e8';
}
.zmdi-group:before {
  content: '\f3e9';
}
.zmdi-rss:before {
  content: '\f3ea';
}
.zmdi-shape:before {
  content: '\f3eb';
}
.zmdi-spinner:before {
  content: '\f3ec';
}
.zmdi-ungroup:before {
  content: '\f3ed';
}
.zmdi-500px:before {
  content: '\f3ee';
}
.zmdi-8tracks:before {
  content: '\f3ef';
}
.zmdi-amazon:before {
  content: '\f3f0';
}
.zmdi-blogger:before {
  content: '\f3f1';
}
.zmdi-delicious:before {
  content: '\f3f2';
}
.zmdi-disqus:before {
  content: '\f3f3';
}
.zmdi-flattr:before {
  content: '\f3f4';
}
.zmdi-flickr:before {
  content: '\f3f5';
}
.zmdi-github-alt:before {
  content: '\f3f6';
}
.zmdi-google-old:before {
  content: '\f3f7';
}
.zmdi-linkedin:before {
  content: '\f3f8';
}
.zmdi-odnoklassniki:before {
  content: '\f3f9';
}
.zmdi-outlook:before {
  content: '\f3fa';
}
.zmdi-paypal-alt:before {
  content: '\f3fb';
}
.zmdi-pinterest:before {
  content: '\f3fc';
}
.zmdi-playstation:before {
  content: '\f3fd';
}
.zmdi-reddit:before {
  content: '\f3fe';
}
.zmdi-skype:before {
  content: '\f3ff';
}
.zmdi-slideshare:before {
  content: '\f400';
}
.zmdi-soundcloud:before {
  content: '\f401';
}
.zmdi-tumblr:before {
  content: '\f402';
}
.zmdi-twitch:before {
  content: '\f403';
}
.zmdi-vimeo:before {
  content: '\f404';
}
.zmdi-whatsapp:before {
  content: '\f405';
}
.zmdi-xbox:before {
  content: '\f406';
}
.zmdi-yahoo:before {
  content: '\f407';
}
.zmdi-youtube-play:before {
  content: '\f408';
}
.zmdi-youtube:before {
  content: '\f409';
}
.zmdi-import-export:before {
  content: '\f30c';
}
.zmdi-swap-vertical-:before {
  content: '\f30c';
}
.zmdi-airplanemode-inactive:before {
  content: '\f102';
}
.zmdi-airplanemode-active:before {
  content: '\f103';
}
.zmdi-rate-review:before {
  content: '\f103';
}
.zmdi-comment-sign:before {
  content: '\f25a';
}
.zmdi-network-warning:before {
  content: '\f2ad';
}
.zmdi-shopping-cart-add:before {
  content: '\f1ca';
}
.zmdi-file-add:before {
  content: '\f221';
}
.zmdi-network-wifi-scan:before {
  content: '\f2e4';
}
.zmdi-collection-add:before {
  content: '\f14e';
}
.zmdi-format-playlist-add:before {
  content: '\f3ac';
}
.zmdi-format-queue-music:before {
  content: '\f3ab';
}
.zmdi-plus-box:before {
  content: '\f277';
}
.zmdi-tag-backspace:before {
  content: '\f1d9';
}
.zmdi-alarm-add:before {
  content: '\f32b';
}
.zmdi-battery-charging:before {
  content: '\f114';
}
.zmdi-daydream-setting:before {
  content: '\f217';
}
.zmdi-more-horiz:before {
  content: '\f19c';
}
.zmdi-book-photo:before {
  content: '\f11b';
}
.zmdi-incandescent:before {
  content: '\f189';
}
.zmdi-wb-iridescent:before {
  content: '\f38c';
}
.zmdi-calendar-remove:before {
  content: '\f330';
}
.zmdi-refresh-sync-disabled:before {
  content: '\f1b7';
}
.zmdi-refresh-sync-problem:before {
  content: '\f1b6';
}
.zmdi-crop-original:before {
  content: '\f17e';
}
.zmdi-power-off:before {
  content: '\f1af';
}
.zmdi-power-off-setting:before {
  content: '\f1ae';
}
.zmdi-leak-remove:before {
  content: '\f38d';
}
.zmdi-star-border:before {
  content: '\f27c';
}
.zmdi-brightness-low:before {
  content: '\f36d';
}
.zmdi-brightness-medium:before {
  content: '\f36e';
}
.zmdi-brightness-high:before {
  content: '\f36f';
}
.zmdi-smartphone-portrait:before {
  content: '\f2d4';
}
.zmdi-live-tv:before {
  content: '\f2d9';
}
.zmdi-format-textdirection-l-to-r:before {
  content: '\f249';
}
.zmdi-format-textdirection-r-to-l:before {
  content: '\f24a';
}
.zmdi-arrow-back:before {
  content: '\f2ea';
}
.zmdi-arrow-forward:before {
  content: '\f2ee';
}
.zmdi-arrow-in:before {
  content: '\f2e9';
}
.zmdi-arrow-out:before {
  content: '\f2ed';
}
.zmdi-rotate-90-degrees-ccw:before {
  content: '\f304';
}
.zmdi-adb:before {
  content: '\f33a';
}
.zmdi-network-wifi:before {
  content: '\f2e8';
}
.zmdi-network-wifi-alt:before {
  content: '\f2e3';
}
.zmdi-network-wifi-lock:before {
  content: '\f2e5';
}
.zmdi-network-wifi-off:before {
  content: '\f2e6';
}
.zmdi-network-wifi-outline:before {
  content: '\f2e7';
}
.zmdi-network-wifi-info:before {
  content: '\f2e4';
}
.zmdi-layers-clear:before {
  content: '\f18b';
}
.zmdi-colorize:before {
  content: '\f15d';
}
.zmdi-format-paint:before {
  content: '\f1ba';
}
.zmdi-format-quote:before {
  content: '\f1b2';
}
.zmdi-camera-monochrome-photos:before {
  content: '\f285';
}
.zmdi-sort-by-alpha:before {
  content: '\f1cf';
}
.zmdi-folder-shared:before {
  content: '\f225';
}
.zmdi-folder-special:before {
  content: '\f226';
}
.zmdi-comment-dots:before {
  content: '\f260';
}
.zmdi-reorder:before {
  content: '\f31e';
}
.zmdi-dehaze:before {
  content: '\f197';
}
.zmdi-sort:before {
  content: '\f1ce';
}
.zmdi-pages:before {
  content: '\f34a';
}
.zmdi-stack-overflow:before {
  content: '\f35c';
}
.zmdi-calendar-account:before {
  content: '\f204';
}
.zmdi-paste:before {
  content: '\f109';
}
.zmdi-cut:before {
  content: '\f1bc';
}
.zmdi-save:before {
  content: '\f297';
}
.zmdi-smartphone-code:before {
  content: '\f139';
}
.zmdi-directions-bike:before {
  content: '\f117';
}
.zmdi-directions-boat:before {
  content: '\f11a';
}
.zmdi-directions-bus:before {
  content: '\f121';
}
.zmdi-directions-car:before {
  content: '\f125';
}
.zmdi-directions-railway:before {
  content: '\f1b3';
}
.zmdi-directions-run:before {
  content: '\f215';
}
.zmdi-directions-subway:before {
  content: '\f1d5';
}
.zmdi-directions-walk:before {
  content: '\f216';
}
.zmdi-local-hotel:before {
  content: '\f178';
}
.zmdi-local-activity:before {
  content: '\f1df';
}
.zmdi-local-play:before {
  content: '\f1df';
}
.zmdi-local-airport:before {
  content: '\f103';
}
.zmdi-local-atm:before {
  content: '\f198';
}
.zmdi-local-bar:before {
  content: '\f137';
}
.zmdi-local-cafe:before {
  content: '\f13b';
}
.zmdi-local-car-wash:before {
  content: '\f124';
}
.zmdi-local-convenience-store:before {
  content: '\f1d3';
}
.zmdi-local-dining:before {
  content: '\f153';
}
.zmdi-local-drink:before {
  content: '\f157';
}
.zmdi-local-florist:before {
  content: '\f168';
}
.zmdi-local-gas-station:before {
  content: '\f16f';
}
.zmdi-local-grocery-store:before {
  content: '\f1cb';
}
.zmdi-local-hospital:before {
  content: '\f177';
}
.zmdi-local-laundry-service:before {
  content: '\f1e9';
}
.zmdi-local-library:before {
  content: '\f18d';
}
.zmdi-local-mall:before {
  content: '\f195';
}
.zmdi-local-movies:before {
  content: '\f19d';
}
.zmdi-local-offer:before {
  content: '\f187';
}
.zmdi-local-parking:before {
  content: '\f1a5';
}
.zmdi-local-parking:before {
  content: '\f1a5';
}
.zmdi-local-pharmacy:before {
  content: '\f176';
}
.zmdi-local-phone:before {
  content: '\f2be';
}
.zmdi-local-pizza:before {
  content: '\f1ac';
}
.zmdi-local-post-office:before {
  content: '\f15a';
}
.zmdi-local-printshop:before {
  content: '\f1b0';
}
.zmdi-local-see:before {
  content: '\f28c';
}
.zmdi-local-shipping:before {
  content: '\f1e6';
}
.zmdi-local-store:before {
  content: '\f1d4';
}
.zmdi-local-taxi:before {
  content: '\f123';
}
.zmdi-local-wc:before {
  content: '\f211';
}
.zmdi-my-location:before {
  content: '\f299';
}
.zmdi-directions:before {
  content: '\f1e7';
}


ons-page, ons-navigator,
ons-tabbar,
ons-gesture-detector {
  display: block;
  touch-action: manipulation; /* Remove click delay */
}

ons-navigator,
ons-tabbar,
ons-splitter,
ons-action-sheet,
ons-dialog,
ons-toast,
ons-alert-dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  touch-action: manipulation; /* Remove click delay */
}

ons-toast {
  pointer-events: none;
}

ons-toast .toast {
  pointer-events: auto;
}

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

ons-page, ons-navigator, ons-tabbar, ons-dialog, ons-alert-dialog, ons-action-sheet, ons-toast {
  z-index: 2;
}

ons-fab, ons-speed-dial {
  z-index: 10001;
}

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, .page__content,
.page--material, .page--material__content {
  background-color: transparent !important;
  background: transparent !important;
}

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

.page.overflow-visible,
.page.overflow-visible .page,
.page.overflow-visible .page__content,
.page.overflow-visible ons-navigator,
.page.overflow-visible ons-splitter {
  overflow: visible;
}

.page.overflow-visible .page__content.content-swiping,
.page.overflow-visible .page__content.content-swiping .page,
.page.overflow-visible .page__content.content-swiping .page__content {
  overflow: auto;
}

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

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

.page[status-bar-fill] > .toolbar:not(.toolbar--transparent) + .page__background,
.page[status-bar-fill] > .toolbar:not(.toolbar--cover-content) + .page__background + .page__content {
  top: 64px;
}

.page[status-bar-fill] > .toolbar--material:not(.toolbar-transparent) + .page__background,
.page[status-bar-fill] > .toolbar--material:not(.toolbar--cover-content) + .page__background + .page__content {
  top: 76px;
}

.page[status-bar-fill] > .toolbar.toolbar--transparent + .page__background {
  top: 0;
}

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

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

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

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

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

.page__content > .list:not(.list--material):first-child {
  margin-top: -1px; /* Avoid double border with toolbar */
}

.page--wrapper > .page__background {
  display: none;
}

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

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

ons-range[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

ons-pull-hook {
  position: relative;
  display: block;
  margin: auto;
  text-align: center;
  z-index: 20002;
}

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: 4;
  background-color: rgba(0, 0, 0, 0.1);
  display: none;
  opacity: 0;
}

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

ons-splitter-side {
  right: auto;
  z-index: 2;
}

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

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

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

ons-splitter-side[mode="split"] {
  z-index: 3;
}

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

ons-range, ons-select {
  display: inline-block;
}

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

ons-select > select {
  width: 100%;
}

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

ons-carousel[fullscreen] {
  height: 100%;
}

.ons-status-bar-mock {
  position: absolute;
  width: 100%;
  height: 20px;
  padding: 0 16px 0 6px;
  box-sizing: border-box;
  z-index: 30000;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  font-size: 12px;
  line-height: 20px;
  font-family: Arial, Helvetica;
}

.ons-status-bar-mock i {
  padding: 0 2px;
}

.ons-status-bar-mock.android {
  color: white;
  background-color: #222;
  font-family: Roboto, Arial, Helvetica;
}

.ons-status-bar-mock.android ~ * {
  top: 20px;
  bottom: 0;
  position: inherit;
  width: 100%;
}

.ons-ios-scroll-fix .page:not(.page--wrapper)[shown] > .page__content {
  overflow-y: hidden;
}
.ons-ios-scroll-fix ons-splitter-side > .page:not(.page--wrapper)[shown] > .page__content {
  overflow-y: auto;
}

ons-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-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;
  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;
  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;
  align-items: center;
  text-align: inherit;
}

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

ons-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-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;
  -moz-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;
  -moz-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;
  line-height: inherit;
  font-style: normal;
  font-weight: normal;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.segment__button .ons-icon {
  line-height: initial;
}

:not(ons-toolbar-button):not(ons-action-sheet-button):not(.segment__button) > .ons-icon--ion {
  line-height: 0.75em;
  vertical-align: -25%;
}

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

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

@-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);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

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

.ons-icon[rotate="270"] {
  -webkit-transform: rotate(270deg);
  -moz-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-icon with Font Awesome backward compatibility
 */
.ons-icon.fa {
  font-family: 'Font Awesome 5 Brands', 'Font Awesome 5 Free';
  font-weight: 900;
}

ons-input, ons-radio, ons-checkbox, ons-search-input {
  display: inline-block;
  position: relative;
}

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

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

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

ons-input[disabled],
ons-radio[disabled],
ons-checkbox[disabled],
ons-segment[disabled],
ons-search-input[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

ons-input input.text-input--material::-webkit-input-placeholder {
  color: transparent;
}

ons-input input.text-input--material::-moz-placeholder {
  color: transparent;
}

ons-input input.text-input--material:-ms-input-placeholder {
  color: transparent;
}

/* Suppress safe area support for pages in splitter sides */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content {
    padding-right: 0;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content {
    padding-left: 0;
  }
}
/* Support the situation that a progress bar is located just below a toolbar */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .page__content > ons-progress-bar > .progress-bar {
    margin-left: -44px;
    margin-right: -44px;
    width: calc(100% + 88px);
  }
}
/* Lists in .page__content in splitter-sides */
@media (orientation: landscape) {
  /* Suppress left safe area support for pages in right splitter sides */
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content > .list:not(.list--inset) {
    margin-left: 0;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content > .list:not(.list--inset) > .list-header {
    padding-left: 15px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="right"] .page__content > .list:not(.list--inset) > .list-item {
    padding-left: 14px;
  }

  /* Suppress right safe area support for pages in left splitter sides */
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) {
    margin-right: 0;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item--chevron:before {
    right: 16px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
    padding-right: 6px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
    padding-right: 12px;
  }
  html[onsflag-iphonex-landscape] ons-splitter-side[side="left"] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
    padding-right: 30px;
  }
}

/*
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: 32px;
  height: 32px;
}

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

.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;
}

/* FIXME */
ons-list-item .ripple__wave,
ons-list-item .ripple__background,
.button--material--flat .ripple__wave,
.button--material--flat .ripple__background {
  background: rgba(189, 189, 189, 0.3);
}

.ripple--light-gray__wave,
.ripple--light-gray__background {
  background: rgba(189, 189, 189, 0.3);
}


/*
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-swiper {
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

.ons-swiper-target {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  z-index: 1;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.ons-swiper-target--vertical {
  -webkit-flex-direction: column;
          flex-direction: column;
}

.ons-swiper-target > * {
  height: inherit;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative !important;
}

.ons-swiper-target.active:not(.swiping) > .page:not([shown]) {
  visibility: hidden;
}

.ons-swiper-tabbar .tabbar--material__button:after {
  display: none;
}

.ons-swiper-blocker {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none
}


/* Custom Theme for Onsen UI 2.11.2 */

/*!
 * Copyright 2013-2017 ASIAL CORPORATION
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
/*!
 * Copyright 2012 Adobe Systems Inc.;
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

:root {
  /* variables for iOS components */

  /* variables for Material Design components */

  /* others */
}
html {
  height: 100%;
  width: 100%;
}
body {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, textarea, select {
  -webkit-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
  -moz-user-select: text;
  -webkit-touch-callout: none;
}
a, button, input, textarea, select {
  touch-action: manipulation;
}
input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
  outline: none;
}

.page {
  /**/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  /*background-color: #efeff4;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: visible;
  overflow-y: hidden;
  color: #1f1f21;
  -ms-overflow-style: none;
  -webkit-font-smoothing: antialiased;
}
.page::-webkit-scrollbar {
  display: none;
}
.page__content {
  /*background-color: #efeff4;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
}
.page__background {
  /*background-color: #efeff4;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
}
.page--material {
  /**/
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  background-color: #eceff1;
}
.page--material__content {
  /**/
  -webkit-font-smoothing: antialiased;
  /*font-weight: 400;
  font-weight: 400;*/
}
.page__content h1,
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5 {
  /**/
  -webkit-font-smoothing: antialiased;
  /*font-weight: 400;
  font-weight: 500;
  margin: 0.6em 0;
  padding: 0;*/
}

.page--material__content h1,
.page--material__content h2,
.page--material__content h3,
.page--material__content h4,
.page--material__content h5 {
  /**/
  -webkit-font-smoothing: antialiased;
  /*font-weight: 400;
  font-weight: 500;
  margin: 0.6em 0;
  padding: 0;*/
}

.page--material__background {
  background-color: #eceff1;
}
:root { /* background color active */
}
/*~
  name: Switch
  category: Switch
  elements: ons-switch
  markup: |
    <label class="switch">
      <input type="checkbox" class="switch__input">
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
    <label class="switch">
      <input type="checkbox" class="switch__input" checked>
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
    <label class="switch">
      <input type="checkbox" class="switch__input" disabled>
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
*/
.switch {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  min-width: 51px;
  font-size: 17px;
  padding: 0 20px;
  border: none;
  overflow: visible;
  width: 51px;
  height: 32px;
  z-index: 0;
  text-align: left;
}
.switch__input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  z-index: 0;
}
/* switch toggle background */
.switch__toggle {
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  transition-property: all;
  transition-duration: 0.35s;
  transition-timing-function: ease-out;
  box-shadow: inset 0 0 0 2px #e5e5e5;
}
/* switch toggle circle */
.switch__handle {
  box-sizing: border-box;
  background-clip: padding-box;
  position: absolute;
  content: '';
  border-radius: 28px;
  height: 28px;
  width: 28px;
  background-color: white;
  left: 1px;
  top: 2px;
  transition-property: all;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(.59, .01, .5, .99);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
}
.switch--active__handle {
  transition: none;
}
:checked + .switch__toggle {
  box-shadow: inset 0 0 0 2px #44db5e;
  background-color: #44db5e;
}
:checked + .switch__toggle > .switch__handle {
  left: 21px;
  box-shadow: 0 3px 2px rgba(0, 0, 0, .25);
}
:disabled + .switch__toggle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.switch__touch {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -10px;
  right: -10px;
}
/*~
  name: Material Switch
  category: Switch
  elements: ons-switch
  markup: |
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input">
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input" checked>
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input" disabled>
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
*/
.switch--material {
  width: 36px;
  height: 24px;
  padding: 0 10px;
  min-width: 36px;
}
.switch--material__toggle {
  background-color: #b0afaf;
  margin-top: 5px;
  height: 14px;
  box-shadow: none;
}
.switch--material__input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  z-index: 0;
}
.switch--material__handle {
  background-color: #f1f1f1;
  left: 0;
  margin-top: -5px;
  width: 20px;
  height: 20px;
  box-shadow:
      0 4px 5px 0 rgba(0, 0, 0, .14),
      0 1px 10px 0 rgba(0, 0, 0, .12),
      0 2px 4px -1px rgba(0, 0, 0, .4);
}
:checked + .switch--material__toggle {
  background-color: color-mod(#37474f a(50%));
  box-shadow: none;
}
:checked + .switch--material__toggle > .switch--material__handle {
  left: 16px;
  background-color: #37474f;
  box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, .14),
      0 1px 5px 0 rgba(0, 0, 0, .12),
      0 3px 1px -2px rgba(0, 0, 0, .2);
}
:disabled + .switch--material__toggle {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.switch--material__handle:before {
  background: transparent;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 0;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .12);
  transition: box-shadow 0.1s linear;
}
.switch--material__toggle > .switch--active__handle:before {
  box-shadow: 0 0 0 14px rgba(0, 0, 0, .12);
}
:checked + .switch--material__toggle > .switch--active__handle:before {
  box-shadow: 0 0 0 14px color-mod(#37474f alpha(20%));
}
.switch--material__touch {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -15px;
  right: -15px;
}
/*~
  name: Range
  category: Range
  elements: ons-range
  markup: |
    <div class="range">
      <input type="range" class="range__input">
      <input type="range" class="range__focus-ring">
    </div>

    <div class="range range--disabled">
      <input type="range" class="range__input" disabled>
      <input type="range" class="range__focus-ring" disabled>
    </div>
*/
.range {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 30px;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#a4aab3, #a4aab3);
  background-position: left center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-color: transparent;
}
.range__input {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: linear-gradient(#EA0B8C, #EA0B8C);
  background-position: left center;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  height: 30px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.range__input::-moz-range-track {
  position: relative;
  border: none;
  background: none;
  box-shadow: none;
  top: 0;
  margin: 0;
  padding: 0;
}
.range__input::-ms-track {
  position: relative;
  border: none;
  background-color: #a4aab3;
  height: 0;
  border-radius: 50%;
}
.range__input::-webkit-slider-thumb {
  cursor: pointer;
  position: relative;
  height: 28px;
  width: 28px;
  background-color: #fff;
  border: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  border-radius: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
  top: 0;
  z-index: 1;
}
.range__input::-moz-range-thumb {
  cursor: pointer;
  position: relative;
  height: 28px;
  width: 28px;
  background-color: #fff;
  border: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  border-radius: 50%;
  margin: 0;
  padding: 0;
}
.range__input::-ms-thumb {
  cursor: pointer;
  position: relative;
  height: 28px;
  width: 28px;
  background-color: #fff;
  border: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  border-radius: 50%;
  margin: 0;
  padding: 0;
  top: 0;
}
.range__input::-ms-fill-lower {
  height: 2px;
  background-color: #EA0B8C;
}
.range__input::-ms-tooltip {
  display: none;
}
.range__input:disabled {
  opacity: 1;
  pointer-events: none;
}
.range__focus-ring {
  pointer-events: none;
  top: 0;
  left: 0;
  display: none;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  height: 30px;
  position: absolute;
  z-index: 0;
  width: 100%;
}
.range--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  pointer-events: none;
}
/*~
  name: Material Range
  category: Range
  elements: ons-range
  markup: |
    <div class="range range--material">
      <input type="range" class="range__input range--material__input" min="0" max="100">
      <!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->
    </div>

    <div class="range range--material range--disabled">
      <input type="range" class="range__input range--material__input" disabled>
      <!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->
    </div>
*/
.range--material {
  position: relative;
  background-image: linear-gradient(#bdbdbd, #bdbdbd);
}
.range--material__input {
  background-image: linear-gradient(#31313a, #31313a);
  background-position: center left;
  background-size: 0% 2px;
}
.range--material__focus-ring {
  display: block;
}
.range--material__focus-ring::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 14px;
  height: 14px;
  border: none;
  box-shadow: 0 0 0 9px #31313a;
  background-color: #31313a;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.range--material__input.range__input--active + .range--material__focus-ring::-webkit-slider-thumb {
  opacity: 0.2;
  -webkit-transform: scale(1.5, 1.5, 1.5);
          transform: scale(1.5, 1.5, 1.5);
}
.range--material__input::-webkit-slider-thumb {
  position: relative;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  width: 14px;
  height: 32px;
  border-radius: 0;
  box-shadow: none;
  background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px);
  transition: -webkit-transform 0.1s linear;
  transition: transform 0.1s linear;
  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
  overflow: visible;
}
.range--material__input[_zero]::-webkit-slider-thumb {
  background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd 6.4px, transparent 7px);
}
.range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb {
  box-shadow: 0 0 0 9px #bdbdbd;
}
.range--material__input::-moz-range-track {
  background: none;
}
.range--material__input::-moz-range-thumb,
.range--material__input:focus::-moz-range-thumb {
  box-sizing: border-box;
  border: none;
  width: 14px;
  height: 32px;
  border-radius: 0;
  background-color: transparent;
  background-image: -moz-radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px); /* stylelint-disable-line */
  box-shadow: none;
}
.range--material__input:active::-webkit-slider-thumb,
.range--material__input.range__input--active::-webkit-slider-thumb { /* NOTICE: ":active" does not work on Android Chrome. */
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  transition: -webkit-transform 0.1s linear;
  transition: transform 0.1s linear;
  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
}
/* stylelint-disable */
.range--disabled.range--material { /* stylelint-enable */
  opacity: 1;
}
/* stylelint-disable */
.range--disabled > .range--material__input { /* stylelint-enable */
  background-image: none;
}
.range--material__input:disabled::-webkit-slider-thumb {
  background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px);
  transition: none;
}
.range--material__input:disabled::-moz-range-thumb {
  background-image: -moz-radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px); /* stylelint-disable-line */
  transition: none;
}
/*~
  name: Notification
  category: Notification
  markup: |
    <span class="notification">1</span>
    <span class="notification">10</span>
    <span class="notification">999</span>
*/
.notification {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font: inherit;
  border: none;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  margin: 0;
  padding: 0 4px;
  width: auto;
  height: 19px;
  border-radius: 19px;
  background-color: #fe3824;
  color: white;
  text-align: center;
  font-size: 16px;
  min-width: 19px;
  line-height: 19px;
  font-weight: 400;
}
.notification:empty {
  display: none;
}
/*~
  name: Material Notification
  category: Notification
  markup: |
    <span class="notification notification--material">1</span>
    <span class="notification notification--material">10</span>
    <span class="notification notification--material">999</span>
*/
.notification--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  background-color: #e91e63;
  font-size: 16px;
  font-weight: 500;
  color: white;
}
/*~
  name: Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar">
      <div class="toolbar__center">Navigation Bar</div>
    </div>
*/
.toolbar {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  height: 44px;
  padding-left: 0;
  padding-right: 0;
  background: #fafafa;
  color: #1f1f21;
  box-shadow: none;
  font-weight: 400;
  width: 100%;
  white-space: nowrap;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .toolbar {
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
  }
}
.toolbar__bg {
  background: #fafafa;
}
.toolbar__item {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  height: 44px;
  overflow: visible;
  display: block;
  vertical-align: middle;
}
.toolbar__left {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  max-width: 50%;
  width: 27%;
  text-align: left;
  line-height: 44px;
}
.toolbar__right {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  max-width: 50%;
  width: 27%;
  text-align: right;
  line-height: 44px;
}
.toolbar__center {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  width: 46%;
  text-align: center;
  line-height: 44px;
  font-size: 17px;
  font-weight: 500;
  color: #1f1f21;
}
.toolbar__title {
  line-height: 44px;
  font-size: 17px;
  font-weight: 500;
  color: #1f1f21;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.toolbar__center:first-child:last-child {
  width: 100%;
}
/*~
  name: Toolbar Item
  category: Toolbar
  elements: ons-toolbar ons-toolbar-button
  markup: |
    <div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-ios-menu" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

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

      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>
*/
/*~
  name: Toolbar with Outline Button
  category: Toolbar
  elements: ons-toolbar ons-toolbar-button
  markup: |
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button toolbar-button--outline">
          <i class="ion-ios-menu" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="toolbar__center">
        Title
      </div>

      <div class="toolbar__right">
        <span class="toolbar-button toolbar-button--outline">Button</span>
      </div>
    </div>
*/
/*~
  name: Bottom Bar
  category: Toolbar
  elements: ons-bottom-toolbar
  markup: |
    <div class="bottom-bar">
      <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
    </div>
*/
.bottom-bar {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 2;
  display: block;
  height: 44px;
  padding-left: 0;
  padding-right: 0;
  background: #fafafa;
  color: #1f1f21;
  box-shadow: none;
  font-weight: 400;
  border-bottom: none;
  border-top: 1px solid #b2b2b2;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border-top: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
  background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .bottom-bar {
    background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
  }
}
.bottom-bar__line-height {
  line-height: 44px;
  padding-bottom: 0;
  padding-top: 0;
}
.bottom-bar--aligned {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  line-height: 44px;
}
.bottom-bar--transparent {
  background-color: transparent;
  background-image: none;
  border: none;
}
/*~
  name: Toolbar with Segment
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar">
      <div class="toolbar__center">
        <div class="segment" style="width:200px;margin:7px 50px;">
          <div class="segment__item">
            <input type="radio" class="segment__input" name="navi-segment-a" checked>
            <div class="segment__button">One</div>
          </div>

          <div class="segment__item">
            <input type="radio" class="segment__input" name="navi-segment-a">
            <div class="segment__button">Two</div>
          </div>
        </div>
      </div>
    </div>
*/
/*~
  name: Material Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--material">
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
    </div>
*/
.toolbar--material {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  height: 56px;
  border-bottom: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  padding: 0;
  background-color: #ffffff;
  background-size: 0;
}
/*~
  name: No Shadow Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--noshadow">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="toolbar__center">
        Navigation Bar
      </div>
      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>
*/
.toolbar--noshadow {
  box-shadow: none;
  background-image: none;
  border-bottom: none;
}
.toolbar--material__left, .toolbar--material__right {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 20px;
  font-weight: 500;
  color: #31313a;
  height: 56px;
  min-width: 72px;
  width: auto;
  line-height: 56px;
}
.toolbar--material__center {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 20px;
  font-weight: 500;
  color: #31313a;
  height: 56px;
  width: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  line-height: 56px;
}
.toolbar--material__center:first-child {
  margin-left: 16px;
}
.toolbar--material__center:last-child {
  margin-right: 16px;
}
.toolbar--material__left:empty, .toolbar--material__right:empty {
  min-width: 16px;
}
/*~
  name: Material Toolbar with Icons
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--material">
      <div class="toolbar__left toolbar--material__left">
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-menu"></i>
        </span>
      </div>
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
      <div class="toolbar__right toolbar--material__right">
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-search"></i>
        </span>
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-favorite"></i>
        </span>
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-more-vert"></i>
        </span>
      </div>
    </div>
*/
/*~
  name: Transparent Toolbar
  category: Toolbar
  elements: ons-toolbar
  markup: |
    <div class="toolbar toolbar--transparent">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="toolbar__center">
        Navigation Bar
      </div>
      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>
*/
.toolbar--transparent {
  background-color: transparent;
  box-shadow: none;
  background-image: none;
  border-bottom: none;
}
/*~
  name: Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button">Button</button>
    <button class="button" disabled>Button</button>
*/
.button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
}
.button::-moz-focus-inner {
  outline: 0;
}
.button:hover {
  transition: none;
}
.button:active {
  background-color: #EA0B8C;
  transition: none;
  opacity: 0.2;
}
.button:focus {
  outline: 0;
}
.button:disabled, .button[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*~
  name: Outline Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button button--outline">Button</button>
    <button class="button button--outline" disabled>Button</button>
*/
.button--outline {
  background-color: transparent;
  border: 1px solid #EA0B8C;
  color: #EA0B8C;
}
.button--outline:active {
  background-color: color-mod(#EA0B8C tint(70%));
  border: 1px solid #EA0B8C;
  color: #EA0B8C;
  opacity: 1;
}
.button--outline:hover {
  border: 1px solid #EA0B8C;
  transition: 0;
}
/*~
  name: Light Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button button--light">Button</button>
    <button class="button button--light" disabled>Button</button>
*/
.button--light {
  background-color: transparent;
  color: color-mod(black a(40%));
  border: 1px solid color-mod(black a(20%));
}
.button--light:active {
  background-color: color-mod(black a(5%));
  color: color-mod(black a(40%));
  border: 1px solid color-mod(black a(20%));
  opacity: 1;
}
/*~
  name: Quiet Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button--quiet">Button</button>
    <button class="button--quiet" disabled>Button</button>
*/
.button--quiet {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  background: transparent;
  color: #EA0B8C;
  border: none;
}
.button--quiet:disabled,
.button--quiet[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  border: none;
}
.button--quiet:hover {
  transition: none;
}
.button--quiet:focus {
  outline: 0;
}
.button--quiet:active {
  background-color: transparent;
  border: none;
  transition: none;
  opacity: 0.2;
  color: #EA0B8C;
}
/*~
  name: Call To Action Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button--cta">Button</button>
    <button class="button--cta" disabled>Button</button>
*/
.button--cta {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
  border: none;
  background-color: #EA0B8C;
  color: white;
}
.button--cta:hover {
  transition: none;
}
.button--cta:focus {
  outline: 0;
}
.button--cta:active {
  color: white;
  background-color: #EA0B8C;
  transition: none;
  opacity: 0.2;
}
.button--cta:disabled,
.button--cta[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
  name: Large Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button button--large" style="width: 95%; margin: 0 auto;">Button</button>
*/
.button--large {
  font-size: 17px;
  font-weight: 500;
  line-height: 36px;
  padding: 4px 12px;
  display: block;
  width: 100%;
  text-align: center;
}
.button--large:active {
  background-color: #EA0B8C;
  transition: none;
  opacity: 0.2;
  transition: none;
}
.button--large:disabled,
.button--large[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.button--large:hover {
  transition: none;
}
.button--large:focus {
  outline: 0;
}
/*~
  name: Large Quiet Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>
*/
.button--large--quiet { /* stylelint-disable-line */
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 36px;
  padding: 4px 12px;
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: #EA0B8C;
  text-align: center;
}
.button--large--quiet:active { /* stylelint-disable-line */
  transition: none;
  opacity: 0.2;
  color: #EA0B8C;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}
.button--large--quiet:disabled, .button--large--quiet[disabled] { /* stylelint-disable-line */
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.button--large--quiet:hover { /* stylelint-disable-line */
  transition: none;
}
.button--large--quiet:focus { /* stylelint-disable-line */
  outline: 0;
}
/*~
  name: Large Call To Action Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>
*/
.button--large--cta { /* stylelint-disable-line */
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
  border: none;
  background-color: #EA0B8C;
  color: white;
  font-size: 17px;
  font-weight: 500;
  line-height: 36px;
  padding: 4px 12px;
  width: 100%;
  text-align: center;
  display: block;
}
.button--large--cta:hover { /* stylelint-disable-line */
  transition: none;
}
.button--large--cta:focus { /* stylelint-disable-line */
  outline: 0;
}
.button--large--cta:active { /* stylelint-disable-line */
  color: white;
  background-color: #EA0B8C;
  transition: none;
  opacity: 0.2;
}
.button--large--cta:disabled, .button--large--cta[disabled] { /* stylelint-disable-line */
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*~
  name: Material Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button button--material">BUTTON</button>
    <button class="button button--material" disabled>DISABLED</button>
*/
.button--material {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
  box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, .14),
      0 1px 5px 0 rgba(0, 0, 0, .12),
      0 3px 1px -2px rgba(0, 0, 0, .2);
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  min-height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  text-transform: uppercase;
  background-color: #EA0B8C;
  color: #ffffff;
  font-weight: 500;
  transition: background-color 0.25s linear;
  opacity: 1;
  transition: all 0.25s linear;
}
.button--material:hover {
  transition: all 0.25s linear;
}
.button--material:active {
  box-shadow:
      0 6px 10px 0 rgba(0, 0, 0, .14),
      0 1px 18px 0 rgba(0, 0, 0, .12),
      0 3px 5px -1px rgba(0, 0, 0, .4);
  background-color: #EA0B8C;
  opacity: 0.9;
  transition: all 0.25s linear;
}
.button--material:focus {
  outline: 0;
}
.button--material:disabled,
.button--material[disabled] {
  transition: none;
  box-shadow: none;
  background-color: color-mod(#4f4f4f a(26%));
  color: color-mod(black a(26%));
  opacity: 1;
}
/*~
  name: Material Flat Button
  category: Button
  elements: ons-button
  markup: |
    <button class="button button--material--flat">BUTTON</button>
    <button class="button button--material--flat" disabled>DISABLED</button>
*/
.button--material--flat { /* stylelint-disable-line */
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  text-decoration: none;
  padding: 4px 10px;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0;
  color: white;
  vertical-align: middle;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 3px;
  transition: none;
  box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, .14),
      0 1px 5px 0 rgba(0, 0, 0, .12),
      0 3px 1px -2px rgba(0, 0, 0, .2);
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  min-height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  text-transform: uppercase;
  background-color: #EA0B8C;
  color: #ffffff;
  font-weight: 500;
  transition: background-color 0.25s linear;
  box-shadow: none;
  background-color: transparent;
  color: #EA0B8C;
  transition: all 0.25s linear;
}
.button--material--flat:hover { /* stylelint-disable-line */
  transition: all 0.25s linear;
}
.button--material--flat:focus { /* stylelint-disable-line */
  box-shadow: none;
  background-color: transparent;
  color: #EA0B8C;
  outline: 0;
  opacity: 1;
  border: none;
}
.button--material--flat:active { /* stylelint-disable-line */
  box-shadow: none;
  outline: 0;
  opacity: 1;
  border: none;
  background-color: color-mod(#999 a(20%));
  color: #EA0B8C;
  transition: all 0.25s linear;
}
.button--material--flat:disabled, .button--material--flat[disabled] {/* stylelint-disable-line */
  transition: none;
  opacity: 1;
  box-shadow: none;
  background-color: transparent;
  color: color-mod(black a(26%));
}
/*~
  name: Button Bar
  category: Segment
  markup: |
    <div class="button-bar" style="width:280px;">
      <div class="button-bar__item">
        <button class="button-bar__button">One</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Two</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Three</button>
      </div>
    </div>
*/
.button-bar {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-align-content: stretch;
          align-content: stretch;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  border: none;
}
.button-bar__item {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border-radius: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.button-bar__button {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border-radius: 0;
  background-color: transparent;
  color: #EA0B8C;
  border: 1px solid #EA0B8C;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 0;
  font-weight: 400;
  padding: 0;
  font-size: 13px;
  height: 27px;
  line-height: 27px;
  width: 100%;
  transition: background-color 0.2s linear, color 0.2s linear;
  box-sizing: border-box;
}
.button-bar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.button-bar__button:hover {
  transition: none;
}
.button-bar__button:focus {
  outline: 0;
}
:checked + .button-bar__button {
  background-color: #EA0B8C;
  color: #fff;
  transition: none;
}
.button-bar__button:active,
:active + .button-bar__button {
  background-color: color-mod(#EA0B8C tint(70%));
  border: 0 solid #EA0B8C;
  border-top: 1px solid #EA0B8C;
  border-bottom: 1px solid #EA0B8C;
  border-right: 1px solid #EA0B8C;
  font-size: 13px;
  width: 100%;
  transition: none;
}
.button-bar__item:first-child > .button-bar__button {
  border-left-width: 1px;
  border-radius: 4px 0 0 4px;
}
.button-bar__item:last-child > .button-bar__button {
  border-right-width: 1px;
  border-radius: 0 4px 4px 0;
}
/*~
  name: Segment
  category: Segment
  markup: |
    <div class="segment" style="width: 280px; margin: 0 auto;">
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a" checked>
        <div class="segment__button">One</div>
      </div>
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a">
        <div class="segment__button">Two</div>
      </div>
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a">
        <div class="segment__button">Three</div>
      </div>
    </div>
*/
.segment {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-align-content: stretch;
          align-content: stretch;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  border: none;
}
.segment__item {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border-radius: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
  background-color: transparent;
  border: none;
}
.segment__input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.segment__button {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border-radius: 0;
  background-color: transparent;
  color: #EA0B8C;
  border: 1px solid #EA0B8C;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-left-width: 0;
  font-weight: 400;
  padding: 0;
  font-size: 13px;
  height: 29px;
  line-height: 29px;
  width: 100%;
  transition: background-color 0.2s linear, color 0.2s linear;
  box-sizing: border-box;
  text-align: center;
}
.segment__item:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.segment__button:hover {
  transition: none;
}
.segment__button:focus {
  outline: 0;
}
:active + .segment__button {
  background-color: color-mod(#EA0B8C tint(70%));
  border: 0 solid #EA0B8C;
  border-top: 1px solid #EA0B8C;
  border-bottom: 1px solid #EA0B8C;
  border-right: 1px solid #EA0B8C;
  font-size: 13px;
  width: 100%;
  transition: none;
}
:checked + .segment__button {
  background-color: #EA0B8C;
  color: #fff;
  transition: none;
}
.segment__item:first-child > .segment__button {
  border-left-width: 1px;
  border-radius: 4px 0 0 4px;
}
.segment__item:last-child > .segment__button {
  border-right-width: 1px;
  border-radius: 0 4px 4px 0;
}
/*~
  name: Material Segment
  category: Segment
  markup: |
    <div class="segment segment--material" style="width: 280px; margin: 0 auto;">
      <div class="segment__item segment--material__item">
        <input type="radio" class="segment__input segment--material__input" name="segment-b" checked>
        <div class="segment__button segment--material__button">One</div>
      </div>
      <div class="segment__item segment--material__item">
        <input type="radio" class="segment__input segment--material__input" name="segment-b">
        <div class="segment__button segment--material__button">Two</div>
      </div>
      <div class="segment__item segment--material__item">
        <input type="radio" class="segment__input segment--material__input" name="segment-b">
        <div class="segment__button segment--material__button">Three</div>
      </div>
    </div>
*/
.segment--material {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
}
.segment--material__button {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border-width: 0;
  color: color-mod(black a(38%));
  border-radius: 0;
  background-color: #fafafa;
}
:active + .segment--material__button {
  background-color: #fafafa;
  border-radius: 0;
  border-width: 0;
  font-size: 14px;
  transition: none;
  color: color-mod(black a(38%));
}
:checked + .segment--material__button {
  background-color: #c8c8c8;
  color: #353535;
  border-radius: 0;
  border-width: 0;
}
.segment--material__item:first-child > .segment--material__button,
.segment--material__item:last-child > .segment--material__button {
  border-radius: 0;
  border-width: 0;
}
:root { /* Text color */ /* Text color active */
}
/*~
  name: Icon Tabbar
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="tabbar">
      <label class="tabbar__item">
        <input type="radio" name="tabbar-a" checked="checked">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-square"></i>
          <div class="tabbar__label">One</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-radio-button-on"></i>
          <div class="tabbar__label">Two</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-star"></i>
          <div class="tabbar__label">Three</div>
        </button>
      </label>
    </div>
*/
/*~
  name: Tabbar
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <div class="tabbar">
      <label class="tabbar__item">
        <input type="radio" name="tabbar-c" checked="checked">
        <button class="tabbar__button">
          <div class="tabbar__label">One</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-c">
        <button class="tabbar__button">
          <div class="tabbar__label">Two</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-c">
        <button class="tabbar__button">
          <div class="tabbar__label">Three</div>
        </button>
      </label>
    </div>
*/
.tabbar {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 49px;
  background-color: #fafafa;
  border-top: 1px solid #ccc;
  width: 100%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .tabbar {
    border-top: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.tabbar__item {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  -webkit-flex-basis: 0;
          flex-basis: 0;
  width: auto;
  border-radius: 0;
}
.tabbar__item > input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.tabbar__button {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0;
  height: 49px;
  letter-spacing: 0;
  color: #999;
  vertical-align: top;
  background-color: transparent;
  border-top: none;
  width: 100%;
  font-weight: 400;
  line-height: 49px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .tabbar__button {
    border-top: none;
  }
}
.tabbar__icon {
  font-size: 24px;
  padding: 0;
  margin: 0;
  line-height: 26px;
  display: block !important; /* stylelint-disable-line declaration-no-important */
  height: 28px;
}
.tabbar__label {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: inline-block;
}
.tabbar__badge.notification {
  vertical-align: text-bottom;
  top: -1px;
  margin-left: 5px;
  z-index: 10;
  font-size: 12px;
  height: 16px;
  min-width: 16px;
  line-height: 16px;
  border-radius: 8px;
}
.tabbar__icon ~ .tabbar__badge.notification {
  position: absolute;
  top: 5px;
  margin-left: 0;
}
.tabbar__icon + .tabbar__label {
  display: block;
  font-size: 10px;
  line-height: 1;
  margin: 0;
  font-weight: 400;
}
.tabbar__label:first-child {
  font-size: 16px;
  line-height: 49px;
  margin: 0;
  padding: 0;
}
:checked + .tabbar__button {
  color: #EA0B8C;
  background-color: transparent;
  box-shadow: none;
  border-top: none;
}
.tabbar__button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.tabbar__button:focus {
  z-index: 1;
  border-top: none;
  box-shadow: none;
  outline: 0;
}
.tabbar__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 49px;
  z-index: 0;
}
.tabbar--autogrow .tabbar__item {
  -webkit-flex-basis: auto;
          flex-basis: auto;
}
/*~
  name: Icon Only Tabbar
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="tabbar">
      <label class="tabbar__item">
        <input type="radio" name="tabbar-b" checked="checked">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-square"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-b">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-radio-button-on"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-b">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-star"></i>
        </button>
      </label>

    </div>
*/
/*~
  name: Top Tabbar
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <div class="tabbar tabbar--top">
      <label class="tabbar__item">
        <input type="radio" name="top-tabbar-a" checked="checked">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-square"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="top-tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-radio-button-on"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="top-tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-ios-star"></i>
        </button>
      </label>
    </div>
*/
.tabbar--top {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  border-top: none;
  border-bottom: 1px solid #ccc;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .tabbar--top {
    border-bottom: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.tabbar--top__content {
  top: 49px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
/*~
  name: Bordered Top Tabbar
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <div class="tabbar tabbar--top tabbar--top-border">
      <label class="tabbar__item tabbar--top-border__item">
        <input type="radio" name="top-tabbar-b" checked="checked">
        <button class="tabbar__button tabbar--top-border__button">
          Home
        </button>
      </label>

      <label class="tabbar__item tabbar--top-border__item">
        <input type="radio" name="top-tabbar-b">
        <button class="tabbar__button tabbar--top-border__button">
          Comments
        </button>
      </label>

      <label class="tabbar__item tabbar--top-border__item">
        <input type="radio" name="top-tabbar-b">
        <button class="tabbar__button tabbar--top-border__button">
          Activity
        </button>
      </label>
    </div>
*/
/*~
  name: Material Tabbar
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <div class="tabbar tabbar--top tabbar--material">
      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a" checked="checked">
        <button class="tabbar__button tabbar--material__button">
          Music
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          Movies
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          Books
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          Games
        </button>
      </label>

    </div>
*/
.tabbar--top-border__button {
  background-color: transparent;
  border-bottom: 4px solid transparent;
}
:checked + .tabbar--top-border__button {
  background-color: transparent;
  border-bottom: 4px solid #EA0B8C;
}
.tabbar__border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: #EA0B8C;
}
.tabbar--material {
  background: none;
  background-color: #ffffff;
  border-bottom-width: 0;
  box-shadow:
    0 4px 2px -2px rgba(0, 0, 0, .14),
    0 3px 5px -2px rgba(0, 0, 0, .12),
    0 5px 1px -4px rgba(0, 0, 0, .2);
}
.tabbar--material__button {
  background-color: transparent;
  color: #31313a;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
.tabbar--material__button:after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  bottom: 0;
  position: absolute;
  margin-top: -2px;
  background-color: #EA0B8C;
}
:checked + .tabbar--material__button:after {
  width: 100%;
  transition: width 0.2s ease-in-out;
}
:checked + .tabbar--material__button {
  background-color: transparent;
  color: #EA0B8C;
}
.tabbar--material__item:not([ripple]):active {
  background-color: #31313a;
  background-color: rgba(49, 49, 58, .1);
}
.tabbar--material__border {
  height: 2px;
  background-color: #EA0B8C;
}
/*~
  name: Material Tabbar (Icon only)
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <div class="tabbar tabbar--top tabbar--material">
      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-b" checked="checked">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-b">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-b">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>
        </button>
      </label>
    </div>
*/
.tabbar--material__icon {
  font-size: 22px !important; /* stylelint-disable-line declaration-no-important */
  line-height: 36px;
}
/*~
  name: Material Tabbar (Icon and Label)
  category: Tabbar
  elements: ons-tabbar ons-tab
  markup: |
    <div class="tabbar tabbar--top tabbar--material">
      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-c" checked="checked">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
          <div class="tabbar__label tabbar--material__label">Call</div>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-c">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
          <div class="tabbar__label tabbar--material__label">Favorites</div>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-c">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-delete"></i>
          <div class="tabbar__label tabbar--material__label">Delete</div>
        </button>
      </label>
    </div>
*/
.tabbar--material__label {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
.tabbar--material__label:first-child {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  letter-spacing: 0.015em;
  font-weight: 500;
  font-size: 14px;
}
.tabbar--material__icon + .tabbar--material__label {
  font-size: 10px;
}
/*~
  name: Toolbar Button
  category: Toolbar Button
  elements: ons-toolbar-button
  markup: |
    <!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->
    <button class="toolbar-button">
      <i class="fa fa-bell" style="font-size:17px"></i>
    </button>

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

    <button class="toolbar-button toolbar-button--outline">
      <i class="fa fa-bell" style="font-size:17px"></i> Label
    </button>
*/
.toolbar-button {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  padding: 4px 10px;
  letter-spacing: 0;
  color: #000000;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: 400;
  font-size: 17px;
  transition: none;
}
.toolbar-button:active {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0);
  transition: none;
  opacity: 0.2;
}
.toolbar-button:disabled,
.toolbar-button[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.toolbar-button:focus {
  outline: 0;
  transition: none;
}
.toolbar-button:hover {
  transition: none;
}
.toolbar-button--outline {
  border: 1px solid #000000;
  margin: auto 8px;
  padding-left: 6px;
  padding-right: 6px;
}
/*~
  name: Material Toolbar Button
  category: Toolbar Button
  elements: ons-toolbar-button
  markup: |
    <!-- Prerequisite=This example use Material Design Iconic Font(http://zavoloklom.github.io/material-design-iconic-font/) to display icons. -->
    <span class="toolbar-button toolbar-button--material">
      <i class="zmdi zmdi-menu"></i>
    </span>
    <span class="toolbar-button toolbar-button--material">
      Label
    </span>
    <span class="toolbar-button toolbar-button--material">
      <i class="zmdi zmdi-favorite"></i>
    </span>
*/
.toolbar-button--material {
  font-size: 22px;
  color: #000000;
  display: inline-block;
  padding: 0 12px;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  vertical-align: baseline;
  vertical-align: initial;
  transition: background-color 0.25s linear;
}
.toolbar-button--material:first-of-type {
  margin-left: 4px;
}
.toolbar-button--material:last-of-type {
  margin-right: 4px;
}
.toolbar-button--material:active {
  opacity: 1;
  transition: background-color 0.25s linear;
}
.back-button {
  height: 44px;
  line-height: 44px;
  padding-left: 8px;
  color: #000000;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0);
  display: inline-block;
}
.back-button:active {
  opacity: 0.2;
}
.back-button__label {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  line-height: 44px;
  font-size: 17px;
  font-weight: 500;
}
.back-button__icon {
  margin-right: 6px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  fill: #000000;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
}
.back-button--material {
  font-size: 22px;
  color: #000000;
  display: inline-block;
  padding: 0 12px;
  height: 100%;
  margin: 0 0 0 4px;
  border: none;
  border-radius: 0;
  vertical-align: baseline;
  vertical-align: initial;
  line-height: 56px;
}
.back-button--material__label {
  display: none;
  font-size: 20px;
}
.back-button--material__icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  fill: #000000;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
}
.back-button--material:active {
  opacity: 1;
}
:root { /* background color active */
}
/*~
  name: Checkbox
  category: Checkbox
  elements: ons-input
  markup: |
    <label class="checkbox">
      <input type="checkbox" class="checkbox__input">
      <div class="checkbox__checkmark"></div>
      OFF
    </label>

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input" checked="checked">
      <div class="checkbox__checkmark"></div>
      ON
    </label>

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input" disabled>
      <div class="checkbox__checkmark"></div>
      Disabled
    </label>
*/
.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 22px;
}
.checkbox__checkmark {
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: relative;
  height: 22px;
  width: 22px;
  pointer-events: none;
}
.checkbox__input,
.checkbox__input:checked {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.checkbox__checkmark:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid #c7c7cd;
  border-radius: 22px;
  left: 0;
}
/* checkmark's line */
.checkbox__checkmark:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 5px;
  width: 11px;
  height: 5px;
  background: transparent;
  border: 2px solid #fff;
  border-width: 1px;
  border-top: none;
  border-right: none;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
}
:checked + .checkbox__checkmark:before {
  background: #EA0B8C;
  border: none;
}
:checked + .checkbox__checkmark:after {
  opacity: 1;
}
:disabled + .checkbox__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
:disabled:active + .checkbox__checkmark:before { /* FIXME */
  background: transparent;
}
/*~
  name: No border Checkbox
  category: Checkbox
  elements: ons-input
  markup: |
    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      OFF
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      ON
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      Disabled
    </label>
 */
.checkbox--noborder {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 22px;
  position: relative;
}
.checkbox--noborder__input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.checkbox--noborder__checkmark {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
}
.checkbox--noborder__checkmark:before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 22px;
  left: 0;
}
/* checkmark's line */
.checkbox--noborder__checkmark:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  opacity: 0;
  width: 11px;
  height: 4px;
  background: transparent;
  border: 2px solid #EA0B8C;
  border-top: none;
  border-right: none;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
:checked + .checkbox--noborder__checkmark:before {
  background: transparent;
  border: none;
}
:checked + .checkbox--noborder__checkmark:after {
  opacity: 1;
}
:focus + .checkbox--noborder__checkmark:before {
  border: none;
}
:disabled + .checkbox--noborder__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
:disabled:active + .checkbox--noborder__checkmark:before {
  background: transparent;
  border: none;
}
/*~
  name: Material Checkbox
  category: Checkbox
  elements: ons-input
  markup: |
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input">
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      OFF
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      ON
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      ON
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" disabled>
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      Disabled
    </label>
*/
.checkbox--material {
  line-height: 18px;
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  overflow: visible;
}
.checkbox--material__checkmark {
  width: 18px;
  height: 18px;
}
.checkbox--material__checkmark:before {
  border-radius: 2px;
  height: 18px;
  width: 18px;
  border: 2px solid #717171;
  transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
  background-color: transparent;
}
:checked + .checkbox--material__checkmark:before {
  border: 2px solid #37474f;
  background-color: #37474f;
  transition: background-color 0.1s linear, border-color 0.1s linear;
}
.checkbox--material__checkmark:after {
  border-color: #ffffff;
  transition: -webkit-transform 0.2s ease 0;
  transition: transform 0.2s ease 0;
  transition: transform 0.2s ease 0, -webkit-transform 0.2s ease 0;
  width: 10px;
  height: 5px;
  top: 4px;
  left: 3px;
  -webkit-transform: scale(0) rotate(-45deg);
          transform: scale(0) rotate(-45deg);
  border-width: 2px;
}
:checked + .checkbox--material__checkmark:after {
  transition: -webkit-transform 0.2s ease 0.2s;
  transition: transform 0.2s ease 0.2s;
  transition: transform 0.2s ease 0.2s, -webkit-transform 0.2s ease 0.2s;
  width: 10px;
  height: 5px;
  top: 4px;
  left: 3px;
  -webkit-transform: scale(1) rotate(-45deg);
          transform: scale(1) rotate(-45deg);
  border-width: 2px;
}
/* active ring effect */
.checkbox--material__input:before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 11px #717171;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #717171;
  pointer-events: none;
  display: block;
  -webkit-transform: scale3d(0.2, 0.2, 0.2);
          transform: scale3d(0.2, 0.2, 0.2);
  transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;
  transition: opacity 0.25s ease-out, transform 0.1s ease-out;
  transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}
.checkbox--material__input:checked:before {
  box-shadow: 0 0 0 11px #37474f;
  background-color: #37474f;
}
.checkbox--material__input:active:before {
  opacity: .15;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
:disabled + .checkbox--material__checkmark {
  opacity: 1;
}
:disabled + .checkbox--material__checkmark:before {
  border-color: #afafaf;
}
:disabled:checked + .checkbox--material__checkmark:before {
  background-color: #afafaf;
}
:disabled:checked + .checkbox--material__checkmark:after {
  border-color: #ffffff;
}
/*~
  name: Radio Button
  category: Radio Button
  elements: ons-input
  markup: |
    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r" checked="checked">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r">
      <div class="radio-button__checkmark"></div>
      Label
    </label>
*/
.radio-button__input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  z-index: 1;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.radio-button__input:active,
.radio-button__input:focus {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.radio-button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  line-height: 24px;
  text-align: left;
}
.radio-button__checkmark:before {
  content: '';
  position: absolute;
  border-radius: 100%;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 22px;
  left: 0;
}
.radio-button__checkmark {
  box-sizing: border-box;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: relative;
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  pointer-events: none;
}
.radio-button__checkmark:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  opacity: 0;
  width: 11px;
  height: 4px;
  background: transparent;
  border: 2px solid #EA0B8C;
  border-top: none;
  border-right: none;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
:checked + .radio-button__checkmark {
  background: #000000;
  background: rgba(0, 0, 0, 0);
}
:checked + .radio-button__checkmark:after {
  opacity: 1;
}
:checked + .radio-button__checkmark:before {
  background: transparent;
  border: none;
}
:disabled + .radio-button__checkmark {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*~
  name: Material Radio Button
  category: Radio Button
  elements: ons-input
  markup: |
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="r">
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
*/
.radio-button--material {
  line-height: 22px;
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
.radio-button--material__input:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 14px #717171;
  border: none;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #717171;
  pointer-events: none;
  display: block;
  -webkit-transform: scale3d(0.2, 0.2, 0.2);
          transform: scale3d(0.2, 0.2, 0.2);
  transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;
  transition: opacity 0.25s ease-out, transform 0.1s ease-out;
  transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}
.radio-button--material__input:checked:before {
  box-shadow: 0 0 0 14px #37474f;
  background-color: #37474f;
}
.radio-button--material__input:active:before {
  opacity: .15;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}
.radio-button--material__checkmark {
  width: 20px;
  height: 20px;
  overflow: visible;
}
.radio-button--material__checkmark:before {
  background: transparent;
  border: 2px solid #717171;
  box-sizing: border-box;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transition: border 0.2s ease;
}
.radio-button--material__checkmark:after {
  transition: background 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, transform 0.2s ease;
  transition: background 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}
:checked + .radio-button--material__checkmark:before {
  background: transparent;
  border: 2px solid #37474f;
}
.radio-button--material__input + .radio-button__checkmark:after {
  background: #717171;
  opacity: 1;
  -webkit-transform: scale(0);
          transform: scale(0);
}
:checked + .radio-button--material__checkmark:after {
  opacity: 1;
  background: #37474f;
  -webkit-transform: scale(1);
          transform: scale(1);
}
:disabled + .radio-button--material__checkmark {
  opacity: 1;
}
:disabled + .radio-button--material__checkmark:after {
  background-color: #afafaf;
  border-color: #afafaf;
}
:disabled + .radio-button--material__checkmark:before {
  border-color: #afafaf;
}
/*~
  name: List
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">Dog</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Cat</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Hamster</div>
      </li>
    </ul>
*/
.list {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  list-style-type: none;
  text-align: left;
  display: block;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  background-image:
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ccc, #ccc);
  background-size: 100% 1px, 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom, top;
  border: none;
  background-color: #fff;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list {
    background-image:
      linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
      linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.list-item {
  position: relative;
  width: 100%;
  list-style: none;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  padding: 0 0 0 14px;
  margin: 0 0 -1px 0;
  color: #1f1f21;
  transition: background-color 0.2s linear;
}
/*~
  name: Expandable List
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item list-item--expandable expanded">
        <div class="list-item__top">
          <div class="list-item__center">Item</div>
          <div class="list-item__right">
            <span class="list-item__expand-chevron"></span>
          </div>
        </div>
        <div class="list-item__expandable-content">Expanded content</div>
      </li>
    </ul>
*/
.list-item__top {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
          order: 0;
  width: 100%;
}
.list-item--expandable {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item--expandable {
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.list-item--expandable {
  background-position-x: 14px;
}
.list-item__expandable-content {
  display: none;
  width: 100%;
  padding: 12px 14px 12px 0;
  box-sizing: border-box;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
          order: 1;
  overflow: hidden;
}
.list-item.expanded > .list-item__expandable-content {
  display: block;
  height: auto;
}
.list-item__left {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 12px 14px 12px 0;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
          order: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-self: stretch;
          align-self: stretch;
  line-height: 1.2em;
  min-height: 44px;
}
.list-item__left:empty {
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
}
.list-item__center {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
          order: 1;
  margin-right: auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-self: stretch;
          align-self: stretch;
  margin-left: 0;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item__center {
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.list-item__center {
  padding: 12px 6px 12px 0;
  line-height: 1.2em;
  min-height: 44px;
}
.list-item__right {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-left: auto;
  padding: 12px 12px 12px 0;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
          order: 2;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-self: stretch;
          align-self: stretch;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item__right {
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.list-item__right {
  line-height: 1.2em;
  min-height: 44px;
}
.list-header {
  margin: 0;
  list-style: none;
  text-align: left;
  display: block;
  box-sizing: border-box;
  padding: 0 0 0 15px;
  font-size: 12px;
  font-weight: 500;
  color: #1f1f21;
  min-height: 24px;
  line-height: 25px;
  text-transform: uppercase;
  position: relative;
  background-color: #eee;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-header {
    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  }
}
/*~
  name: Noborder List
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list list--noborder">
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
    </ul>
 */
.list--noborder {
  border-top: none;
  border-bottom: none;
  background-image: none;
}
/*~
  name: Category List Header
  category: List
  elements: ons-list ons-list-header ons-list-item
  markup: |
    <ul class="list">
      <li class="list-header">
        Header
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
    </ul>
 */
/*~
  name: Tappable List
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__center">Tappable Item</div>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__center">Tappable Item</div>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__center">Tappable Item</div>
      </li>
    </ul>
 */
.list-item--tappable:active {
  transition: none;
  background-color: #d9d9d9;
}
/*~
  name: Switch in List Item
  category: List
  elements: ons-list ons-list-item ons-switch
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          Label
        </div>
        <div class="list-item__right">
          <label class="switch">
            <input type="checkbox" class="switch__input" checked>
            <div class="switch__toggle">
              <div class="switch__handle"></div>
            </div>
          </label>
        </div>
      </li>
      <li class="list-item">
        <div class="list-item__center">
          Label
        </div>
        <div class="list-item__right">
          <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle">
              <div class="switch__handle"></div>
            </div>
          </label>
        </div>
      </li>
    </ul>
*/
/*~
  name: Inset List
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list list--inset">
      <li class="list-item list--inset__item list-item--chevron list-item--tappable">
        <div class="list-item__center">List Item with Chevron</div>
      </li>
      <li class="list-item list--inset__item list-item--chevron list-item--tappable">
        <div class="list-item__center">List Item with Chevron</div>
      </li>
    </ul>
 */
.list--inset {
  margin: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-image: none;
}
/*~
  name: Radio Button in List Item
  category: List
  elements: ons-list ons-list-item ons-input
  markup: |
    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="radio-button">
            <input type="radio" id="r1" class="radio-button__input" name="r" checked="checked">
            <div class="radio-button__checkmark"></div>
          </label>
        </div>
        <label for="r1" class="list-item__center">
          Radio Button
        </label>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="radio-button">
            <input type="radio" id="r2" class="radio-button__input" name="r">
            <div class="radio-button__checkmark"></div>
          </label>
        </div>
        <label for="r2" class="list-item__center">
          Radio Button
        </label>
      </li>
    </ul>
*/
/*~
  name: Checkbox in List Item
  category: List
  elements: ons-list ons-list-item ons-input
  markup: |
    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox">
            <input type="checkbox" id="checkbox1" class="checkbox__input" name="c" checked="checked">
            <div class="checkbox__checkmark"></div>
          </label>
        </div>
        <label for="checkbox1" class="list-item__center">
          Checkbox
        </label>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox">
            <input type="checkbox" id="checkbox2" class="checkbox__input" name="c">
            <div class="checkbox__checkmark"></div>
          </label>
        </div>
        <label for="checkbox2" class="list-item__center">
          Checkbox
        </label>
      </li>
    </ul>
*/
/*~
  name: No border Checkbox in List Item
  category: List
  elements: ons-list ons-list-item ons-input
  markup: |
    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox checkbox--noborder">
            <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
            <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
          </label>
        </div>
        <label for="s1" class="list-item__center">
          Checkbox
        </label>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox checkbox--noborder">
            <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
            <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
          </label>
        </div>
        <label for="s2" class="list-item__center">
          Checkbox
        </label>
      </li>
    </ul>
*/
/*~
  name: Text Input in List Item
  category: List
  elements: ons-list ons-list-item ons-input
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          <input type="text" class="text-input" placeholder="Name">
        </div>
      </li>
      <li class="list-item">
        <div class="list-item__center">
          <input type="text" class="text-input" placeholder="Email">
        </div>
      </li>
    </ul>
*/
/*~
  name: Textarea in List Item
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          <textarea class="textarea textarea--transparent" placeholder="Text message"></textarea>
        </div>
      </li>
    </ul>
*/
/*~
  name: Right Label in List Item
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          Title
        </div>
        <div class="list-item__right">
          <div class="list-item__label">Label</div>
        </div>
      </li>
    </ul>
*/
.list-item__label {
  font-size: 14px;
  padding: 0 4px;
  opacity: 0.6;
}
/*~
  name: List Item with Subtitle
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          <div class="list-item__title">
            Title
          </div>
          <div class="list-item__subtitle">
            Subtitle
          </div>
        </div>
      </li>
    </ul>
*/
.list-item__title {
  -webkit-flex-basis: 100%;
          flex-basis: 100%;
  -webkit-align-self: flex-end;
          align-self: flex-end;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
          order: 0;
}
.list-item__subtitle {
  opacity: 0.75;
  font-size: 14px;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
          order: 1;
  -webkit-flex-basis: 100%;
          flex-basis: 100%;
  -webkit-align-self: flex-start;
          align-self: flex-start;
}
/*~
  name: List Item with Thumbnail
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__left">
          <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
        </div>

        <div class="list-item__center">
          <div class="list-item__title">Lily</div>
          <div class="list-item__subtitle">Very friendly cat</div>
        </div>
      </li>

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

        <div class="list-item__center">
          <div class="list-item__title">Molly</div>
          <div class="list-item__subtitle">Loves tuna!</div>
        </div>
      </li>
    </ul>
*/
.list-item__thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: block;
  margin: 0;
}
/*~
  name: List Item with Icon
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item">
        <div class="list-item__left">
          <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
        </div>

        <div class="list-item__center">
          <div class="list-item__title">Alice</div>
          <div class="list-item__subtitle">Description</div>
        </div>

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

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

        <div class="list-item__center">
          <div class="list-item__title">Bob</div>
          <div class="list-item__subtitle">Description</div>
        </div>

        <div class="list-item__right">
          <i class="ion-ios-information list-item__icon"></i>
        </div>
      </li>
    </ul>
*/
.list-item__icon {
  font-size: 22px;
  padding: 0 6px;
}
/*~
  name: Material List
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Orange</div>
          <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
        </div>
      </li>
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Pear</div>
          <div class="list-item__subtitle list-item--material__subtitle">Funny-shaped fruit.</div>
        </div>
      </li>
    </ul>
*/
.list--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  background-image: none;
  background-color: #fff;
}
.list-item--material {
  border: 0;
  padding: 0 0 0 16px;
  line-height: normal;
}
.list-item--material__subtitle {
  margin-top: 4px;
}
.list-item--material:first-child {
  box-shadow: none;
}
.list-item--material__left {
  padding: 14px 0;
  min-width: 56px;
  line-height: 1;
  min-height: 48px;
}
.list-item--material__left:empty,
.list-item--material__center {
  padding: 14px 6px 14px 0;
  border-color: #eee;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #eee, #eee 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item--material__left:empty,
.list-item--material__center {
    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  }
}
.list-item--material__left:empty,
.list-item--material__center {
  min-height: 48px;
}
.list-item--material__right {
  padding: 14px 16px 14px 0;
  line-height: 1;
  border-color: #eee;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #eee, #eee 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item--material__right {
    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  }
}
.list-item--material__right {
  min-height: 48px;
}
.list-item--material.list-item--expandable {
  border-bottom: 1px solid #eee;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #eee, #eee 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item--material.list-item--expandable {
    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  }
}
.list-item--material.list-item--expandable {
  background-position-x: 16px;
}
.list-item--material.list-item--longdivider,
.list-item--material.list-item--expandable.list-item--longdivider
 {
  border-bottom: 1px solid #eee;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #eee, #eee 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item--material.list-item--longdivider,
.list-item--material.list-item--expandable.list-item--longdivider
 {
    background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  }
}
/*~
  name: Material List with Header
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list list--material">
      <li class="list-header list-header--material">
        Fruits
      </li>
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Orange</div>
          <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
        </div>
      </li>
    </ul>
*/
.list-header--material {
  background: #fff;
  border: none;
  font-size: 14px;
  text-transform: none;
  margin: -1px 0 0 0;
  color: #757575;
  font-weight: 500;
  padding: 8px 16px;
}
.list-header--material:not(:first-of-type) {
  border-top: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
  background-image: linear-gradient(180deg, #eee, #eee 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-header--material:not(:first-of-type) {
    background-image: linear-gradient(180deg, #eee, #eee 50%, transparent 50%);
  }
}
.list-header--material:not(:first-of-type) {
  padding-top: 16px;
}
/*~
  name: Material List with Checkboxes
  category: List
  elements: ons-list ons-list-item ons-input
  markup: |
    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <label class="checkbox checkbox--material">
            <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
            <div class="checkbox__checkmark checkbox--material__checkmark"></div>
          </label>
        </div>

        <label for="checkbox3" class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Notifications</div>
          <div class="list-item__subtitle list-item--material__subtitle">Allow notifications</div>
        </label>
      </li>

      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <label class="checkbox checkbox--material">
            <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
            <div class="checkbox__checkmark checkbox--material__checkmark"></div>
          </label>
        </div>

        <label for="checkbox4" class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Sound</div>
          <div class="list-item__subtitle list-item--material__subtitle">Hangouts message</div>
        </label>
      </li>

    </ul>
*/
/*~
  name: Material List with Thumbnails
  category: List
  markup: |
    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/42/41" alt="Cute kitten">
        </div>

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Lily</div>
          <div class="list-item__subtitle list-item--material__subtitle">Very friendly cat</div>
        </div>
      </li>

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

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Molly</div>
          <div class="list-item__subtitle list-item--material__subtitle">Loves tuna!</div>
        </div>
      </li>

    </ul>
*/
.list-item--material__thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
/*~
  name: Material List with Icons
  category: List
  markup: |
    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
        </div>

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Alice</div>
          <div class="list-item__subtitle list-item--material__subtitle">Description</div>
        </div>

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

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

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Bob</div>
          <div class="list-item__subtitle list-item--material__subtitle">Description</div>
        </div>

        <div class="list-item__right list-item--material__right">
          <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
        </div>
      </li>
    </ul>
*/
.list-item--material__icon {
  font-size: 20px;
  padding: 0 4px;
}
/*~
  name: List Item with Chevron
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item list-item--chevron">
        <div class="list-item__center">Item A</div>
      </li>
      <li class="list-item list-item--chevron">
        <div class="list-item__center">Item B</div>
        <div class="list-item__right list-item--chevron__right">
          <div class="list-item__label">Label</div>
        </div>
      </li>
    </ul>
 */
.list-item--chevron:before,
.list-item__expand-chevron {
  border-right: 2px solid #c7c7cc;
  border-bottom: 2px solid #c7c7cc;
  width: 7px;
  height: 7px;
  background-color: transparent;
  z-index: 5;
}
.list-item--chevron:before {
  position: absolute;
  content: '';
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
}
.list-item__expand-chevron {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin: 1px; /* this improves alignment with normal chevrons */
}
.list-item--expandable.expanded .list-item__expand-chevron {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.list-item--chevron__right {
  padding-right: 30px;
}
/*~
  name: Nodivider List Item with Chevron
  category: List
  elements: ons-list ons-list-item
  markup: |
    <ul class="list">
      <li class="list-item list-item--nodivider list-item--chevron">
        <div class="list-item__center list-item--nodivider__center">Item A</div>
      </li>
      <li class="list-item list-item--nodivider list-item--chevron">
        <div class="list-item__center list-item--nodivider__center">Item B</div>
        <div class="list-item__right list-item--nodivider__right list-item--chevron__right">
          <div class="list-item__label">Label</div>
        </div>
      </li>
    </ul>
 */
/*~
  name: List item without divider
  category: List
  markup: |
    <ul class="list">
      <li class="list-item list-item--nodivider">
        <div class="list-item__center list-item--nodivider__center">Item</div>
      </li>
      <li class="list-item list-item--nodivider">
        <div class="list-item__center list-item--nodivider__center">Item</div>
      </li>
    </ul>
 */
.list-item--nodivider__center,
.list-item--nodivider__right,
.list-item--nodivider.list-item--expandable,
.list-item--expandable .list-item__center,
.list-item--expandable .list-item__right {
  border: none;
  background-image: none;
}
/*~
  name: List item with long divider
  category: List
  markup: |
    <ul class="list">
      <li class="list-item list-item--longdivider">
        <div class="list-item__center list-item--longdivider__center">Item</div>
      </li>
      <li class="list-item list-item--longdivider">
        <div class="list-item__center list-item--longdivider__center">Item</div>
      </li>
    </ul>
 */
.list-item--longdivider {
  border-bottom: 1px solid #ccc;
  border-bottom: none;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .list-item--longdivider {
    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  }
}
.list-item--longdivider:last-of-type {
  border: none;
  background-image: none;
}
.list-item--longdivider__center {
  border: none;
  background-image: none;
}
.list-item--longdivider__right {
  border: none;
  background-image: none;
}
/*~
  name: List title
  category: List
  markup: |
    <div class="list-title">List Title</div>
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
    </ul>
 */
.list-title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: block;
  color: #6d6d72;
  text-align: left;
  box-sizing: border-box;
  padding: 0 0 0 16px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/*~
  name: Material List Title
  category: List
  markup: |
    <h3 class="list-title list-title--material">LIST TITLE</h3>
    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">Item</div>
      </li>
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">Item</div>
      </li>
    </ul>
 */
.list-title--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #757575;
  font-size: 14px;
  margin: 0;
  padding: 12px 0 12px 16px;
  font-weight: 500;
  line-height: 24px;
}
/*~
  name: Search Input
  category: Search Input
  markup: |
    <input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">
*/
.search-input {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  box-sizing: border-box;
  height: 28px;
  font-size: 14px;
  background-color: #030303;
  background-color: rgba(3, 3, 3, .09);
  box-shadow: none;
  color: #1f1f21;
  line-height: 1.3;
  padding: 0 8px 0 28px;
  margin: 0;
  border-radius: 5.5px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTMgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW9zLXNlYXJjaC1pbnB1dC1pY29uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImNvbXBvbmVudHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpb3Mtc2VhcmNoLWlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDguMDAwMDAwLCAtNDMuMDAwMDAwKSIgZmlsbD0iIzdBNzk3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTcyNDgyLDE1LjUwNDE0NjYgQzE3LjA3NzM2NTcsMTUuNTQwNTkzOCAxNy4xNTIyNzMxLDE1LjU5MTYxMjkgMTcuMjE3NzUxNiwxNS42NTcwOTE0IEwyMC42NDk5OTEsMTkuMDg5MzMwOCBDMjAuOTQ0ODQ0OSwxOS4zODQxODQ3IDIwLjk0ODQ3NjQsMTkuODU4NjA2IDIwLjY1MzU0MTIsMjAuMTUzNTQxMiBDMjAuMzYwNjQ4LDIwLjQ0NjQzNDQgMTkuODgxMjcxNiwyMC40NDE5MzE3IDE5LjU4OTMzMDgsMjAuMTQ5OTkxIEwxNi4xNTcwOTE0LDE2LjcxNzc1MTYgQzE2LjA5MTM3LDE2LjY1MjAzMDEgMTYuMDQwMTE3MSwxNi41NzczODc0IDE2LjAwMzQxNDEsMTYuNDk3Nzk5NSBDMTUuMTY3MTY5NCwxNy4xMjcwNDExIDE0LjEyNzEzOTMsMTcuNSAxMywxNy41IEMxMC4yMzg1NzYzLDE3LjUgOCwxNS4yNjE0MjM3IDgsMTIuNSBDOCw5LjczODU3NjI1IDEwLjIzODU3NjMsNy41IDEzLDcuNSBDMTUuNzYxNDIzNyw3LjUgMTgsOS43Mzg1NzYyNSAxOCwxMi41IEMxOCwxMy42Mjc0Njg1IDE3LjYyNjgyMzIsMTQuNjY3Nzc2OCAxNi45OTcyNDgyLDE1LjUwNDE0NjYgWiBNMTMsMTYuNSBDMTUuMjA5MTM5LDE2LjUgMTcsMTQuNzA5MTM5IDE3LDEyLjUgQzE3LDEwLjI5MDg2MSAxNS4yMDkxMzksOC41IDEzLDguNSBDMTAuNzkwODYxLDguNSA5LDEwLjI5MDg2MSA5LDEyLjUgQzksMTQuNzA5MTM5IDEwLjc5MDg2MSwxNi41IDEzLDE2LjUgWiIgaWQ9Imlvcy1zZWFyY2gtaW5wdXQtaWNvbiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 13px;
  font-weight: 400;
  display: inline-block;
  text-indent: 0;
}
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: textfield;
          appearance: textfield;
  display: none;
}
.search-input::-webkit-search-decoration {
  display: none;
}
.search-input:focus {
  outline: none;
}
.search-input::-webkit-input-placeholder {
  color: #7a797b;
  font-size: 14px;
  text-indent: 0;
}
.search-input:-ms-input-placeholder {
  color: #7a797b;
  font-size: 14px;
  text-indent: 0;
}
.search-input::-ms-input-placeholder {
  color: #7a797b;
  font-size: 14px;
  text-indent: 0;
}
.search-input::placeholder {
  color: #7a797b;
  font-size: 14px;
  text-indent: 0;
}
.search-input:placeholder-shown {
}
.search-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*~
  name: Material Search Input
  category: Search Input
  markup: |
    <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">
*/
.search-input--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  border-radius: 2px;
  height: 48px;
  background-color: #fafafa;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJhbmRyb2lkLXNlYXJjaC1pbnB1dC1pY29uIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM4OTg5ODkiPgogICAgICAgICAgICA8ZyBpZD0iY29tcG9uZW50cyI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibWF0ZXJpYWwtc2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ic2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ik1hdGVyaWFsL0ljb25zLWJsYWNrL3NlYXJjaCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNTAyLDYuNDkxIEwxMS43MDgsNi40OTEgTDExLjQzMiw2Ljc2NSBDMTIuNDA3LDcuOTAyIDEzLDkuMzc2IDEzLDEwLjk5MSBDMTMsMTQuNTgxIDEwLjA5LDE3LjQ5MSA2LjUsMTcuNDkxIEMyLjkxLDE3LjQ5MSAwLDE0LjU4MSAwLDEwLjk5MSBDMCw3LjQwMSAyLjkxLDQuNDkxIDYuNSw0LjQ5MSBDOC4xMTUsNC40OTEgOS41ODgsNS4wODMgMTAuNzI1LDYuMDU3IEwxMS4wMDEsNS43ODMgTDExLjAwMSw0Ljk5MSBMMTUuOTk5LDAgTDE3LjQ5LDEuNDkxIEwxMi41MDIsNi40OTEgTDEyLjUwMiw2LjQ5MSBaIE02LjUsNi40OTEgQzQuMDE0LDYuNDkxIDIsOC41MDUgMiwxMC45OTEgQzIsMTMuNDc2IDQuMDE0LDE1LjQ5MSA2LjUsMTUuNDkxIEM4Ljk4NSwxNS40OTEgMTEsMTMuNDc2IDExLDEwLjk5MSBDMTEsOC41MDUgOC45ODUsNi40OTEgNi41LDYuNDkxIEw2LjUsNi40OTEgWiIgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Ljc0NTAwMCwgOC43NDU1MDApIHNjYWxlKC0xLCAxKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtOC43NDUwMDAsIC04Ljc0NTUwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
  background-size: 18px;
  background-position: 18px center;
  font-size: 14px;
  padding: 0 24px 0 64px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24), 0 1px 0 0 rgba(255, 255, 255, .06) inset;
}
/*~
  name: Text Input
  category: Text Input
  elements: ons-input
  markup: |
    <div><input type="text" class="text-input" placeholder="text" value=""></div>
    <div><input type="text" class="text-input" placeholder="text" value="" disabled></div>
*/
.text-input {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border: none;
  background-color: transparent;
  letter-spacing: 0;
  box-shadow: none;
  color: #1f1f21;
  padding: 0;
  margin: 0;
  width: auto;
  font-size: 16px;
  height: 31px;
  font-weight: 400;
  box-sizing: border-box;
}
.text-input::-ms-clear {
  display: none;
}
.text-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.text-input::-webkit-input-placeholder {
  color: #999;
}
.text-input:-ms-input-placeholder {
  color: #999;
}
.text-input::-ms-input-placeholder {
  color: #999;
}
.text-input::placeholder {
  color: #999;
}
.text-input:disabled::-webkit-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.text-input:disabled:-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.text-input:disabled::-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.text-input:disabled::placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.text-input:invalid {
  border: none;
  background-color: transparent;
  color: #1f1f21;
}
/*~
  name: Underbar Text Input
  category: Text Input
  elements: ons-input
  markup: |
    <div><input type="text" class="text-input text-input--underbar" placeholder="text" value=""></div>
    <div><input type="text" class="text-input text-input--underbar" placeholder="text" value="" disabled></div>
*/
.text-input--underbar {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border: none;
  background-color: transparent;
  letter-spacing: 0;
  box-shadow: none;
  color: #1f1f21;
  padding: 0;
  margin: 0;
  width: auto;
  font-size: 16px;
  height: 31px;
  font-weight: 400;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}
.text-input--underbar:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
}
.text-input--underbar:disabled::-webkit-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:disabled:-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:disabled::-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:disabled::placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.text-input--underbar:invalid {
  border: none;
  background-color: transparent;
  color: #1f1f21;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
}
/*~
  name: Material Input
  category: Text Input
  elements: ons-input
  markup: |
    <span>
      <div><input class="text-input text-input--material" placeholder="Username" type="text" required></div>
      <br />
      <div><input class="text-input text-input--material" placeholder="Password" type="password" required></div>
    </span>
*/
.text-input--material {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #212121;
  background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: transparent;
  font-size: 16px;
  font-weight: 400;
  border: none;
  padding-bottom: 2px;
  border-radius: 0;
  height: 24px;
  vertical-align: middle;
  -webkit-transform: translate3d(0, 0, 0); /* FIXME: prevent ios flicker */
}
.text-input--material__label {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #afafaf;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 16px;
  font-weight: 400;
  pointer-events: none;
}
.text-input--material__label--active {
  color: #3d5afe;
  -webkit-transform: translate(0, -75%) scale(0.75);
          transform: translate(0, -75%) scale(0.75);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  transition: transform 0.1s ease-in, color 0.1s ease-in;
  transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
}
.text-input--material:focus {
  background-image:
    linear-gradient(#3d5afe, #3d5afe),
    linear-gradient(to top, transparent 1px, #afafaf 1px);
  -webkit-animation: material-text-input-animate 0.3s forwards;
          animation: material-text-input-animate 0.3s forwards;
}
.text-input--material::-webkit-input-placeholder {
  color: #afafaf;
  line-height: 20px;
}
.text-input--material:-ms-input-placeholder {
  color: #afafaf;
  line-height: 20px;
}
.text-input--material::-ms-input-placeholder {
  color: #afafaf;
  line-height: 20px;
}
.text-input--material::placeholder {
  color: #afafaf;
  line-height: 20px;
}
@-webkit-keyframes material-text-input-animate {
  0% {
    background-size: 0% 2px, 100% 2px;
  }

  100% {
    background-size: 100% 2px, 100% 2px;
  }
}
@keyframes material-text-input-animate {
  0% {
    background-size: 0% 2px, 100% 2px;
  }

  100% {
    background-size: 100% 2px, 100% 2px;
  }
}
/*~
  name: Textarea
  category: Textarea
  markup: |
    <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>
*/
.textarea {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  vertical-align: top;
  resize: none;
  outline: none;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #efeff4;
  color: #1f1f21;
  letter-spacing: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: auto;
}
.textarea:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.textarea::-webkit-input-placeholder {
  color: #999;
}
.textarea:-ms-input-placeholder {
  color: #999;
}
.textarea::-ms-input-placeholder {
  color: #999;
}
.textarea::placeholder {
  color: #999;
}
/*~
  name: Textarea Transparent
  category: Textarea
  markup: |
    <textarea class="textarea textarea--transparent" rows="3" placeholder="Textarea"></textarea>
*/
.textarea--transparent {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  vertical-align: top;
  resize: none;
  outline: none;
  padding: 5px 5px 5px 5px;
  padding-left: 0;
  padding-right: 0;
  font-size: 16px;
  font-weight: 400;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  color: #1f1f21;
  letter-spacing: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: auto;
}
.textarea--transparent:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.textarea--transparent::-webkit-input-placeholder {
  color: #999;
}
.textarea--transparent:-ms-input-placeholder {
  color: #999;
}
.textarea--transparent::-ms-input-placeholder {
  color: #999;
}
.textarea--transparent::placeholder {
  color: #999;
}
/*~
  name: Dialog
  category: Dialog
  elements: ons-dialog
  markup: |
    <div class="dialog-mask"></div>
    <div class="dialog">
      <div class="dialog-container">
        <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
      </div>
    </div>
*/
.dialog {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: auto auto;
  overflow: hidden;
  min-width: 270px;
  min-height: 100px;
  text-align: left;
}
.dialog-container {
  height: inherit;
  min-height: inherit;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f4f4f4;
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
  color: #1f1f21;
}
.dialog-mask {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .2);
}
/*~
  name: Material Dialog
  category: Dialog
  elements: ons-dialog
  markup: |
    <div class="dialog-mask dialog-mask--material"></div>
    <div class="dialog dialog--material">
      <div class="dialog dialog-container--material">
        <p style="margin-left:24px;margin-right:24px">The quick brown fox jumps over the lazy dog.</p>
      </div>
    </div>
*/
.dialog--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  text-align: left;
  box-shadow:
      0 16px 24px 2px rgba(0, 0, 0, .14),
      0 6px 30px 5px rgba(0, 0, 0, .12),
      0 8px 10px -5px rgba(0, 0, 0, .4);
}
.dialog-container--material {
  border-radius: 2px;
  background-color: #ffffff;
  color: #1f1f21;
}
.dialog-mask--material {
  background-color: #000000;
  background-color: rgba(0, 0, 0, .3);
}
/*~
  name: Alert Dialog
  category: Alert Dialog
  elements: ons-alert-dialog
  markup: |
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-title">Alert</div>

        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer">
          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
        </div>
      </div>
    </div>
*/
.alert-dialog {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 270px;
  margin: auto;
  background-color: #f4f4f4;
  border-radius: 8px;
  overflow: visible;
  max-width: 95%;
  color: #1f1f21;
}
.alert-dialog-container {
  height: inherit;
  padding-top: 16px;
  overflow: hidden;
}
.alert-dialog-title {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 17px;
  font-weight: 500;
  padding: 0 8px;
  text-align: center;
  color: #1f1f21;
}
.alert-dialog-content {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 4px 12px 8px;
  font-size: 14px;
  min-height: 36px;
  text-align: center;
  color: #1f1f21;
}
.alert-dialog-footer {
  width: 100%;
}
.alert-dialog-button {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  letter-spacing: 0;
  vertical-align: middle;
  border: none;
  border-top: 1px solid #ddd;
  font-size: 16px;
  padding: 0 8px;
  margin: 0;
  display: block;
  width: 100%;
  background-color: transparent;
  text-align: center;
  height: 44px;
  line-height: 44px;
  outline: none;
  color: #EA0B8C;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .alert-dialog-button {
    border-top: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    background-image: linear-gradient(180deg, #ddd, #ddd 50%, transparent 50%);
  }
}
.alert-dialog-button:active {
  background-color: #000000;
  background-color: rgba(0, 0, 0, .05);
}
.alert-dialog-button--primal {
  font-weight: 500;
}
.alert-dialog-footer--rowfooter {
  white-space: nowrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.alert-dialog-button--rowfooter {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  display: block;
  width: 100%;
  border-left: 1px solid #ddd;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .alert-dialog-button--rowfooter {
    border-top: none;
    border-left: none;
    background-size: 100% 1px, 1px 100%;
    background-repeat: no-repeat;
    background-position: top, left;
    background-image:
      linear-gradient(0deg, transparent, transparent 50%, #ddd 50%),
      linear-gradient(90deg, transparent, transparent 50%, #ddd 50%);
  }
}
.alert-dialog-button--rowfooter:first-child {
  border-left: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .alert-dialog-button--rowfooter:first-child {
    border-top: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top, left;
    background-image: linear-gradient(0deg, transparent, transparent 50%, #ddd 50%);
  }
}
.alert-dialog-mask {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .2);
}
/*~
  name: Alert Dialog without Title
  category: Alert Dialog
  elements: ons-alert-dialog
  markup: |
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer">
          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
        </div>
      </div>
    </div>
*/
/*~
  name: Alert Dialog with Multiple Buttons
  category: Alert Dialog
  elements: ons-alert-dialog
  markup: |
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer">
          <button class="alert-dialog-button">Cancel</button>
          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
        </div>
      </div>
    </div>
*/
/*~
  name: Alert Dialog with Multiple Buttons 2
  category: Alert Dialog
  elements: ons-alert-dialog
  markup: |
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-title">Alert</div>

        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer alert-dialog-footer--rowfooter">
          <button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>
          <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>
          <button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>
        </div>
      </div>
    </div>
*/
/*~
  name: Material Alert Dialog
  category: Alert Dialog
  elements: ons-alert-dialog
  markup: |
    <div class="alert-dialog-mask alert-dialog-mask--material"></div>
    <div class="alert-dialog alert-dialog--material">
      <div class="alert-dialog-container alert-dialog-container--material">
        <div class="alert-dialog-title alert-dialog-title--material">
          Dialog title
        </div>
        <div class="alert-dialog-content alert-dialog-content--material">
          Some dialog content.
        </div>
        <div class="alert-dialog-footer alert-dialog-footer--material">
          <button class="alert-dialog-button alert-dialog-button--material">OK</button>
          <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
        </div>
      </div>
    </div>
*/
.alert-dialog--material {
  border-radius: 2px;
  background-color: #ffffff;
}
.alert-dialog-container--material {
  padding: 22px 0 0 0;
  box-shadow:
      0 16px 24px 2px rgba(0, 0, 0, .14),
      0 6px 30px 5px rgba(0, 0, 0, .12),
      0 8px 10px -5px rgba(0, 0, 0, .4);
}
.alert-dialog-title--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  padding: 0 24px;
  color: #31313a;
}
.alert-dialog-content--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  padding: 0 24px;
  margin: 24px 0 10px 0;
  min-height: 0;
  color: #31313a;
  color: rgba(49, 49, 58, .85);
}
.alert-dialog-footer--material {
  display: block;
  padding: 0;
  height: 52px;
  box-sizing: border-box;
  margin: 0;
  line-height: 1;
}
.alert-dialog-button--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  width: auto;
  float: right;
  background: none;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  height: 36px;
  line-height: 36px;
  padding: 0 8px;
  margin: 8px 8px 8px 0;
  box-sizing: border-box;
  min-width: 50px;
  color: #37474f;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .alert-dialog-button--material {
    background: none;
  }
}
.alert-dialog-button--material:active {
  background-color: transparent;
  background-color: initial;
}
/* stylelint-disable */
.alert-dialog-button--rowfooter--material,
.alert-dialog-button--rowfooter--material:first-child { /* stylelint-enable */
  border: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .alert-dialog-button--rowfooter--material,
.alert-dialog-button--rowfooter--material:first-child {
    background: none;
  }
}
/* stylelint-disable */
.alert-dialog-button--primal--material { /* stylelint-enable */
  font-weight: 500;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .alert-dialog-button--primal--material {
    background: none;
  }
}
.alert-dialog-mask--material {
  background-color: #000000;
  background-color: rgba(0, 0, 0, .3);
}
/*~
  name: Popover
  category: Popover
  elements: ons-popover
  markup: |
    <div class="popover-mask"></div>
    <div class="popover popover--bottom" style="bottom: 20px; left: 65px;">
      <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"></div>
      <div class="popover__content popover--bottom__content">
        <div style="text-align:center;opacity:0.8;margin-top:40px">Content</div>
      </div>
    </div>
*/
/*~
  name: Popover(top)
  category: Popover
  elements: ons-popover
  markup: |
    <div class="popover-mask"></div>
    <div class="popover popover--top" style="top: 20px; left: 50px;">
      <div class="popover__arrow popover--top__arrow" style="margin-left: 110px;"></div>
      <div class="popover__content popover--top__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>
*/
/*~
  name: Popover(left)
  category: Popover
  elements: ons-popover
  markup: |
    <div class="popover-mask"></div>
    <div class="popover popover--right" style="top: 20px; right: 20px;">
      <div class="popover__arrow popover--right__arrow" style="bottom: 50px;"></div>
      <div class="popover__content popover--right__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>
*/
/*~
  name: Popover(right)
  category: Popover
  elements: ons-popover
  markup: |
    <div class="popover-mask"></div>
    <div class="popover popover--left" style="top: 20px;left: 20px;">
      <div class="popover__arrow popover--left__arrow" style="top: 50px;"></div>
      <div class="popover__content popover--left__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>
*/
.popover {
  position: absolute;
  z-index: 20001;
}
.popover--bottom {
  bottom: 0;
}
.popover--top {
  top: 0;
}
.popover--left {
  left: 0;
}
.popover--right {
  right: 0;
}
.popover-mask {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .2);
  position: absolute;
  z-index: 19999;
}
.popover__content {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: block;
  width: 220px;
  overflow: auto;
  min-height: 100px;
  max-height: 100%;
  background-color: white;
  border-radius: 8px;
  color: #1f1f21;
  pointer-events: auto;
}
.popover--top__content {

}
.popover--bottom__content {

}
.popover--left__content {

}
.popover--right__content {

}
.popover__arrow {
  position: absolute;
  width: 18px;
  height: 18px;
  -webkit-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  background-color: transparent;
  background-image: linear-gradient(45deg, white, white 50%, transparent 50%);
  border-radius: 0 0 0 4px;
  margin: 0;
  z-index: 20001;
}
/* NOTE: If you changed this properties, you should check if ons-popover is broken. */
.popover--bottom__arrow {
  -webkit-transform: translateY(6px) translateX(-9px) rotate(-45deg);
          transform: translateY(6px) translateX(-9px) rotate(-45deg);
  bottom: 0;
  margin-right: -18px;
}
.popover--top__arrow {
  -webkit-transform: translateY(-6px) translateX(-9px) rotate(135deg);
          transform: translateY(-6px) translateX(-9px) rotate(135deg);
  top: 0;
  margin-right: -18px;
}
.popover--left__arrow {
  -webkit-transform: translateX(-6px) translateY(-9px) rotate(45deg);
          transform: translateX(-6px) translateY(-9px) rotate(45deg);
  left: 0;
  margin-bottom: -18px;
}
.popover--right__arrow {
  -webkit-transform: translateX(6px) translateY(-9px) rotate(225deg);
          transform: translateX(6px) translateY(-9px) rotate(225deg);
  right: 0;
  margin-bottom: -18px;
}
/*~
  name: Material Popover
  category: Popover
  elements: ons-popover
  markup: |
    <div class="popover-mask popover-mask--material"></div>
    <div class="popover popover--material popover--left" style="top: 50px; left: 65px;">
      <div class="popover__arrow popover--material__arrow popover--left__arrow"></div>
      <div class="popover__content popover--material__content popover--left__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>
*/
.popover--material {
}
.popover-mask--material {
  background-color: transparent;
}
.popover--material__content {
  background-color: #fafafa;
  border-radius: 2px;
  color: #1f1f21;
  box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, .14),
      0 1px 5px 0 rgba(0, 0, 0, .12),
      0 3px 1px -2px rgba(0, 0, 0, .2);
}
.popover--material__arrow {
  display: none;
}
/*~
  name: Progress Bar
  category: Progress Bar
  elements: ons-progress-bar
  markup: |
    <div class="progress-bar">
      <div class="progress-bar__primary" style="width: 30%"></div>
    </div>
    <br />
    <div class="progress-bar">
      <div class="progress-bar__primary" style="width:20%"></div>
      <div class="progress-bar__secondary" style="width:76%"></div>
    </div>
    <br />
    <div class="progress-bar progress-bar--indeterminate">
    </div>
*/
.progress-bar {
  position: relative;
  height: 2px;
  display: block;
  width: 100%;
  background-color: transparent;
  background-clip: padding-box;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}
.progress-bar__primary,
.progress-bar__secondary {
  position: absolute;
  background-color: #EA0B8C;
  top: 0;
  bottom: 0;
  transition: width .3s linear;
  z-index: 100;
  border-radius: 4px;
}
.progress-bar__secondary {
  background-color: #65adff;
  z-index: 0;
}
.progress-bar--indeterminate:before {
  content: '';
  position: absolute;
  background-color: #EA0B8C;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
          animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  border-radius: 4px;
}
.progress-bar--indeterminate:after {
  content: '';
  position: absolute;
  background-color: #EA0B8C;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
          animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
  border-radius: 4px;
}
@-webkit-keyframes progress-bar__indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes progress-bar__indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}
@-webkit-keyframes progress-bar__indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}
@keyframes progress-bar__indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}
/*~
  name: Material Progress Bar
  category: Progress Bar
  elements: ons-progress-bar
  markup: |
    <div class="progress-bar progress-bar--material">
      <div class="progress-bar__primary progress-bar--material__primary" style="width: 30%"></div>
    </div>
    <br />
    <div class="progress-bar progress-bar--material">
      <div class="progress-bar__primary progress-bar--material__primary" style="width:20%"></div>
      <div class="progress-bar__secondary progress-bar--material__secondary" style="width:76%"></div>
    </div>
    <br />
    <div class="progress-bar progress-bar--material progress-bar--indeterminate">
    </div>
*/
.progress-bar--material {
  height: 4px;
  background-color: transparent;
  border-radius: 0;
}
.progress-bar--material__primary,
.progress-bar--material__secondary {
  background-color: #37474f;
  border-radius: 0;
}
.progress-bar--material__secondary {
  background-color: #548ba7;
  z-index: 0;
}
.progress-bar--material.progress-bar--indeterminate:before { /* FIXME */
  background-color: #37474f;
  border-radius: 0;
}
.progress-bar--material.progress-bar--indeterminate:after { /* FIXME */
  background-color: #37474f;
  border-radius: 0;
}
/*~
  name: Progress Circle
  category: Progress Circle
  elements: ons-progress-circular
  markup: |
    <svg class="progress-circular progress-circular--indeterminate">
      <circle class="progress-circular__background"/>
      <circle class="progress-circular__primary progress-circular--indeterminate__primary"/>
      <circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>
    </svg>

    <svg class="progress-circular">
      <circle class="progress-circular__background"/>
      <circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
      <circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
    </svg>

    <svg class="progress-circular">
      <circle class="progress-circular__background"/>
      <circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
    </svg>
*/
.progress-circular {
  height: 32px;
  position: relative;
  width: 32px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-animation: none;
          animation: none;
}
.progress-circular__background,
.progress-circular__primary,
.progress-circular__secondary {
  /* clean-css ignore:start */
  cx: 50%;
  cy: 50%;
  r: 40%;
  /* clean-css ignore:end */
  -webkit-animation: none;
          animation: none;
  fill: none;
  stroke-width: 5%;
  stroke-miterlimit: 10;
}
.progress-circular__background {
  stroke: transparent;
}
.progress-circular__primary {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke: #EA0B8C;
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-circular__secondary {
  stroke: #65adff;
}
.progress-circular--indeterminate {
  -webkit-animation: progress__rotate 2s linear infinite;
          animation: progress__rotate 2s linear infinite;
  -webkit-transform: none;
          transform: none;
}
.progress-circular--indeterminate__primary {
  -webkit-animation: progress__dash 1.5s ease-in-out infinite;
          animation: progress__dash 1.5s ease-in-out infinite;
}
.progress-circular--indeterminate__secondary {
  display: none;
}
@-webkit-keyframes progress__rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes progress__rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes progress__dash {
  0% {
    stroke-dasharray: 10%, 241.32%;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 201%, 50.322%;
    stroke-dashoffset: -100%;
  }

  100% {
    stroke-dasharray: 10%, 241.32%;
    stroke-dashoffset: -251.32%;
  }
}
@keyframes progress__dash {
  0% {
    stroke-dasharray: 10%, 241.32%;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 201%, 50.322%;
    stroke-dashoffset: -100%;
  }

  100% {
    stroke-dasharray: 10%, 241.32%;
    stroke-dashoffset: -251.32%;
  }
}
/*~
  name: Material Progress Circle
  category: Progress Circle
  elements: ons-progress-circular
  markup: |
    <svg class="progress-circular progress-circular--material progress-circular--indeterminate">
      <circle class="progress-circular__background progress-circular--material__background"/>
      <circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>
      <circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>
    </svg>

    <svg class="progress-circular progress-circular--material">
      <circle class="progress-circular__background progress-circular--material__background"/>
      <circle class="progress-circular__secondary progress-circular--material__secondary" style="stroke-dasharray: 140%, 251.32%"/>
      <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 100%, 251.32%"/>
    </svg>

    <svg class="progress-circular progress-circular--material">
      <circle class="progress-circular__background progress-circular--material__background"/>
      <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 80%, 251.32%"/>
    </svg>
*/
.progress-circular--material__background,
.progress-circular--material__primary,
.progress-circular--material__secondary {
  stroke-width: 9%;
}
.progress-circular--material__background {
  stroke: transparent;
}
.progress-circular--material__primary {
  stroke: #37474f;
}
.progress-circular--material__secondary {
  stroke: #548ba7;
}
/*~
  name: Fab
  category: Fab
  elements: ons-fab
  markup: |
    <button class="fab"><i class="zmdi zmdi-car"></i></button>
    <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
*/
/* stylelint-disable */
ons-fab.fab, ons-speed-dial-item.fab, button.fab {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 56px;
  height: 56px;
  text-decoration: none;
  font-size: 25px;
  line-height: 56px;
  letter-spacing: 0;
  color: #ffffff;
  vertical-align: middle;
  text-align: center;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
  transition: all 0.1s linear;
}
ons-fab.fab:active, ons-speed-dial-item.fab:active, button.fab:active {
  box-shadow: 0 3px 6 rgba(0, 0, 0, .12);
  background-color: color-mod(#EA0B8C a(70%));
  transition: all 0.2s ease;
  box-shadow: 0 0 6 rgba(0, 0, 0, .12);
}
ons-fab.fab:focus, ons-speed-dial-item.fab:focus, button.fab:focus {
  outline: 0;
}
ons-fab.fab:disabled,
    ons-fab.fab[disabled],
    ons-speed-dial-item.fab:disabled,
    ons-speed-dial-item.fab[disabled],
    button.fab:disabled,
    button.fab[disabled] {
  background-color: color-mod(black alpha(50%));
  box-shadow: none;
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
ons-fab.fab__icon, ons-speed-dial-item.fab__icon, button.fab__icon {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: block;
  border-radius: 100%;
  padding: 0;
  z-index: 100;
  line-height: 56px;
}
/* stylelint-enable */
/*~
  name: Material Fab
  category: Fab
  elements: ons-fab
  markup: |
    <button class="fab fab--material"><i class="zmdi zmdi-car"></i></button>
    <button class="fab fab--material" disabled><i class="zmdi zmdi-car"></i></button>
*/
/* stylelint-disable */
ons-fab.fab--material, ons-speed-dial-item.fab--material, button.fab--material {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 56px;
  height: 56px;
  text-decoration: none;
  font-size: 25px;
  line-height: 56px;
  letter-spacing: 0;
  color: #ffffff;
  vertical-align: middle;
  text-align: center;
  background-color: #EA0B8C;
  border: 0 solid currentColor;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
  transition: all 0.1s linear;
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  width: 56px;
  height: 56px;
  text-decoration: none;
  font-size: 25px;
  line-height: 56px;
  color: #31313a;
  background-color: #ffffff;
  box-shadow:
      0 4px 5px 0 rgba(0, 0, 0, .14),
      0 1px 10px 0 rgba(0, 0, 0, .12),
      0 2px 4px -1px rgba(0, 0, 0, .4);
  transition: all 0.2s ease-in-out;
}
ons-fab.fab--material:active, ons-speed-dial-item.fab--material:active, button.fab--material:active {
  box-shadow:
      0 8px 10px 1px rgba(0, 0, 0, .14),
      0 3px 14px 2px rgba(0, 0, 0, .12),
      0 5px 5px -3px rgba(0, 0, 0, .4);
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, .75);
  transition: all 0.2s ease;
}
ons-fab.fab--material:focus, ons-speed-dial-item.fab--material:focus, button.fab--material:focus {
  outline: 0;
}
ons-fab.fab--material__icon, ons-speed-dial-item.fab--material__icon, button.fab--material__icon {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: block;
  border-radius: 100%;
  padding: 0;
  z-index: 100;
  line-height: 56px;
}
ons-fab.fab--material:disabled,
  ons-fab.fab--material[disabled],
  ons-speed-dial-item.fab--material:disabled,
  ons-speed-dial-item.fab--material[disabled],
  button.fab--material:disabled,
  button.fab--material[disabled] {
  background-color: color-mod(black alpha(50%));
  box-shadow: none;
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/* stylelint-enable */
/*~
  name: Fab Mini
  category: Fab
  elements: ons-fab
  markup: |
    <button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>
    <button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
*/
/*~
  name: Material Fab Mini
  category: Fab
  elements: ons-fab
  markup: |
    <button class="fab fab--material fab--mini"><i class="zmdi zmdi-plus"></i></button>
    <button class="fab fab--material fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
*/
/* stylelint-disable */
ons-fab.fab--mini, ons-speed-dial-item.fab--mini, button.fab--mini {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
ons-fab.fab--mini__icon, ons-speed-dial-item.fab--mini__icon, button.fab--mini__icon {
  line-height: 40px;
}
ons-fab.speed-dial__item,  ons-speed-dial-item.speed-dial__item,  button.speed-dial__item  {
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
}
/* stylelint-enable */
/* stylelint-disable */
ons-fab.fab--top__right, button.fab--top__right, .speed-dial.fab--top__right {
  top: 20px;
  bottom: auto;
  right: 20px;
  left: auto;
  position: absolute;
}
ons-fab.fab--bottom__right, button.fab--bottom__right, .speed-dial.fab--bottom__right {
  top: auto;
  bottom: 20px;
  right: 20px;
  left: auto;
  position: absolute;
}
ons-fab.fab--top__left, button.fab--top__left, .speed-dial.fab--top__left {
  top: 20px;
  bottom: auto;
  right: auto;
  left: 20px;
  position: absolute;
}
ons-fab.fab--bottom__left, button.fab--bottom__left, .speed-dial.fab--bottom__left {
  top: auto;
  bottom: 20px;
  right: auto;
  left: 20px;
  position: absolute;
}
ons-fab.fab--top__center, button.fab--top__center, .speed-dial.fab--top__center {
  top: 20px;
  bottom: auto;
  margin-left: -28px;
  left: 50%;
  right: auto;
  position: absolute;
}
ons-fab.fab--bottom__center, button.fab--bottom__center, .speed-dial.fab--bottom__center {
  top: auto;
  bottom: 20px;
  margin-left: -28px;
  left: 50%;
  right: auto;
  position: absolute;
}
/* stylelint-enable */
/*~
  name: Modal
  category: Modal
  elements: ons-modal
  markup: |
    <div class="modal">
      <div class="modal__content">
        Message Text
      </div>
    </div>
*/
.modal {
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  box-sizing: border-box;
  background-clip: padding-box;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  overflow: hidden;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: table;
  z-index: 2147483647;
}
.modal__content {
  box-sizing: border-box;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  line-height: normal;
  box-sizing: border-box;
  background-clip: padding-box;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  white-space: normal;
}
/*~
  name: Select Input
  category: Select Input
  markup: |
    <select class="select-input">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

    &nbsp;

    <select class="select-input" disabled>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
*/
.select-input {
  box-sizing: border-box;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  vertical-align: top;
  outline: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  border: none;
  background-color: transparent;
  position: relative;
  font-size: 17px;
  height: 32px;
  line-height: 32px;
  border-color: #ccc;
  color: #1f1f21;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  border-radius: 0;
  border: none;
  padding: 0 20px 0 0;
  background-color: transparent;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-position: right center;
  border-bottom: none;
}
.select-input::-ms-clear {
  display: none;
}
.select-input::-webkit-input-placeholder {
  color: #999;
}
.select-input:-ms-input-placeholder {
  color: #999;
}
.select-input::-ms-input-placeholder {
  color: #999;
}
.select-input::placeholder {
  color: #999;
}
.select-input:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  border: none;
  background-color: transparent;
}
.select-input:disabled::-webkit-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.select-input:disabled:-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.select-input:disabled::-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.select-input:disabled::placeholder {
  border: none;
  background-color: transparent;
  color: #999;
}
.select-input:invalid {
  border: none;
  background-color: transparent;
  color: #1f1f21;
}
.select-input[multiple] {
  height: 64px;
}
/*~
  name: Material Select Input
  category: Select Input
  markup: |
    <select class="select-input select-input--material">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

    &nbsp;

    <select class="select-input select-input--material" disabled>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
*/
.select-input--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #1f1f21;
  font-size: 15px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4='), linear-gradient(to top, color-mod(black a(12%)) 50%, color-mod(black a(12%)) 50%);
  background-size: auto, 100% 1px;
  background-repeat: no-repeat;
  background-position: right center, left bottom;
  border: none;
  font-weight: 400;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); /* prevent ios flicker */
}
.select-input--material__label {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #000000;
  color: rgba(0, 0, 0, .81);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 16px;
  pointer-events: none;
}
.select-input--material__label--active {
  color: #000000;
  color: rgba(0, 0, 0, .15);
  -webkit-transform: translate(0, -75%) scale(0.75);
          transform: translate(0, -75%) scale(0.75);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  transition: transform 0.1s ease-in, color 0.1s ease-in;
  transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
}
.select-input--material::-webkit-input-placeholder {
  color: #000000;
  color: rgba(0, 0, 0, .81);
  line-height: 20px;
}
.select-input--material:-ms-input-placeholder {
  color: #000000;
  color: rgba(0, 0, 0, .81);
  line-height: 20px;
}
.select-input--material::-ms-input-placeholder {
  color: #000000;
  color: rgba(0, 0, 0, .81);
  line-height: 20px;
}
.select-input--material::placeholder {
  color: #000000;
  color: rgba(0, 0, 0, .81);
  line-height: 20px;
}
@-webkit-keyframes material-select-input-animate {
  0% {
    background-size: 0% 2px, 100% 2px;
  }

  100% {
    background-size: 100% 2px, 100% 2px;
  }
}
@keyframes material-select-input-animate {
  0% {
    background-size: 0% 2px, 100% 2px;
  }

  100% {
    background-size: 100% 2px, 100% 2px;
  }
}
/*~
  name: Underbar Select Input
  category: Select Input
  markup: |
    <select class="select-input select-input--underbar">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

    &nbsp;

    <select class="select-input select-input--underbar" disabled>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
*/
.select-input--underbar {
  border: none;
  border-bottom: 1px solid #ccc;
}
.select-input--underbar:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  border: none;
  background-color: transparent;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
}
.select-input--underbar:disabled::-webkit-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.select-input--underbar:disabled:-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.select-input--underbar:disabled::-ms-input-placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.select-input--underbar:disabled::placeholder {
  border: none;
  background-color: transparent;
  color: #999;
  border: none;
  background-color: transparent;
}
.select-input--underbar:invalid {
  border: none;
  background-color: transparent;
  color: #1f1f21;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
}
/*~
  name: Action Sheet
  category: Action Sheet
  markup: |
    <div class="action-sheet-mask"></div>
    <div class="action-sheet">
      <div class="action-sheet-title">Title</div>
      <button class="action-sheet-button">Label</button>
      <button class="action-sheet-button">Cancel</button>
    </div>
*/
/*~
  name: Action Sheet with Delete Label
  category: Action Sheet
  markup: |
    <div class="action-sheet-mask"></div>
    <div class="action-sheet">
      <button class="action-sheet-button">Label</button>
      <button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>
      <button class="action-sheet-button">Cancel</button>
    </div>
*/
.action-sheet {
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  cursor: default;
  position: absolute;
  left: 10px; /* iOS 9, 10, 11 */
  right: 10px; /* iOS 9, 10, 11 */
  bottom: 10px; /* iOS 9, 10, 11 */
  z-index: 2;
}
.action-sheet-button {
  box-sizing: border-box;
  height: 56px;
  font-size: 20px;
  text-align: center;
  color: #EA0B8C;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, .9);
  border-radius: 0;
  line-height: 56px;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .action-sheet-button {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 50%, transparent 50%);
  }
}
.action-sheet-button:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.action-sheet-button:active {
  background-color: #e9e9e9;
  background-image: none;
}
.action-sheet-button:focus {
  outline: none;
}
.action-sheet-button:nth-last-of-type(2) {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  background-image: none;
}
.action-sheet-button:last-of-type {
  border-radius: 12px;
  margin: 8px 0 0 0; /* iOS 9, 10, 11 */
  background-color: #fff;
  background-image: none;
  font-weight: 600;
}
.action-sheet-button:last-of-type:active {
  background-color: #e9e9e9;
}
.action-sheet-button--destructive {
  color: #fe3824;
}
.action-sheet-title {
  box-sizing: border-box;
  height: 56px;
  font-size: 13px;
  color: #8f8e94;
  text-align: center;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, .9);
  line-height: 56px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  .action-sheet-title {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 50%, transparent 50%);
  }
}
.action-sheet-title:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.action-sheet-icon {
  display: none;
}
.action-sheet-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .1);
  z-index: 1;
}
/*~
  name: Material Action Sheet
  category: Action Sheet
  markup: |
    <div class="action-sheet-mask action-sheet-mask--material"></div>
    <div class="action-sheet action-sheet--material">
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-close action-sheet-icon--material"></i>Cancel</button>
    </div>
*/
/*~
  name: Material Action Sheet with Title
  category: Action Sheet
  markup: |
    <div class="action-sheet-mask action-sheet-mask--material"></div>
    <div class="action-sheet action-sheet--material">
      <div class="action-sheet-title action-sheet-title--material">Title</div>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-close action-sheet-icon--material"></i>Cancel</button>
    </div>
*/
.action-sheet--material {
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow:
      0 16px 24px 2px rgba(0, 0, 0, .14),
      0 6px 30px 5px rgba(0, 0, 0, .12),
      0 8px 10px -5px rgba(0, 0, 0, .4);
}
.action-sheet-title--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  border-radius: 0;
  background-image: none;
  text-align: left;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  padding: 0 0 0 16px;
  color: #686868;
  background-color: white;
  font-weight: 400;
}
.action-sheet-title--material:first-child {
  border-radius: 0;
}
.action-sheet-button--material {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  border-radius: 0;
  background-image: none;
  height: 52px;
  line-height: 52px;
  text-align: left;
  font-size: 16px;
  padding: 0 0 0 16px;
  color: #686868;
  font-weight: 400;
  background-color: white;
}
.action-sheet-button--material:first-child {
  border-radius: 0;
}
.action-sheet-button--material:nth-last-of-type(2) {
  border-radius: 0;
}
.action-sheet-button--material:last-of-type {
  margin: 0;
  border-radius: 0;
  font-weight: 400;
  background-color: white;
}
.action-sheet-icon--material {
  display: inline-block;
  float: left;
  height: 52px;
  line-height: 52px;
  margin-right: 32px;
  font-size: 26px;
  width: 0.8em;
  text-align: center;
}
.action-sheet-mask--material {
  background-color: #000000;
  background-color: rgba(0, 0, 0, .2);
}
/*~
  name: Card
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card">
        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/
.card {
  /**/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*font-weight: 400;*/
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  border-radius: 8px;
  background-color: white;
  box-sizing: border-box;
  display: block;
  margin: 8px;
  padding: 16px;
  text-align: left;
  word-wrap: break-word;
}
.card__content {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #030303;
}
/*~
  name: Card with Title
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card">
        <h2 class="card__title">Card Title</h2>
        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/
.card__title {
  /**/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-weight: 400;
  font-size: 20px;
  margin: 4px 0 8px 0;
  padding: 0;
  display: block;
  box-sizing: border-box;
}
/*~
  name: Material Card
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card card--material">
        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/
.card--material {
  background-color: white;
  border-radius: 2px;
  box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, .14),
      0 1px 5px 0 rgba(0, 0, 0, .12),
      0 3px 1px -2px rgba(0, 0, 0, .2);
  /**/
  -webkit-font-smoothing: antialiased;
  /*font-weight: 400;*/
}
.card--material__content {
  font-size: 14px;
  line-height: 1.4;
  color: #000000;
  color: rgba(0, 0, 0, .54);
}
/*~
  name: Material Card with Title
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card card--material">
        <div class="card__title card--material__title">Card Title</div>
        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/
.card--material__title {
  /**/
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 24px;
  margin: 8px 0 12px 0;
}
/*~
  name: Toast
  category: Toast
  markup: |
    <div class="toast">
      <div class="toast__message">Message Message Message Message Message Message</div>
      <button class="toast__button">ACTION</button>
    </div>
*/
.toast {
  /**/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 0;
  margin: 8px 0;
  border-radius: 8px;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .8);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  min-height: 48px;
  line-height: 1.5;
  box-sizing: border-box;
  padding: 16px 16px;
}
.toast__message {
  font-size: 14px;
  color: white;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  text-align: left;
  margin: 0 16px 0 0;
  white-space: normal;
}
.toast__button {
  font-size: 14px;
  color: white;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
          flex-grow: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  cursor: default;
  text-transform: uppercase;
}
.toast__button:focus {
  outline: none;
}
.toast__button:active {
  opacity: 0.4;
}
/*~
  name: Material Toast
  category: Toast
  markup: |
    <div class="toast toast--material">
      <div class="toast__message toast--material__message">Message Message Message Message Message Message</div>
      <button class="toast__button toast--material__button">ACTION</button>
    </div>
*/
.toast--material {
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 0;
  padding: 16px 24px;
}
.toast--material__message {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  margin: 0 24px 0 0;
}
.toast--material__button {
  
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #bbdefb;
}
/* ------- */
/* Default */
/* ------- */
/* All toolbar */
.toolbar {
  top: 0;
  box-sizing: border-box;
  padding-top: 0;
}
.bottom-bar {
  bottom: 0;
  box-sizing: border-box;
  padding-bottom: 0;
}
/* All page__background with a ordinal toolbar */
.toolbar+.page__background {
  top: 44px;
}
/* All page__content without toolbars */
.page__content {
  top: 0;
  padding-top: 0;

  bottom: 0;
}
/* All page__content with a toolbar */
.toolbar+.page__background+.page__content {
  top: 44px;
  padding-top: 0;
}
/* All page__content with a bottom-bar */
.page-with-bottom-toolbar > .page__content {
  bottom: 44px;
}
/* -------- */
/* Material */
/* -------- */
/* All page__background with a material toolbar */
.toolbar.toolbar--material+.page__background {
  top: 56px;
}
/* All page__content with a material toolbar */
.toolbar.toolbar--material+.page__background+.page__content {
  top: 56px;
  padding-top: 0;
}
/* -------- */
/*  Others  */
/* -------- */
/* All page__background with a transparent toolbar */
.toolbar.toolbar--transparent+.page__background {
  top: 0;
}
/* All page__content with a transparent cover-content toolbar and its direct descendant page_content */
.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
.toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
  top: 0;
  padding-top: 44px;
}
/* All page__content with a material transparent cover-content toolbar and its direct descendant page_content */
.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
.toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
  top: 0;
  padding-top: 56px;
}
/* -------- */
/*  Tabbar  */
/* -------- */
/* All top tabbar */
.tabbar--top {
  padding-top: 0;
}
/* All bottom tabbar */
.tabbar:not(.tabbar--top) {
  padding-bottom: 0;
} /* non BEM */
/* @import './util.css'; */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .page__content {
    padding-left: 44px;
    padding-right: 44px;
  }
  /* Ignore if the page is in dialogs or modals */
  html[onsflag-iphonex-landscape] .dialog .page__content,
  html[onsflag-iphonex-landscape] .modal .page__content {
    padding-left: 0;
    padding-right: 0;
  }
}
/* @import './switch.css'; */
/* @import './range.css'; */
/* @import './notification.css'; */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .toolbar__left {
    padding-left: 44px;
  }

  html[onsflag-iphonex-landscape] .toolbar__right {
    padding-right: 44px;
  }

  html[onsflag-iphonex-landscape] .bottom-bar {
    padding-right: 44px;
    padding-left: 44px;
  }
}
/* @import './button.css'; */
/* @import './button-bar.css'; */
/* @import './segment.css'; */
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .tabbar {
    padding-left: 44px;
    padding-right: 44px;
    width: calc(100% - 88px);
  }
}
/* @import './toolbar-button.css'; */
/* @import './checkbox.css'; */
/* @import './radio-button.css'; */
/* @import './list.css'; */
/* @import './search-input.css'; */
/* @import './text-input.css'; */
/* @import './textarea.css'; */
/* @import './dialog.css'; */
/* @import './alert-dialog.css'; */
/* @import './popover.css'; */
/* @import './progress-bar.css'; */
/* @import './progress-circular.css'; */
@media (orientation: portrait) {
  /* For top safe area */
  html[onsflag-iphonex-portrait] .fab--top__left,
  html[onsflag-iphonex-portrait] .fab--top__center,
  html[onsflag-iphonex-portrait] .fab--top__right {
    top: 64px;
  }

  /* For bottom safe area */
  html[onsflag-iphonex-portrait] .fab--bottom__left,
  html[onsflag-iphonex-portrait] .fab--bottom__center,
  html[onsflag-iphonex-portrait] .fab--bottom__right {
    bottom: 34px; /* Omit 20px space */
  }
}
@media (orientation: landscape) {
  /* For bottom safe area */
  html[onsflag-iphonex-landscape] .fab--bottom__left,
  html[onsflag-iphonex-landscape] .fab--bottom__center,
  html[onsflag-iphonex-landscape] .fab--bottom__right {
    bottom: 21px; /* Omit 20px space */
  }
  
  /* For left safe area */
  html[onsflag-iphonex-landscape] .fab--top__left,
  html[onsflag-iphonex-landscape] .fab--bottom__left {
    left: 44px; /* Omit 20px space */
  }

  /* For right safe area */
  html[onsflag-iphonex-landscape] .fab--top__right,
  html[onsflag-iphonex-landscape] .fab--bottom__right {
    right: 44px; /* Omit 20px space */
  }
}
/* @import './modal.css'; */
/* @import './select.css'; */
@media (orientation: portrait) {
  html[onsflag-iphonex-portrait] .action-sheet {
    bottom: 48px; /* bottom safe area + 14 pt (extra bottom margin) */
  }
}
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .action-sheet {
    /* The width in landscape mode is the same as the width in portrait mode */
    left: calc((100vw - 100vh + 20px) / 2);
    right: calc((100vw - 100vh + 20px) / 2);
    bottom: 33px; /* bottom safe area + 12 pt (extra bottom margin) */
  }
}
/* @import './card.css'; */
@media (orientation: portrait) {
  html[onsflag-iphonex-portrait] .toast {
    bottom: 34px;
  }
}
@media (orientation: landscape) {
  html[onsflag-iphonex-landscape] .toast {
    left: 52px;
    right: 52px;
    bottom: 21px;
  }
}
/*
  Note:

  :not(X) does not work if X is a complex selector like `.foo .bar` due to the spec of :not(X).
  Instead we have to use the following form for representing A:not(X A):not(Y A):not(Z A),
  which means `A which does not have any X, Y and Z as its ancestors`.

  // Equivalent to A:not(X A):not(Y A):not(Z A) { foo: bar; }
  A {
    // Apply styles for A
    foo: bar;
  }
  X A,
  Y A,
  Z A {
    // Subtract `X A`, `Y A` and `Z A`
    // (Restore original styles of A)
  }
*/
/*
  Note:

  @apply has been deprecated as of Oct, 2017.
  Please do not use @apply to restore original styles.
*/
/* Bars and page contents */
@media (orientation: portrait) {
  /* Outermost toolbar */
  html[onsflag-iphonex-portrait] .toolbar {
    top: 0;
    box-sizing: content-box;
    padding-top: 44px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .toolbar, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar, /* if wrapped with a page with a toolbar */
  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar { /* if wrapped with a top tabbar */
    /* Restore original styles */
    top: 0;
    box-sizing: border-box;
    padding-top: 0;
  }

  /* Outermost bottom-bar */
  html[onsflag-iphonex-portrait] .bottom-bar {
    bottom: 0;
    box-sizing: content-box;
    padding-bottom: 34px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .bottom-bar, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    bottom: 0;
    box-sizing: border-box;
    padding-bottom: 0;
  }

  /* Outermost page__content without toolbars or bottom-bars */
  html[onsflag-iphonex-portrait] .page__content {
    top: 0;
    padding-top: 44px;
    bottom: 0;
    padding-bottom: 34px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .page__content, /* if wrapped with a page with a toolbar */
  html[onsflag-iphonex-portrait] .tabbar--top__content .page__content, /* if wrapped with a top tabbar */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if the page has a toolbar */
    /* Restore original styles */
    top: 0;
    padding-top: 0;
  }
  html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
    /* Restore original styles */
    bottom: 0;
    padding-bottom: 0;
  }

  /* Outermost page__content with a toolbar */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background,
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content {
    top: 88px;
    padding-top: 0;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background,
  html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with dialogs */

  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background,
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with a page with a toolbar */

  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background,
  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if wrapped with a top tabbar */
    /* Restore original styles */
    top: 44px;
    padding-top: 0;
  }

  /* Outermost page__content with a bottom-bar */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content {
    bottom: 78px;
    padding-bottom: 0;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    bottom: 44px;
    padding-bottom: 0;
  }

  /* Outermost page__content with a transparent cover-content toolbar and its direct descendant page_content */
  html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
  html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
    top: 0;
    padding-top: 88px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content,
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with a page with a toolbar */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page__content,
  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
  html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {  /* if wrapped with a top tabbar */
    /* Restore original styles */
    top: 0;
    padding-top: 44px;
  }

  /* Outermost top tabbar */
  html[onsflag-iphonex-portrait] .tabbar--top {
    padding-top: 44px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .tabbar--top, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top, /* if wrapped with a page with a toolbar */
  html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top { /* if wrapped with a top tabbar */
    /* Restore original styles */
    padding-top: 0;
  }

  /* Outermost tabbar--top__content */
  html[onsflag-iphonex-portrait] .tabbar--top__content {
    top: 93px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .tabbar--top__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top__content, /* if wrapped with a page with a toolbar */
  html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top__content { /* if wrapped with a top tabbar */
    /* Restore original styles */
    top: 49px;
  }

  /* Outermost bottom tabbar */
  html[onsflag-iphonex-portrait] .tabbar:not(.tabbar--top):not(.tabbar--top) {
    padding-bottom: 34px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .tabbar:not(.tabbar--top):not(.tabbar--top), /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    padding-bottom: 0;
  }

  /* Outermost.tabbar__content:not(.tabbar--top__content) */
  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) {
    bottom: 83px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-portrait] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
  html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    bottom: 49px;
  }
}
@media (orientation: landscape) {
  /* Outermost bottom-bar */
  html[onsflag-iphonex-landscape] .bottom-bar {
    bottom: 0;
    box-sizing: content-box;
    padding-bottom: 21px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-landscape] .dialog .bottom-bar, /* if wrapped with dialogs */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    bottom: 0;
    box-sizing: border-box;
    padding-bottom: 0;
  }

  /* Outermost page__content without bottom-bars */
  html[onsflag-iphonex-landscape] .page__content {
    bottom: 0;
    padding-bottom: 21px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-landscape] .dialog .page__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
    /* Restore original styles */
    bottom: 0;
    padding-bottom: 0;
  }

  /* Outermost page__content with a bottom-bar */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content {
    bottom: 65px;
    padding-bottom: 0;
  }
  /* Non-outermost */
  html[onsflag-iphonex-landscape] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    bottom: 44px;
    padding-bottom: 0;
  }

  /* Outermost bottom tabbar */
  html[onsflag-iphonex-landscape] .tabbar:not(.tabbar--top) {
    padding-bottom: 21px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-landscape] .dialog .tabbar:not(.tabbar--top), /* if wrapped with dialogs */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    padding-bottom: 0;
  }

  /* Outermost.tabbar__content:not(.tabbar--top__content) */
  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) {
    bottom: 70px;
  }
  /* Non-outermost */
  html[onsflag-iphonex-landscape] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
  html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
  html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
    /* Restore original styles */
    bottom: 49px;
  }
}
/* Lists in .page__content */
@media (orientation: landscape) {
  /* Only patching lists just under .page__content */
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) {
    margin-left: -44px;
    margin-right: -44px;
  }

  /* For left safe area */
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-header {
    padding-left: 59px;
  }
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item {
    /* margin-left is not suitable for iPhone X patch. Using padding-left here. */
    padding-left: 58px;
  }

  /* For right safe area */
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item--chevron:before {
    right: 60px;
  }
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
    padding-right: 50px;
  }
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
    padding-right: 56px;
  }
  html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
    padding-right: 74px;
  }
}
/* Lists in .page__content in dialogs and modals */
@media (orientation: landscape) {
  /* Only patching lists just under .page__content */
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) {
    margin-left: 0;
    margin-right: 0;
  }

  /* For left safe area */
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-header {
    padding-left: 15px;
  }
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item {
    padding-left: 14px;
  }

  /* For right safe area */
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item--chevron:before {
    right: 16px;
  }
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
    padding-right: 6px;
  }
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
    padding-right: 12px;
  }
  html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
    padding-right: 30px;
  }
}
/* non BEM */


/* Custom Theme for Onsen UI 2.11.2 */


:root {
  /* variables for iOS components */
  --background-color: #efeff4;
  --text-color: #1f1f21;
  --sub-text-color: #999;
  --highlight-color: #EA0B8C;
  --second-highlight-color: #25a6d9;
  --border-color: #ccc;
  --button-background-color: var(--highlight-color);
  --button-cta-background-color: #EA0B8C;
  --toolbar-background-color: #fafafa;
  --toolbar-button-color: #000000;
  --toolbar-text-color: #1f1f21;
  --toolbar-border-color: #b2b2b2;
  --button-bar-color: var(--highlight-color);
  --button-bar-active-text-color: #fff;
  --button-bar-active-background-color: color-mod(var(--button-bar-color) tint(70%));
  --button-light-color: black;
  --segment-color: var(--highlight-color);
  --segment-active-text-color: #fff;
  --segment-active-background-color: color-mod(var(--segment-color) tint(70%));
  --list-background-color: #fff;
  --list-header-background-color: #eee;
  --list-tap-active-background-color: #d9d9d9;
  --list-item-chevron-color: #c7c7cc;
  --progress-bar-color: var(--highlight-color);
  --progress-bar-secondary-color: #65adff;
  --progress-bar-background-color: transparent;
  --progress-circle-primary-color: var(--highlight-color);
  --progress-circle-secondary-color: #65adff;
  --progress-circle-background-color: transparent;
  --tabbar-background-color: #fafafa;
  --tabbar-text-color: #999;
  --tabbar-highlight-text-color: #EA0B8C;
  --tabbar-border-color: #ccc;
  --switch-highlight-color: #44db5e;
  --switch-border-color: #e5e5e5;
  --switch-background-color: white;
  --range-track-background-color: #a4aab3;
  --range-track-background-color-active: var(--highlight-color);
  --range-thumb-background-color: #fff;
  --modal-background-color: rgba(0, 0, 0, 0.7);
  --modal-text-color: #fff;
  --alert-dialog-background-color: #f4f4f4;
  --alert-dialog-text-color: #1f1f21;
  --alert-dialog-button-color: var(--highlight-color);
  --alert-dialog-separator-color: #ddd;
  --dialog-background-color: #f4f4f4;
  --dialog-text-color: var(--text-color);
  --popover-background-color: white;
  --popover-text-color: #1f1f21;
  --action-sheet-title-color: #8f8e94;
  --action-sheet-button-separator-color: rgba(0, 0, 0, 0.1);
  --action-sheet-button-color: var(--highlight-color);
  --action-sheet-button-destructive-color: #fe3824;
  --action-sheet-button-background-color: rgba(255, 255, 255, 0.9);
  --action-sheet-button-active-background-color: #e9e9e9;
  --action-sheet-cancel-button-background-color: #fff;
  --notification-background-color: #fe3824;
  --notification-color: white;
  --search-input-background-color: rgba(3, 3, 3, 0.09);
  --fab-text-color: #ffffff;
  --fab-background-color: var(--highlight-color);
  --fab-active-background-color: color-mod(var(--fab-background-color) a(70%));
  --card-background-color: white;
  --card-text-color: #030303;
  --toast-background-color: rgba(0, 0, 0, 0.8);
  --toast-text-color: white;
  --toast-button-text-color: white;
  --select-input-color: var(--text-color);
  --select-input-border-color: var(--border-color);

  /* variables for Material Design components */
  --material-background-color: #eceff1;
  --material-text-color: var(--text-color);
  --material-notification-background-color: #e91e63;
  --material-notification-color: white;
  --material-switch-active-thumb-color: #37474f;
  --material-switch-active-background-color: color-mod(#37474f a(50%));
  --material-switch-inactive-thumb-color: #f1f1f1;
  --material-switch-inactive-background-color: #b0afaf;
  --material-range-track-color: #bdbdbd;
  --material-range-thumb-color: #31313a;
  --material-range-disabled-thumb-color: #b0b0b0;
  --material-range-disabled-thumb-border-color: #eeeeee;
  --material-range-zero-thumb-color: #f2f2f2;
  --material-toolbar-background-color: #ffffff;
  --material-toolbar-text-color: #31313a;
  --material-toolbar-button-color: #000000;
  --material-segment-background-color: #fafafa;
  --material-segment-active-background-color: #c8c8c8;
  --material-segment-text-color: color-mod(black a(38%));
  --material-segment-active-text-color: #353535;
  --material-button-background-color: #EA0B8C;
  --material-button-text-color: #ffffff;
  --material-button-disabled-background-color: color-mod(#4f4f4f a(26%));
  --material-button-disabled-color: color-mod(black a(26%));
  --material-flat-button-active-background-color: color-mod(#999 a(20%));
  --material-list-background-color: #fff;
  --material-list-item-separator-color: #eee;
  --material-list-header-text-color: #757575;
  --material-checkbox-active-color: #37474f;
  --material-checkbox-inactive-color: #717171;
  --material-checkbox-checkmark-color: #ffffff;
  --material-radio-button-active-color: #37474f;
  --material-radio-button-inactive-color: #717171;
  --material-radio-button-disabled-color: #afafaf;
  --material-text-input-text-color: #212121;
  --material-text-input-active-color: #3d5afe;
  --material-text-input-inactive-color: #afafaf;
  --material-search-background-color: #fafafa;
  --material-dialog-background-color: #ffffff;
  --material-dialog-text-color: var(--material-text-color);
  --material-alert-dialog-background-color: #ffffff;
  --material-alert-dialog-title-color: #31313a;
  --material-alert-dialog-content-color: rgba(49, 49, 58, 0.85);
  --material-alert-dialog-button-color: #37474f;
  --material-progress-bar-primary-color: #37474f;
  --material-progress-bar-secondary-color: #548ba7;
  --material-progress-bar-background-color: transparent;
  --material-progress-circle-primary-color: var(--material-progress-bar-primary-color);
  --material-progress-circle-secondary-color: var(--material-progress-bar-secondary-color);
  --material-progress-circle-background-color: transparent;
  --material-tabbar-background-color: #ffffff;
  --material-tabbar-text-color: #31313a;
  --material-tabbar-highlight-text-color: #EA0B8C;
  --material-tabbar-highlight-color: rgba(49, 49, 58, 0.1);
  --material-fab-text-color: #31313a;
  --material-fab-background-color: #ffffff;
  --material-fab-active-background-color: rgba(255, 255, 255, 0.75);
  --material-card-background-color: white;
  --material-card-text-color: rgba(0, 0, 0, 0.54);
  --material-toast-background-color: rgba(0, 0, 0, 0.8);
  --material-toast-text-color: white;
  --material-toast-button-text-color: #bbdefb;
  --material-select-input-color: var(--material-text-color);
  --material-select-input-active-color: rgba(0, 0, 0, 0.15);
  --material-select-input-inactive-color: rgba(0, 0, 0, 0.81);
  --material-select-border-color: color-mod(black a(12%));
  --material-popover-background-color: #fafafa;
  --material-popover-text-color: var(--material-text-color);
  --material-action-sheet-text-color: #686868;

  /* others */
  --tap-highlight-color: transparent;
}