@import "../../../utils/theme/colorVariable.scss";
.self-paced-main-div {
  padding: 20px;
  background: #fff;
  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;

      span {
        display: flex;
        width: 17px;
        margin-right: 25px;
        cursor: pointer;

        svg {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      h2 {
        color: #DF166A;
        margin: 0;
      }
    }

    .filter-search {
      display: flex;
      align-items: center;

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

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

        select {
          background: $White;
          color: $Black;
          padding: 10px 40px 10px 10px;
          border: 1px solid $Black;
          border-radius: 5px;
          width: 200px;

          option {
            color: $Black;
          }
        }
      }

      .search-icon {
        position: relative;
        width: 330px;
        display: flex;
        margin-right: 0;

        .input-seacrch {
          background: $searchBg;
          border: 1px solid $searchBorder;
          padding: 10px 40px 10px 20px;
          // border-radius: 30px;
          margin-right: 0px;
          color: $searchText;
          width: 330px;
          box-sizing: border-box;
        }

        span {
          position: absolute;
          right: 14px;
          top: 10px;
          display: flex;
          width: 17px;
          height: 17px;

          svg {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .mat-header-row th {
    vertical-align: bottom;
    font-size: 14px;

    ::ng-deep .mat-sort-header-container {
      align-items: end !important;

      .mat-sort-header-arrow,
      [dir="rtl"] .mat-sort-header-position-before .mat-sort-header-arrow {
        margin: 0px 0 3px 6px !important;
      }
    }
  }

  .note-span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    width: 150px;
    color: #7e7ab3;
  }

  tr td.mat-cell {
    vertical-align: middle;
    font-size: 13px;
  }

  .exam-formate {
    color: #7e79b0;
    display: flex;
    align-items: center;
    width: 110px;

    span {
      &:first-child {
        color: #514e7e;
      }

      &:last-child {
        color: #b16487;
      }
    }
  }

  .mw-93 {
    min-width: 93px;
  }

  .mat-sort-header-arrow[style],
  .mat-sort-header-indicator {
    left: -10px;
  }
}
::ng-deep .mat-paginator-container {
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  .mat-icon-button {
    background: $paginationBtnBg !important;
    border-radius: 5px !important;
    border: 1px solid $paginationBtnBorder !important;
    margin: 0 5px !important;
    cursor: pointer;
    color: $paginationBtnText !important;

    &:hover {
      border: 1px solid $PaginationBtnHover !important;
      color: $PaginationBtnHover !important;
    }
  }

  .mat-paginator-page-size-label {
    color: $paginationText !important;
    font-size: 14px !important;
  }

  .mat-paginator-range-label {
    color: $Pink;
    width: 140px;
    font-size: 14px !important;
  }
}
