@cainthus/alex-library/build/dist/style.css

Component React library for Cainthus - Alex Dashboard.

:root {
  --color-primary: #ed1846;
  --color-primary-85: rgba(237, 24, 70, 0.85);
  --color-primary-70: rgba(237, 24, 70, 0.7);
  --color-primary-55: rgba(237, 24, 70, 0.55);
  --color-primary-40: rgba(237, 24, 70, 0.4);
  --color-primary-25: rgba(237, 24, 70, 0.25);
  --color-primary-10: rgba(237, 24, 70, 0.1);
  --color-success: #09c199;
  --color-success-85: rgba(9, 193, 153, 0.85);
  --color-success-70: rgba(9, 193, 153, 0.7);
  --color-success-55: rgba(9, 193, 153, 0.55);
  --color-success-40: rgba(9, 193, 153, 0.4);
  --color-success-25: rgba(9, 193, 153, 0.25);
  --color-success-10: rgba(9, 193, 153, 0.1);
  --color-dark: #333f52;
  --color-dark-85: rgba(51, 63, 82, 0.85);
  --color-dark-70: rgba(51, 63, 82, 0.7);
  --color-dark-55: rgba(51, 63, 82, 0.55);
  --color-dark-40: rgba(51, 63, 82, 0.4);
  --color-dark-25: rgba(51, 63, 82, 0.25);
  --color-dark-10: rgba(51, 63, 82, 0.1);
  --color-bright: #fffffc;
  --color-bright-85: rgba(255, 255, 252, 0.85);
  --color-bright-70: rgba(255, 255, 252, 0.7);
  --color-bright-55: rgba(255, 255, 252, 0.55);
  --color-bright-40: rgba(255, 255, 252, 0.4);
  --color-bright-25: rgba(255, 255, 252, 0.25);
  --color-bright-10: rgba(255, 255, 252, 0.1);
  --color-default-light: #c5d0de;
  --color-default-light-85: rgba(197, 208, 222, 0.85);
  --color-default-light-70: rgba(197, 208, 222, 0.7);
  --color-default-light-55: rgba(197, 208, 222, 0.55);
  --color-default-light-40: rgba(197, 208, 222, 0.4);
  --color-default-light-25: rgba(197, 208, 222, 0.25);
  --color-default-light-10: rgba(197, 208, 222, 0.1);
  --color-error: #f39c12;
  --color-warn: #f39c12;
  --color-default: var(--color-dark-70);
  --color-bg-default: #c5d0de;
  --color-bg-gray: #c5d0de;
  --horizontal-shadow-z1: 2px 0 4px 0 rgba(0, 0, 0, 0.2);
  --horizontal-shadow-z2: 9px 0 13px 0 rgba(0, 0, 0, 0.2);
  --shadow-z0: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-z1: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  --shadow-z2: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
  --shadow-z3: 0 9px 13px 0 rgba(0, 0, 0, 0.2);
  --screen-iph-retina: 320px;
  --screen-xs: 480px;
  --screen-sm: 768px;
  --screen-lg: 992px;
  --screen-lg: 1200px;
  --font-display-h1: 5.6rem;
  --font-display-h2: 4.8rem;
  --font-display-h3: 3.2rem;
  --font-headline: 2.4rem;
  --font-title: 2rem;
  --font-subheading: 1.6rem;
  --font-body: 1.4rem;
  --font-caption: 1.2rem;
  --font-button: 1.4rem;
  --opacity-100: 100%;
  --opacity-70: 0.7;
  --opacity-55: 0.55;
  --opacity-40: 0.4;
  --opacity-25: 0.25;
  --opacity-10: 0.1;
  --transition-snap: cubic-bezier(0.86, 0, 0.07, 1); }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-Bold.ttf");
  font-weight: 600; }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-Book.ttf");
  font-weight: 300; }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-Light.ttf");
  font-weight: 200; }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-XLight.ttf");
  font-weight: 100; }

