/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500);
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss?ngGlobalStyle ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Angular Material */
.mat-ripple {
  overflow: hidden;
  position: relative;
}
.mat-ripple:not(:empty) {
  transform: translateZ(0);
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible;
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale3d(0, 0, 0);
  background-color: var(--mat-ripple-color, rgba(0, 0, 0, 0.1));
}
.cdk-high-contrast-active .mat-ripple-element {
  display: none;
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0;
}
[dir=rtl] .cdk-visually-hidden {
  left: auto;
  right: 0;
}

.cdk-overlay-container, .cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}
.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0.6;
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.cdk-overlay-transparent-backdrop {
  transition: visibility 1ms linear, opacity 1ms linear;
  visibility: hidden;
  opacity: 1;
}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
  visibility: visible;
}

.cdk-overlay-backdrop-noop-animation {
  transition: none;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

textarea.cdk-textarea-autosize {
  resize: none;
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: auto !important;
  overflow: hidden !important;
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: 0 !important;
}

@keyframes cdk-text-field-autofill-start { /*!*/ }
@keyframes cdk-text-field-autofill-end { /*!*/ }
.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms;
}

.mat-focus-indicator {
  position: relative;
}
.mat-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-focus-indicator-display, none);
  border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
  border-radius: var(--mat-focus-indicator-border-radius, 4px);
}
.mat-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-focus-indicator-display: block;
}

.mat-mdc-focus-indicator {
  position: relative;
}
.mat-mdc-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-mdc-focus-indicator-display, none);
  border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
  border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px);
}
.mat-mdc-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-mdc-focus-indicator-display: block;
}

.mat-app-background {
  background-color: var(--mat-app-background-color, transparent);
  color: var(--mat-app-text-color, inherit);
}

html {
  --mat-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-option-selected-state-label-text-color: var(--hx-prim-500);
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

.mat-accent {
  --mat-option-selected-state-label-text-color: var(--hx-accent-400);
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

.mat-warn {
  --mat-option-selected-state-label-text-color: var(--hx-alert-400);
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

html {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
}

.mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-prim-500);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-prim-500);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

html {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-accent-400);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-accent-400);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

.mat-accent {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-accent-400);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-accent-400);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

.mat-warn {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-alert-400);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-alert-400);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

html {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
}

.mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 {
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 {
  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 {
  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 {
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.mat-theme-loaded-marker {
  display: none;
}

html {
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;
  --mdc-outlined-card-outline-width: 1px;
}

html {
  --mdc-elevated-card-container-color: white;
  --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-color: white;
  --mdc-outlined-card-outline-color: rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
}

html {
  --mdc-linear-progress-active-indicator-height: 4px;
  --mdc-linear-progress-track-height: 4px;
  --mdc-linear-progress-track-shape: 0;
}

.mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: var(--hx-prim-500);
  --mdc-linear-progress-track-color: var(--hx-prim-500);
}
.mat-mdc-progress-bar.mat-accent {
  --mdc-linear-progress-active-indicator-color: var(--hx-accent-400);
  --mdc-linear-progress-track-color: var(--hx-accent-400);
}
.mat-mdc-progress-bar.mat-warn {
  --mdc-linear-progress-active-indicator-color: var(--hx-alert-400);
  --mdc-linear-progress-track-color: var(--hx-alert-400);
}

html {
  --mdc-plain-tooltip-container-shape: 4px;
  --mdc-plain-tooltip-supporting-text-line-height: 16px;
}

html {
  --mdc-plain-tooltip-container-color: #616161;
  --mdc-plain-tooltip-supporting-text-color: #fff;
}

html {
  --mdc-filled-text-field-active-indicator-height: 1px;
  --mdc-filled-text-field-focus-active-indicator-height: 2px;
  --mdc-filled-text-field-container-shape: 4px;
  --mdc-outlined-text-field-outline-width: 1px;
  --mdc-outlined-text-field-focus-outline-width: 2px;
  --mdc-outlined-text-field-container-shape: 4px;
}

html {
  --mdc-filled-text-field-caret-color: var(--hx-prim-500);
  --mdc-filled-text-field-focus-active-indicator-color: var(--hx-prim-500);
  --mdc-filled-text-field-focus-label-text-color: var(--hx-prim-500);
  --mdc-filled-text-field-container-color: whitesmoke;
  --mdc-filled-text-field-disabled-container-color: #fafafa;
  --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-filled-text-field-input-text-color: rgba(0, 0, 0, 0.87);
  --mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38);
  --mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-error-hover-label-text-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-focus-label-text-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-label-text-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-caret-color: var(--hx-alert-400);
  --mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, 0.42);
  --mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, 0.06);
  --mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mdc-filled-text-field-error-active-indicator-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-focus-active-indicator-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-hover-active-indicator-color: var(--hx-alert-400);
  --mdc-outlined-text-field-caret-color: var(--hx-prim-500);
  --mdc-outlined-text-field-focus-outline-color: var(--hx-prim-500);
  --mdc-outlined-text-field-focus-label-text-color: var(--hx-prim-500);
  --mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, 0.87);
  --mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-error-caret-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-focus-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-hover-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.06);
  --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mdc-outlined-text-field-error-focus-outline-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-hover-outline-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-outline-color: var(--hx-alert-400);
  --mat-form-field-focus-select-arrow-color: var(--hx-prim-500);
  --mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: var(--hx-alert-400);
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.08;
}

.mat-mdc-form-field.mat-accent {
  --mdc-filled-text-field-caret-color: var(--hx-accent-400);
  --mdc-filled-text-field-focus-active-indicator-color: var(--hx-accent-400);
  --mdc-filled-text-field-focus-label-text-color: var(--hx-accent-400);
  --mdc-outlined-text-field-caret-color: var(--hx-accent-400);
  --mdc-outlined-text-field-focus-outline-color: var(--hx-accent-400);
  --mdc-outlined-text-field-focus-label-text-color: var(--hx-accent-400);
  --mat-form-field-focus-select-arrow-color: var(--hx-accent-400);
}

.mat-mdc-form-field.mat-warn {
  --mdc-filled-text-field-caret-color: var(--hx-alert-400);
  --mdc-filled-text-field-focus-active-indicator-color: var(--hx-alert-400);
  --mdc-filled-text-field-focus-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-caret-color: var(--hx-alert-400);
  --mdc-outlined-text-field-focus-outline-color: var(--hx-alert-400);
  --mdc-outlined-text-field-focus-label-text-color: var(--hx-alert-400);
  --mat-form-field-focus-select-arrow-color: var(--hx-alert-400);
}

html {
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;
}

html {
  --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: var(--hx-prim-500);
  --mat-select-invalid-arrow-color: var(--hx-alert-400);
}
html .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: var(--hx-accent-400);
  --mat-select-invalid-arrow-color: var(--hx-alert-400);
}
html .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: var(--hx-alert-400);
  --mat-select-invalid-arrow-color: var(--hx-alert-400);
}

html {
  --mat-select-arrow-transform: translateY(-8px);
}

html {
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-autocomplete-background-color: white;
}

html {
  --mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mdc-dialog-container-shadow-color: #000;
  --mdc-dialog-container-shape: 4px;
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
}

html {
  --mdc-dialog-container-color: white;
  --mdc-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mdc-dialog-supporting-text-color: rgba(0, 0, 0, 0.6);
}

.mat-mdc-standard-chip {
  --mdc-chip-container-shape-family: rounded;
  --mdc-chip-container-shape-radius: 16px 16px 16px 16px;
  --mdc-chip-with-avatar-avatar-shape-family: rounded;
  --mdc-chip-with-avatar-avatar-shape-radius: 14px 14px 14px 14px;
  --mdc-chip-with-avatar-avatar-size: 28px;
  --mdc-chip-with-icon-icon-size: 18px;
  --mdc-chip-outline-width: 0;
  --mdc-chip-outline-color: transparent;
  --mdc-chip-disabled-outline-color: transparent;
  --mdc-chip-focus-outline-color: transparent;
  --mdc-chip-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-avatar-disabled-avatar-opacity: 1;
  --mdc-chip-flat-selected-outline-width: 0;
  --mdc-chip-selected-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
  --mdc-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
}

.mat-mdc-standard-chip {
  --mdc-chip-disabled-label-text-color: #212121;
  --mdc-chip-elevated-container-color: #e0e0e0;
  --mdc-chip-elevated-selected-container-color: #e0e0e0;
  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
  --mdc-chip-flat-disabled-selected-container-color: #e0e0e0;
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #212121;
  --mdc-chip-selected-label-text-color: #212121;
  --mdc-chip-with-icon-icon-color: #212121;
  --mdc-chip-with-icon-disabled-icon-color: #212121;
  --mdc-chip-with-icon-selected-icon-color: #212121;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #212121;
  --mat-chip-selected-disabled-trailing-icon-color: #212121;
  --mat-chip-selected-trailing-icon-color: #212121;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mdc-chip-disabled-label-text-color: var(--hx-normal--dark);
  --mdc-chip-elevated-container-color: var(--hx-prim-500);
  --mdc-chip-elevated-selected-container-color: var(--hx-prim-500);
  --mdc-chip-elevated-disabled-container-color: var(--hx-prim-500);
  --mdc-chip-flat-disabled-selected-container-color: var(--hx-prim-500);
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: var(--hx-normal--dark);
  --mdc-chip-selected-label-text-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-disabled-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-selected-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-trailing-icon-color: var(--hx-normal--dark);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mdc-chip-disabled-label-text-color: var(--hx-normal--dark);
  --mdc-chip-elevated-container-color: var(--hx-accent-400);
  --mdc-chip-elevated-selected-container-color: var(--hx-accent-400);
  --mdc-chip-elevated-disabled-container-color: var(--hx-accent-400);
  --mdc-chip-flat-disabled-selected-container-color: var(--hx-accent-400);
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: var(--hx-normal--dark);
  --mdc-chip-selected-label-text-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-disabled-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-selected-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-trailing-icon-color: var(--hx-normal--dark);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mdc-chip-disabled-label-text-color: var(--hx-normal--dark);
  --mdc-chip-elevated-container-color: var(--hx-alert-400);
  --mdc-chip-elevated-selected-container-color: var(--hx-alert-400);
  --mdc-chip-elevated-disabled-container-color: var(--hx-alert-400);
  --mdc-chip-flat-disabled-selected-container-color: var(--hx-alert-400);
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: var(--hx-normal--dark);
  --mdc-chip-selected-label-text-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-disabled-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-selected-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-trailing-icon-color: var(--hx-normal--dark);
}

.mat-mdc-chip.mat-mdc-standard-chip {
  --mdc-chip-container-height: 32px;
}

html {
  --mdc-switch-disabled-selected-icon-opacity: 0.38;
  --mdc-switch-disabled-track-opacity: 0.12;
  --mdc-switch-disabled-unselected-icon-opacity: 0.38;
  --mdc-switch-handle-height: 20px;
  --mdc-switch-handle-shape: 10px;
  --mdc-switch-handle-width: 20px;
  --mdc-switch-selected-icon-size: 18px;
  --mdc-switch-track-height: 14px;
  --mdc-switch-track-shape: 7px;
  --mdc-switch-track-width: 36px;
  --mdc-switch-unselected-icon-size: 18px;
  --mdc-switch-selected-focus-state-layer-opacity: 0.12;
  --mdc-switch-selected-hover-state-layer-opacity: 0.04;
  --mdc-switch-selected-pressed-state-layer-opacity: 0.1;
  --mdc-switch-unselected-focus-state-layer-opacity: 0.12;
  --mdc-switch-unselected-hover-state-layer-opacity: 0.04;
  --mdc-switch-unselected-pressed-state-layer-opacity: 0.1;
  --mat-switch-disabled-selected-handle-opacity: 0.38;
  --mat-switch-disabled-unselected-handle-opacity: 0.38;
  --mat-switch-unselected-handle-size: 20px;
  --mat-switch-selected-handle-size: 20px;
  --mat-switch-pressed-handle-size: 20px;
  --mat-switch-with-icon-handle-size: 20px;
  --mat-switch-selected-handle-horizontal-margin: 0;
  --mat-switch-selected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-selected-pressed-handle-horizontal-margin: 0;
  --mat-switch-unselected-handle-horizontal-margin: 0;
  --mat-switch-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-unselected-pressed-handle-horizontal-margin: 0;
  --mat-switch-visible-track-opacity: 1;
  --mat-switch-hidden-track-opacity: 1;
  --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-switch-track-outline-width: 1px;
  --mat-switch-track-outline-color: transparent;
  --mat-switch-selected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-color: transparent;
}

html {
  --mdc-switch-disabled-selected-handle-color: #424242;
  --mdc-switch-disabled-selected-icon-color: #fff;
  --mdc-switch-disabled-selected-track-color: #424242;
  --mdc-switch-disabled-unselected-handle-color: #424242;
  --mdc-switch-disabled-unselected-icon-color: #fff;
  --mdc-switch-disabled-unselected-track-color: #424242;
  --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
  --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-handle-shadow-color: black;
  --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-selected-icon-color: #fff;
  --mdc-switch-unselected-focus-handle-color: #212121;
  --mdc-switch-unselected-focus-state-layer-color: #424242;
  --mdc-switch-unselected-focus-track-color: #e0e0e0;
  --mdc-switch-unselected-handle-color: #616161;
  --mdc-switch-unselected-hover-handle-color: #212121;
  --mdc-switch-unselected-hover-state-layer-color: #424242;
  --mdc-switch-unselected-hover-track-color: #e0e0e0;
  --mdc-switch-unselected-icon-color: #fff;
  --mdc-switch-unselected-pressed-handle-color: #212121;
  --mdc-switch-unselected-pressed-state-layer-color: #424242;
  --mdc-switch-unselected-pressed-track-color: #e0e0e0;
  --mdc-switch-unselected-track-color: #e0e0e0;
  --mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38);
}
html .mat-mdc-slide-toggle {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
html {
  --mdc-switch-state-layer-size: 40px;
}

html {
  --mdc-radio-disabled-selected-icon-opacity: 0.38;
  --mdc-radio-disabled-unselected-icon-opacity: 0.38;
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-radio-button {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-primary {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-pressed-icon-color: var(--hx-prim-500);
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: var(--hx-prim-500);
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}
.mat-mdc-radio-button.mat-accent {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-accent-400);
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: var(--hx-accent-400);
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}
.mat-mdc-radio-button.mat-warn {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-alert-400);
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: var(--hx-alert-400);
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}

html {
  --mdc-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}

html {
  --mat-slider-value-indicator-width: auto;
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mdc-slider-active-track-height: 6px;
  --mdc-slider-active-track-shape: 9999px;
  --mdc-slider-handle-height: 20px;
  --mdc-slider-handle-shape: 50%;
  --mdc-slider-handle-width: 20px;
  --mdc-slider-inactive-track-height: 4px;
  --mdc-slider-inactive-track-shape: 9999px;
  --mdc-slider-with-overlap-handle-outline-width: 1px;
  --mdc-slider-with-tick-marks-active-container-opacity: 0.6;
  --mdc-slider-with-tick-marks-container-shape: 50%;
  --mdc-slider-with-tick-marks-container-size: 2px;
  --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6;
}

html {
  --mdc-slider-handle-color: var(--hx-prim-500);
  --mdc-slider-focus-handle-color: var(--hx-prim-500);
  --mdc-slider-hover-handle-color: var(--hx-prim-500);
  --mdc-slider-active-track-color: var(--hx-prim-500);
  --mdc-slider-inactive-track-color: var(--hx-prim-500);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--hx-prim-500);
  --mdc-slider-with-tick-marks-active-container-color: var(--hx-normal--dark);
  --mdc-slider-disabled-active-track-color: #000;
  --mdc-slider-disabled-handle-color: #000;
  --mdc-slider-disabled-inactive-track-color: #000;
  --mdc-slider-label-container-color: #000;
  --mdc-slider-label-label-text-color: #fff;
  --mdc-slider-with-overlap-handle-outline-color: #fff;
  --mdc-slider-with-tick-marks-disabled-container-color: #000;
  --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-ripple-color: var(--hx-prim-500);
  --mat-slider-hover-state-layer-color: rgba(var(--hx-prim-500), 0.05);
  --mat-slider-focus-state-layer-color: rgba(var(--hx-prim-500), 0.2);
  --mat-slider-value-indicator-opacity: 0.6;
}
html .mat-accent {
  --mat-slider-ripple-color: var(--hx-accent-400);
  --mat-slider-hover-state-layer-color: rgba(var(--hx-accent-400), 0.05);
  --mat-slider-focus-state-layer-color: rgba(var(--hx-accent-400), 0.2);
  --mdc-slider-handle-color: var(--hx-accent-400);
  --mdc-slider-focus-handle-color: var(--hx-accent-400);
  --mdc-slider-hover-handle-color: var(--hx-accent-400);
  --mdc-slider-active-track-color: var(--hx-accent-400);
  --mdc-slider-inactive-track-color: var(--hx-accent-400);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--hx-accent-400);
  --mdc-slider-with-tick-marks-active-container-color: var(--hx-normal--dark);
}
html .mat-warn {
  --mat-slider-ripple-color: var(--hx-alert-400);
  --mat-slider-hover-state-layer-color: rgba(var(--hx-alert-400), 0.05);
  --mat-slider-focus-state-layer-color: rgba(var(--hx-alert-400), 0.2);
  --mdc-slider-handle-color: var(--hx-alert-400);
  --mdc-slider-focus-handle-color: var(--hx-alert-400);
  --mdc-slider-hover-handle-color: var(--hx-alert-400);
  --mdc-slider-active-track-color: var(--hx-alert-400);
  --mdc-slider-inactive-track-color: var(--hx-alert-400);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--hx-alert-400);
  --mdc-slider-with-tick-marks-active-container-color: var(--hx-normal--dark);
}

html {
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
}

html {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mdc-list-list-item-container-shape: 0;
  --mdc-list-list-item-leading-avatar-shape: 50%;
  --mdc-list-list-item-container-color: transparent;
  --mdc-list-list-item-selected-container-color: transparent;
  --mdc-list-list-item-leading-avatar-color: transparent;
  --mdc-list-list-item-leading-icon-size: 24px;
  --mdc-list-list-item-leading-avatar-size: 40px;
  --mdc-list-list-item-trailing-icon-size: 24px;
  --mdc-list-list-item-disabled-state-layer-color: transparent;
  --mdc-list-list-item-disabled-state-layer-opacity: 0;
  --mdc-list-list-item-disabled-label-text-opacity: 0.38;
  --mdc-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38;
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
}

html {
  --mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-disabled-label-text-color: black;
  --mdc-list-list-item-disabled-leading-icon-color: black;
  --mdc-list-list-item-disabled-trailing-icon-color: black;
  --mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-hover-state-layer-color: black;
  --mdc-list-list-item-hover-state-layer-opacity: 0.04;
  --mdc-list-list-item-focus-state-layer-color: black;
  --mdc-list-list-item-focus-state-layer-opacity: 0.12;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-pressed-icon-color: var(--hx-prim-500);
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-accent-400);
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-alert-400);
}

