/* CSS WAR STORIES*/

@import url('https://fonts.googleapis.com/css2?family=Artifika&family=DM+Serif+Display:ital@0;1&family=Jomolhari&display=swap');

.jomolhari-regular {
  font-family: "Jomolhari", serif;
  font-weight: 400;
  font-style: normal;
}
.artifika-regular {
  font-family: "Artifika", serif;
  font-weight: 400;
  font-style: normal;
}
.dm-serif display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}
.dm-serif display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}


 .sheet-clearfloat { 
	clear:both;
	height:0;
	font-size: 0px;
	line-height:0px;
}	
.sheet-espai100{
	float: left;
	position: relative;
	width: 100%;
	height: 100px;
	margin: 0px auto;
	}
.sheet-separador{
	float: left;
	position: relative;
	width: 100%;
	height: 20px;
	margin: 10px auto;
	border-bottom-color: solid medium;
	}
  /* LINKS CSS */
a:link {
  font-family: "Vollkorn";
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #ff0000;
	text-decoration: none;
}
a:active {
	color: #ff0000;
	text-decoration: none;
} 
   /* END LINKS CSS */
 
/* MENU */

label {
    font-size:1em;
	z-index: 1;
}
input.sheet-tab
{
    width: 120px;
    position: relative;
    margin: 10px 5px;
    cursor: pointer;
    z-index: 1;
    border: 5px #000000;
	text-align: center;
	z-index: 1;
}
input.sheet-tab::before
{
    content: attr(title);
    text-align: center;
    display: inline-block;
    background: #dddddd;
    color: #034583;
		padding: 8px 0px;
  font-family: "Caesar Dressing", system-ui;
  font-weight: 600;
  font-style: normal;
    width: 120px;
    font-size: 19px;
    border: 2px solid #000000;
	
	border-radius: 10px 10px 10px 10px;
	-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);
	z-index: 1;
	}
input.sheet-tab:checked::before
{
    background: #034583;
    color: white;
    border: 2px solid #000000;
}

