#showroom-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: var(--color-black-light);
    container-type: inline-size;
}

#showroom-frame,
iframe {
    height: 110%;
    width: 100%;
    position: relative;
    z-index: 1;
}

#showroom-frame > button {
    position: absolute;
    z-index: 11;
}

#showroom-frame::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 15dvw;
    height: 100dvh;
    background: var(--color-background-gardient-right);
    opacity: .4;
    z-index: 2;
    transition: var(--transition);
    pointer-events: none;
}

body.control-panel-open #showroom-frame::before {
    right: var(--showroom-overlay-width);
    opacity: .2;
    width: 8dvw;
}

/*------------------------------*/
/*   SHOWROOM INFORMATION BOX   */
/*------------------------------*/

#information-box {
    position: absolute;
    bottom: 0;
    max-width: calc(var(--navigation-width) * 2.25);
    min-width: calc(var(--navigation-width) * 1.75);
    width: auto;
    padding: 0 var(--layout-padding);
    z-index: 10;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

#information-box > *,
#information-box .more-information-wrapper > * {
    filter: drop-shadow(0 2px 38px rgba(0, 0, 0, 1));
}

#information-box .title {
    display: flex;
    font-size: var(--font-size-h2);
    margin-bottom: var(--layout-padding);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

#information-box.open .title {
    transform: translateY(0.5rem);
}

#information-box .title::after {
    content: '';
    position: relative;
    top: .25rem;
    width: var(--layout-space);
    height: var(--layout-space);
    margin-left: var(--layout-space-s);
    background-image: var(--slide-arrow);
    background-size: .625rem;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    transition: var(--transition);
    opacity: .75;
}

#information-box .title:hover::after,
#information-box.open .title::after {
    margin-left: var(--layout-padding-s);
    opacity: 1;
}

#information-box.open .title::after {
    transform: rotate(-90deg);
}

#information-box .more-information-wrapper {
    max-height: 0;
    opacity: 0;
    transition: var(--transition);
}

#information-box.open .more-information-wrapper {
    max-height: 30dvh; 
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#information-box .more-information-wrapper > * {
    margin-bottom: var(--layout-padding-s);
    padding-bottom: var(--layout-padding-s);
    border-bottom: 1px solid var(--color-grey-medium);
}

#information-box .more-information-wrapper > *:last-child {
    border-bottom: unset;
    padding-bottom: unset;
}

#information-box .more-information-wrapper:has(.description) > *:last-child {
    border-top: 1px solid var(--color-grey-medium);
    padding-top: var(--layout-padding-s);
}

#information-box .description {
    overflow-y: scroll;
}

#information-box .more-information-wrapper .description {
    height: fit-content;
    overflow-y: auto;
    width: calc(100% + (var(--layout-padding) / 2 + 2px)) !important;
    padding-right: calc(var(--layout-padding) / 2 - 2px);
    border-bottom: none;
    padding-bottom: 0;
}

#information-box .more-information-wrapper .address,
#information-box .more-information-wrapper .values {
    font-weight: 600;
    font-size: var(--font-size-h5);
}

#information-box .more-information-wrapper .values {
    display: flex;
    justify-content: space-between;
}



/*----------------------------*/
/*   SHOWROOM CONTROL PANEL   */
/*----------------------------*/

#showroom-control-panel {
    position: absolute;
    top: 50%;
    right: var(--layout-padding);
    transform: translateY(-50%);
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-control-panel);
    border-radius: 100px;
    width: max-content;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transition: var(--transition);
}

body.control-panel-open #showroom-control-panel,
body.control-panel-open #showroom-control-panel-sdk {
    right: calc(var(--showroom-overlay-width) + var(--layout-padding)) !important;
}

.control-panel-item {
    margin: var(--layout-space-s);
    cursor: pointer;
    width: var(--control-icon-size);
    height: var(--control-icon-size);
    background-color: var(--color-control-overlay-input);
    border-radius: var(--border-radius-circle);
    transition: var(--transition);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64%;
    margin-bottom: calc(var(--layout-space-s) / 1.5);
}

.control-panel-item:last-of-type {
    margin-bottom: var(--layout-space-s);
}

.control-panel-item:hover {
    background-color: var(--color-control-overlay-input-hover)
}

.control-panel-item.active,
#showroom-control-panel-sdk #control-panel-3d-view,
#showroom-control-panel-sdk #control-panel-measurement[aria-pressed="true"] {
    background-color: var(--color-black);
    filter: invert(1);
}

.control-panel-item.error {
    background-color: var(--color-red);
    filter: unset;
}

.control-panel-item[data-toggle-selector=".showroom-settings"] {
    background-image: var(--icon-control-settings);
}

.control-panel-item[data-toggle-selector=".showroom-exposed-data"] {
    background-image: var(--icon-control-exposed_data);
}

