/* popover positioning is off without this */
body.interactive-guide-visible {
	position: static;
}

/* prevent standard backdrop from receiving clicks while the guide is active */
body.interactive-guide-visible .body-backdrop {
	pointer-events: none !important;
}

/* fade out cookiebot widget while interactive guide is active */
body.interactive-guide-visible #CookiebotWidget {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* block known external UI triggers while guide is active */
html.interactive-guide-visible #top-menu .nav-hamburger,
html.interactive-guide-visible #sidepanel {
	pointer-events: none;
}

/* allow explicitly whitelisted guide targets */
html.interactive-guide-visible #top-menu .nav-hamburger.interactive-guide-interactable,
html.interactive-guide-visible #sidepanel.interactive-guide-interactable {
	pointer-events: auto;
}

/* interactive guide button container */
.interactive-guide-button-container {
	position: absolute;
	left: 45px;
	bottom: 45px;
	width: 60px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

/* interactive guide start button */
.interactive-guide-button-container > .btn-interactive-guide {
	position: relative;
	width: fit-content;
	height: fit-content;
	margin: 0;
	padding: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background-color: transparent;
	color: var(--button-inverse-text-color);
	border-radius: unset;
	outline: none;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

html.logo-editor-open .interactive-guide-button-container > .btn-interactive-guide::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(5px);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	z-index: -1;
}

.interactive-guide-button-container > .btn-interactive-guide > .material-icons,
.interactive-guide-button-container > .btn-interactive-guide > .material-icons-outlined {
	font-size: 26px;
	line-height: 1;
}

.interactive-guide-button-container > .btn-interactive-guide.show {
	opacity: 1;
	pointer-events: all;
}

/* disable all interaction when interactive guide is active */
body.interactive-guide-visible #header,
body.interactive-guide-visible #main *:not(.ui-transformable-content-resize-handle),
body.interactive-guide-visible #footer {
	pointer-events: none !important;
}

html.interactive-guide-scroll-lock,
body.interactive-guide-scroll-lock {
	overflow: hidden;
}

/* interactive guide backdrop */
#interactive-guide-backdrop {
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: transparent;
}

/* hole draws dim */
#interactive-guide-backdrop .interactive-guide-hole {
	position: absolute;
	left: var(--ig-x, 0px);
	top: var(--ig-y, 0px);
	width: var(--ig-w, 0px);
	height: var(--ig-h, 0px);
	border-radius: var(--ig-r, 0px);
	pointer-events: none;
	background: transparent;
	box-shadow: 0 0 0 9999px rgba(0,0,0,0.1);
	opacity: 0;
	transition: opacity 0.6s ease;
}

#interactive-guide-backdrop .interactive-guide-hole-wrapper {
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.6s ease;
}

#interactive-guide-backdrop .interactive-guide-hole-outer,
#interactive-guide-backdrop .interactive-guide-hole-inner {
	position: absolute;
	pointer-events: none;
	background: transparent;
	box-sizing: border-box;
	box-shadow: none;
}

#interactive-guide-backdrop .interactive-guide-hole-outer.is-hole-target,
#interactive-guide-backdrop .interactive-guide-hole-inner.is-hole-target {
	box-shadow: 0 0 0 9999px rgba(0,0,0,0.1);
}

/* only fade when guide wants dim */
#interactive-guide-backdrop.has-target .interactive-guide-hole,
#interactive-guide-backdrop.has-target .interactive-guide-hole-wrapper {
	opacity: 1;
	will-change: opacity;
}

body.interactive-guide-visible #product .ui-popover * {
	pointer-events: all !important;
}

body.interactive-guide-visible .disable-guide-item {
	pointer-events: none !important;
	opacity: 0.8;
	transition: opacity 150ms ease;
}

body.interactive-guide-visible .disable-guide-item.btn-logo-tool {
	color: rgba(255,255,255,0.75);
	background: #d8d8d8;
}

body.interactive-guide-visible .disable-guide-item {
	cursor: default;
	transition: color 150ms ease;
}

body.interactive-guide-visible .disable-guide-item:not(.btn-logo-tool),
body.interactive-guide-visible .disable-guide-item:not(.btn-logo-tool) .underline,
body.interactive-guide-visible .disable-guide-item:not(.btn-logo-tool) .label-caption {
	color: #555 !important;
}

body.interactive-guide-visible .disable-guide-item .underline .arrow > span {
	color: #888 !important;
}

body.interactive-guide-visible li.highlight-guide-item > .label-container::before,
body.interactive-guide-visible :not(li).highlight-guide-item:not(.sticky)::before,
body.interactive-guide-visible :not(li).highlight-guide-item.sticky::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	border: 2px solid transparent;
	background: linear-gradient(90deg, rgba(141, 100, 170, 1) 0%, rgba(68, 200, 245, 1) 25%, rgba(130, 202, 156, 1) 50%, rgba(255, 205, 91, 1) 75%, rgba(238, 61, 150, 1) 100%) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	pointer-events: none;
}

/* expand highlight outline for interactable steps to avoid clashing with hover/active borders */
body.interactive-guide-visible .label-container.highlight-guide-item.interactive-guide-interactable::before {
	top: -6px;
	left: -6px;
	right: -6px;
	bottom: -6px;
	border-radius: 7px;
}

/* popover */
.ui-popover {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	padding: 20px 30px;
	margin: 10px;
	min-width: 450px;
	max-width: 600px;
	background-color: #ffffff;
	border-radius: 15px;
	filter: drop-shadow(rgba(0, 0, 0, 0.12) 0 5px 35px);
	border: 1px solid transparent;
	z-index: 9999;
	--ig-arrow-x: 50%;
	--ig-arrow-y: 50%;
	--ig-arrow-pad: 30px;
}

.ui-popover.center {
	top: 25%;
	left: calc(var(--product-option-width) * -1);
	right: 0;
	margin: 0 auto;
}

@media only screen and (max-width: 1580px) {
	.ui-popover.center {
		left: -517px;
	}
}

@media only screen and (max-width: 1400px) {
	.ui-popover.center {
		left: 0;
	}
}

/* wide popover */
.ui-popover.wide-popover {
	max-width: 700px;
	min-width: 620px;
} 

/* extra wide popover */
.ui-popover.wider-popover {
	max-width: 800px;
}

/* medium popover */
.ui-popover.medium-popover {
  max-width: 650px;
}

