:root {
	  	--mainColor: #002c00; /*sealBrown*/
	  --backMainColor: #181111; /*ch*/
	  --backTraits: #383232;/*#d9c484; */
	  	--rojoNormal:#003500; /*Maroon*/
	  --rojoTrait:#5e0000;
	  	--mainTitle:#479975;/*#a23424*/;
	  --vhighEmphasis:rgba(255,255,255,0.87); /*white*/
	  --highEmphasis:rgba(255,255,255,0.80); /*white*/
	  --mhighEmphasis:rgba(255,255,255,0.70); /*white*/
	  --lowEmphasis:rgba(255,255,255,0.6);
	  --mlowEmphasis:rgba(255,255,255,0.49);
	  --vlowEmphasis:rgba(255,255,255,0.38);
	  --vhighEmphasisL:rgba(0,0,0,0.87); /*white*/
	  --highEmphasisL:rgba(0,0,0,0.80); /*white*/
	  --lowEmphasisL:rgba(0,0,0,0.6);
	  --vlowEmphasisL:rgba(0,0,0,0.38);
	  	--1dp:#1a201d;/*#241d1d;*/
	  	--2dp:#1f2421;
	  	--3dp:#212623;
	  	--4dp:#232926;
	  	--6dp:#292e2b;
	  	--8dp:#2b302d;/*#332d2d;*/
	  	--12dp:#303432;
	  	--16dp:#323634;
	  	--24dp:#343836;
	  	--36dp:#3d3d3d;
	  	--48dp:#414141;
	  	--rojoDes:#cc7452;
	  	--rojoTitulo:#288505;
	  	--patreon:#55725f;/*#f96854;*/
	  	--patreonLink:#ff9283;
	  	--swiperButtons:#005612;
	  	--fondoBloques:#778a70;/*#eae4d8;*/
	  	--bordeBloques:#005737;/*#c99a89;*/
	  	--coreMain:#00642e;
	  	--oldMain:#873637;

	  	--tablaCabeza:#366223;/*#5e0000;*/
	  	--tablaPar:rgba(193, 209, 170,0.5);/*f5efe0;*/
	  	--tablaImpar:rgba(205, 219, 199,0.5);/*ede3c8;*/
	  	--tablaFoot:rgba(182, 204, 175,0.5);/*e6d8b0;*/
	  	--tablaExtra:#a3bf99;/*dfce9a;*/
	  	--encabezado2:#97b890;/*a86753;*/
	  	--bordeAmarillo:#002100;/*#b29e74;*/
	  --link:#00aab9;/*ee9677;#138953;*/
	  --linkC:#506268;
	  	--linkSource:#9AB187;
	  --link2:#5b6d61;/*#99d3b3;138953;*/
	  --link3:#87d1e9;/*185580;*/
	  --link3C:#465364;
	  --link4:#c77c1b;
	  --link4C:#6c8080;
	  --link5:#383f4d;
	  --linkArrow:#9EA0A8;
	  --linkArrow2:#5f6579;
	  --linkArrow3:#B2A588;
	  --linkRules:#5c5c5c;
	  --linkRules2:#6a1313;
	  --linkGris:#ccc;
	  --rarity:#2b1e1a;/*#DFA494;/*98513d;*/
	  --rare:#282f3c;/*#6e84b7;/*002664;*/
	  --settlement:#94c59d;/*004416;*/
	  --unique:#321a3c;/*ba68b3;/*54166e;*/
	  --size:#92cc93;/*3b7b59;*/
	  --nonPaizo: #787878;
	  --alignment:#c1c6d9;/*576293;*/
	  	--fondoBox:#bdcbbb;/*dbd1bc;*/
	  	--fondoSidebar:#cdc4ad;/*#757C8A;*/
	  	--fondoResaltar2:#cfc5af;/*#787E8B;*/
	  --lightBlue: #d1d3d4;
	  --twitter:#1da1f2;
	  --twitter2:#4169e1;
	  --grey2:var(--vlowEmphasisL);/*#aaa;*/
	  --sizeDice:1;
	}
@font-face {
    font-family: 'SabonLTSstd';
    src: url('/fonts/SabonLTStd-Roman.woff2') format('woff2'),
         url('/fonts/SabonLTStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'olsentf';
    src: url('/fonts/olsentf-regular-webfont.woff2') format('woff2'),
         url('/fonts/olsentf-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sketch_gothic_schoolregular';
    src: url('/fonts/sketch_gothic_school-webfont.woff2') format('woff2'),
         url('/fonts/sketch_gothic_school-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'wolf_in_the_cityregular';
    src: url('/fonts/wolf_in_the_city-webfont.woff2') format('woff2'),
         url('/fonts/wolf_in_the_city-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'knemabold';
    src: url('/fonts/knema-webfont.woff2') format('woff2'),
         url('/fonts/knema-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pathfinder_Icons';
    src: url('/fonts/Pathfinder-Icons.woff2') format('woff2'),
         url('/fonts/Pathfinder-Icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'youtube';
    src: url('/fonts/youtube-sans-medium-webfont.woff2') format('woff2'),
         url('/fonts/youtube-sans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GoodOT_CondBold';
    src: url('/fonts/GoodOT-CondBold.woff2') format('woff2'),
         url('/fonts/GoodOT-CondBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GoodOT_Bold';
    src: url('/fonts/goodot-bold-webfont.woff2') format('woff2'),
         url('/fonts/goodot-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Taroca';
    src: url('/fonts/taroca-webfont.woff2') format('woff2'),
         url('/fonts/taroca-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GoodOT';
    src: url('/fonts/goodot-webfont.woff2') format('woff2'),
         url('/fonts/goodot-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'albertus_mt';
    src: url('/fonts/albertus_mt.woff2') format('woff2'),
         url('/fonts/albertus_mt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'moonshiner';
    src: url('/fonts/moonshiner-regular-webfont.woff2') format('woff2'),
         url('/fonts/moonshiner-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-variant: small-caps;
}
@font-face {
    font-family: 'SabonItalic';
    src: url('/fonts/SabonLTStd-Italic.woff2') format('woff2'),
         url('/fonts/SabonLTStd-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-variant: small-caps;
}
.darkMode {
    display: none !important;
}
i.pf2:before {
	font-family: 'Pathfinder_Icons';
	font-style:normal;
	font-size:0.9em;
}
i.pf2.action1:before { content: " "; }
i.pf2.action2:before { content: " "; }
i.pf2.action3:before { content: " "; }
i.pf2.actionF:before { content: " "; }
i.pf2.Reaction:before { content: " "; }

.tooltip{

	font-size: calc(10 * var(--midaLetra) / 18);
}
*{
	font-family: 'SabonLTSstd';
	box-sizing: border-box;
	color:var(--lowEmphasis);
}
a:not([href]){
	color: inherit;
	text-decoration: none;
}
a:not([href]):hover{
	color: inherit;
	padding-bottom: 2px;
		background-repeat: repeat;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 10 18'%3E%3Cstyle type='text/css'%3E.squiggle%7Banimation:shift .5s linear infinite;%7D@keyframes shift %7Bfrom %7Btransform:translateX(-10px);%7Dto %7Btransform:translateX(0);%7D%7D%3C/style%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.38)' stroke-width='1' class='squiggle' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5' /%3E%3C/svg%3E");
}
strong{
	color:var(--mhighEmphasis);
}
td > strong {
	color:var(--lowEmphasis);
}
html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 70px;
  background-color:  var(--backMainColor);
}
footer.principal{
	  position: absolute;
	  bottom: 0;
	  left:0;
	  width: 100%;
	  height: 60px;
	  color:var(--mainColor);
	  font-size: calc(1 * var(--midaLetra) / 2);
}
/*MODALS*/
h3.modal-title strong{
	font-family: 'knemabold';
}
.modal-body > ul{
	padding-left: 0;
}
/*BARRA TITULO*/
h1.mainTitle{
	cursor:pointer;
}
.btn-light{
	background-color:var(--12dp);
	color:var(--lowEmphasis);
	border:none;
}
.btn-light:hover{
	background-color:var(--24dp);
}
.btn-light:active{
	background-color:var(--36dp);
	border:none;
	outline:none;
	/*box-shadow:none;*/
	box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.22) !important;
}
.btn-light:focus{
	background-color:var(--48dp) !important;
	border:none;
	outline:none;
	box-shadow:none;
	/*box-shadow: 0px 0px 6px 2px rgba(255,255,255,0.2) !important;*/
}
h1.mainTitle > span{
	font-family: 'sketch_gothic_schoolregular';
	color:var(--mainTitle);
	font-size:calc(1.3 * var(--midaLetra));
	/*cursor:context-menu;*/
}
h1.mainTitle > span.special{
	font-family: 'wolf_in_the_cityregular';
	color:var(--mainTitle);
	font-size:var(--midaLetra);
	margin-right: calc(1 * var(--midaLetra) / 36);

	text-shadow:  calc(1 * var(--midaLetra) / 90)  calc(1 * var(--midaLetra) / 90) 0px rgba(0,0,0,0.2);
}
/*MENU DE LINKS*/
aside.linkR{
	position: absolute;
	right:calc(1 * var(--midaLetra) / 6);
	top:calc(1 * var(--midaLetra) / 6);
	display:flex;
	flex-direction:row;
	justify-content: flex-end;

}
aside.linkR nav.dropdown-menu{
	width: calc(70 * var(--midaLetra) / 9) !important;
	font-size:calc(5 * var(--midaLetra) / 6);
	background-color:var(--8dp);
}
aside.linkR nav > a{
	padding:calc(2 * var(--midaLetra) / 9) calc(5 * var(--midaLetra) / 9);
}
aside.linkR nav > a:hover, aside.linkR nav > div:hover{
	background-color: var(--24dp);
}

aside.linkR nav > a:hover *, aside.linkR nav > div:hover *{
	color: var(--highEmphasis);
}
aside.linkR nav span{
	font-family: 'knemabold';
	margin-right: calc(5 * var(--midaLetra) / 9);
}
#FSRange::-webkit-slider-thumb, .custom-range.DC1to2::-webkit-slider-thumb{
	background:#7c8949;
}
#CSRange::-webkit-slider-thumb{
	background:var(--mainTitle);
}

/*BARRA DE BUSQUEDA*/
#text_search {
	position:relative;
	box-shadow:none;
	outline:none;
	border:1px solid rgba(255,255,255,0.33) !important;
	font-size:calc(7 * var(--midaLetra) / 9);
	background: var(--backMainColor) url(/img/search-duotoneD3.svg) no-repeat calc(100% - 10px) center;
	background-size:  auto 50%;
	color:var(--lowEmphasis);
}
#text_search:focus{
	box-shadow:none;
	outline:2px solid rgba(56,140,104,0.33);
}
/*RESULTADOS BUSQUEDA*/
#list-results{
	font-size:calc(11 * var(--midaLetra) / 18);
	padding-left:calc(5 * var(--midaLetra) / 18);
}
button.listado{
	background-color:var(--4dp);
}
button.listado:hover, button.listado:focus{
	background-color:var(--12dp);
}
button.listado:focus, button.listado:active, button.listado:hover{
	border:none !important;
	outline-color:#7c8949;
	box-shadow:none !important;
}
button.listado > small{
	font-family: 'GoodOT_Bold';
	text-transform: uppercase;
	color: var(--rojoTitulo);
}

#opciones{
	width: calc(100 * var(--midaLetra) / 6) !important;
	font-size:calc(5 * var(--midaLetra) / 6);
	border:0;
	background-color:transparent !important;
}
#opciones button{
	margin-left:1em;
}
/*ADVERTISEMENT*/
#ad{
	background-color: var(--patreon);
	color:var(--highEmphasis);
	font-size:1em;
	border-radius: 1em;
}
#ad *{
	color:var(--lowEmphasis);
}
#ad a{
	color:var(--patreonLink);

}
#ad h3 strong{
	color:var(--highEmphasis) !important;
}
/*RESULTADO*/
#mainContainer{
	margin-top:calc(5 * var(--midaLetra) / 9);
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-wrapper{
	overflow: visible;
}
.swiper-slide{
	overflow: visible;
}
.swiper-pagination-bullet
{
	background-color:var(--swiperButtons);
}
.swiper-button-prev{
	position: fixed !important;
	color:var(--swiperButtons) !important;
	background:none;
	top:50%;
}
.swiper-button-next{
	position: fixed !important;
	color:var(--swiperButtons) !important;
	background:none;
	top:50%;
}
/*PARTE FEATURE*/
article.result {
	background-color:var(--2dp);
	padding-top:15px;
	padding-right:15px;
	overflow: visible;
	border-radius:0.33em;
	box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.5);
}
div.modal-header{
	background-color:var(--8dp);
	border-bottom:none;
}
div.modal-body{
	background-color:var(--4dp);
}
div.modal-footer{
	background-color:var(--6dp);
	border-top:none;
}
div.modal-body article.result {
	box-shadow: none;
	background-color:transparent !important;
}
/*PARTE CABECERA FEATURE*/
article.result  header{
	margin-bottom:0em;
	position:relative;
	z-index:3;
}
article.result  header > h1, article.result  header > h2{
	font-family: 'GoodOT_CondBold';
	font-size: calc(10 * var(--midaLetra) / 9);
	margin-bottom:0;
	padding-bottom:calc(1 * var(--midaLetra) / 18);
}
article.result  header > h1{
	color:var(--vhighEmphasis);
}
article.result header > h2{
	text-align: right;
}
article.result header button.options{
	background-color: transparent;
	outline:none;
	border:none;
}

