@layer breezer-lib, breezer-second-lib;
:root {
  --brand-dark-blue: #0b2a4c;
  --brand-teal: #00a8b8;
  --brand-peach: #f9836b;
  --color-primary: #00a8b8;
  --color-disabled: #c4c4c4;
  --color-middling: #f39d0e;
  --color-middling-light: rgba(243, 157, 14, 0.1);
  --color-negative: #e56e19;
  --color-negative-light: rgba(229, 110, 25, 0.1);
  --color-positive: #73cf64;
  --color-positive-light: rgba(115, 207, 100, 0.1);
  --color-very-negative: #ad3a2d;
  --color-very-negative-light: rgba(173, 58, 45, 0.1);
  --color-very-positive: #20b55b;
  --color-very-positive-light: rgba(32, 181, 91, 0.1);
  --component-background: #ffffff;
  --heading: #0b2a4c;
  --mdc-theme-primary: #00a8b8;
  --mdc-theme-secondary: #018786;
  --mdc-theme-background: #fff;
  --mdc-theme-surface: #fff;
  --mdc-theme-error: #b00020;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
  --mdc-theme-on-surface: #000;
  --mdc-theme-on-error: #fff;
  --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-dark: white;
  --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
}
/*
Todo: From the MatBlazor style. Need to line these up with the Mibo Ones?
	Also, the components aren't getting the default class. Buttons -> mdc-button... 
*/
:root {
  --background-colour: #f4f6fa;
  --primary-colour: var(--color-primary);
  --background-highlight-colour: color-mix(in srgb, var(--brand-teal), white 90%);
  --text-colour: color-mix(in srgb, var(--brand-dark-blue), black 50%);
  --border-colour: #e1ebe5;
  --font-awesome-family: 'Font Awesome 6 Pro';
}
:root {
  --header-background-colour: var(--background-highlight-colour);
  --menu-background-colour: var(--background-highlight-colour);
  --harm-color-very-low: #ffcb56;
  --harm-color-low: #f4a900;
  --harm-color-moderate: #e56e19;
  --harm-color-high: #ad3a2d;
  --harm-color-very-high: #961203;
  --benefit-color-very-low: #98e27e;
  --benefit-color-low: #73cf64;
  --benefit-color-moderate: #4ac456;
  --benefit-color-high: #20b55b;
  --benefit-color-very-high: #02963d;
  --risk-color-very-low: #38b54c;
  --risk-color-low: #2f923a;
  --risk-color-medium: #f7eb0f;
  --risk-color-high: #f89123;
  --risk-color-very-high: #ea1520;
  --risk-color-extreme: #bc151b;
}
.popup-content {
  background-color: var(--background-highlight-colour);
}
body {
  font-family: "proxima-nova", sans-serif;
}
div.page > main {
  padding: 10px;
}
/*
    This file contains the styles that apply globally, and aren't tied to any particular component.  
*/
h1 {
  font-size: larger;
}
tag {
  border-radius: 20px;
  padding: 5px 15px;
  background-color: gray;
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
}
tag.risk-very-low {
  background-color: var(--harm-color-very-low);
}
tag.risk-low {
  background-color: var(--harm-color-low);
}
tag.risk-moderate {
  background-color: var(--harm-color-moderate);
}
tag.risk-high {
  background-color: var(--harm-color-high);
}
tag.risk-very-high {
  background-color: var(--harm-color-very-high);
}
tag.benefit-very-low {
  background-color: var(--benefit-color-very-low);
}
tag.benefit-low {
  background-color: var(--benefit-color-low);
}
tag.benefit-moderate {
  background-color: var(--benefit-color-moderate);
}
tag.benefit-high {
  background-color: var(--benefit-color-high);
}
tag.benefit-very-high {
  background-color: var(--benefit-color-very-high);
}
.risk-block {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
}
.risk-block.no-data {
  font-weight: 400;
  color: #E8E9EB;
}
.risk-block.risk-very-low {
  background-color: var(--risk-color-very-low);
}
.risk-block.risk-low {
  background-color: var(--risk-color-low);
}
.risk-block.risk-medium {
  background-color: var(--risk-color-medium);
}
.risk-block.risk-high {
  background-color: var(--risk-color-high);
}
.risk-block.risk-very-high {
  background-color: var(--risk-color-very-high);
}
.risk-block.risk-extreme {
  background-color: var(--risk-color-extreme);
}
label.mat-text-field.mdc-text-field--outlined input.mat-text-field-input {
  border-radius: 8px;
}
label.mat-text-field.mdc-text-field--outlined div.mdc-notched-outline span.mdc-notched-outline__leading {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-color: #e1ebe5;
  transition: border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
label.mat-text-field.mdc-text-field--outlined div.mdc-notched-outline div.mdc-notched-outline__trailing {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-color: #e1ebe5;
  transition: border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
label.mat-text-field.mdc-text-field--outlined.mdc-text-field--focused div.mdc-notched-outline span.mdc-notched-outline__leading {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-color: #00a8b8;
}
label.mat-text-field.mdc-text-field--outlined.mdc-text-field--focused div.mdc-notched-outline div.mdc-notched-outline__trailing {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-color: #00a8b8;
}
label.mat-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover div.mdc-notched-outline span.mdc-notched-outline__leading {
  border-top: 2px solid #00a8b8;
  border-bottom: 2px solid #00a8b8;
  border-left: 2px solid #00a8b8;
}
label.mat-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover div.mdc-notched-outline div.mdc-notched-outline__trailing {
  border-top: 2px solid #00a8b8;
  border-right: 2px solid #00a8b8;
  border-bottom: 2px solid #00a8b8;
}
label.mat-text-field.mdc-text-field--outlined.invalid div.mdc-notched-outline span.mdc-notched-outline__leading {
  border-top: 2px solid var(--color-very-negative, red);
  border-bottom: 2px solid var(--color-very-negative, red);
  border-left: 2px solid var(--color-very-negative, red);
}
label.mat-text-field.mdc-text-field--outlined.invalid div.mdc-notched-outline div.mdc-notched-outline__trailing {
  border-top: 2px solid var(--color-very-negative, red);
  border-right: 2px solid var(--color-very-negative, red);
  border-bottom: 2px solid var(--color-very-negative, red);
}
.mdc-button--outlined:not(:disabled) {
  border-color: #00a8b8;
}
.sub-section {
  padding: 20px;
  margin-top: 20px;
  background-color: #f4f6fa;
  border-radius: 8px;
}
.sub-section h2 {
  margin-top: 0;
}
.sub-section form-field[breezer-form-field] label {
  width: 100%;
}