/* Audio player for TTS demos */

.audio-player {
    --player-button-width: 6em;
}

.controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.player-button {
    background-color: transparent;
    border: 0;
    width: var(--player-button-width);
    height: var(--player-button-width);
    cursor: pointer;
    padding: 0;
}

button.player-button:hover, button.player-button2:hover {
    background-color: transparent !important;
}

button.player-button:active, button.player-button2:active  {
    background-color: transparent !important;
}

button.player-button:focus, button.player-button2:focus {
    background-color: transparent !important;
    border: 3px black;
}

button.player-button svg, button.player-button2 svg  {
    transition: fill 0.2s ease-in-out; ;
}

button.player-button:hover svg, button.player-button2:hover svg {
    fill: #8eaad7;
}

/* Audio player for TTS demos */

.audio-player2 {
    --player-button-width: 6em;
}

.controls2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.player-button2 {
    background-color: transparent;
    border: 0;
    width: var(--player-button-width);
    height: var(--player-button-width);
    cursor: pointer;
    padding: 0;
}