@mixin idashbutton ($color) {
  @include button(simple, $color);
  @extend .button-reset;

  margin-bottom: 1em;
  padding: 8px 17px 8px 17px;
  font-size: em(13);
  line-height: 1.3em;
}

.instructor-dashboard-wrapper-2 {
  position: relative;
  // display: table;

  .olddash-button-wrapper {
    position: absolute;
    top: 16px;
    right: 15px;
    @include font-size(16);
  }

  .studio-edit-link{
    position: absolute;
    top: 40px;
    right: 15px;
    @include font-size(16);
  }

  .file-download-link a {
    font-size: 15px;
    color: $link-color;
    text-decoration: underline;
    padding: 5px;
  }

  // system feedback - messages

  .wrapper-msg {
    margin-bottom: ($baseline*1.5);
  }

  .msg {
    border-radius: 1px;
    padding: $baseline/2 $baseline*0.75;
    margin-bottom: $baseline;
    font-weight: 600;

    .copy {
      font-weight: 600;
    }

    &.is-shown {
      display: block;
    }
  }

  // TYPE: warning
  .msg-warning {
    border-top: 2px solid $warning-color;
    background: tint($warning-color,95%);
    display: none;
    color: $warning-color;

    &.is-shown {
      display: block;
    }
  }

  // TYPE: confirm
  .msg-confirm {
    border-top: 2px solid $confirm-color;
    background: tint($confirm-color,95%);
    display: none;
    color: $confirm-color;

    &.is-shown {
      display: block;
    }
  }

  // TYPE: confirm
  .msg-error {
    border-top: 2px solid $error-color;
    background: tint($error-color,95%);

    .copy {
      color: $error-color;
    }

    &.is-shown {
      display: block;
    }
  }

  // inline copy
  .copy-confirm {
    color: $confirm-color;
  }

  .copy-warning {
    color: $warning-color;
  }

  .copy-error {
    color: $error-color;
  }

  .list-advice {
    list-style: none;
    padding: 0;
    margin: $baseline 0;

    .item {
      font-weight: 600;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

section.instructor-dashboard-content-2 {
  @extend .content;
  // position: relative;
  padding: 40px;
  width: 100%;

  // .has-event-handler-for-click {
  //   border: 1px solid blue;
  // }

  .wrap-instructor-info {
    display: inline;
    top: 0;
  }

  .request-response-error {
    margin: 0;
    padding-bottom: ($baseline);
    color: $error-red;
  }

  .display-errors {
    line-height: 3em;
    color: $error-red;
  }

  .slickgrid {
    margin-left: 1px;
    color:#333333;
    font-size:12px;
    font-family: verdana,arial,sans-serif;

    .slick-header-column {
      // height: 100%
    }

    .slick-cell {
      border: 1px dotted silver;
      border-collapse: collapse;
      white-space: normal;
      word-wrap: break-word;
    }
  }

  h1 {
    @extend .top-header;
    display: inline-block;
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: ($baseline*.75);
  }

  input[type="button"] {
    @include idashbutton(#eee);

    &.molly-guard {
      // @include idashbutton($danger-red);
      // @include idashbutton($black);
      // border: 2px solid $danger-red;
    }
  }

  .instructor_dash_glob_info {
    position: absolute;
    top: 46px;
    right: 50px;
    text-align: right;
  }

  .instructor-nav {
    @extend %ui-no-list;
    border-top: 1px solid $gray-l3;
    border-bottom: 1px solid $gray-l3;

    .nav-item {
      @extend %t-copy-base;
      display: inline-block;
      margin: ($baseline/2) $baseline;

      a {
        display: block;
        text-transform: uppercase;

        &.active-section {
          color: $black;
        }
      }
    }
  }

  section.idash-section {
    display: none;
    margin-top: ($baseline*1.5);
    // background-color: #0f0;

    &.active-section {
      display: block;
      // background-color: #ff0;
    }

    .basic-data {
      padding: 6px;
    }
  }
}

.instructor-dashboard-wrapper-2 section.idash-section#course_info {
  .course-errors-wrapper {
    margin-top: 2em;

    h2 {
      color: #D60000;
    }

    &.open {
      .toggle-wrapper {
        .triangle {
          background-image: url('/static/images/bullet-open.png');
        }
      }
      .course-errors-visibility-wrapper {
        display: block;
      }
    }

    .toggle-wrapper {
      width: 300px;
      cursor: pointer;
      div {
        float:left;
      }

      h2 {
        float: left;
      }

      .triangle {
        float: left;
        width: 20px;
        height: 20px;
        background-image: url('/static/images/bullet-closed.png');
        background-position: 8px 6px;
        background-repeat: no-repeat;
      }
    }

    .course-errors-visibility-wrapper {
      display: none;
      clear: both;

      .course-error {
        margin-bottom: 1em;
        margin-left: 0.5em;

        code {
          &.course-error-first {
            color: #111;
          }

          &.course-error-second {
            color: #111;
          }
        }
      }
    }
  }
}

.instructor-dashboard-wrapper-2 section.idash-section#send_email {
  // form fields
  .list-fields {
    list-style: none;
    margin: 0;
    padding: 0;

    .field {
      margin-bottom: $baseline;
      padding: 0;

      &:last-child {
        margin-bottom: 0;
      }
      .tip {
        display: block;
        margin-top: ($baseline/4);
        color: tint(rgb(127,127,127),50%);
        @include font-size(12);
      }
    }
  }
}


.instructor-dashboard-wrapper-2 section.idash-section#membership {
  $half_width: $baseline * 20;

  .vert-left,
  .vert-right {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 2%;
  }

  .vert-right {
    margin-right: 0;
  }

  .batch-enrollment, .batch-beta-testers {
    textarea {
      margin-top: 0.2em;
      height: auto;
      width: 90%;
    }

    input {
      margin-right: 5px;
    }

    .request-res-section {
      margin-top: 1.5em;

      h3 {
        color: #646464;
      }

      ul {
        margin: 0;
        margin-top: 0.5em;
        padding: 0;
        list-style-type: none;
        line-height: 1.5em;
        li {
        }
      }
    }
  }

  .enroll-option {
    margin: ($baseline/2) 0;
    position: relative;

      label {
        border-bottom: 1px dotted $base-font-color;
      }

    .hint {
      @extend %t-copy-sub2;
      display: none;
      position: absolute;
      top: 15px;
      right: 0;
      padding: ($baseline/2);
      width: 50%;
      background-color: $light-gray;
      box-shadow: 2px 2px 3px $shadow;

      .hint-caret {
        display: block;
        position: absolute;
        top: 0;
        left: -15px;
        border-top: 8px solid $light-gray;
        border-right: 8px solid $light-gray;
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
      }
    }
  }

  label[for="auto-enroll"]:hover + .auto-enroll-hint {
    display: block;
  }

  label[for="auto-enroll-beta"]:hover + .auto-enroll-beta-hint {
    width: 30%;
    display: block;
  }


  label[for="email-students"]:hover + .email-students-hint {
    display: block;
  }

  label[for="email-students-beta"]:hover + .email-students-beta-hint {
    width: 30%;
    display: block;
  }

  .enroll-actions {
    margin-top: $baseline;
  }

  .member-lists-management {

    .wrapper-member-select {
      background-color: $light-gray;
      padding: ($baseline/2);
    }

    .member-lists-selector {
      display: block;
      margin: ($baseline/4) 0;
      padding: ($baseline/4);
    }

    .auth-list-container {
      display: none;
      margin-bottom: ($baseline*1.5);

      &.active {
        display: block;
      }

      .member-list-widget {

        .header {
          @include box-sizing(border-box);
          @include border-top-radius(3);
          position: relative;
          padding: ($baseline/2);
          background-color: #efefef;
          border: 1px solid $light-gray;
          display: none; // hiding to prefer dropdown as header
        }

        .title {
          @include font-size(16);
        }

        .label {
          @extend %t-copy-sub1;
          color: $lighter-base-font-color;
        }

        .info {
          @include box-sizing(border-box);
          padding: ($baseline/2);

          border: 1px solid $light-gray;
          color: $lighter-base-font-color;
          line-height: 1.3em;
          font-size: .85em;
        }

        .member-list {
          @include box-sizing(border-box);

          table {
            width: 100%;
          }

          thead {
            background-color: $light-gray;
          }

          tr {
            border-bottom: 1px solid $light-gray;
          }

          td {
            @extend %t-copy-sub1;
            vertical-align: middle;
            word-wrap: break-word;
            padding: ($baseline/2) ($baseline/4);
            border-left:  1px solid $light-gray;
            border-right: 1px solid $light-gray;
          }
        }

        .bottom-bar {
          @include box-sizing(border-box);
          @include border-bottom-radius(3);
          position: relative;
          padding: ($baseline/2);
          margin-top: -1px;
          border: 1px solid $light-gray;
          background-color: #efefef;
          box-shadow: inset #bbb 0px 1px 1px 0px;
        }

        // .add-field

        input[type="button"].add {
          @include idashbutton($blue);
          position: absolute;
          right: $baseline;
        }
      }

      .revoke {
        color: $lighter-base-font-color;
        cursor: pointer;

        &:hover, &:focus {
          color: $alert-color;
        }
      }
    }
  }
}


.instructor-dashboard-wrapper-2 section.idash-section#student_admin > {
  .action-type-container{
    margin-bottom: $baseline * 2;
  }

  .progress-link-wrapper {
    margin-top: 0.7em;
  }

  // .task-history-single-table { .slickgrid
  //   max-height: 500px;
  // } }

  // .running-tasks-table { .slickgrid {
  //   max-height: 500px;
  // } }

  .task-history-all-table    {
    margin-top: 1em;
    // height: 300px;
    // overflow-y: scroll
  }
  .task-history-single-table {
    margin-top: 1em;
    // height: 300px;
    // overflow-y: scroll
  }
  .running-tasks-table {
    margin-top: 1em;
    // height: 500px;
    // overflow-y: scroll
  }
}


