/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */
/* University of Buffalo brand color palette - these CSS custom properties
   define the official UB color scheme for consistent branding across all
   components and pages */
:root {
  --color-letchworth-autumn: #e56a54;
  --color-solar-strand: #ffc72c;
  --color-greiner-green: #ebec00;
  --color-lake-lasalle: #00a69c;
  --color-capen-brick: #990000;
  --color-bronze-buffalo: #ad841f;
  --color-olmsted-green: #6da04b;
  --color-niagara-whirlpool: #006570;
  --color-victor-e-blue: #2f9fd0;
  --color-harriman-blue: #002f56;
  --color-baird-point: #e4e4e4;
  --color-townsend-gray: #666666;
  --color-ub-blue: #005bbb;
}

/* ==========================================================================
   Background Color Utility Classes
   ========================================================================== */
/* Apply UB brand colors as background colors. Use these classes to quickly
   set background colors that align with university branding guidelines */

.bg-white, .btn.bg-white .buttoncomponent a {
  background-color: #ffffff;
}
.bg-black, .btn.bg-black .buttoncomponent a {
  background-color: #000000;
}

.bg-ub-blue, .btn.bg-ub-blue .buttoncomponent a {
  background-color: var(--color-ub-blue);
}

.bg-harriman-blue, .btn.bg-harriman-blue .buttoncomponent a {
  background-color: var(--color-harriman-blue);
}

.bg-letchworth-autumn, .btn.bg-letchworth-autumn .buttoncomponent a {
  background-color: var(--color-letchworth-autumn);
}

.bg-solar-strand, .btn.bg-solar-strand .buttoncomponent a {
  background-color: var(--color-solar-strand);
}

.bg-greiner-green, .btn.bg-greiner-green .buttoncomponent a {
  background-color: var(--color-greiner-green);
}

.bg-lake-lasalle, .btn.bg-lake-lasalle .buttoncomponent a {
  background-color: var(--color-lake-lasalle);
}

.bg-capen-brick, .btn.bg-capen-brick .buttoncomponent a {
  background-color: var(--color-capen-brick);
}

.bg-bronze-buffalo, .btn.bg-bronze-buffalo .buttoncomponent a {
  background-color: var(--color-bronze-buffalo);
}

.bg-olmsted-green, .btn.bg-olmsted-green .buttoncomponent a {
  background-color: var(--color-olmsted-green);
}

.bg-niagara-whirlpool, .btn.bg-niagara-whirlpool .buttoncomponent a {
  background-color: var(--color-niagara-whirlpool);
}

.bg-victor-e-blue, .btn.bg-victor-e-blue .buttoncomponent a {
  background-color: var(--color-victor-e-blue);
}

.bg-baird-point, .btn.bg-baird-point .buttoncomponent a {
  background-color: var(--color-baird-point);
}

.bg-townsend-gray, .btn.bg-townsend-gray .buttoncomponent a {
  background-color: var(--color-townsend-gray);
}

.btn.bg-white, .btn.bg-black, .btn.bg-ub-blue, .btn.bg-harriman-blue, .btn.bg-letchworth-autumn, .btn.bg-solar-strand, .btn.bg-greiner-green, .btn.bg-lake-lasalle, .btn.bg-capen-brick, .btn.bg-bronze-buffalo, .btn.bg-olmsted-green, .btn.bg-niagara-whirlpool, .btn.bg-victor-e-blue, .btn.bg-baird-point, .btn.bg-townsend-gray  {
  background-color: transparent;
}

/* ==========================================================================
   Text/Foreground Color Utility Classes
   ========================================================================== */
/* Apply UB brand colors as text colors. Use these classes to style text
   elements with colors that match university branding standards */
.fg-white, .btn.fg-white .buttoncomponent a {
  color: #ffffff;
}
.fg-black, .btn.fg-black .buttoncomponent a {
  color: #000000;
}

.fg-ub-blue, .btn.fg-ub-blue .buttoncomponent a {
  color: var(--color-ub-blue);
}

.fg-harriman-blue, .btn.fg-harriman-blue .buttoncomponent a {
  color: var(--color-harriman-blue);
}

.fg-letchworth-autumn, .btn.fg-letchworth-autumn .buttoncomponent a {
  color: var(--color-letchworth-autumn);
}

.fg-solar-strand, .btn.fg-solar-strand .buttoncomponent a {
  color: var(--color-solar-strand);
}

.fg-greiner-green, .btn.fg-greiner-green .buttoncomponent a {
  color: var(--color-greiner-green);
}

.fg-lake-lasalle, .btn.fg-lake-lasalle .buttoncomponent a {
  color: var(--color-lake-lasalle);
}

.fg-capen-brick, .btn.fg-capen-brick .buttoncomponent a {
  color: var(--color-capen-brick);
}

.fg-bronze-buffalo, .btn.fg-bronze-buffalo .buttoncomponent a {
  color: var(--color-bronze-buffalo);
}

.fg-olmsted-green, .btn.fg-olmsted-green .buttoncomponent a {
  color: var(--color-olmsted-green);
}

.fg-niagara-whirlpool, .btn.fg-niagara-whirlpool .buttoncomponent a {
  color: var(--color-niagara-whirlpool);
}

.fg-victor-e-blue, .btn.fg-victor-e-blue .buttoncomponent a {
  color: var(--color-victor-e-blue);
}

.fg-baird-point, .btn.fg-baird-point .buttoncomponent a {
  color: var(--color-baird-point);
}

.fg-townsend-gray, .btn.fg-townsend-gray .buttoncomponent a {
  color: var(--color-townsend-gray);
}

.btn.fg-white, .btn.fg-black, .btn.fg-ub-blue, .btn.fg-harriman-blue, .btn.fg-letchworth-autumn, .btn.fg-solar-strand, .btn.fg-greiner-green, .btn.fg-lake-lasalle, .btn.fg-capen-brick, .btn.fg-bronze-buffalo, .btn.fg-olmsted-green, .btn.fg-niagara-whirlpool, .btn.fg-victor-e-blue, .btn.fg-baird-point, .btn.fg-townsend-gray  {
  color: inherit;
}

/* ==========================================================================
   Border Color Utility Classes
   ========================================================================== */
/* Apply UB brand colors to border colors. Combine with border width and
   style classes to create consistent branded borders */
.brdr-white, .img-brdr-white img, .btn.brdr-white .buttoncomponent a {
  border-color: #ffffff;
}
.brdr-black, .img-brdr-black img, .btn.brdr-black .buttoncomponent a {
  border-color: #000000;
}
.brdr-ub-blue, .img-brdr-ub-blue img, .btn.brdr-ub-blue .buttoncomponent a {
  border-color: var(--color-ub-blue);
}

.brdr-harriman-blue, .img-brdr-harriman-blue img, .btn.brdr-harriman-blue .buttoncomponent a {
  border-color: var(--color-harriman-blue);
}

.brdr-letchworth-autumn, .img-brdr-letchworth-autumn img, .btn.brdr-letchworth-autumn .buttoncomponent a {
  border-color: var(--color-letchworth-autumn);
}

.brdr-solar-strand, .img-brdr-solar-strand img, .btn.brdr-solar-strand .buttoncomponent a {
  border-color: var(--color-solar-strand);
}

.brdr-greiner-green, .img-brdr-greiner-green img, .btn.brdr-greiner-green .buttoncomponent a {
  border-color: var(--color-greiner-green);
}

.brdr-lake-lasalle, .img-brdr-lake-lasalle img, .btn.brdr-lake-lasalle .buttoncomponent a {
  border-color: var(--color-lake-lasalle);
}

.brdr-capen-brick, .img-brdr-capen-brick img, .btn.brdr-capen-brick .buttoncomponent a {
  border-color: var(--color-capen-brick);
}

.brdr-bronze-buffalo, .img-brdr-bronze-buffalo img, .btn.brdr-bronze-buffalo .buttoncomponent a {
  border-color: var(--color-bronze-buffalo);
}

