/* Default styles */

.hx-text-default {
  color: var(--palette-default-text-color) !important;
}

.hx-background-default {
  background-color: var(--palette-default-background-color) !important;
  color: var(--palette-default-background-text-color) !important;
}

.hx-background-default a,
.hx-background-default .hx-background-text-color,
.hx-background-default .hx-header {
  color: var(--palette-default-background-text-color) !important;
}

.hx-border-default {
  border-color: var(--palette-default-border-color) !important;
}

/* Action styles */

.hx-text-action {
  color: var(--palette-action-text-color) !important;
}

.hx-background-action {
  background-color: var(--palette-action-background-color) !important;
  color: var(--palette-action-background-text-color) !important;
}

.hx-background-action a,
.hx-background-action .hx-background-text-color,
.hx-background-action .hx-header {
  color: var(--palette-action-background-text-color) !important;
}

.hx-border-action {
  border-color: var(--palette-action-border-color) !important;
}

/* Positive styles */

.hx-text-positive {
  color: var(--palette-positive-text-color) !important;
}

.hx-background-positive {
  background-color: var(--palette-positive-background-color) !important;
  color: var(--palette-positive-background-text-color) !important;
}

.hx-background-positive a,
.hx-background-positive .hx-background-text-color,
.hx-background-positive .hx-header {
  color: var(--palette-positive-background-text-color) !important;
}

.hx-border-positive {
  border-color: var(--palette-positive-border-color) !important;
}

/* Warning styles */

.hx-text-warning {
  color: var(--palette-warning-text-color) !important;
}

.hx-background-warning {
  background-color: var(--palette-warning-background-color) !important;
  color: var(--palette-warning-background-text-color) !important;
}

.hx-background-warning a,
.hx-background-warning .hx-background-text-color,
.hx-background-warning .hx-header {
  color: var(--palette-warning-background-text-color) !important;
}

.hx-border-warning {
  border-color: var(--palette-warning-border-color) !important;
}

/* Negative styles */

.hx-text-negative {
  color: var(--palette-negative-text-color) !important;
}

.hx-background-negative {
  background-color: var(--palette-negative-background-color) !important;
  color: var(--palette-negative-background-text-color) !important;
}

.hx-background-negative a,
.hx-background-negative .hx-background-text-color,
.hx-background-negative .hx-header {
  color: var(--palette-negative-background-text-color) !important;
}

.hx-border-negative {
  border-color: var(--palette-negative-border-color) !important;
}

/* Info styles */

.hx-text-info {
  color: var(--palette-info-text-color) !important;
}

.hx-background-info {
  background-color: var(--palette-info-background-color) !important;
  color: var(--palette-info-background-text-color) !important;
}

.hx-background-info a,
.hx-background-info .hx-background-text-color,
.hx-background-info .hx-header {
  color: var(--palette-info-background-text-color) !important;
}

.hx-border-info {
  border-color: var(--palette-info-border-color) !important;
}

/* Complement styles */

.hx-text-complement {
  color: var(--palette-complement-text-color) !important;
}

.hx-background-complement {
  background-color: var(--palette-complement-background-color) !important;
  color: var(--palette-complement-background-text-color) !important;
}

.hx-background-complement a,
.hx-background-complement .hx-background-text-color,
.hx-background-complement .hx-header {
  color: var(--palette-complement-background-text-color) !important;
}

.hx-border-complement {
  border-color: var(--palette-complement-border-color) !important;
}

/* Contrast styles */

.hx-text-contrast {
  color: var(--palette-contrast-text-color) !important;
}

.hx-background-contrast {
  background-color: var(--palette-contrast-background-color) !important;
  color: var(--palette-contrast-background-text-color) !important;
}

.hx-background-contrast a,
.hx-background-contrast .hx-background-text-color,
.hx-background-contrast .hx-header {
  color: var(--palette-contrast-background-text-color) !important;
}

.hx-border-contrast {
  border-color: var(--palette-contrast-border-color) !important;
}

/* Disabled styles */

.hx-text-disabled {
  color: var(--palette-disabled-text-color) !important;
}

.hx-background-disabled {
  background-color: var(--palette-disabled-background-color) !important;
  color: var(--palette-disabled-background-text-color) !important;
}

.hx-border-disabled {
  border-color: var(--palette-disabled-border-color) !important;
}

html {
  font-size: var(--base-root-font-size);
}

body {
  font-size: var(--base-default-font-size);
}

body {
  font-family: var(--base-default-font-family);
  background: var(--base-body-background-color);
  color: var(--base-default-text-color);
}

button {
  font-family: var(--base-default-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hx-header-large,
.hx-header-medium,
.hx-header-small,
.hx-header {
  font-family: var(--base-heading-font-family);
  color: var(--base-heading-text-color);
}

textarea,
input {
  font-family: var(--base-default-font-family);
  font-size: var(--base-default-font-size);
  background-color: var(--base-input-background-color);
  border-color: var(--base-input-border-color);
  color: var(--base-input-text-color);
  border-radius: var(--base-input-border-radius);
}

textarea:focus,
input:focus {
  border-color: var(--base-input-focus-border-color);
}

textarea:invalid,
input:invalid {
  border-color: var(--base-input-invalid-border-color);
}

select {
  border-color: var(--base-select-border-color);
  background: var(--base-select-background-color);
  color: var(--base-select-text-color);
}

select:focus {
  border-color: var(--base-select-focus-border-color);
}

::-moz-selection {
  background: var(--base-text-select-color);
}

::selection {
  background: var(--base-text-select-color);
}

a {
  color: var(--base-link-color);
}

hr {
  border-color: var(--base-divider-color);
  border-style: var(--base-divider-style);
}

.hx-text-large {
  font-size: var(--base-large-font-size);
}

.hx-text-small {
  font-size: var(--base-small-font-size);
}

.hx-flag-typography h1,
.hx-flag-typography .hx-header-large,
h1.hx-flag-typography,
.hx-header-large.hx-flag-typography {
  font-size: var(--base-large-header-font-size);
  font-weight: var(--base-large-header-font-weight);
  line-height: var(--base-large-header-line-height);
  margin: 0 0 var(--base-header-bottom-margin) 0;
}

.hx-flag-typography h2,
.hx-flag-typography .hx-header-medium,
h2.hx-flag-typography,
.hx-header-medium.hx-flag-typography {
  font-size: var(--base-medium-header-font-size);
  font-weight: var(--base-medium-header-font-weight);
  line-height: var(--base-medium-header-line-height);
  margin: 0 0 var(--base-header-bottom-margin) 0;
}

.hx-flag-typography h3,
.hx-flag-typography .hx-header-small,
h3.hx-flag-typography,
.hx-header-small.hx-flag-typography {
  font-size: var(--base-small-header-font-size);
  font-weight: var(--base-small-header-font-weight);
  line-height: var(--base-small-header-line-height);
  margin: 0 0 var(--base-header-bottom-margin) 0;
}

.hx-input,
.hx-input-textarea {
  background: var(--input-background-color);
  box-sizing: border-box;
  border-width: var(--input-border-width);
  border-style: var(--input-border-style);
  border-color: var(--input-border-color);
  border-radius: var(--input-border-radius);
  margin: var(--input-spacing);
  padding: var(--input-padding);
  height: var(--input-height);
  line-height: var(--input-line-height);
  color: var(--input-text-color);
}

.hx-input::-webkit-input-placeholder,
.hx-input-textarea::-webkit-input-placeholder {
  color: var(--input-placeholder-color);
}

.hx-input::-moz-placeholder,
.hx-input-textarea::-moz-placeholder {
  color: var(--input-placeholder-color);
}

.hx-input:-ms-input-placeholder,
.hx-input-textarea:-ms-input-placeholder {
  color: var(--input-placeholder-color);
}

.hx-input::-ms-input-placeholder,
.hx-input-textarea::-ms-input-placeholder {
  color: var(--input-placeholder-color);
}

.hx-input::placeholder,
.hx-input-textarea::placeholder {
  color: var(--input-placeholder-color);
}

.hx-input-textarea {
  height: auto;
}

.hx-input-radio,
.hx-input-checkbox {
  height: var(--input-size);
  width: var(--input-size);
}

.hx-input-radio::before,
.hx-input-radio::after,
.hx-input-checkbox::before,
.hx-input-checkbox::after {
  font-size: var(--input-size);
}

.hx-input-checkbox::before,
.hx-input-radio::before {
  color: var(--input-background-color);
}

.hx-input-radio::after,
.hx-input-checkbox::after {
  color: var(--input-checkbox-unselected-color);
}

.hx-input-radio:checked::after,
.hx-input-checkbox:checked::after {
  color: var(--input-checkbox-selected-color);
}

.hx-input-radio:invalid::after,
.hx-input-radio.hx-input-invalid::after,
.hx-input-checkbox:invalid::after,
.hx-input-checkbox.hx-input-invalid::after {
  color: var(--input-invalid-border-color);
}

.hx-input-radio:disabled::after,
.hx-input-checkbox:disabled::after {
  color: var(--input-checkbox-disabled-color);
}

.hx-input:invalid,
.hx-input.hx-input-invalid,
.hx-input-textarea:invalid,
.hx-input-textarea.hx-input-invalid {
  border-width: var(--input-invalid-border-width);
  border-style: var(--input-invalid-border-style);
  border-color: var(--input-invalid-border-color);
  color: var(--input-invalid-text-color);
}

.hx-input:-moz-read-only,
.hx-input-textarea:-moz-read-only {
  border-width: var(--input-readonly-border-width);
  border-style: var(--input-readonly-border-style);
  border-color: var(--input-readonly-border-color);
  color: var(--input-readonly-text-color);
  background: var(--input-readonly-background-color);
}

.hx-input:read-only,
.hx-input-textarea:read-only {
  border-width: var(--input-readonly-border-width);
  border-style: var(--input-readonly-border-style);
  border-color: var(--input-readonly-border-color);
  color: var(--input-readonly-text-color);
  background: var(--input-readonly-background-color);
}

.hx-input:disabled,
.hx-input-textarea:disabled {
  border-width: var(--input-disabled-border-width);
  border-style: var(--input-disabled-border-style);
  border-color: var(--input-disabled-border-color);
  color: var(--input-disabled-text-color);
  background: var(--input-disabled-background-color);
}

.hx-spinner {
  border: 0.2em solid var(--spinner-color);
  border-right-color: transparent;
}

.hx-spinner-wide:before {
  background: var(--spinner-color);
}

.hx-modal-shade {
  background: var(--modal-shade-color);
}

.hx-modal {
  box-shadow: 0 5px 10px var(--modal-shadow-color);
}

.hx-modal-title-container {
  font-size: var(--modal-title-font-size);
  background: var(--modal-title-background-color);
  border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
  color: var(--modal-title-text-color);
  border-color: var(--modal-border-color);
}

.hx-modal-content {
  background: var(--modal-background-color);
  border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
}

.hx-modal-title-empty + .hx-modal-content {
  border-radius: var(--modal-border-radius);
}

.hx-modal-backdrop {
  background: var(--modal-backdrop-color);
}

.hx-modal.hx-flag-modal .hx-modal-content {
  border-radius: var(--modal-border-radius);
}

.hx-modal.hx-flag-modal .hx-modal-header {
  padding: var(--modal-outer-padding-top) var(--modal-outer-padding-right) var(--modal-inner-padding) var(--modal-outer-padding-right);
}

.hx-modal.hx-flag-modal .hx-modal-body-container {
  padding-bottom: var(--modal-outer-padding-bottom);
}

.hx-modal.hx-flag-modal .hx-modal-body,
.hx-modal.hx-flag-modal .hx-modal-footer {
  padding: 0 var(--modal-outer-padding-right);
}

.hx-modal.hx-flag-modal .hx-modal-body + .hx-modal-footer:not(:empty) {
  margin-top: var(--modal-footer-margin);
}

.hx-modal.hx-flag-modal.hx-modal-center .hx-modal-body + .hx-modal-footer:not(:empty) {
  margin-top: var(--modal-center-footer-margin);
}

.hx-modal.hx-flag-modal .hx-modal-close {
  color: var(--modal-close-icon-color);
}

.hx-modal.hx-flag-modal .hx-modal-content {
  max-width: var(--modal-center-max-width);
}

.hx-modal.hx-flag-modal.hx-modal-right .hx-modal-content {
  max-width: var(--modal-right-max-width);
}

.hx-modal.hx-flag-modal.hx-modal-right.hx-modal-right-wide .hx-modal-content {
  max-width: var(--modal-right-wide-max-width);
}

.hx-modal.hx-flag-modal .hx-modal-close {
  margin: calc(-1 * var(--modal-close-icon-padding));
  margin-left: 0;
  padding: var(--modal-close-icon-padding);
  padding-left: var(--modal-inner-padding);
  font-size: var(--modal-close-icon-size);
  line-height: var(--modal-close-icon-size);
  width: var(--modal-close-icon-size);
  height: var(--modal-close-icon-size);
}

.hx-notification-container {
  background: var(--notify-container-background-color);
  border: solid 1px var(--notify-container-border-color);
  border-top: none;
  box-shadow: 0 6px 10px 0 var(--notify-shadow-color);
}

.hx-notification {
  background-color: var(--notify-background-color);
  color: var(--notify-text-color);
  border-color: var(--notify-border-color);
}

.hx-notification-icon {
  color: var(--notify-default-color);
}

.hx-notification.hx-positive .hx-notification-icon {
  color: var(--notify-positive-color);
}

.hx-notification.hx-warning .hx-notification-icon {
  color: var(--notify-warning-color);
}

.hx-notification.hx-negative .hx-notification-icon {
  color: var(--notify-negative-color);
}

.hx-notification.hx-info .hx-notification-icon {
  color: var(--notify-info-color);
}

.hx-notification-close {
  color: var(--notify-close-color);
}

.hx-notification-close:hover {
  color: var(--notify-close-hover-color);
}

.hx-notification-pin {
  color: var(--notify-unpinned-color);
}

.hx-notification-pin:hover {
  color: var(--notify-unpinned-hover-color);
}

.hx-notification-pin-pinned {
  color: var(--notify-pinned-color);
}

.hx-notification-pin-pinned:hover {
  color: var(--notify-pinned-hover-color);
}

.hx-alert-container {
  width: var(--alert-container-width);
  top: var(--alert-container-top);
}

.hx-alert-title {
  font-weight: var(--alert-title-font-weight);
}

.hx-alert-close {
  padding: var(--alert-top-padding) var(--alert-left-padding);
  margin: calc(-1 * var(--alert-top-padding)) calc(-1 * var(--alert-left-padding));
  margin-left: 0;
}

.hx-alert {
  line-height: var(--alert-line-height);
  padding: var(--alert-top-padding) var(--alert-left-padding);
  background: var(--alert-default-background-color);
  color: var(--alert-default-text-color);
  box-shadow: var(--alert-box-shadow);
}

.hx-alert + .hx-alert {
  margin-top: var(--alert-spacing);
}

.hx-alert.hx-alert-success {
  background: var(--alert-success-background-color);
  color: var(--alert-success-text-color);
}

.hx-alert.hx-alert-warning {
  background: var(--alert-warning-background-color);
  color: var(--alert-warning-text-color);
}

.hx-alert.hx-alert-danger {
  background: var(--alert-danger-background-color);
  color: var(--alert-danger-text-color);
}

.hx-alert .hx-alert-icon {
  color: var(--alert-close-icon-color);
}

.hx-alert.hx-alert-success .hx-alert-icon {
  color: var(--alert-close-icon-success-color);
}

.hx-alert.hx-alert-warning .hx-alert-icon {
  color: var(--alert-close-icon-warning-color);
}

.hx-alert.hx-alert-danger .hx-alert-icon {
  color: var(--alert-close-icon-danger-color);
}

.hx-btn {
  background: var(--button-default-background-col);
  color: var(--button-default-text-col);
  border-color: var(--button-default-border-col);
}

.hx-btn:active,
.hx-btn:hover {
  background: var(--button-default-hover-background-col);
}

.hx-btn:focus {
  box-shadow: 0 0 0 1px var(--button-default-focus-col);
}

.hx-btn.hx-btn-outline,
.hx-btn.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-btn-outline:hover,
.hx-btn.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-default-text-col);
}

