.datagrid               { border-collapse: collapse; width: 100%;}
.datagrid td            { font-size: .9rem; vertical-align: middle; padding: 8px;}
.datagrid td:first-child{ padding-left: 1rem;}
.datagrid td select     { margin-top: .2rem;}
.datagrid th            { font-size: 1rem; font-weight: 500; line-height: 1.25rem; text-align: left; padding: 3px 5px; color: white; vertical-align: bottom;}
.datagrid th:first-child{ padding-left: 1rem}
.datagrid .subheader td { font-size: .9rem;font-weight: 500; line-height: 1.25rem; text-align: left; padding: 3px 5px; color: white;}
.datagrid .subheader td:first-child{ padding-left: 1rem;}
.datagrid .filter td    { font-size: 1rem; background-color: #EEE; padding: 0; border: none;}
.datagrid tr:hover td   { background-color: #FFD;}

.datagridthin               { border-collapse: collapse; width: 100%; margin-top: 0px;}
.datagridthin td            { font-size: .9rem; line-height: 1.5em; vertical-align: middle; padding: 3px 5px; background-color: #EEE;}
.datagridthin th            { font-size: .9rem; line-height: 1.5em; text-align: left; padding: 3px 5px; background-color: #666; color: white; vertical-align: bottom; font-weight: normal;}
.datagridthin .subheader td { font-size: .9rem; line-height: 2.2em; text-align: left; padding: 3px 5px; background-color: #999; color: white;}
.datagridthin .filter td    { font-size: 1rem; background-color: #EEE; padding: 0; border: none;}

.datagrid tr:nth-child(odd)     { background-color: #F9F9F0;}
.datagrid tr:nth-child(even)    { background-color: #fff;}
.datagrid .footer       { border-top: 1px solid #AAA; border-bottom: 1px solid #AAA;}
.datagrid .footer td    { background-color: #BEBEBE;}

.table-clear            { margin: 0; padding: 0; background-color: transparent; border: none; border-collapse: collapse; width: 100%;}
.table-clear td         { margin: 0; padding: 0;}

.filtergrid             { border-collapse: collapse; width: 100%; margin-top: 0; border: 1px solid #CCC;}
.filtergrid th          { font-size: .9em; line-height: 2.3rem; text-align: left; padding: 3px 5px; background-color: #DDD; color: black; vertical-align: bottom; border: none;}
.filtergrid td          { vertical-align: text-top; padding: 3px 10px !important; border: none;}


.datalist               { border-collapse: collapse; width: 100%; margin-top: 20px;}
.datalist td            { line-height: 2.4em; vertical-align: text-top; padding: 3px 5px;}
.datalist th            { line-height: 2.4em; text-align: left; padding: 3px 5px; background-color: #666; color: white;}
      
.text-ro                { color: #999;}
.text-key               { }            
.text-key:after         { content: ':';}

.text-max               { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; padding: 0; margin-bottom: -3px; font-size: .9rem; line-height: .9rem;}
.text-max10             { max-width: 10rem;}
.text-max15             { max-width: 15rem;}
.text-max20             { max-width: 20rem;}
.text-max25             { max-width: 25rem;}
.text-max30             { max-width: 30rem;}
.text-max30             { max-width: 40rem;}

.items_3                { display: block; width: 100%; margin-top: 20px;}
.items_3 div            { width: 33%; float: left;}
.items_3 div input      { margin-right: 20px;}