/* trackpipe/public/css/menubar_mobile_2018.css */
.menubar-2018-phone-wrapper {
    height: 59px;
}
.menubar-2018-phone-wrapper.has-corp-header,
.menubar-2018-phone-wrapper.search-page {
    height: 109px;
}
.menubar-2018-phone {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0px 1px #EEE;
    box-sizing: border-box;
    padding: 0 14px;
    background-color: #ffffff;
    min-height: 59px;
    transition: top 0.25s ease;
}
.menubar-2018-phone.has-search-widget {
    transition: top 0.4s ease;
}
.menubar-2018-phone.fixed {
    position: fixed;
    z-index: 111; /* footer z-index is 110 - higher so we don't get covered by footer on scrolling */
    top: 0;
}
.menubar-2018-phone.admin-impersonating {
    background-color: yellow;
    outline: 50px dotted rgba(255, 0, 0, 0.25);
    outline-offset: -50px;
}
.menubar-2018-phone-wrapper .menubar-2018-phone.hide {
    top: -60px;
}
.menubar-2018-phone-wrapper.has-corp-header .menubar-2018-phone.hide,
.menubar-2018-phone-wrapper.search-page .menubar-2018-phone.hide {
    top: -109px;
}
.special-banner-present .menubar-2018-phone-wrapper.has-corp-header .menubar-2018-phone.hide {
    top: -159px;
}
/* dark theme */
.has-menubar.invertIconography #menubar-2018-phone {
    background-color: #212121;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.08);
}
.menubar-2018-phone .corp-logo-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 59px;
    /*flex: 1; arkark need design input: removing this improves wrapping issues on french loggged out nav. does it create others? (also see .logged-out-nav rules) */
}
.menubar-2018-phone .logo-big {
    background: url(/img/bandcamp-logo-color-bcaqua.svg) 0 0 no-repeat;
    background-size: 100%;
    height: 17px;
    width: 108px;
    margin: 15px 0 15px 0;
}
.menubar-2018-phone .logo-sm {
    background: url('/img/bandcamp-logo-bc-color-bcaqua.svg') 30% 50% no-repeat;
    background-size: 100%;
    width: 45px;
    height: 17px;
    margin: 15px 0 15px 0;
}
.has-menubar.invertIconography #menubar-2018-phone .logo-big {
    background: url('/img/logo-white.svg') 0 0 no-repeat;
    background-size: 100%;
    height: 17px;
    width: 108px;
}
.has-menubar.invertIconography #menubar-2018-phone .logo-sm {
    background: url('/img/bandcamp-logo-bc-white.svg') 30% 50% no-repeat;
    background-size: 100%;
    width: 45px;
    height: 17px;
    margin: 15px 0 15px 0;
}
.menubar-2018-phone .logo-sm > span,
.menubar-2018-phone .logo-big > span {
    display: none;
}
.menubar-2018-phone .userpic {
    display: block;
    float: right;
    background: transparent;
    width: 29px;
    height: 29px;
    border-radius: 50% 50%;
}
.menubar-2018-phone .userpic.admin {
    border: 3px red solid;
}

.menubar-2018-phone .userpic > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50% 50%;
}
/* mobile autocomplete */
.menubar-2018-phone .mobile-autocomplete-wrapper {
    height: 100vh;
    width: 100%;
    position: fixed;
    background: #ffffff;
    z-index: 200;
    top: 0;
    left: 0;

    -ms-overflow-style: none;
}
.menubar-2018-phone .mobile-autocomplete-wrapper::-webkit-scrollbar {
    display: none;
}
.menubar-2018-phone .mobile-autocomplete-wrapper .clear-autocomplete {
    display: block;
    position: absolute;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    top: 17px;
    color: #9B9B9B;
}

body:lang(en) .menubar-2018-phone .mobile-autocomplete-wrapper .clear-autocomplete {
    left: calc(100% - 92px);
}
body:lang(ja) .menubar-2018-phone .mobile-autocomplete-wrapper .clear-autocomplete {
    left: calc(100% - 120px);
}
body:lang(fr) .menubar-2018-phone .mobile-autocomplete-wrapper .clear-autocomplete {
    left: calc(100% - 98px);
}

body:lang(en) .mobile-searchbar-2018 .is-loading .loading-icon {
    left: calc(100% - 94px);
}
body:lang(ja) .mobile-searchbar-2018 .is-loading .loading-icon {
    left: calc(100% - 122px);
}
body:lang(fr) .mobile-searchbar-2018 .is-loading .loading-icon {
    left: calc(100% - 100px);
}

.menubar-2018-phone .mobile-autocomplete-wrapper .cancel-autocomplete {
    display: inline-block;
    top: 8px;
    left: calc(100% - 100px);
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    padding: 20px 13px 10px 12px;
    color: #9B9B9B;
}
.menubar-2018-phone #autocomplete-results.header-rework-2018 .autocomplete-tags {
    width: calc(100% - 40px);
    position: fixed;
    bottom: 0px;
    opacity: 1;
}
.menubar-2018-phone #autocomplete-results.header-rework-2018 .see-all {
    display: none;
}
.menubar-2018-phone #autocomplete-results.header-rework-2018 .results-list {
    max-height: calc(100vh - 63px);
    overflow-y: scroll;
    box-shadow: 0 0 0 2px #fff;
    -webkit-overflow-scrolling: touch;
}
.menubar-2018-phone #autocomplete-results.header-rework-2018 .results-list.tag-room {
    max-height: calc(100vh - 110px);
}
.menubar-2018-phone .mobile-autocomplete-wrapper .flex {
    display: flex;
}
/* mobile blue user menu */
.menubar-2018-phone .user-menu-wrapper {
    background: -webkit-linear-gradient(300deg, #2eaec3, #1aa2e6);
    height: 101vh;
    width: 80vw;
    position: fixed;
    background-color: #1aa2e6;
    z-index: 200;
    right: 0px;
    top: 0;
    border-left: solid 20vw rgba(0, 0, 0, .5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: white;
}
.menubar-2018-phone .user-menu-wrapper .close {
    display: block;
    top: 10px;
    left: calc(100% - 50px);
    font-size: 40px;
    font-weight: 100;
    position: absolute;
    text-align: center;
    cursor: pointer;
    width: 44px;
    height: 44px;
    line-height: 40px;
}
.menubar-2018-phone .user-menu-wrapper .menu-content {
    line-height: 1.3;
    font-size: 20px;
    position: absolute;
    top: 53px;
    left: 20px;
    right: 20px;
}
.menubar-2018-phone .user-menu-wrapper a {
    color: #fff;
}
.menubar-2018-phone .user-menu-wrapper .menurow.userdata div {
    display: inline-block;
    float:left;
    clear: left;
}
.menubar-2018-phone .user-menu-wrapper {
    font: 24px 'Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}
.menubar-2018-phone .user-menu-wrapper .app-links {
    margin-top: 67px;
}
.menubar-2018-phone .user-menu-wrapper .app-links.fan-only {
    margin-top: 47px;
}
.menubar-2018-phone .user-menu-wrapper .small-links {
    margin-top: 57px;
}
.menubar-2018-phone .user-menu-wrapper .small-links.fan-only {
    margin-top: 61px;
}
.menubar-2018-phone img {
    display: inline-block;
}
.menubar-2018-phone .user-menu-wrapper img.usermenu-userpic,
.menubar-2018-phone .user-menu-wrapper .no-image-placeholder {
    border-radius: 50%;
    height: 29px;
    width: 29px;
    margin: 0 0 0 11px;
}
.menubar-2018-phone .user-menu-wrapper .view-site-collection {
    font-size: 14px;
    top: 1px;
    position: relative;
}
.menubar-2018-phone .user-menu-wrapper .app-icon {
    height: 23px;
    width: 23px;
    margin: 4px 0 0 9px;
}
.menubar-2018-phone .user-menu-wrapper .small {
    font-size: 14px;
    font-weight:  500;
    margin-top: 24px;
}

.menubar-2018-phone .user-menu-wrapper .small .lang {
    color: rgba(255,255,255,0.6);
}
.menubar-2018-phone .menurow {
    display: flex;
    word-break: break-word;
    margin-top: 20px;
}
.menubar-2018-phone .menurow .col1 {
    min-width: 50px;
}
.menubar-2018-phone .menurow.fan-row {
    margin-top: 40px;
}
.menubar-2018-phone .menurow.purchases {
    margin-top: 30px;
}
.menubar-2018-phone .menurow.header-discover-2023 {
    margin-top: 20px;
    font-size: 16px;
}
.menubar-2018-phone .menurow.categories {
    margin-top: 16px;
    font-size: 12px;
}
.menubar-2018-phone .logged-out-nav,
.menubar-2018-phone .logged-in-nav {
    flex: 1; /* for menubar-2018 parent flex container alignment */

    display: flex;
    justify-content: flex-end;
    align-items: center; 
}
.menubar-2018-phone .logged-out-nav > div,
.menubar-2018-phone .logged-in-nav > div {
    padding-left: 22px;
    /*flex-shrink: 0; arkark need design input: removing this improves wrapping issues on french loggged out nav. does it create others? (also see .corp-logo-wrapper rules) */
}
.menubar-2018-phone .logged-out-nav > div > a,
.menubar-2018-phone .logged-in-nav > div > a {
    font: 14px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
}
.has-menubar.invertIconography #menubar-2018-phone .logged-out-nav > div > a,
.has-menubar.invertIconography #menubar-2018-phone .logged-in-nav > div > a {
    color: #FFFFFF;
}
.menubar-2018-phone .menubar-search-icon,
.menubar-2018-phone .menubar-collection-icon {
    fill: #000000;
}
#menubar-2018-phone.mobile-cd.loading .hidden-while-loading,
.menubar-2018-phone.loading .hidden-while-loading {
    display: none !important;
}
.menubar-2018-phone .no-image-placeholder {
    background-color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
    width: 29px;
    height: 29px;
    border-radius: 50%;
}
.hd-banner-mobile-2018 {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    min-height: 50px;
    padding: 0 14px;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 1px solid #EEE;
    font-weight: 500;
}
.hd-banner-mobile-2018-inner {
    line-height: 50px;
    display: block;
}
.hd-banner-mobile-2018-inner .blue-gradient {
    font-weight: bold;
    margin: 0;
    color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hd-banner-mobile-2018-inner a:hover {
    text-decoration: none;
}

/* mobile expando cart */
.menubar-2018-phone .cart-mobile {
    position: relative;
    fill: #000000;
}
#menubar-2018-phone.mobile-cd svg.menubar-cart-icon text,
.menubar-2018-phone .cart-mobile svg.menubar-cart-icon text {
    font-size: 9px;
    font-weight: 600;
    stroke: none;
}

.menubar-2018-phone.fixed .cart-mobile.expanded .cart-up,
.menubar-2018-phone .cart-mobile .cart-up {
    display: none;
}
.menubar-2018-phone .cart-mobile.expanded .cart-up {
    display: block;
    position: absolute;
    bottom: -10px;
    z-index: 2;
}

/* new mobile sidecart styles, menubar 2018 */
#sidecart.menubar-2018-mobile-cart #sidecartReveal {
    border: none;
}
#sidecart.menubar-2018-mobile-cart #sidecart-phone-reveal {
    margin-top: 0;
    border-top: thin solid #EEE;
    border-bottom: thin solid #EEE;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents {
    font-size: 12px;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .item {
    border: none;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .itemName {
    font-weight: bold;
    padding-top: 6px;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .cartItemContents .thumb {
    width: 50px;
    height: 50px;
    margin-right: 7px;
    padding-top: 0;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .cartItemContents .thumb.package {
    height: 40px;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .item .delete {
    /* most of these are set to undo the pre-2018 menubar rework sidecart css rules */
    border: none;
    font-weight: 400;
    background:none;
    width: auto;
    text-indent: 0; 
    opacity: 1;
    position: absolute;
    right: 0;
    padding-top: 6px;
    top: 0;
    height: 15px;
    line-height: 15px;
    padding-right: 3px;
    color: #898989;
    font-size: 12px;
}
html:lang(de) #sidecart.menubar-2018-mobile-cart #sidecartContents .item .delete {
    right: -0.5em;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .item .delete span {
    text-indent: 0;
    background: none;
    opacity: 1;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
}
#sidecart.menubar-2018-mobile-cart #sidecartContents .item-price {
    padding-top: 6px;
    right: 52px;
    height: 15px;
    line-height: 15px;
}
#sidecart.menubar-2018-mobile-cart #sidecartFooter {
    margin: 0 3.125%;
    padding-bottom: 0;
}
#sidecart.menubar-2018-mobile-cart #sidecartFooter table#summary {
    width: auto;
    margin: 0 52px 0 57px;
}
#sidecart.menubar-2018-mobile-cart #sidecartFooter table#summary .currency {
    padding-right: 0;
    font-weight: bold;
}
#sidecart.menubar-2018-mobile-cart #sidecartFooter .total th {
    font-weight: normal;
}
#sidecart.menubar-2018-mobile-cart #sidecartFooter .card-details {
    text-align: right;
    padding-right: 0;
}
#sidecart.menubar-2018-mobile-cart #sidecartFooter .icon-cc {
    text-align: left; /* to hide text for image replacing */
}
#sidecart.menubar-2018-mobile-cart a#sidecartCheckout.buttonLink {
    width: 100%;
    height: 41px;
    line-height: 41px;
    border-radius: 3px;
    background-color: #2d9100;
    font-size: 14px;
}
#sidecart.menubar-2018-mobile-cart .sidecart-gift-card-footnote {
    margin: 0;
    text-align: center;
    padding-bottom: 10px;
    width: 100%;
}

/* icons with dark theme */
.has-menubar.invertIconography #menubar-2018-phone .menubar-search-icon,
.has-menubar.invertIconography #menubar-2018-phone .cart-mobile,
.has-menubar.invertIconography #menubar-2018-phone .menubar-cart-icon,
.has-menubar.invertIconography #menubar-2018-phone .menubar-collection-icon {
    fill: #FFF;
}
.menubar-2018-phone .login-link {
    padding-right: 5px;
}
/* override rules from download_phone_2016 */
.menubar-2018-phone.download-page * {
    box-sizing: content-box;
}
/* custom domain mobile mini menubar */
#menubar-2018-phone .mobile-cd {
    background: #fff;
}
#menubar-2018-phone #sidecartHeader .menubar-cart-icon-wrapper {
    display: inline-block;
    position: absolute;
    top: auto;
    margin-top: -4px;
    right: 1.5rem;
}
#menubar-2018-phone #sidecartHeader .title {
    color: black;
}
.invertIconography #menubar-2018-phone #sidecartHeader {
    background-color: #212121;
    fill: #fff;
}
.invertIconography #menubar-2018-phone #sidecartReveal {
    border-bottom: thin solid #777;
}
.invertIconography #menubar-2018-phone #sidecartHeader .title {
    color: #fff;
}

/* trackpipe/public/css/normalize.css */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* trackpipe/public/css/grid.css */
/*------------------------------------------------------------*/
.row {
    clear:both;
    margin:0 auto;
    width:100%;
}
.col {
    float:left;
    min-height:1px;
    position:relative;
}
.col-full {
    width:100%;
}
/* clear floats */
.row:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

/*------------------------------------------------------------*/
/* 12 column */
.col+.col-1-12,
.col+.col-2-12,
.col+.col-3-12,
.col+.col-4-12,
.col+.col-5-12,
.col+.col-6-12,
.col+.col-7-12,
.col+.col-8-12,
.col+.col-9-12,
.col+.col-10-12,
.col+.col-11-12 {
    margin-left:1.8450184502%;
}
/* 12 column units */
.col-1-12 {width:6.642066420664%;}
.col-2-12 {width:15.129151291513%;}
.col-3-12 {width:23.616236162362%;}
.col-4-12 {width:32.10332103321%;}
.col-5-12 {width:40.590405904059%;}
.col-6-12 {width:49.077490774908%;}
.col-7-12 {width:57.564575645756%;}
.col-8-12 {width:66.051660516605%;}
.col-9-12 {width:74.538745387454%;}
.col-10-12 {width:83.025830258303%;}
.col-11-12 {width:91.512915129151%;}

/* no gutter */
.col-2-12.no-gutter,
.col-3-12.no-gutter,
.col-4-12.no-gutter,
.col-5-12.no-gutter,
.col-6-12.no-gutter,
.col-7-12.no-gutter,
.col-8-12.no-gutter,
.col-9-12.no-gutter,
.col-10-12.no-gutter,
.col-11-12.no-gutter {
    margin-left:0;
}
/* no gutter widths */
.col-2-12.no-gutter {width:16.974169741697%;}
.col-3-12.no-gutter {width:25.461254612546%;}
.col-4-12.no-gutter {width:33.948339483395%;}
.col-5-12.no-gutter {width:42.435424354244%;}
.col-6-12.no-gutter {width:50.922509225092%;}
.col-7-12.no-gutter {width:59.409594095941%;}
.col-8-12.no-gutter {width:67.89667896679%;}
.col-9-12.no-gutter {width:76.383763837638%;}
.col-10-12.no-gutter {width:84.870848708487%;}
.col-11-12.no-gutter {width:93.357933579336%;}

/* 12 column layout offsets */
.offset-1-12 {margin-left:8.487084870849%;}
.offset-2-12 {margin-left:16.974169741697%;}
.offset-3-12 {margin-left:25.461254612546%;}
.offset-4-12 {margin-left:33.948339483395%;}
.offset-5-12 {margin-left:42.435424354244%;}
.offset-6-12 {margin-left:50.922509225092%;}
.offset-7-12 {margin-left:59.409594095941%;}
.offset-8-12 {margin-left:67.89667896679%;}
.offset-9-12 {margin-left:76.383763837638%;}
.offset-10-12 {margin-left:84.870848708487%;}
.offset-11-12 {margin-left:93.357933579336%;}

/* 12 column offset sibling widths */
.col+.offset-1-12 {margin-left:10.332103321033%;}
.col+.offset-2-12 {margin-left:18.819188191882%;}
.col+.offset-3-12 {margin-left:27.306273062731%;}
.col+.offset-4-12 {margin-left:35.793357933579%;}
.col+.offset-5-12 {margin-left:44.280442804428%;}
.col+.offset-6-12 {margin-left:52.767527675277%;}
.col+.offset-7-12 {margin-left:61.254612546125%;}
.col+.offset-8-12 {margin-left:69.741697416974%;}
.col+.offset-9-12 {margin-left:78.228782287823%;}
.col+.offset-10-12 {margin-left:86.715867158672%;}

/*------------------------------------------------------------*/
/* 15 columns */
.col-1-15 {width:5.063291139241%;}
.col-2-15 {width:11.844484629295%;}
.col-3-15 {width:18.625678119349%;}
.col-4-15 {width:25.406871609403%;}
.col-5-15 {width:32.188065099458%;}
.col-6-15 {width:38.969258589512%;}
.col-7-15 {width:45.750452079566%;}
.col-8-15 {width:52.53164556962%;}
.col-9-15 {width:59.312839059675%;}
.col-10-15 {width:66.094032549729%;}
.col-11-15 {width:72.875226039783%;}
.col-12-15 {width:79.656419529837%;}
.col-13-15 {width:86.437613019892%;}
.col-14-15 {width:93.218806509946%;}

