html { height: 99.7%; }
body { height: 99.7%;
       background-color: #333;
       border: medium solid #556;
       margin: 0;
     }

/* MENU BAR ------------------------------------------------------------*/
#menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: -2;
    height: 99.5%;
    width: 25%;
    background-color: #333;
    z-index: 5;
}
#menuopen {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #aab;
    border-right: medium solid #556;
    border-bottom: medium solid #556;
    padding: 0.3em;
    cursor: pointer;
    font-weight: bold;
}
#menuclose {
    position: absolute;
    top: 0;
    left: 99%;
    background-color: #aab;
    border-bottom: medium solid #556;
    border-right: medium solid #556;
    padding: 0.3em;
    cursor: pointer;
    font-weight: bold;
}
#facets {
    background-color: #aab;
    border-right: medium solid #556;
    height: 46.5%;
    font-family: "Lato", sans-serif;
}
#facets input, #facets label { cursor: pointer; }
#facets .title { height: 6%; }
#facetlist {height: 92.75%; overflow-y: scroll;}

#artists {
    background-color: #aab;
    border-top: medium solid #556;
    border-right: medium solid #556;
    height: 46.5%;
    font-family: "Lato", sans-serif;
}
#artists input, #artists label { cursor: pointer; }
#artists .title { height: 6%; }
#artists .listfilter { height: 5%; }
#artistlist {height: 86%; overflow-y: scroll;}

#filter { font-family: "Inconsolata", monospace;
          background-color: #eee;
          border: thin solid #556;
          border-radius: 0.25em;
        }

.listfilter { padding: .2em;
              background-color: #cce;
              font-family: "Barlow Semi Condensed";
              font-weight: 400;
              text-align: right;
            }

#search, #utils {
    background-color: #aab;
    border-right: medium solid #556;
    height: 2.5%;
    font-family: "Barlow Semi Condensed";
    font-weight: 400;
    font-size: large;
    padding: 0.2em;
    border-top: medium solid #556;
}
#search button { cursor: pointer; }
#utils button { cursor: pointer; }

/* MAIN CONTAINER ------------------------------------------------------------*/
/*#container { height: 98vh; }*/

#main {
      }

#player { font-family: "Barlow Semi Condensed";
          font-weight: 400;
          font-size: x-large;
          background-color: #bbd;
          padding: 0.15em;
          min-height: 5.5em;
          border-bottom: medium solid #556;
          padding-top: 0.3em;
        }
#player table { min-height: 5.25em;
                margin-top: 5px;
              }


/* TRACKLIST ------------------------------------------------------------*/

#tracklist {
    background-color: #556;
    font-family: "Lato", sans-serif;
    height: 85vh;
    overflow: scroll;
}

#maintable { width: 100%;
             margin: 0;
             border-spacing: 0 0;
           }

.title { font-family: "Barlow Semi Condensed";
         font-weight: 400;
         font-size: x-large;
         background-color: #bbd;
         padding: 0.15em;
       }

.track { color: #000;
         padding-top: 0.5em;
         margin-bottom: 0.5em;
       }

.track td { background-color: #aab;
            padding: 0.2em;
            border-top: medium solid #556;
            vertical-align: top;
          }

.trackf td { background-color: #aab;
             padding: 0.3em;
             font-size: small;
             border-bottom: thick solid #556;
           }

.track2 { color: #000;
         padding-top: 0.5em;
         margin-bottom: 0.5em;
       }

.track2 td { background-color: #ccd;
            padding: 0.2em;
            border-top: medium solid #556;
            vertical-align: top;
          }

.trackf2 td { background-color: #ccd;
             padding: 0.3em;
             font-size: small;
             border-bottom: thick solid #556;
           }

.flink { cursor: pointer; }
}

/* PLAYER ------------------------------------------------------------*/

h2 { margin-top: 0.2em; margin-right: 0.7em; margin-bottom: 0.2em; font-weight: 400; }

#buttonbox { background-color: #444;
             padding-top: 0;
             padding-bottom: 0.3em;
             padding-left: 0.3em;
             padding-right: 0.3em;
             margin-right: 0.3em;
             border: solid thin #556;
             border-radius: 0.25em;
           }
#buttonbox button { cursor: pointer; }

#current { border-left: solid medium #556;
           margin-left: 1em;
           padding-left: 1em;
           vertical-align: top;
           width: 100%;
         }
#curtitle { }
#curaay { font-size: large;
          margin-bottom: 0;
          padding-bottom: 0;
        }
#curfacets { font-size: large;
             margin-bottom: 0;
             padding-bottom: 0;
           }
#curnum { font-size: large;
          margin-bottom: 0;
          padding-bottom: 0;
        }

#cover { object-fit: scale-down;
         max-height: 5em;
         width: auto;
       }
#coverbig { object-fit: scale-down;
            max-height: 600px;
            width: auto;
            border: solid thin #556;
          }
#coverbigdiv { height: 604px;
               width: 604px;
               z-order: 5;
               position: absolute;
               top: 50%;
               left: 50%;
               margin-top: -302px;
               margin-left: -302px;
               justify-content: center;
               align-items: center;
               text-align: center;
               display: none;
             }

#fdata { margin-left: 2em; }

button { font-family: "Lato", sans-serif;
         background-color: #bbb;
         box-shadow: none;
         border: solid thin #556;
         border-radius: 0.4em;
       }

#vol { accent-color: #778;
       height: 0.7em;
       margin-bottom: 0;
       margin-right: 0.5em;
     }
#vol::-webkit-slider-thumb, #vol::-moz-range-thumb { cursor: pointer; }

.mono { font-family: "Inconsolata", monospace; background-color: #aac; padding: 0.2em; }
.monotime { font-family: "Inconsolata", monospace; }

/* UTILITIES ------------------------------------------------------------*/

.help { z-index: 5;
        font-family: "Lato", sans-serif;
        font-size: large;
        display: none;
        position: fixed;
        bottom: 0px;
        right: 0px;
        max-width: 50%;
        background-color: #ccd;
        border: solid thick #778;
        padding: 0.2em;
      }
.help h3 { font-family: "Barlow Semi Condensed";
           font-weight: 400;
           margin-top: 0.5em;
         }
.help .def { border-left: solid thin #556; padding-left: 0.2em;}
#login { bottom: 45%;
         right: 40%;
       }

.alertify-notifier.ajs-right .ajs-message.ajs-visible { background-color: #bbc;
                                                        border: solid medium #556;
                                                        bottom: 0.5em;
                                                        font-family: "Lato", sans-serif;
                                                      }

.alertify .ajs-dialog { background-color: #bbc;
              border: solid medium #556;
              bottom: 0.5em;
              font-family: "Lato", sans-serif;
            }
.alertify .ajs-header { background-color: #bbc; border: 0; }
.alertify .ajs-body { background-color: #bbc; }
.alertify .ajs-footer { background-color: #bbc; border: 0; }
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok { background-color: #99a; color: #000;}