roll20-character-sheets/Patient13 v1.5/patient13.css

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');

/* font-family: "Shadows Into Light Two", cursive; */

/* Style de la page principale  */

.charsheet {
    --black: #000000eb;
    --fond_carte: #e3e4e4ed;
    margin: 0px;
    border-radius: 0px;
    font-family: Oswald;
    font-weight: bolder;
    font-size: 13px;
    color: var(--black);
}

body.sheet-darkmode .charsheet {
    background-color: #1f1f1f;
    --black: #000000eb;
    --fond_carte: #939898ed;
    color: var(--black);
}

.retourner_carte,
.retourner_carte_inverse {
    position: absolute;
    z-index: 1;
    height: 60px;
    width: 300px;
    margin-left: 520px;
    margin-top: 32px;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 22px;
    transform: rotate(3deg);
}

.cadre_roll {
    position: absolute;
    z-index: 0;
    height: 136px;
    width: 350px;
    margin-left: 477px;
    margin-top: 295px;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 22px;
    transform: rotate(9deg);
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/roll_template_bg.png);
    background-size: 350px 136px;
    display: flex;
    align-items: center;
}

body.sheet-darkmode .cadre_roll {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/darkmode_roll_template_bg.png);
}

/* Structure cadre Roll */

.wrapper_roll {
    margin: 10px;
    margin-left: 76px;
    display: grid;
    grid-template-columns: 90px 1px 175px;
    grid-auto-rows: 30px;
    font-size: 16px;
    border-radius: 0px;
    font-family: Oswald;
}

.roll_type {
    grid-column: 1/3;
    grid-row: 1;
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
}

.roll_type_boutton {
    grid-column: 3;
    grid-row: 1;
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
}

.roll_public {
    grid-column: 1/3;
    grid-row: 2;
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
}

.roll_public_boutton {
    grid-column: 3;
    grid-row: 2;
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
}

.roll_mod_titre {
    grid-column: 1/3;
    grid-row: 3; 
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
}

.roll_mod_valeur {
    grid-column: 3;
    grid-row: 3; 
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
}

.roll_des_bonus_titre {
    grid-column: 3;
    grid-row: 3;
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
    margin-left: 80px;
}

.roll_des_bonus_checkbox {
    grid-column: 4;
    grid-row: 3;
    padding-left: 10px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    border-left: none;
    display: flex;
    align-items: center;
    margin-left: -26px;
    margin-top: 3px;
}

.roll_lancer {
    grid-column: 1 / 4;
    grid-row: 4;
    padding-top: 7px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.decor_1 {
    position: absolute;
    z-index: 1;
    height: 60px;
    width: 300px;
    margin-left: 520px;
    margin-top: 32px;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/taches.png);
}

.retourner_carte_inverse {
    transform: rotateY(3.1765rad) rotate(-3deg);
    margin-left: 470px;
}

body.sheet-darkmode .retourner_carte,
body.sheet-darkmode .retourner_carte_inverse {
    color: #ffffffbd;
}

.fleche {
    position: absolute;
    z-index: 1;
    height: 40px;
    width: 100px;
    margin-top: 80px;
    margin-left: 505px;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/fleche_black.png);
    background-size: 100px 40px;
    transform: rotate(-27deg);
    opacity: 0.7;
}

body.sheet-darkmode .fleche {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/fleche_white.png);
    opacity: 0.7;
}


.rond_carte {
    position: absolute;
    z-index: 1;
    height: 60px;
    width: 60px;
    margin-top: 1px;
    margin-left: 220px;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/rond_carte.png);
    background-size: 60px 60px;
}

body.sheet-darkmode .rond_carte {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/darkmode_rond_carte.png);
}

.portrait_patient {
    position: absolute;
    z-index: 1;
    height: 275px;
    width: 200px;
    margin-top: 180px;
    margin-left: 275px;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/fond_portrait.png);
    background-size: 200px 275px;
    transform: rotate(-3deg);
    box-shadow: 3px 3px 11px 0px #00000082;
}

body.sheet-darkmode .portrait_patient {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/darkmode_fond_portrait.png);
}

img.portrait {
    width: 170px;
    height: 170px;
    margin-top: 45px;
    margin-left: 15px;
    box-shadow: 0px 0px 5px 2px #0000008c;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}

/* Retournement de la carte */

.recto,
.verso,
.retourner_carte,
.retourner_carte_inverse {
    display: none;
}

.charsheet .page[value="1"] ~ div.recto,
.charsheet .page[value="2"] ~ div.verso,
.charsheet .page[value="1"] ~ div.retourner_carte,
.charsheet .page[value="2"] ~ div.retourner_carte_inverse {
    display: block;
}


.recto,
.verso {
    width: 500px;
    height: auto;
    padding-bottom: 15px;
    background: var(--fond_carte);
    position: relative;
    clip-path: polygon(10% 0, 90% 0, 100% 7%, 100% 100%, 0 100%, 0 7%);
  }

.recto {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/background_recto.png);
}

.verso {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/background_verso.png);
  }

.shadow {
    filter: drop-shadow(2px 1px 4px rgba(0, 0, 0, 0.712));
    display: block;
    width: 1px;
  }

body.sheet-darkmode .shadow {
    filter: drop-shadow(0px 0px 2px white);
  }

  /* Insectes */


@keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}


.insecte_1,
.insecte_2,
.insecte_3,
.insecte_4,
.insecte_5,
.insecte_6,
.insecte_6,
.insecte_7,
.insecte_8,
.insecte_9,
.insecte_10,
.insecte_11,
.insecte_12,
.insecte_13,
.insecte_14,
.insecte_15,
.insecte_16,
.insecte_17,
.insecte_18,
.insecte_19,
.insecte_20,
.insecte_21 {
    display: none;
    position: absolute;
    z-index: 2;
    background-size: contain;
    animation-delay: 5s;
    -webkit-animation: fadein 20s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 20s; /* Firefox < 16 */
    -ms-animation: fadein 20s; /* Internet Explorer */
    -o-animation: fadein 20s; /* Opera < 12.1 */
    animation: fadein 20s;
}

