:root {
    --bulma-primary-h: 160deg;
    --bulma-primary-s: 91%;
    --bulma-primary-l: 55%;
    --bulma-body-color: hsl(0, 100%, 100%);
    --bulma-family-primary: "Ubuntu";
    --bulma-family-code: "Ubuntu Mono";
}

@font-face {
    font-family: Tomorrow;
    src: url(../fonts/Tomorrow-Regular.ttf);
}

@font-face {
    font-family: Tomorrow;
    src: url(../fonts/Tomorrow-Medium.ttf);
    font-weight: 500
}

@font-face {
    font-family: Tomorrow;
    src: url(../fonts/Tomorrow-Bold.ttf);
    font-weight: bold
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url(../fonts/UbuntuMono-Regular.ttf);
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url(../fonts/UbuntuMono-Bold.ttf);
    font-weight: bold
}


@font-face {
    font-family: 'Ubuntu';
    src: url(../fonts/Ubuntu-R.ttf);
}

@font-face {
    font-family: 'Ubuntu';
    src: url(../fonts/Ubuntu-B.ttf);
    font-weight: bold
}


html {
    scroll-behavior: smooth;
}

.highlight-red {
    border-radius: 1em 0 1em 0;
    background-image: linear-gradient(
      -100deg,
      rgba(255, 20, 0, 0.2),
      rgba(255, 20, 0, 0.7) 95%,
      rgba(255, 20, 0, 0.1)
    );
}
.highlight-yellow {
border-radius: 1em 0 1em 0;
background-image: linear-gradient(
    -100deg,
    rgba(255, 224, 0, 0.2),
    rgba(255, 224, 0, 0.4) 95%,
    rgba(255, 224, 0, 0.1)
);
}
.highlight-green {
border-radius: 1em 0 1em 0;
background-image: linear-gradient(
    -100deg,
    rgba(0, 255, 20, 0.2),
    rgba(0, 255, 20, 0.7) 95%,
    rgba(0, 255, 20, 0.1)
);
}
.highlight-blue {
border-radius: 1em 0 1em 0;
background-image: linear-gradient(
    -100deg,
    rgba(0, 20, 255, 0.2),
    rgba(0, 20, 255, 0.7) 95%,
    rgba(0, 20, 255, 0.1)
);
}
.highlight-violet {
    border-radius: 1em 0 1em 0;
    background-image: linear-gradient(
        -100deg,
        rgba(71, 73, 115, 0.2),
        rgba(71, 73, 115, 0.7) 95%,
        rgba(71, 73, 115, 0.1)
    );
}

hr.new4 {
    border: 5px solid #fed766;
}

a.navbar-item:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #22f4ae;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

a.navbar-item:hover:after { 
    width: 100%; 
    left: 0; 
}




.heading-level-old {
    text-decoration: underline solid #22f4ae 20%;
    font-weight: bold;
}


.heading-level {
    text-transform: uppercase;
    line-height: 18px;
    font-weight: 600;
    font-size: 12px;
    font-family: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    color: rgb(9, 10, 12);
    background-color: rgb(211, 253, 239);
    padding-left: 9px;
    padding-right: 9px
}


.menu {
    position: sticky;
    display: inline-block;
    vertical-align: top;
    max-height: 100vh;
    overflow-y: auto;
    width: 200px;
    top: 50px;
    bottom: 0;
    padding: 30px;
  }


.collapsible {
    background-color: rgb(46, 51, 61);
    color: rgb(165, 172, 187);
    cursor: pointer;
    margin: 5px;
    padding: 16px 20px 16px 20px;
    width: 100%;
    border: none;
    border-radius: 6px;
    text-align: left;
    outline: none;
    justify-content: space-around;
    line-height: 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  .active, .collapsible:hover {
    background-color: rgb(211, 253, 239);
    color: rgb(9, 10, 12);
  }
  
  .collapsible:after {
    content: '\002B';
    color: rgb(165, 172, 187);
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2212";
  }
  
  .collapsible-content {
    margin: 5px;
    padding: 0px 20px 0px 20px;
    background-color: rgb(31, 34, 41);
    color: rgb(171, 177, 191);
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
    font-family: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }


/* Core styles/functionality */
.tab {
    position: relative;
  }
.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
    max-height: 10rem;
}

.tomorrow {
    font-family: "Tomorrow", sans-serif;
}

.tomorrow-thin {
    font-family: "Tomorrow", serif;
    font-weight: 100;
    font-style: normal;
}

