/* 
==========================================
================= ICONS ==================
==========================================
*/

i[class^='icon-']{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/icons/menu-icons.png);
    background-repeat: no-repeat;
}

i.icon-sidebar-open{
    width: 14px;
    height: 20px;
    background-position: -63px 0px;
    transform: rotate(180deg) scale(0.8);
}
i.icon-sidebar-close{
    width: 14px;
    height: 20px;
    background-position: -63px 0px;
    transform: scale(0.8);
}
i.icon-home{
    background-position: -21px 0px;
}
i.icon-streams{
    background-position: 0 0;
}
i.icon-faq{
    background-position: -42px 0px;
}
i.icon-viewers{
    width: 11px;
    height: 12px;
    background-position: -77px -8px;
}
i.icon-heart{
    width: 23px;
    height: 20px;
    background-position: -88px 0px;
}
i.icon-whats-new{
    width: 23px;
    height: 20px;
    background-position: -130px 0px;
}
i.icon-settings{
    width: 20px;
    height: 20px;
    background-position: -111px 0px;
}


i.icon-live, i.icon-offline{
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    margin-right: 5px;
    margin-bottom: 1px;
    background-image: none;
}
i.icon-live{ background-color: var(--red) }
i.icon-offline{ background-color: var(--gray) }



/* 
==========================================
============== SOCIAL ICONS ==============
==========================================
*/

i[class^='icon-social-']{
    background-image: url(/img/icons/sprite-big-logos.png);
    background-size: 55px;
    display: inline-block;
    background-repeat: repeat;
    width: 15px;
    height: 15px;
    margin: 0px 0 -2px 0;
}
i.icon-social-youtube{ background-position: -19px -54px; background-size: 53px }
i.icon-social-twitch{ background-position: 17px 0 }
i.icon-social-goodgame{ background-position: 17px -20px }
i.icon-social-trovo{ background-position: 17px -38px }
i.icon-social-wasd{ background-position: -20px -75px }
i.icon-social-boosty{ background-position: -21px 126px }
i.icon-social-coub{ background-position: -2px -1px }
i.icon-social-discord{ background-position: 35px -1px }
i.icon-social-facebook{ background-position: -2px 35px }
i.icon-social-donationalerts{ background-position: -2px 127px }
i.icon-social-instagram{ background-position: -2px 54px }
i.icon-social-twitter{ background-position: -2px 72px }
i.icon-social-vkontakte{ background-position: -2px -20px }
i.icon-social-patreon{ background-position: -20px -239px }
i.icon-social-onlyfans{ background-position: -20px -147px }