form label {
    display: table;
    color: #777;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
    padding: 8px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px -8px #000 inset;
    margin: 2px;
    background: #F5F5F5;
    margin-bottom: 10px;
}


input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover {
    padding: 8px;
    border: 1px solid #BFBFBF;
    box-shadow: 0px 0px 10px -8px #000 inset;
    margin: 2px;
    background: #FAFAFA;
    margin-bottom: 10px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    padding: 8px;
    border: 1px solid #384F95;
    box-shadow: 0px 0px 10px -8px #000 inset;
    margin: 2px;
    background: #FAFAFA;
    margin-bottom: 10px;
    color: #384F95;
}

input[type="submit"] {
    padding: 8px;
    border: 1px solid #B5B5B5;
    box-shadow: 0px 0px 10px -8px #000 inset,
        0px 0px 5px -4px #000,
        2px 2px 2px 0px #fff inset;
    margin: 2px;
    background: #E6E6E6;
    margin-bottom: 10px;
    cursor: pointer;
    color: #444;
}

.input {
    position: relative;
    display: table;
    margin: auto;
}

.input input {
    border: 0px;
    padding: 10px;
    background: transparent;

    border: 1px solid rgb(204, 204, 204);
    box-shadow: 0px 0px 5px -4px #000 inset;
    background: #fff;
    margin: 0px;
}

.input input:hover {
    padding: 10px;
    margin: 0px;
}

.input input:focus {
    padding: 10px;
    margin: 0px;
    border: 1px solid #4E9B4B;
    box-shadow: 0px 0px 5px -3px #000 inset;
    background: #fff;
    color: #4E9B4B;

}

.input[data-type="search"] input:focus+span {
    opacity: 1;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AEFCzEjuEHxgQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAARZSURBVFjD7ZjNbxtVFMV/M3YaJTRAWo8HKIFHgRIkqPgSqkDRk5xKCDZUgg0bYIFAQqzZsGMF/wAgsQSJBVKF2AVQokcRLChF5WNc0VTw3DqunShSPjyBeMZmcycamTQdxyYSKFca2R49v3t8z7vnHg/sx378B6JQKGRe63nervM4vSz2fZ96vb71WWs9BhSBMWAIaAMhsGyMqfdbBGc3wLTWB4CngElgArgJOADEAq4OzANzxphKUsHFxcXBgysUCiwtLSXAFPAS8JgA6nTt00m9VoFPga+MMXF6nyyRywpuZWUFrfWTwBvAQ0AkoFygCawDm0BeKG4BBeA4cFApdb5cLnd836fZbGYCl7/egmKxSKVSQWv9CPAycLuAGQaWgO+AMrAs944CjwL3A3/KvWcl1/vtdnswlfN9n0ajgdb6EPAKcLdUbAT4FngPmAV+D4KgNj4+XnNd9wLwA7AmQPNC8T1KqeUgCC5lrV6mM6e1PgW8KInywPfAu/Pz82G1Wt3pey8AzwnNDnAReNsYs5Ilr7sTnZLgMPCEHH5HqPrAGBNWq9WtddtpoDHmE+BSqgi+nEH6AtdoNEht6Ak1I8DXxphaIq6pdQDbdeOHqe69Abi3b3DpYqQk40bgMyCTZjmOgzFmXhrHFXq9QYIblU2TBqr1ItwJEanbI6VSaXhQ4NpdwjqUWeEdZzvJasdxHA8K3KoIqiMi+0BXVa4ZtVqNUqnkArfJD+sAa8aYaFDgGsCGgFsFnj958qRTr9d3dCdJF8dx/LQYgw7wl4y0f3R5T+BSVqcmcoBUcLLVaumkM7stUZJUxPsIcCo1f9eBYLsu72lChGEIgLU2UkpFMk+HJckxpdSCtbaarEsiUX6tdRF4NSUdeeCnKIpOX758udO3K0ls0vT0tBtF0WvAM9IgQyIPc8BcLpdrAJtxHOeEwgdl7THJ4cjsfcsYcyWrfbru+CoWiwlFh4HXgZKcvZzQ1RDak8F/J3CHCHZbroPAO8aYL3vxdde1TAlN1toNpdQFGfwnJGkklZoQ+o6KaOdT3ZlEy1r7zejoKN1HoW8/F4YhCwsLzYmJiV+Ac8B9wC3SVMmVE8pdaZ60Vt6qlArL5fJvnudlApgJXBiGeJ7H2toa1tp4Y2Oj5nneLPCzULwuVx34Ebgivi/XdYQOKaXOBkEQ9t0QvcTU1JRz5syZjrwfc133TeBhqVqSqwWcNsZ8nOV/Ra5fUAnllUplSx/L5fKmUmpV7NFo6uzlgYJS6qK1dilh5FoU9w2ue+Pk8+Tk5NUoio4Ad6XEvgPcDIwopc5Za1s7nT2XfyF832dmZqYDfA5clTxJ9RJBPzGQhug1ms0mnucRBMGKUioEHu8qxjDQUkqdtdbGe1q5tBk1xszKn6FhaQ4n5XDa/bqSXUfKeXwk9I6LDv4KfGGMae2JlOzkbhYXF9FaHxcv2ATOG2P+2O1jij15KpXFsO55ZDGa+/G/jb8BcPDBXbtsVckAAAAASUVORK5CYII=");
}

