 .ewallet-main-container {
  width: 97%;
  margin-left: $ewallet-screen-default-size-px / 2;
  .ewallet-container-title {
    font-size: $ewallet-container-font-size;
    font-weight: bold;
    color: $ewallet-container-title-color;
  }
  .ewallet-table-wrapper {
    @extend  .my-3 ;
    min-width: 620px;
    width: 100%;

    .pagination {
      padding-bottom: $ewallet-screen-default-size-px - 5;
    }
  }
  .ewallet-balance {
    @extend  .py-3 ;
    min-width: $ewallet-screen-lg-size-px * 7;
    .ewallet-balance-info {
      min-width: ($ewallet-screen-lg-size-px * 3) + 25;
      @extend  .col-4 ;
      @extend  .col-xl-4 ;
      @extend  .col-lg-4 ;
      @extend  .col-md-4 ;
      @extend  .col-sm-4 ;
    }
    .ewallet-balance-process {
      min-width: ($ewallet-screen-lg-size-px * 6) + 10;
      @extend  .col-8 ;
      @extend  .col-xl-8 ;
      @extend  .col-lg-8 ;
      @extend  .col-md-8 ;
      @extend  .col-sm-8 ;
      @extend  .align-self-center ;
      text-align:right;
      @include media-breakpoint-down(md) {
        margin-top: $ewallet-screen-default-size-px / 3;
        text-align: right;
      }
      @include media-breakpoint-down(sm) {
        text-align: right;
        width: 105%;
      }
      @include media-breakpoint-down(xs) {
        text-align: left;
      }
    }
    .ewallet-balance-content {
      font-weight: bolder;
    }
    @include media-breakpoint-down(sm){
      width: 100%;
    }

  }
  .ewallet-fundwithdrawal-modal-title {
    font-style: normal;
    font-size: $ewallet-fundwithdrawal-modal-font-size;
    h6 {
      position: relative;
      margin-left: $ewallet-screen-default-size-px - 5;
    }
    button {
      display: none !important;
    }
  }
  #fundwithdrawal-modal {
    #withdrawaltype {
      @extend  .col-sm-8 ;
      height: $ewallet-screen-default-size-px + 5;
      border: 1px solid $gray-400;
      font-weight: bold;
      margin-left: $ewallet-screen-sm-size-px + 2;
      .custom-control:first-child {
        position: relative;
        bottom: $ewallet-screen-sm-size-px - 7;
        height: 100%;
        span {
          position: relative;
          top: $ewallet-screen-sm-size-px / 5;
        }
      }
      .custom-control + .custom-control {
        @extend  .pt-1 ;
        margin-left: $ewallet-screen-lg-size-px;
        border-left: 1px solid $gray-400;
        padding-left: $ewallet-screen-sm-size-px;
        height: 100%;
        position: relative;
        .custom-control-label {
          padding-top: $ewallet-screen-sm-size-px - 6;
          margin-left: $ewallet-screen-sm-size-px;
          &:before {
            margin-left: $ewallet-screen-sm-size-px;
          }
          &:after {
            margin-left: $ewallet-screen-sm-size-px;
          }
        }

        span {
          position: relative;
          margin-left: $ewallet-screen-default-size-px / 2;
          bottom: 0px;
        }
      }
    }

    .ewallet-fundwithrdrawal-modal-body {
      font-size: $ewallet-fundwithdrawal-modal-font-size;
      color: $dark;

      select {
        background: none;
        color: $dark;
        border-radius: 0;
        width: 100%;
        height: $ewallet-select-modal-body;
        font-size: $ewallet-balance-bank-font-size;
        border-color: $gray-400;
      }
      input.is-danger{
        border-color: $red;
      }
      input {
        border-radius: 0;
      }
      .required {
        &:after {
          content: ' *';
          color: $red;
        }
      }

      .container-fluid {
        .row {
          @extend  .my-2 ;
        }
        .row:nth-child(3) {
          .row {
            @extend  .mx-1 ;
            @extend  .justify-content-between ;
            margin: 0px !important;
            select {
              width: 45%;
            }
          }
        }
      }
    }

    .ewallet-fundwithrdrawal-modal-footer {
      position: relative;
      width: 50%;
      text-align: right;
      button:nth-child(1), button:nth-child(2) {
        box-shadow: $ewallet-box-shadow;
        &:hover {
          border: none;
        }
      }
      button:nth-child(1) {
        &:hover {
          background: $gray-600;
        }
      }
    }
    .is-danger {
      color: $red;
    }
  }
  .tab-ewallet-title {
    color: $tab-ewallet-title-color;
    font-weight: normal;
  }
  .ewallet-transaction-history-table {
    @extend  .pt-3 ;
    background: $white;
    box-shadow: $ewallet-home-box-shadow;
    -webkit-box-shadow: $ewallet-home-box-shadow;
    -moz-box-shadow: $ewallet-home-box-shadow;

    .ewallet-datetimepicker {
      margin-bottom: $ewallet-datetimepicker-margin-bottom;
      .mx-input {
        border-radius: 0px !important;
        box-shadow: none !important;
      }
      .mx-input-icon__calendar {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' style='enable-background:new 0 0 17.3 16;' xml:space='preserve' width='100%' height='100%' viewBox='-2 -5 30.3 27' fill='#{$datepicker-icon-color}'><path class='st0' d='M0.8,15.9h15.8c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0V1.9c0-0.3-0.3-0.6-0.6-0.6c0,0,0,0,0,0h-3V0.8c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0v0.5H5V0.8c0-0.3-0.3-0.6-0.6-0.6S3.8,0.4,3.8,0.8v0.5h-3c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0v13.4C0.2,15.6,0.4,15.9,0.8,15.9z M1.4,2.5h2.5v0.3c0,0.3,0.3,0.6,0.6,0.6C4.8,3.4,5,3.1,5,2.8c0,0,0,0,0,0V2.5h7.4v0.3c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0V2.5H16V4H1.4V2.5z M1.4,5.2H16v9.5H1.4V5.2z'/> <path class='st0' d='M13,8H4.3C4,8,3.8,8.3,3.8,8.6c0,0.3,0.3,0.6,0.6,0.6H13c0.3,0,0.6-0.3,0.6-0.6C13.6,8.3,13.3,8,13,8z'/> <path class='st0' d='M8.7,10.9H4.3c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.3c0.3,0,0.6-0.3,0.6-0.6 C9.3,11.2,9,10.9,8.7,10.9C8.7,10.9,8.7,10.9,8.7,10.9z'/></svg>") !important;
      }

      @include media-breakpoint-down(sm) {
        width: 90%;
      }
      @include media-breakpoint-down(xs)
      {
        width: 60%;
        line-height: ($ewallet-screen-default-size-px) + 15;
      }
    }

    .ewallet-table-header {
      font-style: normal;
      font-size: $ewallet-table-font-size;
      background: $ewallet-table-header-background;
    }

    .ewallet-table-row {
      @extend  .pl-1 ;
      color: $ewallet-table-row-color;
      font-size: $ewallet-table-font-size;
      .row-green {
        color: green;
      }
      .row-blue {
        color: blue;
      }
    }

    .table thead th {
      font-weight: normal;
    }

    .ewallet-table-style, .ewallet-table-style-cnt {
      border-right: 1px solid $gray-300;
      border-left: 1px solid $gray-300;
      text-align: center;
    }
    .ewallet-table-left {
      border-left: 1px solid $gray-300;
    }
    .ewallet-transaction-date {
      border-left: 1px solid #333333;
    }
    .nav-tabs .nav-link.active {
      background: $white;
      font-weight: bold;
      box-shadow: $ewallet-active-tab-box-shadow;
      -webkit-box-shadow: $ewallet-active-tab-box-shadow;
      -moz-box-shadow: $ewallet-active-tab-box-shadow;
    }
  }
}

 .ewallet {
   .responsive-tab {
     .navbar-nav {
       .nav-item {
         padding:                        0px;
         position:                       relative;

         a {
           height:                     100%;
           width:                      100%;
           padding:                    0.5rem 1rem;
           display:                    block;
           color:                      $black;
         }
         &.active {
           background:                 $white !important;
           box-shadow:                 $dashboard-panel-element-box-shadow;
           font-weight:                bold;

           &:before {
             bottom:                   -12px;
             left:                     0px;
             background:               $white;
             content:                  '\00a0';
             position:                 absolute;
             width:                    100%;
           }
           @include media-breakpoint-down(sm) {
             background:               transparent !important;
             box-shadow:               $dashboard-panel-element-box-shadow;
           }
         }
         &:hover {
           background: rgba(255,255,255,0.5)
         }
         @include media-breakpoint-down(sm) {
           background:                 $white;
           border:                     1px solid $light;
           border-top:                 none;

           a {
             padding:                  .9rem 1rem;
           }
         }
       }
     }
   }
   .to-date-picker {
     @include media-breakpoint-down(md) {
       direction: rtl;
        .input-group, .calender-container {
          direction: ltr;
        }
     }
   }
 }
