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

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

  .EventsPage {
    width:100%;
  }

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

  #root {
    min-height: 100%;

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


  .logo-holder {
    background: url('/assets/logo.png') no-repeat;
    height: 47px;
    width: 252px;
    color:white;
  }

  .title {
    font-size: 2rem;
  }

  .description {
    font-size: 1rem;
    margin-top: .2rem;
    width:1000px;
    margin-bottom:2rem;
    color:$copy-color-on-white;
    a {
      color:darken(#fc0, 20%);
      white-space:nowrap;
    }
    line-height:150%;
  }

  iframe {
    background-color:white;
  }

  .buffer {
    background-color:white;
    padding:1rem;
  }

  .support-warning {
    background-color:lightgrey;
    font-weight:bold;
    font-size: 1rem;
    margin-top: 1rem;
    width:1000px;
    margin-bottom:2.5rem;
    padding:1rem;
    color:$copy-color-on-white;
    a {
      color:darken(#fc0, 20%);
      white-space:nowrap;
    }
    line-height:150%;
  }

  #powered-by, #powered-by-2 {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: -3rem;
    margin: auto;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;

    span {
      font-size: .8rem;
      text-align: left;
    }
  }

  .powered-by {
    background: url("/assets/shared/jk_logo_small.png") no-repeat center;
    height: 26px;
    width: 142px;
  }

  #powered-by-2 {
    display: none;
  }


  #body-content {
    background-color:black;
    display:grid;
    grid-template-columns: 60% 2% 38%;
    justify-content:center;
    margin-bottom:6rem;
    padding:0 1rem;
  }

  #top-container {
    background-color:white;
    display: grid;
    justify-content:center;
    padding:2rem 0 7rem 0;
    grid-template-columns: min-content;
  }


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

  #help-desk {
    position:absolute;
    bottom: -25px;
    left: 134px;
    font-size:1.5rem;
  }


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

  .header {
    font-size: $large-font-size;
    margin-top: 1rem;
    min-width: 1000px;
    text-align: center;
  }

  html {
    font-size: 100%;
  }

  @media (min-width:1px) and (max-width: 1199px) {
    html {
      font-size: 100%;
    }

    .header {
      min-width:90%;
      padding-left:1.5rem;
    }
    .description {
      width:90%;
      padding-left:1.5rem;
    }
  }
}