/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../../../usr/local/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@font-face {
  font-family: "font-name-local";
  src: url(http://127.0.0.1:8000/assets/fonts/font-name.eot);
  src: url("http://127.0.0.1:8000/assets/fonts/font-name.eot?#iefix") format("embedded-opentype"), url("http://127.0.0.1:8000/assets/fonts/font-name.woff2") format("woff2"), url("http://127.0.0.1:8000/assets/fonts/font-name.woff") format("woff"), url("http://127.0.0.1:8000/assets/fonts/font-name.ttf") format("truetype");
  font-style: normal;
}
/*
@font-face {
    font-family: 'font-name-live';
        src: url(http://static.designersfriend.co.uk/assets/sah/css_js/fonts/font-name.eot);
        src: url('http://static.designersfriend.co.uk/assets/sah/css_js/fonts/font-name.eot?#iefix') format('embedded-opentype'),
        url('http://static.designersfriend.co.uk/assets/sah/css_js/fonts/font-name.woff2') format('woff2'),
        url('http://static.designersfriend.co.uk/assets/sah/css_js/fonts/font-name.woff') format('woff'),
        url('http://static.designersfriend.co.uk/assets/sah/css_js/fonts/font-name.ttf') format('truetype');

    font-style: normal;
}
*/
/* line 27, ../../sass/partials/_fonts.scss */
.local {
  font-family: "font-name-local";
}

/* line 32, ../../sass/partials/_fonts.scss */
.live {
  font-family: "font-name-live";
}

/* line 37, ../../sass/partials/_fonts.scss */
.italic, i, italic {
  font-style: italic;
}

/* line 43, ../../sass/partials/_fonts.scss */
.local .bold, .local b {
  font-family: "font-name-local";
}

/* line 47, ../../sass/partials/_fonts.scss */
.live .bold, .live b {
  font-family: "font-name-live";
}

/* line 1, ../../sass/partials/_common.scss */
input, textarea, select, a {
  outline: none;
}

/* line 3, ../../sass/partials/_common.scss */
.preserve-3d {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* line 9, ../../sass/partials/_common.scss */
.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 0;
}

/* line 18, ../../sass/partials/_common.scss */
a {
  color: inherit;
  text-decoration: none;
}

/* line 23, ../../sass/partials/_common.scss */
.lower {
  text-transform: lowercase;
}

/* line 27, ../../sass/partials/_common.scss */
.upper {
  text-transform: uppercase;
}

/* line 31, ../../sass/partials/_common.scss */
.fl {
  float: left;
}

/* line 32, ../../sass/partials/_common.scss */
.fr {
  float: right;
}

/* line 34, ../../sass/partials/_common.scss */
.pointer {
  cursor: pointer;
}

/*@import "partials/fullscreen_slideshow";*/
/* line 39, ../../sass/desktop.scss */
body {
  background-color: #242424;
  font-size: 15px;
  line-height: 1.3em;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Source Code Pro', monospace;
}

/* Global */
/* line 51, ../../sass/desktop.scss */
.pointer {
  cursor: pointer;
}

/* Fonts */
/* line 57, ../../sass/desktop.scss */
b, bold {
  font-weight: bold;
}

/* line 61, ../../sass/desktop.scss */
.green-font {
  color: #2af87b;
}

/* line 65, ../../sass/desktop.scss */
#button-loop.active,
.track-title.active {
  color: #2af87b;
}

/* line 70, ../../sass/desktop.scss */
.track.pinned {
  color: yellow;
}

/* line 74, ../../sass/desktop.scss */
#anchor-search.active {
  color: yellow;
}

/* line 79, ../../sass/desktop.scss */
#anchor-tag.active, #copy-tags.active {
  color: magenta;
}

/* line 83, ../../sass/desktop.scss */
.tagged-bullet {
  opacity: 0;
}

/* line 87, ../../sass/desktop.scss */
.tagged .tagged-bullet {
  opacity: 1;
  color: magenta;
}

/* line 93, ../../sass/desktop.scss */
.tagmode .tagged {
  color: magenta;
}

/* line 99, ../../sass/desktop.scss */
.searched {
  color: yellow;
}

/* line 103, ../../sass/desktop.scss */
.tagmode .searched {
  color: inherit;
}

/* line 107, ../../sass/desktop.scss */
.tagmode .searched.tagged {
  color: magenta;
}

