:root {
    /******************************************************************************************************************************************************/
    /* Colors of MOSAIK                                                                                                                                   */
    /******************************************************************************************************************************************************/
    /* --background: #f5f7fb;   /* background color */
    /* --lightgreen: #8dc63f;   /* the default green used in MOSAIK */
    /* --blue: #285d9d;         /* the default blue used in MOSAIK */
    /* --night-blue: #132c4a;   /* the default dark blue used in MOSAIK */
    /* --dark-blue: #272e36;    /* the default dark blue/black used in MOSAIK */
    /* --dark-grey: #bdbdbd;    /* the default dark grey used in MOSAIK */
    /* --light-grey: #d8d8d8;   /* the default light grey used in MOSAIK */
    /* --signal-pink: #f01e54;  /* the default red used in MOSAIK */

    /* --surface: #f9f9fc;
    /* --surface-container: #edeef0;
    /* --surface-container-high: #e7e8eb;
    /* --surface-container-highest: #e2e2e5;
    /* --inverse-surface: #2e3133;
    /* --outline: #6f797a;
    /* --opacity: #1d1b201f; /* currently not used */
    /* --dark-surface: #111416;
    /* --dark-surface-container: #1d2022;
    /* --dark-surface-container-high: #282a2c;
    /* --dark-surface-container-highest: #333537;
    /* --inverse-primary: #A6C8FF;
    /* --dark-outline: #899294;

    /* general colors */
    /* --error-color: #f01e54;      /* default color used to display errors in MOSAIK */
    /* --info-color: darkgreen;       /* default color used to display infos in MOSAIK */
    /* --warning-color: darkorange;    /* default color used to display warnings in MOSAIK */
    /* --question-color: #272e36;   /* default color used to display questions in MOSAIK */

    /******************************************************************************************************************************************************/
    /* Basic UI elements of MOSAIK                                                                                                                        */
    /******************************************************************************************************************************************************/
    
    /* Text */
    /* --font-color: #272e36;        /* default font color of MOSAIK */
    /* --title-font-color: #132c4a;  /* default font color for titles in MOSAIK */
    /* --light-font-color: white;    /* default font color for dark backgrounds in MOSAIK */
    /* --error-font-color: #f01e54;  /* default font color for errors in MOSAIK */

    /* Default Button colors */
    /* --button-color: #132c4a;             /* default button color in MOSAIK */
    /* --button-hover-color: #285d9d;       /* default color for hovered buttons in MOSAIK */
    /* --button-font-color: white;          /* default color for text in MOSAIK buttons */
    /* --button-hover-font-color: white;    /* default color for text in MOSAIK buttons when hovered */
    /* --button-icon-color: white;          /* default color for icons in MOSAIK buttons */
    /* --button-hover-icon-color: white;    /* default color for icons in MOSAIK buttons when hovered */
    
    /* Light Button colors */
    /* --button-light-color: white;                 /* default light button color in MOSAIK */
    /* --button-light-hover-color: #e7e8eb;         /* default color for hovered light buttons in MOSAIK */
    /* --button-light-font-color: #132c4a;          /* default color for text in MOSAIK light buttons */
    /* --button-light-hover-font-color: #132c4a;    /* default color for text in MOSAIK light buttons when hovered */
    /* --button-light-icon-color: #285d9d;          /* default color for icons in MOSAIK light buttons */
    /* --button-light-hover-icon-color: #132c4a;    /* default color for icons in MOSAIK light buttons when hovered */
    /* --button-light-border-color: #bdbdbd;        /* default color for the border of MOSAIK light buttons */
    /* --button-light-hover-border-color: #bdbdbd;  /* default color for the border of MOSAIK light buttons when hovered */

    /* Disabled Button colors */
    /* --button-disabled-color: #d8d8d8;        /* default color MOSAIK buttons when disabled */
    /* --button-disabled-font-color: #bdbdbd;   /* default color for text in MOSAIK buttons when disabled */
    /* --button-disabled-icon-color: #bdbdbd;   /* default color of icons in MOSAIK buttons when disabled */
    /* --button-disabled-border-color: #d8d8d8; /* default color for the border of MOSAIK buttons when disabled */
    
    /* Inputs */
    /* --input-color: white;                    /* default color for MOSAIK inputs */
    /* --input-font-color: #272e36;             /* default font color for MOSAIK inputs */
    /* --input-error-color: #f01e54;            /* default error color for MOSAIK inputs */
    /* --input-disabled-color: #d8d8d8;         /* default disabled color for MOSAIK inputs */
    /* --input-disabled-font-color: #d8d8d8;    /* default disabled font color for MOSAIK inputs */
    /* --input-disabled-icon-color: #bdbdbd;    /* default disabled icon color for MOSAIK inputs */
    /* --input-border-color: #bdbdbd;           /* default border color for MOSAIK inputs */
    /* --input-error-border-color: #f01e54;     /* default border color for MOSAIK inputs with an error */
    /* --input-hover-border-color: #132c4a;     /* default border color for MOSAIK inputs when hovered */
    /* --input-icon-color: #285d9d;             /* default icon color for MOSAIK inputs */
    /* --input-icon-hover-color: #132c4a;       /* default icon color for MOSAIK inputs when hovered */
    /* --input-label-font-color: #132c4a;       /* default font color for the labels of the MOSAIK inputs */
    /* --input-required-color: #f01e54;         /* default color to mark a MOSAIK input as required */

    /* Dimension Inputs */ 
    /* --dim-input-hover-color: #e7e8eb;        /* default color for MOSAIK dimension inputs when hovered */
    /* --dim-input-hover-font-color: #272e36;   /* default font color for MOSAIK dimension inputs when hovered */
    /* --dim-input-hover-icon-color: #132c4a;   /* default icons color for MOSAIK dimension inputs when hovered */

    /* Checkboxes */
    /* --checkbox-color: white;                     /* default color for MOSAIK checkboxes */
    /* --checkbox-border-color: #d8d8d8;            /* default border color for MOSAIK checkboxes */
    /* --checkbox-checked-color: #132c4a;           /* default color for MOSAIK checkboxes when checked */
    /* --checkbox-checked-border-color: #132c4a;    /* default border color for MOSAIK checkboxes when checked */
    /* --checkbox-checked-checkmark-color: white;   /* default color for MOSAIK checkboxes checkmarks when checked */

    /* Toggles (On-/Off-Switches) */
    /* --toggle-color: #e2e2e5;                         /* default MOSAIK toggle color (behind the circle) */
    /* --toggle-switch-color: #2e3133;                  /* default MOSAIK toggle switch color (the circle) */
    /* --toggle-hover-switch-color: #285d9d;            /* default MOSAIK toggle switch color (the circle) when hovered */
    /* --toggle-active-color: #132c4a;                  /* default MOSAIK toggle color (behind the circle) when active (switch is on) */
    /* --toggle-active-switch-color: white;             /* default MOSAIK toggle switch color (the circle) when active (switch is on) */
    /* --toggle-active-hover-switch-color: #A6C8FF;     /* default MOSAIK toggle switch color (the circle) when hovered and active (switch is on) */
    /* --toggle-label-inactive-font-color: #6f797a;     /* default color for inactive explanation labels on MOSAIK toggles */

    /* Radio buttons */
    /* --radiobutton-color: white;                      /* default MOSAIK radio button color */
    /* --radiobutton-border-color: #bdbdbd;             /* default MOSAIK radio button border color */
    /* --radiobutton-checked-color: #132c4a;            /* default MOSAIK radio button color when checked/selected */
    /* --radiobutton-checked-border-color: #132c4a;     /* default MOSAIK radio button border color when checked/selected */
    /* --radiobutton-checked-circle-color: white;       /* default MOSAIK radio button circle color when checked/selected */
    
    /* Search bar */
    /* --input-search-icon-color: #bdbdbd;  /* default color for the search icon in the search bar input */
    
    /* Dropdowns */
    /* --dropdown-icon-color: #285d9d;          /* default color of the caret showing if the MOSAIK dropdown is open */
    /* --dropdown-hover-color: #e7e8eb;         /* default color of the MOSAIK dropdown when hovered */
    /* --dropdown-hover-icon-color: #132c4a;    /* default color of the caret showing if the MOSAIK dropdown is open when hovered */

    /* Dropdown options */
    /* --dropdown-options-color: white;                             /* default color of the MOSAIK dropdown options */
    /* --dropdown-options-border-color: #132c4a;                    /* default border color of the MOSAIK dropdown options */
    /* --dropdown-options-font-color: #272e36;                      /* default font color of the MOSAIK dropdown options */
    /* --dropdown-options-hover-color: rgba(141, 198, 63, 0.3);     /* default color of the MOSAIK dropdown options when hovered */
    /* --dropdown-options-hover-font-color: #272e36;                /* default font color of the MOSAIK dropdown options when hovered */
    /* --dropdown-options-selected-color: #8dc63f;                  /* default color of the MOSAIK dropdown options when selected */
    /* --dropdown-options-selected-font-color: white;               /* default font color of the MOSAIK dropdown options when selected */

    /* Slider (currently not in use) */
    /* --slider-color: white;                                       /* default color of the MOSAIK slider */
    /* --slider-control-color: white;                               /* default color of the MOSAIK slider control*/
    /* --slider-control-icon-color: #285d9d;                        /* default color of the MOSAIK slider control icons */
    /* --slider-control-icon-hover-color: #132c4a;                  /* default color of the MOSAIK slider control icons when they are hovered */
    /* --slider-control-icon-selected-color: #8dc63f;               /* default color of the MOSAIK slider control icon for the selected slide */

    /* Tabs */
    /* --tabs-background-color: white;                                  /* default background color for tabs in MOSAIK */
    /* --tabs-bottom-gradient: linear-gradient(to bottom, #eee, #fff);  /* default gradient/shadow between tabs and their content in MOSAIK */
    /* --tabs-bottom-border-color: #bdbdbd;                             /* default border color between tabs and their content in MOSAIK */

    /* Singe Tab */
    /* --tab-color: white;                          /* default color of a tab in MOSAIK */
    /* --tab-font-color: #272e36;                   /* default font color of a tab in MOSAIK */
    /* --tab-border-color: #bdbdbd;                 /* default border color of a tab in MOSAIK */
    /* --tab-icon-color: #285d9d;                   /* default icon color of a tab in MOSAIK */
    /* --tab-icon-warning-color: #f01e54;           /* default warning icon color of a tab in MOSAIK (e.g. for delete icons, etc.) */
    /* --tab-hover-color: #e7e8eb;                  /* default color of a non-selected hovered tab in MOSAIK */
    /* --tab-hover-font-color: #272e36;             /* default font color of a non-selected hovered tab in MOSAIK */
    /* --tab-hover-border-color: #bdbdbd;           /* default border color of a non-selected hovered tab in MOSAIK */
    /* --tab-hover-icon-color: #132c4a;             /* default icon color of a non-selected hovered tab in MOSAIK */
    /* --tab-selected-color: #272e36;               /* default color of a selected tab in MOSAIK */
    /* --tab-selected-font-color: white;            /* default font color of a selected tab in MOSAIK */
    /* --tab-selected-border-color: #272e36;        /* default border color of a selected tab in MOSAIK */
    /* --tab-selected-icon-color: white;            /* default icon color of a selected tab in MOSAIK */
    /* --tab-selected-icon-hover-color: #A6C8FF;    /* default hovered icon color of a selected tab in MOSAIK */
    /* --tab-error-font-color: #f01e54;             /* default error font color of a selected tab in MOSAIK */

    /* Tables */
    /* --table-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);     /* default shadow for tables in MOSAIK */

    /* Table headers */
    /* --table-header-color: #272e36;               /* default color of table headers in MOSAIK */
    /* --table-header-font-color: white;            /* default font color of table headers in MOSAIK */
    /* --table-header-icon-color: white;            /* default icon color of table headers in MOSAIK */
    /* --table-header-icon-hover-color: #A6C8FF;    /* default color for hovered icons in table headers in MOSAIK */

    /* Table rows */
    /* --table-row-color: white;                                    /* default color of table rows in MOSAIK */
    /* --table-row-bottom-line-color: #d8d8d8;                      /* default color of separators between table rows in MOSAIK */
    /* --table-row-hover-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);     /* default shadow of hovered table rows in MOSAIK */
    /* --table-row-font-color: #272e36;                             /* default font color of table rows in MOSAIK */
    /* --table-row-icon-color: #285d9d;                             /* default icon color in table rows in MOSAIK */
    /* --table-row-icon-hover-color: #132c4a;                       /* default color of hovered icons in table rows in MOSAIK */
    /* --table-row-icon-warning-hover-color: #f01e54;               /* default color of hovered warning icons in table rows in MOSAIK (e.g. delete icons) */

    /* Pills */
    /* --pill-color: #132c4a;               /* default color of a pill of MOSAIK */
    /* --pill-icon-color: white;            /* default color of icons in a pill of MOSAIK */
    /* --pill-icon-hover-color: #A6C8FF;    /* default color of hovered icons in a pill of MOSAIK */
    /* --pill-font-color: white;            /* default font color in a pill of MOSAIK */

    /* Pill selections */
    /* --pill-unselected-color: white;                  /* default color of an unselected pill of MOSAIK */
    /* --pill-unselected-border-color: #132c4a;         /* default border color of an unselected pill of MOSAIK */        
    /* --pill-unselected-font-color: #132c4a;           /* default font color of an unselected pill of MOSAIK */
    /* --pill-unselected-icon-color: #285d9d;           /* default icon color of an unselected pill of MOSAIK */
    /* --pill-unselected-icon-hover-color: #132c4a;     /* default color of a hovered icon in an unselected pill of MOSAIK */
    /* --pill-unselected-hover-color: #e7e8eb;          /* default color of an unselected hovered pill of MOSAIK */

    /* Pill buttons */
    /* --pill-button-color: white;                  /* default color of a pill button of MOSAIK */
    /* --pill-button-hover-color: #e7e8eb;          /* default color of a hovered pill button of MOSAIK */
    /* --pill-button-border-color: #132c4a;         /* default border color of a pill button of MOSAIK */
    /* --pill-button-icon-color: #285d9d;           /* default icon color of a pill button of MOSAIK */
    /* --pill-button-icon-hover-color: #132c4a;     /* default color of hovered icons in a pill button of MOSAIK */
    /* --pill-button-font-color: #132c4a;           /* default font color of a pill button of MOSAIK */

    /* Info icon */
    /* --info-icon-color: #285d9d;              /* Info icon color */
    /* --info-icon-hover-color: #132c4a;        /* Info icon color on hover */
    /* --info-light-icon-color: white;          /* Info icon color for dark backgrounds */
    /* --info-light-icon-hover-color: #A6C8FF;  /* Info icon color on hover for dark backgrounds */

    /* Tooltip */
    /* --tooltip-color: #111416;                                                                    /* tooltip background color*/
    /* --tooltip-font-color: #f9f9fc;                                                               /* tooltip font color */
    /* --tooltip-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);  /* tooltip shadow */

    /* Stepper */
    /* --stepper-icon-color: #132c4a;           /* color of the icons in a stepper */
    /* --stepper-icon-check-color: #8dc63f;     /* color of the circle of the check icon */
    /* --stepper-icon-checkmark-color: white;   /* color of the checkmark of the check icon */
    /* --stepper-number-font-color: #9d9d9d;    /* font color of the text showing the step and number */
    /* --stepper-text-font-color: #132c4a;      /* font color of the step title text */
    /* --stepper-line-color: #d8d8d8;           /* color of the line between steps */

    /* Collapsible/Details */
    /* --details-background-color: white;                               /* default background of details/collapsibles */
    /* --details-shadow: 2px 2px 16px 12px rgba(159, 159, 159, 0.13);   /* default shadow of details/collapsibles */
    /* --details-summary-font-color: #272e36;                           /* default color of the title of details/collapsibles */

    /* SVG Toggle colors */
    /* --svg-toggle-color: #D8D8D8;         /* color of the svg toggle */
    /* --svg-toggle-light-color: white;     /* light color of the svg toggle (e.g. when the background is dark) */
    /* --svg-toggle-closed-color: #132c4a;  /* color of the svg toggle when it is closed and not light */

    /******************************************************************************************************************************************************/
    /* The header of MOSAIK                                                                                                                               */
    /******************************************************************************************************************************************************/
    /* --header-color: white;                       /* default color of the header */
    /* --header-left-icon-color: #132c4a;           /* default color for the icons on the left side of the header */
    /* --header-center-font-color: #132c4a;         /* default font color of the page title */
    /* --header-center-icon-color: #132c4a;         /* default color for the icons in the centre of the header */
    /* --header-right-icon-color: #6f797a;          /* default color for the icons on the right side of the header */
    /* --header-right-icon-hover-color: #132c4a;    /* default color for the hovered icons on the right side of the header */
    /* --header-left-logo-height: 17px;             /* default height for the logo on the left side of the header */
    
    /******************************************************************************************************************************************************/
    /* The breadcrumb of MOSAIK                                                                                                                               */
    /******************************************************************************************************************************************************/
    /* --breadcrumb-background-color: white;        /* default background color of the breadcrumb */
    /* --breadcrumb-font-color: #132c4a;            /* default font color of the breadcrumb */
    
    /******************************************************************************************************************************************************/
    /* The footer of MOSAIK                                                                                                                               */
    /******************************************************************************************************************************************************/
    /* --footer-color: #272e36;             /* default color of the footer */
    /* --footer-font-color: #CFCFCF;        /* default font color of the footer */
    /* --footer-timer-color: #CFCFCF;       /* default color of the timer in the footer */
    /* --footer-icon-color: #CFCFCF;        /* default color of the icons in the footer */
    /* --footer-icon-hover-color: #A6C8FF;  /* default color of the hovered icons in the footer */

    /******************************************************************************************************************************************************/
    /* The toolbar of MOSAIK                                                                                                                              */
    /******************************************************************************************************************************************************/
    /* basic toolbar */
    /* --tb-color: white;           /* default toolbar color of MOSAIK */
    /* --tb-font-color: #132c4a;    /* default toolbar font color */

    /* toolbar items */
    /* --tb-item-icon-color: #132c4a;                   /* color of icons when the toolbar is closed (only the icon visible) */
    /* --tb-item-hover-color: #285d9d;                  /* background color of an item when hovered */
    /* --tb-item-hover-font-color: white;               /* font color of an item when hovered */
    /* --tb-item-hover-icon-color: white;               /* icon color of an item when hovered */
    /* --tb-item-selected-background-color: #f5f7fb;    /* background color of a selected item */
    /* --tb-item-selected-border-color: #132c4a;        /* border color of a selected item (shows a small bar in front of the item to mark it as selected) */
    /* --tb-item-overlay-icon-color: white;             /* icon color in an overlay of an item */
    /* --tb-item-overlay-icon-hover-color: #A6C8FF;     /* color of hovered icons in an overlay */ 
    /* --tb-open-item-icon-color: #6f797a;              /* color of icons when the toolbar is opened (icon and text visible) */

    /* toolbar submenu */
    /* --tb-menu-icon-color: #132c4a;       /* color of icons in the submenu of the toolbar */           
    /* --tb-menu-hover-icon-color: white;   /* color of icons in the submenu of the toolbar when hovered */

    /******************************************************************************************************************************************************/
    /* Dialogs of MOSAIK                                                                                                                                  */
    /******************************************************************************************************************************************************/
    /* basic dialog colors */
    /* --dialog-overlay-color: rgba(0, 0, 0, 0.4);      /* color of the overlay that disables the background of the dialog shown */
    /* --dialog-shadow: 1px 2px 4px rgba(0, 0, 0, .5);  /* shadow around the dialogs */
    /* --dialog-background-color: white;                /* default background color of the dialogs */

    /* dialog header */
    /* --dialog-header-font-color: #132c4a;         /* default font color of dialog headers */
    /* --dialog-header-icon-color: #285d9d;         /* default icon color of dialog headers */
    /* --dialog-header-icon-hover-color: #132c4a;   /* default color of hovered icons in dialog headers */

    /* export dialogs */
    /* --dialog-export-font-color: #272e36;     /* default font color in export dialogs */
    /* --dialog-export-icon-color: #272e36;     /* default icon color in export dialogs */
    /* --dialog-export-hover-color: #132c4a;    /* default color in export dialogs when an option is hovered */
    /* --dialog-export-hover-font-color: white; /* default font color in export dialogs when an option is hovered */
    /* --dialog-export-hover-icon-color: white; /* default icon color in export dialogs when an option is hovered */

    /* focus dialogs */
    /* --dialog-focus-color: white;                             /* default color of the focus controller */
    /* --dialog-focus-shadow: 0 2px 10px 0 rgba(0, 0, 0, .5);   /* default shadow of the focus controller */
    /* --dialog-focus-arrow-color: #285d9d;                     /* default color of the focus arrows */
    /* --dialog-focus-arrow-hover-color: #132c4a;               /* default color of the focus arrows when hovered */

    /* message dialogs */
    /* --dialog-message-error-color: #f01e54;       /* default icon color in an error message dialog */
    /* --dialog-message-info-color: darkgreen;      /* default icon color in an info message dialog */
    /* --dialog-message-warning-color: darkorange;  /* default icon color in an warning message dialog */
    /* --dialog-message-question-color: #272e36;    /* default icon color in an question message dialog */

    /******************************************************************************************************************************************************/
    /* Progress/Loading indicator of MOSAIK                                                                                                               */
    /******************************************************************************************************************************************************/
    /* --progress-overlay-color: rgba(0, 0, 0, 0.5);    /* color of the overlay that disables the rest of MOSAIK */
    /* --progress-font-color: white;                    /* color of the message shown to the user */
    /* --progress-close-icon-color: white;              /* color of the close icon */

    /******************************************************************************************************************************************************/
    /* Row colors                                                                                                                                         */
    /******************************************************************************************************************************************************/
    /* --row-collapsible-indicator-color: #8dc63f;  /* color of the indicator which bar will be closed */
    /* --row-closed-background-color: white;        /* background color when the row is closed */
    /* --row-closed-border-color: #d8d8d8;          /* border color when the row is closed */
    /* --row-closed-font-color: #132c4a;            /* font color when the row is closed */

    /******************************************************************************************************************************************************/
    /* Frame colors                                                                                                                                       */
    /******************************************************************************************************************************************************/
    /* --frame-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.1);    /* shadow around each frame */
    /* --frame-highlight-shadow: 0 0 7px 2px #8dc63f;       /* shadow to highlight a frame, e.g. when selecting a frame to export it */
    /* --frame-title-font-color: #132c4a;                   /* font color for the title of the frame */ 

    /******************************************************************************************************************************************************/
    /* Page configurator colors                                                                                                                           */
    /******************************************************************************************************************************************************/
    /* Header of the configurator */
    /* --configurator-header-color: #272e36;    /* color of the header shown when the configurator is open */
    /* --configurator-header-font-color: white; /* color of the text shown in the header */

    /* Floating buttons on the right side */
    /* --configurator-floating-button-shadow: 2px 2px 7px 0 rgba(0, 0, 0, .1);  /* shadow of the floating buttons */
    /* --configurator-floating-button-color: white;                             /* floating buttons color */
    /* --configurator-floating-button-hover-color: #e7e8eb;                     /* floating buttons hover color */
    /* --configurator-floating-button-selected-color: #132c4a;                  /* floating buttons selected/active color */
    /* --configurator-floating-button-font-color: #285d9d;                      /* floating buttons font color */
    /* --configurator-floating-button-hover-font-color: #132c4a;                /* floating buttons font color when hovered */
    /* --configurator-floating-button-selected-font-color: white;               /* floating buttons font color when selected/active */
    /* --configurator-floating-button-icon-color: #285d9d;                      /* floating buttons icon color */
    /* --configurator-floating-button-hover-icon-color: #132c4a;                /* floating buttons icon color when hovered */

    /* configurator parts (header, toolbar & contents) */
    /* --configurator-description-font-color: #272e36; /* color of the description inside the three main parts of the configurator */

    /* header & toolbar configurators */
    /* --configurator-area-border-color: #d8d8d8;       /* border color of the areas inside the header and toolbar parts */
    /* --configurator-area-title-font-color: #272e36;   /* font color of the titles inside the areas for the header and toolbar configurators */

    /* header configurator */
    /* --configurator-header-logo-title-font-color: #3F484A;    /* font color for the title of the logo and icon selection */

    /* logo & icon selection */
    /* --configurator-logo-preview-color: #e7e8eb;          /* preview background color */
    /* --configurator-logo-icon-color: #285d9d;             /* color of the icons to edit/delete the logos/icons */
    /* --configurator-logo-icon-hover-color: #132c4a;       /* color of the hovered icons to edit the logos/icons */
    /* --configurator-logo-icon-warning-color: #f01e54;     /* color of the hovered icons to delete the logos/icons */     
    /* --configurator-logo-icon-disabled-color: #d8d8d8;    /* color of the disabled icons to edit/delete the logos/icons */

    /* content configurator */
    /* --configurator-content-input-label-font-color: #6f797a;  /* font color of input labels inside the content configuration */
    /* --configurator-content-icon-color: #6f797a;              /* color of icons inside the content configuration */     

    /* content row configurator */
    /* --configurator-row-border-color: #d8d8d8;            /* border color for row configurations */
    /* --configurator-row-error-border-color: #f01e54;      /* border color for row configurations when it has an error */
    /* --configurator-row-add-hover-color: #d8d8d8;         /* hover color when the button to add a row is shown */
    /* --configurator-row-add-icon-color: #285d9d;          /* color of the plus icon when the button to add a row is shown */
    /* --configurator-row-add-hover-icon-color: #132c4a;    /* color of the plus icon when the button to add a row is shown and hovered */

    /* content frame configurator */
    /* --configurator-frame-color: #edeef0;                                 /* background color of frame configurations */
    /* --configurator-frame-border-color: #edeef0;                          /* border color of frame configurations */
    /* --configurator-frame-error-color: #f01e54;                           /* border color of frame configurations with errors */
    
    /* content frame add button */
    /* --configurator-frame-add-hover-color: #d8d8d8;       /* hover color of the button to add a frame */
    /* --configurator-frame-add-icon-color: #285d9d;        /* icon color of the button to add a frame */
    /* --configurator-frame-add-hover-icon-color: #132c4a;  /* icon color of the hovered button to add a frame */

    /* content frame when closed */
    /* --configurator-frame-closed-header-font-color: #6f797a;          /* font color in the header of a closed frame configuration */
    /* --configurator-frame-closed-header-icon-color: #6f797a;          /* icon color in the header of a closed frame configuration */
    /* --configurator-frame-closed-header-icon-warning-color: #f01e54;  /* delete icon hover color in the header of a closed frame configuration */
    /* --configurator-frame-closed-font-color: black;                   /* font color of the type of a closed frame configuration */
    /* --configurator-frame-closed-icon-color: #285d9d;                 /* icon color to open the frame configuration */
    /* --configurator-frame-closed-icon-hover-color: #132c4a;           /* hover icon color to open the frame configuration */

    /* content frame to select the frame type/content */ 
    /* --configurator-frame-selection-header-font-color: black;             /* font color for the frame configuration type selection title */
    /* --configurator-frame-selection-header-icon-color: #6f797a;           /* icon color for the frame configuration type selection title */
    /* --configurator-frame-selection-header-icon-warning-color: #f01e54;   /* delete icon color when hovered for the frame configuration type selection title */
    /* --configurator-frame-selection-button-color: #edeef0;                /* color of the buttons to select a type */
    /* --configurator-frame-selection-button-border-color: white;           /* border color of the buttons to select a type */
    /* --configurator-frame-selection-button-icon-color: #285d9d;           /* icon color of the buttons to select a type */
    /* --configurator-frame-selection-button-other-color: #f9f9fc;          /* color of the others button */
    /* --configurator-frame-selection-button-font-color: #132c4a;           /* font color of the buttons to select a type */
    /* --configurator-frame-selection-button-hover-color: #e2e2e5;          /* hover color of the buttons to select a type */
    /* --configurator-frame-selection-button-hover-icon-color: #132c4a;     /* icon color of the hovered buttons to select a type */

    /* content frame configurator  */
    /* --configurator-frame-open-type-font-color: black;                /* font color of the type dropdown */
    /* --configurator-frame-open-type-dropdown-caret-color: #285d9d;    /* icon color of the type dropdown */
    /* --configurator-frame-open-header-icon-color: #6f797a;            /* icon color of the frame configuration header */
    /* --configurator-frame-open-header-icon-warning-color: #f01e54;    /* delete icon color when hovered in the frame configuration header */
    /* --configurator-frame-open-background-color: white;               /* background color of the frame configuration */
    /* --configurator-frame-open-area-border-color: #e2e2e5;            /* border color of the areas inside a frame configuration */
    /* --configurator-frame-open-area-title-font-color: black;          /* font color of the titles of the areas inside a frame configuration

    /* chart configuration */
    /* --configurator-chart-dataset-add-hover-color: #d8d8d8;       /* hover color of the button to add a dataset */
    /* --configurator-chart-dataset-add-icon-color: #285d9d;        /* icon color of the button to add a dataset */
    /* --configurator-chart-dataset-add-hover-icon-color: #132c4a;  /* icon color of the hovered button to add a dataset */

    /* connector configuration */
    /* --configurator-chart-subset-add-hover-color: #d8d8d8;       /* hover color of the button to add a subset */
    /* --configurator-chart-subset-add-icon-color: #285d9d;        /* icon color of the button to add a subset */
    /* --configurator-chart-subset-add-hover-icon-color: #132c4a;  /* icon color of the hovered button to add a subset */

    /******************************************************************************************************************************************************/
    /* Startpage appearance                                                                                                                               */
    /******************************************************************************************************************************************************/
    /* --start-background: #f5f7fb;  /* background color */
    /* --start-color: #132c4a;       /* default font color in the startpage */
    
    /* sidebar */
    /* --start-sidebar-color: white;                        /* color of the sidebar */
    /* --start-sidebar-plus-color: #8dc63f;                 /* color of the plus icon to open a consolidated element */
    /* --start-sidebar-minus-color: #132c4a;                /* color of the minus icon to close a consolidated element */
    /* --start-sidebar-item-color: #132c4a;                 /* color of the page and context items in the sidebar */
    /* --start-sidebar-item-hover-color: #285d9d;           /* hover color of the page and context items in the sidebar */
    /* --start-sidebar-item-font-color: white;              /* font color of the page and context items in the sidebar */
    /* --start-sidebar-item-hover-font-color: white;        /* hover font color of the page and context items in the sidebar */
    /* --start-sidebar-item-highlight-font-color: white;    /* color to highlight searched text parts in items */
    /* --start-sidebar-closed-title-font-color: #d8d8d8;    /* font color when the sidebar is closed */

    /* items */
    /* --start-item-color: white;                                           /* item color in the startpage */
    /* --start-item-border-color: white;                                    /* item's border color in the startpage */
    /* --start-item-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.11);               /* item shadow in the startpage */
    /* --start-item-hover-shadow: 0 2px 20px 3px rgba(0, 0, 0, .31);        /* hovered item shadow in the startpage */
    /* --start-item-icon-color: #132c4a;                                    /* color of the icons inside the items */
    /* --start-item-context-icon-color: #132c4a;                            /* color of the context icon inside the items */
    /* --start-item-context-icon-hover-color: #f01e54;                      /* color of the context delete icon inside the items */
    /* --start-item-external-icon-color: #132c4a;                           /* color of the edit external app icon inside the items */
    /* --start-item-external-icon-hover-color: #285d9d;                     /* color of the edit external app icon inside the items when hovered */
    /* --start-item-target-border-color: #285d9d;                           /* border color of the items when they are drop targets (during editing by drag & drop) */
    /* --start-item-target-hover-border-color: #8dc63f;                     /* border color of the hovered item when they are drop targets (during editing by drag & drop) */
    /* --start-item-grabbed-shadow: 0 2px 20px 0 rgba(255, 255, 255, 0.65); /* shadow of an item while being dragged */
    /* --start-item-grabbed-overlay: rgba(0, 0, 0, 0.4);                    /* overlay over the other items while one item is being dragged */ 
    /* --start-item-error-border-color: #f01e54;                            /* error border color for items */

    /* --start-items-per-row: 4;    /* max number of items row*/
    /* --start-item-width: 320px;   /* item width*/
    /* --start-items-gap: 20px;     /* gap between items */

    /* delete icon */
    /* --start-delete-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.11); /* shadow of the delete icon that is shown while dragging an item */
    /* --start-delete-background-color: #132c4a;                /* background color of the delete icon */
    /* --start-delete-icon-color: white;                        /* color of the delete icon */
    /* --start-delete-hover-icon-color: #f01e54;                /* color of the delete icon when hovered */

    /* info banner */
    /* --start-banner-color: white;                                 /* color of the info banner */
    /* --start-banner-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.11);     /* shadow of the info banner */
    /* --start-banner-font-color: #272e36;                          /* font color of the info banner */
    /* --start-banner-collapse-button-color: rgba(0, 0, 0, 0.5);    /* color of the collapse button inside the info banner */
    /* --start-banner-collapse-button-font-color: white;            /* font color of the collapse button inside the info banner */
    /* --start-banner-collapse-button-hover-color: black;           /* hover color of the collapse button inside the info banner */

    /* workflow banner content */
    /* --start-banner-wfl-icon-color: darkgreen;            /* color of the icons indicating workflow tasks that are due this week */
    /* --start-banner-wfl-icon-font-color: white;           /* font color of the icons indicating workflow tasks that are due this week */
    /* --start-banner-wfl-icon-overdue-color: #f01e54;      /* color of the icons indicating workflow tasks that are overdue */
    /* --start-banner-wfl-icon-overdue-font-color: white;   /* font color of the icons indicating workflow tasks that overdue */
    /* --start-banner-wfl-icon-due-color: darkorange;       /* color of the icons indicating workflow tasks that are due today */
    /* --start-banner-wfl-icon-due-font-color: white;       /* font color of the icons indicating workflow tasks that are due today */
    /* --start-banner-wfl-icon-hover-color: #132c4a;        /* hover color of the icons indicating workflow tasks */
    /* --start-banner-wfl-icon-hover-font-color: white;     /* hover font color of the icons indicating workflow tasks */

    /******************************************************************************************************************************************************/
    /* Login                                                                                                                                              */
    /******************************************************************************************************************************************************/
    /* --login-color: white;                                /* color of the login form */
    /* --login-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.11);    /* shadow of the login form */
    /* --login-header-color: #272e36;                       /* color of the logo header */
    /* --login-header-font-color: white;                    /* font color for the text that is shown when the image could not be loaded */

    /******************************************************************************************************************************************************/
    /* Navigator                                                                                                                                              */
    /******************************************************************************************************************************************************/
    /* --navigation-color: white;                               /* color of the navigator */
    /* --navigation-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.1);   /* shadow of the navigator */
    /* --navigation-font-color: #272e36;                        /* default font color of the navigator */

    /* Header of the navigator (left part) */
    /* --navigation-header-color: #f3f3f3;          /* color of the navigator header*/
    /* --navigation-header-font-color: #797979;     /* font color of the navigator header*/

    /* Parts of the navigator */
    /* --navigation-context-color: #8dc63f;     /* indicator color of the context part*/
    /* --navigation-title-color: #008002;       /* indicator color of the title part*/
    /* --navigation-filter-color: #272e36;      /* indicator color of the filter part*/
    /* --navigation-divider-color: #bdbdbd;     /* color of the divider between the parts*/

    /* Inputs (element selection and filter dropdowns) of the navigator */
    /* --navigation-input-color: #f3f3f3;                    /* background color of the inputs */
    /* --navigation-input-font-color: #132c4a;               /* font color of the inputs */
    /* --navigation-input-border-color: #cfcfcf;             /* border color of the inputs */
    /* --navigation-input-hover-color: #8dc63f;              /* background color of the inputs when hovered */
    /* --navigation-input-hover-font-color: white;           /* font color of the inputs when hovered */
    /* --navigation-input-hover-border-color: #132c4a;       /* border color of the inputs when hovered */
    /* --navigation-input-error-border-color: #f01e54;       /* border color of the inputs when an error occurs */
    /* --navigation-input-help-border-color: #285d9d;        /* border color of the inputs when help is shown */

    /******************************************************************************************************************************************************/
    /* Dimension                                                                                                                                          */
    /******************************************************************************************************************************************************/
    /* --dimension-background-color: #f3f3f3;                       /* background color of the dimension tree */
    /* --dimension-border-color: #cfcfcf;                           /* border color of the dimension tree */

    /* --dimension-element-font-color: #272e36;                     /* dimension element font color */
    /* --dimension-element-icon-color: #285d9d;                     /* dimension element icon color (not for the icons that display consolidated/n-elements)  */
    /* --dimension-element-selected-color: #8dc63f;                 /* background color to mark the selected element */
    /* --dimension-element-selected-font-color: #272e36;            /* font color to mark the selected element */
    /* --dimension-element-selected-icon-color: #132c4a;            /* icon color to mark the selected element (not for the icons that display consolidated/n-elements) */
    /* --dimension-element-hover-color: rgba(141, 198, 63, 0.3);    /* background color of hovered elements */
    /* --dimension-element-hover-font-color: #272e36;               /* font color of hovered elements */
    /* --dimension-element-hover-icon-color: #132c4a;               /* icon color of hovered elements (not for the icons that display consolidated/n-elements) */
    /* --dimension-element-preview-color: #285d9d;                  /* icon color for image previes in the configurator */
    /* --dimension-element-preview-background-color: #e7e8eb;       /* background color for image previes in the configurator */

    /******************************************************************************************************************************************************/
    /* Charts                                                                                                                                             */
    /******************************************************************************************************************************************************/
    /* --chart-background-color: white;         /* background color of charts */
    /* --chart-error-color: #f01e54;            /* color used to display errors in charts */
    /* --chart-legend-border-color: #EDEEF0;    /* border color for the items of the chart legend */
    /* --chart-legend-font-color: #272E36;      /* font color for the items of the chart legend */
    /* other chart colors can be configures in the chart.json file inside the config folder */

    /******************************************************************************************************************************************************/
    /* TM1Web Cubeviews                                                                                                                                   */
    /******************************************************************************************************************************************************/
    /* --cubeview-toolbar-color: #f6f7fb;                       /* toolbar color */

    /* --cubeview-toolbar-button-color: white;                  /* color of the zerosuppression buttons */
    /* --cubeview-toolbar-button-border-color: #bdbdbd;         /* border color of the zerosuppression buttons */
    /* --cubeview-toolbar-button-icon-color: #285d9d;           /* icon of the zerosuppression buttons */
    /* --cubeview-toolbar-button-hover-color: #e7e8eb;          /* color of the zerosuppression buttons when hovered */
    /* --cubeview-toolbar-button-hover-icon-color: #132c4a;     /* icon color of the zerosuppression buttons when hovered */
    /* --cubeview-toolbar-button-selected-color: #285d9d;       /* color of the zerosuppression buttons when selected */
    /* --cubeview-toolbar-button-selected-icon-color: white;    /* icon color of the zerosuppression buttons when selected */

    /******************************************************************************************************************************************************/
    /* Connectors                                                                                                                                         */
    /******************************************************************************************************************************************************/
    /* --connector-background-color: white; /* background color of the connector */

    /* header */
    /* --connector-header-border-color: #e2e2e5;                /* border color of the header */
    /* --connector-header-source-font-color: #272e36;           /* font color of the source side of the header */
    /* --connector-header-divider-background-color: #132c4a;    /* background color of the middle part of the header */
    /* --connector-header-divider-icon-color: white;            /* icon color of the middle part of the header */
    /* --connector-header-target-background-color: #e7e8eb;     /* background color of the target side of the header */
    /* --connector-header-target-font-color: #272e36;           /* font color of the target side of the header */

    /* rows */
    /* --connector-row-border-color: #e2e2e5;                   /* border color of the rows */
    /* --connector-row-background-color: #e2e2e5;               /* background color of the rows */
    /* --connector-row-sources-background-color: white;         /* background color of the sources side of the rows */
    /* --connector-row-source-background-color: #132c4a;        /* background color of each source inside the sources */
    /* --connector-row-source-font-color: white;                /* font color of each source inside the sources */
    /* --connector-row-source-icon-color: white;                /* icon color of each source inside the sources */
    /* --connector-row-source-icon-hover-color: #A6C8FF;        /* icon hover color of each source inside the sources */
    /* --connector-row-source-icon-warning-color: $#f01e54;     /* delete icon hover color of each source inside the sources */
    /* --connector-row-divider-background-color: white;         /* background color of the middle part of the rows */
    /* --connector-row-divider-icon-color: #285d9d;             /* icon color of the middle part of the rows */
    /* --connector-row-divider-hover-background-color: #132c4a; /* background color of the hovered middle part of the rows */
    /* --connector-row-divider-hover-icon-color: white;         /* icon color of the hovered middle part of the rows */
    /* --connector-row-target-background-color: #e7e8eb;        /* background color of the target side (if target not consolidated) of the rows */
    /* --connector-row-target-icon-color: #285d9d;              /* icon color of the target side of the rows */
    /* --connector-row-target-icon-closed-color: #132c4a;       /* icon color of the target side of the rows (for icons of closed consolidated icons)*/
    /* --connector-row-target-font-color: #272e36;              /* font color of the target side of the rows */

    /******************************************************************************************************************************************************/
    /* Workflows                                                                                                                                          */
    /******************************************************************************************************************************************************/
    /* --workflow-background-color: white;                          /* default background for workflows */

    /* header */
    /* --workflow-header-background-color: white;                   /* header background color */
    /* --workflow-header-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);     /* header shadow */
    /* --workflow-header-button-active-color: #285d9d;              /* color for selected header button */ 
    /* --workflow-header-button-active-font-color: white;           /* font color for selected header button */ 
    /* --workflow-header-button-active-hover-color: #132c4a;        /* hover color for selected header button */
    /* --workflow-header-button-active-hover-font-color: white;     /* hover font color for selected header button */

    /* --workflow-left-background-color: #f1f1f1;                   /* left side background color */
    /* --workflow-left-border-color: #e0e0e0;                       /* left side border color (between left and center) */
    /* --workflow-left-itemlist-color: white;                       /* background color of the item list in the left side when not in edit mode */
    /* --workflow-left-itemlist-line-color: #d8d8d8;                /* color of the line connecting the items in the item list */
    /* --workflow-left-itemlist-owner-unassigned-color: #285d9d;    /* owner icon color for unassgined items in the items list*/
    /* --workflow-left-itemlist-owner-assigned-color: #8dc63f;      /* owner icon color for assgined items in the items list*/
    /* --workflow-left-itemlist-owner-hover-color: #132c4a;         /* owner icon hover color for items in the items list*/

    /* --workflow-right-background-color: #f1f1f1;  /* right side background color */
    /* --workflow-right-border-color: #e0e0e0;      /* right side border color (between left and center) */ 

    /* --workflow-item-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.11);        /* shadow of an item */
    /* --workflow-item-hover-shadow: 0 2px 45px 0 rgba(0, 0, 0, 0.31);  /* hover shadow of an item */
    /* --workflow-item-link-icon-color: #285d9d;                        /* color of the icon that indicates if an item has a link */
    /* --workflow-item-hover-link-icon-color: #132c4a;                  /* hover color of the icon that indicates if an item has a link */
    /* --workflow-item-selection-border-color: #8dc63f;                 /* border color for selected items */
    /* --workflow-item-delete-background-color: #e7e8eb;                /* item delete button background color when hovered */
    /* --workflow-item-delete-icon-color: #f01e54;                      /* item delete button icon color when hovered */
    /* --workflow-item-overdue-color: darkorange;                       /* color to mark overdue items */
    /* --workflow-item-collision-color: #f01e54;                        /* color to mark items with collisions */
    /* --workflow-item-connector-color: #8dc63f;                        /* color of the connector points of the items */
    /* --workflow-item-connector-hover-color: #f01e54;                  /* hover color of the connector points of the items */
    /* --workflow-item-connector-hover-shadow: rgba(0, 0, 0, 0.2);      /* shadow of the connector points of the items when hovered */
    /* --workflow-item-resize-border-color: #8dc63f;                    /* border color when a single item is selected and can be resized */
    /* --workflow-item-resize-point-border-color: #8dc63f;              /* border color of the points to resize items */
    /* --workflow-item-resize-point-color: white;                       /* color of the points to resize items */
    /* --workflow-item-percentage-circle-color: #d8d8d8;                /* color of the circle indicating the percentage of closed tasks in multitask */
    /* --workflow-item-percentage-circle-fill-color: #8dc63f;           /* fill color of the circle indicating the percentage of closed tasks in multitask */
    /* --workflow-item-percentage-font-color: #272e36;                  /* font color of the circle indicating the percentage of closed tasks in multitask */
    /* --workflow-item-create-color: #8dc63f;                           /* color of an item that is created */
    /* --workflow-item-tooltip-color: #8dc63f;                          /* color of the tooltips of items */
    /* --workflow-item-tooltip-font-color: white;                       /* font color of the tooltips of items */

    /* --workflow-arrow-color: #272e36;         /* color of the arrows */
    /* --workflow-arrow-back-color: #7d8286;    /* color of backwards directed arrows */

    /* --workflow-selection-rectangle-color: rgba(89, 159, 238, 0.2);   /* color of the rectangle that indicates a selection area */
    /* --workflow-selection-rectangle-border-color: rgb(0, 48, 103);    /* border color of the rectangle that indicates a selection area */

    /******************************************************************************************************************************************************/
    /* Workflows                                                                                                                                          */
    /******************************************************************************************************************************************************/
    /* --sap-editor-background-color: white;                        /* background color for the sap config editor */
   
    /* connections */
    /* --sap-editor-connection-border-color: #272e36;               /* border color for sap connection configs */
    /* --sap-editor-connection-success-border-color: #8dc63f;       /* border color for sap odata and tm1 connection configs when tested successfully */
    /* --sap-editor-connection-error-border-color: #f01e54;         /* border color for sap odata and tm1 connection configs when not tested successfully */
    /* --sap-editor-connection-check-success-icon-color: #8dc63f;   /* icon color for sap odata and tm1 connection configs when tested successfully */
    /* --sap-editor-connection-check-error-icon-color: #f01e54;     /* icon color for sap odata and tm1 connection configs when not tested successfully */
    
    /* config check */
    /* --sap-editor-config-check-success-icon-color: #8dc63f;       /* icon color when the connection was tested successfully */
    
    /* editor for SAP fields */
    /* --sap-editor-fields-drag-icon-color: #6f797a;                /* color of drag icons */
    /* --sap-editor-fields-drag-icon-hover-color: #132c4a;          /* color of drag icons when hovered */
    /* --sap-editor-fields-delete-icon-color: #6f797a;              /* color of delete icons */
    /* --sap-editor-fields-delete-icon-hover-color: #f01e54;        /* color of delete icons when hovered */

    /* dialogs */
    /* --sap-editor-dialog-table-error-color: #f01e54;              /* color to indcate errors in tables */
    /* --sap-editor-dialog-arrow-up-down-color: #285d9d;            /* arrow color to change order */
    /* --sap-editor-dialog-arrow-up-down-hover-color: #132c4a;      /* hover arrow color to change order */
    /* --sap-editor-dialog-arrow-up-down-disabled-color: #d8d8d8;   /* disabled arrow color to change order */

    /******************************************************************************************************************************************************/
    /* TI- & Rules-Editor                                                                                                                                 */
    /******************************************************************************************************************************************************/
    /* --editor-tree-font-color: #272e36;           /* font color for headers in the editor tree */
    /* --editor-tree-open-icon-color: #272e36;      /* icon color for open headers in the editor tree */
    /* --editor-tree-closed-icon-color: #8dc63f;    /* icon color for closed headers in the editor tree */
    /* --editor-item-color: #132c4a;                /* color for items in the editor tree */
    /* --editor-item-hover-color: #285d9d;          /* color for items when hovered in the editor tree */
    /* --editor-item-font-color: white;             /* font color for items in the editor tree */
    /* --editor-item-hover-font-color: white;       /* font color for items when hovered in the editor tree */
    /* --editor-toolbar-icon-color: #285d9d;        /* icon color for the toolbar inside tabs */
    /* --editor-toolbar-icon-hover-color: #132c4a;  /* icon hover color for the toolbar inside tabs */

    /******************************************************************************************************************************************************/
    /* Log configuration                                                                                                                                  */
    /******************************************************************************************************************************************************/
    /* --log-config-row-icon-color: #285d9d;                /* color of the icons to open/close rows */
    /* --log-config-row-hover-icon-color: #132c4a;          /* color of the icons to open/close rows when hovered */
    /* --log-config-row-button-selected-color: #285d9d;     /* color of the button with the selected log level */
    /* --log-config-row-button-selected-font-color: white;  /* font color of the button with the selected log level */
}