#surveys-footer {
	border-top: 6px solid #f1f1f1;
	display: flex;
	width: 100%;
}

#surveys-footer::before {
	content: "Copyright 2023 The Center for Curriculum Redesign";
	margin: auto;
	margin-top: 2em;
	margin-bottom: 1em;
}

#surveys {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	background: white;
	padding: 0;
	overflow-y: auto;
	user-select: none;	
}

#surveys h2 ~ p {
	font-style: italic;
}

#surveys h3 {
	font-size: 1.25em;
	display: inline-block;
	padding: 0.125em 2em 0.125em 0.5em;
	background: linear-gradient(47.5deg,#cecece,transparent 60%);
}

#surveys main {
	display: flex;
	flex-direction: column;
	padding: 0 2em 15em 2em;
	flex-basis: 0;
	flex-grow: 1;
	border-left: 6px solid #f1f1f1;
	max-width: 100%;
} 

#surveys-nav {
	display: flex;
}

#surveys-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	grid-gap: 1em;
	padding: 0 2em;
}

#surveys-nav li {
	width: 18em;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	grid-gap: 0.25em;
	padding: 1em;
	border: 2px solid #e0e0e0;
	background: whitesmoke;
}

#surveys-nav a:link,
#surveys-nav a:visited,
#surveys-nav a:hover,
#surveys-nav a:active {
	text-decoration: none;
	color: white;
}

#surveys-nav a:hover, #surveys input[type=submit]:hover {
	text-decoration: underline;
}

#surveys-nav a, #surveys input[type=submit] {
	padding: 0.5em 0.75em;
	background: black;
	border-radius: 8px;
	display: flex;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1.25em;
}

#surveys input[type=submit] {
	color: white;
	align-self: flex-start;
	cursor: pointer;
	border: none;
}

#surveys-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.5em;
    width: 100%;
    padding: 1em 2em;
    border-bottom: 6px solid #f1f1f1;
}

#surveys-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	grid-gap: 0.5em;
}

#surveys-breadcrumbs li:last-child {
	font-weight: bold;
}

#surveys-breadcrumbs ol {
	display: flex;
	list-style-type: none;
	padding: 0;
	grid-gap: 0.5em;
	margin: 0;
}

#surveys-breadcrumbs li::after {
	content: "\00203A";
}

#surveys-breadcrumbs li:last-of-type::after {
	content: "";
}

#surveys-breadcrumbs a:link,
#surveys-breadcrumbs a:visited,
#surveys-breadcrumbs a:active,
#surveys-breadcrumbs a:hover {
	color: black;
}

#surveys section {
	display: flex;
	flex-direction: column;
}

.survey-question {
	margin: 2em 0;
	grid-gap: 0.5em;
}

.survey-name {
	font-weight: bold;
	text-decoration: underline;
	height: 1.5em;
}

.survey-description {
	font-size: 1.25em;
}

.questions-count {
	font-size: 1.25em;
	font-weight: bold;
	display: flex;
	grid-gap: 5px;
	align-items: baseline;
	margin-top: auto;
}

.questions-count::after {
	content: "questions";
	font-variant: small-caps;
}

#surveys .survey-question h3 {
	background: none;
	padding: 0;
}

#surveys .radio-blocks {
	grid-gap: 0;
}

#surveys .for-radio-block {
	border-width: 2px;
	border-radius: 0;
	padding: 3em 3em;
	min-width: 14em;
	justify-content: center;
	margin: 0;
}

#surveys #interventions-list {
	padding: 1em;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	list-style-type: none;
	max-width: 816px;
}

#surveys #my-survey-responses ol {
	display: flex;
	flex-direction: column;
	padding: 0;
	list-style-type: none;
}

#interventions-list li.fail {
	order: -2;
}

#interventions-list li.borderline {
	order: -1;
}

#surveys details {
	list-style-type: none;
}

#surveys summary {
	font-size: 1.25em;
	font-weight: bold;
	cursor: pointer;
	padding: 0.125em 0;
	border-bottom: 1px solid #e0e0e0;
}

#surveys li:not(.fail) summary {
	color: green;
}

#surveys summary::after {
	display: none;
}

#surveys summary::marker {
	margin-left: 0.25em;
}

#surveys #interventions-list .pass {
	display: none;
}

#surveys #interventions-list li:not(.fail) .pass {
	display: inline;
}

#surveys .for-radio-block.checked {
	border-color: var(--active-green);
}

#surveys #interventions-list h4 {
	display: inline;
	font-size: unset;
}

#surveys #interventions-list details p {
	font-size: 1.125em;
}

#surveys #interventions-list details p:not(:first-of-type) {
	line-height: 1.75;
	letter-spacing: .2px;
}

#surveys #interventions-list details p:first-of-type {
	font-weight: bold;
}

@media only screen and (max-width: 1271px) {
	#outline-nav {
		position: relative;	
		width: 100%;
	}
	
	#interventions-list {
		max-width: 100%;	
	}
	
	#surveys main {
		border-left: none;	
	}
}

@media only screen and (max-width: 1000px) {
	.radio-blocks {
		flex-direction: column;	
	}
}