/* gutters */
.col+.col-1-15,
.col+.col-2-15,
.col+.col-3-15,
.col+.col-4-15,
.col+.col-5-15,
.col+.col-6-15,
.col+.col-7-15,
.col+.col-8-15,
.col+.col-9-15,
.col+.col-10-15,
.col+.col-11-15,
.col+.col-12-15,
.col+.col-13-15,
.col+.col-14-15 {
    margin-left:1.7179023508%;
}
/* no gutter */
.col-2-15.no-gutter,
.col-3-15.no-gutter,
.col-4-15.no-gutter,
.col-5-15.no-gutter,
.col-6-15.no-gutter,
.col-7-15.no-gutter,
.col-8-15.no-gutter,
.col-9-15.no-gutter,
.col-10-15.no-gutter,
.col-11-15.no-gutter,
.col-12-15.no-gutter,
.col-13-15.no-gutter,
.col-14-15.no-gutter {
    margin-left:0;
}
/* no gutter widths */
.offset-2-15.no-gutter {width:13.562386980108%;}
.offset-3-15.no-gutter {width:20.343580470163%;}
.offset-4-15.no-gutter {width:27.124773960217%;}
.offset-5-15.no-gutter {width:33.905967450271%;}
.offset-6-15.no-gutter {width:40.687160940325%;}
.offset-7-15.no-gutter {width:47.46835443038%;}
.offset-8-15.no-gutter {width:54.249547920434%;}
.offset-9-15.no-gutter {width:61.030741410488%;}
.offset-10-15.no-gutter {width:67.811934900542%;}
.offset-11-15.no-gutter {width:74.593128390597%;}
.offset-12-15.no-gutter {width:81.374321880651%;}
.offset-13-15.no-gutter {width:88.155515370705%;}
.offset-14-15.no-gutter {width:94.936708860759%;}

/* fluid column layout offsets */
.offset-1-15 {margin-left:6.781193490054%;}
.offset-2-15 {margin-left:13.562386980108%;}
.offset-3-15 {margin-left:20.343580470163%;}
.offset-4-15 {margin-left:27.124773960217%;}
.offset-5-15 {margin-left:33.905967450271%;}
.offset-6-15 {margin-left:40.687160940325%;}
.offset-7-15 {margin-left:47.46835443038%;}
.offset-8-15 {margin-left:54.249547920434%;}
.offset-9-15 {margin-left:61.030741410488%;}
.offset-10-15 {margin-left:67.811934900542%;}
.offset-11-15 {margin-left:74.593128390597%;}
.offset-12-15 {margin-left:81.374321880651%;}
.offset-13-15 {margin-left:88.155515370705%;}
.offset-14-15 {margin-left:94.936708860759%;}

/* fluid column offset sibling widths */
.col+.offset-1-15 {margin-left:8.499095840868%;}
.col+.offset-2-15 {margin-left:15.280289330922%;}
.col+.offset-3-15 {margin-left:22.061482820976%;}
.col+.offset-4-15 {margin-left:28.842676311031%;}
.col+.offset-5-15 {margin-left:35.623869801085%;}
.col+.offset-6-15 {margin-left:42.405063291139%;}
.col+.offset-7-15 {margin-left:49.186256781193%;}
.col+.offset-8-15 {margin-left:55.967450271248%;}
.col+.offset-9-15 {margin-left:62.748643761302%;}
.col+.offset-10-15 {margin-left:69.529837251356%;}
.col+.offset-11-15 {margin-left:76.31103074141%;}
.col+.offset-12-15 {margin-left:83.092224231465%;}
.col+.offset-13-15 {margin-left:89.873417721519%;}


/*------------------------------------------------------------*/
/* 16 columns */
.col-1-16 {width:5.063291139241%;}
.col-2-16 {width:11.392405063291%;}
.col-3-16 {width:17.721518987342%;}
.col-4-16 {width:24.050632911392%;}
.col-5-16 {width:30.379746835443%;}
.col-6-16 {width:36.708860759494%;}
.col-7-16 {width:43.037974683544%;}
.col-8-16 {width:49.367088607595%;}
.col-9-16 {width:55.696202531646%;}
.col-10-16 {width:62.025316455696%;}
.col-11-16 {width:68.354430379747%;}
.col-12-16 {width:74.683544303797%;}
.col-13-16 {width:81.012658227848%;}
.col-14-16 {width:87.341772151899%;}
.col-15-16 {width:93.670886075949%;}

/* gutters */
.col+.col-1-16,
.col+.col-2-16,
.col+.col-3-16,
.col+.col-4-16,
.col+.col-5-16,
.col+.col-6-16,
.col+.col-7-16,
.col+.col-8-16,
.col+.col-9-16,
.col+.col-10-16,
.col+.col-11-16,
.col+.col-12-16,
.col+.col-13-16,
.col+.col-14-16,
.col+.col-15-16 {
    margin-left:1.2658227848%;
}
/* no gutter */
.col-2-16.no-gutter,
.col-3-16.no-gutter,
.col-4-16.no-gutter,
.col-5-16.no-gutter,
.col-6-16.no-gutter,
.col-7-16.no-gutter,
.col-8-16.no-gutter,
.col-9-16.no-gutter,
.col-10-16.no-gutter,
.col-11-16.no-gutter,
.col-12-16.no-gutter,
.col-13-16.no-gutter,
.col-14-16.no-gutter,
.col-15-16.no-gutter {
    margin-left:0;
}
/* no gutter widths */
.col-2-16.no-gutter {width:12.658227848101%;}
.col-3-16.no-gutter {width:18.987341772152%;}
.col-4-16.no-gutter {width:25.316455696203%;}
.col-5-16.no-gutter {width:31.645569620253%;}
.col-6-16.no-gutter {width:37.974683544304%;}
.col-7-16.no-gutter {width:44.303797468354%;}
.col-8-16.no-gutter {width:50.632911392405%;}
.col-9-16.no-gutter {width:56.962025316456%;}
.col-10-16.no-gutter {width:63.291139240506%;}
.col-11-16.no-gutter {width:69.620253164557%;}
.col-12-16.no-gutter {width:75.949367088608%;}
.col-13-16.no-gutter {width:82.278481012658%;}
.col-14-16.no-gutter {width:88.607594936709%;}
.col-15-16.no-gutter {width:94.936708860759%;}

/* fluid column layout offsets */
.offset-1-16 {margin-left:6.329113924051%;}
.offset-2-16 {margin-left:12.658227848101%;}
.offset-3-16 {margin-left:18.987341772152%;}
.offset-4-16 {margin-left:25.316455696203%;}
.offset-5-16 {margin-left:31.645569620253%;}
.offset-6-16 {margin-left:37.974683544304%;}
.offset-7-16 {margin-left:44.303797468354%;}
.offset-8-16 {margin-left:50.632911392405%;}
.offset-9-16 {margin-left:56.962025316456%;}
.offset-10-16 {margin-left:63.291139240506%;}
.offset-11-16 {margin-left:69.620253164557%;}
.offset-12-16 {margin-left:75.949367088608%;}
.offset-13-16 {margin-left:82.278481012658%;}
.offset-14-16 {margin-left:88.607594936709%;}
.offset-15-16 {margin-left:94.936708860759%;}

/* fluid column offset sibling widths */
.col+.offset-1-16 {margin-left:7.594936708861%;}
.col+.offset-2-16 {margin-left:13.924050632911%;}
.col+.offset-3-16 {margin-left:20.253164556962%;}
.col+.offset-4-16 {margin-left:26.582278481013%;}
.col+.offset-5-16 {margin-left:32.911392405063%;}
.col+.offset-6-16 {margin-left:39.240506329114%;}
.col+.offset-7-16 {margin-left:45.569620253165%;}
.col+.offset-8-16 {margin-left:51.898734177215%;}
.col+.offset-9-16 {margin-left:58.227848101266%;}
.col+.offset-10-16 {margin-left:64.556962025316%;}
.col+.offset-11-16 {margin-left:70.886075949367%;}
.col+.offset-12-16 {margin-left:77.215189873418%;}
.col+.offset-13-16 {margin-left:83.544303797468%;}
.col+.offset-14-16 {margin-left:89.873417721519%;}


/* trackpipe/public/css/popup_image_phone.css */

/* popup image viewer */

/* --- gallery structure --- */

.popupimage_gallery {
    z-index: 15;
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    left: 0; top: 0;
    bottom: 0; right: 0;
    background: rgba( 0, 0, 0, 0.85 );
}

.popupimage_container {
    position: relative;
    display: table;
    left: 0;
    height: 100%; width: 1000%;
    list-style: none;
    padding: 0;
}

.popupimage_container * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba( 0,0,0,0 );
}

.popupimage_item {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: auto;
}

.popupimage_backer {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    background-color: black;
    border: 0;
}

.popupimage_item.loading {
    background: url(/img/playerbusy_mobile_dark.gif) no-repeat center center;
    background-size: auto;
}

.popupimage_item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

/* corrects failure on android to fully cover the window: */

.android .popupimage_gallery {
    bottom: -2px; right: -2px;
}

.android .popupimage_gallery img {
    border-right: 2px;
    padding-bottom: 2px;
}

/* --- widgets --- */

.popupimage_nav {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 33%;
    -webkit-tap-highlight-color: rgba( 0,0,0,0 );
}
.popupimage_nav.dismiss {
    right: 0;
}
.popupimage_nav.navdots {
    left: 34%;
    display: flex;
    justify-content: space-around;
    top: 80%;
    z-index: 1;
}

.popupimage_navicon {
    display: inline-block;
    position: absolute;
    top: 85%;
    margin: auto;
    background: url(/img/mobile-sprites-20150520.svg) no-repeat;
    background-size: 500% auto;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    z-index: 1;
}
.popupimage_dot {
    display: inline-block;
    top: 85%;
    font-size: 5rem;
    background-color: rgb(153,153,153);
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    height: 0;
    padding: 0.4rem;
    border-radius: 0.4rem;

}
.popupimage_dot.active {
    background-color: rgb(255,255,255);
}

.no-svg .popupimage_navicon {
    background-image: url(/img/mobile-sprites-20150520.png);
}
.popupimage_navicon.navdots {
    left: 50%;
    margin-left: -1rem;
}
.popupimage_navicon.dismiss {
    top: 1em;
    right: 1em;
    background-position: 0 24%;
}

.popupimage_loading {
    position: absolute;
    display: inline-block;
    background-color: black; 
    opacity: 0.5;
    filter:alpha(opacity=50);
    text-align: center;
    vertical-align: middle;
}

.popupimage_spinny_lg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_transp.gif) no-repeat;
    background-position: 50% 50%;
}

.popupimage_spinny_sm {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_small.gif) no-repeat;
    background-position: 50% 50%;
}

/* trackpipe/public/css/corp_2015.css */
/*------------------------------------------------------------*/
body {
    font: 13px/1.2307692308 'Helvetica Neue',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}
img {
    
    border:none;
    display: block;
    height:auto;
    max-width:100%;

}
a {
    color: #0687f5;
    text-decoration: none;
}
a:focus {
    outline:none;
}
.newline {
    display: inline-block;
}

/*sprites*/
.bc-ui {
    background: url('/img/_sprite-bc-ui-20170921.png') 0 0 no-repeat;
}
.bc-ui2 {
    background: url('/img/_sprite-bc-ui2-20180131@2x.png') 0 0 no-repeat;
    background-size: 100px 200px;
}
.discover-ui {
    background: url('/img/discover/_sprite-discover-20120528.2.png') 0 0 no-repeat;
}
.bc-home {
    background: url('/img/_sprite-bc-home-20151207@2x.png') 0 0 no-repeat;
    background-size: 200px 100px;
}
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}

/*------------------------------------------------------------*/

.vvv {
    background-image: linear-gradient(to right, #ffc600, #639aa9 50%, #ffc600 100%);
    -webkit-backface-visibility: hidden;
    height: 10px;
    position: relative;
}
.vvv > span {
    background-image: url('/img/homepage_2015/bc-vvv-reverse.svg');
    background-repeat: repeat-x;
    background-size: 116px 10px;
    display: block;
    height: 10px;
    position: absolute;
    width: 100%;
}
.nowrap {
    display: inline-block;
}

/*------------------------------------------------------------*/
/*page header*/
#menubar.menubar-2018 {
    max-width: 1360px;
}
.menubar-2018.secondary-menubar {
     max-width: 1392px;
}
.hd {
    background-color: rgba(255,255,255,0.98);
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.15);
    height: 105px;
    margin-top: 0;
    /*overflow: hidden;*/
    display: table;
    position:fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    transition: margin 0.25s ease-out;
}
.scroll-detected .hd {
    margin-top: -105px;
}
.hd > .row {
    position: relative;
}
.hd-mobile,
.menubar-2018-phone,
.menubar-2018-phone-wrapper,
.hd-banner-mobile-2018.desktop-responsive {
    display: none;
}
.bd.corp-header-padding {
    padding-top: 105px;
}
.bd.has-rock-the-vote-banner {
    padding-top: 184px;
}
.hd-logo {
    background:transparent url('/img/homepage_2015/bc-logo@2x.png') no-repeat;
    background-size: 100%;
    margin-top: 24px;
    height: 25px;
    width: 156px;
}
.hd-logo > span {
    display: none;
}

.hd-nav {
    font-size: 1.2307692308em;
    color: #777;
    margin:0;
    padding: 0;
}
.hd-nav > li > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hd-nav li {
    display: inline-block;
}
.hd-nav a {
    color: #161113;
    font-weight: 700;
    text-decoration: none;
}
.hd-nav a:hover,
.hd-nav a:focus {
    text-decoration: underline;
}

.nav-label {
    padding: 0 10px 0 0;
}

.corp-nav {
    margin: 15px 0 0;
    text-align: right;
}
.header-rework-2018 .corp-nav {
    margin: 10px 0 0; /* needs to be changed in concert with .hd.header-rework-2018 .hd-sub-head, plus resizing rules */
    float: right;
    width: 100%;
}
.corp-nav > li {
    border-right: 1px solid #e5e5e5;
    padding: 0 12px 0 5px;
    line-height: 20px;
}
.corp-nav > li:first-child {
    padding: 0 10px 0 0;
}
.corp-nav li.log-out-link,
.corp-nav > li:last-child {
    padding-right: 0;
    border-right: 0;
}
.corp-nav > li.cartitem:last-child {
    padding-right: 20px;
}

/* hides the 'for:' in front of artists/fans/labels when not the Queen's tongue */
.hd-mobile .corp-nav-label {
    display: none;
}
body:lang(en) .hd-mobile .corp-nav-label {
    display: inherit;
}

.user-nav {
    display: none;
    margin: 18px 0 0;
    position: relative;
    white-space: nowrap;
}
.user-nav > li {
    border-right: 1px solid #e5e5e5;
    padding: 0 10px;
    display: inline-block;
    line-height: 21px;
}
.user-nav > li:first-child {
    padding-left: 0;
}
.user-nav > li:last-child {
    border-right: none;
    padding-right: 0;
}
.user-nav .name {
    max-width: 30%;
    text-overflow: ellipsis;
    padding-left: 32px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    font-weight: normal;
}
li.user-nav-thumb {
    position: absolute;
    top: -4px;
    width: 25px;
    height: 25px;
    border-right: 0;
    padding: 0;
}
.logged-in .hd-sub-head {
    display: none;
}
.logged-in .user-nav {
    display: block;
}
.logged-in .log-in-link {
    display: none;
}
.hd.logged-in .hd-nav {
    font-size: 14px;
}
.hd.logged-in .corp-nav > li > ul {
    border-right: none;
    padding-right: 0;
}

/*cart*/
.cart.bc-home {
    background-size: 200px 100px;
}
.cartitem {
    position: relative;
}
.cartitem a {
    color: #fff;
}
.user-nav > li.cartitem {
    padding-right: 20px;
}

.cartitem a:hover {
    text-decoration: none;
}
.cart {
    display: inline-block;
    width: 21px;
    background-position: -179px -49px;
    position:relative;
    left:-3px;
    padding-right: 5px;
}
.cart-item-count {
    display: inline-block;
    vertical-align: top;
    background: #43b214;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    padding: 2px 3px;
    border-radius: 3px;
    position: absolute;
    right: 10px;
    top:-7px;
}

/*search*/
.searchwidget {
    text-align: right;
    margin-top: 24px;
    position: relative;
}

/* header (hiring) banner */
.hd-banner {
    left: 30%;
    margin: 24px 0 0 -36px;
    text-align: center;
    position: absolute;
    width: 40%;
}
/* omit homepage banner until localized text is available */
body:lang(ja) .hd-banner.pre-translation,
body:lang(fr) .hd-banner.pre-translation,
body:lang(ja) .hd-banner-mobile-2018.pre-translation,
body:lang(fr) .hd-banner-mobile-2018.pre-translation {
  display: none;
}

.hd-banner-inner {
    background: #eef2f3;
    border-radius: 3px;
    color: #161113;
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    margin: 0 auto;
    padding: 8px 20px;
    position: relative;
}
.hd-banner-inner a {
    color: #161113;
}
.hd-banner-inner a:hover {
    text-decoration: underline;
}


/* menubar 2018 header styles */
.hd.header-rework-2018 .corp-bclogo {
    /* changes need to be in concert with .hd.header-rework-2018 .hd-sub-head */
    margin-top: 23px;
    margin-bottom: 5px;

}
.hd.header-rework-2018 .corp-nav > li {
    border-right: none;
    padding: 0 0 0 25px;
}

.banner-lo .hd-banner-2018 {
    right: 125px;
    margin: 65px 0 0;
    text-align: right;
    position: absolute;
    width: 165px;
    font-size: 15px;
}
.hd-banner-2018.mobile-small,
.hd-banner-2018.small {
    display: none;
}
.header-rework-2018 .cart-wrapper-corp-lo {
    margin-top: -3px; /* so we don't bump down the sign up/login links to misalign with other header elements */
}
.banner-lo .hd-banner-2018.has-cart {
    left: 42.5%;
}
.special-banner-present .hd.header-rework-2018 .corp-nav > li {
    padding: 0 0 0 22px;
    vertical-align: middle;
}
.hd.header-rework-2018 .hd-nav a {
    font-weight: 600;
}
.hd.header-rework-2018 .hd-sub-head {
    color: #161113;
    font-size: 16px;
    font-weight: 400;
    /* adjust this margin in concert with .hd.header-rework-2018 .corp-bclogo */
    margin: 10px 0 0;
    opacity: 1;
    transition: opacity .2s ease;
}
.special-banner-present .hd.header-rework-2018 .hd-sub-head,
.special-banner-present .hd.header-rework-2018 .hd-nav {
    font-size: 15px;
}

.hd.header-rework-2018 .hd-sub-head .blue-gradient {
    color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.hd.header-rework-2018 .searchwidget {
    height: 37px;
    margin-top: 16px;
}

/* verification banner */
#menubar-verify-banner {
    display: none;
}
.hd .corp-banners {
    margin-top: 16px;
}

.hd .corpbanner.hide {
    display: none;
    height: 0;
}

.hd .corpbanner .text {
    margin-top: 16px;
}

.hd .corpbanner.verify-email a {
    color: #FFF;
    font-weight: bold;
}

.hd .corpbanner a:hover {
    text-decoration: underline;
}

.hd .gift-card-icon-bordered {
    margin-bottom: 2px;
    margin-right: 7px;
}

.hd a.gift-balance-link,
.hd a.gift-balance-link:hover,
.hd a.gift-balance-link:active {
    text-decoration: none;
}

.hd .gift-balance-link:hover .gift-card-balance {
    text-decoration: underline;
}

/*------------------------------------------------------------*/
/*prev/next stepper*/
.stepper {
    border:1px solid #9dc3ce;
    border-radius: 3px;
    display: inline-block;
    font-size: 0;
}
.stepper-prev,
.stepper-next,
.stepper-bcdaily {
    color: #408ea3;
    display:inline-block;
    text-decoration: none;
}
.stepper-prev,
.stepper-next {
    padding:5px 20px;
}
.stepper-bcdaily {
    padding:5px 10px;
}
.stepper-prev > *,
.stepper-next > *,
.stepper-bcdaily > * {
    transition: opacity 0.5s ease-out;
}
.stepper-prev.inactive,
.stepper-next.inactive {
    color: #b9d4dc;
    cursor: default;
}
.stepper-prev.immediate > *,
.stepper-next.immediate > * {
    transition: opacity 0s;
}
.stepper-prev.highlight > *,
.stepper-next.highlight > * {
    opacity: 0.5;
}
.stepper-prev {
    border-right:1px solid #9dc3ce;
}
.stepper-next {}
.stepper-prev:hover,
.stepper-next:hover,
.stepper-bcdaily:hover {
    color: #006480;
    cursor: pointer;
}
.stepper-prev.inactive:hover,
.stepper-next.inactive:hover {
    color: #b9d4dc;
    cursor: default;
}
/* svg icons */
.stepper .icon {
    fill:#408ea3;
    height: 10px;
    width: 8px;
}
.stepper-bcdaily .icon {
    position: relative;
    top: 1px;
    margin-left: 6px;
    fill:#408ea3;
    height: 10px;
    width: 10px;
}
.stepper-prev:hover .icon,
.stepper-next:hover .icon {
    fill: #006480;
}
.stepper-prev.inactive .icon,
.stepper-next.inactive .icon,
.stepper-prev.inactive:hover .icon,
.stepper-next.inactive:hover .icon {
    fill: #b9d4dc;
}