/*PARTE FILA DE RASGOS*/
article.result section.traits, article.result section.traitsExtra{
	border-top:1.5px solid var(--mlowEmphasis);
	/*position:relative;*/
	padding-top:calc(1 * var(--midaLetra) / 18);
	margin-top:calc(-5 * var(--midaLetra) / 18) !important;
	z-index:2;
}
article.result section.traits > div, article.result section.traitsExtra > div{
	background-color: var(--backTraits);
}
article.result section.traits > div > h3, article.result section.traitsExtra > div > h3{
	font-family: 'GoodOT_CondBold';
	font-size: calc(1 * var(--midaLetra) / 2);
	background-color: var(--rojoDes);
	color:var(--highEmphasisL);
	margin:0.1em 0.15em 0.1em 0.15em;
	padding:0.2em 0.5em;
	cursor:help;
}
article.result section.traits > div > h3.rarity, article.result section.traitsExtra > div > h3.rarity{
	background-color: var(--rarity);
	color:var(--lowEmphasis);
}
article.result section.traits > div > h3.rarity.rare, article.result section.traitsExtra > div > h3.rarity.rare{
	background-color: var(--rare);
	color:var(--lowEmphasis);
}
article.result section.traits > div > h3.settlement, article.result section.traitsExtra > div > h3.settlement{
	background-color: var(--settlement);
}
article.result section.traits > div > h3.rarity.unique, article.result section.traitsExtra > div > h3.rarity.unique{
	background-color: var(--unique);
	color:var(--lowEmphasis);
}
article.result section.traits > div > h3.alignment, article.result section.traitsExtra > div > h3.alignment{
	background-color: var(--alignment);
}
article.result section.traits > div > h3.size, article.result section.traitsExtra > div > h3.size{
	background-color: var(--size);
}
article.result section.traits > div > h3.nonPaizo, article.result section.traitsExtra > div > h3.nonPaizo{
	background-color: var(--nonPaizo);
}
/*PARTE DESCRIPCION*/

section.content > h2, section.description > h2{
	font-family: 'GoodOT_CondBold';
	font-variant: small-caps;
	font-size: calc(10 * var(--midaLetra) / 9);
	color:var(--encabezado2);
	margin-top:0.5em;
	margin-bottom:0;
}
section.description > h2{
	margin-top:0;
	margin-bottom:-0.5em;
}
section.content > h2 > em{
	font-family: 'GoodOT_CondBold' !important;
	font-style:normal !important;
}
section.content h3 > em{
	font-style:normal !important;
	font-family:inherit !important;
	font-weight:inherit !important;
	color:inherit !important;
}
section.content > p, section.content li{
	font-family: 'SabonLTSstd';
	/*font-family: 'GoodOT';*/
	font-size: calc(2 * var(--midaLetra) / 3);
	text-align:justify;
}

section.content {
  border-top: none;
  display: block;
  flex-direction:column;
    justify-content: start;
    align-items: start;
  overflow-x: auto;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}
section.content::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
section.content.extra {
	border-top:1.5px solid var(--vlowEmphasis);
}
section.content ~ section.content {
  border-top: 1.5px solid var(--vlowEmphasis);
}

section.content p{
	margin:0;
	padding:0;
}


p.fancy{
	margin:0;
	padding:0;
	font-family: 'SabonItalic' !important;
	padding:0.5em 0;
	font-size:calc(3 * var(--midaLetra) / 4);
	border-bottom:1.5px solid var(--vlowEmphasis);
	margin-bottom: 0.5em;

}
section.description > p{
	border-bottom:none;
	padding:0.5em;
	margin:0.5em;

	font-family: 'SabonItalic' !important;

	font-size:calc(2 * var(--midaLetra) / 3);

	margin-bottom: 0.5em;
}
section.content p:not(:first-child) {
	text-indent:1em;
}


/*PARTE DE PRERREQUISITOS, ETC.*/
section.details{
	border-bottom:1.5px solid var(--vlowEmphasis);
	position:relative;
}
section.details.addon{
	border-bottom:none;
	border-top:1.5px solid var(--vlowEmphasis);
	position:relative;
	padding-top:1em;
	margin-top:1em;
}
section.details.addon *{
	font-size: calc(4 * var(--midaLetra) / 7);
}
section.details > p{
	font-family: 'GoodOT';
	font-size: calc(2 * var(--midaLetra) / 3);
	text-indent: -1em;
	margin-left: 1em;
	margin-bottom:0;
	text-align: justify;
}
section.details p:not(:first-child) {
	text-indent:-1em;
}
ul + p:not(.tab0):not(.tab5), p.tab0 + p:not(.tab0):not(.tab3):not(.tab4):not(.tab5), ol + p:not(.tab0), p.fancy + p:not(.tab0):not(.tab3) {
	text-indent:0 !important;
}

h2 + p:not(.tab0) {
	text-indent:0 !important;
}
p.tab0 {
	text-indent: 0 !important;
	margin-left: 0 !important;
}
p.tab1 {
	text-indent: 0;
}
p.tab2{
	margin-left:1em !important;
	text-indent:0em !important;
}
section.content.extra > p{
	text-indent: 0;
}
section.content.extra > p.tab1{
	text-indent: 1em;
}
p.tab3{
	text-indent:1em !important;
	margin-left:1em !important;
}
p.tab4{
	margin-left:1em !important;
	text-indent: -1em !important;
}
p.tab5{
	text-indent:1.3em !important;
	margin-left:1.3em !important;
}
/*Bloques Info*/
section.content > aside.info{
	background-color: var(--6dp);
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
	padding:0.5em 1em;
	/*display: inline-block;*/
	margin: 2em auto;
	max-width:80%;
	border-radius: 0.3em;
	display:flex;
	flex-direction:column;
}
section.content > aside.info *{
	font-family: 'GoodOT';
	font-size: calc(2 * var(--midaLetra) / 3);
	text-align: justify;
}
section.content > aside.info > p{
	text-indent: 0;
}
section.content > aside.info > h3{
	font-family: 'GoodOT_Bold';
	text-align:center;
	margin-bottom:0;
	color: var(--highEmphasis);
}
section.content > aside.info.L > h3{
	text-align:left;
}
h3.subtitle{
	margin-top:-0.3em !important;
	font-family: 'GoodOT_Bold';
	font-variant: small-caps;
	font-size: calc(7 * var(--midaLetra) / 9);
	border-bottom:1px solid var(--vlowEmphasis);
}
/*Tables*/
	section.content table{
		/*margin-left:-9px;*/
		z-index: 5;
		margin:0.5em 0 1em 0;
		margin-left:auto;
		margin-right:auto;
		box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
	}
	article.result table *{
		font-family:'GoodOT';
	}
	article.result table > caption{
		text-transform: uppercase;
		color:var(--mhighEmphasis);
		 font-family: 'GoodOT_CondBold';
		 font-size: calc(8 * var(--midaLetra) / 9) !important;
		caption-side: top;
		padding-bottom:0;
		line-height:1em;
	}
	article.result table > tfoot {
		background-color:var(--8dp);
		font-size: calc(9 * var(--midaLetra) / 16);
		line-height:1.5em;
	}
	article.result table > tfoot > tr > td{
		font-family: 'GoodOT' !important;
		padding-left:0.5em;
		color:var(--lowEmphasis);
	}
	article.result table > thead > tr, article.result table > tbody > tr.header, article.result table > tbody > tr.heading {
		background-color:rgba(0,42,0,0.33) !important;
		padding-top: 0.1em;
		padding-bottom: 0.1em;
	}
	/*article.result table > thead > tr > th, article.result table > tbody > tr.header > td, article.result table > tbody > tr.heading > td{
		color:var(--highEmphasis) !important;
	} */
	article.result table > tbody > tr:nth-child(even) {
		background-color: var(--4dp);
	}
	article.result table > tbody > tr:nth-child(odd) {
		background-color: var(--6dp);
	}
	article.result  table > tbody > tr.even,article.result table > tbody > tr.even,article.result table > tbody > tr.even > td  {
		background-color: var(--4dp) !important;
	}
	article.result  table > tbody > tr.odd,article.result table > tbody > tr.odd,article.result table > tbody > tr.odd > td  {
		background-color: var(--6dp) !important;
	}
	article.result table > tbody > tr > td {
		font-family: 'GoodOT';
		text-align:center;
		vertical-align: top;
		color:var(--mlowEmphasis);
		padding:0 0.4em;
		font-size: calc(9 * var(--midaLetra) / 16);
	}
	article.result table > thead > tr > th, article.result table > tbody > tr.header > td, article.result table > tbody > tr.heading > td {
		font-family: 'GoodOT_CondBold';
		color:var(--lowEmphasis);
		text-align:center;
		vertical-align: bottom;
		padding:0.1em 0.4em;
		line-height: 1.2em;
		font-size: calc(2 * var(--midaLetra) / 3);
	}
	article.result table.justo > thead > tr > th, article.result  table.justo > tbody > tr > td{
		text-align:justify;
	}
	article.result table > tbody > tr.extra {
		background-color:var(--tablaExtra);
	}
	article.result table > tbody > tr.extra >  td {
		font-family: 'GoodOT_Bold';
		font-size: calc(9 * var(--midaLetra) / 16);
	}
	article.result table > tbody > tr > td:first-child {
		text-align:left;
	}
	article.result table:not(.important) > tbody > tr > td:first-child {
		white-space: nowrap;
	}
	article.result table > thead > tr > th:first-child {
		text-align:left;
		padding:0.1em 1.8em 0.1em 0.4em;
	}
