/*! jQuery UI - v1.10.0 - 2013-01-26
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.tooltip.css
* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */

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

.ui-front {
	z-index: 100;
}


/* 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: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

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

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

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

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.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,
.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: 0;
}

/* 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,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 21px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	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: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-menu {
	list-style: none;
	padding: 2px;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	margin-top: -3px;
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	width: 100%;
}
.ui-menu .ui-menu-divider {
	margin: 5px -2px 5px -2px;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
	text-decoration: none;
	display: block;
	padding: 2px .4em;
	line-height: 1.5;
	min-height: 0; /* support: IE7 */
	font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight: normal;
	margin: -1px;
}

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

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

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

/* right-aligned */
.ui-menu .ui-menu-icon {
	position: static;
	float: right;
}

.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
}


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

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

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

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

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

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


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

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px/*{cornerRadius}*/;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa/*{bgColorOverlay}*/ url(Library/Plugins/Forms/Templates/images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/;
	opacity: .3/*{opacityOverlay}*/;
	filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/;
}
.ui-widget-shadow {
	margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
	padding: 8px/*{thicknessShadow}*/;
	background: #aaaaaa/*{bgColorShadow}*/ url(Library/Plugins/Forms/Templates/images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
	opacity: .3/*{opacityShadow}*/;
	filter: Alpha(Opacity=30)/*{opacityFilterShadow}*/;
	border-radius: 8px/*{cornerRadiusShadow}*/;
}
/*
*	SonicOnline.fr - News
*	---------------------
*/

/*! */
/*! ----------------------------------------------------------- */
/*! 	INDEX					 								*/
/*! ----------------------------------------------------------- */


@media screen and (max-width: 720px) { section#news-index section#last_vids, section#news-index section#best_articles {
	display: none;
}}


/* ----	Best board posts ---- */


section#news-index section#board_posts .grid_7-2-padding_l {
	max-height: 150px;
}

@media screen and (max-width: 940px) { section#news-index section#board_posts .grid_7-2-padding_l {
	width: 368px;
}}

@media screen and (max-width: 940px) { section#news-index section#board_posts .grid_7-2-padding_l {
	width: 208px;
}}


@media screen and (max-width: 720px) { section#news-index section#board_posts .grid_7-2-padding_l {
	width: auto;
}}

@media screen and (max-width: 720px) {section#news-index section#board_posts .content {
	display: flex;
}}


/*! */
/*! ----------------------------------------------------------- */
/*! 	ITEM VIEW				 								*/
/*! ----------------------------------------------------------- */


/* 140 x 78 */

section#NewsView .news-title-img {
	width: 80px;
}

section#NewsView .news-title-img img {
	width: 80px;
	object-fit: cover;
}

@media screen and (max-width: 940px) { section#NewsView .news-title-img {
	width: 90px;
}}
@media screen and (max-width: 720px) { section#NewsView .news-title-img, section#NewsView .news-title-img img {
	width: 60px; height: 45px;
	background-size: 60px 45px;
}}

section#NewsView .news-title-box {
}

@media screen and (max-width: 940px) { section#NewsView .news-title-box {
	width: 360px;
}}
@media screen and (max-width: 720px) { section#NewsView .news-title-box {
	width: 230px;
}}

section#NewsView .news_gallery {
	margin: 10px 0px;
}


section#NewsView .prev-next {
	display: flex;
}

section#NewsView .prev-next .prev-next-box {
	flex:2;
}

@media screen and (max-width: 720px) { section#NewsView .prev-next .prev-next-box {
	flex:6;
}}


section#NewsView .prev-next .prev-next-space {
	flex:1;
}

@media screen and (max-width: 940px) { section#NewsView .prev-next .prev-next-box {
	width: 220px;
}}
@media screen and (max-width: 720px) { section#NewsView .prev-next .prev-next-box {
	width: auto;
}}

section#NewsView .prev-next .prev-next-box a {
	display: flex;
	align-items: center;
	/*justify-content: center;*/
}

section#NewsView .prev-next .prev-next-box.prev-next-box-left a {
	justify-content: flex-start;
}
section#NewsView .prev-next .prev-next-box.prev-next-box-right a {
	justify-content: flex-end;
}

section#NewsView .prev-next .prev-next-box a:hover {
	text-decoration: none;
}

section#NewsView .prev-next .icon {
	--icon-size: 25px;
	width: 25px; height: 25px; margin-top: 0px;
	flex-shrink: 0;
	opacity: .4;
}

section#NewsView .prev-next-box:hover .icon {
	opacity: 1;
}

section#NewsView .prev-next .icon-chevron-left {
	margin-right: 5px
}
section#NewsView .prev-next .icon-chevron-right {
	margin-left: 5px;
}

/* Archives  */

section#NewsArchives .bt-click .btn-text {
	width: 200px;
	text-align: left;
}

section#NewsArchives .bt-click:hover {
	cursor: pointer;
}


/*
*	SONICONLINE CSS FRAMEWORK
*	-------------------------
*
*	TABLE OF CONTENTS
*
*	Default Variables
*	General style (html, body, ...)		( 442E05GI )
*	Text styles							( WQXSMLXO )
*	Box classes (flex, ...)				( F85NCRHE )
*	Margin								( DDX4CJY2 )
*	Headers								( PAY1B8SV )
*	Buttons								( 75PIX6IZ )
*	Droplist							( 77INZC36 )
*	Tabs								( 1B8SVZ7U )
*	Loading Icon						( Z7UBCZM6 )
*	Table								( M68Z7U7U )
*	Slider Button On/Off				( IHJH5E1V )
*	Tooltips							( GBTRVHL5 )
*	Dialog Box							( IR3IAHYK )
*	Icons								( KT27I1PO )
*	GameNote Icon						( 1UHQA114 )
*	User Avatar							( YL3R5Z1E )
*	Multi Gallery						( 980EIMCR )
*	Form								( 5P8HY4V6 )
*	Figure caption						( NLY6GU15 )
*	Contry flag icon					( K3WKYA3A )
* 	Breadcrumb							( VS2JY8GU )
* 	Gamebox								( YLC5F90U )
*/


/*! */
/*! ----------------------------------------------------------- */
/*! 	DEFAULT VARIABLES										*/
/*! ----------------------------------------------------------- */

:root {

	/* TEXT: size */
	
	--text-size-verysmall: 	12px;
	--text-size-small: 		14px;
	--text-size-normal: 	17px;
	--text-size-big: 		24px;
	
	--text-lineheight-normal: 1.3;
	
	--text-color-default: #333;
	--text-color-default-clearer: #999;
	
	--text-color-link-default: darkblue;
	
	/* BG Color */
	
	--bg-color-default: 		#BFC3CA;
	
	/* Box round */

	--box-round-normal: 4px;
	--box-round-big: 	8px;
	
	
	--color-shadow-black: #1E222799; /* used as shadow. Always dark whatever the theme */
	
	
	/* Default colors */
	
	--color-black: #000;
	--color-grey3: #333;
	--color-grey6: #666;
	--color-grey9: #999;
	--color-grey12: #ccc;
	--color-white: #fff;
	
	--filter-color-black: invert(0%) sepia(95%) saturate(4%) hue-rotate(281deg) brightness(93%) contrast(100%);
	--filter-color-grey3: invert(19%) sepia(14%) saturate(7%) hue-rotate(351deg) brightness(85%) contrast(89%);
	--filter-color-grey6: invert(45%) sepia(0%) saturate(1962%) hue-rotate(245deg) brightness(85%) contrast(86%);
	--filter-color-grey9: invert(66%) sepia(1%) saturate(0%) hue-rotate(139deg) brightness(92%) contrast(88%);
	--filter-color-grey12: invert(74%) sepia(3%) saturate(19%) hue-rotate(356deg) brightness(110%) contrast(93%);
	--filter-color-white: invert(100%) sepia(100%) saturate(1%) hue-rotate(181deg) brightness(105%) contrast(101%);
	
}

/*! */
/*! ----------------------------------------------------------- */
/*! 	GENERAL	STYLE							( 442E05GI )	*/
/*! ----------------------------------------------------------- */

html {
    margin: 0px; padding: 0px;
}

