/*  ============================================================
Version: 0.0.2

Colors:
+-------------------------------+
blue-white
+-------------------------------+
purple-black
+-------------------------------+
purple-white
+-------------------------------+
orange-black
+-------------------------------+
lime-white
+-------------------------------+
lime-black

============================================================ */

:root[data-theme="blue-white"],
div[data-theme="blue-white"] {
  --black: 0, 0, 0;
  --white: 255, 255, 255;
  --light: 245, 245, 245;
  --dark: 26, 26, 26;

  --brand-base: 14, 165, 233;
  --brand-base-100: 224, 245, 254;
  --brand-base-200: 186, 232, 253;
  --brand-base-300: 125, 213, 252;
  --brand-base-400: 56, 188, 248;
  --brand-base-500: 14, 165, 233;
  --brand-base-600: 2, 138, 199;
  --brand-base-700: 3, 112, 161;
  --brand-base-800: 7, 94, 133;
  --brand-base-900: 12, 80, 110;
  --brand-base-1000: 8, 53, 73;
}

:root[data-theme="lime-white"],
div[data-theme="lime-white"] {
  --black: 0, 0, 0;
  --white: 255, 255, 255;
  --light: 245, 245, 245;
  --dark: 26, 26, 26;

  --brand-base: 173, 255, 0;
  --brand-base-100: 239, 255, 204;
  --brand-base-200: 228, 255, 170;
  --brand-base-300: 214, 255, 128;
  --brand-base-400: 200, 255, 85;
  --brand-base-500: 187, 255, 43;
  --brand-base-600: 144, 213, 0;
  --brand-base-700: 115, 170, 0;
  --brand-base-800: 87, 128, 0;
  --brand-base-900: 58, 85, 0;
  --brand-base-1000: 35, 51, 0;
}

:root[data-theme="lime-black"],
div[data-theme="lime-black"] {
  --brand-base: 173, 255, 0;
  --brand-base-100: 239, 255, 204;
  --brand-base-200: 228, 255, 170;
  --brand-base-300: 214, 255, 128;
  --brand-base-400: 200, 255, 85;
  --brand-base-500: 187, 255, 42;
  --brand-base-600: 144, 213, 0;
  --brand-base-700: 115, 170, 0;
  --brand-base-800: 87, 128, 0;
  --brand-base-900: 58, 85, 0;
  --brand-base-1000: 35, 51, 0;
}

:root[data-theme="purple-black"],
div[data-theme="purple-black"] {
  --white: 0, 0, 0;
  --black: 255, 255, 255;
  --dark: 245, 245, 245;
  --light: 26, 26, 26;

  --brand-base: 180, 136, 241;
  --brand-base-100: 241, 234, 253;

  --brand-base-200: 230, 217, 251;
  --brand-base-300: 211, 186, 248;

  --brand-base-400: 180, 136, 241;
  --brand-base-500: 157, 99, 333;
  --brand-base-600: 134, 67, 218;
  --brand-base-700: 114, 49, 191;
  --brand-base-800: 97, 45, 156;
  --brand-base-900: 80, 37, 126;
  --brand-base-1000: 52, 15, 92;
}

:root[data-theme="orange-black"],
div[data-theme="orange-black"] {
  --white: 0, 0, 0;
  --black: 255, 255, 255;
  --dark: 245, 245, 245;
  --light: 26, 26, 26;

  --brand-base: 255, 156, 32;
  --brand-base-100: 255, 235, 198;

  --brand-base-200: 255, 201, 107;
  --brand-base-300: 255, 183, 74;

  --brand-base-400: 255, 156, 32;
  --brand-base-500: 249, 119, 7;
  --brand-base-600: 221, 83, 2;
  --brand-base-700: 183, 54, 6;
  --brand-base-800: 148, 41, 12;
  --brand-base-900: 122, 34, 13;
  --brand-base-1000: 70, 15, 2;
}

:root[data-theme="royal-fuchsia-black"],
div[data-theme="royal-fuchsia-black"] {
  --white: 0, 0, 0;
  --black: 255, 255, 255;
  --dark: 245, 245, 245;
  --light: 34, 34, 86;

  @media screen and (min-width: 991px) {
    --light: 26, 26, 26;
  }

  --brand-base: 167, 58, 149;
  --brand-base-100: 251, 236, 250;
  --brand-base-200: 246, 216, 244;
  --brand-base-300: 239, 184, 233;
  --brand-base-400: 228, 142, 218;
  --brand-base-500: 211, 98, 197;
  --brand-base-600: 182, 67, 165;
  --brand-base-700: 167, 58, 149;
  --brand-base-800: 123, 45, 109;
  --brand-base-900: 102, 41, 90;
  --brand-base-1000: 66, 16, 56;
}

