/* line 1, /app/app/assets/stylesheets/footer.scss */
.player-footer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: #333;
  position: fixed;
  z-index: 3;
  bottom: 0;
  width: 100%;
  padding: 10px 0px;
  color: white;
}

/* line 14, /app/app/assets/stylesheets/footer.scss */
.player-footer .mix-play-icon {
  margin-right: 10px;
}

/* line 18, /app/app/assets/stylesheets/footer.scss */
.player-footer .mix-play-icon.disabled {
  color: #666;
}

/* line 25, /app/app/assets/stylesheets/footer.scss */
.player-footer .global-seek-time {
  font-size: 80%;
  font-family: monospace;
}

/* line 30, /app/app/assets/stylesheets/footer.scss */
.footer-share-icon {
  height: 1rem;
  width: 1rem;
  vertical-align: baseline;
  margin-left: 10px;
}

/* line 37, /app/app/assets/stylesheets/footer.scss */
.footer-plus-icon {
  height: 1rem;
  width: 1rem;
  vertical-align: middle;
}

@media (max-width: 576px) {
  /* line 44, /app/app/assets/stylesheets/footer.scss */
  .w-xs-100 {
    width: 100%;
  }
}
/* line 50, /app/app/assets/stylesheets/footer.scss */
#song-title-container {
  display: none;
}
/* line 5, /app/app/assets/stylesheets/home.scss */
html, body {
  min-height: 100%;
  height: 100%;
}

/* line 10, /app/app/assets/stylesheets/home.scss */
body {
  background-color: #f2f2f2;
}

/* line 17, /app/app/assets/stylesheets/home.scss */
.full-height {
  min-height: 100%;
}

@media (min-width: 992px) {
  /* line 22, /app/app/assets/stylesheets/home.scss */
  .full-height-lg {
    min-height: 100%;
  }
}
/* line 27, /app/app/assets/stylesheets/home.scss */
#tagline {
  font-size: 125%;
}

/* line 31, /app/app/assets/stylesheets/home.scss */
#home-logo {
  max-width: 100%;
}

/* line 35, /app/app/assets/stylesheets/home.scss */
.sidebar {
  background: #ff5d00;
  color: white;
  padding: 0px;
  min-height: calc(100vh - 47px);
}

/* line 42, /app/app/assets/stylesheets/home.scss */
.sidebar .filler {
  background: linear-gradient(180deg, #ff5d00 0%, #fca86a 100%);
}

/* line 46, /app/app/assets/stylesheets/home.scss */
.sidebar a {
  color: #eee;
  text-decoration: underline;
}

/* line 51, /app/app/assets/stylesheets/home.scss */
.select-artist-container {
  padding: 0.25em 0.25em;
  border-bottom: 0;
  border-top: 0;
}

/* line 57, /app/app/assets/stylesheets/home.scss */
.song-list {
  margin-bottom: 80px;
}

/* line 62, /app/app/assets/stylesheets/home.scss */
#select-artist-old {
  height: 40px;
  width: 100%;
  color: #222;
  background-color: #fff;
  border-radius: 5px;
  border: 0;
  outline-offset: -1px;
  -webkit-border-radius: 0;
  outline: 1px solid #ccc;
}

/* line 76, /app/app/assets/stylesheets/home.scss */
.home-logo-desktop {
  margin: auto;
}

/* line 80, /app/app/assets/stylesheets/home.scss */
#homepage-name {
  font-family: Georgia;
  font-size: 50px;
  text-align: justify;
}

/* line 86, /app/app/assets/stylesheets/home.scss */
h2 {
  font-size: 42px;
}

/* line 93, /app/app/assets/stylesheets/home.scss */
.top-bar-middle {
  color: #ffffff;
  width: 100%;
  font-size: 1.5em;
}

/* line 99, /app/app/assets/stylesheets/home.scss */
.top-bar-middle svg {
  width: 20px;
  margin-left: 5px;
}

/* line 104, /app/app/assets/stylesheets/home.scss */
.top-bar-middle .danger {
  color: red;
}

