:root {
	--color-bg-page: #444444;
	--color-bg-container: #CCCCCC;
	--color-bg-dragging: #888888;
	--color-bg-form: #222222;
	--color-border-container: #666666;
	--color-border-row: #666666;
	--color-font-input-text: #777777;
	--color-font-page: #CCCCCC;
}


* {
	box-sizing: border-box;
}

body {
	  background-color: var(--color-bg-page);
	  margin: 0;
	  padding: 0;
}

button {
}

button.playControl {
	height: 36px;
	width: 72px;
	font-size: 24px;
}

span {
	margin: 0 4px 0 0;
}

summary {
	width: 100%;
	display: inline;
}

#bodyContainer {
	color: var(--color-font-page);
	display: flex;
	font-family: Arial, Helvetica, sans-serif;
	flex-direction: row;
	flex: 1;
	height: 100vh;
}


/* ====================================================================== */
/* ====================================================================== */
/* ====================================================================== */

#dockedPlayer {
    display: flex;
    justify-content: center;
    /* flex-grow: 1; */
    aspect-ratio: 1.55; /* 6 / 4; */
}

#dockedPlayerFrame {
    /* aspect-ratio: 1.05; */
    width: 100%;
    /* max-height: min(50%, 600px); */
    /* max-width: 630px; */
    /* min-height: 300px; */
}

.login-limiter {
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; */
    /* background: #f8fafc; */
	color: var(--color-font-page);
	font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* line-height: 1.6; */
}

.login-container {
    width: 100%;
    max-width: 400px;
}

.login-card {
    background-color: rgba(34, 34, 34, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.login-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h2 {
    /* color: #1a202c; */
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.login-header p {
    /* color: #718096; */
    /* font-size: 14px; */
    font-weight: 400;
}


.form-group {
    margin-bottom: 20px;
    position: relative;
}

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-wrapper input {
    /* background: #ffffff; */
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 12px 16px;
    /* color: #1a202c; */
    font-size: 16px;
    font-weight: 400;
    transition: all 0.2s ease;
    width: 100%;
    outline: none;
    margin-bottom: 20px;
}

.input-wrapper input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-wrapper input:focus + label,
.input-wrapper input:valid + label {
    transform: translateY(-32px) scale(0.85);
    /* color: #3b82f6; */
    font-weight: 500;
}

.input-wrapper label {
    position: absolute;
    left: 16px;
    top: 12px;
    /* color: #718096; */
    font-size: 16px;
    font-weight: 400;
    transition: all 0.2s ease;
    pointer-events: none;
    transform-origin: left top;
    /* background: #ffffff; */
    padding: 0 4px;
}


.login-btn {
    width: 100%;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 24px;
}

.login-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}

.login-btn:active {
    transform: translateY(0);
}

.login-logo-img {
    /*
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0 auto;
    margin-bottom: 0px;
  margin-bottom: 20px;
  */
  display: flex;
  justify-content: center;
}

.remember-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 1lh;
}

input#remember {
    cursor: pointer;
}

.checkbox-label {
    /* color: #4a5568; */
    /* font-size: 14px; */
    cursor: pointer;
    /* user-select: none; */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 8px; */
}


.btn-text {
    transition: opacity 0.2s ease;
}



.mediaArtist {
	grid-area: artist;
	font-size: 80%;
	filter: brightness(80%);
	overflow-x: hidden;
	white-space: nowrap;
	margin-left: 5px;
}

.mediaInfo {
	flex: 1;
	
	display: grid;
    grid-row-gap: 1px;
    grid-column-gap: 0;
	grid-template-areas:	"thumb title  btn1 btn2 btn3"
							"thumb artist btn1 btn2 btn3";
	grid-template-rows:    50% 50%;
	grid-template-columns: 60px 1fr 1.5em 1.5em 1.8em;
	cursor: grab;
}

#mediaRowDragging {
	opacity: 0.8;
	background-color: var(--color-bg-dragging);
}

