/*========== 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: white;
	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;
}

.chart-btn .fa {
	font-size: 30px;
}
.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);
}

/* 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;	/* default 20 */
	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: black; }
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;
}