

.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%;

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

        .layout-col-container {
            @include padding(20px, 20px, 20px, 20px);
            @include margin-right(0);
            width: 80%;
        }

        

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

        .layout-col-b-custom {
            @include margin-right(0);
            width: 50%;
        }
    }


    .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;
}

.publisher-layout {
  @include padding(15px, 15px, 15px, 15px);
  background: rgb(242, 242, 242);
  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: 30px;

  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-bottom: 1px solid rgb(51, 51, 51);
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .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 #ccc;
    color: #ccc;
    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;
      }
    }
  }

    textarea {
        width: 100%;
    }
}

.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 {
    @include padding(100px, 160px, 100px, 160px);

    p {
        @include padding(0px, 0px, 0px, 0px);
        @include margin(0px, 0px, 0px, 0px);
    }
}



.approval-widget, .course-widgets {
  
    .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);
    }

}//approval-widget (END)



.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 {
    color: red;
  }
}

.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;
  }
  .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;
}
