/* stylelint-disable */
@custom-media --min-xx-small (min-width: 361px);
@custom-media --max-xx-small (max-width: 360px);
@custom-media --min-x-small (min-width: 481px);
@custom-media --max-x-small (max-width: 480px);
@custom-media --min-small (min-width: 601px);
@custom-media --max-small (max-width: 600px);
@custom-media --min-medium (min-width: 961px);
@custom-media --max-medium (max-width: 960px);
@custom-media --min-large (min-width: 1081px);
@custom-media --max-large (max-width: 1080px);
@custom-media --min-x-large (min-width: 1261px);
@custom-media --max-x-large (max-width: 1260px);
@custom-media --min-xx-large (min-width: 1361px);
@custom-media --max-xx-large (max-width: 1360px);
/* stylelint-enable */
/*
 * Config file
 * allows to quickly adapt the pattern-library styles to various project
 */
/**
 * Mixin to reset colours in dark-theme
 * (for elements that adopt the same styles across themes)
 */
:root {
  --navTopPos: 4rem;
  --pink: #ff006e;
  --mint: #12c1ae;
  --blue: #101f3c;
  --blue-alternate: #287ef7;
  --dark-indigo: #080727;
  --indigo: #3a1bb9;
  --light-indigo: #5f1fff;
  --soft-red: #d92121;
  --purple: #8640f4;
  --light-purple: #d9c1ff;
  --ditto-black: #111;
  --ditto-grey: #626984;
  --ditto-starter: #955fff;
  --ditto-pro: #0f9;
  --ditto-label: #f6c443;
  --white: #fff;
  --darker-grey: #44444c;
  --dark-grey: #9595a7;
  --darkening-grey: #c7c4d6;
  --faded-grey: #d2d2e3;
  --medium-grey: #dddde7;
  --light-grey: #efeffc;
  --lighter-grey: #f9f9ff;
  --error: #ec0515;
  --warning: #ffb100;
  --success: #00e785;
  --info: #287ef7;
  --strong-warning: #de6a3f;
  --brand-font-body: "Satoshi", Helvetica, Arial, sans-serif;
  --brand-font-heading: "Poppins", Helvetica, Arial, sans-serif;
  --gutter: 30px;
  --button-border-radius: 2rem;
  --button-border-size: 2px;
  --input-font-size: 18px;
  --input-margin: 1.5rem;
  --input-padding: 1.5rem;
  --text-input-padding: calc(var(--input-padding) - 2px);
  --navbar-collapse-breakpoint: 990px;
  --brand-body: #101f3c;
  --brand-body-light: #626984;
  --brand-border: #d2d2e3;
  --brand-inactive: #aac;
  --brand-primary: #5f1fff;
  --brand-primary-hover: rgb(149.6428571429, 107.5, 255);
  --brand-primary-active: #8640f4;
  --brand-secondary: #287ef7;
  --brand-secondary-hover: #559cff;
  --brand-secondary-active: #285bf7;
  --error: #ec0515;
  --dark-brand-bg: #2c2c31;
  --dark-brand-bg-darker: #1f1f1f;
  --dark-brand-bg-lighter: #313135;
  --primary-button-colour: var(--brand-primary);
  --primary-button-hover: var(--brand-primary-hover);
  --primary-button-active: var(--brand-primary-active);
  --secondary-button-colour: var(--brand-primary);
  --secondary-button-hover: var(--brand-primary-hover);
  --secondary-button-active: var(--brand-primary-active);
  --secondary-button-background: transparent;
  --tertiary-button-colour: var(--brand-secondary);
  --tertiary-button-hover: var(--brand-secondary-hover);
  --tertiary-button-active: var(--brand-secondary-active);
  --text-button-colour: var(--brand-primary);
  --text-button-hover: var(--brand-primary-hover);
  --text-button-active: var(--purple);
  --button-grey: #f2f2fd;
  --dropdown-link-bg: white;
  --dropdown-link-color: var(--ditto-grey);
  --dropdown-link-hover-color: var(--brand-primary);
  --dropdown-text-color: var(--blue);
  --input-color: var(--blue);
  --input-border-color: var(--brand-border);
  --input-placeholder-color: #b1b1c3;
  --input-disabled-bg: var(--lighter-grey);
  --input-disabled-color: var(--brand-border);
  --input-disabled-border-color: var(--brand-border);
  --label-color: var(--brand-body-light);
  --label-disabled-color: var(--input-disabled-color);
  --table-header-color: #7e7e7e;
  --toggle-bg: #e9e9eb;
  --toggle-bg-checked: var(--success);
  --toggle-color: #fff;
  --toggle-disabled-bg: var(--toggle-bg);
  --toggle-disabled-bg-checked: var(--input-disabled-color);
  --toggle-disabled-color: var(--input-disabled-bg);
  --toggle-disabled-label-color: var(--input-disabled-color);
}