body{
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 20px;
  background-repeat: no-repeat;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
#fileupload{
  display:block;
}

.char{
  /*width: 1920px;
  height: 1370px;
  /*background-color:#333333;*/
  height:100%;
}

.LP{
  /*height:10%;*/
}

.LP-sub{
  display:flex;
  padding:5px;
  padding-left:0px;
}

.LP-pip{
  margin:5px;
  border: 2px solid black;
  text-align: center;
  font-size: 32px;
  height:75px;
  width:75px;
  vertical-align: middle;
  line-height: 75px;
  border-radius:10px;
}

p{
  margin: 0;
}

.klasse{
  display:flex;
  height: 80%;
}

.klasse-mana-aktiv{
  width:5%;
  height:100%;
  border: 2px solid black;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
  line-height: 24px;
  display:none;
}
.klasse-mana-aktiv p{
  writing-mode: vertical-lr;
  text-orientation: upright;
  height: 100%;
  margin: auto;
}
.klasse-mana-inaktiv{
  width:5%;
  height:100%;
  border: 2px solid black;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
  line-height: 24px;
  display:none;
}

.klasse-mana-inaktiv p{
  writing-mode: vertical-lr;
  text-orientation: upright;
  height: 100%;
  margin: auto;
}

.klasse-haupt{
  width:100%;
  height:100%;
}

.klasse-haupt-attribute{
  max-width:500px;
  height:100%;
  margin-top: 2px;
  float:left;
}

.klasse-haupt-zfp{
  margin-top: 2px;
  max-width:1000px;
  height:100%;
  float:left;
}

.klasse-haupt-attribute-profil{
  height:55%;
  width:100%;
  margin-top: -2px;
}

.klasse-haupt-attribute-profil-klasse{
  /*height:50px;*/
  margin-left: 10px;
  margin-right: 10px;
}
.klasse-haupt-attribute-profil-klasse p{
  padding: 13px;
  padding-left: 26px;
}

.klasse-haupt-attribute-profil-name{
  /*height:50px;*/
  outline: 2px solid black;
  margin-left: 19px;
  margin-right: 19px;
  margin-bottom: 2px;
}

.klasse-haupt-attribute-profil-name p{
  padding: 13px;
}

.klasse-haupt-attribute-profil-bild{
  height:215px;
  width:301px;
  outline: 2px solid black;
  margin: auto;
  margin-bottom: 2px;
}

.klasse-haupt-attribute-profil-kampf{
  margin-left: 10px;
  margin-right: 10px;
}

.klasse-haupt-attribute-profil-kampf-reihe{
  /*height:50px;*/
  margin-top: -2px;
}
.klasse-haupt-attribute-profil-kampf-reihe p{
  padding: 13px;
  margin:auto;
  text-align: center;
}


.klasse-haupt-attribute-profil-kampf-spalte{
  display: flex;
  /*height:50px;*/
  width:100%;
  /*margin-bottom: 2px;*/
}

.klasse-haupt-attribute-wuerfel{
  height:45%;
  margin-top:40px;
  margin-left: 10px;
  margin-right: 10px;
}

.klasse-haupt-attribute-wuerfel-reihe{
  height:75px;
  width:100%;
  display: flex;
}

.klasse-haupt-attribute-wuerfel-spalte{
  height:75px;
  width:100%;
  display: flex;
}

.klasse-haupt-attribute-wuerfel-legende{
  margin-top:20px;
}

.klasse-haupt-attribute-wuerfel-legende img {
  max-width: 100%;
  height:auto;
}

.klasse-haupt-attribute-wuerfel-text{
  height:75px;
}

.klasse-haupt-attribute-wuerfel-text p{
  padding: 10px;
}

.klasse-haupt-attribute-wuerfel-bild{
  height: 75px;
}
img {
  max-height: 100%;
  width:auto;
}

.klasse-haupt-attribute-reihe1{
  margin-left: 10px;
  margin-right: 10px;
  /*outline: 2px solid black;*/
  /*height:50px;*/
  margin-top: -2px;
  text-align: center;
}