/*TABLE.extra*/
table.extra{
	/*margin-left:-9px;*/
	z-index: 5;
	margin:0.5em 0 1em 0;
	width:100%;
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
}
table.extra > caption *{
	text-transform: uppercase;
	color:var(--highEmphasis);
	 font-family: 'GoodOT_CondBold';
	 font-size: calc(8 * var(--midaLetra) / 9) !important;
	caption-side: top;
	padding-bottom:0;
	line-height:1em;
}
table.extra tr td{
	text-align: center;
	font-family: 'GoodOT';
	vertical-align: top;
	color:var(--mlowEmphasis) !important;
	padding:0 0.4em;
	font-size: calc(9 * var(--midaLetra) / 16);
}
table.extra tr.title td{
	font-size: calc(2 * var(--midaLetra) / 3);
}
table.extra tr td:first-child{
	text-align:left;
	white-space:nowrap;
}
table.extra.minimo{
	width:initial !important;

}
table.extra.minimo tr td:first-child{
	white-space:normal !important;
}
table.extra.minimo tr td{
	/*white-space:nowrap !important;*/
	width:initial !important;
}
table.extra tr td:nth-child(3){
	text-align:left;
}
table.extra tr td:last-child{
	text-align:justify;
}
table.extra > tbody > tr.light {
	background-color: var(--4dp) !important;
}
table.extra > tbody > tr.dark {
	background-color: var(--6dp) !important;
}
/*article.result  table > tbody > tr.light > td{
	color: var(--lowEmphasis) !important;
}*/
table.extra tr.title {
	background-color:rgba(0,42,0,0.33) !important;
}
table.extra tr.title > td{
	font-family: 'GoodOT_CondBold' !important;
	color:var(--lowEmphasis) !important;
	vertical-align: bottom !important;
	line-height: 1.2em !important;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	/*font-size: calc(2 * var(--midaLetra) / 3);*/
}
table.extra.abilities tbody{
	border-bottom:1px solid var(--1dp);
}
table.extra.abilities td{
	border-right:1px solid var(--1dp);
	border-left:1px solid var(--1dp);
	vertical-align: middle;
}
table.extra.abilities td{
	text-align: center !important;
}
table.extra.abilities td:last-child{
	text-align: left !important;
}
table.extra.proficiencies{
	margin:0.5em auto 1em auto !important;
	width:auto !important;
}
table.extra.proficiencies tbody{
	border-bottom:1px solid var(--1dp);
	border-right:1px solid var(--1dp);
}
table.extra.proficiencies tr.main td:first-child{
	/*width:1% !important;*/
	white-space: nowrap !important;
	text-align:left !important;
	padding-left:0.2em;
}
table.extra.proficiencies tr.main {
	border-right:1px solid var(--1dp);
}
table.extra.proficiencies tr:not(.main) td:not(:last-child){
	/*width:1em !important;*/
	white-space: normal;
	text-align:center;
	border-left:1px solid var(--1dp);
	border-right:1px solid var(--1dp);

}
table.extra.proficiencies tr:not(.main) td:last-child{
	/*width:100% !important;*/
}
/*TABLE.important*/
	table.important{
		/*border:4px solid var(--bordeAmarillo) !important;*/
		box-shadow: 0px 8px 12px 4px rgba(0,0,0,0.5);
		margin:1em !important;
	}
	table.important td{
		background-color: var(--rojoNormal) !important;
		width: 50% !important;
		color:var(--highEmphasis) !important;
		padding:0.5em 2.2em 1.8em 2.2em !important;
		position:relative;
	}
	table.important >tbody > tr > td:first-child:after {
	    content: ""; /* This is necessary for the pseudo element to work. */
	    position:absolute;
	    display:block;
	    top:5%;
	    right:0;
	    width:100%;
	    height: 90%;
	    border-right:4px solid var(--bordeAmarillo) !important;
	}
	table.important td:last-child{
		text-align: left!important;
	}
	table.important td  h3{
		font-family: 'GoodOT_CondBold' !important;
		font-size:calc(9 * var(--midaLetra) / 10) !important;
		margin-bottom:0;
		color:var(--highEmphasis) !important;
	}
	table.important td h2 {
		font-family: 'GoodOT_CondBold' !important;
		font-size:calc(11 * var(--midaLetra) / 10) !important;
		margin-bottom:0.5em;
		color:var(--highEmphasis) !important;
	}
	table.important p{
		text-indent: 0 !important;
		font-family: 'GoodOT' !important;
		font-size:calc(12 * var(--midaLetra) / 16) !important;
		line-height: 1.2em;
		color:var(--lowEmphasis) !important;
	}
/*TABLE SPECIAL*/
	table.special{
		z-index: 5;
		margin:0.5em 0 1em 0 !important;
	}
	table.special > tbody > tr {
		background-color: transparent !important;
	}
	table.special > tbody > tr > td {
		font-family: 'GoodOT';
		text-align:left !important;
		vertical-align: top;
		color:var(--highEmphasis);
		padding:0 0.4em;
		font-size: calc(8 * var(--midaLetra) / 8) !important;
	}
/*TABLE MODALS*/
	div.modal table{
		z-index: 5;
		margin:0.5em 0 1em 0;
		margin-left:auto;
		margin-right:auto;
		box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
	}
	div.modal  table > caption{
		text-transform: uppercase;
		color:var(--highEmphasis);
		 font-family: 'GoodOT_CondBold';
		 font-size: calc(8 * var(--midaLetra) / 9);
		caption-side: top;
		padding-bottom:0;
		line-height:1em;
	}
	div.modal table > tfoot {
		background-color:var(--8dp);
		font-size: calc(9 * var(--midaLetra) / 16);
		line-height:1.5em;
	}
	div.modal table > tfoot > tr > td{
		font-family: 'GoodOT' !important;
		padding-left:0.5em;
		color:var(--lowEmphasis);
	}
	div.modal table > thead > tr, div.modal table > tbody > tr.header, div.modal table > tbody > tr.heading {
		background-color:rgba(0,42,0,0.33) !important;

	}
	/*div.modal table > thead > tr > th, div.modal table > tbody > tr.header > td, div.modal table > tbody > tr.heading > td{
		color:var(--highEmphasis) !important;
	} */
	div.modal table > tbody > tr:nth-child(even) {
		background-color: var(--4dp);
	}
	div.modal table > tbody > tr:nth-child(odd) {
		background-color: var(--6dp);
	}
	div.modal  table > tbody > tr.even {
		background-color: var(--4dp);
	}
	div.modal  table > tbody > tr.odd {
		background-color: var(--6dp);
	}
	div.modal table > tbody > tr > td {
		font-family: 'GoodOT';
		text-align:center;
		vertical-align: top;
		color:var(--mlowEmphasis);
		padding:0 0.4em;
		font-size: calc(9 * var(--midaLetra) / 16);
	}
	div.modal table > thead > tr > th, div.modal table > tbody > tr.header > td, div.modal table > tbody > tr.heading > td {
		font-family: 'GoodOT_CondBold';
		color:var(--lowEmphasis);
		text-align:center;
		vertical-align: bottom;
		padding:0 0.4em;
		line-height: 1.2em;
		font-size: calc(2 * var(--midaLetra) / 3);
	}
	div.modal table.justo > thead > tr > th, div.modal  table.justo > tbody > tr > td{
		text-align:justify;
	}
	div.modal table > tbody > tr.extra {
		background-color:var(--tablaExtra);
	}
	div.modal table > tbody > tr.extra >  td {
		font-family: 'GoodOT_Bold';
		font-size: calc(9 * var(--midaLetra) / 16);
	}
	div.modal table > tbody > tr > td:first-child {

		text-align:left;
	}
	div.modal table > thead > tr > th:first-child {
		text-align:left;
		padding:0 1.8em 0 0.4em;
	}
/*MODALS*/
	div.modal p{
		font-family: 'GoodOT';
		font-size: calc(9 * var(--midaLetra) / 16);
		text-align: justify;
	}
article.result footer {
	border-top:2px solid var(--1dp);
	padding-top:0.5em;
}
article.result footer div.source{
	font-family: 'GoodOT';
	font-size: calc(1 * var(--midaLetra) / 2);
}
.popover{
    max-width: calc(10 * var(--midaLetra) );
}
.popover-header, .popover-body {
    font-size: calc(1 * var(--midaLetra) / 2);
}

article.result footer div.source a {
  /*font-size: 40px;*/
  color:var(--linkSource);
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  font-weight: bold;
}
article.result footer div.source a:after {
  content: '';
  width: 20%;
  height: 100%;
  position: absolute;
  left: auto;
  top: 0;
  bottom: 0;
  right: -20%;
  background-image: linear-gradient(135deg, rgba(35, 41, 38, 0), rgba(35, 41, 38, 0.8), rgba(35, 41, 38, 0));
}
article.result footer div.source a:hover:after {
  transition: all .4s ease-out;
  right: 100%;
}

/*LINKS GENERALES*/
a.pi{
	color:var(--linkArrow);
	text-decoration: none;
}
a.pi:hover{
	color:var(--linkArrow2);
}
a.pi:active{
	color:var(--linkArrow3);
}

a.inner {
 font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--linkC) 0%,
       var(--linkC) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: inherit;
  text-decoration: none;
  transition: background-size .2s, margin 0.1s, padding 0.1s, color .1s, border-radius 0.5s;
  margin:0;
  padding:0;
  border-radius: 0;
}

a.inner:hover {
  background-size: 4px 50px;
  margin:-0.1em -0.2em;
  padding:0.1em 0.2em;
  border-radius: 0.2em;
  color:var(--highEmphasis);
}

a.outer {
 font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--link5) 0%,
       var(--link5) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: inherit;
  text-decoration: none;
  transition: background-size .2s, margin 0.1s, padding 0.1s, color .1s, border-radius 0.5s;
  margin:0;
  padding:0;
  border-radius: 0;
}

a.outer:hover {
  background-size: 4px 50px;
  margin:-0.1em -0.2em;
  padding:0.1em 0.2em;
  border-radius: 0.2em;
  color:var(--highEmphasis);
}