/*------------------------------------------------------------*/
/*pagination*/
.item-page {
    background: none;
    color: #408ea3;
    text-decoration: none;
}
.item-page {
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-weight: 500;
    height: 32px;
    line-height: 32px;
    padding: 5px 12px;
    cursor: pointer;
    transition: opacity 0.4s ease-out;
}
.item-page.immediate {
    transition: opacity 0s;
}
.item-page.highlight {
    opacity: 0.5;
}
.item-page.selected {
    color: #222;
}
.item-page.selected,
.item-page:hover {
    border-color: #afafaf;
}
.item-page.disabled {
    border-color: #d1d1d1;
    color: #ccc;
    cursor: default;
}
.item-page.disabled:hover {

}
.item-page.filler {
    background: none;
    border-color: transparent;
    color:#777;
}
.item-page.filler:hover {
    border-color: transparent;
}

/*------------------------------------------------------------*/
/*fluid aspect ratios*/
.ratio-1-1,
.ratio-4-3,
.ratio-3-2,
.ratio-16-9 {
    display: block;
    height: 0;
    font-size: 0;
    overflow: hidden;
    position: relative;
}
.ratio-1-1 img,
.ratio-4-3 img,
.ratio-3-2 img,
.ratio-16-9 img {
    height: auto;
    left: 0;
    outline:1px solid rgba(0,0,0,0.05);
    outline-offset:-1px;
    position: absolute;
    top: 0;
}
.ratio-1-1 {
    padding:100% 0 0;
}
.ratio-4-3 {
    padding:75% 0 0;
}
.ratio-3-2 {
    padding:66.66666667% 0 0;
}
.ratio-16-9 {
    padding:56.25% 0 0;
}


/*------------------------------------------------------------*/
@-webkit-keyframes fade-in {
    0% { opacity:0.0; }
    100% { opacity:1.0; }
}
@-moz-keyframes fade-in {
    0% { opacity:0.0; }
    100% { opacity:1.0; }
}
@keyframes fade-in {
    0% { opacity:0.0; }
    100% { opacity:1.0; }
}
@-webkit-keyframes fade-out {
    0% { opacity:1.0; }
    100% { opacity:0.0; }
}
@-moz-keyframes fade-out {
    0% { opacity:1.0; }
    100% { opacity:0.0; }
}
@keyframes fade-out {
    0% { opacity:1.0; }
    100% { opacity:0.0; }
}
.fade-in {
    -webkit-animation: fade-in 0.66s ease-in;
    -moz-animation: fade-in 0.66s ease-in;
    animation: fade-in 0.66s ease-in;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fade-out {
    -webkit-animation: fade-out 0.33s ease-out;
    -moz-animation: fade-out 0.33s ease-out;
    animation: fade-out 0.33s ease-out;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/*------------------------------------------------------------*/
@-ms-viewport { width:device-width; }
@-o-viewport { width:device-width; }
@viewport { width:device-width; }
@media (max-width:740px) {
    /* corp_2015_phone */
    .hd,
    #menubar-wrapper {
        display: none;
    }
    .hd-mobile,
    .placeholder-mobile-menubar {
        background-color: rgba(255,255,255,0.98);
        display: block;
    }
    .hd-banner-mobile-2018.desktop-responsive {
        display: block;
    }
    .menubar-2018-phone,
    .menubar-2018-phone-wrapper {
        display: flex;
    }
    .hd-logo {
        background:transparent url('/img/homepage_2015/bc-logo-compact@2x.png') no-repeat;
        background-size: 100%;
        display: block;
        float: left;
        height: 18px;
        margin:15px 0 15px 4.265%;
        width: 50px;
    }
    .hd-logo > span {
        display: none;
    }
    .bd {
        margin-top: 0;
        padding-top: 0;
    }
    .hd-mobile > .row,
    .bd-section > .row {
        max-width: 91.47%;
        position: relative;
    }
    .hd .col,
    .pg-ft-mobile .col {
        display: block;
        float: none;
        margin:0 !important;
        width: 100%;
    }
    .hd-nav {
        font-size: 13px;
        float: right;
        text-align: left;
    }
    .hd-nav a {
        color: #408294;
    }
    .corp-nav {
        margin: 15px 4.265% 0 0;
    }
    .corp-nav.has-cart {
        margin: 15px 2.265% 0 0;
    }
    .user-nav {
        margin: 15px 4.265% 9px 0;
        position: relative;
    }
    .corp-nav li {
        vertical-align:bottom;
    }
    .corp-nav > li > ul {
        border:none;
    }
    .corp-nav > li > ul,
    .user-nav > li {
        padding: 0;
    }
    .user-nav > li,
    .user-nav > li {
        padding: 0;
        vertical-align: bottom;
    }
    .corp-nav > li > ul > li a,
    .user-nav > li a {
        position: relative;
        padding: 0.5rem;
    }
    .user-nav > li a.gift-balance-link {
        top: -1px;
    }
    .user-nav > li:first-child+li,
    .user-nav > li:first-child+li > a {
        /*padding-left: 0;*/
    }
    .corp-nav > li > ul > li+li > a,
    .corp-nav.has-cart > li > ul > li > a,
    .user-nav > li+li > a {
        padding: 0 6px 0 4px;
    }
    .corp-nav > li > ul > li a:after/*,
    .user-nav > li a:after*/ {
        color: #ababab;
        content: '/';
        display: block;
        position: absolute;
        right: -3px;
        top: 0;
    }
    .corp-nav > li > ul > li:last-child a,
    .user-nav > li:last-child a {
        padding: 0 0 0 4px;
    }
    .corp-nav > li > ul > li:first-child a:after,
    .corp-nav > li > ul > li:last-child a:after,
    .user-nav > li:first-child a:after,
    .user-nav > li:last-child a:after {
        display: none;
    }
    .corp-nav.has-cart > li > ul > li:first-child a:after {
        display: inline;
    }

    .home-cartitem {
        display: inline-block;
        width: 1.94507em;
        height: 1.4em;
        margin: 0 0.875rem 0 1rem;
        position: relative;
    }
    .corp-nav .home-cartitem {
        margin: 0 0.875rem 0 0;
    }
    .home-cartitem .cart {
        /* image h/w ratio: 1/1.38933 */
        display: inline-block;
        width: 100%;
        height: 100%;
        background: url(/img/mobile-sprites-20150520.svg) no-repeat;
        background-size: 500% auto;
        background-position: 0 28.2%;
    }
    .no-svg .home-cartitem .cart{
        background-image: url(/img/mobile-sprites-20150520.png);
    }
    .home-cartitem .cart-item-count {
        position: absolute;
        top: -45%;
        left: 60%;
        min-width: 0.5rem;
        background: #5ac523;
        border: solid thin #43b214;
        border-radius: 0.1875rem;
        color: #fff;
        font-size: 0.6875rem;
        font-weight: bold;
        text-align:center;
    }
    .searchwidget {
        clear: both;
        margin: 0 auto 9px;
        max-width: 95.735%;
        padding: 0;
        text-align: left;
    }
    .hd-banner {
        left: inherit;
        margin: 0;
        position: relative;
        width: 100%;
    }
    .banner-lo .hd-banner-2018.wide {
        display: none;
    }
    .hd-banner-2018.mobile-small {
        display: inline;
        position: absolute;
        margin: 22px 0;
        left: 45%;
    }
    .hd-banner-inner {
        background: #ffffc5;
        border-bottom: 1px solid #f3f4b4;
        border-radius: 0;
        display: block;
        margin: 0;
        padding: 15px 5px;
        font-size: 12px;
    }
    .hd-banner-inner a {
        display: block;
        text-decoration: none;
    }
    .hd-banner-inner a:hover {
        text-decoration: none;
    }
    .headroom {
        clear: both;
    }
}
@media (max-width: 890px) and (min-width: 741px) {
    /*corp*/
    .hd .row,
    .bd-section > .row,
    .pg-ft .row {
        max-width: 97%;
    }
    .hd-nav {
        font-size: 14px;
    }
    .user-nav {
        white-space: nowrap;
    }
    .corp-nav > li {
        padding: 0 5px 0 2px;
    }
    .corp-nav > li:first-child {
        padding-right:5px;
    }
    .corp-nav > li > ul {
        margin-left: -5px;
    }
    .corp-nav-label {
        display: none;
    }
    .hd-sub-head {
        font-size: 14px;
        margin: 20px 0 0;
        white-space: nowrap;
    }
    .hd-banner {
        left: inherit;
        margin: 64px 0 0 0;
        right:0;
        width: auto;
    }
    .hd-banner-2018.mobile-small,
    .banner-lo .hd-banner-2018.wide {
        display: none;
    }
    .banner-lo .hd-banner-2018.small {
        display: inline;
        position: absolute;
        margin: 65px 0 0 0;
        left: inherit;
        right: 0;
    }
}
@media (max-width: 1024px) and (min-width: 891px) {
    /*corp*/
    .hd .row,
    .bd-section > .row,
    .pg-ft .row {
        max-width: 97%;
    }
    .hd-nav {
        font-size: 14px;
        white-space: nowrap;
    }
    .corp-nav-label {
        display: none;
    }
    .hd-sub-head {
        font-size: 14px;
        margin: 20px 0 0;
        white-space: nowrap;
    }
    .banner-lo .hd-banner-2018.wide {
        display: none;
    }
    .hd-banner-2018.small {
        display: inline;
        right: 190px;
        margin: 65px 0 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .banner-lo .hd-banner-2018.has-cart {
        left: 40.5%;
    }
}
@media (max-width: 1280px) and (min-width: 1025px) {
    /*corp*/
    .hd .row,
    .bd-section > .row,
    .pg-ft .row {
        max-width: 994px;
    }
    .banner-lo .hd-banner-2018.wide {
        display: none;
    }
    .hd-banner-2018.small {
        display: inline;
        left: 45%;
        margin: 65px 0 0 0;
        right:0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .banner-lo .hd-banner-2018.has-cart {
        left: 39.5%;
    }
}
@media (min-width: 1281px) {
    /*corp*/
    .hd .row,
    .bd-section > .row,
    .pg-ft .row {
        max-width: 1106px;
    }
}

/* adjustments for localized headers */

/* gift banner fixes */
@media (min-width: 1281px) {
    body:lang(fr).special-banner-present .hd-sub-head,
    body:lang(ja).special-banner-present .hd-sub-head {
        width: 90%;
        white-space: normal;
    }

    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018,
    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        width: 33%;
    }

    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018 {
        left: 46%;
    }

    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        left: 48%;
    }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    body:lang(fr).special-banner-present .hd-sub-head,
    body:lang(ja).special-banner-present .hd-sub-head {
        width: 90%;
        white-space: normal;
    }

    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018,
    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        width: 33%;
    }

    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018 {
        left: 44%;
    }

    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        left: 46%;
    }
}
@media (min-width: 891px) and (max-width: 1024px) {
    body:lang(fr).special-banner-present .hd-sub-head,
    body:lang(ja).special-banner-present .hd-sub-head {
        width: 90%;
        white-space: normal;
    }

    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018,
    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        width: 33%;
    }

    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018 {
        left: 43%;
    }

    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        left: 46%;
    }
}
@media (max-width: 890px) {
    .special-banner-present .hd-sub-head,
    body:lang(fr).special-banner-present .hd-sub-head,
    body:lang(ja).special-banner-present .hd-sub-head {
        width: 90%;
        white-space: normal;
    }

    .special-banner-present .banner-lo .hd-banner-2018,
    body:lang(fr).special-banner-present .banner-lo .hd-banner-2018,
    body:lang(ja).special-banner-present .banner-lo .hd-banner-2018 {
        right: 300px;
        margin: 25px 0 0;
    }
}

/* avoid line wrapping at wider widths in fr and ja */
@media (min-width: 1025px) {
    body:lang(fr) .hd-nav,
    body:lang(ja) .hd-nav {
        font-size: 14px;
        white-space: nowrap;
    }
    body:lang(fr) .hd-sub-head,
    body:lang(ja) .hd-sub-head {
        font-size: 14px;
        margin: 20px 0 0;
        white-space: nowrap;
    }
}

/* trackpipe/public/css/corp_2015_phone.css */
.hd,
#header-wrapper.header-rework-2018 {
    display: none;
}
.hd-mobile {
    display: block;
}
.menubar-2018-phone,
.menubar-2018-phone-wrapper {
    display: flex;
}
.hd-logo {
    background:transparent url('/img/homepage_2015/bc-logo-compact@2x.png') no-repeat;
    background-size: 100%;
    display: block;
    float: left;
    height: 18px;
    margin:15px 0 15px 4.265%;
    width: 50px;
}
.hd-logo > span {
    display: none;
}
.bd {
    margin-top: 0;
    padding-top: 0;
}
#pgBd .bd.corp-header-padding {
    padding-top: 0;
}
.hd-mobile > .row,
.bd-section > .row {
    max-width: 91.47%;
    position: relative;
}
.hd .col,
.pg-ft-mobile .col {
    display: block;
    float: none;
    margin:0 !important;
    width: 100%;
}

.hd-nav {
    font-size: 13px;
    float: right;
    text-align: left;
}
.hd-nav a {
    color: #408294;
}
.corp-nav {
    margin: 15px 4.265% 0 0;
}
.user-nav {
    margin: 15px 4.265% 9px 0;
    position: relative;
}
.corp-nav li {
    vertical-align:bottom;
}
.corp-nav > li > ul {
    border:none;
}
.corp-nav > li > ul,
.user-nav > li {
    padding: 0;
}
.user-nav > li,
.user-nav > li {
    padding: 0;
    vertical-align: bottom;
}
.corp-nav > li > ul > li a,
.user-nav > li a {
    position: relative;
    padding: 0.5rem;
}
.user-nav > li:first-child+li,
.user-nav > li:first-child+li > a {
    /*padding-left: 0;*/
}
.corp-nav > li > ul > li+li > a,
.user-nav > li+li > a {
    padding: 0 6px 0 4px;
}
.corp-nav > li > ul > li a:after/*,
.user-nav > li a:after*/ {
    color: #ababab;
    content: '/';
    display: block;
    position: absolute;
    right: -3px;
    top: 0;
}
.corp-nav > li > ul > li:last-child a,
.user-nav > li:last-child a {
    padding: 0 0 0 4px;
}
.corp-nav > li > ul > li:first-child a:after,
.corp-nav > li > ul > li:last-child a:after,
.user-nav > li:first-child a:after,
.user-nav > li:last-child a:after {
    display: none;
}
.home-cartitem {
    display: inline-block;
    width: 1.94507em;
    height: 1.4em;
    margin: 0 0px 0 2px;
    position: relative;
}
.corp-nav .home-cartitem {
    margin: 0 0.875rem 0 0;
}
.home-cartitem .cart {
    /* image h/w ratio: 1/1.38933 */
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(/img/mobile-sprites-20150520.svg) no-repeat;
    background-size: 500% auto;
    background-position: 0 28.2%;
}
.no-svg .home-cartitem .cart{
    background-image: url(/img/mobile-sprites-20150520.png);
}
.home-cartitem .cart-item-count {
    position: absolute;
    top: -45%;
    left: 60%;
    min-width: 0.5rem;
    background: #5ac523;
    border: solid thin #43b214;
    border-radius: 0.1875rem;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: bold;
    text-align:center;
}
.searchwidget {
    clear: both;
    margin: 0 auto 9px;
    max-width: 95.735%;
    padding: 0;
    text-align: left;
}
.searchwidget input[type=text] {
    background-color: #f3f3f3;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    padding: 4px 12% 4px 4%;
    width: 84%;
    -webkit-appearance: none;
}
.searchwidget button[type=submit] {
    top: 12px;
}
.searchwidget button .icon.bc-home {
    height: 14px;
    opacity: 0.7;
    width: 14px;
}
.hd-banner {
    left: inherit;
    margin: 0;
    position: relative;
    width: 100%;
}
.hd-banner-inner {
    background: #ffffc5;
    border-bottom: 1px solid #f3f4b4;
    border-radius: 0;
    display: block;
    margin: 0;
    padding: 15px 5px;
    font-size: 12px;
}
.hd-banner-inner a {
    display: block;
    text-decoration: none;
}
.hd-banner-inner a:hover {
    text-decoration: none;
}
.headroom {
    clear: both;
}

.hd-mobile .gift-card-icon-bordered {
    background: #408ea3;
    margin-bottom: 1px;
    margin-right: 3px;
}

.hd-mobile a.gift-balance-link,
.hd-mobile a.gift-balance-link:hover,
.hd-mobile a.gift-balance-link:active {
    text-decoration: none;
}

.hd-mobile .gift-balance-link:hover .gift-card-balance {
    text-decoration: underline;
}

#menubar-verify-banner {
    display: none;
}

/* trackpipe/public/css/fan/signup/fan_signup_common_phone.css */
/* common buttons */
.signup-common-form button,
.ui-dialog.nu-dialog .signup-common-form button {
    background: rgb(0,161,198);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;

    height: auto;
    min-height: 36px;
    padding: 0.2em 1em;
    vertical-align: top;
}
.signup-common-form button:focus,
.ui-dialog.nu-dialog .signup-common-form button:focus {
    background: rgb(0,161,198);
    border: none;
}
.signup-common-form button:active,
.ui-dialog.nu-dialog .signup-common-form button:active {
    background: rgb(0,161,198);
    border: none;
}
.signup-common-form button[disabled],
.ui-dialog.nu-dialog .signup-common-form button[disabled],
.signup-common-form button[disabled]:focus,
.ui-dialog.nu-dialog .signup-common-form button[disabled]:focus {
    background: #555;
    color: #ccc;
    opacity: 0.3;
    border: none;
}

.ui-widget-content .signup-common-form a,
.signup-common-form a {
    color: rgb(0,161,198);
}

.ui-dialog.nu-dialog.blank-title .ui-dialog-titlebar {
    border: none;
    background-color: #FFF;
}

.ui-dialog.nu-dialog.blank-title .ui-dialog-content {
    padding-top: 0;
}

/* fan action form */

.action-form {
    font-size: 16px;
    line-height: 20px;
}

.action-form .buttons {
    margin: 20px auto 0 auto;
}

.action-form .buttons button {
    width: 47%;
    margin-right: 0;
}

.action-form .buttons button.signup {
    margin-right: 4%;
}

.ui-dialog.nu-dialog .signup-common-form button.submit {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
}

.ui-dialog.nu-dialog .action-form button.login {
    background-color: #FFF;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
}

.modal-welcome-message {
    text-align: center;
    font-size: 16px;
    line-height: 20px;
}

.welcome-form .buttons {
    margin: 20px auto 0 auto;
}

.welcome-form .buttons button {
    width: 47%;
    margin-right: 0;
}

.welcome-form .buttons button.signup {
    margin-right: 4%;
}

.welcome-form .buttons button.ok-button {
    background-color: #FFF;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
}

.welcome-form .buttons {
    display: inline-block;
    width: 100%;
}

.welcome-form .buttons .get-app {
    margin-right: 4%;
}

.welcome-form .buttons .ok-button.unsupported {
    display: block;
    margin: 0 auto;
}

.verify-nag.signup-common-form {
     width: auto; 
}

.verify-nag button.nag-send-again,
.verify-nag button.nag-cancel {
    width: 46%;
}

.verify-nag .nag-email-change {
    display: block;
    margin: 24px 0 24px 0;
}

.signup-common-form .signup-common-form button.nag-send-again,
.ui-dialog.nu-dialog .signup-common-form button.nag-send-again {
    padding: 0.2em 0.6em;
}


