/**
 * Fonts.
 */
:root {
    --primary-color: #facb00;
    --primary-hover: color-mix(in srgb, var(--primary-color) 20%, white 80%);
    --primary-selected: color-mix(in srgb, var(--primary-color) 45%, white 55%);
}

.test {
    color: var(--primary-color);
}

@font-face {
	font-family: 'GTCinetype';
	src:
		url('./fonts/GTCinetypeLight.woff2') format('woff2'),
		url('./fonts/GTCinetypeLight.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: auto;
}
@font-face {
	font-family: 'GTCinetype';
	src:
		url('./fonts/GTCinetypeRegular.woff2') format('woff2'),
		url('./fonts/GTCinetypeRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
}
@font-face {
	font-family: 'GTCinetypeMono';
	src:
		url('./fonts/GTCinetypeMono.woff2') format('woff2'),
		url('./fonts/GTCinetypeMono.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: auto;
}
@font-face {
	font-family: 'GTCinetype';
	src:
		url('./fonts/GTCinetypeRegular-Italic.woff2') format('woff2'),
		url('./fonts/GTCinetypeRegular-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: auto;
}
@font-face {
	font-family: 'GTCinetype';
	src:
		url('./fonts/GTCinetypeLight-Italic.woff2') format('woff2'),
		url('./fonts/GTCinetypeLight-Italic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: auto;
}
@font-face {
	font-family: 'GTCinetype';
	src:
		url('./fonts/GTCinetypeBold.woff2') format('woff2'),
		url('./fonts/GTCinetypeBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: auto;
}
@font-face {
	font-family: 'GTCinetype';
	src:
		url('./fonts/GTCinetypeBold-Italic.woff2') format('woff2'),
		url('./fonts/GTCinetypeBold-Italic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: auto;
}

body,
html {
	width: 100vw;
	padding: 0;
	margin: 0;
	background-color: #ffffff;
	font-family: 'GTCinetype', sans-serif;
    overscroll-behavior: none;
	/* font-family: 'Open Sans Light', sans-serif;
    font-family: 'Open Sans Condensed', sans-serif; */
}

button {
	font-family: 'GTCinetype', sans-serif;
}

select {
	font-family: 'GTCinetype', sans-serif;
}

body {
	overflow-x: hidden;
}

a:visited {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	font-family: 'GTCinetype', sans-serif;
}

h3 {
	margin: 0 0 0.5em 0;
}

p {
	margin: 8px 0;
}

select{
    width: 100%;
    padding: 8px 8px;
    border: 1px solid #999;
    border-radius: 4px;
    margin: 2px 0;
    -webkit-appearance: none;
    color: #000;
}

.no_select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flex-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.product-info-modal-container {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    max-width: 750px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.product-info-modal-close-button {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.product-info-container {
    position: relative;
    display: inline-block;
}

.product-info-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #666;
    background: #fff;
    color: black;
    cursor: pointer;
    margin: 0 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    position: relative;
}

.product-info-section {
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #ebebeb;
}

.product-info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.product-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.product-info-square {
    width: 40px;
    height: 40px;
    background-color: #dedede;
    border-radius: 4px;
    flex-shrink: 0;
}


.product-info-text {
    flex: 1 1 auto; /* allow it to grow and shrink */
    min-width: 0;   /* critical in flex layouts so content can wrap */
    margin-bottom: 0.75rem;
}

.product-info-text h3 {
    margin: 0;
    font-size: 16px;
}

.product-info-text p {
    margin: 4px 0 0 0;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-col {
	flex-direction: column;
}
.flex-row {
	flex-direction: row;
}

.w-full {
	width: 100%;
}
.w-1\/2 {
	width: 50%;
}

.underline {
	text-decoration: underline;
}
.font-normal {
	font-weight: normal;
}
.font-bold {
	font-weight: bold;
}

.text-lg {
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 0;
}

.text-md {
	font-size: 16px;
	line-height: 19px;
}

.text-s {
	font-size: 14px;
	line-height: 19px;
}
.no-button {
	border: 0;
	outline: 0;
	background: none;
	padding: 0;
}

/**
 * Icon
 */
.icon-arrow {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.icon-delete {
    margin: auto 0;
    width: 30px;
    height: 30px;
    margin-top: 10px;
}

.icon-delete:hover {
	filter: invert(29%) sepia(37%) saturate(4162%) hue-rotate(335deg) brightness(78%)
		contrast(115%);
}

.icon-dragdrop {
	border-radius: 100%;
	border: 1px solid #ededed;
	padding: 6px;
	margin-right: 12px;
}

.icon-dragdrop:hover {
	cursor: pointer;
}

.icon-circle {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-radius: 100px;
}

.icon-square {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
}

.icon-dot:after{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100px;
    margin-right: 8px;
    display: inline-block;
    background: var(--primary-color);
    position: relative;
    top: -2px;
    right: -8px;
}
h3.icon-dot {
    margin: 10px 0 8px 0;
}
p {
    font-size: 14px;
}

.radio__button--active .icon-circle:before,
.radio__button .icon-circle:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    border-radius: 100px;
    transform: scale(0.7);
    opacity: 0;
}

.radio__button:hover .icon-circle:before {
	opacity: 0.2;
}
.icon-circle:checked:before,
.radio__button--active .icon-circle:before {
	opacity: 1 !important;
}

.radio__button--active .icon-square:before,
.radio__button .icon-square:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: scale(0.7);
    opacity: 0;
}

.radio__button:hover .icon-square:before {
	opacity: 0.2;
}
.icon-square:checked:before,
.radio__button--active .icon-square:before {
	opacity: 1 !important;
}

/* Mixed: a bar instead of the filled square. */
.icon-square:indeterminate:before {
	opacity: 1 !important;
	transform: scale(0.7, 0.2);
}

/**
 *
 */
#canvas {
    max-height: 100vh;
    width: calc(100% - 420px) !important;
    height: auto !important;
    min-width: 600px;
    min-height: 100vh;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.app__sidebar {
}

#menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.back__button{
    -webkit-appearance: none;
    border-radius: 0;
    display: block;
    border: none;
    text-align: left;
    transition-duration: 0.4s;
    background: none;
    color: #000;
}

.back__button h3 {
	font-size: 20px;
	font-weight: normal;
}
.back__button h3,
.back__button img {
	display: inline-block;
}
.back__button img {
	position: relative;
	top: 6px;
	transform: rotate(180deg);
	margin-right: 16px;
}

#toolbar {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	flex-direction: row;
	z-index: 1;
}

.toolbar__button {
	text-align: center;
	background-color: #ffd11c;
	border: none;
	color: black;
	padding: 12px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin: 4px 2px;
	border-radius: 32px;
}

.toolbar__button:hover {
	background-color: white;
	color: black;
}

.toolbar__huskropp {
	display: flex;
	flex-direction: column;
}

.toolbar__huskropp__rotated {
	display: flex;
	flex-direction: row;
}

.toolbar__huskropp__rotated:not(.rotated) {
	transform: rotate(0deg);
	transition: transform 1s;
}

.toolbar__button {
	height: 50px;
}

.rotated {
	transform: rotate(90deg) translate(45px, 0px);
	transition: transform 1s;
}

.product-toggle__container {
	display: flex;
	flex-direction: row;
}

#product-settings__container > * {
	margin: 30px 0;
}

.hidden {
	visibility: hidden;
}

.card__container {
    padding: 0 0 20px;

}

.card {
	display: flex;
	flex-direction: column;
	margin-right: 50px;
}

.card__image {
	width: 150;
	height: 250;
}

.card__text {
	align-self: center;
}

/**
 * Sidebar classes
 */

#sidebar {
    box-sizing: border-box;
    margin: 20px 0;
    flex-direction: column;
    height: calc(100vh - 40px);
    width: 400px;
    background-color: #fff;
    box-shadow: 1px 1px 7px rgba(0, 0, 2, 0.2);
    border-radius: 16px;
}
.app__sidebar {
    position: relative;
}

.sidebar__inner {
	box-sizing: border-box;
	width: 100%;
}

.sidebar__header {
	background-color: #ffffff;
	z-index: 2;
    padding: 15px 24px 0 24px;
	/*position: sticky;*/
	top: 200px;
    overflow-y: scroll;
    min-height:35px;
}
.sidebar__header.overflow-visible {
    overflow-y: visible;
}
.sidebar__content {
    padding: 0 24px 16px 24px;
    overflow-y: scroll;
    flex-grow: 1;
}

/*#menu-content__item {
	margin-bottom: 24px;
}*/

.sidebar__menu {
	padding: 0;
	margin: 0;
}

.sidebar__button{
    display: block;
    border-radius: 100px;
    border: 1px solid;
    outline: 0;
    margin: 16px 0;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    background: #ffffff;
}
.help-modal {
    min-width: 830px;
    /* Never taller than the window: the video shrinks to fit, and anything left over scrolls. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
}
.help-nav-holder {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #DFDAD6;
}
.help-nav {
    display: flex;
    flex-wrap: wrap;
}
.help-modal h3 {
    font-family: 'GTCinetypeMono';
    margin: 0 0 8px 0;
    font-size: 16px;
}
.help-modal .instruction-content {
    display: none;
}
.help-modal a {
    color: #000;
}
.help-modal .instruction-content.active {
    display: block;
}
.help-modal video {
    width: 100%;
    max-width: 100%;
    max-height: 40vh;
}
.help-modal h2 {
    margin-top: 0;
    margin-bottom: 6px;
}
/* The camera and tool guide above the videos, in small print. */
.help-guide {
    font-size: 12px;
    line-height: 1.35;
    /* Camera modes and tools side by side, to keep the dialog short. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}
.help-guide h3 {
    font-size: 13px;
    margin: 4px 0 2px 0;
}
.help-guide p,
.help-guide li {
    font-size: 12px;
    margin: 0 0 2px 0;
}
.help-guide ul {
    margin: 0;
    padding-left: 16px;
    list-style: disc;
}
/* A sub-point, flush with its parent's text. */
.help-guide ul ul {
    margin-top: 2px;
    padding-left: 14px;
    list-style: circle;
}
.help-nav .tab-btn {
    padding: 8px 12px;
    display: inline-block;
    border: 1px solid #000;
    margin-right: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}
.help-nav .tab-btn:last-child {
    margin-right: 0;
}
.help-nav .inner-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.help-nav .select-icon {
    height: 18px;
    width: 18px;
    border: 1px solid #000;
    border-radius: 100%;
    margin-right: 16px;
}
.help-nav .tab-btn.active .select-icon {
    background-color: #000;
    opacity: 1;
}
.help-nav .tab-btn.active:hover .select-icon {
    opacity: 1;
}
.help-nav .tab-btn:hover .select-icon {
    background-color: #000;
    opacity: 0.5;
}
.sidebar__primary_button{
    display: block;
    border-radius: 100px;
    border: none;
    outline: 0;
    /*margin: 18px 0;*/
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    background: var(--primary-color);
    border: var(--primary-color) solid 1px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: #000;
}

.sidebar__primary_button .button_loader {
    margin-left: 10px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--primary-color);
    border-top: 3px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.sidebar__primary_button:hover .button_loader {
    border: 3px solid #000;
    border-top: 3px solid var(--primary-color);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.sidebar__primary_button.inline-flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar__primary_button.transparent {
    background: none;
    border: 1px solid #7b7b7b;
    display: inline-block;
    min-width: 100px;
}
.sidebar__primary_button.transparent:hover {
    background: rgba(252, 234, 162, 0.3);
    border: rgba(252, 234, 162, 0) solid 1px;
    color: #000;
}
.sidebar__primary_button:hover {
    background: var(--primary-hover);
    border: var(--primary-hover) solid 1px;
    color: var(--primary-color);
}

.sidebar__primary_button:hover {
	background: black;
}

.sidebar__footer {
	padding-top: 14px;
	padding-left: 0;
}

.sidebar__price__container {
    background-color: #ffffff;
    padding: 20px 24px 0 24px;
    display: flex;
    align-items: center;
    /*position:sticky;*/
    /*height: 100px;*/
    top: 0px;
    gap:16px;
}

.sidebar__main__button__container {
    background-color: #ffffff;
	display: flex;
	width: 100%;
	justify-content: space-between;
}


/**
 * Buttons
 */
button{
    -webkit-appearance: none;
    border-radius: 0;
    display: block;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
}

/**
 * Menu buttons
 */

.menu__button {
    margin: 0;
    padding: 16px 0;
    -webkit-appearance: none;
    border-radius: 0;
    display: block;
    border: none;
    text-align: left;
    transition-duration: 0.4s;
    background: none;
    border-bottom: 1px solid #EDEDED;
    position: relative;
    width: 100%;
    color: #000;
}

.menu__button:first-child {
	border-top: 1px solid #ededed;
}

.menu__button .text-md {
	margin: 0 0 2px 0;
}

/**
 * Radio buttons
 */
.radio__button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.radio__button .icon-circle {
	appearance: none;
	margin-left: auto;
}

.radio__button .icon-square {
	appearance: none;
	margin-left: auto;
}

/* Free text: the name and its checkbox on one row, the text field below them once checked. */
.free_text_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

.free_text_container > .flex.flex-row.items-center {
	display: contents;
}

.free_text_container .product__name {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	line-height: 19px;
}

.free_text_container > .default__checkbox_container {
	order: 2;
	flex: 0 0 auto;
	width: auto;
}

.free_text_container .text-input-box {
	order: 3;
	flex: 1 1 100%;
	min-width: 0;
	margin-top: 6px;
	box-sizing: border-box;
}

.product-select__container {
	margin-left: 8px;
	border-left: 1px solid #dedede;
	padding-left: 16px;
}

/**
 * Drag & drop buttons
 */
.dragdrop {
    display:flex;
    flex-direction: row;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin: 24px 0;*/
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #E9E9E9;
}

.dragdrop.tool_selected {
    /*box-shadow: 0px 0px 0px 1px #000;*/
    background-color: var(--primary-hover);
    border-radius: 8px;
}

.dragdrop__icon {
	max-width: 48px;
}

.dragdrop__icon.tool_selected {
	border: 1px solid #000;
}

.dragdrop__icon:hover {
	cursor: move;
}

.dragdrop__container {
    margin: 0;
    min-width: 70%;
    padding: 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #000;
}

.dragdrop__preview {
	max-width: 32px;
}

.dragdrop__preview:hover {
	cursor: move;
}

.dragdrop__preview__window,
.dragdrop__preview__door,
.dragdrop__preview__garage_door {
	max-width: 100%;
}

/**
 * Dropdown buttons
 */
.button__dropdown {
	text-align: left;
	width: 100%;
	display: flex;
	align-items: center;
	margin: 24px 0;
	font-size: 16px;
	font-weight: 700;
	shrink: none;
}
.dropdown__content {
	display: none;
}
.dropdown__holder .dropdown__content {
	display: block;
}
.button__dropdown .icon-chevron {
	margin-left: auto;
}

.modal {
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}

.modal-container {
	display: flex;
	flex-basis: auto;
	position: absolute !important;
	flex-direction: column;
	background: white;
	z-index: 100;
	border-radius: 16px;
	top: 50%;
	left: 50%;
	width: auto;
	box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	padding: 30px 24px;
}

.modal-content {
	font-size: 14px;
}

.modal-footer {
	position: absolute;
	bottom: 2px;
	margin-bottom: 10px;
}

.modal-actions {
	display: flex;
	align-items: center;
	justify-content: center;
}

.centered {
	position: sticky;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.searchBar__textbox {
	margin: 0;
	margin-top: 10px;
	border: 3px solid #f3f3f3;
	height: 2rem;
	outline: none;
	box-sizing: border-box;
	padding: 1px 10px;
	transition: 0.2s ease-in-out;
	width: 100%;
	border-radius: 20px;
	padding: 15px;
	font-size: 16px;
}

.searchBar__textbox:focus {
	border: 2px solid rgb(239, 195, 73);
	transition: 0.2s ease-in-out;
	outline: 0;
	border-bottom: 1px solid #e88f14;
	border-radius: 25px;
	padding: 15px;
	font-size: larger;
	background-position: 100% center;
}

.searchBar__textbox::placeholder {
	color: color(#575756 a(0.8));
	text-transform: uppercase;
	letter-spacing: 1.25px;
	font-size: small;
}

.error {
	border: 1px solid red;
}

.error-message {
	color: red;
}

#mode-picker {
   position: absolute;
    top: 20px;
    left: -70px;
}

#alerts-dock {
    pointer-events: none;
    position: absolute;
    top: 20px;
    left: -70px;
    transform: translateX(calc(-100% - 10px));
    z-index: 30;
}

.alerts-dock {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.alerts-dock__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 2px solid #f44336;
    background: #fff;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    white-space: nowrap;
}

.alerts-dock__count {
    font-weight: 700;
}

.alerts-dock__chevron {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease-in-out;
    margin-left: 2px;
}

.alerts-dock__chevron--open {
    transform: rotate(-135deg);
}

.alerts-dock__confirmed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.alerts-dock__confirmed-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #d6d9db;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alerts-dock__card {
    width: 340px;
    max-width: calc(100vw - 140px);
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.alerts-dock__icon {
    grid-row: 1 / span 2;
    /* width: 56px; */
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.alerts-dock__content {
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 0;
}

.alerts-dock__title {
    font-size: 15px;
    font-weight: 600;
}

.alerts-dock__text {
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-weight: 300;
}

.alerts-dock__confirm {
    grid-column: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.alerts-dock__checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.alerts-dock__toggle--external {
    border-color: #d6d9db;
}

@media screen and (min-width: 1024px) {
    .alerts-dock--external {
        padding-top: 64px;
    }
    .alerts-dock--external .alerts-dock__toggle--external {
        position: absolute;
        top: 27px;
        right: calc(var(--save-group-width, 0px) + 10px);
        transform: translateY(-50%);
    }
}
.alerts-dock__toggle-state {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: #1c2a35;
    color: #fff;
    text-transform: uppercase;
}

.alerts-dock__toggle-state.off {
    background: #6b6f75;
}

.alerts-dock__confirmed--inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.alerts-dock__confirm--checked {
    opacity: 0.9;
}

.alerts-dock__checkbox--checked {
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerts-dock__checkbox--checked svg {
    color: currentColor;
}

.mode-picker-inner {
    background: #fff;
    box-shadow: 1px 1px 7px rgba(0, 0, 2, 0.2);
    border-radius: 100px;
    padding: 2px;
    margin-bottom: 10px;
    width: fit-content;
}

.mode-picker-dialog__mobile-item {
    display: none !important;
}
.mode-picker-dialog {
    position: absolute;
    right: 100%;
    top: 0;
    margin: 0 20px;
    z-index: 1000;
    white-space: nowrap;
    width: max-content;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mode-picker__button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: #fff;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    position: relative;
    color: #000;
}
.mode-picker__button:before {
    content: attr(data-tooltip_text);
    position:absolute;
    left: 0;
    top: 50%;
    background:#fff;
    color: #000;
    text-align:center;
    z-index: 2;
    box-shadow: 1px 1px 3px rgba(0, 0, 2, 0.2);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    padding: 4px;
    justify-content: center;
    min-width: 80px;
    transition: all 0.1s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translate(-90%, -50%);
}
.mode-picker__button.small svg {
    max-width: 20px;
}
.mode-picker__button.with-label {
    width: auto;
    gap: 8px;
    padding: 0 16px 0 12px;
    border-radius: 9999px;
}
.mode-picker-inner--save {
    position: absolute;
    right: 100%;
    top: 0;
    margin-right: 10px;
    white-space: nowrap;
    width: max-content;
}
.mode-picker-save-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
.mode-picker-save-group > .mode-picker-inner {
    margin-bottom: 0;
}
.mode-picker__button.with-label span {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.mode-picker__button.mobile-only {
    display: none;
}
.mode-picker__button.smallest svg {
    max-width: 19px;
}
.total-price {
    margin-bottom: 13px;
}
.mode-picker__button[data-tooltip_text]:not([data-tooltip_text=""]):hover:before,
.mode-picker__button.tooltip-active[data-tooltip_text]:not([data-tooltip_text=""]):before {
    opacity: 1;
    transform: translate(-110%, -50%);
}
.mode-picker__button:last-child {
    margin-bottom: 0;
}
.mode-picker__button.selected, .mode-picker__button.selected:hover {
    background: var(--primary-selected);
}
.mode-picker__button:hover {
    background: var(--primary-hover);
}

.mode-picker__button.drag-handle {
    cursor: grab;
}

.mode-picker__button.drag-handle::after {
    content: '';
    position: absolute;
}

.mode-picker__button.inactive svg {
    color: #DDDDDD;
    fill: #DDDDDD;
    transition: all 0.1s ease-in-out;
}

.mode-picker__button.loading {
    cursor: default;
    pointer-events: none;
}

.mode-picker__button.loading svg {
    opacity: 0;
}

.mode-picker__button .icon_loader {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top: 2px solid #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

#truss-selection {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 30px;
}

#truss-selection img {
	filter: brightness(0);
	aspect-ratio: 117/82;
	object-fit: contain;
	width: 117px;
}

#truss-selection__container {
	display: flex;
	/* flex-direction: row;
	justify-content: space-evenly; */
	/* align-items: center; */
    justify-content: space-around;
    align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
	width: 100%;
    gap: 0px 10px;
}

.truss-selection__button {
	align-items: center;
	text-align: center;
	display: flex;
	flex-direction: column;
	/* min-width: fit-content; */
	/* width: 50%; */
    /*vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 117px;
    height: 117px;*/
}

.truss-selection__button:hover {
	cursor: pointer;
}

.truss-selection__button:hover {
    background: rgba(252, 234, 162, 0.3);
}

.truss-selection__selected {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-bottom: 3px solid black;
	background-color: #fce57f;
}

.truss-selection__selected:hover {
	cursor: url('./paintbrush.cur'), auto;
}

.selected {
	background-color: rgb(239, 195, 73);
}

.mode-picker__header {
}

.mode-picker__content {
}

/* ==== Spinner ====  */

.spinner {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ==== Spinner ====  */

  /* ==== Bar ====  */

  .loading-bar-container {
    position: relative;
    background-color: #f3f3f3;
    border-radius: 20px;
    width: 100%;
    height: 20px;
  }

.loading-bar {
	position: absolute;
	background-color: #ffcb00;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	animation: loading 2s infinite;
}

/* ==== Loading Screen ====  */

.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 1000;
}

.loading-screen__items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loading-screen__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    animation: loading-screen-item-in 0.2s ease-out;
}

.loading-screen__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes loading-screen-item-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pdf-link {
	font-size: 16px;
	text-decoration: underline;
	cursor: pointer;
}

.select-box {
    font-size: 13px;
    max-width: 100%;
    width: 100% !important;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #7b7b7b;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"%3E%3Cpath d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 1.1rem auto;
    padding-right: 30px;
}

@keyframes loading {
	0% {
		width: 0;
	}
	50% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}
@keyframes loading {
    0% { width: 0; }
    50% { width: 100%; }
    100% { width: 0; }
  }

.product__colorbox {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display:inline-block;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    margin: 5px;
    position:relative;
    padding:2px; /* Fixes tooltip offset between selected and unselected box */
    border: 1px solid #7B7B7B;
    cursor:pointer;
    transition: all 0.1s ease-in-out;
    &:hover {
        box-shadow: 0px 0px 0px 3px var(--primary-hover);
    }
}

.product__colorbox.selected {
    box-shadow: 0px 0px 0px 5px var(--primary-color);
}

.product__colorbox:before {
    content: attr(data-tooltip_text);
    position:absolute;
    transform:translate(-50%, -100%);
    left: 50%;
    background:#fff;
    color: #000;
    text-align:center;
    z-index: 2;
    box-shadow: 1px 1px 3px rgba(0, 0, 2, 0.2);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    padding: 4px;
    justify-content: center;
    min-width: 80px;
    transition: all 0.1s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translate(0%, -50%);
}

.product__colorbox:hover:before {
    opacity: 1;
    transform: translate(15%, -50%);
}

.product__colorbox.nochoice:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "\274c";
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

  /* ==== Bar ====  */

.items-center {
    align-items: center;
}
.ml-auto {
    margin-left: auto;
}
.justify-between {
    justify-content: space-between;
}
.sidebar__inner, #menu {
    height: 100%;
}
.font-bold {
    font-weight: bold;
}
.mb-4 {
    margin-bottom: 16px;
}
.mb-1 {
    margin-bottom: 4px;
}
.pdf-link {
    display: none;
}
.w-full {
    width: 100%;
}
.temporary-hidden {
    display: none;
}
.main-holder {
    flex-direction: row;
    display: flex;
}
.close-modal {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
}

.prevnext_container {
    margin-top: 10px;
}

.building_body_container {
    padding-top: 12px;
    margin-top: 8px;
}

.price__container {
    min-height: 62px;
}

.menu__product_container {
    margin-bottom: 20px
}

.paint_cursor {
    cursor: url('./paintbrush.cur'), auto;
}

/* The canvas can carry a cursor of its own; while painting it shows the brush too. */
.paint_cursor #canvas {
    cursor: url('./paintbrush.cur'), auto !important;
}

@media screen and (max-width: 1023px) {
    body, html, #root {
        width: 100%;
        height: 100%;
    }
    .main-holder {
        flex-direction: column;
        height: 100%;
    }
    .sidebar__offer_price_wrapper {
        position: fixed;
        bottom: 0;
        left:0;
        right: 0;
        background: #fff;
        z-index: 1;
        padding: 0 16px;
    }
    #canvas {
        max-height: 100dvh;
        width: 100% !important;
        height: 50dvh !important;
        min-height: 50dvh;
        min-width: auto;
    }
    #mode-picker {
        flex-direction: row;
        z-index: 3;
        position: fixed;
        justify-content: space-between;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 10px 0 10px;
        box-sizing: border-box;
    }
    #alerts-dock {
        position: fixed;
        top: 60px;
        right: 10px;
        left: auto;
        z-index: 30;
        transform: translateX(0);
    }
    .alerts-dock__card {
        width: 320px;
        max-width: calc(100vw - 20px);
    }
    .mode-picker__button:before {
        display: none;
    }
    .mode-picker-inner {
        flex-direction: row;
        display: flex;
    }
    /* A pill whose buttons are all hidden or absent on mobile would show as an empty white shape. */
    #mode-picker .mode-picker-inner:not(:has(> :not(.mobile-hidden))) {
        display: none;
    }

    #sidebar {
        width: 100%;
        height: 50dvh;
        max-height: 50dvh;
        padding: 0 16px 0px 16px;
        margin: 0;
        /*overflow-y: scroll;*/
    }

    .sidebar__content {
        padding-right: 16px;
        padding-left: 0;
        margin-right: -16px;
        overflow-y: scroll;
    }

    .app__sidebar {
        height: 50%;
    }
    .sidebar__inner, #menu {
        /*height: auto;*/
    }
    #menu {
        order: 1;
        padding-right: 16px;
    }
    .sidebar__inner {
        padding-bottom: 16px;
    }
    .sidebar__price__container, .sidebar__main__button__container {
        order: 2;
    }

    .sidebar__price__container{
        padding: 0;
    }
    .mobile-hidden {
        display: none;
    }
    .price__container {
        padding-top: 0;
        min-height: 10px;
    }
    .total-price {
        margin-bottom: 0;
    }
    #price__total {
        margin-bottom: 0;
    }
    #price__info {
        font-size: 16px;
    }
    .modal-container {
        width: 100%;
        box-sizing: border-box;
    }
    .modal-title {
        margin: 0;
    }
    .offer-input {
        font-size: 14px;
    }
    .menu__button {
        padding: 10px 0;
    }
    .sidebar__primary_button {
        /*padding: 10px 0;*/
    }
    .back__button h3 {
        margin: 0 0 10px 0;
        font-size: 16px;
        font-weight: bold;
    }
    .icon-dragdrop {
        width: 38px;
    }
    .mode-picker__button {
        width: 40px;
        height: 40px;
    }
    .mode-picker__button.with-label {
        width: auto;
    }
    .mode-picker__button.mobile-only {
        display: flex;
    }
    .truss-selection__button {
        /* width: 112px;
        height: 112px; */
    }
    .help-btn, .help-modal {
        display: none;
    }
    h3.icon-dot {
        font-size: 16px;
    }

    .sidebar__header {
        padding: 0;
        min-height: 50px;
    }

    .back__button {
        padding-top: 5px;
    }
}

