/* /common/assets/css/pages/training-instructor-problem-result.css */

#problem_result_layout {
	padding: 20px 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

#problem_result_chart {
	background: var(--main-background-box);
	border-radius: var(--main-border-radius-canvas-box);
	padding: 18px 18px 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/*========== OVERVIEW BUTTON ==========*/

.grid-result-btn-container {
	display: grid;
	grid-column-gap: 2em;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(0, auto);
}

.csf-btn-header {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 80%;
	border-bottom: 1px solid #c0c0c0;
	color: grey;
}

.grid-process-btn-container {
	display: grid;
	grid-column-gap: 2em;
	grid-template-columns: 2fr 2fr 3fr 4fr 1fr;
	grid-auto-rows: minmax(0, auto);
}

.grid-process-btn-container > div:nth-child(6),
.grid-process-btn-container > div:nth-child(7),
.grid-process-btn-container > div:nth-child(8),
.grid-process-btn-container > div:nth-child(9),
.grid-process-btn-container > div:nth-child(10) {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 80%;
	border-top: 1px solid #c0c0c0;
	color: grey;
}

.grid-feedback-buttons {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(60px, auto));
	grid-auto-rows: minmax(0, auto);
	margin: 5px 0;
}

.chart-btn {
	color: #fff;
	padding: 10px 10px 6px 10px;
	font-size: 90%;
	transition: all 0.2s ease-in-out;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
}

.sc-button-deselected:hover,
.csf-button-deselected:hover {
	transform: scale(1.05);
}

.chart-btn-inactive {
	background-color: #d3d3d3;
	border-top: 4px solid #d3d3d3;
	border-bottom: 4px solid #d3d3d3;
}

.sc-button-deselected {
	background-color: var(--main-button-color);
	border-top: 4px solid var(--main-button-color);
	border-bottom: 4px solid var(--main-button-color);
	cursor: pointer;
}

.sc-button-selected {
	background-color: grey;
	border-top: 4px solid grey;
	border-bottom: 4px solid grey;
}

.csf-button-deselected {
	background-color: var(--main-button-color);
	border-top: 4px solid var(--main-button-color);
	border-bottom: 4px solid var(--main-button-color);
	cursor: pointer;
}

.csf-button-selected {
	background-color: grey;
	border-top: 4px solid grey;
	border-bottom: 4px solid grey;
}

.feedback-title {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.chart-info {
	cursor: pointer;
	color: var(--main-button-color);
}

.problem-result-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 8px;
	font-size: 0.85rem;
}

.chart-container {
	position: relative;
	height: 50vh;
	width: 100%;
}

/* Checkboxes */
.inbox {
	margin: 20px auto;
}

.item {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f1f1f1;
}

.item:last-child {
	border-bottom: 0;
}

input:checked + p {
	background: #f9f9f9;
	text-decoration: line-through;
}

.item > p {
	margin: 0;
	padding: 10px;
	transition: background 0.2s;
	flex: 1;
	font-family: 'helvetica neue';
	border-left: 1px solid #d1e2ff;
}

.grid-feedback-symptom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(0, auto);
	grid-gap: 2em;
	grid-template-areas:
		"fs-devi fs-func"
		"fs-tcla fs-tcla"
		"fs-text fs-text"
		"fs-rcla fs-rcla";
}

.fs-devi { grid-area: fs-devi; }
.fs-func { grid-area: fs-func; }
.fs-tcla { grid-area: fs-tcla; }
.fs-text { grid-area: fs-text; }
.fs-rcla { grid-area: fs-rcla; }

.grid-feedback-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(24px, auto) minmax(42px, auto) minmax(42px, auto) minmax(42px, auto);
	grid-gap: 15px;
	padding-bottom: 1em;
}

.grid-feedback-facts > div:nth-child(1),
.grid-feedback-facts > div:nth-child(2) {
	text-align: center;
	text-transform: uppercase;
}

/* Red line through text */
span.inner { color: #000; }
span.outer {
	color: red;
	text-decoration: line-through;
}

/* Red text */
span.incorrect { color: red; }

.capture-legend {
	display: grid;
	grid-column-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
	grid-auto-rows: auto;
	font-size: 90%;
	margin: 1em 0;
}

.capture-legend > div { text-align: center; }

/* Modal footer for metrics 7 - 11 */
.modal-footer-feedback {
	display: grid;
	grid-column-gap: 1em;
	grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
	grid-auto-rows: minmax(0, auto) minmax(0, auto);
	font-size: 90%;
}

.modal-footer-feedback > div:nth-child(1),
.modal-footer-feedback > div:nth-child(2) {
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 80%;
}

.modal-footer-feedback > div:nth-child(3),
.modal-footer-feedback > div:nth-child(4) {
	text-align: center;
}

.grid-causes-feedback {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2em;
	grid-auto-rows: auto;
}

/*========== FEEDBACK MODAL CONTENT ==========*/

.grid-sc5-details {
	display: grid;
	grid-column-gap: 1em;
	grid-template-columns: fit-content(400px) 25px 5px 25px;
	grid-auto-rows: auto;
}

.grid-sc5-details div:nth-child(4n+1) {
	padding: 0 1em;
}

.grid-sc5-details div:nth-child(4n+1)::first-letter {
	text-transform: capitalize;
}

.grid-sc5-details div:nth-child(4n+2) {
	text-align: right;
}

.grid-sc5-details div:nth-child(4n+4) {
	text-align: right;
}

@media (max-width: 900px) {
	.grid-process-btn-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chart-container {
		height: 42vh;
	}
}