.instructor-dashboard-wrapper-2 section.idash-section#data_download {
  input {
    // display: block;
    margin-bottom: 1em;
    line-height: 1.3em;
  }

  .data-download-container {
    .data-display-table {
      .slickgrid {
        height: 400px;
      }
    }
  }

  .grades-download-container {
    .report-downloads-table {
      .slickgrid {
        height: 300px;
        padding: 5px;
      }
      // Disable horizontal scroll bar when grid only has 1 column. Remove this CSS class when more columns added.
      .slick-viewport {
        overflow-x: hidden !important;
      }
    }
  }
}


.instructor-dashboard-wrapper-2 section.idash-section#metrics {

  .metrics-container, .metrics-header-container {
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 25px;
  
    .metrics-left, .metrics-left-header {
      position: relative;
      width: 30%;
      float: left;
      margin-right: 2.5%;

      svg {
        width: 100%;
      }
    }
    .metrics-section.metrics-left {
    	height: 640px;
    }
    
    .metrics-right, .metrics-right-header {
      position: relative;
      width: 65%;
      float: left;
      margin-left: 2.5%;
      margin-bottom: 25px;

      svg {
        width: 100%;
      }
    }

    .metrics-section.metrics-right {
    	height: 295px;
    }
          
    svg {
      .stacked-bar {
        cursor: pointer;
      }
    }

    .metrics-tooltip {
      width: 250px;
      background-color: lightgray;
      padding: 3px;
    }

    .metrics-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(255,255,255, .75);
      display: none;

      .metrics-overlay-content-wrapper {
        position: relative;
        display: block;
        height: 475px;
        width: 85%;
        margin: 5%;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 25px;
        padding: 2.5%;

        .metrics-overlay-title {
          display: block;
          height: 50px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        .metrics-overlay-content {
          width: 100%;
          height: 370px;
          overflow: auto;
          border: 1px solid #000;

          table {
            width: 100%;

            .header {
              background-color: #ddd;
            }
            th, td {
              padding: 10px;
            }
          }
        }

        .overflow-message {
          padding-top: 20px;
        }

        .download-csv {
          position: absolute;
          display: none;
          right: 2%;
          bottom: 2%;
        }

        .close-button {
          position: absolute;
          right: 1.5%;
          top: 2%;
          font-size: 2em;
        }
      }
    }

    .stacked-bar-graph-legend {
      fill: white;
    }

    p.loading {
      padding-top: 100px;
      text-align: center;
    }

    p.nothing {
      padding-top: 25px;
    }

    h3.attention {
      padding: 10px;
      border: 1px solid #999;
      border-radius: 5px;
      margin-top: 25px;
    }
  }
}


.profile-distribution-widget {
  margin-bottom: $baseline * 2;

  .display-text {}

  .display-graph .graph-placeholder {
    width: 750px;
    height: 250px;
  }

  .display-table {
    .slickgrid {
      height: 250px;
    }
  }
}

.grade-distributions-widget {
  margin-bottom: $baseline * 2;

  .last-updated {
    line-height: 2.2em;
    @include font-size(12);
  }

  .display-graph .graph-placeholder {
    width: 750px;
    height: 200px;
  }

  .display-text {
    line-height: 2em;
  }
}

input[name="subject"] {
  width:600px;
}
