body, #myBody, #myContent{
    background-color: #333;
    color: #ffffff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
	
    right: 1em;
    text-align: left;
}
#copy a {
    color: #fff;
}

* /* , *:before, *:after */
{
    margin: 0;  /* QUITA TODOS LOS MARGENES POR DEFECTO DEL EXPLORADOR */
    padding: 0; /* QUITA LOS MARGENES DE ELEMENTOS INTERNOS */
    box-sizing:border-box;  
} 

@font-face {
    font-family: 'Pe-icon-7-stroke';
    src:url('fontsWebSymbols/Pe-icon-7-stroke.eot?d7yf1v');
    src:url('fontsWebSymbols/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
        url('fontsWebSymbols/Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
        url('fontsWebSymbols/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
        url('fontsWebSymbols/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:block;
}

.fuentePe-icon-7-stroke
{
    font-family: 'Pe-icon-7-stroke';
    font-size: 2rem; 
    text-decoration: none;
}

#myCanvas, #canvas
{               
    left: 0;
    margin: 0px;
    position: relative;
    top: 0px;
    width: 100%;
    background-color: #FFFFFF; /*cadetblue; #E3FCFF */
    text-align: center;
    overflow: hidden;
}

#paper {
    
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
}

h1, h2 
{
    text-align: center;
    
}

body{
    height: 100%;
    width: 100%;
    font-size: 0.75rem;   
    font-family: "Bebas Neue", sans-serif;             
}

.mycheck2 {
cursor: pointer;
background-color: #fff;
color: #fff;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
width: 24px;
height: 24px;
appearance: none;
border: 2px solid #888;
background-position: 0 -2rem;
background-size: 100%;
background-repeat: no-repeat;
transition: all 0.3s ease-in-out;
}

.mycheck2:checked {
background-color: rgb(75, 156, 13);
color: rgb(75, 156, 13);
background-position: 0 0;
}

.boxChecks
{
    position:absolute;
    top:0px;
    z-index: 1002

}
.svgClass
{
    /*
    max-width: 50%; 
    border: 0.5px solid rgba(0,0,0,.5);
    */
    min-width:800px; 
    z-index:100;
    max-height:90vh;  /*75vh;*/
    
} 

.busyAmim
{
    width:100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left:0px;
    top:0px;
    /*
    
    left:calc(50vw - 25px);
    top:calc(50vh - 25px);
    width: 50px;
    */
    z-index: 999999;
    background-color: rgba(0,0,0,.5);
}

#info.oculto{
  transform:translateX(100%);              
}

#info.visible{
  transform:translateX(0%) ;
}

#info
{
  transition: all 1s;
}

table {  
  background-color: rgba(0,0,0,.5);
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 10px;
  border: 0.5px solid black;
}

td {
  text-align:right; 
  font-size:1.5rem; 
  padding:0.5rem;
  border: 0.5px solid rgba(0,0,0,.5);
  position:relative;
}

th {
  border: 0.5px solid rgba(0,0,0,.5);
}

.popupTop {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position:absolute; 
    left:0px; top:2rem;  width: 100%; /* height:calc(100vh - 2rem); */
    z-index:1000; 
    transition: all 1s;
}

.popupTop.oculto {
  transform:translateY(-110%);              
}

.popupTop.visible {
  transform:translateY(0%) ;
}

.percent{
  font-size:.75rem;
  position:absolute;
  right:0.5rem;
  bottom:0px;
}

.IconText
{
    display: inline-block;
    width: 1.5rem; 
    cursor: pointer;
  /* margin: .25rem; */
}   

.zoomType, .exclusionZone
{
  position: absolute;
  /* left: calc(50vw - 3.3rem); */
  top: 0rem;
  display: flex;
  width: 100%;
  justify-content: center;

}

.zoomElement
{
  cursor: pointer;
  margin:0.1rem
}

.zoomImg
{
  width:2rem;
}

#detalleEstado
{
  display:flex;
  min-height: 2rem;
  justify-content: center;
  align-items: center;
}

[active="1"]
{
    color: #00ccff !important; 
    opacity: 1.0;
    display: inline-block;
    z-index: 998;
}

/* sliders*/
:root {
  --Ancho: 800px;
  }

  .slider {
      width: 100%;
      height: 100%; 
      margin: auto;
      overflow: hidden;
      position: absolute;
      top:0px;
      left:0px;
      z-index: 999999;
  }
  
  .slide{
 /*     width:var(--Ancho);          
      height: 100vh; */
      margin: 1px;      
  }

  .slide img{
      max-height:100vh;
      max-width: 20vw;
      opacity: 0.9;
  }
 
  @keyframes scrollImages {
      0% { transform: translate(0); }
      100% { transform: translate(calc(var(--Ancho)*-1)); }
  }

  #trak
  {
      display:flex;     
      height: 100%;
      align-items: center;
      
    /*  width: calc(var(--Ancho) * 8);
      background-color: rgb(0, 0, 0); */
  }

  .mapaMode
  {
    text-align: right; 
    position: absolute; 
    right:0px; 
    top:0px; 
    padding:0.3rem 1rem 0.3rem 0.3rem; 
    color:#000; 
    font-size: 5rem; 
    opacity: 0.1;
  }