.control-panel-item[data-toggle-selector=".showroom-tag-list"] {
    background-image: var(--icon-control-tag);
}

.control-panel-item[data-toggle-selector=".showroom-media-list"] {
    background-image: var(--icon-control-media);
}

.control-panel-item[data-toggle-selector=".showroom-category-list"] {
    background-image: var(--icon-control-category);
}

.control-panel-item[data-toggle-selector=".showroom-showcase-list"] {
    background-image: var(--icon-control-spaces);
}

.control-panel-item[data-toggle-selector=".showroom-showcase-user"],
.control-panel-item[data-toggle-selector=".showroom-user-list"] {
    background-image: var(--icon-control-user);
}

.control-panel-item[data-toggle-selector=".showroom-restricted-area-list"] {
    background-image: var(--icon-control-restricted_area);
}

.control-panel-item[data-toggle-selector=".showroom-floor-room-list"] {
    background-image: var(--icon-control-floor);
}

/**--------------------------------------**/
/**   SHOWROOM CONTROL PANEL - OVERLAY   **/
/**--------------------------------------**/

#showroom-control-panel-overlay,
.showroom-control-panel-slider {
    position: absolute;
    top: 0;
    right: calc(0px - var(--showroom-overlay-width));
    height: 100dvh;
    width: var(--showroom-overlay-width);
    background-color: var(--color-control-panel-overlay);
    z-index: 10;
    padding: 0 var(--layout-padding);
    transition: var(--transition);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* For Safari */
}

body.control-panel-open #showroom-control-panel-overlay,
body.control-panel-slider-open .showroom-control-panel-slider {
    right: 0;
}

#showroom-control-panel-overlay .list-overlay:not(.active) {
    display: none;
}

#showroom-control-panel-overlay .headline {
    display: flex;
    align-items: center;
    height: var(--layout-header-height);
    font-size: var(--font-size-h5);
    font-weight: 700;
}

#showroom-control-panel-overlay .content-container {
    height: calc(100dvh - var(--layout-header-height));
    padding-bottom: var(--layout-padding);
}



/***----------***/
/***   USER   ***/
/***----------***/

/* FORM */

.list-overlay-search {
    display: flex;
    align-items: center;
    font-size: var(--font-size-text);
    outline: none;
    height: var(--layout-space);
    background-color: var(--color-control-overlay-input);
    border-radius: var(--border-radius-small);
    padding: var(--layout-padding-s) var(--layout-space-s);
    height: var(--input-height-adnimistration);
}

.list-overlay-search select#category-filter {
    display: none;
}

.list-overlay-search label {
    display: flex;
    align-items: center;
    width: 100%;
}

.list-overlay-search label::before {
    background-image: var(--icon-search);
    content: '';
    position: relative;
    width: calc(var(--icon-size) - .325rem);
    height: calc(var(--icon-size) - .325rem);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: var(--transition);
    filter: invert(1);
}

.list-overlay-search input {
    padding-left: var(--layout-space-s);
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-text-s);
    letter-spacing: var(--letter-spacing);
    color: var(--color-white);
}

.list-overlay-search input::placeholder {
    color: var(--color-white);
}

.form-inline-wrapper {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 0;
    min-height: 0;
    transition: var(--transition);
}

.form-inline-wrapper:has(div.active) {
    margin-top: var(--layout-padding);
    max-height: 100%;
    min-height: calc((100dvh - var(--layout-header-height) - var(--layout-padding)) / 2 - var(--layout-padding) + var(--layout-padding-s));
}

.form-inline-container {
    border-radius: var(--border-radius-base);
    background-color: var(--color-control-overlay-input);
    padding: var(--layout-padding);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    max-height: 0;
    min-height: 0;
    opacity: 0;
    display: none;
}

.form-inline-container.active {
    height: 100%;
    max-height: unset;
    opacity: 1;
    display: block;
}

.form-inline-container form {
    max-height: calc(100% - (var(--layout-padding) * 2));
}

.form-inline-container form#edit-showcase-user {
    display: none !important;
}

.form-inline-container form#edit-showcase-user.active {
    display: flex !important;
}

.form-inline-container form .form-input-container {
    max-height: calc(100% - var(--btn-height) - var(--layout-padding)) !important;
}

.form-input-container input.error {
    border: 1px solid var(--color-red-light) !important;
}

.form-input-container .error-description {
    color: var(--color-red-light);
    font-size: var(--font-size-text-s);
    margin-top: .5rem;
}

.form-inline-container .form-headline {
    font-weight: 500;
    margin-bottom: var(--layout-padding);
}

.form-inline-container .form-close,
.modal-container .form-close {
    width: max-content;
    position: absolute;
    top: var(--layout-padding-s);
    right: var(--layout-padding-s);
}

#showroom-control-panel-overlay .form-inline-container form .form-field.text,
#showroom-control-panel-overlay .form-inline-container form .form-field.number {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

