@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-weight: 100 900;
  src: url('https://static.focus.teamleader.eu/fonts/Inter.var.woff2') format('woff2');
}
.heading,
.text,
.ui-text {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  font-family: 'Inter', trebuchet ms, Verdana, 'Arial', sans-serif;
}
.text {
  font-weight: 400;
}
.text strong {
  font-weight: 600;
}
.ui-text {
  font-weight: 500;
}
.ui-text strong {
  font-weight: 700;
}
.heading-1 {
  font-size: calc(2.4 * 10px);
  font-weight: 700;
  line-height: calc(3.0 * 10px);
}
.heading-2 {
  font-size: calc(1.8 * 10px);
  font-weight: 500;
  line-height: calc(2.4 * 10px);
}
.heading-3 {
  font-size: calc(1.6 * 10px);
  font-weight: 500;
  line-height: calc(2.1 * 10px);
}
.heading-4 {
  font-size: calc(1.2 * 10px);
  font-weight: 700;
  line-height: calc(1.8 * 10px);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.heading-5 {
  font-size: calc(1.4 * 10px);
  font-weight: 600;
  line-height: calc(1.8 * 10px);
}
.heading a {
  text-decoration: none;
}
.heading a:hover {
  text-decoration: underline;
}
.text-display {
  font-size: calc(1.6 * 10px);
  line-height: calc(2.4 * 10px);
}
.text-body {
  font-size: calc(1.4 * 10px);
  line-height: calc(2.1 * 10px);
}
.text-body-compact {
  font-size: calc(1.4 * 10px);
  line-height: calc(1.8 * 10px);
}
.text-small {
  font-size: calc(1.2 * 10px);
  line-height: calc(1.8 * 10px);
}
.ui-text-display {
  font-size: calc(1.6 * 10px);
  line-height: calc(2.4 * 10px);
}
.ui-text-body {
  font-size: calc(1.4 * 10px);
  line-height: calc(1.8 * 10px);
}
.ui-text-small {
  font-size: calc(1.2 * 10px);
  line-height: calc(1.8 * 10px);
}
/** 
  Make sure all elements inherit the font-feature-settings
  Firefox seems to have a bug causing no inheritance at all
*/
.monospaced,
.monospaced * {
  font-feature-settings: "tnum";
}
.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.neutral.lightest {
    color: #ffffff;
  }
.neutral.light {
    color: #f7f7fa;
  }
.neutral.normal {
    color: #e4e4e6;
  }
.neutral.dark {
    color: #c0c0c4;
  }
.neutral.darkest {
    color: #82828c;
  }
.teal.lightest {
    color: #f0f5fc;
  }
.teal.light {
    color: #c1cede;
  }
.teal.normal {
    color: #64788f;
  }
.teal.dark {
    color: #2a3b4d;
  }
.teal.darkest {
    color: #1a1c20;
  }
.mint.lightest {
    color: #f0fafa;
  }
.mint.light {
    color: #57d3d2;
  }
.mint.normal {
    color: #00b2b2;
  }
.mint.dark {
    color: #008a8c;
  }
.mint.darkest {
    color: #004b4d;
  }
.ruby.lightest {
    color: #fff0ec;
  }
.ruby.light {
    color: #ffbca6;
  }
.ruby.normal {
    color: #ff7040;
  }
.ruby.dark {
    color: #e84b17;
  }
.ruby.darkest {
    color: #992600;
  }
.aqua.lightest {
    color: #f2f8ff;
  }
.aqua.light {
    color: #cce4ff;
  }
.aqua.normal {
    color: #99c9ff;
  }
.aqua.dark {
    color: #0071f2;
  }
.aqua.darkest {
    color: #004da6;
  }
.violet.lightest {
    color: #f7f7ff;
  }
.violet.light {
    color: #d3d1fe;
  }
.violet.normal {
    color: #928cff;
  }
.violet.dark {
    color: #6961ff;
  }
.violet.darkest {
    color: #130abf;
  }
.gold.lightest {
    color: #fff6e5;
  }
.gold.light {
    color: #ffda8f;
  }
.gold.normal {
    color: #ffcc66;
  }
.gold.dark {
    color: #ed9e00;
  }
.gold.darkest {
    color: #8f3c00;
  }
.marker {
  background-color: rgba(87, 211, 210, 0.3);
  color: inherit;
}
.overflow-multiline {
  display: -webkit-box;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overflow-singleline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