.brdr-olmsted-green, .img-brdr-olmsted-green img, .btn.brdr-olmsted-green .buttoncomponent a {
  border-color: var(--color-olmsted-green);
}

.brdr-niagara-whirlpool, .img-brdr-niagara-whirlpool img, .btn.brdr-niagara-whirlpool .buttoncomponent a {
  border-color: var(--color-niagara-whirlpool);
}

.brdr-victor-e-blue, .img-brdr-victor-e-blue img, .btn.brdr-victor-e-blue .buttoncomponent a {
  border-color: var(--color-victor-e-blue);
}

.brdr-baird-point, .img-brdr-baird-point img, .btn.brdr-baird-point .buttoncomponent a {
  border-color: var(--color-baird-point);
}

.brdr-townsend-gray, .img-brdr-townsend-gray img, .btn.brdr-townsend-gray .buttoncomponent a {
  border-color: var(--color-townsend-gray);
}

.btn.brdr-white, .btn.brdr-black, .btn.brdr-ub-blue, .btn.brdr-harriman-blue, .btn.brdr-letchworth-autumn, .btn.brdr-solar-strand, .btn.brdr-greiner-green, .btn.brdr-lake-lasalle, .btn.brdr-capen-brick, .btn.brdr-bronze-buffalo, .btn.brdr-olmsted-green, .btn.brdr-niagara-whirlpool, .btn.brdr-victor-e-blue, .btn.brdr-baird-point, .btn.brdr-townsend-gray  {
  border-color: inherit;
}

/* ==========================================================================
   Border Width Utility Classes
   ========================================================================== */
/* Control border thickness with these utility classes. Combine with border
   color and style classes for complete border styling */
.brdr-1px, .img-brdr-1px img, .btn.brdr-1px .buttoncomponent a {
  border-width: 1px;
}

.brdr-2px, .img-brdr-2px img, .btn.brdr-2px .buttoncomponent a {
  border-width: 2px;
}

.brdr-3px, .img-brdr-3px img, .btn.brdr-3px .buttoncomponent a {
  border-width: 3px;
}

.brdr-4px, .img-brdr-4px img, .btn.brdr-4px .buttoncomponent a {
  border-width: 4px;
}

.brdr-5px, .img-brdr-5px img, .btn.brdr-5px .buttoncomponent a {
  border-width: 5px;
}

.brdr-10px, .img-brdr-10px img, .btn.brdr-10px .buttoncomponent a {
  border-width: 10px;
}

.brdr-15px, .img-brdr-15px img, .btn.brdr-15px .buttoncomponent a {
  border-width: 15px;
}

.brdr-20px, .img-brdr-20px img, .btn.brdr-20px .buttoncomponent a {
  border-width: 20px;
}

.brdr-25px, .img-brdr-25px img, .btn.brdr-25px .buttoncomponent a {
  border-width: 25px;
}

.brdr-50px, .img-brdr-50px img, .btn.brdr-50px .buttoncomponent a {
  border-width: 50px;
}

.btn.brdr-1px, .btn.brdr-2px, .btn.brdr-3px, .btn.brdr-4px, .btn.brdr-5px, .btn.brdr-10px, .btn.brdr-15px, .btn.brdr-20px, .btn.brdr-25px, .btn.brdr-50px  {
  border-width: 0;
}

/* ==========================================================================
   Border Style Utility Classes
   ========================================================================== */
/* Define border appearance styles. Use with border width and color classes
   to create various border effects (solid lines, dashed, dotted, etc.) 
   Border classes with the word "style" in them are for backward compatibility */
.brdr-solid, .brdr-style-solid, .img-brdr-solid img, .img-brdr-style-solid img, .btn.brdr-solid .buttoncomponent a, .btn.brdr-style-solid .buttoncomponent a {
  border-style: solid;
}

.brdr-dashed, .brdr-style-dashed, .img-brdr-dashed img, .img-brdr-style-dashed img, .btn.brdr-dashed .buttoncomponent a, .btn.brdr-style-dashed .buttoncomponent a {
  border-style: dashed;
}

.brdr-dotted, .brdr-style-dotted, .img-brdr-dotted img, .img-brdr-style-dotted img, .btn.brdr-dotted .buttoncomponent a, .btn.brdr-style-dotted .buttoncomponent a {
  border-style: dotted;
}

.brdr-double, .brdr-style-double, .img-brdr-double img, .img-brdr-style-double img, .btn.brdr-double .buttoncomponent a, .btn.brdr-style-double .buttoncomponent a {
  border-style: double;
}

.brdr-none, .brdr-style-none, .img-brdr-none img, .img-brdr-style-none img, .btn.brdr-none .buttoncomponent a, .btn.brdr-style-none .buttoncomponent a {
  border-style: none;
}

.btn.brdr-solid, .btn.brdr-style-solid, .btn.brdr-dashed, .btn.brdr-style-dashed, .btn.brdr-dotted, .btn.brdr-style-dotted, .btn.brdr-double, .btn.brdr-style-double, .btn.brdr-none, .btn.brdr-style-none  {
  border-style: none;
}

/* ==========================================================================
  Border Radius Utility Classes
  ========================================================================== */
/* Quickly round element corners using these utility classes. Combine with
  border and background classes for various effects. */

.rounded-none, .btn.rounded-none .buttoncomponent a {
  border-radius: 0;
}

.rounded-sm, .btn.rounded-sm .buttoncomponent a {
  border-radius: 0.125rem; /* 2px */
}

.rounded, .btn.rounded .buttoncomponent a {
  border-radius: 0.25rem; /* 4px */
}

.rounded-md, .btn.rounded-md .buttoncomponent a {
  border-radius: 0.375rem; /* 6px */
}

.rounded-lg, .btn.rounded-lg .buttoncomponent a {
  border-radius: 0.5rem; /* 8px */
}

.rounded-xl, .btn.rounded-xl .buttoncomponent a {
  border-radius: 0.75rem; /* 12px */
}

.rounded-2xl, .btn.rounded-2xl .buttoncomponent a {
  border-radius: 1rem; /* 16px */
}

.rounded-3xl, .btn.rounded-3xl .buttoncomponent a {
  border-radius: 1.5rem; /* 24px */
}

.rounded-full, .btn.rounded-full .buttoncomponent a {
  border-radius: 9999px;
}

