.tituloFicha{
    height: 64px;
    margin-bottom: 5px;
}

.imgTituloFicha{
    display: block;
    margin: 0 auto;
    max-height: 80px;
    width: auto;
    z-index: 100;
}

.mainTitle{font-size: 3rem;text-align: center;}
.subtitle{font-size: 2rem; text-align: center;}

.atras{
    margin-top: 30px;
}

#inicio_botones,#escogeRaza,#tipo_renshou,#elegirProfesion,#monjeGuerreroEstilo,#ataqueDefensaEscoger,#armamento,#tecnicas{
    text-align: center;
    margin: 15px auto;
}

#ptosPend, #maxPtos{
    display: inline-block;
    width: 20px;
    text-align: center;
}


.subLine{
    margin-top: 20px;
    /*text-align: center;*/
}

.botones{
    display: inline-block;
    border-radius: 10px;
    background-color: #0f9bbb;
    color: white;
    -webkit-text-stroke: 0.5px rgba(15,155,187,1);
    padding: 10px;
    letter-spacing: 1px;;
    margin: 10px 10px 10px 0px;
    text-align: center;
}

.botonesInicio{
    width: 97px;
}

.botonesRaza{
    width: 97px;
}

.botonesJob{
    width: 100px;
    height: 80px;  
}

.botonesRazaSubtipo{
    width: 95px;
}

.botonesLast{
    display: inline-block;
    border-radius: 10px;
    background-color: #0f9bbb;
    color: white;
    -webkit-text-stroke: 0.5px rgba(15,155,187,1);
    padding: 10px;
    letter-spacing: 1px;;
    margin: 10px 0px 10px 0px;
}

.botonActive{
    background-color: black;
    color: white;
    -webkit-text-stroke: 0.5px black;
    text-decoration: none;
}

.botonActive:active{color: white;-webkit-text-stroke: 0.5px black;}

#breadcrumpCrear{
    margin: 15px;
    color: white;
    -webkit-text-stroke: 0.5px rgba(15,155,187,1);
    padding: 10px;
    background: rgba(15,155,187,1);
    background: -moz-linear-gradient(left, rgba(15,155,187,1) 0%, rgba(15,155,187,1) 22%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(15,155,187,1)), color-stop(22%, rgba(15,155,187,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(15,155,187,1) 0%, rgba(15,155,187,1) 22%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(15,155,187,1) 0%, rgba(15,155,187,1) 22%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(15,155,187,1) 0%, rgba(15,155,187,1) 22%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(15,155,187,1) 0%, rgba(15,155,187,1) 22%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f9bbb', endColorstr='#ffffff', GradientType=1 );
}

.breadcrumpLink{
    color: white;
    -webkit-text-stroke: 0.5px rgba(15,155,187,1);
}

#breadcrumpLink:hover,#breadcrumpLink:active{
    text-decoration: underline;
}

#ronin_pregunta{
    float: left;
    width: 200px;
    height: 200px;
    background-color:white;
    border: 1px solid #ddd;
    padding: 15px;
    position: fixed;
    top: 30%;
    left: 40%;
    z-index: 100;
}

.nombre-caract{display: inline-block; width: 85px; margin-right: 10px;}
.barra-caract{display: inline-block; width: 65%;}
.range-slider{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    margin-top: 5px;
    height: 15px; /* Specified height */
    border-radius: 5px!important;
    background: white; /*background */
    outline: 1px solid #0f9bbb; 
    opacity: 0.4; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

.range-slider:hover {
    opacity: 1; 
  }

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 30px; /* Set a specific slider handle width */
    height: 30px; /* Slider handle height */
    border-radius: 50%;
    background: #0f9bbb;
    cursor: pointer;
}

.range-slider::-moz-range-thumb {
    width: 30px; /* Set a specific slider handle width */
    height: 30px; /* Slider handle height */
    border-radius: 50%;
    background: #0f9bbb;
    cursor: pointer;
}

.range-sliderBM_Lg{
    width: 30px; /* Set a specific slider handle width */
    height: 30px; /* Slider handle height */
    border-radius: 50%;
    background: #0f9bbb;
    cursor: pointer;
}

.cuadro-valor-caract{
    display: inline-block;
    background-color: #0f9bbb;
    width: 60px;
    height: 25px;
    text-align: center;
    padding-top: 3px;
}
.valor-caract,#bondad,.transformacion{display: inline;color: white;-webkit-text-stroke: 0.5px rgba(15,155,187,1);}

#nombre-maldad{width: 50px;}

#fue,#res,#ag,#ref,#hab,#chi,#cons,#aut,#conc,#prec,#apa{
    background-image:linear-gradient(to right, #0f9bbb  calc(var(--value)*16.7%), white 0);-webkit-text-stroke: 0.5px rgba(15,155,187,1);
}

#bondadMaldad_total{
    background-image:linear-gradient(to right, #0f9bbb  calc(var(--value)*16.7%), black 0);
}

/*.bondad-barra{width: 70.9%;}
.barra-caractXs{width: 75%;}*/

.compet{
    display: inline-block;
    width: 150px;
}

.compet > div.nombre-compet{
    display: inline-block;
    width: 95px;
    text-align: right;
}

.compet > div.valor-compet{
    display: inline-block;
    width: 50px;
}

.compet > div.valor-compet > input{
    text-align: center;
}

.casillaIdioma{
    display: inline-block;
    margin-bottom: 20px;
}
.nombre-idioma{
    text-align: right;
    right: 20px;
}

.valor-idioma{
    display: inline-block;

}

.valor-idioma > input{
    text-align: center;
}

.arma1_title, .tec_title{
	border: 1px solid #ddd;
	padding: 10px 0px;
	text-align: center;
}

.arma1, .arma1_title, .tec_title,.arma2_title{
	border: 1px solid #ddd;
	padding: 10px 0px;
    text-align: center;
    height: 40px;
}

.arma1{
    font-size: 1.3rem;
}

.arma2, .tecn2{
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 40px;   
	padding: 8px 0px!important;
    text-align: center;
    font-size: 1.3rem;
}

.tecn2_first{
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    height: 40px;   
	padding: 8px 0px!important;
    text-align: center;
    font-size: 1.3rem;
}

.armaX,.tecnX{
	display: inline-block;
	padding: 10px;
}

.lineacuadro{
    margin: 0px;
    position: relative;
}

.xDesktop{
    position: absolute;
    top: 5px;
    right: 25px;
    width: 30px;
    height: 30px;
    background-color: #0f9bbb;
    border-radius: 50%;
    color: white;
    -webkit-text-stroke: 0.5px rgba(15,155,187,1);
    float: right;
    cursor: hand;
}

.xMobile{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    background-color: #0f9bbb;
    border-radius: 50%;
    color: white;
    -webkit-text-stroke: 0.5px rgba(15,155,187,1);
    float: right;
    cursor: hand;
    padding-top: 5px;
}

.tecnLinea{
	display: block;
}

.imgPreguntaTecnica{

	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0px 0px 20px;
}

.tiposTecnicas{
	margin: 15px 30px;
}

.magia, .magiaRitos{
	display: inline-block;
}

.CuadroElementos{
	width: 100%;
	height: 100%;
	position: relative;
	background-color: rgba(255, 255, 255, .8);
	z-index: 100;
}

.cuadroElemInter{
	position: absolute;
	top: 30%;
	left:30%;
	width: 40%;
	background-color: white;
	border: 1px solid #ddd;
}