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

@media print {
	
	/*MODALS*/
	h3.modal-title strong{
	font-family: 'knemabold';
	}
	.modal-body > ul{
	padding-left: 0;
	}
	a {
	background:none !important;
	text-decoration:none !important;
	color:inherit !important;
	}
	.no-print{
	display:none !important;
	}
}
.tooltip{
font-size: calc(10 * var(--midaLetra) / 18);
}
.tooltip-inner {
max-width: 1000px !important; 
}
@font-face {
font-family: 'SabonLTSstd';
src: url('/fonts/SabonLTStd-Roman.woff2') format('woff2'),
url('/fonts/SabonLTStd-Roman.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face{font-family:'sketch_gothic_schoolregular';src:url('/fonts/sketch_gothic_school-webfont2.woff2')format('woff2'),url('/fonts/sketch_gothic_school-webfont2.woff')format('woff');font-weight:normal;font-style:normal}
@font-face{font-family:'wolf_in_the_cityregular';src:url('/fonts/wolf_in_the_city-webfontv2.woff2')format('woff2'),url('/fonts/wolf_in_the_city-webfontv2.woff')format('woff');font-weight:normal;font-style:normal}
@font-face {
font-family: 'knemabold';
src: url('/fonts/knema-webfont.woff2') format('woff2'),
url('/fonts/knema-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Pathfinder_Icons';
src: url('/fonts/Pathfinder-Icons.woff2') format('woff2'),
url('/fonts/Pathfinder-Icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'GoodOT_CondBold';
src: url('/fonts/GoodOT-CondBold.woff2') format('woff2'),
url('/fonts/GoodOT-CondBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GoodOT_Bold';
src: url('/fonts/goodot-bold-webfont.woff2') format('woff2'),
url('/fonts/goodot-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GoodOT';
src: url('/fonts/goodot-webfont.woff2') format('woff2'),
url('/fonts/goodot-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'albertus_mt';
src: url('/fonts/albertus_mt.woff2') format('woff2'),
url('/fonts/albertus_mt.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'moonshiner';
src: url('/fonts/moonshiner-regular-webfont.woff2') format('woff2'),
url('/fonts/moonshiner-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-variant: small-caps;
}
@font-face {
font-family: 'SabonItalic';
src: url('/fonts/SabonLTStd-Italic.woff2') format('woff2'),
url('/fonts/SabonLTStd-Italic.woff') format('woff');
font-weight: normal;
font-style: normal;
font-variant: small-caps;
}

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: " "; }
*{
font-family: 'SabonLTSstd';
box-sizing: border-box;
}
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
background-color:  var(--backMainColor);
}
main {
	margin-bottom:70px;
}
footer.principal{
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 60px;
color:var(--mainColor);
font-size: calc(1 * var(--midaLetra) / 2);
background-color:rgba(255,255,255,0.3);
padding-top:10px;
}
a.twitter{
text-decoration: none;
color:#1da1f2;
}
a.twitter:hover{
color:royalblue;
}
h1.mainTitle{
cursor:pointer;
}
h1.mainTitle > span{
font-family: 'sketch_gothic_schoolregular';
color:var(--mainColor);
font-size:1em;
}
h1.mainTitle>span.special{font-family:'wolf_in_the_cityregular';color:#a23424;font-size:1em;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)}
aside.linkR{
position: absolute;
right:calc(1 * var(--midaLetra) / 6);
top:calc(1 * var(--midaLetra) / 6);
display:flex;
	flex-direction:row;
	justify-content: flex-end;
}
aside.linkR nav.dropdown-menu{
width: calc(70 * var(--midaLetra) / 9) !important;
font-size:calc(5 * var(--midaLetra) / 6);
}
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;

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

section.filters{
padding:0.5em;
padding-bottom:1em;
border:none;
border-bottom:2px solid #6a1313;
position:relative !important;
margin-bottom:1.5em !important;
}
section.filters::after{
position:absolute;
content:"";
height:40px;
width:100%; /* or i.e: 500px */
background:url(/img/fancy3.png);
background-repeat: no-repeat;
background-position: center;
background-size: auto 30px;
bottom:-26px;
left:0;
}
div.filter.schools{
	width:8em;
}
div.filter.traits{
	width:8.8em;
}
div.filter.actions{
	width:9em;
}
div.filter.level{
	width:5.5em;
}
div.filter.sources{
	width:11em;
}
div.list-group {
	height:8em;
	overflow-y: auto;
}

div.list-group > button{
	padding:0.2em 0.4em;
}

button.filter_item{
font-family: GoodOT;
font-size:1em;/*calc(0.4 * var(--midaLetra));*/
line-height: 1.5em !important;
/*min-height:2em !important;*/
overflow-wrap: break-word;
}
label.full, label.nofull{
font-family: GoodOT_Bold;
font-size:1em;/*calc(0.4 * var(--midaLetra));	*/
text-transform: uppercase;
color:var(--rojoNormal);
}	
#laTabla{
/*margin-left:-9px;*/
width:100%;
z-index: 5;
margin:0.5em 0 1em 0;
margin-left:auto; 
margin-right:auto;
margin-top:-1.8em;
}
#laTabla *{
font-family:'GoodOT';
}
#laTabla > caption{
text-transform: uppercase;
color:black !important;
font-family: 'GoodOT_CondBold';
font-size: 2em;
caption-side: top;
padding-bottom:0;
line-height:1em;
}
#laTabla > tfoot {
background-color:var(--tablaFoot);	
font-size: calc(9 * var(--midaLetra) / 16);
line-height:1.5em;
}
#laTabla > tfoot > tr > td{
font-family: 'GoodOT' !important;
padding-left:0.5em;
}
#laTabla > thead > tr, #laTabla > tbody > tr.header, #laTabla > tbody > tr.heading {
background-color:var(--rojoNormal) !important;
}
#laTabla > thead > tr:nth-child(1) > th{
	position:sticky;
	top:0;
	background-color:var(--rojoNormal) !important;
	z-index:50;
}
#laTabla > thead > tr:nth-child(2) > td {
	position:sticky; 
	top:32px; 
	z-index:51;
	background-color:var(--rojoNormal) !important;
	border-top:none;
}
#laTabla > tbody > tr:nth-child(even), #laTabla > tbody > tr.even, #laTabla > tbody > tr.even > td {
background-color: var(--tablaPar);
}
#laTabla > tbody > tr:nth-child(odd), #laTabla > tbody > tr.odd, #laTabla > tbody > tr.odd > td {
background-color: var(--tablaImpar);
}
#laTabla > tbody > tr > td {
font-family: 'GoodOT';
text-align:center;
vertical-align: top;
color:black;
padding:0 0.4em;
font-size: 1em;
}
#laTabla > thead > tr > th, #laTabla > tbody > tr.header > td, #laTabla > 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;
}
#laTabla > tbody > tr.extra {
background-color:var(--tablaExtra);
}
#laTabla > tbody > tr.extra >  td {
font-family: 'GoodOT_Bold';
font-size: 1em;
}
#laTabla > tbody > tr > td:nth-child(2), #laTabla > tbody > tr > td:last-child {
text-align:left !important;
}
#laTabla > thead > tr > th:nth-child(2), #laTabla > thead > tr > th:last-child {
text-align:left !important;
padding:0 1.8em 0 0.4em;
}	
#laTabla > tbody > tr > td:nth-child(1), #laTabla > thead > tr > th:nth-child(1){
width:2.5em;
}
#laTabla > tbody > tr > td:nth-child(3), #laTabla > thead > tr > th:nth-child(3){
width:4.5em;
}
#laTabla > tbody > tr > td:nth-child(6), #laTabla > thead > tr > th:nth-child(6){
width:4.5em;
}
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.inner.spell{
font-family: inherit;
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;
}
.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;
}
.gris a.inner:hover {
background-size: 4px 50px;
color:white;
}


