:root {
  --brand-lemon-lime: #C1F320;
  --brand-blue-zircon: #41FDFE;
  --brand-black-pearl: #001524;
}
:root {
  --background-colour: var(--brand-black-pearl);
  --primary-colour: var(--brand-blue-zircon);
  --background-highlight-colour: color-mix(in srgb, var(--brand-black-pearl), white 5%);
  --text-colour: white;
  --border-colour: color-mix(in srgb, var(--brand-black-pearl), white 15%);
  --white: color-mix(in srgb, var(--brand-black-pearl), white 5%);
}
:root {
  --header-background-colour: var(--background-highlight-colour);
  --menu-background-colour: var(--background-highlight-colour);
}
.popup-content {
  background-color: var(--background-highlight-colour);
}
.radio-select-style:after {
  font-weight: 400;
  position: absolute;
  right: 10px;
  top: 8px;
  width: 15px;
  height: 15px;
  border: solid 1px #cccaca;
  border-radius: 50%;
  content: "";
}
.radio-select-style[selected]:after,
.radio-select-style.selected:after {
  width: 17px;
  height: 17px;
  right: 9px;
  top: 7px;
  font-weight: 900;
  border: solid 6px #2BD1D2;
}
/*
    This file contains the styles that apply globally to the app ui, and aren't tied to any particular component.  
*/
html,
body {
  font-family: Lato, 'Roboto', sans-serif;
  scrollbar-color: var(--brand-black-pearl) black;
  scrollbar-width: thin;
  scrollbar-track-color: var(--background-highlight-colour);
}
h1 {
  font-size: larger;
}
.ml-tooltip-modal-container {
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.ml-tooltip-modal-container .blazored-modal-overlay {
  backdrop-filter: none;
  background-color: unset;
}
.ml-tooltip-modal-container .ml-modal {
  background-color: var(--brand-black-pearl);
  position: fixed;
  top: var(--tooltip-top, 50%);
  left: var(--tooltip-left, 50%);
  padding: 10px;
  border-radius: 10px;
  z-index: 102;
  pointer-events: all;
}
button.primary:not(.inline) {
  color: #2BD1D2;
  border: 1px solid #2BD1D2;
  border-radius: 10px;
  padding: 10px 14px;
  background-color: transparent;
}
button.primary:not(.inline) i {
  padding-right: 6px;
}
button.primary:not(.inline).solid {
  color: var(--brand-black-pearl);
  background-color: #2BD1D2;
}
button.primary:not(.inline)[disabled] {
  color: #7e8991;
  border-color: #7e8991;
  pointer-events: none;
  cursor: default;
}
.small-modal {
  min-width: 15vw;
  width: auto;
  border-radius: 10px;
}
.status {
  font-size: 0.8em;
  padding: 2px 8px;
  border: solid 1px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.7em;
  text-align: center;
}
.status.offline {
  color: #404f5a;
}
.status.excellent {
  color: #C1F320;
}
.status.good {
  color: #C1F320;
}
.status.fair {
  color: #ffbb33;
}
.status.poor {
  color: #FF8433;
}
breezer-page.br-update header,
breezer-page.br-edit header,
breezer-page.br-insert header,
breezer-page.br-display header {
  background-color: #1D2A35;
  align-items: center;
  padding: 5px 20px;
}
breezer-page.br-update header h1,
breezer-page.br-edit header h1,
breezer-page.br-insert header h1,
breezer-page.br-display header h1 {
  font-weight: 600;
}
breezer-page.br-update header button.secondary:hover,
breezer-page.br-edit header button.secondary:hover,
breezer-page.br-insert header button.secondary:hover,
breezer-page.br-display header button.secondary:hover {
  border-color: #2BD1D2;
  opacity: 0.8;
}
breezer-page.br-update content,
breezer-page.br-edit content,
breezer-page.br-insert content,
breezer-page.br-display content {
  background-color: #1D2A35;
}
breezer-page.br-update content input[type="text"],
breezer-page.br-edit content input[type="text"],
breezer-page.br-insert content input[type="text"],
breezer-page.br-display content input[type="text"] {
  min-width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
}
breezer-page.br-update content .field-group,
breezer-page.br-edit content .field-group,
breezer-page.br-insert content .field-group,
breezer-page.br-display content .field-group {
  display: flex;
  align-content: center;
  column-gap: 20px;
}
breezer-page.br-update content .field-group:not(.full-width) > *,
breezer-page.br-edit content .field-group:not(.full-width) > *,
breezer-page.br-insert content .field-group:not(.full-width) > *,
breezer-page.br-display content .field-group:not(.full-width) > * {
  width: 45%;
}
breezer-page.br-update content field-editor editor-for[display="checkbox"],
breezer-page.br-edit content field-editor editor-for[display="checkbox"],
breezer-page.br-insert content field-editor editor-for[display="checkbox"],
breezer-page.br-display content field-editor editor-for[display="checkbox"],
breezer-page.br-update content field-editor div.ql-toolbar,
breezer-page.br-edit content field-editor div.ql-toolbar,
breezer-page.br-insert content field-editor div.ql-toolbar,
breezer-page.br-display content field-editor div.ql-toolbar,
breezer-page.br-update content field-editor div.ql-container,
breezer-page.br-edit content field-editor div.ql-container,
breezer-page.br-insert content field-editor div.ql-container,
breezer-page.br-display content field-editor div.ql-container {
  background: var(--background-highlight-colour);
  border-color: var(--border-colour);
}
breezer-page.br-update content field-editor editor-for[display="checkbox"]:hover,
breezer-page.br-edit content field-editor editor-for[display="checkbox"]:hover,
breezer-page.br-insert content field-editor editor-for[display="checkbox"]:hover,
breezer-page.br-display content field-editor editor-for[display="checkbox"]:hover {
  border-color: #2BD1D2;
}
breezer-page.br-update content editor-for[breezer-editor-for-html-fragment]:hover div.ql-toolbar,
breezer-page.br-edit content editor-for[breezer-editor-for-html-fragment]:hover div.ql-toolbar,
breezer-page.br-insert content editor-for[breezer-editor-for-html-fragment]:hover div.ql-toolbar,
breezer-page.br-display content editor-for[breezer-editor-for-html-fragment]:hover div.ql-toolbar,
breezer-page.br-update content editor-for[breezer-editor-for-html-fragment]:hover div.ql-container,
breezer-page.br-edit content editor-for[breezer-editor-for-html-fragment]:hover div.ql-container,
breezer-page.br-insert content editor-for[breezer-editor-for-html-fragment]:hover div.ql-container,
breezer-page.br-display content editor-for[breezer-editor-for-html-fragment]:hover div.ql-container {
  border-color: #2BD1D2;
}
breezer-page.br-update content display-for .asset-category-summary,
breezer-page.br-edit content display-for .asset-category-summary,
breezer-page.br-insert content display-for .asset-category-summary,
breezer-page.br-display content display-for .asset-category-summary,
breezer-page.br-update content summary-for.asset-category-summary,
breezer-page.br-edit content summary-for.asset-category-summary,
breezer-page.br-insert content summary-for.asset-category-summary,
breezer-page.br-display content summary-for.asset-category-summary {
  display: flex;
  align-items: center;
  column-gap: 8px;
}