this is my local colors file

```scss
//Base Colors
$lightHue: 0;
$darkHue: 0;
$primaryHue: 208;
$primaryRcHue: 76;
$secondaryHue: 33;
$successHue: 77;
$dangerHue: 3;
$warningHue: 42;

//Light Colors
$light: hsl($lightHue, 0%, 100%); //#FFFFFF
$light10067: hsla($lightHue, 0%, 100%, 0.67); //#FFFFFF - 60%
$light900: hsl($lightHue + 40, 6%, 90%); //#e8e7e5
$light850: hsl($lightHue, 0%, 85%); //#d9d9d9
$light980: hsl($lightHue, 0%, 98%); //#FAFAFA

// /light alpha colors
$light950alpha160: hsla($lightHue, 100%, 95%, 0.16); //#ffe7e729
$light920alpha330: hsla($lightHue, 80%, 92%, 0.33); //#fbdbdb54

//Dark Colors
$dark: hsl($darkHue, 0%, 0%); //#000000,
$dark200: hsl($darkHue, 0%, 20%); //#333333
$dark450: hsl($darkHue, 0%, 45%); //#747474
$dark700: hsl($darkHue, 0%, 7%); //#121212
$dark900: hsl($darkHue, 0%, 90%); //#E4E4E4
$dark810: hsl($darkHue, 0%, 81%); //#D0D0D0
$dark320: hsl($darkHue + 360, 73%, 32%); //#8b1617
$dark00025: hsla($darkHue, 0%, 0%, 0.25); //#00000040

$success: hsl($successHue, 50%, 44%); //#88A738
$success650: hsl($successHue - 27, 96%, 65%); //#fbdf4f
$hyperlink: hsl($primaryHue + 2, 85%, 60%);
$lightblue1: hsl($primaryHue - 12, 100%, 97%);
$darkblue1: hsl($primaryHue - 1, 97%, 54%);
$lightyellow1: hsl($secondaryHue + 6, 100%, 96%);
$lightblue2: hsl($primaryHue - 12, 70%, 95%); //E8F6FB
$lightblue3: hsl($primaryHue - 8, 36%, 77%); //B1CCDA
$danger1: hsl($dangerHue, 82%, 50%); //E82217
$light910: hsl($lightHue + 60, 87%, 91%); //FCFCD3
$light800: hsl($lightHue, 0%, 80%); //CDCDCD
$light960: hsl($dangerHue, 100%, 96%); //FFECEB
$dark550: hsl($dangerHue + 19, 84%, 55%); //ED6A2C
$success820: hsl($successHue, 71%, 82%); //E0F2B1
$success390: hsl($successHue + 60, 46%, 39%); //369350
$warning: hsl($warningHue, 100%, 96%); //#FFF9EB
$warning092: hsl($warningHue - 10, 75%, 92%); //#FAEDDD
$warning930: hsl($warningHue - 20, 100%, 93%); //FFE9DC
$warning940V1: hsl($warningHue + 3, 100%, 94%); //#FFF7DF
$warning940: hsl($warningHue + 18, 94%, 94%); //#FEFEE1
$primary600: hsl($primaryHue - 1, 100%, 34%); //#0060AC
$danger870: hsl($dangerHue + 11, 84%, 87%); //#FAD1C4
$danger930: hsl($dangerHue + 11, 100%, 93%); //#FFE2D9
$danger410: hsl($darkHue, 79%, 41%); //#BD1616
$danger550: hsl($dangerHue + 11.32, 77.19%, 55.29%); //#E55F35
$light880: hsl($lightHue, 0%, 88%); //#E0E0E0
$yellow870: hsl($lightHue + 60, 84%, 87%); //#FAFAC4
$yellow940: hsl($lightHue + 60, 94%, 94%); //#fefee1
$light640: hsl($lightHue + 44, 10%, 64%); //#ADA89A
$yellow640: hsl($lightHue + 40, 100%, 81%); //#ffdfa0
$yellow730: hsl($lightHue + 40, 100%, 73%); //#ffd073
$orange410: hsl($lightHue + 39, 54%, 41%); //#a17a30
$shadow019: hsla($darkHue, 0%, 0%, 0.19); //rgba(0, 0, 0, 0.19)

$danger880: hsl($dangerHue + 21, 100%, 88%); //#ffdac2
$danger930v1: hsl($dangerHue + 19, 100%, 93%); //#ffe8db
$danger880v1: hsl($dangerHue + 21, 100%, 88%); //#ffeadb
$danger940: hsl($dangerHue + 40, 100%, 94%); //#fff6e0

$danger950: hsl($dangerHue + 37, 96%, 95%); //#fef6e6
$danger870v1: hsl($dangerHue + 22, 71%, 87%); //#f5dac6
$darkgray400: hsl($lightHue + 0, 0%, 40%); //#666666
$lightblue950: hsl($lightHue + 198, 86%, 95%); //#E5F6FD
$yellow830: hsl($lightHue + 40, 100%, 83%); //#FFE2A8
$light970: hsl($lightHue + 45, 100%, 97%); //#FFFBEF
$gray970: hsl($lightHue, 0%, 97%); //#F8F8F8
$yellow890: hsl($lightHue + 60, 86%, 89%); //#FBFBCA
$warning370: hsl($lightHue + 19, 67%, 37%); //#9C471F
$yellowlight740: hsl($lightHue + 60, 24%, 74%); //#CCCCAB
$darkyellow740: hsl($lightHue + 45, 49%, 74%); //#DDCC9B
$brown190: hsl($lightHue + 26, 100%, 19%); //#612A00
$graylight950: hsl($lightHue, 0%, 95%); //#f3f3f3
$darkdanger550: hsl($lightHue, 69%, 55%); //#db3d3d

$lightyellow890: hsl($lightHue + 44, 100%, 89%); //#fff1c9
$lightyellow910: hsl($lightHue + 44, 100%, 91%); //#fff3d3
$hyperlink600: hsl($primaryHue + 4, 85%, 60%); //#4091F0
$lighteryellow840: hsl($lightHue + 60, 37%, 84%); //#E5E5C7
$darkblue340: hsl($lightHue + 207, 100%, 34%); //#005fad

$light670: hsl($lightHue, 0%, 67%); //#ACACAC
$danger440: hsl($darkHue + 347, 63%, 44%); //#BD1616
$yellow840: hsl($lightHue + 41, 93%, 84%); //#fce3af
$light940: hsl($lightHue + 24, 100%, 94%); //#ffede1
$yellow740: hsl($lightHue + 25, 100%, 74%); //#FFB27B
$light500: hsla($lightHue, 0%, 0%, 0.5); //hsla(0, 0%, 0%, 0.5)
$darkblue200: hsl($primaryHue + 8.14, 82.18%, 19.8%); //#092a5c
$warning410: hsl($darkHue, 93.24%, 40.59%); //#c80707
$light510: hsl($lightHue, 0%, 51%); //#c80707
$warning500: hsl($warningHue + 308, 100%, 50%); //#c80707
$warning810: hsl($warningHue - 2, 100%, 81%); //#FFE0A0
$warning970: hsl($warningHue + 4, 100%, 97%); //#FFFCF2
$light950: hsl($lightHue, 0%, 95%); //#F1F1F1
$primary560: hsl($primaryHue + 6, 84%, 56%); //#2F80ED
$dark887: hsl($darkHue + 4, 88%, 7%); //#200402
$warning640: hsl($warningHue + 13, 76%, 74%); //#EFE78B
$warning860: hsl($warningHue + 13, 100%, 86%); //#FFF9B6
$dark230: hsl($darkHue, 100%, 23%); //#760000,
$warning697: hsl($warningHue + 18, 6%, 97%); //#F7F7F6
$dark590: hsl($darkHue + 30, 1%, 59%); //#989796
$warning740: hsl($warningHue + 13, 100%, 74%); //#FFF478
$success680: hsl($successHue + 9, 75%, 68%); //#B6EB72
$success110: hsl($successHue - 2, 100%, 10%); //#263300
$warning660: hsl($warningHue + 1, 100%, 66%); //#FFCF52
$danger000: hsl($dangerHue + 8, 100%, 17%); //#571000
$primary930: hsl($primaryHue + 17, 24%, 93%); //#EAECF2
$danger840: hsl($dangerHue - 3, 100%, 84%); //#ffafaf
$danger290: hsl($dangerHue, 92%, 29%); //#8C0606
$dark870: hsl($darkHue, 0%, 87%); //#dedede
$dark560: hsl($darkHue, 0%, 56%); //#909090
$darkblue340: hsl($lightHue + 207, 100%, 34%); //#005fad
$warningHue440: hsl($warningHue - 10, 100%, 44%); //#df7800
:export {
  light: $light;
  light900: $light900;
  light850: $light850;
  light10067: $light10067;
  light950alpha160: $light950alpha160;
  light920alpha330: $light920alpha330;
  dark: $dark;
  dark200: $dark200;
  dark450: $dark450;
  dark700: $dark700;
  dark810: $dark810;
  dark900: $dark900;
  dark320: $dark320;
  dark00025: $dark00025;

  success: $success;
  success650: $success650;
  hyperlink: $hyperlink;
  lightblue1: $lightblue1;
  lightblue2: $lightblue2;
  lightblue3: $lightblue3;
  darkblue1: $darkblue1;
  lightyellow1: $lightyellow1;
  danger1: $danger1;
  light910: $light910;
  light800: $light800;
  light960: $light960;
  dark550: $dark550;
  success820: $success820;
  success390: $success390;
  warning: $warning;
  warning092: $warning092;
  primary600: $primary600;
  danger870: $danger870;
  danger930: $danger930;
  danger410: $danger410;
  danger550: $danger550;
  light880: $light880;
  light670: $light670;
  danger440: $danger440;
  yellow840: $yellow840;
  light940: $light940;
  yellow740: $yellow740;
  light500: $light500;
  darkblue200: $darkblue200;
  warning410: $warning410;
  light510: $light510;
  warning500: $warning500;
  yellow870: $yellow870;
  yellow940: $yellow940;
  light640: $light640;
  yellow640: $yellow640;
  yellow730: $yellow730;
  orange410: $orange410;
  shadow019: $shadow019;
  danger880: $danger880;
  danger930v1: $danger930v1;
  danger880v1: $danger880v1;
  danger940: $danger940;
  danger950: $danger950;
  danger870v1: $danger870v1;
  warning940: $warning940;
  darkgray400: $darkgray400;
  lightblue950: $lightblue950;
  yellow830: $yellow830;
  light970: $light970;
  gray970: $gray970;
  yellow890: $yellow890;
  warning370: $warning370;
  warning930: $warning930;
  warning940V1: $warning940V1;
  yellowlight740: $yellowlight740;
  darkyellow740: $darkyellow740;
  brown190: $brown190;
  graylight950: $graylight950;
  darkdanger550: $darkdanger550;
  lightyellow890: $lightyellow890;
  lightyellow910: $lightyellow910;
  hyperlink600: $hyperlink600;
  lighteryellow840: $lighteryellow840;
  darkblue340: $darkblue340;
  warning810: $warning810;
  dark887: $dark887;
  warning970: $warning970;
  light950: $light950;
  primary560: $primary560;
  warning640: $warning640;
  warning860: $warning860;
  dark230: $dark230;
  warning697: $warning697;
  dark590: $dark590;
  warning740: $warning740;
  success680: $success680;
  success110: $success110;
  warning660: $warning660;
  danger000: $danger000;
  primary930: $primary930;
  danger840: $danger840;
  danger290: $danger290;
  dark870: $dark870;
  dark560: $dark560;
  warningHue440: $warningHue440;
}
```

