/* trackpipe/public/css/jquery-ui/themes/base/jquery-ui.css */
/*! jQuery UI - v1.9.2 - 2012-11-23
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; zoom: 1; }
.ui-accordion .ui-accordion-icons { padding-left: 2.2em; }
.ui-accordion .ui-accordion-noicons { padding-left: .7em; }
.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; zoom: 1; }
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; }
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; } 
button.ui-button-icons-only { width: 3.7em; } 

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }

/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}.ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }

/* icon support */
.ui-menu-icons { position: relative; }
.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }

/* left-aligned */
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }

/* right-aligned */
.ui-menu .ui-menu-icon { position: static; float: right; }
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }.ui-spinner { position:relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; }
.ui-spinner-input { border: none; background: none; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; }
.ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; }
.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* more specificity required here to overide default borders */
.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */
.ui-spinner-up { top: 0; }
.ui-spinner-down { bottom: 0; }

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position:-65px -16px;
}
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom: 0; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
	background-image: none;
}
body .ui-tooltip { border-width: 2px; }

/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(/css/jquery-ui/themes/base/images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(/css/jquery-ui/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(/css/jquery-ui/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(/css/jquery-ui/themes/base/images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #212121/*{fcHover}*/; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(/css/jquery-ui/themes/base/images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(/css/jquery-ui/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(/css/jquery-ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); } /* For IE8 - See #6059 */

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/css/jquery-ui/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(/css/jquery-ui/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(/css/jquery-ui/themes/base/images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(/css/jquery-ui/themes/base/images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/css/jquery-ui/themes/base/images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
.ui-state-active .ui-icon {background-image: url(/css/jquery-ui/themes/base/images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
.ui-state-highlight .ui-icon {background-image: url(/css/jquery-ui/themes/base/images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/css/jquery-ui/themes/base/images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(/css/jquery-ui/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(/css/jquery-ui/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; }

/* trackpipe/public/css/jquery_ui_overrides.css */
/* jquery dialog styles */
.ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    border-radius: 0;
}

.ui-dialog {
    padding: 0;
}

.nu-dialog .ui-icon {
    background:url(/img/_sprite-bc-ui-20180124.png);
}

.ui-dialog .ui-widget-header {
    background: #333;
    border: none;
}
.ui-widget-header {
    color: #fff;
}
.nu-dialog .ui-widget-content {
    color: #333;
}

.ui-widget-content a {
    text-decoration: none;
    color: #0687F5;
}

.ui-widget-overlay {
    background: #000609;
    opacity: 0.6;
}

.ui-dialog.nu-dialog .ui-dialog-titlebar-close,
.ui-dialog.nu-dialog .ui-dialog-titlebar-close.ui-state-hover {
    background: transparent;
    margin: 0;
    padding: 0;
    right: 0;
    top: 0;
    width: 12px;
    height: 12px;
    overflow: hidden;
    padding: 18px 20px 15px 25px;
    border: 0;
    z-index: 5;
}

.ui-dialog.nu-dialog .ui-icon.ui-icon-closethick {
    background-size: 50px 512px;
    background-position: -27px -40px;
    height: 12px;
    margin: 0;
    padding: 0;
    width: 12px;
}

.ui-dialog.nu-dialog .ui-dialog-titlebar-close.ui-state-hover .ui-icon.ui-icon-closethick {
    background-position: -27px -52px;
    opacity: 0.9;
}


.ui-dialog .ui-dialog-title {
    margin: 0;
}

/* jquery menu styles */
.ui-menu ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-menu ol li {
    position: relative;
    margin: 0;
}

/* Label accounts UI style */

.ui-dialog.nu-dialog {
    font: 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #2e3332;
    border: 0;
    -webkit-font-smoothing: antialiased;
}
.ui-corner-all.nu-dialog {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.ui-dialog.nu-dialog .ui-dialog-titlebar {
    padding: 15px 20px 12px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ededed;
}
.ui-dialog.nu-dialog .ui-dialog-title {
    font-size: 18px;
    font-weight: 400;
    color: #2e3332;
}
.ui-dialog.nu-dialog .ui-dialog-content {
    overflow: visible; /* overriding a share/embed-specific rule */
    padding: 25px 20px 30px;
}

.ui-dialog.nu-dialog p {
    margin: 0 0 1em;
}

.ui-dialog.nu-dialog p + .field-wrapper {
    margin-top: 2em;
}

.ui-dialog.nu-dialog .ui-dialog-buttonpane {
    margin-top: 0;
    padding: 0;
    border: none;
}
.ui-dialog.nu-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    margin-bottom: 18px;
    padding: 0 20px;
    text-align:center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
.ui-dialog.nu-dialog button { /* default layout is for two buttons */
    display: inline-block;
    width: 200px;
    margin-right: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    min-height: 36px;
    text-align: center;
    text-decoration: none;
    vertical-align: baseline;
    color: #fff;
    background-color: #0687f5;
    border: 1px solid #0687f5;
    border-radius:4px;
    padding: 0.25em 1em;
    outline: none;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
    -webkit-transition: border-color .2s ease;
    transition: border-color .2s ease;
}

.ui-dialog.nu-dialog.wide-button button {
    width: 250px;
}

.ui-dialog.nu-dialog button:last-child {
    margin-right: 0;
}
.ui-dialog.nu-dialog.single-button button {
    display: block;
    width: 100%;
}
.ui-dialog.nu-dialog button:hover,
.ui-dialog.nu-dialog button:focus,
.ui-dialog.nu-dialog button:active {
    background-color: #007deb;
}
.ui-dialog.nu-dialog button:focus{
    outline: -webkit-focus-ring-color auto 1px;
}

/* "secondary" button style (eg. cancel buttons) */ /* TODO: remove the word weak and probably cancel as well */
.ui-dialog.nu-dialog .ui-dialog-buttonpane button.cancel,
.ui-dialog.nu-dialog button.cancel,
.ui-dialog.nu-dialog .ui-dialog-buttonpane button.weak,
.ui-dialog.nu-dialog button.weak,
.ui-dialog.nu-dialog .ui-dialog-buttonpane button.secondary,
.ui-dialog.nu-dialog button.secondary {
    background: #fff;
    border: 1px solid #999;
    color: #777;
    font-weight: normal;
}
.ui-dialog.nu-dialog button.cancel:hover,
.ui-dialog.nu-dialog button.cancel:focus,
.ui-dialog.nu-dialog button.cancel:active,
.ui-dialog.nu-dialog button.weak:hover,
.ui-dialog.nu-dialog button.weak:focus,
.ui-dialog.nu-dialog button.weak:active,
.ui-dialog.nu-dialog button.secondary:hover,
.ui-dialog.nu-dialog button.secondary:focus,
.ui-dialog.nu-dialog button.secondary:active {
    color: #333;
}

.ui-dialog.nu-dialog button::-moz-focus-inner {
  border: 0;
}

/* disabled button style */
.ui-dialog.nu-dialog button[disabled],
.ui-dialog.nu-dialog button[disabled]:hover,
.ui-dialog.nu-dialog button[disabled]:active {
    background: #555 !important;
    border-color: #333 !important;
    color: #ccc !important;
    cursor: default;
    text-decoration: none;
    text-shadow: none;
    opacity: 0.3;
    filter: alpha(opacity=50);
}

/* 
 *  dialogClass overrides for customizing NuDialog 
 */

/* remove the close button */
.no-close .ui-dialog-titlebar-close {
    display: none;
}

/* remove the titlebar entirely */
.no-title .ui-dialog-titlebar {
    display: none;
}

/* make the titlebar transparent */
.ui-dialog.nu-dialog.transparent-title .ui-dialog-titlebar {
    background: none;
    border: none;
}

/* remove dialog content padding for more granular control (i.e. footers, etc) */
.no-padding .ui-dialog-content {
    padding: 0 !important;
}

/* remove the dialog content background */
.ui-widget-content.no-bg {
    background: transparent;
}

/* remove dialog corner radius */
.ui-corner-all.no-border-radius {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    border-radius: 0;
}


/* added/removed to hide a modal dialog's overlay mask */
.ui-dialog.no-overlay + .ui-widget-overlay,
.ui-widget-overlay.no-overlay {
    opacity: 0 !important;
    filter: alpha(opacity=0);
}

/* forms */

.ui-widget.nu-dialog input,
.ui-widget.nu-dialog input[type="radio"],
.ui-widget.nu-dialog select,
.ui-widget.nu-dialog textarea,
.ui-widget.nu-dialog button {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: auto;
}
.ui-widget.nu-dialog textarea:focus,
.ui-widget.nu-dialog input[type="text"]:focus,
.ui-widget.nu-dialog input[type="email"]:focus,
.ui-widget.nu-dialog input[type="search"]:focus,
.ui-widget.nu-dialog input[type="number"]:focus,
.ui-widget.nu-dialog input[type="password"]:focus {
    -moz-transition-duration: 0.3s;
    -moz-transition-property: border-color, box-shadow;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: border-color, box-shadow;
    transition-duration: 0.4s;
    transition-property: border-color, box-shadow;
    border-color: #50a1e6;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 5px #b4d7f9;
    outline: none;
    -webkit-appearance: none;
}
.ui-widget.nu-dialog textarea,
.ui-widget.nu-dialog input[type="text"],
.ui-widget.nu-dialog input[type="email"],
.ui-widget.nu-dialog input[type="search"],
.ui-widget.nu-dialog input[type="number"],
.ui-widget.nu-dialog input[type="password"] {
    border: 1px solid #ccc;
    outline: none;
    -webkit-appearance: none;
}

.ui-dialog.nu-dialog .alert {
    font-weight: normal;
    font-size: inherit;
}


/* TODO: skinny close icon */

/* language picker hover style, none */

.ui-widget-content .ui-state-focus {
    border-color: transparent;
    background: none;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {font-weight: normal;margin:0;border:0;}
.ui-autocomplete.ui-widget {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ui-dialog-2018 ******************/
/* A stab at creating some shared styles for modern dialogs and modals. - jackson 2.27.2018 */
/* rules are intentionally not specified with .nu-dialog in most cases
   so that they are easier to override */
   
.ui-dialog.ui-dialog-2018 {
    line-height: 20px;
}

.ui-dialog.ui-dialog-2018 .ui-dialog-content {
    overflow: visible;
}

@media only screen and (max-device-width: 768px) {
    .ui-dialog.ui-dialog-2018 .ui-dialog-content {
        width: 93%;
    }
}

.ui-dialog.ui-dialog-2018 button {
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 0 1em;
    text-align: center;
    border: none;
    vertical-align: top;
    width: 100%;
}

/* "link" button style. Displays a button as a link, centered in the dialog */
.ui-dialog.nu-dialog.ui-dialog-2018 .ui-dialog-buttonpane button.link,
.ui-dialog.nu-dialog.ui-dialog-2018 button.link {
    background: none;
    color: #007deb;
    font-weight: normal;
    font-size: 12px;
    width: 100%;
    height: auto;
    margin: 1.0625rem 0;
}

.ui-dialog.nu-dialog.ui-dialog-2018 button.link:hover,
.ui-dialog.nu-dialog.ui-dialog-2018 button.link:focus {
    text-decoration: underline;
}

.ui-dialog.nu-dialog.ui-dialog-2018 .ui-icon.ui-icon-closethick,
.ui-dialog.nu-dialog.ui-dialog-2018 .ui-state-hover .ui-icon.ui-icon-closethick {
    background: url(/img/x_close_dialog.svg);
    width: 13px;
    height: 13px;
}

/* dialog-big - for large dialogs. maybe there's a better term for it */
.ui-dialog.ui-dialog-2018.dialog-big .ui-dialog-content {
    padding: 30px 75px 0 75px;
}

@media only screen and (max-device-width: 768px) {
    .ui-dialog.ui-dialog-2018.dialog-big .ui-dialog-content {
        padding: 20px;
    }
}

.ui-dialog.ui-dialog-2018.dialog-big .ui-dialog-buttonpane .ui-dialog-buttonset {
    padding: 20px 75px 45px;
    margin-bottom: 0px;
}

@media only screen and (max-device-width: 768px) {
    .ui-dialog.ui-dialog-2018.dialog-big .ui-dialog-buttonpane .ui-dialog-buttonset {
        padding: 20px;
    }
}

.ui-dialog.ui-dialog-2018.dialog-big .ui-dialog-title {
    text-align: center;
    width: 100%;
}

.ui-dialog.nu-dialog.overflow {
    overflow: visible;
}

.ui-dialog.nu-dialog.overflow .ui-dialog-titlebar {
    border-radius: 5px;
}

/* trackpipe/public/jslib/yui/2.9.0/container/assets/container.css */
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
.yui-overlay,
.yui-panel-container {
    visibility:hidden;
    position:absolute;
    z-index: 100;
}

.yui-tt {
    visibility:hidden;
    position:absolute;
    color:#333;
    background-color:#FDFFB4;
    font-family:arial,helvetica,verdana,sans-serif;
    padding:2px;
    border:1px solid #FCC90D;
    font:100% sans-serif;
    width:auto;
}

/*
    PLEASE NOTE: The <DIV> element used for a Tooltip's shadow is appended 
    to its root element via JavaScript once it has been rendered.  The 
    code that creates the shadow lives in the Tooltip's public "onRender" 
    event handler that is a prototype method of YAHOO.widget.Tooltip.  
    Implementers wishing to remove a Tooltip's shadow or add any other markup
    required for a given skin for Tooltip should override the "onRender" method.
*/

.yui-tt-shadow {
    display: none;
}

* html body.masked select {
    visibility:hidden;
}

* html div.yui-panel-container select {
    visibility:inherit;
}

* html div.drag select {
    visibility:hidden;
}

* html div.hide-select select {
    visibility:hidden;
}

.mask {
    z-index: 1; 
    display:none;
    position:absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
    background-color:#CCC;
}

/*

There are two known issues with YAHOO.widget.Overlay (and its subclasses) that 
manifest in Gecko-based browsers on Mac OS X:

    1) Elements with scrollbars will poke through Overlay instances floating 
       above them.
    
    2) An Overlay's scrollbars and the scrollbars of its child nodes remain  
       visible when the Overlay is hidden.

To fix these bugs:

    1) The "overflow" property of an Overlay instance's root element and child 
       nodes is toggled between "hidden" and "auto" (through the application  
       and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes)
       as its "visibility" configuration property is toggled between 
       "false" and "true."
    
    2) The "display" property of <SELECT> elements that are child nodes of the 
       Overlay instance's root element is set to "none" when it is hidden.

PLEASE NOTE:  
  
    1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are 
       applied only for Gecko on Mac OS X and are added/removed to/from the 
       Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and 
       "showMacGeckoScrollbars" methods of YAHOO.widget.Overlay.
    
    2) There may be instances where the CSS for a web page or application 
       contains style rules whose specificity override the rules implemented by 
       the Container CSS files to fix this bug.  In such cases, is necessary to 
       leverage the provided "hide-scrollbars" and "show-scrollbars" classes to 
       write custom style rules to guard against this bug.

** For more information on this issue, see: 
   + https://bugzilla.mozilla.org/show_bug.cgi?id=187435
   + YUILibrary bug #1723530

*/

.hide-scrollbars,
.hide-scrollbars * {

    overflow: hidden;

}

.hide-scrollbars select {

    display: none;

}

.show-scrollbars {

    overflow: auto;

}

.yui-panel-container.show-scrollbars {

    overflow: visible;

}

.yui-panel-container.show-scrollbars .underlay {

    overflow: auto;

}

.yui-panel-container.focused {

}


/* Panel underlay styles */

.yui-panel-container .underlay {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

}

.yui-panel-container.matte {

    padding: 3px;
    background-color: #fff;

}

.yui-panel-container.shadow .underlay {

    top: 3px;
    bottom: -3px;
    right: -3px;
    left: 3px;
    background-color: #000;
    opacity: .12;
    filter: alpha(opacity=12);  /* For IE */

}

/* 
   Workaround for Safari 2.x - the yui-force-redraw class is applied, and then removed when
   the Panel's content changes, to force Safari 2.x to redraw the underlay.
   We attempt to choose a CSS property which has no visual impact when added,
   removed, but still causes Safari to redraw
*/
.yui-panel-container.shadow .underlay.yui-force-redraw {
    padding-bottom: 1px;
}

.yui-effect-fade .underlay {
    display:none;
}

.yui-panel {
    visibility:hidden;
    border-collapse:separate;
    position:relative;
    left:0;
    top:0;
    font:1em Arial;
    background-color:#FFF;
    border:1px solid #000;
    z-index:1;
    overflow:hidden;
}

.yui-panel .hd {
    background-color:#3d77cb;
    color:#FFF;
    font-size:100%;
    line-height:100%;
    border:1px solid #FFF;
    border-bottom:1px solid #000;
    font-weight:bold;
    padding:4px;
    white-space:nowrap;
}

.yui-panel .bd {
    overflow:hidden;
    padding:4px;
}

.yui-panel .bd p {
    margin:0 0 1em;
}

.yui-panel .container-close {
    position:absolute;
    top:5px;
    right:4px;
    z-index:6;
    height:12px;
    width:12px;
    margin:0px;
    padding:0px;
    background:url(/tmpdata/cache/close12_1.gif) no-repeat;
    cursor:pointer;
    visibility:inherit;
    text-indent:-10000em;
    overflow:hidden;
    text-decoration:none;
}

.yui-panel .ft {
    padding:4px;
    overflow:hidden;
}

.yui-simple-dialog .bd .yui-icon {
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    margin-right:10px;
    float:left;
}

.yui-simple-dialog .bd span.blckicon {
    background: url(/tmpdata/cache/blck16_1.gif) no-repeat;
}

.yui-simple-dialog .bd span.alrticon {
    background: url(/tmpdata/cache/alrt16_1.gif) no-repeat;
}

.yui-simple-dialog .bd span.hlpicon {
    background: url(/tmpdata/cache/hlp16_1.gif) no-repeat;
}

.yui-simple-dialog .bd span.infoicon {
    background: url(/tmpdata/cache/info16_1.gif) no-repeat;
}

.yui-simple-dialog .bd span.warnicon {
    background: url(/tmpdata/cache/warn16_1.gif) no-repeat;
}

.yui-simple-dialog .bd span.tipicon {
    background: url(/tmpdata/cache/tip16_1.gif) no-repeat;
}

.yui-dialog .ft, 
.yui-simple-dialog .ft {
    padding-bottom:5px;
    padding-right:5px;
    text-align:right;
}

.yui-dialog form, 
.yui-simple-dialog form {
    margin:0;
}

.button-group button {
    font:100 76% verdana;
    text-decoration:none;
    background-color: #E4E4E4;
    color: #333;
    cursor: hand;
    vertical-align: middle;
    border: 2px solid #797979;
    border-top-color:#FFF;
    border-left-color:#FFF;
    margin:2px;
    padding:2px;
}

.button-group button.default {
    font-weight:bold;
}

.button-group button:hover, 
.button-group button.hover {
    border:2px solid #90A029;
    background-color:#EBF09E;
    border-top-color:#FFF;
    border-left-color:#FFF;
}

.button-group button:active {
    border:2px solid #E4E4E4;
    background-color:#BBB;
    border-top-color:#333;
    border-left-color:#333;
}

.yui-override-padding {
    padding:0 !important;
}

/* trackpipe/public/css/trackpipe_basic.css */
/* common trackpipe styles across all layouts, nothing page-specific in here */

/***** YUI Fonts CSS begin ***********************/

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.1
*/
/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {font:13px/1.231 'Helvetica Neue',Helvetica,Arial,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
/**
 * Bump up IE to get to 13px equivalent
 */
pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:1.1;}

/***** YUI Fonts CSS end *************************/

#pgHd, #pgBd {
    /* target size (12px) / base size (13px) */
    font-size: 92.30769231%;
}

h2 {
    font-size: 146.5%;
}

h3 {
    font-size: 123.1%;
}

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;
}

button {
    margin-right: 0.5em;
    padding: 0.25em;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 150%;
    text-align: center;
    border: 1px solid silver;
    background: white;
}

button.disabled {
    background: #eee;
    color: #888;
}

button.button-blue{
    background: #0687f5;
    border: 1px solid #2072b8;
    color: #fff;
    font-size: 120%;
    padding: .4em 1em;
}

button.button-blue:hover{
    background-color:#1895ff;
    text-decoration:none;
}

button.link-small{
    font-size:100%;
    border:0;
}

.ieLte7 button {
    padding: 0.125em;
}

button div {
    min-width: 4em;
    white-space: nowrap;
}

.ieLte7 button div {
    min-width: 3em;
}

img {
    border: none;
}

table {
    border-collapse: collapse;
}

th {
    font-weight: bold;
}

td, th {
    border-top: dotted #c8c8c8 1px;
    border-bottom: dotted #c8c8c8 1px;
    padding: 0.3em 0.5em;
    text-align: left;
    vertical-align: top;
}

.textInput {
    width: 20em;
    border: 1px solid gray;
}

p {
    margin: 1em 0em;
}

ul, ol {
    margin-top: 0px;
    margin-bottom: 0px;
}

li {
    margin-top: 1em;
    margin-bottom: 1em;
}

input[type="text"][disabled],
textarea[disabled] {
    background-color: #eee;
    color: #999;
}

/* Standardize placeholder color. If a page specifies a color for input text, then Firefox applies the color to the placeholder as well. This prevents that. */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #b0b0b0 !important;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #b0b0b0 !important;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #b0b0b0 !important;
}

/* Normalize left margin for radios/checkboxes; otherwise FF ends up
   with a ragged left margin in some forms. */
input[type="checkbox"], input[type="radio"] {
    margin-left: 1px;
}

/* These form elements seem a bit high relative to surrounding
   text in FF, so correct for it. It sure would be nice if 
   vertical-align:middle did the trick, but that makes them
   too low (at least in Windows). */
.gecko input[type="checkbox"], .gecko input[type="radio"] {
    position: relative;
    top: 0.1em;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

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

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

.pagesignup .alert, .pagepicktags .alert, .pagesubdomain .alert, .pagelogin .alert, .pageforgotpass .alert{
    font-weight: normal;
    color: #e00;
    font-size: 100%;
}

.alertActive {
    display: block;
}

.good {
    color: green;
}

.friendly {
    color: #4F8E25;
}

.bad, .notable {
    color: red;
}

.suggestion_link {
    font-weight: normal;
}
.suggestion {
    font-weight: normal;
    color: green;
}

.alert.suggestion {
    margin: 6px 0 0;
    color: green;
}

.alert.suggestion span {
    font-weight: bold;
}

dl.tableLayout {
    margin-bottom:0px;
}

dl.tableLayout dt {
    float: left;
    clear: left;
    width: 20ex; /* override this to control the width of the left 'column' */
    margin: 0px;
    padding-top: 0.45em; /* imperfect baseline alignment */
    text-align: right;
    color: #9C9C9C;
    line-height: 1.1em;
}

dl.tableLayout dd {
    float: left;
    width: 70%; /* appears to prevent layout problems at large font sizes in FF */
    margin: 0px;
    padding: 0px 0px 10px 10px;
    /*line-height: 1.8em;*/
}

dl.tableLayout dd p.footnote {
    line-height: 1.4em;
}

dl.tableLayout dd p.alert {
    margin: 0.3em 0em 0em;
}

.pagesignup dl dt , .pagepicktags dl dt , .pagelogin dl dt{
    color: #333;
}

.pagesignup dl dt, .pagepicktags dl dt, .pagelogin dl dt{
    width: 12ex;
}

.pagesignup dl dd, .pagepicktags dl dd, .pagelogin dl dd{
    padding: 0 0 14px 10px;
}

.ieLte7 dl.tableLayout dd {
    float: none;
}  

dl.tableLayout .newGroup {
    margin-top: 1em;
}

.nowrap {
    white-space: nowrap;
}

.progress_outer {
    height: .75em;
    width: 200px;
    border: 1px solid silver;
    margin:0px auto;
    text-align: left;
}
.video-upload-controls .progress_outer {
    margin:0 0 0 0;
}

.progress_inner {
    background: #429d2f;
    height: .75em;
    width: 0px;
}

.track_list td {
    padding:6px 2px;
    vertical-align: top;
    border:none;
}

.track_list .play-col {
    padding:4px 0 0;
    width:20px;
}
.track_list .track_number {
    text-align: right;
    margin-left: 5px;
}

.track_list .track-number-col {
    min-width:15px;
}
.track_list .title-col {
    /**/
}


.track_list .title {
    width: 220px;
}
.track_list .title span.track-title {
    word-wrap: break-word;
    -webkit-box-orient: vertical;
}
.track_list .title > * {
    padding-right: 0.5em;
}

.track_list .title .has-video-subcol {
    padding-right: 0;
}

.track_list .time {
    padding: 0;
}
.track_list .play-col > a {
    display: block;
    text-align: center;
}
.track_list .play_status {
    background:#fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    min-height: 16px;
    min-width: 17px;
}
.track_list .play_status.disabled {
    background: transparent;
    border: none;
    cursor: default;
}
.track_list .play_status:after {
    content:'';
	display: block;
    width: 0;
    height: 0;
    border-top: 4px inset transparent;
    border-bottom: 4px inset transparent;
    border-left: 7px solid #222;
    border-right:0;
    margin: 4px 0 0 6px;
}
.track_list .play_status.playing:after {
    content:'';
    border:0;
    border-left:3px solid #2d2d2d;
    border-right:3px solid #2d2d2d;
    height:8px;
    margin: 4px auto;
    width:1px;
}
.track_list .play_status.disabled:after {
    border:none;
}

.track_list .info_link {
	text-align: left;
	width:25px;
}
.track_list .dl_link {
    text-align: right;
    width:83px;
}

.track_list .noplay {
    color: red;
}
.track_list .current_track {
    font-weight: bold;
}
.track_list .has-video {
    margin-left: 5px;
}
.track_list tr.lyricsRow {
    display: none;
}
.track_list tr.showlyrics + tr.lyricsRow,
.track_list.auto_lyrics tr.track_row_view.current_track + tr.lyricsRow {
    display: table-row;
}
tr.track_row_view .info_link,
tr.track_row_view .dl_link
{
    visibility: hidden;
}
tr.track_row_view.current_track .info_link,
tr.track_row_view.current_track .dl_link,
tr.track_row_view:hover .info_link,
tr.track_row_view:hover .dl_link
{
    visibility: visible;
}
.track_list tr.lyricsRow div {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    width: 345px;
    white-space: pre-line;
}

.hiddenelem {
    visibility: hidden;
}

.controlTip {
    color:gray;
}

/* Used to hide content from JS-capable browsers that have JS deactivated, as well
   as unknown browsers without JS for whatever reason. For browsers known to be
   incapable or insufficient (C-grade), use the _use_script template variable instead.
   Of course, this hiding method won't work in browsers that don't support CSS. */
.withScript {
    display: none;
}
.js div.withScript {
    display: block;
}

.fieldHintWrapper {
    position: relative;
}

.fieldHint {
    color: gray;
    position: absolute;
    top: auto;
    left: 0px;
    width: 98%;
    border: 0px solid transparent;
    padding: 0px;
    white-space: nowrap;
    overflow: hidden;
    display: none;
	cursor:text;
}

.fieldHintActive .fieldHint {
    display: inline;
}

.share-dialog .leftcolumn {
    float: left;
    width: 360px;
    height: 420px;
}

.share-dialog .section div {
	margin-bottom:4px;
}

.share-dialog .heading {
    font-size: 16px;
    font-weight: bold;
}

.share-dialog .sampleheader {
    margin-bottom: 1em;
}

.share-dialog .leftcolumn .section {
    margin: 8px 14px 14px;
}

.share-dialog .blather {
    font-size: 12px;
}

.share-dialog #embedcode {
    width: 325px;
    height: 50px;
}

.share-dialog ul.standard-shortcode, .share-dialog ul.standard-shortcode li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.share-dialog ul.standard-shortcode {
    margin-top: 6px;
}

.share-dialog ul.standard-shortcode li {
    margin-bottom: 4px;
}

.share-dialog ul.standard-shortcode input {
    margin-right: 8px;
}

.share-dialog .divider {
    float: left;
    width: 1px;
    height: 435px;
    background: #DDDDDD;
    position: relative;
}

.share-dialog .rightcolumn {
    float: right;
    width: 420px;
    height: 435px;
}

.share-dialog .embedded_player_sample {
    margin-bottom: 1em;
}

.share-dialog .sampleplayer_tall{
    float:right;
}

.share-dialog .samplecontext_tall {
    float:left;
    width: 250px;
}

.share-dialog .sampleplayer_wide {
    margin-bottom: 14px;
}

.share-dialog .samplecontext_wide {
}

.share-dialog .colorSwatchHolder {
    height: 20px;
}

.share-dialog .transparentOption {
    padding-top: 5px;
}

.share-dialog .colorSwatch {
    display:inline-block;
    width: 45px;
    height: 22px;
    vertical-align: middle;
    border: 1px solid grey;
}

.share-dialog .hexInput {
    height:20px;
    width: 6em;
    text-align: center;
    vertical-align: middle;
}

.share-dialog #layouturl {
    width: 100%;
}

.share-dialog .code_box {
    position:relative;
    border:1px solid gray;
    overflow-x:hidden;
    clear:both;
    width:398px;
    margin:.35em 0em;
	color:#333333;
	padding-left:2px;
}

.share-dialog #customLayoutChoices {
    display: none;
}
.share-dialog #customLayoutChoices p {
    margin-top: 0.5em;
}
.share-dialog #biggieSizeChoices {
    display: none;
}

.share-dialog .dimensions {
    width: 3em;
    margin-right: 0.5em;
}
.share-dialog #refreshlink {
    display: none;
}
.share-dialog #sample_not_actual_size_warning {
    font-size: 0.8em;
    margin: 0.5em 0;
}

#popup_picker {
    width: 195px;
    height: 216px;
    position: relative;
}

#popup_picker .swatches {
    margin: 0px auto;
    width: 100px;
    border: 1px solid #cccccc;
}

#popup_picker .swatch {
    display: inline-block;
    width: 50px;
    height: 20px;
}

.yellow_alert {
    background: #fbf693;
    padding-left: 1.5em; 
    padding-right: 1.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    font-weight:500;
    /*line-height:12px;*/
    color: #000000;
}

/*
.yellow_alert p {
    margin:0.6em 0 0 0.6em;
}
*/

.country_pref_pointer {
    height: 11px;
    width:17px;
    margin-bottom: -3px;
    background: url(/img/triangle.png) no-repeat 0px 0px;
}
.country_pref_body {
    color: #000;
    padding:2px;
}
.country_pref_body .bd {
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    padding: 12px 12px 16px;
}
.country_pref_close {
    display: block;
    float: right;
    margin-top: -3px;
    margin-right: 2px
}
.country_pref_select {
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
}
.country_pref_body .us-zip {
    margin-top: 5px;
    margin-left: 5px;
}

.country_pref_body .us-zip-done {
    margin-left: 10px;
}

.country_pref_body .us-zip-done.disabled {
    color: gray;
}
.country_pref_body .us-zip-done.disabled:hover {
    text-decoration: none;
}

.country_pref_body .error-msg {
    margin-left: 5px;
    color: red;
}

.plain_info {
    color: #000000;
}

.smallIcon {
    display: inline-block;
    height: 16px;
    font-size: 16px;  /* for FF2 */
    padding: 0px 8px; /* for FF2 */
    background-image: url(/img/icon_strip.png);
    background-repeat: no-repeat;
    background-position: 16px 50%; /* hidden */
    vertical-align: baseline;
}

.ieLte7 .smallIcon {
    vertical-align: middle;
}

.sortIcon {
    height: 8px;
    font-size: 8px; /* for FF2 */
    margin-left: 0.15em;
}

.ieLte7 .sortIcon {
    margin-top: 1px; /* oy */
}

.iconLink {
    text-decoration: none;
}

.sortIconDown   { background-position: 0px 50%;   }
.sortIconUp     { background-position: -16px 50%; }

.vis_container {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* in IE6, hiding the flash object causes calls
 * into it to stop working, so let's just make it 1x1
 * instead */
.ie6 .vis_container_hidden {
    left: -1px;
    top: -1px;
    height: 1px;
    width: 1px;
    visibility: visible;
}

.vis_container_hidden {
    height: 350px;
    width: 350px;
    visibility: hidden;
}

.ie6 .vis_container_visible {
    left: 0px;
    top: 0px;
    height: 350px;
    width: 350px;
}

.vis_container_visible {
    visibility: visible;
}

.dlg_spinny {
    background-image:url(/img/stats-wait.gif);
    background-repeat:no-repeat;
    padding:16px;
    text-align:center;
    width:32px;
    height:32px;
}

/* throw whatever nasty styles you want in here and call Trackpipe.debug_test_embed_code() to see a simulation of your embed code on a page with hostile styles */
.myspace_style_abuse {
    font-size: 36px;
    color: #ff0000;
}

.acWidget {
    position:relative;
}
.acWidget .yui-ac-container {
    left:0;
    overflow:auto;
    z-index:9000;
}
.acWidget li {
    margin: 0px;
}

.acWidget .yui-ac-content {
background-color:white;
border:1px solid black;
}
.acWidget .yui-ac-content ul {
list-style-type:none;
margin:0;
padding:0;
}
.acWidget .yui-ac-content li {
cursor:default;
padding:0.2em 0.5em;
white-space:nowrap;
}
.acWidget .yui-ac-content li.yui-ac-highlight {
background-color:#0687F5;
color:white;
}
.acWidget .yui-ac-content .match {
font-weight:bold;
}
.acWidget .yui-ac-content .notFoundResult {
background-color:white;
color:black;
margin:0.3em 0;
padding:0.7em;
}
.acWidget .yui-ac-content .notFoundResult a, .acWidget .yui-ac-content .notFoundResult .hd {
font-weight:bold;
}

span.lightweightBreak {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
}

/* StatusSpinny */
#status-spinny {
    display: none;
    position: fixed;
    left: 20px;
    bottom: 20px;
    height: 15px;
    padding: 5px;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid white;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    z-index:1000;
}

#status-spinny.spinning {
    padding-left: 26px;
    background-image: url(/img/loading-light.gif);
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

/* lang */

:lang(fr) .track_list .title {
    width: 190px;
}
:lang(fr) .track_list .download-col .dl_link {
    width: 90px;
}

:lang(fr) .track_list .info_link {
    width: 45px;
}

body:lang(ja) .track_list .dl_link {
    width:30px;
}


/* trackpipe/public/css/trackpipe_layout.css */
/* Trackpipe styles for the shared page layout.
Styles specific to a single page should live in that page. */

body {
    margin: 0px;
    padding: 0px;
    background: #f7f7f7;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.widebody #pgHd {
    width: 1030px;
}

#pgHd a {
    color: white;
}

#pgHd {
    font-size: 100%;
}