.mediaRowIdBtn {
    display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	font-size: 80%;
	filter: brightness(80%);
	background-color: transparent;
    color: var(--color-font-page);
    margin: 5px 5px;
    border: 1px solid var(--color-border-row);
    cursor: pointer;
}

.mediaPlayStop {
    background-color: rgba(255, 0, 0, 0.5);
}

.mediaThumbnail {
	grid-area: thumb;
}

.mediaTitle {
	/*flex: 1;*/
	grid-area: title;
	padding-top: 2px;
	overflow-x: hidden;
	white-space: nowrap;
	margin-left: 5px;
}

#playlistContainer {
	border: 1px solid var(--color-border-container);
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 2px;
	padding: 3px;
}

#playlistHeader {
	/* border: 1px solid var(--color-border-container); */
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
}

#playlistHeader h2 {
	flex: 9;
}

.playlistRow {
	border: 1px solid var(--color-border-row);
	display: flex;
	flex-direction: row;
	/* flex: 1; */
	max-height: 47px;
}

.playlistRowId {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	font-size: 80%;
	filter: brightness(80%);
}

#playlistSelect {
	font-size: 150%;
	color: var(--color-color-font-page);
	background-color: var(--color-bg-page);
	padding: 0.2lh;
}

#playlistSelect:focus {
	outline: 0;
}

#playlistShuffleButton {
	flex: 0;
	align-self: center;
	background: none;
	border: none;
	border:solid 2px var(--color-font-page);
	color: var(--color-font-page);
	border-radius: 0.2em;
	height: 2em;
	filter: brightness(80%);
	margin: 0 0.5em 0 0;
	
}

#playlistShuffleButton:focus {
	outline: 0;
}

#playlistShuffleButton:hover {
	filter: brightness(95%);
}

#playlistToolbar {
	/*border: 1px solid #5E4F18;*/
	display: flex;
	flex-direction: row;
	margin: 5px;
}


#playlistTracks {
	border: 1px solid var(--color-border-container);
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: scroll;
}

#playersLaunchButton {
	flex: 0;
	align-self: center;
	background: none;
	border: none;
	border:solid 2px var(--color-font-page);
	color: var(--color-font-page);
	border-radius: 0.2em;
	height: 2em;
	filter: brightness(80%);
	margin: 0 0.5em 0 0;
	
}

#playersLaunchButton:focus {
	outline: 0;
}

#playersLaunchButton:hover {
	filter: brightness(95%);
}

.plcButton {
	cursor: pointer;
	grid-area: btn1;
	width: 1.5em;
	border: none;
	padding: 0;
	filter: brightness(80%);
	height: 50%;
    align-self: center;
}

.plcButton:nth-of-type(2){
	grid-area: btn2;
}

.plcButton:nth-of-type(3){
	grid-area: btn3;
	margin-left: 5px;
}

.plcButton:nth-of-type(4){
	grid-area: btn4;
}

.plcButton:nth-of-type(5){
	grid-area: btn5;
}

#ploDeleteAfterPlay{
	display: flex;
    align-content: center;
    flex-wrap: wrap;
}

#ploDeleteAfterPlayCheckbox{
}

.pltButton {
	flex: 1;
	font-size: x-large;
	margin: 0.2em;
	padding: 0;
	border: none;
	filter: brightness(80%);
}

.pltButton:hover {
	filter: brightness(95%);
}

/* ====================================================================== */
/* ====================================================================== */
/* ====================================================================== */

#plTempTrackAddDropdownActivator{
	background-color: var(--color-bg-page);
	border: 1px solid var(--color-border-container);
	border-radius: 2px;
	color: #888888;
	cursor: pointer;
	display: list-item;
	padding: 1px 0px 1px 3px;
	/*width: calc(100% - 5px);*/
	margin-bottom: 5px;
	margin-top: 2px;
}
details[open] #plTempTrackAddDropdownActivator{
	margin-bottom: 0;
	background-color: var(--color-bg-container);
	border-color: #767676;
	color: #767676;
}