.mat-mdc-list-option {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-option.mat-accent {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-option.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text {
  color: var(--hx-prim-500);
}
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start {
  color: var(--hx-prim-500);
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}

html {
  --mdc-list-list-item-one-line-container-height: 48px;
  --mdc-list-list-item-two-line-container-height: 64px;
  --mdc-list-list-item-three-line-container-height: 88px;
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 72px;
}

html {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-paginator-container-size: 56px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
}

html {
  --mdc-tab-indicator-active-indicator-height: 2px;
  --mdc-tab-indicator-active-indicator-shape: 0;
  --mdc-secondary-navigation-tab-container-height: 48px;
  --mat-tab-header-divider-color: transparent;
  --mat-tab-header-divider-height: 0;
}

.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
  --mdc-tab-indicator-active-indicator-color: var(--hx-prim-500);
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: var(--hx-prim-500);
  --mat-tab-header-active-ripple-color: var(--hx-prim-500);
  --mat-tab-header-inactive-ripple-color: var(--hx-prim-500);
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: var(--hx-prim-500);
  --mat-tab-header-active-hover-label-text-color: var(--hx-prim-500);
  --mat-tab-header-active-focus-indicator-color: var(--hx-prim-500);
  --mat-tab-header-active-hover-indicator-color: var(--hx-prim-500);
}
.mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent {
  --mdc-tab-indicator-active-indicator-color: var(--hx-accent-400);
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: var(--hx-accent-400);
  --mat-tab-header-active-ripple-color: var(--hx-accent-400);
  --mat-tab-header-inactive-ripple-color: var(--hx-accent-400);
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: var(--hx-accent-400);
  --mat-tab-header-active-hover-label-text-color: var(--hx-accent-400);
  --mat-tab-header-active-focus-indicator-color: var(--hx-accent-400);
  --mat-tab-header-active-hover-indicator-color: var(--hx-accent-400);
}
.mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn {
  --mdc-tab-indicator-active-indicator-color: var(--hx-alert-400);
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: var(--hx-alert-400);
  --mat-tab-header-active-ripple-color: var(--hx-alert-400);
  --mat-tab-header-inactive-ripple-color: var(--hx-alert-400);
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: var(--hx-alert-400);
  --mat-tab-header-active-hover-label-text-color: var(--hx-alert-400);
  --mat-tab-header-active-focus-indicator-color: var(--hx-alert-400);
  --mat-tab-header-active-hover-indicator-color: var(--hx-alert-400);
}
.mat-mdc-tab-group.mat-background-primary, .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-header-with-background-background-color: var(--hx-prim-500);
  --mat-tab-header-with-background-foreground-color: var(--hx-normal--dark);
}
.mat-mdc-tab-group.mat-background-accent, .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-header-with-background-background-color: var(--hx-accent-400);
  --mat-tab-header-with-background-foreground-color: var(--hx-normal--dark);
}
.mat-mdc-tab-group.mat-background-warn, .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-header-with-background-background-color: var(--hx-alert-400);
  --mat-tab-header-with-background-foreground-color: var(--hx-normal--dark);
}

.mat-mdc-tab-header {
  --mdc-secondary-navigation-tab-container-height: 48px;
}

html {
  --mdc-checkbox-disabled-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-selected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16;
}

html {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
  --mat-checkbox-disabled-label-color: rgba(0, 0, 0, 0.38);
}

.mat-mdc-checkbox {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-primary {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}
.mat-mdc-checkbox.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

html {
  --mdc-checkbox-state-layer-size: 40px;
  --mat-checkbox-touch-target-display: block;
}

html {
  --mdc-text-button-container-shape: 4px;
  --mdc-text-button-keep-touch-target: false;
  --mdc-filled-button-container-shape: 4px;
  --mdc-filled-button-keep-touch-target: false;
  --mdc-protected-button-container-shape: 4px;
  --mdc-protected-button-keep-touch-target: false;
  --mdc-outlined-button-keep-touch-target: false;
  --mdc-outlined-button-outline-width: 1px;
  --mdc-outlined-button-container-shape: 4px;
  --mat-text-button-horizontal-padding: 8px;
  --mat-text-button-with-icon-horizontal-padding: 8px;
  --mat-text-button-icon-spacing: 8px;
  --mat-text-button-icon-offset: 0;
  --mat-filled-button-horizontal-padding: 16px;
  --mat-filled-button-icon-spacing: 8px;
  --mat-filled-button-icon-offset: -4px;
  --mat-protected-button-horizontal-padding: 16px;
  --mat-protected-button-icon-spacing: 8px;
  --mat-protected-button-icon-offset: -4px;
  --mat-outlined-button-horizontal-padding: 15px;
  --mat-outlined-button-icon-spacing: 8px;
  --mat-outlined-button-icon-offset: -4px;
}

html {
  --mdc-text-button-label-text-color: black;
  --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mat-text-button-state-layer-color: black;
  --mat-text-button-disabled-state-layer-color: black;
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-text-button-hover-state-layer-opacity: 0.04;
  --mat-text-button-focus-state-layer-opacity: 0.12;
  --mat-text-button-pressed-state-layer-opacity: 0.12;
  --mdc-filled-button-container-color: white;
  --mdc-filled-button-label-text-color: black;
  --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12);
  --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mat-filled-button-state-layer-color: black;
  --mat-filled-button-disabled-state-layer-color: black;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-filled-button-hover-state-layer-opacity: 0.04;
  --mat-filled-button-focus-state-layer-opacity: 0.12;
  --mat-filled-button-pressed-state-layer-opacity: 0.12;
  --mdc-protected-button-container-color: white;
  --mdc-protected-button-label-text-color: black;
  --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-container-shadow-color: #000;
  --mat-protected-button-state-layer-color: black;
  --mat-protected-button-disabled-state-layer-color: black;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-protected-button-hover-state-layer-opacity: 0.04;
  --mat-protected-button-focus-state-layer-opacity: 0.12;
  --mat-protected-button-pressed-state-layer-opacity: 0.12;
  --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-button-label-text-color: black;
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: black;
  --mat-outlined-button-disabled-state-layer-color: black;
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-outlined-button-hover-state-layer-opacity: 0.04;
  --mat-outlined-button-focus-state-layer-opacity: 0.12;
  --mat-outlined-button-pressed-state-layer-opacity: 0.12;
}

.mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: var(--hx-prim-500);
  --mat-text-button-state-layer-color: var(--hx-prim-500);
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-button.mat-accent {
  --mdc-text-button-label-text-color: var(--hx-accent-400);
  --mat-text-button-state-layer-color: var(--hx-accent-400);
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-button.mat-warn {
  --mdc-text-button-label-text-color: var(--hx-alert-400);
  --mat-text-button-state-layer-color: var(--hx-alert-400);
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
}

.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--hx-prim-500);
  --mdc-filled-button-label-text-color: var(--hx-normal--dark);
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-unelevated-button.mat-accent {
  --mdc-filled-button-container-color: var(--hx-accent-400);
  --mdc-filled-button-label-text-color: var(--hx-normal--dark);
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-unelevated-button.mat-warn {
  --mdc-filled-button-container-color: var(--hx-alert-400);
  --mdc-filled-button-label-text-color: var(--hx-normal--dark);
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
}

.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: var(--hx-prim-500);
  --mdc-protected-button-label-text-color: var(--hx-normal--dark);
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-raised-button.mat-accent {
  --mdc-protected-button-container-color: var(--hx-accent-400);
  --mdc-protected-button-label-text-color: var(--hx-normal--dark);
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-raised-button.mat-warn {
  --mdc-protected-button-container-color: var(--hx-alert-400);
  --mdc-protected-button-label-text-color: var(--hx-normal--dark);
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: var(--hx-prim-500);
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: var(--hx-prim-500);
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-outlined-button.mat-accent {
  --mdc-outlined-button-label-text-color: var(--hx-accent-400);
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: var(--hx-accent-400);
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-outlined-button.mat-warn {
  --mdc-outlined-button-label-text-color: var(--hx-alert-400);
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: var(--hx-alert-400);
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mdc-text-button-container-height: 36px;
  --mdc-filled-button-container-height: 36px;
  --mdc-outlined-button-container-height: 36px;
  --mdc-protected-button-container-height: 36px;
  --mat-text-button-touch-target-display: block;
  --mat-filled-button-touch-target-display: block;
  --mat-protected-button-touch-target-display: block;
  --mat-outlined-button-touch-target-display: block;
}

html {
  --mdc-icon-button-icon-size: 24px;
}

html {
  --mdc-icon-button-icon-color: inherit;
  --mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38);
  --mat-icon-button-state-layer-color: black;
  --mat-icon-button-disabled-state-layer-color: black;
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
}
html .mat-mdc-icon-button.mat-primary {
  --mdc-icon-button-icon-color: var(--hx-prim-500);
  --mat-icon-button-state-layer-color: var(--hx-prim-500);
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-icon-button.mat-accent {
  --mdc-icon-button-icon-color: var(--hx-accent-400);
  --mat-icon-button-state-layer-color: var(--hx-accent-400);
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-icon-button.mat-warn {
  --mdc-icon-button-icon-color: var(--hx-alert-400);
  --mat-icon-button-state-layer-color: var(--hx-alert-400);
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-icon-button-touch-target-display: block;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 48px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 12px;
}

html {
  --mdc-fab-container-shape: 50%;
  --mdc-fab-icon-size: 24px;
  --mdc-fab-small-container-shape: 50%;
  --mdc-fab-small-icon-size: 24px;
  --mdc-extended-fab-container-height: 48px;
  --mdc-extended-fab-container-shape: 24px;
}

html {
  --mdc-fab-container-color: white;
  --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-container-shadow-color: #000;
  --mat-fab-foreground-color: black;
  --mat-fab-state-layer-color: black;
  --mat-fab-disabled-state-layer-color: black;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-disabled-state-container-color: rgba(0, 0, 0, 0.12);
  --mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, 0.38);
  --mdc-fab-small-container-color: white;
  --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-container-shadow-color: #000;
  --mat-fab-small-foreground-color: black;
  --mat-fab-small-state-layer-color: black;
  --mat-fab-small-disabled-state-layer-color: black;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, 0.12);
  --mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, 0.38);
  --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-container-shadow-color: #000;
}
html .mat-mdc-fab.mat-primary {
  --mdc-fab-container-color: var(--hx-prim-500);
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-fab.mat-accent {
  --mdc-fab-container-color: var(--hx-accent-400);
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-fab.mat-warn {
  --mdc-fab-container-color: var(--hx-alert-400);
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-mini-fab.mat-primary {
  --mdc-fab-small-container-color: var(--hx-prim-500);
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-mini-fab.mat-accent {
  --mdc-fab-small-container-color: var(--hx-accent-400);
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-mini-fab.mat-warn {
  --mdc-fab-small-container-color: var(--hx-alert-400);
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-fab-touch-target-display: block;
  --mat-fab-small-touch-target-display: block;
}

html {
  --mdc-snackbar-container-shape: 4px;
}

html {
  --mdc-snackbar-container-color: #333333;
  --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, 0.87);
  --mat-snack-bar-button-color: var(--hx-accent-400);
}

html {
  --mat-table-row-item-outline-width: 1px;
}

html {
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px;
}

html {
  --mdc-circular-progress-active-indicator-width: 4px;
  --mdc-circular-progress-size: 48px;
}

html {
  --mdc-circular-progress-active-indicator-color: var(--hx-prim-500);
}
html .mat-accent {
  --mdc-circular-progress-active-indicator-color: var(--hx-accent-400);
}
html .mat-warn {
  --mdc-circular-progress-active-indicator-color: var(--hx-alert-400);
}

html {
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
}

html {
  --mat-badge-background-color: var(--hx-prim-500);
  --mat-badge-text-color: var(--hx-normal--dark);
  --mat-badge-disabled-state-background-color: #b9b9b9;
  --mat-badge-disabled-state-text-color: rgba(0, 0, 0, 0.38);
}

.mat-badge-accent {
  --mat-badge-background-color: var(--hx-accent-400);
  --mat-badge-text-color: var(--hx-normal--dark);
}

.mat-badge-warn {
  --mat-badge-background-color: var(--hx-alert-400);
  --mat-badge-text-color: var(--hx-normal--dark);
}

html {
  --mat-bottom-sheet-container-shape: 4px;
}

html {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
}

html {
  --mat-legacy-button-toggle-height: 36px;
  --mat-legacy-button-toggle-shape: 2px;
  --mat-legacy-button-toggle-focus-state-layer-opacity: 1;
  --mat-standard-button-toggle-shape: 4px;
  --mat-standard-button-toggle-hover-state-layer-opacity: 0.04;
  --mat-standard-button-toggle-focus-state-layer-opacity: 0.12;
}

html {
  --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, 0.38);
  --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, 0.12);
  --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.54);
  --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;
  --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;
  --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd;
  --mat-standard-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-background-color: white;
  --mat-standard-button-toggle-state-layer-color: black;
  --mat-standard-button-toggle-selected-state-background-color: #e0e0e0;
  --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-standard-button-toggle-disabled-state-background-color: white;
  --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
  --mat-standard-button-toggle-divider-color: #e0e0e0;
}

html {
  --mat-standard-button-toggle-height: 48px;
}

html {
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

html {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--hx-prim-500);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 0, 0, 0.26);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--hx-prim-500);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--hx-prim-500);
  --mat-datepicker-toggle-active-state-icon-color: var(--hx-prim-500);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--hx-prim-500), 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: black;
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, 0.18);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.24);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-datepicker-content.mat-accent {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--hx-accent-400);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 0, 0, 0.26);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--hx-accent-400);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--hx-accent-400);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--hx-accent-400), 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}
.mat-datepicker-content.mat-warn {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--hx-alert-400);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 0, 0, 0.26);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--hx-alert-400);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--hx-alert-400);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--hx-alert-400), 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}

.mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-toggle-active-state-icon-color: var(--hx-accent-400);
}
.mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-toggle-active-state-icon-color: var(--hx-alert-400);
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

html {
  --mat-divider-width: 1px;
}

html {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-expansion-container-shape: 4px;
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
}

html {
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
}

html {
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px;
}

html {
  --mat-icon-color: inherit;
}

.mat-icon.mat-primary {
  --mat-icon-color: var(--hx-prim-500);
}
.mat-icon.mat-accent {
  --mat-icon-color: var(--hx-accent-400);
}
.mat-icon.mat-warn {
  --mat-icon-color: var(--hx-alert-400);
}

html {
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
}

html {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
}

html {
  --mat-stepper-header-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-selected-state-icon-background-color: var(--hx-prim-500);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-done-state-icon-background-color: var(--hx-prim-500);
  --mat-stepper-header-done-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-edit-state-icon-background-color: var(--hx-prim-500);
  --mat-stepper-header-edit-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: var(--hx-alert-400);
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: var(--hx-alert-400);
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
html .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-selected-state-icon-background-color: var(--hx-accent-400);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-done-state-icon-background-color: var(--hx-accent-400);
  --mat-stepper-header-done-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-edit-state-icon-background-color: var(--hx-accent-400);
  --mat-stepper-header-edit-state-icon-foreground-color: var(--hx-normal--dark);
}
html .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-selected-state-icon-background-color: var(--hx-alert-400);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-done-state-icon-background-color: var(--hx-alert-400);
  --mat-stepper-header-done-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-edit-state-icon-background-color: var(--hx-alert-400);
  --mat-stepper-header-edit-state-icon-foreground-color: var(--hx-normal--dark);
}

html {
  --mat-stepper-header-height: 72px;
}

html {
  --mat-sort-arrow-color: #757575;
}

html {
  --mat-toolbar-container-background-color: whitesmoke;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: var(--hx-prim-500);
  --mat-toolbar-container-text-color: var(--hx-normal--dark);
}
.mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: var(--hx-accent-400);
  --mat-toolbar-container-text-color: var(--hx-normal--dark);
}
.mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: var(--hx-alert-400);
  --mat-toolbar-container-text-color: var(--hx-normal--dark);
}

html {
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px;
}

html {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-tree-node-min-height: 48px;
}

/* ==================
	  Transforms
==================== */
/* ==================
     Transitions
==================== */
/* ==================
     Animations
==================== */
/* ==================
    Placeholder
==================== */
/* ==================
   Pseudo Elements
==================== */
/* ==================
    Retina Image
==================== */
/* ==================
     Box Shadow
==================== */
/* ==================
   Flickering Fix
==================== */
/* ==================
   Disable Highlight
==================== */
/* ==================
   CSS Columns
==================== */
/* ==================
   Flexbox
==================== */
/* ==================
	  Transforms
==================== */
/* ==================
     Transitions
==================== */
/* ==================
     Animations
==================== */
/* ==================
    Placeholder
==================== */
/* ==================
   Pseudo Elements
==================== */
/* ==================
    Retina Image
==================== */
/* ==================
     Box Shadow
==================== */
/* ==================
   Flickering Fix
==================== */
/* ==================
   Disable Highlight
==================== */
/* ==================
   CSS Columns
==================== */
/* ==================
   Flexbox
==================== */
.h20 {
  height: 20%;
}

.h30 {
  height: 30%;
}

.h40 {
  height: 40%;
}

.h50 {
  height: 50%;
}

.h60 {
  height: 60%;
}

.h70 {
  height: 70%;
}

.h80 {
  height: 80%;
}

.h100 {
  height: 100%;
}

.h1 {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0;
}

.h2 {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
}
@media screen and (max-width: 1400px), screen and (max-height: 900px) {
  .h2 {
    font-size: 24px;
  }
}
@media screen and (max-width: 1600px), screen and (max-height: 900px) {
  .h2 {
    font-size: 28.8px;
  }
}

.h3 {
  font-size: 1.75rem !important;
  font-weight: 500;
  letter-spacing: 0;
}

.title {
  color: var(--hx-emphasis);
  font-size: 24px;
  letter-spacing: 0;
}

.headline {
  color: var(--hx-emphasis);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
}

.subtitle {
  color: var(--hx-emphasis);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.15px;
}