#customHeaderWrapper {
    margin:-35px -30px 44px -30px;
}
#customHeader > * {
    display: none;  /* hide phone and other headers */
}

#customHeader > .desktop-header {
    display: block; /* overrides previous */
    font-size: 0;
    min-height:40px;
    position:relative;
    width:975px;
}

map area {
    outline: none;
}

.top-banner {
    width: 100%;
    background-color: #ffffc5;
    text-align: center;
    font-size: 13px;
    padding: 1em 0;
    color: #999;
}

.top-banner .banner-content {
    width: 975px;
    margin: 0 auto;
}

.top-banner a {
    font-weight: bold;
}

.top-banner.no-return-policy {
    width: 100%;
    background-color: #ffffc5;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.top-banner.private-streaming {
    font-size: 15px;
    color: #999;
    font-family: Georgia, serif;
    text-transform: lowercase;
    background: #3e3d44;
    background: -moz-linear-gradient(-45deg,  #3e3d44 0%, #0a0a0a 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3e3d44), color-stop(100%,#0a0a0a));
    background: -webkit-linear-gradient(-45deg,  #3e3d44 0%,#0a0a0a 100%);
    background: -o-linear-gradient(-45deg,  #3e3d44 0%,#0a0a0a 100%);
    background: -ms-linear-gradient(-45deg,  #3e3d44 0%,#0a0a0a 100%);
    background: linear-gradient(-45deg,  #3e3d44 0%,#0a0a0a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3d44', endColorstr='#0a0a0a',GradientType=1 );
}

.top-banner.private-streaming .title {
    text-transform: none;
    font-style: italic;
}

.top-banner.draft-album,
.top-banner.draft-track,
.top-banner.draft-subscription,
.top-banner.private-subscription {
    border-bottom: 1px solid #E6E6AA;
    color: #4A4A4A;
    font-size: 15px;
}

.custom-header-upload {
	width:973px;
	height:120px;
	border:1px dashed silver;
	background:white;
	text-align:center;
    color: gray;
}	

.custom-header-upload.uploading #chUploadButtonAndHint {
    display: none;
}

#chUploadProgressWrapper {
    display: none;
}

.custom-header-upload.uploading #chUploadProgressWrapper {
    display: inline-block;
}

.custom-header-upload button {
	margin-top:40px;
	margin-right:0px;
}

.upload-progress-wrapper {
	display:none;
}

#tralbumArtWrapper.uploading .upload-progress-wrapper {
    display:inline;
}

#bg-image-upload-hint {
	color:gray;
	font-size:85%;
	padding-top:2px;
}

#tralbumArtWrapper.uploading .image-upload-hint {
    display:none;
}

#customHeader button, .trackView #tralbumArt button, .gallery_item button, .deletableArt button {
	font-size:0.6875rem;
	font-weight:bold;
	position: absolute;
	right: 4px;
	bottom: 5px;
	margin: 0px;
	width:2em;
}

.deletableArt {
    position: relative;
}

#chUploadingLabel {
	color:gray;
	margin-top:50px;
}

#tralbumArtWrapper .upload-progress {
	margin-top:5px;
}

#headerUploadProgress, #tralbumArtWrapper .upload-progress {
	margin-top:5px;
}

#centerWrapper {
	position:static;
	margin: 1px auto 0px;
    width: 100%
}

.widebody #centerWrapper {
    width: 1030px;
}

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

.pgBd-border #pgBd {
    border: 1px solid rgba(0,0,0,.1);
    border-top: 0;
}

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

.menubar-2018 {
    min-width: 943px;
}

.widebody #pgBd {
    width: 960px;
}

.leftMiddleColumns {
    width: 756px;
    float: left;
}

.leftColumn {
    width: 376px;
    float: left;
}

.middleColumn {
    float: right;
	width:350px;
}

.rightColumn {
    font:normal 12px/1.25em 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 120px;
    float: right;
    word-wrap: break-word;
}

.rightColumn .title {
    font-size:14px;
    font-weight:normal;
    margin:0 0 1.25em;
}

body:lang(ja) .rightColumn .title {
    font-size: 12px;
    font-weight: bold;
}

.rightColumn #discography {
    margin-bottom:3em;
}

.tagArea .tag {
    margin-right: 0.5em;
    white-space: nowrap;
}

.middleColumn .tagArea {
	margin-top:1.5em;
}

.middleColumn .like-button-area {
    margin-top:1.5em;
}

#siteNav {
    float: left;
}

#userNav, #legal {
    float: right;
}

#pgHd.fattyNav {
    background: #cccccc;
}

#fattyContent {
    padding: 15px 35px 10px;
    height: 39px;
}

#fattyContent > * {
    display: inline-block;
    vertical-align: middle;
}

#fattyLogo {
    float: left;
    width: 270px;
} 

#fattySearch {
    margin: 0;
	margin-top: 7px;
	float: right;
}

#fattySearch input {
	border-width: 1px;
	border-style: solid;
	border-color: rgb(153,153,153);
	height: 25px;
	font-size: 16px;
	color: rgb(0,0,0);
	font: arial,sans-serif bold;
	padding: 0px 8px 0px 6px;
}

#fattySearch button {
	margin-right: 0;
	font-size: 14px;
	border-color: rgb(153,153,153);
	padding:3px 6px;
}

#pgHd .horizNav {
    margin: 0px 7px;
}

#pgHd .horizNav li.first {
    font-weight: bold;
}

.welcome {
    width: 70%;
    margin: 0px auto 2em;
    text-align: center;
}

.welcome h2 {
    font-weight: normal;
    font-size: 24px;
    color: #333;
    margin-bottom: 0;
}

.welcome p {
    font-size: 18px;
    text-align: left;
    color: #666;
    width: 500px;
    margin: 35px auto 65px;
}

.welcome .buttons a {
    display: inline-block;
    font-size: 24px;
    margin: 0 30px;
    color: white;
    width: 230px;
    line-height: 60px;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    border-radius: 4px;
}

.welcome .buttons a:hover {
    text-decoration: none;
}

.welcome .buttons a.track {
    background-color: #45859b;
}

.welcome .buttons a.track:hover {
    background-color: #629fb5;
}

.welcome .buttons a.album {
    background-color: #3685e8;
}

.welcome .buttons a.album:hover {
    background-color: #5ba0ff;
}


.welcome .buttons .or {
    font-size: 22px;
    color: #666;
    line-height: 60px;
}

.pagesignup h2, .pagepicktags h2, .pagesubdomain h2 {
    display:inline-block;
    color: #333;
}

.pagesignup p.loginSignupSwitch, .pagelogin p.loginSignupSwitch{
    display:inline-block;
    margin: 0 0 0 1.2em;
    color: #999;
}

.pagesignup p.signupBottomLinks {
    display: block;
    margin: 0 0 0 104px;
    color: #999;
}

.pagesignup p.signupBottomLinks .fanSignup {
    display: block;
    margin-top: 12px;
}

.pagesignup .termsofuse {
    margin: 5px 0 0 104px;
}
    
.pagesignup .termsofuse span{
    padding:0 0 0 .3em;
}

.termsofusealert{
    margin: 4px 0 0 120px;
}

.pagesignup #buttons, .pagepicktags #buttons {
    margin: 2em 0 2em 104px;
}

.pagesignup .signuptitle {
    margin-left: 30px;
}

.pagesignup .textInput, .pagepicktags .textInput, .pagesubdomain .textInput {
    width: 310px;
    border-top: 1px solid #9c9c9c;
    border-right: 1px solid #9c9c9c;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: .4em;
    font-family: arial,helvetica,clean,sans-serif;
    font-size:1.16em;
}

.pagepicktags .genresuggestion, .pagesubdomain .feelfree{
    color: #333;
    width: 340px;
    line-height: 140%;
}

.pagesubdomain .feelfree{
    width:480px;
    color: #666;
}

.pagepicktags .helper {
    color: grey;
    margin-top: 5px;
}


.loginSignupSwitch a {
    font-weight: bold;
}

.thumbthumb {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
    outline: 1px solid #eee;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}

.invertIconography .thumbthumb {
    outline: 1px solid rgba(255,255,255,0.05);
    outline-offset: -1px;
}

.thumbthumb.empty {
    background: #fff;
    background: rgba(0,0,0,0.1);
    border: 0;
    outline: 1px solid rgba(0,0,0,0.1);
    outline-offset: -1px;
}

.invertIconography .thumbthumb.empty {
    background: rgba(255,255,255,0.2);
}

.thumbthumb img {
    width: 100%;
    height: 100%;
}

.peekaboo-list.truncated .peekaboo-list-extra {
    display: none !important;
}

#discography ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#discography li {
    margin: 0 0 1em;
}

/* legacy expandable sidebar */
#discography.truncated li.extra {
    display: none;
}

/* unexpandable sidebar */
#discography li.gt3 {
    display: none;
}

#discography .trackTitle {
    margin: 0.5em 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#discography .trackYear {
    font-size:0.83333333333333em
}

#discography .showMore {
    font-weight: bold;
}

#upcoming-live-events,
#showography {
	margin-bottom:30px;
}

#upcoming-live-events ul,
#showography ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#showography li {
	margin-top: 2em;
    margin-bottom: 0em;
}

#upcoming-live-events li {
    margin-top: 1em;
    margin-bottom: 0em;
}

#upcoming-live-events li:first-child,
#showography li:first-child {
    margin-top: 0.5em;
}

#showography .showLoc {
    font-size:85%;
	padding-top:2px;
}

#upcoming-live-events .eventTitle,
#showography .showVenue {
	padding-top:2px;
}

#upcoming-live-events .showMore,
#showography .showMore {
    margin: 20px 0px 0px 0px; 
}

#showography .showLatest {
    padding-left: 1.25em;
    font-size:80%;
}

.contactHeader {
    font-size: 125%;
	font-weight:bold;
}

#contactForm dl.tableLayout {
    margin-left: 0.5em;
}

#contactForm dl.tableLayout dt {
    width: 14ex; /* override this to control the width of the left 'column' */
}

#contactForm .textInput {
    width: 100%;
}
#contactForm .alert {
    font-size: 100%;
}

#contactForm #contact\.banner {
    margin: 0.3rem 1.5rem 1.8rem;
    background-color: #E8A2AB;
    border: thin solid red;
    padding: 0.8rem 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #9C0000;
    font-size: 1rem;
}

#pullQuote {
	margin-top:1em;
	font-weight:bold;
	font-style:italic;
	font-size:150%;
	width:350px;
	text-align:center;
}

.warningBadge {
    font-size: 93%;
    color: red;
    padding: 0.2em 0.3em;
    border: 1px solid red;
    background: white;
}

a:hover .warningBadge {
    text-decoration: none;
}

.thumbthumb .warningBadge, .ipCellSet .warningBadge {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.warningBadgeRow {
    margin: 1em 0em;
}

.warningBadgeRow .invite {
    margin: 0 0 0 1em;
}

.warningBadgeRow .invite:hover {
}


/* tralbum layout */
.trackView {
    font-size: 12px;
    line-height: 1.25em;
}
.trackView dl {
    margin: 0px;
}
.trackEdit dd {
    margin: 0.7em 0em;    
}
.trackEdit textarea {
    height: 3.7em;
}
.trackView #name-section {
    float: left;
}
.trackView #name-section h3 {
    width: 385px;
}
.trackView #trackInfo dd {
    margin-left: 0px;
}
.trackView #trackInfo dt {
    margin-top: 1.5em;
}
.trackView #trackInfo ul {
    padding: 0px;
    list-style-type: none;
}
#trackInfo .pseudoLink {
    color: #0687f5;
}

/* tralbum download and package viewers */
.trackView .tralbumCommands {
    margin:0 0 1.5em;
}
.trackView li {
    display:inline-block;
}
.trackView .buyItem {
    border-radius: 4px;
    cursor: default;
    margin:.5em 0 0;
    padding: 0;
    width: 376px;
}

.buyItem .audio-quality {
    margin: 10px 0;
}
.buyItem .audio-quality.hi-res {
    font-weight: bold;
}
/* 
.trackView .buyItem:hover {
    background-color: rgba(0,0,0,0.0375);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    margin:  -0.5em -1em;
    padding: 1em 1em 0.5em;
}
.trackView .buyItem+.buyItem:hover {
    margin: 1em -1em -0.5em;
    padding: 1em 1em 0.5em;
}
.invertIconography .trackView .buyItem:hover {
    background-color: rgba(255,255,255,0.0375);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
*/
.trackView .buyItem li {
    margin:0;
}
.trackView .buyItem+.buyItem {
    margin-top:2em;
}
.trackView .buyItem .gallery_array {
    font-size: 0;
    line-height: 1;
    margin:0 0 5px;
}
.trackView .buyItem:first-child .gallery_array {
    margin:5px 0;
}
.trackView .bd {
    margin:0 0 4px;
    word-wrap: break-word;
}

body:lang(ja) .trackView .bd {
    line-height: 1.5em;
}

.trackView h3 {
    font-size: 14px;
    margin:0 0 7px;
}
.trackView h3 .merchtype {
    font-size:12px;
    font-weight:normal;
    margin:4px 0 0;
}
.trackView h3 .digitaldescription {
    font-size:12px;
    font-weight:normal;
    margin:4px 0 0;
}
.trackView h4 {
    font-size:18px;
    font-weight:bold;
    margin:0 0 5px;
}
.trackView h4 span {
    display: inline-block;
    line-height: 1;
}
.trackView h4.notable {
    margin-top: 9px;
}
.trackView .buyItemExtra,
.trackView .buyItemNyp {
    font-size:12px;
}
.trackView .buyItemNyp {
    font-weight: normal;
}
.trackView .buyItemEdition {
    margin:0 0 5px;
}
.trackView .buyItemEdition+.buyItemEdition {
    margin-top:-5px;
}
.trackView .send-as-gift {
    font-size: 12px;
}
.trackView .merch-edit-link {
    font-size: 69%;
    font-weight: normal;
    padding-left: 0.25em;
}

a > .primaryText, button > .primaryText {
    cursor: pointer;
}

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

.buy-link {
    background-color: transparent;
    border: none;
    font-size: 100%;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: left;
}
.buy-link::-moz-focus-inner {
    border: 0; 
    padding: 0; 
    margin: 0;
}
a.buy-link {
    line-height: 1.4em;
}
h4 > .buy-link {
    line-height: 1.33333em;
}

.subscribe-link {
    line-height: 125%;
}

a.g-button.sm.subscribe-link {
    margin-right: 5px;
}

.download-link.g-button:not(.send-as-gift), 
.order_package_link.g-button:not(.send-as-gift) {
    padding: 5px clamp(5px, 2vw, 10px);
    margin-top: 5px;
    flex: 1;
    box-sizing: border-box;
}
.g-button.subscribe-link {
    padding: 0 clamp(5px, 2vw, 10px);
    flex: 1;
    max-width: 250px;
}

.ab-test-cta-container {
    display: flex;
    width: 100%; 
    gap: 5px; 
    margin-top: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

a.download-link.g-button.sm.subscription-btn {
    flex: none;
    padding: 5px 60px;
}

.buyItem .live-event-btn {
    flex: 1;
}

.ab-test-cta-container .live-event-btn {
    margin-top: 10px;
}

#trackInfo .g-button.send-as-gift, 
#merch-item .g-button.send-as-gift {
    padding: 5px 10px;
}

/* end download and package viewers */

.trackView .trackTitle {
    font:normal 28px/1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin:-4px 30px 8px 0; /* right margin equal to space between columns */
    word-wrap: break-word;
    max-width:726px;
}
.trackView .trackTitle + h3 {
    font:normal 14px/15px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.trackView .albumTitle {
    margin:0;
    word-wrap: break-word;
}
.trackView .trackTitle .draft {
    font-weight: normal;
}
.trackView input.trackTitle {
    width: 15em;
    padding: 0.05em;
    padding-left: 0.1em;
	margin-left:0em;
}
.trackView .lyricsText {
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    margin-left:0;
}

.tralbumData {
	margin-top:2em;
    word-wrap: break-word;
}
.tralbum-about {
	/**/
}
.tralbumCredits {
    /**/
}
.tralbum-feed {
    /**/
}

.tralbum-feed img {
    margin-bottom:-3px;
	margin-right:2px;
}

.trackEdit .leftColumn {
    width: 520px;
    margin-left: 16px;
}

.trackEdit .rightColumn {
    width: auto;
    margin-right: 16px;
}

.trackEdit #otherDownloadControls {
    margin-top: 1.5em;
}

.trackEdit #otherDownloadControls dt {
    margin-top: 1em;
}

.trackEdit div.controlTip {
    margin-top: 0.5em;
    width: 34em;
}

.trackEdit #trackFile {
    margin: 1em 0em;
}

.trackEdit #trackFileInfo {
    font-size: 175%;
}

.trackEdit #trackUploadProgress, .shareDlgText {
    font-size: 108%;
    zoom: 1; /* fixes IE6 display glitch */
}

.trackEdit #trackUploadProgressLabel {
    margin-top: 0.2em;
}

.trackEdit #releaseDate {
    width: 12em;
    padding-left: 0.2em;
	margin-left:0.1em;
}

#dragTracksTip {
    padding-left: 0;
}

.dragTracksLabelCell {
    width: 1.5em;
}

.textInput, .numberInput, .moneyInput, .dateInput {
    width: 30em;
    border: 1px solid #9c9c9c;
    border-color: #9c9c9c #9c9c9c #ccc #ccc;
    margin: 0px;
    padding: 0.3em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
}

#albumTitles {
    width: 12em;
}

.numberInput {
    width: 3.5em;
    text-align: right;
}

.moneyInput {
    width: 4.5em;
    text-align: right;
}

.dateInput {
    width: 7em;
}

.trackEdit .indent {
    padding-left: 20px;
}

.trackEdit .whylink {
    width: 30em;
    text-align: right;
    padding-top: 0.3em;
}

.trackEdit .bandtag {
    font-weight: bold;
}

.trackEdit table.plain {
    margin: 0 0 0.6em 0;
}

.trackEdit table.plain td {
    border: none;
    margin: 0;
    padding: 0.05em 0.8em 0.05em 0;
}

.trackEdit #setPrice, .trackEdit #minPrice {
	width:4.5em;
	margin:0px 2px 0px 3px;
	text-align: right;
}

.trackEdit #bdiUploadControls * {
    padding-right: 0.8em;
}

.trackEdit #bdiUploadProgress {
    display: none;
}

.trackEdit #bdiUploadProgress td {
    vertical-align: middle;
}

.trackEdit .deleted .bdiFileName, .trackEdit .deleted .bdiSize, .package_summary .deleted, .packageListItem .deleted, #facebook-section .deleted {
    text-decoration: line-through;
}

textarea {
    overflow: auto;
}

.trackEdit .disabled label, .trackEdit .disabled .disableable {
    color: gray;
}

.trackEdit .downloadControlsSection {
    margin-top: 1em;
}

.trackEdit #bdiWrapper {
    margin-top: 0.7em;
}

.trackEdit .downloadControls {
	padding-left:15px;
	padding-top:5px;
}

#paidDownloadEmailWrapper {
    padding-left: 1.5em;
    padding-top: 4px; 
}

#lowPriceWarning {
    margin-top: 0.5em;
    margin-left: 1.8em;
    margin-right: 5em;
}

#paidDownloadControls_alert {
    font-size: 100%;
    font-weight: normal;
}

/* this can go away soon. the rule above replaces it. (robbie 8/26/2010) */
#paidDownloadControls .alert {
     font-size: 100%;
     font-weight: normal;
}
 
#paidDownloadControls_info {
    font-size: 100%;
    font-weight: normal;    
}

#trackNums th, #trackList th {
    font-weight: normal;
    border: 0;
    padding-bottom: 10px;
}

#trackList .preorder_column {
    text-align: center;
}

.trackListTitle {
    max-width: 29em;
}

.preorder_check {
    padding: 0; margin: 0;
}

#tralbumArt {
    width: 350px;
    height: 350px;
	position:relative;
    outline: 1px solid #eee;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
}
.invertIconography  #tralbumArt {
    outline: 1px solid rgba(255,255,255,0.1);
}

/* see case 480613 */
#tralbumArt img {
    display: block;
    height: 350px;
    width: 350px;
}

/* overrides previous rule to avoid HUGE Facebook Like button with
   "Do Not Track plus" Chrome extension (see case 484015) */
#share-buttons-list img {
    width: auto;
    height: auto;
}

#tralbumArtBlank {
    width: 350px;
    height: 350px;
	border:1px dashed silver;
	background:white;
	text-align:center;
}

#tralbumArtBlank button {
	margin-top:140px;
	margin-right:0px;
}

#taUploadingLabel {
	color:gray;
	margin-top:140px;
}
.trackView .inline_player {
    /*margin:24px 0 17px;*/
    margin: 2em 0em 1.41666666666667em;
}
.trackView .inline_player .title-section .title {
    word-wrap: break-word;
}

.trackView #editDeleteCommands {
    visibility: hidden;
    margin-left: 0px;
	margin-top:1em;
}

.trackView #editDeleteCommands button,
.trackView #editDeleteCommands a.tralbum-edit-button {
    font-size: 100%;
    background-color: lightyellow;
    border: 1px solid silver;
    padding: 0.25em 0.75em;
    margin-right: 0.5em;
}

.trackView #editDeleteCommands button > div {
    min-width: 2.5em;
}

.trackView #editDeleteCommands li {
    display: inline;
}


/* Licensed versions picker */

.trackView .territory-picker {
    fill: #0687f5;
    max-width: 155px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trackView .current-territory {
    display: inline;
}

.trackView .territories-picker-container {
    position: relative;
    display: inline-block;
}

.territories-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 57px;
}

.trackView .territories-content a {
    color: #0687f5;
    padding: 8px 15px 8px 10px;
    text-decoration: none;
    display: block;
}

.trackView .territories-content .view-as {
    padding: 8px 10px 0px 10px;
    display: block;
}

.territories-content a:hover {
    background-color: #ddd
}

/* end licensed versions picker */


.trackView #saveCancelCommands {
    margin: 2em 0em 1.5em 0em;
}

.trackView #saveCancelCommands li {
    display: inline;
}  

#normalDownloadHint {
    font-size: 66%;
    font-weight: normal;
    padding-left: 1px;
	margin-bottom: 1em;
}

.trackEdit #trackUploadProgress .progress_outer {
    width: 300px;
    margin: 0px; /* uncenters */
}

#share-link, .menuLink {
	background: url(/jslib/yui/2.9.0/button/assets/skins/sam/menu-button-arrow.png) no-repeat right 55%;
	padding-right: 20px;
}

#share-link {
    margin-right: -6px; /* cinches up extra horiz space next to menu arrow */ 
}

.share-link-container.new-share-collect {
    display: none;
}

/*
reset inherited h3 styles but why use an h3?
#share-embed h3,
.share-embed h3 {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
}
*/

#trackList tr {
    cursor:move;
}

#trackList input {
    cursor:default;
}

/***** Release Labels, used primarily for denoting subscription status on tralbums, merch, etc. */
.release-label,
.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;
}
.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;
}
.release-label > a:hover,
.release-label-dark > a:hover {
    text-decoration: none;
}
/* invertIconography */
.invertIconography .release-label,
.invertIconography .release-label > a,
.invertIconography .release-label-dark,
.invertIconography .release-label-dark > a {
    color: rgba(255,255,255,0.5);
}
.invertIconography .release-label > strong,
.invertIconography .release-label > a > strong,
.invertIconography .release-label-dark > strong,
.invertIconography .release-label-dark > a > strong {
    color: rgba(255,255,255,0.75);
}
.invertIconography .release-label {
    background-color: rgba(255,255,255,0.15);
}
.invertIconography .release-label-dark {
    background-color: rgba(255,255,255,0.4);
}
/* margins depending on where a .release-label is used */
.item-link+.release-label,
.item-link+.release-label-dark,
.collection-item-artist+.release-label,
.collection-item-artist+.release-label-dark {
    margin: -4px 0 12px;
}
.merch-grid .merchtype+.release-label,
.merch-grid .merchtype+.release-label-dark {
    margin: 2px 0;
}
#name-section > h3+.release-label,
#name-section > h3+.release-label-dark {
    margin: 8px 0 0;
}
#name-section > .merchtype+.release-label,
#name-section > .merchtype+.release-label-dark {
    margin: -6px 0 12px;
}
.buyItem .secondaryText+.release-label,
.buyItem .secondaryText+.release-label-dark,
.sidebar .secondaryText+.release-label,
.sidebar .secondaryText+.release-label-dark {
    margin: 4px 0 0;
}
/* in disco sidebar */
.sidebar .release-label,
.sidebar .release-label-dark {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*** YUI Panel (general) ***********************************/

.yui-panel {
    overflow: visible;
    font-family: arial,helvetica,clean,sans-serif;
}
 
.yui-panel .container-close {
    position: absolute;
    top: 8px;
    right: 15px;
    width: 25px;
    height: 15px;
    background: url(/jslib/yui/2.9.0/assets/skins/sam/sprite.png) no-repeat 0 -300px; 
}


#bg-image-filename {
    color: gray;
    margin-right: 0.2em;
    display: inline-block;
    max-width: 300px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

#background-image-container {
    margin: 1.5em 0 1em 110px;
}

#background-image-container.uploading .upload-controls-wrapper {
    display: none;
}

#background-image-container .upload-progress-wrapper {
    display: none;
    text-align: right;
}

#background-image-container.uploading .upload-progress-wrapper {
    display: block;
    text-align: right;
}

#background-image-container .upload-progress {
    display: inline-block;
    padding-top: 2px;
}

#background-image-container .upload-progress .progress_outer {
    height: .75em;
    width: 9.35em;
    border: 1px solid silver;
	margin: 0px;
}

#background-image-container .upload-progress .progress_inner {
    background: #429d2f;
    height: .75em;
    width: 0px;
}

#background-image-container select {
    width: 124px;
}
#repeat-behavior-items .form-item:first-child div {
    display: inline-block;
    vertical-align: top;
}
#repeat-behavior-items .form-item input {
    margin-top: 0;
}
#repeat-behavior-items .form-item label {
    text-align: left;
    width: 124px;
}
#repeat-behavior-items .form-item:first-child label {
    display: block;
}
#repeat-behavior-items .form-item:first-child label+label {
    margin-top: 2px;
}
#repeat-behavior-items .form-item:last-child label {
    display: inline-block;
}

#statsNav {
	 text-align:center;
}

#primaryStatsNav {
	font-size:182%;
}

.tracks, .sites, .encodings, .playTypes {
	list-style:none;
}

.sitesWrapper, .encodingsWrapper, .playTypesWrapper {
	margin:0 auto;
	text-align:left;
}

.sitesWrapper {
	width:550px;
}

.encodingsWrapper, .playTypesWrapper {
	width:250px;
}

.navContentSet {
	margin-top:1.5em;
}

#privateToggle, #offsiteToggle {
	margin-top:1.5em;
}

#releaseDateDD, #downloadSettings, #partOfAlbum {
	margin-top:1.5em;
	margin-right: 30px;
}

.shareFromEmbedLabel {
	margin-left:6px;
    padding-left:22px;
	background-repeat:no-repeat;
	background-position:left center;
}

.shareFromEmbedLabel {
    padding-top:2px;
	padding-bottom:2px;
}

#shareEmail {
	background-image:url(/img/share_email.png);
}

#shareMySpace {
	background-image:url(/img/share_myspace.png);
}

#shareFacebook {
	background-image:url(/img/share_facebook.png);
}

