/////////////////// General

$content_padding_top: 24px;
$content-padding-bottom: 10px;
$header-height: 75px;
$footer-height: 125.5px;
body, h1, h2, h3, h4, h5, h6, p, label, button {
  font-family: $font-family-title !important;
}
html {
  background: transparent !important;
}
body, body.view-profile {
  min-height: initial;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: $dark;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: none;
}

.register-btn,
.sign-in-btn,
.search-button,
.learn-more,
.see-children a,
.add-article-btn,
.member-list-widget .add,
section.wiki .btn.btn-primary {

  &:focus,
  &:focus-visible {
    outline-offset: 3px;
  }
}

.page-content-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 15px;
  border: none;
}

:focus,
:focus-visible {
    outline-width: 2px;
}

%btn-pl-default-base {
  border-radius: 0;
}

.btn, .global-header .nav-links .secondary .btn {
  border-radius: 0;
}

%t-title {
  font-family: $font-family-title;
}

h1, h2, h3, h1 span, h2 span, h3 span, .nav-item {
  font-family: $font-family-title;
}

// It is necessary to specify `:not(.courseware) >` in order to not affect the style
// of `#content.content-wrapper` inside the unit iframe in the MFE
:not(.courseware) > #content.content-wrapper {
  @include media-breakpoint-up(lg) {
    padding-top: $content-padding-top;
    padding-bottom: $content-padding-bottom;
    margin-top: $header-height;
  }
  min-height: calc(100vh - #{$header-height + $content-padding-top + $content-padding-bottom + $footer-height}); // sticky footer
}

////////////////// Fonts
@import "fonts";

/////////////////// Register/Sign in header
header.global-header {
  @include media-breakpoint-up(lg) {
    position: fixed;
    top: 0;
    z-index: 200; // necessary to keep the header on top of other elements
    overflow: visible;  // fix for Safari
  }
  //background-color: #4c61bf;
  box-shadow: none;
}

header.global-header .nav-links .secondary .user-image-frame {
  border-radius: 0;
}

header.global-header .nav-links .secondary .dropdown-user-menu {
  position: fixed;
}

/////////////////// Sign in form

.login-register .form-field {
    // Hide "Sign in with your company or school link"
    button.enterprise-login {
        display: none;
    }
}

/////////////////// Home page
.home header {
  box-shadow: none;
  background-color: #fff;
}

.home > header .title {
  box-shadow: none;
}

.home > header .outer-wrapper {
  padding: 0;
}

.home > header .title > .heading-group {
  width: 100%;
  text-align: center;
}
.home > header .title > .heading-group h1 {
  text-align: center;
}

.animation-home-header-pop-up, .home > header .outer-wrapper {
  animation: none;
}

.highlighted-courses .courses, .find-courses .courses {
  padding-top: 0;
}

.home .courses-container .courses .courses-listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .courses-listing-item {
    margin: 0 20px 30px 20px;
    // Fix right margin
    &:nth-child(4n), &:last-child {
      margin-right: 20px;
    }
  }
}

////////////////// User dashboard /dashboard
.dashboard .main-container {
  padding: initial;
}

////////////////// "View this course as staff/learner/..."
nav.wrapper-preview-menu {
    // It is necessary to specify `nav` in order to override the common higher priority rule
    @include media-breakpoint-up(lg) {
      margin-top: $header-height;
    }
}

////////////////// Course about page
.course-info header.course-profile {
  background: #fff;
  box-shadow: none;
  border-bottom: none;

  .intro-inner-wrapper {
    border: none;
    box-shadow: none;
  }
}

.course-info {
  .container {
    padding-bottom: 0;
  }
  .details .inner-wrapper > section {
    margin-bottom: 0;
  }
  header.course-profile .intro-inner-wrapper .intro .main-cta {
    span.register {
      @extend %t-copy-base;
      padding: 10px 0;
    }
    strong {
      background-image: none;
      border-radius: 0;
      &:hover:not(:disabled) {
        background-image: none;
      }
    }
  }
}


/////////////////// Course search
.find-courses, .university-profile {
  background-color: #fff;
}

/////////////////// User profile
.view-profile .profile-self .wrapper-profile-field-account-privacy {
  margin-top: -$content-padding-top;
}
.view-profile .wrapper-profile {
  background-color: #fff;
}

.view-profile .wrapper-profile-section-container-one .wrapper-profile-section-one {
  border: solid $primary;
  border-width: 5px 1px 1px 1px;
}

