/**** Jeffco Theme ****/

:root {
	--jeffco-purple: #673785;
	--jeffco-purple-gradient: #886D99;
	--jeffco-magenta: #971B72;
	--jeffco-orange: #E57A3C;
	--jeffco-yellow: #FBB040;
	--jeffco-green: #6E953E;
	--jeffco-teal: #22A783;
	--jeffco-blue: #3688C8;
	--jeffco-border-grey: #B1B4B4;
	--jeffco-grey: #6C7070;
	--jeffco-mid-grey: #C4C4C4;
	--jeffco-dark-grey: #242424;
	--jeffco-light-grey: #F2F3F3;
	--jeffco-light-blue: hsl(206, 59%, 66%);
	--jeffco-label-orange: #F7D7AD;
}



/* Main Grid */
body {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas: "header" "body" "error" "footer";
	width: 100vw;
	height: 100vh;
}

main {
	color: var(--jeffco-grey);
}

.login-info {
	color: #3688C8;
}

.jedi-form-error {
	color: #dc3545 !important;
}

/* Header */

.jedi-header {
	display: grid;
	grid-template-rows: auto 50%;
	grid-template-columns: 20% auto 5%;
	grid-template-areas:
		"jeffco-header-logo jedi-nav ."
		". . .";
	border-top: 12px solid var(--jeffco-orange);
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
	/*border-bottom: 5px solid #6a6a6a;*/
	height: 77px;
}

.jeffco-header-logo {
	display: inline;
	grid-area: jeffco-header-logo;
	padding: 10px 10px 22px 10px;
	justify-self: start;
	align-self: start;
	min-height: 77px;
	max-height: 120px;
	height: 100%;
}

.jedi-nav {
	grid-area: jedi-nav;
	justify-self: end;
	align-self: end;
	margin-bottom: 22px;
}

.jedi-nav-link {
	display: inline;
	margin-right: 15px;
}

	.jedi-nav-link a {
		color: var(--jeffco-grey);
	}

		.jedi-nav-link a:hover {
			color: var(--jeffco-orange);
			text-decoration: underline;
		}

a:not(.btn-secondary, .jedi-button) {
	color: var(--jeffco-blue);
	text-decoration: underline;
}

	a:not(.btn-secondary, .jedi-button):hover {
		font-weight: 600;
	}

/*** Footer ***/
.jedi-footer {
	grid-area: footer;
	text-align: center;
	border-top: 2px solid var(--jeffco-orange);
	/*min-height: 50px;*/
}

.jeffco-footer-logo {
	max-height: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 100%;
}

/*** Questionnaire page ***/
.jedi-q-page {
	display: grid;
	grid-area: body;
	grid-gap: 10px;
	height: 100%;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: auto 10fr .5fr;
	grid-template-areas: ". title ." ". questions ." ". . .";
	background-color: var(--jeffco-blue);
	/*background-image: linear-gradient(var(--jeffco-light-grey), var(--jeffco-blue));*/
}

.jedi-q-container {
	display: grid;
	grid-area: questions;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-areas:
		". form .";
}

.jedi-q-form {
	grid-area: form;
	display: grid;
	grid-template-columns: .5fr 5fr .5fr;
	grid-template-areas:
		". formGroup ."
		". buttons .";
}

.jedi-q-form-group {
	grid-area: formGroup;
}

.jedi-q-buttons {
	grid-area: buttons;
	position: relative;
	justify-self: center;
	margin-bottom: 15px;
}

.jedi-question:nth-child(n+2) {
	border-top: 2px solid var(--jeffco-grey);
}

.form-check {
	margin-top: 20px;
	margin-bottom: 20px;
}


/*** Questionnaire Landing page ***/

.jedi-q-landing-page {
	/*background-color: var(--jeffco-blue);*/
	display: grid;
	grid-area: body;
	grid-template-rows: .5fr 3fr .5fr;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-areas:
		". . ."
		". landing ."
		". . .";
}

.jedi-q-landing {
	display: grid;
	grid-area: landing;
	grid-template-rows: .5fr auto auto 1fr 1fr .5fr;
	grid-template-columns: .5fr auto .5fr;
	grid-template-areas:
		". . ."
		". title ."
		". text ."
		". . ."
		". button ."
		". . .";
	width: 80vw;
	align-content: center;
}

