[hidden] {
  display: none !important;
}

:host {
  position: relative;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:root {
  --mdc-theme-primary: #6200ee;
  --mdc-theme-secondary: #018786;
  --mdc-theme-background: #fff;
  --mdc-theme-surface: #fff;
  --mdc-theme-error: #b00020;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
  --mdc-theme-on-surface: #000;
  --mdc-theme-on-error: #fff;
  --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-dark: white;
  --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
}

.mdc-theme--primary {
  color: #6200ee !important;
  /* @alternate */
  color: var(--mdc-theme-primary, #6200ee) !important;
}

.mdc-theme--secondary {
  color: #018786 !important;
  /* @alternate */
  color: var(--mdc-theme-secondary, #018786) !important;
}

.mdc-theme--background {
  background-color: #fff;
  /* @alternate */
  background-color: var(--mdc-theme-background, #fff);
}

.mdc-theme--surface {
  background-color: #fff;
  /* @alternate */
  background-color: var(--mdc-theme-surface, #fff);
}

.mdc-theme--error {
  color: #b00020 !important;
  /* @alternate */
  color: var(--mdc-theme-error, #b00020) !important;
}

.mdc-theme--on-primary {
  color: #fff !important;
  /* @alternate */
  color: var(--mdc-theme-on-primary, #fff) !important;
}

.mdc-theme--on-secondary {
  color: #fff !important;
  /* @alternate */
  color: var(--mdc-theme-on-secondary, #fff) !important;
}

.mdc-theme--on-surface {
  color: #000 !important;
  /* @alternate */
  color: var(--mdc-theme-on-surface, #000) !important;
}

.mdc-theme--on-error {
  color: #fff !important;
  /* @alternate */
  color: var(--mdc-theme-on-error, #fff) !important;
}

.mdc-theme--text-primary-on-background {
  color: rgba(0, 0, 0, 0.87) !important;
  /* @alternate */
  color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)) !important;
}

.mdc-theme--text-secondary-on-background {
  color: rgba(0, 0, 0, 0.54) !important;
  /* @alternate */
  color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54)) !important;
}

.mdc-theme--text-hint-on-background {
  color: rgba(0, 0, 0, 0.38) !important;
  /* @alternate */
  color: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38)) !important;
}

.mdc-theme--text-disabled-on-background {
  color: rgba(0, 0, 0, 0.38) !important;
  /* @alternate */
  color: var(--mdc-theme-text-disabled-on-background, rgba(0, 0, 0, 0.38)) !important;
}

.mdc-theme--text-icon-on-background {
  color: rgba(0, 0, 0, 0.38) !important;
  /* @alternate */
  color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38)) !important;
}

.mdc-theme--text-primary-on-light {
  color: rgba(0, 0, 0, 0.87) !important;
  /* @alternate */
  color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)) !important;
}

.mdc-theme--text-secondary-on-light {
  color: rgba(0, 0, 0, 0.54) !important;
  /* @alternate */
  color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54)) !important;
}

.mdc-theme--text-hint-on-light {
  color: rgba(0, 0, 0, 0.38) !important;
  /* @alternate */
  color: var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38)) !important;
}

.mdc-theme--text-disabled-on-light {
  color: rgba(0, 0, 0, 0.38) !important;
  /* @alternate */
  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)) !important;
}

.mdc-theme--text-icon-on-light {
  color: rgba(0, 0, 0, 0.38) !important;
  /* @alternate */
  color: var(--mdc-theme-text-icon-on-light, rgba(0, 0, 0, 0.38)) !important;
}

.mdc-theme--text-primary-on-dark {
  color: white !important;
  /* @alternate */
  color: var(--mdc-theme-text-primary-on-dark, white) !important;
}

.mdc-theme--text-secondary-on-dark {
  color: rgba(255, 255, 255, 0.7) !important;
  /* @alternate */
  color: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7)) !important;
}

.mdc-theme--text-hint-on-dark {
  color: rgba(255, 255, 255, 0.5) !important;
  /* @alternate */
  color: var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5)) !important;
}

.mdc-theme--text-disabled-on-dark {
  color: rgba(255, 255, 255, 0.5) !important;
  /* @alternate */
  color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)) !important;
}

.mdc-theme--text-icon-on-dark {
  color: rgba(255, 255, 255, 0.5) !important;
  /* @alternate */
  color: var(--mdc-theme-text-icon-on-dark, rgba(255, 255, 255, 0.5)) !important;
}

.mdc-theme--primary-bg {
  background-color: #6200ee !important;
  /* @alternate */
  background-color: var(--mdc-theme-primary, #6200ee) !important;
}

.mdc-theme--secondary-bg {
  background-color: #018786 !important;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786) !important;
}

/**
 * @prop --color: The gauge value color (default: text)
 * @prop --background-color: The gauge background color (default: surface)
 * @prop --header-color: The gauge header text color (default: --color)
 * @prop --header-icon-color: The gauge header icon color (default: --header-color)
 * @prop --info-button-color: The info button color (default: --flow-color-step-400)
 * @prop --units-color: The gauge background color (default: --color)
 * @prop --flow-gauge-value-font-size: The gauge value font size. (Default: 30px)
 * @prop --flow-gauge-units-font-size: The gauge units font size. (Default: 13px)
 * @prop --flow-gauge-header-font-size: The gauge header font size. (Default: 14px)
 */
:host {
  display: inline-flex;
  flex-direction: column;
  --color: var(--flow-color-text, #000000);
  --background-color: var(--flow-color-surface, #f2f2f2);
  --header-color: var(--flow-color-text, #000000);
  --header-icon-color: var(--header-color);
  --units-color: var(--flow-color-text, #000000);
  --info-button-color: var(--flow-color-step-300, #b3b3b3);
  background-color: var(--background-color);
}

.flow-gauge__info-icon {
  position: relative;
  top: 2px;
  margin-right: 6px;
}

.flow-gauge__header {
  color: var(--header-color);
  height: 30px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
  font-size: var(--flow-gauge-header-font-size, 14px);
}

.flow-gauge__header-icon {
  color: var(--header-icon-color);
  margin-right: 6px;
  font-size: 16px;
}

.flow-gauge__header-button {
  --color: var(--info-button-color);
  margin-left: auto;
  margin-right: -8px;
}

.flow-gauge__header-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-gauge__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 6px;
  padding-bottom: 30px;
}

.flow-gauge__data-value, .flow-gauge__units {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.flow-gauge__data-value {
  color: var(--color);
  font-size: var(--flow-gauge-value-font-size, 30px);
  font-weight: bold;
}

:host(.flow-color) .flow-gauge__data-value {
  color: var(--flow-color-base);
}

.flow-gauge__units {
  color: var(--units-color);
  font-size: var(--flow-gauge-units-font-size, 13px);
  margin-top: 2px;
  font-weight: 100;
  letter-spacing: 0.3px;
}