/* CSS ANIME 5E */
/* Character sheet for ROll20 by VJ Rolmasters*/

@import url('https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&family=Mynerve&family=Vollkorn+SC:wght@400;600;700;900&display=swap');

/*============= FONTS CSS =============*/
.bevan-regular {
  font-family: "Bevan", serif;
  font-weight: 400;
  font-style: normal;
}
.bevan-regular-italic {
  font-family: "Bevan", serif;
  font-weight: 400;
  font-style: italic;
}
.mynerve-regular {
  font-family: "Mynerve", cursive;
  font-weight: 400;
  font-style: normal;
}
.vollkorn-sc-regular {
  font-family: "Vollkorn SC", serif;
  font-weight: 400;
  font-style: normal;
}
.vollkorn-sc-semibold {
  font-family: "Vollkorn SC", serif;
  font-weight: 600;
  font-style: normal;
}
.vollkorn-sc-bold {
  font-family: "Vollkorn SC", serif;
  font-weight: 700;
  font-style: normal;
}
.vollkorn-sc-black {
  font-family: "Vollkorn SC", serif;
  font-weight: 900;
  font-style: normal;
}

/*=================== TABS NOU MENU CSS ===================*/

.sheet-cosmenu{
	float: none;
	width: 100%;
	height: auto;
    min-height: 1000px;
    margin: 0px auto ;
	}


/* configure the tab buttons */
.charsheet .sheet-character,
.charsheet .sheet-combat,
.charsheet .sheet-background,
.charsheet .sheet-attributes{
    display: none;
}

