/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./frontend/src/styles.css ***!
  \*****************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('MaterialIcons-Regular.1e50f5c2ffa6aba4.eot'); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('MaterialIcons-Regular.7ea2023eeca07427.woff2') format('woff2'),
       url('MaterialIcons-Regular.db852539204b1a34.woff') format('woff'),
       url('MaterialIcons-Regular.196fa4a92dd6fa73.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 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;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* You can add global styles to this file, and also import other style files */

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 18px;
  height: 100%;
  font-family: Roboto, Helvetica, arial, sans-serif, serif;
  background: var(--color-background);
  color: var(--color-accent);
  -webkit-user-select: none;
          user-select: none;
}

* {
  box-sizing: border-box;
  color: inherit;
}

:not(input) {
  -webkit-user-select: inherit;
          user-select: inherit;
}

/* Variables */

html {
  --color-background: #eee;
  --color-foreground: #fff;
  --color-accent: #607d8b;
  --color-overlay: #607d8b;
  --color-overlay-accent: #fff;
  --color-button: #607d8b;
  --color-button-text: #fff;
  --color-disabled: #ccc;
  --color-disabled-accent: #fff;
  --color-fail: #f00;
  --color-success: #0f0;

  /*--page-background: #fff;*/
  /*--font-color: #607d8b;*/
  /*--placeholder-color: #ccc;*/
  /*--overlay-background: #607d8b;*/
  /*--fail-color: #f00;*/
  /*--success-color: #0f0;*/

  /*--button-background: #fff;*/
  /*--button-border: #607d8b;*/
  /*--button-color: #607d8b;*/

  /*--button-action-background: #607d8b;*/
  /*--button-action-border: #607d8b;*/
  /*--button-action-color: #fff;*/

  /*--button-disabled-background: #999;*/
  /*--button-disabled-border: #999;*/
  /*--button-disabled-color: #fff;*/

  /*--keyboardHeight: 0;*/
  --margin: 1em;
}

@media (prefers-color-scheme: dark) {
  html {
    --color-background: #000;
    --color-foreground: #222;
    --color-accent: #ddd;
    --color-overlay: #222;
    --color-overlay-accent: #ddd;
    --color-button: #444;
    --color-button-text: #fff;
    --color-disabled: #222;
    --color-disabled-accent: #444;
    --color-fail: #740000;
    --color-success: #005000;
  }
}

.overlay {
  color: var(--color-overlay-accent);
  background: var(--color-overlay);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 var(--margin);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: 40px;
  padding: 0 20px;
  background: var(--color-foreground);
  border: 1px solid var(--color-accent);
  cursor: pointer;
  font-size: inherit;
}

button :not(:last-child) {
  margin-right: 7px;
}

button.text {
  background: transparent;
  border: 0;
  padding: 0;
  height: auto;
}

button.action,
button[type="submit"] {
  background: var(--color-button);
  color: var(--color-button-text);
  border: 1px solid var(--color-button);
}

button[disabled] {
  background: var(--color-disabled);
  color: var(--color-disabled-accent);
  border: 1px solid var(--color-disabled);
  cursor: default;
}

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  border: 0;
  border-bottom: 1px solid var(--color-accent);
  outline: 0;
  font-size: 1em;
  color: inherit !important;
  background-color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--color-accent) !important;
}

input::placeholder {
  color: var(--color-disabled);
}

.selectable {
  -webkit-user-select: text;
          user-select: text;
}

@media (max-width: 699px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 700px) {
  .hide-on-desktop {
    display: none !important;
  }
}


/*# sourceMappingURL=styles.59f08b07c534d722.css.map*/