.charsheet .insecte[value="1"] ~ div.insecte_1,
.charsheet .insecte[value="1"] ~ div.insecte_11,
.charsheet .insecte[value="2"] ~ div.insecte_5,
.charsheet .insecte[value="2"] ~ div.insecte_2,
.charsheet .insecte[value="2"] ~ div.insecte_12,
.charsheet .insecte[value="3"] ~ div.insecte_3,
.charsheet .insecte[value="3"] ~ div.insecte_6,
.charsheet .insecte[value="3"] ~ div.insecte_17,
.charsheet .insecte[value="4"] ~ div.insecte_4,
.charsheet .insecte[value="4"] ~ div.insecte_1,
.charsheet .insecte[value="4"] ~ div.insecte_7,
.charsheet .insecte[value="5"] ~ div.insecte_5,
.charsheet .insecte[value="5"] ~ div.insecte_9,
.charsheet .insecte[value="5"] ~ div.insecte_14,
.charsheet .insecte[value="6"] ~ div.insecte_12,
.charsheet .insecte[value="6"] ~ div.insecte_6,
.charsheet .insecte[value="6"] ~ div.insecte_16,
.charsheet .insecte[value="7"] ~ div.insecte_7,
.charsheet .insecte[value="7"] ~ div.insecte_18,
.charsheet .insecte[value="7"] ~ div.insecte_17,
.charsheet .insecte[value="8"] ~ div.insecte_4,
.charsheet .insecte[value="8"] ~ div.insecte_8,
.charsheet .insecte[value="8"] ~ div.insecte_20,
.charsheet .insecte[value="9"] ~ div.insecte_9,
.charsheet .insecte[value="9"] ~ div.insecte_21,
.charsheet .insecte[value="9"] ~ div.insecte_3,
.charsheet .insecte[value="10"] ~ div.insecte_10,
.charsheet .insecte[value="10"] ~ div.insecte_5,
.charsheet .insecte[value="10"] ~ div.insecte_13,
.charsheet .insecte[value="11"] ~ div.insecte_11,
.charsheet .insecte[value="11"] ~ div.insecte_20,
.charsheet .insecte[value="11"] ~ div.insecte_18,
.charsheet .insecte[value="12"] ~ div.insecte_12,
.charsheet .insecte[value="12"] ~ div.insecte_4,
.charsheet .insecte[value="12"] ~ div.insecte_17,
.charsheet .insecte[value="12"] ~ div.insecte_18,
.charsheet .insecte[value="12"] ~ div.insecte_19,
.charsheet .insecte[value="13"] ~ div.insecte_13,
.charsheet .insecte[value="13"] ~ div.insecte_7,
.charsheet .insecte[value="13"] ~ div.insecte_3,
.charsheet .insecte[value="14"] ~ div.insecte_14,
.charsheet .insecte[value="14"] ~ div.insecte_5,
.charsheet .insecte[value="14"] ~ div.insecte_8,
.charsheet .insecte[value="15"] ~ div.insecte_15,
.charsheet .insecte[value="15"] ~ div.insecte_9,
.charsheet .insecte[value="15"] ~ div.insecte_1,
.charsheet .insecte[value="16"] ~ div.insecte_16,
.charsheet .insecte[value="16"] ~ div.insecte_10,
.charsheet .insecte[value="16"] ~ div.insecte_8,
.charsheet .insecte[value="17"] ~ div.insecte_17,
.charsheet .insecte[value="17"] ~ div.insecte_1,
.charsheet .insecte[value="17"] ~ div.insecte_20,
.charsheet .insecte[value="18"] ~ div.insecte_18,
.charsheet .insecte[value="18"] ~ div.insecte_5,
.charsheet .insecte[value="18"] ~ div.insecte_15,
.charsheet .insecte[value="19"] ~ div.insecte_19,
.charsheet .insecte[value="19"] ~ div.insecte_7,
.charsheet .insecte[value="19"] ~ div.insecte_6,
.charsheet .insecte[value="20"] ~ div.insecte_20,
.charsheet .insecte[value="20"] ~ div.insecte_8,
.charsheet .insecte[value="20"] ~ div.insecte_14,
.charsheet .insecte[value="21"] ~ div.insecte_21,
.charsheet .insecte[value="21"] ~ div.insecte_12,
.charsheet .insecte[value="21"] ~ div.insecte_13 {
    display: block;
}

.insecte_1 {
    margin-top: 24px;
    margin-left: 50px;
    width: 50px;
    height: 64px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_cafard.png);
    transform: rotate(135deg);
}

.insecte_2 {
    margin-top: 32px;
    margin-left: 390px;
    width: 60px;
    height: 70px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_insecte.png);
    transform: rotate(15deg);
}

.insecte_3 {
    margin-top: 190px;
    margin-left: 410px;
    width: 38px;
    height: 53px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_mouche.png);
    transform: rotate(-143deg);
}

.insecte_4 {
    margin-top: 110px;
    margin-left: 640px;
    width: 68px;
    height: 112px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_papillon.png);
    transform: rotate(-112deg);
}

.insecte_5 {
    margin-top: 360px;
    margin-left: 400px;
    width: 60px;
    height: 96px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_poux.png);
    transform: rotate(59deg);
}

.insecte_6 {
    margin-top: 320px;
    margin-left: 0px;
    width: 63px;
    height: 87px;
    opacity: 01;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_poux2.png);
    transform: rotate(-31deg);
}

.insecte_7 {
    margin-top: 43px;
    margin-left: 190px;
    width: 140px;
    height: 56px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_ver.png);
    transform: rotate(0deg);
}

.insecte_8 {
    margin-top: 245px;
    margin-left: 530px;
    width: 70px;
    height: 85px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_cafard.png);
    transform: rotate(-35deg);
}

.insecte_9 {
    margin-top: 52px;
    margin-left: 235px;
    width: 80px;
    height: 90px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_insecte.png);
    transform: rotate(115deg);
}

.insecte_10 {
    margin-top: -10px;
    margin-left: 40px;
    width: 38px;
    height: 53px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_mouche.png);
    transform: rotate(-53deg);
}

.insecte_11 {
    margin-top: 260px;
    margin-left: 640px;
    width: 68px;
    height: 112px;
    opacity: 01;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_papillon.png);
    transform: rotate(-322deg);
}

.insecte_12 {
    margin-top: 120px;
    margin-left: 220px;
    width: 40px;
    height: 64px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_poux.png);
    transform: rotate(19deg);
}

.insecte_13 {
    margin-top: 15px;
    margin-left: 440px;
    width: 63px;
    height: 87px;
    opacity: 01;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_poux2.png);
    transform: rotate(-50deg);
}

.insecte_14 {
    margin-top: 313px;
    margin-left: 211px;
    width: 140px;
    height: 56px;
    opacity: 01;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_ver.png);
    transform: rotate(70deg);
}

.insecte_15 {
    margin-top: 185px;
    margin-left: 190px;
    width: 70px;
    height: 85px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_cafard.png);
    transform: rotate(-35deg);
}

.insecte_16 {
    margin-top: 132px;
    margin-left: 475px;
    width: 80px;
    height: 90px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_insecte.png);
    transform: rotate(-115deg);
}

.insecte_17 {
    margin-top: 400px;
    margin-left: 140px;
    width: 38px;
    height: 53px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_mouche.png);
    transform: rotate(27deg);
}

.insecte_18 {
    margin-top: -40px;
    margin-left: 750px;
    width: 68px;
    height: 112px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_papillon.png);
    transform: rotate(-322deg);
}

.insecte_19 {
    margin-top: 420px;
    margin-left: 467px;
    width: 40px;
    height: 64px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_poux.png);
    transform: rotate(-25deg);
}

.insecte_20 {
    margin-top: 185px;
    margin-left: 270px;
    width: 63px;
    height: 87px;
    opacity: 1;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_poux2.png);
    transform: rotate(-140deg);
}

.insecte_21 {
    margin-top: 418px;
    margin-left: 700px;
    width: 140px;
    height: 56px;
    opacity: 01;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/insecte_ver.png);
    transform: rotate(230deg);
}


/* Structure page recto */

.wrapper_recto {  
    padding-top: 90px;
    padding-left: 30px;
    padding-right: 30px;
    display: grid;
    grid-template-columns: 250px 190px;
    grid-auto-rows: 20px;
}

div.surnom {
    grid-column: 1;
    grid-row: 1 / 5;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
}

div.matricule {
	grid-column: 2;
	grid-row: 1/3;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
}

div.age {
	grid-column: 2;
	grid-row: 3/5;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
}

