#headerLogo {
    width: 3rem;
    height: 2rem;
    padding: 0.125rem;
    /* background: #6692af */
    background: #4f87b5;

}

body > .flex > .navbar {
    /* background: #6692af !important; */
    background: #4f87b5 !important;
}

body > .flex > .flex > aside {
    /* background: #6692af !important; */
    background: #4f87b5 !important;
}

body > .flex > .flex > main {
    /* background: #6692af !important; */
    background: #4f87b5 !important;
}

body > .flex > .flex > main > .mainInner {
    /* background: #e5e9f0 !important; */
    background: #f0f5ff !important;
    min-height: 100%;
}

#previewImage .modal-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

#previewImage #modalImage {
    object-fit: contain;
}

/*
.action-menu-wrapper.active {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n, oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-nc, oklch(var(--nc)/var(--tw-text-opacity)));
}
*/
.open-action-menu-btn {
    right: 1.25rem;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        height: 100%;
    }
    to {
        height: 0;
    }
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

.slide-up {
    animation: slideUp 0.5s forwards;
}

/*
.menu-title.menu-title-aside {
    color: var(--nc);
}
*/

.btn-custom-edit { @apply bg-cyan-500 hover:bg-cyan-600 rounded border-cyan-500 hover:border-cyan-600 text-white; }
.btn-custom-create { @apply bg-green-500 hover:bg-green-600 rounded border-green-500 hover:bg-green-600 text-white; }
.btn-custom-show { @apply bg-blue-500 hover:bg-blue-600 rounded border-blue-500 hover:border-blue-600 text-white; }
.btn-custom-index { @apply bg-gray-500 hover:bg-gray-600 rounded border-gray-500 hover:border-gray-600 text-white; }
.btn-custom-copy { @apply bg-yellow-500 hover:bg-yellow-600 rounded border-yellow-500 hover:border-yellow-600 text-white; }
.btn-custom-activate { @apply bg-teal-500 hover:bg-teal-600 rounded border-teal-500 hover:border-teal-600 text-white; }
.btn-custom-deactivate { @apply bg-red-500 hover:bg-red-600 rounded border-red-500 hover:border-red-600 text-white; }
.btn-custom-delete { @apply bg-red-700 hover:bg-red-800 rounded border-red-700 hover:border-red-800 text-white; }
.btn-custom-delete-Soft { @apply bg-orange-500 hover:bg-orange-600 rounded border-orange-500 hover:border-orange-600 text-white; }
.btn-custom-delete-Hard { @apply bg-red-900 hover:bg-red-700 rounded border-red-900 hover:border-red-700 text-white; }
.btn-custom-add { @apply bg-indigo-500 hover:bg-indigo-600 rounded border-indigo-500 hover:border-indigo-600 text-white; }
.btn-custom-remove { @apply bg-pink-500 hover:bg-pink-600 rounded border-pink-500 hover:border-pink-600 text-white; }
.btn-custom-duplicate { @apply bg-purple-500 hover:bg-purple-600 rounded bg-purple-500 hover:border-purple-600 text-white; }


.btn-custom-light-edit { @apply bg-cyan-300 hover:bg-cyan-400 rounded border-cyan-300 hover:border-cyan-400 text-cyan-900; }
.btn-custom-light-create { @apply bg-green-300 hover:bg-green-400 rounded border-green-300 hover:border-green-400 text-green-900; }
.btn-custom-light-show { @apply bg-blue-300 hover:bg-blue-400 rounded border-blue-300 hover:border-blue-400 text-blue-900; }
.btn-custom-light-index { @apply bg-gray-300 hover:bg-gray-400 rounded border-gray-300 hover:border-gray-400 text-gray-900; }
.btn-custom-light-copy { @apply bg-yellow-300 hover:bg-yellow-400 rounded border-yellow-300 hover:border-yellow-400 text-yellow-900; }
.btn-custom-light-activate { @apply bg-teal-300 hover:bg-teal-400 rounded border-teal-300 hover:border-teal-400 text-teal-900; }
.btn-custom-light-deactivate { @apply bg-red-300 hover:bg-red-400 rounded border-red-300 hover:border-red-400 text-red-900; }
.btn-custom-light-delete { @apply bg-red-500 hover:bg-red-600 rounded border-red-500 hover:border-red-600 text-white; }
.btn-custom-light-delete-Soft { @apply bg-orange-300 hover:bg-orange-400 rounded border-orange-300 hover:border-orange-400 text-orange-900; }
.btn-custom-light-delete-Hard { @apply bg-red-700 hover:bg-red-800 rounded border-red-700 hover:border-red-800 text-white; }
.btn-custom-light-add { @apply bg-indigo-300 hover:bg-indigo-400 rounded border-indigo-300 hover:border-indigo-400 text-indigo-900; }
.btn-custom-light-remove { @apply bg-pink-300 hover:bg-pink-400 rounded border-pink-300 hover:border-pink-400 text-pink-900; }
.btn-custom-light-duplicate { @apply bg-purple-300 hover:bg-purple-400 rounded border-purple-300 hover:border-purple-400 text-purple-900; }


