body {
background-color: #DDD;
/*background-image: linear-gradient(180deg, #FFFFFF 0%, #DDDDFF 100%);*/
margin: 0;
}

#fixed-header {
height: 15%;
background-color: #EEE;
box-shadow: 0 4px 6px 0 rgb(12 0 46 / 6%);
/*background-image: linear-gradient(90deg, #FFFFFF 0%, #CCC 100%);*/
}

#fixed-header-logo {
float: left;
height: 100%;
width: 20% !important;
}

#fixed-header-logo img {
float: left;
height: 100%;
}

#fixed-header h1 {
/*float: left;*/
}

#help-banner {
font-size: 34px;
font-family: tahoma;
text-align: center;
display: inline-block;
padding-top: 25px;
color: #0170c5;
margin-left: 0px;
}

#header-button-start {
float: right;
background-color: green;
color: white;
border-radius: 30px;
font-size: 30px;
padding: 0px 30px;
cursor: pointer;
box-shadow: 5px 5px #999999;
margin: 60px 50px 0px 0px;
}

#header-button-start:hover {
background-color: #33CC33;	
}

#header-button-contact {
float: right;
background-color: #0170c5;
color: white;
border-radius: 30px;
font-size: 30px;
padding: 0px 30px;
cursor: pointer;
box-shadow: 5px 5px #999999;
margin: 60px 50px 0px 0px;
}

#header-button-contact:hover {
background-color: #3399FF;
}

#help-main {
height: 85%;
overflow: auto;
}

#toc {
width: 20%;
float: left;
overflow: auto;
color: #FFF;
background-color: #333;
height: 100%;
}

.toc-L1 {
list-style-type: none;
padding-left: 20px;	
}

.toc-L1 > li {
cursor: pointer;
width: fit-content;	
}

.toc-L1 > li:hover {
color: #333;
background-color: lightyellow;
}

.toc-L2 {
list-style-type: disc;	
}

.toc-L3 {
list-style-type: circle;	
}

#toc li {
font-family: arial;
font-size: 22px;
}

#toc ul > ul > li {
font-size: 18px;	
}

#toc ul > ul > ul > li {
font-size: 16px;	
}

#toc a,
#toc a:visited {
color: white;
text-decoration: none;
}

#toc a:hover {
color: #333;
background-color: lightyellow;
}

#help {
width: 70%;
padding-left: 5%;
padding-right: 5%;
float: left;
overflow: auto;
height: 100%;
}

#help h1 {
font-size: 32px;
color: #0170c5;
text-align: left;
font-family: tahoma;
}

#help p {
font-size: 20px;
font-family: arial;
}

#help ul {
font-size: 20px;
font-family: arial;
}

#help li {
margin-top: 10px;
}

#help img {
box-shadow: 5px 5px 5px #999;
border-radius: 3px;
margin-left: 10%;
max-width: 1000px;
}

ol > li {
font-size: 24px;	
}

iframe {
margin-left: 10%;	
}

hr {
margin-top: 20px;
margin-bottom: 20px;
border-top: 3px solid black;
}

#expand-collapse {
margin-left: 20px;
font-size: 18px;
cursor: pointer;
border: 1px solid white;
width: fit-content;
margin-top: 2px;
padding: 0px 3px;	
}

#expand-collapse:hover {
background-color: lightyellow;
color: #333;	
}

#show-field-names-quiz {
color: black;
background-color: lime;
border: 2px solid black;
font-size: 30px;
width: fit-content;
padding: 0px 20px;
cursor: pointer;
border-radius: 10px;
}

#show-field-names-quiz:hover {
color: white;
background-color: green;
border: 2px solid black;	
}

#field-names-quiz {
background-color: #FFF;
border: 2px solid black;
color: black;
font-size: 24px;
padding: 15px;
width: 1000px;
display: none;
margin-top: 15px;	
}

#field-names-quiz-header {
font-size: 30px;
text-decoration: underline;
text-align: center;
width: 100%;	
}

.field-name-answer-input {
cursor: pointer;	
}
.field-name-answer label {
cursor: pointer;	
}
.field-name-answer-box {
display: none;
padding: 15px;
border: 2px solid black;
margin-top: 10px;	
}

.field-name-question {
margin-top: 15px;	
}