/* line 108, /app/app/assets/stylesheets/home.scss */
.global-mix-controls {
  text-align: right;
  color: #666666;
}

/* line 113, /app/app/assets/stylesheets/home.scss */
.btn-orange {
  background-color: #e25119;
  border-color: #e2551f;
  color: white;
}

/* line 120, /app/app/assets/stylesheets/home.scss */
.btn-orange:hover {
  background-color: #ff6a00;
  border-color: #ff6a00;
  color: white;
}

/* line 126, /app/app/assets/stylesheets/home.scss */
#no-mixes-image {
  width: 100%;
  margin-left: 100px;
}

/* line 131, /app/app/assets/stylesheets/home.scss */
.landing-carousel {
  width: 100%;
}

/* line 135, /app/app/assets/stylesheets/home.scss */
.carousel-control-prev {
  justify-content: flex-start;
}

/* line 139, /app/app/assets/stylesheets/home.scss */
.carousel-control-next {
  justify-content: flex-end;
}

/* line 143, /app/app/assets/stylesheets/home.scss */
.carousel-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* line 150, /app/app/assets/stylesheets/home.scss */
.carousel-item-container p {
  margin-left: 30px;
  margin-right: 30px;
}

/* line 155, /app/app/assets/stylesheets/home.scss */
#glad-message {
  position: relative;
  height: 550px;
  justify-content: center !important;
}

/* line 161, /app/app/assets/stylesheets/home.scss */
#glad-message * {
  margin-bottom: 20px;
}

/* line 165, /app/app/assets/stylesheets/home.scss */
.carousel-item {
  min-height: 550px;
}

/* line 169, /app/app/assets/stylesheets/home.scss */
.landing-carousel-screenshot-h {
  width: 90%;
}

/* line 173, /app/app/assets/stylesheets/home.scss */
.home-logo-text span {
  font-size: 2rem;
  font-family: "Glegoo";
  font-weight: bold;
}

/* line 179, /app/app/assets/stylesheets/home.scss */
.landing-carousel-screenshot-h {
  display: none;
  margin-bottom: 1rem;
}

/* line 184, /app/app/assets/stylesheets/home.scss */
.landing-carousel-screenshot-v {
  width: 220px;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  /* line 190, /app/app/assets/stylesheets/home.scss */
  .landing-carousel-screenshot-v {
    display: none !important;
  }

  /* line 194, /app/app/assets/stylesheets/home.scss */
  .landing-carousel-screenshot-h {
    display: inline-block !important;
  }
}
/* line 199, /app/app/assets/stylesheets/home.scss */
.landing-carousel-screenshot-iphone-on-desktop {
  width: 220px;
}

/* line 204, /app/app/assets/stylesheets/home.scss */
.reg-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}

/* line 215, /app/app/assets/stylesheets/home.scss */
.reg-box {
  padding: 20px 40px 20px 40px;
  max-width: 900px;
  margin: auto;
}

@media (min-width: 576px) {
  /* line 222, /app/app/assets/stylesheets/home.scss */
  .reg-container {
    flex-grow: 1;
  }

  /* line 226, /app/app/assets/stylesheets/home.scss */
  .reg-box {
    border: 1px solid #999;
    border-radius: 5px;
  }
}
/* line 232, /app/app/assets/stylesheets/home.scss */
.reg-box-logo-container {
  display: flex;
  justify-content: center;
}

/* line 237, /app/app/assets/stylesheets/home.scss */
.reg-box-logo {
  max-width: 300px;
  margin-bottom: 10px;
}
@charset "UTF-8";
@media (min-width: 992px) {
  /* line 6, /app/app/assets/stylesheets/mixes.scss */
  .mix-list {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #9e9d9d;
  }
}
/* line 14, /app/app/assets/stylesheets/mixes.scss */
.mix-list {
  background-color: #ffffff;
  padding-top: 10px;
  margin-top: 0px;
}

/* line 20, /app/app/assets/stylesheets/mixes.scss */
.push-down {
  margin-bottom: 100px;
}