.hx-btn.hx-action {
  background: var(--button-action-background-col);
  color: var(--button-action-text-col);
  border-color: var(--button-action-border-col);
}

.hx-btn.hx-action:active,
.hx-btn.hx-action:hover {
  background: var(--button-action-hover-background-col);
}

.hx-btn.hx-action:focus {
  box-shadow: 0 0 0 1px var(--button-action-focus-col);
}

.hx-btn.hx-action.hx-btn-outline,
.hx-btn.hx-action.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-action.hx-btn-outline:hover,
.hx-btn.hx-action.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-action-background-col);
}

.hx-btn.hx-positive {
  background: var(--button-positive-background-col);
  color: var(--button-positive-text-col);
  border-color: var(--button-positive-border-col);
}

.hx-btn.hx-positive:active,
.hx-btn.hx-positive:hover {
  background: var(--button-positive-hover-background-col);
}

.hx-btn.hx-positive:focus {
  box-shadow: 0 0 0 1px var(--button-positive-focus-col);
}

.hx-btn.hx-positive.hx-btn-outline,
.hx-btn.hx-positive.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-positive.hx-btn-outline:hover,
.hx-btn.hx-positive.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-positive-background-col);
}

.hx-btn.hx-negative {
  background: var(--button-negative-background-col);
  color: var(--button-negative-text-col);
  border-color: var(--button-negative-border-col);
}

.hx-btn.hx-negative:active,
.hx-btn.hx-negative:hover {
  background: var(--button-negative-hover-background-col);
}

.hx-btn.hx-negative:focus {
  box-shadow: 0 0 0 1px var(--button-negative-focus-col);
}

.hx-btn.hx-negative.hx-btn-outline,
.hx-btn.hx-negative.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-negative.hx-btn-outline:hover,
.hx-btn.hx-negative.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-negative-background-col);
}

.hx-btn.hx-warning {
  background: var(--button-warning-background-col);
  color: var(--button-warning-text-col);
  border-color: var(--button-warning-border-col);
}

.hx-btn.hx-warning:active,
.hx-btn.hx-warning:hover {
  background: var(--button-warning-hover-background-col);
}

.hx-btn.hx-warning:focus {
  box-shadow: 0 0 0 1px var(--button-warning-focus-col);
}

.hx-btn.hx-warning.hx-btn-outline,
.hx-btn.hx-warning.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-warning.hx-btn-outline:hover,
.hx-btn.hx-warning.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-warning-background-col);
}

.hx-btn.hx-info {
  background: var(--button-info-background-col);
  color: var(--button-info-text-col);
  border-color: var(--button-info-border-col);
}

.hx-btn.hx-info:active,
.hx-btn.hx-info:hover {
  background: var(--button-info-hover-background-col);
}

.hx-btn.hx-info:focus {
  box-shadow: 0 0 0 1px var(--button-info-focus-col);
}

.hx-btn.hx-info.hx-btn-outline,
.hx-btn.hx-info.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-info.hx-btn-outline:hover,
.hx-btn.hx-info.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-info-background-col);
}

.hx-btn.hx-complement {
  background: var(--button-complement-background-col);
  color: var(--button-complement-text-col);
  border-color: var(--button-complement-border-col);
}

.hx-btn.hx-complement:active,
.hx-btn.hx-complement:hover {
  background: var(--button-complement-hover-background-col);
}

.hx-btn.hx-complement:focus {
  box-shadow: 0 0 0 1px var(--button-complement-focus-col);
}

.hx-btn.hx-complement.hx-btn-outline,
.hx-btn.hx-complement.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-complement.hx-btn-outline:hover,
.hx-btn.hx-complement.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-complement-text-col);
}

.hx-btn.hx-contrast {
  background: var(--button-contrast-background-col);
  color: var(--button-contrast-text-col);
  border-color: var(--button-contrast-border-col);
}

.hx-btn.hx-contrast:active,
.hx-btn.hx-contrast:hover {
  background: var(--button-contrast-hover-background-col);
}

.hx-btn.hx-contrast:focus {
  box-shadow: 0 0 0 1px var(--button-contrast-focus-col);
}

.hx-btn.hx-contrast.hx-btn-outline,
.hx-btn.hx-contrast.hx-btn-invert {
  background: var(--button-invert-background-col);
  color: var(--button-invert-text-col);
  border-color: var(--button-invert-border-col);
}

.hx-btn.hx-contrast.hx-btn-outline:hover,
.hx-btn.hx-contrast.hx-btn-invert:hover {
  background: var(--button-invert-hover-col);
  color: var(--button-contrast-background-col);
}

.hx-btn.hx-btn-invisible {
  color: var(--button-invisible-text-col);
  border: none;
  background: transparent;
}

.hx-btn.hx-btn-invisible:hover,
.hx-btn.hx-btn-invisible:active {
  background: transparent;
}

.hx-btn:disabled,
.hx-btn.hx-disabled,
.hx-btn:disabled:hover,
.hx-btn:disabled:active,
.hx-btn.hx-disabled:hover,
.hx-btn.hx-disabled:active {
  background: var(--button-disabled-background-col);
  color: var(--button-disabled-text-col);
  border: 1px solid var(--button-disabled-border-col);
}

.hx-flag-button .hx-btn,
.hx-flag-button.hx-btn,
.hx-btn.hx-primary,
.hx-btn.hx-secondary,
.hx-btn.hx-success,
.hx-btn.hx-danger,
.hx-btn.hx-btn-link,
.hx-btn.hx-btn-normal {
  height: var(--button-normal-height);
  font-size: var(--button-normal-font-size);
  line-height: var(--button-normal-line-height);
  padding: var(--button-normal-padding);
}

.hx-btn.hx-btn-small {
  height: var(--button-small-height);
  font-size: var(--button-small-font-size);
  line-height: var(--button-small-line-height);
  padding: var(--button-small-padding);
}

