:root[theme="bootstrap4-dark-purple"],
:root[data-theme="bootstrap4-dark-purple"] {
  --surface-a: #2a323d;
  --surface-b: #20262e;
  --surface-c: rgba(255, 255, 255, 0.04);
  --surface-d: #3f4b5b;
  --surface-e: #2a323d;
  --surface-f: #2a323d;
  --text-color: rgba(255, 255, 255, 0.87);
  --text-color-secondary: rgba(255, 255, 255, 0.6);
  --primary-color: var(--primaryColor);
  --primary-color-text: var(--primaryTextColor);
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;
  --surface-0: #20262e;
  --surface-50: #363c43;
  --surface-100: #4d5158;
  --surface-200: #63676d;
  --surface-300: #797d82;
  --surface-400: #909397;
  --surface-500: #a6a8ab;
  --surface-600: #bcbec0;
  --surface-700: #d2d4d5;
  --surface-800: #e9e9ea;
  --surface-900: #ffffff;
  --gray-50: #e9e9ea;
  --gray-100: #d2d4d5;
  --gray-200: #bcbec0;
  --gray-300: #a6a8ab;
  --gray-400: #909397;
  --gray-500: #797d82;
  --gray-600: #63676d;
  --gray-700: #4d5158;
  --gray-800: #363c43;
  --gray-900: #20262e;
  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;
  --border-radius: 4px;
  --surface-ground: #20262e;
  --surface-section: #20262e;
  --surface-card: #2a323d;
  --surface-overlay: #2a323d;
  --surface-border: #3f4b5b;
  --surface-hover: rgba(255, 255, 255, 0.04);
  --maskbg: rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 1px #e3f3fe;
  --highlight-bg: var(--primary-color);
  --highlight-text-color: var(--primary-color-text);
  --cog-icon: url("https://api.iconify.design/fa-solid/cog.svg?color=%23151515&height=26");
  --times-icon: url("https://api.iconify.design/fa-solid/times.svg?color=%23151515&height=20");
  color-scheme: dark;
}

:root[theme="bootstrap4-dark-purple"],
:root[data-theme="bootstrap4-dark-purple"] {
  --blue-50: #f3f8ff;
  --blue-100: #c5dcff;
  --blue-200: #97c1fe;
  --blue-300: #69a5fe;
  --blue-400: #3b8afd;
  --blue-500: #0d6efd;
  --blue-600: #0b5ed7;
  --blue-700: #094db1;
  --blue-800: #073d8b;
  --blue-900: #052c65;
  --green-50: #f4f9f6;
  --green-100: #c8e2d6;
  --green-200: #9ccbb5;
  --green-300: #70b595;
  --green-400: #459e74;
  --green-500: #198754;
  --green-600: #157347;
  --green-700: #125f3b;
  --green-800: #0e4a2e;
  --green-900: #0a3622;
  --yellow-50: #fffcf3;
  --yellow-100: #fff0c3;
  --yellow-200: #ffe494;
  --yellow-300: #ffd965;
  --yellow-400: #ffcd36;
  --yellow-500: #ffc107;
  --yellow-600: #d9a406;
  --yellow-700: #b38705;
  --yellow-800: #8c6a04;
  --yellow-900: #664d03;
  --cyan-50: #f3fcfe;
  --cyan-100: #c5f2fb;
  --cyan-200: #97e8f9;
  --cyan-300: #69def6;
  --cyan-400: #3bd4f3;
  --cyan-500: #0dcaf0;
  --cyan-600: #0baccc;
  --cyan-700: #098da8;
  --cyan-800: #076f84;
  --cyan-900: #055160;
  --pink-50: #fdf5f9;
  --pink-100: #f5cee1;
  --pink-200: #eda7ca;
  --pink-300: #e681b3;
  --pink-400: #de5a9b;
  --pink-500: #d63384;
  --pink-600: #b62b70;
  --pink-700: #96245c;
  --pink-800: #761c49;
  --pink-900: #561435;
  --indigo-50: #f7f3fe;
  --indigo-100: #dac6fc;
  --indigo-200: #bd98f9;
  --indigo-300: #a06bf7;
  --indigo-400: #833df4;
  --indigo-500: #6610f2;
  --indigo-600: #570ece;
  --indigo-700: #470ba9;
  --indigo-800: #380985;
  --indigo-900: #290661;
  --teal-50: #f4fcfa;
  --teal-100: #c9f2e6;
  --teal-200: #9fe8d2;
  --teal-300: #75debf;
  --teal-400: #4ad3ab;
  --teal-500: #20c997;
  --teal-600: #1bab80;
  --teal-700: #168d6a;
  --teal-800: #126f53;
  --teal-900: #0d503c;
  --orange-50: #fff9f3;
  --orange-100: #ffe0c7;
  --orange-200: #fec89a;
  --orange-300: #feaf6d;
  --orange-400: #fd9741;
  --orange-500: #fd7e14;
  --orange-600: #d76b11;
  --orange-700: #b1580e;
  --orange-800: #8b450b;
  --orange-900: #653208;
  --bluegray-50: #f8f9fb;
  --bluegray-100: #e0e4ea;
  --bluegray-200: #c7ced9;
  --bluegray-300: #aeb9c8;
  --bluegray-400: #95a3b8;
  --bluegray-500: #7c8ea7;
  --bluegray-600: #69798e;
  --bluegray-700: #576375;
  --bluegray-800: #444e5c;
  --bluegray-900: #323943;
  --purple-50: #f8f6fc;
  --purple-100: #dcd2f0;
  --purple-200: #c1aee4;
  --purple-300: #a68ad9;
  --purple-400: #8a66cd;
  --purple-500: #6f42c1;
  --purple-600: #5e38a4;
  --purple-700: #4e2e87;
  --purple-800: #3d246a;
  --purple-900: #2c1a4d;
}

