/*
1. Base
*/

div#pre-load-img-container {
    display: none;
}


/*
2. Components
*/

div.top-container {
    margin-bottom: 40px;
    position: relative;
}

div.top-container div.amplitude-visualization {
    width: 200px;
    height: 200px;
    box-shadow: 0 5px 31px 0 rgba(0, 0, 0, 0.5);
    margin: auto;
    background-color: black;
}

div.top-container img.now-playing-album-art {
    width: 200px;
    margin: auto;
    box-shadow: 0 5px 31px 0 rgba(0, 0, 0, 0.5);
    display: none;
}

div.top-container div.visualization-toggle {
    width: 24px;
    height: 24px;
    top: 0;
    right: 8px;
    cursor: pointer;
    position: absolute;
}

div.top-container div.visualization-toggle.visualization-on {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/visualization-on.svg") no-repeat center;
}

div.top-container div.visualization-toggle.visualization-off {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/visualization-off.svg") no-repeat center;
}

div.top-container div.amplitude-shuffle {
    width: 22px;
    height: 13px;
    cursor: pointer;
    top: 48px;
    right: 10px;
    position: absolute;
}

div.top-container div.amplitude-shuffle.amplitude-shuffle-on {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/shuffle-on.svg") no-repeat center;
}

div.top-container div.amplitude-shuffle.amplitude-shuffle-off {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/shuffle-off.svg") no-repeat center;
}

div.top-container div.amplitude-repeat {
    width: 25px;
    height: 15px;
    cursor: pointer;
    top: 85px;
    right: 8px;
    position: absolute;
}

div.top-container div.amplitude-repeat.amplitude-repeat-on {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/repeat-on.svg") no-repeat center;
}

div.top-container div.amplitude-repeat.amplitude-repeat-off {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/repeat-off.svg") no-repeat center;
}


/*
Small only
*/


/*
Medium only
*/


/*
Large Only
*/

div.control-container {
    /* margin-top: 40px; */
    display: flex;
    align-items: center;
}

div.control-container div.amplitude-prev {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(92%) contrast(103%);
    /* width: 30px; */
    /* height: 30px; */
    /* background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/prev.svg"); */
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: auto;
    margin-top: 0px;
    font-size: 25px;
}

.media-controls {
    font-size: 30px;
}

div.control-container div.amplitude-play-pause {
    /* width: 30px; */
    /* height: 30px; */
    cursor: pointer;
    margin: auto;
}

div.control-container div.amplitude-play-pause.amplitude-playing {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(92%) contrast(103%);
    /* background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/pause.svg") no-repeat center;  */
    background-size: contain;
    font-size: 25px;
}

div.control-container div.amplitude-play-pause.amplitude-paused {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(92%) contrast(103%);
    /* background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/play.svg") no-repeat center;  */
    background-size: contain;
    font-size: 25px;
    text-align: center;
    width: 30px;
}

div.control-container div.amplitude-next {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(92%) contrast(103%);
    /* width: 30px; */
    /* height: 30px; */
    /* background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/next.svg"); */
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: auto;
    margin-top: 0px;
    font-size: 25px;
}


/*
Small only
*/


/*
Medium only
*/


/*
Large Only
*/

div.meta-data-container {
    margin-top: 40px;
}

div.meta-data-container span.now-playing-name {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    font-size: 28px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.meta-data-container span.now-playing-artist-album {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

div.amplitude-wave-form {
    margin-top: 25px;
    margin-bottom: 12px;
}

div.amplitude-wave-form svg {
    stroke: url(#gradient);
    height: 50px;
    width: 100%;
    stroke-width: .5px;
}

div.amplitude-wave-form svg g {
    stroke: url(#gradient);
    height: 50px;
    width: 100%;
}

div.amplitude-wave-form svg g path {
    stroke: url(#gradient);
    height: 50px;
    width: 100%;
}

span.amplitude-current-time {
    display: block;
    text-align: left;
    color: white;
    font-size: 12px;
}

span.amplitude-time-remaining {
    display: block;
    text-align: right;
    color: white;
    font-size: 12px;
    padding-inline-start: 20PX;
}

div.song-navigation {
    /* margin-top: 50px; */
    /* margin-bottom: 25px; */
}

div.song-navigation input[type="range"] {
    width: 90%;
    /* -webkit-appearance: none; */
    accent-color: black;
    z-index: 9999;
    background-color: inherit;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div.song-navigation input[type="range"]:focus {
    outline: none;
}

div.song-navigation input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    border-radius: 0px;
    /* background: ;  */
}

div.song-navigation input[type="range"]::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 50%;
    -webkit-appearance: none;
    margin-top: -5px;
}

div.song-navigation input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    border-radius: 0px;
    /* background: rgba(255, 255, 255, 0.25);  */
}

div.song-navigation input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    -webkit-appearance: none;
    margin-top: -5px;
}

div.song-navigation input[type="range"]::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.25);
}