div.apparence {
    grid-column: 1/3;
    grid-row: 5 / 9;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.caractere {
    grid-column: 1/3;
    grid-row: 9 / 15;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.medecin {
    grid-column: 1/3;
    grid-row: 15 / 17;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.signe {
    grid-column: 1/3;
    grid-row: 17 / 22;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.contact {
    grid-column: 1/3;
    grid-row: 22 / 26;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.allies {
    grid-column: 1/3;
    grid-row: 26 / 28;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.ennemis {
    grid-column: 1/3;
    grid-row: 28 / 30;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
}

div.effets_personnels {
    grid-column: 1/3;
    grid-row: 30 / 36;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* Structure page recto - Traits */

.wrapper_verso_titre {  
    padding-top: 90px;
    padding-left: 30px;
    padding-right: 30px;
    display: grid;
    grid-template-columns: 250px 50px 140px;
    grid-auto-rows: 20px;
    margin-bottom: -15px;
}

.wrapper_verso {  
    padding-left: 30px;
    padding-right: 30px;
    display: grid;
    grid-template-columns: 240px 10px 40px 10px 140px;
    grid-auto-rows: 40px;
}

.traits_titre {
    grid-column: 1;
    grid-row: 1/4;
    padding-left: 5px;
    border: 2px solid black;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.traits_plus_moins {
    grid-column: 2;
    grid-row: 1/4;
    padding-left: 5px;
    border: none;
}

.traits {
    grid-column: 1;
    grid-row: 1;
    padding-left: 5px;
    border: none;
    border-bottom: 2px dotted black;
    border-left: 2px solid black;
    display: flex;
    align-items: center;
}

.traits_valeur {
    grid-column: 3;
    grid-row: 1;
    padding-left: 5px;
    border: none;
    border-bottom: 2px dotted black;
    display: flex;
    align-items: center;
}

.traits_box {
    grid-column: 5;
    grid-row: 1;
    padding-left: 5px;
    border: none;
    border-bottom: 2px dotted black;
    display: flex;
    align-items: center;
}

/* Structure page recto - Stats */

.wrapper_verso_stats {  
    margin-left: 30px;
    margin-right: 20px;
    display: grid;
    grid-template-columns: 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px 25.88px ;
    grid-auto-rows: 25px;
    background-color: black;
    color: #9a9a9acc;
}

.stat_titre {
    grid-column: 1/4;
    grid-row: 1;
    padding-right: 5px;
    text-align: right;
    font-size: 16px;
    color: #ffffffd4;
}

.stat_sous_titre {
    grid-column: 1/5;
    grid-row: 1;
    padding-right: 5px;
    text-align: right;
    font-size: 12px;
}

.stat_check_0 {
    grid-column: 4;
    grid-row: 1;
    text-align: center;
}

.stat_check_1,
.stat_check_1_memoire,
.stat_check_1_hysterie,
.stat_check_1_inconscience {
    grid-column: 5;
    grid-row: 1;
    text-align: center;
}

.stat_check_2,
.stat_check_2_memoire,
.stat_check_2_hysterie,
.stat_check_2_inconscience {
    grid-column: 6;
    grid-row: 1;
    text-align: center;
}

.stat_check_3,
.stat_check_3_memoire,
.stat_check_3_hysterie,
.stat_check_3_inconscience {
    grid-column: 7;
    grid-row: 1;
    text-align: center;
}

.stat_check_4,
.stat_check_4_memoire,
.stat_check_4_hysterie,
.stat_check_4_inconscience {
    grid-column: 8;
    grid-row: 1;
    text-align: center;
}

.stat_check_5,
.stat_check_5_memoire,
.stat_check_5_hysterie,
.stat_check_5_inconscience {
    grid-column: 9;
    grid-row: 1;
    text-align: center;
}

.stat_check_6,
.stat_check_6_memoire,
.stat_check_6_hysterie,
.stat_check_6_inconscience {
    grid-column: 10;
    grid-row: 1;
    text-align: center;
}

.stat_check_7,
.stat_check_7_memoire,
.stat_check_7_hysterie,
.stat_check_7_inconscience {
    grid-column: 11;
    grid-row: 1;
    text-align: center;
}

.stat_check_8,
.stat_check_8_memoire,
.stat_check_8_hysterie,
.stat_check_8_inconscience {
    grid-column: 12;
    grid-row: 1;
    text-align: center;
}

.stat_check_9,
.stat_check_9_memoire,
.stat_check_9_hysterie,
.stat_check_9_inconscience {
    grid-column: 13;
    grid-row: 1;
    text-align: center;
}

.stat_check_10,
.stat_check_10_memoire,
.stat_check_10_hysterie,
.stat_check_10_inconscience {
    grid-column: 14;
    grid-row: 1;
    text-align: center;
}

.stat_check_11,
.stat_check_11_memoire,
.stat_check_11_hysterie,
.stat_check_11_inconscience {
    grid-column: 15;
    grid-row: 1;
    text-align: center;
}

.stat_check_12,
.stat_check_12_memoire,
.stat_check_12_hysterie,
.stat_check_12_inconscience {
    grid-column: 16;
    grid-row: 1;
    text-align: center;
}

.stat_check_13,
.stat_check_13_memoire,
.stat_check_13_hysterie,
.stat_check_13_inconscience {
    grid-column: 17;
    grid-row: 1;
    text-align: center;
}

.wrapper_verso_stats_max {  
    padding-left: 30px;
    padding-right: 30px;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-auto-rows: 40px;
}

.stat_recap_1 {
    grid-column: 1;
    text-align: left;
    padding-left: 10px;
    border: 2px solid black;
    border-right: none;
    border-bottom: none;
    display: flex;
    align-items: center;
}

.stat_recap_2 {
    grid-column: 2;
    text-align: left;
    padding-left: 10px;
    border: 2px solid black;
    border-right: none;
    border-bottom: none;
    display: flex;
    align-items: center;
}

.stat_recap_3 {
    grid-column: 3;
    text-align: left;
    padding-left: 10px;
    border: 2px solid black;
    border-right: none;
    border-bottom: none;
    display: flex;
    align-items: center;
}

.charsheet .memoire[value="1"] ~ div.stat_check_1_memoire,
.charsheet .memoire[value="2"] ~ div.stat_check_2_memoire,
.charsheet .memoire[value="3"] ~ div.stat_check_3_memoire,
.charsheet .memoire[value="4"] ~ div.stat_check_4_memoire,
.charsheet .memoire[value="5"] ~ div.stat_check_5_memoire,
.charsheet .memoire[value="6"] ~ div.stat_check_6_memoire,
.charsheet .memoire[value="7"] ~ div.stat_check_7_memoire,
.charsheet .memoire[value="8"] ~ div.stat_check_8_memoire,
.charsheet .memoire[value="9"] ~ div.stat_check_9_memoire,
.charsheet .memoire[value="10"] ~ div.stat_check_10_memoire,
.charsheet .memoire[value="11"] ~ div.stat_check_11_memoire,
.charsheet .memoire[value="12"] ~ div.stat_check_12_memoire,
.charsheet .memoire[value="13"] ~ div.stat_check_13_memoire,
.charsheet .inconscience[value="1"] ~ div.stat_check_1_inconscience,
.charsheet .inconscience[value="2"] ~ div.stat_check_2_inconscience,
.charsheet .inconscience[value="3"] ~ div.stat_check_3_inconscience,
.charsheet .inconscience[value="4"] ~ div.stat_check_4_inconscience,
.charsheet .inconscience[value="5"] ~ div.stat_check_5_inconscience,
.charsheet .inconscience[value="6"] ~ div.stat_check_6_inconscience,
.charsheet .inconscience[value="7"] ~ div.stat_check_7_inconscience,
.charsheet .inconscience[value="8"] ~ div.stat_check_8_inconscience,
.charsheet .inconscience[value="9"] ~ div.stat_check_9_inconscience,
.charsheet .inconscience[value="10"] ~ div.stat_check_10_inconscience,
.charsheet .inconscience[value="11"] ~ div.stat_check_11_inconscience,
.charsheet .inconscience[value="12"] ~ div.stat_check_12_inconscience,
.charsheet .inconscience[value="13"] ~ div.stat_check_13_inconscience,
.charsheet .hysterie[value="1"] ~ div.stat_check_1_hysterie,
.charsheet .hysterie[value="2"] ~ div.stat_check_2_hysterie,
.charsheet .hysterie[value="3"] ~ div.stat_check_3_hysterie,
.charsheet .hysterie[value="4"] ~ div.stat_check_4_hysterie,
.charsheet .hysterie[value="5"] ~ div.stat_check_5_hysterie,
.charsheet .hysterie[value="6"] ~ div.stat_check_6_hysterie,
.charsheet .hysterie[value="7"] ~ div.stat_check_7_hysterie,
.charsheet .hysterie[value="8"] ~ div.stat_check_8_hysterie,
.charsheet .hysterie[value="9"] ~ div.stat_check_9_hysterie,
.charsheet .hysterie[value="10"] ~ div.stat_check_10_hysterie,
.charsheet .hysterie[value="11"] ~ div.stat_check_11_hysterie,
.charsheet .hysterie[value="12"] ~ div.stat_check_12_hysterie,
.charsheet .hysterie[value="13"] ~ div.stat_check_13_hysterie  {
    border: 1px solid #9a9a9acc;
    border-radius: 31px;
    height: 19px;
}


/* Systeme trait  */

div.trait_1_1_zero,
div.trait_1_1_plus,
div.trait_1_1_moins,
div.trait_1_2_zero,
div.trait_1_2_plus,
div.trait_1_2_moins,
div.trait_1_3_zero,
div.trait_1_3_plus,
div.trait_1_3_moins,
div.trait_1_4_zero,
div.trait_1_4_plus,
div.trait_1_4_moins,
div.trait_1_5_zero,
div.trait_1_5_plus,
div.trait_1_5_moins,
div.trait_2_1_zero,
div.trait_2_1_plus,
div.trait_2_1_moins,
div.trait_2_2_zero,
div.trait_2_2_plus,
div.trait_2_2_moins,
div.trait_2_3_zero,
div.trait_2_3_plus,
div.trait_2_3_moins,
div.trait_2_4_zero,
div.trait_2_4_plus,
div.trait_2_4_moins,
div.trait_2_5_zero,
div.trait_2_5_plus,
div.trait_2_5_moins,
div.trait_3_1_zero,
div.trait_3_1_plus,
div.trait_3_1_moins,
div.trait_3_2_zero,
div.trait_3_2_plus,
div.trait_3_2_moins,
div.trait_3_3_zero,
div.trait_3_3_plus,
div.trait_3_3_moins,
div.trait_3_4_zero,
div.trait_3_4_plus,
div.trait_3_4_moins,
div.trait_3_5_zero,
div.trait_3_5_plus,
div.trait_3_5_moins,
div.trait_4_1_zero,
div.trait_4_1_plus,
div.trait_4_1_moins,
div.trait_4_2_zero,
div.trait_4_2_plus,
div.trait_4_2_moins,
div.trait_4_3_zero,
div.trait_4_3_plus,
div.trait_4_3_moins,
div.trait_4_4_zero,
div.trait_4_4_plus,
div.trait_4_4_moins,
div.trait_4_5_zero,
div.trait_4_5_plus,
div.trait_4_5_moins,
div.trait_5_1_zero,
div.trait_5_1_plus,
div.trait_5_1_moins,
div.trait_5_2_zero,
div.trait_5_2_plus,
div.trait_5_2_moins,
div.trait_5_3_zero,
div.trait_5_3_plus,
div.trait_5_3_moins,
div.trait_5_4_zero,
div.trait_5_4_plus,
div.trait_5_4_moins,
div.trait_5_5_zero,
div.trait_5_5_plus,
div.trait_5_5_moins,
div.trait_6_1_zero,
div.trait_6_1_plus,
div.trait_6_1_moins,
div.trait_6_2_zero,
div.trait_6_2_plus,
div.trait_6_2_moins,
div.trait_6_3_zero,
div.trait_6_3_plus,
div.trait_6_3_moins,
div.trait_6_4_zero,
div.trait_6_4_plus,
div.trait_6_4_moins,
div.trait_6_5_zero,
div.trait_6_5_plus,
div.trait_6_5_moins,
div.trait_7_1_zero,
div.trait_7_1_plus,
div.trait_7_1_moins,
div.trait_7_2_zero,
div.trait_7_2_plus,
div.trait_7_2_moins,
div.trait_7_3_zero,
div.trait_7_3_plus,
div.trait_7_3_moins,
div.trait_7_4_zero,
div.trait_7_4_plus,
div.trait_7_4_moins,
div.trait_7_5_zero,
div.trait_7_5_plus,
div.trait_7_5_moins,
div.trait_8_1_zero,
div.trait_8_1_plus,
div.trait_8_1_moins,
div.trait_8_2_zero,
div.trait_8_2_plus,
div.trait_8_2_moins,
div.trait_8_3_zero,
div.trait_8_3_plus,
div.trait_8_3_moins,
div.trait_8_4_zero,
div.trait_8_4_plus,
div.trait_8_4_moins,
div.trait_8_5_zero,
div.trait_8_5_plus,
div.trait_8_5_moins,
div.trait_9_1_zero,
div.trait_9_1_plus,
div.trait_9_1_moins,
div.trait_9_2_zero,
div.trait_9_2_plus,
div.trait_9_2_moins,
div.trait_9_3_zero,
div.trait_9_3_plus,
div.trait_9_3_moins,
div.trait_9_4_zero,
div.trait_9_4_plus,
div.trait_9_4_moins,
div.trait_9_5_zero,
div.trait_9_5_plus,
div.trait_9_5_moins,
div.trait_10_1_zero,
div.trait_10_1_plus,
div.trait_10_1_moins,
div.trait_10_2_zero,
div.trait_10_2_plus,
div.trait_10_2_moins,
div.trait_10_3_zero,
div.trait_10_3_plus,
div.trait_10_3_moins,
div.trait_10_4_zero,
div.trait_10_4_plus,
div.trait_10_4_moins,
div.trait_10_5_zero,
div.trait_10_5_plus,
div.trait_10_5_moins {
    display: none;
}

.charsheet .trait_1_1[value="0"] ~ div.trait_1_1_zero,
.charsheet .trait_1_1[value="1"] ~ div.trait_1_1_plus,
.charsheet .trait_1_1[value="2"] ~ div.trait_1_1_moins,
.charsheet .trait_1_2[value="0"] ~ div.trait_1_2_zero,
.charsheet .trait_1_2[value="1"] ~ div.trait_1_2_plus,
.charsheet .trait_1_2[value="2"] ~ div.trait_1_2_moins,
.charsheet .trait_1_3[value="0"] ~ div.trait_1_3_zero,
.charsheet .trait_1_3[value="1"] ~ div.trait_1_3_plus,
.charsheet .trait_1_3[value="2"] ~ div.trait_1_3_moins,
.charsheet .trait_1_4[value="0"] ~ div.trait_1_4_zero,
.charsheet .trait_1_4[value="1"] ~ div.trait_1_4_plus,
.charsheet .trait_1_4[value="2"] ~ div.trait_1_4_moins,
.charsheet .trait_1_5[value="0"] ~ div.trait_1_5_zero,
.charsheet .trait_1_5[value="1"] ~ div.trait_1_5_plus,
.charsheet .trait_1_5[value="2"] ~ div.trait_1_5_moins,
.charsheet .trait_2_1[value="0"] ~ div.trait_2_1_zero,
.charsheet .trait_2_1[value="1"] ~ div.trait_2_1_plus,
.charsheet .trait_2_1[value="2"] ~ div.trait_2_1_moins,
.charsheet .trait_2_2[value="0"] ~ div.trait_2_2_zero,
.charsheet .trait_2_2[value="1"] ~ div.trait_2_2_plus,
.charsheet .trait_2_2[value="2"] ~ div.trait_2_2_moins,
.charsheet .trait_2_3[value="0"] ~ div.trait_2_3_zero,
.charsheet .trait_2_3[value="1"] ~ div.trait_2_3_plus,
.charsheet .trait_2_3[value="2"] ~ div.trait_2_3_moins,
.charsheet .trait_2_4[value="0"] ~ div.trait_2_4_zero,
.charsheet .trait_2_4[value="1"] ~ div.trait_2_4_plus,
.charsheet .trait_2_4[value="2"] ~ div.trait_2_4_moins,
.charsheet .trait_2_5[value="0"] ~ div.trait_2_5_zero,
.charsheet .trait_2_5[value="1"] ~ div.trait_2_5_plus,
.charsheet .trait_2_5[value="2"] ~ div.trait_2_5_moins,
.charsheet .trait_3_1[value="0"] ~ div.trait_3_1_zero,
.charsheet .trait_3_1[value="1"] ~ div.trait_3_1_plus,
.charsheet .trait_3_1[value="2"] ~ div.trait_3_1_moins,
.charsheet .trait_3_2[value="0"] ~ div.trait_3_2_zero,
.charsheet .trait_3_2[value="1"] ~ div.trait_3_2_plus,
.charsheet .trait_3_2[value="2"] ~ div.trait_3_2_moins,
.charsheet .trait_3_3[value="0"] ~ div.trait_3_3_zero,
.charsheet .trait_3_3[value="1"] ~ div.trait_3_3_plus,
.charsheet .trait_3_3[value="2"] ~ div.trait_3_3_moins,
.charsheet .trait_3_4[value="0"] ~ div.trait_3_4_zero,
.charsheet .trait_3_4[value="1"] ~ div.trait_3_4_plus,
.charsheet .trait_3_4[value="2"] ~ div.trait_3_4_moins,
.charsheet .trait_3_5[value="0"] ~ div.trait_3_5_zero,
.charsheet .trait_3_5[value="1"] ~ div.trait_3_5_plus,
.charsheet .trait_3_5[value="2"] ~ div.trait_3_5_moins,
.charsheet .trait_4_1[value="0"] ~ div.trait_4_1_zero,
.charsheet .trait_4_1[value="1"] ~ div.trait_4_1_plus,
.charsheet .trait_4_1[value="2"] ~ div.trait_4_1_moins,
.charsheet .trait_4_2[value="0"] ~ div.trait_4_2_zero,
.charsheet .trait_4_2[value="1"] ~ div.trait_4_2_plus,
.charsheet .trait_4_2[value="2"] ~ div.trait_4_2_moins,
.charsheet .trait_4_3[value="0"] ~ div.trait_4_3_zero,
.charsheet .trait_4_3[value="1"] ~ div.trait_4_3_plus,
.charsheet .trait_4_3[value="2"] ~ div.trait_4_3_moins,
.charsheet .trait_4_4[value="0"] ~ div.trait_4_4_zero,
.charsheet .trait_4_4[value="1"] ~ div.trait_4_4_plus,
.charsheet .trait_4_4[value="2"] ~ div.trait_4_4_moins,
.charsheet .trait_4_5[value="0"] ~ div.trait_4_5_zero,
.charsheet .trait_4_5[value="1"] ~ div.trait_4_5_plus,
.charsheet .trait_4_5[value="2"] ~ div.trait_4_5_moins,
.charsheet .trait_5_1[value="0"] ~ div.trait_5_1_zero,
.charsheet .trait_5_1[value="1"] ~ div.trait_5_1_plus,
.charsheet .trait_5_1[value="2"] ~ div.trait_5_1_moins,
.charsheet .trait_5_2[value="0"] ~ div.trait_5_2_zero,
.charsheet .trait_5_2[value="1"] ~ div.trait_5_2_plus,
.charsheet .trait_5_2[value="2"] ~ div.trait_5_2_moins,
.charsheet .trait_5_3[value="0"] ~ div.trait_5_3_zero,
.charsheet .trait_5_3[value="1"] ~ div.trait_5_3_plus,
.charsheet .trait_5_3[value="2"] ~ div.trait_5_3_moins,
.charsheet .trait_5_4[value="0"] ~ div.trait_5_4_zero,
.charsheet .trait_5_4[value="1"] ~ div.trait_5_4_plus,
.charsheet .trait_5_4[value="2"] ~ div.trait_5_4_moins,
.charsheet .trait_5_5[value="0"] ~ div.trait_5_5_zero,
.charsheet .trait_5_5[value="1"] ~ div.trait_5_5_plus,
.charsheet .trait_5_5[value="2"] ~ div.trait_5_5_moins,
.charsheet .trait_6_1[value="0"] ~ div.trait_6_1_zero,
.charsheet .trait_6_1[value="1"] ~ div.trait_6_1_plus,
.charsheet .trait_6_1[value="2"] ~ div.trait_6_1_moins,
.charsheet .trait_6_2[value="0"] ~ div.trait_6_2_zero,
.charsheet .trait_6_2[value="1"] ~ div.trait_6_2_plus,
.charsheet .trait_6_2[value="2"] ~ div.trait_6_2_moins,
.charsheet .trait_6_3[value="0"] ~ div.trait_6_3_zero,
.charsheet .trait_6_3[value="1"] ~ div.trait_6_3_plus,
.charsheet .trait_6_3[value="2"] ~ div.trait_6_3_moins,
.charsheet .trait_6_4[value="0"] ~ div.trait_6_4_zero,
.charsheet .trait_6_4[value="1"] ~ div.trait_6_4_plus,
.charsheet .trait_6_4[value="2"] ~ div.trait_6_4_moins,
.charsheet .trait_6_5[value="0"] ~ div.trait_6_5_zero,
.charsheet .trait_6_5[value="1"] ~ div.trait_6_5_plus,
.charsheet .trait_6_5[value="2"] ~ div.trait_6_5_moins,
.charsheet .trait_7_1[value="0"] ~ div.trait_7_1_zero,
.charsheet .trait_7_1[value="1"] ~ div.trait_7_1_plus,
.charsheet .trait_7_1[value="2"] ~ div.trait_7_1_moins,
.charsheet .trait_7_2[value="0"] ~ div.trait_7_2_zero,
.charsheet .trait_7_2[value="1"] ~ div.trait_7_2_plus,
.charsheet .trait_7_2[value="2"] ~ div.trait_7_2_moins,
.charsheet .trait_7_3[value="0"] ~ div.trait_7_3_zero,
.charsheet .trait_7_3[value="1"] ~ div.trait_7_3_plus,
.charsheet .trait_7_3[value="2"] ~ div.trait_7_3_moins,
.charsheet .trait_7_4[value="0"] ~ div.trait_7_4_zero,
.charsheet .trait_7_4[value="1"] ~ div.trait_7_4_plus,
.charsheet .trait_7_4[value="2"] ~ div.trait_7_4_moins,
.charsheet .trait_7_5[value="0"] ~ div.trait_7_5_zero,
.charsheet .trait_7_5[value="1"] ~ div.trait_7_5_plus,
.charsheet .trait_7_5[value="2"] ~ div.trait_7_5_moins,
.charsheet .trait_8_1[value="0"] ~ div.trait_8_1_zero,
.charsheet .trait_8_1[value="1"] ~ div.trait_8_1_plus,
.charsheet .trait_8_1[value="2"] ~ div.trait_8_1_moins,
.charsheet .trait_8_2[value="0"] ~ div.trait_8_2_zero,
.charsheet .trait_8_2[value="1"] ~ div.trait_8_2_plus,
.charsheet .trait_8_2[value="2"] ~ div.trait_8_2_moins,
.charsheet .trait_8_3[value="0"] ~ div.trait_8_3_zero,
.charsheet .trait_8_3[value="1"] ~ div.trait_8_3_plus,
.charsheet .trait_8_3[value="2"] ~ div.trait_8_3_moins,
.charsheet .trait_8_4[value="0"] ~ div.trait_8_4_zero,
.charsheet .trait_8_4[value="1"] ~ div.trait_8_4_plus,
.charsheet .trait_8_4[value="2"] ~ div.trait_8_4_moins,
.charsheet .trait_8_5[value="0"] ~ div.trait_8_5_zero,
.charsheet .trait_8_5[value="1"] ~ div.trait_8_5_plus,
.charsheet .trait_8_5[value="2"] ~ div.trait_8_5_moins,
.charsheet .trait_9_1[value="0"] ~ div.trait_9_1_zero,
.charsheet .trait_9_1[value="1"] ~ div.trait_9_1_plus,
.charsheet .trait_9_1[value="2"] ~ div.trait_9_1_moins,
.charsheet .trait_9_2[value="0"] ~ div.trait_9_2_zero,
.charsheet .trait_9_2[value="1"] ~ div.trait_9_2_plus,
.charsheet .trait_9_2[value="2"] ~ div.trait_9_2_moins,
.charsheet .trait_9_3[value="0"] ~ div.trait_9_3_zero,
.charsheet .trait_9_3[value="1"] ~ div.trait_9_3_plus,
.charsheet .trait_9_3[value="2"] ~ div.trait_9_3_moins,
.charsheet .trait_9_4[value="0"] ~ div.trait_9_4_zero,
.charsheet .trait_9_4[value="1"] ~ div.trait_9_4_plus,
.charsheet .trait_9_4[value="2"] ~ div.trait_9_4_moins,
.charsheet .trait_9_5[value="0"] ~ div.trait_9_5_zero,
.charsheet .trait_9_5[value="1"] ~ div.trait_9_5_plus,
.charsheet .trait_9_5[value="2"] ~ div.trait_9_5_moins,
.charsheet .trait_10_1[value="0"] ~ div.trait_10_1_zero,
.charsheet .trait_10_1[value="1"] ~ div.trait_10_1_plus,
.charsheet .trait_10_1[value="2"] ~ div.trait_10_1_moins,
.charsheet .trait_10_2[value="0"] ~ div.trait_10_2_zero,
.charsheet .trait_10_2[value="1"] ~ div.trait_10_2_plus,
.charsheet .trait_10_2[value="2"] ~ div.trait_10_2_moins,
.charsheet .trait_10_3[value="0"] ~ div.trait_10_3_zero,
.charsheet .trait_10_3[value="1"] ~ div.trait_10_3_plus,
.charsheet .trait_10_3[value="2"] ~ div.trait_10_3_moins,
.charsheet .trait_10_4[value="0"] ~ div.trait_10_4_zero,
.charsheet .trait_10_4[value="1"] ~ div.trait_10_4_plus,
.charsheet .trait_10_4[value="2"] ~ div.trait_10_4_moins,
.charsheet .trait_10_5[value="0"] ~ div.trait_10_5_zero,
.charsheet .trait_10_5[value="1"] ~ div.trait_10_5_plus,
.charsheet .trait_10_5[value="2"] ~ div.trait_10_5_moins {
    display: block;
}

/* Boutton */

.charsheet button[type=action].retourner_page::before,
.charsheet button[type=action].trait::before,
.charsheet button[type=action].trait_plus::before,
.charsheet button[type=action].trait_moins::before,
.charsheet button[type=action].stat::before,
.charsheet button[type=action].stat_check::before,
.charsheet button[type=roll]::before,
.charsheet button[type=action].crises::before {
    content: '';
  }

.charsheet button[type=action].retourner_page {
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 22px;
    background: none;
}

.charsheet button[type=action].retourner_page:hover {
    margin-left: 1px;
	padding: 0px;
	background-position: 0 0px;
}

.charsheet button[type=action].trait,
.charsheet button[type=action].trait_plus,
.charsheet button[type=action].trait_moins {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    margin-left: 4px;
    margin-top: 3px;
    cursor: pointer;
    background-color: #ffffff2e;
    border-radius: 30px;
}

.charsheet button[type=action].trait_moins {    
    border: 1px solid transparent;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    margin-top: 5px;
    margin-left: 4px;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/moins.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.charsheet button[type=action].trait_plus {    
    border: 1px solid transparent;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    margin-top: 5px;
    margin-left: 4px;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Patient13%20v1.5/image/plus.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.charsheet button[type=action].roll_public,
.charsheet button[type=action].roll_prive {
    border: none;
    width: 55px;
    height: 20px;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    background-color: transparent;
    font-size: 16px;
    font-family: Oswald;
    font-weight: bold;
    text-align: left;
}

.charsheet button[type=action].roll_public {
    padding-left: 0px;
}

.charsheet button[type=action].roll_action,
.charsheet button[type=action].roll_combat,
.charsheet button[type=action].roll_mental {
    border: none;
    width: 35px;
    height: 20px;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    background-color: transparent;
    font-size: 16px;
    font-family: Oswald;
    font-weight: bold;
    text-align: left;
}

.charsheet button[type=action].roll_combat {
    padding-left: 5px;
    padding-right: 0px;
    width: 55px;
}

.charsheet button[type=action].roll_mental {
    padding-left: 5px;
}

.charsheet button[type=action].crises {
    border: none;
    padding: 0;
    background-color: transparent;
    font-weight: bold;
    text-align: center;
}

.charsheet button[type=action].crises:hover {
    margin-left: 1px;
	padding: 0px;
	background-position: 0 0px;
}

div.jet_public,
div.jet_prive {
    display: none;
	white-space: nowrap;
}

.charsheet .jet[value="1"] ~ div.jet_public,
.charsheet .jet[value="2"] ~ div.jet_prive {
    display: inline-flex;
}

div.jet_action,
div.jet_combat,
div.jet_mental,
div.type_action,
div.type_combat,
div.type_mental,
div.type_action_4d,
div.type_combat_4d,
div.type_mental_4d {
    display: none;
	white-space: nowrap;
    margin-left: -3px;
}

.charsheet .jet_type[value="1"] ~ div.jet_action,
.charsheet .jet_type[value="2"] ~ div.jet_combat,
.charsheet .jet_type[value="3"] ~ div.jet_mental,
.charsheet .jet_final[value="1"] ~ div.type_action,
.charsheet .jet_final[value="2"] ~ div.type_combat,
.charsheet .jet_final[value="3"] ~ div.type_mental,
.charsheet .jet_final[value="4"] ~ div.type_action_4d,
.charsheet .jet_final[value="5"] ~ div.type_combat_4d,
.charsheet .jet_final[value="6"] ~ div.type_mental_4d  {
    display: inline-flex;
}

/* Bouton stats */
.charsheet .sheet-radio {
    display: flex;
    align-items: center;
  }
  
  /* Configure the button styling. This example makes it look like a radio. */
  .charsheet button.sheet-radio {
    border: 1px solid black;
    width: 25px;
    height: 20px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: black;
  }

  .charsheet button.sheet-radio:hover {
    border: 1px solid rgb(42, 42, 42);
    background-color: black;
  }

  .charsheet button.sheet-radio > span.sheet-checked {
    width: 25px;
    height: 18px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: #ffffffe3;
  }
  
  /* Hide the "checked" section of the radio if the attribute value does not match the radio */
  .charsheet input.sheet-radio[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="9"] ~ button.sheet-gt-9 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="10"] ~ button.sheet-gt-10 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="11"] ~ button.sheet-gt-11 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="12"] ~ button.sheet-gt-12 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="13"] ~ button.sheet-gt-13 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio[value="14"] ~ button.sheet-gt-14 > span.sheet-checked {display: none;}

  /* Radio ancienneté. */
  .charsheet .sheet-radio-anciennete {
    display: flex;
    align-items: center;
  }

  .charsheet button.sheet-radio-anciennete {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: black;
    border-radius: 5px;
    margin-left: 2.5px;
  }

  .charsheet button.sheet-radio-anciennete:hover {
    border: 1px solid rgb(42 42 42 / 23%) !important;
  }

  .charsheet button.sheet-radio-anciennete > span.sheet-checked {
    border: 1px solid black;
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: #ffffff00;
    border-radius: 5px;
  }
  
  /* Hide the "checked" section of the radio if the attribute value does not match the radio */
  .charsheet input.sheet-radio-anciennete[value="1"] ~ button.sheet-gt-1 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="2"] ~ button.sheet-gt-2 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="3"] ~ button.sheet-gt-3 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="4"] ~ button.sheet-gt-4 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="5"] ~ button.sheet-gt-5 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="6"] ~ button.sheet-gt-6 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="7"] ~ button.sheet-gt-7 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="8"] ~ button.sheet-gt-8 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="9"] ~ button.sheet-gt-9 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="10"] ~ button.sheet-gt-10 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="11"] ~ button.sheet-gt-11 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="12"] ~ button.sheet-gt-12 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="13"] ~ button.sheet-gt-13 > span.sheet-checked {display: none;}
  .charsheet input.sheet-radio-anciennete[value="14"] ~ button.sheet-gt-14 > span.sheet-checked {display: none;}

  /* textarea et input */
  
  .charsheet input.surnom,
  .charsheet input.matricule,
  .charsheet input.age,
  .charsheet input.apparence,
  .charsheet input.caractere,
  .charsheet input.medecin,
  .charsheet input.signe,
  .charsheet input.contact,
  .charsheet input.allie,
  .charsheet input.ennemis,
  .charsheet input.effet_perso,
  .charsheet input.traits_nom,
  .charsheet input.roll_mod { 
    width: 97%;
    outline: none;
    resize: none;
    padding: 0;
    font-family: "Shadows Into Light Two", cursive;
    border: none;
    background: none;
    text-align: center;
    cursor: pointer;
    color: var(--black);
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.charsheet input.surnom { 
    font-size: 19px;
    height: 57px;
}

.charsheet input.matricule { 
    font-size: 19px;
    height: 20px;
    margin-top: -5px;
}

.charsheet input.age { 
    font-size: 19px;
    height: 20px;
    margin-top: -5px;
}

.charsheet input.medecin {
    font-size: 15px;
    height: 20px;
    margin-top: -4px;
    padding-right: 183px;
    transform: rotate(0deg);
}

.charsheet input.allie,
.charsheet input.ennemis {
    font-size: 15px;
    width: 99%;
    height: 20px;
    margin-top: -4px;
    padding-right: 0px;
    transform: rotate(0deg);
}

.charsheet input.traits_nom {
    font-size: 16px;
    width: 99%;
    height: 20px;
    margin-top: 10px;
    padding-right: 0px;
    transform: rotate(0deg);
    text-align: left;
    padding-left: 5px;
}

input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; 
	border-radius: 0px;
	background-color: transparent;
	outline: none;
	border: none;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 18px;
	cursor: pointer;
    text-align: center;
}

