@font-face {
	font-family: "MontLight";
	src: url('../../public/css/HWYGNRRW.TTF');
}

@font-face {
	font-family: "Mont";
	src: url('../../public/css/HWYGOTH.TTF');
}

*
{
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}


:root
{
	--background-color: #287a91;
	--primary-color: #287a91;
	--primary-color-hover: #287a91;
	--page-bg-color: #fefcfd;
	--text-color: #160201;
	--alt-text-color: #160201;
	--secondary-text-color: #fefcfd;
	--light-text-color: #fefcfd;
	--title-color: #f2c418;
	--title-main-border: 4px solid #f2c418;
	--title-side-border: 4px solid #f2c418;
	--link-color: #e21c61;
	--title-shadow: 1px 2px 2px #ccc;
	--light-background: #fefcfd;
	--alt-background: #fff4e0;
	--cat-hover: #ffd448;
	--alt-input-background: #fefcfd;
	
}

:root.dark
{
	--page-bg-color: #111;
	--text-color: #dee;
	--alt-text-color: #dee;
	--secondary-text-color: #333;
	--light-text-color: #fefcfd;
	--light-background: #fefcfd;
	--title-shadow: 1px 2px 2px #333;
	--link-color: #ffd448;
	--alt-background: #333;
	--cat-hover: #287a91;
	--alt-input-background: #333;

}

html, body
{
	margin: 0;
	font-size: 100%;
	min-height: 100%;
	font-family: Tahoma, "Times New Roman", Helvetica, Arial, sans-serif;
	color: var(--text-color);/*#381631;*/
	/*background: #381631;
	background: #1b958d;*/
	background: var(--background-color);
}

ol
{
	list-style-type:decimal-leading-zero;
	list-style-position: inside;
	padding: 0;
}

ul, ul.noform
{
	list-style-image: url('../../public/images/css/list-style.png');
}

p
{
	margin: 8px 0;
}

ol li
{
	padding: 5px 10px;
}

ol li:nth-child(even), ul.categories li:nth-child(odd)
{
	/*background: #fcfcfc;*/
}

.lightover:hover
{
	opacity: 0.8;
	cursor: pointer;
}

.icon-select-arrows.handle
{
	cursor: ns-resize;
}

.icon-only
{
	padding-left: 5px;
	padding-right: 5px;
}

ul.categories
{
	padding: 0;
	margin: 0;
	list-style: none none;
}

ul.categories li:nth-child(even)
{
	background: var(--alt-background);
}

ul.categories li a:hover
{
	background: var(--cat-hover);
}

ul.categories li a
{
	display: block;
	padding: 0;
	font-family: 'MontLight', Tahoma, sans-serif;
	font-size: 16px;
	line-height: 32px;
	border-radius: 4px 0 0 4px;
}

ul.categories li a .icon32
{
	float: left;
}


/* ICONS */
.icon16 { display: inline-block; width : 16px; height: 16px; font-family: 'MontLight', Tahoma, sans-serif; line-height: 16px; font-size: 0.75em; text-align: center; }
.icon24 { display: inline-block; width : 24px; height: 24px; font-family: 'MontLight', Tahoma, sans-serif; line-height: 24px; font-size: 1em; text-align: center; }
.icon32 { display: inline-block; width : 32px; height: 32px; font-family: 'MontLight', Tahoma, sans-serif; line-height: 32px; font-size: 1.2em; text-align: center; }
.icon48 { display: inline-block; width : 48px; height: 48px; font-family: 'MontLight', Tahoma, sans-serif; line-height: 48px; font-size: 1.5em; text-align: center; }

.lh16 { line-height: 16px; }
.lh24 { line-height: 24px; }
.lh24 { line-height: 24px; }
.lh32 { line-height: 32px; }
.lh48 { line-height: 48px; }

