#loading {
    display: none;
    opacity: 0;
    position: fixed;
    /* so it stays in the center of the view */
    ;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* helping it visually stand out: */
    /* background-color: rgba(255, 255, 255, 0.8); */
    padding: 1em;
    border-radius: 5px;
    /* optional transitions if needed: */
    transition: opacity 200ms ease-in;
    z-index: 10000;
}

#main-content {
    display: flex;
    opacity: 1;
}

#main-content.htmx-request {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease-out;
}

#loading.htmx-request {
    display: flex;
    opacity: 1;
    transition: opacity 400ms ease-in;
}

#ro-list {
    transition: filter 0.2s ease, opacity 0.2s ease;
}

#ro-list.htmx-request {
    filter: blur(2px);
    pointer-events: none;
    opacity: 50%;
}

.show {
    display: block;
}

@media (max-width: 1000px) {
    .dynamicButton.btn.soft.icon-left span {
        display: none;
    }
}

@media (min-width: 1001px) {
    .dynamicButton.btn.soft.icon-left span {
        display: inline;
    }
}

:root {
    --icon-undo: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo2-icon lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>');
    --icon-save: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save-icon lucide-save"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>')
}


.icon-undo {
    mask-image: var(--icon-undo);
    -webkit-mask-image: var(--icon-undo);
}

.icon-save {
    mask-image: var(--icon-save);
    -webkit-mask-image: var(--icon-save);
}

input[readonly] {
    opacity: 0.7;
}

.btn.rego {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.ph-input[readonly] {
    color: var(--typography-400);
    pointer-events: none;
    opacity: 1;
    /* outline: 1px solid light-dark(var(--surface-200), var(--surface-200)); */
    outline: none;
    max-width: 12rem;
}

.ph-input {
    max-width: 12rem;
    outline: none;
}

.ph-input:not(:focus-visible) {
    outline: none;
}

.ph-input:focus-visible {
    outline: none;
}

.ph-input-group {
    background-color: light-dark(var(--white), oklch(20% .01 var(--brand-hue)));
    outline: 1px solid light-dark(var(--surface-200), var(--surface-200));
    border-radius: 0.375rem;
}
.message-sending {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 0;
    background: color-mix(in srgb, var(--surface-50) 70%, transparent);
}

form.htmx-request > .message-sending {
    display: flex;
}

/* Pentana stylesheet stops at @5xl:grid-cols-6 */
.\@5xl\:grid-cols-7 {
    @container (width >= 64rem) {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}