div[data-theme="royal-fuchsia-black"] .admin-full-mobile-preview {
  --light: 34, 34, 86;
}

:root[data-theme="purple-white"],
div[data-theme="purple-white"] {
  --black: 0, 0, 0;
  --white: 255, 255, 255;
  --light: 245, 245, 245;
  --dark: 26, 26, 26;

  --brand-base: 180, 136, 241;
  --brand-base-100: 237, 230, 250; /* Lightest - 90% lighter */
  --brand-base-200: 219, 204, 246; /* Very light - 70% lighter */
  --brand-base-300: 200, 170, 243; /* Light - 50% lighter */
  --brand-base-400: 190, 153, 242; /* Medium light - 30% lighter */
  --brand-base-500: 180, 136, 241; /* Base color */
  --brand-base-600: 162, 122, 217; /* Medium dark - 10% darker */
  --brand-base-700: 144, 109, 193; /* Dark - 20% darker */
  --brand-base-800: 126, 95, 169; /* Very dark - 30% darker */
  --brand-base-900: 108, 82, 145; /* Darkest - 40% darker */
  --brand-base-1000: 90, 68, 120;
}

:root[data-theme]:not([data-theme*="black"]),
div[data-theme]:not([data-theme*="black"]) {
  --white: 255, 255, 255;
  --dark: 26, 26, 26;
  --light: 245, 245, 245;
  --black: 0, 0, 0;

  --red-dark: 255, 69, 58;
  --yellow-light: 92, 61, 1;
  --base-color: 235, 235, 235;

  .hover\:text-main-dark:hover {
    color: rgba(var(--dark), 1);
  }

  .outline-black {
    outline-color: #000;
  }

  .react-loading-skeleton {
    background-color: rgba(var(--base-color), 1);
  }

  .component-TabNavigationButton {
    /* background: rgba(var(--black), 1); */
    color: rgba(var(--brand-base), 1);
  }

  .component-Cancel {
    background: rgba(var(--light), 1);

    @media screen and (min-width: 991px) {
      background: rgba(var(--white), 1);
    }
  }

  .bg-black {
    background: rgba(var(--black), 1);
  }
  .text-main-dark {
    color: rgba(var(--dark), 1);
  }

  .text-main-light {
    color: rgba(var(--light), 1);
  }

  .\!text-main-light {
    color: rgba(var(--light), 1) !important;
  }

  .\!text-primary-500 {
    color: rgba(var(--brand-base-500), 1) !important;
  }

  .border-main-light {
    border-color: rgba(var(--light), 1);
  }

  .bg-main-light {
    background: rgba(var(--light), 1);
  }

  .bg-main-dark {
    background: rgba(var(--dark), 1);
  }

  .bg-white {
    background: rgba(var(--white), 1);
  }

  .lg-991\:bg-white {
    background: rgba(var(--white), 1);
  }

  .component-SingleBanner {
    background: rgba(var(--light), 1);

    @media (min-width: 991px) {
      background: rgba(var(--white), 1);
    }
  }

  .cdt-button.primary-btn {
    background-color: rgba(var(--brand-base), 1) !important;
  }

  .component-MobileSteps {
    .bg-success-green1 {
      background: rgba(var(--brand-base), 1);
    }
  }

  .component-SettingsCard {
    background: rgba(var(--white), 1);
    color: rgba(var(--black), 1);

    &:hover {
      background: rgba(var(--brand-base), 1);
      color: rgba(var(--black), 1);
    }
  }

  .outline-main-light {
    outline-color: rgba(var(--light), 1);
  }

  .text-black {
    color: rgba(var(--black), 1);
  }

  .text-white {
    color: rgba(var(--white), 1);
  }

  .text-primary-100 {
    color: rgba(var(--brand-base-100), 1);
  }
  .text-primary-200 {
    color: rgba(var(--brand-base-200), 1);
  }
  .text-primary-300 {
    color: rgba(var(--brand-base-300), 1);
  }
  .text-primary-400 {
    color: rgba(var(--brand-base-400), 1);
  }
  .text-primary-500 {
    color: rgba(var(--brand-base-500), 1);
  }
  .text-primary-600 {
    color: rgba(var(--brand-base-600), 1);
  }
  .text-primary-700 {
    color: rgba(var(--brand-base-700), 1);
  }

  .\!text-primary-700 {
    color: rgba(var(--brand-base-700), 1) !important;
  }
  .text-primary-800 {
    color: rgba(var(--brand-base-800), 1);
  }

  .\!text-primary-800 {
    color: rgba(var(--brand-base-800), 1) !important;
  }
  .text-primary-900 {
    color: rgba(var(--brand-base-900), 1);
  }
  .text-primary-1000 {
    color: rgba(var(--brand-base-1000), 1);
  }
  .text-primary-base {
    color: rgba(var(--brand-base), 1);
  }

  /* .text-main-black-900 {
    color: rgba(var(--black), 0.9);
  }

  .text-main-tertiary-600 {
    color: rgba(var(--black), 0.6);
  } */

  .bg-primary-100 {
    background: rgba(var(--brand-base-100), 1);
  }
  .bg-primary-200 {
    background: rgba(var(--brand-base-200), 1);
  }
  .bg-primary-300 {
    background: rgba(var(--brand-base-300), 1);
  }
  .bg-primary-400 {
    background: rgba(var(--brand-base-400), 1);
  }
  .bg-primary-500 {
    background: rgba(var(--brand-base-500), 1);
  }
  .bg-primary-600 {
    background: rgba(var(--brand-base-600), 1);
  }
  .bg-primary-700 {
    background: rgba(var(--brand-base-700), 1);
  }
  .bg-primary-800 {
    background: rgba(var(--brand-base-800), 1);
  }
  .bg-primary-900 {
    background: rgba(var(--brand-base-900), 1);
  }
  .bg-primary-1000 {
    background: rgba(var(--brand-base-1000), 1);
  }
  .bg-primary-base {
    background: rgba(var(--brand-base), 1);
  }

  .component-DesktopNavigationUser {
    color: rgba(var(--primary-base), 1);
    background: rgba(var(--black), 1);
  }

  .border-primary-100 {
    border-color: rgba(var(--brand-base-100), 1);
  }
  .border-primary-200 {
    border-color: rgba(var(--brand-base-200), 1);
  }
  .border-primary-300 {
    border-color: rgba(var(--brand-base-300), 1);
  }
  .border-primary-400 {
    border-color: rgba(var(--brand-base-400), 1);
  }
  .border-primary-500 {
    border-color: rgba(var(--brand-base-500), 1);
  }
  .border-primary-600 {
    border-color: rgba(var(--brand-base-600), 1);
  }
  .border-primary-700 {
    border-color: rgba(var(--brand-base-700), 1);
  }
  .border-primary-800 {
    border-color: rgba(var(--brand-base-800), 1);
  }
  .border-primary-900 {
    border-color: rgba(var(--brand-base-900), 1);
  }
  .border-primary-1000 {
    border-color: rgba(var(--brand-base-1000), 1);
  }
  .border-primary-base {
    border-color: rgba(var(--brand-base), 1);
  }

  .focus\:border-primary-700:focus {
    border-color: rgba(var(--brand-base-700), 1);
  }

  .form-password-wrapper .p-password-input:focus {
    outline: 1px solid rgba(var(--brand-base-700), 1);
    border-color: rgba(var(--brand-base-700), 1);
  }

  /* .border-black\/10 {
    border-color: rgba(var(--black), 0.1);
  } */

  .bg-primary-base {
    background: rgba(var(--brand-base), 1);
  }

  .\!bg-primary-base {
    background: rgba(var(--brand-base), 1) !important;
  }

  .ButtonAccountControl {
    &.text-primary-500 {
      color: rgba(var(--brand-base-700), 1);
    }
  }

  .hover\:bg-primary-base:hover {
    background: rgba(var(--brand-base), 1);
  }
  .\!hover\:bg-primary-base:hover {
    background: rgba(var(--brand-base), 1) !important;
  }

  .p-placeholder {
    color: rgba(var(--black), 0.5);
  }
  .p-dropdown-component {
    outline: none;
    border: none;
  }

  .group-dropdown {
    .p-dropdown-items {
      background: rgba(var(--white), 1);
      color: rgba(var(--black), 1);
      border-color: rgba(var(--black), 0.1);

      .p-dropdown-item.p-focus {
        background: rgba(var(--brand-base));
        /* svg {
          color: rgba(var(--white), 1);
        } */
      }
    }
  }

  .general-card-button {
    color: rgba(var(--black), 1);

    &:disabled {
      color: rgba(var(--black), 0.3);
      /* > * {
        background-color: rgba(var(--white), 1);
      } */
      svg {
        color: rgba(var(--black), 0.2);
      }
    }

    > div {
      background-color: rgba(var(--white), 1);

      &.bg-main-blue1 {
        background-color: #3bb8d0;
      }
    }

    @media (max-width: 575px) {
      > div:not(.keep-background) {
        background-color: rgba(var(--light), 1);
      }
    }
  }

  .component-TabNavigationButton {
    background: rgba(var(--black), 1);
    color: rgba(var(--brand-base), 1);
  }

  .componentRoundButton.offshore {
    color: rgba(var(--brand-base-500), 1);
  }

  .componentRoundButton.offshore {
    &:hover {
      color: rgba(var(--dark), 1);
    }
  }

  .disabled\:\!bg-gray-300:disabled {
    background: rgb(209, 213, 219) !important;
  }

  /*  account control buttons */
  .hover\:\!bg-primary-base:hover {
    background: rgba(var(--brand-base), 1) !important;
  }

  .hover\:text-primary-500:hover {
    color: rgba(var(--brand-base-500), 1);
  }

  /* .hover\:bg-primary-base:hover {
    background: rgba(var(--brand-base), 1);
  } */

  .\!text-primary-500 {
    color: rgba(var(--brand-base-500), 1) !important;
  }

  .hover\:\!text-main-dark:hover {
    color: rgb(26, 26, 26) !important;
  }
  /* 
  .componentOffshoreAccountControl {
    .componentAccountControlSyncBalance {
      color: rgba(var(--white), 1);
    }
  } */
  /*  account control buttons */

  /* 
  .border-red-400 {
    border-color: rgba(var(--red-dark), 1);
  } */

  /* .border-main-dark {
    border-color: rgba(var(--dark), 1);
  } */

  /* .cdt-button.primary-btn {
    background-color: rgba(var(--brand-base), 1) !important;
    color: rgba(var(--black), 1);
  } */
}

