:root {
    /**********/
    /* Colors */
    /**********/
    /* General */
    --primaryColor: #3094ff;
    --primaryLightColor: #3094ff08;
    --primaryInvertedColor: #ffffff;
    --secondaryColor: #687286;
    --successColor: #44af69;
    --successLightColor: #44af694d;
    --successInvertedColor: #ffffff;
    --warningColor: #ffb627;
    --warningInvertedColor: #ffffff;
    --warningLightColor: #ffb6274d;
    --errorColor: #fe4a49;
    --errorInvertedColor: #ffffff;
    --errorLightColor: #fe4a494d;
    --infoColor: var(--primaryColor);

    /* Layout */
    --bodyBackgroundColor: #ffffff;
    --componentBackgroundColor: #ffffff;
    --componentTitleColor: #434b59;
    --baseBackgroundColor: #fbfbff;
    --subtleBackgroundColor: #f9fafc;
    --hoveredBackgroundColor: #f6f7ff;
    --hoveredBorderColor: #d8dee8;
    --buttonBackgroundColor: #ffffff;
    --buttonBorderColor: #eaecf6;
    --buttonPrimaryBorderColor: var(--primaryColor);
    --secondaryButtonBackgroundColor: #ffffff;
    --borderColor: #eaecf6;
    --dropTargetBorderColor: #e0e0e0;
    --validDropTargetBackgroundColor: #d2f3d4;
    --validDropTargetBorderColor: #44af69;
    --iconColor: #8d97ab;
    --iconSubtleColor: #dddddd;
    --iconDisabledBackgroundColor: #eaecf6;
    --scrollbarThumbColor: #e0e0e0;
    --scrollbarThumbHoverColor: #8d97ab;
    --scrollbarBackgroundColor: #fbfbff;

    /* Text */
    --baseTextColor: #434b59;
    --bodyTextColor: #434b59;
    --buttonPrimaryTextColor: var(--primaryColor);
    --buttonTextColor: #687286;
    --inputLabelColor: #687286;
    --linkTextColor: var(--primaryColor);
    --linkHoverTextColor: var(--primaryColor);
    --headingsTextColor: #272727;
    --subtleTextColor: #687286;
    --disabledTextColor: #b1bdd2;
    --componentTextColor: #434b59;
    --componentSubtleTextColor: #92959a;
    --hoveredTextColor: #424242;
    --selectedTextColor: #ffffff;

    /* Series */
    --seriesAColor: #fe4a49;
    --seriesBColor: #ffb627;
    --seriesCColor: #44af69;
    --seriesDColor: #28b4c8;
    --seriesEColor: #004f9f;
    --seriesFColor: #922d50;

    /***********************/
    /* Main navigation bar */
    /***********************/
    --mainNavigationBackgroundColor: #ffffff;
    --mainNavigationColor: #687286;
    --mainNavigationActiveColor: var(--primaryColor);
    --mainNavigationHeaderTextColor: #434b59;

    /* Transparent style of the main navigation bar which is used on the dashboard */
    --mainNavigationTransparentBackgroundColor: 255, 255, 255;
    --mainNavigationTransparentColor: #687286;
    --mainNavigationTransparentActiveColor: var(--primaryColor);
    --mainNavigationTransparentHeaderTextColor: #434b59;

    /*************************/
    /* Bottom navigation bar */
    /*************************/
    --bottombarBackgroundColor: #ffffff;
    --bottombarColor: #687286;
}