* { box-sizing: border-box; margin:0; padding:0; }

*.highlight {background: #FFFFCC;}
*.normal {background: #F0F0F0;}

body {
    background:#FFFFFF;
    font-family: sans-serif;
    color:#646464;
    font-size: small;
    margin-left:5px; margin-top:0px;
	overflow-x:hidden; overflow-y:auto;

}
body.print { margin-top:20px; }
.only_print { display:none; }

.hint, .hinweis, .notice { color:maroon; text-align:left; }
.error { color:red; text-align:left; margin-bottom:8px }
.success { color:green; text-align:left; margin-bottom:8px}
.errorMsg { padding: 8px; clear: both; border: 1px solid red; width:100%; }

.pull_left {margin-left:0;}
.pull_right {margin-right:0;}

h1, h2, h3, h4, big { font-family: Helvetica, sans-serif; font-weight: normal; margin: 0 0 8px 0; }

h1 {font-size:18pt;}
h2 {font-size:16pt;}
h3 {font-size:14pt;}
h4, big {font-size: 12pt;}

p {margin: 0 0 8px 0; font-size: 10pt; }
p.umbruch { page-break-after: always; }

label {margin-right: 4px;}

#dialogHelp ul {margin-bottom:1em;}

div { margin: 0 0 4px 0 }

div#content { clear:both; margin:8px 0; padding:0; max-width:100%; }
div.button_printView {margin:8px; float:right;}
div.dataNavi {clear:both;}
div.dataNavi, div.shortList, form.filter, form.sort {margin: 0 4px 8px 0; float:left}

td div {
    padding: 0 2px;
}
div.gridData {
    margin: 0; padding: 2px 4px;
}
div.formData {
    margin: 0; padding: 2px;
}
div.data { clear: both; }

div.container {
    max-width:100%;
    margin-top:4px;
    padding: 4px;
    background: #F3F3F3;
    border: solid thin #CCC;
}
div.container panel, div.container #footer, div.container #header {
    clear:both;
    max-width:100%}

div#Tabelle, div.Tabelle, div#footer {font-size: small; margin-top:8px;}

.panel {margin: 0 8px 8px 3px; width:100%; overflow:hidden;}
.panel div, .panel h2 {margin-right: 4px;}
.panel input, .panel select, .panel label, .filter label, .sort label {margin: 0 4px 0 0;}

div.radiogroup div, div.checkboxgroup div {float:left; margin:0 4px 4px 0;}
div.radiogroup div input, div.checkboxgroup div input { float:left;}
div.radiogroup label, div.checkboxgroup label {margin: 0 8px 0 4px;}

.shortList select, .filter select, .sort select {
    margin: 0 4px 4px 0;
    padding: 0 2px;
    height: 30px;
    line-height: 2em;
    border: 1px solid #bbb;
    box-sizing: border-box;
}

input[type=button], input[type=submit] {
    text-align:center;
    font-size: small;
    height: 30px;
    margin: 0 4px 4px 0;
    padding: 0 2px;
    width:auto;
}

.filter input { height: 30px; margin: 0 4px 0 0 }

label.required::after { content: " * "; color: red; }
div.contentLabel {width:auto; display:inline-block;}

div.row { clear:both; margin: 4px; padding:0;}
fieldset { border: 1px #C0C0C0 solid; background: #F0F0F0; margin-bottom: 4px; }
fieldset.content div.row { height: auto; }

fieldset div.hidden, fieldset.content div.hidden {height: 0; margin: 0;}
fieldset .newItemLink {margin-left:2px;}

div#dialog, div.dialog { display:none; color:#111111; }   /* JQuery UI Dialog */
div#dialogError, div#error { display:none; color:black; } /* JQuery UI Dialog */
div#dialogErrorTestsystem { color:black; max-width:100% }

div.dialog table, div.dialog tr, div.dialog td { border:none; background:none; }

div.debugBox, div.infoBox {background: white; min-height:20px; max-width:100%; overflow:auto; clear:both;}
div.debugBox { border:1px solid red; }
div.infoBox { border:1px solid darkgreen; }

.debugBox pre, .infoBox pre, pre.error { overflow-wrap:break-word; padding:5px; color:black; white-space: pre-wrap; }

table { border-collapse: collapse; border: 1px #C0C0C0 solid;
	    background-color: #F0F0F0; table-layout:fixed; }
table.data { min-width: 100%; max-width: 100%; }
table.login { border: none; background: none; max-width:100%; table-layout:auto;}
table.login td { border-style:none; }

div.addRow { float:right; color:blue; cursor:pointer }

td { border: 1px #C0C0C0 solid; padding:2px; font-size: 10pt; overflow:hidden !important; }
th { border: 1px #C0C0C0 solid; white-space: nowrap; font-size: 9pt; font-weight: normal; padding:4px;
     text-align:center; background: #DCDCDC }
td label, td input[Type=text], td textarea ,td select {width:100%; box-sizing:border-box; margin:2px 0;}
td label {margin-right:2px;}

td.header {background: #FFFFFF; text-align:right;}
td.tableFooter {margin-right:4px;}

.Summe {font-size: 12pt; background-color: #F0E8F8; white-space: nowrap;}

a:link { color: #0000FF; text-decoration: none; background-color:#F0F0F0; }
a:visited { color: #800080; text-decoration: none; background-color:#F0F0F0;}
a:hover { color: #CC3300; background-color: #FFFF99;}

dd {font-family: Helvetica, sans-serif; margin: 4px 0;}
dt {font-family: Helvetica, sans-serif; margin: 4px 0; font-size: 12pt; font-weight: bold;}
li {padding:2px 0;}

img.edit {margin:0; width:22px; cursor:pointer; border:none}
img.horizontal { float:left; height:200px; margin: 4px 4px 4px 0; }
img.links_hoch { float:left; height:320px; margin: 4px 8px 4px 0; }
img.links_quer { float:left; width:320px; margin: 4px 8px 4px 0; }
img.rechts_hoch { float:right; height:320px; margin: 4px 0 4px 8px; }
img.rechts_quer { float:right; width:320px; margin: 4px 0 4px 8px; }

.tDnD_whileDrag, .showDragHandle { background-color:#ffe6cc; }
.ui-datepicker {background:lightgray;}
.dragHandle {cursor:move;}

.far { text-align:left; cursor:pointer;}
.fa-save { color:blue; }
.fa-envelope { color:purple; }
.fa-minus-square { color:red; }
.fa-copy { color:darkgreen; }


/*.combo {position:relative; margin-bottom:2em;}
.combo select.comboInline, .combo input.comboInline {position:absolute; top:0; left:0;}
.combo select.comboInline {z-index:1}
.combo input.comboInline {z-index:2}*/

.combo { position:relative; margin-bottom:2em; }
.combo select, .combo input[type=text] { position:absolute; top:0; left:0; }
.combo select { z-index:1 }
.combo input[type=text] { z-index:2 }

.jqueryDate {position:relative; z-index:100 !important}

@media only screen and (min-width: 721px) {
    .container {
        position: absolute;
        left: 50%;
        width: 800px;
        margin-left: -400px;
    }
    #dropDownUsers select {width:180px;}
    #loginForm input[type=text], #loginForm input[type=password] {width:80%} /* wegen Klartext Icon  */
}

@media only screen and (min-width: 481px) {
    .row {display:flex; align-items:center;}
    .row > label, .row > .contentLabel
        {flex: 0 0 120px;}
    .row > input.formData, .row > .combo
        {flex: 100%;}
    .row > select.formData, .row > input[type=checkbox].formData, .row > input[type=radio].formData
        {flex:0 0 auto;}
}

@media only screen and (max-width: 480px) {
    body {margin: 0 4px; overflow-x: auto;}
    img.links_hoch, img.links_quer, img.rechts_hoch, img.rechts_quer { width:100% }

    div.dataNavi {clear:both;}

    div.data {width:100%; }
    .dataForm, .dataGrid, div.Tabelle {
        width:100%;
    }

    table.data {
        table-layout: fixed;
        width: 100%;
    }

    div.addRow { float:left; }

    .combo select.comboInline, .combo input.comboInline {width:100%; height:30px; }
    div.combo {margin: 0 0 30px 0;}

    .dataForm div.row > label, div.row > input {max-width:100%}
    .dataForm div.contentLabel {display: block; float: left; padding: 4px;}

    .dataForm fieldset { width:100%; }
    .dataForm fieldset.selected .row { height: 4em; }
    .dataForm fieldset.selected .hidden { height: 0; }

    .dataForm fieldset.content div.row { height: auto; }

    .dataForm input[type=text],
    .dataForm input[type=password],
    .dataForm input[type=number],
    .dataForm input[type=email],
    .dataForm input[type=button],
    .dataForm select,
    .dataForm textarea {
        padding: 0 2px;
        font-size: 1.2em;
        /* height: 30px; */
        width:100%;
        margin: 0;
    }

    .dataForm input[type=button],
    .dataForm input[type=radio],
    .dataForm input[type=checkbox],
    .dataForm input[type=number],
    .filter input,
    .filter select
        {width:auto;}

    .dataForm input[type=button] {
        margin: 0 2px 0 0;
    }

    #loginForm input[type=text], #loginForm input[type=password] {
        width:85%; /* wegen Klartext Icon  */
        padding: 0 2px;
        height:30px;
        font-size: 1.2em;
    }

    form.dataGrid textarea{
        line-height:1.5em;
    }

    #dialogError { max-width:100% }
}