:root{
	--mainColor: #4F0000; /*sealBrown*/
	--backMainColor: #F5F4F2; /*floralWhite*/
	--backTraits: #d9c484; /*Zombie*/
	--rojoNormal:#5e0000; /*Maroon*/
	--rojoTitulo:#c74a1b;
	--fondoBloques:#eae4d8;
	--tablaCabeza:#5e0000;
	--tablaPar:#f5efe0;
	--tablaImpar:#ede3c8;
	--tablaFoot:#e6d8b0;
	--tablaExtra:#dfce9a;
	--encabezado2:#a86753;
	--bordeAmarillo:#b29e74;
	--link:#c74a1b;
	--mlowEmphasisL:rgba(0,0,0,0.49);
	--link2:#138953;
	--link3:#185580;
	--rarity:#98513d;
	--rare:#002664;
	--settlement:#004416;
	--unique:#54166e;
	--uncommonLabel:#98513d;/*#B16C58;*/
	--rareLabel:#013992;/*#1771ff;*/
	--uniqueLabel:#733e8a;/*#b60bff;*/
	--size:#3b7b59;
	--nonPaizo: #787878;
	--alignment:#576293;
	--fondoBox:#dbd1bc;
	--fondoSidebar:#cfc3ad;
	--fondoResaltar2:#d0c5af;
	--sizeDice:1;
	--coreMain:#005d34;
	--oldMain:#973333;
	--Main:black;
	--noMain:white;
}

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;
}
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;
	}
	h1.mainTitle > span{
		font-family: 'sketch_gothic_schoolregular';
		color:var(--mainColor);
		font-size:calc(1.3 * var(--midaLetra));
		/*cursor:context-menu;*/
	}
	h1.mainTitle > span.special{
		font-family: 'wolf_in_the_cityregular';
		color:#a23424;
		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);
	}
	aside.linkR nav > a{
		padding:calc(2 * var(--midaLetra) / 9) calc(5 * var(--midaLetra) / 9);
	}
	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;
}
#opciones button{
	margin-left:1em;
}
/*ADVERTISEMENT*/
	#ad{
		background-color: #f96854;
		color:white;
		font-size:1em;
		border-radius: 1em;
	}
	#ad a{
		color:#62ce7e;

	}
/*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:green;
		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(--tablaImpar);
	}
	div.card div.card div.card{
		background-color: var(--tablaPar);
	}
	div.card div.card div.card div.card{
		background-color: #fffdf7;
	}
	div.card button{
		color:var(--rojoNormal);
		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 > div.card-header > h5 > button {
		background-color: var(--backTraits);
		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:white;
		background-color:var(--rojoNormal);
		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(--rojoNormal);
	}
	#mainActions > div.card div.card:hover {
		background-color:var(--rojoNormal);
	}
	#mainActions > div.card div.card:hover > div.card-header > h5 > button {
		text-decoration:none;
		color:white;
	}
	#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:black;
		background-color: var(--tablaPar);
		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{
		transition: 0.5s;
	}
	#mainActions button.list-group-item-action.active{
		background-color: var(--rojoTitulo);
		border:none;
	}
	#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:white;
		padding-top:15px;
		padding-right:15px;
		overflow: visible;
		border-radius: 0.33em;
	}
	article.result strong{
		/*margin-right:0.2em;*/
		font-family: 'GoodOT_Bold';
	}
/*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 > 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 black;

		/*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(--rojoNormal);
		color:white;
		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);
	}
	article.result section.traits > div > h3.rarity.rare, article.result section.traitsExtra > div > h3.rarity.rare{
		background-color: var(--rare);
	}
	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);
	}
	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 black;
		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 black;
	}
	article.result section.content ~ section.content {
	  border-top: 1.5px solid black;
	}

	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 black;
		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: -1em;
		margin-left: 1em;
	}
	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;
	}
	p.tab4{
		margin-left:1em !important;
		text-indent: -1em !important;
	}
	p.tab5{
		text-indent:1.3em !important;
		margin-left:1.3em !important;
	}
	p.tab6{
		margin-left:2em !important;
		text-indent: -1em !important;
	}
	section.content  p.tab3{
		text-indent:1em !important;
		margin-left:1em !important;
	}
/*Bloques Info*/
	article.result section.content > aside.info{
		background-color: var(--fondoBloques);
		padding:0.5em 1em;
		display: inline-block;
		margin: 0.5em auto;
		max-width:80%;
		border-radius: 1px;
	}
	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;
	}
	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 black;
	}