div.sheet-tab-content
{ display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4,
input.sheet-tab5:checked ~ div.sheet-tab5,
input.sheet-tab6:checked ~ div.sheet-tab6
{
    display: block;
	height: auto;
	min-height: 400px;
	width: 800px;
	margin: 40px 0px;
	z-index: 1;
}


/*============= CONTENEDORES Y COLUMNAS CSS=============*/
.ui-dialog .charsheet {
    padding: 0px 0px;
}

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

#sheet-contenedorfondo{
	width: 860px;
	height: 1062px;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon Ball/images/DRAGONBALL_BACKGROUND_SHEET_G_850px.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*============= CAP CSS=============*/
.sheet-lletra{
  width: 100%;
  margin: 2px 0px 0px;
  text-align: center;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;    
  color: #f7c00f;  
}
.sheet-cap{
	float: left;
	position: relative;
	width: 100%;
	height: auto;
	min-height: 182px;
	margin: 10px auto 0px;
	}	
.sheet-radar{
	float: left;
	position: relative;
	width: 205px;
	height: auto;
	min-height: 160px;
	margin: 10px auto 0px;
	}
.sheet-nom{
	float: left;
	position: relative;
	width: 220px;
	height: auto;
	min-height: 45px;
	margin: 10px auto 0px;
    padding: 112px 0px 0px 0px;
	}
.sheet-scouter{
	float: left;
	position: relative;
	width: 200px;
	height: auto;
	min-height: 160px;
	margin: 10px auto 0px;
	}
.sheet-LVLXP{
  width: 100%;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px 0px 0px 10px;
  text-align: left;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;    
  color: #f7c00f;
}
.sheet-BP{
  width: 100%;
  box-sizing: border-box;
  margin: 0px;
  padding: 37px 0px 0px 30px;
  text-align: left;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;    
  color: #f7c00f;
}

/*============= ATRIBUTS CSS=============*/
.sheet-atributs{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 162px;
    padding: 0px 10px 0px 10px;
    }
.sheet-atributsbox{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 20%;
	height: 160px;
    }
.sheet-atributsnum{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 45px;
    margin: 15px 0px 0px 0px;
    text-align: center;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;    
    color: #f7c00f; 
    }
.sheet-atributsnom{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 25px;
    text-align: center;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;    
    color: #f7c00f;  
    }
.sheet-atributsbono{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 20px;
    text-align: center;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;    
    color: #f7c00f;
    }
.sheet-atributsdau{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 40px;
    margin: 10px 0px 0px 67px;
	height: 30px;
    text-align: center;
    }

.sheet-atributssecundaris{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 860px;
	height: 75px;
    padding: 0px 0px 0px 10px;
    }
.sheet-secundarisbox{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 140px;
	height: 70px;
    }
.sheet-lletra2{
  width: 100%;
  margin: 10px 0px 0px;
  text-align: center;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;    
  color: #f7c00f;  
}
.sheet-secundarisomplir{
  width: 100%;
  margin: 0px 0px 0px;
  text-align: center;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;    
}

/*============= ATRIBUTS COS=============*/
.sheet-cos{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 430px;
    padding: 0px 10px 0px 10px;
    }
.sheet-cosboxes{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 240px;
	height: 430px;
    margin: 0px 0px 0px 30px;
    padding: 0px 8px 0px 10px;
    }
.sheet-escuts{
	float: none;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 81px;
    margin: 16px 0px 0px;
    padding: 0px 0px 0px 5px;
    text-align: center;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;    
    color: #2d2801;
    }
.sheet-iniciativa{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 90px;
	height: 70px;
    margin: 0px 0px 0px;
    }
.sheet-dificultat{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 90px;
	height: 70px;
    margin: 0px 0px 0px 30px;
    }

.sheet-titolhabilitats{
	float: none;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 40px;
    margin: 20px 0px 0px; 
    text-align: center;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;    
    color: #2d2801;
    }
.sheet-habilitat{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 130px;
	height: 24px;
    margin: 0px 0px 0px 15px; 
    text-align: left;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;    
    color: #2d2801;
    }
.sheet-habnum{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 72px;
	height: 24px;
    margin: 0px 0px; 
    }
.sheet-fotoavatar{
    position: relative;
	float: left;
    box-sizing: border-box;
	width: 100%;
	height: 355px;
    margin: 30px 0px 0px;
    overflow: hidden;
    }
.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-nomavatar{
	float: left;
    box-sizing: border-box;
    width: 100%;
    height: auto;
	position: relative;
    padding-top: 29px;
    text-align: center;
    font-size: 9px;
    color: #2d2801;
    }

/*============= ATRIBUTS PEU=============*/
.sheet-peu{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 100%;
	height: auto;
	min-height: 180px;
	margin: 0px auto 0px;
	}
.sheet-center{
	float: left;
	position: relative;
	width: 800px;
	height: auto;
	min-height: 100px;
	margin: 0px auto;
	background-image:url("xxx");
	background-repeat:no-repeat;
	background-position: left top;
	}	
.sheet-peuarmes{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 240px;
	height: 170px;
    margin: 0px 0px 0px 30px;
    }
.sheet-peucenter{
	float: left;
    box-sizing: border-box;
	position: relative;
    text-align: center;
	width: 260px;
	height: 170px;
    margin: 0px 0px 0px 30px;
    }
.sheet-peucapsules{
	float: left;
    box-sizing: border-box;
	position: relative;
	width: 240px;
	height: 170px;
    margin: 0px 0px 0px 30px;
    padding: 0px 8px 0px 10px;
    }

/*============= MYCHECK CSS=============*/
.sheet-mycheck{	
	/* filter:  hue-rotate(120deg) brightness(0.8); */
  }
/* filter: invert(100%) hue-rotate(1040deg) brightness(0.8); */
.sheet-mycheck:checked {
}

/* =============== POP UPS ==================  */
h1 {
  text-align: center;
  font-family: "DM Serif Display", serif;
  color: #880202;
  margin: 80px 0;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
	z-index: 3;	
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 55%;
  position: relative;
  transition: all 5s ease-in-out;
    text-align: center;
    color: #ffe402;
    background-color: #2e3512;
}

.popup h2 {
  margin-top: 0;
  color: #ffe402;
  font-family: "DM Serif Display", serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ffe402;
    opacity: 1 !important;
}
.popup .close:hover {
  color: #880202;
}
.popup .content {
  max-height: 55%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

/* =============== POP UPS RADAR ==================  */
.overlayradar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 3;	
}
.overlayradar:target {
  visibility: visible;
  opacity: 1;
}

.popupradar {
    position: relative;
  margin: 250px auto 0px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 800px;
    max-width: 820px;
    height: 805px;
    min-height: 805px;
  transition: all 5s ease-in-out;
    text-align: center;
    color: #ffe402;
    background-color: #880202;
     background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon Ball/images/DRAGONBALL_SHENON.jpg");
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
}
.popupradar h2 {
  margin-top: 0;
  color: #ffe402;
  font-family: "DM Serif Display", serif;
}
.popupradar .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ffe402;
    opacity: 1 !important;
}
.popupradar .close:hover {
  color: #880202;
}
.popupradar .content {
  max-height: 55%;
  overflow: auto;
}

