:root {
  --surface-a: #ffffff;
  --surface-b: #f8f9fa;
  --surface-c: #e9ecef;
  --surface-d: #dee2e6;
  --surface-e: #ffffff;
  --surface-f: #ffffff;
  --text-color: #212529;
  --text-color-secondary: #6c757d;
  --primary-color: var(--primaryColor);
  --primary-color-text: #ffffff;
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;
  --surface-0: #ffffff;
  --surface-50: #f9fafb;
  --surface-100: #f8f9fa;
  --surface-200: #e9ecef;
  --surface-300: #dee2e6;
  --surface-400: #ced4da;
  --surface-500: #adb5bd;
  --surface-600: #6c757d;
  --surface-700: #495057;
  --surface-800: #343a40;
  --surface-900: #212529;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  --content-padding: 1rem;
  --inline-spacing: 0.5rem;
  --border-radius: 3px;
  --surface-ground: #f8f9fa;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #dee2e6;
  --surface-hover: #e9ecef;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: #f4e5ff;
  --highlight-text-color: #495057;
  --focus-ring: 0 0 0 0.2rem #a6d5fa;
  --cog-icon: url("https://api.iconify.design/fa-solid/cog.svg?color=%23ffffff&height=26");
  --times-icon: url("https://api.iconify.design/fa-solid/times.svg?color=%23ffffff&height=20");
}