/* narrow popover */
.ui-popover.narrow-popover {
  max-width: 500px;
}

/* extra narrow popover */
.ui-popover.xnarrow-popover {
  max-width: 400px;
}

.ui-popover.transition {
	transition: visibility 0s linear .2s, opacity .2s linear;
}

.ui-popover.transition.show {
	transition: visibility 0s linear 0s, opacity .2s linear;
}

/* genie defaults (only used when .ui-popover-genie is present) */
.ui-popover.ui-popover-genie {
	--ig-genie-duration-in: 0.24s;
	--ig-genie-duration-out: 0.20s;
	--ig-genie-easing-in: cubic-bezier(0.33, 1, 0.68, 1);  /* easeOutCubic */
	--ig-genie-easing-out: cubic-bezier(0.32, 0, 0.67, 0); /* easeInCubic */
}

/* genie: include transform in transitions */
.ui-popover.ui-popover-genie.transition {
	transition:
		visibility 0s linear var(--ig-genie-duration-out),
		opacity var(--ig-genie-duration-out) linear,
		transform var(--ig-genie-duration-out) var(--ig-genie-easing-out);
}

.ui-popover.ui-popover-genie.transition.show {
	transition:
		visibility 0s linear 0s,
		opacity var(--ig-genie-duration-in) linear,
		transform var(--ig-genie-duration-in) var(--ig-genie-easing-in);
}

.ui-popover.show {
	visibility: visible;
	opacity: 1;
}

.ui-popover > .ui-popover-header,
.ui-popover > .ui-popover-content,
.ui-popover > .ui-popover-footer {
	padding: 10px;
}

.ui-popover > .ui-popover-header {
	display: flex;
	justify-content: space-between;
	column-gap: 12px;
	padding-bottom: 5px;
}

.ui-popover > .ui-popover-header > .btn-close {
	margin-right: -10px;
}

.ui-popover > .ui-popover-content p + h2 {
	margin-top: 30px;
}

.ui-popover > .ui-popover-content h2 {
	margin-bottom: 30px;
}

.ui-popover > .ui-popover-title,
.ui-popover > .ui-popover-header > .ui-popover-title,
.ui-popover > .ui-popover-content h2 {
	font-size: 22px;
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ui-popover > .ui-popover-header > .ui-popover-title {
	position: relative;
	text-align: left;
	padding-right: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.ui-popover > .ui-popover-header > .btn-close .material-icons {
	font-size: 26px;
	font-weight: 500;
}

.ui-popover > .ui-popover-content {
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

.ui-popover > .ui-popover-content p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
	margin: 0 0 20px;
}

.ui-popover > .ui-popover-content strong {
	font-weight: 800;
}

.ui-popover > .ui-popover-content p > .material-icons,
.ui-popover > .ui-popover-content p > .material-icons-outlined {
	vertical-align: middle;
}

.ui-popover > .ui-popover-content p:not(.introduction):last-of-type {
	margin-bottom: 0;
}

.ui-popover > .ui-popover-content p.introduction {
	margin-bottom: 35px;
}

.ui-popover > .ui-popover-content .flex-row {
	flex-wrap: nowrap !important;
}

.ui-popover > .ui-popover-content .flex-row > .flex-column {
	justify-content: center;
	font-size: 14px;
	padding: 15px 20px;
	text-wrap: balance;
}

.ui-popover > .ui-popover-content .flex-row.vertical-border .flex-column:nth-child(2)  {
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	padding: 15px 35px;
}

.ui-popover > .ui-popover-content .flex-row:last-child > .flex-column {
	padding-bottom: 0;
}

.ui-popover > .ui-popover-content .flex-row > .flex-column.flex-center {
	align-items: center;
}

.ui-popover > .ui-popover-content .flex-row > .flex-column.flex-direction-row {
	flex-direction: row;
}

.ui-popover > .ui-popover-content .flex-row > .flex-column.flex-justify-content {
	justify-content: space-around;
}

.ui-popover > .ui-popover-content .flex-row > .flex-column.flex-wider {
	flex: 0 0 16em;
}

.ui-popover > .ui-popover-content .flex-row > .flex-column .material-icons,
.ui-popover > .ui-popover-content .flex-row > .flex-column .material-icons-outlined {
	font-size: 45px;
	padding-top: 15px;
}

.ui-popover > .ui-popover-content .flex-row > .flex-zoom-svg {
	justify-content: flex-start;
	padding: 5px 0 30px 0;
}

.ui-popover > .ui-popover-content hr {
	display: block;
	height: 1px;
	background-color: var(--border-color);
	border: none;
	margin-top: 35px;
	margin-bottom: 35px;
}

.ui-popover > .ui-popover-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 40px;
}

.ui-popover > .ui-popover-footer > .btn {
	font-size: 16px;
	font-weight: 500;
	padding: 18px 20px;
	max-width: 230px;
	flex: 1 1 0;
	width: 0;
}

/* custom footer layouts */
.ui-popover > .ui-popover-footer.is-custom.is-column {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 14px;
	column-gap: 0;
}

/* when column layout: buttons be normal width */
.ui-popover > .ui-popover-footer.is-custom.is-column > .btn {
	width: min(100%, 315px);
	max-width: none;
	flex: 0 0 auto;
}

/* when only one button */
.ui-popover > .ui-popover-footer > .btn:only-child {
	max-width: 235px;
	margin: 0 auto;
}

.ui-popover > .ui-popover-footer > .btn:only-child::after {
	display: none;
}

/* link-like button used in popover footer */
.ui-popover .btn-link {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: rgba(0,0,0,0.75);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* keep it centered (matches footer alignment) */
.ui-popover > .ui-popover-footer .btn-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 20px;
	font-size: 14px;
	line-height: 2.4;
}

.ui-popover .btn-link:hover .underline::after,
.ui-popover .btn-link:focus .underline::after {
	opacity: 1;
}

/* allow interaction only for explicitly enabled step targets */
body.interactive-guide-visible #main .interactive-guide-interactable,
body.interactive-guide-visible #main .interactive-guide-interactable * {
	pointer-events: auto !important;
}

/* raise z-index except for excluded elements */
body.interactive-guide-visible #main .interactive-guide-interactable:not(.btn-quantity) {
	z-index: 9999 !important;
}

