:root
{
    --control-length:400px;
}

form
{
    background:white;
    display:flex;
    flex-direction:column;
}

label
{
    width:calc(100% - 50px);
    margin:10px 0px 0px 20px;
}

input[type=password],
input[type=email],
input[type=date],
input[type=textbox],
input[type=number],
input active, input[type=file]
{
    border: none;
    border-bottom: 1px solid gray;
    width:calc(100% - 60px);
    outline: none;
    background:#eeeeee;
    padding:10px;
    margin:10px 10px 10px 20px;
}

select
{
    border: 1px solid gray;
    width:calc(100% - 40px);
    outline: none;
    background:#eeeeee;
    padding:10px;
    margin:10px 10px 10px 20px;
}

input[type=radio],
input[type=checkbox]{
    margin:5px 5px 5px 20px;
}

input[type=checkbox] + label,
input[type=radio] + label
{
    margin-left:0px;
}

button, input[type=button]
{
    width:calc(100% - 40px);
    margin:10px 10px 10px 20px;
    padding:10px;
    background:#eeeeee;
    display:block;
    outline: none;
    border: 1px solid gray;
}

@media only screen and (min-width:600px)
{
    input[type=password],
    input[type=email],
    input[type=date],
    input[type=textbox],
    input[type=number], input[type=file],
    input active
    {
        max-width:calc(var(--control-length) - 20px);
    }
    
    select
    {
        max-width:var(--control-length);
    }
    
    input[type=radio],
    input[type=checkbox]
    {
        max-width:var(--control-length);
    }
    
    button, input[type=button]
    {
        max-width:var(--control-length);
    }
}