/*
Kids' Blue:     #00bcd4
Bright Yellow:  #FFEB3B
Soft Greens:    #8BC34A
Vibrant Orange: #FF9800
Rich Purple:    #9C27B0
Light Pink:     #E91E63
Crisp White:    #FFFFFF
*/

/* Audio Player */

audio {
    margin-bottom: 10px;
    width: 100%;
}

#custom_audio_player {
    left: auto;
    border-radius: 80px;
    background: rgba(62, 56, 92, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    height: 44px;
    display: flex;
    align-items: center;
    margin-top: -48px;
    z-index: 999;
    position: fixed;
    width: calc(100% - 32px);
    max-width: calc( var(--mobile-size) - 32px );
    /* margin-bottom: 20px; */
}

#player_container {
    width: 100%;
    display: flex;
    align-items: center;
}

#audio_timeline_container {
    width:100%;
    height: 15px;
    margin-top: 12px;
}

#audio_time {
    color: white;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    margin-right: 16px;
    margin-left: 10px;
    min-width: 47px;
}

#audio_dot {
    height: 13px;
    width: 13px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    left: calc(0% - 9px);
    top: -11.6px;
    transform: translate(4px,0);
}

#audio_dot:hover {
    cursor:grab;
}

#audio_timeline {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.31);
}

#audio_timeline_filled {
    height: 3px;
    width: 0%;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: -3px;
}

#player_container button {
    width: 20px;
    height: 20px;
    padding: 20px;
    background-size: 23px;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 0;
    margin-left: 13px;
    margin-right: 12px;
}

button.play {
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_35_2436)'%3E%3Cpath d='M9.99996 18.3333C14.6023 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6023 1.66663 9.99996 1.66663C5.39759 1.66663 1.66663 5.39759 1.66663 9.99996C1.66663 14.6023 5.39759 18.3333 9.99996 18.3333Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.91663 7.47107C7.91663 7.07333 7.91663 6.87446 7.99974 6.76344C8.07218 6.66669 8.18305 6.60616 8.30361 6.59755C8.44195 6.58767 8.60923 6.6952 8.9438 6.91028L12.8776 9.43917C13.1679 9.62581 13.3131 9.71913 13.3632 9.83778C13.4071 9.94146 13.4071 10.0585 13.3632 10.1621C13.3131 10.2808 13.1679 10.3741 12.8776 10.5607L8.9438 13.0896C8.60923 13.3047 8.44195 13.4123 8.30361 13.4024C8.18305 13.3938 8.07218 13.3332 7.99974 13.2365C7.91663 13.1255 7.91663 12.9266 7.91663 12.5288V7.47107Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_35_2436'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/*button.play:hover {
    background-image: url(/static/img/play_purple.png);
}*/

button.pause {
    background-image: url(/static/img/Pause.png);
    background-size: contain;
}

/*button.pause:hover {
    background-image: url(/static/img/Pause_purple.png);
}
*/