.h-100 {
    height: 100% !important;
}

.w-100 {
    width: 100% !important;
}

.h-50 {
    height: 50% !important;
}

.fw-bold {
    font-weight: bold !important;
}

.position-relative {
    position: relative;
}

.justify-self-center {
    justify-self: center;
}

.nowrap {
    white-space: nowrap;
}

th.text-center {
    text-align: center;
}

.slim {
    width: 1% !important;
}

.secondaryBlue .mud-icon-button, .secondaryBlue .mud-typography, .secondaryBlue.mud-disabled input {
    color: var(--mud-palette-secondary-blue) !important;
}

.mud-checkbox.mud-disabled {
    opacity: .5;
}

.particularities-disabled {
    opacity: 0;
}

.questions-sidebar {
    background-color: var(--mud-palette-primary-surface-light);
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    box-shadow: .2rem 0rem .2rem var(--mud-palette-secondary-blue-5O);
    padding-left: 3.5rem !important;
}

    .questions-sidebar .GD-radio-content {
        border-radius: 5rem !important;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: .65rem 1.25rem !important;
    }

        .questions-sidebar .GD-radio-content:not(.GD-radio-checked) p {
            color: var(--mud-palette-darker-blue) !important;
        }

        .questions-sidebar .GD-radio-content.GD-radio-checked {
            box-shadow: 0rem 0rem .4rem var(--mud-palette-medium-gray-5O) inset !important;
        }

        .questions-sidebar .GD-radio-content mark {
            background-color: var(--mud-palette-secondary-blue-20O);
        }

    .questions-sidebar .add-question {
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
        box-shadow: 0rem .1rem .2rem var(--mud-palette-medium-gray-20O) !important;
    }

    .questions-sidebar .mud-drop-item-preview-start {
        pointer-events: none;
        z-index: 0;
    }

.darkBlue {
    color: var(--mud-palette-darker-blue) !important;
}

.mud-tooltip-inline:has(.mud-select) {
    width: 100%;
}

.color-fragment {
    border-radius: .25rem;
}

    .color-fragment.color-fragment-rounded {
        border-radius: 5rem;
    }

.preview-filters-container {
    max-width: 70%;
}

    .preview-filters-container .mud-select {
        width: 20%;
        min-width: 200px;
    }

.condition-container .mud-select {
    min-width: 200px;
    max-width: 20%;
}

.preview-answer-container {
    position: relative;
}

    .preview-answer-container > .mud-icon-root {
        position: absolute;
        color: var(--mud-palette-info-blue) !important;
        font-size: .9rem !important;
        top: .3rem;
    }

    .preview-answer-container:has(> .mud-icon-root) .mud-select .mud-input-label, .preview-answer-container:has(> .mud-icon-root) .radio-group-container .mud-input-label {
        margin-left: .75rem !important;
        color: var(--mud-palette-info-blue) !important;
    }

    .preview-answer-container:has(.mud-icon-root) .radio-group-container .mud-input-label {
        margin-left: 1rem !important;
    }

    .preview-answer-container:has(.radio-group-container) > .mud-icon-root {
        top: 0rem;
    }

td:has(.add-condition-in-table) {
    width: 1% !important;
}

td .add-condition-in-table {
    background-color: transparent !important;
    border-radius: 5rem !important;
    box-shadow: none !important;
}

    td .add-condition-in-table:hover {
        background-color: var(--mud-palette-medium-gray-10O) !important;
    }

    td .add-condition-in-table:disabled {
        background-color: transparent !important;
        opacity: .3;
    }

    td .add-condition-in-table .mud-icon-root {
        fill: var(--mud-palette-darker-blue) !important;
    }

.delete-question-btn {
    position: absolute !important;
    z-index: 1 !important;
    right: min(5%, 10px);
    top: 50%;
    transform: translateY(-50%);
}

.delete-question-btn, .delete-condition-btn {
    opacity: 0;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 5rem !important;
    padding: 3px !important;
    transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .delete-question-btn:hover, .delete-condition-btn:hover {
        background-color: var(--mud-palette-medium-gray-10O) !important;
    }

    .delete-question-btn .mud-icon-root, .delete-condition-btn .mud-icon-root {
        color: var(--mud-palette-medium-gray-50O) !important;
    }

    .delete-condition-btn .mud-icon-root {
        fill: var(--mud-palette-medium-gray-50O) !important;
    }

    .question-container:has(.GD-radio-content:hover) .delete-question-btn, .question-container:has(.GD-radio-content.GD-radio-checked) .delete-question-btn, .delete-question-btn:hover, .condition-container:hover .delete-condition-btn {
        opacity: 1 !important;
    }

#SidebarContainer {
    position: relative;
}