.jedi-q-title {
	grid-area: title;
	text-align: center;
	border-color: var(--jeffco-purple);
	margin-top: 10px;
}

	.jedi-q-title:empty {
		display: none;
	}

.jedi-q-text {
	grid-area: text;
	text-align: center;
	/*max-height: 20vh;*/
}

.jedi-q-button {
	grid-area: button;
	position: relative;
	justify-self: center;
}


/*** Log in page ***/
.jedi-log-in {
	/*grid-row: 2 / 3;*/
	display: grid;
	place-items: center;
	width: 100vw;
	height: 100vh;
	grid-template-areas: ". . ." ". card ." ". . ." ". warn ." ". jedi-user-error ." "footnote-break footnote-break footnote-break" ". footnote .";
	grid-template-rows: 3fr 5fr 3fr 3fr 3fr .1fr auto;
	grid-template-columns: 1fr 5fr 1fr;
}

.jedi-card {
	grid-area: card;
	padding: 10px;
	max-width: 350px;
	/*max-height: 400px;*/
}

.warning-text {
	grid-area: warn;
	padding: 35px 0px;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 35px;
}

.browser-warning {
}

#login-logo {
	max-height: 100%;
	max-width: 100%;
}

.footnote-break {
	width: 100%;
	grid-area: footnote-break;
	border-top: 2px solid var(--jeffco-blue);
}

.jedi-footnote {
	grid-area: footnote;
}


.jedi-one-column {
	display: grid;
	grid-gap: 25px;
	grid-auto-rows: minmax(.5fr, 4fr);
	grid-template-columns: 1fr;
}

.jedi-two-column {
	display: grid;
	grid-gap: 25px;
	grid-auto-rows: minmax(.5fr, 4fr);
	grid-template-columns: repeat(2, 1fr);
}

.jedi-two-column-plus-back {
	display: grid;
	grid-gap: 25px;
	grid-auto-rows: minmax(.5fr, 4fr);
	grid-template-columns: 2fr 2fr 1fr;
}


.jedi-section-label1 {
	grid-area: span 1/span 2;
	display: grid;
	grid-gap: 25px;
	grid-template-columns: 1fr 9fr;
	background-color: var(--jeffco-mid-grey);
	border: 3px solid var(--jeffco-purple);
	color: var(--jeffco-purple);
	padding-top: 8px;
	margin-top: 75px;
}

.jedi-section-label2 {
	grid-area: span 1/span 2;
	display: grid;
	grid-gap: 25px;
	grid-template-columns: 1fr 9fr;
	background-color: var(--jeffco-purple);
	color: #cccccc;
	padding-top: 8px;
}

.jedi-section-label-icon {
	font-size: 38px;
	text-align: center;
}

.jedi-section-header {
	grid-area: span 1/span 2;
}

.jedi-assessment-list {
	grid-area: span 1/span 2;
}

.jedi-title-text {
	align-self: center;
}

.jedi-active-goal-with-q {
	grid-area: span 2/span 1;
}

.jedi-active-goal-without-q {
	grid-area: span 1/span 2;
}

.jedi-text-left {
	text-align: left;
}

.jedi-pad-left {
	padding-left: 8px;
}



.jedi-text-purple {
	color: var(--jeffco-purple);
}

.grey {
	color: var(--jeffco-grey);
}

.orange {
	color: orange;
}

.limegreen {
	color: limegreen;
}

/* Color schemes */
.jedi-orange-border {
	border: solid 1px var(--jeffco-orange);
}

.jedi-orange-text {
	color: var(--jeffco-orange);
}

.jedi-orange {
	background-color: var(--jeffco-orange);
	color: white !important;
}

.jedi-link:hover {
	color: var(--jeffco-dark-grey);
}

.jedi-orange .jedi-link {
	color: #ddd;
	font-weight: 700;
}

.jedi-blue-text {
	color: var(--jeffco-blue);
}

.jedi-blue-border {
	border: solid 1px var(--jeffco-blue);
}

.jedi-blue {
	background-color: var(--jeffco-blue);
	color: white;
}

	.jedi-blue .jedi-link {
		color: #ddd;
		font-weight: 700;
	}

