// lms - views - support
// These styles are included on admin pages used by the support team.
// ===================================================================

.certificates-search,
.enrollment-search {
  margin: 40px 0;

  input[name="query"] {
    width: 350px;
  }

  .certificates-form {
    max-width: 850px;
    margin: 0 auto;
  }
}

.manage-user-search {
  margin: 40px 0;

  input[name="query"] {
    width: 350px;
  }
}

.certificates-results {
  table {
    margin: 0 auto;
  }

  th {
    text-align: center;
    text-decoration: underline;
  }

  th,
  td {
    padding: 10px;
    vertical-align: middle;
  }
}

.btn-cert-regenerate {
  font-size: 12px;
}

.btn-cert-generate {
  font-size: 12px;
}

.enrollment-modal-wrapper.is-shown {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;

  .enrollment-modal {
    width: 600px;
    position: relative;
    margin: 10% auto;
    padding: $baseline;
    border: 4px solid $gray;
    border-radius: 4px;
    background-color: $white;

    .enrollment-change-title {
      @extend %t-title6;
      @extend %t-strong;

      @include text-align(left);

      margin-bottom: 0;
      text-transform: none;
    }

    .enrollment-change-field {
      margin: 0;
      padding: ($baseline/4) 0;
      border-bottom: 1px solid $gray-l1;

      p,
      label,
      select,
      input {
        @extend %t-copy-sub1;

        display: inline;
        font-style: normal;
      }
    }

    .enrollment-change-errors {
      @extend %t-copy-sub1;
      @extend %t-light;

      color: $red;
    }

    .enrollment-info {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .enrollment-change-submit,
    .enrollment-change-cancel {
      @extend %t-action4;

      margin: ($baseline/4) auto;
      text-transform: none;
      background-image: none;
      border: none;
      box-shadow: none;
      text-shadow: none;
    }

    .enrollment-change-cancel {
      background-color: $gray-l3;
    }
  }
}

.enrollment-modal-wrapper.is-hidden {
  display: none;
}

.enrollment-results {
  @extend %t-copy-sub2;

  .enrollment-table {
    display: inline-block;
  }

  th {
    @extend %t-title7;
  }

  .change-enrollment-btn,
  .change-enrollment-btn:hover {
    @extend %t-action4;

    margin: ($baseline/4) auto;
    padding: ($baseline/4) 1px;
    letter-spacing: normal;
    text-transform: none;
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
  }
}

.manage-user-results {
  .manage-user-table {
    display: inline-block;
  }

  th {
    @extend %t-title7;

    text-align: center;
  }

  td {
    padding: 0 23px;
  }

  .disable-account-btn,
  .disable-account-btn:hover {
    @extend %t-action4;

    letter-spacing: normal;
    text-transform: none;
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
  }
}

.manage-user-content {
  text-align: center;
}

.fb-enrollments-results {
  .fb-enrollments-table {
    display: inline-block;
  }

  th {
    @extend %t-title7;

    text-align: center;
  }

  td {
    padding: 0 23px;
  }
}

.fb-enrollments-content {
  text-align: center;
}

.fb-enrollments-search {
  margin: 40px 0;

  input[name="course_key"] {
    width: 350px;
  }
}

.fb-enrollments-gating-col {
  background-color: #eee;
}

.contact-us-wrapper {
  min-width: auto;

  .form-group {
    font-family: inherit;
  }

  h2 {
    font-size: $support-form-base-font-size + 8;
    font-weight: bold;
  }

  p {
    font-size: $support-form-base-font-size + 4;
    font-weight: $font-regular;
  }

  label {
    font-family: inherit;
    font-size: $support-form-base-font-size + 2;
    font-style: normal;
    font-weight: $font-regular;
  }

  .help-button, .btn-secondary {
    margin-bottom: $baseline;
    height: $baseline * 2;
    font-weight: $font-regular;
    font-size: $support-form-base-font-size + 2;
    border: 1px solid $blue;
    border-radius: 3px;
    color: $blue;
  }

  .label-course {
    margin-bottom: $baseline - 5;
  }

  .message-desc {
    color: $dark-gray1;
    font-size: $support-form-base-font-size - 2;
    margin-bottom: $baseline - 16;
  }

  .select-course {
    font-size: $support-form-base-font-size;
    height: $baseline * 2;
    margin-bottom: $baseline;
  }

  .progress {
    padding: 0;
    margin-top: $baseline - 10;

    .progress-bar {
      background-color: $blue;
    }

    .zero-width {
      width: 0;
    }
  }

  .btn-primary {
    background-color: $blue;
    width: 100%;
    height: $baseline * 2;
    font-size: $support-form-base-font-size + 2;

    &:hover,
    &:focus {
      background-image: none;
      background-color: $m-blue-d6;
      border-color: $m-blue-d6;
    }

    &[disabled] {
        color: $white;
    }
  }

  .file-loading,
  .file-name {
    font-size: $support-form-base-font-size + 2;
  }

  .file-action {
    @include float(right);

    font-size: $support-form-base-font-size + 2;
    margin-bottom: $baseline - 10;

    button {
      padding: 0;
    }
  }

  .btn-signin {
    width: $baseline * 8;
    color: $white;
    margin-bottom: $baseline;

    &:hover,
    &:focus {
      color: $white;
    }
  }

  a.create-account {
    color: $m-blue-d6;
    text-decoration: underline !important;
    font-size: $support-form-base-font-size + 4;
  }

  .create-account-note {
    padding-top: $baseline - 5;
  }

  input[type='text'] {
    font-size: $support-form-base-font-size - 2;
    font-family: $font-family-sans-serif;
    font-style: normal;
    font-weight: $font-regular;
  }

  .alert-danger {
    color: $palette-error-text !important;
    font-size: $support-form-base-font-size;
  }

  .has-error {
    label {
      color: $danger-red;
    }
  }

  @media only screen and (min-width: 768px) {
    .row {
      max-width: $baseline * 25;
    }
  }
}