body.layout--administration #main-content {
    container-type: inline-size;
}

body.layout--administration #main-content .user-add-wrapper {
    height: 100%;
}

body.layout--administration .form-field.checkbox label {
    font-weight: 400;
}

/********************************/
/*   Search for administraion   */
/********************************/

.media-search-wrapper,
.category-search-wrapper,
.tag-search-filter-wrapper,
.user-search-wrapper,
.delete-container,
#media-content-container .media-form-wrapper,
#category-content-wrapper .category-form-wrapper,
.space-list-view-filter {
    background-color: var(--color-grey-light);
    border-radius: var(--border-radius-base);
    padding: var(--layout-padding-m);
}

.media-search-wrapper,
.category-search-wrapper,
.tag-search-filter-wrapper,
.user-search-wrapper,
.space-list-view-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--layout-padding);
    padding: var(--layout-space-s) var(--layout-padding-m);
    flex-wrap: wrap;
    min-height: calc(var(--input-height-adnimistration) + var(--layout-space-s) + var(--layout-space-s));
}

.media-search-wrapper .search-wrapper,
.category-search-wrapper .search-wrapper,
.tag-search-filter-wrapper .search-wrapper,
.space-list-view-filter .search-wrapper,
.user-search-wrapper .dt-search {
    flex: 1;
}

.media-search-wrapper .search-wrapper label::before,
.category-search-wrapper .search-wrapper label::before,
.tag-search-filter-wrapper .search-wrapper label::before,
.space-list-view-filter .search-wrapper label::before {
    content: '';
    display: block;
    color: transparent;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: var(--icon-search);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.media-search-wrapper .search-wrapper label,
.category-search-wrapper .search-wrapper label,
.tag-search-filter-wrapper .search-wrapper label,
.space-list-view-filter .search-wrapper label,
.user-search-wrapper .dt-search {
    display: flex;
    align-items: center;
}

.media-search-wrapper input,
.category-search-wrapper input,
.tag-search-filter-wrapper input,
.user-search-wrapper .dt-search input,
.space-list-view-filter input {
    width: 100%;
    outline: none !important;
}

.space-list-view-filter.showcase-list-view .search-wrapper input {
    max-width: 100% !important;
}

.search-wrapper input {
    max-width: calc((100vw - var(--navigation-width) - (var(--layout-padding) * 2) - var(--icon-size)) / 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navigation--closed .search-wrapper input {
    max-width: calc((100vw - (var(--layout-padding) * 2) - var(--icon-size)) / 2);
}

.space-list-view-filter .search-wrapper input {
    max-width: calc((100vw - var(--navigation-width) - (var(--layout-padding) * 2) - var(--icon-size) - (var(--layout-space-s) * 2) - (var(--btn-edit-height) * 2) - (var(--layout-padding-m) * 2)) / 2);
}

.navigation--closed .space-list-view-filter .search-wrapper input {
    max-width: calc((100vw - (var(--layout-padding) * 2) - var(--icon-size) - (var(--layout-space-s) * 2) - (var(--btn-edit-height) * 2) - (var(--layout-padding-m) * 2)) / 2);
}

.category-wrapper {
    position: relative;
    padding-left: var(--layout-padding-s);
}

.list-view-switcher {
    display: flex;
}

.list-view-switcher button,
#user-list-overview-table_wrapper .dt-length > select,
.add-admin > a::before {
    width: var(--btn-edit-height);
    height: var(--btn-edit-height);
    position: relative;
    border-radius: var(--border-radius-small);
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-white);
    transition: var(--transition);
    cursor: pointer;
    border: unset;
    margin-left: var(--layout-space-s);
}

.list-view-switcher button.list-view {
    background-image: var(--icon-list-viewing);
}

.list-view-switcher button.list-view-card {
    background-image: var(--icon-list-viewing-card);
}

.list-view-switcher button.list-view-map {
    background-image: var(--icon-list-viewing-map);
}

.list-view-switcher button:hover,
.list-view-switcher button.active {
    filter: invert(1);
}

.list-view-switcher button.active {
    outline: 2px solid var(--color-grey-dark);
}



/************************************/
/*   Content for Media / Category   */
/************************************/

#media-content-wrapper,
#category-content-wrapper {
    display: grid;
    grid-template-columns: var(--layout-grid-12);
    grid-gap: var(--layout-padding-m);
    height: calc(100% - var(--input-height-adnimistration) - var(--layout-space-s) - var(--layout-space-s) - var(--layout-padding));
}

#media-content-wrapper > *,
#category-content-wrapper > * {
    overflow-x: hidden;
}