.jedi-green {
	background-color: var(--jeffco-green);
	color: white;
}

	.jedi-green .jedi-link {
		color: #ddd;
		font-weight: 700;
	}

.jedi-yellow {
	background-color: var(--jeffco-yellow);
	color: white;
}

.jedi-teal {
	background-color: var(--jeffco-teal);
	color: white;
}

	.jedi-teal .jedi-link {
		color: #ddd;
		font-weight: 700;
	}

.jedi-purple-text {
	color: var(--jeffco-purple);
}

.jedi-purple-border {
	border: solid 1px var(--jeffco-purple);
}

.jedi-panel-single-column.jedi-purple-border {
	padding-top: 5%;
}

.jedi-purple {
	background-color: var(--jeffco-purple);
	color: white;
}

	.jedi-purple .jedi-link {
		color: #ddd !important;
		font-weight: 700;
	}

.jedi-button {
	font-weight: 600;
	font-size: .875em;
	border: solid 1px var(--jeffco-dark-grey);
	border-radius: 4px;
}

	.jedi-button:hover {
		background-color: var(--jeffco-grey);
		color: white;
	}


.jedi-button-25w {
	margin: 0 2% 2% 0px !important;
	width: auto;
	border: 0;
}

.jedi-button-40w {
	margin: 0 2% 2% 0px !important;
	width: auto;
	border: 0;
}


.jedi-magenta {
	background-color: var(--jeffco-magenta);
	color: white;
}

	.jedi-magenta .jedi-link {
		color: #ddd;
		font-weight: 700;
	}


.jedi-mid-grey {
	background-color: var(--jeffco-mid-grey);
	color: black;
}
.jedi-grey {
	background-color: var(--jeffco-grey);
	color: black;
}

.jedi-overlay {
	position: fixed; /* Sit on top of the page content */
	/*display: none;*/ /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7); /* Black background with opacity */
	z-index: 100; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
	display: flex;
	align-items: center;
	justify-content: center;
}

#jedi-overlay-text {
	margin: 0;
	color: white;
}

.jedi-q-name {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	color: white;
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
}


/*** Tables ***/

thead {
	background-color: var(--jeffco-blue);
}

	thead th {
		color: white;
	}

table-bordered {
	border-color: var(--jeffco-grey)
}

.table-button {
	padding: 0px;
}

	.table-button:hover {
		color: var(--jeffco-orange);
	}

/*** Cards ***/

.card {
	border-color: var(--jeffco-light-grey);
	border-width: thick;
}

/*** Primary Button ***/

.btn-primary {
	background-color: var(--jeffco-orange);
	border-color: var(--jeffco-orange);
}

	.btn-primary:disabled {
		background-color: var(--jeffco-orange);
		border-color: var(--jeffco-orange);
	}

	.btn-primary:hover, .btn-primary:active {
		background-color: #e0661f;
		border-color: #ca5b1c;
	}

	.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
		background-color: #ca5b1c;
		border-color: #b45118;
	}

		.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(229, 122, 60,.5);
		}


/*** Secondary Button ***/

.btn-secondary {
	background-color: var(--jeffco-light-grey);
	border-color: var(--jeffco-light-grey);
	color: black;
	font-weight: 700;
}

	.btn-secondary:hover, .btn-secondary:active {
		background-color: var(--jeffco-grey);
		border-color: #737373;
	}

	.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
		background-color: var(--jeffco-light-grey);
		border-color: #bfbfbf;
	}

		.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {
			box-shadow: 0 0 0 0.2rem rgba(229, 122, 60,.5);
		}



.jedi-resource-button {
	margin-bottom: 5px !important;
	padding: 10px;
	display: inline-block;
	text-align: center;
	border-radius: 4px;
	width: 100%;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}



jedi-radio-btn {
	background-color: var(--jeffco-light-grey);
}

.jedi-radio-btn:hover {
	background-color: #e0661f;
	border-color: #ca5b1c;
}

.jedi-radio-btn:active {
	border-color: #ca5b1c;
}

.jedi-radio-btn:active {
	border-color: #ca5b1c;
}



/*** Inputs ***/
.form-control:focus {
	box-shadow: 0 0 0 0.2rem rgba(54, 136, 200,.25);
}

