/**
* @stylesheet response-type-mc.css Multiple-choice
* @parent ux.response-types
*
* Multiple-choice responses are displayed in a tabular format.
* * The left column contains ordinal alphabetic option labels (A,B,C, etc.).
* * The middle column contains option content.
* * The right column contains an __Eliminate Choice__ button.
*
* Layout details:
* * Left and right margins separate the options from stem and stimulus text.
* * Maximum width is set so that the maximum line length for option text is approximately 50-60 characters.
* * Minimum width is approximately twice the width of the response option label.
*
* A __Clear Answer__ button is provided beneath the option table, and is aligned to the left side of the table.
**/

.response-area.response-area-mc {
    margin-top: -0.56em;
}

 table.mc {
	border-collapse: separate;
	border-spacing: 0 0.56em;
  margin: 0 0 0.56em 1em;
}

table.mc tr {
	transition: color 0.2s;
}

table.mc td {
  background: #fff;
  border-bottom: 0.1em solid #ccc;
	border-top: 0.1em solid #ccc;
	cursor: pointer;
	padding: 0 0.1em 0 0;
	transition: background 0.2s, border-color 0.2s;
}

table.mc tr td:first-of-type {
	background: #d6ebff;
	border-left: 0.1em solid #ccc;
	border-radius: 0.2em 0 0 0.2em;
	padding: 0.56em 0.69em;
	user-select: none;
	white-space: nowrap;
}

table.mc tr td:last-of-type {
	border-radius: 0 0.2em 0.2em 0;
	border-right: 0.1em solid #ccc;
	padding: 0.56em 0.75em;
  position: relative;
	text-align: right;
}

table.mc tr td .mc-choice-content {
	border: 0.1em solid transparent;
	padding: 0.41em 0.53em 0.41em 0.61em;
}

table.mc tr:hover td {
  border-bottom-color: #7fbfff;
	border-top-color: #7fbfff; }
table.mc tr:hover td:first-of-type {
	border-left-color: #7fbfff; }
table.mc tr:hover td:last-of-type {
	border-right-color: #7fbfff; }

table.mc tr.mc-choice-selected td {
  border-bottom-color: #198CFF;
	border-top-color: #198CFF; }
table.mc tr.mc-choice-selected td:first-of-type {
	border-left-color: #198CFF; }
table.mc tr.mc-choice-selected td:last-of-type {
	border-right-color: #198CFF; }

.mc-choice-label {
	display: inline-block;
  font-weight: bold;
	height: 1em;
  line-height: 0.95em;
  text-align: center;
  vertical-align: middle;
	width: 0.69em;
}

.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; }
table.mc.mc-multiple-select tr.mc-choice-selected .mc-choice-control {
	background: #fff;
	border-radius: 0.25em; }

table.mc.mc-single-select .mc-choice-control:after {
	content: '\e900'; }
table.mc.mc-single-select tr.mc-choice-selected .mc-choice-control:after {
	content: '\e901'; }
table.mc.mc-multiple-select .mc-choice-control:after {
	content: '\e902'; }
table.mc.mc-multiple-select tr.mc-choice-selected .mc-choice-control:after {
	content: '\e903'; }

button.mc-eliminate-choice {
	background: #fff;
	border: 0.12em solid #949494;
	border-radius: 50%;
	color: #767676;
	cursor: pointer;
	display: inline-block;
	font-size: 0.36em;
	height: 3em;
	margin: 0;
	padding: 0.2em 0 0 0.1em;
	position: relative;
	text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s;
	vertical-align: middle;
	width: 3em;
}

button.mc-eliminate-choice:hover {
  border-color: #444;
	color: #444;
}

tr.mc-choice-disabled button.mc-eliminate-choice {
	background-color: #eee;
	box-shadow: none;
}

button.mc-eliminate-choice:after {
	content: '\ea0b';
	font-family: "icons";
	font-size: 1.3em;
}

tr.mc-choice-eliminated button.mc-eliminate-choice:after {
	content: '\ea0a';
}

table.mc tr.mc-choice-eliminated {
  color: #b2b2b2;
	color: rgba(0, 0, 0, 0.3);
}

table.mc tr.mc-choice-eliminated:hover td {
  border-bottom-color: #ccc;
	border-top-color: #ccc; }
table.mc tr.mc-choice-eliminated:hover td:first-of-type {
	border-left-color: #ccc; }
table.mc tr.mc-choice-eliminated:hover td:last-of-type {
	border-right-color: #ccc; }

table.mc tr.mc-choice-eliminated td:first-of-type {
  background: #F3F9FF;
	background: rgba(214, 235, 255, 0.3);
}

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

body.disabled table.mc tr td:first-of-type {
  background: #F3F9FF;
	background: rgba(214, 235, 255, 0.3);
  color: #b2b2b2;
	color: rgba(0, 0, 0, 0.3);
}

body.disabled button.mc-eliminate-choice {
	opacity: 0.3;
}

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

/**
* @styles 0-mc-option-states Option States
* Multiple-choice options have the following states. Colors match those of the [response-type-grid.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 is changed to a bright blue `#198CFF`, and the selection state of the radio button/checkbox is toggled.
* * _Eliminated_. Invoked by the __Eliminate Choice__ button. Option content is dimmed to reduce its salience.
* * _Disabled_. The option label, option control, and __Eliminate Choice__ button are dimmed to indicate that they are inactive.
**/

/**
* @styles 1-single-select-mc Single-select Variant
* In a single-select multiple-choice response, the user is only able to select one option. Selecting another option will deselect the previously selected option.
* @iframe ../../demos/response-type-mc/response-type-mc-ss.html 475
**/

/**
* @styles 2-multiple-select-mc Multiple-select Variant
* In a multiple-select multiple-choice response, the test taker may select as many or as few options as desired.
* @iframe ../../demos/response-type-mc/response-type-mc-ms.html 475
**/