//Admin Dashboard
.admin-bar {
  .dashboard-navbar {
    margin-top: 32px;
  }
}

// Hide site footer on dashboard pages
.page-template-page-template-dashboard,
.jbs-dashboard-template {

  .site-footer,
  footer.site-footer,
  footer#colophon,
  .footer,
  #footer {
    display: none !important;
  }
}

.dashboard-navbar {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  min-height: 100vh;
  overflow-y: auto;
  width: 260px;
  background: #fff;
  padding: 30px 20px 30px;

  a {
    text-decoration: none !important;
  }

  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: #fff;
  }

  &::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 0;
  }

  .user-data {
    .user-avatar {
      width: 75px;
      height: 75px;
      margin: 40px auto 0;

      img {
        border-radius: 50%;
      }

      &.online:before {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #29d259;
        border: 3px solid #fff;
        right: -3px;
        bottom: 10px;
        z-index: 1;
      }
    }

    .user-name-data .jbs-dropdown-menu {
      width: 100%;
      border: none;
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      padding: 12px 0;
      top: 35px;

      .jbs-dropdown-item {
        text-transform: capitalize;
        line-height: 45px;
        padding: 0 5px 0 20px;
        color: $head-color;
        font-size: 16px;
        font-weight: 500;
        background: transparent;
        position: relative;
        letter-spacing: -0.1px;
        @include transition(0.2s);

        i {
          font-weight: 700;
          font-size: 1.1em;
        }

        &:hover {
          color: $color-five;
          background: rgba($color: #000000, $alpha: 0.01);
        }

        img {
          width: 20px;
        }
      }
    }

    .user-name {
      width: 100%;
      font-size: 18px;
      font-weight: 500;
      color: $color-two;
      margin: 15px 0 45px;
      border: none;

      &:after {
        vertical-align: 3px;
      }
    }

    .user_name-btn {
      box-shadow: none;

      &:hover,
      &:focus {
        background-color: transparent;
      }
    }
  }

  .main-nav li a {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.16px;
    color: $color-two;
    padding: 20px 5px 20px 20px;
    border-radius: 15px;
    @include transition(0.25s);

    span {
      padding-left: 10px;
    }

    &:hover {
      color: #3c8968;
    }

    &.active {
      background: #3f634d;
      color: #fff;
    }

    img {
      max-width: 20px;
    }
  }

  .profile-complete-status {
    margin: 60px 0 75px 20px;

    .progress-value {
      color: $color-one;
    }

    .progress-line {
      height: 5px;
      border-radius: 10px;
      background: #3f634d;
      overflow: hidden;
      margin: 9px 0 3px;

      .inner-line {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        background: #d3fa38;
      }
    }

    p {
      font-size: 11px;
      font-weight: 500;
      margin: 0;
      color: rgba($color: #244034, $alpha: 0.5);
    }
  }

  .logout-btn {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.16px;
    color: $color-one;
    margin-left: 20px;
    @include transition(0.25s);

    span {
      padding-left: 10px;
    }

    &:hover {
      color: #ff5656;
    }
  }

  .close-btn {
    font-size: 22px;
    font-weight: bold;
    color: $color-one;
  }
}

// Dashboard Body
.dashboard-body {
  min-height: 100vh;
  background: #f0f5f3;
  margin-left: 260px;
  border-radius: 50px 0 0 50px;
  padding: 150px 55px 50px;
  margin-bottom: 50px;

  a {
    text-decoration: none;
    color: #000;

    &:hover {
      color: #000;
    }
  }

  .border-15 {
    border-radius: 15px;
  }

  .border-20 {
    border-radius: 20px;
  }

  .border-30 {
    border-radius: 30px;
  }

  .card-box {
    padding: 45px 60px 50px;
  }

  .main-title {
    font-size: 36px;
    color: $color-two;
    margin-bottom: 40px;
  }

  .dash-title-two {
    font-size: 20px;
    color: $color-two;
    border-bottom: 1px solid #e3f0eb;
    padding: 25px 0 25px 30px;
    margin: 0;
  }

  .dash-title-three {
    font-size: 24px;
    color: $color-five;
    margin: 0 0 30px;
  }

  .dash-btn-one {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.15px;
    color: $color-five;
    border-radius: 7px;
    line-height: 40px;
    padding: 0px 15px;
    min-width: 135px;
    text-align: center;
    background: rgba($color: #3f634d, $alpha: 0.2);
    @include transition(0.2s);
    cursor: pointer;
    border: none;

    i {
      font-size: 1.5em;
      font-weight: bold;
      vertical-align: -5px;
      margin-right: 2px;
    }

    &:hover {
      background: $color-five;
      color: #fff;
      text-decoration: none !important;
    }

    input[type="file"] {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }

  .dash-btn-two {
    font-weight: 500;
    color: #fff;
    min-width: 125px;
    text-align: center;
    padding: 0 20px;
    line-height: 45px;
    border-radius: 50px;
    background: $color-one;
    border: none;
    cursor: pointer;
    display: inline-block;

    &:hover {
      background: $color-three !important;
      color: #000;
      text-decoration: none !important;
    }
  }

  button#clear-portfolio-images {
    font-weight: 500;
    color: #fff;
    min-width: 125px;
    text-align: center;
    padding: 0 15px;
    line-height: 45px;
    border-radius: 50px;
    background: #fb0a0a;
    border: none;
    cursor: pointer;
  }

  .dash-cancel-btn {
    font-weight: 500;
    color: $color-five;

    &:hover {
      color: $color-one;
    }
  }

  // Dashboard Header
  .dashboard-header {
    position: fixed;
    top: 0;
    right: 55px;
    left: 315px;
    background: #f0f5f3;
    padding: 30px 0;
    z-index: 999;

    .search-form {
      position: relative;
      height: 45px;
      width: 318px;

      input {
        width: 100%;
        height: 100%;
        font-size: 15px;
        color: rgba($color: #000, $alpha: 0.5);
        border: none;
        border-radius: 25px;
        padding: 0 15px 0 45px;
        background: rgba($color: #000000, $alpha: 0.05);
      }

      button {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 50px;
        border-radius: 25px 0 0 25px;
      }
    }

    .profile-notification {
      .noti-btn {
        height: 45px;
        position: relative;

        &:after {
          display: none;
        }

        .badge-pill {
          position: absolute;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #ff2730;
          top: 4px;
          right: -7px;
        }
      }

      .jbs-dropdown-menu {
        max-width: 325px;
        border: none;
        border-radius: 15px;
        box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.12);
        padding: 25px 18px 30px 22px;

        h4 {
          font-size: 18px;
          margin-bottom: 20px;
        }

        .notify-list li {
          position: relative;
          padding-right: 10px;
          cursor: pointer;
          margin-top: 17px;

          &:before {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            background: #d8d8d8;
            border-radius: 50%;
            right: 0;
            top: 5px;
          }

          &.unread:before {
            background: #ff2730;
          }

          h6 {
            font-size: 15px;
            margin-bottom: 3px;
            letter-spacing: -0.2px;
            color: rgba($color: #000, $alpha: 0.6);
            width: 90%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          &.unread h6 {
            color: #000;
          }

          .time {
            font-size: 14px;
            color: rgba($color: #000, $alpha: 0.5);
          }
        }
      }
    }

    .job-post-btn {
      font-weight: 500;
      color: #fff;
      text-align: center;
      width: 135px;
      line-height: 45px;
      border-radius: 50px;
      background: $color-one;

      &:hover {
        background: $color-two;
        color: $color-one;
      }
    }

    .dash-mobile-nav-toggler {
      width: 44px;
      height: 38px;
      padding: 0;
      box-shadow: none;
      position: relative;
      z-index: 99;
      border: none;
      border-radius: 5px;
    }

    .dash-mobile-nav-toggler:focus {
      box-shadow: none;
    }

    .dash-mobile-nav-toggler::before,
    .dash-mobile-nav-toggler::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 26px;
      height: 2px;
      pointer-events: none;
      -webkit-transition: -webkit-transform 0.25s;
      transition: transform 0.25s;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      background: $color-one;
    }

    .dash-mobile-nav-toggler span {
      position: absolute;
      left: 0;
      overflow: hidden;
      width: 26px;
      height: 2px;
      margin-top: -1px;
      text-indent: 200%;
      -webkit-transition: opacity 0.25s;
      transition: opacity 0.25s;
      background: $color-one;
    }

    .dash-mobile-nav-toggler::before {
      -webkit-transform: translate3d(0, -9px, 0) scale3d(1, 1, 1);
      transform: translate3d(0, -9px, 0) scale3d(1, 1, 1);
    }

    .dash-mobile-nav-toggler::after {
      -webkit-transform: translate3d(0, 8px, 0) scale3d(1, 1, 1);
      transform: translate3d(0, 8px, 0) scale3d(1, 1, 1);
    }
  }

  // Card One
  .dash-card-one {
    padding: 22px 35px 34px;
    z-index: 1;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;

    &:before {
      content: "";
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      bottom: -10px;
      border-radius: 30px;
      z-index: -1;
      background: rgba($color: #fff, $alpha: 0.6);
    }

    .icon {
      width: 65px;
      height: 65px;
      background: $color-three;
    }

    .value {
      font-size: 36px;
      letter-spacing: -0.36px;
      color: $color-two;
    }

    span {
      color: rgba($color: #0000, $alpha: 0.5);
    }
  }

  a .dash-card-one:hover {
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
  }

  .user-activity-chart {
    .job-list {
      padding: 25px 20px;
      max-width: 700px;
      margin: 0 auto;
    }

    .jbs-nice-select {
      height: 50px;
      line-height: 46px;
      border: 2px solid #3f634d;
      border-radius: 7px;
      font-size: 15px;

      &:after {
        right: 12px;
      }

      .option {
        line-height: 40px;
      }

      .current {
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 80%;
      }
    }
  }

  // Recent Job Tab
  .recent-job-tab .wrapper {
    padding: 0 25px 8px 30px;

    .no-jobs-message {
      padding: 16px 0 8px;
    }

    .job-item-list {
      position: relative;
      margin: 5px 0;
      transition: all 0.3s ease;
      padding: 20px 0;

      &:first-child {
        margin-top: 10px;
      }

      &:hover {
        background-color: rgba(63, 99, 77, 0.04);
        padding-left: 15px;
        border-radius: 8px;
      }

      .logo {
        width: 40px;
      }

      .job-title {
        width: calc(100% - 40px);
        padding-left: 22px;

        .job_title-mb {
          margin-bottom: 5px;
          margin-top: 0;
        }

        h6 a {
          font-size: 16px;
          color: $color-two;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          @include transition(0.2s);

          &:hover {
            text-decoration: underline;
            color: $color-five;
          }
        }

        .meta {
          font-size: 14px;
          color: rgba($color: #244034, $alpha: 0.5);

          a {
            color: rgba($color: #244034, $alpha: 0.5);
          }
        }
      }

      .job-action {
        position: absolute;
        top: 0;
        right: 0px;

        .jbs-dropdown-menu {
          min-width: 120px;
          border: none;
          border-radius: 10px;
          box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.1);
          padding: 10px 0;

          .jbs-dropdown-item {
            font-weight: 500;
            font-size: 13px;
            padding: 5px 15px;
            margin: 4px 0;
            color: rgba($color: $brand-color-2, $alpha: 0.55);
            background: #fff;
          }

          li:last-child .jbs-dropdown-item {
            color: #ff5b5b;
          }
        }

        .action-btn {
          padding: 8px;

          span {
            display: block;
            position: relative;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba($color: #2b2b2b, $alpha: 0.35);

            &:before,
            &:after {
              content: "";
              position: absolute;
              top: 0;
              left: -7px;
              margin: 0;
              padding: 0;
              width: 4px;
              height: 4px;
              border: none;
              border-radius: 50%;
              background: rgba($color: #2b2b2b, $alpha: 0.35);
            }

            &:after {
              left: auto;
              right: -7px;
            }
          }

          &:after {
            display: none;
          }

          &:hover span {
            background: $color-three;

            &:before,
            &:after {
              background: $color-three;
            }
          }
        }
      }
    }
  }

  // User Avatar
  .user-avatar-setting {
    .user-img {
      width: 68px;
      height: 68px;
      border-radius: 50%;
    }

    .upload-btn {
      font-size: 15px;
      letter-spacing: -0.15px;
      font-weight: 500;
      height: 40px;
      text-align: center;
      border-radius: 7px;
      color: $color-two;
      background: $color-three;
      cursor: pointer;

      &:hover {
        background: $color-one;
        color: #fff;
      }

      input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

    .upload_btn-width {
      width: 175px;
      line-height: 40px;
    }

    .delete-btn {
      font-size: 15px;
      letter-spacing: -0.15px;
      font-weight: 500;
      color: $color-one;
      border: none;
      background: transparent;
      box-shadow: none;

      &:hover {
        color: #ff5b5b;
      }
    }
  }

  // Input Style
  .dash-input-wrapper {
    label {
      display: block;
      font-size: 15px;
      font-weight: 500;
      color: $brand-color-2;
      margin-bottom: 10px;
    }

    .alert-text {
      font-size: 14px;
      letter-spacing: -0.14px;
      color: rgba($color: #000, $alpha: 0.5);
    }

    input {
      width: 100%;
      height: 55px;
      letter-spacing: -0.16px;
      border: 1px solid #e5e5e5;
      border-radius: 7px;
      padding: 0 20px;
      outline: none;

      &:focus {
        border-color: var(--jbs-brand_color_1);
      }
    }

    textarea {
      border: 1px solid #e5e5e5;
      border-radius: 7px;
      padding: 15px 20px;
      max-width: 100%;
      width: 100%;
      resize: none;

      &.size-lg {
        height: 230px;
        max-height: 200px;
      }
    }

    .jbs-nice-select {
      height: 55px;
      line-height: 55px;
      letter-spacing: -0.16px;
      border: 1px solid #e5e5e5;
      border-radius: 7px;
      padding: 0 25px 0 20px;

      .option {
        line-height: 38px;
      }

      .list {
        border-radius: 7px;
      }
    }

    .map-frame {
      height: 290px;
      border-radius: 8px;
      overflow: hidden;
    }

    .location-pin {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 60px;
      opacity: 0.18;

      &:hover {
        opacity: 1;
      }
    }

    .attached-file {
      height: 60px;
      width: 100%;
      border-radius: 10px;
      background: #edf2f7;
      padding: 0 20px;

      span {
        font-size: 14px;
      }

      .remove-btn {
        font-size: 22px;
        font-weight: 700;
        color: $color-five;

        &:hover {
          color: #ff5b5b;
        }
      }
    }

    .skills-wrapper {
      padding: 15px 20px 10px;
      background: #f7f7f7;
      border-radius: 15px;

      ul {
        margin: 0 -5px;

        li {
          padding: 0 5px;
          background: none;

          &.is_tag button {
            font-size: 15px;
            color: $color-five;
            line-height: 42px;
            padding: 0 40px 0 22px;
            background: #ffffff;
            box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.0363735);
            border-radius: 30px;
            position: relative;

            i {
              position: absolute;
              font-size: 20px;
              right: 10px;
              top: 0;

              &:hover {
                color: #ff5b5b;
              }
            }
          }

          &.more_tag button {
            font-size: 21px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: $color-three;
            color: #000;
            padding: 0;
            margin: 0;
            outline: none;
            border: none;
            padding-bottom: 3px;
          }
        }
      }
    }

    .info-text {
      font-size: 14px;

      p {
        color: rgba($color: #000, $alpha: 0.5);

        a {
          color: $color-five;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .chng-pass {
        color: $color-five;
        text-decoration: underline;
      }
    }

    .skill-input-data {
      margin: 0 -3px;

      button {
        font-size: 12px;
        font-weight: 500;
        margin: 10px 3px 0;
        padding: 0 14px;
        height: 25px;
        background: rgba($color: #31795a, $alpha: 0.1);
        border-radius: 30px;
        @include transition(0.2s);

        &:hover {
          background: $color-one;
          color: #fff;
        }
      }
    }
  }

  .intro-video-post {
    height: 350px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #000;

    .video-icon {
      width: 65px;
      height: 65px;
      background: $color-two;
      color: #000;
      font-size: 45px;
      line-height: 65px;
      padding-left: 7px;

      &:hover {
        background: $color-three;
        color: #fff;
      }
    }

    .close {
      color: #fff;
      font-size: 35px;
      position: absolute;
      top: 15px;
      right: 15px;
    }

    &.empty {
      border: 1px solid #e3e3e3;
    }

    input[type="file"] {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }

  .dash-accordion-one {
    .jbs-collapse.jbs-show {
      padding-bottom: 20px;
    }

    .jbs-accordion-item {
      border: 1px solid #eaeaea;
      border-radius: 15px;
      margin-bottom: 20px;

      .jbs-accordion-button {
        font-size: 15px;
        font-weight: 500;
        color: #000;
        background: transparent;
        border-radius: 0;
        padding: 17px 25px;
        box-shadow: none;

        &:after {
          content: url(../images/dashboard/icons/arrow-icon.svg);
          background-image: none;
        }
      }

      .jbs-accordion-body {
        padding: 8px 25px 0;
      }
    }
  }

  .remove-portfolio-item {
    width: 30px;
    height: 30px;
    background: rgba($color: #000, $alpha: 0.1);
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 22px;
    color: #000;

    &:hover {
      background: #fff;
    }
  }

  .tab-filter-btn {
    border: none;

    .nav-link {
      line-height: 28px;
      border-radius: 30px;
      background: rgba($color: #000, $alpha: 0.08);
      padding: 0 12px;
      margin: 0 5px;
      font-size: 13px;
      font-weight: 500;
      color: $brand-color-2;

      &.active {
        background: $color-two;
      }
    }
  }

  .short-filter {
    font-size: 15px;

    .jbs-nice-select {
      min-width: 154px;
      height: 32px;
      line-height: 30px;
      font-size: 13px;
      font-weight: 500;
      padding: 0 15px 0 15px;
      background: transparent;
      border: 1px solid #000;
      border-radius: 30px;

      &:after {
        right: 14px;
      }

      .list {
        padding: 0;
      }

      .option {
        font-size: 1em;
      }
    }
  }

  .job-alert-table {
    th {
      border: 0;
      padding: 12px 15px;
      font-size: 15px;
      font-weight: 500;
      color: #244034;
      background: #f0f5f3;
      text-align: left;

      &:first-child {
        border-radius: 7px 0 0 7px;
      }

      &:last-child {
        border-radius: 0 7px 7px 0;
      }
    }


    td {
      font-size: 15px;
      vertical-align: middle;
      box-shadow: none;
      padding: 25px 15px;
      border: none;
      border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);

      &:nth-child(1) {
        font-weight: 500;
        color: #244034;
      }

      &:nth-child(2) .job-type {
        color: #00cb74;

        &.part-time {
          color: #ff5757;
        }
      }

      .info1 {
        font-size: 14px;
        font-weight: normal;
        color: rgba($color: $color-one, $alpha: 0.7);
        margin-top: 2px;
      }

      .job-status {
        position: relative;
        padding-left: 18px;
        color: rgba($color: $color-one, $alpha: 0.9);

        &:before {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          left: 0;
          top: 7px;
        }
      }
    }

    tbody tr:last-child td {
      border: none;
    }

    tbody tr {
      transition: background-color 0.2s ease;

      &:hover {
        background-color: rgba(#f0f5f3, 0.6);
      }
    }

    .active .job-status:before {
      background: #28cc8b;
    }

    .pending .job-status:before {
      background: #fac715;
    }

    .expired .job-status:before {
      background: #ff5050;
    }
  }

  .action-dots {
    .jbs-dropdown-menu {
      min-width: 140px;
      border: 1px solid #f1f1f1;
      border-radius: 5px;
      box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.1);
      padding: 5px 0;

      .jbs-dropdown-item {
        padding: 0 15px;
        line-height: 34px;
        font-size: 14px;
        color: #6a6a6a;
        background: #fff;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
        display: flex;
        align-items: center;
        gap: 6px;

        &:hover {
          background-color: #f0f5f3;
          color: #244034;
        }

        img {
          display: inline-block;
          vertical-align: -1px;
          margin-right: 5px;
        }
      }

      li:last-child .jbs-dropdown-item:hover {
        color: #ff5b5b;
      }
    }

    .action-btn {
      padding: 8px;

      span {
        display: block;
        position: relative;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba($color: #2b2b2b, $alpha: 0.35);

        &:before,
        &:after {
          content: "";
          position: absolute;
          top: -7px;
          left: 0;
          margin: 0;
          padding: 0;
          width: 4px;
          height: 4px;
          border: none;
          border-radius: 50%;
          background: rgba($color: #2b2b2b, $alpha: 0.35);
        }

        &:after {
          top: auto;
          bottom: -7px;
        }
      }

      &:after {
        display: none;
      }

      &:hover span {
        background: $color-three;

        &:before,
        &:after {
          background: $color-three;
        }
      }
    }
  }

  .dash-pagination li {
    font-size: 16px;
    color: #000;
    height: 38px;

    a {
      width: 40px;
      height: 40px;
      color: #000;
      text-align: center;
      line-height: 38px;
      border: 1px solid #626262;
      border-right: none;
      @include transition(0.2s);

      &:hover,
      &.active {
        background: $color-five;
        color: #fff;
      }
    }

    &:nth-child(1) a,
    &:nth-child(5) a {
      border-radius: 5px 0 0 5px;
    }

    &:nth-child(3) a,
    &:nth-child(6) a {
      border-radius: 0 5px 5px 0;
      border-right: 1px solid #626262;
    }

    &:nth-child(4) {
      margin: 0 10px;
    }
  }

  // Meassage Page
  .new-message-compose {
    width: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 28px;
    color: #3f634d;
    background: #d3fa38;
  }

  .message-pagination a {
    color: #000;
  }

  .message-pagination span {
    color: #000;
    font-size: 14px;
    margin: 0 8px;
  }

  .message-wrapper {
    .message-sidebar {
      border-right: 1px solid #e3e1e1;
      height: 100%;

      .page-title {
        font-size: 18px;
        color: #000;
      }

      .action-btn {
        span {

          &:before,
          &:after {
            top: 0;
            left: -7px;
          }

          &:after {
            left: auto;
            right: -7px;
          }
        }
      }

      .search-form {
        height: 50px;
        border-radius: 30px;
        position: relative;
        background: rgba($color: #000, $alpha: 0.04);
        border: 1px solid #efefef;

        input {
          width: 100%;
          height: 100%;
          border-radius: 30px;
          background: transparent;
          border: none;
          padding: 0 50px 0 15px;
          font-size: 15px;
        }

        button {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 50px;
          border-radius: 30px 0 0 30px;
          transform: none;
        }
      }

      .message_filter button {
        font-size: 15px;
        font-weight: 500;
        color: $brand-color-2;
        line-height: 28px;
        border-radius: 30px;
        padding: 0 12px;
        margin: 0 2px;
        position: relative;

        span {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          position: absolute;
          left: -5px;
          top: 10px;
        }

        &.active {
          background: $color-five;
          color: #fff;

          span {
            opacity: 0;
          }
        }
      }

      .email-list-item {
        border-top: 1px solid #f3f3f3;
        padding-top: 28px;
        padding-bottom: 28px;
        cursor: pointer;
        position: relative;

        &.selected {
          background: #f0f5f3;
          border-left: 4px solid #779e86;
          border-right: 4px solid #779e86;

          .email-short-preview .file {
            background: #fff;
          }
        }

        .email-short-preview {
          padding-left: 24px;

          .sender-name {
            font-size: 15px;
            font-weight: 500;
            color: rgba($color: #3f634d, $alpha: 0.8);
          }

          .date {
            font-size: 12px;
            color: rgba($color: #000, $alpha: 0.5);
          }

          .mail-sub {
            font-weight: 500;
            font-size: 16px;
            color: #000;
            margin: 7px 0 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .mail-text {
            font-size: 15px;
            line-height: 25px;
            color: rgba($color: #000, $alpha: 0.5);
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .file {
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 12px;
            letter-spacing: -0.3px;
            color: rgba($color: #000, $alpha: 0.5);
            background: #f0f5f3;
          }
        }
      }
    }

    .open-email-container {
      .divider {
        border-bottom: 1px solid #eeeeee;
      }

      .email-header {
        padding-top: 30px;
        padding-bottom: 30px;

        .logo {
          width: 45px;
          height: 45px;
          border-radius: 50%;
        }

        .sender-name {
          font-size: 20px;
          font-weight: 500;
          color: $brand-color-2;
          margin-bottom: -4px;
        }

        .sender-email {
          font-size: 17px;
          color: rgba($color: #000, $alpha: 0.4);
        }

        .time {
          font-size: 13px;
          color: rgba($color: #244034, $alpha: 0.6);
          margin-bottom: 15px;
        }
      }

      .email-body {
        padding-top: 35px;
        padding-bottom: 15px;
        font-size: 15px;

        h2 {
          font-size: 24px;
          margin-bottom: 25px;
        }

        p a {
          color: $color-five;
        }
      }

      .email-footer {
        padding-top: 20px;

        .attachments {
          h6 {
            font-size: 15px;
          }

          .all-download {
            font-size: 14px;
            font-weight: 500;
            color: $color-five;
          }

          .file {
            padding: 9px 15px;
            border: 1px solid rgba($color: #000000, $alpha: 0.1);
            border-radius: 10px;
            margin-right: 15px;

            &:hover {
              background: rgba($color: $color-five, $alpha: 0.03);
            }

            .icon {
              width: 37px;
              height: 37px;
              background: #f0f5f3;
            }

            .file-name {
              font-size: 15px;
              letter-spacing: -0.3px;
              color: $brand-color-2;
            }

            .file-size {
              font-size: 13px;
              letter-spacing: -0.3px;
              color: rgba($color: $color-one, $alpha: 0.5);
            }
          }
        }
      }
    }
  }

  .candidate-profile-card {
    overflow: visible;
  }

  .membership-plan-wrapper {
    border-radius: 10px;
    border: 1px solid $brand-color-2;

    .column {
      padding: 38px 40px;

      &.border-left {
        border-left: 1px solid $brand-color-2;
      }
    }

    h4 {
      font-size: 20px;
      color: rgb(37, 64, 53);
      margin: 0 0 .5rem 0;
      font-weight: 500;
    }

    p {
      letter-spacing: -0.17px;
      line-height: 30px;
      margin: 0;
    }

    h3,
    h6 {
      color: $color-five;
      margin: 0;
    }

    h3 {
      font-size: 60px;
    }

    h6 {
      font-size: 18px;
      margin-bottom: 0.5rem;
    }

    .text1 {
      font-size: 14px;
      letter-spacing: -0.14px;

      span {
        color: #000;
      }
    }

    .cancel-plan {
      font-size: 15px;
      font-weight: 500;
      color: $color-five;
      text-decoration: underline;

      &:hover {
        color: #ff2730;
      }
    }
  }
}

// New Message Container
.compose-new-email-container {
  border: 1px solid rgba($color: #000, $alpha: 0.1);
  border-radius: 10px;
  background: #fff;

  .new-email-header {
    border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);

    .btn-group {
      position: absolute;
      top: 6px;
      right: 10px;
      z-index: 1;

      a {
        font-size: 15px;
        padding: 2px;
        color: $brand-color-2;
        margin-left: 8px;

        &[aria-expanded="true"] {
          text-decoration: underline;
        }
      }
    }

    .input-group {
      padding: 10px 0;
      font-size: 14px;
      color: $brand-color-2;

      input {
        border: none;
        padding: 0 15px 0 0;
      }
    }
  }

  .compose-body textarea {
    width: 100%;
    max-width: 100%;
    height: 125px;
    max-height: 125px;
    border: none;
    font-size: 15px;
    padding: 15px 22px;
  }

  .compose-email-footer {
    padding: 15px 22px;

    .insert-file {
      position: relative;
      cursor: pointer;

      input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
  }

  .reply-btn {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    min-width: 90px;
    text-align: center;
    padding: 0 15px;
    line-height: 35px;
    border-radius: 50px;
    background: $color-one;

    &:hover {
      background: $color-two;
      color: $color-one;
    }
  }
}

.compose-mail-offcanvas {
  right: 55px;
  bottom: 0;
  max-width: 700px;
  background: #fff;
  padding: 50px 15px 15px;
  border-radius: 20px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba($color: #000, $alpha: 0.04);
  display: none;

  &.show {
    display: block;
  }

  .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: none;
  }
}

// Account Delete Popup
.remove-account-popup {
  background: #fff;
  margin: 0 auto;
  max-width: 630px;
  border-radius: 10px !important;
  padding: 50px 20px;

  h2 {
    font-size: 36px;
    color: $brand-color-2;
    margin: 20px 0;
  }

  .confirm-btn {
    width: 80px;
    line-height: 40px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: $color-five;

    &:hover {
      background: #ff5b5b;
    }
  }

  .btn-close {
    background: none;
    border-radius: 0;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 16px;
    color: #000;
    opacity: 1;
    box-shadow: none;
  }
}

/*========== Editor Markup Styling ===========*/
#candidate-profile-form {
  .wp-editor-container {
    .quicktags-toolbar {
      .ed_button {
        width: auto;
        height: auto;
      }
    }
  }
}

.media-frame-toolbar {
  .media-toolbar-primary {
    .media-button {
      position: unset;
      transform: none;
    }
  }
}

/*========== Portfolio Styling ===========*/
.portfolio-preview-wrapper {
  .portfolio-image-list {
    padding: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;

    li {
      list-style: none;
      border: 1px solid #e3e3e3;
      border-radius: 10px;
      overflow: hidden;

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

// Dashboard Header
body {
  &.page-template-dashboard {
    .site-header {
      display: none;
    }
  }
}

@media (max-width:1024px) {
  .dashboard-body {
    padding: 150px 25px 50px;
  }

  .dashboard-body .card-box {
    padding: 45px 20px 50px;
  }
}

@media (max-width:767px) {
  .dashboard-body {
    padding: 0px;
  }
}