// Account settings
.wrapper-account-settings .wrapper-header {
  height: 100px;
}
.wrapper-account-settings .wrapper-header .header-title {
  padding-top: 0;
}
.wrapper-account-settings .wrapper-header .account-nav button.active {
  border-bottom-color: $primary;
}

/////////////////// Footer
.wrapper-footer {
  box-shadow: none;
  padding: 25px 40px;

  .wrapper-logo {
      display: none;
  }
  .copyright {
      display: none;
  }
  .nav-legal ul {
      display: inline-block;
  }
  footer#footer-openedx .footer-about-openedx {
      a {
          float: none;
      }
      p {
          text-align: right;
      }
  }
}
.container, .main-container, .find-courses {
  max-width: 1600px;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 auto;
}
.window-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#lean_overlay {
  z-index: 250;
}
.modal {
  box-shadow: none;
  padding: 0;
  background: none;
  .inner-wrapper {
      padding: 15px;
      border-radius: 8px;
      border: none;
      @include media-breakpoint-up(sm) {
        padding: 24px;
      }
    }
}
.container {
  &.about{
    padding: 30px 0;
    font-size: 16px;
    line-height: 24px;
    color: #515661;
    h1 {
      font-size: 24px;
      font-weight: 700;
      line-height: 34px;
      margin: 0 0 12px;
      text-align: left;
      color: $dark;
    }
    p {
      margin: 0 0 20px;
    }
    a {
      color: $primary;
      text-decoration: underline;
    }
    .graphic-img {
      margin: 0 auto;
      max-width: 178px;
      padding: 30px 0;
      img {
         width: 100%;
         display: block;
         height: auto;
         &.dark {
          display: none;
         }
      }
    }
  }
}
.wrapper-course-material[aria-label="Course Material"] {
  margin: 0 auto;
  max-width: 1600px;
  padding: 20px 15px !important;

  .course-material {
    overflow: visible;
  }

  .tabs.course-tabs {
    margin: 0 0 10px;
    border-bottom: 1px solid $gray-light;
    padding: 0;
    li {
      margin: 0 32px 0 0;

      &.more {
        margin-right: 0;
      }

      button {
        border: 0;
        background: none;
      }

      a,
      button {
        border-width: 2px;
        font-size: 14px;
        font-weight: 500;
        color: $light-dark;
        &:hover, &:visited {
          color: $dark;
          border-color: transparent;
        }
        &.active {
          color: $dark;
          border-color: $primary;
        }
      }
    }
  }
}
body.view-statictab, body.view-instructordash, body.view-teams, body.view-wiki,
body.view-student-notes {
  #main {
    .container {
      padding: 0;
    }
    .static_tab_wrapper {
        border: none;
        max-width: 1600px;
        padding: 0 15px;
        margin: 0 auto;
        box-sizing: border-box;
        background: no-repeat;
    }
  }
  .container.about {
    color: $text-color-primary;
    h1 {
      color: $primary-d;
    }
    a {
      color: $primary-d;
    }
    .graphic-img {
      img {
        display: none;
        &.dark {
          display: block;
        }
      }
    }
  }

  .wrapper-member-select {
    background: $primary-light !important;
    select {
      background: none;
      color: dark;
    }
  }
  .member-list {
    .label {
      color: dark !important;
      background: $primary-light !important;
    }
  }
  .bottom-bar {
    background: $primary-light !important;
    input[type="button"] {
      background: $primary !important;
      border-color: $primary !important;
      color: white !important;
      text-shadow: none !important;
      font-size: 14px;
      font-weight: 500;
    }
  } 
}
body.view-teams {
  .container {
    max-width: 1600px !important;
    padding: 0 15px !important;
    margin: 0 auto;
    >div {
      border: none;
      background: none;
    }
  }
}
body.view-instructordash {
  .container {
    max-width: 1600px !important;
    padding: 0 15px !important;
    margin: 0 auto;
    >div {
      border: none;
      background: none;
    }
  }
  .instructor-dashboard-content-2 {
    padding: 0;

    .wrap-instructor-info {
      @include media-breakpoint-down(xs) {
        display: block;
        text-align: right;
      }
    }

    h2.instructor-dashboard-title {
      font-size: 24px;
      line-height: 30px;
    }
    a.instructor-info-action {
      background: $primary;
      color: white;
      margin: 0 0 10px;
      outline-offset: 3px;
      @include media-breakpoint-down(xs) {
        display: inline-block;
        float: none;
      }
    }
    .instructor-nav {
      display: flex;
      width: 100%;
      white-space: nowrap;
      border: 1px solid $gray-light;
      border-radius: 0;
      padding: 0 !important;

      li {

        button {
          border: none !important;
          border-radius: 0 !important;
          border-left: 1px solid $gray-light !important;
          font-size: 14px;
          line-height: 20px;
          font-weight: 500;
          padding: 9px 17px;
          color: #374151;
          text-decoration: none !important;
          outline-offset: 3px;
          &.active-section {
            background: $primary !important;
            color: white !important;
          }
          &:hover {
            color: $dark;
          }
          &:focus {
            position: relative;
            z-index: 1;
          }
        }

        &:first-of-type {
          button {
            border: none;
            border-radius: 6px 0 0 6px;
          }
        }

        &:last-of-type {
          button {
            border-radius: 0 6px 6px 0;
          }
        }
      }

      .more-responsive-menu {
        button {
          display: block;
          width: 100%;
        }
      }
    }
    .enrollment-wrapper {
      margin: 0;
      table {
        width: 100%;
        th, td {
          padding: 10px;
          width: 50%;
          font-size: 16px;
          line-height: 28px;
          font-weight: 400;
          color: #111827;
        }
        .total {
          border-top: 1px solid $gray-light;
          th, td {
            color: $primary;
            font-weight: 700;
          }
        }
      }
    }
    #course_info > h4 {
      background: $primary-light;
      padding: 15px 0 0 15px;
      font-size: 18px;
      color: $dark;
      font-weight: 600;
      margin-bottom: 0;
    }
    #course_info > .enrollment-wrapper {
      padding-top: 0 !important;
      .tip {
        text-align: left;
        font-size: 14px;
        font-weight: normal;
        color: $light-dark;
        margin-bottom: 10px;
      }
    }
    #course_info  .enrollment-wrapper, .basic-wrapper, .course-errors-wrapper, .running-tasks-container {
      background: $primary-light;
      padding: 15px;
      margin: 0 0 30px;
      h4 {
        font-size: 18px;
        color: $dark;
        font-weight: 600;
        span  {
          font-size: 14px;
          font-weight: normal;
          color: $light-dark;
        }
      }
    }
    .list-input {
      list-style: none;
      padding: 0;
      li {
        display: flex;
        font-size: 16px;
        line-height: 28px;
        label, b {
          font-weight: normal;
          font-style: normal;
          font-size: 16px;
          padding: 10px;
          line-height: 28px;
          margin: 0;
          width: 50%;
          color:#111827;
        }
      }
    }
  }
  .enrollment-button, input[type=button], button.btn {
    background: $primary;
    border-color: $primary;
    color: white;
    font-weight: 500;
    font-size: 14px;
    box-shadow: none;
  }
}
.course-wrapper .course-content .xblock.xblock-student_view-vertical,
.course-wrapper .course-content .xblock.xblock-public_view-vertical,
.course-wrapper .courseware-results-wrapper .xblock.xblock-student_view-vertical,
.course-wrapper .courseware-results-wrapper .xblock.xblock-public_view-vertical {
  max-width: 100% !important;
}
body.view-wiki{
   .container{
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    >div {
      background: none;
      box-shadow: none;
      border: none;
    }
    #alert_stat_bar {
      .paragon__alert-warning {
        color: $dark;
        background: $primary-light;
        border: none;
        button.paragon__close {
          background: none !important;
          box-shadow: none !important;
          color: $dark !important;
          opacity: 1 !important;
          font-size: 1.2rem;
          border: none !important;
        }
      }
    }
    section.wiki {
      .diff-container table {
        tr.insert td {
          background: $success-d;
          color: $text-color-d;
        }
        tr.delete td {
          background: $danger-d;
          color: $text-color-d;
        }
      }
      .table.table-striped {
        tr:nth-child(2n) {
          background: $primary-light;
        }
        td {
          a {
            color: $primary !important;
          }
        }
      }
      .directory-toolbar {
        background: $primary-light;
        a.btn {
          background: $primary !important;
          border-color: $primary !important;
          box-shadow: none !important;
          color: white !important;
          text-shadow: none;
        }
      }
    }
    .wiki-wrapper section.wiki .btn.btn-large, .wiki-wrapper section.wiki .btn.btn-danger {
      background: none;
      color: $dark !important;
      border-color: $dark !important;
      text-shadow: none !important;
      box-shadow: none !important;
      &:hover {
        background: none !important;
        color: $dark !important;
        border-color: $dark !important;
      }
    }
    .wiki-wrapper section.wiki .btn.btn-primary, .wiki-wrapper section.wiki .btn.btn-brand {
      background: $primary!important;
      border-color: $primary !important;
      color: white !important;
      box-shadow: none;
      &:hover {
        background: $primary!important;
        border-color: $primary !important;
        color: white !important;
      }
    }
    .wiki {
      .breadcrumbs-header {
        padding: 15px;
        background: $primary-light;
        border-radius: 8px;
        border: none;
        height: auto;
        overflow: hidden;
        margin: 0 0 30px;
        .global-functions {
          margin: 0 0 0 10px;
          a.add-article-btn {
            margin: 0;
            background: $primary;
            color: white;
            font-size: 14px;
            font-weight: 500;
            box-shadow: none;
            border: none;
            padding: 5px 15px !important;
            line-height: 28px;
            text-shadow: none;
          }
        }
        .breadcrumb {
          margin: 0;
          li {
            &:after {
              color: #6B7280;
            }
            a {
              font-size: 14px;
              font-weight: 500;
              color: #6B7280;
            }
          }
        }
      }
      .new-article {
        padding: 10px 0;
      }
    }
    .page-header, h1 {
      border-bottom: none;
      font-size: 20px;
      padding: 0;
      margin: 0 0 10px;
    }
    .article-wrapper {
      border: 1px solid #F2F7F8;
      border-radius: 8px;
      padding: 15px;
      &:after {
        display: block;
        clear: both;
        content: "";
      }
      .main-article {
        padding: 0;
        width: calc(100% - 240px - 40px);
        margin: 0 40px 0 0;
        font-size: 14px;
        line-height: 28px;
        p {
          margin: 0 0 15px;
        }
        h3.entry-title {
          margin: 0 0 15px;
          font-size: 18px;
          line-height: 28px;
          font-weight: 600;
          border: none;
          padding: 0;
        }
      }
      .article-functions {
        padding: 0;
        width: 240px;
        .nav-tabs {
          li {
            margin: 0 0 1px;
            a {
              font-size: 14px;
              line-height: 28px;
              font-weight: 500;
              color: $primary;
              padding: 6px 10px;
              &:hover {
                text-decoration: none;
                font-weight: 500;
                border: none;
                background: $primary-light;
              }
              .icon {
                font-size: 18px;
                line-height: 28px;
                color: #82919B;
                margin: 0;
              }
            }
            &.active {
              a {
                border: none;
                color: $primary;
                background: $primary-light;
              }
            }
          }
        }
        .timestamp {
          border: 1px solid $gray-light;
          border-radius: 8px;
          border-left: 6px solid $primary-light;
          padding: 15px;
          .label {
            font-weight: 500;
            font-size: 12px;
            color: #4B5563;
          }
          .date {
            font-weight: 500;
            font-size: 14px;
            color: #4B5563;
          }
        }
        .see-children {
          border: none;
          a {
            background: $primary;
            padding: 6px 15px;
            text-align: center;
            color: white;
            font-size: 14px;
            font-weight: 500;
            border-radius: 6px;
            &:hover, &:focus {
              font-weight: 500;
              color: white;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

body {
  .slick-header-column.ui-state-default {
    height: auto;
  }
  .instructor-dashboard-wrapper-2 {
    section.idash-section {
      line-height: 1.3;

      &#membership .batch-beta-testers .request-res-section h3 {
        color: $text-color-d;
      }
      &#student_admin input[type="text"] {
        width: 100%;
        max-width: 650px;
      }
      &#extensions {
        select {
          height: 35px;
          border-color: $instructor-input-border-color;

          @include media-breakpoint-down(xs) {
            display: block;
            width: 100%;
          }

          @include media-breakpoint-down(md) {
            margin-bottom: 10px;
          }
        }

        input[type="text"] {
          width: 100%;

          + input {
            @include media-breakpoint-down(xs) {
              margin-top: 10px;
            }
          }

          @include media-breakpoint-up(sm) {
            max-width: 235px;
          }
          @include media-breakpoint-up(md) {
            max-width: 300px;
          }
        }
      }
    }
    .location-example {
      word-wrap: break-word;
    }
  }
  section.idash-section {
    .message-warning {
      background: $warning-accent-700;
      border-color: $warning-700;

      .message-title {
        color: $warning-700;
      }
    }
  }
}

// Textbook Page
body div.book-wrapper{
  margin: 0 auto;
  max-width: 1600px;
}

body.indigo-dark-theme {
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active{
      -webkit-text-fill-color: $text-color-d;
  }
  input::placeholder {
      opacity: .9;
      color: $text-color-d;
    }
    textarea, form#wiki_revision .CodeMirror, input[type="text"], input[type="email"], input[type="password"] {
      background: transparent;
      color: white;
    }
  * {
    accent-color: $primary-d;
    scrollbar-color: $text-color-d $body-bg-d;
  }
  .find-courses, .university-profile {
    background-color: $body-bg-d;
  }
  .ui-state-default,
  .ui-widget-content
  .ui-state-default,
  .ui-widget-header
  .ui-state-default {
    background: $primary-light-d;
    color: $text-color-d;
  }
  .idash-section .no-pending-tasks-message p {
    color: $text-color-d;
  }
  .wrapper-course-material {
    .tabs.course-tabs {
      border-bottom: 1px solid $primary-light-d;
      li {
        a {
          color: $text-color-d;
          &:hover, &:visited {
            color: $text-color-primary;
            border-color: transparent;
          }
          &.active {
            color: $text-color-d;
            border-color: $text-color-d;
          }
        }
      }
    }
  }
  &.view-statictab, &.view-instructordash, &.view-teams, &.view-wiki,
  &.view-student-notes {
    .window-wrap {
      background: none;
    }
    #email-students-beta-tip {
      color: #111827;
    }

    .instructor-dashboard-content-2 {
      a.instructor-info-action {
        background: $primary-d;
        color: $btn-color-d;
      }
      .request-response-error {
        color: $danger-d;
      }
      .ui-widget-content {
        background: none;
        color: $text-color-d;
        border: 1px solid $primary-light-d;
      }
      .ui-accordion-header {
        background: $primary-d;
        color: $btn-color-d;
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .ecommerce-wrapper span.tip,
      .proctoring-wrapper span.tip {
        background: $primary-light-d;
        color: $text-color-d;
        border: none;
        a.blue-button {
          background: $primary-d;
          border-color: $primary-d;
          color: $btn-color-d !important;
          text-shadow: none;
          box-shadow: none;
          font-weight: 500;
        }
      }
      .enrollment-button, input[type=button], button.btn {
        background: $primary-d;
        border-color: $primary-d;
        color: $btn-color-d !important;
        text-shadow: none;
        box-shadow: none !important;
      }
      .instructor-nav {
        border: 1px solid $gray-light;
        li {
          &:first-child {
            button {
              border: none;
            }
          }
          button {
            border: none !important;
            border-radius: 0 !important;
            border-left: 1px solid $gray-light !important;
            color: $text-color-primary;
            &.active-section {
              background: $primary-d !important;
              color: $btn-color-d !important;
            }
            &:hover {
              color: $text-color-d;
            }
            &:focus {
              box-shadow: inset 0 0 0 2px #E5E7EB !important;
            }
          }
        }
      }
      .enrollment-wrapper {
        table {
          th, td {
            color: $text-color-d;
          }
          .total {
            border-top: 1px solid $gray-light;
            th, td {
              color: $primary-d;
            }
          }
        }
      }
      #course_info > h4 {
        background: $primary-light-d;
        color: $text-color-d;
      }
      #course_info  .enrollment-wrapper { 
        padding-top: 0;
        .tip {
          color: $text-color-primary;
        }
      }
      #course_info  .enrollment-wrapper, .basic-wrapper, .course-errors-wrapper, .running-tasks-container {
        background: $primary-light-d;
        h4 {
          color: $text-color-d;
          span  {
            color: $text-color-primary;
          }
        }
      }
      .list-input {
        li {
          label, b {
            color: $text-color-d;
          }
        }
      }
      .open-response-assessment-block .open-response-assessment-main-table {
        th {
          background: $primary-light-d;
          color: $text-color-d !important;
          button {
            text-shadow: none !important;
            color: $text-color-d !important;
          }
        }
        tbody tr:nth-child(odd) {
          background: $primary-light-d;
          color: $text-color-d !important;
        }
      }
    }
  }
  &.view-wiki{
    .CodeMirror-scroll {
      background: $body-bg-d;
      * {
        color: $text-color-d !important;
      }
    }
    #previewModal {
      .inner-wrapper {
        background: $primary-light-d;
        iframe {
          background: #fafafa;
        }
        .close-modal {
          color: $text-color-d;
        }
        h1 {
          color: $text-color-d;
        }
        header h2 {
          color: $text-color-d;
          text-shadow: none;
        }
      }
    }
    .wiki-wrapper {
      .alert.denied, .alert.alert-error {
        color: $text-color-d;
        background: $primary-light-d;
        border: none;
      }
      section.wiki .main-article .alert {
        color: $text-color-d;
        background: $primary-light-d;
        border: none;
      }
      label {
        color: $text-color-d !important;
          section.wiki .main-article {
            color: $text-color-d;
          }
      }
      #alert_stat_bar {
        .paragon__alert-warning {
          color: $text-color-d;
          background: $primary-light-d;
          border: none;
          button.paragon__close {
            background: none !important;
            box-shadow: none !important;
            color: $text-color-d !important;
            opacity: 1 !important;
            font-size: 1.2rem;
          }
        }
      }
      section.wiki {
        .diff-container table {
          tr.insert td {
            background: $success-d;
            color: $text-color-d;
          }
          tr.delete td {
            background: $danger-d;
            color: $text-color-d;
          }
        }
        .table.table-striped {
          tr:nth-child(2n) {
            background: $primary-light-d;
          }
          td {
            a {
              color: $primary-d !important;
            }
          }
        }
        .directory-toolbar {
          background: $primary-light-d;
          a.btn {
            background: $primary-d !important;
            border-color: $primary-d !important;
            box-shadow: none !important;
            color: $btn-color-d !important;
            text-shadow: none;
          }
          .filter-clear {
            a {
              color: $primary-d !important;
            }
          }
        }
      }
      #cheatsheet-body {
        background: $primary-light-d;
        color: $text-color-d;
        pre {
          background: $body-bg-d;
          color: $text-color-d;
        }
      }
      #cheatsheetModal {
        .inner-wrapper {
          background: $primary-light-d;
          box-shadow: none;
          button.close-modal {
            color: $text-color-d !important;
          }
        }
      }
    }
    .wiki-wrapper section.wiki .btn.btn-large, .wiki-wrapper section.wiki .btn.btn-danger {
      background: none;
      color: $text-color-d !important;
      border-color: $text-color-d !important;
      text-shadow: none !important;
      box-shadow: none !important;
      &:hover {
        background: none !important;
        color: $text-color-d !important;
        border-color: $text-color-d !important;
      }
    }
    .wiki-wrapper section.wiki .btn.btn-primary, .wiki-wrapper section.wiki .btn.btn-brand {
      background: $primary-d !important;
      border-color: $primary-d !important;
      color: $btn-color-d !important;
      text-shadow: none !important;
      box-shadow: none;
      &:hover {
        background: $primary-d !important;
        border-color: $primary-d !important;
        color: $btn-color-d !important;
      }
    }
    .wiki-wrapper section.wiki.history .accordion {
      background: $primary-light-d;
      border: none;
      small {
        color: $text-color-d;
      }
    } 
    .container{
     .wiki {
       .breadcrumbs-header {
         background: $primary-light-d;
         .global-functions {
           a.add-article-btn {
             background: $primary-d !important;
             color: $btn-color-d !important;
           }
         }
         .breadcrumb {
           li {
             &:after {
               color: $text-color-primary;
             }
             a {
               color: $text-color-primary;
             }
           }
         }
       }
       .main-article {
        color: $text-color-d
       }
     }
     .article-wrapper {
       border: 1px solid $primary-light-d;
       .main-article {
          color: $text-color-d !important;
         p {
           color: $text-color-d;
         }
         h3.entry-title {
          color: $text-color-d;
         }
       }
       .article-functions {
         .nav-tabs {
           li {
             a {
               color: $primary-d;
               &:hover {
                 background: $primary-light-d;
                 color: $text-color-d;
               }
               .icon {
                 color: $text-color-primary;
               }
             }
             &.active {
               a {
                 background: $primary-light-d;
                 color: $text-color-d;
               }
             }
           }
         }
         .timestamp {
           border: 1px solid $primary-light-d;
           border-left: 6px solid $primary-light-d;
           .label {
             color: $text-color-d;
           }
           .date {
             color: $text-color-d;
           }
         }
         .see-children {
           a {
             background: $primary-d;
             color: $btn-color-d;
             &:hover, &:focus {
               color: $btn-color-d;
             }
           }
         }
       }
     }
   }
 }
  .container.about {
    color: $text-color-primary;
    h1 {
      color: $primary-d;
    }
    a {
      color: $primary-d;
    }
    .graphic-img {
      img {
        display: none;
        &.dark {
          display: block;
        }
      }
    }
  }
  .modal {
    background: $primary-light-d !important;
    .modal-header {
      color: $text-color-d !important
    }
    select, textarea {
      background: transparent;
      color: white;
    }
    input[type=submit] {
      background: $primary-d;
      border-color: $primary-d;
      color: $btn-color-d !important;
      text-shadow: none;
      font-size: 14px;
      font-weight: 500;
    }
  }
  .wrapper-member-select {
    background: $primary-light-d !important;
    select {
      background: none;
      color: $text-color-d;
    }
  }
  .auth-list-container .info {
    color: $text-color-d !important
  }
  .instructor-dashboard-wrapper-2 {
    section.idash-section#membership .batch-beta-testers .request-res-section h3 {
      color: $text-color-d;
    }
    .msg-error {
      background: $primary-light-d !important;
      border-color: $danger-d !important;
      color: $danger-d  !important;
    }
    .msg-confirm {
      background: $primary-light-d;
      border-top: 2px solid $success-d;
      color: $success-d;
    }
    .copy-error {
      color: $danger-d;
    }
    .message-warning {
        background: $primary-light-d;
        border-color: $danger-d;
        .message-title {
          color: $danger-d;
        }
      .message-copy {
        color: $text-color-d;
      }
    }
    .message-error{
        background: $primary-light-d;
        border-color: $danger-d;
        .message-title {
          color: $danger-d;
        }
      .message-copy {
        color: $text-color-d;
      }
    }
    .idash-section .message-confirmation {
      background: $body-bg-d;
      border-color: $success-d;
      .message-title { 
        color: $success-d;
      }
    }
    section.idash-section#cohort_management .cohort-management-settings .cohort-management-details .cohort-management-settings {
      background: transparent;
    }
    section.idash-section#cohort_management .cohort-management-group-header {
      background: $primary-light-d;
    }
    section.idash-section#cohort_management .cohort-management-group-setup  {
      color: $text-color-d;
    }
    section.idash-section#cohort_management .cohort-management-settings .cohort-management-details,
    section.idash-section#cohort_management .cohort-management-settings .cohort-management-group-add {
      background: $primary-light-d;
    }
    section.idash-section#cohort_management .wrapper-tabs .tab .toggle-button {
      text-shadow: none;
      color: $text-color-d;
    }
    section.idash-section#cohort_management .wrapper-tabs .tab.is-selected .toggle-button {
      background: $primary-d;
      border-color: $primary-d;
      color: $btn-color-d;
      text-decoration: none;
    }
    section.idash-section#cohort_management .cohort-management-settings .form-submit,
    section.idash-section#cohort_management .cohort-management-nav .action-create,
    section.idash-section#cohort_management .file-upload-form .action-submit {
      background: $primary-d !important;
      border-color: $primary-d !important;
      color: $btn-color-d !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }
    section.idash-section#cohort_management .cohort-management-supplemental {
      background: $primary-light-d;
      button {
        color: $text-color-d;
        text-decoration: underline;
      }
    }
    section.idash-section#cohort_management .file-upload-form .form-fields .input-file {
      color: $text-color-d;
    }
    section.idash-section#cohort_management .toggle-cohort-management-secondary,
    section.idash-section#cohort_management .toggle-cohort-management-discussions {
      color: $primary-d;
    }
    section.idash-section#cohort_management .cohort-management-settings, section.idash-section#cohort_management .cohort-management-settings .form-title {
      background: $primary-light-d;
    }
    section.idash-section#data_download .problem-browser .block-browser {
      background: $primary-light-d;
    }
    section.idash-section#membership .batch-enrollment .request-res-section h3 {
      color: $danger-d;
    }
    section.idash-section#membership .enroll-option .hint, section.idash-section#membership .enroll-option .hint {
      background: $primary-light-d;
      p {
        color: inherit !important;
      }
      .hint-caret {
        border-right: 8px solid $primary-light-d;
        border-top: 8px solid $primary-light-d;
      }
    }
  }
  .member-list {
    .label {
      color: $text-color-d !important;
      background: $primary-light-d !important;
    }
  }
  .bottom-bar {
    background: $primary-light-d !important;
    input[type="button"] {
      background: $primary-d !important;
      border-color: $primary-d !important;
      color: $btn-color-d !important;
      text-shadow: none !important;
      font-size: 14px;
      font-weight: 500;
    }
  } 
  &.view-teams {
    .page-header {
      .page-title {
        color: $text-color-primary;
      }
      .page-description {
        color: $text-color-d;
      }
    }
    .page-content-nav .nav-item {
      color: $text-color-d;
      &.is-active{ border-color: $primary-d; }
    }
    .page-content-main {
      span.listing-count, span.listing-sort .field-label {
        color: $text-color-d;
      }
    }

    ul.topics-list li.topic-card{
      background-color: $body-bg-d;

      div.wrapper-card-meta {
        background-color: $body-bg-d;
      }

    }

    ul.cards-list li.list-card {
      background-color: $body-bg-d;

      div.wrapper-card-meta {
        background-color: $body-bg-d;
      }
    }

    .teams-content .teams-main .team-edit-fields {
      .team-required-fields .u-field-title, .team-optional-fields .u-field-title{
        color: $text-color-d;
      }
    }

    .listing-tools{ color: $text-color-d; }
    .u-field-message {
      .u-field-message-help, .u-field-message-notification{
        color: grey;
      }
    }
    .team-profile{
      .page-content-secondary{
        color: grey;
      }
    } 

    .card {
      .card-type, .card-description{
        color: grey;
      }

      .wrapper-card-meta{
        background: $primary-light-d;
        .meta-detail{ color: $text-color-primary; }
      } 
      
      .card-actions .action-view{
        border-color: $primary-d;
        color: $primary-d;
        &:hover{
          background-color: $primary-d;
          color: $primary-light-d;
        }
      }
    }

    .btn-secondary,.btn-link,
    .edit-members .action-remove-member {
      color: $primary-d;
    }

    .action-primary{
      background: $primary-d;
      color: $primary-light-d;
    }

    .teams-content #teams-message.wrapper-msg{
      background: $primary-light-d;
      div.msg{ color: $text-color-d; }
    }
  }

  // Textbook Page
  .book-wrapper{
      .book-sidebar{
          background: $primary-light-d;
          #booknav a{
              color: $text-color-d;
              &:hover{
                  color: $text-color-primary;
              }
          }
      }
  }

  // Notes Page
  &.view-student-notes{
    .wrapper-student-notes{
      background: $body-bg-d;
    }

    .wrapper-title .page-title .page-subtitle{
      color: $text-color-d;
    }

    .wrapper-tabs .tab-list{
      .tab .tab-label{
        color: lightgrey;
      }

      .tab.is-active{ 
        .tab-label{
          color: $text-color-d;
          border-bottom-color: $text-color-primary;
        }
      }

      #view-search-results .action-close{
        color: $primary-d;
        background: $body-bg-d;
        border-color: transparent;
        box-shadow: none;
      }
    } 

    .listing-tools{ color: lightgrey; }

    .placeholder{ 
      border-color: $primary-d; 
      background: $primary-light-d;

      .placeholder-title{ color: $text-color-d; }
    }

    .wrapper-notes-search{
      .search-notes-input{
        background: $primary-light-d;
        color: $text-color-d;
        border: 1px solid grey;
      }
      .search-notes-submit{
        background: $primary-d;
        border-color: $primary-d;
      }
    }

    .ui-loading{
      border-color: $primary-d;
      background: $body-bg-d;
    }

    .tab-panel.note-group{
      .note{
        .wrapper-note-excerpts{
          border-color: orange;
          .note-excerpt{
            background: orange;
            color: $body-bg-d;
          }

          .note-comments .note-comment-p{ color: $text-color-d; }
        }
        &:hover{ 
          .note-excerpt{
            background: $danger-d;
          }
        }

        footer.reference .wrapper-reference-content{
          a.reference-meta{
            color: $primary-d; 
          }
          .reference-meta{ 
            color: $text-color-d; 
            &::after{ color: $text-color-primary; }
          }
        }
      }
    }
  }
}
#data_download {

  .profile-data-display-table {
    overflow-x: auto;
  }

  .slick-cell {
    padding: 3px;
    height: 30px;

    &.active {
      box-shadow: inset 0 0 0 2px $primary;

      .indigo-dark-theme & {
        box-shadow: inset 0 0 0 2px $primary-d;
      }
    }

    a {
      display: inline-block;
      padding: 0 5px;
    }
  }
}

.open-response-assessment-block {
  .open-response-assessment-main-table {
    th {
      button {
        &:focus {
          outline: revert
        }
      }
    }
  }
}

@import '../../../extra/footer';
@import '../../../extra/header';
@import '../../../dashboard/dashboard';
@import '../../../courseware/discover';
@import '../../../courseware/about';
@import '../../../courseware/bookmarks';
@import '../../../home/home';
@import '../../../programs/programs';
@import '../../../certificates/certificate';
@import '../../../xblock/xblock';
@import '../../../views/teams';
@import '../../../views/wiki';
@import '../../../courseware/responsive-nav';
