jam-cloud/web/app/assets/stylesheets/client/react-components/LessonBookingScreen.scss

@import "client/common";

#lesson-booking {

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

  h2 {
    font-size: 24px;
    font-weight:700;
    margin-bottom: 20px !important;
    display:inline-block;
  }
  .row {
    margin-bottom:40px;
  }

  h3 {
    font-size: 16px;
    font-weight:700;
    color:white;
    margin-bottom: 10px !important;
    display:inline-block;
  }
  .contents {
    padding-left:60px;
    position:relative;
  }
  .no-charge {
    float:right;
  }
  .column {
    @include border_box_sizing;
    width:50%;
  }
  .column-left {
    float:left;
    padding-right:20px;
    &.stored {
      display:none;
    }
  }
  .column-right {
    float:right;
    padding-left:20px;
    &.stored {
      float:left;
    }
  }
  label {
    display:inline-block;
    color: $ColorTextTypical;
  }
  select {
    display:inline-block;
  }

  .slot-decision {
    vertical-align: top;
  }
  .slot-alt-prompt {
    display:none;
    color: $ColorTextTypical;
    margin-top: 4px;
    padding-left:22px;
    label {
      margin-bottom:10px;
    }
  }
  .counterSelected {
    .slot-alt-prompt {
      display:inline-block;
    }
  }

  .onlyOption {
    input[type="radio"], .iradio_minimal {
      display:none;
    }
    .slot-alt-prompt {
      padding-left:0;
    }
  }

  .slot-detail {
    color: $ColorTextTypical;
    display: inline-block;
    margin-top: 4px;
    padding-left:22px;
  }
  .alt-date-block {
    white-space: nowrap;
    float:left;
    display:block;
    margin-bottom:10px;
    vertical-align: middle;
    line-height:31px;
  }

  .alt-time-block {
    white-space: nowrap;
    float:left;
    display:block;
    //margin-bottom:10px;
    vertical-align: middle;
    line-height:31px;
  }

  td.description {
    color: $ColorTextTypical;
    vertical-align: top;
    white-space: nowrap;
  }
  td.message {
    color: $ColorTextTypical;
    padding-left: 10px;
    vertical-align: top;
  }

  .date-picker {
    margin-right:20px;
  }
  .alt-date {
    margin-right:10px;
  }
  .alt-time {
    margin-right:10px;
  }

  input {
    display:inline-block;
    //width: calc(100% - 150px);
    width:auto;
    @include border_box_sizing;
  }
  textarea {
    width:100%;
    @include border_box_sizing;
    height:125px;
  }
  .field {
    position:relative;
    display:block;
    margin-bottom:15px;

    label {
      width:auto;
    }
  }
  .minute {
    margin-right:20px;
  }
  p {
    line-height:125% !important;
    font-size:14px !important;
    margin:0 0 10px 0 !important;
    color:$ColorTextTypical !important;
  }
  .user-header {
    position:relative;
    height:42px;
  }
  .user-name {
    line-height:48px;
    vertical-align:middle;
    color:white;
  }
  .request-sent {
    color:$ColorTextTypical;

    .generic-time-stmt, .proposing-new-time {
      margin-top:10px !important;
    }
  }
  .avatar {
    position:absolute;
    left:-60px;
    display:inline-block;
    padding:1px;
    width:48px;
    height:48px;
    background-color:#ed4818;
    margin:0 20px 0 0;
    -webkit-border-radius:24px;
    -moz-border-radius:24px;
    border-radius:24px;
    float:none;
  }
  .avatar img {

    width: 48px;
    height: 48px;
    -webkit-border-radius:24px;
    -moz-border-radius:24px;
    border-radius:24px;
  }
  .teacher-name {
    font-size:16px;
    display:inline-block;
    height:48px;
    vertical-align:middle;
  }
  .actions {
    margin-left:-3px;
    margin-bottom:20px;
  }
  .error-text {
    display:block;
  }

  .actions {
    clear:both;
    a.cancel {
      float:left;
    }
    a.schedule {
      float:right;
    }
    a {
      margin-bottom:20px; // in case the floating wraps
    }
  }

  .iradio_minimal {
    display:inline-block;
    top: -2px;
    margin-right: 5px;
  }

  .icheckbox_minimal {
    display:inline-block;
    top: 3px;
    margin-right: 5px;
  }

  textarea.message {
    width:100%;
    height:150px;
    margin-bottom:20px;
  }

  a.cancel-lesson {
    margin-left:2px;
  }
  a.search-for-more-teachers {
    margin-top:40px;
    text-align:center;
    display:block;
  }

  .error-text {
    display: block;
    //background-color: #600;
    color: #f00;
  }
}