@import "client/common";

#jamblaster-screen {

  div[data-react-class="JamBlasterScreen"] {
    height:100%;
  }


  h3 {
    font-weight:bold;
    font-size:18px;
    color:white;
    margin-bottom:20px;
  }

  h4 {
    font-size:16px;
    color:white;
    font-weight:bold;
    margin:30px 0 10px 0;
  }
  .content-body-scroller {
    height:100%;
    padding:30px;
    @include border_box_sizing;
  }

  .column {
    float:left;
    width:50%;
    @include border_box_sizing;

    &.column-left {
      padding-right:20px;
    }
    &.column-right {
      padding-left:20px;
    }
  }

  ol {
    li {
      margin-left:15px;
      margin-bottom:2px;
      list-style:decimal;
      color:$ColorTextTypical;
    }
  }

  .tiles {
   float:right;
    margin-bottom: 40px;
    margin-top: -3px;
  }
  .jamblaster-tile {
    float:left;
    @include border-box_sizing;
    width:117px;
    border-radius:4px;
    margin-left:7px;
    height: 32px;
    line-height:32px;
    position:  relative;
    background-color:#535353;

    &.activeTile
    {
      background-color: #ed3618;
    }

    a {
      position: absolute;
      text-align: center;
      bottom:0;
      left:0;
      width: 100%;
      margin: 0 auto;
      padding: 0 10px 0;
      color:white;
      background-color:transparent;
      @include border-box_sizing;
    }
  }

  .networking-content {
    .field {
      margin-bottom:10px;
    }
    .iradio_minimal {
      display: inline-block;
      top: 4px;
      margin-right: 5px;
    }
    label {
      display:inline-block;
    }
    .dhcpfield {
      margin-bottom:10px;
    }
  }

  .student-right-content {
    p {
      margin-bottom:10px;
    }
    ul {
      margin-bottom:25px;
      li {
        margin-left:-10px;
        margin-bottom:2px;
        list-style:disc;
        color:$ColorTextTypical;
      }
    }
  }
  h2 {
    font-size: 22px;
    font-weight:700;
    margin-bottom: 40px !important;
    display:inline-block;
  }
  span.price {
    color:white;
  }
  .test-drive-main {
  }
  p {
    line-height:125% !important;
    font-size:14px !important;
    margin:0 0 20px 0 !important;
    color: $ColorTextTypical;
  }
  .avatar {
    display:inline-block;
    padding:1px;
    width:36px;
    height:36px;
    background-color:#ed4818;
    margin:0 10px 0 0;
    -webkit-border-radius:18px;
    -moz-border-radius:18px;
    border-radius:18px;
    float:none;
  }
  .avatar img {
    width: 36px;
    height: 36px;
    -webkit-border-radius:18px;
    -moz-border-radius:18px;
    border-radius:18px;
  }

  .calender-integration-notice {
    display:block;
    text-align:center;
  }
  .actions {
    display:block;
    text-align:center;
  }
  .jamclass-section {
    margin-bottom:40px;
    &.my-lessons {
      max-height:300px;
      overflow:auto;
    }
  }
  .management-content {
    min-width:400px;
    max-width:700px;
  }
  .jamtable {

    height:100%;
    width:100%;
    table-layout:fixed;
    margin-bottom:10px;
    a {
      text-decoration: none !important;
      color:#fc0 !important;
    }
    th {
      font-size:14px;
      padding:3px 10px;
      @include border_box_sizing;
      &.role {
        text-transform: uppercase;
      }
    }
    td {
      background-color: #2b2b2b;
      padding:4px 15px;
      font-size:14px;
      vertical-align:middle;
      color: $ColorTextTypical;
      @include border_box_sizing;
    }
    tbody {

    }

    .displayNameColumn {
      float:left;
    }

    .connectColumn {
      float:right;
      margin-right:20px;
    }

    .optionsColumn{
      float:right;
      text-align:center;
    }
    .jamblaster-options-btn {
      white-space: nowrap;
      cursor: pointer;
      vertical-align: bottom;
      color:#fc0;

      .arrow-down {
        float:none;
        margin-left:5px;
        margin-top:0;
        margin-right:0;
        border-top: 4px solid #fc0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        display:inline-block;
      }
      .arrow-up {
        float:none;
        margin-right:0;
        margin-left:5px;
        margin-bottom:2px;
        border-bottom: 4px solid #fc0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        display:inline-block;
      }
    }
  }
  .resync-bonjour {
    float:right;
    margin-right:3px;
    margin-bottom:20px;
    width:110px;
  }
  p.help-text {
    clear:both;
  }
  .save-settings-btn {
    width:200px;
  }
  .manual-settings {
    margin:20px 0;
    label {
      display:inline-block;
      color: $ColorTextTypical;
      width: 90px;
      text-align: right;
      padding-right: 10px;
    }
    input {
      display:inline-block;

    }
  }
  .status-label {
    width:80px;
    display:inline-block;
  }
  .status-field {
    margin-bottom:10px;
    color:$ColorTextTypical;
  }

  .input-1 {
    @include border-box_sizing;
    width:200px;
    margin-right:20px;
  }

  .input-2 {
    @include border-box_sizing;
    width:200px;
    margin-right:20px;
  }

  .microphone {
    @include border-box_sizing;
    width:200px;
  }
}