
.layout-full{
  @include padding(1em, 1em, 1em, 1em);
  background: $white;
}

.course-detail {
    @include margin(0px, 0px, 0px, 0px);
}

.container {
    .layout-header {
        img, h1 {
            @include float(left);
            @include padding(20px, 20px, 20px, 20px);
        }

        .layout-col {

            
        }
    }

    .layout, .layout-flush {
        @include margin-left(0);
        @include margin-right(0);
        max-width: 100%;
        @include padding(0,0,0,0);

        .layout-col-menu {
            @include margin-left(0);
            @include padding-left(0);
            @include padding-right(0);
            width: 12%;
        }

        .layout-col-container {
            @include padding(1em, 1.5em, 1em, 1.5em);
            @include margin-right(0);
            width: 88%;
        }

        .layout-col-container-dashboard{
          width: 88%;
          margin: 0;
        }

        .layout-col-a-custom {
            @include margin-left(3%);
            width: 37%;
        }

        .layout-col-b-custom {
            @include margin-right(0);
            width: 55%;
            background: $white;
            padding-top: 1em;
            padding-bottom: 1em;
            @include padding-right(2.5%);
            @include padding-left(2.5%);
        }
    }


    .wrapper-footer {
        @include margin(0px, 0px, 20px, 0px);
        @include padding(20px, 20px, 20px, 20px);
        position: relative;
        width: 100%;
        border-top: 1px solid #e5e5e5;

        .primary {
            max-width: 1280px;
            min-width: 900px;
            width: 100%;
            margin: 0 auto;
            color: #333;
            font-size: 0.75rem;

            .footer-content-primary {
                display: table;
                width: 100%;
                clear: both;

                .colophon {
                    @include float(left);
                    @include margin-right(14.28571%);
                    width: 31.91489%;
                }

                .nav-peripheral {
                    @include float(right);
                    @include text-align(right);
                    width: 48.93617%;

                    .nav-item {
                        @include margin-right(20px);
                        display: inline-block;
                    }
                }
            }

            .footer-content-secondary {
                margin-top: 20px;
                display: table;
                width: 100%;
                clear: both;

                .footer-about-copyright {
                    @include float(left);
                    @include margin-right(14.28571%);
                    width: 31.91489%;
                    display: inline-block;
                    vertical-align: middle;
                }

                .footer-about-openedx {
                    @include float(right);
                    @include text-align(right);
                    display: inline-block;
                    vertical-align: middle;

                    a {
                        display: inline-block;

                        img {
                            display: block;
                            width: 120px;
                        }
                    }
                }

            }
        }
    }
}

#app {
  background: #fff;
}

.alert-messages .alert {
    margin-bottom: 20px;

    .alert-message-with-action {
        width: 100%;
    }
}

.publisher-layout {
    @include padding(15px, 15px, 15px, 15px);
    background: rgb(242, 242, 242);
}

.layout {
  margin-bottom: 20px;

  .layout-title {
    font-size: 24px;
    font-weight: bold;
    width: 100%;
  }

  .course-form {
    @include margin(0px, 0px, 0px, 0px);
    box-shadow: none;
    width: 100%;
  }
  .input-checkbox{
    &.has-error{
      border-radius: 100%;
      box-shadow: 0px 1px 0px 2px red;
    }
  }
}

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

  button {
    @include margin-left(20px);
  }
}

.course-information {
  margin-bottom: 0px;

  input, select {
    margin-bottom: 15px;
  }

  .read-only-field {
    margin-bottom: 15px;
    display: block;
  }

  .hd-4 {
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(51, 51, 51);
  }

  .field-title {
    border: 0px solid #e2e2e2;
    border-bottom: 0px;
    padding: 18px 10px;
    margin-top: 36px;
    background: $gray-background;
    -webkit-box-shadow: 0 -8px 6px -6px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 -8px 6px -6px rgba(0,0,0,0.05);
    box-shadow: 0 -8px 6px -6px rgba(0,0,0,0.05);
  }
  .field-label {
      font-weight: bold;
  }
  .field-value {
    margin-bottom: 20px;
  }
  .help-text {
      p {
        margin-bottom: 0;
      }
  }
  .course-tabs{
    @include float(left);
    @include margin-right(10px);
    @include padding(10px, 10px, 10px, 10px);
    list-style: none;
    border-bottom: 3px solid $gray;
    color: $gray;
    cursor: pointer;
    text-align: center;

    &:hover{
      color: #337ab7;
      border-bottom: 3px solid #337ab7;
    }
  }
  .course-tabs.active{
    border-bottom: 3px solid #337ab7;
    color: #337ab7;
  }
  .content{
    display: none;
    p{
        @include margin(0px, 0px, 20px, 0px);
    }
  }
  .content.active{
    display: inline-block;
  }

  #number-example {
    p:first-of-type{
      margin-bottom: 0;
    }
  }

  .info-item {
    margin-bottom: 20px;

    .heading {
      font-weight: bold;
      font-size: 16px;

      .btn-copy {
        @include margin-left(10px);
        @include padding-left(5px);
        @include padding-right(5px);
        text-decoration: none;
        padding-top: 2px;
        padding-bottom: 2px;
      }
    }

    .pre{
      white-space: pre-line;
      }
  }

    textarea {
        width: 100%;
    }

  .form-group {
      @include margin(0, 0, 0, 0);
      max-width: 100%;

      .row {
          @include margin(0, 0, 0, 0);
          max-width: 100%;
          background: #fff;
          padding: 1em 2%;
      }
  }
}