/**   Tree for Media / Category   **/

#media-directory-tree-wrapper,
#category-list-wrapper {
    grid-column: span 3;
}

#category-list-wrapper .add-category-item {
    cursor: pointer;
}

#category-list-wrapper .add-category-item .category-name {
    padding-left: calc(var(--layout-space-s) - 1px) !important;
}

#category-list-wrapper:has(.category-name-wrapper.active) .add-category-item > .category-name:not(.active):not(:hover)::before {
    background-color: var(--color-grey-light);
}

#category-list-wrapper .add-category-item > .category-name.active::before {
    filter: invert(1);
}

#category-list-wrapper .add-category-item > .category-name::before {
    content: '';
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--layout-space-s);
    background-image: var(--icon-btn-plus);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-color: var(--color-white);
    border: 1px solid var(--btn-grey-medium);
    border-radius: var(--border-radius-circle);
    transition: var(--transition);
    position: relative;
    pointer-events: none;
}

#media-directory-tree-wrapper .root-media-item,
#media-directory-tree-wrapper .tree-row,
.no-element-found,
#category-list-wrapper .add-category-item > .category-name,
#category-list-wrapper .category-name-wrapper {
    height: calc(var(--input-height-adnimistration) - 4px);
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    padding: 0 var(--layout-padding-s);
}

#media-directory-tree-wrapper .tree-row span,
#category-list-wrapper .category-name-wrapper span.category-name {
    margin-left: calc(1rem * var(--level));
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#media-directory-tree-wrapper .media-directory-list .media-directory-tree ul,
#category-list-wrapper .media-directory-list .media-directory-tree ul {
    padding-left: var(--layout-padding);
}

#media-directory-tree-wrapper .root-media-item,
.tree-row:hover,
.tree-row.is-current,
#category-list-wrapper .add-category-item > .category-name,
#category-list-wrapper .add-category-item > .category-name.active,
#category-list-wrapper .add-category-item > .category-name:hover,
#category-list-wrapper:has(.category-name-wrapper.active) .add-category-item > .category-name.active,
.category-name-wrapper.active,
.category-name-wrapper:hover {
    background-color: var(--color-grey-light);
}

#media-directory-tree-wrapper .root-media-item:hover {
    cursor: pointer;
}

#media-directory-tree-wrapper:has(.tree-row.is-current) .root-media-item,
#category-list-wrapper:has(.category-name-wrapper.active) .add-category-item > .category-name:not(.active):not(:hover),
#category-list-wrapper:has(.category-name.active) .category-name-wrapper:not(.active):not(:hover) {
    background-color: transparent !important;
}

#media-directory-tree-wrapper .directory,
#category-list-wrapper .category-item {
    position: relative;
}

#media-directory-tree-wrapper .directory input[type="checkbox"],
#category-list-wrapper .category-item input[type="checkbox"] {
    position: absolute;
    right: 0;
    z-index: 1;
    opacity: 0;
}

#media-directory-tree-wrapper .directory input[type="checkbox"]:checked ~ .directory,
#category-list-wrapper .category-item input[type="checkbox"]:checked ~ .category-item {
    opacity: 1;
    height: inherit;
    pointer-events: all;
}

#media-directory-tree-wrapper .directory input[type="checkbox"]:not(:checked) ~ .directory,
#category-list-wrapper .category-item input[type="checkbox"]:not(:checked) ~ .category-item {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

#media-directory-tree-wrapper .tree-row:has(span.directory-name)::before,
#category-list-wrapper .category-name-wrapper:has(span.category-name)::before {
    content: '';
    position: relative;
    width: 10px;
    width: calc(var(--icon-size) - 1rem);
    height:  calc(var(--icon-size) - .25rem);
    float: left;
    left: 5px;
    top: calc(0% - (var(--icon-size) / 2));
    border-left: .5px solid var(--color-grey);
    border-bottom: .5px solid var(--color-grey);
    margin-top: calc(var(--layout-padding-s) / 2);;
    margin-right: var(--layout-space-s);
    opacity: 0.5;
}

