@import 'common.css.scss';

.account-content-scroller,
.session-detail-scroller,
#account-identity-content-scroller {

  .content-wrapper {
    padding:10px 30px;
  }

  .content-wrapper.account {
    border-bottom: 1px dotted #444444;
    color: #CCCCCC;
    font-size: 15px;
    overflow-x: hidden;
    padding: 10px 35px;
    white-space: nowrap;

    .button-orange {
      width:45px;
    }
  }

  h4 {
    margin-top:8px;
    margin-bottom: 10px;
    font-weight:bold;
  }

  form {
    padding-right:10%;
  }

  label {
    font-weight:400;
  }

  input[type=text], input[type=password] {
    width:100%;
  }

  .error {
    padding: 5px 15px 5px 5px;
  }

  .account-left {
    float: left;
    min-width: 165px;
    width: 20%;
  }

  .account-left h2 {
    color: #FFFFFF;
    font-size: 23px;
    font-weight: 400;
    margin-bottom: 8px;
  }

  .account-mid {
    float: left;
    line-height: 150%;
    min-width: 330px;
    width: 50%;
  }

  .account-profile {
    padding-top:20px;

    .avatar_large {
      position:absolute;
      float:none;
      top: -36px;
      right:0;
      margin-right:20%;
    }

    h2 {
      margin-bottom:15px;
    }

    #account-change-avatar {
      height:13px;
      float:right;
      margin-right:17%;
    }


    .location {
      position:relative;
      padding-top:25px;

      .easydropdown-wrapper {
        width:90%;
      }
      .easydropdown {
        width:90%;
      }
    }

    .birth_date {
      .easydropdown{
      }
    }

    .gender .easydropdown {
      width:75px;
    }
  }

  .audio .audio-profiles-short{
    white-space: normal;
  }

  .profile-instrumentlist {
    background-color: #C5C5C5;
    border: medium none;
    box-shadow: 2px 2px 3px 0 #888888 inset;
    color: #666666;
    font-size: 14px;
    height: 178px;
    overflow: auto;
    width: 100%;

    .easydropdown-wrapper {
      width:100%;
    }

    select, .easydropdown {
      @include flat_dropdown;
    }
  }

  .account-sub-description {
    display: block;
    white-space: normal;
  }

  .account-identity th {
    font-weight : bold;
    padding-bottom:10px;
  }

  a.small {
    text-decoration:underline;
  }

  .button-orange, .button-grey {
    line-height:14px;
    margin-top:6px;
    margin-right:0;
  }

  .account-audio {

    table.generaltable td {
      vertical-align:middle;
    }

    .button-orange, .button-grey {
      margin-bottom:9px;
    }


    .rescanning-notice {
      display:none;

      span.spinner-small {
        display:inline-block;
        vertical-align: middle;
      }
    }
  }

  tr.invalid-profile {
    background-color:red;
  }

  img.invalid-profile {
    vertical-align:middle;
  }

  .button-grey {
    margin-right:6px;
  }

  div.field {
    margin-bottom:21px;

    label {
      margin-bottom:2px;
    }
  }

  div.profile-instrumentlist table {
    border-collapse: separate;
    border-spacing: 6px;
  }

  .account-edit-email, .account-edit-password {
    width:35%;
  }

  .input-aligner {
    margin-right:-4px;
  }

  .account-profile-avatar {

    .avatar-space {
      color: $color2;
      margin-bottom: 20px;
      position:relative;
      min-height:300px;

      img.preview_profile_avatar {
      }
    }


    .spinner-large {
      width:300px;
      height:300px;
      line-height: 300px;
      position:absolute;
      top:0;
      left:0;
      z-index: 2000; // to win over jcrop
    }

    .no-avatar-space {
      border:1px dotted $color2;

      color: $color2;
      width:300px;
      height:300px;
      line-height: 300px;
      text-align: center;
      vertical-align: middle;
      background-color:$ColorTextBoxBackground;

    }
  }

  /** audio profiles */
  .audioprofile {
    .actions {
      text-align: center;
    }

    td span[data-current="true"] {
      font-size:11px;
    }

    tr[data-status="bad"] {
      color:grey;
    }
  }

  .sessions-header {
    width: 100%;
    margin: 10px 0px;

    .sessions-caption h2 {
      min-width: 165px;
      color: #FFFFFF;
      font-size: 23px;
      font-weight: 400;
    }

    .session-buttons {
      margin-right:17px;
    }
  }

  /** account session detail */
  .account-session-detail {
    .dark-box {
      background-color: #202020;
      padding: 8px;
      margin-top: 5px;
    }

    .paginate-wait {
      margin:auto;
      text-align:center;
      vertical-align:bottom;
      line-height:32px;
      .spinner-small {
        display:inline-block;
        vertical-align:top;
      }
    }

    #account-session-detail-div {
      .box-header {
        margin: 5px 0px;
        h2 {
          width: 65%;
          font-weight: normal;
        }

        #latency-header {
          width: 20%;
          line-height: 30px;
          vertical-align: middle;
          font-size: 11px;
          text-align: center;
        }
      }


      #pendingRSVPs table.rsvp-table, #session-rsvps table.rsvp-table {
        width:100%;
      }

      table.rsvp-table {
        margin-top: 6px;

        tbody tr td {
          padding-right: 10px;
        }

        td.score-badge {

        }
        td.rsvp-buttons {
          float:right;
          text-align:right;
        }

        .avatar-cell {
          width:24px;
        }
      }

      .latency {
        font-size: 15px;
        height: 16px;
        padding: 3px;
        width: 100%;
        @include border-radius(2px);
        width:130px;
      }

      #session-rsvps, #still-needed, #invited-users {
        margin-bottom: 5px;
      }


      .musician-left {
        width: 20%;
        float: left;
        margin-top: 8px;
      }

      .musician-right {
        width: 75%;
        float: right;
      }

      .session-properties-left {
        width: 20%;
        float: left;
        font-weight: strong;
        margin-bottom: 10px;
      }

      .session-properties-right {
        width: 75%;
        float: left;
        margin-bottom: 10px;
      }

      .session-properties {
        .update-session {
          margin-right:9px;
        }
      }
    }
  }

  .account-session-properties {
    #account-session-properties-div {
      margin-top: 10px;
    }

    .left-panel {
      float: left;
      width: 45%;
    }

    .right-panel {
      float: right;
      width: 55%;
    }

    .left-column {
      width: 35%;
      display: inline-block;
      float: left;
      line-height: 30px;
      vertical-align: middle;
      text-align: right;
      margin-top: 5px;
    }

    .right-column {
      width: 60%;
      margin-left: 5px;
      margin-top: 5px;
      display: inline-block;
      float: left;
      line-height: 30px;
      vertical-align: middle;
    }

    .right-column input[type="text"] {
      margin-bottom: 10px;
    }

    .right-column input[type="text"], .right-column textarea {
      width: 99%;
    }

    .right-no-left {
      width: 65%;
      margin-left: 35%;
      display: inline-block;
      float: left;
      line-height: 30px;
      vertical-align: middle;
    }

    .open-rsvp-check, .datetime_tbd_check {
      float: left;
      margin-left: 5px;
    }

    .datetime_tbd_label {
      float: left;
      margin-left: 5px;
    }

    .open-rsvp-label {
      float: left;
      margin: 5px;
      width: 85%;
      line-height: 19px;
      font-weight: 300;
    }

    .action-bar {
      margin-top: 20px;
    }
  }

  /** account sessions */
  .account-sessions {
    div#account-scheduled-sessions {
      position: relative;
      display: block;
      overflow: auto;
      margin: 0px;
      height: 100%;
    }

    table.generaltable {
      background-color: inherit;
      border: none;

      td {
        vertical-align:middle;
        font-size: 15px;
        border: none;
      }
    }

    table.generaltable td {

    }

    .session-left {
      width: 20%;
      margin-bottom: 10px;
      float: left;
    }

    .session-right {
      width: 80%;
      margin-bottom: 10px;
      float: right;
    }
  }
}

#session-cancel-dialog {
  .cancel-description {
    width: 90%;
    font-size: 15;
    padding: 5px;
  }
}