:root {
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--color-purple-primary-3);
  --mat-option-selected-state-label-text-color: var(--color-purple-primary-3);
  --mat-table-row-item-container-height: 45px;
  --mat-standard-button-toggle-background-color: var(--color-background);
  --mat-standard-button-toggle-selected-state-background-color: var(--color-purple-primary);
  --mat-standard-button-toggle-shape: 5px;
  --mat-standard-button-toggle-label-text-size: 12px;
  --mat-paginator-container-text-size: 14px;
  --mdc-protected-button-label-text-size: 12px;
  --color-text: #fff;
  --color-background: #303030;
  --color-purple-primary: #753bbd;
  --color-purple-primary-1: #8a59c7;
  --color-purple-primary-2: #61319B;
  --color-purple-primary-3: #AE8ADB;
  --color-purple-primary-4: #9464CE;
  --color-purple-accent: #e0c7ff;
  --card-background-color: #3a3938;
  --graph-background-color: #3a3938;
  --graph-line-color: #AE8ADB;
  --font-family: Roboto, "Helvetica Neue", sans-serif;
  --color-white: #fff;
  --color-grey: #eee9e9;
  --color-grey1: #f5f5f5;
  --color-grey2: #c4c3c3;
  --color-grey3: #989898;
  --color-grey4: #727272;
  --color-grey6: #3a3938;
  --color-grey7: #979797;
  --color-black: #2a2a2a;
  --color-purple: #efe8f7;
  --color-purple1: #e0c7ff;
  --color-amber: #fab600;
  --color-amber-other: #e7b416;
  --color-green: #00a10b;
  --color-green-other: #399d2f;
  --color-green1: #249833;
  --color-green2: #006607;
  --color-red1: #cb0019;
  --color-red2: #ba0024;
  --color-red3: #892e2e;
  --color-red4: #990012;
  --color-red5: #FF6678;
  --color-red6: #CC0018;
  --color-red7: #b03838;
  --color-red8: #b03838a3;
  --color-blue: #9EACFF;
  --color-blue1: #2caffe;
}

/* www/styles.css */

body {
  background-color: var(--color-background);
  /* Grey Brady background */
  color: var(--color-text);
  /* Default text color */
  font-family: var(--font-family);
  /* Default font */
}

.container-fluid {
  padding: 0 !important;
}

.mast-header {
  height: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--color-purple-primary);
  padding: 10px 20px;
  justify-content: space-between;
}

.mast-header h1 {
  color: var(--color-white);
  height: 40px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
  flex-grow: 1;
  font-size: 1.4em;
}

.mast-header .mast-logo {
  width: 173px;
  height: 25px
}

button.collapse-toggle {
  color: var(--color-white) !important;
}


h1 {
  color: var(--color-text) !important;
  /* Primary blue color for headers */
  font-family: var(--font-family);
  font-size: 2.5em;
  /* Larger font size for headers */
}

.filter-button {
  background-color: var(--color-purple-primary);
  /* Purple background for buttons */
  color: var(--color-text);
  /* White text for buttons */
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

.filter-button:hover {
  background-color: var(--color-purple-primary-3);
  /* Lighter purple when hovering */
}

.plot-container {
  background-color: var(--card-background-color) !important;
  /* Grey Brady background */
}

.date-picker {
  color: var(--color-text);
  /* White text for date picker */
}

.kpi-value {
  color: var(--color-text);
  /* White text for KPI values */
}