spacing.css

:root {
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 3rem;
    --spacing-6: 4rem;
    --spacing-7: 5rem;
    --spacing-8: 6rem;
    --spacing-9: 7rem;
    --spacing-10: 8rem;
}


/* Margin All Sides */
.m-0 {margin: 0 !important;}
.m-1 {margin: var(--spacing-1) !important;}
.m-2 {margin: var(--spacing-2) !important;}
.m-3 {margin: var(--spacing-3) !important;}
.m-4 {margin: var(--spacing-4) !important;}
.m-5 {margin: var(--spacing-5) !important;}
.m-6 {margin: var(--spacing-6) !important;}
.m-7 {margin: var(--spacing-7) !important;}
.m-8 {margin: var(--spacing-8) !important;}
.m-9 {margin: var(--spacing-9) !important;}
.m-10 {margin: var(--spacing-10) !important;}

/* Margin Top */
.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: var(--spacing-1) !important;}
.mt-2 {margin-top: var(--spacing-2) !important;}
.mt-3 {margin-top: var(--spacing-3) !important;}
.mt-4 {margin-top: var(--spacing-4) !important;}
.mt-5 {margin-top: var(--spacing-5) !important;}
.mt-6 {margin-top: var(--spacing-6) !important;}
.mt-7 {margin-top: var(--spacing-7) !important;}
.mt-8 {margin-top: var(--spacing-8) !important;}
.mt-9 {margin-top: var(--spacing-9) !important;}
.mt-10 {margin-top: var(--spacing-10) !important;}

/* Margin Bottom */
.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: var(--spacing-1) !important;}
.mb-2 {margin-bottom: var(--spacing-2) !important;}
.mb-3 {margin-bottom: var(--spacing-3) !important;}
.mb-4 {margin-bottom: var(--spacing-4) !important;}
.mb-5 {margin-bottom: var(--spacing-5) !important;}
.mb-6 {margin-bottom: var(--spacing-6) !important;}
.mb-7 {margin-bottom: var(--spacing-7) !important;}
.mb-8 {margin-bottom: var(--spacing-8) !important;}
.mb-9 {margin-bottom: var(--spacing-9) !important;}
.mb-10 {margin-bottom: var(--spacing-10) !important;}

/* Margin Left (Start) */
.ml-0 {margin-left: 0 !important;}
.ml-1 {margin-left: var(--spacing-1) !important;}
.ml-2 {margin-left: var(--spacing-2) !important;}
.ml-3 {margin-left: var(--spacing-3) !important;}
.ml-4 {margin-left: var(--spacing-4) !important;}
.ml-5 {margin-left: var(--spacing-5) !important;}
.ml-6 {margin-left: var(--spacing-6) !important;}
.ml-7 {margin-left: var(--spacing-7) !important;}
.ml-8 {margin-left: var(--spacing-8) !important;}
.ml-9 {margin-left: var(--spacing-9) !important;}
.ml-10 {margin-left: var(--spacing-10) !important;}

/* Margin Right (End) */
.mr-0 {margin-right: 0 !important;}
.mr-1 {margin-right: var(--spacing-1) !important;}
.mr-2 {margin-right: var(--spacing-2) !important;}
.mr-3 {margin-right: var(--spacing-3) !important;}
.mr-4 {margin-right: var(--spacing-4) !important;}
.mr-5 {margin-right: var(--spacing-5) !important;}
.mr-6 {margin-right: var(--spacing-6) !important;}
.mr-7 {margin-right: var(--spacing-7) !important;}
.mr-8 {margin-right: var(--spacing-8) !important;}
.mr-9 {margin-right: var(--spacing-9) !important;}
.mr-10 {margin-right: var(--spacing-10) !important;}

/* Margin Horizontal (Left & Right) */
.mx-0 {margin-left: 0 !important; margin-right: 0 !important;}
.mx-1 {margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important;}
.mx-2 {margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important;}
.mx-3 {margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important;}
.mx-4 {margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important;}
.mx-5 {margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important;}
.mx-6 {margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important;}
.mx-7 {margin-left: var(--spacing-7) !important; margin-right: var(--spacing-7) !important;}
.mx-8 {margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important;}
.mx-9 {margin-left: var(--spacing-9) !important; margin-right: var(--spacing-9) !important;}
.mx-10 {margin-left: var(--spacing-10) !important; margin-right: var(--spacing-10) !important;}

/* Margin Vertical (Top & Bottom) */
.my-0 {margin-top: 0 !important; margin-bottom: 0 !important;}
.my-1 {margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important;}
.my-2 {margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important;}
.my-3 {margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important;}
.my-4 {margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important;}
.my-5 {margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important;}
.my-6 {margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important;}
.my-7 {margin-top: var(--spacing-7) !important; margin-bottom: var(--spacing-7) !important;}
.my-8 {margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important;}
.my-9 {margin-top: var(--spacing-9) !important; margin-bottom: var(--spacing-9) !important;}
.my-10 {margin-top: var(--spacing-10) !important; margin-bottom: var(--spacing-10) !important;}


