/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
* {
  margin: 0;
  padding: 0;
  outline-style: none;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #bfbfbf;
  background-color: #1D2021;
  overscroll-behavior: none;
}
a {
  text-decoration: none;
  color: #bfbfbf;
}
a:visited {
  color: inherit;
}
ul {
  list-style: none;
}
.bulleted-list {
  list-style: circle;
}
.bulleted-list li {
  margin-left: 20px;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-responsive {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 900px) {
  .flex-row-responsive {
    flex-direction: column;
  }
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-uneven {
  align-items: flex-start;
}
.flex-uneven-end {
  align-items: flex-end;
}
.flex-right-x {
  justify-content: right;
}
.flex-center {
  justify-content: center;
}
.flex-center-y {
  align-items: center;
}
.flex-bottom-y {
  align-items: flex-end;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-6 {
  flex: 6;
}
.flex-7 {
  flex: 7;
}
.flex-8 {
  flex: 8;
}
.flex-9 {
  flex: 9;
}
.flex-10 {
  flex: 10;
}
.spacer-5 {
  width: 5px;
  height: 5px;
}
.spacer-10 {
  width: 10px;
  height: 10px;
}
.spacer-15 {
  width: 15px;
  height: 15px;
}
.spacer-20 {
  width: 20px;
  height: 20px;
}
.margin-bottom-5 {
  margin-bottom: 5px;
}
.margin-bottom-10 {
  margin-bottom: 10px;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
.margin-bottom-40 {
  margin-bottom: 40px;
}
.margin-bottom-60 {
  margin-bottom: 60px;
}
.margin-bottom-80 {
  margin-bottom: 80px;
}
.margin-bottom-100 {
  margin-bottom: 100px;
}
.margin-top-5 {
  margin-top: 5px;
}
.margin-top-10 {
  margin-top: 10px;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-top-40 {
  margin-top: 40px;
}
.margin-top-60 {
  margin-top: 60px;
}
.margin-top-80 {
  margin-top: 80px;
}
.margin-top-100 {
  margin-top: 100px;
}
.inline-block {
  display: inline-block;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
.text-color-green {
  color: #5bf296;
}
.text-color-primary {
  color: #ff0066;
}
.text-light {
  color: #6b6d7d;
}
.text-small {
  font-size: 0.8em;
}
.desktop-only {
  display: block;
}
@media screen and (max-width: 700px) {
  .desktop-only {
    display: none;
  }
}
.wrapper {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 50px;
}
.wrapper-large {
  max-width: 1200px;
}
.wrapper-medium {
  max-width: 800px;
  margin: 25px auto;
  padding: 0px 15px;
}
@media screen and (max-width: 700px) {
  .wrapper-medium {
    padding: 0px;
  }
}
.wrapper-small {
  max-width: 600px;
  margin: 50px auto;
  padding: 0px 15px;
}
.wrapper-mini {
  max-width: 400px;
  margin: 50px auto;
  padding: 0px 15px;
}
.btn {
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  display: inline-block;
}
.btn:disabled {
  cursor: not-allowed;
}
.btn-small {
  padding: 5px 10px;
  font-size: 0.9em;
  display: inline-block;
}
.btn-tiny {
  padding: 2px 6px;
  font-size: 0.8em;
  display: inline-block;
}
.btn-wide {
  display: block;
  width: 100%;
}
.btn-action {
  padding: 5px 10px;
  border-radius: 20px;
  color: #ff0066;
  background-color: #fff;
  border: solid 1px #ff0066;
}
.btn-action:hover {
  background-color: #ff0066;
  color: #fff;
}
.btn-primary {
  color: #fff !important;
  background-color: #ff0066;
  border: solid 1px #ff0066;
}
.btn-primary .loading-icon {
  stroke: #fff;
}
.btn-primary:hover {
  background-color: #d10959;
}
.btn-primary:disabled {
  cursor: not-allowed;
  background-color: #fe7aaf;
}
.btn-primary:disabled:hover {
  background-color: #fe7aaf;
}
.btn-secondary {
  color: #fff !important;
  background-color: #1D2021;
  border: solid 1px #ff0066;
  stroke: #ff0066;
}
.btn-secondary .loading-icon {
  stroke: #ff0066;
}
.btn-secondary:hover {
  background-color: #1D2021;
}
.btn-tertiary {
  color: #ff0066 !important;
  background-color: #fff;
  stroke: #ff0066;
  border: none;
}
.btn-tertiary .loading-icon {
  stroke: #ff0066;
}
.btn-tertiary:hover {
  background-color: #f5f5f5;
}
.btn-danger {
  color: #fff !important;
  background-color: #010202;
  border: solid 1px #010202;
}
.btn-danger .loading-icon {
  stroke: #fff;
}
.btn-danger:hover {
  background-color: #010202;
}
.btn-secondary-danger {
  color: #e44848 !important;
  background-color: #1D2021;
  border: solid 1px #e44848;
  stroke: #e44848;
}
.btn-secondary-danger .loading-icon {
  stroke: #e44848;
}
.btn-secondary-danger:hover {
  background-color: #ffece8;
}
.btn-secondary-neutral {
  color: #848484 !important;
  background-color: #fff;
  border: solid 1px #848484;
  stroke: #848484;
}
.btn-secondary-neutral .loading-icon {
  stroke: #848484;
}
.btn-secondary-neutral:hover {
  background-color: #f5f5f5;
}
.btn-success {
  color: #fff !important;
  background-color: #5bf296;
  border: solid 1px #5bf296;
}
.btn-success .loading-icon {
  stroke: #fff;
}
.btn-success:hover {
  background-color: #5bf296;
}
.form-block label,
.grid-filter label {
  display: block;
  font-size: 0.9em;
}
.form-block input, .form-block select, .form-block textarea,
.grid-filter input,
.grid-filter select,
.grid-filter textarea {
  font-size: 1.1em;
  padding: 6px;
  width: 100%;
  box-sizing: border-box;
  background-color: #303136;
  border: solid 1px #0a0c15;
  border-radius: 4px;
  color: #5bf296;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.form-block + .form-block {
  margin-top: 20px;
}
.form-block-compact label,
.grid-filter-compact label {
  font-size: 0.8em;
  color: #6b6d7d;
}
.form-block-compact input, .form-block-compact select, .form-block-compact textarea,
.grid-filter-compact input,
.grid-filter-compact select,
.grid-filter-compact textarea {
  font-size: 0.9em;
  padding: 4px;
}
.form-block-compact + .form-block-compact,
.form-row-compact + .form-block-compact,
.form-block-compact + .form-row-compact,
.form-row-compact + .form-row-compact {
  margin-top: 5px;
}
.form-row {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.form-row .form-block,
.form-row .form-block-compact {
  flex: 1;
}
.form-row .form-block + .form-block,
.form-row .form-block-compact + .form-block-compact {
  margin-top: 0px;
  margin-left: 10px;
}
@media screen and (max-width: 700px) {
  .form-row {
    flex-direction: column;
  }
  .form-row .form-block + .form-block,
.form-row .form-block-compact + .form-block-compact {
    margin-top: 10px;
    margin-left: 0px;
  }
}
.auth-form .hero {
  margin-bottom: 20px;
}
.auth-form .hero img {
  margin: 0 auto;
  width: 170px;
}
.auth-form .header {
  margin-bottom: 20px;
}
.auth-form .header h1 {
  margin-bottom: 15px;
}
.auth-form .footer {
  margin: 40px 0px 10px 0px;
}
.auth-form .footer p {
  padding: 10px 0px;
}
.outline {
  display: inline-block;
  padding: 3px;
  border: solid 1px #5bf296;
  background-color: rgba(91, 242, 150, 0.1411764706);
  color: #fff;
  border-radius: 4px;
  line-height: 1rem;
}
.green-underline {
  border-bottom: solid 1px #5bf296;
}
.red-underline {
  border-bottom: solid 1px #e44848;
}
.highlight {
  background-color: #ff0066;
  color: #1D2021;
  border-radius: 3px;
}
.lesson-complete .highlight {
  background-color: #5bf296;
  color: #1D2021;
  border-radius: 3px;
}
.info-page .highlight {
  background-color: #5bf296;
  color: #1D2021;
  border-radius: 3px;
}
.highlight-green {
  background-color: #5bf296;
  color: #1D2021;
  border-radius: 3px;
}
.heromoji {
  font-size: 100px;
  margin-bottom: 10px;
}

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