.user { background: url('../../public/images/css/icon_user.png') center center no-repeat; background-size: contain;  }
.date { background: url('../../public/images/css/icon_date.png') center center no-repeat; background-size: contain; }
.comments { background: url('../../public/images/css/icon_com.png') center center no-repeat; background-size: contain; }
.likes { background: url('../../public/images/css/icon_like.png') center center no-repeat; background-size: contain; }
.ok { background: url('../../public/images/css/check.png') center center no-repeat;  }
.fail { background: url('../../public/images/fail.png') center center no-repeat; }
.trophy { background: url('../../public/images/trial.png') center center no-repeat;  }
.star { background: url('../../public/images/premium.png') center center no-repeat; }
.everyone { background: url('../../public/images/css/everyone.png') center center no-repeat; background-size: contain; }
.teenage { background: url('../../public/images/css/teen.png') center center no-repeat; background-size: contain; }
.mature { background: url('../../public/images/css/mature.png') center center no-repeat; background-size: contain; }
.fb { background: url('../../public/images/css/fb.png') center center no-repeat; background-size: contain; }
.wz { background: url('../../public/images/css/wizebot.png') center center no-repeat; background-size: contain; }
.nightbot { background: url('../../public/images/css/nightbot.jpeg') center center no-repeat; background-size: contain; }
.twitch { background: url('../../public/images/css/twitch.png') center center no-repeat; background-size: contain; }
.steam { background: url('../../public/images/css/steam.jpeg') center center no-repeat; background-size: contain; }

/* PACK */
.bgi_red { background: url('../../public/images/css/icons/bg_red.png') center center no-repeat; background-size: contain; color: white; }
.bgi_blue { background: url('../../public/images/css/icons/bg_blue.png') center center no-repeat; background-size: contain; color: white; }
.bgi_black { background: url('../../public/images/css/icons/bg_black.png') center center no-repeat; background-size: contain; color: white; }
.bgi_green { background: url('../../public/images/css/icons/bg_green.png') center center no-repeat; background-size: contain; }
.profile { background: url('../../public/images/css/icons/user.png') center center no-repeat; background-size: contain; }
.charts { background: url('../../public/images/css/icons/charts.png') center center no-repeat; background-size: contain; }
.coupon { background: url('../../public/images/css/icons/coupon.png') center center no-repeat; background-size: contain; }
.email { background: url('../../public/images/css/icons/email.png') center center no-repeat; background-size: contain; }
.biohazard { background: url('../../public/images/css/icons/biohazard.png') center center no-repeat; background-size: contain; }
.crash { background: url('../../public/images/css/icons/crash.png') center center no-repeat; background-size: contain; }
.labpot { background: url('../../public/images/css/icons/lab.png') center center no-repeat; background-size: contain; }
.beta { background: url('../../public/images/css/icons/beta.png') center center no-repeat; background-size: contain; }
.valid { background: url('../../public/images/css/icons/check.png') center center no-repeat; background-size: contain; }
.download { background: url('../../public/images/css/icons/dl.png') center center no-repeat; background-size: contain; }
.upload { background: url('../../public/images/css/icons/up.png') center center no-repeat; background-size: contain; }
.edit { background: url('../../public/images/css/icons/edit.png') center center no-repeat; background-size: contain; }
.help { background: url('../../public/images/css/icons/help.png') center center no-repeat; background-size: contain; }
.secret { background: url('../../public/images/css/icons/secret.png') center center no-repeat; background-size: contain; }
.talk { background: url('../../public/images/css/icons/talk.png') center center no-repeat; background-size: contain; }
.lockon { background: url('../../public/images/css/icons/sec_open.png') center center no-repeat; background-size: contain; }
.lockoff { background: url('../../public/images/css/icons/sec_close.png') center center no-repeat; background-size: contain; }
.notifon { background: url('../../public/images/css/icons/notif_on.png') center center no-repeat; background-size: contain; }
.notifoff { background: url('../../public/images/css/icons/notif_not.png') center center no-repeat; background-size: contain; }
.likeon { background: url('../../public/images/css/icons/love_on.png') center center no-repeat; background-size: contain; }
.likeoff { background: url('../../public/images/css/icons/love_not.png') center center no-repeat; background-size: contain; }
.moved { background: url('../../public/images/css/icons/right.png') center center no-repeat; background-size: contain; }
.cancel { background: url('../../public/images/css/icons/calendar.png') center center no-repeat; background-size: contain; }
.kofi { background: url('../../public/images/css/icons/kofi.png') center center no-repeat; background-size: contain; }