#plTempTrackAddDropdownForm{
	background-color: var(--color-bg-form);
	border: 1px solid var(--color-border-container);
	border-radius: 3px;
	color: var(--color-border-input-text);
	display: grid;
	padding: 14px 14px 14px 14px;
	margin-bottom: 14px;
	grid-template-areas:
    'artist artist'
    'title title'
    'ytid thumb'
	'submit thumb';
}

#plTempTrackAddArtist {
	grid-area: artist;
}

#plTempTrackAddArtist:focus {
  outline: 0;
}

#plTempTrackAddArtist:invalid:required {
	border: 1px solid red;
}

#plTempTrackAddSubmit {
	cursor: pointer;
	grid-area: submit;
	margin: 3px 20% 0px;
}

#plTempTrackAddThumbnail {
	grid-area: thumb;
	margin: 3px 3px;
}

#plTempTrackAddTitle {
	grid-area: title;
}

#plTempTrackAddTitle:focus {
  outline: 0;
}

#plTempTrackAddTitle:invalid:required {
	border: 1px solid red;
}

#plTempTrackAddYtid {
	grid-area: ytid;
	height: 1.6em; 
    overflow: hidden;
}

#plTempTrackAddYtid:focus {
  outline: 0;
}

#plTempTrackAddYtid:invalid:required {
	border: 1px solid red;
}


/* ====================================================================== */
/* ====================================================================== */
/* ====================================================================== */

#trackAddDropdownActivator{
	background-color: var(--color-bg-page);
	border: 1px solid var(--color-border-container);
	border-radius: 2px;
	color: #888888;
	cursor: pointer;
	display: list-item;
	padding: 1px 0px 1px 3px;
	/*width: calc(100% - 5px);*/
	margin-bottom: 5px;
}
details[open] #trackAddDropdownActivator{
	margin-bottom: 0;
	background-color: var(--color-bg-container);
	border-color: #767676;
	color: #767676;
}

#trackAddDropdownForm{
	background-color: var(--color-bg-form);
	border: 1px solid var(--color-border-container);
	border-radius: 3px;
	color: var(--color-border-input-text);
	display: grid;
	padding: 14px 14px 14px 14px;
	margin-bottom: 14px;
	grid-template-areas:
    'artist artist thumb'
    'title  title  thumb'
	'ytid   fora   thumb'
    'rate   rate   rate'
	'rate   rate   rate'
	'submit submit submit';
    grid-template-columns: 1fr 1fr 94px;
}

#trackAddArtist {
	grid-area: artist;
}

#trackAddArtist:focus {
  outline: 0;
}

#trackAddArtist:invalid:required {
	border: 1px solid red;
}

#trackAddForaSelect {
	grid-area: fora;
	background-color: #EAEAEA;
	border: none;
	color: #333333;
    margin-left: 1px;
    margin-right: 1px;
    height: 1.6em;

}

#trackAddForaSelect:invalid {
	border: 1px solid red;
    margin-right: 0px;
}

#trackAddForaSelect > option {
}

#trackAddForaSelect:focus {
  outline: 0;
}

#trackAddRating {
	grid-area: rate;
	border: none;
	display: flex;
    flex-wrap: wrap;
	column-gap: 2px;
	margin-bottom: 2px;
}

#trackAddRating > label > input[type=number]{
	text-align: right;
	width: 100%;
}

#trackAddRating > label {
    font-size: 66%;
    color: color: var(--color-border-input-text);
}

.trackAddRatingDefs {
  height: 1lh;
  width: 10em;
  opacity: 50%;
  overflow: hidden;
  margin-left: 2px;
  text-wrap: nowrap;
}

#trackAddSubmit {
	cursor: pointer;
	grid-area: submit;
	margin: 3px 20% 0px;
}

#trackAddThumbnail {
	grid-area: thumb;
	margin: 3px 3px;
    justify-self: right;
}

#trackAddTitle {
	grid-area: title;
}

#trackAddTitle:focus {
  outline: 0;
}