/*** Icons ***/

.fa-circle {
	font-size: x-large;
}

.fa-check-circle {
	font-size: x-large;
}

h3 {
	color: var(--jeffco-purple);
}

/*** Widgets ***/
.jedi-widget {
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-template-columns: .2fr 2fr .2fr 4fr .2fr;
	grid-template-areas: ". header header header ." ". body body body ." ". footer footer footer .";
	border: solid 2px black;
	border-radius: 5px;
}

.jedi-widget-header {
	grid-area: header;
	align-self: start;
	/*color: black;*/
	display: grid;
	grid-template-columns: 4fr;
	grid-template-areas: "header-text";
	grid-gap: 10px;
	clear: both;
	padding-top: 7px;
}

.jedi-widget-header-double {
	grid-area: header;
	align-self: start;
	/*color: black;*/
	display: grid;
	grid-template-columns: 4fr 4fr;
	grid-template-areas: "header-text header-2-text";
	grid-gap: 25px;
	clear: both;
	padding-top: 7px;
}


.jedi-widget-body {
	grid-area: body;
	clear: both;
}
/*
.jedi-body-align-to-header {
	display: grid;
	grid-template-columns: .5fr 7fr .5fr;
	grid-gap: 10px;
}*/

.jedi-col1 {
	grid-column: 1;
}

.jedi-col2 {
	grid-column: 2;
}

.jedi-col3 {
	grid-column: 3;
}

.jedi-col4 {
	grid-column: 4;
}

.jedi-widget-footer {
	grid-area: footer;
	color: black;
	padding: 10px 0px;
	clear: both;
}

.jedi-widget-icon {
	grid-area: icon;
	font-size: 24px;
	text-align: center;
	color: #fff;
	float: left;
	margin-right: 15px;
}

/*.jedi-widget-header-text {
	grid-area: body;
}
*/
.jedi-widget-header-text {
	grid-area: header-text;
}

.jedi-widget-header-2-text {
	grid-area: header-2-text;
}

	.jedi-widget-header-text > h3, .jedi-widget-header-2-text > h3 {
		font-weight: 700;
		color: #fff;
		margin-top: 0px;
	}

.jedi-widget-header-button {
	float: left;
	margin-right: 20px;
}

.jedi-widget-header-p {
	clear: both;
}

.jedi-widget-info-icon {
	grid-area: info-icon;
	padding: 5px;
}