:root {
  --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 {
  //main color scheme
  --primaryColor: #8f00ff;
  --primaryColorRGBValue: 143, 0, 255;
  --primaryDarkColor: #7200cc;
  --primaryDarkColorRGBValue: 114, 0, 204;
  --primaryDarkerColor: #550099;
  --primaryDarkerColorRGBValue: 85, 0, 153;
  --primaryTextColor: #ffffff;
  //hsl colors
  --primary-color-h: 273.6;
  --primary-color-s: 100%;
  --primary-color-l: 50%;

  //Global
  --fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;
  --fontSize: 1rem;
  --fontWeight: normal;
  --textColor: #495057;
  --textSecondaryColor: #6c757d;
  --borderRadius: 3px;
  --transitionDuration: 0.2s;
  --anyIconFontSize: 1rem;
  --disabledOpacity: 0.6;
  --errorColor: #e4677e;
  --formElementTransition: background-color var(--transitionDuration), color var(--transitionDuration),
    border-color var(--transitionDuration), box-shadow var(--transitionDuration);

  //anchors
  --linkColor: var(--primaryColor);
  --linkHoverColor: var(--primaryDarkColor);
  --linkActiveColor: var(--primaryDarkerColor);

  //highlight
  --highlightBgColor: var(--primaryColor);
  --highlightColorText: var(--primaryTextColor);

  //focus
  --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 30%));
  --focusOutline: 0 none;
  --focusOutlineOffset: 0;
  --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);

  //input field (e.g. inputtext, spinner, inputmask)
  --inputPadding: 0.5rem 0.5rem;
  --inputBgColor: #ffffff;
  --inputBorder: 1px solid #ced4da;
  --inputTextColor: var(--textColor);
  --inputHoverBorderColor: var(--primaryColor);
  --inputFocusBorderColor: var(--primaryColor);
  --inputErrorBorder: 1px solid #a80000;
  --inputPlaceholderTextColor: #6c757d;
  --inputTransition: border-color var(--transitionDuration), box-shadow var(--transitionDuration);
  --inputFilledBg: #f8f9fa;
  --inputFilledFocusBg: #ffffff;
  --inputFilledHoverBg: #f8f9fa;
  --inputIconColor: var(--textColor);
  --inputErrorBorderColor: #ced4da #ced4da #ced4da var(--errorColor);

  //input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
  --inputListMinWidth: 12.5em;
  --inputListBg: #ffffff;
  --inputListPadding: 0.5rem 0;
  --inputListItemPadding: 0.5rem 1rem;

  --inputListItemBgColor: transparent;
  --inputListItemTextColor: #333333;
  --inputListItemHoverBgColor: #e9ecef;
  --inputListItemHoverTextColor: #070606;
  --inputListItemHighlightBgColor: var(--highlightBgColor);
  --inputListItemHighlightTextColor: var(--highlightColorText);
  --inputListItemBorder: 0 none;
  --inputListItemMargin: 0;
  --inputListItemFocusShadow: inset var(--focusShadow);
  --inputListItemTransition: background-color var(--transitionDuration), box-shadow var(--transitionDuration);
  --inputListItemDividerColor: #d8dae2;
  --inputListHeaderPadding: 0.5rem 1rem;
  --inputListHeaderMargin: 0;
  --inputListHeaderBg: #f8f9fa;
  --inputListHeaderTextColor: var(--textColor);
  --inputListHeaderBorder: 0 none;
  --inputListHeaderSearchIconColor: var(--primaryColor);
  --inputListHeaderCloseIconColor: var(--textSecondaryColor);
  --inputListHeaderCloseIconHoverColor: var(--textColor);
  --inputListHeaderCloseIconTransition: color var(--transitionDuration), background-color var(--transitionDuration),
    box-shadow var(--transitionDuration);
  //static positioned input lists like listbox
  --inputListBorder: var(--inputBorder);

  //inputs with panels (e.g. password)
  --inputContentPanelPadding: 12px;
  --inputContentPanelBgColor: #ffffff;
  --inputContentPanelTextColor: var(--textColor);

  //inputs with overlays (e.g. autocomplete, dropdown, multiselect)
  --inputOverlayBorder: 1px solid #c8c8c8;
  --inputOverlayDownShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  --inputOverlayUpShadow: 0 0 3px 6px rgba(0, 0, 0, 0.16);
  --inputOverlayBg: var(--inputListBg);

  //input dropdowns (e.g. multiselect, dropdown)
  --inputDropdownIconColor: var(--textSecondaryColor);

  //input switch
  --inputSwitchWidth: 3rem;
  --inputSwitchHeight: 1.75rem;
  --inputSwitchBorderRadius: 30px;
  --inputSwitchHandleWidth: 1.25rem;
  --inputSwitchHandleHeight: 1.25rem;
  --inputSwitchHandleBorderRadius: 50%;
  --inputSwitchSliderPadding: 0.25rem;
  --inputSwitchSliderOffBg: #ced4da;
  --inputSwitchHandleOffBg: #ffffff;
  --inputSwitchSliderOffHoverBg: #c3cad2;
  --inputSwitchSliderOnBg: var(--primaryColor);
  --inputSwitchSliderOnHoverBg: var(--primaryDarkColor);
  --inputSwitchHandleOnBg: #ffffff;

  --checkboxWidth: 20px;
  --checkboxHeight: 20px;
  --checkboxBorder: 2px solid #ced4da;
  --checkboxIconFontSize: 14px;
  --checkboxActiveBorderColor: var(--primaryColor);
  --checkboxActiveBg: var(--primaryColor);
  --checkboxIconActiveColor: var(--primaryTextColor);
  --checkboxActiveHoverBg: var(--primaryDarkColor);
  --checkboxIconActiveHoverColor: var(--primaryTextColor);
  --checkboxActiveHoverBorderColor: var(--primaryDarkColor);

  //panels: tabview
  --panelHeaderBorderColor: #dee2e6;
  --panelHeaderBorder: 1px solid #dee2e6;
  --panelHeaderBg: #f8f9fa;
  --panelHeaderTextColor: var(--textColor);
  --panelHeaderFontWeight: 600;
  --panelHeaderPadding: 1rem;
  --panelToggleableHeaderPadding: 0.5rem 1rem;
  --panelHeaderHoverBg: #e9ecef;
  --panelHeaderHoverBorderColor: #dee2e6;
  --panelHeaderTextHoverColor: #495057;
  --panelContentBorderColor: #dee2;
  --panelContentBorder: 1px solid #dee2e6;
  --panelContentBg: #ffffff;
  --panelContentTextColor: var(--textColor);
  --panelContentPadding: 1rem;
  --panelFooterBorder: 1px solid #dee2e6;
  --panelFooterBg: #ffffff;
  --panelFooterTextColor: var(--textColor);
  --panelFooterPadding: 0.5rem 1rem;

  --tabviewNavBorder: 1px solid #dee2e6;
  --tabviewNavBorderWidth: 0 0 2px 0;
  --tabviewNavBg: #ffffff;
  --tabviewHeaderSpacing: 0;
  --tabviewHeaderBorder: solid #dee2e6;
  --tabviewHeaderBorderWidth: 0 0 2px 0;
  --tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;
  --tabviewHeaderBg: #ffffff;
  --tabviewHeaderTextColor: var(--textSecondaryColor);
  --tabviewHeaderFontWeight: var(--panelHeaderFontWeight);
  --tabviewHeaderPadding: var(--panelHeaderPadding);
  --tabviewHeaderMargin: 0 0 -2px 0;
  --tabviewHeaderHoverBg: #ffffff;
  --tabviewHeaderHoverBorderColor: #9ba2aa;
  --tabviewHeaderTextHoverColor: var(--textSecondaryColor);
  --tabviewHeaderActiveBg: #ffffff;
  --tabviewHeaderActiveBorderColor: var(--primaryColor);
  --tabviewHeaderTextActiveColor: var(--primaryColor);
  --tabviewContentBorder: 0 none;
  --tabviewContentBg: var(--panelContentBg);
  --tabviewContentTextColor: var(--panelContentTextColor);
  --tabviewContentPadding: var(--panelContentPadding);

  // buttons
  --outlinedButtonBorder: 1px solid;
  --roundedButtonBorderRadius: 2rem;
  --raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --textButtonHoverBgOpacity: 0.04;
  --textButtonActiveBgOpacity: 0.16;
  --plainButtonTextColor: #6c757d;
  --plainButtonHoverBgColor: #e9ecef;
  --plainButtonActiveBgColor: #dee2e6;
  --buttonPadding: 0.5rem 1rem;
  --buttonTextColor: var(--primaryTextColor);
  --buttonBg: var(--primaryColor);
  --buttonBorder: 1px solid var(--primaryColor);
  --buttonHoverBg: var(--primaryDarkColor);
  --buttonTextHoverColor: var(--primaryTextColor);
  --buttonHoverBorderColor: var(--primaryDarkColor);
  --buttonActiveBg: var(--primaryDarkerColor);
  --buttonTextActiveColor: var(--primaryTextColor);
  --buttonActiveBorderColor: var(--primaryDarkerColor);
  --buttonIconOnlyWidth: 2.357rem;
  --buttonIconOnlyPadding: 0.5rem 0;
  --linkButtonColor: var(--primaryColor);
  --linkButtonHoverColor: var(--primaryColor);
  --linkButtonFocusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
  --linkButtonTextHoverDecoration: underline;
  --secondaryButtonBg: #607d8b;
  --secondaryButtonTextColor: #ffffff;
  --secondaryButtonBorder: 1px solid #607d8b;
  --secondaryButtonHoverBg: #546e7a;
  --secondaryButtonTextHoverColor: #ffffff;
  --secondaryButtonHoverBorderColor: #546e7a;
  --secondaryButtonActiveBg: #455a64;
  --secondaryButtonTextActiveColor: #ffffff;
  --secondaryButtonActiveBorderColor: #455a64;
  --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 18%, calc(46% + 30%));
  --successButtonBg: #4caf50;
  --successButtonTextColor: #ffffff;
  --successButtonBorder: 1px solid #4caf50;
  --successButtonHoverBg: #43a047;
  --successButtonTextHoverColor: #ffffff;
  --successButtonHoverBorderColor: #43a047;
  --successButtonActiveBg: #388e3c;
  --successButtonTextActiveColor: #ffffff;
  --successButtonActiveBorderColor: #388e3c;
  --successButtonFocusShadow: 0 0 0 0.2rem hsl(122, 39%, calc(49% + 30%));
  --infoButtonBg: #03a9f4;
  --infoButtonTextColor: #ffffff;
  --infoButtonBorder: 1px solid #03a9f4;
  --infoButtonHoverBg: #039be5;
  --infoButtonTextHoverColor: #ffffff;
  --infoButtonHoverBorderColor: #039be5;
  --infoButtonActiveBg: #0288d1;
  --infoButtonTextActiveColor: #ffffff;
  --infoButtonActiveBorderColor: #0288d1;
  --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 98%, calc(48% + 30%));
  --warningButtonBg: #ffc107;
  --warningButtonTextColor: var(--textColor);
  --warningButtonBorder: 1px solid #ffc107;
  --warningButtonHoverBg: #ffb300;
  --warningButtonTextHoverColor: var(--textColor);
  --warningButtonHoverBorderColor: #ffb300;
  --warningButtonActiveBg: #ffa000;
  --warningButtonTextActiveColor: var(--textColor);
  --warningButtonActiveBorderColor: #ffa000;
  --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
  --helpButtonBg: #9c27b0;
  --helpButtonTextColor: #ffffff;
  --helpButtonBorder: 1px solid #9c27b0;
  --helpButtonHoverBg: #8e24aa;
  --helpButtonTextHoverColor: #ffffff;
  --helpButtonHoverBorderColor: #8e24aa;
  --helpButtonActiveBg: #7b1fa2;
  --helpButtonTextActiveColor: #ffffff;
  --helpButtonActiveBorderColor: #7b1fa2;
  --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
  --dangerButtonBg: #f44336;
  --dangerButtonTextColor: #ffffff;
  --dangerButtonBorder: 1px solid #f44336;
  --dangerButtonHoverBg: #e53935;
  --dangerButtonTextHoverColor: #ffffff;
  --dangerButtonHoverBorderColor: #e53935;
  --dangerButtonActiveBg: #d32f2f;
  --dangerButtonTextActiveColor: #ffffff;
  --dangerButtonActiveBorderColor: #d32f2f;
  --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));

  // Misc
  --badgeBg: var(--primaryColor);
  --badgeTextColor: var(--primaryTextColor);
  --badgeMinWidth: 1.5rem;
  --badgeHeight: 1.5rem;
  --badgeFontWeight: 700;
  --badgeFontSize: 0.75rem;

  // Radio button
  --radiobuttonWidth: 20px;
  --radiobuttonHeight: 20px;
  --radiobuttonBorder: 2px solid #ced4da;
  --radiobuttonIconSize: 12px;
  --radiobuttonActiveBorderColor: var(--primaryColor);
  --radiobuttonActiveBg: var(--primaryColor);
  --radiobuttonIconActiveColor: var(--primaryTextColor);
  --radiobuttonActiveHoverBg: var(--primaryDarkerColor);
  --radiobuttonIconActiveHoverColor: var(--primaryTextColor);
  --radiobuttonActiveHoverBorderColor: var(--primaryDarkerColor);
}
