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

      &::before {
        background-color: rgba(#1D222E, .5);
        top: 6px;
        right: -7px;
        left: -7px;
        @extend %radius-12;
      }
      
      &-heading {
        padding: 19px 26px 17px;
      }
    }
    
    &-info {
      img {
        border-radius: 20px;
        margin-right: 21px;
      }

      .detail {
        .name {
          color: #F6FAFF;
          line-height: 21px;
          margin-bottom: 8px;
        }

        label {
          border-radius: 5px;
          max-width: 72px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background-image: linear-gradient(138.84deg, #FBAD25 -0.9%, #FA4B68 91.06%);
          cursor: pointer;
          margin-right: 5px;
        }

        .remove-avatar {
          width: 30px;
          height: 30px;
          background-color: #2B3141;
          border-radius: 5px;
          color: #8C90A1;
          font-size: 18px;

          &:hover {
            background-color: #C64E5E;
            color: #fff;
          }
        }
      }
    }

    .notification-email {
      border-radius: 5px;
      margin-bottom: 13px;
      border: 1px solid rgba(#fff, .05);
      height: 53px;
      line-height: 53px;
      padding: 0 17px 0 19px;
      font-size: 12px;
      font-weight: 500;
      color: #8C90A1;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .btn {
      box-shadow: 0 3px 30px rgba(#1B7EF0, .22);
      max-width: 182px;
      height: 49px;
      line-height: 49px;
      border-radius: 9px;
      margin-top: 15px;
    }

    @include md {
      .card {
        background-size: cover;
        background-position: center;
      }
    }

    @include sm {
      .row {
        *:nth-child(6) {
          order: 999;

          .notification-email {
            margin-top: 35px;
          }
        }
      }
    }
  }
}