@media (min-width: 576px) {
  /* line 25, /app/app/assets/stylesheets/mixes.scss */
  .mix-list {
    padding-top: 0px;
  }
}
/* line 30, /app/app/assets/stylesheets/mixes.scss */
.player {
  transition-property: background-color;
  transition-duration: 0.2s;
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  background-clip: padding-box;
}

/* line 39, /app/app/assets/stylesheets/mixes.scss */
.player.collapsed {
  border-bottom: 1px solid #ddd;
}

/* line 43, /app/app/assets/stylesheets/mixes.scss */
.player.playing {
  background-color: #fff;
}

/* line 47, /app/app/assets/stylesheets/mixes.scss */
.player-header {
  color: #111;
}

/* line 51, /app/app/assets/stylesheets/mixes.scss */
.player.opened .player-header {
  border-bottom: none;
}

/* line 55, /app/app/assets/stylesheets/mixes.scss */
.player-header.collapsed {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* line 60, /app/app/assets/stylesheets/mixes.scss */
.player-header > div {
  padding: 5px 0px 5px 5px;
}

@media (min-width: 576px) {
  /* line 65, /app/app/assets/stylesheets/mixes.scss */
  .player-header > div {
    margin-left: 5px;
    margin-right: 5px;
  }
}
/* line 71, /app/app/assets/stylesheets/mixes.scss */
.player-body {
  overflow-x: visible;
  overflow-y: hidden;
}

/* line 76, /app/app/assets/stylesheets/mixes.scss */
.player.collapsed .player-body {
  height: 0px;
}

/* line 80, /app/app/assets/stylesheets/mixes.scss */
.player-body-wrapper {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

/* line 85, /app/app/assets/stylesheets/mixes.scss */
.player:last-child .player-body-wrapper {
  border-bottom: none;
}

/* line 89, /app/app/assets/stylesheets/mixes.scss */
.header-date {
  padding-right: 5px;
  font-size: 12px;
  vertical-align: bottom;
  color: #333;
  text-align: left;
}

/* line 97, /app/app/assets/stylesheets/mixes.scss */
.header-title {
  white-space: nowrap;
  max-width: 75%;
}

/* line 102, /app/app/assets/stylesheets/mixes.scss */
.mix-title,
.mix-title a {
  color: #222;
  font-family: 'Glegoo', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 111, /app/app/assets/stylesheets/mixes.scss */
.mix-title a {
  text-decoration: underline;
  text-decoration-color: #aaa;
}

/* line 116, /app/app/assets/stylesheets/mixes.scss */
.mix-title-description {
  font-size: 75%;
  margin-left: 30px;
  color: #aaa;
}

/* line 122, /app/app/assets/stylesheets/mixes.scss */
.mix-description {
  color: #666;
  font-style: italic;
  padding-left: 67px;
}

/* line 128, /app/app/assets/stylesheets/mixes.scss */
.header-right-controls {
  text-align: right;
  line-height: 18px;
}

/* line 133, /app/app/assets/stylesheets/mixes.scss */
.header-right-controls svg,
.header-right-controls img {
  max-width: 18px;
  max-height: 18px;
  color: #666;
  margin-left: 3px;
  margin-right: 3px;
}

/* line 142, /app/app/assets/stylesheets/mixes.scss */
.mix-action-buttons {
  font-size: 16px;
}

/* line 146, /app/app/assets/stylesheets/mixes.scss */
.mix-action-buttons a {
  color: #ff8181;
}

/* line 150, /app/app/assets/stylesheets/mixes.scss */
.mix-row {
  position: relative;
}

/* line 154, /app/app/assets/stylesheets/mixes.scss */
.seek-time {
  text-align: right;
  line-height: 10px;
  font-size: 10px;
  color: #111;
  margin-top: -10px;
  padding-bottom: 10px;
  padding-left: 12px;
}

/* line 164, /app/app/assets/stylesheets/mixes.scss */
.delete-icon {
  color: red !important;
}

/* line 168, /app/app/assets/stylesheets/mixes.scss */
.volume-text {
  color: #111;
}

/* line 172, /app/app/assets/stylesheets/mixes.scss */
.volume-container {
  width: 40px;
}

/* line 176, /app/app/assets/stylesheets/mixes.scss */
.volume-slider {
  position: relative;
  transform: rotate(270deg);
  top: 35px;
  left: -30px;
  width: 70px;
  z-index: 1;
}

/* line 185, /app/app/assets/stylesheets/mixes.scss */
.volume-offset-marker {
  position: absolute;
  height: 2px;
  width: 20px;
  margin-left: -5px;
  background-color: black;
  z-index: 0;
}

/* line 194, /app/app/assets/stylesheets/mixes.scss */
.volume-text {
  position: absolute;
  bottom: 0px;
  left: 6px;
  font-size: 10px;
  font-family: monospace;
}

/* line 202, /app/app/assets/stylesheets/mixes.scss */
#svg-templates {
  display: none;
}

/* line 206, /app/app/assets/stylesheets/mixes.scss */
.link-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  cursor: pointer;
  fill: white;
  z-index: 5;
}

/* line 217, /app/app/assets/stylesheets/mixes.scss */
.link-icon.linked {
  fill: #fff100;
}

/* line 221, /app/app/assets/stylesheets/mixes.scss */
.x-icon {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 5;
  cursor: pointer;
}

/* line 231, /app/app/assets/stylesheets/mixes.scss */
.x-icon:hover circle {
  fill: #ffffff;
}

/* line 235, /app/app/assets/stylesheets/mixes.scss */
.play-loop-icon {
  fill: #eeeeee;
  display: none;
}

/* line 240, /app/app/assets/stylesheets/mixes.scss */
.play-pause {
  margin-right: 5px;
}

/* line 245, /app/app/assets/stylesheets/mixes.scss */
.mix-play-icon {
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin-right: 2px;
}

/* line 252, /app/app/assets/stylesheets/mixes.scss */
.mix-play-icon.disabled {
  color: #ccc;
  cursor: default;
}

/* line 258, /app/app/assets/stylesheets/mixes.scss */
.pause-icon {
  display: none;
}

/* line 265, /app/app/assets/stylesheets/mixes.scss */
.spinner {
  display: none;
  width: 22px;
  height: 22px;
  fill: black;
}

/* line 273, /app/app/assets/stylesheets/mixes.scss */
.waveform {
  margin-left: 20px;
  margin-right: 30px;
  margin-top: 5px;
  padding-left: 0px;
  padding-right: 0px;
  height: 100px;
}

/* line 285, /app/app/assets/stylesheets/mixes.scss */
.overlay-top {
  position: absolute;
  width: 90%;
  height: 40px;
  top: 40px;
  left: 50px;
  z-index: 5;
  cursor: text;
  pointer-events: none;
}

/* line 297, /app/app/assets/stylesheets/mixes.scss */
.overlay-bottom {
  position: absolute;
  width: 90%;
  height: 40px;
  left: 50px;
  top: 80px;
  z-index: 5;
  cursor: pointer;
  pointer-events: none;
}

/* line 309, /app/app/assets/stylesheets/mixes.scss */
#upload-form-submit {
  margin-top: 20px;
}