/* explicitly reset excluded elements */
body.interactive-guide-visible #main .interactive-guide-interactable.btn-quantity {
	z-index: auto !important;
}

/* disabled guide items must stay non-interactable even inside interactive-guide-interactable */
body.interactive-guide-visible #main .interactive-guide-interactable .disable-guide-item,
body.interactive-guide-visible #main .interactive-guide-interactable .disable-guide-item * {
	pointer-events: none !important;
}

body.interactive-guide-visible #product-option:hover {
	overflow-y: hidden !important;
}

/* popover caption */
.ui-popover > .ui-popover-caption {
	width: 100%;
	padding: 15px 20px 10px 20px;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(0,0,0,0.5);
}

/* popover nav (dots) */
.ui-popover > .ui-popover-nav {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 25px 20px 15px 20px;
}

.ui-popover > .ui-popover-nav > .ui-popover-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: rgba(0,0,0,0.18);
	cursor: pointer;
}

.ui-popover > .ui-popover-nav > .ui-popover-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	transform: translate(-50%, -50%);
}

.ui-popover > .ui-popover-nav > .ui-popover-dot.is-active {
	background: rgba(0,0,0,0.85);
	transform: scale(1.3333);
}

/* disable nav dots while a child step is active */
body.interactive-guide-visible .ui-popover.ui-popover-child-step .ui-popover-nav {
	pointer-events: none;
	opacity: 0.25;
}

.ui-popover.arrow::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

/* arrow center left */
.ui-popover.arrow.center-left::after {
	left: 30px;
	top: -20px;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #fff;
}

/* top arrow: dynamic x */
.ui-popover.arrow.center-top::after {
	left: var(--ig-arrow-x, 50%);
	top: -20px;
	transform: translateX(-50%);
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #fff;
}

/* arrow center right */
.ui-popover.arrow.center-right::after {
	right: 30px;
	top: -20px;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #fff;
}

/* arrow left top */
.ui-popover.arrow.left-top::after {
	border-right: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	left: -20px;
	top: 30px;
}