#selected-relations-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

#SidebarContainer .mud-input-control-boolean-input.related .mud-typography {
    font-weight: bold !important;
}

#GDContent:has(.form-container) {
    display: flex;
}

.form-container {
    position: relative;
}

.form-info-overlay {
    background-color: rgba(33, 33, 33, .1803921569) !important;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.form-container, .questions-container {
    flex: 1;
}

.questions-container {
    --questionsSideBarWidth: clamp(200px, 40vw, 600px);
    max-height: 80vh;
    flex-direction: row;
    background-color: color-mix(white 90%, var(--mud-palette-secondary-blue) 10%);
}

    .questions-container .mud-skeleton {
        border-radius: 6rem !important;
    }

    .questions-container .questions-container-sidebar {
        max-height: 80vh;
        width: var(--questionsSideBarWidth) !important;
    }

    .questions-container .cards3D-container {
        max-width: calc(100% - var(--questionsSideBarWidth) - 24px -12px - 70px+);
        padding: 1.5rem;
    }

        .questions-container .cards3D-container .cards3D-inner-container {
            max-width: calc(100% - 70px - 12px);
        }

.form-info, .questions-container-sidebar, .sticky-container.sticky-container-surface {
    background-color: var(--mud-palette-primary-surface-light);
}

.configurator-tabs-panels {
    overflow: hidden;
}

.form-info .mud-collapse-entered .mud-collapse-wrapper {
    overflow: visible !important;
}

.form-info {
    --zindex: calc(var(--mud-zindex-appbar) - 1);
    --maxHeight: 100vh;
    padding: 0rem !important;
    position: relative;
    z-index: var(--zindex);
}

    .form-info .form-info-inner-container {
        max-height: calc(var(--maxHeight) - (88px + 2.25rem) - 5rem); /* GDContent padding - offset */
    }

    .form-info .mud-tabs .mud-tabs-tabbar-inner {
        min-height: 0 !important;
    }

    .form-info .mud-button-filled-transparent {
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 1000px !important;
        height: fit-content;
    }

        .form-info .mud-button-filled-transparent:hover {
            background-color: var(--mud-palette-medium-gray-10O) !important;
        }

    .form-info .toggle-icon-container {
        position: absolute;
        right: 0;
        top: .5rem;
    }

    .form-info .form-info-collapse-container {
        z-index: var(--zindex);
        overflow-y: auto;
        padding: 1.5rem;
    }

    .form-info .form-info-header-container {
        padding: 1.5rem;
        /*background-color: #000030c9;*/
    }

    .form-info .form-info-collapse-container .mud-collapse-container {
        width: 100%;
    }

    .form-info:has(.mud-collapse-entered, .mud-collapse-entering, .mud-collapse-exiting) {
        --zindex: calc(var(--mud-zindex-appbar) - 1);
    }

    .form-info:not(:has(.mud-collapse-entered, .mud-collapse-entering, .mud-collapse-exiting)) .form-info-inner-container {
        gap: 0 !important;
    }

    .form-info:has(.mud-collapse-entered, .mud-collapse-entering, .mud-collapse-exiting) .form-info-inner-container {
        overflow-y: auto;
    }

html:has(.form-info .mud-collapse-entering, .form-info .mud-collapse-entered, .form-info .mud-collapse-exiting, .gd-card-element.dragging) {
    overflow: hidden;
}

#GDContent:has(.mud-collapse-entered, .mud-collapse-entering) .form-info-overlay, .form-info-overlay.show {
    --zindex: calc(var(--mud-zindex-appbar) - 2);
    opacity: 1;
    z-index: var(--zindex);
}

.form-info .form-info-collapse-container:has(> .mud-collapse-container:not(.mud-collapse-entered, .mud-collapse-entering, .mud-collapse-exiting)) {
    padding: 0 !important;
}

