/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------COULEURS-------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
:root {
    --un: #011261;
    --deux: #7b95cc;
    --trois: #c2cbec;
	--quatre: #e0e5fc;
	--cinq: #ffffff;
	--six: #3b2161;
	--linear1: linear-gradient(to top, #011261, #344aaa);
}


/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------GÉNÉRALITÉS----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	font-family: Trebuchet MS;
	font-variant: small-caps;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
}
.charsheet input[type="text"], select {
	width: 20vw;
	height: 25px;
	border: none;
}
.charsheet select {
	margin:0px;
	cursor: pointer;
}
.charsheet input[type="number"] {
	width: 10px;
	height: 25px;
	border: none;
}
.logo {
	width: 100px;
	height: auto;
}
.flex {
	display: flex;
}
.col {
	flex-direction: column;
}
.row {
	flex-direction: row;
}
.wrap {
	flex-wrap: wrap;
}
.a-baseline {
	align-items: baseline;
}
.a-center {
	align-items: center;
}
.a-end {
	align-items: end;
}
.j-baseline {
	justify-content: baseline;
}
.j-between {
	justify-content: space-between;
}
.j-around {
	justify-content: space-around;
}
.j-evenly {
	justify-content: space-evenly;
}
.j-center {
	justify-content: center;
}
.j-end {
	justify-content: end;
}
.div100 {
	min-width: 800px;
	height: auto;
	margin: auto;
	margin-bottom: 5px;
	padding-bottom: 5px;
	background-color: var(--deux);
	border: solid 2px var(--un);
}