#shareStumbleUpon {
	background-image:url(/img/share_stumbleUpon.png);
}

#shareBlogger {
	background-image:url(/img/share_blogger.png);
}

#shareTypePad {
	background-image:url(/img/share_typepad.png);
}

#shareWordPress {
	background-image:url(/img/share_wordpress.png);
}

#shareWordPressOrg {
	background-image:url(/img/share_wordpress_org.png);
}

#shareTwitter {
	background-image:url(/img/share_twitter.png);
}

#shareLiveJournal {
	background-image:url(/img/share_livejournal.png);
}

#shareTumblr {
	background-image:url(/img/share_tumblr.png);
}

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

#editDesign .colorSwatch {
  	display:inline-block;
  	border-left:4em solid;
}

#editDesign .hexInput {
	height:100%;
  	width: 6em;
  	text-align: center;
}

#editDesign .form-item {
    display: block;
    text-align:right;
    margin-bottom:.75em;
}

#editDesign .alert {
	font-size:100%;
	margin-top:-.5em;
}

.invertIconography #share-link, .invertIconography .menuLink {
    background-image: url(/img/menu-button-arrow-invert.png);  
}

.offsite_label {
    padding: 0;
    padding-top: 0.8em;
    border: none;
    text-align: right;
}

.offsite_input {
    border: none;

}

/* track license selection and display:  */

form #license {
	padding-left: 14px;
	
}

#license.info {
    /*font-size:85%;*/
	margin-top:2em;
}

#license h4 {
    margin: .8em 0 0;
    font-weight: normal;
    font-size: 100%;    
}

.ieLte7 #license h4 {
    margin-left: .3em;
}

#license ul {
    margin: 0px;
}

#license li {
	margin: .6em 0 0;
}

#license p {
	margin-top:1em;
	margin-left:1.5em;
	display:none;
}

#license .selected p {
	display:block;
}

/* end license */

.widgetCluster {
    background: #EEEEEE;
    padding: 20px;
    margin: 10px;
}

.widgetCluster .widgetLine {
    padding-top: 2px;
    padding-bottom: 2px;
}

.widgetNote {
    margin: 5px 20px;
}

.widgetWarning {
    color: red;
    padding: 7px;
    background: white;
    border: 1px solid red;
}

.item_desc {
    width: 32em;
}

.package_desc {
    margin-top: 5px;
}

#download_desc {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* physical package editor */

.package_wrapper {
    margin-bottom: 0.3em;
}

#packageShipping td, packageShipping tr {
    border: 0;
}

.packageShippingWidgets {
    padding-left: 2em;
}

.packageShippingLabel {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-right: 0.5em;
}

.packageSummary {
    font-weight: bold;
}

.packageFulfillmentDays {
    width: 2.2em;
}

.packageTitle {
    width:29.3em;
}

.trackEdit .packageDescription {
    height:7.7em;
}

.packageIncludeDownload {
	margin-top:1.4em;
}

.packageQuantityEditorWrapper {
    display: inline-block;
    display: -moz-inline-box;
    margin-top: 0.4em;
}

#packages_orderer {
    margin-bottom: 1.0em;
}

#packages_orderer tr, #packages_orderer td {
    padding: 2px 5px 2px 5px;
    borderx: none;
    cursor: move;
}

.packageOptionTitle {
    width: 12em;
}

.packageOptionLabel {
    display: inline-block;
    text-align: right;
    width: 8em;
}

.packageOptionItems {
    margin-top: 0.75em;
}

/* end physical package editor */

/* for physical package viewer, see buyItem rules, above */

.please-wait-panel .bd {
    text-align: center; 
    font-size: 150%; 
    margin: 20px 0;
    color: #777;
}

/* picture gallery */

.gallery_array {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.gallery_item {
    margin: 0;
    border: 0;
    display: inline-block;
    position: relative;
    width: 66px;
    height: 50px;
    padding: 0 11px 3px 0;
    vertical-align: middle;
    text-align: center;
}

.ieLte7 .gallery_item {
    display: inline;
    padding-bottom: 0px;
}

.gallery_item.last {
    padding-right: 0;
}

.gallery_item.viewer {
    height: auto;
}

.gallery_item_holder {
    position: absolute;
    width: 66px;
    height: 50px;
    top: 0;
    left: 0;
    vertical-align: middle;
}

.gallery_item_blank {
    position: absolute;
    width: 64px;
    height: 48px;
    top: 0;
    left: 0;
    border: 1px solid gray;
    background: white;
}

.gallery_item img {
    height: 48px;
    outline: 1px solid rgba(0,0,0,0.05);
    outline-offset: -1px;
    width: 64px;
}
.invertIconography .gallery_item img {
    outline: 1px solid rgba(255,255,255,0.1);
}
.gallery_item .add {
    display: -moz-inline-box;
    display: inline-block;
    margin-top: 25px;
}

.gallery_item.uploading .add {
    display: none;
}

.gallery_item button {
	font-size:73%;
}

.gallery_item .upload-progress {
    position: absolute;
    width: 80%;
    left: 8%;
    height: 10%;
    top: 45%;
    display: none;
}

.gallery_item.uploading .upload-progress {
    display: block;
}

.gallery_item .upload-progress .progress_outer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.gallery_item .upload-progress .progress_inner {
    position: absolute;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    left: 0;
    height: 100%;
}

.gallery_viewer td {
    padding-left: 0;
}

/* end gallery */

/* misc */

.releaseParty h3 {
    margin-top: 0;
}

/* end misc */


/* utils */
.b {
    font-weight:bold;
}

.i {
    font-style:italic;
}
.bc-ui {
    background:url(/img/_sprite-bc-ui-20170921.png);
}

.housefont{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.smallspace {
    display: inline-block;
    margin-left: .5em;
}

.greyc {
    color: #ccc;
}

.greye {
    color: #eee;
}

.greybar {
    padding: 0 0.2em;
}

.round3 {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.round4 {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.round5 {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bottom {
    margin-bottom: 0!important;
    padding-bottom: 0!important;
}

.alignc {
    text-align: center;
}

.alignr {
    text-align: right;
}

.alignl {
    text-align: left;
}

.clear {
    clear: both;
}

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

/* clearfix from jquery-ui.css */
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }

/* end utils */

/* trackpipe/public/css/license_icons.css */

.cc-icons > span,
.cc-icons.commercial {
	display:table-cell; /* for FF2 */
	display:inline-block;
	width:13px;
	height:13px;
    margin: 0 1px -3px;
}

.cc-icons > .attribution,
.cc-icons > .non-commercial,
.cc-icons > .no-derivatives,
.cc-icons > .share-alike,
.cc-icons.commercial {
    background:url(/img/CCstrip@2x.png) no-repeat;
    background-size: 65px 13px;
}

.cc-icons > .attribution {
    background-position: 0 0;
}

.cc-icons > .non-commercial {
    background-position: -13px 0;
}

.cc-icons > .no-derivatives {
    background-position: -26px 0;
}

.cc-icons > .share-alike {
    background-position: -39px 0;
}

.cc-icons.commercial {
    background-position: -52px 0;
}

a.cc-icons,
.cc-icons.commercial {
    padding-right: 4px;
}

/* trackpipe/public/css/autocomplete_responsive.css */
:root {
    --mobile-results-height: calc(100vh - 101px);
    --mobile-results-text-width: calc(100vw - 73px);
    --mobile-results-height-tag: calc(100vh - 152px);
}
/* fixes for generic rules from trackpipe_basic.css & basic.css */
li.result-item, li.results-see-all, li.results-genre, li.results-tags, li.autocomplete-no-results {
    margin-top: 13px;
    margin-bottom: 13px;
}
button.menubar-search-icon {
    margin-right: 0;
    font-size: 100%;
    text-align: center;
}
li.result-item, li.results-see-all, li.results-genre, li.results-tags, li.autocomplete-no-results {
    margin-top: 0;
    margin-bottom: 0;
}

/* SEARCHBOX */
form.menubar-search.has-results .search-autocomplete li.result-item,
form.menubar-search .clear-autocomplete,
form.menubar-search .mobile-placeholder,
form.menubar-search .mobile-results-tags,
.menubar-2018-phone form.menubar-search,
form.menubar-search .tumbleweed,
form.menubar-search .search-autocomplete .no-show,
form.menubar-search .search-autocomplete li.results-genre,
form.menubar-search ul,
.cancel-autocomplete {
    display: none;
}
body.has-menubar-phone #menubar-wrapper form.menubar-search {
    display: block;
}
.menubar-outer.hide form.menubar-search,
.hd.hide form.menubar-search {
    visibility: hidden;
    opacity: 0;
}
form.menubar-search {
    outline: none;
    width: fit-content;
    float:right;
    visibility: visible;
    transition: visibility 0.2s, opacity .2s ease-in;
}
form.menubar-search:focus {
    box-shadow: 0 0 5px #d7d7d7;
}
form.menubar-search input[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-user-select: auto;
    appearance: none;
    border-radius: 3px;
    color: rgba(22,17,19,0.7);
    outline: none;
    font-size: 14px;
    line-height: 16px;
    background: #f3f3f3;
    border: 1px solid #f3f3f3;
    width: 249px;
    height: 36px;
    padding: 0 35px 0 10px;
}
div.header-discover-2023 form.menubar-search input[type=text] {
    background: #efefef; 
}
body.invertIconography form.menubar-search input[type=text] {
    padding: 0 35px 2px 10px;
}
form.menubar-search.pending input[type=text] {
    width: 234px;
    padding-right: 50px;
}
body:not(.tralbum-page) #menubar-wrapper:not(.corp-home) form.menubar-search input[type=text] {
    width: 297px;
}
#menubar-wrapper form.menubar-search input[type=text] {
    width: 295px;
}
#menubar-wrapper form.menubar-search.pending input[type=text] {
    width: 280px;
    padding-right: 50px;
}
body:not(.tralbum-page) #menubar-wrapper:not(.corp-home) form.menubar-search.pending input[type=text] {
    width: 282px;
    padding-right: 50px;
}
form.menubar-search input[type=text]:focus{
    box-shadow: 0 0 5px #d7d7d7;
}
form.menubar-search.keyboard-focus input[type=text]:focus {
    background: #eef2f3;
}
form.menubar-search button.menubar-search-icon {
    background: transparent;
    border: none;
    height: 16px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 11px;
    width: 16px;
    z-index: 11;
    text-indent: 0px;
    fill: #333;
}
.has-menubar.invertIconography #menubar.menubar-2018 button.menubar-search-icon .svg-icon {
    fill: #FFFFFF;
}
#menubar-wrapper form.menubar-search .menubar-search-icon,
#header-wrapper form.menubar-search .menubar-search-icon {
    display: block;
}
form.menubar-search .loading-icon {
    top: 10px;
    right: 32px;
}
form.menubar-search ul {
    position: absolute;
    right: 0;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    z-index: 11;
    padding: 0;
    margin: 0;
}

/* LIST ELEMENTS */
form.menubar-search li {
    list-style: none;
}
form.menubar-search li.simple {
    height: 50px;
    font-size: 14px;
    font-weight: 500;
}
form.menubar-search:not(.pending) li.simple {
    cursor: pointer;
}
form.menubar-search li.simple a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 13px 0 20px;
    color: #fff;
}
form.menubar-search li.simple a > span {
    display: inline-block;
}
form.menubar-search li.simple a > span > svg {
    padding-top: 5px;
}
form.menubar-search svg.arrow {
    height: 24px;
    width: 24px;
    fill: currentColor;
}

/* KEYBOARD NAV */
body.search-active form.menubar-search.has-results ul.filter-list .filter-link.selected,
form.menubar-search .search-autocomplete li a.selected,
form.menubar-search:not(.pending) .genre-list li a.selected {
    outline: 2px solid blue !important;
    outline: -webkit-focus-ring-color auto 1px !important;
}
body.search-active form.menubar-search .key-nav {
    z-index: 111;
}

/* GENRE LIST */
body.search-active form.menubar-search:not(.has-results) .genre-list {
    top: 40px;
    display: unset;
}
form.menubar-search .genre-list li {
    background-color: #fff;
    margin: 0;
    height: 50px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
form.menubar-search .genre-list li:nth-child(1) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(1) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(1) a:focus { background-color: hsl(27, 90%, 68%); }
form.menubar-search .genre-list li:nth-child(2) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(2) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(2) a:focus { background-color: hsl(11, 89%, 65%); }
form.menubar-search .genre-list li:nth-child(3) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(3) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(3) a:focus { background-color: hsl(355, 74%, 51%); }
form.menubar-search .genre-list li:nth-child(4) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(4) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(4) a:focus { background-color: hsl(339, 65%, 52%); }
form.menubar-search .genre-list li:nth-child(5) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(5) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(5) a:focus { background-color: hsl(314, 51%, 50%); }
form.menubar-search .genre-list li:nth-child(6) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(6) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(6) a:focus { background-color: hsl(277, 43%, 57%); }
form.menubar-search .genre-list li:nth-child(7) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(7) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(7) a:focus { background-color: hsl(255, 29%, 57%); }
form.menubar-search .genre-list li:nth-child(8) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(8) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(8) a:focus { background-color: hsl(231, 40%, 66%); }
form.menubar-search .genre-list li:nth-child(9) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(9) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(9) a:focus { background-color: #87A8C5; }
form.menubar-search .genre-list li:nth-child(10) a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(10) a:focus,
.menubar-2018 #site-nav form.menubar-search .genre-list li:nth-child(10) a:focus { background-color: #333; }
form.menubar-search:not(.pending) .genre-list li:hover a,
form.menubar-search:not(.pending) .genre-list li a:not(.selected):focus {
    opacity: 0.9;
}

/* FILTERS */
body.search-active form.menubar-search.has-results ul.filter-list {
    box-shadow: 0 2px 4px 1px rgb(0 0 0 / 10%);
    display: flex;
    border-bottom: 2px solid #e5e5e5;
    padding: 0;
    margin: 0;
    margin-top: 2px;
}
body.search-active form.menubar-search.has-results ul.filter-list .filter-link.selected-filter {
    border-bottom: 2px solid #333;
    color: #333;
    cursor: default;
}
body.search-active form.menubar-search.has-results ul.filter-list .filter-link {
    font-size: 14px;
    text-align: center;
    padding: 12px 0;
    color: #1da0c3;
    margin-top: 0px;
    margin-bottom: -1px;
    line-height: 1.1;
    font-weight: 500;
    flex-grow: 1;
    border-bottom: 2px solid transparent;
    top: 0;
    background: none;
    white-space: nowrap;
}
form.menubar-search.has-results:not(.pending) ul.filter-list .filter-link:not(.selected-filter) {
    cursor: pointer;
}
body.search-active form.menubar-search.has-results ul.filter-list .filter-link.f {
    display: none;
}
form.menubar-search.has-results:not(.pending) ul.filter-list .filter-link:not(.selected-filter):hover {
        border-bottom: 2px solid #1DA0C3;
    }

/* RESULT LIST */
body.search-active form.menubar-search.has-results .search-autocomplete {
    display: unset;
    text-align: left;
}
form.menubar-search .search-autocomplete {
    background-color: #000;
    box-shadow: 0 2px 4px 1px rgb(0 0 0 / 10%);
    top: 81px;
}

/* RESULTS */
form.menubar-search .search-autocomplete li {
    background-color: #333;
    position: relative;
}
form.menubar-search .search-autocomplete li.result-item a {
    display: block;
    height: 50px;
    padding: 4px 6px;
    color: #222;
}
form.menubar-search .search-autocomplete li a,
#menubar form.menubar-search .search-autocomplete li:not(.results-see-all.key-nav, .results-genre.key-nav, .results-tags.key-nav) a:focus,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav form.menubar-search .search-autocomplete li:not(.simple) a:focus {
    background-color: #fff;
}
form.menubar-search .search-autocomplete li.result-item a > span {
    display: inline-block;
    height: 50px;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: top;
}
form.menubar-search .search-autocomplete li.result-item a > span.result-art {
    height: 50px;
    width: 50px;
    background-color: rgba(0,0,0,0.05);
}
form.menubar-search .search-autocomplete li.result-item a > span.result-art.round-art,
form.menubar-search .search-autocomplete li.result-item a > span.result-art.round-art img {
    border-radius: 50%;
}
form.menubar-search .search-autocomplete li.result-item a > span.result-art img {
    border: 1px solid rgba(0,0,0,0.10);
    height: 100%;
    width: 100%;
}
form.menubar-search .search-autocomplete li.result-item a > span.result-info {
    padding-left: 6px;
}
#menubar-wrapper form.menubar-search .search-autocomplete li.result-item a > span.result-info {
    width: 82%;
}
#header-wrapper form.menubar-search .search-autocomplete li.result-item a > span.result-info {
    width: 78%;
}
form.menubar-search .search-autocomplete li.result-item a > span.result-info div {
    overflow: hidden;
    text-overflow: ellipsis;
}
form.menubar-search .search-autocomplete li.result-item a > span.result-info cite {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-style: normal;
}
form.menubar-search .search-autocomplete li.result-item a > span.result-info div.result-type {
    text-transform: uppercase;
}
body.search-active form.menubar-search.has-results .search-autocomplete li.result-item {
    display: none;
}
body.search-active form.menubar-search.has-results .search-autocomplete li.result-item:nth-child(-n+5) {
    display: list-item;
}
form.menubar-search:not(.pending) .search-autocomplete li:hover a,
form.menubar-search:not(.pending) .search-autocomplete li a:not(.selected):focus {
        opacity: 0.9;
}

/* SEE ALL TAB */
form.menubar-search .search-autocomplete li.results-see-all a,
form.menubar-search .search-autocomplete li.results-see-all.key-nav a,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav li.key-nav.results-see-all a:focus {
    background-color: #F3F3F3;
    color: #222;
    font-weight: 700;
}

/* GENRE TAB */
form.menubar-search .search-autocomplete.genre-match li.results-genre {
    display: list-item;
    background-color: #fff;
}
form.menubar-search .search-autocomplete li.results-genre a,
#site-nav form.menubar-search .search-autocomplete li.results-genre a.selected,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav li.results-genre.key-nav a:focus {
    color: #fff;
    background-color: #28a0c1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#menubar #site-nav form.menubar-search .search-autocomplete li.results-genre a:not(.selected):focus {
    background-color: #28a0c1;
}

/* TAG TAB */
form.menubar-search .search-autocomplete li.results-tags {
    background-color: #fff;
    font-weight: 700;
}
form.menubar-search .search-autocomplete li.results-tags a > span,
form.menubar-search li.mobile-results-tags a > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
form.menubar-search .search-autocomplete li.results-tags a,
#site-nav form.menubar-search .search-autocomplete li.results-tags a.selected,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav li.results-tags.key-nav a:focus {
    color: #fff;
    background-color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#menubar #site-nav form.menubar-search .search-autocomplete li.results-tags a:not(.selected):focus {
    background-color: #333;
}

/* NO RESULTS */
body.search-active form.menubar-search .search-autocomplete .autocomplete-no-results {
    background-color: #fff;
    color: #222;
    font-size: 14px;
    white-space: normal;
    padding: 3px 20px;
    position: relative;
}
body.search-active form.menubar-search .search-autocomplete .autocomplete-no-results .noresults-header {
    font-weight: 500;
    margin-bottom: 3px;
}
body.search-active form.menubar-search .search-autocomplete .autocomplete-no-results .noresults-text {
    margin-top: 24px;
}
body.mobile-search-active form.menubar-search .search-autocomplete .autocomplete-no-results .tumbleweed {
    display: block;
}
body.mobile-search-active form.menubar-search .search-autocomplete .autocomplete-no-results .tumbleweed img {
    border: none;
    max-width: 100%;
}

/* MOBILE BODY */
body.mobile-search-fix.mobile-search-active {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    position: fixed;
    height: 100%;
    overflow: hidden;
}
body.mobile-search-active::-webkit-scrollbar,
form.menubar-search .menubar-search-icon {
    display: none;
}

/* MOBILE SEARCHBOX */
body.has-menubar-phone form.menubar-search,
.menubar-2018-phone-wrapper:not(.has-corp-header) .mobile-searchbar-2018.no-show {
    display: none;
}
.mobile-searchbar-2018 {
    visibility: visible;
    transition: visibility 0.1s, opacity .1s ease-in;
    border-radius: 3px;
    height: 42px;
    width: 100%;
    margin-bottom: 10px;
}
body.mobile-search-fix #menubar-2018-phone {
    z-index: 11;
}
body.mobile-search-active .mobile-searchbar-2018,
body.search-active .mobile-searchbar-2018 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
}
@media (max-width:740px) {
    body.search-responsive .menubar-2018-phone-wrapper:not(.has-corp-header) .mobile-searchbar-2018 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
    }
}
.mobile-searchbar-2018 form.menubar-search,
body.search-active #menubar-2018-phone form.menubar-search {
    display: block;
    width: 100%;
    z-index: 3;
    background: #fff;
}
body.search-active #menubar-2018-phone form.menubar-search {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 0;
}
body.search-active #menubar-2018-phone form.menubar-search input[type=text] {
    top: 10px;
    width: calc(100% - 123px);
    margin-left: 10px;
}
body:lang(ja).search-active #menubar-2018-phone form.menubar-search input[type=text] {
    width: calc(100% - 149px);
}
#menubar-2018-phone form.menubar-search input[type=text]:focus {
    box-shadow: none;
}
#menubar-2018-phone form.menubar-search input[type=text] {
    width: calc(100% - 47px);
    height: 38px;
    font-size: 16px;
}
body.search-active #menubar-2018-phone form.menubar-search.pending input[type=text] {
    padding: 0 35px 0 10px;
}
body.search-active #menubar-2018-phone form.menubar-search.pending .loading-icon {
    top: 21px;
    right: 78px;
}
body:lang(ja).search-active #menubar-2018-phone form.menubar-search.pending .loading-icon {
    right: 104px;
}
body.search-active #menubar-2018-phone .cancel-autocomplete {
    display: inline-block;
    top: 5px;
    right: 1px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    padding: 15px 12px 15px 12px;
    color: #9B9B9B;
    position: absolute;
    z-index: 3;
}
#menubar-2018-phone form.menubar-search button.menubar-search-icon {
    right: 13px;
}
body.search-responsive #menubar-2018-phone form.menubar-search button.menubar-search-icon {
    display: block;
}
body.search-active #menubar-2018-phone form.menubar-search button.menubar-search-icon,
body.search-active #menubar-2018-phone form.menubar-search .genre-list {
    display: none;
}

body.mobile-search-fix #menubar-2018-phone form.menubar-search button.menubar-search-icon {
    top: 122px;
    right: 24px;
}
body.mobile-search-fix #menubar-2018-phone.fixed form.menubar-search button.menubar-search-icon {
    top: 72px;
}
body.mobile-search-fix:not(.special-banner-present) #menubar-2018-phone form.menubar-search button.menubar-search-icon,
body:lang(ja).mobile-search-fix #menubar-2018-phone form.menubar-search button.menubar-search-icon {
    top: 71px;
}
body.search-active.mobile-search-fix #menubar-2018-phone form.menubar-search.pending .loading-icon {
    top: 21px;
}
body.search-active.mobile-search-fix #menubar-2018-phone form.menubar-search {
    padding-top: 10px;
}
body.search-active.search-responsive form.menubar-search.has-results:not(.pending) .clear-autocomplete {
    position: absolute;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #9B9B9B;
    padding-top: 4px;
}
@media (max-width:740px) {
    body.search-active.search-responsive form.menubar-search.has-results:not(.pending) .clear-autocomplete {
        display: block;
        top: 11px;
        right: 81px;
    }
    body:lang(ja).search-active.search-responsive form.menubar-search.has-results:not(.pending) .clear-autocomplete {
        right: 106px;
    }
}
body.search-active.mobile-search-fix #menubar-2018-phone form.menubar-search.has-results:not(.pending) .clear-autocomplete {
    display: block;
    top: 12px;
    right: 81px;
}
body:lang(ja).search-active.mobile-search-fix #menubar-2018-phone form.menubar-search.has-results:not(.pending) .clear-autocomplete {
    right: 107px;
}
/* MOBILE BACKGROUND */
body.search-active #menubar-2018-phone form.menubar-search .mobile-placeholder {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: calc(100% - 51px);
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
}
body.search-active #menubar-2018-phone form.menubar-search .mobile-placeholder p {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    color: #9b9b9b;
    text-align: center;
    line-height: 1.5;
    margin: 159px auto;
    width: 200px;
}

/* MOBILE FILTERS */
body.search-active #menubar-2018-phone form.menubar-search.has-results ul.filter-list {
    margin-top: 9px;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}
body.search-active #menubar-2018-phone form.menubar-search.has-results ul.filter-list::-webkit-scrollbar {
    display: none;
}
body.search-active #menubar-2018-phone form.menubar-search.has-results ul.filter-list .filter-link.f {
    display: block;
}

/* MOBILE RESULTS */
#menubar-2018-phone form.menubar-search .search-autocomplete li.results-see-all,
#menubar-2018-phone form.menubar-search .search-autocomplete li.results-tags,
#menubar-2018-phone form.menubar-search .search-autocomplete li.results-genre {
    display: none;
}
body.search-active #menubar-2018-phone form.menubar-search.has-results .search-autocomplete {
    display: block;
    margin: 1px 0 0px -10px;
    width: 100vw;
    border: none;
    height: var(--mobile-results-height);
    overflow: scroll;
    top: 89px;
    background-color: #fff;
    box-shadow: none;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}
body.search-active.mobile-search-fix #menubar-2018-phone form.menubar-search.has-results .search-autocomplete {
    top: 99px;
}
body.search-active #menubar-2018-phone form.menubar-search.has-results .search-autocomplete::-webkit-scrollbar {
    display: none;
}
body.search-active #menubar-2018-phone form.menubar-search.has-results .search-autocomplete li.result-item {
    display: list-item;
}

body.search-active #menubar-2018-phone form.menubar-search.has-results .search-autocomplete li.result-item .result-info {
    max-width: var(--mobile-results-text-width);
}

/* MOBILE TAG */
body.search-active #menubar-2018-phone form.menubar-search.has-results .search-autocomplete.tag-room {
    height: var(--mobile-results-height-tag);
}
body.search-active #menubar-2018-phone form.menubar-search .mobile-results-tags:not(.no-show) {
    display: block;
    position: fixed;
    width: 100vw;
    bottom: 0px;
    background-color: #fff;
    font-weight: 700;
    height: 50px;
    font-size: 14px;
    left: 0;
    z-index: 2;
    margin-top: 0;
    margin-bottom: 0;
}
body.search-active #menubar-2018-phone form.menubar-search .mobile-results-tags:not(.no-show) a {
    color: #fff;
    background-color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* MOBILE RESPONSIVE DESKTOP */
@media (max-width:740px) {
    body.search-active.search-responsive {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    position: fixed;
    height: 100%;
    overflow: hidden;
    }
    body.search-active.search-responsive::-webkit-scrollbar {
        display: none;
    }
}

/* SPIN & PENDING */
/*******spin*******/
@keyframes lazy-load {
    to {
        width: 16px;
        height: 16px;
        overflow: hidden;
        visibility: visible;
    }
}
.pending .loading-icon {
    opacity: 1;
    animation: 250ms ease-in 0s forwards lazy-load;
    top: 22px;
}
.loading-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    overflow: hidden;
    opacity: 0;
}
.loading-icon .search-spinner{
    margin: auto;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center center;
}
@keyframes spin {
    from {
        transform: rotate(360deg);
    } to {
        transform: rotate(0deg);
    }
}
#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;
}
/*******pending*******/
form.menubar-search.pending .genre-list li,
form.menubar-search.pending .filter-list .filter-link,
form.menubar-search.pending.has-results .search-autocomplete .result-item,
form.menubar-search.pending.has-results .search-autocomplete .simple,
form.menubar-search.pending.has-results .mobile-results-tags,
form.menubar-search.pending.has-results .search-autocomplete .autocomplete-no-results {
    opacity: 0.5;
}
form.menubar-search.pending .search-autocomplete {
    background-color: #fff;
}
body.search-active #menubar-2018-phone form.menubar-search.has-results.pending .search-autocomplete {
    overflow: hidden;
}
form.menubar-search.pending li.simple,
form.menubar-search.pending li.simple a,
form.menubar-search.pending .result-item a,
form.menubar-search.pending .filter-link {
    cursor: default;
}

/* DARK MODE */
.invertIconography #menubar.menubar-2018 form.menubar-search input[type=text],
.invertIconography #menubar.menubar-2018 form.menubar-search input[type=text].focused {
    background-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border: none;
}

.invertIconography #menubar.menubar-2018 button.menubar-search-icon {
    fill: #fff;
}

.has-menubar.invertIconography #menubar.menubar-2018 form.menubar-search .search-autocomplete .result-item a,
.has-menubar.invertIconography #menubar.menubar-2018 form.menubar-search .search-autocomplete .results-see-all a {
    color: #222;
}
/* trackpipe/public/css/notification_center.css */
#notification-center-container {
    position: relative;
}

#notification-center-container .notification-center {
    display: none;
}
#notification-center-container .notification-center.open {
    display: block;
    position: absolute;
    top: 18px;
    width: 343px;
    height: 250px;
    right: -39px;
    text-align: left;
    overflow-wrap: normal;
    white-space: normal;
    background: #fff;
    border: #EEE 1px solid;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    z-index: 10;
}
#notification-center-container .mark-all-as-read {
    position: relative;
    text-align: center;
    padding: 10px 20px;
    color: #178bf2;
    cursor: pointer;
}
#notification-center-container .mark-all-as-read:hover {
    background-color: rgb(238, 238, 238);
}
#notification-center-container .empty .mark-all-as-read,
#notification-center-container .loading .mark-all-as-read {
    display: none;
}
#notification-center-container .messages {
    height: calc(100% - 38px);
    border-bottom: #EEE 1px solid;
    overflow-y: scroll;
}

#notification-center-container .empty-msg {
    font-size: 14px;
}

#notification-center-container .empty .messages,
#notification-center-container .loading .messages {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#notification-center-container .message {
    padding: 10px 25px 10px 0px;
    font-size: 0px;
    display: flex;
    text-decoration: none;
}
#notification-center-container .message:hover {
    background-color: rgb(238, 238, 238);
}
#notification-center-container .recipient-name {
    font-size: 12px;
    color: gray;
    /*clairenote todo actual color? */
}
#notification-center-container .message-image {
    display: inline-block;
}
#notification-center-container .message-image.room-for-recipient-name {
    padding-top: 9px;
}
#notification-center-container .message-userpic {
    display: inline-block;
    background: transparent;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

#notification-center-container .message-userpic img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#notification-center-container .message-userpic .no-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
}

#notification-center-container .message-sender-name {
    font-weight: bold;
}
#notification-center-container .message-text {
    width: 258px;
    /*clairenote todo change width according to actual width*/
    display: inline-block;
    padding: 5px 0px 0px 10px;
    vertical-align: top;
    font-size: 13px;
    color: #000;
}
#notification-center-container .message-text.room-for-recipient-name {
    padding: 0px 0px 0px 10px;
}
#notification-center-container .message-time {
    color: gray; 
    /*clairenote todo actual color? */
}
#notification-center-container .divider {
    border: #EEE 1px solid;
    border-width: 1px 0 0 0;
    margin: 0 15px;
}