body {
    margin: 0px auto; padding: 0px;
    height: 100%;
        
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    
    font-style: 	normal;
    font-size: 		var(--text-size-normal);
    line-height: 	var(--text-lineheight-normal);
    color: 			var(--text-color-default);
    
    background-size: 2%;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	TEXT STYLES								( WQXSMLXO )	*/
/*! ----------------------------------------------------------- */

/* ---- COLOR DEFAULT CLEARER ---- */
/* Text clearer than the default text color */

.text-color-default-clearer, 
.text-color-default-clearer a {
	color: var(--text-color-default-clearer); 
}

.txt-bold 			{font-weight: bold;  }
.txt-align-center 	{text-align:  center;}
.txt-align-right 	{text-align:  right; }

/* ---- TEXT SIZE ---- */

.text-verysmall 	{font-size: var(--text-size-verysmall);}
.text-small 		{font-size: var(--text-size-small);}
.text-big 			{font-size: var(--text-size-big);}

@media screen and (max-width: 940px) {}
@media screen and (max-width: 720px) {
	.text-big 		{font-size: 1.2em; 	line-height: 1.1em;}
}

.text-highlight {
	background-color: rgba(255, 255, 255, 0.4);
	padding: 1px 5px;
}

/* ---- QUOTE BLOCK ---- */

blockquote + br {
	display: none; /* to remove "br" created just after "blockquote" */
}

blockquote {
	padding: 5px 10px;
	border-radius: var(--box-round-normal);
	margin-bottom: 10px;
}

blockquote blockquote {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

blockquote .quote-author {
	font-weight: bold;
}

/* ---- SPOILER BLOCK [Use Js] ---- */

.spoiler .spoilercontent {
	cursor: pointer;
}

.spoiler .spoilercontent.blur {
	filter: blur(3px);
	transition-property: -webkit-filter;
	transition-duration: .4s;
}

.spoiler .spoilercontent.blur:hover {
	filter: blur(2px);
	transition-property: -webkit-filter;
	transition-duration: .4s;
}

.spoiler .spoilercontent.unveil {
	filter: blur(0px);
	transition-property: -webkit-filter;
	transition-duration: .4s;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	MISC													*/
/*! ----------------------------------------------------------- */


/* LINKS */

a:link, a:visited, a:active {
	color: var(--text-color-link-default);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

a:hover .text-color-default-clearer, 
.text-color-default-clearer a:hover {
	color: var(--text-color-default);
}

pre { margin:0; padding:0; }

code {
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
	
}

.text-code code {
	font-size: var(--text-size-small);
}

.text-code .code-border {
	border: 1px dashed var(--text-color-default-clearer);
	padding: 9px 12px 10px 12px;
	border-radius: var(--box-round-normal);
}

.text-code pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.text-code + br {
	display: none; /* to remove "br" created just after ".text-code" */
}



/* IMAGES */

a img { border: none; }

/* Removing extra space bellow image */
img {
	max-width: 100%;
	display: inline-block;
	vertical-align: middle; /* To fix space un der images in div (https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) */
}

img .img-left {
	float: left;
}
img .img-right {
	float: right;
}

img.width-50 	{ width: 50px;  }
img.width-100 	{ width: 100px; }
img.width-150 	{ width: 150px; }
img.width-200 	{ width: 200px; }
img.width-250 	{ width: 250px; }
img.width-300 	{ width: 300px; }
img.width-350 	{ width: 350px; }
img.width-400 	{ width: 400px; }
img.width-450 	{ width: 450px; }
img.width-500 	{ width: 500px; }
img.width-550 	{ width: 550px; }
img.width-600 	{ width: 600px; }
img.width-650 	{ width: 650px; }
img.width-700 	{ width: 700px; }
img.width-750 	{ width: 750px; }
img.width-800 	{ width: 800px; }


.img {
	display: inline-block;
}

.img > img {
	display: block;	/* Used to remove space below image inside div img */
}

a > .img:hover {
	box-shadow: 0px 0px 0px 2px var(--bg-color-blue);
}


/* MISC */

p { margin: 0px; }

iframe.youtube-player {
	max-width: 100%;
}

ul {
	margin-top: 0; padding-top: 0;
	margin-bottom: 0; padding-bottom: 0;
}

ul + br, 
.bbcode-center + br {
	display: none; /* to remove "br" created just after "ul" and "bbcode-center" */
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	FLOAT, FLEX STYLE										*/
/*! ----------------------------------------------------------- */

.inline 		{display: inline-block; vertical-align: top;	}
.inline-bottom 	{display: inline-block; vertical-align: bottom;	}

.overflow {overflow: hidden;}

/* FLOAT */

.float-left 	{float: left;	}
.float-right 	{float: right;	}
.float-clear 	{clear: both;	}

/* FLEX */

.box-flex {display: flex;}

.flex-wrap {flex-wrap: wrap;}

.flex-noshrink {flex-shrink: 0;}

.flex-align-center 			{align-items: center;		}
.flex-align-top 			{align-items: flex-start;	}
.flex-align-bottom 			{align-items: flex-end;		}

.flex-space-around 			{justify-content: space-around;		}
.flex-space-between 		{justify-content: space-between;	}

.flex-container-center 		{justify-content: center;	}
.flex-container-right 		{justify-content:flex-end;	}
.flex-container-vertical 	{flex-direction: column;	}

.flex-size-1 {
	flex: 1;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	BOX STYLE								( F85NCRHE )	*/
/*! ----------------------------------------------------------- */


.box-width100 {width: 100%;}

/* Box round */

.box-round, .box-round-big, .box-round-top, .box-round-bottom {
	/*font-size: 0; /* to remove space between inline element like images : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html */
}

.box-round 		{border-radius: var(--box-round-normal);	}
.box-round-big 	{border-radius: var(--box-round-big);		}

.box-round-top {
	border-top-left-radius: var(--box-round-normal);
	border-top-right-radius: var(--box-round-normal);
}

.box-round-bottom {
	border-bottom-left-radius: var(--box-round-normal);
	border-bottom-right-radius: var(--box-round-normal);
}


/* Box border */

.box-border {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}


/* Box padding */

.box-padding 					{padding: 10px;}
.box-padding.box-border 		{padding: 9px;}
.box-padding-text 				{padding: 5px 10px;}
.box-padding-text.box-border 	{padding: 4px 9px;}

.box-padding-small 	{padding: 5px;}


/* Box separator */

:root {
	--separator-color: #ccc;
}

.box-separator {
	display: inline-flex;
	border-bottom: 1px var(--separator-color) solid;
	margin: 5px 0px;
	height: 0px;
	width: 100%;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	MARGIN									( DDX4CJY2 )	*/
/*! ----------------------------------------------------------- */

.margin-0 	{margin: 0px;}
.margin-5 	{margin: 5px;}
.margin-10 	{margin: 10px;}
.margin-20 	{margin: 20px;} 
.margin-40 	{margin: 40px;}

.margin-t-0 	{margin-top: 0px;}
.margin-t-5 	{margin-top: 5px;}
.margin-t-10 	{margin-top: 10px;}
.margin-t-20 	{margin-top: 20px;} 
.margin-t-40 	{margin-top: 40px;}

.margin-b-0 	{margin-bottom: 0px;}
.margin-b-5 	{margin-bottom: 5px;}
.margin-b-10 	{margin-bottom: 10px;}
.margin-b-20 	{margin-bottom: 20px;}
.margin-b-40 	{margin-bottom: 40px;} 

.margin-r-5 	{margin-right: 5px;}
.margin-r-10 	{margin-right: 10px;}
.margin-r-20 	{margin-right: 20px;}
.margin-r-40 	{margin-right: 40px;}

.margin-l-5 	{margin-left: 5px;}
.margin-l-10 	{margin-left: 10px;}
.margin-l-20 	{margin-left: 20px;}
.margin-l-40 	{margin-left: 40px;}

/* Padding */

.padding-5 		{padding: 5px;}
.padding-10 	{padding: 10px;}
.padding-20 	{padding: 20px;}

.padding-t-5 	{padding-top: 5px;}
.padding-t-10 	{padding-top: 10px;}
.padding-t-20 	{padding-top: 20px;}

.padding-b-5 	{padding-bottom: 5px;}
.padding-b-10 	{padding-bottom: 10px;}
.padding-b-20 	{padding-bottom: 10px;}

.padding-l-5 	{padding-left: 5px;}
.padding-l-10 	{padding-left: 10px;}
.padding-l-20 	{padding-left: 20px;}

.padding-r-5 	{padding-right: 5px;}
.padding-r-10 	{padding-right: 10px;}
.padding-r-20 	{padding-right: 20px;}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] HEADER STYLE						( PAY1B8SV )	*/
/*! ----------------------------------------------------------- */

:root {
	
	/* Coeff regarding normal text size */
	
	--header-size-coeff-h1: 1.6;	
	--header-size-coeff-h2: 1.25;
	--header-size-coeff-h3: 1.05;
	
	--header-text-color-heading: steelblue; /* #4682B4 */
	
	--header-icon-color-filter: invert(52%) sepia(12%) saturate(2026%) hue-rotate(165deg) brightness(89%) contrast(90%); /* #4682B4 */
}


/* reset h1, h2, h3, h4 */

h1, h2, h3, h4 { margin: 0px; font-weight:normal; font-size: var(--text-size-normal); line-height: var(--text-lineheight-normal);}

/* Header */

.header {

	--header-txt-size-h1: 	calc(var(--text-size-normal) * var(--header-size-coeff-h1));
	--header-txt-size-h2: 	calc(var(--text-size-normal) * var(--header-size-coeff-h2));
	--header-txt-size-h3: 	calc(var(--text-size-normal) * var(--header-size-coeff-h3));
	
	color: var(--header-text-color-heading);
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	margin-top: 18px;
	margin-bottom: 19px;
}

/* text size */
/* set font size */

.header.header-h1 .header-title {
	font-size: var(--header-txt-size-h1);
}
.header.header-h2 .header-title {
	font-size: var(--header-txt-size-h2);
}
.header.header-h3 .header-title {
	font-size: var(--header-txt-size-h3);
}

/* margins */

.header.header-nomargins {
	margin-top: 0px;
	margin-bottom: 0px;
}

/* color */

.header.header-color-default {
	color: inherit;
}

.header a {
	color:inherit;
}

/* title text */

.header .header-title {
	display: flex;
	align-items: center;
	font-weight: bold;
}

/* Title icon */

.header .header-title .icon {
	margin-right: 10px;
	filter: var(--header-icon-color-filter);
}
.header.header-h1 .header-title .icon {
	--icon-size: var(--header-txt-size-h1);
	margin-right: calc(var(--header-txt-size-h1) / 3);
}
.header.header-h2 .header-title .icon {
	--icon-size: var(--header-txt-size-h2);
	margin-right: calc(var(--header-txt-size-h2) / 3);
}
.header.header-h3 .header-title .icon {
	--icon-size: var(--header-txt-size-h3);
	margin-right: calc(var(--header-txt-size-h3) / 3);
}

/* Header right part */

.header .header-right {
	font-size: var(--text-size-normal);
	display: flex;
}

/* Header inbetween part (central part) */

.header .header-inbetween {
	flex:1;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	BUTTON STYLE							( 75PIX6IZ )	*/
/*! ----------------------------------------------------------- */

/* Default values that can be overriden */

:root {
	
	/* general */
	
	--btn-text-size-normal: 16px;
	--btn-text-size-small: 12px;
	--btn-text-fontweight: normal;
		
	--btn-round: var(--box-round-normal);
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: #aaa;
	--btn-clear-text: #666;
	
	--btn-clear-border-hover: #999;
	--btn-clear-text-hover: #333;
	
	--btn-clear-border-selected: #666;
	--btn-clear-bg-selected: #333;
	--btn-clear-text-selected: #eee;
	
	--btn-clear-border-disabled: #ddd;
	--btn-clear-text-disabled: #bbb;
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: #124d77;
	--btn-blue-bg: #007dc1;
	--btn-blue-text: #eee;
	
	--btn-blue-border-hover: #0061a7;
	--btn-blue-bg-hover: #0061a7;
	--btn-blue-text-hover: #fff;
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: #aaa;
	--btn-grey-bg: #aaa;
	--btn-grey-text: #333;
	
	--btn-grey-border-hover: #888;
	--btn-grey-bg-hover: #888;
	--btn-grey-text-hover: #000;
	
	/* BTN RED COLORS */
	
	--btn-red-border: #dc3545;
	--btn-red-bg: #dc3545;
	--btn-red-text: #fff;
	
	--btn-red-border-hover: #bd2d3b;
	--btn-red-bg-hover: #bd2d3b;
	--btn-red-text-hover: #fff;
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: #28a745;
	--btn-green-bg: #28a745;
	--btn-green-text: #fff;
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
}

/* ---- BUTTON GENERAL ---- */

.btn, .btn a {
	display: inline-flex; align-items: center;
}

.btn {
	cursor: pointer;
	border-radius: var(--btn-round);
	min-height: 34px;
	font-size: var(--btn-text-size-normal);
	font-weight: var(--btn-text-fontweight);
	
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

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

.btn .btn-text, input.btn {
	padding: 5px 10px;
}

.btn .btn-text {
	text-align: center;
}

.btn.btn-small, input.btn.btn-small {
	font-size: var(--btn-text-size-small);
	border-radius: var(--btn-round);
	min-height: 25px;
}

.btn.btn-small .btn-text {
	padding: 2px 10px;
	margin-top: 1px;
}


/* ---- BUTTON ICONS ---- */

.btn .btn-icon {
	--icon-size: 20px;
	margin: 7px 8px;
}

.btn.btn-small .btn-icon {
	--icon-size: 14px;
	margin: 2px 6px;
}


/* for all .btn-text placed just after .btn-icon */
.btn-icon + .btn-text, .btn.btn-small .btn-icon + .btn-text { 
	padding-left: 0px;
}
.btn-text + .btn-icon, .btn.btn-small .btn-text + .btn-icon { 
	margin-left: 0px;
}

.btn.disabled {
	cursor: default;
}



/* ---- BUTTON COLOR: CLEAR ---- */

.btn-clear {
	border: 1px var(--btn-clear-border) solid;
}
.btn-clear, .btn-clear a {
	color: var(--btn-clear-text);
}
.btn-clear:hover {
	border-color: var(--btn-clear-border-hover);
	/*background-color: var(--btn-clear-bg-hover);*/
}
.btn-clear:hover, .btn-clear:hover a {
	color: var(--btn-clear-text-hover);
}
.btn.btn-clear .btn-icon {
	filter: var(--icon-filter-grey);
}

/* CLEAR SELECTED */
.btn-clear.selected {
	border-color: var(--btn-clear-border-selected);
	background-color: var(--btn-clear-bg-selected);
}
.btn-clear.selected, .btn-clear.selected a {
	color: var(--btn-clear-text-selected);
}
.btn.btn-clear.selected .btn-icon {
	filter: var(--icon-filter-orange);
}
.btn-clear.selected:hover {
	/*border: 1px #333 solid;
	background-color: #555;*/
}

/* CLEAR DISABLED */
.btn-clear.disabled, 
.btn-clear.disabled:hover {
	border: 1px var(--btn-clear-border-disabled) solid;
	background-color: inherit;
}
.btn-clear.disabled, 
.btn-clear.disabled:hover, 
.btn-clear.disabled:hover a {
	color: var(--btn-clear-text-disabled);
}



/* ---- BUTTON COLOR: BLUE ---- */

.btn-blue {
	border: 1px var(--btn-blue-border) solid;
	background-color: var(--btn-blue-bg);
}
.btn-blue, .btn-blue a {
	color: var(--btn-blue-text);
}
.btn-blue:hover {
	border-color: var(--btn-blue-border-hover);
	background-color: var(--btn-blue-bg-hover);
	/*background: linear-gradient(#42a9f7 0%, #0070c9 100%);*/
}
.btn-blue:hover, .btn-blue:hover a {
	color: var(--btn-blue-text-hover);
}

.btn.btn-blue .btn-icon {
	filter: var(--icon-filter-white);
}



/* ---- BUTTON COLOR: GREY ---- */

.btn-grey {
	border: 1px var(--btn-grey-border) solid;
	background-color: var(--btn-grey-bg);
}
.btn-grey, .btn-grey a {
	color: var(--btn-grey-text);
}
.btn-grey:hover {
	background-color: var(--btn-grey-bg-hover);
	border-color: var(--btn-grey-border-hover);
}
.btn-grey:hover, .btn-grey:hover a {
	color: var(--btn-grey-text-hover);
}



/* ---- BUTTON COLOR: RED ---- */

.btn-red {
	background-color: var(--btn-red-bg);
	border: 1px var(--btn-red-border) solid;
}
.btn-red, .btn-red a {
	color: var(--btn-red-text);
}
.btn-red:hover {
	/*background: linear-gradient(#e56868 0%, #b02828 100%);*/
	background-color: var(--btn-red-bg-hover);
	border-color: var(--btn-red-border-hover);
}
.btn-red:hover, .btn-red:hover a {
	color: var(--btn-red-text-hover);
}

.btn.btn-red .btn-icon {
	filter: var(--icon-filter-white);
}



/* ---- BUTTON COLOR: GREEN ---- */

.btn-green {
	background-color: var(--btn-green-bg);
	border: 1px var(--btn-green-border) solid;
}
.btn-green, .btn-green a {
	color: var(--btn-green-text);
}
.btn-green:hover {
	/*background: linear-gradient(#e56868 0%, #b02828 100%);*/
	background-color: var(--btn-green-bg-hover);
	border-color: var(--btn-green-border-hover);
}
.btn-green:hover, .btn-green:hover a {
	color: var(--btn-green-text-hover);
}

.btn.btn-green .btn-icon {
	filter: var(--icon-filter-white);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	PAGELINKS												*/
/*! ----------------------------------------------------------- */

.pageLinks .btn {
	margin: 0 1px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	DROPLIST STYLE	[Use Js]				( 77INZC36 )	*/
/*! ----------------------------------------------------------- */


:root {
	
	/* general */
	
	--droplist-color-shadow: #33333399;
	
	--droplist-color-bg-default: #eee;
	--droplist-color-bg-hover: #fff;
	--droplist-color-separator: #bbb;
	
	--droplist-box-round: 5px;
	
	--droplist-text-color: #333;
	--droplist-text-color-hover: #333;
	--droplist-text-size-normal: 16px;
	--droplist-text-size-small: 12px;
	
}

.droplist {
	position:relative;
	display: inline-block;
}

.droplist .droplist-menu .droplist-btn {
	z-index: 10;
}

/* topdown menu */

.droplist .droplist-menu {
	display: none;
	position: absolute;
	box-shadow: 0px 5px 5px var(--droplist-color-shadow);
	border-radius: 6px; overflow: hidden;
	background-color: var(--droplist-color-bg-default);
	z-index: 20;
	border-top-left-radius: 0px;
	font-size: var(--droplist-text-size-normal);
}

.droplist .droplist-menu div.droplist-item {
	display: flex;
	align-items: center;
	justify-content: left;
	padding: 10px 20px;
	white-space: nowrap; 
}

.droplist .droplist-menu div.droplist-item.item-center {
	justify-content: center;
}

.droplist .droplist-menu div.separator {
	border-bottom: 1px var(--droplist-color-separator) solid;
	padding: 0px; margin: 0px;
}

.droplist .droplist-menu.droplist-bottom-left {
	right: 0px;
	border-radius: var(--droplist-box-round);
	border-top-right-radius: 0px;
}

.droplist .droplist-menu.droplist-right {
	left: 100%;
	top: 0px;
	border-radius: var(--droplist-box-round);
	border-top-left-radius: 0px;
}

.droplist .droplist-menu.droplist-left {
	right: 100%;
	top: 0px;
	border-radius: var(--droplist-box-round);
	border-top-right-radius: 0px;
}

.droplist .droplist-menu a div:not(.btn-text) { /* change color except for buttons */
	color: var(--droplist-text-color);
}


/* small menu */
.droplist .droplist-menu.droplist-small div.droplist-item {
	font-size: var(--droplist-text-size-small);
}

/* hover: background color change only if without "item-nolink" */
.droplist .droplist-menu .droplist-item:not(.item-nolink):hover  {
	background-color: var(--droplist-color-bg-hover);
	cursor: pointer;
	color: var(--droplist-text-color-hover);
}
.droplist .droplist-menu a:hover {
	text-decoration: none;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	TABS									( 1B8SVZ7U )	*/
/*! ----------------------------------------------------------- */

:root {
	--tab-color-border: var(--color-grey6);
}


.tab {
	display: flex;
	border-bottom: 1px solid var(--tab-color-border);
	margin: 20px 0;
}

.tab-item {
	padding: 10px 15px;
	margin-bottom: -1px;
	border: 1px solid transparent;
	cursor: pointer;
	
}

.tab-item.selected, .tab-item:hover {
	
	border-top: 	1px solid var(--tab-color-border);
	border-left: 	1px solid var(--tab-color-border);
	border-right: 	1px solid var(--tab-color-border);
	border-radius: 	var(--box-round-normal) var(--box-round-normal) 0 0;
}

.tab-item.selected {
	background-color: var(--bg-color-default);
}

/*! */
/*! ----------------------------------------------------------- */
/*! 	TABLE									( M68Z7U7U )	*/
/*! ----------------------------------------------------------- */

:root {
	--table-color-border: var(--color-grey6);
}


table {
	border-collapse: collapse;
}

.table {
	width: 100%;
	max-width: 100%;
}

.table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid var(--table-color-border);
	font-weight: bold;
}

.table td, .table th {
	border-top: 1px solid var(--table-color-border);
	padding: .75rem;
	text-align: left;
}

.table td.align-center, 
.table th.align-center {
	text-align: center;
}

/*! */
/*! ----------------------------------------------------------- */
/*! 	LOADING ICON							( Z7UBCZM6 )	*/
/*! ----------------------------------------------------------- */

.loader {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* ---- Simple circle loader ---- */

.loader .loader-spin {
  border: 6px solid #999; 
  border-top: 6px solid #333;
  /*border-bottom: 8px solid var(--color-alert-red); */
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: loader-spin .6s linear infinite;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ---- Sonic loader ---- */


.loader .loader-sonic-leggs {
  border: 4px solid var(--bg-color-default); /* Light grey */
  border-top: 8px solid var(--color-alert-red); /* Blue */
  border-bottom: 8px solid var(--color-alert-red); /* Blue */
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: loader-spin .3s linear infinite;
}

.loader .loader-sonic {
	/*content: '';*/
	width: 54px; height: 30px;
	background-image: url(Library/style/imageset/loader-sonic-img.png);
	position: absolute;
	margin-top: -9px;
	margin-left: 3px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	BUTTON: SLIDER ON / OFF	[Use Js]		( IHJH5E1V )	*/
/*! ----------------------------------------------------------- */

:root {
	--btn-slider-color-border: 	#333;
	--btn-slider-color-bg: 		#AAA;
	--btn-slider-color-shadow: 	#000;
	
	--btn-slider-color-selected: 	#28AA61;
}

.on-off-button {
	width: 44px; height: 26px;
	border: 2px var(--btn-slider-color-border) solid;
	border-radius: 18px; /* used to make round button */
}

.on-off-button:hover {
	cursor: pointer;
}

.on-off-button.selected {
	border-color: var(--btn-slider-color-selected);
	background-color: var(--btn-slider-color-selected);
}

.on-off-button .on-off-slider {
	background-color: var(--btn-slider-color-bg);
	height: 26px; width: 26px;
	border-radius: 15px; /* used to make round button */
	box-shadow: 0 2px 4px 0px var(--btn-slider-color-shadow);
}

.on-off-button.selected .on-off-slider {
	margin-left: 18px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	TOOLTIP	[Use Js]						( GBTRVHL5 )	*/
/*! ----------------------------------------------------------- */

:root {
	--tooltip-text-color: #EEE;
	--tooltip-text-size: 12px;
	--tooltip-bg-color: #333;
	--tooltip-border-radius: 4px;
	--tooltip-shadow-color: black;
}

.tooltip {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    
    /* customizable */
    /*transition: all 0.15s ease;*/
    padding: 6px 10px 4px 10px;
    color: var(--tooltip-text-color);
    font-size: var(--tooltip-text-size);
    border-radius: var(--tooltip-border-radius);
    box-shadow: 0px 1px 2px var(--tooltip-shadow-color);  
    background: var(--tooltip-bg-color);  
    
    pointer-events: none;
    
    max-width: 150px;
    word-wrap: break-word; 
    
    z-index: 30;
}

.tooltip:after {
	background: var(--tooltip-bg-color);
	box-shadow: 1px 1px 2px var(--tooltip-shadow-color); 
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
	left: calc((100% / 2) - 5px); bottom:-4px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	DIALOG BOX	[Use Js]					( IR3IAHYK )	*/
/*! ----------------------------------------------------------- */

:root {
	--dialogbox-bg-color: #EEE;
	--dialogbox-header-bg-color: #DDD;
	--dialogbox-separator-color: #DDD;
	--dialogbox-border-radius: var(--box-round-big);
	--dialogbox-shadow-color: black;
}


#dialog-overlay {
    
	position:absolute; 
	top:0; left:0;
    width:100%; height:100%;
	
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5;
    background: #000;
    z-index:3000;
    
    display: none;
}

#dialog-box {
	position:absolute; 
	top:50%; left:40%;
    z-index:5000;
    overflow: hidden;

    opacity: 1.0;
    
    width: 328px;
	background-color: var(--dialogbox-bg-color);
	border-radius: var(--dialogbox-border-radius);
	box-shadow: 0px 5px 10px var(--dialogbox-shadow-color);
	
	display: none;
}

#dialog-box #dialog-top {
	height: 10px;
	background-color: var(--dialogbox-header-bg-color);
	/*background: -webkit-linear-gradient(#fcfcff 0%, #cacbd4 100%);*/
}

#dialog-box #dialog-title {
	font-weight: bold;
	padding: 15px 15px 0px 15px;
	margin-bottom: -5px;
}

#dialog-box #dialog-message {
	padding: 15px;
}


#dialog-bts {
	text-align: right;
	border-top: 1px var(--dialogbox-separator-color) solid;
	padding: 5px 15px 8px 15px;
}

#dialog-box #dialog-valid,
#dialog-box #dialog-cancel {
	display: inline-block;
	margin: 5px 10px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	POPBOX													*/
/*! ----------------------------------------------------------- */

:root {
	--popbox-bg-color: #EEE;
	--popbox-border-radius: var(--box-round-big);
	--popbox-shadow-color: black;
}


.js-popbox.popbox-content, .js-popbox.popbox-dest {
	display: none;
}

.popbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
    opacity: 0.4;
    background: #000;
    z-index:200;
}

.popbox-window-bg {
	position:fixed; 
	top: 0; left: 0; bottom: 0; right: 0;
	z-index:300;
	display: flex;
	justify-content: center;
	align-items: center;
}

.popbox-window-bg .popbox-window {
	background-color: var(--popbox-bg-color);
	border-radius: var(--popbox-border-radius);
	box-shadow: 0px 5px 10px var(--popbox-shadow-color);
	overflow: hidden;
	width: 280px;
}

.popbox-window-bg .popbox-window .popbox-title {
	font-weight: bold;
	padding: 15px 15px 5px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.popbox-window-bg .popbox-window .popbox-title .icon {
	opacity: .4;
	cursor: pointer;
}

.popbox-window-bg .popbox-window .popbox-title .icon:hover {
	opacity: 1;
}

.popbox-window-bg .popbox-window .popbox-content {
	padding: 5px 15px 15px 15px;
}






/*! */
/*! ----------------------------------------------------------- */
/*! 	ICONS									( KT27I1PO )	*/
/*! ----------------------------------------------------------- */

:root {
	--icon-size-normal: 25px;
	--icon-size-small:  15px;
	
	/* go to this website to get values: https://codepen.io/sosuke/pen/Pjoqqp */
	
	--icon-filter-white: 	invert(100%) sepia(0%) saturate(1%) hue-rotate(272deg) brightness(113%) contrast(84%);
	--icon-filter-blue: 	invert(36%) sepia(13%) saturate(1057%) hue-rotate(173deg) brightness(90%) contrast(80%);
	--icon-filter-orange: 	invert(71%) sepia(46%) saturate(721%) hue-rotate(358deg) brightness(89%) contrast(96%);
	--icon-filter-grey: 	invert(34%) sepia(77%) saturate(22%) hue-rotate(321deg) brightness(96%) contrast(82%); /* #666666 */
}

.icon {
	--icon-size: var(--icon-size-normal);
}
.icon.icon-small {
	--icon-size: var(--icon-size-small);
}

.icon, .btn-icon {
	background-image: url(Library/style/imageset/icons.svg);
	width: var(--icon-size); height: var(--icon-size);
	background-size: calc(10 * var(--icon-size)) calc(10 * var(--icon-size)); /* Because 10 X 10 icons in the file */
}

.icon.icon-white {
	filter: var(--icon-filter-white);
}
.icon.icon-blue {
	filter: var(--icon-filter-blue);
}
.icon.icon-orange {
	filter: var(--icon-filter-orange);
}
.icon.icon-grey {
	filter: var(--icon-filter-grey);
}


.icon-logo 			{ background-position: calc(-0 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-pad 			{ background-position: calc(-1 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-micro 		{ background-position: calc(-2 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-image 		{ background-position: calc(-3 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-folder 		{ background-position: calc(-4 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-cam	 		{ background-position: calc(-5 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-talk	 		{ background-position: calc(-6 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-home	 		{ background-position: calc(-7 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-menu	 		{ background-position: calc(-8 * var(--icon-size)) calc(-0 * var(--icon-size));}
.icon-menu2 		{ background-position: calc(-9 * var(--icon-size)) calc(-0 * var(--icon-size));}

.icon-newspaper 	{ background-position: calc(-0 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-bookmark 		{ background-position: calc(-1 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-beer	 		{ background-position: calc(-2 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-histo 		{ background-position: calc(-3 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-mail	 		{ background-position: calc(-4 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-card	 		{ background-position: calc(-5 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-next	 		{ background-position: calc(-6 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-strech 		{ background-position: calc(-7 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-suitcase 		{ background-position: calc(-8 * var(--icon-size)) calc(-1 * var(--icon-size));}
.icon-off	 		{ background-position: calc(-9 * var(--icon-size)) calc(-1 * var(--icon-size));}

.icon-star	 		{ background-position: calc(-0 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-check 		{ background-position: calc(-1 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-pad2	 		{ background-position: calc(-2 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-box	 		{ background-position: calc(-3 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-like	 		{ background-position: calc(-4 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-dislike 		{ background-position: calc(-5 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-write 		{ background-position: calc(-6 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-add	 		{ background-position: calc(-7 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-eggman 		{ background-position: calc(-8 * var(--icon-size)) calc(-2 * var(--icon-size));}
.icon-notebook 		{ background-position: calc(-9 * var(--icon-size)) calc(-2 * var(--icon-size));}

.icon-search 		{ background-position: calc(-0 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-bell	 		{ background-position: calc(-1 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-user	 		{ background-position: calc(-2 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-user-outline	{ background-position: calc(-3 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-users	 		{ background-position: calc(-4 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-users-outline { background-position: calc(-5 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-edit 			{ background-position: calc(-6 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-hot	 		{ background-position: calc(-7 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-user-add 		{ background-position: calc(-8 * var(--icon-size)) calc(-3 * var(--icon-size));}
.icon-user-delete 	{ background-position: calc(-9 * var(--icon-size)) calc(-3 * var(--icon-size));}

.icon-sun 			{ background-position: calc(-0 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-heart	 		{ background-position: calc(-1 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-screen	 	{ background-position: calc(-2 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-list	 		{ background-position: calc(-3 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-discord	 	{ background-position: calc(-4 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-twitter	 	{ background-position: calc(-5 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-facebook	 	{ background-position: calc(-6 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-youtube	 	{ background-position: calc(-7 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-rss-logo		{ background-position: calc(-8 * var(--icon-size)) calc(-4 * var(--icon-size));}
.icon-nintendo-round{ background-position: calc(-9 * var(--icon-size)) calc(-4 * var(--icon-size));}

.icon-game-played 	{ background-position: calc(-0 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-game-finished	{ background-position: calc(-1 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-game-pastop	{ background-position: calc(-2 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-game-top	 	{ background-position: calc(-3 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-game-owned	{ background-position: calc(-4 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-chevron-left	{ background-position: calc(-5 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-chevron-right	{ background-position: calc(-6 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-xbox-round	{ background-position: calc(-7 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-ps-round		{ background-position: calc(-8 * var(--icon-size)) calc(-5 * var(--icon-size));}
.icon-steam-round	{ background-position: calc(-9 * var(--icon-size)) calc(-5 * var(--icon-size));}

.icon-like-filled	{ background-position: calc(-0 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-arrow-down	{ background-position: calc(-1 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-home-filled	{ background-position: calc(-2 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-pin			{ background-position: calc(-3 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-eye			{ background-position: calc(-4 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-chevron-up	{ background-position: calc(-5 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-chevron-down	{ background-position: calc(-6 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-arrow-sync	{ background-position: calc(-7 * var(--icon-size)) calc(-6 * var(--icon-size));}
.icon-delete		{ background-position: calc(-8 * var(--icon-size)) calc(-6 * var(--icon-size));}




/*! */
/*! ----------------------------------------------------------- */
/*! 	GAMENOTE ICON							( 1UHQA114 )	*/
/*! ----------------------------------------------------------- */


:root {
	--gamenote-default-color-bg: #FFF;
	--gamenote-default-color-border:  #666;
	
	--gamenote-default-color-up: #28AA61; /* green */
	--gamenote-default-color-down: #B22429; /* red */
	
	--gamenote-icon-size-normal: 30px;
	--gamenote-icon-size-small: 20px;
	
	--gamenote-icon-filter-default: invert(100%) sepia(0%) saturate(7405%) hue-rotate(110deg) brightness(125%) contrast(60%); /* #ccc */
	--gamenote-icon-filter-up: invert(74%) sepia(73%) saturate(443%) hue-rotate(39deg) brightness(99%) contrast(106%); /* green: #8FF732 */
	--gamenote-icon-filter-down: invert(44%) sepia(10%) saturate(3734%) hue-rotate(315deg) brightness(82%) contrast(77%); /* red: #B44E4E */
}


.gamenote {
	width: 45px; height: 45px;
	border-radius: 50px;
	background-color: var(--gamenote-default-color-bg);
	border: 3px var(--gamenote-default-color-border) solid;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.gamenote:after {
 	content: '';
  	background-image: url(Library/style/imageset/icons.svg);
  	--icon-size: var(--gamenote-icon-size-normal);
	width: var(--icon-size); height: var(--icon-size);
	background-size: calc(10 * var(--icon-size)) calc(10 * var(--icon-size)); /* Because 10 X 10 icons in the file */
	filter: var(--gamenote-icon-filter-default);
}

.gamenote.gamenote-top {
	border-color: var(--gamenote-default-color-up);
}

.gamenote.gamenote-top:after {
	background-position: calc(-3 * var(--icon-size)) calc(-5 * var(--icon-size));
	filter: var(--gamenote-icon-filter-up);
}

.gamenote.gamenote-pastop {
	border-color: var(--gamenote-default-color-down);
}

.gamenote.gamenote-pastop:after {
	background-position: calc(-2 * var(--icon-size)) calc(-5 * var(--icon-size));
	filter: var(--gamenote-icon-filter-down);
}

.gamenote.gamenote-none,
.gamenote.disabled {
	border-color: var(--gamenote-default-color-border);
}
.gamenote.disabled:after {
	filter: var(--gamenote-icon-filter-default);
}

/* size */

.gamenote.gamenote-small {
	width: 30px; height: 30px;
	border-width: 2px;
}

.gamenote.gamenote-small:after {
	--icon-size: 20px;
}

.gamenote.gamenote-xsmall {
	width: 22px; height: 22px;
	border-width: 2px;
}
.gamenote.gamenote-xsmall:after {
	--icon-size: 15px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	USER AVATAR IMAGE [Use Js]				( YL3R5Z1E )	*/
/*! ----------------------------------------------------------- */

:root {
	--user-avatar-image-size: 40px;
	--user-avatar-border-color: #333;
	--user-avatar-icon-filter-color: invert(40%) sepia(10%) saturate(269%) hue-rotate(177deg) brightness(91%) contrast(89%); /* #60646A */
}


.user-avatar {
	--user-avatar-size: var(--user-avatar-image-size);
	width: var(--user-avatar-size); height: var(--user-avatar-size);
	border-radius: calc(var(--user-avatar-size) / 10);
	overflow: hidden;
	
	box-shadow: inset 0px 0px 0px 2px var(--user-avatar-border-color);
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.user-avatar img {
	width: var(--user-avatar-size); height: var(--user-avatar-size);
	position: absolute; top: 0;
}

.user-avatar .icon {
	--user-avatar-icon-sizecoeff : 4; /* coeff : more the vaue is high, bigger will be the icon inside the user-avatar. Must be > 1 */
	--icon-size: calc(var(--user-avatar-size) - calc(var(--user-avatar-size)/var(--user-avatar-icon-sizecoeff)));
	
	margin-top: calc( calc(var(--user-avatar-size) - var(--icon-size)) / 2);
	margin-left: calc( calc(var(--user-avatar-size) - var(--icon-size)) / 2);
	
	filter: var(--user-avatar-icon-filter-color);
}




/*! */
/*! ------------------------------------------------------------------------------- */
/*! 	MULTI GALLERY [Use Js]	(gallery thumbnail facebook)		( 980EIMCR )	*/
/*! ------------------------------------------------------------------------------- */
/* 		thumbnails with link to open a gallery 										*/


:root {
	--multigallery-bg-color: #666;
	--multigallery-text-size: 24px;
	--multigallery-text-color: #EEE;
	--multigallery-text-bgcolor: #333;
}


.multi-gallery + br {
	display: none;
}
	
.multi-gallery .box-multi-gallery {
	margin: 0; padding: 0;
	background-color: var(--multigallery-bg-color);
	padding: 5px;
	position:relative; 
}

.multi-gallery .box-multi-gallery .image1,
.multi-gallery .box-multi-gallery .image2,
.multi-gallery .box-multi-gallery .image3 {
	overflow: hidden;
	margin: 5px;
}

.multi-gallery .box-multi-gallery .image1,
.multi-gallery .box-multi-gallery .image1 img {
	width: 200px;
	height: 210px;
}


.multi-gallery .box-multi-gallery .image2,
.multi-gallery .box-multi-gallery .image3,
.multi-gallery .box-multi-gallery .image2 img,
.multi-gallery .box-multi-gallery .image3 img {
	width: 200px;
	height: 100px;
}

.multi-gallery .box-multi-gallery .image1 img,
.multi-gallery .box-multi-gallery .image2 img,
.multi-gallery .box-multi-gallery .image3 img {
	object-fit: cover;
}


.multi-gallery .box-multi-gallery .count {
	position:absolute;
	margin: 0; padding: 0;
	/*width: 200px; height: 100px;*/
	top: calc(100% / 2 - -5px);
	left: calc(100% / 2 - -5px);
	width: calc(100% / 2 - 15px);
	height: calc(100% / 2 - 15px);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: var(--multigallery-text-bgcolor);
	color: var(--multigallery-text-color);
	font-size: var(--multigallery-text-size); font-weight: bold;
}

.multi-gallery .box-multi-gallery .count .count-txt {
	font-size: .8em;
	line-height: 1.2em;
}

@media screen and (max-width: 720px) { 
	.multi-gallery .box-multi-gallery .count {
		font-size: 2em;
	}
}

/*! */
/*! ----------------------------------------------------------- */
/*! 	FORM									( 5P8HY4V6 )	*/
/*! ----------------------------------------------------------- */

:root {
	
	--form-label-text-size: 16px;
	--form-label-width: 150px;
	
	--form-input-text-size: 16px;
	--form-input-text-padding: 6px 12px;
	
	--form-input-width: 300px;
	--form-textarea-width: 100%;
	
	--form-input-bg-color: #DDD;
	--form-input-bg-color-disabled: #CCC;
	--form-input-border-color: #999;
	--form-input-border-color-selected: #333;
	
	--form-caption-text-size: 12px;
	--form-caption-text-color: #666;
	
	
	--form-flash-valid-text-color: 		#155724;
	--form-flash-valid-bg-color: 		#d4edda;
	--form-flash-valid-border-color: 	#c3e6cb;
	
	--form-flash-error-text-color: 		#721c24;
	--form-flash-error-bg-color:		#f8d7da;
	--form-flash-error-border-color:	#f5c6cb;
}

button, input, select, textarea {
	font-family : inherit;
	font-size   : 100%;
	
	/*width : 150px;*/
	margin: 0;
	
	-webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
	-moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
	box-sizing: border-box;
}

form .form-row {
	margin: 6px 0px;
	display: inline-flex;
	/*align-items: baseline;*/
	width: 100%;
}

form .form-row.checkbox {
	align-items: center;
}

@media screen and (max-width: 720px) { form .form-row {
	flex-direction: column;
}}

form .form-row label {
	flex-shrink: 0;
	width: var(--form-label-width);
	padding: var(--form-input-text-padding); /* padding added to align lable to text inside input */
	padding-left: 0px; /* to remove padding of the left */
	margin-top: 3px; /* 1 px adde because of the border of the input box */
	margin-right: 5px;
	
	font-size: var(--form-label-text-size);
	text-align: right;
}

@media screen and (max-width: 720px) { form .form-row label {
	/*margin-bottom: 5px;*/
	width: 100%;
	font-size: 0.95em;
}}

form .form-row .form-caption {
	font-size: var(--form-caption-text-size);
	/*line-height: 1em;*/
	margin: 5px 0;
	color: var(--form-caption-text-color);
}

form .form-row.hide {
	display: none;
}

input[type=text], 
input[type=password],
textarea,
form .form-row input[type=text], 
form .form-row input[type=password],
form textarea {
	margin: 0;
	background: none;
	/*width: calc(100% - 0px);*/
	background-color: var(--form-input-bg-color);
	border: 1px var(--form-input-border-color) solid;
	font-size: var(--form-input-text-size);
	border-radius: var(--box-round-normal);
	color: inherit;
	padding: var(--form-input-text-padding);
}

form .form-row input[type=text], 
form .form-row input[type=password] {
	/*width: var(--form-input-width);
	width: calc(100% - 160px);*/
}

form textarea{
	width: var(--form-textarea-width);
}

input[type=text]:disabled,
form .form-row input[type=text]:disabled {
	background-color: var(--form-input-bg-color-disabled);
}

/* CHECKBOX */

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    
    height: 20px;
    width: 20px;
    /*margin-top: 6px;*/
    background-color: var(--form-input-bg-color);
    border: 1px var(--form-input-border-color) solid;
    border-radius: var(--box-round-normal);
    margin-top: 3px;
}

input[type="checkbox"]:checked {
	/*background: #5280d7;*/
	/*margin: 0px;*/
	position: relative;
	/*margin-top: 6px;*/
	border-color: #666;
}

input[type="checkbox"]:checked::before {

		/*font-family: FontAwesome;*/
		content: '\2713';
		
		display: block;
		color: #333;
		top: -3px; left: 2px;
		font-size: 21px;
		position: absolute;
}

/* SELECT */

form .form-select {
	position: relative; 
	display: inline-table;
	
	background-color: var(--form-input-bg-color);
	border: var(--form-input-border-color) 1px solid;
	border-radius: var(--box-round-normal);
	/*font-size: var(--form-label-text-size);*/
	
	
	overflow: hidden; 
}

form .form-select select {
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: var(--form-input-width);
	/* 
		On est sûr de ne plus voir
		la flèche native 
	*/
	
	height: auto;
	border: 0; 
	margin: 0;
	padding: var(--form-input-text-padding);
	border-radius: 0;

	overflow: hidden;
	text-overflow: ellipsis;
	background-color: var(--form-input-bg-color);
	color: inherit;
	
	font-size: var(--form-input-text-size);
}

form .form-select::after { 
	/* Le pointeur du select */
	content: '';
	position: absolute;
	top: 50%; 
	margin-top: -3px;
	right: .75em;  
	display: block; 
	width: 0; height: 0;
	border-color: transparent;
	border-top-color: #666; 
	border-width: 6px;
	border-style: solid;
	pointer-events: none;
}

/* CHECKLIST */

form .checklist .checklist-item {
	display: flex;
	margin: 2px 0px;
	align-items: center;
}

form .checklist .checklist-item-label {
	margin-left: 10px;
	padding-top: 2px;
}

form .checklist.checklist-allvisible .checklist-sumup, 
form .checklist.checklist-allvisible .checklist-button {
	display: none;
}

form .checklist .ckecklist-filter {
	display: none;
}

form .checklist .ckecklist-filter input[type=text] {
	font-size: var(--text-size-small);
	padding: 3px 6px;
	margin: 5px 0px;
	
}

/*
form .form-row input[type=checkbox]:not(:checked),
form .form-row input[type=checkbox]:checked {
	opacity: 0.01;
}

form .form-row input[type=checkbox]:not(:checked)::after,
form .form-row input[type=checkbox]:checked::after {
	content: '';
	position: absolute;
	opacity: 1;
	width: 15px; height: 15px;
	margin-top: 6px;
	background-color: var(--form-input-bg-color);
	border-radius: var(--box-round-normal);
	border: 1px var(--form-input-border-color) solid;
}*/

form .form-row.captcha .question {
	font-size: 0.85em;
	line-height: 1em;
	margin: 5px 0px;
}

textarea {
	vertical-align: top;
	display : block;
	overflow: auto;
}


input:focus, 
textarea:focus,
form .form-row input:focus,
form .form-row textarea:focus {
  border-radius: var(--box-round-normal);
  outline      : none;
  border-color: var(--form-input-border-color-selected);
}

.form-flash-valid,
.form-flash-error {
	padding: 5px 10px;
	margin: 10px 0;
	border-radius: var(--box-round-normal);
	overflow: hidden;
}


.form-flash-valid {
	color: var(--form-flash-valid-text-color);
	background-color: var(--form-flash-valid-bg-color);
	border: 1px var(--form-flash-valid-border-color) solid;
}

.form-flash-error {
	color: var(--form-flash-error-text-color);
	background-color: var(--form-flash-error-bg-color);
	border: 1px var(--form-flash-error-border-color) solid;
}


.ui-widget-content {
	background-color: var(--form-input-bg-color);
	font-family : inherit;
	font-size   : 100%;
	overflow: hidden;
	
	border: 1px solid var(--form-input-border-color-selected);
	box-shadow: 0px 2px 8px var(--form-input-border-color);
}

.ui-autocomplete {
	max-height: 520px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] FIGURE CAPTION 						(NLY6GU15)	*/
/*!																*/
/*!	(img avec légende utilisé dans le contexte d'un article)	*/
/*! ----------------------------------------------------------- */


/* 	Utilisé dans les blocks image avec légende 
	La légende peut être affichée en dessous, à droite ou à gauche
	Il peut y avoir une ou plusieurs images à coté de la légende
	html généré à partir du BBcode

	=> Exemple avec une seule image, légende en dessous :
	<figure class="bottom">
		<div class="figure-centered-part">
			</div class="figure-imgs">
				<div class="img"><img src="/so_images/articles/38/SO_0000008451.jpg" alt="/so_images/articles/38/SO_0000008451.jpg"></div>
			</div>
			<figcaption>Legende</figcaption>
		</div>
	</figure>

	
	=> Exemple avec deux images, légende en dessous :
	<figure class="bottom">
		<div class="figure-centered-part">
			</div class="figure-imgs">
				<div class="img"><img src="/so_images/articles/38/SO_0000008451.jpg" alt="/so_images/articles/38/SO_0000008451.jpg"></div>
				<div class="img"><img src="/so_images/articles/38/SO_0000008451.jpg" alt="/so_images/articles/38/SO_0000008451.jpg"></div>
			</div>
			<figcaption>Legende</figcaption>
		</div>
	</figure>
*/

:root {
	--img-caption-color: #666;
}

figure {
	/* remove default values by browser */
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	
	display: flex;
	justify-content: center;
}

figure a {
	display: inline-flex;
}

figure + br {
	display: none; /* to remove "br" created just after "figure" */
}

figure > div.figure-centered-part {
	display: flex;
	
	/* fix width on mobile */
	max-width: 100vh;
	/* mobile viewport bug fix */
	max-width: -webkit-fill-available;
}

figure.bottom > div.figure-centered-part,
figure.big > div.figure-centered-part {
	flex-direction: column;
}




figure.big {
	/* take the full size of the screen with 20px of margin */
	width: calc(100vw - 20px * 2);
	
	/* move the block left to center it to the page */
	margin-left: calc(-100vw / 2 + 100% / 2 + 20px);
}

@media screen and (max-width: 720px) { figure.big {
	width: 100%;
	margin-left: 0px;
}}

figure .figure-imgs {
	display: inline-flex;
	align-items: baseline;
	
	width: fit-content;
}



/* when several image are used with caption */
figure .img {
	margin: 2px;
}

/* Caption under image(s) */
figure figcaption {
	font-style: italic; 
	color: var(--text-color-default-clearer);
	font-size: var(--text-size-small);
}

figure.bottom figcaption, 
figure.big figcaption {
	border-left: 2px solid var(--img-caption-color);
	padding-left: 8px; padding-top: 8px; padding-bottom: 6px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: -2px;
}

figure.right figcaption, 
figure.left figcaption {
	border-top: 2px solid var(--img-caption-color);	
	margin-top: 20px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 100px;
	margin-left:-2px;
}

figure.left figcaption {
	order:-1;
	margin-left:0;
	margin-right:-2px;
}

figure a:hover {
	box-shadow: inset 0px 0px 5px 5px var(--img-caption-color);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	COUNTRY FLAGS								(K3WKYA3A)	*/
/*! ----------------------------------------------------------- */



.icon-flag-usa, .icon-flag-eur, .icon-flag-jap {
	--icon-flag-size: 18px;
	
	background-image: url(Library/style/imageset/icons-flags.svg);
	width: var(--icon-flag-size);
	height: var(--icon-flag-size);
	background-size: calc(3 * var(--icon-flag-size)) calc(1 * var(--icon-flag-size));
	border-radius: 100px;
}

.icon-flag-eur 			{ background-position: calc(-0 * var(--icon-flag-size)) calc(-0 * var(--icon-flag-size));}
.icon-flag-usa 			{ background-position: calc(-1 * var(--icon-flag-size)) calc(-0 * var(--icon-flag-size));}
.icon-flag-jap 			{ background-position: calc(-2 * var(--icon-flag-size)) calc(-0 * var(--icon-flag-size));}



/*! */
/*! ----------------------------------------------------------- */
/*! 	BREADCRUMB									(VS2JY8GU)	*/
/*! ----------------------------------------------------------- */

:root {
	--breadcrumb-text-size: var(--text-size-small);
	--breadcrumb-text-color: var(--color-grey6);
	--breadcrumb-icon-filter: var(--filter-color-grey6);
	
	--breadcrumb-text-color-current: var(--color-grey9);
	--breadcrumb-icon-filter-current: var(--filter-color-grey9);
}

nav[aria-label=breadcrumb] {
	margin-bottom: 20px;
	display: inline-flex;
}

.breadcrumb {
	margin: 0; padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	font-size: var(--breadcrumb-text-size);
	color: var(--breadcrumb-text-color);
}

.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a { /* to align an icon if used */
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.breadcrumb .breadcrumb-item.current {
	color: var(--breadcrumb-text-color-current);
}

.breadcrumb-item+.breadcrumb-item::before {
	display: inline-flex;
	padding-right: 5px;
	padding-left: 5px;
	content: "/";
}

/* ICON */

.breadcrumb .breadcrumb-item .icon {
	margin-top: -1px;
	margin-right: 5px;
	filter: var(--breadcrumb-icon-filter);
}

.breadcrumb .breadcrumb-item.current .icon {
	filter: var(--breadcrumb-icon-filter-current);
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	PAGELINKS												*/
/*! ----------------------------------------------------------- */

.pageLinks .btn {
	margin: 0 2px;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] GAMEBOX STYLES						(YLC5F90U)	*/
/*! ----------------------------------------------------------- */

.gamebox {
	display: inline-block;
	box-shadow: 2px 2px 6px var(--color-shadow-black);
	/*background-color: var(--color-shadow-black);*/

	
	/* ref size: w=135px  h=190px */
	/*--gamebox-dvd-width: 135;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(190/135)); */
	
	width: calc(var(--gamebox-dvd-width)*1px);
	height: calc(var(--gamebox-dvd-height)*1px);
	
	border-radius: 3px; overflow: hidden;
}

.gamebox img {
	
	--gamebox-dvd-img-margin-left-percent: 0;
	--gamebox-dvd-img-margin-right-percent: 0;
	--gamebox-dvd-img-margin-top-percent: 0;
	--gamebox-dvd-img-margin-bottom-percent: 0;
	
	--gamebox-dvd-img-padding-right: calc(var(--gamebox-dvd-width)*var(--gamebox-dvd-img-margin-right-percent));
	--gamebox-dvd-img-padding-left: calc(var(--gamebox-dvd-width)*var(--gamebox-dvd-img-margin-left-percent));
	
	--gamebox-dvd-img-width: calc(var(--gamebox-dvd-width) - var(--gamebox-dvd-img-padding-left) - var(--gamebox-dvd-img-padding-right));
	width: calc(var(--gamebox-dvd-img-width)*1px);
	
	padding-left: calc(var(--gamebox-dvd-img-padding-left)*1px);
	
	--gamebox-dvd-img-padding-top: calc(var(--gamebox-dvd-height)*var(--gamebox-dvd-img-margin-top-percent));
	--gamebox-dvd-img-padding-bottom: calc(var(--gamebox-dvd-height)*var(--gamebox-dvd-img-margin-bottom-percent));
	
	--gamebox-dvd-img-height: calc(var(--gamebox-dvd-height) - var(--gamebox-dvd-img-padding-top) - var(--gamebox-dvd-img-padding-bottom));
	
	height: calc(var(--gamebox-dvd-img-height)*1px);
	
	padding-top: calc(var(--gamebox-dvd-img-padding-top)*1px);
}


/* ---- BOX MD: MD, SMS ---- */

/* REF SIZE (JAP, US, EU) : W = 129 mm,  H = 179 mm 	*/

.gamebox-md {
	--gamebox-dvd-width: 129;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(179/129));
	
	border-radius: 2px;
}
.gamebox-md img {
	--gamebox-dvd-img-margin-right-percent: 0.04;
	--gamebox-dvd-img-margin-top-percent: 0.02;
	--gamebox-dvd-img-margin-bottom-percent: 0.02;
}

.gamebox-md {
	background-image: url(Library/style/imageset/game-box/gamebox-cart-md.svg);
}


/* ---- 4/3 : ARCADE, 3DS VC, Wii VC, WiiWare ---- */

.gamebox-arcade,
.gamebox-3ds-vc,
.gamebox-wii-vc,
.gamebox-wiiware {
	--gamebox-dvd-width: 130;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(3/4)); /* ratio: 3/4 = 0,75 */
}

.gamebox-3ds-vc,
.gamebox-wii-vc,
.gamebox-wiiware {
	border-radius: 20px;
}

/* ---- SQUARE : ANDROID, IOS ---- */

.gamebox-mobile,
.gamebox-android,
.gamebox-ios,
.gamebox-palm,
.gamebox-psn {
	
	--gamebox-dvd-width: 100;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(130/130));
}

.gamebox-mobile,
.gamebox-android,
.gamebox-ios,
.gamebox-palm {
	
	border-radius: 25px;
	
}

/* ---- XBLA ---- */

	/* ref size: w=135px  h=190px */
	
.gamebox-xbla {
	--gamebox-dvd-width: 100;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(190/135));
}


/* ---- BOX GAME GEAR ---- */

/* REF SIZE - GG (US, EU) :	W = ??? mm,  	H = ??? mm 	*/


.gamebox-gg-us {
	
	/* ref size: w=497px  h=680px */
	--gamebox-dvd-width: 120;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(680/497));
	
	border-radius: 1px;
}

/* REF SIZE - GG (JAP) : 	W = 95 mm,  	H = 109 mm 	*/

.gamebox-gg-jap {
	
	--gamebox-dvd-width: 95;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(109/95));
	
	border-radius: 1px;
}



/* ---- CD: Mega CD - DREAMCAST ---- */

/* REF SIZE - MCD (JAP), DC (JAP, US, EU) : 	W = 142 mm,  	H = 125 mm 	*/
/* REF SIZE - MCD (US, EU) : 	W = ???,  		H = ??? 	*/



.gamebox-cd,
.gamebox-dc-eu {
	/* /!\ MCD: JAP & EUR/US have different sizes */
	/* /!\ DC: JAP, EUR & US have different colors */
	
	/* ref size: w=142px  h=125px */ 	
	--gamebox-dvd-width: 142;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(125/142)); /* ratio: 125/142 = 0,88 */
	
	border-radius: 1px;
}
.gamebox-cd img,
.gamebox-dc-eu img {
	--gamebox-dvd-img-margin-left-percent: 0.11;
	--gamebox-dvd-img-margin-right-percent: 0.02;
	--gamebox-dvd-img-margin-top-percent: 0.02;
	--gamebox-dvd-img-margin-bottom-percent: 0.02;
}

.gamebox-cd {
	background-image: url(Library/style/imageset/game-box/gamebox-format-cd.svg);
}
.gamebox-dc-eu {
	background-image: url(Library/style/imageset/game-box/gamebox-dc.svg);
}


/* ---- 32X ---- */

/* REF SIZE - 32X (JAP, US, EU) : 	W = 130 mm,  	H = 179 mm 	*/

.gamebox-32x {
	--gamebox-dvd-width: 130;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(179/130));
	
	border-radius: 1px;
}


/* ---- GBA ---- */


/* REF SIZE - GBA (JAP) : 	W = 137 mm,  	H = 88 mm 	*/

.gamebox-gba-jap {
	--gamebox-dvd-width: 137;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(88/137)); /* ratio: 126/126 = 1 */
	
	border-radius: 1px;
}

/* REF SIZE - GBA (EU) : 	W = 126 mm,  	H = 126 mm 	*/

.gamebox-gba-us {
	--gamebox-dvd-width: 126;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(126/126)); /* ratio: 126/126 = 1 */
	
	border-radius: 1px;
}


/* ---- NeoGeo Pocket Color ---- */

/* REF SIZE - NGP (?) : 	W = ???,  	H = ??? mm 	*/

.gamebox-ngpc {
	
	/* /!\ NGPC: JAP & EUR/US have different sizes */
	
	/* ref size: w=600px  h=700px */ /* NEED MILIMETERS VALUES */ 
	--gamebox-dvd-width: 126;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(700/600)); /* ratio: 700/600 = 1, 166 */
	
	border-radius: 1px;
}


/* ---- Pico ---- */

/* REF SIZE - PICO (?) : 	W = ??? mm,  	H = ??? mm 	*/

.gamebox-pico {
	
	/* /!\ MCD: JAP & EUR/US have different sizes */
	
	/* ref size: w=200px  h=???px */ /* NEED MILIMETERS VALUES */
	--gamebox-dvd-width: 200;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(640/500)); /* ratio: 640/500 = 1,28 */
	
	border-radius: 1px;
}

/* ---- Game.com ---- */

/* REF SIZE - G.C (?) : 	W = ??? cm,  	H = ??? cm 	*/

.gamebox-game-com {
	
	/* ref size: w=320px  h=430px */ /* NEED MILIMETERS VALUES */ 
	--gamebox-dvd-width: 135;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(430/320)); /* ratio: 430/320 = 1,34 */
	
	border-radius: 1px;
}


/* ---- DS, 3DS ---- */

/* REF SIZE - DS, 3DS (JAP, US, EU) : 	W = 135 mm,  	H = 125 mm 	*/

.gamebox-ds {
	--gamebox-dvd-width: 135;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(125/135)); /* ratio: 125/135 = 1 */
}

.gamebox-ds img {
	--gamebox-dvd-img-margin-right-percent: 0.04;
	--gamebox-dvd-img-margin-top-percent: 0.03;
	--gamebox-dvd-img-margin-bottom-percent: 0.03;
}
.gamebox-ds {
	background-image: url(Library/style/imageset/game-box/gamebox-ds.svg);
}


/* ---- N-GAGE ---- */

/* REF SIZE - N-G (JAP, US, EU) : 	W = 135 mm,  	H = 95 mm 	*/

.gamebox-n-gage {
	--gamebox-dvd-width: 135;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(95/135));
}

.gamebox-n-gage img {
	--gamebox-dvd-img-margin-right-percent: 0.05;
	--gamebox-dvd-img-margin-top-percent: 0.04;
	--gamebox-dvd-img-margin-bottom-percent: 0.04;
}
.gamebox-n-gage {
	background-image: url(Library/style/imageset/game-box/gamebox-ngage.svg);
}


/* ---- PSP ---- */

/* REF SIZE - PSP (JAP, US, EU) : 	W = 106 mm,  	H = 180 mm 	*/

.gamebox-psp {
	--gamebox-dvd-width: 106;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(180/106));
}

.gamebox-psp img {
	--gamebox-dvd-img-margin-right-percent: 0.04;
	--gamebox-dvd-img-margin-top-percent: 0.03;
	--gamebox-dvd-img-margin-bottom-percent: 0.03;
}
.gamebox-psp {
	background-image: url(Library/style/imageset/game-box/gamebox-psp.svg);
}


/* ---- PS VITA ---- */

/* REF SIZE - PSV (JAP, US, EU) : 	W = 105 mm,  	H = 135 mm 	*/

.gamebox-ps-vita {
	--gamebox-dvd-width: 105;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(135/105));
}

.gamebox-ps-vita img {
	--gamebox-dvd-img-margin-right-percent: 0.055;
	--gamebox-dvd-img-margin-top-percent: 0.04;
	--gamebox-dvd-img-margin-bottom-percent: 0.04;
}
.gamebox-ps-vita {
	background-image: url(Library/style/imageset/game-box/gamebox-psvita.svg);
}




/* ---- DVD: PS2, Wii, WiiU, Xbox, Xbox 360, GameCube ---- */

/* REF SIZE - DVD BOX : 	W = 135 mm,  	H = 190 mm 	*/

/* REF SIZE - GC (JAP) : 	W = 107 mm,  	H = 150 mm 	*/


.gamebox-dvd-ps2,
.gamebox-dvd-wii,
.gamebox-dvd-wiiu,
.gamebox-dvd-xbox,
.gamebox-dvd-black {
	
	/* ref size: w=135px  h=190px (DVD) */
	--gamebox-dvd-width: 135;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(190/135));   /* ratio: 190/135 = 1,4 */
}

.gamebox-dvd-ps2 img,
.gamebox-dvd-wii img,
.gamebox-dvd-wiiu img,
.gamebox-dvd-xbox img,
.gamebox-dvd-black img {
	
	--gamebox-dvd-img-margin-right-percent: 0.04;
	--gamebox-dvd-img-margin-top-percent: 0.02;
	--gamebox-dvd-img-margin-bottom-percent: 0.02;
}

.gamebox-dvd-ps2 {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-ps2.svg);
}
.gamebox-dvd-wii {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-wii.svg);
}
.gamebox-dvd-wiiu {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-wiiu.svg);
}
.gamebox-dvd-xbox {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-xbox.svg);
}
.gamebox-dvd-black {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-gc.svg);
}



/* ---- SATURN ---- */

/* REF SIZE - SATURN (US, EU) : W = 132 mm,  	H = 203 mm 	*/

/* REF SIZE - SATURN (JAP) : 	W = 142 mm,  	H = 125 mm 	*/


.gamebox-sat-us {
	
	/* ref size: w=135px  h=190px (DVD) */
	--gamebox-dvd-width: 132;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(203/132));
}

.gamebox-sat-us img {
	
	--gamebox-dvd-img-margin-right-percent: 0.02;
	--gamebox-dvd-img-margin-top-percent: 0.01;
	--gamebox-dvd-img-margin-bottom-percent: 0.01;
}

.gamebox-sat-us {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-gc.svg);
}

/* ---- BLU-RAY: PS3, PS4, Xbox One ---- */

/* REF SIZE - BLU-RAY BOX : 	W = 135 mm,  	H = 171 mm 	*/


.gamebox-br-ps3,
.gamebox-br-ps4,
.gamebox-br-xbo {
	
	--gamebox-dvd-width: 135;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(171/135));
}
.gamebox-br-ps3 img,
.gamebox-br-ps4 img,
.gamebox-br-xbo img {
	
	--gamebox-dvd-img-margin-right-percent: 0.04;
	--gamebox-dvd-img-margin-top-percent: 0.02;
	--gamebox-dvd-img-margin-bottom-percent: 0.02;
}

.gamebox-br-ps3 img {
	--gamebox-dvd-img-margin-top-percent: 0.08;
}
.gamebox-br-xbo img {
	--gamebox-dvd-img-margin-top-percent: 0.09;
}

.gamebox-br-ps3 {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-ps3.svg);
}
.gamebox-br-ps4 {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-ps4.svg);
}
.gamebox-br-xbo {
	background-image: url(Library/style/imageset/game-box/gamebox-dvd-xboxone.svg);
}


/* ---- Switch ---- */

/* REF SIZE - SWITCH : 	W = 104 cm,  	H = 170 cm 	*/


.gamebox-switch {
	
	--gamebox-dvd-width: 104;
	--gamebox-dvd-height: calc(var(--gamebox-dvd-width)*(170/104));
}
.gamebox-switch img {
	
	--gamebox-dvd-img-margin-right-percent: 0.04;
	--gamebox-dvd-img-margin-top-percent: 0.03;
	--gamebox-dvd-img-margin-bottom-percent: 0.03;
}

.gamebox-switch {
	background-image: url(Library/style/imageset/game-box/gamebox-ns.svg);
}






/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] FULLSCREEN POP-UP MENU							*/
/*! ----------------------------------------------------------- */


.open-fullscreen-popup-menu .popup-menu {
	display: none;
}

#fullscreen-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
    opacity: 0.4;
    background: var(--bg-color-black);
    z-index:200;
}

#fullscreen-popup-window-bg {
	position:fixed; 
	top: 0; left: 0; bottom: 0; right: 0;
	z-index:300;
	display: flex;
	justify-content: center;
	align-items: center;
}

#fullscreen-popup-window-bg .fullscreen-popup-window {
	background-color: var(--bg-color-default-clearer);
	border-radius: var(--box-round-big);
	box-shadow: 0px 5px 10px var(--color-shadow-black);
	overflow: hidden;
	width: 280px;
}

#fullscreen-popup-window-bg .fullscreen-popup-window .popup-title {
	display: flex;
	border-bottom: 1px var(--bg-color-default-darker) solid;
	align-items: center;
	padding: 15px 20px 12px 20px;
	font-size: .95em;
	background-color: var(--bg-color-default);
	border-radius: var(--box-round-big);
}

#fullscreen-popup-window-bg .fullscreen-popup-window .popup-title .fullscreen-popup-close-btn {
	width: 18px; height: 18px;
	border: 1px var(--btn-color-veryclear) solid;
	background-color: var(--bg-color-default);
	color: var(--text-color-default);
	text-align: center;
	border-radius: var(--box-round-big);
	font-size: .8em;
	cursor: pointer;
	margin-right: 15px;
	overflow: hidden;
	font-weight: bold;
}

#fullscreen-popup-window-bg .fullscreen-popup-window .popup-title .fullscreen-popup-close-btn:hover {
	background-color: var(--bg-color-default-clearer);
	color: var(--text-color-black);
}








/*! */
/*! ----------------------------------------------------------- */
/*! 	HEADER GENERAL											*/
/*! ----------------------------------------------------------- */


header#main-header {
	position:fixed;
	top:0; left:0;
	width: 100%;
	z-index: 100;
}

header#main-header #top-banner {
	display: flex;
	width: 940px;
	margin: 0px auto; /* Center the div to the page */
}

@media screen and (max-width: 940px) { header#main-header #top-banner {
		width: 700px;
}}
@media screen and (max-width: 720px) { header#main-header #top-banner {
		width: 96%;
}}

header#main-header #top-banner-left, header#main-header #top-banner-right {
	display: flex;
	width: 100%;
}

@media screen and (max-width: 720px) { header#main-header #top-banner-left {
	width: 65px;
}}

header#main-header #top-banner-right {
	justify-content: flex-end;
}

@media screen and (max-width: 720px) { header#main-header #top-banner-right {
	justify-content: space-around;
}}


/* ======== SITE LOGO ======== */

header#main-header a.logo-homepage {
	width: 233px; height: 55px;
}

header#main-header a.logo-homepage:hover {
	background-color: var(--bg-color-blue-darker);
}

header#main-header .logo-img {
	width: 215px; height: 47px;
	margin: 4px 10px;
}

header#main-header .logo-img.default {
	background: url(Soniconline/Style/Imageset/main-header-title.svg) top left no-repeat;
}
header#main-header .logo-img.xmas {
	background: url(Soniconline/Style/Imageset/main-header-title.svg) top left no-repeat;
	/*background: url(Soniconline/Style/Imageset/main-header-title-xmas.png) top left no-repeat;*/
}

#menu-mobile.droplist {
	display: none;
}

@media screen and (max-width: 940px) {
	
	header#main-header a.logo-homepage {
		width: 75px; height: 55px; overflow: hidden;
	}
	header#main-header .logo-img {
		width: 55px; height: 55px;
		margin: 0px 10px;
	}
	header#main-header .logo-img.default, header#main-header .logo-img.xmas {
		width: 43px; height: 47px;
		background-size: 215px 47px;
		background-position: -62px 0px;
		margin-top: 5px;
	}
	header#main-header .logo-img.xmas {
	}
}

@media screen and (max-width: 720px) { 

	header#main-header a.logo-homepage {
		display: none;
	}
	
	#menu-mobile.droplist {
		display: block;
		/*position: relative;*/
	}
	
	#menu-mobile.droplist .droplist-btn {
		/*cursor: pointer;*/
		width: 50px; height: 55px;
		margin: 0;
		margin-left: 3px; margin-right: 6px;
		background: url(Soniconline/Style/Imageset/main-header-title.svg) top left no-repeat;
		background-size: 251px 55px;
		background-position: -72px 0px;
	}
	
	header#main-header #menu-mobile .droplist-btn.selected {
		/*filter: invert(0) saturate(10000%) hue-rotate(90deg);*/
	}
		
	#menu-mobile.droplist .droplist-menu {
		/*position: absolute;
		top: 55px;*/
		left: -10px;
		width: 100vw;
		/*box-shadow: 0px 2px 2px var(--color-shadow-black);
		border: none;*/
		background-color: var(--bg-color-blue);
		font-weight: bold;
	}
	
	#menu-mobile.droplist .droplist-menu a .droplist-item div {
		color: var(--bg-color-default);
	}
	
	#menu-mobile.droplist .droplist-menu .droplist-item:hover {
		background-color: var(--bg-color-blue-darker);
	}
	
	/*.vertical-separator {
		width: 1px;
		height: 45px;
		background-color: gray;
		margin-top: 5px;
	}
	
	header#main-header #menu-mobile .option {
		display: flex; align-items: center;
		padding: 10px 20px;
		font-size: 1.2em;
		height: 35px;
	}*/
	
	header#main-header #menu-mobile .droplist-item .icon {
		--icon-size: 30px;
		margin-right: 15px;
		filter: var(--icon-filter-white);
	}
	
	/*header#main-header #menu-mobile .separator {
		border-bottom: 1px #E1E1E5 solid;
	}*/
}



/* =================================================================================================== */
/* ========= MENU ICONS
/* =================================================================================================== */

header#main-header .menu-button {
	display: flex; flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 61px; height: 55px;
	font-size: 11px;
	font-weight: bold;
}

header#main-header a .menu-button {
	color: var(--text-color-orange);
}

header#main-header .menu-button .icon {
	filter: var(--icon-filter-orange);
	margin-bottom: 3px;
}

header#main-header a .menu-button:hover {
	background-color: var(--bg-color-blue-darker);
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

header#main-header a:hover {
	text-decoration: none;
}

header#main-header #top-banner-right a .menu-button {
	color: var(--text-color-clear-bgblue);
}

header#main-header #top-banner-right .menu-button .icon {
	filter: var(--icon-filter-white);
}

@media screen and (max-width: 720px) { 
	
	header#main-header .menu-button.menu-games,
	header#main-header .menu-button.menu-programs,
	header#main-header .menu-button.menu-nozone,
	header#main-header .menu-button.menu-dossiers,
	header#main-header .menu-button.menu-videos,
	header#main-header .menu-button.menu-search {
		display: none;
}}



/* =================================================================================================== */
/* ========= NOTIF
/* =================================================================================================== */


header#main-header #notifications-widget .menu-button, 
header#main-header #notifications-widget-disable .menu-button  {
	width: 55px; height: 55px;
}

header#main-header #notifications-widget-disable {
	opacity: .2;
}

@media screen and (max-width: 720px) { #notifications-widget, #notifications-widget-disable {
	width: 61px;
	background-position: -479px 0px;
}}

#notifications-widget .droplist .droplist-btn {
	width: 55px; height: 55px;
	cursor: pointer;
	display: flex; justify-content: center;align-items: center;
}
@media screen and (max-width: 720px) { #notifications-widget .droplist .droplist-btn {
	width: 61px;
}}

#notifications-widget .droplist .droplist-btn .icon {
	filter: var(--icon-filter-white);
}

/* Main button selected */
#notifications-widget .droplist .droplist-btn.selected {
	background-color: var(--bg-color-default-clearer);
}
@media screen and (max-width: 720px) { #notifications-widget .droplist .droplist-btn.selected {
	background-position: -644px 0px;
}}
#notifications-widget .droplist .droplist-btn.selected .icon {
	filter: inherit;
}

/* Counter */
#notifications-widget .droplist .droplist-btn .counter {
	position:absolute; top:9px; left: 28px;
	color: white; text-align: center; 
	font-size: var(--text-size-small); 
	font-weight: bold;
	background-color: red;
	width: 19px; height: 19px;
	padding: 0px;
	border-radius: 100px; /* used to make round button */
	box-shadow: 1px 1px 5px var(--color-shadow-black);
}

#notifications-widget .droplist .droplist-menu {
	width: 350px;
}


#notifications-widget .droplist .droplist-menu .droplist-item {
	white-space: normal; 
}

#notifications-widget .droplist .droplist-menu .user-avatar {
	--user-avatar-icon: 50px;
	margin-right: 10px;
}

/* marked */
#notifications-widget .droplist .droplist-menu .droplist-item.marked {
	 background-color: var(--text-color-orange); /* orange highlist */
}

/* mobile menu: ajust the droplist-menu position & size to fit in a mobile screen */
@media screen and (max-width: 720px) { 
	#notifications-widget .droplist .droplist-menu {
		right:-70px;
		width: 320px;
		font-size: .8em;
	}
	#notifications-widget .droplist .droplist-item {
		padding: 5px 10px;
	}
}


/* =================================================================================================== */
/* ========= USER DROPLIST MENU
/* =================================================================================================== */

#user-widget {
	width: 55px; height: 55px;
}


@media screen and (max-width: 720px) { #user-widget {
	width: 61px;
	background-position: -534px 0px;
}}

/* Droplist button */

#user-widget #user_menu.droplist .droplist-btn {
	width: 55px; height: 55px;
	display: flex; justify-content: center; align-items: center;
	cursor: pointer;
}
@media screen and (max-width: 720px) { #user-widget #user_menu.droplist .droplist-btn {
	width: 61px;
}}

#user-widget #user_menu.droplist .droplist-btn.selected { /* with mouse-over we change the background color */
	background-color: var(--bg-color-default-clearer);
}

#user-widget #user_menu.droplist .droplist-btn .user-avatar {
	--user-avatar-size: 33px;
}
@media screen and (max-width: 720px) { #user-widget #user_menu.droplist .droplist-btn .user-avatar {
	margin-left: 14px;
}}





/* === DROPLIST MENU (LOGGED) ===  */


#user-widget #user_menu.droplist .droplist-item .icon {
	margin-right: 10px;
	--icon-size: 16px;
	/*filter: var(--icon-filter-white);*/
}


/* === DROPLIST MENU LOGIN & PWD ===  */


#user-widget #user_menu.droplist .droplist-btn .icon.icon-user {
	filter: var(--icon-filter-white);
}
#user-widget #user_menu.droplist .droplist-btn.selected .icon.icon-user {
	filter: inherit;
}

#user-widget #user_menu.droplist .droplist-menu.notlogged form#login-form input[type=text],
#user-widget #user_menu.droplist .droplist-menu.notlogged form#login-form input[type=password] {
	width: 142px;
	margin-bottom: 20px;
}

#user-widget #user_menu.droplist .droplist-menu.notlogged .btn,
#user-widget #user_menu.droplist .droplist-menu.notlogged .btn .btn-text {
	width: 100%;
	justify-content: center;
}


/* Dark mode button */

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
	display: flex;
	align-items: center;
}
.theme-switch {
	display: inline-block;
	height: 20px;
	position: relative;
	width: 35px;
}

.theme-switch input {
	display:none;
}

.slider {
	background-color: var(--bg-color-default-darker);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}

.slider:before {
	background-color: var(--bg-color-white);
	bottom: 1px;
	content: "";
	height: 18px;
	left: 1px;
	position: absolute;
	transition: .4s;
	width: 18px;
}

input:checked + .slider {
	background-color: var(--color-alert-green);
}

input:checked + .slider:before {
	transform: translateX(15px);
}

.slider.round {
	border-radius: 34px; /* used to make round button */
}

.slider.round:before {
	border-radius: 50%; /* used to make round button */
}



/* =================================================================================================== */
/* === TAGLINE
/* =================================================================================================== */

#tagline {
    width: 100%;
    background-color: var(--bg-color-blue-darker);
    height: 16px; overflow: hidden;
}

#tagline > div {
    width: calc(940px - 20px);
    margin: 0 auto;
    font-size: 10px; color: var(--text-color-default-clearer);
    text-align: right;
    margin-top: 1px;
}

@media screen and (max-width: 940px) { #tagline > div {
	width: calc(700px - 20px);
}}

@media screen and (max-width: 720px) { #tagline > div {
	width: calc(96% - 20px);
}}

/* =================================================================================================== */
/* === CALENDAR EVENT
/* =================================================================================================== */

#calendar-event {
    width: 100%;
    background-color: var(--color-alert-red);
    color: var(--text-color-black);
    min-height: 18px; overflow: hidden;
}

#calendar-event > div {
    width: 940px;
    margin: 0 auto;
    font-size: 1em; 
}

@media screen and (max-width: 940px) { #calendar-event > div {
	width: 700px;
}}

@media screen and (max-width: 720px) { #calendar-event > div {
	width: 96%;
	font-size: .9em; 
}}

#calendar-event > div a {
    color: var(--text-color-white);
}

#calendar-event .name {
	display: inline-block; vertical-align:top;
	
	text-align: center;
	font-variant: small-caps;
}

#calendar-event #clockdiv {
	text-align: center;
	margin-top: -2px;
}
@media screen and (max-width: 720px) { #calendar-event #clockdiv {
	margin-top: -1px;
}}

#calendar-event #clockdiv .name {
	display: inline-block; vertical-align:top;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv .name {
	margin-right: 5px;
}}

#calendar-event #clockdiv div.countdown {
	display: inline-block; vertical-align:top;
}

#calendar-event #clockdiv div.block {
	display: inline-block; vertical-align:top;
	margin-left: 5px;
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-red);
	color: var(--text-color-white);
	padding: 0px 5px;
	margin-top: 2px;
	line-height: 16px;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv div.block {
	margin-left: 0px;
	padding: 0px 5px;
	border-radius: var(--box-round-big);
	line-height: 15px;
}}

@media screen and (max-width: 720px) { #calendar-event #clockdiv div.block span.mobile { 
	display: inline-block;
}}

#calendar-event #clockdiv span.days,
#calendar-event #clockdiv span.hours,
#calendar-event #clockdiv span.minutes,
#calendar-event #clockdiv span.seconds{
	font-weight: bold;
}

#calendar-event #clockdiv .smalltext {
    font-size: .7em;
    padding-left: 1px;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv .smalltext {
	font-size: .8em;
}}

header#main-header #calendar-event #text_during {
    display: none;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	FOOTER													*/
/*! ----------------------------------------------------------- */


footer {
	z-index: 1;
}

footer .box-footer {
	display: flex;
	width: 960px;
	margin: 0px auto;
	padding: 5px;
	align-items: center;
}

@media screen and (max-width: 940px) { footer .box-footer {
	width: 700px;
}}
@media screen and (max-width: 720px) { footer .box-footer {
	width: 96%;
}}


/* ---- FOOTER > USERS ---- */
 
footer section#users {
	background-color: var(--bg-color-default-clearer);
}

footer section#users .vertical-separator {
	width: 1px; height: 40px;
	background-color: var(--text-color-default);
	margin: 0 20px;
}

footer section#users .icon {
	--icon-size: 55px;
}

footer section#users .member-link-bt {
		display: flex;
	}

footer section#users .subinfo {
	margin-top: 10px;
}

@media screen and (max-width: 720px) { 
	
	footer section#users .icon {
		--icon-size: 25px;
	}
	
	footer section#users .vertical-separator {
		margin: 0 5px;
	}
	
	footer section#users .vertical-separator.btn-member {
		display: none;
	}
	
	footer section#users .btn {
		margin-left: 5px;
	}

}


