: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--);
  }