<br />
<b>Deprecated</b>:  Detection\MobileDetect::__construct(): Implicitly marking parameter $headers as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>832</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::__construct(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>832</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::setHttpHeaders(): Implicitly marking parameter $httpHeaders as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>857</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::setCfHeaders(): Implicitly marking parameter $cfHeaders as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>945</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::setUserAgent(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>995</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::matchDetectionRulesAgainstUA(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1170</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::isMobile(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1222</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::isMobile(): Implicitly marking parameter $httpHeaders as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1222</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::isTablet(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1258</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::isTablet(): Implicitly marking parameter $httpHeaders as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1258</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::is(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1289</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::is(): Implicitly marking parameter $httpHeaders as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1289</b><br />
<br />
<b>Deprecated</b>:  Detection\MobileDetect::match(): Implicitly marking parameter $userAgent as nullable is deprecated, the explicit nullable type must be used instead in <b>/app/vendor/mobiledetect/mobiledetectlib/src/MobileDetect.php</b> on line <b>1318</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/services/User/Services_User_Authentication.php</b> on line <b>79</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_statics.php</b> on line <b>82</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_Abs.php</b> on line <b>90</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_statics.php</b> on line <b>87</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_Abs.php</b> on line <b>70</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_Abs.php</b> on line <b>71</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_Abs.php</b> on line <b>72</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /app/vendor/composer/ClassLoader.php:576) in <b>/app/lib/page/SpotPage_statics.php</b> on line <b>99</b><br />
/*******************************************************************************
 * Tree container
 */
ul.dynatree-container
{
	font-family: tahoma, arial, helvetica;
	font-size: 10pt; /* font size should not be too big */
	white-space: nowrap;
	padding: 3px;
	margin: 0; /* issue 201 */
	background-color: white;
	border: 1px dotted gray;
	overflow: auto;
	height: 100%; /* issue 263 */
}

ul.dynatree-container ul
{
	padding: 0 0 0 16px;
	margin: 0;
}

ul.dynatree-container li
{
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	background-clip: border-box;
	background-origin: padding-box;
	background-attachment: scroll;
	background-color: transparent;
	background-position: 0 0;
	background-repeat: repeat-y;
	background-image: none;  /* no v-lines */

	margin:0;
	padding:1px 0 0 0;
}
/* Suppress lines for last child node */
ul.dynatree-container li.dynatree-lastsib
{
	background-image: none;
}
/* Suppress lines if level is fixed expanded (option minExpandLevel) */
ul.dynatree-no-connector > li
{
	background-image: none;
}

/* Style, when control is disabled */
.ui-dynatree-disabled ul.dynatree-container
{
	opacity: 0.5;
/*	filter: alpha(opacity=50); /* Yields a css warning */
	background-color: silver;
}


/*******************************************************************************
 * Common icon definitions
 */
span.dynatree-empty,
span.dynatree-vline,
span.dynatree-connector,
span.dynatree-expander,
span.dynatree-icon,
span.dynatree-checkbox,
span.dynatree-radio,
span.dynatree-drag-helper-img,
#dynatree-drop-marker
{
	width: 16px;
	height: 16px;
/*	display: -moz-inline-box; /* @ FF 1+2 removed for issue 221*/
/*	-moz-box-align: start; /* issue 221 */
	display: inline-block; /* Required to make a span sizeable */
	vertical-align: top;
	background-repeat: no-repeat;
	background-position: left;
	background-image: URL(js/dynatree/skin-vista/icons.gif);
	background-position: 0 0;
}

/** Used by 'icon' node option: */
ul.dynatree-container img
{
	width: 16px;
	height: 16px;
	margin-left: 3px;
	vertical-align: top;
	border-style: none;
}


/*******************************************************************************
 * Lines and connectors
 */

/*
span.dynatree-empty
{
}
span.dynatree-vline
{
}
*/
span.dynatree-connector
{
	background-image: none;
}
/*
.dynatree-lastsib span.dynatree-connector
{
}
*/
/*******************************************************************************
 * Expander icon
 * Note: IE6 doesn't correctly evaluate multiples class names,
 *		 so we create combined class names that can be used in the CSS.
 *
 * Prefix: dynatree-exp-
 * 1st character: 'e': expanded, 'c': collapsed
 * 2nd character (optional): 'd': lazy (Delayed)
 * 3rd character (optional): 'l': Last sibling
 */

span.dynatree-expander
{
	background-position: 0px -80px;
	cursor: pointer;
}
span.dynatree-expander:hover
{
	background-position: -16px -80px;
}
.dynatree-exp-cl span.dynatree-expander /* Collapsed, not delayed, last sibling */
{
}
.dynatree-exp-cd span.dynatree-expander /* Collapsed, delayed, not last sibling */
{
}
.dynatree-exp-cdl span.dynatree-expander /* Collapsed, delayed, last sibling */
{
}
.dynatree-exp-e span.dynatree-expander,  /* Expanded, not delayed, not last sibling */
.dynatree-exp-ed span.dynatree-expander,  /* Expanded, delayed, not last sibling */
.dynatree-exp-el span.dynatree-expander,  /* Expanded, not delayed, last sibling */
.dynatree-exp-edl span.dynatree-expander  /* Expanded, delayed, last sibling */
{
	background-position: -32px -80px;
}
.dynatree-exp-e span.dynatree-expander:hover,  /* Expanded, not delayed, not last sibling */
.dynatree-exp-ed span.dynatree-expander:hover,  /* Expanded, delayed, not last sibling */
.dynatree-exp-el span.dynatree-expander:hover,  /* Expanded, not delayed, last sibling */
.dynatree-exp-edl span.dynatree-expander:hover  /* Expanded, delayed, last sibling */
{
	background-position: -48px -80px;
}
.dynatree-loading span.dynatree-expander  /* 'Loading' status overrides all others */
{
	background-position: 0 0;
	background-image: URL(js/dynatree/skin-vista/loading.gif);
}


/*******************************************************************************
 * Checkbox icon
 */
span.dynatree-checkbox
{
	margin-left: 3px;
	background-position: 0px -32px;
}
span.dynatree-checkbox:hover
{
	background-position: -16px -32px;
}

.dynatree-partsel span.dynatree-checkbox
{
	background-position: -64px -32px;
}
.dynatree-partsel span.dynatree-checkbox:hover
{
	background-position: -80px -32px;
}

.dynatree-selected span.dynatree-checkbox
{
	background-position: -32px -32px;
}
.dynatree-selected span.dynatree-checkbox:hover
{
	background-position: -48px -32px;
}

/*******************************************************************************
 * Radiobutton icon
 * This is a customization, that may be activated by overriding the 'checkbox'
 * class name as 'dynatree-radio' in the tree options.
 */
span.dynatree-radio
{
	margin-left: 3px;
	background-position: 0px -48px;
}
span.dynatree-radio:hover
{
	background-position: -16px -48px;
}

.dynatree-partsel span.dynatree-radio
{
	background-position: -64px -48px;
}
.dynatree-partsel span.dynatree-radio:hover
{
	background-position: -80px -48px;
}

.dynatree-selected span.dynatree-radio
{
	background-position: -32px -48px;
}
.dynatree-selected span.dynatree-radio:hover
{
	background-position: -48px -48px;
}

/*******************************************************************************
 * Node type icon
 * Note: IE6 doesn't correctly evaluate multiples class names,
 *		 so we create combined class names that can be used in the CSS.
 *
 * Prefix: dynatree-ico-
 * 1st character: 'e': expanded, 'c': collapsed
 * 2nd character (optional): 'f': folder
 */

span.dynatree-icon /* Default icon */
{
	margin-left: 3px;
	background-position: 0px 0px;
}

.dynatree-has-children span.dynatree-icon /* Default icon */
{
/*    background-position: 0px -16px; */
}

.dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
{
	background-position: 0px -16px;
}

.dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
{
	background-position: -64px -16px;
}

/* Status node icons */

.dynatree-statusnode-wait span.dynatree-icon
{
	background-image: URL(js/dynatree/skin-vista/loading.gif);
}

.dynatree-statusnode-error span.dynatree-icon
{
	background-position: 0px -112px;
/*	background-image: URL(js/dynatree/skin-vista/ltError.gif);*/
}

/*******************************************************************************
 * Node titles
 */

/* @Chrome: otherwise hit area of node titles is broken (issue 133)
   Removed again for issue 165; (133 couldn't be reproduced) */
span.dynatree-node
{
/*	display: -moz-inline-box; /* issue 133, 165, 172, 192. removed for issue 221 */
/*	-moz-box-align: start; /* issue 221 */
/*  display: inline-block; /* Required to make a span sizeable */
}


/* Remove blue color and underline from title links */
ul.dynatree-container a
/*, ul.dynatree-container a:visited*/
{
	color: black; /* inherit doesn't work on IE */
	text-decoration: none;
	vertical-align: top;
	margin: 0px;
	margin-left: 3px;
/*	outline: 0; /* @ Firefox, prevent dotted border after click */
	/* Set transparent border to prevent jumping when active node gets a border
	   (we can do this, because this theme doesn't use vertical lines)
	   */
	border: 1px solid white; /* Note: 'transparent' would not work in IE6 */

}

ul.dynatree-container a:hover
{
/*	text-decoration: underline; */
	background: #F2F7FD; /* light blue */
	border-color: #B8D6FB; /* darker light blue */
}

span.dynatree-node a
{
	display: inline-block; /* Better alignment, when title contains <br> */
/*	vertical-align: top;*/
	padding-left: 3px;
	padding-right: 3px; /* Otherwise italic font will be outside bounds */
	/*	line-height: 16px; /* should be the same as img height, in case 16 px */
}
span.dynatree-folder a
{
/*	font-weight: bold; */ /* custom */
}

ul.dynatree-container a:focus,
span.dynatree-focused a:link  /* @IE */
{
	background-color: #EFEBDE; /* gray */
}

span.dynatree-has-children a
{
/*	font-style: oblique; /* custom: */
}

span.dynatree-expanded a
{
}

span.dynatree-selected a
{
/*	color: green; */
	font-style: italic;
}

span.dynatree-active a
{
	border: 1px solid #99DEFD;
	background-color: #D8F0FA;
}

/*******************************************************************************
 * Drag'n'drop support
 */

/*** Helper object ************************************************************/
div.dynatree-drag-helper
{
}
div.dynatree-drag-helper a
{
	border: 1px solid gray;
	background-color: white;
	padding-left: 5px;
	padding-right: 5px;
	opacity: 0.8;
}
span.dynatree-drag-helper-img
{
	/*
	position: relative;
	left: -16px;
	*/
}
div.dynatree-drag-helper /*.dynatree-drop-accept*/
{
/*    border-color: green;
	background-color: red;*/
}
div.dynatree-drop-accept span.dynatree-drag-helper-img
{
	background-position: -32px -112px;
}
div.dynatree-drag-helper.dynatree-drop-reject
{
	border-color: red;
}
div.dynatree-drop-reject span.dynatree-drag-helper-img
{
	background-position: -16px -112px;
}

/*** Drop marker icon *********************************************************/

#dynatree-drop-marker
{
	width: 24px;
	position: absolute;
	background-position: 0 -128px;
	margin: 0;
}
#dynatree-drop-marker.dynatree-drop-after,
#dynatree-drop-marker.dynatree-drop-before
{
	width:64px;
	background-position: 0 -144px;
}
#dynatree-drop-marker.dynatree-drop-copy
{
	background-position: -64px -128px;
}
#dynatree-drop-marker.dynatree-drop-move
{
	background-position: -64px -128px;
}

/*** Source node while dragging ***********************************************/

span.dynatree-drag-source
{
	/* border: 1px dotted gray; */
	background-color: #e0e0e0;
}
span.dynatree-drag-source a
{
	color: gray;
}

/*** Target node while dragging cursor is over it *****************************/

span.dynatree-drop-target
{
	/*border: 1px solid gray;*/
}
span.dynatree-drop-target a
{
}
span.dynatree-drop-target.dynatree-drop-accept a
{
	/*border: 1px solid green;*/
	background-color: #3169C6 !important;
	color: white !important; /* @ IE6 */
	text-decoration: none;
}
span.dynatree-drop-target.dynatree-drop-reject
{
	/*border: 1px solid red;*/
}
span.dynatree-drop-target.dynatree-drop-after a
{
}

/*!
 * jQuery UI CSS Framework 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,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 { transform: scale(1); }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; 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%; }


/*!
 * jQuery UI CSS Framework 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ctl=themeroller&ffDefault=Arial,%20Helvetica,%20sans-serif&fwDefault=normal&fsDefault=11px&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 */


/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff URL(templates/modern/css/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc URL(templates/modern/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 URL(templates/modern/css/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; 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; background: #dadada URL(templates/modern/css/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff URL(templates/modern/css/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee URL(templates/modern/css/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec URL(templates/modern/css/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
.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; font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; background-image: none; }

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

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: URL(templates/modern/css/images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: URL(templates/modern/css/images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: URL(templates/modern/css/images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: URL(templates/modern/css/images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: URL(templates/modern/css/images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: URL(templates/modern/css/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: URL(templates/modern/css/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: URL(templates/modern/css/images/ui-icons_cd0a0a_256x240.png); }

/* 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-off { background-position: -96px -144px; }
.ui-icon-radio-on { 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 { -border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa URL(templates/modern/css/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30; }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa URL(templates/modern/css/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30; -border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*!
 * jQuery UI Resizable 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Resizable#theming
 */
.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;}/*!
 * jQuery UI Selectable 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Selectable#theming
 */
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
/*!
 * jQuery UI Dialog 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog { position: absolute; 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; transform: scale(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; }
/*!
 * jQuery UI Slider 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.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; }/*!
 * jQuery UI Tabs 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tabs#theming
 */
.ui-tabs { position: relative; padding: .2em; transform: scale(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: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; 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-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected 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-tabs .ui-tabs-hide { display: none !important; }
/*!
 * jQuery UI Datepicker 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.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; }

span.spoticon {background-image:URL(templates/modern/css/../img/iconsprite.png); background-repeat: no-repeat; float:left; display:block; width:16px; height:16px; margin:2px 5px 0 5px;}

.spoticon-application {background-position: 0 0;}
.spoticon-bluray {background-position: 0 -16px;}
.spoticon-book {background-position: 0 -32px;}
.spoticon-controller {background-position: 0 -48px;}
.spoticon-custom {background-position: 0 -64px;}
.spoticon-divx {background-position: 0 -80px;}
.spoticon-download {background-position: 0 -96px;}
.spoticon-dvd {background-position: 0 -112px;}
.spoticon-eye {background-position: 0 -128px;}
.spoticon-fav {background-position: 0 -144px;}
.spoticon-female {background-position: 0 -160px;}
.spoticon-film {background-position: 0 -176px;}
.spoticon-hd {background-position: 0 -192px;}
.spoticon-help {background-position: 0 -208px;}
.spoticon-home {background-position: 0 -224px;}
.spoticon-ipod {background-position: 0 -240px;}
.spoticon-linux {background-position: 0 -256px;}
.spoticon-mac {background-position: 0 -272px;}
.spoticon-mpg {background-position: 0 -288px;}
.spoticon-music {background-position: 0 -304px;}
.spoticon-nintendo_ds {background-position: 0 -320px;}
.spoticon-nintendo_wii {background-position: 0 -336px;}
.spoticon-pda {background-position: 0 -352px;}
.spoticon-phone {background-position: 0 -368px;}
.spoticon-picture {background-position: 0 -384px;}
.spoticon-playstation {background-position: 0 -400px;}
.spoticon-refresh {background-position: 0 -416px;}
.spoticon-tag {background-position: 0 -432px;}
.spoticon-today {background-position: 0 -448px;}
.spoticon-tv {background-position: 0 -464px;}
.spoticon-vista {background-position: 0 -480px;}
.spoticon-windows {background-position: 0 -496px;}
.spoticon-wmv {background-position: 0 -512px;}
.spoticon-xbox {background-position: 0 -528px;}
.spoticon-stats {background-position: 0 -544px;}
.spoticon-config {background-position: 0 -560px;}
/* GENERAL */
html {overflow:auto; height:100%;}
body {margin:0;}
body.fixed {padding:25px 0 0 0;}

div.container {position:relative; font:11px Arial, Helvetica, sans-serif;}
div.container.hidden {position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}

.smallGreyButton, .greyButton {font:11px Arial, Helvetica, sans-serif; display:block; background:URL(templates/modern/css/../img/sprite_button.png) no-repeat 0 0; width:210px; margin:0 10px 5px 10px; line-height:20px; height:20px; color:#fff; font-weight:bold; text-align:center; cursor:pointer; border:0;}
.smallGreyButton:focus, .greyButton:focus,
.smallGreyButton:hover, .greyButton:hover {background-position:0 -20px;}
.smallGreyButton { background:URL(templates/modern/css/../img/sprite_button_small.png) no-repeat 0 0; width: 84px;}

input {outline:none;}
div.clear {clear:both;}

/* Option to change color setting of highlighted spots based on comments: eg #09ba09 */
.hg1	{ background-color: #edfeed; }

/* TOOLBAR */
div#toolbar {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -80px; height:25px;}
body.fixed div#toolbar {top:0; left:0; right:0; position:fixed; z-index:3;}

div#toolbar span.scroll {position:absolute; overflow:hidden; top:2px; left:2px; height:18px;background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -105px; border:1px solid #b5b5b5; border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
span.scroll:not(.foo) input#filterscroll {opacity:0; position:absolute; left:0; margin:0; width:19px; height:15px; float:left; cursor:pointer;}
span.scroll:not(.foo) input#filterscroll+label {background:URL(templates/modern/css/../img/sprite.png) no-repeat -40px -96px; width:19px; height:15px; display:block;margin-top:2px;}
span.scroll:not(.foo) input#filterscroll:checked + label {background:URL(templates/modern/css/../img/sprite.png) no-repeat -59px -96px;}

form#filterform {margin:0 0 0 30px; padding:2px 0; width:205px;}
form#filterform div.search {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -105px; border:1px solid #b5b5b5; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; width:203px; float:left;}
form#filterform div.search input.searchbox {font:11px Arial, Helvetica, sans-serif; background:none; border:0; color:#fff; padding:2px 0 2px 4px; width:150px; height:14px; text-shadow:1px 1px #000;}
form#filterform div.search input.filtersubmit {font:11px Arial, Helvetica, sans-serif; background:none; border:0; color:#fff; font-weight:bold; padding:0 3px 0 0; margin:0; cursor:pointer; float:right; min-width:20px; height:18px; display:block;}

div.sidebarPanel {display:none; position:absolute; left:0; top:25px; bottom:0; width:235px; background:#fff; z-index:1;}
body.fixed div.sidebarPanel {position:fixed;}
div.sidebarPanel h4:first-child {border-radius:0; -webkit-border-radius:0; border-radius:0; margin-top:0;}
div.sidebarPanel h4 a,
div.sidebarPanel h4 {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -40px; color:#fff; font-size:11px; line-height:20px; text-align:center; margin:5px 0 0 0; text-shadow:1px 1px #000; border-radius:0 4px 0 0; -webkit-border-radius:0 4px 0 0; border-radius:0 4px 0 0; position:relative; text-decoration: none;}
div.sidebarPanel h4.dropdown {border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0;}
div.sidebarPanel h4.dropdown a {cursor:pointer;}
div.sidebarPanel h4 a.toggle {float:left; font-weight:bold; line-height:18px; padding:0 0 0 3px; cursor:pointer; margin:0;}

form#filterform ul.search {margin:0; padding:0; clear:both; overflow:hidden;}
form#filterform ul.search li {float:left; list-style:none; overflow:hidden; position:relative;}
form#filterform ul.search li:last-child input+label {border-radius:0 0 4px 0; -webkit-border-radius:0 0 4px 0; border-radius:0 0 4px 0;}
form#filterform ul.search li input {opacity:0; position:absolute; width:100%; height:20px; float:left; cursor:pointer;}
form#filterform ul.search li input+label {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 0; width:100%; color:#000; line-height:20px; display:block; text-align:center;}
form#filterform ul.search li input:checked +label {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -20px; color:#fff;}
form#filterform ul.search select {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 0; color:#000; border:none; border-radius:0 0 4px 0; -webkit-border-radius:0 0 4px 0; border-radius:0 0 4px 0; width:100%; height:20px; font:11px Arial, Helvetica, sans-serif; padding:2px 2px 2px 4px; outline:none;}
form#filterform ul.search select option {background-color:#ddd; border-top:1px solid #bbb;}
form#filterform ul.search select option:checked {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -20px;}

form#filterform ul.search.onecol li {width:100%;}
form#filterform ul.search.threecol li {width:33.33%;}
form#filterform ul.search.threecol li:nth-child(n+4) input+label {background-image:none; background-color:#ddd; border-top:1px solid #bbb;}
form#filterform ul.search.threecol li:nth-child(n+4) input:checked +label {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -20px;}
form#filterform ul.search.fourcol li {width:25%;}

form#filterform table.search { border-collapse: collapse; clear:both; width:100%; height:20px; font:11px Arial, Helvetica, sans-serif; padding:2px 2px 2px 4px; outline:none; overflow: hidden; }
form#filterform table.search tr {background-color:#ddd; color:#000; border-top:1px solid #bbb;}
form#filterform table.search tr:last-child  {border-radius:0 0 4px 0; -webkit-border-radius:0 0 4px 0; border-radius:0 0 4px 0;}
form#filterform table.search th {font-weight:bold; text-align:left; padding-left:4px;}
form#filterform table.search td {text-align:left;}
form#filterform table.search td a {color: #bbb;}

form#filterform div#human-filesize,
form#filterform div#human-reportcount {margin:3px 5px 2px 5px; text-align:center;}
form#filterform div#slider-filesize,
form#filterform div#slider-reportcount {margin:0 10px 10px 10px;}
form#filterform a.greyButton.addFilter {margin:10px auto 0 auto;}

ul.dynatree-container {clear:both; min-height:72px; border:0; margin:0; padding:3px; background-color:#ececec; border:1px solid #d4d4d4; border-left:none; border-top:none; }
/* IE9 scrolls, see issue #1047 */
ul.dynatree-container {margin-top: auto; }
ul.dynatree-container a {display:inline-block; font: normal 11px Arial, Helvetica, sans-serif; background:none; line-height:16px; width:auto; border:0;}

div.toolbarButton {float:right;}
div.toolbarButton p {margin:2px 2px 0 0; line-height:18px; color:#fff; padding:0 5px 0 3px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -105px; border:1px solid #b5b5b5; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
/* div.toolbarButton p {margin:2px 2px 0 0; line-height:18px; color:#fff; padding:0 5px 0 3px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -105px; border:1px solid #b5b5b5; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; float:right; position:relative;} */
div.toolbarButton p a {padding:0 0 0 18px; cursor:pointer; display:block; height:16px; line-height:15px; margin:2px 0 0 0;}

div.toolbarButton.config p a {background:URL(templates/modern/css/../img/iconsprite.png) no-repeat 0 -560px;}
div.toolbarButton.addspot p a {background:URL(templates/modern/css/../img/sprite.png) no-repeat -88px -146px;}
div.toolbarButton.logininfo p a {background:URL(templates/modern/css/../img/sprite.png) no-repeat -88px -112px;}

div.toolbarButton.dropdown ul {padding:0; margin:0; position:relative;}
div.toolbarButton.dropdown li {list-style:none; padding:0 0 2px 0;}
div.toolbarButton.dropdown ul ul {display:none; position:absolute; z-index:2; top:22px; background-color:#888888; border-left:1px solid #a6a6a6; border-right:1px solid #a6a6a6; border-bottom:1px solid #a6a6a6; padding:1px 2px 2px 2px;}
div.toolbarButton.dropdown.left ul ul {left:-2px;}
div.toolbarButton.dropdown.right ul ul {right:0;}
div.toolbarButton.dropdown li:hover ul {display:block;}
div.toolbarButton.dropdown li li {border-bottom:1px solid #555555; line-height:20px; padding:0 5px; margin:0 0 2px 0; white-space:nowrap;}
div.toolbarButton.dropdown li li:last-child {margin:0;}
div.toolbarButton.dropdown li li:hover {background-color:#747474;}
div.toolbarButton.dropdown li li a {color:#fff; text-decoration:none; display:block;}

/* PREFERENCES / SETTINGS / USER & GROUP MANAGEMENT */
div.closeeditsettings,
div.closeusermanagement,
div.closeuserpreferences { float: left; }
div.closeeditsettings p,
div.closeusermanagement p,
div.closeuserpreferences p {margin:2px 2px 0 5px; line-height:18px; color:#fff; padding:0 5px 0 3px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -105px; border:1px solid #b5b5b5; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
div.closeeditsettings p a,
div.closeusermanagement p a,
div.closeuserpreferences p a {background:URL(templates/modern/css/../img/sprite.png) no-repeat -88px -164px; font: normal 11px Arial, Helvetica, sans-serif; color:white; padding:0 0 0 18px; cursor:pointer; display:block; height:16px; line-height:15px; margin:2px 0 0 0; text-decoration: none;}
div#usermanagementtabs {margin:5px;}
div#usermanagementtabs th {text-align:left; line-height:17px; padding:1px 5px; font-weight:bold;}
div#usermanagementtabs td {padding:1px 5px;}
div.ui-dialog-content form,
form.editsettingsform,
form.edituserprefsform {padding:5px;}
div.ui-dialog-content fieldset,
form.editsettingsform fieldset,
form.edituserprefsform fieldset {border:none; padding:0; margin:0;}
div.ui-dialog-content fieldset dl,
form.editsettingsform fieldset dl,
form.edituserprefsform fieldset dl {margin:0;}
div.ui-dialog-content dt,
form.editsettingsform fieldset dt,
form.edituserprefsform fieldset dt {padding:0 0 2px 10px; background:URL(templates/modern/css/images/ui-icons_222222_256x240.png) no-repeat -152px -2px; border-bottom:1px solid #000;}
div.ui-dialog-content dt label,
form.editsettingsform fieldset dt label,
form.edituserprefsform fieldset dt label {font-weight:bold;}
div.ui-dialog-content dd,
form.editsettingsform fieldset dd,
form.edituserprefsform fieldset dd {padding:5px 0 5px 0; margin:0 0 0 0;}
form.editsettingsform div.editSettingsButtons,
form.edituserprefsform div.editprefsButtons {padding:0 0 10px 5px;}
form.editsettingsform div.editSettingsButtons input,
form.edituserprefsform div.editprefsButtons input {float:left;}
form.editsettingsform div.editSettingsButtons div.clear,
form.edituserprefsform div.editprefsButtons div.clear {clear:both;}
form.edituserprefsform ul#sortablefilterlist {padding:0;}
form.edituserprefsform fieldset.uploadFilters .greyButton {margin:5px 5px 5px 0;}
form.edituserprefsform fieldset.manageFilters input {float:left; margin:0 20px 20px 0;}

form.editsettingsform div.newsservers fieldset.serverSettings,
form.edituserprefsform div fieldset fieldset.notificationSettings {background-color:#ededed; border:1px solid #aaaaaa; border-radius:4px; padding:5px; margin:5px 0 25px 0;}

form.newspotform  fieldset dt,
form.editspotform  fieldset dt {padding:0 0 0px 0px; background: none; border-bottom: none; }
form.editspotform div.editspotButtons input {float:left;}
form.editspotform div.red { color: red; }

form.editsettingsform span.loading {background:transparent URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%; margin:4px; font-size: 16px; display: none;}
form.editsettingsform span.servertest_nntp_nzb_result_success { color: #00ab00; }
form.editsettingsform span.servertest_nntp_nzb_result_fail { color: #ff0000; }

/* SIDEBAR */
div#filter {width:235px; float:left; left:0; top:0; position:relative;}
body.fixed div#filter {position:fixed; top:25px;}

div.filter a.viewState:first-child h4 {border-radius:0; -webkit-border-radius:0; border-radius:0;}
div.sidebarPanel a.viewState h4,
div.filter a.viewState h4 {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -40px; color:#fff; font-size:11px; line-height:20px; text-align:center; margin:0 0 5px 0; position:relative; overflow:hidden; border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0; text-shadow:1px 1px #000;}
body.spotinfo div.sidebarPanel:not(.advancedSearch) h4:first-child,
body.spotinfo div.filter h4:first-child {border-radius:0 0 4px 0; -webkit-border-radius:0 0 4px 0; border-radius:0 0 4px 0;}

table.sabInfo td {padding:2px 10px 2px 5px;}
table.sabInfo td a {cursor:pointer; text-decoration:underline;}
table.sabInfo td strong.pause {color:#ff0000;}
table.sabInfo td.speedlimit input[name=speedLimit] {font:11px Arial, Helvetica, sans-serif; width:50px; margin:0 5px 0 0;}

table.sabQueue {margin:0 5px; width:225px;}
table.sabQueue td {padding:1px 0 1px 0;}
table.sabQueue tr.title td {padding-top:5px; position:relative;}
table.sabQueue tr.title td strong {float:left;}
table.sabQueue tr.title td span.title {position:absolute; width:178px; padding:0 0 0 5px; overflow:hidden; text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; z-index:3;}
table.sabQueue tr.title td span.title:hover {background:#fff; width:auto; padding:0 2px 0 5px; overflow:visible;}
table.sabQueue tr.title td span.move {float:left; display:table; padding:0 4px 0 0;}
table.sabQueue tr.title td a.up {background:URL(templates/modern/css/../img/sprite.png) no-repeat -81px -103px; width:7px; height:5px; display:block; cursor:pointer;}
table.sabQueue tr.title td a.down {background:URL(templates/modern/css/../img/sprite.png) no-repeat -94px -102px; width:7px; height:5px; display:block; cursor:pointer;}
table.sabQueue tr.title td span.delete {float:left; padding:0 1px 0 0;}
table.sabQueue tr.title td span.delete a {background:URL(templates/modern/css/../img/sprite.png) no-repeat -36px -129px; width:11px; height:13px; display:block; cursor:pointer;}
table.sabQueue tr.progressBar td {padding:0; background-color:#ececec; border:1px solid #D2D2D2;}
table.sabQueue div.progressBar {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -123px; height:4px; border:1px solid #00c01b; margin:-1px;}
table.sabQueue div.progressBar.empty {border:0; height:6px;}
table.sabQueue tr.nav td {padding:5px 0 0 0; text-align:center;}
table.sabQueue tr.nav td a {font-weight:bold; cursor:pointer;}

div.sabnzbdPanel canvas#graph {margin:5px 7px 0 7px;}

/* NOTIFICATIONS */
div.notifications {float:right; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; margin:2px 2px 5px 0; overflow:hidden; display:none; height:18px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -105px; border:1px solid #b5b5b5;}
div.notifications p.multinzb {margin:0 0 0 3px; line-height:18px;}
div.notifications p.multinzb a.clear {float:left; display:block; width:20px; height:18px; line-height:18px; background:none; cursor:pointer; font-size:12px; color:#fff; font-weight:bold;}
div.notifications p.multinzb a.button {cursor:pointer; margin:0 5px 0 0; color:#fff;}

/* VOORKEUREN */
div.testNotification {border: 1px dotted #CCCCCC; padding: 5px; margin-bottom: 10px; line-height:20px;}

/* ZOEKEN */
a.viewState {cursor:pointer;}
h4 span.info,
a.viewState h4 span {position:absolute; display:block; top:3px; right:4px; width:17px; height:14px; line-height:normal; background:#333; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
h4 span.info {cursor:default; font-weight:normal;}
a.viewState h4 span.up {background:#333 URL(templates/modern/css/../img/sprite.png) no-repeat 0 -80px;}
a.viewState h4 span.down {background:#333 URL(templates/modern/css/../img/sprite.png) no-repeat -17px -80px;}

/* QUICKLINKS */
div.filter ul.quicklinks li {margin:0 0 2px 0;}
div.filter ul.quicklinks li a {}
/* Ensure quicklinks stay stacked vertically */
div.filter ul.filterlist.quicklinks {display:block;}
div.filter ul.filterlist.quicklinks li {display:block !important; float:none !important; width:100% !important;}
div.filter ul.filterlist.quicklinks li a {display:block !important; float:none !important; width:100% !important;}

/* FILTERS */
div.filter ul {margin:0 0 5px; padding:0 0 0 5px;}
div.filter ul ul {margin:0 0 0 10px; padding:0;}
div.filter li {list-style:none; margin:0 0 5px 0;}
div.filter li li {margin:2px 0 0;}
div.filter ul a {
	display:block; 
	width:100%;
	background-color:#ececec;
	line-height:20px;
	border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	text-decoration:none;
	color:#000;
	font-weight:bold;
}

div.filter > ul > li.spotcat0 a {background-color:#daecff;}
div.filter > ul > li.spotcat1 a {background-color:#fffad3;}
div.filter > ul > li.spotcat2 a {background-color:#cbffcb;}
div.filter > ul > li.spotcat3 a {background-color:#fedede;}

div.filter a span.newspots {color:#333; margin:0px 3px 0px 5px; padding:0 3px; border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
div.filter li a.selected span.newspots {background-color:#222; color:#fff;}

div.filter li span.toggle {display:block; float:right; width:15px; height:14px; margin:2px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:URL(templates/modern/css/../img/sprite.png) no-repeat -77px -98px;}
div.filter li.spotcat0 span.toggle {background-color:#62aefd; border:1px solid #006cab; color:#006cab;}
div.filter li.spotcat1 span.toggle {background-color:#f2d87c; border:1px solid #cd9f00; color:#cd9f00;}
div.filter li.spotcat2 span.toggle {background-color:#84f484; border:1px solid #00ab00; color:#00ab00;}
div.filter li.spotcat3 span.toggle {background-color:#f99797; border:1px solid #ab1c00; color:#ab1c00;}

div.filter li span.inclusive {display:block; float:right; width:15px; line-height:14px; margin:2px;}
div.filter li.spotcat0 span.inclusive {color:#62aefd;}
div.filter li.spotcat1 span.inclusive {color:#f2d87c;}
div.filter li.spotcat2  span.inclusive {color:#84f484;}
div.filter li.spotcat3 span.inclusive {color:#f99797;}

div.filter li span.newspots,
div.filter a.selected {background-color:#c8c8c8;}
div.filter a.external {background-color:#ececec;}
div.filter li.spotcat0 span.newspots {background-color:#a6d1ff; color:#00456c;}
div.filter > ul > li.spotcat0 a.selected {background-color:#a6d1ff;}
div.filter li.spotcat1 span.newspots {background-color:#f1d872; color:#875b00;}
div.filter > ul > li.spotcat1 a.selected {background-color:#f1d872;}
div.filter li.spotcat2 span.newspots {background-color:#8cef8c; color:#006f00;}
div.filter > ul > li.spotcat2 a.selected {background-color:#8cef8c;}
div.filter li.spotcat3 span.newspots {background-color:#fca9a9; color:#771400;}
div.filter > ul > li.spotcat3 a.selected {background-color:#fca9a9;}

div.filter > ul > li a:hover {background-color:#fff;}
div.filter > ul > li a:hover span.newspots {background-color:#fff; color:#000;}

div.filter a img {border:0; float:left; margin:2px 7px 2px 7px;}

/* MAINTENANCE */
ul.maintenancebox {display:flex; flex-direction:column !important; align-items:stretch !important; width:100% !important; margin:0 !important; padding:0 !important; gap:8px;}
ul.maintenancebox li {display:block !important; flex:0 0 auto !important; float:none !important; width:100% !important; margin:0 !important; padding:0 10px !important; box-sizing:border-box !important; clear:both;}
ul.maintenancebox li a.greyButton {display:block !important; float:none !important; width:100% !important; margin:0 !important; box-sizing:border-box !important;}
ul.maintenancebox li.info {text-align:center; margin:5px 0; height:16px; line-height:16px;}

/* SPOTS */
div.spots {margin:0 0 0 235px; padding:23px 5px 5px 0; min-width:750px;}

table.spots {border-collapse:separate; border-spacing:0 2px; width:100%; margin:-2px 0 0 0;}
table.spots tr.head {position:absolute; top:0; left:235px; right:0; margin:25px 0 0 0; border-spacing:0; z-index:1;}
body.fixed table.spots tr.head {position:fixed;}

table.spots a {color:#000; text-decoration:none; display:block; width:100%; line-height:20px; cursor:pointer;}
table.spots img {border:0;}

table.spots th {text-align:left; color:#fff; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -40px; line-height:20px; height:20px; padding:0 0 0 5px; text-shadow:1px 1px #000;}
table.spots th a {color:#fff; display:inline;}
table.spots th.category {text-align:center; min-width:55px; width:55px; padding:0 2px 0 0;}
table.spots th.title {width:100%;}
table.spots td.watch,
table.spots th.watch {min-width:20px; width:20px;}
table.spots td.comments,
table.spots th.comments {text-align:center; width:34px; min-width:34px; padding:0;}
table.spots td.genre,
table.spots th.genre {min-width:120px; width:120px;}
table.spots td.poster,
table.spots th.poster {min-width:110px; width:110px; overflow:hidden;}
table.spots td.poster a {width:115px;}
table.spots td.date,
table.spots th.date {min-width:140px; width:140px;}
table.spots td.filesize,
table.spots th.filesize {min-width:84px; width:84px; }
table.spots td.filesize {text-align:left;}
table.spots td.nzb,
table.spots th.nzb {min-width:26px; width:26px;}
table.spots td.multinzb,
table.spots th.multinzb {min-width:22px; width:22px; padding:0;}
table.spots th.multinzb input {margin:0 0 0 4px; padding:0; display:block;}
table.spots td.sabnzbd,
table.spots th.sabnzbd {min-width:22px; width:22px; padding:0 0 0 3px;}
table.spots th.sabnzbd a {background:URL(templates/modern/css/../img/sprite.png) no-repeat -70px -111px; display:block; width:16px; height:16px; margin:2px 0 2px 3px;}
table.spots th:last-child {padding-right:5px;}
table.spots th.sabnzbd {padding:0 5px 0 3px;}

table.spots th span.sortby {float:right; display:block; line-height:14px; height:14px; background-color:#333; margin:3px 3px 3px 0; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
table.spots th span.sortby a {width:17px; height:14px; display:block; float:left;}
table.spots th span.sortby a.up {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -80px;}
table.spots th span.sortby a.down {background:URL(templates/modern/css/../img/sprite.png) no-repeat -17px -80px;}

table.spots td {padding:0 0 0 5px;}
table.spots td:nth-child(2) {border-radius:4px 0 0 4px; -webkit-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px;}
table.spots td:last-child {border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0;}

table.spots tr.noresults td {text-align:center; padding:5px 0;}

table.spots tr td.category {color:#fff; font-weight:bold; text-align:center; line-height:20px; width:50px; min-width:50px; padding:0 2px 0 5px; background:none !important; vertical-align:top;}
table.spots tr td.category a {color:#fff;}

table.spots tr td.new {font-weight:bold;}
table.spots tr td span.markSpot {float:right; display:block; background-color:#e33b1a; border:1px solid #ab1c00; color:#fff; padding:0 4px; margin:3px 0 0 0; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-weight:bold; line-height:12px;}
table.spots tr td span.markGreen {float:right; display:block; background-color:#2bb31a; border:1px solid #1cab00; color:#fff; padding:0 4px; margin:3px 0 0 0; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-weight:bold; line-height:12px;}
table.spots tr td span.rating {float:right; display:block; width:47px; height:18px; margin:1px 0 1px 5px; background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -111px;}
table.spots tr td span.rating span {display:block; height:10px; margin:4px 0 0 3px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -127px;}
table.spots tr td span.reportedSpam {display:block; float:right; width:25px; height:16px; background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -143px; margin:2px 2px 0 5px; padding:0 0 0 18px;}
table.spots tr td span.reportedSpam span {display:block; line-height:16px; text-align:center; color:#a40000; font-weight:bold; font-size:11px;}
table.spots tr td span.reportedSpam.grey {background:URL(templates/modern/css/../img/sprite.png) no-repeat -45px -163px;}
table.spots tr td span.reportedSpam.grey span {color:#585858;}
table.spots tr td span.reportedSpam.orange {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -159px;}
table.spots tr td span.reportedSpam.orange span {color:#9e7701;}
table.spots tr td span.reportedSpam.darkorange {background:URL(templates/modern/css/../img/sprite.png) no-repeat -45px -147px;}
table.spots tr td span.reportedSpam.darkorange span {color:#9f4a00;}
table.spots tr td.watch a {display:block; cursor:pointer; background:URL(templates/modern/css/../img/sprite.png) no-repeat -40px -80px; width:16px; height:16px;}
table.spots tr td.watch a.remove {background-position:-56px -80px;}

div.details table.spotheader th.sabnzbd a.sabnzbd-button,
table.spots tr td a.sabnzbd-button {display:block; width:20px; height:17px; cursor:pointer; margin:0 2px 1px 0; background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -94px;}
div.details table.spotheader th.sabnzbd a.sabnzbd-button.loading,
table.spots tr td a.sabnzbd-button.loading {background:URL(templates/modern/css/../img/loading.gif) no-repeat center center; margin:0 2px 1px 0;}
div.details table.spotheader th.sabnzbd a.sabnzbd-button.succes,
table.spots tr td a.sabnzbd-button.succes {background-position:-20px -94px;}
div.details table.spotheader th.sabnzbd a.sabnzbd-button.failure,
table.spots tr td a.sabnzbd-button.failure {background-position:0px -182px;}
div.details table.spotheader th.sabnzbd a.sabnzbd-button.unconfigured,
table.spots tr td a.sabnzbd-button.unconfigured,
table.spots th.sabnzbd a.unconfigured {opacity:.45; filter:grayscale(1);}
div.details table.spotheader th.sabnzbd a.sabnzbd-button.unconfigured:hover,
div.details table.spotheader th.sabnzbd a.sabnzbd-button.unconfigured:focus,
table.spots tr td a.sabnzbd-button.unconfigured:hover,
table.spots tr td a.sabnzbd-button.unconfigured:focus,
table.spots th.sabnzbd a.unconfigured:hover,
table.spots th.sabnzbd a.unconfigured:focus {opacity:.8;}

div.details table.spotheader th.spamreport a.spamreport-button,
table.spots tr td a.spamreport-button {display:block; width:22px; height:18px; cursor:pointer; margin:0 0 1px 0; background:URL(templates/modern/css/../img/sprite.png) no-repeat -55px -129px;}
div.details table.spotheader th.spamreport a.spamreport-button.loading,
table.spots tr td a.spamreport-button.loading {background:URL(templates/modern/css/../img/loading.gif) no-repeat center center; margin:0 0 1px 0;}
div.details table.spotheader th.spamreport a.spamreport-button.success,
table.spots tr td a.spamreport-button.success {background:URL(templates/modern/css/../img/sprite.png) no-repeat -76px -129px;}

table.spots tr.spotcat0 td {background-color:#daecff;}
table.spots tr.spotcat1 td {background-color:#fffad3;}
table.spots tr.spotcat2 td {background-color:#cbffcb;}
table.spots tr.spotcat3 td {background-color:#fedede;}

table.spots tr:hover td {background-color:#fff;}

table.spots tr.spotcat0 td.category a {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 0;}
table.spots tr.spotcat1 td.category a {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -20px;}
table.spots tr.spotcat2 td.category a {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -40px;}
table.spots tr.spotcat3 td.category a {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -60px;}

table.spots tr:hover.spotcat0 td.category a {background-position:-52px 0; color:#008edf;}
table.spots tr:hover.spotcat1 td.category a {background-position:-52px -20px; color:#e9a213;}
table.spots tr:hover.spotcat2 td.category a {background-position:-52px -40px; color:#00de00;}
table.spots tr:hover.spotcat3 td.category a {background-position:-52px -60px; color:#de2500;}

table.spots tr.active td.title a.spotlink:before {content:"> "; display:block; float:left; font-weight:bold; line-height:14px; margin:2px 4px 0 -3px; padding:0 4px 0 4px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
table.spots tr.spotcat0.active td.title a.spotlink:before {background:#62aefd; border:1px solid #006cab; color:#006cab;}
table.spots tr.spotcat1.active td.title a.spotlink:before {background:#f2d87c; border:1px solid #cd9f00; color:#cd9f00;}
table.spots tr.spotcat2.active td.title a.spotlink:before {background:#84f484; border:1px solid #00ab00; color:#00ab00;}
table.spots tr.spotcat3.active td.title a.spotlink:before {background:#f99797; border:1px solid #ab1c00; color:#ab1c00;}

table.spots tr td.spamreports,
table.spots tr td.comments {text-align:center; padding:0; background-image:URL(templates/modern/css/../img/sprite_y.png); background-repeat:repeat-y;}
table.spots tr td.spamreports a,
table.spots tr td.comments a {font-weight:bold; color:#fff;}
table.spots tr:hover td.spamreports a, 
table.spots tr:hover td.comments a {color:#000;}
table.spots tr:hover td.spamreports,
table.spots tr:hover td.comments {background-image:none !important;}
table.spots tr.spotcat0 td.spamreports,
table.spots tr.spotcat0 td.comments {background-position:0 0;}
table.spots tr.spotcat1 td.spamreports,
table.spots tr.spotcat1 td.comments {background-position:-34px 0;}
table.spots tr.spotcat2 td.spamreports,
table.spots tr.spotcat2 td.comments {background-position:-68px 0;}
table.spots tr.spotcat3 td.spamreports,
table.spots tr.spotcat3 td.comments {background-position:-102px 0;}

table.spots a.nzb {font-weight:bold;}
table.spots tr.spotcat0 a.nzb {color:#008edf;}
table.spots tr.spotcat1 a.nzb {color:#e9a213;}
table.spots tr.spotcat2 a.nzb {color:#00de00;}
table.spots tr.spotcat3 a.nzb {color:#de2500;}

table.footer {border-collapse:separate; border-spacing:0; margin:3px 0 5px 5px;}
table.footer tr td.prev,
table.footer tr td.next {background-color:#ececec; height:20px; font-weight:bold; min-width:30px; text-align:center; padding:0; border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0;}
table.footer tr td a {display:block; color:#000; text-decoration:none; line-height:16px;}
table.footer tr td:first-child {border-radius:4px 0 0 4px; -webkit-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px;}
table.footer tr td.button {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -60px; padding:0 3px 0 0; height:20px; width:100%;}

/* SPOT DETAILS */
div.details {font:11px Arial, Helvetica, sans-serif; padding:28px 0 5px 0; min-width:680px;}
div.details.external {padding-top:6px;}

div.details a.postimage {display:block; position:relative; cursor:pointer; float:left;}
div.details a.postimage img {display:block; border:0; margin:0; max-width:260px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
div.details a.postimage img.full {position:absolute; top:0; left:0; z-index:3;}

div.details table.spotdetails {margin:0 0 0 5px; border-collapse:collapse;}
div.details table.spotdetails td {padding:0; vertical-align:top;}
div.details table.spotdetails td.img {padding:2px 0 0 0;}
div.details table.spotdetails td.img a.loading {width:80px; background:URL(templates/modern/css/../img/loading.gif) no-repeat 50% 100%; padding:2px 0 24px 0; text-decoration:none; text-align:center; color:#000;}
div.details table.spotdetails td.img a.loading:before {content: "Loading Image";}
div.details table.spotdetails td.info {width:100%;}

div.details div.warning {background-color:#e33b1a; border:1px solid #ab1c00; color:#fff; line-height:18px; padding:0; text-align:center; vertical-align:top; margin:2px 5px 3px 5px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-weight:bold;}
div.details div.announce {background-color:#2bb31a; border:1px solid #1cab00; color:#fff; line-height:18px; padding:0; text-align:center; vertical-align:top; margin:2px 5px 3px 5px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-weight:bold;}
body.fixed div#overlay table.spotheader {margin-left:235px; top:25px;}
div.details.external table.spotheader,
div.details.noscroll table.spotheader {margin:0 0 0 0;}
div.details table.spotheader {position:fixed; left:0; right:0; top:0; z-index:4; margin:0 16px 0 0; border-collapse:separate; border-spacing:5px 0; padding:5px 0; background:#fff;}
div.details table.spotheader th {border-radius:4px; -webkit-border-radius:4px; border-radius:4px; text-align:left;}
div.details table.spotheader th.category {width:50px; min-width:50px; padding:0; text-align:center; vertical-align:top;}
div.details table.spotheader th.category span {display:block; color:#fff; line-height:20px;}

div.details.spotcat0 table.spotheader th.category span {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 0;}
div.details.spotcat1 table.spotheader th.category span {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -20px;}
div.details.spotcat2 table.spotheader th.category span {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -40px;}
div.details.spotcat3 table.spotheader th.category span {background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -60px;}

div.details.spotcat0 table.spotinfo th,
div.details.spotcat0 div.comments li {background-color:#daecff;}
div.details.spotcat1 table.spotinfo th,
div.details.spotcat1 div.comments li {background-color:#fffad3;}
div.details.spotcat2 table.spotinfo th,
div.details.spotcat3 div.comments li {background-color:#cbffcb;}
div.details.spotcat4 table.spotinfo th,
div.details.spotcat4 div.comments li {background-color:#fedede;}

div.details.spotcat0 div.comments li span.user {color:#008edf;}
div.details.spotcat1 div.comments li span.user {color:#e9a213;}
div.details.spotcat2 div.comments li span.user {color:#00de00;}
div.details.spotcat3 div.comments li span.user {color:#de2500;}

div.details table.spotheader th.title {width:100%; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -40px; color:#fff; padding:2px 5px; white-space:nowrap; text-shadow:1px 1px #000;}
div.details table.spotheader th.watch {width:16px; padding:0 0 1px 0;}
div.details table.spotheader th.watch a {display:block; cursor:pointer; background:URL(templates/modern/css/../img/sprite.png) no-repeat -40px -80px; width:16px; height:16px;}
div.details table.spotheader th.watch a.remove {background-position:-56px -80px;}
div.details table.spotheader th.nzb {width:20px; min-width:20px; padding:0;}
div.details table.spotheader th.nzb a.nzb {display:block; width:16px; height:8px; margin:0 auto; background:URL(templates/modern/css/../img/sprite.png) no-repeat -17px -129px; text-decoration:none; padding:0;}
div.details table.spotheader th.nzb a.nzb.downloaded {width:20px; background-position:-48px -113px;}
div.details table.spotheader th.rating span.rating {float:right; display:block; width:47px; height:18px; background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -111px;}
div.details table.spotheader th.rating span.rating span {display:block; height:10px; margin:4px 0 0 3px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -127px;}
div.details table.spotheader th.search {width:20px; min-width:20px; padding:0;}
div.details table.spotheader th.search a {display:inline-block; width:17px; height:12px; float:left; background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -129px; border-right:1px solid #fff;}
div.details table.spotheader th.sabnzbd {width:20px; min-width:20px; padding:1px 0 0 0;}

div.details table.spotinfo {width:100%; border-collapse:separate; border-spacing:5px 2px;}
div.details table.spotinfo th,
div.details table.spotinfo td {border-radius:4px; -webkit-border-radius:4px; border-radius:4px; height:16px; line-height:16px; padding:2px 5px;}
div.details table.spotinfo th {text-align:right; width:165px;}
div.details table.spotinfo td {background-color:#ececec;}
div.details table.spotinfo td.break {background-color:#fff;}
div.details table.spotinfo td.rating.stars {padding:1px 0 0 2px; line-height:12px;}
div.details table.spotinfo td.rating.stars span {cursor:default;}

div.details table.spotinfo a {color:#000; text-decoration:underline;}

div.details table.spotinfo a.delete {background:URL(templates/modern/css/../img/sprite.png) no-repeat -36px -129px; text-decoration: none; width:11px; height:13px; display:inline; cursor:pointer;}
div.details table.spotinfo a.whitelist {background:URL(templates/modern/css/../img/sprite.png) no-repeat -44px -129px; text-decoration: none; width:11px; height:13px; display:inline; cursor:pointer;}

div.details div.description {clear:both; padding:10px 5px 0 5px;}
div.details div.description pre {overflow:hidden; white-space:pre-wrap; margin:10px 10px 0;}

div.details div.comments {padding:10px 5px 0 5px;}
div.details div.comments h4,
div.details div.description h4 {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -40px; font-size:11px; line-height:20px; color:#fff; padding:0 5px; margin:0; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; position:relative; overflow:hidden; text-shadow:1px 1px #000;}

div.details div.comments h4 span {position:absolute; top:3px; right:4px; display:block; line-height:14px; background-color:#333; margin:0; padding:0 5px; font-size:10px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}

div.details div.comments ul {padding:0; margin:0;}
div.details div.comments li {margin:5px 0 0 0; padding:6px 10px; list-style:none; line-height:16px; min-height: 52px; }
div.details div.comments li.nocomments {text-align:center;}

div.details div.comments li.poster span.user {padding:2px 4px; margin:0 2px; color:#fff; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; text-shadow:1px 1px #000000;}
div.details div.comments li.poster span.user:after {content:' (afzender)'; font-size:10px;}
div.details div.comments li img.commentavatar {width:32px; height:32px; float:left; margin:4px 10px 0 0;}
div.details.spotcat0 div.comments li.poster span.user {background-color:#008edf;}
div.details.spotcat1 div.comments li.poster span.user {background-color:#e9a213;}
div.details.spotcat2 div.comments li.poster span.user {background-color:#00de00;}
div.details.spotcat3 div.comments li.poster span.user {background-color:#de2500;}
div.details div.comments li  a.delete {background:URL(templates/modern/css/../img/sprite.png) no-repeat -36px -129px; text-decoration: none; width:11px; height:13px; display:inline; cursor:pointer;}
div.details div.comments li  a.whitelist {background:URL(templates/modern/css/../img/sprite.png) no-repeat -44px -129px; text-decoration: none; width:11px; height:13px; display:inline; cursor:pointer;}

div.details div.comments blockquote {
	border: 1px solid #cecece;
}

div.details div.comments a.spotterid {color:#000;}

div.details.spotcat0 div.comments li.even {background-color:#e6f2ff;}
div.details.spotcat1 div.comments li.even {background-color:#fffce4;}
div.details.spotcat2 div.comments li.even {background-color:#eaffea;}
div.details.spotcat3 div.comments li.even {background-color:#ffeaea;}

div.details div.comments li.firstComment:last-child,
div.details div.comments li:last-child:first-child {border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
div.details div.comments li.firstComment,
div.details div.comments li:first-child {border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;}
div.details div.comments li:last-child {border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px;}
div.details div.comments li span.rating {float:right; display:block; width:47px; height:18px; margin:1px 0 1px 5px; background:URL(templates/modern/css/../img/sprite.png) no-repeat 0 -111px;}
div.details div.comments li span.rating span {display:block; height:10px; margin:4px 0 0 3px; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -127px;}

div.details div.comments li.addComment {text-align:center; padding:0 0 2px 0; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#ececec; min-height: 0; }
div.details div.comments li.addComment a.togglePostComment {position:relative; display:block; cursor:pointer; font-weight:bold; line-height: 18px;}
div.details div.comments li.addComment a.togglePostComment span {display:block; position: absolute; top: 0; right: 0; width: 15px; height: 14px; background: URL(templates/modern/css/../img/sprite.png) no-repeat -90px -98px; margin:3px 3px 0 0;}
div.details div.comments li.addComment a.togglePostComment span.up {background-position: -77px -98px; margin:2px 3px 0 0;}
div.details div.comments li.addComment div {display:none; background-color:#fff; margin:1px 3px 1px 3px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; position:relative;}
div.details div.comments li.addComment div div.loading {background:#fff URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%; opacity:0.75; position:absolute; margin:0;}
div.details form.postcommentform fieldset {padding:0; margin:0; border:0;}
div.details form.postcommentform fieldset dl {margin:0;}
div.details form.postcommentform fieldset dd {margin:0;}
div.details form.postcommentform fieldset textarea {width:204px; font:11px Arial, Helvetica, sans-serif;}
div.details form.postcommentform input.greyButton {display:inline; margin: 2px 0 5px 0;}
div.details form.postcommentform dd.rating {margin:5px 0; height:16px;}
div.details table.spotinfo td.rating span,
div.details form.postcommentform dd.rating span {display:inline-block; width:16px; height:16px; background:URL(templates/modern/css/../img/sprite.png) no-repeat -40px -80px; margin:0 1px 0 1px; cursor:pointer;}
div.details table.spotinfo td.rating span.active,
div.details form.postcommentform dd.rating span.active {background-position:-56px -80px;}

#postReportFormSubmitButton.loading {background:transparent URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%; margin:4px; }

div.details table.spotinfo a.addspotterasfilter,
div.details table.spotinfo a.addtagasfilter {background:URL(templates/modern/css/../img/sprite.png) no-repeat -88px -146px transparent; text-decoration: none; min-width: 16px;  }

/* VERSION CHECK */
div.versioncheck div.warning {background-color:#fffce4; border:1px solid #e9a213; color:#e9a213; line-height:18px; padding:0; text-align:center; vertical-align:top; margin:2px 5px 3px 5px; border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-weight:bold;}
div.versioncheck ul {padding:0; margin:0;}
div.versioncheck li {margin:5px 0 0 0; padding:6px 10px; list-style:none; line-height:16px; min-height: 52px; }

div.versioncheck li span.user {color:#e9a213;}

div.versioncheck li {background-color:#fffad3;}
div.versioncheck li.even {background-color:#fffce4;}

div.versioncheck li:last-child,
div.versioncheck li:last-child:first-child {border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
div.versioncheck li:first-child {border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;}
div.versioncheck li:last-child {border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px;}

/* STATISTIEKEN */
div.statistics {margin:0 0 0 235px; padding:10px 5px 5px 0; min-width:300px; text-align:center;}
div.statistics form select {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 0; position:fixed; top:28px; right:3px; color:#000; border:none; border-radius:0 0 4px 0; -webkit-border-radius:0 0 4px 0; border-radius:0 0 4px 0; width:250px; height:20px; font:11px Arial, Helvetica, sans-serif; padding:2px 2px 2px 4px;}
div.statistics form select option {background-color:#ddd; border-top:1px solid #bbb;}
div.statistics form select option:checked {background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -20px;}

/* WATCHLIST */
div.spots.watchlist table.footer td {border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}

/* OVERLAY */
div.details th.back {width:20px; padding:0;}
a.closeDetails {display:block; background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -60px; width:25px; height:20px; line-height:20px; text-align:center; cursor:pointer; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}

div#overlay {position:absolute; top:0; bottom:0; left:0; right:0; background-color:#fff; z-index:2; display:none; overflow:auto;}
body.fixed div#overlay {top:25px; left:235px;}
div#overlay.loading {position:fixed; background:#fff URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%; opacity:0.75;}
body.fixed div#overlay.loading {top:45px;}
body.spotinfo.fixed div#overlay.loading {top:25px;}
div#overlay.loading.notrans {opacity:1;}

/* LOGIN/LOGOUT SYSTEM */
ul.userInfo {margin:0; padding:0 0 10px 0;}
ul.userInfo li {line-height:20px; list-style:none; padding:0 5px;}
ul.userInfo li.createUser {padding:0;}
div.userPanel a.greyButton {margin:5px 12px 10px 12px;}

div.userPanel span.info {display:block; text-align:center; margin:12px 0 0 0; line-height:16px;}
div.userPanel span.info img {display:block; margin:0 auto;}

ul.formerrors,
ul.forminformation {margin:0; padding:0; list-style:none;}
ul.formerrors li {padding:0 5px; line-height:20px; color:#ff0000;}
ul.forminformation li {padding:0 5px; line-height:20px; color:#00AB00;}
ul.formerrors li:first-child,
ul.forminformation li:first-child {padding-top:2px;}

div.userPanel form fieldset {padding:0 5px 0 5px; margin:0; border:0;}
div.userPanel form dl {margin:0;}
div.userPanel form dt {padding:3px 0 2px 0;}
div.userPanel form dd {margin:0;}

div.userPanel form input[type=password],
div.userPanel form input[type=text] {font:11px Arial, Helvetica, sans-serif; width:220px;}
div.userPanel form input.greyButton {margin:5px 7px 10px 7px;}
div.userpanel form input.withicon {width:200px;}

/* Dynatree - strong not selectbox */
span.strongnotnode-active a,
span.strongnotnode a { background-color: maroon; color: white; }
span.strongnotnode a:hover { background-color: white; color: maroon; }

div.newspotdiv div.loading,
div.editspotdiv div.loading {background:#fff URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%; opacity:0.75; position:absolute; margin:0;}
div.newspotdiv form fieldset,
div.editspotdiv form fieldset {padding:0 5px 0 5px; margin:0; border:0;}
div.newspotdiv form dl,
div.editspotdiv form dl {margin:0;}
div.newspotdiv form dt,
div.editspotdiv form dt {padding:3px 0 2px 0; float: left; width: 80px; clear: left;}
div.newspotdiv form dd,
div.editspotdiv form dd {margin:0; float: left; margin-bottom: 6px; } 

div.newspotdiv form dt#txtsubcata,
div.editspotdiv form dt#txtsubcata  { width: auto; margin-right: 6px; }

div.newspotdiv form div.categorydropdown,
div.editspotdiv form div.categorydropdown,
div.newspotdiv form div.subcategorylistbox,
div.editspotdiv form div.subcategorylistbox { float: left; width: 200px; }
div.newspotdiv form div.subcategorylistbox select,
div.editspotdiv form div.subcategorylistbox select { width: 192px; }

/* jquery UI overrides to better match the modern template styling */
.ui-widget .ui-widget,
.ui-widget input, 
.ui-widget select, 
.ui-widget { font-size: 11px; }

table.ui-widget,
table.ui-widget-content  {
	border-collapse: separate;
	border-spacing:0 0; 
	width:100%; 
	margin:-2px 0 0 0;
	border: 1px solid black;
}

table.ui-widget tr,
table.ui-widget-content  tr {
	line-height: 20px;
} 

tr.ui-widget-header {
	text-align:left; 
	color:#fff; 
	background:URL(templates/modern/css/../img/sprite_x.png) repeat-x 0 -40px; 
	border: none;
	line-height:20px; 
	height:20px; 
	padding:0 0 0 5px; 
	text-shadow:1px 1px #000;
	border-spacing: 0;	
}

   
tr.ui-widget-header a {
	color:#fff; 
	display:inline;
}
.img_box {
	display: block;
	clear: both;
	/* float: left;   */
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	max-width: 350px;
	/* top right bottom left (2021-10-20) */
	margin: 10px 0 10px 0;
}

.img_box:hover {
	max-width: 100%;
}	

/* TipTip CSS - Version 1.2 */

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}

#tiptip_holder.tip_top {
	padding-bottom: 1px;
}

#tiptip_holder.tip_bottom {
	padding-top: 1px;
}

#tiptip_holder.tip_right {
	padding-left: 5px;
}

#tiptip_holder.tip_left {
	padding-right: 1px;
}

#tiptip_content {
	font-size: 11px;
	color: #fff;
	text-shadow: 0 0 2px #000;
	padding: 4px 8px;
	border: 1px solid rgba(255,255,255,0.25);
	background-color: rgb(25,25,25);
	background-color: rgba(25,25,25,0.92);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
	border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 0 3px #555;
	-webkit-box-shadow: 0 0 3px #555;
	box-shadow: 0 0 3px #555;
	font: 11px Arial, Helvetica, sans-serif;
}

#tiptip_content ul {
	list-style: none;
	padding-left: 5px;
}

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #fff;
	border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: rgb(25,25,25);
	border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: rgb(25,25,25);
	border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(25,25,25);
	border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: rgb(25,25,25);
	border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}
/* Modern base theme (light) */

:root {
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-2: #f1f3f5;
  --color-border: #dfe3e8;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-accent: #2563eb;
  --radius: 8px;
}

html { background: var(--color-bg); }
body { color: var(--color-text); font: 14px/1.6 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Toolbar */
div#toolbar {
  height: 30px;

  position: sticky;
  top: 0;
  z-index: 1200;
  background: linear-gradient(180deg, #2b2f36, #21262d);
  border-bottom: 1px solid #161a1e;
  padding-right: 100px;
}

div#toolbar .toolbarButton {
  float: right;
  position: relative;
  z-index: 900;
}

div#toolbar .toolbarButton.dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#toolbar .toolbarButton.dropdown ul > li { list-style: none; padding: 0; position: relative; }

div#toolbar .toolbarButton.dropdown ul ul { display: none; position: absolute; top: 100%; left: 0; z-index: 4000; width: max-content; min-width: 0; padding: 4px 6px; background: rgba(33, 38, 45, 0.96); border: 1px solid rgba(63, 70, 80, 0.9); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
div#toolbar .toolbarButton.dropdown ul li:hover > ul,
div#toolbar .toolbarButton.dropdown ul ul:hover {
  display: block;
}
div#toolbar .toolbarButton.dropdown ul ul li { margin: 0; padding: 0; }
div#toolbar .toolbarButton.dropdown ul ul li a { display: block; padding: 4px 10px; margin: 0; line-height: 1.4; color: #e3e7ef; text-shadow: none; background: none; white-space: nowrap; }
div#toolbar .toolbarButton.dropdown ul ul li a:hover {
  background: rgba(59, 130, 246, 0.18);
}

div#toolbar .toolbarButton p {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  border-radius: 6px;
}
div#toolbar .toolbarButton p,
div#toolbar .toolbarButton p a,
div#toolbar .toolbarButton p span {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 1px rgba(0,0,0,0.55);
}

div#toolbar .toolbarButton.config p,
div#toolbar .toolbarButton.logininfo p,
div#toolbar .toolbarButton.viewmode p,
div#toolbar .toolbarButton.theme p,
div#toolbar .toolbarButton.addspot p {
  width: 110px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div#toolbar .toolbarButton.config p a,
div#toolbar .toolbarButton.logininfo p a,
div#toolbar .toolbarButton.viewmode p a,
div#toolbar .toolbarButton.theme p a,
div#toolbar .toolbarButton.addspot p a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0 6px;
  background: none;
  background-image: none;
  text-decoration: none;
}

div#toolbar .toolbarButton.addspot p,
div#toolbar .toolbarButton.addspot p a {
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  gap: 6px;
}

div#toolbar .toolbarButton.addspot p a {
  background: none;
  background-image: none;
  padding-left: 0;
}

div#toolbar .toolbarButton.addspot p a::before {
  content: "\002B";
  font-weight: 600;
  font-size: 16px;
  color: #22c55e;
}

div#toolbar .toolbarButton.config p a::before,
div#toolbar .toolbarButton.logininfo p a::before {
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
}

div#toolbar .toolbarButton.config p a::before {
  content: "\2699";
}

div#toolbar .toolbarButton.logininfo p a::before {
  content: "\1F464";
}

/* Sidebar */
div#filter { background: var(--color-surface); border-right: none; }
div.filter a.viewState h4 {
  background: var(--sw-strip-gradient);
  color: var(--sw-strip-text);
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
  border-bottom: 1px solid var(--sw-strip-border);
  height: 24px;
  line-height: 24px;
  margin: 0;
  border-radius: 0 6px 6px 0;
}
div.filter a.viewState h4 span { top: 6px; }

/* Buttons */
.greyButton, .smallGreyButton { background: var(--color-accent); border: 0; color: #fff; border-radius: 6px; }

/* Links */
a { color: #0f172a; }

/* Spots table headers */
table.spots tr.head th {
  background: var(--sw-strip-gradient);
  color: var(--sw-strip-text);
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
  border-bottom: 1px solid var(--sw-strip-border);
  height: 25px;
  line-height: 25px;
}
table.spots tr.head th a { color: inherit; }
table.spots tr td { border-color: var(--color-border); }
table.spots tr:hover td { background: var(--color-surface); }

/* Improve text contrast in general */
.cardsGrid, .spotCard, .details, .sidebarPanel, .filterlist { color: var(--color-text); }
.spotCard .title a { color: var(--color-text); font-size: 14.5px; }
.spotCard .meta { color: var(--color-muted); font-size: 12.5px; }

div#toolbar .toolbarButton.viewmode p,
div#toolbar .toolbarButton.theme p {
  border: 1px solid rgba(234, 179, 8, 0.6);
  box-shadow: 0 0 4px rgba(234, 179, 8, 0.35);
  margin: -1px 6px 0 0;
}
div#toolbar .toolbarButton.viewmode { margin-top: -1px; }
div#toolbar .toolbarButton.theme { margin-top: -1px; }
div#toolbar .toolbarButton.viewmode p a,
div#toolbar .toolbarButton.theme p a {
  padding: 0 14px;
}

/* Modern dark theme */

html[data-theme="dark"] {
  --color-bg: #0f1115;
  --color-surface: #14171c;
  --color-surface-2: #1a1f26;
  --color-border: #2b3038;
  --color-text: #eef1f4;
  --color-muted: #c3c9d2;
  --color-accent: #3b82f6;
  --sw-strip-gradient: linear-gradient(180deg, #262b34 0%, #191d22 100%);
  --sw-strip-border: #0d1016;
  --sw-strip-text: #f4f5f7;
}

html[data-theme="dark"] html, html[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }
html[data-theme="dark"] div#toolbar { background: linear-gradient(180deg, #181c22, #12161c); border-bottom: 1px solid #0d1014; }
html[data-theme="dark"] div#toolbar .toolbarButton p { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] div#filter { background: var(--color-surface); border-right: none; }
html[data-theme="dark"] table.spots tr td { background: transparent; border-color: var(--color-border); }
html[data-theme="dark"] table.spots tr:hover td { background: var(--color-surface); }

/* Dark tables: keep text high-contrast and reuse light-mode category colors */
html[data-theme="dark"] table.spots td,
html[data-theme="dark"] table.spots td a,
html[data-theme="dark"] table.spots tr td a.spotlink { color: #ffffff; }
html[data-theme="dark"] table.spots tr:hover td a { color: #ffffff; }

html[data-theme="dark"] table.spots tr.spotcat0 td { background: rgba(37, 99, 235, 0.16); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat1 td { background: rgba(234, 179, 8, 0.18); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat2 td { background: rgba(16, 185, 129, 0.16); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat3 td { background: rgba(239, 68, 68, 0.18); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat4 td { background: rgba(168, 85, 247, 0.17); color: #ffffff; }

html[data-theme="dark"] .ui-icon { filter: brightness(1.4); }


/* Modern filters (hyper-minimal accent panels) */

div.filter {
  --filter-card-bg: rgba(16, 22, 33, 0.68);
  --filter-card-border: rgba(148, 163, 184, 0.18);
  --filter-card-text: rgba(226, 232, 240, 0.94);
  --filter-chip-bg: rgba(96, 165, 250, 0.85);
  --filter-muted: rgba(148, 163, 184, 0.7);
  --filter-backdrop: rgba(6, 9, 15, 0.78);
  background: var(--filter-backdrop);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
  padding: 8px 8px;
}

html[data-theme="light"] div.filter {
  --filter-card-bg: rgba(255, 255, 255, 0.94);
  --filter-card-border: rgba(15, 23, 42, 0.08);
  --filter-card-text: #0f172a;
  --filter-chip-bg: rgba(37, 99, 235, 0.82);
  --filter-muted: #475569;
  --filter-backdrop: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
}

html[data-theme="dark"] div.filter {
  --filter-card-bg: #3b3939;
  --filter-card-border: #514f4f;
  --filter-card-text: #f8fafc;
  --filter-chip-bg: rgba(96, 165, 250, 0.9);
  --filter-muted: #d4d4d8;
  --filter-backdrop: rgba(28, 27, 27, 0.96);
}

div#filter,
div.filter {
  color: var(--filter-card-text, rgba(226, 232, 240, 0.9)) !important;
}

div.filter ul.filterlist li {
  margin: 0;
  --filter-accent: rgba(148, 163, 184, 0.5);
  --filter-accent-soft: rgba(148, 163, 184, 0.15);
}

div.filter ul.filterlist li a.filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 2px 28px 2px 10px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: var(--filter-card-bg) !important;
  border: 1px solid var(--filter-card-border) !important;
  color: var(--filter-card-text) !important;
  text-decoration: none !important;
  font-size: 0.75rem;
  letter-spacing: 0.006em;
  width: 180px;
  box-sizing: border-box;
  box-shadow: inset 4px 0 0 var(--filter-accent, rgba(148, 163, 184, 0.35)),
              0 8px 18px var(--filter-accent-soft, rgba(15, 23, 42, 0.08));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

div.filter ul.filterlist li a.filter::before {
  content: "";
  position: absolute;
  inset: 12% auto 12% 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--filter-accent, rgba(148, 163, 184, 0.6));
  opacity: 0.8;
  pointer-events: none;
}

div.filter ul.filterlist li a.filter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--filter-accent-soft, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

div.filter ul.filterlist li a.filter:hover,
div.filter ul.filterlist li a.filter:focus-visible {
  transform: translateX(1px);
  border-color: var(--filter-accent, rgba(148, 163, 184, 0.6)) !important;
}

div.filter ul.filterlist li a.filter:hover::after,
div.filter ul.filterlist li a.filter.selected::after {
  opacity: 0.35;
}

div.filter ul.filterlist li a.filter.selected {
  box-shadow: inset 4px 0 0 var(--filter-accent, rgba(148, 163, 184, 0.45)),
              0 10px 22px var(--filter-accent-soft, rgba(15, 23, 42, 0.12));
}

div.filter ul.filterlist li a.filter .newspots {
  background: var(--filter-chip-bg) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 500;
  font-size: 0.72rem;
  margin-left: 8px;
  order: 98;
}

div.filter ul.filterlist li {
  position: relative;
}

div.filter ul.filterlist li span.toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  margin: 0;
  width: 20px !important;
  height: 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}

div#filter h4 {
  color: var(--filter-card-text) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important;
  border-radius: 10px;
  border: 1px solid var(--filter-card-border) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-bottom: 8px;
}

div#filter ul li {
  color: inherit !important;
}

div#filter *,
div.filter * {
  color: inherit !important;
  text-shadow: none !important;
}

div#filter a,
div#filter ul li a,
div#filter li a,
div.filter a,
.filter a {
  color: inherit !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

div#filter a:hover,
div#filter ul li a:hover,
div.filter a:hover,
.filter a:hover {
  color: var(--accent-color, #93c5fd) !important;
  background-color: rgba(125, 211, 252, 0.06) !important;
  text-decoration: none !important;
}

div.filter li,
div#filter li,
div#filter span,
div.filter span {
  color: inherit !important;
  font-weight: 500 !important;
}

div#filter .count,
div.filter .count,
div#filter small,
div.filter small {
  color: rgba(226, 232, 240, 0.85) !important;
  font-weight: 500 !important;
}

div#filter img,
div.filter img,
div#filter .icon,
div.filter .icon,
div#filter input,
div.filter input {
  filter: brightness(1.3) contrast(1.2) !important;
  opacity: 1 !important;
}

div#filter .toggle,
div.filter .toggle,
div#filter .edit,
div.filter .edit {
  background: rgba(248, 250, 252, 0.08) !important;
  color: inherit !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  filter: none !important;
  border-radius: 6px !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Accent palette per category */
div.filter ul.filterlist li[class*="spotcat0"],
div.filter ul.subfilterlist li[class*="spotcat0"] {
  --filter-accent: #7db4ff;
  --filter-accent-soft: rgba(125, 180, 255, 0.16);
}

div.filter ul.filterlist li[class*="spotcat1"],
div.filter ul.subfilterlist li[class*="spotcat1"] {
  --filter-accent: #f4c152;
  --filter-accent-soft: rgba(244, 193, 82, 0.18);
}

div.filter ul.filterlist li[class*="spotcat2"],
div.filter ul.subfilterlist li[class*="spotcat2"] {
  --filter-accent: #4dd4b0;
  --filter-accent-soft: rgba(77, 212, 176, 0.18);
}

div.filter ul.filterlist li[class*="spotcat3"],
div.filter ul.subfilterlist li[class*="spotcat3"] {
  --filter-accent: #ff8a8a;
  --filter-accent-soft: rgba(255, 138, 138, 0.18);
}

div.filter ul.filterlist li[class*="spotcat4"],
div.filter ul.subfilterlist li[class*="spotcat4"] {
  --filter-accent: #f472b6;
  --filter-accent-soft: rgba(244, 114, 182, 0.2);
}

div.filter ul.filterlist li[class*="spotcat5"],
div.filter ul.subfilterlist li[class*="spotcat5"] {
  --filter-accent: #7dd3fc;
  --filter-accent-soft: rgba(125, 211, 252, 0.18);
}

div.filter ul.subfilterlist {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--filter-accent, rgba(148, 163, 184, 0.4));
  list-style: none;
}

div.filter ul.subfilterlist li {
  margin: 3px 0;
}

div.filter ul.subfilterlist li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 10px 4px 14px;
  border-radius: 8px;
  background: var(--filter-card-bg) !important;
  border: 1px solid var(--filter-card-border) !important;
  color: var(--filter-card-text) !important;
  text-decoration: none !important;
  font-size: 0.78rem;
  position: relative;
  box-shadow: inset 3px 0 0 var(--filter-accent, rgba(148, 163, 184, 0.4)),
              0 4px 10px var(--filter-accent-soft, rgba(15, 23, 42, 0.07));
  transition: transform 0.2s ease, border-color 0.2s ease;
}

div.filter ul.subfilterlist li a:hover,
div.filter ul.subfilterlist li a:focus-visible {
  transform: translateX(1px);
  border-color: var(--filter-accent, rgba(148, 163, 184, 0.5)) !important;
}

/* Quicklinks & maintenance states */
div.filter ul.filterlist.quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2px 0 4px;
}

div.filter ul.filterlist.quicklinks li {
  margin: 0;
}

div.filter ul.filterlist.quicklinks li a.filter {
  width: 100%;
  padding: 2px 10px;
  border-radius: 6px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--filter-muted) !important;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  justify-content: flex-start;
  gap: 6px;
  box-shadow: none !important;
}

div.filter ul.filterlist.quicklinks li a.filter:hover,
div.filter ul.filterlist.quicklinks li a.filter:focus-visible,
div.filter ul.filterlist.quicklinks li a.filter.selected {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--filter-card-text) !important;
}

div.filter ul.filterlist.quicklinks li a.filter::before,
div.filter ul.filterlist.quicklinks li a.filter::after {
  content: none !important;
}

div.filter ul.filterlist.quicklinks li a.filter .newspots {
  display: none;
}

div.filter ul.filterlist.maintenancebox {
  display: flex;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  gap: 8px;
}

div.filter ul.filterlist.maintenancebox li {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  clear: both;
  padding: 0 8px !important;
  box-sizing: border-box !important;
}

div.filter ul.filterlist.maintenancebox li:last-child {
  margin-bottom: 0;
}

div.filter ul.filterlist.maintenancebox li a.greyButton {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  float: none !important;
  background: var(--color-accent);
  background-image: none;
  color: #fff;
  border: 0;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
  opacity: 1;
}

div.filter ul.filterlist.maintenancebox li a.greyButton:hover,
div.filter ul.filterlist.maintenancebox li a.greyButton:focus-visible {
  background: #1d4ed8;
  color: #fff;
}

div.filter ul.filterlist.maintenancebox li.info {
  display: block;
  width: 100%;
  height: auto;
  min-height: 16px;
  line-height: 1.45;
  margin: 6px 0 10px;
  padding: 0 10px;
  text-align: center;
  color: var(--filter-card-text);
  box-sizing: border-box;
}

/* Erotica accent helpers */
div.filter ul.filterlist li.spotcat4,
div.filter ul.filterlist li[class*="spotcat4"],
div.filter ul.subfilterlist li[class*="spotcat4"] {
  --filter-accent: #f472b6;
  --filter-accent-soft: rgba(244, 114, 182, 0.22);
}

div.filter ul.subfilterlist li.spotcat0:has(.spoticon-female),
div.filter ul.subfilterlist li:has(.spoticon-female),
div.filter ul.subfilterlist li a[href*="hetero"],
div.filter ul.subfilterlist li a[href*="gay"],
div.filter ul.subfilterlist li a[href*="bi"] {
  --filter-accent: #f472b6;
  --filter-accent-soft: rgba(244, 114, 182, 0.28);
}

[data-theme="dark"] span.spoticon,
[data-theme="dark"] div.filter span.spoticon,
[data-theme="dark"] ul.filterlist span.spoticon {
  filter: invert(1) brightness(0.8) !important;
}

[data-theme="light"] span.spoticon,
[data-theme="light"] div.filter span.spoticon,
[data-theme="light"] ul.filterlist span.spoticon {
  filter: none !important;
}

/* Advanced search overlay (solid background) */
div.sidebarPanel.advancedSearch {
  position: absolute;
  top: calc(var(--sw-toolbar-offset, 42px) + 6px);
  bottom: 6px;
  left: 0;
  right: 0;
  background: #ffffff !important;
  border: 1px solid rgba(209, 213, 219, 0.9) !important;
  border-radius: 10px;
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.20);
  padding: 10px 12px;
  z-index: 320;
  overflow-y: auto;
  min-height: calc(100vh - var(--sw-toolbar-offset, 42px) - 12px);
}

body.fixed div#filter .sidebarPanel.advancedSearch {
  position: fixed;
  left: 0;
  right: auto;
}

div.sidebarPanel.advancedSearch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: inherit;
  z-index: -1;
}

div.sidebarPanel.advancedSearch > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch,
html[data-theme="dark"] div.sidebarPanel.advancedSearch::before {
  background: #03050a !important;
  border-color: rgba(15, 23, 42, 0.65) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,0.75);
}
div.sidebarPanel.advancedSearch h4,
div.sidebarPanel.advancedSearch h4 a {
  background: #f4f5f7 !important;
  border: 1px solid rgba(209, 213, 219, 0.9) !important;
  color: var(--color-text) !important;
  text-shadow: none !important;
}

div.sidebarPanel.advancedSearch div.search,
div.sidebarPanel.advancedSearch ul.search li input+label,
div.sidebarPanel.advancedSearch ul.search select,
div.sidebarPanel.advancedSearch table.search tr,
div.sidebarPanel.advancedSearch table.search th,
div.sidebarPanel.advancedSearch table.search td,
div.sidebarPanel.advancedSearch ul.dynatree-container,
div.sidebarPanel.advancedSearch .ui-slider,
div.sidebarPanel.advancedSearch .ui-slider-range,
div.sidebarPanel.advancedSearch a.greyButton.addFilter {
  background: #f9fafb !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: var(--color-text) !important;
  text-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

div.sidebarPanel.advancedSearch ul.dynatree-container a,
div.sidebarPanel.advancedSearch ul.dynatree-container span {
  color: #111827 !important;
}

div.sidebarPanel.advancedSearch select {
  background: #0f1622 !important;
  border: 1px solid rgba(15, 23, 42, 0.6) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  appearance: none;
}

div.sidebarPanel.advancedSearch select option {
  background: #0b1120 !important;
  color: #f8fafc !important;
}

div.sidebarPanel.advancedSearch ul.search li input:checked + label,
div.sidebarPanel.advancedSearch ul.search li input:focus + label,
div.sidebarPanel.advancedSearch ul.search li input:hover + label {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

div.sidebarPanel.advancedSearch div.search input.searchbox {
  color: var(--color-text);
}

div.sidebarPanel.advancedSearch a.greyButton.addFilter {
  color: #fff !important;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55);
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch h4,
html[data-theme="dark"] div.sidebarPanel.advancedSearch h4 a,
html[data-theme="dark"] div.sidebarPanel.advancedSearch div.search,
html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.search li input+label,
html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.search select,
html[data-theme="dark"] div.sidebarPanel.advancedSearch table.search tr,
html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.dynatree-container,
html[data-theme="dark"] div.sidebarPanel.advancedSearch .ui-slider {
  background: rgba(4, 6, 10, 0.95) !important;
  border-color: rgba(8, 13, 22, 0.9) !important;
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.dynatree-container a,
html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.dynatree-container span {
  color: #f8fafc !important;
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.search li input:checked + label,
html[data-theme="dark"] div.sidebarPanel.advancedSearch ul.search li input:hover + label {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch select {
  background: rgba(4, 6, 10, 0.85) !important;
  border-color: rgba(8, 13, 22, 0.78) !important;
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch select option {
  background: rgba(3, 5, 10, 0.95) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] div.sidebarPanel.advancedSearch a.greyButton.addFilter {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* We1rdo-like filters (match classic layout) */
div#filter,
div.filter {
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

div#filter ul,
div.filter ul {
  margin: 0 0 5px !important;
  padding: 0 0 0 5px !important;
}

div#filter ul ul,
div.filter ul ul {
  margin: 0 0 0 10px !important;
  padding: 0 !important;
}

div#filter li,
div.filter li {
  list-style: none !important;
  margin: 0 0 5px 0 !important;
}

div#filter li li,
div.filter li li {
  margin: 2px 0 0 !important;
}

div#filter ul.filterlist li a.filter,
div#filter ul.subfilterlist li a,
div#filter ul.filterlist.quicklinks li a.filter,
div.filter ul.filterlist li a.filter,
div.filter ul.subfilterlist li a,
div.filter ul.filterlist.quicklinks li a.filter {
  display: block !important;
  width: 100% !important;
  background-color: #ececec !important;
  line-height: 20px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: #000 !important;
  font-weight: bold !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

div#filter > ul > li.spotcat0 a,
div.filter > ul > li.spotcat0 a { background-color: #daecff !important; }
div#filter > ul > li.spotcat1 a,
div.filter > ul > li.spotcat1 a { background-color: #fffad3 !important; }
div#filter > ul > li.spotcat2 a,
div.filter > ul > li.spotcat2 a { background-color: #cbffcb !important; }
div#filter > ul > li.spotcat3 a,
div.filter > ul > li.spotcat3 a { background-color: #fedede !important; }

div#filter a span.newspots,
div.filter a span.newspots {
  color: #333 !important;
  margin: 0 3px 0 5px !important;
  padding: 0 3px !important;
  border-radius: 2px !important;
  background: transparent !important;
}

div#filter li a.selected span.newspots,
div.filter li a.selected span.newspots {
  background-color: #222 !important;
  color: #fff !important;
}

div#filter li span.toggle,
div.filter li span.toggle {
  display: block !important;
  float: right !important;
  width: 15px !important;
  height: 14px !important;
  margin: 2px !important;
  border-radius: 4px !important;
  background: URL(templates/modern/css/../img/sprite.png) no-repeat -77px -98px !important;
  border: none !important;
}

div#filter li span.inclusive,
div.filter li span.inclusive {
  display: block !important;
  float: right !important;
  width: 15px !important;
  line-height: 14px !important;
  margin: 2px !important;
}

div#filter li.spotcat0 span.toggle,
div.filter li.spotcat0 span.toggle { background-color: #62aefd !important; border: 1px solid #006cab !important; color: #006cab !important; }
div#filter li.spotcat1 span.toggle,
div.filter li.spotcat1 span.toggle { background-color: #f2d87c !important; border: 1px solid #cd9f00 !important; color: #cd9f00 !important; }
div#filter li.spotcat2 span.toggle,
div.filter li.spotcat2 span.toggle { background-color: #84f484 !important; border: 1px solid #00ab00 !important; color: #00ab00 !important; }
div#filter li.spotcat3 span.toggle,
div.filter li.spotcat3 span.toggle { background-color: #f99797 !important; border: 1px solid #ab1c00 !important; color: #ab1c00 !important; }

html[data-theme="dark"] div#filter ul.filterlist li a.filter,
html[data-theme="dark"] div#filter ul.subfilterlist li a,
html[data-theme="dark"] div#filter ul.filterlist.quicklinks li a.filter,
html[data-theme="dark"] div.filter ul.filterlist li a.filter,
html[data-theme="dark"] div.filter ul.subfilterlist li a,
html[data-theme="dark"] div.filter ul.filterlist.quicklinks li a.filter {
  background-color: #3b3939 !important;
  border: 1px solid #514f4f !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] div#filter > ul > li.spotcat0 > a,
html[data-theme="dark"] div.filter > ul > li.spotcat0 > a {
  background-color: #3b3939 !important;
  border-color: #2563eb !important;
  color: #eff6ff !important;
}

html[data-theme="dark"] div#filter > ul > li.spotcat1 > a,
html[data-theme="dark"] div.filter > ul > li.spotcat1 > a {
  background-color: #3b3939 !important;
  border-color: #d4a414 !important;
  color: #fef3c7 !important;
}

html[data-theme="dark"] div#filter > ul > li.spotcat2 > a,
html[data-theme="dark"] div.filter > ul > li.spotcat2 > a {
  background-color: #3b3939 !important;
  border-color: #10b981 !important;
  color: #d1fae5 !important;
}

html[data-theme="dark"] div#filter > ul > li.spotcat3 > a,
html[data-theme="dark"] div.filter > ul > li.spotcat3 > a {
  background-color: #3b3939 !important;
  border-color: #ef4444 !important;
  color: #fee2e2 !important;
}

html[data-theme="dark"] div#filter a span.newspots,
html[data-theme="dark"] div.filter a span.newspots {
  color: #cbd5e1 !important;
  background: transparent !important;
}

html[data-theme="dark"] div#filter li a.selected span.newspots,
html[data-theme="dark"] div.filter li a.selected span.newspots {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}


/* Modern layout and spacing */

:root {
  --sw-sidebar-w: 210px;
  --sw-gap: 10px;
  --sw-toolbar-offset: 42px;
  --sw-header-offset: var(--sw-toolbar-offset);
  --sw-strip-gradient: linear-gradient(180deg, #5e626a 0%, #3d4046 100%);
  --sw-strip-border: #2a2d33;
  --sw-strip-text: #f9fafb;
}

div#filter {
  width: var(--sw-sidebar-w);
  background: var(--color-surface);
  position: relative;
  top: 0;
  z-index: 40;
}

div#filter .sidebarPanel {
  display: none;
  position: absolute;
  top: calc(var(--sw-toolbar-offset, 42px) + 6px);
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 320;
}

body.fixed div#filter .sidebarPanel {
  position: fixed;
  bottom: 0;
}

body.filters-open div#filter > .filterlist,
body.filters-open div#filter > ul,
body.filters-open div#filter > .viewState,
body.filters-open div#filter > .notifications,
body.filters-open div#filter > .maintenancebox {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.filters-open div#filter {
  position: relative;
}

body.filters-open div#filter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  z-index: 300;
  pointer-events: none;
  border-radius: 12px;
}

html[data-theme="dark"] body.filters-open div#filter::after {
  background: rgba(5, 7, 12, 0.98);
}
div.spots {
  margin-left: calc(var(--sw-sidebar-w) + var(--sw-gap));
  padding: 0 10px 12px;
}

table.spots {
  position: relative;
  width: 100%;
  margin: 0;
}

table.spots tr.head {
  position: sticky;
  top: var(--sw-toolbar-offset);
  margin: 0;
  z-index: 0;
  background: var(--sw-strip-gradient);
  border-bottom: 1px solid var(--sw-strip-border);
}


body.fixed #filter {
  position: sticky;
  top: var(--sw-toolbar-offset);
}
body.fixed table.spots tr.head {
  top: var(--sw-toolbar-offset);
  left: calc(var(--sw-sidebar-w) + var(--sw-gap));
  right: 10px;
  margin: 0;
  z-index: 0;
}


body.spotinfo div#filter,
body.spotinfo div.sidebarPanel,
body.spotinfo-page div#filter,
body.spotinfo-page div.sidebarPanel,
body.fixed.spotinfo-page div#filter,
body.fixed.spotinfo-page div.sidebarPanel {
  display: none !important;
}

body.spotinfo div.spots,
body.spotinfo-page div.spots,
body.fixed.spotinfo-page div.spots {
  margin-left: 0;
  padding: 0 18px 18px;
}

body.spotinfo div.spots > *:not(.details),
body.spotinfo-page div.spots > *:not(.details),
body.fixed.spotinfo-page div.spots > *:not(.details) {
  display: none !important;
}

body.spotinfo div.details,
body.spotinfo-page div.details,
body.fixed.spotinfo-page div.details {
  margin-left: 0;
}

body.spotinfo table.spots,
body.spotinfo-page table.spots,
body.fixed.spotinfo-page table.spots {
  display: none !important;
}

body.spotinfo .container,
body.spotinfo-page .container,
body.fixed.spotinfo-page .container {
  margin-left: 0;
}

body.spotinfo-page #spots,
body.fixed.spotinfo-page #spots {
  display: none !important;
}

/* Cards view for modern theme */

.cardsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

.spotCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spotCard.new {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}

.spotCard .thumb img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; }

.spotCard .topRow { display: flex; align-items: flex-start; gap: 8px; }
.spotCard .badge { font-weight: bold; font-size: 11px; padding: 2px 6px; border-radius: 6px; color: #fff; }
.spotCard.spotcat0 .badge { background: #3b82f6; }
.spotCard.spotcat1 .badge { background: #f59e0b; }
.spotCard.spotcat2 .badge { background: #22c55e; }
.spotCard.spotcat3 .badge { background: #ef4444; }

.spotCard .title {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.15em;
}

.spotCard .title a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 12.5px;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 2.5em;
}
.spotCard .title a:hover { text-decoration: underline; }

.spotCard .meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--color-muted); font-size: 11.5px; }
.spotCard .meta a { color: var(--color-text); text-decoration: none; }
.spotCard .meta span { display: inline-flex; align-items: center; gap: 4px; }

.spotCard .actions { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.spotCard .actions a.nzb { background: var(--color-accent); color: #fff; border-radius: 6px; padding: 4px 8px; text-decoration: none; font-weight: 600; }
.spotCard .actions a.nzb.downloaded { opacity: 0.75; }
.spotCard .actions a.sabnzbd-button { display: inline-block; width: 20px; height: 17px; cursor: pointer; margin: 0 2px 1px 0; background: URL(templates/modern/css/../img/sprite.png) no-repeat 0 -94px; }
.spotCard .actions a.sabnzbd-button.loading { background: URL(templates/modern/css/../img/loading.gif) no-repeat center center; }
.spotCard .actions a.sabnzbd-button.succes { background-position: -20px -94px; }
.spotCard .actions a.sabnzbd-button.failure { background-position: 0 -182px; }
.spotCard .actions a.sabnzbd-button.unconfigured { opacity: 0.5; filter: grayscale(1); }
.spotCard .actions a.sabnzbd-button.unconfigured:hover,
.spotCard .actions a.sabnzbd-button.unconfigured:focus { opacity: 0.85; }

.spotCard .footerRow { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.spotCard .comments { font-weight: 700; color: var(--color-accent); text-decoration: none; }
.spotCard .comments:hover { text-decoration: underline; }
.spotCard .watch { display: inline-flex; align-items: center; gap: 6px; }
.spotCard .watch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.spotCard .watch a.add { color: #f87171; }
.spotCard .watch a.add:hover { color: #fbbf24; }
.spotCard .watch a.remove { color: #fbbf24; }
.spotCard .watch a.remove:hover { color: #f59e0b; }
.spotCard .multi { display: inline-flex; align-items: center; gap: 6px; }

.cardsNotice {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #a57900;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 16px 0;
}

.cardsEmptyState {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px;
  max-width: 720px;
}

.cardsEmptyState h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.cardsEmptyState p {
  margin: 0;
  color: var(--color-muted);
  max-width: 62ch;
}

.cardsEmptyState .emptyActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Cards pager */
.cardsPager { display:flex; justify-content:center; gap:12px; margin:16px 0; }
.cardsPager a { display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-text); text-decoration:none; font-weight:600; transition:background 0.2s ease, color 0.2s ease, border 0.2s ease; }
.cardsPager a:hover { background:var(--color-surface); border-color:var(--color-accent); }
.cardsPager a:focus { outline:none; box-shadow:0 0 0 2px rgba(37,99,235,0.2); }
/* Dark hover */
html[data-theme="dark"] .spotCard:hover { background: var(--color-surface-2); }

/* Density adjustments */
html[data-density="compact"] .cardsGrid { gap: 8px; }
html[data-density="compact"] .spotCard { padding: 8px; gap: 6px; }
html[data-density="compact"] .spotCard .thumb img { height: 80px; }
html[data-density="compact"] .spotCard .title { min-height: 3em; }
html[data-density="compact"] .spotCard .meta { font-size: 11px; gap: 6px; }
html[data-density="compact"] .spotCard .actions a.nzb { padding: 3px 6px; font-size: 12px; }


/* Modern detail (spot page) overrides */

/* Top header strip */
div.details table.spotheader { position: sticky; top: var(--sw-header-offset, 25px); z-index: 4; background: var(--color-surface); border-bottom: 1px solid var(--color-border); margin: 0 10px 6px 0; }
div.details table.spotheader th { color: var(--color-text); text-shadow: none; }
div.details table.spotheader th.title { background: var(--color-surface-2); color: var(--color-text); border-radius: 6px; }
a.closeDetails { background: var(--color-surface-2); color: var(--color-text); text-shadow: none; border: 1px solid var(--color-border); }

div.details table.spotheader th.nzb { min-width: 52px; padding: 0 2px; }
div.details table.spotheader th.nzb a.nzb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  background-image: none;
  text-decoration: none;
  text-indent: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
div.details table.spotheader th.nzb a.nzb::before {
  content: 'NZB';
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #0a0a0a;
}
div.details table.spotheader th.nzb a.nzb.downloaded {
  opacity: 0.8;
}
html[data-theme="dark"] div.details table.spotheader th.nzb a.nzb {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
html[data-theme="dark"] div.details table.spotheader th.nzb a.nzb::before {
  color: #f8fafc;
}

/* Info grid */
div.details table.spotinfo { width: 100%; border-collapse: separate; border-spacing: 6px 4px; }
div.details table.spotinfo th { text-align: right; width: 170px; background: var(--color-surface-2); color: var(--color-text); border-radius: 8px; }
div.details table.spotinfo td { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; line-height: 1.6; }
div.details table.spotinfo td.break { background: var(--color-surface); }

/* Poster image block */
div.details a.postimage img { border-radius: 8px; }
div.details div.spotimage { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; }
div.details table.fullimage td { background: var(--color-surface); }

/* Description & Comments */
div.details div.description h4,
div.details div.comments h4 { background: var(--color-surface-2); color: var(--color-text); text-shadow: none; border-radius: 8px; }
div.details div.description pre { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 8px; padding: 12px; line-height: 1.6; }
div.details div.comments li { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 8px; }
div.details div.comments li.even { background: var(--color-surface-2); }
div.details div.comments li.addComment { background: var(--color-surface-2); }
div.details form.postcommentform fieldset textarea { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; }

/* Buttons */
.greyButton, .smallGreyButton { background: var(--color-accent); color: #fff; border: 0; border-radius: 6px; }

/* Overlay */
div#overlay { background: var(--color-bg); }
div#overlay.loading { background: rgba(0,0,0,.75) URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%; }

/* Ensure all text inside spot detail is high-contrast */
div.details { color: var(--color-text); }
div.details a { color: var(--color-accent); }
div.details div.description,
div.details div.description *,
div.details div.comments li *,
div.details table.spotinfo td *,
div.details table.spotinfo th * { color: var(--color-text); }

/* Improve readability in long descriptions */
div.details div.description { line-height: 1.7; }
div.details div.description p { margin: 0 0 10px 0; }

/* Dark mode: override the legacy light detail/comment surfaces from style.css */
html[data-theme="dark"] div#overlay,
html[data-theme="dark"] div.details table.spotheader,
html[data-theme="dark"] div.details table.spotinfo td,
html[data-theme="dark"] div.details table.spotinfo td.break,
html[data-theme="dark"] div.details div.spotimage,
html[data-theme="dark"] div.details table.fullimage td,
html[data-theme="dark"] div.details div.description pre,
html[data-theme="dark"] div.details div.comments li.addComment div,
html[data-theme="dark"] div.details form.postcommentform fieldset textarea {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] a.closeDetails,
html[data-theme="dark"] div.details table.spotheader th.title,
html[data-theme="dark"] div.details table.spotinfo th,
html[data-theme="dark"] div.details div.description h4,
html[data-theme="dark"] div.details div.comments h4,
html[data-theme="dark"] div.details div.comments li.addComment {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border);
  text-shadow: none;
}

html[data-theme="dark"] div.details div.comments h4 span {
  background: rgba(255,255,255,0.08);
  color: var(--color-text);
}

html[data-theme="dark"] div.details table.spotinfo a,
html[data-theme="dark"] div.details div.comments a.spotterid,
html[data-theme="dark"] div.details div.comments li a:not(.delete):not(.whitelist) {
  color: var(--color-accent);
}

html[data-theme="dark"] div.details table.spotdetails td.img a.loading {
  color: var(--color-text);
}

html[data-theme="dark"] div.details div.comments blockquote {
  border-color: var(--color-border);
  background: rgba(255,255,255,0.03);
}

html[data-theme="dark"] div.details div.comments li.addComment div div.loading {
  background: rgba(15,17,21,0.78) URL(templates/modern/css/../img/loading.gif) no-repeat 50% 50%;
}

html[data-theme="dark"] div.details.spotcat0 table.spotinfo th,
html[data-theme="dark"] div.details.spotcat0 div.comments li {
  background-color: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.3);
}

html[data-theme="dark"] div.details.spotcat1 table.spotinfo th,
html[data-theme="dark"] div.details.spotcat1 div.comments li {
  background-color: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.28);
}

html[data-theme="dark"] div.details.spotcat2 table.spotinfo th,
html[data-theme="dark"] div.details.spotcat2 div.comments li {
  background-color: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.28);
}

html[data-theme="dark"] div.details.spotcat3 table.spotinfo th,
html[data-theme="dark"] div.details.spotcat3 div.comments li {
  background-color: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] div.details.spotcat4 table.spotinfo th,
html[data-theme="dark"] div.details.spotcat4 div.comments li {
  background-color: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.3);
}

html[data-theme="dark"] div.details.spotcat0 div.comments li.even {
  background-color: rgba(37, 99, 235, 0.26);
}

html[data-theme="dark"] div.details.spotcat1 div.comments li.even {
  background-color: rgba(234, 179, 8, 0.24);
}

html[data-theme="dark"] div.details.spotcat2 div.comments li.even {
  background-color: rgba(16, 185, 129, 0.24);
}

html[data-theme="dark"] div.details.spotcat3 div.comments li.even {
  background-color: rgba(239, 68, 68, 0.24);
}

html[data-theme="dark"] div.details.spotcat4 div.comments li.even {
  background-color: rgba(168, 85, 247, 0.24);
}

html[data-theme="dark"] div.details div.comments li.addComment,
html[data-theme="dark"] div.details div.comments li.nocomments {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

/* Modern table tweaks: thumbnails + readability */

table.spots { width: 100%; border-spacing: 0 0; }
table.spots tr { height: 20px; }
table.spots tr.head th {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-shadow: none;
  height: 20px;
  line-height: 20px;
  padding: 0 0 0 5px;
}
table.spots td {
  background: transparent;
  color: var(--color-text);
  vertical-align: middle;
}
table.spots td a,
table.spots td span,
table.spots td label {
  display: block;
  height: 20px;
  line-height: 20px;
}
table.spots td a {
  overflow: hidden;
  white-space: nowrap;
}
table.spots tr:hover td { background: var(--color-surface); }

/* Ensure links are readable in dark/light */
table.spots td a,
table.spots tr td a.spotlink { color: var(--color-text); text-decoration: none; }
table.spots tr:hover td a { color: var(--color-text); }

/* Dark theme: ensure strong contrast for table text */
html[data-theme="dark"] table.spots td,
html[data-theme="dark"] table.spots td a,
html[data-theme="dark"] table.spots tr td a.spotlink { color: #ffffff; }
html[data-theme="dark"] table.spots tr:hover td a { color: #ffffff; }


/* Watchlist icons (match cards view styling) */
table.spots td.watch { text-align: center; }
table.spots td.watch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
table.spots td.watch a::before {
  content: '\2605';
  font-size: 16px;
  color: #fbbf24;
}
table.spots td.watch a.add::before {
  content: '\2606';
  color: #f87171;
}
table.spots td.watch a.add:hover::before {
  color: #fbbf24;
}
table.spots td.watch a.remove:hover::before {
  color: #f59e0b;
}

/* Poster column wider for longer names */
table.spots td.poster,
table.spots th.poster {
  min-width: 135px;
  width: 135px;
  overflow: hidden;
  white-space: nowrap;
}

table.spots td.poster a {
  display: inline-block;
  min-width: 135px;
  width: 135px;
}

/* Thumbnail inside the title cell */
/* thumbnails disabled */


/* Table pager */
.tablePager { display:flex; justify-content:center; gap:12px; margin:16px 0; }
.tablePager a { display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-text); text-decoration:none; font-weight:600; transition:background 0.2s ease, color 0.2s ease, border 0.2s ease; }
.tablePager a:hover { background:var(--color-surface); border-color:var(--color-accent); }
.tablePager a:focus { outline:none; box-shadow:0 0 0 2px rgba(37,99,235,0.2); }
.tablePager a.prev::before { content:'\00AB'; margin-right:6px; }
.tablePager a.next::after { content:'\00BB'; margin-left:6px; }
/* Per-category color accents */
table.spots tr.spotcat0 td { background: rgba(37, 99, 235, 0.18); color: #1d4ed8; }
table.spots tr.spotcat1 td { background: rgba(234, 179, 8, 0.22); color: #b45309; }
table.spots tr.spotcat2 td { background: rgba(16, 185, 129, 0.2); color: #0f766e; }
table.spots tr.spotcat3 td { background: rgba(239, 68, 68, 0.2); color: #b91c1c; }
table.spots tr.spotcat4 td { background: rgba(168, 85, 247, 0.2); color: #7c3aed; }

/* Dark theme: reuse category accent backgrounds */
html[data-theme="dark"] table.spots tr.spotcat0 td { background: rgba(37, 99, 235, 0.16); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat1 td { background: rgba(234, 179, 8, 0.18); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat2 td { background: rgba(16, 185, 129, 0.16); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat3 td { background: rgba(239, 68, 68, 0.18); color: #ffffff; }
html[data-theme="dark"] table.spots tr.spotcat4 td { background: rgba(168, 85, 247, 0.17); color: #ffffff; }

table.spots tr td.date,
table.spots tr td.filesize { color: rgba(15, 23, 42, 0.78); }
html[data-theme="dark"] table.spots tr td.date,
html[data-theme="dark"] table.spots tr td.filesize { color: #e2e8f0; }
table.spots tr td span.age,
table.spots tr td span.filesize { color: inherit; }


/* End poster width overrides */