/* ---- FOOTER > SITE ABOUT ---- */

footer section#site-about .box-footer {
	display: block;
	text-align: center;
	padding: 20px 0px;
	border-bottom: 1px var(--bg-color-default) solid;
}


/* ---- FOOTER > INFOS ---- */

footer section#infos {
	padding: 20px 0px;
	/*background-color: var(--bg-color-blue);
	color: var(--text-color-clear-bgblue);*/
}

@media screen and (max-width: 720px) { footer section#infos {
	padding: 0px;
}}

footer section#infos .box-footer {
	align-items: flex-start;
	justify-content: space-around;
}

@media screen and (max-width: 720px) { footer section#infos .box-footer {
	width: 96%;
	display: block;
}}

footer section#infos .column {
	width: 30%;
}

@media screen and (max-width: 720px) { footer section#infos .column {
	width: auto;
	margin: 0px; padding: 20px 10px;
	text-align: center;
}}

footer section#infos .title {
	/*color: #c2c8d0;
	margin-bottom: 10px;*/
}

@media screen and (max-width: 720px) { footer section#infos .title {
	margin-bottom: 5px;
	text-align: center;
}}

footer section#infos .icons {
	display: flex;
}

@media screen and (max-width: 720px) { footer section#infos .icons {
	justify-content: center;
}}