.klasse-haupt-attribute-reihe1 p{
  padding:10px;
}

.klasse-haupt-attribute-reihe2{
  margin-left: 18px;
  margin-right: 18px;
  /*outline: 2px solid black;*/
  /*height:50px;*/
  margin-top: -2px;
  text-align: center;
}

.klasse-haupt-attribute-reihe2 p{
  padding:7px;
}

.klasse-haupt-attribute-reihe3{
  margin-left: 36px;
  margin-right: 36px;
  outline: 2px solid black;
  /*height:50px;*/
  margin-bottom: 2px;
  text-align: center;
}

.klasse-haupt-attribute-reihe3 p{
  padding:7px;
}

.klasse-haupt-table{
}

table, th, td {
  border: 2px solid black;
}

tr{
  height:25px;
}

td{
  height:25px;
  padding:5px;
  line-height: 25px;
}

th{
  padding:5px;
}

table {
  border-collapse: collapse;
}

.klasse-haupt-table-uberschrift{
  border: 2px solid black;
  max-width: fit-content;
  margin-top: -2px;
  margin-bottom: -2px;
}

.klasse-haupt-table-uberschrift p{
  padding:10px;
}

.ausruestung{
  margin-top:20px;
  display:none;
  height: 200px;
}

.ausruestung-item{
  outline: 2px solid black;
/*height:50px;*/
margin: auto;
min-width: 20%;
text-align: center;
}

.ausruestung-item p{
  padding:10px;
}

.eingabefeld{
  text-align: center;
  outline: none;
  border:none;
  height:40px;
  width:100%;
  font-size: 24px;
}

.buttonstyle{
  height:100%;
  width:100%;
  font-size:20px;
}

@media print{
  .klasse-mana-inaktiv{
    width:5%;
    height:100%;
    border: 2px solid black;
    vertical-align: middle;
    text-align: center;
    font-size: 24px;
    line-height: 24px;
    display:block;
  }
  .klasse-mana-aktiv{
    width:5%;
    height:100%;
    border: 2px solid black;
    vertical-align: middle;
    text-align: center;
    font-size: 24px;
    line-height: 24px;
    display:block;
  }
  .ausruestung{
    margin-top:20px;
    display:flex;
  }
  .klasse-haupt{
    width:90%;
    height:100%;
    display: flex;
  }
  .klasse-haupt-table{
    display: contents;
  }
  .klasse-haupt-attribute{
    width:20%;
    height:100%;
    margin-top: 2px;
  }
  .klasse-haupt-zfp{
    margin-top: 2px;
    width:60%;
    height:100%;
    max-width:100%;
    margin-left: 10px;
    margin-right: 10px;
  }
  .char{
    zoom:55%;
  }
  html, body{
    height:208mm;
  }
  #fileupload{
    display:none;
  }
  #button_screenshot{
    display:none;
  }
  #button_normal{
    display:none;
  }
}
@page {
  size:landscape;
  margin: 0.5cm;
}

.legend tr{
  height:44px;
}

.legend td{
  height:44px;
  padding:5px;
  font-size:16px;
}
.box-simple {
  position: relative;
  padding: 5px;
}
.box-simple-inner{
  position: relative;
  border: 2px solid black;
}
.box {
  position: relative;
  padding: 5px;
  border: 2px solid black;
}
  .box:before, .box:after {
    content: "•";
    position: absolute;
    width: 14px;
    height: 14px;
    font-size: 14px;
    border: 2px solid black;
    line-height: 12px;
    top: 5px;
    text-align: center;
  }
  .box:before {
    left: 5px;
  }
  .box:after {
    right: 5px;
  }
  .box-inner {
    position: relative;
    border: 2px solid black;
    /*background-color: white;*/
  }
    .box-inner:before, .box-inner:after {
      content: "•";
      position: absolute;
      width: 14px;
      height: 14px;
      font-size: 14px;
      color: black;
      border: 2px solid black;
      line-height: 12px;
      bottom: -2px;
      text-align: center;
    }
    .box-inner:before {
      left: -2px;
    }
    .box-inner:after {
      right: -2px;
    }