:root {
    --card-background: rgba(0, 0, 0, 0.02);
    --dotted-line: unset;
    --dotted-line-size: unset;
    --card-between-padding: 0.75rem 0rem 1rem 0.5rem;
    --card-between-margin: 0rem 0rem 0rem 0rem;
    --card-between-gap: 0.5rem;
    --card-border-radius: 0rem 0.25rem 0.25rem 0rem;
    --card-type-background: rgba(255, 255, 255, 1);
    --card-type-border-radius: 0rem 0.25rem 0rem 0.25rem;
    --card-inner-gap: 0.5rem;
}

.batch-edit-area {
    --dotted-line: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 75%, transparent 75%, transparent 100% );
    --dotted-line-size: 0.5px 10px;
    --card-between-padding: 0.75rem 0rem 1rem 1.25rem;
}

.entity-union-edit {
    position: relative;
    display: grid;
    gap: var(--card-between-gap);
}

    .entity-union-edit::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: unset;
        background-image: var(--dotted-line);
        background-size: var(--dotted-line-size);
    }

    .entity-union-edit::after {
        position: absolute;
        content: "Folder";
        right: 0;
        padding: 0.5rem;
        text-transform: uppercase;
        font-size: 0.8rem;
        background-color: var(--card-type-background);
        border-radius: var(--card-type-border-radius);
    }

.entity-union-edit__content {
    position: relative;
    display: grid;
    overflow: hidden;
    gap: var(--card-between-gap);
    padding: var(--card-between-padding);
    margin: var(--card-between-margin);
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
}

.entity-union-edit__children {
    position: relative;
    display: grid;
    overflow: hidden;
    padding: var(--card-between-padding);
    margin: var(--card-between-margin);
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
}

.entity-union-information-field-edit {
    position: relative;
    display: grid;
    gap: var(--card-inner-gap);
    overflow: hidden;
    padding: var(--card-between-padding);
    margin: var(--card-between-margin);
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
}

    .entity-union-information-field-edit::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: unset;
        background-image: var(--dotted-line);
        background-size: var(--dotted-line-size);
    }

    .entity-union-information-field-edit::after {
        position: absolute;
        content: "Text";
        right: 0;
        padding: 0.5rem;
        text-transform: uppercase;
        font-size: 0.8rem;
        background-color: var(--card-type-background);
        border-radius: var(--card-type-border-radius);
    }

.entity-union-file-edit {
    position: relative;
    display: grid;
    gap: var(--card-inner-gap);
    overflow: hidden;
    padding: var(--card-between-padding);
    margin: var(--card-between-margin);
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
}

    .entity-union-file-edit::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: unset;
        background-image: var(--dotted-line);
        background-size: var(--dotted-line-size);
    }

    .entity-union-file-edit::after {
        position: absolute;
        content: "File";
        right: 0;
        padding: 0.5rem;
        text-transform: uppercase;
        font-size: 0.8rem;
        background-color: var(--card-type-background);
        border-radius: var(--card-type-border-radius);
    }

.entity-union-edit__children > .entity-union-edit {
    padding-left: 0rem;
}

.entity-union-edit__property > .form-group,
.entity-union-information-field-edit__property > .form-group,
.entity-union-file-edit__property > .form-group {
    display: grid;
    gap: var(--card-inner-gap);
    margin: 0rem 0.5rem 0rem 0rem;
}

    .entity-union-edit__property > .form-group > label,
    .entity-union-information-field-edit__property > .form-group > label,
    .entity-union-file-edit__property > .form-group > label {
        margin: 0rem 0rem 0rem 0rem;
    }

    .entity-union-file-edit__property > .form-group > .preview {
        display: flex;
    }

        .entity-union-file-edit__property > .form-group > .preview > * {
            max-width: 900px;
            max-height: 900px;
        }

.spinner-container {
    position: fixed;
}