/* invisible recaptcha used by captcha.js */

#global-invisible-recaptcha .grecaptcha-badge {
    z-index: 2000; /* this needs to be above modal dialog backdrop */
}

/* don't show tooltips on mobile */

.signup-tooltip-outer {
    display: none;
}

#menubar-verify-banner {
    display: none;
}

/* welcome_2 pane */
.signup-common-form.welcome-2-form .buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.welcome-2-form {
    margin: -36px 16px 0 16px;
}

.welcome-2-form h1 {
    text-align: center;
    font-size: 26px;
    margin: 20px 0 0 0;
}

.welcome-2-form h2 {
    font-size: 16px;
    margin: 12px 0 12px 0;
    font-weight: 400;
    text-align: center;
}

.welcome-2-form h2.active {
    margin: 34px 0 20px 0;
}

.welcome-2-form h2.welcome {
    font-size: 18px;
    line-height: 22px;
    margin: 6px auto 20px auto;
    width: 100%;
}

.welcome-2-form h2.welcome.no-tooltips {
    margin-top: 36px;
}

.complete-profile-form .item .hint {
    margin: 10px 0 15px 0px;
}

.complete-profile-form .profile-pic label.placeholder-wrapper,
.complete-profile-form .profile-pic label.placeholder-wrapper:hover {
    height: 100%;
    width: 100%;
    border: 4px solid #307d9a;
}

.complete-profile-form .profile-pic label.placeholder-wrapper.loading:focus,
.complete-profile-form .profile-pic label.placeholder-wrapper.loading:hover,
.complete-profile-form .profile-pic label.placeholder-wrapper.loading:hover:focus {
    border: 4px solid #307d9a;
}

.complete-profile-form .profile-pic .placeholder {
    background: #FFF;
}

.complete-profile-form .profile-pic .placeholder .camera-icon {
    fill: #409fc2;
    top: 26px;
    left: 21px;
}

.complete-profile-form .location-display {
    color: #FFF;
}

.complete-profile-form .profile-pic {
    margin-bottom: 20px;
}

.complete-profile-form .skip {
    color: #FFF;
    opacity: 0.5;
    margin-top: 15px;
    display: inline-block;
    font-size: 14px;
}

.signup-common-form.welcome-2-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons button {
    width: 100%;
    height: auto;
    padding: 12px 14px 12px 14px;
    border-radius: 4px;
}

.signup-common-form.welcome-2-form .buttons.split button,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button {
    width: 214px;
    height: auto;
    padding: 12px 14px 12px 14px;
    border-radius: 4px;
    border: 1px solid rgb(0,161,198);
}

.signup-common-form.welcome-2-form .buttons.split button:first-child,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button:first-child {
    margin-right: 20px;
}

.signup-common-form.welcome-2-form .buttons.split button:last-child,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button:last-child {
    background: #FFF;
    color: rgb(0,161,198);
}

.welcome-2-form .buttons a.no-thanks {
    display: block;
    text-align: center;
    margin: 16px 0 0 0;
}

.welcome-2-form .icon img {
    height: 235px;
    margin: 0 auto;
}

.welcome-2-form .to-bandcamp {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}




/* trackpipe/public/css/basic.css */
/* a new version of trackpipe_basic - global styles that apply everywhere */
body {
    font: 13px/1.231 'Helvetica Neue',Helvetica,Arial,sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
}

a, .pseudoLink, button {
    color: #0687f5;
    text-decoration: none;
    cursor: pointer;
}

a:hover, .pseudoLink:hover, button:hover,
a.hover, .pseudoLink.hover, button.hover {
    text-decoration: underline;
}

#centerWrapper {
    position: static;
    margin: 0px auto;
}

#propOpenWrapper {
    background-color: white;
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* vh - menubar */
    min-height: calc(100vh - 53px);
}

#pgBd {
    width: 915px;
    margin-bottom: 1.9em;
    padding: 35px 30px 45px;
    background: white;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
}

:where(li) {
    margin-top: 13px;
    margin-bottom: 13px;
}

/* used to visually hide text but keep it available for screen readers */    
.hiddenAccess {
    position: absolute;
    left: -10000px;
    top: -10000px;
}


/***** shared UI elements *****/

/* spinny */

.bc-spinny {
    height: 1em;
    width: 1em;
    animation: rotate 0.8s infinite linear;
    border: 0.25em solid #000;
    opacity: .38;
    border-right-color: rgba(0,0,0,.3);
    border-radius: 50%;
    min-width: auto;
    margin: 0 auto;
}

.bc-spinny.light {
    opacity: 1;
    border: 0.25em solid rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,.4);
}

@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}
/* trackpipe/public/css/collected_by.css */

/* also collected by */
#fan-container .collected-by {
    color: #999;
}
.collected-by.collectors, .collected-by.subscribers, .collected-by .message, .collected-by .subscriber-message {
    display: none;
}
/*.collected-by.tralbum.collectors, .collected-by.tralbum.collectors .message {
    display: block;
}*/
.collected-by .deets {
    font:normal 12px/1.16667em 'Helvetica Neue', Helvetica, sans-serif;
    position: relative;
    margin-top: 10px;
}
.collected-by .deets > .more-writing, .collected-by .deets > .loading-writing {
    display: block;
    margin-bottom: 15px;
}
.collected-by .deets > .writing {
    margin-bottom: 10px;
    min-height: 25px;
}
.collected-by.tralbum .deets > .writing {
    position: relative;
    margin-bottom: 15px;
}

.collected-by .deets > .writing.hidden {
    display: none;
}
.collected-by .deets > .writing a.censor {
    display: block;
    float: right;
    padding: 2px 10px;
    margin: 0 4px 5px 5px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    visibility: hidden;
}

.collected-by .deets > .writing:hover a.censor {
    visibility: visible;
    opacity: 0.5;
	filter: alpha(opacity=50);
	background-color: #eee;
    background-color: rgba(0,0,0,0.05);
}
.invertIconography .collected-by .deets > .writing:hover a.censor {
    opacity: 0.5;
	filter: alpha(opacity=50);
    background-color: #1a1a1a;
    background-color: rgba(255,255,255,0.1);
}
.collected-by .deets > .writing a.censor:hover {
    opacity: 1;
	filter: alpha(opacity=100);
    background-color: #eee;
    background-color: rgba(0,0,0,0.1);
}
.invertIconography .collected-by .deets > .writing a.censor:hover {
    opacity: 1;
	filter: alpha(opacity=100);
    background-color: #1a1a1a;
    background-color: rgba(255,255,255,0.1);
}
.collected-by .deets > .writing > .pic {
    position: absolute;
}
.collected-by.tralbum .deets > .writing > .pic {
    position: absolute;
    top: 3px;
}
.collected-by .deets > .writing > .text {
    font-family: georgia, serif;
    font-style: italic;
    margin-left: 32px;
}

.collected-by.tralbum .deets > .writing > .text {
    margin-left: 35px;
}

.collected-by.tralbum .text a {
    word-wrap: break-word;
}

#fan-container .collected-by .deets > .writing > .text {
    /* text color just for fan page; on tralbum pages, we want to inherit the custom design color from #pgBd */
    color: #595959;
}
.collected-by .deets > .writing a.name {
    font:500 normal 12px/1.25em 'Helvetica Neue', Helvetica, sans-serif;
    padding-right: 0.2em;
    color: inherit;
}
.collected-by .deets > .writing .fav-track {
    display: inline-block;
}

.collected-by .deets img.thumb {
    width: 28px;
    height: 28px;
}

.collected-by .deets > .writing + .no-writing {
    padding-top: 5px;
}

.collected-by .deets > .no-writing {
    margin-left: -5px;
    font-size: 0;
}
.collected-by .deets > .no-writing > .more-thumbs {
    display: block;
    margin: 2px 0 0 3px;
    font-size: 12px;
}
.collected-by .deets > .no-writing > .more-everything {
    display: block;
    margin: 2px 0 0 3px;
    font-size: 12px;
}
.collected-by .deets > .no-writing > .fan {
    display: inline-block;
    font-size: 11px;
    width: 28px;
    height: 28px;
    margin: 0 3px 7px 4px;
}
.collected-by .deets > .no-writing > .fan.hidden {
    display: none;
}

.collected-by .pic {
    position: relative;
}
.collected-by .pic img {
    outline: 1px solid #eee;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.collected-by .deets .pic > .tooltip {
    display: none;
    z-index: 10;
    position: absolute;
    bottom: 30px;
    left: -62px;
    width: 150px;
    padding-bottom: 3px;
}
.collected-by .deets .pic > .tooltip > div {
    text-align: center;
    background: #333; /* hello IE8 */
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 5px;
}
.collected-by .deets .pic > .tooltip img.grid {
    display: block;
    width: 140px;
    height: 140px;
    margin-bottom: 5px;
}
.collected-by .deets .pic > .tooltip .name {
    width: 100%;
}
.tooltip .writing {
    font-family: georgia, serif;
    font-style: italic;
    width: 100%;
}

/* loading indicator */
.collected-by .loading {
    display: block;
}
.collected-by .loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}
.collected-by .loading.initial-loading {
    height: 35px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

/* trackpipe/public/css/collected_by_phone.css */
.collected-by.tralbum.collectors, .collected-by.tralbum.collectors .message {
    display: block;
}
.collected-by .deets > .no-writing > .fan {
    display: inline-block;
    font-size: 11px;
    width: 13%;
    height: 28px;
}
.collected-by .deets img.thumb {
    width: 100%;
    height: auto;
}
.collected-by .deets > .writing {
    font-size: 0;
    display: flex;
}
.collected-by .deets > .writing > .pic,
.collected-by.tralbum .deets > .writing > .pic {
    position: relative;
    display: inline-block;
    margin-right: 15px;
    vertical-align: top;
    margin-top: 3px;
    flex: 0 0 15.42%;
    top: 0;
}
.collected-by .deets > .writing > .text,
.collected-by.tralbum .deets > .writing > .text {
    font-size: 14px;
    line-height: 18px;
    display: inline-block;
    flex-grow: 1;
    vertical-align: top;
    margin-left: 0;
    overflow: hidden;
}
.collected-by .deets > .no-writing {
    margin-left: 0;
}
.collected-by .deets > .no-writing > .fan {
    display: inline-block;
    font-size: 11px;
    height: 15.42%;
    width: 15.42%;
    margin: 0 1.49% 1.49% 0;
    vertical-align: top;
}
.collected-by .deets > .no-writing > .fan:nth-child(6n) {
    margin-right: 0;
}
.collected-by a.more-writing,
.collected-by a.more-thumbs {
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    display: inline-block;
}
.collected-by .loading {
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
}
.collected-by .loading.loading-writing {
    font-size: 12px;
    font-weight: bold;
    margin-top: 15px;
}
.collected-by .deets > .writing {
    margin-bottom: 15px;
}
.collected-by .deets > .writing a.name {
    display: block;
    margin-bottom: 4px;
    font: 600 normal 14px/1.25em 'Helvetica Neue', Helvetica, sans-serif;
    padding-right: 0.2em;
}
.collected-by .deets > .writing .fav-track {
    display: block;
    font: 400 normal 12px/1.25em 'Helvetica Neue', Helvetica, sans-serif;
    margin-top: 8px;
}
.collected-by a.not-a-link {
    color: #999;
}
/* trackpipe/public/css/fan/collection/collection.css */
/* THE NEW, HELLA MODERN COLLECTION PAGE */

/* page container junk */
#centerWrapper {
    width: 100%;
}
#propOpenWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#pgBd {
    width: 100%;
    padding: 0;
    flex: 1;
}
.fan-container .fan-bio-wrapper, .fan-container .tabs, .fan-container .owner-controls, .follow-grid .following-tabs-wrapper {
    width: 965px;
    margin: 0 auto;
    padding-bottom: 14px;
    position: relative;
}
.fan-container .grid-header {
    width: 965px;
    margin: 0 auto;
}
.bc-ui2 {
    background: url(/img/_sprite-bc-ui2-20180131@2x.png) no-repeat;
    background-size: 100px 200px;
}
/* used to visually hide text but keep it available for screen readers */
.hiddenAccess {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

#menubar {
    width: 965px;
    margin: 0 auto;
}
#menubar.menubar-2018 {
    min-width: 965px;
    width: auto;
}

/* globals */
body {
    -webkit-font-smoothing: antialiased;
}

a, .pseudoLink, button {
    color: rgb(0,161,198);
    text-decoration: none;
    cursor: pointer;
}
.error-bubble {
    font-weight: 400;
    font-size: 14px;
}

.alert {
    display: none;
    color: #e00;
    font-size: 100%;
    font-weight: bold;
    margin: 0.4em 0em;
}

.ui-dialog.nu-dialog button,
.ui-dialog.nu-dialog button:active,
.ui-dialog.nu-dialog button:focus,
.ui-dialog.nu-dialog button:hover {
    background: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
    font-size: 16px;
}

.ui-widget-content a {
    text-decoration: none;
    color: rgb(0,161,198);
}

.menubar .bandname {
    max-width: 40px;
}

.menubar {
    font-weight: 500;
}

/* banners */
.top-banner {
    width: 100%;
    background: linear-gradient(-45deg, #1DA0C3 0%, #30D4BB 100%);
    text-align: center;
    font-size: 13px;
    line-height: 40px;
    color: #999;
}
.top-banner .banner-content {
    width: 975px;
    margin: 0 auto;
}
.top-banner a {
    font-weight: bold;
}
.top-banner.welcome-non-fan {
    background-color: #D2ECF3;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #333;
    overflow: hidden;
    transition: padding 0.3s,
                height 0.3s;
}
.top-banner.welcome-non-fan.hide {
    padding: 0;
    height: 0;
}
.top-banner.welcome-non-fan span {
    display: inline-block;
    text-align: center;
    color: white;
}
.top-banner .getting-one {
    display: block;
}
.top-banner .start-your-own {
    margin-left: 21px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 9px 18px;
    display: inline-block;
    border-radius: 5px;
}
.fan-banner {
    text-align: center;
    width: 100%;
    height: 100px;
    background-position: center;
}
.fan-banner-inner {
    width: 975px;
    display: inline-block;
    position: relative;
    height: 100px;
}
.fan-banner.viewing-fan.empty {
     background: linear-gradient(135deg, #816FF7 0%, #30D4BB 100%);
}
.fan-banner.non-fan.empty {
    background: linear-gradient(135deg, #816FF7 0%, #30D4BB 100%);
}
.fan-banner.non-fan.empty.showing-non-fan-banner {
    background: #EEF2F3;
}

.onboarding-collection-banner {
    background: linear-gradient(135deg, #30D4BB 0%, #00a2c8 100%);
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    color: #FFF;
    max-height: 250px;
    overflow: hidden;
    padding: 0;

    transition: max-height 0.5s;
}

.onboarding-collection-banner.hide {
    max-height: 0;
}

.onboarding-collection-banner .banner-content {
    width: 900px;
    opacity: 1;
    padding-top: 15px;
    padding-bottom: 25px;

    transition: opacity 0.3s;
}

.onboarding-collection-banner.hide .banner-content {
    opacity: 0;
}

.onboarding-collection-banner h1 {
    font-weight: 500;
    line-height: 32px;
}

.onboarding-collection-banner h3 {
    font-weight: 500;
    line-height: 24px;
}

.onboarding-collection-banner .got-it {
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 9px 25px;
    display: inline-block;
    border-radius: 5px;
}

/* fan bio */
.fan-bio-photo {
    display: inline-block;
    vertical-align: top;
    width: 210px;
    margin: -30px 38px 0 0;
}
.fan-bio-photo .fan-bio-pic {
    position: relative;
}
.fan-bio-pic img,
.fan-bio-pic-existing img {
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.fan-bio-photo .fan-bio-pic button {
    position: absolute;
    /* right: 5px; */
    /* bottom: 5px; */
    top: 90px;
    left: 94px;
}
.fan-bio {
    display: inline-block;
    vertical-align: top;
    color: #333333;
}
.fan-bio-inner {
    width: 698px;
    display: inline-block;
    margin-top: 18px;
    margin-right: 15px;
}
.fan-bio .wide {
    display: block;
}
.fan-bio .skinny {
    display: none;
}
.fan-bio a > * {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 500;
}
.fan-bio .name {
    margin: 0 0 8px;
    max-width: 698px;
}
.fan-bio .name-inner {
    vertical-align: top;
    margin-top: 4px;
}
.fan-bio .name > * {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}
.fan-bio .name-inner > * {
    display: inline-block;
}
.fan-bio .name h1 {
    margin: 0 16px 0 0;
    vertical-align: bottom;
    font-size: 30px;
}

.fan-bio .edit-profile {
    color: #999;
    margin: 0 2px 0 0;
}
.fan-bio .edit-profile > a {
    border: 1px solid #939497;
    border-radius: 5px;
    outline: none;
    background: white;
    color: #828282;
    font-weight: 500;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
    display: inline-block;
}
.fan-bio .edit-profile-icon {
    display: inline-block;
    fill: #828282;
    vertical-align: bottom;
    display: inline-block;
    vertical-align: middle;
}
.fan-bio .share-wrapper {
    margin-left: 8px;
    margin-top: 4px;
}
.fan-bio .share-items {
    color: #999;
    margin: 6px 5px 2px 0;
    font-size: 0;
    line-height: 14px;
}
.fan-bio.owner .share-items {
    margin-left: 0;
}
.fan-bio .share-items a {
    color: rgb(0,161,198);
}
.fan-bio .share-profile-icon {
    fill: rgb(0,161,198);
    padding: 4px 4px 0 0;
}
.fan-bio .expand-share {
    color: #999;
}
.fan-bio .share-items > * {
    display: inline-block;
    vertical-align: middle;
}
.share-modal {
    text-align: center;
    margin-bottom: 20px;
}
.share-modal .buttons {
    margin: 20px auto 0 auto;
    width: 230px;
}
.share-modal .buttons > * {
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}
.share-modal .buttons a {
    display: inline-block;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}
.share-modal .buttons > *:first-child {
    margin-bottom: 16px;
}
.share-modal .buttons .facebook-share-ctrl {
    background-color: rgb(37,88,155);
    color: #FFF;
}
.share-modal .buttons .twitter-ctrl {
    background-color: #FFF;
    color: #333;
    border: 1px solid #CCC;
}
.share-modal .buttons .facebook-share-ctrl a {
    color: #FFF;
}
.share-modal .buttons .twitter-ctrl a {
    color: #333;
}
.share-modal .or-copy {
    margin: 26px 0 8px;
}
.share-modal .social-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    vertical-align: middle;
    margin: 2px 0 5px 2px;
}
.share-modal .social-icon.fb {
    background-color: rgb(37,88,155);
}
.share-modal .social-icon.twitter {
    background-color: rgb(85,172,238);
}
.share-modal .fb-logo {
    display: inline-block;
    fill: #FFF;
    width: 15px;
    height: 15px;
    margin-bottom: 1px;
    vertical-align: middle;
}
.share-modal .tw-logo {
    vertical-align: middle;
    display: inline-block;
    fill: rgb(85,172,238);
    width: 15px;
    height: 15px;
    margin-right: 4px;
}
.share-modal .share-url {
    padding: 4px 8px;
    background-color: #f0f0f0;
    color: #333;
    line-height: 18px;
    border: 1px solid #ccc;
    vertical-align: baseline;
    display: inline-block;
    width: 212px;
    overflow: scroll;
    white-space: nowrap;
}

.fan-bio .info {
    margin-top: 6px;
}

.fan-bio .info > * {
    display: inline-block;
    vertical-align: middle;
}

.fan-bio ol.info-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fan-bio ol.info-items li {
    display: block;
    color: #828282;
    margin: 4px 0;
}

.fan-bio ol.info-items li > * {
    display: inline-block;
}

.fan-bio .edit-profile {
    display: none;
}
.fan-bio.owner .edit-profile {
    display: inline-block;
}

/* follow/unfollow */
.follow-unfollow,
.follow-unfollow-inactive {
    border: 1px solid rgb(0,161,198);
    border-radius: 5px;
    outline: none;
    background: white;
    color: rgb(0,161,198);
    font-weight: bold;
    text-transform: uppercase;
    padding: 7px 6px 6px 6px;
    font-size: 11px;
    min-width: 88px;
    line-height: 14px;
    align-self: flex-start;
}
.follow-unfollow.thats-you {
    cursor: default;
    border: 1px solid rgba(255,255,255,0);
    color: #828282;
    padding: 7px 7px 7px 0;
}
.follow-unfollow.thats-you .thats-you-msg {
    display: inline-block;
    float: left;
}
.follow-unfollow.following {
    border: 1px solid rgba(255,255,255,0);
    padding: 6px 9px 7px 0;
    color: #828282;
}
.follow-unfollow-inactive.following {
    border: 1px solid rgba(255,255,255,0);
    padding: 6px 9px 7px 7px;
    color: #828282;
}
.follow-unfollow .following-checkmark {
    fill: #818285;
}
.follow-unfollow-inactive .following-checkmark {
    fill: #FFF;
}
.follow-unfollow .follow-plus {
    fill: rgb(0,161,198);
}
.follow-unfollow .plus {
    padding-right: 6px;
}
.follow-unfollow > *,
.follow-unfollow-inactive > * {
    display: none;
}
.follow-unfollow.following .checkmark,
.follow-unfollow-inactive.following .checkmark,
.follow-unfollow.following .following-msg,
.follow-unfollow-inactive.following .following-msg,
.follow-unfollow:not(.following) .plus,
.follow-unfollow:not(.following) .follow-msg {
    display: inline-block;
    vertical-align: middle;
}
.follow-unfollow-inactive,
.follow-unfollow-inactive:hover {
    text-decoration: none;
    cursor: default;
}
/* end follow/unfollow */


.fan-bio .location,
.fan-bio .views,
.fan-bio .plays,
.fan-bio .dot,
.fan-bio .items-in-common {
    color: #999;
}
.fan-bio .location,
.fan-bio .views {
    margin: 0;
}
.fan-bio .blurb {
    font-size: 15px;
    line-height: 22px;
    margin: 8px 0 0 0;
}
.fan-bio .blurb.skinny {
    display: none;
}
.fan-bio .website {
    font-size: 15px;
    line-height: 22px;
}
.fan-bio .website a {
    /*color: #333;*/
    /*text-decoration: underline;*/
}
.fan-bio .dot {
    margin-right: 3px;
}

.report-fan-icon {
    background-position: 0 -20px;
    min-height: 10px;
    display: inline-block;
    width: 18px;
    margin-top: 10px;
    cursor: pointer;

    position: absolute;
    top: 20px;
    right: 0;
}

/* grids - general */
.grids {
    color: #333333;
    margin: 0 0 100px 0;
}
.grids.disabled {
    opacity: 0.5;
}

/* grids - tabs */
.grids .grid-tabs-anchor {
    /*height: 50px;*/
}
.grids .grid-tabs-anchor.extra {
    /*height: 100px;*/
}
#grid-tabs-sticky.fixed {
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 0;
    z-index: 10;
    background: #FFF;
    margin: 0 auto;
    width: 100%;
    transition: padding-top .25s ease-out;
}
#grid-tabs-sticky.fixed.menubar-visible {
    padding-top: 54px;
}
#grid-tabs-sticky .missing-purchases-wrapper {
    position: relative;
    padding-bottom: 0;
}
#grid-tabs-sticky .missing-purchases-link {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 24px;
    color: #818285;
}
/*#grid-tabs-sticky.fixed .search {
    position: absolute;
    right: 0;
    top: 13px;
}*/
.grids ol.tabs {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    font-size: 0;
    display: flex;
}
.grids ol.tabs.small {
    border: none;
}
.grids ol.tabs .tab-title {
    font-weight: 600;
    margin-right: 2px;
    position: relative;
}
.grids ol.tabs .tab-title .tab-new-badge {
    color: #222;
    font-family: "Helvetica Neue";
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 5px;
    vertical-align: middle;
    display: inline-flex;
    border-radius: 4px;
    background: #99DBEB;
    margin-right:4px;
}
.grids ol.tabs .tab-title .count::before {
    content: '\2002';
}
.grids ol.tabs .tab-title .count {
    font-weight: 400;
}
.grids ol.tabs li {
    display: inline-block;
    font-size: 15px;
    text-align: center;
    padding: 10px 20px;
    color: rgb(0,161,198);
    cursor: pointer;
    border-bottom: 0;
    margin-bottom: -1px;
    line-height: 15px;
}
.grids ol.tabs.small li {
    font-size: 14px;
    padding-top: 0;
    margin-top: 0;
    height: 14px;
}
.grids ol.tabs.small li:first-child {
    padding-left: 0;
}
.grids ol.tabs.small li:not(:last-child) {
    border-right: 1px solid #ccc;
}
.grids ol.tabs li.active,
.grids ol.tabs li.active:hover {
    border-bottom: 2px solid rgba(51, 51, 51, 1);
    color: #333333;
    cursor: default;
}
.grids ol.tabs.small li:hover,
.grids ol.tabs.small li.active,
.grids ol.tabs.small li.active:hover {
    border-bottom: none;
}

