.top_side_bar {
    width: 455px;
    height: 55px;
    background: rgba(19, 0, 23, 0.9);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
    position: absolute;
    font-size: 16px;
    top:0;
    transition: opacity 1s;
    opacity:1;
    &.hide {
        opacity: 0;
    }
    .attack {
        background-repeat: no-repeat;
        background-position: 0 2px;
        background-image: url('./../Scoreboard/sword.png');
        padding-left:23px;
    }

    &.right {
        right: 0;
        .logo_and_type {
            right: unset;
            left: -92px;

            img {
                left: unset;
                right: 6px;
            }

            .type_color {
                left:0;
                right:unset;
            }
        }
    }

    .logo_and_type {
        position: absolute;
        right:-92px;
        width: 92px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: rgba(19, 0, 23, 0.9);
        img {
            position: relative;
            left: 6px;
            max-width: 75px;
        }
        .type_color{
            width: 24px;
            height: 100%;
            position: absolute;
            z-index:999;
            top:0;
            right:0;
            &.radiant {
                background-color: #16349E;
            }
            &.dire {
                background-color: #BD1313;
            }
        }
    }
}
.commercial {
    width: 379px;
    height: 215px;
    position: fixed;
    bottom: 0;
    right: 172px;
    transition: opacity 1s;
    opacity:1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .commercial-container {
        width: 100%;
        height: 153px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    img {
        position: relative;
        left: 10px;
        max-width:70%;
        max-height: 120px;

        
        transition: opacity 1s;
        opacity:1;
        &.hide {
            opacity: 0;
        }
    }
    &.hide {
        opacity: 0;
    }
}
#commercial {
    position: fixed;
    bottom: 0;
    right: 172px;
    transition: opacity 1s;
    opacity:1;
    &.hide {
        opacity: 0;
    }
}
body {
}
.player_container {
    display: flex;
    flex-direction: column;
    position:fixed;
    align-items: center;
    bottom:0;
    left:282px;
    transition: opacity 1s;
    opacity:1;
    &.hide {
        opacity: 0;
    }
    .player_picture {
        width: 260px;
        height: 170px;
        display: flex;

        justify-content: center;
        background-color: rgba(1, 3, 20, 1);
        align-items: flex-end;
        position: relative;

        img {
            max-height: 100%;
            max-width: 100%;
        }
    }
    .player_info {
        height:37px;
        width: 100%;
        display:flex;
        align-items: flex-end;
        background-color: rgba(19, 0, 23, 0.9);
        .team_bar {
            width: 15px;
            height: 100%;
            &.radiant {
                
                background-color: #16349E;
            
            }
            &.dire {
                
        background-color: #BD1313;
            }
        }
        .team_box{
            width: 60px;
            height: 100%;
            z-index:2;
            display: flex;
        }
        .team_logo {
            display:flex;
            align-items: center;
            justify-content: center;
            img {
                max-width:30px;
            }
        }
        .username {
            color: white;
            font-size: 16px;
            font-weight: 700;
            flex:1;
            height: 100%;
            display:flex;
            padding-left:20px;
            text-transform: uppercase;
            align-items: center;
            position: relative;
            left: -8px;
            .player_kills {
                margin-left: auto;
                margin-right: 20px;
                font-weight: 500;
                display: flex;
                height: 100%;
                font-size: 14px;

                .player_kill {
                    background-repeat: no-repeat;
                    background-position: top 2px center;
                    width: 20px;
                    background-size: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                }
            }
        }
    }
}
