/* my utility classes */
/* padding utility classes */
//  padding all sides
.p-0,
.p-a-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.p-a-1 {
  padding-left: var(--s-1, 0.5rem) !important;
  padding-right: var(--s-1, 0.5rem) !important;
  padding-top: var(--s-1, 0.5rem) !important;
  padding-bottom: var(--s-1, 0.5rem) !important;
}
.p-a-2 {
  padding-left: var(--s-2, 1rem) !important;
  padding-right: var(--s-2, 1rem) !important;
  padding-top: var(--s-2, 1rem) !important;
  padding-bottom: var(--s-2, 1rem) !important;
}
.p-a-3 {
  padding-left: var(--s-3, 1.5rem) !important;
  padding-right: var(--s-3, 1.5rem) !important;
  padding-top: var(--s-3, 1.5rem) !important;
  padding-bottom: var(--s-3, 1.5rem) !important;
}
.p-a-4 {
  padding-left: var(--s-4, 2rem) !important;
  padding-right: var(--s-4, 2rem) !important;
  padding-top: var(--s-4, 2rem) !important;
  padding-bottom: var(--s-4, 2rem) !important;
}
.p-a-5 {
  padding-left: var(--s-5, 3rem) !important;
  padding-right: var(--s-5, 3rem) !important;
  padding-top: var(--s-5, 3rem) !important;
  padding-bottom: var(--s-5, 3rem) !important;
}
.p-a-6 {
  padding-left: var(--s-6, 4rem) !important;
  padding-right: var(--s-6, 4rem) !important;
  padding-top: var(--s-6, 4rem) !important;
  padding-bottom: var(--s-6, 4rem) !important;
}
.p-a-7 {
  padding-left: var(--s-7, 6rem) !important;
  padding-right: var(--s-7, 6rem) !important;
  padding-top: var(--s-7, 6rem) !important;
  padding-bottom: var(--s-7, 6rem) !important;
}
.p-a-8 {
  padding-left: var(--s-8, 12rem) !important;
  padding-right: var(--s-8, 12rem) !important;
  padding-top: var(--s-8, 12rem) !important;
  padding-bottom: var(--s-8, 12rem) !important;
}
// padding top
.p-t-0 {
  padding-top: 0 !important;
}
.p-t-1 {
  padding-top: var(--s-1, 0.5rem) !important;
}
.p-t-2 {
  padding-top: var(--s-2, 1rem) !important;
}
.p-t-3 {
  padding-top: var(--s-3, 1.5rem) !important;
}
.p-t-4 {
  padding-top: var(--s-4, 2rem) !important;
}
.p-t-5 {
  padding-top: var(--s-5, 3rem) !important;
}
.p-t-6 {
  padding-top: var(--s-6, 4rem) !important;
}
.p-t-7 {
  padding-top: var(--s-7, 6rem) !important;
}
.p-t-8 {
  padding-top: var(--s-8, 12rem) !important;
}
// padding bottpm
.p-b-0 {
  padding-bottom: 0 !important;
}
.p-b-1 {
  padding-bottom: var(--s-1, 0.5rem) !important;
}
.p-b-2 {
  padding-bottom: var(--s-2, 1rem) !important;
}
.p-b-3 {
  padding-bottom: var(--s-3, 1.5rem) !important;
}
.p-b-4 {
  padding-bottom: var(--s-4, 2rem) !important;
}
.p-b-5 {
  padding-bottom: var(--s-5, 3rem) !important;
}
.p-b-6 {
  padding-bottom: var(--s-6, 4rem) !important;
}
.p-b-7 {
  padding-bottom: var(--s-7, 6rem) !important;
}
.p-b-8 {
  padding-bottom: var(--s-8, 12rem) !important;
}
// padding left
.p-l-0 {
  padding-left: 0 !important;
}
.p-l-1 {
  padding-left: var(--s-1, 0.5rem) !important;
}
.p-l-2 {
  padding-left: var(--s-2, 1rem) !important;
}
.p-l-3 {
  padding-left: var(--s-3, 1.5rem) !important;
}
.p-l-4 {
  padding-left: var(--s-4, 2rem) !important;
}
.p-l-5 {
  padding-left: var(--s-5, 3rem) !important;
}
.p-l-6 {
  padding-left: var(--s-6, 4rem) !important;
}
.p-l-7 {
  padding-left: var(--s-7, 6rem) !important;
}
.p-l-8 {
  padding-left: var(--s-8, 12rem) !important;
}
// padding right
.p-r-0 {
  padding-right: 0 !important;
}
.p-r-1 {
  padding-right: var(--s-1, 0.5rem) !important;
}
.p-r-2 {
  padding-right: var(--s-2, 1rem) !important;
}
.p-r-3 {
  padding-right: var(--s-3, 1.5rem) !important;
}
.p-r-4 {
  padding-right: var(--s-4, 2rem) !important;
}
.p-r-5 {
  padding-right: var(--s-5, 3rem) !important;
}
.p-r-6 {
  padding-right: var(--s-6, 4rem) !important;
}
.p-r-7 {
  padding-right: var(--s-7, 6rem) !important;
}
.p-r-8 {
  padding-right: var(--s-8, 12rem) !important;
}
// vertical padding
.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.p-y-1 {
  padding-top: var(--s-1, 0.5rem) !important;
  padding-bottom: var(--s-1, 0.5rem) !important;
}
.p-y-2 {
  padding-top: var(--s-2, 1rem) !important;
  padding-bottom: var(--s-2, 1rem) !important;
}
.p-y-3 {
  padding-top: var(--s-3, 1.5rem) !important;
  padding-bottom: var(--s-3, 1.5rem) !important;
}
.p-y-4 {
  padding-top: var(--s-4, 2rem) !important;
  padding-bottom: var(--s-4, 2rem) !important;
}
.p-y-5 {
  padding-top: var(--s-5, 3rem) !important;
  padding-bottom: var(--s-5, 3rem) !important;
}
.p-y-6 {
  padding-top: var(--s-6, 4rem) !important;
  padding-bottom: var(--s-6, 4rem) !important;
}
.p-y-7 {
  padding-top: var(--s-7, 6rem) !important;
  padding-bottom: var(--s-7, 6rem) !important;
}
.p-y-8 {
  padding-top: var(--s-8, 12rem) !important;
  padding-bottom: var(--s-8, 12rem) !important;
}
// horizontal padding
.p-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.p-x-1 {
  padding-left: var(--s-1, 0.5rem) !important;
  padding-right: var(--s-1, 0.5rem) !important;
}
.p-x-2 {
  padding-left: var(--s-2, 1rem) !important;
  padding-right: var(--s-2, 1rem) !important;
}
.p-x-3 {
  padding-left: var(--s-3, 1.5rem) !important;
  padding-right: var(--s-3, 1.5rem) !important;
}
.p-x-4 {
  padding-left: var(--s-4, 2rem) !important;
  padding-right: var(--s-4, 2rem) !important;
}
.p-x-5 {
  padding-left: var(--s-5, 3rem) !important;
  padding-right: var(--s-5, 3rem) !important;
}
.p-x-6 {
  padding-left: var(--s-6, 4rem) !important;
  padding-right: var(--s-6, 4rem) !important;
}
.p-x-7 {
  padding-left: var(--s-7, 6rem) !important;
  padding-right: var(--s-7, 6rem) !important;
}
.p-x-8 {
  padding-left: var(--s-8, 12rem) !important;
  padding-right: var(--s-8, 12rem) !important;
}