/* left arrow (middle): dynamic y */
.ui-popover.arrow.left-middle::after {
	left: -20px;
	top: var(--ig-arrow-y, 50%);
	transform: translateY(-50%);
	border-right: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* arrow left bottom */
.ui-popover.arrow.left-bottom::after {
	border-right: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	left: -20px;
	bottom: 30px;
}

/* bottom arrow: dynamic x */
.ui-popover.arrow.center-bottom::after {
	left: var(--ig-arrow-x, 50%);
	bottom: -20px;
	transform: translateX(-50%);
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fff;
}

/* arrow right top */
.ui-popover.arrow.right-top::after {
	right: -20px;
	top: 30px;
	border-left: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* right arrow (middle): dynamic y */
.ui-popover.arrow.right-middle::after {
	right: -20px;
	top: var(--ig-arrow-y, 50%);
	transform: translateY(-50%);
	border-left: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* arrow right bottom */
.ui-popover.arrow.right-bottom::after {
	right: -20px;
	bottom: 30px;
	border-left: 20px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

.ui-popover .keyboard-arrows-filled,
.ui-popover .keyboard-arrows-outlined {
	background-size: contain;
	display: inline-block;
	width: 170px;
	height: 94px;
}

.ui-popover .keyboard-arrows-up-down-filled {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0ibWF4LWhlaWdodDogNTAwcHgiIHZpZXdCb3g9IjYwLjMyNzQzMzYyODMxODU5IDEwLjY0MDggNDkuMDgxODU4NDA3MDc5NjQgNzIuOTQ0IiB5PSIwcHgiIHg9IjBweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDkuMDgxODU4NDA3MDc5NjQiIGhlaWdodD0iNzIuOTQ0Ij4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8cGF0aCBkPSJNODQuOCwxNC42YzUuMiwwLDEwLjMsMC4xLDE1LjUsMGMyLjcsMCw0LjYsMS45LDQuNiw0LjVjLTAuMSw2LjUsMCwxMy4xLDAsMTkuNmMwLDIuNy0xLjcsNC40LTQuNCw0LjQgICBjLTEwLjQsMC0yMC44LDAtMzEuMywwYy0yLjcsMC00LjQtMS43LTQuNC00LjRjMC02LjYsMC0xMy4yLDAtMTkuOWMwLTIuNiwxLjctNC4zLDQuMy00LjNDNzQuMywxNC42LDc5LjUsMTQuNiw4NC44LDE0LjZ6Ii8+Cgk8cGF0aCBkPSJNODQuOCw3OS40Yy01LjIsMC0xMC4zLTAuMS0xNS41LDBjLTIuNywwLjEtNC42LTItNC42LTQuNWMwLjEtNi41LDAtMTMsMC0xOS41YzAtMi45LDEuNi00LjUsNC41LTQuNWMxMC4zLDAsMjAuNywwLDMxLDAgICBjMi44LDAsNC42LDIsNC41LDQuNWMtMC4xLDYuNS0wLjEsMTMsMCwxOS42YzAsMi42LTIsNC41LTQuNCw0LjVDOTUuMiw3OS4zLDkwLDc5LjQsODQuOCw3OS40eiIvPgoJPC9nPgo8cGF0aCBkPSJNODAuOSwzMi4zYzEuMy0yLjMsMi42LTQuNSwzLjktNi44YzEuMywyLjMsMi42LDQuNSwzLjksNi44Qzg2LjEsMzIuMyw4My41LDMyLjMsODAuOSwzMi4zeiIgY2xhc3M9InN0MCIvPgo8cGF0aCBkPSJNODQuOCw2OC42Yy0xLjQtMi40LTIuNi00LjYtNC02LjljMi43LDAsNS4yLDAsNy45LDBDODcuNCw2NCw4Ni4yLDY2LjIsODQuOCw2OC42eiIgY2xhc3M9InN0MCIvPgo8L3N2Zz4=) no-repeat center;
}

.ui-popover .keyboard-arrows-left-right-filled {
	background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxNS4wMDY2MTgzNjI4MzE4NTcgNDkuNzgyNDAwMDAwMDAwMDEgODguOTQ5MTE1MDQ0MjQ3NzggMzEuMzk2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaWQ9IkxheWVyXzEiIHN0eWxlPSJtYXgtaGVpZ2h0OiA1MDBweCIgd2lkdGg9Ijg4Ljk0OTExNTA0NDI0Nzc4IiBoZWlnaHQ9IjMxLjM5NiI+CiAgCiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0zNy4xLDc5LjRoLTE1LjdjLTIuNywwLTQuNC0xLjctNC40LTQuM3YtMTkuOWMwLTIuNiwxLjctNC4zLDQuMy00LjNoMzEuNWMyLjYsMCw0LjMsMS43LDQuMyw0LjN2MjBjMCwyLjUtMS43LDQuMi00LjIsNC4yLTUuMiwwLTEwLjUsMC0xNS44LDBaIi8+CiAgPGc+CiAgICA8cGF0aCBkPSJNODIsNzkuNDVoLTE1LjdjLTIuNywwLTQuNC0xLjctNC40LTQuNHYtMTkuN2MwLTIuNiwxLjctNC40LDQuNC00LjRoMzEuM2MyLjgsMCw0LjUsMS43LDQuNSw0LjV2MjAuM2MtLjIsMi4yLTEuOSwzLjctNC4xLDMuNy01LjQsMC0xMC43LDAtMTYsMFoiLz4KICAgIDxwYXRoIGQ9Ik03OS41LDYxLjI1YzIuMywxLjMsNC41LDIuNiw2LjgsMy45LTIuMywxLjMtNC41LDIuNi02LjgsMy45di03LjhaIiBjbGFzcz0ic3QwIi8+CiAgPC9nPgogIDxwYXRoIGQ9Ik0zOS42LDY5LjFjLTIuMy0xLjMtNC41LTIuNi02LjgtMy45LDIuMy0xLjMsNC41LTIuNiw2LjgtMy45djcuOFoiIGNsYXNzPSJzdDAiLz4KPC9zdmc+) no-repeat center;
}

.ui-popover .keyboard-arrows-filled {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNzAgOTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE3MCA5NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggZD0iTTEzMi42LDc5LjRjLTUuMiwwLTEwLjQsMC0xNS43LDBjLTIuNywwLTQuNC0xLjctNC40LTQuNGMwLTYuNiwwLTEzLjEsMC0xOS43YzAtMi42LDEuNy00LjQsNC40LTQuNGMxMC40LDAsMjAuOCwwLDMxLjMsMA0KCQljMi44LDAsNC41LDEuNyw0LjUsNC41YzAsNi4xLDAsMTIuMywwLDE4LjRjMCwwLjYsMCwxLjIsMCwxLjljLTAuMiwyLjItMS45LDMuNy00LjEsMy43QzE0My4yLDc5LjQsMTM3LjksNzkuNCwxMzIuNiw3OS40eiIvPg0KCTxwYXRoIGQ9Ik04NC44LDE0LjZjNS4yLDAsMTAuMywwLjEsMTUuNSwwYzIuNywwLDQuNiwxLjksNC42LDQuNWMtMC4xLDYuNSwwLDEzLjEsMCwxOS42YzAsMi43LTEuNyw0LjQtNC40LDQuNA0KCQljLTEwLjQsMC0yMC44LDAtMzEuMywwYy0yLjcsMC00LjQtMS43LTQuNC00LjRjMC02LjYsMC0xMy4yLDAtMTkuOWMwLTIuNiwxLjctNC4zLDQuMy00LjNDNzQuMywxNC42LDc5LjUsMTQuNiw4NC44LDE0LjZ6Ii8+DQoJPHBhdGggZD0iTTg0LjgsNzkuNGMtNS4yLDAtMTAuMy0wLjEtMTUuNSwwYy0yLjcsMC4xLTQuNi0yLTQuNi00LjVjMC4xLTYuNSwwLTEzLDAtMTkuNWMwLTIuOSwxLjYtNC41LDQuNS00LjVjMTAuMywwLDIwLjcsMCwzMSwwDQoJCWMyLjgsMCw0LjYsMiw0LjUsNC41Yy0wLjEsNi41LTAuMSwxMywwLDE5LjZjMCwyLjYtMiw0LjUtNC40LDQuNUM5NS4yLDc5LjMsOTAsNzkuNCw4NC44LDc5LjR6Ii8+DQoJPHBhdGggZD0iTTM3LjEsNzkuNGMtNS4yLDAtMTAuNCwwLTE1LjcsMGMtMi43LDAtNC40LTEuNy00LjQtNC4zYzAtNi42LDAtMTMuMiwwLTE5LjljMC0yLjYsMS43LTQuMyw0LjMtNC4zYzEwLjUsMCwyMSwwLDMxLjUsMA0KCQljMi42LDAsNC4zLDEuNyw0LjMsNC4zYzAsNi43LDAsMTMuMywwLDIwYzAsMi41LTEuNyw0LjItNC4yLDQuMkM0Ny43LDc5LjQsNDIuNCw3OS40LDM3LjEsNzkuNHoiLz4NCjwvZz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04MC45LDMyLjNjMS4zLTIuMywyLjYtNC41LDMuOS02LjhjMS4zLDIuMywyLjYsNC41LDMuOSw2LjhDODYuMSwzMi4zLDgzLjUsMzIuMyw4MC45LDMyLjN6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTMwLjEsNjEuMmMyLjMsMS4zLDQuNSwyLjYsNi44LDMuOWMtMi4zLDEuMy00LjUsMi42LTYuOCwzLjlDMTMwLjEsNjYuNCwxMzAuMSw2My44LDEzMC4xLDYxLjJ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzkuNiw2OS4xYy0yLjMtMS4zLTQuNS0yLjYtNi44LTMuOWMyLjMtMS4zLDQuNS0yLjYsNi44LTMuOUMzOS42LDYzLjgsMzkuNiw2Ni40LDM5LjYsNjkuMXoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04NC44LDY4LjZjLTEuNC0yLjQtMi42LTQuNi00LTYuOWMyLjcsMCw1LjIsMCw3LjksMEM4Ny40LDY0LDg2LjIsNjYuMiw4NC44LDY4LjZ6Ii8+DQo8L3N2Zz4NCg==) no-repeat center;
}

.ui-popover .keyboard-arrows-outlined {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNzAgOTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE3MCA5NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTE0MS44LDc5LjljLTEuNSwwLTMsMC00LjUsMGwtNi44LDBjLTQuNSwwLTksMC0xMy40LDBjLTMsMC00LjktMS45LTQuOS00LjljMC02LjYsMC0xMy4xLDAtMTkuN2MwLTIuOSwyLTQuOSw0LjktNC45DQoJCQkJYzEwLjQsMCwyMC44LDAsMzEuMywwYzMuMSwwLDUsMS45LDUsNWMwLDUsMCw5LjksMCwxNC45bDAsMy43YzAsMC41LDAsMS4xLTAuMSwxLjdjLTAuMiwyLjUtMi4xLDQuMi00LjYsNC4yDQoJCQkJQzE0Ni40LDc5LjksMTQ0LjEsNzkuOSwxNDEuOCw3OS45eiBNMTMyLjgsNzguOWw0LjUsMGMzLjgsMCw3LjYsMCwxMS40LDBjMiwwLDMuNC0xLjMsMy42LTMuM2MwLTAuNSwwLTEsMC0xLjZsMC0zLjcNCgkJCQljMC01LDAtOS45LDAtMTQuOWMwLTIuNi0xLjQtNC00LTRjLTEwLjQsMC0yMC44LDAtMzEuMywwYy0yLjQsMC0zLjksMS41LTMuOSwzLjljMCw2LjYsMCwxMy4xLDAsMTkuN2MwLDIuNSwxLjUsMy45LDMuOSwzLjkNCgkJCQljNC41LDAsOSwwLDEzLjQsMEgxMzIuOHoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik04NC4zLDQzLjdjLTUsMC0xMCwwLTE1LDBjLTIuOSwwLTQuOS0yLTQuOS00LjljMC02LjYsMC0xMy4yLDAtMTkuOWMwLTIuOSwxLjktNC44LDQuOC00LjhjMy43LDAsNy40LDAsMTEuMSwwbDQuNSwwDQoJCQkJYzEuNSwwLDMsMCw0LjUsMGMzLjYsMCw3LjMsMCwxMSwwYzEuNCwwLDIuNywwLjUsMy42LDEuNGMwLjksMC45LDEuNCwyLjIsMS40LDMuNmMtMC4xLDQuNi0wLjEsOS4zLDAsMTMuOGMwLDEuOSwwLDMuOSwwLDUuOA0KCQkJCWMwLDMtMS45LDQuOS00LjksNC45Qzk1LjEsNDMuNyw4OS43LDQzLjcsODQuMyw0My43eiBNNzUuOCwxNS4xYy0yLjIsMC00LjQsMC02LjYsMGMtMi4zLDAtMy44LDEuNS0zLjgsMy44YzAsNi42LDAsMTMuMiwwLDE5LjkNCgkJCQljMCwyLjQsMS41LDMuOSwzLjksMy45YzEwLjQsMCwyMC44LDAsMzEuMywwYzIuNCwwLDMuOS0xLjUsMy45LTMuOWMwLTEuOSwwLTMuOSwwLTUuOGMwLTQuNSwwLTkuMiwwLTEzLjhjMC0xLjEtMC40LTIuMi0xLjEtMi45DQoJCQkJYy0wLjctMC43LTEuOC0xLjEtMi45LTEuMWMtMy43LDAuMS03LjQsMC0xMSwwYy0xLjUsMC0zLDAtNC41LDBsLTQuNSwwQzc4LjgsMTUuMSw3Ny4zLDE1LjEsNzUuOCwxNS4xeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTY5LjMsNzkuOWMtMS40LDAtMi42LTAuNS0zLjUtMS40Yy0wLjktMC45LTEuNS0yLjItMS40LTMuNmMwLjEtNC41LDAtOS4xLDAtMTMuNmMwLTIsMC0zLjksMC01LjljMC0zLjEsMS45LTUsNS01bDksMA0KCQkJCWM3LjIsMCwxNC43LDAsMjIsMGMxLjQsMCwyLjcsMC41LDMuNywxLjRjMC45LDAuOSwxLjQsMi4yLDEuNCwzLjZjLTAuMSw2LjUtMC4xLDEzLDAsMTkuNWMwLDEuNC0wLjUsMi42LTEuNCwzLjYNCgkJCQljLTAuOSwwLjktMi4yLDEuNC0zLjUsMS40Yy0zLjctMC4xLTcuNC0wLjEtMTEsMGMtMS41LDAtMywwLTQuNSwwbDAsMGMtMS41LDAtMy4xLDAtNC42LDBjLTMuNiwwLTcuMywwLTEwLjksMA0KCQkJCUM2OS40LDc5LjksNjkuMyw3OS45LDY5LjMsNzkuOXogTTY5LjQsNTEuNGMtMi42LDAtNCwxLjQtNCw0YzAsMiwwLDMuOSwwLDUuOWMwLDQuNSwwLDkuMSwwLDEzLjZjMCwxLjEsMC40LDIuMiwxLjEsMi45DQoJCQkJYzAuNywwLjcsMS44LDEuMSwyLjksMS4xYzMuNi0wLjEsNy4zLTAuMSwxMC45LDBjMS41LDAsMy4xLDAsNC42LDBsMCwwYzEuNSwwLDMsMCw0LjUsMGMzLjYsMCw3LjQsMCwxMS4xLDBjMCwwLDAuMSwwLDAuMSwwDQoJCQkJYzEsMCwyLTAuNCwyLjctMS4xYzAuNy0wLjcsMS4xLTEuNywxLjEtMi45Yy0wLjEtNi41LTAuMS0xMy4xLDAtMTkuNmMwLTEuMS0wLjQtMi4yLTEuMS0yLjljLTAuNy0wLjctMS44LTEuMS0yLjktMS4xDQoJCQkJYy03LjMsMC0xNC44LDAtMjIsMEw2OS40LDUxLjR6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNNDYuMyw3OS45Yy0xLjUsMC0zLDAtNC41LDBsLTQuNSwwbC0yLjYsMGMtNC40LDAtOC43LDAtMTMuMSwwYy0zLDAtNC45LTEuOS00LjktNC44YzAtNi42LDAtMTMuMiwwLTE5LjkNCgkJCQljMC0yLjksMS45LTQuOCw0LjgtNC44YzEwLjUsMCwyMSwwLDMxLjUsMGMyLjksMCw0LjgsMS45LDQuOCw0LjhjMCw2LjcsMCwxMy4zLDAsMjBjMCwyLjgtMS45LDQuNy00LjcsNC43DQoJCQkJQzUwLjgsNzkuOSw0OC41LDc5LjksNDYuMyw3OS45eiBNMzcuMiw3OC45bDQuNSwwYzMuOCwwLDcuNSwwLDExLjMsMGMyLjIsMCwzLjctMS41LDMuNy0zLjdjMC02LjcsMC0xMy4zLDAtMjANCgkJCQljMC0yLjMtMS41LTMuOC0zLjgtMy44Yy0xMC41LDAtMjEsMC0zMS41LDBjLTIuMywwLTMuOCwxLjUtMy44LDMuOGMwLDYuNiwwLDEzLjIsMCwxOS45YzAsMi40LDEuNCwzLjgsMy45LDMuOA0KCQkJCWM0LjQsMCw4LjcsMCwxMy4xLDBMMzcuMiw3OC45eiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxwYXRoIGQ9Ik04MSwzMi4zYzEuMy0yLjMsMi42LTQuNSwzLjktNi44YzEuMywyLjMsMi42LDQuNSwzLjksNi44Qzg2LjIsMzIuMyw4My42LDMyLjMsODEsMzIuM3oiLz4NCgk8cGF0aCBkPSJNMTMwLjMsNjEuMmMyLjMsMS4zLDQuNSwyLjYsNi44LDMuOWMtMi4zLDEuMy00LjUsMi42LTYuOCwzLjlDMTMwLjMsNjYuNCwxMzAuMyw2My44LDEzMC4zLDYxLjJ6Ii8+DQoJPHBhdGggZD0iTTM5LjcsNjkuMWMtMi4zLTEuMy00LjUtMi42LTYuOC0zLjljMi4zLTEuMyw0LjUtMi42LDYuOC0zLjlDMzkuNyw2My44LDM5LjcsNjYuNCwzOS43LDY5LjF6Ii8+DQoJPHBhdGggZD0iTTg0LjksNjguNmMtMS40LTIuNC0yLjYtNC42LTQtNi45YzIuNywwLDUuMiwwLDcuOSwwQzg3LjUsNjQsODYuMyw2Ni4yLDg0LjksNjguNnoiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat center;
}

.ui-popover .ctrl-filled {
	background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxMS45OTI3MzUwNTY1NDI4MTMgMTEuNzU0ODY1OTggNDQuNjk5NTE1MzQ3MzM0NDA1IDMzLjAxNTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaWQ9IkxheWVyXzEiIHN0eWxlPSJtYXgtaGVpZ2h0OiA1MDBweCIgd2lkdGg9IjQ0LjY5OTUxNTM0NzMzNDQwNSIgaGVpZ2h0PSIzMy4wMTU4NCI+CiAgCiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0zNC40NSwxMy42OGM1LjIsMCwxMC4zLjEsMTUuNSwwLDIuNywwLDQuNiwxLjksNC42LDQuNS0uMSw2LjUsMCwxMy4xLDAsMTkuNiwwLDIuNy0xLjcsNC40LTQuNCw0LjRoLTMxLjNjLTIuNywwLTQuNC0xLjctNC40LTQuNHYtMTkuOWMwLTIuNiwxLjctNC4zLDQuMy00LjMsNS4zLjEsMTAuNS4xLDE1LjcuMVoiLz4KICA8Zz4KICAgIDxwYXRoIGQ9Ik0yOC4wMSwzMi45NGMtLjcsMC0xLjM1LS4xMy0xLjk1LS4zOC0uNi0uMjUtMS4xMi0uNjEtMS41Ny0xLjA2LS40NS0uNDYtLjc5LS45OS0xLjA0LTEuNi0uMjUtLjYxLS4zNy0xLjI4LS4zNy0yLjAxcy4xMi0xLjQuMzctMi4wMmMuMjUtLjYyLjU5LTEuMTUsMS4wNC0xLjYuNDUtLjQ1Ljk3LS44LDEuNTctMS4wNS42LS4yNSwxLjI1LS4zNywxLjk2LS4zN3MxLjM1LjEyLDEuOTEuMzUsMS4wNC41NSwxLjQ0Ljk1Yy4zOS4zOS42Ny44My44NCwxLjMxbC0xLjguODdjLS4xNy0uNDctLjQ2LS44Ni0uODctMS4xOC0uNDItLjMxLS45Mi0uNDctMS41Mi0uNDdzLTEuMDkuMTQtMS41Mi40MWMtLjQ0LjI3LS43OC42NS0xLjAyLDEuMTItLjI0LjQ4LS4zNiwxLjA0LS4zNiwxLjY3cy4xMiwxLjIuMzYsMS42OGMuMjQuNDguNTguODYsMS4wMiwxLjEzLjQ0LjI3Ljk1LjQxLDEuNTIuNDFzMS4xLS4xNiwxLjUyLS40N2MuNDItLjMxLjcxLS43Ljg3LTEuMThsMS44Ljg3Yy0uMTcuNDgtLjQ1LjkyLS44NCwxLjMxLS4zOS4zOS0uODcuNzEtMS40NC45NS0uNTYuMjQtMS4yLjM1LTEuOTEuMzVaIiBjbGFzcz0ic3QwIi8+CiAgICA8cGF0aCBkPSJNMzYuODEsMzIuODZjLS44NywwLTEuNTQtLjIzLTIuMDItLjctLjQ4LS40Ny0uNzItMS4xMi0uNzItMS45NnYtMi44OGgtMS4yMXYtMS43MWguMDdjLjM3LDAsLjY1LS4wOS44NS0uMjhzLjMtLjQ2LjMtLjgzdi0uNTNoMS45N3YxLjYzaDEuNjh2MS43MWgtMS42OHYyLjc1YzAsLjI1LjA0LjQ1LjEzLjYxLjA5LjE2LjIyLjI4LjQxLjM2LjE4LjA4LjQxLjEyLjY4LjEyLjA2LDAsLjEzLDAsLjIxLS4wMS4wOCwwLC4xNi0uMDIuMjUtLjAzdjEuNjdjLS4xMy4wMi0uMjguMDMtLjQ1LjA1LS4xNy4wMi0uMzIuMDMtLjQ3LjAzWiIgY2xhc3M9InN0MCIvPgogICAgPHBhdGggZD0iTTM4Ljg5LDMyLjc4di03LjE3aDEuODR2MS43MmwtLjEzLS4yNWMuMTYtLjYuNDItMS4wMS43OC0xLjIzLjM2LS4yMS43OS0uMzIsMS4yOS0uMzJoLjQydjEuNzFoLS42MmMtLjQ4LDAtLjg3LjE1LTEuMTcuNDQtLjMuMjktLjQ1LjcxLS40NSwxLjI0djMuODZoLTEuOTdaIiBjbGFzcz0ic3QwIi8+CiAgICA8cGF0aCBkPSJNNDMuOTYsMzIuNzh2LTkuOTRoMS45N3Y5Ljk0aC0xLjk3WiIgY2xhc3M9InN0MCIvPgogIDwvZz4KPC9zdmc+) no-repeat center;
}

