/**
* @stylesheet response-type-grid.css Grid
* @parent ux.response-types
*
* Grid and BQ Choice responses are displayed in a tabular format.
* * The first column contains the option label (either text or image).
* * Subsequent columns contain the category names and the options (selectable via radio button or checkbox).
*
* Layout details:
* * Left and right margins differentiate the table from stem and stimulus text.
* * The table can take up the full width of the content area in which it resides.
* * Option label columns width varies to accommodate content. Option columns are all the same width.
* * Option columns are all the same width: 6.25x the base font size by default, but may be smaller or larger depending on space constraints and length of column headers.
* * Option labels are left-aligned. Category names are centered.
*
* Rows have white and blue `#F5FAFF` zebra stiping.
*
* A __Clear Answer__ button is provided beneath the option table, and is aligned to the left side of the table.
**/

/**
* @styles 0-grid-option-states Option States
* Grid options have the following states. Colors match those of the [response-type-mc.css] response type.
* * _Default_. Options are surrounded by a light gray `#CCCCCC` border. The option label and control are on a light blue `#D6EBFF` background. Hovering over an option in its default state applies a blue `#7FBFFF` border color to indicate that the element is active.
* * _Selected_. The border color of the entire row is changed to a bright blue `#198CFF` to indicate that (at least) one selection per row is required, and the selection state of the radio button/checkbox is toggled.
* * _Disabled_. The option cell, option control, and __Eliminate Choice__ button are dimmed to indicate that they are inactive.
**/

table.grid {
	border-collapse: collapse;
	margin: 0 1em 1.11em 1em;
	table-layout: auto;
}

table.grid tr {
	transition: background 0.2s;
}

table.grid tbody tr:nth-child(odd),
table.grid tbody tr:nth-child(odd) {
	background-color: #d6ebff;
}

table.grid tbody tr:nth-child(odd) th,
table.grid tbody tr:nth-child(odd) th {
	background-color: #f5faff;
}

table.grid td,
table.grid th {
	border: 0.1em solid #ccc;
	padding: 0.4em 0.6em;
	text-align: center;
}

table.grid td {
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s;
	width: 6.25em;
}

table.grid thead th {
	font-weight: bold;
	vertical-align: bottom;
}

table.grid tbody th {
	font-weight: normal;
	text-align: left;
}

table.grid tbody tr:hover th,
table.grid tbody tr:hover td {
	border-color: #7fbfff;
	border-style: double;
}

table.grid tbody tr.grid-row-selected th,
table.grid tbody tr.grid-row-selected td {
	border-color: #198CFF;
	border-style: double;
}

table.grid .grid-content {
	border: 0.1em solid transparent;
	display: inline-block;
}

body.disabled table.grid {
	pointer-events: none;
}

body.disabled table.grid tbody td {
	color: #b2b2b2;
	color: rgba(0, 0, 0, 0.3);
}

body.disabled table.grid tbody tr:nth-child(odd) {
	background: #F3F9FF;
	background: rgba(214, 235, 255, 0.3);
}

.mc-choice-control {
	display: inline-block;
	font-family: "icons";
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	opacity: 1;
	position: relative;
	text-align: center;
	transition: opacity 0.2s;
	vertical-align: middle;
	width: 1em; }
table.grid.grid-multiple-select .mc-choice-control.grid-choice-selected {
	background: #fff;
	border-radius: 0.25em; }

/**
* @styles 1-single-select-grid Single-select Variant
* @iframe ../../demos/response-type-grid/response-type-grid-ss.html 500
**/

table.grid.grid-single-select .mc-choice-control:after {
	content: '\e900'; }
table.grid.grid-single-select .mc-choice-control.grid-choice-selected:after {
	content: '\e901'; }

/**
* @styles 2-multiple-select-grid Multiple-select Variant
* @iframe ../../demos/response-type-grid/response-type-grid-ms.html 500
**/

table.grid.grid-multiple-select .mc-choice-control:after {
	content: '\e902'; }
table.grid.grid-multiple-select .mc-choice-control.grid-choice-selected:after {
	content: '\e903'; }

.response-area-grid .btn {
	margin-left: 1rem;
}