.modal-button-container {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.modal-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.modal-button:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

.modal-button::before {
    content: attr(data-tooltip_text);
    position:absolute;
    left: 100%;
    top: 50%;
    background:#fff;
    color: #000;
    text-align:center;
    z-index: 2;
    box-shadow: 1px 1px 3px rgba(0, 0, 2, 0.2);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    padding: 4px;
    justify-content: center;
    min-width: 80px;
    transition: all 0.1s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

.modal-button--tooltip-left::before {
    left: auto;
    right: 100%;
}

.modal-button--tooltip-left:hover::before {
    transform: translateY(-50%) translateX(-5px);
}

.modal-addons__container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: start;
}

.modal-addons__container .menu__addon_text {
    margin: 2px 0;
}

.modal-addons__container .product__colorbox {
    margin: 5px 5px;
}

.product-addons__freetext {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.product-addons__freetext .text-input-box {
    margin: 4px 0;
    padding: 6px 8px;
    font-size: 13px;
    font-family: GTCinetype, sans-serif;
    border: none;
    border-radius: 4px;
    background-color: #f8f7f2;
    box-sizing: border-box;
    width: 100%;
}

.modal-horizontal-line {
    height: 1px;
    background-color: #000;
    opacity: 0.2;
    width: calc(100% + (var(--modal-pad) * 2));
    margin: 3px calc(var(--modal-pad) * -1);
}

.modal-product-gallery {
    position: relative;
}

.modal-product-images {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-product-images::-webkit-scrollbar {
    display: none;
}

.modal-product-images:active {
    cursor: grabbing;
}

.modal-product-gallery-arrow {
    position: absolute;
    top: calc(12px + 75px);
    transform: translateY(-50%);
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 0 2px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    color: #333;
}

.modal-product-gallery-arrow:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.modal-product-gallery-arrow--left {
    left: 6px;
}

.modal-product-gallery-arrow--right {
    right: 6px;
}

.modal-product-images::-webkit-scrollbar {
    height: 4px;
}

.modal-product-images::-webkit-scrollbar-track {
    background: transparent;
}

.modal-product-images::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.modal-product-image-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 200px;
    box-sizing: border-box;
    padding: 8px 8px 12px 8px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    position: relative;
}

.modal-product-image-frame {
    position: relative;
}

.modal-product-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.modal-product-image-expand {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.modal-product-image-wrapper:hover .modal-product-image-expand {
    opacity: 1;
}

.modal-product-image-expand:hover {
    background: rgba(0, 0, 0, 0.65);
}

.modal-product-image-title {
    font-weight: 600;
    font-size: 12px;
    margin: 8px 0 0 0;
    line-height: 1.3;
    color: #222;
}

.modal-product-image-text {
    font-size: 11px;
    color: #666;
    margin: 3px 0 0 0;
    line-height: 1.3;
}

.modal-product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal-product-lightbox-card {
    position: relative;
    background: white;
    padding: 16px 16px 24px 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    width: min(420px, 90vw);
    box-sizing: border-box;
}

.modal-product-lightbox-card img {
    width: 100%;
    max-height: 65vh;
    object-fit: contain;
    display: block;
}

.modal-product-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    padding: 0 0 1px 0;
}

.modal-product-lightbox-close:hover {
    background: #f5f5f5;
}

.modal-measurement-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.modal-measurement-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-measurement-input {
    min-width: 2ch;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: right;
}

.modal-measurement-input:focus {
    outline: none;
    border-bottom: 1px solid #999;
}

.modal-measurement-input::-webkit-outer-spin-button,
.modal-measurement-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal-measurement-input[type="number"] {
    -moz-appearance: textfield;
}

#ordertype-banner {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 29;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1023px) {
    #ordertype-banner {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .mode-picker-dialog__mobile-item {
        display: flex !important;
    }
}