a.inner.spell{
	font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--link3C) 0%,
       var(--link3C) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: inherit;
  text-decoration: none;
}
a.inner.spell:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
}
/*td > a.inner.spell{
	font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--link3C) 0%,
       var(--link3C) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: inherit;
  text-decoration: none;
  transition: background-size .2s, color .1s;
}
td > a.inner.spell:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
}*/
a.inner.sheets{
	font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--link4) 0%,
       var(--link4) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: var(--link4);
  text-decoration: none;
}
a.inner.sheets:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
  margin:0;
  padding:0;
  border-radius: 0.2em;
}
a.inner.rule{
	font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--linkRules) 0%,
       var(--linkRules) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: inherit;
  text-decoration: none;
}
a.inner.rule:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
}
.gris a.inner{
font-family: inherit;
background:
linear-gradient(
to bottom, var(--linkGris) 0%,
var(--linkGris) 100%
);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 1.5px 1.5px;
color: inherit;
text-decoration: none;
}
.gris a.inner:hover {
background-size: 4px 50px;
color:var(--highEmphasis);
}
a.btn-inform2,a.btn-inform3 {
 cursor:help;
 font-family: 'GoodOT';
  background:linear-gradient(to bottom, var(--link2) 0%,var(--link2) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 1.5px 1.5px;
  color: inherit;
  text-decoration: none;
  transition: background-size .2s, margin 0.1s, padding 0.1s, color .1s, border-radius 0.5s;
  margin:0 -0.2em;
  padding:0 0.2em;
  border-radius: 0;
}

a.btn-inform2:hover, a.btn-inform3:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
  margin:-0.1em -0.2em;
  padding:0.1em 0.2em;
  border-radius: 0.2em;
  background:linear-gradient(to bottom, var(--link2) 0%,var(--link2) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
}
a.twitter{
	text-decoration: none;
	color:var(--twitter);
}
a.twitter:hover{
	color:var(--twitter2);
}
.red{
	color:var(--rojoNormal) !important;
}
.gris{
color:var(--linkGris);
}
article.result strong{
	font-family: 'GoodOT_Bold' !important;
	font-weight: normal !important;
}
article.result strong > em{
	font-family: 'GoodOT_Bold' !important;
	font-weight: normal !important;
	font-style:normal !important;
}
img.logo{
	margin-left:0.5em;
	margin-bottom:0.2em;
	height:1em;
}
span.accordion-body{
	margin-left:0.5em;
	text-indent: 0;
	font-family: 'GoodOT';
	color:var(--link3);
}

button.toggle-button {
  margin:0;
  padding:0;
  border:none;
  background-color:transparent;
  outline:none !important;
  font-family: 'GoodOT';
  color: var(--link3);
  position: relative;
  text-decoration: none;
  transition: color .4s ease-out;
}

button.toggle-button:hover {
  color: var(--link);
  right: 0;
  text-decoration: none;
}

button.toggle-button:hover:after {
  border-color: var(--link);
  right: 0;
}

button.toggle-button:after {
  border-radius: 1em;
  border-top: .1em solid var(--link3);
  content: "";
  position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
  transition: right .4s cubic-bezier(0,.5,0,1),
              border-color .4s ease-out;
}

button.toggle-button:hover:after {
  animation: anchor-underline 2s cubic-bezier(0,.5,0,1) infinite;
  border-color: var(--link);
}

@keyframes anchor-underline {
  0%, 10% {
    left: 0;
    right: 100%;
  }
  40%, 60% {
    left: 0;
    right: 0;
  }
  90%, 100% {
    left: 100%;
    right: 0;
  }
}
section.details  li{
	font-family: 'GoodOT' !important;
	font-size: calc(2 * var(--midaLetra) / 3) !important;
	text-align:justify !important;
}
section.details label{
	font-family: 'GoodOT' !important;
	font-size: calc(2 * var(--midaLetra) / 3) !important;
	text-decoration: underline var(--link4C) dotted;
	text-indent: 0;

}

/*MENU DE LINKS DE CRIATURA*/
nav.criaturas{
	width: calc(57 * var(--midaLetra) / 9) !important;
	font-size:calc(5 * var(--midaLetra) / 6);
	background-color:#062900;
}
nav.criaturas > a{
	padding:calc(2 * var(--midaLetra) / 9) calc(5 * var(--midaLetra) / 9);
	background-color:#062900;
}
nav.criaturas > a >span {
	color:var(--highEmphasis);
}
nav.criaturas > a:hover{
	background-color:#1c3600;
}
nav.criaturas span{
	font-family: 'knemabold';
	margin-right: calc(5 * var(--midaLetra) / 9);
}
button.btn-circle{
	width: 3em !important;
	  height: 3em !important;
	  line-height: 3em !important;
	  text-align: center !important;
	  padding: 0 !important;
	  border-radius: 50% !important;
	  background-color:yellow;
}
button.btn-circle > svg{
	position: relative !important;
		top: 0.2em !important;
}
#masked-image {
    background: url(/img/grunge1.jpg) no-repeat center center;
    	background-size: cover;
    	color: white;
    	-webkit-text-fill-color: transparent;
    	-webkit-background-clip: text;
    	display: inline-block;
    	margin-right:0.2em;
}
#masked-image h1{
	font-family: 'GoodOT_CondBold';
	font-size: calc(10 * var(--midaLetra) / 9);
		text-align: center;
		-webkit-transition: text-shadow 1s ease;
		text-shadow: 0 0 1px rgba(0,0,0,.1);
		margin: 0;
		padding: 0;
}
#booksAccordion > div.card{
	margin-bottom:0.5em;
	border:none !important;
	background-color: var(--1dp);
	box-shadow:0px 2px 3px 1px rgba(0,0,0,0.33);
}
#booksAccordion > div.card > div.card-header{
	background-color: var(--1dp);
	/*margin-bottom:0;*/
	padding-bottom:0;
	padding-top:0;
	border:none !important;
	box-shadow:0px 2px 3px 1px rgba(0,0,0,0.33);
}
#booksAccordion > div.card > div.card-header > h2 > button > span {
	text-decoration: none;
	font-family: 'GoodOT_CondBold';
	font-size: calc(7 * var(--midaLetra) / 9);
	text-transform: uppercase;
	color:var(--highEmphasis);
}
#booksAccordion > div.card > div.card-header > h2 > button:hover,#booksAccordion > div.card > div.card-header > h2 > button:focus,#booksAccordion > div.card > div.card-header > h2 > button:active,#booksAccordion > div.card > div.card-header > h2 > button:visited, #booksAccordion > div.card > div.card-header > h2 > button:link{
	text-decoration:none;
	border:none;
	box-shadow:none;
}
#booksAccordion > div.card > div.collapse, #booksAccordion > div.card > div.collapse > div.card-body{
	background-color: var(--4dp);
}
#booksAccordion span.badge{
	color:var(--lowEmphasis);
	background-color:var(--8dp);
}
.popover{
    max-width: 800px; /* Max Width of the popover (depending on the container!) */
    background-color:var(--6dp);/*rgba(234,228,216,0.99);*/
    color:var(--lowEmphasisL);
    text-align: justify;
}
.popover-header{
	background:var(--12dp) !important;
	color:var(--highEmphasisL);
	border-bottom:1px solid var(--lowEmphasis);
}
label.nolink{
	font-family: inherit !important;
	font-size: inherit !important;
	margin:0;
	padding:0;
}
.highlight{
	border-radius:0.1em;
	padding:0.5em;
	margin-left:-0.5em;
	margin-right:-0.5em;
	animation-name: pinta;
	animation-duration: 1.5s;
	animation-iteration-count: 3;
}
@keyframes pinta{
	50%{
		background-color:rgba(90, 130, 81, 0.9);
		color:var(--highEmphasis);
	}
}
section.caja{
	display:inline-block;
	margin:2em 2.5em 5em 2.5em;
	background-color:var(--fondoBox);
	border:3em solid orange;
	border-image:url("/sheets/boxBorder2.png") 290 565 290 565 repeat;
	border-width: 3em 5.85em ;
	border-image-outset:3em 3em;
	/*outline:1px dotted red;*/
	padding:0;
}
section.caja.expande{
	height:76.5%;
}
section.caja > div:first-child{

	margin-top:-3.5em;
	margin-left:-7.5em;
	margin-right:-7.5em;
}
section.caja > div:last-child{
	margin-top:0.5em;
	margin-left:-7em;
	margin-right:-7em;
	margin-bottom:-5em;
}
section.caja .card-header{
	margin-right:0;
}
section.caja .card-body{
	background-color:var(--fondoBloques);
	margin-right:0;
}
section.caja h3{
	font-family: 'GoodOT_CondBold';
	color:var(--rojoDes);
	font-size:calc(5 * var(--midaLetra) / 6);
}
/*Rules*/
h1.titulo{
	font-family:Taroca !important;
	font-variant: small-caps;
	font-size: calc(14 * var(--midaLetra) / 9);
	color:var(--rojoTitulo) !important;
	margin-bottom:-0.3em !important;
	margin-top:1em;
	text-align:center;
}
h1.titulo:not(:first-child){
	background-color:var(--8dp);
	padding-top:0.2em;
}
h1.titulo:not(:first-child):has(+ p:not(.fancy)), h1.titulo:not(:first-child):has(+ section){
	position:relative !important;
	padding-bottom:0.2em;
	margin-bottom:0.5em;
	border:none;
	border-bottom:3px solid #161000;
}
h1.titulo:not(:first-child):has(+ p:not(.fancy))::after, h1.titulo:not(:first-child):has(+ section)::after {
    position:absolute;
    content:"";
    height:40px;
    width:100%; /* or i.e: 500px */
    background:url(/img/decoracionCajaD4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 25px;
    bottom:-21px;
    left:0;
}
article.result  header > h1.titulo{
	color:var(--rojoTitulo);
}
h2.monster{
	font-family:GoodOT_CondBold !important;
	text-transform: uppercase !important;
	font-size: calc(3 * var(--midaLetra) / 4) !important;
	font-variant: normal;
	color:var(--rojoDes) !important;
	margin-top:0.5em !important;
	margin-bottom:0 !important;
	padding-bottom: 0 !important;
}
h2.titulo{
	font-family:Taroca !important;
	font-variant: small-caps;
	font-size: calc(12 * var(--midaLetra) / 9) !important;
	color:var(--rojoTitulo) !important;
	margin-top:0.5em;
	margin-bottom:0 !important;
	padding-bottom: 0 !important;

}
h3.titulo{
	font-family:GoodOT_CondBold !important;
	text-transform: none;
	font-size: var(--midaLetra) !important;
	color:var(--rojoDes);
	margin-top:0.5em;
	margin-bottom:0;
}

h4.titulo{
	font-family:moonshiner !important;
	font-variant: small-caps;
	font-size: calc(10 * var(--midaLetra) / 9);
	color:var(--encabezado2);
	margin-top:0.3em;
	margin-bottom:0;
}
header > .titulo{
	margin-top:0;
	margin-bottom:0;
}
section.content .titulo + p:not(.fancy){
	margin:0 !important;
	padding:0 !important;
	text-indent:0 !important;
}
h5.titulo{
	font-family:GoodOT_CondBold !important;
	text-transform: uppercase;
	font-size: var(--midaLetra) !important;
	color:var(--mhighEmphasis);
	margin-top:0.5em;
	margin-bottom:0;
}
section.content h5.titulo + p{
	border-top: 1.5px solid var(--mhighEmphasis);
	padding-top:0.2em !important;
	margin-top:-0.2em !important;
}
aside.equation{
	background-color:var(--6dp);
	/*border-top:1.5px solid var(--bordeBloques);
	border-bottom:1.5px solid var(--bordeBloques);*/
	box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.5);
	padding:0.5em;
	margin:0.5em 0;
}
aside.equation >p{
	font-size: calc(2 * var(--midaLetra) / 3);
	font-family:GoodOT_Bold;
	text-align: center;
	color:rgba(151, 184, 144,0.8);
}
section.parents{
	padding-top:calc(1 * var(--midaLetra) / 18);
	margin-top:calc(-5 * var(--midaLetra) / 18);
	border-top: 1.5px solid var(--mlowEmphasis);
	border-bottom: 1.5px solid var(--mlowEmphasis);
	padding-left:0;
	margin-bottom:0.5em;
	font-family:GoodOT_Bold;
	font-size: calc(6 * var(--midaLetra) / 9) !important;
}
section.parents > a.rule{
	font-family:GoodOT_Bold;
	font-size: calc(6 * var(--midaLetra) / 9) !important;
}