.ui-popover .add-plus-right {
	position: relative;
}

.ui-popover .add-plus-right::after {
	content: "+";
	font-size: 32px;
	font-weight: 400;
	position: absolute;
	top: -15px;
	right: -35px;
	color: black;
}

.ui-popover .keyboard-plus-minus-filled,
.ui-popover .keyboard-plus-minus-outlined {
	background-size: contain;
	display: inline-block;
	width: 69px;
	height: 94px;
}

.ui-popover .ctrl-filled {
	background-size: contain;
	display: inline-block;
	width: 46px;
	height: 38px;
	margin-right: 10px;
}

.ui-popover .keyboard-arrows-up-down-filled {
	background-size: contain;
	display: inline-block;
	width: 50px;
	height: 70px;
}

.keyboard-arrows-left-right-filled {
	background-size: contain;
	display: inline-block;
	width: 178px;
	height: 50px;
}

.ui-popover .keyboard-plus-minus-filled {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2OSA5NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjkgOTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxwYXRoIGQ9Ik0zNC4zLDUyLjNjNS4yLDAsMTAuMywwLjEsMTUuNSwwYzIuNywwLDQuNiwxLjksNC42LDQuNWMtMC4xLDYuNSwwLDEzLjEsMCwxOS42YzAsMi43LTEuNyw0LjQtNC40LDQuNA0KCWMtMTAuNCwwLTIwLjgsMC0zMS4zLDBjLTIuNywwLTQuNC0xLjctNC40LTQuNGMwLTYuNiwwLTEzLjIsMC0xOS45YzAtMi42LDEuNy00LjMsNC4zLTQuM0MyMy45LDUyLjMsMjkuMSw1Mi4zLDM0LjMsNTIuM3oiLz4NCjxyZWN0IHg9IjI4LjkiIHk9IjY1LjciIGNsYXNzPSJzdDAiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxLjciLz4NCjxwYXRoIGQ9Ik0zNC4zLDEzLjJjNS4yLDAsMTAuMywwLjEsMTUuNSwwYzIuNywwLDQuNiwxLjksNC42LDQuNWMtMC4xLDYuNSwwLDEzLjEsMCwxOS42YzAsMi43LTEuNyw0LjQtNC40LDQuNA0KCWMtMTAuNCwwLTIwLjgsMC0zMS4zLDBjLTIuNywwLTQuNC0xLjctNC40LTQuNGMwLTYuNiwwLTEzLjIsMC0xOS45YzAtMi42LDEuNy00LjMsNC4zLTQuM0MyMy45LDEzLjIsMjkuMSwxMy4yLDM0LjMsMTMuMnoiLz4NCjxyZWN0IHg9IjI4LjkiIHk9IjI2LjYiIGNsYXNzPSJzdDAiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxLjciLz4NCjxyZWN0IHg9IjI4LjkiIHk9IjI2LjYiIHRyYW5zZm9ybT0ibWF0cml4KC0xLjgzNjk3MGUtMTYgMSAtMSAtMS44MzY5NzBlLTE2IDYxLjg1NDMgLTYuODk1NykiIGNsYXNzPSJzdDAiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxLjciLz4NCjwvc3ZnPg0K) no-repeat center;
}