/*Tables*/
	article.result  table{
		/*margin-left:-9px;*/
		z-index: 5;
		margin:0.5em 0 1em 0;
		margin-left:auto;
		margin-right:auto;
	}
	article.result table *{
		font-family:'GoodOT';
	}
	article.result  table > caption{
		text-transform: uppercase;
		color:black;
		 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(--tablaFoot);
		font-size: calc(9 * var(--midaLetra) / 16);
		line-height:2em;
	}
	article.result table > tfoot > tr > td{
		font-family: 'GoodOT' !important;
		padding-left:0.5em;
	}
	article.result table > thead > tr, article.result table > tbody > tr.header, article.result table > tbody > tr.heading {
		background-color:var(--rojoNormal) !important;
	}

	article.result  table > tbody > tr:nth-child(even) {
		background-color: var(--tablaPar);
	}
	article.result  table > tbody > tr:nth-child(odd) {
		background-color: var(--tablaImpar);
	}

	article.result  table > tbody > tr.even {
		background-color: var(--tablaPar);
	}
	article.result  table > tbody > tr.odd {
		background-color: var(--tablaImpar);
	}
	article.result  table > tbody > tr > td {
		font-family: 'GoodOT';
		text-align:center;
		vertical-align: top;
		color:black;
		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:white;
		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%;
		}
		table.extra > tfoot{
			background-color:var(--tablaFoot);
			font-size: calc(9 * var(--midaLetra) / 16);
			line-height:2em;
		}
		table.extra > caption *{
			text-transform: uppercase;
			color:black;
			 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:black;
			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 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(--tablaPar) !important;
		}
		table.extra > tbody > tr.dark {
			background-color: var(--tablaImpar) !important;
		}
		table.extra tr.title {
			background-color:var(--rojoNormal) !important;
		}
		table.extra tr.title > td{
			font-family: 'GoodOT_CondBold' !important;
			color:white;
			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.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.abilities tbody{
			border-bottom:1px solid var(--rojoNormal);
		}
		table.extra.abilities td{
			border-right:1px solid var(--rojoNormal);
			border-left:1px solid var(--rojoNormal);
			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(--rojoNormal);
			border-right:1px solid var(--rojoNormal);
		}
		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(--rojoNormal);
		}
		table.extra.proficiencies tr:not(.main) td:not(:last-child){
			width:1em !important;
			white-space: normal;
			text-align:center;
			border-left:1px solid var(--rojoNormal);
			border-right:1px solid var(--rojoNormal);

		}
		table.extra.proficiencies tr:not(.main) td:last-child{
			width:100% !important;
		}
