:root {
    --System_01: url('/fynzee/shared/assets/sprite_sheets/System_01.png');
    --Category_01: url('/fynzee/shared/assets/sprite_sheets/Category_01.png');
     --Category_02: url('/fynzee/shared/assets/sprite_sheets/Category_02.png');
}


.img_set{
	width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 1087%;
}
.invert-color {
    filter: invert(100%);
}
.set_img_white{
	filter: grayscale(100%) brightness(0) invert(1);
}













/* --------------------------------------------------- */
/* ----------------- System_01.png ------------------- */
/* --------------------------------------------------- */

	/* -------- ROW 1 ---------- */

	.img_transfer {
	    background-position: 0% 0%;
	    background-image:  var(--System_01);
	}
	.img_income {
	    background-position: 10% 0%;
	    background-image: var(--System_01);
	}
	.img_savingin {
	    background-position: 20% 0%;
	    background-image: var(--System_01);
	}
	.img_savingsout {
	    background-position: 30% 0%;
	    background-image: var(--System_01);
	}
	.img_purchase {
	    background-position: 40% 0%;
	    background-image: var(--System_01);
	}
	.img_navigation {
	    background-position: 50% 0%;
	    background-image: var(--System_01);
	}
	.img_settings {
	    background-position: 60% 0%;
	    background-image: var(--System_01);
	}
	.img_other {
	    background-position: 70% 0%;
	    background-image: var(--System_01);
	}
	.img_recurring {
	    background-position: 80% 0%;
	    background-image: var(--System_01);
	}
	.img_usericon {
	    background-position: 90% 0%;
	    background-image: var(--System_01);
	}
	.img_drag {
	    background-position: 100% 0%;
	    background-image: var(--System_01);
	}

	/* -------- ROW 2 ---------- */

	.img_save {
	    background-position: 0% 10%;
	    background-image: var(--System_01);
	}
	.img_up {
	    background-position: 10% 10%;
	    background-image: var(--System_01);
	}
	.img_down {
	    background-position: 20% 10%;
	    background-image: var(--System_01);
	}
	.img_search {
	    background-position: 30% 10%;
	    background-image: var(--System_01);
	}
	.img_filter {
	    background-position: 40% 10%;
	    background-image: var(--System_01);
	}
	.img_target {
	    background-position: 50% 10%;
	    background-image: var(--System_01);
	}
	.img_calander {
	    background-position: 60% 10%;
	    background-image: var(--System_01);
	}
	.img_flag {
	    background-position: 70% 10%;
	    background-image: var(--System_01);
	}
	.img_livedata {
	    background-position: 80% 10%;
	    background-image: var(--System_01);
	}
	.img_expand {
	    background-position: 90% 10%;
	    background-image: var(--System_01);
	}
	.img_add {
	    background-position: 100% 10%;
	    background-image: var(--System_01);
	}

	/* -------- ROW 3 ---------- */

	.img_exit {
	    background-position: 0% 20%;
	    background-image: var(--System_01);
	}
	.img_close {
	    background-position: 10% 20%;
	    background-image: var(--System_01);
	}
	.img_edit {
	    background-position: 20% 20%;
	    background-image: var(--System_01);
	}
	.img_card {
	    background-position: 30% 20%;
	    background-image: var(--System_01);
	}
	.img_delete {
	    background-position: 40% 20%;
	    background-image: var(--System_01);
	}
	.img_calculator {
	    background-position: 50% 20%;
	    background-image: var(--System_01);
	}
	.img_warning {
	    background-position: 60% 20%;
	    background-image: var(--System_01);
	}
	.img_collection {
	    background-position: 70% 20%;
	    background-image: var(--System_01);
	}
	.img_color {
	    background-position: 80% 20%;
	    background-image: var(--System_01);
	}
	.img_return {
	    background-position: 90% 20%;
	    background-image: var(--System_01);
	}
	
	.img_locked {
	    background-position: 100% 20%;
	    background-image: var(--System_01);
	}
	.img_email {
	    background-position: 0% 30%;
	    background-image: var(--System_01);
	}


	




























