:root {

    --accent1: #1b75bb;
    --accent1-hover: #555;
    --accent1-color:#fff;

    --accent2: #81B1A8;
    --accent2-hover: #555;
    --accent2-color:#fff;

    --primary-background: #F4F4F6;
    --secondary-background: #fff;

    --primary-font-color: #555;
    --secondary-font-color: #555;

    --neutral: #dddde3;

    --col-title-bg: #dddde3;
    --col-content-bg: #F4F4F6;
    --col-hover-bg: #c7c7d1;

    --primary-color: var(--accent1);
    --secondary-color: var(--accent2);

    --main-bg: var(--primary-background);
    --left-panel-bg: var(--secondary-background);
    --content-bg: var(--secondary-background);

    --main-action-bg: var(--accent1);
    --main-action-color: var(--accent1-color);
    --main-action-hover-bg: var(--accent1-hover);
    --main-action-hover-color: var(--accent1-color);

    --secondary-action-bg: var(--accent2);
    --secondary-action-color: var(--accent2-color);
    --secondary-action-hover-bg: var(--accent2-hover);
    --secondary-action-hover-color: var(--accent2-color);

    --main-menu-link-bg: var(--secondary-background);
    --main-menu-link-color: var(--primary-font-color);

    --main-menu-link-hover-bg: var(--primary-background);
    --main-menu-link-hover-color: var(--accent1);

    --main-menu-link-active-bg: var(--primary-background);
    --main-menu-link-active-color: var(--accent1);

    --main-menu-border-color:var(--neutral);

    --project-selector-bg: var(--secondary-background);
    --project-selector-color: var(--primary-font-color);
    --project-selector-hover-bg: var(--primary-background);
    --project-selector-hover-color: var(--primary-font-color);

    --dropdown-link-bg:var(--secondary-background);
    --dropdown-link-color: var(--primary-font-color);
    --dropdown-link-hover-bg: var(--primary-background);
    --dropdown-link-hover-color: var(--primary-font-color);

    --header-action-hover-color:var(--neutral);
    --header-bg-color:var(--accent1);
    --header-gradient:linear-gradient(90deg, var(--accent1) 20%,var(--accent2) 100%);

    --primary-font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
    --base-font-size: 14px;
    --font-size-xs: 10px;
    --font-size-s:12px;
    --font-size-l: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 22px;
    --font-size-xxxl: 26px;

    --main-border-color:var(--neutral);
    --regular-shadow: 0px 2px 3px rgb(0 0 0 / 20%);
    --large-shadow: 0px 0px 8px 0 rgba(0 0 0 / 15%);
    --box-radius: 5px;
    --box-radius-small:3px;
    --element-radius: 5px;

    --kanban-col-bg: var(--col-content-bg);
    --kanban-col-title-bg: var(--col-title-bg);
    --kanban-col-title-color:var(--primary-font-color);
    --kanban-card-bg: var(--secondary-background);
    --kanban-card-hover: var(--primary-background);

}