/* line 111, ../../sass/desktop.scss */
.searched-bullet {
  opacity: 0;
}

/* line 115, ../../sass/desktop.scss */
.searched .searched-bullet {
  opacity: 1;
  color: yellow;
}

/* line 123, ../../sass/desktop.scss */
.error {
  color: red;
}

/* Layout */
/* line 132, ../../sass/desktop.scss */
#container {
  padding-top: 10px;
  margin-left: 10px;
  width: calc(100% - 510px);
  position: relative;
}

/* line 139, ../../sass/desktop.scss */
#r-column {
  position: fixed;
  right: 0;
  width: 500px;
  height: calc(100vh -  0px);
  top: 0;
}

/* line 147, ../../sass/desktop.scss */
.r-column-element {
  width: calc(100% - 20px);
  margin: auto;
}

/* line 152, ../../sass/desktop.scss */
#c-column {
  margin: auto;
  width: 500px;
  height: calc(100vh -  0px);
  top: 0;
}

/* line 159, ../../sass/desktop.scss */
.element-left {
  text-align: left;
  float: left;
}

/* line 164, ../../sass/desktop.scss */
.element-right {
  text-align: right;
  float: right;
}

/* line 169, ../../sass/desktop.scss */
.element-center {
  text-align: center;
}

/* Deck */
/* line 176, ../../sass/desktop.scss */
.deck {
  width: calc(100% - 20px);
  margin-top: 10px;
  background-color: #2d2d2e;
  text-align: center;
  padding: 10px;
}

/* line 184, ../../sass/desktop.scss */
.deck-zone {
  display: inline-block;
}

/* line 190, ../../sass/desktop.scss */
.deck-control-button {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
}

/* Progress bars */
/* line 199, ../../sass/desktop.scss */
.progress {
  height: 4px;
  background-color: white;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* line 208, ../../sass/desktop.scss */
.progress-bar {
  height: 100%;
  background-color: #2af87b;
  width: 0;
}

/* line 215, ../../sass/desktop.scss */
.inline-progress {
  display: inline-block;
  background-color: darkorange;
  width: 100px;
  height: 4px;
  vertical-align: middle;
}

/* Lists */
/* line 224, ../../sass/desktop.scss */
.list {
  margin-top: 2px;
  overflow-y: scroll;
}

/* line 230, ../../sass/desktop.scss */
.block {
  text-align: left;
  margin: auto;
  background-color: #2d2d2e;
  margin-bottom: 2px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
}

/* line 241, ../../sass/desktop.scss */
.block-left {
  float: left;
}

/* Uploads */
/* line 249, ../../sass/desktop.scss */
#uploads {
  max-height: calc(50% - 46px);
}

/* line 253, ../../sass/desktop.scss */
#upload-list {
  max-height: calc(50vh - 128px);
}

/* line 258, ../../sass/desktop.scss */
.upload-error {
  margin-left: 10px;
  display: inline-block;
}

/* line 263, ../../sass/desktop.scss */
.upload-size {
  margin-left: 10px;
  display: inline-block;
  width: 72px;
}

/* line 269, ../../sass/desktop.scss */
.upload-remove {
  margin-left: 10px;
  display: inline-block;
  width: 10px;
}

/* line 276, ../../sass/desktop.scss */
.upload.dz-processing .progress {
  background-color: white;
}

/* line 280, ../../sass/desktop.scss */
.upload.dz-error .progress {
  background-color: red;
}

/* line 285, ../../sass/desktop.scss */
#files-queued {
  color: darkorange;
}

/* line 289, ../../sass/desktop.scss */
#files-failed {
  color: red;
}

/* line 293, ../../sass/desktop.scss */
.files-status {
  display: inline-block;
  width: 33.333%;
}

