body {
	background-color: #0b1824;
}

ul {
	padding-left: 0; 
	list-style: none;
	margin: .5rem 0 0;
	width:100%;
}

li {
	margin: .35rem 0;
}

li.active a {
	width:100%;
	font-weight: 700;
	/*border-bottom: 1px solid #fff;*/
	background:linear-gradient(90deg, rgba(0,136,255,.28), rgba(0,136,255,.02));
	padding:6px;
    color:#fff; font-weight:700;
    border-left:3px solid #046ca2;
    padding-left:calc(.8rem - 3px);
    border-radius:4px;
    
    display: block;   /* Changes the LI from inline to a block element */
  width: 100%;      /* Forces the LI to fill 100% of the UL's width */
  box-sizing: border-box;
}

a {
	text-decoration: none;
}

.now {
	margin-bottom: .75rem;
}

.muted {
	color: #555; font-size: .95rem;
}

button {
	border:1px solid #2a353f;
	border-radius:12px;
	background:#14212e;
	color:#fff;
	padding:10px;
}

button:hover {
	background-color: #0b1824;
}

i {
	font-size:0.8em;
}


#player {
    display: none;
}

.custom-audio-player {
    background-color: #14212e;
    color: #ffffff;

    padding: 12px;

    width: 100%;
    max-width: 600px;
    font-family: Arial, sans-serif;
}

.player-duration {
	display: flex;
    align-items: center;
    gap: 10px;
}

.player-volume {
	text-align:right;
}

.audio-btn {
    background-color: #1f3548;
    color: #ffffff;
    border: none;
    border-radius: 50%;

    width: 40px;
    height: 40px;
    line-height:20px;

    cursor: pointer;
    font-size: 18px;
}

.audio-btn:hover {
    background-color: #2d4b66;
}

.progress-bar {
    flex: 1;
}

.volume-bar {
    width: 60px;
}

.custom-audio-player input[type="range"] {
    cursor: pointer;
}

#datumTag, #uhrzeit {
	display:inline-block;
}

.wdg_liste {
	width:100%;
	height:50%;
	max-height:400px;
	overflow:auto;

	scrollbar-width: thin;
    scrollbar-color: #4b6f8f transparent;
}

button.playing {
    background-color: red;
    color: white;
}