footer section#infos .icons .icon-link {
	--icon-link-size: 40px;
	margin: 0 5px;
}

footer section#infos .icons .icon-link:hover {
	box-shadow: 0px 2px 10px 0px var(--color-shadow-black);
}

footer section#infos .rss {
	display: flex;
	align-items: center;
}
@media screen and (max-width: 720px) { footer section#infos .rss {
	justify-content: center;
}}


footer section#infos .rss .icon-link {
	--icon-link-size: 14px;
	margin-right: 5px;
}

footer section#infos a, footer section#infos a:hover {
	color: var(--text-color-clear-bgblue);
}


/* ---- FOOTER > MENU ---- */

footer section#menu {
	border-top: 1px #1a2533 var(--color-border-veryclear);
}


/* ---- FOOTER > COPYRIGHTS ---- */

footer section#copyrights .box-footer {
	padding: 20px 0px;
}

footer section#copyrights .icon {
	--icon-size: 40px;
	filter: var(--icon-filter-grey);
}


/* ---- FOOTER > ADMIN ---- */

footer section#admin {
	width: 100%;
	background-color: var(--bg-color-blue);
	color: var(--text-color-default);
	
}


footer section#admin .content {
	text-align: center;
	border-top: 1px var(--bg-color-blue-darker) solid;
	width: 100%;
	padding-top: 5px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	RIGHT COLLUMN			 								*/
