.self-paced-main-div {
  padding: 20px;
  background: #fafafa;
  box-sizing: border-box;

  .header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;

    .self-paced-title-div {
      display: flex;
      align-items: center;
      width: 50%;

      .back-arrow {
        display: flex;
        width: 17px;
        margin-right: 25px;
        cursor: pointer;
        svg {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      h2 {
        color: #d7779b;
        margin: 0;
        width: calc(100% - 50px);
        display: flex;
        align-items: center;

        .user-image {
          width: 30px;
          margin-right: 14px;

          img {
            display: block;
            width: 100%;
          }
        }

        .student-name {
        }
      }
    }

    .filter-search {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 40%;

      .filter-by-select {
        margin-right: 25px;

        label {
          color: #000000;
          margin-right: 17px;
        }

        select {
          background: #fff;
          color: #000000;
          padding: 10px 40px 10px 10px;
          border: 1px solid #000000;
          border-radius: 5px;
          min-width: 290px;

          option {
            color: #000000;
          }
        }
      }
    }
  }

  .main-div {
    display: flex;
    min-height: 50px;

    .study-progress-main-div {
      width: 70%;
      margin-right: 15px;

      .mentor-contact-div {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;

        .mentor-select {
          margin-bottom: 20px;
          width: 49%;
          position: relative;

          label {
            color: #9d96d6;
            display: block;
            font-size: 15px;
            padding-bottom: 3px;
          }

          select {
            background: #fff;
            color: #000000;
            padding: 10px 40px 10px 10px;
            border: 1px solid #000000;
            border-radius: 6px;
            min-width: 100%;

            option {
              color: #000000;
            }
          }

          textarea {
            padding: 15px 150px 15px 15px;
            box-sizing: border-box;
            border-radius: 6px;
            background: #fff;
            border: 1px solid #000000;
            color: #000000;
            max-width: 100%;
            min-width: 100%;
            resize: none;
          }

          .save-note-btn {
            // background: linear-gradient(47deg, #ee4c7e 0%, #ee8250 100%);
            background: #DF166A;
            border: none;
            padding: 13px 20px;
            // border-radius: 30px;
            color: #fff;
            letter-spacing: 0.5px;
            cursor: pointer;
            min-width: 125px;
            margin: 5px;
            position: absolute;
            right: 9px;
            top: 42%;
            transform: translate(0px, -50%);
          }
        }
      }

      .note-section {
        background: #fff;
        margin-bottom: 30px;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: -10px;
          left: 18px;
          width: 20px;
          height: 20px;
          background: #141a3f;
          transform: rotate(45deg);
          z-index: 0;
        }

        .note-section-scroll {
          max-height: 250px;
          overflow: auto;
          position: relative;

          .note-div {
            border-bottom: 1px solid #181f44;
            padding: 20px;

            &:last-child {
              border-bottom: none;
            }

            p {
              color: #726fa5;

              .mentor {
                color: #cd7297;
              }

              .date {
                color: #9d97d6;
              }
            }
          }
        }
      }
    }

    .study-progress {
      width: 100%;
      border: 1px solid #21275f;
      height: calc(100vh - 88px);
      overflow: auto;

      .div-head {
        display: flex;
        border-bottom: 1px solid #97979742;

        span {
          padding: 10px;
          font-size: 16px;
          color: #d7779b;
          font-weight: 500;
          width: 95%;
        }

        .bg-span {
          width: 4%;
          background: #25305f63;
          padding: 0;
        }
      }

      .div-body {
        &::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        /* Track */
        &::-webkit-scrollbar-track {
          border-radius: 10px;
        }

        /* Handle */
        &::-webkit-scrollbar-thumb {
          background: #adb3fd7a;
          border-radius: 10px;
        }

        .assessments {
          display: flex;

          .assessments-title {
            width: 4%;
            background: #25305f63;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              transform: translate(0%, 0px) rotate(-90deg);
              display: block;
              text-align: center;
              color: #d7779b;
              white-space: nowrap;
              font-weight: 500;
            }
          }

          .assessments-body {
            width: 96%;
          }
        }

        .flashcards {
          display: flex;

          .assessments-title {
            width: 4%;
            background: #25305f63;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              transform: translate(0%, 0px) rotate(-90deg);
              display: block;
              text-align: center;
              color: #d7779b;
              white-space: nowrap;
              font-weight: 500;
            }
          }

          .assessments-body {
            width: 96%;

            .exam-detail {
              border-bottom: none;

              .student-names {
                &.border-btm-active {
                  border-bottom: 1px solid #21275f;
                }

                .ranks {
                  border-bottom: 1px solid #21275f;
                }
              }
            }

            .practice-date {
              position: relative;
              top: -16px;
            }
          }
        }

        .practice {
          display: flex;

          .assessments-title {
            width: 4%;
            background: #25305f63;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              transform: translate(0%, 0px) rotate(-90deg);
              display: block;
              text-align: center;
              color: #d7779b;
              white-space: nowrap;
              width: 106px;
              font-weight: 500;
            }
          }

          .assessments-body {
            width: 96%;

            .exam-detail {
              border-bottom: none;

              .student-names {
                &.border-btm-active {
                  border-bottom: 1px solid #21275f;
                }

                .ranks {
                  border-bottom: 1px solid #21275f;
                }
              }
            }

            .practice-date {
              position: relative;
              top: -16px;
            }
          }
        }

        .main-details {
          display: flex;

          .assessments-title {
            width: 4%;
            background: #25305f63;
          }

          .assessments-body {
            width: 96%;
          }
        }

        .main-details,
        .assessments,
        .flashcards {
          border-bottom: 1px solid #97979742;
        }

        .exam-detail {
          display: flex;
          border-bottom: 1px solid #21275f;

          .student-names {
            width: 50%;
            display: flex;
            border-right: 1px solid #21275f;

            &:last-child {
              border: none;
            }

            span {
              color: #c2b8ff;
              padding: 5px 10px;
            }

            .overdue {
              color: #dc6e43;
              font-size: 13px;
              border: none;
            }

            .border-0 {
              border-right: 0 !important;
            }

            .rank {
              padding: 0;
            }

            .ranks {
              text-align: center;
              width: 12%;
              border-right: 1px solid #21275f;
            }

            .totle-score {
              color: #d7779b;
              font-weight: 500;
            }
          }
        }
      }
    }

    .activity-taracker {
      width: 30%;
      border: 1px solid #21275f;
      overflow: auto;

      .div-head {
        display: flex;
        border-bottom: 1px solid #97979742;

        span {
          padding: 10px;
          font-size: 16px;
          color: #d7779b;
          font-weight: 500;
        }
      }

      .task-div-body {
        &::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        /* Track */
        &::-webkit-scrollbar-track {
          border-radius: 10px;
        }

        /* Handle */
        &::-webkit-scrollbar-thumb {
          background: #adb3fd7a;
          border-radius: 10px;
        }

        .main-div {
          .date {
            position: relative;
            padding: 5px 20px 5px 5px;
            text-align: end;
            width: 23%;
            background: #25305f69;
            border-right: 1px solid #97979747;

            span {
              display: block;
              color: #7875ac;
              font-size: 13px;
            }

            .done-task {
              position: absolute;
              right: -9px;
              top: 10px;
              z-index: 111;
              line-height: 0;
            }

            &:after {
              position: absolute;
              content: "";
              top: 11px;
              right: -6px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #21275f;
              border: 1px solid #979797;
            }
          }

          .task-name {
            width: 70%;

            p {
              margin: 0;
              padding: 5px 5px 5px 15px;
              font-size: 13px;
              color: #7875ac;

              .task-color {
                color: #d7779b;
              }
            }
          }
        }
      }
    }
  }
}

.w-100 {
  width: 100% !important;
}

@media only screen and (max-width: 1000px) {
  .self-paced-main-div {
    .main-div {
      display: block;

      .study-progress {
        width: 100%;
        margin-bottom: 20px;
      }

      .activity-taracker {
        width: 100%;

        .task-div-body {
          .main-div {
            display: flex;
          }
        }
      }
    }
  }
}
.calendar-form > div {
  margin: 0 !important;
}
::ng-deep .mat-form-field-infix {
  border-top: none !important;
  top: 4px !important;
  padding: 0 !important;
}
.date-input .calendar-icon {
  top: 11px !important;
}
.date-input {
  width: 100%;
}
