/*
    https://codepen.io/sosuke/pen/Pjoqqp
    https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element

*/


  /*  CINZA CLARO - #  */
  .filter-cinzaclaro{
      filter: invert(91%) sepia(15%) saturate(0%) hue-rotate(302deg) brightness(89%) contrast(90%);
  }

  /*  CINZA - #666  */
  .filter-cinza{ 
      filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(221deg) brightness(96%) contrast(85%);
  }

  /*  CINZA MÉDIO- #9a9ea3  */
  .filter-cinzamedio{ 
      filter: invert(67%) sepia(13%) saturate(118%) hue-rotate(173deg) brightness(92%) contrast(88%);
  }

  /*  CINZA ESCURO - #555  */
  .filter-cinzaescuro{ 
      filter: invert(31%) sepia(28%) saturate(28%) hue-rotate(83deg) brightness(97%) contrast(90%);
  }

  /*  CINZA SEMPRE ESCURO - #555  O */
  .filter-cinzasempreescuro{ 
      filter: invert(31%) sepia(28%) saturate(28%) hue-rotate(83deg) brightness(97%) contrast(90%);
  }

  /*  LARANJA - #f16436  */
  .filter-laranja{ 
      filter: invert(49%) sepia(89%) saturate(2393%) hue-rotate(340deg) brightness(98%) contrast(93%);
  }

  /*  LARANJA CLARO - #F99777 (--cor_font3)  */
  .filter-laranjaclaro{ 
    filter: invert(73%) sepia(42%) saturate(1819%) hue-rotate(313deg) brightness(109%) contrast(95%);
  }

  /*  BRANCO - #FFF  */
  .filter-white{ 
      filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(5deg) brightness(108%) contrast(101%);
  }

  /*  VERDE - #28a745  */
  .filter-green{ 
      filter: invert(47%) sepia(56%) saturate(621%) hue-rotate(81deg) brightness(99%) contrast(88%);
  }

  /*  VERDE CLARO (não usado ainda) - #92f08d  */
  .filter-greenclaro{ 
      filter: invert(82%) sepia(44%) saturate(412%) hue-rotate(60deg) brightness(96%) contrast(98%);
  }

  /*  VERMELHO - #dc3545  */
  .filter-red{ 
      filter: invert(35%) sepia(53%) saturate(5443%) hue-rotate(336deg) brightness(89%) contrast(92%);
  }

  /*  VERMELHO ESCURO - #c8303f  */
  .filter-redescuro{ 
      filter: invert(20%) sepia(69%) saturate(3731%) hue-rotate(341deg) brightness(88%) contrast(80%);
  }

  /*  VERMELHO CLARO- #ffabb3  */
  .filter-redclaro{ 
      filter: invert(89%) sepia(72%) saturate(7232%) hue-rotate(287deg) brightness(100%) contrast(101%);
  }

  /*  AMARELO - #e6b800  */
  .filter-yellow{ 
      filter: invert(66%) sepia(78%) saturate(549%) hue-rotate(5deg) brightness(96%) contrast(101%);
  }

  /*  MARROM - #cd9a04  */
  .filter-marrom{ 
      filter: invert(60%) sepia(63%) saturate(2160%) hue-rotate(13deg) brightness(96%) contrast(97%);
  }

  /*  VINHO - #990033  */
  .filter-wine{ 
      filter: invert(9%) sepia(97%) saturate(4697%) hue-rotate(330deg) brightness(90%) contrast(109%);
  }

  /*  AZUL "info" - #0588BC  */
  .filter-bluelink{ 
      filter: invert(36%) sepia(86%) saturate(2920%) hue-rotate(174deg) brightness(92%) contrast(96%);
  }

  /*  AZUL ESCURO - #0c5460  */
  .filter-blue{ 
      filter: invert(23%) sepia(58%) saturate(647%) hue-rotate(141deg) brightness(100%) contrast(94%);
  }

  /*  AZUL "primary" ()- #007bff  */
  .filter-primary{ 
      filter: invert(52%) sepia(75%) saturate(7435%) hue-rotate(201deg) brightness(106%) contrast(103%);
  }

  /*  AZUL CLARO ()- #a8b1ff  */
  .filter-blueclaro{ 
      filter: invert(73%) sepia(43%) saturate(1288%) hue-rotate(192deg) brightness(99%) contrast(104%);
  }

  

  .svg-shadow-laranja {
      filter: invert(49%) sepia(89%) saturate(2393%) hue-rotate(340deg) brightness(98%) contrast(93%) drop-shadow(2px 2px 4px #000000);
  }