#showroom-control-panel-overlay .form-inline-container form .form-field:not(.checkbox) > label {
    margin-right: 0 !important;
    margin-bottom: var(--layout-padding-s) !important;
}

.form-inline-container .form-field.textarea .ck-editor {
    padding: 0 var(--layout-padding-s);
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    background-color: var(--color-control-overlay-input);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid transparent;
    resize: vertical;
    padding-top: var(--layout-space-s);
    max-height: calc(var(--input-height-showroom) * 5);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: calc(var(--input-height-showroom) * 4);
}

.form-inline-container .form-field.textarea .ck-editor * {
    background: transparent !important;
    color: var(--color-white) !important;
    border: none !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none;
}

.form-inline-container .form-field.textarea .ck-editor .ck-editor__editable.ck-editor__editable_inline {
    padding: 0 !important;
    margin: var(--layout-space-s) 0 !important;
}

.form-inline-container .form-field.textarea .ck-editor .ck-toolbar .ck-dropdown__panel {
    background-color: var(--color-white) !important;
}

.form-inline-container .form-field.textarea .ck-editor .ck-editor__top  {
    left: -.5rem;
    position: relative;
    width: calc(100% + 1rem);
}

.form-inline-container .form-field.textarea .ck-editor .ck-toolbar button {
    min-width: var(--icon-size);
    min-height: var(--icon-size);
    padding: 0;
    margin-right: 0.5rem !important;
}

.form-inline-container .form-field.textarea .ck-editor .ck-toolbar button > svg {
    width: calc(var(--icon-size) / 1.5);
    height: calc(var(--icon-size) / 1.5);
}

.form-inline-container .form-field.textarea .ck-editor .ck-toolbar .ck-dropdown__panel button > svg {
    filter: invert(1);
}

/** add button **/

#showroom-control-panel-overlay .add-item-wrapper button.btn-add {
    text-indent: unset;
    width: 100%;
    background-color: transparent;
    justify-content: flex-start;
    color: var(--color-white);
    font-size: var(--font-size-text) !important;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height-text);
    font-family: 'Inter', sans-serif;
}

#showroom-control-panel-overlay .add-item-wrapper button.btn-add::before,
#tag-button-use-coordinates::before,
#tag-button-add-tag::before {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--layout-space-s);
    background-image: var(--icon-btn-plus);
    background-size: auto;
    filter: invert(1);
    border: 1px solid var(--color-grey-medium);
    border-radius: var(--border-radius-circle);
    transition: var(--transition);
    position: relative;
}

#showroom-control-panel-overlay .add-item-wrapper button.btn-add:hover::before,
#showroom-control-panel-overlay .add-item-wrapper button.btn-add:active::before,
.list-overlay:has(.tag-add-wrapper.active) .add-item-wrapper button.btn-add::before,
.list-overlay:has(.showcase-user-add-form.active) .add-item-wrapper button.btn-add::before,
#tag-button-use-coordinates:hover::before,
#tag-button-add-tag:hover::before {
    filter: unset !important;
    background-color: var(--color-white);
}

#showroom-control-panel-overlay .add-item-wrapper button.btn-add:active::before,
.list-overlay:has(.tag-add-wrapper.active) .add-item-wrapper button.btn-add::before,
.list-overlay:has(.showcase-user-add-form.active) .add-item-wrapper button.btn-add::before {
    border: 1px solid var(--color-grey-light) !important;
}



/* TAG AND RESTRICTED AREA */

#showroom-control-panel-overlay .showroom-tag-list .content-container {
    overflow: hidden;
}

.showroom-tag-list .tag-list-detail-container,
.showroom-restricted-area-list .restricted-area-list-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.showroom-tag-list .tag-input-container,
.showroom-restricted-area-list .restricted-area-input-container {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    transition: var(--transition);
    max-height: max-content;
    height: 100%;
}

.tag-list-wrapper,
.restricted-area-list-wrapper {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: var(--font-size-text);
    margin: var(--layout-padding-s) 0;
    max-height: max-content;
    margin-bottom: 0;
}

.tag-list-detail-container:has(div.active) .tag-list-wrapper,
.restricted-area-list-container:has(div.active) .restricted-area-list-wrapper {
    max-height: calc((100dvh - var(--layout-header-height) - var(--layout-padding)) / 2 - var(--input-height-adnimistration) - var(--btn-height) - (var(--layout-padding-s) * 2));
}

.tag-list-wrapper:has(.enable-in-showcase-checkbox),
.restricted-area-list-wrapper:has(.enable-in-showcase-checkbox),
.showcase-show .tag-list-wrapper {
    max-height: 100dvh;
    padding-right: calc(var(--layout-padding) / 2 - 2px);
    scrollbar-gutter: stable;
}