/*! ----------------------------------------------------------- */



/*! ---- FEATURES ---- */



section#right-social .icons {
	display: flex;
	justify-content: space-between;
}

section#right-social .icons .icon-link {
	--icon-link-size: 65px;
}

section#right-social .icons div:hover {
	opacity: .8;
}

@media screen and (max-width: 940px) {
	section#right-social .icons .icon-link {
	--icon-link-size: 48px;
}
}



/*! ---- LAST GAMES ---- */



@media screen and (max-width: 940px) { section#right-games .box-round {
	width: 100px; height: 70px;
}}

@media screen and (max-width: 940px) { section#right-games .box-round img {
	width: 100px; height: 70px;
}}



/*! ---- PREMIUM ---- */



section#right-premium .premium {
	width: 300px; height: 130px;
	background-image: url(Soniconline/Style/Imageset/premium-btn.png);
}

@media screen and (max-width: 940px) { section#right-premium .premium {
	width: 220px; height: 95px;
	background-size: 220px;
}}
@media screen and (max-width: 720px) { section#right-premium .premiums {
}}



/*! ---- LAST PROGRAMS (EMISSIONS) ---- */



section#right-lastprogram .program-img {
	--lastprogram-logo-size:70px;
	width: var(--lastprogram-logo-size); height: var(--lastprogram-logo-size);
	margin-right: 10px;
}