input[type=number].trait_bonus {
    width: 35px !important;
    font-size: 22px;
    margin-top: 5px;
    letter-spacing: 3px;
    font-weight: bold;
}

input[type=number].roll_mod { 
    width: 35px !important;
    font-size: 20px;
    margin-top: -2px;
    letter-spacing: 3px;
    margin-left: 13px;
    font-weight: bold;
    font-family: Oswald;
}

input[type=number].max_stat { 
    width: 35px !important;
    font-size: 20px;
    height: 26px;
    margin-top: -2px;
    padding-top: 0px;
    margin-left: 9px;
    font-weight: bold;
    font-family: Oswald;
    border-bottom: 2px dotted #0000006e;
}

input[type=checkbox].de_bonus {
    accent-color: #1f1f1f;
}

body.sheet-darkmode input[type=checkbox].de_bonus {
    background-color: #ffffff2e;
}

input[type=checkbox].roll_des_bonus_checkbox {
    accent-color: #1f1f1f;
    background-color: #ffffff2e;
}

.charsheet button[type=roll].roll_3d6,
.charsheet button[type=action].roll_3d6 {
    width: 210px;
    height: 30px;
    border: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    cursor: pointer;
    font-size: 21px;
}
.charsheet button[type=roll].roll_3d6:hover,
.charsheet button[type=action].roll_3d6:hover  {
    margin-left: 2px;
	padding: 0px;
	background-position: 0 0px;
}