.tag-list-wrapper .tag-item,
.more-tags .tag-item,
.restricted-area-list-wrapper .restricted-area-list-item {
    display: flex;
    align-items: center;
    height: var(--layout-padding);
    color: var(--color-grey-medium);
    padding: var(--layout-padding);
    padding-right: 0;
    border-left: 1px solid var(--color-grey-dark);
    cursor: pointer;
}

.tag-list-wrapper .tag-item:first-of-type,
.more-tags .tag-item:first-of-type,
.restricted-area-list-wrapper .restricted-area-list-item:first-of-type {
    padding-top: 0;
    margin-top: var(--layout-padding);
}

.tag-list-wrapper .tag-item:last-of-type,
.more-tags .tag-item:last-of-type,
.restricted-area-list-wrapper .restricted-area-list-item:last-of-type {
    padding-bottom: 0;
    margin-bottom: var(--layout-padding);
}

.tag-list-wrapper:has(.tag-item:first-of-type:last-of-type) .tag-item,
.restricted-area-list-wrapper:has(.tag-item:first-of-type:last-of-type) .restricted-area-list-item {
    padding-bottom: var(--layout-padding);
    margin-top: calc(var(--layout-padding) * 2);
}

.tag-list-wrapper:has(.tag-item:first-of-type:last-of-type) .tag-item.active,
.restricted-area-list-wrapper:has(.tag-item:first-of-type:last-of-type) .restricted-area-list-item {
    border-left: 1px solid var(--color-white);
}

.tag-list-wrapper .tag-item::before,
.more-tags .tag-item::before,
.restricted-area-list-wrapper .restricted-area-list-item::before {
    content: '';
    width: 10px;
    height: 1px;
    background: var(--color-grey-dark);
    position: relative;
    left: calc(0px - var(--layout-padding));
}

.tag-list-wrapper .tag-item.active {
    color: var(--color-white);
    border-left: 1px solid var(--color-white);
}

.tag-list-wrapper .tag-item.active::before {
    background: var(--color-white);
}

.showroom-tag-list .tag-category-list .category-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;;
    align-items: center;
    margin-bottom: var(--layout-padding-s);
}

#showroom-control-panel-overlay .tag-item span,
.more-tags .tag-item > a {
    margin: 0;
}

.more-tags .tag-item {
    border-left: 1px solid var(--color-grey-light);
}

.more-tags .tag-item::before {
    background: var(--color-grey-light);
}



/** tag popup **/

.showroom-tag-popup > .tag-item,
.showroom-showcase-slider .showroom-showcase-item,
.control-panel-floors-overlay {
    position: absolute;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* For Safari */
    border-radius: var(--border-radius-base);
    padding: var(--layout-padding);
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: var(--color-control-panel);
    max-width: calc(var(--showroom-overlay-width) + var(--layout-padding));
    /* min-width: 300px; ? */
    min-width: calc((var(--showroom-overlay-width) + var(--layout-padding)) / 1.5);
    max-height: 60dvh;
    overflow-y: overlay;
    overflow-x: hidden;
}

.showroom-tag-popup .tag-item > *:not(:last-child) {
    margin-bottom: var(--layout-padding);
}

.showroom-tag-popup .headline {
    font-size: var(--font-size-h5);
    margin-top: var(--layout-space-s);
}

.showroom-tag-popup .tag-item .media-wrapper {
    background-color: var(--color-control-overlay-input);
    height: var(--control-icon-size);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    width: max-content;
    padding: var(--layout-space-s);
    padding-right: var(--layout-padding-s);
    background-image: var(--icon-download);
    background-repeat: no-repeat;
    background-position: center left var(--layout-space-s);
    background-size: calc(var(--icon-size) / 1.5);
}

.showroom-tag-popup .tag-item .media-wrapper .media-item {
    margin-left: calc(var(--layout-space-s) * 2.5);
}

.showroom-tag-popup .tag-item .more-tags > p {
    padding-bottom: var(--layout-space-s);
}

.showroom-tag-popup .headline,
.showroom-tag-popup .tag-item .more-tags > p {
    font-weight: 600;
}

.showroom-tag-popup a {
    color: var(--color-white);
}



/** tag add **/

.showroom-tag-details {
    display: none;
}

#tag-button-use-coordinates,
#tag-button-add-tag {
    padding: var(--layout-space-s);
    padding-right: var(--layout-padding-s);
    background-color: var(--color-control-panel-overlay);
    border: unset;
    border-radius: 100px;
    color: var(--color-white);
    font-size: var(--font-size-text-s);
    cursor: pointer;
    display: flex;
    align-items: center;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

#tag-button-use-coordinates::before,
#tag-button-add-tag::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--color-grey-dark) !important;
}



/** restricted area **/

.restricted-area-list-wrapper {
    margin: 0 !important;
}

.restricted-area-list-wrapper .restricted-area-list-item {
    color: var(--color-white);
    position: relative;
}

