:root{
	--mainColor: #002c00; /*sealBrown*/
	--backMainColor: #181111; /*ch*/
	--backTraits: #383232;/*#d9c484; */
	--rojoTrait:#5e0000;
	--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);
	--patreonLink:#62ce7e;
	--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;*/
	--lightBlue: #d1d3d4;
	--twitter:#1da1f2;
	--twitter2:#4169e1;
	--grey2:var(--vlowEmphasisL);/*#aaa;*/
	--sizeDice:1;
	--rojoNormal:#003500; /*Maroon*/
	--mainTitle:#479975;/*#a23424*/;
	--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;*/
	--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;*/
	--fondoBox:#bdcbbb;/*dbd1bc;*/
	--fondoSidebar:#cdc4ad;/*#757C8A;*/
	--fondoResaltar2:#cfc5af;/*#787E8B;*/
	--Letra0:5.8vmin;
  --scrollbarBG: var(--1dp);
  --uncommonLabel:var(--rarity);
  --rareLabel:var(--rare);
  --uniqueLabel:var(--unique);
}

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);
}
.tooltip-inner {
    max-width: 1000px !important;
}
*{
	 font-family: 'SabonLTSstd';
	box-sizing: border-box;
	color:var(--lowEmphasis);
}
html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 70px;
  background-color:  var(--backMainColor);
  scrollbar-width: thin;
  scrollbar-color: dark;
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}
footer.principal{
	  position: absolute;
	  bottom: 0;
	  left:0;
	  width: 100%;
	  height: 60px;
	  color:var(--mainColor);
	  font-size: calc(1 * var(--midaLetra) / 2);
}
.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;*/
}
strong{
	color:var(--mhighEmphasis);
}
/*MODALS*/
	h3.modal-title strong{
		font-family: 'knemabold';
	}
	.modal-body > ul{
		padding-left: 0;
	}
	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;
	}
/*BARRA TITULO*/
	h1.mainTitle{
		cursor:pointer;
	}
	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);
		z-index: 10000;
		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 > a.disabled{
		background-color: var(--12dp) !important;
	}
	aside.linkR nav span{
		font-family: 'knemabold';
		margin-right: calc(5 * var(--midaLetra) / 9);
	}
#opciones{
	width: calc(48 * 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;
	}