.body,
.body1 {
  color: var(--hx-emphasis);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.body2 {
  color: var(--hx-emphasis);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.caption {
  color: var(--hx-emphasis);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.h1_light,
.h2_light,
.body_light,
.body2_light,
.caption_light {
  color: white;
}

.text-normal {
  color: var(--hx-normal);
}

.col-mb {
  margin-bottom: 32px;
}

[hidden] {
  display: none !important;
}

.no-padding {
  padding: 0 !important;
}

.wizard-on {
  overflow: hidden;
}

.row-flex.expand {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  height: calc(100% - 11.5rem);
  display: flex;
}

/* ================== Name App ==================== */
:root {
  --font-ui: "Fira Sans", "FiraSans", Helvetica, sans-serif;
  --font-icon: "mtech" !important;
  --font-m: 0.875rem;
  --font-xxs: 0.5rem;
  --font-xs: 0.625rem;
  --font-s: 0.75rem;
  --font-l: 1rem;
  --font-xl: 1.125rem;
  --font-xxl: 1.3125rem;
  --font-xxxl: 1.5rem;
  --font-xxxxl: 2.25rem;
  --app: sonar;
  --appPath: "assets/sonar/";
  --hx-white: #fff;
  --hx-white-rgb: 255, 255, 255;
  --hx-black: #000000;
  --hx-black-rgb: 0, 0, 0;
  --hx-ui-900: #0a1232;
  --hx-ui-800: #111a4b;
  --hx-ui-800-rgb: 17, 26, 75;
  --hx-ui-700: #162364;
  --hx-ui-600: #1d2f86;
  --hx-ui-500: #2d52c7;
  --hx-ui-400: #397bea;
  --hx-ui-300: #7eaaed;
  --hx-ui-200: #c8d6ef;
  --hx-ui-100: #eff2fa;
  --hx-ui-50: #f4f8fc;
  --hx-gray-900: #212121;
  --hx-gray-900-rgb: 33, 33, 33;
  --hx-gray-800: #525252;
  --hx-gray-700: #757575;
  --hx-gray-600: #adadad;
  --hx-gray-500: #c2c2c2;
  --hx-gray-400: #d6d6d6;
  --hx-gray-300: #e0e0e0;
  --hx-gray-200: #ebebeb;
  --hx-gray-100: #f5f5f5;
  --hx-accent-700: #0a56b3;
  --hx-accent-400: #0c75f6;
  --hx-accent-400-rgb: 12, 117, 246;
  --hx-accent-200: #a6ccfb;
  --hx-accent-100: #e7f2fe;
  --hx-alert-700: #b02032;
  --hx-alert-400: #d7263d;
  --hx-alert-400-rgb: 215, 38, 61;
  --hx-alert-300: #e98895;
  --hx-alert-100: #f7d7db;
  --hx-success-700: #5ba229;
  --hx-success-400: #6ec932;
  --hx-success-300: #afe28d;
  --hx-success-100: #ddf2ce;
  --hx-warning-700: #f2a100;
  --hx-warning-400: #ffb915;
  --hx-warning-300: #ffd95c;
  --hx-warning-100: #fff0c2;
  --hx-info-700: #355de7;
  --hx-info-400: #6885ed;
  --hx-info-300: #a4b4f4;
  --hx-info-100: #dae1fb;
  --hx-attention-700: #f53900;
  --hx-attention-400: #ff5f2e;
  --hx-attention-300: #ff825c;
  --hx-attention-100: #fec0ad;
  --hx-aux-1: #ffb915;
  --hx-aux-1-100: #fff7e8;
  --hx-aux-1-200: #ffd95c;
  --hx-aux-1-400: var(--hx-aux-1);
  --hx-aux-1-700: #f2a100;
  --hx-aux-2: #7fabcc;
  --hx-aux-2-100: #f0f5f9;
  --hx-aux-2-200: #a7c4dc;
  --hx-aux-2-400: var(--hx-aux-2);
  --hx-aux-2-700: #2f5675;
  --hx-aux-3: #ff5f2e;
  --hx-aux-3-100: #ffece6;
  --hx-aux-3-200: #ff825c;
  --hx-aux-3-400: var(--hx-aux-3);
  --hx-aux-3-700: #f53900;
  --hx-aux-4: #6885ed;
  --hx-aux-4-100: #e8ecfc;
  --hx-aux-4-200: #a4b4f4;
  --hx-aux-4-400: var(--hx-aux-4);
  --hx-aux-4-700: #355de7;
  --hx-aux-5: #ea062c;
  --hx-aux-5-100: #fee6ea;
  --hx-aux-5-200: #fb5f76;
  --hx-aux-5-400: var(--hx-aux-5);
  --hx-aux-5-700: #c70522;
  --hx-aux-6: #90e05c;
  --hx-aux-6-100: #e9f8dd;
  --hx-aux-6-200: #c4efa9;
  --hx-aux-6-400: var(--hx-aux-6);
  --hx-aux-6-700: #5ba229;
  --hx-aux-7: #7945dd;
  --hx-aux-7-100: #e6dcf9;
  --hx-aux-7-200: #9e75e6;
  --hx-aux-7-400: var(--hx-aux-7);
  --hx-aux-7-700: #5923be;
  --hx-aux-8: #6ec7ed;
  --hx-aux-8-100: #dbf0fb;
  --hx-aux-8-200: #b6e3f6;
  --hx-aux-8-400: var(--hx-aux-7);
  --hx-aux-8-700: #1793c8;
  --hx-aux-9: #fa7268;
  --hx-aux-9-100: #f7dada;
  --hx-aux-9-200: #fcb1b1;
  --hx-aux-9-400: var(--hx-aux-7);
  --hx-aux-9-700: #d85050;
  --hx-aux-10: #178c74;
  --hx-aux-10-100: #effcf9;
  --hx-aux-10-200: #b9f3e8;
  --hx-aux-10-400: var(--hx-aux-7);
  --hx-aux-10-700: #105e4f;
  --hx-aux-11: #ed1e79;
  --hx-aux-11-100: #fde8f6;
  --hx-aux-11-200: #d96cf4;
  --hx-aux-11-400: var(--hx-aux-7);
  --hx-aux-11-700: #b5064d;
  --hx-aux-12: #ae3fc9;
  --hx-aux-12-100: #f4d9fc;
  --hx-aux-12-200: #9e75e6;
  --hx-aux-12-400: var(--hx-aux-7);
  --hx-aux-12-700: #690c7e;
  --hx-aux-13: #bdd435;
  --hx-aux-13-100: #eff5cc;
  --hx-aux-13-200: #d9e887;
  --hx-aux-13-400: var(--hx-aux-7);
  --hx-aux-13-700: #95a924;
  --hx-aux-14: #16d8d3;
  --hx-aux-14-100: #d9fbfa;
  --hx-aux-14-200: #7df2ee;
  --hx-aux-14-400: var(--hx-aux-7);
  --hx-aux-14-700: #15bab4;
  --hx-border: var(--hx-gray-300);
  --hx-border-radius: 4px;
  --hx-emphasis: rgba(0, 0, 0, 0.87);
  --hx-emphasis--dark: var(--hx-white);
  --hx-normal: rgba(0, 0, 0, 0.6);
  --hx-normal--dark: rgba(255, 255, 255, 0.8);
  --hx-disabled: rgba(0, 0, 0, 0.38);
  --hx-disabled--dark: rgba(255, 255, 255, 0.54);
  --hx-overlay: rgba(33, 33, 33, 0.5);
  --hx-shadow-dropdown: 0px 6px 8px -2px rgba(0, 0, 0, 0.08),
    -4px 0px 4px -2px rgba(0, 0, 0, 0.06),
    4px -4px 4px -2px rgba(184, 77, 77, 0.06);
  --hx-shadow-navigation: 7px 7px 10px 0 rgba(0, 0, 0, 0.05);
  --hx-shadow-card: 4px 4px 4px -2px rgba(0, 0, 0, 0.08);
  --hx-shadow-card-hover: 0 0 12px 2px rgba(0, 0, 0, 0.12);
  --hx-shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
  --hx-shadow-button-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --hx-shadow-toaster: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
    0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
  --hx-transition-time: 0.25s;
  --hx-transition-ease: ease-out;
  --hx-easeQuintOut: cubic-bezier(0.23, 1, 0.32, 1);
  /** Ionic CSS Variables **/
  --ion-font-family: var(--font-ui);
  /** primary **/
  --ion-color-primary: var(--hx-accent-400);
  --ion-color-primary-rgb: var(--hx-accent-400-rgb);
  --ion-color-primary-contrast: var(--white);
  --ion-color-primary-contrast-rgb: var(--white-rgb);
  --ion-color-primary-shade: var(--hx-accent-300);
  --ion-color-primary-tint: var(--hx-accent-700);
  /** secondary (Should not be used) **/
  --ion-color-secondary: var(--hx-ui-700);
  --ion-color-secondary-rgb: var(--hx-ui-700-rgb);
  --ion-color-secondary-contrast: var(--white);
  --ion-color-secondary-contrast-rgb: var(--white-rgb);
  --ion-color-secondary-shade: var(--hx-ui-900);
  --ion-color-secondary-tint: var(--hx-ui-600);
  /** tertiary (Should be used as clear mode only) **/
  --ion-color-tertiary: var(--hx-gray-800);
  --ion-color-tertiary-rgb: 82, 82, 82;
  --ion-color-tertiary-contrast: var(--white);
  --ion-color-tertiary-contrast-rgb: var(--white-rgb);
  --ion-color-tertiary-shade: var(--hx-gray-900);
  --ion-color-tertiary-tint: var(--hx-gray-600);
  /** success **/
  --ion-color-success: var(--hx-success-400);
  --ion-color-success-rgb: var(--hx-success-400-rgb);
  --ion-color-success-contrast: var(--white);
  --ion-color-success-contrast-rgb: var(--white-rgb);
  --ion-color-success-shade: var(--hx-success-700);
  --ion-color-success-tint: var(--hx-success-300);
  /** warning **/
  --ion-color-warning: var(--hx-warning-400);
  --ion-color-warning-rgb: var(--hx-warning-400-rgb);
  --ion-color-warning-contrast: var(--white);
  --ion-color-warning-contrast-rgb: var(--white-rgb);
  --ion-color-warning-shade: var(--hx-warning-700);
  --ion-color-warning-tint: var(--hx-warning-300);
  /** danger **/
  --ion-color-danger: var(--hx-alert-400);
  --ion-color-danger-rgb: var(--hx-alert-400-rgb);
  --ion-color-danger-contrast: var(--white);
  --ion-color-danger-contrast-rgb: var(--white-rgb);
  --ion-color-danger-shade: var(--hx-warning-700);
  --ion-color-danger-tint: var(--hx-warning-300);
  /** dark **/
  --ion-color-dark: var(--hx-ui-900);
  --ion-color-dark-rgb: var(--hx-ui-900-rgb);
  --ion-color-dark-contrast: var(--white);
  --ion-color-dark-contrast-rgb: var(--white-rgb);
  --ion-color-dark-shade: var(--hx-ui-1000);
  --ion-color-dark-tint: var(--hx-ui-800);
  /** medium (Should not be used) **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: var(--white);
  --ion-color-medium-contrast-rgb: var(--white-rgb);
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;
  /** light **/
  --ion-color-light: var(--hx-ui-100);
  --ion-color-light-rgb: var(--hx-ui-100-rgb);
  --ion-color-light-contrast: var(--black);
  --ion-color-light-contrast-rgb: var(--black-rgb);
  --ion-color-light-shade: var(--hx-ui-200);
  --ion-color-light-tint: var(--hx-ui-50);
}

* {
  font-family: "Fira Sans", "FiraSans", Helvetica, sans-serif;
  font-variant-ligatures: none;
}

.md body.dark {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18, 18, 18;
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;
  --ion-border-color: #222222;
  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;
}

.transparent {
  background-color: transparent !important;
}
.transparent body {
  --ion-background-color: transparent !important;
}

.md body:not(.dark),
.ios body:not(.dark) {
  /* Set the background of the entire app */
  --ion-background-color: var(--hx-ui-100);
  --ion-tab-bar-background: var(--white);
  --ion-text-color: rgba(var(--hx-emphasis), 0.87);
}
.md body:not(.dark) ion-footer,
.ios body:not(.dark) ion-footer {
  background-color: var(--white);
}

ion-header {
  --background: var(--white);
  box-shadow: var(--hx-shadow-navigation) !important;
}
ion-header.header-md:after {
  background-image: none !important;
}
ion-header ion-toolbar ion-buttons .navigation__icon {
  color: #ada9b5;
  font-size: 24px;
}
ion-header ion-title .navigation__title {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
ion-header ion-title .navigation__title ion-select {
  min-height: auto;
}
ion-header ion-title .navigation__title ion-select::part(container) {
  display: flex;
  justify-content: center;
  width: 100% !important;
}
ion-header ion-title .navigation__title ion-select::part(text) {
  flex: none !important;
}
ion-header ion-title .navigation__title ion-select::part(icon) {
  opacity: 1 !important;
}
ion-header ion-title .navigation__title .navigation__subtitle {
  padding-top: 4px;
  text-align: center;
}
ion-header ion-segment {
  --background: var(--hx-ui-700);
  border-radius: 0px;
}
ion-header ion-segment ion-segment-button {
  --background-hover-opacity: 0;
  --color: var(--hx-normal--dark);
  --color-hover: var(--hx-normal);
}

.content-md {
  background-color: var(--hx-ui-100);
}

.empty-state {
  align-content: center;
  align-items: center;
  background: var(--hx-ui-100);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.empty-state__wrapper {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 1rem;
  text-align: center;
  color: var(--hx-normal);
}
.empty-state__image {
  height: 200px;
}
.empty-state__title {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
.empty-state__message {
  font-size: 0.8rem;
}

.tabs-detail {
  padding: 1rem 0;
}
.tabs-detail .tabs-wrapper {
  display: flex;
  height: auto;
  justify-content: center;
  width: 100%;
}
.tabs-detail .tabs-wrapper ion-segment-button {
  transition: color 0.25s ease-out;
  background-color: var(--hx-white);
  border: 1px solid transparent;
  box-shadow: var(--hx-shadow-button);
  color: var(--hx-normal) !important;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 40px;
  margin: 0 -2px;
  max-width: 140px;
  min-width: 40px;
  text-transform: none;
}
.tabs-detail .tabs-wrapper ion-segment-button:first-child {
  border-radius: 4px 0 0 4px;
  text-align: right;
}
.tabs-detail .tabs-wrapper ion-segment-button:last-child {
  border-radius: 0 4px 4px 0;
  text-align: left;
}
.tabs-detail .tabs-wrapper .active,
.tabs-detail .tabs-wrapper .segment-button-checked {
  --indicator-color: transparent !important;
  border-color: var(--hx-gray-300) !important;
  border: 1px solid;
  box-shadow: none !important;
  color: var(--hx-accent-400) !important;
}
.tabs-detail .tabs-wrapper .tabs-title {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.tabs-detail .tabs-wrapper .tabs-title [class*=ami-] {
  font-size: 20px;
  margin: auto;
}

ion-tab-bar {
  --background: #f8f8f8;
}
ion-tab-bar ion-tab-button {
  --background: #f8f8f8;
}
ion-tab-bar ion-tab-button:not(.tab-selected) {
  color: var(--hx-normal);
}
ion-tab-bar ion-tab-button i {
  font-size: 1.5rem;
}
ion-tab-bar ion-tab-button ion-label {
  font-size: 0.8rem;
}

ion-action-sheet .action-sheet-selected {
  background-color: var(--hx-ui-200) !important;
  box-shadow: inset 2px 0 0 var(--hx-accent-400);
  color: var(--hx-emphasis);
  font-weight: 400 !important;
}

ion-modal.filter-modal {
  padding-bottom: var(--ion-safe-area-bottom);
  padding-top: var(--ion-safe-area-top);
}

ion-modal.sort-modal {
  padding-bottom: var(--ion-safe-area-bottom);
  padding-top: var(--ion-safe-area-top);
}
ion-modal.sort-modal ion-backdrop {
  visibility: visible;
}
ion-modal.sort-modal .modal-wrapper {
  bottom: 0 !important;
  height: auto;
  min-width: 100%;
  position: absolute !important;
}
ion-modal.sort-modal .modal-wrapper,
ion-modal.sort-modal .modal-wrapper .ion-page,
ion-modal.sort-modal .modal-wrapper .ion-page .container,
ion-modal.sort-modal .modal-wrapper .ion-page .container .scroll-content {
  contain: content;
  left: auto;
  position: relative;
  top: auto;
}
ion-modal.sort-modal .modal-wrapper .ion-page {
  display: block;
  overflow-y: auto;
}
ion-modal.sort-modal .modal-wrapper ion-content {
  min-height: 400px;
}

ion-alert.setting-select .alert-wrapper {
  --background: var(--hx-white) !important;
  background: var(--hx-white) !important;
}

ion-alert.setting-select .select-interface-option[aria-checked=true] .alert-radio-label {
  --color: var(--hx-accent-400) !important;
  color: var(--hx-accent-400) !important;
}

ion-alert.setting-select .alert-radio-icon.sc-ion-alert-md {
  left: 1rem;
}

ion-alert.setting-select .alert-radio-label.sc-ion-alert-md {
  padding-inline-start: 2rem;
}

ion-popover.sensor-options .popover__options {
  list-style: none;
  padding: 0px;
}
ion-popover.sensor-options .popover__options .popover__option {
  padding-left: 1rem;
  cursor: pointer;
}

ion-searchbar .searchbar-cancel-button.sc-ion-searchbar-md {
  padding-left: 8px;
}

.kpiLabel_medium .house-card__kpi-age-label, .kpiLabel_medium .house-card__kpi-bird-label, .kpiLabel_medium .house-card__kpi-livability-label {
  font-size: 11px !important;
}
.kpiLabel_medium .house-card .sensors__content-6 .sensor__item .sensor__item-kpi-label,
.kpiLabel_medium .house-card .sensors__content-10 .sensor__item .sensor__item-kpi-label {
  font-size: 11px !important;
}

.kpiLabel_large .house-card__kpi-age-label, .kpiLabel_large .house-card__kpi-bird-label, .kpiLabel_large .house-card__kpi-livability-label {
  font-size: 12px !important;
}
.kpiLabel_large .house-card .sensors__content-6 .sensor__item .sensor__item-kpi-label,
.kpiLabel_large .house-card .sensors__content-10 .sensor__item .sensor__item-kpi-label {
  font-size: 12px !important;
}

.kpiLabel_medium .card-kpis .card-kpis__title-label,
.kpiLabel_medium .card-kpis .card-kpis__label {
  font-size: 11px !important;
}

.kpiLabel_large .card-kpis .card-kpis__title-label,
.kpiLabel_large .card-kpis .card-kpis__label {
  font-size: 12px !important;
}

ion-action-sheet .action-sheet-group.sc-ion-action-sheet-md:last-child {
  padding-bottom: var(--ion-safe-area-bottom);
}

.score-alert .alert-wrapper .alert-message {
  padding-bottom: 0 !important;
}
.score-alert .alert-wrapper .alert-message > .header {
  width: 100%;
  padding-bottom: 1rem;
}
.score-alert .alert-wrapper .alert-message > .header p {
  color: var(--hx-normal);
  margin: 0;
  padding-bottom: 0.5rem;
}
.score-alert .alert-wrapper .alert-message > .footer {
  width: 100%;
}
.score-alert .alert-wrapper .alert-message > .footer p {
  color: var(--hx-emphasis);
  font-weight: 500;
  margin: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/core.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}

html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}

html {
  --ion-default-dynamic-font: -apple-system-body;
  --ion-font-family: var(--ion-default-font);
}

body {
  background: var(--ion-background-color);
}

body.backdrop-no-scroll {
  overflow: hidden;
}

/**
 * Card style modal needs additional padding on the
 * top of the header. We accomplish this by targeting
 * the first toolbar in the header.
 * Footer also needs this. We do not adjust the bottom
 * padding though because of the safe area.
 */
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type {
  padding-top: 6px;
}

/**
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding-bottom: 6px;
}

/**
* Add padding on the left and right
* of toolbars while accounting for
* safe area values when in landscape.
*/
html.ios ion-modal ion-toolbar {
  padding-right: calc(var(--ion-safe-area-right) + 8px);
  padding-left: calc(var(--ion-safe-area-left) + 8px);
}

/**
 * Card style modal on iPadOS
 * should only have backdrop on first instance.
 */
@media screen and (min-width: 768px) {
  html.ios ion-modal.modal-card:first-of-type {
    --backdrop-opacity: 0.18;
  }
}
/**
 * Subsequent modals should not have a backdrop/box shadow
 * as it will cause the screen to appear to get progressively
 * darker. With Ionic 6, declarative modals made it
 * possible to have multiple non-presented modals in the DOM,
 * so we could no longer rely on ion-modal:first-of-type.
 * Here we disable the opacity/box-shadow for every modal
 * that comes after the first presented modal.
 *
 * Note: ion-modal:not(.overlay-hidden):first-of-type
 * does not match the first modal to not have
 * the .overlay-hidden class, it will match the
 * first modal in general only if it does not
 * have the .overlay-hidden class.
 * The :nth-child() pseudo-class has support
 * for selectors which would help us here. At the
 * time of writing it does not have great cross browser
 * support.
 *
 * Note 2: This should only apply to non-card and
 * non-sheet modals. Card and sheet modals have their
 * own criteria for displaying backdrops/box shadows.
 *
 * Do not use :not(.overlay-hidden) in place of
 * .show-modal because that triggers a memory
 * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768
 */
ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none;
}

/**
 * This works around a bug in WebKit where the
 * content will overflow outside of the bottom border
 * radius when re-painting. As long as a single
 * border radius value is set on .ion-page, this
 * issue does not happen. We set the top left radius
 * here because the top left corner will always have a
 * radius no matter the platform.
 * This behavior only applies to card modals.
 */
html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius);
}

.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
}

.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
}

.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
}

.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
}

.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}

.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
}

.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}

.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #92949c) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
}

.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}

.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  z-index: 0;
}

/**
 * When making custom dialogs, using
 * ion-content is not required. As a result,
 * some developers may wish to have dialogs
 * that are automatically sized by the browser.
 * These changes allow certain dimension values
 * such as fit-content to work correctly.
 */
ion-modal > .ion-page {
  position: relative;
  contain: layout style;
  height: 100%;
}

.split-pane-visible > .ion-page.split-pane-main {
  position: relative;
}

ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-popover-controller,
ion-toast-controller,
.ion-page-hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.ion-page-invisible {
  opacity: 0;
}

.can-go-back > ion-header ion-back-button {
  display: block;
}

html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px;
}

@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding);
  }
}
@supports (padding-top: constant(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: constant(safe-area-inset-top);
    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
    --ion-safe-area-left: constant(safe-area-inset-left);
    --ion-safe-area-right: constant(safe-area-inset-right);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
  }
}
ion-card.ion-color .ion-inherit-color,
ion-card-header.ion-color .ion-inherit-color {
  color: inherit;
}

.menu-content {
  transform: translate3d(0,  0,  0);
}

.menu-content-open {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: none;
}

.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
}

[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
}

.md .menu-content-reveal {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

.md .menu-content-push {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px;
}

ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    /* stylelint-disable declaration-no-important */
    transition: none !important;
  }
}
/**
 * The > [slot="header"] selector ensures that we do
 * not modify toggle icons for any nested accordions. The state
 * of one accordion should not affect any accordions inside
 * of a nested accordion group.
 */
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg);
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px;
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
  margin-top: 0;
}

ion-input input::-webkit-date-and-time-value {
  text-align: start;
}

/**
 * The .ion-datetime-button-overlay class contains
 * styles that allow any modal/popover to be
 * sized according to the dimensions of the datetime
 * when used with ion-datetime-button.
 */
.ion-datetime-button-overlay {
  --width: fit-content;
  --height: fit-content;
}