.restricted-area-list-container .floor-item-wrapper {
    max-height: 50dvh;
    width: calc(100% + (var(--layout-padding) / 2 + 2px)) !important;
    padding-right: calc(var(--layout-padding) / 2 - 2px);
}

.floor-rooms-wrapper .room-item .room-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--layout-padding-s);
}

.room-item-header .restricted-area-room-selection-wrapper {
    border: 1px solid var(--color-grey-medium);
    cursor: pointer;
    position: relative;
    font-size: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--border-radius-circle);
    transition: var(--transition);
}

.room-item-header .restricted-area-room-selection-wrapper label::before {
    content: '';
    height: var(--icon-size);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-size);
    background-image: var(--icon-btn-delete-file);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: var(--transition);
}

.room-item-header .restricted-area-room-selection-wrapper.for-select-all-wrapper label::before {
    background-image: var(--icon-checkbox);
}

.room-item-header .restricted-area-room-selection-wrapper input {
    opacity: 0;
}

.room-item-header .restricted-area-room-selection-wrapper:has(.restricted-area-room-selection-all:checked),
.room-item-header .restricted-area-room-selection-wrapper:has(.restricted-area-room-selection:checked) {
    background-color: var(--color-white);
}

.room-item-header .restricted-area-room-selection-wrapper .restricted-area-room-selection-all:checked + label::before,
.room-item-header .restricted-area-room-selection-wrapper .restricted-area-room-selection:checked + label::before {
    opacity: 1;
}



/* MEDIA */

.media-item-wrapper {
    display: flex;
    flex-direction: column;
    margin: var(--layout-padding) 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - var(--input-height-adnimistration) - (var(--layout-padding) * 2) - var(--btn-height));
    width: calc(100% + (var(--layout-padding) / 2 + 2px));
    padding-right: calc(var(--layout-padding) / 2 - 2px);
    scrollbar-gutter: stable;
}

.media-item-wrapper .media-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--layout-padding-s);
}

.media-item-wrapper .media-item:last-of-type{
    margin-bottom: 0;
}

.media-item-wrapper .media-item a {
    color: var(--color-white);
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.media-item-wrapper .media-item .media-button-container button {
    margin-left: var(--layout-space-s);
    width: calc(var(--btn-edit-height) - .5rem);
    height: calc(var(--btn-edit-height) - .5rem);
    border-radius: var(--border-radius-circle);
    border: none;
}

.media-item-wrapper .media-item .media-button-container .btn-delete::before {
    background-image: var(--icon-btn-delete-file);
    background-size: auto;
}

#showroom-control-panel-overlay .showroom-media-button-wrapper,
#showroom-control-panel-overlay .showroom-category-button-wrapper {
    display: flex;
    position: fixed;
    bottom: var(--layout-padding);
    width: calc(100% - (var(--layout-padding) * 2));
}



/* CATEGORY */

.category-item-list {
    margin: var(--layout-padding) 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100% - var(--input-height-adnimistration) - (var(--layout-padding) * 2) - var(--btn-height));
    min-height: auto;
    width: calc(100% + (var(--layout-padding) / 2 + 2px));
    padding-right: calc(var(--layout-padding) / 2 - 2px);
    scrollbar-gutter: stable;
}

.category-item-list .category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--layout-padding-s);
}

.category-item-list .media-item .category-title {
    color: var(--color-white);
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.category-item-list .category-item .category-button-container {
    display: flex;
}

.category-item-list .category-item .category-button-container button {
    margin-left: var(--layout-space-s);
    width: calc(var(--btn-edit-height) - .5rem);
    height: calc(var(--btn-edit-height) - .5rem);
    border-radius: var(--border-radius-circle);
    border: none;
}

.category-item-list .category-item .category-button-container .btn-delete::before {
    background-image: var(--icon-btn-delete-file);
    background-size: auto;
}



/* SHOWCASE SLIDER */

.showroom-control-panel-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
    pointer-events: none;
    z-index: 9;
}

.showroom-control-panel-slider .showroom-showcase-slider {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: calc(100% - (var(--layout-header-height) * 2));
    width: calc(100% - var(--layout-padding) - var(--control-icon-size) - var(--layout-space-s));
}

body.control-panel-slider-open.control-panel-open .showroom-control-panel-slider {
    right: var(--showroom-overlay-width);
}

.showroom-control-panel-slider .showroom-showcase-slider .splide__track {
    position: relative;
    overflow-x: hidden;
    pointer-events: all;
    width: calc(100% + (var(--layout-space-s) / 2));
    padding-right: calc(var(--layout-space-s) / 2);
    max-height :calc(((var(--showroom-overlay-width) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px) * 9 / 16) * 3 + (var(--layout-padding) * 2)) !important;
}

.showroom-control-panel-slider .showroom-showcase-slider  .splide__pagination {
    height: 0;
    opacity: 0;
}