.sticky-container {
    position: relative;
    padding: 1.5rem;
    z-index: 1;
}

    .sticky-container.sticky-container-top {
        top: 0;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .sticky-container.sticky-container-bottom {
        bottom: 0;
    }

    .sticky-container.sticky-container-gray {
        background-color: #f7f7f7;
        border-bottom-left-radius: 1rem;
        border-top: 1px solid #f3f3f3;
    }

.cards3D-inner-container > .mud-container:first-child > .mud-container {
    display: flex;
    align-items: flex-end;
}

    .cards3D-inner-container > .mud-container:first-child > .mud-container .card2D-input-background-container {
        height: 100%;
        width: 36px;
        position: relative;
    }

        .cards3D-inner-container > .mud-container:first-child > .mud-container .card2D-input-background-container .mud-input-control.mud-file-upload {
            position: absolute;
            top: calc(100% - (45vmin / 1.5));
        }

.cards2D-container .cards2D-inner-container .card2D-container {
    box-shadow: .1rem .1rem 0rem var(--mud-palette-medium-gray-10O);
}

.card2D-container {
    width: 45vmin;
    aspect-ratio: 1.5;
    height: fit-content;
    position: relative;
}

    .card2D-container .card2D, .cards2D-container .card2D-container .card2D {
        width: 100%;
        position: relative;
        height: 100%;
        display: block;
        background-color: #FAFAFA;
        border-radius: 1.5rem;
        box-shadow: .2rem .2rem .7rem var(--mud-palette-medium-gray-10O);
    }

        .card2D-container .card2D.cursor-Mirror, .card2D-container .card2D.cursor-Rotate, .card2D-container .card2D.cursor-comment {
            --zindex: calc(var(--mud-zindex-appbar) + 2);
            z-index: var(--zindex);
        }

        .card2D-container .card2D .card2D-areas-container, .card2D-container .card2D .card2D-color-container, .card2D-container .card2D .card2D-image-container {
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
        }

            .card2D-container .card2D .card2D-areas-container .gd-card-element-container {
                z-index: 3;
            }

        .card2D-container .card2D.threeD-mode .card2D-areas-container .gd-area-placeholder-container {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .card2D-container .card2D .card2D-color-container {
            opacity: .1;
            border-radius: 1.5rem;
            z-index: 2;
        }

        .card2D-container .card2D .card2D-image-container {
            z-index: 1;
        }

.card2D-image-container {
    overflow: hidden;
    border-radius: 1.5rem;
}

    .card2D-image-container > img {
        width: 100%;
        height: fit-content;
        min-height: 100%;
    }

.gd-card-element img {
    opacity: 1;
    width: 100% !important;
    height: fit-content;
    border-radius: 1.5rem;
    pointer-events: none;
    transition: opacity 3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.gd-card-element.fixed-position img {
    height: 100% !important;
}

.card2D-container > .mud-input-control {
    padding-top: 5%;
}


.questions-container .questions-list {
    padding: 1.5rem;
    overflow: auto;
}

.form-question-container {
    position: relative;
    display: grid !important;
    grid-template-rows: 0fr;
    margin-bottom: -2.5rem;
    transition: grid-template-rows .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .form-question-container.visible {
        grid-template-rows: 1fr;
        margin-bottom: 0;
    }

    .form-question-container:not(.visible) > * {
        overflow: hidden;
    }

    .form-question-container .form-question-disabled .color-fragment {
        opacity: .3;
    }

    .form-question-container .mud-radio-group > div .GD-radio-content {
        border-radius: 0 !important;
    }

    .form-question-container .mud-radio-group > div:first-child .GD-radio-content {
        border-top-left-radius: .45rem !important;
        border-bottom-left-radius: .45rem !important;
    }

    .form-question-container .mud-radio-group > div:not(:last-child) .GD-radio-content {
        border-right: 1px solid var(--mud-palette-medium-gray-10O);
    }

    .form-question-container .mud-radio-group > div:last-child .GD-radio-content {
        border-top-right-radius: .45rem !important;
        border-bottom-right-radius: .45rem !important;
    }

    .form-question-container.required-active.shake {
        animation: shake .4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .form-question-container.required-active .mud-select .mud-input-outlined-border {
        box-shadow: 0px 2px 4px 0px var(--mud-palette-danger-red-lighter) !important;
    }

    .form-question-container.required-active .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
        color: var(--mud-palette-danger-red) !important;
    }

    .form-question-container.required-active .GD-radio-content {
        box-shadow: .1rem .1rem .2rem var(--mud-palette-danger-red-lighter) !important;
    }

    .form-question-container.required-active .form-color-picker .color-fragment {
        box-shadow: .25rem .2rem .5rem var(--mud-palette-danger-red-lighter) !important;
    }

.gd-card-element {
    position: absolute;
    opacity: 1;
    z-index: 4;
    cursor: grab;
    padding: .4rem;
    border-radius: .5rem;
    background-color: transparent;
    transform-style: preserve-3d;
    transition: background-color .15s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out;
}

    .gd-card-element.gd-card-element-disabled {
        cursor: default !important;
        pointer-events: none !important;
        padding: 0 !important;
    }

    .gd-card-element:hover {
        background-color: var(--mud-palette-secondary-blue-10O);
    }

    .gd-card-element.flying {
        pointer-events: none;
        cursor: default !important;
        animation: spawnCardElement .75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .gd-card-element.transparent {
        opacity: .3 !important;
    }

    .gd-card-element.dragging {
        background-color: var(--mud-palette-secondary-blue-20O);
    }

.gd-card-element-2D-container:has(.gd-card-element.dragging) ~ .gd-card-element-overlay {
    cursor: grabbing;
}

.gd-card-element-2D-container, .gd-card-element-container {
    height: 100%;
    width: 100%;
}

.card2D-areas-container:has(.gd-card-element.dragging) .gd-area-placeholder,
.cards3D-container:has(.gd-card-element.both-sides.dragging) .gd-area-placeholder {
    border-color: var(--ddActiveBorder) !important;
}

    .card2D-areas-container:has(.gd-card-element.dragging) .gd-area-placeholder.gd-area-placeholder-hovered,
    .cards3D-container:has(.gd-card-element.both-sides.dragging) .gd-area-placeholder.gd-area-placeholder-hovered {
        border-color: var(--mouseOverBorder) !important;
    }

.no-answers-warning {
    position: absolute;
    top: 0;
    right: 0;
}

    .no-answers-warning .mud-icon-root.mud-svg-icon {
        fill: var(--mud-palette-warning-yellow) !important;
        font-size: 1.1rem;
    }

body:has(.cursor-Mirror), body:has(.cursor-Mirror) .gd-card-element {
    cursor: url("../Cursors/flip.cur") 16 16, auto !important;
}

body:has(.cursor-Rotate), body:has(.cursor-Rotate) .gd-card-element {
    cursor: url("../Cursors/rotate.cur") 16 16, auto !important;
}

body:has(.cursor-comment) {
    cursor: url("../Cursors/comment.cur") 16 16, auto !important;
}

    body:has(.cursor-comment) .form-info-overlay {
        cursor: default !important;
        pointer-events: none !important;
    }

    body:has(.cursor-comment) .comment-container {
        cursor: default !important;
    }

body:has(.cursor-Default) .gd-card-element.fixed-position, body:has(.cursor-Mirror) .gd-card-element.avoid-flip,
body:has(.cursor-Rotate) .gd-card-element.avoid-rotate {
    pointer-events: none !important;
}

body:has(.cursor-Mirror, .cursor-Rotate, cursor-comment) .form-toolbar .cursors-container .mud-icon-button:not(.active),
body:has(.cursor-Mirror, .cursor-Rotate, cursor-comment) .form-toolbar .actions-container .mud-icon-button {
    cursor: pointer !important;
}

body:has(.cursor-Mirror, .cursor-Rotate) .form-toolbar .mud-icon-button.active {
    cursor: default !important;
    pointer-events: none !important;
}

body:has(.form-info-overlay.show) {
    position: relative;
}

.GD-modal.mud-dialog-width-md.customer-modal {
    width: clamp(300px, 20vw, 1400px) !important;
    min-width: unset !important;
    max-width: unset !important;
}

.edit-customer {
    width: 1%;
}

.question-editor .mud-form > .mud-grid:not(:first-of-type, :nth-of-type(2)) .mud-grid-item {
    margin-top: 3rem;
}

.question-editor .mud-form > .mud-grid:nth-of-type(2) .mud-grid-item {
    margin-top: 1rem;
}

.cards2D-container {
    width: 100% !important;
    height: fit-content;
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

    .cards2D-container .cards2D-inner-container {
        width: 30% !important;
        height: fit-content;
        position: relative;
        aspect-ratio: 1.5;
        transform-style: preserve-3d;
        border-radius: 1.5rem;
        cursor: pointer;
        transform: rotateY(0deg) rotateX(0deg);
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        transform-origin: center center;
    }

.cards2D-inner-container:not(:has(.comment-container:hover)):hover {
    transform: rotateY(-12deg) rotateX(4deg);
}

.cards2D-inner-container.is-flipped {
    transform: rotateY(180deg);
}

    .cards2D-inner-container.is-flipped:not(:has(.comment-container:hover)):hover {
        transform: rotateY(168deg) rotateX(4deg);
    }

.cards2D-inner-container .comment-container {
    cursor: default !important;
}


.cards2D-container .cards2D-inner-container .card2D-container {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    border-radius: 1.5rem;
}

.cards2D-container .cards2D-inner-container .card2D-Back {
    transform: rotateY(180deg);
}

.cards2D-inner-container.is-flipped .card2D-Front {
    pointer-events: none;
}

.cards2D-inner-container:not(.is-flipped) .card2D-Back {
    pointer-events: none;
}

.eproof-workflow-tabs .mud-tabs-tabbar-wrapper {
    width: 100% !important;
}

.eproof-workflow-tabs .mud-tooltip-root {
    flex: 1;
}

.eproof-workflow-tabs .mud-tab {
    width: 100% !important;
}


.client-pending-config-ball {
    width: 15px;
    height: 15px;
    border-radius: 1000px;
    background-color: var(--mud-palette-secondary-blue-80O);
}

.design-information-container .mud-form .mud-grid:not(:first-of-type) .mud-grid-item {
    margin-top: 2.5rem;
}

.chip-raw-container {
    padding: .1rem 1rem;
    padding-left: 1.3rem;
    box-shadow: 0rem 0rem .3rem var(--mud-palette-medium-gray-20O) inset;
    background-color: var(--mud-palette-surface);
    border-radius: 1000px;
}

.answers-editor .mud-table-cell > .mud-select {
    min-width: 150px !important;
}

.answers-editor .mud-table-cell.width-column svg.mud-icon-root {
    font-size: 1rem !important;
}

.answers-editor .image-column * {
    color: var(--mud-palette-secondary-blue) !important;
}

.GD-modal.progress-modal {
    max-width: unset !important;
    min-width: unset !important;
    width: clamp(300px, 40vw, 800px) !important;
}

    .GD-modal.progress-modal .GD-modal-header .mud-typography-title, .GD-modal.progress-modal .GD-modal-header .GD-modal-close {
        display: none !important;
    }

    .GD-modal.progress-modal .GD-modal-header {
        justify-content: flex-end !important;
    }

    .GD-modal.progress-modal .GD-modal-body {
        padding-bottom: 2rem !important;
    }

    .GD-modal.progress-modal .GD-modal-footer {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .GD-modal.progress-modal:has(.warning-message-container) .GD-modal-header .GD-modal-close {
        display: block !important;
    }

    .GD-modal.progress-modal .progress-modal-progress-container {
        width: 150px;
        height: 15px;
        border-radius: 1000px;
        background-color: var(--mud-palette-medium-gray-5O);
        border: 1px solid var(--mud-palette-medium-gray-5O);
        overflow: hidden;
    }

        .GD-modal.progress-modal .progress-modal-progress-container.active {
            border-color: var(--mud-palette-secondary-blue-20O) !important;
        }

        .GD-modal.progress-modal .progress-modal-progress-container .progress-modal-progress {
            width: var(--progress);
            height: 100%;
            background-color: var(--mud-palette-secondary-blue);
            transition: width .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        }

    .GD-modal.progress-modal:has(.warning-message-container) .progress-modal-progress-container.active {
        border-color: var(--mud-palette-danger-red) !important;
    }

        .GD-modal.progress-modal:has(.warning-message-container) .progress-modal-progress-container.active .progress-modal-progress {
            background-color: var(--mud-palette-danger-red) !important;
        }

    .GD-modal.progress-modal .current-step-text {
        font-size: 1.25rem !important;
        font-weight: bold !important;
    }

    .GD-modal.progress-modal .warning-message-container * {
        color: var(--mud-palette-danger-red) !important;
    }

    .GD-modal.progress-modal .warning-message-container .warning-message {
        font-weight: bold !important;
        font-size: .9rem !important;
    }

    .GD-modal.progress-modal .mud-dialog-content {
        display: flex;
        align-items: center;
    }

.mud-dialog-container:has(.GD-modal.progress-modal) .mud-overlay {
    pointer-events: none !important;
}

.technical-info-step {
    align-items: center;
}

    .technical-info-step * {
        color: var(--mud-palette-secondary-blue) !important;
    }

    .technical-info-step p {
        font-size: .9rem !important;
        font-weight: bold !important;
    }

    .technical-info-step svg {
        font-size: 1.25rem !important;
    }

.sla-cell {
    font-weight: bold;
    color: var(--mud-palette-success-green) !important;
}

    .sla-cell.sla-red {
        color: var(--mud-palette-danger-red) !important;
    }

.eproof-actions-list-wrapper {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.eproof-actions-list {
    display: flex;
    flex-direction: column;
    background-color: white;
    overflow: hidden;
    width: fit-content;
    border-radius: .45rem;
    box-shadow: 0rem .2rem .2rem var(--mud-palette-medium-gray-20O);
}

.display-actions-btn:hover + .eproof-actions-list-wrapper, .eproof-actions-list-wrapper:hover {
    grid-template-rows: 1fr;
    pointer-events: all;
}

.add-question-actions {
    width: 100%;
}

    .add-question-actions .add-question-actions-list-wrapper {
        bottom: 100%;
        left: 0;
        width: 100%;
        padding-bottom: .35rem;
    }

    .add-question-actions .add-question-actions-list {
        width: 100%;
    }

.eproof-actions-list .mud-button:not(:first-of-type) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.eproof-actions-list .mud-button:not(:last-of-type) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.eproof-actions-list .mud-button {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
}

.eproof-actions-list .mud-button-label {
    white-space: nowrap;
    justify-content: flex-start !important;
}

.workflow-modal {
    width: 80vw !important;
    max-width: 2000px !important;
    min-width: unset !important;
}

.preorders-modal {
    width: 60vw !important;
    max-width: 1500px !important;
    min-width: unset !important;
}

@keyframes spawnCardElement {
    0% {
        left: var(--fromX);
        top: var(--fromY);
    }

    100% {
        left: var(--toX);
        top: var(--toY);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    6% {
        transform: translateX(-2px);
    }

    12% {
        transform: translateX(3px);
    }

    18% {
        transform: translateX(-4px);
    }

    24% {
        transform: translateX(5px);
    }

    30% {
        transform: translateX(-6px);
    }

    36% {
        transform: translateX(6px);
    }

    42% {
        transform: translateX(-5px);
    }

    48% {
        transform: translateX(4px);
    }

    54% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(2px);
    }

    66% {
        transform: translateX(-2px);
    }

    72% {
        transform: translateX(1px);
    }

    78% {
        transform: translateX(-1px);
    }
}

@media (960px < width <= 1280px) {
    .header-grid .item-auto-lg.mud-grid-item-md-4 {
        width: unset !important;
        flex-grow: 0 !important;
        max-width: calc(100% / 12 * 4) !important;
        flex-basis: calc(100% / 12 * 4) !important;
    }

    .header-grid .mud-grid-item.mud-grid-item-md-8:not(.item-auto-lg) {
        flex-grow: 0 !important;
        max-width: calc(100% / 12 * 8) !important;
        flex-basis: calc(100% / 12 * 8) !important;
    }

    .header-grid > .mud-grid-item:nth-last-child(2) {
        margin-right: 0px;
    }
}

@media (max-width: 1500px) {
    .questions-container .card2D-container {
        width: 30vmin;
    }

    .cards3D-inner-container > .mud-container:first-child > .mud-container .card2D-input-background-container .mud-input-control.mud-file-upload {
        top: calc(100% - (30vmin / 1.5));
    }
}

@media (max-width: 980px) {

    .questions-container {
        max-height: unset;
        flex-direction: column !important;
    }

        .questions-container .cards3D-container {
            max-width: unset;
        }

        .questions-container > .mud-container {
            width: 100% !important;
        }

        .questions-container .cards3D-container .card2D-container {
            max-width: unset;
            width: 70% !important;
        }

    .cards3D-inner-container > .mud-container:first-child > .mud-container .card2D-input-background-container .mud-input-control.mud-file-upload {
        position: relative;
        top: 0;
    }


    .sticky-container.sticky-container-gray {
        background-color: #f7f7f7;
        border-bottom-right-radius: 1rem;
        border-top: 1px solid #f3f3f3;
    }
}

td .eproof-flipcard-container {
    width: 60px !important;
    height: fit-content !important;
}

    td .eproof-flipcard-container .cards2D-container .cards2D-inner-container {
        width: 100% !important;
    }

        td .eproof-flipcard-container .cards2D-container .cards2D-inner-container .card2D-container,
        td .eproof-flipcard-container .card2D-container .card2D,
        td .eproof-flipcard-container .card2D-container .card2D .card2D-color-container,
        td .eproof-flipcard-container .card2D-container .card2D .card2D-image-container,
        td .eproof-flipcard-container .cards2D-container .card2D-container .card2D {
            border-radius: .5rem !important;
        }

.eproof-actions-column {
    width: 1% !important;
}

@media (min-width: 1280px) {
    .header-grid .item-auto-lg {
        width: fit-content;
        flex-grow: unset !important;
        max-width: unset !important;
        flex-basis: unset !important;
    }

    .header-grid .mud-grid-item:not(.item-auto-lg) {
        flex-grow: 1 !important;
        max-width: unset !important;
        flex-basis: unset !important;
    }

    .header-grid > .mud-grid-item:nth-last-child(2) {
        margin-right: 80px;
    }
}

@media (width <= 960px) {

    .questions-sidebar {
        padding-left: 6rem !important;
        min-height: 400px;
    }

        .questions-sidebar .timeline {
            left: 0px;
        }
}

@media (width <= 1280px) {

    .question-editor .mud-form > .mud-grid:not(:first-of-type) .mud-grid-item {
        padding-top: 1rem !important;
    }

    .question-editor .mud-form > .mud-grid:not(:first-of-type, :nth-of-type(2)) .mud-grid-item {
        margin-top: 1rem !important;
    }

    .question-editor .mud-form > .mud-grid:not(:first-of-type) {
        margin-top: 0rem !important;
    }
}

.custom-grid {
  display: grid;
  column-gap: 70px; /* ✅ espacio real */
  grid-template-columns: 1fr; /* xs por defecto */
}

/* md → 1 columna (como tú has definido) */
@media (min-width: 960px) {
    .custom-grid {
        grid-template-columns: 1fr;
        gap: 0px; /* ✅ espacio real */
    }
}

/* lg → 3 columnas */
@media (min-width: 1280px) {
    .custom-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 70px; /* ✅ espacio real */
    }
}

/* reset del comportamiento Mud */
.custom-grid > .mud-grid-item {
  max-width: 100%;
  flex-basis: auto;
  padding: 0; /* quitas el spacing clásico si hubiese */
}

.form-info .toggle-icon-container .mud-button-root[disabled] {
    opacity: 0 !important;
}

.compare-card-missing {
    border: 2px solid var(--mud-palette-error) !important;
    background-color: rgba(244, 67, 54, 0.08) !important;
}

.compare-value-different {
    color: var(--mud-palette-error) !important;
}

/* Comparison feature: vertical divider between design columns. */
.compare-design-column {
    border-right: 1px solid var(--mud-palette-medium-gray-20O);
}

/* Comparison feature: tighter Design Information layout with a small margin. */
.compare-design-info-grid {
    margin: 8px 4px;
}

/* Comparison feature: highlight design-information fields whose value differs. */
.compare-design-field-different .mud-input-slot,
.compare-design-field-different .mud-input-control-input-container input,
.compare-design-field-different .mud-input-control-input-container textarea {
    color: var(--mud-palette-error) !important;
}

.compare-design-field-different .mud-input.mud-input-underline::before {
    border-color: var(--mud-palette-error) !important;
}

.compare-table .compare-row-label {
    font-weight: 600;
    white-space: nowrap;
}

.compare-column-header {
    font-weight: 700;
    text-align: center;
}

.compare-row-different {
    background-color: var(--mud-palette-warning-hover);
}