/**
 * The grid variant can scale down when inline.
 * When used in a `fit-content` overlay, this causes
 * the overlay to shrink when the month/year picker is open.
 * Explicitly setting the dimensions lets us have a consistently
 * sized grid interface.
 */
.ion-datetime-button-overlay ion-datetime.datetime-grid {
  width: 320px;
  min-height: 320px;
}

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

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/normalize.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
audio,
canvas,
progress,
video {
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

b,
strong {
  font-weight: bold;
}

img {
  max-width: 100%;
}

hr {
  height: 1px;
  border-width: 0;
  box-sizing: content-box;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

label,
input,
select,
textarea {
  font-family: inherit;
  line-height: normal;
}

textarea {
  overflow: auto;
  height: auto;
  font: inherit;
  color: inherit;
}

textarea::placeholder {
  padding-left: 2px;
}

form,
input,
optgroup,
select {
  margin: 0;
  font: inherit;
  color: inherit;
}

html input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

a,
a div,
a span,
a ion-icon,
a ion-label,
button,
button div,
button span,
button ion-icon,
button ion-label,
.ion-tappable,
[tappable],
[tappable] div,
[tappable] span,
[tappable] ion-icon,
[tappable] ion-label,
input,
textarea {
  touch-action: manipulation;
}

a ion-label,
button ion-label {
  pointer-events: none;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
}

[tappable] {
  cursor: pointer;
}

a[disabled],
button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

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

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/structure.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:not(.hydrated) body {
  display: none;
}

html.ion-ce body {
  display: block;
}

html.plt-pwa {
  height: 100vh;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  /**
   * Because body has position: fixed,
   * it should be promoted to its own
   * layer.
   *
   * WebKit does not always promote
   * the body to its own layer on page
   * load in Ionic apps. Once scrolling on
   * ion-content starts, WebKit will promote
   * body. Unfortunately, this causes a re-paint
   * which results in scrolling being halted
   * until the next user gesture.
   *
   * This impacts the Custom Elements build.
   * The lazy loaded build causes the browser to
   * re-paint during hydration which causes WebKit
   * to promote body to its own layer.
   * In the CE Build, this hydration does not
   * happen, so the additional re-paint does not occur.
   */
  transform: translateZ(0);
  text-rendering: optimizeLegibility;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  word-wrap: break-word;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

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

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/typography.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
html {
  font-family: var(--ion-font-family);
}

/**
 * Dynamic Type is an iOS-only feature, so
 * this should only be enabled on iOS devices.
 */
@supports (-webkit-touch-callout: none) {
  html {
    /**
     * Includes fallback if Dynamic Type is not enabled.
     */
    font: var(--ion-dynamic-font, 16px var(--ion-font-family));
  }
}
a {
  background-color: transparent;
  color: var(--ion-color-primary, #3880ff);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  margin-top: 20px;
  font-size: 1.625rem;
}

h2 {
  margin-top: 18px;
  font-size: 1.5rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

small {
  font-size: 75%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

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

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/display.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
.ion-hide {
  display: none !important;
}

.ion-hide-up {
  display: none !important;
}

.ion-hide-down {
  display: none !important;
}

@media (min-width: 576px) {
  .ion-hide-sm-up {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .ion-hide-sm-down {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .ion-hide-md-up {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .ion-hide-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .ion-hide-lg-up {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .ion-hide-lg-down {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .ion-hide-xl-up {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .ion-hide-xl-down {
    display: none !important;
  }
}

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

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/padding.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.ion-padding {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}

.ion-padding-top {
  --padding-top: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
}

.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px);
}

.ion-padding-end {
  --padding-end: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
}

.ion-padding-bottom {
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}

.ion-padding-vertical {
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}

.ion-padding-horizontal {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
}

.ion-no-margin {
  --margin-start: 0;
  --margin-end: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.ion-margin {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}

.ion-margin-top {
  --margin-top: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
}

.ion-margin-start {
  --margin-start: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
}

.ion-margin-end {
  --margin-end: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
}

.ion-margin-bottom {
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}

.ion-margin-vertical {
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}

.ion-margin-horizontal {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
}

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

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/float-elements.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
.ion-float-left {
  float: left !important;
}

.ion-float-right {
  float: right !important;
}

.ion-float-start {
  float: left !important;
}
:host-context([dir=rtl]) .ion-float-start {
  float: right !important;
}

[dir=rtl] .ion-float-start {
  float: right !important;
}

@supports selector(:dir(rtl)) {
  .ion-float-start:dir(rtl) {
    float: right !important;
  }
}

.ion-float-end {
  float: right !important;
}
:host-context([dir=rtl]) .ion-float-end {
  float: left !important;
}

[dir=rtl] .ion-float-end {
  float: left !important;
}

@supports selector(:dir(rtl)) {
  .ion-float-end:dir(rtl) {
    float: left !important;
  }
}

@media (min-width: 576px) {
  .ion-float-sm-left {
    float: left !important;
  }

  .ion-float-sm-right {
    float: right !important;
  }

  .ion-float-sm-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-sm-start {
    float: right !important;
  }

  [dir=rtl] .ion-float-sm-start {
    float: right !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-sm-start:dir(rtl) {
      float: right !important;
    }
  }

  .ion-float-sm-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-sm-end {
    float: left !important;
  }

  [dir=rtl] .ion-float-sm-end {
    float: left !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-sm-end:dir(rtl) {
      float: left !important;
    }
  }
}
@media (min-width: 768px) {
  .ion-float-md-left {
    float: left !important;
  }

  .ion-float-md-right {
    float: right !important;
  }

  .ion-float-md-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-md-start {
    float: right !important;
  }

  [dir=rtl] .ion-float-md-start {
    float: right !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-md-start:dir(rtl) {
      float: right !important;
    }
  }

  .ion-float-md-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-md-end {
    float: left !important;
  }

  [dir=rtl] .ion-float-md-end {
    float: left !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-md-end:dir(rtl) {
      float: left !important;
    }
  }
}
@media (min-width: 992px) {
  .ion-float-lg-left {
    float: left !important;
  }

  .ion-float-lg-right {
    float: right !important;
  }

  .ion-float-lg-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-lg-start {
    float: right !important;
  }

  [dir=rtl] .ion-float-lg-start {
    float: right !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-lg-start:dir(rtl) {
      float: right !important;
    }
  }

  .ion-float-lg-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-lg-end {
    float: left !important;
  }

  [dir=rtl] .ion-float-lg-end {
    float: left !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-lg-end:dir(rtl) {
      float: left !important;
    }
  }
}
@media (min-width: 1200px) {
  .ion-float-xl-left {
    float: left !important;
  }

  .ion-float-xl-right {
    float: right !important;
  }

  .ion-float-xl-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-xl-start {
    float: right !important;
  }

  [dir=rtl] .ion-float-xl-start {
    float: right !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-xl-start:dir(rtl) {
      float: right !important;
    }
  }

  .ion-float-xl-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-xl-end {
    float: left !important;
  }

  [dir=rtl] .ion-float-xl-end {
    float: left !important;
  }

  @supports selector(:dir(rtl)) {
    .ion-float-xl-end:dir(rtl) {
      float: left !important;
    }
  }
}

/*# sourceMappingURL=float-elements.css.map */

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/text-alignment.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
.ion-text-center {
  text-align: center !important;
}

.ion-text-justify {
  text-align: justify !important;
}

.ion-text-start {
  text-align: start !important;
}

.ion-text-end {
  text-align: end !important;
}

.ion-text-left {
  text-align: left !important;
}

.ion-text-right {
  text-align: right !important;
}

.ion-text-nowrap {
  white-space: nowrap !important;
}

.ion-text-wrap {
  white-space: normal !important;
}

@media (min-width: 576px) {
  .ion-text-sm-center {
    text-align: center !important;
  }

  .ion-text-sm-justify {
    text-align: justify !important;
  }

  .ion-text-sm-start {
    text-align: start !important;
  }

  .ion-text-sm-end {
    text-align: end !important;
  }

  .ion-text-sm-left {
    text-align: left !important;
  }

  .ion-text-sm-right {
    text-align: right !important;
  }

  .ion-text-sm-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-sm-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-center {
    text-align: center !important;
  }

  .ion-text-md-justify {
    text-align: justify !important;
  }

  .ion-text-md-start {
    text-align: start !important;
  }

  .ion-text-md-end {
    text-align: end !important;
  }

  .ion-text-md-left {
    text-align: left !important;
  }

  .ion-text-md-right {
    text-align: right !important;
  }

  .ion-text-md-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-md-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-center {
    text-align: center !important;
  }

  .ion-text-lg-justify {
    text-align: justify !important;
  }

  .ion-text-lg-start {
    text-align: start !important;
  }

  .ion-text-lg-end {
    text-align: end !important;
  }

  .ion-text-lg-left {
    text-align: left !important;
  }

  .ion-text-lg-right {
    text-align: right !important;
  }

  .ion-text-lg-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-lg-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-center {
    text-align: center !important;
  }

  .ion-text-xl-justify {
    text-align: justify !important;
  }

  .ion-text-xl-start {
    text-align: start !important;
  }

  .ion-text-xl-end {
    text-align: end !important;
  }

  .ion-text-xl-left {
    text-align: left !important;
  }

  .ion-text-xl-right {
    text-align: right !important;
  }

  .ion-text-xl-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-xl-wrap {
    white-space: normal !important;
  }
}

/*# sourceMappingURL=text-alignment.css.map */

/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/text-transformation.css ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
.ion-text-uppercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: uppercase !important;
}

.ion-text-lowercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: lowercase !important;
}

.ion-text-capitalize {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: capitalize !important;
}

@media (min-width: 576px) {
  .ion-text-sm-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-sm-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-sm-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-md-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-md-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-lg-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-lg-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-xl-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-xl-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}

/*# sourceMappingURL=text-transformation.css.map */

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/flex-utils.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
.ion-align-self-start {
  align-self: flex-start !important;
}

.ion-align-self-end {
  align-self: flex-end !important;
}

.ion-align-self-center {
  align-self: center !important;
}

.ion-align-self-stretch {
  align-self: stretch !important;
}

.ion-align-self-baseline {
  align-self: baseline !important;
}

.ion-align-self-auto {
  align-self: auto !important;
}

.ion-wrap {
  flex-wrap: wrap !important;
}

.ion-nowrap {
  flex-wrap: nowrap !important;
}

.ion-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.ion-justify-content-start {
  justify-content: flex-start !important;
}

.ion-justify-content-center {
  justify-content: center !important;
}

.ion-justify-content-end {
  justify-content: flex-end !important;
}

.ion-justify-content-around {
  justify-content: space-around !important;
}

.ion-justify-content-between {
  justify-content: space-between !important;
}

.ion-justify-content-evenly {
  justify-content: space-evenly !important;
}

.ion-align-items-start {
  align-items: flex-start !important;
}

.ion-align-items-center {
  align-items: center !important;
}

.ion-align-items-end {
  align-items: flex-end !important;
}

.ion-align-items-stretch {
  align-items: stretch !important;
}

.ion-align-items-baseline {
  align-items: baseline !important;
}

/*# sourceMappingURL=flex-utils.css.map */

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */
/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Optional CSS utils that can be commented out */
/* ================== Variables ==================== */
/* Angular Material */
.mat-ripple {
  overflow: hidden;
  position: relative;
}
.mat-ripple:not(:empty) {
  transform: translateZ(0);
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible;
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale3d(0, 0, 0);
  background-color: var(--mat-ripple-color, rgba(0, 0, 0, 0.1));
}
.cdk-high-contrast-active .mat-ripple-element {
  display: none;
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0;
}
[dir=rtl] .cdk-visually-hidden {
  left: auto;
  right: 0;
}

.cdk-overlay-container, .cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}
.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0.6;
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.cdk-overlay-transparent-backdrop {
  transition: visibility 1ms linear, opacity 1ms linear;
  visibility: hidden;
  opacity: 1;
}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
  visibility: visible;
}

.cdk-overlay-backdrop-noop-animation {
  transition: none;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

textarea.cdk-textarea-autosize {
  resize: none;
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: auto !important;
  overflow: hidden !important;
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: 0 !important;
}

@keyframes cdk-text-field-autofill-start { /*!*/ }
@keyframes cdk-text-field-autofill-end { /*!*/ }
.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms;
}

.mat-focus-indicator {
  position: relative;
}
.mat-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-focus-indicator-display, none);
  border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
  border-radius: var(--mat-focus-indicator-border-radius, 4px);
}
.mat-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-focus-indicator-display: block;
}

.mat-mdc-focus-indicator {
  position: relative;
}
.mat-mdc-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-mdc-focus-indicator-display, none);
  border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
  border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px);
}
.mat-mdc-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-mdc-focus-indicator-display: block;
}

.mat-app-background {
  background-color: var(--mat-app-background-color, transparent);
  color: var(--mat-app-text-color, inherit);
}

html {
  --mat-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-option-selected-state-label-text-color: var(--hx-prim-500);
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

.mat-accent {
  --mat-option-selected-state-label-text-color: var(--hx-accent-400);
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

.mat-warn {
  --mat-option-selected-state-label-text-color: var(--hx-alert-400);
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(0, 0, 0, 0.04);
}

html {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
}

.mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-prim-500);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-prim-500);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

html {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-accent-400);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-accent-400);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

.mat-accent {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-accent-400);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-accent-400);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

.mat-warn {
  --mat-full-pseudo-checkbox-selected-icon-color: var(--hx-alert-400);
  --mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--hx-alert-400);
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0;
}

html {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
}

.mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 {
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 {
  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 {
  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 {
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.mat-theme-loaded-marker {
  display: none;
}

html {
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;
  --mdc-outlined-card-outline-width: 1px;
}

html {
  --mdc-elevated-card-container-color: white;
  --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-color: white;
  --mdc-outlined-card-outline-color: rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
}

html {
  --mdc-linear-progress-active-indicator-height: 4px;
  --mdc-linear-progress-track-height: 4px;
  --mdc-linear-progress-track-shape: 0;
}

.mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: var(--hx-prim-500);
  --mdc-linear-progress-track-color: var(--hx-prim-500);
}
.mat-mdc-progress-bar.mat-accent {
  --mdc-linear-progress-active-indicator-color: var(--hx-accent-400);
  --mdc-linear-progress-track-color: var(--hx-accent-400);
}
.mat-mdc-progress-bar.mat-warn {
  --mdc-linear-progress-active-indicator-color: var(--hx-alert-400);
  --mdc-linear-progress-track-color: var(--hx-alert-400);
}

html {
  --mdc-plain-tooltip-container-shape: 4px;
  --mdc-plain-tooltip-supporting-text-line-height: 16px;
}

html {
  --mdc-plain-tooltip-container-color: #616161;
  --mdc-plain-tooltip-supporting-text-color: #fff;
}

html {
  --mdc-filled-text-field-active-indicator-height: 1px;
  --mdc-filled-text-field-focus-active-indicator-height: 2px;
  --mdc-filled-text-field-container-shape: 4px;
  --mdc-outlined-text-field-outline-width: 1px;
  --mdc-outlined-text-field-focus-outline-width: 2px;
  --mdc-outlined-text-field-container-shape: 4px;
}

html {
  --mdc-filled-text-field-caret-color: var(--hx-prim-500);
  --mdc-filled-text-field-focus-active-indicator-color: var(--hx-prim-500);
  --mdc-filled-text-field-focus-label-text-color: var(--hx-prim-500);
  --mdc-filled-text-field-container-color: whitesmoke;
  --mdc-filled-text-field-disabled-container-color: #fafafa;
  --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-filled-text-field-input-text-color: rgba(0, 0, 0, 0.87);
  --mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38);
  --mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6);
  --mdc-filled-text-field-error-hover-label-text-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-focus-label-text-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-label-text-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-caret-color: var(--hx-alert-400);
  --mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, 0.42);
  --mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, 0.06);
  --mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mdc-filled-text-field-error-active-indicator-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-focus-active-indicator-color: var(--hx-alert-400);
  --mdc-filled-text-field-error-hover-active-indicator-color: var(--hx-alert-400);
  --mdc-outlined-text-field-caret-color: var(--hx-prim-500);
  --mdc-outlined-text-field-focus-outline-color: var(--hx-prim-500);
  --mdc-outlined-text-field-focus-label-text-color: var(--hx-prim-500);
  --mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, 0.87);
  --mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, 0.6);
  --mdc-outlined-text-field-error-caret-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-focus-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-hover-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.06);
  --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mdc-outlined-text-field-error-focus-outline-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-hover-outline-color: var(--hx-alert-400);
  --mdc-outlined-text-field-error-outline-color: var(--hx-alert-400);
  --mat-form-field-focus-select-arrow-color: var(--hx-prim-500);
  --mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: var(--hx-alert-400);
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.08;
}

.mat-mdc-form-field.mat-accent {
  --mdc-filled-text-field-caret-color: var(--hx-accent-400);
  --mdc-filled-text-field-focus-active-indicator-color: var(--hx-accent-400);
  --mdc-filled-text-field-focus-label-text-color: var(--hx-accent-400);
  --mdc-outlined-text-field-caret-color: var(--hx-accent-400);
  --mdc-outlined-text-field-focus-outline-color: var(--hx-accent-400);
  --mdc-outlined-text-field-focus-label-text-color: var(--hx-accent-400);
  --mat-form-field-focus-select-arrow-color: var(--hx-accent-400);
}

.mat-mdc-form-field.mat-warn {
  --mdc-filled-text-field-caret-color: var(--hx-alert-400);
  --mdc-filled-text-field-focus-active-indicator-color: var(--hx-alert-400);
  --mdc-filled-text-field-focus-label-text-color: var(--hx-alert-400);
  --mdc-outlined-text-field-caret-color: var(--hx-alert-400);
  --mdc-outlined-text-field-focus-outline-color: var(--hx-alert-400);
  --mdc-outlined-text-field-focus-label-text-color: var(--hx-alert-400);
  --mat-form-field-focus-select-arrow-color: var(--hx-alert-400);
}

html {
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;
}

html {
  --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: var(--hx-prim-500);
  --mat-select-invalid-arrow-color: var(--hx-alert-400);
}
html .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: var(--hx-accent-400);
  --mat-select-invalid-arrow-color: var(--hx-alert-400);
}
html .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, 0.38);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.6);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: rgba(0, 0, 0, 0.38);
  --mat-select-focused-arrow-color: var(--hx-alert-400);
  --mat-select-invalid-arrow-color: var(--hx-alert-400);
}

html {
  --mat-select-arrow-transform: translateY(-8px);
}

html {
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-autocomplete-background-color: white;
}

html {
  --mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mdc-dialog-container-shadow-color: #000;
  --mdc-dialog-container-shape: 4px;
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
}

html {
  --mdc-dialog-container-color: white;
  --mdc-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mdc-dialog-supporting-text-color: rgba(0, 0, 0, 0.6);
}

.mat-mdc-standard-chip {
  --mdc-chip-container-shape-family: rounded;
  --mdc-chip-container-shape-radius: 16px 16px 16px 16px;
  --mdc-chip-with-avatar-avatar-shape-family: rounded;
  --mdc-chip-with-avatar-avatar-shape-radius: 14px 14px 14px 14px;
  --mdc-chip-with-avatar-avatar-size: 28px;
  --mdc-chip-with-icon-icon-size: 18px;
  --mdc-chip-outline-width: 0;
  --mdc-chip-outline-color: transparent;
  --mdc-chip-disabled-outline-color: transparent;
  --mdc-chip-focus-outline-color: transparent;
  --mdc-chip-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-avatar-disabled-avatar-opacity: 1;
  --mdc-chip-flat-selected-outline-width: 0;
  --mdc-chip-selected-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
  --mdc-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
}

