:root {
	--base-color-OBI: #FE7D20;
	--base-color-CLASSIC: #000;	
	/* --base-color-MODYS: #bfb0a2; */
	--base-color-MODYS: #3340C7;
	
	--base-color-0: #FE7D20; /* FINNJA */
	--base-color-1: #FE7D20; /* VILMA */
	--base-color-2: #FE7D20; /* LEONIE */
	--base-color-3: #ffb0a2; /* SLIM */
	--base-color-4: #bfffa2; /* TREND */
	
	--base-color-Elektromaterial: #FE7D20;
    /* --base-color-joy: #7e919d; */
    --base-color-joy: #152C48;
	--base-color-joy-alpha: rgba(126, 145, 157, 0.25);
	
	--base-color-square: #d0d1d0;
	--base-color-warning: #FFCC80;
	--base-color-error: #D32F2F;
	--base-color-ok: #81C784;
	--base-color-white: #fff;	
	--base-color-transparent: #ffffff00;	
	/* rounding */
	--base-rounding: 5px;	
	/* font sizes */
	--base-font-size-body: 14px;
	--base-font-size-title: 20px;
	--base-font-size-supertitle: 32px;
}

/* Media query for mobile devices (up to 767px) */
@media only screen and (max-width: 767px) {
	:root {
		/* Adjust font sizes for mobile */
		--base-font-size-body: 12px;
		--base-font-size-title: 16px;
		--base-font-size-supertitle: 18px;
	}
}

body {
	font-family: "Dosis", sans-serif !important;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	overflow-y: scroll;
	font-size: var(--base-font-size-body);
}
h1 {
	font-size: var(--base-font-size-supertitle);
	text-align: center;
	color: var(--base-color-CLASSIC);
	width: 100%;
}
h1 span, .navodila > ul > li {
	font-size: var(--base-font-size-title);
	font-weight: lighter;
}

.custom-row {
    display: flex; /* Use Flexbox for better control */
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    column-gap: 0.5rem; /* Add horizontal gap between columns */
    row-gap: 0; /* No vertical gap */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default paddings */
}

.custom-row > [class*='col-'] {
    margin: 0; /* Remove margins from columns */
    padding: 0; /* Remove paddings from columns */
    flex: 0 0 calc(50% - 0.25rem); /* Adjust column width to account for the gap */
    max-width: calc(50% - 0.25rem); /* Ensure columns don't exceed the adjusted width */
}

.setup-btn {
    background-color: transparent;
    border: 1px solid var(--base-color-joy);
	font-size: var(--base-font-size-title);
    color: var(--base-color-joy);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-radius: var(--base-rounding);
    transition: all 0.3s;
    cursor: pointer;
}

.setup-btn:hover {
    background-color: var(--base-color-joy);
    color: white;
}

.setup-btn i {
    font-size: var(--base-font-size-title);
    opacity: 0.7;
    transition: opacity 0.3s;
}
.setup-btn span {
    margin-left: 8px;
}
.setup-btn:hover i {
    opacity: 1; /* Make icon fully visible on hover */
}

.setup-btn.active {
    background-color: var(--base-color-joy); /* Highlighted background color */
    color: white; /* Change text color when active */
}

hr.shadow-separator { 
    border: 0; 
    height: 0.5em;
    position: relative;
    margin: 0.5em 0; /* Keep other elements away from pseudo elements*/
}
hr.shadow-separator:after {
    top: -0.5em;
    height: 1em;
}
hr.shadow-separator:before {
    content: '';
    height: 0.5em;
    top: -0.5em;
    z-index: 999;
}

hr.shadow-separator:before, hr.shadow-separator:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.shadow-separator, hr.shadow-separator:after {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
    background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%,rgba(0,0,0,0.1)), color-stop(75%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}