.showroom-control-panel-slider .showroom-showcase-slider #showroom-showcase-slider .splide__list {
    height: 100%;
    position: relative;
}

.showroom-showcase-slider .showroom-showcase-item {
    position: relative;
    margin-bottom: var(--layout-padding) !important;
    padding: 0;
    overflow: hidden;
    pointer-events: all;
    min-width: auto;
    width: calc(var(--showroom-overlay-width) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px);
    height: calc((var(--showroom-overlay-width) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px) * 9 / 16) !important;
}

.showroom-showcase-slider .showroom-showcase-item:last-child {
    margin-bottom: 0 !important;
}

.showroom-showcase-slider .showroom-showcase-item > a,
.showroom-showcase-slider .showroom-showcase-item .showroom-title,
.showroom-showcase-slider .showroom-showcase-item > a::after,
.showroom-showcase-slider .showroom-showcase-item .showroom-image,
.showroom-showcase-slider .showroom-showcase-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.showroom-showcase-slider .showroom-showcase-item > a::after {
    content: '';
    top: unset;
    bottom: 0;
    height: 60%;
    background: var(--color-background-gardient-top);
    opacity: 0.9;
    pointer-events: none;
    transform: scaleY(-1);
}

.showroom-showcase-slider .showroom-showcase-item img {

    object-fit: cover;
}

.showroom-showcase-slider .showroom-showcase-item .showroom-title {
    top: unset;
    bottom: 0;
    height: max-content;
    color: var(--color-white);
    padding: var(--layout-padding-s);
    z-index: 2;
}

#showroom-showcase-slider .splide__arrows {
    position: absolute;
    height: calc(100% + ((var(--icon-size) + .25rem) * 2) + (var(--layout-padding) * 2));
    width: 100%;
    top: 50%;
    transform: translate(0, -50%);
    pointer-events: all;
}

#showroom-showcase-slider .splide__arrows > .splide__arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(-90deg);
    width: calc(var(--input-height-showroom) - .5rem);
    width: calc(var(--icon-size) + .25rem);
    height: calc(var(--icon-size) + .25rem);
    background-color: transparent;
    background-image: var(--slide-arrow);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: unset;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, .25));
}

#showroom-showcase-slider .splide__arrows > .splide__arrow.splide__arrow--next {
    top: unset;
    bottom: 0;
    transform: translate(-50%, 0) rotate(90deg);
    filter: drop-shadow(4px 0px 4px rgba(0, 0, 0, .25));
}

#showroom-showcase-slider .splide__arrows > .splide__arrow:hover {
    transform: translate(-50%, -10%) rotate(-90deg);
}

#showroom-showcase-slider .splide__arrows > .splide__arrow.splide__arrow--next:hover {
    transform: translate(-50%, 10%) rotate(90deg);
}

/** SHOWCASE ADD **/

.showroom-showcase-slider .showroom-showcase-item-add {
    margin-bottom: 0 !important;
    margin-top: var(--layout-padding);
}

.showroom-showcase-slider .showroom-showcase-item-add::before {
    content: '';
    position: absolute;
    font-size: var(--font-size-h5);
    font-weight: 400;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-dashboard-btn);
    border-radius: var(--border-radius-circle);
    transition: var(--transition);

    width: var(--media-list-height);
    height: var(--media-list-height);
    background-image: var(--icon-btn-plus);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--btn-edit-height) - 1rem);
    background-color: var(--color-control-panel);
    filter: invert(1);
}

.showroom-showcase-slider .showroom-showcase-item-add:hover::before {
    background-color: var(--color-white);
    filter: unset;
}

.showroom-showcase-slider .showroom-showcase-item-add:focus::before,
.showroom-showcase-slider .showroom-showcase-item-add:active::before {
    outline: 2px solid var(--color-grey-medium);
    background-color: var(--color-white);
    filter: unset;
}



/*   User list  */

.showroom-showcase-user .showcase-user-list-detail-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.showcase-user-input-container {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    transition: var(--transition);
    max-height: max-content;
    height: 100%;
    width: calc(100% + (var(--layout-padding) / 2 + 2px));
}

.showcase-user-list,
.showroom-user-list .user-list-items,
.showroom-user-list .user-list-available-wrapper,
.showroom-user-list .user-list-available {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: var(--font-size-text-s);
    margin: var(--layout-padding) 0;
    padding-right: calc(var(--layout-padding) / 2 - 2px);
    scrollbar-gutter: stable;
}

.showcase-user-list:has(div) {
    margin-top: 0;
    margin-bottom: var(--layout-padding-s);
}

.showcase-user-list {
    margin: 0;
}

.showcase-user-list .showcase-user-item,
.showroom-user-list .user-list-item {
    border-bottom: 1px solid var(--color-control-overlay-input);
    margin-bottom: var(--layout-padding-s);
    opacity: .5;
}

.showcase-user-list .showcase-user-item > div.user-email {
    margin-bottom: calc(var(--layout-space-s) / 1.5);
}

