* {
	margin: 0;
	padding: 0;
	font-family: Garamond, Times New Roman;
}

html, body {
    height: 100%;
    overflow: hidden;
}
			
model-viewer {
	display: flex;
	width: 300px;
	height: 100%;
	background-color: gray;
	margin-left: auto;
	margin-right: auto;
}
model-viewer::part(default-progress-bar) {
	background-color: lime;
	height: 1%;
}

.container {
    width: 75%;
	height: 75%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
    overflow: hidden;
	padding: 10px;
	padding-bottom: 100px;
}
			
.box {
	width: 50%;
}
			
header {
	color: white;
	position: sticky;
	height: 120px;
	text-align: center;
	background-color: #0A330F;
}

#headerLogo {
	width: 150px;
}
			
#model_display {
	position: sticky;
	top: 60px;
}
			
#option_selector {
    flex-grow: 1;
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 20px;
	border-color: black;
	border-style: solid;
	border-width: 1px;
	padding: 10px;
}

details {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

#potAssy {
	overflow: visible;
}

summary {
  background-color: white;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  display: block;
}

summary:hover {
  background-color: #f0f0f0;
}

button {
	background-color: #0A330F;
	padding: 10px;
	color: #FFFFFF;
}

button:hover {
	background-color: #39FF14;
}

button:active {
	background-color: #FFFF00;
	color: #000000;
}