#trackAddTitle:invalid:required {
	border: 1px solid red;
}

#trackAddRatingUserSelect {
	background-color: #EAEAEA;
	border: none;
	color: #333333;
    margin-top: 1px;
    height: 1.45em;
}

#trackAddRatingUserSelect:invalid {
	border: 1px solid red;
}

#trackAddRatingUserSelect:focus {
  outline: 0;
}

#trackAddYtid {
	grid-area: ytid;
	height: 1.6em; 
    overflow: hidden;
}

#trackAddYtid:focus {
  outline: 0;
}

#trackAddYtid:invalid:required {
	border: 1px solid red;
}

.trackEditModalBackground {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 1em; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.trackEditModalWindow {
  background-color: rgba(34,34,34,0.95); /* var(--color-bg-form); */
  margin: auto;
  padding-top: 2px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  border: 1px solid #888;
  width: 80%;
  display: flex;
  flex-direction: column;
}

.trackEditRatingDefs {
    height: 1lh;
    width: 10em;
    overflow: hidden;
    border: 1px solid lightgray;
    margin-left: 2px;
    text-wrap: nowrap;
}

.trackEditSection{
	border: 1px solid var(--color-bg-page);
	border-radius: 4px;
	padding-bottom: 0.5lh;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5lh;
	margin-bottom: 0.5lh;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.5lh;
	display: flex;
	flex-direction: column;
}

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

.trackEditSectionItem > input[class=rating]{
	text-align: right;
	display: inline-block;
    width: 6em;
}

.trackEditSectionItem > input[class=meta]{
	text-align: right;
	display: inline-block;
    width: 12em;
}

.trackEditSectionItem > label{
	display: inline-block;
	width: 8em;
}

.trackEditSectionItem > select[class=meta]{
	/* text-align: right; */
	display: inline-block;
    width: 12em;
}

.trackEditSectionItem > input[class=wideText]{
	/* text-align: right; */
	/* display: inline-block; */
    width: 20em;
}

#trackEditSectionItemForaAndImg {
	display: flex;
    flex-direction: row;
    padding-top: 0.3lh;
}

#trackEditSectionItemForaMenu {
    /* font-family: 'Font Awesome 6 Free'; */
}

#trackEditThumbnail {
    margin-left: 3em;
}

span:has(#trackEditTrackId) {
	font-size: 18px;
    padding-bottom: 4px;
}

#trackEditWindowBtnClose {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: -0.3lh;
  margin-left: auto;
}

#trackEditWindowBtnClose:hover,
#trackEditWindowBtnClose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


#trackEditWindowBtnClose {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}


.trackArtist {
	grid-area: artist;
	font-size: 80%;
	filter: brightness(80%);
	overflow-x: hidden;
	white-space: nowrap;
	margin-left: 5px;
}

.trackInfo {
	flex: 1;
	
	display: grid;
    grid-row-gap: 1px;
    grid-column-gap: 0px;
	grid-template-areas:	"thumb title  rating preview addTo"
							"thumb artist rating preview addTo";
	grid-template-rows:    50% 50%;
	grid-template-columns: 60px 1fr 9em 2em 2em;
	cursor: grab;
}

.trackPlaylistAddTo{
	cursor: pointer;
	grid-area: addTo;
	filter: brightness(80%);
	margin: 0px 2px 2px 2px;
    padding: 0px 1px 0px 0px;
	height: 50%;
    align-self: center;
}

.trackPreview {
	cursor: pointer;
	grid-area: preview;
	filter: brightness(80%);
	margin: 0px 1px 2px 2px;
    color: #600000;
	padding: 0px 0px 0px 0px;
    font-size: 115%;
	height: 50%;
    align-self: center;
}

.trackRating {
	padding: 1px 1px 0px 0px;
	height: 100%;
}

.trackRatingAvg {
	height: 10px;
}

.trackRatingMax {
	height: 10px;
}

.trackRatingMin {
	height: 10px;
}