#media-directory-tree-wrapper input[name="open-subdirectory"] ~ label,
#category-list-wrapper input[name="open-subcategory"] ~ label {
    position: absolute;
    right: 0;
    top: calc(var(--input-height) / 4);
    top: calc((var(--input-height-adnimistration) - 4px - var(--icon-size)) / 2);
    right: calc((var(--input-height-adnimistration) - 4px - var(--icon-size)) / 2);;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: var(--icon-information-arrow);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
    filter: invert(1);
    transition: var(--transition);
    opacity: 0.25;
}

#media-directory-tree-wrapper input[name="open-subdirectory"] ~ label:hover,
#category-list-wrapper input[name="open-subcategory"] ~ label:hover {
    opacity: 1;
}

#media-directory-tree-wrapper input[name="open-subdirectory"] ~ label:hover + .tree-row,
#category-list-wrapper input[name="open-subcategory"] ~ label:hover + .category-name {
    background-color: var(--color-grey-light);
}

#media-directory-tree-wrapper input[name="open-subdirectory"]:checked ~ label,
#category-list-wrapper input[name="open-subcategory"]:checked ~ label {
    transform: rotate(90deg);
}

/*
#category-list-wrapper .category-list .category-item.first-custom-category {
    border-top: 2px solid var(--color-grey-light);
    padding-top: 10px;
}
*/ 


/**   Content and Form for Media / Category   **/

#media-content-container,
#category-detail-wrapper {
    grid-column: span 9;
}

#media-content-wrapper > *,
#category-content-wrapper > * {
    overflow-y: auto;
    scrollbar-gutter: stable;
    width: calc(100% + (var(--layout-padding) / 2 + 2px));
    padding-right: calc(var(--layout-padding) / 2 - 2px);
}

#media-content-container .media-form-wrapper .form-field,
#category-content-wrapper .category-form-wrapper .form-field {
    margin: 0;
}

#media-content-container .media-form-wrapper .form-field,
#media-content-container .media-form-wrapper .form-field.directory #form-field-actions,
#category-content-wrapper .category-form-wrapper .form-field {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

#media-content-container .media-form-wrapper .form-field,
#media-content-container .media-form-wrapper .form-field:not(.checkbox) label,
#category-content-wrapper .category-form-wrapper .form-field,
#category-content-wrapper .category-form-wrapper .form-field:not(.checkbox) label {
    margin-bottom: var(--layout-padding-m);
    margin-right: 0;
}

#media-content-container .media-form-wrapper .form-field label,
#category-content-wrapper .category-form-wrapper .form-field label {
    flex: 1 1 100%;
}

#media-content-container .media-form-wrapper .form-field input,
#category-content-wrapper .category-form-wrapper .form-field input {
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: var(--font-size-text);
    flex: 1;
}

#media-content-container .media-form-wrapper .form-field input:focus-visible,
#media-content-container .media-form-wrapper .multi-select .multi-select-header.multi-select-header-active,
#category-content-wrapper .category-form-wrapper .form-field input:focus-visible {
    outline: 1px solid var(--color-grey);
}

#media-content-container .media-form-wrapper .form-field.checkbox,
#category-content-wrapper .category-form-wrapper .form-field.checkbox {
    flex-wrap: unset;
    align-items: center;
}

#media-content-container .media-form-wrapper .media-dropzone {
    width: 100%;
    border: 1px solid var(--color-grey);
    border-radius: var(--border-radius-small);
    background: var(--color-white);
    cursor: pointer;
    height: calc(var(--media-list-height) + .5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-grey-dark);
}

#media-content-container .media-form-wrapper .media-dropzone::before {
    content: '';
    background-image: var(--icon-data-drop);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--layout-space-s);
    margin-top: calc(var(--layout-space-s) / 4);
}

#media-content-container .media-form-wrapper .media-dropzone.dropzone-dragover {
    border: 1px solid var(--color-grey-dark);
}

#media-content-container .media-form-wrapper .form-action-container,
#category-content-wrapper .form-action-container {
    display: flex;
    justify-content: flex-end;
}



/***************/
/**   Media   **/
/***************/

.media-edit-wrapper {
    padding-top: var(--layout-padding);
}

