: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);
}
/*
    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;
}
h1 {
  font-size: larger;
}
.ml-tooltip-modal-container {
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
}
.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;
}