@media screen and (max-width: 1023px) {
  .mode-picker-dialog {
    position: absolute;
    right: auto;
    margin: 0 20px;
    z-index: 1000;
    white-space: nowrap;
    width: max-content;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    left: 0;
    top: 120%;
  }
}

.measurement-slider {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.measurement-slider__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.measurement-slider__value {
    font-weight: 700;
    font-size: 14px;
}
.measurement-slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    --slider-color: #fbc400;
    --slider-track: #e5e5e5;
}
.measurement-slider__input:focus {
    outline: none;
}
.measurement-slider__input::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--slider-color) var(--fill, 0%), var(--slider-track) var(--fill, 0%));
}
.measurement-slider__input::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: var(--slider-track);
}
.measurement-slider__input::-moz-range-progress {
    height: 8px;
    border-radius: 4px;
    background: var(--slider-color);
}
.measurement-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--slider-color);
}
.measurement-slider__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--slider-color);
}
.measurement-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(251, 196, 0, 0.45);
}
.measurement-slider__input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.measurement-slider__range {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    opacity: 0.6;
}

/* InnerWallMenu: one even gap between the wall section and each category. */
.inner-wall-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inner-wall-menu .menu__product_container {
    margin-bottom: 0;
}

/* The next component in the same menu, such as the interior doors, starts the same gap below. */
.inner-wall-menu + * {
    margin-top: 12px;
}

