@import "client/common";

#jam-class-student-screen {

  div[data-react-class="JamClassScreen"] {
    height:100%;
  }
  .content-body-scroller {
    height:100%;
    padding:30px;
    @include border_box_sizing;
  }

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

  .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: 20px;
    font-weight:700;
    margin-bottom: 20px !important;
    display:inline-block;
  }
  .column {
    @include border_box_sizing;
    width:50%;
  }
  .column-left {
    float:left;
    width:70%;
  }
  .column-right {
    float:right;
    width:30%;
    padding-left:20px;

    .jamclass-section {
      padding-top:36px;
    }
  }
  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;
    }
  }
  .jamtable {

    height:100%;
    width:100%;
    table-layout:fixed;

    a {
      text-decoration: underline !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 {

    }
    
    .userColumn {
      //white-space:nowrap;
      .first_name {
        margin-bottom:5px;
        display:inline-block;
      }
      .last_name {
        display:inline-block;
      }
      a {
        text-decoration: none;
      }
    }

    .unreadColumn {
      width:44px;
      text-align:center;
      padding:4px 10px;
    }
    .displayStatusColumn {
      width:100px;
      text-align:center;
    }
    .actionsColumn {
      text-align:center;
      width:80px;
    }
    .lesson-session-actions-btn {
      white-space: nowrap;
      cursor: pointer;
      vertical-align: bottom;
      text-decoration: none !important;
      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;
      }
    }
  }
  .search-teachers-btn {
    margin-top:10px;
  }
  .loading, .none {
    text-align:center;
  }
  .field.stripe-connect label {
    color: $ColorTextTypical;
  }
  button.stripe-connect {
    margin-top:20px;
  }

  .field.stripe-connect .view-payments {
    display:block;
    margin: 0 auto;
    width:110px;
  }
  .view-teacher-profile {
    display:block;
    width:112px;
    margin: 30px auto 50px;
  }
  a.missing-profile {
    display:block;
  }
  span.missing-profile {
    display:block;
  }
  .missing-profile-list {
    margin: 0 auto;
    display: block;
    text-align: center;
  }
  .attachment-fields {
    input {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      filter: alpha(opacity=0);
      opacity: 0;
      cursor: inherit;
      display: block;
    }
  }
}