.comments-container {
  width: 50%;
  @include float(left);
}



.btn-edit {
  @include float(right);
  @include margin-right(30px);
  @include padding-left(20px);
  @include padding-right(20px);
}




.copy-text {
  @include margin-left(5px);
}


.page-header {
  @include margin(0, 0, 20px, 0);
  padding-top: 10px;
  border-bottom: 1px solid #eeeeee;

  .hd-1 {
    @include margin(0, 0, 0, 0);
    color: black;
    font-weight: 600;
  }
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

.course-seat {
  margin-bottom: 20px;
}

.tab-content {
  display: none;

  &.active {
    display: block;
  }
}


.seat-set {
  margin-bottom: 20px;

  table {
    width: 100%;
  }
}
.status-information{
  margin-bottom: 15px;
  .heading {
    font-weight: bold;
    font-size: 16px;
  }
}


.empty-courserun-text {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}


.approval-widget, .course-widgets, .edit-history-widget {
  
    .btn-course-edit, .btn-courserun-edit, .btn-change-state, .btn-preview, .btn-save-preview-url, .btn-edit-preview-url {
        @include padding(2px, 20px, 3px, 20px);
        @include float(right);
        font-weight: 400;
        font-size: 14px;
        background: white;
        border-color: black;
        border-radius: 5px;

        &:hover, &:focus {
            border-color: #065683;
            background: #065683;
            color: #f2f8fb;
        }

        &:disabled {
            background: rgba(242, 242, 242, 1);
        }
    }

    .role-heading, .preview-heading {
        color: #999999;
    }

    .role-assignment-container, .preview-container {
        @include margin-right(5px);

        .state-status {
            @include float(right);
            margin-top: 10px;
            font-size: 12px;
        }

        .field-readonly {
            @include margin-right(10px);
        }

        .change-role-container {
            display: none;

            .select-users-by-role {
                @include margin-right(20px);
            }

            .btn-change-assignment {
                @include padding(2px, 10px, 3px, 10px);
                font-weight: 400;
                font-size: 14px;
                background: white;
                border-radius: 5px;

                &:hover, &:focus {
                    border-color: #065683;
                    background: #065683;
                    color: #f2f8fb;
                }
            }

        }
    }

    .btn-change-state, .btn-preview {
        @include padding(2px, 10px, 3px, 10px);
        margin-top: 15px;
    }

    .btn-preview-accept {
        @include margin-right(10px);
    }

    .ownership-label {
        font-size: 13px;
    }

}//approval-widget (END)

.edit-history-widget {
    position: relative;

    #btn_course_edit {
        @include right(4px);
        position: absolute;
        margin: 0 auto;
        top: 42px;
        font-weight: 600;
        font-size: 0.875rem;
        @include margin-right(50px);
    }
}



.course-count-heading {
    display: inline-block;
    font-weight: 700;
    font-size: 24px;
}

.course-runs-heading, .approvals-heading {
    display: inline-block;
}

#id_organization {
  width: auto;
}



.course-run-list {

    .layout-reversed.course-run-item {
        margin-bottom: 5px;
        font-size: 14px;

        .created-by {
            @include margin(0, 0, 0, 0);
            width: 25%;
            font-size: 12px;
        }

        .course-run-details {
            @include margin(0, 0, 0, 0);
            width: 75%;
        }
    }
}

.studio-url-heading {
    color: #999999;
    font-weight: 600;
}