.media-edit-wrapper .media-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--color-grey-light);
    height: var(--media-list-height);
}

.media-edit-wrapper .media-item:last-of-type {
    border-bottom: none;
}

.media-edit-wrapper .media-item .media-title {
    flex: 1 1 80%;
}

.media-edit-wrapper .is-search-filter .media-item .media-title {
    flex: 1 1 30%;
}

.media-edit-wrapper .is-search-filter .media-item .media-path {
    color: var(--color-grey-medium);
    flex: 1 1 50%;
    font-size: var(--font-size-text-s);
    margin-right: calc(var(--layout-padding-s) / 1.5);
}

.media-edit-wrapper .media-item .media-type {
    flex: 1 1 20%;
    text-align: end;
    font-size: var(--font-size-text-s);
    font-weight: 300;
    color: var(--color-grey-medium);
    margin-right: calc(var(--layout-padding-s) / 1.5);
}

.media-edit-wrapper .is-search-filter .media-item .media-type {
    flex: 1 1 15%;
}

.media-edit-wrapper .media-item .media-action {
    flex: 1;
    justify-content: end;
    display: flex;
    align-items: center;
}

.media-edit-wrapper .media-item .media-title span {
    cursor: pointer;
}

#media-content-container .error {
    border: 1px solid var(--color-red);
}

.category-assignment-wrapper {
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: var(--font-size-text);
    border-radius: var(--border-radius-small);
    flex: 1;
}



/******************/
/**   Category   **/
/******************/

#category-content-wrapper .category-form-wrapper .form-action-container button {
    margin-left: var(--layout-padding);
    margin-right: 0;
}

#category-content-wrapper .category-form-wrapper .form-action-container button:first-of-type {
    margin-left: 0;
}

body.category-select-parent #category-list-wrapper {
    overflow: visible;
}

body.category-select-parent .category-list .category-name-wrapper {
    border-radius: unset !important;
}

body.category-select-parent #category-list-wrapper > .category-list {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow);
    overflow-y: scroll;
    max-height: calc(100dvh - var(--layout-header-height) - (var(--layout-space-s) * 2) - (var(--input-height-adnimistration) * 2 - 4px) - (var(--layout-padding) * 2));
}

#category-content-wrapper .category-form-wrapper .form-field:has(button[name="select-category-parent"]) {
    justify-content: flex-start;
    align-items: center;
}

body.category-select-parent #category-content-wrapper .category-form-wrapper button[name="select-category-parent"] {
    background-color: var(--color-black);
    color: var(--color-white);
}

#category-content-wrapper .category-form-wrapper .category-parent-name {
    margin-left: var(--layout-padding);
}

#category-detail-wrapper[data-isnew="1"] button span[data-type="save"] {display: none;}
#category-detail-wrapper[data-isnew="1"] button[name="delete"] {display: none;}
#category-detail-wrapper[data-isnew="0"] button span[data-type="create"] {display: none;}

#category-content-wrapper .error {
    border: 1px solid var(--color-red);
}



/*************+**/
/**   Delete   **/
/*************+**/

.delete-container.modal-container {
    display: none;
}

.delete-container > *:not(:last-of-type) {
    margin-bottom: var(--layout-padding);
}

.delete-container.modal-container .modal-headline {
    font-weight: 500;
    padding: 0;
}

.delete-container .modal-content {
    font-size: var(--font-size-text-s);
}

.delete-container .modal-headline .btn.btn-cancel {
    position: absolute;
    top: var(--layout-padding-s);
    right: var(--layout-padding-s);
}

.delete-container .modal-action-wrapper {
    display: flex;
}

.delete-container .modal-action-wrapper button {
    width: 100%;
    background-color: var(--color-grey-light);
    font-size: calc(var(--font-size-text-s) - 2px);
}

.delete-container .modal-action-wrapper button.delete-media-decision:hover,
.delete-container .modal-headline .btn.btn-cancel {
    background-color: var(--color-grey);
}

.delete-container .modal-action-wrapper button:not(:last-of-type) {
    margin-right: var(--layout-padding);
}

.delete-container .modal-action-wrapper .btn.btn-delete {
    background-color: var(--color-red);
    color: var(--color-white);
}

.delete-container .modal-action-wrapper .btn.btn-delete.delete-all {
    background-color: var(--color-black);
}