#notification-center-container .divider:first-child {
    display: none;
}

#notification-center-container .notification-center .unread-indicator {
    display: inline-block;
    background-color: #f9780a;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin: 20px 10px;
}
#notification-center-container .notification-center .unread-indicator.hide {
    background-color: transparent;
}
#notification-center-container .loading-new-items {
    text-align: center;
}
#notification-center-container .loading-new-items .upload-spinner {
    animation-name: notification-center-loading-new-items-spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes notification-center-loading-new-items-spin {
    from {
        transform: rotate(360deg);
    } to {
        transform: rotate(0deg);
    }
}
/* trackpipe/public/css/menubar.css */
/***  PAGE ATTRIBUTES  ***/

#menubar-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 975px;
    height: 43px;
    border-top: solid 5px #848484;
    background-color: #ececec;
    background-position:0 42px;
    background-repeat: repeat-x;
    border-bottom: dotted #afafaf 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* IE hack to make child menus' z-index work correctly. */
    /* Changing from 1 to 2 to ensure menubar menu isn't clipped by #tralbumArt  - sdg 2012.10.31 */
    /* Changing back to 1 after removing #tralbumArt's z-index. This seems to fix the layering problems with menubar + tralbum art + modals */
    z-index: 1;
}

#menubar-wrapper.label-stats-page {
    /* The menu, which is in its own stacking context for the reason mentioned^^ (in the #menubar-wrapper
     * rule), can, in the case of labels, have enough artists to grow really big and overlap the stats page
     * timeline, which also lives in its own stacking context. But the timeline elements have a really high
     * z-index (100+). To keep the artists menu from rendering under the timeline, increase the z-index for
     * menubar-wrapper -- but just for label stats pages. (wrs 2014.12.17)
     */
    z-index: 200;
}

/***  MENU BAR  ***/

#menubar-vm {
height: 48px;
top: -5px;
position: absolute;
width: 100%;
}

#menubar-vm.loading .hidden-while-loading {
    display: none !important;
}
#menubar-vm.loaded .hidden-after-loading {
    display: none !important;
}

.menubar {
    position: relative;
    height: 43px;
    width: 975px;
    margin: 0 auto;
    cursor: default;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-top: solid 5px #848484;
    background-color: #ececec;
    border-bottom: dotted #afafaf 1px;
}

#site-nav {
    left: 0;
}

#user-nav {
    position: absolute;
    right: 0;
}

.menubar * {
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/***  MENU BAR STYLINGS  ***/

.bc-ui {
    background: url("/img/_sprite-bc-ui-20170921.png");
}

.menubar a {
    color: #1DA0C3;
    cursor: pointer;
}

.menubar a:hover {
    text-decoration: none;
}

.menubar ul.horizontal {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
}

.menubar > ul > li,
.menubar > ul > .li-wrapper > li,
.menubar > ul > .li-wrapper {
    float: left;
    padding: 0;
    margin: 0;
}

.num.order {
    border-radius: 3px;
    background: #f9780a;
    color: #fff;
    font-weight: bold;
    padding: 2px 4px;
    text-align: center;
    font-size: 12px;
}

.menubar .unshipped-orders-loading {
    padding: 2px 4px;
    font-size: 12px;
}

/***  BAR ITEMS  ***/

.menubar > ul > li > :first-child,
.menubar > ul > .li-wrapper > li > :first-child {
    display: block;
    height: 43px;
    line-height: 43px;
    padding: 0 10px;
    border-top: solid 5px #848484;
    margin-top: -5px;
    transition: background 0.1s ease-out;
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
}

.menubar .menucaret {
    background: url('/img/menubar/dropdown-caret.svg') 0 0 no-repeat;
    background-size: 100%;
    width: 9px;
    height: 6px;
    margin: 20px 0 0 7px;
    float: left;
}

.menubar > ul > li .logo {
    background: url('/img/bandcamp-logo-color-bcaqua.svg') 0 0 no-repeat;
    background-size: 100%;
    height: 20px;
    margin-top: 16px;
    width: 85px;
}

/*** logo variations ***/
.menubar li.menubar-item.logo {
    position: absolute;
    display: none;
}

.menubar.out > ul > li.bclogo > :first-child {
    padding: 0 10px 0 0;
}
.menubar > ul > li.bclogo.highlighted > :first-child,
.menubar > ul > li.bclogo.selected > :first-child {
    background-color: transparent;
    border-top: solid 5px transparent;
}

/***  ALTERNATE APPEARANCES OF MENU BAR ITEMS  ***/

.menubar > ul > li.highlighted > :first-child,
.menubar > ul > .li-wrapper > li.highlighted > :first-child {
    background-color: rgba(0,0,0,0.06);
    color: #666666;
    border-top: solid 5px #666;
}

.menubar > ul > li.selected > :first-child,
.menubar > ul > .li-wrapper > li.selected > :first-child {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-top: solid 5px #666;
}

.menubar > ul > li.selected .menucaret,
.menubar > ul > .li-wrapper > li.selected .menucaret {
    background-position: 0 -10px;
}

.menubar > ul > li.highlighted .menucaret,
.menubar > ul > .li-wrapper > li.highlighted .menucaret {
    background-position: 0 -20px;
}

.menubar > ul > li.disabled > :first-child,
.menubar > ul > .li-wrapper > li.disabled > :first-child {
    color: #aab3a9;
}

.menubar > ul > li.message > :first-child,
.menubar > ul > .li-wrapper > li.message > :first-child {
    color: #AAAAAA;
}

.menubar #collection-alt {
    display: none;
}

.menubar #account-note-alt {
    display: none;
}

.menubar > ul > li .bc-ui.new {
    display:inline-block;
    width: 36px;
    height: 11px;
    overflow: hidden;
    margin-top:10px;
    background: url("/img/_sprite-bc-ui-20170921.png");
    background-position: 0 -170px;
    vertical-align: top;
}

.menubar > ul > li.newitem > :first-child {
    padding: 0 3px 0 15px;
}

.menubar > ul > li .newbadge {
    background:#fcff00;
    border-radius:2px;
    font-size:11px;
    color:#000;
    padding:0px 2px 1px;
    line-height:10px;
    font-weight:400
    ;position:relative;
    top:-12px;
    right:2px;
    box-shadow:1px 1px rgba(0,0,0,0.3);
}

.menubar > ul > li.new > :first-child {
    padding: 0 3px 0 15px;
}


.menubar > ul > li.message.highlighted > :first-child,
.menubar > ul > li.message.selected > :first-child {
    background-color: transparent;
    border-top: solid 5px transparent;
}

/*** SIGN UP LINKS ***/
.menubar .signup-links {
    color: #999999;
}

.menubar > ul > li.signup-links.highlighted > :first-child {
    color: #999999;
    border-top: solid 5px #848484;
    background-color: #ececec;
}
.menubar .signup-link:hover {
    color: #666666;
    text-decoration: underline;
}

/***  BAND BAR ITEM  ***/

.menubar .bandname {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    font-weight: bold;
}

.menubar.wide .bandname {
    max-width: 80px;
}

.menubar.extra-wide .bandname {
    max-width: 60px;
}
body:lang(ja) .menubar.extra-wide .bandname {
    max-width: 35px;
}


/***  ARTISTS MENU WITH SUB-LISTS ***/

.menubar ul.artists-menu {
    min-width: 15.6em;
}

.menubar .menu .page-band-links,
.menubar .menu .label-member-bands,
.menubar .menu .linked-bands {
    border-bottom: 1px solid #ccc;
}

.menubar ol {
    padding: 4px 0;
}

.menubar li:first-child > ol {
    padding-top: 0;
}

.menubar .edit-artists > ol {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.menubar .col1 .sublist-title {
    display: none;
}

.menubar .col1 .sublist-title.show-in-single-column {
    display: block;
    margin-bottom: 1px;
}

.menubar .sublist-title {
    margin: 9px 0 5px 15px;
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
}

.menubar .col1 .parent-label ol {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.menubar .col1 .parent-label .menu-bandname {
    font-weight: bold;
}

.menubar .edit-artists ol {
    padding-top: 0;
}

.menubar .has-multiple-columns {
    position: relative;
}

.menubar .has-multiple-columns.menu {
    width: auto;
}

.menubar .has-multiple-columns .page-band-links {
    min-height: 70px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.menubar .has-multiple-columns .page-band-links ol {
    float: right;
    width: 15.6em;
    margin-bottom: 0;
    padding-bottom: 0;
    border-left: 1px solid #ccc;
    border-bottom: none;
}

.menubar .page-band-links .sublist-title {
    display: none;
}

.menubar .has-multiple-columns .page-label-links .sublist-title {
    display: block;
    position: absolute;
}

.menubar .has-multiple-columns .page-label-links ol {
    border-left: none;
}

.menubar .has-multiple-columns .parent-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 15.6em;
}

.menubar .has-multiple-columns .parent-label.wide-parent-label {
    width: 20em;
}

.menubar .has-multiple-columns .parent-label ol {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.menubar .parent-label .infobox {
    display: none;
}

.menubar .col1 .parent-label + .label-member-bands ol {
    padding-top: 0;
}

.menubar .ui-menu .ui-menu-item .artist-listing-with-links a {
    display: inline;
    height: auto;
    line-height: inherit;
    padding: 0;
}

.menubar .parent-label .artist-listing-with-links a:hover {
    background: none;
    text-decoration: underline;
}

.menubar .parent-label .artist-listing-with-links {
    padding: 0 15px;
}

.artist-listing-with-links .photo {
    width: 44px;
    float: left;
    border: 1px solid #cccccc;
}

.artist-listing-with-links .photo.none {
    height: 44px;
    background: #f7f7f7;
}

.menubar .artist-listing-with-links .infobox {
    display: block;
    padding-left: 54px;
}


.artist-listing-with-links .actions {
    font-size: 93%;
    color: #999;
}

.artist-listing-with-links p {
    margin: 0 0 4px 0;
    min-height: 0;
    padding-right: 0;
}

.artist-listing-with-links .name {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #1DA0C3;
}

.artist-listing-with-links .name a {
    font-weight: bold;
}

.menubar .col2 {
    width: 31.2em;
}

.menubar .col3 {
    width: 46.8em;
}

.menubar .has-multiple-columns .label-member-bands {
    clear: left;
}

.menubar .has-multiple-columns .edit-artists ol {
    float: right;
    width: 15.6em;
}

.menubar .more a {
    font-weight: bold;
    font-weight: 500;
    font-size: 1.077em;
}

/***  SUBMENUS  ***/

.menubar .has-children {
    float: left;
}

.menubar .subscription-name {
    text-overflow: ellipsis;
    max-width: 100px;
    overflow: hidden;
}


/***  USER BAR ITEM  ***/

.menubar .userpic {
    display: block;
    float: left;
    background-color: #fff;
    margin: 8px 10px 0 0;
    width: 25px; height: 25px;
    border: solid 1px rgba(0,0,0,.2);
}

.menubar .userpic > img {
    display: block;
    width: 100%;
    height: 100%;
 }

.menubar .username {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left:0.1em;
    float: left;
}

.menubar .menubar-badge-pro {
    color: #1DA0C3;
    border: 1px solid rgba(64,130,148,0.5);
    box-sizing: border-box;
    font-size: 9px;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.05em;
    display: inline-block;
    padding: 0 3px;
    line-height: 13px;
    margin: 15px 0 0 6px;
    float: left;
}

.menubar > ul > li.selected .menubar-badge-pro {
    border: 1px solid #ccc;
    color: #eee;
}
.menubar > ul > li.highlighted .menubar-badge-pro {
    border: 1px solid #666666;
    color: #666666;
}
.menubar .badge-pro {
    color: #1DA0C3;
    border: 1px solid rgba(64,130,148,0.5);
    box-sizing: border-box;
    font-size: 9px;
    text-rendering: optimizeLegibility;
    letter-spacing: 05emem;
    display: inline-block;
    padding: 0 3px;
    line-height: 13px;
    float: left;
}

/***  FAN (USER) BAR ITEM  ***/

.menubar .gear {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -20px;
    background-size: 100%;
    width: 16px;
    height: 16px;
    margin: 14px 0 0;
    float: left;
}

.menubar .gear.admin {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
}

.menubar > ul > li.highlighted .gear {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -80px;
}
.menubar > ul > li.highlighted .gear.admin {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -60px;
}

.menubar > ul > li.selected .gear {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -40px;
}

/***  MENU STYLINGS  ***/

.menubar .ui-menu {
    padding: 0;
}

.menubar .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}


/* jquery-ui style path overwrite */
.menubar .ui-menu .ui-menu-item a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 10px;
    line-height: 35px;
    height: 35px;
}

.menubar .ui-menu-item {
    border: none;
}

.menubar .ui-menu-item:last-child,
.menubar .ui-menu-item:last-child .ui-state-focus {
    background-image: none;
}

.menubar .ui-menu-item a.admin {
    font-style: italic;
    color: rgb(190,42,42);
}

.menubar .ui-menu-item a.admin.ui-state-focus {
    background-image: none;
}

.menubar .menu .ui-menu-divider {
    margin: 4px 0;
}

/* jquery-ui overwrite */
.menubar .ui-widget-content {
    border-color: #ccc;
}


.menubar .menu {
    display: none; /* initially hide */
    float: left;
    position: absolute;
    min-width: 100px; /* min width of menus */
    font-size: 100%;
    border: 0;
    border: 1px solid #ccc;
    border-top: dotted #afafaf 1px;
}

.menubar .menu-icon {
    float: left;
    margin-left: -16px;
}

/* .ui-widget-content is added by jquery */
.menubar .ui-widget-content {
    background: #f1f1f1;
}

/* .ui-state-focus is a jquery class added to an item's <a> when rolled over */
.menubar .ui-menu-item a.ui-state-focus,
.menubar ol a:hover {
    border: none;
    background-color: rgba(0,0,0,0.06);
    color: #666666;
    margin: 0;
    background-image: none;
}

/* .ui-state-disabled goes on the menu item */
.menubar .ui-menu-item.ui-state-disabled {
    margin: 0;
    opacity: 1.0;
}

.menubar .ui-menu-item.ui-state-disabled a {
    cursor: pointer;
    color: #aaa;
}

/* GIFT CARD BALANCE */
.menubar .gift-card-icon-bordered {
    margin-bottom: 2px;
    margin-right: 7px;
}

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

.menubar .hide-balance-number .gift-card-icon-bordered {
    margin-bottom: 0;
    margin-right: 0;
    margin-top: 14px;
}

/* when signed in as a band on band pages, //bc anchors to the left of the window if there's space */

.menubar {
    position: static;
    text-align: right;
}

.menubar .li {
    text-align: left;
}

.menubar #feed-main.feed-small-collection {
    display: none;
}

/* Undo standardization of trackpipe_basic.css for placeholder color in menubar*/
.menubar input::-webkit-input-placeholder, .menubar textarea::-webkit-input-placeholder {
    color: #666 !important;
}
.menubar input:-moz-placeholder, .menubar textarea:-moz-placeholder {
    color: #666 !important;
}
.menubar input:-ms-input-placeholder, .menubar textarea:-ms-input-placeholder {
    color: #666 !important;
}

ul#user-nav {
    display: inline-block;
    position: static;
    right: auto;
}
ul#site-nav > li,
ul#user-nav > li,
ul#user-nav > .li-wrapper > li {
    text-align: left;
}

@media all and (min-width: 1182px) {
    .menubar-item.bclogo {
        position: absolute;
        left: 0;
    }
    .out .menubar-item.bclogo {
        position: static;
    }
}

@media all and (max-width: 1182px) {
    .menubar-item.bclogo {
        display: none;
    }
    .out .menubar-item.bclogo {
        display: block;
    }
}

@supports (-ms-ime-align: auto) { /*microsoft edge case*/
    .menubar .gear {
        -webkit-background-size: 95px !important;
    }
    .menubar .menucaret {
        -webkit-background-size: 51px !important;
        margin: 19px 0 0 7px;
    }
}










/*new header*/
#menubar-wrapper.header-rework-2018 #menubar-vm {
    /* undo rule set for old header */
    top: 0;
}
#menubar-wrapper.header-rework-2018 {
    z-index: 200;
    background-color: #ffffff;
    border: none !important;
    border-bottom: dotted #afafaf 1px;
    height: 53px;
    min-width: calc(100vw - 17px);
}

#menubar-wrapper.header-rework-2018 .menubar-outer {
    height: 53px;
    box-shadow: 0px 1px #EEE;
    background-color: #ffffff;
    top: 0;
    transition: top .25s ease-out;
}

/* double the height when on the home page to accomodate the second row of the menu bar */
#menubar-wrapper.header-rework-2018.header-discover-2023.corp-home {
    height: 106px;
}

/* remove the box shadow on the top row when the second row is present */
#menubar-wrapper.header-rework-2018.header-discover-2023.corp-home .menubar-outer {
    height: 106px;
}

.menubar-2018.secondary-menubar.extra-wide {
    max-width: 1392px;
}

/* This rule allows a transition to happen on menubar */
#menubar-wrapper.header-rework-2018 #menubar-vm.hide {
    top: -53px;
}
#menubar-wrapper.header-rework-2018 #menubar-vm.header-discover-2023.hide {
    top: -106px;
}
#menubar-wrapper.header-rework-2018 .menubar-outer.fixed {
    position: fixed;
}

/* Scroll behaviour, logged-out desktop corp pages, non homepage */
#header-wrapper.header-rework-2018 {
    height: 105px;
}
@media only screen and (max-width: 740px) {
    #header-wrapper.header-rework-2018 {
        height: 161px;
    }
    body:not(.special-banner-present) #header-wrapper.header-rework-2018 {
        height: 109px;
    }
}
#header-wrapper .header-rework-2018 {
    top: 0;
    transition: all .25s ease-out;
}
#header-wrapper .header-rework-2018.hide {
    top: -105px;
}
#header-wrapper .header-rework-2018.fixed {
    position: fixed;
}
/* So we don't override logged out homepage rules: */
.scroll-detected #header-wrapper .header-rework-2018.hide {
    top: 0;
    margin-top: -105px;
}

.has-menubar.invertIconography #menubar-wrapper.header-rework-2018,
.has-menubar.invertIconography #menubar.menubar-2018 {
    background-color: #212121;
    box-shadow: none;
}

.has-menubar.invertIconography #menubar-wrapper.header-rework-2018 .menubar-outer {
    background-color: #212121;
    box-shadow: 0px 1px #121212;
}

.menubar-2018 {
    box-shadow: 0px 1px #EEE;
    transition: all .2s ease-in;
    max-width: 1228px; /*on tralbums, otherwise 1360px*/
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 53px;
    padding: 0 16px;
    background-color: #ffffff;
    overflow: visible;
}
.menubar-2018.admin-impersonating {
    background-color: yellow;
    outline: 50px dotted rgba(255, 0, 0, 0.25);
    outline-offset: -50px;
}

.menubar-2018 #site-nav {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.menubar-2018 #user-nav {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}
.menubar-2018 #user-nav .login-link,
.menubar-2018 #user-nav .all-signup-link {
    font-weight: 500;
    font-size: 14px;
}
.menubar-2018 * {
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/***  MENU BAR STYLINGS  ***/

.menubar-2018 .bc-ui {
    background: url("/img/_sprite-bc-ui-20170921.png");
}

.menubar-2018 a,
.menubar-2018 li,
.menubar-2018 .ui-widget-content a {
    color: #000;
}

.has-menubar.invertIconography #menubar.menubar-2018 a {
    color: #FFF;
}

.has-menubar.invertIconography #menubar.menubar-2018 .submenu-item a {
    color: #000;
}

.menubar-2018 a.discover-link {
    color: #FFF;
}

.menubar-2018 li.submenu-item:hover {
    color: #000;
}

.menubar-2018 .submenu-item a:hover,
.menubar-2018 .label-member-band.submenu-item span:hover,
.menubar-2018 .linked-accounts-menu-content li:hover {
    background-color: #EEE;
    color: #000;
}
.menubar-2018 .linked-accounts-menu-content,
.menubar-2018 .label-artist-menu {
    padding-bottom: 10px;
}

.menubar-2018 .user-menu.label .linked-accounts-menu-content .menu-bandname,
.menubar-2018 .user-menu.label .label-artist-menu .menu-bandname {
    font-size: 14px;
    max-width: 178px;
    font-weight: normal;
}

.menubar-2018 .label-member-band.submenu-item .show-less:hover {
    color: #a9a9a9;
    background-color: #FFF;
}

.menubar-2018 ul.horizontal {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
}

.menubar-2018 > ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.menubar-2018 > ul > li,
.menubar-2018 > ul > .li-wrapper > li,
.menubar-2018 > ul > .li-wrapper {
    float: left;
    padding: 0;
    margin: 0;
}

.menubar-2018 #site-nav .bclogo {
    padding-right: 19px;
}

.menubar-2018 #site-nav li > a:focus{
    outline: none;
    transition: background 0.1s ease-out;
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
    background: #F3F3F3;
}

.menubar-2018 #site-nav .see-all.autocomplete-focusable:focus{
    background-color: #ddd;
}

.menubar-2018 #user-nav li > a:focus{
    outline: none;
    transition: background 0.1s ease-out;
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
}

.menubar-2018 #site-nav .bclogo a:focus {
    background: transparent;
}

.menubar-2018 #site-nav li.menubar-item,
.menubar-2018 #user-nav li.menubar-item {
    display: flex;
    height: 100%;
    align-items: center;
}
.menubar-2018 #site-nav li.menubar-item > a,
.menubar-2018 #user-nav li.menubar-item.hoverable > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    font-size: 14px;
}
.menubar-2018 .menubar-item a:hover {
    text-decoration: none;
}

.menubar-2018 .hoverable:hover,
.menubar-2018 .hoverable:focus,
.menubar-2018 .notification-center-menubar-button a:focus {
    transition: background 0.1s ease-out;
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
    cursor: pointer;
    background: #F3F3F3;
}

.has-menubar.invertIconography #menubar.menubar-2018 #site-nav li > a:focus,
.has-menubar.invertIconography #menubar.menubar-2018 li.hoverable:hover,
.has-menubar.invertIconography #menubar.menubar-2018 li.hoverable:focus,
.has-menubar.invertIconography #menubar.menubar-2018 #site-nav li > a:focus,
.has-menubar.invertIconography #menubar.menubar-2018 #feed-main:focus,
.has-menubar.invertIconography #menubar.menubar-2018 #feed-main a:focus,
.has-menubar.invertIconography #menubar.menubar-2018 #collection-main a:focus,
.has-menubar.invertIconography #menubar.menubar-2018 .notification-center-menubar-button a:focus {
    background: rgba(255,255,255,0.1);
}

.menubar-2018 .menubar-async-order-count {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 0 auto;
}

.menubar-2018 .unshipped-order-count-value-wrapper {
    min-width: 34px;
    display: flex;
    justify-content: flex-end;
}

.menubar-2018 .unshipped-order-count-value {
    display: block;
    box-sizing: border-box;
    align-items: center;
    border-radius: 2px;
    background-color: #f9780a;
    color: #fff;
    opacity: 1;
    padding: 0 5px;
    height: 25px;
    line-height: 24px;
    font-weight: bold;
    width: 18px;
    transition: width, color, background-color, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 50ms; /* overridden in js */
}

.menubar-2018 .unshipped-order-count-value.order-count-loading {
    background-color: #ededed;
    color: #ededed;
}

.invertIconography .menubar-2018 .unshipped-order-count-value.order-count-loading {
    background-color: #333333;
    color: #333333;
}

.menubar-2018 .unshipped-order-count-value.order-count-zero {
    opacity: 0;
}

/***  BAR ITEMS  ***/
.menubar-2018 .bclogo {
    height: 17px;
    width: 108px;
    margin: 2px 0px 2px 0px;
}

/* 
The homepage logo is designed to be larger. The svg also gets different 
width and height parameters. 
*/
.corp-home .menubar-2018 .bclogo {
    height: 21px;
    width: 128px;
}

.menubar-2018 .bclogo.white {
    display: none;
}
.has-menubar.invertIconography #menubar.menubar-2018 .bclogo.white {
    display: list-item;
}
.has-menubar.invertIconography #menubar.menubar-2018 .bclogo.aqua {
    display: none;
}
/*** logo variations ***/
.menubar-2018 li.menubar-item.logo {
    position: absolute;
    display: none;
}

.menubar-2018 > ul > li.bclogo > :first-child {
    height: 22px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.menubar-2018 > ul > li.bclogo.highlighted > :first-child,
.menubar-2018 > ul > li.bclogo.selected > :first-child {
    background-color: transparent;
}

/***  ALTERNATE APPEARANCES OF MENU BAR ITEMS  ***/

.menubar-2018 > ul > li.highlighted > :first-child,
.menubar-2018 > ul > .li-wrapper > li.highlighted > :first-child {
    text-decoration: none;
}

.menubar-2018 > ul > li.disabled > :first-child,
.menubar-2018 > ul > .li-wrapper > li.disabled > :first-child {
    color: #aab3a9;
}

.menubar-2018 > ul > li.message > :first-child,
.menubar-2018 > ul > .li-wrapper > li.message > :first-child {
    color: #AAAAAA;
}

.menubar-2018 #collection-alt {
    display: none;
}

.menubar-2018 #account-note-alt {
    display: none;
}

.menubar-2018 > ul > li .bc-ui.new {
    display:inline-block;
    width: 36px;
    height: 11px;
    overflow: hidden;
    margin-top:10px;
    background: url("/img/_sprite-bc-ui-20170921.png");
    background-position: 0 -170px;
    vertical-align: top;
}

.menubar-2018 > ul > li.newitem > :first-child {
    padding: 0 3px 0 15px;
}

.menubar-2018 > ul > li .newbadge {
    background:#fcff00;
    border-radius:2px;
    font-size:11px;
    color:#000;
    padding:0px 2px 1px;
    line-height:10px;
    font-weight:400;
    position:relative;
    top:-12px;
    right:2px;
    box-shadow:1px 1px rgba(0,0,0,0.3);
}

.menubar-2018 > ul > li.new > :first-child {
    padding: 0 3px 0 15px;
}


.menubar-2018 > ul > li.message.highlighted > :first-child,
.menubar-2018 > ul > li.message.selected > :first-child {
    background-color: transparent;
}

/** SECOND ROW DISCOVER LINKS ON HOME PAGE **/
.menubar-2018 > ul.secondary-menu-nav > li > a {
    font-size: 16px;
    font-weight: 400;
    padding: 18px 16px 16px 16px;
    border-bottom: solid 3px transparent;
    box-sizing: border-box;
    color: #222;
}

.menubar-2018 > ul.secondary-menu-nav > li:last-child > a {
    margin-right: 15px;
}

@media all and (max-width: 1424px) {
    .menubar-2018 > ul.secondary-menu-nav:not(.secondary-menu-nav-right) > li:first-child > a {
        padding-left: 0;
    }

    .menubar-2018 > ul.secondary-menu-nav > li:last-child > a {
        margin-right: 0;
    } 
}

.menubar-2018 > ul.secondary-menu-nav > li > a:hover,
.menubar-2018 > ul.secondary-menu-nav > li.active > a {
    border-bottom-color: #333;
}

/*** SIGN UP LINKS ***/
.menubar-2018 .signup-links {
    color: #999999;
}

.menubar-2018 > ul > li.signup-links.highlighted > :first-child {
    color: #999999;
    background-color: #ececec;
}
.menubar-2018 .signup-link:hover {
    color: #666666;
    text-decoration: underline;
}

/***  BAND BAR ITEM  ***/

.menubar-2018 .bandname {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    font-weight: bold;
}

.menubar-2018.wide .bandname {
    max-width: 80px;
}

.menubar-2018.extra-wide .bandname {
    max-width: 60px;
}
body:lang(ja) .menubar-2018.extra-wide .bandname {
    max-width: 35px;
}


/***  ARTISTS MENU WITH SUB-LISTS ***/

.menubar-2018 ul.artists-menu {
    min-width: 15.6em;
}

.menubar-2018 li:first-child > ol {
    padding-top: 0;
}

