.atariScroll {
  background: linear-gradient(180deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
  background-size: 1200% 1200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: AtariScroll 59s ease infinite;
  -moz-animation: AtariScroll 59s ease infinite;
  animation: AtariScroll 59s ease infinite; }

@-webkit-keyframes AtariScroll {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 50% 100%; }
  100% {
    background-position: 50% 0%; } }

@-moz-keyframes AtariScroll {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 50% 100%; }
  100% {
    background-position: 50% 0%; } }

@keyframes AtariScroll {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 50% 100%; }
  100% {
    background-position: 50% 0%; } }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  /* -moz-osx-font-smoothing: grayscale; Don't like this trend */
  /* Support for IE. */
  font-feature-settings: 'liga'; }
  .material-icons.md-18 {
    font-size: 1.125rem; }
  .material-icons.md-24 {
    font-size: 1.5rem; }
  .material-icons.md-36 {
    font-size: 2.25rem; }
  .material-icons.md-48 {
    font-size: 3rem; }
  .material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54); }
    .material-icons.md-dark.md-inactive {
      color: rgba(0, 0, 0, 0.26); }
  .material-icons.md-light {
    color: rgba(255, 255, 255, 0.85);
    outline: none;
    border: 0;
    background-color: transparent; }
    .material-icons.md-light.md-inactive {
      color: rgba(255, 255, 255, 0.3); }

i.radio::before {
  visibility: visible;
  content: "radio_button_checked"; }

i.radio.hidden::before {
  visibility: visible;
  content: "radio_button_unchecked"; }

i.checkbox::before {
  visibility: visible;
  content: "check_box"; }

i.checkbox.hidden::before {
  visibility: visible;
  content: "check_box_outline_blank"; }

.secondary {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 0; }

span.green {
  color: var(--green-500);
  opacity: 0.85; }

span.red {
  color: var(--red-500);
  opacity: 0.85; }

/* Hamburger */
.wrapper {
  height: 100%;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  padding: 0;
  z-index: 5; }

.menu {
  font-size: 1rem;
  color: var(--dark-text);
  top: -1rem;
  background-color: white; }

.wrapper .material-design-hamburger .material-design-hamburger__icon i {
  padding: 0.5rem;
  margin-top: 0.25rem;
  cursor: context-menu; }

.header .wrapper .material-design-hamburger.model .material-design-hamburger__icon {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transform: translateZ(0);
  width: 100%; }

.menu div {
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem; }
  .menu div:hover {
    background-color: #eeeeee; }
  .menu div:first-child {
    color: #e53935;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.875rem;
    padding: 0 1rem 0.875rem; }
    .menu div:first-child:hover {
      background-color: inherit; }
  .menu div.spacer {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0; }
    .menu div.spacer:hover {
      background-color: inherit; }
  .menu div i {
    font-size: 1rem;
    line-height: 1.125rem;
    padding-right: 1rem;
    vertical-align: text-top; }

.menu a {
  text-decoration: none;
  color: #3367d6; }
  .menu a:hover {
    text-decoration: underline; }

.menu div:last-child {
  border: 0; }

.menu--off {
  height: 100%;
  position: fixed;
  /*top: 0;*/
  transform: translateZ(0);
  /*position: absolute;*/
  left: -16rem;
  width: 16rem;
  display: block;
  min-height: 37rem;
  /*height: 125%;*/
  margin-top: 1em;
  -webkit-transition: all 300ms;
  transition: all 300ms; }

.menu--on {
  left: 0;
  box-shadow: 0.5rem 0.5rem 1.25rem 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 300ms;
  transition: all 300ms; }

.material-design-hamburger button {
  display: block;
  border: none;
  background: none;
  outline: 0; }

.material-design-hamburger__icon {
  /*padding: 3rem 1rem;*/
  width: 2.5rem;
  cursor: pointer; }

.material-design-hamburger__layer {
  display: block;
  width: 6.25rem;
  height: 0.625rem;
  /*background: #eee;*/
  position: relative;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }
  .material-design-hamburger__layer:before, .material-design-hamburger__layer:after {
    display: block;
    width: inherit;
    height: 0.625rem;
    position: absolute;
    background: inherit;
    left: 0;
    content: '';
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  .material-design-hamburger__layer:before {
    bottom: 200%; }
  .material-design-hamburger__layer:after {
    top: 200%; }

.material-design-hamburger__icon--to-arrow {
  -webkit-animation-name: material-design-hamburger__icon--slide;
  animation-name: material-design-hamburger__icon--slide;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }
  .material-design-hamburger__icon--to-arrow:before {
    -webkit-animation-name: material-design-hamburger__icon--slide-before;
    animation-name: material-design-hamburger__icon--slide-before;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
  .material-design-hamburger__icon--to-arrow:after {
    -webkit-animation-name: material-design-hamburger__icon--slide-after;
    animation-name: material-design-hamburger__icon--slide-after;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.material-design-hamburger__icon--from-arrow {
  -webkit-animation-name: material-design-hamburger__icon--slide-from;
  animation-name: material-design-hamburger__icon--slide-from; }
  .material-design-hamburger__icon--from-arrow:before {
    -webkit-animation-name: material-design-hamburger__icon--slide-before-from;
    animation-name: material-design-hamburger__icon--slide-before-from; }
  .material-design-hamburger__icon--from-arrow:after {
    -webkit-animation-name: material-design-hamburger__icon--slide-after-from;
    animation-name: material-design-hamburger__icon--slide-after-from; }

@-webkit-keyframes material-design-hamburger__icon--slide {
  0% { }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@keyframes material-design-hamburger__icon--slide {
  0% { }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@-webkit-keyframes material-design-hamburger__icon--slide-before {
  0% { }
  100% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 3% 37%;
    width: 75%; } }

@keyframes material-design-hamburger__icon--slide-before {
  0% { }
  100% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 3% 37%;
    width: 75%; } }

@-webkit-keyframes material-design-hamburger__icon--slide-after {
  0% { }
  100% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 3% 37%;
    width: 75%; } }

@keyframes material-design-hamburger__icon--slide-after {
  0% { }
  100% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 3% 37%;
    width: 75%; } }

@-webkit-keyframes material-design-hamburger__icon--slide-from {
  0% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg); }
  100% { } }

@keyframes material-design-hamburger__icon--slide-from {
  0% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg); }
  100% { } }