.jedi-info-button {
	border: 2px solid #333;
	border-radius: 5px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	text-shadow: 0 2px 2px rgba(200, 200, 200, 0.5);
	text-align: center;
	/*display: block;*/
	/*Step 2: Basic Button Styles*/
	/*height: 100px;
	width: 300px;
	background: #34696f;
	border: 2px solid rgba(33, 68, 72, 0.59);*/
	/*Step 3: Text Styles*/
	/*color: rgba(0, 0, 0, 0.55);
	font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
	/*Step 4: Fancy CSS3 Styles*/
	/*background: -webkit-linear-gradient(top, var(--jeffco-purple-gradient), var(--jeffco-purple));
	background: -moz-linear-gradient(top, var(--jeffco-purple-gradient), var(--jeffco-purple));
	background: -o-linear-gradient(top, var(--jeffco-purple-gradient), var(--jeffco-purple));
	background: -ms-linear-gradient(top, var(--jeffco-purple-gradient), var(--jeffco-purple));
	background: linear-gradient(top, var(--jeffco-purple-gradient), var(--jeffco-purple));*/
	/*-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0 8px 0 #1b383b;
	-moz-box-shadow: 0 8px 0 #1b383b;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);*/
}

	/*Step 5: Hover Styles*/
	.jedi-info-button:hover {
		background: #3d7a80;
		background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
		background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
		background: -o-linear-gradient(top, #3d7a80, #2f5f63);
		background: linear-gradient(top, #3d7a80, #2f5f63);
	}





.jedi-info-p {
	color: inherit;
	background-color: inherit;
	border: 1px solid #333;
	border-radius: 5px;
	padding: 10px;
}





/*** Panels ***/
.jedi-panel {
	display: grid;
	grid-template-rows: min-content minmax(10px, auto) 50px;
	grid-template-columns: 1fr;
	grid-gap: 0px;
	grid-template-areas: "header" "body" "footer";
	border-radius: 5px;
	border: solid 1px black;
}

.jedi-panel-75h-footer {
	display: grid;
	grid-template-rows: min-content minmax(10px, auto) 75px;
	grid-template-columns: 1fr;
	grid-gap: 0px;
	grid-template-areas: "header" "body" "footer";
	border-radius: 5px;
	border: solid 1px black;
}

.jedi-panel-header {
	display: grid;
	grid-area: header;
	grid-template-areas: "header-icon header-text";
	grid-template-columns: 1fr 10fr;
	border-bottom: solid 1px black;
	padding: 10px;
	grid-gap: 20px;
	align-self:start;
}

.jedi-panel-header-no-icon {
	display: grid;
	grid-area: header;
	grid-template-areas: "header-text";
	grid-template-columns: 1fr;
	border-bottom: solid 1px black;
	padding: 10px;
	align-self: start;
}

.jedi-panel-header-double {
	display: grid;
	grid-area: header;
	/*grid-template-areas: "header-text header-text-2";*/
	grid-template-columns: 8fr 8fr;
	grid-gap: 20px;
	border-bottom: solid 1px black;
	padding: 10px;
	align-self: start;
}


.jedi-panel-header-icon {
	grid-area: header-icon;
	font-weight: bold;
	position: relative;
	top: 45%;
	left: 50%;
}

.jedi-panel-header-info-btn {
	grid-area: header-icon;
}

.jedi-panel-header-text {
	grid-area: header-text;
	font-weight: bold;
	font-size: large;
}

.jedi-panel-body {
	grid-area: body;
	padding: 10px;
	padding-top: 20px;
	color: var(--jeffco-dark-grey);
	display: grid;
	text-align: start;
}

.jedi-panel-body-2col {
	grid-area: body;
	display: grid;
	grid-template-columns: 8fr 8fr;
	grid-gap: 20px;
	padding: 10px;
	padding-top: 20px;
	color: var(--jeffco-dark-grey);
}

.jedi-panel-body-4col {
	grid-area: body;
	display: grid;
	grid-template-columns: 4fr 4fr 4fr 4fr;
	grid-gap: 20px;
	padding: 10px;
	padding-top: 20px;
	color: var(--jeffco-dark-grey);
}

.jedi-panel-body-3col {
	grid-area: body;
	display: grid;
	grid-template-columns: 3fr 3fr 4fr;
	grid-gap: 20px;
	padding: 20px 20px 10px 20px;
	padding-top: 20px;
	color: var(--jeffco-dark-grey);
}

.jedi-panel-single-column {
	display: grid;
	grid-template-rows: min-content;
	grid-template-columns: 1fr;
	grid-gap: 0px;
	grid-template-areas: "header" "body" "footer";
	border-radius: 5px;
	padding: 7%;
	margin-top: 5px;
}

.jedi-panel-list-body {
	grid-area: body;
	display: grid;
	grid-template-columns: 1fr 10fr;
	grid-gap: 20px;
	padding: 20px 10px;
	color: var(--jeffco-dark-grey);
}

.jedi-panel-list-body-1col {
	grid-area: body;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	padding: 20px 40px;
	color: var(--jeffco-dark-grey);
}

.jedi-back-button {
	position: relative;
	width: 80px;
	background: var(--jeffco-purple);
	height: 40px;
	line-height: 40px;
	margin-bottom: 30px;
	text-align: center;
	color: #fff !important;
	font-weight: 700;
	border-radius: 4px;
}

	.jedi-back-button::before {
		content: "";
		position: absolute;
		left: -25px;
		top: -10px;
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-right: 30px solid var(--jeffco-purple);
		border-radius: 5px;
	}

	.jedi-back-button:hover {
		background: var(--jeffco-mid-grey);
		color: var(--jeffco-dark-grey) !important;
	}

		.jedi-back-button:hover::before {
			border-right: 30px solid var(--jeffco-mid-grey);
		}


.jedi-panel-footer {
	grid-area: footer;
	border-top: solid 1px black;
	padding: 10px;
}

.jedi-panel-footer-no-top-border {
	grid-area: footer;
	padding: 10px;
}

/*** Tabs ***/
.tab-row {
	text-align: left;
	list-style: none;
	margin: 15px 0 0px;
	padding: 0;
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 15px;
	line-height: 24px;
	height: 26px;
	overflow: hidden;
	font-size: 12px;
	font-family: verdana;
	position: relative;
}

	.tab-row li {
		border: 1px solid #AAA;
		background: #D1D1D1;
		background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		display: inline-block;
		position: relative;
		z-index: 0;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
		text-shadow: 0 1px #FFF;
		margin: 0 -5px;
		padding: 0 20px;
	}

	.tab-row a {
		color: var(--jeffco-magenta);
		font-weight: bold;
		text-decoration: none;
	}

	.tab-row > li.selected {
		background: #ddd;
		color: #333;
		z-index: 2;
		border-bottom: 2px solid #ddd;
	}

	.tab-row:before {
		position: absolute;
		content: " ";
		width: 100%;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #AAA;
		z-index: 1;
	}

	.tab-row li:before,
	.tab-row li:after {
		border: 1px solid #AAA;
		position: absolute;
		bottom: -1px;
		width: 5px;
		height: 5px;
		content: " ";
	}

	.tab-row li:before {
		left: -6px;
		border-bottom-right-radius: 6px;
		border-width: 0 1px 1px 0;
		box-shadow: 2px 2px 0 #D1D1D1;
	}

	.tab-row li:after {
		right: -6px;
		border-bottom-left-radius: 6px;
		border-width: 0 0 1px 1px;
		box-shadow: -2px 2px 0 #D1D1D1;
	}

	.tab-row li.selected:before {
		box-shadow: 2px 2px 0 #ddd;
	}

	.tab-row li.selected:after {
		box-shadow: -2px 2px 0 #ddd;
	}

.tab-content {
	background-color: #dddddd;
	color: #333;
	padding-top: 10px;
	border-bottom: 1px solid #AAA;
	border-left: 1px solid #AAA;
	border-right: 1px solid #AAA;
	border-radius: 3px;
}

.tab-pane {
	padding: 0px 5px;
}


.tab-master-element:not(.active) {
	display: none;
}

/*** Code Wizard page ***/
/** Here's a reference that's quick and easy to use as you go: https://css-tricks.com/snippets/css/complete-guide-grid/ **/
/* Note: If you inspect your page in the browser and hover over the elements, it highlights the grids for you and shows you the outlines of columns and rows. */
.code-wizard {
	display: grid; /* This is what makes it a grid */
	grid-template-rows: 5% 5% 10% 10% 5% 40%; /* Add as many or as few rows as you want. Use %, auto, or fr*/
	/*grid-template-columns: 1fr 1fr;*/
}

.environment-warning {
	grid-row: 1 / 2; /* The numbers here are the borders of the rows. They always start at 1, not 0.*/
	/*grid-column: 1 / 2*/
}




/*** Errors and debugging ***/

.SoarsEnvironment_Development, .SoarsDatabase_QDC-IDKDEV-BE01 {
	background-color: green;
	color: white;
}

.SoarsEnvironment_Test, .SoarsEnvironment_Staging, .SoarsDatabase_QDC-IDKTST-BE01 {
	background-color: yellow;
}

.SoarsEnvironment_Production, .SoarsDatabase_ESC-IDKPRD-BE01 {
	background-color: red;
	color: white;
}

.SoarsDebugging {
	background-color: yellow;
	color: black;
	font-size: 12pt;
	padding: 4px 10px 4px 10px;
	border: 1px solid black;
	z-index: 1;
	position: fixed;
	right: 4px;
	bottom: 4px;
	text-align: center;
}

.SoarsFixedWidthLabel {
	display: inline-block;
}


.SoarsBold {
	font-weight: bold;
}

.SoarsPadRight16 {
	padding-right: 16px;
}

.jedi-error {
	grid-area: error;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 10% auto 10%;
	grid-template-areas: ". jedi-user-error ." ". jedi-debug-error .";
	grid-gap: 5px;
	margin-top: 7px;
}

.SoarsErrorDetail {
	background-color: yellow;
	color: black;
	font-size: 12pt;
	padding: 4px 10px 4px 10px;
	border: 1px solid black;
	grid-area: jedi-debug-error;
}

.SoarsErrorInline {
	/*background-color: yellow;*/
	color: var(--jeffco-magenta);
	padding: 0px 3px 0px 3px;
	border: 1px solid silver;
	grid-area: jedi-user-error;
}

	.SoarsErrorInline:empty, .SoarsErrorDetail:empty {
		display: none;
	}


.loading * {
	/* disable all mouse events on subElements */
	pointer-events: none;
	cursor: progress;
}


/*  HighCharts  */


.highcharts-figure {
	width: 100%;
	margin: 1em auto;
	padding: 8px;
	background: #dddddd;
	border-radius: 5px;
}

table.dataTable {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #232323;
	margin: 10px auto;
	text-align: center;
	width: 100%;
}

.highcharts-data-table caption {
	padding: 1em 0;
	font-size: 1.2em;
	color: #555;
}

.highcharts-data-table th {
	font-weight: 600;
	padding: 0.5em;
}

.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
	padding: 0.5em;
}

.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
	background: #f8f8f8;
}