/* Grid Items */
/* line 301, ../../sass/desktop.scss */
.grid-item {
  margin-bottom: 10px;
  /* ((cols - 1) * gutter) / cols */
}
@media screen and (max-width: 800px) {
  /* line 301, ../../sass/desktop.scss */
  .grid-item {
    width: 100%;
  }
}
@media screen and (min-width: 801px) and (max-width: 1300px) {
  /* line 301, ../../sass/desktop.scss */
  .grid-item {
    width: calc(50% - 5px);
  }
}
@media screen and (min-width: 1301px) and (max-width: 1800px) {
  /* line 301, ../../sass/desktop.scss */
  .grid-item {
    width: calc(33.3333% - 6.6666px);
  }
}
@media screen and (min-width: 1801px) and (max-width: 2300px) {
  /* line 301, ../../sass/desktop.scss */
  .grid-item {
    width: calc(25% - 7.5px);
  }
}
@media screen and (min-width: 2301px) {
  /* line 301, ../../sass/desktop.scss */
  .grid-item {
    width: calc(20% - 8px);
  }
}

/* line 332, ../../sass/desktop.scss */
#nav {
  margin-top: 10px;
}

/* line 336, ../../sass/desktop.scss */
#nav a {
  display: inline-block;
  background-color: #2d2d2e;
  width: calc(20% - 21.6px);
  margin-right: 2px;
  text-align: center;
}
/* line 342, ../../sass/desktop.scss */
#nav a.guest {
  width: calc(40% - 21.6px);
}

/* line 348, ../../sass/desktop.scss */
.nav-anchor:last-of-type {
  margin-right: 0px !important;
}

/* line 352, ../../sass/desktop.scss */
#nav-extras {
  width: calc(20% - 1.6px);
  display: inline-block;
}

/* line 358, ../../sass/desktop.scss */
.mini-nav {
  width: calc(33.333% - 1.5px);
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: center;
  background: #2d2d2e;
  margin-right: 2px;
}

/* line 368, ../../sass/desktop.scss */
.mini-nav:last-of-type {
  margin-right: 0px !important;
}

/* line 372, ../../sass/desktop.scss */
#font-decrease {
  font-size: 0.9em;
}

/* line 377, ../../sass/desktop.scss */
#font-increase {
  font-size: 1.2em;
}

/* line 381, ../../sass/desktop.scss */
.input {
  margin-top: 2px;
  padding: 10px;
  width: calc(100% - 20px);
  background-color: #242424;
  color: white;
  display: inline-block;
  border: none;
  margin-bottom: 2px;
}

/* line 392, ../../sass/desktop.scss */
textarea {
  min-height: 200px;
}

/* line 396, ../../sass/desktop.scss */
#nursery {
  display: none;
}

/* line 400, ../../sass/desktop.scss */
#save.waiting {
  background-color: magenta;
}

/* line 406, ../../sass/desktop.scss */
.create-playlist-overlay {
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background: rgba(36, 36, 36, 0.8);
  z-index: 100;
  display: none;
}

/* line 418, ../../sass/desktop.scss */
.create-playlist-wrapper {
  width: 500px;
  margin: auto;
  background-color: #242424;
  padding: 20px;
  position: relative;
}

/* line 426, ../../sass/desktop.scss */
.expiry {
  display: inline-block;
  margin-left: 10px;
}

/* line 431, ../../sass/desktop.scss */
.expiry.active {
  color: magenta;
}

/* line 436, ../../sass/desktop.scss */
.pin {
  margin-right: 10px;
  font-size: 1.5em;
  transform: rotate(180deg);
  vertical-align: bottom;
  display: none;
}

/* line 445, ../../sass/desktop.scss */
.pinned .pin {
  display: inline-block !important;
}

/* line 448, ../../sass/desktop.scss */
.track-duration {
  display: inline-block;
  cursor: pointer;
}

/* line 453, ../../sass/desktop.scss */
.tagmode #create-playlist {
  display: none;
}

/* line 457, ../../sass/desktop.scss */
.marquee-container {
  width: 300px;
  overflow: hidden;
  margin: auto;
  height: 1.2em;
  position: relative;
}

/* line 465, ../../sass/desktop.scss */
.marquee {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

/* line 472, ../../sass/desktop.scss */
#login-form {
  width: 100%;
}
/* line 474, ../../sass/desktop.scss */
#login-form input, #login-form .input {
  padding: 10px;
  width: calc(100% - 54px);
  background-color: #2d2d2e;
  color: white;
  display: inline;
  border: none;
  margin-bottom: 2px;
  box-sizing: content-box;
}
/* line 486, ../../sass/desktop.scss */
#login-form button {
  background-color: #2d2d2e;
  border: none;
  color: white;
}
/* line 492, ../../sass/desktop.scss */
#login-form textarea {
  width: calc(100% - 54px);
}