/* .red{
	border:1px solid red;
} */

body{
	margin:0
}
  
  #particles-bg {
	position:absolute;
	width:100%;
	height:100vh;
	overflow: hidden;
	z-index: 100;
  
  }
  
  #container{
	width:100%;
	height:100vh;
	z-index: 400;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  #login{
	background-color: transparent;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 400;
  }
  
  #containerR{
	--animate-duration: 0.5s !important;
	background-color: #f2f2f2;
	width:30rem; 
	height:35rem;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
  }
  
  #containerL{
	--animate-duration: 0.5s;
	position: relative;
	width:25rem; 
	height:35rem !important;
	display: flex;
	align-items: center;
  }
  
  @keyframes fadeInDownCustom {
	from {
	  opacity: 0;
	  transform: translate3d(0, -5%, 0);
	}
  
	to {
	  opacity: 1;
	  transform: translate3d(0, 0, 0);
	}
  }
  
  @keyframes fadeInUpCustom {
	from {
	  opacity: 0;
	  transform: translate3d(0, 5%, 0); /* El elemento aparecerá desde 30% hacia abajo */
	}
  
	to {
	  opacity: 1;
	  transform: translate3d(0, 0, 0); /* Se queda en su posición original */
	}
  }
  
  .fadeInUpCustom {
	animation-name: fadeInUpCustom;
	animation-duration: 0.5s;
	animation-fill-mode: both;
  }
  
  .fadeInDownCustom {
	animation-name: fadeInDownCustom;
	animation-duration: 0.5s;
	animation-fill-mode: both;
  }
  
  .input-transparente {
	background-color: transparent; /* Fondo transparente */
	border: none; /* Sin bordes */
	border-bottom: 2px solid #1c4d8f; /* Solo borde inferior */
	
	padding: 8px 0; /* Un poco de espacio en la parte superior e inferior */
	outline: none; /* Eliminar el borde azul al hacer clic */
	font-size: 16px; /* Tamaño del texto */
	width: 100%; /* Ocupar el ancho completo del contenedor */
	box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  }
	
  
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
	
	background-color: transparent !important; /* Fondo transparente */
	
	border-bottom: 2px solid #1c4d8f !important; /* Borde inferior */
	-webkit-box-shadow: 0 0 0px 1000px transparent inset !important; /* Eliminar el sombreado que pone Chrome */
	transition: background-color 5000s ease-in-out 0s; /* Hack para forzar el fondo transparente */

    
  }

  @media only screen and (max-width: 768px) {
	#containerR {
		width: 99%;
	}
}