.dashbord {
  .settings {
    .card {
      background: #1D222E url('./../images/background/bg-settiungs.png') 0 0 no-repeat;
      background-size: 100% 100%;
      padding-bottom: 0;

      &::before {
        top: 4px;
        right: -8px;
        left: -8px;
        @extend %radius-12;
        background-color: rgba(#1D222E, .5);
      }

      &-heading {
        padding: 25px 22px 25px 40px;
        margin-bottom: 0;

        .card-title {
          font-size: 16px;
          font-weight: 500;
          line-height: 19px;
          padding-left: 0;

          i {
            font-size: 22px;
            margin-right: 15px;
          }
        }
      }

      &-body {
        padding: 0;
      }
    }

    &-links {
      background-color: #222837;
      border: 0 0 0 12px;
      padding: 33px 18px 33px 20px;
      max-width: 228px;
      flex: 0 0 auto;

      li {
        &:not(:last-child) {
          margin-bottom: 10px;
        }

        a {
          @extend %radius-8;
          padding: 0 23px;
          line-height: 55px;
          font-size: 14px;
          font-weight: 500;
          color: #8c90a1;

          &.active,
          &:hover {
            background-color: rgba(#fff, 0.03);
            color: #fff;
          }
        }
      }
    }

    &-content {
      padding: 49px 39px 40px 34px;
      max-width: 100%;

      .card-title {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 26px;
        padding-left: 9px;

        &::before {
          width: 5px;
          height: 14px;
          border-radius: 3px;
        }
      }

      .btn {
        box-shadow: 0 3px 30px rgba(#1b7ef0, 0.22);
        max-width: 182px;
        height: 49px;
        line-height: 49px;
      }
    }

    @include sm {
      .card {
        background: transparent;
      }
      
      &-links {
        max-width: 100%;
        border-radius:  0 0 12px 12px;
      }

      &-content {
        margin-top: 45px;
        border-radius: 12px;
        background-color: #1D222E;
        padding: 42px 38px;

        .btn {
          max-width: 100%;
        }
      }
    }

    @include xs {
      &-content {
        padding: 42px 24px;
      }
    }
  }
}