/*SIDEBARS*/
h1.sidebar {
	font-family:GoodOT_Bold !important;
	text-transform: uppercase;
	font-size: calc(var(--midaLetra) * 8 / 9) !important;
	text-align: center;
	margin-bottom:0;
	color:var(--highEmphasis) !important;
}
h2.sidebar{
	font-family:GoodOT_Bold !important;
	font-size: calc(8 * var(--midaLetra) / 9) !important;
	text-align: center;
	margin-bottom:0;
	margin-top:0.5em;
}
h1.sidebar + p{
	margin:0 !important;
	padding:0 !important;
	text-indent:0 !important;
}
aside.sidebar p{
	font-family: GoodOT;
	font-size:calc(2 * var(--midaLetra) / 3);
	text-align: justify;
	border-bottom:none;
	margin-bottom:0;
}
aside.sidebar p:not(:first-child) {
	text-indent:1em;
}
aside.sidebar{
	display:inline-block;
	position:relative !important;
	border:1.5px solid #1F1D37;
	outline:1.5px solid #060C14;
	box-shadow: 0px 9px 12px 6px rgba(0,0,0,0.5);
	margin:2em;
	margin-bottom:3em;
	background-color:var(--8dp);
	padding:0;
	z-index:30;
}
aside.sidebar::after {
    position:absolute;
    content:"";
    height:40px;
    width:100%; /* or i.e: 500px */
    background:url(/img/decoracionCajaD4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 30px;
    bottom:-21px;
    left:0;
}
aside.sidebar::before {
    position:absolute;
    content:"";
    height:40px;
    width:100%; /* or i.e: 500px */
    background:url(/img/decoracionCajaD4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 30px;
    top:-21px;
    left:0;
}
aside.sidebar *{
	color:var(--lowEmphasis);
}
aside.sidebar > div:first-child{
	/*margin-top:-4.7em;
	margin-left:-7.2em;
	margin-right:-7.2em;
	margin-bottom:-5em;*/
}
aside.sidebar.full > div:first-child{
	margin-top:2em;
	/*	margin-right:-14.4em;*/
}
aside.sidebar div.body{
	max-width:calc(var(--midaLetra) * 16.1);
	padding:0 1.5em;
	margin-bottom:2em;
}
aside.sidebar.full div.body{
	max-width:calc(100% + 14.4em);
}
aside.full div.body{
	min-width:calc(100%) !important;
}
aside.sidebar.full{
	display:block;
	margin-top:3em !important;
	width:calc(100% - 6.8em) !important;
}
aside.sidebar ul{
	padding-left:1em !important;
	margin-bottom:0 !important;
	/*margin-left:-2em;*/
}
aside.sidebar ul li{
	font-family: 'GoodOT' !important;
	font-size: calc(2 * var(--midaLetra) / 3) !important;
	text-align:justify !important;
}

aside.resaltar{
	background-color: var(--8dp);
	margin:3.5em 2.5em 5em 2.5em;
	margin-left:3.5em !important;
	margin-bottom:3.5em !important;
	border:3em solid orange;
	border-image:url("/sheets/boxBorder5D.png") 290 565 290 565 repeat;
	border-width: 3em 5.85em ;
	border-image-outset:3em 3em;
	padding:0 !important;
	position:relative;
	clear:both;
}
aside.resaltar::after{
	content: "";
	background-image:url("/sheets/top-Border3D.png");
	background-position: top center; /* Center the image */
		background-repeat: no-repeat;
		background-size:10em;
	position:absolute;
	top:-5.98em;
	left:0;
	width:100%;
	height:10vh;
	z-index:10000000;
}
aside.resaltar > div.contenido{
	margin-top:-4.3em;
	margin-left:-6.2em;
	margin-right:-6.2em;
	margin-bottom:-4.5em;
}
aside.resaltar > div.contenido *{
	font-family: 'GoodOT';
	color:var(--highEmphasis) !important;
	font-size: calc(2 * var(--midaLetra) / 3);
	text-align:justify;
}
aside.resaltar > div.contenido> h3.titulo{
	text-align:center;
}
aside.resaltar > div.contenido> h4.titulo{
	font-size: calc(9 * var(--midaLetra) / 10);
	text-align:center;
}
aside.resaltar > div.contenido > .titulo{
	font-family:GoodOT_Bold !important;
}

aside.resaltar2{
	background-color:var(--8dp);
	margin:3.7em 2.5em 5em 2.5em;
	margin-left:3.5em !important;
	margin-bottom:3.5em !important;
	border:3em solid orange;
	border-image:url("/sheets/boxBorder2D3.png") 290 565 290 565 repeat;
	border-width: 3em 5.85em ;
	border-image-outset:3em 3em;
	padding:0 !important;
	position:relative;
	clear:both;
}
aside.resaltar2::after{
	content: "";
	background-image:url("/sheets/top-Border3D.png");
	background-position: top center; /* Center the image */
		background-repeat: no-repeat;
		background-size:10em;
	position:absolute;
	top:-5.98em;
	left:0;
	width:100%;
	height:10vh;
	z-index:10000000;
}
aside.resaltar2 > div.contenido{
	margin-top:-4.3em;
	margin-left:-6.2em;
	margin-right:-6.2em;
	margin-bottom:-4.5em;
}
aside.resaltar2 > div.contenido *{
	font-family: 'GoodOT';
	/*color:var(--highEmphasis);*/
	font-size: calc(2 * var(--midaLetra) / 3);
	text-align:justify;
}
aside.resaltar2 > div.contenido> h3.titulo{
	text-align:center;
	color:var(--highEmphasis);
	font-size: calc(8 * var(--midaLetra) / 9) !important;
	font-family: 'GoodOT_Bold';
}
aside.resaltar2 > div.contenido> h4.titulo{
	font-size: calc(9 * var(--midaLetra) / 10);
	text-align:center;
}
aside.resaltar2 > div.contenido > .titulo{
	font-family:GoodOT_Bold !important;
}
aside.resaltar2 > div.contenido > table{
	width:calc(100% + 2em);
	margin-left:-1em;
	margin-top:2em;
	/*padding-right:-5em;*/
}
aside.resaltar2 > div.contenido > table > caption {
		text-transform: uppercase;
		color:var(--highEmphasis);
		 font-family: 'GoodOT_CondBold';
		 font-size: calc(8 * var(--midaLetra) / 9) !important;
		caption-side: top;
		padding-bottom:0;
		padding-left:1em;
		line-height:1em;
}

sup{
	font-family: inherit;
}
div.important{
	border:4px solid var(--bordeAmarillo) !important;
	background-color: var(--rojoNormal) !important;
	min-width: 50% !important;
	max-width:80% !important;
	color:var(--highEmphasis) !important;
	padding:1em 2.2em 0.5em 2.2em !important;
	margin: 0.5em auto;
}
div.important *{
	text-transform: capitalize;
	font-family: GoodOT_CondBold !important;
	text-align: center;
	font-size:calc(13 * var(--midaLetra) / 10) !important;
}
p.fancy.rule{
	border:none;
	border-bottom:3px solid #5a605d;
	position:relative !important;
	margin-bottom:1.5em;
	font-weight:700;
	color:var(--mlowEmphasis);
	padding:15px 1em !important;
	background-color:var(--8dp);
	box-shadow:0 20px 13px -3px rgba(0,0,0,0.5);
}
p.fancy.rule.noborder{
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
	box-shadow: none;
}
p.fancy.rule:not(.noborder)::after {
    position:absolute;
    content:"";
    height:40px;
    width:100%; /* or i.e: 500px */
    background:url(/img/decoracionCajaD4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 25px;
    bottom:-21px;
    left:0;
}
p.fancy.rule:not(.noborder) + p {
	margin-top:1em;
}
section.content.extra.gris{
	color:#ccc;
}
aside.inCard{
	margin:1em 0;
	padding:0;
}
aside.inCard > header{
	border-bottom:1px solid var(--highEmphasis);
}
aside.inCard > header > h1, aside.inCard > header > h2{
	font-size: calc(6.5 * var(--midaLetra) / 9);
	padding-bottom: 0;
	margin-bottom:-5px;
}
aside.inCard > section * {
	font-family: 'GoodOT';
}
aside.inCard > section, aside.inCard > section.content.extra {
	border-width: 1px;
}
aside.inCard > section.details{
	/*padding-left: 2em;*/
}
aside.inCard > section.traits{
	border-top: none;
	position:relative;
	padding-top:calc(1 * var(--midaLetra) / 18);
	margin-top:0;
	margin-bottom:calc(4 * var(--midaLetra) / 18);
	top:calc(4 * var(--midaLetra) / 18);
}
section.traitsExtra + section.details p:not(:first-child) {
	text-indent:-1em;
	margin-left:1em;
}
aside.inCard > section.traits + section.details p:not(:first-child) {
	text-indent:0;
	margin-left:0;
}
section.traitsExtra + section.details p:first-child{
	margin-left:1em;
}
aside.inCard > section.traits + section.details p:first-child {
	/*margin-left:0;*/
}
/*diceRoller*/
#diceRoller{
	border-radius: 0.5em 0 0 0.5em;
	padding:0.2em 0.5em;
	padding-right:0;
	background-color:var(--mainColor);
	position:fixed;
	top:calc(100% - calc(0.1 * var(--midaLetra) * var(--sizeDice) / 1) - 4em) ;
	height:calc(0.1 * var(--midaLetra) * var(--sizeDice) / 1 + 3em);
	width:calc(16 * var(--midaLetra) * var(--sizeDice) / 1);
	z-index: 100000000;
	overflow: hidden;
}
#diceRoller *{
	font-family:GoodOT;
	font-size:1.05em;
}
#diceRoller > footer {
	background-color:var(--mainColor);
	margin-bottom:calc(0.05 * var(--midaLetra) * var(--sizeDice) / 1) ;
	z-index:2000;
}
#diceRoller.oculto{
	right:calc(-16 * var(--midaLetra) * var(--sizeDice) / 1 + 3em);
	transition: top 0.2s,
				height 0.2s,
				right 0.2s 0.05s;
}
#diceRoller.noOculto{
	right:0;
	top:calc(100% - calc(10 * var(--midaLetra) * var(--sizeDice) / 1) - 4em);
	height:calc(10.1 * var(--midaLetra) * var(--sizeDice) / 1 + 3em);/*calc(13 * var(--midaLetra) / 1);*/
	transition: right 0.2s,
				top 0.3s 0.05s,
				height 0.3s 0.05s;
}
#diceRoller > header{
	position:absolute;
	color:var(--highEmphasis);
	height:calc(0.7 * var(--midaLetra) * var(--sizeDice) / 1 + 0.7em);
	margin:0;
	padding:0;
}
#diceRoller > header > h2{
	font-family:knemabold;
	font-size:calc(0.8 * var(--midaLetra) * var(--sizeDice) / 1);
	margin:0;
	padding:0;
}
#diceRoller.oculto > header{
	top:calc(-2 * var(--midaLetra) * var(--sizeDice) / 1);
	transition: top 0.05s;
}
#diceRoller.noOculto > header{
	top:0;
	transition: top 0.3s 0.05s;
}
#diceRoller ul{
	position:absolute;
	height:calc(100% - 1 * var(--midaLetra) * var(--sizeDice) / 1 - 3.1em);/*calc(10.1 * var(--midaLetra) / 1) !important;*/
	width:calc(15.6 * var(--midaLetra) * var(--sizeDice) / 1) ;
	top:calc(1 * var(--midaLetra) * var(--sizeDice) / 1);
	left:calc(0.2 * var(--midaLetra) * var(--sizeDice) / 1) ;
	border-radius:0.2em;
	background-color:transparent;
	overflow-y: auto !important;
	display: flex;
	flex-direction: column;
}
#diceRoller.oculto  ul{
	opacity:0;
	transition: opacity 0.05s;
	z-index:1999;
}
#diceRoller.noOculto  ul{
	opacity:1;
	transition: opacity 0.4s 0.05s;
}
#diceRoller  ul > li {
	background-color:#638371;
	padding:calc(0.1 * var(--midaLetra) * var(--sizeDice) / 1) calc(0.2 * var(--midaLetra) * var(--sizeDice) / 1);
	margin: 0;
	margin-top:1px;
	color:var(--highEmphasisL);
	border-radius: 0.1em;
}
#diceRoller  ul > li *{
	color:var(--highEmphasisL);
}
#relleno{
	height:calc(100% - 1 * var(--midaLetra) * var(--sizeDice) / 1);
	background-color:transparent !important;
}
#dice, #clearHistory, #resizeDiceRoller{
	font-size:1.25em;
	color:var(--highEmphasis);
	padding:0;
	border:0;
	background-color: transparent;
	margin:0;
	transition: color 0.3s ease-in-out;
}
#clearHistory{
	margin-right:1em;
	transition: color 0.3s ease-in-out;
}
#resizeDiceRoller{
	margin-right:1em;
	transition: color 0.3s ease-in-out;
}
#dice:hover{
	color:var(--rarity);
}
#clearHistory:hover, #resizeDiceRoller:hover{
	color:var(--rarity);
}
#dice_text{
	transition: all 0.30s ease-in-out;
	background-color:#21593b;
	color:var(--highEmphasis);
	border-color:var(--vlowEmphasisL);
}
#dice_text:focus{
  box-shadow: 0 0 5px rgba(40, 133, 5, 0.7);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(40, 133, 5, 0.7);
  background-color:#8da798;
  color:var(--highEmphasisL);
  border-color:var(--vlowEmphasis);
}
.crit{
	font-family:inherit;
	color:#076B07 !important;
	font-weight:700;
}
.fail{
	font-family:inherit;
	color:#c71b43 !important;
}
.gris2{
	color:var(--grey2) !important;
}
a.roll, a.roll2{
	cursor:url(/img/cursorRoll6.png), auto;
	font-family:inherit;
	font-size:inherit;
}
em.etiqueta1{
	font-family:GoodOT_CondBold !important;
	color:var(--rojoNormal) !important;
	margin-left:-0.1em;

}
.tooltip-inner em.etiqueta1{
	color:var(--rojoDes) !important;
	margin-left:-0.1em;
	margin-right:0.2em;
}
.tooltip-inner {
    max-width: 450px;
    background-color:var(--36dp);
    color:var(--highEmphasis);
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: var(--36dp) !important;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: var(--36dp) !important;
}
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: var(--36dp) !important;
}
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: var(--36dp) !important;
}
li.creature{
	color:var(--highEmphasis) !important;
	font-family:knemabold !important;
	background-color:transparent !important;
	padding-bottom:0 !important;
	padding-top:0 !important;
	padding-left:0  !important;
	margin-bottom:-0.2em !important;
	margin-top:0.2em !important;
}
button.copiar{
	background-color:transparent;
	border:0;
	padding:0;
	margin:0;
	display:none;
	color:var(--rojoNormal);
}
li.tirada:hover button.copiar{
	display:flex;
}
#tableHazard table{
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
}