.delete-container .modal-action-wrapper .btn.btn-delete:hover {
    background-color: var(--color-red-dark);
}



/**************/
/*   Spaces   */
/**************/

#spaces-list-wrapper {
    display: grid;
    grid-template-columns: var(--layout-grid-12);
    grid-auto-rows: min-content;
    grid-gap: var(--layout-padding);
    overflow-y: auto;
    scrollbar-gutter: stable;
    width: calc(100% + (var(--layout-padding-m) / 2 + 2px));
    padding-right: calc(var(--layout-padding-m) / 2 - 2px);
    height: calc(100% - (var(--layout-space-s) * 2) - var(--input-height-adnimistration));
    padding-bottom: var(--layout-padding);
}

#spaces-list-wrapper .space-item {
    position: relative;
    grid-column: span 6;
    padding-top: var(--aspect-ratio-default);
}

#spaces-list-wrapper .space-item > a,
#spaces-list-wrapper .space-item .space-information,
#spaces-list-wrapper .space-item .space-image::after,
#spaces-list-wrapper .space-item .space-image,
#spaces-list-wrapper .space-item img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

#spaces-list-wrapper .space-item .space-image {
    border-radius: var(--border-radius-base);
    background-color: var(--color-grey);
    overflow: hidden;
}

#spaces-list-wrapper .space-item .space-image::after {
    content: '';
    top: unset;
    bottom: 0;
    height: 50%;
    background: var(--color-background-gardient-top);
    opacity: 0.9;
    pointer-events: none;
    transform: scaleY(-1);
}

#spaces-list-wrapper .space-item img {
    object-fit: cover;
}

#spaces-list-wrapper .space-item .space-information {
    top: unset;
    bottom: 0;
    height: auto;
    display: grid;
    grid-template-columns: var(--layout-grid-12);
    grid-gap: var(--layout-space-s);
    color: var(--color-white);
    padding: var(--layout-padding-m);
}

#spaces-list-wrapper .space-item .space-information > * {
    z-index: 2;
}

#spaces-list-wrapper .space-item .space-information .space-title {
    font-weight: 700;
}

#spaces-list-wrapper .space-item .space-information .space-title,
#spaces-list-wrapper .space-item .space-information .space-address {
    grid-column: span 9;
}

#spaces-list-wrapper .space-item .space-information .space-area,
#spaces-list-wrapper .space-item .space-information .space-showcases {
    grid-column: span 3;
    text-align: right;
}

#spaces-list-wrapper .space-item .space-information .space-showcases {
    display: flex;
    justify-content: end;
    align-items: center;
}

#spaces-list-wrapper .space-item .space-information .space-showcases::before {
    content: '';
    background-image: var(--icon-menu-showcases);
    background-size: cover;
    background-repeat: no-repeat;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: 4px;
    filter: invert(1);
}

.no-space-found {
    grid-column: span 12;
    text-align: center;
}

/**   Spaces list   **/

#spaces-list-wrapper[data-list-type="list"] .space-item {
    grid-column: span 12;
    padding: 0;
}

#spaces-list-wrapper[data-list-type="list"] .space-item a {
    position: relative;
    display: grid;
    grid-template-columns: var(--layout-grid-12);
    grid-auto-rows: min-content;
    height: max-content;
}

#spaces-list-wrapper[data-list-type="list"] .space-item a > * {
    position: relative;
    grid-column: span 9;
}

#spaces-list-wrapper[data-list-type="list"] .space-item a > .space-image {
    grid-column: span 3;
    padding-top: var(--aspect-ratio-medium);
    border-radius: var(--border-radius-small);
}

#spaces-list-wrapper[data-list-type="list"] .space-item .space-image::after {
    height: 33%;
}

#spaces-list-wrapper[data-list-type="list"] .space-item .space-information {
    display: flex;
    flex-direction: column;
    color: var(--color-black);
    position: unset;
    padding: 0 var(--layout-padding-m);
    grid-gap: 0;
}

#spaces-list-wrapper[data-list-type="list"] .space-item .space-information > * {
    text-align: left;
    margin-bottom: var(--layout-padding-s);
}