/* --------------------------------------------------- */
/* ----------------- Category_01.png ------------------- */
/* --------------------------------------------------- */

	/* -------- ROW 1 ---------- */

	.img_grocery {
	    background-position: 0% 0%;
	    background-image:  var(--Category_01);
	}
	.img_snacks {
	    background-position: 10% 0%;
	    background-image: var(--Category_01);
	}
	.img_fastfood {
	    background-position: 20% 0%;
	    background-image: var(--Category_01);
	}
	.img_preparedmeals {
	    background-position: 30% 0%;
	    background-image: var(--Category_01);
	}
	.img_restaurants {
	    background-position: 40% 0%;
	    background-image: var(--Category_01);
	}
	.img_alcohol {
	    background-position: 50% 0%;
	    background-image: var(--Category_01);
	}
	.img_energydrinks {
	    background-position: 60% 0%;
	    background-image: var(--Category_01);
	}
	.img_streetfood {
	    background-position: 70% 0%;
	    background-image: var(--Category_01);
	}
	.img_beverages {
	    background-position: 80% 0%;
	    background-image: var(--Category_01);
	}
	.img_mealdeal {
	    background-position: 90% 0%;
	    background-image: var(--Category_01);
	}
	
	/* -------- ROW 3 ---------- */

	.img_vehicleinsurance {
	    background-position: 0% 20%;
	    background-image: var(--Category_01);
	}
	.img_fuel {
	    background-position: 10% 20%;
	    background-image: var(--Category_01);
	}
	.img_repairs {
	    background-position: 20% 20%;
	    background-image: var(--Category_01);
	}
	.img_vehiclewash {
	    background-position: 30% 20%;
	    background-image: var(--Category_01);
	}
	.img_parking {
	    background-position: 40% 20%;
	    background-image: var(--Category_01);
	}
	.img_taxi {
	    background-position: 50% 20%;
	    background-image: var(--Category_01);
	}
	.img_train {
	    background-position: 60% 20%;
	    background-image: var(--Category_01);
	}
	.img_flight {
	    background-position: 70% 20%;
	    background-image: var(--Category_01);
	}
	.img_tolls {
	    background-position: 80% 20%;
	    background-image: var(--Category_01);
	}
	.img_mot {
	    background-position: 90% 20%;
	    background-image: var(--Category_01);
	}
	
	.img_transport {
	    background-position: 100% 20%;
	    background-image: var(--Category_01);
	}

	/* -------- ROW 4 ---------- */

	.img_boat {
	    background-position: 0% 30%;
	    background-image: var(--Category_01);
	}
	

	/* -------- ROW 6 ---------- */

	.img_entertainment {
	    background-position: 0% 50%;
	    background-image: var(--Category_01);
	}
	.img_games { 
	    background-position: 10% 50%;
	    background-image: var(--Category_01);
	}

	

	.img_movies {
	    background-position: 20% 50%;
	    background-image: var(--Category_01);
	}
	.img_sports {
	    background-position: 30% 50%;
	    background-image: var(--Category_01);
	}
	.img_tours {
	    background-position: 40% 50%;
	    background-image: var(--Category_01);
	}
	.img_watersports {
	    background-position: 50% 50%;
	    background-image: var(--Category_01);
	}
	

	/* -------- ROW 10 ---------- */

	.img_selfcare {
	    background-position: 0% 90%;
	    background-image: var(--Category_01);
	}
	.img_hairstyling {
	    background-position: 10% 90%;
	    background-image: var(--Category_01);
	}
	.img_medications {
	    background-position: 20% 90%;
	    background-image: var(--Category_01);
	}
	.img_laundry {
	    background-position: 30% 90%;
	    background-image: var(--Category_01);
	}
	.img_gym {
	    background-position: 40% 90%;
	    background-image: var(--Category_01);
	}
	.img_spatreatments {
	    background-position: 50% 90%;
	    background-image: var(--Category_01);
	}
	.img_dental {
	    background-position: 60% 90%;
	    background-image: var(--Category_01);
	}
	.img_skincare {
	    background-position: 70% 90%;
	    background-image: var(--Category_01);
	}
	












/* --------------------------------------------------- */
/* ----------------- Category_02.png ------------------- */
/* --------------------------------------------------- */

	/* -------- ROW 1 ---------- */

	.img_housing {
	    background-position: 0% 0%;
	    background-image:  var(--Category_02);
	}
	.img_rent {
	    background-position: 10% 0%;
	    background-image: var(--Category_02);
	}
	.img_gas {
	    background-position: 20% 0%;
	    background-image: var(--Category_02);
	}
	.img_water {
	    background-position: 30% 0%;
	    background-image: var(--Category_02);
	}
	.img_electricity {
	    background-position: 40% 0%;
	    background-image: var(--Category_02);
	}
	.img_movingvan {
	    background-position: 50% 0%;
	    background-image: var(--Category_02);
	}
	.img_homeinsurance {
	    background-position: 60% 0%;
	    background-image: var(--Category_02);
	}
	.img_homemaintenance {
	    background-position: 70% 0%;
	    background-image: var(--Category_02);
	}
	.img_cleaningsupplies {
	    background-position: 80% 0%;
	    background-image: var(--Category_02);
	}
	.img_internet {
	    background-position: 90% 0%;
	    background-image: var(--Category_02);
	}
	

	/* -------- ROW 2 ---------- */

	
	/* -------- ROW 3 ---------- */

	.img_purchase {
	    background-position: 0% 30%;
	    background-image: var(--Category_02);
	}
	.img_digitalassets {
	    background-position: 10% 30%;
	    background-image: var(--Category_02);
	}
	.img_software {
	    background-position: 20% 30%;
	    background-image: var(--Category_02);
	}
	.img_pcstuff {
	    background-position: 30% 30%;
	    background-image: var(--Category_02);
	}
	.img_cameragear {
	    background-position: 40% 30%;
	    background-image: var(--Category_02);
	}
	.img_clothing {
	    background-position: 50% 30%;
	    background-image: var(--Category_02);
	}
	.img_electronics {
	    background-position: 60% 30%;
	    background-image: var(--Category_02);
	}
	.img_furniture {
	    background-position: 70% 30%;
	    background-image: var(--Category_02);
	}
	.img_books {
	    background-position: 80% 30%;
	    background-image: var(--Category_02);
	}
	.img_officesupplies {
	    background-position: 90% 30%;
	    background-image: var(--Category_02);
	}
	
	.img_gift {
	    background-position: 100% 30%;
	    background-image: var(--Category_02);
	}

	/* -------- ROW 4 ---------- */