.assembly-controls {
	position: relative;
    display: flex;
    align-items: center;
	width: 100%;
	height: 32px;
    text-align: left;
	color: var(--base-color-joy);
	margin-bottom: 16px;	
	font-size: 1.00em;
}
.assembly-controls .icons {
    display: flex;
    gap: 10px;		
}
.assembly-controls .icons > div > i {
	line-height: 1.5;
	cursor: pointer;
}
.assembly-status-label {	
	color: var(--base-color-white);
	padding: 0px 4px 0px 4px;
	background-color: var(--base-color-joy);	
	display: inline-block; /* important for underline */
	font-weight: bold;
}
.assembly-status-label.incomplete {	
	color: var(--base-color-CLASSIC);
	background-color: var(--base-color-warning);
}
.assembly-status-label.addNew {	
	margin-left: 4px;
	cursor: pointer;    
	/* background-color: var(--base-color-MODYS); */
}
.assembly-status-label.addNew:hover {	
	text-decoration: underline;
}

.quizoption {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--base-color-joy);
    color: white;
    border-radius: var(--base-rounding);
    width: 100%;
    padding: 8px 16px;
    margin: auto;
    margin-bottom: 4px;	
    text-align: left;
}
.quizoption.addNew {
	padding: 10px;
	cursor: pointer;
	background-color: var(--base-color-MODYS);
	color: white;
}

.quizoption label {
    flex-grow: 1; /* Allows label to take available space and push icons to the right */
}
.quizoption .icons {
    display: flex;
    gap: 10px; /* Space between icons */
}

.quizoption .icon {
    color: white; /* Adjust color if needed */
    cursor: pointer;
}

.room-content {
    max-height: 0px;
    overflow: hidden;
	padding-left: 32px;
}
.room-content.active {	
	background-color: var(--base-color-square) !important;    
	max-height: 128px;
}

.room-content .quizoption {
	margin-top: 4px;	
    padding-left: 20px; /* Indent the individual entries */
}

@keyframes ripple-border {
  0% { opacity: 75%; }
  50% { opacity: 100%; }
  100% { opacity: 75%; }
}

.pulsating-border {
  position: relative;
  animation: ripple-border 2.0s infinite ease-out;
}

.tabs-container {
    display: flex;
    padding-bottom: 0px;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent tabs from wrapping */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
    flex-grow: 1; /* Allow tabs container to take up remaining space */
	margin: 0 10px;
}
.tabs-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}
.tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Spacing between buttons and tabs container */
    position: relative;
    overflow: hidden; /* Hide overflow to create a scrolling effect */
}
.tab {
    padding: 10px 20px;
    cursor: pointer;
	color: var(--base-color-white);
    border: 1px solid var(--base-color-joy);
    /* border-bottom: none; */
    margin-right: 5px;
    background: var(--base-color-joy);
    border-radius: var(--base-rounding) var(--base-rounding) 0 0;
	font-weight: bold;
    flex-shrink: 0;
}

.tab.active, .tab:hover {
	background: var(--base-color-white);
	color: var(--base-color-joy);
    border-bottom: 1px solid white;
    position: relative;
    z-index: 1;
}

.tab-content-container {
    border: 1px solid var(--base-color-joy);
    background: white;
    display: flex; /* switch to flex for easier control over item sizing */
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* ensure items align to the left */
}

