/*@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');*/
@font-face{
  font-family   : "Roboto";
  font-size     : normal;
  font-weight   : normal;
  src: local("?"), url("../iconos/fonts/RobotoCondensed-Regular.ttf") format("truetype");
}

body{
  font-family         : "Roboto"; 
  background-image    : url('../../imagenes/background_main5.png');
  background-size     : cover;
  background-repeat   : no-repeat;
  background-position : center center;
}
#boton_ingreso{
  font-size       : 20px;
  margin-bottom   : 30px;
  margin-top      : 10px;
  width           : 300px;
}
/* Para que funcione el estilo con la animacion, el(los) boton(es) con class 'botones3' deben estar en un contenedor (puede ser un div, span, etc.) con style='display: flex; justify-content: center; luego puede personalizar el width y el font-size. */
.botones3{
  background      : #008BE1;
  border          : 2px solid #1FA9FF;
  border-radius   : 8px;
  box-shadow      : #7E8C8D 2px 2px;
  color           : #FFFFFF;
  cursor          : pointer;
  font-size       : 14px;
  margin          : 5px 10px;
  padding         : 5px 10px;
  position        : relative;
  z-index         : 1;
/*  text-shadow     : 1px 1px 1px #002137;*/
}
.botones3:active{
  box-shadow    : #7E8C8D -2px -2px;
}
.botones3::after {
  background    : #1FA9FF;
  border-radius : 6px;
  bottom        : 0;
  content       : "";
  left          : 0;
  position      : absolute;
  right         : 0;
  top           : 0;
  transform     : scale(0, 0);
  transition    : all 0.2s ease;
  z-index       : -1;
}
.botones3:hover {
/*  color         : #3498db;*/
/*  box-shadow      : #7E8C8D 0px 0px;*/
}
.botones3:hover::after {
  transform: scale(1, 1);
}
.contenedor_botones3{
  display         :flex;
  justify-content : center;
}
#contenedor_formulario_login{
  transition  : transform 1s ease-in-out; /* Duración y suavidad de la transición */
  top         : 40px;
}
.errores{ /* Estilo de los errores */
  background      : #F15946;
  border-radius   : 8px;
  box-shadow      : 0 0 10px rgba(0,0,0,0.3);
  box-shadow      : 0 0 10px rgba(0,0,0,0.3);
  color           : #FFFFFF;
  display         : none;
  font-size       : 15px;
  padding         : 5px;
  position        : relative; 
  text-align      : center;
}
.form{
  /*background-image  : url('../../imagenes/bg-modal.png');*/
  /*font-size         : 30px;*/
  /*padding           : 25px;*/
  /*top               : 5%;*/
  border-radius     : 20px;
  color             : #FFFFFF;
  left              : 45%;
  position          : absolute;
  right             : 0;
  text-align        : center;
  width             : auto;
}
.form.load{
  opacity   : 1;
}
.form table{
  width     : 100%;
}
#general{
  height    : 100%;
  width     : 100%;
}
.form table .textbox{ /* Tamaño de los input en login */
  /*border-bottom   : 1px solid white;*/
  background    : transparent;
  border        : 0;
  border-bottom : solid #BEC5C5;
  bottom        : 10px;
  cursor        : pointer;
  font-family   : "Roboto";
  font-size     : 25px;
  padding       : 15px;
  position      : relative;
  text-align    : center;
  width         : 60%;
}
.icono{
  width         : 40px;
}
#logo_empresa{
  border-radius : 10px;
  width         :200px;
}
#logo_principal{
  width         : 200px;
}
#nombre_entidad{
  font-size     : 30px;
}
#pass{
  /*margin-bottom : 20px;*/
  margin-top    : 5px;
}
#tipo_ambiente{
  color         : #FFFFFF;
  font-size     : 20px;
  margin-bottom : 30px;
  padding       : 5px;
  width         : 95%;
}
#titulo_login{
  color       : #002137;
  font-size   : 30px;
  font-style  : italic;
}
#version{
  /*padding-top : 65%;*/
  color       : #002137;
  position    : absolute;
}

/* Se inicia estilos cuando es movil o ventana menos de 992px */      
@media screen and (max-width: 992px){
  body{
    background-position : right center;
  }
  #boton_ingreso{
    margin-bottom : 80px;
    margin-top    : 40px;
    width         : 260px;
  }
  #contenedor_formulario_login{
    top       : 15px;
  }
  .form{
    left      : 5%;
    padding   : 40px 10px;
    right     : 5%;
    top       : 5%;
    z-index   : 2;
  }
  .form table input{ /* Tamaño de los input en login */
    font-size     : 20px;
    padding-left  : 5px;
    width         : 60%;
    left          : 0px;
  }
  .form table .textbox{ /* Tamaño de los input en login */
    font-size   : 25px;
    width       : 85%;
    padding     : 10px;
  }
  .icono{
    width   : 35px;
  }
  #logo_principal{
    width   : 130px;
  }
  #logo_empresa{
    width   : 130px;
  }
  #nombre_entidad{
    font-size   : 25px;
  }
  #pass{
    margin-bottom : -10px;
    margin-top    : 20px;
  }
  #tipo_ambiente{
    margin-bottom: 15px;
  }
  #titulo_login{
    font-size       : 25px;
    padding-bottom  : 30px;
  }
  #version{
    left        : 26%;
    padding-top : 700px;
    z-index     : 1;
  }
}