/*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:-0.5em;
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;
}
/*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{
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.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);
}
/*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;
}
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;
/*display: flex;
flex-direction:column;
justify-content: start;
align-items: start;*/
}
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), p.tab0 + p:not(.tab0):not(.tab3):not(.tab4), ol + p:not(.tab0), p.fancy + p:not(.tab0):not(.tab3) {
text-indent:0 !important;
}			
p.tab3{
text-indent:2em !important;	
margin-left:1em;
}
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.tab4{
margin-left:1em !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.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 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 {
background-color:var(--rojoNormal);
}
div.modal  table > thead > tr > th {
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);
}
section.content.extra > p{
text-indent: 0 !important;
}

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-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%;
}
.red{
color:var(--rojoNormal) !important;
}
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);

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







.custom-control-label:before{
background-color:#fafafa;
border-color:var(--mainColor);
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
background-color:var(--rojoNormal);
}

.custom-control-input:focus ~ .custom-control-label::before {
box-shadow:none !important;
}

.btn-maroon { 
font-family: knemabold;
text-transform: uppercase;
font-size:1.5em;
background-color: var(--rojoNormal); 
border-color: var(--mainColor); 
color: white; 
} 

.btn-maroon:hover { 
background-color: var(--mainColor) !important; 
color:white;
}

