/* @font-face {
  font-family: 'Avenir LT';
  src: url('../fonts/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2') format('woff');
}

@font-face {
  font-family: 'Avenir LT';
  src: url('../fonts/c78eb7af-a1c8-4892-974b-52379646fef4.woff2') format('woff');
  font-weight: bold;
} */

@font-face {
  font-family: 'Almarena Mono Light';
  src: url('../fonts/Almarena Mono Light.woff2') format('woff');
}

@font-face {
  font-family: 'Almarena Regular';
  src: url('../fonts/Almarena Regular.woff2') format('woff');
}

* {
  box-sizing: border-box;
}

:root {
  --color-brown-100: rgb(220 197 189);
  --color-blue-100: rgb(202 226 244);
  --color-green-100: rgb(199 235 211);

  --color-brown-800: #927368;
  --color-blue-800: #4998d1;
  --color-green-800: #6dae6d;

  /* old names */
  --accent-color: #ff5d64;
  --speicherreserve-color: #4545cf;

  /* new names */

  --color-primary: #ff5d64;
  --color-energy-surplus: rgb(0, 236, 209);
  --color-energy-deficit: purple;
  --color-energy-import: rgb(176, 176, 176);
  /* --color-energy-import: rgb(196, 196, 196); */

  --color-tech-pv: rgb(255, 216, 93);
  --color-tech-wind: #a8d8fb;
  --color-tech-hydro: #729dd3;
  --color-tech-biomass: #59a660;
  --color-tech-co2Free: rgb(135, 195, 194);
  --color-tech-otherRenewable: #f7cea0;
  --color-tech-nu: rgb(207, 176, 149);
  --color-tech-fossil: #7b6f71;
  --color-tech-speicherreserve: #4545cf;
  --color-tech-demand: var(--color-gray-900);
  --color-tech-import: var(--color-gray-300);

  --color-tech-pv-partial-transparent: rgba(255, 216, 93, 0.5);
  --color-tech-wind-partial-transparent: #a8d8fb7f;
  --color-tech-hydro-partial-transparent: #729dd37f;
  --color-tech-biomass-partial-transparent: #59a6607f;
  --color-tech-co2Free-partial-transparent: rgba(135, 195, 194, 0.5);
  --color-tech-otherRenewable-partial-transparent: #f7cea07f;
  --color-tech-nu-partial-transparent: rgba(207, 176, 149, 0.5);
  --color-tech-fossil-partial-transparent: #7b6f717f;
  --color-tech-speicherreserve-partial-transparent: #4545cf7f;
  --color-tech-demand-partial-transparent: var(--color-gray-300);
  --color-tech-import-partial-transparent: var(--color-gray-200);

  --color-cost-inv-fixed-darker: var(--color-brown-800);
  --color-cost-inv-var-darker: var(--color-blue-800);
  --color-cost-social-darker: var(--color-green-800);

  --color-cost-inv-fixed: var(--color-brown-700);
  --color-cost-inv-var: var(--color-blue-700);
  --color-cost-social: var(--color-green-700);

  --color-cost-inv-fixed-weaker: var(--color-brown-300);
  --color-cost-inv-var-weaker: var(--color-blue-300);
  --color-cost-social-weaker: var(--color-green-300);

  --color-cost-inv-fixed-weakest: var(--color-brown-100);
  --color-cost-inv-var-weakest: var(--color-blue-100);
  --color-cost-social-weakest: var(--color-green-100);

  --color-cost-workingPrice: #ec9027;
  --color-cost-gridAndFixedPrice: #4588cf;
  --color-cost-subsidy: #04771f;
  --color-cost-tax: #a272d3;

  /* BC total	T1	New NU
HC total	T2	New HC
GA total	T3	New Env Res
Oth. Fossil total	T4	Exist Fossil
NU	T5	Exist NU
GtP total	T6	New Env Market
CCS Fossil	T7	CCS Fossil
T-BX	T8	CCS Bio
T-BM	T9	Bio
RoR	T10	RoR
HS	T11	HS
PS	T12	PC Ground
PH	T13	PV Roof
PV alpin	T14	PV alpin
Wind on	T15	Wind on
Wind off	T16	New RoR
E-AE	T17	Geo
TOTAL	TOTAL	Total */

  --color-bg: #f1f5f9;

  /* pollen.css extension */
  --width-xxl: 1536px;
}

html {
  font-size: 62.5%;
  /* https://chiamakaikeanyi.dev/sizing-in-css-px-vs-em-vs-rem/ */
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  color: #3d3d3d;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  /* font-size: 16px; */
  font-size: 1.6rem;

  line-height: 1.1875;
}

.chart-title {
  margin: var(--scale-0);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: var(--scale-3);
}

.chart-title .unit {
  font-weight: normal;
  font-size: var(--scale-2);
  margin-left: var(--scale-0);
}

.tick {
  font-size: var(--scale-1);
}

a {
  color: rgb(0, 100, 200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0, 80, 160);
}

label {
  display: block;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  -webkit-padding: 0.4em 0;
  padding: 0.4em;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 2px;
}

input:disabled {
  color: #ccc;
}

button {
  color: #3d3d3d;
  background-color: #f4f4f4;
  outline: none;
}

button:disabled {
  color: #999;
}

button:not(:disabled):active {
  background-color: #ddd;
}

button:focus {
  border-color: #666;
}

h1 {
  font-family: 'Almarena Regular', 'Open Sans', sans-serif;
}

h2 {
  font-family: 'Almarena Regular', 'Open Sans', sans-serif;
  font-size: 2.2rem;
}

input[type='range'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  margin: 0;
  width: 100%;
  border: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  /* background: #d8d8d8; */
  background: #fff;
  border-radius: 5px;
  border: 0.2px solid #e8e0de;
  /* background: none;
    border: none; */
  -webkit-appearance: auto;
}
input[type='range']::-webkit-slider-thumb {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background: var(--accent-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type='range']:active::-webkit-slider-thumb {
  background: var(--accent-color);
}
input[type='range']::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #d8d8d8;
  border-radius: 5px;
  border: 0.2px solid #e8e0de;
  /* background: none;
    border: none; */
  -webkit-appearance: auto;
}
input[type='range']::-moz-range-thumb {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background: var(--accent-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
  border: none;
}

input[type='range']:active::-moz-range-thumb {
  background: var(--accent-color);
}
input[type='range']::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #d8d8d8;
  border-radius: 5px;
  border: 0.2px solid #e8e0de;
  /* background: none;
    border: none; */
  -webkit-appearance: auto;
}
input[type='range']::-ms-thumb {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background: var(--accent-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type='range']:active::-ms-thumb {
  background: var(--accent-color);
}
input[type='range']::slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #d8d8d8;
  border-radius: 5px;
  border: 0.2px solid #e8e0de;
  /* background: none;
    border: none; */
  -webkit-appearance: auto;
}
input[type='range']::slider-thumb {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background: var(--accent-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type='range']:active::slider-thumb {
  background: var(--accent-color);
}

p {
  line-height: 2rem;
}

.x-tick {
  font-size: 1.4rem;
  text-anchor: middle;
}

.y-tick {
  dominant-baseline: central;
  text-anchor: end;
  font-size: 1.4rem;
}

.max {
  text-anchor: end;
  font-size: 1.4rem;
  pointer-events: none;
}

.min {
  text-anchor: end;
  font-size: 1.4rem;
  pointer-events: none;
}