.tomorrow-extralight {
font-family: "Tomorrow", serif;
font-weight: 200;
font-style: normal;
}

.tomorrow-light {
font-family: "Tomorrow", serif;
font-weight: 300;
font-style: normal;
}

.tomorrow-regular {
font-family: "Tomorrow", serif;
font-weight: 400;
font-style: normal;
}

.tomorrow-medium {
font-family: "Tomorrow", serif;
font-weight: 500;
font-style: normal;
}

.tomorrow-semibold {
font-family: "Tomorrow", serif;
font-weight: 600;
font-style: normal;
}

.tomorrow-bold {
font-family: "Tomorrow", serif;
font-weight: 700;
font-style: normal;
}

.tomorrow-extrabold {
font-family: "Tomorrow", serif;
font-weight: 800;
font-style: normal;
}

.tomorrow-black {
font-family: "Tomorrow", serif;
font-weight: 900;
font-style: normal;
}

.tomorrow-thin-italic {
font-family: "Tomorrow", serif;
font-weight: 100;
font-style: italic;
}

.tomorrow-extralight-italic {
font-family: "Tomorrow", serif;
font-weight: 200;
font-style: italic;
}

.tomorrow-light-italic {
font-family: "Tomorrow", serif;
font-weight: 300;
font-style: italic;
}

.tomorrow-regular-italic {
font-family: "Tomorrow", serif;
font-weight: 400;
font-style: italic;
}

.tomorrow-medium-italic {
font-family: "Tomorrow", serif;
font-weight: 500;
font-style: italic;
}

.tomorrow-semibold-italic {
font-family: "Tomorrow", serif;
font-weight: 600;
font-style: italic;
}

.tomorrow-bold-italic {
font-family: "Tomorrow", serif;
font-weight: 700;
font-style: italic;
}

.tomorrow-extrabold-italic {
font-family: "Tomorrow", serif;
font-weight: 800;
font-style: italic;
}

.tomorrow-black-italic {
font-family: "Tomorrow", serif;
font-weight: 900;
font-style: italic;
}




/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
animation: bounce .5s infinite;
}
@keyframes bounce {
25% {
    transform: rotate(90deg) translate(.25rem);
}
75% {
    transform: rotate(90deg) translate(-.25rem);
}
}


.kennzahl {
    font-family: "Tomorrow", "Courier New", monospace;
    font-weight: 400;
}

.absatz {
    color: whitesmoke;
    font-size: 16px;
    line-height: 22px;
}


.level-item .title {
    font-family: "Tomorrow", "Courier New", monospace;
    font-weight: 400;
}

.level-item .title {
    font-family: "Tomorrow", "Courier New", monospace;
    font-weight: 400;
}


.kpi-value {
    font-family: Ubuntu, "Tomorrow", "Courier New", monospace;
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    color: whitesmoke;
}

.kpi-key {
    font-family: Ubuntu, "Tomorrow", "Courier New", monospace;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0px;
    color: whitesmoke;
}

.menu-text {
    font-family: "Tomorrow";
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}


.article-byline {
    font-family: "Ubuntu Mono", Inconsolata, Hack, "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 16px;
}

.article-suptitle {
    font-family: Ubuntu, Inter;
    font-size: 16px;
    font-weight: 700;
    color: rgb(34, 244, 174);
    margin-bottom: 0;
}

.article-title {
    font-family: Ubuntu, Inter;
    font-size: 32px;
    font-weight: 800;
    line-height: 36px;
    margin-bottom: 16px;
}

.navbar-item {
    font-family: Ubuntu, "Tomorrow", "Inter";
    font-weight: 500
}

h1, h2, h3, h4, h5, h6, p{
    font-family: Ubuntu, Tomorrow;
}

.breadcrumb {
    font-family: "Ubuntu Mono", Ubuntu;
}

.menu-list li a, .menu-label {
    font-family: Ubuntu, Tomorrow;
    font-weight: 400;
}

.tabs li a, .menu-label {
    font-family: Ubuntu, "Tomorrow";
    font-weight: 400;
}

.footer a {
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    color: whitesmoke;
}


.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    background-color: #14161a;
    text-align: center;
    height: 1.5em;
    opacity: .5;
    &:before {
      content: '';
      background: linear-gradient(to right, transparent, white, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
    }
    &:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;
      color: black;
  
      padding: 0 .5em;
      line-height: 1.5em;
      color: white;
      background-color: #14161a;
    }
  }