@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);

*{
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 auto;
	font-weight: 300;
	overflow: hidden;
}

body{
    padding: 30px auto;
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
    /* border: 3px solid #00ffff; */
}	
::-webkit-input-placeholder { /* WebKit browsers */
	font-family: 'Source Sans Pro', sans-serif;
		color:    white;
	font-weight: 300;	
}
:-moz-placeholder { /* Firefox 18- */
	font-family: 'Source Sans Pro', sans-serif;
	 color:    white;
	 opacity:  1;
	font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family: 'Source Sans Pro', sans-serif;
	 color:    white;
	 opacity:  1;
	font-weight: 300;	
}
:-ms-input-placeholder { /* IE 10+ */
	font-family: 'Source Sans Pro', sans-serif;
	 color:    white;
	font-weight: 300;
}

.content_izq{    	
	background-image: url("/assets/images/fondoIzq.png");		
	background-repeat:repeat;
	background-color: #001640;    
    padding: 30px 30px 30px 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;	
}

.imgCenter{	
	width: 65%;
}
.content_form{
    height: 100%;

    width: 50% !important;    
    display: flex;
    justify-content: center;

    align-items: center;
    overflow: auto;
}

.wrapper{	
	background: #0093D0;
	background: -webkit-linear-gradient(top left, #0093D0 0%, #001640 100%);
	background: -moz-linear-gradient(top left, #0093D0 0%, #001640 100%);
	background: -o-linear-gradient(top left, #0093D0 0%, #001640 100%);
	background: linear-gradient(to bottom right, #0093D0 0%, #001640 100%);
	height: 1024px;
	overflow: hidden;
	z-index: 9999;
}

.wrapper.form-success{
	.container{
		h1{
			transform: translateY(85px);
		}
		.mensaje{
			transform: translateY(-85px);
			opacity: 1;
		}
	}
}

h1{
	text-align: center;
}

.container{
	margin: 0 auto;
	padding: 80px 0px 80px 0px;	
}

.container h1{
	font-size: 48px;
	transition-duration: 1s;
	transition-timing-function: ease-in-put;
	font-weight: 200;
}

.container .mensaje{
	font-size: 32px;
	transition-duration: 2s;
	transition-timing-function: ease-in-put;
	font-weight: 200;
	opacity: 0;
}

form{
	padding: 20px 0;
	position: relative;
	z-index: 2;
		
}

.field{
	margin: auto 1rem auto 1rem !important;
}

input{
	color: white !important;
	border: 2px solid red !important;		
}

input[type="text"]:active,	input[type="password"]:active,
input[type="text"],			input[type="password"]
{
	/* appearance: none !important; */
	outline: 0!important;
	border: 2px solid white !important;		
	background: white !important;
	opacity: 0.3;	
	width: 250px;	
	margin: 0 auto 1rem auto !important;
	padding: 10px 16px 10px 16px !important;
	/* display: block;			 */
	/* transition-duration: 0.25s; */
	font-weight: 300;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	font-size: 18px;
	color: darkblue !important;
}

::placeholder {
	color: red;
	opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
	color: red;	
}


input[type="text"]:hover, input[type="password"]:hover{
	color: white!important;
	border: 1px solid white!important;		
	background: white !important;
	opacity: 0.4;	
}

.negative{
	color: #ff0000!important;
	background: white !important;
	border: 2px solid #ffffff;
	opacity: 1;
}

input[type="text"]:focus, input[type="password"]:focus
{
	border: 1px solid white!important;		
	background: #001640 !important;
	opacity: 0.9;
	background-color: #001640 !important;
	background-color: fade(#001640, 40%);
	width: 300px;
	color: white !important;	
}

.botonSubmit{
	height: 2.5em;	
	margin: 1em auto 1em auto !important;
}

.centrado{
	text-align: center;
}

.center {	
	display: flex;
	justify-content: center;
	align-items: center;
}

.user, .lock, .eye{
	color: white !important;
	min-width: 24px !important;
}

.eyIcon{
	cursor:pointer;
}

button{
	appearance: none;
	outline: 0;
	background-color: #FDC900;
	border: 0;
	margin: 1rem !important;
	/* padding: 2rem auto 1rem auto !important; */
	height: 3rem;
	color: #333333;
	border-radius: 3px;
	width: 350px;
	cursor: pointer;
	font-size: 18px;
	transition-duration: 0.25s;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}

button:hover{
	background-color: #333333;
	color: #ffffff;
}


.support {
    color: white;
    text-align: center;
    margin-top: 25px;
}

.supportNotif {
    color: lightgray; 
    /* var(--FondoNaranja); */
    font-weight: 700;
}

.supportNotif:hover, .supportNotif:active {
    color: white;
    font-weight: bold;    
}