/* Auto Margin */
.m-auto {margin: auto !important;}
.mt-auto {margin-top: auto !important;}
.mb-auto {margin-bottom: auto !important;}
.ms-auto {margin-left: auto !important;}
.me-auto {margin-right: auto !important;}
.mx-auto {margin-left: auto !important; margin-right: auto !important;}
.my-auto {margin-top: auto !important; margin-bottom: auto !important;}

/* Padding All Sides */
.p-0 {padding: 0 !important;}
.p-1 {padding: var(--spacing-1) !important;}
.p-2 {padding: var(--spacing-2) !important;}
.p-3 {padding: var(--spacing-3) !important;}
.p-4 {padding: var(--spacing-4) !important;}
.p-5 {padding: var(--spacing-5) !important;}
.p-6 {padding: var(--spacing-6) !important;}
.p-7 {padding: var(--spacing-7) !important;}
.p-8 {padding: var(--spacing-8) !important;}
.p-9 {padding: var(--spacing-9) !important;}
.p-10 {padding: var(--spacing-10) !important;}

/* Padding Top */
.pt-0 {padding-top: 0 !important;}
.pt-1 {padding-top: var(--spacing-1) !important;}
.pt-2 {padding-top: var(--spacing-2) !important;}
.pt-3 {padding-top: var(--spacing-3) !important;}
.pt-4 {padding-top: var(--spacing-4) !important;}
.pt-5 {padding-top: var(--spacing-5) !important;}
.pt-6 {padding-top: var(--spacing-6) !important;}
.pt-7 {padding-top: var(--spacing-7) !important;}
.pt-8 {padding-top: var(--spacing-8) !important;}
.pt-9 {padding-top: var(--spacing-9) !important;}
.pt-10 {padding-top: var(--spacing-10) !important;}

/* Padding Bottom */
.pb-0 {padding-bottom: 0 !important;}
.pb-1 {padding-bottom: var(--spacing-1) !important;}
.pb-2 {padding-bottom: var(--spacing-2) !important;}
.pb-3 {padding-bottom: var(--spacing-3) !important;}
.pb-4 {padding-bottom: var(--spacing-4) !important;}
.pb-5 {padding-bottom: var(--spacing-5) !important;}
.pb-6 {padding-bottom: var(--spacing-6) !important;}
.pb-7 {padding-bottom: var(--spacing-7) !important;}
.pb-8 {padding-bottom: var(--spacing-8) !important;}
.pb-9 {padding-bottom: var(--spacing-9) !important;}
.pb-10 {padding-bottom: var(--spacing-10) !important;}

/* Padding Left (Start) */
.pl-0 {padding-left: 0 !important;}
.pl-1 {padding-left: var(--spacing-1) !important;}
.pl-2 {padding-left: var(--spacing-2) !important;}
.pl-3 {padding-left: var(--spacing-3) !important;}
.pl-4 {padding-left: var(--spacing-4) !important;}
.pl-5 {padding-left: var(--spacing-5) !important;}
.pl-6 {padding-left: var(--spacing-6) !important;}
.pl-7 {padding-left: var(--spacing-7) !important;}
.pl-8 {padding-left: var(--spacing-8) !important;}
.pl-9 {padding-left: var(--spacing-9) !important;}
.pl-10 {padding-left: var(--spacing-10) !important;}

/* Padding Right (End) */
.pr-0 {padding-right: 0 !important;}
.pr-1 {padding-right: var(--spacing-1) !important;}
.pr-2 {padding-right: var(--spacing-2) !important;}
.pr-3 {padding-right: var(--spacing-3) !important;}
.pr-4 {padding-right: var(--spacing-4) !important;}
.pr-5 {padding-right: var(--spacing-5) !important;}
.pr-6 {padding-right: var(--spacing-6) !important;}
.pr-7 {padding-right: var(--spacing-7) !important;}
.pr-8 {padding-right: var(--spacing-8) !important;}
.pr-9 {padding-right: var(--spacing-9) !important;}
.pr-10 {padding-right: var(--spacing-10) !important;}

/* Padding Horizontal (Left & Right) */
.px-0 {padding-left: 0 !important; padding-right: 0 !important;}
.px-1 {padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important;}
.px-2 {padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important;}
.px-3 {padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important;}
.px-4 {padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important;}
.px-5 {padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important;}
.px-6 {padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important;}
.px-7 {padding-left: var(--spacing-7) !important; padding-right: var(--spacing-7) !important;}
.px-8 {padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important;}
.px-9 {padding-left: var(--spacing-9) !important; padding-right: var(--spacing-9) !important;}
.px-10 {padding-left: var(--spacing-10) !important; padding-right: var(--spacing-10) !important;}

