@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500|Roboto:400,500&display=swap');

:root {
    /* COLOURS */
    --color-primary: #17173A;
    --color-secondary: #2B2B6E;
    --color-secondary-light: #4242D9;
    --color-background: #F4F4F4;
    --color-black: #1D2423;
    --color-grey-dark: #4A504F;
    --color-grey-less-dark: #8e9191;
    --color-grey: #BBBDBD;
    --color-grey-light: #F4F4F4;
    --color-grey-lightest: #FAFAFA;
    --color-grey-hover: #C7C8C8;
    --color-info: #019BEB;
    --color-info-rgb: 1, 155, 235;
    --color-success: #00D46E;
    --color-success-20: rgba(0, 212, 110, 0.3);
    --color-success-rgb: 0, 212, 110;
    --color-alert: #FF4446;
    --color-alert-rgb: 255, 68, 70;
    --color-alert-20: rgba(255, 68, 70, 0.2);
    --color-warning: #FF7B00;
    --color-warning-rgb: 255,123,0;
    --color-caution: #FFCB00;
    --color-caution-rgb: 255, 203, 0;
    --color-accent: #00DEC8;
    --color-accent-light: #FFFFFF;
    --color-accent-10: rgba(0, 214, 173, 0.1);
    --color-alternate: #00C2AF;
    --color-alternate-light: #00DEC8;
    --color-avatar-background: #0f1c47;
    --color-avatar-text: #00FFFF;
    --color-toggle-switch-alternate-hover: #2e96ff;
    --color-toggle-switch-grey-hover: #cacaca;
    --black: 0, 0, 0;
    --white: 255, 255, 255;
    --font-primary: 'Roboto', arial;
}