/* Efectos basicos /. ************************************** */



.bien_back {
    background-color: #14AB14;
    color: white;
    border-color: white;
}

.mal_back {
    background-color: #CC2C1E;
    color: white;
    border-color: white;
}

.mal_tiembla {
	transition: all 200ms ease;
	animation: mal_tiembla 125ms ease-in-out infinite alternate;
}
@keyframes mal_tiembla {
 0% {
transform:rotateZ(-5deg);
}
 50% {
transform:rotateZ( 0deg) scale(.8);
border-color: red;
}
 100% {
transform:rotateZ( 5deg);
}
}
.mal_cabeza {
	transition: all 250ms ease;
	animation: mal_cabeza 250ms ease-in-out infinite alternate;
}
@keyframes mal_cabeza {
 0% {
 margin-left:0px;
}
 50% {
 margin-left:20px;
 border-color: red;
}
 100% {
 margin-left:-20px;
}
}
.bien_cabeza {
	transition: all 250ms ease;
	animation: bien_cabeza 250ms ease-in-out infinite alternate;
}
@keyframes bien_cabeza {
 0% {
 margin-top:0px;
}
 50% {
 margin-top:20px;
 border-color: green;
}
 100% {
 margin-top:-20px;
}
}
.mal_cabeza_R {
	transition: all 250ms ease;
	animation: mal_cabeza_R 250ms ease-in-out infinite alternate;
}
@keyframes mal_cabeza_R {
 0% {
 left:0px;
}
 50% {
 left:20px;
}
 100% {
 left:-20px;
 border-color: red;
}
}
.bien_cabeza_R {
	transition: all 250ms ease;
	animation: bien_cabeza_R 250ms ease-in-out infinite alternate;
}
@keyframes bien_cabeza_R {
 0% {
 top:0px;
}
 50% {
 top:20px;
}
 100% {
 top:-20px;
 border-color: green;
}
}
/* Escala */

.sca, .sca_child>* {
	transition: all 300ms ease;
	cursor: pointer;
}
.sca:hover, .sca_child>*:hover {
	transform: scale(1.1);
}
.sca:active, .sca_child>*:active {
	transform: scale(0.9);
}
/* Transicion en drag revert */
.animation {
	transition: all 250ms ease;
}
/* Botonera */
  
#botonera:before {
	background-color: transparent!important;
}
#botonera div {
	border-bottom: 6px solid #89380f;
}
/* Escala infinite*/
.agranda {
	transition: all 250ms ease;
	animation: agranda 800ms ease-out infinite alternate;
	cursor: pointer;
}
 @keyframes agranda { 
 from {
 transform:scale(1);
}
 to {
 transform:scale(1.15);
 -webkit-box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
 -moz-box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
 box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
}
}
.off {
	visibility: hidden;
}
.encima {
	transform: scale(1.15);
	transition: all 250ms ease;
}
img.cerrar {
    position: absolute;
    top: -49px;
    right: -40px;
}
.hide{
	display:none;
}
/* ./  ************************************** */
 

.tg {
    position: absolute; 
    width: 1200px;
    height: 72px;
    border-radius: 15px; 
    border: 3px dashed black;
    font-size: 26px;
    padding: 11px; 
}
 
.tg.ps1 {
    top: 330px;
    left: 29px;
    height: 112px;
    width: 582px;
}
.tg.ps2 { 
    top: 544px;
    left: 26px;
    height: 97px;
    width: 589px;
}
.tg.ps3 {
    top: 332px;
    left: 72px;
    height: 90px;
    width: 552px;
}

.graficas>div>div {
    width: 10px;
    height: 10px;
    border-radius: 15px;
    border: 2px solid black;
    background-color: #8BC53F;
    margin-top: 12.9px;
}
.grup1 {
    position: absolute;
    top: 37px;
    left: 92px;
}
.grup2 {
    position: absolute;
    top: 37px;
    left: 133px;
}
.grup3 {
    position: absolute;
    top: 37px;
    left: 173px;
}
.grup4 {
    position: absolute;
    top: 37px;
    left: 214px;
}
.grup5 {
    position: absolute;
    top: 37px;
    left: 254px;
}
.grup6 {
    position: absolute;
    top: 37px;
    left: 295px;
} 
.grup7 {
    position: absolute;
    top: 37px;
    left: 337px;
} 
.grup8 {
    position: absolute;
    top: 37px;
    left: 379px; 
} 
.grup9 {
    position: absolute;
    top: 37px;
    left: 422px;
} 
.grup10 {
    position: absolute;
    top: 37px;
    left: 465px;
} 
.grup11 { 
    position: absolute;
    top: 37px;
    left: 506px;
} 
.grup12 {
    position: absolute;
    top: 37px;
    left: 92px;
} 
.grup13 {
    position: absolute;
    top: 37px;
    left: 92px;
} 
.grup14 {
    position: absolute;
    top: 37px;
    left: 92px;
} 
.grup15 {
    position: absolute;
    top: 37px;
    left: 92px;
} 
.grup16 {
    position: absolute;
    top: 37px;
    left: 92px;
} 
.grup17 {
    position: absolute;
    top: 37px;
    left: 92px;
} 