/* line 314, /app/app/assets/stylesheets/mixes.scss */
.mix-control-icon {
  color: #666;
  width: 22px;
  height: 22px;
  margin: 0px 5px;
}

/* line 321, /app/app/assets/stylesheets/mixes.scss */
.expand-icon-more {
  width: 15px;
  height: 22px;
}

/* line 326, /app/app/assets/stylesheets/mixes.scss */
.expand-icon-less {
  width: 15px;
  height: 22px;
}

/* line 332, /app/app/assets/stylesheets/mixes.scss */
.player.collapsed .expand-icon-more {
  display: inline-block;
}
/* line 333, /app/app/assets/stylesheets/mixes.scss */
.player.collapsed .expand-icon-less {
  display: none;
}

/* line 336, /app/app/assets/stylesheets/mixes.scss */
.player.opened .expand-icon-less {
  display: inline-block;
}
/* line 337, /app/app/assets/stylesheets/mixes.scss */
.player.opened .expand-icon-more {
  display: none;
}
/* line 338, /app/app/assets/stylesheets/mixes.scss */
.player.opened .mix-title-description {
  display: none;
}

@media (max-width: 576px) {
  /* line 343, /app/app/assets/stylesheets/mixes.scss */
  .player {
    padding: 8px;
  }

  /* line 347, /app/app/assets/stylesheets/mixes.scss */
  .ab-text {
    display: none;
  }

  /* line 351, /app/app/assets/stylesheets/mixes.scss */
  .play-pause {
    margin-right: 10px;
  }

  /* line 355, /app/app/assets/stylesheets/mixes.scss */
  .mix-play-icon {
    width: 28px !important;
    height: 28px !important;
  }
}
/* line 361, /app/app/assets/stylesheets/mixes.scss */
ul.mix-previous-notes {
  list-style-position: inside;
  padding-left: 0px;
  margin-left: -7px;
}

