html, body{
	margin: 0;
 	padding: 0% 0% 0% 0%;
 /* padding: 0.5%;*/
	height: 100%;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	/*flex-basis: 70%;*/

 /* background-color: red;*/
}

*{
      /* font-family:'Helvetica Neue','Helvetica','Arial','sans-serif';*/
      /*  font-family: 'Tangerine', serif;
        font-family: 'Tangerine', serif;*/
      /* font-family:'Arial';*/
      /*font-family: 'Comfortaa';*/
      font-family: 'Tahoma';



       
      /*  font-size: 48px;*/
}


@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  /*src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);*/
  src: url(/Subpag/fonts/password.ttf);
  font-style: normal;
  font-weight: normal;
}


/*{
        font-family: 'SansationNegra';
   }*/




/*{
       font-family:Roboto,sans-serif;
       font-weight:300;*/
       /* font-weight: lighter;*/
      /* -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;*/
  /*  }*/

div.areaTitulo{
	   /* height: 50px;*/
      
	    width: 100%;
     /* height: 12vh;*/
	    height: 15vh;
      font-size: 2.6em; /*300%;*/
	    text-align: left;
      color: white;
      /*background-color: rgba(6, 130, 206);*/ /*#2E2E2E; /* #898686; */
      background-color: rgba(46, 46, 46); /*#2E2E2E; /* #898686; */
      font-family: 'Roboto', sans-serif;
      /*padding: 5px;*/
      float:left;
    /*  border-radius: 2px;*/
	
      /*  font-family:verdana;*/
	
}



div.areaLogo{
    width: 15%;
    height: 100%;
    float:left;
/*    margin-top: 2vh;
    margin-left: 3vW;*/
    /*background-color: violet;*/
    background-color: rgba(46,46,46);
}   


img.logo_saper{
  margin-top:5%;
  margin-left: 8%;
  width:80%;
  height:80%;
  border:transparent;
  float:left;
}


div.areaTituloSistema{
     /* height: 50px;*/
      
     /* width: 85%;*/
      width: 72%;
      height: 10vh;
      font-size: 2.0vw; /*300%;*/
      text-align: left;
      color: white;
      /*background-color: rgba(6, 130, 206);*/ /*#2E2E2E; /* #898686; */
     /* background-color: rgba(46, 46, 46); */
      font-family: 'Roboto', sans-serif;
      /*padding: 5px;*/
      float:left;
    /*  border-radius: 2px;*/
  
      /*  font-family:verdana;*/
   /*   background-color: violet;*/
  
}

div.areaTituloSistema p{
    margin-top: 4vh;
    margin-left: 2vW;


}

div.areaTituloLogin{
     /* height: 50px;*/
      
      width: 10%;
      height: 100%;
      font-size: 1.0vw; /*300%;*/
      text-align: left;
      color: white;
      /*background-color: rgba(6, 130, 206);*/ /*#2E2E2E; /* #898686; */
      background-color: rgba(46, 46, 46); /*#2E2E2E; /* #898686; */
      font-family: 'Roboto', sans-serif;
      /*padding: 5px;*/
      float:left;
    /*  border-radius: 2px;*/
  
      /*  font-family:verdana;*/
    /*  background-color: yellow;*/
  
}




button#botonAcceso{
    margin-top: 2.6vh;
    width: 10vw;
    height: 10vh;
    background-color: rgba(203, 222, 18);
    color: rgba(131, 131, 129 ); /*white;*/
    border: transparent;
    font-size: 1.5vw;
    border-radius: 1px;

}

div#areaLogin{
    float:left;
    margin-top: 10vh;
    width: 50vw;
    height: 70vh;
    margin-left: 20vw;
    background-color: white; /*blue;*/
    display: none;

  }


div#areaLogin button#botonCerrar{
   width: 60px; 
   height: 30px;
  /* margin-top: 0px;*/
   padding-top: 0px;
   float: right;
  /* background-color: #eee; /* #33A8FF;*/
   color: black;
   font-size: 20px;
    border:transparent;
 /*   background-color: red;*/
}

button#botonCerrar:hover {
    background-color: red;
}



div#LoginUsuario{
    margin-top: 16vh;
    margin-left: 20vw;
    width: 20vw;
    height: 11vh;
    float:left;
    background-color: rgba(230,230,230); /*pink;*/

}

div#LoginUsuario label{
  /*  margin-top: 2vh;*/
   /* margin-left: 2vw;*/
    width: 20vw;
    height: 3vh;
    float:left;
    font-size: 0.8vw;
    color:rgba(140,140,140);
 /*   background-color: green;*/

}



div#LoginUsuario input#usuario{
    margin-top: 1vh;
   /* margin-left: 2vw;*/
    width: 20vw;
    height: 6vh;
    float:left;
    font-size: 1.5vw;
   /* border-right: 0px;
    border-top: 0px;
    border-left: 0px;*/
    border:0;
    outline: none;
    border-bottom: 2px solid black;
    border-radius: 0px; 
    background-color: rgba(230,230,230);/*yellow;*/

}


div#LoginPassword{
    margin-top: 2vh;
    margin-left: 20vw;
    width: 20vw;
    height: 11vh;
    float:left;
    background-color: rgba(230,230,230); /*pink;*/
}

div#LoginPassword label{
  /*  margin-top: 2vh;*/
   /* margin-left: 2vw;*/
    width: 20vw;
    height: 3vh;
    float:left;
    font-size: 0.8vw;
    color:rgba(140,140,140);
  /*  background-color: green;*/

}


div#LoginPassword input#password{
    
    font-family: 'password';
    margin-top: 1vh;
   /* margin-left: 20vw;*/
    width: 20vw;
    height: 6vh;
    float:left;
    font-size: 1.5vw;
   /* border-right: 2px solid yellow;
    border-top: 0px;
    border-left: 0px;*/
    border:0;
    outline: none;
    border-bottom: 2px solid black;
  /*  border-radius: 0px; */
    background-color: rgba(230,230,230);/*violet;*/

}

div#areaLogin button#botonContinuar{
    margin-top: 5vh;
    margin-left: 30vw;
    width: 10vw;
    height: 8vh;
    border:transparent;
    border-radius: 2px;
    background-color:rgba( 6, 130, 216);
    color: white;

}