.personnage_container h1 {
  color: white;
  display: inline-bloc;
  position: relative;
  margin: 5px;
  font-size: 18px;
  max-width: 485px;
}

.personnage_container h1 span {
  font-size: 14px;
  position: relative;
  top: -6px;
}

.personnage_container h2 {
  font-size: 12px;
  font-family: Arial, sans-serif !important;
  position: absolute;
  right: 30%;
}
.personnage_container h2::before {
  content:  ">>> ";
}

.personnage_container form {
	background: linear-gradient(348deg, #181D33 0%, #27274A 100%);
    border-radius: 10px;
    border: 8px groove #2B2B40;
    min-height: 250px;
    position: relative;
}

.portrait {
   box-sizing: border-box;
   float: left;
   width: 150px;
   height: 200px;
   margin: 5px;
   /*border: 2px solid black;*/
   background-image: url('./../portraits/test1.png');
}

.data_container {
   box-sizing: border-box;
   float: left;
   width: auto;
   padding:  3px;
}

.data_container input[type=checkbox] {
	width: 25px;
   height: 25px;
   position: relative;
   top: -20px;
   left: 6px;
}

.data_container h1 {
    display: inline-block;
}

.data_container .specie,
.data_container .origin {
    position: absolute;
}
.data_container .origin {
    top: 65px;
}
.data_container .specie {
    top:  50px;
}

.data_container input {
	display: block;
   min-height: 24px !important;
   height: 24px !important;
   width: 150px;
   min-width: 150px;
   max-width: 150px;
}

.data_container input[type=submit] {
   position: absolute;
   top:  170px;
   right: 170px;
   background-color: grey;
   color: black !important;
   padding: 6px 0px;
   font-family: "Aurebesh", Arial, sans-serif;
}

.data_container label {
	display: block;
    margin-top: 10px;
    color: white;
}

.qrcode_container {
   //box-sizing: border-box;
   //float: left;
   width: 124px;
   height: 150px;
   margin: 5px;
   position: absolute;
   right: 25px;
   bottom: 30px;
   border: 1px dashed black;
}
.qrcode_container input {
	text-align: center;
   background-color: white !important;
   color: black !important;
   height: 24px !important;
   font-family: Arial, sans-serif !important;
   padding: 0px !important;
   border: none !important;
   border-radius: 0 !important;
   min-height: 24px !important;
   width: 124px !important;
}
.qrcode_display {
   display: inline-box;
   width: 124px;
   height: 124px;
   background-color: white;
   padding: 12px;
}
.qrcode_display_login {
   display: inline-box;
   width: 400px;
   height: 400px;
   background-color: white;
   padding: 20px;
}

/*
 * ========== PORTRAIT ANIMATION ========== 
 */

@keyframes portraitAnimation {
    0% { background-position:    0px 0px; }
   25% { background-position: -150px 0px; }
   26% { background-position:    0px 0px; }
   45% { background-position: -300px 0px; }
   46% { background-position:    0px 0px; }
   82% { background-position: -450px 0px; }
   83% { background-position:    0px 0px; }
   99% { background-position: -600px 0px; }
  100% { background-position:    0px 0px; }
}
.animated {
  animation: portraitAnimation;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
 * ========== IDCards Print ========== 
 */

@page {
  size: A4;
  margin: 0;
}
@media print {
    * { background: none !important; }

    html, body {
        width: 230mm; /* feinte pour pouvoir dépasser les limites des inline-box */
        height: 297mm;
    }
    body {
        padding: 5mm 4mm !important;
    }

    #main #content-wrap {
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
    }
    .container {
        padding:  0;
        margin: 0;
        width: 100%;
    }

    #chalacta-reader,
    #chalacta-reader-results,
    #scroll-top,
    #addSpacer,
    #change-content-form { display: none !important; }

    .personnage_container {
        width:  85mm;
        height:  54mm;
        margin: -0.5mm 6.9mm 0 4mm;
        border: none;
        display: inline-block;
        background: white !important;
    }
    .personnage_container form {
        width: 85mm;
        height: 54mm;
        margin: 0;
        padding: 0;
        background: url('https://firefly.laboitedepan.fr/wp-content/plugins/holonet-user-meta/assets/Chalacta---IDCard-Template.png') !important;
        background-size: 85mm 54mm !important;
        border: none !important;
        min-height: 0 !important;
    }
    .personnage_container h1 span,
    .personnage_container h2,
    .personnage_container input,
    .personnage_container label
     {
        display: none !important;
    }
    .portrait { display: none; }

    .personnage_container {
        display: none;
    }
    .personnage_container:has(input:checked) {
        display: inline-block;
    }

    #primary .personnage_container h1 {
        font-size: 5mm !important;
        margin: 3.5mm 0mm 5mm 4mm;
        color: #bbb !important;
        text-shadow: 0.5mm 0 0 black, -0.5mm 0 0 black, 0 0.5mm 0 black, 0 -0.5mm 0 black !important;
    }

    .qrcode_container {
        width: 30mm;
        height: 30mm;
        right: 2mm;
        bottom: 9mm;
        border: 0.6mm solid black;
        border-radius: 2mm;
    }
    .qrcode_display {
        padding: 2mm;
        width: initial;
        height: initial;
        background: white !important;
    }
    .specie, .origin {
        font-family: aurebesh;
        font-size: 2.5mm !important;
        margin: 6mm 0 0 8mm;
        padding: 0;
    }
    /*.specie {
        top: 41px !important;
        left: -10px !important;
        font-size: 15px !important;
    }*/

}

/*
 * ========== IDCards Identification Page ========== 
 */

#IDCard .personnage_container {
    width:  85mm;
    height:  54mm;
    margin: -0.5mm 6.9mm 0 4mm;
    border: none;
    display: inline-block;
    background: white !important;
}
#IDCard .personnage_container form {
    width: 85mm;
    height: 54mm;
    margin: 0;
    padding: 0;
    background: url('https://firefly.laboitedepan.fr/wp-content/plugins/holonet-user-meta/assets/Chalacta---IDCard-Template.png') !important;
    background-size: 85mm 54mm !important;
    border: none !important;
    min-height: 0 !important;
}
#IDCard .personnage_container h1 span,
#IDCard .personnage_container h2,
#IDCard .personnage_container input,
#IDCard .personnage_container label
{
    display: none !important;
}
#IDCard .portrait { display: none; }

#IDCard .personnage_container h1 {
    font-size: 5mm !important;
    margin: 3.5mm 0mm 5mm 4mm;
    color: #bbb !important;
    text-shadow: 0.5mm 0 0 black, -0.5mm 0 0 black, 0 0.5mm 0 black, 0 -0.5mm 0 black !important;
}

#IDCard .qrcode_container {
    width: 30mm;
    height: 30mm;
    right: 2mm;
    bottom: 9mm;
    border: 0.6mm solid black;
    border-radius: 2mm;
}
#IDCard .qrcode_display {
    padding: 2mm;
    width: initial;
    height: initial;
    background: white !important;
}
#IDCard .specie, .origin {
    font-family: aurebesh;
    color: #000 !important;
    font-size: 2.5mm !important;
    margin: 6mm 0 0 8mm;
    padding: 0;
    top:  60px;
}
#IDCard .specie {
    top:  60px;
}
#IDCard .origin {
    top:  100px;
}