.course-detail {
  border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(33, 37, 41, 0.25); }
  .course-detail .modal-body {
    padding: 30px 40px; }
    .course-detail .modal-body .close[aria-label="Close"] {
      padding: 0 !important; }
  .course-detail-leave {
    color: #e9452f;
    font-size: 18px;
    margin-bottom: 10px;
    display: none; }
  .course-detail-name {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: normal; }
    .course-detail-name span {
      font-size: 16px;
      color: #e9452f;
      margin: 10px;
      float: right; }
  .course-detail-type:before {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #246efc url("../../img/icons/online-white.svg") no-repeat center;
    background-size: 16px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: bottom; }
  .course-detail-btn {
    margin-top: 16px;
    flex-wrap: wrap;
    display: none; }
    .course-detail-btn .btn {
      margin-right: 12px;
      margin-bottom: 8px; }
  .course-detail-box {
    margin-top: 40px; }
  .course-detail-key {
    min-width: 100px;
    margin-right: 24px;
    vertical-align: text-top;
    white-space: nowrap; }
  .course-detail-value {
    padding-bottom: 20px; }
    .course-detail-value img {
      width: 24px;
      height: 24px;
      margin-right: 6px;
      vertical-align: middle;
      border-radius: 50%; }
  .course-detail-info {
    font-size: 14px;
    color: #979ca9;
    margin-top: 10px; }
  .course-detail-delete {
    margin-top: 10px;
    display: inline-block; }
    .course-detail-delete img {
      width: 24px;
      height: 24px;
      margin-right: 11px;
      vertical-align: bottom; }
    .course-detail-delete span {
      text-decoration: underline;
      cursor: pointer; }
  .course-detail-link {
    display: none;
    margin-top: 14px;
    color: #246efc; }
    .course-detail-link span {
      cursor: pointer;
      text-decoration: underline; }
    .course-detail-link .iconfont {
      font-size: 20px;
      margin-right: 10px;
      vertical-align: -2px; }
  .course-detail[typeCode='1'] .course-detail-header {
    color: #246efc; }
  .course-detail[typeCode='1'] .course-detail-type:before {
    background-image: url("../../img/icons/online-white.svg");
    background-color: #246efc; }
  .course-detail[lessonType='1'][typeCode='1'] .course-detail-delete, .course-detail[lessonType='1'][typeCode='1'] .course-detail-btn {
    display: block; }
  .course-detail[lessonType='1'][typeCode='1'] .course-detail-practice, .course-detail[lessonType='1'][typeCode='1'] .course-detail-info {
    display: none; }
  .course-detail[lessonType='2'][typeCode='1'] .course-detail-btn {
    display: flex; }
  .course-detail[lessonType='2'][typeCode='1'] .course-detail-link {
    display: inline-block; }
  .course-detail[typeCode='2'] .course-detail-header {
    color: #c67f04; }
  .course-detail[typeCode='2'] .course-detail-type:before {
    background-image: url("../../img/icons/school-white.svg");
    background-color: #c67f04; }
  .course-detail[typeCode='3'] .course-detail-header {
    color: #9d500d; }
  .course-detail[typeCode='3'] .course-detail-type:before {
    background-image: url("../../img/icons/outside-white.svg");
    background-color: #9d500d; }
  .course-detail[lessonStatus='5'] .course-detail-leave, .course-detail[lessonStatus='45'] .course-detail-leave, .course-detail[lessonStatus='6'] .course-detail-leave, .course-detail[lessonStatus='9'] .course-detail-leave {
    display: block; }
  .course-detail[lessonStatus='5'] .course-detail-header, .course-detail[lessonStatus='5'] .course-detail-box, .course-detail[lessonStatus='45'] .course-detail-header, .course-detail[lessonStatus='45'] .course-detail-box, .course-detail[lessonStatus='6'] .course-detail-header, .course-detail[lessonStatus='6'] .course-detail-box, .course-detail[lessonStatus='9'] .course-detail-header, .course-detail[lessonStatus='9'] .course-detail-box  {
    color: #999999; }
  .course-detail[lessonStatus='5'] .course-detail-type:before, .course-detail[lessonStatus='45'] .course-detail-type:before, .course-detail[lessonStatus='6'] .course-detail-type:before, .course-detail[lessonStatus='9'] .course-detail-type:before {
    background-color: #999999; }
  .course-detail[lessonStatus='5'] .course-detail-delete, .course-detail[lessonStatus='45'] .course-detail-delete, .course-detail[lessonStatus='6'] .course-detail-delete, .course-detail[lessonStatus='9'] .course-detail-delete {
    display: none !important; }