:root[theme="bootstrap4-dark-purple"],
:root[data-theme="bootstrap4-dark-purple"] {
  --primaryColor: #c298d8;
  --primaryColorRGBValue: 194, 152, 216;
  --primaryDarkColor: #aa70c7;
  --primaryDarkColorRGBValue: 170, 112, 199;
  --primaryDarkerColor: #9954bb;
  --primaryDarkerColorRGBValue: 153, 84, 187;
  --primaryTextColor: #151515;

  --primary-color-h: 279;
  --primary-color-s: 45%;
  --primary-color-l: 72%;

  --textColor: rgba(255, 255, 255, 0.87);
  --textSecondaryColor: rgba(255, 255, 255, 0.6);

  --borderRadius: 4px;
  --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
  --focusShadow: 0 0 0 1px var(--focusOutlineColor);

  --buttonPadding: 0.5rem 0.75rem;

  --inputBgColor: #20262e;
  --inputBorder: 1px solid #3f4b5b;
  --inputHoverBorderColor: #3f4b5b;
  --inputPadding: 0.5rem 0.75rem;
  --inputPlaceholderTextColor: rgba(255, 255, 255, 0.6);

  --inputListItemPadding: 0.5rem 1.5rem;
  --inputListBg: #2a323d;
  --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
  --inputListItemHoverTextColor: rgba(255, 255, 255, 0.87);
  --inputListHeaderBg: #2a323d;
  --inputListHeaderBorder: var(--inputBorder);
  --inputListHeaderPadding: 0.5rem 1.5rem;
  // --inputOverlayBg: #2a323d;

  --inputSwitchBorderRadius: 4px;
  --inputSwitchHandleBorderRadius: 4px;
  --inputSwitchSliderOffBg: #3f4b5b;
  --inputSwitchSliderOffHoverBg: #3f4b5b;
  --inputSwitchHandleOffBg: rgba(255, 255, 255, 0.6);
  --inputSwitchHandleOffHoverBg: rgba(255, 255, 255, 0.6);
  --inputSwitchHandleOnBg: var(--primaryTextColor);

  --panelHeaderPadding: 0.75rem 1rem;
  --panelContentBg: #2a323d;

  --checkboxBorder: 1px solid #3f4b5b;

  --tabviewNavBg: transparent;
  --tabviewNavBorder: 1px solid #3f4b5b;
  --tabviewNavBorderWidth: 0 0 1px 0;
  --tabviewHeaderBg: #2a323d;
  --tabviewHeaderBorder: solid;
  --tabviewHeaderBorderColor: transparent transparent #3f4b5b transparent;
  --tabviewHeaderBorderWidth: 1px 1px 2px 1px;
  --tabviewHeaderHoverBg: #2a323d;
  --tabviewHeaderTextHoverColor: var(--textColor);
  --tabviewHeaderHoverBorderColor: #3f4b5b #3f4b5b #3f4b5b #3f4b5b;
  --tabviewHeaderActiveBorderColor: #3f4b5b #3f4b5b #2a323d #3f4b5b;
  --tabviewHeaderActiveBg: #2a323d;
  --tabviewHeaderTextActiveColor: var(--textSecondaryColor);

  --plainButtonTextColor: rgba(255, 255, 255, 0.6);
  --plainButtonHoverBgColor: rgba(255, 255, 255, 0.04);
  --plainButtonActiveBgColor: rgba(255, 255, 255, 0.04);
  --linkButtonFocusShadow: 0 0 0 1px var(--focusOutlineColor);
  --secondaryButtonBg: #6c757d;
  --secondaryButtonTextColor: #ffffff;
  --secondaryButtonBorder: 1px solid #6c757d;
  --secondaryButtonHoverBg: #59626a;
  --secondaryButtonTextHoverColor: #ffffff;
  --secondaryButtonHoverBorderColor: #59626a;
  --secondaryButtonActiveBg: #4f5860;
  --secondaryButtonTextActiveColor: #ffffff;
  --secondaryButtonActiveBorderColor: #4f5860;
  --secondaryButtonFocusShadow: 0 0 0 1px hsl(208, 7%, calc(46% + 30%));
  --successButtonBg: #9fdaa8;
  --successButtonTextColor: var(--primaryTextColor);
  --successButtonBorder: 1px solid #78cc86;
  --successButtonHoverBg: #78cc86;
  --successButtonTextHoverColor: var(--primaryTextColor);
  --successButtonHoverBorderColor: #5ac06c;
  --successButtonActiveBg: #5ac06c;
  --successButtonTextActiveColor: var(--primaryTextColor);
  --successButtonActiveBorderColor: #3cb553;
  --successButtonFocusShadow: 0 0 0 1px hsl(129, 43%, calc(74% + 10%));
  --infoButtonBg: #7fd8e6;
  --infoButtonTextColor: var(--primaryTextColor);
  --infoButtonBorder: 1px solid #4cc8db;
  --infoButtonHoverBg: #4cc8db;
  --infoButtonTextHoverColor: var(--primaryTextColor);
  --infoButtonHoverBorderColor: #1c9588;
  --infoButtonActiveBg: #26bdd3;
  --infoButtonTextActiveColor: var(--primaryTextColor);
  --infoButtonActiveBorderColor: #00b2cc;
  --infoButtonFocusShadow: 0 0 0 1px hsl(188, 67%, calc(60% + 10%));
  --warningButtonBg: #ffe082;
  --warningButtonTextColor: var(--primaryTextColor);
  --warningButtonBorder: 1px solid #ffd54f;
  --warningButtonHoverBg: #ffd54f;
  --warningButtonTextHoverColor: var(--primaryTextColor);
  --warningButtonHoverBorderColor: #ffca28;
  --warningButtonActiveBg: #ffca28;
  --warningButtonTextActiveColor: var(--primaryTextColor);
  --warningButtonActiveBorderColor: #ffc107;
  --warningButtonFocusShadow: 0 0 0 1px hsl(45, 100%, calc(65% + 10%));
  --helpButtonBg: #b7a2e0;
  --helpButtonTextColor: var(--primaryTextColor);
  --helpButtonBorder: 1px solid #9a7cd4;
  --helpButtonHoverBg: #9a7cd4;
  --helpButtonTextHoverColor: var(--primaryTextColor);
  --helpButtonHoverBorderColor: #845fca;
  --helpButtonActiveBg: #845fca;
  --helpButtonTextActiveColor: var(--primaryTextColor);
  --helpButtonActiveBorderColor: #6d43c0;
  --helpButtonFocusShadow: 0 0 0 1px hsl(260, 56%, calc(66% + 10%));
  --dangerButtonBg: #f19ea6;
  --dangerButtonTextColor: var(--primaryTextColor);
  --dangerButtonBorder: 1px solid #e97984;
  --dangerButtonHoverBg: #e97984;
  --dangerButtonTextHoverColor: var(--primaryTextColor);
  --dangerButtonHoverBorderColor: #f75965;
  --dangerButtonActiveBg: #f75965;
  --dangerButtonTextActiveColor: var(--primaryTextColor);
  --dangerButtonActiveBorderColor: #fd464e;
  --dangerButtonFocusShadow: 0 0 0 1px hsl(354, 75%, calc(68% + 10%));

  --radiobuttonBorder: 2px solid #3f4b5b;
}