html {
  font-family: 'Verlag', Roboto, 'open-sans', Helvetica;
  font-size: 62.5% !important;
  font-weight: 300;
  min-width: 320px; }

div, p, input, label, a, span, div, article, main, section, header, footer {
  box-sizing: border-box; }

input {
  margin: 0 !important; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  margin: 0; }

h1 {
  font-size: 5.6rem; }

h2 {
  font-size: 4.8rem; }

h3 {
  font-size: 3.2rem; }

h4 {
  font-size: 2.4rem; }

h5 {
  font-size: 2rem; }

h6 {
  font-size: 1.6rem; }

a {
  text-decoration: none; }

button, a {
  cursor: pointer; }

ul, figure {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

.app-badge {
  background-color: #333f52;
  border-radius: 0.4rem;
  color: #fffffc;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 1.5px;
  padding: 0.8rem 1.6rem; }

.app-badge_bold {
  font-weight: 300; }

.app-badge_light {
  font-weight: 200; }

.app-badge_lighter {
  font-weight: 100; }

.app-badge_success {
  background-color: #09c199; }

.app-badge_error {
  background-color: #ed1846; }

.app-badge_default {
  background-color: rgba(51, 63, 82, 0.7); }

.app-badge_primary {
  background-color: #ed1846; }

.app-badge_warn {
  background-color: #f39c12; }

.app-badge_bright {
  background-color: #fffffc;
  color: #ed1846; }

.app-badge_transparent {
  background-color: transparent;
  border: 1px solid #ed1846;
  color: #ed1846; }

.app-button {
  align-items: center;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  font-size: 1.6rem;
  font-weight: 200;
  height: 4rem;
  justify-content: center;
  letter-spacing: 0.8px;
  padding: 0 2.4rem;
  text-transform: uppercase;
  transition: opacity 0.2s ease-out;
  transition: transform 0.1s ease-in, box-shadow 0.1s ease-in; }

.app-button[aria-disabled="true"] {
  background-color: #c5d0de;
  background-color: var(--color-default-light);
  color: rgba(51, 63, 82, 0.7);
  color: var(--color-default);
  pointer-events: none; }

.app-button .material-icons {
  margin: 0; }

.app-button:hover {
  outline: none;
  box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
  transform: scale(1.01); }

.app-button:hover,
.app-button:active,
.app-button:focus {
  transform: scale(1.01); }

.app-button:hover {
  background-image: none; }

.app-button:focus {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); }

.app-button_md {
  height: 4.8rem;
  padding: 0 2.4rem; }

.app-button_md i {
  font-size: 2.4rem;
  margin-right: 0.4rem; }

.app-button_lg {
  height: 5.6rem; }

.app-button_stretch {
  width: 100%; }

.app-button_primary,
.app-button_primary:hover,
.app-button_primary:focus {
  background-color: #ed1846;
  background-color: var(--color-primary);
  color: #fffffc;
  color: var(--color-bright); }

.app-button_bright,
.app-button_bright:hover,
.app-button_bright:focus {
  background-color: #fffffc;
  background-color: var(--color-bright);
  background-image: none;
  color: rgba(51, 63, 82, 0.7);
  color: var(--color-default); }

.app-button_default,
.app-button_default:hover,
.app-button_default:focus {
  background-color: #c5d0de;
  background-color: var(--color-bg-default);
  color: #fffffc;
  color: var(--color-bright); }

.app-button_success,
.app-button_success:hover,
.app-button_success:focus {
  background-color: #09c199;
  background-color: var(--color-success);
  color: #fffffc;
  color: var(--color-bright); }

.app-button_dark,
.app-button_dark:hover,
.app-button_dark:focus {
  background-color: #333f52;
  background-color: var(--color-dark);
  color: #fffffc;
  color: var(--color-bright); }

.app-button_warn,
.app-button_warn:hover,
.app-button_warn:focus {
  background-color: #f39c12;
  background-color: var(--color-warn);
  color: #fffffc;
  color: var(--color-bright); }

.app-button_flat,
.app-button_flat:hover,
.app-button_flat:focus,
.app-button_flat:active {
  box-shadow: none; }

.app-button_transparent,
.app-button_transparent:focus,
.app-button_transparent:active {
  background: none;
  background-color: transparent;
  color: #ed1846;
  color: var(--color-primary); }

.app-button_transparent:focus {
  opacity: 0.7;
  transform: scale(1.1); }

.app-button_plain {
  background: none;
  background-color: transparent;
  color: rgba(51, 63, 82, 0.7);
  color: var(--color-default); }

/* Floating Button */
.app-button_round {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 4.8rem;
  justify-content: center;
  padding: 0;
  width: 4.8rem; }

.app-button_round.lg {
  height: 6rem;
  width: 6rem; }

.app-button_inline {
  height: auto;
  margin: 0;
  padding: 0; }

.app-calendar .Cal__Day__selection {
  background-color: #ed1846 !important;
  border-color: #ed1846 !important; }

.app-card {
  background: #fffffc;
  background: var(--color-bright);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 2.4rem;
  overflow: hidden;
  position: relative; }

.app-card-content {
  padding: 2.4rem 1.6rem;
  position: relative; }

@media (--viewport-sm) {
  .app-card-content {
    padding: 2.4rem; } }

.app-card-title {
  align-items: center;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  padding: 0 1.6rem;
  height: 4.0rem;
  position: relative; }

@media (--viewport-sm) {
  .app-card-title {
    padding: 0 2.4rem; } }

.app-card-actions {
  align-items: center;
  display: flex;
  height: 4.0rem;
  right: 1.6rem;
  top: 0;
  position: absolute; }

@media (--viewport-sm) {
  .app-card-actions {
    right: 1.6rem; } }

.app-card-actions__button {
  padding: 0; }

.app-chart-tooltip {
  background: #fffffc;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(51, 63, 82, 0.7);
  padding: 0.8rem 2.4rem 0.8rem 1.6rem; }

.app-chart-tooltip-header {
  margin-bottom: 0.8rem; }

.app-line-chart {
  margin-left: -1.6rem;
  padding-bottom: 1.6rem;
  padding-top: 1.6rem;
  width: calc(100% + 1.6rem); }

.app-line-chart .recharts-legend-wrapper {
  bottom: -1.6rem !important; }

.app-line-chart .recharts-legend-item {
  font-size: 1.4rem;
  color: #333f52;
  margin-right: 3.2rem !important; }

.recharts-layer.recharts-cartesian-axis-tick {
  font-size: 1.4rem; }

.recharts-layer.recharts-cartesian-axis.recharts-xAxis.xAxis .recharts-layer.recharts-cartesian-axis-tick text {
  transform: translateY(0.8rem); }

.recharts-surface {
  overflow: visible !important; }

:root {
  --color-primary: #ed1846;
  --color-primary-85: rgba(237, 24, 70, 0.85);
  --color-primary-70: rgba(237, 24, 70, 0.7);
  --color-primary-55: rgba(237, 24, 70, 0.55);
  --color-primary-40: rgba(237, 24, 70, 0.4);
  --color-primary-25: rgba(237, 24, 70, 0.25);
  --color-primary-10: rgba(237, 24, 70, 0.1);
  --color-success: #09c199;
  --color-success-85: rgba(9, 193, 153, 0.85);
  --color-success-70: rgba(9, 193, 153, 0.7);
  --color-success-55: rgba(9, 193, 153, 0.55);
  --color-success-40: rgba(9, 193, 153, 0.4);
  --color-success-25: rgba(9, 193, 153, 0.25);
  --color-success-10: rgba(9, 193, 153, 0.1);
  --color-dark: #333f52;
  --color-dark-85: rgba(51, 63, 82, 0.85);
  --color-dark-70: rgba(51, 63, 82, 0.7);
  --color-dark-55: rgba(51, 63, 82, 0.55);
  --color-dark-40: rgba(51, 63, 82, 0.4);
  --color-dark-25: rgba(51, 63, 82, 0.25);
  --color-dark-10: rgba(51, 63, 82, 0.1);
  --color-bright: #fffffc;
  --color-bright-85: rgba(255, 255, 252, 0.85);
  --color-bright-70: rgba(255, 255, 252, 0.7);
  --color-bright-55: rgba(255, 255, 252, 0.55);
  --color-bright-40: rgba(255, 255, 252, 0.4);
  --color-bright-25: rgba(255, 255, 252, 0.25);
  --color-bright-10: rgba(255, 255, 252, 0.1);
  --color-default-light: #c5d0de;
  --color-default-light-85: rgba(197, 208, 222, 0.85);
  --color-default-light-70: rgba(197, 208, 222, 0.7);
  --color-default-light-55: rgba(197, 208, 222, 0.55);
  --color-default-light-40: rgba(197, 208, 222, 0.4);
  --color-default-light-25: rgba(197, 208, 222, 0.25);
  --color-default-light-10: rgba(197, 208, 222, 0.1);
  --color-error: #f39c12;
  --color-warn: #f39c12;
  --color-default: var(--color-dark-70);
  --color-bg-default: #c5d0de;
  --color-bg-gray: #c5d0de;
  --horizontal-shadow-z1: 2px 0 4px 0 rgba(0, 0, 0, 0.2);
  --horizontal-shadow-z2: 9px 0 13px 0 rgba(0, 0, 0, 0.2);
  --shadow-z0: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-z1: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  --shadow-z2: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
  --shadow-z3: 0 9px 13px 0 rgba(0, 0, 0, 0.2);
  --screen-iph-retina: 320px;
  --screen-xs: 480px;
  --screen-sm: 768px;
  --screen-lg: 992px;
  --screen-lg: 1200px;
  --font-display-h1: 5.6rem;
  --font-display-h2: 4.8rem;
  --font-display-h3: 3.2rem;
  --font-headline: 2.4rem;
  --font-title: 2rem;
  --font-subheading: 1.6rem;
  --font-body: 1.4rem;
  --font-caption: 1.2rem;
  --font-button: 1.4rem;
  --opacity-100: 100%;
  --opacity-70: 0.7;
  --opacity-55: 0.55;
  --opacity-40: 0.4;
  --opacity-25: 0.25;
  --opacity-10: 0.1;
  --transition-snap: cubic-bezier(0.86, 0, 0.07, 1); }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-Bold.ttf");
  font-weight: 600; }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-Book.ttf");
  font-weight: 300; }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-Light.ttf");
  font-weight: 200; }

@font-face {
  font-family: 'Verlag';
  src: url("/assets/webfonts/Verlag-XLight.ttf");
  font-weight: 100; }

html {
  font-family: 'Verlag', Roboto, 'open-sans', Helvetica;
  font-size: 62.5% !important;
  font-weight: 300;
  min-width: 320px; }

div, p, input, label, a, span, div, article, main, section, header, footer {
  box-sizing: border-box; }

input {
  margin: 0 !important; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  margin: 0; }

h1 {
  font-size: 5.6rem; }

h2 {
  font-size: 4.8rem; }

h3 {
  font-size: 3.2rem; }

h4 {
  font-size: 2.4rem; }

h5 {
  font-size: 2rem; }

h6 {
  font-size: 1.6rem; }

a {
  text-decoration: none; }

button, a {
  cursor: pointer; }

ul, figure {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

.app-lc-custom-tooltip {
  background: #fffffc;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(51, 63, 82, 0.7);
  padding: 0.8rem 2.4rem 0.8rem 1.6rem; }

.app-lc-custom-tooltip__line {
  margin: 0.8rem 0; }

.app-collapse {
  background-color: #fffffc;
  overflow: hidden;
  position: relative; }

.app-collapse_card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  margin-top: 0.8rem;
  transition: box-shadow 0.3s cubic-bezier(0.86, 0, 0.07, 1), margin 0.3s cubic-bezier(0.86, 0, 0.07, 1); }

.app-collapse_card .app-collapse-header {
  border-bottom: 1px solid rgba(197, 208, 222, 0.25); }

.app-collapse_opened.app-collapse_card {
  box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 1.6rem; }

.app-collapse-header {
  align-items: center;
  display: flex;
  height: 6.4rem;
  position: relative;
  padding: 0 2.4rem; }

.app-collapse-header__toggler {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0; }

.app-icon {
  font-size: 2.4rem;
  line-height: 2.4rem; }

.app-icon_sm {
  font-size: 1.6rem;
  line-height: 1.6rem; }

.app-icon_lg {
  font-size: 3.2rem;
  line-height: 3.2rem; }

.app-icon_default {
  color: rgba(51, 63, 82, 0.7);
  color: var(--color-default); }

.app-icon_primary {
  color: #ed1846;
  color: var(--color-primary); }

.app-icon_warn {
  color: #f39c12;
  color: var(--color-warn); }

.app-icon_dark {
  color: #333f52;
  color: var(--color-dark); }

.app-icon_success {
  color: #09c199;
  color: var(--color-success); }

.app-icon_error {
  color: #f39c12;
  color: var(--color-error); }

.app-icon_bright {
  color: #fffffc;
  color: var(--color-bright); }

.app-collapse-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  width: 100%; }

.app-collapse-content_opened {
  max-height: 700px; }

.app-collapse-content__block {
  padding: 2.4rem; }

.app-drawer {
  background-color: white;
  bottom: 0;
  left: 0;
  padding: 2.4rem;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 300; }

.app-drawer_closed {
  transform: translateX(100%); }

.app-drawer_opened {
  transform: translateX(0); }

.app-drawer-container {
  position: relative; }

.app-block-error {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  justify-content: center; }

.app-block-error__title {
  font-size: 2.4rem;
  font-weight: 300;
  margin: 0 0 1.6rem 0; }

.app-block-error__message {
  font-size: 1.6rem;
  font-weight: 300;
  margin: 0; }

.app-error-card__content {
  padding: 8.0rem 2.4rem 8.0rem 2.4rem;
  text-align: center; }

.app-error-card__title {
  font-size: 2.4rem;
  font-weight: 300;
  margin: 0 0 1.6rem 0; }

.app-error-card__message {
  font-size: 1.6rem;
  font-weight: 300;
  margin: 0; }

.app-hint {
  border: 1px dashed #ccc;
  padding: 2.4rem; }

.app-hint__header {
  margin-bottom: 1.6rem; }

.app-typography_title {
  font-size: 2rem;
  font-size: var(--font-title);
  letter-spacing: 0.6px; }

.app-typography_bold {
  font-weight: 300; }

.app-typography_light {
  font-weight: 200; }

.app-typography_lighter {
  font-weight: 100; }

#nprogress .bar {
  background-color: #ed1846;
  background-color: var(--color-primary);
  z-index: 5000; }

#nprogress .peg {
  box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary);
  box-shadow: 0 0 10px #ed1846, 0 0 5px #ed1846; }

#nprogress .spinner-icon {
  border-top-color: var(--color-primary);
  border-top-color: #ed1846;
  border-left-color: var(--color-primary);
  border-left-color: #ed1846; }

.app-nav-link {
  align-items: center;
  color: #ed1846;
  color: var(--color-primary);
  display: flex;
  font-size: 1.6rem;
  font-weight: 300;
  justify-content: center;
  letter-spacing: 0.6px;
  padding: 0 4.0rem;
  height: 100%;
  width: 100%; }

.app-nav-link.active {
  border-bottom: 2px solid var(#ed1846);
  border-bottom: 2px solid var(--color-primary); }

.app-query-link {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  margin: 0.8rem 0 2.4rem 0; }

.app-query-link__list {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  margin-left: 1.6rem; }

.app-query-link_end {
  justify-content: flex-end; }

.app-query-link_start {
  justify-content: flex-start; }

.app-query-link-item .app-nav-link {
  color: rgba(51, 63, 82, 0.7);
  color: var(--color-default);
  padding: 0.4rem 1.6rem; }

.app-query-link-item_selected .app-nav-link {
  color: #ed1846;
  color: var(--color-primary);
  border-bottom: 2px solid #ed1846;
  border-bottom: 2px solid var(--color-primary); }

.app-tabs {
  align-items: center;
  background-color: #fffffc;
  background-color: var(--color-bright);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-z1);
  display: flex;
  height: 5.6rem;
  justify-content: flex-start;
  position: relative;
  z-index: 1000; }

.app-tabs__item {
  height: 100%; }

.app-tabs__item .app-nav-link {
  color: #333f52;
  color: var(--color-dark); }

.app-toggler-content {
  background-color: #fffffc;
  background-color: var(--color-bright);
  box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-z2);
  left: 0;
  max-width: 450px;
  opacity: 0;
  overflow-x: scroll;
  position: absolute;
  padding: 2.4rem;
  top: calc(100% + 0.4rem);
  visibility: hidden;
  width: 100%; }

