/*version: 0.0.2.0*/
@font-face {
font-family: "Mp3Player";
src: url("/PrivatePlayer.ttf");
}
:root {
	--color1: black;	/*Default background*/
	--color2: #6666C0;	/*Text*/
	--color3: #111120;	/*Colored background*/
	--color4: #222240;	/*Buttons*/
	--color5: #333360;	/*Button borders and button highlight*/
	--color7: #222240;	/*progress bar background*/
	--color8: #333360;	/*Progress bar fill color script takes it from div#dummy*/
	--color9: #1A1A30;
	color: var(--color2);
	font-family: sans-serif;
	overflow: hidden;
	scrollbar-color: var(--color4) var(--color3);
	background-color: var(--color1);
}

* {
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.popupCheckbox{
	font-family: 'Mp3Player';
	font-weight:normal;
	font-style:normal;
}
.symbols {
	font-family: 'Mp3Player';
	font-weight:normal;
	font-style:normal;
}
.button, .radioButton{
	background-color: var(--color4);
	border-style: outset;
	border-width: 1px;
	border-color: var(--color5);
	margin: 1px;
	align-content: center;
}

.button:active, .button.active, .radioButton:active, .radioButton.active{
	border-style: inset;
	transform: translateY(1px);
	background-color: var(--color5);
}

.button h1 {
	flex-grow: 1;
}
body, #main {
	position: absolute;
	top: 0;
	left: 0;
	height: 95vh;
	width: 100vw;
	padding: 0;
	margin: 0;
}

body {
	z-index: 1;
}

#main {
	z-index: 2;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5 {
	padding: 0;
	margin: 0;
	text-align: center;
	color: lightgreen;
}

	.playlistArt {
	border-style: outset;
	border-width: 1px;
	border-color: var(--color5);
	margin: 1px;
	}

@media screen and (orientation: landscape) {
	.playlistArt {
		max-width: 15vh;
		max-height: 15vh;
	}
}

@media screen and (orientation: portrait) {
	.playlistArt {
		max-width: 13vw;
		max-height: 13vw;
	}
}

.pages {
	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	scrollbar-width: none;  /* Firefox only*/
	overscroll-behavior: none;
	display: flex;
	flex-grow: 1;
}

section {
	min-width: 100vw;
	scroll-snap-align: center;
	overflow: hidden;
}

.listHeaders, .popupCancelOkButtons{
	display: flex;
	border-style: solid;
	border-width: 1px;
	border-color: var(--color4);
	margin: 0 1px 1px 1px;
	background-color: var(--color3);
}

.listHeaders > div, .popupCancelOkButtons > h3{
	flex-grow: 1;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#playlistContent, #selectionContent {
	overflow-y: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;  /* Firefox */
	overflow-x: hidden;
	flex-grow: 1;
}

.playlistItems {
	z-index: 1;
	margin: 1px;
	border-style: solid;
	border-width: 2px;
	border-color: var(--color4);
	scroll-snap-align: start;
	left: 0;
	position: relative;
	display: flex;
}

input:focus, select:focus {
    outline: none;
}

#playlistCheckAll {
	padding:0 2px 0 2px;
	width: 20px;
	height: 84px;
}
 
#playlistCheckAll > h1{
	margin: 6px auto auto auto;
}
 
.headerText{
	height: 22px;
	border-style: none solid solid solid;
	border-width: 1px;
	border-color: var(--color4);
	margin: 0 1px 1px 1px;
	background: var(--color1)
}

.headerControls {
	margin: 0 1px 0 1px;
	background-color: var(--color3);
	display: flex;
}

.headerButton {
	height: 60px;
	flex-grow: 1;
}

#saveSelect {
	border-style: none;
}

#searchInputs {
	height: 62px;
	display: flex;
	flex-direction: column;
	margin-left: 1px;
	flex-grow: 1;
}

#searchSelectButtons {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

#searchSelectButtons label {
	flex-grow: 1;
}


#searchFilter {
	padding: 0;
	margin: 0;
	background-color: var(--color4);
	color: var(--color2);
	border-width: 1px;
	border-color: var(--color5);
	height: 28px;
	width: calc(100% - 2px);
}

#addToTree {
	flex-grow: 2;
}

#searchContent {
	overflow-y: auto;
	scroll-snap-type: x mandatory;
	overflow-x: hidden;
}

.searchItems {
	z-index: 1;
	padding: 5px;
	margin: 1px;
	background-color: var(--color3);
	border-style: solid;
	border-width: 2px;
	border-color: var(--color4);
	scroll-snap-align: start;
	left: 0;
	position: relative;
}

.treeArtists, .treeAlbums, .treeTitles, .treeTags {
	display: flex;
	flex-direction: row;
	padding: 0;
	position: relative;
}

#selectionContent{
	padding: 0 2px 0 2px;
}

.treeArtists {
	background-color: var(--color9);
}

.treeArtistText, .treeAlbumText, .treeTitleText {
	flex-grow: 1;
	margin: 1px 0 1px 0;
	padding: 8px;
	border-style: outset;
	border-width: 2px;
	border-color: var(--color4);


}

.treeArtistText{
	font-weight: bold;
}

.treeTitleText {
	border-style: solid;
	border-width: 2px 0 2px 0;
	border-color: var(--color4);

}

.treeTitleContainer {
	position: relative;
}

.treeAlbums {
	background-color: var(--color3);
}

.treeTitles {
	background-color: var(--color1);
}

.treeTags {
	background-color: lightgrey;
	color: black;
}

.treeFoldButton, .treePlay {
	margin: 0;
	padding:0 2px 0 2px;
	width: 20px;
	border-width: 0;
}

.treeFoldAlbum {
	padding-left: 15px;
}

.treeFoldTitle {
	padding-left: 28px;
}

.genreItems {
	display: flex;
	flex-direction: row;
}

.genreItem {
	flex-grow: 1;
}

.goLeft, .goRight {
    font-size: 35px;
    max-width: 20px;
	height: 83.5px;
	padding-left: 4px;
}

.playlistText{
	padding-left: 5px;
	display: inline-block;
	background-color: var(--color3);
	flex-grow: 1;
}

.playlistItems > .checkButton {
	padding:0 2px 0 2px;
	width: 20px;
}

.playlistItems > .checkButton > h1{
	margin: 4px auto auto auto;
}
#popup {
	display: block;
	position: absolute;
	top: 5vh;
	left: 5vw;
	width: 90vw;
	z-index: 2;
	background-color: var(--color4);
	border-style: outset;
	border-width: 1px;
	border-color: var(--color5);
	align-content: center;
}
#popupBody {
	overflow: auto;
	max-height: 75vh;
	color: var(--color3);
	background-color: var(--color2);
	border-style: inset;
	border-width: 2px;
	border-color: var(--color5);
	margin: 5px;
}
#popupBody > p {
	border-style: inset;
	border-width: 2px;
	border-color: var(--color5);
	padding: 10px;
	margin: 3px;
}
.disabled {
	color: #555555;
}
.modified, .songRemoved {
	color: pink;
}