/* Responsive Spacing Utilities for MudBlazor 8.15.0
 * Provides breakpoint-based margin and padding utilities
 * Breakpoints: xs (0px), sm (600px), md (960px), lg (1264px), xl (1904px)
 */

/* ========================================
   MARGIN - X-AXIS (mx)
   ======================================== */
/* xs (0px and up) */
.xs-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.xs-mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.xs-mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.xs-mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
.xs-mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
.xs-mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
.xs-mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
.xs-mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
.xs-mx-12 { margin-left: 48px !important; margin-right: 48px !important; }
.xs-mx-16 { margin-left: 64px !important; margin-right: 64px !important; }

/* ========================================
   MARGIN - Y-AXIS (my)
   ======================================== */
/* xs (0px and up) */
.xs-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.xs-my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.xs-my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.xs-my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
.xs-my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.xs-my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
.xs-my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
.xs-my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
.xs-my-12 { margin-top: 48px !important; margin-bottom: 48px !important; }
.xs-my-16 { margin-top: 64px !important; margin-bottom: 64px !important; }

/* ========================================
   MARGIN - BOTTOM (mb)
   ======================================== */
/* xs (0px and up) */
.xs-mb-0 { margin-bottom: 0 !important; }
.xs-mb-1 { margin-bottom: 4px !important; }
.xs-mb-2 { margin-bottom: 8px !important; }
.xs-mb-3 { margin-bottom: 12px !important; }
.xs-mb-4 { margin-bottom: 16px !important; }
.xs-mb-5 { margin-bottom: 20px !important; }
.xs-mb-6 { margin-bottom: 24px !important; }
.xs-mb-8 { margin-bottom: 32px !important; }
.xs-mb-12 { margin-bottom: 48px !important; }
.xs-mb-16 { margin-bottom: 64px !important; }

/* ========================================
   MARGIN - TOP (mt)
   ======================================== */
/* xs (0px and up) */
.xs-mt-0 { margin-top: 0 !important; }
.xs-mt-1 { margin-top: 4px !important; }
.xs-mt-2 { margin-top: 8px !important; }
.xs-mt-3 { margin-top: 12px !important; }
.xs-mt-4 { margin-top: 16px !important; }
.xs-mt-5 { margin-top: 20px !important; }
.xs-mt-6 { margin-top: 24px !important; }
.xs-mt-8 { margin-top: 32px !important; }
.xs-mt-12 { margin-top: 48px !important; }
.xs-mt-16 { margin-top: 64px !important; }

/* ========================================
   PADDING - BOTTOM (pb)
   ======================================== */
/* xs (0px and up) */
.xs-pb-0 { padding-bottom: 0 !important; }
.xs-pb-1 { padding-bottom: 4px !important; }
.xs-pb-2 { padding-bottom: 8px !important; }
.xs-pb-3 { padding-bottom: 12px !important; }
.xs-pb-4 { padding-bottom: 16px !important; }
.xs-pb-5 { padding-bottom: 20px !important; }
.xs-pb-6 { padding-bottom: 24px !important; }
.xs-pb-8 { padding-bottom: 32px !important; }
.xs-pb-12 { padding-bottom: 48px !important; }
.xs-pb-16 { padding-bottom: 64px !important; }

/* ========================================
   BREAKPOINT: sm (600px and up)
   ======================================== */
@media (min-width: 600px) {
    /* Margin X-axis */
    .sm-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .sm-mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
    .sm-mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
    .sm-mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
    .sm-mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
    .sm-mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
    .sm-mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
    .sm-mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
    .sm-mx-12 { margin-left: 48px !important; margin-right: 48px !important; }
    .sm-mx-16 { margin-left: 64px !important; margin-right: 64px !important; }

    /* Margin Y-axis */
    .sm-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .sm-my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
    .sm-my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
    .sm-my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
    .sm-my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
    .sm-my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
    .sm-my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
    .sm-my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
    .sm-my-12 { margin-top: 48px !important; margin-bottom: 48px !important; }
    .sm-my-16 { margin-top: 64px !important; margin-bottom: 64px !important; }

    /* Margin Bottom */
    .sm-mb-0 { margin-bottom: 0 !important; }
    .sm-mb-1 { margin-bottom: 4px !important; }
    .sm-mb-2 { margin-bottom: 8px !important; }
    .sm-mb-3 { margin-bottom: 12px !important; }
    .sm-mb-4 { margin-bottom: 16px !important; }
    .sm-mb-5 { margin-bottom: 20px !important; }
    .sm-mb-6 { margin-bottom: 24px !important; }
    .sm-mb-8 { margin-bottom: 32px !important; }
    .sm-mb-12 { margin-bottom: 48px !important; }
    .sm-mb-16 { margin-bottom: 64px !important; }

    /* Margin Top */
    .sm-mt-0 { margin-top: 0 !important; }
    .sm-mt-1 { margin-top: 4px !important; }
    .sm-mt-2 { margin-top: 8px !important; }
    .sm-mt-3 { margin-top: 12px !important; }
    .sm-mt-4 { margin-top: 16px !important; }
    .sm-mt-5 { margin-top: 20px !important; }
    .sm-mt-6 { margin-top: 24px !important; }
    .sm-mt-8 { margin-top: 32px !important; }
    .sm-mt-12 { margin-top: 48px !important; }
    .sm-mt-16 { margin-top: 64px !important; }

    /* Padding Bottom */
    .sm-pb-0 { padding-bottom: 0 !important; }
    .sm-pb-1 { padding-bottom: 4px !important; }
    .sm-pb-2 { padding-bottom: 8px !important; }
    .sm-pb-3 { padding-bottom: 12px !important; }
    .sm-pb-4 { padding-bottom: 16px !important; }
    .sm-pb-5 { padding-bottom: 20px !important; }
    .sm-pb-6 { padding-bottom: 24px !important; }
    .sm-pb-8 { padding-bottom: 32px !important; }
    .sm-pb-12 { padding-bottom: 48px !important; }
    .sm-pb-16 { padding-bottom: 64px !important; }
}

