/* Assets */
/* ---------------------------------------------------------------------------------------------------- */
/* Import */
/* ---------------------------------------------------------------------------------------------------- */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/* Sputnik
   ========================================================================== */
:focus {
  outline-color: transparent;
  outline-style: none; }

/* Fonts */
/* ---------------------------------------------------------------------------------------------------- */
/* Open Sans */
/* ------------------------------------------------------------------------------------------------ */
/* Font - Open Sans */
/* ---------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/assets/fonts/open-sans/open-sans-v17-latin-300.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local("Open Sans Light Italic"), local("OpenSans-LightItalic"), url(/assets/fonts/open-sans/open-sans-v17-latin-300italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url(/assets/fonts/open-sans/open-sans-v17-latin-regular.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url(/assets/fonts/open-sans/open-sans-v17-latin-italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(/assets/fonts/open-sans/open-sans-v17-latin-600.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local("Open Sans SemiBold Italic"), local("OpenSans-SemiBoldItalic"), url(/assets/fonts/open-sans/open-sans-v17-latin-600italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/assets/fonts/open-sans/open-sans-v17-latin-700.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url(/assets/fonts/open-sans/open-sans-v17-latin-700italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local("Open Sans ExtraBold"), local("OpenSans-ExtraBold"), url(/assets/fonts/open-sans/open-sans-v17-latin-800.woff2) format("woff2"); }

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local("Open Sans ExtraBold Italic"), local("OpenSans-ExtraBoldItalic"), url(/assets/fonts/open-sans/open-sans-v17-latin-800italic.woff2) format("woff2"); }

/* Zilla Slab */
/* ------------------------------------------------------------------------------------------------ */
/* Font - Zilla Slab */
/* ---------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 300;
  src: local("Zilla Slab Light"), local("ZillaSlab-Light"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-300.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 300;
  src: local("Zilla Slab Light Italic"), local("ZillaSlab-LightItalic"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-300italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 400;
  src: local("Zilla Slab"), local("ZillaSlab-Regular"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-regular.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 400;
  src: local("Zilla Slab Italic"), local("ZillaSlab-Italic"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 500;
  src: local("Zilla Slab Medium"), local("ZillaSlab-Medium"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-500.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 500;
  src: local("Zilla Slab Medium Italic"), local("ZillaSlab-MediumItalic"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-500italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  src: local("Zilla Slab SemiBold"), local("ZillaSlab-SemiBold"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-600.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 600;
  src: local("Zilla Slab SemiBold Italic"), local("ZillaSlab-SemiBoldItalic"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-600italic.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  src: local("Zilla Slab Bold"), local("ZillaSlab-Bold"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-700.woff2) format("woff2"); }

@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 700;
  src: local("Zilla Slab Bold Italic"), local("ZillaSlab-BoldItalic"), url(/assets/fonts/zilla-slab/zilla-slab-v5-latin-700italic.woff2) format("woff2"); }

/* Tint */
/* ---------------------------------------------------------------------------------------------------- */
/* Shade */
/* ---------------------------------------------------------------------------------------------------- */
/* Fast Touch */
/* ---------------------------------------------------------------------------------------------------- */
/* Font Zilla */
/* ---------------------------------------------------------------------------------------------------- */
/* Font Open Sans */
/* ---------------------------------------------------------------------------------------------------- */
/* Safe Area - Padding Top */
/* ---------------------------------------------------------------------------------------------------- */
/* Safe Area - Padding Bottom */
/* ---------------------------------------------------------------------------------------------------- */
/* Safe Area - Padding Header */
/* ---------------------------------------------------------------------------------------------------- */
/* Safe Area - Padding Header Large */
/* ---------------------------------------------------------------------------------------------------- */
/* Safe Area - Padding Footer */
/* ---------------------------------------------------------------------------------------------------- */
/* Scroll */
/* ---------------------------------------------------------------------------------------------------- */
/* Gradient Background */
/* ---------------------------------------------------------------------------------------------------- */
/* Gradient Background Old */
/* ---------------------------------------------------------------------------------------------------- */
/* Gradient Background Size */
/* ---------------------------------------------------------------------------------------------------- */
/* Overlay Scale */
/* ---------------------------------------------------------------------------------------------------- */
/* Fonts */
/* ---------------------------------------------------------------------------------------------------- */
/* Device */
/* ---------------------------------------------------------------------------------------------------- */
/* Animation */
/* ---------------------------------------------------------------------------------------------------- */
/* iOS Color Palette */
/* ---------------------------------------------------------------------------------------------------- */
/* Color Palette - Dark */
/* ---------------------------------------------------------------------------------------------------- */
/* Color Palette - Primary */
/* ---------------------------------------------------------------------------------------------------- */
/* Color Palette - Accent */
/* ---------------------------------------------------------------------------------------------------- */
/* Color Palette - Tertiary */
/* ---------------------------------------------------------------------------------------------------- */
/* Color Palette - Others */
/* ---------------------------------------------------------------------------------------------------- */
/* HTML */
/* ---------------------------------------------------------------------------------------------------- */
html {
  position: relative;
  display: block;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100vh;
  /* Overflow */
  /* ------------------------------------------------------------------------------------------------ */
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  /* Mobile Text Size Adjust */
  /* ------------------------------------------------------------------------------------------------ */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* Mobile Text Size Adjust */
  /* ------------------------------------------------------------------------------------------------ */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  /* Standalone Web App */
  /* ------------------------------------------------------------------------------------------------ */ }
  @supports (height: constant(safe-area-inset-top)) {
    html {
      --safe-area-inset-top:    constant( safe-area-inset-top    );
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      height: calc( 100% + var( --safe-area-inset-top ) + var( --safe-area-inset-bottom )); } }
  @supports (height: env(safe-area-inset-top)) {
    html {
      --safe-area-inset-top:    env( safe-area-inset-top );
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      height: calc( 100% + var( --safe-area-inset-top ) + var( --safe-area-inset-bottom )); } }
  @supports (height: constant(safe-area-inset-top)) {
    html.platform-ios.platform-standalone {
      --safe-area-inset-top: constant( safe-area-inset-top );
      height: calc( 100% + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    html.platform-ios.platform-standalone {
      --safe-area-inset-top: env( safe-area-inset-top );
      height: calc( 100% + var( --safe-area-inset-top )); } }

/* Body */
/* ---------------------------------------------------------------------------------------------------- */
body {
  position: relative;
  display: block;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100vh;
  /* Overflow */
  /* ------------------------------------------------------------------------------------------------ */
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  /* Mobile Tap Highlight */
  /* ------------------------------------------------------------------------------------------------ */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* Remove WhiteSpace */
  /* ------------------------------------------------------------------------------------------------ */
  font-size: 0px;
  line-height: 0px;
  letter-spacing: 0px;
  /* No User Select */
  /* ------------------------------------------------------------------------------------------------ */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Imports */
/* ---------------------------------------------------------------------------------------------------- */
/* App */
/* ---------------------------------------------------------------------------------------------------- */
/* App - Container */
/* ---------------------------------------------------------------------------------------------------- */
.app-container {
  position: relative;
  display: block;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Imports */
  /* ------------------------------------------------------------------------------------------------ */
  /* App - Header */
  /* ---------------------------------------------------------------------------------------------------- */
  /* App - Page - Header */
  /* ---------------------------------------------------------------------------------------------------- */
  /* App - Main */
  /* ---------------------------------------------------------------------------------------------------- */
  /* App - Footer */
  /* ---------------------------------------------------------------------------------------------------- */
  /* Loading */
  /* ------------------------------------------------------------------------------------------------ */ }
  .app-container > .app-header {
    position: fixed;
    display: block;
    visibility: hidden;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
    top: 0px;
    bottom: auto;
    pointer-events: none;
    z-index: 2;
    /* Safe Area */
    /* ------------------------------------------------------------------------------------------------ */
    /* Shadow */
    /* ------------------------------------------------------------------------------------------------ */
    box-shadow: 0px 1px 0px 0px rgba(24, 76, 81, 0.2);
    /* Show */
    /* ------------------------------------------------------------------------------------------------ */
    /* Transitioning */
    /* ------------------------------------------------------------------------------------------------ */
    /* Inner */
    /* ------------------------------------------------------------------------------------------------ */
    /* Large Devices */
    /* ------------------------------------------------------------------------------------------------ */ }
    @supports (padding-top: constant(safe-area-inset-top)) {
      .app-container > .app-header {
        padding-top: constant(safe-area-inset-top); } }
    @supports (padding-top: env(safe-area-inset-top)) {
      .app-container > .app-header {
        padding-top: env(safe-area-inset-top); } }
    .app-container > .app-header.show {
      visibility: visible; }
    .app-container > .app-header.transitioning {
      pointer-events: none; }
    .app-container > .app-header > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: 44px;
      /* Transition */
      /* -------------------------------------------------------------------------------------------- */
      /* Title */
      /* -------------------------------------------------------------------------------------------- */
      /* Transition Title */
      /* -------------------------------------------------------------------------------------------- */
      /* Back Button */
      /* -------------------------------------------------------------------------------------------- */
      /* Account Button */
      /* -------------------------------------------------------------------------------------------- */
      /* Signout Button */
      /* -------------------------------------------------------------------------------------------- */ }
      .app-container > .app-header.transitioning > div {
        transition: height 0.3s ease-in-out; }
      .app-container > .app-header > div > h1 {
        position: absolute;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        bottom: 0px;
        left: 0px;
        opacity: 1;
        /* Font */
        /* ---------------------------------------------------------------------------------------- */
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 44px;
        text-align: center;
        white-space: nowrap;
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transform-origin: center bottom; }
        .app-container > .app-header.transitioning > div > h1 {
          transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out;
          opacity: 0; }
      .app-container > .app-header > div > h2 {
        position: absolute;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        bottom: 0px;
        left: 0px;
        opacity: 0;
        /* Font */
        /* ---------------------------------------------------------------------------------------- */
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 44px;
        text-align: center;
        white-space: nowrap;
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transform-origin: center bottom; }
        .app-container > .app-header.transitioning > div > h2 {
          transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out;
          opacity: 1; }
      .app-container > .app-header > div > .button-back {
        position: absolute;
        display: block;
        visibility: visible;
        box-sizing: border-box;
        padding: 4px 18px 4px 0px;
        margin: 0px 0px 0px 0px;
        width: 30px;
        height: 30px;
        top: 7px;
        left: -10px;
        background-color: transparent;
        border: none;
        outline: none;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        /* Fast Touch */
        /* ---------------------------------------------------------------------------------------- */
        touch-action: manipulation;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transition: opacity 0.3s ease-in-out, fill 0.3s ease-in-out;
        /* Loading */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container > .app-header > div > .button-back > svg {
          fill: #184C51;
          width: 12px;
          height: 22px; }
        .app-container > .app-header.back > div > .button-back {
          pointer-events: auto;
          opacity: 1; }
        .app-container.loading > .app-header > div > .button-back {
          pointer-events: none;
          opacity: 0; }
      .app-container > .app-header > div > .button-account {
        position: absolute;
        display: block;
        visibility: visible;
        box-sizing: border-box;
        padding: 2.5px 3.5px 2.5px 3.5px;
        margin: 0px 0px 0px 0px;
        width: 30px;
        height: 30px;
        top: 6px;
        right: -14px;
        background-color: transparent;
        border: none;
        outline: none;
        pointer-events: auto;
        z-index: 1;
        /* Fast Touch */
        /* ---------------------------------------------------------------------------------------- */
        touch-action: manipulation;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transition: opacity 0.3s ease-in-out;
        /* Active */
        /* ---------------------------------------------------------------------------------------- */
        /* Loading */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container > .app-header > div > .button-account > svg {
          fill: #184C51;
          width: 23px;
          height: 25px; }
        .app-container > .app-header > div > .button-account:active > svg {
          fill: #184C51; }
        .app-container.loading > .app-header > div > .button-account {
          pointer-events: none;
          opacity: 0; }
      .app-container > .app-header > div > .button-signout {
        position: absolute;
        display: block;
        visibility: visible;
        box-sizing: border-box;
        padding: 2.5px 2.5px 2.5px 2.5px;
        margin: 0px 0px 0px 0px;
        width: 30px;
        height: 30px;
        top: 6px;
        right: -14px;
        background-color: transparent;
        border: none;
        outline: none;
        pointer-events: auto;
        z-index: 1;
        /* Fast Touch */
        /* ---------------------------------------------------------------------------------------- */
        touch-action: manipulation;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transition: opacity 0.3s ease-in-out;
        /* Active */
        /* ---------------------------------------------------------------------------------------- */
        /* Loading */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container > .app-header > div > .button-signout > svg {
          fill: #5B8A97;
          width: 25px;
          height: 25px; }
        .app-container > .app-header > div > .button-signout:active > svg {
          fill: #184C51; }
        .app-container.loading > .app-header > div > .button-signout {
          pointer-events: none;
          opacity: 0; }
    @media (min-device-height: 800px) {
      .app-container > .app-header {
        /* Large Header */
        /* -------------------------------------------------------------------------------------------- */ }
        .app-container > .app-header.large {
          /* Inner */
          /* ---------------------------------------------------------------------------------------- */ }
          .app-container > .app-header.large > div {
            height: 92px;
            /* Title */
            /* ------------------------------------------------------------------------------------ */
            /* Transition Title */
            /* ------------------------------------------------------------------------------------ */ }
            .app-container > .app-header.large > div > h1 {
              width: 0px;
              bottom: -5px;
              transform: scale(1.55); }
            .app-container > .app-header.large > div > h2 {
              width: 0px;
              bottom: -5px;
              transform: scale(1.55); } }
  .app-container > .app-header.show + main section .app-page-header {
    visibility: hidden; }
  .app-container .app-main {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: 100%;
    /* Imports */
    /* ------------------------------------------------------------------------------------------------ */
    /* App - Page */
    /* ---------------------------------------------------------------------------------------------------- */ }
    .app-container .app-main .app-page {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 200%;
      height: 100%;
      /* Remove WhiteSpace */
      /* ------------------------------------------------------------------------------------------------ */
      font-size: 0px;
      line-height: 0px;
      letter-spacing: 0px;
      /* Section */
      /* ------------------------------------------------------------------------------------------------ */
      /* App - Page - Show Child */
      /* ------------------------------------------------------------------------------------------------ */
      /* App - Page - Transitioning To Child */
      /* ------------------------------------------------------------------------------------------------ */
      /* App - Page - Transitioning To Parent */
      /* ------------------------------------------------------------------------------------------------ */ }
      .app-container .app-main .app-page > section {
        position: relative;
        visibility: hidden;
        display: inline-block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 50%;
        height: 100%;
        vertical-align: top;
        pointer-events: auto;
        overflow: hidden;
        /* Parent */
        /* -------------------------------------------------------------------------------------------- */
        /* Hardware Acceleration */
        /* -------------------------------------------------------------------------------------------- */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        /* Loading */
        /* -------------------------------------------------------------------------------------------- */ }
        .app-container .app-main .app-page > section:first-child {
          visibility: visible;
          /* App - Page - Header */
          /* ---------------------------------------------------------------------------------------------------- */ }
          .app-container .app-main .app-page > section:first-child > .app-page-header {
            position: fixed;
            display: block;
            box-sizing: border-box;
            padding: 0px 20px 0px 20px;
            margin: 0px 0px 0px 0px;
            width: 100%;
            height: auto;
            top: 0px;
            bottom: auto;
            pointer-events: none;
            z-index: 2;
            /* Safe Area */
            /* ------------------------------------------------------------------------------------------------ */
            /* Shadow */
            /* ------------------------------------------------------------------------------------------------ */
            box-shadow: 0px 1px 0px 0px rgba(24, 76, 81, 0.2);
            /* Inner */
            /* ------------------------------------------------------------------------------------------------ */
            /* Large Devices */
            /* ------------------------------------------------------------------------------------------------ */ }
            @supports (padding-top: constant(safe-area-inset-top)) {
              .app-container .app-main .app-page > section:first-child > .app-page-header {
                padding-top: constant(safe-area-inset-top); } }
            @supports (padding-top: env(safe-area-inset-top)) {
              .app-container .app-main .app-page > section:first-child > .app-page-header {
                padding-top: env(safe-area-inset-top); } }
            .app-container .app-main .app-page > section:first-child > .app-page-header > div {
              position: relative;
              display: block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: 44px;
              /* Title */
              /* -------------------------------------------------------------------------------------------- */ }
              .app-container .app-main .app-page > section:first-child > .app-page-header > div > h1 {
                position: absolute;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 100%;
                height: auto;
                bottom: 0px;
                left: 0px;
                opacity: 1;
                /* Font */
                /* ---------------------------------------------------------------------------------------- */
                font-family: "Zilla Slab", serif;
                color: #184C51;
                font-size: 18px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 44px;
                text-align: center;
                white-space: nowrap;
                /* Transition */
                /* ---------------------------------------------------------------------------------------- */
                transform-origin: center bottom; }
            @media (min-device-height: 800px) {
              .app-container .app-main .app-page > section:first-child > .app-page-header {
                /* Large Header */
                /* -------------------------------------------------------------------------------------------- */ }
                .app-container .app-main .app-page > section:first-child > .app-page-header.large {
                  /* Inner */
                  /* ---------------------------------------------------------------------------------------- */ }
                  .app-container .app-main .app-page > section:first-child > .app-page-header.large > div {
                    height: 92px;
                    /* Title */
                    /* ------------------------------------------------------------------------------------ */ }
                    .app-container .app-main .app-page > section:first-child > .app-page-header.large > div > h1 {
                      width: 0px;
                      bottom: -5px;
                      transform: scale(1.55); } }
        .app-container.loading .app-main .app-page > section {
          visibility: hidden; }
      .app-container .app-main .app-page.show-child {
        /* Parent */
        /* -------------------------------------------------------------------------------------------- */
        /* Child */
        /* -------------------------------------------------------------------------------------------- */ }
        .app-container .app-main .app-page.show-child > section:first-child {
          visibility: hidden;
          transform: translateX(-30%);
          opacity: 0.4; }
        .app-container .app-main .app-page.show-child > section:last-child {
          visibility: visible;
          transform: translateX(-100%); }
      .app-container .app-main .app-page.transitioning-to-child {
        background-color: black;
        /* Parent */
        /* -------------------------------------------------------------------------------------------- */
        /* Child */
        /* -------------------------------------------------------------------------------------------- */ }
        .app-container .app-main .app-page.transitioning-to-child > section:first-child {
          visibility: visible;
          pointer-events: none;
          transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
        .app-container .app-main .app-page.transitioning-to-child > section:last-child {
          visibility: visible;
          pointer-events: none;
          transition: transform 0.3s ease-in-out; }
      .app-container .app-main .app-page.transitioning-to-parent {
        background-color: black;
        /* Parent */
        /* -------------------------------------------------------------------------------------------- */
        /* Child */
        /* -------------------------------------------------------------------------------------------- */ }
        .app-container .app-main .app-page.transitioning-to-parent > section:first-child {
          visibility: visible;
          pointer-events: none;
          transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
        .app-container .app-main .app-page.transitioning-to-parent > section:last-child {
          visibility: visible;
          pointer-events: none;
          transition: transform 0.3s ease-in-out; }
  .app-container .app-footer {
    position: fixed;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: 49px;
    top: auto;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
    /* Safe Area */
    /* ------------------------------------------------------------------------------------------------ */
    /* Background */
    /* ------------------------------------------------------------------------------------------------ */
    background-color: white;
    /* Shadow */
    /* ------------------------------------------------------------------------------------------------ */
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
    /* Nav */
    /* ------------------------------------------------------------------------------------------------ */ }
    @supports (padding-bottom: constant(safe-area-inset-bottom)) {
      .app-container .app-footer {
        padding-bottom: constant(safe-area-inset-bottom); } }
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      .app-container .app-footer {
        padding-bottom: env(safe-area-inset-bottom); } }
    .app-container .app-footer > nav {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0px 20px 0px 20px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: 49px;
      /* Link */
      /* -------------------------------------------------------------------------------------------- */
      /* Spacer */
      /* -------------------------------------------------------------------------------------------- */
      /* Button - Dashboard */
      /* -------------------------------------------------------------------------------------------- */
      /* Button - Diary */
      /* -------------------------------------------------------------------------------------------- */
      /* Button - History */
      /* -------------------------------------------------------------------------------------------- */
      /* Button - Toolkit */
      /* -------------------------------------------------------------------------------------------- */
      /* Button - Add */
      /* -------------------------------------------------------------------------------------------- */ }
      .app-container .app-footer > nav > a {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 9px 0px 0px 0px;
        width: 30px;
        height: 30px;
        vertical-align: middle;
        cursor: pointer;
        /* Fast Touch */
        /* ---------------------------------------------------------------------------------------- */
        touch-action: manipulation;
        /* Active */
        /* ---------------------------------------------------------------------------------------- */
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transition: opacity 0.3s ease-in-out;
        /* Loading */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container .app-footer > nav > a.active > svg,
        .app-container .app-footer > nav > a:active > svg {
          fill: #184C51; }
        .app-container.loading .app-footer > nav > a {
          pointer-events: none;
          opacity: 0; }
      .app-container .app-footer > nav > i {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 9px 0px 0px 0px;
        width: 20px;
        height: 30px;
        vertical-align: middle;
        visibility: hidden; }
      .app-container .app-footer > nav .button-dashboard {
        padding: 4px 5.5px 4px 5.5px;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container .app-footer > nav .button-dashboard > svg {
          width: 19px;
          height: 22px;
          fill: #5B8A97; }
      .app-container .app-footer > nav .button-diary {
        padding: 4px 0.5px 4px 0.5px;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container .app-footer > nav .button-diary > svg {
          width: 29px;
          height: 22px;
          fill: #5B8A97; }
      .app-container .app-footer > nav .button-history {
        padding: 4px 2.5px 4px 2.5px;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container .app-footer > nav .button-history > svg {
          width: 25px;
          height: 22px;
          fill: #5B8A97; }
      .app-container .app-footer > nav .button-toolkit {
        padding: 4px 2.5px 4px 2.5px;
        /* SVG */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container .app-footer > nav .button-toolkit > svg {
          width: 25px;
          height: 22px;
          fill: #5B8A97; }
      .app-container .app-footer > nav > .button-add {
        position: relative;
        visibility: hidden;
        display: inline-block;
        padding: 0px 0px 0px 0px;
        margin: -29.5px 0px 0px 0px;
        width: 58px;
        height: 58px;
        vertical-align: middle;
        border: none;
        border-radius: 50%;
        background-color: #5B8A97;
        box-shadow: 0px 5px 10px rgba(91, 138, 151, 0.5);
        pointer-events: none;
        cursor: pointer;
        z-index: 2;
        /* Transition */
        /* ---------------------------------------------------------------------------------------- */
        transition: opacity 0.3s ease-in-out, background-color 0.2s ease-in-out;
        /* Fast Touch */
        /* ---------------------------------------------------------------------------------------- */
        touch-action: manipulation;
        /* Active */
        /* ---------------------------------------------------------------------------------------- */
        /* Cross */
        /* ---------------------------------------------------------------------------------------- */
        /* Cross - Horizontal */
        /* ---------------------------------------------------------------------------------------- */
        /* Cross - Vertical */
        /* ---------------------------------------------------------------------------------------- */
        /* Show */
        /* ---------------------------------------------------------------------------------------- */
        /* Open */
        /* ---------------------------------------------------------------------------------------- */
        /* Loading */
        /* ---------------------------------------------------------------------------------------- */ }
        .app-container .app-footer > nav > .button-add:active {
          background-color: #184C51; }
        .app-container .app-footer > nav > .button-add:before, .app-container .app-footer > nav > .button-add:after {
          position: absolute;
          display: block;
          content: " ";
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          top: 50%;
          left: 50%;
          background-color: white;
          /* Transition */
          /* ------------------------------------------------------------------------------------ */
          transition: transform 0.2s ease-in-out; }
        .app-container .app-footer > nav > .button-add:before {
          width: 24px;
          height: 2px;
          margin-top: -1px;
          margin-left: -12px; }
        .app-container .app-footer > nav > .button-add:after {
          width: 2px;
          height: 24px;
          margin-top: -12px;
          margin-left: -1px; }
        .app-container .app-footer.button > nav > .button-add {
          visibility: visible;
          pointer-events: auto; }
        .app-container .app-footer.open > nav > .button-add {
          visibility: hidden;
          pointer-events: none; }
        .app-container.loading .app-footer > nav > .button-add {
          pointer-events: none;
          opacity: 0; }
  .app-container.loading {
    /* Header */
    /* -------------------------------------------------------------------------------------------- */
    /* Main */
    /* -------------------------------------------------------------------------------------------- */
    /* Footer */
    /* -------------------------------------------------------------------------------------------- */
    /* Spinner */
    /* -------------------------------------------------------------------------------------------- */ }
    .app-container.loading > .app-header {
      visibility: hidden; }
    .app-container.loading > .app-main {
      visibility: hidden; }
    .app-container.loading > .app-footer {
      visibility: hidden; }
    .app-container.loading:after {
      position: absolute;
      display: block;
      content: " ";
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color: #4C747F;
      z-index: 99999;
      /* Image */
      /* ---------------------------------------------------------------------------------------- */
      background-size: 20% 20%;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(/assets/images/spinner.svg); }

/* Component - Input */
/* ---------------------------------------------------------------------------------------------------- */
/* Input - Button */
/* ---------------------------------------------------------------------------------------------------- */
.input-button {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 50px;
  cursor: pointer;
  /* Font */
  /* ------------------------------------------------------------------------------------------------ */
  font-family: "Zilla Slab", serif;
  color: black;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 46px;
  text-decoration: none;
  text-align: center;
  /* Fast Touch */
  /* ------------------------------------------------------------------------------------------------ */
  touch-action: manipulation;
  /* Transition */
  /* ------------------------------------------------------------------------------------------------ */
  transition: border-color 0.2s ease-out , background-color 0.2s ease-out;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background-color: white;
  /* Border */
  /* ------------------------------------------------------------------------------------------------ */
  border: 2px solid grey;
  border-radius: 8px;
  outline: none;
  /* Active */
  /* ------------------------------------------------------------------------------------------------ */ }
  .input-button:active {
    background-color: grey;
    border-color: grey;
    color: white; }

/* Component - Flower */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Flower */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Flower - Large */
/* ---------------------------------------------------------------------------------------------------- */
.component-flower-large {
  position: relative;
  display: block;
  padding: 100% 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: auto;
  border-radius: 100%;
  background-color: rgba(76, 113, 113, 0.05);
  /* Circle 2 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Circle 3 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Text */
  /* ------------------------------------------------------------------------------------------------ */
  /* Images */
  /* ------------------------------------------------------------------------------------------------ */
  /* Events */
  /* ------------------------------------------------------------------------------------------------ */ }
  .component-flower-large > i:nth-child(1) {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    top: 5.5%;
    bottom: 5.5%;
    left: 5.5%;
    right: 5.5%;
    border-radius: 100%;
    background-color: rgba(76, 113, 113, 0.1); }
  .component-flower-large > i:nth-child(2) {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    top: 15%;
    bottom: 15%;
    left: 15%;
    right: 15%;
    border-radius: 100%;
    background-color: rgba(76, 113, 113, 0.15); }
  .component-flower-large > i:nth-child(3) {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /* SVG */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-flower-large > i:nth-child(3) > svg {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      /* Path */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-flower-large > i:nth-child(3) > svg path {
        fill: transparent; }
      .component-flower-large > i:nth-child(3) > svg text {
        font-family: "Open Sans", sans-serif;
        fill: #333333;
        font-size: 22px;
        font-style: normal; }
  .component-flower-large > div:nth-child(4) {
    position: absolute;
    display: block;
    padding: 100% 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    /* Scale */
    /* -------------------------------------------------------------------------------------------- */
    width: 80%;
    padding-top: 80%;
    top: 6%;
    left: 10%;
    /* Inner */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-flower-large > div:nth-child(4) > div {
      position: absolute;
      display: block;
      padding: 186.829558998808105% 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      top: 0px;
      left: 0px;
      /* Center */
      /* ---------------------------------------------------------------------------------------- */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left top;
      background-image: url(/assets/images/flower/center.png);
      /* Stem */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 1 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 2 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 3 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 4 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 5 */
      /* ---------------------------------------------------------------------------------------- */
      /* Frames */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-flower-large > div:nth-child(4) > div:before {
        position: absolute;
        display: block;
        content: " ";
        padding: 186.829558998808105% 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        top: 0px;
        left: 0px;
        /* Stem */
        /* ------------------------------------------------------------------------------------ */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
        background-image: url(/assets/images/flower/stem.png);
        /* Mask */
        /* ------------------------------------------------------------------------------------ */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 80%);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 80%); }
      .component-flower-large > div:nth-child(4) > div > i {
        position: absolute;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        background-position: left top; }
      .component-flower-large > div:nth-child(4) > div > i:nth-child(1) {
        width: 31.466030989272944%;
        height: 25.00797448%;
        top: 0%;
        left: 33.84982122%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower/petal-1-spritesheet.png); }
      .component-flower-large > div:nth-child(4) > div > i:nth-child(2) {
        width: 45.8283671%;
        height: 17.4800638%;
        top: 16.0446571%;
        left: 54.1716329%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower/petal-2-spritesheet.png); }
      .component-flower-large > div:nth-child(4) > div > i:nth-child(3) {
        width: 39.63051251%;
        height: 21.56299841%;
        top: 31.64274322%;
        left: 46.54350417%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower/petal-3-spritesheet.png); }
      .component-flower-large > div:nth-child(4) > div > i:nth-child(4) {
        width: 36.23361144%;
        height: 21.81818182%;
        top: 31.70653907%;
        left: 16.50774732%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower/petal-4-spritesheet.png); }
      .component-flower-large > div:nth-child(4) > div > i:nth-child(5) {
        width: 45.35160906%;
        height: 18.27751196%;
        top: 16.81020734%;
        left: 0%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower/petal-5-spritesheet.png); }
      .component-flower-large > div:nth-child(4) > div > i.frame-1 {
        background-position: left top; }
      .component-flower-large > div:nth-child(4) > div > i.frame-2 {
        background-position: center top; }
      .component-flower-large > div:nth-child(4) > div > i.frame-3 {
        background-position: right top; }
      .component-flower-large > div:nth-child(4) > div > i.frame-4 {
        background-position: left center; }
      .component-flower-large > div:nth-child(4) > div > i.frame-5 {
        background-position: center center; }
      .component-flower-large > div:nth-child(4) > div > i.frame-6 {
        background-position: right center; }
      .component-flower-large > div:nth-child(4) > div > i.frame-7 {
        background-position: left bottom; }
      .component-flower-large > div:nth-child(4) > div > i.frame-8 {
        background-position: center bottom; }
      .component-flower-large > div:nth-child(4) > div > i.frame-9 {
        background-position: right bottom; }
  .component-flower-large > div:nth-child(5) {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: 100%;
    z-index: 1; }

/* Component - Flower - Small */
/* ---------------------------------------------------------------------------------------------------- */
.component-flower-small {
  position: relative;
  display: block;
  padding: 100% 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: auto;
  border-radius: 100%;
  background-color: rgba(76, 113, 113, 0.05);
  /* Circle 2 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Circle 3 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Images */
  /* ------------------------------------------------------------------------------------------------ */ }
  .component-flower-small > i:nth-child(1) {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    top: 7.5%;
    bottom: 7.5%;
    left: 7.5%;
    right: 7.5%;
    border-radius: 100%;
    background-color: rgba(76, 113, 113, 0.1); }
  .component-flower-small > i:nth-child(2) {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    top: 15%;
    bottom: 15%;
    left: 15%;
    right: 15%;
    border-radius: 100%;
    background-color: rgba(76, 113, 113, 0.15); }
  .component-flower-small > div:nth-child(3) {
    position: absolute;
    display: block;
    padding: 100% 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    /* Scale */
    /* -------------------------------------------------------------------------------------------- */
    width: 90%;
    padding-top: 90%;
    top: 0.5%;
    left: 4.5%;
    /* Inner */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-flower-small > div:nth-child(3) > div {
      position: absolute;
      display: block;
      padding: 186.829558998808105% 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      top: 0px;
      left: 0px;
      /* Center */
      /* ---------------------------------------------------------------------------------------- */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left top;
      background-image: url(/assets/images/flower-small/center.png);
      /* Petal */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 1 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 2 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 3 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 4 */
      /* ---------------------------------------------------------------------------------------- */
      /* Petal 5 */
      /* ---------------------------------------------------------------------------------------- */
      /* Frames */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-flower-small > div:nth-child(3) > div > i {
        position: absolute;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        background-position: left top; }
      .component-flower-small > div:nth-child(3) > div > i:nth-child(1) {
        width: 31.466030989272944%;
        height: 25.00797448%;
        top: 0%;
        left: 33.84982122%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower-small/petal-1-spritesheet.png); }
      .component-flower-small > div:nth-child(3) > div > i:nth-child(2) {
        width: 45.8283671%;
        height: 17.4800638%;
        top: 16.0446571%;
        left: 54.1716329%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower-small/petal-2-spritesheet.png); }
      .component-flower-small > div:nth-child(3) > div > i:nth-child(3) {
        width: 39.63051251%;
        height: 21.56299841%;
        top: 31.64274322%;
        left: 46.54350417%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower-small/petal-3-spritesheet.png); }
      .component-flower-small > div:nth-child(3) > div > i:nth-child(4) {
        width: 36.23361144%;
        height: 21.81818182%;
        top: 31.70653907%;
        left: 16.50774732%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower-small/petal-4-spritesheet.png); }
      .component-flower-small > div:nth-child(3) > div > i:nth-child(5) {
        width: 45.35160906%;
        height: 18.27751196%;
        top: 16.81020734%;
        left: 0%;
        /* Spritesheet */
        /* ------------------------------------------------------------------------------------ */
        background-size: 300% 300%;
        background-repeat: no-repeat;
        background-image: url(/assets/images/flower-small/petal-5-spritesheet.png); }
      .component-flower-small > div:nth-child(3) > div > i.frame-1 {
        background-position: left top; }
      .component-flower-small > div:nth-child(3) > div > i.frame-2 {
        background-position: center top; }
      .component-flower-small > div:nth-child(3) > div > i.frame-3 {
        background-position: right top; }
      .component-flower-small > div:nth-child(3) > div > i.frame-4 {
        background-position: left center; }
      .component-flower-small > div:nth-child(3) > div > i.frame-5 {
        background-position: center center; }
      .component-flower-small > div:nth-child(3) > div > i.frame-6 {
        background-position: right center; }
      .component-flower-small > div:nth-child(3) > div > i.frame-7 {
        background-position: left bottom; }
      .component-flower-small > div:nth-child(3) > div > i.frame-8 {
        background-position: center bottom; }
      .component-flower-small > div:nth-child(3) > div > i.frame-9 {
        background-position: right bottom; }

/* Component - Introduction */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Introduction */
/* ---------------------------------------------------------------------------------------------------- */
.component-introduction {
  position: relative;
  display: block;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: auto;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #5B8A97 0%, #DCDBC5 50%, #EFEAD6 100%);
  /* Animating */
  /* ------------------------------------------------------------------------------------------------ */
  /* Birds */
  /* ------------------------------------------------------------------------------------------------ */
  /* Component - Introduction - Birds */
  /* ---------------------------------------------------------------------------------------------------- */
  /* Mask */
  /* ------------------------------------------------------------------------------------------------ */
  /* Title */
  /* ------------------------------------------------------------------------------------------------ */
  /* Sun */
  /* ------------------------------------------------------------------------------------------------ */
  /* Mountains */
  /* ------------------------------------------------------------------------------------------------ */
  /* Buttons */
  /* ------------------------------------------------------------------------------------------------ */ }
  .component-introduction.animating {
    pointer-events: none;
    cursor: default; }
  .component-introduction .component-introduction-birds {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 25%;
    top: 25%;
    left: 0px;
    z-index: 100;
    /* Bird */
    /* ------------------------------------------------------------------------------------------------ */
    /* Keyframes - Horizontal */
    /* ------------------------------------------------------------------------------------------------ */
    /* Keyframes - Vertical */
    /* ------------------------------------------------------------------------------------------------ */ }
    .component-introduction .component-introduction-birds i {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 50px;
      height: auto;
      top: auto;
      left: calc( 0% - 50px);
      /* Image */
      /* -------------------------------------------------------------------------------------------- */
      /* Animation */
      /* -------------------------------------------------------------------------------------------- */
      animation-duration: 15s;
      animation-name: fly-horizontal, fly-vertical;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      /* Bird 1 */
      /* -------------------------------------------------------------------------------------------- */
      /* Bird 2 */
      /* -------------------------------------------------------------------------------------------- */
      /* Bird 3 */
      /* -------------------------------------------------------------------------------------------- */
      /* Bird 4 */
      /* -------------------------------------------------------------------------------------------- */ }
      .component-introduction .component-introduction-birds i:after {
        position: relative;
        display: block;
        content: " ";
        padding: 127% 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center; }
      .component-introduction .component-introduction-birds i.bird-1 {
        top: 10%;
        animation-delay: 0s;
        animation-duration: 15s; }
        .component-introduction .component-introduction-birds i.bird-1:after {
          background-image: url(/assets/images/birds/bird-1.gif); }
      .component-introduction .component-introduction-birds i.bird-2 {
        top: 30%;
        animation-delay: 6s;
        animation-duration: 17s; }
        .component-introduction .component-introduction-birds i.bird-2:after {
          background-image: url(/assets/images/birds/bird-2.gif); }
      .component-introduction .component-introduction-birds i.bird-3 {
        bottom: 40%;
        animation-delay: 3s;
        animation-duration: 13s; }
        .component-introduction .component-introduction-birds i.bird-3:after {
          background-image: url(/assets/images/birds/bird-3.gif); }
      .component-introduction .component-introduction-birds i.bird-4 {
        bottom: 20%;
        animation-delay: 9s;
        animation-duration: 16s; }
        .component-introduction .component-introduction-birds i.bird-4:after {
          background-image: url(/assets/images/birds/bird-4.gif); }

@keyframes fly-horizontal {
  0% {
    left: calc( 0% - 50px); }
  100% {
    left: 100%; } }

@keyframes fly-vertical {
  0% {
    transform: translateY(1vh) scale(0.9); }
  10% {
    transform: translateY(0vh) scale(1); }
  20% {
    transform: translateY(-1vh) scale(1.1); }
  30% {
    transform: translateY(0vh) scale(1); }
  40% {
    transform: translateY(1vh) scale(0.9); }
  50% {
    transform: translateY(0vh) scale(1); }
  60% {
    transform: translateY(-1vh) scale(1.1); }
  70% {
    transform: translateY(0vh) scale(1); }
  80% {
    transform: translateY(1vh) scale(0.9); }
  90% {
    transform: translateY(0vh) scale(1); }
  100% {
    transform: translateY(-1vh) scale(1.1); } }
  .component-introduction:before {
    position: absolute;
    display: block;
    content: " ";
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #4C747F;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    /* Animation */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 3s;
    transition-delay: 1s;
    /* Animation Setup */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-introduction.setup:before {
      opacity: 1; }
  .component-introduction > h1 {
    position: absolute;
    display: block;
    content: " ";
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 50%;
    width: 184px;
    height: 84px;
    top: 15vh;
    left: -92px;
    z-index: 2;
    /* Hardware Acceleration */
    /* -------------------------------------------------------------------------------------------- */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    /* Animation */
    /* -------------------------------------------------------------------------------------------- */
    /* Animation Setup */
    /* -------------------------------------------------------------------------------------------- */ }

@keyframes blur {
  from {
    filter: blur(50px); }
  to {
    filter: blur(0px); } }
    .component-introduction.setup > h1 {
      filter: blur(50px); }
    .component-introduction.animating > h1 {
      animation: blur 3s ease 1s; }
  .component-introduction > i {
    position: absolute;
    display: block;
    padding: 90% 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 90%;
    height: auto;
    top: 23%;
    right: -10%;
    background: radial-gradient(circle at 50%, white 20%, rgba(255, 255, 255, 0) 50%);
    border-radius: 50%;
    /* Hardware Acceleration */
    /* -------------------------------------------------------------------------------------------- */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    /* Animation */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-introduction.animating > i {
      animation: sun 4s ease 1s; }

@keyframes sun {
  from {
    top: 40%;
    opacity: 0;
    filter: blur(50px);
    transform: scale(0.5); }
  to {
    top: 23%;
    opacity: 1;
    filter: blur(0px);
    transform: scale(1); } }
  .component-introduction > .component-introduction-mountains {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 50%;
    /* Mountain - 1 */
    /* -------------------------------------------------------------------------------------------- */
    /* Mountain - 2 */
    /* -------------------------------------------------------------------------------------------- */
    /* Mountain - 3 */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-introduction > .component-introduction-mountains > div:nth-child(1) {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      left: 0px;
      top: 0%;
      /* SVG */
      /* ---------------------------------------------------------------------------------------- */
      /* Animation */
      /* ---------------------------------------------------------------------------------------- */
      transition: top 2s;
      transition-delay: 1s;
      transition-timing-function: easeInExpo;
      /* Hardware Acceleration */
      /* ---------------------------------------------------------------------------------------- */
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      /* Animation Setup */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-introduction > .component-introduction-mountains > div:nth-child(1) > svg {
        width: 100%;
        height: auto;
        fill: #547F8B; }
      .component-introduction.setup > .component-introduction-mountains > div:nth-child(1) {
        top: 5%; }
    .component-introduction > .component-introduction-mountains > div:nth-child(2) {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      left: 0px;
      top: 5%;
      /* SVG */
      /* ---------------------------------------------------------------------------------------- */
      /* Animation */
      /* ---------------------------------------------------------------------------------------- */
      transition: top 2s;
      transition-delay: 1s;
      transition-timing-function: easeInExpo;
      /* Hardware Acceleration */
      /* ---------------------------------------------------------------------------------------- */
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      /* Animation Setup */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-introduction > .component-introduction-mountains > div:nth-child(2) > svg {
        width: 100%;
        height: auto;
        fill: #4C747F; }
      .component-introduction.setup > .component-introduction-mountains > div:nth-child(2) {
        top: 15%; }
    .component-introduction > .component-introduction-mountains > div:nth-child(3) {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      left: 0px;
      top: 20%;
      bottom: 0px;
      /* SVG */
      /* ---------------------------------------------------------------------------------------- */
      /* Additional */
      /* ---------------------------------------------------------------------------------------- */
      /* Animation */
      /* ---------------------------------------------------------------------------------------- */
      transition: top 2s;
      transition-delay: 1s;
      transition-timing-function: easeInExpo;
      /* Hardware Acceleration */
      /* ---------------------------------------------------------------------------------------- */
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      /* Animation Setup */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-introduction > .component-introduction-mountains > div:nth-child(3) > svg {
        width: 100%;
        height: auto;
        fill: #456973; }
      .component-introduction > .component-introduction-mountains > div:nth-child(3):before {
        position: absolute;
        display: block;
        content: " ";
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 30%;
        bottom: 0px;
        left: 0px;
        background-color: #456973; }
      .component-introduction.setup > .component-introduction-mountains > div:nth-child(3) {
        top: 50%; }
  .component-introduction > .component-introduction-buttons {
    position: absolute;
    display: block;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
    bottom: 5vh;
    /* Button - Onboarding */
    /* -------------------------------------------------------------------------------------------- */
    /* Button - Login */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-introduction > .component-introduction-buttons > .input-button.onboarding {
      color: #5B8A97;
      background-color: white;
      border-color: #D6D6D6;
      /* Animation */
      /* ---------------------------------------------------------------------------------------- */
      transition: background-color 0.2s ease-out , border-color 0.2s ease-out , opacity 3s 2.5s;
      /* Animation Setup */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-introduction.setup > .component-introduction-buttons > .input-button.onboarding {
        opacity: 0; }
      .component-introduction > .component-introduction-buttons > .input-button.onboarding:active {
        color: white;
        background-color: #3E5E66;
        border-color: #3E5E66; }
    .component-introduction > .component-introduction-buttons > .input-button.login {
      margin-top: 15px;
      color: white;
      background-color: #5B8A97;
      border-color: #3E5E66;
      /* Animation */
      /* ---------------------------------------------------------------------------------------- */
      transition: background-color 0.2s ease-out , border-color 0.2s ease-out , opacity 3s 1.5s;
      /* Animation Setup */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-introduction.setup > .component-introduction-buttons > .input-button.login {
        opacity: 0; }
      .component-introduction > .component-introduction-buttons > .input-button.login:active {
        background-color: #3E5E66; }

/* Component - Onboarding */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Onboarding */
/* ---------------------------------------------------------------------------------------------------- */
.component-onboarding {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 20px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */
  /* Onboarding - 1 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Onboarding - 2 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Onboarding - 3 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Onboarding - 4 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Onboarding - 5 */
  /* ------------------------------------------------------------------------------------------------ */
  /* Onboarding - 6 */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-onboarding {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-onboarding {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-onboarding {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-onboarding {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-onboarding {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-onboarding {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-onboarding {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-onboarding {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-onboarding {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-onboarding {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-onboarding {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-onboarding {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-onboarding {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-onboarding {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-onboarding {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-onboarding {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-onboarding {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-onboarding {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-onboarding {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-onboarding {
      padding-top: constant(safe-area-inset-top); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-onboarding {
      padding-top: env(safe-area-inset-top); } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-onboarding {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 20px + ( var( --safe-area-inset-bottom ) * 0.5 )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-onboarding {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 20px + ( var( --safe-area-inset-bottom ) * 0.5 )); } }
  .component-onboarding > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Title */
    /* -------------------------------------------------------------------------------------------- */
    /* Subtitle */
    /* -------------------------------------------------------------------------------------------- */
    /* Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Imports */
    /* -------------------------------------------------------------------------------------------- */
    /* Component - Onboarding - Nav */
    /* ---------------------------------------------------------------------------------------------------- */ }
    .component-onboarding > div > h1 {
      position: relative;
      display: table;
      padding: 5vh 0px 10px 0px;
      margin: -2px auto 0px auto;
      width: auto;
      height: auto;
      font-family: "Zilla Slab", serif;
      color: #184C51;
      font-size: 24px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 24px;
      white-space: nowrap;
      text-align: center;
      overflow: hidden;
      /* Breakpoints */
      /* ---------------------------------------------------------------------------------------- */
      /* Underline */
      /* ---------------------------------------------------------------------------------------- */
      border-bottom: 1px solid #184C51; }
      @media (max-width: 374px) {
        .component-onboarding > div > h1 {
          margin-top: -1px;
          font-size: 23px;
          line-height: 23px; } }
      @media (max-width: 340px) {
        .component-onboarding > div > h1 {
          margin-top: -1px;
          font-size: 22px;
          line-height: 22px; } }
      @media (max-width: 320px) {
        .component-onboarding > div > h1 {
          margin-top: 0px;
          font-size: 21px;
          line-height: 21px; } }
      .component-onboarding > div > h1 > i {
        display: none; }
      @media (min-height: 647px) {
        .component-onboarding > div > h1 {
          padding-top: 5vh;
          padding-bottom: 40px;
          border-bottom: none; }
          .component-onboarding > div > h1 > i {
            position: absolute;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: auto;
            height: 34px;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            /* SVG */
            /* -------------------------------------------------------------------------------- */ }
            .component-onboarding > div > h1 > i > svg {
              stroke: #184C51;
              stroke-width: 1px; } }
    .component-onboarding > div > h2, .component-onboarding > div > span > h2 {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      font-family: "Zilla Slab", serif;
      color: #5B8A97;
      font-size: 22px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 28px;
      text-align: center;
      /* Breakpoints */
      /* ---------------------------------------------------------------------------------------- */ }
      @media (max-width: 374px) {
        .component-onboarding > div > h2, .component-onboarding > div > span > h2 {
          font-size: 21px;
          line-height: 27px; } }
      @media (max-width: 340px) {
        .component-onboarding > div > h2, .component-onboarding > div > span > h2 {
          font-size: 20px;
          line-height: 26px; } }
      @media (max-width: 320px) {
        .component-onboarding > div > h2, .component-onboarding > div > span > h2 {
          font-size: 19px;
          line-height: 25px; } }
    .component-onboarding > div > p, .component-onboarding > div > span > p {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      font-family: "Zilla Slab", serif;
      color: #333333;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 20px;
      text-align: center; }
    .component-onboarding > div > span > p {
      margin-top: 13px; }
    .component-onboarding > div .component-onboarding-nav {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px -9px 0px;
      width: auto;
      height: 30px;
      /* Animation */
      /* ------------------------------------------------------------------------------------------------ */
      transition: opacity 0.5s ease-in-out;
      /* Row */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-onboarding > div .component-onboarding-nav > ul {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px auto 0px auto;
        width: 100%;
        height: 30px;
        text-align: center;
        list-style: none;
        /* Columns */
        /* -------------------------------------------------------------------------------------------- */ }
        .component-onboarding > div .component-onboarding-nav > ul > li {
          position: relative;
          display: inline-block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: auto;
          /* Buttons */
          /* ---------------------------------------------------------------------------------------- */
          /* Skip */
          /* ---------------------------------------------------------------------------------------- */
          /* Next */
          /* ---------------------------------------------------------------------------------------- */
          /* Dots */
          /* ---------------------------------------------------------------------------------------- */
          /* Step - 1 */
          /* ---------------------------------------------------------------------------------------- */
          /* Step - 2 */
          /* ---------------------------------------------------------------------------------------- */
          /* Step - 3 */
          /* ---------------------------------------------------------------------------------------- */
          /* Step - 4 */
          /* ---------------------------------------------------------------------------------------- */
          /* Step - 5 */
          /* ---------------------------------------------------------------------------------------- */
          /* Step - 6 */
          /* ---------------------------------------------------------------------------------------- */
          /* Authenticated Onboarding */
          /* ---------------------------------------------------------------------------------------- */ }
          .component-onboarding > div .component-onboarding-nav > ul > li:first-child > button, .component-onboarding > div .component-onboarding-nav > ul > li:last-child > button {
            padding: 0px 0px 0px 0px;
            width: auto;
            height: 30px;
            font-family: "Zilla Slab", serif;
            color: transparent;
            font-size: 17px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 22px;
            background: none;
            border: none;
            /* Fast Touch */
            /* ------------------------------------------------------------------------------------ */
            touch-action: manipulation; }
          .component-onboarding > div .component-onboarding-nav > ul > li:first-child {
            position: absolute;
            margin: 0px;
            left: 0px; }
            .component-onboarding > div .component-onboarding-nav > ul > li:first-child > button {
              padding-right: 15px;
              color: #5B8A97; }
          .component-onboarding > div .component-onboarding-nav > ul > li:last-child {
            position: absolute;
            margin-right: 0px;
            right: 0px; }
            .component-onboarding > div .component-onboarding-nav > ul > li:last-child > button {
              padding-left: 15px;
              color: #184C51; }
          .component-onboarding > div .component-onboarding-nav > ul > li:not(:first-child):not(:last-child) {
            margin: 10px 7.5px 10px 7.5px;
            width: 10px;
            height: 10px;
            background-color: #5B8A97;
            border-radius: 5px; }
          .component-onboarding > div .component-onboarding-nav.step-1 > ul > li:nth-child(2) {
            background-color: #184C51; }
          .component-onboarding > div .component-onboarding-nav.step-2 > ul > li:nth-child(3) {
            background-color: #184C51; }
          .component-onboarding > div .component-onboarding-nav.step-3 > ul > li:nth-child(4) {
            background-color: #184C51; }
          .component-onboarding > div .component-onboarding-nav.step-4 > ul > li:nth-child(5) {
            background-color: #184C51; }
          .component-onboarding > div .component-onboarding-nav.step-5 > ul > li:nth-child(6) {
            background-color: #184C51; }
          .component-onboarding > div .component-onboarding-nav.step-6 > ul > li:nth-child(7) {
            background-color: #184C51; }
          html.page-authenticated-onboarding .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(2), html.page-authenticated-onboarding .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(3), html.page-authenticated-onboarding .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(4), html.page-authenticated-onboarding .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(6),
          html.page-authenticated-onboarding-onboarding-2 .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(2),
          html.page-authenticated-onboarding-onboarding-2 .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(3),
          html.page-authenticated-onboarding-onboarding-2 .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(4),
          html.page-authenticated-onboarding-onboarding-2 .component-onboarding > div .component-onboarding-nav > ul > li:nth-child(6) {
            display: none; }
  .component-onboarding.component-onboarding-1 {
    /* Flower */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-onboarding.component-onboarding-1 > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Breakpoints */
      /* ---------------------------------------------------------------------------------------- */
      /* Flower */
      /* ---------------------------------------------------------------------------------------- */ }
      @media (max-width: 374px) {
        .component-onboarding.component-onboarding-1 > div > div {
          margin-left: -5px;
          margin-right: -5px;
          margin-bottom: -40px; } }
      @media (max-width: 340px) {
        .component-onboarding.component-onboarding-1 > div > div {
          margin-left: -10px;
          margin-right: -10px; } }
      @media (max-width: 320px) {
        .component-onboarding.component-onboarding-1 > div > div {
          margin-left: -15px;
          margin-right: -15px; } }
      .component-onboarding.component-onboarding-1 > div > div > .component-flower-large {
        background-color: transparent;
        /* Circle 2 */
        /* ------------------------------------------------------------------------------------ */ }
        .component-onboarding.component-onboarding-1 > div > div > .component-flower-large > i {
          display: none; }
  .component-onboarding.component-onboarding-2 {
    /* Image */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-onboarding.component-onboarding-2 > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px auto 0px auto;
      width: 70%;
      height: auto;
      /* Image */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-onboarding.component-onboarding-2 > div > div > i {
        position: relative;
        display: block;
        padding: 117% 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/assets/images/onboarding/onboarding-2.svg); }
  .component-onboarding.component-onboarding-3 {
    /* Image */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-onboarding.component-onboarding-3 > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px auto 0px auto;
      width: 100%;
      height: auto;
      /* Image */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-onboarding.component-onboarding-3 > div > div > i {
        position: relative;
        display: block;
        padding: 81.433224755700326% 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/assets/images/onboarding/onboarding-3.svg); }
  .component-onboarding.component-onboarding-4 {
    /* Buttons */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-onboarding.component-onboarding-4 > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Button */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-onboarding.component-onboarding-4 > div > div > button {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 20px 0px 0px 0px;
        width: calc( 50% - 7.5px);
        height: 13vh;
        max-height: 90px;
        border: 2px solid #9DB9C0;
        border-radius: 4px;
        background: none;
        cursor: pointer;
        /* Fast Touch */
        /* ------------------------------------------------------------------------------------ */
        touch-action: manipulation;
        /* Top Row */
        /* ------------------------------------------------------------------------------------ */
        /* Left Column */
        /* ------------------------------------------------------------------------------------ */
        /* Right Column */
        /* ------------------------------------------------------------------------------------ */
        /* Icon */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */
        /* Selected */
        /* ------------------------------------------------------------------------------------ */
        /* Personal & Family */
        /* ------------------------------------------------------------------------------------ */
        /* Work Life */
        /* ------------------------------------------------------------------------------------ */
        /* Hormones */
        /* ------------------------------------------------------------------------------------ */
        /* Finances */
        /* ------------------------------------------------------------------------------------ */
        /* Travel / Commuting */
        /* ------------------------------------------------------------------------------------ */
        /* Physical Activity */
        /* ------------------------------------------------------------------------------------ */ }
        .component-onboarding.component-onboarding-4 > div > div > button:nth-child(1), .component-onboarding.component-onboarding-4 > div > div > button:nth-child(2) {
          margin-top: 0px; }
        .component-onboarding.component-onboarding-4 > div > div > button:nth-child(odd) {
          margin-right: 7.5px; }
        .component-onboarding.component-onboarding-4 > div > div > button:nth-child(even) {
          margin-left: 7.5px; }
        .component-onboarding.component-onboarding-4 > div > div > button > i {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: 5vh;
          max-height: 39px;
          top: 10px;
          left: 0px;
          right: 0px;
          /* Image */
          /* -------------------------------------------------------------------------------- */
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center; }
        .component-onboarding.component-onboarding-4 > div > div > button > span {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          bottom: 10px;
          left: 0px;
          right: 0px;
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 16px;
          text-align: center;
          white-space: nowrap;
          /* Breakpoints */
          /* -------------------------------------------------------------------------------- */ }
          @media (max-width: 374px) {
            .component-onboarding.component-onboarding-4 > div > div > button > span {
              font-size: 15px;
              line-height: 15px; } }
          @media (max-width: 340px) {
            .component-onboarding.component-onboarding-4 > div > div > button > span {
              font-size: 14px;
              line-height: 14px; } }
        .component-onboarding.component-onboarding-4 > div > div > button.selected {
          background-color: white;
          border-color: white;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
          /* Icon */
          /* -------------------------------------------------------------------------------- */ }
          .component-onboarding.component-onboarding-4 > div > div > button.selected:after {
            position: absolute;
            display: block;
            content: " ";
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 24px;
            height: 24px;
            top: 3px;
            right: 3px;
            /* Image */
            /* ---------------------------------------------------------------------------- */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            background-image: url(/assets/images/selected-flower.png); }
        .component-onboarding.component-onboarding-4 > div > div > button.icon-3 > i {
          background-image: url(/assets/images/stresses/personal-family-primary.svg); }
        .component-onboarding.component-onboarding-4 > div > div > button.icon-4 > i {
          background-image: url(/assets/images/stresses/work-life-primary.svg); }
        .component-onboarding.component-onboarding-4 > div > div > button.icon-5 > i {
          background-image: url(/assets/images/stresses/hormones-primary.svg); }
        .component-onboarding.component-onboarding-4 > div > div > button.icon-6 > i {
          background-image: url(/assets/images/stresses/finances-primary.svg); }
        .component-onboarding.component-onboarding-4 > div > div > button.icon-7 > i {
          background-image: url(/assets/images/stresses/travel-primary.svg); }
        .component-onboarding.component-onboarding-4 > div > div > button.icon-8 > i {
          background-image: url(/assets/images/stresses/physical-activity-primary.svg); }
  .component-onboarding.component-onboarding-5 {
    /* Flower */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-onboarding.component-onboarding-5 > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Breakpoints */
      /* ---------------------------------------------------------------------------------------- */
      /* Finger */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */ }
      @media (max-width: 374px) {
        .component-onboarding.component-onboarding-5 > div > div {
          margin-left: -5px;
          margin-right: -5px; } }
      @media (max-width: 340px) {
        .component-onboarding.component-onboarding-5 > div > div {
          margin-left: -10px;
          margin-right: -10px; } }
      @media (max-width: 320px) {
        .component-onboarding.component-onboarding-5 > div > div {
          margin-left: -15px;
          margin-right: -15px; } }
      .component-onboarding.component-onboarding-5 > div > div > i.finger {
        position: absolute;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: -6% 0px 0px -6%;
        width: 12%;
        height: 12%;
        top: 49%;
        left: 51%;
        background-color: rgba(91, 138, 151, 0.5);
        border: 2px solid #5b8a97;
        border-radius: 50%;
        opacity: 0;
        /* Image */
        /* ------------------------------------------------------------------------------------ */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url(/assets/images/fingerprint.svg); }
      .component-onboarding.component-onboarding-5 > div > div > .component-flower-large svg #text0 {
        opacity: 0; }
      .component-onboarding.component-onboarding-5 > div > div > .component-flower-large svg #text1 {
        opacity: 0; }
      .component-onboarding.component-onboarding-5 > div > div > .component-flower-large svg #text2 {
        opacity: 0; }
      .component-onboarding.component-onboarding-5 > div > div > .component-flower-large svg #text3 {
        opacity: 0; }
      .component-onboarding.component-onboarding-5 > div > div > .component-flower-large svg #text4 {
        opacity: 0; }
  .component-onboarding.component-onboarding-6 {
    /* Flower */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-onboarding.component-onboarding-6 > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Breakpoints */
      /* ---------------------------------------------------------------------------------------- */ }
      @media (max-width: 374px) {
        .component-onboarding.component-onboarding-6 > div > div {
          margin-left: -5px;
          margin-right: -5px; } }
      @media (max-width: 340px) {
        .component-onboarding.component-onboarding-6 > div > div {
          margin-left: -10px;
          margin-right: -10px; } }
      @media (max-width: 320px) {
        .component-onboarding.component-onboarding-6 > div > div {
          margin-left: -15px;
          margin-right: -15px; } }

/* Component - Legals */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Legals */
/* ---------------------------------------------------------------------------------------------------- */
.component-legals {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background-color: #4C747F;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-legals {
      padding-top: constant(safe-area-inset-top); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-legals {
      padding-top: env(safe-area-inset-top); } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-legals {
      padding-bottom: constant(safe-area-inset-bottom); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-legals {
      padding-bottom: env(safe-area-inset-bottom); } }
  .component-legals > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5vh 20px 5vh 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Logo */
    /* -------------------------------------------------------------------------------------------- */
    /* Subtitle */
    /* -------------------------------------------------------------------------------------------- */
    /* Form */
    /* -------------------------------------------------------------------------------------------- */
    /* Breakpoints */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-legals > div > h1 {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px auto 0px auto;
      width: 184px;
      height: 83px; }
      .component-legals > div > h1 > span {
        visibility: hidden; }
    .component-legals > div > h2 {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: 12px;
      font-family: "Zilla Slab", serif;
      color: white;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 19px;
      text-align: center; }
    .component-legals > div > .form {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Checkbox */
      /* ---------------------------------------------------------------------------------------- */
      /* Button */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-legals > div > .form > .input-checkbox {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 30px 0px 0px 0px;
        width: auto;
        height: auto;
        /* Button */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */
        /* Error */
        /* ------------------------------------------------------------------------------------ */ }
        .component-legals > div > .form > .input-checkbox > button {
          position: relative;
          display: inline-block;
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 15px;
          width: 40px;
          height: 40px;
          vertical-align: middle;
          background-color: #5B8A97;
          border: 2px solid #3E5E66;
          border-radius: 8px;
          outline: none;
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* Transition */
          /* -------------------------------------------------------------------------------- */
          transition: border-color 0.2s ease-out , background-color 0.2s ease-out;
          /* Active */
          /* -------------------------------------------------------------------------------- */
          /* SVG */
          /* -------------------------------------------------------------------------------- */ }
          .component-legals > div > .form > .input-checkbox > button:active {
            background-color: #3E5E66; }
          .component-legals > div > .form > .input-checkbox > button > svg {
            position: absolute;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 16px;
            height: 13px;
            top: 12px;
            left: 10px;
            fill: white; }
        .component-legals > div > .form > .input-checkbox > span {
          position: relative;
          display: inline-block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: calc( 100% - 55px);
          height: auto;
          vertical-align: middle;
          font-family: "Open Sans", sans-serif;
          color: white;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 16px;
          text-align: left;
          /* Link */
          /* -------------------------------------------------------------------------------- */ }
          .component-legals > div > .form > .input-checkbox > span > a {
            color: #F2E77E;
            white-space: nowrap; }
            .component-legals > div > .form > .input-checkbox > span > a:active {
              color: #184C51; }
        .component-legals > div > .form > .input-checkbox.error {
          /* Button */
          /* -------------------------------------------------------------------------------- */ }
          .component-legals > div > .form > .input-checkbox.error > button {
            border-color: #ff3b30;
            /* SVG */
            /* ---------------------------------------------------------------------------- */
            /* Icon */
            /* ---------------------------------------------------------------------------- */ }
            .component-legals > div > .form > .input-checkbox.error > button > svg {
              display: none; }
            .component-legals > div > .form > .input-checkbox.error > button:after {
              position: absolute;
              display: block;
              content: "!";
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: 36px;
              height: 36px;
              top: 0px;
              left: 0px;
              font-family: "Open Sans", sans-serif;
              color: white;
              font-size: 20px;
              font-weight: 700;
              letter-spacing: normal;
              line-height: 36px;
              text-align: center; }
      .component-legals > div > .form > .input-button {
        margin-top: 30px;
        background-color: #5B8A97;
        border-color: #3E5E66;
        color: white; }
        .component-legals > div > .form > .input-button:active {
          background-color: #3E5E66; }
    @media (max-width: 374px) {
      .component-legals > div {
        /* Subtitle */
        /* ---------------------------------------------------------------------------------------- */
        /* Form */
        /* ---------------------------------------------------------------------------------------- */ }
        .component-legals > div > h2 {
          font-size: 15px;
          line-height: 17px; }
        .component-legals > div > .form {
          /* Button */
          /* ------------------------------------------------------------------------------------ */ }
          .component-legals > div > .form > .input-button {
            font-size: 16px;
            height: 40px;
            line-height: 36px; } }

/* Component - Legals - Header */
/* ------------------------------------------------------------------------------------------------ */
html.page-unauthenticated-onboarding.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals body > .app-container > .app-header > div > button > svg {
  fill: white; }

/* Component - Login */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Login */
/* ---------------------------------------------------------------------------------------------------- */
.component-login {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background-color: #4C747F;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-login {
      padding-top: constant(safe-area-inset-top); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-login {
      padding-top: env(safe-area-inset-top); } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-login {
      padding-bottom: constant(safe-area-inset-bottom); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-login {
      padding-bottom: env(safe-area-inset-bottom); } }
  .component-login > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5vh 20px 5vh 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Focus */
    /* -------------------------------------------------------------------------------------------- */
    /* Logo */
    /* -------------------------------------------------------------------------------------------- */
    /* Subtitle */
    /* -------------------------------------------------------------------------------------------- */
    /* Form */
    /* -------------------------------------------------------------------------------------------- */
    /* Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Small Screen */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-login.focus > div {
      justify-content: center; }
    .component-login > div > h1 {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px auto 0px auto;
      width: 184px;
      height: 83px;
      /* Focus */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-login > div > h1 > span {
        visibility: hidden; }
      .component-login.focus > div > h1 {
        display: none; }
    .component-login > div > h2 {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: 12px;
      font-family: "Zilla Slab", serif;
      color: white;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 17px;
      text-align: center;
      /* Focus */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-login.focus > div > h2 {
        display: none; }
    .component-login > div > .form {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Question */
      /* ---------------------------------------------------------------------------------------- */
      /* Button */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-login > div > .form > .question {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: 50px;
        /* Additional */
        /* ------------------------------------------------------------------------------------ */
        /* Input */
        /* ------------------------------------------------------------------------------------ */
        /* Error */
        /* ------------------------------------------------------------------------------------ */ }
        .component-login > div > .form > .question + .question {
          margin-top: 15px; }
        .component-login > div > .form > .question > .input-text {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: 50px;
          /* Input - Text */
          /* -------------------------------------------------------------------------------- */
          /* Input - Password */
          /* -------------------------------------------------------------------------------- */ }
          .component-login > div > .form > .question > .input-text > input {
            position: relative;
            display: inline-block;
            padding: 0px 10px 0px 10px;
            margin: 0px 0px 0px 0px;
            width: 100%;
            height: 50px;
            box-sizing: border-box;
            vertical-align: top;
            cursor: pointer;
            /* Font */
            /* ---------------------------------------------------------------------------- */
            font-family: "Open Sans", sans-serif;
            color: white;
            font-size: 17px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: normal;
            /* Background */
            /* ---------------------------------------------------------------------------- */
            background: transparent;
            /* Border */
            /* ---------------------------------------------------------------------------- */
            border: 2px solid #5B8A97;
            border-radius: 8px;
            /* Remove Browser Styling */
            /* ---------------------------------------------------------------------------- */
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            resize: none;
            /* Caret Color */
            /* ---------------------------------------------------------------------------- */
            caret-color: white;
            /* Remove Clear Button */
            /* ---------------------------------------------------------------------------- */
            /* Remove Auto Fill Button */
            /* ---------------------------------------------------------------------------- */
            /* Remove Auto Fill Button */
            /* ---------------------------------------------------------------------------- */
            /* Placeholder */
            /* ---------------------------------------------------------------------------- */
            /* Placeholder - Focus */
            /* ---------------------------------------------------------------------------- */ }
            .component-login > div > .form > .question > .input-text > input::-ms-clear {
              display: none;
              width: 0px;
              height: 0px; }
            .component-login > div > .form > .question > .input-text > input::-ms-reveal {
              display: none;
              width: 0px;
              height: 0px; }
            .component-login > div > .form > .question > .input-text > input::-webkit-clear-button {
              display: none; }
            .component-login > div > .form > .question > .input-text > input::-webkit-contacts-auto-fill-button {
              display: none;
              visibility: hidden;
              pointer-events: none; }
            .component-login > div > .form > .question > .input-text > input::-webkit-credentials-auto-fill-button {
              display: none;
              visibility: hidden;
              pointer-events: none; }
            .component-login > div > .form > .question > .input-text > input::-webkit-caps-lock-indicator {
              display: none;
              visibility: hidden;
              pointer-events: none; }
            .component-login > div > .form > .question > .input-text > input:-webkit-autofill {
              -webkit-text-fill-color: white;
              background-color: #456973;
              transition: background-color 9999s ease-in-out 0s;
              transition-delay: 9999s; }
            .component-login > div > .form > .question > .input-text > input:-moz-autofill {
              background: #456973; }
            .component-login > div > .form > .question > .input-text > input::-webkit-input-placeholder {
              text-transform: inherit !important;
              color: white !important;
              opacity: 1 !important; }
            .component-login > div > .form > .question > .input-text > input:-moz-placeholder {
              text-transform: inherit !important;
              color: white !important;
              opacity: 1 !important; }
            .component-login > div > .form > .question > .input-text > input::-moz-placeholder {
              text-transform: inherit !important;
              color: white !important;
              opacity: 1 !important; }
            .component-login > div > .form > .question > .input-text > input:-ms-input-placeholder {
              text-transform: inherit !important;
              color: white !important; }
            .component-login > div > .form > .question > .input-text > input:focus::-webkit-input-placeholder {
              color: #5B8A97 !important; }
            .component-login > div > .form > .question > .input-text > input:focus:-moz-placeholder {
              color: #5B8A97 !important; }
            .component-login > div > .form > .question > .input-text > input:focus::-moz-placeholder {
              color: #5B8A97 !important; }
            .component-login > div > .form > .question > .input-text > input:focus:-ms-input-placeholder {
              color: #5B8A97 !important; }
          .component-login > div > .form > .question > .input-text.input-password {
            /* Input - Text */
            /* ---------------------------------------------------------------------------- */
            /* Icon */
            /* ---------------------------------------------------------------------------- */ }
            .component-login > div > .form > .question > .input-text.input-password > input {
              padding-right: 35px; }
            .component-login > div > .form > .question > .input-text.input-password > i {
              position: absolute;
              display: block;
              content: " ";
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: 18px;
              height: 23px;
              top: -0px;
              right: 0px;
              border-style: solid;
              border-color: transparent;
              border-width: 12px 10px 15px 10px;
              cursor: pointer; }
            .component-login > div > .form > .question > .input-text.input-password.visible > i {
              width: 18px;
              height: 28px;
              border-top-width: 7px; }
        .component-login > div > .form > .question > p {
          position: absolute;
          display: block;
          padding: 0px 5px 0px 5px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: 16px;
          bottom: -7px;
          right: 10px;
          background-color: #5B8A97;
          border-radius: 3px;
          font-family: "Open Sans", sans-serif;
          color: #F2E77E;
          font-size: 10px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 16px;
          white-space: nowrap;
          pointer-events: none; }
      .component-login > div > .form > .input-button {
        margin-top: 15px;
        background-color: #5B8A97;
        border-color: #3E5E66;
        color: white; }
        .component-login > div > .form > .input-button:active {
          background-color: #3E5E66; }
    .component-login > div > .text {
      position: relative;
      display: table;
      padding: 0px 0px 0px 0px;
      margin: 0px auto 0px auto;
      width: auto;
      height: auto;
      text-align: center;
      /* Focus */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-login.focus > div > .text {
        display: none; }
      .component-login > div > .text > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px auto 0px auto;
        /* Large Text */
        /* ------------------------------------------------------------------------------------ */
        /* Small Text */
        /* ------------------------------------------------------------------------------------ */
        /* Link */
        /* ------------------------------------------------------------------------------------ */ }
        .component-login > div > .text > p:first-child {
          padding-bottom: 13px;
          border-bottom: 1px solid #F2E77E;
          font-family: "Open Sans", sans-serif;
          color: white;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 17px; }
        .component-login > div > .text > p:last-child {
          padding-top: 14px;
          font-family: "Open Sans", sans-serif;
          color: white;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 12px; }
        .component-login > div > .text > p > a {
          color: white;
          text-decoration: none; }
          .component-login > div > .text > p > a:active {
            color: #F2E77E; }
    html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div {
      /* Breakpoints */
      /* ---------------------------------------------------------------------------------------- */ }
      @media (max-width: 374px) {
        html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div {
          /* Subtitle */
          /* ------------------------------------------------------------------------------------ */
          /* Form */
          /* ------------------------------------------------------------------------------------ */
          /* Text */
          /* ------------------------------------------------------------------------------------ */ }
          html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > h2 {
            font-size: 15px;
            line-height: 15px;
            white-space: nowrap; }
          html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .form {
            /* Question */
            /* -------------------------------------------------------------------------------- */
            /* Button */
            /* -------------------------------------------------------------------------------- */ }
            html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .form > .question {
              height: 40px;
              /* Input */
              /* ---------------------------------------------------------------------------- */ }
              html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .form > .question > .input-text {
                height: 40px;
                /* Input - Text */
                /* ------------------------------------------------------------------------ */
                /* Input - Password */
                /* ------------------------------------------------------------------------ */ }
                html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .form > .question > .input-text > input {
                  height: 40px;
                  font-size: 15px; }
                html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .form > .question > .input-text.input-password > i {
                  border-top-width: 7px;
                  border-bottom-width: 10px; }
            html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .form > .input-button {
              font-size: 16px;
              height: 40px;
              line-height: 36px; }
          html.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account .component-login > div > .text > p:first-child {
            font-size: 15px;
            line-height: 15px; } }

/* Component - Login - Header */
/* ---------------------------------------------------------------------------------------------------- */
html.page-unauthenticated-log-in body > .app-container > .app-header > div > button > svg {
  fill: white; }

html.page-unauthenticated-onboarding.page-unauthenticated-onboarding-onboarding-2-onboarding-3-onboarding-4-onboarding-5-onboarding-6-legals-create-account body > .app-container > .app-header > div > button > svg {
  fill: white; }

/* Component - Dashboard */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Dashboard */
/* ---------------------------------------------------------------------------------------------------- */
.component-dashboard {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-dashboard {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-dashboard {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-dashboard {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-dashboard {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-dashboard {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-dashboard {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-dashboard {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-dashboard {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-dashboard {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-dashboard {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-dashboard {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-dashboard {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-dashboard {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-dashboard {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-dashboard {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-dashboard {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-dashboard {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-dashboard {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-dashboard {
    background-size: 100% 100%; }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-dashboard {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-dashboard {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-dashboard > div {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Header */
    /* -------------------------------------------------------------------------------------------- */
    /* Content */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-dashboard > div > header {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 92px;
      overflow: hidden;
      /* Safe Area */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */ }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-dashboard > div > header {
          --safe-area-inset-top: constant( safe-area-inset-top );
          height: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-dashboard > div > header {
          --safe-area-inset-top: env( safe-area-inset-top );
          height: calc( 92px + var( --safe-area-inset-top )); } }
      .component-dashboard > div > header > h1 {
        position: absolute;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        bottom: 11px;
        left: 20px;
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 34px;
        white-space: normal; }
    .component-dashboard > div > section {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 10px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: calc( 100% - 92px);
      overflow: hidden;
      /* Safe Area */
      /* ---------------------------------------------------------------------------------------- */
      /* Background */
      /* ---------------------------------------------------------------------------------------- */
      background-color: white;
      /* Border Radius */
      /* ---------------------------------------------------------------------------------------- */
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      box-shadow: 0px 0px 3px 0px rgba(24, 76, 81, 0.2);
      /* Gradient Mask */
      /* ---------------------------------------------------------------------------------------- */
      /* Scroll */
      /* ---------------------------------------------------------------------------------------- */ }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-dashboard > div > section {
          --safe-area-inset-top: constant( safe-area-inset-top );
          height: calc( 100% - 92px - var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-dashboard > div > section {
          --safe-area-inset-top: env( safe-area-inset-top );
          height: calc( 100% - 92px - var( --safe-area-inset-top )); } }
      .component-dashboard > div > section:before {
        position: absolute;
        display: block;
        content: " ";
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: 30px;
        left: 15px;
        right: 15px;
        background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 75%);
        z-index: 1; }
      .component-dashboard > div > section > div {
        position: relative;
        display: block;
        padding: 0px 40px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 100%;
        /* Scroll */
        /* ------------------------------------------------------------------------------------ */
        overflow: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        /* Inner */
        /* ------------------------------------------------------------------------------------ */ }
        .component-dashboard > div > section > div > * {
          -webkit-overflow-scrolling: auto; }
        .component-dashboard > div > section > div > div {
          position: relative;
          display: block;
          box-sizing: border-box;
          padding: 20px 20px 40px 20px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: auto;
          /* Subitle */
          /* -------------------------------------------------------------------------------- */
          /* Text */
          /* -------------------------------------------------------------------------------- */
          /* Imports */
          /* -------------------------------------------------------------------------------- */
          /* Component - Dashboard - Flower */
          /* ---------------------------------------------------------------------------------------------------- */
          /* Component - Dashboard - Chart */
          /* ---------------------------------------------------------------------------------------------------- */
          /* Component - Dashboard - Suggestion */
          /* ---------------------------------------------------------------------------------------------------- */ }
          .component-dashboard > div > section > div > div > h2 {
            position: relative;
            display: inline-block;
            padding: 30px 0px 0px 0px;
            margin: -5px 0px -5px 0px;
            width: 100%;
            height: auto;
            pointer-events: none;
            /* Font */
            /* ---------------------------------------------------------------------------- */
            font-family: "Zilla Slab", serif;
            color: #184C51;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 22px;
            text-align: left;
            /* First */
            /* ---------------------------------------------------------------------------- */ }
            .component-dashboard > div > section > div > div > h2:first-child {
              padding-top: 0px; }
          .component-dashboard > div > section > div > div > p {
            position: relative;
            display: inline-block;
            padding: 15px 0px 0px 0px;
            margin: -5px 0px -7px 0px;
            width: auto;
            height: auto;
            font-family: "Open Sans", sans-serif;
            color: #5B8A97;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 19px;
            text-align: left; }
          .component-dashboard > div > section > div > div > .component-dashboard-flower {
            position: relative;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 15px 0px 0px 0px;
            width: auto;
            height: auto;
            /* Columns */
            /* ------------------------------------------------------------------------------------------------ */ }
            .component-dashboard > div > section > div > div > .component-dashboard-flower > div {
              position: relative;
              display: inline-block;
              box-sizing: border-box;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: auto;
              vertical-align: middle;
              /* Left */
              /* -------------------------------------------------------------------------------------------- */
              /* Right */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div > .component-dashboard-flower > div:first-child {
                padding-right: 10px;
                width: 30%;
                /* Divider */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-dashboard > div > section > div > div > .component-dashboard-flower > div:first-child:before {
                  position: absolute;
                  display: block;
                  content: " ";
                  padding: 0px 0px 0px 0px;
                  margin: 0px 0px 0px 0px;
                  width: 1px;
                  height: 100%;
                  right: -1px;
                  background-color: #D6D6D6; }
              .component-dashboard > div > section > div > div > .component-dashboard-flower > div:last-child {
                padding-left: 10px;
                width: 70%;
                /* Text */
                /* ---------------------------------------------------------------------------------------- */
                /* Divider */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-dashboard > div > section > div > div > .component-dashboard-flower > div:last-child > p {
                  position: relative;
                  display: inline-block;
                  padding: 20px 0px 0px 0px;
                  margin: -5px 0px -4px 0px;
                  width: 100%;
                  height: auto;
                  /* Font */
                  /* ------------------------------------------------------------------------------------ */
                  font-family: "Open Sans", sans-serif;
                  color: #5B8A97;
                  font-size: 15px;
                  font-weight: 400;
                  letter-spacing: normal;
                  line-height: 20px;
                  /* First */
                  /* ------------------------------------------------------------------------------------ */
                  /* Stress */
                  /* ------------------------------------------------------------------------------------ */ }
                  .component-dashboard > div > section > div > div > .component-dashboard-flower > div:last-child > p:first-child {
                    padding-top: 0px; }
                  .component-dashboard > div > section > div > div > .component-dashboard-flower > div:last-child > p > strong {
                    color: #184C51;
                    font-weight: normal; }
                .component-dashboard > div > section > div > div > .component-dashboard-flower > div:last-child:before {
                  position: absolute;
                  display: block;
                  content: " ";
                  padding: 0px 0px 0px 0px;
                  margin: 0px 0px 0px 0px;
                  width: 1px;
                  height: 100%;
                  left: 0px;
                  background-color: #D6D6D6; }
          .component-dashboard > div > section > div > div .component-dashboard-chart {
            position: relative;
            display: flex;
            flex-direction: row;
            padding: 0px 0px 0px 0px;
            margin: 45px 0px 0px 0px;
            width: auto;
            height: 20vh;
            max-height: 150px;
            list-style: none;
            /* Cursor */
            /* ------------------------------------------------------------------------------------------------ */
            pointer-events: auto;
            cursor: pointer;
            /* Disabled */
            /* ------------------------------------------------------------------------------------------------ */
            /* Columns */
            /* ------------------------------------------------------------------------------------------------ */ }
            .component-dashboard > div > section > div > div .component-dashboard-chart.disabled {
              pointer-events: none;
              cursor: auto;
              /* Columns */
              /* -------------------------------------------------------------------------------------------- */
              /* Columns */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div .component-dashboard-chart.disabled > .component-dashboard-chart-bar {
                opacity: 0.20; }
              .component-dashboard > div > section > div > div .component-dashboard-chart.disabled:after {
                position: absolute;
                display: block;
                box-sizing: border-box;
                content: "As you log what you are happy with daily, the relevant columns of this chart will fill up. Tap anywhere on it to view a summary of the last 7, 30 or 365 days.";
                padding: 0px 15px 0px 15px;
                margin: -11px 0px 0px 0px;
                width: 100%;
                height: auto;
                top: 50%;
                left: auto;
                transform: translate(0px, -50%);
                font-family: "Open Sans", sans-serif;
                color: #184C51;
                font-size: 15px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 19px;
                text-align: center; }
            .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar {
              position: relative;
              display: flex;
              flex-grow: 1;
              align-items: flex-end;
              box-sizing: border-box;
              padding: 0px 0px 24px 0px;
              margin: 0px 2px 0px 2px;
              width: auto;
              height: 100%;
              /* First */
              /* -------------------------------------------------------------------------------------------- */
              /* Last */
              /* -------------------------------------------------------------------------------------------- */
              /* Inner */
              /* -------------------------------------------------------------------------------------------- */
              /* Count */
              /* -------------------------------------------------------------------------------------------- */
              /* Icons */
              /* -------------------------------------------------------------------------------------------- */
              /* Caffeine Intake */
              /* -------------------------------------------------------------------------------------------- */
              /* Hydration */
              /* -------------------------------------------------------------------------------------------- */
              /* Screen Time */
              /* -------------------------------------------------------------------------------------------- */
              /* General Health */
              /* -------------------------------------------------------------------------------------------- */
              /* Time Out For Me */
              /* -------------------------------------------------------------------------------------------- */
              /* Preparation For Sleep */
              /* -------------------------------------------------------------------------------------------- */
              /* Movement / Exercise */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar:first-child {
                margin-left: 0px; }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar:last-child {
                margin-right: 0px; }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar > div {
                position: relative;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 100%;
                height: 100%;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                background-color: #9DB9C0;
                overflow: hidden;
                /* Bar */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar > div > i {
                  position: relative;
                  display: block;
                  padding: 0px 0px 0px 0px;
                  margin: 0px 0px 0px 0px;
                  width: 100%;
                  height: 100%;
                  background-color: #5B8A97;
                  /* Transform */
                  /* ------------------------------------------------------------------------------------ */
                  transform: scaleY(0);
                  transform-origin: bottom center;
                  /* Transition */
                  /* ------------------------------------------------------------------------------------ */
                  transition: transform 1s ease-in-out; }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar > span {
                position: absolute;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 100%;
                height: 24px;
                bottom: 0px;
                left: 0px;
                background-color: #CDDCE0;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
                /* Font */
                /* ---------------------------------------------------------------------------------------- */
                font-family: "Open Sans", sans-serif;
                color: #184C51;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: normal;
                line-height: 24px;
                text-align: center;
                white-space: nowrap;
                letter-spacing: 2px;
                /* Font - Month */
                /* ---------------------------------------------------------------------------------------- */
                /* Font - Year */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.month > span {
                  font-size: 10px;
                  letter-spacing: 1px; }
                .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.year > span {
                  font-size: 9px;
                  letter-spacing: 0px; }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar:before {
                position: absolute;
                display: block;
                content: " ";
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 100%;
                height: 22px;
                top: -30px;
                left: 0px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center; }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-1:before {
                background-image: url(/assets/images/binary-stresses/caffeine-intake-accent.svg); }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-2:before {
                background-image: url(/assets/images/binary-stresses/hydration-accent.svg); }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-3:before {
                background-image: url(/assets/images/binary-stresses/screen-time-accent.svg); }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-4:before {
                background-image: url(/assets/images/binary-stresses/general-health-accent.svg); }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-5:before {
                background-image: url(/assets/images/binary-stresses/time-out-for-me-accent.svg); }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-6:before {
                background-image: url(/assets/images/binary-stresses/preparation-for-sleep-accent.svg); }
              .component-dashboard > div > section > div > div .component-dashboard-chart > .component-dashboard-chart-bar.icon-7:before {
                background-image: url(/assets/images/binary-stresses/movement-exercise-accent.svg); }
          .component-dashboard > div > section > div > div .component-dashboard-suggestion {
            position: relative;
            display: block;
            box-sizing: border-box;
            padding: 15px 15px 15px 15px;
            margin: 15px 0px 0px 0px;
            width: 100%;
            height: auto;
            min-height: 63px;
            border-radius: 6px;
            background-color: white;
            border: 1px solid #D6D6D6;
            /* Additional */
            /* ------------------------------------------------------------------------------------------------ */
            /* Button */
            /* ------------------------------------------------------------------------------------------------ */
            /* Line */
            /* ------------------------------------------------------------------------------------------------ */
            /* Icon */
            /* ------------------------------------------------------------------------------------------------ */
            /* Small */
            /* ------------------------------------------------------------------------------------------------ */
            /* Large */
            /* ------------------------------------------------------------------------------------------------ */
            /* Icon - Binaural Beats */
            /* ------------------------------------------------------------------------------------------------ */
            /* Icon - Listen Yourself Better */
            /* ------------------------------------------------------------------------------------------------ */
            /* Icon - Guided Breathing */
            /* ------------------------------------------------------------------------------------------------ */
            /* Icon - Tip */
            /* ------------------------------------------------------------------------------------------------ */
            /* Icon - Knowledge */
            /* ------------------------------------------------------------------------------------------------ */ }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion + .component-dashboard-suggestion {
              margin-top: 10px; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion[role="button"] {
              cursor: pointer;
              /* Active */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion[role="button"]:active {
                border-color: #184C51; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion:after {
              position: absolute;
              display: block;
              content: " ";
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: 1px;
              height: auto;
              left: 65px;
              top: 15px;
              bottom: 15px;
              background-color: #EEEEEE; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion > i {
              position: absolute;
              display: block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: 35px;
              height: 35px;
              top: 15px;
              left: 15px;
              /* SVG */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion > i > svg {
                fill: #5B8A97; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.small {
              /* Title */
              /* -------------------------------------------------------------------------------------------- */
              /* Text */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion.small > h2 {
                position: relative;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: -1px 0px 0px 66px;
                width: auto;
                height: auto;
                font-family: "Open Sans", sans-serif;
                color: #999999;
                font-size: 13px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 13px;
                text-align: left; }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion.small > p {
                position: relative;
                display: block;
                padding: 15px 0px 0px 0px;
                margin: -7px 0px -4px 66px;
                width: auto;
                height: auto;
                font-family: "Open Sans", sans-serif;
                color: #5B8A97;
                font-size: 15px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 20px;
                text-align: left; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.large {
              /* Title */
              /* -------------------------------------------------------------------------------------------- */
              /* Text */
              /* -------------------------------------------------------------------------------------------- */
              /* Time */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion.large > h2 {
                position: relative;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: -5px 0px -2px 66px;
                width: auto;
                height: auto;
                font-family: "Open Sans", sans-serif;
                color: #5B8A97;
                font-size: 15px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 20px;
                text-align: left; }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion.large > p {
                position: relative;
                display: block;
                padding: 15px 0px 0px 0px;
                margin: 0px 0px -3px 66px;
                width: auto;
                height: auto;
                font-family: "Open Sans", sans-serif;
                color: #999999;
                font-size: 13px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 16px;
                text-align: left; }
                .component-dashboard > div > section > div > div .component-dashboard-suggestion.large > p > span {
                  color: #5B8A97; }
              .component-dashboard > div > section > div > div .component-dashboard-suggestion.large > time {
                position: relative;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: -5px 0px -4px 66px;
                width: auto;
                height: auto;
                /* Item */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-dashboard > div > section > div > div .component-dashboard-suggestion.large > time > span {
                  position: relative;
                  display: inline-block;
                  padding: 0px 0px 0px 15px;
                  margin: 15px 15px 0px 0px;
                  width: auto;
                  height: auto;
                  font-family: "Zilla Slab", serif;
                  color: #999999;
                  font-size: 14px;
                  font-weight: 400;
                  letter-spacing: normal;
                  line-height: 16px;
                  text-align: left;
                  /* SVG */
                  /* ------------------------------------------------------------------------------------ */ }
                  .component-dashboard > div > section > div > div .component-dashboard-suggestion.large > time > span > svg {
                    position: absolute;
                    display: block;
                    width: 10px;
                    height: 10px;
                    top: 3px;
                    left: 0px;
                    fill: #999999; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.binaural-beats > i > svg {
              width: 35px;
              height: 33px; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.listen-yourself-better > i > svg {
              width: 35px;
              height: 26px; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.guided-breathing > i > svg {
              width: 35px;
              height: 33px; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.tip > i > svg {
              width: 31px;
              height: 31px;
              margin-left: 2px; }
            .component-dashboard > div > section > div > div .component-dashboard-suggestion.knowledge > i > svg {
              width: 32px;
              height: 35px;
              margin-left: 1.5px; }

/* Component - Diary */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Diary */
/* ---------------------------------------------------------------------------------------------------- */
.component-diary {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-diary {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-diary {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-diary {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-diary {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-diary {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-diary {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-diary {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-diary {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-diary {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-diary {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-diary {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-diary {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-diary {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-diary {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-diary {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-diary {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-diary {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-diary {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-diary {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-diary {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-diary {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-diary {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-diary {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-diary {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-diary {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-diary {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-diary > div {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 20px 20px 40px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Scroll */
    /* -------------------------------------------------------------------------------------------- */
    overflow: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* Year */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-diary > div > * {
      -webkit-overflow-scrolling: auto; }
    .component-diary > div > .component-diary-year {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Quarter */
      /* ---------------------------------------------------------------------------------------- */
      /* First Day */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-diary > div > .component-diary-year > .component-diary-quarter {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        /* Month */
        /* ------------------------------------------------------------------------------------ */ }
        .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: auto;
          /* Day */
          /* -------------------------------------------------------------------------------- */
          /* Component - Diary - Day */
          /* ---------------------------------------------------------------------------------------------------- */ }
          .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            box-sizing: border-box;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 100%;
            height: auto;
            /* Empty */
            /* ------------------------------------------------------------------------------------------------ */
            /* Not Empty */
            /* ------------------------------------------------------------------------------------------------ */
            /* Remove Button Style */
            /* ------------------------------------------------------------------------------------------------ */
            border: none;
            outline: none;
            background: none;
            /* Left */
            /* ------------------------------------------------------------------------------------------------ */
            /* Right */
            /* ------------------------------------------------------------------------------------------------ */ }
            .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day.empty {
              padding-top: 20px;
              min-height: 90px; }
            .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day:not(.empty) {
              padding-top: 35px;
              min-height: 105px; }
            .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time {
              position: relative;
              display: block;
              box-sizing: border-box;
              padding: 0px 20px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: auto;
              white-space: nowrap;
              /* Day */
              /* -------------------------------------------------------------------------------------------- */
              /* Year */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time > h2 {
                position: relative;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: -10px 0px 0px 0px;
                width: 30px;
                height: auto;
                /* Font */
                /* ---------------------------------------------------------------------------------------- */
                font-family: "Zilla Slab", serif;
                color: #184C51;
                font-size: 36px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 36px;
                text-align: center;
                /* Month */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time > h2 > span {
                  position: relative;
                  display: block;
                  padding: 0px 0px 0px 0px;
                  margin: 5px 0px 0px 0px;
                  width: 30px;
                  height: auto;
                  font-size: 20px;
                  line-height: 20px; }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time > span {
                position: relative;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: 7px 0px -4px 0px;
                width: 30px;
                height: auto;
                /* Font */
                /* ---------------------------------------------------------------------------------------- */
                font-family: "Open Sans", sans-serif;
                color: #999999;
                font-size: 12px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 16px;
                text-align: center; }
            .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div {
              position: relative;
              display: block;
              box-sizing: border-box;
              flex: 1;
              padding: 15px 15px 15px 15px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: auto;
              min-height: 70px;
              border-radius: 6px;
              background-color: white;
              border: 1px solid #D6D6D6;
              /* Stresses */
              /* -------------------------------------------------------------------------------------------- */
              /* Component - Diary - Day - Stresses */
              /* ---------------------------------------------------------------------------------------------------- */
              /* Empty */
              /* -------------------------------------------------------------------------------------------- */
              /* Text */
              /* -------------------------------------------------------------------------------------------- */
              /* Button - Add */
              /* -------------------------------------------------------------------------------------------- */
              /* Button - Edit */
              /* -------------------------------------------------------------------------------------------- */ }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses {
                position: absolute;
                display: block;
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: auto;
                height: 49px;
                top: -25px;
                left: 0px;
                white-space: nowrap;
                /* Icon */
                /* ------------------------------------------------------------------------------------------------ */ }
                .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i {
                  position: relative;
                  display: inline-block;
                  box-sizing: border-box;
                  padding: 0px 0px 0px 0px;
                  margin: 0px 0px 0px 0px;
                  width: auto;
                  height: auto;
                  vertical-align: middle;
                  border: 1px solid #D6D6D6;
                  background-color: white;
                  border-radius: 50%;
                  /* Flower */
                  /* -------------------------------------------------------------------------------------------- */
                  /* Binary Stresses */
                  /* -------------------------------------------------------------------------------------------- */ }
                  .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child {
                    padding: 2px 2px 2px 2px;
                    width: 49px;
                    height: 49px;
                    margin-left: 15px;
                    /* Flower */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Breakpoints */
                    /* ---------------------------------------------------------------------------------------- */ }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child > .component-flower-small {
                      background-color: transparent; }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child > .component-flower-small > i:nth-child(1) {
                        display: none; }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child > .component-flower-small > i:nth-child(2) {
                        display: none; }
                    @media (max-width: 374px) {
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child {
                        margin-left: 2px; } }
                  .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child) {
                    margin-left: 5px;
                    width: 23px;
                    height: 23px;
                    background-repeat: no-repeat;
                    background-position: center center;
                    /* Breakpoints */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - Caffeine Intake */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - Hydration */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - Screen Time */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - General Health */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - Time Out For Me */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - Preparation For Sleep */
                    /* ---------------------------------------------------------------------------------------- */
                    /* Icon - Movement / Exercise */
                    /* ---------------------------------------------------------------------------------------- */ }
                    @media (max-width: 374px) {
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child) {
                        margin-left: 2px; } }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-1 {
                      background-size: 65%;
                      background-image: url(/assets/images/binary-stresses/caffeine-intake-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-1.selected {
                        background-image: url(/assets/images/binary-stresses/caffeine-intake-primary.svg); }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-2 {
                      background-size: 50%;
                      background-image: url(/assets/images/binary-stresses/hydration-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-2.selected {
                        background-image: url(/assets/images/binary-stresses/hydration-primary.svg); }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-3 {
                      background-size: 60%;
                      background-image: url(/assets/images/binary-stresses/screen-time-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-3.selected {
                        background-image: url(/assets/images/binary-stresses/screen-time-primary.svg); }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-4 {
                      background-size: 80%;
                      background-image: url(/assets/images/binary-stresses/general-health-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-4.selected {
                        background-image: url(/assets/images/binary-stresses/general-health-primary.svg); }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-5 {
                      background-size: 60%;
                      background-image: url(/assets/images/binary-stresses/time-out-for-me-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-5.selected {
                        background-image: url(/assets/images/binary-stresses/time-out-for-me-primary.svg); }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-6 {
                      background-size: 50%;
                      background-image: url(/assets/images/binary-stresses/preparation-for-sleep-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-6.selected {
                        background-image: url(/assets/images/binary-stresses/preparation-for-sleep-primary.svg); }
                    .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-7 {
                      background-size: 60%;
                      background-image: url(/assets/images/binary-stresses/movement-exercise-grey.svg); }
                      .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-7.selected {
                        background-image: url(/assets/images/binary-stresses/movement-exercise-primary.svg); }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day.empty > div {
                border: none;
                background-color: rgba(91, 138, 151, 0.15); }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div > p {
                position: relative;
                display: block;
                padding: 0px 20px 0px 0px;
                margin: 15px 0px -4px 0px;
                width: auto;
                height: auto;
                word-break: break-word;
                /* Font */
                /* ---------------------------------------------------------------------------------------- */
                font-family: "Open Sans", sans-serif;
                color: #999999;
                font-size: 12px;
                font-weight: 400;
                letter-spacing: normal;
                line-height: 17px;
                text-align: left;
                /* Empty */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day.empty > div > p {
                  margin-top: -3px;
                  padding-right: 0px;
                  color: #184C51; }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div > .button-add {
                position: absolute;
                display: block;
                padding: 0px 15px 0px 15px;
                margin: 0px 0px 0px 0px;
                width: auto;
                height: 30px;
                bottom: 5px;
                right: 5px;
                background-color: #5B8A97;
                border-radius: 4px;
                border: none;
                outline: none;
                cursor: pointer;
                opacity: 1;
                /* Font */
                /* ---------------------------------------------------------------------------------------- */
                font-family: "Zilla Slab", serif;
                color: white;
                font-size: 13px;
                font-weight: 500;
                letter-spacing: normal;
                line-height: 30px;
                font-style: normal;
                text-align: center;
                /* Fast Touch */
                /* ---------------------------------------------------------------------------------------- */
                touch-action: manipulation;
                /* Active */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div > .button-add:active {
                  background-color: #184C51; }
              .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .button-edit {
                position: absolute;
                display: block;
                content: " ";
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 23px;
                height: 23px;
                bottom: 5px;
                right: 5px;
                background-color: #2D4040;
                border-radius: 50%;
                border: none;
                outline: none;
                cursor: pointer;
                /* Fast Touch */
                /* ---------------------------------------------------------------------------------------- */
                touch-action: manipulation;
                /* Active */
                /* ---------------------------------------------------------------------------------------- */
                /* SVG */
                /* ---------------------------------------------------------------------------------------- */ }
                .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .button-edit:active {
                  background-color: #5B8A97; }
                .component-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .button-edit > svg {
                  width: 12px;
                  height: 12px;
                  fill: white;
                  margin-top: -0.5px; }
      .component-diary > div > .component-diary-year:first-child > .component-diary-quarter:first-child > .component-diary-month:first-child > .component-diary-day:first-child {
        padding-top: 20px;
        min-height: 90px; }
      .component-diary > div > .component-diary-year:first-child > .component-diary-quarter:first-child > .component-diary-month:first-child > .component-diary-day:first-child.empty {
        padding-top: 0px;
        min-height: 70px; }

/* Component - History */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - History */
/* ---------------------------------------------------------------------------------------------------- */
.component-history {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-history {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-history {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-history {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-history {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-history {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-history {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-history {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-history {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-history {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-history {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-history {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-history {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-history {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-history {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-history {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-history {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-history {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-history {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-history {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-history {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-history {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-history {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-history {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-history {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-history {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-history {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-history > div {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Header */
    /* -------------------------------------------------------------------------------------------- */
    /* Imports */
    /* -------------------------------------------------------------------------------------------- */
    /* Component - History - Pie */
    /* ---------------------------------------------------------------------------------------------------- */
    /* Component - History - Flower */
    /* ---------------------------------------------------------------------------------------------------- */
    /* Component - History - Bar */
    /* ---------------------------------------------------------------------------------------------------- */
    /* Component - History - Cloud */
    /* ---------------------------------------------------------------------------------------------------- */
    /* Component - History - Diary */
    /* ---------------------------------------------------------------------------------------------------- */
    /* Component - History - Admin */
    /* ---------------------------------------------------------------------------------------------------- */ }
    .component-history > div > header {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      z-index: 1;
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      box-shadow: 0px 1px 0px 0px rgba(24, 76, 81, 0.2);
      /* Controls */
      /* ---------------------------------------------------------------------------------------- */
      /* Component - History - Controls */
      /* ---------------------------------------------------------------------------------------------------- */
      /* Nav */
      /* ---------------------------------------------------------------------------------------- */
      /* Component - History - Nav */
      /* ---------------------------------------------------------------------------------------------------- */ }
      .component-history > div > header .component-history-controls {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        padding: 20px 20px 5px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        /* Bar */
        /* ------------------------------------------------------------------------------------------------ */
        /* Button - Play */
        /* ------------------------------------------------------------------------------------------------ */
        /* Button - Pause */
        /* ------------------------------------------------------------------------------------------------ */
        /* Button - Calendar */
        /* ------------------------------------------------------------------------------------------------ */ }
        .component-history > div > header .component-history-controls > div {
          position: relative;
          display: block;
          flex: 1;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: 34px;
          background-color: #5B8A97;
          border-radius: 17px;
          overflow: hidden;
          /* Progress */
          /* -------------------------------------------------------------------------------------------- */
          /* Text */
          /* -------------------------------------------------------------------------------------------- */
          /* Progress */
          /* -------------------------------------------------------------------------------------------- */
          /* Transition */
          /* -------------------------------------------------------------------------------------------- */ }
          .component-history > div > header .component-history-controls > div > i {
            position: absolute;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 0px;
            height: 34px;
            top: 0px;
            left: 0px;
            background-color: #184C51;
            opacity: 0; }
          .component-history > div > header .component-history-controls > div > span {
            position: relative;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 100%;
            height: 34px;
            /* Font */
            /* ---------------------------------------------------------------------------------------- */
            font-family: "Zilla Slab", serif;
            color: white;
            font-size: 17px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 34px;
            text-align: center;
            white-space: nowrap;
            /* Breakpoints */
            /* ---------------------------------------------------------------------------------------- */ }
            @media (max-width: 374px) {
              .component-history > div > header .component-history-controls > div > span {
                font-size: 15px; } }
          .component-history > div > header .component-history-controls.button > div > i {
            opacity: 1; }
          .component-history > div > header .component-history-controls.transition > div > i {
            transition: width .5s linear; }
        .component-history > div > header .component-history-controls > .button-play {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 12px;
          width: 34px;
          height: 34px;
          background-color: transparent;
          border: none;
          /* SVG */
          /* -------------------------------------------------------------------------------------------- */
          /* Active */
          /* -------------------------------------------------------------------------------------------- */ }
          .component-history > div > header .component-history-controls > .button-play > svg {
            fill: #184C51; }
          .component-history > div > header .component-history-controls > .button-play:active > svg {
            fill: #5B8A97; }
        .component-history > div > header .component-history-controls > .button-play.pause {
          /* SVG */
          /* -------------------------------------------------------------------------------------------- */
          /* Pause */
          /* -------------------------------------------------------------------------------------------- */
          /* Active */
          /* -------------------------------------------------------------------------------------------- */ }
          .component-history > div > header .component-history-controls > .button-play.pause > svg {
            display: none; }
          .component-history > div > header .component-history-controls > .button-play.pause:before, .component-history > div > header .component-history-controls > .button-play.pause:after {
            position: absolute;
            display: block;
            content: " ";
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 4px;
            height: 21px;
            background-color: #184C51;
            border-radius: 2px; }
          .component-history > div > header .component-history-controls > .button-play.pause:before {
            top: 6.5px;
            left: 10px; }
          .component-history > div > header .component-history-controls > .button-play.pause:after {
            top: 6.5px;
            right: 10px; }
          .component-history > div > header .component-history-controls > .button-play.pause:active:before, .component-history > div > header .component-history-controls > .button-play.pause:active:after {
            background-color: #5B8A97; }
        .component-history > div > header .component-history-controls > .button-calendar {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px -5px 0px 0px;
          width: 34px;
          height: 34px;
          background-color: transparent;
          border: none;
          /* SVG */
          /* -------------------------------------------------------------------------------------------- */
          /* Active */
          /* -------------------------------------------------------------------------------------------- */ }
          .component-history > div > header .component-history-controls > .button-calendar > svg {
            margin-top: -1.5px;
            fill: #184C51; }
          .component-history > div > header .component-history-controls > .button-calendar:active > svg {
            fill: #5B8A97; }
        .component-history > div > header .component-history-controls > .button-play + .button-calendar {
          margin-left: 8px; }
        .component-history > div > header .component-history-controls > div + .button-calendar {
          margin-left: 15px; }
      .component-history > div > header .component-history-nav {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 20px 5px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 43px;
        white-space: nowrap;
        /* Button */
        /* ------------------------------------------------------------------------------------------------ */ }
        .component-history > div > header .component-history-nav > button {
          position: relative;
          display: inline-block;
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 10px;
          width: 38px;
          height: 38px;
          vertical-align: top;
          background-color: transparent;
          border: none;
          /* First */
          /* -------------------------------------------------------------------------------------------- */
          /* SVG */
          /* -------------------------------------------------------------------------------------------- */ }
          .component-history > div > header .component-history-nav > button:first-child {
            margin-left: -5px; }
          .component-history > div > header .component-history-nav > button > svg {
            fill: #839090; }
          .component-history > div > header .component-history-nav > button.active > svg {
            fill: #184C51; }
    .component-history > div .component-history-pie {
      position: relative;
      display: block;
      flex: 1;
      box-sizing: border-box;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* No Results */
      /* ------------------------------------------------------------------------------------------------ */
      /* Inner */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-history > div .component-history-pie > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #5C5C5C;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 15px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        text-align: center; }
      .component-history > div .component-history-pie > div {
        position: absolute;
        display: block;
        box-sizing: border-box;
        padding: 10px 20px 10px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* Transition */
        /* -------------------------------------------------------------------------------------------- */
        transition: opacity 0.3s ease-in-out;
        /* SVG */
        /* -------------------------------------------------------------------------------------------- */ }
        .component-history > div .component-history-pie.loading > div {
          opacity: 0; }
        .component-history > div .component-history-pie > div > svg {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
          /* Title *
            /* ---------------------------------------------------------------------------------------- */
          /* Background */
          /* ---------------------------------------------------------------------------------------- */
          /* Value *
            /* ---------------------------------------------------------------------------------------- */
          /* Path */
          /* ---------------------------------------------------------------------------------------- */ }
          .component-history > div .component-history-pie > div > svg .title {
            font-family: "Zilla Slab", serif;
            fill: #184C51;
            font-style: normal;
            font-size: 13px;
            opacity: 0; }
          .component-history > div .component-history-pie > div > svg .background {
            stroke: white;
            stroke-linecap: round; }
          .component-history > div .component-history-pie > div > svg .value {
            font-family: Arial;
            font-weight: 600;
            fill: white;
            font-style: normal;
            font-size: 8px;
            opacity: 0;
            /* Value 1 */
            /* ------------------------------------------------------------------------------------ */
            /* Value 2 */
            /* ------------------------------------------------------------------------------------ */
            /* Value 3 */
            /* ------------------------------------------------------------------------------------ */
            /* Value 4 */
            /* ------------------------------------------------------------------------------------ */
            /* Value 5 */
            /* ------------------------------------------------------------------------------------ */
            /* Value Empty */
            /* ------------------------------------------------------------------------------------ */ }
            .component-history > div .component-history-pie > div > svg .value.value-1 {
              fill: #F2E77E; }
            .component-history > div .component-history-pie > div > svg .value.value-2 {
              fill: #F2E77E; }
            .component-history > div .component-history-pie > div > svg .value.value-3 {
              fill: #184C51; }
            .component-history > div .component-history-pie > div > svg .value.value-4 {
              fill: #184C51; }
            .component-history > div .component-history-pie > div > svg .value.value-5 {
              fill: #184C51; }
            .component-history > div .component-history-pie > div > svg .value.empty {
              fill: #184C51; }
          .component-history > div .component-history-pie > div > svg .path {
            stroke-dashoffset: 0;
            stroke-linecap: round;
            /* Path 1 */
            /* ------------------------------------------------------------------------------------ */
            /* Path 2 */
            /* ------------------------------------------------------------------------------------ */
            /* Path 3 */
            /* ------------------------------------------------------------------------------------ */
            /* Path 4 */
            /* ------------------------------------------------------------------------------------ */
            /* Path 5 */
            /* ------------------------------------------------------------------------------------ */ }
            .component-history > div .component-history-pie > div > svg .path.path-1 {
              stroke: #184C51;
              stroke-dasharray: 620;
              stroke-dashoffset: 620; }
            .component-history > div .component-history-pie > div > svg .path.path-2 {
              stroke: #5B8A97;
              stroke-dasharray: 505;
              stroke-dashoffset: 505; }
            .component-history > div .component-history-pie > div > svg .path.path-3 {
              stroke: #9DB9C0;
              stroke-dasharray: 395;
              stroke-dashoffset: 395; }
            .component-history > div .component-history-pie > div > svg .path.path-4 {
              stroke: #CBC26A;
              stroke-dasharray: 280;
              stroke-dashoffset: 280; }
            .component-history > div .component-history-pie > div > svg .path.path-5 {
              stroke: #F2E77E;
              stroke-dasharray: 165;
              stroke-dashoffset: 165; }
    .component-history > div .component-history-flower {
      position: relative;
      display: block;
      flex: 1;
      box-sizing: border-box;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* No Results */
      /* ------------------------------------------------------------------------------------------------ */
      /* Inner */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-history > div .component-history-flower > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #5C5C5C;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 15px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        text-align: center; }
      .component-history > div .component-history-flower > div {
        position: absolute;
        display: block;
        box-sizing: border-box;
        padding: 10px 20px 10px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
    .component-history > div .component-history-bar {
      position: relative;
      display: block;
      flex: 1;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* No Results */
      /* ------------------------------------------------------------------------------------------------ */
      /* Inner */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-history > div .component-history-bar > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #5C5C5C;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 15px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        text-align: center; }
      .component-history > div .component-history-bar > div {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 20px 20px 20px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 100%;
        /* Item */
        /* -------------------------------------------------------------------------------------------- */ }
        .component-history > div .component-history-bar > div > .component-history-bar-item {
          position: relative;
          display: block;
          box-sizing: border-box;
          padding: 0px 50px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: 50px;
          /* Background */
          /* ---------------------------------------------------------------------------------------- */
          /* Position */
          /* ---------------------------------------------------------------------------------------- */
          /* Transition */
          /* ---------------------------------------------------------------------------------------- */
          /* Inner */
          /* ---------------------------------------------------------------------------------------- */
          /* Nutrition & Alcohol */
          /* ---------------------------------------------------------------------------------------- */
          /* Sleep */
          /* ---------------------------------------------------------------------------------------- */
          /* Personal & Family */
          /* ---------------------------------------------------------------------------------------- */
          /* Work Life */
          /* ---------------------------------------------------------------------------------------- */
          /* Hormones */
          /* ---------------------------------------------------------------------------------------- */
          /* Finances */
          /* ---------------------------------------------------------------------------------------- */
          /* Travel / Commuting */
          /* ---------------------------------------------------------------------------------------- */
          /* Physical Activity */
          /* ---------------------------------------------------------------------------------------- */
          /* Breakpoint */
          /* ---------------------------------------------------------------------------------------- */ }
          .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(1) {
            top: 0px;
            margin-top: 0px; }
          .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(2) {
            top: 65px;
            margin-top: -50px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(2) {
                top: 61px;
                margin-top: -46px; } }
          .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(3) {
            top: 130px;
            margin-top: -50px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(3) {
                top: 122px;
                margin-top: -46px; } }
          .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(4) {
            top: 195px;
            margin-top: -50px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(4) {
                top: 183px;
                margin-top: -46px; } }
          .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(5) {
            top: 260px;
            margin-top: -50px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item:nth-child(5) {
                top: 244px;
                margin-top: -46px; } }
          .component-history > div .component-history-bar > div > .component-history-bar-item.position-1 {
            top: 0px; }
            .component-history > div .component-history-bar > div > .component-history-bar-item.position-1 > div {
              background-color: #3E5E66; }
          .component-history > div .component-history-bar > div > .component-history-bar-item.position-2 {
            top: 65px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item.position-2 {
                top: 61px; } }
            .component-history > div .component-history-bar > div > .component-history-bar-item.position-2 > div {
              background-color: #456973; }
          .component-history > div .component-history-bar > div > .component-history-bar-item.position-3 {
            top: 130px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item.position-3 {
                top: 122px; } }
            .component-history > div .component-history-bar > div > .component-history-bar-item.position-3 > div {
              background-color: #4C747F; }
          .component-history > div .component-history-bar > div > .component-history-bar-item.position-4 {
            top: 195px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item.position-4 {
                top: 183px; } }
            .component-history > div .component-history-bar > div > .component-history-bar-item.position-4 > div {
              background-color: #547F8B; }
          .component-history > div .component-history-bar > div > .component-history-bar-item.position-5 {
            top: 260px; }
            @media (max-width: 374px) {
              .component-history > div .component-history-bar > div > .component-history-bar-item.position-5 {
                top: 244px; } }
            .component-history > div .component-history-bar > div > .component-history-bar-item.position-5 > div {
              background-color: #5B8A97; }
          .component-history > div .component-history-bar.transition > div > .component-history-bar-item {
            transition: top 0.2s ease-in-out; }
          .component-history > div .component-history-bar > div > .component-history-bar-item > div {
            position: relative;
            display: block;
            padding: 0px 50px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 0%;
            height: 100%;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            box-shadow: 0px 0px 0px 1px white;
            background-color: #5B8A97;
            /* Transition */
            /* ------------------------------------------------------------------------------------ */
            /* Text */
            /* ------------------------------------------------------------------------------------ */
            /* Text - Inside */
            /* ------------------------------------------------------------------------------------ */
            /* Text - Outside */
            /* ------------------------------------------------------------------------------------ */
            /* Icon */
            /* ------------------------------------------------------------------------------------ */ }
            .component-history > div .component-history-bar.transition > div > .component-history-bar-item > div {
              transition: width .5s ease-in-out , background-color .5s ease-in-out; }
            .component-history > div .component-history-bar > div > .component-history-bar-item > div > span {
              display: block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: 50px;
              font-family: "Open Sans", sans-serif;
              color: white;
              font-size: 15px;
              font-weight: 400;
              letter-spacing: normal;
              line-height: 50px;
              white-space: nowrap;
              overflow: hidden;
              /* Transition */
              /* -------------------------------------------------------------------------------- */
              transition: opacity 0.2s linear;
              /* Breakpoints */
              /* -------------------------------------------------------------------------------- */ }
              @media (max-width: 374px) {
                .component-history > div .component-history-bar > div > .component-history-bar-item > div > span {
                  font-size: 14px; } }
              @media (max-width: 350px) {
                .component-history > div .component-history-bar > div > .component-history-bar-item > div > span {
                  font-size: 13px; } }
              @media (max-width: 335px) {
                .component-history > div .component-history-bar > div > .component-history-bar-item > div > span {
                  font-size: 12.5px; } }
            .component-history > div .component-history-bar > div > .component-history-bar-item > div > span:first-child {
              position: relative;
              text-align: right;
              opacity: 0;
              /* Large */
              /* -------------------------------------------------------------------------------- */
              /* Loading */
              /* -------------------------------------------------------------------------------- */ }
              .component-history > div .component-history-bar > div > .component-history-bar-item.large > div > span:first-child {
                opacity: 1; }
              .component-history > div .component-history-bar > div > .component-history-bar-item.loading > div > span:first-child {
                opacity: 0; }
            .component-history > div .component-history-bar > div > .component-history-bar-item > div > span:nth-child(2) {
              position: absolute;
              top: 0px;
              left: calc( 100% + 10px);
              color: #184C51;
              text-align: left;
              opacity: 1;
              /* Large */
              /* -------------------------------------------------------------------------------- */
              /* Loading */
              /* -------------------------------------------------------------------------------- */ }
              .component-history > div .component-history-bar > div > .component-history-bar-item.large > div > span:nth-child(2) {
                opacity: 0; }
              .component-history > div .component-history-bar > div > .component-history-bar-item.loading > div > span:nth-child(2) {
                opacity: 0; }
            .component-history > div .component-history-bar > div > .component-history-bar-item > div > i {
              position: absolute;
              display: block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: 50px;
              height: 50px;
              top: 0px;
              right: 0px;
              opacity: 1;
              /* Image */
              /* -------------------------------------------------------------------------------- */
              /* Transition */
              /* -------------------------------------------------------------------------------- */
              transition: opacity 0.2s linear;
              /* Loading */
              /* -------------------------------------------------------------------------------- */ }
              .component-history > div .component-history-bar > div > .component-history-bar-item > div > i:after {
                position: absolute;
                display: block;
                content: " ";
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 26px;
                height: 26px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                /* Image */
                /* ---------------------------------------------------------------------------- */
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center; }
              .component-history > div .component-history-bar > div > .component-history-bar-item.loading > div > i {
                opacity: 0; }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-1 > div > i:after {
            background-image: url(/assets/images/stresses/nutrition-alcohol-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-2 > div > i:after {
            background-image: url(/assets/images/stresses/sleep-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-3 > div > i:after {
            background-image: url(/assets/images/stresses/personal-family-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-4 > div > i:after {
            background-image: url(/assets/images/stresses/work-life-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-5 > div > i:after {
            background-image: url(/assets/images/stresses/hormones-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-6 > div > i:after {
            background-image: url(/assets/images/stresses/finances-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-7 > div > i:after {
            background-image: url(/assets/images/stresses/travel-white.svg); }
          .component-history > div .component-history-bar > div > .component-history-bar-item.icon-8 > div > i:after {
            background-image: url(/assets/images/stresses/physical-activity-white.svg); }
          @media (max-width: 374px) {
            .component-history > div .component-history-bar > div > .component-history-bar-item {
              padding-right: 46px;
              height: 46px; }
              .component-history > div .component-history-bar > div > .component-history-bar-item > div {
                padding-right: 46px; }
                .component-history > div .component-history-bar > div > .component-history-bar-item > div > i {
                  width: 46px;
                  height: 46px; }
                  .component-history > div .component-history-bar > div > .component-history-bar-item > div > i:after {
                    width: 22px;
                    height: 22px; }
                .component-history > div .component-history-bar > div > .component-history-bar-item > div > span {
                  line-height: 46px; } }
    .component-history > div .component-history-cloud {
      position: relative;
      display: block;
      flex: 1;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      /* Scroll */
      /* ------------------------------------------------------------------------------------------------ */
      overflow: hidden;
      overflow-y: scroll;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      /* No Results */
      /* ------------------------------------------------------------------------------------------------ */
      /* Inner */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-history > div .component-history-cloud > * {
        -webkit-overflow-scrolling: auto; }
      .component-history > div .component-history-cloud > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #5C5C5C;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 15px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        text-align: center; }
      .component-history > div .component-history-cloud > div {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 20px 20px 40px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        /* Text */
        /* -------------------------------------------------------------------------------------------- */ }
        .component-history > div .component-history-cloud > div p {
          position: relative;
          display: block;
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: auto;
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 40px;
          font-weight: 700;
          letter-spacing: normal;
          line-height: normal;
          word-break: break-word;
          /* Font Sizes */
          /* ---------------------------------------------------------------------------------------- */ }
          .component-history > div .component-history-cloud > div p:nth-child(1) {
            font-size: 39px;
            opacity: 0.98; }
          .component-history > div .component-history-cloud > div p:nth-child(2) {
            font-size: 38px;
            opacity: 0.96; }
          .component-history > div .component-history-cloud > div p:nth-child(3) {
            font-size: 37px;
            opacity: 0.94; }
          .component-history > div .component-history-cloud > div p:nth-child(4) {
            font-size: 36px;
            opacity: 0.92; }
          .component-history > div .component-history-cloud > div p:nth-child(5) {
            font-size: 35px;
            opacity: 0.9; }
          .component-history > div .component-history-cloud > div p:nth-child(6) {
            font-size: 34px;
            opacity: 0.88; }
          .component-history > div .component-history-cloud > div p:nth-child(7) {
            font-size: 33px;
            opacity: 0.86; }
          .component-history > div .component-history-cloud > div p:nth-child(8) {
            font-size: 32px;
            opacity: 0.84; }
          .component-history > div .component-history-cloud > div p:nth-child(9) {
            font-size: 31px;
            opacity: 0.82; }
          .component-history > div .component-history-cloud > div p:nth-child(10) {
            font-size: 30px;
            opacity: 0.8; }
          .component-history > div .component-history-cloud > div p:nth-child(11) {
            font-size: 29px;
            opacity: 0.78; }
          .component-history > div .component-history-cloud > div p:nth-child(12) {
            font-size: 28px;
            opacity: 0.76; }
          .component-history > div .component-history-cloud > div p:nth-child(13) {
            font-size: 27px;
            opacity: 0.74; }
          .component-history > div .component-history-cloud > div p:nth-child(14) {
            font-size: 26px;
            opacity: 0.72; }
          .component-history > div .component-history-cloud > div p:nth-child(15) {
            font-size: 25px;
            opacity: 0.7; }
          .component-history > div .component-history-cloud > div p:nth-child(16) {
            font-size: 24px;
            opacity: 0.68; }
          .component-history > div .component-history-cloud > div p:nth-child(17) {
            font-size: 23px;
            opacity: 0.66; }
          .component-history > div .component-history-cloud > div p:nth-child(18) {
            font-size: 22px;
            opacity: 0.64; }
          .component-history > div .component-history-cloud > div p:nth-child(19) {
            font-size: 21px;
            opacity: 0.62; }
          .component-history > div .component-history-cloud > div p:nth-child(20) {
            font-size: 20px;
            opacity: 0.6; }
          .component-history > div .component-history-cloud > div p:nth-child(21) {
            font-size: 19px;
            opacity: 0.58; }
          .component-history > div .component-history-cloud > div p:nth-child(22) {
            font-size: 18px;
            opacity: 0.56; }
          .component-history > div .component-history-cloud > div p:nth-child(23) {
            font-size: 17px;
            opacity: 0.54; }
          .component-history > div .component-history-cloud > div p:nth-child(24) {
            font-size: 16px;
            opacity: 0.52; }
          .component-history > div .component-history-cloud > div p:nth-child(25) {
            font-size: 15px;
            opacity: 0.5; }
          .component-history > div .component-history-cloud > div p:nth-child(26) {
            font-size: 14px;
            opacity: 0.48; }
          .component-history > div .component-history-cloud > div p:nth-child(27) {
            font-size: 13px;
            opacity: 0.46; }
          .component-history > div .component-history-cloud > div p:nth-child(28) {
            font-size: 12px;
            opacity: 0.44; }
          .component-history > div .component-history-cloud > div p:nth-child(29) {
            font-size: 11px;
            opacity: 0.42; }
          .component-history > div .component-history-cloud > div p:nth-child(30) {
            font-size: 10px;
            opacity: 0.4; }
    .component-history > div .component-history-diary {
      position: relative;
      display: block;
      flex: 1;
      padding: 0px 0px 0px 0px;
      margin: 1px 0px 1px 0px;
      width: 100%;
      height: auto;
      /* Scroll */
      /* ------------------------------------------------------------------------------------------------ */
      overflow: hidden;
      overflow-y: scroll;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      /* Inner */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-history > div .component-history-diary > * {
        -webkit-overflow-scrolling: auto; }
      .component-history > div .component-history-diary > div {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 20px 20px 40px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        /* Year */
        /* -------------------------------------------------------------------------------------------- */ }
        .component-history > div .component-history-diary > div > .component-diary-year {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: auto;
          /* Quarter */
          /* ---------------------------------------------------------------------------------------- */
          /* First Day */
          /* ---------------------------------------------------------------------------------------- */ }
          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter {
            position: relative;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: auto;
            height: auto;
            /* Month */
            /* ------------------------------------------------------------------------------------ */ }
            .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month {
              position: relative;
              display: block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: auto;
              /* Day */
              /* -------------------------------------------------------------------------------- */
              /* Component - Diary - Day */
              /* ---------------------------------------------------------------------------------------------------- */ }
              .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                box-sizing: border-box;
                padding: 0px 0px 0px 0px;
                margin: 0px 0px 0px 0px;
                width: 100%;
                height: auto;
                /* Empty */
                /* ------------------------------------------------------------------------------------------------ */
                /* Not Empty */
                /* ------------------------------------------------------------------------------------------------ */
                /* Remove Button Style */
                /* ------------------------------------------------------------------------------------------------ */
                border: none;
                outline: none;
                background: none;
                /* Left */
                /* ------------------------------------------------------------------------------------------------ */
                /* Right */
                /* ------------------------------------------------------------------------------------------------ */ }
                .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day.empty {
                  padding-top: 20px;
                  min-height: 90px; }
                .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day:not(.empty) {
                  padding-top: 35px;
                  min-height: 105px; }
                .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time {
                  position: relative;
                  display: block;
                  box-sizing: border-box;
                  padding: 0px 20px 0px 0px;
                  margin: 0px 0px 0px 0px;
                  width: auto;
                  height: auto;
                  white-space: nowrap;
                  /* Day */
                  /* -------------------------------------------------------------------------------------------- */
                  /* Year */
                  /* -------------------------------------------------------------------------------------------- */ }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time > h2 {
                    position: relative;
                    display: block;
                    padding: 0px 0px 0px 0px;
                    margin: -10px 0px 0px 0px;
                    width: 30px;
                    height: auto;
                    /* Font */
                    /* ---------------------------------------------------------------------------------------- */
                    font-family: "Zilla Slab", serif;
                    color: #184C51;
                    font-size: 36px;
                    font-weight: 400;
                    letter-spacing: normal;
                    line-height: 36px;
                    text-align: center;
                    /* Month */
                    /* ---------------------------------------------------------------------------------------- */ }
                    .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time > h2 > span {
                      position: relative;
                      display: block;
                      padding: 0px 0px 0px 0px;
                      margin: 5px 0px 0px 0px;
                      width: 30px;
                      height: auto;
                      font-size: 20px;
                      line-height: 20px; }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > time > span {
                    position: relative;
                    display: block;
                    padding: 0px 0px 0px 0px;
                    margin: 7px 0px -4px 0px;
                    width: 30px;
                    height: auto;
                    /* Font */
                    /* ---------------------------------------------------------------------------------------- */
                    font-family: "Open Sans", sans-serif;
                    color: #999999;
                    font-size: 12px;
                    font-weight: 400;
                    letter-spacing: normal;
                    line-height: 16px;
                    text-align: center; }
                .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div {
                  position: relative;
                  display: block;
                  box-sizing: border-box;
                  flex: 1;
                  padding: 15px 15px 15px 15px;
                  margin: 0px 0px 0px 0px;
                  width: auto;
                  height: auto;
                  min-height: 70px;
                  border-radius: 6px;
                  background-color: white;
                  border: 1px solid #D6D6D6;
                  /* Stresses */
                  /* -------------------------------------------------------------------------------------------- */
                  /* Component - Diary - Day - Stresses */
                  /* ---------------------------------------------------------------------------------------------------- */
                  /* Empty */
                  /* -------------------------------------------------------------------------------------------- */
                  /* Text */
                  /* -------------------------------------------------------------------------------------------- */
                  /* Button - Add */
                  /* -------------------------------------------------------------------------------------------- */
                  /* Button - Edit */
                  /* -------------------------------------------------------------------------------------------- */ }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses {
                    position: absolute;
                    display: block;
                    padding: 0px 0px 0px 0px;
                    margin: 0px 0px 0px 0px;
                    width: auto;
                    height: 49px;
                    top: -25px;
                    left: 0px;
                    white-space: nowrap;
                    /* Icon */
                    /* ------------------------------------------------------------------------------------------------ */ }
                    .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i {
                      position: relative;
                      display: inline-block;
                      box-sizing: border-box;
                      padding: 0px 0px 0px 0px;
                      margin: 0px 0px 0px 0px;
                      width: auto;
                      height: auto;
                      vertical-align: middle;
                      border: 1px solid #D6D6D6;
                      background-color: white;
                      border-radius: 50%;
                      /* Flower */
                      /* -------------------------------------------------------------------------------------------- */
                      /* Binary Stresses */
                      /* -------------------------------------------------------------------------------------------- */ }
                      .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child {
                        padding: 2px 2px 2px 2px;
                        width: 49px;
                        height: 49px;
                        margin-left: 15px;
                        /* Flower */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Breakpoints */
                        /* ---------------------------------------------------------------------------------------- */ }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child > .component-flower-small {
                          background-color: transparent; }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child > .component-flower-small > i:nth-child(1) {
                            display: none; }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child > .component-flower-small > i:nth-child(2) {
                            display: none; }
                        @media (max-width: 374px) {
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:first-child {
                            margin-left: 2px; } }
                      .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child) {
                        margin-left: 5px;
                        width: 23px;
                        height: 23px;
                        background-repeat: no-repeat;
                        background-position: center center;
                        /* Breakpoints */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - Caffeine Intake */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - Hydration */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - Screen Time */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - General Health */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - Time Out For Me */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - Preparation For Sleep */
                        /* ---------------------------------------------------------------------------------------- */
                        /* Icon - Movement / Exercise */
                        /* ---------------------------------------------------------------------------------------- */ }
                        @media (max-width: 374px) {
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child) {
                            margin-left: 2px; } }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-1 {
                          background-size: 65%;
                          background-image: url(/assets/images/binary-stresses/caffeine-intake-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-1.selected {
                            background-image: url(/assets/images/binary-stresses/caffeine-intake-primary.svg); }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-2 {
                          background-size: 50%;
                          background-image: url(/assets/images/binary-stresses/hydration-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-2.selected {
                            background-image: url(/assets/images/binary-stresses/hydration-primary.svg); }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-3 {
                          background-size: 60%;
                          background-image: url(/assets/images/binary-stresses/screen-time-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-3.selected {
                            background-image: url(/assets/images/binary-stresses/screen-time-primary.svg); }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-4 {
                          background-size: 80%;
                          background-image: url(/assets/images/binary-stresses/general-health-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-4.selected {
                            background-image: url(/assets/images/binary-stresses/general-health-primary.svg); }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-5 {
                          background-size: 60%;
                          background-image: url(/assets/images/binary-stresses/time-out-for-me-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-5.selected {
                            background-image: url(/assets/images/binary-stresses/time-out-for-me-primary.svg); }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-6 {
                          background-size: 50%;
                          background-image: url(/assets/images/binary-stresses/preparation-for-sleep-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-6.selected {
                            background-image: url(/assets/images/binary-stresses/preparation-for-sleep-primary.svg); }
                        .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-7 {
                          background-size: 60%;
                          background-image: url(/assets/images/binary-stresses/movement-exercise-grey.svg); }
                          .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .component-diary-day-stresses > i:not(:first-child).icon-7.selected {
                            background-image: url(/assets/images/binary-stresses/movement-exercise-primary.svg); }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day.empty > div {
                    border: none;
                    background-color: rgba(91, 138, 151, 0.15); }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div > p {
                    position: relative;
                    display: block;
                    padding: 0px 20px 0px 0px;
                    margin: 15px 0px -4px 0px;
                    width: auto;
                    height: auto;
                    word-break: break-word;
                    /* Font */
                    /* ---------------------------------------------------------------------------------------- */
                    font-family: "Open Sans", sans-serif;
                    color: #999999;
                    font-size: 12px;
                    font-weight: 400;
                    letter-spacing: normal;
                    line-height: 17px;
                    text-align: left;
                    /* Empty */
                    /* ---------------------------------------------------------------------------------------- */ }
                    .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day.empty > div > p {
                      margin-top: -3px;
                      padding-right: 0px;
                      color: #184C51; }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div > .button-add {
                    position: absolute;
                    display: block;
                    padding: 0px 15px 0px 15px;
                    margin: 0px 0px 0px 0px;
                    width: auto;
                    height: 30px;
                    bottom: 5px;
                    right: 5px;
                    background-color: #5B8A97;
                    border-radius: 4px;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    opacity: 1;
                    /* Font */
                    /* ---------------------------------------------------------------------------------------- */
                    font-family: "Zilla Slab", serif;
                    color: white;
                    font-size: 13px;
                    font-weight: 500;
                    letter-spacing: normal;
                    line-height: 30px;
                    font-style: normal;
                    text-align: center;
                    /* Fast Touch */
                    /* ---------------------------------------------------------------------------------------- */
                    touch-action: manipulation;
                    /* Active */
                    /* ---------------------------------------------------------------------------------------- */ }
                    .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div > .button-add:active {
                      background-color: #184C51; }
                  .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .button-edit {
                    position: absolute;
                    display: block;
                    content: " ";
                    padding: 0px 0px 0px 0px;
                    margin: 0px 0px 0px 0px;
                    width: 23px;
                    height: 23px;
                    bottom: 5px;
                    right: 5px;
                    background-color: #2D4040;
                    border-radius: 50%;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    /* Fast Touch */
                    /* ---------------------------------------------------------------------------------------- */
                    touch-action: manipulation;
                    /* Active */
                    /* ---------------------------------------------------------------------------------------- */
                    /* SVG */
                    /* ---------------------------------------------------------------------------------------- */ }
                    .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .button-edit:active {
                      background-color: #5B8A97; }
                    .component-history > div .component-history-diary > div > .component-diary-year > .component-diary-quarter > .component-diary-month .component-diary-day > div .button-edit > svg {
                      width: 12px;
                      height: 12px;
                      fill: white;
                      margin-top: -0.5px; }
          .component-history > div .component-history-diary > div > .component-diary-year:first-child > .component-diary-quarter:first-child > .component-diary-month:first-child > .component-diary-day:first-child {
            padding-top: 20px;
            min-height: 90px; }
          .component-history > div .component-history-diary > div > .component-diary-year:first-child > .component-diary-quarter:first-child > .component-diary-month:first-child > .component-diary-day:first-child.empty {
            padding-top: 0px;
            min-height: 70px; }
    .component-history > div .component-history-admin {
      position: relative;
      display: block;
      flex: 1;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* Inner */
      /* ------------------------------------------------------------------------------------------------ */ }
      .component-history > div .component-history-admin > div {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 20px 20px 20px 20px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 100%;
        /* Title */
        /* -------------------------------------------------------------------------------------------- */
        /* Subtitle */
        /* -------------------------------------------------------------------------------------------- */
        /* Text */
        /* -------------------------------------------------------------------------------------------- */
        /* Button - Start */
        /* -------------------------------------------------------------------------------------------- */ }
        .component-history > div .component-history-admin > div > h2 {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: -4px 0px 0px 0px;
          width: 100%;
          height: auto;
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 24px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 24px;
          text-align: left;
          white-space: nowrap; }
        .component-history > div .component-history-admin > div > h3 {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 16px 0px 0px 0px;
          width: 100%;
          height: auto;
          font-family: "Zilla Slab", serif;
          color: #5B8A97;
          font-size: 24px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 24px;
          text-align: left;
          white-space: nowrap; }
        .component-history > div .component-history-admin > div > p {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 15px 0px 0px 0px;
          width: 100%;
          height: auto;
          font-family: "Open Sans", sans-serif;
          color: #999999;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 18px;
          text-align: left;
          white-space: nowrap; }
          .component-history > div .component-history-admin > div > p > span {
            font-weight: 700;
            color: #5B8A97; }
        .component-history > div .component-history-admin > div > .button-start {
          position: relative;
          display: table;
          padding: 0px 20px 0px 20px;
          margin: 20px 0px 0px 0px;
          width: auto;
          height: auto;
          box-sizing: border-box;
          cursor: pointer;
          /* Background */
          /* ---------------------------------------------------------------------------------------- */
          background-color: #5B8A97;
          /* Border */
          /* ---------------------------------------------------------------------------------------- */
          border: 2px solid #3E5E66;
          border-radius: 8px;
          outline: none;
          /* Transition */
          /* ---------------------------------------------------------------------------------------- */
          transition: background-color 0.2s ease-out;
          /* Font */
          /* ---------------------------------------------------------------------------------------- */
          font-family: "Zilla Slab", serif;
          color: white;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 30px;
          text-align: center;
          text-decoration: none;
          /* Active */
          /* ---------------------------------------------------------------------------------------- */ }
          .component-history > div .component-history-admin > div > .button-start:active {
            background-color: #3E5E66;
            border-color: #3E5E66; }

/* Component - Account */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Account */
/* ---------------------------------------------------------------------------------------------------- */
.component-account {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-account {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-account {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-account {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-account {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-account {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-account {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-account {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-account {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-account {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-account {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-account {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-account {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-account {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-account {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-account {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-account {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-account {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-account {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-account {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-account {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-account {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-account {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-account {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-account {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-account {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-account {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-account > div {
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 20px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Button */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-account > div > .text {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Text */
      /* ---------------------------------------------------------------------------------------- */
      /* List */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-account > div > .text > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 20px 0px 0px 0px;
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 20px;
        text-align: left; }
        .component-account > div > .text > p > span {
          padding-left: 5px;
          font-family: "Open Sans", sans-serif;
          color: #5C5C5C;
          font-size: 15px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 20px; }
        .component-account > div > .text > p:first-child {
          margin-top: 0px; }
      .component-account > div > .text > ul {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: -20px 0px 0px 0px;
        list-style: none;
        /* Row */
        /* ------------------------------------------------------------------------------------ */ }
        .component-account > div > .text > ul > li {
          position: relative;
          display: block;
          padding: 0px 0px 0px 80px;
          margin: 10px 0px 0px 0px;
          font-family: "Open Sans", sans-serif;
          color: #5C5C5C;
          font-size: 15px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 20px;
          text-align: left; }
          .component-account > div > .text > ul > li:first-child {
            margin-top: 0px; }
    .component-account > div > button {
      background-color: #5B8A97;
      border-color: #3E5E66;
      color: white; }
      .component-account > div > button:active {
        background-color: #3E5E66;
        border-color: #3E5E66; }

/* Component - Guided Breathing */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Guided Breathing */
/* ---------------------------------------------------------------------------------------------------- */
.component-guided-breathing {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-guided-breathing {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-guided-breathing {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-guided-breathing {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-guided-breathing {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-guided-breathing {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-guided-breathing {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-guided-breathing {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-guided-breathing {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-guided-breathing {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-guided-breathing {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-guided-breathing {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-guided-breathing {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-guided-breathing {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-guided-breathing {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-guided-breathing {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-guided-breathing {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-guided-breathing {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-guided-breathing {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-guided-breathing {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-guided-breathing {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-guided-breathing {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-guided-breathing {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-guided-breathing {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-guided-breathing {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-guided-breathing {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-guided-breathing {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-guided-breathing > div {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 19px 20px 40px 20px;
    margin: 1px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Scroll */
    /* -------------------------------------------------------------------------------------------- */
    overflow: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* Title */
    /* -------------------------------------------------------------------------------------------- */
    /* Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Event */
    /* -------------------------------------------------------------------------------------------- */
    /* Link */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-guided-breathing > div > * {
      -webkit-overflow-scrolling: auto; }
    .component-guided-breathing > div > h2 {
      position: relative;
      display: inline-block;
      padding: 0px 0px 0px 0px;
      margin: -3px 0px -3px 0px;
      width: 100%;
      height: auto;
      font-family: "Zilla Slab", serif;
      color: #184C51;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 18px;
      text-align: left;
      white-space: nowrap;
      /* Additional */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-guided-breathing > div > h2:not(:first-child) {
        margin-top: 20px;
        padding-top: 17px;
        border-top: 1px solid #D6D6D6; }
    .component-guided-breathing > div > p {
      position: relative;
      display: inline-block;
      padding: 15px 0px 0px 0px;
      margin: -3px 0px -4px 0px;
      width: 100%;
      height: auto;
      font-family: "Open Sans", sans-serif;
      color: #999999;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 17px;
      text-align: left; }
    .component-guided-breathing > div > div {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 15px 15px 15px 15px;
      margin: 15px 0px 0px 0px;
      width: 100%;
      height: auto;
      border-radius: 6px;
      background-color: white;
      border: 1px solid #D6D6D6;
      cursor: pointer;
      /* Title */
      /* ---------------------------------------------------------------------------------------- */
      /* Time */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-guided-breathing > div > div > h3 {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: -2px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #184C51;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 16px;
        text-align: left; }
      .component-guided-breathing > div > div > time {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: -5px 0px -4px 0px;
        width: auto;
        height: auto;
        /* Item */
        /* ------------------------------------------------------------------------------------ */ }
        .component-guided-breathing > div > div > time > span {
          position: relative;
          display: inline-block;
          padding: 0px 0px 0px 15px;
          margin: 15px 15px 0px 0px;
          width: auto;
          height: auto;
          font-family: "Zilla Slab", serif;
          color: #999999;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 16px;
          text-align: left;
          /* SVG */
          /* -------------------------------------------------------------------------------- */ }
          .component-guided-breathing > div > div > time > span > svg {
            position: absolute;
            display: block;
            width: 10px;
            height: 10px;
            top: 3px;
            left: 0px;
            fill: #999999; }
      .component-guided-breathing > div > div:active {
        border-color: #184C51; }
    .component-guided-breathing > div > a {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 15px 15px 15px 15px;
      margin: 15px 0px 0px 0px;
      width: 100%;
      height: auto;
      border-radius: 6px;
      background-color: white;
      border: 1px solid #D6D6D6;
      text-decoration: none;
      cursor: pointer;
      /* Fast Touch */
      /* ---------------------------------------------------------------------------------------- */
      touch-action: manipulation;
      /* Title */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */
      /* Time */
      /* ---------------------------------------------------------------------------------------- */
      /* Additional */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-guided-breathing > div > a > h3 {
        position: relative;
        display: block;
        padding: 0px 40px 0px 0px;
        margin: -4px 0px -4px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #184C51;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 20px;
        text-align: left; }
      .component-guided-breathing > div > a > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 11px 0px -4px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #999999;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 16px;
        text-align: left; }
        .component-guided-breathing > div > a > p > strong {
          color: #5B8A97;
          font-weight: 700; }
      .component-guided-breathing > div > a > time {
        position: absolute;
        display: block;
        padding: 0px 15px 0px 0px;
        margin: -1px 0px 0px 0px;
        width: auto;
        height: auto;
        top: 15px;
        right: 15px;
        font-family: "Zilla Slab", serif;
        color: #999999;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 16px;
        text-align: right;
        /* SVG */
        /* ------------------------------------------------------------------------------------ */ }
        .component-guided-breathing > div > a > time > svg {
          position: absolute;
          display: block;
          width: 10px;
          height: 10px;
          top: 3px;
          right: 0px;
          fill: #999999; }
      .component-guided-breathing > div > a + a {
        margin-top: 10px; }
      .component-guided-breathing > div > a:active {
        border-color: #184C51; }

/* Imports */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Guided Breathing Animation */
/* ---------------------------------------------------------------------------------------------------- */
.component-guided-breathing-animation {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Animation */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-guided-breathing-animation {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-guided-breathing-animation {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-guided-breathing-animation {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-guided-breathing-animation {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-guided-breathing-animation {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-guided-breathing-animation {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-guided-breathing-animation {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-guided-breathing-animation {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-guided-breathing-animation {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-guided-breathing-animation {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-guided-breathing-animation {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-guided-breathing-animation {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-guided-breathing-animation {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-guided-breathing-animation {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-guided-breathing-animation {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-guided-breathing-animation {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-guided-breathing-animation {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-guided-breathing-animation {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-guided-breathing-animation {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-guided-breathing-animation {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-guided-breathing-animation {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-guided-breathing-animation {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-guided-breathing-animation {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-guided-breathing-animation > button {
    position: absolute;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: -30% 0px 0px -30%;
    width: 60%;
    height: auto;
    left: 50%;
    top: 50%;
    cursor: pointer;
    /* Fast Touch */
    /* -------------------------------------------------------------------------------------------- */
    touch-action: manipulation;
    /* Remove Styles */
    /* -------------------------------------------------------------------------------------------- */
    border: none;
    background: transparent;
    /* Transition */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 1s;
    /* Loading */
    /* -------------------------------------------------------------------------------------------- */
    /* Circle Background Group */
    /* -------------------------------------------------------------------------------------------- */
    /* Circle Text Group */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-guided-breathing-animation > button.loading {
      opacity: 0; }
    .component-guided-breathing-animation > button > .circle-background-group {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      border-radius: 50%;
      background-color: transparent;
      box-shadow: 0px 10px 40px rgba(50, 50, 50, 0.2);
      /* Circle - Background */
      /* ---------------------------------------------------------------------------------------- */
      /* Circle - Path */
      /* ---------------------------------------------------------------------------------------- */
      /* Circle - Foreground */
      /* ---------------------------------------------------------------------------------------- */
      /* Paused */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-guided-breathing-animation > button > .circle-background-group .circle-background {
        fill: white; }
      .component-guided-breathing-animation > button > .circle-background-group .circle-path {
        fill: none;
        stroke: #184C51;
        stroke-width: 8%;
        stroke-dashoffset: 310;
        stroke-dasharray: 310;
        /* Paused */
        /* ------------------------------------------------------------------------------------ */ }
        .component-guided-breathing-animation.paused > button > .circle-background-group .circle-path {
          visibility: hidden; }
      .component-guided-breathing-animation > button > .circle-background-group .circle-foreground {
        fill: #F3E98B; }
      .component-guided-breathing-animation.paused > button > .circle-background-group {
        transition: all 0.3s ease-in-out; }
    .component-guided-breathing-animation > button > .circle-text-group {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      border-radius: 50%;
      background-color: transparent;
      /* Text */
      /* ---------------------------------------------------------------------------------------- */
      /* Number */
      /* ---------------------------------------------------------------------------------------- */
      /* Message */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-guided-breathing-animation > button > .circle-text-group .circle-text {
        font-family: "Zilla Slab", serif;
        fill: #184C51;
        font-size: 14px;
        opacity: 1;
        /* Paused */
        /* ------------------------------------------------------------------------------------ */ }
        .component-guided-breathing-animation.paused > button > .circle-text-group .circle-text {
          visibility: hidden; }
      .component-guided-breathing-animation > button > .circle-text-group .circle-number {
        font-family: "Open Sans", sans-serif;
        font-weight: bold;
        fill: #184C51;
        font-size: 45px;
        /* Paused */
        /* ------------------------------------------------------------------------------------ */ }
        .component-guided-breathing-animation.paused > button > .circle-text-group .circle-number {
          visibility: hidden; }
      .component-guided-breathing-animation > button > .circle-text-group .circle-message {
        font-family: "Zilla Slab", serif;
        fill: #184C51;
        font-size: 14px;
        visibility: hidden;
        /* Paused */
        /* ------------------------------------------------------------------------------------ */
        /* Paused - Restart */
        /* ------------------------------------------------------------------------------------ */ }
        .component-guided-breathing-animation.paused > button > .circle-text-group .circle-message {
          visibility: visible; }
        .component-guided-breathing-animation.began.paused > button > .circle-text-group .circle-message {
          font-size: 13px; }

/* Component - Knowledge */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Knowledge */
/* ---------------------------------------------------------------------------------------------------- */
.component-knowledge {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Categories */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-knowledge {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-knowledge {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-knowledge {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-knowledge {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-knowledge {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-knowledge {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-knowledge {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-knowledge {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-knowledge {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-knowledge {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-knowledge {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-knowledge {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-knowledge {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-knowledge {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-knowledge {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-knowledge {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-knowledge {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-knowledge {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-knowledge {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-knowledge {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-knowledge {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-knowledge {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-knowledge {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-knowledge {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-knowledge {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-knowledge {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-knowledge > nav {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 54px;
    overflow: hidden;
    /* Shadow */
    /* -------------------------------------------------------------------------------------------- */
    box-shadow: 0px 1px 0px 0px rgba(24, 76, 81, 0.2);
    /* Inner */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-knowledge > nav > div {
      position: relative;
      display: block;
      padding: 0px 0px 30px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      white-space: nowrap;
      /* Scroll */
      /* ---------------------------------------------------------------------------------------- */
      overflow: hidden;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      /* Button */
      /* ------------------------------------------------------------------------------------ */ }
      .component-knowledge > nav > div > button {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
        padding: 0px 20px 0px 20px;
        margin: 10px 5px 19px 5px;
        width: auto;
        height: 35px;
        font-family: "Zilla Slab", serif;
        color: #5B8A97;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 31px;
        border: 2px solid #5B8A97;
        background-color: transparent;
        border-radius: 17.5px;
        outline: none;
        /* First */
        /* -------------------------------------------------------------------------------- */
        /* Last */
        /* -------------------------------------------------------------------------------- */
        /* Active */
        /* -------------------------------------------------------------------------------- */
        /* Selected */
        /* -------------------------------------------------------------------------------- */ }
        .component-knowledge > nav > div > button:first-child {
          margin-left: 20px; }
        .component-knowledge > nav > div > button:last-child {
          margin-right: 20px; }
        .component-knowledge > nav > div > button:active {
          background-color: #5B8A97;
          color: white; }
        .component-knowledge > nav > div > button.selected {
          background-color: #5B8A97;
          color: white; }
  .component-knowledge > div {
    position: relative;
    display: block;
    flex: 1;
    box-sizing: border-box;
    padding: 19px 20px 40px 20px;
    margin: 1px 0px 0px 0px;
    width: 100%;
    height: auto;
    /* Scroll */
    /* -------------------------------------------------------------------------------------------- */
    overflow: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* Transition */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 0.3s ease-in-out;
    /* Article */
    /* -------------------------------------------------------------------------------------------- */
    /* No Results */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-knowledge > div > * {
      -webkit-overflow-scrolling: auto; }
    .component-knowledge.loading > div {
      opacity: 0; }
    .component-knowledge > div > article {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 15px 15px 15px 15px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      border-radius: 6px;
      background-color: white;
      border: 1px solid #D6D6D6;
      cursor: pointer;
      /* Fast Touch */
      /* ---------------------------------------------------------------------------------------- */
      touch-action: manipulation;
      /* Image */
      /* ---------------------------------------------------------------------------------------- */
      /* Title */
      /* ---------------------------------------------------------------------------------------- */
      /* Date */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */
      /* Additional */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-knowledge > div > article > img {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 15px 0px;
        width: 100%;
        height: auto;
        border-radius: 4px;
        border: none;
        /* Hide */
        /* ------------------------------------------------------------------------------------ */ }
        .component-knowledge > div > article > img.hide {
          display: none; }
      .component-knowledge > div > article > h1 {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: -4px 0px -4px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #184C51;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 20px;
        text-align: left; }
      .component-knowledge > div > article > h1 > time {
        position: relative;
        display: block;
        padding: 0px 0px 0px 10px;
        margin: 2px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #999999;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 11px;
        text-align: right;
        float: right; }
      .component-knowledge > div > article > p {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 12px 0px -4px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #999999;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 16px;
        word-break: break-word;
        text-align: left; }
      .component-knowledge > div > article + article {
        margin-top: 10px; }
      .component-knowledge > div > article:active {
        border-color: #184C51; }
    .component-knowledge > div > p {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 10px 0px 0px 0px;
      width: auto;
      height: auto;
      font-family: "Open Sans", sans-serif;
      color: #5C5C5C;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 15px;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      text-align: center; }

/* Imports */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Knowledge - Article */
/* ---------------------------------------------------------------------------------------------------- */
.component-knowledge-article {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-knowledge-article {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-knowledge-article {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-knowledge-article {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-knowledge-article {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-knowledge-article {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-knowledge-article {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-knowledge-article {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-knowledge-article {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-knowledge-article {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-knowledge-article {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-knowledge-article {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-knowledge-article {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-knowledge-article {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-knowledge-article {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-knowledge-article {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-knowledge-article {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-knowledge-article {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-knowledge-article {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-knowledge-article {
    background-size: 100% 100%; }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-knowledge-article {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-knowledge-article {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-knowledge-article > div {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Header */
    /* -------------------------------------------------------------------------------------------- */
    /* Content */
    /* -------------------------------------------------------------------------------------------- */
    /* Footer */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-knowledge-article > div > header {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 0px 20px 0px 20px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      /* Background */
      /* ---------------------------------------------------------------------------------------- */
      background: radial-gradient(circle at 0% 0%, #184c51 0%, #5b8a97 100%);
      /* Safe Area */
      /* ---------------------------------------------------------------------------------------- */
      padding-top: 44px;
      /* Inner */
      /* ---------------------------------------------------------------------------------------- */ }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-knowledge-article > div > header {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 44px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-knowledge-article > div > header {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 44px + var( --safe-area-inset-top )); } }
      .component-knowledge-article > div > header > div {
        position: relative;
        display: block;
        padding: 10px 0px 20px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        /* Text */
        /* ------------------------------------------------------------------------------------ */ }
        .component-knowledge-article > div > header > div > h1 {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: -8px 0px -8px 0px;
          width: 100%;
          height: auto;
          font-family: "Zilla Slab", serif;
          color: white;
          font-size: 28px;
          font-weight: 500;
          letter-spacing: normal;
          line-height: 34px;
          white-space: normal; }
    .component-knowledge-article > div > section {
      position: relative;
      display: block;
      flex: 1;
      box-sizing: border-box;
      padding: 20px 20px 40px 20px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      /* Transition */
      /* ---------------------------------------------------------------------------------------- */
      /* Scroll */
      /* ---------------------------------------------------------------------------------------- */
      overflow: hidden;
      overflow-y: scroll;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      /* Image */
      /* ---------------------------------------------------------------------------------------- */
      /* Time */
      /* ---------------------------------------------------------------------------------------- */
      /* Subtitle H2 */
      /* ---------------------------------------------------------------------------------------- */
      /* Subtitle H3 */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-knowledge-article.footer > div > section {
        padding-bottom: 20px; }
      .component-knowledge-article > div > section > * {
        -webkit-overflow-scrolling: auto; }
      .component-knowledge-article > div > section > img {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 15px 0px;
        width: 100%;
        height: auto;
        border-radius: 4px;
        border: none;
        /* Hide */
        /* ------------------------------------------------------------------------------------ */ }
        .component-knowledge-article > div > section > img.hide {
          display: none; }
      .component-knowledge-article > div > section > time {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Zilla Slab", serif;
        color: #5B8A97;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 16px; }
      .component-knowledge-article > div > section > h2 {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 20px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 26px;
        font-weight: 500;
        letter-spacing: normal;
        line-height: 32px; }
      .component-knowledge-article > div > section > h3 {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 20px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: normal;
        line-height: 28px; }
      .component-knowledge-article > div > section > p {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 20px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #474747;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 22px;
        word-break: break-word;
        /* Bold */
        /* ------------------------------------------------------------------------------------ */ }
        .component-knowledge-article > div > section > p > b, .component-knowledge-article > div > section > p > strong {
          font-weight: 600; }
    .component-knowledge-article > div > footer {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: 49px;
      /* Background */
      /* ---------------------------------------------------------------------------------------- */
      background-color: white;
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
      /* Buttons */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-knowledge-article > div > footer > .button-previous, .component-knowledge-article > div > footer > .button-next {
        position: absolute;
        display: block;
        visibility: visible;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        background-color: transparent;
        border: none;
        outline: none;
        /* Fast Touch */
        /* ------------------------------------------------------------------------------------ */
        touch-action: manipulation;
        /* SVG */
        /* ------------------------------------------------------------------------------------ */
        /* Active */
        /* ------------------------------------------------------------------------------------ */
        /* Previous */
        /* ------------------------------------------------------------------------------------ */
        /* Next */
        /* ------------------------------------------------------------------------------------ */ }
        .component-knowledge-article > div > footer > .button-previous > svg, .component-knowledge-article > div > footer > .button-next > svg {
          fill: #5B8A97;
          width: 12px;
          height: 22px; }
        .component-knowledge-article > div > footer > .button-previous:active > svg, .component-knowledge-article > div > footer > .button-next:active > svg {
          fill: #184C51; }
        .component-knowledge-article > div > footer > .button-previous.button-previous, .component-knowledge-article > div > footer > .button-next.button-previous {
          top: 6px;
          left: 6px;
          padding: 7px 14px 7px 14px; }
        .component-knowledge-article > div > footer > .button-previous.button-next, .component-knowledge-article > div > footer > .button-next.button-next {
          top: 6px;
          right: 6px;
          padding: 7px 14px 7px 14px; }

/* Component - Knowledge - Article - Header */
/* ---------------------------------------------------------------------------------------------------- */
html.page-authenticated-toolkit-knowledge-article body > .app-container > .app-header > div > a > svg,
html.page-authenticated-toolkit-knowledge-article body > .app-container > .app-header > div > button > svg {
  fill: white; }

/* Component - Dashboard - Article */
/* ---------------------------------------------------------------------------------------------------- */
html.page-authenticated-dashboard-article body > .app-container > .app-header > div > a > svg,
html.page-authenticated-dashboard-article body > .app-container > .app-header > div > button > svg {
  fill: white; }

/* Component - Toolkit */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Toolkit */
/* ---------------------------------------------------------------------------------------------------- */
.component-toolkit {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-toolkit {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-toolkit {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-toolkit {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-toolkit {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-toolkit {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-toolkit {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-toolkit {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-toolkit {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-toolkit {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-toolkit {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-toolkit {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-toolkit {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-toolkit {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-toolkit {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-toolkit {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-toolkit {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-toolkit {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-toolkit {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-toolkit {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-toolkit {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-toolkit {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-toolkit {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-toolkit {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-toolkit {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-toolkit {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-toolkit {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-toolkit > div {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Transition */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 0.3s ease-in-out;
    /* Buttons * /
        /* -------------------------------------------------------------------------------------------- */ }
    .component-toolkit.loading > div {
      opacity: 0; }
    .component-toolkit > div > a {
      position: relative;
      display: inline-flex;
      align-items: stretch;
      flex-direction: column;
      padding: 0px 0px 0px 0px;
      margin: 15px 0px 0px 0px;
      width: calc( 50% - 7.5px);
      height: calc( 33.3333333333% - 10px);
      background-color: white;
      text-decoration: none;
      vertical-align: top;
      /* Border */
      /* ---------------------------------------------------------------------------------------- */
      border-radius: 15px;
      box-sizing: border-box;
      border: 1px solid #D6D6D6;
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      /* Icon */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */
      /* First */
      /* ---------------------------------------------------------------------------------------- */
      /* Odd */
      /* ---------------------------------------------------------------------------------------- */
      /* Even */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-toolkit > div > a > div:first-child {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        flex: 1;
        /* Icon */
        /* ------------------------------------------------------------------------------------ */ }
        .component-toolkit > div > a > div:first-child > i {
          position: relative;
          display: flex;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 40%;
          height: 40%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          justify-content: center;
          align-items: center;
          overflow: hidden;
          /* SVG */
          /* -------------------------------------------------------------------------------- */ }
          .component-toolkit > div > a > div:first-child > i > svg {
            position: relative;
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            fill: #5B8A97; }
      .component-toolkit > div > a > div:last-child {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 2px 2px 2px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        /* Inner */
        /* ------------------------------------------------------------------------------------ */ }
        .component-toolkit > div > a > div:last-child > span {
          position: relative;
          display: block;
          box-sizing: border-box;
          padding: 10px 0px 10px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: auto;
          /* Font */
          /* -------------------------------------------------------------------------------- */
          font-family: "Open Sans", sans-serif;
          color: #184C51;
          font-size: 4vw;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 5.35vw;
          text-align: center;
          /* Background */
          /* -------------------------------------------------------------------------------- */
          background: linear-gradient(160deg, rgba(91, 138, 151, 0.2) 0%, rgba(91, 138, 151, 0) 100%), #FFFFFF;
          border-bottom-left-radius: 13px;
          border-bottom-right-radius: 13px; }
      .component-toolkit > div > a:nth-child(-n+2) {
        margin-top: 0px; }
      .component-toolkit > div > a:nth-child(odd) {
        margin-right: 7.5px; }
      .component-toolkit > div > a:nth-child(even) {
        margin-left: 7.5px; }
      .component-toolkit > div > a:active {
        /* Icon */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */ }
        .component-toolkit > div > a:active > div:first-child > i > svg {
          fill: #184C51; }
        .component-toolkit > div > a:active > div:last-child > span {
          color: white;
          background: #184C51; }

/* Component - Life Event */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Life Event */
/* ---------------------------------------------------------------------------------------------------- */
.component-life-event {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  /* Loading */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-life-event {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-life-event {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-life-event {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-life-event {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-life-event {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-life-event {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-life-event {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-life-event {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-life-event {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-life-event {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-life-event {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-life-event {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-life-event {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-life-event {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-life-event {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-life-event {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-life-event {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-life-event {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-life-event {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-life-event {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-life-event {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-life-event {
      padding-bottom: constant(safe-area-inset-bottom); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-life-event {
      padding-bottom: env(safe-area-inset-bottom); } }
  .component-life-event.loading {
    pointer-events: none;
    /* Button */
    /* -------------------------------------------------------------------------------------------- */
    /* Flower */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-life-event.loading > div > .input-button {
      opacity: 0; }
    .component-life-event.loading .component-flower-large {
      opacity: 0; }
  .component-life-event > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    /* Back Button */
    /* -------------------------------------------------------------------------------------------- */
    /* Spacer */
    /* -------------------------------------------------------------------------------------------- */
    /* Title */
    /* -------------------------------------------------------------------------------------------- */
    /* Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Text Area */
    /* -------------------------------------------------------------------------------------------- */
    /* Binary Stresses */
    /* -------------------------------------------------------------------------------------------- */
    /* Button */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-life-event > div > .button-back {
      position: absolute;
      display: block;
      visibility: visible;
      box-sizing: border-box;
      padding: 4px 18px 4px 0px;
      margin: 0px 0px 0px 0px;
      width: 30px;
      height: 30px;
      top: -37px;
      left: 10px;
      background-color: transparent;
      border: none;
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      /* SVG */
      /* ---------------------------------------------------------------------------------------- */
      /* Transition */
      /* ---------------------------------------------------------------------------------------- */
      transition: opacity 0.3s ease-in-out, fill 0.3s ease-in-out; }
      .component-life-event > div > .button-back > svg {
        fill: #184C51;
        width: 12px;
        height: 22px; }
      .component-life-event > div > .button-back {
        pointer-events: auto;
        opacity: 1; }
    .component-life-event > div > div:first-child {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto; }
    .component-life-event > div h1 {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: auto;
      font-family: "Zilla Slab", serif;
      color: #184C51;
      font-size: 28px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 34px;
      text-align: left;
      white-space: nowrap;
      /* Focus */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-life-event.focus > div h1 {
        display: none; }
    .component-life-event > div p {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 10px 0px 0px 0px;
      width: auto;
      height: auto;
      font-family: "Open Sans", sans-serif;
      color: #5B8A97;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: normal;
      text-align: center; }
    .component-life-event > div .question-textarea {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 30px 0px 0px 0px;
      width: auto;
      height: auto;
      /* Focus */
      /* ---------------------------------------------------------------------------------------- */
      /* Input */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-life-event.focus > div .question-textarea {
        margin-top: 0px; }
      .component-life-event > div .question-textarea > .input-textarea {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        /* Textarea */
        /* ------------------------------------------------------------------------------------ */ }
        .component-life-event > div .question-textarea > .input-textarea > textarea {
          position: relative;
          display: inline-block;
          padding: 10px 10px 10px 10px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: auto;
          box-sizing: border-box;
          vertical-align: top;
          cursor: pointer;
          /* Font */
          /* -------------------------------------------------------------------------------- */
          font-family: "Open Sans", sans-serif;
          color: #333333;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: normal;
          /* Background */
          /* -------------------------------------------------------------------------------- */
          background: white;
          /* Border */
          /* -------------------------------------------------------------------------------- */
          border: 2px solid #5B8A97;
          border-radius: 8px;
          /* Remove Browser Styling */
          /* -------------------------------------------------------------------------------- */
          -webkit-appearance: none;
          appearance: none;
          outline: none;
          resize: none; }
    .component-life-event > div > div > .binary-stresses {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 30px 0px 0px 0px;
      width: 100%;
      height: auto;
      /* Button */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-life-event > div > div > .binary-stresses > button {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 20px 0px 0px 0px;
        width: calc( 50% - 10px);
        height: 90px;
        border: 2px solid #D6D6D6;
        border-radius: 4px;
        background: none;
        /* Fast Touch */
        /* ------------------------------------------------------------------------------------ */
        touch-action: manipulation;
        /* Top Row */
        /* ------------------------------------------------------------------------------------ */
        /* Left Column */
        /* ------------------------------------------------------------------------------------ */
        /* Right Column */
        /* ------------------------------------------------------------------------------------ */
        /* Icon */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */
        /* Selected */
        /* ------------------------------------------------------------------------------------ */
        /* Caffeine Intake */
        /* ------------------------------------------------------------------------------------ */
        /* Hydration */
        /* ------------------------------------------------------------------------------------ */
        /* Screen Time */
        /* ------------------------------------------------------------------------------------ */
        /* General Health */
        /* ------------------------------------------------------------------------------------ */
        /* Time Out For Me */
        /* ------------------------------------------------------------------------------------ */
        /* Preparation For Sleep */
        /* ------------------------------------------------------------------------------------ */
        /* Movement / Exercise */
        /* ------------------------------------------------------------------------------------ */ }
        .component-life-event > div > div > .binary-stresses > button:nth-child(1), .component-life-event > div > div > .binary-stresses > button:nth-child(2) {
          margin-top: 0px; }
        .component-life-event > div > div > .binary-stresses > button:nth-child(odd) {
          margin-right: 10px; }
        .component-life-event > div > div > .binary-stresses > button:nth-child(even) {
          margin-left: 10px; }
        .component-life-event > div > div > .binary-stresses > button > i {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px  auto 0px auto;
          width: auto;
          height: 39px;
          top: 10px;
          left: 0px;
          right: 0px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center; }
        .component-life-event > div > div > .binary-stresses > button > span {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          bottom: 10px;
          left: 0px;
          right: 0px;
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 15px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 15px;
          text-align: center;
          white-space: nowrap;
          /* Breakpoints */
          /* -------------------------------------------------------------------------------- */ }
          @media (max-width: 374px) {
            .component-life-event > div > div > .binary-stresses > button > span {
              font-size: 14px;
              line-height: 14px; } }
          @media (max-width: 340px) {
            .component-life-event > div > div > .binary-stresses > button > span {
              font-size: 13px;
              line-height: 13px; } }
          @media (max-width: 320px) {
            .component-life-event > div > div > .binary-stresses > button > span {
              font-size: 12px;
              line-height: 12px; } }
        .component-life-event > div > div > .binary-stresses > button.selected {
          background-color: white;
          border-color: white;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
          /* Icon */
          /* -------------------------------------------------------------------------------- */ }
          .component-life-event > div > div > .binary-stresses > button.selected:after {
            position: absolute;
            display: block;
            content: " ";
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 24px;
            height: 24px;
            top: 3px;
            right: 3px;
            /* Image */
            /* ---------------------------------------------------------------------------- */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            background-image: url(/assets/images/selected-flower.png); }
        .component-life-event > div > div > .binary-stresses > button.icon-1 > i {
          background-image: url(/assets/images/binary-stresses/caffeine-intake-primary.svg); }
        .component-life-event > div > div > .binary-stresses > button.icon-2 > i {
          background-image: url(/assets/images/binary-stresses/hydration-primary.svg); }
        .component-life-event > div > div > .binary-stresses > button.icon-3 > i {
          background-image: url(/assets/images/binary-stresses/screen-time-primary.svg); }
        .component-life-event > div > div > .binary-stresses > button.icon-4 > i {
          background-image: url(/assets/images/binary-stresses/general-health-primary.svg); }
        .component-life-event > div > div > .binary-stresses > button.icon-5 > i {
          background-image: url(/assets/images/binary-stresses/time-out-for-me-primary.svg); }
        .component-life-event > div > div > .binary-stresses > button.icon-6 > i {
          background-image: url(/assets/images/binary-stresses/preparation-for-sleep-primary.svg); }
        .component-life-event > div > div > .binary-stresses > button.icon-7 > i {
          background-image: url(/assets/images/binary-stresses/movement-exercise-primary.svg); }
    .component-life-event > div > .input-button {
      background-color: #5B8A97;
      border-color: #3E5E66;
      color: white; }
      .component-life-event > div > .input-button:active {
        background-color: #3E5E66;
        border-color: #3E5E66; }

/* Component - Life Event - Back Button */
/* ---------------------------------------------------------------------------------------------------- */
html.page-authenticated-life-event body > .app-container {
  /* Header */
  /* ------------------------------------------------------------------------------------------------ */
  /* Page */
  /* ------------------------------------------------------------------------------------------------ */ }
  html.page-authenticated-life-event body > .app-container > .app-header > div > button {
    opacity: 1; }
  html.page-authenticated-life-event body > .app-container .page-authenticated-life-event.transitioning-to-child .component-life-event .button-back,
  html.page-authenticated-life-event body > .app-container .page-authenticated-life-event.transitioning-to-parent .component-life-event .button-back {
    display: none; }

/* Imports */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Life Event Options */
/* ---------------------------------------------------------------------------------------------------- */
.component-life-event-options {
  position: fixed;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: auto;
  height: 100%;
  top: 0px;
  bottom: auto;
  left: 0px;
  right: 0px;
  z-index: 3;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  .component-life-event-options > div {
    position: fixed;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: 49px;
    top: auto;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
    /* Safe Area */
    /* -------------------------------------------------------------------------------------------- */
    /* Mask */
    /* -------------------------------------------------------------------------------------------- */
    /* Button - Close */
    /* -------------------------------------------------------------------------------------------- */
    /* Options */
    /* -------------------------------------------------------------------------------------------- */ }
    @supports (padding-bottom: constant(safe-area-inset-bottom)) {
      .component-life-event-options > div {
        padding-bottom: constant(safe-area-inset-bottom); } }
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      .component-life-event-options > div {
        padding-bottom: env(safe-area-inset-bottom); } }
    .component-life-event-options > div:before {
      position: absolute;
      display: block;
      content: " ";
      padding: 0px 0px 0px 0px;
      margin: -29.5px 0px 0px -29px;
      width: 58px;
      height: 58px;
      top: 0px;
      left: 50%;
      border-radius: 50%;
      background-color: rgba(24, 76, 81, 0.7);
      /* Transition */
      /* ---------------------------------------------------------------------------------------- */
      transition: transform .2s ease-in-out;
      /* Open */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-life-event-options.show > div:before {
        /* Screens */
        /* ------------------------------------------------------------------------------------------------ */
        /* Loop Screens */
        /* ------------------------------------------------------------------------------------------------ */ }
        @media (min-device-height: 480px) {
          .component-life-event-options.show > div:before {
            transform: scale(19); } }
        @media (min-device-height: 568px) {
          .component-life-event-options.show > div:before {
            transform: scale(22); } }
        @media (min-device-height: 640px) {
          .component-life-event-options.show > div:before {
            transform: scale(25); } }
        @media (min-device-height: 667px) {
          .component-life-event-options.show > div:before {
            transform: scale(25); } }
        @media (min-device-height: 732px) {
          .component-life-event-options.show > div:before {
            transform: scale(28); } }
        @media (min-device-height: 736px) {
          .component-life-event-options.show > div:before {
            transform: scale(28); } }
        @media (min-device-height: 740px) {
          .component-life-event-options.show > div:before {
            transform: scale(28); } }
        @media (min-device-height: 760px) {
          .component-life-event-options.show > div:before {
            transform: scale(29); } }
        @media (min-device-height: 767px) {
          .component-life-event-options.show > div:before {
            transform: scale(29); } }
        @media (min-device-height: 812px) {
          .component-life-event-options.show > div:before {
            transform: scale(30); } }
        @media (min-device-height: 824px) {
          .component-life-event-options.show > div:before {
            transform: scale(31); } }
        @media (min-device-height: 847px) {
          .component-life-event-options.show > div:before {
            transform: scale(32); } }
        @media (min-device-height: 853px) {
          .component-life-event-options.show > div:before {
            transform: scale(32); } }
        @media (min-device-height: 896px) {
          .component-life-event-options.show > div:before {
            transform: scale(33); } }
        @media (min-device-height: 906px) {
          .component-life-event-options.show > div:before {
            transform: scale(34); } }
        @media (min-device-height: 1024px) {
          .component-life-event-options.show > div:before {
            transform: scale(38); } }
        @media (min-device-height: 1200px) {
          .component-life-event-options.show > div:before {
            transform: scale(44); } }
        @media (min-device-height: 1366px) {
          .component-life-event-options.show > div:before {
            transform: scale(50); } }
    .component-life-event-options > div > .button-close {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: -29.5px auto 0px auto;
      width: 58px;
      height: 58px;
      vertical-align: middle;
      border: none;
      border-radius: 50%;
      background-color: #5B8A97;
      box-shadow: 0px 5px 10px rgba(91, 138, 151, 0.5);
      cursor: pointer;
      /* Fast Touch */
      /* ---------------------------------------------------------------------------------------- */
      touch-action: manipulation;
      /* Transition */
      /* ---------------------------------------------------------------------------------------- */
      transition: background-color 0.2s ease-in-out;
      /* Active */
      /* ---------------------------------------------------------------------------------------- */
      /* Cross */
      /* ---------------------------------------------------------------------------------------- */
      /* Cross - Horizontal */
      /* ---------------------------------------------------------------------------------------- */
      /* Cross - Vertical */
      /* ---------------------------------------------------------------------------------------- */
      /* Animate */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-life-event-options > div > .button-close:active {
        background-color: #184C51; }
      .component-life-event-options > div > .button-close:before, .component-life-event-options > div > .button-close:after {
        position: absolute;
        display: block;
        content: " ";
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        top: 50%;
        left: 50%;
        background-color: white;
        /* Transition */
        /* ------------------------------------------------------------------------------------ */
        transition: transform 0.2s ease-in-out; }
      .component-life-event-options > div > .button-close:before {
        width: 24px;
        height: 2px;
        margin-top: -1px;
        margin-left: -12px; }
      .component-life-event-options > div > .button-close:after {
        width: 2px;
        height: 24px;
        margin-top: -12px;
        margin-left: -1px; }
      .component-life-event-options.show > div > .button-close {
        background-color: white;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); }
        .component-life-event-options.show > div > .button-close:before, .component-life-event-options.show > div > .button-close:after {
          color: white;
          background-color: #5B8A97;
          transform: rotate(45deg); }
    .component-life-event-options > div > div {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: -29.5px 0px 0px -29px;
      width: 58px;
      height: 58px;
      top: 0px;
      left: 50%;
      /* Buttons */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-life-event-options > div > div > button {
        position: absolute;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 58px;
        height: 58px;
        vertical-align: middle;
        border: none;
        border-radius: 50%;
        background-color: #5B8A97;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0);
        cursor: pointer;
        /* Fast Touch */
        /* ------------------------------------------------------------------------------------ */
        touch-action: manipulation;
        /* Transition */
        /* ------------------------------------------------------------------------------------ */
        transition: all .2s ease-in-out;
        /* Open */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */
        /* Yesterday */
        /* ------------------------------------------------------------------------------------ */
        /* Today */
        /* ------------------------------------------------------------------------------------ */
        /* Other Day */
        /* ------------------------------------------------------------------------------------ */
        /* Active */
        /* ------------------------------------------------------------------------------------ */ }
        .component-life-event-options.show > div > div > button {
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); }
        .component-life-event-options > div > div > button > span {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px -40px;
          width: 80px;
          height: 15px;
          left: 50%;
          top: 68px;
          font-family: "Open Sans", sans-serif;
          color: white;
          font-size: 15px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 15px;
          text-align: center;
          white-space: nowrap;
          pointer-events: none;
          opacity: 0;
          /* Transition */
          /* -------------------------------------------------------------------------------- */
          transition: all .2s ease-in-out;
          /* Open */
          /* -------------------------------------------------------------------------------- */ }
          .component-life-event-options.show > div > div > button > span {
            opacity: 1; }
        .component-life-event-options > div > div > button.button-yesterday {
          background-color: #F2E77E;
          bottom: 0px;
          right: 0px;
          /* Open */
          /* -------------------------------------------------------------------------------- */ }
          .component-life-event-options > div > div > button.button-yesterday > svg {
            fill: #184C51;
            width: 24px;
            height: 23px; }
          .component-life-event-options.show > div > div > button.button-yesterday {
            bottom: 52px;
            right: 100px; }
        .component-life-event-options > div > div > button.button-today {
          background-color: #5B8A97;
          bottom: 0px;
          /* Open */
          /* -------------------------------------------------------------------------------- */ }
          .component-life-event-options > div > div > button.button-today > svg {
            fill: white;
            width: 24px;
            height: 24px; }
          .component-life-event-options.show > div > div > button.button-today {
            bottom: 110px; }
        .component-life-event-options > div > div > button.button-other {
          background-color: #184C51;
          bottom: 0px;
          left: 0px;
          /* Open */
          /* -------------------------------------------------------------------------------- */ }
          .component-life-event-options > div > div > button.button-other > svg {
            fill: white;
            width: 24px;
            height: 23px; }
          .component-life-event-options.show > div > div > button.button-other {
            bottom: 52px;
            left: 100px; }
        .component-life-event-options > div > div > button:active {
          background-color: white; }
          .component-life-event-options > div > div > button:active > svg {
            fill: #184C51; }

/* Component - Calendar */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Calendar */
/* ---------------------------------------------------------------------------------------------------- */
.component-calendar {
  position: fixed;
  display: block;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: auto;
  height: 100%;
  top: 100%;
  bottom: auto;
  left: 0px;
  right: 0px;
  z-index: 3;
  /* Show */
  /* ------------------------------------------------------------------------------------------------ */
  /* Transition */
  /* ------------------------------------------------------------------------------------------------ */
  transition: top 0.3s ease-in-out;
  /* Hardware Acceleration */
  /* ------------------------------------------------------------------------------------------------ */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  /* Mask */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  .component-calendar.show {
    top: 0%; }
  .component-calendar:before {
    position: fixed;
    display: block;
    content: " ";
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: 100%;
    top: 0px;
    bottom: auto;
    left: 0px;
    right: 0px;
    background-color: black;
    opacity: 0;
    /* Transition */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 0.3s ease-in-out; }
    .component-calendar.show:before {
      opacity: 0.4; }
  .component-calendar > div {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Background */
    /* -------------------------------------------------------------------------------------------- */
    background-color: white;
    /* Header */
    /* -------------------------------------------------------------------------------------------- */
    /* Content */
    /* -------------------------------------------------------------------------------------------- */
    /* Footer */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-calendar > div > .component-calendar-header {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      overflow: hidden;
      z-index: 2;
      /* Safe Area */
      /* ---------------------------------------------------------------------------------------- */
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      box-shadow: 0px 1px 0px 0px rgba(24, 76, 81, 0.2);
      /* Inner */
      /* ---------------------------------------------------------------------------------------- */ }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-calendar > div > .component-calendar-header {
          padding-top: constant(safe-area-inset-top); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-calendar > div > .component-calendar-header {
          padding-top: env(safe-area-inset-top); } }
      .component-calendar > div > .component-calendar-header > div {
        position: relative;
        display: block;
        padding: 44px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        /* Title */
        /* ------------------------------------------------------------------------------------ */
        /* Close Button */
        /* ------------------------------------------------------------------------------------ */
        /* Clear Button */
        /* ------------------------------------------------------------------------------------ */
        /* Days */
        /* ------------------------------------------------------------------------------------ */ }
        .component-calendar > div > .component-calendar-header > div > h1 {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: auto;
          top: 0px;
          left: 0px;
          /* Font */
          /* -------------------------------------------------------------------------------- */
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 18px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 44px;
          text-align: center;
          white-space: nowrap; }
        .component-calendar > div > .component-calendar-header > div > .button-close {
          position: absolute;
          display: block;
          box-sizing: border-box;
          padding: 9px 8px 9px 0px;
          margin: 0px 0px 0px 0px;
          width: 30px;
          height: 30px;
          top: 7px;
          left: 20px;
          background-color: transparent;
          border: none;
          z-index: 1;
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* SVG */
          /* -------------------------------------------------------------------------------- */ }
          .component-calendar > div > .component-calendar-header > div > .button-close > svg {
            fill: #184C51;
            width: 22px;
            height: 12px; }
        .component-calendar > div > .component-calendar-header > div > .button-clear {
          position: absolute;
          display: block;
          padding: 0px 5px 0px 5px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: 24px;
          top: 10px;
          right: 15px;
          background: transparent;
          border: none;
          z-index: 1;
          /* Font */
          /* -------------------------------------------------------------------------------- */
          font-family: "Open Sans", sans-serif;
          color: #5B8A97;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: normal;
          line-height: 24px;
          text-align: center;
          /* Breakpoint */
          /* -------------------------------------------------------------------------------- */
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* Active */
          /* -------------------------------------------------------------------------------- */ }
          @media (max-width: 320px) {
            .component-calendar > div > .component-calendar-header > div > .button-clear {
              font-size: 13px; } }
          .component-calendar > div > .component-calendar-header > div > .button-clear:active {
            color: #184C51; }
        .component-calendar > div > .component-calendar-header > div > div {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: auto;
          /* Day */
          /* -------------------------------------------------------------------------------- */ }
          .component-calendar > div > .component-calendar-header > div > div > span {
            position: relative;
            display: inline-block;
            padding: 0px 0px 4px 0px;
            margin: 0px 0px 0px 0px;
            width: 14.285714285714286%;
            height: auto;
            /* Font */
            /* ---------------------------------------------------------------------------- */
            font-family: "Open Sans", sans-serif;
            color: #848484;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 12px;
            text-align: center;
            white-space: nowrap; }
    .component-calendar > div > section {
      position: relative;
      display: block;
      flex: 1;
      box-sizing: border-box;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: auto;
      pointer-events: auto;
      z-index: 1;
      /* Scroll */
      /* ---------------------------------------------------------------------------------------- */
      overflow: hidden;
      overflow-y: scroll;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      /* Year */
      /* ---------------------------------------------------------------------------------------- */
      /* Quarter */
      /* ---------------------------------------------------------------------------------------- */
      /* Month */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-calendar > div > section > * {
        -webkit-overflow-scrolling: auto; }
      .component-calendar.scrolling > div > section {
        pointer-events: none; }
      .component-calendar > div > section .component-calendar-year {
        position: relative;
        display: block;
        visibility: hidden;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto; }
        .component-calendar > div > section .component-calendar-year.show {
          visibility: visible; }
      .component-calendar > div > section .component-calendar-quarter {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto; }
        .component-calendar > div > section .component-calendar-quarter.show {
          visibility: visible; }
      .component-calendar > div > section .component-calendar-month {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: auto;
        overflow: hidden;
        /* Hardware Acceleration */
        /* ------------------------------------------------------------------------------------ */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        /* Row - Last */
        /* ------------------------------------------------------------------------------------ */
        /* Rows - 4 */
        /* ------------------------------------------------------------------------------------ */
        /* Rows - 5 */
        /* ------------------------------------------------------------------------------------ */
        /* Rows - 6 */
        /* ------------------------------------------------------------------------------------ */
        /* Rows - 7 */
        /* ------------------------------------------------------------------------------------ */
        /* Date */
        /* ------------------------------------------------------------------------------------ */
        /* Offset */
        /* ------------------------------------------------------------------------------------ */
        /* Days */
        /* ------------------------------------------------------------------------------------ */ }
        .component-calendar > div > section .component-calendar-month:after {
          position: absolute;
          display: block;
          content: " ";
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: 1px;
          left: 0px;
          right: 0px;
          background-color: #EEEEEE; }
        .component-calendar > div > section .component-calendar-month.rows-4:after {
          bottom: calc( ( 100% / 5 ) - 1px); }
        .component-calendar > div > section .component-calendar-month.rows-5:after {
          bottom: calc( ( 100% / 6 ) - 1px); }
        .component-calendar > div > section .component-calendar-month.rows-6:after {
          bottom: calc( ( 100% / 7 ) - 1px); }
        .component-calendar > div > section .component-calendar-month.rows-7:after {
          bottom: calc( ( 100% / 8 ) - 1px); }
        .component-calendar > div > section .component-calendar-month > h2 {
          position: relative;
          display: block;
          padding: 14.285714285714286% 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 14.285714285714286%;
          height: auto;
          /* Text */
          /* -------------------------------------------------------------------------------- */ }
          .component-calendar > div > section .component-calendar-month > h2 > span {
            position: absolute;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: auto;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: "Zilla Slab", serif;
            color: #184C51;
            font-size: 5vw;
            font-weight: 600;
            letter-spacing: normal;
            line-height: normal;
            text-align: center; }
        .component-calendar > div > section .component-calendar-month.offset-1 > h2, .component-calendar > div > section .component-calendar-month.offset-1 > ul > li:first-child {
          margin-left: 0%; }
        .component-calendar > div > section .component-calendar-month.offset-2 > h2, .component-calendar > div > section .component-calendar-month.offset-2 > ul > li:first-child {
          margin-left: 14.285714285714286%; }
        .component-calendar > div > section .component-calendar-month.offset-3 > h2, .component-calendar > div > section .component-calendar-month.offset-3 > ul > li:first-child {
          margin-left: 28.571428571428571%; }
        .component-calendar > div > section .component-calendar-month.offset-4 > h2, .component-calendar > div > section .component-calendar-month.offset-4 > ul > li:first-child {
          margin-left: 42.857142857142857%; }
        .component-calendar > div > section .component-calendar-month.offset-5 > h2, .component-calendar > div > section .component-calendar-month.offset-5 > ul > li:first-child {
          margin-left: 57.142857142857143%; }
        .component-calendar > div > section .component-calendar-month.offset-6 > h2, .component-calendar > div > section .component-calendar-month.offset-6 > ul > li:first-child {
          margin-left: 71.428571428571429%; }
        .component-calendar > div > section .component-calendar-month.offset-7 > h2, .component-calendar > div > section .component-calendar-month.offset-7 > ul > li:first-child {
          margin-left: 85.714285714285714%; }
        .component-calendar > div > section .component-calendar-month > ul {
          position: relative;
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: auto;
          list-style: none;
          /* Day */
          /* -------------------------------------------------------------------------------- */ }
          .component-calendar > div > section .component-calendar-month > ul > li {
            position: relative;
            display: block;
            padding: 14.285714285714286% 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 14.285714285714286%;
            height: auto;
            border-top: 1px solid #EEEEEE;
            /* Button */
            /* ---------------------------------------------------------------------------- */
            /* Event */
            /* ---------------------------------------------------------------------------- */
            /* Today */
            /* ---------------------------------------------------------------------------- */
            /* Range */
            /* ---------------------------------------------------------------------------- */
            /* Range - First / Start */
            /* ---------------------------------------------------------------------------- */
            /* Range - Left / End */
            /* ---------------------------------------------------------------------------- */
            /* Selected */
            /* ---------------------------------------------------------------------------- */
            /* Selected Range */
            /* ---------------------------------------------------------------------------- */
            /* Selected Event */
            /* ---------------------------------------------------------------------------- */
            /* Disabled */
            /* ---------------------------------------------------------------------------- */ }
            .component-calendar > div > section .component-calendar-month > ul > li > button {
              position: absolute;
              display: block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: calc( 100% - 10px);
              height: calc( 100% - 10px);
              top: 5px;
              left: 5px;
              font-family: "Open Sans", sans-serif;
              color: #184C51;
              font-size: 4vw;
              font-weight: 400;
              letter-spacing: normal;
              line-height: normal;
              text-align: center;
              background-color: transparent;
              outline: none;
              border: none; }
            .component-calendar > div > section .component-calendar-month > ul > li.event:after {
              position: absolute;
              display: block;
              content: " ";
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px -4%;
              width: 8%;
              height: 8%;
              bottom: calc( 6px + 12%);
              left: 50%;
              background-color: #5B8A97;
              border-radius: 50%;
              z-index: 1; }
            .component-calendar > div > section .component-calendar-month > ul > li.today > button {
              border: 1px solid #EEEEEE;
              border-radius: 50%; }
            .component-calendar > div > section .component-calendar-month > ul > li.range > button {
              border: none;
              border-color: black;
              background-color: transparent;
              color: black; }
            .component-calendar > div > section .component-calendar-month > ul > li.range:before {
              position: absolute;
              display: block;
              content: " ";
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: calc( 100% - 10px);
              top: 5px;
              left: 0px;
              right: 0px;
              background-color: #EEEEEE; }
            .component-calendar > div > section .component-calendar-month > ul > li.range.first:before {
              left: 5px;
              background-color: #EEEEEE;
              border-top-left-radius: 6px;
              border-bottom-left-radius: 6px; }
            .component-calendar > div > section .component-calendar-month > ul > li.range.last:before {
              right: 5px;
              background-color: #EEEEEE;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px; }
            .component-calendar > div > section .component-calendar-month > ul > li.selected > button {
              border: none;
              border-radius: 50%;
              background-color: #5B8A97;
              color: white; }
            .component-calendar > div > section .component-calendar-month > ul > li.selected.range > button {
              border: 4px solid #EEEEEE; }
            .component-calendar > div > section .component-calendar-month > ul > li.selected.range.start:before {
              left: 5px;
              background-color: #EEEEEE;
              border-top-left-radius: 50%;
              border-bottom-left-radius: 50%; }
            .component-calendar > div > section .component-calendar-month > ul > li.selected.range.end:before {
              right: 5px;
              background-color: #EEEEEE;
              border-top-right-radius: 50%;
              border-bottom-right-radius: 50%; }
            .component-calendar > div > section .component-calendar-month > ul > li.selected.event > button:after {
              background-color: white; }
            .component-calendar > div > section .component-calendar-month > ul > li.selected.event:after {
              display: none; }
            .component-calendar > div > section .component-calendar-month > ul > li.disabled > button {
              pointer-events: none;
              cursor: default;
              color: #D6D6D6; }
    .component-calendar > div > .component-calendar-footer {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 49px;
      overflow: hidden;
      z-index: 2;
      /* Safe Area */
      /* ---------------------------------------------------------------------------------------- */
      /* Background */
      /* ---------------------------------------------------------------------------------------- */
      background-color: white;
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
      /* Nav */
      /* ---------------------------------------------------------------------------------------- */ }
      @supports (padding-bottom: constant(safe-area-inset-bottom)) {
        .component-calendar > div > .component-calendar-footer {
          padding-bottom: constant(safe-area-inset-bottom); } }
      @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .component-calendar > div > .component-calendar-footer {
          padding-bottom: env(safe-area-inset-bottom); } }
      .component-calendar > div > .component-calendar-footer > nav {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0px 20px 0px 20px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: 49px;
        /* Buttons */
        /* ------------------------------------------------------------------------------------ */ }
        .component-calendar > div > .component-calendar-footer > nav > button {
          position: relative;
          display: block;
          padding: 0px 5px 0px 5px;
          margin: 5px 0px 0px 0px;
          width: auto;
          height: 39px;
          background: transparent;
          border: none;
          /* First */
          /* -------------------------------------------------------------------------------- */
          /* Last */
          /* -------------------------------------------------------------------------------- */
          /* Font */
          /* -------------------------------------------------------------------------------- */
          font-family: "Open Sans", sans-serif;
          color: #5B8A97;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: normal;
          line-height: 39px;
          text-align: center;
          /* Breakpoint */
          /* -------------------------------------------------------------------------------- */
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* Active */
          /* -------------------------------------------------------------------------------- */ }
          .component-calendar > div > .component-calendar-footer > nav > button:first-child {
            margin-left: -5px; }
          .component-calendar > div > .component-calendar-footer > nav > button:last-child {
            margin-right: -5px;
            color: #999999;
            pointer-events: none;
            /* Selected */
            /* -------------------------------------------------------------------------------- */ }
            .component-calendar > div > .component-calendar-footer.selected > nav > button:last-child {
              color: #5B8A97;
              pointer-events: auto; }
          @media (max-width: 320px) {
            .component-calendar > div > .component-calendar-footer > nav > button {
              font-size: 13px; } }
          .component-calendar > div > .component-calendar-footer > nav > button:active {
            color: #184C51; }

/* Component - Tip */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Tip */
/* ---------------------------------------------------------------------------------------------------- */
.component-tip {
  position: fixed;
  display: block;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: auto;
  height: 100%;
  top: 100%;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 3;
  /* Transition */
  /* ------------------------------------------------------------------------------------------------ */
  transition: top 0.3s ease-in-out;
  /* Mask */
  /* ------------------------------------------------------------------------------------------------ */
  /* Show */
  /* ------------------------------------------------------------------------------------------------ */
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */
  /* Icons - Other */
  /* ------------------------------------------------------------------------------------------------ */
  /* Life Event 1 */
  /* -------------------------------------------------------------------------------------------- */
  /* Life Event 2 */
  /* -------------------------------------------------------------------------------------------- */
  /* Life Event 3 */
  /* -------------------------------------------------------------------------------------------- */
  /* Icons - Stresses */
  /* ------------------------------------------------------------------------------------------------ */
  /* Personal & Family */
  /* -------------------------------------------------------------------------------------------- */
  /* Work Life */
  /* -------------------------------------------------------------------------------------------- */
  /* Hormones */
  /* -------------------------------------------------------------------------------------------- */
  /* Finances */
  /* -------------------------------------------------------------------------------------------- */
  /* Travel / Commuting */
  /* -------------------------------------------------------------------------------------------- */
  /* Physical Activity */
  /* -------------------------------------------------------------------------------------------- */
  /* Icons - Binary Stresses */
  /* ------------------------------------------------------------------------------------------------ */
  /* Caffeine Intake */
  /* -------------------------------------------------------------------------------------------- */
  /* Hydration */
  /* -------------------------------------------------------------------------------------------- */
  /* Screen Time */
  /* -------------------------------------------------------------------------------------------- */
  /* General Health */
  /* -------------------------------------------------------------------------------------------- */
  /* Time Out For Me */
  /* -------------------------------------------------------------------------------------------- */
  /* Preparation For Sleep */
  /* -------------------------------------------------------------------------------------------- */
  /* Movement / Exercise */
  /* -------------------------------------------------------------------------------------------- */ }
  .component-tip:before {
    position: fixed;
    display: block;
    content: " ";
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: 100%;
    top: 0px;
    bottom: auto;
    left: 0px;
    right: 0px;
    background-color: #184C51;
    opacity: 0;
    /* Transition */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 0.3s ease-in-out; }
  .component-tip.show {
    top: 0px;
    /* Mask */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-tip.show:before {
      opacity: 0.75; }
  .component-tip > div {
    position: absolute;
    display: block;
    padding: 35px 15px 15px 15px;
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    left: 20px;
    right: 20px;
    bottom: 20px;
    /* Background */
    /* -------------------------------------------------------------------------------------------- */
    background-color: white;
    /* Border */
    /* -------------------------------------------------------------------------------------------- */
    border-radius: 10px;
    box-shadow: 0px 0px 30px rgba(51, 51, 51, 0.15);
    /* Icon */
    /* -------------------------------------------------------------------------------------------- */
    /* Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Button */
    /* -------------------------------------------------------------------------------------------- */
    /* Buttons Container */
    /* -------------------------------------------------------------------------------------------- */
    /* Close */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-tip > div:before {
      position: relative;
      display: block;
      content: " ";
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: auto;
      height: 40px;
      background-color: #EEEEEE;
      /* Image */
      /* ---------------------------------------------------------------------------------------- */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center; }
    .component-tip > div > p {
      position: relative;
      display: block;
      padding: 45px 0px 0px 0px;
      margin: -5px 0px -6px 0px;
      width: auto;
      height: auto;
      font-family: "Zilla Slab", serif;
      color: #184C51;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 25px;
      text-align: center; }
    .component-tip > div .input-button {
      margin-top: 50px;
      background-color: #5B8A97;
      border-color: #3E5E66;
      color: white; }
      .component-tip > div .input-button:active {
        background-color: #3E5E66;
        border-color: #3E5E66; }
    .component-tip > div > ul {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 50px 0px 0px 0px;
      width: auto;
      height: 50px;
      list-style: none;
      /* Cell */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-tip > div > ul > li {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 50%;
        height: 50px; }
        .component-tip > div > ul > li:first-child {
          padding-right: 7.5px; }
        .component-tip > div > ul > li:last-child {
          padding-left: 7.5px; }
        .component-tip > div > ul > li > .input-button {
          margin-top: 0px; }
    .component-tip > div > .button-close {
      position: absolute;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 15px;
      height: 15px;
      top: 15px;
      right: 15px;
      background-color: transparent;
      outline: none;
      border: none;
      /* SVG */
      /* ---------------------------------------------------------------------------------------- */
      /* Active */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-tip > div > .button-close > svg {
        fill: #999999; }
      .component-tip > div > .button-close:active > svg {
        fill: #3E5E66; }
  .component-tip.life-event-1 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/icon.svg); }
  .component-tip.life-event-2 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/icon.svg); }
  .component-tip.life-event-3 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/icon.svg); }
  .component-tip.onboarding-3 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/stresses/personal-family-primary.svg); }
  .component-tip.onboarding-4 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/stresses/work-life-primary.svg); }
  .component-tip.onboarding-5 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/stresses/hormones-primary.svg); }
  .component-tip.onboarding-6 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/stresses/finances-primary.svg); }
  .component-tip.onboarding-7 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/stresses/travel-primary.svg); }
  .component-tip.onboarding-8 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/stresses/physical-activity-primary.svg); }
  .component-tip.life-event-binary-1 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/caffeine-intake-primary.svg); }
  .component-tip.life-event-binary-2 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/hydration-primary.svg); }
  .component-tip.life-event-binary-3 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/screen-time-primary.svg); }
  .component-tip.life-event-binary-4 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/general-health-primary.svg); }
  .component-tip.life-event-binary-5 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/time-out-for-me-primary.svg); }
  .component-tip.life-event-binary-6 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/preparation-for-sleep-primary.svg); }
  .component-tip.life-event-binary-7 > div:before {
    background-color: transparent;
    background-image: url(/assets/images/binary-stresses/movement-exercise-primary.svg); }

/* Component - Audio Player */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Audio Player */
/* ---------------------------------------------------------------------------------------------------- */
.component-audio-player {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height: 100%;
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background: radial-gradient(circle at 0% 0%, rgba(242, 231, 126, 0.2) 0%, rgba(242, 231, 126, 0) 40%), radial-gradient(circle at 100% 100%, rgba(242, 231, 126, 0.4) 0%, rgba(242, 231, 126, 0) 40%), linear-gradient(180deg, #FFFFFF 0%, #F7F4EA 48.96%, #BDCFCF 100%);
  background-blend-mode: normal , normal , normal;
  /* Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Loop Screens */
  /* ------------------------------------------------------------------------------------------------ */
  /* Desktop */
  /* ------------------------------------------------------------------------------------------------ */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #B0C9C9;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-top: 44px;
  padding-bottom: 49px;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @media (min-device-height: 480px) {
    .component-audio-player {
      background-size: 100% 480px; } }
  @media (min-device-height: 568px) {
    .component-audio-player {
      background-size: 100% 568px; } }
  @media (min-device-height: 640px) {
    .component-audio-player {
      background-size: 100% 640px; } }
  @media (min-device-height: 667px) {
    .component-audio-player {
      background-size: 100% 667px; } }
  @media (min-device-height: 732px) {
    .component-audio-player {
      background-size: 100% 732px; } }
  @media (min-device-height: 736px) {
    .component-audio-player {
      background-size: 100% 736px; } }
  @media (min-device-height: 740px) {
    .component-audio-player {
      background-size: 100% 740px; } }
  @media (min-device-height: 760px) {
    .component-audio-player {
      background-size: 100% 760px; } }
  @media (min-device-height: 767px) {
    .component-audio-player {
      background-size: 100% 767px; } }
  @media (min-device-height: 812px) {
    .component-audio-player {
      background-size: 100% 812px; } }
  @media (min-device-height: 824px) {
    .component-audio-player {
      background-size: 100% 824px; } }
  @media (min-device-height: 847px) {
    .component-audio-player {
      background-size: 100% 847px; } }
  @media (min-device-height: 853px) {
    .component-audio-player {
      background-size: 100% 853px; } }
  @media (min-device-height: 896px) {
    .component-audio-player {
      background-size: 100% 896px; } }
  @media (min-device-height: 906px) {
    .component-audio-player {
      background-size: 100% 906px; } }
  @media (min-device-height: 1024px) {
    .component-audio-player {
      background-size: 100% 1024px; } }
  @media (min-device-height: 1200px) {
    .component-audio-player {
      background-size: 100% 1200px; } }
  @media (min-device-height: 1366px) {
    .component-audio-player {
      background-size: 100% 1366px; } }
  html.platform-desktop .component-audio-player {
    background-size: 100% 100%; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-audio-player {
      --safe-area-inset-top: constant( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-audio-player {
      --safe-area-inset-top: env( safe-area-inset-top );
      padding-top: calc( 44px + var( --safe-area-inset-top )); } }
  @media (min-device-height: 800px) {
    .component-audio-player {
      padding-top: 92px; }
      @supports (padding-top: constant(safe-area-inset-top)) {
        .component-audio-player {
          --safe-area-inset-top: constant( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } }
      @supports (padding-top: env(safe-area-inset-top)) {
        .component-audio-player {
          --safe-area-inset-top: env( safe-area-inset-top );
          padding-top: calc( 92px + var( --safe-area-inset-top )); } } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-audio-player {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-audio-player {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-audio-player > div {
    position: relative;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Tracks */
    /* -------------------------------------------------------------------------------------------- */
    /* Controls */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-audio-player > div > .component-audio-player-tracks {
      position: relative;
      display: block;
      box-sizing: border-box;
      padding: 19px 20px 20px 20px;
      margin: 1px 0px 0px 0px;
      width: 100%;
      height: calc( 100% - 90px);
      /* Scroll */
      /* ---------------------------------------------------------------------------------------- */
      overflow: hidden;
      overflow-y: scroll;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      /* Nav */
      /* ---------------------------------------------------------------------------------------- */
      /* Title */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */
      /* Track */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-audio-player > div > .component-audio-player-tracks > * {
        -webkit-overflow-scrolling: auto; }
      .component-audio-player > div > .component-audio-player-tracks > nav {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: 30px;
        /* Button */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player > div > .component-audio-player-tracks > nav > button {
          position: relative;
          display: inline-block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 50%;
          height: auto;
          border: 1px solid #5B8A97;
          background: none;
          outline: none;
          /* Font */
          /* -------------------------------------------------------------------------------- */
          font-family: "Open Sans", sans-serif;
          color: #5B8A97;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 28px;
          text-align: center;
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* Left */
          /* -------------------------------------------------------------------------------- */
          /* Right */
          /* -------------------------------------------------------------------------------- */
          /* Active */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player > div > .component-audio-player-tracks > nav > button:first-child {
            border-right-width: 0.5px;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px; }
          .component-audio-player > div > .component-audio-player-tracks > nav > button:last-child {
            border-left-width: 0.5px;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px; }
          .component-audio-player > div > .component-audio-player-tracks > nav > button.active {
            background-color: #5B8A97;
            color: white; }
      .component-audio-player > div > .component-audio-player-tracks > h2 {
        position: relative;
        display: inline-block;
        padding: 0px 0px 0px 0px;
        margin: -3px 0px -3px 0px;
        width: 100%;
        height: auto;
        font-family: "Zilla Slab", serif;
        color: #184C51;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 18px;
        text-align: left;
        white-space: nowrap;
        /* Additional */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player > div > .component-audio-player-tracks > h2:not(:first-child) {
          margin-top: 20px;
          padding-top: 17px;
          border-top: 1px solid #D6D6D6; }
      .component-audio-player > div > .component-audio-player-tracks > p {
        position: relative;
        display: inline-block;
        padding: 15px 0px 0px 0px;
        margin: -3px 0px -4px 0px;
        width: 100%;
        height: auto;
        font-family: "Open Sans", sans-serif;
        color: #999999;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 17px;
        text-align: left; }
      .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 15px 15px 15px 15px;
        margin: 20px 0px 0px 0px;
        width: 100%;
        height: auto;
        border-radius: 6px;
        background-color: white;
        border: 1px solid #D6D6D6;
        cursor: pointer;
        /* Fast Touch */
        /* ------------------------------------------------------------------------------------ */
        touch-action: manipulation;
        /* Selected */
        /* ------------------------------------------------------------------------------------ */
        /* Active */
        /* ------------------------------------------------------------------------------------ */
        /* Title */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */
        /* Time */
        /* ------------------------------------------------------------------------------------ */
        /* Additional */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track.selected {
          background: linear-gradient(to right, #F7F1B2 0%, white 100%); }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track:active {
          border-color: #184C51; }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track > h3 {
          position: relative;
          display: block;
          padding: 0px 40px 0px 0px;
          margin: -4px 0px -4px 0px;
          width: auto;
          height: auto;
          font-family: "Open Sans", sans-serif;
          color: #184C51;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 20px;
          text-align: left; }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track > p {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 7px 0px -4px 0px;
          width: auto;
          height: auto;
          font-family: "Open Sans", sans-serif;
          color: #999999;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 16px;
          text-align: left; }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track > time {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: -1px 0px 0px 0px;
          width: auto;
          height: auto;
          top: 16.5px;
          right: 15px;
          font-family: "Open Sans", sans-serif;
          color: #999999;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 12px;
          text-align: right; }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track > p + time {
          top: 15px; }
        .component-audio-player > div > .component-audio-player-tracks > .component-audio-player-track + button {
          margin-top: 10px; }
    .component-audio-player > div > .component-audio-player-controls {
      position: absolute;
      display: block;
      box-sizing: border-box;
      padding: 0px 20px 0px 20px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 90px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color: white;
      /* Shadow */
      /* ---------------------------------------------------------------------------------------- */
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
      /* Controls */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-audio-player > div > .component-audio-player-controls > nav {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 90px;
        /* Title */
        /* ------------------------------------------------------------------------------------ */
        /* Show / Hide Button */
        /* ------------------------------------------------------------------------------------ */
        /* Time */
        /* ------------------------------------------------------------------------------------ */
        /* Button - Play / Pause */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player > div > .component-audio-player-controls > nav > h2 {
          position: absolute;
          display: block;
          box-sizing: border-box;
          padding: 0px 150px 0px 30px;
          margin: 0px 0px 0px 0px;
          width: auto;
          height: auto;
          top: 50%;
          transform: translateY(-50%);
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 20px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 22px;
          /* Breakpoints */
          /* -------------------------------------------------------------------------------- */ }
          @media (max-width: 374px) {
            .component-audio-player > div > .component-audio-player-controls > nav > h2 {
              font-size: 18px;
              line-height: 20px; } }
          @media (max-width: 340px) {
            .component-audio-player > div > .component-audio-player-controls > nav > h2 {
              font-size: 17px;
              line-height: 19px; } }
          @media (max-width: 320px) {
            .component-audio-player > div > .component-audio-player-controls > nav > h2 {
              font-size: 16px;
              line-height: 18px; } }
        .component-audio-player > div > .component-audio-player-controls > nav > .button-show {
          position: absolute;
          display: block;
          padding: 10px 6px 10px 6px;
          margin: 0px 0px 0px 0px;
          width: 30px;
          height: 30px;
          top: 30px;
          left: -7px;
          background-color: transparent;
          border: none;
          cursor: pointer;
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* SVG */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player > div > .component-audio-player-controls > nav > .button-show > svg {
            fill: #184C51;
            width: 18px;
            height: 10px; }
        .component-audio-player > div > .component-audio-player-controls > nav > time {
          position: absolute;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: -6px 0px 0px 0px;
          width: auto;
          height: 12px;
          top: 50%;
          right: 70px;
          font-family: "Open Sans", sans-serif;
          color: #D6D6D6;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 12px;
          text-align: right;
          white-space: nowrap; }
          .component-audio-player > div > .component-audio-player-controls > nav > time > span {
            color: #184C51; }
        .component-audio-player > div > .component-audio-player-controls > nav > .button-play-pause {
          position: absolute;
          display: inline-block;
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          margin: -30px 0px 0px 0px;
          width: 60px;
          height: 60px;
          top: 50%;
          right: 0px;
          border-radius: 50%;
          background-color: white;
          border: 2px solid #D6D6D6;
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 56px;
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* Active */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player > div > .component-audio-player-controls > nav > .button-play-pause:active {
            border-color: #184C51; }

/* Imports */
/* ---------------------------------------------------------------------------------------------------- */
/* Component - Audio Player - Warning */
/* ---------------------------------------------------------------------------------------------------- */
.component-audio-player-warning {
  position: fixed;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 20px 0px;
  margin: 0px 0px 0px 0px;
  width: auto;
  height: 100%;
  top: 0px;
  bottom: auto;
  left: 0px;
  right: 0px;
  z-index: 3;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  /* Background */
  /* ------------------------------------------------------------------------------------------------ */
  background-color: #4C747F;
  /* Loading */
  /* ------------------------------------------------------------------------------------------------ */
  /* Transition */
  /* ------------------------------------------------------------------------------------------------ */
  transition: opacity 0.1s ease-out;
  /* Inner */
  /* ------------------------------------------------------------------------------------------------ */ }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .component-audio-player-warning {
      padding-top: constant(safe-area-inset-top); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .component-audio-player-warning {
      padding-top: env(safe-area-inset-top); } }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-audio-player-warning {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 20px + ( var( --safe-area-inset-bottom ) * 0.5 )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-audio-player-warning {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 20px + ( var( --safe-area-inset-bottom ) * 0.5 )); } }
  .component-audio-player-warning.loading {
    opacity: 0; }
  .component-audio-player-warning > div {
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    padding: 0px 20px 0px 20px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    /* Transition */
    /* -------------------------------------------------------------------------------------------- */
    transition: opacity 0.3s ease-in-out 0.2s;
    /* Logo / Text */
    /* -------------------------------------------------------------------------------------------- */
    /* Close Button */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-audio-player-warning.loading > div {
      opacity: 0; }
    .component-audio-player-warning > div > div {
      position: relative;
      display: block;
      padding: 0px 0px 0px 0px;
      margin: 0px auto 0px auto;
      margin-top: auto;
      /* Icon */
      /* ---------------------------------------------------------------------------------------- */
      /* Title */
      /* ---------------------------------------------------------------------------------------- */
      /* Text */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-audio-player-warning > div > div > i {
        position: relative;
        display: block;
        padding: 0px 0px 0px 0px;
        margin: 0px auto 0px auto;
        width: 114px;
        height: 108px;
        /* SVG */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player-warning > div > div > i > svg {
          width: 114px;
          height: 108px;
          fill: white; }
      .component-audio-player-warning > div > div > h1 {
        position: relative;
        display: block;
        padding: 30px 0px 0px 0px;
        margin: -7px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Zilla Slab", serif;
        color: white;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 28px;
        text-align: center; }
      .component-audio-player-warning > div > div > p {
        position: relative;
        display: block;
        padding: 10px 0px 0px 0px;
        margin: -6px 0px 0px 0px;
        width: auto;
        height: auto;
        font-family: "Zilla Slab", serif;
        color: white;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 20px;
        text-align: center; }
    .component-audio-player-warning > div > .input-button {
      margin-top: auto;
      background-color: #5B8A97;
      border-color: #3E5E66;
      color: white; }
      .component-audio-player-warning > div > .input-button:active {
        background-color: #3E5E66; }

/* Component - Audio Player - Visualiser */
/* ---------------------------------------------------------------------------------------------------- */
.component-audio-player-visualiser {
  position: fixed;
  display: block;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: auto;
  height: 100%;
  top: 0px;
  bottom: auto;
  left: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 2;
  /* Safe Area */
  /* ------------------------------------------------------------------------------------------------ */
  padding-bottom: 49px;
  /* Outer */
  /* ------------------------------------------------------------------------------------------------ */ }
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .component-audio-player-visualiser {
      --safe-area-inset-bottom: constant( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .component-audio-player-visualiser {
      --safe-area-inset-bottom: env( safe-area-inset-bottom );
      padding-bottom: calc( 49px + var( --safe-area-inset-bottom )); } }
  .component-audio-player-visualiser > div {
    position: relative;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Inner */
    /* -------------------------------------------------------------------------------------------- */ }
    .component-audio-player-visualiser > div > div {
      position: absolute;
      display: flex;
      flex-direction: column;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      width: 100%;
      height: 100%;
      left: 0px;
      right: 0px;
      top: 100%;
      bottom: 0px;
      background-color: white;
      background-color: #EEEEEE;
      pointer-events: auto;
      overflow: hidden;
      /* Animation */
      /* ---------------------------------------------------------------------------------------- */
      transition: top 0.3s ease-in-out;
      /* Animation Setup */
      /* ---------------------------------------------------------------------------------------- */
      /* Header */
      /* ---------------------------------------------------------------------------------------- */
      /* Middle */
      /* ---------------------------------------------------------------------------------------- */
      /* Footer */
      /* ---------------------------------------------------------------------------------------- */ }
      .component-audio-player-visualiser.show > div > div {
        top: 0px; }
      .component-audio-player-visualiser > div > div > header {
        position: relative;
        display: block;
        padding: 0px 20px 15px 20px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        background-color: white;
        /* Min Height */
        /* ------------------------------------------------------------------------------------ */
        /* Safe Area */
        /* ------------------------------------------------------------------------------------ */
        /* Close Button */
        /* ------------------------------------------------------------------------------------ */
        /* Inner */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */
        /* Text */
        /* ------------------------------------------------------------------------------------ */ }
        html.page-authenticated-toolkit-binaural-beats .component-audio-player-visualiser > div > div > header {
          min-height: 76px; }
        html.page-authenticated-toolkit-listen-yourself-better .component-audio-player-visualiser > div > div > header {
          min-height: 103px; }
        @supports (padding-top: constant(safe-area-inset-top)) {
          .component-audio-player-visualiser > div > div > header {
            padding-top: constant(safe-area-inset-top); } }
        @supports (padding-top: env(safe-area-inset-top)) {
          .component-audio-player-visualiser > div > div > header {
            padding-top: env(safe-area-inset-top); } }
        .component-audio-player-visualiser > div > div > header > .button-close {
          position: absolute;
          display: block;
          box-sizing: border-box;
          padding: 9px 8px 9px 0px;
          margin: 7px 0px 0px 0px;
          width: 30px;
          height: 30px;
          background-color: transparent;
          border: none;
          z-index: 1;
          /* Fast Touch */
          /* -------------------------------------------------------------------------------- */
          touch-action: manipulation;
          /* SVG */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player-visualiser > div > div > header > .button-close > svg {
            fill: #184C51;
            width: 22px;
            height: 12px; }
        .component-audio-player-visualiser > div > div > header > div {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: 44px;
          /* Text */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player-visualiser > div > div > header > div > h1 {
            position: absolute;
            display: block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 100%;
            height: auto;
            bottom: 0px;
            left: 0px;
            font-family: "Zilla Slab", serif;
            color: #184C51;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 44px;
            text-align: center;
            white-space: nowrap; }
        .component-audio-player-visualiser > div > div > header > h2 {
          position: relative;
          display: block;
          padding: 20px 0px 0px 0px;
          margin: -5px 0px -9px 0px;
          width: auto;
          height: auto;
          font-family: "Zilla Slab", serif;
          color: #184C51;
          font-size: 24px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 26px; }
        .component-audio-player-visualiser > div > div > header > p {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 15px 0px -4px 0px;
          width: auto;
          height: auto;
          font-family: "Open Sans", sans-serif;
          color: #ADADAD;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: normal;
          line-height: 16px; }
      .component-audio-player-visualiser > div > div > section {
        position: relative;
        display: block;
        flex: 1;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: auto;
        overflow: hidden;
        /* Background */
        /* ------------------------------------------------------------------------------------ */
        background: linear-gradient(180deg, #6e7d7d 0%, #c7e8e9 50%, #6e7d7d 100%);
        /* SVG */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player-visualiser > div > div > section > svg {
          position: relative;
          display: block;
          padding: 0px 0px 0px 0px;
          margin: 0px auto 0px auto;
          width: 100%;
          height: 100%;
          /* Paths */
          /* -------------------------------------------------------------------------------- */
          /* Animation - Keyframes */
          /* -------------------------------------------------------------------------------- */
          /* Animation - Path */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(1) > path,
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(2) > path,
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(3) > path {
            fill: #CDDCE0; }
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(4) > path,
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(5) > path,
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(6) > path,
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(7) > path,
          .component-audio-player-visualiser > div > div > section > svg > g:nth-child(8) > path {
            fill: #6E7D7D; }

@keyframes svg-animation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
          .component-audio-player-visualiser > div > div > section > svg path {
            transform-box: fill-box;
            transform-origin: center;
            animation: svg-animation 15s linear infinite;
            animation-play-state: paused;
            /* Playing */
            /* ---------------------------------------------------------------------------- */ }
            .component-audio-player-visualiser.playing > div > div > section > svg path {
              animation-play-state: running; }
      .component-audio-player-visualiser > div > div > footer {
        position: relative;
        display: block;
        padding: 0px 20px 0px 20px;
        margin: 0px 0px 0px 0px;
        width: auto;
        height: 165px;
        background-color: white;
        /* Progress */
        /* ------------------------------------------------------------------------------------ */
        /* Controls */
        /* ------------------------------------------------------------------------------------ */ }
        .component-audio-player-visualiser > div > div > footer > div {
          position: relative;
          display: block;
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          width: 100%;
          height: 30px;
          /* Time */
          /* -------------------------------------------------------------------------------- */
          /* Bar */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player-visualiser > div > div > footer > div > time {
            position: relative;
            display: inline-block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 60px;
            height: 30px;
            font-family: "Open Sans", sans-serif;
            color: #184C51;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 30px;
            text-align: left;
            vertical-align: middle; }
          .component-audio-player-visualiser > div > div > footer > div > time:nth-child(3) {
            text-align: right; }
          .component-audio-player-visualiser > div > div > footer > div > div {
            position: relative;
            display: inline-block;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: calc( 100% - 120px);
            height: 8px;
            overflow: hidden;
            border-radius: 4px;
            vertical-align: middle;
            background-color: #D6D6D6;
            /* Inner */
            /* ---------------------------------------------------------------------------- */ }
            .component-audio-player-visualiser > div > div > footer > div > div > i {
              position: relative;
              display: inline-block;
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: auto;
              height: 8px;
              border-radius: 4px;
              background-color: #184C51; }
        .component-audio-player-visualiser > div > div > footer > nav {
          position: relative;
          display: flex;
          align-items: center;
          flex-direction: row;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0px 0px 0px 0px;
          margin: 5px 0px 0px 0px;
          width: 100%;
          height: 85px;
          /* Button - Skip 15 */
          /* -------------------------------------------------------------------------------- */
          /* Button - Next / Previous */
          /* -------------------------------------------------------------------------------- */
          /* Button - Play / Pause */
          /* -------------------------------------------------------------------------------- */ }
          .component-audio-player-visualiser > div > div > footer > nav > .button-skip-15 {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 36px;
            height: 39px;
            background: none;
            border: none;
            cursor: pointer;
            /* Fast Touch */
            /* ---------------------------------------------------------------------------- */
            touch-action: manipulation;
            /* SVG */
            /* ---------------------------------------------------------------------------- */
            /* Text */
            /* ---------------------------------------------------------------------------- */
            /* Active */
            /* ---------------------------------------------------------------------------- */ }
            .component-audio-player-visualiser > div > div > footer > nav > .button-skip-15 > svg {
              position: relative;
              display: block;
              fill: #D6D6D6; }
            .component-audio-player-visualiser > div > div > footer > nav > .button-skip-15:before {
              position: absolute;
              display: block;
              content: "15";
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 0px 0px;
              width: 36px;
              height: 39px;
              font-family: "Zilla Slab", serif;
              color: #184C51;
              font-size: 15px;
              font-weight: 400;
              letter-spacing: normal;
              line-height: 40px;
              text-align: center; }
            .component-audio-player-visualiser > div > div > footer > nav > .button-skip-15:active > svg {
              fill: #184C51; }
          .component-audio-player-visualiser > div > div > footer > nav .button-next-previous {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 22px;
            height: 22px;
            background: none;
            border: none;
            cursor: pointer;
            /* Fast Touch */
            /* ---------------------------------------------------------------------------- */
            touch-action: manipulation;
            /* SVG */
            /* ---------------------------------------------------------------------------- */
            /* Active */
            /* ---------------------------------------------------------------------------- */ }
            .component-audio-player-visualiser > div > div > footer > nav .button-next-previous > svg {
              position: relative;
              display: block;
              fill: #D6D6D6; }
            .component-audio-player-visualiser > div > div > footer > nav .button-next-previous:active > svg {
              fill: #184C51; }
          .component-audio-player-visualiser > div > div > footer > nav > .button-play-pause {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            width: 85px;
            height: 85px;
            border-radius: 50%;
            background-color: white;
            border: 2px solid #D6D6D6;
            font-family: "Zilla Slab", serif;
            color: #184C51;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 81px;
            /* Fast Touch */
            /* ---------------------------------------------------------------------------- */
            touch-action: manipulation;
            /* Active */
            /* ---------------------------------------------------------------------------- */ }
            .component-audio-player-visualiser > div > div > footer > nav > .button-play-pause:active {
              border-color: #184C51; }

/*# sourceMappingURL=app.css.map */