.charsheet textarea.apparence,
.charsheet textarea.caractere,
.charsheet textarea.signe,
.charsheet textarea.contact,
.charsheet textarea.stuff {
    outline: none;
    resize: none;
    padding: 4px;
    font-size: 15px;
    cursor: pointer;
    color: var(--black);
    border: none;
    background: none;
    line-height: 16px;
    font-family: "Shadows Into Light Two", cursive;
}

.charsheet textarea.apparence { 
    width: 215px;
    height: 51px;
}

.charsheet textarea.caractere { 
    width: 215px;
    height: 100px;
}

.charsheet textarea.signe { 
    width: 215px;
    height: 82px;
}

.charsheet textarea.contact { 
    width: 415px;
    height: 51px;
}

.charsheet textarea.stuff { 
    width: 430px;
    height: 98px;
}

  /* Roll Template */

.sheet-rolltemplate-patient13{
    margin-left: -46px;
    transform: rotate(1deg);
    color: black;
    font-family: Oswald;
    font-weight: bold;
  }

  .sheet-rolltemplate-darkmode.sheet-rolltemplate-patient13 {
    color: black;
  }

 .sheet-rolltemplate-patient13 .sheet-shadow_roll {
    filter: drop-shadow(2px 1px 4px rgba(0, 0, 0, 0.712));
    display: inline-block;
    width: 500px;
  }