.menubar-2018 .edit-artists > ol {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.menubar-2018 .col1 .sublist-title {
    display: none;
}

.menubar-2018 .col1 .sublist-title.show-in-single-column {
    display: block;
    margin-bottom: 1px;
}

.menubar-2018 .sublist-title {
    margin: 9px 0 5px 15px;
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
}

.menubar-2018 .col1 .parent-label ol {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.menubar-2018 .edit-artists ol {
    padding-top: 0;
}

.menubar-2018 .has-multiple-columns {
    position: relative;
}

.menubar-2018 .has-multiple-columns.menu {
    width: auto;
}

.menubar-2018 .has-multiple-columns .page-band-links {
    min-height: 70px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.menubar-2018 .has-multiple-columns .page-band-links ol {
    float: right;
    width: 15.6em;
    margin-bottom: 0;
    padding-bottom: 0;
    border-left: 1px solid #eee;
    border-bottom: none;
}

.menubar-2018 .page-band-links .sublist-title {
    display: none;
}

.menubar-2018 .has-multiple-columns .page-label-links .sublist-title {
    display: block;
    position: absolute;
}

.menubar-2018 .has-multiple-columns .page-label-links ol {
    border-left: none;
}

.menubar-2018 .has-multiple-columns .parent-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 15.6em;
}

.menubar-2018 .has-multiple-columns .parent-label.wide-parent-label {
    width: 20em;
}

.menubar-2018 .has-multiple-columns .parent-label ol {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.menubar-2018 .parent-label .infobox {
    display: none;
}

.menubar-2018 .col1 .parent-label + .label-member-bands ol {
    padding-top: 0;
}

.menubar-2018 .ui-menu .ui-menu-item .artist-listing-with-links a {
    display: inline;
    height: auto;
    line-height: inherit;
    padding: 0;
}

.menubar-2018 .parent-label .artist-listing-with-links a:hover {
    background: none;
    text-decoration: underline;
}

.menubar-2018 .parent-label .artist-listing-with-links {
    padding: 0 15px;
}

.menubar-2018 .artist-listing-with-links .photo {
    width: 44px;
    float: left;
    border: 1px solid #eee;
}

.menubar-2018 .artist-listing-with-links .photo.none {
    height: 44px;
    background: #f7f7f7;
}

.menubar-2018 .artist-listing-with-links .infobox {
    display: block;
    padding-left: 54px;
}


.menubar-2018 .artist-listing-with-links .actions {
    font-size: 93%;
    color: #999;
}

.menubar-2018 .artist-listing-with-links p {
    margin: 0 0 4px 0;
    min-height: 0;
    padding-right: 0;
}

.menubar-2018 .artist-listing-with-links .name {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #1DA0C3;
}

.menubar-2018 .artist-listing-with-links .name a {
    font-weight: bold;
}

.menubar-2018 .col2 {
    width: 31.2em;
}

.menubar-2018 .col3 {
    width: 46.8em;
}

.menubar-2018 .has-multiple-columns .label-member-bands {
    clear: left;
}

.menubar-2018 .has-multiple-columns .edit-artists ol {
    float: right;
    width: 15.6em;
}

.menubar-2018 .more a {
    font-weight: bold;
    font-weight: 500;
    font-size: 1.077em;
}

/*** LINKED ACCOUNTS MENU ***/
.menubar-2018 .arrow-down,
.menubar-2018 .arrow-right {
    border: 1px solid #000;
    border-width: 0 0 2px 2px;
    width: 7px;
    height: 7px;
    line-height: 0;
    font-size: 0;
    float: right;
    display: inline-block;
    position: relative;
}
.menubar-2018 .arrow-down {
    top: 8px;
}
.menubar-2018 .arrow-right {
    top: 10px;
}

.menubar-2018 .linked-accounts-menu .arrow-down  {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.menubar-2018 .linked-accounts-menu .arrow-right {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/***  SUBMENUS  ***/

.menubar-2018 .has-children {
    float: left;
}

.menubar-2018 .subscription-name {
    text-overflow: ellipsis;
    max-width: 100px;
    overflow: hidden;
}


/***  USER BAR ITEM  ***/
.menubar-2018 .userpic,
.menubar-2018 .menu-artistpic {
    display: block;
    float: right;
    background: transparent;
    margin: 9px 0px 9px 0px;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.menubar-2018 .user-menu .userpic {
    margin: 1px 0 0 10px;
    width: 29px;
    height: 29px;
}
.menubar-2018 .user-menu .userpic.fanpic {
    margin: 10px 0 12px 7px;
}
.menubar-2018 .userpic.admin {
    box-shadow: 0px 0px 0px 3px red;
    margin: 10px 0px 10px 0px;
}
.menubar-2018 .user-menu .ui-menu-item a.name {
    padding: 5px 20px 6px 20px;
    height: 51px;
}
.menubar-2018 .user-menu .ui-menu-item a.name > .view-site,
.menubar-2018 .user-menu .ui-menu-item a.name > .view-collection {
    font-size: 12px;
    line-height: 16px;
    float: left;
    clear: left;
    position: relative;
    bottom: 3px;
}

.menubar-2018 .user-menu > :first-child > :first-child .userpic {
    /*display: none;*/
    margin: 10px 0 12px 7px;
}
.menubar-2018 .user-menu > :first-child > :first-child .menu-bandname.long {
    max-width: 160px;
    float: left;
}
.menubar-2018 .user-menu.label > :first-child > :first-child .menu-bandname.long {
    max-width: 225px;
}
.menubar-2018 .userpic > *,
.menubar-2018 .menu-artistpic > * {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.menubar-2018 .username {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left:0.1em;
    float: left;
}

.menubar-2018 .menubar-badge-pro {
    box-sizing: border-box;
    font-size: 10px;
    font-weight: bold;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.04em;
    display: inline-block;
    padding: 1px 5px;
    line-height: 12px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #666;
    float: right;
    margin: 7px 0;
    background-color: #F3F3F3;
}

.menubar-2018 .user-menu-wrapper > :first-child .menubar-badge-pro  {
    margin: 18px 0 20px 0;
}

.menubar-2018 > ul > li.selected .menubar-badge-pro {
    border: 1px solid transparent;
    color: #666666;
}
.menubar-2018 > ul > li.highlighted .menubar-badge-pro {
    border: 1px solid transparent;
    color: #666666;
}
.menubar-2018 .badge-pro {
    color: #1DA0C3;
    border: 1px solid rgba(64,130,148,0.5);
    box-sizing: border-box;
    font-size: 9px;
    text-rendering: optimizeLegibility;
    letter-spacing: 05emem;
    display: inline-block;
    padding: 0 3px;
    line-height: 13px;
}

/***  FAN (USER) BAR ITEM  ***/

.menubar-2018 .gear {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -20px;
    background-size: 100%;
    width: 16px;
    height: 16px;
    margin: 14px 0 0;
    float: left;
}

.menubar-2018 .gear.admin {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
}

.menubar-2018 > ul > li.highlighted .gear {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -80px;
}
.menubar-2018 > ul > li.highlighted .gear.admin {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -60px;
}

.menubar-2018 > ul > li.selected .gear {
    background: transparent url(/img/menubar/gear-icon.svg) 0 0 no-repeat;
    background-position: 0px -40px;
}

/***  MENU STYLINGS  ***/

.menubar-2018 .ui-menu {
    padding: 0;
    border-radius: 5px;
    top: 47px;
}

.menubar-2018 .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}


/* jquery-ui style path overwrite */
.menubar-2018 .ui-menu .ui-menu-item a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 20px;
    line-height: 32px;
    height: 32px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menubar-2018 .ui-menu-item {
    border: none;
}

.menubar-2018 .ui-menu .submenu-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 14px 20px;
    cursor: initial;
}

.menubar-2018 .ui-menu-item:last-child,
.menubar-2018 .ui-menu-item:last-child .ui-state-focus {
    background-image: none;
}

.menubar-2018 .ui-menu-item a.admin {
    font-style: italic;
    color: rgb(190,42,42) !important;
}

.menubar-2018 .ui-menu-item a.admin.ui-state-focus {
    background-image: none;
}
.menubar-2018 .add-menu .menu,
.menubar-2018 .menu.subscription-menu,
.menubar-2018 .menu.live-menu {
    padding: 10px 0;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.menubar-2018 .menu .live-events {
    max-height: 80vh;
    overflow-y: scroll;
}

.menubar-2018 .add-menu .menu {
    width: 150px;

}
.menubar-2018 .add-menu .menu a,
.menubar-2018 .menu.subscription-menu a,
.menubar-2018 .menu.live-menu a {
    font-size: 15px;
}
.menubar-2018 .add-menu .menu .ui-menu-divider {
    margin: 12px 20px;
}
.menubar-2018 .menu.subscription-menu,
.menubar-2018 .menu.live-menu {
    width: 200px;
}
.menubar-2018 .menu .ui-menu-divider {
    margin: 10px 20px;
}
.menubar-2018 .menu.label .ui-menu-divider {
    margin: 0;
}
.menubar-2018 .menu.label .ui-menu-divider.first {
    margin-top: 10px;
}
/* .ui-widget-content is added by jquery */
/* jquery-ui overwrite */
.menubar-2018 .ui-widget-content {
    border-color: #eee;
    background: #ffffff;
}


.menubar-2018 .menu {
    display: none; /* initially hide */
    float: left;
    position: absolute;
    min-width: 100px; /* min width of menus */
    font-size: 100%;
}

.menubar-2018 .menu-icon {
    float: left;
    margin-left: -16px;
}

/* .ui-state-focus is a jquery class added to an item's <a> when rolled over */
.menubar-2018 ol a:hover {
    color: #666666;
}

/* .ui-state-disabled goes on the menu item */
.menubar-2018 .user-menu .ui-state-disabled {
    margin: 0;
    opacity: 1.0;
}

.menubar-2018 .user-menu .ui-state-disabled a {
    cursor: pointer;
    color: #aaa;
}

.has-menubar.invertIconography #menubar.menubar-2018 .svg-icon {
    fill: #FFFFFF;
}

/* JOBS BANNER - (hiring) */

/* omit hiring banner unless localized text is available */
body:lang(ja) .hd-banner-2018.pre-translation,
body:lang(fr) .hd-banner-2018.pre-translation,
body:lang(ja) .hd-banner-mobile-2018.pre-translation,
body:lang(fr) .hd-banner-mobile-2018.pre-translation {
  display: none;
}

.li-banner-2018,
.hd-banner-2018 {
    font-size: 14px;
    font-weight: 600;
}

.li-banner-2018.corp-message,
.hd-banner-2018.corp-message {
    padding-left: 10px;
    padding-right: 20px;
    overflow: hidden;
    font-weight: 500;
}

.li-banner-2018.corp-message > *,
.hd-banner-2018.corp-message > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hd-banner-2018-inner.blue-gradient,
.menubar-2018 .hd-banner-2018-inner.blue-gradient {
    color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.menubar-2018 #user-nav li.menubar-item.li-banner-2018.small {
    display: none;
}

/* GIFT CARD BALANCE */
.menubar-2018 .gift-card-icon-bordered {
    margin-top: 1px;
    margin-right: 6px;
}

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

.menubar-2018 .gift-card-balance {
    font-size: 13px;
    font-weight: 500;
}

.menubar-2018 .hide-balance-number .gift-card-icon-bordered {
    margin-bottom: 0;
    margin-right: 0;
    margin-top: 14px;
}

/* when signed in as a band on band pages, //bc anchors to the left of the window if there's space */

.menubar-2018 {
    position: static;
    text-align: right;
}

.menubar-2018 .li {
    text-align: left;
}

.menubar-2018 #feed-main.feed-small-collection {
    display: none;
}

/* Undo standardization of trackpipe_basic.css for placeholder color in menubar*/
.menubar-2018 input::-webkit-input-placeholder, .menubar-2018 textarea::-webkit-input-placeholder {
    color: #666 !important;
}
.menubar-2018 input:-moz-placeholder, .menubar-2018 textarea:-moz-placeholder {
    color: #666 !important;
}
.menubar-2018 input:-ms-input-placeholder, .menubar-2018 textarea:-ms-input-placeholder {
    color: #666 !important;
}
.menubar-2018 .user-menu .menu-switch {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: auto;
    padding: 10px 20px 10px 20px;
    font-size: 15px;
    font-weight: bold;
    line-height: 32px;
}
.menubar-2018 .user-menu .linked-accounts-menu.menu-switch {
    cursor: pointer !important;
}
.menubar-2018 .label-artist-menu {
    display: flex;
    flex-direction: column;
    min-height: 80px;
    flex-shrink: 1;
    overflow: scroll;
    overflow-x: hidden;
}
.menubar-2018 .linked-accounts-wrapper {
    flex-shrink: 1;
    flex-grow: 1;
    padding: 0;
}

.menubar-2018 .user-menu .menu-text {
    display: block;
    float: left;
    padding: 0 0 0 40px;
    line-height: 32px;
    height: 32px;
}

.menubar-2018 .user-menu .menu-bandname {
    font-size: 15px;
    max-width: 110px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    float: left;
}

.menubar-2018 .user-menu.label .menu-bandname {
    max-width: 180px;
}
.menubar-2018 .user-menu strong {
    font-size: 14px;
}
.menubar-2018 .user-menu {
    width: 236px;
    background-color: #FFF;
    border: #EEE 1px solid;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
    font-size: 15px;
    color: #000;
    line-height: 32px;
    border-radius: 5px;
    z-index: 1;
    top: 46px;
    padding: 10px 0;
}

.menubar-2018 .user-menu.label {
    width: 300px;
    padding: 10px 0;
    right: 100%; 
}

.menubar-2018 .user-menu .user-menu-wrapper {
    -ms-overflow-style: none;  /* IE 10+ */
    overflow: -moz-scrollbars-none;  /* Firefox < 64 */
    scrollbar-width: none; /* Firefox >= 64 */
    max-height: calc(100vh - 74px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.menubar-2018 .user-menu .user-menu-wrapper::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
    width: 0;
    height: 0;
}

.menubar-2018 .user-menu.label .user-menu-wrapper {
    display: flex;
    flex-direction: column;
}

.menubar-2018 .user-menu.label .all-user-option {
    font-size: 12px;
    line-height: 28px;
    color: #333;
    margin: 10px 0 0 0; 
}

.menubar-2018 .artist-filter-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 5px;
    width: 245px;
    font-size: 13px;
    border: 1px solid #EDEDED;
    color: #666;
    -webkit-user-select: text;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    outline: none;
    margin: 0 20px 5px 20px;
}
.menubar-2018 .artist-filter-text:focus {
    color: #333;
}

.menubar-2018 .no-results {
    margin: auto;
    color: #666;
    font-family: "georgia";
    font-size: 13px;
    font-style: italic;
    pointer-events: none;
}

.menubar-2018 .artist-filter-text.ui-state-disabled {
    margin: 0 10px 10px 10px;
}

.menubar-2018 ul#site-nav > li,
.menubar-2018 ul#user-nav > li,
.menubar-2018 ul#user-nav > .li-wrapper > li {
    text-align: left;
}

.menubar-2018 .user-menu .ui-menu-item a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.menubar-2018 .no-image-placeholder {
    background-color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
}

.has-menubar.invertIconography #menubar.menubar-2018 .menubar-item.signup-tooltip-parent.show-tooltip .svg-icon,
.has-menubar.invertIconography #menubar.menubar-2018 .inner-circle-wrapper .svg-icon, /* for when a fan signs up from a dark colourway tralbum page */
.menubar-2018 .svg-icon {
    fill: #000000;
}

.menubar-2018 .hidden {
    display: none;
}

.menubar-2018 .menu-artistitem,
.menubar-2018 .user-menu li .menu-artistitem {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 32px;
    height: 32px;
    padding: 4px 20px;
}
.menubar-2018 .menu-artistitem .show-more {
    float: right;
    display: none;
    color: #000000;
    letter-spacing: 2px;
    font-size: 20px;
    line-height: 1.6;
    padding: 0 0 0 0;
}
.menubar-2018 .menu-artistitem:hover .show-more {
    float: right;
    display: inline-block;
}

.menubar-2018 .menu-artistitem .show-more:hover {
    opacity: 0.5;
}

.menubar-2018 .user-menu .ui-state-disabled .label-member-band a {
    width: 260px;
    font-size: 13px;
    color: #000;  /*to override effects of ui-state-disabled, used to allow ellipsis to be clicked */
}

.menubar-2018 .label-artist-menu .show-less {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding-left: 60px;
    color: #a9a9a9;
    line-height: 32px;
    font-size: 12px;
}
.hd-banner-mobile-2018 {
    display: none;
}
@media all and (min-width: 1182px) {
    .menubar-2018 .menubar-item.bclogo {
        position: static;
    }
    .menubar-2018 .out .menubar-item.bclogo {
        position: static;
    }
    .menubar-2018 #user-nav li.menubar-item.li-banner-2018.small {
        display: none;
    }
}

@media all and (max-width: 1182px) {
   .menubar-2018 .menubar-item.bclogo {
        display: block;
    }
    .menubar-2018 .out .menubar-item.bclogo {
        display: block;
    }
    .menubar-2018 #user-nav li.menubar-item.li-banner-2018.wide {
        display: none;
    }
    .menubar-2018 #user-nav li.menubar-item.li-banner-2018.small {
        display: flex;
    }
}

/* cart - desktop */
.header-rework-2018 .cart-wrapper-corp-lo:hover a,
.menubar-2018 .cart-wrapper:hover span {
    text-decoration: none;
}

.menubar-2018 .cart-wrapper svg.menubar-cart-icon text,
.header-rework-2018 .cart-wrapper-corp-lo svg.menubar-cart-icon text {
    font-size: 9px;
    font-weight: 600;
    stroke: none;
}

.header-rework-2018 svg.menubar-cart-icon,
.menubar-2018 svg.menubar-cart-icon {
    vertical-align: middle;
}
#notification-center-container .unread-indicator {
    display: inline-block;
    background-color: #f9780a;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin: 10px
}
.menubar-2018 .unread-messages-indicator {
    background-color: #f9780a;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 8px;
    top: 34px;
    position: absolute;
}
.menubar-2018 .unread-messages-indicator.hide {
    background-color: transparent;
}
/* trackpipe/public/css/band_navbar.css */
/* Band nav bar for merch tab */
#band-navbar {
    background: #f2f2f2; /* overridden by design rules */
    background-color:rgba(0,0,0,0.05);
    list-style: none;
    padding: 0 15px;
    margin: 0;
}

.fb #band-navbar {
    margin: 0px -30px 35px 0px;
    padding: 0 0 0 0px;
    width:765px;
}

#band-navbar.hide-desktop {
    display: none;
}

#band-navbar > li {
    display: inline-block;
    margin: 0 4px 0 0;
}

#band-navbar > li a {
    display: inline-block;
    line-height: 36px;
    font-weight: bold;
    font-size: 14px;
    padding: 2px 15px 0;
    border-top: 0px solid #000;
}

#band-navbar > li a.active {
    border-top-width: 2px;
    padding-top: 0;
}

#band-navbar > li a:hover {
    text-decoration: none;
    border-top-width: 2px;
    padding-top: 0;
}

#band-navbar .edit,
#band-navbar .right-justify {
    float: right;
    margin: 0;
}

#band-navbar .edit a {
    font-size: 12px;
    font-weight: normal;
    border-top-width: 0;
}

#band-navbar .edit a:hover {
    border-top-width: 0;
    padding-top: 2px;
}

#band-navbar .dot {
    width: 8px;
    height: 8px;
    background: #f9780a;
    border-radius: 4px;
    box-shadow: 0 0 2px 1px rgba(255,255,255,0.5);
    display: inline-block;
    margin-left: 4px;
}

.invertIconography #band-navbar .dot {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
}

/* trackpipe/public/css/dialog_yui.css */
/*** YUI Dialogs ***********************************************/
  
.masked .mask {
    background: #888;
    background: -webkit-radial-gradient(rgba(127, 127, 127, 1.0), rgba(127, 127, 127, 1.0) 35%, rgba(0, 0, 0, 0.8));
    opacity: 0.6;
}

/* used for edit design dialog, b/c we want modal behavior, but transparent mask so that we can see effect of color changes */
.transparent_mask .mask {
    opacity: 0;
    filter: alpha(opacity=0);
}

.yui-dialog .yui-panel {
    border: none;
    background: none;
}

.yui-panel-none {
    border: none;
    background: none;
}

.mask-none {
    background: none;
}

.yui-dialog .hd {
    padding: 0px;
    border: none;
    border-radius: 11px 11px 0px 0px;
    -moz-border-radius: 11px 11px 0px 0px;
    position: relative;
    background: #5E5E5E;
}

.yui-dialog .hd .content {
    font-size: 131%;
    letter-spacing: 0.02em;
    line-height: 1.9em;
    width: auto;
    max-width: none;
    box-sizing: inherit;
    margin: 0 45px 0 15px;
    padding: 0;
    overflow: hidden;
    background-color: inherit;
}

.yui-dialog .bd {
    background: white;
    border: solid #5E5E5E;
    padding: 24px;
}

.yui-dialog .footerless {
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 11px 11px;
    -moz-border-radius: 0px 0px 11px 11px;
}

.yui-dialog .footered {
    border-width: 0px 1px 0px 1px;
}

.yui-dialog .alertDlg {
    padding-top: 18px;
}

.yui-dialog .corner {
    position: absolute;
    top: 0px;
    width: 9px;
}

.yui-dialog .hd .tl {
    display: none;
}

.yui-dialog .ft {
    background: white;
    border: solid #5E5E5E;
    padding: 4px 24px 20px 24px;
    border-radius: 0px 0px 11px 11px;
    -moz-border-radius: 0px 0px 11px 11px;
    border-width: 0px 1px 1px 1px;
}

.yui-dialog .ft button {
    display: inline-block;
    min-width: 5em;
    min-height: 28px;
    margin: 0 12px 0 0;
    padding: 0;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 116%;
    text-align: center;
    border: 1px solid silver;
    background: white;
    cursor: pointer;
}

.yui-dialog .ft button:last-child {
    margin-right: 0;
}

.yui-dialog .ft button:hover {
    text-decoration: none;
}

.yui-dialog .ft button div {
    padding: 0.25em;
}

.yui-dialog .ft .default button {
    font-weight: bold;
}

.yui-dialog .progress_outer {
    height: 17px;
    width: 90%;
    margin:0px auto;
    text-align: left;
    background: #999999;
    border: none;
}

.yui-dialog .progress_inner {
    height: 17px;
    width: 0px;
    background: #ecc252;
} 

.yui-panel .container-close {
    position: absolute;
    top: 8px;
    right: 15px;
    width: 25px;
    height: 15px;
    background: url(/jslib/yui/2.9.0/assets/skins/sam/sprite.png) no-repeat 0 -300px; 
}

/* trackpipe/public/css/xhr_error_dialog.css */
.dlg_errorInfo {
    font-size: 93%;
    color: gray;
    padding: 1em;
    border: dotted silver 1px;
}

.dlg_errorInfo ul {
   padding-left: 1.5em;
}

.dlg_errorInfo ul > li {
   margin: 0.5em 0;
}

/* trackpipe/public/css/webapp_selector.css */
.webapp-selector-ui {
    margin: 7px 5px 7px 15px;
}
/* trackpipe/public/css/forms.css */
/***** 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); }
}


/* 2016 form style - a duplicate of modern-form with the new credit card form styles added */

.postmodern-form {
    font-size: 12px;
}

.postmodern-form label {
    display: inline-block;
    margin: 0; /* necessary? */
    font-size: 12px;
}

/* to remove inset box-shadow on iOS inputs */
.postmodern-form input[type=text],
.postmodern-form input[type=tel] {
    -webkit-appearance: none;
}

.postmodern-form input,
.postmodern-form textarea {
    display: block;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.75;
    padding: 4px;
    margin: 6px 0 4px;
    border: 1px solid #acacac;
}

.postmodern-form input[disabled] {
    color: gray;
    background: #f5f5f5;
    border-color: #CCC;
}

.postmodern-form input.error {
    border-color: #e00;
}

.postmodern-form input[type="text"]:focus,
.postmodern-form input[type="email"]:focus,
.postmodern-form input[type="search"]:focus,
.postmodern-form input[type="number"]:focus,
.postmodern-form input[type="password"]:focus {
    -moz-transition-duration: 0.3s;
    -moz-transition-property: all;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    transition-duration: 0.4s;
    transition-property: all;
    border-color: #50a1e6;
    box-shadow: 0 0 5px #b4d7f9;
    outline: medium none;
}

.postmodern-form input[type='checkbox'] {
    display: inline;
    margin-right: 3px;
}

.postmodern-form input[type='checkbox'] + label {
    display: inline;
}

.postmodern-form select {
    position: relative;
    display: block;
    top: 4px;
    margin: 6px 0 4px;
    font-size: 14px;
    box-shadow: 0 0 0 transparent; /* to make Chrome/Safari pick up the font size */
    line-height: 1.75;
    box-sizing: border-box;
    max-width: 100%;
}

.postmodern-form textarea {
    width: 100%;
    line-height: 1.4em;
}

.postmodern-form button[disabled] {
    color: #fff;
    background-color: #82c3fa;
    border-color: #8fb8db;
    cursor: default;
}

.postmodern-form button[disabled]:hover {
    text-decoration: none;
}

.postmodern-form .field-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
    vertical-align: top;
}

.postmodern-form fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.postmodern-form legend {
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.postmodern-form .tip {
    color: #999;
}

/* Errors */

.postmodern-form input.error-field,
.postmodern-form input.error-field:focus {
    border-color: #c43329;
}

.postmodern-form .error-message {
    display: none;
    margin: 8px 0 0;
    color: #c43329;
}


/* modern-form style with inline-block labels wrapping block inputs with custom borders */

.modern-form label {
    display: inline-block;
    position: relative; /* for absolute positioning of tooltip-bubbles */
    margin-right: 20px;
    font-size: 12px;
}
.modern-form input {
    display: block;
    font-size: 14px;
    padding: 4px;
    margin: 4px 0;
    border-width: 1px;
    border-style: solid;
    border-color: #9C9C9C #9C9C9C #CCC #CCC;
}
.modern-form input[disabled] {
    color: gray;
    background: #f5f5f5;
    border-color: #CCC;
}
.modern-form input.error {
    border-color: #e00;
}
.modern-form input[type="text"]:focus,
.modern-form input[type="email"]:focus,
.modern-form input[type="search"]:focus,
.modern-form input[type="number"]:focus,
.modern-form input[type="password"]:focus {
    -moz-transition-duration: 0.3s;
    -moz-transition-property: all;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    transition-duration: 0.4s;
    transition-property: all;
    border-color: #50a1e6;
    box-shadow: 0 0 5px #b4d7f9;
    outline: medium none;
}
.modern-form button[disabled] {
    color: #fff;
    background-color: #82c3fa;
    border-color: #8fb8db;
    cursor: default;
}
.modern-form button[disabled]:hover {
    text-decoration: none;
}


/* Rules for use with ko.bindings.errorBubble defined in knockout_utils.js */

.error-bubble {
    display: block;
    margin: 0.5em 0;
    font-size: 0.9rem;
    font-weight: bold;
    color: red;
}

/*
 * Label account-style forms (builds on .modern-form and steals from .fan-signup)
 */

.label-style form .field-wrapper {
    width: 100%;
    display: block;
    font-size: 13px;
    text-align: left;
    clear: both;
    margin-right: 0;
    margin-bottom: 25px;
    line-height: 1;
}

.label-style form .titled-field {
    width: 100%;
    display: block;
    font-size: 13px;
    text-align: left;
    clear: both;
    line-height: 1;
}


.label-style form .field-wrapper p {
    font-size: 13px;
}
.label-style form .field-wrapper.no-title {
    padding-left: 98px;
}
.label-style form .button {
    margin-top: 30px;
    margin-bottom: 0;
}
.label-style form .title {
    width: 88px;
    display: inline-block;
    text-align: right;
    margin-right: 6px; /* there's an extra 4px(ish) because of the space between elements */
    line-height: 1.4;
    vertical-align: top;
    padding-top: 5px;
}
.label-style form .field {
    width: 310px;
    display: inline-block;
    font-size: 15px;
    vertical-align: top;
}
.label-style form .field.no-title {
    display: block;
    margin-top: 10px;
    margin-left: 98px;
}
.label-style form .sub-field.no-title {
    margin-top: 3px;
    padding-left: 46px;
}
.label-style form label {
    font-size: inherit;
    margin-right: 0;
}
.label-style form input {
    margin: 0;
}

.label-style form a.delete-link {
    position: absolute;
    background: #fff;
    color: #0687f5;
    width: 15px;
    height: 14px;
    font-weight: bold;
    outline: none;
    font-size: 93%;
    text-align: center;
    border: 1px solid #eee;
    bottom: 3px;
    left: 3px;
}

.label-style form input[type=text],
.label-style form input[type=email],
.label-style form input[type=password] {
    display: inline-block;
    width: 284px;
    margin-top: 0;
    padding: 5px 6px;
    font-family: "Helvetica Neue",Arial,sans-serif;
    color: #333;
    line-height: 1em;
}

.label-style.label-signup form input[type=text],
.label-style.label-signup form input[type=email],
.label-style.label-signup form input[type=password] {
    width: 304px;
}

.label-style form .sub-field input[type=text],
.label-style form .sub-field input[type=password] {
    width: 238px;
}

.label-style form .field input.short-password {
    width: 130px;
    height: 17px;
    vertical-align: middle;
    padding-bottom: 3px;
}

.label-style form span.radio,
.label-style form span.checkbox {
    display: inline-block;
    width: 42px;
    text-align: center;
    vertical-align: middle;
}
.label-style form .radio-label {
    display: inline-block;
    width: 254px;
    padding-top: 5px;
    padding-bottom: 7px;
    top: 2px;
}

.label-style form input[type=radio],
.label-style form input[type=checkbox] {
    display: inline;
}

/* Image upload fields */

.label-style form .upload-photo .title {
    vertical-align: top;
}
.label-style form .upload-photo .field {
    width: 105px;
    height: 81px;
    margin-right: 10px;
    vertical-align: top;
}
.label-style form .upload-photo .action-link {
    display: block;
    /* don't use 100% because we're going to wrap this in a container that takes
       this element's size in wrapFileInput() */
    width: 105px;
    height: 79px;
    font-size: 12px;
    line-height: 79px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.label-style form .upload-photo .action-link:focus,
.label-style form .upload-photo .action-link.focus {
    text-decoration: underline;
    border-color: #0687F5;
}
.label-style form .upload-photo .image-field {
    border: 1px dashed #c0c0c0;
}
.label-style form .upload-photo img {
    width: 100%;
    height: auto;
}
.label-style form .upload-photo .upload-progress {
    width: 105px;
    margin: 5px 0 5px 98px;
}
.label-style form .upload-photo .progress_outer {
    width: 100%;
}
.label-style form .upload-photo .hint {
    display: inline-block;
    width: 200px;
    margin: 0;
    vertical-align: top;
}

/* Autocomplete fields */
/* (specifically the genre tags field that uses the YUI Autocomplete widget,
   which moves the baseline of the field and breaks vertical alignment) */
/*
.label-style form .autocomplete .title {
    vertical-align: top;
    margin-top: 6px;
}
.acWidget .yui-ac-content {
    border-color: #ccc;
}*/
.label-style form .tag-list {
    margin: 4px 0 0 98px;
    width: 300px;
    line-height: 1.4;
}
.label-style form .tag-list .tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 4px;
    line-height: 1;
    background: #eee;
    white-space: nowrap;
}
.label-style form .tag-list button.close {
    position: relative;
    top: -1px;
    display: inline;
    font-size: 13px;
    width: auto;
    margin: 0;
    padding: 0;
    line-height: inherit;
    background: none;
    color: #aaa;
    border: none;
}
.label-style form .tag:hover {
    cursor: pointer;
}
.label-style form .tag:hover button.close,
.label-style form .tag button.close:focus {
    background: none;
    color: #a00;
}

/* Buttons */

.label-style form button {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.5px;
    line-height: 2.2em;
    text-align: center;
    text-decoration: none;
    vertical-align: baseline;
    color: #fff;
    background: rgb(43,143,241);
    border: 1px solid rgb(50,118,181);
    width: 100%;
    padding: 0 1em;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
}
.label-style form button:hover {
    background: rgb(33,133,231); /* TODO: use a real colour */
}
.label-style form button:active {
    background: rgb(23,123,221); /* TODO: use a real colour */
}
.label-style form button.white {
	background: #fff;
	color: rgb(6,135,245);
	border-color: rgb(192,192,192);
}
.label-style form button.white:hover {
	border-color: rgb(160,160,160);
}
.label-style form button.white:active {
	border-color: rgb(6,135,245);
}

.label-style form button[disabled],
.label-style form button[disabled]:hover {
    background: #555;
    border-color:#333;
    color: #ccc !important;
    cursor: default;
    text-decoration: none;
    text-shadow: none;
    opacity: 0.3;
    filter: alpha(opacity=50);
}

/* Hints, errors and suggestions */

.label-style form p.error,
.label-style form .suggestion {
    margin: 5px 0 0 98px;
    width: 300px;
    line-height: 1.4;
}
.label-style form .hint {
    margin-top: 5px;
    line-height: 135%;
}
.label-style form p.hint {
    margin-bottom: 0;
}
.label-style form p.error.sub-field,
.label-style form .hint.sub-field,
.label-style form .suggestion.sub-field {
    padding-left: 46px;
}
/* a slightly wider hint/error to save the orphan */
.label-style form .hint.save-the-orphan,
.label-style form p.save-the-orphan,
.label-style form .suggestion.save-the-orphan {
    width: 322px;
}
.label-style form p.error {
    font-weight: bold;
    font-size: 14px;
    color: #c00;
}
.label-style form input.error {
    border-color:#c00;
}
.label-style form .hint {
    color: #999;
}
.label-style form .field.mismatch:after {
    content: '←';
    color: #c00;
    /* there's probably a better way to position this but this works for the transfer_artist dialog. */
    position: absolute;
    right: 1.5em;
    top: 0;
    line-height: 33px;
}

/* Mobile adjustements */

@media screen and (max-width: 480px) {
    .postmodern-form label,
    .postmodern-form legend {
        font-size: 14px;
    }

}

/* trackpipe/public/css/social_controls.css */
/* See social_controls.js */

.social-controls .btn .twitter-link,
.social-controls .btn .facebook-link,
.social-controls .btn .email-link {
    display: inline-block;
    height: 13px;
    padding: 3px 5px 2px 21px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font: 11px "lucida grande",tahoma,verdana,arial,sans-serif;
    line-height: 11px;
    text-decoration: none;
    color: #3B5998;
    background: no-repeat scroll 3px center #ECEEF5;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.social-controls .btn .twitter-link {
    background-image: url("/img/tweet.png");
}

.social-controls .btn .facebook-link {
    background-image: url("/img/share_facebook_small.png");
}

.social-controls .btn .twitter-link:hover,
.social-controls .btn .facebook-link:hover,
.social-controls .btn .email-link:hover {
    border-color: #9DACCE;
    background-color: #EBEDF4;
}

.social-controls .btn .tumblr-link {
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
    width: 81px;
    height: 20px;
    background: url('/img/tumblr_share_1.png') top left no-repeat transparent;
}

/* TODO: we're missing icons for email-link, but these aren't needed anywhere currently */

/* trackpipe/public/css/contact.css */
#contact-page-form, #contact-page-info {
    -webkit-font-smoothing: antialiased;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.contactHeader {
    font-size: 125%;
	font-weight: bold;
}

#contactForm {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    font-size: 14px;
    padding: 24px 40px 24px 40px;
}