@-webkit-keyframes material-design-hamburger__icon--slide-before-from {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 3% 37%;
    width: 75%; }
  100% { } }

@keyframes material-design-hamburger__icon--slide-before-from {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 3% 37%;
    width: 75%; }
  100% { } }

@-webkit-keyframes material-design-hamburger__icon--slide-after-from {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 3% 37%;
    width: 75%; }
  100% { } }

@keyframes material-design-hamburger__icon--slide-after-from {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 3% 37%;
    width: 75%; }
  100% { } }

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

:root {
  --light-text: rgba(255, 255, 255, 0.85);
  --dark-text: rgba(0, 0, 0, 0.85);
  --blue-500: #2196F3;
  --purple-500: #9C27B0;
  --yellow-500: #FFEB3B;
  --orange-500: #FF9800;
  --red-500: #F44336;
  --green-500: #4CAF50;
  --black: black; }

.blue {
  background-color: var(--blue-500); }

.purple {
  background-color: var(--purple-500); }

.red {
  background-color: var(--red-500); }

.orange {
  background-color: var(--orange-500); }

*[data-click] {
  cursor: pointer; }

body {
  /* Browsers have default 8px margins _or_ padding! */
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-family: "Roboto", "Arial Nue", "Arial", "Verdana", "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 300;
  color: var(--dark-text);
  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
  -webkit-user-select: text;
  /* prevent copy paste, to allow, change "none" to "text" */
  background-color: var(--background-color);
  height: 100%;
  width: 100%; }

/* HTML5 blocks - needed in older browsers */
article, aside, figcaption, figure, footer, header, nav, section, main, input, button, select {
  display: block;
  position: relative; }

/* PARAGRAPHS */
h1, h2, h3, h4 {
  margin: 1rem 0 .5rem;
  /* Titles should be close to the text they describe */
  line-height: 1.25;
  /* Bigger text is often nicer with smaller line height */
  font-weight: 300;
  /* Browser default. Use `normal` for less bulky titles */ }

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 0.8rem;
  font-weight: 400; }

h4 {
  font-size: 1rem; }

ul, ol {
  margin: 1rem 0;
  /* Default for all browsers except IE */
  padding-left: 1.25rem;
  /* IE has a 40px margin-left instead */ }

p {
  margin: 1rem 0; }

blockquote {
  margin: 1rem 2.5rem;
  /* Same for all browsers - Customize or remove */ }

figure {
  margin: 2rem 0;
  /* Default in HTML5 spec: `1em 40px` */ }

/* LINKS */
/* Default browser styles (from Firefox, similar in most browsers) */
a {
  text-decoration: underline;
  color: var(--secondary-color); }
  a:visited {
    color: var(--secondary-color-dark); }
  a:hover, a:focus {
    /* ... */ }
  a:active, a:hover {
    outline: none; }
  a img {
    border: none; }

/* MISC TEXT-LEVEL ELEMENTS */
/* Make quotations and references more visible */
q, cite {
  font-style: italic; }

/* Remove automatic quotation marks for inline quotations
(`q {quotes:none}` not implemented in WebKit) */
q:before, q:after {
  content: ""; }

/* Stopping superscript and subscript from adding to the line's leading */
sup, sub {
  line-height: 0; }

/* FORMS */
fieldset {
  margin: 0;
  /* Common default is `0 2px` */
  padding: 0;
  /* Common default (roughly): `.35em .625em .75em` */
  border: none; }

input, button, select {
  vertical-align: middle;
  /* Helps keep form elements roughly aligned */ }

h1 {
  font-weight: 400;
  margin: 0;
  padding: 0.65rem 1rem  0.25rem; }

h2 {
  font-weight: 400;
  margin: 0;
  padding: 0 1rem 1rem 1rem; }

h3 {
  color: var(--dark-text);
  font-weight: 300;
  margin: 0.3em 0  0.25rem; }

input, textarea, code {
  display: block;
  margin: 0 0.65rem 2 0.25rem 0;
  font-size: 0.65rem;
  font-weight: 300;
  border: none;
  border-bottom: 1px solid var(--secondary-color);
  color: var(--dark-text);
  padding-bottom: 1px; }

textarea, code {
  font-family: 'Roboto Mono', monospace;
  width: 100%;
  height: 15.5rem;
  font-weight: 400;
  display: inline-block;
  resize: none; }

textarea:focus, input:focus, code:focus {
  border-bottom: 0.125rem solid var(--secondary-color-dark);
  padding-bottom: 0;
  outline: none; }

