.choicable-container {
    white-space: normal !important;
    word-wrap: break-word;
    max-width: 100%;
    text-align: center !important;
}

div#formTabControl-tabpanel-0 {
    height: 88vh;
    display: flex;
    flex-direction: column;
}

.smu-element-card-header {
    margin: calc(var(--rz-card-padding, 1rem) * -1) calc(var(--rz-card-padding, 1rem) * -1) 0 calc(var(--rz-card-padding, 1rem) * -1);
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius, 8px) var(--rz-border-radius, 8px) 0 0;
}

.smu-element-card-icon {
    font-size: 1.1rem;
    color: var(--rz-primary);
}

.smu-element-card-content {
    padding-top: 1rem;
}

.smu-element-card-header .editable-label {
    flex: 1;
    min-width: 0;
}

.smu-element-card-header .editable-label input {
    width: 100%;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--rz-border-radius);
    transition: all 0.2s ease;
}

.smu-element-card-header .editable-label input:not(:disabled) {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-base);
    padding: 0.375rem 0.75rem;
    box-shadow: var(--rz-shadow-1);
}

.smu-element-card-header .editable-label input:not(:disabled):focus {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: var(--rz-shadow-2);
}

.smu-element-card-header .editable-label input:disabled {
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.rz-dropdown {
    height: auto !important;
}

.smu-card {
    width: 20rem;
    height: 10rem;
    margin: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
}

.smu-card:hover {
    box-shadow: var(--shadow-heavy);
}

.smu-card-header {
    flex: 1;
    padding-bottom: 0;
}

.smu-card-title {
    margin-bottom: 0.5rem;
    font-weight: 500;
    overflow: hidden;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    border-radius: var(--rz-border-radius);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.smu-card-description {
    margin: 0;
    font-size: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.smu-card-content {
    padding: 0 1.25rem;
    flex: 1;
}

.smu-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    margin-top: auto;
}

#uploadDocument {
    width: 100%;

    .rz-fileupload-buttonbar .rz-fileupload-choose {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 100px 0;
    }
}

.rz-fileupload-buttonbar {
    padding: 0 !important;
}

.validation-message {
    color: var(--rz-danger, #dc3545);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 250px;
    text-align: left;
}

#demo ul.rz-navigation-menu.rz-open
{
    padding-block: 0;
}

.custom-dropdown-menu.rz-header a, .rz-header a:hover
{
    color: inherit !important;
}

.rz-menu.menu-align-right .rz-menu-content {
    right: 0 !important;
    left: auto !important;
}

.rz-menu.menu-align-right .rz-navigation-menu {
    right: 0 !important;
    left: auto !important;
}

.rz-menu.menu-align-right .rz-panel-menu {
    right: 0 !important;
    left: auto !important;
}

.panel-nav-button {
    position: relative;
    white-space: nowrap;
    transition: margin-left 0.3s ease-in-out;
    max-width: 150px;
    overflow: clip;
    text-overflow: ellipsis;
}

.panel-nav-button:hover {
    z-index: 1000;
}

.dropzone {
    position: relative;
    transition: all 0.3s ease;
}

.dropzone.edit-mode .dropzone-card {
    border: 2px dotted #22c55e;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dropzone.can-drop > .dropzone-card {
    background-color: rgba(34, 197, 94, 0.5);
    border-color: #22c55e;
    border-style: solid;
}

.dropzone.can-drop > .dropzone-card > * {
    position: relative;
}

.dropzone.no-drop > .dropzone-card {
    background-color: rgba(239, 68, 68, 0.5);
    border-color: #ef4444;
    border-style: solid;
    cursor: not-allowed;
}

.dropzone.no-drop > .dropzone-card > * {
    position: relative;
}

.draggable .rz-navigation-item-link {
    cursor: grab;
}

.draggable .rz-navigation-item-link:active {
    cursor: grabbing;
}

span.self-made-element {
    display: inline;
    background-color: var(--rz-text-color);
    color: var(--rz-base-background-color);
    border: 1px solid var(--rz-text-color);
    border-radius: 0.5rem;
    padding: 0 0.5rem;
    vertical-align: baseline;
    user-select: all;
    cursor: default;
}

.smu-disabled-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-tertiary);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.smu-centered-alert .rz-alert-message {
    align-items: center !important;
}

.pagination-list-container .rz-navigation-item-text {
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;

    display: block;
    padding: 0px;
    min-width: 0px;
    width: 100%;
}

.rz-panel-menu.pagination-list-container .rz-navigation-item-link {
    padding-block: 8px;
    padding-inline: 8px;
    min-height: 0;
}

.onboarding-footer-wrap {
    flex-wrap: wrap;
    row-gap: 8px;
}

.onboarding-footer-wrap .onboarding-autostart-wrapper {
    flex: 0 0 100%;
    width: 100%;

    border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    padding-top: 10px;
}

.onboarding-autostart-optout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    font-family: inherit;
    font-size: 0.85rem;
    color: var(--rz-text-color, #424242);
    cursor: pointer;
    user-select: none;

    padding-left: 4px;
    text-align: left;
}

.onboarding-autostart-optout input {
    margin: 0;
    cursor: pointer;
}

.driver-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);

    margin-top: 10px;
    padding: var(--rz-tooltip-padding, 0.45rem 0.65rem);

    font-family: inherit;
    font-size: var(--rz-tooltip-font-size, 0.85rem);
    line-height: 1.35;

    background: var(--rz-tooltip-background-color, var(--rz-panel-background-color, #fff));
    color: var(--rz-tooltip-color, var(--rz-text-color, #333));
    box-shadow: var(--rz-tooltip-shadow, 0 6px 14px rgba(0,0,0,0.18));
    border-radius: var(--rz-tooltip-border-radius, 8px);

    white-space: normal; 
    z-index: 999999;
}

.driver-tooltip-arrow {
    position: absolute;
    top: -4px;
    left: 12px;

    width: 8px;
    height: 8px;

    background-color: inherit;
    transform: rotate(45deg);
}

.driver-popover {
    background-color: var(--rz-panel-background-color, #fff);
    color: var(--rz-text-color, #2d2d2d);
    box-shadow: var(--rz-shadow-3, 0 1px 10px rgba(0, 0, 0, 0.4));
}

.driver-popover-title {
    color: var(--rz-text-title-color, var(--rz-text-color, #2d2d2d));
}

.driver-popover-description {
    color: var(--rz-text-color, #2d2d2d);
}

.driver-popover-close-btn {
    color: var(--rz-text-disabled-color, #d2d2d2);
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
    color: var(--rz-text-color, #2d2d2d);
}

.driver-popover-progress-text {
    color: var(--rz-text-secondary-color, #727272);
}

.driver-popover-footer button {
    background-color: var(--rz-panel-background-color, #fff);
    color: var(--rz-text-color, #2d2d2d);
    border-color: var(--rz-border-color, #ccc);
}

.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
    background-color: var(--rz-base-background-color, #f7f7f7);
}

.driver-popover-arrow {
    border-color: var(--rz-panel-background-color, #fff);
}

.driver-popover-arrow-side-left {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.driver-popover-arrow-side-right {
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.driver-popover-arrow-side-top {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.driver-popover-arrow-side-bottom {
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
}

.driver-popover-footer .driver-popover-btn-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


.driver-active .rz-popup,
.driver-active .rz-dropdown-panel,
.driver-active .rz-multiselect-panel {
    z-index: 10001 !important;
    pointer-events: auto !important;
}

.driver-active .rz-popup *,
.driver-active .rz-dropdown-panel *,
.driver-active .rz-multiselect-panel * {
    pointer-events: auto !important;
}

.dark-theme .driver-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Optionable (Select/ MultiSelect)*/
.smu-opt {
    font-weight: 500;
}

.smu-opt-text {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.rz-colorpicker.smu-colorpicker button {
    height: 24px;
    min-height: 24px;
    padding: 0 8px;
}

.smu-select-compact {
    max-width: 280px;
    width: 100%;
}

/* Kitöltő-nézet multi-select chip-jei: egységes kék (mint a form-elem chip-ek), szürke helyett */
.smu-chip-primary .rz-chip {
    --rz-chip-background-color: var(--rz-primary-dark);
    --rz-chip-color: white;
}

/* Megjegyzés-mező: a nyers textarea a FormField-keretbe simuljon (ne legyen dupla keret) */
.smu-comment-field textarea {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    resize: vertical;
}

.smu-field-sync {
    border-radius: var(--rz-border-radius, 8px);
    transition: background-color 0.4s ease-out, box-shadow 0.4s ease-out;
}

.smu-field-synced {
    animation: smu-field-sync-flash 2s ease-out;
}

/* Kitöltő-nézet (nem builder): tömörebb mező-elrendezés.
   A sor/oszlop konténerek egymásba ágyazott .dropzone-card paddingje adja a
   térközök nagy részét; itt lefaragjuk, hogy a mezők közelebb legyenek
   egymáshoz és a panel széléhez. A builder (.edit-mode) változatlan marad. */
.dropzone:not(.edit-mode) .dropzone-card {
    /* függőlegesen marad a kis köz; vízszintesen 0, hogy a mezők közelebb
       legyenek a panel bal/jobb széléhez (a külső térközt a beágyazott
       dropzone-card-ok adták; az oszlopközt a .col padding tartja). */
    padding: 0.25rem 0;
}

/* Bootstrap-rács térköze a kitöltő-nézet soraiban: kisebb vízszintes hézag,
   nincs külön függőleges sor-gutter (azt a card-padding adja). */
.dropzone:not(.edit-mode) .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0;
    /* A bootstrap .row negatív margója (margin: 0 -gutter/2) több egymásba ágyazott,
       .col nélküli soron halmozódik és minden szint balra húz → balra csúszás.
       Nullázzuk; a vízszintes közt a .col paddingje adja, szimmetrikusan. */
    margin-left: 0;
    margin-right: 0;
}

/* A lebegő-label-es mezőkeret alapértelmezett alsó margója a kitöltő-nézetben
   adott a sorok közti üres helyhez — csökkentjük. */
.dropzone:not(.edit-mode) .rz-form-field {
    margin-bottom: 0.25rem;
}

/* A sor-konténer (ROW-elem) wrapper egyszerre bootstrap .row ÉS a szülő flex-rács
   eleme — grow/width nélkül a TARTALMA szélességére zsugorodik, balra igazodik, és a
   maradék hely a jobb oldalon gyűlik össze (aszimmetrikus jobb-hézag). Kitöltő-nézetben
   töltse ki a teljes szélességet, a benti dropzone-nal együtt. */
.dropzone:not(.edit-mode) .draggable.no-active.row {
    flex: 1 0 100%;
}

.dropzone:not(.edit-mode) .draggable.no-active.row > .dropzone {
    flex: 1 1 auto;
    width: 100%;
}

/* A panel bal/jobb széléhez a mezőket tartó (cols-os) sort a (gutter/2 − 2px)-szel
   kifelé húzzuk, így a külső térköz ~2px, az oszlopköz (a .col padding) változatlan. */
.dropzone:not(.edit-mode) .row:has(> .draggable.no-active.col) {
    margin-left: -4px;
    margin-right: -4px;
}

/* A maradék külső térközt a panel-kártya saját vízszintes body-paddingje adta
   (--rz-card-padding, alapból 1rem). Kitöltő-nézetben nullázzuk, hogy a mezők a
   panel bal/jobb széléig érjenek. A függőleges padding marad. */
.dropzone:not(.edit-mode) [data-element-type="panel"] > .rz-card.rz-variant-filled {
    padding-left: 0;
    padding-right: 0;
}

/* A fejléc -1rem vízszintes negatív margóval a (most már 0) padding fölé buggyanna
   ki → 16px-et kilógna. Nullázzuk a vízszintes margóját, így a kártya széléhez simul. */
.dropzone:not(.edit-mode) [data-element-type="panel"] > .rz-card.rz-variant-filled > .smu-element-card-header {
    margin-left: 0;
    margin-right: 0;
}

@keyframes smu-field-sync-flash {
    0% {
        background-color: var(--rz-primary-lighter, rgba(63, 81, 181, 0.18));
        box-shadow: 0 0 0 2px var(--rz-primary, #3f51b5);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}