#showroom-control-panel-overlay a {
    color: var(--color-white);
    font-size: var(--font-size-text-s);
}

#showroom-control-panel-overlay form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#showroom-control-panel-overlay form .form-input-container,
.showcase-show .exposed-data-wrapper {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100dvh - var(--layout-header-height) - 3rem - (var(--layout-padding) * 2));
    min-height: auto;
    width: calc(100% + var(--layout-padding) + 2px);
    padding-right: calc(var(--layout-padding) / 2 - 2px);
    padding-left: calc((var(--layout-padding) / 2));
    margin-left: calc(0px - (var(--layout-padding) / 2));
    scrollbar-gutter: stable;
}

#showroom-control-panel-overlay form .form-section,
#showroom-control-panel-overlay form .form-section .form-section-headline {
    margin-bottom: var(--layout-padding);
}

#showroom-control-panel-overlay form .form-section:not(:last-of-type) {
    border-bottom: 1px solid var(--color-control-overlay-input);
}

#showroom-control-panel-overlay form .form-section:last-of-type,
#showroom-control-panel-overlay form .form-section:last-of-type .form-field:last-of-type,
#showroom-control-panel-overlay form .form-input-container > .form-field:last-of-type {
    margin-bottom: 0;
}

#showroom-control-panel-overlay form .form-section-headline h3 {
    font-size: var(--font-size-text);
}

#showroom-control-panel-overlay form .form-field {
    margin-bottom: var(--layout-padding);
    width: 100%;
}

#showroom-control-panel-overlay form .form-field > label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: var(--font-size-text-s);
}

#showroom-control-panel-overlay form .form-field.text,
#showroom-control-panel-overlay form .form-field.number {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#showroom-control-panel-overlay form .form-field.text > label,
#showroom-control-panel-overlay form .form-field.number > label {
    width: calc(44% - var(--layout-padding-s));
    margin-bottom: 0 !important;
    margin-right: var(--layout-padding-s);
}
#showroom-control-panel-overlay form .form-field.text .form-field-input-wrapper,
#showroom-control-panel-overlay form .form-field.number .form-field-input-wrapper {
    width: 56%;
}

#showroom-control-panel-overlay form .form-field input[type="text"],
#showroom-control-panel-overlay form .form-field input[type="number"],
#showroom-control-panel-overlay form .form-field input[type="datetime-local"],
#showroom-control-panel-overlay form .form-field textarea,
#showroom-control-panel-overlay .multi-select .multi-select-header,
#showroom-control-panel-overlay .multi-select .multi-select-options,
#showroom-control-panel-overlay form .form-field.select .exposed-data-media-select {
    padding: 0 var(--layout-padding-s);
    height: var(--input-height-showroom);
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    background-color: var(--color-control-overlay-input);
    font-size: var(--font-size-text-s);
    letter-spacing: var(--letter-spacing);
    width: 100%;
    color: var(--color-white);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* For Safari */
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}


#showroom-control-panel-overlay form .form-field.coordinate > .btn:has(input.space-tag-coordinates-select[type="checkbox"]:checked) > input[type="text"]::placeholder,
#showroom-control-panel-overlay form .form-field.coordinate > .btn:has(input.space-tag-coordinates-select[type="checkbox"]:checked) > input#space-tag-coordinates-label {
    color: var(--color-black) !important;
}

#showroom-control-panel-overlay form .form-field textarea {
    resize: vertical;
    padding: var(--layout-space-s);
    height: calc(var(--input-height-showroom) * 2);
    max-height: calc(var(--input-height-showroom) * 10);
}

#showroom-control-panel-overlay form .form-field.upload {
    margin-bottom: var(--layout-padding-s);
}

#showroom-control-panel-overlay form .form-field.upload .preview-image img {
    border-radius: var(--border-radius-small);
    cursor: pointer;
    width: 100%;
}

#showroom-control-panel-overlay form .form-field.upload .preview-image-description {
    font-size: var(--font-size-text-s);
    margin-top: var(--layout-space-s);
}

#showroom-control-panel-overlay form .form-field .form-field-input-wrapper .form-field-value-wrapper select {
    appearance: none;
    -webkit-appearance: none; 
    -moz-appearance: none; 
    position: relative;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.46484 2.75L4.64682 5.93198C4.84209 6.12724 5.15867 6.12724 5.35393 5.93198L8.53591 2.75' stroke='white' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 10px 8px;
    background-position: center right var(--layout-padding-s);
}

