/* this CSS removes the standard styles from form inputs and adds a basic style which is easy to work on, with.
   for some cases it might be enough to overwrite the root vars in your project's css
   replaces the resetInputs.css of 1.14.3 and earlier */
:root {
    --input-color:              #333;
    --input-bg:                 #fff;
    --input-border:             #999;
    --input-border-focus:       #000;
    --input-placeholder:        #aaa;
    --input-button-color:       #333;
    --input-button-bg:          #ccc;
}
input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], textarea, select{
    padding: .4em .5em;
    width: 100%;
    margin-top: .2em;
    border: 1px solid var(--input-border);
    box-sizing: border-box;
    border-radius: 1px;
    outline: none;
    background: var(--input-bg);
    color: var(--input-color);
}

input, select, textarea, button {
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
}

::placeholder {color: var(--input-placeholder);font-family: inherit;font-size: inherit;opacity: 1}
input:focus, textarea:focus {border-color: var(--input-border-focus)}

input[type=submit], input[type=button], button {appearance: none;border-radius: 0;border: none;outline: none;background: var(--input-button-bg);color: var(--input-button-color);padding: .2em .5em}
select {appearance: none;background-image: url("../images/angle_down.svg");background-position: right .5em center;background-repeat: no-repeat;background-size: .7em auto;padding-right: 1.5em}

input[type=checkbox], input[type=radio] {appearance: none;margin: 0 .3em .3em 0;display: inline-block;position: relative;width: 1em;height: 1em;border: 1px solid var(--input-border);vertical-align: top;background: transparent}
input[type=radio] {border-radius: .5em}
input[type=checkbox]:checked::before, input[type=radio]:checked::before {position: absolute;background-color: var(--input-border);left: 2px;top: 2px;right: 2px;bottom: 2px;content: ''}
input[type=radio]:checked::before {border-radius: calc(.5em - 2px)}
input[type=checkbox] + label, input[type=radio] + label {display: inline-block}