:root
{
	/* media query order
		--large					: 1200px;
		--desktop				: 992px;
		--tablet				: 768px;
		--mobile				: 576px;
		large screen
		desktop	@media (max-width	: 1200px)
		tablet	@media (max-width	: 992px)
		mobile	@media (max-width	: 768px)
		small	@media (max-width	: 576px)
	*/

	--padding		 		: 0.5rem;
	--size-s				: 0.5rem;
	--size-m				: 0.75rem;
	--size					: 1rem;
	--size-l				: 1.25rem;
	--size-xl				: 1.5rem;
	--color-black			: #000000;
	--color-grey			: #CCCCCC;
	--color-white			: #FFFFFF;
	--color-dark			: #0C1634;
	--color-medium			: #003565;
	--color-light	 		: #8499B1;
	--color-hover			: #FF9900;
	--color-info			: #E56000;
	--color-success	 		: #A4B123;
	--color-warning	 		: #E7B600;
	--color-error	 		: #FF0000;
}

@font-face
{
	font-family				: 'Star Wars';
	src						: url('/font/Starjhol.ttf');
		/*
		url('/font/StarjediSpecialEdition.ttf');
		url('/font/Starjout.ttf');
		url('/font/Strjmono.ttf');
		url('/font/Starjedi.ttf');
		url('/font/Stjedise.ttf');
		url('/font/Stjldbl1.ttf');
		url('/font/Stjldbl2.ttf');
		url('/font/DeathStar.ttf');

		*/
}

*,:after,:before
{
	box-sizing				: border-box;
	margin					: 0;
	padding					: 0;
}

BODY
{
	font-family				: Baskerville, Cambria;
	font-size				: 0.85rem;
	background				: var(--color-dark);
	color					: var(--color-grey);
	margin-bottom			: 1rem;
	padding-bottom			: 1rem;
	max-width				: 100vw;
}

BODY:after
{
	content					: '';
	position				: fixed;
	top						: 0;
	left					: 0;
	width					: 100vw;
	height					: 100vh;
	background-image		: url('../img/bg/vader.jpg');
	background-attachment	: fixed;
	background-repeat		: no-repeat;
	background-size			: cover;
	background-position		: top;
	opacity					: 0.1;
}


H1
{
	font-size				: var(--size-xl);
	font-weight				: 600;
	margin					: .62em 0
}


H2
{
	
	font-size				: var(--size-l);
	padding					: 0.5em 0.5em;
	clear					: both;
}

H3
{
	
	font-size				: 1.2em;
	padding					: 0.4em 1.5em;
	clear					: both;
}

H4
{
	
	font-size				: 1.1em;
	padding					: 0.3em 2.0em;
	clear					: both;
}

A
{
	color					: var(--color-white);
	text-decoration			: none;
}

A		:visited
{
	color					: #CCCCCC;
}

A:hover,
A:focus,
A:active
{
	color					: rgb(38, 115, 173);
}

P
{
	padding					: 0 0 20px;
}

IMG
{
	vertical-align			: middle;
}

IMG.responsive
{
	max-width				: 100%;
	height					: auto;
	max-height				: 30vh;
}

.inactive,
IMG.inactive
{
	filter					: grayscale(1);
	opacity					: 0.5;
}

.inprogress-1,
IMG.inprogress-1
{
	filter					: grayscale(0.9);
	opacity					: 0.5;
}

.inprogress-2,
IMG.inprogress-2
{
	filter					: grayscale(0.8);
	opacity					: 0.5;
}

.inprogress-3,
IMG.inprogress-3
{
	filter					: grayscale(0.7);
	opacity					: 0.5;
}

.inprogress-4,
IMG.inprogress-4
{
	filter					: grayscale(0.5);
	opacity					: 0.5;
}

.inprogress-5,
IMG.inprogress-5
{
	filter					: grayscale(0.3);
	opacity					: 0.5;
}

.inprogress-6,
IMG.inprogress-6
{
	filter					: grayscale(0.1);
	opacity					: 0.5;
}

FIELDSET
{
	border					: none;
}

SELECT
{
	margin					: 5px;
	padding					: 2px;
	background				: transparent;
	color					: var(--color-white);
}

SELECT[multiple]
{
	height					: 240px;
}

SELECT[multiple]:focus
{
}

SELECT[multiple] OPTION
{
	color					: var(--color-white);
}

H1 SELECT
{
	font-size				: inherit;
	border					: none;
}

OPTION,
OPTGROUP
{
	color					: black;
}

INPUT
{
	background				: transparent;
	color					: var(--color-white);
}

