santycss/dist/santy.css

Plain-English utility-first CSS framework — no build step, just classes

/* ============================================================
   SantyCSS v1.0  —  Plain-English Utility CSS Framework
   https://github.com/santybad/santy_css
   ============================================================ */

/* ── Box Sizing Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── CSS Custom Properties (Theme) ── */
:root {
  /* ── Design Tokens (override to customise) ── */
  --santy-primary:        #3b82f6;
  --santy-primary-dark:   #2563eb;
  --santy-primary-light:  #dbeafe;
  --santy-secondary:      #6b7280;
  --santy-success:        #22c55e;
  --santy-warning:        #f59e0b;
  --santy-danger:         #ef4444;
  --santy-info:           #06b6d4;
  --santy-radius-sm:      4px;
  --santy-radius:         8px;
  --santy-radius-md:      12px;
  --santy-radius-lg:      16px;
  --santy-radius-xl:      24px;
  --santy-radius-full:    9999px;
  --santy-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --santy-font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --santy-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --santy-transition-fast: all 0.15s ease;
  --santy-transition-normal: all 0.3s ease;
  --santy-transition-slow: all 0.5s ease;
  --santy-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --santy-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --santy-shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --santy-shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --santy-shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --santy-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
}

/* ── Display ── */
.make-block        { display: block; }
.make-inline       { display: inline; }
.make-inline-block { display: inline-block; }
.make-flex         { display: flex; }
.make-inline-flex  { display: inline-flex; }
.make-grid         { display: grid; }
.make-inline-grid  { display: inline-grid; }
.make-table        { display: table; }
.make-hidden       { display: none; }
.make-contents     { display: contents; }

/* ── Visibility ── */
.make-visible   { visibility: visible; }
.make-invisible { visibility: hidden; }
.make-collapse  { visibility: collapse; }

/* ── Flex Direction ── */
.flex-row            { flex-direction: row; }
.flex-row-reverse    { flex-direction: row-reverse; }
.flex-column         { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* ── Flex Wrap ── */
.flex-wrap        { flex-wrap: wrap; }
.flex-wrap-reverse{ flex-wrap: wrap-reverse; }
.flex-nowrap      { flex-wrap: nowrap; }

/* ── Flex Grow / Shrink / None ── */
.flex-grow        { flex-grow: 1; }
.flex-grow-none   { flex-grow: 0; }
.flex-shrink      { flex-shrink: 1; }
.flex-shrink-none { flex-shrink: 0; }
.flex-auto        { flex: 1 1 auto; }
.flex-initial     { flex: 0 1 auto; }
.flex-none        { flex: none; }
.flex-equal       { flex: 1; }

/* ── Align Items ── */
.align-start    { align-items: flex-start; }
.align-end      { align-items: flex-end; }
.align-center   { align-items: center; }
.align-stretch  { align-items: stretch; }
.align-baseline { align-items: baseline; }

/* ── Align Self ── */
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }
.self-baseline { align-self: baseline; }
.self-auto     { align-self: auto; }

