/* TABLE CSS Document iV4 */

/*** DEFAULT TABLE ***/
/* transparent table with colored tableheader */
table.default {
	width:100%;
	border:1px solid var(--gasto-border, #c0c0c0);
	border-radius:3px;
	}
	table.default th {
		background-color:var(--gasto-muted, #c0c0c0);
		color:var(--gasto-on-primary, #ffffff);
		font-weight:bold;
		padding:2px 5px;
		font-size:/*11px;*/91.66666%;
		text-transform:uppercase;
		text-align:left;
		}
	table.default tbody tr:hover {
		background-color:var(--gasto-row-hover, #ededed);
		}
		table.default tbody tr.no_hover:hover {
			background-color:transparent;
			}
			
		table.default td {
			padding:2px 5px;
			vertical-align:middle;
			font-size:/*11px;*/91.66666%;
			border-left:1px solid var(--gasto-border, #ededed);
			border-top:1px solid var(--gasto-border, #ededed);
			}
			table.default td:first-child {
				border-left:0px solid var(--gasto-border, #ededed);
				}
			table.default td.tiny {
				padding:0px 5px;
				}
			table.default td.icon {
				width: 36px;
				height:24px;
				}
				table.default td.icon span {
					width:32px;
					}
					
/*** MODULETABLE ***/
/* transparent table with transparant tableheader, looks as if the table is a part of the moduleblock itself */
table.moduletable {
	margin:0;
	width:100%;
	}
	table.moduletable th {
		color:var(--gasto-muted, #a1a1a1);
		font-weight:bold;
		padding:2px 5px;
		font-size:/*11px;*/91.66666%;
		text-transform:uppercase;
		text-align:left;
		border-bottom:1px solid var(--gasto-border, #cccccc);
		}
	table.moduletable tbody tr:hover {
		background-color:var(--gasto-row-hover, #ededed);
		}
		table.moduletable tbody tr.no_hover:hover {
			background-color:transparent;
			}
			
		table.moduletable td {
			padding:2px 5px;
			vertical-align:middle;
			font-size:/*11px;*/91.66666%;
			border-left:1px solid var(--gasto-border, #ededed);
			border-top:1px solid var(--gasto-border, #ededed);
			}
			table.moduletable td:first-child {
				border-left:0px solid var(--gasto-border, #ededed);
				}
			table.moduletable td.tiny {
				padding:0px 5px;
				min-width:50px;
				}
			table.moduletable td.icon {
				width: 36px;
				height:24px;
				}
				table.moduletable td.icon span {
					width:32px;
					}
			table.moduletable td.red_highligted_border_bottom {
				border-bottom:1px var(--gasto-danger, #ff0000) dotted;
				}
			table.moduletable td.red_highligted_border_top {
				border-top:1px var(--gasto-danger, #ff0000) dotted;
				}


/*** BORDERLESS TABLE ***/
/* tables without border and no tableheader, recommend to use with extended table class .formtable (see form.css) */
table.no_border {	
	width:100%;
	border-width:0;
	}
	table.no_border tr:hover {
		background-color:var(--gasto-row-hover, rgba(0,0,0,0.05));
		}
		table.no_border tbody tr.no_hover:hover {
			background-color:transparent;
			}			
		table.no_border th {
			font-weight:bold;
			padding:2px;
			}
		table.no_border td.spacer {			
			padding:2px 5px 2px 10px;
			}
		table.no_border td {			
			padding:2px;
			}
			table.no_border td.checkboxTableCell {
				width:25px;
				}	

/*** FORM TABLE ****/
/* table used to display a form (see form.css) */
table.formtable th {
	text-align:left;
	}
table.formtable th.v-align,
table.formtable td.v-align {
	vertical-align:top;
	}
	/* Avoid changing width inline edit fields in table-based dashboard blocks (IRES-8539) */
	.inline_formtable.fixed_table_layout .no_border.formtable {
			table-layout:fixed;
			width:100%;
			}
			.inline_formtable.fixed_table_layout .no_border.formtable tr th:first-child {
					width:40%;
					}
			.inline_formtable.fixed_table_layout .no_border.formtable tr td.tiny {
					width:15%;
					text-align:right;
					}

/***TopBottomBorderOnly***/
/*used with default, only top and bottom borders are displayed, no radius. For example used in mod=filter *save-mode* to show text with a top and bottom border*/
table.TopBottomBorderOnly {
	border-left-width:0;
	border-right-width:0;
	border-radius:0;
	}
	table.TopBottomBorderOnly td {
		padding-bottom:10px;
		}

/***TopBorderOnly***/
/*used with default, only top border is displayed, no radius. For example used in mod=filter *save-mode* to show text with a top border*/
table.TopBorderOnly {
	border-left-width:0;
	border-right-width:0;
	border-bottom-width:0;
	border-radius:0;
	}
	table.TopBorderOnly td {
		padding-bottom:10px;
		}
	
/*** SETTING TABLE ***/
/* tables used for Edit Setting Mode: use table class .default with the extended tableclass .setting */
table.setting {
	margin:0 0 5px 0;
	width:100%;
	border-width:0px;
	}
	table.setting th {
		background-color:transparent;
		color:var(--gasto-muted, #a1a1a1);
		font-weight:bold;
		padding:2px 5px;
		font-size:/*11px;*/91.66666%;
		text-transform:uppercase;
		text-align:left;
		border-bottom:1px solid var(--gasto-border, #cccccc);
		}
	table.setting td {
		padding:5px;
		}
		table.setting td.top {
			vertical-align:top;
			}
			table.setting td.top .dojoDndItem {
				margin-top:5px;
				}
				table.setting td.top .dojoDndItemOver {
					color:var(--gasto-primary, #93c30f);
					}
				table.setting td.top .dojoDndItemAnchor,
				table.setting td.top .dojoDndItemSelected {
					text-decoration:underline;
					}
				table.setting td.top .dojoDndItemBefore,
				table.setting td.top .dojoDndItemAfter {
					border-color:var(--gasto-border, #C0C0C0);
					}
					/*** DnD BOX ***/
					.tundra table.dojoDndAvatar { 
						border: solid 1px var(--gasto-border, #cccccc)!important;
						border-collapse:separate!important;
						border-radius: 5px!important;
						background-color:var(--gasto-surface, #ffffff);
						font-size: 90%!important;
						color: var(--gasto-text, #212121)!important;
						min-width:100px;
						border-spacing:3px;
						}
						.tundra .dojoDndAvatarHeader td	{ 
							height: 24px!important; 
							padding: 2px 2px 2px 25px!important; 
							}
						.tundra .dojoDndAvatarItem td { 
							padding: 2px;
							}
						.tundra.dojoDndMove .dojoDndAvatarHeader {
						 	background-color: var(--gasto-danger, #ff0000)!important;
							background-image: url('../images/dnd_icon.png')!important;
							}
						.tundra.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {
							background-color: var(--gasto-primary, #93c30f)!important;
							background-image: url('../images/dnd_icon.png')!important;
							}	
						/***** display no buttons in DnD popup ******/
						.tundra table.dojoDndAvatar .dijitButton {display:none;}						
					/*** /DnD BOX ***/		
/*** ADVANCED TABLE ***/
/* combination of moduletable AND formtable with extended tableclass setting .advanced */
/* f.e. used on mod=waitinglist */
table.advanced {
	/*margin-top:10px;*/
	}
	table.advanced th {
		border-top:1px solid var(--gasto-border, #cccccc);
		border-left:1px solid var(--gasto-border, #cccccc);
		background-color:var(--gasto-row-hover, #ededed);
		color:var(--gasto-muted, #848484);
		}
		table.advanced th:first-child {
			border-left-width:0;
			}
		table.advanced th.center,
		table.advanced td.center{
			text-align:center;
			padding:2px 0;
			}
	table.advanced tbody tr:hover {
		background-color:var(--gasto-row-hover, #f6ffed);
		}
	table.advanced tr.dojoDndItemOver {
		cursor:move;
		}

/***************************** Generic table layout *****************************/			
.table-content .table {
    display:table;
    }
    .table-content .table-row {
        display:table-row;
        }
        .table-content .table-row:hover {
            background-color:var(--gasto-row-hover, #ededed);
            }
            .table-content .table-cell {
                display:table-cell;
                padding:2px;
                vertical-align:middle;
                }
                .table-content .top {
                    vertical-align:top;
                    }
                .table-content .tiny {
                    padding:0 2px;
                    }
                .table-content .spacer {
                    padding:2px 5px 2px 10px;
                    }
/* add-on text below table inside dashboard blok; f.e blockCustomerUsage index.tpl */
.table-footer {
	margin:0 8px 8px;
	}

/* vertical align table inside modules: th vertical alignment ONLY for formtables */
.module table.formtable th,
.module table td {
	vertical-align: middle!important;
	}

/* vertical align td cells in all tables with id="fieldslist" */
table#fieldslist td {
	vertical-align: middle!important;
	}

/* setting tables: move cursor & padding for the items & darker background on hover/focus/moving item */
table .connectedSortable {
	cursor: move;
}
	table .connectedSortable .ui-sortable-handle {
		padding:2px 5px;
		border-radius:3px;
		}
		table .connectedSortable .ui-sortable-handle:hover,
		table .connectedSortable .ui-sortable-handle:focus {
			background-color:rgba(0,0,0,0.3);
			}

/* formtables: all table fields inside a form must have same height so no jumping effect for inline edit fields */
.module form .no_border.formtable th,
.module form .no_border.formtable td.spacer {
	padding:8px 2px;
	}
	.module form .no_border.formtable td.info-spacer {
		padding:8px 2px;
		width:3em;
		white-space:nowrap;
		text-align:center;
		vertical-align:middle;
		}
.module form .no_border.formtable td {
	padding:2px 0 2px 12px;	
	}
	.module form .no_border.formtable td .form-control {
		font-size:12px;
		}

/* detail_footer tables inside detail blocks: must have auto width instead of width = 100%  AND no hover on table rows*/
table[class*="_detail_footer"] {
	width:auto!important;
	}
	table[class*="_detail_footer"] tbody tr:hover {
		background-color:transparent;
		}

/* DnD table rows */
td.DnDHandle {
	cursor:move;
	}
	/* When a DataTable filter/sort/pagination is active the stored order can no
	   longer be determined, so DnD is disabled and the handle is greyed out
	   (see installDndDataTableGuard in admin-ui.js). */
	tbody.dnd-disabled td.DnDHandle {
		cursor:not-allowed;
		opacity:0.3;
		pointer-events:none;
		}
	/* fixed width for DnDHeader (th cell with info icon for the DnD td cell in the same column */
	table#fieldslist th.DnDHeader {
		width:50px!important;
		}
		
/* Avoid changing width inline edit fields in list-tables (#fieldslist) */
table#fieldslist {
	table-layout:fixed;
	}
	/* if table cell contains text (no-inline-edit), wrap this text inside a span with the class 'no-inline-edit'. Result is same alignment as the text inline-edit-display mode */
	table#fieldslist td .no-inline-edit {
		position:relative;
		top:8px;
		}


/*.table-fixed {

}
	.table-fixed tbody{
			height:400px;
			overflow-y:auto;
		}
	.table-fixed thead,.table-fixed tbody{
		display: block;
	}

.table-fixed tr,.table-fixed td{
	word-break: break-all;
}*/

table.default td.connectedSortable {
	vertical-align:top;
}

/* Constrain ires-select height in tables for cross-browser consistency (Firefox renders taller) */
.table .ires-select-selection,
.inline_table .ires-select-selection {
	min-height: 31px;
	padding: 2px 8px;
}