.dashbord {
  padding-bottom: 45px;

  .text-note {
    margin: 22px 0;
    font-weight: 500;
    line-height: 18px;
    color: #8C90A1;

    span {
      color: #AAADB9;
    }
  }

  .table {
    label {
      input:checked + span {
        background-color: #FA4B68;
      }
    }

    tbody {
      tr {
        &::after {
          content: "";
          @extend %absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 7px;
          background: #282e3e;
          background-repeat: no-repeat;
          border: 1px solid rgba(#fff, 0.06);
          z-index: -1;
          opacity: 0;
          transition: all 0.3s ease-in-out;
        }

        &.show-icons::after {
          background: linear-gradient(
            238.79deg,
            #262c3a 34.21%,
            rgba(37, 43, 58, 0) 113.89%
          );
          border-color: transparent;
          opacity: 1;
          z-index: 99;
        }

        td {
          &.type {
            i {
              margin-left: 5px;
              font-size: 18px;
              color: #b4b5bc;
            }
          }

          &.keywords {
            .success {
              color: #34a853;
            }

            .danger {
              color: #ea4335;
            }
          }

          &.other > button {
            color: #a3a4ae;
            font-size: 3px;
          }
        }

        .success {
          color: #34a853 !important;
        }

        .danger {
          color: #d33155 !important;
        }

        &:not(.show-icons).active,
        &:not(.show-icons):hover {
          &::after {
            opacity: 0.77;
          }

          td,
          td i {
            color: #fff;
          }
        }
      }
    }
  }

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

  .my-statistics {
    margin: 35px 0 44px;

    &-title {
      font-size: 18px;
      font-weight: 600;
      color: #fba928;
      line-height: 22px;
      margin-bottom: 30px;

      &::after {
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 245px);
        height: 20px;
        background-image: url("./../images/shape/dots.png");
      }
    }

    &-left {
      max-width: calc(100% - 258px);
      flex: 0 0 auto;
      margin-right: 13px;
    }

    &-top {
      margin-bottom: 10px;

      &-item {
        flex: 1 0 1%;
        background: linear-gradient(
            151.93deg,
            rgba(#fa9435, 0.349) 10.85%,
            rgba(#1f283a, 0) 95.37%
          ),
          #2c3246;
        border: 1px solid #353d4f;
        border-radius: 10px;
        padding: 0 11px 10px;
        box-shadow: 0 5px 20px rgba(#fa9435, 0.12);
        font-weight: 500;
        line-height: 18px;
        color: #8c90a1;
        height: 100%;

        span {
          width: 59px;
          height: 63px;
          border: 1px dashed #353d4f;
          border-radius: 0 0 10px 10px;
          box-shadow: 0 5px 20px rgba(#000, 0.11);
          margin-right: 6px;
          font-size: 20px;
          font-weight: 900;
          color: #fa9435;
        }

        &:not(:last-child) {
          margin-right: 12px;
        }

        &:nth-child(2) {
          background-image: linear-gradient(
            151.93deg,
            rgba(#fff, 0.302) 10.85%,
            rgba(#1f283a, 0) 95.37%
          );
          box-shadow: 0 5px 20px rgba(#fff, 0.12);

          span {
            color: #fff;
          }
        }

        &:nth-child(3) {
          background-image: linear-gradient(
            151.93deg,
            rgba(#2381ee, 0.302) 10.85%,
            rgba(#1f283a, 0) 95.37%
          );
          box-shadow: 0 5px 20px rgba(#2381ee, 0.2);

          span {
            color: #2381ee;
          }
        }

        &:nth-child(4) {
          background-image: linear-gradient(
            151.93deg,
            rgba(#379d63, 0.302) 10.85%,
            rgba(#1f283a, 0) 95.37%
          );
          box-shadow: 0 5px 20px rgba(#3fac4b, 0.23);

          span {
            color: #fff;
          }
        }
      }
    }

    &-bottom {
      gap: 12px;

      &-item {
        border-radius: 10px;
        background-color: #2c3246;
        border: 1px solid #353d4f;
        max-width: calc(33.333333% - 8px);
        flex: 0 0 auto;
        padding: 12px 21px 15px 19px;

        &,
        .value {
          box-shadow: 0 5px 20px rgba(#000, 0.11);
        }

        .title {
          font-weight: 500;
          line-height: 19px;
          color: #8c90a1;
          margin-bottom: 7px;
        }

        .value {
          @extend %radius-8;
          background-color: #2c3246;
          border: 1px dashed #353d4f;
          font-weight: 900;
          line-height: 25px;
          color: #acb3c9;
          padding: 10px 16px;
        }
      }
    }

    &-remaining {
      background-image: linear-gradient(
        151.93deg,
        rgba(#f6509c, 0.259) 10.85%,
        rgba(#1f283a, 0) 95.37%
      );
      border-radius: 10px;
      border: 1px solid #353d4f;
      padding: 9px 7px 12px 8px;
      max-width: 245px;
      flex: 0 0 auto;

      &::before,
      .box::before {
        background-image: linear-gradient(
          182.66deg,
          #2c3246 9%,
          #1f283a 97.78%
        );
      }

      &-box {
        padding: 26px 12px 19px 16px;
        border: 1px dashed #353d4f;
        @extend %radius-8;
        height: 100%;

        .title {
          font-weight: 500;
          line-height: 24px;
          color: #8c90a1;
        }

        .progress {
          background-color: #dbe1f3;
          max-width: 100%;
          margin: 16px 0 11px;
          height: 16px;

          &,
          span {
            border-radius: 72px;
          }

          span {
            width: 75%;
            top: 0;
            left: 0;
            height: 100%;
            background-image: linear-gradient(
              156.94deg,
              #f6509c -115.54%,
              #8f2ffd 94.24%
            );
          }
        }

        .result {
          font-weight: 900;
          line-height: 25px;
          color: #e248d8;
        }
      }
    }
  }

  .newset-bot {
    &-heading {
      background-image: linear-gradient(
        135.49deg,
        rgba(#2c3246, 0.5) 24.79%,
        rgba(#8f2ffd, 0.5) 100.44%
      );
      border-radius: 9px;
      padding: 7px 8px 6px 16px;
      margin-bottom: 26px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #cacfe1;
        padding-left: 10px;

        &::before {
          top: 50%;
          transform: translateY(-50%);
          border-radius: 9px;
          background-image: linear-gradient(
            135.49deg,
            #f6509c 24.79%,
            #8f2ffd 100.44%
          );
          opacity: 0.81;
          width: 4px;
          height: 15px;
        }
      }

      .btn {
        max-width: 118px;
        height: 38px;
        border-radius: 9px;
        line-height: 38px;
        font-size: 16px;
        font-weight: 500;

        i {
          margin-left: 13px;
          font-size: 9px;
        }
      }
    }

    &-items {
      gap: 13px 0;
    }

    &-item {
      padding: 20px 18px 19px 24px;
      border-radius: 11px;
      background-image: conic-gradient(
        from 58deg at 50% 50%,
        #1d222e 0deg,
        #1f2430 360deg
      );
      flex: 1 0 calc(33.333333% - 45px);

      &:not(:last-child) {
        margin-right: 13px;
      }

      &::before {
        background-image: conic-gradient(
          from 58deg at 50% 50%,
          #8f2ffd 0deg,
          #7819e5 360deg
        );
        opacity: 0;
        transition: all 0.3s ease-in-out;
        border-radius: inherit;
      }

      &::after {
        background-color: #202533;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: all 0.3s linear;
        border-radius: inherit;
        opacity: 0;
      }

      .image {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #252b3a;
        border: 4px solid rgba(#485574, 0.42);
        padding: 8px;

        &::before {
          width: 30px;
          height: 65px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #2d035d;
          filter: blur(18px);
        }
      }

      .name {
        font-size: 14px;
        font-weight: 500;
        font-style: italic;
        line-height: 18px;
        margin: 17px 0 18px;
      }

      .dob-capacity {
        border-radius: 6px;
        background-color: #212633;
        border: 1px dashed #363b46;
        padding: 5px 43px 11px 13px;

        > div {
          font-size: 12px;
          color: #a5aab5;
          line-height: 15px;

          span {
            font-size: 25px;
            font-weight: 600;
            line-height: 30px;
            color: #8c90a1;
          }
        }

        .dob {
          span {
            line-height: 22px;
            font-size: 18px;
            color: #e89323;
          }
        }
      }

      .hobbies {
        line-height: 15px;
        font-size: 10px;
        font-weight: 500;
        color: #8c90a1;
        margin: 14px 0 13px;

        span {
          font-weight: 600;
          color: #fff;
        }
      }

      .pay {
        padding: 9px 12px 7px;
        font-size: 12px;
        font-weight: 500;
        line-height: 15px;
        color: #8c90a1;
        border-radius: 7px;
        background-color: #242a39;

        i {
          font-size: 14px;
          margin-right: 5px;
        }

        b {
          font-size: 18px;
          font-weight: 600;
          line-height: 22px;
          color: #fff;
          margin-left: 5px;
        }
      }

      &:hover {
        &::before {
          opacity: 1;
        }

        &::after {
          top: -7px;
          right: -6px;
          bottom: -8px;
          left: -5px;
          opacity: 1;
        }

        .image {
          background-color: #8f2ffd;
          border-color: #983eff;
        }

        .dob-capacity {
          background-color: #9437ff;

          > div {
            color: #fff;

            span {
              color: #dbe1f3;
            }
          }

          .dob span {
            color: #ffd9eb;
          }
        }

        .hobbies {
          color: #dbe1f3;
        }

        .pay {
          background-color: #6d18cf;
          color: #dbe1f3;

          i {
            color: #dbe1f3;
          }
        }
      }
    }

    .btn-add {
      width: 85px;
      background-image: linear-gradient(180deg, #1d222e 0%, #1e2638 100%);
      border-radius: 16px;
      border: 1px dashed #acb3c9;
      font-size: 17px;
      color: #acb3c9;
    }
  }

  .last-projects {
    margin-top: 103px;

    &-heading {
      background-color: #202533;
      border-radius: 12px 12px 0 0;
      padding: 20px 29px 20px 28px;

      .title {
        font-size: 16px;
        font-weight: 400;
        color: #f6faff;
        line-height: 21px;
        padding-left: 5px;

        &::before {
          top: 50%;
          transform: translateY(-50%);
          background-color: #df8228;
          border-radius: 20px;
          width: 3px;
          height: 12px;
        }
      }

      .btn {
        height: 43px;
        line-height: 43px;

        &:first-child {
          max-width: 119px;
          width: 119px;
          margin-right: 7px;
        }

        &:last-child {
          max-width: 108px;
          width: 108px;
        }
      }
    }

    &-body {
      padding: 27px 29px;
      background-color: #1d222e;
      border-radius: 0 0 12px 12px;

      .table {
        label {
          input:checked + span {
            background-color: #8f2ffd;
          }
        }
        
        tbody {
          tr {
            &::after {
              background-image: linear-gradient(
                156.44deg,
                #8f2ffd 33.69%,
                #f6509c 84.82%
              );
            }
          }
        }
      }
    }

    @include xs {
      &-heading {
        padding: 28px 15px 18px 11px;

        .title {
          margin-bottom: 14px;
        }

        .btn {
          &:first-child,
          &:last-child {
            max-width: 50%;
            width: 50%;
          }
        }
      }

      &-body {
        padding: 24px 12px 34px;
      }
    }
  }

  &-logo-bottom {
    margin-top: 62px;
    padding: 34px 12px 14px;

    &::before {
      background-image: url("./../images/background/bg-bootom-logo.png");
      top: 0;
      right: -12px;
      bottom: 0;
      left: -12px;
    }

    &::after {
      background-image: url("./../images/background/bg-bootom-logo-two.png");
      width: 364px;
      height: 252px;
      filter: blur(20px) opacity(0.09);
    }
  }

  @include xl {
    .newset-bot {
      &-item {
        padding: 20px 12px 19px;

        .dob-capacity {
          padding: 5px 16px 11px 8px;
        }

        .pay {
          padding: 9px 8px 7px;
        }
      }
    }
  }

  @include md {
    padding-bottom: 0;

    .my-statistics {
      &-wrapper {
        overflow: auto hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0 12px;
        margin: 0 -12px;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      &-left {
        max-width: none;
        flex: 0 0 105%;
      }
    }

    .newset-bot {
      &-item {
        flex: 1 0 calc(50% - 56px);
      }
    }
  }

  @include sm {
    .my-statistics {
      &-left {
        flex: 0 0 140%;
      }
    }

    .newset-bot {
      &-item {
        padding: 20px 8px 19px;
        flex: 1 0 calc(50% - 54px);

        &:not(:last-child) {
          margin-right: 11px;
        }

        .pay {
          b {
            font-size: 16px;
          }
        }
      }
    }
  }

  @include xs {
    .my-statistics {
      &-left {
        flex: 0 0 195%;
      }
    }

    .newset-bot {
      &-item {
        flex: 1 0 calc(100% - 96px);
      }
    }
  }

  @include media("max", 419px) {
    .my-statistics {
      &-left {
        flex: 0 0 261%;
      }
    }
  }

  @include media("max", 369px) {
    .newset-bot {
      &-heading {
        .title,
        .btn {
          font-size: 12px;
        }
        .btn {
          max-width: 94px;
        }
      }

      &-item {
        flex: 1 0 calc(100% - 71px);
      }

      .btn-add {
        width: 60px;
      }
    }
  }
}