@import "../../../utils/theme/colorVariable.scss";
.mat-drawer {
  display: none !important;
}

.Profile-Setting {
  padding: 30px;
}

.contentaarea {
  padding: 20px !important;
}

.pc-tab > input,
.pc-tab section > div {
  display: none;
}

nav {
  display: none;
}

.pc-tab > input,
.pc-tab section > div {
  display: block;
}

.pc-tab > input {
  display: none;
}

#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2 {
  display: block;
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2 {
  color: red;
}

.tab-titles {
  h3 {
    color: $Pink;
    font-size: 23px;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 20px;
  }
}

.main-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    margin: 0;
    font-weight: 200;
    font-size: 30px;
    color: #968bdb;
  }

  img {
    margin-right: 10px;
  }
}

.pc-tab {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      label {
        float: left;
        padding: 15px 25px;
        border: 1px solid #ddd;
        border-bottom: 0;
        background: red;
        color: #444;

        &:hover {
          background: #090d28;
        }

        &:active {
          background: #090d28;
        }
      }

      &:not(:last-child) label {
        border-right-width: 0;
      }
    }
  }
}

.tab2 {
  .tab-titles {
    h3 {
      color: #968bdb;
      margin-bottom: 10px;
    }
  }
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2 {
  label {
    background: white;
    color: #111;
    position: relative;

    &:after {
      content: "";
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: blue;
      left: 0;
      bottom: -1px;
    }
  }
}

.select-course-wrapper {
  display: flex;
  flex-wrap: wrap;

  .select-course-box {
    margin-right: 20px;
    background: #fafafa;
    border: 1px solid #21275f;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    width: calc(100% / 2.5);
    transition: 0.3s all ease-in-out;
    cursor: pointer;

    .select-course-box-image {
      margin-bottom: 15px;

      img {
        width: 100%;
        height: 180px;
      }
    }

    .select-course-content {
      .select-course-content-top {
        display: flex;

        p.cissp-box {
          width: 40px;
          height: 40px;
          border: 2px solid #000000;
          border-radius: 6px;
          min-width: 48px;
          min-height: 43px;
          text-align: center;

          span {
            font-size: 12px;
            padding: 20px 3px 0;
            display: block;
            color: #000000;
            text-transform: uppercase;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }

        p {
          margin-left: 15px;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: $Black;
          max-width: 250px;
          margin-top: 0;

          span {
            color: $Pink;
          }
        }
      }

      .select-course-content-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        align-items: center;
        max-width: 90%;
        margin: 0 auto;

        p {
          margin: 0;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #968bdb;

          span {
            display: block;
            color: #d7779b;
          }

          &.complete {
            display: flex;
            align-items: center;

            img {
              width: 24px;
              margin-right: 10px;
            }
          }
        }

        .select-course-btn-wrapper {
          display: flex;
          list-style: none;
          padding-left: 0;
          justify-content: center;
          align-items: center;
          width: 100%;

          li {
            .orange {
              background: linear-gradient(to right, #ee4b80, #ee844f);
              padding: 8px 50px;
              font-weight: 400;
              font-size: 15px;
              line-height: 19px;
              text-align: center;
              color: #ffffff;
              border-radius: 22px;
              text-decoration: none;
              display: block;
              margin-right: 15px;
              transition: 0.3s all ease-in-out;

              &:hover {
                opacity: 0.6;
              }
            }

            .learn-more {
              background: #0f133c;
              mix-blend-mode: normal;
              opacity: 0.5;
              border: 1px solid #978cd9;
              box-sizing: border-box;
              box-shadow: 20px 40px 60px rgba(0, 0, 0, 0.2);
              border-radius: 20px;
              color: #fff;
              text-decoration: none;
              display: block;
              padding: 8px 30px;
              transition: 0.3s all ease-in-out;

              &:hover {
                opacity: 0.6;
              }
            }
          }
        }
      }
    }

    &:hover {
      background: rgb(67 31 99);
      background-blend-mode: multiply;
      border-color: #a64cd7;
      box-shadow: 0px 0px 30px rgb(8 6 9) inset;
      border-radius: 8px;
    }
  }
}

.select-course-main {
  display: flex;
  background: $White;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid $Black;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .main-image {
    width: 33%;

    img {
      width: 100%;
      line-height: 0;
      height: 330px;
      object-fit: cover;
      border-radius: 10px;
    }
  }

  .course-detail {
    width: 65%;
    padding: 10px 0;
    box-sizing: border-box;

    .cissp-courses {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .courses-title {
        display: flex;
        align-items: center;

        p.cissp-box {
          width: 40px;
          height: 40px;
          border: 2px solid #000000;
          border-radius: 6px;
          min-width: 48px;
          min-height: 43px;
          text-align: center;
          margin: 0;

          span {
            font-size: 12px;
            padding: 20px 3px 0;
            display: block;
            color: #000000;
            text-transform: uppercase;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }

        p.cohort-name {
          margin: 0 15px 0;
          font-style: normal;
          font-weight: 600;
          font-size: 14px;
          color: $Black;
          max-width: 600px;
          letter-spacing: 0.5px;

          span {
            color: $Pink;
            font-weight: 500;
            letter-spacing: 0.5px;
          }
        }
      }

      .svgheight {
        svg {
          height: 100%;
          width: 100%;
        }

        height: 70px;
        width: 70px;
        position: relative;
        overflow: hidden;
      }

      .centerper {
        position: absolute;
        top: 25px;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
        color: $Black;
        font-weight: 600;
      }
    }

    .Completed {
      position: relative;
      margin: 15px 0 30px;
      border-bottom: 1px solid #21275f;
      padding-bottom: 40px;
      min-height: 85px;
      text-align: center;

      svg {
        width: 40px;
        height: 40px;
      }

      .text {
        color: $Pink;
        font-size: 14px;
        font-weight: 600;
      }
    }

    .date-time {
      position: relative;
      margin: 15px 0 30px;
      border-bottom: 1px solid #21275f;
      padding-bottom: 40px;
      min-height: 85px;

      .expires-title {
        display: block;
        font-size: 14px;
        letter-spacing: 0.5px;
        color: #8d83cf;
      }

      .completed-title {
        color: #ed70b5;

        img {
          width: 18px;
          vertical-align: sub;
        }
      }

      .days {
        font-size: 13px;
        color: #eb834f;
        display: flex;
        align-items: center;
        mat-icon {
          font-size: 17px;
          display: inline-flex;
          align-items: center;
        }
      }

      .include-me {
        display: flex;
        align-items: center;
        margin: 25px 0 0;

        .toggle-title {
          display: inline;
          font-size: 15px;
          letter-spacing: 0.5px;
          color: #8d83cf;
          margin-right: 10px;
          font-weight: 500;
        }
      }

      .menu-footer {
        position: absolute;
        top: 0;
        right: -20px;
        padding: 15px;
        background: #151b43;
        border: 1px solid #28305c;
        border-radius: 6px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        display: none;
        h6 {
          display: block;
          margin: 0 0 5px 0;
          text-align: center;
          font-size: 15px;
          color: #8d83cf;
        }

        .countdown-time {
          display: flex;
          align-items: center;
          background: linear-gradient(0deg, #7a38b1 0%, #8f458f 100%);
          padding: 8px;
          border-radius: 5px;
          justify-content: center;
          width: 100%;
          box-sizing: border-box;

          img {
            width: 16px;
            margin-right: 6px;
          }

          span {
            letter-spacing: 1px;
          }
        }
      }

      .switch {
        position: relative;
        display: inline-block;
        width: 32px;
        height: 19px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #212845;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 0;
        bottom: 0.5px;
        background-color: #7a7faa;
        transition: 0.4s;
      }

      input:checked + .slider {
        background-color: #442465;
      }

      input:checked + .slider:before {
        -webkit-transform: translateX(14px);
        -ms-transform: translateX(14px);
        transform: translateX(14px);
        background-color: #c757f7;
      }

      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }

      .slider.round:before {
        border-radius: 50%;
      }
    }

    .enroll-footer {
      span {
        font-size: 13px;
        letter-spacing: 0.5px;
        color: #8d83cf;
        font-weight: 500;
        display: block;
      }

      .upgrade-btn {
        display: flex;
        align-items: center;
        margin-top: 15px;

        button {
          padding: 12px 20px;
          min-width: 30%;
          border-radius: 0px;
          font-size: 14px;
          letter-spacing: 0.5px;
          margin-right: 20px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            opacity: 0.7;
          }
        }

        .upgradeBtn {
          color: #fff;
          border: none;
          background: $Pink;
        }

        .dashboardBtn {
          color: $Black;
          // background: #101235;
          border: 1px solid $Black;
        }

        .top_br {
          border-top: 1px solid #21275f;
          width: 100%;
          margin-top: 160px;

          .lock_btn {
            background-image: linear-gradient(to right, #f13e74, #ee8351);
            border: none;
            outline: none;
            color: #fff;
            padding: 10px 35px 8px 35px;
            border-radius: 30px;
            font-size: 17px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            font-family: "mulish-light";
            margin-top: 35px;

            .loc_opn {
              width: 24px;
              font-size: 20px;
              padding-right: 5px;
            }
          }
        }
      }
    }
  }
}

.select-course-main_bg {
  background-image: linear-gradient(to top right, #f473b9 -14%, #37338b 54%, #d87c5a 108%);
}

.upgradeMoadl {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #070626e0;

  .main-Modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid #2e356f;

    .modal-header {
      background: linear-gradient(96deg, rgba(177, 91, 254, 1) 0%, rgba(137, 33, 215, 1) 100%);
      padding: 15px 20px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      display: flex;
      align-items: center;
      position: relative;

      button {
        position: absolute;
        right: 10px;
        top: 10px;
        border: none;
        background: none;
        cursor: pointer;

        span {
          color: #fff;
        }
      }

      img {
        width: 45px;
        margin-right: 17px;
      }

      h3 {
        margin: 0;
        letter-spacing: 0.5px;
        font-size: 21px;
      }
    }

    .modal-body {
      background: #1a1943;
      display: flex;
      align-items: center;

      .domains {
        width: 60%;
        border-right: 1px solid #262d68;
        padding: 20px 30px;
        box-sizing: border-box;

        .main-details {
          margin: 0;
          color: #fff;
          letter-spacing: 0.5px;
          display: block;
          line-height: 1.5;
          opacity: 0.8;
        }

        .question-list {
          ul {
            padding: 0;

            li {
              list-style: none;
              display: flex;
              align-items: center;

              .domain-number {
                width: auto;
                margin-right: 30px;
                border-right: 1px solid #262d68;
                padding: 6px 40px 6px 0;

                span {
                  width: 50px;
                  text-align: center;
                  display: block;
                  background: #362750;
                  border-radius: 5px;
                  padding: 5px 0px;
                  color: #d17498;
                  letter-spacing: 0.5px;
                  font-weight: 700;
                }

                .titles {
                  display: block;
                  color: #8c83cd;
                  font-size: 14px;
                  font-weight: 600;
                  letter-spacing: 0.5px;
                  white-space: nowrap;
                  background: none;
                }
              }

              .questions {
                p {
                  margin: 0;
                  font-size: 14px;
                  letter-spacing: 0.5px;
                  opacity: 0.8;
                }

                .titles {
                  display: block;
                  color: #8c83cd;
                  font-size: 15px;
                  font-weight: 600;
                  letter-spacing: 0.5px;
                }
              }
            }
          }
        }
      }

      .prices {
        width: 40%;
        text-align: center;
        background-image: linear-gradient(to bottom, rgb(26 25 67 / 16%), rgb(26 25 67)),
          url("../../../assets/price-bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        padding: 58px 0;

        button {
          display: block;
          width: 90%;
          margin: auto;
          padding: 13px;
          font-size: 15px;
          letter-spacing: 0.5px;
          font-weight: 600;
          border-radius: 100px;
          cursor: pointer;
        }

        .month20 {
          background: #1c1a48;
          border: 1px solid #4d497c;
          color: #7e77b9;
          margin-bottom: 35px;
        }

        .month50 {
          background: #1b1a48;
          border: 1px solid #d7779b;
          color: #d7779b;
        }

        .month-50,
        .month-90,
        .year-170 {
          display: block;
          margin-top: 5px;
          margin-bottom: 35px;
          opacity: 0.8;
          font-weight: 500;
          font-size: 13px;
          letter-spacing: 0.3px;

          span {
            color: #b8678c;
            font-weight: 1000;
          }
        }

        .month90 {
          background: #1b1a48;
          border: 1px solid #ee844f;
          color: #ee844f;
        }

        .year170 {
          color: #fff;
          border: 1px solid transparent;
          background: linear-gradient(96deg, rgba(238, 75, 127, 1) 0%, rgba(238, 130, 80, 1) 100%);
        }

        .terms-div {
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 80%;
          margin: 0 auto;

          a {
            color: #dc78f4;
            letter-spacing: 0.5px;
            text-decoration: underline;
            font-size: 13px;

            &:first-child {
              padding-right: 20px;
              border-right: 1px solid #262d68;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .select-course-wrapper .select-course-box {
    margin-right: 11px;
    margin-bottom: 11px;
  }
}

@media (max-width: 1024px) {
  .select-course-box {
    margin-right: 9px !important;
    margin-bottom: 9px !important;
    width: calc(100% / 2 - 7%);
  }
  .select-course-main {
    align-items: inherit !important;
    .course-detail {
      .date-time {
        .menu-footer {
          position: relative;
          top: 15px;
          right: -20px;
        }
      }
    }
    .main-image {
      width: 33%;
      height: 33%;
      img {
        width: 100%;
        line-height: 0;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
      }
    }
  }
  .upgradeMoadl {
    .modal-body {
      .question-list {
        ul {
          li {
            .domain-number {
              width: auto !important;
              padding: 6px 40px 6px 0 !important;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 991px) {
  .select-course-wrapper {
    .select-course-box {
      margin-right: 9px;
      margin-bottom: 9px;
      width: calc(100% / 2 - 7%);
    }
  }

  .Enrolled-Courses {
    margin-bottom: 30px;
  }

  .select-course-wrapper
    .select-course-box
    .select-course-content
    .select-course-content-bottom
    .select-course-btn-wrapper
    li
    .learn-more {
    padding: 8px 20px;
  }
}

@media (max-width: 767px) {
  .nav {
    display: block;
  }

  .select-course-wrapper .select-course-box {
    padding: 10px;
  }

  .select-course-wrapper .select-course-box:nth-child(2n + 2) {
    margin-right: 0 !important;
  }

  .select-course-wrapper .select-course-box .select-course-content .select-course-content-top p {
    font-size: 14px;
  }

  .select-course-wrapper
    .select-course-box
    .select-course-content
    .select-course-content-bottom
    .select-course-btn-wrapper
    li
    .orange {
    padding: 8px 20px;
  }

  .select-course-wrapper
    .select-course-box
    .select-course-content
    .select-course-content-bottom
    .select-course-btn-wrapper
    li
    .orange {
    margin-right: 5px;
  }

  .select-course-wrapper
    .select-course-box
    .select-course-content
    .select-course-content-bottom
    .select-course-btn-wrapper
    li
    .learn-more {
    padding: 8px 15px;
  }
  .tab-titles {
    h3 {
      color: #d7779b;
      font-size: 18px;
      letter-spacing: 0.5px;
      display: block;
      margin-bottom: 10px;
      margin-top: 15px;
    }
  }
  .select-course-main {
    padding: 20px 10px;
    .course-detail {
      .date-time {
        .include-me {
          .toggle-title {
            font-size: 13px;
          }
        }
      }
      .Completed {
        min-height: auto;
        padding-bottom: 20px;
        svg {
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .text {
          position: absolute;
          top: 5px;
          left: 35px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .Profile-Setting {
    padding: 10px !important;
  }

  .select-course-wrapper .select-course-box {
    width: 100%;
    margin: 0 0 10px 0 !important;
  }

  .select-course-wrapper
    .select-course-box
    .select-course-content
    .select-course-content-bottom
    .select-course-btn-wrapper
    li
    .orange {
    padding: 8px 45px;
  }

  nav {
    display: none;
  }

  .pc-tab {
    display: flex;
    flex-direction: column;
    ul {
      display: flex;
      margin-bottom: 15px;
      background: #1b1f48;
      background-blend-mode: multiply;
      mix-blend-mode: normal;
      border: 1px solid #21275f;
      box-sizing: border-box;
      box-shadow: 20px 40px 60px rgba(0, 2, 19, 0.15);
      margin-left: -15px;
      margin-right: -15px;
      justify-content: center;
      li {
        label {
          padding: 10px 12px;
          border: none;
          border-bottom: 0;
          background: none;
          color: #968bdb;
          border-bottom: 1px solid transparent;
        }
      }
    }
  }
  #tab1:checked ~ nav .tab1 label,
  #tab2:checked ~ nav .tab2 label {
    background: transparent;
    position: relative;
    color: #d7779b;
    border-bottom: 1px solid #d7779b;
  }

  #tab1:checked ~ nav .tab1 label:after,
  #tab2:checked ~ nav .tab2 label:after {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #d7779b;
    left: 0;
    bottom: -1px;
  }

  ul.select-course-btn-wrapper {
    background: none !important;
    border: none !important;
    margin: auto !important;
  }

  .select-course-wrapper
    .select-course-box
    .select-course-content
    .select-course-content-bottom
    .select-course-btn-wrapper
    li
    .learn-more {
    padding: 8px 25px;
  }

  .select-course-wrapper .select-course-box .select-course-content .select-course-content-bottom {
    margin: 10px 0 0 0;
    max-width: 100%;
  }

  .select-course-wrapper {
    .select-course-box {
      .select-course-content {
        .select-course-content-top {
          p.cissp-box {
            margin: 0;
          }
        }
      }
    }
  }
  .courses-title {
    p.cissp-box {
      margin: 0 15px 0;
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      color: #000000;
      max-width: 600px;
      letter-spacing: 0.5px;
      word-break: break-word;
      width: 36%;
    }
  }
  .select-course-main {
    .course-detail {
      .enroll-footer {
        span {
          text-align: center;
          position: relative;
          top: 15px;
        }
      }
    }
  }
}

.mindmap-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #00000057;
  z-index: 1111;

  .midal-contain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-47%, -50%);
    margin: auto;
    background: #0f1535;
    border: 1px solid #a84df5;
    border-radius: 5px;
    max-width: 80%;
    width: 60%;

    .modal-header {
      position: relative;
      border-bottom: 1px solid #1e2352;
      padding: 15px 30px;
      background: linear-gradient(96deg, rgba(177, 91, 254, 1) 0%, rgba(137, 33, 215, 1) 100%);
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      display: flex;
      align-items: center;

      span,
      h3 {
        display: inline;
        color: #fff;
        margin: 0;
      }

      h3 {
        font-size: 18px;
      }

      span {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }
    }

    .modal-body {
      padding: 30px;
      display: flex;
      align-items: center;

      table {
        width: 100%;
        text-align: left;
        border-color: #912cde45;

        thead {
          text-align: center;

          tr {
            th {
              width: 25%;
            }
          }
        }

        tbody {
          text-align: center;
        }
      }

      .points,
      .points-png {
        width: 50%;
      }

      .points {
        padding-right: 35px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 2px;
          height: 140px;
          background: #ffffff78;
          right: 0;
          top: 0;
        }
      }

      .MatIconView {
        display: flex;

        mat-icon {
          color: #49308d;
          font-size: 20px;
        }
      }

      .points-png {
        padding-left: 35px;

        img {
          width: 100%;
        }
      }

      ul {
        padding: 0;
        list-style: none;
        margin: 0;

        li {
          color: #eae7ff;
          letter-spacing: 0.5px;
          font-size: 15px;
          padding: 5px 0;
        }
      }

      .container {
        display: block;
        position: relative;
        padding-left: 10px;
        margin-bottom: 12px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #b7b7c0;
        line-height: 1.5;
        letter-spacing: 0.5px;
        font-size: 15px;
        margin-top: -5px;
      }

      /* Hide the browser's default checkbox */
      .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }

      /* Create a custom checkbox */
      .checkmark {
        position: absolute;
        top: 6px;
        left: 0;
        height: 19px;
        width: 19px;
        border-radius: 100%;
        background: #2c2d54;
      }

      /* When the checkbox is checked, add a blue background */
      .container input:checked ~ .checkmark {
        background: #2c2d54;
        border-radius: 100%;
      }

      /* Create the checkmark/indicator (hidden when not checked) */
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }

      /* Show the checkmark when checked */
      .container input:checked ~ .checkmark:after {
        display: block;
      }

      /* Style the checkmark/indicator */
      .container .checkmark:after {
        left: 7px;
        top: 3px;
        width: 3px;
        height: 8px;
        border: solid #7e73bc;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      border-top: 1px solid #1e2352;
      padding: 15px 30px;

      button {
        padding: 10px 10px;
        border-radius: 20px;
        border: 0;
        box-shadow: none;
        color: #fff;
        background: linear-gradient(to right, #ed4b80, #ed8452);
        cursor: pointer;
        min-width: 130px;
        margin-left: 10px;
        transition: all 0.4s;
        font-size: 15px;

        &:hover {
          transform: scale(0.9);
        }
      }
    }

    .main-container {
      min-height: auto;
    }
  }
}

@media only screen and (max-width: 992px) {
  .select-course-wrapper {
    .select-course-box {
      width: 100%;
    }
  }
}

@media only screen and (max-width: 768px) {
  .select-course-main {
    flex-direction: column;
    align-items: inherit !important;
    .main-image {
      width: 100% !important;
      img {
        height: 200px !important;
      }
    }
    .course-detail {
      width: 100% !important;
      .cissp-courses {
        display: flex;
        align-items: inherit !important;
        width: 100%;
        flex-direction: column;
        .courses-title {
          p.cohort-name {
            max-width: 250px !important;
            word-break: break-word;
          }
        }
        .svgheight {
          top: 10px;
          left: 200px;
        }
      }
      .date-time {
        padding-bottom: 20px;
        margin: 15px 0 15px;
        margin-top: -58px;
      }
    }
  }

  .upgrade-btn {
    flex-direction: column;
    button {
      min-width: 100% !important;
      margin-top: 10px;
      margin-right: 0 !important;
    }
  }
  .menu-footer {
    position: relative !important;
    top: 15px !important;
    right: 0;
  }
  .upgradeMoadl {
    .main-Modal {
      width: 90% !important;
      height: calc(100vh - 100px);
      overflow-y: scroll;
      z-index: 9999;
      .modal-header {
        img {
          width: 40px;
          margin-right: 11px;
        }
        h3 {
          font-size: 16px;
        }
        button {
          top: 22px;
        }
      }
      .modal-body {
        flex-direction: column;
        .domains {
          width: 100% !important;
          border-right: none !important;
          padding: 20px 10px !important;
          border-bottom: 1px solid #262d68;
          .question-list {
            ul {
              li {
                .questions {
                  p {
                    font-size: 11px !important;
                  }
                }
                .domain-number {
                  width: auto !important;
                  margin-right: 15px !important;
                  border-right: none !important;
                  padding: 6px 0 !important;
                  span {
                    padding: 3px 0px !important;
                    font-size: 11px;
                    width: 40px !important;
                  }
                  .titles {
                    white-space: nowrap;
                    background: none;
                    text-overflow: ellipsis;
                    width: 51px !important;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
        .prices {
          width: 100% !important;
          padding: 30px 0 !important;
          .terms-div {
            border-top: 1px solid #262d68;
            padding-top: 25px;
          }
        }
      }
    }
  }
  .mindmap-modal {
    .midal-contain {
      transform: translate(-50%, -50%);
      max-width: 90%;
      width: 90%;
    }
    .modal-body {
      padding: 0px !important;
      flex-direction: column;
      overflow-y: scroll;
      table {
        display: block;
        overflow: scroll;
      }
      .points {
        width: 85% !important;
        padding-right: 0 !important;
        position: inherit !important;
      }
    }
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .enroll-footer {
    position: relative;
    left: -50%;
    border-top: 1px solid #21275f;
    top: -31px;
    padding-top: 15px;
    margin-bottom: -30px;
  }
  .select-course-main {
    .course-detail {
      .enroll-footer {
        .upgrade-btn {
          .upgradeBtn {
            min-width: 70%;
          }
          button {
            min-width: 70%;
          }
        }
      }
      .cissp-courses {
        .svgheight {
          top: 65px;
        }
      }
    }
  }
}

.Completed-off {
  .cissp-courses {
    .svgheight {
      display: none;
    }
  }
  .date-time {
    display: none;
  }
}