/* ── Align Content ── */
.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-stretch { align-content: stretch; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-evenly  { align-content: space-evenly; }

/* ── Justify Content ── */
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* ── Justify Items ── */
.justify-items-start   { justify-items: start; }
.justify-items-end     { justify-items: end; }
.justify-items-center  { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

/* ── Justify Self ── */
.justify-self-start   { justify-self: start; }
.justify-self-end     { justify-self: end; }
.justify-self-center  { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }
.justify-self-auto    { justify-self: auto; }

/* ── Place Content / Items / Self ── */
.place-center  { place-items: center; place-content: center; }
.place-stretch { place-items: stretch; }

/* ── Order ── */
.order-first { order: -9999; }
.order-last  { order: 9999; }
.order-none  { order: 0; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* ── Grid Template Columns ── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

/* ── Grid Template Rows ── */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* ── Grid Column / Row Span ── */
.span-col-1 { grid-column: span 1 / span 1; }
.span-col-2 { grid-column: span 2 / span 2; }
.span-col-3 { grid-column: span 3 / span 3; }
.span-col-4 { grid-column: span 4 / span 4; }
.span-col-5 { grid-column: span 5 / span 5; }
.span-col-6 { grid-column: span 6 / span 6; }
.span-col-7 { grid-column: span 7 / span 7; }
.span-col-8 { grid-column: span 8 / span 8; }
.span-col-9 { grid-column: span 9 / span 9; }
.span-col-10 { grid-column: span 10 / span 10; }
.span-col-11 { grid-column: span 11 / span 11; }
.span-col-12 { grid-column: span 12 / span 12; }
.span-row-1 { grid-row: span 1 / span 1; }
.span-row-2 { grid-row: span 2 / span 2; }
.span-row-3 { grid-row: span 3 / span 3; }
.span-row-4 { grid-row: span 4 / span 4; }
.span-row-5 { grid-row: span 5 / span 5; }
.span-row-6 { grid-row: span 6 / span 6; }
.span-col-full { grid-column: 1 / -1; }
.span-row-full { grid-row: 1 / -1; }

/* ── Grid Auto Flow ── */
.grid-flow-row    { grid-auto-flow: row; }
.grid-flow-col    { grid-auto-flow: column; }
.grid-flow-dense  { grid-auto-flow: dense; }
.grid-auto-cols-min  { grid-auto-columns: min-content; }
.grid-auto-cols-max  { grid-auto-columns: max-content; }
.grid-auto-cols-fr   { grid-auto-columns: minmax(0, 1fr); }


/* ── Padding ── */
.add-padding-0        { padding: 0px; }
.add-padding-top-0    { padding-top: 0px; }
.add-padding-bottom-0 { padding-bottom: 0px; }
.add-padding-left-0   { padding-left: 0px; }
.add-padding-right-0  { padding-right: 0px; }
.add-padding-x-0      { padding-left: 0px; padding-right: 0px; }
.add-padding-y-0      { padding-top: 0px; padding-bottom: 0px; }
.add-padding-1        { padding: 1px; }
.add-padding-top-1    { padding-top: 1px; }
.add-padding-bottom-1 { padding-bottom: 1px; }
.add-padding-left-1   { padding-left: 1px; }
.add-padding-right-1  { padding-right: 1px; }
.add-padding-x-1      { padding-left: 1px; padding-right: 1px; }
.add-padding-y-1      { padding-top: 1px; padding-bottom: 1px; }
.add-padding-2        { padding: 2px; }
.add-padding-top-2    { padding-top: 2px; }
.add-padding-bottom-2 { padding-bottom: 2px; }
.add-padding-left-2   { padding-left: 2px; }
.add-padding-right-2  { padding-right: 2px; }
.add-padding-x-2      { padding-left: 2px; padding-right: 2px; }
.add-padding-y-2      { padding-top: 2px; padding-bottom: 2px; }
.add-padding-3        { padding: 3px; }
.add-padding-top-3    { padding-top: 3px; }
.add-padding-bottom-3 { padding-bottom: 3px; }
.add-padding-left-3   { padding-left: 3px; }
.add-padding-right-3  { padding-right: 3px; }
.add-padding-x-3      { padding-left: 3px; padding-right: 3px; }
.add-padding-y-3      { padding-top: 3px; padding-bottom: 3px; }
.add-padding-4        { padding: 4px; }
.add-padding-top-4    { padding-top: 4px; }
.add-padding-bottom-4 { padding-bottom: 4px; }
.add-padding-left-4   { padding-left: 4px; }
.add-padding-right-4  { padding-right: 4px; }
.add-padding-x-4      { padding-left: 4px; padding-right: 4px; }
.add-padding-y-4      { padding-top: 4px; padding-bottom: 4px; }
.add-padding-5        { padding: 5px; }
.add-padding-top-5    { padding-top: 5px; }
.add-padding-bottom-5 { padding-bottom: 5px; }
.add-padding-left-5   { padding-left: 5px; }
.add-padding-right-5  { padding-right: 5px; }
.add-padding-x-5      { padding-left: 5px; padding-right: 5px; }
.add-padding-y-5      { padding-top: 5px; padding-bottom: 5px; }
.add-padding-6        { padding: 6px; }
.add-padding-top-6    { padding-top: 6px; }
.add-padding-bottom-6 { padding-bottom: 6px; }
.add-padding-left-6   { padding-left: 6px; }
.add-padding-right-6  { padding-right: 6px; }
.add-padding-x-6      { padding-left: 6px; padding-right: 6px; }
.add-padding-y-6      { padding-top: 6px; padding-bottom: 6px; }
.add-padding-7        { padding: 7px; }
.add-padding-top-7    { padding-top: 7px; }
.add-padding-bottom-7 { padding-bottom: 7px; }
.add-padding-left-7   { padding-left: 7px; }
.add-padding-right-7  { padding-right: 7px; }
.add-padding-x-7      { padding-left: 7px; padding-right: 7px; }
.add-padding-y-7      { padding-top: 7px; padding-bottom: 7px; }
.add-padding-8        { padding: 8px; }
.add-padding-top-8    { padding-top: 8px; }
.add-padding-bottom-8 { padding-bottom: 8px; }
.add-padding-left-8   { padding-left: 8px; }
.add-padding-right-8  { padding-right: 8px; }
.add-padding-x-8      { padding-left: 8px; padding-right: 8px; }
.add-padding-y-8      { padding-top: 8px; padding-bottom: 8px; }
.add-padding-9        { padding: 9px; }
.add-padding-top-9    { padding-top: 9px; }
.add-padding-bottom-9 { padding-bottom: 9px; }
.add-padding-left-9   { padding-left: 9px; }
.add-padding-right-9  { padding-right: 9px; }
.add-padding-x-9      { padding-left: 9px; padding-right: 9px; }
.add-padding-y-9      { padding-top: 9px; padding-bottom: 9px; }
.add-padding-10        { padding: 10px; }
.add-padding-top-10    { padding-top: 10px; }
.add-padding-bottom-10 { padding-bottom: 10px; }
.add-padding-left-10   { padding-left: 10px; }
.add-padding-right-10  { padding-right: 10px; }
.add-padding-x-10      { padding-left: 10px; padding-right: 10px; }
.add-padding-y-10      { padding-top: 10px; padding-bottom: 10px; }
.add-padding-11        { padding: 11px; }
.add-padding-top-11    { padding-top: 11px; }
.add-padding-bottom-11 { padding-bottom: 11px; }
.add-padding-left-11   { padding-left: 11px; }
.add-padding-right-11  { padding-right: 11px; }
.add-padding-x-11      { padding-left: 11px; padding-right: 11px; }
.add-padding-y-11      { padding-top: 11px; padding-bottom: 11px; }
.add-padding-12        { padding: 12px; }
.add-padding-top-12    { padding-top: 12px; }
.add-padding-bottom-12 { padding-bottom: 12px; }
.add-padding-left-12   { padding-left: 12px; }
.add-padding-right-12  { padding-right: 12px; }
.add-padding-x-12      { padding-left: 12px; padding-right: 12px; }
.add-padding-y-12      { padding-top: 12px; padding-bottom: 12px; }
.add-padding-13        { padding: 13px; }
.add-padding-top-13    { padding-top: 13px; }
.add-padding-bottom-13 { padding-bottom: 13px; }
.add-padding-left-13   { padding-left: 13px; }
.add-padding-right-13  { padding-right: 13px; }
.add-padding-x-13      { padding-left: 13px; padding-right: 13px; }
.add-padding-y-13      { padding-top: 13px; padding-bottom: 13px; }
.add-padding-14        { padding: 14px; }
.add-padding-top-14    { padding-top: 14px; }
.add-padding-bottom-14 { padding-bottom: 14px; }
.add-padding-left-14   { padding-left: 14px; }
.add-padding-right-14  { padding-right: 14px; }
.add-padding-x-14      { padding-left: 14px; padding-right: 14px; }
.add-padding-y-14      { padding-top: 14px; padding-bottom: 14px; }
.add-padding-15        { padding: 15px; }
.add-padding-top-15    { padding-top: 15px; }
.add-padding-bottom-15 { padding-bottom: 15px; }
.add-padding-left-15   { padding-left: 15px; }
.add-padding-right-15  { padding-right: 15px; }
.add-padding-x-15      { padding-left: 15px; padding-right: 15px; }
.add-padding-y-15      { padding-top: 15px; padding-bottom: 15px; }
.add-padding-16        { padding: 16px; }
.add-padding-top-16    { padding-top: 16px; }
.add-padding-bottom-16 { padding-bottom: 16px; }
.add-padding-left-16   { padding-left: 16px; }
.add-padding-right-16  { padding-right: 16px; }
.add-padding-x-16      { padding-left: 16px; padding-right: 16px; }
.add-padding-y-16      { padding-top: 16px; padding-bottom: 16px; }
.add-padding-17        { padding: 17px; }
.add-padding-top-17    { padding-top: 17px; }
.add-padding-bottom-17 { padding-bottom: 17px; }
.add-padding-left-17   { padding-left: 17px; }
.add-padding-right-17  { padding-right: 17px; }
.add-padding-x-17      { padding-left: 17px; padding-right: 17px; }
.add-padding-y-17      { padding-top: 17px; padding-bottom: 17px; }
.add-padding-18        { padding: 18px; }
.add-padding-top-18    { padding-top: 18px; }
.add-padding-bottom-18 { padding-bottom: 18px; }
.add-padding-left-18   { padding-left: 18px; }
.add-padding-right-18  { padding-right: 18px; }
.add-padding-x-18      { padding-left: 18px; padding-right: 18px; }
.add-padding-y-18      { padding-top: 18px; padding-bottom: 18px; }
.add-padding-19        { padding: 19px; }
.add-padding-top-19    { padding-top: 19px; }
.add-padding-bottom-19 { padding-bottom: 19px; }
.add-padding-left-19   { padding-left: 19px; }
.add-padding-right-19  { padding-right: 19px; }
.add-padding-x-19      { padding-left: 19px; padding-right: 19px; }
.add-padding-y-19      { padding-top: 19px; padding-bottom: 19px; }
.add-padding-20        { padding: 20px; }
.add-padding-top-20    { padding-top: 20px; }
.add-padding-bottom-20 { padding-bottom: 20px; }
.add-padding-left-20   { padding-left: 20px; }
.add-padding-right-20  { padding-right: 20px; }
.add-padding-x-20      { padding-left: 20px; padding-right: 20px; }
.add-padding-y-20      { padding-top: 20px; padding-bottom: 20px; }
.add-padding-21        { padding: 21px; }
.add-padding-top-21    { padding-top: 21px; }
.add-padding-bottom-21 { padding-bottom: 21px; }
.add-padding-left-21   { padding-left: 21px; }
.add-padding-right-21  { padding-right: 21px; }
.add-padding-x-21      { padding-left: 21px; padding-right: 21px; }
.add-padding-y-21      { padding-top: 21px; padding-bottom: 21px; }
.add-padding-22        { padding: 22px; }
.add-padding-top-22    { padding-top: 22px; }
.add-padding-bottom-22 { padding-bottom: 22px; }
.add-padding-left-22   { padding-left: 22px; }
.add-padding-right-22  { padding-right: 22px; }
.add-padding-x-22      { padding-left: 22px; padding-right: 22px; }
.add-padding-y-22      { padding-top: 22px; padding-bottom: 22px; }
.add-padding-23        { padding: 23px; }
.add-padding-top-23    { padding-top: 23px; }
.add-padding-bottom-23 { padding-bottom: 23px; }
.add-padding-left-23   { padding-left: 23px; }
.add-padding-right-23  { padding-right: 23px; }
.add-padding-x-23      { padding-left: 23px; padding-right: 23px; }
.add-padding-y-23      { padding-top: 23px; padding-bottom: 23px; }
.add-padding-24        { padding: 24px; }
.add-padding-top-24    { padding-top: 24px; }
.add-padding-bottom-24 { padding-bottom: 24px; }
.add-padding-left-24   { padding-left: 24px; }
.add-padding-right-24  { padding-right: 24px; }
.add-padding-x-24      { padding-left: 24px; padding-right: 24px; }
.add-padding-y-24      { padding-top: 24px; padding-bottom: 24px; }
.add-padding-25        { padding: 25px; }
.add-padding-top-25    { padding-top: 25px; }
.add-padding-bottom-25 { padding-bottom: 25px; }
.add-padding-left-25   { padding-left: 25px; }
.add-padding-right-25  { padding-right: 25px; }
.add-padding-x-25      { padding-left: 25px; padding-right: 25px; }
.add-padding-y-25      { padding-top: 25px; padding-bottom: 25px; }
.add-padding-26        { padding: 26px; }
.add-padding-top-26    { padding-top: 26px; }
.add-padding-bottom-26 { padding-bottom: 26px; }
.add-padding-left-26   { padding-left: 26px; }
.add-padding-right-26  { padding-right: 26px; }
.add-padding-x-26      { padding-left: 26px; padding-right: 26px; }
.add-padding-y-26      { padding-top: 26px; padding-bottom: 26px; }
.add-padding-27        { padding: 27px; }
.add-padding-top-27    { padding-top: 27px; }
.add-padding-bottom-27 { padding-bottom: 27px; }
.add-padding-left-27   { padding-left: 27px; }
.add-padding-right-27  { padding-right: 27px; }
.add-padding-x-27      { padding-left: 27px; padding-right: 27px; }
.add-padding-y-27      { padding-top: 27px; padding-bottom: 27px; }
.add-padding-28        { padding: 28px; }
.add-padding-top-28    { padding-top: 28px; }
.add-padding-bottom-28 { padding-bottom: 28px; }
.add-padding-left-28   { padding-left: 28px; }
.add-padding-right-28  { padding-right: 28px; }
.add-padding-x-28      { padding-left: 28px; padding-right: 28px; }
.add-padding-y-28      { padding-top: 28px; padding-bottom: 28px; }
.add-padding-29        { padding: 29px; }
.add-padding-top-29    { padding-top: 29px; }
.add-padding-bottom-29 { padding-bottom: 29px; }
.add-padding-left-29   { padding-left: 29px; }
.add-padding-right-29  { padding-right: 29px; }
.add-padding-x-29      { padding-left: 29px; padding-right: 29px; }
.add-padding-y-29      { padding-top: 29px; padding-bottom: 29px; }
.add-padding-30        { padding: 30px; }
.add-padding-top-30    { padding-top: 30px; }
.add-padding-bottom-30 { padding-bottom: 30px; }
.add-padding-left-30   { padding-left: 30px; }
.add-padding-right-30  { padding-right: 30px; }
.add-padding-x-30      { padding-left: 30px; padding-right: 30px; }
.add-padding-y-30      { padding-top: 30px; padding-bottom: 30px; }
.add-padding-31        { padding: 31px; }
.add-padding-top-31    { padding-top: 31px; }
.add-padding-bottom-31 { padding-bottom: 31px; }
.add-padding-left-31   { padding-left: 31px; }
.add-padding-right-31  { padding-right: 31px; }
.add-padding-x-31      { padding-left: 31px; padding-right: 31px; }
.add-padding-y-31      { padding-top: 31px; padding-bottom: 31px; }
.add-padding-32        { padding: 32px; }
.add-padding-top-32    { padding-top: 32px; }
.add-padding-bottom-32 { padding-bottom: 32px; }
.add-padding-left-32   { padding-left: 32px; }
.add-padding-right-32  { padding-right: 32px; }
.add-padding-x-32      { padding-left: 32px; padding-right: 32px; }
.add-padding-y-32      { padding-top: 32px; padding-bottom: 32px; }
.add-padding-33        { padding: 33px; }
.add-padding-top-33    { padding-top: 33px; }
.add-padding-bottom-33 { padding-bottom: 33px; }
.add-padding-left-33   { padding-left: 33px; }
.add-padding-right-33  { padding-right: 33px; }
.add-padding-x-33      { padding-left: 33px; padding-right: 33px; }
.add-padding-y-33      { padding-top: 33px; padding-bottom: 33px; }
.add-padding-34        { padding: 34px; }
.add-padding-top-34    { padding-top: 34px; }
.add-padding-bottom-34 { padding-bottom: 34px; }
.add-padding-left-34   { padding-left: 34px; }
.add-padding-right-34  { padding-right: 34px; }
.add-padding-x-34      { padding-left: 34px; padding-right: 34px; }
.add-padding-y-34      { padding-top: 34px; padding-bottom: 34px; }
.add-padding-35        { padding: 35px; }
.add-padding-top-35    { padding-top: 35px; }
.add-padding-bottom-35 { padding-bottom: 35px; }
.add-padding-left-35   { padding-left: 35px; }
.add-padding-right-35  { padding-right: 35px; }
.add-padding-x-35      { padding-left: 35px; padding-right: 35px; }
.add-padding-y-35      { padding-top: 35px; padding-bottom: 35px; }
.add-padding-36        { padding: 36px; }
.add-padding-top-36    { padding-top: 36px; }
.add-padding-bottom-36 { padding-bottom: 36px; }
.add-padding-left-36   { padding-left: 36px; }
.add-padding-right-36  { padding-right: 36px; }
.add-padding-x-36      { padding-left: 36px; padding-right: 36px; }
.add-padding-y-36      { padding-top: 36px; padding-bottom: 36px; }
.add-padding-37        { padding: 37px; }
.add-padding-top-37    { padding-top: 37px; }
.add-padding-bottom-37 { padding-bottom: 37px; }
.add-padding-left-37   { padding-left: 37px; }
.add-padding-right-37  { padding-right: 37px; }
.add-padding-x-37      { padding-left: 37px; padding-right: 37px; }
.add-padding-y-37      { padding-top: 37px; padding-bottom: 37px; }
.add-padding-38        { padding: 38px; }
.add-padding-top-38    { padding-top: 38px; }
.add-padding-bottom-38 { padding-bottom: 38px; }
.add-padding-left-38   { padding-left: 38px; }
.add-padding-right-38  { padding-right: 38px; }
.add-padding-x-38      { padding-left: 38px; padding-right: 38px; }
.add-padding-y-38      { padding-top: 38px; padding-bottom: 38px; }
.add-padding-39        { padding: 39px; }
.add-padding-top-39    { padding-top: 39px; }
.add-padding-bottom-39 { padding-bottom: 39px; }
.add-padding-left-39   { padding-left: 39px; }
.add-padding-right-39  { padding-right: 39px; }
.add-padding-x-39      { padding-left: 39px; padding-right: 39px; }
.add-padding-y-39      { padding-top: 39px; padding-bottom: 39px; }
.add-padding-40        { padding: 40px; }
.add-padding-top-40    { padding-top: 40px; }
.add-padding-bottom-40 { padding-bottom: 40px; }
.add-padding-left-40   { padding-left: 40px; }
.add-padding-right-40  { padding-right: 40px; }
.add-padding-x-40      { padding-left: 40px; padding-right: 40px; }
.add-padding-y-40      { padding-top: 40px; padding-bottom: 40px; }
.add-padding-41        { padding: 41px; }
.add-padding-top-41    { padding-top: 41px; }
.add-padding-bottom-41 { padding-bottom: 41px; }
.add-padding-left-41   { padding-left: 41px; }
.add-padding-right-41  { padding-right: 41px; }
.add-padding-x-41      { padding-left: 41px; padding-right: 41px; }
.add-padding-y-41      { padding-top: 41px; padding-bottom: 41px; }
.add-padding-42        { padding: 42px; }
.add-padding-top-42    { padding-top: 42px; }
.add-padding-bottom-42 { padding-bottom: 42px; }
.add-padding-left-42   { padding-left: 42px; }
.add-padding-right-42  { padding-right: 42px; }
.add-padding-x-42      { padding-left: 42px; padding-right: 42px; }
.add-padding-y-42      { padding-top: 42px; padding-bottom: 42px; }
.add-padding-43        { padding: 43px; }
.add-padding-top-43    { padding-top: 43px; }
.add-padding-bottom-43 { padding-bottom: 43px; }
.add-padding-left-43   { padding-left: 43px; }
.add-padding-right-43  { padding-right: 43px; }
.add-padding-x-43      { padding-left: 43px; padding-right: 43px; }
.add-padding-y-43      { padding-top: 43px; padding-bottom: 43px; }
.add-padding-44        { padding: 44px; }
.add-padding-top-44    { padding-top: 44px; }
.add-padding-bottom-44 { padding-bottom: 44px; }
.add-padding-left-44   { padding-left: 44px; }
.add-padding-right-44  { padding-right: 44px; }
.add-padding-x-44      { padding-left: 44px; padding-right: 44px; }
.add-padding-y-44      { padding-top: 44px; padding-bottom: 44px; }
.add-padding-45        { padding: 45px; }
.add-padding-top-45    { padding-top: 45px; }
.add-padding-bottom-45 { padding-bottom: 45px; }
.add-padding-left-45   { padding-left: 45px; }
.add-padding-right-45  { padding-right: 45px; }
.add-padding-x-45      { padding-left: 45px; padding-right: 45px; }
.add-padding-y-45      { padding-top: 45px; padding-bottom: 45px; }
.add-padding-46        { padding: 46px; }
.add-padding-top-46    { padding-top: 46px; }
.add-padding-bottom-46 { padding-bottom: 46px; }
.add-padding-left-46   { padding-left: 46px; }
.add-padding-right-46  { padding-right: 46px; }
.add-padding-x-46      { padding-left: 46px; padding-right: 46px; }
.add-padding-y-46      { padding-top: 46px; padding-bottom: 46px; }
.add-padding-47        { padding: 47px; }
.add-padding-top-47    { padding-top: 47px; }
.add-padding-bottom-47 { padding-bottom: 47px; }
.add-padding-left-47   { padding-left: 47px; }
.add-padding-right-47  { padding-right: 47px; }
.add-padding-x-47      { padding-left: 47px; padding-right: 47px; }
.add-padding-y-47      { padding-top: 47px; padding-bottom: 47px; }
.add-padding-48        { padding: 48px; }
.add-padding-top-48    { padding-top: 48px; }
.add-padding-bottom-48 { padding-bottom: 48px; }
.add-padding-left-48   { padding-left: 48px; }
.add-padding-right-48  { padding-right: 48px; }
.add-padding-x-48      { padding-left: 48px; padding-right: 48px; }
.add-padding-y-48      { padding-top: 48px; padding-bottom: 48px; }
.add-padding-49        { padding: 49px; }
.add-padding-top-49    { padding-top: 49px; }
.add-padding-bottom-49 { padding-bottom: 49px; }
.add-padding-left-49   { padding-left: 49px; }
.add-padding-right-49  { padding-right: 49px; }
.add-padding-x-49      { padding-left: 49px; padding-right: 49px; }
.add-padding-y-49      { padding-top: 49px; padding-bottom: 49px; }
.add-padding-50        { padding: 50px; }
.add-padding-top-50    { padding-top: 50px; }
.add-padding-bottom-50 { padding-bottom: 50px; }
.add-padding-left-50   { padding-left: 50px; }
.add-padding-right-50  { padding-right: 50px; }
.add-padding-x-50      { padding-left: 50px; padding-right: 50px; }
.add-padding-y-50      { padding-top: 50px; padding-bottom: 50px; }
.add-padding-52        { padding: 52px; }
.add-padding-top-52    { padding-top: 52px; }
.add-padding-bottom-52 { padding-bottom: 52px; }
.add-padding-left-52   { padding-left: 52px; }
.add-padding-right-52  { padding-right: 52px; }
.add-padding-x-52      { padding-left: 52px; padding-right: 52px; }
.add-padding-y-52      { padding-top: 52px; padding-bottom: 52px; }
.add-padding-56        { padding: 56px; }
.add-padding-top-56    { padding-top: 56px; }
.add-padding-bottom-56 { padding-bottom: 56px; }
.add-padding-left-56   { padding-left: 56px; }
.add-padding-right-56  { padding-right: 56px; }
.add-padding-x-56      { padding-left: 56px; padding-right: 56px; }
.add-padding-y-56      { padding-top: 56px; padding-bottom: 56px; }
.add-padding-60        { padding: 60px; }
.add-padding-top-60    { padding-top: 60px; }
.add-padding-bottom-60 { padding-bottom: 60px; }
.add-padding-left-60   { padding-left: 60px; }
.add-padding-right-60  { padding-right: 60px; }
.add-padding-x-60      { padding-left: 60px; padding-right: 60px; }
.add-padding-y-60      { padding-top: 60px; padding-bottom: 60px; }
.add-padding-64        { padding: 64px; }
.add-padding-top-64    { padding-top: 64px; }
.add-padding-bottom-64 { padding-bottom: 64px; }
.add-padding-left-64   { padding-left: 64px; }
.add-padding-right-64  { padding-right: 64px; }
.add-padding-x-64      { padding-left: 64px; padding-right: 64px; }
.add-padding-y-64      { padding-top: 64px; padding-bottom: 64px; }
.add-padding-68        { padding: 68px; }
.add-padding-top-68    { padding-top: 68px; }
.add-padding-bottom-68 { padding-bottom: 68px; }
.add-padding-left-68   { padding-left: 68px; }
.add-padding-right-68  { padding-right: 68px; }
.add-padding-x-68      { padding-left: 68px; padding-right: 68px; }
.add-padding-y-68      { padding-top: 68px; padding-bottom: 68px; }
.add-padding-72        { padding: 72px; }
.add-padding-top-72    { padding-top: 72px; }
.add-padding-bottom-72 { padding-bottom: 72px; }
.add-padding-left-72   { padding-left: 72px; }
.add-padding-right-72  { padding-right: 72px; }
.add-padding-x-72      { padding-left: 72px; padding-right: 72px; }
.add-padding-y-72      { padding-top: 72px; padding-bottom: 72px; }
.add-padding-76        { padding: 76px; }
.add-padding-top-76    { padding-top: 76px; }
.add-padding-bottom-76 { padding-bottom: 76px; }
.add-padding-left-76   { padding-left: 76px; }
.add-padding-right-76  { padding-right: 76px; }
.add-padding-x-76      { padding-left: 76px; padding-right: 76px; }
.add-padding-y-76      { padding-top: 76px; padding-bottom: 76px; }
.add-padding-80        { padding: 80px; }
.add-padding-top-80    { padding-top: 80px; }
.add-padding-bottom-80 { padding-bottom: 80px; }
.add-padding-left-80   { padding-left: 80px; }
.add-padding-right-80  { padding-right: 80px; }
.add-padding-x-80      { padding-left: 80px; padding-right: 80px; }
.add-padding-y-80      { padding-top: 80px; padding-bottom: 80px; }
.add-padding-84        { padding: 84px; }
.add-padding-top-84    { padding-top: 84px; }
.add-padding-bottom-84 { padding-bottom: 84px; }
.add-padding-left-84   { padding-left: 84px; }
.add-padding-right-84  { padding-right: 84px; }
.add-padding-x-84      { padding-left: 84px; padding-right: 84px; }
.add-padding-y-84      { padding-top: 84px; padding-bottom: 84px; }
.add-padding-88        { padding: 88px; }
.add-padding-top-88    { padding-top: 88px; }
.add-padding-bottom-88 { padding-bottom: 88px; }
.add-padding-left-88   { padding-left: 88px; }
.add-padding-right-88  { padding-right: 88px; }
.add-padding-x-88      { padding-left: 88px; padding-right: 88px; }
.add-padding-y-88      { padding-top: 88px; padding-bottom: 88px; }
.add-padding-92        { padding: 92px; }
.add-padding-top-92    { padding-top: 92px; }
.add-padding-bottom-92 { padding-bottom: 92px; }
.add-padding-left-92   { padding-left: 92px; }
.add-padding-right-92  { padding-right: 92px; }
.add-padding-x-92      { padding-left: 92px; padding-right: 92px; }
.add-padding-y-92      { padding-top: 92px; padding-bottom: 92px; }
.add-padding-96        { padding: 96px; }
.add-padding-top-96    { padding-top: 96px; }
.add-padding-bottom-96 { padding-bottom: 96px; }
.add-padding-left-96   { padding-left: 96px; }
.add-padding-right-96  { padding-right: 96px; }
.add-padding-x-96      { padding-left: 96px; padding-right: 96px; }
.add-padding-y-96      { padding-top: 96px; padding-bottom: 96px; }
.add-padding-100        { padding: 100px; }
.add-padding-top-100    { padding-top: 100px; }
.add-padding-bottom-100 { padding-bottom: 100px; }
.add-padding-left-100   { padding-left: 100px; }
.add-padding-right-100  { padding-right: 100px; }
.add-padding-x-100      { padding-left: 100px; padding-right: 100px; }
.add-padding-y-100      { padding-top: 100px; padding-bottom: 100px; }
.add-padding-104        { padding: 104px; }
.add-padding-top-104    { padding-top: 104px; }
.add-padding-bottom-104 { padding-bottom: 104px; }
.add-padding-left-104   { padding-left: 104px; }
.add-padding-right-104  { padding-right: 104px; }
.add-padding-x-104      { padding-left: 104px; padding-right: 104px; }
.add-padding-y-104      { padding-top: 104px; padding-bottom: 104px; }
.add-padding-108        { padding: 108px; }
.add-padding-top-108    { padding-top: 108px; }
.add-padding-bottom-108 { padding-bottom: 108px; }
.add-padding-left-108   { padding-left: 108px; }
.add-padding-right-108  { padding-right: 108px; }
.add-padding-x-108      { padding-left: 108px; padding-right: 108px; }
.add-padding-y-108      { padding-top: 108px; padding-bottom: 108px; }
.add-padding-112        { padding: 112px; }
.add-padding-top-112    { padding-top: 112px; }
.add-padding-bottom-112 { padding-bottom: 112px; }
.add-padding-left-112   { padding-left: 112px; }
.add-padding-right-112  { padding-right: 112px; }
.add-padding-x-112      { padding-left: 112px; padding-right: 112px; }
.add-padding-y-112      { padding-top: 112px; padding-bottom: 112px; }
.add-padding-116        { padding: 116px; }
.add-padding-top-116    { padding-top: 116px; }
.add-padding-bottom-116 { padding-bottom: 116px; }
.add-padding-left-116   { padding-left: 116px; }
.add-padding-right-116  { padding-right: 116px; }
.add-padding-x-116      { padding-left: 116px; padding-right: 116px; }
.add-padding-y-116      { padding-top: 116px; padding-bottom: 116px; }
.add-padding-120        { padding: 120px; }
.add-padding-top-120    { padding-top: 120px; }
.add-padding-bottom-120 { padding-bottom: 120px; }
.add-padding-left-120   { padding-left: 120px; }
.add-padding-right-120  { padding-right: 120px; }
.add-padding-x-120      { padding-left: 120px; padding-right: 120px; }
.add-padding-y-120      { padding-top: 120px; padding-bottom: 120px; }
.add-padding-124        { padding: 124px; }
.add-padding-top-124    { padding-top: 124px; }
.add-padding-bottom-124 { padding-bottom: 124px; }
.add-padding-left-124   { padding-left: 124px; }
.add-padding-right-124  { padding-right: 124px; }
.add-padding-x-124      { padding-left: 124px; padding-right: 124px; }
.add-padding-y-124      { padding-top: 124px; padding-bottom: 124px; }
.add-padding-128        { padding: 128px; }
.add-padding-top-128    { padding-top: 128px; }
.add-padding-bottom-128 { padding-bottom: 128px; }
.add-padding-left-128   { padding-left: 128px; }
.add-padding-right-128  { padding-right: 128px; }
.add-padding-x-128      { padding-left: 128px; padding-right: 128px; }
.add-padding-y-128      { padding-top: 128px; padding-bottom: 128px; }
.add-padding-132        { padding: 132px; }
.add-padding-top-132    { padding-top: 132px; }
.add-padding-bottom-132 { padding-bottom: 132px; }
.add-padding-left-132   { padding-left: 132px; }
.add-padding-right-132  { padding-right: 132px; }
.add-padding-x-132      { padding-left: 132px; padding-right: 132px; }
.add-padding-y-132      { padding-top: 132px; padding-bottom: 132px; }
.add-padding-136        { padding: 136px; }
.add-padding-top-136    { padding-top: 136px; }
.add-padding-bottom-136 { padding-bottom: 136px; }
.add-padding-left-136   { padding-left: 136px; }
.add-padding-right-136  { padding-right: 136px; }
.add-padding-x-136      { padding-left: 136px; padding-right: 136px; }
.add-padding-y-136      { padding-top: 136px; padding-bottom: 136px; }
.add-padding-140        { padding: 140px; }
.add-padding-top-140    { padding-top: 140px; }
.add-padding-bottom-140 { padding-bottom: 140px; }
.add-padding-left-140   { padding-left: 140px; }
.add-padding-right-140  { padding-right: 140px; }
.add-padding-x-140      { padding-left: 140px; padding-right: 140px; }
.add-padding-y-140      { padding-top: 140px; padding-bottom: 140px; }
.add-padding-144        { padding: 144px; }
.add-padding-top-144    { padding-top: 144px; }
.add-padding-bottom-144 { padding-bottom: 144px; }
.add-padding-left-144   { padding-left: 144px; }
.add-padding-right-144  { padding-right: 144px; }
.add-padding-x-144      { padding-left: 144px; padding-right: 144px; }
.add-padding-y-144      { padding-top: 144px; padding-bottom: 144px; }
.add-padding-148        { padding: 148px; }
.add-padding-top-148    { padding-top: 148px; }
.add-padding-bottom-148 { padding-bottom: 148px; }
.add-padding-left-148   { padding-left: 148px; }
.add-padding-right-148  { padding-right: 148px; }
.add-padding-x-148      { padding-left: 148px; padding-right: 148px; }
.add-padding-y-148      { padding-top: 148px; padding-bottom: 148px; }
.add-padding-152        { padding: 152px; }
.add-padding-top-152    { padding-top: 152px; }
.add-padding-bottom-152 { padding-bottom: 152px; }
.add-padding-left-152   { padding-left: 152px; }
.add-padding-right-152  { padding-right: 152px; }
.add-padding-x-152      { padding-left: 152px; padding-right: 152px; }
.add-padding-y-152      { padding-top: 152px; padding-bottom: 152px; }
.add-padding-156        { padding: 156px; }
.add-padding-top-156    { padding-top: 156px; }
.add-padding-bottom-156 { padding-bottom: 156px; }
.add-padding-left-156   { padding-left: 156px; }
.add-padding-right-156  { padding-right: 156px; }
.add-padding-x-156      { padding-left: 156px; padding-right: 156px; }
.add-padding-y-156      { padding-top: 156px; padding-bottom: 156px; }
.add-padding-160        { padding: 160px; }
.add-padding-top-160    { padding-top: 160px; }
.add-padding-bottom-160 { padding-bottom: 160px; }
.add-padding-left-160   { padding-left: 160px; }
.add-padding-right-160  { padding-right: 160px; }
.add-padding-x-160      { padding-left: 160px; padding-right: 160px; }
.add-padding-y-160      { padding-top: 160px; padding-bottom: 160px; }
.add-padding-164        { padding: 164px; }
.add-padding-top-164    { padding-top: 164px; }
.add-padding-bottom-164 { padding-bottom: 164px; }
.add-padding-left-164   { padding-left: 164px; }
.add-padding-right-164  { padding-right: 164px; }
.add-padding-x-164      { padding-left: 164px; padding-right: 164px; }
.add-padding-y-164      { padding-top: 164px; padding-bottom: 164px; }
.add-padding-168        { padding: 168px; }
.add-padding-top-168    { padding-top: 168px; }
.add-padding-bottom-168 { padding-bottom: 168px; }
.add-padding-left-168   { padding-left: 168px; }
.add-padding-right-168  { padding-right: 168px; }
.add-padding-x-168      { padding-left: 168px; padding-right: 168px; }
.add-padding-y-168      { padding-top: 168px; padding-bottom: 168px; }
.add-padding-172        { padding: 172px; }
.add-padding-top-172    { padding-top: 172px; }
.add-padding-bottom-172 { padding-bottom: 172px; }
.add-padding-left-172   { padding-left: 172px; }
.add-padding-right-172  { padding-right: 172px; }
.add-padding-x-172      { padding-left: 172px; padding-right: 172px; }
.add-padding-y-172      { padding-top: 172px; padding-bottom: 172px; }
.add-padding-176        { padding: 176px; }
.add-padding-top-176    { padding-top: 176px; }
.add-padding-bottom-176 { padding-bottom: 176px; }
.add-padding-left-176   { padding-left: 176px; }
.add-padding-right-176  { padding-right: 176px; }
.add-padding-x-176      { padding-left: 176px; padding-right: 176px; }
.add-padding-y-176      { padding-top: 176px; padding-bottom: 176px; }
.add-padding-180        { padding: 180px; }
.add-padding-top-180    { padding-top: 180px; }
.add-padding-bottom-180 { padding-bottom: 180px; }
.add-padding-left-180   { padding-left: 180px; }
.add-padding-right-180  { padding-right: 180px; }
.add-padding-x-180      { padding-left: 180px; padding-right: 180px; }
.add-padding-y-180      { padding-top: 180px; padding-bottom: 180px; }
.add-padding-184        { padding: 184px; }
.add-padding-top-184    { padding-top: 184px; }
.add-padding-bottom-184 { padding-bottom: 184px; }
.add-padding-left-184   { padding-left: 184px; }
.add-padding-right-184  { padding-right: 184px; }
.add-padding-x-184      { padding-left: 184px; padding-right: 184px; }
.add-padding-y-184      { padding-top: 184px; padding-bottom: 184px; }
.add-padding-188        { padding: 188px; }
.add-padding-top-188    { padding-top: 188px; }
.add-padding-bottom-188 { padding-bottom: 188px; }
.add-padding-left-188   { padding-left: 188px; }
.add-padding-right-188  { padding-right: 188px; }
.add-padding-x-188      { padding-left: 188px; padding-right: 188px; }
.add-padding-y-188      { padding-top: 188px; padding-bottom: 188px; }
.add-padding-192        { padding: 192px; }
.add-padding-top-192    { padding-top: 192px; }
.add-padding-bottom-192 { padding-bottom: 192px; }
.add-padding-left-192   { padding-left: 192px; }
.add-padding-right-192  { padding-right: 192px; }
.add-padding-x-192      { padding-left: 192px; padding-right: 192px; }
.add-padding-y-192      { padding-top: 192px; padding-bottom: 192px; }
.add-padding-196        { padding: 196px; }
.add-padding-top-196    { padding-top: 196px; }
.add-padding-bottom-196 { padding-bottom: 196px; }
.add-padding-left-196   { padding-left: 196px; }
.add-padding-right-196  { padding-right: 196px; }
.add-padding-x-196      { padding-left: 196px; padding-right: 196px; }
.add-padding-y-196      { padding-top: 196px; padding-bottom: 196px; }
.add-padding-200        { padding: 200px; }
.add-padding-top-200    { padding-top: 200px; }
.add-padding-bottom-200 { padding-bottom: 200px; }
.add-padding-left-200   { padding-left: 200px; }
.add-padding-right-200  { padding-right: 200px; }
.add-padding-x-200      { padding-left: 200px; padding-right: 200px; }
.add-padding-y-200      { padding-top: 200px; padding-bottom: 200px; }
.add-padding-220        { padding: 220px; }
.add-padding-top-220    { padding-top: 220px; }
.add-padding-bottom-220 { padding-bottom: 220px; }
.add-padding-left-220   { padding-left: 220px; }
.add-padding-right-220  { padding-right: 220px; }
.add-padding-x-220      { padding-left: 220px; padding-right: 220px; }
.add-padding-y-220      { padding-top: 220px; padding-bottom: 220px; }
.add-padding-240        { padding: 240px; }
.add-padding-top-240    { padding-top: 240px; }
.add-padding-bottom-240 { padding-bottom: 240px; }
.add-padding-left-240   { padding-left: 240px; }
.add-padding-right-240  { padding-right: 240px; }
.add-padding-x-240      { padding-left: 240px; padding-right: 240px; }
.add-padding-y-240      { padding-top: 240px; padding-bottom: 240px; }
.add-padding-256        { padding: 256px; }
.add-padding-top-256    { padding-top: 256px; }
.add-padding-bottom-256 { padding-bottom: 256px; }
.add-padding-left-256   { padding-left: 256px; }
.add-padding-right-256  { padding-right: 256px; }
.add-padding-x-256      { padding-left: 256px; padding-right: 256px; }
.add-padding-y-256      { padding-top: 256px; padding-bottom: 256px; }
.add-padding-280        { padding: 280px; }
.add-padding-top-280    { padding-top: 280px; }
.add-padding-bottom-280 { padding-bottom: 280px; }
.add-padding-left-280   { padding-left: 280px; }
.add-padding-right-280  { padding-right: 280px; }
.add-padding-x-280      { padding-left: 280px; padding-right: 280px; }
.add-padding-y-280      { padding-top: 280px; padding-bottom: 280px; }
.add-padding-320        { padding: 320px; }
.add-padding-top-320    { padding-top: 320px; }
.add-padding-bottom-320 { padding-bottom: 320px; }
.add-padding-left-320   { padding-left: 320px; }
.add-padding-right-320  { padding-right: 320px; }
.add-padding-x-320      { padding-left: 320px; padding-right: 320px; }
.add-padding-y-320      { padding-top: 320px; padding-bottom: 320px; }
.add-padding-360        { padding: 360px; }
.add-padding-top-360    { padding-top: 360px; }
.add-padding-bottom-360 { padding-bottom: 360px; }
.add-padding-left-360   { padding-left: 360px; }
.add-padding-right-360  { padding-right: 360px; }
.add-padding-x-360      { padding-left: 360px; padding-right: 360px; }
.add-padding-y-360      { padding-top: 360px; padding-bottom: 360px; }
.add-padding-384        { padding: 384px; }
.add-padding-top-384    { padding-top: 384px; }
.add-padding-bottom-384 { padding-bottom: 384px; }
.add-padding-left-384   { padding-left: 384px; }
.add-padding-right-384  { padding-right: 384px; }
.add-padding-x-384      { padding-left: 384px; padding-right: 384px; }
.add-padding-y-384      { padding-top: 384px; padding-bottom: 384px; }
.add-padding-400        { padding: 400px; }
.add-padding-top-400    { padding-top: 400px; }
.add-padding-bottom-400 { padding-bottom: 400px; }
.add-padding-left-400   { padding-left: 400px; }
.add-padding-right-400  { padding-right: 400px; }
.add-padding-x-400      { padding-left: 400px; padding-right: 400px; }
.add-padding-y-400      { padding-top: 400px; padding-bottom: 400px; }
.add-padding-448        { padding: 448px; }
.add-padding-top-448    { padding-top: 448px; }
.add-padding-bottom-448 { padding-bottom: 448px; }
.add-padding-left-448   { padding-left: 448px; }
.add-padding-right-448  { padding-right: 448px; }
.add-padding-x-448      { padding-left: 448px; padding-right: 448px; }
.add-padding-y-448      { padding-top: 448px; padding-bottom: 448px; }
.add-padding-512        { padding: 512px; }
.add-padding-top-512    { padding-top: 512px; }
.add-padding-bottom-512 { padding-bottom: 512px; }
.add-padding-left-512   { padding-left: 512px; }
.add-padding-right-512  { padding-right: 512px; }
.add-padding-x-512      { padding-left: 512px; padding-right: 512px; }
.add-padding-y-512      { padding-top: 512px; padding-bottom: 512px; }
.add-padding-640        { padding: 640px; }
.add-padding-top-640    { padding-top: 640px; }
.add-padding-bottom-640 { padding-bottom: 640px; }
.add-padding-left-640   { padding-left: 640px; }
.add-padding-right-640  { padding-right: 640px; }
.add-padding-x-640      { padding-left: 640px; padding-right: 640px; }
.add-padding-y-640      { padding-top: 640px; padding-bottom: 640px; }
.add-padding-768        { padding: 768px; }
.add-padding-top-768    { padding-top: 768px; }
.add-padding-bottom-768 { padding-bottom: 768px; }
.add-padding-left-768   { padding-left: 768px; }
.add-padding-right-768  { padding-right: 768px; }
.add-padding-x-768      { padding-left: 768px; padding-right: 768px; }
.add-padding-y-768      { padding-top: 768px; padding-bottom: 768px; }
.add-padding-1024        { padding: 1024px; }
.add-padding-top-1024    { padding-top: 1024px; }
.add-padding-bottom-1024 { padding-bottom: 1024px; }
.add-padding-left-1024   { padding-left: 1024px; }
.add-padding-right-1024  { padding-right: 1024px; }
.add-padding-x-1024      { padding-left: 1024px; padding-right: 1024px; }
.add-padding-y-1024      { padding-top: 1024px; padding-bottom: 1024px; }

/* ── Margin ── */
.add-margin-0        { margin: 0px; }
.add-margin-top-0    { margin-top: 0px; }
.add-margin-bottom-0 { margin-bottom: 0px; }
.add-margin-left-0   { margin-left: 0px; }
.add-margin-right-0  { margin-right: 0px; }
.add-margin-x-0      { margin-left: 0px; margin-right: 0px; }
.add-margin-y-0      { margin-top: 0px; margin-bottom: 0px; }
.add-margin-1        { margin: 1px; }
.add-margin-top-1    { margin-top: 1px; }
.add-margin-bottom-1 { margin-bottom: 1px; }
.add-margin-left-1   { margin-left: 1px; }
.add-margin-right-1  { margin-right: 1px; }
.add-margin-x-1      { margin-left: 1px; margin-right: 1px; }
.add-margin-y-1      { margin-top: 1px; margin-bottom: 1px; }
.add-margin-2        { margin: 2px; }
.add-margin-top-2    { margin-top: 2px; }
.add-margin-bottom-2 { margin-bottom: 2px; }
.add-margin-left-2   { margin-left: 2px; }
.add-margin-right-2  { margin-right: 2px; }
.add-margin-x-2      { margin-left: 2px; margin-right: 2px; }
.add-margin-y-2      { margin-top: 2px; margin-bottom: 2px; }
.add-margin-3        { margin: 3px; }
.add-margin-top-3    { margin-top: 3px; }
.add-margin-bottom-3 { margin-bottom: 3px; }
.add-margin-left-3   { margin-left: 3px; }
.add-margin-right-3  { margin-right: 3px; }
.add-margin-x-3      { margin-left: 3px; margin-right: 3px; }
.add-margin-y-3      { margin-top: 3px; margin-bottom: 3px; }
.add-margin-4        { margin: 4px; }
.add-margin-top-4    { margin-top: 4px; }
.add-margin-bottom-4 { margin-bottom: 4px; }
.add-margin-left-4   { margin-left: 4px; }
.add-margin-right-4  { margin-right: 4px; }
.add-margin-x-4      { margin-left: 4px; margin-right: 4px; }
.add-margin-y-4      { margin-top: 4px; margin-bottom: 4px; }
.add-margin-5        { margin: 5px; }
.add-margin-top-5    { margin-top: 5px; }
.add-margin-bottom-5 { margin-bottom: 5px; }
.add-margin-left-5   { margin-left: 5px; }
.add-margin-right-5  { margin-right: 5px; }
.add-margin-x-5      { margin-left: 5px; margin-right: 5px; }
.add-margin-y-5      { margin-top: 5px; margin-bottom: 5px; }
.add-margin-6        { margin: 6px; }
.add-margin-top-6    { margin-top: 6px; }
.add-margin-bottom-6 { margin-bottom: 6px; }
.add-margin-left-6   { margin-left: 6px; }
.add-margin-right-6  { margin-right: 6px; }
.add-margin-x-6      { margin-left: 6px; margin-right: 6px; }
.add-margin-y-6      { margin-top: 6px; margin-bottom: 6px; }
.add-margin-7        { margin: 7px; }
.add-margin-top-7    { margin-top: 7px; }
.add-margin-bottom-7 { margin-bottom: 7px; }
.add-margin-left-7   { margin-left: 7px; }
.add-margin-right-7  { margin-right: 7px; }
.add-margin-x-7      { margin-left: 7px; margin-right: 7px; }
.add-margin-y-7      { margin-top: 7px; margin-bottom: 7px; }
.add-margin-8        { margin: 8px; }
.add-margin-top-8    { margin-top: 8px; }
.add-margin-bottom-8 { margin-bottom: 8px; }
.add-margin-left-8   { margin-left: 8px; }
.add-margin-right-8  { margin-right: 8px; }
.add-margin-x-8      { margin-left: 8px; margin-right: 8px; }
.add-margin-y-8      { margin-top: 8px; margin-bottom: 8px; }
.add-margin-9        { margin: 9px; }
.add-margin-top-9    { margin-top: 9px; }
.add-margin-bottom-9 { margin-bottom: 9px; }
.add-margin-left-9   { margin-left: 9px; }
.add-margin-right-9  { margin-right: 9px; }
.add-margin-x-9      { margin-left: 9px; margin-right: 9px; }
.add-margin-y-9      { margin-top: 9px; margin-bottom: 9px; }
.add-margin-10        { margin: 10px; }
.add-margin-top-10    { margin-top: 10px; }
.add-margin-bottom-10 { margin-bottom: 10px; }
.add-margin-left-10   { margin-left: 10px; }
.add-margin-right-10  { margin-right: 10px; }
.add-margin-x-10      { margin-left: 10px; margin-right: 10px; }
.add-margin-y-10      { margin-top: 10px; margin-bottom: 10px; }
.add-margin-11        { margin: 11px; }
.add-margin-top-11    { margin-top: 11px; }
.add-margin-bottom-11 { margin-bottom: 11px; }
.add-margin-left-11   { margin-left: 11px; }
.add-margin-right-11  { margin-right: 11px; }
.add-margin-x-11      { margin-left: 11px; margin-right: 11px; }
.add-margin-y-11      { margin-top: 11px; marg