/* Roll20 - Fiche Insectopia V1.0 by Giovanninatale & Surfandko */

/* classe affichage hexagon */
.sheet-hexagon {
  position: relative;
  background: black;
  float: left;
}
.sheet-hexagon-geant {
	height: 500px;
	width: 850px;
}
.sheet-hexagon-entete {
	height: 225px;
	width: 640px;
}
.sheet-hexagon-equipements {
	height: 200px;
	width: 630px;
}
.sheet-hexagon-grand {
	height: 300px;
	width: 300px;
}
.sheet-hexagon-moyen {
	height: 60px;
	width: 60px;
}
.sheet-hexagon-petit {
	height: 45px;
	width: 45px;
}
.sheet-hexagon-alonge {
	height: 45px;
	width: 175px;
}
.sheet-hexagon-alonge2 {
	height: 45px;
	width: 160px;
}
.sheet-hexagon-alonge3 {
	height: 45px;
	width: 100px;
}
.sheet-hexagon:before {
  position: absolute;
  content: '';
}
.sheet-hexagon:before {
  top: 1px;  /* border width */
  left: 1px;  /* border width */
  height: calc(100% - 2px);  /* 100% - (2 * border width) */
  width: calc(100% - 2px);  /* 100% - (2 * border width) */
  background: white;
}
.sheet-hexagon-petit:before {
  top: 1px;  /* border width */
  left: 1px;  /* border width */
  height: calc(100% - 2px);  /* 100% - (2 * border width) */
  width: calc(100% - 2px);  /* 100% - (2 * border width) */
  background: white;
}

