/**
 * Music Navigation component
 *
 * Music Navigation Filters
 */
/**
 * _components
 *
 * All of the components common to the music nav
 */
/*
 * Lib
 */
/*
 * Local
 */
/*
------------------------------
    FILTER COLOURS
------------------------------
*/
/**
 * _colours 
 *
 * Colour scheme for the main nav items/links
 */
/* Two blues */
/* MusicNav Sections */
/* Drawer/Panel Content */
/* Mobile Menu Button */
/* Tier 1 Items */
/* Tier 2 Items */
/* Footer */
/* Outline Colours for Focus States (links that are active because of tab press) */
/**
 * _colours 
 *
 * Colour scheme for the main nav items/links
 */
/* Two blues */
/* MusicNav Sections */
/* Drawer/Panel Content */
/* Mobile Menu Button */
/* Tier 1 Items */
/* Tier 2 Items */
/* Footer */
/* Outline Colours for Focus States (links that are active because of tab press) */
/**
 * Global
 *
 * Included at all viewport sizes. This file imports all our common libraries
 * and any module and page specific styling.
 */
/*
 * Break points
 */
/*
------------------------------
    FILTER SIZES
------------------------------
*/
/*
------------------------------
    MUSIC NAVIGATION FILTER
------------------------------
*/
.mn-filter-wrapper {
  width: 100%;
  position: relative;
  padding: 12px 8px 8px 8px;
  box-sizing: border-box;
  /* Filter button or label */
  /* Filter Menu Container */
  /* Filter Checkbox */ }
  .mn-filter-wrapper .mn-filter-dropdown {
    display: block;
    background: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    color: #fff;
    padding: 8px;
    height: 32px;
    z-index: 401;
    position: relative; }
    .mn-filter-wrapper .mn-filter-dropdown:hover {
      color: #a0e3f6;
      background: #4a4a4a;
      cursor: pointer;
      border-bottom: 1px solid #696969; }
    .mn-filter-wrapper .mn-filter-dropdown:focus {
      color: #a0e3f6;
      background: #4a4a4a;
      border-bottom: 1px solid #696969;
      outline: none; }
    .mn-filter-wrapper .mn-filter-dropdown:active {
      outline: none; }
    .mn-filter-wrapper .mn-filter-dropdown .mn-fi-lb-icon {
      display: inline-block;
      float: right;
      font-size: 12px;
      line-height: 20px; }
      .mn-filter-wrapper .mn-filter-dropdown .mn-fi-lb-icon .gelicon:before {
        content: "\e004"; }
  .mn-filter-wrapper button.mn-filter-dropdown {
    border: none;
    text-align: left;
    width: 100%; }
  .mn-filter-wrapper ul, .mn-filter-wrapper li {
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden; }
  .mn-filter-wrapper .mn-fm {
    position: relative;
    display: none;
    /* Filter Menu */ }
    .mn-filter-wrapper .mn-fm .mn-fm-ul {
      width: 100%;
      background: #4a4a4a;
      color: #fff;
      font-size: 14px;
      position: relative;
      z-index: 400;
      /* Filter Item */
      /* Filter Group inside Filter Menu */ }
      .mn-filter-wrapper .mn-fm .mn-fm-ul a {
        display: inline-block;
        padding: 8px;
        text-decoration: none;
        color: #fff;
        background: #4a4a4a;
        width: 100%;
        height: 32px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
        .mn-filter-wrapper .mn-fm .mn-fm-ul a:hover, .mn-filter-wrapper .mn-fm .mn-fm-ul a:active, .mn-filter-wrapper .mn-fm .mn-fm-ul a:focus {
          color: #a0e3f6;
          background: #292929; }
      .mn-filter-wrapper .mn-fm .mn-fm-ul .mn-fi {
        height: 32px; }
      .mn-filter-wrapper .mn-fm .mn-fm-ul .mn-fm-fg {
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #535353; }
        .mn-filter-wrapper .mn-fm .mn-fm-ul .mn-fm-fg:last-child {
          border-bottom: none; }
      .mn-filter-wrapper .mn-fm .mn-fm-ul .mn-fm-2col .mn-fi {
        float: left;
        width: 50%; }
  .mn-filter-wrapper .mn-filter-checkbox {
    display: none; }
    .mn-filter-wrapper .mn-filter-checkbox:checked ~ .mn-fm {
      display: block; }
    .mn-filter-wrapper .mn-filter-checkbox:checked ~ .mn-filter-dropdown {
      background: #4a4a4a; }
      .mn-filter-wrapper .mn-filter-checkbox:checked ~ .mn-filter-dropdown .mn-fi-lb-icon .gelicon:before {
        content: "\e003"; }

/*
 * Importing CSS for breakpoints
 */
/**
 * _600
 *
 * Styles for smaller devices like tablets
 */
@media (min-width: 37.5em) {
  .mn-filter-wrapper {
    /* Filter Menu Container */ }
    .mn-filter-wrapper .mn-fm .mn-fm-ul {
      position: absolute; }
  /* Hotfix for Artists and Clips pages. Remove when Softwire adopts this */
  .audio-video-filter-options,
  .artist-filter-options {
    min-width: 360px !important; } }