/* tab tooltips */
.tab-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #5A5A5A;
    color: #fff;
    padding: 2px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    margin-bottom: 11px;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 31px;
}

.tab-tooltip .tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000000B2;
}

.grids ol.tabs .tab-title:hover .tab-tooltip {
    opacity: 1;
    visibility: visible;
}

/* grids - owner controls */
.grids .owner-controls {
    padding-bottom: 0;
}
.grids .collection-controls {
    margin: 20px auto 16px auto;
    position: relative;
    height: 25px;
}
.grids .collection-controls.has-search {
    margin-bottom: 16px;
}
.grids .following-genre-controls {
    flex-grow: 0;
    flex-basis: 500px;
}
/* Search grid handling */
.collection-grid .no-match {
    margin-left: 9px;
    margin-top: 20px;
    color: #999;
    font-size: 14px;
}
.collection-grid .no-match .search-term {
    font-weight: bold;
}
.grids .search {
    position: relative;
    height: 25px;
}
.grids .search .search-box {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    display: inline-block;
    width: 182px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px 5px 5px 22px;
    margin: 0;
}
.grids .search .search-box:focus {
    outline: none;
    border-color: #50a1e6;
    box-shadow: 0 0 5px #b4d7f9;
}

.grids .search .search-icon {
    fill: #939497;
    position: absolute;
    left: 7px;
    top: 26%;
}
.grids .search .search-spinner {
    position: absolute;
    left: 190px;
    top: 21%;
    display: none;
}
.loading-new-items .upload-spinner {
    width: 30px;
    height: 30px;
}
.upload-progress .upload-spinner,
.loading-new-items .upload-spinner,
.grids .search.searching .search-spinner {
    display: inline;

    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {
        transform: rotate(360deg);
    } to {
        transform: rotate(0deg);
    }
}
.grids .search .close-search-results {
    position: absolute;
    fill: #939497;
    left: 186px;
    padding: 7px;
    cursor: pointer;
    display: none;
}
.grids .search.searched .close-search-results {
    display: inline;
}
#search-spinner .st1 {
    fill: #606463;
}
#search-spinner .st2 {
    fill: #717474;
}
#search-spinner .st3 {
    fill: #7C7F7E;
}
#search-spinner .st4 {
    fill: #8D8F8F;
}
#search-spinner .st5 {
    fill: #BBBAB9;
}
#search-spinner .st6 {
    fill: #D2D2D1;
}
#search-spinner .st7 {
    fill: #DCDCDC;
}
#search-spinner .st8 {
    fill: #A4A4A5;
}

.grids .collection-controls .hidden-links {
    display: inline-block;
    width: 600px;
    position: absolute;
    right: 0;
    top: 4px;
    text-align: right;
}
.grids .hidden-links a {
    color: #818285;
    display: inline;
    margin-left: 10px;
}

/* wishlist control */
.grids .wishlist-controls {
    margin: 20px auto 0px auto;
    position: relative;
    height: 25px;
}
.grids .wishlist-controls.has-search {
    margin-bottom: 16px;
}
.grids .wishlist-visibility-container {
    text-align: right;
    margin-bottom: 16px;
    display: inline-block;
    width: 600px;
    position: absolute;
    right: 0;
    top: 4px;
    text-align: right;
}
.grids .wishlist-visibility-container > * {
    vertical-align: middle;
    display: inline-block;
}

/* following genre control */
.grids .following-genre-controls {
    margin: 0px auto 0px auto;
    position: relative;
    height: 23px;
}
.grids .following-genre-visibility-container {
    white-space: nowrap;
    text-align: right;
    margin-top: -4px;
    margin-bottom: 16px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 4px;
    text-align: right;
}
.grids .following-genre-visibility-container > * {
    vertical-align: middle;
    display: inline-block;
}

/* grids - grid */
.grids .grid {
    width: 986px;
    margin: 0 auto;
    overflow: hidden;
}
.grids .grid > .inner {
    height: 0;
    margin: 0;
    overflow: hidden;
}
.grids .grid.active > .inner {
    height: auto;
    margin: 16px auto 0 auto;
}
.grids .grid.active,
.grids .grid.active > .inner {
    overflow: visible;
}
/*.grids .follow-grid {
    margin: 16px auto 0 auto;
}*/


/* grids - collection items */
.collection-items {
    margin-bottom: 40px;
}
.collection-items.empty {
    display: none;
}
.collection-items.small-collection {
    margin-bottom: 40px;
}
.hidden-collection-msg {
    margin: 40px auto;
}
ol.collection-grid, li.collection-item-container {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
ol.collection-grid {
    font-size: 0;
    margin-left: -10px;
    margin-right: -10px;
}

.collection-grid > li {
    margin: 0 10px 15px 11px;
}

li.collection-item-container {
    font-size: 12px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    /*padding: 9px;*/
    border: solid 1px transparent;
    word-wrap: break-word; /* wraps long urls in FF */
    width: 230px;
    min-height: 360px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* fundraiser hacks */
.also-collected-hidden li.collection-item-container {
    min-height: 340px;
}

li.collection-item-container.gift-given, li.collection-item-container.hidden {
    min-height: 250px;
    z-index: 0;
}

li.collection-item-container > * {
    margin: 9px;
}

li.collection-item-container.playing, li.collection-item-container.active {
}
li.collection-item-container .track_play_time {
    float: right;
    color: #999;
    font-size: 12px;
    padding-right: 3px;
    display: none;
}
/*li.collection-item-container.playing .track_play_time {
    display: inline;
}*/
li.collection-item-container.wishlisted .wishlist-msg {
    display: none;
}
li.collection-item-container.wishlisted .wishlisted-msg {
    display: inline;
}
li.collection-item-container.render-hidden {
    display: none;
}

.expand-container{
    width: 100%;
    margin-top: 24px;
    margin-bottom: 30px;
    height: 40px;
    display: none;
}

.preference-container {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 30px;
    height: 40px;
    display: block;
}

.expand-container.show-button,
.expand-container.show-loading,
.expand-container.show-button .show-more,
.expand-container.show-loading .loading-new-items {
    display: block;
}

.expand-container.show-button .loading-new-items,
.expand-container.show-loading .show-more {
    display: none;
}

.expand-container .show-more, .preference-container .open-prefs {
    margin: auto;
    display: block;
    border: none;
    background: #1DA0C3;
    color: white;
    height: 40px;
    width: 250px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}
.preference-container .open-prefs.disabled {
    background: #eee;
    color: #888;
}
.expand-container .loading-new-items {
    text-align: center;
    color: #aaaaaa;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
}



.collection-item-details-container {
    padding-bottom: 20px;
}
.collection-item-gallery-container.placeholder {
    min-height: 363px;
    border: solid 1px #DDD;
}
.multiple-number {
    display: none;
}
.collection-item-art-container {
    /*height: 210px;*/
    /*width: 210px;*/
    margin-bottom: 10px;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.collection-item-art-container {
    /*height: 210px;*/
    /*width: 210px;*/
    margin-bottom: 10px;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.collection-item-art-container *:focus {
    outline: none;
}
.gift-given .collection-item-art-container {
    margin-bottom: 10px;
}
.gift-given .multiple .collection-item-art-container {
    margin-bottom: 20px;
}
.no-streaming .collection-item-art-container a {
    cursor: default;
}
.collection-item-art {
    display: block;
    width: 210px;
    height: 210px;
}
.collection-item-art.empty {
    height: 210px;
    width: 210px;
}

.collection-item-title {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    margin-bottom: 2px;
}

/* private item handling */
.collection-item-private-container .title {
    display: inline-block;
    width: 147px;
}
.collection-item-private-container .private-wrapper {
    display: inline-block;
    vertical-align: top;
    margin-left: 7px;
}
.collection-item-private-container .private-badge {
    display: inline-block;
    width: 52px;
    vertical-align: top;
    text-transform: uppercase;
    font-size: 10px;
    color: rgba(23,38,36,0.75);
    background-color: #e5e5e5;
    border-radius: 3px;
    text-align: center;
    padding: 2px 0;
    font-weight: 500;
    margin-top: -3px;
    cursor: pointer;
}
.collection-item-title.private {
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.collection-item-artist.private {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.private-dialog h4 {
    margin-top: 0;
    margin-bottom: 6px;
}

.item-link {
    color: #505958;
}
.item-link-alt {
    display: none;
}

.collection-item-artist {
    font-size: 1em;
    margin-bottom: 10px;
}

.collection-item-container .package-details {
    margin-bottom: 10px;
}
.collection-item-container .package-details .package-images {
    overflow: auto;
}
.collection-item-container .package-details h3 {
    font-size: 1em;
    font-weight: normal;
    margin-top: 5px;
    color: #999;
}
.collection-item-container .package-details ul,
.collection-item-container .package-details li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.collection-item-container .package-details ul {
    overflow: hidden;
}
.collection-item-container .package-details li {
    float: left;
    margin-right: 6px;
    position: static;
    width: 66px;
    height: auto;
    display: none;
}
.collection-item-container .package-details li:nth-child(-n+3) {
    display: block;
}
.collection-item-container .package-details li:nth-child(3) {
    margin-right: 0;
}
.collection-item-container .package-details li:last-child {
    margin-right: 0;
}

.collection-item-container .package-details .gallery_item img {
    height: 48px;
    width: 64px;
}

.collection-item-fav-track {
    margin-bottom: 10px;
    visibility: hidden;
}
.fan-container.mine .collection-item-container:hover .collection-item-fav-track,
.collection-item-container.editing .collection-item-fav-track,
.collection-item-fav-track.fav-track-set {
    visibility: visible;
}
.collection-item-fav-track.can-choose-track {
    min-height: 36px;
}
.collection-item-fav-track .fav-track-link {
    color: #505958;
}
.collection-item-fav-track .fav-track-link.private {
    color: #505958;
}
.favoriteTrackLabel {
    display: block;
    color: #999;
}
.collection-item-fav-track .fav-track-static {
    display: none;
}

.collection-item-why {
    display: block;
    margin-bottom: 10px;
    color: #595959;
}

.collection-item-why .text {
    font-family: georgia,serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.3846153846em;
    display: inline-block;
    width: 100%;
}


.collection-item-container .edit-item-link {
    display: inline-block;
    opacity: 0;
}
#collection-items .collection-item-container:hover .edit-item-link,
#collection-search-items .collection-item-container:hover .edit-item-link,
#collection-items .collection-item-container .edit-item-link:focus,
#collection-search-items .collection-item-container .edit-item-link:focus,
ol.collection-grid.tablet .collection-item-container .edit-item-link {
    opacity: 1;
    -moz-transition: visibility 0.1s ease-out;
    -webkit-transition: visibility 0.1s ease-out;
    transition: visibility 0.1s ease-out;
}

.collection-item-actions {
    overflow: visible;
    visibility: hidden;
}
.collection-item-actions.purchased {
    visibility: visible;
}
.collection-item-container:hover .collection-item-actions, .collection-item-container.playing .collection-item-actions, .collection-item-container.active .collection-item-actions, ol.collection-grid.tablet .collection-item-container .collection-item-actions {
    visibility: visible;
    -moz-transition: visibility 0.1s ease-out;
    -webkit-transition: visibility 0.1s ease-out;
    transition: visibility 0.1s ease-out;
}

.collection-item-container.editing .collection-item-actions {
    visibility: hidden;
}

li.collection-item-container.playing, li.collection-item-container.active {
    border: solid 1px #b2b2b2;
    /*padding: 9px;*/
}

.collection-item-actions ul {
    padding: 0px;
    margin: 0px;
    font-size: 0;
}
.collection-item-actions li {
    display: inline-block;
    list-style-type: none;      /* TODO: list-style-type or background img? */
    margin-top: 0px;
    margin-left: 0px;
    padding: 0;
    font-size: 12px;
}
.collection-grid .collection-item-actions li {
    margin-right: 0;
}

.collection-item-actions li.first {
    padding-left: 0px;
    list-style-type: none;       /* TODO: list-style-type or background img? */
}
.collection-item-actions li.hidden {
    display: none;
}

.collection-item-actions a, .collection-item-actions .purchased-msg-text {
    font-size: 12px;
}
.purchased li + .dot {
    display: none;
}

.collection-item-actions li.buy-now, .collection-item-actions li.hear-more {
    border: none;
}
.collection-item-actions li.hear-more-alt {
    display: none;
}

.collection-item-actions span.dot {
    font-size: 12px;
    color: #999;
    padding: 0 0.25em;
}
.collection-item-actions span.view a {
    font-size: 14px;
    line-height: 14px;
    padding:0 0.1em 0 0.15em;
}
.collection-item-actions div {
    display: inline-block;
}

.collection-item-actions span.collect-item-icon {
    display: inline-block;
    height: 13px;
    width: 14px;
    position: relative;
    top: 2px;
}
.collection-item-actions .wishlist-msg span.collect-item-icon {
    background-position: 0px -73px;
}
.collection-item-actions .wishlisted-msg span.collect-item-icon {
    background-position: -28px -73px;
}
.collection-item-actions .purchased-msg span.collect-item-icon {
    background-position: -42px -73px;
}
.collection-item-actions #wishlist-alert {
    display: none;
    color: red;
    font-weight: bold;
    font-size: 1.1em;
    margin: 4px;
}

.collection-item-actions .wishlist-msg,
.collection-item-actions .wishlisted-msg,
.collection-item-actions .purchased-msg {
    display: none;
}
.collection-item-actions.wishlist .wishlist-msg {
    display: inline;
}
.collection-item-actions.wishlisted .wishlisted-msg {
    display: inline;
    position: relative;
}
.collection-item-actions.purchased .purchased-msg {
    display: inline;
    cursor: default;
}
.wishlisted-msg span:first-child {
    position: relative;
}

.collection-item-container.editing .collected-by {
    display: none;
}
#fan-container .collected-by {
    font-size: 11px;
}
#fan-container.mine .collected-by {
    font-size: 12px;
}
#fan-container.mine .collected-by a.item-link {
    color: rgb(0,161,198);
}
.fanThumbs {
    margin-bottom: 3px;
}
.fanThumbs .fanThumb {
    height: 25px;
    width: 25px;
    margin-right: 6px;
}
.moreFanThumbs.hidden {
    display: none;
}
/*#fan-container .collected-by a.more-writing, #fan-container .collected-by a.more-thumbs {
    font-size: 11px;
}*/

div.comments-container.hidden {
    display: none;
}
.comment {
    margin-bottom: 6px;
}
.comment img {
    float: left;
    padding-right: 5px;
}
.comment p {
    padding-left: 31px;
    line-height: 1.2em;
}
.comment p span.author {
    font-weight: bold;
    padding-right: 3px;
}

.collection-item-container .item_link_play {
    position: relative;
    display: block;
    top: -206px; /* 206px, -221px */
    left: -1px;
}

.collection-item-container.no-streaming .item_link_play {
    display: none;
}

.collection-item-container .item_link_play_bkgd {
    position: absolute;
    display: inline-block;
    width: 74px;
    height: 54px;
    background-color: black;
    top: 73px;
    left: 69px;
}

.collection-item-container .item_link_play_widget {
    position: absolute;
    display: inline-block;
    top: 90px;
    left: 98px;
    width: 17px;
    height: 20px;
    background-position: -17px -140px;
}

.collection-item-container .item_link_play_bkgd, .collection-item-container .item_link_play_widget {
    opacity: 0;
    -moz-transition: opacity 0.1s ease-out;
    -webkit-transition: opacity 0.1s ease-out;
    -ms-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
}

.collection-item-container.playing .item_link_play_bkgd, .collection-item-container:hover .item_link_play_bkgd,
.collection-item-container.playing .item_link_play_bkgd, .collection-item-container .item_link_play:focus .item_link_play_bkgd {
    opacity: 0.5;
}

.collection-item-container.playing .item_link_play_widget, .collection-item-container:hover .item_link_play_widget,
.collection-item-container.playing .item_link_play_widget, .collection-item-container .item_link_play:focus .item_link_play_widget {
    opacity: 1;
}

.collection-item-container.playing .item_link_play_widget {
    background-position: 0px -140px;
}

.play_status {
    display: inline-block;
    height: 17px;
    width: 17px;
    background-image: url(/img/miniplaypause.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.play_status.playing {
    background-position: 0px -17px;
}

/* subscription item */
.subscription-item .collection-item-art-container {
    border-radius: 50%;
    overflow: hidden;
    outline: none;
}
.subscription-item .collection-item-fav-track {
    display:none;
}
.subscription-item .collected-by-header .item-stat:after {
    color: #999;
    content: '·';
    display: inline-block;
    padding:0 0 0 .25em;
}
.subscription-item .collected-by-header .item-stat:last-child:after  {
    display:none;
}
#fan-container.mine .subscription-item .collected-by {
    font-size:11px;
}

/* wishlist */

.separator {
    border-top: 1px dashed #ddd;
}

.hidden-items-header {
    font-size: 15px;
    color: #333333;
    display: block;
    font-weight: normal;
    margin-bottom: 20px;
}

.hidden-items-header.show-hide .link-title {
    cursor: pointer;
}

.hidden-items-header .link-title {
    font-weight: 600;
}

#wishlist-items-container p.wishlist-header-msg,
#hidden-items-container p.hidden-items-header-msg,
#private-items-container p.private-items-header-msg {
    font-size: 13px;
    display: block;
}
.wishlist-header-msg .bc-ui2.collect-item-icon{
    width: 15px;
    height: 13px;
    display: inline-block;
    background-position: 0px -72px;
    margin-bottom: -2px;
}

#hidden-items-container .show-hide {
    color: rgb(0,161,198);
}

#hidden-items-container .hidden-items-header-msg {
    margin: 12px auto 12px auto;
}