.trackRatings {
	grid-area: rating;
	font-size: 8px;
	color: var(--color-font-page);
	filter: brightness(80%);
	display: grid;
    grid-row-gap: 0px;
    grid-column-gap: 0px;
	grid-auto-flow: row;
	grid-template-rows:    100%;
	grid-template-columns: 2.5em 2.5em 2.5em 2.5em 2.5em;
	align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
}

.trackRow {
	border: 1px solid var(--color-border-row);
	display: flex;
	flex-direction: row;
	flex: 1;
	max-height: 47px;
}

.trackRowId {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	font-size: 80%;
	filter: brightness(80%);
}

.trackRowIdBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	font-size: 80%;
	filter: brightness(80%);
	background-color: transparent;
    color: var(--color-font-page);
    margin: 5px 5px;
    border: 1px solid var(--color-border-row);
    cursor: pointer;
}

.trackThumbnail {
	grid-area: thumb;
}

.trackTitle {
	grid-area: title;
	padding-top: 2px;
	overflow-x: hidden;
	white-space: nowrap;
	margin-left: 5px;
}

#tracksAll {
	border: 1px solid var(--color-border-container);
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: scroll;
	flex-grow: 1;
}

#tracksContainer {
	border: 1px solid var(--color-border-container);
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 2px;
    padding: 3px;
	position: relative;
}

#tracksFilter {
	flex: 1;
}

#tracksFilter:focus {
  outline: 0;
}

#tracksFilterClearBtn {
	width: 1em;
    height: 1.3em;
    position: relative;
    top: 0.2em;
    left: -1.2em;
	margin-right: -1.2em; /* reclaims space */
    padding: 0px 0px 0px 0px;
	background: none;
	border: none;
    cursor: pointer;
	color: var(--color-font-page);
	filter: brightness(80%);
}

#tracksForaSelect {
    margin-left: 0.1em;
	margin-right: 0.1em;
}


#tracksForaSelect:focus {
  outline: 0;
}

.tracksForaSelectCheckboxInput{
    float: left;
}

.tracksForaSelectCheckboxLabel{
    display: block;
    clear: left;
    /* font-family: 'Font Awesome 6 Free'; */
}

#tracksForaSelectDropdownActivator{
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border-container);
	border-radius: 2px;
	color:  var(--color-font-input-text);
	cursor: pointer;
	display: list-item;
	padding: 1px 0px 1px 3px;
	/* width: calc(100% - 5px); */
}

#tracksForaSelectDropdownDetails{}

#tracksForaSelectDropdownMenu {
	background-color: var(--color-bg-form);
	border: 1px solid var(--color-border-container);
	position:absolute;
    margin-top: 3px;
    margin-left: 3px;
	z-index: 9999;
}



#trackSortDropdownActivator{
	background-color: var(--color-bg-container);
	border: 1px solid var(--color-border-container);
	border-radius: 2px;
	color:  var(--color-font-input-text);
	cursor: pointer;
	display: list-item;
	padding: 1px 0px 1px 3px;
	/* width: calc(100% - 5px); */
}

#trackSortDropdownDetails{}

#trackSortDropdownMenu {
	background-color: var(--color-bg-form);
	border: 1px solid var(--color-border-container);
	position:absolute;
    margin-top: 3px;
    margin-left: 3px;
	z-index: 9999;
	display: block;
}

.trackSortOption{
	background-color: var(--color-bg-form);
	border: 1px solid var(--color-border-container);
	border-radius: 3px;
	cursor: grab;
	padding: 3px 10px;
}

.trackSortOption.dragging{
	filter: brightness(200%);
}

.trackSortOption *.dropNuller {
	pointer-events: none;
}

#trackSortTool {
	margin-left: 0.3em;
	flex: 1;
}


#tracksToolbar {
	display: flex;
	flex-direction: row;
	margin-bottom: 1px;
}

.tsoLabel {
	display: inline-block;
	width: 3.2em;
}

.tsoButton {
	cursor: pointer;
	display: inline-block;
	width: 3.5em;
}