.dashboard-content {
  #ewallet-fund-container {
    .breadcrumb {
      background: $gray-100;
      margin-bottom: 0px;
      .breadcrumb-item:first-child {
        a {
          color: $gray-600;
        }
      }
    }

    .breadcrumb-item+.breadcrumb-item::before {
      content: '>';
      color: $pink;
    }

    .container-fluid {
      .ewallet-fund-title {
        font-size: $ewallet-activation-fund-title-font-size;
        color: $dark;
        font-weight: bold;
      }
    }

    .ewallet-fund-step-title {
      color: $blue;
      font-size: $ewallet-balance-bank-font-size;
    }

    .row {
      padding-left: $ewallet-activation-fund-row-p-l;
      .normal-circle {
        @include circle-text(25px);
        @extend  .my-3 ;
        color: $gray-600;
        background-color: $gray-200;
        border: 1px solid $gray-400;
        padding-left: $ewallet-circle-step-p-l !important;
      }
    }

    .line-step {
      display: block;
      background: $gray-400;
      border: 1px solid $gray-400;
      width: 3%;
      height: 1px;
      margin-top: $ewallet-line-step-m-t !important;
    }

    .active-step {
      color:  $white !important;
      background-color: $blue !important;
    }

    .completed-step {
      color:  $white !important;
      background-color: $gray-400 !important;
    }

    .ewallet-fund-step-circle {
      margin-bottom: -0.8%;
    }

    #ewallet-fund-body, .ewallet-fund-note {
      @extend  .my-3 ;
      background-color: $white;
      border: 1px solid $gray-400;
      border-radius: 4px;
      box-shadow: $ewallet-box-shadow;
      font-size: $ewallet-activation-fund-font-size;
    }
    .ewallet-activation-title {
      font-size: 2em;
      padding-top: $ewallet-container-margin-left;
      color: $dark;
    }

    .activation-first-step-title {
      padding-top: 13px;
      @include media-breakpoint-down(xl) {
        position: relative;
        min-width: 120px;
        max-width: 130px;
      }
      @include media-breakpoint-down(sm) {
        padding-left: 0px;
      }
    }
    .activation-first-step-content {
      .select-country-code {
        display: inline-block;
      }
      .mobile-number {
        display: inline;
        margin-left: 10px;
      }
      @include media-breakpoint-down(lg) {
        position: relative;
        min-width: 300px;
      }
      @include media-breakpoint-down(sm) {
        padding-left: 0px !important;
      }
    }

    .activation-body-title {
      color: $blue;
    }

    .ewallet-activation-content {
      margin-top: 5%;
      width: 90%;
      background-color: $white;
      border: 1px solid $gray-400;
      border-radius: 4px;
      box-shadow: $ewallet-box-shadow;
      font-size: $ewallet-balance-font-size;

      button {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 20px;
        color: $white;
        background: $blue;
        border: 0;
        box-shadow: $ewallet-box-shadow;
      }
    }

    .ewallet-fund-note {
      @extend  .py-2 ;
      @extend  .px-4 ;
      width: 50%;

      @include media-breakpoint-down(sm) {
        width: 100%;
      }
    }
  }

  #ewallet-fund-body {
    min-width: 400px;
    width: 80%;
    .row {
      @extend  .my-2 ;
    }
    .row-primary {
      color: $primary;
    }
    .col-sm-5 {
      text-align: right;
    }
    .fund-first-step-body {
      @extend  .col-8 ;
      @extend  .align-self-start ;
      @extend  .mb-5 ;
      @extend  .mt-4 ;
      .required {
        &:after {
          content: ' *';
          color: $red;
          &:after {
            content: ' :';
          }
        }
      }
      .is-danger {
        color: $red;
        border-color: $red;
      }
      input {
        color: $dark;
      }
      @include media-breakpoint-down(sm) {
        max-width: 100%;
        width: 100%;
      }
    }
    label.recipient {
      &:after {
        width:100%;
        height:1px;
        background: $blue;
      }
    }
    .ewallet-first-step-left-align {
      text-align: left !important;
    }
    .ewallet-thirdstep-recipient {
      margin-left: 2px;
    }
    .label-content {
      color: $black;
    }
    .ew-lbl {
      @extend  .col-12 ;
      @extend  .col-xl-5 ;
      @extend  .col-lg-5 ;
      @extend  .col-md-5 ;
      @extend  .col-sm-6 ;
    }
    .ew-cnt {
      @extend  .col-12 ;
      @extend  .col-xl-7 ;
      @extend  .col-lg-7 ;
      @extend  .col-md-7 ;
      @extend  .col-sm-6 ;
      color: $dark;
    }

    .ewallet-red-star {
      content: '*';
      color: $red;
    }

    .fund-first-step-footer {
      width: 100%;
      @extend  .justify-content-end ;
      @extend  .mr-3 ;
      @extend  .mb-5 ;
      margin-bottom: $ewallet-footer-step-m-b !important;

      button:first-child, button:nth-child(2) {
        background: $white;
        color: $gray-600;
        width: 15%;
        height: $ewallet-screen-default-size-px + 4;
        padding: 0;
      }
      button:first-child {
        border: 1px solid $gray-600;
        @include media-breakpoint-down(sm) {
          width: 40%;
        }
      }
      button:nth-child(2) {
        border: 1px solid $blue;
        color: $blue;
        background: $white;
        margin-left: 0.75rem !important;
        @include media-breakpoint-down(sm) {
          width: 40%;
        }
      }

      .fund-last-step-print {
        border: 1px solid $blue !important;
        color: $blue !important;
        background: $white;
        width: 15% !important;
        @include media-breakpoint-down(md) {
          width: 40% !important;
        }
      }

      .fund-last-step-done {
        @extend  .ml-2 ;
        background: $blue !important;
        color: $white !important;
        border: none !important;
        @include media-breakpoint-down(md) {
          width: 40% !important;
        }
      }



      .fund-print-trans {
        .fund-print {
          width: 20% !important;
          border: 1px solid $blue;
          color: $blue;
          @include media-breakpoint-down(sm) {
            width: 35% !important;
          }
        }
        .fund-trans {
          width: 55% !important;
          margin-left: 2%;
          @include media-breakpoint-down(sm) {
            width: 60% !important;
          }
        }
        @include media-breakpoint-down(xl) {
          text-align: right;
          left: 21%;
        }
        @include media-breakpoint-down(lg) {
          text-align: right;
          left: 20%;
        }
        @include media-breakpoint-down(md) {
          text-align: right;
          left: 1%;
        }
        @include media-breakpoint-down(sm) {
          text-align: center !important;
          left: 4%;
        }
      }

      #fund-last-step-done {
        position: relative;
        height: $ewallet-screen-default-size-px + 3;
        padding-top: 1px;
        padding-left: 5px;
        text-align: right;
        width: 100%;
        button {
          background: $blue;
          width: 37% !important;
          color: $white;
          border: none;
        }
        @include media-breakpoint-down(md) {
          text-align: left;
          margin-right: 23px;
        }

        @include media-breakpoint-down(sm) {
          margin-top: 10px;
          text-align: right;
          margin-right: -25px;
        }
      }

      @include media-breakpoint-down(sm) {
        justify-content: center !important;
      }
    }

    input {
      border-radius: 0;
    }

    .hline {
      position: relative;
      width:70% !important;
      height:1px !important;
      background: $blue !important;
      top: $ewallet-horizontal-line-top;
      margin-left: $ewallet-horizontal-line-m-l;
    }

    .ewallet-to-recipient {
      color: $blue;
    }

    .ewallet-thirdstep-success {
      color: $green;
      font-weight: bold;
    }
    .is-danger {
      color: $red;
      border-color: $red;
    }

    @include media-breakpoint-down(md) {
      width: 100% !important;
    }
    @include media-breakpoint-down(sm) {
      width: 100% !important;
    }
  }
}
.ewallet-activation {
  max-width: 800px;
  .ewallet-form-field {
    min-height: 350px;

    @include media-breakpoint-down(sm) {
      min-height: 430px;
    }
  }
}