.cuadros input {
    height: 43px;
    border: 1px solid black;
    background-color: transparent;
    font-size: 23px;
    padding-left: 11px;
    position: absolute;
}


.cuadro1 {
    position: absolute;
    top: 447px;
    left: 935px;
    width: 123px;
    height: 229px;
}
.cuadro1 input{ 
    width: 108px;
}
.cuadro2 {
    position: absolute;
    top: 447px;
    left: 1056px;
    width: 123px;
    height: 229px;
} 
.cuadro2 input{
    width: 102px;
}
input.inp1 { 
    top: 0px;  
    height: 41px;
}
input.inp2 {
    top: 44px;
    height: 30px;
}
input.inp3 {
    top: 77px;
    height: 30px;
}
input.inp4 {
    top: 110px;
    height: 30px;
}
input.inp5 {
    top: 143px;
    height: 41px;
}
input.inp6 {
    top: 185px;
    height: 41px;
}
input.inp7 { 
    top: 0px;  
    height: 41px;
}
input.inp8 {
    top: 44px;
    height: 30px;
}
input.inp9 {
    top: 77px;
    height: 30px;
}
input.inp10 {
    top: 110px;
    height: 30px;
}
input.inp11 {
    top: 143px;
    height: 41px;
}
input.inp12 {
    top: 185px;
    height: 41px;
}

.graficas.gra1 {
    position: absolute;
    top: 400px;
    left: 740px;
    /* background-color: wheat; */
    height: 294px;
    width: 578px;
    z-index: 2;
}

.lin1 {
    top: 483px;
    left: 835px;
}

img.lineas {
    position: absolute;
    display: none;
    z-index: 1;
}

img.lineas.lin2 {
    /* display: block; */
    top: 508px;
    left: 841px;
} 

.graficas.gra2 {
    position: absolute;
    top: 400px;
    left: 740px;
    /* background-color: wheat; */
    height: 294px;
    width: 578px;
    z-index: 2;
}

.graficas.gra3 {
    position: absolute;
    top: 406px;
    left: 859px;
    /* background-color: wheat; */
    height: 294px;
    width: 578px;
    z-index: 2;
}
 

.gra3.grup1 {
    top: 37px;
    left: 92px;
}

.graficas.gra3>div>div {
    margin-top: 19.9px;
}

.graficas.gra3>.grup2 {
    left: 136px;
}
.graficas.gra3>.grup3 {
    left: 183px;
}
.graficas.gra3>.grup4 {
    left: 231px;
}
.graficas.gra3>.grup5 {
    left: 276px;
} 

img.lineas.lin3 {
    top: 463px;
    left: 960px;
}

.graficas.gra4 {
    position: absolute;
    top: 403px;
    left: 751px;
    /* background-color: wheat; */
    height: 294px;
    width: 578px;
    z-index: 2;
}

.graficas.gra4>.sca_child>div:hover {
    transform: scale(2);
}
.graficas.gra4>div>div{
	
width: 6px;
	
height: 6px;
	
border: 1px solid black;
	
margin-top: 5px;
} 



.graficas.gra4>.grup2 {
    left: 121px;
}
.graficas.gra4>.grup3 {
    left: 150px;
}
.graficas.gra4>.grup4 {
    left: 180px;
}
.graficas.gra4>.grup5 {
    left: 209px;
} 
.graficas.gra4>.grup6 {  
    left: 236px;
} 
.graficas.gra4>.grup7 {
    left: 263px;
} 
.graficas.gra4>.grup8 {
    left: 287px;
} 
.graficas.gra4>.grup9 {
    left: 313px;
} 
.graficas.gra4>.grup10 {
    left: 337px;
} 
.graficas.gra4>.grup11 {
    left: 363px;
} 
.graficas.gra4>.grup12 {
    left: 388px;
} 
.graficas.gra4>.grup13 {
    left: 413px;
} 
.graficas.gra4>.grup14 {
    left: 439px;
} 
.graficas.gra4>.grup15 {
    left: 464px;
} 
.graficas.gra4>.grup16 {
    left: 489px;
} 

img.lineas.lin4 {
    top: 447px;
    left: 848px;
}