.ui-popover .keyboard-plus-minus-outlined {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2OSA5NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjkgOTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zMy4zLDgxLjNjLTQuOCwwLTkuNywwLTE0LjUsMGMtMi45LDAtNC45LTItNC45LTQuOWMwLTYuNiwwLTEzLjIsMC0xOS45YzAtMi45LDEuOS00LjgsNC44LTQuOGMzLjcsMCw3LjQsMCwxMS4xLDBsNC42LDANCgkJYzEuNSwwLDMsMCw0LjUsMGMzLjYsMCw3LjMsMCwxMSwwYzEuNCwwLDIuNywwLjUsMy43LDEuNGMwLjksMC45LDEuNCwyLjIsMS40LDMuNmMtMC4xLDQuNi0wLjEsOS4zLDAsMTMuOGMwLDEuOSwwLDMuOSwwLDUuOA0KCQljMCwzLTEuOSw0LjktNC45LDQuOUM0NC40LDgxLjMsMzguOCw4MS4zLDMzLjMsODEuM3ogTTI1LjIsNTIuOGMtMi4yLDAtNC40LDAtNi41LDBjLTIuMywwLTMuOCwxLjUtMy44LDMuOGMwLDYuNiwwLDEzLjIsMCwxOS45DQoJCWMwLDIuNCwxLjUsMy45LDMuOSwzLjljMTAuNCwwLDIwLjgsMCwzMS4zLDBjMi40LDAsMy45LTEuNSwzLjktMy45YzAtMS45LDAtMy44LDAtNS44YzAtNC41LDAtOS4yLDAtMTMuOWMwLTEuMS0wLjQtMi4yLTEuMS0yLjkNCgkJYy0wLjctMC43LTEuOC0xLjEtMi45LTEuMWMtMy43LDAuMS03LjQsMC0xMSwwYy0xLjUsMC0zLDAtNC41LDBsLTQuNiwwQzI4LjMsNTIuOCwyNi43LDUyLjgsMjUuMiw1Mi44eiIvPg0KPC9nPg0KPHJlY3QgeD0iMjguOSIgeT0iNjUuNyIgd2lkdGg9IjExIiBoZWlnaHQ9IjEuNyIvPg0KPGc+DQoJPHBhdGggZD0iTTMzLjgsNDIuM2MtNSwwLTEwLDAtMTUsMGMtMi45LDAtNC45LTItNC45LTQuOWMwLTYuNiwwLTEzLjIsMC0xOS45YzAtMi45LDEuOS00LjgsNC44LTQuOGMzLjcsMCw3LjQsMCwxMS4xLDBsNC41LDANCgkJYzEuNSwwLDMsMCw0LjUsMGMzLjYsMCw3LjMsMCwxMSwwYzEuNSwwLDIuNywwLjUsMy43LDEuNGMwLjksMC45LDEuNCwyLjIsMS40LDMuNmMtMC4xLDQuNi0wLjEsOS4zLDAsMTMuOWMwLDEuOSwwLDMuOSwwLDUuOA0KCQljMCwzLTEuOSw0LjktNC45LDQuOUM0NC42LDQyLjMsMzkuMiw0Mi4zLDMzLjgsNDIuM3ogTTI1LjMsMTMuN2MtMi4yLDAtNC40LDAtNi42LDBjLTIuMywwLTMuOCwxLjUtMy44LDMuOGMwLDYuNiwwLDEzLjIsMCwxOS45DQoJCWMwLDIuNCwxLjUsMy45LDMuOSwzLjljMTAuNCwwLDIwLjgsMCwzMS4zLDBjMi40LDAsMy45LTEuNSwzLjktMy45YzAtMS45LDAtMy44LDAtNS44YzAtNC41LDAtOS4yLDAtMTMuOWMwLTEuMS0wLjQtMi4yLTEuMS0yLjkNCgkJYy0wLjctMC43LTEuOC0xLjEtMi45LTEuMWMtMy43LDAuMS03LjQsMC0xMSwwYy0xLjUsMC0zLDAtNC41LDBsLTQuNSwwQzI4LjMsMTMuNywyNi44LDEzLjcsMjUuMywxMy43eiIvPg0KPC9nPg0KPHJlY3QgeD0iMjguOSIgeT0iMjYuNiIgd2lkdGg9IjExIiBoZWlnaHQ9IjEuNyIvPg0KPHJlY3QgeD0iMjguOSIgeT0iMjYuNiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEuODM2OTcwZS0xNiAxIC0xIC0xLjgzNjk3MGUtMTYgNjEuODU0MyAtNi44OTU3KSIgd2lkdGg9IjExIiBoZWlnaHQ9IjEuNyIvPg0KPC9zdmc+DQo=) no-repeat center;
}