#spaces-list-wrapper[data-list-type="list"] .space-item .space-information .space-showcases {
    position: absolute;
    left: var(--layout-padding-m);
    width: calc(100% / 12 * 3 - (var(--layout-padding-m) * 2));
    bottom: var(--layout-padding-m);
    color: var(--color-white);
    margin: 0;
}

/**   Spaces map   **/
#spaces-list-map-wrapper {
    width: 100%;
    height: calc(100% - (var(--layout-space-s) * 2) - var(--input-height-adnimistration) - var(--layout-padding));
    padding-bottom: var(--layout-padding);
    padding-right: calc(var(--layout-padding-m) / 2 - 2px);
    border-radius: var(--border-radius-base);
    z-index: 1;
}

/****************************************/
/*   Profile and Portal operator/user   */
/****************************************/

body.layout--administration .section-title,
body.layout--administration .profile-section:not(:last-child),
body.layout--administration .profile-section .section-content > div {
    margin-bottom: var(--layout-space);
}

body.layout--administration .section-title {
    font-weight: 600;
}

/**   Profile section   **/

body.layout--administration #main-content:has(.profile-container) {
    overflow-y: auto;
    overflow-x: visible;
}

body.layout--administration .profile-container {
    height: 100%;
}

body.layout--administration .profile-section:not(:last-child) {
    border-bottom: 1px solid var(--color-grey);
}

body.layout--administration .profile-section .section-content-wrapper {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

body.layout--administration .profile-section .section-content label {
    font-weight: 500;
    margin-bottom: var(--layout-space-s);
}



/**   Portal operator/user   **/

#user-list-overview-table_wrapper .user-search-wrapper .dt-search label {
    display: block;
    color: transparent;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: var(--icon-search);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#user-list-overview-table_wrapper .user-search-wrapper .dt-search input {
    padding: 0 var(--layout-padding-s);
    height: var(--input-height-adnimistration);
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    background-color: var(--color-grey-light);
    color: var(--color-black);
    border: none;
}

.add-admin,
#user-list-overview-table_wrapper .dt-length {
    position: absolute;
    right: 0;
    top: var(--layout-space-s);
    width: auto;
    display: flex;
    align-items: center;
    z-index: 1;
    top: calc(var(--layout-space-s) + var(--layout-space-s) + var(--input-height-adnimistration) + var(--layout-padding));
}

.add-admin {
    margin-right: var(--layout-space-s);
    right: calc(var(--layout-space) + var(--layout-padding-m) + var(--layout-space-s) + var(--layout-space-s));
    top: calc(var(--layout-space-s) + var(--layout-space-s) + var(--input-height-adnimistration) + var(--layout-padding));
    right: unset;
    left: var(--layout-padding);
}

.add-admin > a {
    display: flex;
    align-items: center;
    color: var(--color-black);
    font-weight: 500;
}

.add-admin > a::before {
    content: '';
    display: block;
    background-image: var(--icon-btn-plus);
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0;
    margin-right: var(--layout-space-s);
    background-color: var(--color-grey-light);
}

.add-admin > a:hover::before {
    background-color: var(--color-white);
    filter: invert(1);
}

.add-admin > a:focus::before {
    outline: 1px solid var(--color-grey-dark);
}

#user-list-overview-table_wrapper .dt-length > select {
    width: var(--menu-item-height);
    margin: 0;
    font-size: var(--font-size-text);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height-text);
    font-family: 'Inter', sans-serif;
    outline: 1px solid transparent;
}

#user-list-overview-table_wrapper .dt-length > label {
    display:  none;
}

.user-add-wrapper #user-space-add {
    background-color: var(--color-grey-light);
}

/***   table   ***/

#user-list-overview-table thead th,
#user-list-overview-table tbody td {
    height: var(--input-height-adnimistration);
    padding: 0;
    outline: none;
    border: none;
} 

#user-list-overview-table {
    margin-top: calc(var(--layout-padding) + var(--layout-padding-s) + var(--layout-space));
}

#user-list-overview-table thead th {
    font-weight: 500;
}

#user-list-overview-table thead th[aria-label="Aktion"] {
    display: none;
}

#user-list-overview-table thead th .dt-column-order::before,
#user-list-overview-table thead th .dt-column-order::after {
    content: '';
    background-image: var(--icon-information-arrow);
    background-repeat: no-repeat;
    background-position: center;
    width: var(--icon-size);
    height: var(--icon-size);
    filter: invert(1);
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(90deg);
    margin-right: var(--layout-space-s);
}

