:root { --space-25: 0.25rem; --space-50: 0.5rem; --space-75: 0.75rem; --space-100: 1rem; --space-125: 1.25rem; --space-150: 1.5rem; --space-200: 2rem; --space-250: 2.5rem; --position-relative: relative; --position-absolute: absolute; --position-fixed: fixed; --position-sticky: sticky; --font-xs: var(--space-75); --font-sm: 0.875rem; --font-md: 0.9375rem; --font: var(--space-100); --font-lg: 1.125rem; --font-xl: var(--space-150); --font-xxl: var(--space-200); --radius-sm: var(--space-25); --radius-md: var(--space-50); --radius-lg: var(--space-75); --opacity-0: 0; --opacity-25: 0.25; --opacity-50: 0.5; --opacity-75: 0.75; --opacity-100: 1; } :root { --flex-display: flex; --inline-flex-display: inline-flex; --block-display: block; --inline-display: inline; --inline-block-display: inline-block; --none-display: none; --flex-1: 1 1 0%; --flex-none: none; --flex-1-1: 0 0 100%; --flex-1-2: 0 0 50%; --flex-1-3: 0 0 33.3333%; --flex-1-4: 0 0 25%; --flex-1-5: 0 0 20%; --flex-row: row; --flex-col: column; --flex-row-reverse: row-reverse; --flex-col-reverse: column-reverse; --flex-wrap: wrap; --flex-nowrap: nowrap; --flex-wrap-reverse: wrap-reverse; --justify-start: flex-start; --justify-end: flex-end; --justify-center: center; --justify-between: space-between; --justify-around: space-around; --justify-evenly: space-evenly; --items-start: flex-start; --items-end: flex-end; --items-center: center; --items-baseline: baseline; --items-stretch: stretch; --content-start: flex-start; --content-end: flex-end; --content-center: center; --content-between: space-between; --content-around: space-around; --align-self-auto: auto; --align-self-start: flex-start; --align-self-end: flex-end; --align-self-center: center; --align-self-stretch: stretch; --gap: var(--space-100); --gap-25: var(--space-25); --gap-50: var(--space-50); --gap-75: var(--space-75); --gap-100: var(--space-100); --gap-125: var(--space-125); --gap-150: var(--space-150); --gap-200: var(--space-200); --gap-250: var(--space-250); } .flex { display: var(--flex-display); flex-wrap: var(--flex-wrap); } .flex.word { word-break: break-word; } .flex.space { white-space: pre; } .inline-flex { display: var(--inline-flex-display); } .block { display: var(--block-display); } .inline { display: var(--inline-display); } .inline-block { display: var(--inline-block-display); } .none { display: var(--none-display); } .flex-1 { flex: var(--flex-1); } .flex-1\/2 { flex: var(--flex-1-2); max-width: 50%; } .flex-1\/3 { flex: var(--flex-1-3); max-width: 33.3333%; } .flex-1\/4 { flex: var(--flex-1-4); max-width: 25%; } .flex-1\/5 { flex: var(--flex-1-5); max-width: 20%; } .flex-none { flex: var(--flex-none); } .flex-row { flex-direction: var(--flex-row); } .flex-col { flex-direction: var(--flex-col); } .flex-row-reverse { flex-direction: var(--flex-row-reverse); } .flex-col-reverse { flex-direction: var(--flex-col-reverse); } .flex-wrap { flex-wrap: var(--flex-wrap); } .flex-nowrap { flex-wrap: var(--flex-nowrap); } .flex-wrap-reverse { flex-wrap: var(--flex-wrap-reverse); } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .justify-start { justify-content: var(--justify-start); } .justify-end { justify-content: var(--justify-end); } .justify-center { justify-content: var(--justify-center); } .justify-between { justify-content: var(--justify-between); } .justify-around { justify-content: var(--justify-around); } .justify-evenly { justify-content: var(--justify-evenly); } .items-start { align-items: var(--items-start); } .items-end { align-items: var(--items-end); } .items-center { align-items: var(--items-center); } .items-baseline { align-items: var(--items-baseline); } .items-stretch { align-items: var(--items-stretch); } .content-start { align-content: var(--content-start); } .content-end { align-content: var(--content-end); } .content-center { align-content: var(--content-center); } .content-between { align-content: var(--content-between); } .content-around { align-content: var(--content-around); } .align-self-auto { align-self: var(--align-self-auto); } .align-self-start { align-self: var(--align-self-start); } .align-self-end { align-self: var(--align-self-end); } .align-self-center { align-self: var(--align-self-center); } .align-self-stretch { align-self: var(--align-self-stretch); } .layout-fluid { max-width: 100%; } .no-select { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .position-relative {position: var(--position-relative);} .position-absolute {position: var(--position-absolute);} .position-fixed {position: var(--position-fixed);} .position-sticky {position: var(--position-sticky);} .gap {gap: var(--gap);} .gap-25 {gap: var(--gap-25);} .gap-50 {gap: var(--gap-50);} .gap-75 {gap: var(--gap-75);} .gap-100 {gap: var(--gap-100);} .gap-125 {gap: var(--gap-125);} .gap-150 {gap: var(--gap-150);} .gap-200 {gap: var(--gap-200);} .gap-250 {gap: var(--gap-250);} .m-25 {margin: var(--space-25); } .m-50 {margin: var(--space-50); } .m-75 {margin: var(--space-75); } .m-100 {margin: var(--space-100); } .m-125 {margin: var(--space-125); } .m-150 {margin: var(--space-150); } .m-200 {margin: var(--space-200); } .mt-25 {margin-top: var(--space-25); } .mt-50 {margin-top: var(--space-50); } .mt-75 {margin-top: var(--space-75); } .mt-100 {margin-top: var(--space-100); } .mt-125 {margin-top: var(--space-125); } .mt-150 {margin-top: var(--space-150); } .mt-200 {margin-top: var(--space-200); } .mb-25 {margin-bottom: var(--space-25); } .mb-50 {margin-bottom: var(--space-50); } .mb-75 {margin-bottom: var(--space-75); } .mb-100 {margin-bottom: var(--space-100); } .mb-125 {margin-bottom: var(--space-125); } .mb-150 {margin-bottom: var(--space-150); } .mb-200 {margin-bottom: var(--space-200); } .p-25 {padding: var(--space-25); } .p-50 {padding: var(--space-50); } .p-75 {padding: var(--space-75); } .p-100 {padding: var(--space-100); } .p-125 {padding: var(--space-125); } .p-150 {padding: var(--space-150); } .p-200 {padding: var(--space-200); } .pt-25 {padding-top: var(--space-25); } .pt-50 {padding-top: var(--space-50); } .pt-75 {padding-top: var(--space-75); } .pt-100 {padding-top: var(--space-100); } .pt-125 {padding-top: var(--space-125); } .pt-150 {padding-top: var(--space-150); } .pt-200 {padding-top: var(--space-200); } .pb-25 {padding-bottom: var(--space-25); } .pb-50 {padding-bottom: var(--space-50); } .pb-75 {padding-bottom: var(--space-75); } .pb-100 {padding-bottom: var(--space-100); } .pb-125 {padding-bottom: var(--space-125); } .pb-150 {padding-bottom: var(--space-150); } .pb-200 {padding-bottom: var(--space-200); } .font-xs { font-size: var(--font-xs); } .font-sm { font-size: var(--font-sm); } .font-md { font-size: var(--font-md); } .font { font-size: var(--font); } .font-lg { font-size: var(--font-lg); } .font-xl { font-size: var(--font-xl); } .font-xxl { font-size: var(--font-xxl); } .radius-sm {border-radius: var(--space-25);} .radius-md {border-radius: var(--space-50);} .radius-lg {border-radius: var(--space-75);} .opacity-0 {opacity: 0;} .opacity-25 {opacity: 0.25;} .opacity-50 {opacity: 0.5;} .opacity-75 {opacity: 0.75;} .opacity-100 {opacity: 1;} .grid { display: grid; } .grid-1 { grid-template-columns: repeat(1, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1024px) { .grid-md-1 { grid-template-columns: repeat(1, 1fr); } .grid-md-2 { grid-template-columns: repeat(2, 1fr); } .grid-md-3 { grid-template-columns: repeat(3, 1fr); } .grid-md-4 { grid-template-columns: repeat(4, 1fr); } .grid-md-5 { grid-template-columns: repeat(5, 1fr); } .grid-md-6 { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 768px) { .grid-sm-1 { grid-template-columns: repeat(1, 1fr); } .grid-sm-2 { grid-template-columns: repeat(2, 1fr); } .grid-sm-3 { grid-template-columns: repeat(3, 1fr); } .grid-sm-4 { grid-template-columns: repeat(4, 1fr); } .grid-sm-5 { grid-template-columns: repeat(5, 1fr); } .grid-sm-6 { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 600px) { .grid-xs-1 { grid-template-columns: repeat(1, 1fr); } .grid-xs-2 { grid-template-columns: repeat(2, 1fr); } .grid-xs-3 { grid-template-columns: repeat(3, 1fr); } .grid-xs-4 { grid-template-columns: repeat(4, 1fr); } .grid-xs-5 { grid-template-columns: repeat(5, 1fr); } .grid-xs-6 { grid-template-columns: repeat(6, 1fr); } }