.dark-bg { background-color: #242C3F; }

/* Main image backgrounds */
.bg-img {
    background-repeat: no-repeat; background-size: cover; background-position: center; object-fit: cover;
}

/* Icon backgrounds */
.icon {
    background-image: url(../../images/icons/xp/XP-Icon-transparent.png);
    background-repeat: no-repeat; background-size: 100%; background-position: center;
    height: 30px; margin: 5px; width: 30px;
}
.icon.small { height: 14px; margin: 0; width: 14px; }
.icon > .icon-circle { /* Icons built with CSS elements */
    border: 2px solid #FFFFFF; border-radius: 20px; display: block; font-size: 18px; font-weight: 800;
    height: calc(100% - 8px); line-height: 1.7; margin: 4px; text-align: center; width: calc(100% - 8px);
}

/* Generic */
.icon.none { background-image: none; }
.icon.list { background-image: url(../../images/icons/bar-chart-white.svg); }
.icon.group { background-image: url(../../images/icons/conference-white.png); }
.icon.setting { background-image: url(../../images/icons/settings-white.png); }
.icon.action { background-image: url(../../images/icons/svg/support.svg); }
.icon.action.grey { filter: grayscale(1); }
.icon.write { background-image: url(../../images/icons/svg/writing.svg); background-size: 85% !important; }
.icon.settings { background-image: url(../../images/icons/settings-white.png); }

/* Source */
.icon.steam { background-image: url(../../images/icons/sources/steam.svg); }
.icon.steamdiscuss { background-image: url(../../images/icons/sources/steam.svg); }
.icon.reddit { background-image: url(../../images/icons/sources/reddit-white.png); }
.icon.reddit-alt { background-image: url(../../images/icons/sources/reddit.svg); }
.icon.amazon { background-image: url(../../images/icons/sources/amazon-white.png); }
.icon.amazon-alt { background-image: url(../../images/icons/sources/amazon.svg); }
.icon.gplay { background-image: url(../../images/icons/sources/google_play.svg); }
.icon.itunes { background-image: url(../../images/icons/sources/itunes.svg); }
.icon.microsoft { background-image: url(../../images/icons/sources/microsoft_store.svg); }
.icon.metacritic { background-image: url(../../images/icons/sources/metacritic.svg); }
.icon.twitter { background-image: url(../../images/icons/sources/twitter.svg); }
.icon.youtube, .icon.youtube-official { background-image: url(../../images/icons/sources/youtube.svg); }
.icon.facebookv2, .icon.facebook-pages, .icon.facebook-groups, .icon.facebook { background-image: url(../../images/icons/sources/facebook.svg); }
.icon.instagram { background-image: url(../../images/icons/sources/instagram.svg); }
.icon.discord { background-image: url(../../images/icons/sources/discord.svg); }
.icon.zendesk { background-image: url(../../images/icons/sources/zendesk.svg); }
.icon.twitchVOD { background-image:url(../../images/icons/sources/twitch.svg); }
.icon.tiktok { background-image: url(../../images/icons/sources/tiktok.svg); }
.icon.meta { background-image: url(../../images/icons/sources/meta.svg); }
.icon.tumblr { background-image: url(../../images/icons/sources/tumblr.svg); }
.icon.bilibili { background-image: url(../../images/icons/sources/bilibili.svg); }
.icon.baiduTieba { background-image: url(../../images/icons/sources/baidu_tieba.svg); }
.icon.zhihu { background-image: url(../../images/icons/sources/zhihu.svg); }
.icon.weibo { background-image: url(../../images/icons/sources/weibo.svg); }

/* Category */
/* white */
.category-icon.atmosphere.white::before { background-image: url(../../images/icons/svg/categories/atmosphere-white.svg); }
.category-icon.audio.white::before { background-image: url(../../images/icons/svg/categories/audio-white.svg); }
.category-icon.campaign.white::before { background-image: url(../../images/icons/svg/categories/campaign-white.svg); }
.category-icon.characters.white::before { background-image: url(../../images/icons/svg/categories/characters-white.svg); }
.category-icon.community.white::before { background-image: url(../../images/icons/svg/categories/community-white.svg); }
.category-icon.comparison.white::before { background-image: url(../../images/icons/svg/categories/comparison-white.svg); }
.category-icon.controls.white::before { background-image: url(../../images/icons/svg/categories/controls-white.svg); }
.category-icon.developer.white::before { background-image: url(../../images/icons/svg/categories/developer-white.svg); }
.category-icon.gameplay-design.white::before { background-image: url(../../images/icons/svg/categories/gameplaydesign-white.svg); }
.category-icon.bugs--issues.white::before { background-image: url(../../images/icons/svg/categories/issues-white.svg); }
.category-icon.marketing.white::before { background-image: url(../../images/icons/svg/categories/marketing-white.svg); }
.category-icon.mechanics.white::before { background-image: url(../../images/icons/svg/categories/mechanics-white.svg); }
.category-icon.monetisation.white::before { background-image: url(../../images/icons/svg/categories/monetisation-white.svg); }
.category-icon.narrative.white::before { background-image: url(../../images/icons/svg/categories/narrative-white.svg); }
.category-icon.online.white::before { background-image: url(../../images/icons/svg/categories/online-white.svg); }
.category-icon.player-suggestions.white::before { background-image: url(../../images/icons/svg/categories/playersuggestions-white.svg); }
.category-icon.playtime.white::before { background-image: url(../../images/icons/svg/categories/playtime-white.svg); }
.category-icon.pre-post-release.white::before { background-image: url(../../images/icons/svg/categories/prepostrelease-white.svg); }
.category-icon.unique-game-content.white::before { background-image: url(../../images/icons/svg/categories/uniquegamecontent-white.svg); }
.category-icon.user-interface.white::before { background-image: url(../../images/icons/svg/categories/userinterface-white.svg); }
.category-icon.visuals.white::before { background-image: url(../../images/icons/svg/categories/visuals-white.svg); }
/* png ver */
.category-icon.atmosphere.white.png::before { background-image: url(../../images/icons/png/categories/atmosphere-white.png) !important; }
.category-icon.audio.white.png::before { background-image: url(../../images/icons/png/categories/audio-white.png) !important; }
.category-icon.campaign.white.png::before { background-image: url(../../images/icons/png/categories/campaign-white.png) !important; }
.category-icon.characters.white.png::before { background-image: url(../../images/icons/png/categories/characters-white.png) !important; }
.category-icon.community.white.png::before { background-image: url(../../images/icons/png/categories/community-white.png) !important; }
.category-icon.comparison.white.png::before { background-image: url(../../images/icons/png/categories/comparison-white.png) !important; }
.category-icon.controls.white.png::before { background-image: url(../../images/icons/png/categories/controls-white.png) !important; }
.category-icon.developer.white.png::before { background-image: url(../../images/icons/png/categories/developer-white.png) !important; }
.category-icon.gameplay-design.white.png::before { background-image: url(../../images/icons/png/categories/gameplaydesign-white.png) !important; }
.category-icon.bugs--issues.white.png::before { background-image: url(../../images/icons/png/categories/issues-white.png) !important; }
.category-icon.marketing.white.png::before { background-image: url(../../images/icons/png/categories/marketing-white.png) !important; }
.category-icon.mechanics.white.png::before { background-image: url(../../images/icons/png/categories/mechanics-white.png) !important; }
.category-icon.monetisation.white.png::before { background-image: url(../../images/icons/png/categories/monetisation-white.png) !important; }
.category-icon.narrative.white.png::before { background-image: url(../../images/icons/png/categories/narrative-white.png) !important; }
.category-icon.online.white.png::before { background-image: url(../../images/icons/png/categories/online-white.png) !important; }
.category-icon.player-suggestions.white.png::before { background-image: url(../../images/icons/png/categories/playersuggestions-white.png) !important; }
.category-icon.playtime.white.png::before { background-image: url(../../images/icons/png/categories/playtime-white.png) !important; }
.category-icon.pre-post-release.white.png::before { background-image: url(../../images/icons/png/categories/prepostrelease-white.png) !important; }
.category-icon.unique-game-content.white.png::before { background-image: url(../../images/icons/png/categories/uniquegamecontent-white.png) !important; }
.category-icon.user-interface.white.png::before { background-image: url(../../images/icons/png/categories/userinterface-white.png) !important; }
.category-icon.visuals.white.png::before { background-image: url(../../images/icons/png/categories/visuals-white.png) !important; }
/* coloured */
.category-icon.atmosphere::before { background-image: url(../../images/icons/svg/categories/atmosphere-orange.svg); }
.category-icon.audio::before { background-image: url(../../images/icons/svg/categories/audio-orange.svg); }
.category-icon.bugs--issues::before { background-image: url(../../images/icons/svg/categories/issues-orange.svg); }
.category-icon.campaign::before { background-image: url(../../images/icons/svg/categories/campaign-orange.svg); }
.category-icon.characters::before { background-image: url(../../images/icons/svg/categories/characters-orange.svg); }
.category-icon.community::before { background-image: url(../../images/icons/svg/categories/community-orange.svg); }
.category-icon.comparison::before { background-image: url(../../images/icons/svg/categories/comparison-orange.svg); }
.category-icon.controls::before { background-image: url(../../images/icons/svg/categories/controls-orange.svg); }
.category-icon.developer::before { background-image: url(../../images/icons/svg/categories/developer-orange.svg); }
.category-icon.gameplay-design::before { background-image: url(../../images/icons/svg/categories/gameplaydesign-orange.svg); }
.category-icon.marketing::before { background-image: url(../../images/icons/svg/categories/marketing-orange.svg); }
.category-icon.mechanics::before { background-image: url(../../images/icons/svg/categories/mechanics-orange.svg); }
.category-icon.monetisation::before { background-image: url(../../images/icons/svg/categories/monetisation-orange.svg); }
.category-icon.narrative::before { background-image: url(../../images/icons/svg/categories/narrative-orange.svg); }
.category-icon.online::before { background-image: url(../../images/icons/svg/categories/online-orange.svg); }
.category-icon.player-suggestions::before { background-image: url(../../images/icons/svg/categories/playersuggestions-orange.svg); }
.category-icon.playtime::before { background-image: url(../../images/icons/svg/categories/playtime-orange.svg); }
.category-icon.pre-post-release::before { background-image: url(../../images/icons/svg/categories/prepostrelease-orange.svg); }
.category-icon.unique-game-content::before { background-image: url(../../images/icons/svg/categories/uniquegamecontent-orange.svg); }
.category-icon.user-interface::before { background-image: url(../../images/icons/svg/categories/userinterface-orange.svg); }
.category-icon.visuals::before { background-image: url(../../images/icons/svg/categories/visuals-orange.svg); }
/* png ver */
.category-icon.atmosphere.png::before { background-image: url(../../images/icons/png/categories/atmosphere-orange.png) !important; }
.category-icon.audio.png::before { background-image: url(../../images/icons/png/categories/audio-orange.png) !important; }
.category-icon.bugs--issues.png::before { background-image: url(../../images/icons/png/categories/issues-orange.png) !important; }
.category-icon.campaign.png::before { background-image: url(../../images/icons/png/categories/campaign-orange.png) !important; }
.category-icon.characters.png::before { background-image: url(../../images/icons/png/categories/characters-orange.png) !important; }
.category-icon.community.png::before { background-image: url(../../images/icons/png/categories/community-orange.png) !important; }
.category-icon.comparison.png::before { background-image: url(../../images/icons/png/categories/comparison-orange.png) !important; }
.category-icon.controls.png::before { background-image: url(../../images/icons/png/categories/controls-orange.png) !important; }
.category-icon.developer.png::before { background-image: url(../../images/icons/png/categories/developer-orange.png) !important; }
.category-icon.gameplay-design.png::before { background-image: url(../../images/icons/png/categories/gameplaydesign-orange.png) !important; }
.category-icon.marketing.png::before { background-image: url(../../images/icons/png/categories/marketing-orange.png) !important; }
.category-icon.mechanics.png::before { background-image: url(../../images/icons/png/categories/mechanics-orange.png) !important; }
.category-icon.monetisation.png::before { background-image: url(../../images/icons/png/categories/monetisation-orange.png) !important; }
.category-icon.narrative.png::before { background-image: url(../../images/icons/png/categories/narrative-orange.png) !important; }
.category-icon.online.png::before { background-image: url(../../images/icons/png/categories/online-orange.png) !important; }
.category-icon.player-suggestions.png::before { background-image: url(../../images/icons/png/categories/playersuggestions-orange.png) !important; }
.category-icon.playtime.png::before { background-image: url(../../images/icons/png/categories/playtime-orange.png) !important; }
.category-icon.pre-post-release.png::before { background-image: url(../../images/icons/png/categories/prepostrelease-orange.png) !important; }
.category-icon.unique-game-content.png::before { background-image: url(../../images/icons/png/categories/uniquegamecontent-orange.png) !important; }
.category-icon.user-interface.png::before { background-image: url(../../images/icons/png/categories/userinterface-orange.png) !important; }
.category-icon.visuals.png::before { background-image: url(../../images/icons/png/categories/visuals-orange.png) !important; }
/* core */
.category-icon {
    align-items: center;  border-radius: 50%; display: inline-block; justify-content: center; 
    min-width: 1em; padding: 4px; vertical-align: middle; height: 30px; width: 30px;
}
.category-icon.white { background-color: #EF6033; border: 1px solid #EF6033; color: #FFFFFF; }
.category-icon.large { height: 75px; width: 75px; }
.category-icon:before, .category-icon::before { 
    background-image: url(../../images/icons/svg/XP-icon-edit-orange.svg); background-size: cover; background-repeat: no-repeat; content: ''; display: block; position: relative; height: 100%; width: 100%; 
}
.category-icon.white:before, .category-icon.white::before {
    background-image: url(../../images/icons/svg/XP-icon-edit.svg);
}
.category-icon.no-background::before { background-image: none; content: none; }
.category-icon.no-background:not(.white) > span { color: #EF6033; }