.icon {
    border:none;
    background: transparent;
	background-size: cover;
	background-position: center;
}


/* https://www.sitepoint.com/community/t/rotate-background-image-constantly/251925/3 */
@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}	
}

.icon-id--match-state-running  {
	animation:spin 5s linear infinite;
}

.icon-id--tip-savestate-saving {
	animation:spin 1s linear infinite;
}


    .icon-size--small {
        width: 24px;
        height: 24px;
    }
    
    .icon-size--normal {
        width: 48px;
        height: 48px;
    }
    
    .icon-size--large {
        width: 96px;
        height: 96px;
    }
    /* === ANIMATED === */

/* --- match-state-started --- */
/* === STATIC === */

/* --- common --- */
.icon-size--small.icon-id--common-edit { background-image: url(../img/icons/common/icons8-edit-24.png);}
.icon-size--normal.icon-id--common-edit { background-image: url(../img/icons/common/icons8-edit-48.png);}
.icon-size--large.icon-id--common-edit { background-image: url(../img/icons/common/icons8-edit-96.png);}

.icon-size--small.icon-id--common-toggle-on { background-image: url(../img/icons/common/icons8-toggle-on-24.png);}
.icon-size--normal.icon-id--common-toggle-on { background-image: url(../img/icons/common/icons8-toggle-on-48.png);}
.icon-size--large.icon-id--common-toggle-on { background-image: url(../img/icons/common/icons8-toggle-on-96.png);}

.icon-size--small.icon-id--common-toggle-off { background-image: url(../img/icons/common/icons8-toggle-off-24.png);}
.icon-size--normal.icon-id--common-toggle-off { background-image: url(../img/icons/common/icons8-toggle-off-48.png);}
.icon-size--large.icon-id--common-toggle-off { background-image: url(../img/icons/common/icons8-toggle-off-96.png);}

.icon-size--small.icon-id--common-external-link { background-image: url(../img/icons/common/icons8-external-link-24.png);}
.icon-size--normal.icon-id--common-external-link { background-image: url(../img/icons/common/icons8-external-link-48.png);}
.icon-size--large.icon-id--common-external-link { background-image: url(../img/icons/common/icons8-external-link-96.png);}

/* --- image-edit --- */
.icon-size--small.icon-id--image-edit-rotate-left { background-image: url(../img/icons/image-edit/icons8-rotate-left-24.png);}
.icon-size--normal.icon-id--image-edit-rotate-left { background-image: url(../img/icons/image-edit/icons8-rotate-left-48.png);}
.icon-size--large.icon-id--image-edit-rotate-left { background-image: url(../img/icons/image-edit/icons8-rotate-left-96.png);}

.icon-size--small.icon-id--image-edit-rotate-right { background-image: url(../img/icons/image-edit/icons8-rotate-right-24.png);}
.icon-size--normal.icon-id--image-edit-rotate-right { background-image: url(../img/icons/image-edit/icons8-rotate-right-48.png);}
.icon-size--large.icon-id--image-edit-rotate-right { background-image: url(../img/icons/image-edit/icons8-rotate-right-96.png);}

.icon-size--small.icon-id--image-edit-flip-horizontal { background-image: url(../img/icons/image-edit/icons8-flip-horizontal-24.png);}
.icon-size--normal.icon-id--image-edit-flip-horizontal { background-image: url(../img/icons/image-edit/icons8-flip-horizontal-48.png);}
.icon-size--large.icon-id--image-edit-flip-horizontal { background-image: url(../img/icons/image-edit/icons8-flip-horizontal-96.png);}

.icon-size--small.icon-id--image-edit-flip-vertical { background-image: url(../img/icons/image-edit/icons8-flip-vertical-24.png);}
.icon-size--normal.icon-id--image-edit-flip-vertical { background-image: url(../img/icons/image-edit/icons8-flip-vertical-48.png);}
.icon-size--large.icon-id--image-edit-flip-vertical { background-image: url(../img/icons/image-edit/icons8-flip-vertical-96.png);}