/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {background-color: #660001 !important; color: #FFDD00 !important;}
.charsheet .sheet-tabstoggle[value="combat"] ~ div .sheet-button1 {background-color: #660001 !important; color: #FFDD00 !important;}
.charsheet .sheet-tabstoggle[value="attributes"] ~ div .sheet-button2 {background-color: #660001 !important; color: #FFDD00 !important;}
.charsheet .sheet-tabstoggle[value="background"] ~ div .sheet-button3 {background-color: #660001 !important; color: #FFDD00 !important;}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
.charsheet .sheet-tabstoggle[value="combat"] ~ div.sheet-combat,
.charsheet .sheet-tabstoggle[value="attributes"] ~ div.sheet-attributes,
.charsheet .sheet-tabstoggle[value="background"] ~ div.sheet-background{
    display: block;
}

.sheet-button0,
.sheet-button1,
.sheet-button2,
.sheet-button3{
    width: auto;
    background: #ed143d;
    color: #ffffff;
    margin: 0px 0px 0px 3px;
    padding: 16px 25px;
    text-align: center;
    font-family: "Bevan", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    border: 2px solid #000000;
	-webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
    }

.sheet-button0:hover,
.sheet-button1:hover,
.sheet-button2:hover,
.sheet-button3:hover{
    width: auto;
    background: #ffcc00;
    color: #000000;
    margin: 0px 0px 0px 3px;
    padding: 16px 25px;
    text-align: center;
    font-family: "Bevan", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    border: 2px solid #000000;
	-webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
    }

/*============= CONTENEDORES Y COLUMNAS CSS =============*/
 
.sheet-cajamagica{
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
    color: #555;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.sheet-clearfloat { 
	clear:both;
	height:0;
	font-size: 0px;
	line-height:0px;
}	
.sheet-ampladatotal{
	float:none; 
	width:100%;
	height:auto;
    display: inline-block;
	}
.sheet-espai100{
	float: left;
	position: relative;
	width: 100%;
	height: 100px;
	margin: 0px auto;
	}
.ui-dialog .charsheet {
    padding: 0px 0px;
}

.sheet-contenedorvj{
	float:none;
	position:relative; 
	width:100%;
	max-width: 860px;
	height:auto;
    margin: 0px auto;
    padding: 0px 0px;
	}

.sheet-contenedor-central{
    float: none;
	width: 860px;
	height: auto;
    min-height: 0px;
    margin: 0px auto ;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/SHEET_BACKGROUND_ANIME5E_A_860.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*============= TOPBAR CSS =============*/

.sheet-topbar{
	float: none;
	width: 850px;
	height: 115px;
    min-height: 0px;
    margin: 0px auto ;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/ANIME5E_TOP_BAR.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	}

.sheet-logo{
	float:left;
	position:relative; 
	width:312px;	
	height:115px;
    margin: 0% 0% 0% 0%;
	padding: 0px;
	}

.sheet-charactername{
	float:left;
	position:relative; 
	width:310px;	
	height:115px;
    margin: 0% 0% 0% 0%;
	padding: 0px;
	}

.sheet-playername{
	float:left;
	position:relative; 
	width:220px;	
	height:115px;
    margin: 0% 0% 0% 0%;
	padding: 0px;
	}
.sheet-selectrolltype{
    width: 150px; 
    height: 25px!important; 
    margin: 10px 0px 0px 32px !important; 
    padding: 0px 0px; 
    text-align: center; 
    color:#212121;
    font-family: "Vollkorn SC", serif;
    font-size: 14px; 
    border: 1px solid #212121; 
    background-color: transparent;
}
/*============= CHARACTER STATS TAB 1 CSS =============*/

.sheet-statsbar{
	float: none;
	width: 860px;
	height: 665px;
    min-height: 0px;
    margin: 0px auto ;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/ANIME5E_STATS.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	}

.sheet-avatar-box{
	float:left;
	position:relative; 
	width:300px;	
	height:265px;
    margin: 0% 0% 0% 0%;
	padding: 0px;
	}

.sheet-avatar-foto{
 	float: left;   
    position: relative;  
    box-sizing: border-box;
	width: 240px;
	height: auto;
    min-height: 210px;
    max-height: 210px;
    margin: 30px 0px 0px 36px;
    overflow: hidden;
    }
.sheet-avatar-foto img{
	float: none;
    box-sizing: border-box;
    width: 100%;
    height: auto;
	position: relative;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    }

.sheet-race-box{
	float:left;
	position:relative; 
	width:240px;	
	height:265px;
    margin: 0% 0% 0% 0%;
	padding: 0px;
    font-family: "Mynerve", serif;
    }
.sheet-class-box{
	float:left;
	position:relative; 
	width:300px;	
	height:265px;
    margin: 0% 0% 0% 0%;
	padding: 0px;
	}

.sheet-stats-box{
	float:left;
	position:relative; 
	width:142px;	
	height:250px;
    margin: 0% 0% 0% 0px;
	padding: 0px;
	}
.btnanime5e{    
}
.sheet-profiabilitybox{
    float: left;
    position: relative;
    width: 125px;
    height: 18px;
    margin: 0px 0px 0px 0px;
    padding: 2px 0px 0px 0px;
    font-family: "Bevan", serif;
    font-size: 12px;
    border: 1px solid #000000;
}
.sheet-roundstats1-box{
	float:left;
	position:relative; 
	width:145px;	
	height:130px;
    margin: 0% 0% 0% 0px;
	padding: 0px;

	}
.sheet-roundstats2-box{
	float:left;
	position:relative; 
	width:200px;	
	height:130px;
    margin: 0% 0% 0% 0px;
	padding: 0px;

	}
.sheet-roundstats3-box{
	float:left;
	position:relative; 
	width:160px;	
	height:130px;
    margin: 0% 0% 0% 0px;
	padding: 0px;

	}
.sheet-titles{
	float:left;
	position:relative; 
	width:100%;	
	height:30px;
    margin: 5px 0px 10px;
	padding: 0px;
    font-family: "Bevan", serif;
    font-size: 30px;
    color: #000000;
    text-align: center;
	}
.sheet-proficienciesbar{
	float: left;
	width: 860px;
	height: auto;
    min-height: 320px;
    margin: 0px auto ;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/ANIME5E_BACKGROUND_PROFICIENCIES.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	}
.sheet-proficienciesbox1{
	float: left;
	width: 140px;
	height: auto;
    min-height: 240px;
    margin: 40px auto 0px ;
    font-family: "Bevan", serif;
    font-size: 17px;
    color: #000000;
    text-align: center;
	}
.sheet-proficienciesbox2{
	float: left;
	width: 280px;
	height: auto;
    min-height: 200px;
    margin: 40px auto 0px ;
    font-family: "Bevan", serif;
    font-size: 17px;
    color: #000000;
    text-align: center;
	}

/*=================== BACKGROUND TAB CSS ===================*/
.sheet-inputbackground{
	width:150px;	
	height:30px;
    margin:0px 0px;
    text-align: center;
    border: solid 2px #000000;
    }
.sheet-tinny-black{
	float:left;
	position:relative; 
	width:150px;
	height:25px;
    margin: 0px auto 0px;
	padding: 3px 0px 0px;
    font-family: "Bevan", serif;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    background-color: #000000;
	}
.sheet-titol-black{
	float:left;
	position:relative; 
	width:100%;
	height:24px;
    margin: 5px auto 0px;
	padding: 10px 0px;
    font-family: "Bevan", serif;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    background-color: #000000;
	}
.sheet-fotoavatar{
 	float: left;   
    position: relative;  
    box-sizing: border-box;
	width: 100%;
	height: auto;
    min-height: 380px;
    max-height: 380px;
    margin: 0px 0px 0px;
    overflow: hidden;
    background-color: #F5F5F5;
    border: 1px solid #ccc;
    }
.sheet-fotoavatar img{
	float: none;
    box-sizing: border-box;
    width: 100%;
    height: auto;
	position: relative;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    }
.sheet-title-notes{
	float:left;
	position:relative; 
	width:100%;
	height:30px;
    margin: 0px 0px 0px;
	padding: 0px 0px;
    font-family: "Bevan", serif;
    font-size: 18px;
    text-align: center;
	}

/*============= ATRIBUTES TAB CSS =============*/

.sheet-attribute-tiny{
	float:left;
	position:relative; 
	width:80px;
	height:25px;
    margin: 0px 0px 0px;
	padding: 0px 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 18px;
    text-align: center;
	}
.sheet-attribute-medium{
	float:left;
	position:relative; 
	width:130px;
	height:25px;
    margin: 0px 0px 0px;
	padding: 0px 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 18px;
    text-align: center;
	}
.sheet-attribute-medium1{
	float:left;
	position:relative; 
	width:150px;
	height:25px;
    margin: 0px 0px 0px;
	padding: 0px 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 18px;
    text-align: center;
	}
.sheet-attribute-medium2{
	float:left;
	position:relative; 
	width:200px;
	height:25px;
    margin: 0px 0px 0px;
	padding: 0px 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 18px;
    text-align: center;
	}
.sheet-attribute-big{
	float:left;
	position:relative; 
	width:230px;
	height:25px;
    margin: 0px 0px 0px;
	padding: 0px 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 18px;
    text-align: center;
	}
.sheet-titlesmall{
	float:left;
	position:relative; 
	width:100%;	
	height:30px;
    margin: 0% 0% 0% 0px;
	padding: 10px 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 22px;
    color: #000000;
    text-align: center;
	}
.sheet-magic-box{
	float:left;
	position:relative; 
	width:100%;
	height:auto;
    min-height: 300px;
    margin: 5px auto 0px;
	padding: 0px;
    border: dotted 5px #000000;
	}
.sheet-magic-prerounds{
	float:left;
	position:relative; 
	width:70px;
	height:70px;
    margin: 0px auto;
	padding: 0px;
    text-align: center;
	}
.sheet-magic-rounds{
	float:left;
	position:relative; 
	width:70px;
	height:auto;
    margin: 0px auto;
	padding: 0px;
    font-family: "Vollkorn SC", serif;
    font-size: 16px;
    text-align: center;
	}
.sheet-armour-box{
	float:left;
	position:relative; 
	width:820px;
	height:auto;
    min-height: 100px;
    margin: 5px auto 0px;
	padding: 5px 0px 0px 0px;
    border: dotted 5px #000000;
    color: #000000;
	}
.sheet-titlearmourbox{
	float:left;
	position:relative; 
	width:730px;
	height:30px;
    margin: 0px 0px 0px 30px;
	padding: 0px;
	}

/*============= GENERAL CSS =============*/

.sheet-characterinfo{
	width:150px;	
	height:30px;
    margin:0px 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 2px #000000;
	}
.sheet-characterinfo2{
	width:200px;	
	height:30px;
    margin:0px 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 2px #000000;
    text-align: center; margin: 46px 0px 0px 10px; background-color: transparent; font-family: Mynerve;  font-size: 20px
	}
.sheet-columnalogo{
	float:left;
	position:relative; 
	width:190px;	
	height:auto;
    margin: 0px;
	padding: 0px;
	}

.sheet-100{
	float:left;
	position:relative; 
	width:96%;
	height:auto;
    margin: 0px 2%;
	padding: 0px 0px;
    box-sizing: border-box;
    display: inline-block;
	}
.sheet-width100{
	float:left;
	position:relative; 
	width:100%;
	height:auto;
    min-height: 32px;
    margin: 0px 0px;
	padding: 0px 0px;
    box-sizing: border-box;
    display: inline-block;
	}
.sheet-columnaters{
	float:left;
	position:relative; 
	width:32%;	
	height:auto;
    margin: 0% 0% 0% 1%;
	padding: 0px;
	}
.sheet-columnaterscenter{
	float:left;
	position:relative; 
	width:32%;	
	height:auto;
    margin: 0% auto;
	padding: 0px;
    text-align: center;
	}
.sheet-columnadosters{
	float:left;
	position:relative; 
	width:66%;	
	height:auto;
    margin: 0% 0% 0% 1%;
	padding: 0px;
	}
.sheet-columnamig{
	float:left;
	position:relative; 
	width:49%;	
	height:auto;
    margin: 0% 0% 0% 1%;
	padding: 0px;
	}
.sheet-columnaquinto{
	float:left;
	position:relative; 
	width:19%;	
	height:auto;
    margin: 0% 0% 0% 1%;
	padding: 0px;
	}
.sheet-ampladatotal30{
	float:none; 
	width:100%;
	height:30px;
    display: inline-block;
	}
.sheet-ampladatotal301{
	float:none; 
	width:600px;
	height:30px;
    margin: 0px auto;
	}
/*============= STATS  CSS BORRAR =============*/

.sheet-stats-checkbox{
	float:left; 
	width:47px;
	height:30px;
    margin: 0px auto;
    padding: 5px 0px 0px;
    text-align: center;
    background-color:antiquewhite;
	}


/*============= Jakob's Better Default Rolltemplate =============*/
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-custom {
  margin-left: -7px;
}

.sheet-rolltemplate-custom .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
  background-color: #ed143d;
  /* change text-align to center to center the header text */
  text-align: left;
  font-family: "Bevan", serif;  
  color: #ffffff;
  padding: 5px;
    
  -webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);  
}
.sheet-rolltemplate-custom .sheet-title {
  font-size:1.2em;
    margin: 1px 0px 0px 10px;
}
.sheet-rolltemplate-custom .sheet-subtitle {
  font-size:.9em;
    margin: 0px 0px 0px 10px;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container {
  /* this is the default color */
  --header-bg-color: rgba(112,32,130,1);
  --header-text-color: #FFF;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
  --header-bg-color: #F00;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
  --header-bg-color: #0F0;
  --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
  display: grid;
  background: #FFF;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
    font-weight: bold;
    padding: 8px 10px 0px 0px;
    text-align: right;
    font-family: 'Vollkorn SC';
    font-size: 17px;
}

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-custom .sheet-value {
}
*/

/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
  background:#EEE;
}

/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
}
/*============= ESPACIADORES Y SEPARADORES CSS =============*/
.sheet-espai-10{
	float:left;
	position:relative; 
	width:100%;
	height:10px;
    margin: 0px auto;
	padding: 0px;
	}
.sheet-espai-20{
	float:left;
	position:relative; 
	width:100%;
	height:20px;
    margin: 0px auto;
	padding: 0px;
	}
.sheet-espai-30{
	float:left;
	position:relative; 
	width:100%;
	height:30px;
    margin: 0px auto;
	padding: 0px;
	}
.sheet-espai-40{
	float:none;
	position:relative; 
	width:100%;
	height:40px;
    margin: 0px auto;
	padding: 0px;
	}
.sheet-line-separador5{
	float:left;
	position:relative; 
	width:100%;
	height:5px;
    margin: 3px auto 0px;
	padding: 0px;
    background-color: #ed143d;
	}
.sheet-line-separador10{
	float:left;
	position:relative; 
	width:100%;
	height:10px;
    margin: 3px auto 0px;
	padding: 0px;
    background-color: #ed143d;
	}
.sheet-line-separador15{
	float:left;
	position:relative; 
	width:100%;
	height:15px;
    margin: 3px auto 0px;
	padding: 0px;
    background-color: #ed143d;
	}
/*=================== FIRMA CSS ===================*/

.sheet-firma-foot{
    float: none;
	width: 100%;
	height: 20px;
    min-height: 20px;
    margin: 5px auto ;    
    font-family: "Bevan", serif;
    font-weight: 500;
    font-size: 11px;
    text-align: center;
}

/*=================== MEDIA CSS ===================*/

@media screen and (min-width: 940px){
    .sheet-contenedorvj{
    width: 100%;  
    max-width: 100%;  
	padding: 30px 10px 50px;
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
    box-sizing: border-box;
      background-color:floralwhite;
    }    
    }
@media screen and (min-width: 1000px){
    .sheet-contenedorvj{
    width: 100%;  
    max-width: 100%;  
	padding: 30px 10px 50px;
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
    box-sizing: border-box;
      background-color:antiquewhite;
    }     
    }
@media screen and (min-width: 1050px){
    .sheet-contenedorvj{
    width: 100%;  
    max-width: 100%;  
	padding: 30px 10px 50px;
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
    box-sizing: border-box;
      background-color:lavender;
    }  
    }
@media screen and (min-width: 1100px){
    .sheet-contenedorvj{
    width: 100%;  
    max-width: 100%;  
	padding: 30px 10px 50px;
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
    box-sizing: border-box;
      background-color:burlywood;
    }  
    }