/* line 367, /app/app/assets/stylesheets/mixes.scss */
ul.mix-previous-notes li {
  list-style-type: '✅ ';
}

/* line 371, /app/app/assets/stylesheets/mixes.scss */
ul.mix-previous-notes li:before {
  content: "";
  margin-left: .25rem;
}

/* line 376, /app/app/assets/stylesheets/mixes.scss */
.mix-filename {
  font-size: 75%;
  color: #999999;
  margin-right: 20px;
}
/* line 1, /app/app/assets/stylesheets/nav.scss */
.dropdown-toggle::after {
  content: none;
}

/* line 5, /app/app/assets/stylesheets/nav.scss */
.dot {
  line-height: 37px;
  text-align: center;
  height: 40px;
  width: 40px;
  background-color: #ffffff;
  border-radius: 50%;
  border: 1px solid #cccccc;
  font-size: 15px;
  font-weight: bold;
  padding: 0px;
  color: black;
}

/* line 19, /app/app/assets/stylesheets/nav.scss */
.navbar {
  line-height: 1;
  background: #fff;
  padding: 5px;
  flex-wrap: nowrap;
}

/* line 27, /app/app/assets/stylesheets/nav.scss */
.topnav-image {
  height: 50px;
  max-width: 100%;
}

/* line 32, /app/app/assets/stylesheets/nav.scss */
.topnav-headline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 38, /app/app/assets/stylesheets/nav.scss */
.nav-item {
  margin-right: 10px;
}

/* line 42, /app/app/assets/stylesheets/nav.scss */
.topnav-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 48, /app/app/assets/stylesheets/nav.scss */
.navbar-text-link {
  margin-right: 10px;
}

@media (min-width: 992px) {
  /* line 52, /app/app/assets/stylesheets/nav.scss */
  .navbar {
    padding: 0;
  }

  /* line 56, /app/app/assets/stylesheets/nav.scss */
  .topnav-image {
    height: 80px;
    max-width: 100%;
  }

  /* line 61, /app/app/assets/stylesheets/nav.scss */
  .topnav-logo {
    background: #ff5d00;
    padding: 10px;
    width: 16.6667%;
  }

  /* line 67, /app/app/assets/stylesheets/nav.scss */
  .topnav-logo.no-sidebar {
    background: white;
  }

  /* line 72, /app/app/assets/stylesheets/nav.scss */
  .top-bar-middle {
    font-family: arial;
    font-size: 2em;
    color: #333;
    font-weight: 500;
  }

  /* line 79, /app/app/assets/stylesheets/nav.scss */
  .artist-share-icon {
    color: black !important;
  }

  /* line 83, /app/app/assets/stylesheets/nav.scss */
  #mix-list-container {
    background: linear-gradient(180deg, white, #f3f2f2 5%);
  }

  /* line 87, /app/app/assets/stylesheets/nav.scss */
  #navbarSupportedContent {
    height: 60px;
  }
}
/* line 1, /app/app/assets/stylesheets/notes.scss */
.mix-notes {
  padding-bottom: 8px;
  min-height: 56px;
}