.icon-size--small.icon-id--image-edit-remove-bg { background-image: url(../img/icons/image-edit/icons8-background-remover-24.png);}
.icon-size--normal.icon-id--image-edit-remove-bg { background-image: url(../img/icons/image-edit/icons8-background-remover-48.png);}
.icon-size--large.icon-id--image-edit-remove-bg { background-image: url(../img/icons/image-edit/icons8-background-remover-96.png);}

.icon-size--small.icon-id--image-edit-transparency { background-image: url(../img/icons/image-edit/icons8-transparency-24.png);}
.icon-size--normal.icon-id--image-edit-transparency { background-image: url(../img/icons/image-edit/icons8-transparency-48.png);}
.icon-size--large.icon-id--image-edit-transparency { background-image: url(../img/icons/image-edit/icons8-transparency-96.png);}

/* --- share --- */
.icon-size--small.icon-id--share-share { background-image: url(../img/icons/share/icons8-share-24.png);}
.icon-size--normal.icon-id--share-share { background-image: url(../img/icons/share/icons8-share-48.png);}
.icon-size--large.icon-id--share-share { background-image: url(../img/icons/share/icons8-share-96.png);}

/* --- player-fav --- */
.icon-size--small.icon-id--player-fav-set { background-image: url(../img/icons/player-fav/icons8-favorite-set-24.png);}
.icon-size--normal.icon-id--player-fav-set { background-image: url(../img/icons/player-fav/icons8-favorite-set-48.png);}
.icon-size--large.icon-id--player-fav-set { background-image: url(../img/icons/player-fav/icons8-favorite-set-96.png);}

.icon-size--small.icon-id--player-fav-unset { background-image: url(../img/icons/player-fav/icons8-favorite-unset-24.png);}
.icon-size--normal.icon-id--player-fav-unset { background-image: url(../img/icons/player-fav/icons8-favorite-unset-48.png);}
.icon-size--large.icon-id--player-fav-unset { background-image: url(../img/icons/player-fav/icons8-favorite-unset-96.png);}

.icon-size--small.icon-id--player-fav-all { background-image: url(../img/icons/player-fav/icons8-star-all-24.png);}
.icon-size--normal.icon-id--player-fav-all { background-image: url(../img/icons/player-fav/icons8-star-all-48.png);}
.icon-size--large.icon-id--player-fav-all { background-image: url(../img/icons/player-fav/icons8-star-all-96.png);}

/* --- map --- */
.icon-size--small.icon-id--map-world { background-image: url(../img/icons/map/icons8-world-24.png);}
.icon-size--normal.icon-id--map-world { background-image: url(../img/icons/map/icons8-world-48.png);}
.icon-size--large.icon-id--map-world { background-image: url(../img/icons/map/icons8-world-96.png);}

.icon-size--small.icon-id--map-europe { background-image: url(../img/icons/map/icons8-europe-24.png);}
.icon-size--normal.icon-id--map-europe { background-image: url(../img/icons/map/icons8-europe-48.png);}
.icon-size--large.icon-id--map-europe { background-image: url(../img/icons/map/icons8-europe-96.png);}

.icon-size--small.icon-id--map-germany { background-image: url(../img/icons/map/icons8-germany-24.png);}
.icon-size--normal.icon-id--map-germany { background-image: url(../img/icons/map/icons8-germany-48.png);}
.icon-size--large.icon-id--map-germany { background-image: url(../img/icons/map/icons8-germany-96.png);}

.icon-size--small.icon-id--map-marker { background-image: url(../img/icons/map/icons8-marker-24.png);}
.icon-size--normal.icon-id--map-marker { background-image: url(../img/icons/map/icons8-marker-48.png);}
.icon-size--large.icon-id--map-marker { background-image: url(../img/icons/map/icons8-marker-96.png);}