.sheet-rolltemplate-darkmode.sheet-rolltemplate-patient13 .sheet-shadow_roll {
    filter: drop-shadow(0px 0px 2px white);
  }

.sheet-rolltemplate-patient13 .sheet-ecart {
    height: 20px;
    background-color: transparent;
}

.sheet-rolltemplate-patient13 .sheet-info {
    position: absolute;
    font-family: Pictos;
    margin-top: 15px;
    margin-left: 15px;
    width: 10px;
    height: 10px;
    content: "i";
    opacity: 0.5;
    cursor:help;
}

.sheet-rolltemplate-patient13 .sheet-info:hover {
    opacity: 0.8;
}

.sheet-rolltemplate-patient13 .sheet-container {
    position: relative;
    margin-bottom: 0;
    width: 290px;
    height: 132px;
    background-image: url();
    background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/main/Patient13/image/roll_template_bg.png);
    background-size: 290px 132px;
    background-repeat: no-repeat;
    padding-top: 8px;
    padding-bottom: 10px;
}

.sheet-rolltemplate-patient13 .sheet-type {
    position: relative;
    z-index: 1;
    padding: 2px;
    border-radius: 20px 20px;
    border: 2px solid #475e66;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    height: 15px;
    top: 4px;
    background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/main/Cabinet%2520des%2520murmures/img/offi_button_background_result.png);
    color: white;
}