#wishlist-items-container p.empty-wishlist {
    font-weight: bold;
}

#wishlist-items-container .wishlist-img {
    width: 720px;
    height: 360px;
    background: url('/img/fans/how-to-wishlist.jpg') no-repeat;
    display: block;
    margin: 0 0 0 30px;
}

/* empty collection */
.collection-items .empty-collection {
    min-height: 120px;
    margin-top: 56px;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.collection-items .empty-collection .app {
    display: none;
}

.collection-items .empty-collection a {
    display: block;
    border: 1px solid rgb(0,161,198);
    color: rgb(0,161,198);
    width: 290px;
    margin: 0 auto;
    font-style: normal;
    font-weight: bold;
    padding: 19px 0;
    font-weight: 500;
    font-size: 15px;
    border-radius: 6px;
    margin-top: 22px;
}

/* gifts given */

.gifts-given-header {
    font-size: 15px;
    color: #333333;
    display: block;
    font-weight: normal;
}
.gifts-given-search-header {
    font-size: 15px;
    color: #666;
    display: block;
    font-weight: normal;
    margin-bottom: 10px;
    margin-left: 9px;
}
.gifts-given-header .link-title {
    font-weight: 600;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 2px;
}

#gifts-given-container p.gifts-given-header-msg,
#gifts-given-search-items-container p.gifts-given-header-msg {
    font-size: 13px;
    display: block;
}

#gifts-given-container .gifts-given-info,
#gifts-given-search-items-container .gifts-given-info {
    margin: 12px auto 12px auto;
}

#gifts-given-container .gift-logo,
#gifts-given-search-items-container .gift-logo {
    display: inline-block;
    fill: #333;
    vertical-align: bottom;
    padding-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

#gifts-given-container .multiple .collection-item-art-container .multiple-number, #hidden-items-container .multiple .collection-item-art-container .multiple-number,
#gifts-given-search-items-container .multiple .collection-item-art-container .multiple-number, #hidden-items-container .multiple .collection-item-art-container .multiple-number {
    width: 47px;
    height: 47px;
    background:#fff;
    border-radius: 999em;
    display:block;
    position: absolute;
    top: 2px;
    left: -1px;
    text-align:center;
    font-weight: bold;
    font-size: 15px;
    line-height: 47px;
    border: 1px solid #505958;
}

#gifts-given-container .multiple .collection-item-art-container:before, #hidden-items-container .multiple .collection-item-art-container:before,
#gifts-given-search-items-container .multiple .collection-item-art-container:before, #hidden-items-container .multiple .collection-item-art-container:before {
    content: "after";
    display: block;
    position: absolute;
    z-index:-1;
    top: 11px;
    left: 9px;
    width: 210px;
    height: 210px;
    border: 1px solid #999;
    background: #fff;
}

#gifts-given-container .multiple .collection-item-art-container:after, #hidden-items-container .multiple .collection-item-art-container:after,
#gifts-given-search-items-container .multiple .collection-item-art-container:after, #hidden-items-container .multiple .collection-item-art-container:after {
    content: "after";
    display: block;
    position: absolute;
    z-index:-2;
    top: 15px;
    left: 13px;
    width: 210px;
    height: 210px;
    border: 1px solid #999;
    background: #fff;
}

.collection-item-gallery-container.multiple {
    margin-left: 7px;
}

.collection-item-gift-given-title.hidden {
    display: none;
}

li.collection-item-container .release-label,
li.collection-item-container .release-label-dark {
    background: #e5e5e5;
    background-color: rgba(0,0,0,0.1);
    border-radius: 2px;
    /* maybe a pill? */
    /*border-radius: 9px;*/
    padding: 4px 6px;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 6px;
    margin-top: 0;
}
.release-label,
.release-label > a,
.release-label-dark,
.release-label-dark > a {
    display:inline-block;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.release-label > a,
.release-label-dark > a {
    /**/
}
.release-label,
.release-label > a {
    /*color: #505958;*/
    color: rgba(23,38,36,0.75);
}
.release-label > strong,
.release-label > a > strong {
    color: rgb(23,38,36);
}
.release-label-dark {
    background: #73807e;
    background-color: rgba(0,26,22,0.55);
}
.release-label-dark,
.release-label-dark > strong,
.release-label-dark > a,
.release-label-dark > a > strong {
    color:#fff;
}
.item-link+.release-label,
.item-link+.release-label-dark,
.collection-item-artist+.release-label,
.collection-item-artist+.release-label-dark {
    margin: -4px 0 12px;
}

/* share-dialog */
.share-dialog {
    padding: 0;
}
.share-dialog li {
    list-style-type: none;
}
.share-dialog li a {
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
    border: solid rgba(0,0,0,0.3) thin;
    border-radius: 0.3125rem;
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    color: #0687F5;
    display: block;
    font-size: 0.9375rem;
    font-weight: bold;
    line-height: 1.375rem;
    margin: 0.75rem 0 0;
    padding: 0.375rem 0;
    text-align: center;
    width: 100%;
}

/* followeers */

.followeer-grid {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    font-size: 0;
}
.followeer-grid .followeer {
    display: inline-block;
    width: 239px;
    margin-bottom: 42px;
}
.follow-grid .expand-container {
    margin-top: 16px;
}
.follow-grid .following-tabs-wrapper {
    display: flex;
}
.follow-grid .following-tabs-wrapper .tabs {
    white-space: nowrap;
}
.followeer-grid .followeer.render-hidden {
    display: none;
}
.followeer .fan-image {
    display: inline-block;
    flex-shrink: 0;
    height: 70px;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.followeer .fan-image img {
    height: 70px;
    width: 70px;
}
.followeer .genre-image {
    display: inline-block;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
    overflow: hidden;
}
.followeer .genre-image img.quarter {
    height: 35px;
    width: 35px;
}
.followeer .genre-image img.half {
    height: 70px;
    width: 70px;
}
.followeer .genre-image img.half.right {
    margin-right: -35px;
}
.followeer .genre-image img.half.left {
    margin-left: -35px;
}
.followeer .genre-image img.whole {
    height: 70px;
    width: 70px;
}
.followeer .fan-info,
.followeer .genre-info {
    margin-left: 13px;
    vertical-align: top;
    width: 154px;
    min-height: 55px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}
.followeer .genre-info .genre-info-inner {
    padding-bottom: 10px;
}
.followeer.no-image .fan-info {
    margin: 0px;
}
.followeer .fan-preview-info {
    vertical-align: top;
    margin-top: 7px;
    display: inline-flex;
    flex-direction: column;
}
.followeer .fan-location {
    color: #828282;
    font-size: 11px;
    flex-grow: 6;
    padding: 3px 0;
    width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.followeer .fan-genre {
    color: #333333;
    font-size: 11px;
    text-transform: lowercase;
}
.followeer .fan-num-in-common{
    color: #333333;
    font-size: 11px;
}
.followeer .fan-username,
.followeer .genre-name {
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    display: block;
}
.followeer .genre-name {
    overflow: visible;
    white-space: normal;
}
.followeer .fan-collection-preview {
    margin-bottom: 18px;
}
.followeer .fan-collection-preview ul {
    list-style: none;
    padding: 0;
}
.followeer .fan-collection-preview li {
    display: inline-block;
    font-size: 0px;
    margin: 0 3px 0 0;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.followeer .fan-collection-preview li img {
    height: 27px;
    width: 27px;
}

/* admin controls */
.fan-bio .admin {
    border-top: 1px dashed #ccc;
    margin-top: 20px;
    padding-top: 6px;
    font-size: 12px;
    line-height: 22px;
    color: #8a8a8a;
}

.fan-bio .admin a:not(.button) {
    font-weight: 500;
    color: #a9750e;
    border-bottom: 1px solid #a9750e;
    margin-right: 15px;
}

.fan-bio .admin button, .fan-bio .admin a.button {
    margin: 6px 3px 0 3px;
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    color: #666;
    background: #eee;
    display: inline-block;
}

.fan-bio .admin a.button {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

.fan-bio .admin button.feature {
    margin-left: 6px;
}

.fan-bio .admin button.feature, .fan-bio .admin button.unfeature {
    color: #3a3;
    background-color: #dfd;
}

.fan-bio .admin .subscriptions {
    margin-left: 16px;
    display: inline;
}

.fan-bio .admin ul {
    padding-left: 6px;
    display: inline;
}

.fan-bio .admin .cancel-subscription {
    margin-left: 4px;
}

.fan-bio .admin li {
    font-weight: bold;
    list-style-type: none;
    display: inline;
}

.fan-bio .admin li::after {
    content: ',';
}

.fan-bio .admin li:first-of-type::after {
    content: '';
}

/* track_play_waypoint */
.track-play-waypoint-wrapper {
    position: fixed;
    bottom: -100px;
    height: 56px;
    width: 200px;
    z-index: 111;
    left: 20px;
    right: 0;

    transition: bottom 0s 0.2s;
}
.track-play-waypoint-wrapper.activated {
    bottom: 30px;

    transition: bottom 0s 0s;
}
.track_play_waypoint {
    opacity: 1;
    display: block;
    position: absolute;
    width: 200px;
    height: 46px;
    padding: 5px 5px;
    margin-top: 0px;
    margin-bottom: 2px;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    top: 100px;

    -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    transition: opacity 0.2s ease-in, top 0.2s ease-in;
}
.track_play_waypoint.activated {
    opacity: 1;
    top: 0;
}

.waypoint-header-last, .waypoint-header-now {
    display: none;
    margin-bottom: 2px;
    font-size: .9em;
    color: white;
}
.track_play_waypoint.playing .waypoint-header-last, .track_play_waypoint.done .waypoint-header-now {
    display: none;
}
.track_play_waypoint.done .waypoint-header-last, .track_play_waypoint.playing .waypoint-header-now {
    display: inline-block;
}

.track_play_waypoint img {
    float: left;
    margin-right: 6px;
    height: 45px;
    width: 45px;
}

.waypoint-item-title, .waypoint-artist-title {
    max-width: 173px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    color: white;
}
.waypoint-item-title {
    font-weight: bold;
    font-size: .9em;
}
.waypoint-artist-title {
    font-size: .8em;
}

/* report fan */
.report-fan .item {
    margin-top: 10px;
}
.report-fan .item label {
    display: inline-block;
    width: 90px;
    text-align: right;
    vertical-align: top;
    margin: 4px 10px 0 0;
}
.report-fan .item .field-wrapper {
    display: inline-block;
    width: 336px;
}
.report-fan .item input {
    height: 18px;
    padding: 4px;
    width: 100%;
}

.report-fan .item textarea {
    padding: 4px;
    width: 100%;
}

.report-fan .item input.has-validation-error, .report-fan .item textarea.has-validation-error {
    border: 1px solid red;
}

.report-fan .error-bubble {
    margin-top: 2px;
}

.report-fan .buttons {
    width: 216px;
    margin: 16px 0 0 104px;
}

:lang(ja) .report-fan .buttons {
    width: 280px;
}

.ui-dialog.nu-dialog .report-fan button {
    width: 100px;
    background-color: #FFF;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
}
:lang(ja) .ui-dialog.nu-dialog .report-fan button {
    width: 120px;
}

.ui-dialog.nu-dialog .report-fan button:first-child {
    margin-right: 12px;
    background-color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
    color: #FFF;
}

/* skinny view, portrait tablet - 3 items*/
@media (max-width:980px) {
    .fan-container .fan-bio-wrapper, .fan-container .tabs, .fan-container .owner-controls, #menubar, .fan-banner-inner, .subscriber-landing > .content, .fan-container .grid-header, .hidden-collection-msg, .hidden-collection-msg, .follow-grid .following-tabs-wrapper {
        width: 714px;
    }
    #menubar.menubar-2018 {
        min-width: 714px;
        width: auto;
    }
    .follow-grid .following-tabs-wrapper {
        display: inline-block;
        padding-left: 12px;
    }
    .owner-controls.following-genre-controls{
        max-width: 315px;
        margin: 8px 0px 0px 0px;

    }
    #menubar-wrapper,
    #menubar-wrapper.header-rework-2018 {
        min-width: 714px;
    }
    body[lang="ja"] .menubar .search {
        width: 230px;
    }
    #menubar #explore {
        display: none;
    }
    #menubar #feed-main.feed-main {
        display: none;
    }
    #menubar #feed-main.feed-small-collection {
        display: block;
    }

    .fan-container .fan-bio-wrapper {
        padding-bottom: 0;
    }

    .fan-container .grid {
        width: 736px;
    }

    .fan-container .grids {
        margin-top: 0;
    }

    .fan-bio-inner {
        width: 510px;
    }
    .fan-bio-photo {
        width: 160px;
    }
    .fan-bio .edit-profile {
        margin: 0 2px 0 0;
    }
    .fan-bio .share-wrapper-wide {
        display: none;
    }
    .fan-bio .share-wrapper-skinny {
        display: inline-block;
    }
    .fan-bio.owner .share-items {
        margin: 0;
    }
    .fan-bio .share-wrapper {
        margin-top: 8px;
    }

    .fan-bio-photo {
        margin: -30px 24px 0 0;
    }

    .fan-bio .blurb.wide {
        display: none;
    }
    .fan-bio .blurb.skinny {
        display: block;
    }

    .fan-bio-pic {
        width: 160px;
        height: 160px;
    }

    .fan-bio-pic img {
        max-height: 160px;
        max-width: 160px;
    }

    .fan-bio .name {
        max-width: 510px;
    }

    .fan-bio .blurb {
        margin: 16px 0 0 0;
    }

    .fan-bio .wide {
        display: none;
    }
    .fan-bio .skinny {
        display: block;
    }

    /* meaty reveal - hide all initial-batch items after the 39th */
    /* note: this is only for the initial pageload. after pageload, we transition to using render-hidden. */
    li.collection-item-container.initial-batch:nth-child(1n+40),
    .followeer-grid .followeer.initial-batch:nth-child(1n+40) {
        display: none;
    }

    .menubar-gift-card-balance {
        display: none;
    }

    .grids .following-genre-visibility-container {
        margin: 0px 0px;
        right: unset;
    }

    :lang(fr) .missing-purchases-wrapper, :lang(ja) .missing-purchases-wrapper {
        display: none;
    }
}

/* start of mobile phone styles */
@media (max-width:479px) {
    .follow-grid .following-tabs-wrapper {
        padding-left: 0px;
    }
    
    .grids ol.tabs .tab-title .tab-new-badge {
        display: none;
    }
}

/* normal view, 4 items */
@media (min-width: 981px) and (max-width: 1231px){

    /* meaty reveal - hide all initial-batch items after the 40th */
    /* note: this is only for the initial pageload. after pageload, we transition to using render-hidden. */
    li.collection-item-container.initial-batch:nth-child(1n+41),
    .followeer-grid .followeer.initial-batch:nth-child(1n+41) {
        display: none;
    }
}

/* extra wide view, 5 items */
@media (min-width:1232px) {
    .fan-container .fan-bio-wrapper, .fan-container .tabs, .fan-container .owner-controls, #menubar, .fan-banner-inner, .subscriber-landing > .content, .fan-container .grid-header, .fan-container .grid.follow-grid, .fan-container .tabs.small, .hidden-collection-msg, .hidden-collection-msg, .follow-grid .following-tabs-wrapper {
        width: 1214px;
    }
    #menubar.menubar-2018 {
        min-width: 1214px;
        width: auto;
    }
    .fan-container .grid {
        width: 1234px;
    }
    ol.collection-grid {
        width: 1256px;
    }
    .fan-bio-inner {
        width: auto;
    }
    .fan-bio .share {
    }
    .fan-bio .blurb.wide {
        width: 718px;
    }

    .fan-bio .name {
        max-width: 718px;
    }

    /* meaty reveal - hide all initial-batch items after the 40th */
    /* note: this is only for the initial pageload. after pageload, we transition to using render-hidden. */
    li.collection-item-container.initial-batch:nth-child(1n+41),
    .followeer-grid .followeer.initial-batch:nth-child(1n+41) {
        display: none;
    }
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

/* Internationalization tweaks */

:lang(fr) .grids .search .search-box {
    width: 222px;
}


.collection-grid .collection-item-art-container .banner-container {
    position: absolute;
    overflow: hidden;
    width: 210px;
    height: 210px;
    cursor: pointer;
    pointer-events: none;
}

.collection-grid .collection-item-art-container .banner-outer {
    margin: 26px 0 0 58px;
    width: 210px;
    height: 210px;
}

.collection-grid .collection-item-art-container .banner-inner {
    font-size: 13px;
    font-weight: 500;
    color: white;
    margin-left: 15px;
    background: #1DA0C3;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    padding: 0.3rem 0;
    cursor: pointer;
}

/* trackpipe/public/css/fan/collection/collection_phone.css */
a:hover, .pseudoLink:hover, button:hover, a.hover, .pseudoLink.hover, button.hover {
    text-decoration: none;
}


/* hide desktop stuff */
#menubar-wrapper,
.track-play-waypoint-wrapper,
.onboarding-collection-banner,
#collection-player {
    display: none;
}

.fan-container .fan-bio-wrapper,
.fan-container .tabs,
.fan-container .owner-controls,
#menubar, .fan-banner-inner,
.subscriber-landing > .content,
.fan-container .grid-header,
.fan-container .grid,
.fan-bio-inner {
    width: 100%;
}
.fan-container .grids {
    min-height: 27em;
}