/*TABLE.important*/
	table.important{
		border:4px solid var(--bordeAmarillo) !important;
		margin:1em !important;
	}
	table.important td{
		background-color: var(--rojoNormal) !important;
		width: 50% !important;
		color:white !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;
	}
	table.important td h2 {
		font-family: 'GoodOT_CondBold' !important;
		font-size:calc(11 * var(--midaLetra) / 10) !important;
		margin-bottom:0.5em;
	}
	table.important p{
		text-indent: 0 !important;
		font-family: 'GoodOT' !important;
		font-size:calc(12 * var(--midaLetra) / 16) !important;
		line-height: 1.2em;
	}
	/*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:black;
			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;
		}
		div.modal  table > caption{
			text-transform: uppercase;
			color:black;
			 font-family: 'GoodOT_CondBold';
			 font-size: calc(7 * var(--midaLetra) / 9);
			caption-side: top;
			padding-bottom:0;
			line-height:1em;
		}
		div.modal  table > tfoot {
			background-color:var(--tablaFoot);
			font-size: calc(9 * var(--midaLetra) / 16);
			line-height:2em;
		}
		div.modal  table > thead > tr, div.modal table > tbody > tr.heading > td{
			background-color:var(--rojoNormal);
		}
		div.modal  table > thead > tr > th, div.modal table > tbody > tr.heading > td {
			font-family: 'GoodOT_CondBold';
			color:white;
			text-align:center;
			vertical-align: bottom;
			padding:0 0.6em;
			line-height: 1.2em;
			font-size: calc(2 * var(--midaLetra) / 3);
		}
		div.modal  table > tbody > tr:nth-child(even) {
			background-color: var(--tablaPar);
		}
		div.modal  table > tbody > tr:nth-child(odd) {
			background-color: var(--tablaImpar);
		}
		div.modal  table > tbody > tr > td {
			font-family: 'GoodOT';
			text-align:center;
			vertical-align: top;
			color:black;
			padding:0 0.6em;
			font-size: calc(9 * var(--midaLetra) / 16);
		}
	/*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(--backMainColor);
	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:rgba(234,228,216,0.99);
    text-align: justify;
}
.popover-header, .popover-body {
    font-size: calc(1 * var(--midaLetra) / 2);
}
.popover-header{
	background:var(--tablaCabeza) !important;
	color:white;
}
/*.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(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
article.result footer div.source a:hover:after {
  transition: all .4s ease-out;
  right: 100%;
}

/*LINKS GENERALES*/
	a.pi{
		color:#9EA0A8;
		text-decoration: none;
	}
	a.pi:hover{
		color:#5f6579;
	}
	a.pi:active{
		color:#B2A588;
	}

	a.inner {
 font-family: 'GoodOT';
  background:
     linear-gradient(
       to bottom, var(--link) 0%,
       var(--link) 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:hover {
  background-size: 4px 50px;
  color:white;
}

a.outer {
 font-family: inherit;
  background:
     linear-gradient(
       to bottom, var(--rare) 0%,
       var(--rare) 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;
  color:white;
  margin:-0.1em -0.2em;
padding:0.1em 0.2em;
border-radius: 0.2em;
}
a.inner.spell{
	font-family: 'GoodOT';
  background:
     linear-gradient(
       to bottom, var(--link3) 0%,
       var(--link3) 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:white;
}
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:white;
}
a.inner.rule{
	font-family: inherit;
  background:
     linear-gradient(
       to bottom, #c0c0c0 0%,
       #c0c0c0 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:white;
}
section.gris a.inner{
	font-family: inherit;
  background:
     linear-gradient(
       to bottom, #ccc 0%,
       #ccc 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:white;
}

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;
}

a.btn-inform2:hover {
  background-size: 4px 50px;
  color:white;
}
	a.twitter{
		text-decoration: none;
		color:#1da1f2;
	}
	a.twitter:hover{
		color:royalblue;
	}
.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/armor.svg);
}
button.treasure{
	background-image:url(/img/treasure.svg);
}
button.creature{
	background-image:url(/img/creature2.svg);
}
button.weapon{
	background-image:url(/img/weapon.svg);
}
button.condition{
	background-image:url(/img/condition3.svg);
}
button.planes{
	background-image:url(/img/dimensions.svg);
}
div.card:hover  button.condition{
	background-image:url(/img/condition3W2.svg);
}
button.power{
	background-image:url(/img/power.svg);
}
button.backgrounds{
	background-image:url(/img/background.svg);
}
/*button.archetype{
	background-image:url(/img/archetype.svg);
}*/
button.basic{
	background-image:url(/img/basic.svg);
}
div.card:hover  button.basic{
	background-image:url(/img/basicW.svg);
}
button.skillUse{
	background-image:url(/img/skillUse2.svg);
}
button.sources{
	background-image:url(/img/books.svg);
}
button.organization{
	background-image:url(/img/organization.svg);
}
button.tools{
	background-image:url(/img/crowbar.svg);
}
div.card:hover  button.tools{
	background-image:url(/img/crowbar3.svg);
}
button.features{
	background-image:url(/img/feature.svg);
}
button.hazards{
	background-image:url(/img/trap2.svg);
}
div.card:hover  button.hazards{
	background-image:url(/img/trap2W.svg);
}
button.deity{
	background-image:url(/img/deity.svg);
}
button.shield{
	background-image:url(/img/shield3.svg);
}
button.ritual{
	background-image:url(/img/altar.svg);
}
button.magic{
	background-image:url(/img/magic.svg);
}
div.card:hover  button.magic{
	background-image:url(/img/magicW.svg);
}
button.regions{
	background-image:url(/img/cultures.svg);
}
button.cultures{
	background-image:url(/img/cultures2.svg);
}
div.card:hover  button.organization{
	background-image:url(/img/organizationW.svg);
}
button.rules{
	background-image:url(/img/regulation2.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';
	/*background-color:rgba(9,33,50,0.1); */
	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(--link3) 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);
}
nav.criaturas > a{
	padding:calc(2 * var(--midaLetra) / 9) calc(5 * var(--midaLetra) / 9);
}
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;
}
#booksAccordion > div.card > div.card-header{
	background-color: var(--fondoBloques);
	/*margin-bottom:0;*/
	padding-bottom:0;
	padding-top:0;
}
#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:black;

}
#booksAccordion > div.card > div.collapse, #booksAccordion > div.card > div.collapse > div.card-body{
	background-color: var(--fondoBloques);
}