.tab-items-button {    
    aspect-ratio: 1;
    background-color: white;
    color: var(--base-color-CLASSIC);
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
    padding: 10px;
    box-sizing: border-box;
	border-radius: var(--base-rounding) !important;
}
.tab-items-button.simple {
	flex: 1 1 calc(33.33% - 10px); /* allow growth/shrink, but max 1/3 of container minus gap */
    max-width: calc(33.33% - 10px);
	cursor: pointer;
	border: 2px solid transparent; /* default border */
	transition: border 0.3s ease;  /* smooth transition */
}
.tab-items-button.selection {
	flex: 1 1 calc(66.66% - 10px); /* allow growth/shrink, but max 1/3 of container minus gap */
    max-width: calc(66.66% - 10px);	
}
.modular-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.modular-size {
	width: 100%;
	height: 100%;
	display: flex;
	background-color: #f8f8f8;
}
.modular-size-candidate {
	flex: 1;
	padding: 10px;
	height: 100%;
	cursor: pointer;
	border: 2px solid transparent; /* default border */
	transition: border 0.3s ease;  /* smooth transition */
	border-radius: var(--base-rounding) !important;
}
.modular-simbol, .modular-leca {
	width: 100%;
	padding-top: 4px;
	line-height: 2.0; /* Adjust as needed */
	background-color: #f8f8f8; /* Optional */
	display: flex;
	justify-content: center;
	gap: 1px;
}
.modular-simbol > span, .modular-leca > span {
	display: flex;
    align-items: center; /* Vertically center both label and symbol */
	padding-right: 4px;
    height: 36px;
	font-weight: bold;
}
.simbol-ex, .leca-ex {
	/* flex: 1; */
	width: 36px;
	height: 36px;
	cursor: pointer;
	border: 2px solid transparent; /* default border */
	transition: border 0.3s ease;  /* smooth transition */
	border-radius: var(--base-rounding) !important;
}
.leca-image {
    max-width: 100%;
    max-height: 100%;
	border-radius: var(--base-rounding) !important;
}
.circle-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	
	border-radius: var(--base-rounding) !important;
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.circle.filled {
	border: 2px solid var(--base-color-joy);;
    background-color: #4DE5F9;
}
.circle.empty {
    border: 2px solid var(--base-color-joy);;
    background-color: transparent;
}
.simbol-ex > img, .leca-ex > img {
	justify-content: center;
	object-fit: contain;
	overflow: hidden;
}
.tab-items-button.simple.active, .modular-size-candidate.active, .simbol-ex.active, .leca-ex.active,
.tab-items-button.simple:hover, .modular-size-candidate:hover, .simbol-ex:hover, .leca-ex:hover, .custom-option:hover {
	/* background-color: var(--base-color-square); */
	border: 2px solid var(--base-color-joy);
}

.tab-item-title {
    width: 100%;
    text-align: center;
    display: flex; /* Use Flexbox */
    flex-direction: column; /* Stack children vertically */
    height: 100%; /* Take up available height */
	overflow: hidden;
}
.tab-item-text {
    flex: 0 0 3em; /* Set height to exactly 3 rows (3 * line height) */
    line-height: 1em; /* Set line height to 1em */
    overflow: hidden; /* Hide overflow */
}
.tab-item-text span:first-child {
    font-weight: bold;
    display: block;
}
.tab-item-text span:nth-child(2) {
    font-weight: normal;
    display: block;
}

.tab-item-image {
    flex: 1; /* Take up remaining space */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 32px; /* Set a minimum height for the image container (adjust as needed) */
}
.tab-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Base styling for the custom dropdown */
.simple-combobox {
	background-color: var(--base-color-joy) !important;
    position: relative;
    width: 100% !important;    
	margin: auto;
	margin-bottom: 4px;
	border-radius: var(--base-rounding) !important;
	appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;    
    cursor: pointer;
}

/* Selected option styling */
.simple-combobox-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
	color: white;
}

/* Dropdown options container */
.simple-combobox-options {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    z-index: 1000;
}

.simple-combobox.active .simple-combobox-options {
    display: block;
}
.custom-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
	border: 2px solid transparent;
}

.color-circle {
    width: 24px;
    height: 12px;
    border-radius: 25%;
    margin-left: 10px;
}
.color-image {
    margin-left: 10px;
    border-radius: 25%;
    object-fit: cover;
}

.image-combobox {
    width: 100%;
	height: 128px;
	/* aspect-ratio: 2/1; */
    position: relative;
}

.image-combobox-item {
    flex: 0 0 auto; /* Prevent flex items from shrinking/growing */
    width: 100%; /* Adjust width of each button */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--base-rounding);
    overflow: hidden;
    border: 1px solid var(--base-color-joy);
    /* transition: all 0.3s ease; */
    cursor: pointer;
    position: relative;
}

.image-combobox-item .arrow {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 24px;             /* fixed or flexible, based on your design */
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;            /* arrow color */
	pointer-events: none;    /* allows clicks to pass through */
	background-color: var(--base-color-joy);
	z-index: 2;
}

.image-combobox-item-candidate {
    width: 100%;
	aspect-ratio: 3/1;
    display: flex;
    align-items: center;
    border-radius: var(--base-rounding);
    overflow: hidden;
    border: 1px solid var(--base-color-joy);
    cursor: pointer;
    margin-bottom: 5px;
    position: relative;
}

