.layouts-modal {
    position: absolute;
    z-index: calc(var(--mud-zindex-appbar) - 1);
    border-radius: .9rem;
    padding: 1.25rem;
    background-color: white;
    box-shadow: .4rem .4rem .9rem var(--mud-palette-medium-gray-10O);
    width: clamp(400px, 40vw, 1200px);
    height: fit-content;
    left: 0;
    top: 0;
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .layouts-modal.show {
        opacity: 1;
        transform: scale(1);
    }

    .layouts-modal .layouts-modal-body {
        overflow: auto;
        max-height: 68vh;
    }

    .layouts-modal .layout-elements-collapse-icon {
        fill: var(--mud-palette-medium-gray) !important;
    }

    .layouts-modal .layout-elements-expansion-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        
    }

    .layouts-modal .layout-elements-expansion-panel.expanded {
        grid-template-rows: 1fr;
    }

    .layouts-modal .layout-elements-expansion-panel-inner {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        overflow: hidden;
        min-height: 0;
        padding: .15rem;
    }

    .layouts-modal .layout-elements-expansion-panel:not(.expanded) .layout-elements-expansion-panel-inner {
        padding: 0 !important;
    }

.layout-element-container {
    background-color: white;
    box-shadow: .2rem .2rem .3rem var(--mud-palette-medium-gray-10O);
    border: 1px solid var(--mud-palette-medium-gray-5O);
    border-radius: .8rem;
}

.layout-element-container .layout-element-property {
    flex-wrap: wrap;
}

    .layout-element-container .layout-element-title-container {
        background-color: color-mix(90% var(--mud-palette-darker-blue), 10% white);
        border-top-left-radius: .8rem;
        border-bottom-left-radius: .8rem;
    }

        .layout-element-container .layout-element-title-container .mud-typography {
            color: white !important;
            font-weight: bold !important;
        }

.persolayout-card-container {
    height: fit-content !important;
    width: unset !important;
    flex: 1;
}

.card2D-container .persolayout-card {
    position: absolute;
}

.card2D-container .persolayout-card .persolayout-card-element {
    z-index: 10;
}

.persolayout-card {
    aspect-ratio: 1.5;
    height: fit-content;
    border-radius: .7rem;
    background-color: #F4F4F4;
    border: 1px solid #F0F0F0;
    position: relative;
    overflow: hidden;
}

    .persolayout-card .persolayout-card-element {
        position: absolute;
        z-index: 1;
    }

.persolayout-card.transparent {
    background-color: transparent !important;
    border: none !important;
}

    .persolayout-card:not(.transparent)::before, .persolayout-card:not(.transparent)::after {
        content: "";
        position: absolute;
        z-index: 0;
        height: 140%;
        width: 4%;
        background-color: white;
        filter: blur(4px);
        transform: rotate(-40deg);
        top: -15%;
    }

    .persolayout-card:not(.transparent)::before {
        left: 40%;
    }

    .persolayout-card:not(.transparent)::after {
        left: 55%;
    }