.showcase-user-list .showcase-user-item > div.user-access {
    color: var(--color-grey-medium);
    margin-bottom: var(--layout-padding);
}

.showcase-user-list .showcase-user-item:last-of-type,
.showroom-user-list .user-list-items .user-list-item:nth-last-of-type(-n+2),
.showroom-user-list .user-list-available .user-list-item:last-of-type {
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
}

.showcase-user-list .showcase-user-item:last-of-type > div:last-of-type {
    margin-bottom: 0;
}

.showcase-user-list:has(.showcase-user-item:first-of-type:last-of-type) {
    margin-top: 0;
}

.showcase-user-list .showcase-user-item.active {
    opacity: 1;
}

#showroom-control-panel-overlay .content-container:has(.user-list-items) {
    display: flex;
    flex-direction: column;
}

.showroom-user-list .user-list-items-wrapper,
.showroom-user-list .user-list-available-wrapper {
    height: max-content;
    max-height: calc((100dvh - var(--layout-header-height)) / 2);
}

.showroom-user-list .user-list-items {
    height: calc(100% - (var(--layout-padding) * 2));
    margin-bottom: 0;
}


.showroom-user-list .sub-headline {
    font-weight: 600;
    margin-bottom: var(--layout-padding);
}

.showroom-user-list .user-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--layout-padding-s);
    opacity: 1;
}

.showroom-user-list .user-list-item .user-data-wrapper {
    display: flex;
    flex-direction: column;
}

.showroom-user-list .user-list-item .user-name {
    margin-bottom: calc(var(--layout-space-s) / 1.5);
}

.showroom-user-list .user-list-item .user-email {
    color: var(--color-grey-medium);
    margin-bottom: var(--layout-padding-s);
}

.showroom-user-list .user-list-item:last-of-type .user-email {
    margin-bottom: 0;
}

.showroom-user-list .user-list-available-wrapper {
    border-radius: var(--border-radius-base);
    background-color: var(--color-control-overlay-input);
    padding: var(--layout-padding) var(--layout-padding-s);
    padding-right: calc(var(--layout-padding) / 2 - 4px);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    margin-bottom: 0;
}

.showroom-user-list .user-list-available {
    margin-bottom: 0;
}

.showroom-user-list .user-list-available:empty {
    margin: 0;
}



/***-------------------***/
/**   FRONT-END USER   ***/
/***-------------------***/

/* EXPOSED DATA */

.showcase-show .exposed-data-wrapper {
    max-height: calc(100dvh - var(--layout-header-height) - var(--layout-padding)) !important;
}

.exposed-data-section {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--layout-padding);
    border-bottom: 1px solid var(--color-control-overlay-input);
}

.exposed-data-section > * {
    margin-bottom: var(--layout-padding);
}

.exposed-data-section .exposed-data-item {
    display: flex;
}

.exposed-data-section .exposed-data-item > * {
    white-space: normal;
    word-wrap: break-word;
    margin-right: var(--layout-space-s);
    width: calc((100% - var(--layout-space-s)) / 2);
}

.exposed-data-section .exposed-data-item > *:last-child {
    margin-right: 0;
}

.exposed-data-section:last-of-type,
.exposed-data-section:first-of-type:last-of-type {
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
}

.exposed-data-section:last-of-type > div:last-of-type,
.exposed-data-section:first-of-type:last-of-type > div:last-of-type {
    margin-bottom: 0;
}

#form-exposed-data .select .form-field-value-wrapper {
    position: relative;
}

#form-exposed-data .select button[name="exposed-data-btn-open-category-overlay"] {
    position: absolute;
    right: calc((var(--layout-space-s) * 1.5) + var(--icon-size));
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--color-dashboard-btn);
    background-image: var(--icon-btn-plus);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-circle);
    padding: 0;
    filter: invert(1);
    z-index: 2;
    transition: var(--transition);
}

#form-exposed-data .select button[name="exposed-data-btn-open-category-overlay"]:hover {
    background-color: var(--color-grey);
}

/* TAG LIST */

.showcase-show .tag-list-wrapper {
    padding: 0;
}

/* MEDIA LIST */

.showcase-show .media-item-wrapper {
    height: calc(100dvh - var(--layout-header-height) - var(--input-height-adnimistration) - (var(--layout-padding) * 2)) !important;
}

.showcase-show .media-item a {
    width: 100%;
}