/* =============== POP UPS COMBATE ==================  */
.overlaycombate {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 3;	
}
.overlaycombate:target {
  visibility: visible;
  opacity: 1;
}
.popupcombate {
    position: relative;
  margin: 250px auto 0px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 800px;
    max-width: 820px;
    height: 805px;
    min-height: 805px;
  transition: all 5s ease-in-out;
    text-align: center;
    color: #ffe402;
    background-color: #880202;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon Ball/images/DRAGONBALL_TORNEO_TECNICAS_KI_3.jpg");
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
}
.popupcombate h2 {
  margin-top: 0;
  color: #ffe402;
  font-family: "DM Serif Display", serif;
}
.popupcombate .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ffe402;
    opacity: 1 !important;
}
.popupcombate .close:hover {
  color: #880202;
}
.popupcombate .content {
  max-height: 55%;
  overflow: auto;
}

/* =============== POP UPS TECNICAS KI ==================  */
.overlaytecnicaki {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 3;	
}
.overlaytecnicaki:target {
  visibility: visible;
  opacity: 1;
}
.popuptecnicaki {
    position: relative;
  margin: 250px auto 0px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 800px;
    max-width: 820px;
    height: 805px;
    min-height: 805px;
  transition: all 5s ease-in-out;
    text-align: center;
    color: #ffe402;
    background-color: #880202;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon Ball/images/DRAGONBALL_TORNEO_COMBATE.jpg");
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
}
.popuptecnicaki h2 {
  margin-top: 0;
  color: #ffe402;
  font-family: "DM Serif Display", serif;
}
.popuptecnicaki .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ffe402;
    opacity: 1 !important;
}
.popuptecnicaki .close:hover {
  color: #880202;
}
.popuptecnicaki .content {
  max-height: 55%;
  overflow: auto;
}

/* =============== POP UPS INVENTARIO ==================  */
.overlayinventario {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 3;	
}
.overlayinventario:target {
  visibility: visible;
  opacity: 1;
}
.popupinventario {
    position: relative;
  margin: 250px auto 0px;
  padding: 20px 0px;
  background: #fff;
  border-radius: 5px;
  width: 840px;
    max-width: 840px;
    height: 805px;
    min-height: 805px;
  transition: all 5s ease-in-out;
    text-align: center;
    color: #ffe402;
    background-color: #880202;
     background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon Ball/images/DRAGONBALL_INVENTARIO.jpg");
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
}
.popupinventario h2 {
  margin-top: 0;
  color: #2d2801;
  font-family: "DM Serif Display", serif;
}
.popupinventario .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #2d2801;
    opacity: 1 !important;
}
.popupinventario .close:hover {
  color: #880202;
}
.popupinventario .content {
  max-height: 55%;
  overflow: auto;
}
.popupinventario .sheet-zenis {
  position: absolute;
  top: 26px;
  left: 30px;
  width: 190px;
  height: 24px;
  padding: 0px 0px 0px 30px;  
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  background-color: #2d2801;
}

/* ================== FIRMA VJ ROLMASTERS ===============  */
.sheet-firma{
	float: left;
	position: relative;
	width:100%;
	max-width: 1000px;
	height: 15px;
	margin: 0px auto 0px;
	overflow:hidden;
	text-align: center;
    font-size: 9px;
	}	

.sheet-firma:hover{
	color: #FF0000;
	}	
