framework7-without-localstorage/dist/css/framework7.material.css

Full featured mobile HTML framework for building iOS & Android apps

/**
 * Framework7 1.6.5
 * Full featured mobile HTML framework for building iOS & Android apps
 * 
 * Google Material Theme
 *
 * http://framework7.io/
 * 
 * Copyright 2020, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 * 
 * Licensed under MIT
 * 
 * Released on: August 3, 2020
 */
html,
body,
.framework7-root {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  overflow: hidden;
}
.framework7-root {
  overflow: hidden;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}
a,
input,
textarea,
select {
  outline: 0;
}
a {
  text-decoration: none;
  color: #2196f3;
}
p {
  margin: 1em 0;
}
/* === Grid === */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.row > [class*="col-"] {
  box-sizing: border-box;
}
.row .col-auto {
  width: 100%;
}
.row .col-100 {
  width: 100%;
  width: -webkit-calc((100% - 16px*0) / 1);
  width: calc((100% - 16px*0) / 1);
}
.row.no-gutter .col-100 {
  width: 100%;
}
.row .col-95 {
  width: 95%;
  width: -webkit-calc((100% - 16px*0.05263157894736836) / 1.0526315789473684);
  width: calc((100% - 16px*0.05263157894736836) / 1.0526315789473684);
}
.row.no-gutter .col-95 {
  width: 95%;
}
.row .col-90 {
  width: 90%;
  width: -webkit-calc((100% - 16px*0.11111111111111116) / 1.1111111111111112);
  width: calc((100% - 16px*0.11111111111111116) / 1.1111111111111112);
}
.row.no-gutter .col-90 {
  width: 90%;
}
.row .col-85 {
  width: 85%;
  width: -webkit-calc((100% - 16px*0.17647058823529416) / 1.1764705882352942);
  width: calc((100% - 16px*0.17647058823529416) / 1.1764705882352942);
}
.row.no-gutter .col-85 {
  width: 85%;
}
.row .col-80 {
  width: 80%;
  width: -webkit-calc((100% - 16px*0.25) / 1.25);
  width: calc((100% - 16px*0.25) / 1.25);
}
.row.no-gutter .col-80 {
  width: 80%;
}
.row .col-75 {
  width: 75%;
  width: -webkit-calc((100% - 16px*0.33333333333333326) / 1.3333333333333333);
  width: calc((100% - 16px*0.33333333333333326) / 1.3333333333333333);
}
.row.no-gutter .col-75 {
  width: 75%;
}
.row .col-70 {
  width: 70%;
  width: -webkit-calc((100% - 16px*0.4285714285714286) / 1.4285714285714286);
  width: calc((100% - 16px*0.4285714285714286) / 1.4285714285714286);
}
.row.no-gutter .col-70 {
  width: 70%;
}
.row .col-66 {
  width: 66.66666666666666%;
  width: -webkit-calc((100% - 16px*0.5000000000000002) / 1.5000000000000002);
  width: calc((100% - 16px*0.5000000000000002) / 1.5000000000000002);
}
.row.no-gutter .col-66 {
  width: 66.66666666666666%;
}
.row .col-65 {
  width: 65%;
  width: -webkit-calc((100% - 16px*0.5384615384615385) / 1.5384615384615385);
  width: calc((100% - 16px*0.5384615384615385) / 1.5384615384615385);
}
.row.no-gutter .col-65 {
  width: 65%;
}
.row .col-60 {
  width: 60%;
  width: -webkit-calc((100% - 16px*0.6666666666666667) / 1.6666666666666667);
  width: calc((100% - 16px*0.6666666666666667) / 1.6666666666666667);
}
.row.no-gutter .col-60 {
  width: 60%;
}
.row .col-55 {
  width: 55%;
  width: -webkit-calc((100% - 16px*0.8181818181818181) / 1.8181818181818181);
  width: calc((100% - 16px*0.8181818181818181) / 1.8181818181818181);
}
.row.no-gutter .col-55 {
  width: 55%;
}
.row .col-50 {
  width: 50%;
  width: -webkit-calc((100% - 16px*1) / 2);
  width: calc((100% - 16px*1) / 2);
}
.row.no-gutter .col-50 {
  width: 50%;
}
.row .col-45 {
  width: 45%;
  width: -webkit-calc((100% - 16px*1.2222222222222223) / 2.2222222222222223);
  width: calc((100% - 16px*1.2222222222222223) / 2.2222222222222223);
}
.row.no-gutter .col-45 {
  width: 45%;
}
.row .col-40 {
  width: 40%;
  width: -webkit-calc((100% - 16px*1.5) / 2.5);
  width: calc((100% - 16px*1.5) / 2.5);
}
.row.no-gutter .col-40 {
  width: 40%;
}
.row .col-35 {
  width: 35%;
  width: -webkit-calc((100% - 16px*1.8571428571428572) / 2.857142857142857);
  width: calc((100% - 16px*1.8571428571428572) / 2.857142857142857);
}
.row.no-gutter .col-35 {
  width: 35%;
}
.row .col-33 {
  width: 33.333333333333336%;
  width: -webkit-calc((100% - 16px*2) / 3);
  width: calc((100% - 16px*2) / 3);
}
.row.no-gutter .col-33 {
  width: 33.333333333333336%;
}
.row .col-30 {
  width: 30%;
  width: -webkit-calc((100% - 16px*2.3333333333333335) / 3.3333333333333335);
  width: calc((100% - 16px*2.3333333333333335) / 3.3333333333333335);
}
.row.no-gutter .col-30 {
  width: 30%;
}
.row .col-25 {
  width: 25%;
  width: -webkit-calc((100% - 16px*3) / 4);
  width: calc((100% - 16px*3) / 4);
}
.row.no-gutter .col-25 {
  width: 25%;
}
.row .col-20 {
  width: 20%;
  width: -webkit-calc((100% - 16px*4) / 5);
  width: calc((100% - 16px*4) / 5);
}
.row.no-gutter .col-20 {
  width: 20%;
}
.row .col-15 {
  width: 15%;
  width: -webkit-calc((100% - 16px*5.666666666666667) / 6.666666666666667);
  width: calc((100% - 16px*5.666666666666667) / 6.666666666666667);
}
.row.no-gutter .col-15 {
  width: 15%;
}
.row .col-10 {
  width: 10%;
  width: -webkit-calc((100% - 16px*9) / 10);
  width: calc((100% - 16px*9) / 10);
}
.row.no-gutter .col-10 {
  width: 10%;
}
.row .col-5 {
  width: 5%;
  width: -webkit-calc((100% - 16px*19) / 20);
  width: calc((100% - 16px*19) / 20);
}
.row.no-gutter .col-5 {
  width: 5%;
}
.row .col-auto:nth-last-child(1),
.row .col-auto:nth-last-child(1) ~ .col-auto {
  width: 100%;
  width: -webkit-calc((100% - 16px*0) / 1);
  width: calc((100% - 16px*0) / 1);
}
.row.no-gutter .col-auto:nth-last-child(1),
.row.no-gutter .col-auto:nth-last-child(1) ~ .col-auto {
  width: 100%;
}
.row .col-auto:nth-last-child(2),
.row .col-auto:nth-last-child(2) ~ .col-auto {
  width: 50%;
  width: -webkit-calc((100% - 16px*1) / 2);
  width: calc((100% - 16px*1) / 2);
}
.row.no-gutter .col-auto:nth-last-child(2),
.row.no-gutter .col-auto:nth-last-child(2) ~ .col-auto {
  width: 50%;
}
.row .col-auto:nth-last-child(3),
.row .col-auto:nth-last-child(3) ~ .col-auto {
  width: 33.33333333%;
  width: -webkit-calc((100% - 16px*2) / 3);
  width: calc((100% - 16px*2) / 3);
}
.row.no-gutter .col-auto:nth-last-child(3),
.row.no-gutter .col-auto:nth-last-child(3) ~ .col-auto {
  width: 33.33333333%;
}
.row .col-auto:nth-last-child(4),
.row .col-auto:nth-last-child(4) ~ .col-auto {
  width: 25%;
  width: -webkit-calc((100% - 16px*3) / 4);
  width: calc((100% - 16px*3) / 4);
}
.row.no-gutter .col-auto:nth-last-child(4),
.row.no-gutter .col-auto:nth-last-child(4) ~ .col-auto {
  width: 25%;
}
.row .col-auto:nth-last-child(5),
.row .col-auto:nth-last-child(5) ~ .col-auto {
  width: 20%;
  width: -webkit-calc((100% - 16px*4) / 5);
  width: calc((100% - 16px*4) / 5);
}
.row.no-gutter .col-auto:nth-last-child(5),
.row.no-gutter .col-auto:nth-last-child(5) ~ .col-auto {
  width: 20%;
}
.row .col-auto:nth-last-child(6),
.row .col-auto:nth-last-child(6) ~ .col-auto {
  width: 16.66666667%;
  width: -webkit-calc((100% - 16px*5) / 6);
  width: calc((100% - 16px*5) / 6);
}
.row.no-gutter .col-auto:nth-last-child(6),
.row.no-gutter .col-auto:nth-last-child(6) ~ .col-auto {
  width: 16.66666667%;
}
.row .col-auto:nth-last-child(7),
.row .col-auto:nth-last-child(7) ~ .col-auto {
  width: 14.28571429%;
  width: -webkit-calc((100% - 16px*6) / 7);
  width: calc((100% - 16px*6) / 7);
}
.row.no-gutter .col-auto:nth-last-child(7),
.row.no-gutter .col-auto:nth-last-child(7) ~ .col-auto {
  width: 14.28571429%;
}
.row .col-auto:nth-last-child(8),
.row .col-auto:nth-last-child(8) ~ .col-auto {
  width: 12.5%;
  width: -webkit-calc((100% - 16px*7) / 8);
  width: calc((100% - 16px*7) / 8);
}
.row.no-gutter .col-auto:nth-last-child(8),
.row.no-gutter .col-auto:nth-last-child(8) ~ .col-auto {
  width: 12.5%;
}
.row .col-auto:nth-last-child(9),
.row .col-auto:nth-last-child(9) ~ .col-auto {
  width: 11.11111111%;
  width: -webkit-calc((100% - 16px*8) / 9);
  width: calc((100% - 16px*8) / 9);
}
.row.no-gutter .col-auto:nth-last-child(9),
.row.no-gutter .col-auto:nth-last-child(9) ~ .col-auto {
  width: 11.11111111%;
}
.row .col-auto:nth-last-child(10),
.row .col-auto:nth-last-child(10) ~ .col-auto {
  width: 10%;
  width: -webkit-calc((100% - 16px*9) / 10);
  width: calc((100% - 16px*9) / 10);
}
.row.no-gutter .col-auto:nth-last-child(10),
.row.no-gutter .col-auto:nth-last-child(10) ~ .col-auto {
  width: 10%;
}
.row .col-auto:nth-last-child(11),
.row .col-auto:nth-last-child(11) ~ .col-auto {
  width: 9.09090909%;
  width: -webkit-calc((100% - 16px*10) / 11);
  width: calc((100% - 16px*10) / 11);
}
.row.no-gutter .col-auto:nth-last-child(11),
.row.no-gutter .col-auto:nth-last-child(11) ~ .col-auto {
  width: 9.09090909%;
}
.row .col-auto:nth-last-child(12),
.row .col-auto:nth-last-child(12) ~ .col-auto {
  width: 8.33333333%;
  width: -webkit-calc((100% - 16px*11) / 12);
  width: calc((100% - 16px*11) / 12);
}
.row.no-gutter .col-auto:nth-last-child(12),
.row.no-gutter .col-auto:nth-last-child(12) ~ .col-auto {
  width: 8.33333333%;
}
.row .col-auto:nth-last-child(13),
.row .col-auto:nth-last-child(13) ~ .col-auto {
  width: 7.69230769%;
  width: -webkit-calc((100% - 16px*12) / 13);
  width: calc((100% - 16px*12) / 13);
}
.row.no-gutter .col-auto:nth-last-child(13),
.row.no-gutter .col-auto:nth-last-child(13) ~ .col-auto {
  width: 7.69230769%;
}
.row .col-auto:nth-last-child(14),
.row .col-auto:nth-last-child(14) ~ .col-auto {
  width: 7.14285714%;
  width: -webkit-calc((100% - 16px*13) / 14);
  width: calc((100% - 16px*13) / 14);
}
.row.no-gutter .col-auto:nth-last-child(14),
.row.no-gutter .col-auto:nth-last-child(14) ~ .col-auto {
  width: 7.14285714%;
}
.row .col-auto:nth-last-child(15),
.row .col-auto:nth-last-child(15) ~ .col-auto {
  width: 6.66666667%;
  width: -webkit-calc((100% - 16px*14) / 15);
  width: calc((100% - 16px*14) / 15);
}
.row.no-gutter .col-auto:nth-last-child(15),
.row.no-gutter .col-auto:nth-last-child(15) ~ .col-auto {
  width: 6.66666667%;
}
.row .col-auto:nth-last-child(16),
.row .col-auto:nth-last-child(16) ~ .col-auto {
  width: 6.25%;
  width: -webkit-calc((100% - 16px*15) / 16);
  width: calc((100% - 16px*15) / 16);
}
.row.no-gutter .col-auto:nth-last-child(16),
.row.no-gutter .col-auto:nth-last-child(16) ~ .col-auto {
  width: 6.25%;
}
.row .col-auto:nth-last-child(17),
.row .col-auto:nth-last-child(17) ~ .col-auto {
  width: 5.88235294%;
  width: -webkit-calc((100% - 16px*16) / 17);
  width: calc((100% - 16px*16) / 17);
}
.row.no-gutter .col-auto:nth-last-child(17),
.row.no-gutter .col-auto:nth-last-child(17) ~ .col-auto {
  width: 5.88235294%;
}
.row .col-auto:nth-last-child(18),
.row .col-auto:nth-last-child(18) ~ .col-auto {
  width: 5.55555556%;
  width: -webkit-calc((100% - 16px*17) / 18);
  width: calc((100% - 16px*17) / 18);
}
.row.no-gutter .col-auto:nth-last-child(18),
.row.no-gutter .col-auto:nth-last-child(18) ~ .col-auto {
  width: 5.55555556%;
}
.row .col-auto:nth-last-child(19),
.row .col-auto:nth-last-child(19) ~ .col-auto {
  width: 5.26315789%;
  width: -webkit-calc((100% - 16px*18) / 19);
  width: calc((100% - 16px*18) / 19);
}
.row.no-gutter .col-auto:nth-last-child(19),
.row.no-gutter .col-auto:nth-last-child(19) ~ .col-auto {
  width: 5.26315789%;
}
.row .col-auto:nth-last-child(20),
.row .col-auto:nth-last-child(20) ~ .col-auto {
  width: 5%;
  width: -webkit-calc((100% - 16px*19) / 20);
  width: calc((100% - 16px*19) / 20);
}
.row.no-gutter .col-auto:nth-last-child(20),
.row.no-gutter .col-auto:nth-last-child(20) ~ .col-auto {
  width: 5%;
}
.row .col-auto:nth-last-child(21),
.row .col-auto:nth-last-child(21) ~ .col-auto {
  width: 4.76190476%;
  width: -webkit-calc((100% - 16px*20) / 21);
  width: calc((100% - 16px*20) / 21);
}
.row.no-gutter .col-auto:nth-last-child(21),
.row.no-gutter .col-auto:nth-last-child(21) ~ .col-auto {
  width: 4.76190476%;
}
@media all and (min-width: 768px) {
  .row .tablet-100 {
    width: 100%;
    width: -webkit-calc((100% - 16px*0) / 1);
    width: calc((100% - 16px*0) / 1);
  }
  .row.no-gutter .tablet-100 {
    width: 100%;
  }
  .row .tablet-95 {
    width: 95%;
    width: -webkit-calc((100% - 16px*0.05263157894736836) / 1.0526315789473684);
    width: calc((100% - 16px*0.05263157894736836) / 1.0526315789473684);
  }
  .row.no-gutter .tablet-95 {
    width: 95%;
  }
  .row .tablet-90 {
    width: 90%;
    width: -webkit-calc((100% - 16px*0.11111111111111116) / 1.1111111111111112);
    width: calc((100% - 16px*0.11111111111111116) / 1.1111111111111112);
  }
  .row.no-gutter .tablet-90 {
    width: 90%;
  }
  .row .tablet-85 {
    width: 85%;
    width: -webkit-calc((100% - 16px*0.17647058823529416) / 1.1764705882352942);
    width: calc((100% - 16px*0.17647058823529416) / 1.1764705882352942);
  }
  .row.no-gutter .tablet-85 {
    width: 85%;
  }
  .row .tablet-80 {
    width: 80%;
    width: -webkit-calc((100% - 16px*0.25) / 1.25);
    width: calc((100% - 16px*0.25) / 1.25);
  }
  .row.no-gutter .tablet-80 {
    width: 80%;
  }
  .row .tablet-75 {
    width: 75%;
    width: -webkit-calc((100% - 16px*0.33333333333333326) / 1.3333333333333333);
    width: calc((100% - 16px*0.33333333333333326) / 1.3333333333333333);
  }
  .row.no-gutter .tablet-75 {
    width: 75%;
  }
  .row .tablet-70 {
    width: 70%;
    width: -webkit-calc((100% - 16px*0.4285714285714286) / 1.4285714285714286);
    width: calc((100% - 16px*0.4285714285714286) / 1.4285714285714286);
  }
  .row.no-gutter .tablet-70 {
    width: 70%;
  }
  .row .tablet-66 {
    width: 66.66666666666666%;
    width: -webkit-calc((100% - 16px*0.5000000000000002) / 1.5000000000000002);
    width: calc((100% - 16px*0.5000000000000002) / 1.5000000000000002);
  }
  .row.no-gutter .tablet-66 {
    width: 66.66666666666666%;
  }
  .row .tablet-65 {
    width: 65%;
    width: -webkit-calc((100% - 16px*0.5384615384615385) / 1.5384615384615385);
    width: calc((100% - 16px*0.5384615384615385) / 1.5384615384615385);
  }
  .row.no-gutter .tablet-65 {
    width: 65%;
  }
  .row .tablet-60 {
    width: 60%;
    width: -webkit-calc((100% - 16px*0.6666666666666667) / 1.6666666666666667);
    width: calc((100% - 16px*0.6666666666666667) / 1.6666666666666667);
  }
  .row.no-gutter .tablet-60 {
    width: 60%;
  }
  .row .tablet-55 {
    width: 55%;
    width: -webkit-calc((100% - 16px*0.8181818181818181) / 1.8181818181818181);
    width: calc((100% - 16px*0.8181818181818181) / 1.8181818181818181);
  }
  .row.no-gutter .tablet-55 {
    width: 55%;
  }
  .row .tablet-50 {
    width: 50%;
    width: -webkit-calc((100% - 16px*1) / 2);
    width: calc((100% - 16px*1) / 2);
  }
  .row.no-gutter .tablet-50 {
    width: 50%;
  }
  .row .tablet-45 {
    width: 45%;
    width: -webkit-calc((100% - 16px*1.2222222222222223) / 2.2222222222222223);
    width: calc((100% - 16px*1.2222222222222223) / 2.2222222222222223);
  }
  .row.no-gutter .tablet-45 {
    width: 45%;
  }
  .row .tablet-40 {
    width: 40%;
    width: -webkit-calc((100% - 16px*1.5) / 2.5);
    width: calc((100% - 16px*1.5) / 2.5);
  }
  .row.no-gutter .tablet-40 {
    width: 40%;
  }
  .row .tablet-35 {
    width: 35%;
    width: -webkit-calc((100% - 16px*1.8571428571428572) / 2.857142857142857);
    width: calc((100% - 16px*1.8571428571428572) / 2.857142857142857);
  }
  .row.no-gutter .tablet-35 {
    width: 35%;
  }
  .row .tablet-33 {
    width: 33.333333333333336%;
    width: -webkit-calc((100% - 16px*2) / 3);
    width: calc((100% - 16px*2) / 3);
  }
  .row.no-gutter .tablet-33 {
    width: 33.333333333333336%;
  }
  .row .tablet-30 {
    width: 30%;
    width: -webkit-calc((100% - 16px*2.3333333333333335) / 3.3333333333333335);
    width: calc((100% - 16px*2.3333333333333335) / 3.3333333333333335);
  }
  .row.no-gutter .tablet-30 {
    width: 30%;
  }
  .row .tablet-25 {
    width: 25%;
    width: -webkit-calc((100% - 16px*3) / 4);
    width: calc((100% - 16px*3) / 4);
  }
  .row.no-gutter .tablet-25 {
    width: 25%;
  }
  .row .tablet-20 {
    width: 20%;
    width: -webkit-calc((100% - 16px*4) / 5);
    width: calc((100% - 16px*4) / 5);
  }
  .row.no-gutter .tablet-20 {
    width: 20%;
  }
  .row .tablet-15 {
    width: 15%;
    width: -webkit-calc((100% - 16px*5.666666666666667) / 6.666666666666667);
    width: calc((100% - 16px*5.666666666666667) / 6.666666666666667);
  }
  .row.no-gutter .tablet-15 {
    width: 15%;
  }
  .row .tablet-10 {
    width: 10%;
    width: -webkit-calc((100% - 16px*9) / 10);
    width: calc((100% - 16px*9) / 10);
  }
  .row.no-gutter .tablet-10 {
    width: 10%;
  }
  .row .tablet-5 {
    width: 5%;
    width: -webkit-calc((100% - 16px*19) / 20);
    width: calc((100% - 16px*19) / 20);
  }
  .row.no-gutter .tablet-5 {
    width: 5%;
  }
  .row .tablet-auto:nth-last-child(1),
  .row .tablet-auto:nth-last-child(1) ~ .col-auto {
    width: 100%;
    width: -webkit-calc((100% - 16px*0) / 1);
    width: calc((100% - 16px*0) / 1);
  }
  .row.no-gutter .tablet-auto:nth-last-child(1),
  .row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto {
    width: 100%;
  }
  .row .tablet-auto:nth-last-child(2),
  .row .tablet-auto:nth-last-child(2) ~ .col-auto {
    width: 50%;
    width: -webkit-calc((100% - 16px*1) / 2);
    width: calc((100% - 16px*1) / 2);
  }
  .row.no-gutter .tablet-auto:nth-last-child(2),
  .row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto {
    width: 50%;
  }
  .row .tablet-auto:nth-last-child(3),
  .row .tablet-auto:nth-last-child(3) ~ .col-auto {
    width: 33.33333333%;
    width: -webkit-calc((100% - 16px*2) / 3);
    width: calc((100% - 16px*2) / 3);
  }
  .row.no-gutter .tablet-auto:nth-last-child(3),
  .row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto {
    width: 33.33333333%;
  }
  .row .tablet-auto:nth-last-child(4),
  .row .tablet-auto:nth-last-child(4) ~ .col-auto {
    width: 25%;
    width: -webkit-calc((100% - 16px*3) / 4);
    width: calc((100% - 16px*3) / 4);
  }
  .row.no-gutter .tablet-auto:nth-last-child(4),
  .row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto {
    width: 25%;
  }
  .row .tablet-auto:nth-last-child(5),
  .row .tablet-auto:nth-last-child(5) ~ .col-auto {
    width: 20%;
    width: -webkit-calc((100% - 16px*4) / 5);
    width: calc((100% - 16px*4) / 5);
  }
  .row.no-gutter .tablet-auto:nth-last-child(5),
  .row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto {
    width: 20%;
  }
  .row .tablet-auto:nth-last-child(6),
  .row .tablet-auto:nth-last-child(6) ~ .col-auto {
    width: 16.66666667%;
    width: -webkit-calc((100% - 16px*5) / 6);
    width: calc((100% - 16px*5) / 6);
  }
  .row.no-gutter .tablet-auto:nth-last-child(6),
  .row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto {
    width: 16.66666667%;
  }
  .row .tablet-auto:nth-last-child(7),
  .row .tablet-auto:nth-last-child(7) ~ .col-auto {
    width: 14.28571429%;
    width: -webkit-calc((100% - 16px*6) / 7);
    width: calc((100% - 16px*6) / 7);
  }
  .row.no-gutter .tablet-auto:nth-last-child(7),
  .row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto {
    width: 14.28571429%;
  }
  .row .tablet-auto:nth-last-child(8),
  .row .tablet-auto:nth-last-child(8) ~ .col-auto {
    width: 12.5%;
    width: -webkit-calc((100% - 16px*7) / 8);
    width: calc((100% - 16px*7) / 8);
  }
  .row.no-gutter .tablet-auto:nth-last-child(8),
  .row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto {
    width: 12.5%;
  }
  .row .tablet-auto:nth-last-child(9),
  .row .tablet-auto:nth-last-child(9) ~ .col-auto {
    width: 11.11111111%;
    width: -webkit-calc((100% - 16px*8) / 9);
    width: calc((100% - 16px*8) / 9);
  }
  .row.no-gutter .tablet-auto:nth-last-child(9),
  .row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto {
    width: 11.11111111%;
  }
  .row .tablet-auto:nth-last-child(10),
  .row .tablet-auto:nth-last-child(10) ~ .col-auto {
    width: 10%;
    width: -webkit-calc((100% - 16px*9) / 10);
    width: calc((100% - 16px*9) / 10);
  }
  .row.no-gutter .tablet-auto:nth-last-child(10),
  .row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto {
    width: 10%;
  }
  .row .tablet-auto:nth-last-child(11),
  .row .tablet-auto:nth-last-child(11) ~ .col-auto {
    width: 9.09090909%;
    width: -webkit-calc((100% - 16px*10) / 11);
    width: calc((100% - 16px*10) / 11);
  }
  .row.no-gutter .tablet-auto:nth-last-child(11),
  .row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto {
    width: 9.09090909%;
  }
  .row .tablet-auto:nth-last-child(12),
  .row .tablet-auto:nth-last-child(12) ~ .col-auto {
    width: 8.33333333%;
    width: -webkit-calc((100% - 16px*11) / 12);
    width: calc((100% - 16px*11) / 12);
  }
  .row.no-gutter .tablet-auto:nth-last-child(12),
  .row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto {
    width: 8.33333333%;
  }
  .row .tablet-auto:nth-last-child(13),
  .row .tablet-auto:nth-last-child(13) ~ .col-auto {
    width: 7.69230769%;
    width: -webkit-calc((100% - 16px*12) / 13);
    width: calc((100% - 16px*12) / 13);
  }
  .row.no-gutter .tablet-auto:nth-last-child(13),
  .row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto {
    width: 7.69230769%;
  }
  .row .tablet-auto:nth-last-child(14),
  .row .tablet-auto:nth-last-child(14) ~ .col-auto {
    width: 7.14285714%;
    width: -webkit-calc((100% - 16px*13) / 14);
    width: calc((100% - 16px*13) / 14);
  }
  .row.no-gutter .tablet-auto:nth-last-child(14),
  .row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto {
    width: 7.14285714%;
  }
  .row .tablet-auto:nth-last-child(15),
  .row .tablet-auto:nth-last-child(15) ~ .col-auto {
    width: 6.66666667%;
    width: -webkit-calc((100% - 16px*14) / 15);
    width: calc((100% - 16px*14) / 15);
  }
  .row.no-gutter .tablet-auto:nth-last-child(15),
  .row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto {
    width: 6.66666667%;
  }
  .row .tablet-auto:nth-last-child(16),
  .row .tablet-auto:nth-last-child(16) ~ .col-auto {
    width: 6.25%;
    width: -webkit-calc((100% - 16px*15) / 16);
    width: calc((100% - 16px*15) / 16);
  }
  .row.no-gutter .tablet-auto:nth-last-child(16),
  .row.no-gutter .tablet-auto:nth-last-child(16) ~ .tablet-auto {
    width: 6.25%;
  }
  .row .tablet-auto:nth-last-child(17),
  .row .tablet-auto:nth-last-child(17) ~ .col-auto {
    width: 5.88235294%;
    width: -webkit-calc((100% - 16px*16) / 17);
    width: calc((100% - 16px*16) / 17);
  }
  .row.no-gutter .tablet-auto:nth-last-child(17),
  .row.no-gutter .tablet-auto:nth-last-child(17) ~ .tablet-auto {
    width: 5.88235294%;
  }
  .row .tablet-auto:nth-last-child(18),
  .row .tablet-auto:nth-last-child(18) ~ .col-auto {
    width: 5.55555556%;
    width: -webkit-calc((100% - 16px*17) / 18);
    width: calc((100% - 16px*17) / 18);
  }
  .row.no-gutter .tablet-auto:nth-last-child(18),
  .row.no-gutter .tablet-auto:nth-last-child(18) ~ .tablet-auto {
    width: 5.55555556%;
  }
  .row .tablet-auto:nth-last-child(19),
  .row .tablet-auto:nth-last-child(19) ~ .col-auto {
    width: 5.26315789%;
    width: -webkit-calc((100% - 16px*18) / 19);
    width: calc((100% - 16px*18) / 19);
  }
  .row.no-gutter .tablet-auto:nth-last-child(19),
  .row.no-gutter .tablet-auto:nth-last-child(19) ~ .tablet-auto {
    width: 5.26315789%;
  }
  .row .tablet-auto:nth-last-child(20),
  .row .tablet-auto:nth-last-child(20) ~ .col-auto {
    width: 5%;
    width: -webkit-calc((100% - 16px*19) / 20);
    width: calc((100% - 16px*19) / 20);
  }
  .row.no-gutter .tablet-auto:nth-last-child(20),
  .row.no-gutter .tablet-auto:nth-last-child(20) ~ .tablet-auto {
    width: 5%;
  }
  .row .tablet-auto:nth-last-child(21),
  .row .tablet-auto:nth-last-child(21) ~ .col-auto {
    width: 4.76190476%;
    width: -webkit-calc((100% - 16px*20) / 21);
    width: calc((100% - 16px*20) / 21);
  }
  .row.no-gutter .tablet-auto:nth-last-child(21),
  .row.no-gutter .tablet-auto:nth-last-child(21) ~ .tablet-auto {
    width: 4.76190476%;
  }
}
/* === Views === */
.views,
.view {
  position: relative;
  height: 100%;
  z-index: 5000;
}
.views {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.view {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
/* === Pages === */
.pages {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.page.cached {
  display: none;
}
.page-on-left {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.page-on-right {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translate3d(0, 56px, 0);
  transform: translate3d(0, 56px, 0);
}
.page-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  z-index: 1;
}
.page-transitioning {
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.page-from-right-to-center {
  pointer-events: none;
  -webkit-animation: pageFromRightToCenter 300ms forwards;
  animation: pageFromRightToCenter 300ms forwards;
}
.page-from-center-to-right {
  pointer-events: none;
  -webkit-animation: pageFromCenterToRight 300ms forwards;
  animation: pageFromCenterToRight 300ms forwards;
}
@-webkit-keyframes pageFromRightToCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 56px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes pageFromRightToCenter {
  from {
    opacity: 0;
    transform: translate3d(0, 56px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes pageFromCenterToRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 56px, 0);
  }
}
@keyframes pageFromCenterToRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 56px, 0);
  }
}
.page-from-center-to-left {
  -webkit-animation: pageFromCenterToLeft 300ms forwards;
  animation: pageFromCenterToLeft 300ms forwards;
}
.page-from-left-to-center {
  -webkit-animation: pageFromLeftToCenter 300ms forwards;
  animation: pageFromLeftToCenter 300ms forwards;
}
@-webkit-keyframes pageFromCenterToLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes pageFromCenterToLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes pageFromLeftToCenter {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes pageFromLeftToCenter {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
/* === Toolbars === */
.navbar-inner,
.toolbar-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.navbar-inner {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.toolbar-inner {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.navbar-inner.cached {
  display: none;
}
.navbar,
.toolbar {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  z-index: 500;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: #fff;
}
.navbar b,
.toolbar b {
  font-weight: 500;
}
.navbar ~ .toolbar {
  z-index: 499;
}
.navbar,
.toolbar,
.subnavbar {
  background: #2196f3;
}
.navbar a.link,
.toolbar a.link,
.subnavbar a.link {
  text-decoration: none;
  position: relative;
  color: #fff;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 16px;
  min-width: 48px;
}
.navbar a.link:before,
.toolbar a.link:before,
.subnavbar a.link:before {
  content: '';
  width: 152%;
  height: 152%;
  position: absolute;
  left: -26%;
  top: -26%;
  background-image: -webkit-radial-gradient(center, circle cover, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%);
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
html:not(.watch-active-state) .navbar a.link:active:before,
html:not(.watch-active-state) .toolbar a.link:active:before,
html:not(.watch-active-state) .subnavbar a.link:active:before,
.navbar a.link.active-state:before,
.toolbar a.link.active-state:before,
.subnavbar a.link.active-state:before {
  opacity: 1;
  -webkit-transition-duration: 150ms;
  transition-duration: 150ms;
}
.navbar a.link i + span,
.toolbar a.link i + span,
.subnavbar a.link i + span,
.navbar a.link i + i,
.toolbar a.link i + i,
.subnavbar a.link i + i,
.navbar a.link span + i,
.toolbar a.link span + i,
.subnavbar a.link span + i,
.navbar a.link span + span,
.toolbar a.link span + span,
.subnavbar a.link span + span {
  margin-left: 8px;
}
.navbar a.icon-only,
.toolbar a.icon-only,
.subnavbar a.icon-only {
  min-width: 0;
  -webkit-box-flex: 0;
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
}
.navbar i.icon,
.toolbar i.icon,
.subnavbar i.icon {
  display: block;
}
.navbar .center,
.subnavbar .center {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 0 16px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 56px;
  display: inline-block;
  text-align: left;
}
.navbar .left,
.subnavbar .left,
.navbar .right,
.subnavbar .right {
  -webkit-box-flex: 0;
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.navbar .right,
.subnavbar .right {
  margin-left: auto;
}
.navbar .right:first-child,
.subnavbar .right:first-child {
  position: absolute;
  right: 16px;
  height: 100%;
}
.navbar {
  left: 0;
  top: 0;
  height: 56px;
  font-size: 20px;
}
.navbar a.link {
  line-height: 56px;
  height: 56px;
}
.popup .navbar {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.subnavbar {
  height: 48px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  box-sizing: border-box;
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
}
.subnavbar a.link {
  line-height: 48px;
  height: 48px;
}
.subnavbar .center {
  line-height: 48px;
}
.subnavbar .center:first-child {
  margin-left: 56px;
}
.navbar.no-border .subnavbar {
  margin-top: 0;
}
.navbar-on-left .subnavbar,
.navbar-on-right .subnavbar {
  pointer-events: none;
}
.navbar .subnavbar,
.page .subnavbar {
  position: absolute;
}
.page > .subnavbar {
  top: 0;
  margin-top: 0;
}
.subnavbar > .buttons-row {
  width: 100%;
}
.subnavbar .searchbar,
.subnavbar.searchbar {
  position: absolute;
}
.subnavbar.searchbar,
.subnavbar .searchbar {
  position: absolute;
}
.subnavbar .searchbar {
  left: 0;
  top: 0;
}
.toolbar {
  left: 0;
  bottom: 0;
  height: 48px;
  font-size: 14px;
}
.toolbar a.link {
  line-height: 48px;
  height: 48px;
}
.toolbar a {
  -webkit-box-flex: 1;
  -webkit-flex-shrink: 1;
  -ms-flex: 0 1 auto;
  flex-shrink: 1;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tabbar {
  z-index: 5001;
  overflow: hidden;
  bottom: auto;
  top: 0;
}
.tabbar .toolbar-inner {
  padding-left: 0;
  padding-right: 0;
}
.tabbar a.link {
  line-height: 1.4;
}
.tabbar a.tab-link,
.tabbar a.link {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex: 1;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  font-size: 14px;
  text-transform: uppercase;
}
.tabbar i.icon {
  height: 24px;
}
.tabbar a.tab-link {
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}
.tabbar a.tab-link.active,
html:not(.watch-active-state) .tabbar a.tab-link:active,
.tabbar a.tab-link.active-state {
  color: #ffffff;
}
.tabbar .tab-link-highlight {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #0a6ebd;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.tabbar-labels {
  height: 72px;
}
.tabbar-labels a.tab-link,
.tabbar-labels a.link {
  padding-top: 12px;
  padding-bottom: 12px;
  height: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.tabbar-labels span.tabbar-label {
  line-height: 1;
  display: block;
  margin: 0;
  margin-top: 10px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.tabbar-labels.toolbar-bottom span.tabbar-label {
  text-transform: none;
}
.tabbar-scrollable .toolbar-inner {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  overflow: auto;
}
.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}
.tabbar-scrollable a.tab-link,
.tabbar-scrollable a.link {
  width: auto;
  -webkit-box-flex: 0;
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  -ms-flex: 0;
  padding: 0 16px;
}
.toolbar-bottom {
  bottom: 0;
  top: auto;
}
.toolbar-bottom .tab-link-highlight {
  bottom: auto;
  top: 0;
}
.subnavbar input[type="text"],
.navbar input[type="text"],
.subnavbar input[type="password"],
.navbar input[type="password"],
.subnavbar input[type="search"],
.navbar input[type="search"],
.subnavbar input[type="email"],
.navbar input[type="email"],
.subnavbar input[type="tel"],
.navbar input[type="tel"],
.subnavbar input[type="url"],
.navbar input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  display: block;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border-radius: 0;
  font-family: inherit;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  background-color: transparent;
  padding: 0;
  border-bottom: 1px solid #fff;
}
.subnavbar input[type="text"]::-webkit-input-placeholder,
.navbar input[type="text"]::-webkit-input-placeholder,
.subnavbar input[type="password"]::-webkit-input-placeholder,
.navbar input[type="password"]::-webkit-input-placeholder,
.subnavbar input[type="search"]::-webkit-input-placeholder,
.navbar input[type="search"]::-webkit-input-placeholder,
.subnavbar input[type="email"]::-webkit-input-placeholder,
.navbar input[type="email"]::-webkit-input-placeholder,
.subnavbar input[type="tel"]::-webkit-input-placeholder,
.navbar input[type="tel"]::-webkit-input-placeholder,
.subnavbar input[type="url"]::-webkit-input-placeholder,
.navbar input[type="url"]::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 1;
}
/* === Relation between toolbar/navbar types and pages === */
.page > .navbar,
.view > .navbar,
.views > .navbar,
.page > .toolbar,
.view > .toolbar,
.views > .toolbar {
  position: absolute;
}
.subnavbar ~ .page-content {
  padding-top: 48px;
}
.toolbar-fixed .page-content,
.tabbar-fixed .page-content {
  padding-top: 48px;
}
.tabbar-labels-fixed .page-content {
  padding-top: 72px;
}
.toolbar ~ .page-content {
  padding-top: 48px;
}
.tabbar-labels ~ .page-content {
  padding-top: 72px;
}
.toolbar-bottom ~ .page-content,
.messagebar ~ .page-content,
.toolbar-bottom ~ .pages .page-content,
.messagebar ~ .pages .page-content,
.toolbar-bottom ~ .view .page-content,
.messagebar ~ .view .page-content {
  padding-top: 0;
  padding-bottom: 48px;
}
.tabbar-labels.toolbar-bottom ~ .page-content,
.tabbar-labels.toolbar-bottom ~ .pages .page-content,
.tabbar-labels.toolbar-bottom ~ .page .page-content,
.tabbar-labels.toolbar-bottom ~ .view .page-content {
  padding-bottom: 72px;
}
.navbar-fixed .page-content,
.navbar-through .page-content,
.navbar-fixed.pages .page-content,
.navbar-through.pages .page-content,
.navbar-fixed.view .page-content,
.navbar-through.view .page-content {
  padding-top: 56px;
}
.navbar-fixed.toolbar-fixed .page-content,
.navbar-through.toolbar-fixed .page-content,
.navbar-fixed.tabbar-fixed .page-content,
.navbar-through.tabbar-fixed .page-content,
.navbar-fixed .toolbar-fixed .page-content,
.navbar-through .toolbar-fixed .page-content,
.navbar-fixed .tabbar-fixed .page-content,
.navbar-through .tabbar-fixed .page-content,
.toolbar-fixed .navbar-fixed .page-content,
.toolbar-fixed .navbar-through .page-content,
.tabbar-fixed .navbar-fixed .page-content,
.tabbar-fixed .navbar-through .page-content {
  padding-top: 104px;
}
.navbar-fixed.toolbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-through.toolbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-fixed.tabbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-through.tabbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-fixed .toolbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-through .toolbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-fixed .tabbar-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-through .tabbar-fixed .toolbar-bottom ~ .pages .page-content,
.toolbar-fixed .navbar-fixed .toolbar-bottom ~ .pages .page-content,
.toolbar-fixed .navbar-through .toolbar-bottom ~ .pages .page-content,
.tabbar-fixed .navbar-fixed .toolbar-bottom ~ .pages .page-content,
.tabbar-fixed .navbar-through .toolbar-bottom ~ .pages .page-content,
.navbar-fixed.toolbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-through.toolbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-fixed.tabbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-through.tabbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-fixed .toolbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-through .toolbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-fixed .tabbar-fixed .toolbar-bottom ~ .view .page-content,
.navbar-through .tabbar-fixed .toolbar-bottom ~ .view .page-content,
.toolbar-fixed .navbar-fixed .toolbar-bottom ~ .view .page-content,
.toolbar-fixed .navbar-through .toolbar-bottom ~ .view .page-content,
.tabbar-fixed .navbar-fixed .toolbar-bottom ~ .view .page-content,
.tabbar-fixed .navbar-through .toolbar-bottom ~ .view .page-content {
  padding-top: 56px;
}
.navbar-fixed.tabbar-labels-fixed .page-content,
.navbar-through.tabbar-labels-fixed .page-content,
.navbar-fixed .tabbar-labels-fixed .page-content,
.navbar-through .tabbar-labels-fixed .page-content,
.tabbar-labels-fixed .navbar-fixed .page-content,
.tabbar-labels-fixed .navbar-through .page-content {
  padding-top: 128px;
}
.navbar-fixed.tabbar-labels-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-through.tabbar-labels-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-fixed .tabbar-labels-fixed .toolbar-bottom ~ .pages .page-content,
.navbar-through .tabbar-labels-fixed .toolbar-bottom ~ .pages .page-content,
.tabbar-labels-fixed .navbar-fixed .toolbar-bottom ~ .pages .page-content,
.tabbar-labels-fixed .navbar-through .toolbar-bottom ~ .pages .page-content,
.navbar-fixed.tabbar-labels-fixed .toolbar-bottom ~ .view .page-content,
.navbar-through.tabbar-labels-fixed .toolbar-bottom ~ .view .page-content,
.navbar-fixed .tabbar-labels-fixed .toolbar-bottom ~ .view .page-content,
.navbar-through .tabbar-labels-fixed .toolbar-bottom ~ .view .page-content,
.tabbar-labels-fixed .navbar-fixed .toolbar-bottom ~ .view .page-content,
.tabbar-labels-fixed .navbar-through .toolbar-bottom ~ .view .page-content {
  padding-top: 56px;
}
.navbar-fixed .toolbar ~ .page-content,
.navbar-through .toolbar ~ .page-content {
  padding-top: 104px;
}
.navbar-fixed .messagebar ~ .page-content,
.navbar-through .messagebar ~ .page-content,
.navbar-fixed .toolbar-bottom ~ .page-content,
.navbar-through .toolbar-bottom ~ .page-content {
  padding-top: 56px;
}
.navbar-fixed .tabbar-labels ~ .page-content,
.navbar-through .tabbar-labels ~ .page-content {
  padding-top: 128px;
}
.navbar-fixed .tabbar-labels.toolbar-bottom ~ .page-content,
.navbar-through .tabbar-labels.toolbar-bottom ~ .page-content {
  padding-top: 56px;
}
.navbar-fixed .with-subnavbar .page-content,
.navbar-through .with-subnavbar .page-content,
.navbar-fixed .page-content.with-subnavbar,
.navbar-through .page-content.with-subnavbar,
.navbar-fixed .subnavbar ~ .page-content,
.navbar-through .subnavbar ~ .page-content {
  padding-top: 104px;
}
.navbar-fixed .page .subnavbar,
.navbar-through .page .subnavbar,
.navbar-fixed.page .subnavbar,
.navbar-through.page .subnavbar {
  top: 56px;
}
.navbar-fixed .toolbar,
.navbar-through .toolbar {
  top: 56px;
}
.navbar-fixed .messagebar,
.navbar-through .messagebar,
.navbar-fixed .toolbar-bottom,
.navbar-through .toolbar-bottom {
  top: auto;
}
.navbar.navbar-hiding {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.navbar.navbar-hiding ~ .page-content .list-group-title,
.navbar.navbar-hiding ~ .pages .list-group-title,
.navbar.navbar-hiding ~ .page .list-group-title {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.navbar-hiding ~ .page-content .subnavbar,
.navbar.navbar-hiding ~ .pages .subnavbar,
.navbar.navbar-hiding ~ .page .subnavbar {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.navbar-hiding ~ .subnavbar,
.navbar.navbar-hiding ~ .toolbar {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.navbar-hidden {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.navbar.navbar-hidden ~ .page-content .list-group-title,
.navbar.navbar-hidden ~ .pages .list-group-title,
.navbar.navbar-hidden ~ .page .list-group-title {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  top: -56px;
}
.navbar.navbar-hidden ~ .page-content .subnavbar,
.navbar.navbar-hidden ~ .pages .subnavbar,
.navbar.navbar-hidden ~ .page .subnavbar {
  -webkit-transform: translate3d(0, -56px, 0);
  transform: translate3d(0, -56px, 0);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.navbar-hidden ~ .subnavbar,
.navbar.navbar-hidden ~ .toolbar:not(.messagebar):not(.toolbar-bottom) {
  -webkit-transform: translate3d(0, -56px, 0);
  transform: translate3d(0, -56px, 0);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.navbar.not-animated {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
.page.no-navbar .page-content {
  padding-top: 0;
}
.page.no-navbar.with-subnavbar .page-content,
.with-subnavbar .page.no-navbar .page-content,
.page.no-navbar .page-content.with-subnavbar {
  padding-top: 48px;
}
.toolbar.toolbar-hiding,
.tabbar.toolbar-hiding,
.toolbar.tabbar-hiding,
.tabbar.tabbar-hiding {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.toolbar.toolbar-hidden,
.tabbar.toolbar-hidden,
.toolbar.tabbar-hidden,
.tabbar.tabbar-hidden {
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.toolbar.not-animated,
.tabbar.not-animated {
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
}
.toolbar.toolbar-hidden,
.tabbar.toolbar-hidden,
.toolbar.tabbar-hidden,
.tabbar.tabbar-hidden {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.navbar ~ .toolbar.toolbar-hidden:not(.messagebar):not(.toolbar-bottom),
.navbar ~ .tabbar.toolbar-hidden:not(.messagebar):not(.toolbar-bottom),
.navbar ~ .toolbar.tabbar-hidden,
.navbar ~ .tabbar.tabbar-hidden {
  -webkit-transform: translate3d(0, -104px, 0);
  transform: translate3d(0, -104px, 0);
}
.navbar ~ .toolbar.tabbar-labels.toolbar-hidden,
.navbar ~ .tabbar.tabbar-labels.toolbar-hidden {
  -webkit-transform: translate3d(0, -128px, 0);
  transform: translate3d(0, -128px, 0);
}
.toolbar.toolbar-hidden.messagebar,
.tabbar.toolbar-hidden.messagebar,
.toolbar.toolbar-hidden.toolbar-bottom,
.tabbar.toolbar-hidden.toolbar-bottom {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.page.no-toolbar .page-content,
.page.no-tabbar .page-content {
  padding-bottom: 0;
}
.navbar.no-shadow,
.toolbar.no-shadow {
  box-shadow: none !important;
}
.navbar-fixed .subnavbar,
.navbar-through .subnavbar {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.navbar-fixed .navbar,
.navbar-through .navbar {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.navbar-fixed .navbar.navbar-hidden,
.navbar-through .navbar.navbar-hidden {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0), 0px 4px 5px 0px rgba(0, 0, 0, 0), 0px 1px 10px 0px rgba(0, 0, 0, 0) !important;
}
.toolbar-fixed .toolbar,
.tabbar-fixed .toolbar,
.tabbar-labels-fixed .toolbar {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.toolbar-fixed .toolbar.toolbar-hidden,
.tabbar-fixed .toolbar.toolbar-hidden,
.tabbar-labels-fixed .toolbar.toolbar-hidden {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0), 0px 4px 5px 0px rgba(0, 0, 0, 0), 0px 1px 10px 0px rgba(0, 0, 0, 0) !important;
}
.toolbar-fixed .toolbar-bottom,
.tabbar-fixed .toolbar-bottom,
.tabbar-labels-fixed .toolbar-bottom,
.toolbar-bottom {
  box-shadow: 0px -2px 4px -1px rgba(0, 0, 0, 0.2), 0px -4px 5px 0px rgba(0, 0, 0, 0.14), 0px -1px 10px 0px rgba(0, 0, 0, 0.12);
}
.toolbar-bottom.toolbar-hidden {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0), 0px 4px 5px 0px rgba(0, 0, 0, 0), 0px 1px 10px 0px rgba(0, 0, 0, 0) !important;
}
.navbar-fixed.toolbar-fixed .navbar,
.navbar-through.toolbar-fixed .navbar,
.navbar-fixed .toolbar-fixed .navbar,
.navbar-through .toolbar-fixed .navbar,
.navbar-fixed.tabbar-fixed .navbar,
.navbar-through.tabbar-fixed .navbar,
.navbar-fixed .tabbar-fixed .navbar,
.navbar-through .tabbar-fixed .navbar,
.navbar-fixed.tabbar-labels-fixed .navbar,
.navbar-through.tabbar-labels-fixed .navbar,
.navbar-fixed .tabbar-labels-fixed .navbar,
.navbar-through .tabbar-labels-fixed .navbar {
  box-shadow: none;
}
/* === Search Bar === */
.searchbar {
  height: 48px;
  width: 100%;
  background: #2196f3;
  box-sizing: border-box;
  padding: 0 16px;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: #fff;
}
.searchbar.no-shadow {
  box-shadow: none;
}
.searchbar a {
  position: relative;
  color: #fff;
}
.searchbar a:before {
  content: '';
  width: 152%;
  height: 152%;
  position: absolute;
  left: -26%;
  top: -26%;
  background-image: -webkit-radial-gradient(center, circle cover, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%);
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
html:not(.watch-active-state) .searchbar a:active:before,
.searchbar a.active-state:before {
  opacity: 1;
  -webkit-transition-duration: 150ms;
  transition-duration: 150ms;
}
.searchbar .searchbar-input {
  width: 100%;
  height: 32px;
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex-shrink: 1;
  -ms-flex: 0 1 auto;
  flex-shrink: 1;
}
.searchbar input[type="search"] {
  box-sizing: border