.newTabLinks {
margin-top: 10px; margin-right: 6px;
width: auto; height: 45px;
margin-bottom: 5px;
padding-left: 10px; padding-right: 10px; background-color: #010204;
}
.newTabLinks a:hover {
background-color: rgb(21, 163, 21);
color: white;
}
.newTab a {
display: inline-block;
color: white;
text-align: center; text-decoration: none;
font-size: 16px; border: none;
border-radius: 4px;
background-color: #5072A7;
font-family: 'Arial', 'Helvetica', sans-serif;
}
.newTab a:hover {
background-color: rgb(21, 163, 21);
color: white;
}
.newTabContent {
font-family: 'Arial', 'Helvetica', sans-serif;
background-color: #ffffff;
display: none;
border-top: none;
font-size: 1em;
text-align: justify;
padding-left: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
border-radius: 9px;
margin-top: 30px;
}
.dialog-container {
width: 480px;
margin-top: 10px;
} 
@media only screen and (max-width: 600px) {
.dialog-container {
width: 100%;
margin-top: 0;
}
}
.puzzle {
position: relative;
color: #5072A7;
display: inline-block;
cursor: pointer;
}
.tooltip {
visibility: hidden;
width: 130px;
background-color: white;
text-align: center;
border-radius: 9px;
border: 1px solid rgb(206, 206, 206);
color: gray;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
}
.puzzle:hover .tooltip {
visibility: visible;
}
.left-aligned {
font-size: 16px;
color: #5072A7;
margin-bottom: 0px;
}
* {
box-sizing: border-box;
}.audio-player {
width: 300px;
margin: 20px;
}
#progressBar {
background-color: #ddd;
height: 5px;
width: 100%;
margin-top: 5px;
}
#progress {
height: 100%;
background-color: #4caf50;
width: 0;
}