﻿input {
    display: initial;
    color: var(--contentEnabled) !important;
    background-color: var(--c3Fill);
    border: 2px solid var(--c3Bord);
    border-radius: 0.5rem;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 40px;
    padding: 8px;
    outline-style: none !important;
    transition: all 0.2s ease-in-out;
}

    input::placeholder {
        color: var(--contentDisabled);
    }

    input:hover, input:focus {
        border-color: var(--c1Bord);
        background-color: var(--c1Fill) !important;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
    }

    input.modified {
        border-color: var(--c1Bord);
        background-color: var(--c1Fill) !important;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
    }

    input.invalid {
        border-color: var(--errorBord);
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--contentEnabled);
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px var(--c3Fill) inset;
}