#contactForm dl.tableLayout {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

#contactForm dl.tableLayout .tableLayoutRow {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
}

#contactForm dl.tableLayout .tableLayoutRow dd,
#contact-page-form #contactForm dl.tableLayout .tableLayoutRow dd {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}

#contactForm dl.tableLayout .tableLayoutRow dd .toggleable,
#contact-page-form #contactForm dl.tableLayout .tableLayoutRow dd {
    display: flex;
    display: -webkit-flex;
}

#contactForm dl.tableLayout .tableLayoutRow dd .toggleable {
    justify-content: space-between;
    width: 100%;
}

#contactForm dl.tableLayout .tableLayoutRow dd .toggleable .toggle-edit {
    color: rgb(0,161,198);
    cursor: pointer;
    padding-left: 1%;
    align-self: center;
    font-size: 14px;
    font-weight: bold;
}

#contact-page-form #contactForm dl.tableLayout .tableLayoutRow dd {
    font-size: 12px;
    cursor: pointer;
}

#contactForm dl.tableLayout dt {
	float: none;
    clear: left;
    width: auto;
    margin: 0 0 5px;
    padding-top: 0.45em; /* imperfect baseline alignment */
    text-align: left;
    color: #333;
    line-height: 1.1em;
    font-size: 12px;
}

#contactForm dl.tableLayout dd {
    float: none;
    width: 70%; /* appears to prevent layout problems at large font sizes in FF */
    margin: 0px;
    padding: 0px 0px 10px 0px;
}

/* setting the border here is important - some browsers do funky
   things with elt padding otherwise */
#contactForm .textInput {
    width: 97%;
    border: 1px solid #ccc;
    margin: 0px;
    padding: 0.3em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    outline: none;
}

#contactForm .textInput.no-edit {
    border: none;
    padding-left: 0;
    outline: none;
    width: 80%;
}

#contactForm .textInput:focus {
    outline: none;
}

#contactForm button {
    color: #0687f5;
    text-decoration: none;
    cursor: pointer;
    margin-right: 0.5em;
    padding: 0.25em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 150%;
    text-align: center;
    border: 1px solid silver;
    background: white;
}

#contactForm button:hover, #contactForm button.hover {
    text-decoration: underline;
}

#contactForm button:focus {
    outline: none;
}

#contactForm button.disabled {
    background: #eee;
    color: #888;
}

#contactForm button div {
    min-width: 4em;
    white-space: nowrap;
}

#contactForm .alert {
    display: none;
    color: #c00;
    font-size: 12px;
    font-weight: bold;
    margin-top: .3rem;
    margin-bottom: 0;
    padding: 0;
}

#contactForm .alertActive {
    display: block;
}

#contactForm #contact\.banner {
    margin: 0.3rem 1.5rem 1.8rem;
    background-color: #E8A2AB;
    border: thin solid red;
    padding: 0.8rem 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #9C0000;
    font-size: 1rem;
}

#contactForm #contact\.languages {
    margin: 0;
    background-color: #fdfac7;
    padding: 0.8rem 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

#contactForm dl.tableLayout dd.contact-action-buttons { 
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    margin: 5% 0 0;
    width: 100%;
    align-items: center;
}


#contact-page-form #contactForm dl.tableLayout dd.contact-action-buttons { 
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    margin: 5% 5% 0 0;
    max-width: 100%;
    padding-left: 0;
    font-size: 14px;
}

/* Submit button */
#contactForm dl.tableLayout dd.contact-action-buttons button[type='submit'] { 
    width: 100%;
    border: none;
    background: rgb(0,161,198);
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    border-radius: 4px;
    padding: 5px;
    margin: 0;
    min-height: 36px;
}

#contactForm dl.tableLayout dd.contact-action-buttons button[type='submit']:hover {
    text-decoration: none;
}

/* Cancel button */
#contactForm dl.tableLayout dd.contact-action-buttons button[type='button'] { 
    border: none;
    width: 25%;
    color: rgb(0,161,198);
    font-size: 14px;
    font-weight: bold;
    padding: 5% 0 0;
    background: none;
    height: 36px;
}

/* These rules are specific to the stand-alone contact form page at /contact */

#contact-page-info {
    text-align: left;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    width: 489px;
    max-width: 500px;
    margin: 50px auto 0;
}
#contact-page-info h2 {
    text-align: left;
    margin-top: 0;
    color: #2E3332;
    font-size: 36px;
    font-weight: 400;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 30px 0 50px 0;
    width: 100%;
    font-size: 32px;
    text-align: center;
    margin: 30px 0 20px 0;
}
#contact-page-form h1{
    margin-top: 5%;
}
#contact-page-form h1 a {
    font-weight: normal;
    line-height: 2rem;
}
#contact-page-form {
    margin: 1rem auto 0;
    width: 489px;
}

#contact-page-form .contact-form-optional {
    font-size: 12px;
    margin-left: 135px;
    font-style: italic;
}

#contact-page-form #contact-form {
    margin: 0 ;
}
#contact-page-form dl.tableLayout {
    align-items: flex-start;
}
#contact-page-form dl.tableLayout dd  { 
    width: 90%;
    display: block;
    font-size: 125%;
}
#contact-page-form dl.tableLayout dt {
    width: 100%;
    text-align: left;
    margin: 0 0 5px; /* (right originally .1rem) */
    padding-right: 0;
    color: #333;
    font-size: 14px;
}

/* Contact banner tweaks */

#contact-banner {
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    line-height: 19px;
    margin-bottom: 8%;
    color: #333;
}

/* Contact banner (/contact) */
#contact-banner.page {
    margin-bottom: 4%;
    border: 1px solid #00a1c6;
    padding: 15px;
    background-color: #f5fdff;
    border-radius: 2px;
}


#contact-banner.page .contact-banner-img img {
    max-width: 52px;
    width: 52px;
}

/* If there's something to show next to the image then move it over */
#contact-banner.page .contact-banner-img + .contact-banner-message {
    margin-left: 5%;
}

#contact-banner.page .contact-banner-message {
    max-width: 85%
}

#contact-banner.page .contact-banner-message p {
    margin: 0;
}

.contact-banner-message p {
    color: #333;
}

.contact-banner-faq {
    font-size: 14px;
    width: 100%;
    color: #333;
    text-align: center;
    margin: 0 auto;
}

.vinyl-contact-banner-faq {
    width: 83%;
    line-height: 24px;
}

.contact-banner-message a, .contact-banner-faq a {
    color: rgb(0,161,198);
    font-weight: bold;
}

/* Contact form modal tweaks */

#contactForm dl.tableLayout dd #contact\.message {
    background-color: #F9F9F9;
}

/* Contact banner modal */

#contact-banner.modal {
    flex-direction: column;
    align-items: center;
    margin: 0;
}

#contact-banner.modal .contact-banner-img img {
    max-width: 52px;
    width: 52px;
}

#contact-banner.modal .contact-banner-img {
    margin-bottom: 5%;
}

#contact-banner.modal .contact-banner-message {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

#contact-banner.modal .contact-banner-message-header {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-verification {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    line-height: 19px
}

#contact-page-form .contact-verification {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 50px 80px;
}

.contact-verification h1, .contact-verification p {
    font-size: 14px;
}

.contact-verification a {
    color: rgb(0,161,198);
}

.contact-verification .contact-verification-img {
    margin: 5% 0;
}

.contact-verification .contact-verification-message {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.contact-verification .contact-verification-message h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.contact-dlg .hd {
    background-color: #F5F5F5;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    border: none;
    padding: 10px 45px 5px;
    border-bottom: 1px solid #ededed;
    cursor: default !important;
    border-radius: 5px 5px 0px 0px;
}

.contact-dlg .ft {
    background-color: #FFFFFF;
    border: none;
}

.contact-dlg .hd .content {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #2E3332;
    letter-spacing: 0;
}

.contact-dlg .bd {
    background-color: #FFFFFF;
    border: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 24px 45px 0px;
}

.contact-dlg .bd.footerless {
    padding: 0px;
}

.contact-dlg .bd.footered.alertDlg {
    padding: 24px 45px 0px;
}

.contact-dlg .ft {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 20px 45px 45px;
    margin-top: -1px;
    border-radius: 0px 0px 5px 5px;
}

.contact-dlg .footerless {
    border-radius: 0px 0px 5px 5px;
}

.contact-dlg .ft .button-group {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.contact-dlg .ft .button-group button {
    border: none;
    background: rgb(0,161,198);
    font-size: 14px;
    color: #FFF;
    border-radius: 4px;
    padding: 3%;
    font-weight: bold;
    height: 36px;
}

.contact-dlg .ft .button-group .default {
    padding: 1.5%;
    width: 100%;
}

.contact-dlg .ft .button-group button:focus {
    outline: none;
}

.contact-dlg .yui-module.yui-overlay.yui-panel {
    width: 448px !important;
    border-radius: 5px 5px 0px 0px;
}

.contact-dlg .yui-panel {
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.contact-dlg .yui-panel .container-close {
    right: 20px;
    width: 13px;
    height: 13px;
    background: url(/img/x_close_dialog.svg) no-repeat;
    margin-top: 10px;
}
.contact-dlg {
    top: 50% !important;
    left: 50% !important;
    position: fixed;
    transform: translate(-50%, -50%);
}

#contact-issue-selector {
    max-width: 408px;
    margin: 0 auto 1.3125rem;
    font-size: 14px;
    color: #333;
}

#contact-issue-selector select {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    margin: 2% 0;
    padding: 0.3em;
    color: #333;
    max-width: 408px;
}
/* trackpipe/public/css/touviolations/report_item_account_dialog.css */
/* traffic control dialog styling */
#report-account-dialog {
    margin: 5px 20px;
}

#report-account-dialog .report-account-header {
    font-weight: bold;
}

#report-account-dialog ol.options {
    margin: 0;
    padding: 10px 5px;
    list-style: none;
}

#report-account-dialog .options li {
    padding: 7px 15px;
    margin: 0;
}

#report-account-dialog .options li:hover,
#report-account-dialog .options li:focus {
    background: #eee;
    outline: none;
}

#report-account-dialog a:focus {
    outline: none;
}

/* jquery overrides */
.ui-dialog.nu-dialog #report-account-dialog a,
.report-account-dialog .ui-widget-content a {
    color: #1DA0C3;
}
/* trackpipe/public/css/artists_menu.css */
/*
 * A multi-column (if necessary) menu of artists
 * used for label accounts in the menubar and in the
 * by-artist filter on music and merch grid pages
 *
 * Expects markup like this (inside a jquery ui menu or version thereof):
 *
 * <div data-bind="attr: {class: 'col' + numCols}"> <-- set class to col1|col2|col3
 *     <a>optional header/link<a>
 *     <div class='multi-column-artist-menu'>
 *         <ol>
 *             <li>
 *                 <a class="menu-artistitem" href="#">
 *                     <span class="menu-artistpic">
 *                         <img data-bind="src_image: {image_id: bio.image_id, format: 'bio_navbar'}"> <-- if image exists
 *                     </span>
 *                     <span class="menu-bandname">Band Name</span>
 *                 </a>
 *             </li>
 *         </ol>
 *     </div>
 * </div>
 */

.menu-artistitem {
    height: 35px;
    line-height: 35px;
    padding: 2px 15px;    
}

.menu-artistitem > .badge-pro {
    display: block;
    position: absolute;
    right: 15px;
    margin-top: 11px;
}

.menu-artistitem > .menu-icon {
    margin: 6px 0 0 -18px;
}

.menu-artistitem .menu-artistpic {
    display: block;
    position: absolute;
/*    left: 15px; */
    background-color: #fff;
    margin: 3px 8px 0 0;
    width: 25px;
    height: 25px;
    border: solid 1px rgba(0,0,0,.2);   
}
.menubar-2018 .menu-artistitem .menu-artistpic {
    margin: 1px;
    width: 29px;
    height: 29px;
    border: none;
}

.menu-artistitem .menu-artistpic > img {
    display: block;
    width: 100%;
    height: 100%;
 }

.menu-artistitem .menu-bandname {
    display: block;
    float: left;
    padding: 0 32px 0 35px;
    line-height: 35px;
    height: 35px;
}

.has-multiple-columns .multi-column-artist-menu {
    display: table-row;
}

.has-multiple-columns .multi-column-artist-menu ol {
    display: table-cell;
    width: 15.6em;
    vertical-align: top;
}

.has-multiple-columns .menu-artistitem .menu-bandname {
    width: 11em;
    padding-left: 2.6em;
    padding-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+ */
    -o-text-overflow: ellipsis;  /* for Opera 9 & 10 */
}

.has-multiple-columns .multi-column-artist-menu .is-pro .menu-bandname {
    width: 8.6em;
    padding-right: 2.4em;
}

.has-multiple-columns .no-pro-badges .is-pro .menu-bandname {
    width: 11em;
    padding-right: 0;
}

.no-pro-badges .badge-pro {
    display: none;
}

/* trackpipe/public/css/widgets/bccroptool.css */
.yui-dialog.image-editor-dialog .bd {
    padding: 0;
}

.image-editor-dialog .crop-tool {
    position: relative;
    min-height: 100px;
}

.image-editor-dialog .buttons {
    margin: 5px 0 5px 40px;
}

.image-editor-dialog .error {
    margin: 5px;
    color: red;
    font-weight: bold;
}

.image-editor-dialog .status {
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    height: 40px;
    margin-top: -20px;
    opacity: 0.8;
    text-align: center;
}
.image-editor-dialog .status-text {
    font-style: italic;
    font-weight: bold;
    margin-bottom: 10px;
}
.image-editor-dialog .upload-progress .progress_outer {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 18px;
    width: 100%;
    padding: 3px;
    background: none;
    border: 2px solid black;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}
