:root {
  --horizontal-space-0: 3px;
  --horizontal-space-1: 5px;
  --horizontal-space-2: 10px;
  --horizontal-space-3: 3vw; 
  --horizontal-space-4: 30px;
  --horizontal-space-5: 40px;
  --horizontal-space-6: 50px;
  --horizontal-space-7: 60px;
  --horizontal-space-8: 70px;
  --horizontal-space-9: 100px;
  --vertical-space-0: 2px;
  --vertical-space-1: 5px;
  --vertical-space-2: 8px;
  --vertical-space-3: 12px;
  --vertical-space-4: 20px;
  --vertical-space-5: 30px;
  --vertical-space-6: 40px;
  --vertical-space-7: 50px;
  --vertical-space-8: 60px;
  --vertical-space-9: 70px;
  --vertical-space-10: 80px;
}

.mar {margin-top: var(--vertical-space-0); margin-left: var(--horizontal-space-0);}
.mar-1 {margin-top: var(--vertical-space-1); margin-left: var(--horizontal-space-1);}
.mar-2 {margin-top: var(--vertical-space-2); margin-left: var(--horizontal-space-2);}
.mar-3 {margin-top: var(--vertical-space-3); margin-left: var(--horizontal-space-3);}
.mar-4 {margin-top: var(--vertical-space-4); margin-left: var(--horizontal-space-4);}

.pad {padding-top: var(--vertical-space-0); padding-left: var(--horizontal-space-0);}
.pad-1 {padding-top: var(--vertical-space-1); padding-left: var(--horizontal-space-1);}
.pad-2 {padding-top: var(--vertical-space-2); padding-left: var(--horizontal-space-2);}
.pad-3 {padding-top: var(--vertical-space-3); padding-left: var(--horizontal-space-3);}
.pad-4 {padding-top: var(--vertical-space-4); padding-left: var(--horizontal-space-4);}

.pad-l {padding-left: var(--horizontal-space-0);}
.pad-l-1 {padding-left: var(--horizontal-space-1);}
.pad-l-2 {padding-left: var(--horizontal-space-2);}
.pad-l-3 {padding-left: var(--horizontal-space-3);}
.pad-l-4 {padding-left: var(--horizontal-space-4);}
.pad-l-5 {padding-left: var(--horizontal-space-5);}
.pad-l-6 {padding-left: var(--horizontal-space-6);}
.pad-l-7 {padding-left: var(--horizontal-space-7);}
.pad-l-8 {padding-left: var(--horizontal-space-8);}
.pad-l-9 {padding-left: var(--horizontal-space-9);}
.pad-l-10 {padding-left: var(--horizontal-space-10);}

.pad-r {padding-right: var(--horizontal-space-0);}
.pad-r-1 {padding-right: var(--horizontal-space-1);}
.pad-r-2 {padding-right: var(--horizontal-space-2);}
.pad-r-3 {padding-right: var(--horizontal-space-3);}
.pad-r-4 {padding-right: var(--horizontal-space-4);}
.pad-r-5 {padding-right: var(--horizontal-space-5);}
.pad-r-6 {padding-right: var(--horizontal-space-6);}
.pad-r-7 {padding-right: var(--horizontal-space-7);}
.pad-r-8 {padding-right: var(--horizontal-space-8);}
.pad-r-9 {padding-right: var(--horizontal-space-9);}
.pad-r-10 {padding-right: var(--horizontal-space-10);}

.pad-b {padding-bottom: var(--vertical-space-0);}
.pad-b-1 {padding-bottom: var(--vertical-space-1);}
.pad-b-2 {padding-bottom: var(--vertical-space-2);}
.pad-b-3 {padding-bottom: var(--vertical-space-3);}
.pad-b-4 {padding-bottom: var(--vertical-space-4);}
.pad-b-5 {padding-bottom: var(--vertical-space-5);}
.pad-b-6 {padding-bottom: var(--vertical-space-6);}
.pad-b-7 {padding-bottom: var(--vertical-space-7);}
.pad-b-8 {padding-bottom: var(--vertical-space-8);}
.pad-b-9 {padding-bottom: var(--vertical-space-9);}
.pad-b-10 {padding-bottom: var(--vertical-space-10);}

.pad-t {padding-top: var(--vertical-space-0);}
.pad-t-1 {padding-top: var(--vertical-space-1);}
.pad-t-2 {padding-top: var(--vertical-space-2);}
.pad-t-3 {padding-top: var(--vertical-space-3);}
.pad-t-4 {padding-top: var(--vertical-space-4);}
.pad-t-5 {padding-top: var(--vertical-space-5);}
.pad-t-6 {padding-top: var(--vertical-space-6);}
.pad-t-7 {padding-top: var(--vertical-space-7);}
.pad-t-8 {padding-top: var(--vertical-space-8);}
.pad-t-9 {padding-top: var(--vertical-space-9);}
.pad-t-10 {padding-top: var(--vertical-space-10);}