/* Padding Vertical (Top & Bottom) */
.py-0 {padding-top: 0 !important; padding-bottom: 0 !important;}
.py-1 {padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important;}
.py-2 {padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important;}
.py-3 {padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important;}
.py-4 {padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important;}
.py-5 {padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important;}
.py-6 {padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important;}
.py-7 {padding-top: var(--spacing-7) !important; padding-bottom: var(--spacing-7) !important;}
.py-8 {padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important;}
.py-9 {padding-top: var(--spacing-9) !important; padding-bottom: var(--spacing-9) !important;}
.py-10 {padding-top: var(--spacing-10) !important; padding-bottom: var(--spacing-10) !important;}

/*
┌──────────────────────┐
│       Display        │
└──────────────────────┘
*/
.d-none {display: none !important;}
.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.d-block {display: block !important;}
.d-table {display: table !important;}
.d-table-row {display: table-row !important;}
.d-table-cell {display: table-cell !important;}
.d-flex {display: flex !important;}
.d-inline-flex {display: inline-flex !important;}

/*
┌──────────────────────┐
│  FLEXBOX CSS CODES   │
└──────────────────────┘
*/

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

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

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

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

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

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

/* Flex gap */
.gap-1 {gap: var(--spacing-1);}
.gap-2 {gap: var(--spacing-2);}
.gap-3 {gap: var(--spacing-3);}
.gap-4 {gap: var(--spacing-4);}
.gap-5 {gap: var(--spacing-5);}
.gap-6 {gap: var(--spacing-6);}
.gap-7 {gap: var(--spacing-7);}
.gap-8 {gap: var(--spacing-8);}
.gap-9 {gap: var(--spacing-9);}
.gap-10 {gap: var(--spacing-10);}

/* Flex fill */
.flex-fill {flex: 1 1 auto;}

/* Flex grow and shrink */
.flex-grow-0 {flex-grow: 0;}
.flex-grow-1 {flex-grow: 1;}
.flex-shrink-0 {flex-shrink: 0;}
.flex-shrink-1 {flex-shrink: 1;}

/* Order */
.order-first {order: -1;}
.order-0 {order: 0;}
.order-1 {order: 1;}
.order-2 {order: 2;}
.order-3 {order: 3;}
.order-4 {order: 4;}
.order-5 {order: 5;}
.order-last {order: 6;}

/*
┌──────────────────────┐
│    GRID CSS CODES    │
└──────────────────────┘
*/

/* Row */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

/* Columns - main */
.col {
    flex: 1 0 0;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {width: 8.33333333%;}
.col-2 {width: 16.66666667%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33333333%;}
.col-5 {width: 41.66666667%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33333333%;}
.col-8 {width: 66.66666667%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33333333%;}
.col-11 {width: 91.66666667%;}
.col-12 {width: 100%;}

/* Offset */
.offset-1 {margin-left: 8.33333333%;}
.offset-2 {margin-left: 16.66666667%;}
.offset-3 {margin-left: 25%;}
.offset-4 {margin-left: 33.33333333%;}
.offset-5 {margin-left: 41.66666667%;}
.offset-6 {margin-left: 50%;}
.offset-7 {margin-left: 58.33333333%;}
.offset-8 {margin-left: 66.66666667%;}
.offset-9 {margin-left: 75%;}
.offset-10 {margin-left: 83.33333333%;}
.offset-11 {margin-left: 91.66666667%;}

/* Gutters */
.g-0 {
    margin-right: 0;
    margin-left: 0;
}
.g-0 > .col,
.g-0 > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.g-1 {
    margin-right: -4px;
    margin-left: -4px;
}
.g-1 > .col,
.g-1 > [class*="col-"] {
    padding-right: 4px;
    padding-left: 4px;
}

.g-2 {
    margin-right: -8px;
    margin-left: -8px;
}
.g-2 > .col,
.g-2 > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.g-3 {
    margin-right: -12px;
    margin-left: -12px;
}
.g-3 > .col,
.g-3 > [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
}

.g-4 {
    margin-right: -16px;
    margin-left: -16px;
}
.g-4 > .col,
.g-4 > [class*="col-"] {
    padding-right: 16px;
    padding-left: 16px;
}

.g-5 {
    margin-right: -20px;
    margin-left: -20px;
}
.g-5 > .col,
.g-5 > [class*="col-"] {
    padding-right: 20px;
    padding-left: 20px;
}

/* Row columns */
.row-cols-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row-cols-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

/* Column control */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    flex-shrink: 0;
    max-width: 100%;
}

