* {box-sizing:border-box; transition:all 0.15s ease-in-out;}
body, html {height:100%;}
body {background:#FAFAFA; display:flex; justify-content:center; flex-direction:column; align-items:center; font-family:'Open Sans', Arial, Helvetica, sans-serif;}

.logo {width:100%; margin:34px 0 15px 0; text-align:center;}
.logo img {max-width:300px; margin-right:10px;}

.login-form {width:380px; max-width:90%; background:#FFF; border:1px solid #EBEBEB; box-shadow:0px 0px 3px 0 rgba(0,0,0,0.03);}
.login-form h3 {font-size:16px;}
.login-form-inner {padding:10px 30px 0 30px;}

form {color:#FFF;}
form input[type="text"], form input[type="password"] {display:block; width:100%; padding:15px 20px 15px 65px; font-size:14px; color:#999; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border:none; border-radius:4px;border:1px solid #EBEBEB !important;}
form input[type="text"]:focus, form input[type="password"]:focus {outline:none; background-color:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3);}
form input[type="submit"] {display:block; width:100%; padding:15px 20px; font-size:14px; color:#FFF; background:#00A9C5; text-align:center; border:1px solid #009DB7; border-radius:4px; font-family:"Open Sans", Arial, Helvetica, sans-serif;}
form input[type="submit"]:focus {outline:none;}
form input[type="submit"]:hover {background:#33C6FD; cursor:pointer;}
.form-group + .form-group {margin-top:15px;}
.form-group label {display:block; margin-bottom:4px; color:#888;}
.form-group label.checkbox {font-size:12px;}
.input-icon {position:relative;}
.input-icon .fa {position:absolute; top:0px; left:0px; bottom:0px; width:50px; color:#999; background:#FAFAFA; border:1px solid #EBEBEB !important; text-align:center; line-height:45px; border-radius:4px 0 0 4px;}
.input-icon .fa.fa-eye, .input-icon .fa.eye-slash {left:auto; top:10px; right:10px; width:30px; height:30px; line-height:30px; background:none; border:none !important; cursor:pointer;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-text-fill-color: #777;
	-webkit-box-shadow: 0 0 0px 1000px #FFF inset;
	transition: background-color 5000s ease-in-out 0s;
	border:1px solid #EBEBEB !important;
}
.form-ko {margin-bottom:20px; padding:0 20px; font-size:14px; color:#E27171; text-align:center;}

.copyright {margin-top:20px; padding:15px 20px; text-align:center; font-size:11px; color:#999; background:#FAFAFA; border-top:1px solid #EBEBEB;}
.copyright span {display:inline-block; position:relative; margin-top:4px; padding-right:18px;}
.copyright span i {position:absolute; top:2px; right:0; vertical-align:middle; color:#C00; -webkit-animation-name:pulse; animation-name:pulse; animation-duration:1s; animation-iteration-count:infinite;}
.copyright a {color:#888; transition:none;}
.copyright a:hover {color:#999; text-decoration:none; transition:none;}
.copyright a:hover span i {animation-duration:0.5s;}
.copyright img {width:40px;}
.copyright a:hover img {opacity:1;transition:all 0.15s ease-in-out;}

@-webkit-keyframes pulse {
	0% {font-size:13px;}
	50% {right:-1px; font-size:15px;}
	100% {font-size:13px;}
}
@keyframes pulse {
	0% {font-size:13px;}
	50% {right:-1px; font-size:15px;}
	100% {font-size:13px;}
}

/* Comitium version */
.c-version {margin-top:5px; padding:6px 12px 7px 6px; font-size:11px; line-height:1em; color:#7FA4B5; text-align:center;}
.c-version:before {content:""; display:inline-block; width:12px; height:12px; margin:-2px 1px 0 0; background:url(/bundles/comitium5designer/layout/img/newskin/c-logo-icon.svg?V=8) no-repeat center; background-size:100%; vertical-align:middle;}
.c-version a {color:#7FA4B5; text-decoration:none;}
.c-version a:hover {text-decoration:none; border-bottom:1px solid #BAD2DC;}