#showroom-control-panel-overlay form .form-field .form-field-input-wrapper .form-field-value-wrapper select option {
    position: absolute;
}

#showroom-control-panel-overlay form .form-field:not(.checkbox) label,
#showroom-control-panel-overlay form .form-field.checkbox > div:not(:last-of-type) {
    margin-bottom: var(--layout-padding-s);
}

#showroom-control-panel-overlay form .form-field.checkbox,
#showroom-control-panel-overlay form .form-field.checkbox > div,
#showroom-control-panel-overlay form .form-field.checkbox > .use-space-checkbox > label {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

#showroom-control-panel-overlay form .form-field.checkbox:has(div) {
    align-items: start;
    flex-direction: column;
}

#showroom-control-panel-overlay form .form-field.checkbox label {
    margin-left: 0;
}

#showroom-control-panel-overlay form .form-field.checkbox input {
    margin-right: var(--layout-space-s);
}

#showroom-control-panel-overlay form .form-field input:focus-visible,
#showroom-control-panel-overlay form .form-field textarea:focus-visible,
#showroom-control-panel-overlay form .form-field select:focus-visible,
#showroom-control-panel-overlay .multi-select .multi-select-header.multi-select-header-active {
    border: 1px solid var(--color-grey-dark);
    outline: none;
}

#showroom-control-panel-overlay .tag-item.active form .form-field input:focus-visible,
#showroom-control-panel-overlay .tag-item.active form .form-field textarea:focus-visible {
    border: 1px solid var(--color-grey-medium);
}

#showroom-control-panel-overlay form .form-field input::placeholder,
#showroom-control-panel-overlay form .form-field textarea::placeholder {
    color: var(--color-grey-medium);
}

#showroom-control-panel-overlay form input:-webkit-autofill,
#showroom-control-panel-overlay form input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0px 1000px var(--color-grey-light) inset !important; 
    box-shadow: 0 0 0px 1000px var(--color-grey-light) inset !important;
    font-size: inherit !important;
}

#showroom-control-panel-overlay form input:-moz-autofill {
    background-color: var(--color-grey-light) !important;
    color: var(--color-black) !important;
}

#showroom-control-panel-overlay form input:focus::selection {
    background-color: var(--color-grey-dark);
    color: var(--color-white);
}

#showroom-control-panel-overlay form .form-field textarea:focus::selection {
    background-color: var(--color-grey-dark);
}

#showroom-control-panel-overlay form .form-field.checkbox input[type="checkbox"],
#showroom-control-panel-overlay form .form-field.select .multi-select .multi-select-option .multi-select-option-radio {
    background-color: transparent;
    border-radius: 2px;
    border: 1px solid #fff;
    width: calc(var(--icon-size) / 1.75);
    height: calc(var(--icon-size) / 1.75);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-size: calc(var(--icon-size) / 2.85);
    background-position: center;
    background-repeat: no-repeat;
}

#showroom-control-panel-overlay form .form-field.checkbox input:checked,
#showroom-control-panel-overlay form .form-field.select .multi-select .multi-select-option.multi-select-selected .multi-select-option-radio {
    background-color: var(--color-white);
    filter: unset;
}

#showroom-control-panel-overlay form .form-action-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: var(--layout-padding);
    max-height: calc((100% - var(--layout-padding)) / 2);
    height: auto;
}

#showroom-control-panel-overlay form .form-action-container button:not(:last-of-type) {
    margin-right: var(--layout-space-s);
}

#showroom-control-panel-overlay form .form-field.form-field.select .exposed-data-item {
    display: flex;
    flex-direction: column;
}

#showroom-control-panel-overlay form .form-field.form-field.select-modal .media-item,
#showroom-control-panel-overlay form .form-field.form-field.select-modal .category-item,
#showroom-control-panel-overlay form .form-field.form-field.select-modal .tag-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--layout-padding-s);
}

#showroom-control-panel-overlay form .form-field.form-field.select-modal button,
#showroom-control-panel-overlay form .form-field.coordinate > .btn {
    width: 100%;
    background-color: var(--color-control-overlay-input);
    color: var(--color-white);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid transparent;
    font-weight: 400;
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn.no-coordinates-available {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 var(--color-control-overlay-input);
    }
    50% {
      transform: scale(1.02);
      box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

#showroom-control-panel-overlay form .form-field.form-field.select-modal button,
#showroom-control-panel-overlay form .form-field.coordinate > .btn,
#showroom-control-panel-overlay form .form-field > button {
    width: 100%;
}

