:root {
    /* White background for content parts, sidebar etc */
    --background-color: #FFFFFF;
    /* Light gray for borders and dividers */
    --border-color: #E0E3E5;
    /* Focus color for interactive elements */
    --focus-color: #7190A6;

    --pv-color: #3498db;
    --battery-color: #2ecc71;
    --text-color: #222;
    --bg-color: #f5f5f5;
    --color-primary-light-grey: #F2F5F8;
    --color-primary-grey: #E0E3E5;
    --color-primary-normal-grey: #C8CDCF;
    --color-primary-midrange-grey: #A1A3A7;
    --color-primary-darker-grey: #717379;
    --color-primary-dark-grey: #4D5052;
    --color-primary-black: #000;
    --color-primary-white: #ffffff;
    --color-primary-light-blue: #EEF2F4;
    --color-primary-lighter-blue: #C6D3DB;
    --color-primary-shadow-blue: #B5D7ED;
    --color-primary-blue: #7190A6;
    --color-primary-darker-blue: #325F80;
    --color-primary-dark-blue: #002A48;
    --color-blue-black: #112A43;
    --color-blue-dark: #274B70;
    --color-blue-original: #3A6EA1;
    --color-blue-70: #759ABD;
    --color-blue-35: #BACCDE;
    --color-blue-10: #EBF0F6;
    --color-teal-black: #05473D;
    --color-teal-dark: #267166;
    --color-teal-original: #42A496;
    --color-teal-70: #7BBFB6;
    --color-teal-35: #BDDFDA;
    --color-teal-10: #ECF6F4;
    --color-green-black: #204A00;
    --color-green-dark: #598836;
    --color-green-original: #97BA7D;
    --color-green-70: #B6CFA4;
    --color-green-35: #DBE7D1;
    --color-green-10: #F5F8F2;
    --color-yellow-black: #523E01;
    --color-yellow-dark: #A77F08;
    --color-yellow-original: #D8A200;
    --color-yellow-70: #E4BE4D;
    --color-yellow-35: #F1DEA6;
    --color-yellow-10: #FBF6E5;
    --color-red-black: #440618;
    --color-red-dark: #681E34;
    --color-red-original: #8A3F55;
    --color-red-70: #AD7988;
    --color-red-35: #D6BCC3;
    --color-red-10: #F3ECEE;
    --color-secondary-blue-dark: #236490;
    --color-secondary-blue-full: #469AD2;
    --color-secondary-blue-80: #90C2E4;
    --color-secondary-blue-60: #90C2E4;
    --color-secondary-blue-40: #B5D7ED;
    --color-secondary-blue-20: #ECF5FB;
    --color-secondary-red-dark: #971C1C;
    --color-secondary-red-full: #DC4040;
    --color-secondary-red-80: #E36666;
    --color-secondary-red-60: #EA8C8C;
    --color-secondary-red-40: #F1B3B3;
    --color-secondary-red-20: #FBECEC;
    --color-secondary-green-dark: #59B200;
    --color-secondary-green-full: #6CD800;
    --color-secondary-green-80: #89E033;
    --color-secondary-green-60: #A7E766;
    --color-secondary-green-40: #C4EF99;
    --color-secondary-green-20: #F0FBE5;
    --color-secondary-orange-dark: #B27600;
    --color-secondary-orange-full: #EF9E00;
    --color-secondary-orange-80: #FFBA33;
    --color-secondary-orange-60: #FFCB66;
    --color-secondary-orange-40: #FFDC99;
    --color-secondary-orange-20: #FFF7E5;
    /* --border-radius: 6px;
    --font-size-base: 0.875rem;
    --base-font: "Lato",
        serif;
    --bs-primary: var(--color-primary-blue);
    --bs-secondary: var(--color-primary-white);
    --bs-danger: var(--color-secondary-red-full);
    --bs-warning: var(--color-secondary-orange-full);
    --bs-success: var(--color-secondary-green-full);
    --bs-body-color: var(--color-primary-dark-grey);
    --bs-body-bg: var(--color-primary-light-grey);
    --bs-border-radius: 6px;
    --bs-font-size-base: 0.875rem;
    --bs-font-family-sans-serif: var(--base-font);
    --bs-link-color: var(--color-primary-blue);
    --btn-border-color: var(--color-primary-normal-grey);
    --btn-font-color: var(--color-primary-dark-grey);
    --btn-focus-background: var(--color-primary-white);
    --btn-primary-background: var(--color-primary-blue);
    --btn-primary-border-color: var(--color-primary-blue);
    --btn-primary-font-color: var(--color-primary-white);
    --btn-primary-hover-background: var(--color-primary-light-blue);
    --btn-primary-hover-border-color: var(--color-primary-darker-blue);
    --btn-primary-hover-font-color: var(--color-primary-darker-blue);
    --btn-primary-focus-background: var(--color-primary-blue);
    --btn-primary-focus-border-color: var(--color-primary-shadow-blue);
    --btn-primary-focus-box-shadow: inset 0 0 0 1px var(--color-primary-darker-blue);
    --btn-primary-focus-font-color: var(--color-primary-light-blue);
    --btn-primary-disabled-background: var(--color-primary-grey);
    --btn-primary-disabled-border-color: var(--color-primary-grey);
    --btn-primary-disabled-font-color: var(--color-primary-midrange-grey);
    --btn-primary-outline-border-color: var(--color-primary-blue);
    --btn-primary-outline-font-color: var(--color-primary-blue);
    --btn-secondary-background: var(--color-primary-white);
    --btn-secondary-border-color: var(--color-primary-white);
    --btn-secondary-font-color: var(--color-primary-blue);
    --btn-secondary-hover-background: var(--color-primary-white);
    --btn-secondary-hover-border-color: var(--color-primary-midrange-grey);
    --btn-secondary-hover-font-color: var(--color-primary-darker-blue);
    --btn-secondary-focus-background: var(--color-primary-white);
    --btn-secondary-focus-border-color: var(--color-primary-shadow-blue);
    --btn-secondary-focus-box-shadow: inset 0 0 0 1px var(--color-primary-darker-blue);
    --btn-secondary-focus-font-color: var(--color-primary-blue);
    --btn-secondary-disabled-background: var(--color-primary-midrange-grey);
    --btn-secondary-disabled-border-color: var(--color-primary-grey);
    --btn-secondary-disabled-font-color: var(--color-primary-grey);
    --btn-secondary-outline-border-color: var(--color-primary-dark-grey);
    --btn-secondary-outline-font-color: var(--color-primary--dark-grey);
    --btn-secondary-outline-hover-background: var(--color-primary-dark-grey);
    --btn-secondary-outline-hover-font-color: var(--color-primary-white);
    --btn-inline-color: var(--color-primary-blue);
    --btn-inline-hover-color: var(--color-primary-darker-blue);
    --btn-inline-disabled-color: var(--color-primary-midrange-grey);
    --btn-inline-focus-color: var(--color-primary-blue);
    --btn-inline-focus-box-shadow: inset 0px 0px 0px 1px var(--color-primary-darker-blue);
    --scrollbar-color: var(--color-primary-midrange-grey);
    --scrollbar-background-color: transparent;
    --scrollbar-hover-color: var(--color-primary-dark-grey);
    --layout-wrapper-background: var(--color-primary-light-grey);
    --layout-sidebar-background: var(--color-primary-white);
    --layout-sidebar-border-color: var(--color-primary-grey);
    --layout-sidebar-drop-shadow-color: rgba(0, 0, 0, 0.25);
    --heading-level1-color: var(--color-primary-darker-blue);
    --heading-level2-color: var(--color-primary-blue);
    --heading-level3-color: var(--color-primary-shadow-blue);
    --heading-level4-color: var(--color-primary-midrange-grey);
    --heading-level5-color: var(--color-primary-darker-grey);
    --heading-level6-color: var(--color-primary-dark-grey);
    --sub-header-background-color: var(--color-primary-blue);
    --sub-header-border-color: var(--color-primary-normal-grey);
    --sub-header-color: var(--color-primary-white);
    --sub-header-content-background-color: var(--color-primary-white);
    --toggle-switch-backgorund-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffffff'/%3e%3c/svg%3e");
    --toggle-switch-alt-backgorund-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237190A6'/%3e%3c/svg%3e");
    --toggle-switch-background-color: var(--color-primary-grey);
    --toggle-switch-checked-background-color: var(--color-primary-blue);
    --toggle-switch-alt-background-color: var(--color-primary-white);
    --toggle-switch-checked-alt-background-color: var(--color-primary-white);
    --layout-tile-background: var(--color-primary-white);
    --input-color: var(--color-primary-dark-grey);
    --input-border-color: var(--color-primary-normal-grey);
    --input-background-color: var(--color-primary-white);
    --input-placeholder-color: transparent;
    --input-focus-border-color: var(--color-secondary-blue-40);
    --input-focus-background-color: var(--color-primary-white);
    --input-focus-color: var(--color-primary-dark-grey);
    --input-focus-label-color: var(--color-primary-midrange-grey);
    --input-focus-box-shadow: inset 0 0 0 2px var(--color-primary-darker-blue);
    --input-disabled-border-color: var(--color-primary-grey);
    --input-disabled-background-color: var(--color-primary-light-grey);
    --input-disabled-color: var(--color-primary-midrange-grey);
    --input-invalid-border-color: var(--color-secondary-red-full);
    --input-invalid-hover-border-color: var(--color-secondary-red-60);
    --input-invalid-focus-border-color: var(--color-secondary-red-40);
    --input-password-toggle-hover-color: var(--color-primary-midrange-grey);
    --input-hover-border-color: var(--color-primary-midrange-grey);
    --input-icon-color: var(--color-primary-midrange-grey);
    --horizontal-select-background: var(--input-background-color);
    --horizontal-select-border-color: var(--color-primary-light-grey);
    --horizontal-select-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    --radio-border-color: var(--color-primary-normal-grey);
    --radio-checked-bg-color: var(--color-primary-blue);
    --radio-checked-border-color: var(--color-secondary-blue-60);
    --radio-unchecked-border-color: var(--color-primary-normal-grey);
    --radio-checked-box-shadow: inset 0 0 0 1px var(--color-primary-darker-blue);
    --checkbox-checkbox-border-color: var(--color-primary-normal-grey);
    --checkbox-checkbox-background: none;
    --checkbox-add-remove-color: var(--color-primary-midrange-grey);
    --checkbox-add-remove-background: var(--color-primary-white);
    --checkbox-checked-border-color: var(--color-secondary-blue-60);
    --checkbox-checked-box-shadow: inset 0 0 0 1px var(--color-primary-darker-blue);
    --checkbox-checked-background: var(--color-primary-blue);
    --checkbox-checked-color: var(--color-primary-white);
    --dropdown-color: var(--color-primary-dark-grey);
    --dropdown-caret-color: var(--color-primary-normal-grey);
    --dropdown-bg: var(--color-primary-white);
    --dropdown-border-color: var(--color-primary-lighter-blue);
    --dropdown-box-shadow: 0px 2px 5px 1px rgba(77, 80, 82, 0.15);
    --dropdown-link-color: var(--color-primary-dark-grey);
    --dropdown-link-icon-color: var(--color-primary-darker-blue);
    --dropdown-link-active-color: var(--color-primary-dark-grey);
    --dropdown-link-active-bg: var(--color-primary-light-grey);
    --dropdown-link-icon-hover-color: var(--color-primary-darker-blue);
    --dropdown-link-hover-bg: var(--color-primary-light-grey);
    --dropdown-link-hover-color: var(--color-primary-dark-grey);
    --dropdown-header-color: var(--color-primary-midrange-grey);
    --dropdown-divider-bg: var(--color-primary-normal-grey);
    --dropdown-divider-border-color: var(--color-primary-normal-grey);
    --select-background-color: var(--color-primary-white);
    --select-border-color: var(--color-primary-normal-grey);
    --select-open-border-color: var(--color-primary-shadow-blue);
    --select-open-box-shadow: var(--input-focus-box-shadow);
    --select-caret-color: var(--color-primary-midrange-grey);
    --select-invalid-color: var(--color-secondary-red-full);
    --select-option-background-color: var(--color-primary-light-blue);
    --select-option-color: var(--bs-body-color);
    --select-option-active-color: var(--bs-body-color);
    --select-box-box-shadow: var(--dropdown-box-shadow);
    --search-select-border-color: var(--color-primary-grey);
    --search-select-hover-color: var(--color-primary-light-grey);
    --pagination-color: var(--color-primary-midrange-grey);
    --pagination-page-link-color: var(--color-primary-midrange-grey);
    --pagination-page-link-active-color: var(--color-primary-dark-grey);
    --pagination-elements-per-page-color: var(--color-primary-dark-grey);
    --table-header-color: var(--color-primary-darker-grey);
    --table-border-color: var(--color-primary-light-grey);
    --modal-header-color: var(--color-primary-blue);
    --breadcrumb-color: var(--color-primary-darker-grey);
    --breadcrumb-hover-color: var(--color-primary-blue);
    --main-menu-item-color: var(--color-primary-darker-grey);
    --main-menu-item-hover-color: var(--color-primary-darker-grey);
    --main-menu-item-active-color: var(--color-primary-darker-blue);
    --main-menu-item-active-hover-color: var(--color-primary-darker-blue);
    --main-menu-item-active-background-color: var(--color-primary-light-blue);
    --main-menu-item-disabled-background-color: var(--color-primary-light-grey);
    --main-menu-sub-item-active-color: var(--color-primary-dark-blue);
    --main-menu-sub-item-hover-color: var(--color-primary-dark-blue);
    --main-menu-thin-border-color: var(--color-primary-light-blue);
    --tree-background: var(--color-primary-white);
    --tree-tree-line-color: var(--color-primary-grey);
    --tree-tree-line-color-active: var(--color-primary-midrange-grey);
    --tree-item-icon-font-color: var(--color-primary-white);
    --tree-item-title-color: var(--color-primary-dark-grey);
    --tree-item-description-color: var(--color-primary-dark-grey);
    --tree-item-active-box-shadow-color: var(--color-primary-darker-grey);
    --tree-item-active-border-outer-color: var(--color-primary-dark-grey);
    --tree-item-active-border-inner-color: var(--color-primary-white);
    --tree-item-collapse-button-background: var(--color-primary-dark-grey);
    --tree-item-collapse-button-color: var(--color-primary-white);
    --tree-item-disabled-color: var(--color-primary-midrange-grey);
    --tree-item-add-button-color: var(--color-primary-white);
    --tree-item-add-button-background: var(--color-primary-dark-grey);
    --tree-item-add-button-border-color: var(--color-primary-white);
    --info-box-background-color: var(--color-primary-light-grey);
    --info-box-alt-background-color: var(--color-primary-white);
    --tab-bar-border-color: var(--color-primary-white); */
}