.hx-btn.hx-btn-micro {
  height: var(--button-micro-height);
  font-size: var(--button-micro-font-size);
  line-height: var(--button-micro-line-height);
  padding: var(--button-micro-padding);
}

.hx-flag-button .hx-btn,
.hx-flag-button.hx-btn,
.hx-btn.hx-btn-normal,
.hx-btn.hx-btn-small,
.hx-btn.hx-btn-micro {
  cursor: pointer;
  border-radius: var(--button-border-radius);
}

.hx-flag-button .hx-btn,
.hx-flag-button.hx-btn,
.hx-btn.hx-btn-normal,
.hx-btn.hx-btn-small,
.hx-btn.hx-btn-micro {
  font-weight: var(--button-default-font-weight);
  color: var(--button-default-text-color);
  background: var(--button-default-background-color);
  border-color: var(--button-default-border-color);
}

.hx-flag-button .hx-btn:active,
.hx-flag-button.hx-btn:active,
.hx-flag-button .hx-btn:hover,
.hx-flag-button.hx-btn:hover,
.hx-btn.hx-btn-normal:active,
.hx-btn.hx-btn-normal:hover,
.hx-btn.hx-btn-small:active,
.hx-btn.hx-btn-small:hover,
.hx-btn.hx-btn-micro:active,
.hx-btn.hx-btn-micro:hover {
  color: var(--button-default-text-hover-color);
  background: var(--button-default-background-hover-color);
  border-color: var(--button-default-border-hover-color);
  text-decoration: none;
}

.hx-flag-button .hx-btn:disabled,
.hx-flag-button.hx-btn:disabled,
.hx-btn.hx-btn-normal:disabled,
.hx-btn.hx-btn-small:disabled,
.hx-btn.hx-btn-micro:disabled {
  cursor: not-allowed;
}

.hx-flag-button .hx-btn:disabled,
.hx-flag-button.hx-btn:disabled,
.hx-btn.hx-btn-normal:disabled,
.hx-btn.hx-btn-small:disabled,
.hx-btn.hx-btn-micro:disabled {
  font-weight: var(--button-disabled-font-weight);
  color: var(--button-disabled-text-color);
  background: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
}

.hx-flag-button .hx-btn:disabled:active,
.hx-flag-button.hx-btn:disabled:active,
.hx-flag-button .hx-btn:disabled:hover,
.hx-flag-button.hx-btn:disabled:hover,
.hx-btn.hx-btn-normal:disabled:active,
.hx-btn.hx-btn-normal:disabled:hover,
.hx-btn.hx-btn-small:disabled:active,
.hx-btn.hx-btn-small:disabled:hover,
.hx-btn.hx-btn-micro:disabled:active,
.hx-btn.hx-btn-micro:disabled:hover {
  color: var(--button-disabled-text-color);
  background: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  text-decoration: none;
}

.hx-btn.hx-btn-link {
  font-weight: var(--button-link-font-weight);
  color: var(--button-link-text-color);
  background: transparent;
  border-color: transparent;
}

.hx-btn.hx-btn-link:active,
.hx-btn.hx-btn-link:hover {
  color: var(--button-link-text-hover-color);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
}

.hx-btn.hx-primary {
  font-weight: var(--button-primary-font-weight);
  color: var(--button-primary-text-color);
  background: var(--button-primary-background-color);
  border-color: var(--button-primary-border-color);
}

.hx-btn.hx-primary:active,
.hx-btn.hx-primary:hover {
  color: var(--button-primary-text-hover-color);
  background: var(--button-primary-background-hover-color);
  border-color: var(--button-primary-border-hover-color);
  text-decoration: none;
}

.hx-btn.hx-secondary {
  font-weight: var(--button-secondary-font-weight);
  color: var(--button-secondary-text-color);
  background: var(--button-secondary-background-color);
  border-color: var(--button-secondary-border-color);
}

.hx-btn.hx-secondary:active,
.hx-btn.hx-secondary:hover {
  color: var(--button-secondary-text-hover-color);
  background: var(--button-secondary-background-hover-color);
  border-color: var(--button-secondary-border-hover-color);
  text-decoration: none;
}

.hx-btn.hx-success {
  font-weight: var(--button-success-font-weight);
  color: var(--button-success-text-color);
  background: var(--button-success-background-color);
  border-color: var(--button-success-border-color);
}

.hx-btn.hx-success:active,
.hx-btn.hx-success:hover {
  color: var(--button-success-text-hover-color);
  background: var(--button-success-background-hover-color);
  border-color: var(--button-success-border-hover-color);
  text-decoration: none;
}

.hx-btn.hx-danger {
  font-weight: var(--button-danger-font-weight);
  color: var(--button-danger-text-color);
  background: var(--button-danger-background-color);
  border-color: var(--button-danger-border-color);
}

.hx-btn.hx-danger:active,
.hx-btn.hx-danger:hover {
  color: var(--button-danger-text-hover-color);
  background: var(--button-danger-background-hover-color);
  border-color: var(--button-danger-border-hover-color);
  text-decoration: none;
}

.hx-input-group > .hx-btn {
  margin: 0;
  border-radius: 0;
}

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

.hx-form-error .hx-form-error-text-container .hx-form-error-text {
  background: var(--form-error-background-color);
}

.hx-form-error .hx-form-error-text-container .hx-form-error-text:before {
  border-bottom-color: var(--form-error-background-color);
}

.hx-form-label {
  font-weight: bold;
  display: block;
  margin-bottom: var(--form-label-spacing);
}

.hx-input-checkbox + .hx-form-label,
.hx-input-radio + .hx-form-label {
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 var(--form-label-spacing);
  cursor: pointer;
}

.hx-input:disabled + .hx-form-label,
.hx-input-textarea:disabled + .hx-form-label,
.hx-input-checkbox:disabled + .hx-form-label,
.hx-input-radio:disabled + .hx-form-label {
  color: var(--form-label-disabled-text-color);
  font-style: var(--form-label-disabled-font-style);
}

.hx-form-item {
  margin-bottom: var(--form-label-spacing);
  margin-right: var(--form-input-spacing);
}

.hx-form-item:last-child {
  margin-bottom: 0;
  margin-right: 0;
}

.hx-form-label-optional {
  color: var(--form-optional-label-text-color);
  font-weight: var(--form-optional-label-font-weight);
  font-style: var(--form-optional-label-font-style);
  margin-left: var(--form-label-spacing);
}

.hx-form-message {
  font-style: var(--form-message-font-style);
  font-weight: var(--form-message-label-font-weight);
  color: var(--form-message-text-color);
  margin-top: var(--form-label-spacing);
}

.hx-form-message-warning {
  font-style: var(--form-message-font-style);
  font-weight: var(--form-message-label-font-weight);
  color: var(--form-message-warning-text-color);
  margin-top: var(--form-label-spacing);
}

.hx-form-group:not(:last-child) {
  margin-bottom: var(--form-input-spacing);
}

.hx-form-message-wrap,
.hx-form:not(.hx-form-vertical) .hx-form-group .hx-input,
.hx-form:not(.hx-form-vertical) .hx-form-group .hx-input-textarea,
.hx-form:not(.hx-form-vertical) .hx-form-group .hx-tag-input {
  width: var(--form-group-max-width);
  max-width: 100%;
}

.hx-form:not(.hx-form-vertical) .hx-form-group {
  margin-right: var(--form-input-spacing);
}

.hx-form-columns-2 > :first-child,
.hx-form-columns-3 > :first-child,
.hx-form-columns-4 > :first-child,
.hx-form-columns-5 > :first-child,
.hx-form-columns-6 > :first-child {
  margin-top: 0;
}

.hx-form-columns-2 {
  -moz-columns: 2 auto;
       columns: 2 auto;
}

.hx-form-columns-3 {
  -moz-columns: 3 auto;
       columns: 3 auto;
}

.hx-form-columns-4 {
  -moz-columns: 4 auto;
       columns: 4 auto;
}

.hx-form-columns-5 {
  -moz-columns: 5 auto;
       columns: 5 auto;
}

.hx-form-columns-6 {
  -moz-columns: 6 auto;
       columns: 6 auto;
}

.hx-form.hx-flag-form .hx-date-time-picker {
  display: inline-flex;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-line-height);
  background: var(--input-background-color);
  border-width: var(--input-border-width);
  border-style: var(--input-border-style);
  border-color: var(--input-border-color);
  border-radius: var(--input-border-radius);
  color: var(--input-text-color);
  overflow: hidden;
}

.hx-form.hx-flag-form .hx-time-picker {
  border-width: var(--input-border-width);
  border-style: var(--input-border-style);
  border-color: var(--input-border-color);
  border-radius: var(--input-border-radius);
}

.hx-form.hx-flag-form .hx-date-time-picker .hx-date-picker {
  border-radius: 0;
  border: none;
  font-size: 1em;
  line-height: var(--input-line-height);
}

.hx-form.hx-flag-form .hx-date-time-picker .hx-time-picker {
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
  font-size: 1em;
}

.hx-form.hx-flag-form .hx-date-picker .hx-icon,
.hx-form.hx-flag-form .hx-time-picker .hx-icon,
.hx-form.hx-flag-form .hx-date-time-picker .hx-icon {
  display: none;
}

.hx-form.hx-flag-form .hx-date-time-picker .hx-date-input,
.hx-form.hx-flag-form .hx-time-input {
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-line-height);
  font-size: 1em;
}

.hx-flag-form .hx-date-time-picker .hx-date-picker,
.hx-flag-form .hx-date-time-picker .hx-time-picker {
  margin: calc(-1 * var(--input-border-width));
}

.hx-form.hx-flag-form .hx-form-buttons .hx-btn + .hx-btn {
  margin-left: 10px;
}

.hx-dropdown {
  background: var(--dropdown-background-color);
  box-shadow: 0px 2px 2px 2px var(--dropdown-shadow-color);
  border-color: var(--dropdown-border-color);
  border-radius: var(--dropdown-border-radius);
}

.hx-dropdown-up {
  margin-top: calc(-1 * var(--dropdown-spacing));
}

.hx-dropdown-down {
  margin-top: var(--dropdown-spacing);
}

.hx-dropdown-left {
  margin-right: var(--dropdown-spacing);
}

.hx-dropdown-right {
  margin-left: var(--dropdown-spacing);
}

.hx-collapsible-heading {
  background: var(--collapsible-heading-background-color);
  color: var(--collapsible-heading-text-color);
}

.hx-collapsible-toggle:hover,
.hx-collapsible-heading:hover {
  background: var(--collapsible-toggle-hover-background-color);
  color: var(--collapsible-toggle-hover-text-color);
}

.hx-collapsible-heading.hx-collapsible-heading-no-hover:hover {
  background: var(--collapsible-heading-background-color);
  color: var(--collapsible-heading-text-color);
}

.hx-collapsible-toggle {
  background: var(--collapsible-toggle-background-color);
  color: var(--collapsible-toggle-text-color);
}

.hx-collapsible-content {
  border-color: var(--collapsible-content-border-color);
  background: var(--collapsible-content-background-color);
  color: var(--collapsible-content-text-color);
}

.hx-collapsible {
  box-shadow: 1px 1px 1px 1px var(--collapsible-shadow-color);
}