.mat-mdc-standard-chip {
  --mdc-chip-disabled-label-text-color: #212121;
  --mdc-chip-elevated-container-color: #e0e0e0;
  --mdc-chip-elevated-selected-container-color: #e0e0e0;
  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
  --mdc-chip-flat-disabled-selected-container-color: #e0e0e0;
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #212121;
  --mdc-chip-selected-label-text-color: #212121;
  --mdc-chip-with-icon-icon-color: #212121;
  --mdc-chip-with-icon-disabled-icon-color: #212121;
  --mdc-chip-with-icon-selected-icon-color: #212121;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #212121;
  --mat-chip-selected-disabled-trailing-icon-color: #212121;
  --mat-chip-selected-trailing-icon-color: #212121;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mdc-chip-disabled-label-text-color: var(--hx-normal--dark);
  --mdc-chip-elevated-container-color: var(--hx-prim-500);
  --mdc-chip-elevated-selected-container-color: var(--hx-prim-500);
  --mdc-chip-elevated-disabled-container-color: var(--hx-prim-500);
  --mdc-chip-flat-disabled-selected-container-color: var(--hx-prim-500);
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: var(--hx-normal--dark);
  --mdc-chip-selected-label-text-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-disabled-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-selected-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-trailing-icon-color: var(--hx-normal--dark);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mdc-chip-disabled-label-text-color: var(--hx-normal--dark);
  --mdc-chip-elevated-container-color: var(--hx-accent-400);
  --mdc-chip-elevated-selected-container-color: var(--hx-accent-400);
  --mdc-chip-elevated-disabled-container-color: var(--hx-accent-400);
  --mdc-chip-flat-disabled-selected-container-color: var(--hx-accent-400);
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: var(--hx-normal--dark);
  --mdc-chip-selected-label-text-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-disabled-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-selected-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-trailing-icon-color: var(--hx-normal--dark);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mdc-chip-disabled-label-text-color: var(--hx-normal--dark);
  --mdc-chip-elevated-container-color: var(--hx-alert-400);
  --mdc-chip-elevated-selected-container-color: var(--hx-alert-400);
  --mdc-chip-elevated-disabled-container-color: var(--hx-alert-400);
  --mdc-chip-flat-disabled-selected-container-color: var(--hx-alert-400);
  --mdc-chip-focus-state-layer-color: black;
  --mdc-chip-hover-state-layer-color: black;
  --mdc-chip-selected-hover-state-layer-color: black;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: black;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: var(--hx-normal--dark);
  --mdc-chip-selected-label-text-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-disabled-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-icon-selected-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mdc-chip-with-trailing-icon-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-disabled-trailing-icon-color: var(--hx-normal--dark);
  --mat-chip-selected-trailing-icon-color: var(--hx-normal--dark);
}

.mat-mdc-chip.mat-mdc-standard-chip {
  --mdc-chip-container-height: 32px;
}

html {
  --mdc-switch-disabled-selected-icon-opacity: 0.38;
  --mdc-switch-disabled-track-opacity: 0.12;
  --mdc-switch-disabled-unselected-icon-opacity: 0.38;
  --mdc-switch-handle-height: 20px;
  --mdc-switch-handle-shape: 10px;
  --mdc-switch-handle-width: 20px;
  --mdc-switch-selected-icon-size: 18px;
  --mdc-switch-track-height: 14px;
  --mdc-switch-track-shape: 7px;
  --mdc-switch-track-width: 36px;
  --mdc-switch-unselected-icon-size: 18px;
  --mdc-switch-selected-focus-state-layer-opacity: 0.12;
  --mdc-switch-selected-hover-state-layer-opacity: 0.04;
  --mdc-switch-selected-pressed-state-layer-opacity: 0.1;
  --mdc-switch-unselected-focus-state-layer-opacity: 0.12;
  --mdc-switch-unselected-hover-state-layer-opacity: 0.04;
  --mdc-switch-unselected-pressed-state-layer-opacity: 0.1;
  --mat-switch-disabled-selected-handle-opacity: 0.38;
  --mat-switch-disabled-unselected-handle-opacity: 0.38;
  --mat-switch-unselected-handle-size: 20px;
  --mat-switch-selected-handle-size: 20px;
  --mat-switch-pressed-handle-size: 20px;
  --mat-switch-with-icon-handle-size: 20px;
  --mat-switch-selected-handle-horizontal-margin: 0;
  --mat-switch-selected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-selected-pressed-handle-horizontal-margin: 0;
  --mat-switch-unselected-handle-horizontal-margin: 0;
  --mat-switch-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-unselected-pressed-handle-horizontal-margin: 0;
  --mat-switch-visible-track-opacity: 1;
  --mat-switch-hidden-track-opacity: 1;
  --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-switch-track-outline-width: 1px;
  --mat-switch-track-outline-color: transparent;
  --mat-switch-selected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-color: transparent;
}

html {
  --mdc-switch-disabled-selected-handle-color: #424242;
  --mdc-switch-disabled-selected-icon-color: #fff;
  --mdc-switch-disabled-selected-track-color: #424242;
  --mdc-switch-disabled-unselected-handle-color: #424242;
  --mdc-switch-disabled-unselected-icon-color: #fff;
  --mdc-switch-disabled-unselected-track-color: #424242;
  --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
  --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-handle-shadow-color: black;
  --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-selected-icon-color: #fff;
  --mdc-switch-unselected-focus-handle-color: #212121;
  --mdc-switch-unselected-focus-state-layer-color: #424242;
  --mdc-switch-unselected-focus-track-color: #e0e0e0;
  --mdc-switch-unselected-handle-color: #616161;
  --mdc-switch-unselected-hover-handle-color: #212121;
  --mdc-switch-unselected-hover-state-layer-color: #424242;
  --mdc-switch-unselected-hover-track-color: #e0e0e0;
  --mdc-switch-unselected-icon-color: #fff;
  --mdc-switch-unselected-pressed-handle-color: #212121;
  --mdc-switch-unselected-pressed-state-layer-color: #424242;
  --mdc-switch-unselected-pressed-track-color: #e0e0e0;
  --mdc-switch-unselected-track-color: #e0e0e0;
  --mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38);
}
html .mat-mdc-slide-toggle {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
html {
  --mdc-switch-state-layer-size: 40px;
}

html {
  --mdc-radio-disabled-selected-icon-opacity: 0.38;
  --mdc-radio-disabled-unselected-icon-opacity: 0.38;
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-radio-button {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-primary {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-pressed-icon-color: var(--hx-prim-500);
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: var(--hx-prim-500);
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}
.mat-mdc-radio-button.mat-accent {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-accent-400);
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: var(--hx-accent-400);
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}
.mat-mdc-radio-button.mat-warn {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-alert-400);
  --mat-radio-ripple-color: black;
  --mat-radio-checked-ripple-color: var(--hx-alert-400);
  --mat-radio-disabled-label-color: rgba(0, 0, 0, 0.38);
}

html {
  --mdc-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}

html {
  --mat-slider-value-indicator-width: auto;
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mdc-slider-active-track-height: 6px;
  --mdc-slider-active-track-shape: 9999px;
  --mdc-slider-handle-height: 20px;
  --mdc-slider-handle-shape: 50%;
  --mdc-slider-handle-width: 20px;
  --mdc-slider-inactive-track-height: 4px;
  --mdc-slider-inactive-track-shape: 9999px;
  --mdc-slider-with-overlap-handle-outline-width: 1px;
  --mdc-slider-with-tick-marks-active-container-opacity: 0.6;
  --mdc-slider-with-tick-marks-container-shape: 50%;
  --mdc-slider-with-tick-marks-container-size: 2px;
  --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6;
}

html {
  --mdc-slider-handle-color: var(--hx-prim-500);
  --mdc-slider-focus-handle-color: var(--hx-prim-500);
  --mdc-slider-hover-handle-color: var(--hx-prim-500);
  --mdc-slider-active-track-color: var(--hx-prim-500);
  --mdc-slider-inactive-track-color: var(--hx-prim-500);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--hx-prim-500);
  --mdc-slider-with-tick-marks-active-container-color: var(--hx-normal--dark);
  --mdc-slider-disabled-active-track-color: #000;
  --mdc-slider-disabled-handle-color: #000;
  --mdc-slider-disabled-inactive-track-color: #000;
  --mdc-slider-label-container-color: #000;
  --mdc-slider-label-label-text-color: #fff;
  --mdc-slider-with-overlap-handle-outline-color: #fff;
  --mdc-slider-with-tick-marks-disabled-container-color: #000;
  --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-ripple-color: var(--hx-prim-500);
  --mat-slider-hover-state-layer-color: rgba(var(--hx-prim-500), 0.05);
  --mat-slider-focus-state-layer-color: rgba(var(--hx-prim-500), 0.2);
  --mat-slider-value-indicator-opacity: 0.6;
}
html .mat-accent {
  --mat-slider-ripple-color: var(--hx-accent-400);
  --mat-slider-hover-state-layer-color: rgba(var(--hx-accent-400), 0.05);
  --mat-slider-focus-state-layer-color: rgba(var(--hx-accent-400), 0.2);
  --mdc-slider-handle-color: var(--hx-accent-400);
  --mdc-slider-focus-handle-color: var(--hx-accent-400);
  --mdc-slider-hover-handle-color: var(--hx-accent-400);
  --mdc-slider-active-track-color: var(--hx-accent-400);
  --mdc-slider-inactive-track-color: var(--hx-accent-400);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--hx-accent-400);
  --mdc-slider-with-tick-marks-active-container-color: var(--hx-normal--dark);
}
html .mat-warn {
  --mat-slider-ripple-color: var(--hx-alert-400);
  --mat-slider-hover-state-layer-color: rgba(var(--hx-alert-400), 0.05);
  --mat-slider-focus-state-layer-color: rgba(var(--hx-alert-400), 0.2);
  --mdc-slider-handle-color: var(--hx-alert-400);
  --mdc-slider-focus-handle-color: var(--hx-alert-400);
  --mdc-slider-hover-handle-color: var(--hx-alert-400);
  --mdc-slider-active-track-color: var(--hx-alert-400);
  --mdc-slider-inactive-track-color: var(--hx-alert-400);
  --mdc-slider-with-tick-marks-inactive-container-color: var(--hx-alert-400);
  --mdc-slider-with-tick-marks-active-container-color: var(--hx-normal--dark);
}

html {
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
}

html {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mdc-list-list-item-container-shape: 0;
  --mdc-list-list-item-leading-avatar-shape: 50%;
  --mdc-list-list-item-container-color: transparent;
  --mdc-list-list-item-selected-container-color: transparent;
  --mdc-list-list-item-leading-avatar-color: transparent;
  --mdc-list-list-item-leading-icon-size: 24px;
  --mdc-list-list-item-leading-avatar-size: 40px;
  --mdc-list-list-item-trailing-icon-size: 24px;
  --mdc-list-list-item-disabled-state-layer-color: transparent;
  --mdc-list-list-item-disabled-state-layer-opacity: 0;
  --mdc-list-list-item-disabled-label-text-opacity: 0.38;
  --mdc-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38;
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
}

html {
  --mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-disabled-label-text-color: black;
  --mdc-list-list-item-disabled-leading-icon-color: black;
  --mdc-list-list-item-disabled-trailing-icon-color: black;
  --mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mdc-list-list-item-hover-state-layer-color: black;
  --mdc-list-list-item-hover-state-layer-opacity: 0.04;
  --mdc-list-list-item-focus-state-layer-color: black;
  --mdc-list-list-item-focus-state-layer-opacity: 0.12;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-icon-color: var(--hx-prim-500);
  --mdc-radio-selected-pressed-icon-color: var(--hx-prim-500);
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-icon-color: var(--hx-accent-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-accent-400);
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: black;
  --mdc-radio-disabled-unselected-icon-color: black;
  --mdc-radio-unselected-hover-icon-color: #212121;
  --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-radio-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-icon-color: var(--hx-alert-400);
  --mdc-radio-selected-pressed-icon-color: var(--hx-alert-400);
}

.mat-mdc-list-option {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-option.mat-accent {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-option.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text {
  color: var(--hx-prim-500);
}
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start {
  color: var(--hx-prim-500);
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}

html {
  --mdc-list-list-item-one-line-container-height: 48px;
  --mdc-list-list-item-two-line-container-height: 64px;
  --mdc-list-list-item-three-line-container-height: 88px;
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 72px;
}

html {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-paginator-container-size: 56px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
}

html {
  --mdc-tab-indicator-active-indicator-height: 2px;
  --mdc-tab-indicator-active-indicator-shape: 0;
  --mdc-secondary-navigation-tab-container-height: 48px;
  --mat-tab-header-divider-color: transparent;
  --mat-tab-header-divider-height: 0;
}

.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
  --mdc-tab-indicator-active-indicator-color: var(--hx-prim-500);
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: var(--hx-prim-500);
  --mat-tab-header-active-ripple-color: var(--hx-prim-500);
  --mat-tab-header-inactive-ripple-color: var(--hx-prim-500);
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: var(--hx-prim-500);
  --mat-tab-header-active-hover-label-text-color: var(--hx-prim-500);
  --mat-tab-header-active-focus-indicator-color: var(--hx-prim-500);
  --mat-tab-header-active-hover-indicator-color: var(--hx-prim-500);
}
.mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent {
  --mdc-tab-indicator-active-indicator-color: var(--hx-accent-400);
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: var(--hx-accent-400);
  --mat-tab-header-active-ripple-color: var(--hx-accent-400);
  --mat-tab-header-inactive-ripple-color: var(--hx-accent-400);
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: var(--hx-accent-400);
  --mat-tab-header-active-hover-label-text-color: var(--hx-accent-400);
  --mat-tab-header-active-focus-indicator-color: var(--hx-accent-400);
  --mat-tab-header-active-hover-indicator-color: var(--hx-accent-400);
}
.mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn {
  --mdc-tab-indicator-active-indicator-color: var(--hx-alert-400);
  --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, 0.38);
  --mat-tab-header-pagination-icon-color: black;
  --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-label-text-color: var(--hx-alert-400);
  --mat-tab-header-active-ripple-color: var(--hx-alert-400);
  --mat-tab-header-inactive-ripple-color: var(--hx-alert-400);
  --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, 0.6);
  --mat-tab-header-active-focus-label-text-color: var(--hx-alert-400);
  --mat-tab-header-active-hover-label-text-color: var(--hx-alert-400);
  --mat-tab-header-active-focus-indicator-color: var(--hx-alert-400);
  --mat-tab-header-active-hover-indicator-color: var(--hx-alert-400);
}
.mat-mdc-tab-group.mat-background-primary, .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-header-with-background-background-color: var(--hx-prim-500);
  --mat-tab-header-with-background-foreground-color: var(--hx-normal--dark);
}
.mat-mdc-tab-group.mat-background-accent, .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-header-with-background-background-color: var(--hx-accent-400);
  --mat-tab-header-with-background-foreground-color: var(--hx-normal--dark);
}
.mat-mdc-tab-group.mat-background-warn, .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-header-with-background-background-color: var(--hx-alert-400);
  --mat-tab-header-with-background-foreground-color: var(--hx-normal--dark);
}

.mat-mdc-tab-header {
  --mdc-secondary-navigation-tab-container-height: 48px;
}

html {
  --mdc-checkbox-disabled-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-selected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16;
}

html {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-icon-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-accent-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
  --mat-checkbox-disabled-label-color: rgba(0, 0, 0, 0.38);
}

.mat-mdc-checkbox {
  --mdc-form-field-label-text-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-primary {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-icon-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-prim-500);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}
.mat-mdc-checkbox.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-selected-checkmark-color: var(--hx-normal--dark);
  --mdc-checkbox-selected-focus-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-icon-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-icon-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-icon-color: #212121;
  --mdc-checkbox-unselected-hover-icon-color: #212121;
  --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-hover-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-selected-pressed-state-layer-color: var(--hx-alert-400);
  --mdc-checkbox-unselected-focus-state-layer-color: black;
  --mdc-checkbox-unselected-hover-state-layer-color: black;
  --mdc-checkbox-unselected-pressed-state-layer-color: black;
}

html {
  --mdc-checkbox-state-layer-size: 40px;
  --mat-checkbox-touch-target-display: block;
}

html {
  --mdc-text-button-container-shape: 4px;
  --mdc-text-button-keep-touch-target: false;
  --mdc-filled-button-container-shape: 4px;
  --mdc-filled-button-keep-touch-target: false;
  --mdc-protected-button-container-shape: 4px;
  --mdc-protected-button-keep-touch-target: false;
  --mdc-outlined-button-keep-touch-target: false;
  --mdc-outlined-button-outline-width: 1px;
  --mdc-outlined-button-container-shape: 4px;
  --mat-text-button-horizontal-padding: 8px;
  --mat-text-button-with-icon-horizontal-padding: 8px;
  --mat-text-button-icon-spacing: 8px;
  --mat-text-button-icon-offset: 0;
  --mat-filled-button-horizontal-padding: 16px;
  --mat-filled-button-icon-spacing: 8px;
  --mat-filled-button-icon-offset: -4px;
  --mat-protected-button-horizontal-padding: 16px;
  --mat-protected-button-icon-spacing: 8px;
  --mat-protected-button-icon-offset: -4px;
  --mat-outlined-button-horizontal-padding: 15px;
  --mat-outlined-button-icon-spacing: 8px;
  --mat-outlined-button-icon-offset: -4px;
}

html {
  --mdc-text-button-label-text-color: black;
  --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mat-text-button-state-layer-color: black;
  --mat-text-button-disabled-state-layer-color: black;
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-text-button-hover-state-layer-opacity: 0.04;
  --mat-text-button-focus-state-layer-opacity: 0.12;
  --mat-text-button-pressed-state-layer-opacity: 0.12;
  --mdc-filled-button-container-color: white;
  --mdc-filled-button-label-text-color: black;
  --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12);
  --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mat-filled-button-state-layer-color: black;
  --mat-filled-button-disabled-state-layer-color: black;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-filled-button-hover-state-layer-opacity: 0.04;
  --mat-filled-button-focus-state-layer-opacity: 0.12;
  --mat-filled-button-pressed-state-layer-opacity: 0.12;
  --mdc-protected-button-container-color: white;
  --mdc-protected-button-label-text-color: black;
  --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-container-shadow-color: #000;
  --mat-protected-button-state-layer-color: black;
  --mat-protected-button-disabled-state-layer-color: black;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-protected-button-hover-state-layer-opacity: 0.04;
  --mat-protected-button-focus-state-layer-opacity: 0.12;
  --mat-protected-button-pressed-state-layer-opacity: 0.12;
  --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
  --mdc-outlined-button-label-text-color: black;
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: black;
  --mat-outlined-button-disabled-state-layer-color: black;
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-outlined-button-hover-state-layer-opacity: 0.04;
  --mat-outlined-button-focus-state-layer-opacity: 0.12;
  --mat-outlined-button-pressed-state-layer-opacity: 0.12;
}

.mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: var(--hx-prim-500);
  --mat-text-button-state-layer-color: var(--hx-prim-500);
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-button.mat-accent {
  --mdc-text-button-label-text-color: var(--hx-accent-400);
  --mat-text-button-state-layer-color: var(--hx-accent-400);
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-button.mat-warn {
  --mdc-text-button-label-text-color: var(--hx-alert-400);
  --mat-text-button-state-layer-color: var(--hx-alert-400);
  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.1);
}

.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--hx-prim-500);
  --mdc-filled-button-label-text-color: var(--hx-normal--dark);
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-unelevated-button.mat-accent {
  --mdc-filled-button-container-color: var(--hx-accent-400);
  --mdc-filled-button-label-text-color: var(--hx-normal--dark);
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-unelevated-button.mat-warn {
  --mdc-filled-button-container-color: var(--hx-alert-400);
  --mdc-filled-button-label-text-color: var(--hx-normal--dark);
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, 0.1);
}