INPUT[type=submit],
BUTTON
{
	cursor					: pointer;
	color					: var(--color-white);
	background				: linear-gradient(#7baf60, #396a42, #a3f93f);
	border-radius			: var(--size-s);
	padding					: var(--size-s) var(--size);
}

BUTTON.small
{
	padding					: 0 2px;
}

BUTTON.error,
BUTTON.alert,
BUTTON.cancel
{
	background				: linear-gradient(#DD0000, #FF0000, #CC0000);
}

BUTTON.success
{
	background				: linear-gradient(#7baf60, #396a42, #a3f93f);
}

BUTTON.info
{
	background				: linear-gradient(#7baf60, #396a42, #a3f93f);
}

BUTTON.warning
{
	background				: linear-gradient(#7baf60, #396a42, #a3f93f);
}

BUTTON:disabled
{
	color					: black;
	background				: linear-gradient(#CCCCCC, #FFFFFF, #AAAAAA);
	cursor					: not-allowed;
}

INPUT
{
	border					: none;
    border-bottom			: 1px dotted white;
	background				: transparent;
}

INPUT[type=number]
{
	width					: 50px;
	text-align				: right;
}

INPUT:read-only
{
	border					: none;
}

/* Red border only if the input is empty */
INPUT:placeholder-shown:required
{
    border-bottom			: 2px dotted red;
}

TEXTAREA:read-only
{
	background				: transparent;
	color					: var(--color-white);
	border					: none;
	resize					: none;
}

TABLE
{
	width					: 100%;
	border-collapse			: collapse;
}

TABLE.w-auto
{
	width					: auto;
}

CAPTION
{
	font-size				: 1rem;
	font-weight				: bold;
	margin					: 1rem auto;
}

TD,
TH
{
	padding					: .5rem;
	border					: 1px solid var(--color-light);
	border					: 1px solid #1074bd;
	line-height				: 30px;
}

TABLE.border-none TH,
TABLE.border-none TD
{
	border:none;
}

TH
{
	font-weight				: bold;
	text-align				: center;
	background				: rgba(0,53,101,0.5);
}

TR.current
{
	background				: rgba(255,255,255,0.1) !important;
}

TR.success
{
	background				: rgba(10,83,0,0.5) !important;
}

TR.odd
{
	filter					: brightness(70%);
	backdrop-filter			: sepia(30%);
}

TR.even
{
}

TABLE.title TD
{
	border					: none;
}

LI
{
	margin-left				: 20px;
}

DL
{
	display					: flex;
	flex-wrap				: wrap;
}

DT,
DD
{
	padding					: 10px 0;
	border-bottom			: 1px solid silver;
}

DT:last-of-type,
DD:last-of-type
{
	padding-bottom			: 0;
	border-bottom			: none;
}

DT
{
	width					: 50%;
	font-weight				: bold;
}

DD
{
	width					: 50%;
	text-align				: right;
}

DL.quarter DT
{
	width					: 25%;
}

DL.quarter DD
{
	width					: 75%;
	text-align				: left;
}

/* Tooltips *******************************************************************/
/* Tooltip container */
.tooltip
{
	position		: relative;
	cursor			: pointer;
}

/* Tooltip text */
.tooltip .tooltip-text
{
	visibility		: hidden;
	width			: auto;
	height			: auto;
	background		: #000000;
	color			: #FFFFFF;
	border			: 1px solid #FFFFFF;
	padding			: 5px;
	border-radius	: var(--size-s);
	overflow-y		: auto;

	/* Position the tooltip text : bottom */
	position		: absolute;
	/*top				: 0;*/
	left			: 50px;
	/*margin-left		: -175px; /* half width */
	z-index			: 1;
}

.tooltip.medium .tooltip-text
{
	width			: 350px;
}

.tooltip .tooltip-text::after
{
	content			: " ";
	position		: absolute;
	/*top				: 100%; /* At the bottom of the tooltip */
	top				: 0;	/* At the top of the tooltip */
	/*left			: 50%;*/
	left			: 2rem;
	margin-left		: -5px;
	border-width	: 5px;
	border-style	: solid;
	border-color	: #FFFFFF transparent transparent transparent;
}

.tooltip.above .tooltip-text,
.tooltip.above .tooltip-text::after
{
	top				: auto;
	bottom			: 0;
}

.tooltip.above .tooltip-text::after
{
	border-color	: transparent transparent #FFFFFF transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltip-text,
.tooltip:active .tooltip-text
{
	visibility		: visible;
}

.badge
{
	display					: inline-block;
	width					: 30px;
	height					: 30px;
	padding					: 8px 0;
	background				: var(--color-dark);
	color					: var(--color-light);
	border-radius			: 50%;
	font-size				: 0.8rem;
	text-align				: center;
}

.badge.alert
{
	background				: var(--color-error);
	color					: var(--color-white);
}

.mirror
{
	-webkit-transform		: scaleX(-1);
	transform				: scaleX(-1);
}

.float
{
	float					: left;
	padding					: 10px;
	margin					: 0 10px 10px 0;
}

.clear
{
	clear					: both;
}

.space-around
{
	padding					: 0;
	margin					: 0;
	display					: flex;
	justify-content			: space-between;
}

.todo
{
	display					: flex;
	border					: 1px dotted white;
	padding					: 10px;
}

.p0
{
	padding					: 0px;
}

.mb-1
{
	margin-bottom			: 1rem;
}

.mb-10
{
	margin-bottom			: 10px;
}

/* Modal *************************************************************************************/

.modal
{
	display					: none;
	position				: fixed;
	z-index					: 10;
	left					: 0;
	right					: 0;
	top						: 0;
	bottom					: 0;
	overflow-y				: scroll;
	background				: rgba(0,0,0,0.7);
	line-height				: 35px;
}

/* Modal Content/Box */
.modal-content
{
	position				: relative;
	border-radius			: var(--size);
	border					: 1px solid black;
	background				: var(--color-dark);
	margin					: 10% auto;
	padding					: 0px 20px 20px;
	border					: 1px solid white;
	width					: 80%;
}

.modal-content H1:after
{
}

.modal-content H2
{
	text-align				: center;
	overflow				: hidden;
	margin					:0;
}

.modal-content H2:before,
.modal-content H2:after
{
	background-color		: white;
	content					: "";
	display					: inline-block;
	height					: 1px;
	position				: relative;
	vertical-align			: middle;
	width					: 50%;
}

.modal-content H2:before
{
	right					: 0.5em;
	margin-left				: -50%;
}

.modal-content H2:after
{
	left					: 0.5em;
	margin-right			: -50%;
}

.modal-medium
{
	width					: 600px;
}

.modal-small
{
	width					: 475px;
}

.modal-small INPUT,
.modal-small SELECT
{
	width		 			: 280px;
	margin-right			: 10px;
}

.modal-content LABEL
{
	display					: inline-block;
	width					: 90px;
	margin-right			: 10px;
}

/* The Close Button */
.modal-close
{
	position				: absolute;
	top						:-10px;
	right					: 5px;
	color					: #aaa;
	float					: right;
	font-size				: 38px;
	font-weight				: bold;
	text-decoration			: none;
	cursor					: pointer;
}

.close:hover,
.close:focus
{
	color					: #ccc;
} 


/* Player ******************************************************/

.grade-Leader
{
	color					: red;
}

.grade-Officer
{
	color					: yellow;
}

.grade-Member
{
	color					: blueviolet;
}

.grade-None
{
	color					: darkgreen;
}

/* SWGOH *******************************************************/

#guild_icon
{
	float					: left;
	width					: 128px;
	height					: 128px;
	border-radius			: 50%;
	box-shadow				: inset 0 64px 64px rgba(0,0,0,0.8);
	
}

#guild_img
{
	margin					: auto;
}

#character-list
{
	max-width				: 680px;
}

.grid-square
{
	float					: left;
	width					: 100px;
	height					: 100px;
	line-height				: 16px;
}

.grid-square:hover
{
	background				: #CCCCCC;
}

.ghost
{
	background				: #C8EBFB;
}

.collection-char
{
	padding					: 25px 15px 15px;
}

.collection-char .name
{
    z-index					: 1;
    position				: absolute;
    top						: -25px;
    left					: -15px;
    right					: -15px;
    width					: 100px;
	font-family				: "Open Sans", sans-serif;
	font-size				: .6rem;
    text-shadow				: -1px -1px 0 #000,2px -1px 0 #000,2px 2px 0 #000,-1px 2px 0 #000,2px 3px 0 #000,1px 3px 0 #000,2px 3px 0 #000;
    color					: #91F0F0;
	opacity					: 0.7;
}

.collection-char .name.gl
{
    color					: #FFECA9;
}
.char-portrait-full-link
{
	font-size				: 10px;
	color					: #fff;
	font-weight				: 700;
	text-align				: center;
}

.collection-char .char-portrait{margin		:15px auto 10px;width:80px;display:block}
.collection-char .collection-char-statmods{display		:none}
.collection-char .pc-statmod-list{margin		:0 auto}

.collection-char-missing .char-portrait,
.collection-char-missing .collection-char-statmods,
.collection-char-missing .unit-portrait
{
	opacity			:.5;
}

.collection-char-name{display		:table;min-height:30px;line-height:1;text-align:center;font-weight:700;width:100%; display:none;}
.collection-char-name-link{color		:#333;display:table-cell;vertical-align:top}

.collection-char-char-statmods{display		:none}
.collection-char-gp{display		:flex;align-items:center;width:50px;line-height:1;margin:4px auto;position:relative; display:none; background:purple;}
.collection-char-gp-label{padding-left		:3px;font-size:10px;font-weight:700;position:absolute;left:100%;display:flex; background:purple;}
.collection-char-gp-label-percent{font-size		:8px}
.collection-char-gp-progress{background		:#ccc;height:5px;border-radius:10px;overflow:hidden;flex:1}
.collection-char-gp-progress-bar{height		:100%;background:#617a88;border-radius:10px}

.star
{
	position							: absolute;
	z-index								: 2;
	bottom								: 32px;
	left								: 32px;
	width								: 10px;
	height								: 55px;
	color								: #000;
	-webkit-transform-origin			: center bottom;
	transform-origin					: center bottom;
	background							: center 0 transparent url(../img/icon/bg/star.png) no-repeat;
	background-size						: 100%;
}
.star-inactive{background-image		:url(../img/icon/bg/star-inactive.png)}
.star1{-webkit-transform		:translateX(-50%) rotate(-60deg);transform:translateX(-50%) rotate(-60deg)}
.star2{-webkit-transform		:translateX(-50%) rotate(-40deg);transform:translateX(-50%) rotate(-40deg)}
.star3{-webkit-transform		:translateX(-50%) rotate(-20deg);transform:translateX(-50%) rotate(-20deg)}
.star4{-webkit-transform		:translateX(-50%) rotate(0deg);transform:translateX(-50%) rotate(0deg)}
.star5{-webkit-transform		:translateX(-50%) rotate(20deg);transform:translateX(-50%) rotate(20deg)}
.star6{-webkit-transform		:translateX(-50%) rotate(40deg);transform:translateX(-50%) rotate(40deg)}
.star7{-webkit-transform		:translateX(-50%) rotate(60deg);transform:translateX(-50%) rotate(60deg)}

.char-portrait-full
{
	position					: relative;
	border-radius				: 50%;
}

.char-portrait-full.char-npc
{
	border						: 2px solid green;
	margin						: 0 10px;
}

/* to delete ? */
.char-portrait-full-empty{background-color		:#ccc;box-shadow:0 0 0 2px #aaa}

.char-portrait-full-img
{
	width					: 65px;
	height					: 65px;
	border-radius			: 50%;
	background				: #000;
}

.char-portrait-full-gear
{
	position				: absolute;
	z-index					: 2;
	top						: -8px;
	left					: -8px;
	width					: 80px;
	height					: 80px;
}

.char-portrait-full-gear-t1 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g1.svg")}
.char-portrait-full-gear-t2 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g2.svg")}
.char-portrait-full-gear-t3 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g3.svg")}
.char-portrait-full-gear-t4 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g4.svg")}
.char-portrait-full-gear-t5 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g5.svg")}
.char-portrait-full-gear-t6 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g6.svg")}
.char-portrait-full-gear-t7 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g7.svg")}
.char-portrait-full-gear-t8 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g8.svg")}
.char-portrait-full-gear-t9 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g9.svg")}
.char-portrait-full-gear-t10 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g10.svg")}
.char-portrait-full-gear-t11 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g11.svg")}
.char-portrait-full-gear-t12 .char-portrait-full-gear{background-image		:url("../img/icon/bg/gear-icon-g12.svg")}
.char-portrait-full-gear-t13 .char-portrait-full-gear
{
	left					: -14px;
	top						: -18px;
	width					: 95px;
	height					: 90px;
	background-image		:url(../img/icon/bg/g13-frame-atlas.png);
	background-size			: 100%;
}

.char-portrait-full-gear-t13.char-portrait-full-micro .char-portrait-full-gear{width		:45px;height:42px}
.char-portrait-full-gear-t13.char-portrait-full-xsmall .char-portrait-full-gear{width		:54px;height:50px}
.char-portrait-full-gear-t13.char-portrait-full-small .char-portrait-full-gear{width		:64px;height:60px}
.char-portrait-full-gear-t13.char-portrait-full-large .char-portrait-full-gear{width		:130px;height:121px}
.char-portrait-full-gear-t13.char-portrait-full-alignment-dark-side .char-portrait-full-gear{background-position		:0 -100%}
.char-portrait-full-gear-t13.char-portrait-full-alignment-neutral .char-portrait-full-gear{background-position		:0 -200%}
.char-portrait-full-gear-level,.char-portrait-full-level
{
	position				:absolute;
	
	background				: #264257;
	border-radius			: 100%/130% 130% 15px 15px;
	border					: 2px solid #fff;
	text-shadow				:
		-1px -1px 0 #000,
		2px -1px 0 #000,
		2px 2px 0 #000,
		-1px 2px 0 #000,
		2px 3px 0 #000,
		1px 3px 0 #000,
		2px 3px 0 #000;
}

.char-portrait-full-level
{
	position			: absolute;
	z-index				: 4;
	bottom				: -10px;
	left				: 20px;
	width				: 30px;
	padding				: 0 5px;
}

.char-portrait-full-gear-level
{
	left			: 80%;
	bottom			: 0;
	font-size		: 12px;
	min-width		: 26px;
	padding			: 0 6px 0 5px;
	z-index			: 2;
	box-shadow		: 0 1px 2px rgba(0,0,0,.5),inset 0 0 8px 1px rgba(0,0,0,.5)
}

/*.char-portrait-full-large .char-portrait-full-zeta{left		:-19px;top:60px;width:55px;height:46px;line-height:46px} */
/* Affichage du niveau de zeta si existant */
.char-portrait-full-zeta,
.char-portrait-full-omicron
{
	z-index				: 4;
	position			: absolute;
	bottom				: -10px;
	width				: 30px;
	height				: 40px;
	text-shadow			: -1px -1px 0 #000,2px -1px 0 #000,2px 2px 0 #000,-1px 2px 0 #000,2px 3px 0 #000,1px 3px 0 #000,2px 3px 0 #000;
}

.char-portrait-full-zeta
{
	left				: -10px;
	line-height			: 40px;
	background			: 50% transparent url("/img/icon/capacity/zeta-flat.png") no-repeat;
	background-size		:contain;
}

.char-portrait-full-omicron
{
	right				: -10px;
	line-height			: 38px;
	background			: 50% transparent url("/img/icon/capacity/omicron-flat.png") no-repeat;
	background-size		:contain;
}

/* Affichage du niveau de relic si existant */
.char-portrait-full-relic
{
	position			: absolute;
	z-index				: 4;
	width				: 30px;
	height				: 30px;
	line-height			: 30px;
	bottom				: -10px;
	right				: 20px;
	text-shadow			: -1px -1px 0 #000,2px -1px 0 #000,2px 2px 0 #000,-1px 2px 0 #000,2px 3px 0 #000,1px 3px 0 #000,2px 3px 0 #000;
	background-image	: url(../img/icon/bg/relic-badge-atlas.png);
	background-size		: 100%;
}

.char-portrait-full-gear-t13.char-portrait-full-alignment-dark-side .char-portrait-full-relic{background-position		:0 -100%}
.char-portrait-full-gear-t13.char-portrait-full-alignment-neutral .char-portrait-full-relic{background-position		:0 -200%}
.char-portrait-full-micro .char-portrait-full-relic{top		:13px;right:-11px;width:24px;height:24px;line-height:24px;font-size:10px}
.char-portrait-full-xsmall .char-portrait-full-relic{top		:19px;right:-11px;width:27px;height:27px;line-height:27px;font-size:10px}
.char-portrait-full-small .char-portrait-full-relic{top		:24px;right:-11px;width:32px;height:32px;line-height:32px;font-size:11px}
.char-portrait-full-medium .char-portrait-full-relic{top		:34px;right:-11px;width:36px;height:36px;line-height:36px}
.char-portrait-full-large .char-portrait-full-relic{top		:57px;right:-11px;width:50px;height:50px;line-height:50px}
.char-portrait-full-gear-t1 .char-portrait-full-gear-level{background-color		:#a5d0da}
.char-portrait-full-gear-t2 .char-portrait-full-gear-level,.char-portrait-full-gear-t3 .char-portrait-full-gear-level{background-color		:#98fd33}
.char-portrait-full-gear-t4 .char-portrait-full-gear-level,.char-portrait-full-gear-t5 .char-portrait-full-gear-level,.char-portrait-full-gear-t6 .char-portrait-full-gear-level{background-color		:#00bdfe}
.char-portrait-full-gear-t7 .char-portrait-full-gear-level,.char-portrait-full-gear-t8 .char-portrait-full-gear-level,.char-portrait-full-gear-t9 .char-portrait-full-gear-level,.char-portrait-full-gear-t10 .char-portrait-full-gear-level,.char-portrait-full-gear-t11 .char-portrait-full-gear-level{background-color		:#9241ff}
.char-portrait-full-gear-t12 .char-portrait-full-gear-level{background-color		:#fc3}
.char-portrait-full-gear-t13 .char-portrait-full-gear-level{background-color		:#f56820}


.ship-portrait-full-alignment-light-side
{
	box-shadow: 0 0 0 2px #005C80;
}
.ship-portrait-full-alignment-dark-side
{
	box-shadow: 0 0 0 2px #800000;
}
.ship-portrait-full-alignment-neutral-side
{
	box-shadow: 0 0 0 2px #333333;
}

/* Notifications ***************************************************/
#toaster
{
	z-index			: 2;
	position		: absolute;
	top				: 50px;
	right			: 25px;
	width			: 400px;
	min-height		: 300px;
}

#toaster .toast
{
	position		: relative;
	border			: none !important;
	margin-bottom	: 8px;
	text-shadow		: 0 -1px 1px rgba(0,0,0,.2);
	border-radius	: var(--size-s);
	box-shadow		: 5px 5px 5px #333333;
}

#toaster .toast .icon
{
	position		: absolute;
	top				: 50%;
	transform		: translateY(-50%);
	margin-left		: -15px;
	width			: 80px;
	text-align		: center;
}

#toaster .toast .copy
{
	margin-left		: 60px;
	padding-left	: 20px;
	border-left		: 1px solid rgba(255,255,255,.3);
	line-height		: 1.2;
}

#toaster .toast .copy h4
{
	font-size		: 16px;
	font-weight		: 600;
	margin-bottom	: 5px;
}

#toaster .toast .copy p
{
	font-size		: 14px;
	margin-bottom	: 0;
	padding			: 0 20px 10px 0;
}

#toaster .close
{
	opacity			: 1;
	background		: #EEEEEE;
	width			: 30px;
	height			: 30px;
	line-height		: 26px;
	text-align		: center;
	border-radius	: 50%;
	border			: 2px solid #333333;
	position		: absolute;
	top				: 50%;
	right			: -15px;
	transform		: translateY(-50%);
	cursor			: pointer;
}

#toaster .toast-info
{
	background-color		: var(--color-info);
	color		: #eee;
	box-shadow		: 0 0 20px 5px fade(var(--color-info), 50%);
}

#toaster .toast-info .close
{
	color		: var(--color-info);
	border-color		: var(--color-info);
}

#toaster .toast-success
{
	background-color		: var(--color-success);
	color		: #eee;
	box-shadow		: 0 0 20px 5px fade(var(--color-success), 50%);
}

#toaster .toast-success .close
{
	color		: var(--color-success);
	border-color		: var(--color-success);
}

#toaster .toast-warning
{
	background-color		: var(--color-warning);
	color		: #eee;
	box-shadow		: 0 0 20px 5px fade(var(--color-warning), 40%);
}

#toaster .toast-warning .close
{
	color		: var(--color-warning);
	border-color		: var(--color-warning);
}

#toaster .toast-danger
{
	background-color		: var(--color-error);
	color		: #eee;
	box-shadow		: 0 0 20px 5px fade(var(--color-error), 30%);
}

#toaster .toast-danger .close
{
	color		: var(--color-error);
	border-color		: var(--color-error);
}

/* config_team.php *************************************************/
#teams TD
{
	text-align		: center;
}

/* DataTable ******************************************************/
table.fixedHeader-floating
{
	background				: rgba(0,53,101,1);
}

table.dataTable > tbody > tr:last-child > *,
div.dt-container.dt-empty-footer tbody > tr:last-child > *
{
	border-bottom: 1px solid #1074bd;
}


/* control bar + titre */
.dt-container .top,
.dt-container .bottom
{
	display				: flex;
	flex-wrap			: wrap;
	justify-content		: space-between;
	align-content		: space-between;
	align-items			: center;
	gap					: 1rem;
}

.dt-container .bottom
{
	margin-top			: 0.5rem;
}

.dt-container .top .dataTables_title
{
	flex				: 1.5 0.9 40%;
	font-size			: 20px;
	text-align			: center;
}


.dt-container .top .dataTables_action
{
	flex				: 0 0 10%;
	text-align			: center;
}

/* Filtre */
.dataTables_length,
.dataTables_filter
{
	flex				: 0 0 25%;
	margin-bottom		: 10px;
}

.dataTables_filter INPUT
{
	background			: transparent;
	color				: var(--color-white);
}

.dataTables_length SELECT,
.dataTables_length OPTION
{
	background			: var(--color-dark);
	color				: var(--color-white);
}

table.dataTable td.dt-control::before
{
	border-top: 5px solid transparent;
	border-left: 10px solid rgba(255, 255, 255, 0.5);
	border-bottom: 5px solid transparent;
	border-right: 0px solid transparent;
}

table.dataTable tr.dt-hasChild td.dt-control::before
{

	border-top: 10px solid rgba(255, 255, 255, 0.5);
	border-left: 5px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 5px solid transparent;
}

/* navigation */
.dt-container .dt-paging
{
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active
{
	color: rgba(255, 255, 255, 0.5) !important;
}

div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover
{
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Datatable child row
html.dark table.dataTable tr.dt-hasChild td.dt-control::before {
  color: rgba(255, 255, 255, 0.5);
}
html.dark table.dataTable td.dt-control::before {
  color: rgba(255, 255, 255, 0.5);
}
table.dataTable tr.dt-hasChild td.dt-control::before {
  content: "▼";
}
table.dataTable td.dt-control::before {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  content: "►";
}

html.dark table.dataTable td.dt-control::before {
  color: rgba(255, 255, 255, 0.5);
}
table.dataTable td.dt-control::before {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  content: "►";
}
*/


/** Accordion v3.3.4
 * https://github.com/michu2k/Accordion
 */
.ac
{
	border-radius	: var(--size-s);
	margin-bottom	: var(--size);
	background		: rgba(255,255,255,0.1);
}

.ac .ac-header
{
	margin			: 0;
	padding			: 0;
}

.ac .ac-trigger
{
	position		: relative;
	cursor			: pointer;
	width			: 100%;
	margin			: 0;
	font-size		: 16px;
	font-weight		: bold;
	text-align		: left;
	transition		: color .25s ease;
	text-decoration	: none;
	border			: none;
	border-radius	: var(--size-s);
	background		: rgba(0, 53, 101, 1);
}

.ac.is-active .ac-trigger
{
	border-radius	: var(--size-s) var(--size-s) 0 0;
}
.ac .ac-trigger::after
{
	position		: absolute;
	width			: 15px;
	right			: 10px;
	top				: 5px;
	content			: "+";
	text-align		: center;
}

.ac.is-active>.ac-header .ac-trigger::after
{
	content			: "–";
}

.ac .ac-panel
{
	overflow		:hidden;
	transition-property:height,visibility;
	transition-timing-function:ease;
}

.ac .ac-panel .ac-text
{
	padding			: var(--size);
}

.ac.js-enabled .ac-panel
{
	visibility		: hidden;
}

.ac.is-active .ac-panel
{
	visibility		: visible;
}

/* Mods **************************************/
.mod
{
	position		: relative;
	width			: 180px;
	height			: 250px;
	float			: left;
	padding			: 10px;
	margin			: 10px;
}

.mod-rarity
{
	display			: block;
	width			: 62px;
	height			: 14px;
	padding			: 3px;
	margin			: 0 auto 4px;
	border-radius	: var(--size-s);
	border			: 1px solid white;
}

.mod-star
{
	float			: left;
	width			: 6px;
	height			: 6px;
	background		: #fefce7;
	border-radius	: 50%;
	margin-right	: 3px;
}

.mod-base
{
	position	: relative;
	margin		: 0 auto;
	width		: 90px;
	height		: 90px;
}

.mod-level
{
	position	: absolute;
	top			: 100px;
	right		: 0px;
	border		: 1px solid white;
	padding		: 2px;
}

.mod-toon
{
	position	: absolute;
	top			: 10px;
	right		: 0px;
}

.mod-toon IMG
{
	width			: 35px;
	height			: 35px;
	border-radius	: 50%
}

.mod-base-shape
{
	width		: 90px;
	height		: 90px;
	background	: 0 0 transparent url('../img/icon/mod/set.png') no-repeat;
}

.tier-1 .mod-base-shape { background-position-y	: 0px; }
.tier-2 .mod-base-shape { background-position-y	: -90px; }
.tier-3 .mod-base-shape { background-position-y	: -180px; }
.tier-4 .mod-base-shape { background-position-y	: -270px; }
.tier-5 .mod-base-shape { background-position-y	: -360px; }

.rarity-5.slot-1 .mod-base-shape { background-position-x	: 0px; }
.rarity-5.slot-2 .mod-base-shape { background-position-x	: -90px; }
.rarity-5.slot-3 .mod-base-shape { background-position-x	: -180px; }
.rarity-5.slot-4 .mod-base-shape { background-position-x	: -270px; }
.rarity-5.slot-5 .mod-base-shape { background-position-x	: -360px; }
.rarity-5.slot-6 .mod-base-shape { background-position-x	: -450px; }
.rarity-6.slot-1 .mod-base-shape { background-position-x	: -540px; }
.rarity-6.slot-2 .mod-base-shape { background-position-x	: -630px; }
.rarity-6.slot-3 .mod-base-shape { background-position-x	: -720px; }
.rarity-6.slot-4 .mod-base-shape { background-position-x	: -810px; }
.rarity-6.slot-5 .mod-base-shape { background-position-x	: -900px; }
.rarity-6.slot-6 .mod-base-shape { background-position-x	: -990px; }

.mod-base-icon
{
	position	: absolute;
	width		: 32px;
	height		: 32px;
	background	: 0 0 transparent url('../img/icon/mod/skill.png') no-repeat;
}

.mod-base-icon.disabled
{
	opacity			: 0.5;
	filter			: grayscale(0.5);
}


.mod-base-icon { right:27px; top:30px;}
.slot-1 .mod-base-icon { right:20px; top:24px;}
.slot-2 .mod-base-icon { right:16px; top:20px;}
.slot-4 .mod-base-icon { right:27px; top:36px;}

.set-1 .mod-base-icon{ background-position-x : -2px; }
.set-2 .mod-base-icon{ background-position-x : -34px; }
.set-3 .mod-base-icon{ background-position-x : -66px; }
.set-4 .mod-base-icon{ background-position-x : -98px; }
.set-5 .mod-base-icon{ background-position-x : -130px; }
.set-6 .mod-base-icon{ background-position-x : -162px; }
.set-7 .mod-base-icon{ background-position-x : -194px; }
.set-8 .mod-base-icon{ background-position-x : -226px; }

.tier-1 .mod-base-icon{ background-position-y : 0px; }
.tier-2 .mod-base-icon{ background-position-y : -32px; }
.tier-3 .mod-base-icon{ background-position-y : -64px; }
.tier-4 .mod-base-icon{ background-position-y : -96px; }
.tier-5 .mod-base-icon{ background-position-y : -128px; }

/* page toon  & player Debut */
#container
{
	display			: flex;
	width			: 100%;
	gap				: 1rem 1rem;
	margin-top		: 1rem;
}

#left
{
	flex			: 0 0 180px;
}

#right
{
	flex			: 0 0 250px;
}

#center
{
	flex			: 1 1 400px;
	display			: flex;
	gap				: 1rem 1rem;
	flex-wrap		: wrap;
	align-content	: start;
	justify-content	: start;
}

@media (max-width:992px)
{
	#container
	{
		display		: block;
	}

	#left,
	#right,
	#center
	{
		width		: 100%;
		margin		: 0 0 10px;
	}
}

.item
{
	position		: relative;
	overflow		: hidden;
	padding			: var(--size);
	border-radius	: var(--size-s);
	background		: rgba(255,255,255,0.05);
	box-shadow		: .5rem .5rem 5px rgba(0,0,0,0.25);
}

.item.no-border
{
	border-color	: transparent;
}

.item HR
{
	color			: var(--color-white);
	margin			: 10px -10px;
}

.item DIV.title,
.item DIV.end
{
	z-index			: 4;
	padding			: 5px;
	margin			: -1rem;
	background		: rgb(0, 53, 101);
	font-weight		: bold;
	text-align		: center;
}

.item DIV.title
{
	margin-bottom	: 10px;
}

.item DIV.end
{
	position		: absolute;
	width			: 100%;
	bottom			: 17px;
	margin-top		: 10px;
}

.item DIV.stat
{
	display			: flex;
	align-items		: center;
	margin-bottom	: 2px;
}

.item DL
{
	margin			: -10px;
}

.item DT
{
	padding-left	: 10px;
}

.item DD
{
	padding-right	: 10px;
}

.item SPAN.label
{
	flex-grow		: 1;
}

.item SPAN.value
{
}

.mod-detail
{
	clear			: both;
	width			: 420px;
	height			: 850px;
}

.mod-set
{
	width			: 160px;
	height			: 54px;
}

.mod-set .mod-base
{
	float			: left;
	margin			: 5px;
	width			: 42px;
	height			: 42px;
	border			: 1px solid yellow;
	border-radius	: 50%;
	padding			: 5px;
}

.mod-set .mod-base-icon
{
	position		: initial;
}

.gears
{
	position		: relative;
	width			: 230px;
	height			: 200px;
}

.gear
{
	width			: 50px;
	height			: 50px;
	border			: 1px solid white;
}

.gear.full
{
	opacity			: 1;
	filter			: grayscale(0);
}

.gear.empty
{
	opacity			: 0.5;
	filter			: grayscale(1);
}

.gear.slot-1
{
	position		: absolute;
	top				: 10px;
	left			: 10px;
}

.gear.slot-2
{
	position		: absolute;
	top				: 70px;
	left			: 10px;
}

.gear.slot-3
{
	position		: absolute;
	top				: 130px;
	left			: 10px;
}

.gear.slot-4
{
	position		: absolute;
	top				: 10px;
	right			: 10px;
}

.gear.slot-5
{
	position		: absolute;
	top				: 70px;
	right			: 10px;
}

.gear.slot-6
{
	position		: absolute;
	top				: 140px;
	right			: 10px;
}

.bold
{
	font-weight		: bold;
}
/* page toon Fin */

.raid
{
	position		: relative;
	max-width		: 250px;
	border-width	: 2px;
	border-style	: solid;
	border-color	: white;
	border-radius	: var(--size);
	aspect-ratio	: 2/3;
	overflow		: hidden;
	box-shadow		: .5rem .5rem 5px rgba(0,0,0,0.25);
}

.raid H2
{
	position		: absolute;
	top				: 0;
	width			: 100%;
	background-color: rgba(0,0,0,.5);
	text-align		: center;
	color			: var(--color-white);
}

.raid IMG
{
	width			: 100%;
	height			: 100%;
}

.raid DIV
{
	position		: absolute;
	bottom			: 0;
	left			: 0;
	right			: 0;
	margin			: 1rem;
	background		: linear-gradient(90deg,transparent 15%,rgba(0,181,31,.5),transparent 85%);
	text-align		: center;
	font-size		: 1.25rem;
	color			: #b9f92c;
}

/* TB */
#TB-ROTE .header
{
	position		: relative;
	width			: 100%;
	height			: 140px;
	background		: url('/img/tb/RotE/mustafar.png') no-repeat;
	background-size	: cover;
}

#TB-ROTE .header .shadow
{
	height			: 38px;
	background		: rgba(0, 0, 0, .25);
}

#TB-ROTE .header .title
{
	position		: absolute;
	top				: 0;
	left			: 0.5rem;
	font-family		: 'Star Wars';
	font-size		: 1.5rem;
}

#TB-ROTE .header .infos
{
	position		: absolute;
	top				: 8px;
	right			: 0.5rem;
	font-size		: 1.5rem;
}

#TB-ROTE .header .status
{
	position		: absolute;
	bottom			: 0;
	width			: 100%;
	height			: 50px;
	background		: rgba(0, 0, 0, .25);
}

#TB-ROTE .header .status .ruler
{
	position		: absolute;
	bottom			: 0;
	background		: darkblue;
	width			: 100%;
	height			: 5px;
}

#TB-ROTE .header .status .star1-mark,
#TB-ROTE .header .status .star2-mark,
#TB-ROTE .header .status .star3-mark
{
	position	: absolute;
	bottom		: 0;
	background	: yellow;
	width		: 2px;
	height		: 5px;
}

#TB-ROTE .header .status .star1-mark
{
	left		: 33%;
}

#TB-ROTE .header .status .star2-mark
{
	left		: 66%;
}

#TB-ROTE .header .status .star3-mark
{
	left: 100%;
}

#TB-ROTE .header .status .star1-data,
#TB-ROTE .header .status .star2-data,
#TB-ROTE .header .status .star3-data
{
	position: absolute;
	bottom: 0.5rem;
	width: 72px;
	text-align: right;
}

#TB-ROTE .header .status .star1-data
{
	left: calc(33% - 72px);
}

#TB-ROTE .header .status .star2-data
{
	left: calc(66% - 72px);
}
#TB-ROTE .header .status .star3-data
{
	left: calc(100% - 72px);
}