:root {
    /**********/
    /* Colors */
    /**********/
    /* General */
    --primaryColor:             #3094FF;
    --primaryLightColor:        #EBF2FD;
    --primaryInvertedColor:     #FFFFFF;
    --secondaryColor:           #687286;
    --successColor:             #44AF69;
    --successLightColor:        #E4FFEE;
    --successInvertedColor:     #FFFFFF;
    --warningColor:             #FFB627;
    --warningInvertedColor:     #FFFFFF;
    --warningLightColor:        #FFF9EC;
    --errorColor:               #FE4A49;
    --errorInvertedColor:       #FFFFFF;
    --errorLightColor:          #FFEDED;
    --infoColor:                var(--primaryColor);

    /* Layout */
    --bodyBackgroundColor:            #FFFFFF;
    --componentBackgroundColor:       #FFFFFF;
    --componentTitleColor:            #8D97AB;
    --baseBackgroundColor:            #FBFBFF;
    --subtleBackgroundColor:          #F6F7FF;
    --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:                  #B1BDD2;
    --disabledTextColor:                #B1BDD2;
    --componentTextColor:               #434B59;
    --componentSubtleTextColor:         #B1BDD2;
    --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;
}