/* 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: 260px;
}
.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;
   
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}







.widebody /* ПРОЗРАЧНОСТЬ И ЗАКРУГЛЕНИЕ ДЛЯ ВЕРХНЕЙ ШАПКИ (HEADER) */
/* Верхняя шапка - более прозрачная */
#pgHd {
    background: rgba(29, 53, 81, 0.3) !important;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px; /* Отступ между header и основным контентом */
    border: 1px solid rgb(29, 53, 81);  /* Добавленная рамка: толщина 1px, цвет как фон без прозрачности */
}

/* Если нужно чтобы картинка внутри тоже была с закругленными углами */
#customHeaderWrapper img,
#customHeader {
    border-radius: 10px;
}

/* ПРОЗРАЧНОСТЬ ОСНОВНОГО КОНТЕНТА (как у вас уже есть) */
#pgBd {
    background: rgba(29, 53, 81, 0.95) !important;
    border-radius: 10px;
    border: 1px solid rgb(69, 69, 69);  /* Добавленная рамка: толщина 1px, цвет как фон без прозрачности */
}








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

/* МАКСИМАЛЬНО АГРЕССИВНЫЙ OVERLAY */
#imagePopupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1px);  /* Размывает фон под overlay */
    z-index: 2147483647;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
	
    
    /* Flexbox для идеального центрирования */
    display: flex;
    align-items: center;
    justify-content: center;
	
}

#imagePopupOverlay.show {
    opacity: 1;
    visibility: visible;
}

#imagePopupOverlay img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#imagePopupOverlay.show img {
    transform: scale(1);
}

#tralbumArt img {
    cursor: pointer;
}

#tralbumArt {
    border-radius: 0px;  /* Закругление контейнера */
    overflow: hidden;     /* Обрезаем всё что выходит за границы */
}

#tralbumArt img {
    border-radius: 9px;  /* 4px закругление */
    display: block;      /* Убираем лишние отступы */
    /* Можете изменить: 3px, 5px, 8px, 10px и т.д. */
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000;
}

#pgBd {
    background: rgba(59, 59, 66, 0.8) !important;
}

    /* Рамка вокруг обложки альбома (только картинка) */
    #tralbumArt a.popupImage img {
        border: 1px solid rgba(18, 18, 18, ) !important;
        border-radius: 0px !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Убираем лишние рамки с контейнеров */
    #tralbumArt,
    #tralbumArt a.popupImage {
        border: none !important;
    }
	
	







#pgBd {
    background: rgba(59, 59, 66, 0.8) !important;
    position: relative;  /* Для позиционирования кнопки внутри контейнера */
}

/* КНОПКА СКРЫТИЯ КОНТЕНТА */
.hide-content-button {
    position: absolute;  /* Позиционирование внутри контейнера */
    top: 5px;   /* Отступ сверху */
    right: 5px; /* Отступ справа; если перекрывает иконку X, измени на 30px */
    width: 20px; /* Размер */
    height: 20px;
    background: rgba(128, 128, 128, 0.2);  /* Серый фон вместо жёлтого */
    border: 1px solid rgba(128, 128, 128, 0.8);  /* Серый бордер */
    border-radius: 4px;  /* Квадрат с закруглёнными углами 8px */
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
   
}

.hide-content-button:hover {
    background: rgba(128, 128, 128, 0.5);  /* Серый hover фон */
    border-color: rgba(128, 128, 128, 1);  /* Полный серый бордер */
    transform: scale(1.01);
    box-shadow: 0 0 7px rgba(128, 128, 128, 0.8);  /* Усиленный серый shadow */
}

.hide-content-button::before,
.hide-content-button::after {
    content: '';
    position: absolute;
    width: 15px;  /* Здесь ширина линий крестика (сейчас 18px) */
    height: 1px;  /* Здесь толщина линий (сейчас 3px) */
    background: #848383;
    border-radius: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
}

.hide-content-button::before {
    transform: rotate(45deg);
}

.hide-content-button::after {
    transform: rotate(-45deg);
}

.hide-content-button:hover::before,
.hide-content-button:hover::after {
    background: #A9A9A9;  /* Светло-серый для hover вместо белого */
    box-shadow: 0 0 8px rgba(169, 169, 169, 0.8);  /* Светло-серый shadow */
}

.hide-content-button.content-hidden {
    background: rgba(128, 128, 128, 0.2);  /* Более прозрачный серый */
    border-color: rgba(128, 128, 128, 0.6);
    animation: pulse 2s ease-in-out infinite;
}

.hide-content-button.content-hidden::before {
    transform: rotate(0deg);
}

.hide-content-button.content-hidden::after {
    transform: rotate(90deg);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(128, 128, 128, 0.5);
    }
    20% {
        box-shadow: 0 0 30px rgba(128, 128, 128, 0.9);
    }
}

body.content-hidden #pgHd,
body.content-hidden #pgBd,
body.content-hidden #pgFt {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease;
}

#pgHd,
#pgBd,
#pgFt {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.spacer {
  height: 5px;
}

.art.compact {
    overflow: hidden;
}

.art-thumb.thumb-glow {
    width: 120px;
    height: 120px;
    background-color: #4E4E52 !important;
    background-size: cover;
    background-position: center;
    display: inline-block;
}

.thumbthumb {
    width: 120px;
    height: 120px;
    background-color: #4E4E52;
    background-size: cover;
    background-position: center;
    display: block;
}

.trackTitles {
    color: #B19B0B;
}