/* ========================================
   BREAKPOINT: md (960px and up)
   ======================================== */
@media (min-width: 960px) {
    /* Margin X-axis */
    .md-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .md-mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
    .md-mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
    .md-mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
    .md-mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
    .md-mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
    .md-mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
    .md-mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
    .md-mx-12 { margin-left: 48px !important; margin-right: 48px !important; }
    .md-mx-16 { margin-left: 64px !important; margin-right: 64px !important; }

    /* Margin Y-axis */
    .md-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .md-my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
    .md-my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
    .md-my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
    .md-my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
    .md-my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
    .md-my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
    .md-my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
    .md-my-12 { margin-top: 48px !important; margin-bottom: 48px !important; }
    .md-my-16 { margin-top: 64px !important; margin-bottom: 64px !important; }

    /* Margin Bottom */
    .md-mb-0 { margin-bottom: 0 !important; }
    .md-mb-1 { margin-bottom: 4px !important; }
    .md-mb-2 { margin-bottom: 8px !important; }
    .md-mb-3 { margin-bottom: 12px !important; }
    .md-mb-4 { margin-bottom: 16px !important; }
    .md-mb-5 { margin-bottom: 20px !important; }
    .md-mb-6 { margin-bottom: 24px !important; }
    .md-mb-8 { margin-bottom: 32px !important; }
    .md-mb-12 { margin-bottom: 48px !important; }
    .md-mb-16 { margin-bottom: 64px !important; }

    /* Margin Top */
    .md-mt-0 { margin-top: 0 !important; }
    .md-mt-1 { margin-top: 4px !important; }
    .md-mt-2 { margin-top: 8px !important; }
    .md-mt-3 { margin-top: 12px !important; }
    .md-mt-4 { margin-top: 16px !important; }
    .md-mt-5 { margin-top: 20px !important; }
    .md-mt-6 { margin-top: 24px !important; }
    .md-mt-8 { margin-top: 32px !important; }
    .md-mt-12 { margin-top: 48px !important; }
    .md-mt-16 { margin-top: 64px !important; }

    /* Padding Bottom */
    .md-pb-0 { padding-bottom: 0 !important; }
    .md-pb-1 { padding-bottom: 4px !important; }
    .md-pb-2 { padding-bottom: 8px !important; }
    .md-pb-3 { padding-bottom: 12px !important; }
    .md-pb-4 { padding-bottom: 16px !important; }
    .md-pb-5 { padding-bottom: 20px !important; }
    .md-pb-6 { padding-bottom: 24px !important; }
    .md-pb-8 { padding-bottom: 32px !important; }
    .md-pb-12 { padding-bottom: 48px !important; }
    .md-pb-16 { padding-bottom: 64px !important; }
}

/* ========================================
   BREAKPOINT: lg (1264px and up)
   ======================================== */
