@import url('https://fonts.googleapis.com/css?family=Nunito:400,400i,700,700i&subset=latin-ext,vietnamese');
body,p,h1,h2,h3,h4,table,td,th,ul,ol,textarea,input,button,select,option
{
  font-family: "Nunito", sans-serif;
}

:root {




    --min-progress-colour: rgba(1, 1, 1, 0.75);
    --max-progress-colour: rgba(150, 150, 150, 0.75);
    --progress-bg-colour: rgba(1, 1, 1, 0);

    --document-bg-colour: unset;
    --document-bg-image:  linear-gradient(#ffffff, #bbbbbb);




    --highlight-bg-colour: unset;
    --highlight-bg-image:  linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.1));

    --text-colour: #111111;
    --placeholder-colour: #707070;
    --border-colour: #222222;
    --border-colour-dark: #111111;
    --link-colour: #0b0080;
    --highlight-colour: #444444;

    --headerbar-bg-colour-mob: unset;
    --headerbar-bg-image-mob: unset;
    --headerbar-bg-colour-desk: unset;
    --headerbar-bg-image-desk: unset;

    --infobar-bg-colour: unset;
    --infobar-bg-image: none;

    --sources-bg-colour: unset;
    --sources-bg-image:  none;
    --sources-border-top: none;

    --playlist-bg-colour: unset;
    --playlist-bg-image: none;
    --playlist-title-bg-colour: unset;
    --playlist-title-border: none;
    --playlist-item-top-border: 1px solid var(--border-colour);
    --playlist-current-bg-colour: unset;
    --playlist-current-shadow: unset;
    --playlist-current-transition: font-size 0.5s ease;
    --playlist-current-track-font-size: 120%;
    --playlist-current-track-font-weight: bold;
    --playlist-current-track-left-border: unset;
    --playlist-current-title-font-size: 125%;
    --playlist-current-title-font-weight: bold;

    --top_drop_menu-bg-colour: unset;
    --top_drop_menu-bg-image: linear-gradient(#ededed, #bbbbbb);

    --configtitle-bg-colour: rgba(255,255,255,0.2);
    --configtitle-bg-image: none;
    --configtitle-border-bottom: 1px solid var(--border-colour-dark);

    --infopane-border-top: none;
    --infopane-bg-colour: #dedede;
    --infopane-bg-image: none;
    --infopane-text-colour: unset;

    --infopane-header-bg-colour: unset;
    --infopane-header-bg-image: none;

    --selected-bg-colour: rgba(255,255,255,0.4);

    --button-colour: var(--text-colour);
    --button-hover-colour: var(--highlight-colour);
    --button-border: none;
    --button-hover-border: none;
    --button-bg-colour: #bbbbbb;
    --button-bg-image:  none;
    --button-bg-hover-colour: #eeeeee;
    --button-bg-hover-image:  none;
    --button-font-weight: unset;
    --button-hover-shadow: unset;

    --text-entry-text-colour: var(--text-colour);
    --text-entry-border-colour: unset;
    --text-entry-hover-border-colour: var(--border-colour);
    --text-entry-active-border-colour: var(--border-colour-dark);
    --text-entry-bg-colour: rgba(0,0,0,0.05);
    --text-entry-hover-bg-colour: rgba(0,0,0,0.03);
    --text-entry-active-bg-colour: rgba(0,0,0,0.1);

    --select-text-colour: var(--text-colour);
    --select-bg-colour: var(--text-entry-bg-colour);
    --select-hover-bg-colour: var(--text-entry-hover-bg-colour);

    --album1-colour: transparent;
    --album2-colour: rgba(0,0,0,0.05);
    --drop-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
    --top-shadow: 0px -7px 5px rgba(0, 0, 0, 0.7);

    --bordered-top: 1px solid #bbbbbb;
    --bordered-right: 1px solid #ffffff;
    --bordered-bottom: 1px solid #ffffff;
    --bordered-left: 1px solid #bbbbbb;

    --albumart-artists-bg-colour: var(--document-bg-colour);
    --albumart-artists-bg-image:var(--document-bg-image);

    --open-album-border-highlight: none;

    --waiting-swinger-height: 2px;
    --waiting-swinger-bg-image: radial-gradient(circle at center, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0));

    --icon-snapcast: url('newimages/snapcast_800.png');
}