.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: var(--hx-prim-500);
  --mdc-protected-button-label-text-color: var(--hx-normal--dark);
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-raised-button.mat-accent {
  --mdc-protected-button-container-color: var(--hx-accent-400);
  --mdc-protected-button-label-text-color: var(--hx-normal--dark);
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-raised-button.mat-warn {
  --mdc-protected-button-container-color: var(--hx-alert-400);
  --mdc-protected-button-label-text-color: var(--hx-normal--dark);
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, 0.1);
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: var(--hx-prim-500);
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: var(--hx-prim-500);
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-outlined-button.mat-accent {
  --mdc-outlined-button-label-text-color: var(--hx-accent-400);
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: var(--hx-accent-400);
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-mdc-outlined-button.mat-warn {
  --mdc-outlined-button-label-text-color: var(--hx-alert-400);
  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
  --mat-outlined-button-state-layer-color: var(--hx-alert-400);
  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mdc-text-button-container-height: 36px;
  --mdc-filled-button-container-height: 36px;
  --mdc-outlined-button-container-height: 36px;
  --mdc-protected-button-container-height: 36px;
  --mat-text-button-touch-target-display: block;
  --mat-filled-button-touch-target-display: block;
  --mat-protected-button-touch-target-display: block;
  --mat-outlined-button-touch-target-display: block;
}

html {
  --mdc-icon-button-icon-size: 24px;
}

html {
  --mdc-icon-button-icon-color: inherit;
  --mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38);
  --mat-icon-button-state-layer-color: black;
  --mat-icon-button-disabled-state-layer-color: black;
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
}
html .mat-mdc-icon-button.mat-primary {
  --mdc-icon-button-icon-color: var(--hx-prim-500);
  --mat-icon-button-state-layer-color: var(--hx-prim-500);
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-icon-button.mat-accent {
  --mdc-icon-button-icon-color: var(--hx-accent-400);
  --mat-icon-button-state-layer-color: var(--hx-accent-400);
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-icon-button.mat-warn {
  --mdc-icon-button-icon-color: var(--hx-alert-400);
  --mat-icon-button-state-layer-color: var(--hx-alert-400);
  --mat-icon-button-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-icon-button-touch-target-display: block;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 48px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 12px;
}

html {
  --mdc-fab-container-shape: 50%;
  --mdc-fab-icon-size: 24px;
  --mdc-fab-small-container-shape: 50%;
  --mdc-fab-small-icon-size: 24px;
  --mdc-extended-fab-container-height: 48px;
  --mdc-extended-fab-container-shape: 24px;
}

html {
  --mdc-fab-container-color: white;
  --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-container-shadow-color: #000;
  --mat-fab-foreground-color: black;
  --mat-fab-state-layer-color: black;
  --mat-fab-disabled-state-layer-color: black;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-disabled-state-container-color: rgba(0, 0, 0, 0.12);
  --mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, 0.38);
  --mdc-fab-small-container-color: white;
  --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-container-shadow-color: #000;
  --mat-fab-small-foreground-color: black;
  --mat-fab-small-state-layer-color: black;
  --mat-fab-small-disabled-state-layer-color: black;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, 0.12);
  --mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, 0.38);
  --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-container-shadow-color: #000;
}
html .mat-mdc-fab.mat-primary {
  --mdc-fab-container-color: var(--hx-prim-500);
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-fab.mat-accent {
  --mdc-fab-container-color: var(--hx-accent-400);
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-fab.mat-warn {
  --mdc-fab-container-color: var(--hx-alert-400);
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-mini-fab.mat-primary {
  --mdc-fab-small-container-color: var(--hx-prim-500);
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-mini-fab.mat-accent {
  --mdc-fab-small-container-color: var(--hx-accent-400);
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
}
html .mat-mdc-mini-fab.mat-warn {
  --mdc-fab-small-container-color: var(--hx-alert-400);
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-small-ripple-color: rgba(0, 0, 0, 0.1);
}

html {
  --mat-fab-touch-target-display: block;
  --mat-fab-small-touch-target-display: block;
}

html {
  --mdc-snackbar-container-shape: 4px;
}

html {
  --mdc-snackbar-container-color: #333333;
  --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, 0.87);
  --mat-snack-bar-button-color: var(--hx-accent-400);
}

html {
  --mat-table-row-item-outline-width: 1px;
}

html {
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px;
}

html {
  --mdc-circular-progress-active-indicator-width: 4px;
  --mdc-circular-progress-size: 48px;
}

html {
  --mdc-circular-progress-active-indicator-color: var(--hx-prim-500);
}
html .mat-accent {
  --mdc-circular-progress-active-indicator-color: var(--hx-accent-400);
}
html .mat-warn {
  --mdc-circular-progress-active-indicator-color: var(--hx-alert-400);
}

html {
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
}

html {
  --mat-badge-background-color: var(--hx-prim-500);
  --mat-badge-text-color: var(--hx-normal--dark);
  --mat-badge-disabled-state-background-color: #b9b9b9;
  --mat-badge-disabled-state-text-color: rgba(0, 0, 0, 0.38);
}

.mat-badge-accent {
  --mat-badge-background-color: var(--hx-accent-400);
  --mat-badge-text-color: var(--hx-normal--dark);
}

.mat-badge-warn {
  --mat-badge-background-color: var(--hx-alert-400);
  --mat-badge-text-color: var(--hx-normal--dark);
}

html {
  --mat-bottom-sheet-container-shape: 4px;
}

html {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
}

html {
  --mat-legacy-button-toggle-height: 36px;
  --mat-legacy-button-toggle-shape: 2px;
  --mat-legacy-button-toggle-focus-state-layer-opacity: 1;
  --mat-standard-button-toggle-shape: 4px;
  --mat-standard-button-toggle-hover-state-layer-opacity: 0.04;
  --mat-standard-button-toggle-focus-state-layer-opacity: 0.12;
}

html {
  --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, 0.38);
  --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, 0.12);
  --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.54);
  --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;
  --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;
  --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd;
  --mat-standard-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-background-color: white;
  --mat-standard-button-toggle-state-layer-color: black;
  --mat-standard-button-toggle-selected-state-background-color: #e0e0e0;
  --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-standard-button-toggle-disabled-state-background-color: white;
  --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
  --mat-standard-button-toggle-divider-color: #e0e0e0;
}

html {
  --mat-standard-button-toggle-height: 48px;
}

html {
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

html {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--hx-prim-500);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 0, 0, 0.26);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--hx-prim-500);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--hx-prim-500);
  --mat-datepicker-toggle-active-state-icon-color: var(--hx-prim-500);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--hx-prim-500), 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: black;
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, 0.18);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.24);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, 0.38);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-datepicker-content.mat-accent {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--hx-accent-400);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 0, 0, 0.26);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--hx-accent-400);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--hx-accent-400);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--hx-accent-400), 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}
.mat-datepicker-content.mat-warn {
  --mat-datepicker-calendar-date-selected-state-text-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-selected-state-background-color: var(--hx-alert-400);
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(0, 0, 0, 0.26);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--hx-normal--dark);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--hx-alert-400);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--hx-alert-400);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--hx-alert-400), 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}

.mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-toggle-active-state-icon-color: var(--hx-accent-400);
}
.mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-toggle-active-state-icon-color: var(--hx-alert-400);
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

html {
  --mat-divider-width: 1px;
}

html {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
}

html {
  --mat-expansion-container-shape: 4px;
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
}

html {
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
}

html {
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px;
}

html {
  --mat-icon-color: inherit;
}

.mat-icon.mat-primary {
  --mat-icon-color: var(--hx-prim-500);
}
.mat-icon.mat-accent {
  --mat-icon-color: var(--hx-accent-400);
}
.mat-icon.mat-warn {
  --mat-icon-color: var(--hx-alert-400);
}

html {
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
}

html {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
}

html {
  --mat-stepper-header-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-selected-state-icon-background-color: var(--hx-prim-500);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-done-state-icon-background-color: var(--hx-prim-500);
  --mat-stepper-header-done-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-edit-state-icon-background-color: var(--hx-prim-500);
  --mat-stepper-header-edit-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: var(--hx-alert-400);
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: var(--hx-alert-400);
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
html .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-selected-state-icon-background-color: var(--hx-accent-400);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-done-state-icon-background-color: var(--hx-accent-400);
  --mat-stepper-header-done-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-edit-state-icon-background-color: var(--hx-accent-400);
  --mat-stepper-header-edit-state-icon-foreground-color: var(--hx-normal--dark);
}
html .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-selected-state-icon-background-color: var(--hx-alert-400);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-done-state-icon-background-color: var(--hx-alert-400);
  --mat-stepper-header-done-state-icon-foreground-color: var(--hx-normal--dark);
  --mat-stepper-header-edit-state-icon-background-color: var(--hx-alert-400);
  --mat-stepper-header-edit-state-icon-foreground-color: var(--hx-normal--dark);
}

html {
  --mat-stepper-header-height: 72px;
}

html {
  --mat-sort-arrow-color: #757575;
}

html {
  --mat-toolbar-container-background-color: whitesmoke;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: var(--hx-prim-500);
  --mat-toolbar-container-text-color: var(--hx-normal--dark);
}
.mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: var(--hx-accent-400);
  --mat-toolbar-container-text-color: var(--hx-normal--dark);
}
.mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: var(--hx-alert-400);
  --mat-toolbar-container-text-color: var(--hx-normal--dark);
}

html {
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px;
}

html {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-tree-node-min-height: 48px;
}

/* ==================
	  Transforms
==================== */
/* ==================
     Transitions
==================== */
/* ==================
     Animations
==================== */
/* ==================
    Placeholder
==================== */
/* ==================
   Pseudo Elements
==================== */
/* ==================
    Retina Image
==================== */
/* ==================
     Box Shadow
==================== */
/* ==================
   Flickering Fix
==================== */
/* ==================
   Disable Highlight
==================== */
/* ==================
   CSS Columns
==================== */
/* ==================
   Flexbox
==================== */
/* ==================
	  Transforms
==================== */
/* ==================
     Transitions
==================== */
/* ==================
     Animations
==================== */
/* ==================
    Placeholder
==================== */
/* ==================
   Pseudo Elements
==================== */
/* ==================
    Retina Image
==================== */
/* ==================
     Box Shadow
==================== */
/* ==================
   Flickering Fix
==================== */
/* ==================
   Disable Highlight
==================== */
/* ==================
   CSS Columns
==================== */
/* ==================
   Flexbox
==================== */
.h20 {
  height: 20%;
}

.h30 {
  height: 30%;
}

.h40 {
  height: 40%;
}

.h50 {
  height: 50%;
}

.h60 {
  height: 60%;
}

.h70 {
  height: 70%;
}

.h80 {
  height: 80%;
}

.h100 {
  height: 100%;
}

.h1 {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0;
}

.h2 {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
}
@media screen and (max-width: 1400px), screen and (max-height: 900px) {
  .h2 {
    font-size: 24px;
  }
}
@media screen and (max-width: 1600px), screen and (max-height: 900px) {
  .h2 {
    font-size: 28.8px;
  }
}

.h3 {
  font-size: 1.75rem !important;
  font-weight: 500;
  letter-spacing: 0;
}

.title {
  color: var(--hx-emphasis);
  font-size: 24px;
  letter-spacing: 0;
}

.headline {
  color: var(--hx-emphasis);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
}

.subtitle {
  color: var(--hx-emphasis);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.15px;
}