/* Individual corner radius */
.rounded-t, .btn.rounded-t .buttoncomponent a {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-b, .btn.rounded-b .buttoncomponent a {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-l, .btn.rounded-l .buttoncomponent a {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-r, .btn.rounded-r .buttoncomponent a {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-tl, .btn.rounded-tl .buttoncomponent a {
  border-top-left-radius: 0.25rem;
}

.rounded-tr, .btn.rounded-tr .buttoncomponent a {
  border-top-right-radius: 0.25rem;
}

.rounded-bl, .btn.rounded-bl .buttoncomponent a {
  border-bottom-left-radius: 0.25rem;
}

.rounded-br, .btn.rounded-br .buttoncomponent a {
  border-bottom-right-radius: 0.25rem;
}

.btn.rounded-none, .btn.rounded-sm, .btn.rounded, .btn.rounded-md, .btn.rounded-lg, .btn.rounded-xl, .btn.rounded-2xl, .btn.rounded-3xl, .btn.rounded-full, .btn.rounded-t, .btn.rounded-b, .btn.rounded-l, .btn.rounded-r, .btn.rounded-tl, .btn.rounded-tr, .btn.rounded-bl, .btn.rounded-br {
  border-radius: 0;
}

/* ==========================================================================
   Individual Border Side Utility Classes
   ========================================================================== */
/* Apply borders to specific sides (top, bottom, right, left) only.
   Combine these classes with width modifiers to create selective borders.
   Note: These use CSS nesting syntax (&) for cleaner organization */

.brdr-top, .brdr-btm, .brdr-rt, .brdr-lt, .img-brdr-top img, .img-brdr-btm img, .img-brdr-rt img, .img-brdr-lt img, .btn.brdr-top .buttoncomponent a, .btn.brdr-btm .buttoncomponent a, .btn.brdr-rt .buttoncomponent a, .btn.brdr-lt .buttoncomponent a {
  box-sizing: border-box;
  border-width: 0px;
}

.brdr-top, .img-brdr-top, .btn.brdr-top .buttoncomponent a {
  &.brdr-1px, &.img-brdr-1px img {
    border-top-width: 1px;
  }
  &.brdr-2px, &.img-brdr-2px img, &.btn.brdr-2px .buttoncomponent a {
    border-top-width: 2px;
  }
  &.brdr-3px, &.img-brdr-3px img, &.btn.brdr-3px .buttoncomponent a {
    border-top-width: 3px;
  }
  &.brdr-4px, &.img-brdr-4px img, &.btn.brdr-4px .buttoncomponent a {
    border-top-width: 4px;
  }
  &.brdr-5px, &.img-brdr-5px img, &.btn.brdr-5px .buttoncomponent a {
    border-top-width: 5px;
  }
  &.brdr-10px, &.img-brdr-10px img, &.btn.brdr-10px .buttoncomponent a {
    border-top-width: 10px;
  }
  &.brdr-15px, &.img-brdr-15px img, &.btn.brdr-15px .buttoncomponent a {
    border-top-width: 15px;
  }
  &.brdr-20px, &.img-brdr-20px img, &.btn.brdr-20px .buttoncomponent a {
    border-top-width: 20px;
  }
  &.brdr-25px, &.img-brdr-25px img, &.btn.brdr-25px .buttoncomponent a {
    border-top-width: 25px;
  }
  &.brdr-50px, &.img-brdr-50px img, &.btn.brdr-50px .buttoncomponent a {
    border-top-width: 50px;
  }
}

.btn.brdr-top.brdr-1px, .btn.brdr-top.brdr-2px, .btn.brdr-top.brdr-3px, .btn.brdr-top.brdr-4px, .btn.brdr-top.brdr-5px, .btn.brdr-top.brdr-10px, .btn.brdr-top.brdr-15px, .btn.brdr-top.brdr-20px, .btn.brdr-top.brdr-25px, .btn.brdr-top.brdr-50px {
  border-top-width: 0;
}

.brdr-btm, .img-brdr-btm, .btn.brdr-btm .buttoncomponent a {
  &.brdr-1px, &.img-brdr-1px img, &.btn.brdr-1px .buttoncomponent a {
    border-bottom-width: 1px;
  }
  &.brdr-2px, &.img-brdr-2px img, &.btn.brdr-2px .buttoncomponent a {
    border-bottom-width: 2px;
  }
  &.brdr-3px, &.img-brdr-3px img, &.btn.brdr-3px .buttoncomponent a {
    border-bottom-width: 3px;
  }
  &.brdr-4px, &.img-brdr-4px img, &.btn.brdr-4px .buttoncomponent a {
    border-bottom-width: 4px;
  }
  &.brdr-5px, &.img-brdr-5px img, &.btn.brdr-5px .buttoncomponent a {
    border-bottom-width: 5px;
  }
  &.brdr-10px, &.img-brdr-10px img, &.btn.brdr-10px .buttoncomponent a {
    border-bottom-width: 10px;
  }
  &.brdr-15px, &.img-brdr-15px img, &.btn.brdr-15px .buttoncomponent a {
    border-bottom-width: 15px;
  }
  &.brdr-20px, &.img-brdr-20px img, &.btn.brdr-20px .buttoncomponent a {
    border-bottom-width: 20px;
  }
  &.brdr-25px, &.img-brdr-25px img, &.btn.brdr-25px .buttoncomponent a {
    border-bottom-width: 25px;
  }
  &.brdr-50px, &.img-brdr-50px img, &.btn.brdr-50px .buttoncomponent a {
    border-bottom-width: 50px;
  }
}

.btn.brdr-btm.brdr-1px, .btn.brdr-btm.brdr-2px, .btn.brdr-btm.brdr-3px, .btn.brdr-btm.brdr-4px, .btn.brdr-btm.brdr-5px, .btn.brdr-btm.brdr-10px, .btn.brdr-btm.brdr-15px, .btn.brdr-btm.brdr-20px, .btn.brdr-btm.brdr-25px, .btn.brdr-btm.brdr-50px {
  border-bottom-width: 0;
}

.brdr-rt, .img-brdr-rt, .btn.brdr-rt .buttoncomponent a {
  &.brdr-1px, &.img-brdr-1px img, &.btn.brdr-1px .buttoncomponent a {
    border-right-width: 1px;
  }
  &.brdr-2px, &.img-brdr-2px img, &.btn.brdr-2px .buttoncomponent a {
    border-right-width: 2px;
  }
  &.brdr-3px, &.img-brdr-3px img, &.btn.brdr-3px .buttoncomponent a {
    border-right-width: 3px;
  }
  &.brdr-4px, &.img-brdr-4px img, &.btn.brdr-4px .buttoncomponent a {
    border-right-width: 4px;
  }
  &.brdr-5px, &.img-brdr-5px img, &.btn.brdr-5px .buttoncomponent a {
    border-right-width: 5px;
  }
  &.brdr-10px, &.img-brdr-10px img, &.btn.brdr-10px .buttoncomponent a {
    border-right-width: 10px;
  }
  &.brdr-15px, &.img-brdr-15px img, &.btn.brdr-15px .buttoncomponent a {
    border-right-width: 15px;
  }
  &.brdr-20px, &.img-brdr-20px img, &.btn.brdr-20px .buttoncomponent a {
    border-right-width: 20px;
  }
  &.brdr-25px, &.img-brdr-25px img, &.btn.brdr-25px .buttoncomponent a {
    border-right-width: 25px;
  }
  &.brdr-50px, &.img-brdr-50px img, &.btn.brdr-50px .buttoncomponent a {
    border-right-width: 50px;
  }
}

.btn.brdr-rt.brdr-1px, .btn.brdr-rt.brdr-2px, .btn.brdr-rt.brdr-3px, .btn.brdr-rt.brdr-4px, .btn.brdr-rt.brdr-5px, .btn.brdr-rt.brdr-10px, .btn.brdr-rt.brdr-15px, .btn.brdr-rt.brdr-20px, .btn.brdr-rt.brdr-25px, .btn.brdr-rt.brdr-50px {
  border-right-width: 0;
}

.brdr-lt, .img-brdr-lt, .btn.brdr-lt .buttoncomponent a {
  &.brdr-1px, &.img-brdr-1px img, &.btn.brdr-1px .buttoncomponent a {
    border-left-width: 1px;
  }
  &.brdr-2px, &.img-brdr-2px img, &.btn.brdr-2px .buttoncomponent a {
    border-left-width: 2px;
  }
  &.brdr-3px, &.img-brdr-3px img, &.btn.brdr-3px .buttoncomponent a {
    border-left-width: 3px;
  }
  &.brdr-4px, &.img-brdr-4px img, &.btn.brdr-4px .buttoncomponent a {
    border-left-width: 4px;
  }
  &.brdr-5px, &.img-brdr-5px img, &.btn.brdr-5px .buttoncomponent a {
    border-left-width: 5px;
  }
  &.brdr-10px, &.img-brdr-10px img, &.btn.brdr-10px .buttoncomponent a {
    border-left-width: 10px;
  }
  &.brdr-15px, &.img-brdr-15px img, &.btn.brdr-15px .buttoncomponent a {
    border-left-width: 15px;
  }
  &.brdr-20px, &.img-brdr-20px img, &.btn.brdr-20px .buttoncomponent a {
    border-left-width: 20px;
  }
  &.brdr-25px, &.img-brdr-25px img, &.btn.brdr-25px .buttoncomponent a {
    border-left-width: 25px;
  }
  &.brdr-50px, &.img-brdr-50px img, &.btn.brdr-50px .buttoncomponent a {
    border-left-width: 50px;
  }
}

.btn.brdr-lt.brdr-1px, .btn.brdr-lt.brdr-2px, .btn.brdr-lt.brdr-3px, .btn.brdr-lt.brdr-4px, .btn.brdr-lt.brdr-5px, .btn.brdr-lt.brdr-10px, .btn.brdr-lt.brdr-15px, .btn.brdr-lt.brdr-20px, .btn.brdr-lt.brdr-25px, .btn.brdr-lt.brdr-50px {
  border-left-width: 0;
}

.center {
  text-align: center;
}

/* ==========================================================================
   Flexbox Layout Utility Classes
   ========================================================================== */
/* Modern flexbox utilities for easy layout management. Use these classes
   to quickly create flexible layouts without writing custom CSS */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Justify Content (horizontal alignment in flex-row, vertical in flex-col) */
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* Align Items (vertical alignment in flex-row, horizontal in flex-col) */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

/* Flex Growth and Shrink */
.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

/* ==========================================================================
   Spacing Utility Classes (Margin)
   ========================================================================== */
/* Margin utilities using a consistent spacing scale. Use these classes
   to add consistent spacing around elements */
.m-0, .btn.m-0 .buttoncomponent a { margin: 0; }
.m-1, .btn.m-1 .buttoncomponent a { margin: 0.25rem; }  /* 4px */
.m-2, .btn.m-2 .buttoncomponent a { margin: 0.5rem; }   /* 8px */
.m-3, .btn.m-3 .buttoncomponent a { margin: 0.75rem; }  /* 12px */
.m-4, .btn.m-4 .buttoncomponent a { margin: 1rem; }     /* 16px */
.m-5, .btn.m-5 .buttoncomponent a { margin: 1.25rem; }  /* 20px */
.m-6, .btn.m-6 .buttoncomponent a { margin: 1.5rem; }   /* 24px */
.m-8, .btn.m-8 .buttoncomponent a { margin: 2rem; }     /* 32px */
.m-10, .btn.m-10 .buttoncomponent a { margin: 2.5rem; }  /* 40px */
.m-12, .btn.m-12 .buttoncomponent a { margin: 3rem; }    /* 48px */
.m-16, .btn.m-16 .buttoncomponent a { margin: 4rem; }    /* 64px */
.m-20, .btn.m-20 .buttoncomponent a { margin: 5rem; }    /* 80px */
.m-auto, .btn.m-auto .buttoncomponent a { margin: auto; }

.btn.m-0, .btn.m-1, .btn.m-2, .btn.m-3, .btn.m-4, .btn.m-5, .btn.m-6, .btn.m-8, .btn.m-10, .btn.m-12, .btn.m-16, .btn.m-20, .btn.m-auto {
  margin: 0;
}

/* Margin Top */
.mt-0, .btn.mt-0 .buttoncomponent a { margin-top: 0; }
.mt-1, .btn.mt-1 .buttoncomponent a { margin-top: 0.25rem; }
.mt-2, .btn.mt-2 .buttoncomponent a { margin-top: 0.5rem; }
.mt-3, .btn.mt-3 .buttoncomponent a { margin-top: 0.75rem; }
.mt-4, .btn.mt-4 .buttoncomponent a { margin-top: 1rem; }
.mt-5, .btn.mt-5 .buttoncomponent a { margin-top: 1.25rem; }
.mt-6, .btn.mt-6 .buttoncomponent a { margin-top: 1.5rem; }
.mt-8, .btn.mt-8 .buttoncomponent a { margin-top: 2rem; }
.mt-10, .btn.mt-10 .buttoncomponent a { margin-top: 2.5rem; }
.mt-12, .btn.mt-12 .buttoncomponent a { margin-top: 3rem; }
.mt-16, .btn.mt-16 .buttoncomponent a { margin-top: 4rem; }
.mt-20, .btn.mt-20 .buttoncomponent a { margin-top: 5rem; }
.mt-auto, .btn.mt-auto .buttoncomponent a { margin-top: auto; }

.btn.mt-0, .btn.mt-1, .btn.mt-2, .btn.mt-3, .btn.mt-4, .btn.mt-5, .btn.mt-6, .btn.mt-8, .btn.mt-10, .btn.mt-12, .btn.mt-16, .btn.mt-20, .btn.mt-auto {
  margin-top: 0;
}

/* Margin Bottom */
.mb-0, .btn.mb-0 .buttoncomponent a { margin-bottom: 0; }
.mb-1, .btn.mb-1 .buttoncomponent a { margin-bottom: 0.25rem; }
.mb-2, .btn.mb-2 .buttoncomponent a { margin-bottom: 0.5rem; }
.mb-3, .btn.mb-3 .buttoncomponent a { margin-bottom: 0.75rem; }
.mb-4, .btn.mb-4 .buttoncomponent a { margin-bottom: 1rem; }
.mb-5, .btn.mb-5 .buttoncomponent a { margin-bottom: 1.25rem; }
.mb-6, .btn.mb-6 .buttoncomponent a { margin-bottom: 1.5rem; }
.mb-8, .btn.mb-8 .buttoncomponent a { margin-bottom: 2rem; }
.mb-10, .btn.mb-10 .buttoncomponent a { margin-bottom: 2.5rem; }
.mb-12, .btn.mb-12 .buttoncomponent a { margin-bottom: 3rem; }
.mb-16, .btn.mb-16 .buttoncomponent a { margin-bottom: 4rem; }
.mb-20, .btn.mb-20 .buttoncomponent a { margin-bottom: 5rem; }
.mb-auto, .btn.mb-auto .buttoncomponent a { margin-bottom: auto; }

.btn.mb-0, .btn.mb-1, .btn.mb-2, .btn.mb-3, .btn.mb-4, .btn.mb-5, .btn.mb-6, .btn.mb-8, .btn.mb-10, .btn.mb-12, .btn.mb-16, .btn.mb-20, .btn.mb-auto {
  margin-bottom: 0;
}

/* Margin Left */
.ml-0, .btn.ml-0 .buttoncomponent a { margin-left: 0; }
.ml-1, .btn.ml-1 .buttoncomponent a { margin-left: 0.25rem; }
.ml-2, .btn.ml-2 .buttoncomponent a { margin-left: 0.5rem; }
.ml-3, .btn.ml-3 .buttoncomponent a { margin-left: 0.75rem; }
.ml-4, .btn.ml-4 .buttoncomponent a { margin-left: 1rem; }
.ml-5, .btn.ml-5 .buttoncomponent a { margin-left: 1.25rem; }
.ml-6, .btn.ml-6 .buttoncomponent a { margin-left: 1.5rem; }
.ml-8, .btn.ml-8 .buttoncomponent a { margin-left: 2rem; }
.ml-10, .btn.ml-10 .buttoncomponent a { margin-left: 2.5rem; }
.ml-12, .btn.ml-12 .buttoncomponent a { margin-left: 3rem; }
.ml-16, .btn.ml-16 .buttoncomponent a { margin-left: 4rem; }
.ml-20, .btn.ml-20 .buttoncomponent a { margin-left: 5rem; }
.ml-auto, .btn.ml-auto .buttoncomponent a { margin-left: auto; }

.btn.ml-0, .btn.ml-1, .btn.ml-2, .btn.ml-3, .btn.ml-4, .btn.ml-5, .btn.ml-6, .btn.ml-8, .btn.ml-10, .btn.ml-12, .btn.ml-16, .btn.ml-20, .btn.ml-auto {
  margin-left: 0;
}

/* Margin Right */
.mr-0, .btn.mr-0 .buttoncomponent a { margin-right: 0; }
.mr-1, .btn.mr-1 .buttoncomponent a { margin-right: 0.25rem; }
.mr-2, .btn.mr-2 .buttoncomponent a { margin-right: 0.5rem; }
.mr-3, .btn.mr-3 .buttoncomponent a { margin-right: 0.75rem; }
.mr-4, .btn.mr-4 .buttoncomponent a { margin-right: 1rem; }
.mr-5, .btn.mr-5 .buttoncomponent a { margin-right: 1.25rem; }
.mr-6, .btn.mr-6 .buttoncomponent a { margin-right: 1.5rem; }
.mr-8, .btn.mr-8 .buttoncomponent a { margin-right: 2rem; }
.mr-10, .btn.mr-10 .buttoncomponent a { margin-right: 2.5rem; }
.mr-12, .btn.mr-12 .buttoncomponent a { margin-right: 3rem; }
.mr-16, .btn.mr-16 .buttoncomponent a { margin-right: 4rem; }
.mr-20, .btn.mr-20 .buttoncomponent a { margin-right: 5rem; }
.mr-auto, .btn.mr-auto .buttoncomponent a { margin-right: auto; }

.btn.mr-0, .btn.mr-1, .btn.mr-2, .btn.mr-3, .btn.mr-4, .btn.mr-5, .btn.mr-6, .btn.mr-8, .btn.mr-10, .btn.mr-12, .btn.mr-16, .btn.mr-20, .btn.mr-auto {
  margin-right: 0;
}

/* Margin Horizontal (left + right) */
.mx-0, .btn.mx-0 .buttoncomponent a { margin-left: 0; margin-right: 0; }
.mx-1, .btn.mx-1 .buttoncomponent a { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2, .btn.mx-2 .buttoncomponent a { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3, .btn.mx-3 .buttoncomponent a { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4, .btn.mx-4 .buttoncomponent a { margin-left: 1rem; margin-right: 1rem; }
.mx-5, .btn.mx-5 .buttoncomponent a { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6, .btn.mx-6 .buttoncomponent a { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8, .btn.mx-8 .buttoncomponent a { margin-left: 2rem; margin-right: 2rem; }
.mx-10, .btn.mx-10 .buttoncomponent a { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-12, .btn.mx-12 .buttoncomponent a { margin-left: 3rem; margin-right: 3rem; }
.mx-16, .btn.mx-16 .buttoncomponent a { margin-left: 4rem; margin-right: 4rem; }
.mx-20, .btn.mx-20 .buttoncomponent a { margin-left: 5rem; margin-right: 5rem; }
.mx-auto, .btn.mx-auto .buttoncomponent a { margin-left: auto; margin-right: auto; }

.btn.mx-0, .btn.mx-1, .btn.mx-2, .btn.mx-3, .btn.mx-4, .btn.mx-5, .btn.mx-6, .btn.mx-8, .btn.mx-10, .btn.mx-12, .btn.mx-16, .btn.mx-20, .btn.mx-auto {
  margin-left: 0;
  margin-right: 0;
}

/* Margin Vertical (top + bottom) */
.my-0, .btn.my-0 .buttoncomponent a { margin-top: 0; margin-bottom: 0; }
.my-1, .btn.my-1 .buttoncomponent a { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2, .btn.my-2 .buttoncomponent a { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3, .btn.my-3 .buttoncomponent a { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4, .btn.my-4 .buttoncomponent a { margin-top: 1rem; margin-bottom: 1rem; }
.my-5, .btn.my-5 .buttoncomponent a { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6, .btn.my-6 .buttoncomponent a { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8, .btn.my-8 .buttoncomponent a { margin-top: 2rem; margin-bottom: 2rem; }
.my-10, .btn.my-10 .buttoncomponent a { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-12, .btn.my-12 .buttoncomponent a { margin-top: 3rem; margin-bottom: 3rem; }
.my-16, .btn.my-16 .buttoncomponent a { margin-top: 4rem; margin-bottom: 4rem; }
.my-20, .btn.my-20 .buttoncomponent a { margin-top: 5rem; margin-bottom: 5rem; }
.my-auto, .btn.my-auto .buttoncomponent a { margin-top: auto; margin-bottom: auto; }

.btn.my-0, .btn.my-1, .btn.my-2, .btn.my-3, .btn.my-4, .btn.my-5, .btn.my-6, .btn.my-8, .btn.my-10, .btn.my-12, .btn.my-16, .btn.my-20, .btn.my-auto {
  margin-top: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   Spacing Utility Classes (Padding)
   ========================================================================== */
/* Padding utilities using the same spacing scale as margins. Use these
   classes to add consistent internal spacing within elements */
.p-0, .btn.p-0 .buttoncomponent a { padding: 0; }
.p-1, .btn.p-1 .buttoncomponent a { padding: 0.25rem; }
.p-2, .btn.p-2 .buttoncomponent a { padding: 0.5rem; }
.p-3, .btn.p-3 .buttoncomponent a { padding: 0.75rem; }
.p-4, .btn.p-4 .buttoncomponent a { padding: 1rem; }
.p-5, .btn.p-5 .buttoncomponent a { padding: 1.25rem; }
.p-6, .btn.p-6 .buttoncomponent a { padding: 1.5rem; }
.p-8, .btn.p-8 .buttoncomponent a { padding: 2rem; }
.p-10, .btn.p-10 .buttoncomponent a { padding: 2.5rem; }
.p-12, .btn.p-12 .buttoncomponent a { padding: 3rem; }
.p-16, .btn.p-16 .buttoncomponent a { padding: 4rem; }
.p-20, .btn.p-20 .buttoncomponent a { padding: 5rem; }

.btn.p-0, .btn.p-1, .btn.p-2, .btn.p-3, .btn.p-4, .btn.p-5, .btn.p-6, .btn.p-8, .btn.p-10, .btn.p-12, .btn.p-16, .btn.p-20 {
  padding: 0;
}

/* Padding Top */
.pt-0, .btn.pt-0 .buttoncomponent a { padding-top: 0; }
.pt-1, .btn.pt-1 .buttoncomponent a { padding-top: 0.25rem; }
.pt-2, .btn.pt-2 .buttoncomponent a { padding-top: 0.5rem; }
.pt-3, .btn.pt-3 .buttoncomponent a { padding-top: 0.75rem; }
.pt-4, .btn.pt-4 .buttoncomponent a { padding-top: 1rem; }
.pt-5, .btn.pt-5 .buttoncomponent a { padding-top: 1.25rem; }
.pt-6, .btn.pt-6 .buttoncomponent a { padding-top: 1.5rem; }
.pt-8, .btn.pt-8 .buttoncomponent a { padding-top: 2rem; }
.pt-10, .btn.pt-10 .buttoncomponent a { padding-top: 2.5rem; }
.pt-12, .btn.pt-12 .buttoncomponent a { padding-top: 3rem; }
.pt-16, .btn.pt-16 .buttoncomponent a { padding-top: 4rem; }
.pt-20, .btn.pt-20 .buttoncomponent a { padding-top: 5rem; }

.btn.pt-0, .btn.pt-1, .btn.pt-2, .btn.pt-3, .btn.pt-4, .btn.pt-5, .btn.pt-6, .btn.pt-8, .btn.pt-10, .btn.pt-12, .btn.pt-16, .btn.pt-20 {
  padding-top: 0;
}

/* Padding Bottom */
.pb-0, .btn.pb-0 .buttoncomponent a { padding-bottom: 0; }
.pb-1, .btn.pb-1 .buttoncomponent a { padding-bottom: 0.25rem; }
.pb-2, .btn.pb-2 .buttoncomponent a { padding-bottom: 0.5rem; }
.pb-3, .btn.pb-3 .buttoncomponent a { padding-bottom: 0.75rem; }
.pb-4, .btn.pb-4 .buttoncomponent a { padding-bottom: 1rem; }
.pb-5, .btn.pb-5 .buttoncomponent a { padding-bottom: 1.25rem; }
.pb-6, .btn.pb-6 .buttoncomponent a { padding-bottom: 1.5rem; }
.pb-8, .btn.pb-8 .buttoncomponent a { padding-bottom: 2rem; }
.pb-10, .btn.pb-10 .buttoncomponent a { padding-bottom: 2.5rem; }
.pb-12, .btn.pb-12 .buttoncomponent a { padding-bottom: 3rem; }
.pb-16, .btn.pb-16 .buttoncomponent a { padding-bottom: 4rem; }
.pb-20, .btn.pb-20 .buttoncomponent a { padding-bottom: 5rem; }

.btn.pb-0, .btn.pb-1, .btn.pb-2, .btn.pb-3, .btn.pb-4, .btn.pb-5, .btn.pb-6, .btn.pb-8, .btn.pb-10, .btn.pb-12, .btn.pb-16, .btn.pb-20 {
  padding-bottom: 0;
}

/* Padding Left */
.pl-0, .btn.pl-0 .buttoncomponent a { padding-left: 0; }
.pl-1, .btn.pl-1 .buttoncomponent a { padding-left: 0.25rem; }
.pl-2, .btn.pl-2 .buttoncomponent a { padding-left: 0.5rem; }
.pl-3, .btn.pl-3 .buttoncomponent a { padding-left: 0.75rem; }
.pl-4, .btn.pl-4 .buttoncomponent a { padding-left: 1rem; }
.pl-5, .btn.pl-5 .buttoncomponent a { padding-left: 1.25rem; }
.pl-6, .btn.pl-6 .buttoncomponent a { padding-left: 1.5rem; }
.pl-8, .btn.pl-8 .buttoncomponent a { padding-left: 2rem; }
.pl-10, .btn.pl-10 .buttoncomponent a { padding-left: 2.5rem; }
.pl-12, .btn.pl-12 .buttoncomponent a { padding-left: 3rem; }
.pl-16, .btn.pl-16 .buttoncomponent a { padding-left: 4rem; }
.pl-20, .btn.pl-20 .buttoncomponent a { padding-left: 5rem; }

.btn.pl-0, .btn.pl-1, .btn.pl-2, .btn.pl-3, .btn.pl-4, .btn.pl-5, .btn.pl-6, .btn.pl-8, .btn.pl-10, .btn.pl-12, .btn.pl-16, .btn.pl-20 {
  padding-left: 0;
}

/* Padding Right */
.pr-0, .btn.pr-0 .buttoncomponent a { padding-right: 0; }
.pr-1, .btn.pr-1 .buttoncomponent a { padding-right: 0.25rem; }
.pr-2, .btn.pr-2 .buttoncomponent a { padding-right: 0.5rem; }
.pr-3, .btn.pr-3 .buttoncomponent a { padding-right: 0.75rem; }
.pr-4, .btn.pr-4 .buttoncomponent a { padding-right: 1rem; }
.pr-5, .btn.pr-5 .buttoncomponent a { padding-right: 1.25rem; }
.pr-6, .btn.pr-6 .buttoncomponent a { padding-right: 1.5rem; }
.pr-8, .btn.pr-8 .buttoncomponent a { padding-right: 2rem; }
.pr-10, .btn.pr-10 .buttoncomponent a { padding-right: 2.5rem; }
.pr-12, .btn.pr-12 .buttoncomponent a { padding-right: 3rem; }
.pr-16, .btn.pr-16 .buttoncomponent a { padding-right: 4rem; }
.pr-20, .btn.pr-20 .buttoncomponent a { padding-right: 5rem; }

.btn.pr-0, .btn.pr-1, .btn.pr-2, .btn.pr-3, .btn.pr-4, .btn.pr-5, .btn.pr-6, .btn.pr-8, .btn.pr-10, .btn.pr-12, .btn.pr-16, .btn.pr-20 {
  padding-right: 0;
}

/* Padding Horizontal (left + right) */
.px-0, .btn.px-0 .buttoncomponent a { padding-left: 0; padding-right: 0; }
.px-1, .btn.px-1 .buttoncomponent a { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2, .btn.px-2 .buttoncomponent a { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3, .btn.px-3 .buttoncomponent a { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4, .btn.px-4 .buttoncomponent a { padding-left: 1rem; padding-right: 1rem; }
.px-5, .btn.px-5 .buttoncomponent a { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6, .btn.px-6 .buttoncomponent a { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8, .btn.px-8 .buttoncomponent a { padding-left: 2rem; padding-right: 2rem; }
.px-10, .btn.px-10 .buttoncomponent a { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12, .btn.px-12 .buttoncomponent a { padding-left: 3rem; padding-right: 3rem; }
.px-16, .btn.px-16 .buttoncomponent a { padding-left: 4rem; padding-right: 4rem; }
.px-20, .btn.px-20 .buttoncomponent a { padding-left: 5rem; padding-right: 5rem; }

.btn.px-0, .btn.px-1, .btn.px-2, .btn.px-3, .btn.px-4, .btn.px-5, .btn.px-6, .btn.px-8, .btn.px-10, .btn.px-12, .btn.px-16, .btn.px-20 {
  padding-left: 0;
  padding-right: 0;
}

/* Padding Vertical (top + bottom) */
.py-0, .btn.py-0 .buttoncomponent a { padding-top: 0; padding-bottom: 0; }
.py-1, .btn.py-1 .buttoncomponent a { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2, .btn.py-2 .buttoncomponent a { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3, .btn.py-3 .buttoncomponent a { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4, .btn.py-4 .buttoncomponent a { padding-top: 1rem; padding-bottom: 1rem; }
.py-5, .btn.py-5 .buttoncomponent a { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6, .btn.py-6 .buttoncomponent a { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8, .btn.py-8 .buttoncomponent a { padding-top: 2rem; padding-bottom: 2rem; }
.py-10, .btn.py-10 .buttoncomponent a { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12, .btn.py-12 .buttoncomponent a { padding-top: 3rem; padding-bottom: 3rem; }
.py-16, .btn.py-16 .buttoncomponent a { padding-top: 4rem; padding-bottom: 4rem; }
.py-20, .btn.py-20 .buttoncomponent a { padding-top: 5rem; padding-bottom: 5rem; }

.btn.py-0, .btn.py-1, .btn.py-2, .btn.py-3, .btn.py-4, .btn.py-5, .btn.py-6, .btn.py-8, .btn.py-10, .btn.py-12, .btn.py-16, .btn.py-20 {
  padding-top: 0;
  padding-bottom: 0;
} 

/* ==========================================================================
   Display Utility Classes
   ========================================================================== */
/* Control element display behavior. Use these classes to show/hide elements
   or change their display type */
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

/* ==========================================================================
   Text Alignment Utility Classes
   ========================================================================== */
/* Control text alignment within elements. Use these classes for text
   positioning and basic content alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* ==========================================================================
   Text Size Utility Classes
   ========================================================================== */
/* Control text size with these utility classes. Use a consistent type scale
   for maintaining visual hierarchy across your content */
.text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem; /* 48px */
  line-height: 3.25rem;
}

.text-6xl {
  font-size: 3.75rem; /* 60px */
  line-height: 4rem;
}

/* ==========================================================================
  Font Weight Utility Classes
  ========================================================================== */
/* Control font weight with these utility classes. Use these to emphasize
  or de-emphasize text elements */
.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* ==========================================================================
  Text Transform Utility Classes
  ========================================================================== */
/* Control text capitalization and transformation. Use these classes to
  quickly change text case without modifying content */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

/* ==========================================================================
  Font Variant Utility Classes
  ========================================================================== */
/* Control font variant styles. Use these classes to apply special
  typographic features like small caps */
.normal-nums {
  font-variant-numeric: normal;
}

.ordinal {
  font-variant-numeric: ordinal;
}

.slashed-zero {
  font-variant-numeric: slashed-zero;
}

.lining-nums {
  font-variant-numeric: lining-nums;
}

.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

.proportional-nums {
  font-variant-numeric: proportional-nums;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.diagonal-fractions {
  font-variant-numeric: diagonal-fractions;
}

.stacked-fractions {
  font-variant-numeric: stacked-fractions;
}

.small-caps {
  font-variant-caps: small-caps;
}

.all-small-caps {
  font-variant-caps: all-small-caps;
}

.petite-caps {
  font-variant-caps: petite-caps;
}

.all-petite-caps {
  font-variant-caps: all-petite-caps;
}

.unicase {
  font-variant-caps: unicase;
}

.titling-caps {
  font-variant-caps: titling-caps;
}

/* ==========================================================================
  Text Decoration Utility Classes
  ========================================================================== */
/* Control text decoration styles. Use these classes to add or remove
  underlines, overlines, and line-through effects on text elements */
.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

/* ==========================================================================
  Line Height Utility Classes
  ========================================================================== */
/* Control line height for text elements. Use these classes to adjust
  vertical spacing between lines for better readability */
.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

/* Specific line height values */
.leading-3 {
  line-height: 0.75rem; /* 12px */
}

.leading-4 {
  line-height: 1rem; /* 16px */
}

.leading-5 {
  line-height: 1.25rem; /* 20px */
}

.leading-6 {
  line-height: 1.5rem; /* 24px */
}

.leading-7 {
  line-height: 1.75rem; /* 28px */
}

.leading-8 {
  line-height: 2rem; /* 32px */
}

.leading-9 {
  line-height: 2.25rem; /* 36px */
}

.leading-10 {
  line-height: 2.5rem; /* 40px */
}
/* ==========================================================================
   Width and Height Utility Classes
   ========================================================================== */
/* Control element dimensions. Use these classes for common width and height
   values without writing custom CSS */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: fit-content;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: fit-content;
}

/* Common fractional widths */
.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-1\/4 {
  width: 25%;
}

.w-3\/4 {
  width: 75%;
}

/* ==========================================================================
   Position Utility Classes
   ========================================================================== */
/* Control element positioning. Use these classes for common positioning
   scenarios without writing custom CSS */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.static {
  position: static;
}

/* ==========================================================================
   Overflow Utility Classes
   ========================================================================== */
/* Control how content overflows element boundaries */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-visible {
  overflow: visible;
}

/* ==========================================================================
   COMPLETE CSS UTILITY CLASS REFERENCE
   ========================================================================== */

/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                    UB BRAND CSS UTILITY CLASSES REFERENCE                   ║
║                                                                              ║
║  This reference guide lists all available utility classes organized by      ║
║  category. Use these classes to quickly apply UB brand styling to your      ║
║  HTML elements while maintaining consistent university branding.            ║
╚══════════════════════════════════════════════════════════════════════════════╝

┌──────────────────────────────────────────────────────────────────────────────┐
│ 1. CSS CUSTOM PROPERTIES (VARIABLES)                                        │
└──────────────────────────────────────────────────────────────────────────────┘
Use these variables in your custom CSS:

--color-letchworth-autumn    #e56a54  (Warm orange-red)
--color-solar-strand         #ffc72c  (Bright yellow)
--color-greiner-green        #ebec00  (Bright yellow-green)
--color-lake-lasalle         #00a69c  (Teal)
--color-capen-brick          #990000  (Dark red)
--color-bronze-buffalo       #ad841f  (Bronze/gold)
--color-olmsted-green        #6da04b  (Forest green)
--color-niagara-whirlpool    #006570  (Dark teal)
--color-victor-e-blue        #2f9fd0  (Light blue)
--color-harriman-blue        #002f56  (Dark navy)
--color-baird-point          #e4e4e4  (Light gray)
--color-townsend-gray        #666666  (Medium gray)
--color-ub-blue              #005bbb  (Primary UB blue)

┌──────────────────────────────────────────────────────────────────────────────┐
│ 2. BACKGROUND COLOR CLASSES                                                 │
└──────────────────────────────────────────────────────────────────────────────┘
Apply these classes to set background colors:

.bg-ub-blue               Primary UB blue background
.bg-harriman-blue         Dark navy background
.bg-letchworth-autumn     Warm orange-red background
.bg-solar-strand          Bright yellow background
.bg-greiner-green         Bright yellow-green background
.bg-lake-lasalle          Teal background
.bg-capen-brick           Dark red background
.bg-bronze-buffalo        Bronze/gold background
.bg-olmsted-green         Forest green background
.bg-niagara-whirlpool     Dark teal background
.bg-victor-e-blue         Light blue background
.bg-baird-point           Light gray background
.bg-townsend-gray         Medium gray background

Example: <div class="bg-ub-blue">Content with UB blue background</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 3. TEXT/FOREGROUND COLOR CLASSES                                            │
└──────────────────────────────────────────────────────────────────────────────┘
Apply these classes to set text colors:

.fg-ub-blue               Primary UB blue text
.fg-harriman-blue         Dark navy text
.fg-letchworth-autumn     Warm orange-red text
.fg-solar-strand          Bright yellow text
.fg-greiner-green         Bright yellow-green text
.fg-lake-lasalle          Teal text
.fg-capen-brick           Dark red text
.fg-bronze-buffalo        Bronze/gold text
.fg-olmsted-green         Forest green text
.fg-niagara-whirlpool     Dark teal text
.fg-victor-e-blue         Light blue text
.fg-baird-point           Light gray text
.fg-townsend-gray         Medium gray text

Example: <p class="fg-ub-blue">Text in UB blue color</p>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 4. BORDER COLOR CLASSES                                                     │
└──────────────────────────────────────────────────────────────────────────────┘
Apply these classes to set border colors (must combine with width and style):

.brdr-ub-blue             Primary UB blue border
.brdr-harriman-blue       Dark navy border
.brdr-letchworth-autumn   Warm orange-red border
.brdr-solar-strand        Bright yellow border
.brdr-greiner-green       Bright yellow-green border
.brdr-lake-lasalle        Teal border
.brdr-capen-brick         Dark red border
.brdr-bronze-buffalo      Bronze/gold border
.brdr-olmsted-green       Forest green border
.brdr-niagara-whirlpool   Dark teal border
.brdr-victor-e-blue       Light blue border
.brdr-baird-point         Light gray border
.brdr-townsend-gray       Medium gray border

Example: <div class="brdr-ub-blue brdr-2px brdr-solid">Content with blue border</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 5. BORDER WIDTH CLASSES                                                     │
└──────────────────────────────────────────────────────────────────────────────┘
Control border thickness (must combine with color and style):

.brdr-1px                 1 pixel border width
.brdr-2px                 2 pixel border width
.brdr-3px                 3 pixel border width
.brdr-4px                 4 pixel border width
.brdr-5px                 5 pixel border width
.brdr-10px                10 pixel border width
.brdr-20px                20 pixel border width
.brdr-25px                25 pixel border width
.brdr-50px                50 pixel border width

Example: <div class="brdr-5px brdr-solid brdr-ub-blue">Thick border</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 6. BORDER STYLE CLASSES                                                     │
└──────────────────────────────────────────────────────────────────────────────┘
Define border appearance (must combine with color and width):

.brdr-solid               Solid line border
.brdr-dashed              Dashed line border
.brdr-dotted              Dotted line border
.brdr-double              Double line border
.brdr-none                No border (removes existing borders)

Example: <div class="brdr-dashed brdr-2px brdr-ub-blue">Dashed border</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 7. INDIVIDUAL BORDER SIDE CLASSES                                           │
└──────────────────────────────────────────────────────────────────────────────┘
Apply borders to specific sides only:

.brdr-top                 Top border only (combine with width classes)
.brdr-btm                 Bottom border only (combine with width classes)
.brdr-rt                  Right border only (combine with width classes)
.brdr-lt                  Left border only (combine with width classes)

Usage: Combine side classes with width classes for specific measurements:
.brdr-top.brdr-1px        1px top border
.brdr-top.brdr-2px        2px top border
.brdr-top.brdr-3px        3px top border
.brdr-top.brdr-4px        4px top border
.brdr-top.brdr-5px        5px top border
.brdr-top.brdr-10px       10px top border
.brdr-top.brdr-20px       20px top border
.brdr-top.brdr-25px       25px top border
.brdr-top.brdr-50px       50px top border

(Same combinations available for .brdr-btm, .brdr-rt, .brdr-lt)

Example: <div class="brdr-lt brdr-5px brdr-solid brdr-ub-blue">Left border only</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 8. FLEXBOX LAYOUT CLASSES                                                   │
└──────────────────────────────────────────────────────────────────────────────┘
Modern flexbox utilities for responsive layouts:

.flex                     Enable flexbox layout
.flex-col                 Flex direction column (vertical stack)
.flex-row                 Flex direction row (horizontal layout)
.flex-wrap                Allow flex items to wrap
.flex-nowrap              Prevent flex items from wrapping

.justify-start            Justify content to start
.justify-center           Justify content to center
.justify-end              Justify content to end
.justify-between          Space between items
.justify-around           Space around items
.justify-evenly           Even space distribution

.items-start              Align items to start
.items-center             Align items to center
.items-end                Align items to end
.items-stretch            Stretch items to fill container
.items-baseline           Align items to baseline

.flex-1                   Flex grow and shrink with 0% basis
.flex-auto                Flex grow and shrink with auto basis
.flex-none                Prevent flex growing/shrinking

Example: <div class="flex items-center justify-between">Flexible layout</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 9. SPACING CLASSES (MARGIN)                                                 │
└──────────────────────────────────────────────────────────────────────────────┘
Margin utilities with consistent spacing scale:

.m-0 to .m-20             All-side margin (0 to 5rem)
.mt-0 to .mt-20           Top margin
.mb-0 to .mb-20           Bottom margin
.ml-0 to .ml-20           Left margin
.mr-0 to .mr-20           Right margin
.mx-0 to .mx-20           Horizontal margins (left + right)
.my-0 to .my-20           Vertical margins (top + bottom)
.m-auto, .mx-auto, etc.   Auto margins for centering

Spacing Scale: 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem, 3rem, 4rem, 5rem
Example: <div class="mx-auto mt-4">Centered with top margin</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 10. SPACING CLASSES (PADDING)                                               │
└──────────────────────────────────────────────────────────────────────────────┘
Padding utilities with same spacing scale as margins:

.p-0 to .p-20             All-side padding (0 to 5rem)
.pt-0 to .pt-20           Top padding
.pb-0 to .pb-20           Bottom padding
.pl-0 to .pl-20           Left padding
.pr-0 to .pr-20           Right padding
.px-0 to .px-20           Horizontal padding (left + right)
.py-0 to .py-20           Vertical padding (top + bottom)

Example: <div class="p-4 px-6">Padded content</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 11. DISPLAY UTILITY CLASSES                                                 │
└──────────────────────────────────────────────────────────────────────────────┘
Control element display behavior:

.block                    Display as block element
.inline                   Display as inline element
.inline-block             Display as inline-block element
.hidden                   Hide element (display: none)
.invisible                Hide element but keep space (visibility: hidden)
.visible                  Make element visible

Example: <span class="inline-block p-2">Inline block with padding</span>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 12. TEXT ALIGNMENT CLASSES                                                  │
└──────────────────────────────────────────────────────────────────────────────┘
Control text alignment within elements:

.text-left                Left-align text
.text-center              Center-align text
.text-right               Right-align text
.text-justify             Justify text

Example: <p class="text-center">Centered text content</p>
┌──────────────────────────────────────────────────────────────────────────────┐
│ 13. TEXT SIZE UTILITY CLASSES                                                │ 
└──────────────────────────────────────────────────────────────────────────────┘
Control text size with consistent type scale:
.text-xs                  Extra small text (12px)
.text-sm                  Small text (14px)
.text-base                Base text (16px)
.text-lg                  Large text (18px)
.text-xl                  Extra large text (20px)
.text-2xl                 2X large text (24px)
.text-3xl                 3X large text (30px)
.text-4xl                 4X large text (36px)
.text-5xl                 5X large text (48px)

┌──────────────────────────────────────────────────────────────────────────────┐
│ 13. WIDTH AND HEIGHT CLASSES                                                │
└──────────────────────────────────────────────────────────────────────────────┘
Control element dimensions:

.w-full                   Width 100%
.w-auto                   Width auto
.w-fit                    Width fit-content
.w-1/2                    Width 50%
.w-1/3                    Width 33.33%
.w-2/3                    Width 66.67%
.w-1/4                    Width 25%
.w-3/4                    Width 75%

.h-full                   Height 100%
.h-auto                   Height auto
.h-fit                    Height fit-content

Example: <div class="w-1/2 h-full">Half width, full height</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 14. POSITION CLASSES                                                        │
└──────────────────────────────────────────────────────────────────────────────┘
Control element positioning:

.relative                 Position relative
.absolute                 Position absolute
.fixed                    Position fixed
.sticky                   Position sticky
.static                   Position static (default)

Example: <div class="relative"><span class="absolute">Positioned content</span></div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 15. OVERFLOW CLASSES                                                        │
└──────────────────────────────────────────────────────────────────────────────┘
Control content overflow:

.overflow-hidden          Hide overflowing content
.overflow-auto            Show scrollbars when needed
.overflow-scroll          Always show scrollbars
.overflow-visible         Show overflowing content

Example: <div class="overflow-hidden h-20">Content with hidden overflow</div>

┌──────────────────────────────────────────────────────────────────────────────┐
│ 16. COMBINATION EXAMPLES                                                    │
└──────────────────────────────────────────────────────────────────────────────┘
Here are some common class combinations:

BUTTONS:
class="bg-ub-blue fg-baird-point brdr-solid brdr-2px brdr-harriman-blue px-4 py-2 inline-block text-center"

FLEXIBLE ALERT BOXES:
class="flex items-center bg-baird-point fg-capen-brick brdr-lt brdr-5px brdr-letchworth-autumn brdr-solid p-4 my-4"

CENTERED CARDS:
class="bg-lake-lasalle fg-baird-point brdr-solid brdr-2px brdr-niagara-whirlpool p-6 mx-auto w-1/2"

FLEX NAVIGATION HEADERS:
class="flex justify-between items-center bg-harriman-blue fg-baird-point brdr-btm brdr-3px brdr-victor-e-blue brdr-solid px-6 py-4"

STATUS INDICATORS WITH SPACING:
class="bg-olmsted-green fg-baird-point brdr-solid brdr-1px brdr-bronze-buffalo px-3 py-1 inline-block text-center"

RESPONSIVE GRID LAYOUTS:
class="flex flex-wrap justify-between"
└─ Child items: class="w-1/3 p-4 mb-4"

CENTERED CONTENT CONTAINERS:
class="flex items-center justify-center h-full w-full"

SIDEBAR WITH MAIN CONTENT:
class="flex"
├─ Sidebar: class="w-1/4 bg-harriman-blue fg-baird-point p-4"
└─ Main: class="flex-1 p-6"

MODAL OVERLAYS:
class="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-harriman-blue" style="background-color: rgba(0, 47, 86, 0.8);"
└─ Modal content: class="bg-baird-point fg-harriman-blue p-8 brdr-solid brdr-2px brdr-ub-blue w-1/2 max-w-lg"

┌──────────────────────────────────────────────────────────────────────────────┐
│ 17. ACCESSIBILITY NOTES                                                     │
└──────────────────────────────────────────────────────────────────────────────┘
• Ensure sufficient color contrast for text readability
• .fg-baird-point works well on dark backgrounds
• .fg-harriman-blue or .fg-townsend-gray work well on light backgrounds
• Test color combinations for WCAG compliance
• Consider users with color vision deficiencies

┌──────────────────────────────────────────────────────────────────────────────┐
│ 18. BROWSER COMPATIBILITY                                                   │
└──────────────────────────────────────────────────────────────────────────────┘
• CSS Custom Properties: IE 11+ (with fallbacks), All modern browsers
• CSS Nesting (border sides): Modern browsers, requires CSS preprocessing for IE
• All utility classes: Compatible with all browsers supporting CSS

┌──────────────────────────────────────────────────────────────────────────────┐
│ 19. MAINTENANCE NOTES                                                       │
└──────────────────────────────────────────────────────────────────────────────┘
• Colors are defined as CSS custom properties for easy maintenance
• To update a color, modify the --color-* variable in the :root section
• All utility classes automatically inherit color changes
• Follow UB brand guidelines when adding new colors or utilities

*/