@charset "utf-8";

#my-course {
  .detail-layout {
    padding: 20px 30px;

    .tip {
      margin-bottom: 5px;
      padding: 15px 10px;
      line-height: 14px;
      background: #F3F3F3;

      .text {
        color: #686872;
        display: inline;
      }

      i {
        float: right;
        cursor: pointer;
        color: #D0D8E2;
      }
    }

    .tabs {
      border-bottom: 1px solid #ECEDEE;
    }

    .ing {
      .title {
        .tag {
          background: #A3CFFF;
        }
      }
    }

    .not {
      .title {
        margin-bottom: 20px;

        .tag {
          background: #B1B0FF;
        }
      }
    }

    .end {
      .title {
        margin-bottom: 20px;

        .tag {
          background: #D6DCE2;
        }
      }
    }

    .course-item {
      padding-top: 15px;
      margin-bottom: 20px;

      .title {
        margin-bottom: 10px;
        position: relative;

        .button {
          margin-left: 10px;
        }

        .tag {
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          line-height: 24px;
          padding: 0 10px;
          margin-right: 5px;
          display: inline-block;
          vertical-align: top;
          border-radius: 4px;
        }

        .text {
          display: inline-block;
          color: #303036;
          font-size: 20px;
          line-height: 24px;
        }

        .right {
          position: absolute;
          right: 0;
          top: 0;
        }
      }

      .continue {
        line-height: 14px;
        margin-bottom: 10px;

        .assets {
          vertical-align: top;
          margin-right: 10px;
        }
      }

      .detail {
        background: #FBFBFB;
        padding: 20px;
        display: flex;
        margin-bottom: 5px;

        .left {
          min-width: 280px;
          border-right: 1px solid #D8D8D8;

          .assets {
            width: 180px;
            height: 110px;
            background-color: #D8D8D8;
            margin-right: 10px;
            vertical-align: top;
          }

          .info {
            display: inline-block;

            .t1 {
              color: #686872;
            }

            .t2 {
              color: #303036;
              font-size: 16px;
              margin-bottom: 5px;
            }
          }
        }

        .right {
          flex: 1;
          padding-top: 30px;
          padding-left: 50px;

          .item {
            text-align: center;
            display: inline-block;
            padding: 0 25px;

            .assets {}

            .text {
              color: #303036;

              span {
                color: #4299FF;
              }
            }
          }
        }
      }
    }


    .education-item {
      padding-top: 15px;
      margin-bottom: 20px;

      .tabs {
        text-align: left;
        margin-bottom: 5px;
      }

      .title {
        margin-bottom: 10px;
        position: relative;

        .button {
          margin-left: 10px;
        }

        .tag {
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          line-height: 24px;
          padding: 0 10px;
          margin-right: 5px;
          display: inline-block;
          vertical-align: top;
          border-radius: 4px;
        }

        .text {
          display: inline-block;
          color: #303036;
          font-size: 20px;
          line-height: 24px;
        }


        .right {
          position: absolute;
          right: 0;
          top: 0;
        }
      }

      .continue {
        line-height: 14px;
        margin-bottom: 10px;

        .assets {
          vertical-align: top;
          margin-right: 10px;
        }
      }

      .detail {
        background: #FBFBFB;
        padding: 20px;
        display: flex;
        margin-bottom: 5px;
        position: relative;

        .open {
          position: absolute;
          right: 20px;
          top: 20px;
        }

        .left {
          min-width: 280px;
          border-right: 1px solid #D8D8D8;

          .assets {
            width: 180px;
            height: 110px;
            background-color: #D8D8D8;
            margin-right: 10px;
            vertical-align: top;
          }

          .item {
            display: inline-block;
            text-align: center;
            width: 120px;
            padding-top: 25px;

            .t1 {
              color: #686872;
            }

            .t2 {
              color: #303036;
              font-size: 16px;
              margin-bottom: 5px;
            }
          }

          .info {
            display: inline-block;

            .t1 {
              color: #686872;
            }

            .t2 {
              color: #303036;
              font-size: 16px;
              margin-bottom: 5px;
            }
          }
        }

        .right {
          flex: 1;
          padding-left: 50px;
          padding-top: 30px;

          .qr-code {
            margin-top: -15px;

            .assets {
              width: 80px;
              height: 80px;
            }

            .i {
              display: inline-block;
              padding-left: 10px;
              padding-top: 10px;

              .t1 {
                color: #303036;
                font-size: 16px;
              }

              .t2 {
                font-size: 12px;
                color: #686872;
              }
            }
          }


          .item {
            text-align: center;
            display: inline-block;
            padding: 0 25px;

            .assets {}

            .text {
              color: #303036;

              span {
                color: #4299FF;
              }
            }
          }
        }
      }

      .class-hour {
        .text {
          color: #303036;
          font-size: 16px;
          display: inline-block;
        }

        .right {
          float: right;

          span {
            color: #686872;
            margin: 0 5px;
            font-size: 12px;
          }
        }
      }

      .time-line {
        .time-line-item {

          padding: 13px 0;
          line-height: 24px;

          .icon-title {
            width: 100px;
            display: inline-block;
            vertical-align: top;

            .icon {
              width: 20px;
              height: 20px;
              margin-top: 2px;
              display: inline-block;
              margin-right: 5px;
              vertical-align: top;
            }

            .title {
              display: inline-block;
              color: #303036;
              margin: 0;
            }
          }

          .time-line-detail {
            display: inline-block;
            font-size: 12px;

            span {
              color: #686872;
              margin-right: 10px;
            }

            .link {
              color: #4299FF;
              border-bottom: 1px solid #4299FF;
              cursor: pointer;
            }

            .note-list {
              margin-top: 10px;
              background: #FBFBFB;
              width: 480px;
              padding: 20px;
              margin-left: -70px;
            }
          }
        }

        .time-line-item.not {

          .title {
            color: #A7A7B7;
          }

          .time-line-detail {
            color: #8D8D94;
          }
        }

        .time-line-item.end {
          .title {
            color: #A7A7B7;
          }

          .time-line-detail {
            color: #8D8D94;

            .link {
              color: #8D8D94;
              border-bottom: 1px solid #8D8D94;
              cursor: default;
            }
          }
        }
      }
    }
  }
}

.g-modal.clock-modal {
  .tag {
    width: 80px;
    display: inline-block;

    i {
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}