.image-editor-dialog .upload-progress .progress_inner {
    background-color: black;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.ui-dialog.nu-dialog.image-editor-dialog button:hover,
.ui-dialog.nu-dialog.image-editor-dialog button:focus {
    text-decoration: underline;
}

.bccroptool {
    position: relative;
    width: 100%;
    min-height: 0 !important;
    height: 0 !important;
    padding-bottom: 100%;
    overflow: hidden;
    cursor: move;
}

.bccroptool .loading-indicator {
    position: absolute;
    background-image: url(/img/wait16.gif);
    width: 16px;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
}

.bccroptool .image {
    position: absolute;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.bccroptool .image.hidden {
    opacity: 0;
}

.bccroptool .border {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 40px rgba(0, 0, 0, 0.75);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.bccroptool .target {
    position: absolute;
    top: 40px;
    left: 40px;
    bottom: 40px;
    right: 40px;
    width: auto;
    height: auto;
}

.bccroptool .center-crosshair {
    position: absolute;
    font-weight: bold;
    color: white;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.bccroptool .target-border {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px rgba(255, 255, 255, 0.5);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.no-touch .bccroptool .zoom-slider {
    position: absolute;
    width: 120px;
    left: 40px;
    bottom: 16px;
    cursor: default;
    font-size: 10px;
}

.bccroptool .zoom-slider * {
    cursor: pointer;
}


.bccroptool .zoom-slider .ui-slider-handle.ui-state-focus,
.bccroptool .zoom-slider .ui-slider-handle.ui-state-hover {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(/css/jquery-ui/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
}

/* phone specific styles */
@media (max-width:640px) {
    /* make our custom buttons look like the standard dialog buttons */
    .image-editor-dialog .buttons button {
        display: inline-block;
        min-width: 5rem;
        min-height: 2rem;
        margin-right: 0.5rem;
        border: none;
        background: #999;
        color: #fff;
        border-radius: 0.3rem;
    }
}

/* trackpipe/public/css/fan/signup/fan_signup_common.css */
body.prevent-scroll {
    height: 100%;
    overflow: hidden;
}

/* common buttons */
.signup-common-form button,
.ui-dialog.nu-dialog .signup-common-form button,
.ui-dialog.nu-dialog .welcome-app-email-buttons button {
    background: rgb(0,161,198);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 0 1em;
    text-align: center;
    border: none;
    vertical-align: top;
}
.signup-common-form button:hover,
.ui-dialog.nu-dialog .signup-common-form button:hover,
.ui-dialog.nu-dialog .welcome-app-email-buttons button:hover,
.signup-common-form button:focus,
.ui-dialog.nu-dialog .signup-common-form button:focus,
.ui-dialog.nu-dialog .welcome-app-email-buttons button:focus {
    background: rgb(0,161,198);
    border: none;
    text-decoration: underline;
}
.signup-common-form button:active,
.ui-dialog.nu-dialog .signup-common-form button:active,
.ui-dialog.nu-dialog .welcome-app-email-buttons 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]:hover,
.ui-dialog.nu-dialog .signup-common-form button[disabled]:hover,
.ui-dialog.nu-dialog .welcome-app-email-buttons button[disabled],
.ui-dialog.nu-dialog .welcome-app-email-buttons button[disabled]:hover {
    background: #555;
    color: #ccc;
    opacity: 0.3;
    border: none;
    text-decoration: none;
}

.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);
}


/* nu-dialog tweaks */

.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;
}

.ui-dialog.nu-dialog.transparent-background {
    background: transparent;
}

.ui-dialog.nu-dialog.hide-title .ui-dialog-titlebar {
    display: none;
}

.ui-dialog.nu-dialog.hide-title .ui-dialog-content {
    padding-top: 0;
    padding-bottom: 35px;
}

.ui-dialog.nu-dialog.overflow-dialog {
    overflow: visible;
}

.ui-dialog.nu-dialog.overflow-dialog .ui-dialog-titlebar {
    border-radius: 5px 5px 0 0;
}

.ui-dialog.nu-dialog .ui-dialog-titlebar-close {
    z-index: 5;
}

.ui-dialog.nu-dialog.blank-title.mobile-onboarding .ui-dialog-titlebar {
    position: absolute;
    right: 0px;
}

/* stuff common to all panes */

.signup-common-form {
    opacity: 0;
}

/* default inner: full width */
.signup-common-inner {
    width: 100%;
    margin: 0 auto;
}

.signup-common-form.visible {
    opacity: 1;
}

.signup-common-form.immediate {
    transition: opacity 0s;
}

.signup-common-form .siteroot {
    background-color: #ededed;
    padding: 5px 7px 5px 0px;
}

.signup-common-form .item.heading-item {
    font-size: 14px;
    margin: 0 auto 16px auto;
    padding: 0;
}

.signup-common-form .error-bubble {
    font-weight: normal;
    margin: 0;
    font-size: 16px;
    color: #c43329;
    margin: 5px 0 0 0;
}

.signup-common-form label {
    width: 11em;
    display: block;
    width: 100%;
    display: block;
    text-align: left;
    clear: both;
    margin-bottom: 2px;
    /*line-height: 1em;*/
    font-size: 16px;
    /*line-height: 16px;*/
    margin-top: 10px;
    z-index: 0;
}

.signup-common-form .item {
    padding: 0 0 10px 0;
    width: 100%;
    margin: 0 auto;
}

.signup-common-form .buttons {
    padding-top: 2px;
    width: 100%;
    margin: 0 auto;
}

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

.ui-widget-content .signup-common-form .buttons a:hover,
.signup-common-form .buttons a:hover {
    text-decoration: underline;
}

.signup-common-form .divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #818285;
    margin-bottom: 28px;
    opacity: 0.5;
}

.signup-common-form .divider.lower-divider {
    margin-top: 20px;
}

.signup-common-form input[type=text],
.signup-common-form input[type=email],
.signup-common-form input[type=password] {
    height: 35px;
    padding-left: 10px;
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font-size: 16px;
}

.signup-common-form input[type=text].has-validation-error,
.signup-common-form input[type=email].has-validation-error,
.signup-common-form input[type=password].has-validation-error {
    border: 1px solid #c43329;;
}

.signup-common-form .hint {
    font-size: 12px;
}

.signup-common-form .dialog-body {
    font-size: 16px;
    line-height: 20px;
}

.signup-common-form .skinny {
    width: 340px;
    margin: 0 auto;
}

/* signup pane */

.signup-form .signup-common-inner {
    margin-top: 10px;
}

.signup-form .choose-your-url {
    text-align: center;
    margin-bottom: 10px;
}

.signup-form .email,
.signup-form .email-inner,
.signup-form .username,
.signup-form .username-inner,
.signup-form .username-input  {
    display: inline-block;
    width: 100%;
}

.signup-form .email-checking {
    position: absolute;
    right: 44px;
    top: 54px;
    width: 25px;
}

.signup-form .email-label {
    margin: 2px 0 2px 0;
}

.signup-form .email-inner {
    font-size: 14px;
    font-weight: bold;
    /*margin: 0 5px 0 0;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

/* band login in signup form */

.signup-form .existing-account-wrapper {
    transition: padding 0.2s,
                background 0.3s,
                margin 0.2s;

    background-color: rgba(244,236,134, 0);
    padding: 0 20px 0 20px;
    margin: 0 -20px 0 -20px;
}

.signup-form .existing-account-wrapper.show-existing {
    background-color: rgba(244,236,134, 1);
    padding: 15px 20px 5px 20px;
    margin: 0 -20px 15px -20px;
}

.signup-form .existing-account-wrapper > * {
    width: 340px;
}

.signup-form .existing-account-login {
    max-height: 0px;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.2s ease-out,
                visibility 0s 0.4s;
    display: block;
    visibility: hidden;
}

.signup-form .existing-account-login.show {
    max-height: 300px;
    transition: max-height 0.2s ease-in,
                visibility 0s 0s;
    visibility: visible;
}

.signup-form .existing-account-login .account-message {
    text-align: left;
    font-size: 14px;
    margin: 0 auto;
}

.signup-form .existing-account-login p.strong {
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 16px;
}

.signup-form .before-chooser.disabled {
    opacity: 0.3;
}

/* username */

.signup-form .username-label {
    vertical-align: top;
}

.nu-dialog .signup-form .existing-artist .username-label {
    display: none;
}

.signup-form .username.artist-email input.username-input,
.signup-form .existing-artist input.username-input {
    width: 225px;
    display: inline-block;
}

.signup-form .username-inner {
    position: relative;
}

.signup-form .username .bandcamp-com {
    display: none;
}

.signup-form .username.artist-email .bandcamp-com,
.signup-form .existing-artist .bandcamp-com {
    display: inline-block;
    background-color: rgba(215,215,215,0.5);
    margin-bottom: 4px;
    vertical-align: top;
    padding: 9px 5px 8px 6px;
    font-size: 14px;
    color: rgba(51,51,51, 0.5);
}

/* password */

.signup-form .password-label {
    vertical-align: top;
}

.signup-form .password.masked {
    height: 24px;
    vertical-align: middle;
    margin-top: 12px;
    text-align: left;
    font-size: 14px;
}

/* tos */

.signup-form .tos, .signup-form .tos-inner, .signup-form .tos-input, .signup-form .tos-label,
.signup-form .notify-me-container, .signup-form .notify-me-band, .signup-form .notify-me-label,
.signup-form .notify-me-message, .signup-form .notify-me-checkbox {
    display: inline-block;
}

.signup-form label.tos-label {
    text-align: left;
    width: auto;
    margin: 0;
    font-size: 14px;
}
.signup-form .notify-me-message {
    text-align: left;
    width: 300px;
    margin: 0;
    font-size: 14px;
}

.signup-form .tos,
.signup-form .notify-me-container {
    width: 100%;
    margin: 12px 0 12px 0;
}

.signup-form .notify-me-checkbox {
    vertical-align: top;
}

.signup-form .tos-inner
.signup-form .notify-me-inner {
    width: 100%;
}

.signup-form .tos-input {
    vertical-align: top;
    margin-top: 3px;
    margin-right: 3px;
}

.signup-form .tos-label {
    width: auto;
}

.signup-form .terms-text {
    display: inline-block;
    width: 100%;
}

/* save-card */

.signup-form .save-card, .signup-form .save-card-inner, .signup-form .save-card-input, .signup-form .save-card-label {
    display: inline-block;
}

.signup-form label.save-card-label {
    text-align: left;
    width: 320px;
    margin: 0;
    font-size: 14px;
}

.signup-form .save-card {
    width: 100%;
    margin: 12px 0 12px 0;
}

.signup-form .save-card-inner {
    width: 100%;
}

.signup-form .save-card-input {
    vertical-align: top;
    margin-top: 3px;
    margin-right: 3px;
}

.signup-form .save-card-label {
    width: auto;
}

.signup-form .names .item {
    width: 46%;
    display: inline-block;
    padding-right: 0px;
    margin-right: 4%;
    vertical-align: top;
}

.signup-form .names .item:last-child {
    margin-right: 0;
    width: 50%;
}

.signup-form .edit-location .location-display {
    color: #9c9c9c;
    margin-top: 6px;
    margin-bottom: 11px;
}

.signup-form .edit-location .actual-location {
    color: #333;
}


/* chooser */

.signup-form .chooser .chooser-message {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.signup-form .chooser select {
    width: 350px;
    height: 26px;
    font-size: 16px;
    margin: 0 0 15px 0;
}

/* link to log in */

.signup-form .login-link {
    width: 100%;
    margin: 39px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #818285;
}

.signup-form .buttons.no-bottom-link {
    margin-bottom: 5px;
}


/* login form */

.login-form .signup-common-inner {
    width: 340px;
    margin-top: 10px;
}

.login-form .forgot-password {
    font-size: 12px;
    text-align: center;
    margin: 20px 0;
}

.login-form .change-email {
    font-size: 12px;
    text-align: center;
    margin: 0 0 18px 0;
    color: #818285;
    width: 341px;
    /*white-space: nowrap;*/
}

.login-form .buttons {
    margin-top: 12px;
}

.login-form .chooser .chooser-message {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px 0;
}

.login-form .chooser select {
    width: 100%;
    height: 26px;
    font-size: 16px;
}

.login-form .before-chooser.disabled {
    opacity: 0.3;
}

.login-form .two-factor .two-factor-heading-item {
    font-size: 16px;
    font-weight: 500;
    margin: 18px 0 10px 0;
}

.login-form .two-factor-remember input {
    display: inline-block;
    margin: 3px 3px 0 0;
    vertical-align: top;
}

.login-form .two-factor-remember label {
    text-align: left;
    width: 320px;
    margin: 0;
    font-size: 14px;
    margin-right: 0;
    display: inline-block;
}

.login-form .two-factor .no-phone {
    margin: 0px auto 24px auto;
    text-align: left;
}

.login-form .two-factor-remember-wrapper {
    padding-top: 10px;
}

.login-form .two-factor-help {
    text-align: left;
}

/* forgot password pane */

.forgot-password-form .signup-common-inner {
    width: 340px;
    margin-top: 10px;
}

.forgot-password-form .change-email {
    font-size: 12px;
    text-align: center;
    margin: 20px 0 0 0;
    color: #818285;
}

/* existing artist form */

.existing-artist-form .text-body {
    width: 400px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 20px;
}

.existing-artist-form .or {
    text-align: center;
    opacity: 0.5;
    margin-top: 15px;
}

.existing-artist-form .change-email {
    text-align: center;
    margin-top: 15px;
    line-height: 14px;
}

.ui-dialog.nu-dialog .signup-common-form button.create-account {
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    width: 100%;
}

.existing-artist-form p,
.ui-dialog.nu-dialog .existing-artist-form p {
    margin: 5px 0 24px;
    font-size: 17px;
    line-height: 24px;
}

/* fan action form */

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

body:lang(ja) .action-form {
    line-height: 1.4;
}

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

.action-form .buttons button {
    width: 210px;
    margin-right: 0;
}

.action-form .buttons button.signup {
    margin-right: 35px;
}

/* almost there form */

.almost-there-confirm {
    width: 75%;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
}
.ui-dialog.nu-dialog .signup-common-form button.almost-there-button {
    width: 75%;
    margin: 20px auto 2px auto;
    display: block;
}
.ui-dialog.nu-dialog.center-title .ui-dialog-title {
    text-align: center;
    width: 100%;
    max-width: 100%;
}

/* welcome form */

#sign-up-welcome.signup-heading {
    margin-top: 35px;
    margin-bottom: 4px;
}
.welcome-form.signup-common-form {
    font-size: 16px;
}
.welcome-inner {
    text-align: initial;
}
.welcome-phone {
    display: inline-block;
    width: 252px;
    margin: 10px 21px 0 -50px;
}
.welcome-phone img {
    height: 440px;
}
.welcome-app-promo {
    display: inline-block;
    width: 400px;
    margin-top: 45px;
    vertical-align: top;
    line-height: 23px;
}
.welcome-app-button-container a {
    height: 40px;
    overflow: hidden;
    display: inline-block;
}
.signup-common-form .welcome-app-promo button {
    width: 305px;
    margin: 55px 0 0 40px;
}
.welcome-app-button-container .store-button {
    background: url(/img/_sprite-app-btns@2x.png);
    background-size: 100%;
    height: 80px;
    width: 135px;
}
:lang(en) .welcome-app-button-container .app-store {
    background-position: 0 0;
}
:lang(en) .welcome-app-button-container .google-play-store {
    background-position: 0 -42px;
}
:lang(fr) .welcome-app-button-container .app-store {
    background-position: 0 -84px;
}
:lang(fr) .welcome-app-button-container .google-play-store {
    background-position: 0 -126px;
}
:lang(ja) .welcome-app-button-container .app-store {
    background-position: 0 -168px;
}
:lang(ja) .welcome-app-button-container .google-play-store {
    background-position: 0 -210px;
}

.welcome-app-button-container a:first-child {
    display: inline-block;
    margin-right: 30px;
}
.welcome-app-button-container {
    width: 305px;
    margin: 40px;
}
.welcome-email-app-link {
    text-align: center;
    font-size: 16px;
}
.welcome-email-app-link input {
    margin-top: 15px;
    width: 340px;
    font-size: 18px;
    padding: 5px;
}
.welcome-email-app-link .email-error {
    margin: 5px auto 0;
    text-align: left;
    width: 340px;
    color: red;
}
.welcome-app-email-buttons {
    margin: 40px auto 0px;
    text-align: center;
}
.welcome-app-email-buttons.okay {
     width: 205px;
 }
.welcome-app-email-buttons button {
    display: inline-block;
}
.welcome-app-email-buttons button.no-thanks {
    margin-right: 24px;
}
.modal-welcome-message {
    text-align: center;
    line-height: 22px;
}

/* nag modal */
.verify-nag.signup-common-form {
    width: 340px;
    text-align: center;
    margin: 0 auto;
}
body:lang(ja) .verify-nag.signup-common-form {
    width: 380px;
}
.verify-nag .nag-fan-email {
    display: inline;
    font-weight: bold;
}
.verify-nag .nag-email-change {
    display: inline-block;
    margin: 10px 0 28px 0;
}
.verify-nag .nag-email-change:hover {
    text-decoration: none;
}
.verify-nag button.nag-got-it {
    width: 100%;
}
.verify-nag button.nag-send-again {
    width: 162px;
    margin-right: 12px;
}
.verify-nag button.nag-cancel {
    width: 161px;
}
.verify-nag .nag-email-input {
    margin: 14px 0 19px 0;
}
.verify-nag .nag-email-input .error-bubble {
    text-align: left;
}
.verify-nag .nag-buttons {
    height: 36px;
}
.verify-nag .nag-buttons.no-email {
    margin-top: 20px;
}
.verify-nag .nag-email-sent {
    margin-bottom: 15px;
}
.verify-nag button.nag-done {
    width: 100%;
    margin-bottom: 15px;
}

/* dupe fan */
/* dupe pane */
.dupe-fan-form .dialog-body {
    text-align: center;
}

/* account chooser form */
.choose-account-form ul.accounts-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 432px;
}

.choose-account-form ul.accounts-list .account {
    display: block;
    font-size: 0;
    padding-bottom: 26px;
    margin-bottom: 24px;
    margin-top: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.choose-account-form ul.accounts-list .account:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.choose-account-form .account.artist,
.choose-account-form .account.artist a {
    color: #6E943B;
}

.choose-account-form .account.label,
.choose-account-form .account.label a {
    color: #6F49A1;
}

.choose-account-form .account > * {
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
}

.choose-account-form .account .icon {
    width: 40%;
    height: 126px;
}
.choose-account-form .account.label .icon {
    background: url('/img/icon-labels.svg') 150% 50% no-repeat;
}
.choose-account-form .account.fan .icon {
    background: url('/img/icon-fans.svg') 150% 50% no-repeat;
}
.choose-account-form .account.artist .icon {
    background: url('/img/icon-artists.svg') 150% 50% no-repeat;
}

.choose-account-form .account .description {
    color: #818285;
    width: 58%;
    margin-top: 10px;
    line-height: 16px;
}

.choose-account-form .account .signup-button {
    width: 100%;
    text-align: center;
    display: block;
    border-radius: 3px;
    border: 1px solid rgb(0,161,198);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0 7px 0;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.choose-account-form .account .signup-button:hover,
.choose-account-form .account a:hover {
    text-decoration: underline;
}

.choose-account-form .account.artist .signup-button {
    border-color: #6E943B;
}

.choose-account-form .account.label .signup-button {
    border-color: #6F49A1;
}

.choose-account-form .account.artist .circle {
    background: rgba(110,148,59, 0.1);
}

.choose-account-form .account.label .circle {
    background: rgba(111,73,161, 0.1);
}

/* genre picker */
.genre-picker-form {
    width: 648px;
    margin: -36px auto 0 auto;
    position: relative;
    opacity: 0;
    transition: opacity 0.2s;
}

.genre-picker-form.standalone {
    margin-left: 16px;
    margin-right: 16px;
}

.genre-picker-form.active {
    opacity: 1;
}

.genre-picker-form .clearfix:before,
.genre-picker-form .clearfix:after {
    content: " ";
    display: table;
}

.genre-picker-form .clearfix:after {
    clear: both;
}

.genre-picker-form .heading-wrapper {
    margin: 0 4px 0;
    text-align: center;
}

.genre-picker-form .heading-wrapper h3 {
    font-size: 18px;
    margin-bottom: 0;
}

.genre-picker-form .heading-wrapper h4 {
    font-size: 18px;
    font-weight: normal;
    margin: 8px 0 0 0;
}

.genre-picker-form ul.genres,
.genre-picker-form ul.subgenres,
.genre-picker-form ul.selected-genres,
.genre-picker-form ul.selected-genres-placeholder {
    list-style: none;
    padding: 0;
    margin: 0;
}

.genre-picker-form ul.genres {
    width: 650px;
}

.genre-picker-form ul.genres > li,
.genre-picker-form ul.subgenres > li,
.genre-picker-form ul.selected-genres > li,
.genre-picker-form ul.selected-genres-placeholder > li {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.genre-picker-form .list-wrapper {
    height: 30px;
    width: 638px;
    overflow: hidden;
    margin: 0 5px;

    transition: height 0.3s;
}

.genre-picker-form .list-wrapper.no-animation {
    transition: height 0s;
}

.genre-picker-form .list-wrapper.has-genres {
    height: 56px;
}

.genre-picker-form ul.genres > li.genre {
    margin: 5px;
    float: left;
    border-radius: 5px;
    width: 152px;
    height: 152px;
}

.genre-picker-form ul.genres > li.genre .content {
    width: 152px;
    height: 152px;
    transition: width 0.4s,
                height 0.4s;
}

.genre-picker-form li.genre .subgenres {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s 0.3s;
}

.genre-picker-form li.genre.expanded .subgenres {
    height: auto;
    opacity: 1;
}

.genre-picker-form ul.subgenres {
    margin-left: 14px;
    margin-right: 20px;
}

.genre-picker-form ul.subgenres li {
    color: #FFF;
    cursor: pointer;
    margin: 2px 0;
}

.genre-picker-form ul.subgenres h3 {
    margin: 0;
    padding: 0;
    display: inline-block;
    padding: 5px 14px 5px 10px;
    border-radius: 16px;
    background-color: #FFF;
    color: #333;
    font-size: 14px;
}

.genre-picker-form ul.subgenres li.selected h3 {
    background-color: rgba(51, 51, 51, 1);
}

.genre-picker-form .genres-overflow-wrapper {
    /* height: 460px; */
    width: 658px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.genre-picker-form ul.genres > li.genre.expanded,
.genre-picker-form ul.genres > li.genre.expanded .content {
    width: 314px;
    height: 314px;
}

.genre-picker-form ul.genres > li.genre.expanded.long,
.genre-picker-form ul.genres > li.genre.expanded.long .content {
    width: 314px;
    height: 476px;
}

.genre-picker-form ul.genres > li.genre.search {
    right: 0;
    top: 972px;
}

.genre-picker-form .search-heading {
    display: block;
    margin: 30px 20px 5px 20px;
    font-size: 18px;
    line-height: 22px;
    color: #FFF;
}

.genre-picker-form .search-subheading {
    display: block;
    margin: 0 20px;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    color: #FFF;
}

.genre-picker-form ul.genres > li.genre.search {
    background: linear-gradient(-45deg, #30D4BB 0%, #7b7beb 100%);
}

.genre-picker-form li.genre .content {
    width: 100%;
    position: relative;
    float: none;
    text-align: center;
    border-radius: 5px;
}

.genre-picker-form li.genre.expanded .content {
    text-align: left;
}

.genre-picker-form li.genre h3.genre-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    border-radius: 16px;
    display: inline-block;
    padding: 6px 14px 6px 14px;
    margin: 57px auto 0 auto;
    text-align: left;
    background: #FFF;
    color: #333;
}

.genre-picker-form li.genre.selected .genre-name,
.genre-picker-form li.genre.expanded.selected .genre-name {
    background-color: rgba(51, 51, 51, 1);
    color: #FFF;
}

.genre-picker-form li.genre.expanded .genre-name {
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 12px;
    background-color: #FFF;
    color: #333;
}

.genre-picker-form .selected-genres-wrapper {
    position: relative;
    text-align: center;
}

.genre-picker-form .page {
    position: absolute;
    height: 30px;
}

.genre-picker-form .page:hover {
    cursor: pointer;
}

.genre-picker-form .page-left {
    left: -20px;
    top: 16px;
}

.genre-picker-form .page-right {
    right: -20px;
    top: 16px;
}

.genre-picker-form .page .icon {
    fill: #333;
    height: 20px;
    width: 14px;
    margin-top: 5px;
    z-index: 16;
    position: relative;
}

.genre-picker-form .page .page-fade,
.genre-picker-form .page .page-fade {
    bottom: 0;
    content: ' ';
    display: block;
    top:0;
    position: absolute;
    width: 30px;
    z-index: 15;
}
.genre-picker-form .page-left .page-fade {
    background: linear-gradient(to left , rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 65%);
    left: 15px;
}
.genre-picker-form .page-right .page-fade {
    background: linear-gradient(to right , rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 65%);
    right: 15px;
}


.genre-picker-form ul.selected-genres {
    overflow-x: scroll;
    overflow-y: visible;
    white-space: nowrap;
    margin: 16px 0 0;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    font-size: 0;

    opacity: 0;

    transition: opacity 0.2s 0.2s;
}

.genre-picker-form .no-animation ul.selected-genres {
    transition: opacity 0s;
}

.genre-picker-form .has-genres ul.selected-genres {
    opacity: 1;
}

.genre-picker-form ul.selected-genres li {
    margin: 0;
    opacity: 0;
    max-width: 0;
    font-size: 14px;
    transition: opacity 0.3s 0s,
                max-width 0.8s 0s,
                margin 0s;
}

.genre-picker-form .no-animation ul.selected-genres li {
    margin: 0;
    opacity: 0;
    max-width: 0;
    font-size: 14px;
    transition: opacity 0s,
                max-width 0s,
                margin 0s;
}

.genre-picker-form ul.selected-genres li.hiding {
    transition: opacity 0.3s 0s,
                max-width 0.8s 0s,
                margin 0.3s;
}

.genre-picker-form ul.selected-genres li.visible {
    margin: 0px 4px 0px 4px;
    opacity: 1;
    max-width: 600px;
}

.genre-picker-form ul.selected-genres h3 {
    margin: 0;
    padding: 0;
    display: inline-block;
    padding: 5px 14px 5px 10px;
    border-radius: 16px;
    background-color: #333;
    color: #FFF;
    font-size: 14px;
}

.genre-picker-form ul.selected-genres li.selected-genre:hover {
    cursor: pointer;
}

.genre-picker-form ul.selected-genres li.selected-genre .genre-icon {
    background-position: -16px 0%;
    width: 16px;
}

.genre-picker-form ul.selected-genres li.selected-genre-placeholder {
    height: 26px;
    width: 95px;
    border: 2px solid #CCC;
    margin: 0px 2px 0px 2px;
    border-radius: 15px;
}

.genre-picker-form .genre-icon {
    background-image: url(/img/genrepicker/icon-sprite.png);
    /*width: 16px;*/
    width: 0;
    height: 16px;
    background-size: 64px 16px;
    background-position: 0px 0%;
    position: relative;
    display: inline-block;
    margin: 0px 2px 0px 0px;
}

.genre-picker-form li.genre.expanded .genre-icon {
    width: 16px;
    background-image: url(/img/genrepicker/icon-sprite-dark.png);
}

.genre-picker-form li.genre .genre-name:hover .genre-icon,
.genre-picker-form ul.subgenres h3.subgenre-name:hover .genre-icon {
    background-image: url(/img/genrepicker/icon-sprite.png);
}

/* hover states */
.genre-picker-form li.genre .genre-name:hover,
.genre-picker-form li.genre:hover:not(.expanded) .genre-name {
    background-color: #333;
    color: #FFF;
}

.genre-picker-form ul.subgenres li:hover h3.genre-name,
.genre-picker-form ul.subgenres li.selected h3,
.genre-picker-form ul.subgenres h3.subgenre-name:hover,
.genre-picker-form li.genre:hover:not(.expanded) .genre-name {
    background-color: rgba(51, 51, 51, 1);
    color: #FFF;
}

.genre-picker-form ul.selected-genres li:hover h3
/*.genre-picker-form li.genre.selected h3.genre-name:hover,*/
/* .genre-picker-form li.subgenre.selected h3.subgenre-name:hover */ {
    background-color: rgba(51, 51, 51, 0.5);
}

.genre-picker-form li.genre.selected h3.genre-name .genre-icon,
.genre-picker-form li.subgenre.selected h3.subgenre-name .genre-icon {
    background-position: -16px 0%;
    width: 16px;
    background-image: url(/img/genrepicker/icon-sprite.png);
}

.genre-picker-form li.genre.selected.expanded h3.genre-name:hover .genre-icon,
.genre-picker-form li.subgenre.selected h3.subgenre-name:hover .genre-icon,
.genre-picker-form ul.selected-genres li.selected-genre:hover .genre-icon {
    background-position: -32px 0%;
    width: 16px;
    background-image: url(/img/genrepicker/icon-sprite.png);
}

.genre-picker-form li.genre:hover,
.genre-picker-form li.subgenre:hover h3 {
    cursor: pointer;
}

.genre-picker-form .search-wrapper {
    /*position: relative;*/
    text-align: center;
}

.genre-picker-form .search-input-wrapper {
    position: relative;
    display: inline-block;
}

.ui-widget.nu-dialog .genre-picker-form .search-wrapper input {
    width: 320px;
    height: 28px;
    padding-right: 28px;
    padding-left: 3px;
    border: 1px solid rgba(204, 204, 204, 1);
    font-size: 14px;
    font-weight: 400;
    padding-left: 10px;
    cursor: text;
    margin: 0 auto;
    margin-bottom: 10px;
}

.ui-widget.nu-dialog .genre-picker-form .search-wrapper input:focus {
    box-shadow: none;
}

.genre-picker-form .search-wrapper.expanded input.selected {
    background: rgba(204, 204, 204, 0.2);
}

.ui-widget.nu-dialog .genre-picker-form .search-wrapper.expanded input:focus {
    border: 2px solid rgba(160, 160, 160, 1);
}

.genre-picker-form .search-wrapper h2 {
    text-align: center;
    color: #666666;
    font-size: 18px;
    margin-bottom: 14px;
}

.genre-picker-form .search-wrapper h3 {
    font-weight: normal;
    text-align: center;
    color: #666666;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 12px;
}

.genre-picker-form a.search {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 7px;
    margin: 0;
}

.genre-picker-form .search-icon {
    background: url(/img/homepage_2015/search-icon@2x.png) 0 0 no-repeat;
    background-size: 100%;
    width: 15px;
    height: 15px;
    line-height: 13px;
    display: inline-block;
    position: relative;
    opacity: 1;
}

/*.genre-picker-form .searching .search-icon {
    opacity: 0;
}*/

.genre-picker-form .search-spinner {
    position: absolute;
    display: inline-block;
    right: 0px;
    top: 1px;
    opacity: 0;
}

/*.genre-picker-form .searching .search-spinner {
    opacity: 1;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}*/

@keyframes spin {
    from {
        transform: rotate(360deg);
    } to {
        transform: rotate(0deg);
    }
}

.genre-picker-form .search-results {
    width: 318px;
    max-height: 0;
    background-color: #CCC;
    position: absolute;
    left: 169px;
    overflow: hidden;
    z-index: 10;
    transition: max-height 0s;
    background-color: #FFF;
    border: 0px solid #FFF;
    border-radius: 3px;
}

.genre-picker-form.skinny .search-results {
    left: 81px;
}

.genre-picker-form .search-results.results-visible {
    max-height: 138px;
    border: 1px solid #cccccc;
    transition: max-height 0.4s;
    border-top: 0;
    overflow: scroll;
}

.genre-picker-form .search-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.genre-picker-form .search-results li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    padding: 5px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.genre-picker-form .search-results li:hover,
.genre-picker-form .search-results li.selected {
    cursor: pointer;
    background: rgba(204, 204, 204, 0.2);
}

.genre-picker-form .search-results li.empty:hover,
.genre-picker-form .search-results li.empty.selected {
    cursor: default;
    background: inherit;
}

.genre-picker-form .search-results li:focus {
    outline: none;
}

.genre-picker-form .search-results .count {
    position: absolute;
    right: 6px;
    font-size: 11px;
    opacity: 0.5;
}

.genre-picker-form #electronic-box .content {
    background: #F9A55B;
    background: 
        linear-gradient(
            rgba(249,165,91, 0.5), 
            rgba(249,165,91, 0.5)
        ),
        url(/img/genrepicker/electronic.jpg);
    background-size: 100%;    
}

.genre-picker-form #rock-box .content {
    background: #F7714E;
    background: 
        linear-gradient(
            rgba(247,113,78, 0.5), 
            rgba(247,113,78, 0.5)
        ),
        url(/img/genrepicker/rock.jpg);
    background-size: 100%;
}

.genre-picker-form #metal-box .content {
    background: #E0222D;
    background: 
        linear-gradient(
            rgba(224,34,45, 0.5), 
            rgba(224,34,45, 0.5)
        ),
        url(/img/genrepicker/metal.jpg);
    background-size: 100%;    
}

.genre-picker-form #alternative-box .content {
    background: #D62F6A;
    background: 
        linear-gradient(
            rgba(214,47,106, 0.5), 
            rgba(214,47,106, 0.5)
        ),
        url(/img/genrepicker/alternative.jpg);
    background-size: 100%;  
}

.genre-picker-form #hip-hop-rap-box .content {
    background: #C33AA4;
    background: 
        linear-gradient(
            rgba(195,58,164, 0.5), 
            rgba(195,58,164, 0.5)
        ),
        url(/img/genrepicker/hiphop.jpg);
    background-size: 100%;  
}

.genre-picker-form #experimental-box .content {
    background: #9A58C0;
    background: 
        linear-gradient(
            rgba(154,88,192, 0.5), 
            rgba(154,88,192, 0.5)
        ),
        url(/img/genrepicker/experimental.jpg);
    background-size: 100%;
}

.genre-picker-form #punk-box .content {
    background: #816FB2;
    background: 
        linear-gradient(
            rgba(129,111,178, 0.5), 
            rgba(129,111,178, 0.5)
        ),
        url(/img/genrepicker/punk.jpg);
    background-size: 100%;    
}

.genre-picker-form #folk-box .content {
    background: #8690CE;
    background: 
        linear-gradient(
            rgba(134,144,206, 0.5), 
            rgba(134,144,206, 0.5)
        ),
        url(/img/genrepicker/folk.jpg);
    background-size: 100%;    
}

.genre-picker-form #pop-box .content {
    background: #87A8C5;
    background: 
        linear-gradient(
            rgba(135,168,197, 0.5), 
            rgba(135,168,197, 0.5)
        ),
        url(/img/genrepicker/pop.jpg);
    background-size: 100%;    
}

.genre-picker-form #ambient-box .content {
    background: #85BFBC;
    background: 
        linear-gradient(
            rgba(133,191,188, 0.5), 
            rgba(133,191,188, 0.5)
        ),
        url(/img/genrepicker/ambient.jpg);
    background-size: 100%;    
}

.genre-picker-form #soundtrack-box .content {
    background: #82D23D;
    background: 
        linear-gradient(
            rgba(130,210,61, 0.5), 
            rgba(130,210,61, 0.5)
        ),
        url(/img/genrepicker/soundtrack.jpg);
    background-size: 100%;    
}

.genre-picker-form #world-box .content {
    background: #B0CA3C;
    background: 
        linear-gradient(
            rgba(176,202,60, 0.5), 
            rgba(176,202,60, 0.5)
        ),
        url(/img/genrepicker/world.jpg);
    background-size: 100%;    
}

.genre-picker-form #jazz-box .content {
    background: #D6BF3D;
    background: 
        linear-gradient(
            rgba(214,191,61, 0.5), 
            rgba(214,191,61, 0.5)
        ),
        url(/img/genrepicker/jazz.jpg);
    background-size: 100%;    
}

.genre-picker-form #acoustic-box .content {
    background: #F9A55B;
    background: 
        linear-gradient(
            rgba(249,165,91, 0.5), 
            rgba(249,165,91, 0.5)
        ),
        url(/img/genrepicker/acoustic.jpg);
    background-size: 100%;    
}

.genre-picker-form #funk-box .content {
    background: #F7714E;
    background: 
        linear-gradient(
            rgba(247,113,78, 0.5), 
            rgba(247,113,78, 0.5)
        ),
        url(/img/genrepicker/funk.jpg);
    background-size: 100%;   
}

.genre-picker-form #r-b-soul-box .content {
    background: #E0222D;
    background: 
        linear-gradient(
            rgba(224,34,45, 0.5), 
            rgba(224,34,45, 0.5)
        ),
        url(/img/genrepicker/rnb.jpg);
  background-size: 100%;    
}

.genre-picker-form #devotional-box .content {
    background: #D62F6A;
    background: 
        linear-gradient(
            rgba(214,47,106, 0.5), 
            rgba(214,47,106, 0.5)
        ),
        url(/img/genrepicker/devotional.jpg);
    background-size: 100%;  
}

.genre-picker-form #classical-box .content {
    background: #C33AA4;
    background: 
        linear-gradient(
            rgba(195,58,164, 0.5), 
            rgba(195,58,164, 0.5)
        ),
        url(/img/genrepicker/classical.jpg);
    background-size: 100%;
}

.genre-picker-form #reggae-box .content {
    background: #9A58C0;
    background: 
        linear-gradient(
            rgba(154,88,192, 0.5), 
            rgba(154,88,192, 0.5)
        ),
        url(/img/genrepicker/reggae.jpg);
    background-size: 100%;    
}

.genre-picker-form #podcasts-box .content {
    background: #816FB2;
    background: 
        linear-gradient(
            rgba(129,111,178, 0.5), 
            rgba(129,111,178, 0.5)
        ),
        url(/img/genrepicker/podcasts.jpg);
    background-size: 100%; 
}

.genre-picker-form #country-box .content {
    background: #8690CE;
    background: 
        linear-gradient(
            rgba(134,144,206, 0.5), 
            rgba(134,144,206, 0.5)
        ),
        url(/img/genrepicker/country.jpg);
    background-size: 100%;
}

.genre-picker-form #spoken-word-box .content {
    background: #87A8C5;
    background: 
        linear-gradient(
            rgba(135,168,197, 0.5), 
            rgba(135,168,197, 0.5)
        ),
        url(/img/genrepicker/spokenword.jpg);
    background-size: 100%;
}

.genre-picker-form #comedy-box .content {
    background: #85BFBC;
    background: 
        linear-gradient(
            rgba(133,191,188, 0.5), 
            rgba(133,191,188, 0.5)
        ),
        url(/img/genrepicker/comedy.jpg);
    background-size: 100%; 
}

.genre-picker-form #blues-box .content {
    background: #82D23D;
    background: 
        linear-gradient(
            rgba(130,210,61, 0.5), 
            rgba(130,210,61, 0.5)
        ),
        url(/img/genrepicker/blues.jpg);
    background-size: 100%;    
}

.genre-picker-form #kids-box .content {
    background: #B0CA3C;
    background: 
        linear-gradient(
            rgba(176,202,60, 0.5), 
            rgba(176,202,60, 0.5)
        ),
        url(/img/genrepicker/kids.jpg);
    background-size: 100%; 
}

.genre-picker-form #audiobooks-box .content {
    background: #D6BF3D;
    background: 
        linear-gradient(
            rgba(214,191,61, 0.5), 
            rgba(214,191,61, 0.5)
        ),
        url(/img/genrepicker/audiobooks.jpg);
    background-size: 100%; 
}

.genre-picker-form #latin-box .content {
    background: #F9A55B;
    background: 
        linear-gradient(
            rgba(249,165,91, 0.5), 
            rgba(249,165,91, 0.5)
        ),
        url(/img/genrepicker/latin.jpg);
    background-size: 100%; 
}

.genre-picker-form .buttons {
    padding-top: 2px;
    width: 640px;
    margin: 16px 4px 0 4px;
    text-align: center;
}

.genre-picker-form .buttons .skip {
    margin-top: 10px;
    display: inline-block;
}

.genre-picker-form .buttons .skip a:hover {
    text-decoration: underline;
}

.signup-common-form.genre-picker-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.genre-picker-form .buttons button {
    height: 47px;
    width: 100%;
}

.signup-common-form.genre-picker-form .buttons button.disabled {
    background: #555;
    color: #ccc;
    opacity: 0.3;
    border: none;
    text-decoration: none;
}

.signup-common-form.genre-picker-form .buttons button.disabled:hover {
    background: rgb(0,161,198);
    color: #FFF;
    opacity: 1;
}


    
.signup-common-form.genre-picker-form .buttons button:hover,
.ui-dialog.nu-dialog .signup-common-form.genre-picker-form .buttons button:hover {
    text-decoration: underline;
}

.signup-common-form.genre-picker-form .buttons button:disabled:hover,
.ui-dialog.nu-dialog .signup-common-form.genre-picker-form .buttons button:disabled:hover {
    text-decoration: none;
}

/* post genre */

.post-genre-form h1 {
    line-height: 34px;
    color: #FFF;
    text-align: center;
}

.post-genre-form ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.post-genre-form li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    color: #FFF;
    cursor: pointer;
    margin: 2px 0;
}

.post-genre-form li h3 {
    margin: 0;
    padding: 0;
    display: inline-block;
    padding: 6px 14px 6px 10px;
    border-radius: 16px;
    background-color: rgba(40, 40, 40, 1);
    font-size: 14px;
}

.post-genre-form .genre-icon {
    background-image: url(/img/genrepicker/icon-sprite.png);
    width: 16px;
    height: 16px;
    background-size: 64px 16px;
    background-position: -16px 0%;
    position: relative;
    display: inline-block;
    margin: 0px 2px 0px 0px;
}

@media (max-width: 768px) {
    .genre-picker-form {
        width: 487px;
    }
    .genre-picker-form .buttons {
        width: 478px;
    }
    .genre-picker-form ul.genres {
        width: 486px;
    }
    .genre-picker-form .page-left {
        left: -20px;
    }
    .genre-picker-form .page-right {
        right: -20px;
    }
    .genre-picker-form .page-left .page-fade {
        left: 7px;
        width: 50px;
    }
    .genre-picker-form .page-right .page-fade {
        right: 2px;
        width: 60px;
    }
    .genre-picker-form .list-wrapper {
        width: 476px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        width: 482px;
    }
}
/*
@media (max-height: 740px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 350px;
    }
    .genre-picker-form .search-results {
        top: 414px;
    }
    .genre-picker-form.has-selected-genres .search-results {
        top: 440px;
    }
}
@media (min-height: 741px) and (max-height: 900px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 480px;
    }
    .genre-picker-form .search-results {
        top: 544px;
    }
    .genre-picker-form.has-selected-genres .search-results {
        top: 570px;
    }
}
@media (min-height: 901px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 540px;
    }
    .genre-picker-form .search-results {
        top: 604px;
    }
    .genre-picker-form.has-selected-genres .search-results {
        top: 630px;
    }
}
*/

/* newsletter picker */

.newsletter-picker-form .heading-wrapper .icon {
    width: 70px;
    height: 70px;
    display: inline-block;
    margin-top: -10px;
}

.newsletter-picker-form .heading-wrapper .icon img {
    width: 100%;
}

.newsletter-picker-form .heading-wrapper .text {
    display: inline-block;
    width: 350px;
    vertical-align: top;
    margin-left: 4px;
}

.newsletter-picker-form .heading-wrapper h1 {
    display: inline-block;
    vertical-align: top;
    margin: 24px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.newsletter-picker-form .heading-wrapper h2 {
    display: inline-block;
    font-weight: normal;
    margin: 0;
    font-size: 17px;
    line-height: 20px;
}

.newsletter-picker-form ul.suggested-newsletters,
.newsletter-picker-form ul.suggested-newsletters li {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.newsletter-picker-form ul.suggested-newsletters {
    margin: 16px 0 0 16px;
}

.newsletter-picker-form ul.suggested-newsletters li {
    margin: 0 16px 16px 0;
}

.newsletter-picker-form ul.suggested-newsletters input[type="checkbox"] {
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
}

.newsletter-picker-form ul.suggested-newsletters .details {
    display: inline-block;
    vertical-align: top;
    width: 374px;
}

.newsletter-picker-form ul.suggested-newsletters h3 {
    margin: 0;
}

.newsletter-picker-form .email-abuse {
    margin: 10px auto 0px auto;
    color: #777;
    font-size: 12px;
    line-height: 14px;
    width: 420px;
}

.newsletter-picker-form .buttons {
    margin-top: 16px;
    text-align: center;
    width: 420px;
}

.signup-common-form.newsletter-picker-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.newsletter-picker-form .buttons button {
    width: 100%;
    padding: 12px 12px;
    height: 43px;
    border-radius: 4px;
    line-height: 16px;
}

.signup-common-form.newsletter-picker-form .buttons button.yes,
.ui-dialog.nu-dialog .signup-common-form.newsletter-picker-form .buttons.split button.yes {
    width: 212px;
    margin-right: 14px;
}

.signup-common-form.newsletter-picker-form .buttons button.no,
.ui-dialog.nu-dialog .signup-common-form.newsletter-picker-form .buttons.split button.no {
    width: 190px;
    background: #FFF;
    border: 1px solid rgb(0,161,198);
    color: rgb(0,161,198);
}

/* welcome 2 */

.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;
}

.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;
}


.choose-account-form .account.artist .circle {
    background: rgba(110,148,59, 0.1);
}

.choose-account-form .account.label .circle {
    background: rgba(111,73,161, 0.1);
}


.complete-profile-form .profile-pic {
    width: 85px;
    height: 85px;
    margin: 0 auto;
    border-radius: 50%;
}

.complete-profile-form .profile-pic label.placeholder-wrapper {
    height: 100%;
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    position: relative;
    margin: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid rgba(0, 0, 0, 0.05);
}

.complete-profile-form .profile-pic label.placeholder-wrapper:hover {
    border: 4px solid rgba(0, 0, 0, 0.10);
}

.complete-profile-form .profile-pic label.placeholder-wrapper:focus,
.complete-profile-form .profile-pic label.placeholder-wrapper:hover:focus {
    border-color: #50a1e6;
    box-shadow: 0 0 5px #50a1e6;
}

.complete-profile-form .profile-pic label.placeholder-wrapper.loading {
    cursor: default;
}

.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 rgba(0, 0, 0, 0.05);
    box-shadow: none;
}

.complete-profile-form .profile-pic label:focus,
.complete-profile-form .profile-pic label:active,
.complete-profile-form .profile-pic-edit-icon:focus,
.complete-profile-form .profile-pic-edit-icon:active {
    transition-duration: 0s;
    transition-property: border-color, box-shadow;
    border-color: #50a1e6;
    box-shadow: 0 0 5px #b4d7f9;
    outline: none;
    -webkit-appearance: none;
}