/*PARTE LATERAL*/
	#mainActions{
	padding-top:3.2em;
}
	#mainActions div.card-header{
		padding-left:0;
		position:relative;
		z-index:2;
	}
	button.setup{
		position:absolute;
		top:50%;
		width:calc(100%);
		transform: translate(0%, -50%);
		text-align: right;
		background-color:transparent;
		opacity:0.8;
		margin-left:0;
		transition: margin-left 0.5s;
		z-index:-1;
		border-radius: 5px;
		padding-right:0.5em;
	}
	div.card{
		background-color: var(--backTraits);
		overflow: visible !important;
	}

	div.card div.card{
		background-color: var(--6dp);
	}
	div.card div.card div.card{
		background-color: var(--12dp);
	}
	div.card div.card div.card div.card{
		background-color: var(--24dp);
	}
	div.card button{
		color:var(--mlowEmphasis);
		text-decoration:none;
		text-align:left;
	}
	div.card h5 > button {
		font-family: kelson_sansbold;
		/*font-size:calc(13 * var(--midaLetra) / 32);*/
		font-size:0.9em;
		text-transform: capitalize;
		width:100%;
	}
	#mainActions div.card button{box-shadow:0px 0px 2px 2px rgba(0,0,0,0.22) !important;}
	#mainActions > div.card > div.card-header > h5 > button {
		background-color: var(--2dp);
		color:var(--vlowEmphasis);
		height:100%;
	}
	#mainActions > div.card > div.card-header > h5 > button.setup {
		background-color:var(--rojoNormal);
		height:100%;
		border:none;
	}
	#mainActions > div.card:hover > div.card-header > h5 > button {
		color:var(--highEmphasis);
		background-color:rgba(94,0,0,0.5);
		text-decoration:none;
		overflow-x: visible !important;
	}
	#mainActions div.card-header.main:hover > h5 > button.setup{
		margin-left:2.3em;
	}
	#mainActions > div.card:hover {
		background-color:var(--1dp);
	}
	#mainActions > div.card div.card:hover {
		background-color:var(--1dp);
	}
	#mainActions > div.card div.card:hover > div.card-header > h5 > button {
		text-decoration:none;
		color:var(--highEmphasis);
	}
	#mainActions > div.card > div.jefe > div.card-body > div.accordion > div.card:hover > div.card-header > h5 > button {
		background-color:rgba(94,0,0,0.7);
	}
	#mainActions > div.card > div.jefe > div.card-body > div.accordion > div.card > div.collapse > div.card-body > div.accordion > div.card > div.card-header > h5 > button {
		color:var(--lowEmphasis);
	}
	#mainActions > div.card > div.jefe > div.card-body > div.accordion > div.card > div.collapse > div.card-body > div.accordion > div.card:hover > div.card-header > h5 > button {
		background-color:rgba(94,0,0,0.9);
	}
	#mainActions div.list-group button, span.menu, span.level{
		font-family: kelson_sansbold;
		font-size:1em;
		/*font-size:calc(13 * var(--midaLetra) / 32);*/
	}
	#mainActions div.list-group span.level2{
		display:inline-block;
		font-family: kelson_sansbold;
		margin-left:0.1em;
		margin-right:0.1em;
		padding:0.1em 0em;
		min-width:1.8em;
		border-radius: 0.2em;
		text-align: center;
		font-size:0.8em;
		color:var(--lowEmphasis);
		background-color: var(--tablaImpar);
		transition: 0.5s;

		/*font-size:calc(13 * var(--midaLetra) / 32);*/
	}
	#mainActions div.list-group button.active > span.menu > span.level2{
		color:var(--rojoNormal);
		background-color: white;
		font-weight: bolder;
	}
	#mainActions div.list-group span.level{
		text-align: right !important;
	}
	#mainActions span.categoria > span{
		font-family: GoodOT_CondBold;
		font-size:calc(13 * var(--midaLetra) / 32);
		color:var(--rojoTitulo);
	}
	#mainActions button.list-group-item-action{
		background-color:var(--48dp);
		transition: 0.5s;
		box-shadow:0px 0px 2px 2px rgba(0,0,0,0.33) !important;
	}
	#mainActions button.list-group-item-action *{
		color:var(--mhighEmphasis);
	}
	#mainActions button.list-group-item-action:hover{
		background-color:rgba(94,0,0,1);
	}
	#mainActions button.list-group-item-action:hover *{
		color:var(--highEmphasis);
	}
	#mainActions button.list-group-item-action.active{
		background-color: rgba(94,0,0,1);
		border:none;
		outline: none;
	}
	#mainActions button.list-group-item-action.active *{
		color:var(--vhighEmphasis);
	}
	#mainActions button.uncommon{
		position:relative;

		/*background: repeating-linear-gradient(
		   45deg,
		   #f0f0f0,
		   #f0f0f0 4px,
		   #ffffff 4px,
		   #ffffff 8px
		 );*/
	}
	#mainActions button.uncommon::before{
		position:absolute;
		display:block;
		left:0.10em;
		top:0.2em;
		height:calc(100% - 0.4em);
		width:0.4em;
		z-index: 2000;
		content:'';
		background-color: var(--uncommonLabel);
		border-radius:1em;
	}

	#mainActions button.rare{
		position:relative;
		/*background: repeating-linear-gradient(
		   45deg,
		   #EEE8AA,
		   #EEE8AA 4px,
		   #ffffff 4px,
		   #ffffff 8px
		 );*/
	}
	#mainActions button.rare::before{
		position:absolute;
		display:block;
		left:0.10em;
		top:0.2em;
		height:calc(100% - 0.4em);
		width:0.4em;
		z-index: 2000;
		content:'';
		background-color: var(--rareLabel);
		border-radius:1em;
	}
	#mainActions button.unique{
		position:relative;
		/*background: repeating-linear-gradient(
		   45deg,
		   #EEE8AA,
		   #EEE8AA 4px,
		   #ffffff 4px,
		   #ffffff 8px
		 );*/
	}
	#mainActions button.unique::before{
		position:absolute;
		display:block;
		left:0.10em;
		top:0.2em;
		height:calc(100% - 0.4em);
		width:0.4em;
		z-index: 2000;
		content:'';
		background-color: var(--uniqueLabel);
		border-radius:1em;
	}
	#mainActions button.accionable::before{
		left:-0.15em;
		width:0.25em;
	}
	/*#mainActions button.list-group-item-action.uncommon.active, #mainActions button.list-group-item-action.rare.active, #mainActions button.list-group-item-action.rare.unique{
		color:black;
	}*/
	section.dcha{
		/*z-index: 0;*/
	}
