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

#rt-e617b4394e0e49e1c234c63161bb2e15 {
  width:38%;
  position:absolute;
}

#body-content  #rt-e617b4394e0e49e1c234c63161bb2e15 {
  position:relative;
  width:100%;
  overflow:visible;
}

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

  .EventPage {
    width:100%;
  }

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

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

  .title {
    font-size:2rem;
  }

  .description {
    color:gray;
    font-size:1rem;
    margin-top:.2rem;
  }

  .starts-at {
    color:gray;
    font-size:1rem;
    margin-top:.2rem;
  }
  #root {
    min-height: 100%;

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

  #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;
  }

  #player, #no-player {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    //top:-5rem;
    border-width: $chunkyBorderWidth;
    border-style: solid;
    border-color: $copy-color-on-dark;
    a {
      color:#fc0;
    }
  }

  #no-player {
    display:grid;
    align-content: center;
  }

  .no-register {
    text-decoration: underline;
    font-weight:bold;
    //margin-top:2rem;
    display:block;
  }

  .no-code {
    background-color: black;
    padding-bottom:0 !important;
    height:auto !important;
    min-height:200px !important;
    padding-top:0 !important;
    text-align:center;
    font-size:1rem;
    ul,ol {
      text-align:left;
    }
  }

  #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:black;
    justify-content:center;
    padding:2rem 0 .1rem 0;
    text-align:center;
  }

  #chat-header {
    display:none;
  }
  div.root {
    flex-grow: 1;
    overflow: auto;
  }

  html {
    font-size: 100%;
  }

  .listing {
  }

  .listing-content {
  }

  #back-link {
    color:#fc0;
    position:absolute;
    left:1rem;
    text-decoration: none;

    &:before {
        content:"◀ ";
    }
  }

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

    #header {

    }

    .title {
      position:relative;
      font-size:1.5rem;

    }

    #player, #no-player {

      margin-bottom:1rem;
    }

    #top-container {
      //margin-top:1rem;
    }

    html {
      font-size: 100%;
    }

    #back-link {
      top:-3rem;
      font-size:1rem;

      &:before {
        content:'< ';
      }
    }

    #chat-header {
      display:block;
      font-size:1rem !important;
      margin-bottom:.25rem;
      text-align:center;
      color:lightgray;
    }


    #body-content {
      grid-template-columns: 100%;
    }
    #body-content  #rt-e617b4394e0e49e1c234c63161bb2e15 {
      height:400px;
      padding-bottom: 10rem;
    }
    .logo-holder {
      background: url('/assets/logo.png') no-repeat center;
      background-size:75%;
      height:40px;
      width: 100px;
    }

    #powered-by {
      display:none;
    }

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

      span {
        vertical-align: bottom;
        line-height:20px;
      }

      div {
        display:inline-block;
        vertical-align: bottom;
      }

      .powered-by {
        height: 20px;
        width: 100px;
        background-size: 100%;
      }
    }


  }


}