div.song-navigation input[type="range"]::-ms-fill-lower {
    background: red;
}

div.song-navigation input[type="range"]::-ms-fill-upper {
    background: green;
}

div.song-navigation input[type="range"]::-ms-thumb {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    -webkit-appearance: none;
    margin-top: -5px;
}

div.arrow-up img.arrow-up-icon {
    cursor: pointer;
    margin: auto;
    display: block;
}

input[type="range"]#global-large-song-slider {
    width: 100%;
    margin-top: -74px;
    -webkit-appearance: none;
    z-index: 9999;
    background-color: inherit;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

input[type="range"]#global-large-song-slider:focus {
    outline: none;
}

input[type="range"]#global-large-song-slider::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer;
    border-radius: 0px;
    height: 68px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
}

input[type="range"]#global-large-song-slider::-webkit-slider-thumb {
    width: 5px;
    height: 68px;
    background-color: white;
    border-radius: 20px;
    -webkit-appearance: none;
}

input[type="range"]#global-large-song-slider::-moz-range-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    border-radius: 0px;
    height: 68px;
    background-color: rgba(0, 0, 0, 0);
}

input[type="range"]#global-large-song-slider::-moz-range-thumb {
    width: 5px;
    height: 68px;
    background-color: white;
    border-radius: 20px;
    -webkit-appearance: none;
    margin-top: -34px;
}

input[type="range"]#global-large-song-slider::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.25);
}

input[type="range"]#global-large-song-slider::-ms-fill-lower {
    background: transparent;
}

input[type="range"]#global-large-song-slider::-ms-fill-upper {
    background: transparent;
}

input[type="range"]#global-large-song-slider::-ms-thumb {
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 20px;
    -webkit-appearance: none;
    margin-top: -10px;
}


/*
3. Layout
*/

div#visualizations-player {
    width: 325px;
    padding: 25px;
    background-color: #482D57;
    border-radius: 20px;
    margin: auto;
    margin-top: 50px;
    position: relative;
}


/*
Small only
*/


/*
Medium only
*/


/*
Large Only
*/

div#visualizations-player-playlist {
    background-color: #482D57;
    border-radius: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 25px;
    padding-top: 25px;
    z-index: 9999;
    display: none;
}

div#visualizations-player-playlist div.top-arrow {
    text-align: center;
}

div#visualizations-player-playlist div.top-arrow img {
    cursor: pointer;
}

div#visualizations-player-playlist div.top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

div#visualizations-player-playlist div.top span.playlist-title {
    color: white;
    font-size: 36px;
    font-weight: 700;
}

div#visualizations-player-playlist div.top div.amplitude-shuffle {
    width: 22px;
    height: 13px;
    cursor: pointer;
    float: right;
    margin-top: 22px;
}

div#visualizations-player-playlist div.top div.amplitude-shuffle.amplitude-shuffle-on {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/shuffle-on.svg") no-repeat center;
}

div#visualizations-player-playlist div.top div.amplitude-shuffle.amplitude-shuffle-off {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/shuffle-off.svg") no-repeat center;
}

div#visualizations-player-playlist div.top div.amplitude-repeat {
    width: 25px;
    height: 15px;
    cursor: pointer;
    float: right;
    margin-left: 25px;
    margin-top: 20px;
}