.btn-toggle { 
font-family: knemabold;
text-transform: uppercase;
font-size:1.4em;
background-color: var(--rojoNormal); 
border-color: var(--mainColor); 
color: white;
position:relative; 
transition: 0.5s ease-in;
} 
.btn-toggle *{
	font-family: knemabold;
	text-transform: uppercase;
}
.btn-toggle:first-child > svg{
	position:absolute; 
	left:0.4em; 
	top:0.3em;
	transition: 0.8s ease-in;
}
.btn-toggle:last-child > svg{
	position:absolute; 
	right:0.4em; 
	top:0.3em;
	transition: 0.8s ease-in;
}

.btn-toggle.disabled > svg:first-child{
	opacity:0;
}

.btn-toggle:hover { 
background-color: var(--mainColor) !important; 
color:white;
} 
#toggle .btn-toggle:first-child{
	padding-left:1.6em;
	border-top-left-radius: 1em;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 1em;
	margin-right:0.05em;
}
#toggle .btn-toggle:last-child{
	padding-right:1.6em;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 1em;
	border-bottom-right-radius: 1em;
}
#toggle .btn-toggle:focus{
	box-shadow:none;
}
.btn-blue { 
font-family: knemabold;
text-transform: uppercase;
font-size:1.5em;
background-color: var(--link3); 
border-color: var(--darkBlue); 
color: white; 
} 

.btn-blue:hover { 
background-color: var(--rare) !important; 
border-color: var(--darkBlue) !important; 
color:white;
}  
.btn-brown { 
font-family: knemabold;
text-transform: uppercase;
font-size:1.5em;
background-color: var(--link2); 
border-color: var(--size); 
color: white; 
} 

.btn-brown:hover { 
background-color: var(--size) !important; 
color:white;
}
.btn-outline-maroon { 
background-color: white; 
border-color: var(--rojoNormal); 
color: var(--rojoNormal); 
} 

.btn-outline-maroon:hover { 
background-color: var(--rojoNormal) !important; 
color: #000000 !important; 
} 
.list-group-item-maroon { 
background-color: white; 
border-color: var(--rojoNormal); 
color: var(--rojoNormal); 
outline-color:var(--mainColor) !important;
padding-top:0.15em;
padding-bottom:0.15em;
padding-left:0.5em;
} 
.list-group-item-etiqueta{
	background-color: #eee; 
	border-color: var(--rojoNormal); 
	color: var(--rojoNormal); 
	outline-color:var(--mainColor) ;
	padding-top:0.15em;
	padding-bottom:0.15em;
	padding-left:0.5em;
	white-space: nowrap;
	text-align: center;
	text-transform: uppercase;
	font-family: GoodOT_Bold;
}
.list-group-item-maroon:hover { 
background-color: var(--tablaImpar) !important; 
color: #000000 !important; 
} 