/* ========== TYPOGRAPHY AND TEXT ========== */

/* main text alignment */
.text-start {text-align: left;}
.text-end {text-align: right;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}

/* Text transformation */
.text-lowercase {text-transform: lowercase;}
.text-uppercase {text-transform: uppercase;}
.text-capitalize {text-transform: capitalize;}

/* Font weight */
.fw-light {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-medium {font-weight: 500;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700;}
.fw-bolder {font-weight: 800;}

/* Font style */
.fst-italic {font-style: italic;}
.fst-normal {font-style: normal;}

/* Text decoration */
.text-decoration-none {text-decoration: none;}
.text-decoration-underline {text-decoration: underline;}
.text-decoration-line-through {text-decoration: line-through;}

/* Text wrapping */
.text-wrap {white-space: normal;}
.text-nowrap {white-space: nowrap;}

/* Text break */
.text-break {
    word-wrap: break-word;
    word-break: break-word;
}

/* Line height */
.lh-1 {line-height: 1;}
.lh-sm {line-height: 1.25;}
.lh-base {line-height: 1.5;}
.lh-lg {line-height: 2;}

/* Font size */
.fs-1 {font-size: 2.5rem;}
.fs-2 {font-size: 2rem;}
.fs-3 {font-size: 1.75rem;}
.fs-4 {font-size: 1.5rem;}
.fs-5 {font-size: 1.25rem;}
.fs-6 {font-size: 1rem;}

/* Text colors */
.text-primary {color: #007bff;}
.text-secondary {color: #6c757d;}
.text-success {color: #28a745;}
.text-danger {color: #dc3545;}
.text-warning {color: #ffc107;}
.text-info {color: #17a2b8;}
.text-light {color: #f8f9fa;}
.text-dark {color: #343a40;}
.text-muted {color: #6c757d;}
.text-white {color: #fff;}
.text-black {color: #000;}

/* Background colors */
.bg-primary {background-color: #007bff;}
.bg-secondary {background-color: #6c757d;}
.bg-success {background-color: #28a745;}
.bg-danger {background-color: #dc3545;}
.bg-warning {background-color: #ffc107;}
.bg-info {background-color: #17a2b8;}
.bg-light {background-color: #f8f9fa;}
.bg-dark {background-color: #343a40;}
.bg-white {background-color: #fff;}
.bg-transparent {background-color: transparent;}

/* Text overflow */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Word breaking */
.word-break-all {word-break: break-all;}
.word-break-word {word-break: break-word;}
.word-break-keep {word-break: keep-all;}

/* Letter spacing */
.ls-tight {letter-spacing: -0.025em;}
.ls-normal {letter-spacing: 0;}
.ls-wide {letter-spacing: 0.025em;}
.ls-wider {letter-spacing: 0.05em;}
.ls-widest {letter-spacing: 0.1em;}

/* Text shadow */
.text-shadow {text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);}
.text-shadow-sm {text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
.text-shadow-lg {text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.text-shadow-none {text-shadow: none;}

/* Selection color */
::selection {
    background-color: #007bff;
    color: white;
}

::-moz-selection {
    background-color: #007bff;
    color: white;
}

/* Link styles */
.link-primary {
    color: #007bff;
    text-decoration: none;
}
.link-primary:hover {
    color: #0056b3;
    text-decoration: underline;
}

.link-secondary {
    color: #6c757d;
    text-decoration: none;
}
.link-secondary:hover {
    color: #545b62;
    text-decoration: underline;
}

/* List styles */
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-inline {
    list-style: none;
    padding-left: 0;
}
.list-inline-item {
    display: inline-block;
}
.list-inline-item:not(:last-child) {
    margin-right: 1rem;
}

/* Display headings */
.display-1 {
    font-size: 5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-2 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-3 {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-5 {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
}
.display-6 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

/* Lead text */
.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Small text */
.small {
    font-size: 0.875rem;
}

/* Mark text */
.mark {
    background-color: #fff3cd;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}

/* Code text */
.code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    color: #d63384;
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}

/* Blockquote */
.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    border-left: 0.25rem solid #dee2e6;
    padding-left: 1rem;
}

.blockquote-footer {
    margin-top: -1rem;
    margin-bottom: 1rem;
    font-size: 0.875em;
    color: #6c757d;
}

/* Initialism */
.initialism {
    font-size: 0.875em;
    text-transform: uppercase;
}

/* User select */
.user-select-all {user-select: all;}
.user-select-auto {user-select: auto;}
.user-select-none {user-select: none;}

/* Pointer events */
.pe-none {pointer-events: none;}
.pe-auto {pointer-events: auto;}

/* Visibility */
.visible {visibility: visible;}
.invisible {visibility: hidden;}