.btn-custom-dark-edit { @apply bg-cyan-700 hover:bg-cyan-800 rounded border-cyan-700 hover:border-cyan-800 text-white; }
.btn-custom-dark-create { @apply bg-green-700 hover:bg-green-800 rounded border-green-700 hover:border-green-800 text-white; }
.btn-custom-dark-show { @apply bg-blue-700 hover:bg-blue-800 rounded border-blue-700 hover:border-blue-800 text-white; }
.btn-custom-dark-index { @apply bg-gray-700 hover:bg-gray-800 rounded border-gray-700 hover:border-gray-800 text-white; }
.btn-custom-dark-copy { @apply bg-yellow-700 hover:bg-yellow-800 rounded border-yellow-700 hover:border-yellow-800 text-white; }
.btn-custom-dark-activate { @apply bg-teal-700 hover:bg-teal-800 rounded border-teal-700 hover:border-teal-800 text-white; }
.btn-custom-dark-deactivate { @apply bg-red-700 hover:bg-red-800 rounded border-red-700 hover:border-red-800 text-white; }
.btn-custom-dark-delete { @apply bg-red-900 hover:bg-red-700 rounded border-red-900 hover:border-red-700 text-white; }
.btn-custom-dark-delete-Soft { @apply bg-orange-700 hover:bg-orange-800 rounded border-orange-700 hover:border-orange-800 text-white; }
.btn-custom-dark-delete-Hard { @apply bg-red-900 hover:bg-red-800 rounded border-red-900 hover:border-red-800 text-white; }
.btn-custom-dark-add {@apply bg-indigo-700 hover:bg-indigo-800 rounded border-indigo-700 hover:border-indigo-800 text-white; }
.btn-custom-dark-remove {@apply bg-pink-700 hover:bg-pink-800 rounded border-pink-700 hover:border-pink-800 text-white; }
.btn-custom-dark-duplicate {@apply bg-purple-700 hover:bg-purple-800 rounded border-purple-700 hover:border-purple-800 text-white; }

/* Buttons in Blautönen, basierend auf #4f87b5 */

/* Create Button */
.btn-custom-blue-create {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Show Button */
.btn-custom-blue-show {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Edit Button */
.btn-custom-blue-edit {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Copy Button */
.btn-custom-blue-copy {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Activate Button */
.btn-custom-blue-activate {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Deactivate Button */
.btn-custom-blue-deactivate {
    @apply bg-[#3c6b8e] hover:bg-[#30576d] text-white font-bold py-2 px-4 rounded;
}

/* Delete Button */
.btn-custom-blue-delete {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
}

/* Soft Delete Button */
.btn-custom-blue-delete-soft {
    @apply bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded;
}

/* Hard Delete Button */
.btn-custom-blue-delete-hard {
    @apply bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded;
}

/* Add Button */
.btn-custom-blue-add {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Remove Button */
.btn-custom-blue-remove {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}

/* Duplicate Button */
.btn-custom-blue-duplicate {
    @apply bg-[#4f87b5] hover:bg-[#3c6b8e] text-white font-bold py-2 px-4 rounded;
}