.grid_view
{
	display: block;
}

.grid_view.grid_view_header
{
	display: flex;
	flex-direction: column
}

.grid_selector_header
{
	max-width: 2rem;
}

.grid_header
{
	flex: 0 0 2.4rem; display: flex; flex-direction: row; align-items: center
}

.grid_header>*
{
	flex: 0 0 content;
	vertical-align: middle;
	margin-right: 1em
}

.grid_container
{
	flex: 1 1 content;
	display: grid; align-content: start;
	grid-gap: 1px;
	background: #ccc;
	overflow: auto; white-space: nowrap;
	box-sizing: border-box;
	max-width: 100%; max-height: 100%;
	min-height: 12rem;
}

.grid_column_update
{
	display: inline-block; vertical-align: middle; margin-right: 1em;
	border: 1px solid #ccc;
	padding: 0.1em 0.8em
}

.grid_column_header.grid_column_anchor
{
	position: sticky; top: 0; left: 0;
	z-index: 3;
	
}

.grid_column_header
{
	position: sticky; top: 0;
	font-weight: bold;
	background: #eee;
	padding: 0.3em 0.8em;
	z-index: 2;
	outline: 1px solid #ccc;
	cursor: pointer;
	min-height: 1em;
}

.grid_column_header.grid_column_updated
{
	background: #fee;
}

.grid_column_menu
{
	display: none;
	position: absolute; top: calc(100% - 1px); left: 3px; min-width: calc(100% - 7px);
	font-weight: normal;
	background: #eee;
	border: 1px solid #999;
	z-index: 15;
}

.grid_column_menu > hr
{
	color: #999
}

.grid_column_header:hover > .grid_column_menu
{
	display: block;
}

.grid_column_menuitem
{
	background: #eee;
	padding: 0.3em 1.5em;
}

.grid_column_menuitem:hover
{
	background: #ddd;
}

.grid_row_header
{
	position: sticky; left: 0;
	background: #eee;
	padding: 0.2em 0.8em;
	z-index: 1;
	outline: 1px solid #ccc;
}

.grid_row_header>b:after
{
	content: "☐"
}

.grid_row_header.grid_row_selected
{
	background: #ddd;
}

.grid_column_anchor>b
{
	height: 1rem;
}

.grid_column_anchor>b:after, .grid_row_header.grid_row_selected>b:after
{
	content: "☑"
}

.grid_cell
{
	background: #fff;
	padding: 0.1em 0.8em;
	cursor: pointer;
}

.grid_cell.grid_cell_selected
{
	background: #eee;
}

.grid_cell.grid_cell_updated
{
	background: #fee;
}

.grid_cell_updated_value+.grid_cell_orig_value
{
	display: none
}

.grid_cell.grid_cell_updated:hover>.grid_cell_updated_value+.grid_cell_orig_value
{
	display: inline
}

.grid_cell.grid_cell_updated:hover>.grid_cell_updated_value
{
	display: none
}

.grid_cell:hover
{
	background: #ddd;
}