#user-list-overview-table tbody td {
    border-top: 1px solid var(--color-grey-light);
}

#user-list-overview-table tbody tr:last-of-type td {
    border-bottom: 1px solid var(--color-grey-light);
}

#user-list-overview-table col {
    width: 33% !important;
}

#user-list-overview-table col[data-dt-column="3"] {
    width: var(--btn-width) !important;
    margin-right: 1rem !important;
} 

#user-list-overview-table tbody td:last-of-type:has(a) {
    display: flex;
    align-items: center;
    width: fit-content;
}

#user-list-overview-table tbody td.dt-empty {
    padding-top: var(--layout-space-s);
    width: 100%;
}

#user-list-overview-table_wrapper .dt-info,
#user-list-overview-table_wrapper .dt-paging {
    display: none;
}

.current-logo-description,
.current-logo-wrapper {
    margin-bottom: var(--layout-space-s);
}

@media (max-width: 1120px) {
    #media-directory-tree-wrapper .root-media-item,
    #media-directory-tree-wrapper .tree-row,
    #category-list-wrapper .add-category-item > .category-name,
    #category-list-wrapper .category-name-wrapper {
        height: calc(var(--input-height-adnimistration) - 2px);
    }

    #media-directory-tree-wrapper,
    #category-list-wrapper {
        grid-column: span 4;
    }

    #media-content-container,
    #category-detail-wrapper {
        grid-column: span 8;
    }
}

@media (max-width: 991px) {
    #spaces-list-wrapper[data-list-type="list"] .space-item a > * {
        grid-column: span 8;
    }
    
    #spaces-list-wrapper[data-list-type="list"] .space-item a > .space-image {
        grid-column: span 4;
    }

    #spaces-list-wrapper[data-list-type="list"] .space-item .space-information .space-showcases {
        width: calc(100% / 12 * 4 - (var(--layout-padding-m) * 2));
    }
}

@media (max-width: 768px) {
    #user-list-overview-table {
        margin-top: calc(var(--layout-padding) + var(--layout-padding-s) + var(--layout-space));
        font-size: var(--font-size-text-s);
    }

    #user-list-overview-table
    #user-list-overview-table col[data-dt-column="3"] {
        width: var(--icon-size) !important;
    }

    .search-wrapper input {
        max-width: calc((100vw - (var(--layout-padding) * 2) - var(--icon-size)) / 2);
    }

    .space-list-view-filter .search-wrapper input {
        max-width: calc((100vw - (var(--layout-padding) * 2) - var(--icon-size) - (var(--layout-space-s) * 2) - (var(--btn-edit-height) * 2) - (var(--layout-padding-m) * 2)) / 2) !important;
    }
}

@container (max-width: 600px) {
    #media-content-wrapper,
    #category-content-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #media-content-wrapper > * {
        max-height: 50dvh;
    }

    #category-content-wrapper #category-list-wrapper {
        max-height: 100%;
    }

    #category-content-wrapper #category-detail-wrapper {
        overflow: unset;
    }

    .tag-list-wrapper {
        max-height: 76dvh;
    }

    #spaces-list-wrapper .space-item {
        grid-column: span 12;
    }

    #spaces-list-wrapper[data-list-type="list"] .space-item a > * {
        grid-column: span 7;
    }
    
    #spaces-list-wrapper[data-list-type="list"] .space-item a > .space-image {
        grid-column: span 5;
    }

    #spaces-list-wrapper[data-list-type="list"] .space-item .space-information .space-showcases {
        width: calc(100% / 12 * 5 - (var(--layout-padding-m) * 2));
    }

    /*   Profile and Portal operator/user   */

    body.layout--administration .profile-section .section-content-wrapper .section-content {
        width: 100%;
        overflow: hidden;
    }

    body.layout--administration .profile-section .section-content-wrapper .section-content span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.layout--administration .profile-section:not(:last-child),
    body.layout--administration .profile-section .section-content > div,
    body.layout--administration .section-title {
        margin-bottom: var(--layout-padding);
    }

    body.layout--administration .profile-section .section-content-wrapper .section-action {
        display: flex;
        justify-content: flex-end;
    }
}