:root {
  --theme-default: #557ec5;
  --theme-default-contrast: #f6f9fc;
  --theme-default-hover: #4773c0;
  --theme-default-active: #18589D;
  --theme-default-hover-contrast: #f6f9fc;
  --theme-primary: #18589d;
  --theme-primary-contrast: #f6f9fc;
  --theme-primary-hover: #4a8acf;
  --theme-primary-hover-contrast: #f6f9fc;
  --theme-success: #31ae79;
  --theme-success-contrast: #FFFFFF;
  --theme-success-hover: #046d40;
  --theme-success-hover-contrast: #FFFFFF;
  --theme-info: #58bcc3;
  --theme-info-contrast: #FFFFFF;
  --theme-info-hover: #5caaaf;
  --theme-info-hover-contrast: #FFFFFF;
  --theme-secondary: #8392ab;
  --theme-secondary-contrast: #FFFFFF;
  --theme-secondary-hover: #6c788b;
  --theme-secondary-hover-contrast: #FFFFFF;
  --theme-panic: #ab83a9;
  --theme-panic-contrast: #FFFFFF;
  --theme-panic-hover: #6D28D9;
  --theme-panic-hover-contrast: #FFFFFF;
  --theme-warning: #fab005;
  --theme-warning-contrast: #172b4d;
  --theme-warning-hover: #e4a30c;
  --theme-warning-hover-contrast: #172b4d;
  --theme-danger: #c7566d;
  --theme-danger-contrast: #FFFFFF;
  --theme-danger-hover: #8d122a;
  --theme-danger-hover-contrast: #FFFFFF;
  --theme-light: #eaedf1;
  --theme-light-contrast: #172b4d;
  --theme-light-hover: #949799;
  --theme-light-hover-contrast: #172b4d;
  --theme-medium: #e9ecef;
  --theme-medium-contrast: #172b4d;
  --theme-medium-hover: #e9ecef;
  --theme-medium-hover-contrast: #172b4d;
  --theme-dark: #172b4d;
  --theme-dark-contrast: #ced4da;
  --theme-dark-hover: #172b4d;
  --theme-dark-hover-contrast: #ced4da;
  --theme-panel-toolbar: #d6d9e9;
  --theme-panel-toolbar-contrast: #172b4d;
  --text-primary: #18589d;
  --text-default: #557ec5;
  --text-success: #31ae79;
  --text-info: #58bcc3;
  --text-secondary: #8392ab;
  --text-warning: #fab005;
  --text-danger: #c7566d;
  --lux-navbar-backcolor: #18589d;
  --lux-navbar-contrast: #f6f9fc;
  --lux-navbar-color: #18589d;
  --lux-toolbar-backcolor: #d6d9e9;
  --lux-toolbar-color: #172b4d;
  --panel-qbe-button-color: white;
  --panel-qbe-button-backcolor: #557ec5;
  --panel-qbe-button-backcolor-hover: #557ec5;
  --panel-qbe-field-value-backcolor: white;
  --panel-qbe-label: #557ec5;
}

.sample-button-block-red {
    background-color: red !important;
    color: white !important;
}

.text-medium {
    font-size: medium;
}

.text-italic {
    font-style: italic;
}

.text-strong {
    font-weight: 800;
}

.scroll-vertical-auto {
    overflow-y: auto;
}