:root {
    --color-accent--: rgba(36, 181, 33, 1);
    --color-sidebar-bg--: rgba(246, 251, 247, 1);
    --color-hover--: rgba(225, 249, 228, 1);
    --color-soft--: rgba(225, 249, 228, 1);
    --color-button-hover--: rgb(47, 149, 45);
    --toggle-off--: rgba(202, 245, 203, 1);
    --filter-accent--: invert(49%) sepia(97%) saturate(468%) hue-rotate(71deg) brightness(92%) 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(42%) sepia(63%) saturate(536%) hue-rotate(70deg) brightness(97%) contrast(92%);
  }
  
  .iconcolor {
    filter: invert(49%) sepia(92%) saturate(839%) hue-rotate(77deg) brightness(93%) contrast(85%);
  }
  
  .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--);
  }
  .iconcolor-border-2 {
    filter: brightness(0) saturate(100%) invert(92%) sepia(9%) saturate(170%) hue-rotate(182deg) brightness(93%) contrast(84%);
  }
  
  /* 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--);
  }