.icon-size--small.icon-id--map-locate { background-image: url(../img/icons/map/icons8-my-location-24.png);}
.icon-size--normal.icon-id--map-locate { background-image: url(../img/icons/map/icons8-my-location-48.png);}
.icon-size--large.icon-id--map-locate { background-image: url(../img/icons/map/icons8-my-location-96.png);}

/* --- payment --- */
.icon-size--small.icon-id--payment-paypal { background-image: url(../img/icons/payment/icons8-paypal-24.png);}
.icon-size--normal.icon-id--payment-paypal { background-image: url(../img/icons/payment/icons8-paypal-48.png);}
.icon-size--large.icon-id--payment-paypal { background-image: url(../img/icons/payment/icons8-paypal-96.png);}

.icon-size--small.icon-id--payment-cash { background-image: url(../img/icons/payment/icons8-cash-24.png);}
.icon-size--normal.icon-id--payment-cash { background-image: url(../img/icons/payment/icons8-cash-48.png);}
.icon-size--large.icon-id--payment-cash { background-image: url(../img/icons/payment/icons8-cash-96.png);}

.icon-size--small.icon-id--payment-bank { background-image: url(../img/icons/payment/icons8-bank-24.png);}
.icon-size--normal.icon-id--payment-bank { background-image: url(../img/icons/payment/icons8-bank-48.png);}
.icon-size--large.icon-id--payment-bank { background-image: url(../img/icons/payment/icons8-bank-96.png);}

/* --- tip-action --- */
.icon-size--small.icon-id--tip-action-randomize { background-image: url(../img/icons/tip-action/icons8-dice-24.png);}
.icon-size--normal.icon-id--tip-action-randomize { background-image: url(../img/icons/tip-action/icons8-dice-48.png);}
.icon-size--large.icon-id--tip-action-randomize { background-image: url(../img/icons/tip-action/icons8-dice-96.png);}

/* --- match-state --- */
.icon-size--small.icon-id--match-state-scheduled { background-image: url(../img/icons/match-state/icons8-schedule-24.png);}
.icon-size--normal.icon-id--match-state-scheduled { background-image: url(../img/icons/match-state/icons8-schedule-48.png);}
.icon-size--large.icon-id--match-state-scheduled { background-image: url(../img/icons/match-state/icons8-schedule-96.png);}

.icon-size--small.icon-id--match-state-finished { background-image: url(../img/icons/match-state/icons8-checkmark-24.png);}
.icon-size--normal.icon-id--match-state-finished { background-image: url(../img/icons/match-state/icons8-checkmark-48.png);}
.icon-size--large.icon-id--match-state-finished { background-image: url(../img/icons/match-state/icons8-checkmark-96.png);}

.icon-size--small.icon-id--match-state-closed { background-image: url(../img/icons/match-state/icons8-coming-soon-24.png);}
.icon-size--normal.icon-id--match-state-closed { background-image: url(../img/icons/match-state/icons8-coming-soon-48.png);}
.icon-size--large.icon-id--match-state-closed { background-image: url(../img/icons/match-state/icons8-coming-soon-96.png);}

.icon-size--small.icon-id--match-state-running { background-image: url(../img/icons/match-state/icons8-soccer-ball-24.png);}
.icon-size--normal.icon-id--match-state-running { background-image: url(../img/icons/match-state/icons8-soccer-ball-48.png);}
.icon-size--large.icon-id--match-state-running { background-image: url(../img/icons/match-state/icons8-soccer-ball-96.png);}

/* --- extra-state --- */
.icon-size--small.icon-id--extra-state-finished { background-image: url(../img/icons/extra-state/icons8-checkmark-24.png);}
.icon-size--normal.icon-id--extra-state-finished { background-image: url(../img/icons/extra-state/icons8-checkmark-48.png);}
.icon-size--large.icon-id--extra-state-finished { background-image: url(../img/icons/extra-state/icons8-checkmark-96.png);}