/*RESULTADO*/
	#mainContainer{
		margin-top:calc(5 * var(--midaLetra) / 9);
	}
/*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);
	}
/*PARTE CABECERA FEATURE*/
	article.result  header{
		margin-bottom:0em;
		/*background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 81%, rgba(255,255,255,0.85) 91%, rgba(255,255,255,0.56) 100%);*/
		/*width:100%;*/
		position:relative;
	}
	article.result  header > h1,article.result  header > h2 ,article.result  header > h2 > div{
		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.scrollable{

		/*max-height: 92vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
		/*max-height: calc(var(--vh, 1vh) * 92);
		height:auto;
		overflow-y: auto;
		overflow-x: visible;*/
	}
	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);
		/*margin-top:0;*/
	}
	article.result section.traitsExtra{
		margin-top:-0.2em;
	}
	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 DE PRERREQUISITOS, ETC.*/
	article.result section.details{
		border-bottom:1.5px solid var(--vlowEmphasis);
		position:relative;
	}
	article.result 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;
	}
/*PARTE DESCRIPCION*/
	article.result section.content > h2, article.result section.details > h2{
		font-family: 'GoodOT_CondBold';
		/*font-size:calc(9 * var(--midaLetra) / 10) !important;*/
		/*font-family: 'moonshiner';*/
		font-size: calc(10 * var(--midaLetra) / 9);
		color:var(--encabezado2);
		font-variant: small-caps;
		margin-top:0.5em;
		margin-bottom:0;
	}
	section.description > h2{
		font-family: 'GoodOT_CondBold';
		font-variant: small-caps;
		font-size: calc(10 * var(--midaLetra) / 9);
		color:var(--encabezado2);
		margin-top:0;
		margin-bottom:-0.5em;
	}
	article.result section.content > p, section.content li{
		font-family: 'GoodOT';
		font-size: calc(2 * var(--midaLetra) / 3);
		text-align:justify;
	}
	article.result section.content {
	  border-top: none;
	  overflow-x: auto;
	  -ms-overflow-style: none; /* for Internet Explorer, Edge */
	    scrollbar-width: none; /* for Firefox */
	  /*display: flex;
	  flex-direction:column;
	  justify-content: start;
	    align-items: start;*/
	}
	article.result section.content::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
	article.result section.content.extra {
		border-top:1.5px solid var(--vlowEmphasis);
	}
	article.result 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;
	}
	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;
	}
	p.tab3{
		text-indent:2em !important;
		margin-left:1em;
	}
	section.content.extra > p{
		text-indent: 0;
	}
	section.content.extra > p.tab1{
		text-indent: 1em;
	}
	p.tab4{
		margin-left:1em !important;
		text-indent: -1em !important;
	}
	p.tab5{
		text-indent:1.3em !important;
		margin-left:1.3em !important;
	}
	section.content  p.tab3{
		text-indent:1em !important;
		margin-left:1em !important;
	}
