.navbar > ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    .navbar > ul > li > a {
      position: relative;
      display: block;
      padding: 0 1em; }
    .navbar > ul > li > ul {
      display: none; }

.window {
  background: white;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  padding-top: 26px;
  position: relative; }
  .window:before {
    background: linear-gradient(#f0f0f0, #dedede);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 2px 2px -2px white, 0 1px rgba(0, 0, 0, 0.4);
    content: ' ';
    display: block;
    height: 25px;
    position: absolute;
    top: 0;
    width: 100%; }
  .window img {
    display: block; }

.grid.grid-2 {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none; }
  .grid.grid-2 > * {
    flex: 0 0 auto;
    width: 47.5%;
    margin: 0 5% 0 0; }
    .grid.grid-2 > *:nth-child(2n) {
      margin: 0; }
    @media all and (max-width: 768px) {
      .grid.grid-2 > * {
        margin: 0 0 5% 0;
        width: 100%; } }

.grid.grid-3 {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none; }
  .grid.grid-3 > * {
    flex: 0 0 auto;
    margin: 0 3% 3% 0;
    width: 30.3%; }
    @media all and (max-width: 768px) {
      .grid.grid-3 > * {
        margin: 0 3 3% 0;
        width: 100%; } }

.grid.grid-4 {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none; }
  .grid.grid-4 > * {
    flex: 0 0 auto;
    margin: 0 2% 2% 0;
    width: 23%; }
    @media all and (max-width: 768px) {
      .grid.grid-4 > * {
        margin: 0 5% 5% 0;
        width: 45%; } }
    @media all and (max-width: 600px) {
      .grid.grid-4 > * {
        margin: 0 0 5% 0;
        width: 100%; } }

.button {
  height: 34px;
  line-height: 34px;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background: #f7f7f7;
  font-size: 16px;
  color: #363d40;
  box-shadow: 0 1px 0 #cccccc;
  cursor: pointer;
  text-decoration: none;
  display: inline-block; }
  .button:hover {
    background: #fafafa;
    border-color: #999;
    color: #23282d;
    text-decoration: none; }
  .button.big {
    height: 48px;
    line-height: 48px;
    padding: 0 24px; }
  .button.disabled {
    color: #a0a5aa;
    border-color: #ddd;
    background: #f7f7f7;
    box-shadow: none;
    text-shadow: 0 1px 0 #fff;
    cursor: default;
    transform: none; }
  .button.accept, .button.add {
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 16px;
    color: #363d40;
    box-shadow: 0 1px 0 #cccccc;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border-color: #002f96;
    color: #002f96; }
    .button.accept:hover, .button.add:hover {
      background: #fafafa;
      border-color: #999;
      color: #23282d;
      text-decoration: none; }
    .button.accept.big, .button.add.big {
      height: 48px;
      line-height: 48px;
      padding: 0 24px; }
    .button.accept.disabled, .button.add.disabled {
      color: #a0a5aa;
      border-color: #ddd;
      background: #f7f7f7;
      box-shadow: none;
      text-shadow: 0 1px 0 #fff;
      cursor: default;
      transform: none; }
  .button.reject, .button.remove {
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 16px;
    color: #363d40;
    box-shadow: 0 1px 0 #cccccc;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border-color: #dc403b;
    color: #dc403b; }
    .button.reject:hover, .button.remove:hover {
      background: #fafafa;
      border-color: #999;
      color: #23282d;
      text-decoration: none; }
    .button.reject.big, .button.remove.big {
      height: 48px;
      line-height: 48px;
      padding: 0 24px; }
    .button.reject.disabled, .button.remove.disabled {
      color: #a0a5aa;
      border-color: #ddd;
      background: #f7f7f7;
      box-shadow: none;
      text-shadow: 0 1px 0 #fff;
      cursor: default;
      transform: none; }
  .button.done {
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 16px;
    color: #363d40;
    box-shadow: 0 1px 0 #cccccc;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border-color: #8BDA5D;
    color: #8BDA5D; }
    .button.done:hover {
      background: #fafafa;
      border-color: #999;
      color: #23282d;
      text-decoration: none; }
    .button.done.big {
      height: 48px;
      line-height: 48px;
      padding: 0 24px; }
    .button.done.disabled {
      color: #a0a5aa;
      border-color: #ddd;
      background: #f7f7f7;
      box-shadow: none;
      text-shadow: 0 1px 0 #fff;
      cursor: default;
      transform: none; }
    .button.done:hover {
      background: #f7f7f7;
      border-color: #8BDA5D;
      color: #8BDA5D; }

.boxgrid {
  list-style-type: none;
  padding-left: 0;
  display: grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 12px; }
  .boxgrid > * {
    vertical-align: middle;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #fafafa;
    font-size: 16px;
    color: #363d40;
    text-decoration: none;
    position: relative; }
    .boxgrid > * h3 {
      display: block;
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 4px 0;
      padding: 0; }
    .boxgrid > * .actions {
      position: absolute;
      right: 12px;
      top: 50%;
      margin-top: -16px;
      display: block; }

.boxlist {
  list-style-type: none;
  padding-left: 0; }
  .boxlist > * {
    display: block;
    width: 100%;
    margin-bottom: 6px; }
  .boxlist > * {
    vertical-align: middle;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #fafafa;
    font-size: 16px;
    color: #363d40;
    text-decoration: none;
    position: relative; }
    .boxlist > * h3 {
      display: block;
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 4px 0;
      padding: 0; }
    .boxlist > * .actions {
      position: absolute;
      right: 12px;
      top: 50%;
      margin-top: -16px;
      display: block; }

.icons {
  list-style-type: none; }
  .icons > * {
    display: inline-block;
    font-size: 48px; }
  .icons a {
    color: #222; }
    .icons a:hover {
      color: #dc403b; }

body {
  font-family: "Roboto";
  margin: 0;
  padding: 0;
  color: #222; }
  body h1 {
    font-size: 1.5em;
    font-weight: 500; }
  body h2 {
    font-size: 1.35em;
    font-weight: 400; }
  body h3 {
    font-size: 1.2em;
    font-weight: 400; }
  body p {
    font-family: "Roboto";
    line-height: 1.5em; }

img {
  max-width: 100%; }

a {
  color: #dc403b;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

.clear:after {
  display: block;
  content: '';
  clear: both; }

fieldset {
  margin: 0;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #ddd; }
  fieldset:first-child {
    border-top: none; }
  fieldset .optional {
    float: right;
    margin-top: 6px; }
  fieldset h1, fieldset h2, fieldset h3, fieldset h4, fieldset h5, fieldset h6 {
    margin: 0 0 12px 0;
    padding: 0;
    text-align: center; }

.form-sub > header {
  position: relative;
  text-align: center;
  background: #ddd;
  padding: 12px 0;
  font-weight: bold; }
  .form-sub > header:after {
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #ddd;
    content: '';
    position: absolute;
    display: block;
    bottom: -6px;
    left: 50%;
    margin-left: -4px; }

.form-sub > fieldset,
.form-sub > div > fieldset {
  border-bottom-style: dashed;
  overflow: hidden; }
  .form-sub > fieldset:last-child,
  .form-sub > div > fieldset:last-child {
    border-bottom-style: solid; }

.form-sub label {
  text-align: center; }

label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  display: block; }

select {
  width: 100%;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  border: 1px solid #ddd;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #363d40;
  outline: none; }

input[type="text"],
input[type="email"],
input[type="number"] {
  width: 100%;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #363d40;
  outline: none;
  box-sizing: border-box;
  padding: 0 8px; }

input[type='submit'], button {
  height: 34px;
  line-height: 34px;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background: #f7f7f7;
  font-size: 16px;
  color: #363d40;
  box-shadow: 0 1px 0 #cccccc;
  cursor: pointer;
  text-decoration: none;
  display: inline-block; }
  input[type='submit']:hover, button:hover {
    background: #fafafa;
    border-color: #999;
    color: #23282d;
    text-decoration: none; }
  input[type='submit'].big, button.big {
    height: 48px;
    line-height: 48px;
    padding: 0 24px; }
  input[type='submit'].disabled, button.disabled {
    color: #a0a5aa;
    border-color: #ddd;
    background: #f7f7f7;
    box-shadow: none;
    text-shadow: 0 1px 0 #fff;
    cursor: default;
    transform: none; }
  input[type='submit'].right, button.right {
    float: right; }

input[type="checkbox"] {
  margin: 0 6px 0 0; }

.slider {
  padding: 0 6px 18px 6px; }
  .slider .rc-slider-handle {
    border-color: #002f96; }

input.error, select.error {
  border-color: #dc403b; }

form .inline label {
  display: flex;
  align-items: center; }
  form .inline label > span {
    width: 80px; }

.main-content {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px; }
  .main-content.center {
    text-align: center; }

#header {
  position: relative;
  width: 100%;
  font-weight: 300;
  font-size: 15px;
  border-bottom: 1px solid #eaeaea; }
  #header #logo {
    float: left;
    padding-right: 1em; }
    #header #logo img {
      display: block;
      height: 32px;
      padding-top: 8px; }
  #header a {
    color: #aaa; }
    #header a:hover, #header a.active {
      color: #222;
      text-decoration: none; }
    #header a.expanded {
      font-weight: 500; }
      #header a.expanded:after {
        position: absolute;
        content: '\2022';
        color: #aaa;
        text-align: center;
        bottom: -14px;
        width: 100%;
        display: block;
        left: 0; }
  #header .iconized svg {
    margin-top: -4px; }
  #header .primary {
    min-height: 48px;
    line-height: 48px;
    vertical-align: middle; }
  #header .secondary {
    min-height: 48px;
    border-top: 1px solid #eaeaea;
    line-height: 48px;
    vertical-align: middle;
    background: #fafafa; }
  #header .left {
    float: left; }
  #header .right {
    float: right; }

.section {
  padding: 24px 0; }
  .section.section-alt2 {
    background: #002f96;
    color: #fff; }
  .section.section-alt {
    background: #eff1f4; }
  .section.nopadding {
    padding: 0; }
  .section.with-sidebar {
    display: flex; }
    .section.with-sidebar > .sidebar {
      flex: 0 0 auto;
      box-sizing: border-box;
      min-width: 240px;
      border-color: #ccc;
      border-style: solid; }
      .section.with-sidebar > .sidebar.right {
        border-width: 0 0 0 1px; }
      .section.with-sidebar > .sidebar.left {
        border-width: 0 1px 0 0; }
      .section.with-sidebar > .sidebar > div {
        display: flex;
        flex-direction: column;
        min-height: 100%; }
        .section.with-sidebar > .sidebar > div > .content {
          flex: 1 0 auto; }
        .section.with-sidebar > .sidebar > div > footer {
          border-top: 1px solid #ddd; }
    .section.with-sidebar > .main {
      flex: 1 0 auto;
      position: relative; }
      .section.with-sidebar > .main canvas {
        position: absolute;
        user-select: none; }
  .section .song.hidden {
    display: none; }
  .section .song .actions {
    display: block; }
    .section .song .actions .done {
      display: none; }
  .section .vote-form {
    display: none;
    justify-content: space-between; }
    .section .vote-form > * {
      flex: 1 0 0;
      margin: 4px; }
    @media all and (max-width: 512px) {
      .section .vote-form {
        flex-direction: column; }
        .section .vote-form > * {
          flex: 0 0 auto; }
        .section .vote-form input[type="submit"] {
          width: 100%; } }
  .section .share ul {
    padding: 0;
    margin: 0; }
  .section #current-votes h2 {
    margin-top: 0; }
  .section #current-votes p {
    margin: 0; }
  .section #current-votes #votes-container {
    display: none; }
  .section #song-search-form label {
    font-weight: normal; }
  .section .done {
    color: #8BDA5D;
    margin-right: 8px; }
  .section .all-done {
    text-align: center;
    margin-top: 24px;
    text-decoration: underline;
    display: none; }
  .section .order {
    font-size: 30px;
    font-weight: bold; }
  .section .centered {
    text-align: center; }
  @media all and (max-width: 768px) {
    .section.with-sidebar {
      flex-direction: column; }
      .section.with-sidebar > .sidebar.right {
        border-width: 1px 0 0 0; }
      .section.with-sidebar > .sidebar.left {
        border-width: 0 0 1px 0; }
      .section.with-sidebar > .main {
        min-height: 70vw; } }

.with-canvas#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column; }
  .with-canvas#page #main {
    display: flex;
    flex: 1 1 auto; }
    .with-canvas#page #main > .section.with-sidebar {
      flex: 1 1 auto; }
      .with-canvas#page #main > .section.with-sidebar .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: rgba(245, 245, 245, 0.5);
        z-index: 1000;
        text-align: center;
        padding: 10%;
        box-sizing: border-box;
        transition: opacity 500ms; }
        .with-canvas#page #main > .section.with-sidebar .overlay > * {
          position: relative;
          top: 50%;
          transform: translateY(-50%);
          display: inline-block;
          color: #aaa;
          font-weight: 500;
          font-size: 2em;
          line-height: 2em; }
        .with-canvas#page #main > .section.with-sidebar .overlay.hide {
          opacity: 0; }