.image-combobox-item.selected {
	border: 4px solid var(--base-color-joy);
}
.image-combobox-item:hover {
	/* background-color: var(--base-color-modys); */
	border: 4px solid var(--base-color-joy);
}

.image-combobox-image {
    width: 100%;
    height: 100%;
    background-size: cover; /* Ensure the image covers the entire div */
    background-position: center; /* Center the image */
    position: absolute; /* Position relative to the parent */
    top: 0;
    left: 0;
    z-index: 1;
}

.image-combobox-title {
    width: 100%;
    text-align: center;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 0;
}
.image-combobox-title > span {
	text-transform: uppercase;
}

.image-combobox-options {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
	/*
    border: 1px solid #ccc;
    border-radius: var(--base-rounding);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	*/
    z-index: 1000;
    margin-top: 5px;
}

.image-combobox.active .image-combobox-options {
    display: block;
}

.family-buttons-container {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* Hide overflow to create a scrolling effect */
    width: 100%; /* Adjust as needed */
	height: 100%;
}

/* Horizontal list of buttons */
.family-buttons {
    display: flex;
    gap: 0.25em; /* Spacing between buttons */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling */
    width: calc(100% - 80px); /* Adjust for navigation buttons */
	
	height: 100%;
    margin: 0 10px; /* Space for navigation buttons */
}

/* Individual buttons */
.family-button {
    flex: 0 0 auto; /* Prevent flex items from shrinking/growing */
    width: 196px; /* Adjust width of each button */
    /* height: 100%; */
	height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--base-rounding);
    overflow: hidden;
    border: 4px solid transparent;
	transition: border 0.3s ease;
    /* transition: all 0.3s ease; */
    cursor: pointer;
    position: relative;
}
.family-button:hover, .family-button.active {
	border: 4px solid var(--base-color-joy);
	/* background-color: var(--base-color-modys); */
}

/* Button image */
.family-button-image {
    width: 100%;
    height: 100%;
    background-size: cover; /* Ensure the image covers the entire div */
    background-position: center; /* Center the image */
    position: absolute; /* Position relative to the parent */
    top: 0;
    left: 0;
    z-index: 1;
}