.highcharts-data-table tr:hover {
	background: #f1f7ff;
}

.highcharts-report-page {
	/*min-width: 310px;
	max-width: 1200px;*/
	width: 80%;
	margin: 1em auto;
	padding: 8px;
	background: #dddddd;
	border-radius: 5px;
}
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */



@media only screen and (min-width: 576px) {
	/*.navbar {
		justify-self: stretch;
		display: grid;
		grid-template-columns: 20% 80%;
		overflow: hidden;
	}

		.navbar .navbar-collapse {
			grid-column: 2 / 3;
			justify-self: stretch;
			align-self: stretch;
		}

	.navbar-white {
		grid-row: 1 / 3;
	}

	.navbar-blue-stripe {
		grid-row: 2 / 3;
	}

	.instructional-portal-menu {
		width: 100%;
		grid-column: 2 / 3;
		justify-self: stretch;
		align-self: stretch;
		display: grid;
		grid-template-columns: auto 7%;
		grid-column-gap: 10px;
	}

	#jeffco-header-logo {
		justify-self: start;
		max-height: 100%;
	}*/
}

/* Media Query - change grid templates when viewing on mobile  */
@media only screen and (max-width: 945px) {
	.jedi-q-page {
		/*display: grid;
		grid-area: body;*/
		grid-template-columns: .2fr 5fr .2fr;
		grid-template-rows: auto 10fr .5fr;
		grid-template-areas: ". title ." ". questions ." ". . .";
	}

	.jedi-q-container {
		/*display: grid;*/
		grid-area: questions;
		grid-template-columns: 5fr;
		grid-template-areas: "form";
	}

	.jedi-q-form {
		grid-area: form;
		display: grid;
		grid-template-columns: .2fr 5fr .2fr;
		grid-template-areas: ". formGroup ." ". buttons .";
	}
}