/* line 6, /app/app/assets/stylesheets/notes.scss */
.mix-note-text-group {
  font-size: 13px;
}

/* line 9, /app/app/assets/stylesheets/notes.scss */
.mix-note-text-group > div {
  margin-bottom: 3px;
}

/* line 13, /app/app/assets/stylesheets/notes.scss */
.mix-note-text {
  font-size: 125%;
  color: black;
}

/* line 18, /app/app/assets/stylesheets/notes.scss */
.mix-note-text-completed {
  text-decoration: line-through;
  color: #888888;
}

/* line 23, /app/app/assets/stylesheets/notes.scss */
.mix-note-text-date {
  font-size: 90%;
  color: #aaaaaa;
  font-style: italic;
}

/* line 29, /app/app/assets/stylesheets/notes.scss */
.mix-note-controls {
  display: flex;
}

/* line 33, /app/app/assets/stylesheets/notes.scss */
.mix-note-controls a {
  font-family: arial;
  color: #888;
}

/* line 38, /app/app/assets/stylesheets/notes.scss */
.mix-note-controls > * {
  margin-right: 15px;
}

/* line 42, /app/app/assets/stylesheets/notes.scss */
.mix-note-reactions {
  color: #ff6a00;
  font-size: 120%;
  position: relative;
}

/* line 48, /app/app/assets/stylesheets/notes.scss */
.reaction-dot {
  font-size: 20px;
}

/* line 53, /app/app/assets/stylesheets/notes.scss */
.reaction-count {
  position: absolute;
  bottom: -3px;
  right: -2px;
  color: #444;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
}

/* line 64, /app/app/assets/stylesheets/notes.scss */
.note-dropdown button {
  line-height: 1;
  padding: 0.15rem 0.5rem;
  color: #666;
  border-color: #666;
}

/* line 71, /app/app/assets/stylesheets/notes.scss */
.note {
  margin-top: 10px;
  display: flex;
}

/* line 76, /app/app/assets/stylesheets/notes.scss */
.note-edit {
  flex-grow: 1;
}

/* line 80, /app/app/assets/stylesheets/notes.scss */
.note-anon-username {
  flex-grow: 1;
  margin-bottom: 0.5rem;
}

/* line 85, /app/app/assets/stylesheets/notes.scss */
.note-edit-container {
  display: flex;
  flex-wrap: wrap;
}

/* line 90, /app/app/assets/stylesheets/notes.scss */
.note-dot {
  line-height: 35px;
  text-align: center;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px;
  margin-right: 10px;
  padding: 0px;
  background-color: #white;
  border: 1px solid #ccc;
  font-family: monospace;
  color: #333;
}

/* line 107, /app/app/assets/stylesheets/notes.scss */
.note-dot.editing {
  background-color: #ff6a00;
  color: white;
  border: 0;
}

/* line 113, /app/app/assets/stylesheets/notes.scss */
.note-add-button {
  line-height: 1;
  margin-left: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
  background-color: white;
}

/* line 121, /app/app/assets/stylesheets/notes.scss */
.show-completed {
  padding-top: 12px;
  padding-left: 67px;
  width: auto;
}

/* line 127, /app/app/assets/stylesheets/notes.scss */
.incomplete-note-count {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background-image: url(/images/note.svg);
  background-repeat: no-repeat;
  background-position: right;
}

/* line 136, /app/app/assets/stylesheets/notes.scss */
.incomplete-note-count div {
  position: relative;
  top: -5px;
  left: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background-color: #eee;
  color: #444;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* line 1, /app/app/assets/stylesheets/playlists.scss */
.playlist-add-container {
  border: 1px solid #ccc;
}
/* class applies to select element itself, not a wrapper element */

.select-css {
    display: block;
    color: #444;
    line-height: 1;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
    display: none;
}
/* Hover style */
.select-css:hover {
    border-color: #888;
}
/* Focus style */
.select-css:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}

