input, textarea, select {
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    outline: none;
    padding: 2px 0px 2px 2px;
    margin: 4px 1px 2px 0px;
    border: 1px solid darkgrey;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input:not([type=checkbox]):not([type=radio]):not([type=file]), select {
    height: 22px;
}

input[type=checkbox] {
    padding: 4px;
}

input:not([type=checkbox]):not([type=file]):not([type=radio]):focus, select:focus, textarea:focus {
    box-shadow: 0 0 4px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

/* classes for validation errors (focus/hover are brighter) */
.invalid > input, .invalid > select, .invalid > textarea {
    box-shadow: 0 0 4px rgba(150, 40, 27, 1);
    border: 1px solid rgba(150, 40, 27, 1);
}

.invalid > input[type=radio] {
    box-shadow: 0 0 4px rgba(150, 40, 27, 1);
    border: 1px solid rgba(150, 40, 27, 1);
}

.invalid > input:focus, .invalid > select:focus, .invalid > textarea:focus {
    box-shadow: 0 0 4px rgba(242, 38, 19, 1);
    border: 1px solid rgba(242, 38, 19, 1);
}

/* classes for validation errors (focus/hover are brighter) */
.invalid_highlight > input, .invalid_highlight > select, .invalid_highlight > textarea {
    box-shadow: 0 0 4px goldenrod;
    border: 1px solid goldenrod;
}

.invalid_highlight > input:focus, .invalid_highlight > select:focus, .invalid_highlight > textarea:focus {
    box-shadow: 0 0 4px gold;
    border: 1px solid gold;
}

.verified {
    box-shadow: 0 0 4px #00FF00;
    border: 1px solid #00FF00;
}