:root {
    /* SAP for JS dynamic pitch */
    --home-team-color: #0000ff;
    --away-team-color: #ff6600;

    /* 
      SportAnalytics NEW ARCH: colour schemas for new charts 
      - 2 teams (now: orange, grey) -> fullschema
      - team/player vs rest (now: orange, grey) -> one_vs_rest
      - series (now: orange) -> fullschema
      - timeline (now: orange) -> fullschema
      - multiple series (now: orange, yellow; red, orange, yellow) -> fullschema
      - comparison all players (orange or grey) -> fullschema
      - comparison one highlighted (grey, highlighted orange) -> fullschema (with one highlighted)
      - heatmap (now it's an image, should be 3 colours that form a gradient)


      "rgba(255, 102, 0, 0.3)",
			"rgba(255, 224, 0, 0.3)",
			"rgba(158, 0, 0, 0.3)",
			"rgba(128, 0, 128, 0.3)",
      "rgba(204, 0, 0, 0.3)",
			"rgba(255, 238, 0, 0.3)",
			"rgba(255, 152, 0, 0.3)",
			"rgba(204, 0, 0, 0.3)",
			"rgba(153, 92, 0, 0.3)",
			"rgba(255, 102, 0, 0.3)",
			"rgba(189, 0, 189, 0.3)",

    */
    --colour1: rgb(232, 50, 12);
    --colour2: rgb(255, 199, 13);
    --colour3: rgb(102, 41, 0);
    --colour4: rgb(158, 0, 0);
    --colour5: rgb(128, 0, 128);
    --colour6: rgb(204, 0, 0);
    --colour7: rgb(255, 238, 0);
    --colour8: rgb(255, 152, 0);
    --colour9: rgb(153, 92, 0);
    --colour10: rgb(255, 205, 96);
    --colour11: rgb(189, 0, 189);

    --colour_grey1: #3D3938;
    --colour_grey2: #575150;
    --colour_grey3: #706967;
    --colour_grey4: #9D9593;
    --colour_grey5: #BDB1AE;
    --colour_grey6: #dfd7d1;
    --colour_grey7: #FCEDE8;

    /* SAP other colors from Material */
    --color-highlight: #fad503; /* #e36600; #cc0000; /* #ff9800; */

    /* --color-background: #ffffff; Superset orig is f7f7f7;  #f3f1f1 */
    --color-background: #f7f7f7;
    --color-widget-background: #ffffff; /* #fffaf9; */
    --color-border: #f3edec;
    --color-text: #2e2a29;

    --color-primary: #ff9800;
    --color-secondary: #e36600; /* #cc0000; */
    --color-tertiary: #ff6600;
    --color-darkgrey: #2e2a29;
    --color-mediumgrey: #b4a9a6;
    --color-lightgrey: #f3f1f1;

    --color-primary-25: rgba(255,152,0,0.25);
    --color-primary-50: rgba(255,152,0,0.5);
    --color-primary-75: rgba(255,152,0,0.75);
    --color-primary-darker: #995c00;
    --color-primary-darkest: #730000;

    --color-darkgrey-50: rgba(112, 105, 103, 0.5);


    --color-ok: rgb(42, 161, 42);
    --color-warning: rgb(255, 238, 0);
    --color-ko: rgb(226, 0, 0);

    /* Layout generale */
    --ly-main-c: #C00000;
    --ly-line-br: 1px solid #b4a9a6;
    
    /* SideBarMenu */
    --sb-wd: 250px;
    --sb-pd: 12.5px;
    --sb-logo-hg: 50px;
    --sb-toggler-fs: 22px;
    --sb-toggler-pd-t: 12px;
    --sb-toggler-pd-b: 8px;
    --sb-toggler-pd-r: 15px;
    --sb-profile-pd: 0.5em 1em;
    --sb-profile-ff: "Textfont-Semibold", sans-serif;
    --sb-profile-fs: 11pt;
    --sb-dataset-ff: "Textfont-Black", sans-serif;
    --sb-item-hg: 2em;
    --sb-item-lvl_1-ff: "Textfont-Bold", sans-serif;
    --sb-item-lvl_1-fs: 13pt;
    --sb-item-lvl_1-c: #1e1917;
    --sb-item-lvl_1-active-c: #ffffff;
    --sb-item-lvl_1-active-bgc: #C00000;
    --sb-item-lvl_1-ta: left;
    --sb-item-lvl_2-ff: "Textfont-Semibold", sans-serif;
    --sb-item-lvl_2-fs: 11pt;
    --sb-item-lvl_2-c: #b4a9a6;
    --sb-item-lvl_2-ta: left;
    --sb-item-lvl_2-active-c: #1e1917;
    --sb-item-lvl_2-active-bgc: #f3edec;
    --sb-item-lvl_2-active-br: 1pt solid #f3edec;
    --sb-item-lvl_3-mr-t: 10px;
    --sb-item-lvl_3-pd-l: 0px;
    --sb-item-lvl_3-ff: "Textfont-Medium", sans-serif;
    --sb-item-lvl_3-fs: 11pt;
    --sb-item-lvl_3-c: #1e1917;
    --sb-item-lvl_3-ta: left;
    --sb-item-lvl_4-pd-l: 25px;
    --sb-item-lvl_4-ff: "Textfont-Medium", sans-serif;
    --sb-item-lvl_4-fs: 10pt;
    --sb-item-lvl_4-c: #b4a9a6;
    --sb-item-lvl_4-ta: left;
    --sb-item-lvl_4-active-c: #C00000;
    
    /* TopBar */
    --tb-title-mr-l: 5px;
    --tb-title-pd-t: 5px;
    --tb-title-h1-mr: 0px;
    --tb-title-h1-ff: "Textfont-Black", sans-serif;
    --tb-title-h1-fs: 15pt;
    --tb-title-h1-c: #ffffff;
    --tb-title-h1-lh: 1;
    --tb-title-h2-mr: 0px;
    --tb-title-h2-ff: "Textfont-Semibold", sans-serif;
    --tb-title-h2-fs: 11pt;
    --tb-title-h2-c: #ffffff;
    --tb-title-h2-lh: 2;
    --tb-topbar-menu-mr: 0px;
    --tb-topbar-menu-mr-l: 27px;
    --tb-topbar-menu-mr-r: 27px;
    --tb-topbar-menu-pd: 5px 0px;
    --tb-topbar-menu-ff: "Textfont-Black", sans-serif;
    --tb-topbar-menu-fs: 12pt;
    --tb-topbar-menu-c: #ffffff;
    --tb-topbar-menu-lh: 2;
    
    /* Widget */
    /* Player e TimeLine */
    --wg-pl-cb-hg: 42px;
    --wg-pl-cb-wd: calc(100% + 20px);
    --wg-pl-cb-l: -10px;
    --wg-pl-cb-input-wd: 55px;
    --wg-pl-cb-input-hg: 20px;
    --wg-pl-cb-input-min-hg: 20px;
    --wg-pl-cb-input-max-hg: 20px;
    --wg-pl-cb-input-pd: 0px 5px;
    --wg-pl-cb-input-lh: 0;
    --wg-pl-cb-input-fl: left;
    --wg-pl-cb-input-ff: "Textfont-Regular", sans-serif;
    --wg-pl-cb-input-fs: 10pt;
    --wg-pl-cb-input-c: #706967;
    --wg-pl-cb-input-ta: center;
    --wg-pl-cb-input-bgc: #f3edec;
    --wg-pl-cb-input-br: 0px solid #f3edec;
    --wg-pl-cb-input-pos: absolute;
    --wg-pl-cb-input-t: 0px;
    --wg-pl-cb-input-l: 0px;
    --wg-pl-cb-input-r: initial;
    --wg-pl-cb-input-b: initial;
    --wg-pl-cb-info-wd: fit-content;
    --wg-pl-cb-info-t: 11px;
    --wg-pl-cb-info-l: 75px;
    --wg-pl-cb-info-lh: 1.5;
    --wg-pl-cb-info-br-rad: 3px;
    --wg-pl-tl-container-pd-t: 6px;
    --wg-pl-tl-container-pd-b: 6px;
    --wg-pl-tl-container-pd-l: 20px;
    --wg-pl-tl-container-pd-r: 20px;
    --wg-pl-tl-hg: 48px;
    --wg-pl-tl-pd-t: 14px;
    --wg-pl-tl-pd-b: 6px;
    --wg-pl-tl-pd-l: 45px;
    --wg-pl-tl-pd-r: 45px;
}