textarea {
  background-color: transparent; }
  textarea.short {
    height: 6.25rem; }
  textarea:invalid, textarea.bad {
    border-bottom: 0.125rem solid var(--red-500);
    padding-bottom: 0;
    outline: none;
    box-shadow: none; }

code.bad, input:invalid {
  border-bottom: 0.125rem solid var(--red-500);
  padding-bottom: 0;
  outline: none;
  box-shadow: none; }

input.full, textarea.full {
  width: 100%; }

input[type="text"], input[type="password"], input[type="email"] {
  background-color: transparent;
  width: 9.5rem; }

input[type="checkbox"] {
  margin: 0; }

textarea, code {
  border-bottom: 1px solid var(--secondary-color);
  color: var(--dark-text); }

input:focus, textarea:focus, code:focus {
  border-bottom: 2px solid var(--secondary-color-dark);
  color: var(--dark-text); }

label {
  display: block;
  position: relative;
  font-size: 0.75rem;
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
  margin: 0.5rem 0 0.5rem 0; }

progress {
  margin-left: auto;
  margin-right: auto; }

.underline {
  text-decoration: underline;
  font-style: normal; }

strong {
  color: black;
  font-weight: normal; }

.controlPanel {
  margin-bottom: 0.65rem;
  margin-top: 0.65rem;
  padding-bottom: 0.65rem;
  padding-top: 0.65rem;
  color: var(--dark-text); }

