ympd/htdocs/css/mympd.css

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #888;
}

main {
  padding-top: 20px;
}

footer {
  position: absolute;
  bottom: 0;
}

button {
  overflow: hidden;
}

#BrowseBreadrumb {
  overflow: auto;
  white-space: nowrap;
}

#BrowseBreadcrumb > li > a {
  cursor: pointer;
}


.card {
  min-height: 350px;
}

@media only screen and (max-width: 576px) {
  .header-logo {
    display:none !important;
  }
}

.clickable {
  cursor: pointer;
}

.tblnum, .tblaction {
  width: 30px;
}

small {
  color: #aaa;
}

.card-footer-playback {
  padding: 0px;
}

.album-cover {
  background-size: cover;
  background-image: url("/assets/coverimage-loading.png");
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
  width: 240px;
  height: 240px;
  background-color: #eee;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}

.album-desc {
  min-width: 240px;
  float: left;
}

.hide {
  display: none !important;
}

.pull-right {
  float: right !important;
}

.card-toolbar {
  margin-bottom: 10px;
}

.card-toolbar > div, .card-toolbar > form {
  margin-bottom: 5px;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/MaterialIcons-Regular.woff2) format('woff2'),
       url(/assets/MaterialIcons-Regular.woff) format('woff'),
       url(/assets/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;  /* Preferred icon size */
  display:inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: top;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons-left {
  font-size: 1rem;
  margin-left: -1em;
  vertical-align:middle;
}

.material-icons-small {
  font-size: 16px;
}

.material-icons-small-left {
  font-size: 1rem;
  margin-left: -1em;
}

.color-darkgrey, .color-darkgrey:hover {
  color:#6c757d !important;
}

#btn-outputs-block > button {
  margin-bottom:10px;
}

#btn-outputs-block > button:last-child {
  margin-bottom:0px;
}

.card-body {
  overflow-x:hidden;
}

.progressBarPlay {
  font-size: 22px;
}

#counter {
  cursor: text;
}

#volumeBar {
  margin-top:2px;
  width:160px;
}

.title-icon {
  float:left;
  margin-right:5px;
  font-size:1.8rem;
}

.header-logo {
  font-size: 2rem;
  float: left;
  margin-right: 5px;
}

.letters > button {
  width: 28px;
  height: 28px;
}

.col-md {
  max-width: 250px;
  min-width: 250px;
}

a.card-img-top {
  overflow: hidden;
  display: block;
  padding-top: 100%;
  background-size: cover;
  background-image: url(/assets/coverimage-loading.png);
}

button.active {
  color: #fff;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

button.active-fg-green {
  color: #28a745 !important;
}

button.active-fg-red {
  color: #bd2130 !important;
}

div#alertBox {
  position:fixed;
  top: 50px; 
  right:10px;
  width:80%; 
  max-width:400px;
  z-index:1000;
  opacity:0;
  visibility:visible;
  transition:opacity 0.5s ease-in; 
}

div.alertBoxActive {
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity 0.5s ease-in;
}

.popover-content {
  padding-top:4px;
  padding-bottom:4px;
}

.opacity05 {
  opacity:0.5;
}

caption {
  caption-side: top;
  font-size: 120%;
  font-weight: bold;
  color: black;
}

.dragover > td {
  border-top:25px solid transparent;
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

@keyframes changewidth {
  from { margin-left: -20px; }
  to { margin-left: 100%; }
}

#updateDBprogress {
  width:20px;
}

.updateDBprogressAnimate {
  animation-duration: 2s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
}

.modal-body {
  overflow-x: hidden;
}

.modal-body .album-cover {
  float:none;
}

#BrowseDatabaseAlbumListCaption {
  width:100%;
  margin-left: 15px;
}

#menu-dbupdate {
  padding-left:1rem;
}