.sbo-calc-preview {
	width: 100%;
	max-width: 37.5rem;
	margin: 0 auto 0.5rem auto;
	background: #ffffff;
}

.sbo-pv-svg {
	display: block;
	width: 100%;
	height: auto;
}

.sbo-pv-mesh { --sbo-pv-foot: #df0911; }
.sbo-pv-tradie { --sbo-pv-foot: #ff9933; }
.sbo-pv-siteboard { --sbo-pv-foot: #044cc7; }

.sbo-pv-s1 { stop-color: #cdcdcd; }
.sbo-pv-s2 { stop-color: color-mix(in srgb, #cdcdcd 88%, #333333); }

.sbo-pv-wire {
	fill: none;
	stroke: #333333;
	stroke-width: 6;
	stroke-opacity: 0.6;
}

.sbo-pv-ground {
	stroke: #cdcdcd;
	stroke-width: 0.125rem;
	vector-effect: non-scaling-stroke;
}

.sbo-pv-prod {
	fill: color-mix(in srgb, var(--sbo-pv-foot) 10%, #ffffff);
	stroke: var(--sbo-pv-foot);
	stroke-width: 0.125rem;
	vector-effect: non-scaling-stroke;
}

.sbo-pv-eye { fill: #a4a4a4; }

.sbo-pv-foot { fill: var(--sbo-pv-foot); }

.sbo-calc-preview-help {
	text-align: center;
}

#sbo-calc-orient label.bluelinker { color: #0066ff; }
#sbo-calc-orient label.blacklinker { color: #333; }

.sbo-pv-prod-fill { fill: color-mix(in srgb, var(--sbo-pv-foot) 10%, #ffffff); }

.sbo-pv-break {
	fill: none;
	stroke: #333333;
	stroke-width: 0.0625rem;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}

.sbo-kf-next { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; font-size: 0.85rem; }
.sbo-kf-stars { color: #ff9900; font-size: 0.85rem; margin: 0 0 0.25rem 0; }
.sbo-kf-bigstars { display: inline-block; color: #ff9900; font-size: 2.5rem; text-decoration: none; }

.sbo-kf-track {
	display: flex;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	touch-action: pan-x pan-y;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.sbo-kf-track::-webkit-scrollbar { display: none; }
.sbo-kf-slide {
	flex: 0 0 100%;
	min-width: 0;
	max-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.sbo-kf-name { font-size: 0.85rem; color: #555555; margin: 0; }

.sbo-kf-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
.sbo-kf-head .sbo-calc-label { margin: 0; }
.sbo-kf-head .sbo-kf-next { padding-left: 1rem; text-align: right; }
.sbo-kf-home { color: inherit; text-decoration: none; display: inline-block; min-height: 2.75rem; line-height: 2.75rem; }