#tableHazard thead > tr {
	background-color:var(--24dp);
}
#tableHazard tbody > tr:nth-child(odd) {
	background-color:var(--8dp);
}
#tableHazard tbody > tr:nth-child(even) {
	background-color:var(--6dp);
}
#tableHazard th{
	color:var(--lowEmphasis) !important;
}
#tableHazard td{
	color:var(--mlowEmphasis) !important;
}
h3.subtitle + img{
	background-color:var(--2dp) !important;
}
h3.modal-title > strong > span {
	color:var(--rojoTitulo) !important;
}
span.spoiler{
	text-transform: uppercase;
	font-family:olsentf;
	background-color:var(--rojoTitulo);
	color:var(--highEmphasis);
}
span.nonPaizo{
	text-transform: uppercase;
	font-family:olsentf;
	background-color:var(--nonPaizo);
	color:white;
}
span.rare{
	text-transform: uppercase;
	font-family:olsentf;
	background-color:var(--rare);
	color:var(--vlowEmphasis);
}
span.uncommon{
	text-transform: uppercase;
	font-family:olsentf;
	background-color:var(--rarity);
	color:var(--vlowEmphasis);
}
#sourceBooks ul{
	border:none;
	box-shadow:  0px 2px 3px 1px rgba(0,0,0,0.33);
	background-color:transparent;
}
#sourceBooks ul div.accordion{
	background-color:transparent;
	border:none;
}
#sourceBooks div.accordion div.card {
	border:none;
	box-shadow:  0px 2px 3px 1px rgba(0,0,0,0.33);
	background-color:transparent;
}
#sourceBooks div.accordion div.card div.card-header{background-color:transparent;}
#sourceBooks div.accordion div.card div.card-header button.btn-dark{
	background-color:var(--2dp);
	border:none;
	border-bottom:1px solid rgba(0,0,0,0.33);
}
#sourceBooks div.accordion div.card div.card-header button.btn-dark *{
	font-family: 'GoodOT_Bold';
	color:var(--lowEmphasis);
	font-size:calc(5 * var(--midaLetra) / 9);
}
#sourceBooks div.accordion div.card div.card-header button.btn-dark:hover, #sourceBooks div.accordion div.card div.card-header button.btn-dark:focus{
	background-color:var(--1dp);
	box-shadow:none;
}
#sourceBooks div.accordion div.card div.card-body, #sourceBooks div.accordion div.card div.card-body div.list-group {
	border:none;
	background-color:transparent;
}
#sourceBooks div.accordion div.card div.card-body div.list-group button{
	background-color:var(--6dp);
	border:none;
	border-bottom:1px solid rgba(0,0,0,0.23);
	color:var(--mlowEmphasis);
	font-family: GoodOT;
	font-size:calc(4 * var(--midaLetra) / 9);
}
#sourceBooks div.accordion div.card div.card-body div.list-group button:hover{
	background-color:var(--10dp);
}
#sourceBooks div.accordion div.card div.card-body div.list-group button:focus,#sourceBooks div.accordion div.card div.card-body div.list-group button:active{
	background-color:var(--16dp);
}
.dropdown-divider {
	border-top-color:var(--mlowEmphasis) !important;
}
textarea.form-control, #bugEmail{
	box-shadow:none;
	outline:none;
	background: var(--backMainColor);
	color:var(--lowEmphasis);
	border:1px solid rgba(255,255,255,0.33) !important;
}
textarea.form-control:focus{
	box-shadow:none;
	outline:2px solid rgba(101, 152, 78,0.33);
	background: var(--backMainColor);
	color:var(--lowEmphasis);
	border:1px solid rgba(255,255,255,0.33) !important;
}
table.transparent{
	box-shadow: none !important;
}
table.transparent *{
	background-color:transparent !important;
	font-family: GoodOt;;
	font-size: calc(2 * var(--midaLetra) / 3) !important;
	color:var(--lowEmphasis) !important;
}
table.transparent strong{
	font-family:GoodOt_Bold;
	color:var(--highEmphasis);
}
table.transparent tr > td:first-child{
	padding-right:0;
	padding-left:0;
}
#DC1to2,#GP1to2, .formulari{
	background-color:var(--8dp);
	margin:1em;
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
	border-radius: 0.3em;
}
#GP1to2{
	padding:0.3em 0;
}
#DC1to2 *, #GP1to2 *, .formulari *  {
	font-size:calc(2 * var(--midaLetra) / 3);
}
#DC1to2 label, #GP1to2 label, .formulari label{
	font-family: GoodOT_Bold;
	color:var(--lowEmphasis);
}
#DC1to2 label.resultado, .formulari label.resultado{
	color:var(--mhighEmphasis);
	font-size:3em;
	font-family: GoodOT_Bold;
	height:100%;
}
.formulari label.resultado2{
	color:var(--mhighEmphasis);	
	height:100%;
/*	color:rgba(0,0,0,0.6);*/
	font-size:1.8em;
	font-family: GoodOT_Bold;
}
#Lvl_formN, #DC_formN{
	height:100%;
	color:rgba(0,0,0,0.6);
	font-size:2.7em;
	font-family: GoodOT_Bold;
	text-align: center;
	background-color:var(--backMainColor);
	color:var(--lowEmphasis);
	border-radius:0.1em;
	width:1.3em;
	margin-left:0.2em;
}
#DC2eX_form{
	color:var(--mhighEmphasis) !important;
}
#DC2e_form{
	color:var(--highEmphasis) !important;
}
label.destaca_form{
	color:var(--rojoDes) !important;
}
input.coins{
	width:5em;
	margin-right:1em;
	border-radius:0.3em;
	background: var(--backMainColor);
	color:var(--lowEmphasis);
	box-shadow:none;
	outline:none;
	margin-left:0.2em;
}
input.coins:focus{
	box-shadow:none;
	outline:2px solid rgba(101, 152, 78,0.33);
}
#coins2_form{
	font-size:1.5em;
	color:var(--highEmphasis);
}
.custom-radio .custom-control-label::before {
    background-color: rgba(255,255,255,0.3);  /* orange */
}
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-color: var(--rojoTitulo);  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    /*background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E); */
    border-radius: 50%;
}
/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
    color: var(--rojoTitulo);
    background-color: var(--rojoNormal); /* red */
}

