body{        
  padding-top: 60px;
  padding-bottom: 40px;
}
.statusBar {
  /*border: 1px solid red;*/
  width:100%;
  font-size:12px;
  height:20px;
  background-color: #1a237e;
  color:white;
  position:fixed;
  font-family: Arial, Helvetica, sans-serif;
  bottom:0;
  left:0;
  z-index:99999999999999;

}
#statusBarUsuario {
  position: absolute;
  overflow: hidden;
  text-align: center;
  font-size:10px;
  border-right: 1px solid white;
  width:20%;
  height:20px;
}
#statusBarFecha{
  position: absolute;
  left:20%;
  overflow: hidden;
  text-align: center;
  font-size:10px;
  border-right: 1px solid white;
  width:20%;
  height:20px;
}
#statusBarInfo {
  position:absolute;
  left:40%;
  /*border: 1px solid yellow;*/
  width:60%;
}
.version {
    font-size:6px;
    position:fixed;
    font-family: Arial, Helvetica, sans-serif;
    bottom:0;
    right:0;
}
.cabeceraBar {
  /*border: 1px solid red;*/
  width:100%;
/*   font-size:12px;
  height:20px; */
  background-color: #ffffff;
  /* color:black; */
  position:fixed;
  font-family: Arial, Helvetica, sans-serif;
  top:0;
  left:0;
  z-index:99999999999999; 
}
.logoNavBar{
  max-width: 10%;
  max-height: 100%;
  margin-right:5%;
}
.nav-wrapper{
  position:fixed;
  top:0;
  left:0;
  background-color:#ffffff;
}

@media screen and (orientation: portrait) {
  .login {
    /*border: 1px solid black;*/
    width: 100%;
  }
  #btnLogin {
    font-size: 18px; /*5vw*/;
    /*height: 8vh; /*70px;*/
    border-radius: 10px;
    width:151px;
    height:53px;
  }
      
  #usrname, #password {
    font-size: 6vw;
    height: 10vh; /*100px;*/      
  }
  #lblUsr, #lblPwd {
    font-size: 30px;    
  }
  .reloj{
  /*    border:1px solid red;  */
    font-size:6vw;
    font-family:'Orbitron', arial;
    /* float:left; */
    display:inline-block;
    width:30%;
    color:green;
  }



} /* fin portrait */