.complete-profile-form .profile-pic .placeholder {
    background: linear-gradient(90deg, #6046FE, #1DA0C3);
    border-radius: 50%;
    width: 100%;
    height:  100%;
}

.complete-profile-form .profile-pic .placeholder .camera-icon,
.complete-profile-form .profile-pic .placeholder .spinny-icon {
    width: 35px;
    fill: #FFF;
    top: 26px;
    left: 21px;
    position: absolute;
}

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

.complete-profile-form .profile-pic .placeholder .spinny-icon {
    width: 30px;
    top: 25px;
    left: 24px;

    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.complete-profile-form .profile-pic-wrapper {
    position: relative;
    width: 100%;
    height:  100%;
}

.complete-profile-form .profile-pic img {
    border-radius: 50%;
    display: block;
    width: 100%;
    height:  100%;
}

.complete-profile-form .profile-pic-edit-icon {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background-color: rgb(0,161,198);
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}

.complete-profile-form .profile-pic-edit-icon svg {
    fill: #FFF;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 6px;
    left: 6px;
}

.complete-profile-form .edit-profile-menu {
    background: #fff;
    width: 160px;
    position: absolute;
    bottom: -84px;
    right: -157px;
    font-size: 14px;
    padding: 10px 12px;
    line-height: 28px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    z-index: 0;
}

.complete-profile-form .edit-profile-menu a {
    color: inherit;
}

.complete-profile-form .edit-profile-menu a:hover,
.complete-profile-form .edit-profile-menu a:focus {
    text-decoration: underline;
}


.complete-profile-form .edit-profile-menu a:first-child {
    color: red;
}

.complete-profile-form .edit-profile-menu label {
    font-size: 14px;
}

.complete-profile-form .buttons {
    margin: 20px 0 0 0;
}

.complete-profile-form .skip-wrapper {
    text-align: center;
}

.complete-profile-form .skip-wrapper.hide {
    visibility: hidden;
}

.complete-profile-form .skip {
    width: 100%;
    margin: 20px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #818285;
}

.complete-profile-form .hover-hint-anchor {
    vertical-align: middle;
}

.complete-profile-form .hover-hint-anchor .tooltip-icon {
    width: 16px;
    height: 16px;
}


.complete-profile-form .hover-hint-wrapper {
    position: relative;
}

.complete-profile-form .hover-hint {
font-size: 13px;
    color: rgb(255, 255, 255);
    background: rgb(51, 51, 51);
    padding: 20px 10px;
    position: absolute;
    width: 300px;
    text-align: center;
    left: calc(-50% - 149px);
    bottom: 24px;
    border-radius: 2px;
}

.complete-profile-form .hover-hint-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    bottom: -5px;
    border-top: 5px solid rgb(51, 51, 51);
}

.complete-profile-form .location-display {
    font-size: 13px;
    color: #999;
    margin-top: 5px;
}

.complete-profile-form .location-display .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";
    width: 0px;
}

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

/* invisible recaptcha used by captcha.js */

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

.newsletter-invite-banner {
    background: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #30D4BB);
    color: #FFF;
    font-weight: 350;
    padding: 15px 0;
    -webkit-font-smoothing: antialiased;
}

:lang(fr) .newsletter-invite-banner,
:lang(ja) .newsletter-invite-banner {
    display: none;
}

@media all and (max-width: 600px) {
    .newsletter-invite-banner {
        display: none;
    }
}

.newsletter-invite-banner .tell-us-what-you-like {
    font-weight: 600;
    cursor: pointer;
}

.newsletter-invite-banner .dismiss {
    position: absolute;
    right: 20px;
    fill: #FFFFFF;
    cursor: pointer;
}

/* trackpipe/public/css/fan/signup/fan_signup_tooltips.css */
/* signup tooltips */

.signup-tooltip-parent,
.signup-tooltip-parent > input {
    position: relative;
}

.signup-tooltip-parent > input,
.autocomplete-form.signup-tooltip-parent > button,
.searchwidget.signup-tooltip-parent button[type=submit],
.signup-tooltip-parent.show-tooltip.hide-tooltip > input,
.autocomplete-form.signup-tooltip-parent.show-tooltip.hide-tooltip > button,
.searchwidget.signup-tooltip-parent.show-tooltip.hide-tooltip button[type=submit] {
    z-index: 0;
    transition: z-index 0s 0.3s;
}
.signup-tooltip-parent.show-tooltip > input,
.autocomplete-form.signup-tooltip-parent.show-tooltip > button,
.autocomplete-form.signup-tooltip-parent.show-tooltip > label,
.searchwidget.signup-tooltip-parent.show-tooltip button[type=submit],
.signup-tooltip-parent.show-tooltip > #following-actions {
    z-index: 10;
    transition: z-index 0s 0s;
}

.signup-tooltip-parent a.dismiss-tooltip-alt {
    color: rgb(0,161,198);
}

.signup-tooltip-outer {
    position: absolute;
    width: 400px;
    height: 0;
    left: calc(50% - 204px);
    z-index: 1;
    top: -191px;
    cursor: default;
}

.signup-tooltip-parent.show-tooltip {
    visibility: visible;
}

.signup-tooltip-parent.show-tooltip .signup-tooltip-outer {
    height: 400px;
    display: inline-block;
}

.signup-tooltip-parent.hide-tooltip .signup-tooltip-outer {
    height: 0;
    transition: height 0s 0.3s;
    overflow: hidden;
}


.signup-tooltip-outer > * {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
}

.signup-tooltip {
    top: 0;
    background: rgba(0,161,198, 0.95);
    border-radius: 200px;
    visibility: hidden;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 21px;
}

.signup-tooltip-parent.show-tooltip .signup-tooltip {
    visibility: visible;
}

.signup-tooltip .signup-tooltip-inner {
    width: 250px;
    margin: 0 auto;
    margin-top: 256px;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    white-space: normal;
    position: relative;
    display: block;
}

body:lang(fr) .signup-tooltip .signup-tooltip-inner {
    font-size: 15px;
    line-height: 1.2;
}

body:lang(ja) .signup-tooltip .signup-tooltip-inner {
    font-size: 15px;
    line-height: 1.3;
}

.menubar .signup-tooltip .signup-tooltip-inner {
    margin-top: 262px;
}

.signup-tooltip .position {
    font-size: 12px;
}

body:lang(fr) .signup-tooltip .position,
body:lang(ja) .signup-tooltip .position {
    margin-bottom: 0.5em;
}

.signup-tooltip a.dismiss-tooltip,
#rightColumn .signup-tooltip a.dismiss-tooltip {
    color: #FFF;
    font-size: 14px;
    display: block;
    margin-top: 12px;
    font-weight: bold;
}

.signup-tooltip a.dismiss-tooltip:hover {
    text-decoration: underline;
}

.signup-tooltip a.dismiss-tooltip:focus {
    outline: none;
}

.signup-tooltip-outer .inner-circle {
    position: relative;
    margin: 161px auto 0 auto;
    width: 78px;
    height: 78px;
    background-color: #FFF;
    opacity: 1;
    border-radius: 70px;
    transform: scale(0);
    z-index: 2;
    display: block;

    transition: transform 0.3s 0s;
}

.menubar .signup-tooltip-outer .inner-circle {
    margin: 174px auto 0 auto;
}

.signup-tooltip-parent.show-tooltip .inner-circle {
    transform: scale(1);
}
.signup-tooltip-parent.show-tooltip.hide-tooltip .inner-circle,
.hide-tooltips .signup-tooltip-parent.show-tooltip .inner-circle {
    transform: scale(0);
    transition: transform 0.3s 0s;
}
.signup-tooltip-parent.show-tooltip .signup-tooltip {
    animation: 0.5s ease 0s 1 normal both bounce-in;
}
.signup-tooltip-parent.show-tooltip.hide-tooltip .signup-tooltip,
.hide-tooltips .signup-tooltip-parent.show-tooltip .signup-tooltip {
    animation: 0.5s ease 0.1s 1 normal both bounce-out;
}
.tooltips-hidden .signup-tooltip-parent.show-tooltip .signup-tooltip {
    opacity: 0;
}

.signup-tooltip-outer .inner-circle-contents {
    z-index: 13;
    position: relative;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s,
                visibility 0s 0s;
    margin: -48px auto 0 auto;
    display: block;
}

.signup-tooltip-parent.show-tooltip .inner-circle-contents {
    opacity: 1;
    visibility: visible;
    text-align: center;
}

.signup-tooltip-parent.show-tooltip.hide-tooltip .inner-circle-contents,
.hide-tooltips .signup-tooltip-parent.show-tooltip .inner-circle-contents {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s,
                visibility 0s 0.2s;
}

@keyframes bounce-in {
    0% {
        transform: translateY(-200px) scale(0.6);
        opacity: 0;
    }
    60% {
        transform: translateY(0px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}
@keyframes bounce-out {
    0% {
        transform: translateY(0px) scale(1);
    }
    100% {
        transform: translateY(-200px) scale(0.6);
        opacity: 0;
    }
}

/* feed tooltip */
.signup-tooltip-outer.feed-tooltip-outer {
    /*top: 20px;*/
    left: calc(50% - 200px);
}

/* wishlist tooltip */

.signup-tooltip-outer.wishlist-tooltip-outer {
    left: calc(50% - 195px);
}
.menubar .signup-tooltip-outer.wishlist-tooltip-outer {
    left: calc(50% - 200px);
}
body:lang(fr) .signup-tooltip-outer.wishlist-tooltip-outer .inner-circle {
    width: 120px;
    height: 120px;
    margin-top: 143px;
}
body:lang(fr) .menubar .signup-tooltip-outer.wishlist-tooltip-outer .inner-circle {
    margin-top: 155px;
}
body:lang(fr) .signup-tooltip-outer.wishlist-tooltip-outer .inner-circle-contents {
    margin-top: -71px;
}
body:lang(fr) .signup-tooltip.wishlist-tooltip .signup-tooltip-inner {
    margin-top: 275px;
}
body:lang(fr) .menubar .signup-tooltip.wishlist-tooltip .signup-tooltip-inner {
    margin-top: 282px;
}
body:lang(ja) .signup-tooltip-outer.wishlist-tooltip-outer .inner-circle {
    width: 120px;
    height: 120px;
    margin-top: 143px;
}
body:lang(ja) .menubar .signup-tooltip-outer.wishlist-tooltip-outer .inner-circle {
    margin-top: 155px;
}
body:lang(ja) .signup-tooltip-outer.wishlist-tooltip-outer .inner-circle-contents {
    margin-top: -71px;
}
body:lang(ja) .signup-tooltip.wishlist-tooltip .signup-tooltip-inner {
    margin-top: 268px;
}
body:lang(ja) .menubar .signup-tooltip.wishlist-tooltip .signup-tooltip-inner {
    margin-top: 282px;
}

/* wishlist button tooltip - tralbum variant */
.signup-tooltip-outer.wishlist-button-tooltip-outer {
    top: -191px;
    left: calc(50% - 200px);
}

.signup-tooltip-parent.show-tooltip .signup-tooltip.wishlist-button-tooltip {
    animation: 0.5s ease 0s 1 normal both follow-bounce-in;
}
.signup-tooltip-parent.show-tooltip.hide-tooltip .signup-tooltip.wishlist-button-tooltip,
.hide-tooltips .signup-tooltip-parent.show-tooltip .signup-tooltip.wishlist-button-tooltip {
    animation: 0.5s ease 0.1s 1 normal both follow-bounce-out;
}
.wishlist-button-tooltip-outer .tralbum-wishlist-link {
    display: block;
}
.wishlist-button-tooltip-outer .collection-wishlist-link {
    display: none;
}

/* wishlist button tooltip - collection variant */
.collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer {
    top: -169px;
}
.collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer .inner-circle {
    width: 108px;
    height: 108px;
    margin: 118px auto 0 auto;
}
.collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer .inner-circle-contents {
    margin: -60px auto 0 auto;
}
.collection-item-actions .signup-tooltip.wishlist-button-tooltip .signup-tooltip-inner {
    margin-top: 239px;
}
.collection-item-actions .wishlist-button-tooltip-outer .tralbum-wishlist-link {
    display: none;
}
.collection-item-actions .wishlist-button-tooltip-outer .collection-wishlist-link {
    display: block;
}
.collection-item-actions .signup-tooltip a.dismiss-tooltip {
    display: inline-block;
}
body:lang(fr) .collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer .inner-circle {
    width: 165px;
    height: 165px;
    margin: 49px auto 0 auto;
    border-radius: 81px;
}
body:lang(fr) .collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer {
    top: -128px;
}
body:lang(fr) .collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer .inner-circle-contents {
    margin: -89px auto 0 auto;
}
body:lang(ja) .collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer .inner-circle {
    width: 190px;
    height: 190px;
    margin: 33px auto 0 auto;
    border-radius: 94px;
}
body:lang(ja) .collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer {
    top: -123px;
}
body:lang(ja) .collection-item-actions .signup-tooltip-outer.wishlist-button-tooltip-outer .inner-circle-contents {
    margin: -102px auto 0 auto;
}

/* search tooltip */
.signup-tooltip-outer.search-tooltip-outer {
    left: auto;
    right: -78px;
}
.menubar .signup-tooltip-outer.search-tooltip-outer {
    left: -77px;
    top: -214px;
}
body:lang(fr) .menubar .signup-tooltip-outer.search-tooltip-outer,
body:lang(ja) .menubar .signup-tooltip-outer.search-tooltip-outer {
    top: -200px;
}
.signup-tooltip-outer.search-tooltip-outer .signup-tooltip-inner {
    margin-top: 232px;
}
.menubar .signup-tooltip-outer.search-tooltip-outer .signup-tooltip-inner {
    margin-top: 255px;
}
body:lang(fr) .menubar .signup-tooltip-outer.search-tooltip-outer .signup-tooltip-inner {
    margin-top: 238px;
}


/* discover tooltip */
.signup-tooltip-outer.discover-tooltip-outer {
    /*top: -191px;*/
}
.menubar .signup-tooltip-outer.discover-tooltip-outer {
    left: calc(50% - 200px);
}
.menubar .signup-tooltip-outer.discover-tooltip-outer .inner-circle {
    margin: 174px auto 0 auto;
}
body:lang(ja) .signup-tooltip-outer.discover-tooltip-outer .signup-tooltip-inner {
    margin-top: 266px;
}
body:lang(ja) .signup-tooltip-outer.discover-tooltip-outer .inner-circle {
    width: 88px;
    height: 88px;
    margin-top: 158px;
}
body:lang(ja) .signup-tooltip-outer.discover-tooltip-outer .inner-circle-contents {
    margin-top: -55px;
}
body:lang(ja) .menubar .signup-tooltip-outer.discover-tooltip-outer .inner-circle-contents {
    margin-top: -53px;
}
body:lang(ja) .menubar .signup-tooltip-outer.discover-tooltip-outer .inner-circle {
    margin-top: 170px;
}


/* follow tooltip */
.signup-tooltip-outer.follow-tooltip-outer {
    left: calc(50% - 200px);
    top: -137px;
}
body:lang(fr) .signup-tooltip-outer.follow-tooltip-outer {
    top: -97px;
}
body:lang(ja) .signup-tooltip-outer.follow-tooltip-outer  {
    top: -79px;
}
.signup-tooltip.follow-tooltip > * {
    margin-top: 175px;
}
body:lang(fr) .signup-tooltip.follow-tooltip > * {
    margin-top: 136px;
}
body:lang(ja) .signup-tooltip.follow-tooltip > * {
    margin-top: 130px;
}

.signup-tooltip-parent #following-actions {
    position: relative;
}
.following-actions-wrapper.signup-tooltip-parent.show-tooltip .follow-unfollow.following,
.following-actions-wrapper.signup-tooltip-parent.show-tooltip .follow-unfollow.following div,
.following-actions-wrapper.signup-tooltip-parent.show-tooltip .invertIconography .follow-unfollow.following,
.following-actions-wrapper.signup-tooltip-parent.show-tooltip .invertIconography .follow-unfollow.following:hover {
    animation: 0.3s linear 0s 1 normal both follow-fade-in;
}
.following-actions-wrapper.signup-tooltip-parent.show-tooltip.hide-tooltip .follow-unfollow.following,
.following-actions-wrapper.signup-tooltip-parent.show-tooltip.hide-tooltip .follow-unfollow.following div,
.following-actions-wrapper.signup-tooltip-parent.show-tooltip.hide-tooltip .invertIconography .follow-unfollow.following,
.following-actions-wrapper.signup-tooltip-parent.show-.hide-tooltip .invertIconography .follow-unfollow.following:hover {
    animation: 0.3s linear 0s 1 normal both follow-fade-out;
}
.signup-tooltip-parent.show-tooltip .signup-tooltip.follow-tooltip {
    animation: 0.5s ease 0s 1 normal both follow-bounce-in;
}
.signup-tooltip-parent.show-tooltip.hide-tooltip .signup-tooltip.follow-tooltip,
.hide-tooltips .signup-tooltip-parent.show-tooltip .signup-tooltip.follow-tooltip {
    animation: 0.5s ease 0.1s 1 normal both follow-bounce-out;
}
.signup-tooltip-parent.show-tooltip #following-actions .dismiss-link.dismiss-tooltip {
    display: block;
    position: absolute;
    z-index: 1;
    width: 120px;
    height: 28px;
}
@keyframes follow-fade-in {
    0% {
        background: #619aa9;
        border-color: #619aa9;
        color: #fff;
        opacity: 1;
    }
    100% {
        background: #fff;
        border-color: #fff;
        color: #619aa9;
    }
}
@keyframes follow-fade-out {
    0% {
        background: #fff;
        border-color: #fff;
        color: #619aa9;
        opacity: 1;
    }
    100% {
        background: #619aa9;
        border-color: #619aa9;
        color: #fff;
    }
}
@keyframes follow-bounce-in {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    60% {
        transform: scale(1.02);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
@keyframes follow-bounce-out {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.6);
        opacity: 0;
    }
}


/* fan follow tooltip - collection variant */
.signup-tooltip-outer.fan-follow-tooltip-outer {
    left: calc(50% - 204px);
    top: -137px;
}
.signup-tooltip.fan-follow-tooltip > * {
    margin-top: 175px;
}
.following-actions.signup-tooltip-parent.show-tooltip .following-button-wrapper {
}
.following-actions.signup-tooltip-parent.show-tooltip .follow-unfollow-inactive {
    position: relative;
    z-index: 2;
    background: none;
    border-color: #FFF;
    color: #FFF;
    margin: 0 auto;
    margin-top: 137px;
    text-align: center;
    display: block;
}
.signup-tooltip-parent.show-tooltip .signup-tooltip.fan-follow-tooltip {
    animation: 0.5s ease 0s 1 normal both follow-bounce-in;
}
.signup-tooltip-parent.show-tooltip.hide-tooltip .signup-tooltip.fan-follow-tooltip,
.hide-tooltips .signup-tooltip-parent.show-tooltip .signup-tooltip.fan-follow-tooltip {
    animation: 0.5s ease 0.1s 1 normal both follow-bounce-out;
}

/* fan follow tooltip - home spotlight variant */
.spotlight .signup-tooltip.fan-follow-tooltip > * {
    margin-top: 148px;
}
.spotlight .signup-tooltip-outer.fan-follow-tooltip-outer {
    left: calc(50% - 200px);
    top: -95px;
}
.spotlight .signup-tooltip-parent.show-tooltip .follow-fan-btn-inactive {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    margin-top: 102px;
    text-align: center;
    display: inline-block;
    background: #FFF;
    color: #333;
    border-color: #333;
}
.spotlight .signup-tooltip-parent.show-tooltip .following-button-wrapper {
    text-align: center;
}

/* header 2018 changes */

.menubar-2018 .menubar-item .signup-tooltip a.dismiss-tooltip:hover,
.has-menubar.invertIconography #menubar.menubar-2018 .signup-tooltip-parent.show-tooltip a:hover {
    color: #FFF;
}
.signup-tooltip-outer.header-2018 {
    top: -176px;
}
.signup-tooltip-outer.feed-tooltip-outer.header-2018 .inner-circle-wrapper {
    width: 80px;
    left: 160px;
}
.signup-tooltip-outer.wishlist-tooltip-outer.header-2018 {
    left: -173px;
}
.signup-tooltip-outer.wishlist-tooltip-outer.header-2018 .inner-circle-wrapper {
    width: 80px;
    left: 160px;
}
.signup-tooltip-outer.search-tooltip-outer.header-2018 {
    left: calc(50% - 200px);
}
.signup-tooltip-outer.search-tooltip-outer.header-2018 .inner-circle-wrapper {
    display: none;
}
.signup-tooltip-outer.search-tooltip-outer.header-2018.alt .inner-circle-wrapper {
    display: inline;
    left: 145px;
    top: -50px;
}
.has-menubar.invertIconography #menubar.menubar-2018 .signup-tooltip-parent.show-tooltip:not(.hide-tooltip) input.search-field {
    background-color: #F3F3F3;
    color: #333;
}
#menubar.menubar-2018 .signup-tooltip-parent.show-tooltip svg.menubar-search-icon {
    stroke: #333333;
}
#menubar.menubar-2018 .signup-tooltip.wishlist-tooltip .signup-tooltip-inner {
    margin-right: 32%;
    width: 38%;
}

/* trackpipe/public/css/corpbanner/corpbanner.css */
/* verify banner */
.corpbanner {
    width: 100%;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    transition: height 0.1s;
    position: relative;
    margin-bottom: -1px;
    z-index: 0;
}
.corpbanner.verify-email {
    background: rgba(248, 115, 84, 1.0);
    color: #FFF;
}
.corpbanner.forget-password {
    background: rgba(248, 115, 84, 1.0);
    color: #FFF;
}
.corpbanner.hide,
.corpbanner.hide.rock-the-vote {
    height: 0;
    display: none;
}
body.has-menubar.has-rock-the-vote-banner {
    background-position: center 130px;
}
.corpbanner .text {
    margin: 16px auto;
    padding: 0 42px;
}
.corpbanner a {
    font-weight: bold;
}
.corpbanner a:hover {
    text-decoration: underline;
}
.corpbanner.verify-email a {
    color: #FFF;
}
.corpbanner.forget-password a {
    color: #FFF;
    text-decoration: underline;
}
.corpbanner .dismiss-banner {
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 15px
}
.corpbanner .dismiss-icon {
    display: block;
    background-size: 50px 512px;
    background-position: -27px -64px;
    height: 12px;
    margin: 0;
    padding: 0;
    width: 12px;
    background-image: url(/img/_sprite-bc-ui-20180124.png);
    opacity: 0.9;
}
.corpbanner.verify-email, 
.corpbanner.forget-password .dismiss-icon {
    background-position: -27px -64px;
}

/* TOS update notice styling */
.corpbanner.tos-update {
    background: #222222; /* var(--gray700) */
    color: #fff; /* var(--white) */
}
.corpbanner.tos-update a {
    color: #fff; /* var(--white) */
    font-weight: normal;
    text-decoration: underline;
}
.corpbanner a:hover {
    text-decoration: underline;
}
.corpbanner.tos-update .dismiss-icon {
    background-position: -27px -52px;
}
body.invertIconography .corpbanner.tos-update,
.p-tralbum-page-container.dark .corpbanner.tos-update {
    background: #f8f8f8; /* var(--gray100) */
    color: #222222; /* var(--gray700) */
}
body.invertIconography .corpbanner.tos-update a,
.p-tralbum-page-container.dark .corpbanner.tos-update a {
    color: #222222; /* var(--gray700) */
}



.bannercontainer .top-banner.corpbanner.inform-act-warning, 
.bannercontainer .top-banner.corpbanner.inform-act-update, 
.bannercontainer .top-banner.corpbanner.inform-act-warning a, 
.bannercontainer .top-banner.corpbanner.inform-act-update a,
.corpbanner.inform-act-warning,
.corpbanner.inform-act-update,
.corpbanner.inform-act-update a,
.corpbanner.inform-act-warning a,

.bannercontainer .top-banner.corpbanner.tax-identity-warning, 
.bannercontainer .top-banner.corpbanner.tax-identity-update, 
.bannercontainer .top-banner.corpbanner.tax-identity-warning a, 
.bannercontainer .top-banner.corpbanner.tax-identity-update a,


.corpbanner.tax-identity-warning,
.corpbanner.tax-identity-update,
.corpbanner.tax-identity-update a,
.corpbanner.tax-identity-warning a {
    background:  #0687F5;
    color:  white;
    border-bottom: none;
    line-height: unset;
    padding: 0;
}

.bannercontainer .top-banner.corpbanner.inform-act-warning, 
.bannercontainer .top-banner.corpbanner.inform-act-warning a, 
.corpbanner.inform-act-warning a,
.corpbanner.inform-act-warning,
.bannercontainer .top-banner.corpbanner.tax-identity-warning, 
.bannercontainer .top-banner.corpbanner.tax-identity-warning a, 
.corpbanner.tax-identity-warning a,
.corpbanner.tax-identity-warning {
    background: #c43329;
}

.bannercontainer .top-banner.corpbanner.blue,
.bannercontainer .top-banner.corpbanner.blue a,
.corpbanner.blue,
.corpbanner.blue a {
    background:  #0687F5;
    color: white;
}
.bannercontainer .top-banner.corpbanner.blue a.banner-close-link,
.corpbanner.blue a.banner-close-link {
    background-position: -24px -80px;
    background-image: url("/img/_sprite-bc-ui-20180124.png");
}



/* removed from fan_signup_common.css and moved here */
.tos-accept-form .tos-accept-embed {
    width: 800px;
    height: 450px;
    border: 0;
    margin: 0;
    display: block; /* eliminates extra space under iframe */
}

.tos-accept-form .tos-accept-controls {
    padding: 10px 10%;
    text-align: center;
    font-size: 16px;
    width: 80%;
    color: black;
    background-color: #f5f5f5;
    border-top: 1px solid #ededed;
}

.tos-accept-form label {
    font-size: 14px;
    color: black;
    margin-right: 25px;
}

.tos-accept-form .tos-accept-agree {
    display: inline-block;
    margin-right: 3px;
}

/* new rules to style terms of use banner and dialog on mobile web */
@media (max-width: 740px) {
    .ui-dialog.terms-of-use {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .ui-dialog.nu-dialog .tos-accept-form .tos-accept-embed {
        width: 95vw;
        height: 76dvh;
        padding-top: 20px;
        box-sizing: border-box;
    }
    .ui-dialog.nu-dialog .tos-accept-form .tos-accept-controls {
        padding: 10px;
        width: auto;
    }
    .ui-dialog.nu-dialog .tos-accept-form .tos-accept-label {
        display: flex;
        align-items: center;
        width: 200px;
        margin: 0 auto 10px;
        text-align: left;
        font-weight: normal;
    }
    .ui-dialog.nu-dialog .tos-accept-form .tos-accept-label input {
        flex: none;
        margin-right: 10px;
    }
    .ui-dialog.nu-dialog .tos-accept-form #tos-accept-accept {
        width: 100%;
        margin: 0;
    }
}

/* Rock the Vote banner styling */
.corpbanner.rock-the-vote {
    background: #FFFFFF;
    color: #000;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px #d2d2d2 solid;
    border-top: 1px #d2d2d2 solid;
}
.corpbanner.rock-the-vote .vote-logo {
    width: 36px;
    max-width: initial;
}
.corpbanner.rock-the-vote .vote-logo-container {
    margin: 19px 10px 0 10px;
    align-self: start;
}
.hd .corpbanner.rock-the-vote .text,
.corpbanner.rock-the-vote .text {
    display: inline-block;
    text-align: left;
    margin: 22px 0;
    padding: 0;
    width: 975px;
    text-align: center;
}
.corpbanner.rock-the-vote .dismiss-banner {
    position: relative;
    margin-top: 30px;
    padding: 0 10px;
    align-self: start;
}
.corpbanner.rock-the-vote .dismiss-icon {
    background-position: -27px -40px;
}
.corpbanner.rock-the-vote a {
    color: #1DA0C3;
}

@media (max-width: 740px) {
    .corpbanner.rock-the-vote {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .corpbanner.rock-the-vote .vote-logo-container {
        order: 1;
        margin: 10px calc(50% - 50px) 10px auto;
    }
    .corpbanner.rock-the-vote .dismiss-banner {
        order: 2;
    }
    .corpbanner.rock-the-vote .text {
        order: 3;
        margin: 0px 23px 23px 23px;
    }
}


/* Fan App Download Banner styling */
.corpbanner.fan-app-download {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    left: 0px;
    bottom: 0px;
    max-height: 14vh;
    z-index: 200;
    background: white;
    font-size: 2.1vh;
}
.corpbanner.fan-app-download .dismiss-banner {
    position: relative;
    padding: 0px;
    margin-left: 4vw;
}
.corpbanner.fan-app-download .dismiss-icon {
    background-position: -27px -40px;
}
.corpbanner.fan-app-download .app-icon-container {
    /* padding: 3vw 1.5vw; */
    height: 100%;
    width: auto;
}
.corpbanner.fan-app-download .app-icon {
    height: 9vh;
    min-width: 9vh;
}
.corpbanner.fan-app-download .text {
    /* padding: 0px; */
    margin: 0px;
    text-align: start;
    width: 100%;
}
.corpbanner.fan-app-download .text .title {
    font-size: 2.7vh;
    font-weight: 500;
    line-height: 4.7vh;
}
.corpbanner.fan-app-download button {
    padding: 0.7vh 2.1vw;
    font-weight: 500;
    background: white;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
    border-radius: 4px;
    margin-right: 2.8vw
}

.corpbanner.fan-app-download > * {
    padding: 3vw 1.5vw;
}

.corpbanner2 {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-bottom: -1px;
    z-index: 0;

    background: #408ea3;
    background: linear-gradient(to right, #6046FE, #30D4BB);
    color: white;
    padding: 14px 15px;
    box-sizing: border-box;

    font-size: 14px;
    line-height: 1.4;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corpbanner2 a {
    font-weight: bold;
    color: white;
}

#fundraiser-countdown-banner {
    background: #007c9e; /* var(--blue500) */
}
body.invertIconography #fundraiser-countdown-banner {
    background: #99dbeb; /* var(--blue300) */
    color: #222222; /* var(--gray700) */
}

#fundraiser-countdown-banner a {
    font-weight: normal;
    text-decoration: underline;
}
body.invertIconography #fundraiser-countdown-banner a {
    color: #222222; /* var(--gray700) */
}

.aggregation-warning {
    width: auto;
}

/* trackpipe/public/css/giftcard/icons.css */

.gift-card-icon-bordered {
    display: inline-block;
    padding: 3.5px 7px;
    background: #1DA0C3;
    fill: #FFF;
    border-radius: 3px;
    vertical-align: middle;
    pointer-events: none;
}

a .gift-card-icon-bordered {
    pointer-events: auto; 
}

.gift-card-icon-bordered.gray {
    background: #c4c4c4;
}

.gift-card-icon-bordered.blue {
    background: #0687f6;
}

.gift-card-icon-bordered.small {
    padding: 2.5px 6px;
    border-radius: 2px;
}