/* ========== CSS TEMPLATE DRAGONBALL ============== */
.sheet-rolltemplate-dragonball {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-dragonball {
  margin-left: -7px;
}
.sheet-rolltemplate-dragonball .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}

.sheet-rolltemplate-dragonball .sheet-header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  text-align: left;
  text-transform: capitalize;
  padding: 5px;
  border-bottom: 2px solid black;
   font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
	-webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.9);
    -moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.9);
    box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.9);    
}

.sheet-rolltemplate-dragonball .sheet-title {
  font-size: 1.4em;
  font-weight: bold;
  color: #f7c00f;
font-family: "DM Serif Display", serif;
}

.sheet-rolltemplate-dragonball .sheet-title img.sheet-dbicon {
  width: 33px;
  height: 33px;
  float: right;
}

.sheet-rolltemplate-dragonball .sheet-subtitle {
  font-size: 1.2em;
  color: #f7c00f;
  font-family: "DM Serif Display", serif;
}

.sheet-rolltemplate-dragonball .sheet-container {
  --header-bg-color: #4b040d;
  --header-text-color: #FFF;
}
.sheet-rolltemplate-dragonball .sheet-container.sheet-color-green {
  --header-bg-color: #008000;
}
.sheet-rolltemplate-dragonball .sheet-container.sheet-color-black {
  --header-bg-color: #000;
}
.sheet-rolltemplate-dragonball .sheet-container.sheet-color-white {
  --header-bg-color: #FFF;
  --header-text-color: #000;
}

.sheet-rolltemplate-dragonball .sheet-content {
  display: grid;
  background: #FFF;
  grid-template-columns: auto auto;
  line-height: 1.4em;
  background: #EEE;

}

.sheet-rolltemplate-dragonball .sheet-content > div {
  padding: 5px;
}

.sheet-rolltemplate-dragonball .sheet-content .sheet-key {
  margin-top: 15px;
  padding-right: 10px;
  text-align: right;
    height: 35px;
}

.sheet-rolltemplate-dragonball .sheet-content :nth-child(1n+3),
.sheet-rolltemplate-dragonball .sheet-content :nth-child(1n) {
  background: #EEE;
    margin-top: 15px;
  font-family: "DM Serif Display", serif;
  font-weight: 600;
  font-style: normal;
    font-size: 24px;
    color: #2e3512;
}

