:root{
    --ico-dark-gray: #4B4B4B;
    --ico-gray: #9e9e9e;
    --ico-white: #ffffff;
    --ico-red: #CC0041;
}

.ico{
    display: inline-block;
    background-color: transparent;
    background-size: cover;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}

/* margin para os icons 
mgl margin left
mgr margin right
*/
.ico-mg-l-wide{
    margin-left: 2em;
}
.ico-mg-l-normal{
    margin-left: 0.8em;
}
.ico-mg-l-narrow{
    margin-left: 0.5em;
}

.ico-mg-r-wide{
    margin-right: 2em;
}
.ico-mg-r-normal{
    margin-right: 0.8em;
}
.ico-mg-r-narrow{
    margin-right: 0.5em;
}

/*  icons backgrounds */
/* calendar */
.ico-calendar {
    width: 25px;
    height: 27px;
    background-image: url('ico/calendar.svg');
}

.ico-calendar.small {
    width: 23px;
    height: 25px;
}

.ico-calendar.gray {
    background-image: url('ico/calendar-gray.svg');
}

.ico-calendar.dark-gray {
    background-image: url('ico/calendar-dark-gray.svg');
}

.ico-calendar.red {
    background-image: url('ico/calendar-red.svg');
}

.ico-menu {
    width: 25px;
    height: 27px;
    background-image: url('ico/icons8-menu.svg');
}

.ico-menu.red {
    background-image: url('ico/icons8-menu-red.svg');
}


/* activity */
.ico-activity {
    width: 23px;
    height: 23px;
    background-image: url('ico/activity.svg');
}

.ico-activity.small {
    width: 16px;
    height: 16px;
}

.ico-activity.gray {
    background-image: url('ico/activity-gray.svg');
}

.ico-activity.dark-gray {
    background-image: url('ico/activity-dark-gray.svg');
}

.ico-activity.red {
    background-image: url('ico/activity-red.svg');
}


/* time */
.ico-time {
    width: 40px;
    height: 40px;
    background-image: url('ico/time.svg');
}

.ico-time.small {
    width: 20px;
    height: 20px;
}

.ico-time.gray {
    background-image: url('ico/time-gray.svg');
}

/* uniao */
.ico-uniao{
    width: 18px;
    height: 20px;
    background-image: url('ico/uniao.svg');
}

/* play */
.ico-play{
    width: 20px;
    height: 20px;
    background-image: url('ico/play.svg');
}

/* soft play */
.ico-soft-play{
    width: 36px;
    height: 41px;
    background-image: url('ico/soft-pay.svg');
}

.ico-soft-pause.red{
    background-image: url('ico/pause.svg');
}

.ico-soft-pause{
    width: 36px;
    height: 41px;
    background-image: url('ico/pause.svg');
}

.ico-soft-play.red{
    background-image: url('ico/soft-pay-red.svg');
}

/* arrows */
.ico-circle-right{
    width: 12px;
    height: 12px;
    background-image: url('ico/circle-right.svg');
}

.ico-circle-right.dark-gray{
    background-image: url('ico/circle-right-dark-gray.svg');
}

/* moon */
.ico-moon {
    width: 25px;
    height: 27px;
    background-image: url('ico/moon.svg');
}

.ico-moon.small{
    width: 21px;
    height: 23px;
}

.ico-moon.gray {
    background-image: url('ico/moon-gray.svg');
}

.ico-moon.dark-gray {
    background-image: url('ico/moon-dark-gray.svg');
}

.ico-moon.red {
    background-image: url('ico/moon-red.svg');
}


.ico-moon.yellow {
    background-image: url('ico/moon-yellow.svg');
}

/* tv */
.ico-tv {
    width: 41px;
    height: 32px;
    background-image: url('ico/tv.svg');
}

.ico-tv.small {
    width: 30px;
    height: 23px;
}

.ico-tv.gray {
    background-image: url('ico/tv-gray.svg');
}

.ico-tv.dark-gray {
    background-image: url('ico/tv-dark-gray.svg');
}

.ico-tv.red {
    background-image: url('ico/tv-red.svg');
}

/* info */
.ico-info {
    width: 40px;
    height: 40px;
    background-image: url('ico/info.svg');
}

.ico-info.small {
    width: 20px;
    height: 20px;
}

.ico-info.gray {
    background-image: url('ico/info-gray.svg');
}

/* lamp */
.ico-lamp {
    width: 28px;
    height: 40px;
    background-image: url('ico/lamp.svg');
}

.ico-lamp.small {
    width: 18px;
    height: 26px;
}

.ico-lamp.gray {
    background-image: url('ico/lamp-gray.svg');
}

.ico-lamp.red {
    background-image: url('ico/lamp-red.svg');
}


/* check */
.ico-check {
    width: 32px;
    height: 32px;
    background-image: url('ico/check.svg');
}

.ico-check.small {
    width: 13px;
    height: 13px;
}