.sheet-hexagon-petit, .sheet-hexagon-petit:before{
 clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.sheet-hexagon-moyen, .sheet-hexagon-moyen:before{
 clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.sheet-hexagon-grand, .sheet-hexagon-grand:before{
 clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.sheet-hexagon-entete, .sheet-hexagon-entete:before{
 clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}

.sheet-hexagon-equipements, .sheet-hexagon-equipements:before{
 clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}
.sheet-hexagon-geant, .sheet-hexagon-geant:before{
 clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}

.sheet-hexagon-alonge, .sheet-hexagon-alonge:before{
 clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}

.sheet-hexagon-alonge2, .sheet-hexagon-alonge2:before{
 clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}

.sheet-hexagon-alonge3, .sheet-hexagon-alonge3:before{
 clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}

/* classe affichage hexagon entete avec informations */
.sheet-chevauche-entete{
 position:relative;
 left:40px;
 top:7px;
}

/* classe input hexagon */
.sheet-input-hexagon-petit{
 font-size:14px;
 max-width:31px;
 border:0px;
 padding:0px;
 text-align:center;
 position: relative;
 right: 1px;
}

.sheet-input-hexagon-moyen{
 font-size:26px;
 max-width:44px;
 border:0px;
 padding:0px;
 text-align:center;
 position: relative;
 right: 7px;
}

.sheet-input-hexagon-petit-alonge{
 font-size:14px;
 max-width:27px;
 border:0px;
 padding:0px;
 text-align:center;
 position: relative;
 right: 43px;
}

.sheet-input-hexagon-alonge{
 font-size:13px;
 max-width:110px;
 border:0px;
 padding:0px;
 text-align:left;
}

.sheet-input-hexagon-alonge-sspetithex{
	font-size:13px;
	max-width:140px;
	border:0px;
	padding:0px;
	text-align:left;
	height:20px;
}

/* classe affichage hexagon avec table/input */
.sheet-chevauche-hexagon-petit{
 position:relative;
 left:9px;
 top:10px;
}

.sheet-chevauche-hexagon-moyen{
 position:relative;
 left:15px;
 top:15px;
}

.sheet-chevauche-hexagon-alonge{
 position:relative;
 left:-7px;
 top:-6px;
 overflow: hidden;
}

.sheet-chevauche-hexagon-alonge-sscercle{
 position:relative;
 left:1px;
 top:-7px;
 overflow: hidden;
}

.sheet-chevauche-hexagon-alonge-sspetithex{
 position:relative;
 left:9px;
 top:10px;
 height:20px;
 overflow: hidden;
 width:156px;
}
.sheet-chevauche-hexagon-alonge2-sspetithex{
 position:relative;
 left:9px;
 top:10px;
 height:20px;
 overflow: hidden;
 width:145px;
}
.sheet-chevauche-hexagon-alonge3-sspetithex{
 position:relative;
 left:9px;
 top:10px;
 height:20px;
 overflow: hidden;
 width:145px;
}

/* classe affichage hexagones en diagonales */
.sheet-col2{
	bottom: 22.5px;
    right: 11.25px;
	position:relative;
}
.sheet-col3{
	position: relative;
    bottom: 45px;
    right: 22.5px;
}
.sheet-col4{
    position: relative;
    bottom: 67.5px;
    right: 33.75px;
}
.sheet-col5{
    position: relative;
    bottom: 90px;
    right: 45px;
}

/* cercles */
.sheet-rolltemplate-blattes .sheet-circle,.sheet-circle{
 height: 30px;
 width: 30px;
 position: relative;
 float: left;
 left:7px;
 top:7px;
 clip-path: circle(50% at 50% 50%);	
}

.sheet-circle-small{
 height: 17px;
 width: 17px;
 clip-path: circle(50% at 50% 50%);	
}

.sheet-circle-small-hexagon-alonge{
 position: relative;
 float: left;
 left:-10px;
 top:-4px;
}

.sheet-circle-small-hexagon-moyen-1{
 position: relative;
 float: left;
 left:-51px;
 top:49px;
}

.sheet-circle-small-hexagon-moyen-2{
 position: relative;
 float: left;
 left:-67px;
 top:21px;
}

.sheet-circle-small-hexagon-moyen-3{
 position: relative;
 float: left;
 left:-51px;
 top:-8px;
}

.sheet-circle-small-hexagon-moyen-4{
 position: relative;
 float: left;
 left:-24px;
 top:-8px;
}

.sheet-circle-small-hexagon-moyen-5{
 position: relative;
 float: left;
 left:-9px;
 top:20px;
}

.sheet-circle-small-hexagon-moyen-6{
 position: relative;
 float: left;
 left:-24px;
 top:50px;
}

.sheet-circle-small-hexagon-petit-1{
 position: relative;
 float: left;
 left:-42px;
 top:35px;
}

.sheet-circle-small-hexagon-petit-2{
 position: relative;
 float: left;
 left:-51px;
 top:14px;
}

.sheet-circle-small-hexagon-petit-3{
 position: relative;
 float: left;
 left:-42px;
 top:-7px;
}

.sheet-circle-small-hexagon-petit-4{
 position: relative;
 float: left;
 left:-19px;
 top:-7px;
}

.sheet-circle-small-hexagon-petit-5{
 position: relative;
 float: left;
 left:-9px;
 top:14px;
}

.sheet-circle-small-hexagon-petit-6{
 position: relative;
 float: left;
 left:-19px;
 top:35px;
}

.sheet-rolltemplate-blattes .sheet-circle-black,.sheet-circle-black {
  background: black;
}

.sheet-rolltemplate-blattes .sheet-circle-gray,.sheet-circle-gray {
  background: lightgrey;
}

.sheet-rolltemplate-blattes .sheet-circle-blue,.sheet-circle-blue {
  background: blue;
}

.sheet-rolltemplate-blattes .sheet-circle-green,.sheet-circle-green {
  background: green;
}

.sheet-rolltemplate-blattes .sheet-circle-red,.sheet-circle-red {
  background: red;
}

/* Caractéristiques hexagon central */
.sheet-label-antenne {
 position: relative;
 float: left;
 left:117px;
 top:80px;
}

.sheet-label-mandibules {
}
.sheet-label-chitine {
}
.sheet-label-temperature {
}

/* hexagones hexagon central */
.sheet-hexagon-pheromone {
 position: relative;
 float: left;
 left:65px;
 top:124px;
}

.sheet-hexagon-instinct {
 position: relative;
 float: left;
 left:307px;
 top:42px;
}

/* GRID */
.sheet-entete{
	display: grid;
	grid-template-columns: 640px 225px;
	column-gap: 10px;
}

.sheet-logo-jets{
	display: grid;
	grid-template-columns: 140px 300px 180px;
	column-gap: 10px;
}

.sheet-xp{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
}

.sheet-nom{
	display: grid;
	grid-template-columns: 72px 210px 72px 210px;
	grid-template-rows: 37px 37px 37px 37px 37px 37px 37px 37px;
	column-gap: 10px;
}

.sheet-espece{
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 2px;
}

.sheet-xpchance{
	display: grid;
	grid-template-columns: 45px 45px 45px 45px 45px;
	
}

.sheet-caste-competence-capacite{
	display: grid;
	grid-template-columns: 190px 460px 190px;
	column-gap: 16px;
}
.sheet-grid{
	display: grid;
}

.sheet-caracteristique{
    display: grid;
    grid-template-columns: 62px 15px 62px 77px 28px 77px 62px 15px 62px;
    row-gap: 16px;
}

.sheet-left{
	justify-self:left;
}
.sheet-right{
	justify-self:right;
}
.sheet-center{
	justify-self:center;
}
/* Compétences hexagon central */
/* ligne 1 */
.sheet-label-pheromone {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-self:center;
	justify-self:right;
}
.sheet-hexagone-antenne{
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 3;
	position: relative;
    right: 23px;
    top: 3px;
}

.sheet-hexagone-esprit{
	grid-column-start: 6;
	grid-column-end: 7;
	grid-row-start: 1;
	grid-row-end: 3;
	position: relative;
    left: 21px;
    top: 6px;
}
.sheet-label-esprit{
	position: relative;
    left: 4px;
}
.sheet-label-instinct {
	grid-column-start: 8;
	grid-column-end: 10;
	grid-row-start: 1;
	grid-row-end: 2;
	align-self:center;
	position: relative;
    right: 14px;
}
/* ligne 2 */
.sheet-label-tir {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	align-self:center;
	justify-self:right;
}
.sheet-label-conscience {
	grid-column-start: 8;
	grid-column-end: 10;
	grid-row-start: 2;
	grid-row-end: 3;
	align-self:center;
	position: relative;
    right: 14px;
}

/* ligne 3*/
.sheet-hexagone-mandibule{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 5;
	position: relative;
    right: 21px;
    top: 22px;
}

.sheet-hexagone-aile{
	grid-column-start: 7;
	grid-column-end: 9;
	grid-row-start: 3;
	grid-row-end: 5;
	position: relative;
    left: 21px;
    top: 22px;
}
.sheet-label-aile{
	position: relative;
    left: 14px;
}

/* ligne 5*/
.sheet-label-chrysalide {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 6;
	align-self:center;
	justify-self:right;
}
.sheet-hexagone-chitine{
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 5;
	grid-row-end: 7;
	position: relative;
    right: 21px;
    top: 22px;
}

.sheet-hexagone-temperature{
	grid-column-start: 6;
	grid-column-end: 7;
	grid-row-start: 5;
	grid-row-end: 7;
	position: relative;
    left: 21px;
    top: 22px;
}
.sheet-label-temperature {
position: relative;
    right: 30px;
}
.sheet-label-activite {
	grid-column-start: 8;
	grid-column-end: 10;
	grid-row-start: 5;
	grid-row-end: 6;
	align-self:center;
	position: relative;
    right: 14px;
}
/* ligne 6*/
.sheet-label-resistance {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 6;
	grid-row-end: 7;
	align-self:center;
	justify-self:right;
}

.sheet-label-metabolisme {
	grid-column-start: 8;
	grid-column-end: 10;
	grid-row-start: 6;
	grid-row-end: 7;
	align-self:center;
	position: relative;
    right: 14px;
}

/*sheet-caracteristique-derive*/
.sheet-caracteristique-derive{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;
	column-gap: 10px;
}
.sheet-vitesse{
	display: grid;
	grid-template-columns: 25px 45px;
}
.sheet-label-vitesse
{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-self:center;
	justify-self:right;
}
.sheet-impact{
	display: grid;
	grid-template-columns: 55px 45px;
}
.sheet-label-impact{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-self:center;
	justify-self:right;
}
.sheet-blessures{
	display: grid;
	grid-template-columns: 55px 45px;
}
.sheet-label-blessures{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-self:center;
	justify-self:right;
	position: relative;
    left: 6px;
}
.sheet-fluide{
	display: grid;
	grid-template-columns: 55px 45px;
}
.sheet-label-fluide{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-self:center;
	justify-self:right;
}
.sheet-souillure{
	display: grid;
	grid-template-columns: 60px;
}

.sheet-initiative-defense-carapace{
	display: grid;
	grid-template-columns: 66px 66px;
	justify-items: center;
}
.sheet-label-carapace
{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	align-self:center;
	justify-self:center;
}
.sheet-hexagone-carapace
{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
	align-self:center;
	justify-self:center;
}

/* equipements et armure*/
.sheet-armure-equipement{
	display: grid;
	grid-template-columns: 225px 640px;
}

.sheet-armure{
	display: grid;
	grid-template-columns: 50px 215px;
}

.sheet-equipement-label-equipement{
	position: relative;
	left:40px;
	font-size:16px;
}
.sheet-equipement-01{
	position: relative;
    bottom: 0px;
    right: 0px;
}
.sheet-equipement-02{
	position: relative;
    bottom:198px;
    right:-283px;
}
.sheet-equipement-02-aff{
	grid-template-columns: 105px 125px;
	display: grid;
}

/* armes */
.sheet-armes {
	display: grid;
	grid-template-columns: auto;
}

.sheet-arme {
	display: grid;
	grid-template-columns: 170px 170px 170px 170px 170px;
}

/* Magie */
.sheet-partie-magie{
	display: grid;
	grid-template-columns: 800px;
}
.sheet-magie-label-jeteur{
	display: grid;
	grid-template-columns: 200px 250px;
}
.sheet-magie{
	display: grid;
	grid-template-columns: 150px 150px 150px 150px 150px;
}
.sheet-magie-position{
	position: relative;
	top:5px;
    left:47px;
}

textarea.sheet-magie-textarea {
	height:75px;
	width:145px;
	margin:0px 0px 9px;
}

/* affichage public/MJ */
input.sheet-CSSJetPGM
{
	opacity: 0;
	height: 26px;
	width: 66px;
	top:4px;
}
span.sheet-CSSJetPGM
{
    display: inline-block;
	border: 2px outset;
	height: 20px;
	width: 60px;
	line-height: 20px;
	font-size: 15px;
	margin-left: -66px;
	text-align: center;
	margin-top: 0px;
}
input.sheet-CSSJetPGM:checked + span.sheet-CSSJetPGM
{
	background-color:black;
	color :white;
	border: 2px inset !important;
}

/* Fiche pnj */
.sheet-tableau-pnj {
	display: grid;
	grid-template-columns: 600px;
}
.sheet-tableau-pnj-entete {
	display: grid;
	grid-template-columns: 600px;
	grid-template-rows: 37px 37px;
}
.sheet-tableau-pnj-caracteristiques {
	display: grid;
	grid-template-columns: 200px 200px 200px;
	grid-template-rows: 37px 37px 37px;
}
.sheet-tableau-pnj-caracteristique-aff {
	display: grid;
	grid-template-columns: 10px 130px 60px;
}

.sheet-tableau-pnj-armes-capacites {
	display: grid;
	grid-template-columns: 300px 300px;
}
.sheet-tableau-pnj-echelle {
	display: grid;
	grid-template-columns: 600px;
	grid-template-rows: 37px;
}
.sheet-blackboxlarge {
    border: 2px solid black;
}