generic-webradio-player/player.css

#player {
    /* background-color: #0c0c0d;*/
    background-color: #1c1b22;
    border-radius: 6px;
    color: #fff;
    padding-top:0px;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;;
}
.show-list > .arrow {
    height: 20px;
}

.show-list {
    display: flex;
    align-items: center;
}

#programmi-lista {
    display: flex;
    overflow: hidden;
}

#programmi-lista > span{
    border-radius: 5px 15px;
    /* background: #38383d; */
    border: solid 1px #fff;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
}

#programmi-lista > span:hover {
    /*background: #4a4a4f;*/
    background: #42414d;
}

#programmi-content {
    overflow: hidden;
}

.show-content {
    display: flex;
    align-items: center;
}

.show-content > .arrow{
    height: 20;
    width: 50;
}


.play-pause {
    border: 2px solid beige;
    border-radius: 100%;
    height: 48px;
    width: 48px;
    text-align: center
}
.prev-step {
    width: 25px;
    height: 25px;
    margin-left: 35px;
    margin-right: 35px;
}

.control {
    display: flex;
}
.control > img {
    width: inherit;
    height: inherit;
}

.controlBlock {
    float: left;
    width: 33.33%;
    display: flex;
    align-items: center;
}
.controlCenter {
    width: 30%;
    margin: 0 auto;
    text-align: center;
    margin-top: 16;   
}
#player.after {
  content: "";
  display: table;
  clear: both;
}

.arrow-left {
    transform: rotate(90deg);
}

.arrow-right {
    transform: rotate(-90deg);
}

.arrow-up {
    transform: rotate(180deg);
}

.show-card > .description {
    height: 70%;
    overflow: hidden;	    
}

.show-card > .controls > img+img {
    margin-left: 5px;
}

#menu > input {
    display: none;
}

#player > div {
    margin-left: 10px;
}
#menu > input:checked+label {
    background: #4a4a4f;
}

#menu > input+label {
    border: solid 1px #fff;
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    padding: 2;
}

.show-card + .show-card {
    margin-left: 10px;
}

.show-card {
    /* background: #38383d; */
    border: solid 1px #fff;
    color: #fff;
    border-radius: 5% 2%;
    width: 200px;
    height: 200px;
    word-wrap:  break-word;
    font-size: 9pt;    
    padding: 5px;
    flex: 0 0 200px;
}

.show-card > .controls {
    display: flex;
    justify-content: right;
}

.show-card > .controls > .play-pause {
    width: 30px;
    height: 30px;
}

.add-to-playlist {
    height: 30px;
}

.content-box {
    margin-top: 20px;
    width: auto;
    display: flex;
    overflow: hidden;
}

.hidden {
    display: none;
}


#contents > div {
    margin-top: 5px;
}

.controlBlock > div {
    display: inline-block;
    margin-top: 22;
}

.controlBlock > div > img, input {
    vertical-align: middle
}

.tags > span {
    border-radius: 15px;
    /* background:  #38383d; */
    border: solid 1px #fff;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;
    padding-left: 3px;
    padding-right: 3px;
}
.controls {
    margin-left:auto;
    margin-right:auto;
    height:87px;
}

#volume-off, #volume-on {
    width: 25px;
    height: 25px;
}

#contents {
    margin-top: -1px;
    padding-top: 1px;
}

#contents-button {
    with: 43px;
    height: 17px;
}

.info-content {
    color: #fff;
    margin-top: 20px;    
}

.live {
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10px;
    opacity: 1;
    transition: all 0.5s ease-out;
    color: #fff;
}

.controlCenter {
    justify-content: center;
}

.controlLeft {
    justify-content: left;
}

.controlRight {
    justify-content: right;
}

#volume {
    /* -webkit-appearance: none; */
    /* appearance: none; */
    /* background: #d3d3d3; */
    /* outline: none; /\* Remove outline *\/ */
    /* opacity: 0.7; /\* Set transparency (for mouse-over effects on hover) *\/ */
    /* -webkit-transition: .2s; /\* 0.2 seconds transition on hover *\/ */
    /* transition: opacity .2s; */
}