.list-group-item-maroon:active { 
background-color: var(--rojoNormal) !important; 
color: white !important; 
border-color:var(--mainColor) !important;
z-index:0;
}
.list-group-item-maroon.active{
background-color: var(--rojoNormal) !important; 
color: white !important; 	
border-color:var(--mainColor) !important;
z-index:0;
}

.list-group-item-maroon.negate{
background-color: #3e1f1f;
color: white !important; 	
text-decoration:line-through;
border-color:var(--mainColor) !important;
}
.filterHead{
font-family:GoodOT;
padding-left:0.5em !important;
margin-top:-0.5em !important;
font-size:1.2em;
color:green var(--rojoNormal);
}
label.heighten{
font-family: GoodOT_Bold;
font-size:1em;/*calc(0.4 * var(--midaLetra));	*/
text-transform: uppercase;
color:var(--rojoNormal);
}
span.accordion-body{
margin-left:0.5em;
text-indent: 0;
font-family: 'GoodOT';
/*background-color:rgba(9,33,50,0.1); */
color:var(--link3);
}
#btn_print{
width:5.5em;
}
#btn_reset, #btn_save, #btn_options{
width:2.5em;
}
#btn_filtrar{
width:5.5em;
}
#btn_instructions{
width:8.5em;
}
#btn_instructions2{
	min-width:5.5em;
	overflow: hidden;
	padding:0;
	text-align:center;
}

.wrap {
/* position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
margin-top:1em;
width:100%;
text-align:center;
}

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

.bounceball {
position: relative;
display: inline-block;
height: 37px;
width: 15px;
}
.bounceball:before {
position: absolute;
content: '';
display: block;
top: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--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;
}
}

h3.modal-title strong{
font-family: 'knemabold';
}
.modal-body > ul{
/*padding-left: 1em;*/
}
div.modal p, li{
font-family: 'GoodOT';
font-size: 1em;
text-align: justify;
}
/*#cantripLvl_label{
font-family: GoodOT_Bold;
font-size:1em;
text-transform: uppercase;
color:var(--rojoNormal);
}
#cantripLvl{
width:auto !important;
height:auto !important;
font-family:'GoodOT';
font-size:1em;
}*/
h2.titulo{
font-family:moonshiner !important; 
font-variant: small-caps; 
font-size: 2em;
color:var(--encabezado2);
margin-top:0.3em;
margin-bottom:0;
}
/*div.modal-body > h2:first-child{
margin-top:0em !important;
color:pink;
}*/
.filterhidden { display: none !important; }
.resaltar{
font-family: GoodOT_Bold;
font-size: 1.2em;
background-color: var(--tablaPar);
border-top:1.5px solid var(--encabezado2);
border-bottom:1.5px solid var(--encabezado2);
text-align:center;
padding:1em 0;
}
.resaltar >span{
font-family: GoodOT_Bold;
/*font-size: 2em;*/
}
#copiedText{
display:none;
font-family: 'SabonItalic' !important;
font-size:1em;
color:var(--rojoNormal);
}
.gris{
color:#ccc;
}
div.source{
font-family: 'GoodOT';
font-size: calc(1 * var(--midaLetra) / 2);
}

div.source a {
/*font-size: 40px;*/
color:var(--rojoTitulo);
display: inline-block;
position: relative;
overflow: hidden;
text-decoration: none;
}
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;
}
}

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;
}
#cantripLvl_label{
	font-family: GoodOT_Bold;
	font-size:1em;/*calc(0.4 * var(--midaLetra));	*/
	text-transform: uppercase;
	color:var(--rojoNormal);
}
#cantripLvl{
	width:auto !important;
	height:auto !important;
	font-family:'GoodOT';
	font-size:1em;
}
#searchText{
	font-family: GoodOT;
	position:relative;
	font-size:1.2em;
	background: white url(../img/search-duotoneL.svg) no-repeat calc(100% - 5px) center;
	background-size:  auto 66%;
	padding-left:5px;
	padding-right:30px;
	outline:none;
	border:1px solid var(--rojoNormal) !important;
	border-radius: 0 0.3em 0.3em 0;
}
#searchText:focus{
	box-shadow:0 0 1px 1px var(--rojoNormal);
}
#listName{
	font-family: GoodOT;
	position:relative;
	background: white;
	outline:none;
	border:1px solid var(--rojoNormal) !important;
	border-radius: 0 0.3em 0.3em 0;
}
#listName:focus{
	box-shadow:0 0 1px 1px var(--rojoNormal);
}
abbr{
	font-family:inherit;
	font-size:inherit;
}
.lightMode {
    display: none !important;
}

