tags-input .tags .tag-item {
	color: #fff;
	background: #428bca;
	border: 1px solid #357ebd;
	border-radius: 2px;	
}

.table.top-alligned > tbody > tr > td {
	vertical-align: top;
}

.splash-container-sign {
	margin: 50px auto;
}

/* SQL grid, first load only. Until rows come back DevExtreme has nothing for columnAutoWidth to measure, so every
   column collapses and the header and filter row render as a scrambled strip - clearly visible whenever the query
   is slow. Hide the grid's own chrome for that window; the load panel is a sibling of these elements, so it stays
   visible and a slow query reads as loading rather than broken. The class is removed once the first load has
   returned and the column re-fit has run. */
.p4-grid-loading .dx-datagrid-header-panel,
.p4-grid-loading .dx-datagrid-headers,
.p4-grid-loading .dx-datagrid-rowsview,
.p4-grid-loading .dx-datagrid-pager {
	visibility: hidden;
}

/* Keep the box from collapsing while its content is hidden, so the spinner has somewhere to sit. */
.p4-grid-loading .dx-datagrid {
	min-height: 160px;
}

/* The loading-pane spinner centres itself vertically, which is right for a fixed-height pane and wrong here: a
   grid that already held rows keeps its height, so 50% puts the spinner hundreds of pixels down - often off
   screen. Pin it near the top of the masked area instead, where it is visible whatever height the grid has. */
.p4-grid-loading .be-spinner {
	top: 70px;
	margin-top: 0;
}