.sheet-rolltemplate-patient13 .sheet-container {
  --echec-classique: #957003;
  --echec-majeur: #830478;
  --echec-critique: red;
  --reussite-classique: #027ac3;
  --reussite-majeur: #003395;
  --reussite-critique: #025302;
}

.sheet-rolltemplate-patient13 .sheet-content {
    display: grid;
    grid-template-columns: 75px 45px 45px 45px;
    line-height: 20px;
    border-top: none;
    margin-left: 70px;
    border-left: 2px solid black;
    height: 117px;
    font-size: 16px;
}

.sheet-rolltemplate-patient13 .sheet-patient-titre {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.sheet-rolltemplate-patient13 .sheet-patient-valeur {
    grid-column: 2/5;
    grid-row: 1;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid black;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 22px;
}
.sheet-rolltemplate-patient13 .sheet-posologie {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    cursor: help;
    height: 35px;
}

.sheet-rolltemplate-patient13 .sheet-value-1-reussite,
.sheet-rolltemplate-patient13 .sheet-value-1-echec {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid black;
    font-family: "Shadows Into Light Two", cursive;
    height: 35px;
}

.sheet-rolltemplate-patient13 .sheet-value-2-reussite,
.sheet-rolltemplate-patient13 .sheet-value-2-echec {
    grid-column: 3;
    grid-row: 2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid black;
    font-family: "Shadows Into Light Two", cursive;
    height: 35px;
}

.sheet-rolltemplate-patient13 .sheet-value-3-reussite,
.sheet-rolltemplate-patient13 .sheet-value-3-echec {
    grid-column: 4;
    grid-row: 2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid black;
    font-family: "Shadows Into Light Two", cursive;
    height: 35px;
}

.sheet-rolltemplate-patient13 .sheet-desc {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 20px;
}

.sheet-rolltemplate-patient13 .sheet-desc-reussite1 {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--reussite-classique);
}

