/*!
 * Materialize v1.0.0 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */

.materialize-red {
  background-color: #e51c23 !important;
}

.materialize-red-text {
  color: #e51c23 !important;
}

.materialize-red.darken-1 {
  background-color: #d0181e !important;
}

.materialize-red-text.text-darken-1 {
  color: #d0181e !important;
}

.materialize-red.darken-2 {
  background-color: #b9151b !important;
}

.materialize-red-text.text-darken-2 {
  color: #b9151b !important;
}

.materialize-red.darken-3 {
  background-color: #a21318 !important;
}

.materialize-red-text.text-darken-3 {
  color: #a21318 !important;
}

.materialize-red.darken-4 {
  background-color: #8b1014 !important;
}

.materialize-red-text.text-darken-4 {
  color: #8b1014 !important;
}

.red {
  background-color: #f44336 !important;
}

.red-text {
  color: #f44336 !important;
}

.red.darken-1 {
  background-color: #e53935 !important;
}

.red-text.text-darken-1 {
  color: #e53935 !important;
}

.red.darken-2 {
  background-color: #d32f2f !important;
}

.red-text.text-darken-2 {
  color: #d32f2f !important;
}

.red.darken-3 {
  background-color: #c62828 !important;
}

.red-text.text-darken-3 {
  color: #c62828 !important;
}

.red.darken-4 {
  background-color: #b71c1c !important;
}