.ico-check.gray {
    background-image: url('ico/check-gray.svg');
}

.ico-check.dark-gray {
    background-image: url('ico/check-dark-gray.svg');
}

.ico-check.red {
    background-image: url('ico/check-red.svg');
}

/******************* current matches *****************************/
/* fight on going */
.ico-fight-ongoing {
    width: 26px;
    height: 26px;
    background-image: url('ico/fight-ongoing.svg');
}

.ico-fight-ongoing.small {
    width: 13px;
    height: 13px;
}

/* fight next */
.ico-fight-next {
    width: 26px;
    height: 29px;
    background-image: url('ico/fight-next.svg');
}

.ico-fight-next.small {
    width: 13px;
    height: 13px;
}


/* fight next */
.ico-fight-waiting {
    width: 26px;
    height: 27px;
    background-image: url('ico/fight-waiting.svg');
}

.ico-fight-waiting.small {
    width: 13px;
    height: 13px;
}


/* weight okay - green circle */
.ico-weight-ok {
    width: 26px;
    height: 26px;
    background-image: url('ico/weight-ok.svg');
}

.ico-weight-ok.small {
    width: 20px;
    height: 20px;
}


/* weight okay - green circle */
.ico-weight-not-ok {
    width: 26px;
    height: 26px;
    background-image: url('ico/weight-not-okay.svg');
}

.ico-weight-not-ok.small {
    width: 20px;
    height: 20px;
}


/* activity */
.ico-brazil {
    width: 82px;
    height: 55px;
    background-image: url('ico/brazil.svg');
}

.ico-brazil.small {
    width: 16px;
    height: 16px;
}


/* time */
.ico-magnifying {
    width: 29px;
    height: 29px;
    background-image: url('ico/magnifying.svg');
}

.ico-magnifying.small {
    width: 20px;
    height: 20px;
}


/* back 1 */
.ico-back-1 {
    width: 42px;
    height: 42px;
    background-image: url('ico/back-1.svg');
}

.ico-arrow-left {
    width: 42px;
    height: 42px;
    background-image: url('ico/back-arrow-7316.svg');
}


.ico-back-1.red {
    background-image: url('ico/back-1-red.svg');
}

/* back 30 */
.ico-back-30 {
    width: 42px;
    height: 42px;
    background-image: url('ico/back-30.svg');
}

.ico-back-30.red {
    background-image: url('ico/back-30-red.svg');
}

/* advance 1 */
.ico-advance-1 {
    width: 42px;
    height: 42px;
    background-image: url('ico/advance-1.svg');
}

.ico-advance-1.red {
    background-image: url('ico/advance-1-red.svg');
}

/* advance 30 */
.ico-advance-30 {
    width: 42px;
    height: 42px;
    background-image: url('ico/advance-30.svg');
}

.ico-advance-30.red {
    background-image: url('ico/advance-30-red.svg');
}


/* ico key */
.ico-key {
    width: 30px;
    height: 30px;
    background-image: url('ico/gobackmat.svg');
}

.ico-key.gray {
    background-image: url('ico/gobackmat.svg');
}

.ico-key.red {
    background-image: url('ico/gobackmat-red.svg');
}

/* ico order */
.ico-order {
    width: 29px;
    height: 14px;
    background-image: url('ico/ordem.svg');
}

.ico-order.gray {
    background-image: url('ico/ordem-gray.svg');
}

.ico-order.red {
    background-image: url('ico/ordem-red.svg');
}

/* ico change sides */
.ico-change {
    width: 28px;
    height: 28px;
    background-image: url('ico/trocar.svg');
}
/* ico change sides */
.ico-change-name {
    width: 28px;
    height: 28px;
    background-image: url('ico/change-name.svg');
}

.ico-change.gray {
    background-image: url('ico/trocar-gray.svg');
}

.ico-change.red {
    background-image: url('ico/trocar-red.svg');
}
.ico-change-name.red {
    background-image: url('ico/change-name-red.svg');
}


/* ico undo */
.ico-undo{
    width: 32px;
    height: 32px;
    background-image: url('ico/desfazer.svg');
}

.ico-undo.gray{
    background-image: url('ico/desfazer-gray.svg');
}

.ico-undo.red{
    background-image: url('ico/desfazer-red.svg');
}


/* ico checkmark */
.ico-checkmark{
    width: 28px;
    height: 28px;
    background-image: url('ico/visto.svg');
}

.ico-checkmark.gray{
    background-image: url('ico/visto-gray.svg');
}

.ico-checkmark.red{
    background-image: url('ico/visto-red.svg');
}


.ico-bell {
    width: 26px;
    height: 26px;
    background-image: url('ico/bell.svg');
}

.ico-bell.small {
    width: 18px;
    height: 21px;
}

.ico-bell-red {
    width: 26px;
    height: 26px;
    background-image: url('ico/bell-red.svg');
}

.ico-bell-red.small {
    width: 18px;
    height: 21px;
}