.body,
.body1 {
  color: var(--hx-emphasis);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.body2 {
  color: var(--hx-emphasis);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.caption {
  color: var(--hx-emphasis);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.h1_light,
.h2_light,
.body_light,
.body2_light,
.caption_light {
  color: white;
}

.text-normal {
  color: var(--hx-normal);
}

.col-mb {
  margin-bottom: 32px;
}

[hidden] {
  display: none !important;
}

.no-padding {
  padding: 0 !important;
}

.wizard-on {
  overflow: hidden;
}

.row-flex.expand {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  height: calc(100% - 11.5rem);
  display: flex;
}

/* ================== Name App ==================== */
:root {
  --font-ui: "Fira Sans", "FiraSans", Helvetica, sans-serif;
  --font-icon: "mtech" !important;
  --font-m: 0.875rem;
  --font-xxs: 0.5rem;
  --font-xs: 0.625rem;
  --font-s: 0.75rem;
  --font-l: 1rem;
  --font-xl: 1.125rem;
  --font-xxl: 1.3125rem;
  --font-xxxl: 1.5rem;
  --font-xxxxl: 2.25rem;
  --app: sonar;
  --appPath: "assets/sonar/";
  --hx-white: #fff;
  --hx-white-rgb: 255, 255, 255;
  --hx-black: #000000;
  --hx-black-rgb: 0, 0, 0;
  --hx-ui-900: #0a1232;
  --hx-ui-800: #111a4b;
  --hx-ui-800-rgb: 17, 26, 75;
  --hx-ui-700: #162364;
  --hx-ui-600: #1d2f86;
  --hx-ui-500: #2d52c7;
  --hx-ui-400: #397bea;
  --hx-ui-300: #7eaaed;
  --hx-ui-200: #c8d6ef;
  --hx-ui-100: #eff2fa;
  --hx-ui-50: #f4f8fc;
  --hx-gray-900: #212121;
  --hx-gray-900-rgb: 33, 33, 33;
  --hx-gray-800: #525252;
  --hx-gray-700: #757575;
  --hx-gray-600: #adadad;
  --hx-gray-500: #c2c2c2;
  --hx-gray-400: #d6d6d6;
  --hx-gray-300: #e0e0e0;
  --hx-gray-200: #ebebeb;
  --hx-gray-100: #f5f5f5;
  --hx-accent-700: #0a56b3;
  --hx-accent-400: #0c75f6;
  --hx-accent-400-rgb: 12, 117, 246;
  --hx-accent-200: #a6ccfb;
  --hx-accent-100: #e7f2fe;
  --hx-alert-700: #b02032;
  --hx-alert-400: #d7263d;
  --hx-alert-400-rgb: 215, 38, 61;
  --hx-alert-300: #e98895;
  --hx-alert-100: #f7d7db;
  --hx-success-700: #5ba229;
  --hx-success-400: #6ec932;
  --hx-success-300: #afe28d;
  --hx-success-100: #ddf2ce;
  --hx-warning-700: #f2a100;
  --hx-warning-400: #ffb915;
  --hx-warning-300: #ffd95c;
  --hx-warning-100: #fff0c2;
  --hx-info-700: #355de7;
  --hx-info-400: #6885ed;
  --hx-info-300: #a4b4f4;
  --hx-info-100: #dae1fb;
  --hx-attention-700: #f53900;
  --hx-attention-400: #ff5f2e;
  --hx-attention-300: #ff825c;
  --hx-attention-100: #fec0ad;
  --hx-aux-1: #ffb915;
  --hx-aux-1-100: #fff7e8;
  --hx-aux-1-200: #ffd95c;
  --hx-aux-1-400: var(--hx-aux-1);
  --hx-aux-1-700: #f2a100;
  --hx-aux-2: #7fabcc;
  --hx-aux-2-100: #f0f5f9;
  --hx-aux-2-200: #a7c4dc;
  --hx-aux-2-400: var(--hx-aux-2);
  --hx-aux-2-700: #2f5675;
  --hx-aux-3: #ff5f2e;
  --hx-aux-3-100: #ffece6;
  --hx-aux-3-200: #ff825c;
  --hx-aux-3-400: var(--hx-aux-3);
  --hx-aux-3-700: #f53900;
  --hx-aux-4: #6885ed;
  --hx-aux-4-100: #e8ecfc;
  --hx-aux-4-200: #a4b4f4;
  --hx-aux-4-400: var(--hx-aux-4);
  --hx-aux-4-700: #355de7;
  --hx-aux-5: #ea062c;
  --hx-aux-5-100: #fee6ea;
  --hx-aux-5-200: #fb5f76;
  --hx-aux-5-400: var(--hx-aux-5);
  --hx-aux-5-700: #c70522;
  --hx-aux-6: #90e05c;
  --hx-aux-6-100: #e9f8dd;
  --hx-aux-6-200: #c4efa9;
  --hx-aux-6-400: var(--hx-aux-6);
  --hx-aux-6-700: #5ba229;
  --hx-aux-7: #7945dd;
  --hx-aux-7-100: #e6dcf9;
  --hx-aux-7-200: #9e75e6;
  --hx-aux-7-400: var(--hx-aux-7);
  --hx-aux-7-700: #5923be;
  --hx-aux-8: #6ec7ed;
  --hx-aux-8-100: #dbf0fb;
  --hx-aux-8-200: #b6e3f6;
  --hx-aux-8-400: var(--hx-aux-7);
  --hx-aux-8-700: #1793c8;
  --hx-aux-9: #fa7268;
  --hx-aux-9-100: #f7dada;
  --hx-aux-9-200: #fcb1b1;
  --hx-aux-9-400: var(--hx-aux-7);
  --hx-aux-9-700: #d85050;
  --hx-aux-10: #178c74;
  --hx-aux-10-100: #effcf9;
  --hx-aux-10-200: #b9f3e8;
  --hx-aux-10-400: var(--hx-aux-7);
  --hx-aux-10-700: #105e4f;
  --hx-aux-11: #ed1e79;
  --hx-aux-11-100: #fde8f6;
  --hx-aux-11-200: #d96cf4;
  --hx-aux-11-400: var(--hx-aux-7);
  --hx-aux-11-700: #b5064d;
  --hx-aux-12: #ae3fc9;
  --hx-aux-12-100: #f4d9fc;
  --hx-aux-12-200: #9e75e6;
  --hx-aux-12-400: var(--hx-aux-7);
  --hx-aux-12-700: #690c7e;
  --hx-aux-13: #bdd435;
  --hx-aux-13-100: #eff5cc;
  --hx-aux-13-200: #d9e887;
  --hx-aux-13-400: var(--hx-aux-7);
  --hx-aux-13-700: #95a924;
  --hx-aux-14: #16d8d3;
  --hx-aux-14-100: #d9fbfa;
  --hx-aux-14-200: #7df2ee;
  --hx-aux-14-400: var(--hx-aux-7);
  --hx-aux-14-700: #15bab4;
  --hx-border: var(--hx-gray-300);
  --hx-border-radius: 4px;
  --hx-emphasis: rgba(0, 0, 0, 0.87);
  --hx-emphasis--dark: var(--hx-white);
  --hx-normal: rgba(0, 0, 0, 0.6);
  --hx-normal--dark: rgba(255, 255, 255, 0.8);
  --hx-disabled: rgba(0, 0, 0, 0.38);
  --hx-disabled--dark: rgba(255, 255, 255, 0.54);
  --hx-overlay: rgba(33, 33, 33, 0.5);
  --hx-shadow-dropdown: 0px 6px 8px -2px rgba(0, 0, 0, 0.08),
    -4px 0px 4px -2px rgba(0, 0, 0, 0.06),
    4px -4px 4px -2px rgba(184, 77, 77, 0.06);
  --hx-shadow-navigation: 7px 7px 10px 0 rgba(0, 0, 0, 0.05);
  --hx-shadow-card: 4px 4px 4px -2px rgba(0, 0, 0, 0.08);
  --hx-shadow-card-hover: 0 0 12px 2px rgba(0, 0, 0, 0.12);
  --hx-shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
  --hx-shadow-button-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --hx-shadow-toaster: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
    0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
  --hx-transition-time: 0.25s;
  --hx-transition-ease: ease-out;
  --hx-easeQuintOut: cubic-bezier(0.23, 1, 0.32, 1);
  /** Ionic CSS Variables **/
  --ion-font-family: var(--font-ui);
  /** primary **/
  --ion-color-primary: var(--hx-accent-400);
  --ion-color-primary-rgb: var(--hx-accent-400-rgb);
  --ion-color-primary-contrast: var(--white);
  --ion-color-primary-contrast-rgb: var(--white-rgb);
  --ion-color-primary-shade: var(--hx-accent-300);
  --ion-color-primary-tint: var(--hx-accent-700);
  /** secondary (Should not be used) **/
  --ion-color-secondary: var(--hx-ui-700);
  --ion-color-secondary-rgb: var(--hx-ui-700-rgb);
  --ion-color-secondary-contrast: var(--white);
  --ion-color-secondary-contrast-rgb: var(--white-rgb);
  --ion-color-secondary-shade: var(--hx-ui-900);
  --ion-color-secondary-tint: var(--hx-ui-600);
  /** tertiary (Should be used as clear mode only) **/
  --ion-color-tertiary: var(--hx-gray-800);
  --ion-color-tertiary-rgb: 82, 82, 82;
  --ion-color-tertiary-contrast: var(--white);
  --ion-color-tertiary-contrast-rgb: var(--white-rgb);
  --ion-color-tertiary-shade: var(--hx-gray-900);
  --ion-color-tertiary-tint: var(--hx-gray-600);
  /** success **/
  --ion-color-success: var(--hx-success-400);
  --ion-color-success-rgb: var(--hx-success-400-rgb);
  --ion-color-success-contrast: var(--white);
  --ion-color-success-contrast-rgb: var(--white-rgb);
  --ion-color-success-shade: var(--hx-success-700);
  --ion-color-success-tint: var(--hx-success-300);
  /** warning **/
  --ion-color-warning: var(--hx-warning-400);
  --ion-color-warning-rgb: var(--hx-warning-400-rgb);
  --ion-color-warning-contrast: var(--white);
  --ion-color-warning-contrast-rgb: var(--white-rgb);
  --ion-color-warning-shade: var(--hx-warning-700);
  --ion-color-warning-tint: var(--hx-warning-300);
  /** danger **/
  --ion-color-danger: var(--hx-alert-400);
  --ion-color-danger-rgb: var(--hx-alert-400-rgb);
  --ion-color-danger-contrast: var(--white);
  --ion-color-danger-contrast-rgb: var(--white-rgb);
  --ion-color-danger-shade: var(--hx-warning-700);
  --ion-color-danger-tint: var(--hx-warning-300);
  /** dark **/
  --ion-color-dark: var(--hx-ui-900);
  --ion-color-dark-rgb: var(--hx-ui-900-rgb);
  --ion-color-dark-contrast: var(--white);
  --ion-color-dark-contrast-rgb: var(--white-rgb);
  --ion-color-dark-shade: var(--hx-ui-1000);
  --ion-color-dark-tint: var(--hx-ui-800);
  /** medium (Should not be used) **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: var(--white);
  --ion-color-medium-contrast-rgb: var(--white-rgb);
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;
  /** light **/
  --ion-color-light: var(--hx-ui-100);
  --ion-color-light-rgb: var(--hx-ui-100-rgb);
  --ion-color-light-contrast: var(--black);
  --ion-color-light-contrast-rgb: var(--black-rgb);
  --ion-color-light-shade: var(--hx-ui-200);
  --ion-color-light-tint: var(--hx-ui-50);
}

* {
  font-family: "Fira Sans", "FiraSans", Helvetica, sans-serif;
  font-variant-ligatures: none;
}

.md body.dark {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18, 18, 18;
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;
  --ion-border-color: #222222;
  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;
}

.transparent {
  background-color: transparent !important;
}
.transparent body {
  --ion-background-color: transparent !important;
}

.md body:not(.dark),
.ios body:not(.dark) {
  /* Set the background of the entire app */
  --ion-background-color: var(--hx-ui-100);
  --ion-tab-bar-background: var(--white);
  --ion-text-color: rgba(var(--hx-emphasis), 0.87);
}
.md body:not(.dark) ion-footer,
.ios body:not(.dark) ion-footer {
  background-color: var(--white);
}

ion-header {
  --background: var(--white);
  box-shadow: var(--hx-shadow-navigation) !important;
}
ion-header.header-md:after {
  background-image: none !important;
}
ion-header ion-toolbar ion-buttons .navigation__icon {
  color: #ada9b5;
  font-size: 24px;
}
ion-header ion-title .navigation__title {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
ion-header ion-title .navigation__title ion-select {
  min-height: auto;
}
ion-header ion-title .navigation__title ion-select::part(container) {
  display: flex;
  justify-content: center;
  width: 100% !important;
}
ion-header ion-title .navigation__title ion-select::part(text) {
  flex: none !important;
}
ion-header ion-title .navigation__title ion-select::part(icon) {
  opacity: 1 !important;
}
ion-header ion-title .navigation__title .navigation__subtitle {
  padding-top: 4px;
  text-align: center;
}
ion-header ion-segment {
  --background: var(--hx-ui-700);
  border-radius: 0px;
}
ion-header ion-segment ion-segment-button {
  --background-hover-opacity: 0;
  --color: var(--hx-normal--dark);
  --color-hover: var(--hx-normal);
}

.content-md {
  background-color: var(--hx-ui-100);
}

.empty-state {
  align-content: center;
  align-items: center;
  background: var(--hx-ui-100);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.empty-state__wrapper {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 1rem;
  text-align: center;
  color: var(--hx-normal);
}
.empty-state__image {
  height: 200px;
}
.empty-state__title {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
.empty-state__message {
  font-size: 0.8rem;
}

.tabs-detail {
  padding: 1rem 0;
}
.tabs-detail .tabs-wrapper {
  display: flex;
  height: auto;
  justify-content: center;
  width: 100%;
}
.tabs-detail .tabs-wrapper ion-segment-button {
  transition: color 0.25s ease-out;
  background-color: var(--hx-white);
  border: 1px solid transparent;
  box-shadow: var(--hx-shadow-button);
  color: var(--hx-normal) !important;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 40px;
  margin: 0 -2px;
  max-width: 140px;
  min-width: 40px;
  text-transform: none;
}
.tabs-detail .tabs-wrapper ion-segment-button:first-child {
  border-radius: 4px 0 0 4px;
  text-align: right;
}
.tabs-detail .tabs-wrapper ion-segment-button:last-child {
  border-radius: 0 4px 4px 0;
  text-align: left;
}
.tabs-detail .tabs-wrapper .active,
.tabs-detail .tabs-wrapper .segment-button-checked {
  --indicator-color: transparent !important;
  border-color: var(--hx-gray-300) !important;
  border: 1px solid;
  box-shadow: none !important;
  color: var(--hx-accent-400) !important;
}
.tabs-detail .tabs-wrapper .tabs-title {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.tabs-detail .tabs-wrapper .tabs-title [class*=ami-] {
  font-size: 20px;
  margin: auto;
}

ion-tab-bar {
  --background: #f8f8f8;
}
ion-tab-bar ion-tab-button {
  --background: #f8f8f8;
}
ion-tab-bar ion-tab-button:not(.tab-selected) {
  color: var(--hx-normal);
}
ion-tab-bar ion-tab-button i {
  font-size: 1.5rem;
}
ion-tab-bar ion-tab-button ion-label {
  font-size: 0.8rem;
}

ion-action-sheet .action-sheet-selected {
  background-color: var(--hx-ui-200) !important;
  box-shadow: inset 2px 0 0 var(--hx-accent-400);
  color: var(--hx-emphasis);
  font-weight: 400 !important;
}

ion-modal.filter-modal {
  padding-bottom: var(--ion-safe-area-bottom);
  padding-top: var(--ion-safe-area-top);
}

ion-modal.sort-modal {
  padding-bottom: var(--ion-safe-area-bottom);
  padding-top: var(--ion-safe-area-top);
}
ion-modal.sort-modal ion-backdrop {
  visibility: visible;
}
ion-modal.sort-modal .modal-wrapper {
  bottom: 0 !important;
  height: auto;
  min-width: 100%;
  position: absolute !important;
}
ion-modal.sort-modal .modal-wrapper,
ion-modal.sort-modal .modal-wrapper .ion-page,
ion-modal.sort-modal .modal-wrapper .ion-page .container,
ion-modal.sort-modal .modal-wrapper .ion-page .container .scroll-content {
  contain: content;
  left: auto;
  position: relative;
  top: auto;
}
ion-modal.sort-modal .modal-wrapper .ion-page {
  display: block;
  overflow-y: auto;
}
ion-modal.sort-modal .modal-wrapper ion-content {
  min-height: 400px;
}

ion-alert.setting-select .alert-wrapper {
  --background: var(--hx-white) !important;
  background: var(--hx-white) !important;
}

ion-alert.setting-select .select-interface-option[aria-checked=true] .alert-radio-label {
  --color: var(--hx-accent-400) !important;
  color: var(--hx-accent-400) !important;
}

ion-alert.setting-select .alert-radio-icon.sc-ion-alert-md {
  left: 1rem;
}

ion-alert.setting-select .alert-radio-label.sc-ion-alert-md {
  padding-inline-start: 2rem;
}

ion-popover.sensor-options .popover__options {
  list-style: none;
  padding: 0px;
}
ion-popover.sensor-options .popover__options .popover__option {
  padding-left: 1rem;
  cursor: pointer;
}

ion-searchbar .searchbar-cancel-button.sc-ion-searchbar-md {
  padding-left: 8px;
}

.kpiLabel_medium .house-card__kpi-age-label, .kpiLabel_medium .house-card__kpi-bird-label, .kpiLabel_medium .house-card__kpi-livability-label {
  font-size: 11px !important;
}
.kpiLabel_medium .house-card .sensors__content-6 .sensor__item .sensor__item-kpi-label,
.kpiLabel_medium .house-card .sensors__content-10 .sensor__item .sensor__item-kpi-label {
  font-size: 11px !important;
}

.kpiLabel_large .house-card__kpi-age-label, .kpiLabel_large .house-card__kpi-bird-label, .kpiLabel_large .house-card__kpi-livability-label {
  font-size: 12px !important;
}
.kpiLabel_large .house-card .sensors__content-6 .sensor__item .sensor__item-kpi-label,
.kpiLabel_large .house-card .sensors__content-10 .sensor__item .sensor__item-kpi-label {
  font-size: 12px !important;
}

.kpiLabel_medium .card-kpis .card-kpis__title-label,
.kpiLabel_medium .card-kpis .card-kpis__label {
  font-size: 11px !important;
}

.kpiLabel_large .card-kpis .card-kpis__title-label,
.kpiLabel_large .card-kpis .card-kpis__label {
  font-size: 12px !important;
}

ion-action-sheet .action-sheet-group.sc-ion-action-sheet-md:last-child {
  padding-bottom: var(--ion-safe-area-bottom);
}

.score-alert .alert-wrapper .alert-message {
  padding-bottom: 0 !important;
}
.score-alert .alert-wrapper .alert-message > .header {
  width: 100%;
  padding-bottom: 1rem;
}
.score-alert .alert-wrapper .alert-message > .header p {
  color: var(--hx-normal);
  margin: 0;
  padding-bottom: 0.5rem;
}
.score-alert .alert-wrapper .alert-message > .footer {
  width: 100%;
}
.score-alert .alert-wrapper .alert-message > .footer p {
  color: var(--hx-emphasis);
  font-weight: 500;
  margin: 0;
}

/* ================== Helpers ==================== */
/* ==================
	  Transforms
==================== */
/* ==================
     Transitions
==================== */
/* ==================
     Animations
==================== */
/* ==================
    Placeholder
==================== */
/* ==================
   Pseudo Elements
==================== */
/* ==================
    Retina Image
==================== */
/* ==================
     Box Shadow
==================== */
/* ==================
   Flickering Fix
==================== */
/* ==================
   Disable Highlight
==================== */
/* ==================
   CSS Columns
==================== */
/* ==================
   Flexbox
==================== */
.h20 {
  height: 20%;
}

.h30 {
  height: 30%;
}

.h40 {
  height: 40%;
}

.h50 {
  height: 50%;
}

.h60 {
  height: 60%;
}

.h70 {
  height: 70%;
}

.h80 {
  height: 80%;
}

.h100 {
  height: 100%;
}

.h1 {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0;
}

.h2 {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
}
@media screen and (max-width: 1400px), screen and (max-height: 900px) {
  .h2 {
    font-size: 24px;
  }
}
@media screen and (max-width: 1600px), screen and (max-height: 900px) {
  .h2 {
    font-size: 28.8px;
  }
}

.h3 {
  font-size: 1.75rem !important;
  font-weight: 500;
  letter-spacing: 0;
}

.title {
  color: var(--hx-emphasis);
  font-size: 24px;
  letter-spacing: 0;
}

.headline {
  color: var(--hx-emphasis);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
}

.subtitle {
  color: var(--hx-emphasis);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.15px;
}

.body,
.body1 {
  color: var(--hx-emphasis);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.body2 {
  color: var(--hx-emphasis);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.caption {
  color: var(--hx-emphasis);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.h1_light,
.h2_light,
.body_light,
.body2_light,
.caption_light {
  color: white;
}

.text-normal {
  color: var(--hx-normal);
}

.col-mb {
  margin-bottom: 32px;
}

[hidden] {
  display: none !important;
}

.no-padding {
  padding: 0 !important;
}

.wizard-on {
  overflow: hidden;
}

.row-flex.expand {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  height: calc(100% - 11.5rem);
  display: flex;
}

/* ================== Mixins ==================== */
/* ==================
	  Transforms
==================== */
/* ==================
     Transitions
==================== */
/* ==================
     Animations
==================== */
/* ==================
    Placeholder
==================== */
/* ==================
   Pseudo Elements
==================== */
/* ==================
    Retina Image
==================== */
/* ==================
     Box Shadow
==================== */
/* ==================
   Flickering Fix
==================== */
/* ==================
   Disable Highlight
==================== */
/* ==================
   CSS Columns
==================== */
/* ==================
   Flexbox
==================== */
@font-face {
  font-family: "FiraSans";
  src: url('FiraSans-Light.woff') format("woff"), url('FiraSans-Light.ttf') format("truetype"), url('FiraSans-Light.svg#fira_sanslight') format("svg");
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "FiraSans";
  src: url('FiraSans-Regular.woff') format("woff"), url('FiraSans-Regular.ttf') format("truetype"), url('FiraSans-Regular.svg#FiraSans') format("svg");
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "FiraSans";
  src: url('FiraSans-Medium.woff') format("woff"), url('FiraSans-Medium.ttf') format("truetype"), url('FiraSans-Medium.svg#FiraSans') format("svg");
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "latoblack";
  src: url('lato-black-webfont.woff2') format("woff2"), url('lato-black-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latoblack_italic";
  src: url('lato-blackitalic-webfont.woff2') format("woff2"), url('lato-blackitalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latobold";
  src: url('lato-bold-webfont.woff2') format("woff2"), url('lato-bold-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latobold_italic";
  src: url('lato-bolditalic-webfont.woff2') format("woff2"), url('lato-bolditalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latohairline";
  src: url('lato-hairline-webfont.woff2') format("woff2"), url('lato-hairline-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latohairline_italic";
  src: url('lato-hairlineitalic-webfont.woff2') format("woff2"), url('lato-hairlineitalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latoitalic";
  src: url('lato-italic-webfont.woff2') format("woff2"), url('lato-italic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latolight";
  src: url('lato-light-webfont.woff2') format("woff2"), url('lato-light-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latolight_italic";
  src: url('lato-lightitalic-webfont.woff2') format("woff2"), url('lato-lightitalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "latoregular";
  src: url('lato-regular-webfont.woff2') format("woff2"), url('lato-regular-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansbold";
  src: url('OpenSans-Bold-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansbold_italic";
  src: url('OpenSans-BoldItalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansextrabold";
  src: url('OpenSans-ExtraBold-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansextrabold_italic";
  src: url('OpenSans-ExtraBoldItalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansitalic";
  src: url('OpenSans-Italic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanslight";
  src: url('OpenSans-Light-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanslight_italic";
  src: url('OpenSans-LightItalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansitalic";
  src: url('OpenSans-Italic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansregular";
  src: url('OpenSans-Regular-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanssemibold";
  src: url('OpenSans-Semibold-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanssemibold_italic";
  src: url('OpenSans-SemiboldItalic-webfont.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "sonar";
  src: url('sonar.eot?nworbs');
  src: url('sonar.eot?nworbs#iefix') format("embedded-opentype"), url('sonar.ttf?nworbs') format("truetype"), url('sonar.woff?nworbs') format("woff"), url('sonar.svg?nworbs#sonar') format("svg");
  font-weight: normal;
  font-style: normal;
}
.snr {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "sonar" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.snr-alert:before {
  content: "\e900";
}

.snr-ammonia:before {
  content: "\e901";
}

.snr-farms:before {
  content: "\e902";
}

.snr-feed:before {
  content: "\e903";
}

.snr-humidity:before {
  content: "\e904";
}

.snr-mortality:before {
  content: "\e905";
}

.snr-refresh:before {
  content: "\e906";
}

.snr-sensor:before {
  content: "\e907";
}

.snr-settings:before {
  content: "\e908";
}

.snr-sonar:before {
  content: "\e909";
}

.snr-temperature:before {
  content: "\e90a";
}

.snr-water:before {
  content: "\e90b";
}

.snr-weight:before {
  content: "\e90c";
}

@font-face {
  font-family: "mtech";
  src: url('mtech.eot?gy864n');
  src: url('mtech.eot?gy864n#iefix') format("embedded-opentype"), url('mtech.ttf?gy864n') format("truetype"), url('mtech.woff?gy864n') format("woff"), url('mtech.svg?gy864n#mtech') format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=ami-], [class*=" ami-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "mtech" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ami-xs {
  font-size: 0.8rem !important;
}

.ami-xs {
  font-size: 0.875rem !important;
}

.ami-m {
  font-size: 1rem !important;
}

.ami-l {
  font-size: 1.125rem !important;
}

.ami-xl {
  font-size: 1.25rem !important;
}

.ami-xxl {
  font-size: 1.5rem !important;
}

.ami-xs {
  font-size: 0.8rem !important;
}

.ami-xs {
  font-size: 0.875rem !important;
}

.ami-m {
  font-size: 1rem !important;
}

.ami-l {
  font-size: 1.125rem !important;
}

.ami-xl {
  font-size: 1.25rem !important;
}

.ami-xxl {
  font-size: 1.5rem !important;
}

.ami-download-text:before {
  content: "\ea92";
}

.ami-open-right:before {
  content: "\ea93";
}

.ami-attachments:before {
  content: "\ea8d";
}

.ami-collapse-panel:before {
  content: "\ea8e";
}

.ami-custom:before {
  content: "\ea8f";
}

.ami-expand-panel:before {
  content: "\ea90";
}

.ami-my-workspace:before {
  content: "\ea91";
}

.ami-swine-scp:before {
  content: "\ea8c";
}

.ami-background-jobs:before {
  content: "\ea86";
}

.ami-swine-configuration:before {
  content: "\ea87";
}

.ami-swine-dashboard:before {
  content: "\ea88";
}

.ami-swine-log-file:before {
  content: "\ea89";
}

.ami-swine-placement-projection:before {
  content: "\ea8a";
}

.ami-swine-profile:before {
  content: "\ea8b";
}

.ami-interface-batches:before {
  content: "\ea81";
}

.ami-report-batches:before {
  content: "\ea82";
}

.ami-scan-barcode:before {
  content: "\ea83";
}

.ami-scan-qr:before {
  content: "\ea84";
}

.ami-scan-wand-tool:before {
  content: "\ea85";
}

.ami-volume-off:before {
  content: "\ea46";
}

.ami-layer-configuration:before {
  content: "\ea79";
}

.ami-layer-dashboard:before {
  content: "\ea7a";
}

.ami-layer-flocks:before {
  content: "\ea7b";
}

.ami-layer-log-file:before {
  content: "\ea7c";
}

.ami-layer-profiles:before {
  content: "\ea7d";
}

.ami-animal-welfare-index:before {
  content: "\ea7e";
}

.ami-distress:before {
  content: "\ea7f";
}

.ami-movement:before {
  content: "\ea80";
}

.ami-breed-wean-right:before {
  content: "\ea77";
}

.ami-breed-wean-left:before {
  content: "\ea78";
}

.ami-check:before {
  content: "\ea70";
}

.ami-delete-all:before {
  content: "\ea71";
}

.ami-pending:before {
  content: "\ea72";
}

.ami-play-circle:before {
  content: "\ea73";
}

.ami-stop-circle:before {
  content: "\ea74";
}

.ami-tick-circle:before {
  content: "\ea75";
}

.ami-alert-circle:before {
  content: "\ea76";
}

.ami-breeder-configuration:before {
  content: "\ea57";
}

.ami-breeder-dashboard:before {
  content: "\ea58";
}

.ami-breeder-flocks:before {
  content: "\ea59";
}

.ami-breeder-log-files:before {
  content: "\ea5a";
}

.ami-breeder-profiles:before {
  content: "\ea5b";
}

.ami-growout-configuration:before {
  content: "\ea5c";
}

.ami-growout-dashboard:before {
  content: "\ea5d";
}

.ami-growout-log-files:before {
  content: "\ea5e";
}

.ami-growout-placement-projection:before {
  content: "\ea5f";
}

.ami-growout-plant-projection:before {
  content: "\ea60";
}

.ami-growout-profiles:before {
  content: "\ea63";
}

.ami-hatchery-chick-distribution:before {
  content: "\ea64";
}

.ami-hatchery-configurations:before {
  content: "\ea65";
}

.ami-hatchery-egg-distribution:before {
  content: "\ea66";
}

.ami-hatchery-log-files:before {
  content: "\ea67";
}

.ami-hatchery-product:before {
  content: "\ea68";
}

.ami-hatchery-profiles:before {
  content: "\ea69";
}

.ami-live-haul-configuration:before {
  content: "\ea6a";
}

.ami-live-haul-dashboard:before {
  content: "\ea6b";
}

.ami-live-haul-log-files:before {
  content: "\ea6c";
}

.ami-live-haul-profiles:before {
  content: "\ea6d";
}

.ami-live-haul-projections:before {
  content: "\ea6e";
}

.ami-live-haul-resources:before {
  content: "\ea6f";
}

.ami-groups:before {
  content: "\ea56";
}

.ami-summaries:before {
  content: "\ea62";
}

.ami-screen-profiles:before {
  content: "\ea61";
}

.ami-supply-chain-planning:before {
  content: "\ea55";
}

.ami-disabled-filters:before {
  content: "\ea4e";
}

.ami-finisher-pigs_1:before {
  content: "\ea4f";
}

.ami-finisher-pigs:before {
  content: "\ea50";
}

.ami-nursery-pig:before {
  content: "\ea51";
}

.ami-nursery-pigs:before {
  content: "\ea52";
}

.ami-weaned-pig:before {
  content: "\ea53";
}

.ami-weaned-pigs:before {
  content: "\ea54";
}

.ami-egg-distribution:before {
  content: "\ea4c";
}

.ami-chick-distribution:before {
  content: "\ea4d";
}

.ami-notes:before {
  content: "\ea4b";
}

.ami-data-base:before {
  content: "\ea4a";
}

.ami-tree-component:before {
  content: "\ea48";
}

.ami-dropdown:before {
  content: "\ea49";
}

.ami-volume:before {
  content: "\ea47";
}

.ami-add-circle:before {
  content: "\ea41";
}

.ami-flag:before {
  content: "\ea42";
}

.ami-folder-open:before {
  content: "\ea43";
}

.ami-method:before {
  content: "\ea44";
}

.ami-property:before {
  content: "\ea45";
}

.ami-clear-projections:before {
  content: "\ea3f";
}

.ami-report-layouts:before {
  content: "\ea40";
}

.ami-sustain-emissions-calculator:before {
  content: "\ea3e";
}

.ami-cv:before {
  content: "\ea3b";
}

.ami-feed-conversion:before {
  content: "\ea3c";
}

.ami-uniformity:before {
  content: "\ea3d";
}

.ami-sustain-electricity:before {
  content: "\ea32";
}

.ami-sustain-feed:before {
  content: "\ea33";
}

.ami-sustain-fuel:before {
  content: "\ea34";
}

.ami-sustain-main:before {
  content: "\ea35";
}

.ami-sustain-manure:before {
  content: "\ea36";
}

.ami-sustain-refrigeration:before {
  content: "\ea37";
}

.ami-sustain-steam:before {
  content: "\ea38";
}

.ami-sustain-waste:before {
  content: "\ea39";
}

.ami-sustain-water:before {
  content: "\ea3a";
}

.ami-restore-master-data-link:before {
  content: "\ea31";
}

.ami-herd-events:before {
  content: "\ea2c";
}

.ami-json:before {
  content: "\ea2d";
}

.ami-run-optimizer:before {
  content: "\ea2e";
}

.ami-search-herd-events:before {
  content: "\ea2f";
}

.ami-semen:before {
  content: "\ea30";
}

.ami-capitalizations-swine:before {
  content: "\ea2b";
}

.ami-light-intensity:before {
  content: "\ea29";
}

.ami-static-pressure:before {
  content: "\ea2a";
}

.ami-long-term-targets:before {
  content: "\ea22";
}

.ami-machinery-efficiency-highest:before {
  content: "\ea23";
}

.ami-machinery-efficiency-lowest:before {
  content: "\ea24";
}

.ami-machinery-efficiency:before {
  content: "\ea25";
}

.ami-overall-yield:before {
  content: "\ea26";
}

.ami-storage-conversions:before {
  content: "\ea27";
}

.ami-storage-costs:before {
  content: "\ea28";
}

.ami-on-time-in-full:before {
  content: "\ea1f";
}

.ami-share-dashboards:before {
  content: "\ea20";
}

.ami-stock-out:before {
  content: "\ea21";
}

.ami-post-new:before {
  content: "\ea1c";
}

.ami-post:before {
  content: "\ea1d";
}

.ami-save-new:before {
  content: "\ea1e";
}

.ami-resources-utilization:before {
  content: "\ea1a";
}

.ami-indirect-labor:before {
  content: "\ea1b";
}

.ami-demand:before {
  content: "\ea14";
}

.ami-off:before {
  content: "\ea15";
}

.ami-offline:before {
  content: "\ea16";
}

.ami-on:before {
  content: "\ea17";
}

.ami-print:before {
  content: "\ea18";
}

.ami-wizard:before {
  content: "\ea19";
}

.ami-bottlenecks:before {
  content: "\ea10";
}

.ami-format-align-center:before {
  content: "\ea11";
}

.ami-format-align-left:before {
  content: "\ea12";
}

.ami-format-align-right:before {
  content: "\ea13";
}

.ami-record:before {
  content: "\ea0f";
}

.ami-financial:before {
  content: "\ea0c";
}

.ami-purchases:before {
  content: "\ea0d";
}

.ami-sales:before {
  content: "\ea0e";
}

.ami-result-analysis:before {
  content: "\ea0b";
}

.ami-list:before {
  content: "\ea0a";
}

.ami-plant-assignment:before {
  content: "\ea09";
}

.ami-layers:before {
  content: "\ea06";
}

.ami-creating-loads:before {
  content: "\ea07";
}

.ami-haul-back:before {
  content: "\ea08";
}

.ami-w-cloudy:before {
  content: "\e900";
}

.ami-w-fog:before {
  content: "\e901";
}

.ami-w-heat:before {
  content: "\e902";
}

.ami-w-humidity:before {
  content: "\e903";
}

.ami-w-lightning:before {
  content: "\e904";
}

.ami-w-main:before {
  content: "\e905";
}

.ami-w-night:before {
  content: "\e906";
}

.ami-w-partlycloudy:before {
  content: "\e907";
}

.ami-w-precipitation:before {
  content: "\e908";
}

.ami-w-rainy:before {
  content: "\e909";
}

.ami-w-snow:before {
  content: "\e90a";
}

.ami-w-sunny:before {
  content: "\e90b";
}

.ami-w-windy:before {
  content: "\e90c";
}

.ami-gas-consumption:before {
  content: "\e90d";
}

.ami-power-consumption:before {
  content: "\e90e";
}

.ami-air-flow:before {
  content: "\e90f";
}

.ami-ammonia:before {
  content: "\e910";
}

.ami-carbon-dioxide:before {
  content: "\e911";
}

.ami-humidity:before {
  content: "\e912";
}

.ami-sensors:before {
  content: "\e913";
}

.ami-sonar:before {
  content: "\e914";
}

.ami-threshold:before {
  content: "\e915";
}

.ami-water:before {
  content: "\e916";
}

.ami-bell-curve:before {
  content: "\e917";
}

.ami-condemnations_1:before {
  content: "\e918";
}

.ami-doa-chicken:before {
  content: "\e919";
}

.ami-doa-duck:before {
  content: "\e91a";
}

.ami-doa-swine:before {
  content: "\e91b";
}

.ami-doa-turkey:before {
  content: "\e91c";
}

.ami-long-term:before {
  content: "\e91d";
}

.ami-materials:before {
  content: "\e91e";
}

.ami-processing-duck:before {
  content: "\e91f";
}

.ami-processing-orders:before {
  content: "\e920";
}

.ami-processing-swine:before {
  content: "\e921";
}

.ami-processing-turkey:before {
  content: "\e922";
}

.ami-product-breakdown:before {
  content: "\e923";
}

.ami-pull-mode:before {
  content: "\e924";
}

.ami-replanning-alt:before {
  content: "\e925";
}

.ami-replanning:before {
  content: "\e926";
}

.ami-short-term:before {
  content: "\e927";
}

.ami-shrink:before {
  content: "\e928";
}

.ami-source-animals:before {
  content: "\e929";
}

.ami-supply:before {
  content: "\e92a";
}

.ami-target:before {
  content: "\e92b";
}

.ami-unassigned:before {
  content: "\e92c";
}

.ami-activity:before {
  content: "\e92d";
}

.ami-analytical-structures:before {
  content: "\e92e";
}

.ami-bin:before {
  content: "\e92f";
}

.ami-bonus:before {
  content: "\e930";
}

.ami-breeder-placement:before {
  content: "\e931";
}

.ami-breeder:before {
  content: "\e932";
}

.ami-calc-pay:before {
  content: "\e933";
}

.ami-capitalizations:before {
  content: "\e934";
}

.ami-chick-dispose:before {
  content: "\e935";
}

.ami-chick:before {
  content: "\e936";
}

.ami-chicken:before {
  content: "\e937";
}

.ami-compositions:before {
  content: "\e938";
}

.ami-condemnations:before {
  content: "\e939";
}

.ami-cost-details:before {
  content: "\e93a";
}

.ami-ducks:before {
  content: "\e93b";
}

.ami-egg-dispose:before {
  content: "\e93c";
}

.ami-egg-regrade:before {
  content: "\e93d";
}

.ami-egg-residue:before {
  content: "\e93e";
}

.ami-egg-room:before {
  content: "\e93f";
}

.ami-egg-sales:before {
  content: "\e940";
}

.ami-egg-transfer:before {
  content: "\e941";
}

.ami-eggs:before {
  content: "\e942";
}

.ami-enviromental:before {
  content: "\e943";
}

.ami-excel:before {
  content: "\e944";
}

.ami-farm:before {
  content: "\e945";
}

.ami-feed-consumed:before {
  content: "\e946";
}

.ami-feed-delivery:before {
  content: "\e947";
}

.ami-feed-inventories:before {
  content: "\e948";
}

.ami-feed:before {
  content: "\e949";
}

.ami-field-products:before {
  content: "\e94a";
}

.ami-field:before {
  content: "\e94b";
}

.ami-fm-main:before {
  content: "\e94c";
}

.ami-growout-placement:before {
  content: "\e94d";
}

.ami-growout:before {
  content: "\e94e";
}

.ami-hallway:before {
  content: "\e94f";
}

.ami-hatcher:before {
  content: "\e950";
}

.ami-health:before {
  content: "\e951";
}

.ami-home:before {
  content: "\e952";
}

.ami-house:before {
  content: "\e953";
}

.ami-houses:before {
  content: "\e954";
}

.ami-interface:before {
  content: "\e955";
}

.ami-laboratories:before {
  content: "\e956";
}

.ami-leftovers:before {
  content: "\e957";
}

.ami-money:before {
  content: "\e958";
}

.ami-mortality:before {
  content: "\e959";
}

.ami-mtech-orb:before {
  content: "\e95a";
}

.ami-po-main:before {
  content: "\e95b";
}

.ami-processing:before {
  content: "\e95c";
}

.ami-product-line:before {
  content: "\e95d";
}

.ami-product-order:before {
  content: "\e95e";
}

.ami-projection-load:before {
  content: "\e95f";
}

.ami-projection:before {
  content: "\e960";
}

.ami-setter:before {
  content: "\e961";
}

.ami-standards:before {
  content: "\e962";
}

.ami-surveys:before {
  content: "\e963";
}

.ami-swine:before {
  content: "\e964";
}

.ami-temperature:before {
  content: "\e965";
}

.ami-transfer-alt:before {
  content: "\e966";
}

.ami-transfer:before {
  content: "\e967";
}

.ami-turkey:before {
  content: "\e968";
}

.ami-wastes:before {
  content: "\e969";
}

.ami-weight:before {
  content: "\e96a";
}

.ami-wh-main:before {
  content: "\e96b";
}

.ami-chevron-left:before {
  content: "\e96c";
}

.ami-chevron-right:before {
  content: "\e96d";
}

.ami-chevron-down:before {
  content: "\e96e";
}

.ami-chevron-up:before {
  content: "\e96f";
}

.ami-slim-left:before {
  content: "\e970";
}

.ami-slim-up:before {
  content: "\e971";
}

.ami-slim-right:before {
  content: "\e972";
}

.ami-slim-down:before {
  content: "\e973";
}

.ami-arrow-up:before {
  content: "\e974";
}

.ami-arrow-right:before {
  content: "\e975";
}

.ami-arrow-down:before {
  content: "\e976";
}

.ami-arrow-left:before {
  content: "\e977";
}

.ami-slim-backward:before {
  content: "\e978";
}

.ami-slim-upward:before {
  content: "\e979";
}

.ami-slim-forward:before {
  content: "\e97a";
}

.ami-slim-downward:before {
  content: "\e97b";
}

.ami-chevron-forward:before {
  content: "\e97c";
}

.ami-chevron-upward:before {
  content: "\e97d";
}

.ami-chevron-backward:before {
  content: "\e97e";
}

.ami-chevron-downward:before {
  content: "\e97f";
}

.ami-forward:before {
  content: "\e980";
}

.ami-backward:before {
  content: "\e981";
}

.ami-drop-down:before {
  content: "\e982";
}

.ami-drop-right:before {
  content: "\e983";
}

.ami-drop-up:before {
  content: "\e984";
}

.ami-drop-left:before {
  content: "\e985";
}

.ami-drop-up-right:before {
  content: "\e986";
}

.ami-drop-down-left:before {
  content: "\e987";
}

.ami-drop-up-left:before {
  content: "\e988";
}

.ami-drop-down-right:before {
  content: "\e989";
}

.ami-age:before {
  content: "\e98a";
}

.ami-alert:before {
  content: "\e98b";
}

.ami-analytics:before {
  content: "\e98c";
}

.ami-bell-alt:before {
  content: "\e98d";
}

.ami-bell:before {
  content: "\e98e";
}

.ami-big-cards:before {
  content: "\e98f";
}

.ami-building:before {
  content: "\e990";
}

.ami-calendar:before {
  content: "\e991";
}

.ami-cancel:before {
  content: "\e992";
}

.ami-cart:before {
  content: "\e993";
}

.ami-chart-bar:before {
  content: "\e994";
}

.ami-chart-donut:before {
  content: "\e995";
}

.ami-chart-line:before {
  content: "\e996";
}

.ami-clone:before {
  content: "\e997";
}

.ami-collapse:before {
  content: "\e998";
}

.ami-copy-daily:before {
  content: "\e999";
}

.ami-copy-date:before {
  content: "\e99a";
}

.ami-currency:before {
  content: "\e99b";
}

.ami-dashboard:before {
  content: "\e99c";
}

.ami-delete:before {
  content: "\e99d";
}

.ami-disk:before {
  content: "\e99e";
}

.ami-download:before {
  content: "\e99f";
}

.ami-drag-horizontal:before {
  content: "\e9a0";
}

.ami-drag-vertical:before {
  content: "\e9a1";
}

.ami-ellipsis:before {
  content: "\e9a2";
}

.ami-excel1:before {
  content: "\e9a3";
}

.ami-expand:before {
  content: "\e9a4";
}

.ami-favorrite:before {
  content: "\e9a5";
}

.ami-file-pdf:before {
  content: "\e9a6";
}

.ami-file-xls:before {
  content: "\e9a7";
}

.ami-file:before {
  content: "\e9a8";
}

.ami-filter-alt-clear:before {
  content: "\e9a9";
}

.ami-filter-alt:before {
  content: "\e9aa";
}

.ami-filter-clear:before {
  content: "\e9ab";
}

.ami-filter:before {
  content: "\e9ac";
}

.ami-finance:before {
  content: "\e9ad";
}

.ami-flow-chart-link:before {
  content: "\e9ae";
}

.ami-flow-chart-unlink:before {
  content: "\e9af";
}

.ami-flow-data:before {
  content: "\e9b0";
}

.ami-folder:before {
  content: "\e9b1";
}

.ami-gantt-alt:before {
  content: "\e9b2";
}

.ami-gantt:before {
  content: "\e9b3";
}

.ami-gear:before {
  content: "\e9b4";
}

.ami-gears:before {
  content: "\e9b5";
}

.ami-group:before {
  content: "\e9b6";
}

.ami-hamburger:before {
  content: "\e9b7";
}

.ami-help:before {
  content: "\e9b8";
}

.ami-hide:before {
  content: "\e9b9";
}

.ami-history:before {
  content: "\e9ba";
}

.ami-home1:before {
  content: "\e9bb";
}

.ami-image:before {
  content: "\e9bc";
}

.ami-indent:before {
  content: "\e9bd";
}

.ami-info-alt:before {
  content: "\e9be";
}

.ami-info:before {
  content: "\e9bf";
}

.ami-key:before {
  content: "\e9c0";
}

.ami-language:before {
  content: "\e9c1";
}

.ami-lightning:before {
  content: "\e9c2";
}

.ami-lock:before {
  content: "\e9c3";
}

.ami-log-off:before {
  content: "\e9c4";
}

.ami-machine-learning:before {
  content: "\e9c5";
}

.ami-machinery:before {
  content: "\e9c6";
}

.ami-map:before {
  content: "\e9c7";
}

.ami-master-data:before {
  content: "\e9c8";
}

.ami-minus:before {
  content: "\e9c9";
}

.ami-more:before {
  content: "\e9ca";
}

.ami-new-folder:before {
  content: "\e9cb";
}

.ami-new-page:before {
  content: "\e9cc";
}

.ami-news:before {
  content: "\e9cd";
}

.ami-not-reviewed:before {
  content: "\e9ce";
}

.ami-open:before {
  content: "\e9cf";
}

.ami-outdent:before {
  content: "\e9d0";
}

.ami-page:before {
  content: "\e9d1";
}

.ami-palette:before {
  content: "\e9d2";
}

.ami-pencil:before {
  content: "\e9d3";
}

.ami-people:before {
  content: "\e9d4";
}

.ami-phone-rotate-landscape:before {
  content: "\e9d5";
}

.ami-phone-rotate-portrait:before {
  content: "\e9d6";
}

.ami-pin:before {
  content: "\e9d7";
}

.ami-pinned:before {
  content: "\e9d8";
}

.ami-pivot-view:before {
  content: "\e9d9";
}

.ami-play:before {
  content: "\e9da";
}

.ami-plus:before {
  content: "\e9db";
}

.ami-power:before {
  content: "\e9dc";
}

.ami-products:before {
  content: "\e9dd";
}

.ami-refresh:before {
  content: "\e9de";
}

.ami-reorder-horizontal:before {
  content: "\e9df";
}

.ami-reorder-vertical:before {
  content: "\e9e0";
}

.ami-report-builder:before {
  content: "\e9e1";
}

.ami-reports:before {
  content: "\e9e2";
}

.ami-return:before {
  content: "\e9e3";
}

.ami-reviewed:before {
  content: "\e9e4";
}

.ami-rocket:before {
  content: "\e9e5";
}

.ami-rss:before {
  content: "\e9e6";
}

.ami-ruler:before {
  content: "\e9e7";
}

.ami-schedule:before {
  content: "\e9e8";
}

.ami-search:before {
  content: "\e9e9";
}

.ami-shrink1:before {
  content: "\e9ea";
}

.ami-small-cards:before {
  content: "\e9eb";
}

.ami-sort-alpha-a:before {
  content: "\e9ec";
}

.ami-sort-alpha-d:before {
  content: "\e9ed";
}

.ami-sort-numeric-a:before {
  content: "\e9ee";
}

.ami-sort-numeric-d:before {
  content: "\e9ef";
}

.ami-source-control:before {
  content: "\e9f0";
}

.ami-speed:before {
  content: "\e9f1";
}

.ami-success:before {
  content: "\e9f2";
}

.ami-support:before {
  content: "\e9f3";
}

.ami-table-large:before {
  content: "\e9f4";
}

.ami-tasks:before {
  content: "\e9f5";
}

.ami-tiles:before {
  content: "\e9f6";
}

.ami-time:before {
  content: "\e9f7";
}

.ami-tools:before {
  content: "\e9f8";
}

.ami-uncollapse:before {
  content: "\e9f9";
}

.ami-ungroup:before {
  content: "\e9fa";
}

.ami-upload:before {
  content: "\e9fb";
}

.ami-user-role:before {
  content: "\e9fc";
}

.ami-user:before {
  content: "\e9fd";
}

.ami-view:before {
  content: "\e9fe";
}

.ami-walk:before {
  content: "\e9ff";
}

.ami-warning:before {
  content: "\ea00";
}

.ami-windows:before {
  content: "\ea01";
}

.ami-worker:before {
  content: "\ea02";
}

.ami-zoom-center:before {
  content: "\ea03";
}

.ami-zoom-in:before {
  content: "\ea04";
}

.ami-zoom-out:before {
  content: "\ea05";
}

/**
 * Swiper 8.3.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: July 26, 2022
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

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