/* saas-styles.css 

These are styles that are ONLY required for the SaaS being build. It keeps the "main-styles.css" clean so it can be used across multiple installs

*/


/* ICONS */
/* Because Icons are recoloured using Filters, we have to do them unique to each website */
/* SEE: https://codepen.io/sosuke/pen/Pjoqqp for the formula as to how to create the filter values */
/* works with HTML structured: <span class="icon iconsmall iconGrey"><img src="images/icons/fa/solid/question-circle.svg"></span> */
.svgicon img { width: var(--spacing-large); filter: invert(9%) sepia(96%) saturate(6425%) hue-rotate(6deg) brightness(98%) contrast(114%); }

.iconLargest img { width: var(--spacing-largest); }
.iconlarger img { width: var(--spacing-larger); }
.iconlarge img { width: var(--spacing-large); }
.iconmedium img { width: var(--spacing-medium); }
.iconsmall img { width: var(--spacing-small); }
.iconsmaller img { width: var(--spacing-smaller); }
.iconsmallest img { width: var(--spacing-smallest); }




.iconWhite img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(102%); }
.iconGrey img{ filter: invert(49%) sepia(5%) saturate(763%) hue-rotate(167deg) brightness(89%) contrast(88%); }
.iconLightGrey img { filter: invert(88%) sepia(5%) saturate(619%) hue-rotate(192deg) brightness(111%) contrast(80%); }

/* Navigation Icons using: https://toolinone.com/css-filter-color/  */
#appNavigation ul li.active a span.menuItemIcon img { filter: invert(9%) sepia(96%) saturate(6425%) hue-rotate(6deg) brightness(98%) contrast(114%);  }