/*
 * CSS File of Material icons.
 * CSS code based on:
 * https://github.com/google/material-design-icons
 */




/* Use the font */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/assets/material-icons-regular-d7f083631d2357fe2c2c75d353cb1d6deaceb0249e07d00a59f9cdffbbccf35a.woff2) format('woff2'),
       url(/assets/material-icons-regular-a9f2f380dd4aab1414f47620e68d9bf7d45cece149be7fec8a94e532e1660cb1.woff) format('woff');
}

/* Base class */
.material-icons,
.mi {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
.section {
  border-radius: 0.2em;
  margin: 0.5em;
  padding: 1em; }
  .section.base {
    background-color: #FFFFFF;
    box-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); }

.form-field {
  margin-bottom: 0.5em; }
  .form-field.grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em; }
    .form-field.grid label {
      text-align: right; }

#sign-in-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20em; }
@use "sass:map";
@use 'sass:color';
.button-light {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #dde3e6;
  color: #000000;
  text-shadow: 0 0 0.15em #b5c2c9; }
  .button-light:hover {
    background-color: #eceff1; }

.button-dark {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #272324;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em #252122; }
  .button-dark:hover {
    background-color: #342f30; }

.button-primary {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #2f2d5f;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em #1e1d3d; }
  .button-primary:hover {
    background-color: #383570; }

.button-secondary {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #025aff;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-secondary:hover {
    background-color: #1c6bff; }

.button-info {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #4bdbe1;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em #0c4749; }
  .button-info:hover {
    background-color: #61dfe5; }

.button-success {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #00a761;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-success:hover {
    background-color: #00c170; }

.button-warning {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #e2cc00;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-warning:hover {
    background-color: #fce300; }

.button-danger {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #f11f00;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-danger:hover {
    background-color: #ff2b0c; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */
@import url("https://fonts.googleapis.com/css2?family=Alata&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@use "sass:map";
@use 'sass:color';
.button-light {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #dde3e6;
  color: #000000;
  text-shadow: 0 0 0.15em #b5c2c9; }
  .button-light:hover {
    background-color: #eceff1; }

.button-dark {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #272324;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em #252122; }
  .button-dark:hover {
    background-color: #342f30; }

.button-primary {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #2f2d5f;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em #1e1d3d; }
  .button-primary:hover {
    background-color: #383570; }

.button-secondary {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #025aff;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-secondary:hover {
    background-color: #1c6bff; }

.button-info {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #4bdbe1;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em #0c4749; }
  .button-info:hover {
    background-color: #61dfe5; }

.button-success {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #00a761;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-success:hover {
    background-color: #00c170; }

.button-warning {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #e2cc00;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-warning:hover {
    background-color: #fce300; }

.button-danger {
  display: inline-block;
  padding: 0.5em;
  border: 0;
  border-radius: 0.2em;
  text-decoration: none;
  transition: all 0.1s ease-in;
  cursor: pointer;
  background-color: #f11f00;
  color: #FFFFFF;
  text-shadow: 0 0 0.15em black; }
  .button-danger:hover {
    background-color: #ff2b0c; }

.section {
  border-radius: 0.2em;
  margin: 0.5em;
  padding: 1em; }
  .section.base {
    background-color: #FFFFFF;
    box-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); }

.form-field {
  margin-bottom: 0.5em; }
  .form-field.grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em; }
    .form-field.grid label {
      text-align: right; }

#sign-in-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20em; }

html, body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #dde3e6; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Alata", sans-serif; }