@import "../../assets/scss/globals";


.admin-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;

  @media screen and (max-width: 800px - 1px) {
    flex-flow: column nowrap;
  }

  > div[class$='page'] {
    padding: 0 1rem;
    width: 100%;
  }

  .rjsf {
    max-width: 600px;
  }

  label {
    margin-bottom: 0.5rem;
  }

  input,
  select {
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.5rem;
  }

  input[type="submit"] {
    border: none;
    outline: none;
    background-color: color(orange2);
    padding: 0.5rem 1rem;
    color: color(white1);
  }

  h1 {
    margin-top: 0;
  }

  .error {
    margin-bottom: 0.5rem;
    border: 1px solid color(orange2);
    padding: 8px 16px;
    color: color(orange2);
    display: inline-block;
  }

  .success {
    margin-bottom: 0.5rem;
    border: 1px solid color(green1);
    padding: 8px 16px;
    color: color(green1);
    display: inline-block;
  }

  .add-link {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 1rem;

    &:hover {
      color: color(orange2);
    }

    img {
      margin-right: 8px;
      margin-top: -2px;
      width: 20px;
    }
  }
}