#nav-tabContentFilter > div > div.row > div.card{
	background-color: initial;
}
#nav-tabContentFilter {
	border:1px solid #dedede;
	border-top:none;
	background-color: var(--tablaPar);

}
#nav-tabContentFilter >  div.tab-pane{
	padding:1em;
}
#nav-tabContentFilter .card-header label{
	text-transform: uppercase;
	color:white;
	font-family: 'GoodOT_CondBold' !important;
	font-size:1.25em;
	padding-left:0.75em;
}
#nav-tabContentFilter .card .card-header {
	background-color: var(--rojoNormal);
}
#nav-tabContentFilter .card .card .card-header {
	background-color: var(--tablaImpar);
}
#nav-tabContentFilter .card .card .card-header label{
	text-transform:none;
	color:black;
}
#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-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color:var(--rojoTitulo);
  box-shadow: none !important;
  border-color:var(--rojoTitulo);
}
#nav-tabContentFilter .card-body .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
	background-color:var(--rojoTitulo);
	border-color:var(--rojoTitulo);
}
#source-tab, #rarity-tab{
	font-family: 'GoodOT_CondBold';
	font-size:1.5em;
	text-transform: uppercase;
	color:var(--rojoNormal);
}
#source-tab.active, #rarity-tab.active{
	color:var(--rojoNormal);
	background-color: var(--tablaPar);
	border-bottom:1px solid var(--tablaPar);
}
#filterModal h5.modal-title{
	font-family: Taroca;
	font-size:1.5em;
}
#nav-tabContentFilter .tab-pane.active{
	background-color: var(--tablaPar);
}
#nav-tabContentFilter div.card{
	background-color:rgba(255,255,255,0.5) !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(--rojoNormal);
  border-color:var(--rojoNormal);
}
.rojo{
	color:var(--rojoNormal);
}
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;
	background-color:#eee;
	transition: all 0.4s ease-in-out;
}
#text_search:focus{
	border-color: rgba(126, 239, 104, 0.8);
	background-color: white;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.075) inset, 0 0 24px rgba(199, 74, 27, 0.6);
	color:var(--rojoNormal);
	outline: 0 none;
	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 > 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(--rojoTitulo);
}
.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(168,103,83, 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(--rojoNormal);
	margin-bottom:-0.3em !important;
	margin-top:1em;
	text-align:center;
}
h2.titulo{
	font-family:Taroca !important;
	font-variant: small-caps;
	font-size: calc(12 * var(--midaLetra) / 9) !important;
	color:var(--rare) !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(--rojoNormal);
	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:black;
	margin-top:0.5em;
	margin-bottom:0;
}
section.content h5.titulo + p{
	border-top: 1.5px solid black;
	padding-top:0.2em !important;
	margin-top:-0.2em !important;
}
aside.equation{
	background-color:var(--fondoBloques);
	border-top:1.5px solid var(--bordeBloques);
	border-bottom:1.5px solid var(--bordeBloques);
	padding:0.5em;
	margin:0.5em 0;
}
aside.equation >p{
	font-size: calc(2 * var(--midaLetra) / 3);
	font-family:GoodOT_Bold;
	text-align: center;
}
section.parents{
	padding-top:calc(1 * var(--midaLetra) / 18);
	margin-top:calc(-5 * var(--midaLetra) / 18);
	border-top: 1.5px solid black;
	border-bottom: 1.5px solid black;
	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;
}
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;
}
aside.sidebar{
	display:inline-block;
	margin:2em 2.5em 5em 2.5em;
	margin-left:3.5em !important;
	margin-bottom:3em !important;
	/*margin-top:3em !important;*/
	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;
	z-index:30;
}
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-right:-14.4em;
}
aside.sidebar div.body{
	max-width:calc(var(--midaLetra) * 16.1);
	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(--rojoNormal);
	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/boxBorder4.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-Border2.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:white !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(--fondoResaltar2);
	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/boxBorder5.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-Border3.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:black;
	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:black;
		 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;
	width: 50% !important;
	color:white !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(11 * var(--midaLetra) / 10) !important;
}
p.fancy.rule{
	border:none;
	border-bottom:2px solid #6a1313;
	position:relative !important;
	margin-bottom:1.5em;
	color:var(--rojoNormal);
	padding-bottom:15px;
}
p.fancy.rule.noborder{
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
}
p.fancy.rule:not(.noborder)::after {
    position:absolute;
    content:"";
    height:40px;
    width:100%; /* or i.e: 500px */
    background:url(/img/fancy2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 30px;
    bottom:-26px;
    left:0;
}
p.fancy.rule:not(.noborder) + p {
	margin-top:1em;
}
section.content.extra.gris{
	color:#ccc;
}
aside.inCard{
	margin-top:1em;
	margin-bottom:1em;
}
aside.inCard header{
	background: transparent !important;
}
/*		.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:white;
	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:var(--fondoBloques);
	padding:calc(0.1 * var(--midaLetra) * var(--sizeDice) / 1) calc(0.2 * var(--midaLetra) * var(--sizeDice) / 1);
	margin: 0;
	margin-top:1px;
	color:black;
	border-radius: 0.1em;
}
#relleno{
	height:calc(100% - 1 * var(--midaLetra) * var(--sizeDice) / 1);
	background-color:transparent !important;
}
#dice, #clearHistory, #resizeDiceRoller{
	color:white;
	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;
}
#dice_text:focus{
  box-shadow: 0 0 5px rgba(199, 74, 27, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(199, 74, 27, 1);

}
.crit{
	font-family:inherit;
	color:var(--link2);
}
.fail{
	font-family:inherit;
	color:var(--link);
}
.gris2{
	color:#aaa;
}
a.roll, a.roll2{
	cursor:url(/img/cursorRoll3.png), auto;
	font-family:inherit;
	font-size:inherit;
}
em.etiqueta1{
	font-family:GoodOT_CondBold;
	color:var(--rojoNormal);
	margin-left:-0.1em;

}
.tooltip-inner em.etiqueta1{
	color:white;
	margin-left:-0.1em;
	margin-right:0.2em;
}
.tooltip-inner {
    max-width: 450px;

}
li.creature{
	color:white !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, button.quitar{
	background-color:transparent;
	border:0;
	padding:0;
	margin:0;
	display:none;
	color:var(--rojoNormal);
}
li.tirada:hover button.copiar, li.tirada:hover button.quitar{
	display:flex;
}
li.tirada.anulada{
	& > div{
		text-decoration: line-through;
		text-decoration-thickness: 2px;
		text-decoration-style: wavy;
	}
	&:hover button.quitar{
		display:none;
	}
}
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:white;
}
span.uncommon{
	text-transform: uppercase;
	font-family:olsentf;
	background-color:var(--rarity);
	color:white;
}
.lightMode {
    display: none !important;
}

table.transparent *{
	background-color:transparent !important;
	font-family: GoodOt;
	font-size: calc(2 * var(--midaLetra) / 3) !important;
}
table.transparent strong{
	font-family:GoodOt_Bold;
}
table.transparent tr > td:first-child{
	padding-right:0;
	padding-left:0;
}
aside.sidebar header {
	background-color:transparent;
	background-image:none;
}
#DC1to2,#GP1to2, .formulari {
	background-color:var(--fondoSidebar);
	margin:1em;
	border-radius: 0.3em;
	/*box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.33);*/
}
#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);	*/
	/*height:100%;*/
	color:rgba(0,0,0,0.6);
	font-size:3em;
	/*font-family: GoodOT_Bold;*/
}
.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:rgba(255,255,255,0.5);
	border-radius:0.1em;
	width:1.3em;
	margin-left:0.2em;
	display:none;
}
#DC2eX_form{
	/*color:var(--mhighEmphasis) !important;*/
}
#DC2e_form{
	color:black !important;
	/*color:var(--highEmphasis) !important;	*/
}
label.destaca_form{
	color:var(--rojoTitulo) !important;
}
input.coins{
	width:5em;
	margin-right:1em;
	border-radius:0.3em;
	margin-left:0.2em;
}
#coins2_form{
	font-size:1.5em;
	color:var(--rojoTitulo);
}
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.66) 0%, rgba(255,255,255,0.33) 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(--rojoNormal);
	display: inline-block;
	margin-left: 5px;
}
.text2 {
	font-family:knemabold;
	font-size:1.8em;
	color: var(--rojoNormal);
	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(--rojoNormal);
	-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;
	}
}
small.PwL{
	margin-left:0.5em;
	font-family:albertus_mt;
	font-size:0.7em;
	color:var(--rojoTitulo);
	position: relative;
	bottom:0.1em;
}
/*a + label.nolink{
	margin-left:-0.8em !important;
}*/
.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 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:black;
}
sup.source{
	padding-left:calc(1em / 8) ;
	padding-top:0.5em;
	font-weight: 500;
	color:var(--mlowEmphasisL);
	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;
  }
}
label.custom-control-label.ancestry{
	font-family:GoodOT_Bold;
}
.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(94, 0, 0, 0.25); /* pink, 25% opacity */
}
aside.skillActions{
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	font-size:calc(5 * var(--midaLetra) / 8);
	padding-left:0em;
	padding-bottom: 0.2em;
	background-color: var(--tablaPar);
	margin: 0.1em 0.4em;
	padding: 0 0.8em;
}
aside.skillActions *{
	color:rgba(0,0,0,0.79);
    font-family: 'GoodOT';
}
aside.skillActions h4{
	font-family:'GoodOT_Bold';
	font-size:calc(var(--midaLetra) * 7 / 9);
	color: white;
	background-color:var(--tablaCabeza);
	text-transform: uppercase;
	padding: 0.1em 0.4em;
	margin: 0 -0.65em;
}
aside.skillActions h4 *{
	color: white;
}
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:rgba(0,0,0,0.79);
}
button.skillActions{
    font-family:'olsentf';
    background-color:transparent;
	border:none;
	border-radius:0.2em;
	padding: 0 ;
	margin-left:0;
	margin-right:0;
	color:maroon;
}
#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 *{
font-family:'GoodOT';
}
table.tablesorter > caption{
text-transform: uppercase;
color:black !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:var(--rojoNormal) !important;
}
table.tablesorter > thead > tr:nth-child(1) > th{
	position:sticky;
	top:0;
	background-color:var(--rojoNormal) !important;
	z-index:50;
}
table.tablesorter > thead > tr:nth-child(2) > td {
	position:sticky; 
	top:32px; 
	z-index:51;
	background-color:var(--rojoNormal) !important;
	border-top:none;
}
table.tablesorter > tbody > tr:nth-child(even) {
background-color: var(--tablaPar);
}
table.tablesorter > tbody > tr:nth-child(odd) {
background-color: var(--tablaImpar);
}
table.tablesorter > tbody > tr.even {
background-color: var(--tablaPar);
}
table.tablesorter > tbody > tr.odd {
background-color: var(--tablaImpar);
}
table.tablesorter > tbody > tr > td {
font-family: 'GoodOT';
text-align:center;
vertical-align: top;
color:black;
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:white;
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 black;
	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(--rojoNormal);
}

