/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


 .masthead.segment {
    min-height: 700px;
    padding: 1em 0em;
  }
  .ui.head.segment {
    background-image: url("/assets/headerback-f58e7ea1.png");
    background-repeat: repeat-x;
    .ui.text.container {
      margin-top: 60px;
  
    }
  }
  
  form {
    margin: 10%;
  }
  
  div#song-list {
    background-color: #f4ff68;
    overflow-y: scroll;
    height: 400px;
    font-size: 0.8em;
  }
  
  div#my-list {
    font-size: 0.8em;
  }

  div.item {
    align-content: center;
    text-align: left;
  }
  .selected {
    background-color: #DE5DFD !important;
    height: 60px !important;
  }
  
  .noselect {
      height: 80px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  .extra-song {
    padding: 15px;
  }
  
  div.extra-item {
    background-color: #9A982A !important;
  }
  
  div#free-entry {
    background-color: #FFE392;
  }
  
  body {
    background-color: #1b1c1d;
    color:#DE5DFD
  }
  div#song-list::-webkit-scrollbar {
    width: 2em;
    height: 2em;
  }
  div#song-list::-webkit-scrollbar-button {
    background: #ccc
  }
  div#song-list::-webkit-scrollbar-track-piece {
    background: #888
  }
  div#song-list::-webkit-scrollbar-thumb {
    background: #eee
  }
  
  div.wideimage img {
    max-width: 100%;
    height: auto;
  }
  
  div.image img.hover {
    max-width: initial;
  }