.fit { background-size:contain; }
div.grey { background: #1b958d;}
div.greybox { background: #1b958d; padding: 5px; border: 1px #381631 solid; border-left: 0; border-right: 0; margin: 10px 0; }
.darkbox { background: #381631; }
.boxed, .infos, .errors, .good, .connect { padding: 5px; border: 4px solid var(--background-color); margin: 8px 0;  border-radius: 4px; position: relative; overflow: hidden; z-index: 1;}
.connect { width: 550px; margin: 60px auto; }
/*.good { background: #5eb6ad; }
.errors { background: #e26159; color: #d8dcb4; }
.infos { background: #5eb6ad; }*/

.adsbygoogle { margin: 5px auto; }
.notadsbygoogle, .hidden { display: none; }
.errors:before, .infos:before, .connect:before
{
	display: flex;
	align-items: center;
	content: "\ea09";
	font-family: 'icomoon' !important;
	color: #e21c61;
	position: absolute;
	justify-content: right;
	top: 0;
	bottom: 0;
	left: 0px;
	right: -15px;
	font-size: 70px;
	z-index: -1;
	opacity: 0.25;
}

.errors
{
	border-color: #e21c61;
}

.errors:before
{
	content: "\ea07";
}

.connect:before
{
	content: "\e902";
}

.ellipsis
{
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*

rouge : #e21c61
bleu : #287a91
jaune : #ffd448

*/

#wrapper
{
	width: 100%;
	padding: 0;
	min-height: 100%; 
}

.wrap, .no-wrap
{
	width: 100%;
	max-width: 1620px;
	padding: 10px 0;
	margin: auto;
}

.no-wrap
{
	width: inherit;
	max-width: 1620px;
}

.liner
{
	width: 100%;
}
.liner.white { background: var(--page-bg-color); color: var(--text-color); }
.liner.dark { color: var(--page-bg-color); background: var(--text-color); }
	

/* MENU */
#menu
{
	padding: 4px;
	letter-spacing: 0.1em;
	text-align: right;
}

#menu li a, #menu li button
{
	text-decoration: none;
	font-family: 'Mont', Tahoma, sans-serif;
	border: 0;
	background: transparent;
	border-left: 4px solid transparent;
	display: inline-block;
	color: var(--title-color);
}

#menu li a:hover
{
	border-left-color: var(--title-color);
}

#menu li button
{
	border: 2px solid transparent;
	border-radius: 16px;
	padding: 4px;
}

#menu li button:hover
{
	border-color: var(--title-color);
	background: var(--text-color);
}

#menu li
{
	display: inline-block;
	padding: 0px 5px;
}

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

#content
{
	display: flex;
}

#content main
{
	flex-grow: 1;
	padding-bottom: 40px;
	min-height: 60vh;
}

#link-menu .subbox
{
	width: 250px;
	right: 0;
	top: 15px;
	display: none;
}

#link-menu:hover .subbox
{
	display: block;
}

#link-menu
{
	padding: 0 20px;
}

#link-menu .subbox span
{
	border-bottom: 1px solid #381631;
}

#menu #link-menu .subbox a
{
	color: white;
	display: inline-block;
	padding: 5px;
}

/* TOP */

#mainlogo
{
	height: 40px;
	display: block;
	font-size: 30px;
	font-family: "Mont", Tahoma, sans-serif;
	text-decoration: none;
}



#mainlogo img
{
	height: 100%;
	float: left;
	max-height: 80px;
}

#mainlogo em
{
	font-size: 75%;
}

#mainlogo:hover
{
	cursor: pointer;
	color: var(--link-color);
}

#mainlogo
{
	color: #ffd448;
}
	
#top 
{
	
	/*background: #5eb6ad;*/
}

h1
{
	font-variant: small-caps;
	text-align: center;
	padding: 6px 0;
	margin: 6px 0;
	font-family: 'Mont', Tahoma, sans-serif;
	letter-spacing: 4px;
	background: none;
	font-size: 3em;
	margin-bottom: 0;
	border-bottom: 4px solid var(--title-color);
	color: var(--title-color);
	background: var(--page-bg-color);
	text-shadow: var(--title-shadow);
	line-height: initial;
}

h2
{
	color: var(--title-color);
	font-family: 'Mont', Tahoma, sans-serif;
	font-size: 2.2em;
	font-variant: small-caps;
	letter-spacing: 2px;
	margin: 24px 0 18px 0;
	text-shadow: var(--title-shadow);
}

main h2
{
	color: var(--title-color);
	/*border-top: 1px solid #fea85f;
	border-bottom: 2px solid #fea85f;*/
}

h2 strong
{
	display: inline-block;
	font-size: 0.8em;
	color: var(--link-color);
}

h2 span
{
	font-family: 'MontLight', Tahoma, sans-serif;
	/*color: #e21c61;*/
}

h3
{
	font-family: 'MontLight', Tahoma, sans-serif;
	font-size: 1.4em;
	padding: 15px 0;
	color: var(--title-color);
	margin: 0 0 6px 0;
}

article
{
	border-radius: 4px;
	padding: 8px;
}

form ul li:hover > label:first-child { color: var(--background-color); }

#column
{
	padding-bottom: 5px;
	margin-right: -1px;
	/*background: #381631;*/
	border-right: 2px solid var(--background-color);
	color: #e21c61;
	max-width: 15%;
	flex-basis: 15%;
}

/*#column h2
{
	text-align: left;
	font-size: 1.2em;
}*/

#column ul a
{
	color: #287a91;
	text-decoration: none;
	text-align: left;
}

#column ul a:hover
{
	color: var(--link-color);
}

/*
#intro h1
{
	background: rgb(62,62,62) url('../../public/images/css/gradient_accroche.png') left top repeat-x;
	text-align: inherit;
	margin: 10px 0;
	padding: 0;
	color: white;
	text-shadow: #666 6px 4px 1px;
}

#intro
{
	padding: 10px 0;
	height: 410px;
	background: white url('../../public/images/css/gradient_top.png') left bottom repeat-x;
	color: black;
}
*/

/* CONTENT */

a
{
	color: var(--link-color);
	text-decoration: none;
	padding: 4px 6px;
}

a:hover
{
	color: var(--title-color);
	text-decoration: underline;
}

.primary:hover, .secondary:hover, button[type="submit"]:hover, button.selected:hover
{
	color: var(--title-color);
	background: var(--background-color);
	cursor: pointer;
}

a.green, a.blue, a.grey, a.red, 
button.green, button.blue, button.grey, button.red, 
span.static, a.static, 
a.primary, a.secondary, button.primary, button.secondary,
button[type="submit"], button.selected
{
	font-family: 'Mont', Tahoma, sans-serif;
	display: inline-flex;
	gap: 4px;
	align-content: center;
	border: 0;
	border-radius: 4px;
	padding: 8px;
	text-align: center;
	background: var(--background-color);
	color: var(--light-text-color);
	text-decoration: none;
	font-size: 1em;
	
}

a.green [class^="icon-"], a.blue [class^="icon-"], a.grey, a.red [class^="icon-"], button.green [class^="icon-"], button.blue [class^="icon-"], button.grey, button.red [class^="icon-"], span.static, a.static, a.primary [class^="icon-"], a.secondary [class^="icon-"], button.primary [class^="icon-"], button.secondary [class^="icon-"]
{
	position: relative;
	/*top: 4px;*/
}



a.primary, button.primary
{
	color: var(--light-text-color);
	background: var(--background-color);
	text-align: center;
}

a.secondary, button.secondary
{
	background: var(--title-color);
	/*color: #502d54;*/
	color: var(--secondary-text-color);
}

.little .green, .little .red, .little .grey, .little .blue, .little .static
{
	margin: 0;
	font-size: 0.75em;
}

a.blue:hover, a.grey:hover, a.red:hover, button.blue:hover, button.grey:hover, button.red:hover
{
	/*color: black;*/
	color: #ffd448;
	cursor: pointer;
	background: #502d54;
}

a.green:hover, button.green:hover, a.blue:hover, button.blue:hover
{
	color: #ffd448;
	cursor: pointer;
}

a.blue, button.blue, #column .blue
{
	color: #fcfcfc;
	/*background: rgb(53,177,213) url('../../public/images/css/blue.png') left bottom repeat-x;*/
	background: #287a91;
}

a.red, button.red
{
	/*
	color: orange;
	background: rgb(215,30,30) url('../../public/images/css/red.png') left bottom repeat-x;*/
	background: #e21c61;
	color: #ffd448;
}

a.grey, button.grey
{
	color: white;
	background: rgb(129,129,129) url('../../public/images/css/grey.png') left bottom repeat-x;
}

span.static, a.static
{
	background: transparent;
}

.buttongroup a, .buttongroup button
{
	border-radius: 0;
}

.buttongroup a:first-child, .buttongroup button:first-child
{
	border-radius: 4px 0 0 4px;
}

.buttongroup a:last-child, .buttongroup button:last-child
{
	border-radius: 0 4px 4px 0;
}

button[disabled], button[disabled]:hover
{
	background: #fcfcfc;
	color: #381631;
	cursor: not-allowed;
	border: 2px dotted #381631;
}

section aside
{
	position: relative;
}

section aside span
{
	position: absolute;
	background: #381631;
	color: #5eb6ad;
	padding: 5px;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
}

section aside a
{
	color: #5eb6ad;
}

section aside:hover span
{
	display: block;
}

.addthis_inline_share_toolbox_gd00
{
	line-height: 4px;
}

.blogpost .addthis_inline_share_toolbox, .blogblock .addthis_inline_share_toolbox
{
	line-height: 8px;
}

.contentbox
{
	padding-left: 10px;
	padding-right: 10px;
}

.contentboxtop
{
	margin-top: 10px;
	margin-bottom: 10px;	
}

.circle
{
	border: 2px solid black;
	border-radius: 50%;
	overflow: hidden;
}

.profile200
{
	width: 200px;
	height: 200px;
	display: inline-block;
	margin: 10px;
}

.profile128
{
	width: 128px;
	height: 128px;
	display: inline-block;
}


/* FOOTER */
#logobottom
{
	height: 100px;
	background: url('../../public/images/infokub.png') center center no-repeat;
	background-size: contain;
	margin-top: 10px;
}

footer
{
	margin-bottom: 60px;
	color: #fcfcfc;
	/*background: #fcfcfc;*/
}

footer a
{
	color: #fcfcfc;
}

footer h2
{
	text-align: left;
	color: #ffd448;
	font-weight: 400;
}

footer a:hover
{
	color: #ffd448;
}

footer ul
{
	padding: 0;
	list-style: none;
}

footer p
{
	padding-left: 10px;
}

/* CONTENTS */

#caroussel, #caroussel-cf
{
	line-height: 0;
	overflow: hidden;
	position: relative;
	width: 738px;
	width: 100%;
	height: 400px;
	border: 0;
	margin: auto;
	text-align: center;
}

#caroussel-cf
{
	width: 929px;
	width: 100%;
	height: 620px;
}

.caroussel img
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
	object-fit: cover;
}

.caroussel img:first-child
{
	display: inline;
}

.separator
{
	background: transparent url('../../public/images/css/separator.png') top center no-repeat;
	background-size: contain;
	height: 1px;
	width: 100%;
	margin: 5px auto;
}

.bigtext
{
	font-family: "Square", Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: rgb(128,128,128);
	letter-spacing: 2px;
}

.elephant
{
	font-family: "Mont", Tahoma, sans-serif;
	font-size:  2em;
	letter-spacing: 2px;
	line-height: 1.1em;
	background: #e21c61;
	border-radius: 10px;
	box-shadow: 4px 4px 0px #ccc;
	padding: 8px;
	margin: 20px auto;
	text-align: center;
	width: 50%;
	color: #fcfcfc;
	
}

.elephant a
{
	color: #ffd448;
}

.illu
{
	height: 300px;
	text-align: center;
	margin: 20px auto;
}

.illu a
{
	color: #5eb6ad;
}

.illu img
{
	height: 100%;
	width: auto;
}

.illu > span
{
	position: relative;
}

.illu > span > span
{	
	display: none;
	position: absolute;
	background: #333;
	color: #5eb6ad;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5px;
}

.illu img:hover+span
{
	display: block;
}

.strike
{
	text-decoration: line-through;
	color: #ccc;
}

.reduc
{
	font-weight: bold;
	text-shadow: 2px 2px 1px #105390;
}

.subtext
{
	font-size: 0.85em;
	font-style: italic;
	color: rgb(128,128,128);
}

.fix, .row
{
	clear: both;
}

.row.block
{
	background: white /*url('../../public/images/css/bg_row.png') left bottom repeat-x*/;
	border-bottom: 1px solid #333;
	padding-bottom: 2px;
	margin-bottom: 10px;
}

.row.alt
{
	background: var(--alt-background);
	border-radius: 4px;
	padding: 4px;
}

.row.blockbg
{
	padding-bottom: 2px;
	margin-bottom: 5px;
}

#maingoal
{	
	padding-top: 1px;
	/*background: transparent url('../../public/images/css/manette.png') center center no-repeat;*/
	line-height: 1.5em;
}

#maingoal .row
{
	display: flex;
	margin-top: 20px;
}

.goal
{
	box-shadow: var(--title-shadow);
	
	border: 2px solid var(--background-color);
	border-radius: 4px;
	background: var(--page-bg-color);
}

.goal p
{
	padding: 10px;
}

#maingoal span
{
	font-size: 72px;
	color: #e21c61;
}

#maingoal strong
{
	text-transform: uppercase;
	color: var(--background-color);
	display: inline-block;
	margin: 5px 0;
}

.req-premium
{
	position: relative;
	overflow: hidden;
	
}

span.req-premium
{
	padding: 8px 0;
}

.req-premium a.popin
{
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: var(--title-color);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 4px;
	opacity: 0.9;
	transform: translate(0%, -150%);
	transition: transform 1s ease-in;
}

.req-premium:hover a.popin
{
	transform: translate(0%, 0%);
	transition: transform 0.05s ease-out;
	z-index: 150;
}

button.checkable input
{
	display: none;
}

button.checkable.isOn label
{
	display: inline;
}

button.checkable label
{
	display: none;
}

#playlist .selected
{
	color: #e21c61;
	text-decoration: underline;
}

/* FORMS */


input, textarea, select, .select2-container--default .select2-selection--multiple, .tagify
{
	border: var(--background-color) 1px solid;
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 0.8em;
	background: var(--page-bg-color);	
	color: var(--text-color);
}

.alt input, .alt textarea, .alt select, .alt .select2-container--default .select2-selection--multiple, .alt .tagify, .alt .ui-button
{
	background: var(--alt-input-background);
	color: var(--alt-text-color);
}

.alt .ui-state-active
{
	background: var(--background-color);
}
	

.select2-container .select2-selection--multiple .select2-selection__rendered
{
	line-height: normal;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice
{
	padding: 5px;
	color: var(--light-text-color);
	background: var(--background-color);
	border: 0;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
}

.tagify__tag > div::before
{
	background: var(--background-color);
	box-shadow: none;
}

.tagify__tag > div
{
	color: var(--light-text-color);
}


.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable
{
	color: var(--light-text-color);
	background: var(--background-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove
{
	position: relative;
	color: var(--light-text-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover
{
	background: none;
	color: #e21c61;
	border: 0;
	border-right: 1px solid #aaa;
	
}

.ui-controlgroup > .ui-controlgroup-item
{
	font-size: 0.8em;
}

.mid-group > .ui-selectmenu-button.ui-button
{
	width: 11em;
}

.req-premium input, .req-premium textarea, .req-premium select
{
	background: var(--title-color);
}

input.nomargin
{
	margin: 0;
	padding: 2px;
}

fieldset
{
	border: 2px solid #287a91;
	border-radius: 4px;
	margin: 5px 10px;
}

fieldset legend
{
	color: #287a91;
	font-family: "Mont", Tahoma, sans-serif;
	letter-spacing: 1px;
}

.facebook, a.facebook:hover
{
	background: rgb(108,143,235);
	line-height: 34px;
	height: 34px;
	border: 1px solid rgb(57,85,159);
	border-radius: 1px;
	color: white;
	font-size: 13px;
	font-weight: normal;
	padding-right: 20px;
	display: inline-block;
	text-decoration: none;
	box-shadow: #ccc 2px 2px 2px;
}

.facebook .icon
{
	display: inline-block;
	height: 34px;
	width: 34px;
	margin-right: 20px;
}

ol ol
{
	margin: 12px 0; 
	list-style: upper-alpha inside;
	padding-left: 40px;
}

pre.prettyprint
{
	border: 2px solid #e21c61;
	padding: 4px;
	border-radius: 4px;
}

.steam-box
{
	width: 92px;
	height: 35px;
}

.twitch-box
{
	width: 40px; 
	height: 53px;
	border-radius: 4px;
}

form .ui-button
{
	padding: 5px 12px;
	font-size: 0.8em;
}

.game-list-item
{
	display: flex;
	gap: 4px;
}

/* LISTS */
.itemlist
{
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.itemlist a
{
	color: var(--link-item-color);
	font-variant: small-caps;
	text-align: justify;
	text-decoration: none;
	font-size: 1.2em;
	padding: 0;
}

.itemlist a:hover
{
	text-decoration: underline;
	color: var(--title-color);
}


.itemlist > div
{
	flex-basis: 22%;
	overflow: hidden;
	position: relative;
}

.itemlist .banner
{
	height: 160px;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	display: inline-block;
}

.itemlist .banner img
{
	max-width: 100%;
}

.itemlist > * > .del-btn
{
	background: #e21c61;
	opacity: 0.8;
	position: absolute;
	border: 0;
	font-size: 3em;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	transform: translate(0%, -150%);
	transition: transform 0.25s ease-out;
}

.itemlist > *:hover > .del-btn
{
	transform: translate(0%, 0%);
}

.dropzone
{
	font-size: 1.1em;
	background: var(--alt-input-background);
	border: 2px dashed #287a91;
	border-radius: 4px;
	padding: 8px;
}

.dropzone.valid
{
	border-style: solid;
}

.section-collapse-header
{
	border: 2px solid var(--title-color);
	border-radius: 4px;
	padding: 8px;
	cursor: pointer;
}

.section-collapse-content
{
	transition: all 0.3s ease-out;
	border-left: 2px solid var(--title-color);
	border-right: 2px solid var(--title-color);
	overflow: hidden;
}

.section-collapse-content.is-closed
{
	height: 0;
}

.section-collapse-content.is-open
{
	height: auto;
	margin-bottom: 4px;
}

/* COOKIES */
#cookieprivacy
{
	position: fixed;
	bottom: 0;
	padding: 0 10px;
	background: #ffd448;
	border: 2px solid #381631;
	width: 100%;
	font-size: 12px;
	height: 80px;
	z-index: 100;
}