.sheet-rolltemplate-patient13 .sheet-desc-reussite2-1 {
    grid-column: 1 / 5;
    grid-row: 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--reussite-majeur);
    cursor: help;
}

.sheet-rolltemplate-patient13 .sheet-desc-reussite2-2 {
    grid-column: 1 / 5;
    grid-row: 4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--reussite-majeur);
}

.sheet-rolltemplate-patient13 .sheet-desc-reussite3-1 {
    grid-column: 1 / 5;
    grid-row: 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    padding-top: 5px;
    font-weight: bold;
    color: var(--reussite-critique);
    cursor: help;
}

.sheet-rolltemplate-patient13 .sheet-desc-reussite3-2 {
    grid-column: 1 / 5;
    grid-row: 4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--reussite-critique);
}

.sheet-rolltemplate-patient13 .sheet-desc-echec1 {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--echec-classique);
}

.sheet-rolltemplate-patient13 .sheet-desc-echec2-1 {
    grid-column: 1 / 5;
    grid-row: 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding-top: 5px;
    font-weight: bold;
    color: var(--echec-majeur);
    cursor: help;
}

.sheet-rolltemplate-patient13 .sheet-desc-echec2-2 {
    grid-column: 1 / 5;
    grid-row: 4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--echec-majeur);
}

.sheet-rolltemplate-patient13 .sheet-desc-echec3-1 {
    grid-column: 1 / 5;
    grid-row: 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding-top: 5px;
    font-weight: bold;
    color: var(--echec-critique);
    cursor: help;
}

.sheet-rolltemplate-patient13 .sheet-desc-echec3-2 {
    grid-column: 1 / 5;
    grid-row: 4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--echec-critique);
}

.sheet-rolltemplate-patient13 .inlinerollresult,
.sheet-rolltemplate-patient13 .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .inlinerollresult.fullfail  {
	border: none !important;
    background-color: transparent !important;
    /* color: black !important; */
    color: unset !important;
    font-size: 25px;
}

.sheet-rolltemplate-patient13 .sheet-value-1-reussite .inlinerollresult,
.sheet-rolltemplate-patient13 .sheet-value-1-reussite .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .sheet-value-1-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .sheet-value-1-reussite .inlinerollresult.fullfail,
.sheet-rolltemplate-patient13 .sheet-value-2-reussite .inlinerollresult,
.sheet-rolltemplate-patient13 .sheet-value-2-reussite .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .sheet-value-2-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .sheet-value-2-reussite .inlinerollresult.fullfail,
.sheet-rolltemplate-patient13 .sheet-value-3-reussite .inlinerollresult,
.sheet-rolltemplate-patient13 .sheet-value-3-reussite .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .sheet-value-3-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .sheet-value-3-reussite .inlinerollresult.fullfail  {
	border: none !important;
    background-color: #036d03 !important;
    color: white !important;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 29px;
}

.sheet-rolltemplate-patient13 .sheet-value-1-echec .inlinerollresult,
.sheet-rolltemplate-patient13 .sheet-value-1-echec .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .sheet-value-1-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .sheet-value-1-echec .inlinerollresult.fullfail,
.sheet-rolltemplate-patient13 .sheet-value-2-echec .inlinerollresult,
.sheet-rolltemplate-patient13 .sheet-value-2-echec .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .sheet-value-2-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .sheet-value-2-echec .inlinerollresult.fullfail,
.sheet-rolltemplate-patient13 .sheet-value-3-echec .inlinerollresult,
.sheet-rolltemplate-patient13 .sheet-value-3-echec .inlinerollresult.importantroll,
.sheet-rolltemplate-patient13 .sheet-value-3-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-patient13 .sheet-value-3-echec .inlinerollresult.fullfail  {
	border: none !important;
    background-color: #a20404 !important;
    color: white !important;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 29px;
}