/*
os-theme-thick
*/

.os-theme-thick > .os-scrollbar {
    padding: 5px;
}
.os-theme-thick > .os-scrollbar:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    top: 2px;
    bottom: 2px;
    right: 2px;
    left: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.os-theme-thick > .os-scrollbar:hover:before {
    border: 1px solid rgba(0, 0, 0, 0.16);
}
.os-theme-thick > .os-scrollbar.active:before {
    border: 1px solid rgba(0, 0, 0, 0.24);
}
.os-theme-thick > .os-scrollbar-horizontal {
    right: 18px;
    height: 18px;
}
.os-theme-thick > .os-scrollbar-vertical {
    bottom: 18px;
    width: 18px;
}
.os-theme-thick.os-host-rtl > .os-scrollbar-horizontal {
    left: 18px;
    right: 0;
}
.os-theme-thick > .os-scrollbar-corner {
    height: 18px;
    width: 18px;
    background-color: transparent;
}
.os-theme-thick > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.os-theme-thick > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
}
.os-theme-thick > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
    background: rgba(0, 0, 0, 0.6);
}
.os-theme-thick > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: rgba(0, 0, 0, 0.8);
}
.os-theme-thick > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: 30px;
}
.os-theme-thick > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: 30px;
}
.os-theme-thick > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    bottom: -5px;
    display: block;
}
.os-theme-thick > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    top: -3px;
    bottom: -5px;
}
.os-theme-thick > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    left: -3px;
    right: -5px;
}
.os-theme-thick.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    right: -3px;
    left: -5px;
}
.os-theme-thick.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    transition: background 0.3s;
}
.os-theme-thick.os-host-transition > .os-scrollbar:before {
    transition: border 0.3s;
}

/*
os-theme-thin
*/

.os-theme-thin > .os-scrollbar-horizontal {
    right: 14px;
    height: 14px;
    padding: 0px 6px;
}
.os-theme-thin > .os-scrollbar-vertical {
    bottom: 14px;
    width: 14px;
    padding: 6px 0px;
}
.os-theme-thin.os-host-rtl > .os-scrollbar-horizontal {
    left: 14px;
    right: 0;
}
.os-theme-thin > .os-scrollbar-corner {
    height: 14px;
    width: 14px;
    background-color: transparent;
}
.os-theme-thin > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
}
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    left: 0;
    right: 0;
    height: 2px;
    top: 50%;
    margin-top: -1px;
}
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track:before,
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    top: 0;
    bottom: 0;
    width: 2px;
    left: 50%;
    margin-left: -1px;
}
.os-theme-thin > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    height: 4px;
    margin-top: -2px;
}
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    width: 4px;
    margin-left: -2px;
}
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
    background: rgba(0, 0, 0, 0.7);
}
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before,
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    background: #000;
}
.os-theme-thin > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    height: 100%;
    min-width: 30px;
}
.os-theme-thin > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    width: 100%;
    min-height: 30px;
}
.os-theme-thin.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: height 0.3s, margin-top 0.3s, background 0.2s;
}
.os-theme-thin.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: width 0.3s, margin-left 0.3s, background 0.2s;
}

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;
}
.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 */
}


.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 #eee;
}

.rocker-small {
  font-size: 0.8em;
  letter-spacing:0.1em;
 /* 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;
}