/* interactive guide layout adjustments for short viewport heights */
@media only screen and (max-height: 680px) {

	.interactive-guide-button-container {
		width: 50px;
		bottom: 30px;
	}
	
	.ui-popover > .ui-popover-content p {
		margin: 0 0 10px;
	}

	.ui-popover > .ui-popover-content p.introduction {
		margin-bottom: 7px;
	}
	
	.ui-popover > .ui-popover-content .flex-row > .flex-column {
		padding: 3px 15px;
	}
	
	.ui-popover > .ui-popover-content .flex-row.vertical-border .flex-column:nth-child(2)  {
		padding: 3px 15px;
	}

}

/* dark mode color overides */
body.interactive-guide-visible.dark-mode .body-backdrop {
	background-color: transparent;
}

body.interactive-guide-visible.dark-mode .ui-popover {
	background-color: rgba(0,0,0,0.9);
	color: white;
	filter: none;
	border: none;
}

body.interactive-guide-visible.dark-mode .ui-popover,
body.interactive-guide-visible.dark-mode .ui-popover p {
	font-weight: 500;
}

body.interactive-guide-visible.dark-mode .ui-popover > .ui-popover-content h2 {
	color: white;
}

body.interactive-guide-visible.dark-mode .ui-popover .btn-monochrome {
	color: white;
}