/* margin utility classes */
//  margin all sides
.m-0,
.m-a-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.m-a-1 {
  margin-left: var(--s-1, 0.5rem) !important;
  margin-right: var(--s-1, 0.5rem) !important;
  margin-top: var(--s-1, 0.5rem) !important;
  margin-bottom: var(--s-1, 0.5rem) !important;
}
.m-a-2 {
  margin-left: var(--s-2, 1rem) !important;
  margin-right: var(--s-2, 1rem) !important;
  margin-top: var(--s-2, 1rem) !important;
  margin-bottom: var(--s-2, 1rem) !important;
}
.m-a-3 {
  margin-left: var(--s-3, 1.5rem) !important;
  margin-right: var(--s-3, 1.5rem) !important;
  margin-top: var(--s-3, 1.5rem) !important;
  margin-bottom: var(--s-3, 1.5rem) !important;
}
.m-a-4 {
  margin-left: var(--s-4, 2rem) !important;
  margin-right: var(--s-4, 2rem) !important;
  margin-top: var(--s-4, 2rem) !important;
  margin-bottom: var(--s-4, 2rem) !important;
}
.m-a-5 {
  margin-left: var(--s-5, 3rem) !important;
  margin-right: var(--s-5, 3rem) !important;
  margin-top: var(--s-5, 3rem) !important;
  margin-bottom: var(--s-5, 3rem) !important;
}
.m-a-6 {
  margin-left: var(--s-6, 4rem) !important;
  margin-right: var(--s-6, 4rem) !important;
  margin-top: var(--s-6, 4rem) !important;
  margin-bottom: var(--s-6, 4rem) !important;
}
.m-a-7 {
  margin-left: var(--s-7, 6rem) !important;
  margin-right: var(--s-7, 6rem) !important;
  margin-top: var(--s-7, 6rem) !important;
  margin-bottom: var(--s-7, 6rem) !important;
}
.m-a-8 {
  margin-left: var(--s-8, 12rem) !important;
  margin-right: var(--s-8, 12rem) !important;
  margin-top: var(--s-8, 12rem) !important;
  margin-bottom: var(--s-8, 12rem) !important;
}
// margin top
.m-t-0 {
  margin-top: 0 !important;
}
.m-t-1 {
  margin-top: var(--s-1, 0.5rem) !important;
}
.m-t-2 {
  margin-top: var(--s-2, 1rem) !important;
}
.m-t-3 {
  margin-top: var(--s-3, 1.5rem) !important;
}
.m-t-4 {
  margin-top: var(--s-4, 2rem) !important;
}
.m-t-5 {
  margin-top: var(--s-5, 3rem) !important;
}
.m-t-6 {
  margin-top: var(--s-6, 4rem) !important;
}
.m-t-7 {
  margin-top: var(--s-7, 6rem) !important;
}
.m-t-8 {
  margin-top: var(--s-8, 12rem) !important;
}
// margin bottpm
.m-b-0 {
  margin-bottom: 0 !important;
}
.m-b-1 {
  margin-bottom: var(--s-1, 0.5rem) !important;
}
.m-b-2 {
  margin-bottom: var(--s-2, 1rem) !important;
}
.m-b-3 {
  margin-bottom: var(--s-3, 1.5rem) !important;
}
.m-b-4 {
  margin-bottom: var(--s-4, 2rem) !important;
}
.m-b-5 {
  margin-bottom: var(--s-5, 3rem) !important;
}
.m-b-6 {
  margin-bottom: var(--s-6, 4rem) !important;
}
.m-b-7 {
  margin-bottom: var(--s-7, 6rem) !important;
}
.m-b-8 {
  margin-bottom: var(--s-8, 12rem) !important;
}
// margin left
.m-l-0 {
  margin-left: 0 !important;
}
.m-l-1 {
  margin-left: var(--s-1, 0.5rem) !important;
}
.m-l-2 {
  margin-left: var(--s-2, 1rem) !important;
}
.m-l-3 {
  margin-left: var(--s-3, 1.5rem) !important;
}
.m-l-4 {
  margin-left: var(--s-4, 2rem) !important;
}
.m-l-5 {
  margin-left: var(--s-5, 3rem) !important;
}
.m-l-6 {
  margin-left: var(--s-6, 4rem) !important;
}
.m-l-7 {
  margin-left: var(--s-7, 6rem) !important;
}
.m-l-8 {
  margin-left: var(--s-8, 12rem) !important;
}
// margin right
.m-r-0 {
  margin-right: 0 !important;
}
.m-r-1 {
  margin-right: var(--s-1, 0.5rem) !important;
}
.m-r-2 {
  margin-right: var(--s-2, 1rem) !important;
}
.m-r-3 {
  margin-right: var(--s-3, 1.5rem) !important;
}
.m-r-4 {
  margin-right: var(--s-4, 2rem) !important;
}
.m-r-5 {
  margin-right: var(--s-5, 3rem) !important;
}
.m-r-6 {
  margin-right: var(--s-6, 4rem) !important;
}
.m-r-7 {
  margin-right: var(--s-7, 6rem) !important;
}
.m-r-8 {
  margin-right: var(--s-8, 12rem) !important;
}
// vertical margin
.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.m-y-1 {
  margin-top: var(--s-1, 0.5rem) !important;
  margin-bottom: var(--s-1, 0.5rem) !important;
}
.m-y-2 {
  margin-top: var(--s-2, 1rem) !important;
  margin-bottom: var(--s-2, 1rem) !important;
}
.m-y-3 {
  margin-top: var(--s-3, 1.5rem) !important;
  margin-bottom: var(--s-3, 1.5rem) !important;
}
.m-y-4 {
  margin-top: var(--s-4, 2rem) !important;
  margin-bottom: var(--s-4, 2rem) !important;
}
.m-y-5 {
  margin-top: var(--s-5, 3rem) !important;
  margin-bottom: var(--s-5, 3rem) !important;
}
.m-y-6 {
  margin-top: var(--s-6, 4rem) !important;
  margin-bottom: var(--s-6, 4rem) !important;
}
.m-y-7 {
  margin-top: var(--s-7, 6rem) !important;
  margin-bottom: var(--s-7, 6rem) !important;
}
.m-y-8 {
  margin-top: var(--s-8, 12rem) !important;
  margin-bottom: var(--s-8, 12rem) !important;
}
// horizontal margin
.m-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.m-x-1 {
  margin-left: var(--s-1, 0.5rem) !important;
  margin-right: var(--s-1, 0.5rem) !important;
}
.m-x-2 {
  margin-left: var(--s-2, 1rem) !important;
  margin-right: var(--s-2, 1rem) !important;
}
.m-x-3 {
  margin-left: var(--s-3, 1.5rem) !important;
  margin-right: var(--s-3, 1.5rem) !important;
}
.m-x-4 {
  margin-left: var(--s-4, 2rem) !important;
  margin-right: var(--s-4, 2rem) !important;
}
.m-x-5 {
  margin-left: var(--s-5, 3rem) !important;
  margin-right: var(--s-5, 3rem) !important;
}
.m-x-6 {
  margin-left: var(--s-6, 4rem) !important;
  margin-right: var(--s-6, 4rem) !important;
}
.m-x-7 {
  margin-left: var(--s-7, 6rem) !important;
  margin-right: var(--s-7, 6rem) !important;
}
.m-x-8 {
  margin-left: var(--s-8, 12rem) !important;
  margin-right: var(--s-8, 12rem) !important;
}