@media (min-width: 1264px) {
    /* Margin X-axis */
    .lg-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .lg-mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
    .lg-mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
    .lg-mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
    .lg-mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
    .lg-mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
    .lg-mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
    .lg-mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
    .lg-mx-12 { margin-left: 48px !important; margin-right: 48px !important; }
    .lg-mx-16 { margin-left: 64px !important; margin-right: 64px !important; }

    /* Margin Y-axis */
    .lg-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .lg-my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
    .lg-my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
    .lg-my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
    .lg-my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
    .lg-my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
    .lg-my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
    .lg-my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
    .lg-my-12 { margin-top: 48px !important; margin-bottom: 48px !important; }
    .lg-my-16 { margin-top: 64px !important; margin-bottom: 64px !important; }

    /* Margin Bottom */
    .lg-mb-0 { margin-bottom: 0 !important; }
    .lg-mb-1 { margin-bottom: 4px !important; }
    .lg-mb-2 { margin-bottom: 8px !important; }
    .lg-mb-3 { margin-bottom: 12px !important; }
    .lg-mb-4 { margin-bottom: 16px !important; }
    .lg-mb-5 { margin-bottom: 20px !important; }
    .lg-mb-6 { margin-bottom: 24px !important; }
    .lg-mb-8 { margin-bottom: 32px !important; }
    .lg-mb-12 { margin-bottom: 48px !important; }
    .lg-mb-16 { margin-bottom: 64px !important; }

    /* Margin Top */
    .lg-mt-0 { margin-top: 0 !important; }
    .lg-mt-1 { margin-top: 4px !important; }
    .lg-mt-2 { margin-top: 8px !important; }
    .lg-mt-3 { margin-top: 12px !important; }
    .lg-mt-4 { margin-top: 16px !important; }
    .lg-mt-5 { margin-top: 20px !important; }
    .lg-mt-6 { margin-top: 24px !important; }
    .lg-mt-8 { margin-top: 32px !important; }
    .lg-mt-12 { margin-top: 48px !important; }
    .lg-mt-16 { margin-top: 64px !important; }

    /* Padding Bottom */
    .lg-pb-0 { padding-bottom: 0 !important; }
    .lg-pb-1 { padding-bottom: 4px !important; }
    .lg-pb-2 { padding-bottom: 8px !important; }
    .lg-pb-3 { padding-bottom: 12px !important; }
    .lg-pb-4 { padding-bottom: 16px !important; }
    .lg-pb-5 { padding-bottom: 20px !important; }
    .lg-pb-6 { padding-bottom: 24px !important; }
    .lg-pb-8 { padding-bottom: 32px !important; }
    .lg-pb-12 { padding-bottom: 48px !important; }
    .lg-pb-16 { padding-bottom: 64px !important; }
}

/* ========================================
   BREAKPOINT: xl (1904px and up)
   ======================================== */
@media (min-width: 1904px) {
    /* Margin X-axis */
    .xl-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .xl-mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
    .xl-mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
    .xl-mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
    .xl-mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
    .xl-mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
    .xl-mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
    .xl-mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
    .xl-mx-12 { margin-left: 48px !important; margin-right: 48px !important; }
    .xl-mx-16 { margin-left: 64px !important; margin-right: 64px !important; }

    /* Margin Y-axis */
    .xl-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .xl-my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
    .xl-my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
    .xl-my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
    .xl-my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
    .xl-my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
    .xl-my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
    .xl-my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
    .xl-my-12 { margin-top: 48px !important; margin-bottom: 48px !important; }
    .xl-my-16 { margin-top: 64px !important; margin-bottom: 64px !important; }

    /* Margin Bottom */
    .xl-mb-0 { margin-bottom: 0 !important; }
    .xl-mb-1 { margin-bottom: 4px !important; }
    .xl-mb-2 { margin-bottom: 8px !important; }
    .xl-mb-3 { margin-bottom: 12px !important; }
    .xl-mb-4 { margin-bottom: 16px !important; }
    .xl-mb-5 { margin-bottom: 20px !important; }
    .xl-mb-6 { margin-bottom: 24px !important; }
    .xl-mb-8 { margin-bottom: 32px !important; }
    .xl-mb-12 { margin-bottom: 48px !important; }
    .xl-mb-16 { margin-bottom: 64px !important; }

    /* Margin Top */
    .xl-mt-0 { margin-top: 0 !important; }
    .xl-mt-1 { margin-top: 4px !important; }
    .xl-mt-2 { margin-top: 8px !important; }
    .xl-mt-3 { margin-top: 12px !important; }
    .xl-mt-4 { margin-top: 16px !important; }
    .xl-mt-5 { margin-top: 20px !important; }
    .xl-mt-6 { margin-top: 24px !important; }
    .xl-mt-8 { margin-top: 32px !important; }
    .xl-mt-12 { margin-top: 48px !important; }
    .xl-mt-16 { margin-top: 64px !important; }

    /* Padding Bottom */
    .xl-pb-0 { padding-bottom: 0 !important; }
    .xl-pb-1 { padding-bottom: 4px !important; }
    .xl-pb-2 { padding-bottom: 8px !important; }
    .xl-pb-3 { padding-bottom: 12px !important; }
    .xl-pb-4 { padding-bottom: 16px !important; }
    .xl-pb-5 { padding-bottom: 20px !important; }
    .xl-pb-6 { padding-bottom: 24px !important; }
    .xl-pb-8 { padding-bottom: 32px !important; }
    .xl-pb-12 { padding-bottom: 48px !important; }
    .xl-pb-16 { padding-bottom: 64px !important; }
}