.family-button-title {
    width: 100%;
    text-align: center;
    line-height: 1.2;
    position: absolute;
    bottom: 0;
    z-index: 2;
    color: white;
    padding: 5px 0;
    background-color: var(--default-family-color, #ccc); /* Fallback to joy */
    transition: background-color 0.3s ease;
}

/* Set the dynamic color on hover or when active */
.family-button:hover .family-button-title,
.family-button.active .family-button-title {
    background-color: var(--family-color);
}

/* Navigation buttons */
.nav-button {
    background-color: var(--base-color-joy);
    color: white;
	border: none;
    border: 1px solid var(--base-color-joy);
    padding: 10px;
    cursor: pointer;
    z-index: 3;
    display: flex;
	height: 100%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.nav-button:hover {
	color: var(--base-color-joy);	
    background-color: white;
}

.nav-left {
	border-radius: var(--base-rounding) 0 0 var(--base-rounding);
    left: 0;
}

.nav-right {
	border-radius: 0 var(--base-rounding) var(--base-rounding) 0;
    right: 0;
}

/* Hide scrollbar for cleaner look */
.family-buttons::-webkit-scrollbar {
    display: none;
}

.family-buttons {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */	
}


/* Base styling for the room container */
.overview-room {
    background-color: var(--base-color-joy);
    border-radius: var(--base-rounding);
    margin-bottom: 4px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* Room header styling */
.overview-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;    
    color: white;
    background-color: var(--base-color-joy);
    transition: background-color 0.3s ease;
}
.overview-room-header.wclick, .clickable {
	cursor: pointer;
}
.clickable:hover {
	font-weight: bold;
}

.overview-room-header:hover {
    background-color: var(--base-color-joy-hover);
}

/* Arrow styling */
.overview-arrow {
    transition: transform 0.3s ease;
}

/* Room content styling (collapsible section) */
.overview-room-content {
    max-height: 0;
    overflow: hidden;
    padding-left: 32px;
    background-color: var(--base-color-square);
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.overview-room-content.active {
    max-height: fit-content; /* Automatically fits content */
    padding: 6px 0px 6px 32px;
}

/* Set styling (child elements) */
.overview-set {
    display: flex;
	font-size: 1.25em;
    justify-content: space-between;
    align-items: center;
    background-color: var(--base-color-joy);    
	color: var(--base-color-CLASSIC);
    border-radius: var(--base-rounding);
    padding: 8px 16px;
    margin: 8px 0;
}
.overview-set.incomplete {
	background-color: var(--base-color-warning);
}

/* Icons styling */
.overview-icons {
    display: flex;
    gap: 10px;
}

.overview-icons .icon {
    cursor: pointer;
    transition: color 0.3s ease;
}

.overview-icons .icon:hover {
    color: var(--base-color-joy-hover);
}

/* Container to hold notifications */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Notification styling */
.notification {
    padding: 10px 20px;
    margin-bottom: 10px;
    background-color: var(--base-color-joy);
    color: white; /* White text */
    border-radius: 5px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Fade-out effect */
.notification.fade-out {
    opacity: 0;
}
.body_assembly_layout {
  width: 100%;
  padding: 16px;
  box-sizing: border-box; 
}

.body_assembly_layout {
  width: 100%;
  padding: 16px;
  box-sizing: border-box; 
}

.body_assembly_layout_ex {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-mirror {
  position: relative;
  width: auto;
  height: auto;
  pointer-events: none;
}

.image-mirror > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.image-mirror > div {
  position: absolute; /* Position relative to the parent */
    top: 0; /* Align to the top of the parent */
    left: 0; /* Align to the left of the parent */
    width: 100%; /* Match parent width */
    height: 100%; /* Match parent height */    
    z-index: 16; /* Ensure it's above the image (if needed) */
}
.element-placeholder {
	position: absolute;  
	pointer-events: auto;
}
.element-placeholder:hover {	
	cursor: pointer;
}
.stretched-image {
    width: 100%; /* Stretch to fill the width of the parent */
    height: 100%; /* Stretch to fill the height of the parent */
    object-fit: fill; /* Stretch the image to fit the parent (ignores aspect ratio) */
    display: block; /* Remove extra space below the image */
}

/* general rule: fit to max size then stretch by 2% (1% each side) and move left by 1% */

.H_FINNJA { top: 16.00%; height: 68.25%; }
.H_FINNJA.p1 { width: 68.25%; }
.H_FINNJA.p1.e0 { left: 16.00%; }
.H_FINNJA.p2 { width: 36.5%; }
.H_FINNJA.p2.e0 { left: 8.72%; }
.H_FINNJA.p2.e1 { left: 55.00%; }
.H_FINNJA.p3 { width: 25%; }
.H_FINNJA.p3.e0 { left: 5.75%; }
.H_FINNJA.p3.e1 { left: 37.50%; }
.H_FINNJA.p3.e2 { left: 69.36%; }

.V_FINNJA { left: 16.00%; width: 68.25%; }
.V_FINNJA.p1 { height: 68.25%; }
.V_FINNJA.p1.e0 { top: 16.00%; }
.V_FINNJA.p2 { height: 36.5%; }
.V_FINNJA.p2.e0 { top: 8.72%; }
.V_FINNJA.p2.e1 { top: 55.00%; }
.V_FINNJA.p3 { height: 25%; }
.V_FINNJA.p3.e0 { top: 5.75%; }
.V_FINNJA.p3.e1 { top: 37.50%; }
.V_FINNJA.p3.e2 { top: 69.36%; }

.H_VILMA { top: 18.43%; height: 64%; }
.H_VILMA.p1 { width: 64%; }
.H_VILMA.p1.e0 { left: 18.43%; }
.H_VILMA.p2 { width: 33.5%; }
.H_VILMA.p2.e0 { left: 10.00%; }
.H_VILMA.p2.e1 { left: 56.81%; }
.H_VILMA.p3 { width: 23.00%; }
.H_VILMA.p3.e0 { left: 6.65%; }
.H_VILMA.p3.e1 { left: 38.55%; }
.H_VILMA.p3.e2 { left: 70.5%; }

.V_VILMA { left: 18.43%; width: 64%; }
.V_VILMA.p1 { height: 64%; }
.V_VILMA.p1.e0 { top: 18.43%; }
.V_VILMA.p2 { height: 33.5%; }
.V_VILMA.p2.e0 { top: 10.00%; }
.V_VILMA.p2.e1 { top: 56.81%; }
.V_VILMA.p3 { height: 23.00%; }
.V_VILMA.p3.e0 { top: 6.65%; }
.V_VILMA.p3.e1 { top: 38.55%; }
.V_VILMA.p3.e2 { top: 70.5%; }

.H_LEONIE { top: 16.5%; height: 67.00%; }
.H_LEONIE.p1, .H_LEONIE.p1G { width: 67.00%; }
.H_LEONIE.p1.e0, .H_LEONIE.p1G.e0 { left: 16.5%; }
.H_LEONIE.p2, .H_LEONIE.p2G { width: 36.04%; }
.H_LEONIE.p2.e0, .H_LEONIE.p2G.e0 { left: 9.09%; }
.H_LEONIE.p2.e1, .H_LEONIE.p2G.e1 { left: 54.87%; }
.H_LEONIE.p3 { width: 24.72%; }
.H_LEONIE.p3.e0 { left: 6.24%; }
.H_LEONIE.p3.e1 { left: 37.64%; }
.H_LEONIE.p3.e2 { left: 69.04%; }

.V_LEONIE { left: 16.5%; width: 67.00%; }
.V_LEONIE.p1 { height: 67.00%; }
.V_LEONIE.p1.e0 { top: 16.5%; }
.V_LEONIE.p2 { height: 36.04%; }
.V_LEONIE.p2.e0 { top: 9.09%; }
.V_LEONIE.p2.e1 { top: 54.87%; }
.V_LEONIE.p3 { height: 24.72%; }
.V_LEONIE.p3.e0 { top: 6.24%; }
.V_LEONIE.p3.e1 { top: 37.64%; }
.V_LEONIE.p3.e2 { top: 69.04%; }

.H_TREND { top: 22%; height: 56.5%; }
.H_TREND.p1 { width: 28.5%; }
.H_TREND.p1.e0 { left: 36%; }
.H_TREND.p2 { width: 28.5%; }
.H_TREND.p2.e0 { left: 22%; }
.H_TREND.p2.e1 { left: 50%; }

.H_SLIM { top: 24%; height: 52%; }
.H_SLIM.p1 { width: 26%; }
.H_SLIM.p1.e0 { left: 37%; }
.H_SLIM.p2 { width: 26%; }
.H_SLIM.p2.e0 { left: 24.25%; }
.H_SLIM.p2.e1 { left: 50%; }

.body_assembly_additionals, .body_assembly_footer {
	width: 100%;
	height: 32px;
	background-color: var(--base-color-warning);
	margin-bottom: 4px;
}
.element-circle {
    position: absolute; /* Position the circle absolutely within the placeholder */
    top: 10%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset to truly center the circle */
    width: 24px; /* Set the size of the circle */
    height: 24px;
    background-color: var(--base-color-joy-alpha); /* Use CSS variable for the default color */
    border-radius: 50%; /* Make it a circle */
    pointer-events: none; /* Ensure the circle doesn't interfere with hover */
    z-index: 17; /* Ensure the circle is above the image */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Text color inside the circle */
    font-weight: bold; /* Make the text bold */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}
.element-circle.taken {
	background-color: var(--base-color-transparent); /* Use CSS variable for the default color */
	color: var(--base-color-transparent);
}
.element-placeholder.active .element-circle, .element-placeholder:hover .element-circle {
    background-color: var(--base-color-warning);
	color: white;
}

.lupo-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lupo-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 32px;
    color: var(--base-color-JOY);
    cursor: pointer;
    z-index: 1001; /* One higher than .lupo-container */
}
.lupo-close-btn:hover {
    color: #ccc;
}