/* css style sheet for Music Library */

:root {
  --panel-height: 100vh;
  --vwidth: 100vw;
}

/* element selectors (element type) */
* {
  box-sizing: border-box;
  border-radius: .25rem;
  font-family: Arial, Verdana, Geneva, Tahoma, sans-serif;    
  /* -webkit-appearance: none; */
  margin-block-start: .2em;
  margin-block-end: .2em;
  color: dodgerblue;
}

audio {
  width: 100%;
}

body {
  background-color: #edf8fd;
  /* height: 100vh; */
  margin: 0;  
}

.disabled {
  color: grey;
  pointer-events: none;
}

#tablist {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.selected {

  background-color: #fff;

}


.selector {
  text-align: center;
  background-color: #fff;
  margin: 0 1em;
}

.slider {
  width: 100%
}

.field.button {
  background-color:dodgerblue;
  color: white;
}

button {
  display: inline;
  background-color: dodgerblue;
  color: white;
  border:none;
}

h4 {
  margin-block-start: .25em;
  margin-block-end: .25em;
}

.active {
  border: 1px solid #ffa5a5;
  background: #ffe7e7;
}

.hint {
  border: 1px solid #ffc49a;
  background: #feffb4;  
}

.hidden {
  display: none;
}


label {
  display: block;
  margin: 0;
  font-weight: bold;
}

/* class selectors (.class) */

.context:hover {
  text-decoration: underline;
}

.context-menu {
  display: none;
  position: absolute;
  background-color: lightgray;
  padding: 5px;
}

.context-menu-active {
  display: block;
}

.center {
  text-align: center;
}

.debug {
  visibility: hidden;
  background-color: pink;
}

.dir{  
  background-color: lightblue;
  color: black;  
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100px;  
  text-align: left;  
}

.dir > div:hover {
  color: #fff;
  background-color: #0066aa;
}

.faultCase {
  color: yellow;
  background-color: red;
}

.faultFormat {
  color: yellow;
  background-color: red;
  font-style: italic;
}

.add {
  /* display: inline-block; */
  overflow: hidden;
  width: 20px;
  height: 20px;
  margin: auto;
  /* padding: 5px 5px 0px 5px; */
  text-align: center;
  background-color: white;
  color: dodgerblue;
}

.field {
  /* display: inline-block; */
  overflow: hidden;
  margin: 5px;
  padding: 0px 5px 0px 5px;
  background-color: white;
  color: dodgerblue;
  text-align: center; 
}

.field .search {
  text-align: center;
  vertical-align: middle;
}

.form form {
  background-color: lightblue;
  padding: .25rem;
}

h5 > .field {
  background-color: dodgerblue;
  color: blue;
}

.play {
  color:burlywood;
  background-color:blanchedalmond;
}

.file {
  width: 200px;
}

.view {
  background-color: aliceblue;
  overflow: hidden;
  padding: .5em;
  margin-top: .5em;
}

.inline {
  display: inline;
}

.menu-item {
  display: block;
  padding: 4px 12px;
  color: #0066aa;
  text-decoration: none;
}

.menu-item:hover {
  color: #fff;
  background-color: #0066aa;
}

.pane {
  background-color: lightblue;
  /* overflow-y: hidden; */
  overflow-y: scroll;
  overflow-x: hidden;
  height: 160px;
  margin-top: .75em;     
  padding: .25em;  
}

.list-panel {
  background-color:burlywood;
  height: 160px;      
  overflow-y: scroll;
  margin-top: .75em;     
  padding: .25em;  
}

#field-names + .list-panel {
  background-color: burlywood;
  height: 160px;      
  overflow-y: scroll;
  margin-block-start: 0;  
}

#field-names {
  margin-block-start: 0;
  margin-block-end: 0;
  padding: .25em;
}

.menu-main {
  position: absolute;
  background-color: dodgerblue;   
  color: beige;
  margin: 0;    
  padding: 0 0 0 .25rem ;
  display: inline-block;
  /* float: left; */
  font-size: 1.4em;     
}