.icon-size--small.icon-id--extra-state-open { background-image: url(../img/icons/extra-state/icons8-in-doubt-24.png);}
.icon-size--normal.icon-id--extra-state-open { background-image: url(../img/icons/extra-state/icons8-in-doubt-48.png);}
.icon-size--large.icon-id--extra-state-open { background-image: url(../img/icons/extra-state/icons8-in-doubt-96.png);}

/* --- tip-savestate --- */
.icon-size--small.icon-id--tip-savestate-saving { background-image: url(../img/icons/tip-savestate/icons8-sync-24.png);}
.icon-size--normal.icon-id--tip-savestate-saving { background-image: url(../img/icons/tip-savestate/icons8-sync-48.png);}
.icon-size--large.icon-id--tip-savestate-saving { background-image: url(../img/icons/tip-savestate/icons8-sync-96.png);}

.icon-size--small.icon-id--tip-savestate-error { background-image: url(../img/icons/tip-savestate/icons8-alert-24.png);}
.icon-size--normal.icon-id--tip-savestate-error { background-image: url(../img/icons/tip-savestate/icons8-alert-48.png);}
.icon-size--large.icon-id--tip-savestate-error { background-image: url(../img/icons/tip-savestate/icons8-alert-96.png);}

.icon-size--small.icon-id--tip-savestate-saved { background-image: url(../img/icons/tip-savestate/icons8-saved-24.png);}
.icon-size--normal.icon-id--tip-savestate-saved { background-image: url(../img/icons/tip-savestate/icons8-saved-48.png);}
.icon-size--large.icon-id--tip-savestate-saved { background-image: url(../img/icons/tip-savestate/icons8-saved-96.png);}

.icon-size--small.icon-id--tip-savestate-unsaved { background-image: url(../img/icons/tip-savestate/icons8-modify-24.png);}
.icon-size--normal.icon-id--tip-savestate-unsaved { background-image: url(../img/icons/tip-savestate/icons8-modify-48.png);}
.icon-size--large.icon-id--tip-savestate-unsaved { background-image: url(../img/icons/tip-savestate/icons8-modify-96.png);}

/* --- player-position --- */
.icon-size--small.icon-id--player-position-first { background-image: url(../img/icons/player-position/icons8-first-place-ribbon-24.png);}
.icon-size--normal.icon-id--player-position-first { background-image: url(../img/icons/player-position/icons8-first-place-ribbon-48.png);}
.icon-size--large.icon-id--player-position-first { background-image: url(../img/icons/player-position/icons8-first-place-ribbon-96.png);}

.icon-size--small.icon-id--player-position-second { background-image: url(../img/icons/player-position/icons8-second-place-ribbon-24.png);}
.icon-size--normal.icon-id--player-position-second { background-image: url(../img/icons/player-position/icons8-second-place-ribbon-48.png);}
.icon-size--large.icon-id--player-position-second { background-image: url(../img/icons/player-position/icons8-second-place-ribbon-96.png);}

.icon-size--small.icon-id--player-position-third { background-image: url(../img/icons/player-position/icons8-third-place-ribbon-24.png);}
.icon-size--normal.icon-id--player-position-third { background-image: url(../img/icons/player-position/icons8-third-place-ribbon-48.png);}
.icon-size--large.icon-id--player-position-third { background-image: url(../img/icons/player-position/icons8-third-place-ribbon-96.png);}

.icon-size--small.icon-id--player-position-nth { background-image: url(../img/icons/player-position/icons8-nth-place-ribbon-24.png);}
.icon-size--normal.icon-id--player-position-nth { background-image: url(../img/icons/player-position/icons8-nth-place-ribbon-48.png);}
.icon-size--large.icon-id--player-position-nth { background-image: url(../img/icons/player-position/icons8-nth-place-ribbon-96.png);}