button {
  font-family: "Libre Franklin", "Helvetica Neue", "Roboto", sans-serif;
  vertical-align: middle;
  transition: background-color 0.2s, color 0.2s;
  background-color: white;
  border: 1px solid #cfd8dc;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 0.25rem rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
  font-weight: 400;
  height: 2.25rem;
  line-height: 0.5rem;
  margin-left: 0.65rem;
  margin-right: 0;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden; }
  button i.material-icons {
    font-size: 1rem;
    line-height: 1rem;
    display: inline;
    vertical-align: top; }
  button:hover {
    border-color: var(--secondary-color-dark);
    background-color: var(--secondary-color);
    color: var(--primary-color-dark); }
  button:active {
    background-color: #cfd8dc; }
  button.blue {
    background-color: #2196f3; }
  button.primary {
    border: 1px solid transparent;
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.85); }
    button.primary:hover {
      background-color: #1e88e5; }
    button.primary:active {
      background-color: #1976d2; }
  button.red {
    color: rgba(255, 255, 255, 0.85);
    background-color: #f44336; }
    button.red:hover {
      background-color: #e53935; }
    button.red:active {
      background-color: #d32f2f; }
  button.green {
    color: var(--dark-text);
    background-color: #4caf50; }
    button.green:hover {
      background-color: #43a047; }
    button.green:active {
      background-color: #388e3c; }
  button.yellow {
    color: var(--dark-text);
    background-color: #ffeb3b; }
    button.yellow:hover {
      background-color: #fdd835; }
    button.yellow:active {
      background-color: #fbc02d; }
  button.round {
    border-radius: 1.125rem;
    border: 0;
    box-shadow: 1px 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
    font-size: 2.25rem;
    height: 2.25rem;
    line-height: 1.25rem;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    text-align: center;
    vertical-align: text-top;
    width: 2.25rem; }
    button.round.hover {
      position: fixed; }
    button.round.bottom {
      bottom: 2rem; }
    button.round.right {
      right: 2rem; }

.tools {
  display: block;
  position: relative;
  min-width: 1.5rem; }
  .tools:hover ul {
    display: block;
    opacity: 1;
    z-index: 1;
    transition: z-index 0.5s step-start, opacity 1s ease; }
  .tools:hover > i:nth-child(1)::after {
    background-color: rgba(0, 0, 0, 0.2);
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem; }
  .tools i {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer; }
  .tools ul {
    list-style: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: z-index 0.5s step-end, opacity 1s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    background-color: white;
    color: var(--dark-text);
    margin: 1.85rem 0 0 0;
    min-width: 10rem; }
    .tools ul li {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.125rem; }
      .tools ul li i {
        cursor: pointer;
        height: 0.875rem;
        line-height: 0.75rem;
        padding-right: 0.5rem;
        width: 1.125rem;
        vertical-align: middle; }
      .tools ul li.spacer {
        width: 1px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        margin-left: 0.6rem;
        margin-right: 0.6rem;
        height: 1.25rem; }

button::before, .tools i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  padding-top: 0;
  border-radius: 100%;
  background-color: rgba(236, 240, 241, 0.3);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

button:active::before, .tools i:active::before {
  width: 120%;
  padding-top: 120%;
  transition: width .2s ease-out, padding-top .2s ease-out; }

p.center, h1.center, h2.center, h3.center, h4.center {
  text-align: center; }

div.center, ul.center, ol.center {
  margin-left: auto;
  margin-right: auto; }

.fixed {
  display: block;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%; }

/* application header - top bar */
.header {
  background-color: #3b78e7;
  border: 0 none;
  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.14), 0 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.2), 0 1px 0.5rem 0 rgba(0, 0, 0, 0.12);
  height: 3rem;
  left: 0;
  margin: 0 0 0.5rem 0;
  padding: 0;
  position: relative;
  right: 0;
  top: 0;
  transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  width: 100%;
  z-index: 3;
  transition: background-color 1s;
  overflow: unset; }
  .header footer {
    background-color: white;
    bottom: 1rem;
    box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.14), 0 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.2), 0 1px 0.5rem 0 rgba(0, 0, 0, 0.12);
    color: #4caf50;
    display: block;
    font-size: 1rem;
    font-weight: 300;
    height: 2.25rem;
    left: 25%;
    line-height: 2.25rem;
    position: absolute;
    right: auto;
    text-align: center;
    width: 50%;
    z-index: 2;
    opacity: 0;
    transition: bottom 1s, opacity 0.25s; }
    .header footer.show {
      bottom: -1.75rem;
      opacity: 0.75; }
    .header footer.showError {
      background-color: #d50000;
      color: rgba(255, 255, 255, 0.85);
      bottom: -1.75rem;
      opacity: 0.75; }
  .header.green {
    background-color: #4caf50; }
  .header.red {
    background-color: #d50000; }
  .header figure {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem 0.5rem 0 0;
    opacity: 0.85; }
    .header figure.logo {
      opacity: 0.85;
      cursor: pointer; }
      .header figure.logo.jenson {
        background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAACqCAQAAACXfxwJAAAKTklEQVR42u1du3bjRhK9jWgms1P/g0hFUk+k3Uh0tv6CPWcTZ7szkejI4CTmmUQz52yw8f7AOlpzkvVMBGgSk6P/sEM5MWoDSuJDBFHVXd1ogCyGgoDGRT1uVXdXA0c5KDGOf0t64PHHQgAAixEA4A7T2mvHeA4AmKHc+N8jqGtiMdoLYpOM8fwR4IMH1WKES1i1+5V4nw648WWKAhTsV3hofYfhrAJCSvf37z20Jhqcu6E1fQQ1jwznNrR5v+C00fWzXmdtfwBN6ddxYNMDtNPAGgDzRAF9+M27FLxMy0FJGrw6AeywA4CuAzs8Gn0nHEGmeK8BCIMOBlT1cet9oXnqhtQgC5ympKkG5yg7qaOb+lriXEfJjMIdTrDoTfY3xK1/udsf1Bzfh4h5tFZwfSqrkql6yX/iXyXwBXWBEz2/vARINgmwKvkrwUu49Y0OxgsBVUin+M2r/DnGlxjrwdrCrJfBQI/kT6kgoop8pSKigqY6ScEgdq61hDQhOINAGxVWFUitAM7KGVrbCqzG4T+8KZTFNbP2RjAo8RHjRxawnHol9sBLvPKZXFWhWMG1dKmhPKk34inlovvYhJ2AJ6QSQImGjPtdxQA2OKyOAzN0LgC0IqIhGeZ9S7bPLeicddcnv8BFB0cSlQvDTC66e7g73xOsRWKQynRpKaXwCVciVlDK9TUQrAa5m5bmDnTIitluFdQSQKiQa3tWpwBlCLRw4pjyZ8lZ7OJ+hCECFq+eeiZXf4MTkFNpYBwhkXEa3QJnmmMo5Vo6cE4zbQRNfZCBTFsVl2jO5d4098jdERFUoXetMNexk6H8FRfOJZKK5g6QvqM/PMovC9nThs0+wzDoftS69akTe/Hh5+KqtPENVHPpeH3r1t9En5YSVoio2QVkDaY/lAbIk1bW0Sy8dFUEKwOVzO+bpAEpcOr5XKG2NthvtjeHIsmw8tYgXbI+fyfATprIPb+KxEu3K0lxSjbevNVJUwUhSnM9hetq3GcqFTq2AyMXxmpjke+nvDF3q3mqjYD9RPH3L+KQfb2cytBQ6aOyk4EimJ4aytWnmBeOfjW6rdhAenpO+lI5ztrrybmXrmY79VTwBd4FyXF+R7vyjmvRlgvqtYSbngV4JcIzpwRAT864RPSaWxxgc5PzIHvA3Zbd/aIK6lINbxzLK5lPHvU2iOm9dlrJeKo+jrc8Ddih0sZdT62UU2hV1tSLf3XygmeJpklTp/zRXQcx/UlCu8WueUNuXFRb8JfwhBE34q/NlUXzZUWT6rL1NNSe2XSMf1n7euEw6MzN+G0gSMeJbRVlvecTB7AJ6gX3na4DvcRHJ50zOmv9Xd/U4GIfqLZdPS0deS/dd/5qTVdtPahs49fS0/XHVQBeOt/pp3Y5wJYDyFyM36oAeoM3MI+/f8Lgk/PdPgXcGGsdHMD6ewZaY6dZ3qunVZb+G4RWMWtmOzWVrX4XChFaX7MIJb4KRPIuhAq9AnWkaA6NMgvy+t+25wA28FuBesl7wNSbaBNu8CHIy3+CgeFm7KIRM7Z3Xnp41MLbR82VvenuCWvdtLVwmrS24acsKiK68t2DF3kdgKgmYbfNfxTa+AkGBm+itTadqIZClgMYbYJqcMeLg785R/6lv4u325twC6uWvrLe/G77kqDGX1FJf2qlPZLLhiMPB7BVtCLu949Z0NPTWlJpFsO9RNTtx42hfoBtFdRlGhyJra6Byrx+5ATpBDet9osnGJVpwREb94yPFjOabdH8SSCiLxvHwnOt9c44VIt7JhnaVGx4NgFIl/JXbxfAp5MZDkRibtDInOyaKSmdYTCL8ZB7D2FCEqpJUi3L/ed/uaRKYP7SIbktMwsn76ORKgGoI/F3HaNfMtIH9ShoH9RxP0/WaBfU5ymdu9UXUI/mf5QjqEdQj6Ae5QiqQJ6lCOqs05Bq5HczAajM55WBhhBHNDhzIwLjVUEl0JrZsoe6yst3AvrUYWJpasj11tEC1fzA09RZIuaTtDAKRLN1UMu0zCdNYRSISgfz7zqp8puKmwmeJGIcEi9JeJOYwyDPj8K9JAvnLtvvLxE5Jow3QWW6y26HKr+YwAhTj043kzgMwpcHSpNYbz576igCeNUXiWVVPoe8GcElmTSrlMBU9kZTS9ElK1CZaw0+HqADIHxsvuj9LlCZNIw/8Uz65w14imuTRVaAnu12FcwnStYkmeR0zs34X4heNZO7wNQdwIXyp2QZ/wZ2mRyt1FeefFD+6Azj34u7+lbK+Jt8pvRH7VZyt65A8i2UmQsHepWwnv6OrHYrOSF3OLLvldD4t0FlOoBSoa12KLnE/r4n0vkIxrs2Ol3lVl/1d/hXIPNfylVtW9mM/q7f7gv7NFWQV/EurNeYXwNo66r7Y/1Okgp/09XTHZhlrnyJ51fr1x5/F6DzKuH7x00M9duTftT1pzuMP3PlSzxdne2hKV8HDFc6tVzWO+5gXE/7p040dbWs/bxdmO9i6emkudWnIGEvE6tCmY22CZe1V93p6mneHKhEFbuXXiDcqaeTc0aI5G8GfQkPU9wRspX6ll7t6ZefB8i3/seicwWr7QOz179gc5mgz3/peH5eCFA5DJN3dE6p3udflIf+IyGv+jODzhFuGbGY+VbCfL3QcAHF3sJHaE3NHXvBsE1f3OdcdMpP/YE0+yHQ7lFVbHn0+jN8C43WjrX+NKuNaoJWDq6LJv+ibP6b02xT/FL7CvWJo+H1syIs3Bilwrlp+3TxbYSuaXIHwD47bY/sO+Nvwl8LUHcwxygYy+V6MZkMefVWr+MIvHvtl1Gr/j8IQqXnmW3O1WKDgewku10n5MVdpWLvbWOEs/uRmFp6Y5nWtkNO8dlnIkx4uPdTHtBOO7qHpKT+bOvcNeZXfif8Lr+J8fFJP7fWQmkmiOUiLWV0Dsv8b7EP1j8HOhGgSb5Zq0VZTUhZapY1PlHcfGwT1lEroP5n7c13L66YuUCq04rtMRVwZIw/0Q8t+dTmYxCbk9knv5LrITgiPnfO4AT/xo+Y4YtWtl98/Rj9AeDDTs9OfF668iQ3emM0GMjbwSLxn+jkaQJhoD0BbJDLyFXqPyP78JVkXagE+0WrZ823KUKCIAPpMGEVnzlqxA84RBGilAlvPjxASMXlYiP+ZidYHBik4tWXxsEUDglWB0jdFooeDqxOkLquvj0MWB0hdW338UAy+soFyAdS9x4qhFsY98cmz0u93s2XyvcvHRBTfT1NXfmd1z3T09f+XFzj8Js+Ba2hhkvLVMzFtnzmjI7Z38DqRAk9fzjveAq7UDkKKIDpUCdrrhVIVyE029J9hsHnDupoB8bdJX1V19FQYgDkHQC2AiEHusOyDZZNKVP+zbsE6EqsZENG1F/R0sKZ3gLbcUA3ga0S8KE9AXQlbQavh6DUOzEAptF1dqmf024GJYnEgXYF5wHJNGgIaxXOto3CYoRLxfBR4j1mbe+ZT8XTWIxw56FdYzxvH8zUQF2OhR4BBrAX5PF9a4sHIM3BHiqg+MHNEZ6jHMVX/g+pssWbcPWD1gAAAABJRU5ErkJggg==") no-repeat scroll center center/100% 100%; }
  .header h1, .header h2 {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);
    line-height: 3rem;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute; }
  .header h1 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-left: 3rem;
    left: 0; }
  .header h2 {
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    width: 100%; }
  .header nav.menu {
    display: block;
    position: absolute;
    left: 0.65rem;
    top: 0.75rem;
    z-index: 3;
    background: rgba(0, 0, 0, 0);
    cursor: context-menu; }
    .header nav.menu ul {
      display: block;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0.125rem 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
      background-color: white;
      z-index: 4;
      margin: 0.25rem 1rem 0 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      max-height: 1px;
      transition: max-height 0.3s ease-out, visibility 0s linear 0.5s,opacity 0.5s linear; }

.panel .menu {
  display: block;
  position: absolute;
  left: 0.65rem;
  top: 0.75rem;
  z-index: 3;
  background: rgba(0, 0, 0, 0);
  cursor: context-menu; }
  .panel .menu ul {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0.125rem 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
    background-color: white;
    z-index: 4;
    margin: 0.25rem 1rem 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    max-height: 1px;
    transition: max-height 0.3s ease-out, visibility 0s linear 0.5s,opacity 0.5s linear;
    margin: 0.25rem 0 0 1rem; }

.header .menu:hover ul, .panel .menu:hover ul {
  display: block;
  visibility: visible;
  opacity: 1.0;
  transition-delay: 0s;
  max-height: 31rem; }

.header .menu li, .panel .menu li {
  border-bottom: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.125rem;
  margin-right: 0;
  padding: 0.5rem 1rem;
  vertical-align: text-bottom;
  width: 100%; }

.header .menu li.spacer, .panel .menu li.spacer {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  height: 1px;
  margin-bottom: 0.25rem;
  padding: 0 1rem 0.25rem 0; }

.header .menu li.spacer:hover, .panel .menu li.spacer:hover {
  background-color: inherit; }

.header .menu li i, .panel .menu li i {
  font-size: 0.875rem;
  line-height: 1.125rem;
  padding-right: 1rem;
  vertical-align: text-bottom; }

.header .menu li:hover, .panel .menu li:hover {
  background-color: #eeeeee; }

.sideNav {
  display: block;
  position: relative;
  width: 12.5rem;
  height: 100%;
  margin-right: 1rem;
  border-right: 1px solid #eeeeee;
  margin-bottom: 0;
  padding: 1rem 0; }
  .sideNav header {
    margin-left: 1rem; }
  .sideNav ul {
    list-style: outside none none;
    margin: 0;
    padding: 0; }
    .sideNav ul li {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.125rem;
      margin-right: 0;
      padding: 0.5rem 1rem;
      vertical-align: text-bottom; }
      .sideNav ul li:hover {
        background-color: #eeeeee; }
      .sideNav ul li.current {
        background-color: #bbdefb;
        color: #3b78e7; }
        .sideNav ul li.current i {
          color: #3b78e7; }
      .sideNav ul li i {
        font-size: 0.875rem;
        line-height: 1.125rem;
        padding-right: 1rem;
        vertical-align: text-bottom; }

.editList dl {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 300; }
  .editList dl dt {
    float: left;
    clear: left;
    min-width: 6.25rem;
    text-align: right; }
  .editList dl dd {
    margin: 0 0 0 11rem;
    padding: 0 0 0.5em 0; }

.inlineButton {
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.25rem;
  padding-right: 0.25rem; }
  .inlineButton i {
    font-size: 1em;
    line-height: 1em; }
  .inlineButton.large {
    display: inline-block;
    width: 1.5em;
    height: 1.5em; }
    .inlineButton.large i {
      font-size: 1.5em;
      line-height: 1.5em; }

.flexContainer {
  display: flex;
  /* establish flex container */
  flex-direction: row;
  /* default value; can be omitted */
  flex-wrap: nowrap;
  /* default value; can be omitted */
  justify-content: space-between;
  /* switched from default (flex-start, see below) */
  flex-grow: 1;
  align-items: flex-start;
  margin: 0.5rem 0 !important; }
  .flexContainer > p, .flexContainer > div {
    margin: 0 !important; }

.panel {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  display: block;
  position: relative;
  margin: 1rem;
  padding: 1rem;
  z-index: auto; }
  .panel button.bottom {
    position: absolute;
    left: 45%;
    bottom: 0.5rem;
    background-color: #e91e63;
    z-index: 2;
    transition: background-color 0.3s; }
  .panel button.hugTop {
    position: absolute;
    top: 0.5rem;
    left: 45%;
    background-color: #e91e63;
    z-index: 2;
    transition: background-color 0.3s; }
  .panel textarea {
    margin: 0; }
  .panel div {
    margin: 0 0 0.5rem; }
  .panel h1 {
    color: #43a047;
    font-size: 1rem;
    line-height: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    vertical-align: text-bottom; }
    .panel h1 i {
      font-size: 1.5rem;
      line-height: 1.25rem;
      padding-right: 0.5rem;
      vertical-align: text-bottom; }
  .panel h2 {
    font-size: 1rem;
    line-height: 0.875rem;
    padding-right: 0.5rem;
    vertical-align: text-bottom; }
  .panel ul {
    list-style: none;
    max-width: 31.25rem; }
    .panel ul li {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.125rem;
      margin-right: 0;
      padding: 0.5rem 1rem;
      vertical-align: text-bottom;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      text-overflow: clip ellipsis;
      word-wrap: break-word;
      white-space: nowrap;
      overflow: hidden; }
  .panel.half {
    width: 44%; }
  .panel.stack {
    display: inline-block;
    position: relative;
    vertical-align: text-top; }

/* specific panels */
.avatar {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  display: block;
  font-size: 1em;
  height: 3rem;
  line-height: 3rem;
  margin: 1 0.25rem !important;
  position: relative;
  text-align: center;
  width: 3rem; }
  .avatar.large {
    width: 6rem;
    height: 6rem;
    font-size: 2em;
    line-height: 6rem;
    flex: 0 0 6rem; }

.avatarTitle {
  margin-top: 1.25rem; }
  .avatarTitle.large {
    margin-top: 5 0.25rem; }

.circle {
  border-radius: 2 0.25rem; }
  .circle.large {
    border-radius: 3rem; }

.float.left {
  float: left; }

.float.right {
  float: right; }

.vcenter {
  vertical-align: middle; }

.box {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem; }

.main h1 {
  color: rgba(0, 0, 0, 0.1);
  font-size: 4rem;
  font-weight: 100;
  margin-top: 23%;
  text-align: center; }

.card {
  display: block;
  border: 1px solid #cfd8dc;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 0.25rem rgba(0, 0, 0, 0.2);
  background-color: #FAFAFA; }

.blue {
  background-color: var(--blue-500); }

.purple {
  background-color: var(--purple-500); }

.red {
  background-color: var(--red-500); }

.orange {
  background-color: var(--orange-500); }

/* TABLES */
table {
  border-collapse: collapse;
  /* Merges cell borders together */
  /* Browser default: border-collapse: separate; border-spacing: 2px; */
  border: 1px solid var(--dark-text);
  width: 100%; }
  table td, table th {
    border: 1px solid var(--dark-text);
    color: var(--dark-text);
    max-width: 18.75rem;
    overflow: auto;
    padding: 0.25rem;
    height: 1.5rem;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
    font-size: 1em; }
  table.material {
    border-collapse: collapse;
    /* Merges cell borders together */
    /* Browser default: border-collapse: separate; border-spacing: 2px; */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    width: 100%;
    background-color: white;
    color: var(--dark-text);
    position: relative; }
    table.material ul.errors {
      color: #f44336; }
    table.material caption {
      color: var(--dark-text);
      font-size: 1.25em;
      font-weight: 400;
      left: 1rem;
      position: absolute;
      text-align: left;
      top: 0.5rem; }
    table.material td.number, table.material th.integer, table.material td.integer {
      text-align: right; }
    table.material td {
      border: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 0.85em;
      max-width: 18.75rem;
      overflow: auto;
      padding: 0.5rem 1rem;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: left;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: normal;
      word-wrap: break-word; }
      table.material td input {
        color: var(--dark-text); }
    table.material th {
      max-width: 18.75rem;
      overflow: auto;
      padding: 0.5rem 1rem;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: left;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: normal;
      word-wrap: break-word;
      border: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 0.7em;
      color: rgba(0, 0, 0, 0.6);
      padding-top: 5em; }
      table.material th:first-child {
        empty-cells: hide;
        /* Hide empty cells when they're the first in the row */ }
      table.material th[data-name="lineNumber"] {
        width: 1.5rem;
        text-overflow: ellipsis;
        text-align: right; }
      table.material th.sorted {
        background-color: #eeeeee; }
        table.material th.sorted::before {
          content: "\21f5\00a0"; }
    table.material td select {
      margin: 0;
      width: 100%;
      border: 0;
      height: 100%;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZBJREFUeJzt0jtOw0AYhdG7AVgQj57XhlkBm6GDAiooIguEQrCxnZnfOUea2jO+XwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAHnbW+wAK28IYmrpM8J7lpfZEZHrJ7w0Xri1RzneQ1yUeSt9SM4CHJe3ZveIkIRrvK1/jDqRbB9/GHI4IR9o1fLYJ944tghKvsftC+H1clgkPji+CAy/w9/nDek9y2ueZBY8YXwR5Txu81ginji+CHx0z7cb1F8J/xh/PY4L7dOU/ylJoRzBn/Kbu3k5oRGH9hlSIw/koqRGD8lc2N4G7Fuxn/SHqMwPhH1lMExm+khwiM31jLCIzfiRYRGL8zcyO4n/At43fqGBEYv3NrRmD8ItaIwPjFLBmB8YtaIgLjFzc3AuNvwJwIjL8Rx4rA+B1bOwLjF7BWBMYvZOkIjF/QUhEYv7C5ERh/A/4bgfE3ZGoExt+gsREYf8P+isD4J+C3CIx/Qn5GYPwTNERg/BN2HuMDAAAAAAAAAAAAAAAAAAAAAAAAAAAADX0C1EVRxOOijgAAAAAASUVORK5CYII=") no-repeat scroll 100% center/10% auto; }
    table.material td input {
      width: 100%;
      border: 0 none;
      height: 100%;
      display: inline-block;
      position: relative;
      background-color: transparent;
      margin: 0; }
      table.material td input:invalid {
        /*background-color: #ffebee;*/
        border: 0;
        border-bottom: 1px dashed #b71c1c;
        /*color: #b71c1c;*/
        box-shadow: none; }
    table.material td:hover {
      background-color: #fafafa; }
    table.material td.label {
      color: black;
      font-size: 1em;
      font-weight: 400; }
    table.material td:first-child {
      empty-cells: hide;
      /* Hide empty cells when they're the first in the row */ }
    table.material td.select {
      width: 1rem; }
      table.material td.select input[type=checkbox] {
        width: 1rem; }
    table.material td.sorted {
      background-color: #F5F5F5; }

/*
table.material td input:focus {
    background-color: rgba(255,255,204,0.85);
}
*/
/* pagfination styles */
div.paginationControl.material {
  display: block;
  font-size: 0.8rem;
  margin: 0.25rem 0 0.25rem 0; }
  div.paginationControl.material > span {
    display: inline-block;
    padding: 0.25rem;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    background-color: #e0e0e0;
    width: 6rem; }
    div.paginationControl.material > span.first, div.paginationControl.material > span.previous {
      text-align: left; }
    div.paginationControl.material > span.current {
      text-align: center; }
    div.paginationControl.material > span.last, div.paginationControl.material > span.next {
      text-align: right; }

dialog {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.3), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.22);
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 1rem;
  z-index: auto;
  border: none; }
  dialog.alert {
    height: 6rem;
    margin-left: -11.5rem;
    margin-top: -8.75rem;
    width: 23rem; }
  dialog.form {
    height: 10.5rem;
    margin-left: -11.5rem;
    margin-top: -8.75rem;
    width: 23rem; }
  dialog.bigForm {
    height: 18.75rem;
    margin-left: -11.5rem;
    margin-top: -8.75rem;
    width: 23rem; }
  dialog button {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    display: block;
    float: right;
    margin: 0;
    padding: 0.5rem;
    color: var(--primary-color); }
    dialog button:hover, dialog button:active {
      background-color: transparent;
      color: var(--primary-color-dark);
      border: 0 none; }
  dialog div.buttonGroup {
    bottom: 0.5rem;
    display: block;
    position: absolute;
    right: 1rem;
    text-align: right;
    width: 100%; }
  dialog h1 {
    color: var(--dark-text);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    margin-left: 0;
    padding: 0; }
  dialog h2, dialog label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dark-text);
    margin-left: 0;
    padding: 0; }
  dialog input {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0.5rem; }
    dialog input[type="text"], dialog input[type="file"] {
      width: 99%; }
    dialog input[type="checkbox"] {
      display: block;
      float: left; }
  dialog .group {
    line-height: 1em; }
    dialog .group label {
      display: inline-block; }
  dialog.embedded {
    box-shadow: 0 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
    display: block;
    position: relative;
    top: auto;
    left: 50%;
    margin-top: auto;
    margin-left: -11.5rem; }

.blur {
  display: block;
  position: fixed;
  z-index: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); }

.splash {
  position: absolute;
  left: calc(50% - 11.25rem);
  top: calc(50% - 10rem);
  width: 21.5rem;
  height: 20rem;
  text-align: center;
  transition: opacity 3s ease;
  background-color: white;
  border: 1px solid #cfd8dc;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 0.25rem rgba(0, 0, 0, 0.2);
  z-index: 2;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }
  .splash figure.logo_large {
    width: 8.75rem;
    height: 8.75rem;
    margin: 0;
    margin-left: auto;
    margin-right: auto; }
  .splash h1 {
    font-weight: 700;
    color: var(--secondary-color-dark); }

.fade {
  opacity: 0; }

.notify {
  background-color: black;
  border-radius: 0.5rem;
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.3), 0 1 0.25rem 0.75rem rgba(0, 0, 0, 0.22);
  display: block;
  position: fixed;
  top: 4rem;
  right: 0;
  padding: 1rem;
  z-index: auto;
  border: none;
  width: 16rem;
  height: 3rem;
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.85;
  text-align: center;
  transition: opacity 1.5s, transform 1.5s; }

.slide {
  transform: translateX(19rem);
  opacity: 0; }

.fade {
  opacity: 0; }

.content {
  margin: auto 0.5rem; }

/* router transitions */
.main {
  transition: opacity 1s ease; }

.transition-in {
  opacity: 1.0; }

.transition-out {
  opacity: 0; }

/* notify */
.slide {
  transform: translateX(18.75rem);
  opacity: 0; }

.hide {
  display: none;
  visibility: hidden; }

/* Progress Bar */
.progress {
  position: relative;
  height: 0.125rem;
  display: block;
  width: 100%;
  background-color: var(--secondary-color-dark);
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin: 0;
  overflow: hidden; }
  .progress .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: var(--secondary-color);
    transition: width .3s linear; }
  .progress .indeterminate {
    background-color: var(--secondary-color); }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
      animation-delay: 1.15s; }

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

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

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

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

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(MaterialIcons-Regular.woff2) format("woff2"), url(MaterialIcons-Regular.woff) format("woff"), url(MaterialIcons-Regular.ttf) format("truetype"); }

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

/* roboto-100normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src: local("Roboto Thin "), local("Roboto-Thin"), url(roboto-latin-100.woff2) format("woff2"), url(roboto-latin-100.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-100italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 100;
  src: local("Roboto Thin italic"), local("Roboto-Thinitalic"), url(roboto-latin-100italic.woff2) format("woff2"), url(roboto-latin-100italic.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-300normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: local("Roboto Light "), local("Roboto-Light"), url(roboto-latin-300.woff2) format("woff2"), url(roboto-latin-300.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src: local("Roboto Light italic"), local("Roboto-Lightitalic"), url(roboto-latin-300italic.woff2) format("woff2"), url(roboto-latin-300italic.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-400normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local("Roboto Regular "), local("Roboto-Regular"), url(roboto-latin-400.woff2) format("woff2"), url(roboto-latin-400.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-400italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: local("Roboto Regular italic"), local("Roboto-Regularitalic"), url(roboto-latin-400italic.woff2) format("woff2"), url(roboto-latin-400italic.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-500normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: local("Roboto Medium "), local("Roboto-Medium"), url(roboto-latin-500.woff2) format("woff2"), url(roboto-latin-500.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: local("Roboto Medium italic"), local("Roboto-Mediumitalic"), url(roboto-latin-500italic.woff2) format("woff2"), url(roboto-latin-500italic.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-700normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local("Roboto Bold "), local("Roboto-Bold"), url(roboto-latin-700.woff2) format("woff2"), url(roboto-latin-700.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: local("Roboto Bold italic"), local("Roboto-Bolditalic"), url(roboto-latin-700italic.woff2) format("woff2"), url(roboto-latin-700italic.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-900normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: local("Roboto Black "), local("Roboto-Black"), url(roboto-latin-900.woff2) format("woff2"), url(roboto-latin-900.woff) format("woff");
  /* Modern Browsers */ }

/* roboto-900italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 900;
  src: local("Roboto Black italic"), local("Roboto-Blackitalic"), url(roboto-latin-900italic.woff2) format("woff2"), url(roboto-latin-900italic.woff) format("woff");
  /* Modern Browsers */ }


/*# sourceMappingURL=vendor~main.css.map*/