/*
 
ET-Chat Copyright by SEDesign | ET-Chat v3.x.x Lizenz: CCPL | Autor: Evgeni Tcherkasski (info@s-e-d.de)

ET-Chat_T-FISH-MOD Weiterentwicklung des ET-Chats durch Tommy (Thomas Kuhn) und Harlekin (Bernd Witte)
 
Die Weiterentwicklungen, Optimierungen und Ergänzungen am Code sind das geistige Eigentum von Tommy (Thomas Kuhn) und Harlekin (Bernd Witte).
 
*/

:root { --bg-color: rgba(0, 0, 0, 0.00); --font-color: #ffffff; --highlight-color: #ffffff; --control-padding: 12px; }
body { margin:0; padding:0; background:var(--bg-color); color:var(--font-color); font-family:Arial,sans-serif; }
#webradio { display:flex; align-items:center; justify-content:space-between; background:var(--bg-color); border:0px solid var(--highlight-color); padding:0px; height:60px; position:relative; }
#audio-playbutton { padding-left:var(--control-padding); margin-right:5px; z-index:2; }
#audio-playbutton img { width:30px; height:30px; cursor:pointer; transition:transform 0.2s; display:block; }
#title-container { flex-grow:1; margin:0 10px; height:40px; min-width:0; position:relative; }
#radio-name { font-size:10pt; color:var(--font-color); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#radio-name-display { overflow:hidden; white-space:nowrap; height:16px; position:relative; }
#scrolling-radio-name { font-size:10pt; color:var(--font-color); position:absolute; white-space:nowrap; left:0; }
#scrolling-radio-name.scroll { animation:scroll-text 15s linear infinite; transform:translateX(100%); }
#title-display { overflow:hidden; white-space:nowrap; height:24px; position:relative; }
#scrolling-title { font-size:11pt; color:var(--font-color); position:absolute; white-space:nowrap; left:0; }
#scrolling-title.scroll { animation:scroll-text 15s linear infinite; transform:translateX(100%); }
#scrolling-title.error { color:#ff6666; animation:none; transform:translateX(0); }
@keyframes scroll-text { 0% {transform:translateX(100%); } 100% {transform:translateX(-100%); } }
#volume-overlay { position:absolute; top:0; left:0; right:0; height:100%; background:rgba(0,0,0,0.25); border-radius: 4px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:10; }
#volume-overlay.active { opacity:1; pointer-events:all; }
#volume-control-container { width:100%; display:flex; align-items:center; gap:10px; }
#vol-control { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255, 255, 255, 0.2);  border-radius: 5px; outline: none; cursor: pointer; }
#vol-control::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--highlight-color); border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,0.5); margin-top: 0px; }
#vol-control::-moz-range-thumb { width: 16px; height: 16px; background: var(--highlight-color); border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.5); }
#vol-control::-moz-range-track { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 5px; }
#vol-control::-moz-range-progress { background: var(--highlight-color); height: 6px; border-radius: 5px; }
#audio-vol { padding-right:var(--control-padding); z-index:2; display:flex; align-items:center; gap:5px; }
#audio-vol img { width:20px; height:20px; cursor:pointer; }
#volume-percent { font-size:10pt; min-width:30px; }