/*Bloques Info*/
	article.result 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;
	}
	article.result section.content > aside.info *{
		font-family: 'GoodOT';
		font-size: calc(2 * var(--midaLetra) / 3);
		text-align: justify;
	}
	article.result section.content > aside.info > p{
		text-indent: 0;
	}
	article.result section.content > aside.info > h3{
		font-family: 'GoodOT_Bold';
		text-align:center;
		margin-bottom:0;
		color:var(--highEmphasis);
	}
	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*/
	article.result  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(--highEmphasis);
		 font-family: 'GoodOT_CondBold';
		 font-size: calc(8 * var(--midaLetra) / 9);
		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:2em;
	}
	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 > 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 {
		background-color: var(--4dp);
	}
	article.result  table > tbody > tr.odd {
		background-color: var(--6dp);
	}
	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_Bold';
		color:var(--lowEmphasis);
		text-align:center;
		vertical-align: bottom;
		padding:0 0.4em;
		line-height: 1.2em;
		font-size: calc(2 * var(--midaLetra) / 3);
	}
	article.result  table.justo > thead > tr > th, section.content > 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 > thead > tr > th:first-child {
		text-align:left;
		padding:0 1.8em 0 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 > tfoot{
			background-color:var(--tablaFoot);
			font-size: calc(9 * var(--midaLetra) / 16);
			line-height:2em;
		}
		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;
		}
		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.3em !important;
			padding-bottom:0.1em !important;
			/*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{
			/*table-layout:fixed;*/
		}
		/*table.extra.proficiencies tr td:first-child{
			width:1% !important;
			white-space: nowrap !important;
			text-align:center !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:3px 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(52,0,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: 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);
}
.popover-header, .popover-body {
    font-size: calc(1 * var(--midaLetra) / 2);
}

/*.popover-header, .popover-body {
    font-size: calc(1 * var(--midaLetra) / 2);
}*/

article.result footer div.source a {
  /*font-size: 40px;*/
  color:var(--rojoTitulo);
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
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: 'GoodOT';
  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, color .1s, border-radius 0.5s;
    margin:-0.1em -0.2em;
    padding:0.1em 0.2em;
    border-radius: 0 0 0 0;
}

a.inner:hover {
  background-size: 4px 50px;
    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: 'GoodOT';
  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;
}
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;
  transition: background-size .2s, color .1s;
}
a.inner.sheets:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
}
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;
  transition: background-size .2s, color .1s;
}
a.inner.rule:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
}
section.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;
  transition: background-size .2s, color .1s;
}
section.gris a.inner:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
}

a.btn-inform2 {
 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, color .1s, border-radius 0.5s;
    margin:-0.1em -0.2em;
    padding:0.1em 0.2em;
    border-radius: 0;
}

a.btn-inform2:hover {
  background-size: 4px 50px;
  color:var(--highEmphasis);
  border-radius: 0.2em;
}
	a.twitter{
		text-decoration: none;
		color:var(--twitter);
	}
	a.twitter:hover{
		color:var(--twitter2);
	}
.red{
	color:var(--rojoNormal) !important;
}
div.card-header button{
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: auto 70%;
}
button.adventuringGear{
	background-image:url(/img/adventuringGear3.svg);
}
button.armor{
	background-image:url(/img/armorD2.svg);
}
button.treasure{
	background-image:url(/img/treasureD4.svg);
}
button.creature{
	background-image:url(/img/creature2D4.svg);
}
button.weapon{
	background-image:url(/img/weaponD4.svg);
}
button.condition{
	background-image:url(/img/condition3D4.svg);
}
button.planes{
	background-image:url(/img/dimensionsD4.svg);
}
div.card:hover  button.condition{
	background-image:url(/img/condition3W2D3.svg);
}
button.power{
	background-image:url(/img/powerD4.svg);
}
button.backgrounds{
	background-image:url(/img/backgroundD4.svg);
}
/*button.archetype{
	background-image:url(/img/archetype.svg);
}*/
button.basic{
	background-image:url(/img/basicD4.svg);
}
div.card:hover  button.basic{
	background-image:url(/img/basicWD3.svg);
}
button.skillUse{
	background-image:url(/img/skillUse2.svg);
}
button.sources{
	background-image:url(/img/booksD4.svg);
}
button.organization{
	background-image:url(/img/organizationD4.svg);
}
button.tools{
	background-image:url(/img/crowbar3.svg);
}
button.features{
	background-image:url(/img/feature.svg);
}
button.hazards{
	background-image:url(/img/trap2D4b.svg);
}
div.card:hover  button.hazards{
	background-image:url(/img/trap2WD3.svg);
}
button.deity{
	background-image:url(/img/deity.svg);
}
button.shield{
	background-image:url(/img/shield3D4.svg);
}
button.ritual{
	background-image:url(/img/altarD4.svg);
}
button.magic{
	background-image:url(/img/magicD4.svg);
}
div.card:hover  button.magic{
	background-image:url(/img/magicWD4.svg);
}
button.regions{
	background-image:url(/img/cultures.svg);
}
button.cultures{
	background-image:url(/img/cultures2D4.svg);
}
div.card:hover  button.organization{
	background-image:url(/img/organizationWD4.svg);
}
button.rules{
	background-image:url(/img/regulation2D4.svg);
}
/*div.card:hover  button.ritual{
	background-image:url(/img/ritualW.svg);
}*/
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;

}
label.nolink{
	font-family: inherit !important;
	font-size: inherit !important;
	margin:0;
	padding: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);
}

