html {
	--bgColor: #3584E4;
	--fgColor: #FFF;
	scroll-behavior: smooth;
}
body {
	display: flex;
	flex-direction: column;
}
nav {
	background-color: var(--bgColor);
	color: var(--fgColor);
	display: flex;
	justify-content: end;
	padding: 1rem;
}
nav h1 {
	font-size: 1.3rem;
	margin-right: auto;
}
nav a {
	border: solid 2px var(--fgColor);
	padding: .25rem .5rem;
	margin: 0 .5rem;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
}
nav a:link, nav a:visited {
	color: var(--fgColor);
}
nav a:hover, nav a:focus {
	background-color: var(--fgColor);
	color: var(--bgColor);	
}
#docIcon img {
	margin-right: .5rem;
	height: 64px;
	width: 64px;
}
main  {
	font-size: 1rem;
	margin-bottom: auto;
	padding: 1rem;
	padding-top: 0;
}
.intro {
	font-size: 1.3rem;
	font-style: italic;
	margin: 1rem .5rem;
}
main fieldset {
	margin-top: .5rem;
}
main > p {
	margin: 1rem 0;
}
main textarea {
	font-size: 1rem;
	min-width: 500px;
	height: 2.4rem;
	width: 100%;
	/*max-width: 500px;*/
}
.gtkSideBar .sideBar {
	border: solid 2px var(--bgColor) !important;
	margin-right: 1rem !important;
}
main div:nth-child(even) {
	background-color: var(--bg-gray-light);
}
main div[data-q] p {
	font-weight: 800;
}
main div li {
	margin-bottom: .5rem;
}
main div label {
	display: block;
	margin-left: 1.5rem;
}
main div label input {
	margin-left: -1.5rem;
}
#summary {
	display: flex;
	flex-direction: column;
}
#summary p {
	/*display: inline-block;
	width: 50%;*/
}
#summary .bestBet {
	font-size: 133%;
	background-color: #d0e3d0;
}
.bestBet .divLabel {
	font-weight: 800;
}
.bestBet-text {
	width: 100%;
}
.divRatio {
	display: flex;
	/*flex-direction: row;*/
	flex-wrap: wrap;
}
.divLabel {
	text-align: right;
	flex: 1 1 50%;
}
.divValue {
	padding-left: .5rem;
	font-weight: 800;
	text-align: left;
	flex: 1 1 40%;
}
#next { display: none; }
body > footer {
	background-color: var(--bgColor);
	color: var(--fgColor);
	display: flex;
	/*justify-content: end;*/
	padding: 1rem;
}
[name="sqat"] ul {
	list-style-type: none;
	padding-left: 0;
}
@media only screen and (max-width: 450px){
/*@media (orientation: portrait){*/
	html {
	}
	nav {
		padding: .5rem;
		height: 4vh;
	}
	nav h1 {
		font-size: .8rem;
	}
	nav a {
		display: none;
	}
	#docIcon img {
		margin-right: .5rem;
		height: 32px;
		width: 32px;
	}
	main {
		padding: .5rem;
		margin-bottom: 5vh;
		height: 85vh;
		overflow-x: scroll;
	}
	main fieldset {
		padding: 0;
	}
	main div {
		padding: .5rem;
	}
	#next { display: initial; }
	#next + .btnSubmit { display: none; }
	#next[href='#q7'] { display: none; }
	#next[href='#q7'] + .btnSubmit { display: initial; }
	#btnsPane {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		height: 4vh;
	}
	body > footer {
		display: none;
	}
}