:root {
  --horizontal-space-0: 3px;
  --horizontal-space-1: 5px;
  --horizontal-space-2: 10px;
  --horizontal-space-3: 20px; 
  --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 {
  --font-size-1: 22px;
  --font-size-2: 27px;
  --font-size-3: 31px;
  --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(206, 206, 206);
  --color-2: rgb(197, 197, 197);
  --color-3: rgb(183, 183, 183);
  --color-4: rgb(174, 174, 174);
  --color-5: rgb(147, 147, 147);
  --color-6: rgb(135, 135, 135);
  --color-7: rgb(121, 121, 121);
  --color-8: rgb(96, 96, 96);
  --color-9: rgb(61, 61, 61);

  --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: 'Times New Roman', Times, serif;
  --font-family-2: 'Helvetica', sans-serif;
}
@media only screen and (max-width: 800px) {
  :root {
    --width-1: 100%;
    --width-2: 100vw;
    --font-size-1: 18px;
  }
}

.ff-1, .ff-1-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-1);
  line-height: calc(var(--font-size-1) * 1.06);
  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-9); 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-6);
  box-shadow: 0 0 5px 5px var(--color-6);
}

.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;}


.c0 { color: var(--color-0); }
.c1 { color: var(--color-1); }
.c2 { color: var(--color-2); }
.c3 { color: var(--color-3); }
.c4 { color: var(--color-4); }
.c5 { color: var(--color-5); }
.c6 { color: var(--color-6); }
.c7 { color: var(--color-7); }
.c8 { color: var(--color-8); }

.bc0 { background: var(--color-0);}
.bc1 { background: var(--color-1);}
.bc2 { background: var(--color-2);}
.bc3 { background: var(--color-3);}
.bc4 { background: var(--color-4);}
.bc5 { background: var(--color-5);}
.bc6 { background: var(--color-6);}
.bc7 { background: var(--color-7);}
.bc8 { background: var(--color-8);}

.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-9);
}

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