SpectatorPanel
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    font-family: 'Cal Sans';
    z-index: 990;
    color: white;
    font-size: 16px;
    pointer-events: all;
    text-shadow: 0 0 5px black;

    .bar
    {
        width: 100%;
        min-height: 150px;
        //background-color: black;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .header
        {
            flex-direction: row;
            align-items: center;
            gap: 8px;
            font-size: 26px;
            opacity: 0.32;

            .spectating-label
            {
                color: rgba(255, 255, 255, 0.55);
            }

            .player-name
            {
                color: rgba(140, 210, 255, 0.85);
            }

            .nav-hint
            {
                flex-direction: row;
                align-items: center;
                gap: 4px;

                .arrow-label
                {
                    font-size: 20px;
                    color: rgba(255, 255, 255, 0.6);
                }

                InputHint.cycle-hint
                {
                    width: 22px;
                    height: 22px;
                }
            }
        }

        .subheader
        {
            opacity: 0.4;
        }

        &.top
        {
            //padding-top: 32px;
        }

        &.bottom
        {

            .controls
            {
                align-items: center;
                gap: 16px;

                i
                {
                    font-size: 64px;
                    transform: scale(1);

                    &:hover
                    {
                        cursor: pointer;
                        transform: scale(1.1);
                        sound-in: ui.button.over;
                    }

                    &:active
                    {
                        transform: scale(0.95);
                        sound-in: ui.button.press;
                    }
                }
            }

            .currently-spectating
            {
                flex-direction: column;
                width: 400px;
                align-items: center;
                gap: 8px;
            }

            .player-info
            {
                align-items: center;
                gap: 16px;
                font-size: 38px;

                .avatar
                {
                    width: 64px;
                    height: 64px;
                    flex-shrink: 0;
                }

                .name
                {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }

    .filler
    {
        width: 100%;
        height: 100%;
        flex-grow: 1;
        //position: relative;

        //PlayerPerks
        //{
            //bottom: 10px;
        //    height: 100%;
        //    max-height: 100%;
        //}

        //InfoPanel
        //{
        //    width: 280px;
        //    left: 10px;
        //    bottom: 10px;
        //}
    }
}