body.hx-heading-fixed .hx-heading + .hx-content,
body.hx-full-screen .hx-heading + .hx-content {
  margin-top: var(--titlebar-height);
}

/* this gets automatically added by the javascript component (if needed) */

body.hx-titlebar-link-padding .hx-heading + .hx-content {
  margin-top: calc(var(--titlebar-height) + var(--titlebar-linkbar-height));
}

.hx-heading {
  border-bottom-width: var(--titlebar-heading-border-bottom-width);
  border-bottom-color: var(--titlebar-heading-border-bottom-color);
  box-shadow: 0 2px 2px 0 var(--titlebar-heading-shadow-color);
}

.hx-titlebar {
  background: var(--titlebar-default-background-color);
  color: var(--titlebar-text-color);
  font-weight: var(--titlebar-font-weight);
}

.hx-titlebar-header {
  max-height: var(--titlebar-height);
  min-height: var(--titlebar-height);
}

.hx-titlebar-title {
  font-family: var(--titlebar-title-font-family);
  font-size: var(--titlebar-title-font-size);
  line-height: var(--titlebar-height);
  color: var(--titlebar-title-text-color);
}

.hx-titlebar-title a {
  color: var(--titlebar-text-color);
}

.hx-titlebar-subtitle {
  font-family: var(--titlebar-title-font-family);
}

.hx-titlebar-subtitle a {
  color: var(--titlebar-text-color);
}

.hx-titlebar-menu-icon,
.hx-titlebar-menu-content {
  color: var(--titlebar-icon-color);
}

.hx-titlebar-menu-icon:hover {
  color: var(--titlebar-icon-hover-color);
}

.hx-titlebar-icon {
  background: var(--titlebar-icon-background-color);
}

.hx-titlebar-icon img {
  max-height: var(--titlebar-height);
}

.hx-titlebar-menu-icon-mobile {
  font-size: var(--titlebar-title-font-size);
}

.hx-titlebar-linkbar {
  background: var(--titlebar-linkbar-background-color);
}

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

.hx-titlebar-link.hx-selected {
  border-bottom-color: var(--titlebar-link-border-selected-color);
}

.hx-titlebar-link:hover {
  border-bottom-color: var(--titlebar-link-border-hover-color);
  color: var(--titlebar-link-text-hover-color);
}

@media (min-width: 901px) {
  .hx-titlebar-menu-content {
    color: var(--titlebar-menu-context-text-color);
  }

  .hx-titlebar-menu-icon {
    border-color: var(--titlebar-menu-context-border-color);
  }

  .hx-titlebar-menu-icon:hover span.hx-titlebar-menu-text {
    background: var(--titlebar-icon-tooltip-background-color);
    color: var(--titlebar-icon-tooltip-text-color);
  }

  .hx-titlebar-menu-icon:hover span.hx-titlebar-menu-text:before {
    border-bottom-color: var(--titlebar-icon-tooltip-background-color);
  }
}

.hx-titlebar.hx-action {
  background: var(--titlebar-action-background-color);
}

.hx-titlebar.hx-negative {
  background: var(--titlebar-negative-background-color);
}

.hx-titlebar.hx-positive {
  background: var(--titlebar-positive-background-color);
}

.hx-titlebar.hx-warning {
  background: var(--titlebar-warning-background-color);
}

.hx-titlebar.hx-info {
  background: var(--titlebar-info-background-color);
}

.hx-titlebar.hx-action,
.hx-titlebar.hx-negative,
.hx-titlebar.hx-positive,
.hx-titlebar.hx-warning,
.hx-titlebar.hx-info {
  color: var(--titlebar-context-text-color);
}

.hx-titlebar.hx-action .hx-titlebar-icon,
.hx-titlebar.hx-negative .hx-titlebar-icon,
.hx-titlebar.hx-positive .hx-titlebar-icon,
.hx-titlebar.hx-warning .hx-titlebar-icon,
.hx-titlebar.hx-info .hx-titlebar-icon {
  background: var(--titlebar-context-icon-background);
}

.hx-titlebar.hx-action .hx-titlebar-menu-icon,
.hx-titlebar.hx-negative .hx-titlebar-menu-icon,
.hx-titlebar.hx-positive .hx-titlebar-menu-icon,
.hx-titlebar.hx-warning .hx-titlebar-menu-icon,
.hx-titlebar.hx-info .hx-titlebar-menu-icon {
  color: var(--titlebar-context-icon-color);
}

.hx-titlebar.hx-action .hx-titlebar-menu-icon:hover,
.hx-titlebar.hx-negative .hx-titlebar-menu-icon:hover,
.hx-titlebar.hx-positive .hx-titlebar-menu-icon:hover,
.hx-titlebar.hx-warning .hx-titlebar-menu-icon:hover,
.hx-titlebar.hx-info .hx-titlebar-menu-icon:hover {
  color: var(--titlebar-context-icon-hover-color);
}

.hx-titlebar.hx-action .hx-titlebar-title,
.hx-titlebar.hx-negative .hx-titlebar-title,
.hx-titlebar.hx-positive .hx-titlebar-title,
.hx-titlebar.hx-warning .hx-titlebar-title,
.hx-titlebar.hx-info .hx-titlebar-title {
  color: var(--titlebar-context-text-color);
}

@media (max-width: 900px) {
  body.hx-titlebar-link-padding .hx-heading + .hx-content {
    margin-top: var(--titlebar-height);
  }

  .hx-titlebar .hx-titlebar-menu-icons {
    background: var(--titlebar-mobile-view-icons-background-color);
  }

  .hx-titlebar .hx-titlebar-menu-icons .hx-titlebar-menu-icon {
    color: var(--titlebar-mobile-view-icons-text-color);
  }

  .hx-titlebar .hx-titlebar-menu-icons .hx-titlebar-menu-icon:hover {
    color: var(--titlebar-mobile-view-icons-text-hover-color);
  }
}

.hx-content {
  padding-left: var(--layout-content-padding);
  padding-right: var(--layout-content-padding);
  max-width: var(--layout-content-max-width);
  background: var(--layout-content-background-color);
}

/* content breakpoint */

@media (max-width: 1300px) {
  .hx-content {
    max-width: var(--layout-content-breakpoint-width);
  }
}

.hx-heading + .hx-content {
  padding-top: var(--layout-content-padding);
}

.hx-layout {
  margin:  var(--layout-margin);
}

.hx-group > .hx-section {
  margin:  var(--layout-margin);
}

.hx-group > .hx-section.hx-btn {
  margin:  var(--layout-margin);
}

/* named size classes */

.hx-small,
.hx-medium,
.hx-large {
  min-width: var(--layout-named-class-min-width);
}

.hx-small {
  /* fallback to static percentage in case calc is not supported */
  flex-basis: 21%;
  flex-basis: calc(25% - (2 * var(--layout-margin)));
}

.hx-medium {
  /* fallback to static percentage in case calc is not supported */
  flex-basis: 40%;
  flex-basis: calc(50% - (2 * var(--layout-margin)));
}

.hx-large {
  /* fallback to static percentage in case calc is not supported */
  flex-basis: 90%;
  flex-basis: calc(100% - (2 * var(--layout-margin)));
}

.hx-border {
  border: solid 1px var(--layout-border-color);
}