#masked-image {
    background: url(/img/grunge1.jpg) no-repeat center center;
    	background-size: cover;
    	color: #fff;
    	-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);
}


#nav-tabContentFilter > div > div.row > div.card{
	background-color: initial;
}
#nav-tabContentFilter {
	background-color:var(--6dp);
	/*border:1px solid #dedede;
	border-top:none;*/
	/*background-color: var(--tablaPar);*/
	box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.5);
	border:none;
}
#nav-tabContentFilter >  div.tab-pane{
	padding:1em;
}
#nav-tabContentFilter .card-header label{
	text-transform: uppercase;
	color:var(--highEmphasis);
	font-family: 'GoodOT_CondBold' !important;
	font-size:1.25em;
	padding-left:0.75em;
}

#nav-tabContentFilter .card .card-header {
	background-color: var(--4dp);
}
#nav-tabContentFilter .card .card-body {
	background-color: var(--12dp);
}
#nav-tabContentFilter .card .card .card-header {
	background-color: var(--8dp);
}
#nav-tabContentFilter .card .card .card-header label{
	text-transform:none;
	color:var(--mhighEmphasis);
}
#nav-tabContentFilter .card-body label{
	font-family: 'GoodOT';
}

#nav-tabContentFilter .card-header .custom-control-label::before,
#nav-tabContentFilter .card-header .custom-control-label::after {
	top: 0.25em;
	width: 1em;
	height: 1em;
	left:-0.5em;
}
#nav-tabContentFilter .card-header .custom-control-label {
	padding-left:1em;
}
#nav-tabContentFilter .card-header .custom-checkbox .custom-control-input~.custom-control-label::before{
	background-color:var(--12dp);
	border-color:var(--12dp);
	box-shadow:0 0 4px 2px rgba(0,0,0,0.5);
}
#nav-tabContentFilter .card-header .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color:var(--rojoDes);
  /*box-shadow: none !important;*/
  border-color:var(--rojoDes);
}
#nav-tabContentFilter .card-body .custom-checkbox .custom-control-input~.custom-control-label::before{
	background-color:var(--12dp);
	border-color:var(--12dp);
	box-shadow:0 0 4px 2px rgba(0,0,0,0.5);
}
#nav-tabContentFilter .card-body .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
	background-color:var(--rojoDes);
	border-color:var(--rojoDes);
}
#nav-tabContentFilter .card-body .custom-control-label {
	color:var(--lowEmphasis);
}
#source-tab, #rarity-tab{
	font-family: 'GoodOT_CondBold';
	font-size:1.5em;
	text-transform: uppercase;
	color:var(--lowEmphasis);
}
#source-tab *, #rarity-tab *{
	color:var(--lowEmphasis);
}
#source-tab.active, #rarity-tab.active{
	background-color:var(--3dp);
	border:none;
	box-shadow: 0px -3px 5px 2px rgba(0,0,0,0.5);

	/*border-bottom:1px solid var(--4dp);*/
	color:var(--vhighEmphasis);
}
#source-tab.active *, #rarity-tab.active *{
	color:var(--vhighEmphasis);
}
#filterModal h5.modal-title{
	font-family: Taroca;
	font-size:1.5em;
	color:var(--highEmphasis);
}
#filterModal h5.modal-title *{
	color:var(--highEmphasis);
}
#nav-tabContentFilter .tab-pane.active{
	background-color: var(--6dp);
}
#nav-tabContentFilter div.card{
	background-color:rgba(255,255,255,0.5) !important;
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.5);
	border:none;
}
#nav-tab{
	border:none;
	z-index:1 !important;
}

