@import "events/constants";
@import "client/common.scss";


[data-react-class="EventsPage"] {
  width:100%;

  .EventsPage {
    width:100%;
  }

  #header {
    display:grid;
    justify-content: center;
    width:100%;
    background-color:$jamkazam-background;
    padding:1.5rem 0;
  }

  #root {
    min-height: 100%;

    align-items: center;
    //justify-content: center;
    min-width: 50%;
    display: flex;
    flex-direction: column;
  }



  .order-input {
    font-size:1rem;
    padding:5px;
  }

  .cta-button {
    cursor:pointer;
    font-size: 1rem;
    color: white;
    background-color: $cta-color;
    text-align: center;
    padding: 5px;
    margin-left:5px;
    border-radius: 8px;
    border: 1px outset buttonface;
    font-family: Raleway, Arial, Helvetica, sans-serif;

    &.submitting {
      background-color: gray;
    }
  }
  .error {
    margin-top: 1rem;
    //position: absolute;
    display:none;
    color:red;
    font-weight:bold;
    &.active {
      display:inline;
    }
  }
  .eventbrite-logo {
    height:2rem;
    vertical-align: middle;
  }
  #top-container {
    background-color:black;
    display: grid;
    justify-content:center;
    padding:5rem 0 7rem 0;
  }

  div.root {
    flex-grow: 1;
    overflow: auto;
  }

  .logo-holder {
    max-width: 300px;
    min-width:0;
    img {
      width: 100%;
    }
  }


  .submit-row {
    text-align:center;
  }
  p {
    margin:.5rem 0;
  }
  p:first-child {
    margin-top:0;
  }
  p.last-child {
    margin-bottom:0;
  }

  .header {
    font-size: $large-font-size;
    margin-top: 1rem;
    width: 100%;
    max-width: 700px;
    text-align: center;
  }

  html {
    font-size: 100%;
  }

  .listings {
    display:grid;
    justify-content: center;
    width:100%;
  }

  .preview-and-action-box {
    background-color: black;
    position:relative;
    top: -2rem;
    min-width: 300px;
    @include border_box_sizing;
    border-width: 0 $chunkyBorderWidth $chunkyBorderWidth;
    border-style: solid;
    border-color: $copy-color-on-dark;
    z-index: 1;
  }

  @media (min-width:1px) and (max-width: 1199px) {
    html {
      font-size: 100%;
    }
    .code-input {
      max-width:$submit-button-width;
    }
    .code-input input {
      font-size: $standard-font-size;
    }
    .code-instructions {
      width:$submit-button-width;
    }

    .text-input input {
      width:$create-account-width;
    }
    .select-input select{
      width:$create-account-width;
    }

    .instructions.create-account {
      margin-top:1rem;
      text-align:justify;
    }
    .success-msg {
      margin-top: 1rem;
    }
    .logo-holder.create-account {
      margin-top:2rem;
    }
    .code-form.create-account {
      margin-top:1rem;
    }
    .powered-by.create-account {
      margin-top:0.5rem;
    }
  }
}