/*
=====================================================================
= Standard HTML Elements
=====================================================================
*/

html
{
    background-color: var(--document-bg-colour);
    background-image: var(--document-bg-image);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

#custombackground
{
    display:none;
}

.infowiki
{
    background-color: var(--infopane-bg-colour);
    background-image: var(--infopane-bg-image);
}

.inbrowser
{
    color: var(--infopane-text-colour);
}

.collectionitem .helpfulalbum.fixed {
    background-color: var(--highlight-bg-colour);
    background-image: var(--highlight-bg-image);
}

.masonry_opened .helpfulalbum.tleft
{
    background-image: none;
}

.covercontainer.highlighted
{
    border-bottom: none !important;
    margin-bottom: -4px;
}

#coverslist
{
    box-sizing:border-box;
    border-left:1px solid var(--border-colour);
}

.bigholder {
    background-color: var(--document-bg-colour);
    background-image: var(--document-bg-image);
}

/* Ensure the album2 colour doesn't follow the div, looks weird on phone */

body.phone .dropmenu.album1
{
    background-color: var(--sources-bg-colour);
    background-image: var(--sources-bg-image);
}

body.phone .dropmenu.album2
{
    background-color: var(--sources-bg-colour);
    background-image: var(--sources-bg-image);
}

body.dekstop .podcastitem
{
    border-top: var(--playlist-item-top-border);
}

:root {
    --dropdown-button: url('iconsets/New-Dark-Circled/blobdown3.svg');
    --dropdown-button-hover: url('iconsets/New-Dark-Circled/blobdown3-hi.svg');
    --compact-disc: url('iconsets/New-Dark-Circled/compact-disc.svg');

    --icon-play-circled: url('iconsets/New-Dark-Circled/media-playback-start.svg');
    --icon-play-circled-hover: url('iconsets/New-Dark-Circled/media-playback-start-highlight.svg');
    --icon-pause-circled: url('iconsets/New-Dark-Circled/media-playback-pause.svg');
    --icon-pause-circled-hover: url('iconsets/New-Dark-Circled/media-playback-pause-highlight.svg');
    --icon-fast-backward: url('iconsets/New-Dark-Circled/media-skip-backward.svg');
    --icon-fast-backward-hover: url('iconsets/New-Dark-Circled/media-skip-backward-highlight.svg');
    --icon-fast-forward: url('iconsets/New-Dark-Circled/media-skip-forward.svg');
    --icon-fast-forward-hover: url('iconsets/New-Dark-Circled/media-skip-forward-highlight.svg');
    --icon-stop-1: url('iconsets/New-Dark-Circled/media-playback-stop.svg');
    --icon-stop-1-hover: url('iconsets/New-Dark-Circled/media-playback-stop-highlight.svg');
    --icon-to-end-1: url('iconsets/New-Dark-Circled/stopafter.svg');
    --icon-to-end-1-hover: url('iconsets/New-Dark-Circled/stopafter-highlight.svg');

    --icon-music: url('iconsets/New-Dark-Circled/collection.svg');
    --icon-search: url('iconsets/New-Dark-Circled/system-search.svg');
    --icon-folder-open-empty: url('iconsets/New-Dark-Circled/folder.svg');
    --icon-radio-tower: url('iconsets/New-Dark-Circled/broadcast-new.svg');
    --icon-cd: url('iconsets/New-Dark-Circled/cd_case.svg');
    --icon-resize-horizontal: url('iconsets/New-Dark-Circled/resize.svg');
    --icon-angle-double-left: url('iconsets/New-Dark-Circled/arrow-left-double.svg');
    --icon-angle-double-right: url('iconsets/New-Dark-Circled/arrow-right-double.svg');
    --icon-menu: url('iconsets/New-Dark-Circled/pushbutton.svg');
    --icon-versions: url('iconsets/New-Dark-Circled/history.svg');
    --icon-left-circled: url('iconsets/New-Dark-Circled/backbutton.svg');
    --icon-right-circled: url('iconsets/New-Dark-Circled/forwardbutton.svg');
    --icon-cog-alt: url('iconsets/New-Dark-Circled/preferences.svg');
    --icon-trash: url('iconsets/New-Dark-Circled/edit-clear-list.svg');
    --icon-wifi: url('iconsets/New-Dark-Circled/smartradio.svg');
    --icon-doc-text: url('iconsets/New-Dark-Circled/playlist.svg');
    --icon-floppy: url('iconsets/New-Dark-Circled/document-save.svg');
    --icon-cancel-circled: url('iconsets/New-Dark-Circled/edit-delete.svg');
    --icon-plus: url('iconsets/New-Dark-Circled/add.svg');
    --icon-alarm: url('iconsets/New-Dark-Circled/alarmclock_false.svg');
    --icon-alarm-on: url('iconsets/New-Dark-Circled/alarmclock_true.svg');
    --icon-sleep: url('iconsets/New-Dark-Circled/sleep.svg');
    --icon-library: url('iconsets/New-Dark-Circled/file.svg');
    --icon-lastfm-1: url('iconsets/New-Dark-Circled/lastfm.svg');
    --icon-wikipedia: url('iconsets/New-Dark-Circled/wikipedia-logo.svg');
    --icon-musicbrainz: url('iconsets/New-Dark-Circled/musicbrainz_logo.svg');
    --icon-discogs: url('iconsets/New-Dark-Circled/discogs-logo.svg');
    --icon-doc-text-1: url('iconsets/New-Dark-Circled/lyrics.svg');
    --icon-soundcloud-circled: url('iconsets/New-Dark-Circled/soundcloud-logo.svg');
    --icon-youtube-circled: url('iconsets/New-Dark-Circled/youtube-logo.svg');
    --icon-ytmusic-circled: url('iconsets/New-Dark-Circled/gmusic-logo.svg');
    --icon-spotify-circled: url('iconsets/New-Dark-Circled/spotify-logo.svg');
    --icon-qobuz-circled: url('iconsets/New-Dark-Circled/qobuz-logo.svg');
    --icon-vkontakte-circled: url('iconsets/New-Dark-Circled/vkontakte-logo.svg');
    --icon-podcast-circled: url('iconsets/New-Dark-Circled/podcast-logo.svg');
    --icon-audiobook: url('iconsets/New-Dark-Circled/audiobook.svg');
    --icon-internetarchive-circled: url('iconsets/New-Dark-Circled/internetarchive-logo.svg');
    --icon-increase: url('iconsets/New-Dark-Circled/arrow-increase.svg');
    --icon-decrease: url('iconsets/New-Dark-Circled/arrow-decrease.svg');
    --icon-attention-1: url('iconsets/New-Dark-Circled/dialog-error.svg');
    --icon-info-circled: url('iconsets/New-Dark-Circled/dialog-information.svg');
    --icon-download: url('iconsets/New-Dark-Circled/download-icon.svg');
    --icon-sun: url('iconsets/New-Dark-Circled/icon-new.svg');
    --icon-headphones: url('iconsets/New-Dark-Circled/headphones.svg');
    --icon-unlistened: url('iconsets/New-Dark-Circled/headphones.svg');
    --icon-block: url('iconsets/New-Dark-Circled/lastfm-ban.svg');
    --icon-heart: url('iconsets/New-Dark-Circled/lastfm-love.svg');
    --icon-heart-broken: url('iconsets/New-Dark-Circled/lastfm-unlove.svg');
    --icon-refresh: url('iconsets/New-Dark-Circled/refresh.svg');
    --icon-tunein: url('newimages/tunein-logo.svg');
    --icon-no-response-playbutton: url('iconsets/New-Dark-Circled/media-playback-start.svg');
    --icon-tags: url('iconsets/New-Dark-Circled/tag.svg');
    --icon-volume-up: url('iconsets/New-Dark-Circled/volume.svg');
    --icon-toggle-open: url('iconsets/New-Dark-Circled/toggle-open.svg');
    --icon-toggle-closed: url('iconsets/New-Dark-Circled/toggle-closed.svg');
    --icon-spin6: url('iconsets/New-Dark-Circled/spinner.svg');
    --icon-output: url('iconsets/New-Dark-Circled/output.svg');
    --icon-output-mute: url('iconsets/New-Dark-Circled/output_mute.svg');
    --icon-sliders: url('iconsets/New-Dark-Circled/sliders.svg');
    --icon-0-stars: url('iconsets/New-Dark-Circled/0stars.svg');
    --icon-1-stars: url('iconsets/New-Dark-Circled/1stars.svg');
    --icon-2-stars: url('iconsets/New-Dark-Circled/2stars.svg');
    --icon-3-stars: url('iconsets/New-Dark-Circled/3stars.svg');
    --icon-4-stars: url('iconsets/New-Dark-Circled/4stars.svg');
    --icon-5-stars: url('iconsets/New-Dark-Circled/5stars.svg');
    --icon-single-star: url('iconsets/New-Dark-Circled/singlestar.svg');
    --icon-ratandtag: url('iconsets/New-Dark-Circled/ratandtag.svg');
    --icon-ratortag: url('iconsets/New-Dark-Circled/ratortag.svg');
    --icon-toggle-on: url('iconsets/New-Dark-Circled/togglebutton-new2-on.svg');
    --icon-toggle-off: url('iconsets/New-Dark-Circled/togglebutton-new2-off.svg');

    --icon-random-flow-on: url('iconsets/New-Dark-Circled/shuffle.svg');
    --icon-random-flow-off: url('iconsets/New-Dark-Circled/shuffle_off.svg');
    --icon-crossfade-flow-on: url('iconsets/New-Dark-Circled/crossfade.svg');
    --icon-crossfade-flow-off: url('iconsets/New-Dark-Circled/crossfade_off.svg');
    --icon-repeat-flow-on: url('iconsets/New-Dark-Circled/refresh.svg');
    --icon-repeat-flow-off: url('iconsets/New-Dark-Circled/refresh_off.svg');
    --icon-consume-flow-on: url('iconsets/New-Dark-Circled/consume.svg');
    --icon-consume-flow-off: url('iconsets/New-Dark-Circled/consume_off.svg');
    --icon-interrupt: url('iconsets/New-Dark-Circled/interrupt.svg');

    --icon-allrandom: url('iconsets/New-Dark-Circled/shuffle.svg');
    --icon-neverplayed: url('iconsets/New-Dark-Circled/neverheard.svg');
    --icon-recentlyplayed: url('iconsets/New-Dark-Circled/calendar.svg');
    --icon-artist: url('iconsets/New-Dark-Circled/artist-icon.svg');
    --icon-mp3-audio: url('iconsets/New-Dark-Circled/mp3-audio.svg');
    --icon-aac-audio: url('iconsets/New-Dark-Circled/aac-audio.svg');
    --icon-flac-audio: url('iconsets/New-Dark-Circled/flac-audio.svg');
    --icon-wma-audio: url('iconsets/New-Dark-Circled/wma-audio.svg');
    --icon-ogg-audio: url('iconsets/New-Dark-Circled/ogg-audio.svg');
    --icon-explicit: url('iconsets/New-Dark-Circled/parental-advisory.svg');
    --icon-expand-up: url('iconsets/New-Dark-Circled/expand-up.svg');
    --icon-rss: url('iconsets/New-Dark-Circled/rss.svg');
    --icon-tick: url('iconsets/New-Dark-Circled/tick.svg');
    --icon-video: url('iconsets/New-Dark-Circled/movie-1.svg');
    --icon-bbc-logo: url('iconsets/New-Dark-Circled/bbc-logo.svg');
    --icon-imdb-logo: url('iconsets/New-Dark-Circled/imdb-logo.svg');
    --icon-facebook-logo: url('iconsets/New-Dark-Circled/facebook-logo.svg');
    --icon-twitter-logo: url('iconsets/New-Dark-Circled/twitter-logo.svg');
    --icon-www: url('iconsets/New-Dark-Circled/world-wide-web.svg');
    --icon-allmusic: url('iconsets/New-Dark-Circled/allmusic-logo.svg');
    --icon-updown: url('iconsets/New-Dark-Circled/arrow-updown.svg');
    --icon-bookmark: url('iconsets/New-Dark-Circled/bookmark.svg');
    --icon-padlock:  url('iconsets/New-Dark-Circled/padlock.svg');
    --icon-padlock-open: url('iconsets/New-Dark-Circled/padlock_open.svg');
    --icon-instagram: url('iconsets/New-Dark-Circled/instagram.svg');
    --icon-rewind: url('iconsets/New-Dark-Circled/rewind.svg');
    --icon-ffwd: url('iconsets/New-Dark-Circled/ffwd.svg');
}