@media (max-width: 600px) {

    body.control-panel-open header {
        width: 100dvw !important;
    }

    #showroom-control-panel-overlay .headline {
        margin-top: var(--btn-height);
    }
    
    #showroom-control-panel-overlay .content-container {
        height: calc(100dvh - var(--layout-header-height) - var(--btn-height));
    }

    #showroom-control-panel-overlay form .form-input-container {
        max-height: calc(100dvh - var(--layout-header-height) - 3rem - (var(--layout-padding) * 2) - var(--btn-height));
    }

    .form-inline-wrapper:has(div.active) {
        min-height: calc((100dvh - var(--layout-header-height) - var(--btn-height)) / 2);
    }

    .showroom-control-panel-slider {
        width: calc(var(--showroom-overlay-width) / 1.25);
    }
    
    body.control-panel-slider-open.control-panel-open .showroom-control-panel-slider {
        right: var(--showroom-overlay-width);
    }

    .showroom-control-panel-slider .showroom-showcase-slider .splide__track {
        max-height :calc((((var(--showroom-overlay-width) / 1.25) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px) * 9 / 16) * 3 + (var(--layout-padding) * 2)) !important;
    }
    
    .showroom-showcase-slider .showroom-showcase-item {
        width: calc((var(--showroom-overlay-width) / 1.25) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px);
        height: calc(((var(--showroom-overlay-width) / 1.25) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px) * 9 / 16) !important;
    }

    body.control-panel-slider-open.control-panel-open .showroom-control-panel-slider {
        right: 0;
    }

    #information-box {
        max-width: 100%;
        min-width: 100%;
    }

    #information-box .title {
        margin-bottom: var(--layout-padding-s);
    }

    #information-box .more-information-wrapper .address,
    #information-box .more-information-wrapper .values {
        font-size: var(--font-size-text);
    }

    /* FRONT-END USER */

    .showcase-show .exposed-data-wrapper {
        max-height: calc(100dvh - var(--layout-header-height) - var(--layout-padding) - var(--btn-height)) !important;
    }

    .showcase-show .media-item-wrapper {
        height: calc(100dvh - var(--layout-header-height) - var(--input-height-adnimistration) - (var(--layout-padding) * 2) - var(--btn-height)) !important;
    }

}

@media (max-width: 480px) {
    .showroom-control-panel-slider {
        width: var(--showroom-overlay-width);
    }

    .showroom-showcase-slider .showroom-showcase-item {
        width: calc(var(--showroom-overlay-width) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px);
        height: calc((var(--showroom-overlay-width) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px) * 9 / 16) !important;
    }
    
    .showroom-control-panel-slider .showroom-showcase-slider .splide__track {
        max-height: calc(((var(--showroom-overlay-width) - (var(--layout-padding) * 3) - var(--control-icon-size) - var(--layout-space-s) - 2px) * 9 / 16) * 3 + (var(--layout-padding) * 2)) !important;
    }
}



/* Showroom SDK Control panel */

#showroom-control-panel-sdk {
    position: absolute;
    right: var(--layout-padding);
    bottom: calc(var(--layout-padding) - var(--layout-space-s) );
    display: flex;
    z-index: 19;
    transition: var(--transition);
}

#showroom-control-panel-sdk #control-panel-floors {
    background-image: var(--icon-control-floor);
}

#showroom-control-panel-sdk .control-panel-item:has(.control-panel-floors-overlay:not(.hidden)) {
    background-color: white;
    background-image: var(--icon-control-floor-black) !important;
}

#showroom-control-panel-sdk #control-panel-floor-plan-view {
    background-image: var(--icon-control-floor-plan-view);
}

#showroom-control-panel-sdk #control-panel-3d-view {
    background-image: var(--icon-control-3d-view);
}

#showroom-control-panel-sdk #control-panel-measurement {
    background-image: var(--icon-control-measurement);
}

.control-panel-floors-overlay:not(.hidden) {
    width: var(--btn-width);
    right: 0;
    bottom: calc(var(--control-icon-size) + var(--layout-padding));
    padding: var(--layout-space-s);
    max-height: max-content;
}

.control-panel-floors-overlay .floor {
    font-size: var(--font-size-text);
    height: var(--input-height-showroom);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--layout-space-s);
    transition: var(--transition);
    margin: .25rem 0;
}

.control-panel-floors-overlay .floor.active,
.control-panel-floors-overlay .floor:hover {
    background-color: var(--color-control-overlay-input);
}

/* Showroom loading screen */

.showroom-loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black-light);
    height: 100dvh;
    width: 100dvw;
    z-index: 9;
}

.showroom-loading-content {
    color: var(--color-white);
    font-weight: 500;
    overflow: hidden;
    position: relative;
}

.showroom-loading-content::after {
    animation: reveal 5s steps(40) infinite;
    background: var(--color-black-light);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@keyframes reveal {
    0% { left: 0; }
    100% { left: 102%; }
}

/* Spinner */
.spinner {
    animation: spin 1s linear infinite;
    border: 4px solid #ccc;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    height: 20px;
    width: 20px;
}

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

#control-panel-floors.loading {
    background-image: unset;
}

#control-panel-floors.loading .spinner {
    height: 35px;
    left: 18%;
    position: absolute;
    top: 18%;
    width: 35px;
}