/* Kepner-Tregoe CSS */
/* Version 2.1.15 */

/* ========== FORM CLARIFY ========== */
.grid-clarify {
	width: 100%;
	display: grid;
	grid-template-columns: 8fr 2fr;
	grid-gap: 15px;
}
.grid-clarify > div:nth-child(n+2) { padding-top: 18px; }
.clarify-priority-inner {
	text-align: center;
    min-height: 18px;
	margin-top: 8px;
}

#add_concern_btn { margin-top: 2em;}

/* Edit concern modal form */
.grid-concern-edit {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, minmax(24px, auto));
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
.concern-label {
	text-transform: capitalize;
}

/* ========== FORM SPECIFICATION ========== */

.pa-spec-container {
	display: grid;
	grid-template-columns: auto repeat(var(--columns), minmax(100px, 1fr));
	grid-template-rows: repeat(5, auto);
	gap: 1em;
}
		
.merged-cell2 {
	grid-column: span 2; /* Span 2 columns */
	grid-row: span 1;    /* Span 1 row */
}

.merged-cell3 {
	grid-column: span 3; /* Span 2 columns */
	grid-row: span 1;    /* Span 1 row */
}

.merged-cell5 {
	grid-column: span 5; /* Span 2 columns */
	grid-row: span 1;    /* Span 1 row */
}

.merged-cells {
	grid-column: span var(--cells); /* Span 2 columns */
	grid-row: span 1;    /* Span 1 row */
}

.pa-spec-item {
	border: 1px solid #ccc;
	padding: 8px;
	box-sizing: border-box;
}

.pa-spec-column-header {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 80%;
	text-align: center;
}
		
.pa-spec-row-header {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 80%;
}
		
.pa-causes-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 50px 50px;
	grid-auto-rows: auto;
	gap: 1em;
}
		
.pa-label {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 80%;
}
		
.pa-label-underlined {
	border-bottom: 1px solid #000;
}

/* Edit Specification pair modal content */
.grid-spec-modal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(24px, auto) minmax(42px, auto);
	grid-column-gap: 40px;
	grid-row-gap: 5px;
	grid-template-areas:
		"fact1-explain fact2-explain"
		"fact1-content fact2-content"
}
.spec1-question {
	grid-area: fact1-explain;
	font-weight: 300;
}
.spec2-question {
	grid-area: fact2-explain;
	font-weight: 300;
}
.spec1-input {
	grid-area: fact1-content;
	margin-top: 20px;
}
.spec2-input {
	grid-area: fact2-content;
	margin-top: 20px;
}


/* Edit Specification cause test content */
.grid-test-cause-modal {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(24px, auto) minmax(42px, auto);
	grid-row-gap: 5px;
}
.test-cause-question {
	font-weight: 300;
}
.test-cause-input {
	margin-top: 20px;
}

textarea.auto-resize { resize: none;}