.menu-main:hover, .menu-right:hover{
  cursor: pointer;
}

.nav {  
  background-color: dodgerblue;
  color: white;
  text-align: center;
  margin: 0 1em;
}

nav ul {
  position: fixed;
  background-color: #1e90ffdd;
  width:fit-content;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  color: white;
  font-size: 1.2rem;
  text-align: left;
  margin: 1rem .5rem 1rem;
  width:auto;    
}

nav ul li a {
  text-decoration: none;
  color: inherit;    
}

nav:hover ul li {
  display: block;
  color: beige;    
}

nav ul li:hover {
  background-color: white;
  color: dodgerblue;
}

.playlist {
  margin: .25em;
}

.popup {
  margin: 5px;
  /* outline: 5px solid blue; */
  border: 1px solid white;      
  display: none;
  position: absolute;
  z-index: 9;
  background-color: blue;
  color: white;  
  padding: 10px;
  min-height: 100px;
  text-align: center;
  box-shadow: 0 0 0 .25em blue;
}

.popup-active {  
  display: block;
}

.playQueue > .record {
  background-color: black;
  width: 100%;  
}



.downloading {
  width: 0%;
  background-color: dodgerblue;  
  white-space: nowrap;
}

.record {
  background-color: dodgerblue;
  color: white;
}

.record > .remove {
  color: white;
}

.record.playing {
  background-color: lightcyan;
  color: dodgerblue;
}

.record.playing.streaming {
  background-color:deepskyblue;
  color: dodgerblue;
}

/* .record.playing > .remove {
  color: dodgerblue;
} */

.record.published {
  background-color: dodgerblue;
}

/* selected doesn't mater in the mobile app */
/* .record.published.selected {
  background-color: #2ace97;
} */

.rec_label {  
  display: inline-block;
  overflow: hidden;
  margin: 5px;
  padding: 0px 5px 0px 5px;
  background-color: aliceblue;
}

.right {
  float: right;
}

.search-result {
  display: grid;
  grid-template-columns: 10% 90%;
}

.selected {
  background-color: #3399ff;
}

.select-list{
  margin: 5px;
  outline: 5px solid blue;
  border: 1px solid white;
  padding: 10px;
  height: 100px;
  overflow-y: auto;
}

.selectset:hover {
  background-color: dodgerblue;
}


.filter, .search {  
  width: 100%;    
}


.size {
  width: 60px;  
}

.stats {  
  float: right;
}

.TALB, .TIT2, .title{
  color: white;
  /* margin-top: .25rem;   */  
}

/* .record.playing > .TIT2 {
  color: dodgerblue;
} */

.TPE1, .TCON, .COMM, .genre{
  width: 100px;
}

.TRCK, .TYER .year{
  width: 40px;
}

.loader {
  background: url('spinner.gif') no-repeat center center;
}


.welcome {
  font-size: smaller;
  text-align: center;
  background-color: lightblue;
}

/* id selectors (#id) */

#app-title {
  background-color: dodgerblue;
  color: white;
  font-style: italic;
  border-radius: 0;
}

#app-container {
  border-radius: 0;
  height: 100vh;
  overflow-y: hidden;
  /* outline: 1px solid red; */
  background-color: dodgerblue;
  margin: 0;
}

.remove {
  float: right;
  margin: 0;
  padding: 0px 5px 0px 5px;  
}

#fieldNames {
  margin-bottom: 0;
}

#input, #selectset {
  display: block;
  position: relative;
  margin: 10px 0px 15px;  
}

input[type=radio] {
  display: inline;
  /* float: left; */
  clear: none;
  margin: 2px;
}

#ok {
  margin-right: 10px;
  float: right;
  width: 56px;
}

.radio {
  text-align: center;
}

.radio label {
  display: inline;
}

#radio-group {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

#title-header {
  margin-bottom: 0;
}

#controls {
  display:grid;
  grid-template-columns: 25% 25% 25% 25%;
}

#controls > span {
text-align:center;
}

/* 
#playlistframe {
  max-height: 10%;  
}

#playlistset {
  max-height: 10%;
} */