.dialog-container {
    @apply fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-gray-500 bg-opacity-50 z-50 flex flex-col justify-center items-center overflow-auto p-5;

    margin-top: 0 !important;

    .dialog {
        @apply bg-white rounded-lg shadow border border-gray-200 p-5 max-w-full;

        width: 400px;

        &.dialog-lg {
            width: 600px;
        }

        &.dialog-xl {
            width: 1000px;
        }

        .dialog-header {
            @apply w-full pb-3 mb-3 border-b border-gray-200 text-lg text-gray-500 font-medium;
        }

        .dialog-content {
            @apply w-full flex flex-col gap-3;
        }
    }

    .dialog-buttons {
        @apply w-full pt-3 mt-3 border-t border-gray-200 flex items-center gap-3;

        button {
            @apply px-5 py-3 rounded bg-gray-500 hover:bg-gray-600 text-white hover:shadow hover:cursor-pointer font-medium;

            min-width: 100px;

            &[type="submit"] {
                @apply bg-primary-500 hover:bg-primary-600;
            }

            &.delete {
                @apply bg-danger-500 hover:bg-danger-600;
            }
        }
    }
}