.errorExplanation {
  padding: 5px;
  border: 1px solid very-light($color-error, 12);
  background-color: very-light($color-error, 6);
  border-radius: 3px;
  color: very-light($color-error, 30);
  margin-bottom: 15px;

  h2 {
    font-size: 140%;
    color: very-light($color-error, 30);
    margin-bottom: 5px;
  }

  p {
    padding: 10px 0;
  }

  ul {
    list-style-position: inside;

    li {
      font-weight: $font-weight-bold;
    }
  }
}

.flash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  .flash {
    padding: 18px;
    text-align: center;
    font-size: 120%;
    color: $color-1;
    font-weight: 600;
    margin-top: 0;

    &.notice {
      background-color: rgba($color-notice, 0.8);
    }
    &.success {
      background-color: rgba($color-success, 0.8);
    }
    &.error {
      background-color: rgba($color-error, 0.8);
    }

    // Adjust heights to fit main layout dimension (header, navbar...)
    &:nth-child(2) {
      padding: 24px;
    }
    &:nth-child(3) {
      padding: 20px;
    }
  }
}

.notice:not(.flash) {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: $spree-light-blue;
  border-radius: $border-radius;

  a {
    font-weight: bold;
  }
}