.studio-link, .courserun-detail-link {
    text-decoration: underline;
}

.course-image-heading {
    margin-bottom: 10px;
}

.course-image {
    width: 480px;
    height: 250px;
}

.course-image-field {
    .clear-image {
        text-align: center;
        margin-top: 10px;
        width: 100%;
    }

    .course-image-thumbnail {
        width: 100%;
        height: 200px;
    }
}

.selected-instructor {
  display: inline-block;
  padding-top: 10px;
}

#id_staff {
  width: 500px;
}

.instructor-option {
  img {
    width: 80px;
    height: 80px;
  }
  td:nth-child(2) {
    @include padding-left(5px);
    @include padding-right(5px);
  }
}

.instructor {
  @include float(left);
  font-size: smaller;
  width: 125px;
  height: 130px;
  img {
    width: 80px;
    height: 80px;
  }
  div {
    text-align: center;
  }
  a.delete {
    color: red;
  }
  a.edit {
    color: #000000;
  }
}

.instructor-select {
  .select2-selection__choice, .select2-selection__clear{
    display: none;
  }
}

.parent-course-history {
  @include margin-left(15px);
  margin-top: 10px;
  font-family: 'Open Sans', sans-serif;
  display: inline-block;

  .title {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 10px;
  }

  .btn-show-changes {
    @include margin-left(60px);
    cursor: pointer;
    color: #ffffff;
    background-color: #169BD5;
    border-color: #169BD5;
    width: 120px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
  }

  .hr-line {
    @include float(left);
    width: 882px;
  }

  .changed-by {
    font-weight: 400;
    font-size: 20px;
  }

  .field-container {
    margin-bottom: 20px;

    .field-title {
      margin-bottom: 10px;
      font-size: 18px;
      font-weight: 600;
    }

    .object {
      display: none;
    }

    span {
      font-size: 14px;
      font-weight: 400;
    }
  }
}

.course-staff {
  display: inline-block;
  margin-top: 10px;

  img {
    @include float(left);
    @include margin-right(10px);
    width: 70px;
    height: 70px;
  }
  .staff-detail {
    @include float(left);
  }
  .name {
    color: #169BD5;
    margin-bottom: 5px;
  }
  .organization{
    font-weight: 600;
  }
}

.parent-course-approval {
  margin-bottom: 15px;
  background-color: #F2F2F2;
  padding: 20px;
}

.preview-container {
  #id-review-url {
    width: 360px;
  }
  .btn-save-preview-url {
    margin-top: 25px;
  }
  .preview-status {
    @include float(right);
    font-size: 12px;
  }
  .has-error{
      border-color: red;
    }
  .error-message {
    color: red;
  }
}

.published-status {
    @include text-align(center);
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
}

.download-image {
    text-align: center;
    margin-top: 10px;
    width: 100%;
}
.instructor-image {
  display: block;
  margin: 0 auto 15px;
  width: 120px;
  height: 120px;
}

.social-links {
  text-align: center;
  margin-top: 20px;

  .heading {

    &.icon {
      display: inline-block;
      width: 30%;

      > a {
        font-weight: bold;
        font-size: 1.1em;
        vertical-align: middle;
        color: #065683;
      }

      .btn {
        @include padding(5px, 5px, 5px, 5px);
        @include margin-left(6px);
      }
    }
  }
}

.new-staff {
  color: black;
  border: 1px #666666 solid;
  border-radius: 9px;
  font-size: 12px;
  padding: 4px;
  background-color: #F2F2F2;
}

.show-comparison-container {
  position: relative;

  .comparison-container {
    @include left(0);
    @include right(0);
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 0;
    bottom: 20px;
    width: 50%;
    padding: 40px;
    display: None;

    .close {
      @include right(25px);
      background: #f2f2f2;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 25px;
      line-height: 26px;
      text-align: center;
      color: #666;
      font-weight: bold;
      box-shadow: 0 0 4px rgba(0,0,0,.7);
      -webkit-transition: all 0.3 ease;
      -moz-transition: all 0.3 ease;
      -ms-transition: all 0.3 ease;
      -o-transition: all 0.3 ease;
      transition: all 0.3 ease;

      &:hover {
        color: #333;
        cursor: pointer;
        background: #ccc;
      }

      &:focus,
      &:active,
      &:hover {
        text-decoration: none;
      }
    }

    .show-comparison-data {
      background: #fff;
      padding: 15px;
      font-size: 14px;
      height: 100%;
      overflow: auto;
    }
  }
}
