/*-----------------------*/
/* Forms for List and Update */
/*-----------------------*/
div.detail h2 { text-transform:capitalize; } 
div.sep { }
div.sep hr { }
div.sep div { display:block; float:right; font-size:smaller; }
/*-----------------------*/
/* Detail for each Item */
table.detail { }
/*-----------------------*/
/* Input */
table.form 
{ 
    border:1px solid black;
    border-collapse:separate;
    margin:1em 0 1em 0; 
    padding:.5em 0em .5em 0em; 
    width:auto; 
}
table.form hr { border:1px solid black; margin:.5em 0 .25em 0; padding:0 0 0 0; }
    table.form h4 {
        font-size:.9em;
        margin-top: .25em;
        margin-bottom: .25em;
        padding: 0;
    }
/*table.form td { padding-right:1em; }*/
    table.form input[type='text'] {
       /* max-width:max-content; */
    }
table.form span.error {display:block;}
/*-----------------------*/
table.form .prompt { text-transform:capitalize; white-space: nowrap; } /*padding-left:1em;*/
table.form .prompt_after { padding-left:0; } 
table.form .prompt_asis { text-transform:none; } 
/* span.prompt {  } /* extra items on same line */
table.form td.prompt { text-align:right; } /* column 1 */ /*padding-right:.5em;*/
table.form span.prompt { padding-left:.75em; padding-right:.4em; }
/*-----------------------*/
@media screen and (min-width:769px) {
    /*-----------------------*/
    input[type="text"] {
        width: 40em;
    }

    #lookup input[type="text"] {
        width: 24em;
    }
    /*-----------------------*/
    input.date {
        width: 8em;
    }

    input.datetime {
        width: 16em;
    }

    input.decimal {
        width: 8em;
    }

    input.guid {
        width: 32em;
    }

    input.integer {
        width: 6em;
    }

    input.object {
        width: 36em;
    }

    input.text {
        width: 40em;
    }
    /* Default */
    input.texthalf {
        width: 21em;
    }

    input.textfull {
        width: 43em;
    }

    input.text1 {
        width: 4em;
    }

    input.text2 {
        width: 8em;
    }

    input.text3 {
        width: 12em;
    }

    input.text4 {
        width: 16em;
    }

    input.text5 {
        width: 24em;
    }

    input.text6 {
        width: 28em;
    }

    input.text7 {
        width: 32em;
    }

    input.text8 {
        width: 36em;
    }

    input.text100 {
        width: 100%;
    }

    input.time {
        width: 6em;
    }
    /*-----------------------*/
    textarea {
        width: 43em;
    }

        textarea.text100 {
            width: 100%;
        }
}
    /*-----------------------*/
    /* Error */
    div.error_field {
        display: inline-table;
        width: auto;
    }

        div.error_field input {
            background-color: #FF9999;
            margin-right: .5em;
        }

        div.error_field span {
            color: Red;
            margin-right: .5em;
        }
    /*-----------------------*/
    /* input in a table with form_list */
    /*
table.form_list input.date { width:21em; }
table.form_list input.datetime { width:21em; } 
table.form_list input.form { width:43em; }
table.form_list input.guid { width:32em; }
table.form_list input.integer { width:8em; }
table.form_list input.object { width:32em; }
table.form_list input.text { width:43em; }
table.form_list input.time { width:21em; }

input.form_button { width:auto; }

td.form_button { padding:.5em 1em .5em 1em; text-align:center; } 
.form_secondary { font-size:smaller; } 
td.form_message { font-size:smaller; padding-left:2em; text-align:left; } 
*/
    /*-----------------------*/
    /* Summary for each Item */
    /*
table.summary { }
tr.summary { vertical-align:top; }
td.summary { text-align:left; } 
*/
    /*----------------------*/
    @media screen and (max-width:768px) {
        #lookup input[type="text"] {
            width: 18em;
            /*width: 800px;*/
        }

        table.form {
            display: block;
            width: 100%;
        }

            table.form hr {
                border: 1px solid black;
                margin: 0 0 .21em 0;
                padding: 0 0 0 0;
                width: 18em;
                /*width: 800px;*/
            }

            table.form h4 {
                font-size:100%;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }

            table.form input[type='submit'] {
                display: inline-block;
                font-size: 125%;
                margin: .20em;
            }

            table.form input[type='text'], table.form input[type='password'] {
                display: block;
                font-size: 125%;
                margin-right: 2px;
            }
            /*table.form input[value='Lookup']::before { content: "\A"; white-space:pre; }*/
            table.form select {
                display: block;
                font-size: 115%;
                max-width: 18em;
            }

            table.form td.prompt, table.form span.prompt {
                display: block;
                padding: 0;
                text-align: left;
                width: 20em;
                /*width: 800px;*/
            }

            table.form textarea {
                font-size: 110%;
                width: 20em;
                /*width: 800px;*/
            }

            table.form tr {
                display: block;
                padding: .5em 0 .5em 0;
            }
        input[type="checkbox"] {
            height:1.5em; width:1.5em;
        }
        input[type="text"] {
            width: 90%;
        }

        #lookup input[type="text"] {
            width: 90%;
        }
        /*-----------------------*/
        input.date {
            width: 8em;
        }

        input.datetime {
            width: 90%;
        }

        input.decimal {
            width: 8em;
        }

        input.guid {
            width: 90%;
        }

        input.integer {
            width: 6em;
        }

        input.object {
            width: 90%;
        }

        input.text {
            width: 90%;
        }
        /* Default */
        input.texthalf {
            width: 90%;
        }

        input.textfull {
            width: 90%;
        }

        input.text1 {
            width: 4em;
        }

        input.text2 {
            width: 8em;
        }

        input.text3 {
            width: 12em;
        }

        input.text4 {
            width: 90%;
        }

        input.text5 {
            width: 90%;
        }

        input.text6 {
            width: 90%;
        }

        input.text7 {
            width: 90%;
        }

        input.text8 {
            width: 90%;
        }

        input.text100 {
            width: 100%;
        }

        input.time {
            width: 6em;
        }
        /*-----------------------*/
        textarea {
            width: 90%;
        }

            textarea.text100 {
                width: 100%;
            }
    }
    /*-----------------------*/