.mar-r {margin-right: var(--horizontal-space-0);}
.mar-r-1 {margin-right: var(--horizontal-space-1);}
.mar-r-2 {margin-right: var(--horizontal-space-2);}
.mar-r-3 {margin-right: var(--horizontal-space-3);}
.mar-r-4 {margin-right: var(--horizontal-space-4);}
.mar-r-5 {margin-right: var(--horizontal-space-5);}
.mar-r-6 {margin-right: var(--horizontal-space-6);}
.mar-r-7 {margin-right: var(--horizontal-space-7);}
.mar-r-8 {margin-right: var(--horizontal-space-8);}
.mar-r-9 {margin-right: var(--horizontal-space-9);}
.mar-r-10 {margin-right: var(--horizontal-space-10);}

.mar-l-1 {margin-left: var(--horizontal-space-0);}
.mar-l-2 {margin-left: var(--horizontal-space-1);}
.mar-l-3 {margin-left: var(--horizontal-space-2);}
.mar-l-4 {margin-left: var(--horizontal-space-3);}
.mar-l-5 {margin-left: var(--horizontal-space-4);}
.mar-l-6 {margin-left: var(--horizontal-space-5);}
.mar-l-7 {margin-left: var(--horizontal-space-6);}
.mar-l-8 {margin-left: var(--horizontal-space-7);}
.mar-l-9 {margin-left: var(--horizontal-space-8);}
.mar-l-10 {margin-left: var(--horizontal-space-9);}

.mar-b {margin-bottom: var(--vertical-space-0);}
.mar-b-1 {margin-bottom: var(--vertical-space-1);}
.mar-b-2 {margin-bottom: var(--vertical-space-2);}
.mar-b-3 {margin-bottom: var(--vertical-space-3);}
.mar-b-4 {margin-bottom: var(--vertical-space-4);}
.mar-b-5 {margin-bottom: var(--vertical-space-5);}
.mar-b-6 {margin-bottom: var(--vertical-space-6);}
.mar-b-7 {margin-bottom: var(--vertical-space-7);}
.mar-b-8 {margin-bottom: var(--vertical-space-8);}
.mar-b-9 {margin-bottom: var(--vertical-space-9);}
.mar-b-10 {margin-bottom: var(--vertical-space-10);}

.mar-t {margin-top: var(--vertical-space-0);}
.mar-t-1 {margin-top: var(--vertical-space-1);}
.mar-t-2 {margin-top: var(--vertical-space-2);}
.mar-t-3 {margin-top: var(--vertical-space-3);}
.mar-t-4 {margin-top: var(--vertical-space-4);}
.mar-t-5 {margin-top: var(--vertical-space-5);}
.mar-t-6 {margin-top: var(--vertical-space-6);}
.mar-t-7 {margin-top: var(--vertical-space-7);}
.mar-t-8 {margin-top: var(--vertical-space-8);}
.mar-t-9 {margin-top: var(--vertical-space-9);}
.mar-t-10 {margin-top: var(--vertical-space-10);}



:root {
  --padding-left-1: 10px;
  --font-size-0: 13px;
  --font-size-1: 15px;
  --font-size-2: 19px;
  --font-size-3: 18px;
  --line-height-1: 1.14;
  --padding-top-1: 3px;
  --line-offset-1: 2px;

  --grid-gap-1: 25px;
  --border-width-1: 0.4px;
  --border-width-2: 4px;
  --border-width-3: 3px;
  --color-0: rgb(253, 253, 253);
  --color-1: rgb(181, 181, 181);
  --color-3: rgb(95, 31, 185);
  --color-2: black;
  --color-4: rgb(31, 77, 185);
  --color-5: rgb(246, 246, 246);
  --color-6: rgb(255, 0, 0);
  
  --scrollbar-width: 5px;
  --radius-1: 0.5vw;
  --radius-2: 8px;
  --radius-3: 3px;
  --grid-gap-1: 30px;
  --grid-gap-2: 0.5vw;
  --bar-height-1: 25px;

  --line-thickness-1: 0.2px;
  --line-thickness-2: 0.5px;
  --line-thickness-3: 0.7px;
  --line-thickness-4: 1px;
  --line-thickness-5: 2px;

  --border-radius-1: 17px;

  --width-0: 100%;
  --width-1: 410px;
  --width-2: 100%;
  --width-3: 440px;
  --width-4: 80px;
  --width-5: 60px;

  --height-1: 60px;
  --header-height-1: 27px;

  --gap-1: 10px;
  --transition-1: 0.3s; 

  --font-family-1: 'neue-haas-grotesk-display';
  --font-family-2: 'Helvetica', sans-serif;
}
@media only screen and (max-width: 800px) {
  :root {
    --width-1: 100%;
    --width-2: 100vw;

  }
}

