:root {
  --color-accent--: rgba(84, 166, 201, 1);
  --color-sidebar-bg--: rgb(246, 250, 251);
  --color-hover--: rgba(227, 242, 248, 1);
  --color-soft--: rgba(225, 242, 249, 1);
  --color-button-hover--: rgba(77, 158, 192, 1);
  --toggle-off--: rgba(198, 225, 237, 1);
  --filter-accent--: invert(64%) sepia(72%) saturate(316%) hue-rotate(156deg) brightness(81%) contrast(94%);
  --filter-subtitle--: invert(88%) sepia(13%) saturate(160%) hue-rotate(183deg) brightness(84%) contrast(84%);
  --filter-white--: invert(100%) sepia(0%) saturate(7476%) hue-rotate(110deg) brightness(98%) contrast(108%);
  --filter-accent-hover--: invert(59%) sepia(23%) saturate(876%) hue-rotate(152deg) brightness(91%) contrast(94%);
  --filter-badge--: invert(79%) sepia(53%) saturate(91%) hue-rotate(153deg) brightness(100%) contrast(94%);
}

.iconcolor {
  filter: invert(77%) sepia(16%) saturate(4063%) hue-rotate(167deg) brightness(87%) contrast(77%);
}

.iconcolor-white {
  filter: invert(100%) sepia(0%) saturate(18%) hue-rotate(16deg) brightness(106%) contrast(106%);
}

.iconcolor-green {
  filter: invert(52%) sepia(30%) saturate(3993%) hue-rotate(119deg) brightness(93%) contrast(99%);
}

.iconcolor-grey {
  filter: invert(46%) sepia(10%) saturate(613%) hue-rotate(175deg) brightness(94%) contrast(87%);
}

.iconcolor-red {
  filter: invert(25%) sepia(59%) saturate(4470%) hue-rotate(343deg) brightness(113%) contrast(103%);
}

.iconcolor-badge {
  filter: invert(79%) sepia(53%) saturate(91%) hue-rotate(153deg) brightness(100%) contrast(94%);
}

.iconcolor-subtitle {
  filter: var(--filter-subtitle--);
}

/* Icon color hover */

.iconcolor-hover-accent:hover {
  filter: var(--filter-accent--);
}

.iconcolor-with-hover {
  filter: var(--filter-accent--);
}

.iconcolor-with-hover:hover {
  filter: var(--filter-accent-hover--);
}