#broadcastList { /*container for broadcast list popup*/
    display: none; /*start invisible*/
    /*display: block;*/ /*normal state, set by showList()*/
    margin: 5% auto; /*5% from the top and horizontally centered*/
    position: relative;
    border: var(--borderWidth) solid white;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.2) 5px 5px 5px 0px;
    outline: none; /*get rid of focus outline*/
    overflow: hidden;
    width: 800px; /*TODO: move to broadcastListBody OR code so #broadcastDetails is equal to #broadcastList and can be converted to a class*/
}

#broadcastListBody { /* body for broadcast list popup - modal.css has styling for header and footer */
    display: block;
    background-color: #F8F8F8;
    color: #888; /*text color*/
    font-size: xx-large;
    max-height: 70vh;
    overflow-y: auto;
}

.listitem {
    margin: 10px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 90px 80px auto;
    grid-template-areas: 'listitemimage listitemtime listitemtitle';
    grid-column-gap: 5px;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.2) 1px 1px 2px 0px;
    overflow: hidden;
    /*max-height:60px;*/
}
    .listitem.recorded {
    box-shadow: red 0 0 2px 2px;
    }
    .listitem.watched {
        box-shadow: deepskyblue 0 0 2px 2px;
    }
    .listitem.tipped {
        box-shadow: yellow 0 0 2px 2px;
    }
    .listitem:hover {
        /*color: Highlight;*/
        /*box-shadow: rgb(255, 64, 32) 0 0 1px 1px,rgb(255, 200, 200) 0 0 3px 2px;*/
        filter: brightness(110%);
    }

.listitemimage {
    grid-area: listitemimage;
    width: 90px;
    height: 60px;
    background-size: 90px 60px;
    background-repeat:no-repeat;
}

.listitemtime {
    grid-area: listitemtime;
    text-align: right;
    /*background-color:red;*/
}

.listitemtitle {
    grid-area: listitemtitle;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /*background-color:green;*/
}