.red-text.text-darken-4 {
  color: #b71c1c !important;
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15;

  /* 1 */
  -ms-text-size-adjust: 100%;

  /* 2 */
  -webkit-text-size-adjust: 100%;

  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

header,
nav,
section {
  display: block;
}

a {
  background-color: transparent;

  /* 1 */
  -webkit-text-decoration-skip: objects;

  /* 2 */
}



/* Forms
   ========================================================================== */



/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
  transition-duration: var(--theme-transi-dura);
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;

  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

a {
  color: #039be5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 2dp elevation modified */

nav,
.btn,
.btn-large,
.btn-floating {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn:hover,
.btn-large:hover,
.btn-floating:hover {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

i {
  line-height: inherit;
}

i.left {
  float: left;
  margin-right: 15px;
}

i.right {
  float: right;
  margin-left: 15px;
}

@media only screen and (max-width: 992px) {
  i.right {
    margin-left: 0;
  }
}

i.large {
  font-size: 6rem;
}

/*********************
  Transition Classes
**********************/

/*********************
  Media Query Classes
**********************/

@media only screen and (max-width: 992px) {
  #faqButton,
  #statsButton,
  #settingsButton,
  #onboardingButton {
    font-size: 0;
  }
}

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

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

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

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

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

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

@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

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

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

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

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

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

/*******************
  Utility Classes
*******************/

.hide {
  display: none !important;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}


/* This is needed for some mobile phones to display the Google Icon font properly */

.material-icons {
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container {
    width: 70%;
  }
}

.section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

nav {
  color: #fff;
  background-color: transparent;
  width: 100%;
  height: 56px;
  line-height: 56px;
  overflow: hidden;
}

nav a {
  color: #fff;
}

nav i,
nav [class^="mdi-"],
nav [class*="mdi-"],
nav i.material-icons {
  display: block;
  font-size: 24px;
  height: 56px;
  line-height: 56px;
  color: var(--font-color);
}

nav .nav-wrapper {
  position: relative;
  height: 100%;
  transition-duration: var(--theme-transi-dura);
}

nav .brand-logo {
  position: absolute;
  color: var(--font-color);
  display: inline-block;
  font-size: 2.1rem;
  padding: 0;
}

@media only screen and (max-width: 600px) {
  .brand-logo span {
    display: none;
  }

  .brand-logo img {
    height: 50px;
  }
}

nav .brand-logo.right {
  right: 0.5rem;
  padding: 0;
}

nav .brand-logo i,
nav .brand-logo [class^="mdi-"],
nav .brand-logo [class*="mdi-"],
nav .brand-logo i.material-icons {
  float: left;
  margin-right: 15px;
}

nav .nav-title {
  display: inline-block;
  font-size: 32px;
  padding: 28px 0;
}

nav ul {
  margin: 0;
}

nav ul li {
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  float: left;
  padding: 0;
}

nav ul a {
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  font-size: 1rem;
  color: #fff;
  display: block;
  padding: 0 15px;
  cursor: pointer;
}

nav ul a.btn,
nav ul a.btn-large,
nav ul a.btn-large,
nav ul a.btn-floating {
  margin-top: -2px;
  margin-left: 15px;
  margin-right: 15px;
}

@media only screen and (max-width: 993px) {
  nav ul a.btn,
  nav ul a.btn-large,
  nav ul a.btn-large,
  nav ul a.btn-floating {
    margin-top: -2px;
    margin-left: 0;
    margin-right: 15px;
    padding: 0 8px;
    letter-spacing: 0;
  }
}

nav ul a.btn > .material-icons,
nav ul a.btn-large > .material-icons,
nav ul a.btn-large > .material-icons,
nav ul a.btn-floating > .material-icons {
  height: inherit;
  line-height: inherit;
}

nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

nav ul.left {
  float: left;
}

nav form {
  height: 100%;
}

@media only screen and (min-width: 601px) {
  nav,
  nav .nav-wrapper i {
    height: 64px;
    line-height: 64px;
  }
}

a {
  text-decoration: none;
}

html {
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
}

@media only screen and (min-width: 0) {
  html {
    font-size: 14px;
  }
}

@media only screen and (min-width: 992px) {
  html {
    font-size: 14.5px;
  }
}

@media only screen and (min-width: 1200px) {
  html {
    font-size: 15px;
  }
}

.btn,
.btn-large {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled,
.btn-large:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn[disabled],
.btn-large[disabled],
.btn-floating[disabled],
.btn-large[disabled] {
  pointer-events: none;
  background-color: #dfdfdf !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #9f9f9f !important;
  cursor: default;
}

.btn:disabled:hover,
.btn-large:disabled:hover,
.btn-floating:disabled:hover,
.btn-large:disabled:hover,
.btn[disabled]:hover,
.btn-large[disabled]:hover,
.btn-floating[disabled]:hover,
.btn-large[disabled]:hover {
  background-color: #dfdfdf !important;
  color: #9f9f9f !important;
}

.btn,
.btn-large,
.btn-floating,
.btn-large {
  font-size: 14px;
  outline: 0;
}

.btn i,
.btn-large i,
.btn-floating i,
.btn-large i {
  font-size: 1.3rem;
  line-height: inherit;
}

.btn:focus,
.btn-large:focus,
.btn-floating:focus {
  background-color: colorShade(var(--btn-icon-color), 20);
}

.btn,
.btn-large {
  text-decoration: none;
  color: var(--font-color);
  background-color: var(--btn-icon-color);
  text-align: center;
  letter-spacing: 0.5px;
  -webkit-transition: var(--theme-transi-dura) ease-out;
  transition: var(--theme-transi-dura) ease-out;
  cursor: pointer;
}

.btn:hover,
.btn-large:hover {
  background-color: var(--btn-icon-hover-color);
}

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  background-color: var(--btn-icon-color);
  border-radius: 50%;
  -webkit-transition: var(--theme-transi-dura);
  transition: var(--theme-transi-dura);
  cursor: pointer;
  vertical-align: middle;
}

.btn-floating:hover {
  background-color: var(--btn-icon-color);
}

.btn-floating::before {
  border-radius: 0;
}

.btn-floating.btn-large {
  width: 56px;
  height: 56px;
  padding: 0;
}

.btn-floating.btn-large i {
  line-height: 56px;
}

.btn-floating i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: var(--font-color);
  font-size: 1.6rem;
  line-height: 40px;
}

button.btn-floating {
  border: none;
}

.btn-large {
  height: 54px;
  line-height: 54px;
  font-size: 15px;
  padding: 0 28px;
}

.btn-large i {
  font-size: 1.6rem;
}

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */

.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  -webkit-transition: opacity var(--focus-transi-dura) ease-out, var(--highlight-transi-dura) background-color ease-out;
  transition: opacity var(--focus-transi-dura) ease-out, var(--highlight-transi-dura) background-color ease-out;
}

.waves-effect input[type="button"],
.waves-effect input[type="reset"],
.waves-effect input[type="submit"] {
  border: 0;
  font-style: normal;
  font-size: inherit;
  text-transform: inherit;
  background: none;
}

.waves-effect img {
  position: relative;
  z-index: -1;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Firefox Bug: link not triggered */

select:focus {
  outline: 1px solid colorShade(var(--page-bg-color), 100);
}

/* Text Inputs + Textarea
   ========================================================================== */

/* Style Placeholders */

::-webkit-input-placeholder {
  color: #d1d1d1;
}

::-moz-placeholder {
  color: #d1d1d1;
}

:-ms-input-placeholder {
  color: #d1d1d1;
}

::-ms-input-placeholder {
  color: #d1d1d1;
}

::placeholder {
  color: #d1d1d1;
}


/***************
    Nav List
***************/

/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

/*************************   */

/* STYLES FOR THE SPINNER */

/*************************   */

/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name, * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
  }

  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
  }

  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
  }

  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
  }

  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
  }

  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
  }

  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
  }

  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
  }

  /* 4   * ARCSIZE */
}

@keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }

  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
  }

  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg);
  }

  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg);
  }

  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
  }

  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }

  /* 4   * ARCSIZE */
}

@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  26% {
    opacity: 0;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  26% {
    opacity: 0;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  51% {
    opacity: 0;
  }
}

@keyframes red-fade-in-out {
  from {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  51% {
    opacity: 0;
  }
}

@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  76% {
    opacity: 0;
  }
}

@keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  76% {
    opacity: 0;
  }
}

@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes green-fade-in-out {
  from {
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
  }

  50% {
    -webkit-transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(130deg);
  }
}

@keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }

  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
  }

  50% {
    -webkit-transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-130deg);
  }
}

@keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }

  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

/* Modal */

/* Date Display */

/* Calendar */

/* Footer */

/* Media Queries */

/* Timepicker Containers */

/* Clock Digital Display */

/* Analog Clock Display */

/* Footer */

/* Media Queries */