@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('fonts/material-symbols-outlined-v367.woff2') format('woff2');
}

.material-symbols-outlined {
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  /* Behave like the Font Awesome <i> tags these icons replaced: take the size
     of the surrounding text, so every template rule that sized the old icon
     through its parent keeps working. A fixed 24px here made every inline icon
     far bigger than the label next to it. */
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  letter-spacing: normal;
  line-height: 1;
  /* The glyph box sits 0.083em above the baseline and is 0.833em tall, so with
     plain baseline alignment it rides high above the text it labels. Nudging it
     down centres it optically on the text (Font Awesome glyphs sat lower). */
  vertical-align: -0.125em;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}