/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px var(--rojoNormal), 0 0 0 0.2rem rgba(0, 53, 0, 0.25); /* pink, 25% opacity */
}
small.PwL{
	margin-left:0.5em;
	font-family:albertus_mt;
	font-size:0.7em;
	color:var(--rojoTitulo);
	position: relative;
	bottom:0.1em;
}
.custom-switch .custom-control-label::before, .custom-switch .custom-control-label::after  {
	margin-left:calc(9 * var(--midaLetra) / 18);
	margin-top:calc(6 * var(--midaLetra) / 18);
	font-size:calc(8 * var(--midaLetra) / 18);
}
.custom-switch .custom-control-label::after  {
	background:#7c8949;
}
.custom-switch .custom-control-label::before  {
	background:var(--highEmphasisL);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after  {
	background:var(--mhighEmphasis);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before  {
	background:#7c8949;
}
.custom-switch span{
	margin-left:calc(9 * var(--midaLetra) / 18);
}
.custom-switch del{
	font-family: inherit;
}
.custom-switch .custom-control-input ~ .custom-control-label{
	color:var(--mlowEmphasisL);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label *{
	color:var(--highEmphasis);
}

a + label.nolink{
	margin-left:-0.8em !important;
}
sup.source{
	padding-left:calc(1em / 8) ;
	padding-top:0.5em;
	font-weight: 500;
	color:var(--vlowEmphasis);
	font-size:0.8em !important;
}
@media (hover: hover){
	/* For no mobile phones*/
.nomobil{
  	display:flex !important;
  }
  .mobil{
  	display:none !important;
  }
}
@media (hover: none) {
  /* For mobile phones: */
  .nomobil{
  	display:none !important;
  }
  .mobil{
  	display:flex !important;
  }
}
bdi{
		font-family: inherit;
		font-size: inherit;
	}
aside.skillActions{
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);
	font-size:calc(5 * var(--midaLetra) / 8);
	padding-left:0em;
	padding-bottom: 0.2em;
	background-color: var(--8dp);
	margin: 0.1em 0.4em;
	padding: 0 0.8em;
}
aside.skillActions *{
	color:var(--lowEmphasis);
    font-family: 'GoodOT';
}
aside.skillActions strong{
	color:var(--mhighEmphasis);
}
aside.skillActions h4{
	font-family:'GoodOT_Bold';
	font-size:calc(var(--midaLetra) * 7 / 9);
	color:var(--mhighEmphasis);
	background-color:var(--4dp);
	text-transform: uppercase;
	padding: 0.1em 0.4em;
	margin: 0 -0.65em;
}
aside.skillActions h4 *{
	color:var(--mhighEmphasis);
}
aside.skillActions > p{
	text-align:justify;
	text-indent:-1em !important;
    margin-left:1em;
	margin-bottom: 0;
}
aside.skillActions span.accordion-body{
	margin-left:0;
	color:var(--lowEmphasis);
}
button.skillActions{
    font-family:'olsentf';
    background-color:transparent;
	border:none;
	border-radius:0.2em;
	padding: 0 ;
	margin-left:0;
	margin-right:0;
	color:var(--tablaCabeza);
}
#btn_closeSkills,#btn_closeSkills:active,#btn_closeSkills:focus,#btn_closeSkills:hover{
	background-color: transparent;
	border: none;
	text-decoration: none;
	padding: 0;
	margin: 0;
	outline: 0;
    font-size:0.7em;
}
aside.skillActions span.accordion-body > p{
    text-indent:1em;
    margin-bottom:0;
}
aside.skillActions span.accordion-body > p > strong:first-child{
    margin-left:-1em;
}
table.tablesorter{
/*margin-left:-9px;*/
width:100%;
z-index: 5;
margin:0.5em 0 1em 0;
margin-left:auto; 
margin-right:auto;
margin-top:-1.8em;
}
table.tablesorter *{
font-family:'GoodOT';
}
table.tablesorter > caption{
text-transform: uppercase;
color:var(--highEmphasis) !important;
font-family: 'GoodOT_CondBold';
font-size: 2em;
caption-side: top;
padding-bottom:0;
line-height:1em;
}
table.tablesorter > tfoot {
background-color:var(--tablaFoot);	
font-size: calc(9 * var(--midaLetra) / 16);
line-height:1.5em;
}
table.tablesorter > tfoot > tr > td{
font-family: 'GoodOT' !important;
padding-left:0.5em;
}
table.tablesorter > thead > tr, table.tablesorter > tbody > tr.header, table.tablesorter > tbody > tr.heading {
background-color:rgba(0,42,0,0.33) !important;
}
table.tablesorter input, table.tablesorter select{
	box-shadow:none;
	outline:none;
	background: var(--1dp);
	color:var(--lowEmphasis);
	border:1px solid rgba(255,255,255,0.33) !important;
	transition: all 0.4s ease-in-out;
}
table.tablesorter input:focus{
	box-shadow:none;
	outline:2px solid rgba(101, 152, 78,0.33);
}
table.tablesorter > tbody > tr:nth-child(even) {
background-color: var(--4dp);
}
table.tablesorter > tbody > tr:nth-child(odd) {
background-color: var(--6dp);
}
table.tablesorter > tbody > tr.even {
background-color: var(--4dp);
}
table.tablesorter > tbody > tr.odd {
background-color: var(--6dp);
}
table.tablesorter > tbody > tr > td {
font-family: 'GoodOT';
text-align:center;
vertical-align: top;
color:var(--mlowEmphasis);
padding:0 0.4em;
font-size: 1em;
}
table.tablesorter > thead > tr > th, table.tablesorter > tbody > tr.header > td, table.tablesorter > tbody > tr.heading > td {
font-family: 'GoodOT_CondBold' !important;
background-color:transparent !important;
color:var(--lowEmphasis);
text-align:left;
vertical-align: bottom;
padding:0 0.4em;
line-height: 1.2em;
font-size: 1.2em;
}
table.tablesorter > tbody > tr.extra {
background-color:var(--tablaExtra);
}
table.tablesorter > tbody > tr.extra >  td {
font-family: 'GoodOT_Bold';
font-size: 1em;
}

.filterHead{
font-family:GoodOT;
padding-left:0.5em !important;
margin-top:-0.5em !important;
font-size:1.2em;
color:green var(--rojoNormal);
}

.text {
font-family:knemabold;
font-size:2em;
color: var(--mlowEmphasis);
display: inline-block;
margin-left: 5px;
}

.bounceball {
position: relative;
display: inline-block;
height: 37px;
width: 15px;
}
.bounceball:before {
position: absolute;
content: '';
display: block;
top: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--mlowEmphasis);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: bounce 500ms alternate infinite ease;
animation: bounce 500ms alternate infinite ease;
}

@-webkit-keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}

@keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
table.centered *{
	text-align: center !important;
}
ol{
	font-size: calc(2 * var(--midaLetra) / 3);
	border-top: 1px solid rgba(255,255,255,0.33);
	margin-bottom: 0;
}
ol *{
	font-family: inherit;
	font-size: calc(2 * var(--midaLetra) / 3);
}
ol > li::marker {
  font-weight: bold;
}
ol > p{
	margin-left: -1em !important;
}
.badge-danger{
	background-color:var(--backTraits);
}
.modal-xxl {
max-width: 90vw !important;
}
@media (min-width: 992px) {
.modal-xxl {
max-width: 85vw !important;
}
}

@media (min-width: 1200px) {
.modal-xxl {
max-width: 80vw !important;
}
}

label.form{
	color:var(--highEmphasis);
}

.custom-switch.rush .custom-control-label::before, .custom-switch.rush .custom-control-label::after  {
	margin-left:auto;
	margin-top:0.4em;
	font-size:auto;
}
.custom-switch.rush *{
	cursor:pointer;
	user-select: none;
}
.custom-switch.rush span{
	margin-left:auto;
	font-family: GoodOT_Bold;
}
.custom-switch.rush del{
	font-family: inherit;
}
.custom-switch.rush .custom-control-input ~ .custom-control-label{
	color:var(--mlowEmphasisL);
}
.custom-switch.rush .custom-control-input:checked ~ .custom-control-label{
	color:var(--highEmphasis);
}
.custom-switch.rush .custom-control-input:focus~.custom-control-label::before {
  border-color: var(--lowEmphasisL) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 75, 0, 0.25) !important;
}
.custom-switch.rush .custom-control-input:disabled~.custom-control-label::before {
/*		  border-color: rgba(255,255,255,0.3) !important;*/
  background-color: rgba(255,255,255,0.5) !important;
}
.custom-switch.rush .custom-control-input:checked~.custom-control-label::before {
  border-color: var(--lowEmphasisL) !important;
  background-color: var(--lowEmphasisL) !important;
}
label.notification{
	font-family:olsentf !important;
	color:var(--rojoTitulo);
	font-size:0.5em;
}
.erroneo{
	background-color:var(--rojoTitulo) !important;
	color:rgba(255,255,255,0.4) !important;
}
:is(.grid0, .grid1) .custom-radio .custom-control-label::before, :is(.grid0, .grid1) .custom-radio .custom-control-label::after  {
	height:1em;
	width:1em;
	top:0.2em;
	left:-1.2em;
}
:is(.grid0, .grid1) .custom-radio label{
	display:inline-block;
	font-size:0.9em;
}
div.comp_radio_size .custom-control-label{
	color:var(--mhighEmphasis);
}
div.comp_radio_size .custom-control-label::before, div.comp_radio_size .custom-control-label::after {
	top:0.5rem;
}
div.comp_radio_size .custom-control-label::before{
/*	background-color:rgba(255,255,255,0.66);*/
}
form.grid1{
	display:flex;
	flex-wrap:wrap;
	justify-items:space-between;
	align-items:stretch;
}
form.grid1 > div{
	flex-basis: 405px;
  	max-height: 320px;
  	flex-grow: 1;
	display:flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
form.grid0{
	display:flex;
	flex-wrap:wrap;
	justify-items:space-between;
	align-items:stretch;
}
form.grid0 > div{
	flex-basis: 450px;
  	
  	flex-grow: 1;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
	align-items: center;
}
#Prof_formN, #Crafter_formN, #Days_formN{
	height:100%;
	color:rgba(0,0,0,0.6);
	font-size:2.5em;
	font-family: GoodOT_Bold;
	text-align: center;
	background-color:rgba(255,255,255,0.5);
	border-radius:0.1em;
	width:1.2em;
	margin-left:0.2em;
}
#Days_formN{
	width:1.8em;
}
.custom-range::-webkit-slider-thumb {background: var(--rojoNormal);}
.custom-range::-moz-range-thumb {background: var(--rojoNormal);}
.custom-range::-ms-thumb {background: var(--rojoNormal);}
data{
	font-family: inherit;
}
.custom-control-label{
	user-select: none;
	cursor:pointer;
}
a.youtube{
	font-family:youtube;
	text-decoration: none;
	color:var(--linkSource);
}
a.youtube:hover{
	color:#FF0000;
}
data.infoExtra:before{
	content:'DC ';
	font-family:inherit;
	font-size:inherit;
}
#craft_quirk_btn{
	user-select: none;
	cursor:pointer;
	color:var(--link3);
}
#quirk_res{
	text-indent:1.5em !important;
	margin-left:1em !important;
	color:var(--link3);
}
button.craft{
	border-radius:33%;
	background-color:transparent;
	color:var(--rojoNormal);
	border:none;
	transition:all 0.5s cubic-bezier(.2,-0.36,.57,2);
}
button.craft:hover{
	transform:rotate(60deg);
}
#craftingModal div.modal p{
	font-size:calc(10 * var(--midaLetra) / 16) !important;
} 
#craftingModal .modal-body p{
	font-family:GoodOT;
}
#craftingModal .modal-body strong{
	font-family: 'GoodOT_Bold' !important;
	font-weight: normal !important;
}
label.adjustment{
	font-family: 'GoodOT_CondBold';
}

#craftingModal div.modal-header:has(>h1.modal-title){
	padding-top:0.1em;
	padding-bottom:0;
}
#craftingModal h2.modal-title{
	font-family:Taroca !important;
	font-variant: small-caps;
	font-size: calc(12 * var(--midaLetra) / 9) !important;
	color: var(--rare) !important;/*color:var(--rojoNormal);*/
}
#craft_name{
	font-family:GoodOT_Bold;
}
#craft_select{
	display:inline-flex;
}
#craft_select > button{
	background-color:transparent; 
	color:black; 
	border:1px dashed var(--rojoTitulo); 
	font-family:GoodOT;
	font-size: calc(9 * var(--midaLetra) / 16);
}
#craft_select a.dropdown-item{
	font-family:GoodOT;
	font-size: calc(9 * var(--midaLetra) / 16);	
}
#craft_select a.dropdown-item:not(.active):hover{
	background-color:var(--4dp);
}
#craft_select a.dropdown-item:not(.active):focus{
	background-color:var(--rojoNormal);
}
#craft_select a.dropdown-item.active{
	background-color:var(--rojoTitulo);
}
#craft_select div.dropdown-menu{
	background-color:var(--12dp);
}
.rocker {
  display: inline-block;
  position: relative;
  /*
  SIZE OF SWITCH
  ==============
  All sizes are in em - therefore
  changing the font-size here
  will change the size of the switch.
  See .rocker-small below as example.
  */
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #888;
  width: 7em;
  height: 4em;
  overflow: hidden;
  border-bottom: 0.5em solid var(--6dp);
}

.rocker-small {
  font-size: 0.8em;
 /* Sizes the switch */
  margin: 1em;
  margin-top:-0.33em;
}

.rocker::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--36dp);
  border: 0.5em solid var(--6dp);
  border-bottom: 0;
}