/*------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------BOUTON DES RÉGLAGES------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
input[type="checkbox"].checkreglages {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50px;
	left: 30px;
	z-index: 2;
	opacity: 0;
}
input[type="checkbox"].checkreglages + span::before {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 42px;
	left: 29px;
	font-family: 'pictos';
	font-size: 24px;
	font-variant: normal;
	content: 'y';
	background-color: var(--cinq);
	color: var(--un);
}

input[type="checkbox"].checkreglages:hover + span::before {
	transform: scale(1.1);
}

input[type="checkbox"].checkpjpnj {
	width: 30px;
	height: 20px;
	position: absolute;
	top: 50px;
	left: 60px;
	z-index: 2;
	opacity: 0;
}
.charsheet span.checkpj,
.charsheet span.checkpnj {
	width: 30px;
	height: 20px;
	position: absolute;
	top: 50px;
	left: 60px;
	background-color: var(--un);
	color: var(--cinq);
	font-size: 12px;
	font-weight: bold;
	text-align: center;

}
input[type="checkbox"].checkreglages:not(:checked) ~ input[type="checkbox"].checkpjpnj,
input[type="checkbox"].checkreglages:not(:checked) ~ div.checkpjpnj
 {
	display: none;
}
input[type="checkbox"].checkreglages:checked ~ input[type="checkbox"].checkpjpnj,
input[type="checkbox"].checkreglages:checked ~ div.checkpjpnj {
	display: block;
}
input[type="checkbox"].checkpjpnj:not(:checked) ~ div.pj,
input[type="checkbox"].checkpjpnj:not(:checked) ~ div span.checkpnj,
input[type="checkbox"].checkpjpnj:checked ~ div.pnj,
input[type="checkbox"].checkpjpnj:checked ~ div span.checkpj {
	display: none;
}
input[type="checkbox"].checkpjpnj:checked ~ div.pj,
input[type="checkbox"].checkpjpnj:checked ~ div span.checkpnj,
input[type="checkbox"].checkpjpnj:not(:checked) ~ div.pnj,
input[type="checkbox"].checkpjpnj:not(:checked) ~ div span.checkpj  {
	display: block;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------- VISUEL DU BOUTON DÉ -----------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.ui-dialog .charsheet button[type="roll"]::before {
	font-family: 'dicefontd10';
	content: '0';
}
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
    display: block;
	width: 25px;
	height: 12px;
    background: var(--un);
    color: var(--cinq);
	border: solid 1px var(--quatre);
    box-shadow: none;
    font-size: 10px;
	text-align: center;
}
.charsheet .repcontrol_add:hover,
.charsheet .repcontrol_edit:hover,
.charsheet .repcontrol_del:hover {
	background: var(--quatre);
    color: var(--un);
	border: solid 1px var(--un);
}


/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------PERSONNAGE-----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.divPerso {
	width: 100%;
	height: auto;
}
.divPerso p {
	font-size: 15px;
	margin-left: 0.3em;
	margin-right: 0.3em;
}
.divPerso input {
	font-size: 15px;
	background-color: var(--cinq);
	text-align: center;
}
.divPerso2 input[type="text"] {
	width: 250px;
}
.divPerso1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
	background-color: var(--un);
	color:var(--quatre);
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
.divPerso2 {
	width: 100%;
	height: 40px;
}
input.check-perso-1,
input.check-perso-2 {
    width:10px;
    height: 10px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
	position: absolute;
}

span.check-perso-1a::before,
span.check-perso-2a::before,
span.check-perso-1b::before,
span.check-perso-2b::before {
	width: 15px;
	height: 21px;
	position: relative;
	color: var(--cinq);
	font-family: "pictos";
	font-size: 15px;
}
span.check-perso-1a::before,
span.check-perso-2a::before {
	margin-top: -60px;
	margin-right: -15px;
	content: '{';
}
span.check-perso-1b::before,
span.check-perso-2b::before {
	margin-top: -20px;
	margin-right: -15px;
	content: '}';
}
input.check-perso-1:checked ~ span.check-perso-1a::before,
input.check-perso-1:not(:checked) ~ span.check-perso-1b::before,
input.check-perso-2:checked ~ span.check-perso-2a::before,
input.check-perso-2:not(:checked) ~ span.check-perso-2b::before {
	display: none;
}
input.check-perso-1:checked ~ span.check-perso-1b::before,
input.check-perso-1:not(:checked) ~ span.check-perso-1a::before,
input.check-perso-2:checked ~ span.check-perso-2b::before,
input.check-perso-2:not(:checked) ~ span.check-perso-2a::before {
	display: flex;
}
.check-perso-1:not(:checked) ~ div div div.panel-perso-1,
.check-perso-2:not(:checked) ~ div div div.panel-perso-2 {
	display: flex;
}
.check-perso-1:checked ~ div div div.panel-perso-1,
.check-perso-2:checked ~ div div div.panel-perso-2 {
	display: none;
}


/*------------------*/
/*JET PUBLIC - PRIVÉ*/
/*------------------*/
input[type="checkbox"].jetMJ {
	width: 60px;
	height: 20px;
	position: absolute;
	z-index: 2;
	opacity: 0;

}
span.jetMJ1, 
span.jetMJ2 {
	width: 60px;
	height: 25px;
	position: absolute;
	color: var(--cinq);
	font-size: 13px;
	font-weight: bold;
	text-align: center;
}
span.jetMJ1 {
	background-color: rgb(1, 146, 1);
}
span.jetMJ2 {
	background-color: rgb(150, 0, 0);
}
input[type="checkbox"].jetMJ:checked ~ span.jetMJ1,
input[type="checkbox"].jetMJ:not(:checked) ~ span.jetMJ2  {
	display: none;
}
input[type="checkbox"].jetMJ:checked ~ span.jetMJ2,
input[type="checkbox"].jetMJ:not(:checked) ~ span.jetMJ1  {
	display: block;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------CARACTÉRISTIQUES--------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.divCaracs {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
.divCarac {
	width: 25%;
	height: auto;
}
.charsheet button[type="roll"].buttonCarac{
    width: 120px;
    height: 26px;
    background: linear-gradient(to bottom right, #5989e2, #311f8a) padding-box, linear-gradient(to bottom right, #00263f, #d3e8ff) border-box;
	color: var(--cinq);
	border: solid 3px transparent;
	border-radius: 5px;
	box-shadow: black 4px 4px 4px 0px;
	font-size: 16px;
    font-weight: bold;
	transform: skewX(-10deg);
}
.charsheet button[type="roll"].buttonCarac:hover {
	box-shadow: black 2px 2px 4px 0px inset;
}
.divCarac input[type="number"].stats {
	width: 40px;
	height: 40px;
	margin: 2px;
	background-color: var(--cinq);
	color: var(--un);
	border: solid 2px var(--un);
	border-radius: 5px;
	box-shadow: 2px 2px 2px 0 black;
	font-size:15px;
	font-weight:bold;
	text-align: center;
	transform: skewX(-10deg);
}


/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- MENU -------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.charsheet .sheet-competences,
.charsheet .sheet-pouvoirs,
.charsheet .sheet-combat,
.charsheet .sheet-bio,
.charsheet .sheet-equipement,
.charsheet .sheet-infos {
    display: none;
}
input.menu {
	width: 120px;
	height: 30px;
	opacity: 0;
}
span.menu {
    display: inline-block;
	width: 120px;
	height: 30px;
	margin-left: -120px;
	margin-top: 0;
	margin-bottom: -2px;
	padding-top: 5px;
	font-size: 15px;
	text-align: center;
	background-color: var(--un);
	color: var(--cinq);
	border-left: solid 2px var(--un);
	border-top: solid 2px var(--un);
	border-right: solid 2px var(--un);
	border-radius: 10px 10px 0 0;
}
input.menu:checked + span.menu {
	background-color: var(--deux);
	color: var(--cinq);
}
input.menu:not(:checked):hover + span.menu {
	background-color: var(--deux);
	color: var(--cinq);
}
input.menu:not(:checked) + span.menu {
	box-shadow: inset #2a2b4e 0 2px 6px 2px;
}
.mg1:checked ~ div div.sheet-competences,
.mg2:checked ~ div div.sheet-pouvoirs,
.mg3:checked ~ div div.sheet-combat,
.mg4:checked ~ div div.sheet-bio,
.mg5:checked ~ div div.sheet-equipement,
.mg6:checked ~ div div.sheet-infos {
	display: block;
}
.sheet-competences,
.sheet-pouvoirs,
.sheet-combat,
.sheet-bio,
.sheet-equipement,
.sheet-infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
	padding-top: 10px;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------- COMPÉTENCES ----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-competences input[type="number"] {
	background-color: var(--cinq);
	color: var(--un);
	text-align: center;
}
.divComp {
	width:250px;
	margin: 5px;
	border: solid 1px var(--un);
}

.divComp div.divCompLine:nth-child(even) { 
	background-color: var(--quatre);
	color: var(--un); 
}
.divComp div.divCompLine:nth-child(odd) {
	background-color: var(--trois);
	color: var(--un);
}
.divForme {
	height: 20px;
	margin: 4px;
	font-size: 11px;
	font-weight: bold;
}
.divCompTitle {
	height: 30px;
	padding: 5px;
	font-size: 15px;
	font-weight: bold;
}
input.compSpecialisations {
    width: 25px;
    height: 25px;
	margin-left: 0;
	margin-top: 0;
	position: relative;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
input.compSpecialisations + span::before {
	margin-top: 6px;
	margin-left: -18px;
	position:absolute;
	color: var(--un);
    font-size: 15px;
    font-family: "pictos";
    content: '}';
}
input.compSpecialisations:checked + span::before {
    content: '{';
}
input.compShow {
	display:none;
}
input.compShow:not(:checked) ~ div.compShow {
	display:none;
}
input.compShow:checked ~ div.compShow {
	display:block;
}
.comp-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height:30px;
	padding:6px;
	background-color: var(--un);
	color: var(--cinq);
	font-size:10px;
	font-weight:bold;
}
.compNumber {
	float:right;
}
.buttonComp {
	width: 14px;
	height: 24px;
	margin-top: -4px;
	background: var(--un);
	color: var(--cinq);
	box-shadow: black 0 0 4px;
	font-size: 6px;
	font-weight: normal;
	transition: 0.3s ease;
}
.buttonComp:hover {
	background: var(--un);
	color: var(--cinq);
	box-shadow: white 0 0 4px;
	transform: scale(0.9);
	transition: 0.3s ease;
}
.divCompSpecialisation {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 6px;
}
.divCompSpecialisation input[type="text"] {
	width: 150px;
	background-color: var(--cinq);
	color: var(--un);
}


/*---------*/
/*FORMATION*/
/*---------*/
input.buttonForme {
	width: 84px;
	height: 20px;
	margin-top: -4px;
	opacity: 0;
}
span.buttonForme-1,
span.buttonForme-2 {
	width: 80px;
	height: 20px;
	margin-left: -84px;
	margin-top: 0px;
	background-color: var(--un);
	color: var(--cinq);
	font-size: 11px;
	text-align: center;
}
span.buttonForme-1:hover,
span.buttonForme-2:hover,
input.buttonForme:hover ~ span.buttonForme-1,
input.buttonForme:hover ~ span.buttonForme-2 {
	background-color: var(--quatre);
	color: var(--un);
}
span.buttonForme-1 {
	display: inline-block;
}
span.buttonForme-2 {
	display:none;
}
input.buttonForme:checked ~ span.buttonForme-1 {
	display:none;
}
input.buttonForme:checked ~ span.buttonForme-2 {
	display:inline-block;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------POUVOIRS------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-pouvoirs-classe {
	margin: 20px;
	color: var(--cinq);
	font-size: 15px;
	font-weight: bold;
}
.divPouvoir {
	width: 800px;
	margin: 5px;
	padding: 5px;
	background-color: var(--trois);
	border: solid 3px var(--un);
}
.divPouvoir input,
.divPouvoir select {
	background-color: var(--cinq);
	color: var(--un);
	border: none;
}
.divPouvoir input:hover {
	border: dashed 1px var(--un);
}
.divPouvoir input[type="text"].text-titre {
	width: 250px;
	margin: 3px;
	text-align: left;
}
.divPouvoir select {
	width: 200px;
	margin: 3px;
	text-align: left;
}
.divPouvoir input[type="text"].text-court {
	width: 60px;
	margin: 3px;
	text-align: center;
}
.divPouvoir input[type="text"].text-moyen {
	width: 100px;
	margin: 3px;
	text-align: center;
}
.divPouvoir input[type="text"].text-long {
	width: 200px;
	margin: 3px;
	text-align: center;
}
.divPouvoir input[type="text"].text-tres-long {
	width: 300px;
	margin: 3px;
	text-align: center;
}
.divPouvoir input[type="number"].number-court {
	width: 30px;
	margin: 3px;
	text-align: center;
}
.divPouvoir div {
	margin: 2px;
	padding: 2px;
}
.divPouvoir div + span {
	font-size: 16px;
	font-weight: bold;
}
.divPouvoir button[type="action"] {
	width: 15px;
	height: 15px;
	background-color: var(--un);
	color: var(--cinq);
	border: solid 1px var(--un);
	border-radius: 10px;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
.divPouvoir button[type="action"]:hover {
	background-color: var(--cinq);
	color: var(--un);
	border: solid 1px var(--cinq);
}
.divPouvoir .span-title {
	font-size: 15px;
	font-weight: bold;
}
.divPouvoir span {
	color: var(--un);
}
.pouvoirs-title {
	margin-top: 10px;
	color: var(--cinq);
	font-size: 16px;
	font-weight: bold;
}
.pouvoirs-particularite {
	color: var(--cinq);
	font-size: 14px;
}
input.menuPouvoirs {
	width: 160px;
	height: 26px;
	opacity: 0;
}
span.menuPouvoirs {
    display: inline-block;
	width: 160px;
	height: 24px;
	background-color: var(--trois);
	color: var(--un);
	border: solid 1px var(--un);
	border-radius: 12px;
	box-shadow: 0px 0px 5px var(--un);
	margin-left: -160px;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
input.menuPouvoirs:checked + span.menuPouvoirs,
input.menuPouvoirs:hover + span.menuPouvoirs {	
	background-color: var(--un);
	color: var(--cinq);
	border: solid 1px var(--trois);
	box-shadow: 0px 0px 5px var(--quatre), 0px 0px 25px var(--quatre);
}
.pouvoir {
	display: none;	
}
.pouvoir > span {
	margin: 20px;
	color: var(--un);	
	font-size: 18px;
	font-weight: bold;
}


/*---------------------------------*/
/*RITUEL - MUTATION FANTASMAGORIQUE*/
/*---------------------------------*/
.charsheet input.mutfant[value="0"] + div.mutationfantasmagorique {
	display: none;
}
.charsheet input.mutfant[value="1"] + div.mutationfantasmagorique {
	display: flex;
}


/*------*/
/*CLASSE*/
/*------*/
.m1:checked ~ .pPsy,
.m2:checked ~ .pMutation,
.m3:checked ~ .pTalent,
.m4:checked ~ .pRituel {
	display: block;
}
.list-psy,
.list-mutation,
.list-talent,
.list-rituel {
	display: none;
}

.check-list-psy:checked ~ .list-psy,
.check-list-mutation:checked ~ .list-mutation,
.check-list-talent:checked ~ .list-talent,
.check-list-rituel:checked ~ .list-rituel{
	display: inline-block;
}

.check-list-psy + span,
.check-list-rituel + span,
.check-list-mutation + span,
.check-list-talent + span
 {
	margin: 10px;
	color: var(--un);
	font-size: 15px;
	font-weight: bold;
}

.pouvoir-psy,
.pouvoir-mutation,
.pouvoir-talent,
.pouvoir-rituel
 {
	display: none;
}

.pouvoir input[type="checkbox"] {
	margin: 5px 5px 5px 10px;
	transform: scale(1.5);
}


/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- BIO --------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-bio input, select {
	height: 25px;
	background-color: var(--cinq);
	color: var(--un);
	border: none;
}
.sheet-bio input {
	text-align: center;
}
.sheet-bio input[type="text"].text-tres-court {
	width: 30px;
}
.sheet-bio input[type="text"].text-court {
	width: 60px;
}
.sheet-bio input[type="text"].text-moyen {
	width: 120px;
}
.sheet-bio input[type="text"].text-long {
	width: 180px;
}
.sheet-bio input[type="text"].text-tres-long {
	width: 240px;
}
.sheet-bio input[type="number"] {
	width: 15px;
}
.sheet-bio textarea {
	background-color: var(--cinq);
	color: var(--un);
	border: none;
}
.divBio1,
.divBio3,
.divBio4,
.divBio5 {	
	background-color: var(--trois);
	color: var(--un);
}
.divBio1 div,
.divBio2 div,
.divBio3 div,
.divBio4 div,
.divBio5 div {
	margin-top: 2px;
	margin-bottom: 2px;
}
.divBio1a {
	margin-left: 5px;
}
.divBio1 div.divBio-title,
.divBio2 div.divBio-title,
.divBio3 div.divBio-title,
.divBio4 div.divBio-title,
.divBio5 div.divBio-title {
	margin-top: 0;
	margin-bottom: 4px;
	background-color: var(--un);
	color: var(--cinq);;
}
.divBio1 {
	width: 35%;
	height: auto;
	padding: 0;
	border: solid 2px var(--un);
}
.divBio1 .flex {
	padding-left: 5px;
}
.divBio2  {
	width: 25%;
	height: auto;
}
.divBio3, .divBio4, .divBio5 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	border: solid 2px var(--un);
}
.divBio3 {
	min-height: 150px;
}
.divBio4 {
	min-height: 85px;
}
.divBio5 {
	min-height: 115px;
}
.divBio3 .expand {
	padding-left: 5px;
}
.divBio-title {
	width: 100%;
	height: 25px;
	margin-top: 0;
	background-color: var(--un);
	color: var(--cinq);;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
.divBio1 span {
	margin-right: 5px;
	font-size: 12px;
	font-weight: bold;
}
.divBio3 select {
	appearance: none;
}
.divBio1 textarea {
	width: 96%;
	height: 50px;
}
.divBio1 input[type="text"],
.divBio1 input[type="number"],
.divBio3 select {
	height: 25px;
}
.divBio1 input[type="text"] {
	width: 160px;
}
.divBio1 input[type="number"] {
	width: 50px;
}
.divBio3 select {
	width: 190px;
}
.divBio4 textarea,
.divBio5 textarea {
	width: 90%;
	height: 50px;
	margin: 10px;
}
input.number-court,
input.text-court,
input.g1,
input.g2 {
	margin-left: 4px;
	margin-right: 4px;
}



/*------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- LIGNES PAIRES - IMPAIRES --------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.repcontainer[data-groupname=repeating_armure] .repitem:nth-child(even) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_contact] .repitem:nth-child(even) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_distance] .repitem:nth-child(even) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_athletisme] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_concentration] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_connaissances] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_corpsacorps] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_crochetage] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_deguisement] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_discretion] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_eloquence] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_enquete] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_esquive] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_evasion] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_pilotage] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_recherche] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_sagacite] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_soins] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_survie] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_techniques] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_tir] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_vigilance] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_equipement1] .repitem:nth-child(even) div,
.repcontainer[data-groupname=repeating_equipement2] .repitem:nth-child(even) div,
.repcontainer[data-groupname=repeating_vehicule] .repitem:nth-child(even) div.divVehiculeCaracs {
	background-color: var(--deux); 
	color: var(--cinq);
}

.repcontainer[data-groupname=repeating_armure] .repitem:nth-child(odd) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_contact] .repitem:nth-child(odd) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_distance] .repitem:nth-child(odd) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_athletisme] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_concentration] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_connaissances] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_corpsacorps] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_crochetage] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_deguisement] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_discretion] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_eloquence] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_enquete] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_esquive] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_evasion] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_pilotage] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_recherche] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_sagacite] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_soins] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_survie] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_techniques] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_tir] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_vigilance] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_equipement1] .repitem:nth-child(odd) div,
.repcontainer[data-groupname=repeating_equipement2] .repitem:nth-child(odd) div,
.repcontainer[data-groupname=repeating_vehicule] .repitem:nth-child(odd) div.divVehiculeCaracs {
	background-color: var(--trois);
	color: var(--un);
}


/*------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------- ÉQUIPEMENT ---------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-equipement {
	width: 100%;
}
.sheet-equipement input[type="text"] {
	width: 90%;
	height: 25px;
	margin: 5px;
	background-color: var(--cinq);
	color: var(--un);
}
.divEquipement {
	width:45%;
	height: auto;
	margin:5px;
	padding:0px;
	background-color: var(--un);
	color: var(--cinq);;
	border:1px solid var(--un);
}
.divEquipement div { 
	background-color: var(--trois);
	color: var(--un);
}
.equipement-title {
	height: 30px;
	font-size: 14px;
	text-align: center;
}

/*-----*/
/*MAINS*/
/*-----*/
input[type="checkbox"].mains {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	opacity: 0;
}
span.mains {
	width: 20px;
	height: 20px;
	margin-left: -30px;
	margin-top: 0;
	font-size: 15px;
	text-align: center;
}
input[type="checkbox"].mains:not(:checked):hover + span.mains {
	background-color: var(--cinq);
	color: #000000;
	transition: 0.3s ease;
}
input[type="checkbox"].mains:checked:hover + span.mains {
	background-color: var(--cinq);
	color: #3FB315;
	transition: 0.3s ease;
}
input[type="checkbox"].mains:checked + span.mains {
	background-color: #3FB315;
	color: var(--cinq);;
}
input[type="checkbox"].mains:not(:checked) + span.mains {
	background-color: #000000;
	color: var(--cinq);;
}


/*--------*/
/*VÉHICULE*/
/*--------*/
.divVehicule {
	width: 800px;
	height: auto;
	background-color: var(--un);
	color: var(--cinq);
	border:1px solid var(--un);
}
.charsheet .divVehiculeCaracs input[type="text"] {
	width: 50px;
	height: 25px;
	text-align: center;
}
.charsheet .divVehiculeCaracs input[type="text"].vehicule-perso,
.charsheet .divVehiculeCaracs select.vehicule-select {
	width: 200px;
	height: 25px;
}
.charsheet .divVehiculeCaracs input[type="checkbox"] {
	position: absolute;
	left: 10px;
}
.divVehiculeDescription {
	width: 800px;
	height: 25px;
	background-color: var(--un);
	color: var(--cinq);
}
.divVehiculeCaracs {
	width: 800px;
	height: 35px;
	margin: 0;
}
.divVehicule1 {
	width: 40%;
	height: 35px;
	margin: 0;
	padding: 0;
	text-align: center;
}
.divVehicule2 {
	width: 10%;
	height: 35px;
	margin: 0;
	padding: 0;
	text-align: center;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- COMBAT -----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-combat input, select {
	height: 25px;
	background-color: var(--cinq);
	color: var(--un);
	border: none;
}
.sheet-combat input {
	text-align: center;
}
.sheet-combat input[type="text"].text-tres-court {
	width: 30px;
}
.sheet-combat input[type="text"].text-court {
	width: 60px;
}
.sheet-combat input[type="text"].text-moyen {
	width: 120px;
}
.sheet-combat input[type="text"].text-long {
	width: 180px;
}
.sheet-combat input[type="text"].text-tres-long {
	width: 240px;
}
.sheet-combat input[type="number"] {
	width: 15px;
}
.divCaracCombat1,
.divCaracCombat2,
.divCaracCombat3 {
	height: 80px;
	margin: 5px;
	background-color: var(--trois);
	border: solid 1px var(--un);
}
.divCaracCombat1 {
	width: 130px;
}
.divCaracCombat2 {
	width: 250px;
}
.divCaracCombat3 {
	width: 450px;
}
.divCaracCombat4 {
	width: 65px;
	height: auto;
	margin: 5px;
	padding: 4px;
}
.divCaracCombat4 span {
	color: var(--un);
}
.divCaracCombat2 select {
	width: 230px;
	height: 25px;
	margin-top: 10px;
}
.divCaracCombat1 input[type="number"].stats,
.divCaracCombat2 input[type="number"].stats {
	width: 40px;
	height: 40px;
	margin: 2px;
	background-color: var(--cinq);
	color:var(--un);
	border: solid 2px var(--un);
	box-shadow: 2px 2px 2px 0 black;
	font-size:15px;
	font-weight:bold;
	text-align: center;
	transform: skewX(-10deg);
}
.divArmesEtArmures {
	width: 90%;
	height: auto;
	margin: auto;
}
.divCombat {
	width: 100%;
	height: auto;
	background-color: var(--un);
	color: var(--cinq);;
	border: 1px solid var(--un);
}
.divCombatTitle {
	width: 100%;
	height: 25px;
	margin-bottom: 5px;
	background-color: var(--un);
	color: var(--cinq);;
}
.divCombatLine {
	width: 100%;
	height: auto;
	background-color: var(--trois);
	color: var(--un);
}
.repeatingCombatLine {
	width: 100%;
	height: 40px;
	margin: auto;
}


/*----------------*/
/*Armes et armures*/
/*----------------*/
.divArmuresCaracs,
.divArmesCaracs {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
}
.arme-titre,
.armure-titre {
	font-size: 16px;
	font-weight: bold;
	height: 30px;
}
.armure-nom {
	width: 250px;
	margin: 2px;
}

.arme-nom {
	width: 300px;
	margin: 2px;
}
.arme-degats,
.armure-protection,
.armure-structure,
.arme-parade,
.arme-mode,
.arme-munitions {
	width: 80px;
	margin: 2px;
}
.arme-mains,
.arme-portee,
.armure-type {
	width: 130px;
	margin: 2px;
}
.divArmesCaracs input, 
.divArmesCaracs select,
.divArmuresCaracs input, 
.divArmuresCaracs select {
	height: 25px;
	margin: 2px;
	border: none;
}
.divArmesCaracs input[type=text],
.divArmuresCaracs input[type=text] {
	text-align: center;
}
.divArmesCaracs .arme-portee input[type="number"],
.divArmesCaracs .arme-munitions input[type="number"] {
	width: 30px;
}
.divArmesCaracs select,
.divArmuresCaracs select {
	width: 190px;
}
.divArmesCaracs select.select-parade {
	width: 50px;
}

.divArmuresCaracs select.armure-select,
.divArmuresCaracs input.armure-perso {
	width: 190px;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------- NOMS ALTERNATIFS -----------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.check-distance:checked ~ .distance-perso,
.check-distance:not(:checked) ~ .distance-select,
.check-contact:checked ~ .contact-perso,
.check-contact:not(:checked) ~ .contact-select,
.check-armure:checked ~ .armure-perso,
.check-armure:not(:checked) ~ .armure-select,
.check-talent:checked ~ .talent-perso,
.check-talent:not(:checked) ~ .talent-select,
.check-rituel:checked ~ .rituel-perso,
.check-rituel:not(:checked) ~ .rituel-select,
.check-mutation:checked ~ .mutation-perso,
.check-mutation:not(:checked) ~ .mutation-select,
.check-psy:checked ~ .psy-perso,
.check-psy:not(:checked) ~ .psy-select,
.check-vehicule:checked ~ .vehicule-perso,
.check-vehicule:not(:checked) ~ .vehicule-select {
	display: block;
}
.check-distance:checked ~ .distance-select,
.check-distance:not(:checked) ~ .distance-perso,
.check-contact:checked ~ .contact-select,
.check-contact:not(:checked) ~ .contact-perso,
.check-armure:checked ~ .armure-select,
.check-armure:not(:checked) ~ .armure-perso,
.check-talent:checked ~ .talent-select,
.check-talent:not(:checked) ~ .talent-perso,
.check-rituel:checked ~ .rituel-select,
.check-rituel:not(:checked) ~ .rituel-perso,
.check-mutation:checked ~ .mutation-select,
.check-mutation:not(:checked) ~ .mutation-perso,
.check-psy:checked ~ .psy-select,
.check-psy:not(:checked) ~ .psy-perso,
.check-vehicule:not(:checked) ~ .vehicule-perso,
.check-vehicule:checked ~ .vehicule-select {
	display: none;
}




/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- MODALES ----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
input.check-distance-modal,
input.check-contact-modal {
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
	position: absolute;
	top: 9px;
	left: 10px;
}
input.check-distance-modal + span::before,
input.check-contact-modal + span::before {
	width: 20px;
	height: 20px;
	background-color: var(--un);
	border-radius: 10px;
	color: var(--cinq);
	text-align: center;
	font-size: 15px;
	font-weight: normal;
	font-family: 'pictos';
	content: '&';
	transition: 0.5s ease;
	position: absolute;
	top: 8px;
	left: 12px;
}
input.check-psy-modal,
input.check-mutation-modal,
input.check-talent-modal,
input.check-rituel-modal {
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
	position: relative;
	top: 0;
	left: 0;
}
input.check-psy-modal + span::before,
input.check-mutation-modal + span::before,
input.check-talent-modal + span::before,
input.check-rituel-modal + span::before {
	width: 20px;
	height: 20px;
	background-color: var(--un);
	border-radius: 10px;
	color: var(--cinq);
	text-align: center;
	font-size: 15px;
	font-weight: normal;
	font-family: 'pictos';
	content: '&';
	transition: 0.5s ease;
	position: relative;
	top: 0;
	left: 0;
}
input.check-distance-modal:checked + span::before,
input.check-distance-modal:hover + span::before,
input.check-contact-modal:checked + span::before,
input.check-contact-modal:hover + span::before,
input.check-psy-modal:checked + span::before,
input.check-psy-modal:hover + span::before,
input.check-mutation-modal:checked + span::before,
input.check-mutation-modal:hover + span::before,
input.check-talent-modal:checked + span::before,
input.check-talent-modal:hover + span::before,
input.check-rituel-modal:checked + span::before,
input.check-rituel-modal:hover + span::before {
	transform: rotate(135deg);
	transition: 0.3s ease;
}
input.check-psy-modal + span::before,
input.check-mutation-modal + span::before,
input.check-talent-modal + span::before,
input.check-rituel-modal + span::before {
	margin-left: -30px;
}
.check-contact-modal:checked ~ div.contact-modal,
.check-distance-modal:checked ~ div.distance-modal,
.check-psy-modal:checked ~ div.psy-modal,
.check-mutation-modal:checked ~ div.mutation-modal,
.check-talent-modal:checked ~ div.talent-modal,
.check-rituel-modal:checked ~ div.rituel-modal  {
	display: block;
}
.check-contact-modal:not(:checked) ~ div.contact-modal,
.check-distance-modal:not(:checked) ~ div.distance-modal,
.check-psy-modal:not(:checked) ~ div.psy-modal,
.check-mutation-modal:not(:checked) ~ div.mutation-modal,
.check-talent-modal:not(:checked) ~ div.talent-modal,
.check-rituel-modal:not(:checked) ~ div.rituel-modal  {
	display: none;
}
.contact-modal,
.distance-modal {
	position: absolute;
	bottom: -4px;
	left: 0;
	padding: 15px;
	width: 600px;
	height: 80px;
	background-color: var(--six);
	color: var(--cinq);
	z-index: 100;
	font-size: 12px;
	clip-path: polygon(0px 20px, 20px 0px, 600px 0px, 600px 40px, 580px 60px, 32px 60px, 22px 80px, 12px 60px, 0px 60px);
}
.psy-modal,
.mutation-modal,
.talent-modal,
.rituel-modal  {
	position: absolute;
	top: -110px;
	left: 10px;
	width: 800px;
	height: 120px;
	background-color: var(--six);
	font-size: 12px;
	clip-path: polygon(0px 20px, 20px 0px, 800px 0px, 800px 80px, 780px 100px, 31px 100px, 21px 120px, 11px 100px, 0px 100px);
	box-shadow: black 10px 10px 10px;
}
.psy-modal div .psymodalcontent,
.mutation-modal div .mutationmodalcontent,
.talent-modal div .talentmodalcontent,
.rituel-modal div .rituelmodalcontent {
	width: 760px;
	height: 60px;
	padding: 5px;
	margin: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-variant: normal;
	color: var(--cinq);
	background-color: transparent;
	border : none;
}





/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------ INFOS -----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-infos {
	width: 100%;
}

.divInfos1 input,
.divInfos2 input
 {
	width: 10px;
	height: 25px;
	font-size: 14px;
	border: none;
	background-color: var(--deux);
	color: var(--cinq);;
	text-align: center;
}

.divInfos1, .divInfos2 {
	height : auto;
	margin: 10px;
	padding: 4px;
	font-size: 14px;
	color: var(--un);
}
.divInfos1 {
	width: 250px;
}

.divInfos2 {
	width: 450px;
}

.infosnumber {
	width: 10px;
}

.infostitle {
	font-size: 14px;
	font-weight: bold;
}

/*---------------------------*/
/*TABLE GÉNÉRIQUE DES MESURES*/
/*---------------------------*/
.divTGM {
	width: 100%;
	margin: 0;
	padding: 0;
}
.divTGM1, .divTGM2, .divTGM3 {
	width: 100%;
	font-weight: bold;
}
.divTGM1 {
	height: 40px;
	background-color: var(--un);
	color: var(--cinq);;
}
.divTGM2 {
	height: 25px;
	background-color: var(--trois);
	color: var(--un);
}
.divTGM3 {
	height: 25px;
	background-color: var(--deux);
	color: var(--cinq);;
}
.divTGM1 span, .divTGM2 span, .divTGM3 span {
	width: 100px;
	text-align: center;
}
.divTGM-title {
	width: 100%;
	height: 40px;
	background-color: var(--un);
	color: var(--cinq);;
	font-size: 16px;
	font-weight: bold;
}





.charsheet input.spenumber1[value="0"] + div.spe-talent1,
.charsheet input.spenumber2[value="0"] ~ div.spe-talent2,
.charsheet input.spenumber3[value="0"] ~ div.spe-talent3,
.charsheet input.spenumber4[value="0"] ~ div.spe-talent4,
.charsheet input.spenumber5[value="0"] ~ div.spe-talent5,
.charsheet input.spenumber6[value="0"] ~ div.spe-talent6,
.charsheet input.spenumber7[value="0"] ~ div.spe-talent7 {
	display: none;
}

.charsheet input.spenumber1[value="1"] + div.spe-talent1,
.charsheet input.spenumber2[value="1"] ~ div.spe-talent2,
.charsheet input.spenumber3[value="1"] ~ div.spe-talent3,
.charsheet input.spenumber4[value="1"] ~ div.spe-talent4,
.charsheet input.spenumber5[value="1"] ~ div.spe-talent5,
.charsheet input.spenumber6[value="1"] ~ div.spe-talent6,
.charsheet input.spenumber7[value="1"] ~ div.spe-talent7 {
	display: block;
}






/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------ROLLTEMPLATES--------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/

.sheet-rolltemplate-jetBase div:nth-child(odd),
.sheet-rolltemplate-jetPouvoir div:nth-child(odd),
.sheet-rolltemplate-jetArme div:nth-child(odd),
.sheet-rolltemplate-initiative div:nth-child(odd),
.sheet-rolltemplate-pnj div:nth-child(odd) {
	background-color: #cdd4f0;
	color:	#383080;
}

.sheet-rolltemplate-jetBase div:nth-child(even),
.sheet-rolltemplate-jetPouvoir div:nth-child(even),
.sheet-rolltemplate-jetArme div:nth-child(even),
.sheet-rolltemplate-initiative div:nth-child(even),
.sheet-rolltemplate-pnj div:nth-child(even) {
	background-color: #7b95cc;
	color:	#fffdf7;
}

.sheet-rolltemplate-jetBase div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-jetBase div:nth-child(odd) .sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetPouvoir div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-jetPouvoir div:nth-child(odd) div.sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetArme div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-initiative div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-pnj div:nth-child(odd) .inlinerollresult {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: solid 1px #383080;
	background-color: #383080;
	color:	#fffdf7;
	width: 12px;
	height: 20px;
	margin-left: 2px;
	margin-right: 2px;
	font-weight: bold;
}

.sheet-rolltemplate-jetBase div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-jetBase div:nth-child(even) .sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetPouvoir div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-jetPouvoir div:nth-child(even) div.sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetArme div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-initiative div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-pnj div:nth-child(even) .inlinerollresult  {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: solid 1px #383080;
	background-color: #383080;
	color:	#fffdf7;
	width: 12px;
	height: 20px;
	margin-left: 2px;
	margin-right: 2px;
	font-weight: bold;
}

.sheet-rolltemplate-jetBase,
.sheet-rolltemplate-jetPouvoir,
.sheet-rolltemplate-jetArme,
.sheet-rolltemplate-initiative,
.sheet-rolltemplate-pnj  {
	border: solid 1px #383080;
	padding: 0;
	margin: 0;
	height: auto;
}

.sheet-rolltemplate-jetBase .sheet-table,
.sheet-rolltemplate-jetPouvoir .sheet-table,
.sheet-rolltemplate-jetArme .sheet-table,
.sheet-rolltemplate-initiative .sheet-table,
.sheet-rolltemplate-pnj .sheet-table {
	padding: 0;
	margin: 0;
}

.sheet-rolltemplate-jetBase .sheet-table div,
.sheet-rolltemplate-jetPouvoir .sheet-table div,
.sheet-rolltemplate-jetArme .sheet-table div,
.sheet-rolltemplate-initiative .sheet-table div,
.sheet-rolltemplate-pnj .sheet-table div  {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 20px;
	font-size: 12px;
}

.sheet-rolltemplate-jetBase .sheet-table .sheet-header,
.sheet-rolltemplate-jetPouvoir .sheet-table .sheet-header,
.sheet-rolltemplate-jetArme .sheet-table .sheet-header,
.sheet-rolltemplate-initiative .sheet-table .sheet-header,
.sheet-rolltemplate-pnj .sheet-table .sheet-header {
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	background-color: #383080;
	color: #fffdf7;
	margin: 0;
	padding: 0;
}

.sheet-rolltemplate-jetPouvoir .sheet-table div.sheet-table-line,
.sheet-rolltemplate-jetArme .sheet-table div.sheet-table-line,
.sheet-rolltemplate-initiative .sheet-table div.sheet-table-line {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 20px;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------BLESSURES ET HÉMORRAGIES---------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/

.charsheet input[type="radio"].radiohemorragie,
.charsheet input[type="radio"].radioblessure {
	opacity: 0;
	height: 15px;
	width: 42px;
	margin-top: 5px;
}

.charsheet span.radiohemorragie,
.charsheet span.radioblessure {
    display: inline-block;
	height: 15px;
	width: 40px;
	text-align: center;
	margin-top: 5px;
	background-color: var(--deux);
	box-shadow: 0 0 1px #6278a8 inset;
}

.charsheet span.rh0,
.charsheet span.rb0 {
	margin-left: -250px;
}

.charsheet input[type="radio"].rh0:checked ~ span.rh0,
.charsheet input[type="radio"].rh1:checked ~ span.rh0,
.charsheet input[type="radio"].rh2:checked ~ span.rh0,
.charsheet input[type="radio"].rh3:checked ~ span.rh0,
.charsheet input[type="radio"].rh4:checked ~ span.rh0,
.charsheet input[type="radio"].rh5:checked ~ span.rh0,
.charsheet input[type="radio"].rb0:checked ~ span.rb0,
.charsheet input[type="radio"].rb1:checked ~ span.rb0,
.charsheet input[type="radio"].rb2:checked ~ span.rb0,
.charsheet input[type="radio"].rb3:checked ~ span.rb0,
.charsheet input[type="radio"].rb4:checked ~ span.rb0,
.charsheet input[type="radio"].rb5:checked ~ span.rb0 {
	background: linear-gradient(to right, #15ff00, #c8ff00);
	border: none;
}
.charsheet input[type="radio"].rh1:checked ~ span.rh1,
.charsheet input[type="radio"].rh2:checked ~ span.rh1,
.charsheet input[type="radio"].rh3:checked ~ span.rh1,
.charsheet input[type="radio"].rh4:checked ~ span.rh1,
.charsheet input[type="radio"].rh5:checked ~ span.rh1,
.charsheet input[type="radio"].rb1:checked ~ span.rb1,
.charsheet input[type="radio"].rb2:checked ~ span.rb1,
.charsheet input[type="radio"].rb3:checked ~ span.rb1,
.charsheet input[type="radio"].rb4:checked ~ span.rb1,
.charsheet input[type="radio"].rb5:checked ~ span.rb1   {
	background: linear-gradient(to right, #c8ff00, #ffc400);
	border: none;
}

.charsheet input[type="radio"].rh2:checked ~ span.rh2,
.charsheet input[type="radio"].rh3:checked ~ span.rh2,
.charsheet input[type="radio"].rh4:checked ~ span.rh2,
.charsheet input[type="radio"].rh5:checked ~ span.rh2,
.charsheet input[type="radio"].rb2:checked ~ span.rb2,
.charsheet input[type="radio"].rb3:checked ~ span.rb2,
.charsheet input[type="radio"].rb4:checked ~ span.rb2,
.charsheet input[type="radio"].rb5:checked ~ span.rb2  {
	background: linear-gradient(to right, #ffc400, #ff9900);
	border: none;
}
.charsheet input[type="radio"].rh3:checked ~ span.rh3,
.charsheet input[type="radio"].rh4:checked ~ span.rh3,
.charsheet input[type="radio"].rh5:checked ~ span.rh3,
.charsheet input[type="radio"].rb3:checked ~ span.rb3,
.charsheet input[type="radio"].rb4:checked ~ span.rb3,
.charsheet input[type="radio"].rb5:checked ~ span.rb3 {
	background: linear-gradient(to right, #ff9900, #ff5100);
	border: none;
}
.charsheet input[type="radio"].rh4:checked ~ span.rh4,
.charsheet input[type="radio"].rh5:checked ~ span.rh4,
.charsheet input[type="radio"].rb4:checked ~ span.rb4,
.charsheet input[type="radio"].rb5:checked ~ span.rb4 {
	background: linear-gradient(to right, #ff5100, #ff0000);
	border: none;
}
.charsheet input[type="radio"].rh5:checked ~ span.rh5,
.charsheet input[type="radio"].rb5:checked ~ span.rb5  {
	background: linear-gradient(to right, #ff0000, #7a0000);
	border: none;
}
.charsheet input[type="radio"].radioblessure:not(:checked):hover + span.radioblessure::before {
	background-color: #000000;
	transform: scale(2);
}
.divHemorragie {
	margin-top: 5px;
}
.divHemorragie input[type="number"].ptshemorragie {
	width: 15px;
	margin-right: 5px;
	background-color: var(--trois);
	color: var(--un);
	font-weight: bold;
}
.divBlessure input[type="text"].ptsblessure {
	width: 100px;
	margin-right: 5px;
	background-color: var(--trois);
	color: var(--un);
	font-weight: bold;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------PNJ-------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/

.pnj {
	width: 800px;
	height: auto;
	background-color: var(--deux);
	color: var(--cinq);
	margin: 0;
	padding: 0;
}

.pnj-bio {
	width: 100%;
	height: 40px;
	background-color: var(--un);
	color: var(--cinq);
	margin: 0;
	padding: 0;
}

.pnj-carac-comp {
	width: 400px;
}

.pnj-caracs {
	width: 100%;
	height: auto;
	background-color: var(--deux);
	color: var(--un);
	margin: 0;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}

.charsheet .pnj input[type="text"],
.charsheet .pnj select {
	background-color: var(--cinq);
	color: var(--un);
	width: 200px;
	margin-left: 20px;
	margin-right: 10px;
}

.charsheet .pnj input[type="number"], 
.charsheet .pnj input[type="text"].pnj-arme-mode {
	width: 30px;
	background-color: var(--cinq);
	color: var(--un);
	margin-left: 5px;
	margin-right: 5px;
	text-align: center;
}

.charsheet .pnj textarea {
	width: 750px;
	height: 30px;
	background-color: var(--cinq);
	color: var(--un);
	padding: 3px;
}

.charsheet select option:disabled {
	background-color: var(--un);
	color: var(--cinq);
	font-weight: bold;
}

.pnj-carac {
	width: 400px;
	height: 40px;
	background-color: var(--un);
	color: var(--cinq);
	margin-bottom: 5px;
}

.pnj-carac span {
	margin-left: 10px;
	font-size: 16px;
	font-weight: bold;
}

.pnj-comps {
	height: auto;
}

.pnj-comp {
	width: 400px;
	height: 30px;
}

.pnj-equipement {
	width: 100%;
	height: auto;
}

.pnj-equipement-title {
	background-color: var(--un);
	color: var(--cinq);
	font-size: 16px;
	font-weight: bold;
	height: 30px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.pnj-arme1 {
	width: 210px;
	height: 30px;
	margin: 0;
	padding: 0;
}

.pnj-arme2 {
	width: 70px;
	height: 30px;
	margin: 0;
	padding: 0;
}

.pnj-arme3 {
	width: 140px;
	height: 30px;
	margin: 0;
	padding: 0;
}

.pnj-pouvoirs {
	width: 100%;
	height: auto;
	margin: 0;
}

.pnj-pouvoir {
	width: 45%;
	margin: 0;
}

.pnj-pouvoir1 {
	width: 210px;
	height: 30px;
	margin: 0;
}

.pnj-pouvoir2 {
	width: 80px;
	height: 30px;
	margin: 0;
}

.pnj-infos div {
	width: 120px;
	margin-left: 5px;
	margin-right: 5px;
}


/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------- INACTIVE ----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.inactive {
	display: none;
}