body.interactive-guide-visible.dark-mode .ui-popover > .ui-popover-content hr {
	background-color: rgba(255,255,255,0.5);
}

body.interactive-guide-visible.dark-mode .ui-popover .btn-dark {
	color: black;
	background-color: white;
}

body.interactive-guide-visible.dark-mode .ui-popover .btn-close {
	color: white;
}

body.interactive-guide-visible.dark-mode .ui-popover .btn-monochrome {
	background: transparent;
	border-color: white;
}

body.interactive-guide-visible.dark-mode .ui-popover > .ui-popover-nav > .ui-popover-dot {
	background: rgba(255,255,255,0.5);
}

body.interactive-guide-visible.dark-mode .ui-popover > .ui-popover-nav > .ui-popover-dot.is-active {
	background: rgba(255,255,255,1);
}

body.interactive-guide-visible.dark-mode .ui-popover > .ui-popover-caption {
	color: rgba(255,255,255,0.65);
}

body.interactive-guide-visible.dark-mode .ui-popover .ctrl-filled,
body.interactive-guide-visible.dark-mode .ui-popover .keyboard-arrows-up-down-filled,
body.interactive-guide-visible.dark-mode .ui-popover .keyboard-arrows-left-right-filled,
body.interactive-guide-visible.dark-mode .ui-popover .keyboard-arrows-filled,
body.interactive-guide-visible.dark-mode .ui-popover .keyboard-arrows-outlined,
body.interactive-guide-visible.dark-mode .ui-popover .keyboard-plus-minus-filled,
body.interactive-guide-visible.dark-mode .ui-popover .keyboard-plus-minus-outlined {
	filter: invert(100%);
}

/* arrow center top */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.center-top::after {
	border-bottom: 20px solid rgba(0,0,0,0.9);
}

/* arrow center right */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.center-right::after {
	border-bottom: 20px solid rgba(0,0,0,0.9);
}

/* arrow left top */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.left-top::after {
	border-right: 20px solid rgba(0,0,0,0.9);
}

/* arrow left middle */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.left-middle::after {
	border-right: 20px solid rgba(0,0,0,0.9);
}

/* arrow left bottom */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.left-bottom::after {
	border-right: 20px solid rgba(0,0,0,0.9);
}

/* arrow bottom middle */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.center-bottom::after {
	border-top: 20px solid rgba(0,0,0,0.9);
}

/* arrow right top */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.right-top::after {
	border-left: 20px solid rgba(0,0,0,0.9);
}

/* arrow right middle */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.right-middle::after {
	border-left: 20px solid rgba(0,0,0,0.9);
}

/* arrow right bottom */
body.interactive-guide-visible.dark-mode .ui-popover.arrow.right-bottom::after {
	border-left: 20px solid rgba(0,0,0,0.9);
}