inventarioSustancias/public_html/style/login.css

/*  Authors         :   Carlos C. Corrada-Bravo
                        David J. Ortiz-Rivera

    Organization    :   Centro de Desarrollo y Consultoria Computacional
    Project         :   OPASO Material Registry   
    File            :   login.css
    Description     :   Styling page for login */

.login{
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
	background-color: #fff;
}

.form-wrapper{
	top: 50%;
	left: 50%;
	z-index: 1;
	color: #fafafa;
	width: 335px;
	position: absolute;
	display: inline-block;
	transform: translate(-50%,-50%);
}

.form{
	border-radius: 2.5px;
	border: 1px solid rgb(218,220,224);
}

.form-logo{
	top: 0;
    display: none;
	width: 62.5px;
	border-radius: 50%;
	margin-bottom: 10px;
	margin-right: 15px;
	position: absolute;
	object-fit: scale-down;
	display: inline-block;
	transform: translateY(-5%);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.form-header-wrapper{
	text-align: left;
	padding: 15px 20px 5px;
	border-bottom: 1px solid rgb(218,220,224);
}

.form-header{
	margin: 0;
	color: #202124;
	font-size: 16.5px;
}

.form-header-subtitle{
	color: darkgray;
}

.form-body-header{
	color: #202124;
	font-size: 16.5px;
}

.form-body{
	padding: 0px;
 	font-size: 15px;
	text-align: left;
	border-radius: 2.5px;
    margin-bottom: 7.5px;
}

.placeholder{
	z-index: 1;
	left: 15px;
	color: darkgray;
	font-size: 11px;
	font-weight: bold;
	top: 50% !important;
	position: absolute;
	will-change: transform;
	text-transform: uppercase;
	transform: translateY(-50%) !important;
}

.login-field{
	z-index: 3;
	width: 100%;
	height: 100%;
	border: none;
	color: #060606;
	position: absolute;
	padding: 7.5px 15px;
	padding-right: 35px;
	will-change: padding-top;
	background-color: transparent;
}

.view-password{
	z-index: 5;
	right: 15px;
	color: darkgray;
	cursor: pointer;
	font-size: 13.75px;
	position: absolute;
	will-change: color;
	transform: translateY(15px);
	transition: color 0.5s ease-in-out;
}

.view-password:hover{
	color: #060606;
}

.placeholder-icon{
	color:#0070E0;
	margin-left: 2.5px;
	font-size: 4px !important;
	transform: translateY(-50%);
}

.submit-login,.submit-login:hover{
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	border-radius: 2.5px;
	padding: 6.25px 10px;
	border: 1px solid #0c6ebe;
	transition: all 0.25s ease-in-out;
}

.form-input-wrapper{
	padding: 15px 20px;
}

.form-subtitle{
	margin: 0px;
	text-align: left;
	padding: 7.5px 15px;
}

.form-link{
	float: left;
	font-size: 12.5px;
	display: inline-block;
	text-decoration: none;
}

.form-link:hover{
	text-decoration: none;
}

.link-divider{
	float: left;
	display: inline-block;
	margin-left: 7.5px;
	margin-right: 7.5px;
	color: rgb(80,136,209);
	font-size: 5px !important;
	transform: translateY(150%);
}

.shrink{
	padding-top: 22.5px !important;
	transition: padding-top 0.25s ease-in-out;
}

.slide{
	font-size: 10px !important;
  	transform: translateY(-100%) !important;
	transition: all 0.25s ease-in-out;
}

.slide i{
	font-size: 9px !important;
}

.google-sign-in-wrapper{
	margin-top: 15px;
	padding: 0px 25px;
	position: relative;
	border-top: 1px solid rgb(218,220,224);
}

.google-sign-in-header{
	color: #202124;
	font-size: 12.5px;
	margin-top: 20px;
	text-align: center;
	margin-bottom: 7.5px;
}

.or{
	left: 50%;
	padding: 5px 7.5px;
	position: absolute;
	display: inline-block;
	background-color: #fff;
	transform: translate(-50%,-55%);
}

.google-sign-in{
	height: 40px;
	width: 100%;
	padding: 0px;
	font-size: 15px;
	color: #060606;
	font-weight: 500;
	position: relative;
	border-radius: 2.5px;
	display: inline-block;
	background-color: #fff;
	will-change: filter,box-shadow;
	transition: all 0.25s ease-in-out;
	border: 1px solid rgb(218,220,224);

}

.google-logo{
	left: 0;
	float: left;
	height: 39px;
	padding: 10px;
	position: absolute;
	margin-right: 10px;
	display: inline-block;
	border-right: 1px solid rgb(218,220,224);
}

.google-sign-in:hover{
	color: #282828;
	text-decoration: none;
}
.google-sign-in-text{
	width: 100%;
	float: left;
	text-align: center;
	display: inline-block;
	transform: translateY(30%);

}

input{
  filter: none;
}

*::-webkit-input-placeholder,*:-moz-placeholder{
	color: #999;
}
*:focus::-webkit-input-placeholder,*:focus:-moz-placeholder{
	color: #ccc;
}​

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected{
  	border-radius: 2.5px;
	color: #000 !important;
  	background-color: transparent !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 0.5s ease-in-out;
}

button:focus,
button:active{
  	border-radius: 2.5px;
}

@media screen and (max-width: 350px){
	.form{
		width: 100%;
	}
}