#filterModal p{
	font-family: 'GoodOT';
}
#filterModal aside *{
	font-family: 'GoodOT' !important;
}

#filterModal aside .custom-control.custom-checkbox{padding-left: 0;}

#filterModal aside label.custom-control-label {
  position: relative;
  padding-right: 2em;
}

#filterModal aside label.custom-control-label::before{
  right: 0;
  left:auto;
}
#filterModal aside label.custom-control-label::after{
   right: 0.85em;
  left:auto;
}
#filterModal aside .custom-switch .custom-control-input:checked~.custom-control-label::before{
  background-color:var(--rojoDes);
  border-color:var(--rojoDes);
}
#filterModal aside .custom-switch label, #filterModal aside .custom-switch label span{
	color:var(--lowEmphasis);
}
.rojo{
	color:var(--rojoDes);
}
div.loading{
	font-family: SabonItalic;
	font-size:1em;
	color:white;
	text-align: center;
}

#search-box{
	position:fixed;
	top:0;
	left:0;
	width:16.7%;
	z-index:30;
	transition: width 0.4s ease-in-out;
}
#search-box > div.box{
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
#search-box > div.box > div.imagen{
	position: absolute;
	left:0.5em;
	top:50%;
	transform: translate(0%, -50%);
	transition: all 0.4s ease-in-out;
}
#text_search{
	font-family: 'SabonLTSstd';
	font-size:1.3em;
	padding-left:1.8em;
	box-shadow:none;
	outline:none;
	background: var(--backMainColor);
	color:var(--lowEmphasis);
	border:1px solid rgba(255,255,255,0.33) !important;
	/*background-color:#eee;*/
	transition: all 0.4s ease-in-out;
}
#text_search:focus{
	box-shadow:none;
	outline:2px solid rgba(56,140,104,0.33);
	font-size:calc(1.3 * var(--midaLetra));
	padding-left:1.8em;
}
html, body{
	margin: 0;
}
main{
	height:100vh;
	position: relative;
}
nav.sidebar{
	background-color:  var(--backMainColor);
	z-index:3;
	overflow-x: visible !important;
	width:calc((2 / 12) * 100vw);
	margin-bottom:666px;
}
#mainActions{
	padding-top:3.2em;
	box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.60);
}
section.screenL{
	position: fixed !important;
	left:0;
	height:100vh !important;
	width:calc((2 / 12) * 100vw + 40px) !important;
	/*background-color: rgba(52,156,89,0.7);*/
	z-index:1;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
section.screenL::-webkit-scrollbar, section.screen::-webkit-scrollbar {
	display: none !important;
}
section.screen{
	position: fixed !important;
	right:0;
	height:100vh !important;
	width:calc((10 / 12) * 100vw) !important;
	z-index:0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#result_number{
	position:absolute;
	left:17px;
	text-align: center !important;
	top:27px;
	width:3em;
	/*border:1px solid green;*/
	color:green;
	font-size:1em;
}

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-wrapper{
	overflow: visible;
}
.swiper-slide{
	overflow: visible;
}
/*RESULTADOS BUSQUEDA*/
#list-results{
	position:absolute;
	top:4.5em;
	width: 100vw;
	z-index:29;
	font-size:calc(11 * var(--midaLetra) / 18);
	padding-left:calc(5 * var(--midaLetra) / 18);
	padding-right:calc(5 * var(--midaLetra) / 18);
	transition: all 0.4s ease-in-out;
}
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);
}
#spellModal article.result{
	margin-top:-1em !important;
}
#falseFondo{
	position:absolute;
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,0.4);
	z-index:28;
}
article.result > header > button.close{
	/*position:absolute;
	top:-5px;
	right: 5px;*/
	margin-left:2em;
	margin-right:-1em;
	color:lightgray;
	/*font-size:3em;*/
}
div.subtipo > strong{
	margin-left:0.8em;
	font-family: 'GoodOT_Bold';
	color: var(--highEmphasis) !important;
}
.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:white;
		/*text-shadow:
		     3px 0px 3px var(--rojoTitulo),
		    -3px 0px 3px var(--rojoTitulo),
		     6px 0px 6px var(--rojoTitulo),
		    -6px 0px 6px var(--rojoTitulo);
		color:white;*/
	}
}
sup{
	font-family: inherit !important;
}
.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;
  }
}
/*Rules*/
h1.titulo{
	font-family:Taroca !important;
	font-variant: small-caps;
	font-size: calc(16 * var(--midaLetra) / 9);
	color:var(--rojoTitulo) !important;
	margin-bottom:-0.3em !important;
	margin-top:1em;
	text-align:center;
}
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;
}
h3.titulo{
	font-family:GoodOT_CondBold !important;
	text-transform: uppercase;
	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;
	/*background-color:var(--fondoBox) !important;*/
	/*background-color: var(--fondoSidebar);*/
	/*border:1px solid red;*/
}
aside.sidebar.full div.body{
	max-width:calc(100% + 14.4em);
}
aside.full div.body{
	min-width:calc(100%) !important;
}
aside.sidebar.full{
	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:black;*/
	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;/*-1em;*/
	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;*/
}
/*		.modal-xxl{
	min-width:90vw !important;
}
*/
/*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;
}
#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{
	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;
}
span.spoiler{
	text-transform: uppercase;
	font-family:olsentf;
	background-color:var(--rojoNormal);
	color:white;
}
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);
}
.darkMode {
    display: none !important;
}
.modal-body div.list-group{
	box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.5);
}
.modal-body div.list-group button{
	background-color:var(--8dp);
}
.modal-body div.list-group button:hover{
	background-color:var(--16dp);
}
.modal-body div.list-group button:active, .modal-body div.list-group button.active{
	background-color:var(--36dp);
	outline:none;
	border:none;
}
#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 ul.list-group {
	border:none;
	background-color:transparent;
}
#sourceBooks div.accordion div.card div.card-body ul.list-group a{
	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 ul.list-group a:hover{
	background-color:var(--10dp);
}
#sourceBooks div.accordion div.card div.card-body ul.list-group a:focus,#sourceBooks div.accordion div.card div.card-body ul.list-group a:active{
	background-color:var(--16dp);
}
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;
}
#FSRange::-webkit-slider-thumb, .custom-range.DC1to2::-webkit-slider-thumb{
	background:#7c8949;
}
.dropdown-divider {
	border-top-color:var(--mlowEmphasis) !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;
}
.formulari label.resultado2{
	color:var(--mhighEmphasis);	
	height:100%;
	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);
}
label.custom-control-label.ancestry{
	font-family:GoodOT_Bold;
}
.wrap {
	padding:5em 3em;
	width:100%;
	text-align:center;
	background:radial-gradient(ellipse closest-side,
		rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.08) 66%, rgba(255,255,255,0) 100%);
}
div.loadingText{
	position:absolute;
	text-align: center;
	top:5.5em;
	width: 100vw;
	z-index:31;
}
.text {
	font-family:knemabold;
	font-size:2em;
	color: var(--mlowEmphasis);
	display: inline-block;
	margin-left: 5px;
}
.text2 {
	font-family:knemabold;
	font-size:1.8em;
	color: var(--mlowEmphasis);
	display: inline-block;
}
.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;
	}
}
.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;
  }
}
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);
}
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);
}
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, .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;
}
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;
	}
}