.error {
    text-align: center;
    background-color: $accent-color-1;
    color: #fff;
    margin: 2rem 0 .5rem;
    padding: .5rem 0;
}

.error-header {
  @include outer-container;
  .page-title {
    display: inline-block;
    h1 {
      font-family: $heading-font-face;
      font-size: 1.5rem;
    }
  }
  .secondary-btn {
    margin-top: 1rem;
  }
}

.warning {
  @extend .error;
  background-color: #f39c12;
}

.success {
  @extend .error;
  background-color: $brand-success;
}

.notice {
  @extend .error;
  background-color: $brand-info;
}

[data-id="live-coder-finish-later"] {
  .warning {
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: left;
    padding: .5rem 1rem;
  }
}

@media only screen and (min-width: $desktop) {
  .error-header {
    .page-title {
      h1 {
        font-size: 1.5rem;
      }
    }
    .secondary-btn {
      float:right;
    }
  }
}