.m-l-a {
  margin-left: auto !important;
}
.m-r-a {
  margin-right: auto !important;
}
.m-x-a {
  margin-left: auto !important;
  margin-right: auto !important;
}
.m-0-a {
  margin: 0 auto !important;
}
.m-t-a {
  margin-top: auto !important;
}
.m-b-a {
  margin-bottom: auto !important;
}
.m-y-a {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
/* BORDERS */
.border-0 {
  border: none !important;
}
.border-1 {
  border: solid var(--border-1) !important;
}
.border-2 {
  border: solid var(--border-2) !important;
}
.border-3 {
  border: solid var(--border-3) !important;
}
.border-4 {
  border: solid var(--border-4) !important;
}
.border-5 {
  border: solid var(--border-5) !important;
}
.border-6 {
  border: solid var(--border-6) !important;
}
// border left
.border-l-0 {
  border-left: none !important;
}
.border-l-1 {
  border-left: solid var(--border-1) !important;
}
.border-l-2 {
  border-left: solid var(--border-2) !important;
}
.border-l-3 {
  border-left: solid var(--border-3) !important;
}
.border-l-4 {
  border-left: solid var(--border-4) !important;
}
.border-l-5 {
  border-left: solid var(--border-5) !important;
}
.border-l-6 {
  border-left: solid var(--border-6) !important;
}
// border right
.border-r-0 {
  border-right: none !important;
}
.border-r-1 {
  border-right: solid var(--border-1) !important;
}
.border-r-2 {
  border-right: solid var(--border-2) !important;
}
.border-r-3 {
  border-right: solid var(--border-3) !important;
}
.border-r-4 {
  border-right: solid var(--border-4) !important;
}
.border-r-5 {
  border-right: solid var(--border-5) !important;
}
.border-r-6 {
  border-right: solid var(--border-6) !important;
}
// border top
.border-t-0 {
  border-top: none !important;
}
.border-t-1 {
  border-top: solid var(--border-1) !important;
}
.border-t-2 {
  border-top: solid var(--border-2) !important;
}
.border-t-3 {
  border-top: solid var(--border-3) !important;
}
.border-t-4 {
  border-top: solid var(--border-4) !important;
}
.border-t-5 {
  border-top: solid var(--border-5) !important;
}
.border-t-6 {
  border-top: solid var(--border-6) !important;
}
// border bottom
.border-b-0 {
  border-bottom: none !important;
}
.border-b-1 {
  border-bottom: solid var(--border-1) !important;
}
.border-b-2 {
  border-bottom: solid var(--border-2) !important;
}
.border-b-3 {
  border-bottom: solid var(--border-3) !important;
}
.border-b-4 {
  border-bottom: solid var(--border-4) !important;
}
.border-b-5 {
  border-bottom: solid var(--border-5) !important;
}
.border-b-6 {
  border-bottom: solid var(--border-6) !important;
}
// border colors
.border-primary-100 {
  border-color: var(--primary-100) !important;
}
.border-primary-300 {
  border-color: var(--primary-300) !important;
}
.border-primary-500 {
  border-color: var(--primary-500) !important;
}
.border-primary-700 {
  border-color: var(--primary-700) !important;
}
.border-primary-900 {
  border-color: var(--primary-900) !important;
}

.border-accent1-100 {
  border-color: var(--accent1-100) !important;
}
.border-accent1-300 {
  border-color: var(--accent1-300) !important;
}
.border-accent1-500 {
  border-color: var(--accent1-500) !important;
}
.border-accent1-700 {
  border-color: var(--accent1-700) !important;
}
.border-accent1-900 {
  border-color: var(--accent1-900) !important;
}

.border-accent2-100 {
  border-color: var(--accent2-100) !important;
}
.border-accent2-300 {
  border-color: var(--accent2-300) !important;
}
.border-accent2-500 {
  border-color: var(--accent2-500) !important;
}
.border-accent2-700 {
  border-color: var(--accent2-700) !important;
}
.border-accent2-900 {
  border-color: var(--accent2-900) !important;
}

.border-white {
  border-color: var(--white) !important;
}
.border-gray-50 {
  border-color: var(--gray-50) !important;
}
.border-gray-100 {
  border-color: var(--gray-100) !important;
}
.border-gray-200 {
  border-color: var(--gray-200) !important;
}
.border-gray-300 {
  border-color: var(--gray-300) !important;
}
.border-gray-400 {
  border-color: var(--gray-400) !important;
}
.border-gray-500 {
  border-color: var(--gray-500) !important;
}
.border-gray-600 {
  border-color: var(--gray-600) !important;
}
.border-gray-700 {
  border-color: var(--gray-800) !important;
}
.border-gray-800 {
  border-color: var(--gray-800) !important;
}
.border-gray-900 {
  border-color: var(--gray-900) !important;
}
.border-black {
  border-color: var(--black) !important;
}

// border radius
.radius-0 {
  border-radius: 0px !important;
}
.radius-1 {
  border-radius: var(--radius-1) !important;
}
.radius-2 {
  border-radius: var(--radius-2) !important;
}
.radius-3 {
  border-radius: var(--radius-3) !important;
}
.radius-4 {
  border-radius: var(--radius-4) !important;
}
.radius-5 {
  border-radius: var(--radius-5) !important;
}
.radius-round {
  border-radius: var(--radius-round) !important;
}

/* COLORS AND BACKGROUNDS */
// primary color
.primary-100,
.primary-100-hover:hover,
.primary-100-hover:focus {
  color: var(--primary-100) !important;
}
.primary-300,
.primary-300-hover:hover,
.primary-300-hover:focus {
  color: var(--primary-300) !important;
}
.primary-500,
.primary-500-hover:hover,
.primary-500-hover:focus {
  color: var(--primary-500) !important;
}
// primary main color is 700
.primary-700,
.primary-700-hover:hover,
.primary-700-hover:focus {
  color: var(--primary-700) !important;
}
.primary-900,
.primary-900-hover:hover,
.primary-900-hover:focus {
  color: var(--primary-900) !important;
}

// accent1 color
.accent1-100,
.accent1-100-hover:hover,
.accent1-100-hover:focus {
  color: var(--accent1-100) !important;
}
.accent1-300,
.accent1-300-hover:hover,
.accent1-300-hover:focus {
  color: var(--accent1-300) !important;
}
// accent1 main color is 500
.accent1-500,
.accent1-500-hover:hover,
.accent1-500-hover:focus {
  color: var(--accent1-500) !important;
}
.accent1-700,
.accent1-700-hover:hover,
.accent1-700-hover:focus {
  color: var(--accent1-700) !important;
}
.accent1-900,
.accent1-900-hover:hover,
.accent1-900-hover:focus {
  color: var(--accent1-900) !important;
}

// accent2 color
.accent2-100,
.accent2-100-hover:hover,
.accent2-100-hover:focus {
  color: var(--accent2-100) !important;
}
.accent2-300,
.accent2-300-hover:hover,
.accent2-300-hover:focus {
  color: var(--accent2-300) !important;
}
// accent2 main color is 500
.accent2-500,
.accent2-500-hover:hover,
.accent2-500-hover:focus {
  color: var(--accent2-500) !important;
}
.accent2-700,
.accent2-700-hover:hover,
.accent2-700-hover:focus {
  color: var(--accent2-700) !important;
}
.accent2-900,
.accent2-900-hover:hover,
.accent2-900-hover:focus {
  color: var(--accent2-900) !important;
}

// GRAY COLORS
.gray-50,
.gray-50-hover:hover,
.gray-50-hover:focus {
  color: var(--gray-50) !important;
}
.gray-100,
.gray-100-hover:hover,
.gray-100-hover:focus {
  color: var(--gray-100) !important;
}
.gray-200,
.gray-200-hover:hover,
.gray-200-hover:focus {
  color: var(--gray-200) !important;
}
.gray-300,
.gray-300-hover:hover,
.gray-300-hover:focus {
  color: var(--gray-300) !important;
}
.gray-400,
.gray-400-hover:hover,
.gray-400-hover:focus {
  color: var(--gray-400) !important;
}
.gray-500,
.gray-500-hover:hover,
.gray-500-hover:focus {
  color: var(--gray-500) !important;
}
.gray-600,
.gray-600-hover:hover,
.gray-600-hover:focus {
  color: var(--gray-600) !important;
}
.gray-700,
.gray-700-hover:hover,
.gray-700-hover:focus {
  color: var(--gray-700) !important;
}
.gray-800,
.gray-800-hover:hover,
.gray-800-hover:focus {
  color: var(--gray-800) !important;
}
.gray-900,
.gray-900-hover:hover,
.gray-900-hover:focus {
  color: var(--gray-900) !important;
}
.black,
.black-hover:hover,
.black-hover:focus,
.black-color,
.black-color-hover:hover,
.black-color-hover:focus {
  color: var(--black) !important;
}
.white,
.white-hover:hover,
.white-hover:focus,
.white-color,
.white-color-hover:hover,
.white-color-hover:focus {
  color: var(--white) !important;
}

// System status colors
.success-color,
.success-700 {
  color: var(--success-700) !important;
}
.success-color-hover:hover,
.success-700-hover:hover {
  color: var(--success-700) !important;
}

// System status colors
.success-100,
.success-100-hover:hover,
.success-100-hover:focus {
  color: var(--success-100) !important;
}
.success-300,
.success-300-hover:hover,
.success-300-hover:focus {
  color: var(--success-300) !important;
}
.success-500,
.success-500-hover:hover,
.success-500-hover:focus {
  color: var(--success-500) !important;
}
.success-700,
.success-700-hover:hover,
.success-700-hover:focus,
.success-color,
.success-color-hover:hover,
.success-color-hover:focus {
  color: var(--success-700) !important;
}
.success-900,
.success-900-hover:hover,
.success-900-hover:focus {
  color: var(--success-900) !important;
}

.danger-100,
.danger-100-hover:hover,
.danger-100-hover:focus {
  color: var(--danger-100) !important;
}
.danger-300,
.danger-300-hover:hover,
.danger-300-hover:focus {
  color: var(--danger-300) !important;
}
.danger-500,
.danger-500-hover:hover,
.danger-500-hover:focus,
.danger-color,
.danger-color-hover:hover,
.danger-color-hover:focus {
  color: var(--danger-500) !important;
}
.danger-700,
.danger-color,
.danger-700-hover:hover,
.danger-700-hover:focus {
  color: var(--danger-700) !important;
}
.danger-900,
.danger-900-hover:hover,
.danger-900-hover:focus {
  color: var(--danger-900) !important;
}

.warning-100,
.warning-100-hover:hover,
.warning-100-hover:focus {
  color: var(--warning-100) !important;
}
.warning-300,
.warning-300-hover:hover,
.warning-300-hover:focus,
.warning-color,
.warning-color-hover:hover,
.warning-color-hover:focus {
  color: var(--warning-300) !important;
}
.warning-500,
.warning-500-hover:hover,
.warning-500-hover:focus {
  color: var(--warning-500) !important;
}
.warning-700,
.warning-color,
.warning-700-hover:hover,
.warning-700-hover:focus {
  color: var(--warning-700) !important;
}
.warning-900,
.warning-900-hover:hover,
.warning-900-hover:focus {
  color: var(--warning-900) !important;
}

.info-100,
.info-100-hover:hover,
.info-100-hover:focus {
  color: var(--info-100) !important;
}
.info-300,
.info-300-hover:hover,
.info-300-hover:focus {
  color: var(--info-300) !important;
}
.info-500,
.info-500-hover:hover,
.info-500-hover:focus {
  color: var(--info-500) !important;
}
.info-700,
.info-color,
.info-700-hover:hover,
.info-700-hover:focus {
  color: var(--info-700) !important;
}
.info-900,
.info-900-hover:hover,
.info-900-hover:focus,
.info-color,
.info-color-hover:hover,
.info-color-hover:focus {
  color: var(--info-900) !important;
}

// CA.gov main brand colors
.cagov-highlight {
  color: var(--cagov-highlight, #ecb32d);
}
.cagov-primary {
  color: var(--cagov-primary, #165ac2);
}
.cagov-primary-dark,
.cagov-primary-hover:hover,
.cagov-primary-hover:focus {
  color: var(--cagov-primary-dark, #003688);
}
.cagov-secondary {
  color: var(--cagov-secondary, #de6516);
}

/* BACKGROUNDS */
// PRODUCT LEVEL BACKGROUNDS
// primary backgrounds
.bg-primary-100,
.bg-primary-100-hover:hover,
.bg-primary-100-hover:focus {
  background-color: var(--primary-100) !important;
}
.bg-primary-300,
.bg-primary-300-hover:hover,
.bg-primary-300-hover:focus {
  background-color: var(--primary-300) !important;
}
.bg-primary-500,
.bg-primary-500-hover:hover,
.bg-primary-500-hover:focus {
  background-color: var(--primary-500) !important;
}
// 700 (main color)
.bg-primary-700,
.bg-primary-700-hover:hover,
.bg-primary-700-hover:focus {
  background-color: var(--primary-700) !important;
}
.bg-primary-900,
.bg-primary-900-hover:hover,
.bg-primary-900-hover:focus {
  background-color: var(--primary-900) !important;
}

// accent1 backgrounds
.bg-accent1-100,
.bg-accent1-100-hover:hover,
.bg-accent1-100-hover:focus {
  background-color: var(--accent1-100) !important;
}
.bg-accent1-300,
.bg-accent1-300-hover:hover,
.bg-accent1-300-hover:focus {
  background-color: var(--accent1-300) !important;
}
// 500 (main color)
.bg-accent1-500,
.bg-accent1-500-hover:hover,
.bg-accent1-500-hover:focus {
  background-color: var(--accent1-500) !important;
}
.bg-accent1-700,
.bg-accent1-700-hover:hover,
.bg-accent1-700-hover:focus {
  background-color: var(--accent1-700) !important;
}
.bg-accent1-900,
.bg-accent1-900-hover:hover,
.accent1-900-hover:focus {
  background-color: var(--accent1-900) !important;
}

// accent2 backgrounds
.bg-accent2-100,
.bg-accent2-100-hover:hover,
.bg-accent2-100-hover:focus {
  background-color: var(--accent2-100) !important;
}
.bg-accent2-300,
.bg-accent2-300-hover:hover,
.bg-accent2-300-hover:focus {
  background-color: var(--accent2-300) !important;
}
// 500 (main color)
.bg-accent2-500,
.bg-accent2-500-hover:hover,
.bg-accent2-500-hover:focus {
  background-color: var(--accent2-500) !important;
}
.bg-accent2-700,
.bg-accent2-700-hover:hover,
.bg-accent2-700-hover:focus {
  background-color: var(--accent2-700) !important;
}
.bg-accent2-900,
.bg-accent2-900-hover:hover,
.bg-accent2-900-hover:focus {
  background-color: var(--accent2-900) !important;
}
// GRAY BACKGROUNDS
.bg-gray-50,
.bg-gray-50-hover:hover,
.bg-gray-50-hover:focus {
  background-color: var(--gray-50) !important;
}
.bg-gray-100,
.bg-gray-100-hover:hover,
.bg-gray-100-hover:focus {
  background-color: var(--gray-100) !important;
}
.bg-gray-200,
.bg-gray-200-hover:hover,
.bg-gray-200-hover:focus {
  background-color: var(--gray-200) !important;
}
.bg-gray-300,
.bg-gray-300-hover:hover,
.bg-gray-300-hover:focus {
  background-color: var(--gray-300) !important;
}
.bg-gray-400,
.bg-gray-400-hover:hover,
.bg-gray-400-hover:focus {
  background-color: var(--gray-400) !important;
}
.bg-gray-500,
.bg-gray-500-hover:hover,
.bg-gray-500-hover:focus {
  background-color: var(--gray-500) !important;
}
.bg-gray-600,
.bg-gray-600-hover:hover,
.bg-gray-600-hover:focus {
  background-color: var(--gray-600) !important;
}
.bg-gray-700,
.bg-gray-700-hover:hover,
.bg-gray-700-hover:focus {
  background-color: var(--gray-700) !important;
}
.bg-gray-800,
.bg-gray-800-hover:hover,
.bg-gray-800-hover:focus {
  background-color: var(--gray-800) !important;
}
.bg-gray-900,
.bg-gray-900-hover:hover,
.bg-gray-900-hover:focus {
  background-color: var(--gray-900) !important;
}
.bg-black,
.bg-black-hover:hover,
.bg-black-hover:focus {
  background-color: var(--black) !important;
}
.bg-white,
.bg-white-hover:hover,
.bg-white-hover:focus {
  background-color: var(--white) !important;
}
// SYSTEM STATUS BACKGROUNDS
.bg-success-100,
.bg-success-100-hover:hover,
.bg-success-100-hover:focus {
  background-color: var(--success-100) !important;
}
.bg-success-300,
.bg-success-300-hover:hover,
.bg-success-300-hover:focus {
  background-color: var(--success-300) !important;
}
.bg-success-500,
.bg-success-500-hover:hover,
.bg-success-500-hover:focus {
  background-color: var(--success-500) !important;
}
.bg-success-700,
.bg-success-700-hover:hover,
.bg-success-700-hover:focus,
.bg-success-color,
.bg-success-color-hover:hover,
.bg-success-color-hover:focus {
  background-color: var(--success-700) !important;
}
.bg-success-900,
.bg-success-900-hover:hover,
.bg-success-900-hover:focus {
  background-color: var(--success-900) !important;
}

.bg-danger-100,
.bg-danger-100-hover:hover,
.bg-danger-100-hover:focus {
  background-color: var(--danger-100) !important;
}
.bg-danger-300,
.bg-danger-300-hover:hover,
.bg-danger-300-hover:focus {
  background-color: var(--danger-300) !important;
}
.bg-danger-500,
.bg-danger-500-hover:hover,
.bg-danger-500-hover:focus,
.bg-danger-color,
.bg-danger-color-hover:hover,
.bg-danger-color-hover:focus {
  background-color: var(--danger-500) !important;
}
.bg-danger-700,
.bg-danger-color,
.bg-danger-700-hover:hover,
.bg-danger-700-hover:focus {
  background-color: var(--danger-700) !important;
}
.bg-danger-900,
.bg-danger-900-hover:hover,
.bg-danger-900-hover:focus {
  background-color: var(--danger-900) !important;
}

.bg-warning-100,
.bg-warning-100-hover:hover,
.bg-warning-100-hover:focus {
  background-color: var(--warning-100) !important;
}
.bg-warning-300,
.bg-warning-300-hover:hover,
.bg-warning-300-hover:focus,
.bg-warning-color,
.bg-warning-color-hover:hover,
.bg-warning-color-hover:focus {
  background-color: var(--warning-300) !important;
}
.bg-warning-500,
.bg-warning-500-hover:hover,
.bg-warning-500-hover:focus {
  background-color: var(--warning-500) !important;
}
.bg-warning-700,
.bg-warning-700-hover:hover,
.bg-warning-700-hover:focus {
  background-color: var(--warning-700) !important;
}
.bg-warning-900,
.bg-warning-900-hover:hover,
.bg-warning-900-hover:focus {
  background-color: var(--warning-900) !important;
}

.bg-info-100,
.bg-info-100-hover:hover,
.bg-info-100-hover:focus {
  background-color: var(--info-100) !important;
}
.bg-info-300,
.bg-info-300-hover:hover,
.bg-info-300-hover:focus {
  background-color: var(--info-300) !important;
}
.bg-info-500,
.bg-info-500-hover:hover,
.bg-info-500-hover:focus {
  background-color: var(--info-500) !important;
}
.bg-info-700,
.bg-info-700-hover:hover,
.bg-info-700-hover:focus {
  background-color: var(--info-700) !important;
}
.bg-info-900,
.bg-info-900-hover:hover,
.bg-info-900-hover:focus,
.bg-info-color,
.bg-info-color-hover:hover,
.bg-info-color-hover:focus {
  background-color: var(--info-900) !important;
}

// CA.gov main brand BG colors
.bg-cagov-highlight {
  background-color: var(--cagov-highlight, #ecb32d);
}
.bg-cagov-primary {
  background-color: var(--cagov-primary, #165ac2);
}
.bg-cagov-primary-dark,
.bg-cagov-hover:hover,
.bg-cagov-hover:focus {
  background-color: var(--cagov-primary-dark, #003688);
}
.bg-cagov-secondary {
  background-color: var(--cagov-secondary, #de6516);
}
// BG alphas
.bg-0 {
  background: none !important;
}
.bg-alpha-0 {
  background-color: transparent !important;
}
.bg-alpha-40 {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
.bg-alpha-50 {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.bg-alpha-70 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.bg-alpha-60 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.bg-alpha-80 {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
.bg-alpha-90 {
  background-color: rgba(0, 0, 0, 0.9) !important;
}
.bg-alpha-100 {
  background-color: rgba(0, 0, 0, 1) !important;
}
.opacity-0 {
  opacity: 0 !important;
}
.opacity-1 {
  opacity: 0.1 !important;
}
.opacity-2 {
  opacity: 0.2 !important;
}
.opacity-3 {
  opacity: 0.3 !important;
}
.opacity-4 {
  opacity: 0.4 !important;
}
.opacity-5 {
  opacity: 0.5 !important;
}
.opacity-6 {
  opacity: 0.6 !important;
}
.opacity-7 {
  opacity: 0.7 !important;
}
.opacity-8 {
  opacity: 0.8 !important;
}
.opacity-9 {
  opacity: 0.9 !important;
}
.opacity-100 {
  opacity: 1 !important;
}

/* MISC */
.mb-2,
.cagov-mb-2 {
  margin-bottom: 2rem;
}
.border {
  border: solid 1px;
}
.cluster .sp-bt {
  justify-content: space-between;
}
.fb-500 {
  flex-basis: 500px !important;
}
.visually-hidden {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* positions */
.position-sticky {
  position: sticky !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
/* displays */
.d-none {
  display: none !important;
}
.d-inline {
  display: inline !important;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-grid {
  display: grid !important;
}
.d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex !important;
}

/* width classes */
.w-100 {
  width: 100% !important;
}
.w-100-hover:hover {
  width: 100% !important;
}
.w-auto {
  width: auto;
}
.w-1 {
  width: var(--s-1) !important;
}
.w-2 {
  width: var(--s-2) !important;
}
.w-3 {
  width: var(--s-3) !important;
}
.w-4 {
  width: var(--s-4) !important;
}
.w-5 {
  width: var(--s-5) !important;
}
.w-6 {
  width: var(--s-6) !important;
}
.w-7 {
  width: var(--s-7) !important;
}
.w-8 {
  width: var(--s-8) !important;
}

/* height classes */
.h-100 {
  height: 100% !important;
}
.h-auto {
  height: auto;
}
.h-1 {
  height: var(--s-1) !important;
}
.h-2 {
  height: var(--s-2) !important;
}
.h-3 {
  height: var(--s-3) !important;
}
.h-4 {
  height: var(--s-4) !important;
}
.h-5 {
  height: var(--s-5) !important;
}
.h-6 {
  height: var(--s-6) !important;
}
.h-7 {
  height: var(--s-7) !important;
}
.h-8 {
  height: var(--s-8) !important;
}

/* FLEX UTILITY CLASSES */
.flex-column {
  flex-direction: column !important;
}
.flex-column-reverse {
  flex-direction: column-reverse !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-shrink-1 {
  flex-shrink: 1 !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.gap-0 {
  gap: 0 !important;
}
.gap-1 {
  gap: var(--s-sm) !important;
}
.gap-2 {
  gap: var(--s-1) !important;
}
.gap-3 {
  gap: var(--s-2) !important;
}
.gap-4 {
  gap: var(--s-3) !important;
}
.gap-5 {
  gap: var(--s-5) !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-around {
  justify-content: space-around !important;
}
.justify-content-evenly {
  justify-content: space-evenly !important;
}
.align-items-start {
  align-items: flex-start !important;
}
.align-items-end {
  align-items: flex-end !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-baseline {
  align-items: baseline !important;
}
.align-items-stretch {
  align-items: stretch !important;
}
.align-content-start {
  align-content: flex-start !important;
}
.align-content-end {
  align-content: flex-end !important;
}
.align-content-center {
  align-content: center !important;
}
.align-content-between {
  align-content: space-between !important;
}
.align-content-around {
  align-content: space-around !important;
}
.align-content-stretch {
  align-content: stretch !important;
}
.align-self-auto {
  align-self: auto !important;
}
.align-self-start {
  align-self: flex-start !important;
}
.align-self-end {
  align-self: flex-end !important;
}
.align-self-center {
  align-self: center !important;
}
.align-self-baseline {
  align-self: baseline !important;
}
.align-self-stretch {
  align-self: stretch !important;
}

/* Flex for medium devices */
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-l-a {
    margin-left: auto !important;
  }
  .m-md-r-a {
    margin-right: auto !important;
  }
  .m-md-x-a {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-md-0-a {
    margin: 0 auto !important;
  }
  .m-md-t-a {
    margin-top: auto !important;
  }
  .m-md-b-a {
    margin-bottom: auto !important;
  }
  .m-md-y-a {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}

/* Flex for larger devices */
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-l-a {
    margin-left: auto !important;
  }
  .m-lg-r-a {
    margin-right: auto !important;
  }
  .m-lg-x-a {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-lg-0-a {
    margin: 0 auto !important;
  }
  .m-lg-t-a {
    margin-top: auto !important;
  }
  .m-lg-b-a {
    margin-bottom: auto !important;
  }
  .m-lg-y-a {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}

/* TEXT */
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-lovercase {
  text-transform: lowercase !important;
}
.font-size-xs {
  font-size: var(--font-size-xs) !important;
}
.font-size-sm {
  font-size: var(--font-size-sm) !important;
}
.font-size-1 {
  font-size: var(--font-size-1) !important;
}
.font-size-2 {
  font-size: var(--font-size-2) !important;
}
.font-size-3 {
  font-size: var(--font-size-3) !important;
}
.font-size-4 {
  font-size: var(--font-size-4) !important;
}
.font-size-5 {
  font-size: var(--font-size-5) !important;
}
.font-size-6 {
  font-size: var(--font-size-6) !important;
}
.font-size-7 {
  font-size: var(--font-size-7) !important;
}
.font-size-8 {
  font-size: var(--font-size-8) !important;
}
.font-size-9 {
  font-size: var(--font-size-9) !important;
}
.font-size-10 {
  font-size: var(--font-size-10) !important;
}
.font-size-11 {
  font-size: var(--font-size-11) !important;
}
.font-size-12 {
  font-size: var(--font-size-12) !important;
}

.font-weight-1 {
  font-weight: var(--font-weight-1) !important;
}
.font-weight-2 {
  font-weight: var(--font-weight-2) !important;
}
.font-weight-3 {
  font-weight: var(--font-weight-3) !important;
}
.font-weight-4 {
  font-weight: var(--font-weight-4) !important;
}
.font-weight-5 {
  font-weight: var(--font-weight-5) !important;
}
.font-weight-6 {
  font-weight: var(--font-weight-6) !important;
}
.font-weight-7,
.text-bold {
  font-weight: var(--font-weight-7) !important;
}
.font-weight-8 {
  font-weight: var(--font-weight-8) !important;
}
.font-weight-9 {
  font-weight: var(--font-weight-9) !important;
}
.font-lineheight-xs {
  line-height: var(--font-lineheight-xs) !important;
}
.font-lineheight-sm {
  line-height: var(--font-lineheight-sm) !important;
}
.font-lineheight-1 {
  line-height: var(--font-lineheight-1) !important;
}
.font-lineheight-2 {
  line-height: var(--font-lineheight-2) !important;
}
.font-lineheight-3 {
  line-height: var(--font-lineheight-3) !important;
}
.font-lineheight-4 {
  line-height: var(--font-lineheight-4) !important;
}
.font-lineheight-5 {
  line-height: var(--font-lineheight-5) !important;
}
.font-lineheight-6 {
  line-height: var(--font-lineheight-6) !important;
}

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

/* IMAGE */
.img-fluid {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* every-layout.dev layout classes */
.stack * + * {
  margin-top: 1.5rem;
}

/* Full bleed */
.full-bleed {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

/* overflow */
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-visible {
  overflow: visible !important;
}
.overflow-auto {
  overflow: auto !important;
}

/* ease transform */
.transition-1 {
  transition: all var(--animation-duration-1) !important;
}
.transition-2 {
  transition: all var(--animation-duration-2) !important;
}
.transition-3 {
  transition: all var(--animation-duration-3) !important;
}
.transition-4 {
  transition: all var(--animation-duration-4) !important;
}
.transition-5 {
  transition: all var(--animation-duration-5) !important;
}
.transition-6 {
  transition: all var(--animation-duration-6) !important;
}
.transition-7 {
  transition: all var(--animation-duration-7) !important;
}
.transition-8 {
  transition: all var(--animation-duration-8) !important;
}
.transition-9 {
  transition: all var(--animation-duration-9) !important;
}
.transition-10 {
  transition: all var(--animation-duration-10) !important;
}

/* ease */
.ease-1 {
  transition-timing-function: var(--ease-1) !important;
}
.ease-2 {
  transition-timing-function: var(--ease-2) !important;
}
.ease-3 {
  transition-timing-function: var(--ease-3) !important;
}
.ease-4 {
  transition-timing-function: var(--ease-4) !important;
}
.ease-5 {
  transition-timing-function: var(--ease-5) !important;
}

/* scale on hover */
.transform-scale-1-hover:hover {
  transform: var(--transform-scale-1) !important;
}
.transform-scale-2-hover:hover {
  transform: var(--transform-scale-2) !important;
}
.transform-scale-3-hover:hover {
  transform: var(--transform-scale-3) !important;
}
.transform-scale-4-hover:hover {
  transform: var(--transform-scale-4) !important;
}
.transform-scale-5-hover:hover {
  transform: var(--transform-scale-5) !important;
}
.transform-scale-6-hover:hover {
  transform: var(--transform-scale-6) !important;
}
.transform-scale-7-hover:hover {
  transform: var(--transform-scale-7) !important;
}
.transform-scale-8-hover:hover {
  transform: var(--transform-scale-8) !important;
}
.transform-scale-9-hover:hover {
  transform: var(--transform-scale-9) !important;
}
.transform-scale-10-hover:hover {
  transform: var(--transform-scale-10) !important;
}

/* Sadows */
.shadow-1 {
  box-shadow: var(--shadow-1) !important;
}
.shadow-2 {
  box-shadow: var(--shadow-2) !important;
}
.shadow-3 {
  box-shadow: var(--shadow-3) !important;
}
.shadow-4 {
  box-shadow: var(--shadow-4) !important;
}
.shadow-5 {
  box-shadow: var(--shadow-5) !important;
}
.shadow-6 {
  box-shadow: var(--shadow-6) !important;
}