.sheet-rolltemplate-dragonball .sheet-desc {
    height: 20px;
    grid-column: span 2;
    margin-top: 0px !important;
    padding: 5px 0px;
    text-align: center;
    font-size: 16px !important;
    background-color: #2e3512!important;
    color: #f7c00f !important;
   font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

/* CSS DAUS CUSTOM FONT PICTOS*/

.charsheet div.sheet-d6{
  font-family: dicefontd6;
  font-size: 24px;
}
.charsheet div.sheet-d8{
   font-family: dicefontd8;
	  font-size: 24px;
}
.charsheet div.sheet-d10{
   font-family: dicefontd10;
	  font-size: 40px;
}
.charsheet div.sheet-d12{
   font-family: dicefontd12;
	  font-size: 24px;
}

/* CANVIA BOTO ROLL20 D20 PER 1D10
.ui-dialog .charsheet button[type=roll]::before {
 font-family: dicefontd10;
}*/


.btn8 .ui-dialog .charsheet button[type=roll]::before {
 	font-family: dicefontd8;
	border: none;
	background-color: transparent;
    content: "A";
}

.ui-dialog .charsheet button[type=roll]::before {
 	border: none;
	background-color: transparent;
    text-align: center;
}

.sheet-habnum .ui-dialog .charsheet button[type="roll"], .ui-dialog .charsheet button[type="compendium"] {
    background: none;
    border: none;
    color: #2e3512!important;
}	

.btn, .btn.btn-default {
    display: inline-block;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    color: #ffe402;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #2e3512, #1c1902);
    background-image: -ms-linear-gradient(top, #2e3512, #1c1902);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2e3512), to(#1c1902));
    background-image: -webkit-linear-gradient(top, #2e3512, #1c1902);
    background-image: -o-linear-gradient(top, #2e3512, #1c1902);
    background-image: linear-gradient(top, #2e3512, #1c1902);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e3512', endColorstr='#1c1902', GradientType=0);
    border-color: #f7c00f #f7c00f #f7c00f;
    border-color: #f7c00f;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #f7c00f;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn:hover {
    background-color: #1c1902;
    color: #ffe402;
    text-decoration: none;
    background-position: 0px -25px;
    transition: background-position 0.1s linear 0s;
}

.btnhab{
    float: right;
    padding: 0px!important;
    font-size: 18px!important;
    background-color: #2e3512!important;
    border: none!important;
    text-align: center !important;
}
.btnhab:hover{
    padding: 0px 0px 0px 0px!important;
    font-size: 33px!important;
    background-color: #2e3512!important;
    border: none;
	 -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}
.btnhab:active{
    padding: 0px 0px 0px 0px!important;
    font-size: 33px!important;
    background-color: #2e3512!important;
    border: none!important;
	box-shadow: none;
	 -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btna{
    float: left;
    padding: 0px 3px 0px 0px!important;
    font-size: 33px!important;
    background: none!important;
    border: none!important;
    text-align: center !important;
    color: #ffe402 !important;
}
.btna:hover{
    padding: 0px 0px 0px 0px!important;
    font-size: 33px!important;
    background: none;
    border: none;
	 -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
     color: #ffe402 !important;
}
.btna:active{
    padding: 0px 0px 0px 0px!important;
    font-size: 33px!important;
    background: none!important;
    border: none!important;
	box-shadow: none;
	 -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
     color: #ffe402 !important;
}
@media screen and (min-width: 950px){
    
  .sheet-contenedorj{
	padding: 15px 10px;
	}
  
	}
@media screen and (min-width: 1050px){
    
  .sheet-contenedorj{
    width: 100%;  
    max-width: 100%;  
	padding: 15px 10px;
    background-image: url("https://rolmasters.com/ROLL20/DB.png");
	background-repeat: no-repeat;
    background-size: auto;
	background-position: center center;
	}
  #sheet-contenedorfondo{
    margin: 0px auto;
}	
    }



/* ================== BOLAS DE DRAC ================ */
.sheet-lletradrac{
  width: 100%;
  margin: 2px 0px 0px;
  text-align: center;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;    
  color: #ffe402;
}
.sheet-bolacolumn1{
    position: relative;
	float: left;
	width: 200px;
	height: 780px;
}
.sheet-bolacolumn2{
    position: relative;
	float: left;
	width: 400px;
	height: 780px;
}
.sheet-bolacolumn3{
    position: relative;
	float: left;
	width: 200px;
	height: 780px;
}
.sheet-bola1 {
	position: relative;
	float: left;
	width: 200px;
	height: 250px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola1buida,
.sheet-bola1-switch:checked ~ .sheet-bola1plena {
  display: block;
}
.sheet-bola1plena,
.sheet-bola1-switch:checked ~ .sheet-bola1buida {
  display: none;
}

.sheet-bola2 {
	position: relative;
	float: left;
	width: 200px;
	height: 250px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola2buida,
.sheet-bola2-switch:checked ~ .sheet-bola2plena {
  display: block;
}
.sheet-bola2plena,
.sheet-bola2-switch:checked ~ .sheet-bola2buida {
  display: none;
}

.sheet-bola3 {
	position: relative;
	float: left;
	width: 200px;
	height: 250px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola3buida,
.sheet-bola3-switch:checked ~ .sheet-bola3plena {
  display: block;
}
.sheet-bola3plena,
.sheet-bola3-switch:checked ~ .sheet-bola3buida {
  display: none;
}

.sheet-bola4 {
	position: relative;
	float: none;
	width: 400px;
	height: 210px;
    margin-top: 570px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola4buida,
.sheet-bola4-switch:checked ~ .sheet-bola4plena {
  display: block;
}
.sheet-bola4plena,
.sheet-bola4-switch:checked ~ .sheet-bola3buida {
  display: none;
}

.sheet-bola5 {
	position: relative;
	float: left;
	width: 200px;
	height: 250px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola5buida,
.sheet-bola5-switch:checked ~ .sheet-bola5plena {
  display: block;
}
.sheet-bola5plena,
.sheet-bola5-switch:checked ~ .sheet-bola5buida {
  display: none;
}

.sheet-bola6 {
	position: relative;
	float: left;
	width: 200px;
	height: 250px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola6buida,
.sheet-bola6-switch:checked ~ .sheet-bola6plena {
  display: block;
}
.sheet-bola6plena,
.sheet-bola6-switch:checked ~ .sheet-bola6buida {
  display: none;
}

.sheet-bola7 {
	position: relative;
	float: left;
	width: 200px;
	height: 250px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
    color: #000000;
    background-color: transparent;
}
.sheet-bola7buida,
.sheet-bola7-switch:checked ~ .sheet-bola7plena {
  display: block;
}
.sheet-bola7plena,
.sheet-bola7-switch:checked ~ .sheet-bola7buida {
  display: none;
}
/* ==================  ARMAS  =================  */
.sheet-armasgrid {
	width: 650px;
	min-height: 40px;
	margin: 0px auto;
	display: grid;
	grid-template-columns: 235px 95px 105px 105px 105px;
	grid-template-rows: 20px;
	}
.sheet-armasceldasgrid {
	text-align: center;
	color: #ffe402;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-size: 20px;
	padding: 5px 0px;
	min-height: 20px;
	}
.contentcombate{
	overflow-y: scroll;
    height: 780px;
	}

/* ==================  TECNICA KI  =================  */

.contenttecnicaki{
	overflow-y: scroll;
    height: 750px;
	}

.sheet-blocktecnicaki{
  box-sizing: border-box;
  width: 96%;
  margin: 15px auto;  
  padding: 10px 10px;
  text-align: center;
 border: solid 3px #ffe402;
    background-color:darkred;
}
.sheet-lletraki{
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;    
  color: #ffe402;    
}
.sheet-lletraki2{
  width: 100%;
  margin: 2px 0px 0px;
  text-align: left;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;    
  color: #ffe402;  
}

/* ================== INVENTARIO================  */

.sheet-inventariocolumns{
    position: relative;
	float: left;
	width: 240px;
	height: 780px;
    margin: 0px 20px;
}
.sheet-lletrainventari{
  box-sizing: border-box;
  width: 100%;
  margin: 110px 0px 0px;  
  text-align: center;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;    
  color: #ffe402;
}
.sheet-varis{
  box-sizing: border-box;
  width: 100%;
    height: 600px;
  text-align: left;
  padding: 5px 2px;
  font-family: "DM Serif Display", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;    
  color: #2d2801;
}

/*============= REPCONTROL BOTONS CSS =============*/
.repcontrol {
  display: flex;
    width: 96%;
  justify-content: flex-end;
  clear: both;
}
.repcontrol_add,
.repcontrol_edit,
.repcontrol_add:hover,
.repcontrol_edit:hover,
.repcontrol_add:active,
.repcontrol_edit:active
.repcontrol_add:focus,
.repcontrol_edit:focus{
  width: 2em;
  height: 1.2em;
  margin: 1px;
  padding: 0 1px 3px 1px;
  box-shadow: none;
  color: transparent !important;
  text-shadow: none;
  outline: transparent !important;
}
.repcontrol_move {
  float: left;
  margin-left: 5px;
  cursor: move;
}
button.btn.repcontrol_del:after,
button.btn.repcontrol_del:hover {
  color: black;
}
button.btn.repcontrol_edit:after {
  font-family: Pictos;
  content: '(';
  color: #ffe402!important;
  margin: 0 0 0 -38px;
}
.repcontainer.ui-sortable.editmode ~ .repcontrol button.btn.repcontrol_edit:after {
  margin: 0 0 0 -28px;
  content: ')';
}
button.btn.repcontrol_add:after {
  font-family: Pictos;
  content: '&';
  color: #ffe402;
  margin: 0 0 0 -31px;
}
button.btn:hover.repcontrol_edit:after,
button.btn:hover.repcontrol_add:after,
button.btn:hover.repcontrol_del:after {
  color: #AFFB02!important;
}
a.btn.repcontrol_move:hover {
  color: #AFFB02;
}
button.btn.btn-danger.pictos.repcontrol_del:hover {
  color: #ff0000;
}