section#right-lastprogram .program-img div {
	--lastprogram-logo-width: calc((var(--lastprogram-logo-size)*300)/165); /* taille image d'origine: 300x165 */
	
	width: var(--lastprogram-logo-width); /*calc(300px*70px/165px); */
	height: var(--lastprogram-logo-size);
	
	margin-left: calc((var(--lastprogram-logo-width) - var(--lastprogram-logo-size))/-2);
}


section#right-lastprogram .program-text {
	width: 200px;
	
}

@media screen and (max-width: 940px) { 
	section#right-lastprogram .program-img {
		display: none;
	}
	section#right-lastprogram .program-text {
		width: 100%;
}}



/*! ---- KOH ---- */



section#right-koh .box-round {
	position: relative;
	width: 300px; height: 136px;
	background-image: url(Soniconline/Style/Imageset/right-koh.png);
}

section#right-koh .text {
	width: 290px;
	padding: 5px;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5);
	color: var(--text-color-clear-bgblue);
}

@media screen and (max-width: 940px) { 
	section#right-koh .box-round {
		width: 220px; height: 100px;
		background-size: 220px 100px;
	}
	section#right-koh .text {
		font-size: var(--text-size-verysmall);
	}
}



/*! ---- QUOTE ---- */



section#right-quote .user-avatar {
	--user-avatar-size: 30px;
	margin-right: 10px;
}

section#right-quote .graphic {
	width: 20px; height: 20px;
	margin-left: 250px;
	background-image: url(Soniconline/Style/Imageset/quote-graphic2.png);
}

@media screen and (max-width: 940px) { section#right-quote .grid_3 {
	width: 100px;
}}

@media screen and (max-width: 940px) { section#right-quote .graphic {
	margin-left: 170px;
}}



/*! ---- BEST VIDEOS ---- */



section#right-bestvideos .box {
	width: 280px;
	padding: 10px;
}

section#right-bestvideos .box .icon {
	display: inline-block; vertical-align: top;
	width: 140px;
	height: 60px;
}

section#right-bestvideos .box .text {
	display: inline-block; vertical-align: top;
	width: 100px;
	height: 60px;
}

section#right-topic-with-date .user-avatar {
	--user-avatar-size: 35px;
}



/*! ---- PARTNERS ---- */



section#right-partners .box {
	display: inline-block; vertical-align: top;
	width: 140px; height: 80px;
}

@media screen and (max-width: 940px) { section#right-partners .box, section#right-partners .box img {
	width: 100px;
	height: 57px;
	overflow: hidden;
}}
@media screen and (max-width: 720px) { section#right-partners .box {
}}


/*
*	SonicOnline.fr General CSS
*	--------------------------
*/

/*! */
/*! ----------------------------------------------------------- */
/*! 	FONTS, VARIABLES & THEMES 								*/
/*! ----------------------------------------------------------- */

@font-face { font-family: "Merriweather"; src: url('Soniconline/Style/Fonts/Merriweather-Regular.ttf'); }

:root {

	/* TEXT: size */
	
	--text-size-verysmall: 	12px;
	--text-size-small: 		14px;
	--text-size-normal: 	17px;
	--text-size-big: 		24px;
	
	--text-lineheight-normal: 1.3;
	
	/* Box round */

	--box-round-normal: 4px;
	--box-round-big: 	8px;
	
	
	/* ---- DEFAULT COLORS ---- */


	--bg-color-default: 		#BFC3CA; 	/* Default background color: clear grey */
	--bg-color-default-clearer: #D5D7DA;	/* clearer than the default background */
	--bg-color-default-darker: 	#B6BAC1;
	--bg-color-blue: 			#4D5F75;	/* Secondary background color: blue */
	--bg-color-blue-darker: 	#3A495B;	/* Secondary background color: blue darker */
	--bg-color-white: 			#EBEBEB;	/* Secondary background color: blue */
	--bg-color-black: 			#1E2227;	/* Secondary background color: blue */
	
	--text-color-default: 				#4D5157; 	/* Default text color: dark grey */
	--text-color-default-clearer: 		#7D8187; 	/* Clearer default text color */
	--text-color-black: 				var(--bg-color-black);	/* Black color */
	--text-color-orange: 				#DFA622;	/* Secondary text color: orange */
	--text-color-blue: 					var(--bg-color-blue);	/* same as blue background */
	--text-color-white: 				var(--bg-color-white);	/* White color */
	--text-color-clear-bgblue: 			var(--bg-color-default);	/* Clear text color used with dark background. Same value than default background */
	--text-color-link-default: 			#812215;
	
	
	/* button colors */
	
	--btn-color-veryclear: 			#ACB0B7; /* Very Clear grey. Used for clear buttons */
	
	/* Board post highlight colors */
	
	--bg-color-boardpost-highlight1-title: 		#77743c;
	--bg-color-boardpost-highlight1-content: 	#f9f8d8;
	--bg-color-boardpost-highlight2-title: 		#3c5b26;
	--bg-color-boardpost-highlight2-content: 	#eafade;
	
	
	--color-shadow-black: #1E222799; /* used as shadow. Always dark whatever the theme */
	
	--color-alert-red: 			#B22429;
	--color-alert-red-darker: 	#981F24;
	--color-alert-orange: 		#B3752D;
	--color-alert-green: 		#28AA61;
	
	
	/* ---- BUTTONS (override default values) ---- */
	
	
	--btn-text-size-normal: var(--text-size-normal);
	--btn-text-size-small: var(--text-size-small);
	--btn-text-fontweight: normal;
	
	--btn-round: var(--box-round-normal);
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: var(--text-color-default-clearer);
	--btn-clear-text: var(--text-color-default);
	
	--btn-clear-border-hover: var(--text-color-default);
	--btn-clear-text-hover: var(--text-color-black);
	
	--btn-clear-border-selected: var(--bg-color-blue-darker);
	--btn-clear-bg-selected: var(--bg-color-blue);
	--btn-clear-text-selected: var(--text-color-orange);
	
	--btn-clear-border-disabled: var(--btn-color-veryclear);
	--btn-clear-text-disabled: var(--btn-color-veryclear);
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: var(--bg-color-blue-darker);
	--btn-blue-bg: var(--bg-color-blue);
	--btn-blue-text: var(--bg-color-default);
	
	--btn-blue-border-hover: var(--bg-color-blue-darker);
	--btn-blue-bg-hover: var(--bg-color-blue-darker);
	--btn-blue-text-hover: var(--text-color-white);
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: var(--text-color-default-clearer);
	--btn-grey-bg: var(--btn-color-veryclear);
	--btn-grey-text: var(--text-color-black);
	
	--btn-grey-border-hover: var(--bg-color-black);
	--btn-grey-bg-hover: var(--text-color-default-clearer);
	--btn-grey-text-hover: var(--text-color-white);
	
	/* BTN RED COLORS */
	
	--btn-red-border: var(--color-alert-red-darker);
	--btn-red-bg: var(--color-alert-red);
	--btn-red-text: var(--text-color-white);
	
	--btn-red-border-hover: var(--color-alert-red-darker);
	--btn-red-bg-hover: var(--color-alert-red-darker);
	--btn-red-text-hover: var(--text-color-white);
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: var(--color-alert-green);
	--btn-green-bg: var(--color-alert-green);
	--btn-green-text: var(--text-color-white);
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
	
	/* ---- SLIDER BUTTON ON/OFF VALUES ---- */
	
	--btn-slider-color-border: 		var(--btn-color-veryclear);
	--btn-slider-color-bg: 			var(--bg-color-white);
	--btn-slider-color-shadow: 		var(--color-shadow-black);
	
	--btn-slider-color-selected:	var(--color-alert-green);

	/* ---- ICON FILTERS VALUES ---- */
	
	
	/* go to this website to get values: https://codepen.io/sosuke/pen/Pjoqqp */
	
	--icon-filter-txt-color-headers: invert(16%) sepia(21%) saturate(7156%) hue-rotate(343deg) brightness(101%) contrast(129%); /*#8B0000*/
	
	--icon-filter-blue: invert(36%) sepia(13%) saturate(1057%) hue-rotate(173deg) brightness(90%) contrast(80%);
	/*--icon-filter-white: invert(1);
	--icon-filter-white: invert(91%) sepia(8%) saturate(185%) hue-rotate(179deg) brightness(86%) contrast(87%);*/
	
	--icon-filter-white: invert(100%) sepia(0%) saturate(1%) hue-rotate(272deg) brightness(113%) contrast(84%);
	
	--icon-filter-orange: invert(71%) sepia(46%) saturate(721%) hue-rotate(358deg) brightness(89%) contrast(96%);
	
	--icon-filter-txt-color-headers: var(--icon-filter-blue);
	
	--icon-filter-txt-color-default: invert(40%) sepia(10%) saturate(269%) hue-rotate(177deg) brightness(91%) contrast(89%); /* #60646A */
	
	--icon-filter-darkgrey: invert(24%) sepia(1%) saturate(2207%) hue-rotate(316deg) brightness(88%) contrast(82%); /* #444 */
	--icon-filter-cleargrey: invert(100%) sepia(0%) saturate(7405%) hue-rotate(110deg) brightness(125%) contrast(60%); /* #ccc */
	--icon-filter-grey: invert(53%) sepia(1%) saturate(1358%) hue-rotate(320deg) brightness(87%) contrast(86%); /* #777 */
	--icon-filter-clearblue: invert(51%) sepia(56%) saturate(391%) hue-rotate(175deg) brightness(83%) contrast(86%); /* #5A7FB1 */
	--icon-filter-green: invert(74%) sepia(73%) saturate(443%) hue-rotate(39deg) brightness(99%) contrast(106%); /* #8FF732 */
	
	--icon-filter-xbox-green: invert(43%) sepia(75%) saturate(6976%) hue-rotate(74deg) brightness(98%) contrast(85%); /* #3A7D13 */
	--icon-filter-playstation-blue: invert(54%) sepia(97%) saturate(868%) hue-rotate(175deg) brightness(88%) contrast(94%); /* #379DDC */
	--icon-filter-nintendo-red: invert(44%) sepia(10%) saturate(3734%) hue-rotate(315deg) brightness(82%) contrast(77%); /* #B44E4E */
	--icon-filter-steam-darkblue: invert(18%) sepia(10%) saturate(6202%) hue-rotate(175deg) brightness(97%) contrast(97%); /* #0C3A5F */
	
	
	/* HEADER style (override default values) */
	
	--header-size-coeff-h1: 1.6;	
	--header-size-coeff-h2: 1.25;
	--header-size-coeff-h3: 1.05;
	
	--header-text-color-heading: var(--text-color-blue);
	
	--header-icon-color-filter: var(--icon-filter-txt-color-headers);
	
	/* SEPARATOR (override default values) */
	
	--separator-color: var(--btn-color-veryclear);
	
	
	/* DROPLIST (override default values) */
	
	--droplist-color-shadow: 		var(--color-shadow-black);
	
	--droplist-color-bg-default: 	var(--bg-color-default-clearer);
	--droplist-color-bg-hover: 		var(--bg-color-white);
	--droplist-color-separator: 	var(--btn-color-veryclear);
	
	--droplist-box-round: 			var(--box-round-normal);
	
	--droplist-text-color: 			var(--text-color-default);
	--droplist-text-color-hover: 	var(--text-color-default);
	--droplist-text-size-normal: 	var(--text-size-normal);
	--droplist-text-size-small: 	var(--text-size-small);
	
	
	/* GAMENOTE ICON/BUTTON (override default values) */
	
	--gamenote-default-color-bg: var(--bg-color-white);
	--gamenote-default-color-border:  var(--bg-color-default-darker);
	
	--gamenote-default-color-up: var(--color-alert-green); /* green */
	--gamenote-default-color-down: var(--color-alert-red); /* red */
	
	--gamenote-icon-size-normal: 30px;
	--gamenote-icon-size-small: 20px;
	
	--gamenote-icon-filter-default: var(--icon-filter-cleargrey);
	--gamenote-icon-filter-up: var(--icon-filter-xbox-green);
	--gamenote-icon-filter-down: var(--icon-filter-nintendo-red);
	
	
	/* TOOLTIP (override default values) */
	
	--tooltip-text-color: 		var(--text-color-white);
	--tooltip-text-size: 		var(--text-size-verysmall);
	--tooltip-bg-color: 		var(--bg-color-black);
	--tooltip-border-radius: 	var(--box-round-normal);
	--tooltip-shadow-color: 	var(--bg-color-black);
	
	
	/* DIALOG BOX (override default values) */
	
	--dialogbox-bg-color: var(--bg-color-default-clearer);
	--dialogbox-header-bg-color: var(--bg-color-default-darker);
	--dialogbox-separator-color: var(--bg-color-default-darker);
	--dialogbox-border-radius: var(--box-round-big);
	--dialogbox-shadow-color: var(--color-shadow-black);
	
	
	/* USER AVATAR IMAGE (override default values) */
	
	--user-avatar-image-size: 40px;
	--user-avatar-border-color: var(--text-color-default-clearer);
	--user-avatar-icon-filter-color: var(--icon-filter-txt-color-default);
	
	/* MULTI GALLERY (override default values) */
	
	--multigallery-bg-color: var(--bg-color-default-darker);
	--multigallery-text-size: var(--text-size-big);
	--multigallery-text-color: var(--text-color-white);
	--multigallery-text-bgcolor: var(--color-shadow-black);
	
	/* FIGURE CAPTION (CSS FRAMEWORK) */
	
	--img-caption-color: var(--bg-color-blue);
	
	/* FORM (override default values) */
	
	/*--form-label-text-size: var(--text-size-small);
	--form-caption-text-size: var(--text-size-verysmall);
	
	--form-input-bg-color: var(--bg-color-default-clearer);
	--form-input-border-color: var(--bg-color-default-darker);
	--form-input-border-color-selected: #666;*/
}


