.pollo_container {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #fbfbfc 0%, #f3f3f3 20%, #dcdcdc 50%, #c7c7c7 75%, #86878b 100%);
}

.pollo_button_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    min-width: 50px;
    background: linear-gradient(180deg, #fbfbfc 0%, #f3f3f3 20%, #dcdcdc 50%, #c7c7c7 75%, #86878b 100%);
    border: 2px solid #939397;
    border-radius: 5px;
	cursor: pointer;
}

.pollo_play_icon {
    box-sizing: border-box;
    width: 26px;
    height: 30px;
    border-style: solid;
    border-width: 15px 0px 15px 26px;
    border-color: transparent transparent transparent #5B5B5B;
}

.pollo_pause_icon {
    width: 26px;
    height: 26px;
    border-style: double;
    border-width: 0px 0px 0px 26px;
    border-color: #5B5B5B;
}

.pollo_metadata_container {
    min-width: 0; /* needed for text to truncate */
    display: flex;
    flex-direction: row;
    height: 60px;
    flex-grow: 1;
    margin-left: 10px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(94,94,94,1) 0%, rgba(51,51,51,1) 7%, rgba(0,0,0,1) 100%);
}

.pollo_metadata {
    display: flex;
    flex-direction: column;
    min-width: 0;  /* needed for text to truncate */
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-grow: 1;
    color: white;
}

.pollo_metadata_title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.pollo_metadata_progress {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: gray;
}

.pollo_visual_container {
    width: 60px;
    height: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-left: 10px;
}

#pollo_canvas {
    width: 100%;
    height : 100%;
}