:root[data-theme*="black"],
div[data-theme*="black"] {
  --white: 0, 0, 0;
  --black: 255, 255, 255;
  --dark: 245, 245, 245;
  --light: 26, 26, 26;

  --red-dark: 255, 69, 58;
  --yellow-light: 92, 61, 1;
  --base-color: 60, 60, 60;

  .invert-on-hover {
    &.hover {
      filter: invert(1);
    }
  }

  .outside-button .component-LoadingIcon {
    color: rgba(var(--dark), 1);
  }

  .react-loading-skeleton {
    background-color: rgba(var(--base-color), 1);
  }

  .react-loading-skeleton::after {
    background-image: linear-gradient(90deg, rgba(var(--white), 1) 0px, rgba(var(--white), 1) 40px, rgba(var(--white), 1) 80px);
  }

  body {
    background-color: rgba(var(--white), 1);

    @media (min-width: 991px) {
      background-color: rgba(var(--light), 1);
    }
  }

  .disabled\:\!bg-gray-300:disabled {
    background: rgba(var(--black), 0.3) !important;
  }

  .switcher-wrapper {
    div {
      background: black;
    }
    span {
      background: rgba(var(--brand-base-500));
    }
    input {
      background: transparent;
    }
  }

  .drop-zone-limit {
    color: rgba(var(--black));
  }

  .component-StandardButton {
    color: rgba(var(--black), 1);
    &:hover {
      .text-black\/50 {
        color: rgba(var(--white), 0.5);
      }
      color: rgba(var(--white), 1);
    }
  }

  .component-ToastContainer {
    .Toastify__toast-theme--light {
      background: rgba(var(--white), 1);
      color: rgba(var(--black), 1);
      border: 1px solid rgba(var(--black), 0.3);
    }

    .Toastify__close-button {
      color: rgba(var(--black), 1);
    }
  }

  .component-ButtonExterior {
    background: rgba(var(--light), 1) !important;
    color: rgba(var(--black), 1);
    @media (min-width: 991px) {
      background: rgba(var(--white), 1) !important;
      color: rgba(var(--black), 1);
    }
  }
  .component-standardButtonBusiness {
    span {
      color: rgba(var(--white), 1);
    }
    p {
      color: rgba(var(--light), 1);
    }
  }

  .component-KybDropdown {
    background: rgba(var(--white), 1);
  }

  .component-BackButton {
    background: rgba(var(--white), 1) !important;
    color: rgba(var(--black), 1) !important;
  }

  .shadow-mobile-container,
  .mobile-navigation {
    border-radius: 32px 32px 0px 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* text-primary-800 hover:text-primary-700 */

  .credit-card {
    border: 1px solid rgba(var(--black), 0.1);
  }

  .component-AnimatedCreditCard {
    outline: 1px solid rgba(var(--black), 0.1);
    border-radius: 20px;
  }

  .component-SyncBalance {
    color: rgba(var(--brand-base), 1) !important;
  }

  .component-SettingsCard {
    background: rgba(var(--white), 1);
    color: rgba(var(--black), 1);

    &:hover {
      background: rgba(var(--brand-base), 1);
      color: rgba(var(--white), 1);
    }
  }

  .cdt-button.primary-btn {
    background-color: rgba(var(--brand-base), 1) !important;
  }

  .disabled\:\!bg-gray-300:disabled {
    background: rgba(var(--black), 0.3) !important;
  }

  .sm-575\:border-white {
    border-color: rgba(var(--white), 1);
  }

  .border-main-light {
    border-color: rgba(var(--light), 1);
  }

  .sm-575\:bg-main-light {
    background: rgba(var(--light), 1);
  }

  .sm-575\:bg-white {
    background: rgba(var(--white), 1);
  }

  .lg-991\:bg-white {
    background: rgba(var(--white), 1);
  }

  .bg-main-light {
    background: rgba(var(--light), 1);
  }

  .bg-main-dark {
    background: rgba(var(--dark), 1);
  }

  .bg-white {
    background: rgba(var(--white), 1);
  }

  .component-SingleBanner {
    background: rgba(var(--light), 1);
    @media (min-width: 991px) {
      background: rgba(var(--white), 1);
    }
  }

  .bg-black {
    background: rgba(var(--black), 1);
  }

  .bg-black\/10 {
    background: rgba(var(--black), 0.1);
  }

  .text-main-dark {
    color: rgba(var(--dark), 1);
  }

  .text-main-dark\/70 {
    color: rgba(var(--dark), 0.7);
  }

  .text-main-dark\/50 {
    color: rgba(var(--dark), 0.5);
  }

  .outline-main-light {
    outline-color: rgba(var(--light), 1);
  }

  .text-main-light {
    color: rgba(var(--light), 1);
  }

  .text-black {
    color: rgba(var(--black), 1);
  }

  .text-white {
    color: rgba(var(--white), 1);
  }

  .text-black\/70 {
    color: rgba(var(--black), 0.7);
  }

  .text-black\/50 {
    color: rgba(var(--black), 0.5);
  }

  .text-black\/30 {
    color: rgba(var(--black), 0.3);
  }

  .text-primary-100 {
    color: rgba(var(--brand-base-100), 1);
  }
  .text-primary-200 {
    color: rgba(var(--brand-base-200), 1);
  }
  .text-primary-300 {
    color: rgba(var(--brand-base-300), 1);
  }
  .text-primary-400 {
    color: rgba(var(--brand-base-400), 1);
  }
  .text-primary-500 {
    color: rgba(var(--brand-base-500), 1);
  }

  .\!text-primary-500 {
    color: rgba(var(--brand-base-500), 1) !important;
  }
  .text-primary-600 {
    color: rgba(var(--brand-base-600), 1);
  }
  .text-primary-700 {
    color: rgba(var(--brand-base-500), 1);
  }

  .\!text-primary-700 {
    color: rgba(var(--brand-base-700), 1) !important;
  }

  .componentRoundButton:not(.offshore) {
    color: rgba(var(--brand-base-700), 1);
  }

  .text-primary-800 {
    color: rgba(var(--brand-base-800), 1);
  }

  .\!text-primary-800 {
    color: rgba(var(--brand-base-800), 1) !important;
  }
  .text-primary-900 {
    color: rgba(var(--brand-base-900), 1);
  }
  .text-primary-1000 {
    color: rgba(var(--brand-base-1000), 1);
  }
  .text-primary-base {
    color: rgba(var(--brand-base), 1);
  }

  .text-main-black-900 {
    color: rgba(var(--black), 0.9);
  }

  .text-main-tertiary-600 {
    color: rgba(var(--black), 0.6);
  }

  .ButtonAccountControl {
    &.text-primary-500 {
      color: rgba(var(--brand-base-700), 1);
    }
  }

  .bg-primary-100 {
    background: rgba(var(--brand-base-100), 1);
  }
  .bg-primary-200 {
    background: rgba(var(--brand-base-200), 1);
  }
  .bg-primary-300 {
    background: rgba(var(--brand-base-300), 1);
  }
  .bg-primary-400 {
    background: rgba(var(--brand-base-400), 1);
  }
  .bg-primary-500 {
    background: rgba(var(--brand-base-500), 1);
  }
  .bg-primary-600 {
    background: rgba(var(--brand-base-600), 1);
  }
  .bg-primary-700 {
    background: rgba(var(--brand-base-700), 1);
  }
  .bg-primary-800 {
    background: rgba(var(--brand-base-800), 1);
  }
  .bg-primary-900 {
    background: rgba(var(--brand-base-900), 1);
  }
  .bg-primary-1000 {
    background: rgba(var(--brand-base-1000), 1);
  }
  .bg-primary-base {
    background: rgba(var(--brand-base), 1);
  }

  .hover\:bg-primary-base:hover {
    background: rgba(var(--brand-base), 1);
  }

  /*  account control buttons */
  .hover\:\!bg-primary-base:hover {
    background: rgba(var(--brand-base), 1) !important;
  }

  .hover\:text-main-dark:hover {
    color: rgba(var(--light), 1);
  }
  .hover\:\!text-main-dark:hover {
    color: rgba(var(--light), 1) !important;
  }

  .border-primary-100 {
    border-color: rgba(var(--brand-base-100), 1);
  }
  .border-primary-200 {
    border-color: rgba(var(--brand-base-200), 1);
  }
  .border-primary-300 {
    border-color: rgba(var(--brand-base-300), 1);
  }
  .border-primary-400 {
    border-color: rgba(var(--brand-base-400), 1);
  }
  .border-primary-500 {
    border-color: rgba(var(--brand-base-500), 1);
  }
  .border-primary-600 {
    border-color: rgba(var(--brand-base-600), 1);
  }
  .border-primary-700 {
    border-color: rgba(var(--brand-base-700), 1);
  }
  .border-primary-800 {
    border-color: rgba(var(--brand-base-800), 1);
  }
  .border-primary-900 {
    border-color: rgba(var(--brand-base-900), 1);
  }
  .border-primary-1000 {
    border-color: rgba(var(--brand-base-1000), 1);
  }
  .border-primary-base {
    border-color: rgba(var(--brand-base), 1);
  }

  .focus\:border-primary-700:focus {
    border-color: rgba(var(--brand-base-700), 1);
  }

  .form-password-wrapper .p-password-input:focus {
    outline: 1px solid rgba(var(--brand-base-700), 1);
    border-color: rgba(var(--brand-base-700), 1);
  }

  .border-black\/10 {
    border-color: rgba(var(--black), 0.1);
  }

  .bg-primary-base {
    background: rgba(var(--brand-base), 1);
  }

  .hover\:bg-gray-50:hover {
    background: rgba(var(--light), 0.5);
    /* background: ; */
    color: rgba(var(--brand-base), 1);
  }

  /* todo dc asa? */
  /* .hover\:text-main-dark:hover {
    color: rgba(var(--brand-base), 0.5);
  } */

  .border-red-400 {
    border-color: rgba(var(--red-dark), 1);
  }

  .border-main-dark {
    border-color: rgba(var(--dark), 1);
  }

  .border-black\/5 {
    border-color: rgba(var(--black), 0.05);
  }

  .bg-yellow-light {
    background: rgba(var(--yellow-light), 1);
  }

  .cdt-popup {
    .p-dialog-content {
      background: rgba(var(--white), 1);
      border-radius: 32px;
    }
  }

  .component-Cancel {
    background: rgba(var(--light), 1);

    @media screen and (min-width: 991px) {
      background: rgba(var(--white), 1);
    }
  }

  .component-DiscountCard {
    background:
      linear-gradient(0deg, #111 0%, #111 100%),
      url("/assets/discounts/dark-green-gradient.png") lightgray 50% / cover no-repeat;
    background-blend-mode: luminosity, normal;
  }

  .component-DesktopNavigationUser {
    color: rgba(var(--brand-base), 1);
    background: rgba(var(--light), 1);
  }

  .componentAccountWithBalance {
    color: rgba(var(--black), 1);
  }

  .component-MobileHeaderAccount {
    background: rgba(var(--light), 1);
    color: rgba(var(--brand-base), 1);
  }

  .component-DesktopNavigationSuperPlan {
    background: rgba(var(--light), 1);
    color: rgba(var(--brand-base), 1);
  }

  .component-AccountDefaultTabButtons {
    background: rgba(var(--brand-base), 1);
    color: rgba(var(--light), 1);
  }

  .component-AccountTabButton {
    background: rgba(var(--brand-base), 1);
    color: rgba(var(--light), 1);
  }

  .component-TabNavigationButton {
    background: rgba(var(--brand-base), 1);
    color: rgba(var(--light), 1);
  }

  .component-SidebarItem {
    background: rgba(var(--light), 1);
    color: rgba(var(--brand-base), 1);
  }

  .component-LinkNavigationButton {
    background: rgba(var(--brand-base), 1);
    color: rgba(var(--light), 1);
  }

  .component-MobileSteps {
    background: rgba(var(--white), 1);
    color: rgba(var(--brand-base), 1);

    .bg-success-green1 {
      background: rgba(var(--brand-base), 1);
    }
  }

  .component-TransferDetailsCurrencySelector {
    background: rgba(var(--white), 1);
    color: rgba(var(--black), 1);
  }

  .transferAccountButton:hover {
    p,
    .transferAccountButtonIcon {
      color: rgba(var(--light), 1);
    }
  }

  input {
    color: rgba(var(--black), 1);
    background: rgba(var(--white), 1);
  }

  hr {
    border: 1px solid rgba(var(--black), 0.1);
  }

  .bg-gray-200 {
    background: rgba(var(--black), 0.2);
  }

  .bg-gray-300 {
    background: rgba(var(--black), 0.3);
  }

  .general-card-button {
    color: rgba(var(--black), 1);

    &:disabled {
      color: rgba(var(--black), 0.3);
      /* > * {
        background-color: rgba(var(--white), 1);
      } */
      svg {
        color: rgba(var(--black), 0.2);
      }
    }

    > div {
      background-color: rgba(var(--white), 1);

      &.bg-main-blue1 {
        background-color: #3bb8d0;
      }
    }

    @media (max-width: 575px) {
      > div:not(.keep-background) {
        background-color: rgba(var(--light), 1);
      }
    }
  }

  /* .componentProductBanner {
    color: rgba(var(--white), 1);
  } */
  /* 
  .componentVirtualAccountControl {
    .componentAccountControlBalance1 {
      color: rgba(var(--white), 1);
    }

    .componentAccountControlExchangeRate {
      color: rgba(var(--white), 0.7);
    }

    .componentAccountControlBalance2 {
      color: rgba(var(--white), 0.5);
    }
  } */

  .p-placeholder {
    color: rgba(var(--black), 0.5);
  }
  .p-dropdown-component {
    outline: none;
    border: none;
  }

  .group-dropdown {
    .p-dropdown-items {
      background: rgba(var(--white), 1);
      color: rgba(var(--black), 1);
      border-color: rgba(var(--black), 0.1);

      .p-dropdown-item.p-focus {
        background: rgba(var(--brand-base));
        svg {
          color: rgba(var(--white), 1);
        }
      }
    }
  }

  /* .component-StandardButtonComponent {
    &:hover {
      background: rgba(var(--brand-base), 0.3);
      color: rgba(var(--light), 1);
    }
  } */

  .swiper-slider {
    @media screen and (min-width: theme("screens.lg-991")) {
      &::before,
      &::after {
        content: "";
        display: block;
        background: linear-gradient(90deg, rgba(var(--light), 1) 40%, rgba(var(--light), 0) 100%);

        position: absolute;
        top: 0;
        width: 50px;
        height: 100%;
        z-index: 20;
      }
      &::before {
        background: linear-gradient(90deg, rgba(var(--light), 1) 40%, rgba(var(--light), 0) 100%);
        left: 0;
      }
      &::after {
        background: linear-gradient(-90deg, rgba(var(--light), 1) 40%, rgba(var(--light), 0) 100%);
        right: 0;
      }
    }
  }
  #Password,
  #Confirm-password {
    input {
      /* background: rgba(var(--), 1); */
      background: rgba(var(--light), 1);
      color: rgba(var(--black), 1);
      outline: none;
      border: 1px solid rgba(var(--black), 0.1);

      &:focus {
        border-color: rgba(var(--brand-base-700), 1);
      }

      &::placeholder {
        color: rgba(var(--black), 0.5);
      }
    }
  }

  .phone-number-dropdown-wrapper {
    background: rgba(var(--white), 1);
  }

  /* #Phone-number {
    background: rgba(var(--white), 1);
    input {
      background: rgba(var(--light), 1);
      color: rgba(var(--black), 1);
      outline: none;
      border: 1px solid rgba(var(--black), 0.1);

      &:focus {
        border-color: rgba(var(--brand-base-700), 1);
      }

      &::placeholder {
        color: rgba(var(--black), 0.5);
      }
    }
  } */

  .p-password-panel {
    background: rgba(var(--white), 1);
    color: rgba(var(--black), 1);
    border: 1px solid rgba(var(--black), 0.1);
  }

  input {
    &::placeholder {
      color: rgba(var(--black), 0.5);
    }
    &:focus {
      border-color: rgba(var(--brand-base-700), 1);
    }
  }

  .component-SignIn,
  .component-Register {
    background: rgba(var(--light), 1);
  }

  .component-SenderWithBalance,
  .component-TransferDetailsBalance,
  .component-SenderBalance,
  .component-ReceiverBalance {
    --brand-base-100: var(--brand-base-900);
  }

  .component-TagReceiver {
    background: rgba(var(--light), 1);
  }

  .component-StatusBadge {
    background: rgba(var(--brand-base), 1);
    color: rgba(var(--light), 1);
  }

  .component-AccountSettingsBipTagCheckButton {
    background: rgba(var(--light), 1);
    color: rgba(var(--dark), 1);
  }
  .component-CardRequestContentBasedOnStatus {
    background: rgba(var(--light), 1);
  }

  .component-ComponentWrapper {
    @media (max-width: 575px) {
      background: rgba(var(--white), 1);
    }
  }

  .component-BusinessRegistrationForm {
    #Confirm-password input {
      background: rgba(var(--white), 1);
    }
    #Password input {
      background: rgba(var(--white), 1);
    }
  }

  .component-ReadOnlyCurrencyMethod {
    background: rgba(var(--white), 1);
    color: rgba(var(--black), 1);
    border: 1.5px solid rgba(var(--black), 0.1);
  }

  .component-TransferTypeOfTransfer {
    color: rgba(var(--white), 1);
    background: rgba(var(--brand-base), 1);
  }

  .component-KYC {
    @media (max-width: 991px) {
      background: rgba(var(--light), 1);
      background: rgba(var(--light), 1);
      padding: 16px;
      border-radius: 16px;
    }
  }

  .p-dropdown-items {
    background: rgba(var(--white), 1) !important;
    color: rgba(var(--black), 1) !important;
  }

  .kyc-dropdown {
    color: rgba(var(--dark), 1);
  }

  .component-CountriesModal {
    color: rgba(var(--black), 1);

    button {
      &:hover {
        background: rgba(var(--light));
        color: rgba(var(--black), 1);
      }
    }
  }

  .p-dialog-mask {
    background: rgba(var(--light));
  }

  .text-gray-600 {
    color: rgba(var(--black), 0.6);
  }

  .theme-checkbox {
    span::before {
      background: rgba(var(--dark));
    }

    input:checked + span:before {
      color: rgba(var(--brand-base-800), 1);
    }
  }

  .input-tooltip {
    color: rgba(var(--light), 1);
  }

  .sigContainer {
    background: white;
    border-radius: 16px;
  }

  /* .component-FormInput {
    @media (max-width: 991px) {
      background: rgba(var(--light), 1);
    }
  } */

  ::-webkit-scrollbar {
    width: 10px;
    /* height: 8px; */
  }

  ::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    background: rgba(var(--white), 1);
  }
  ::-webkit-scrollbar-track {
    background: rgba(var(--black), 0.1);
  }
}