.hx-pad {
  padding: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-pad, .hx-pad.hx-flag-spacing {
  padding: var(--layout-spacing) !important;
}

.hx-margin {
  margin: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-margin, .hx-margin.hx-flag-spacing {
  margin: var(--layout-spacing) !important;
}

.hx-border-top {
  border-top: solid 1px var(--layout-border-color);
}

.hx-pad-top {
  padding-top: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-pad-top, .hx-pad-top.hx-flag-spacing {
  padding-top: var(--layout-spacing) !important;
}

.hx-margin-top {
  margin-top: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-margin-top, .hx-margin-top.hx-flag-spacing {
  margin-top: var(--layout-spacing) !important;
}

.hx-border-right {
  border-right: solid 1px var(--layout-border-color);
}

.hx-pad-right {
  padding-right: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-pad-right, .hx-pad-right.hx-flag-spacing {
  padding-right: var(--layout-spacing) !important;
}

.hx-margin-right {
  margin-right: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-margin-right, .hx-margin-right.hx-flag-spacing {
  margin-right: var(--layout-spacing) !important;
}

.hx-border-bottom {
  border-bottom: solid 1px var(--layout-border-color);
}

.hx-pad-bottom {
  padding-bottom: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-pad-bottom, .hx-pad-bottom.hx-flag-spacing {
  padding-bottom: var(--layout-spacing) !important;
}

.hx-margin-bottom {
  margin-bottom: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-margin-bottom, .hx-margin-bottom.hx-flag-spacing {
  margin-bottom: var(--layout-spacing) !important;
}

.hx-border-left {
  border-left: solid 1px var(--layout-border-color);
}

.hx-pad-left {
  padding-left: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-pad-left, .hx-pad-left.hx-flag-spacing {
  padding-left: var(--layout-spacing) !important;
}

.hx-margin-left {
  margin-left: var(--layout-margin) !important;
}

.hx-flag-spacing .hx-margin-left, .hx-margin-left.hx-flag-spacing {
  margin-left: var(--layout-spacing) !important;
}

.hx-menu {
  max-height: var(--menu-max-height);
}

.hx-menu-item.hx-menu-link {
  padding: var(--menu-item-padding);
}

.hx-menu-item.hx-menu-link a {
  padding: var(--menu-item-padding);
  margin: var(--menu-item-link-margin);
  color: inherit;
}

.hx-menu-item.hx-menu-item-disabled {
  padding: var(--menu-item-padding);
  color: var(--menu-disabled-text-color);
  background: var(--menu-disabled-background-color);
}

.hx-menu-item.hx-menu-unselectable {
  padding: var(--menu-item-padding);
}

.hx-menu-collapsible {
  padding: var(--menu-collapsible-padding);
}

.hx-menu .hx-collapsible-content > .hx-menu-item {
  padding-left: var(--menu-item-collapsible-left-padding);
}

/* default */

.hx-menu-link,
.hx-menu-collapsible {
  border-width: var(--menu-border-width);
  border-color: var(--menu-default-border-color);
  background: var(--menu-default-background-color);
  color: var(--menu-default-text-color);
}

.hx-menu-link:hover,
.hx-menu-collapsible:hover {
  border-color: var(--menu-default-border-color-hover);
  background: var(--menu-default-background-color-hover);
  color: var(--menu-default-text-color-hover);
}

/* action */

.hx-action .hx-menu-link,
.hx-action .hx-menu-collapsible {
  border-color: var(--menu-action-border-color);
  background: var(--menu-action-background-color);
  color: var(--menu-action-text-color);
}

.hx-action .hx-menu-link:hover,
.hx-action .hx-menu-collapsible:hover {
  border-color: var(--menu-action-border-color-hover);
  background: var(--menu-action-background-color-hover);
  color: var(--menu-action-text-color-hover);
}

/* positive */

.hx-positive .hx-menu-link,
.hx-positive .hx-menu-collapsible {
  border-color: var(--menu-positive-border-color);
  background: var(--menu-positive-background-color);
  color: var(--menu-positive-text-color);
}

.hx-positive .hx-menu-link:hover,
.hx-positive .hx-menu-collapsible:hover {
  border-color: var(--menu-positive-border-color-hover);
  background: var(--menu-positive-background-color-hover);
  color: var(--menu-positive-text-color-hover);
}

/* negative */

.hx-negative .hx-menu-link,
.hx-negative .hx-menu-collapsible {
  border-color: var(--menu-negative-border-color);
  background: var(--menu-negative-background-color);
  color: var(--menu-negative-text-color);
}

.hx-negative .hx-menu-link:hover,
.hx-negative .hx-menu-collapsible:hover {
  border-color: var(--menu-negative-border-color-hover);
  background: var(--menu-negative-background-color-hover);
  color: var(--menu-negative-text-color-hover);
}

/* warning */

.hx-warning .hx-menu-link,
.hx-warning .hx-menu-collapsible {
  border-color: var(--menu-warning-border-color);
  background: var(--menu-warning-background-color);
  color: var(--menu-warning-text-color);
}

.hx-warning .hx-menu-link:hover,
.hx-warning .hx-menu-collapsible:hover {
  border-color: var(--menu-warning-border-color-hover);
  background: var(--menu-warning-background-color-hover);
  color: var(--menu-warning-text-color-hover);
}

/* info */

.hx-info .hx-menu-link,
.hx-info .hx-menu-collapsible {
  border-color: var(--menu-info-border-color);
  background: var(--menu-info-background-color);
  color: var(--menu-info-text-color);
}

.hx-info .hx-menu-link:hover,
.hx-info .hx-menu-collapsible:hover {
  border-color: var(--menu-info-border-color-hover);
  background: var(--menu-info-background-color-hover);
  color: var(--menu-info-text-color-hover);
}

/* complement */

.hx-complement .hx-menu-link,
.hx-complement .hx-menu-collapsible {
  border-color: var(--menu-complement-border-color);
  background: var(--menu-complement-background-color);
  color: var(--menu-complement-text-color);
}

.hx-complement .hx-menu-link:hover,
.hx-complement .hx-menu-collapsible:hover {
  border-color: var(--menu-complement-border-color-hover);
  background: var(--menu-complement-background-color-hover);
  color: var(--menu-complement-text-color-hover);
}

/* contrast */

.hx-contrast .hx-menu-link,
.hx-contrast .hx-menu-collapsible {
  border-color: var(--menu-contrast-border-color);
  background: var(--menu-contrast-background-color);
  color: var(--menu-contrast-text-color);
}

.hx-contrast .hx-menu-link:hover,
.hx-contrast .hx-menu-collapsible:hover {
  border-color: var(--menu-contrast-border-color-hover);
  background: var(--menu-contrast-background-color-hover);
  color: var(--menu-contrast-text-color-hover);
}

.hx-menu-active.hx-menu-link {
  border-color: var(--menu-default-border-color-active);
  background: var(--menu-default-background-color-hover);
  color: var(--menu-default-text-color-hover);
}

.hx-action .hx-menu-active.hx-menu-link {
  border-color: var(--menu-action-border-color-active);
  background: var(--menu-action-background-color-hover);
  color: var(--menu-action-text-color-hover);
}

.hx-positive .hx-menu-active.hx-menu-link {
  border-color: var(--menu-positive-border-color-active);
  background: var(--menu-positive-background-color-hover);
  color: var(--menu-positive-text-color-hover);
}

.hx-negative .hx-menu-active.hx-menu-link {
  border-color: var(--menu-negative-border-color-active);
  background: var(--menu-negative-background-color-hover);
  color: var(--menu-negative-text-color-hover);
}

.hx-warning .hx-menu-active.hx-menu-link {
  border-color: var(--menu-warning-border-color-active);
  background: var(--menu-warning-background-color-hover);
  color: var(--menu-warning-text-color-hover);
}

.hx-info .hx-menu-active.hx-menu-link {
  border-color: var(--menu-info-border-color-active);
  background: var(--menu-info-background-color-hover);
  color: var(--menu-info-text-color-hover);
}

.hx-complement .hx-menu-active.hx-menu-link {
  border-color: var(--menu-complement-border-color-active);
  background: var(--menu-complement-background-color-hover);
  color: var(--menu-complement-text-color-hover);
}

.hx-contrast .hx-menu-active.hx-menu-link {
  border-color: var(--menu-contrast-border-color-active);
  background: var(--menu-contrast-background-color-active);
  color: var(--menu-contrast-text-color-active);
}

.hx-flag-menu .hx-menu-item-children > .hx-menu-item.hx-menu-link {
  padding-left: var(--menu-item-collapsible-left-padding);
}

.hx-flag-menu .hx-menu-item {
  margin: var(--menu-item-margin) 0;
  line-height: 1rem;
}

.hx-btn.hx-flag-button.hx-more-button {
  width: var(--button-normal-height);
}

div.hx-logo,
div.hx-logo:before,
img.hx-logo,
img.hx-logo:before {
  content: var(--logo-path);
}

.hx-input-group > input {
  border-color: var(--input-group-input-border-color);
  background-color: var(--input-group-input-background-color);
}

.hx-input-group > input:invalid {
  border-color: var(--input-group-input-invalid-outline-color);
}

.hx-input-group > input:not(.hx-input):focus {
  border-color: var(--input-group-input-focus-border-color);
}

.hx-input-group > div,
.hx-input-group > span,
.hx-input-group > a {
  border-color: var(--input-group-div-border-color);
  background: var(--input-group-div-background-color);
}

.hx-input-group > i {
  border-color: var(--input-group-icon-border-color);
  background: var(--input-group-icon-background-color);
}

.hx-drag-placeholder div {
  border-color: var(--drag-container-placeholder-border-color);
}

.hx-status-bar-segments {
  min-height: 30px;
}

.hx-status-bar-section-bar {
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  min-width: 100%;
  font-weight: bold;
}

.hx-status-bar-section:first-child .hx-status-bar-section-bar {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.hx-status-bar-section:last-child .hx-status-bar-section-bar {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.hx-status-bar-section-text {
  padding: 0 10px;
}

.hx-status-bar-section-percent,
.hx-status-bar-section-label {
  font-size: 12px;
}

.hx-status-bar-section-percent {
  margin: 0 5px;
}

.hx-status-bar-section + .hx-status-bar-section .hx-status-bar-section-bar:before {
  width: 2px;
  background: white;
  left: -1px;
}

.hx-status-bar-disabled * {
  color: #C9C9C9 !important;
}

.hx-status-bar-disabled .hx-status-bar-segments {
  border: 1px solid #C9C9C9;
  border-radius: 3px;
}

.hx-status-bar-title:not(:empty) {
  margin-bottom: 10px;
}

.hx-status-bar-breakdown:not(:empty) {
  margin-top: 10px;
}

.hx-status-bar-compact .hx-status-bar-title-section {
  font-weight: bold;
}

.hx-status-bar-compact .hx-status-bar-segments {
  height: 10px;
  min-height: 10px;
}

.hx-status-bar-compact .hx-status-bar-plan:not(:empty) {
  line-height: 10px;
  margin-left: 15px;
}

.hx-status-bar-compact .hx-status-bar-section-bar {
  height: 10px;
  min-height: 10px;
}

.hx-status-bar-section {
  min-width: 80px;
  flex-shrink: 1;
}

.hx-status-bar-section-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hx-table .hx-status-bar {
  margin: 10px 0;
}

.hx-status-bar-section-bar {
  background: var(--status-bar-default-background-color);
  color: var(--status-bar-default-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-todo {
  background: var(--status-bar-todo-background-color);
  color: var(--status-bar-todo-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-light {
  background: var(--status-bar-light-background-color);
  color: var(--status-bar-light-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-medium {
  background: var(--status-bar-medium-background-color);
  color: var(--status-bar-medium-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-dark {
  background: var(--status-bar-dark-background-color);
  color: var(--status-bar-dark-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-danger {
  background: var(--status-bar-danger-background-color);
  color: var(--status-bar-danger-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-warning {
  background: var(--status-bar-warning-background-color);
  color: var(--status-bar-warning-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-done {
  background: var(--status-bar-done-background-color);
  color: var(--status-bar-done-text-color);
}

.hx-status-bar-section-bar.hx-status-bar-in-progress {
  background: var(--status-bar-progress-background-color);
  color: var(--status-bar-progress-text-color);
}

.hx-progress-bar:not(.hx-flag-progress-bar) {
  border-color: var(--progress-bar-border-color);
  border-width: var(--progress-bar-border-width);
  background-color: var(--progress-bar-background-color);
}

.hx-progress-bar-inner {
  background-color: var(--progress-bar-default-color);
}

.hx-progress-bar-inner.hx-action,
.hx-action .hx-progress-bar-inner {
  background: var(--progress-bar-action-color);
}

.hx-progress-bar-inner.hx-positive,
.hx-positive .hx-progress-bar-inner {
  background: var(--progress-bar-positive-color);
}

.hx-progress-bar-inner.hx-warning,
.hx-warning .hx-progress-bar-inner {
  background: var(--progress-bar-warning-color);
}

.hx-progress-bar-inner.hx-negative,
.hx-negative .hx-progress-bar-inner {
  background: var(--progress-bar-negative-color);
}

.hx-progress-bar-inner.hx-info,
.hx-info .hx-progress-bar-inner {
  background: var(--progress-bar-info-color);
}

.hx-progress-bar-inner.hx-complement,
.hx-complement .hx-progress-bar-inner {
  background: var(--progress-bar-complement-color);
}

.hx-progress-bar-inner.hx-contrast,
.hx-contrast .hx-progress-bar-inner {
  background: var(--progress-bar-contrast-color);
}

.hx-error-message {
  background: var(--error-pages-background-color);
  padding: var(--error-pages-padding);
  box-shadow: var(--error-pages-box-shadow);
  border-radius: var(--error-pages-border-radius);
}

.hx-error-message {
  background: var(--error-pages-background-color);
  box-shadow: var(--error-pages-box-shadow);
}

.hx-error-message-heading {
  color: var(--error-pages-heading-text-color);
  font-size: var(--error-pages-heading-font-size);
  font-weight: var(--error-pages-heading-font-weight);
  margin-bottom: var(--error-pages-heading-margin);
}

.hx-error-message-heading + .hx-error-message-body,
.hx-error-message-heading + div {
  font-size: var(--error-pages-body-font-size);
  font-weight: var(--error-pages-body-font-weight);
  margin-bottom: var(--error-pages-body-margin);
}

.hx-error-message-buttons .hx-btn {
  margin: 0 5px;
}

.hx-table tr,
.hx-table td,
.hx-table th {
  border-color: var(--table-border-color);
}

.hx-table th {
  background: var(--table-header-background-color);
  color: var(--table-header-text-color);
}

.hx-table tbody tr {
  background: var(--table-row-background-color);
  color: var(--table-row-text-color);
}

.hx-table tbody tr:nth-child(2n) {
  background: var(--table-row-alt-background-color);
  color: var(--table-row-alt-text-color);
}

.hx-table tbody tr:hover {
  background: var(--table-row-hover-background-color);
}

.hx-table.hx-table-no-hover tbody tr:hover {
  background: var(--table-row-background-color);
}

.hx-table.hx-table-no-hover tbody tr:nth-child(2n):hover {
  background: var(--table-row-alt-background-color);
}

.hx-flag-table.hx-table tbody tr:hover,
.hx-flag-table .hx-table tbody tr:hover {
  background: var(--table-row-background-color);
}

.hx-flag-table.hx-table tbody tr:nth-child(2n):hover,
.hx-flag-table .hx-table tbody tr:nth-child(2n):hover {
  background: var(--table-row-alt-background-color);
}

.hx-table.hx-table-clickable-rows tbody tr:hover,
.hx-table.hx-table-clickable-rows tbody tr:nth-child(2n):hover {
  background: var(--table-row-hover-background-color);
}

.hx-flag-table.hx-table th,
.hx-flag-table .hx-table th {
  padding: var(--table-header-cell-padding);
}

.hx-flag-table.hx-table td,
.hx-flag-table .hx-table td {
  padding: var(--table-cell-padding);
}

.hx-toggle > .hx-toggle-box {
  background: var(--toggle-background-off-color);
}

.hx-toggle > .hx-toggle-box:before {
  background: var(--toggle-toggle-off-color);
}

.hx-toggle > .hx-toggle-box.hx-toggle-box-on {
  background: var(--toggle-background-on-color);
}

.hx-toggle > .hx-toggle-box.hx-toggle-box-on:before {
  background: var(--toggle-toggle-on-color);
}

.hx-notice {
  box-shadow: 1px 1px 1px 1px var(--notice-shadow-color);
}

/* default */

.hx-notice-header,
.hx-notice-head {
  background: var(--notice-default-head-background-color);
  color: var(--notice-default-head-text-color);
}

.hx-notice-body {
  background: var(--notice-default-body-background-color);
  color: var(--notice-default-body-text-color);
}

/* action */

.hx-action > .hx-notice-header,
.hx-action > .hx-notice-head {
  background: var(--notice-action-head-background-color);
  color: var(--notice-action-head-text-color);
}

.hx-action > .hx-notice-body {
  background: var(--notice-action-body-background-color);
  color: var(--notice-action-body-text-color);
}

/* positive */

.hx-positive > .hx-notice-header,
.hx-positive > .hx-notice-head {
  background: var(--notice-positive-head-background-color);
  color: var(--notice-positive-head-text-color);
}

.hx-positive > .hx-notice-body {
  background: var(--notice-positive-body-background-color);
  color: var(--notice-positive-body-text-color);
}

/* warning */

.hx-warning > .hx-notice-header,
.hx-warning > .hx-notice-head {
  background: var(--notice-warning-head-background-color);
  color: var(--notice-warning-head-text-color);
}

.hx-warning > .hx-notice-body {
  background: var(--notice-warning-body-background-color);
  color: var(--notice-warning-body-text-color);
}

/* negative */

.hx-negative > .hx-notice-header,
.hx-negative > .hx-notice-head {
  background: var(--notice-negative-head-background-color);
  color: var(--notice-negative-head-text-color);
}

.hx-negative > .hx-notice-body {
  background: var(--notice-negative-body-background-color);
  color: var(--notice-negative-body-text-color);
}

/* info */

.hx-info > .hx-notice-header,
.hx-info > .hx-notice-head {
  background: var(--notice-info-head-background-color);
  color: var(--notice-info-head-text-color);
}

.hx-info > .hx-notice-body {
  background: var(--notice-info-body-background-color);
  color: var(--notice-info-body-text-color);
}

/* complement */

.hx-complement > .hx-notice-header,
.hx-complement > .hx-notice-head {
  background: var(--notice-complement-head-background-color);
  color: var(--notice-complement-head-text-color);
}

.hx-complement > .hx-notice-body {
  background: var(--notice-complement-body-background-color);
  color: var(--notice-complement-body-text-color);
}

/* contrast */

.hx-contrast > .hx-notice-header,
.hx-contrast > .hx-notice-head {
  background: var(--notice-contrast-head-background-color);
  color: var(--notice-contrast-head-text-color);
}

.hx-contrast > .hx-notice-body {
  background: var(--notice-contrast-body-background-color);
  color: var(--notice-contrast-body-text-color);
}

.hx-sticky-table-scroll-top,
.hx-sticky-table-scroll-right,
.hx-sticky-table-scroll-bottom,
.hx-sticky-table-scroll-left {
  box-shadow: 0 0 15px 1px var(--sticky-table-headers-scroll-indicator-shadow-color);
}

.hx-axis-line {
  stroke: var(--plot-axis-line-color);
}

.hx-tick-line {
  stroke: var(--plot-tick-line-color);
}

.hx-axis text {
  font-size: var(--plot-tick-text-size);
  fill: var(--plot-tick-text-color);
}

.hx-legend-box {
  fill: var(--plot-label-background-color);
  stroke: var(--plot-label-border-color);
}

.hx-legend-entry text {
  fill: var(--plot-label-key-text-color);
}

.hx-axis-title {
  fill: var(--plot-axis-title-text-color);
}

.hx-vertical-grid-line, .hx-horizontal-grid-line {
  stroke: var(--plot-grid-line-color);
}

.hx-pie-segment-text {
  fill: var(--plot-pie-segment-text-color);
  font-size: 15px;
  font-weight: bold;
}

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

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

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

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

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

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

.hx-plot-background-warm {
  background: var(--plot-warm-color);
  color: var(--plot-warm-text-color);
}

.hx-plot-background-ambient {
  background: var(--plot-ambient-color);
  color: var(--plot-ambient-text-color);
}

.hx-plot-background-cold {
  background: var(--plot-cold-color);
  color: var(--plot-cold-text-color);
}

.hx-plot-background-positive {
  background: var(--plot-positive-color);
  color: var(--plot-positive-text-color);
}

.hx-plot-background-warning {
  background: var(--plot-warning-color);
  color: var(--plot-warning-text-color);
}

.hx-plot-background-negative {
  background: var(--plot-negative-color);
  color: var(--plot-negative-text-color);
}

.hx-plot-label-details {
  background: var(--plot-label-background-color);
  box-shadow: 1px 1px 1px 1px var(--plot-label-box-shadow-color);
  color: var(--plot-label-text-color);
}

.hx-plot-label-details-basic {
  background: var(--plot-label-background-color);
  box-shadow: 1px 1px 1px 1px var(--plot-label-box-shadow-color);
  color: var(--plot-label-text-color);
}

.hx-plot-label-details-header {
  background: var(--plot-label-header-background-color);
  border-color: var(--plot-label-header-border-color);
  color: var(--plot-label-header-text-color);
}

.hx-plot-label-marker {
  border-color: var(--plot-label-background-color);
  box-shadow: 1px 1px 1px 1px var(--plot-label-box-shadow-color);
}

.hx-label {
  background: var(--label-default-background-color);
  border-color: var(--label-default-border-color);
  color: var(--label-default-text-color);
}

.hx-label.hx-label-outline {
  background: var(--label-default-outline-background-color);
  border-color: var(--label-default-outline-border-color);
  color: var(--label-default-outline-text-color);
}

.hx-label.hx-action {
  background: var(--label-action-background-color);
  border-color: var(--label-action-border-color);
  color: var(--label-action-text-color);
}

.hx-label.hx-action.hx-label-outline {
  background: var(--label-action-outline-background-color);
  border-color: var(--label-action-outline-border-color);
  color: var(--label-action-outline-text-color);
}

.hx-label.hx-positive {
  background: var(--label-positive-background-color);
  border-color: var(--label-positive-border-color);
  color: var(--label-positive-text-color);
}

.hx-label.hx-positive.hx-label-outline {
  background: var(--label-positive-outline-background-color);
  border-color: var(--label-positive-outline-border-color);
  color: var(--label-positive-outline-text-color);
}

.hx-label.hx-negative {
  background: var(--label-negative-background-color);
  border-color: var(--label-negative-border-color);
  color: var(--label-negative-text-color);
}

.hx-label.hx-negative.hx-label-outline {
  background: var(--label-negative-outline-background-color);
  border-color: var(--label-negative-outline-border-color);
  color: var(--label-negative-outline-text-color);
}

.hx-label.hx-warning {
  background: var(--label-warning-background-color);
  border-color: var(--label-warning-border-color);
  color: var(--label-warning-text-color);
}

.hx-label.hx-warning.hx-label-outline {
  background: var(--label-warning-outline-background-color);
  border-color: var(--label-warning-outline-border-color);
  color: var(--label-warning-outline-text-color);
}

.hx-label.hx-info {
  background: var(--label-info-background-color);
  border-color: var(--label-info-border-color);
  color: var(--label-info-text-color);
}

.hx-label.hx-info.hx-label-outline {
  background: var(--label-info-outline-background-color);
  border-color: var(--label-info-outline-border-color);
  color: var(--label-info-outline-text-color);
}

.hx-label.hx-complement {
  background: var(--label-complement-background-color);
  border-color: var(--label-complement-border-color);
  color: var(--label-complement-text-color);
}

.hx-label.hx-complement.hx-label-outline {
  background: var(--label-complement-outline-background-color);
  border-color: var(--label-complement-outline-border-color);
  color: var(--label-complement-outline-text-color);
}

.hx-label.hx-contrast {
  background: var(--label-contrast-background-color);
  border-color: var(--label-contrast-border-color);
  color: var(--label-contrast-text-color);
}

.hx-label.hx-contrast.hx-label-outline {
  background: var(--label-contrast-outline-background-color);
  border-color: var(--label-contrast-outline-border-color);
  color: var(--label-contrast-outline-text-color);
}

.hx-slider-inner:before {
  content: ' ';
  top: calc((100% - var(--slider-range-height)) / 2);
  height: var(--slider-range-height);
  background: var(--slider-background-color);
  border-radius: var(--slider-inner-border-radius);
}

.hx-slider-range {
  top: calc((100% - var(--slider-range-height)) / 2);
  height: var(--slider-range-height);
  background: var(--slider-range-background-color);
  border-radius: var(--slider-range-border-radius);
}

.hx-slider-range .hx-slider.hx-disabled {
  background: var(--slider-disabled-background-color);
}

.hx-slider-range:before, .hx-slider-range:after {
  background: var(--slider-slider-background-color);
  border-radius: var(--slider-slider-border-radius);
}

.hx-slider-double .hx-slider-range:before {
  border-radius: var(--slider-slider-left-border-radius);
}

.hx-slider-double .hx-slider-range:after {
  border-radius: var(--slider-slider-right-border-radius);
}

.hx-slider-value {
  color: var(--slider-text-color);
  background: var(--slider-value-background-color);
  border-radius: var(--slider-value-border-radius);
}

.hx-slider-value:before {
  border-top-color: var(--slider-value-background-color);
}

.hx-slider-value.hx-slider-under:before {
  border-top-color: transparent;
  border-bottom-color: var(--slider-value-background-color);
}

.hx-slider-point {
  border-radius: var(--slider-marker-border-radius);
  background: var(--slider-slider-marker-color);
  height: var(--slider-range-height);
  top: calc((100% - var(--slider-range-height)) / 2);
}

.hx-card {
  border-color: var(--card-border-color);
  background: var(--card-background-color);
  box-shadow: 1px 1px 3px var(--card-shadow-color);
}

.hx-card > .hx-card-group:not(.hx-card-joint),
.hx-card > .hx-card-section:not(.hx-card-joint) {
  border-color: var(--card-section-border-color);
}

.hx-card-header {
  color: var(--card-header-text-color);
  background: var(--card-header-background-color);
}

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

.hx-card-section {
  padding: var(--card-normal-padding);
}

.hx-card-section.hx-card-joint {
  padding-right: 0;
}

.hx-card-small.hx-card-section {
  padding: var(--card-small-padding) var(--card-normal-padding);
}

.hx-card-small.hx-card-section.hx-card-joint {
  padding-right: 0;
}

.hx-card-small .hx-card-section:not(.hx-card-small):not(.hx-card-normal) {
  padding: var(--card-small-padding) var(--card-normal-padding);
}

.hx-card-normal.hx-card-section {
  padding: var(--card-normal-padding) var(--card-normal-padding);
}

.hx-card-normal.hx-card-section.hx-card-joint {
  padding-right: 0;
}

.hx-card-normal .hx-card-section:not(.hx-card-small):not(.hx-card-normal) {
  padding: var(--card-normal-padding) var(--card-normal-padding);
}

.hx-card-group.hx-card-vertical > .hx-card-group:not(.hx-card-joint),
.hx-card-group.hx-card-vertical > .hx-card-section:not(.hx-card-joint) {
  border-color: var(--card-section-border-color);
}

.hx-card-group:not(.hx-card-vertical) > .hx-card-group:not(.hx-card-joint),
.hx-card-group:not(.hx-card-vertical) > .hx-card-section:not(.hx-card-joint) {
  border-color: var(--card-section-border-color);
}

.hx-card-action:hover {
  background: var(--card-action-hover-background-color);
}

.hx-card-icon {
  color: var(--card-icon-color);
}

/* no real reason to have complement and contrast here */

.hx-background-action .hx-card-title,
.hx-background-positive .hx-card-title,
.hx-background-warning .hx-card-title,
.hx-background-negative .hx-card-title,
.hx-background-info .hx-card-title {
  color: var(--card-context-text-color);
}

/* no real reason to have complement and contrast here */

.hx-background-action .hx-card-icon,
.hx-background-positive .hx-card-icon,
.hx-background-warning .hx-card-icon,
.hx-background-negative .hx-card-icon,
.hx-background-info .hx-card-icon {
  color: var(--card-context-text-color);
}

.hx-paginator-button,
.hx-paginator-button:focus {
  border-color: var(--paginator-button-border-color);
  background: var(--paginator-button-background-color);
  color: var(--paginator-button-text-color);
  font-weight: var(--paginator-button-font-weight);
}

.hx-paginator-button:hover {
  background: var(--paginator-button-hover-background-color);
  color: var(--paginator-button-hover-text-color);
}

.hx-paginator-ellipsis,
.hx-paginator-ellipsis:hover {
  background: transparent;
  border-color: transparent;
  color: var(--paginator-ellipsis-text-color);
}

.hx-paginator-selected,
.hx-paginator-selected:hover {
  background: var(--paginator-selected-background-color);
  color: var(--paginator-selected-text-color);
}

.hx-date-picker {
  background: var(--date-picker-input-background-color);
  border-color: var(--date-picker-border-color);
}

.hx-date-picker .hx-icon:not(.hx-date-to-icon) {
  background: var(--date-picker-icon-background-color);
  color: var(--date-picker-icon-color);
}

.hx-date-input.hx-date-error {
  background: var(--date-picker-error-background-color);
  outline-color: var(--date-picker-error-outline-color);
}

.hx-date-picker-calendar .hx-calendar-header {
  color: var(--date-picker-header-text-color);
}

.hx-date-picker-calendar .hx-calendar-header .hx-calendar-back,
.hx-date-picker-calendar .hx-calendar-header .hx-calendar-forward {
  color: var(--date-picker-navigation-icon-color);
}

.hx-date-picker-calendar .hx-calendar-header .hx-calendar-back:hover,
.hx-date-picker-calendar .hx-calendar-header .hx-calendar-forward:hover {
  color: var(--date-picker-navigation-icon-hover-color);
}

.hx-date-picker-calendar .hx-grid {
  padding: var(--date-picker-grid-padding);
}

.hx-date-picker-calendar .hx-grid-row.hx-grid-row-heading {
  border-color: var(--date-picker-divider-color);
}

.hx-date-picker-calendar .hx-grid .hx-grid-text {
  border-radius: var(--date-picker-day-border-radius);
  padding: var(--date-picker-grid-padding);
  margin: calc(var(--date-picker-grid-padding) * -1);
}

.hx-date-picker-calendar .hx-grid:hover .hx-grid-text {
  background: var(--date-picker-day-hover-background-color);
  color: var(--date-picker-day-hover-text-color);
}

.hx-date-picker-calendar .hx-grid.hx-grid-today .hx-grid-text {
  background: var(--date-picker-today-background-color);
  color: var(--date-picker-today-text-color);
}

.hx-date-picker-calendar .hx-grid.hx-grid-selected .hx-grid-text {
  background: var(--date-picker-selected-background-color);
  color: var(--date-picker-selected-text-color);
}

.hx-date-picker-calendar .hx-grid.hx-grid-selected-range .hx-grid-range-bg,
.hx-date-picker-calendar .hx-grid.hx-grid-selected .hx-grid-range-bg {
  background: var(--date-picker-range-background-color);
}

.hx-date-picker-calendar .hx-grid.hx-grid-out-of-range {
  color: var(--date-picker-out-of-range-color);
}

.hx-date-picker-calendar .hx-grid.hx-grid-out-of-range:hover .hx-grid-text {
  color: var(--date-picker-out-of-range-color);
}

.hx-side-collapsible-heading {
  background: var(--side-collapsible-heading-background-color);
  color: var(--side-collapsible-heading-text-color);
}

.hx-side-collapsible-toggle:hover,
.hx-side-collapsible-heading:not(.hx-side-collapsible-heading-no-hover):hover {
  background: var(--side-collapsible-toggle-hover-background-color);
  color: var(--side-collapsible-toggle-hover-text-color);
}

.hx-side-collapsible-toggle {
  background: var(--side-collapsible-toggle-background-color);
  color: var(--side-collapsible-toggle-text-color);
}

.hx-side-collapsible-content {
  border-color: var(--side-collapsible-content-border-color);
  background: var(--side-collapsible-content-background-color);
  color: var(--side-collapsible-content-text-color);
}

.hx-side-collapsible {
  box-shadow: 1px 1px 1px 1px var(--side-collapsible-shadow-color);
}

.hx-time-picker {
  background: var(--time-picker-input-background-color);
  border-color: var(--time-picker-border-color);
}

.hx-time-picker .hx-icon {
  background: var(--time-picker-icon-background-color);
  color: var(--time-picker-icon-color);
}

.hx-time-picker.hx-time-error {
  background: var(--time-picker-error-background-color);
  outline: solid 1px var(--time-picker-error-outline-color);
}

.hx-tabs-content {
  background: var(--tabs-background-color);
  border-color: var(--tabs-default-border-color);
  box-shadow: 1px 1px 1px 1px var(--tabs-shadow-color);
  color: var(--tabs-text-color);
}

.hx-tab {
  background: var(--tabs-background-color);
  border-color: var(--tabs-default-border-color);
  color: var(--tabs-text-color);
  opacity: var(--tabs-inactive-opacity);
}

.hx-tab.hx-tab-active {
  opacity: var(--tabs-active-opacity);
}

.hx-tabs-content.hx-action,
.hx-tab.hx-action {
  border-color: var(--tabs-action-border-color);
}

.hx-tabs-content.hx-positive,
.hx-tab.hx-positive {
  border-color: var(--tabs-positive-border-color);
}

.hx-tabs-content.hx-negative,
.hx-tab.hx-negative {
  border-color: var(--tabs-negative-border-color);
}

.hx-tabs-content.hx-warning,
.hx-tab.hx-warning {
  border-color: var(--tabs-warning-border-color);
}

.hx-tabs-content-info,
.hx-tab.hx-info {
  border-color: var(--tabs-info-border-color);
}

.hx-tabs-content.hx-complement,
.hx-tab.hx-complement {
  border-color: var(--tabs-complement-border-color);
}

.hx-tabs-content.hx-contrast,
.hx-tab.hx-contrast {
  border-color: var(--tabs-contrast-border-color);
}

.hx-flag-tabs .hx-tab:first-child {
  margin-left: var(--tabs-first-tab-offset);
}

.hx-flag-tabs .hx-tab {
  opacity: 1;
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  padding: var(--tabs-tab-padding);
  font-weight: var(--tabs-font-weight);
}

.hx-flag-tabs .hx-tab:hover {
  color: var(--tabs-hover-text-color);
  background: var(--tabs-hover-background-color);
  border-bottom: 1px solid var(--tabs-border-color);
}

.hx-flag-tabs .hx-tab.hx-tab-active {
  color: var(--tabs-active-text-color);
  border-color: var(--tabs-border-color);
  border-top-color: var(--tabs-active-border-color);
  border-bottom-color: transparent;
  background: var(--tabs-active-background-color);
}

.hx-flag-tabs .hx-tabs-content {
  border: none;
  border-top: 1px solid var(--tabs-border-color);
  box-shadow: none;
  padding: var(--tabs-content-padding);
}

.hx-tree-node-parent,
.hx-tree-node-content {
  background: var(--tree-background-color);
}

.hx-tree-node-parent .hx-tree-node-parent-icon {
  background: var(--tree-icon-background-color);
  color: var(--tree-icon-text-color);
}

.hx-tree-node-parent .hx-tree-node-parent-icon:hover {
  background: var(--tree-icon-background-hover-color);
  color: var(--tree-icon-text-hover-color);
}

.hx-tree-node-parent .hx-tree-node-parent-icon.hx-tree-node-parent-icon-disabled,
.hx-tree-node-parent .hx-tree-node-parent-icon.hx-tree-node-parent-icon-disabled:hover {
  background: var(--tree-icon-disabled-background-color);
  color: var(--tree-icon-disabled-text-color);
}

.hx-tree-node-children {
  border-left-color: var(--tree-item-border-left-color);
}

.hx-tree-node-children > .hx-tree-node > .hx-tree-node-content,
.hx-tree-node-parent {
  box-shadow: 1px 1px 1px var(--tree-shadow-color);
}

.hx-data-table .hx-data-table-row-no-data,
.hx-data-table .hx-data-table-row-no-data:hover {
  background: var(--data-table-no-data-row-background-color);
  color: var(--data-table-no-data-row-text-color);
}

.hx-data-table.hx-data-table-compact .hx-data-table-row,
.hx-data-table.hx-data-table-compact .hx-data-table-collapsible-content-row {
  color: var(--data-table-compact-row-text-color);
  box-shadow: 1px 1px 1px var(--data-table-compact-row-shadow-color);
}

.hx-data-table.hx-data-table-compact .hx-data-table-row {
  background: var(--data-table-compact-row-background-color);
  color: var(--data-table-compact-row-text-color);
}

.hx-data-table.hx-data-table-compact .hx-data-table-row:hover {
  background: var(--data-table-compact-row-hover-background-color);
  color: var(--data-table-compact-row-hover-text-color);
}

.hx-data-table.hx-data-table-compact .hx-data-table-row.hx-data-table-row-selected {
  background: var(--data-table-selected-row-background-color);
}

.hx-data-table .hx-data-table-table tr.hx-data-table-collapsible-content-row,
.hx-data-table .hx-data-table-table tr.hx-data-table-collapsible-content-row:hover {
  background: var(--data-table-row-collapsible-background-color);
  color: var(--data-table-row-collapsible-text-color);
}

.hx-data-table .hx-data-table-table tr.hx-data-table-row-disabled,
.hx-data-table .hx-data-table-table tr.hx-data-table-row-disabled:hover {
  background: var(--data-table-disabled-row-background-color);
  color: var(--data-table-disabled-row-text-color);
}

.hx-data-table .hx-data-table-table tr.hx-data-table-row-selected {
  background: var(--data-table-selected-row-background-color);
}

.hx-data-table .hx-data-table-control-panel-bottom,
.hx-data-table .hx-data-table-control-panel-compact,
.hx-data-table .hx-data-table-control-panel {
  background: var(--data-table-footer-background-color);
  box-shadow: 1px 1px 1px var(--data-table-footer-shadow-color);
}

.hx-data-table .hx-data-table-status-bar {
  background: var(--data-table-status-bar-background-color);
  color: var(--data-table-status-bar-text-color);
}

.hx-data-table .hx-data-table-loading {
  background: var(--data-table-loading-background-color);
}

.hx-sidebar {
  background: var(--sidebar-background-color);
  box-shadow: 1px 1px 1px 1px var(--sidebar-shadow-color);
}

.hx-sidebar.hx-animate {
  transition: opacity var(--sidebar-animation-duration), width var(--sidebar-animation-duration);
}

.hx-sidebar .hx-sidebar-section:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar .hx-sidebar-indent > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar .hx-sidebar-indent > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar .hx-collapsible-content > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar .hx-collapsible-content > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent),
.hx-sidebar .hx-collapsible-heading:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent) {
  color: var(--sidebar-section-text-color);
}

.hx-sidebar .hx-sidebar-section:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar .hx-sidebar-indent > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar .hx-sidebar-indent > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar .hx-collapsible-content > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar .hx-collapsible-content > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected,
.hx-sidebar .hx-collapsible-heading:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent).hx-selected {
  background: var(--sidebar-selected-background-color);
  color: var(--sidebar-selected-text-color);
}

.hx-sidebar .hx-sidebar-section:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar .hx-sidebar-indent > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar .hx-sidebar-indent > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar .hx-collapsible-content > div:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar .hx-collapsible-content > a:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover,
.hx-sidebar .hx-collapsible-heading:not(.hx-sidebar-clear):not(.hx-collapsible):not(.hx-sidebar-title):not(.hx-sidebar-indent):hover {
  background: var(--sidebar-section-hover-background-color);
  color: var(--sidebar-section-hover-text-color);
}

.hx-sidebar .hx-sidebar-indent > div,
.hx-sidebar .hx-sidebar-indent > a,
.hx-sidebar .hx-collapsible-content > div,
.hx-sidebar .hx-collapsible-content > a,
.hx-sidebar > .hx-collapsible > .hx-collapsible-content > .hx-collapsible {
  border-left: solid 1px var(--sidebar-collapsible-border-color);
}

.hx-sidebar .hx-sidebar-title {
  color: var(--sidebar-title-text-color);
  font-family: var(--sidebar-title-font);
  background: var(--sidebar-title-background-color);
}

.hx-sidebar-page .hx-titlebar-sidebar-button {
  background: var(--sidebar-titlebar-button-background-color);
  color: var(--sidebar-titlebar-button-text-color);
}

.hx-sidebar-page .hx-titlebar-sidebar-button:hover {
  color: var(--sidebar-titlebar-button-hover-text-color);
}

.hx-sidebar-page .hx-content.hx-animate {
  transition: left var(--sidebar-animation-duration);
}

.hx-sidebar-page .hx-titlebar-icon {
  background: var(--sidebar-titlebar-icon-background-color);
}

.hx-tag-input {
  border-color: var(--tag-input-border-color);
  background: var(--tag-input-background-color);
}

.hx-tag {
  background: var(--tag-input-default-background-color);
  color: var(--tag-input-default-text-color);
  border-color: var(--tag-input-default-border-color);
}

.hx-tag.hx-action {
  background: var(--tag-input-action-background-color);
  color: var(--tag-input-action-text-color);
  border-color: var(--tag-input-action-border-color);
}

.hx-tag.hx-positive {
  background: var(--tag-input-positive-background-color);
  color: var(--tag-input-positive-text-color);
  border-color: var(--tag-input-positive-border-color);
}

.hx-tag.hx-warning {
  background: var(--tag-input-warning-background-color);
  color: var(--tag-input-warning-text-color);
  border-color: var(--tag-input-warning-border-color);
}

.hx-tag.hx-negative {
  background: var(--tag-input-negative-background-color);
  color: var(--tag-input-negative-text-color);
  border-color: var(--tag-input-negative-border-color);
}

.hx-tag.hx-info {
  background: var(--tag-input-info-background-color);
  color: var(--tag-input-info-text-color);
  border-color: var(--tag-input-info-border-color);
}

.hx-tag.hx-complement {
  background: var(--tag-input-complement-background-color);
  color: var(--tag-input-complement-text-color);
  border-color: var(--tag-input-complement-border-color);
}

.hx-tag.hx-contrast {
  background: var(--tag-input-contrast-background-color);
  color: var(--tag-input-contrast-text-color);
  border-color: var(--tag-input-contrast-border-color);
}

.hx-tag.hx-disabled {
  background: var(--tag-input-disabled-background-color);
  color: var(--tag-input-disabled-text-color);
  border-color: var(--tag-input-disabled-border-color);
}

.hx-flag-tag-input.hx-tag-input {
  border-radius: var(--input-border-radius);
}

.hx-drawing-sidebar {
  background: var(--drawing-sidebar-background-color);
  color: var(--drawing-sidebar-text-color);
}

.hx-drawing-sidebar .hx-drawing-sidebar-title {
  background: var(--drawing-sidebar-title-background-color);
  color: var(--drawing-sidebar-title-text-color);
}

.hx-drawing-sidebar-t {
  border-bottom: 1px solid var(--drawing-sidebar-border-color);
}

.hx-drawing-sidebar-r {
  border-left: var(--drawing-border-style);
}

.hx-drawing-sidebar-b {
  border-top: var(--drawing-border-style);
}

.hx-drawing-sidebar-l {
  border-right: var(--drawing-border-style);
}

.hx-badge {
  height: var(--badge-height);
  line-height: var(--badge-height);
  line-height: calc(var(--badge-height) - (var(--badge-border-width) * 2));
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  border-radius: var(--badge-border-radius);
  border-width: var(--badge-border-width);
  border-style: var(--badge-border-style);
  padding: var(--badge-padding);
  background: var(--badge-default-color);
  color: var(--badge-default-text-color);
  border-color: var(--badge-default-color);
}

.hx-badge.hx-success {
  background: var(--badge-success-color);
  color: var(--badge-success-text-color);
  border-color: var(--badge-success-color);
}

.hx-badge.hx-danger {
  background: var(--badge-danger-color);
  color: var(--badge-danger-text-color);
  border-color: var(--badge-danger-color);
}

.hx-badge.hx-warning {
  background: var(--badge-warning-color);
  color: var(--badge-warning-text-color);
  border-color: var(--badge-warning-color);
}

.hx-badge.hx-badge-inverse {
  background: var(--badge-inverse-background-color);
  color: var(--badge-inverse-text-color);
}

.hx-single-select-value {
  padding-right: var(--single-select-input-right-padding);
  margin-right: var(--single-select-arrow-offset);
}

.hx-single-select-input-container {
  margin: var(--single-select-input-margin);
}

.hx-single-select-icon {
  color: var(--single-select-arrow-color);
}

.hx-tooltip {
    background-color: var(--tooltip-background-color);
    font-size: var(--tooltip-font-size);
    color: var(--tooltip-text-color);
    font-weight: var(--tooltip-font-weight);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-border-radius);
    max-width: var(--tooltip-max-width);
}

.hx-tooltip.hx-dropdown-down {
    margin-top: var(--tooltip-space);
}

.hx-dropdown.hx-dropdown-up{
    margin-top: calc(-1 * var(--tooltip-space));
}

.hx-tooltip-label  {
    border-bottom-color: var(--tooltip-label-underline-color);
    color: var(--tooltip-label-text-color);
}

/* Centre aligned arrow */

/* .hx-tooltip:before {
    left: 50%;
    border: 8px solid transparent;
    border-top: 8px solid #686868;
    transform: translate(-50%, calc(100% + 10px));
} */

/* Left aligned arrow */

.hx-tooltip:before {
    left: var(--tooltip-arrow-spacing);
    top: 100%;
    border: var(--tooltip-arrow-size) solid transparent;
    border-top: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
}

/* Left aligned arrow - DOWN */

.hx-tooltip.hx-dropdown-down:before {
    left: var(--tooltip-arrow-spacing);
    top: calc(-2 * var(--tooltip-arrow-size));
    border: var(--tooltip-arrow-size) solid transparent;
    border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background-color);
}

/* Right aligned arrow */

/*.hx-tooltip:before {
    left: calc(100% - 14px);
    border: 8px solid transparent;
    border-top: 8px solid #686868;
    transform: translate(-50%, calc(100% + 10px));
}*/

.hx-stepper-progress-complete {
  background-color: var(--stepper-number-selected-background-color);
}

.hx-stepper-progress-incomplete {
  background-color: var(--stepper-number-default-background-color);
}

.hx-stepper-number {
  width: var(--stepper-number-diameter);
  height: var(--stepper-number-diameter);
  line-height: var(--stepper-number-diameter);
  background-color: var(--stepper-number-default-background-color);
  color: var(--stepper-number-default-color);
}

.hx-stepper-number-selected {
  background-color: var(--stepper-number-selected-background-color);
  color: var(--stepper-number-selected-color);
}

.hx-stepper-number-complete {
  background-color: var(--stepper-number-complete-background-color);
  border-color: var(--stepper-number-complete-color);
  color: var(--stepper-number-complete-color);
}

.hx-stepper-number-error {
  background-color: var(--stepper-number-error-background-color);
  color: var(--stepper-number-error-color);
  border-color: transparent;
}

.hx-stepper-title {
  color: var(--stepper-title-color);
  padding: var(--stepper-title-padding);
}

.hx-stepper-title-error {
  color: var(--stepper-title-error-color);
}