/* The camera on a button of its own, centred above the modes. */
.mode-picker-first-person {
    margin-bottom: 0;
}

/* The camera modes slide out of the camera button as a pill of smaller buttons. Scaled rather than
   clipped open, so the buttons' tooltips are not cut off. */
.mode-picker-camera {
    position: relative;
    width: fit-content;
}

.mode-picker-camera__options {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    display: flex;
    flex-direction: row !important;
    gap: 2px;
    margin: 0;
    transform: translateY(-50%) scaleX(0);
    transform-origin: right center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mode-picker-camera.open .mode-picker-camera__options {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mode-picker-camera__options .mode-picker__button {
    margin: 0;
}

.mode-picker-camera {
    margin: 0 auto 10px;
}

/* The interior tools (cut, measure): a column of smaller buttons left of the modes. */
.mode-picker-stack {
    position: relative;
}

/* Centred on the selected mode (50px buttons in a pill padded 2px) and bridged to it. */
.mode-picker-tools {
    position: absolute;
    right: 100%;
    top: calc(2px + var(--selected-mode, 0) * 50px + 25px - (4px + var(--tool-count, 1) * 36px) / 2);
    margin-right: 8px;
    display: flex;
    flex-direction: column;
}

/* From the middle of the tools pill (40px wide, 8px out) to the middle of the selected mode,
   under both so their rounded ends cover it. */
.mode-picker-stack > .mode-picker-inner:not(.mode-picker-tools) {
    position: relative;
}

.mode-picker-bridge {
    position: absolute;
    left: -28px;
    width: 55px;
    top: calc(2px + var(--selected-mode, 0) * 50px + 15px);
    height: 20px;
    background: #fff;
    box-shadow: 1px 1px 7px rgba(0, 0, 2, 0.2);
}

.mode-picker__button--tool {
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 700;
}

@media screen and (max-width: 1023px) {
    .mode-picker-camera,
    .mode-picker-tools,
    .mode-picker-bridge {
        display: none;
    }
}