.input[data-type="search"] span {
    position: absolute;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AEFCzEjuEHxgQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAARZSURBVFjD7ZjNbxtVFMV/M3YaJTRAWo8HKIFHgRIkqPgSqkDRk5xKCDZUgg0bYIFAQqzZsGMF/wAgsQSJBVKF2AVQokcRLChF5WNc0VTw3DqunShSPjyBeMZmcycamTQdxyYSKFca2R49v3t8z7vnHg/sx378B6JQKGRe63nervM4vSz2fZ96vb71WWs9BhSBMWAIaAMhsGyMqfdbBGc3wLTWB4CngElgArgJOADEAq4OzANzxphKUsHFxcXBgysUCiwtLSXAFPAS8JgA6nTt00m9VoFPga+MMXF6nyyRywpuZWUFrfWTwBvAQ0AkoFygCawDm0BeKG4BBeA4cFApdb5cLnd836fZbGYCl7/egmKxSKVSQWv9CPAycLuAGQaWgO+AMrAs944CjwL3A3/KvWcl1/vtdnswlfN9n0ajgdb6EPAKcLdUbAT4FngPmAV+D4KgNj4+XnNd9wLwA7AmQPNC8T1KqeUgCC5lrV6mM6e1PgW8KInywPfAu/Pz82G1Wt3pey8AzwnNDnAReNsYs5Ilr7sTnZLgMPCEHH5HqPrAGBNWq9WtddtpoDHmE+BSqgi+nEH6AtdoNEht6Ak1I8DXxphaIq6pdQDbdeOHqe69Abi3b3DpYqQk40bgMyCTZjmOgzFmXhrHFXq9QYIblU2TBqr1ItwJEanbI6VSaXhQ4NpdwjqUWeEdZzvJasdxHA8K3KoIqiMi+0BXVa4ZtVqNUqnkArfJD+sAa8aYaFDgGsCGgFsFnj958qRTr9d3dCdJF8dx/LQYgw7wl4y0f3R5T+BSVqcmcoBUcLLVaumkM7stUZJUxPsIcCo1f9eBYLsu72lChGEIgLU2UkpFMk+HJckxpdSCtbaarEsiUX6tdRF4NSUdeeCnKIpOX758udO3K0ls0vT0tBtF0WvAM9IgQyIPc8BcLpdrAJtxHOeEwgdl7THJ4cjsfcsYcyWrfbru+CoWiwlFh4HXgZKcvZzQ1RDak8F/J3CHCHZbroPAO8aYL3vxdde1TAlN1toNpdQFGfwnJGkklZoQ+o6KaOdT3ZlEy1r7zejoKN1HoW8/F4YhCwsLzYmJiV+Ac8B9wC3SVMmVE8pdaZ60Vt6qlArL5fJvnudlApgJXBiGeJ7H2toa1tp4Y2Oj5nneLPCzULwuVx34Ebgivi/XdYQOKaXOBkEQ9t0QvcTU1JRz5syZjrwfc133TeBhqVqSqwWcNsZ8nOV/Ra5fUAnllUplSx/L5fKmUmpV7NFo6uzlgYJS6qK1dilh5FoU9w2ue+Pk8+Tk5NUoio4Ad6XEvgPcDIwopc5Za1s7nT2XfyF832dmZqYDfA5clTxJ9RJBPzGQhug1ms0mnucRBMGKUioEHu8qxjDQUkqdtdbGe1q5tBk1xszKn6FhaQ4n5XDa/bqSXUfKeXwk9I6LDv4KfGGMae2JlOzkbhYXF9FaHxcv2ATOG2P+2O1jij15KpXFsO55ZDGa+/G/jb8BcPDBXbtsVckAAAAASUVORK5CYII=");
    top: 0px;
    right: 0px;
    width: 41px;
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
    transition: 200ms;
}