/* Utility Classes */
        .hidden {display: none !important}
        .uppers {text-transform: uppercase;}

        .flex-space-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .bg-chocolate {background-color: var(--color-chocolate);--color-shadows: light-dark(oklch(from var(--color-chocolate) l c h / 15%), var(--color-chocolate));}
        .bg-orange {background-color: var(--color-orange);--color-shadows: light-dark(oklch(from var(--color-chocolate) l c h / 15%), var(--color-chocolate));}
        .bg-blue {background-color: var(--color-blue)}
        .bg-teal {background-color: var(--color-teal)}
        .bg-faded-blue {background-color: var(--color-faded-blue)}
        .bg-khaki {background-color: var(--color-khaki)}
        .bg-DB-fifteen {background-color: var(--color-DB-fifteen)}
        .bg-none {background-color: var(--color-none)}

        .disabled {cursor: not-allowed}

        .padding-one {padding: 1rem}
        .padding-left-quarter {padding-left: calc(var(--primary-radius-and-padding) / 4)}
        .padding-left-half {padding-left: var(--primary-radius-and-padding-half)}
        .padding-left-none {padding-left: 0}
        .padding-bottom-half {padding-bottom: var(--primary-radius-and-padding-half)}
        .padding-bottom-none {padding-bottom: 0}
        
        .padding-top-half {padding-top: var(--primary-radius-and-padding-half)}
        .padding-top-none {padding-top: 0}

        .padding-right-full {padding-right: var(--primary-radius-and-padding)}
        .padding-right-half {padding-right: var(--primary-radius-and-padding-half)}
        .padding-right-quarter {padding-right: calc(var(--primary-radius-and-padding) / 4)}

        .margin-left-full {margin-left: var(--primary-radius-and-padding)}
        .margin-left-one {margin-left: 1rem}
        .margin-left-half {margin-left: .5rem}
        .margin-left-auto {margin-left: auto}
        .margin-left-none {margin-left: 0}

        .margin-right-one {margin-right: 1rem}
        .margin-right-half {margin-right: .5rem}
        .margin-right-eighth {margin-right: calc(var(--primary-radius-and-padding) / 8)}
        .margin-right-full {margin-right: var(--primary-radius-and-padding)}
        .margins-primary {margin: var(--primary-radius-and-padding)}

        .margin-bottom-none,
        p.margin-bottom-none {margin-bottom: 0}
        .margin-bottom-half {margin-bottom: var(--primary-radius-and-padding-half)}

        .margin-top-none {margin-top: 0}
        .margin-top-eighth {margin-top: calc(var(--primary-radius-and-padding) / 8)}
        .margin-top-quarter {margin-top: calc(var(--primary-radius-and-padding) / 4)}
        .margin-top-half {margin-top: var(--primary-radius-and-padding-half)}
        .margin-top-full {margin-top: var(--primary-radius-and-padding)}
        .margin-bottom-full {margin-bottom: var(--primary-radius-and-padding)}

        .text-full{color: var(--color-full)}
        .text-red{color: var(--color-red)}
        .text-green{color: var(--color-green)}
        .text-chocolate{color: var(--color-chocolate)}
        .text-blue{color: var(--color-blue)}
        .text-dark-blue{color: var(--color-dark-blue)}
        .text-dark-blue-80 {color: oklch(from var(--color-dark-blue) l c h / 80%)}
        .text-orange{color: var(--color-orange)}
        .text-orange-brighter {color: light-dark(oklch(from var(--color-orange) calc(l - .075) c h), oklch(from var(--color-orange) calc(l + .15) c h))}
        .text-khaki{color: var(--color-khaki)}
        .text-faded-blue{color: var(--color-faded-blue)}
        .text-yellow,
        .text-yellow i {color: light-dark(oklch(from var(--color-orange) calc(l + .1) c h), oklch(from var(--color-orange) calc(l + .15) c h));}

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

        .text-nowrap {white-space: nowrap;}
        .text-wrap-anywhere {overflow-wrap: anywhere}

        .text-small {font-size: var(--font-size-small);}
        .font-smallest,
        .text-smallest {font-size: var(--font-size-smallest);}
        .text-primary {font-size: var(--font-size-primary);}
        .text-large {font-size: var(--font-size-large);}
        .text-larger {font-size: var(--font-size-larger);}
        .text-largest {font-size: var(--font-size-largest);}

        .justify-self-center {justify-self: center}

        .text-thicker {font-weight: 500}
        .text-midweight {font-weight: 600}
        .text-bold {font-weight: 700}
        .text-bolder {font-weight: 800}
        .text-boldest {font-weight: 900}

        .text-icon-align-center {display:flex; align-items:center}

        .inline-icon-text {
            color: oklch(from var(--color-dark-blue) l c h / 70%);
            display: grid;
            grid-template-columns: 1.75rem auto;
            align-items: center
        }
        .inline-icon-text .icon-small {margin-top:-4px}

        .width-max-content {max-width: max-content}
        .width-full {width: 100%}

        .emoji-wrapper {
            font-family: "Noto Color Emoji", sans-serif;
            font-weight: 400;
            font-style: normal
        }

        .demo-item-disabled { /* fake it til ya make it */
            pointer-events: none;  
            cursor: not-allowed
        }
        .flip-horizontal {transform: rotate(180deg)}

        .margin-bag::before{
            content: '%';
            margin-left: .4rem;
            font-weight: 700;
            font-size: .6rem;
            position: absolute;
            margin-top: .35rem
        }

        .currency-prepend::before {content: '$'}
        .percent-append::after {content: '%'}

        .orange-border-1 {border: 1px solid var(--color-orange)}
            kbd.orange-border-1 {border-color: oklch(from var(--color-orange) l c h / 55%)}
        .orange-border-2,
        .card.alternate {border: 2px solid var(--color-orange)}
        .orange-dashed-border-2 {border: 2px dashed var(--color-orange)}
        .red-border-1 {border: 1px solid var(--color-red)}
        .red-border-2 {border: 2px solid var(--color-red)}
        .blue-border-1 {border: 1px solid var(--color-blue)}
        .blue-border-2 {border: 2px solid var(--color-blue)}
        .green-border-1 {border: 1px solid var(--color-green)}
        .green-border-2 {border: 2px solid var(--color-green)}

        .border-top-left-primary{border-top-left-radius: var(--primary-radius-and-padding)}

        .width-max-content {width: max-content;}

        .dragging {
            opacity: .5;
            box-shadow: var(--shadow-large-base) var(--color-shadows);
            cursor: grabbing;
            }

        .fit-content {width: fit-content}

        .intro-helper {
            padding-bottom: var(--primary-radius-and-padding-half);
            margin-bottom: var(--primary-radius-and-padding-half);
            border-bottom: var(--border-divider);
        }

        .filtered-append::after {
            content: ' (filtered)';
            color: var(--color-orange);
            font-weight: 500
        }