#showroom-control-panel-overlay form .form-field.form-field.select-modal button:hover {
    background-color: var(--btn-grey-default);
    color: var(--color-black);
}

#showroom-control-panel-overlay form .form-field.form-field.select-modal button:active,
#showroom-control-panel-overlay form .form-field.form-field.select-modal button:focus {
    border: 1px solid var(--color-grey-dark);
    background-color: var(--btn-grey-default);
    color: var(--color-black);
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn {
    padding: 0;
    position: relative;
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn > input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
    background-color: transparent;
    text-align: center;
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn > input::placeholder {
    color: var(--color-white);
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn > input[type="checkbox"] {
    cursor: pointer;
    opacity: 0;
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn:has(input[type="checkbox"]:checked),
#showroom-control-panel-overlay form .form-field.coordinate > .btn:has(input[type="checkbox"]:hover) {
    background-color: var(--color-white);
    color: var(--color-white);
}

#showroom-control-panel-overlay form .form-field.coordinate > .btn:has(input[type="checkbox"]:checked) input[type="text"]::placeholder,
#showroom-control-panel-overlay form .form-field.coordinate > .btn:hover > input[type="text"]::placeholder{
    color: var(--color-black);
}

#showroom-control-panel-overlay form .form-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: var(--icon-calendar);
    background-repeat: no-repeat;
    cursor: pointer;
}



/* multi select */

#showroom-control-panel-overlay .multi-select .multi-select-header .multi-select-header-placeholder {
    color: var(--color-grey-medium);
    font-size: var(--font-size-text-s);
}

#showroom-control-panel-overlay .multi-select .multi-select-header.multi-select-header-active .multi-select-header-placeholder {
    color: var(--color-white);
}

#showroom-control-panel-overlay .multi-select .multi-select-header::after {
    filter: unset;
    opacity: .5;
}

#showroom-control-panel-overlay .multi-select .multi-select-header.multi-select-header-active::after {
    opacity: 1;
}

#showroom-control-panel-overlay .multi-select .multi-select-options {
    height: auto;
    background: var(--color-grey-dark);
    padding-bottom: var(--layout-space-s);
}

#showroom-control-panel-overlay .multi-select .multi-select-options span {
    color: var(--color-white);
}

#showroom-control-panel-overlay .multi-select .multi-select-options > * {
    margin: var(--layout-space-s) 0 0 !important;
    height: var(--layout-space) !important;
    background-color: transparent !important;
    border: none !important;
}

#showroom-control-panel-overlay .multi-select .multi-select-options > div:hover,
#showroom-control-panel-overlay .multi-select .multi-select-options > div:active {
    background-color: var(--color-control-overlay-input) !important;
}

#showroom-control-panel-overlay .multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio, 
#showroom-control-panel-overlay .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
    background-image: var(--icon-checkbox);
    background-color: var(--color-white);
}



/* showcase form with enable checkbox  */

#showroom-control-panel-overlay .showroom-tag-list:has(.enable-in-showcase-checkbox),
#showroom-control-panel-overlay .showroom-media-list:has(.enable-in-showcase-checkbox),
#showroom-control-panel-overlay .showroom-restricted-area-list:has(.enable-in-showcase-checkbox) {
    width: calc(100% + (var(--layout-padding) / 2 + 2px));
}

#showroom-control-panel-overlay .showroom-tag-list:has(.enable-in-showcase-checkbox) .list-overlay-search,
#showroom-control-panel-overlay .showroom-media-list:has(.enable-in-showcase-checkbox) .list-overlay-search,
#showroom-control-panel-overlay .showroom-restricted-area-list:has(.enable-in-showcase-checkbox) .list-overlay-search {
    width: calc(100% - (var(--layout-padding) / 2 + 2px));
}