#centerWrapper {
    width: auto;
    margin: 0 auto;
    position: relative;
}

.fan-container .top {
    border-bottom: 1px solid #ccc;
    background-color: #FFF;
}

body, #pgBd, #propOpenWrapper {
    background: url(/img/bg-mobile-light-20120612.gif) #f0f0f0;
}

/* globals */
input, textarea {
    border-radius: 5px;
    font-size: 16px;
}
a, .pseudoLink, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    color: rgb(0,161,198);
    text-decoration: none;
    cursor: pointer;
}

/* fan banner */
.fan-banner,
.fan-banner-inner {
    height: 138px;
}
.top-banner {
    width: auto;
 }
.top-banner.welcome-non-fan span {
    width: 100%;
}
.top-banner.welcome-non-fan {
    padding: 1.2em 0.6em 1.5em 0.6em;
}
.top-banner .start-your-own {
    margin-top: 1em;
    padding: 0.6em 1.5em;
    border-radius: 0.3em;
    width: 10em;
    margin: 1em auto 0 auto;
    display: block;
}

/* empty collection */
.collection-items .empty-collection .app {
    font-weight: bold;
    display: block;
    background: none;
    border: solid 1px rgb(0,161,198);
    color: rgb(0,161,198);
    width: 288px;
    height: 16px;
}
.collection-items .empty-collection {
    margin-top: 2em;
    color: rgb(128,129,130);
}
.collection-items .empty-collection a {
    background-color: rgb(0,161,198);
    color: #FFF;
}

/* fan bio photo */
.fan-bio-photo {
    position: absolute;
    margin: 0;
    top: -92px;
    width: 135px;
    height: 135px;
    outline: none;
    border-radius: 5px;
}

.fan-bio-photo .fan-bio-pic {
    width: 135px;
    height: 135px;
    outline: none;
    border-radius: 5px;
}

.fan-bio-pic img {
    width: 135px;
    height: 135px;
    outline: none;
    border: 2px solid #FFF;
    border-radius: 5px;
}

.fan-bio-pic-editing img {
    width: 135px;
    height: 135px;
    outline: none;
    border-radius: 5px;
    border: 2px solid #FFF;
}

.fan-bio-photo.editing .fan-bio-pic-upload-container {
    background-color: rgba(0,0,0,0.3);
    margin: 2px;
    height: 135px;
    width: 135px;
}
.fan-bio-photo.editing .fan-bio-pic-upload-container.uploading {
    background-color: rgba(238,242,243,1);
}
.upload-progress .upload-spinner {
    width: 3em;
    height: 3em;
    position: absolute;
    top: 37%;
    left: 37%;
}

/* fan bio */
#fan-bio-vm {
    margin: 0 16px;
    margin-bottom: 16px;
}
.fan-bio {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.fan-bio-inner {
    width: 100%;
}
.edit.fan-bio .fan-bio-inner {
    margin: 4.8em 0 0 0;
}
.fan-bio.owner .fan-bio-inner {
    margin-top: 0.9em;
}
.fan-bio .edit-profile {
    margin: 1em 0 0 153px;
    width: 100%;
}
.fan-bio .edit-profile svg {
    display: none;
}
.fan-bio .edit-profile > a {
    background: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: rgb(0,161,198);
    background-color: #FFF;
    padding: 7px 10px;
    border-radius: 5px;
    border: 1px solid rgb(0,161,198);
}
.fan-bio .share {
    display: none;
}
.fan-bio .genre {
    display: block;
    margin: 0;
    color: #939497;
}
.fan-bio .blurb {
    font-size: 14px;
    line-height: 19px;
    margin: 6px 0 6px 0;
}
.fan-bio .name, .fan-bio .info {
    margin: 0;
}
.fan-bio .name {
    display: flex;
    flex-wrap: wrap;
}

.fan-bio .name h1 {
    font-size: 23px;
}

.fan-bio .dot {
    margin-right: 3px;
    margin-left: 3px;
}

.fan-bio ol.info-items {
    display: block;
    margin-top: 10px;
    width: 100%;
    font-size: 0;
    line-height: 18px;
}

.fan-bio ol.info-items:first-child {
    margin-top: 7px;
}

.fan-bio ol.info-items li {
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    width: 100%;
}

.fan-bio ol.info-items.split li {
    width: auto;
    max-width: 48%;
    display: inline-block;
}

.fan-bio ol.info-items.split li:first-child:after {
    content:"·";
    vertical-align: middle;
    margin-left: 3px;
}

.fan-bio .website {
    width: 100%;
}

.fan-bio .website a, .fan-bio .location span {
    display: inline-block;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.fan-bio .website a {
    line-height: 1.231;
}

.fan-bio ol.info-items li > * {
    vertical-align: top;
    max-width: 100%;
}
.fan-bio ol.info-items li {
    margin: 0 6px 0 0;
}
.fan-bio ol.info-items li:first-child > * {
    /*max-width: 99%;*/
}

.fan-bio ol.info-items .items-in-common {
    margin: 0;
    color: #939497;
}
.fan-bio #following-actions {
    display: inline-block;
    margin: 1em 0 0 11.8em;
    width: 100%;
    flex-grow: 1;
}
.fan-bio.no-photo #following-actions {
    display: inline-block;
    white-space: nowrap;
    margin: 0 0 0 0;
    width: initial;
}

/* follow/unfollow */
.follow-unfollow {
    font-size: 14px;
    line-height: 16px;
    padding: 6px 9px;
    background: transparent;
    margin-right: 1rem;
}
.follow-unfollow.following {
    padding-top: 6px;
    padding-bottom: 6px;
}
.follow-unfollow:not(.following) .follow-msg {
    vertical-align: bottom;
}
.fan-bio .follow-unfollow {
    margin-right: 0.5rem;
}
.follow-unfollow-container {
    min-width: 104px;
}
/* end follow/unfollow */

/* report fan */
.report-fan .item label {
    width: auto;
    margin: 0 10px 4px 0;
}
.report-fan .item input,
.report-fan .item textarea {
    padding: 4px 0 4px 4px;
    width: 99%;
}
.report-fan .item .field-wrapper {
    width: 100%;
}
.report-fan .buttons {
    margin: 16px auto 0 auto;
}
.report-fan .buttons .buttons-inner {
    width: 216px;
}

/* grid tabs */
.grids ol.tabs {
    display: flex;
    background-color: #fff;
}

.grids ol.tabs .tab-title {
    margin-right: 0;
}

.grids ol.tabs .tab-title .count {
    display: block;
    margin-top: 5px;
}
.grids ol.tabs .tab-title .count::before {
    content: '';
}
.grids ol.tabs li {
    margin-top: 8px;
    padding: 5px 0 10px 0;
    width: 25%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.grids ol.tabs li.fan-suggestions {
    width: 30%;
}
.grids .follow-grid ol.tabs li {
    width: 50%;
}

/* grids */
ol.collection-grid, li.collection-item-container {
    /*padding: 9px;*/
    margin: 0;
}
.grids {
    margin-bottom: 0;
}
.grids .grid.active > .inner {
    height: auto;
    margin: 16px auto 0 auto;
}
.grids #following-grid.grid.active > .inner {
    margin-top: 0;
}
.grids .wishlist-controls {
    margin-top: 0;
    height: 60px;
}

.follow-grid .following-tabs-wrapper {
    width: 100%;
}

.grids .wishlist-visibility-container, .grids .following-genre-visibility-container {
    text-align: left;
    width: auto;
    margin: 0 0 0 12px;
    position: relative;
    top: auto;
    right: auto;
    line-height: 65px;
    font-size: 16px;
}
.grids .wishlist-visibility-container > *, .grids .following-genre-visibility-container > * {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}
.grids .wishlist-visibility-container select, .grids .following-genre-visibility-container select {
    color: rgb(0,161,198);
    font-weight: bold;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    padding-right: 0;
}
.grids .wishlist-visibility-container .down-arrow, .grids .following-genre-visibility-container .down-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(0, 161, 198);
    display: inline-block;
    margin-left: -2px;
    margin-top: 3px;
}

/* collection */
.collection-items.small-collection {
    margin-bottom: 0;
}
.collection-items {
    margin: 24px 9px 0 9px;
    border-top: 1px dotted #CCC;
    padding-top: 16px;
}
.collection-items:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}
.collection-grid li.collection-item-container {
    margin: 0;
    padding: 0;
    width: 100%;
    margin-bottom: 26px;
    background: #FFF;
    border: 0;
    box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.1);
}

.visitor-favtrack-wrapper {
    font-size: 14px;
    margin: 10px;
    font-family: georgia, serif;
    font-style: italic;
}
.visitor-favtrack-wrapper .visitor-favtrack {
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-style: normal;
    margin-top: 5px;
    color: #999;
    font-size: 13px;
}
.collection-grid .collection-item-gallery-container {
    font-size: 0;
}
li.collection-item-container > * {
    margin: 0;
}
.collection-item-art {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
}
.collection-item-art-container {
    outline: none;
    position: relative;
    margin-bottom: 0;
}
.gift-given .collection-item-art-container,
.gift-given .multiple .collection-item-art-container {
    margin-bottom: 0;
}
.subscription-item .collection-item-art-container {
    display: block;
    height: 0;
    padding-top: 100%;
}
.collection-item-art-container > a,
.collection-item-art-container > .visitor-sub-only-art-wrapper {
    display: block;
    height: 0;
    padding-top: 100%;
}
.collection-item-title {
    margin: 0 0 2px 10px;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
    width: 89%;
}
.collection-item-title.private {
    margin-top: 10px;
}
.collection-item-artist {
    margin: 4px 10px 10px 10px;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.collection-item-fav-track {
    margin: 10px 10px 4px 10px;
}
.favoriteTrackLabel {
    margin-bottom: 6px;
    display: inline-block;
}
.collection-item-container.editing .favoriteTrackLabel {
    margin-bottom: 0;
}
.collection-item-container .edit-item-link {
    visibility: visible;
}
.collection-item-container .edit-item-link a {
    font-weight: bold;
}
.collection-item-gallery-container .item-link {
    display: inline-block;
    margin-top: 10px;
    flex-grow: 9;
    max-width: 90%;
    min-width: 0;
}
.collection-item-gallery-container.private .item-link {
    margin-top: 0;
}
.collection-item-container .collection-title-details {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.fan-bio .contextual-menu,
.collection-item-container .contextual-menu {
    font-size: 30px;
    text-align: right;
    flex-grow: 1;
    position: relative;
}
.fan-bio .contextual-menu .dots,
.collection-item-container .contextual-menu .dots {
    opacity: 0.5;
    padding: 0 10px;
}
.fan-bio .contextual-menu .dots {
    margin-right: -10px;
}
.fan-bio .contextual-menu-expanded,
.collection-item-container .contextual-menu-expanded {
    display: none;
    position: absolute;
    top: 28px;
    right: 12px;
    color: #505958;
    font-size: 12px;
    border: 1px solid #bbbab9;
    background: #FFF;
    font-weight: 500;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
    white-space: nowrap;
}
.fan-bio .contextual-menu-expanded {
    right: 2px;
}
.fan-bio .contextual-menu-expanded.visible,
.collection-item-container .contextual-menu-expanded.visible {
    display: block;
}
.fan-bio .contextual-menu-expanded a,
.collection-item-container .contextual-menu-expanded a {
    color: #505958;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 6px;
}
.fan-bio .contextual-menu {
    display: inline-block;
    line-height: 0.8em;
    float: right;
    color: #333;
    margin-top: 2px;
}
.fan-bio .contextual-menu-expanded {
    top: 21px;
}
.item-link+.release-label, .item-link+.release-label-dark, .collection-item-artist+.release-label, .collection-item-artist+.release-label-dark {
    margin-left: 10px;
}
li.collection-item-container .release-label,
li.collection-item-container .release-label-dark {
    margin-left: 10px;
    margin-top: -4px;
    margin-bottom: 0px;
}
#fan-container .play {
    background: url('/img/order_history/play-rounded-blue.svg');
    background-size: contain;
    margin-right: 7px;
    vertical-align: middle;
    margin-bottom: 2px;
    height: 11px;
    width: 10px;
    display: inline-block;
}
#fan-container .listen-in-app {
    font-size: 13px;
    font-weight: bold;
    display: block;
    text-align: center;
    padding: 18px 10px;
    border-top: 1px solid rgba(0,161,198, 0.1);
}
#fan-container .collected-by {
    font-size: 12px;
    display: block;
    padding: 18px 10px;
    background: rgba(0,0,0,0.01);
    border-top: 1px solid rgba(0,161,198, 0.1);
}
.collection-item-details-container {
    padding-bottom: 0;
}
.also-link {
    color: rgb(0,161,198);
    font-weight: bold;
}
.collection-item-why {
    margin: 8px 10px 20px 10px;
}
.collection-item-container.editing .collection-item-why {
    color: #999;
    margin-bottom: 8px;
}
.collection-item-fav-track.can-choose-track {
    min-height: 40px;
}
.collection-item-container .package-details {
    display: inline-flex;
    justify-content: center;
    order: -1;
    width: 100%;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: rgb(251,252,252);
    margin: 0;
}
.collection-item-container .package-details .package-images {
    width: 97%;
}
.collection-item-container .package-details ul {
    display: flex;
}
.collection-item-container .package-details li {
    width: 18.4%;
    height: initial;
    display: block;
    outline: 1px solid rgba(0,0,0,0.1);
    outline-offset: -1px;
    margin-right: 2%;
}
.collection-item-container .package-details li:nth-child(3) {
    /* override for desktop css */
    margin-right: 2%;
}
.collection-item-container .package-details .gallery_item img {
    height: initial;
    width: initial;
}

/* followeers */
.followeer-grid {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.follow-grid .expand-container.show-loading,
.follow-grid .expand-container.show-button {
    margin-top: 2em;
}
.followeer-grid .followeer {
    width: initial;
    display: flex;
    flex-grow: 1;
    margin: 0;
    padding: 1rem 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.followeer .genre-image img {
    display: inline;
}

/* suggestions have an inner wrapper */
.followeer-grid .followeer.followeer-suggestion {
    display: block;
}
.followeer-grid .followeer-suggestion .suggestion-inner {
    display: flex;
    flex-grow: 1;
}
.followeer-grid .followeer-suggestion .suggestion-info {
    margin-left: 1rem;
    margin-top: 0.5rem;
}
.followeer-grid .followeer-suggestion .fan-genre,
.followeer-grid .followeer-suggestion .fan-genre {
    font-size: 14px;
}
.followeer-grid .followeer:last-child {
    border-bottom: none;
}
.followeer .fan-info,
.followeer .genre-info {
    min-height: 4.5rem;
    height: initial;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}
.followeer .fan-info-inner,
.followeer .genre-info-inner {
    width: 50%;
}
.followeer .fan-image,
.followeer .genre-image {
    margin-left: 1rem;
    height: initial;
    outline: none;
}
.followeer .fan-image img {
    height: 5rem;
    width: 5rem;
    outline: 1px solid rgba(0,0,0,0.05);
}
.followeer .fan-info .fan-username,
.followeer .genre-info .genre-name {
    height: 1.2em;
    width: auto;
    margin-top: 0;
    display: block;
    font-size: 16px;
}
.followeer .fan-info .fan-location {
    font-size: 14px;
    padding: 0.3em 0 0 0;
    font-size: 16px;
    width: auto;
}
/* now playing */
/*             */

/* now playing bar - wrapper */
.collection-item-container .now-playing-wrapper {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 1;
    width: 95%;
}

.collection-item-container.no-streaming .now-playing-wrapper {
    display: none;
}

/* now playing bar, main container */
.collection-item-container .now-playing {
    width: 44px;
    height: 38px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    font-size: 0;
    transform: translate3d(0,0,0);
    display: flex;

    transition: width 0.33s ease-out;
}
.collection-item-container.playing .now-playing {
    width: 100%;
}

/* now playing icon */
.collection-item-container .now-playing-icon-wrapper {
    width: 44px;
    height: 38px;
    display: inline-block;
}
.collection-item-container .now-playing-icon {
    opacity: 1;
    width: 25px;
    height: 9px;
    border-top: 9px solid transparent;
    border-left: 15px solid #FFF;
    border-bottom: 9px solid transparent;
    box-sizing: border-box;
    margin: 10px 0 0 15px;
}
.collection-item-container.playing .now-playing-icon {
    width: 15px;
    height: 18px;
    border-right: 5px solid #FFF;
    border-left: 5px solid #FFF;
    border-bottom: 0;
    border-top: 0;
    margin: 10px 0 0 12px;
}

/* now playing details */
.collection-item-container .now-playing-details {
    display: flex;
    vertical-align: top;
    flex-grow: 1;
}

/* now playing title */
.collection-item-container .now-playing-title {
    overflow: hidden;
    display: inline-block;
    flex-grow: 1;
    font-size: 12px;
    vertical-align: top;
    margin-top: 5px;
    color: #FFF;
    opacity: 0;

    transition: opacity 0s 0s;
}
.collection-item-container .now-playing-title .favorite-title {
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 13em;
}
.collection-item-container.playing .now-playing-title {
    opacity: 1;
    transition: opacity 0s 0.33s;
    flex-grow: 1;
    width: initial;
    padding-right: 0.9rem;
}

/* now playing track time */
li.collection-item-container .track_play_time {
    float: none;
    font-size: 12px;
    padding-right: 3px;
    position: relative;
    padding: 0;
    color: #FFF;
    top: 0;
    right: 0;
    display: inline-block;
    overflow: hidden;
    min-width: 75px;
    vertical-align: top;
    margin-top: 5px;
    text-align: right;
    opacity: 0;

    transition: opacity 0s 0s;
}
li.collection-item-container.playing .track_play_time {
    opacity: 1;
    display: inline-block;
    transition: opacity 0s 0.2s;
}
li.collection-item-container.playing .track_play_time .time_total {
    margin-right: 8px;
}

/* actions */
.collection-item-actions {
    display: block;
    visibility: visible;
    border-top: 1px solid rgba(0,161,198, 0.1);
    margin-top: 16px;
}
.collection-item-container.editing .collection-item-actions {
    visibility: hidden;
    display: none;
}
.collection-item-actions ul {
    display: flex;
}
.collection-item-actions li {
    flex-grow: 1;
    border-left: 1px solid rgba(0,161,198, 0.1);
    margin-bottom: 0;
    text-align: center;
}
.collection-item-actions li.purchase-info {
    width: 30%;
}
.collection-item-actions.wishlisted li.wishlisted-msg,
.collection-item-actions.purchased li.purchased-msg {
    display: inline-block;
}
.collection-item-actions.purchased li.purchase-info,
.collection-item-actions li.wishlisted-msg,
.collection-item-actions li.purchased-msg,
.collection-item-actions.wishlisted li.wishlist-msg,
.collection-item-actions.purchased li.wishlist-msg {
    display: none;
}
.collection-item-actions li a {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    line-height: 44px;
}
.collection-item-actions li:first-child {
    border-left: none;
}
.collection-item-actions .svg-icon {
    fill: #1da0c3;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    padding: 12px 0;
}
.collection-item-actions .purchased-msg .svg-icon {
    fill: #d0011B;
}
.collection-item-actions .wishlisted-msg .svg-icon {
    fill: #ff9c00;
}


.gifts-given-header .link-title {
    font-weight: 400;
}

#gifts-given-container .multiple .collection-item-art-container .multiple-number, #hidden-items-container .multiple .collection-item-art-container .multiple-number, #gifts-given-search-items-container .multiple .collection-item-art-container .multiple-number, #hidden-items-container .multiple .collection-item-art-container .multiple-number {
    top: -11px;
    left: -6px;
}
.collection-item-gallery-container.multiple {
    margin-left: 0px;
}
#gifts-given-container .gifts-given-info, #gifts-given-search-items-container .gifts-given-info {
    margin: 12px auto 24px auto;
}
.hidden-items-header .link-title {
    font-weight: 400;
}
#hidden-items-container .hidden-items-header-msg .show-hide {
    font-weight: bold;
}