this my component styles in sass file

```sass
@use 'sass:math';
@use '~mystique/style-dir/base/color/colors-bundle.scss' as mystique-colors;
@use '~mystique/style-dir/abstracts/mixins.scss' as abstract-mixins;
@use '~mystique/style-dir/lego-component-lib/_mixins.scss' as mixins;
@use './colors.scss' as local-colors;
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*,
::after,
::before {
  box-sizing: border-box;
}

.main-content {
  padding: 0;
}

.withdraw-app {
  @media only screen and (min-width: 1024px) {
    margin: 0 0px;
  }
}

#withdraw-app {
  .withdraw-container {
    padding: 7px 10px;
    font-size: 0.75rem;
    margin: 0 0 2% 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    clear: both;
    color: mystique-colors.$text-gray39;
    line-height: 20px;
    .box-leftholder .leftcolum .col-two {
      &.verifiedTag {
        color: local-colors.$success110;
      }
      &.pendingTag {
        color: local-colors.$danger000;
      }
      &.failedTag {
        color: local-colors.$danger000;
      }
    }
    .verifiedTag {
      background: local-colors.$success680;
      color: local-colors.$success110;
      @extend .tagStyle;
    }

    .pendingTag {
      background: local-colors.$warning660;
      color: local-colors.$danger000;
      @extend .tagStyle;
    }

    .failedTag {
      background: local-colors.$danger840;
      color: local-colors.$danger290;
      @extend .tagStyle;
    }

    @media only screen and (max-width: 479px) {
      padding: 7px 5px;
    }

    @media only screen and (min-width: 350px) {
      font-size: 13px;
    }

    @media only screen and (min-width: 768px) {
      font-size: 16px;
    }

    @media only screen and (min-width: 1023px) {
      margin: 0;
      padding: 0;
      font-size: 13px;
    }

    .box-leftholder {
      display: flex;
      align-items: center;

      .leftcolum {
        width: 100%;
        line-height: 21px;
        display: flex;
        flex-direction: row;

        @media only screen and (orientation: portrait) {
          display: flex;
          align-items: center;
        }
        @media only screen and (min-width: 500px) and (orientation: landscape) {
          flex-direction: column-reverse;
          .col-two {
            color: local-colors.$dark450;
            > span {
              display: none;
            }
          }
        }
      }
    }

    .withdrawhistory-link {
      flex-shrink: 0;
      font-size: 0.75rem;
      color: local-colors.$darkblue340;
      cursor: pointer;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;

      &.disable {
        color: mystique-colors.$text-gray48;
        cursor: default;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        display: none;
      }
    }

    .withdrawhistory-linkland {
      display: none;

      &.disable {
        color: mystique-colors.$text-gray48;
        cursor: default;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        padding-left: 5px;
        flex-shrink: 0;
        font-size: 13px;
        color: mystique-colors.$text-blue1;
        display: inline-block;
        cursor: pointer;
        margin-left: auto;
      }

      @media only screen and (min-width: 700px) {
        padding-left: 10px;
        font-size: 0.8rem;
      }

      @media only screen and (min-width: 768px) {
        font-size: 16px;
      }

      @media only screen and (min-width: 800px) {
        padding-left: 18px;
      }

      @media only screen and (min-width: 1024px) {
        font-size: 13px;
        padding-left: 25px;
      }

      @media screen and (orientation: portrait) {
        display: none;
      }
    }

    .col-one {
      font-size: 14px;

      @media only screen and (min-width: 500px) and (max-width: 645px) {
        font-size: 2.15vw;
      }

      @media only screen and (min-width: 1024px) {
        font-size: 14px;
      }
    }

    .amount-withdraw {
      font-size: 16px;
      @media only screen and (orientation: portrait) {
        font-size: 12px;
        margin-left: 4px;
      }
      b {
        padding-left: 0.3rem;
        font-size: 18px;
        @media only screen and (orientation: portrait) {
          padding-left: 0.1rem;
          font-size: 12px;
        }
      }
    }

    .col-two {
      font-size: 12px;

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        font-size: 11px;
      }

      @media only screen and (min-width: 600px) and (orientation: landscape) {
        font-size: 12px;
      }

      &.account-holdername {
        font-weight: bold;
        font-size: 14px;
        word-wrap: break-word;
      }
    }

    .labelinput-button {
      display: flex;
    }

    .labelinput-box {
      flex: 0 0 70%;

      @media only screen and (min-width: 414px) and (orientation: portrait) {
        flex: 0 0 62%;
      }

      @media only screen and (min-width: 760px) and (orientation: portrait) {
        flex: 0 0 45%;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 0 0 53%;
      }
    }

    .label-button {
      flex: 0 0 25%;
      margin-left: auto;
      @media only screen and (min-width: 320px) and (max-width: 400px) {
        margin-top: 2%;
      }
      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 0 0 47%;
      }
    }

    .btn-linkbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .labelinput-boxtwo {
      flex: 0 0 60%;

      @media only screen and (min-width: 414px) and (orientation: portrait) {
        flex: 0 0 62%;
      }

      @media only screen and (min-width: 760px) and (orientation: portrait) {
        flex: 0 0 45%;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 0 0 53%;
      }
    }

    .label-buttontwo {
      margin-top: 2%;
      flex: 0 0 35%;
      margin-left: auto;
      text-align: right;

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 0 0 48%;
        text-align: inherit;
        margin-left: 4rem;
      }
    }

    .labelinput-bank {
      display: flex;

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 1 1 auto;
      }
    }

    .labelinput-boxthree {
      flex: 0 0 60%;

      @media only screen and (min-width: 414px) and (orientation: portrait) {
        flex: 0 0 62%;
      }

      @media only screen and (min-width: 760px) and (orientation: portrait) {
        flex: 0 0 45%;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 1 1 auto;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        &.m-lrsection {
          margin: 0 15px;
        }
      }
    }

    .label-buttonthree {
      margin: 0.9rem 0 0 0;
      flex: 0 0 39%;
      margin-left: auto;
      text-align: right;
      &.bankSearch {
        margin: 2% 0 0 0;
        @media only screen and (min-width: 1000px) and (orientation: landscape) {
          margin: 1% 0 0 0;
        }
      }
      @media only screen and (min-width: 500px) and (orientation: landscape) {
        margin: 0.9rem 0;
        flex: 0 0 16%;
      }

      @media only screen and (min-width: 1000px) and (orientation: landscape) {
        width: 100%;
        margin: 0.9rem 0 0 0;
      }

      &.pennywrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-basis: 100%;

        @media only screen and (max-width: 479px) {
          align-items: flex-end;
          flex-direction: column;
        }

        .pw1 {
          flex-basis: auto;
          padding-right: 10px;
          align-self: flex-start;
          padding-bottom: 5px;
        }

        .pw2 {
          flex-basis: auto;
          align-items: flex-end;
          display: flex;
          justify-content: flex-end;

          .search-btn {
            font-size: 14px !important;

            @media only screen and (min-width: 320px) and (max-width: 360px) and (orientation: portrait) {
              font-size: 12px !important;
            }
          }
        }
      }
    }

    .m-tb {
      margin: 0.5rem 0 1rem 0;
    }

    .m-tbvalue {
      @media only screen and (orientation: portrait) {
        margin: 0.5rem 0 0rem 0;
      }

      @media only screen and (min-width: 400px) and (orientation: landscape) {
        margin: 0.5rem 0 0rem 0;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        margin: 0;
      }
    }

    .selectbyoption {
      width: 100%;
      padding: 0;
    }

    .select-tab {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        @include abstract-mixins.borderradius(11px 11px 0 0);
        border: 1px solid mystique-colors.$border-gray31;
        flex: 0 0 50%;
        text-align: center;
        color: mystique-colors.$text-gray33;
        font-size: 0.813rem;
        cursor: pointer;
        padding: 10px 0;
        font-weight: normal;
        background: mystique-colors.$bg-gray40;

        &:last-child {
          border-left: 0;
        }

        &.active {
          background: mystique-colors.$bg-white;
          border-bottom: 0;
        }

        @media only screen and (min-width: 1024px) {
          font-size: 14px;
        }
      }

      &.newTestPath {
        background: local-colors.$warning697;
        @include abstract-mixins.borderradius(7px 7px 0 0);
        position: relative;

        li {
          border: 0;
          background: none;
          color: mystique-colors.$text-gray39;
          position: relative;

          .newTag {
            background: mystique-colors.$bg-red44;
            color: mystique-colors.$text-white;
            font-size: 10px;
            padding: 0px 3px;
            margin-left: 15px;
            position: relative;
            top: -7px;
            display: inline-block;
            line-height: 17px;

            &::before {
              content: '';
              position: absolute;
              border-right: 9px solid mystique-colors.$border-red8;
              border-top: 9px solid transparent;
              border-bottom: 8px solid transparent;
              left: -9px;
              top: 0px;
            }
          }

          &.active {
            font-weight: bold;
            position: relative;
            border: 0;
            background: none;

            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 2px;
              background: mystique-colors.$bg-red44;
              left: 0;
              bottom: 0;
            }
          }
        }
      }
    }

    .p-15 {
      padding: 3%;

      @media only screen and (max-width: 500px) {
        padding: 4%;
      }
    }

    .tabsearch-details {
      padding: 3% 3% 0 3%;
      border: 1px solid mystique-colors.$border-gray31;
      @include abstract-mixins.borderradius(0 0 11px 11px);
      position: relative;
      border-top: 0;

      &.newTestPath {
        border: 0px;
        border-radius: 0px;
        padding: 0;

        .upiForm {
          display: flex;
          flex-direction: row;

          &.bavSection {
            display: block;
          }

          > div {
            flex: 1;
          }

          @media only screen and (max-width: 500px) {
            flex-direction: column;
          }

          .floating-forms {
            display: flex;
            align-items: flex-start;

            &.upiBav {
              margin-bottom: 1%;

              @media only screen and (min-width: 500px) {
                max-width: 77%;
              }
            }
          }

          .withdraw-btn {
            margin: 3px 0 0 1.2rem;
          }

          .input-group {
            flex: 1;
          }
        }

        .upiBankSuggestionBox {
          display: flex;
          flex-direction: row;
          align-items: flex-start;

          @media only screen and (max-width: 500px) {
            margin-top: 0.5rem;
          }

          .upiBankSuggestion {
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            flex: 1;
            margin: 0;

            @media only screen and (min-width: 1024px) {
              max-width: 40rem;
            }
            li {
              padding: 2px 4px;
              color: mystique-colors.$text-gray39;
              border: 1px solid rgba(0, 0, 0, 0.1);
              border-radius: 3px;
              background-color: rgba(0, 0, 0, 0.1);
              margin-top: 0.3rem;

              &.active {
                color: mystique-colors.$text-green1;
                border: 1px solid mystique-colors.$border-green;
                background: transparent;
              }
            }

            li + li {
              margin-left: 10px;
            }
          }

          .withdraw-btn {
            @media only screen and (max-width: 500px) {
              display: none;
            }
          }
        }

        .upiList {
          margin-bottom: 3%;

          li {
            color: mystique-colors.$text-gray39;
            font-size: 0.9375rem;
            padding: 2% 0;
            border-bottom: solid 1px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: row;
            align-items: center;

            @media only screen and (max-width: 500px) {
              padding: 4% 0;
            }

            > div {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              width: 100%;
            }

            .withdrawhistory-link {
              display: block;
            }

            &:first-child {
              padding-top: 0px;
            }
          }

          @media only screen and (max-width: 500px) {
            margin-bottom: 4%;
          }

          [type='radio']:checked,
          [type='radio']:not(:checked) {
            position: absolute;
            left: -9999px;
          }

          [type='radio']:checked + label,
          [type='radio']:not(:checked) + label {
            position: relative;
            padding-left: 28px;
            cursor: pointer;
            line-height: 20px;
            display: inline-block;
            color: mystique-colors.$text-gray6;
            margin-bottom: 0;
            /*&:active{
                      font-weight: bold;
                      color: #3c3c3c;
                    }*/
          }

          [type='radio']:checked + label,
          [type='radio']:not(:checked) + label:active {
            font-weight: 400;
            font-style: normal;
            color: mystique-colors.$text-gray3;
            margin-bottom: 0;
          }

          [type='radio']:checked + label:before,
          [type='radio']:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 2px solid mystique-colors.$text-gray49;
            border-radius: 100%;
            background: mystique-colors.$bg-white;
          }

          [type='radio']:checked + label:after,
          [type='radio']:not(:checked) + label:after {
            content: '';
            width: 10px;
            height: 10px;
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
          }

          [type='radio']:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
          }

          [type='radio']:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
          }

          .custom-control {
            padding-left: 0px !important;
            overflow: hidden;

            .custom-control-input {
              &:checked ~ .custom-control-label::after {
                background: mystique-colors.$bg-green5 !important;
              }

              &:checked ~ .custom-control-label::before {
                color: mystique-colors.$text-white !important;
                border: 2px solid mystique-colors.$border-green16 !important;
                background-color: mystique-colors.$bg-white !important;
              }
            }
          }

          .textactive label {
            color: mystique-colors.$text-black !important;
          }
        }

        &.disabled {
          display: block;
        }

        &.disabled::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.5);
          z-index: 9;
          left: 0;
          top: 0;
        }
      }
    }

    .withdraw-steps {
      display: block;
      width: 100%;
      clear: both;
      margin-bottom: 2%;
      border: 1px solid mystique-colors.$border-gray31;
      border-radius: 8px;

      &.box-2 {
        border: 0;
      }

      &.box-2.borderBankDetails {
        border: 1px solid mystique-colors.$border-gray31;
      }
    }

    .row-withdraw {
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }

    .col-lg-12-withdraw {
      flex: 0 0 100%;
      max-width: 100%;
      position: relative;
      width: 100%;

      .flex-1 {
        flex: 1;
      }
    }

    .account-number {
      margin-bottom: 1.5rem;

      &.bav-accountnumber {
        @media only screen and (min-width: 1000px) and (orientation: landscape) {
          width: 40%;
          display: block;
        }
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        display: flex;
        margin-bottom: 0.5rem;
      }
    }

    .enter-account {
      width: 70%;

      &.bav-enter-account {
        @media only screen and (min-width: 1000px) and (orientation: landscape) {
          width: 90%;

          &:last-child {
            margin: 5% 0 0 0;
          }
        }
      }

      &:last-child {
        margin: 15px 0 0 0;

        @media only screen and (min-width: 500px) and (orientation: landscape) {
          margin: 0 0 0 10px;
        }
      }

      @media only screen and (min-width: 414px) and (orientation: portrait) {
        width: 62%;
      }

      @media only screen and (min-width: 760px) and (orientation: portrait) {
        width: 45%;
      }

      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 1 1 auto;
      }
    }

    .hide {
      display: none;
    }

    .branch-container {
      @media only screen and (min-width: 500px) and (orientation: landscape) {
        display: flex;
      }
    }
    .bankdetails-edit {
      width: 100%;
      @include abstract-mixins.borderradius(8px);
      border: solid 1px mystique-colors.$border-gray31;
      padding: 0.3rem;
      position: relative;

      &.bavBankDetails {
        @media only screen and (min-width: 1000px) and (orientation: landscape) {
          width: 100%;
        }
      }
      @media only screen and (min-width: 375px) {
        padding: 0.3rem 0.6rem;
      }

      @media only screen and (min-width: 1000px) and (orientation: landscape) {
        width: 60%;
      }
    }

    .user-accountholder {
      display: flex;
      padding: 0.4rem 0;
    }

    .user-banklabel {
      flex-shrink: 0;
      color: mystique-colors.$text-gray7;
      width: 35%;

      @media only screen and (min-width: 414px) {
        width: 27%;
      }

      @media only screen and (min-width: 500px) {
        width: 28%;
      }

      @media only screen and (min-width: 768px) {
        width: 20%;
      }
    }

    .user-bankdetails {
      width: 100%;
      color: mystique-colors.$text-gray39;
      font-weight: bold;
      display: flex;
      flex-direction: row;

      span {
        padding: 0 10px;
      }
    }

    .editoption {
      text-align: right;
      color: local-colors.$darkblue340;
      cursor: pointer;
      position: absolute;
      right: 0.7rem;
      top: 0.5rem;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;

      &.disabledstate {
        opacity: 0.4;
        filter: grayscale(100%);
        display: block;
      }
    }

    .searchbranch-list {
      position: relative;
      margin: 0 auto;
      width: 100%;
    }

    .searchbranch-list .branchlist-name {
      display: block;
      font-size: 12px;
      position: absolute;
      width: 100%;
      overflow-x: hidden;
      top: -4px;
      height: 100px;
      overflow-y: auto;
      left: 0;
      right: 0;
      z-index: 10;
      padding: 0;
      margin: 0;
      border: 1px solid mystique-colors.$border-gray31;
      @include abstract-mixins.borderradius(3px);
      background-color: mystique-colors.$bg-white;

      &.press-top {
        top: -8.5rem;
        display: flex;
        flex-direction: column;

        li {
          display: flex;
          flex-grow: 1;
          align-items: flex-end;
          flex-shrink: 0;
        }
      }

      li {
        display: block;
        position: relative;
        margin: 0 -1px;
        padding: 3px 3px 3px 4px;
        color: mystique-colors.$text-gray50;
        font-weight: 500;
        text-shadow: 0 1px mystique-colors.$shadow-white;
        border: 1px solid transparent;
        @include abstract-mixins.borderradius(3px);
        cursor: pointer;
      }
    }

    .branchaccount-value {
      display: flex;
      width: 100%;
    }

    .userselect-ifsc {
      flex-shrink: 0;
      margin-right: 12%;
    }

    .userselect-bankdetails {
      font-weight: bold;
    }

    .userselect-banklabel {
      color: mystique-colors.$text-gray7;
      font-size: 11px;
    }

    .branchname-value {
      margin-top: 10px;
    }

    .restricted-content {
      font-size: 16px;
      color: mystique-colors.$text-gray39;

      p {
        margin: 15px 0;
      }
    }

    &.newTestPath {
      .page-header {
        padding: 0;
      }

      .col-lg-12-withdraw {
        > div > div:first-child {
          min-height: calc(100vh - 60px);
          display: flex;
          flex-direction: column;

          @media only screen and (min-width: 1024px) {
            min-height: 510px;
          }

          > div:first-child {
            padding: 0 0px;
          }

          > b {
            font-weight: normal;
            padding: 10px 15px;

            @media only screen and (min-width: 1024px) {
              text-align: center;
            }
          }
        }
      }

      .newTestPathFooter {
        display: flex;
        position: sticky;
        bottom: 0;
        background: mystique-colors.$bg-white;
        flex-direction: row;
        justify-content: flex-end;
        padding: 5px 15px;
        box-shadow: 0 -6px 6px 0 rgba(0, 0, 0, 0.05);
        z-index: 9;
      }

      > div > b {
        display: block;
        padding: 15px;
        font-weight: normal;
        text-align: center;
      }

      // .withdraw-btn.disabled {
      //   background: none;
      //   opacity: 0.35;
      //   color: #82a916;
      // }

      .upi-alerts-warning {
        font-size: 0.8rem;
        line-height: 1.2rem;
        padding: 0.5rem;
        margin: 0;
        float: none;
      }

      .overlay-dialog {
        .withdraw-btn {
          margin-left: 0;
          &.btnFailedBox {
            width: auto;
            height: 36px;
          }
        }
      }
    }

    .transaction-method {
      display: flex;
      flex-direction: row;
      width: 100%;
      text-align: left;

      @media only screen and (orientation: portrait) {
        flex-direction: column;
      }

      label.custom-control-label {
        margin: 0rem 0 0.5rem;
      }

      .transaction-option {
        padding: 2% 0;

        @media only screen and (min-width: 500px) and (orientation: landscape) {
          width: 50%;
        }
      }

      [type='radio']:checked,
      [type='radio']:not(:checked) {
        position: absolute;
        left: -9999px;
      }

      [type='radio']:checked + label,
      [type='radio']:not(:checked) + label {
        position: relative;
        padding-left: 26px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        margin-bottom: 0;
      }

      [type='radio']:checked + label,
      [type='radio']:not(:checked) + label:active {
        font-style: normal;
        margin-bottom: 0;

        .method-select {
          color: mystique-colors.$text-gray1;
          cursor: pointer;

          &.disabled {
            color: mystique-colors.$text-gray7;
          }
        }
      }

      [type='radio']:checked + label:before,
      [type='radio']:not(:checked) + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 18px;
        height: 18px;
        border: 2px solid mystique-colors.$gray-lighter51;
        border-radius: 100%;
        background: mystique-colors.$bg-white;
      }

      [type='radio']:checked + label:after,
      [type='radio']:not(:checked) + label:after {
        content: '';
        width: 18px;
        height: 18px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 100%;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
      }

      [type='radio']:not(:checked) + label:after {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      [type='radio']:checked + label:after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      .custom-control
        .custom-control-input:checked
        ~ .custom-control-label::after {
        background: url(../images/verified-icon.png) no-repeat !important;
        background-size: 100% !important;
        // background-position: center;
        // padding: 13px;
        // top: 0px;
        // left: 0px;
      }

      .custom-control
        .custom-control-input:checked
        ~ .custom-control-label::before {
        color: mystique-colors.$text-white !important;
        border: 2px solid mystique-colors.$green-darker15 !important;
        background-color: mystique-colors.$bg-white !important;
      }

      .optionTag {
        background: #dd3f3f;
        color: mystique-colors.$text-white;
        font-size: 10px;
        padding: 0px 3px;
        margin-left: 15px;
        position: relative;
        top: -2px;
        display: inline-block;
        line-height: 17px;

        &::before {
          content: '';
          position: absolute;
          border-right: 9px solid #dd3f3f;
          border-top: 9px solid transparent;
          border-bottom: 8px solid transparent;
          left: -9px;
          top: 0px;
        }
      }

      .method-list {
        display: list-item;
        font-size: 0.75rem;
        color: mystique-colors.$gray-darker12;
        margin-left: -0.5rem;
        font-weight: 400;

        &::marker {
          display: none;
        }
      }

      .method-select {
        font-size: 1rem;
        font-weight: bold;
        color: mystique-colors.$text-gray1;

        &.disabled {
          color: mystique-colors.$text-gray7;
          display: block;
        }

        @media only screen and (orientation: portrait) {
          margin-bottom: 0.4rem;
        }
      }

      .mode-option {
        display: none;
      }
    }

    .overlay-content {
      .space-colum {
        padding: 0.2rem;
      }

      .method-list {
        display: block;
        margin-left: 0;
        font-size: 0.7rem;
        line-height: normal;
        font-family: Arial, Helvetica, sans-serif;
      }

      .mode-option {
        display: block;
        font-size: 0.8rem;
        flex-shrink: 0;
        padding: 2% 2% 0% 0;
      }

      .method-select {
        font-size: 0.88rem;
      }

      .transaction-option {
        padding: 2% 0 0% 0;
        flex: 1;
      }
    }
  }

  .mecDesktopContainer {
    @media only screen and (min-width: 1023px) {
      padding: 10px 10px;
    }
  }

  .title {
    line-height: inherit;
  }
}

.withdrawInfoText {
  display: block;
  padding: 1% 3%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.light-text {
  opacity: 0.9;
  padding: 1% 3%;
}

.newTestPath {
  .overlay-content {
    padding: 2%;
  }

  .withdrawAccountInfo {
    display: flex;
    justify-content: center;

    @media screen and (min-width: 480px) {
      width: 100%;
    }
  }

  .leftlabel,
  .rightlabel {
    width: 50%;
  }

  .leftlabel {
    text-align: left;
  }

  .amt-bottom {
    padding-top: 0.5rem;
  }
}

.nameNotMatch .overlay-dialog {
  max-width: 670px;

  .withdrawAccountInfo {
    font-size: 16px;

    @media only screen and (max-width: 767px) {
      font-size: 12px;
      line-height: 18px;
    }
  }

  .withdraw-btn {
    @media only screen and (max-width: 767px) {
      font-size: 12px !important;
      line-height: 18px !important;
    }
  }

  .overlay-header {
    align-items: center;

    h5 {
      padding-left: 5px;
    }
  }

  .icon-alert {
    margin: 5px 0 5px 10px;

    @media only screen and (max-width: 500px) {
      margin-top: 10px;
    }
  }
}

/* Penny drop Attach File container css Start from here */
@function calculateRem($size) {
  $remSize: math.div($size, 16px);
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

.penny-drop-attachfile {
  width: 100%;
  border-radius: 0.5rem;
  border: solid 1px mystique-colors.$border-gray31;
  position: relative;
  margin-top: 0.625rem;
  line-height: 1.5;
  text-align: left;

  .attempt-head {
    border: 0;
    font-weight: bold;
    text-align: left;
    @include abstract-mixins.font-size(13px);
    padding: 0.625rem 0.625rem 0;

    @media only screen and (min-width: 320px) and (max-width: 359px) and (orientation: portrait) {
      @include abstract-mixins.font-size(12px);
    }

    @media only screen and (min-width: 768px) and (max-width: 1000px) and (orientation: landscape) {
      @include abstract-mixins.font-size(15px);
    }
  }

  .select-docs {
    @include abstract-mixins.font-size(13px);
    padding: 0.3125rem 0.625rem 0;
    text-align: left;

    @media only screen and (min-width: 320px) and (max-width: 359px) and (orientation: portrait) {
      @include abstract-mixins.font-size(12px);
    }

    @media only screen and (min-width: 768px) and (max-width: 1000px) and (orientation: landscape) {
      @include abstract-mixins.font-size(15px);
    }
  }

  ul {
    margin: 0;
    padding: 0.3125rem 0rem 0.625rem 1.5rem;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    width: 100%;

    @media only screen and (max-width: 579px) {
      flex-wrap: wrap;
    }

    li {
      border: 0;
      list-style: lower-alpha;
      margin-right: 2rem;
      @include abstract-mixins.font-size(13px);

      @media only screen and (min-width: 320px) and (max-width: 359px) and (orientation: portrait) {
        @include abstract-mixins.font-size(12px);
      }

      @media only screen and (min-width: 480px) and (max-width: 500px) and (orientation: landscape) {
        margin-right: 1.4rem;
      }

      @media only screen and (min-width: 768px) and (max-width: 1000px) and (orientation: landscape) {
        @include abstract-mixins.font-size(15px);
      }

      &:nth-child(3) {
        display: none;

        @media only screen and (max-width: 579px) {
          list-style: none;
          width: 100%;
          margin: 0;
        }
      }
    }
  }

  .attachfile-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem;
    border-top: 1px solid mystique-colors.$border-gray32;

    @media only screen and (max-width: 579px) {
      flex-wrap: wrap;
      flex-direction: column;
    }

    .file-length {
      @include abstract-mixins.font-size(12px);

      @media only screen and (min-width: 320px) and (max-width: 359px) and (orientation: portrait) {
        @include abstract-mixins.font-size(11px);
      }

      @media only screen and (max-width: 579px) {
        width: 100%;
        padding-bottom: 0.5rem;
      }
    }

    .file-length-red {
      color: mystique-colors.$text-red8;
    }

    .btns {
      @include abstract-mixins.font-size(13px);
      font-weight: bold;
      padding: 0.3rem 1rem;
      border-radius: 5px;
      line-height: 1.5;

      @media only screen and (max-width: 579px) {
        align-self: flex-end;
        @include abstract-mixins.font-size(12px);
      }
    }

    .disabled {
      background-color: mystique-colors.$bg-green;
      border: 1px solid mystique-colors.$border-gray32;
      opacity: 0.5;
      -webkit-tap-highlight-color: transparent;
      -ms-tap-highlight-color: transparent;
      display: block !important;
    }
  }
}

/* Penny drop Attach File container css End from here */
/* Penny drop alerts msg Start from here */
.penny-drop-alerts {
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  border: solid 1px mystique-colors.$border-red12;
  background-color: mystique-colors.$bg-red1;
  margin: 0.625rem 0 0;
  @include abstract-mixins.font-size(13px);
  text-align: center;

  @media only screen and (max-width: 479px) {
    @include abstract-mixins.font-size(12px);
    padding: 0.3125rem 0.625rem;
    text-align: left;
  }
}

/* Penny drop alerts msg end from here */

/* Penny drop alerts msg end from here */
.penny-drop-notes {
  // margin: 0.625rem 0.625rem 0;
  text-align: left;
  @include abstract-mixins.font-size(13px);
}

.penny-xattempt {
  // margin: 0rem 0.625rem;
  text-align: left;
  display: flex;
  @include abstract-mixins.font-size(13px);

  .ntls {
    font-weight: bold;
    margin-right: 0.3125rem;
  }

  .atmp-verify {
    border: 0;
    text-align: left;
  }
}

/* Penny drop alerts msg end from here */
.withdrawamount-fee {
  @media only screen and (min-width: 500px) and (orientation: landscape) {
    display: flex;
    flex-direction: row;
  }
}

.fees-amountvalue {
  flex-shrink: 0;
  font-weight: normal;
  color: #ed6a2c;
  font-size: 0.7rem;

  @media only screen and (min-width: 500px) and (orientation: landscape) {
    padding-left: 0.2rem;
  }
}

.withdrawConfirm {
  .fees-amountvalue {
    padding-bottom: 0.5rem;

    @media only screen and (min-width: 960px) {
      padding-left: 0;
    }
  }
}

.newTabSection {
  @include abstract-mixins.borderradius(7px);
  border: 1px solid local-colors.$dark590;
}

.newTabSectionInner {
  margin: 1.2rem 0.7rem 1rem 0.7rem;
  @media only screen and (min-width: 1000px) {
    margin: 1rem;
  }
}
.bavUserList {
  margin: 1.3rem 0.7rem 0rem 0.7rem;
  @media only screen and (min-width: 1000px) {
    margin: 1rem 1rem 0rem 1rem;
  }
}
#withdraw-app .withdraw-container .leftcolum.bavStatusBank {
  display: flex;
  align-items: center;

  @media only screen and (min-width: 500px) and (orientation: landscape) {
    flex-direction: row;
  }
}

.tagStyle {
  font-size: 0.625rem;
  padding: 0rem 0.6rem;
  margin-left: 0.5rem;
  display: inline-block;
  line-height: 16px;
}

.fasterTag {
  background: url(https://rcmg.in/rc/bav/fasterTag.png) no-repeat center;
  background-size: 100% auto;
  padding: 0.625rem;
  font-size: 0.625rem;
  color: local-colors.$light;
  font-weight: normal;
  position: absolute;
  display: flex;
  left: 50%;
  transform: translate(-50%, -114%);
}

.upiFormat {
  background: local-colors.$warning;
  color: local-colors.$light670;
  font-size: 0.75rem;
  display: inline-flex;
  padding: 0 0.5rem;
}

body {
  font-family: 'Roboto', sans-serif;
}

.bavPath {
  padding: 3% 0;

  @media only screen and (max-width: 500px) {
    padding: 4% 0;
  }
}

.upiOption {
  background: local-colors.$warning697;
  @include abstract-mixins.borderradius(0 0 7px 7px);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.9rem;

  .findLink {
    font-size: 0.75rem;
    color: mystique-colors.$text-blue1;
    cursor: pointer;
    flex-shrink: 0;
  }
}

.image-row {
  display: flex;
  img {
    object-fit: cover;
    @include mixins.resp(width, $sm: 22);
    @include mixins.resp(margin-right, $sm: 3);
  }
}

.flex-1 {
  flex: 1;
}

```

check all the color variable used in my component code, if it is present in local color, name it as local-colors.colorname else name it as mystique-colors.colorname. provide details about corrected variables