.app-toggler-content_opened {
  visibility: visible;
  opacity: 1; }

.app-toggler {
  position: relative;
  z-index: 500; }

.app-traffic-lights {
  display: inline-flex;
  flex-flow: row nowrap; }

.app-traffic-lights_left {
  align-items: center;
  flex-flow: row;
  justify-content: flex-start; }

.app-traffic-lights_right {
  align-items: center;
  flex-flow: row-reverse;
  justify-content: flex-start; }

.app-traffic-lights_top {
  align-items: center;
  flex-flow: column;
  justify-content: center; }

.app-traffic-lights_bottom {
  align-items: center;
  flex-flow: column-reverse;
  justify-content: center; }

.app-traffic-lights__value {
  background-color: rgba(51, 63, 82, 0.7);
  background-color: var(--color-default);
  border-radius: 50%;
  height: 1.2rem;
  width: 1.2rem; }

.app-traffic-lights_left .app-traffic-lights__value {
  margin-right: 8px; }

.app-traffic-lights_right .app-traffic-lights__value {
  margin-left: 8px; }

.app-traffic-lights_top .app-traffic-lights__label,
.app-traffic-lights_bottom .app-traffic-lights__label {
  text-align: center; }

.app-traffic-lights_top .app-traffic-lights__value {
  margin-bottom: 4px; }

.app-traffic-lights_bottom .app-traffic-lights__value {
  margin-top: 4px; }

.app-traffic-lights__value_normal {
  background-color: #09c199;
  background-color: var(--color-success); }

.app-traffic-lights__value_deviation {
  background-color: #f39c12;
  background-color: var(--color-warn); }

.app-traffic-lights__value_critical {
  background-color: #ed1846;
  background-color: var(--color-primary); }

.app-typography_body {
  font-size: 1.4rem;
  font-size: var(--font-body); }

.app-caption {
  font-size: 1.2rem;
  font-size: var(--font-caption); }

.app-typography_h1 {
  font-size: 5.6rem;
  font-size: var(--font-display-h1); }

.app-typography_h2 {
  font-size: 4.8rem;
  font-size: var(--font-display-h2); }

.app-typography_h3 {
  font-size: 3.2rem;
  font-size: var(--font-display-h3); }

.app-typography_headline {
  font-size: 2.4rem;
  font-size: var(--font-headline); }

.app-typography_subheading {
  font-size: 1.6rem;
  font-size: var(--font-subheading); }


/*# sourceMappingURL=style.css.map*/