.rocker input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-left,
.switch-right {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  width: 3em;
  transition: 0.2s;
  user-select: none;
  font-family:'GoodOT_CondBold';
}

.switch-left {
  height: 2.4em;
  width: 2.75em;
  left: 0.85em;
  bottom: 0.4em;
  background-color: var(--lowEmphasis);
  transform: rotate(15deg) skewX(15deg);
}

.switch-right {
  right: 0.5em;
  bottom: 0;
  background-color: var(--oldMain);/*#bd5757;*/
  color: #fff;
}

.switch-left::before,
.switch-right::before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 2.45em;
  bottom: -0.45em;
  background-color: #ccc;
  transform: skewY(-65deg);
}

.switch-left::before {
  left: -0.4em;
}

.switch-right::before {
  right: -0.375em !important;
  background-color: transparent;
  transform: skewY(65deg);
}

input:checked + .switch-left {
  background-color: var(--coreMain);/*#0084d0;*/
  color: #fff;
  bottom: 0px;
  left: 0.5em;
  height: 2.5em;
  width: 3em;
  transform: rotate(0deg) skewX(0deg);
}

input:checked + .switch-left::before {
  background-color: transparent;
  width: 3.0833em;
}

input:checked + .switch-left + .switch-right {
  background-color: #ddd;
  color: #888;
  bottom: 0.4em;
  right: 0.8em !important;
  height: 2.4em;
  width: 2.75em;
  transform: rotate(-15deg) skewX(-15deg);
}

input:checked + .switch-left + .switch-right::before {
  background-color: #ccc;
}

/* Keyboard Users */
input:focus + .switch-left {
  color: #333;
}

input:checked:focus + .switch-left {
  color: #fff;
}

input:focus + .switch-left + .switch-right {
  color: #fff;
}

input:checked:focus + .switch-left + .switch-right {
  color: #333;
}
span.companion{
	font-family:inherit;
	font-weight:inherit;
	font-size:inherit;
}
svg.advancementPath{
	margin:0;
}
span.companion{
	font-family:inherit;
	font-weight:inherit;
	font-size:inherit;
}
svg.advancementPath{
	margin:0;
}
svg.advancementPath > g.Adv_layer > circle:not(.Adv_activado){
	fill: var(--16dp);/*"url(#grad1)";*/
	stroke-width:0.2px;
	stroke:#288505;/*#7c8949;*/
	cursor:pointer;
}
svg.advancementPath > g.Adv_layer > circle.active{
/*	fill: "url(#grad2)" !important;*/
	stroke-width:0.5px;
	r:2.5px;
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado{
	fill:#288505;/*#7c8949;*/
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado[data-parent="Young"]{
	cx:2.052px;
	cy:15.5px;
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado[data-parent="Mature"]{
	cx:24.61px;
	cy:15.5px;
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado[data-parent="Nimble"]{
	cx:39.03px;
	cy:2.052px;
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado[data-parent="Savage"]{
	cx:39.03px;
	cy:29.04px;
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado[data-parent="SpecializedN"]{
	cx:61.59px;
	cy:2.052px;
}
svg.advancementPath > g.Adv_layer > circle.Adv_activado[data-parent="SpecializedS"]{
	cx:61.59px;
	cy:29.04px;
}

/*NEW*/
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="Young"]{
	cx:2.052px;
	cy:20.79px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="Indomitable"]{
	cx:39.03px;
	cy:2.052px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="Nimble"]{
	cx:39.03px;
	cy:14.58px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="Mature"]{
	cx:24.61px;
	cy:20.79px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="Unseen"]{
	cx:39.03px;
	cy:39.62px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="Savage"]{
	cx:39.03px;
	cy:27.1px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="SpecializedI"]{
	cx:61.26px;
	cy:2.052px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="SpecializedN"]{
	cx:61.26px;
	cy:14.58px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="SpecializedS"]{
	cx:61.26px;
	cy:27.1px;
}
svg.advancementPath.newer > g.Adv_layer > circle.Adv_activado[data-parent="SpecializedU"]{
	cx:61.26px;
	cy:39.62px;
}

svg.advancementPath > g.Adv_paths > rect{
	fill:var(--1dp);
	stroke-width:0;
}
svg.advancementPath > g.Adv_paths > path{
	stroke:var(--1dp);
	fill:none;
	stroke-width:0.7938px;
}



label.resultat{
	height:1em;
/*	border:1px solid white;*/
	color:var(--mhighEmphasis);
	font-size:3em;
	font-family: GoodOT_Bold;
	width:1.5em;
}
label.resultat2{
	text-align:center;
	font-family:GoodOT_CondBold;
	line-height:1;
	color:var(--mhighEmphasis);
	font-size:2.33em;
	width:4em;
}

input.tipo1[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 10em;
  margin:0.25em 0;
}

/* Removes default focus */
input.tipo1[type='range']:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input.tipo1[type='range']::-webkit-slider-runnable-track {
  background-color: var(--1dp);
  border-radius: 0.25em;
  height: 0.5em;
}

/* slider thumb */
input.tipo1[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -0.1em; /* Centers thumb on the track */
  background-color: #288505;/*#7c8949;*/
  border-radius: 50%;
  height: 0.75em;
  width: 0.75em;
}

input.tipo1[type='range']:focus::-webkit-slider-thumb {
  outline: 3px solid rgba(40, 133, 5,0.5);/*rgba(171, 120, 75,0.5);*/
  outline-offset: 0.125em;
}

/*********** Firefox styles ***********/
/* slider track */
input.tipo1[type='range']::-moz-range-track {
  background-color: var(--1dp);
  border-radius: 0.5em;
  height: 1em;
}

/* slider thumb */
input.tipo1[type='range']::-moz-range-thumb {
  background-color: #288505;/*#7c8949;*/
  border: none; /*Removes extra border that FF applies*/
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
}

input.tipo1[type='range']:focus::-moz-range-thumb{
  outline: 3px solid #288505;/*#7c8949;*/
  outline-offset: 0.125em;
}

select.comp_specialization, select.comp_specialization:focus{
	background-color:var(--backMainColor);
	box-shadow:none;
	outline:none;
	color:var(--lowEmphasis);
	border:1px solid rgba(255,255,255,0.33) !important;
	transition: all 0.4s ease-in-out;
}
select.comp_specialization:focus > option:hover{
	background-color:var(--tablaFoot) !important;
}
span.alertBarding{
	color:var(--rojoTitulo);
}
span.helpBarding{
	color:var(--coreMain);
}

input.pet-ability[type='checkbox']{
	display:none;
	cursor:pointer;
}

input.pet-ability[type='checkbox'] + label{
	cursor:pointer;
}
button.pet-ability{
	flex:1;
	box-sizing: border-box;
	cursor:pointer;
	border:2px solid transparent;
	transition:0.5s;
	background-color:transparent;
	height:3em;
}
button.pet-ability > svg{
	height:2em;
	width:2em;
	fill:rgba(0,0,0,0.6) !important;
	transition:0.5s;
}
button.pet-ability  label{
	white-space:nowrap;
	color:rgba(0,0,0,0.6);
	transition:0.5s;
}
button.pet-ability:hover  label{
	color:rgba(0,0,0,0.9);
}
button.pet-ability:hover > svg{
	fill:rgba(0,0,0,1) !important;
}
button.pet-ability:has(input.pet-ability:checked) > svg{
	fill:var(--mainColor) !important;
}
button.pet-ability:has(input.pet-ability:checked)  label{
	color:var(--mainColor) !important;
}
button.pet-ability:has(input.pet-ability:checked){
	border:2px solid var(--mainColor);
	border-radius:calc(1em / 3);
}
button.pet-ability:has(div.pet_moves_panel){
	position:relative;
}
button.pet-ability > div.pet_moves_panel{
	position:absolute;
	top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
	overflow-y: visible;
	background-color:var(--fondoSidebar);
	padding:0.2em;
	border-radius:0.33em;
	border:1px solid rgb(135, 54, 55);/*rgb(0, 93, 52);*/
}
button.pet-ability > div.pet_moves_panel > a{
	background-color:rgba(255,255,255,0.3);
	margin:0.1em;
	font-family: GoodOt;
	font-size:calc(2 * var(--midaLetra) / 3);
	text-decoration:none;
	width:4em;
	border-radius:0.33em;
	color:rgb(135, 54, 55);/*rgb(0, 93, 52);*/
	transition:0.5s;
}
button.pet-ability > div.pet_moves_panel > a:hover{
	background-color:rgba(255,255,255,0.5);
}
span.pet_move_chosen{
	font-family: 'SabonItalic';
	font-size:calc(2 * var(--midaLetra) / 3);
	color:rgba(0,0,0,0.8);
	line-height:0.5;
}
.gridBomb1 {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: auto 1fr; 
  gap: 0em 1em; 
  justify-content: center; 
  align-content: center; 
  justify-items: center; 
  align-items: center;
   background-color:rgba(255,255,255,0.2); 
   border-radius:0.33em;

}
.gridBomb1 > div[class^='th']{
	display:flex;
	align-items:end;
	justify-content: end;
	
	margin-bottom:-0.2em;
	margin-top:-0.5em;
}
.gridBomb1 > div[class^='th'] > span{
	font-family:GoodOT_CondBold;
	font-size:calc(3 * var(--midaLetra) / 4);

}
.gridBomb1 > div > input{
	text-align:center;
	border-radius:0.1em;
	font-family:GoodOT;
	background-color:rgba(255,255,255,0.33);
	color:rgba(0,0,0,0.8);
	border:none;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
input.pet_input{
	width:2.5em;
	background-color:transparent;
}

input.pet_input:not(:hover)::-webkit-outer-spin-button,
input.pet_input:not(:hover)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.pet_input[type=number]:not(:hover) {
  -moz-appearance: textfield;
}
input.pet_name{
	background-color:rgba(255,255,255,0.38);
	color:rgba(0,0,0,0.8);
	border:none;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	border-radius:0.1em;
	font-family:GoodOT;
}
input.pet_name:focus{
	border:none;
	outline:none;
	background-color:rgba(255,255,255,0.55);
}

a.hpTool{
	font-family:inherit;
	text-decoration:none;
	color:inherit;
	cursor: url("/img/cursorBlood.png"), auto;
	&.altered{
		color:var(--rojoDes);
	}
	&.death{
		color:var(--rojoDes);
		&:after{
			content:'💀';
			margin-left:0.5rem;
		}
	}
}
div.modal-hp{
	display:none;
	position:absolute;
	flex-direction:flex;
	justify-content: space-between;
	align-items:center;
	width:100%;
	width:13rem;
	height:3rem;
	background-color:white !important;
	opacity:1;
	border-radius:0.5rem;
	
	padding:0 0.5rem;
	z-index:10000000;
	box-shadow: 5px 5px 3px 1px rgba(0,0,0,0.66), 0 0 1px rgba(0,0,0,0.66);
	&.show{
		display:flex;
	}
	> input[type="number"]{
		font-family:GoodOT;
		width:4.5rem;
		margin:0.5rem;
		border:none;
		border-radius:3px;
		background-color:white !important;
		color:black;
		&:focus{
			outline:transparent;
			box-shadow: 0 0 3px 1px maroon;
		}
	}
	> button.btn-hp{
		background:transparent;
		padding:0.2rem 0.4rem 0.1rem 0.4rem;
		font-family:GoodOT;
		font-weight:700;
		border-radius:5px;
		border:none;
		color:maroon;
		box-shadow: 0 0 3px 1px rgba(0,0,0,0.66);
		outline: none;
	}
}