@media only screen and (min-width: 1200px) {
	.jedi-q-page {
		/*display: grid;
		grid-area: body;*/
		grid-template-columns: 3fr 5fr 3fr;
		grid-template-rows: auto 10fr .5fr;
		grid-template-areas: ". title ." ". questions ." ". . .";
	}

	.jedi-q-container {
		/*display: grid;*/
		grid-area: questions;
		grid-template-columns: .5fr 5fr .5fr;
		grid-template-areas: ". form .";
	}

	.jedi-q-form {
		grid-area: form;
		display: grid;
		grid-template-columns: .5fr 5fr .5fr;
		grid-template-areas: ". formGroup ." ". buttons .";
	}
}

@media only screen and (max-width: 992px) {
	.jedi-alp-details {
		display: grid;
		grid-gap: 25px;
		grid-auto-rows: minmax(.5fr, 4fr);
		grid-template-columns: 100%;
	}
}

@media only screen and (min-width: 992px) {
	.jedi-alp-details {
		display: grid;
		grid-gap: 25px;
		grid-auto-rows: minmax(.5fr, 4fr);
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.jedi-button-25w {
		width: 25%;
	}

	.jedi-button-40w {
		width: 40%;
	}

	.jedi-button-60w {
		width: 60%;
	}

	.jedi-widget-tab {
		width: auto;
		margin-left: 1em;
		margin-right: 1em;
	}
}