body {
	/*background: #007bff!important;*/
	background-size: auto; /* Mantiene el tamaño original de la imagen */
    background-repeat: repeat; /* Repite la imagen tanto horizontal como verticalmente */
    background-position: top left; /* Empieza a repetir desde la esquina superior izquierda */
    background-color: rgba(140, 191, 245, 1); /* Color blanco con opacidad del 50% */
    background-blend-mode: overlay; /* Mezcla el color de fondo con la imagen */
    background-image: url(../img/bg.jpg);
    font-family: Arial, sans-serif;
}
.loginbuttom {
    background-color: #ffffff !important;
    border: 2px solid #007bff !important;
    border-radius: 5px !important;
    color: #0056b3 !important;
    font-size: 12px !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    transition: background-color 0.3s, color 0.3s !important;
    margin-top: 15px;
    margin-left: 20px;
    text-align: center;
}
        #container {
   	position: fixed!important;
   	width: 340px!important;
   	height: 280px!important;
   	top: 50%!important;
   	left: 50%!important;
   	margin-top: -140px!important;
   	margin-left: -170px!important;
   	background: #fff!important;
   	border-radius: 3px!important;
   	border: 1px solid #ccc!important;
   	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)!important;
   	-webkit-animation-name: bounceIn!important;
   	-webkit-animation-fill-mode: both!important;
   	-webkit-animation-duration: 1s!important;
   	-webkit-animation-iteration-count: 1!important;
   	-webkit-animation-timing-function: linear!important;
   	-moz-animation-name: bounceIn!important;
   	-moz-animation-fill-mode: both!important;
   	-moz-animation-duration: 1s!important;
   	-moz-animation-iteration-count: 1!important;
   	-moz-animation-timing-function: linear!important;
   	animation-name: bounceIn!important;
   	animation-fill-mode: both!important;
   	animation-duration: 1s!important;
   	animation-iteration-count: 1!important;
   	animation-timing-function: linear!important;
   }
   
   form {
   	margin: 0 auto!important;
   	margin-top: 20px!important;
   }
   
   label {
   	color: #555!important;
   	display: inline-block!important;
   	margin-left: 18px!important;
   	padding-top: 10px!important;
   	font-size: 14px!important;
   }
   
   p a {
   	font-size: 11px!important;
   	color: #555555!important;
   	float: right!important;
   	margin-top: -13px!important;
   	margin-right: 20px!important;
   	-webkit-transition: all .4s ease!important;
   	-moz-transition: all .4s ease!important;
   	transition: all .4s ease!important;
   }
   
   p a:hover {
   	color: #555!important;
   }
   
   input {
   	font-family: "Helvetica Neue", Helvetica, sans-serif!important;
   	font-size: 12px!important;
   	outline: none!important;
   }
   
   input[type=text],
   input[type=password] {
   	color: #595959!important;
   	padding-left: 10px!important;
   	margin: 10px!important;
   	margin-top: 12px!important;
   	margin-left: 18px!important;
   	width: 290px!important;
   	height: 35px!important;
   	border: 1px solid #c7d0d2!important;
   	border-radius: 2px!important;
   	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8!important;
   	-webkit-transition: all .4s ease!important;
   	-moz-transition: all .4s ease!important;
   	transition: all .4s ease!important;
   }
   
   input[type=text]:hover,
   input[type=password]:hover {
   	border: 1px solid #b6bfc0!important;
   	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8!important;
   }
   
   input[type=text]:focus,
   input[type=password]:focus {
   	border: 1px solid #a8c9e4!important;
   	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9!important;
   }
   
   #lower {
   	background: #ecf2f5!important;
   	width: 100%!important;
   	height: 69px!important;
   	margin-top: 20px!important;
   	box-shadow: inset 0 1px 1px #fff!important;
   	border-top: 1px solid #ccc!important;
   	border-bottom-right-radius: 3px!important;
   	border-bottom-left-radius: 3px!important;
   }
   
   input[type=checkbox] {
   	margin-left: 20px!important;
   	margin-top: 30px!important;
   }
   
   .check {
   	margin-left: 3px!important;
   	font-size: 11px!important;
   	color: #444!important;
   	text-shadow: 0 1px 0 #fff!important;
   }
   
   input[type=submit] {
   	float: right!important;
   	margin-right: 20px!important;
   	margin-top: 20px!important;
   	width: 80px!important;
   	height: 30px!important;
   	font-size: 14px!important;
   	font-weight: bold!important;
   	color: #fff!important;
	background-color: #acd6ef!important; /*IE fallback*/
   	background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8))!important;
   	background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%)!important;
   	background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%)!important;
   	border-radius: 30px!important;
   	border: 1px solid #66add6!important;
   	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5)!important;
   	cursor: pointer!important;
   }
   
   input[type=submit]:hover {
   	background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8))!important;
   	background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%)!important;
   	background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%)!important;
   }
   
   input[type=submit]:active {
   	background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff))!important;
   	background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%)!important;
   	background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%)!important;
   }