.material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #9e9e9e;
}

:host {
  --icon-size:24;
  display: inline-block;
  cursor: default;
  user-select: none;
}

.material-symbols-rounded {
  font-size: var(--icon-size);
}

.icon-size {
  width: var(--icon-size);
  height: var(--icon-size);
}

.tooltip {
  background: #ffffff;
  color: #343434;
  font-weight: bold;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 4px;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
  display: none;
}

.tooltip[data-show] {
  display: block;
}

.arrow,
.arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

.tooltip[data-popper-placement^=top] > .arrow {
  bottom: -4px;
}

.tooltip[data-popper-placement^=bottom] > .arrow {
  top: -4px;
}

.tooltip[data-popper-placement^=left] > .arrow {
  right: -4px;
}

.tooltip[data-popper-placement^=right] > .arrow {
  left: -4px;
}

.red {
  color: #dc0000;
}

.darkred {
  color: #A20000;
}

.orange {
  color: #f59500;
}

.blue {
  color: #1479c6;
}

.green {
  color: #a2bb31;
}

.gray {
  color: #757575;
}

.black {
  color: #212121;
}

.white {
  color: white;
}