.media-item-wrapper:has(.enable-in-showcase-checkbox),
.restricted-area-items:has(.enable-in-showcase-checkbox) {
    max-height: calc(100% - var(--input-height-adnimistration) - var(--layout-padding));
    width: 100%;
    margin-bottom: 0;
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper {
    flex-direction: row;
    align-items: center;    
    justify-content: space-between;
}

#showroom-control-panel-overlay .tag-item span.open,
.more-tags .tag-item > a,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .form-field-value-wrapper,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .exposed-data-item .exposed-data-media-list {
    width: calc(100% - var(--icon-size) - var(--layout-padding-s));
    margin-right: var(--layout-padding-s);
    position: relative;
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .exposed-data-item .exposed-data-media-list

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .exposed-data-item .form-field-input-wrapper:has(.media-item.hidden) .enable-in-showcase-checkbox,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .exposed-data-item .form-field-input-wrapper .enable-in-showcase-checkbox {
    display: none;
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .exposed-data-item .form-field-input-wrapper:has(.media-item) .enable-in-showcase-checkbox {
    display: block
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper input:not(:focus, :active) + button.reset-to-space-value,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper textarea:not(:focus, :active) + button.reset-to-space-value {
    opacity: 0;
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper button.reset-to-space-value {
    display: block;
    position: absolute;
    right: var(--layout-space-s);
    top: 50%;
    transform: translate(0, -50%);
    height: var(--icon-size);
    width: var(--icon-size);
    background-color: var(--color-grey-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-circle);
    border: none;
    text-indent: -9999px;
    cursor: pointer;
    transition: var(--transition);
}

#showroom-control-panel-overlay .tag-item .enable-in-showcase-checkbox,
#showroom-control-panel-overlay .media-item .enable-in-showcase-checkbox,
#showroom-control-panel-overlay .restricted-area-list-item .enable-in-showcase-checkbox,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .enable-in-showcase-checkbox {
    position: relative;
    text-indent: -9999px;
    height: var(--icon-size);
    width: var(--icon-size);
    border-radius: var(--border-radius-circle);
    border: 1px solid #fff;
    cursor: pointer;
}

#showroom-control-panel-overlay .tag-item .enable-in-showcase-checkbox input,
#showroom-control-panel-overlay .media-item .enable-in-showcase-checkbox input,
#showroom-control-panel-overlay .restricted-area-list-item .enable-in-showcase-checkbox input,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .enable-in-showcase-checkbox input {
    width: 0;
    height: 0;
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper button.reset-to-space-value::before,
#showroom-control-panel-overlay .tag-item .enable-in-showcase-checkbox label::before,
#showroom-control-panel-overlay .media-item .enable-in-showcase-checkbox label::before,
#showroom-control-panel-overlay .restricted-area-list-item .enable-in-showcase-checkbox label::before,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .enable-in-showcase-checkbox label::before {
    content: '';
    position: absolute;
    height: var(--icon-size);
    width: var(--icon-size);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--icon-x-input);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper button.reset-to-space-value::before {
    background-image: var(--icon-x-input);
}

#showroom-control-panel-overlay .tag-item .enable-in-showcase-checkbox label::before,
#showroom-control-panel-overlay .media-item .enable-in-showcase-checkbox label::before,
#showroom-control-panel-overlay .restricted-area-list-item .enable-in-showcase-checkbox label::before,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .enable-in-showcase-checkbox label::before {
    background-color: var(--color-white);
    background-image: var(--icon-checkbox);
    background-size: var(--layout-space-s);
    border-radius: var(--border-radius-circle);
    opacity: 0;
    transition: var(--transition);
    cursor: pointer;
}

#showroom-control-panel-overlay .tag-item .enable-in-showcase-checkbox input:checked ~ label::before,
#showroom-control-panel-overlay .media-item .enable-in-showcase-checkbox input:checked ~ label::before,
#showroom-control-panel-overlay .restricted-area-list-item .enable-in-showcase-checkbox input:checked ~ label::before,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .enable-in-showcase-checkbox input:checked ~ label::before,
#showroom-control-panel-overlay form.exposed-data-form-type--showcase .form-field-input-wrapper .enable-in-showcase-checkbox label:has(input.check-use-space-field-value:checked):before {
    opacity: 1;
}

#showroom-control-panel-overlay form .form-field input[type="number"] {
    -moz-appearance: textfield;
}

#showroom-control-panel-overlay form .form-field input[type="number"]::-webkit-outer-spin-button,
#showroom-control-panel-overlay form .form-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#showroom-control-panel-overlay .restricted-area-list-item .enable-in-showcase-checkbox {
    position: absolute;
    right: 0;
}



/* Accordion */

.accordion-label {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 400;
    justify-content: space-between;
    position: relative;
    user-select: none;
}

.accordion-label::after {
    background-image: var(--icon-information-arrow);
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    height: var(--icon-size);
    position: absolute;
    right: 0;
    transition: var(--transition);
    transform: rotate(90deg);
    width: var(--icon-size);
}

input.accordion-checkbox:checked + .accordion-label::after {
    transform: rotate(270deg);
}

input.accordion-checkbox {
    display: none;
}