.ff-1, .ff-1-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  line-height: var(--line-height-1);
  font-weight: normal;
  white-space: 'pre-wrap',
}
.ff-2, .ff-2-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: var(--line-height-1);
  font-weight: normal;
}
.ff-3, .ff-3-f * {
  font-family: var(--font-family-2);
  font-size: var(--font-size-3)!important;
  line-height: var(--line-height-1);
  font-weight: normal;
}

.fs-0 {font-size: var(--font-size-0);}
.fs-0 * {font-size: var(--font-size-0)!important;}
.fs-2 {font-size: var(--font-size-2);}
.fs-2-abs * {font-size: var(--font-size-2);}
.fs-1 {font-size: var(--font-size-1);}

.width-0{width: var(--width-0)}
.width-1{width: var(--width-1)}
.width-2{width: var(--width-2)}
.width-3{width: var(--width-3)}
.width-4{width: var(--width-4)}
.width-5{width: var(--width-5)}

.border-1 {border: var(--border-width-1) solid var(--color-1); border-radius: var(--radius-3);}

.height-1 {height: var(--height-1)}

.gap-1 {grid-gap: var(--grid-gap-1);}
.gap-2 {grid-gap: var(--grid-gap-2);}

.noevents {pointer-events: none;}
.underline { text-decoration: underline;}
::-webkit-scrollbar {display: none;}

.editbox {
  background: var(--color-5);
  box-shadow: 0 0 5px 5px var(--color-5);
}

.cl:hover {color: rgb(49, 49, 49); cursor: pointer;}
.cl.grey:hover {color: rgb(0, 0, 0);}
.cl2 {text-decoration: none;}
.cl2:hover {color: blue; cursor: pointer;}
.cl2.grey:hover {color: rgb(0, 0, 0);}

.cur {font-style: italic}
.cur:hover {color: blue;cursor: pointer;}

.flex {display: flex}
.bl {display: block;}
.inl {display: inline-block;}
.al-c {text-align: center;}
.al-r {text-align: right;}
.al-l {text-align: left;}

.cur {font-style: italic;}
.diff {mix-blend-mode: difference;}

.grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--grid-gap-1);}
.grid-3 {display: grid; grid-template-columns: repeat(3, 1fr);}
.grid-4 {display: grid; grid-template-columns: repeat(4, 1fr);}
.grid-5 {display: grid; grid-template-columns: repeat(5, 1fr);}
.grid-6 {display: grid; grid-template-columns: repeat(8, 1fr);}

.komma .ch::after {content: ",";}
.komma .ch:last-child::after {content: "";}

.bold * { font-weight: bold;}

.nowrap {white-space: nowrap;}

.gr{color: green}
.lig {color: grey;}
.grey {color: grey;}
.c0 {color: var(--color-1);}
.c1 {color: black;}
.c2{color: rgb(119, 65, 206); }
.c3 {color: rgb(251, 0, 255);}
.c4 {color: var(--color-3)}
.c5 {color: rgb(149, 181, 23);}
.c6 {color: rgb(229, 130, 9);}
.c7 {color: rgb(192, 98, 107);}
.c8 {color: red;}

.bc0 {background: rgb(158, 172, 255);}
.bc1 {background: rgb(246, 146, 250)!important;}
.bc2 {background: rgb(159, 255, 184)!important;}
.bc3 {background: rgb(0, 0, 0); color: white!important;}
.bc4 {background: rgb(116, 221, 64); color: rgb(0, 0, 0)!important;}
.bc5 {background: rgb(255, 65, 131)!important; }
.bc6 {background: rgb(229, 229, 229)!important; }
.bc7 {background: rgb(211, 211, 211)!important; }

.link {
  text-decoration: dotted underline;
  background: transparent;
  text-decoration-thickness: var(--line-thickness-5);
  text-underline-offset: var(--line-offset-1);
  font-size: var(--font-size-2);
}
.link:hover {
  color: var(--color-1);
}

.komma .ch {
  display: inline-block;
}
.komma .ch::after {
  content: ",";
  margin-right: 4px;
}
.komma .ch:last-child::after {
  content: "";
}