/**
 * @author Vitali Lupu
 * @copyright Vitali Lupu <mailto:vitaliix@gmail.com>
 */
/*INPUT*/
:root{
    --input-color-bg:#FFFFFF;
    --input-color-bg-active:#a37542;
    --input-color-br:#D2D2D2;
    --input-color-br-active:var(--accent-color-br);
    --input-font-size: 1rem;
    --input-padding: .5rem .3rem;
    --input-radius: 0.32rem;
    --input-transition: background 0s ease-out;
}
input:not([type=button]):not([type=checkbox]):not([type=file]):not([type=image]):not([type=submit]):not([type^='r']),
textarea:not(disabled), select:not(disabled){
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--input-color-bg);
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--input-color-br-active)), to(var(--input-color-br-active))), -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#d2d2d2));
    background-image: -webkit-linear-gradient(var(--input-color-br-active), var(--input-color-br-active)), -webkit-linear-gradient(#d2d2d2, #d2d2d2);
    background-image: linear-gradient(var(--input-color-br-active), var(--input-color-br-active)), linear-gradient(#D2D2D2, #D2D2D2);
    background-position: center bottom, center 100%;
    background-repeat: no-repeat;
    background-size: 0 2px, 100% 1px;
    border: none;
    border-radius: var(--input-radius);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-size: var(--input-font-size);
    padding: var(--input-padding);
    -moz-transition: var(--input-transition);
    -webkit-transition: var(--input-transition);
    transition: var(--input-transition);
}
input:not([type=button]):not([type=checkbox]):not([type=file]):not([type=image]):not([type=submit]):not([type^='r']):focus,
textarea:focus, select:focus{
    background-size: 100% 2px, 100% 1px;
    border: none;
    outline: none;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
input[type=number] {
    -moz-appearance:textfield !important;
}
/*LABEL - Parent must be relative or find other way to float label*/
input ~ label.label-float{
    color: #999;
    margin-bottom: 0;
    pointer-events: none;
    position: absolute;
    left: 1rem;
    top: 1rem; /*Same as Input padding top*/
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all;
}
input:focus ~ label.label-float,
input:valid ~ label.label-float,
input[type=email]:not([value=""]) ~ label.label-float{
    top: 0;
    font-size: 0.8rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    border-bottom: 2px solid var(--input-color-br-active) !important;
    /*-webkit-transition: background-color 9999s ease-out !important;*/
}