@media screen and (orientation: landscape) {
  .login {
    /*border: 1px solid black;*/
    width: 60%;
    margin-left: 20vw;
  }
  #btnLogin {
    font-size:18px; /*3vw;*/
    /*height: 10vh; /*70px;*/
    border-radius: 10px;
    width: 151px;
    height:53px;
  }
        /* variables de materialize para scss :
          $button-large-font-size: 15px !default;
          $button-large-icon-font-size: 1.6rem !default;
          $button-height: 36px !default;
          $button-large-height: $button-height * 1.5 !default;
        */
      
  #usrname, #password {
    font-size: 4vw;
    height: 10vh; /*100px;*/     
  }
  #lblUsr, #lblPwd {
    font-size: 20px;    
  }
  .reloj{
    /* border:1px solid red; */
    font-size:6vw;
    font-family:'Orbitron', arial;
    /*  float:left; */
    display:inline-block;
    width:30%;
    color:green;
  }

} /* fin landscape */

  .validacion {
    width:100%;
    /* border: 1px solid red; */
    overflow:hidden;
    position:relative;

  }

       .tomaId {  /* zona de tomar el idEmpleado con la etiqueta, la caja de input y el boton */

            width:85vw;
            /*padding-top: 20px 0px 20px 0px; /*padding-top: xx padding-right: xx padding-botom: xx padding-left: xx */
            margin-bottom: 15px; /* margen alrededor de la div */
            /*border: 2px solid black;*/
            position:relative;
       }
               .inputID {  /* zona de input del Id empleado */
                  /*border:1px solid green;*/
                  display: inline-block;
                  width: 30vw;
                  height:8vw;
                  margin-left: 10vw;
               }
               #idEmpleado {
                 font-size: 5vw;
                 width:100%;
                 height:100%;
                 overflow:hidden;
               }
               .addDefaultId {
                /*border: 2px solid black;*/
                display:inline-block;          
                /*width: 15vw;*/
                height:40px;
                margin-left:10px;
                
               }
               #btnAddDefId {
                border-radius: 10px;
                color:white;
               }

               .submitValida { /* zona de boton de validar */
                  /*border:2px solid blue;*/
                  display:inline-block;
                  margin-left: 5px;            
                  width: 65px;
                  height:65px;  
                  /*position:absolute;
                  right:0%;*/
               }
               #btnValidarId {
                  /*font-size:2vw;*/
                  border-radius: 10px;
                  color:white;
                  padding:3px;
                  height:65px;
               }
     .tempContainer {
            /*border: 2px solid green;*/
            float:left;
            width:10vw;
            height:10vw;
            position:absolute;
            left:79%;
            top:2%;
            margin-left:10vw;
            
      }
           .circuloTemp {
               position: absolute;
               top: 50%;
               left: 50%;
               margin-top:-5vw; 
               margin-left:-5vw;
               
               width: 10vw; /*$d+px;*/
               height: 10vw; /*$d+px;*/           
               border-radius: 999px;
               box-shadow: inset 0 0 0 2vw rgba(0,48,86,0.3); /*inset=sombra por dentro, h-offset v-offset blur spread color */
            }          
     .botonera {
         /* border: 1px solid red; */
         /* clear:left; */  /* hacemos clear del anterior float*/
         /* float:left; */  /* volvemos a hacer float para alinear en la misma fila con la zondaDatos */
         display:inline-block;
         width: 80%; /*30%*/
         margin-top: 2%;
         margin-bottom:2%;
         margin-left: 10%;
         margin-right: 10%;
     }
           .botonEntrada {
              width:30%;
              display:inline-block;
              margin-right:2%;
           }
             #botonEntrada {
               width:100%;
               border-radius: 10px;
               font-size:5vw;
               text-align: center;
             }
           .botonSalida {
              width:30%;
              display:inline-block;
              margin-right:2%;
           }
             #botonSalida{
               width:100%;
               border-radius: 10px;
               font-size:5vw;
               text-align: center;
             }
           .botonCancelar{
              width:30%;
              display:inline-block;
           }
              #botonCancelar {
               width:100%;
               border-radius: 10px;
               font-size:5vw;
               text-align: center;
              }
       
     .zonaDatos {
          width:100%;
          /* border: 1px solid red; */
          box-sizing: border-box;
          display:inline-block;
      }
              .foto {
                  float:left;
                  box-sizing: border-box;
                  border: 1px solid #ddd;
                  border-radius: 5px;
                 /*  padding: 4px; */
                  max-width: 30%;
                  height: auto;
                  margin-left:5%;
                  margin-right:2%;
               }
             #nombreUsuario {    
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 5vw;
                 padding-left: 4%;
             }
             #ultimoRegistro {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size:4vw;
                 padding-left: 3%;             
             }
        .zonaPerfil {
          margin-top: 2%;
        }
 
        .cajaFotoGestion {
/*           border: 1px solid yellow; */
          position:relative;
          height:200px;
        }
        .cajaFotoPerfil {
           border: 1px solid blue; 
          position:absolute;
          height:200px;
          width: 130px;
          left:10%;
        }
        .cajaFotoPerfil img {
          position:absolute;
/*           border: 1px solid red; */
          border-radius: 5px;
          height: 100%;
          object-fit: cover;
          /* object-position:center center; */ 
       }
      .cajaFotoGestion video {
        position:absolute;
        border: 1px solid green;
        border-radius: 5px;
        height: 100%;
        width: 130px;
        object-fit: cover;
        left:65%; 

       }
       .cajaFotoGestion canvas {
        position:absolute;
         border: 1px solid brown; 
        border-radius: 5px;
        height: 200px;
        width: 130px;
        object-fit: cover;
        left:10%;
        z-index: 9999999;
       }
       input[type=”file”],#camera {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
        }
      label[for="camera"] {
          position:absolute;
          border-radius: 10px;
          font-size: 18px; 
          left:52%;
          color: #fff;
          background-color: #1a237e;
          }
      input[type=”file”],#galeria {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
        }
      label[for="galeria"] {
          position:absolute;
          border-radius: 10px;
          font-size: 18px; 
          left:52%;
          top:30%;
          color: #fff;
          background-color: #1a237e;
          }       
        #controlFoto {
          /* border: 1px solid black;  */
          position:absolute;
          left: 47%;
          top: 50%;
          width:200px;
          height:120px;
        }  
        #btnZoomIn {
          position:absolute;
          border-radius: 10px;
          left:0%;
          top:0%;
        }
        #btnZoomOut{
          position:absolute;
          border-radius: 10px;
          right:0%;
          top:0%;

        }
        #btnMoveUp{
          position:absolute;
          border-radius: 10px;
          left:35%;
          top:0%;
        }
        #btnMoveLeft{
          position:absolute;
          border-radius: 10px;
          left:0%;
          top:25%;
        }
        #btnMoveRight{
          position:absolute;
          border-radius: 10px;
          right:0%;
          top:25%;
        }
        #btnMoveDown{
          position:absolute;
          border-radius: 10px;
          left:35%;
          top:50%;
        }
        #btnRotate{
          position:absolute;
          border-radius: 10px;
          right:0%;
          top:50%;
        }       

