﻿:root{
    --font-color:#555;
    --font-hover-color:orange;
}
input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty {
	color: #626262;
	background-color: #fff;
	border-color: none;
}
input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
	background-color: none!important;
	border-color: #fff;
	color: #333;
}
body2{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    height:100vh;
    font-family:"Roboto", sans-serif;
    background-color:#fff;
}

.containerform{
    width:500px !important;
    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07) !important;
    padding:2em !important;
    background-color:#fff !important;
}
.form-group{
    margin-bottom:1.5em !important;
    transition:all .3s !important;
}
.form-label{
	font-size: .75em !important;
	color: rgba(0,127,194,1.00) !important;
	display: block !important;
	opacity: 0 !important;
	transition: all .3s !important;
	transform: translateX(-50px) !important;
}
.form-control{
    box-shadow:none !important;
    border-radius:0 !important;
    border-color:#ccc !important;
    border-style:none none solid none !important;
    width:100% !important;
    font-size:1em !important;
    transition:all .6s !important;
}
.form-control::placeholder{
    color:#aaa !important;
}
.form-control:focus{
    box-shadow:none !important;
    border-color:var(--font-hover-color);
    outline:none !important;
}
.form-group:focus-within{
    transform:scale(1.1,1.1) !important;
}

.form-control:invalid:focus{
    border-color:red !important;
}
.form-control:valid:focus{
    border-color:green !important;
}

.btn{
    background: 0 0 #fff !important;
    border:1px solid #aaa !important;
    border-radius:3px !important;
    color:var(--font-color) !important;
    font-size:1em !important;
    padding:10 50px !important;
    text-transform:uppercase !important;
}
.btn:hover{
    border-color:var(--font-hover-color) !important;
    color:var(--font-hover-color) !important;
}
textarea{
    resize:none !important;
}

.focused > .form-label{
    opacity:1 !important;
    transform:translateX(0px) !important;

}