.expand-container {
    width: 100%;
    margin-top: 0;
}
.expand-container .show-more {
    width: 84%;
    text-transform: uppercase;
    border: 1px solid #1DA0C3;
    color: #1DA0C3;
    background: transparent;
}
.expand-container .show-more .plus {
    margin-right: 5px;
    font-size: 16px;
}

.collection-item-private-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.collection-item-private-container .title a {
    margin-top: 0;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
    width: 98%;
}
.collection-item-private-container .title {
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
    width: 100%;
}
.collection-item-private-container .private-wrapper {
    display: inline-block;
    margin: 10px 10px 0 0;
}
.collection-item-private-container .private-badge {
    color: #aaaaaa;
    border: 1px solid #CCC;
    background: none;
    margin-top: 0;
    font-weight: 600;
}
.collection-item-why .text{
    font-size: 14px;
}

/* Fan first follow */
.fan-first-follow .first-follow-title {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.fan-first-follow .first-follow-msg {
    margin-bottom: 2em;
}
.button-container {
    font-size: 16px;
}
.button-container a {
    margin-top: 1em;
    color: rgb(0,161,198);
}
.button-container .listen-button {
    border: 0.1em solid #c6c6c6;
    color: rgb(0,161,198);
    border-radius: 6px;
    padding: 1.24rem 0;
    display: block;
}
.button-container .listen-button.a {
    color: rgb(190,209,214);
}
.button-container .listen-button .app-play-text {
    display: inline-block;
    color: #666;
    vertical-align: middle;
    margin-left: 0.75rem;
    width: 76%;
}
.button-container .listen-button.no-action .app-play-text {
    text-align: center;
    display: block;
    width: 100%;
    margin-left: 0;
}
.button-container .download-button {
    border: 1px solid rgb(0,161,198);
    background-color: rgb(0,161,198);
    border-radius: 6px;
    padding: 0.857rem 0;
    display: block;
    color: #fff;
}
.button-container .missing-app {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.653rem;
    line-height: 1.429rem;
    width: 74%;
}
.button-inner {
    width: 94%;
    margin: 0 auto;
}
.app-phone-logo {
    fill: #fff;
    height: 2.5rem;
    width: 2.9rem;
    display: inline-block;
    vertical-align: middle;
}
.app-play-logo {
    fill: #a7a7a7;
    margin-left: 0.7em;
    height: 2rem;
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 375px){
    :lang(fr) .fan-bio .edit-buttons button.cancel {
        padding: 18px 21px;
    }
    :lang(fr) .fan-bio .edit-profile > a {
        font-size: 10px;
    }
    .followeer button.follow-unfollow.following, .followeer button.follow-unfollow {
        font-size: 11px;
    }
    .followeer button.follow-unfollow.following,
    .followeer button.follow-unfollow {
        margin-right: 0.5em;
    }
    .followeer .fan-info-inner,
    .followeer .genre-info-inner {
        width: 47%;
    }
}

@media (min-width: 375px) {
    .fan-bio ol.info-items.split li {
        width: auto;
        max-width: 48%;
    }
    .collection-item-container .now-playing-title .favorite-title {
        width: 17em;
    }
}
@media (max-width: 375px) {
    .menubar-phone .userpic {
        max-width: 11em;
    }
    .button-container {
        font-size: 14px;
        font-weight: 500;
    }
    .button-container .missing-app {
        line-height: 1rem;
    }
    .app-phone-logo {
        height: 2rem;
        width: 2.2rem;
    }
    .button-container .listen-button {
        padding: 0.943rem 0;
    }
    .fan-bio .contextual-menu span {
        margin-right: 0;
    }
    .fan-bio button.follow-unfollow {
        margin-right: 0;
    }
}

@media (max-width: 980px) {
    .collection-grid li,
    .collection-grid li:nth-child(4n) {
         margin-right: 0;
    } {
    }
}

.collection-grid .collection-item-art-container .banner-container {
    width: 100%;
    height: 100%;
    z-index: 5;
}

.collection-grid .collection-item-art-container .banner-outer {
    margin: 9% 0 0 36%;
    width: 100%;
    height: 100%;
}

/* trackpipe/public/css/popup_image_phone.css */

/* popup image viewer */

/* --- gallery structure --- */

.popupimage_gallery {
    z-index: 15;
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    left: 0; top: 0;
    bottom: 0; right: 0;
    background: rgba( 0, 0, 0, 0.85 );
}

.popupimage_container {
    position: relative;
    display: table;
    left: 0;
    height: 100%; width: 1000%;
    list-style: none;
    padding: 0;
}

.popupimage_container * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba( 0,0,0,0 );
}

.popupimage_item {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: auto;
}

.popupimage_backer {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    background-color: black;
    border: 0;
}

.popupimage_item.loading {
    background: url(/img/playerbusy_mobile_dark.gif) no-repeat center center;
    background-size: auto;
}

.popupimage_item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

/* corrects failure on android to fully cover the window: */

.android .popupimage_gallery {
    bottom: -2px; right: -2px;
}

.android .popupimage_gallery img {
    border-right: 2px;
    padding-bottom: 2px;
}

/* --- widgets --- */

.popupimage_nav {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 33%;
    -webkit-tap-highlight-color: rgba( 0,0,0,0 );
}
.popupimage_nav.dismiss {
    right: 0;
}
.popupimage_nav.navdots {
    left: 34%;
    display: flex;
    justify-content: space-around;
    top: 80%;
    z-index: 1;
}

.popupimage_navicon {
    display: inline-block;
    position: absolute;
    top: 85%;
    margin: auto;
    background: url(/img/mobile-sprites-20150520.svg) no-repeat;
    background-size: 500% auto;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    z-index: 1;
}
.popupimage_dot {
    display: inline-block;
    top: 85%;
    font-size: 5rem;
    background-color: rgb(153,153,153);
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    height: 0;
    padding: 0.4rem;
    border-radius: 0.4rem;

}
.popupimage_dot.active {
    background-color: rgb(255,255,255);
}

.no-svg .popupimage_navicon {
    background-image: url(/img/mobile-sprites-20150520.png);
}
.popupimage_navicon.navdots {
    left: 50%;
    margin-left: -1rem;
}
.popupimage_navicon.dismiss {
    top: 1em;
    right: 1em;
    background-position: 0 24%;
}

.popupimage_loading {
    position: absolute;
    display: inline-block;
    background-color: black; 
    opacity: 0.5;
    filter:alpha(opacity=50);
    text-align: center;
    vertical-align: middle;
}

.popupimage_spinny_lg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_transp.gif) no-repeat;
    background-position: 50% 50%;
}

.popupimage_spinny_sm {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_small.gif) no-repeat;
    background-position: 50% 50%;
}

/* trackpipe/public/css/fan/signup/fan_signup_genre_picker_phone.css */
/* MOBILE GENRE PICKER */
.genre-picker-form.skinny .search-results {
    left: calc(50% - 160px);
}
.genre-picker-form .search-results.results-visible {
    max-height: 124px;
}
.genre-picker-form.skinny .search-wrapper {
    width: 100%;
}
.genre-picker-form.standalone {
    margin-left: 0px;
    margin-right: 0px;
}
.ui-widget.nu-dialog .genre-picker-form .search-wrapper input {
    margin-bottom: 0px;
    border-radius: 24px;
    font-size: 16px;
}

.genre-picker-form > div {
    flex: 1 0 auto;
    transition: all .5s linear;
}
.genre-picker-form .heading-wrapper h4 {
    padding: 16px 0px;
    margin: 0px;
}
.genre-picker-form .heading-wrapper h3 {
    margin: 0px;
    padding: 18px 18px 0px 0px;
    font-weight: bold;
}
.genre-picker-form .heading-wrapper.mobile h3 {
    line-height: 1.3em;
    margin-bottom: 10px;
}
.genre-picker-form {
    margin: 0px;
    flex-direction: column;
}
.genre-picker-form.mobile ul.genres > li.genre.expanded {
    width: 100%;
    margin: 5px 0px;
}
.genre-picker-form .genres-overflow-wrapper.mobile ul.genres > li.genre.expanded,
.genre-picker-form .genres-overflow-wrapper.mobile ul.genres > li.genre.expanded.long,
.genre-picker-form .genres-overflow-wrapper.mobile ul.genres > li.genre.expanded .content{
    height: auto;
}
.genre-picker-form ul.genres > li.genre.expanded .content {
    width: 100%;
}
.genre-picker-form .selected-genres-wrapper {
    width: 100%;
    height: 44px;
}
.genre-picker-form li.genre.expanded .subgenres {
    justify-content: left;
}
.genre-picker-form,
.genre-picker-form .buttons,
.genre-picker-form .genres-overflow-wrapper,
.genre-picker-form .genres-overflow-wrapper ul {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-overflow-style: none;  /* IE 10+ */
    overflow: -moz-scrollbars-none;  /* Firefox */
}
.genre-picker-form .genres-overflow-wrapper::-webkit-scrollbar { /* Safari and Chrome */
    display: none;
}
.genre-picker-form .genres-overflow-wrapper.mobile ul {
    display: inline-block;
}
.genre-picker-form .genres-overflow-wrapper.mobile li.genre.selected {
    display: block;
}
.genre-picker-form .genres-overflow-wrapper.mobile li.genre {
    display: none;
}
.genre-picker-form .genres-overflow-wrapper.mobile li.genre.selected li.subgenre.selected .genre-icon {
    display: inline-block;
}
.genre-picker-form .genres-overflow-wrapper.mobile .genre-icon {
    display: none;
}
.genre-picker-form li.subgenre.selected h3.subgenre-name:hover .genre-icon {
    background-position: -16px 0%;
}
.genre-picker-form .mobile ul.subgenres h3 {
    padding: 5px 14px;
    font-size: 16px;
}
.genre-picker-form .buttons {
    margin: 16px 0px;
}
.genre-picker-form li.genre.expanded .subgenres {
    margin: 0px 0px 10px 0px;
}
.genre-picker-form .mobile ul.subgenres li {
    margin: 4px 2px;
}
.genre-picker-form .mobile ul.genres > li.genre .content > div.genre-title{
    margin: 0px 0px 10px 0px;
}
.genre-picker-form .mobile ul.genres > li.genre .content {
    background: none;
    font-size: 1.2em;
}
.genre-picker-form .genres-overflow-wrapper {
    height: 63.3vh;
}
.genre-picker-form .genres-overflow-wrapper.mobile {
    height: 75.8vh;
}
@media (width: 1024px) and (height: 1366px) { /* ipad pro */
    .genre-picker-form .genres-overflow-wrapper {
        height: 81.2vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 85.3vh;
    }
}
@media (width: 768px) and (height: 1024px) { /* ipad */
    .genre-picker-form .genres-overflow-wrapper {
        height: 76.3vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 81.7vh;
    }
}
@media (max-width : 414px) and (max-height : 896px) { /* XR, XS MAX*/
    #signup-vm.genre-picker-form {
        margin-left: -10px;
        width: 107%;
    }
    .genre-picker-form .list-wrapper {
    margin: 0px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 51.3vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 59.6vh;
    }
}
@media (width: 411px) and (height: 823px) { /* ipad */
    .genre-picker-form .genres-overflow-wrapper {
        height: 66.9vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 78.1vh;
    }
}
@media (width: 411px) and (height: 731px) { /* ipad */
    .genre-picker-form .genres-overflow-wrapper {
        height: 49.0vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 63.6vh;
    }
}
@media (max-width: 375px) and (max-height: 812px) {
    #signup-vm.genre-picker-form {
        margin-left: -10px;
        width: 107%;
    }
    .genre-picker-form .list-wrapper {
    margin: 0px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 52.5vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 61.3vh;
    }
}
@media (max-width: 375px) and (max-height: 667px) {
    #signup-vm.genre-picker-form {
        margin-left: -10px;
        width: 107%;
    }
    .genre-picker-form .list-wrapper {
    margin: 0px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 41.5vh; /*14*/
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 55.8vh; /*12*/
    }
}
@media (max-width: 360px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 57.8vh ;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 72.2vh ;
    }
}
@media (max-width: 320px) {
    .genre-picker-form ul.genres > li.genre.top-level,
    .genre-picker-form ul.genres > li.genre.top-level .content {
        width: 131px;
        height: 131px;
    }
    .genre-picker-form .mobile ul.genres > li.genre.top-level,
    .genre-picker-form .mobile ul.genres > li.genre.top-level .content {
        width: 272px;
        height: auto;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 32.5vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 49.6vh;
    }
    .genre-picker-form.skinny .search-results {
        left: calc(50% - 141px);
        width: 100%;
    }

}
.genre-picker-form .mobile #electronic-box .content, .genre-picker-form .mobile #rock-box .content, .genre-picker-form .mobile #metal-box .content,
.genre-picker-form .mobile #alternative-box .content, .genre-picker-form .mobile #hip-hop-rap-box .content, .genre-picker-form .mobile #experimental-box .content,
.genre-picker-form .mobile #punk-box .content, .genre-picker-form .mobile #folk-box .content, .genre-picker-form .mobile #pop-box .content, .genre-picker-form .mobile #ambient-box .content,
.genre-picker-form .mobile #soundtrack-box .content, .genre-picker-form .mobile #world-box .content,
.genre-picker-form .mobile #jazz-box .content, .genre-picker-form .mobile #acoustic-box .content, .genre-picker-form .mobile #funk-box .content, .genre-picker-form .mobile #r-b-soul-box .content,
.genre-picker-form .mobile #devotional-box .content, .genre-picker-form .mobile #classical-box .content, .genre-picker-form .mobile #reggae-box .content, .genre-picker-form .mobile #podcasts-box .content,
.genre-picker-form .mobile #country-box .content, .genre-picker-form .mobile #spoken-word-box .content, .genre-picker-form .mobile #comedy-box .content, .genre-picker-form .mobile #blues-box .content,
.genre-picker-form .mobile #kids-box .content, .genre-picker-form .mobile #audiobooks-box .content, .genre-picker-form .mobile #latin-box .content {
    background: none;
}
.genre-picker-form .content ul.subgenres h3 {
    color: white;
}
.genre-picker-form #electronic-box .content ul.subgenres h3 {
    background-color: #F9A55B;
}
.genre-picker-form #rock-box .content ul.subgenres h3 {
    background-color: #F7714E;
}
.genre-picker-form #metal-box .content ul.subgenres h3 {
    background-color: #E0222D;
}
.genre-picker-form #alternative-box .content ul.subgenres h3 {
    background-color: #D62F6A;
}
.genre-picker-form #hip-hop-rap-box .content ul.subgenres h3 {
    background-color: #C33AA4;
}
.genre-picker-form #experimental-box .content ul.subgenres h3 {
    background-color: #9A58C0;
}
.genre-picker-form #punk-box .content ul.subgenres h3 {
    background-color: #816FB2;
}
.genre-picker-form #folk-box .content ul.subgenres h3 {
    background-color: #8690CE;
}
.genre-picker-form #pop-box .content ul.subgenres h3 {
    background-color: #87A8C5;
}
.genre-picker-form #ambient-box .content ul.subgenres h3 {
    background-color: #85BFBC;
}
.genre-picker-form #soundtrack-box .content ul.subgenres h3 {
    background-color: #82D23D;
}
.genre-picker-form #world-box .content ul.subgenres h3 {
    background-color: #B0CA3C;
}
.genre-picker-form #jazz-box .content ul.subgenres h3 {
    background-color: #D6BF3D;
}
.genre-picker-form #acoustic-box .content ul.subgenres h3 {
    background-color: #F9A55B;
}
.genre-picker-form #funk-box .content ul.subgenres h3 {
    background-color: #F7714E;
}
.genre-picker-form #r-b-soul-box .content ul.subgenres h3 {
    background-color: #E0222D;
}
.genre-picker-form #devotional-box .content ul.subgenres h3 {
    background-color: #D62F6A;
}
.genre-picker-form #classical-box .content ul.subgenres h3 {
    background-color: #C33AA4;
}
.genre-picker-form #reggae-box .content ul.subgenres h3 {
    background-color: #9A58C0;
}
.genre-picker-form #podcasts-box .content ul.subgenres h3 {
    background-color: #816FB2;
}
.genre-picker-form #country-box .content ul.subgenres h3 {
    background-color: #8690CE;
}
.genre-picker-form #spoken-word-box .content ul.subgenres h3 {
    background-color: #87A8C5;
}
.genre-picker-form #comedy-box .content ul.subgenres h3 {
    background-color: #85BFBC;
}
.genre-picker-form #blues-box .content ul.subgenres h3 {
    background-color: #82D23D;
}
.genre-picker-form #kids-box .content ul.subgenres h3 {
    background-color: #B0CA3C;
}
.genre-picker-form #audiobooks-box .content ul.subgenres h3 {
    background-color: #D6BF3D;
}
.genre-picker-form #latin-box .content ul.subgenres h3 {
    background-color: #F9A55B;
}
.genre-picker-form #electronic-box .content ul.subgenres li.selected h3,
.genre-picker-form #rock-box .content ul.subgenres li.selected h3,
.genre-picker-form #metal-box .content ul.subgenres li.selected h3,
.genre-picker-form #alternative-box .content ul.subgenres li.selected h3,
.genre-picker-form #hip-hop-rap-box .content ul.subgenres li.selected h3,
.genre-picker-form #experimental-box .content ul.subgenres li.selected h3,
.genre-picker-form #punk-box .content ul.subgenres li.selected h3,
.genre-picker-form #folk-box .content ul.subgenres li.selected h3,
.genre-picker-form #pop-box .content ul.subgenres li.selected h3,
.genre-picker-form #ambient-box .content ul.subgenres li.selected h3,
.genre-picker-form #soundtrack-box .content ul.subgenres li.selected h3,
.genre-picker-form #world-box .content ul.subgenres li.selected h3,
.genre-picker-form #jazz-box .content ul.subgenres li.selected h3,
.genre-picker-form #acoustic-box .content ul.subgenres li.selected h3,
.genre-picker-form #funk-box .content ul.subgenres li.selected h3,
.genre-picker-form #r-b-soul-box .content ul.subgenres li.selected h3,
.genre-picker-form #devotional-box .content ul.subgenres li.selected h3,
.genre-picker-form #classical-box .content ul.subgenres li.selected h3,
.genre-picker-form #reggae-box .content ul.subgenres li.selected h3,
.genre-picker-form #podcasts-box .content ul.subgenres li.selected h3,
.genre-picker-form #country-box .content ul.subgenres li.selected h3,
.genre-picker-form #spoken-word-box .content ul.subgenres li.selected h3,
.genre-picker-form #comedy-box .content ul.subgenres li.selected h3,
.genre-picker-form #blues-box .content ul.subgenres li.selected h3,
.genre-picker-form #kids-box .content ul.subgenres li.selected h3,
.genre-picker-form #audiobooks-box .content ul.subgenres li.selected h3,
.genre-picker-form #latin-box .content ul.subgenres li.selected h3 {
    background-color: rgba(51,51,51,1);
}

/* MOBILE NEWSLETTER PICKER */
.newsletter-picker-form {
    margin-top: 56px;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper {
    display: flex;
    margin-bottom: 22px;
    font-size: 16px;
    align-items: center;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper .text {
    font-size: 16px;
    padding-right: 10px;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper .icon {
    margin-top: 0px;
    width: 120px;
    height: auto;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper .icon img {
    margin-left: -8px;
}
.newsletter-picker-form .buttons,
.newsletter-picker-form .email-abuse {
    width: 100%;
    font-size: 14px;
}
.newsletter-picker-form .buttons {
    white-space: nowrap;
}
.ui-dialog.nu-dialog.mobile-onboarding .signup-common-form.newsletter-picker-form .buttons.split button.no,
.ui-dialog.nu-dialog.mobile-onboarding .signup-common-form.newsletter-picker-form .buttons.split button.yes {
    width: 40vw;
    padding: 12px 5px;
}
@media (max-width: 320px) {
    .ui-dialog.nu-dialog.mobile-onboarding .signup-common-form.newsletter-picker-form .buttons.split button.yes {
        margin-right: 0px;
    }
}