/*        #frame {
        border: 1px solid blue;
        position:absolute;
        height:200px;
        width: 130px;
        left:10%;
       } */
/* estilos comentados ya que no se usará la toma de foto de la cámara */
/*        #player {
        position:absolute;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 5px;
        max-width: 30%;
        height: auto;
        left:20%;
       }
       #snapshot {
        position:absolute;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 5px;
        max-width: 30%;
        height: auto;
        left:20%;
        z-index: 9999999;
       }    */    
       #btnHacerFoto {
        position:absolute;
        border-radius: 10px;
        font-size: 18px; 
        left:45%;
       }
       #btnSubirFoto {
        position:absolute;
        border-radius: 10px;
        font-size: 18px; 
        left:45%;
       }
       #capture {
        position:absolute;
        border-radius: 10px;
        font-size: 18px; 
        left:45%;
       }
       .vertical-center {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      .vertical-bottom {
        margin: 0;
        position: absolute;
        top: 100%;
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
      }



       #player {
          width: 200px;
          height:auto;

       }
       .cabeceraPerfil {
        /* border: 1px solid green; */
        background-color:white;
        width:100%;
        overflow:auto;
        position:fixed;
        top:60px;
        z-index:99999999999999; 
        
       }
       .cuerpoPerfil {
        /* border: 1px solid red; */
        margin-top:100px;

       }
        #btnUpdateProfile, #btnCancelProfile {
          font-size: 14px; 
          border-radius: 10px;
          margin: 10px 0 10px 0; //top right bottom left
          width:140px;
          height:53px;
          float:left;
        }
        .cabeceraPerfil .controlRegistrosEmpleados {
           border-radius: 10px; 
          float:right;
          padding: 8px 16px;
        } 
        .btnAnadeEmpleado {
          float:right;
        }

       .zonaCanvas {
         /*border: 1px solid #ddd;*/
         width:100%;
         height: 500px;
         /*float: left;  */     
       }   
       
       #loader {
       position: absolute;
       left: 50%;
       top: 50%;
       z-index: 9999;
       width: 150px;
       height: 150px;
       margin: -75px 0 0 -75px;
       border: 16px solid #47fff8; 
       border-radius: 50%;
       border-top: 16px solid #1a237e;
       width: 120px;
       height: 120px;
       -webkit-animation: spin 2s linear infinite;
       animation: spin 2s linear infinite;
       }
       @-webkit-keyframes spin {
       0% { -webkit-transform: rotate(0deg); }
       100% { -webkit-transform: rotate(360deg); }
       }

       @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
       }
       
       /* para que los botones que esten con propiedad disabled no respondan a eventos */
      button[disabled="disabled"] {
        pointer-events: none;
      }

       .activeButton {
       background-color: #1a237e;
       border: 1px solid #bbb;
       color: white;
       /* padding: 6px 20px; */
       text-align: center;
       text-decoration: none;
       display: inline-block;
       margin: 0;
       cursor: pointer;
       overflow: visible;
       font: bold 13px arial, helvetica, sans-serif;
       white-space: nowrap;
      }
       .disabledButton {
       background-color: #D3D3D3;
       border: 1px solid #bbb;
       color: white;
       /* padding: 6px 20px; */
       text-align: center;
       text-decoration: none;
       display: inline-block;
       margin: 0;
       cursor: pointer;
       overflow: visible;
       font: bold 13px arial, helvetica, sans-serif;
       white-space: nowrap;
      }
      input[type="submit"] { 
        -webkit-appearance:none;
        border-radius:0;
       }
      input[type="button"] { 
        -webkit-appearance:none;
        border-radius:0;
       }       
       
       .dgcAlert {
            top: 0;
            position: absolute;
            width: 100%;
            display: block;
            height: 1000px; 
            overflow: hidden; 
            background:rgba(176,176,176,0.5); 
            text-align:center;  
            display:none;
            z-index:999999999999999;
        }    
       .dgcAlert .dgcVentana{
            width: 80%; /*500px;*/ 
            background: white;
            min-height: 150px;
            position: relative;
            margin: 0 auto;
            color: black;
            padding: 10px;
            border-radius: 10px;
        }
       <!-- estilo de la imagen boton para cerrar   .dgcAlert .dgcVentana .dgcCerrar {height: 25px;width: 25px;float: right; cursor:pointer; background: url(http://www.dgcmedia.es/recursosExternos/cerrarAlert.jpg) no-repeat center center;} -->
       .dgcAlert .dgcVentana .dgcMensaje { 
            margin: 0 auto; 
            padding-top: 10px; /*45px;*/ 
            text-align: center; 
            width: 100%; /*400px;*/
            font-size: 8vw; /*80px;*/ 
            font-family:Arial;
         }
       .dgcAlert .dgcVentana .dgcAceptar{
            background: #1a237e; 
            bottom:20px; 
            display: inline-block; 
            font-size: 6vw; 
            border-radius: 10px;
            /*font-weight: bold;*/ 
            height: auto; 
            /*line-height: 24px;*/ 
            padding-left: 5px; 
            padding-right: 5px;
            text-align: center; 
            text-transform: uppercase; 
            width: 34vw; /*75px;*/
            cursor: pointer; 
            color: #FFF; 
            margin-top:50px;
         }       

       /*contenedor para div tipo polaroid que permite incrustar fotos al estilo polaroid con sobra.. mu chulo..deja margen abajo para poner titulo como <p>Cinque Terre</p> */       
       div.polaroid {
         width: 20%;
         background-color: white;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         margin-bottom: 15px;
       }  

  /* clases para loader */
    .l-half, .r-half {
        float: left;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
   .l-half::before {
            content: "";
            display: block;
            width: 100%; 
            height: 100%;
            box-sizing: border-box;
            border: 2vw solid #1a237e;
            -webkit-animation-duration: 20s;
            animation-duration: 20s;
            -webkit-animation-iteration-count: 1;
                    animation-iteration-count: 1;
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
         border-right: none;
         border-top-left-radius: 999px;
         border-bottom-left-radius: 999px;
        -webkit-transform-origin: center right;
                transform-origin: center right;
        -webkit-animation-name: l-rotate;
                animation-name: l-rotate;
    }
    
    .r-half::before {
            content: ""; 
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 2vw solid #1a237e;
            -webkit-animation-duration: 20s;
            animation-duration: 20s;
            -webkit-animation-iteration-count: 1;
                    animation-iteration-count: 1;
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
        border-left: none;
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
        -webkit-transform-origin: center left;
                transform-origin: center left;
        -webkit-animation-name: r-rotate;
                animation-name: r-rotate;
    }

/* -- TIMER -- */

     .count {
         position: absolute;
         width: 100%;
         line-height: 10vw;
         text-align: center;
         font-weight: 800;
         font-size: 3vw; /*((var(--d,100) - (var(--w,20) * 2)) / 2)+px; */
         font-family: Helvetica;
         color: #1a237e; /*#fff;*/
         z-index: 2;
         -webkit-animation: fadeout .5s 21s 1 linear;
                 animation: fadeout .5s 21s 1 linear;
         -webkit-animation-fill-mode: forwards;
                 animation-fill-mode: forwards;
         
     }
     
    @-webkit-keyframes l-rotate {
        0% { -webkit-transform: rotate(0deg);}
        50% { -webkit-transform: rotate(-180deg);}
        100% { -webkit-transform: rotate(-180deg);}
    }
    
   @keyframes l-rotate {
        0%   { transform: rotate(0deg);}
        50%  { transform: rotate(-180deg);}
        100% { transform: rotate(-180deg);}
    }
   
   @-webkit-keyframes r-rotate {
        0% { -webkit-transform: rotate(0deg);}
        50% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(-180deg);}
    }
    
   @keyframes r-rotate {
        0%   {  transform: rotate(0deg);}
        50%  {  transform: rotate(0deg); }
        100% {  transform: rotate(-180deg);}
    }
   
   
     
    @-webkit-keyframes fadeout {
        0% { opacity: 1; }
        100% { opacity: 0.5; }
    }
    @keyframes fadeout {
        0% { opacity: 1; }
        100% { opacity: 0.5; }
    }