/* Set options to normal weight */
.select-css option {
    font-weight:normal;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
    border-color: #aaa;
}



/* line 1, /app/app/assets/stylesheets/sharing.scss */
.share-modal-title {
  background-color: #ff6a00;
  color: #eeeeee;
  font-size: 1.25em;
  padding: 10px;
}

/* line 8, /app/app/assets/stylesheets/sharing.scss */
#share-trumpet {
  height: 40px;
  margin-left: 20px;
}

/* line 13, /app/app/assets/stylesheets/sharing.scss */
.share-modal {
  padding: 0px;
}

/* line 17, /app/app/assets/stylesheets/sharing.scss */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* line 21, /app/app/assets/stylesheets/sharing.scss */
.share-modal-close {
  text-shadow: none;
  opacity: 0.9;
  color: #fff;
}

/* line 27, /app/app/assets/stylesheets/sharing.scss */
.share-modal-close:hover {
  color: #fff;
  opacity: 1;
}
/* line 1, /app/app/assets/stylesheets/sidebar.scss */
.list-group {
  width: 100%;
  background-color: transparent;
}

/* line 6, /app/app/assets/stylesheets/sidebar.scss */
.list-group-item {
  background-color: transparent;
  border: 0;
  padding: 0.30rem 0.6rem;
  font-family: "helvetica";
  display: flex;
  width: 100%;
}

/* line 15, /app/app/assets/stylesheets/sidebar.scss */
.list-group-item a {
  text-decoration-thickness: 0.05em;
  text-underline-offset: 1.5px;
  font-weight: 300;
  color: #fefefe;
}

/* line 22, /app/app/assets/stylesheets/sidebar.scss */
.list-group-item.indent-1 {
  padding-left: 1.5rem;
}

/* line 26, /app/app/assets/stylesheets/sidebar.scss */
.list-group-item.header {
  margin-top: 10px;
  margin-bottom: 2px;
}

/* line 31, /app/app/assets/stylesheets/sidebar.scss */
.list-group-item.artist-hidden-more {
  display: none !important;
}

/* line 35, /app/app/assets/stylesheets/sidebar.scss */
.list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* line 39, /app/app/assets/stylesheets/sidebar.scss */
.song-list .list-group-item:first-child {
  border-top: 0;
}

/* line 43, /app/app/assets/stylesheets/sidebar.scss */
.song-list .list-group-item.selected {
  background: #fff;
  color: #000;
  border-right: 1px;
}

@media (max-width: 992px) {
  /* line 50, /app/app/assets/stylesheets/sidebar.scss */
  .list-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/* line 1, /app/app/assets/stylesheets/upload.scss */
.drag-target {
  padding: 20px 10px;
  border: 1px dashed #aaa;
}

/* line 6, /app/app/assets/stylesheets/upload.scss */
.drag-target-active {
  border-color: blue;
}

/* line 10, /app/app/assets/stylesheets/upload.scss */
.autocomplete-wrapper {
  position: relative;
  display: inline-block;
}

/* line 15, /app/app/assets/stylesheets/upload.scss */
.autocomplete-caret {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: black;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


.logged-out-content {
}

.field_with_errors input {
  border: 1px solid red;
}

.modal-header h5 {
  color: black;
}

.artist-share-icon {
  color: #eee;
  width: 22px;
  height: 22px;
  vertical-align: baseline;
  margin-left: 5px;
}

.sharelink-input {
  width: 100%;
}

.ios-install-banner {
  background: #1b1c1e;
  padding: 15px;
  display: flex;
}

.ios-install-banner > div {
  padding: 5px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.app-install-dim {
  color: #666;
}

#ios-close-install {
  font-size: 25px;
}

#ios-appimage {
  height: 64px;
  border-radius: 15px;
}

.btn-primary {
  background-color: #0080ff;
  border-color: #0080ff;
}

.error-box {
  padding: 15px;
  font-size: 120%;
  border: 1px solid red;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}