.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(--rojoNormal);
}
.custom-switch.rush .custom-control-input:focus~.custom-control-label::before {
  border-color: var(--rojoNormal) !important;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 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(--rojoNormal) !important;
  background-color: var(--rojoNormal) !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:#282828;
}
a.youtube i, a.youtube svg{
	color:#FF0000;
}
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.active{
	background-color:var(--rojoTitulo);
}
#craft_select a.dropdown-item:not(.active):focus{
	background-color:var(--rojoNormal);
}

.rocker {
  display: inline-block;
  position: relative;
  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 #eee;
}

.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: #999;
  border: 0.5em solid #eee;
  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: #ddd;
  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;
}
svg.advancementPath > g.Adv_layer > circle:not(.Adv_activado){
	fill: #fff;/*"url(#grad1)";*/
	stroke-width:0.2px;
	stroke:#c74a1b;
	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:#c74a1b;
}
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:#dee2e6;
	stroke-width:0;
}
svg.advancementPath > g.Adv_paths > path{
	stroke:#dee2e6;
	fill:none;
	stroke-width:0.7938px;
}
label.resultat{
	height:1em;
/*	border:1px solid white;*/
	color:rgba(0,0,0,0.6);
	font-size:3em;
	font-family: GoodOT_Bold;
	width:1.5em;
}
label.resultat2{
	text-align:center;
	font-family:GoodOT_CondBold;
	line-height:1;
	color:rgba(0,0,0,0.6);
	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: #dee2e6;
  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: #c74a1b;
  border-radius: 50%;
  height: 0.75em;
  width: 0.75em;
}

input.tipo1[type='range']:focus::-webkit-slider-thumb {
  outline: 3px solid rgba(199, 74, 27,0.5);
  outline-offset: 0.125em;
}

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

/* slider thumb */
input.tipo1[type='range']::-moz-range-thumb {
  background-color: #c74a1b;
  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 #c74a1b;
  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(--link2);
	display: inline-block;
	margin-left:1em;
	margin-right:-0.9em;
	width:1em;
	height:1em;
	animation: bounce2 2s ease;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

input.pet-ability[type='checkbox']{
	visibility:hidden !important;
	cursor:pointer;
}

input.pet-ability[type='checkbox'] + label{
	cursor:pointer;
}
button:has(input.pet-ability) > svg{
	height:1em;
	width:1em;
}
button:has(input.pet-ability:checked) > svg{
	fill:red;
}

a.hpTool{
	font-family:inherit;
	text-decoration:none;
	color:inherit;
	cursor: url("/img/cursorBlood.png"), auto;
	&.altered{
		color:maroon;
	}
	&.death{
		&: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;
		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;
	}
}