/* ---- THEME LIGHT ---- */
 
 
.theme-light {
	/* SAME COLORS THAN DEFAULT */
}


/* ---- THEME DARK ---- */


.theme-dark {
	
	--bg-color-default: 		#2A2723;
	--bg-color-default-clearer:	#322F2B;
	--bg-color-default-darker: 	#201F1D;
	--bg-color-blue: 			#3E5F84;	/* Secondary background color: blue */
	--bg-color-blue-darker: 	#2F4966;	/* Secondary background color: blue darker */
	--bg-color-white: 			#161617;	/* Secondary background color: blue */
	--bg-color-black: 			#EBEBEB;	/* Secondary background color: blue */
	
	
	--text-color-default: 				#B1ADA3;
	--text-color-default-clearer: 		#67625A;
	--text-color-black: 				#BFC3CA;	/* Black color */
	--text-color-orange: 				#EBA100;	/* Secondary text color: orange */
	--text-color-blue: 					#4f7eb5;	/* same as blue background */
	--text-color-white: 				var(--bg-color-white);	/* White color */
	--text-color-clear-bgblue: 			var(--text-color-default);	/* Clear text color used with dark background. Same value than default background */
	
	--btn-color-veryclear: 			#393633; /* Very Clear grey. Used for clear buttons */

	/* Board post highlight colors */
	
	--bg-color-boardpost-highlight1-title: 		#635f15;
	--bg-color-boardpost-highlight1-content: 	#3b380d;
	--bg-color-boardpost-highlight2-title: 		#456231;
	--bg-color-boardpost-highlight2-content: 	#303d26;
	
	
	
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: var(--text-color-default-clearer);
	--btn-clear-text: var(--text-color-default);
	
	--btn-clear-border-hover: var(--text-color-default);
	--btn-clear-text-hover: var(--text-color-black);
	
	--btn-clear-border-selected: var(--bg-color-blue-darker);
	--btn-clear-bg-selected: var(--bg-color-blue);
	--btn-clear-text-selected: var(--text-color-orange);
	
	--btn-clear-border-disabled: var(--btn-color-veryclear);
	--btn-clear-text-disabled: var(--btn-color-veryclear);
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: var(--bg-color-blue-darker);
	--btn-blue-bg: var(--bg-color-blue);
	--btn-blue-text: var(--text-color-orange);
	
	--btn-blue-border-hover: var(--bg-color-blue-darker);
	--btn-blue-bg-hover: var(--bg-color-blue-darker);
	--btn-blue-text-hover: var(--text-color-orange);
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: var(--text-color-default-clearer);
	--btn-grey-bg: var(--btn-color-veryclear);
	--btn-grey-text: var(--text-color-black);
	
	--btn-grey-border-hover: var(--bg-color-black);
	--btn-grey-bg-hover: var(--text-color-default-clearer);
	--btn-grey-text-hover: var(--text-color-black);
	
	/* BTN RED COLORS */
	
	--btn-red-border: var(--color-alert-red-darker);
	--btn-red-bg: var(--color-alert-red);
	--btn-red-text: var(--text-color-white);
	
	--btn-red-border-hover: var(--color-alert-red-darker);
	--btn-red-bg-hover: var(--color-alert-red-darker);
	--btn-red-text-hover: var(--text-color-white);
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: var(--color-alert-green);
	--btn-green-bg: var(--color-alert-green);
	--btn-green-text: var(--text-color-white);
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
	
	
	/* DROPLIST (override default values) */
	
	--droplist-color-shadow: 		var(--color-shadow-black);
	
	--droplist-color-bg-default: 	var(--bg-color-default-clearer);
	--droplist-color-bg-hover: 		var(--bg-color-white);
	--droplist-color-separator: 	var(--text-color-default-clearer);
	
	--droplist-box-round: 			var(--box-round-normal);
	
	--droplist-text-color: 			var(--text-color-default);
	--droplist-text-color-hover: 	var(--text-color-default);
	--droplist-text-size-normal: 	var(--text-size-normal);
	--droplist-text-size-small: 	var(--text-size-small);

}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] HTML, BODY, GENERAL SETTINGS						*/
/*! ----------------------------------------------------------- */


html {
    margin: 0px; padding: 0px; /*font-size: 100%;*/
}

body {
    margin: 0px auto; padding: 0px;
    height: 100%;
    background-color: var(--bg-color-default);
        
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    
    font-size: var(--text-size-normal);
    line-height: var(--text-lineheight-normal);
    
    font-style: normal;
    color: var(--text-color-default);
    
    background-size: 2%;
}

body.xmas {
	/*background-image: url(Soniconline/Style/Imageset/background-xmas.png);
	background-repeat: repeat;*/
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] TEXT SIZES & COLORS								*/
/*! ----------------------------------------------------------- */


a, a:link, a:visited, a:active { color: inherit; }
a:link, a:visited, a:active { text-decoration: none; }

.text-link-colored a:link, 
.text-link-colored a:visited, 
.text-link-colored a:active {color: var(--text-color-link-default);}



/* ---- COLOR WHITE ---- */


.text-color-white, .text-color-white a { 
	color: var(--text-color-white);
}


/* ---- COLOR DEFAULT CLEARER ---- */
/* Text clearer than the default text color */


.text-color-default-clearer, 	.text-color-default-clearer a {
	color: var(--text-color-default-clearer); 
}
a:hover .text-color-default-clearer, .text-color-default-clearer a:hover {
	color: var(--text-color-default);
}


/* ---- COLOR CLEAR BLUE BACKGROUND ---- */
/* Text with the same color than the background. Used with dark background */

.text-color-clear-bgblue, .text-color-clear-bgblue a  { 
	color: var(--text-color-clear-bgblue);	
}


/* ---- COLOR ORANGE ---- */

.txt-orange, .txt-orange a {
	color: var(--text-color-orange);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] BACKGROUND COLORS									*/
/*! ----------------------------------------------------------- */


.bg-default {
	background-color: var(--bg-color-default);
}

.bg-default-clearer {
	background-color: var(--bg-color-default-clearer);
}

.bg-default-darker {
	background-color: var(--bg-color-default-darker);
}

.bg-blue {
	background-color: var(--bg-color-blue);
}

.bg-blue-darker {
	background-color: var(--bg-color-blue-darker);
}

.bg-white {
	background-color: var(--bg-color-white);
}


/* Note colors */

.bgcolor-note-red {
	background-color: var(--color-alert-red);
}
.bgcolor-note-orange {
	background-color: var(--color-alert-orange);
}
.bgcolor-note-green {
	background-color: var(--color-alert-green);
}
.bgcolor-note-grey {
	background-color: var(--bg-color-default-darker);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] BOX STYLE											*/
/*! ----------------------------------------------------------- */


/* Box border (override) */

.box-border {
	border-color: var(--btn-color-veryclear);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] TEXT STYLES 										*/
/*! ----------------------------------------------------------- */


/* ---- QUOTE BLOCK (override) ---- */

blockquote + br {
	display: none; /* to remove "br" created just after "blockquote" */
}

blockquote {
	background-color: var(--bg-color-default);
}

blockquote blockquote {
	border-color: var(--text-color-default-clearer);
}

blockquote .quote-author {
	color: var(--text-color-blue);
}



/* ---- ARTICLE STYLE ---- */

/* Article Font */

.txt-classic {
	font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; 
	font-size: var(--text-size-normal);
	line-height: calc(var(--text-lineheight-normal) * 1.4);
}

/* H2 */

.txt-classic h2 {
	font-size: var(--text-size-big);
	margin: 20px 0 15px 0;
	font-weight: bold;
}
.txt-classic h2 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h2  {
	margin: 10px 0 8px 0;
}}

/* H3 */

.txt-classic h3 {
	font-size: var(--text-size-normal);
	margin: 20px 0 15px 0;
	font-weight: bold;
}
.txt-classic h3 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h3  {
	margin: 10px 0 8px 0;
}}

/* H4 */

.txt-classic h4 {
	font-size: var(--text-size-normal);
	margin: 15px 0 10px 0;
	font-weight: bold;
}
.txt-classic h4 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h3  {
	margin: 10px 0 8px 0;
}}

/* article quote */

article blockquote {
	margin: 0px; padding: 0px; 
	padding-left: 15px;
	border-left: 3px var(--bg-color-blue) solid;
	margin-left: 35px;
	width: calc(100% - 58px);
}

@media screen and (max-width: 720px) { article blockquote {
	margin-left: 0px;
	width: calc(96% - 0px);
}}

/* article coms */

section#article_coms blockquote {
	background-color: var(--bg-color-default-darker);
}

section#article_coms .row .left_box .user-avatar {
	--user-avatar-size: 60px;
}

/* article iframe */

article iframe.youtube-player {
	max-width: 96%;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] PAGE LAYOUT										*/
/*! ----------------------------------------------------------- */


section#main-content {
	width: 940px;
	margin: 0 auto;
	padding-top: 83px; 
	padding-bottom: 60px;
}

@media screen and (max-width: 940px) { section#main-content {
		width: 700px;
}}
@media screen and (max-width: 720px) { section#main-content {
		width: 96%;
		overflow: hidden;
}}

section#main-content #left {
	display: inline-block; vertical-align: top;
	width: 620px;
	margin-right: 20px;
}

@media screen and (max-width: 940px) { section#main-content #left {
	width: 460px;
}}
@media screen and (max-width: 720px) { section#main-content #left {
	width: 100%;
	margin-bottom: 20px; /*margin-top: -10px;*/
	margin-right: 0px;
}}

section#main-content #left-board {
	display: inline-block; vertical-align: top;
	width: 700px;
	margin-right: 20px;
}

@media screen and (max-width: 940px) { section#main-content #left-board {
	
}}
@media screen and (max-width: 720px) { section#main-content #left-board {
	width: 100%;
	margin-right: 0px;
}}

section#main-content #right {
	display: inline-block; vertical-align: top;
	width: 300px;
}

@media screen and (max-width: 940px) { section#main-content #right {
	width: 220px;
}}
@media screen and (max-width: 720px) { section#main-content #right {
	display: none;
}}

section#main-content #right-board {
	display: inline-block; vertical-align: top;
	width: 220px;
}

@media screen and (max-width: 940px) { section#main-content #right-board {
	display: none;
}}
@media screen and (max-width: 720px) { section#main-content #right-board {
	display: none;
}}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] GRID STYLES										*/
/*! ----------------------------------------------------------- */


.grid_1 {width: 60px;}		.grid_2 {width: 140px;}		.grid_3 {width: 220px;}		.grid_4 {width: 300px;}
.grid_5 {width: 380px;}		.grid_6 {width: 460px;}		.grid_7 {width: 540px;}		.grid_8 {width: 620px;}
.grid_9 {width: 700px;}		.grid_10 {width: 780px;}	.grid_11 {width: 860px;}	.grid_12 {width: 940px;}

.grid_3-2 {
	width: 218px;
}
.grid_3-2-padding_l {
	padding-left: 10px; width: 208px;
}
.grid_5-2 {
	width: 378px;
}
.grid_5-2-padding_l {
	padding-left: 10px; width: 368px;
}
.grid_6-2 {
	width: 458px;
}
.grid_6-2-padding_l {
	padding-left: 10px; width: 448px;
}
.grid_7-2 {
	width: 538px;
}
.grid_7-2-padding_l {
	padding-left: 10px; width: 528px;
}
.grid_10-2 {width: 778px;}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] IMAGE BOX											*/
/*! ----------------------------------------------------------- */

/*
/* Box with image in background + title on the bottom */

.box-img-title {
	width: 140px; height: 120px;
	border-radius: var(--box-round-normal);
	overflow: hidden;
}

@media screen and (max-width: 940px) { .box-img-title {
	width: 100px;
}}
@media screen and (max-width: 720px) { .box-img-title {
	
}}

.box-img-title .text-bg {
	position: relative;
	top: -50px;
	height: 50px;
	background-color: var(--bg-color-blue);
}

.box-img-title:hover .text-bg {
	background-color: var(--bg-color-blue-darker);
}

.box-img-title .text {
	position: relative;
	top: -100px;
	color: var(--text-color-clear-bgblue);
	padding: 5px;
}

