.group { width: 100%; height:80px; overflow: hidden; position: relative;}
label {position: absolute; top:18px;color:#313131; font: 400 18px ; cursor: text;transition: .25s ease;}
label i{color:#666;}
input { display: block; width: 100%; padding-top:18px; border: none; border-radius: 0; color: #333; background: transparent; font-size:18px;transition: .3s ease;}
.group input:valid ~ label {top: 0; font:500 16px ; color:var(--primary);}
.group input:valid ~ label i{ color:var(--primary);}
input:focus {outline: none;}
.group input:focus ~ label { top: 0; font:500 16px ; color: var(--primary);}
input:focus ~ label i{color:var(--primary);}
input:focus ~ .bar:before {transform: translateX(0);}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #333 inset; -webkit-text-fill-color: white !important;}
.bar { background:#313131; content: ''; width: 550px; height:2px; transition: .3s ease; position: relative;}
.bar:before {content: ''; position: absolute; width: 100%; height: 150%; background: var(--primary); transform: translateX(-100%);}
.field-icon {float: right; margin-left: -25px; margin-top: -25px; position: relative; z-index: 2;}
.auth_form .logo{width:64px;}.auth_form h3{ margin-bottom:0px;color:#111}.auth_form .header{ padding-bottom:0px;}
/*.auth_form { background: #f8fafb!important;}*/

@font-face {
 font-family:Material-Design-Iconic-Font;
 src:url(/fonts/Material-Design-Iconic-Font.woff2) format("woff2"),
 url(/fonts/Material-Design-Iconic-Font.woff?v=2.2.0) format("woff"),
 url(/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0) format("truetype")
}