body {
background-color: #DDD;
/*background-image: linear-gradient(180deg, #FFF 0%, #DDD 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;
}

.toc-L1 {
/*list-style-type: square;*/
}

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

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

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

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

#toc a:hover {
color: white;
background-color: #0170c5;
}

#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: 0px;
max-width: 800px;
}

iframe {
margin-left: 10%;	
}

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

li > a {
text-decoration: none;	
}

li > a:visited {
color: #0170CB;	
}

#toc li > a:hover {
background-color: white;
color: #0170c5;
}

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

#toc {
width: 250px;
overflow: auto;
color: #FFF;
background-color: #0170C5;
height: 100%;
}

#help {
width: 930px;
padding-left: 30px;
padding-right: 30px;
overflow: auto;
height: 100%;
resize: none;
background-color: #EEE;
}

#json-code-container {
overflow: auto;
height: 100%;
flex: 1;
resize: none;
display: flex;
flex-direction: column;
font-weight: bold;
}

#json-code {
background-color: #222;
color: white;
width: 100%;
height: 100%;
padding-left: 10px;
font-family: courier;
font-size: 14px;
white-space: nowrap;
resize: none;
display: flex;
border-radius: 0px;
}

#json-code:focus {
outline: none !important;	
}

#json-code-header {
display: flex;
flex-direction: row;
font-size: 18px;
border: 1px solid black;
padding: 5px;
background-color: white;
align-items: center;
font-family: arial;
}

#json-code-title {
display: flex;
padding: 0px 30px;
color: #0170c5;
background-color: #CCC;
cursor: default;
text-align: center;
}

#width-label {
display: flex;
padding: 0px 10px;
cursor: default;
}

#width-up {
display: flex;
padding: 0px 5px;
cursor: pointer;
}

#width-up:hover {
background-color: #333;
color: white;
}

#width-down {
display: flex;
padding: 0px 5px;
cursor: pointer;
}

#width-down:hover {
background-color: #333;
color: white;
}

#code-copy {
display: flex;
padding: 0px 10px;
background-color: green;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
}

#code-copy:hover {
background-color: limegreen;	
}

#code-clear {
display: flex;
padding: 0px 10px;
background-color: #666;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
}

#code-clear:hover {
background-color: #BBB;	
}

#html-tool {
display: flex;
padding: 0px 10px;
background-color: navy;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
}

#html-tool:hover {
background-color: deepskyblue;	
}

body {
min-width: 1920px;	
}

.rating {
list-style-type:none;
margin-left: -20px;
background-color: navy;
padding: 3px 5px;	
}

.emoji-stars {
font-size: 14px;
line-height: 20px;
vertical-align: top;	
}

.code-snippet {
background-color: #222;
color: white;
font-family: courier;
font-size: 14px;
padding-left: 10px;
overflow: auto;
margin-top: 0;
}

.code-snippet-copy {
display: flex;
padding: 5px 10px;
background-color: #999;
color: black;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
font-family: arial;
width: fit-content;
font-size: 24px;
}

.code-snippet-copy:hover {
background-color: #333;
color: white;	
}

.instruction {
border-top: 1px solid black;
padding-top: 20px;	
}

.live-preview {
border-top: 1px solid black;
margin-top: 20px;	
}

.live-preview a {
display: flex;
padding: 5px 10px;
background-color: #0170C5;
color: white !important;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
font-family: arial;
width: fit-content;
margin-top: 30px;
text-decoration: none;
font-size: 24px;	
}

.live-preview a:hover {
background-color: #3399FF;	
}

.show-code {
display: flex;
padding: 5px 0px;
background-color: #CCC;
color: black;
cursor: pointer;
text-align: center;
font-family: arial;
width: 100%;
justify-content: center;
margin-top: 30px;
font-size: 24px;
border-radius: 5px;	
}

.show-code:hover {
background-color: #666;
color: white;
}

.code-panel {
display: none;
background-color: #CCC;
border: 1px solid #222;
padding-bottom: 20px;
padding-top: 0px;
border-radius: 0px 0px 5px 5px;
}

.required-fields {
background-color: lightyellow;
padding: 10px;
border: 1px solid #CCC;	
}

.template-description {
font-style: italic;
font-weight: bold;	
}

.deploy {
margin-top: 20px;
border: 1px solid black;
background-color: azure;
padding: 10px;
font-weight: bold;	
}

.instructions-header {
font-size: 28px;
color: #0170c5;
text-align: left;
font-family: tahoma;
font-weight: bold;
margin-top: 20px;	
}

#introduction-panel {
display: none;	
}

#introduction-panel-read-more {
display: flex;
padding: 5px 10px;
background-color: #666;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
font-family: arial;
width: fit-content;
font-size: 24px;	
}

#introduction-panel-read-more:hover {
background-color: #CCC;
color: black;	
}

#resources-panel {
display: none;	
}

#resources-panel-read-more {
display: flex;
padding: 5px 10px;
background-color: #666;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
text-align: center;
font-family: arial;
width: fit-content;
font-size: 24px;	
}

#resources-panel-read-more:hover {
background-color: #CCC;
color: black;	
}

.html-header {
font-weight: bold;
font-family: arial;
font-size: 18px;
margin-top: 20px;
}

.html-snippet {
background-color: #FFF;
color: black;
font-family: courier;
font-size: 14px;
padding: 10px 10px 10px 10px;
overflow: auto;
margin-top: 20px;
border: 1px solid black;
}

#reference-html {
display: none;	
}

#help a {
color: #0170c5;
text-decoration: none;	
}

#help a:visited {
color: #0170c5;
}