.box-img-title .text {
	color: var(--text-color-clear-bgblue);
}

.box-img-title .title {
	color: var(--text-color-orange);
}


/* ---- box-bgimg-blue ---- */

.box-bgimg-blue .size-620-350 {
	width: 620px; height: 350px;
}
.box-bgimg-blue .size-300-164 {
	width: 300px; height: 164px;
}
.box-bgimg-blue .size-140-164 {
	width: 140px; height: 164px;
}
.box-bgimg-blue .size-300-140, .box-bgimg-blue .size-300-140 img {
	width: 300px; height: 140px;
}

@media screen and (max-width: 940px) { .box-bgimg-blue .size-620-350, .box-bgimg-blue .size-620-350 img {
	width: 460px; height: 270px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-300-164, .box-bgimg-blue .size-300-164 img {
	width: 220px; height: 120px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-140-164, .box-bgimg-blue .size-140-164 img {
	width: 100px; height: 120px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-300-140, .box-bgimg-blue .size-300-140 img {
	width: 220px; height: 103px;
}}

@media screen and (max-width: 720px) { .box-bgimg-blue .size-620-350, .box-bgimg-blue .size-620-350 img {
	width: 100%; height: 169px;
}}

.box-bgimg-blue img {
	object-fit: cover;
}

.box-bgimg-blue a:hover {
	text-decoration: none;
}

.box-bgimg-blue .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}
.box-bgimg-blue:hover .bg-box.bg-blue {
	opacity:0.8;
}
.box-bgimg-blue .text-box {
	color: var(--text-color-clear-bgblue);
	position: relative;
	top:-150px;
	padding: 6px;
}
.box-bgimg-blue.size-620-350 .text-box {
	padding-left: 12px;
}


/* ---- Box video ---- */

/* btn-play : common to all pages */
.btn-play {
	position: absolute;
	top: 48px; left:114px;
	width: 72px; height: 72px; background-size: 72px 72px;
	background-image: url(Soniconline/Style/Imageset/video-btn-play2.png);
}

.box-video-blue .text-box {
	color: var(--text-color-clear-bgblue);
	padding: 5px;
	height: 40px;
}

.box-video-blue a:hover {
	text-decoration: none;
}

@media screen and (max-width: 940px) { .box-video-blue .text-box {
	font-size: 0.8em;
	line-height: 1.2em;
	height: 30px;
}}

.box-video-blue.size-200-112 {
	width: 200px;
}

.box-video-blue .size-200-112 {
	width: 200px; height: 112px;
}

@media screen and (max-width: 940px) { .box-video-blue.size-200-112 {
	width: 146px;
}}

@media screen and (max-width: 940px) { .box-video-blue .size-200-112, .box-video-blue .size-200-112 img {
	width: 146px; height: 82px;
}}

.box-video-blue {
	position: relative;
}

.box-video-blue .btn-play {
	top: 19px; left:64px;
}
.box-video-blue:hover .btn-play, .box-round:hover .btn-play {
	opacity: .6;
}


@media screen and (max-width: 940px) { .box-video-blue .size-200-112 .btn-play {
	width: 60px; height: 60px; background-size: 60px 60px;
	top: 11px; left:43px;
}}

/* index-box-video : used on videos index page and in videos page for games*/

.index-box-video {
	width: 300px;
}
.index-box-video img {
	width: 300px; height: 165px;
}
.index-box-video .header-title {
	flex-direction: column;
}

@media screen and (max-width: 940px) {
	.index-box-video {
		width: calc(300px / 1.37); 
	}
	.index-box-video img {
		width: calc(300px / 1.37);  height: calc(165px / 1.37);
	}
}

@media screen and (max-width: 720px) {
	.videos-box {
		justify-content: center;
	}
	.index-box-video {
		width: calc(300px / 1); 
		margin-right: 0px;
	}
	.index-box-video img {
		width: calc(300px / 1);  height: calc(165px / 1);
	}
}


.index-box-video .box-round {
	position: relative;
}

.index-box-video .btn-play {
	top: 48px; left:114px;
}
@media screen and (max-width: 940px) { .index-box-video .btn-play {
	top: 29px; left: 74px;
}}
@media screen and (max-width: 720px) { .index-box-video .btn-play {
	top: 48px; left:114px;
}}

.index-box-video .hover-infos {
	opacity: 0;
	position: absolute;
	bottom:5px;
	padding: 2px 4px 1px 4px;
	border-radius: var(--box-round-normal);
	color: var(--text-color-white);
	background-color: var(--bg-color-blue);
	font-weight: bold;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] PAGE SUB-MENU										*/
/*! ----------------------------------------------------------- */
/*		Only used on the About page (need a refacto)			*/

nav#page-menu {
	margin: 20px 0px;
}

nav#page-menu ul {
	margin: 0; padding: 0;
	list-style: none;
}

nav#page-menu ul li {	
	display: inline-block;
	height: 23px;
	padding-top: 5px;
	overflow: hidden;
}

nav#page-menu ul li a {
	padding:0px 10px;
	color: var(--text-color-default);
	text-decoration: none;
}

nav#page-menu ul li.selected {
	background-color: var(--bg-color-blue);
	border-radius: var(--box-round-normal);
}

nav#page-menu ul li.selected a {
	color: var(--text-color-orange);
	text-decoration: none;
	text-shadow: none;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] USER REVIEW										*/
/*! ----------------------------------------------------------- */


.widget_user_gameReview_leftSize_wGameBox,
.widget_user_gameReview_leftSize_wUserAvatar {
	display: flex;
}

.widget_user_gameReview_leftSize_wGameBox .gameBox {
	flex-shrink: 0;
	width: 60px;
}

.widget_user_gameReview_leftSize_wGameBox .texts,
.widget_user_gameReview_leftSize_wUserAvatar .texts {
	flex: 2;
}

.widget_user_gameReview_leftSize_wUserAvatar .user-avatar {
	--user-avatar-size: 60px;
	margin-right: 10px;
}

/* gamenote userbox wide */


.gamenote-gamebox-wide {
	display: flex;
	justify-content: space-between;
}

.gamenote-gamebox-wide .gamebox {
	width: 60px;
	flex-shrink: 0;
	margin-right: 10px;
}

.gamenote-gamebox-wide .text {
	width: 100%;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { .gamenote-avatar-wide .text {
	width: 300px;
}}
@media screen and (max-width: 720px) { .gamenote-avatar-wide .text {
	width: 210px;
}}


@media screen and (max-width: 940px) { .gamenote-gamebox-wide .grid_6-2-padding_l {
	width: 300px;
}}

@media screen and (max-width: 720px) { .gamenote-gamebox-wide .grid_6-2-padding_l {
	width: 208px;
	font-size: 0.9em; line-height: 1.2em;
}}

@media screen and (max-width: 720px) { .gamenote-userbox-wide .username {
	width: 140px;
}}





/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : NEWS / ITEM REDUCED						*/
/*! ----------------------------------------------------------- */


.widget-news-item-reduced a {
	display: flex;
	align-items: flex-start;
}

.widget-news-item-reduced a:hover {
	text-decoration: none;
}

.widget-news-item-reduced .widget-news-item-reduced-imgbox {
	position: relative;
}

.widget-news-item-reduced .widget-news-item-reduced-imgfile {
	width: 140px; height: 78px;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { 
	.widget-news-item-reduced .widget-news-item-reduced-imgfile {
		width: 78px; height: 78px;
	}
	.widget-news-item-reduced .widget-news-item-reduced-imgfile img {
		max-width: unset;
		width: 140px; height: 78px;
		margin-left: calc(-140px / 2 + 78px / 2);
	}
}

@media screen and (max-width: 720px) { 
	.widget-news-item-reduced .widget-news-item-reduced-imgfile {
		width: 70px; height: 70px;
	}
	.widget-news-item-reduced .widget-news-item-reduced-imgfile img {
		max-width: unset;
		width: 140px; height: 78px;
		margin-left: calc(-140px / 2 + 70px / 2);
		margin-top: calc(-78px / 2 + 70px / 2);
	}
}

/*.widget-news-item-reduced h3 {
	margin-bottom: 5px;
}*/

@media screen and (max-width: 940px) { 
	.widget-news-item-reduced h3 {
		font-size: 1.15em;
	}
}

@media screen and (max-width: 720px) { 
	.widget-news-item-reduced h3 {
		font-size: 1.1em;
		margin-bottom: 3px;
	}
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : BOARD / LAST UPDATED TOPICS				*/
/*! ----------------------------------------------------------- */


#widget-last-updated-topics .last-updated-topics-row .last-updated-topics-top {
	display: flex;
	margin-bottom: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

#widget-last-updated-topics .last-updated-topics-row .texts {
	flex: 2;
	overflow: hidden;
	white-space: nowrap;
}

#widget-last-updated-topics .last-updated-topics-row .topic-text {
	max-height: 300px;
	overflow: hidden;
	position: relative;
	/*font-size: .95em;
	line-height: 1.2em;*/
}

#widget-last-updated-topics .last-updated-topics-row .topic-text.expanded {
	max-height: unset;
}

#widget-last-updated-topics .show-more {
	width: 100%; height: 60px;
	margin-top: 240px;
	background-color: var(--bg-color-default);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom:0;
}

#widget-last-updated-topics .last-updated-topics-row .text-button-btn {
	display: none;
	justify-content: center;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : Game Press Reviews						*/
/*! ----------------------------------------------------------- */


.widget-games-pressReviews .press-name-note {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.widget-games-pressReviews .press-note {
	padding: 0 5px;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	POLL STYLE												*/
/*! ----------------------------------------------------------- */


#poll .title,
#poll_bbcode .title {
	font-weight: bold;
}

#poll .options,
#poll_bbcode .options {
	margin: 10px; margin-bottom: 0px;
}

#poll .options input.bt-radio,
#poll_bbcode .options input.bt-radio {
	margin-right: 10px;
}

#poll .graphic,
#poll_bbcode .graphic {
	margin-top: -1px;
	margin-bottom: 3px;
}

#poll .result-graphic,
#poll_bbcode .result-graphic {
	display: inline-block; vertical-align: top;
	margin: 5px 0px 1px 0px;
	height: 7px;
	background-color: var(--bg-color-blue);
	min-width: 5px;
	max-width: 220px;
}

@media screen and (max-width: 940px) { #poll .result-graphic, #poll_bbcode .result-graphic {
	max-width: 140px;
}}
@media screen and (max-width: 720px) { #poll .result-graphic, #poll_bbcode .result-graphic {
}}

#poll .result-txt, #poll_bbcode .result-txt {
	display: inline-block; vertical-align: top;
	height: 13px;
	width: 30px;
	margin-left: 5px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	HIGHLIGHTS STYLE										*/
/*! ----------------------------------------------------------- */


/* ---- COMMON --- */

section#highlight #highlight2 {
	margin-bottom: 22px;
}


/* ---- HIGHLIGHT 1: BIG PICTURE ---- */

section#highlight #left-top .box-img-big img {
	width: 620px; height: 350px;
}

@media screen and (max-width: 940px) { section#highlight #left-top .box-img-big img {
	width: 460px; height: 310px;
}}
@media screen and (max-width: 720px) { section#highlight #left-top .box-img-big img {
	width: 300px; height: 180px;
}}

section#highlight #left-top .box-img-big .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}

section#highlight #left-top .box-img-big .text-box {
	position: relative;
	padding: 10px;
}

@media screen and (max-width: 940px) { section#highlight #left-top .box-img-big .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}
@media screen and (max-width: 720px) { section#highlight #left-top .box-img-big .text-box {
	font-size: 0.85em; line-height: 1.0em;
}}



/* ---- HIGHLIGHT: RIGHT ---- */

section#highlight #right #top  {
	width: 300px; height: 164px;
}

@media screen and (max-width: 940px) { section#highlight #right #top {
	width: 220px; height: 144px;
}}

section#highlight #right #top img  {
	width: 300px; height: 164px;
}

@media screen and (max-width: 940px) { section#highlight #right #top img {
	width: 220px; height: 144px;
}}

section#highlight #right #bottom-left, section#highlight #right #bottom-left img,
section#highlight #right #bottom-right,section#highlight #right #bottom-right img {
	width: 140px; height: 164px;
}

@media screen and (max-width: 940px) { 
	section#highlight #right #bottom-left, section#highlight #right #bottom-left img,
	section#highlight #right #bottom-right, section#highlight #right #bottom-right img {
	width: 100px; height: 144px;
}}

@media screen and (max-width: 940px) { section#highlight #right .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}
@media screen and (max-width: 720px) { section#highlight #right .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}


/**/

section#highlight #right #top .bg-box,
section#highlight #right #bottom-left .bg-box,
section#highlight #right #bottom-right .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}

section#highlight #right #top .text-box,
section#highlight #right #bottom-left .text-box,
section#highlight #right #bottom-right .text-box {
	position: relative;
	top:-150px;
	padding: 6px;
}


/* ---- HIGHLIGHT: FOR MOBILE ---- */

@media screen and (max-width: 720px) {section#highlight .mobile .content {
	display: flex;
}}

@media screen and (max-width: 720px) {section#highlight .mobile .content .img {
	width: 128px; flex-shrink: 0;
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	FORM (Override)					 						*/
/*! ----------------------------------------------------------- */


.form-flash-error {
	padding: 10px 20px;
	padding-bottom: 8px;
	margin-bottom: 20px;
	color: var(--text-color-white);
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-red);
	font-weight: bold;
}

.form-flash-valid {
	padding: 10px 20px;
	padding-bottom: 8px;
	margin-bottom: 20px;
	color: var(--text-color-white);
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-green);
	font-weight: bold;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	SOCIAL ICONS											*/
/*! ----------------------------------------------------------- */

.icon-link {
	--icon-link-size: 55px;
	width: var(--icon-link-size); height: var(--icon-link-size);
	background-size: calc(10 * var(--icon-link-size)) calc(1 * var(--icon-link-size));
	background-image: url(Soniconline/Style/Imageset/icons-social.svg);
	display: block;
}

.icon-link.twitter 		{ background-position: calc(-0 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.facebook 	{ background-position: calc(-1 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.discord 		{ background-position: calc(-2 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.youtube 		{ background-position: calc(-3 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.rss	 		{ background-position: calc(-4 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}

.icon-link.twitter-blue 	{ background-position: calc(-5 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.facebook-blue 	{ background-position: calc(-6 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.discord-blue 	{ background-position: calc(-7 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.youtube-blue 	{ background-position: calc(-8 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.rss-blue	 		{ background-position: calc(-9 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}

@media screen and (max-width: 940px) { section#right .icon-link {
	--icon-link-size: 50px;
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	BADGE MINI ICONS										*/
/*! ----------------------------------------------------------- */
/* 		Badges used under avatar in board 						*/

.badge-mini {
	width: 8px; height: 8px;
	border-radius: var(--box-round-big);
	display: inline-block; vertical-align: center;
	border: 1px solid black;
}

/* IMPORTANT: no need of variable because the same value whatever the theme !!! */

.badge-mini.gold {
	border-color: #c3b133;
	background-color: #f9e449;
}
.badge-mini.silver {
	border-color: #8c8c8c;
	background-color: #c4c4c4;
}
.badge-mini.bronze {
	border-color: #7e5514;
	background-color: #c0a06d;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	COMS ICON												*/
/*! ----------------------------------------------------------- */
/*		the bubble used over the image							*/

.coms-icon {
	position: absolute; display: inline-block;
	top: -6px; left: -6px;
	padding: 3px 4px 2px 4px;
	background-color: var(--bg-color-blue);
	font-weight: bold; text-align: center;
	border: 2px solid var(--bg-color-default);
	border-radius: var(--box-round-normal);
	min-width: 14px;
}

.coms-icon:after {
	content:url(Soniconline/Style/Imageset/coms-box-visual.svg);
	width: 10px; height: 8px;
	position: absolute;
	bottom: -1px; right: 1px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	CSS FRAMEWORK - HEADERS (Override)						*/
/*! ----------------------------------------------------------- */

.header .header-title.txt-orange .icon {
	filter: var(--icon-filter-orange);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	CSS FRAMEWORK - LOADING ICON (Override)					*/
/*! ----------------------------------------------------------- */

.loader .loader-spin {
  border: 6px solid var(--bg-color-default-darker); /* Light grey */
  border-top: 6px solid var(--bg-color-blue); /* Blue */
}






/*! */
/*! ----------------------------------------------------------- */
/*! 	HIDE / SHOW - WEB <> MOBILE								*/
/*! ----------------------------------------------------------- */
/* 		Must be defined at the end 								*/

.hide {	display: none;  }
.show { display: block; }

@media screen and (min-width: 940px) {
	.web 		{ display: compact; }
	.web.inline { display: inline-block; vertical-align: top; }
	.mobile 	{ display: none; }
}

@media screen and (max-width: 940px) { 
	.web 		{ display: compact; }
	.web.inline { display: inline-block; vertical-align: top; }
	.mobile 	{ display: none; }
}

@media screen and (max-width: 720px) {
	.web 			{ display: none; }
	.mobile 		{ display: block; }
	.mobile.inline 	{ display: inline-block; }
}