div#visualizations-player-playlist div.top div.amplitude-repeat.amplitude-repeat-on {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/repeat-on.svg") no-repeat center;
}

div#visualizations-player-playlist div.top div.amplitude-repeat.amplitude-repeat-off {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/repeat-off.svg") no-repeat center;
}

div#visualizations-player-playlist div.songs-container {
    padding-top: 35px;
    height: 400px;
    padding-bottom: 90px;
    overflow-y: scroll;
}

div#visualizations-player-playlist div.songs-container div.song {
    margin-bottom: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
}

div#visualizations-player-playlist div.songs-container div.song.amplitude-active-song-container {
    background-color: #03C1EB;
}

div#visualizations-player-playlist div.songs-container div.song:hover {
    background-color: #4CF298;
}

div#visualizations-player-playlist div.songs-container div.song span.song-position {
    color: white;
    font-size: 18px;
    float: left;
}

div#visualizations-player-playlist div.songs-container div.song img.song-album-art {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.5);
    float: left;
    margin-left: 12px;
    margin-right: 16px;
}

div#visualizations-player-playlist div.songs-container div.song div.song-meta-data-container {
    float: left;
    width: calc( 100% - 105px);
}

div#visualizations-player-playlist div.songs-container div.song div.song-meta-data-container span.song-name {
    font-size: 18px;
    display: block;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#visualizations-player-playlist div.songs-container div.song div.song-meta-data-container span.song-artist {
    font-size: 12px;
    display: block;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#visualizations-player-playlist div.songs-container div.song:after {
    content: "";
    display: table;
    clear: both;
}

div#visualizations-player-playlist div.active-audio {
    background-color: rgba(3, 193, 235, 0.7);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 25px;
    display: flex;
}

div#visualizations-player-playlist div.active-audio img.cover-art-small {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    float: left;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right {
    float: left;
    width: calc( 100% - 50px);
    padding-left: 10px;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right span.song-name {
    font-size: 16px;
    color: white;
    display: block;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right div.active-audio-controls {
    text-align: center;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right div.active-audio-controls div.amplitude-prev {
    width: 18px;
    height: 26px;
    display: inline-block;
    background-size: contain;
    background: url(https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/prev.svg) no-repeat center;
    margin-right: 20px;
    vertical-align: middle;
    cursor: pointer;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right div.active-audio-controls div.amplitude-play-pause {
    display: inline-block;
    width: 24px;
    height: 25px;
    cursor: pointer;
    margin: auto;
    vertical-align: middle;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right div.active-audio-controls div.amplitude-play-pause.amplitude-paused {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/small-play.svg") no-repeat center;
    background-size: contain;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right div.active-audio-controls div.amplitude-play-pause.amplitude-playing {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/small-pause.svg") no-repeat center;
    background-size: contain;
}

div#visualizations-player-playlist div.active-audio div.active-audio-right div.active-audio-controls div.amplitude-next {
    width: 18px;
    height: 26px;
    display: inline-block;
    background-size: contain;
    background: url(https://521dimensions.com/img/open-source/amplitudejs/examples/visualizations/next.svg) no-repeat center;
    margin-left: 20px;
    vertical-align: middle;
    cursor: pointer;
}

a.learn-more {
    display: block;
    color: white;
    text-align: center;
    width: 300px;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px;
    margin: auto;
    margin-top: 20px;
    background-color: #482D57;
}

.red-bar {
    height: 5px;
    top: 0;
    left: 0;
    width: 100%;
    background: #D6D3D3;
    margin: 0px 10px;
    cursor: pointer;
}

.red {
    height: 5px;
    width: 1px;
    background-color: #152C34;
}

.top-wrapper {
    display: block;
    width: 100%;
}

.progress-bar {
    position: relative;
    overflow: hidden;
    width: 94%;
    cursor: pointer;
    background: #D6D3D3;
    height: 5px;
    margin: 0px 10px;
}

.progress-bar span {
    position: absolute;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
}

.progress-bar .time-bar {
    z-index: 10;
    background: #152C34
}

.progress-bar .red2 {
    z-index: 10;
    background: #152C34
}

.progress-bar .buffer-bar {
    z-index: 5;
    background: #D6D3D3;
}