@use '~mystique/style-dir/lego-component-lib/_mixins.scss' as mixins;
@use '~mystique/style-dir/base/color/colors-bundle.scss' as mystique-colors;
@use '~mystique/style-dir/abstracts/mixins.scss' as abstract-mixins;
@use '../scss/colors.scss' as local-colors;

#withdraw-app {
  .withdraw-container {
    .playItSmart {
      @include mixins.resp(margin-bottom, $sm: 16);
      @include mixins.resp(margin-top, $sm: 16);
    }

    .withdraw-wrapper {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .withdraw-wrapperone {
      background: mystique-colors.$bg-green1;
      padding: 0.3rem;
      display: block;
      width: 100%;
      @include abstract-mixins.borderradius(8px 8px 0px 0px);
      border-bottom: 1px solid mystique-colors.$border-gray31;

      @media screen and (min-width: 360px) {
        padding: 8px 16px;
      }
      &.bavWrapper{
        @media only screen and (min-width: 500px) and (orientation: landscape) {
          border-right:0;
          border-bottom: 1px solid mystique-colors.$border-gray31;
          flex: 100%;
          @include abstract-mixins.borderradius(8px 8px 0px 0px);
        }
        @media only screen and (min-width: 700px) {
          padding: 0.5rem 0.8rem;
        }
      }
      @media only screen and (min-width: 500px) and (orientation: landscape) {
        border-right: 1px solid mystique-colors.$border-gray31;
        border-bottom: 0;
        padding: 0.5rem;
        flex: 0 0 25%;
        @include abstract-mixins.borderradius(8px 0px 0px 8px);
      }

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

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

    .withdraw-wrappertwo {
      display: flex;
      flex-direction: column;
      width: 100%;
      clear: both;
      @include abstract-mixins.borderradius(0px 0px 8px 8px);
      &.bav-withdraw-wrappertwo{
        @media only screen and (min-width: 500px) and (orientation: landscape) {
          flex:100%;
        }
      }
      @media only screen and (min-width: 500px) and (orientation: landscape) {
        flex: 0 0 75%;
      }

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

      @media only screen and (min-width: 1025px) and (orientation: landscape) {
        flex: 0 0 76%;
      }
    }
  }
}
.space-colum {
  padding: 0.9rem 0.6rem 0.5rem;
  @media only screen and (min-width: 480px) and (orientation: landscape) {
    padding: 0.9rem 0.5rem 0.3rem;
  }
  @media only screen and (min-width: 1000px) and (orientation: landscape) {
    padding: 1rem;
  }
}
.pwEnterAmtWrap {
  @include mixins.resp(padding-top, $sm: 20);
  @include mixins.resp(padding-right, $sm: 16);
  @include mixins.resp(padding-bottom, $sm: 10);
  @include mixins.resp(padding-left, $sm: 16);
}

//GST- withdrawal-friction - Css
.gstInstantWthdraw {
  background: local-colors.$lightblue2;
  width: 100%;
  line-height: 1.3;

  @media only screen and (min-width: 480px) and (orientation: landscape) {
    @include mixins.resp(border-top-right-radius, $sm: 8);
  }

  .trigRed {
    color: local-colors.$danger550;
  }

  img {
    cursor: pointer;
  }

  &.l1StripHeight {
    line-height: 0.438rem;
  }
}

.cursorPointer {
  cursor: pointer;
}

.baventerAmount{
  @media only screen and (min-width: 1000px) and (orientation: landscape) {
    display: flex;
    flex-wrap: wrap;
  }
}

.boundedTooltip {
  .tooltipWrapper {
    .reduceWithdrawTooltip {
      bottom: inherit;
      top: 23px;
      white-space: normal;
      text-align: center;
      @include mixins.resp(font-size, $sm: 10);
      @include mixins.resp(line-height, $sm: 14);
      @include mixins.resp(width, $sm: 247);
      @include mixins.resp(padding, $sm: 8);

      .tooltipArrow {
        left: 52%;
      }
    }
  }
}

//Play It Smart' Challenge- withdrawal-friction - Css
.playItSmart {
  background: mystique-colors.$danger880;
  @include mixins.resp(padding, $sm: 1);

  .playItHead {
    background: linear-gradient(
      96deg,
      mystique-colors.$danger930v1 0%,
      mystique-colors.$danger880v1 10%,
      mystique-colors.$danger940 100%
    );
    @include mixins.resp(padding-top, $sm: 6);
    @include mixins.resp(padding-right, $sm: 16);
    @include mixins.resp(padding-bottom, $sm: 6);
    @include mixins.resp(padding-left, $sm: 16);
    @include mixins.resp(border-top-left-radius, $sm: 6);
    @include mixins.resp(border-top-right-radius, $sm: 6);

    .ptHeadRight {
      color: local-colors.$dark200;
    }

    .rightArrow {
      @include mixins.resp(width, $sm: 5.44);
      @include mixins.resp(height, $sm: 8);
      @include mixins.resp(margin-left, $sm: 4);
    }
  }

  .playItBody {
    background: mystique-colors.$danger950;
    border-top: solid 1px mystique-colors.$danger870v1;
    @include mixins.resp(border-bottom-left-radius, $sm: 6);
    @include mixins.resp(border-bottom-right-radius, $sm: 6);

    .iconAnimate {
      @include mixins.resp(width, $sm: 16);
      @include mixins.resp(height, $sm: 16);
      @include mixins.resp(margin-right, $sm: 8);
    }
  }

  .boundedTooltip {
    .tooltipWrapper {
      .playitTooltip {
        white-space: normal;
        top: inherit;
        bottom: 28px;
        transform: translateX(-90%);
        box-shadow: -1px 4px 3px 0px hsla(0deg, 0%, 0%, 0.25%);
        @include mixins.resp(width, $sm: 226);
        @include mixins.resp(font-size, $sm: 11);
        @include mixins.resp(line-height, $sm: 14);
        @include mixins.resp(padding-top, $sm: 8);
        @include mixins.resp(padding-right, $sm: 12);
        @include mixins.resp(padding-bottom, $sm: 8);
        @include mixins.resp(padding-left, $sm: 12);

        .tooltipArrow {
          left: 90%;
        }
      }
    }
  }

  .strikeCross {
    color: local-colors.$light510;
    text-decoration: line-through;
    text-decoration-color: local-colors.$warning500;
  }
}

.scaleInOut {
  animation: scaleInOut 0.5s ease-out;
  animation-iteration-count: 1;
}

@keyframes scaleInOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

// Personalised Withdrawal GST UI Start from here
.personalisedParent {
  border-bottom: 1px solid local-colors.$light800;
  .personalisedWrapper {
    @include mixins.resp(padding-top, $sm: 8);
    @include mixins.resp(padding-bottom, $sm: 8);
    @include mixins.resp(padding-left, $sm: 8);

    @media screen and (orientation: landscape) {
      @include mixins.resp(border-top-right-radius, $sm: 8);
      @include mixins.resp(padding-left, $sm: 5);
    }
    .ppInstantWith {
      display: flex;
      flex-direction: column;
      @include mixins.resp(padding-right, $sm: 10);
      @media screen and (orientation: landscape) {
        flex-direction: row;
      }
      span {
        @media screen and (orientation: landscape) {
          @include mixins.resp(padding-left, $sm: 3);
        }
      }
      &.title12 {
        @media screen and (min-width: 480px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 12);
        }
        @media screen and (min-width: 700px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 14);
        }
        @media screen and (min-width: 1024px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 12);
        }
      }
    }
    .processIn {
      &.title11 {
        @media screen and (min-width: 550px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 14);
        }
        @media screen and (min-width: 1024px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 11);
        }
      }
    }
    .ppDailyWeekly {
      display: flex;
      flex-direction: column;
      @media screen and (orientation: landscape) {
        flex-direction: row;
      }
      span {
        @media screen and (orientation: landscape) {
          @include mixins.resp(padding-left, $sm: 3);
        }
      }

      &.title10,
      .title12 {
        @media screen and (min-width: 480px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 12);
        }
        @media screen and (min-width: 700px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 14);
        }
        @media screen and (min-width: 1024px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 12);
        }
      }
    }
    .ppSpecialTag {
      &.title10,
      .title12 {
        @media screen and (min-width: 480px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 12);
        }
        @media screen and (min-width: 700px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 14);
        }
        @media screen and (min-width: 1024px) and (orientation: landscape) {
          font-weight: 500;
          @include mixins.resp(font-size, $sm: 12);
        }
      }
    }
    .ppSpecialTagData {
      display: flex;
      flex-direction: column;
      @media screen and (orientation: landscape) {
        flex-direction: row;
      }
      span {
        @media screen and (orientation: landscape) {
          @include mixins.resp(padding-left, $sm: 3);
        }
      }
    }
    .pwStripe {
      border: 0.5px solid local-colors.$light640;
      @include mixins.resp(height, $sm: 18);
      @include mixins.resp(margin-right, $sm: 14);
      @include mixins.resp(margin-left, $sm: 14);
      @media screen and (orientation: landscape) {
        @include mixins.resp(height, $sm: 10);
        @include mixins.resp(margin-right, $sm: 8);
        @include mixins.resp(margin-left, $sm: 8);
      }
    }
    .pwTipInfoImg {
      @include mixins.resp(width, $sm: 14);
      @include mixins.resp(height, $sm: 14);
      @media screen and (min-width: 550px) and (orientation: landscape) {
        background-color: local-colors.$light;
        border-radius: 50%;
      }
    }
    .trigRed {
      color: local-colors.$danger550;
    }
    .specialTagImg {
      @include mixins.resp(width, $sm: 16);
      @include mixins.resp(height, $sm: 18);
      @media screen and (orientation: landscape) {
        @include mixins.resp(width, $sm: 12);
        @include mixins.resp(height, $sm: 13);
      }
    }
    .boundedTooltip {
      .tooltipWrapper {
        display: flex;
        .personalisedWithTooltip {
          background: linear-gradient(
            180deg,
            local-colors.$yellow640 0%,
            local-colors.$yellow730 145.45%
          );
          border: 1px solid local-colors.$orange410;
          color: local-colors.$dark;
          white-space: normal;
          bottom: inherit;
          top: 23px;
          transform: translateX(-90%);
          box-shadow: 0px 9px 14px local-colors.$shadow019;
          @include mixins.resp(width, $sm: 170);
          @include mixins.resp(font-size, $sm: 10);
          @include mixins.resp(line-height, $sm: 14);
          @include mixins.resp(padding-top, $sm: 8);
          @include mixins.resp(padding-right, $sm: 12);
          @include mixins.resp(padding-bottom, $sm: 8);
          @include mixins.resp(padding-left, $sm: 12);
          .tooltipArrow {
            left: 90%;
            background: url(https://rcmg.in/rc/pwArrowStripe.png) 0;
            padding: 7px;
            background-size: contain;
            transform: rotate(360deg);
            border: none;
            top: -9px;
            background-position: top;
            width: 14px;
            height: 15px;
            background-repeat: no-repeat;
          }
        }

        .specialInstantTooltip {
          background: linear-gradient(
            180deg,
            local-colors.$yellow640 0%,
            local-colors.$yellow730 145.45%
          );
          border: 1px solid local-colors.$orange410;
          color: local-colors.$dark;
          bottom: inherit;
          top: 35px;
          transform: translateX(-94%);
          box-shadow: 0px 9px 14px local-colors.$shadow019;
          @include mixins.resp(max-width, $sm: 230);
          @include mixins.resp(font-size, $sm: 10);
          @include mixins.resp(line-height, $sm: 14);
          @include mixins.resp(padding-top, $sm: 8);
          @include mixins.resp(padding-right, $sm: 12);
          @include mixins.resp(padding-bottom, $sm: 4);
          @include mixins.resp(padding-left, $sm: 12);
          @media screen and (min-width: 480px) and (orientation: landscape) {
            top: 23px;
            transform: translateX(-75%);
          }
          @media screen and (min-width: 640px) and (orientation: landscape) {
            top: 23px;
            transform: translateX(-74%);
          }
          @media screen and (min-width: 1024px) and (orientation: landscape) {
            top: 23px;
            transform: translateX(-75%);
          }
          .tooltipArrow {
            left: 87%;
            background: url(https://rcmg.in/rc/pwArrowStripe.png) 0;
            padding: 7px;
            background-size: contain;
            transform: rotate(360deg);
            border: none;
            top: -9px;
            background-position: top;
            width: 14px;
            height: 15px;
            background-repeat: no-repeat;
          }
          > span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            width: 100%;
          }
          &.onlySpecialToolTip {
            @media screen and (orientation: portrait) {
              transform: translateX(-16%);
            }
            .tooltipArrow {
              @media screen and (orientation: portrait) {
                left: 8%;
              }
            }
          }
        }
      }
    }
  }
}
.personalisedBorderBtn {
  border-bottom: none !important;
}

check if all the local-colors variables, used in above file are present in below colors file. match the exact name

//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;
}