@bakung-ui/bakung.css/css/_utilities.css

A modern, lightweight, zero-JS composable HTML-UI library designed for those who build on desktop and aim for mobile

/*************************
######################
>>> TABLE OF CONTENTS:
######################

## Utilities
### Appearance
  * Background
    - colors
    - opacity
  * Border
    - colors
    - opacity
    - radius
    - width
  * Cursors
  * Text
    - colors
    - text opacity
    - text-*
  * Views
    - fade
    - shadow
    - opacity
  * Visibilities
    - invisible
    - visible

### Layout
  * Dimensions
    - height
    - width
    - scale
    - size
    - auto grow textarea
  * Displays
    - displays
    - flex-*
    - grid-*
    - overflow
    - flip
    - rotate
    - clearfix
  * Positions
    - float*
    - position*
    - inset*
    - top, right, bottom, left
    - align*
    - justify*
    - vertical*
    - stretch
    - Offset
    - Order
  * Spaces
    - gap
    - column gap
    - row gap
    - margin
    - padding
    - grid*
  * Index
  
### Typography & Font
  * Header
  * Subheader & Subtext
  * Drop caps (initial letter)
  * Font size, weight, style
  * Text align, transform, decoration, wrap, muted, truncate
  * Line height
  * Text wrap
    
### Interactions
  * pointer-events-none
  * txt-select-all
  * txt-select-auto
  * txt-select-none
  * overscroll-behavior-contain
  * lazy render
    
### @Container

### @Media screen
  
*************************/

@layer ui {
  /*
  ## Utilities
  */
  
  /*
  ### Appearance
  */
  
  /**************** Background ****************/
  .bg-none {
    background: none;
  }

  .bg-transparent {
    background: transparent;
  }

  /*** Background colors ***/
  .bg-white {background-color: white}

  .bg-accent {background-color: var(--accent-color); }

  .bg-base-5 {background-color: var(--color-base-5); }
  .bg-base-6 {background-color: var(--color-base-6); }
  .bg-base-7 {background-color: var(--color-base-7); }
  .bg-base-8 {background-color: var(--color-base-8); }
  .bg-base-9 {background-color: var(--color-base-9); }
  .bg-base-10 {background-color: var(--color-base-10); }
  .bg-base-20 {background-color: var(--color-base-20); }
  .bg-base-30 {background-color: var(--color-base-30); }
  .bg-base-40 {background-color: var(--color-base-40); }
  .bg-base-50 {background-color: var(--color-base-50); }
  .bg-base-60 {background-color: var(--color-base-60); }
  .bg-base-70 {background-color: var(--color-base-70); }
  .bg-base-80 {background-color: var(--color-base-80); }
  .bg-base-90 {background-color: var(--color-base-90); }

  .bg-low-5 {background-color: var(--color-low-5); }
  .bg-low-10 {background-color: var(--color-low-10); }
  .bg-low-20 {background-color: var(--color-low-20); }
  .bg-low-30 {background-color: var(--color-low-30); }
  .bg-low-40 {background-color: var(--color-low-40); }
  .bg-low-50 {background-color: var(--color-low-50); }
  .bg-low-60 {background-color: var(--color-low-60); }
  .bg-low-70 {background-color: var(--color-low-70); }
  .bg-low-80 {background-color: var(--color-low-80); }
  .bg-low-90 {background-color: var(--color-low-90); }

  .bg-normal-5 {background-color: var(--color-normal-5); }
  .bg-normal-10 {background-color: var(--color-normal-10); }
  .bg-normal-20 {background-color: var(--color-normal-20); }
  .bg-normal-30 {background-color: var(--color-normal-30); }
  .bg-normal-40 {background-color: var(--color-normal-40); }
  .bg-normal-50 {background-color: var(--color-normal-50); }
  .bg-normal-60 {background-color: var(--color-normal-60); }
  .bg-normal-70 {background-color: var(--color-normal-70); }
  .bg-normal-80 {background-color: var(--color-normal-80); }
  .bg-normal-90 {background-color: var(--color-normal-90); }

  .bg-important-5 {background-color: var(--color-important-5); }
  .bg-important-10 {background-color: var(--color-important-10); }
  .bg-important-20 {background-color: var(--color-important-20); }
  .bg-important-30 {background-color: var(--color-important-30); }
  .bg-important-40 {background-color: var(--color-important-40); }
  .bg-important-50 {background-color: var(--color-important-50); }
  .bg-important-60 {background-color: var(--color-important-60); }
  .bg-important-70 {background-color: var(--color-important-70); }
  .bg-important-80 {background-color: var(--color-important-80); }
  .bg-important-90 {background-color: var(--color-important-90); }

  .bg-critical-5 {background-color: var(--color-critical-5); }
  .bg-critical-10 {background-color: var(--color-critical-10); }
  .bg-critical-20 {background-color: var(--color-critical-20); }
  .bg-critical-30 {background-color: var(--color-critical-30); }
  .bg-critical-40 {background-color: var(--color-critical-40); }
  .bg-critical-50 {background-color: var(--color-critical-50); }
  .bg-critical-60 {background-color: var(--color-critical-60); }
  .bg-critical-70 {background-color: var(--color-critical-70); }
  .bg-critical-80 {background-color: var(--color-critical-80); }
  .bg-critical-90 {background-color: var(--color-critical-90); }

  .bg-success-5 {background-color: var(--color-success-5); }
  .bg-success-10 {background-color: var(--color-success-10); }
  .bg-success-20 {background-color: var(--color-success-20); }
  .bg-success-30 {background-color: var(--color-success-30); }
  .bg-success-40 {background-color: var(--color-success-40); }
  .bg-success-50 {background-color: var(--color-success-50); }
  .bg-success-60 {background-color: var(--color-success-60); }
  .bg-success-70 {background-color: var(--color-success-70); }
  .bg-success-80 {background-color: var(--color-success-80); }
  .bg-success-90 {background-color: var(--color-success-90); }

  .bg-info-5 {background-color: var(--color-info-5); }
  .bg-info-10 {background-color: var(--color-info-10); }
  .bg-info-20 {background-color: var(--color-info-20); }
  .bg-info-30 {background-color: var(--color-info-30); }
  .bg-info-40 {background-color: var(--color-info-40); }
  .bg-info-50 {background-color: var(--color-info-50); }
  .bg-info-60 {background-color: var(--color-info-60); }
  .bg-info-70 {background-color: var(--color-info-70); }
  .bg-info-80 {background-color: var(--color-info-80); }
  .bg-info-90 {background-color: var(--color-info-90); }

  .bg-caution-5 {background-color: var(--color-caution-5); }
  .bg-caution-10 {background-color: var(--color-caution-10); }
  .bg-caution-20 {background-color: var(--color-caution-20); }
  .bg-caution-30 {background-color: var(--color-caution-30); }
  .bg-caution-40 {background-color: var(--color-caution-40); }
  .bg-caution-50 {background-color: var(--color-caution-50); }
  .bg-caution-60 {background-color: var(--color-caution-60); }
  .bg-caution-70 {background-color: var(--color-caution-70); }
  .bg-caution-80 {background-color: var(--color-caution-80); }
  .bg-caution-90 {background-color: var(--color-caution-90); }

  .bg-warning-5 {background-color: var(--color-warning-5); }
  .bg-warning-10 {background-color: var(--color-warning-10); }
  .bg-warning-20 {background-color: var(--color-warning-20); }
  .bg-warning-30 {background-color: var(--color-warning-30); }
  .bg-warning-40 {background-color: var(--color-warning-40); }
  .bg-warning-50 {background-color: var(--color-warning-50); }
  .bg-warning-60 {background-color: var(--color-warning-60); }
  .bg-warning-70 {background-color: var(--color-warning-70); }
  .bg-warning-80 {background-color: var(--color-warning-80); }
  .bg-warning-90 {background-color: var(--color-warning-90); }

  .bg-error-5 {background-color: var(--color-error-5); }
  .bg-error-10 {background-color: var(--color-error-10); }
  .bg-error-20 {background-color: var(--color-error-20); }
  .bg-error-30 {background-color: var(--color-error-30); }
  .bg-error-40 {background-color: var(--color-error-40); }
  .bg-error-50 {background-color: var(--color-error-50); }
  .bg-error-60 {background-color: var(--color-error-60); }
  .bg-error-70 {background-color: var(--color-error-70); }
  .bg-error-80 {background-color: var(--color-error-80); }
  .bg-error-90 {background-color: var(--color-error-90); }

  .bg-danger-5 {background-color: var(--color-danger-5); }
  .bg-danger-10 {background-color: var(--color-danger-10); }
  .bg-danger-20 {background-color: var(--color-danger-20); }
  .bg-danger-30 {background-color: var(--color-danger-30); }
  .bg-danger-40 {background-color: var(--color-danger-40); }
  .bg-danger-50 {background-color: var(--color-danger-50); }
  .bg-danger-60 {background-color: var(--color-danger-60); }
  .bg-danger-70 {background-color: var(--color-danger-70); }
  .bg-danger-80 {background-color: var(--color-danger-80); }
  .bg-danger-90 {background-color: var(--color-danger-90); }

  /*** Background opacity ***/
  .bg-opacity-\.25 {
    --bg-opacity: 0.25;
  }

  .bg-opacity-\.50 {
    --bg-opacity: 0.5;
  }

  .bg-opacity-\.75 {
    --bg-opacity: 0.75;
  }

  .bg-opacity-1 {
    --bg-opacity: 1;
  }

  /**************** Border ****************/
  .border {
    border: 0 var(--controls--border-style) var(--controls--border-color, var(--border-color-control));
    border-width: var(--controls--border-width);
  }
  
  /**************** Border colors ****************/
  .border-color-unset {border-color: unset;}
  .border-color-base-5 {border-color: var(--color-base-5); }
  .border-color-base-6 {border-color: var(--color-base-6); }
  .border-color-base-7 {border-color: var(--color-base-7); }
  .border-color-base-8 {border-color: var(--color-base-8); }
  .border-color-base-9 {border-color: var(--color-base-9); }
  .border-color-base-10 {border-color: var(--color-base-10); }
  .border-color-base-20 {border-color: var(--color-base-20); }
  .border-color-base-30 {border-color: var(--color-base-30); }
  .border-color-base-40 {border-color: var(--color-base-40); }
  .border-color-base-50 {border-color: var(--color-base-50); }
  .border-color-base-60 {border-color: var(--color-base-60); }
  .border-color-base-70 {border-color: var(--color-base-70); }
  .border-color-base-80 {border-color: var(--color-base-80); }
  .border-color-base-90 {border-color: var(--color-base-90); }

  .border-color-low-5 {border-color: var(--color-low-5); }
  .border-color-low-10 {border-color: var(--color-low-10); }
  .border-color-low-20 {border-color: var(--color-low-20); }
  .border-color-low-30 {border-color: var(--color-low-30); }
  .border-color-low-40 {border-color: var(--color-low-40); }
  .border-color-low-50 {border-color: var(--color-low-50); }
  .border-color-low-60 {border-color: var(--color-low-60); }
  .border-color-low-70 {border-color: var(--color-low-70); }
  .border-color-low-80 {border-color: var(--color-low-80); }
  .border-color-low-90 {border-color: var(--color-low-90); }

  .border-color-normal-5 {border-color: var(--color-normal-5); }
  .border-color-normal-10 {border-color: var(--color-normal-10); }
  .border-color-normal-20 {border-color: var(--color-normal-20); }
  .border-color-normal-30 {border-color: var(--color-normal-30); }
  .border-color-normal-40 {border-color: var(--color-normal-40); }
  .border-color-normal-50 {border-color: var(--color-normal-50); }
  .border-color-normal-60 {border-color: var(--color-normal-60); }
  .border-color-normal-70 {border-color: var(--color-normal-70); }
  .border-color-normal-80 {border-color: var(--color-normal-80); }
  .border-color-normal-90 {border-color: var(--color-normal-90); }

  .border-color-important-5 {border-color: var(--color-important-5); }
  .border-color-important-10 {border-color: var(--color-important-10); }
  .border-color-important-20 {border-color: var(--color-important-20); }
  .border-color-important-30 {border-color: var(--color-important-30); }
  .border-color-important-40 {border-color: var(--color-important-40); }
  .border-color-important-50 {border-color: var(--color-important-50); }
  .border-color-important-60 {border-color: var(--color-important-60); }
  .border-color-important-70 {border-color: var(--color-important-70); }
  .border-color-important-80 {border-color: var(--color-important-80); }
  .border-color-important-90 {border-color: var(--color-important-90); }

  .border-color-critical-5 {border-color: var(--color-critical-5); }
  .border-color-critical-10 {border-color: var(--color-critical-10); }
  .border-color-critical-20 {border-color: var(--color-critical-20); }
  .border-color-critical-30 {border-color: var(--color-critical-30); }
  .border-color-critical-40 {border-color: var(--color-critical-40); }
  .border-color-critical-50 {border-color: var(--color-critical-50); }
  .border-color-critical-60 {border-color: var(--color-critical-60); }
  .border-color-critical-70 {border-color: var(--color-critical-70); }
  .border-color-critical-80 {border-color: var(--color-critical-80); }
  .border-color-critical-90 {border-color: var(--color-critical-90); }

  .border-color-success-5 {border-color: var(--color-success-5); }
  .border-color-success-10 {border-color: var(--color-success-10); }
  .border-color-success-20 {border-color: var(--color-success-20); }
  .border-color-success-30 {border-color: var(--color-success-30); }
  .border-color-success-40 {border-color: var(--color-success-40); }
  .border-color-success-50 {border-color: var(--color-success-50); }
  .border-color-success-60 {border-color: var(--color-success-60); }
  .border-color-success-70 {border-color: var(--color-success-70); }
  .border-color-success-80 {border-color: var(--color-success-80); }
  .border-color-success-90 {border-color: var(--color-success-90); }

  .border-color-info-5 {border-color: var(--color-info-5); }
  .border-color-info-10 {border-color: var(--color-info-10); }
  .border-color-info-20 {border-color: var(--color-info-20); }
  .border-color-info-30 {border-color: var(--color-info-30); }
  .border-color-info-40 {border-color: var(--color-info-40); }
  .border-color-info-50 {border-color: var(--color-info-50); }
  .border-color-info-60 {border-color: var(--color-info-60); }
  .border-color-info-70 {border-color: var(--color-info-70); }
  .border-color-info-80 {border-color: var(--color-info-80); }
  .border-color-info-90 {border-color: var(--color-info-90); }

  .border-color-caution-5 {border-color: var(--color-caution-5); }
  .border-color-caution-10 {border-color: var(--color-caution-10); }
  .border-color-caution-20 {border-color: var(--color-caution-20); }
  .border-color-caution-30 {border-color: var(--color-caution-30); }
  .border-color-caution-40 {border-color: var(--color-caution-40); }
  .border-color-caution-50 {border-color: var(--color-caution-50); }
  .border-color-caution-60 {border-color: var(--color-caution-60); }
  .border-color-caution-70 {border-color: var(--color-caution-70); }
  .border-color-caution-80 {border-color: var(--color-caution-80); }
  .border-color-caution-90 {border-color: var(--color-caution-90); }

  .border-color-warning-5 {border-color: var(--color-warning-5); }
  .border-color-warning-10 {border-color: var(--color-warning-10); }
  .border-color-warning-20 {border-color: var(--color-warning-20); }
  .border-color-warning-30 {border-color: var(--color-warning-30); }
  .border-color-warning-40 {border-color: var(--color-warning-40); }
  .border-color-warning-50 {border-color: var(--color-warning-50); }
  .border-color-warning-60 {border-color: var(--color-warning-60); }
  .border-color-warning-70 {border-color: var(--color-warning-70); }
  .border-color-warning-80 {border-color: var(--color-warning-80); }
  .border-color-warning-90 {border-color: var(--color-warning-90); }

  .border-color-error-5 {border-color: var(--color-error-5); }
  .border-color-error-10 {border-color: var(--color-error-10); }
  .border-color-error-20 {border-color: var(--color-error-20); }
  .border-color-error-30 {border-color: var(--color-error-30); }
  .border-color-error-40 {border-color: var(--color-error-40); }
  .border-color-error-50 {border-color: var(--color-error-50); }
  .border-color-error-60 {border-color: var(--color-error-60); }
  .border-color-error-70 {border-color: var(--color-error-70); }
  .border-color-error-80 {border-color: var(--color-error-80); }
  .border-color-error-90 {border-color: var(--color-error-90); }

  .border-color-danger-5 {border-color: var(--color-danger-5); }
  .border-color-danger-10 {border-color: var(--color-danger-10); }
  .border-color-danger-20 {border-color: var(--color-danger-20); }
  .border-color-danger-30 {border-color: var(--color-danger-30); }
  .border-color-danger-40 {border-color: var(--color-danger-40); }
  .border-color-danger-50 {border-color: var(--color-danger-50); }
  .border-color-danger-60 {border-color: var(--color-danger-60); }
  .border-color-danger-70 {border-color: var(--color-danger-70); }
  .border-color-danger-80 {border-color: var(--color-danger-80); }
  .border-color-danger-90 {border-color: var(--color-danger-90); }


  /**************** Border opacity ****************/
  .border-opacity-\.25 {
    --border-opacity: 0.25;
  }

  .border-opacity-\.50 {
    --border-opacity: 0.5;
  }

  .border-opacity-\.75 {
    --border-opacity: 0.75;
  }

  .border-opacity-1 {
    --border-opacity: 1;
  }

  /**************** Border radius ****************/
  .borders-radius-unset {
    border-radius: unset;
  }
  .border-top-left-radius-unset {
    border-top-left-radius: unset;
  }
  .border-top-right-radius-unset {
    border-top-right-radius: unset;
  }
  .border-bottom-left-radius-unset {
    border-bottom-left-radius: unset;
  }
  .border-bottom-right-radius-unset {
    border-bottom-right-radius: unset;
  }

  .borders-radius-\.25 {
    border-radius: .25rem;
  }
  .borders-radius-\.50 {
    border-radius: .5rem;
  }
  .borders-radius-\.75 {
    border-radius: .75rem;
  }
  .borders-radius-1 {
    border-radius: 1rem;
  }

  .border-top-left-radius-\.25 {
    border-top-left-radius: .25rem;
  }
  .border-top-left-radius-\.50 {
    border-top-left-radius: .5rem;
  }
  .border-top-left-radius-\.75 {
    border-top-left-radius: .75rem;
  }
  .border-top-left-radius-1 {
    border-top-left-radius: 1rem;
  }

  .border-top-right-radius-\.25 {
    border-top-right-radius: .25rem;
  }
  .border-top-right-radius-\.50 {
    border-top-right-radius: .5rem;
  }
  .border-top-right-radius-\.75 {
    border-top-right-radius: .75rem;
  }
  .border-top-right-radius-1 {
    border-top-right-radius: 1rem;
  }

  .border-bottom-left-radius-\.25 {
    border-bottom-left-radius: .25rem;
  }
  .border-bottom-left-radius-\.50 {
    border-bottom-left-radius: .5rem;
  }
  .border-bottom-left-radius-\.75 {
    border-bottom-left-radius: .75rem;
  }
  .border-bottom-left-radius-1 {
    border-bottom-left-radius: 1rem;
  }

  .border-bottom-right-radius-\.25 {
    border-bottom-right-radius: .25rem;
  }
  .border-bottom-right-radius-\.50 {
    border-bottom-right-radius: .5rem;
  }
  .border-bottom-right-radius-\.75 {
    border-bottom-right-radius: .75rem;
  }
  .border-bottom-right-radius-1 {
    border-bottom-right-radius: 1rem;
  }

  .borders-radius-50\% {
    border-radius: 50%;
  }

  /**************** Border width ****************/
  .borders-width-unset {
    border: unset;
  }
  .borders-width-\.25 {
    border-width: .25rem;
  }
  .borders-width-\.50 {
    border-width: .5rem;
  }
  .borders-width-\.75 {
    border-width: .75rem;
  }
  .borders-width-1 {
    border-width: 1rem;
  }

  .border-top-width-\.25 {
    border-top-width: .25rem;
  }

  .border-right-width-\.25 {
    border-right-width: .25rem;
  }

  .border-bottom-width-\.25 {
    border-bottom-width: .25rem;
  }

  .border-left-width-\.25 {
    border-left-width: .25rem;
  }

  .border-top-width-\.50 {
    border-top-width: .50rem;
  }

  .border-right-width-\.50 {
    border-right-width: .50rem;
  }

  .border-bottom-width-\.50 {
    border-bottom-width: .50rem;
  }

  .border-left-width-\.50 {
    border-left-width: .50rem;
  }

  .border-top-width-\.75 {
    border-top-width: .75rem;
  }

  .border-right-width-\.75 {
    border-right-width: .75rem;
  }

  .border-bottom-width-\.75 {
    border-bottom-width: .75rem;
  }

  .border-left-width-\.75 {
    border-left-width: .75rem;
  }

  .border-top-width-1 {
    border-top-width: 1rem;
  }

  .border-right-width-1 {
    border-right-width: 1rem;
  }

  .border-bottom-width-1 {
    border-bottom-width: 1rem;
  }

  .border-left-width-1 {
    border-left-width: 1rem;
  }

  /**************** Cursors ****************/
.cursor-default {cursor: default;}
.cursor-help {cursor: help;}
.cursor-pointer {cursor: pointer ;}
.cursor-progress {cursor: progress;}
.cursor-wait {cursor: wait;}
.cursor-alias {cursor: alias;}
.cursor-not-allowed {cursor: not-allowed;}

  /**************** Text colors ****************/
  .txt-white {color: white; }
  
  .txt-accent {color: var(--accent-color); }
  
  .txt-base-5 {color: var(--color-base-5); }
  .txt-base-10 {color: var(--color-base-10); }
  .txt-base-20 {color: var(--color-base-20); }
  .txt-base-30 {color: var(--color-base-30); }
  .txt-base-40 {color: var(--color-base-40); }
  .txt-base-50 {color: var(--color-base-50);}
  .txt-base-60 {color: var(--color-base-60); }
  .txt-base-70 {color: var(--color-base-70); }
  .txt-base-80 {color: var(--color-base-80); }
  .txt-base-90 {color: var(--color-base-90); }

  .txt-low-5 {color: var(--color-low-5); }
  .txt-low-10 {color: var(--color-low-10); }
  .txt-low-20 {color: var(--color-low-20); }
  .txt-low-30 {color: var(--color-low-30); }
  .txt-low-40 {color: var(--color-low-40); }
  .txt-low-50 {color: var(--color-low-50); }
  .txt-low-60 {color: var(--color-low-60); }
  .txt-low-70 {color: var(--color-low-70); }
  .txt-low-80 {color: var(--color-low-80); }
  .txt-low-90 {color: var(--color-low-90); }

  .txt-normal-5 {color: var(--color-normal-5); }
  .txt-normal-10 {color: var(--color-normal-10); }
  .txt-normal-20 {color: var(--color-normal-20); }
  .txt-normal-30 {color: var(--color-normal-30); }
  .txt-normal-40 {color: var(--color-normal-40); }
  .txt-normal-50 {color: var(--color-normal-50); }
  .txt-normal-60 {color: var(--color-normal-60); }
  .txt-normal-70 {color: var(--color-normal-70); }
  .txt-normal-80 {color: var(--color-normal-80); }
  .txt-normal-90 {color: var(--color-normal-90); }

  .txt-important-5 {color: var(--color-important-5); }
  .txt-important-10 {color: var(--color-important-10); }
  .txt-important-20 {color: var(--color-important-20); }
  .txt-important-30 {color: var(--color-important-30); }
  .txt-important-40 {color: var(--color-important-40); }
  .txt-important-50 {color: var(--color-important-50); }
  .txt-important-60 {color: var(--color-important-60); }
  .txt-important-70 {color: var(--color-important-70); }
  .txt-important-80 {color: var(--color-important-80); }
  .txt-important-90 {color: var(--color-important-90); }

  .txt-critical-5 {color: var(--color-critical-5); }
  .txt-critical-10 {color: var(--color-critical-10); }
  .txt-critical-20 {color: var(--color-critical-20); }
  .txt-critical-30 {color: var(--color-critical-30); }
  .txt-critical-40 {color: var(--color-critical-40); }
  .txt-critical-50 {color: var(--color-critical-50); }
  .txt-critical-60 {color: var(--color-critical-60); }
  .txt-critical-70 {color: var(--color-critical-70); }
  .txt-critical-80 {color: var(--color-critical-80); }
  .txt-critical-90 {color: var(--color-critical-90); }

  .txt-success-5 {color: var(--color-success-5); }
  .txt-success-10 {color: var(--color-success-10); }
  .txt-success-20 {color: var(--color-success-20); }
  .txt-success-30 {color: var(--color-success-30); }
  .txt-success-40 {color: var(--color-success-40); }
  .txt-success-50 {color: var(--color-success-50); }
  .txt-success-60 {color: var(--color-success-60); }
  .txt-success-70 {color: var(--color-success-70); }
  .txt-success-80 {color: var(--color-success-80); }
  .txt-success-90 {color: var(--color-success-90); }

  .txt-info-5 {color: var(--color-info-5); }
  .txt-info-10 {color: var(--color-info-10); }
  .txt-info-20 {color: var(--color-info-20); }
  .txt-info-30 {color: var(--color-info-30); }
  .txt-info-40 {color: var(--color-info-40); }
  .txt-info-50 {color: var(--color-info-50); }
  .txt-info-60 {color: var(--color-info-60); }
  .txt-info-70 {color: var(--color-info-70); }
  .txt-info-80 {color: var(--color-info-80); }
  .txt-info-90 {color: var(--color-info-90); }

  .txt-caution-5 {color: var(--color-caution-5); }
  .txt-caution-10 {color: var(--color-caution-10); }
  .txt-caution-20 {color: var(--color-caution-20); }
  .txt-caution-30 {color: var(--color-caution-30); }
  .txt-caution-40 {color: var(--color-caution-40); }
  .txt-caution-50 {color: var(--color-caution-50); }
  .txt-caution-60 {color: var(--color-caution-60); }
  .txt-caution-70 {color: var(--color-caution-70); }
  .txt-caution-80 {color: var(--color-caution-80); }
  .txt-caution-90 {color: var(--color-caution-90); }

  .txt-warning-5 {color: var(--color-warning-5); }
  .txt-warning-10 {color: var(--color-warning-10); }
  .txt-warning-20 {color: var(--color-warning-20); }
  .txt-warning-30 {color: var(--color-warning-30); }
  .txt-warning-40 {color: var(--color-warning-40); }
  .txt-warning-50 {color: var(--color-warning-50); }
  .txt-warning-60 {color: var(--color-warning-60); }
  .txt-warning-70 {color: var(--color-warning-70); }
  .txt-warning-80 {color: var(--color-warning-80); }
  .txt-warning-90 {color: var(--color-warning-90); }

  .txt-error-5 {color: var(--color-error-5); }
  .txt-error-10 {color: var(--color-error-10); }
  .txt-error-20 {color: var(--color-error-20); }
  .txt-error-30 {color: var(--color-error-30); }
  .txt-error-40 {color: var(--color-error-40); }
  .txt-error-50 {color: var(--color-error-50); }
  .txt-error-60 {color: var(--color-error-60); }
  .txt-error-70 {color: var(--color-error-70); }
  .txt-error-80 {color: var(--color-error-80); }
  .txt-error-90 {color: var(--color-error-90); }

  .txt-danger-5 {color: var(--color-danger-5); }
  .txt-danger-10 {color: var(--color-danger-10); }
  .txt-danger-20 {color: var(--color-danger-20); }
  .txt-danger-30 {color: var(--color-danger-30); }
  .txt-danger-40 {color: var(--color-danger-40); }
  .txt-danger-50 {color: var(--color-danger-50); }
  .txt-danger-60 {color: var(--color-danger-60); }
  .txt-danger-70 {color: var(--color-danger-70); }
  .txt-danger-80 {color: var(--color-danger-80); }
  .txt-danger-90 {color: var(--color-danger-90); }

  /**************** Text opacity ****************/
  .txt-opacity-\.25 {
    --txt-opacity: 0.25;
  }

  .txt-opacity-\.50 {
    --txt-opacity: 0.5;
  }

  .txt-opacity-\.75 {
    --txt-opacity: 0.75;
  }

  .txt-opacity-1 {
    --txt-opacity: 1;
  }
  
  /**************** Views ****************/
  .fade {
    filter: brightness(3);
  }

  .shadow-none {
    box-shadow: none;
  }

  .shadow-float {
    box-shadow: var(--shadow-float);
  }

  .shadow-float-alt-1 {
    filter: var(--shadow-float-alt-1);
  }
  
  .shadow-clickable {
    box-shadow: var(--shadow-clickable);
  }

  .shadow-border {
    filter: var(--shadow-border);
  }

  .opacity-\.25 {
    opacity: 0.25;
  }

  .opacity-\.50 {
    opacity: 0.5;
  }

  .opacity-\.75 {
    opacity: 0.75;
  }

  .opacity-1 {
    opacity: 1;
  }
  
  /**************** Visibilities ****************/
  
  /*
  ### Layout
  */
  
  /**************** Dimension ****************/
  .height-25\% {
    height: 25%;
  }

  .height-50\% {
    height: 50%;
  }

  .height-75\% {
    height: 75%;
  }

  .height-10\% {
    height: 100%;
  }

  .height-\.25 {
    height: .25rem;
  }

  .height-\.50 {
    height: .5rem;
  }

  .height-\.75 {
    height: .75rem;
  }

  .height-1 {
    height: 1rem;
  }

  .height-1\.25 {
    height: 1.25rem;
  }

  .height-1\.50 {
    height:  1.5rem;
  }

  .height-1\.75 {
    height: 1.75rem;
  }

  .height-2 {
    height: 2rem;
  }

  .height-2\.50 {
    height: 2.5rem;
  }

  .height-3 {
    height: 3rem;
  }

  .width-25\% {
    width: 25%;
  }

  .width-50\% {
    width: 50%;
  }

  .width-75\% {
    width: 75%;
  }

  .width-80\% {
    width: 80%;
  }

  .width-90\% {
    width: 90%;
  }

  .width-10\% {
    width: 100%;
  }

  .width-\.25 {
    width: .25rem;
  }

  .width-\.50 {
    width: .5rem;
  }

  .width-\.75 {
    width: .75rem;
  }

  .width-1 {
    width: 1rem;
  }

  .width-1\.25 {
    width: 1.25rem;
  }

  .width-1\.50 {
    width:  1.5rem;
  }

  .width-1\.75 {
    width: 1.75rem;
  }

  .width-2 {
    width: 2rem;
  }

  .width-2\.50 {
    width: 2.5rem;
  }

  .width-3 {
    width: 3rem;
  }
  
  /* INFO: Filling availablespace */
  .width-stretch {
    width: stretch;
  }

  .scale-\.25 {
    scale: .25;
  }

  .scale-\.50 {
    scale: .5;
  }

  .scale-\.75 {
    scale: .75;
  }

  .scale-1\.25 {
    scale: 1.25;
  }

  .scale-1\.50 {
    scale: 1.5;
  }

  .scale-2 {
    scale: 2;
  }

  .scale-3 {
    scale: 3;
  }

  .size-\.25 {
    height: .25rem;
    width: .25rem;
  }

  .size-\.50 {
    height: .5rem;
    width: .5rem;
  }

  .size-\.75 {
    height: .75rem;
    width: .75rem;
  }

  .size-1 {
    height: 1rem;
    width: 1rem;
  }

  .size-1\.25 {
    height: 1.25rem;
    width: 1.25rem;
  }

  .size-1\.50 {
    height: 1.5rem;
    width: 1.5rem;
  }

  .size-1\.75 {
    height: 1.75rem;
    width: 1.75rem;
  }

  .size-2 {
    height: 2rem;
    width: 2rem;
  }

  .size-2\.25 {
    height: 2.25rem;
    width: .25rem;
  }

  .size-2\.50 {
    height: 2.5rem;
    width: 2.5rem;
  }

  .size-2\.75 {
    height: 2.75rem;
    width: 2.75rem;
  }

  .size-3 {
    height: 3rem;
    width: 3rem;
  }
  
  .textarea-autogrow {
    field-sizing: content;
    min-height: 3lh;
  }
  
  /**************** Displays ****************/
  .display-none {display: none;}
  .display-block {display: block;}
  .display-inline {display: inline;}
  .display-inline-block {display: inline-block;}
  .display-inline-flex {display: inline-flex;}
  .display-inline-grid {display: inline-grid;}

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

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

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

  .flex-direction-column-reverse {
    flex-direction: column-reverse;
  }

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

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

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

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

  .flex-sizes-even > * {
    flex: 1 1 auto;
  }

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

  .flex-grow-none {
    flex-grow: 0;
  }

  .flex-grow-inherit {
    flex-grow: inherit;
  }

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

  .flex-shrink-none {
    flex-shrink: 0;
  }

  .flex-shrink-inherit {
    flex-shrink: inherit;
  }

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

  .flex-basis-max-content {
    flex-basis: max-content;
  }

  .flex-basis-min-content {
    flex-basis: min-content;
  }

  .flex-basis-fit-content {
    flex-basis: fit-content;
  }
  
  .display-grid-row {
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(1rem, max-content));
    grid-auto-flow: column;
    gap: .5rem;
  }

  .display-grid-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3rem, max-content));
    grid-auto-flow: row;
    gap: .25rem;
  }

  .overflow-auto {
    overflow: auto;
  }
  
  .overflow-x-auto {
    overflow-x: auto;
  }
  
  .overflow--y-auto {
    overflow-y: auto;
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }
  
  .flip {
    scale: -1;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-135 {
    rotate: 135deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }
  
  .clearfix::after {
    clear: both;
    content: "";
    display: table;
  }
  
  /**************** Positions ****************/
  .float-start {
    float: inline-start;
  }
  .float-end {
    float: right;
  }
  .float-center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  
  .position-relative {
    position: relative;
  }
  
  .position-absolute {
    position: absolute;
  }

  .position-fixed {
    position: fixed;
    z-index: var(--z-index-fixed);
  }

  .position-sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: var(--z-index-sticky);
  }
  
  .inset-top-left {
    inset: 0 auto auto 0;
  }
  
  .inset-top-middle {
    inset: 0 50% auto auto;
    translate: -50%;
  }
  
  .inset-top-right {
    inset: 0 0 auto auto;
  }
  
  .inset-right-middle {
    inset: 50% 0 auto auto;
    translate: 0 -50%;
  }
  
  .inset-bottom-right{
    inset: auto 0 0 auto;
  }
  
  .inset-bottom-middle {
    inset: auto 50% 0 auto;
    translate: 50%;
  }
  
  .inset-bottom-left {
    inset: auto auto 0 0;
  }
  
  .inset-left-middle {
    inset: 50% auto auto 0;
    translate: 0 -50%;
  }
  
  .inset-center {
    inset: 50% auto auto 50%;
    translate: -50% -50%;
  }
  
  .top {
    top: 0;
  }

  .right {
    right: 0;
  }

  .bottom {
    bottom: 0;
  }

  .left {
    left: 0;
  }

  .mid-horizontal {
    left: 50%;
    translate: -50%;
  }

  .mid-vertical {
    top: 50%;
    translate: 0 -50%;
  }
  
  .align-items-baseline {
    align-items: baseline;
  }

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

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

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

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

  .align-content-normal {
    align-content: normal;
  }

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

  .align-content-flex-start {
    align-content: flex-start;
  }

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

  .align-content-inset-top-middle {
    align-content: space-around;
  }

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

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

  .align-self-start {
    align-self: start;
  }

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

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

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

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

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

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

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

  .justify-items-normal {
    justify-items: normal;
  }

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

  .justify-items-start {
    justify-items: start;
  }

  .justify-items-end {
    justify-items: end;
  }

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

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

  .vertical-align-top {
    vertical-align: top;
  }

  .vertical-align-middle {
    vertical-align: middle;
  }

  .vertical-align-bottom {
    vertical-align: bottom;
  }

  .vertical-align-text-bottom {
    vertical-align: text-bottom;
  }

  .vertical-align-text-top {
    vertical-align: text-top;
  }

  .stretch::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;
  }

  /**************** 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%;
  }

  /**************** Order ****************/
  .order-first {
    order: -1 !important;
  }

  .order-0 {
    order: 0 !important;
  }

  .order-1 {
    order: 1 !important;
  }

  .order-2 {
    order: 2 !important;
  }

  .order-3 {
    order: 3 !important;
  }

  .order-4 {
    order: 4 !important;
  }

  .order-5 {
    order: 5 !important;
  }

  .order-last {
    order: 6 !important;
  }

  /**************** Spaces ****************/
  .gap-unset {
    gap: unset;
  }

  .gap-\.25 {
    gap: .25rem;
  }

  .gap-\.50 {
    gap: .5rem;
  }

  .gap-\.75 {
    gap: .75rem;
  }

  .gap-1 {
    gap: 1rem;
  }

  .gap-1\.25 {
    gap: 1.25rem;
  }

  .gap-1\.50 {
    gap: 1.5rem;
  }

  .gap-1\.75 {
    gap: 1.75rem;
  }

  .gap-2 {
    gap: 2rem;
  }

  .gap-2\.25 {
    gap: 2.25rem;
  }

  .gap-2\.50 {
    gap: 2.5rem;
  }

  .gap-2\.75 {
    gap: 2.75rem;
  }

  .gap-3 {
    gap: 3rem;
  }

  .column-gap-\.25 {
    column-gap: .25rem;
  }

  .column-gap-\.50 {
    column-gap: .5rem;
  }

  .column-gap-\.75 {
    column-gap: .75rem;
  }

  .column-gap-1 {
    column-gap: 1rem;
  }

  .column-gap-1\.25 {
    column-gap: 1.25rem;
  }

  .column-gap-1\.50 {
    column-gap: 1.5rem;
  }

  .column-gap-1\.75 {
    column-gap: 1.75rem;
  }

  .column-gap-2 {
    column-gap: 2rem;
  }

  .column-gap-2\.25 {
    column-gap: 2.25rem;
  }

  .column-gap-2\.50 {
    column-gap: 2.5rem;
  }

  .column-gap-2\.75 {
    column-gap: 2.75rem;
  }

  .column-gap-3 {
    column-gap: 3rem;
  }

  .row-gap-\.25 {
    row-gap: .25rem;
  }

  .row-gap-\.50 {
    row-gap: .5rem;
  }

  .row-gap-\.75 {
    row-gap: .75rem;
  }

  .row-gap-1 {
    row-gap: 1rem;
  }

  .row-gap-1\.25 {
    row-gap: 1.25rem;
  }

  .row-gap-1\.50 {
    row-gap: 1.5rem;
  }

  .row-gap-1\.75 {
    row-gap: 1.75rem;
  }

  .row-gap-2 {
    row-gap: 2rem;
  }

  .row-gap-2\.25 {
    row-gap: 2.25rem;
  }

  .row-gap-2\.50 {
    row-gap: 2.5rem;
  }

  .row-gap-2\.75 {
    row-gap: 2.75rem;
  }

  .row-gap-3 {
    row-gap: 3rem;
  }

  .margins-unset {
    margin: unset;
  }
  .margin-top-unset {
    margin-top: unset;
  }
  .margin-right-unset {
    margin-right: unset;
  }
  .margin-bottom-unset {
    margin-bottom: unset;
  }
  .margin-left-unset {
    margin-left: unset;
  }

  .margins-min-\.25 {
    margin: -.25rem;
  }
  .margins-min-\.50 {
    margin: -.5rem;
  }
  .margins-min-\.75 {
    margin: -.75rem;
  }
  .margins-min-1 {
    margin: -1rem;
  }
  .margins-min-1\.25 {
    margin: -1.25rem;
  }
  .margins-min-1\.50 {
    margin: -1.5rem;
  }
  .margins-min-1\.75 {
    margin: -1.75rem;
  }
  .margins-min-2 {
    margin: -2rem;
  }
  .margins-min-2\.25 {
    margin: -2.25rem;
  }
  .margins-min-2\.50 {
    margin: -2.5rem;
  }
  .margins-min-2\.75 {
    margin: -2.75rem;
  }
  .margins-min-3 {
    margin: -3rem;
  }

  .margin-top-min-\.25 {
    margin-top: -.25rem;
  }
  .margin-right-min-\.25 {
    margin-right: -.25rem;
  }
  .margin-bottom-min-\.25 {
    margin-bottom: -.25rem;
  }
  .margin-left-min-\.25 {
    margin-left: -.25rem;
  }

  .margin-top-min-\.50 {
    margin-top: -.50rem;
  }
  .margin-right-min-\.50 {
    margin-right: -.50rem;
  }
  .margin-bottom-min-\.50 {
    margin-bottom: -.50rem;
  }
  .margin-left-min-\.50 {
    margin-left: -.50rem;
  }

  .margin-top-min-\.75 {
    margin-top: -.75rem;
  }
  .margin-right-min-\.75 {
    margin-right: -.75rem;
  }
  .margin-bottom-min-\.75 {
    margin-bottom: -.75rem;
  }
  .margin-left-min-\.75 {
    margin-left: -.75rem;
  }

  .margin-top-min-1 {
    margin-top: -1rem;
  }
  .margin-right-min-1 {
    margin-right: -1rem;
  }
  .margin-bottom-min-1 {
    margin-bottom: -1rem;
  }
  .margin-left-min-1 {
    margin-left: -1rem;
  }

  .margin-top-min-1\.25 {
    margin-top: -1.25rem;
  }
  .margin-right-min-1\.25 {
    margin-right: -1.25rem;
  }
  .margin-bottom-min-1\.25 {
    margin-bottom: -1.25rem;
  }
  .margin-left-min-1\.25 {
    margin-left: -1.25rem;
  }

  .margin-top-min-1\.50 {
    margin-top: -1.50rem;
  }
  .margin-right-min-1\.50 {
    margin-right: -1.50rem;
  }
  .margin-bottom-min-1\.50 {
    margin-bottom: -1.50rem;
  }
  .margin-left-min-1\.50 {
    margin-left: -1.50rem;
  }

  .margin-top-min-1\.75 {
    margin-top: -1.75rem;
  }
  .margin-right-min-1\.75 {
    margin-right: -1.75rem;
  }
  .margin-bottom-min-1\.75 {
    margin-bottom: -1.75rem;
  }
  .margin-left-min-1\.75 {
    margin-left: -1.75rem;
  }

  .margin-top-min-2 {
    margin-top: -2rem;
  }
  .margin-right-min-2 {
    margin-right: -2rem;
  }
  .margin-bottom-min-2 {
    margin-bottom: -2rem;
  }
  .margin-left-min-2 {
    margin-left: -2rem;
  }

  .margin-top-min-2\.25 {
    margin-top: -2.25rem;
  }
  .margin-right-min-2\.25 {
    margin-right: -2.25rem;
  }
  .margin-bottom-min-2\.25 {
    margin-bottom: -2.25rem;
  }
  .margin-left-min-2\.25 {
    margin-left: -2.25rem;
  }

  .margin-top-min-2\.50 {
    margin-top: -2.50rem;
  }
  .margin-right-min-2\.50 {
    margin-right: -2.50rem;
  }
  .margin-bottom-min-2\.50 {
    margin-bottom: -2.50rem;
  }
  .margin-left-min-2\.50 {
    margin-left: -2.50rem;
  }

  .margin-top-min-2\.75 {
    margin-top: -2.75rem;
  }
  .margin-right-min-2\.75 {
    margin-right: -2.75rem;
  }
  .margin-bottom-min-2\.75 {
    margin-bottom: -2.75rem;
  }
  .margin-left-min-2\.75 {
    margin-left: -2.75rem;
  }

  .margin-top-min-3 {
    margin-top: -3rem;
  }
  .margin-right-min-3 {
    margin-right: -3rem;
  }
  .margin-bottom-min-3 {
    margin-bottom: -3rem;
  }
  .margin-left-min-3 {
    margin-left: -3rem;
  }

  .margins-auto {
    margin: auto;
  }
  .margins-block-auto {
    margin-block: auto;
  }
  .margins-inline-auto {
    margin-inline: auto;
  }
  .margin-top-auto {
    margin-top: auto;
  }
  .margin-right-auto {
    margin-right: auto;
  }
  .margin-bottom-auto {
    margin-bottom: auto;
  }
  .margin-left-auto {
    margin-left: auto;
  }

  .margins-\.25 {
    margin: .25rem;
  }
  .margins-\.50 {
    margin: .5rem;
  }
  .margins-\.75 {
    margin: .75rem;
  }
  .margins-1 {
    margin: 1rem;
  }
  .margins-1\.25 {
    margin: 1.25rem;
  }
  .margins-1\.50 {
    margin: 1.5rem;
  }
  .margins-1\.75 {
    margin: 1.75rem;
  }
  .margins-2 {
    margin: 2rem;
  }
  .margins-2\.25 {
    margin: 2.25rem;
  }
  .margins-2\.50 {
    margin: 2.5rem;
  }
  .margins-2\.75 {
    margin: 2.75rem;
  }
  .margins-3 {
    margin: 3rem;
  }

  .margin-top-\.25 {
    margin-top: .25rem;
  }
  .margin-right-\.25 {
    margin-right: .25rem;
  }
  .margin-bottom-\.25 {
    margin-bottom: .25rem;
  }
  .margin-left-\.25 {
    margin-left: .25rem;
  }

  .margin-top-\.50 {
    margin-top: .50rem;
  }
  .margin-right-\.50 {
    margin-right: .50rem;
  }
  .margin-bottom-\.50 {
    margin-bottom: .50rem;
  }
  .margin-left-\.50 {
    margin-left: .50rem;
  }

  .margin-top-\.75 {
    margin-top: .75rem;
  }
  .margin-right-\.75 {
    margin-right: .75rem;
  }
  .margin-bottom-\.75 {
    margin-bottom: .75rem;
  }
  .margin-left-\.75 {
    margin-left: .75rem;
  }

  .margin-top-1 {
    margin-top: 1rem;
  }
  .margin-right-1 {
    margin-right: 1rem;
  }
  .margin-bottom-1 {
    margin-bottom: 1rem;
  }
  .margin-left-1 {
    margin-left: 1rem;
  }

  .margin-top-1\.25 {
    margin-top: 1.25rem;
  }
  .margin-right-1\.25 {
    margin-right: 1.25rem;
  }
  .margin-bottom-1\.25 {
    margin-bottom: 1.25rem;
  }
  .margin-left-1\.25 {
    margin-left: 1.25rem;
  }

  .margin-top-1\.50 {
    margin-top: 1.50rem;
  }
  .margin-right-1\.50 {
    margin-right: 1.50rem;
  }
  .margin-bottom-1\.50 {
    margin-bottom: 1.50rem;
  }
  .margin-left-1\.50 {
    margin-left: 1.50rem;
  }

  .margin-top-1\.75 {
    margin-top: 1.75rem;
  }
  .margin-right-1\.75 {
    margin-right: 1.75rem;
  }
  .margin-bottom-1\.75 {
    margin-bottom: 1.75rem;
  }
  .margin-left-1\.75 {
    margin-left: 1.75rem;
  }

  .margin-top-2 {
    margin-top: 2rem;
  }
  .margin-right-2 {
    margin-right: 2rem;
  }
  .margin-bottom-2 {
    margin-bottom: 2rem;
  }
  .margin-left-2 {
    margin-left: 2rem;
  }

  .margin-top-2\.25 {
    margin-top: 2.25rem;
  }
  .margin-right-2\.25 {
    margin-right: 2.25rem;
  }
  .margin-bottom-2\.25 {
    margin-bottom: 2.25rem;
  }
  .margin-left-2\.25 {
    margin-left: 2.25rem;
  }

  .margin-top-2\.50 {
    margin-top: 2.50rem;
  }
  .margin-right-2\.50 {
    margin-right: 2.50rem;
  }
  .margin-bottom-2\.50 {
    margin-bottom: 2.50rem;
  }
  .margin-left-2\.50 {
    margin-left: 2.50rem;
  }

  .margin-top-2\.75 {
    margin-top: 2.75rem;
  }
  .margin-right-2\.75 {
    margin-right: 2.75rem;
  }
  .margin-bottom-2\.75 {
    margin-bottom: 2.75rem;
  }
  .margin-left-2\.75 {
    margin-left: 2.75rem;
  }

  .margin-top-3 {
    margin-top: 3rem;
  }
  .margin-right-3 {
    margin-right: 3rem;
  }
  .margin-bottom-3 {
    margin-bottom: 3rem;
  }
  .margin-left-3 {
    margin-left: 3rem;
  }

  .paddings-unset {
    padding: unset;
  }
  .padding-top-unset {
    padding-top: unset;
  }
  .padding-right-unset {
    padding-right: unset;
  }
  .padding-bottom-unset {
    padding-bottom: unset;
  }
  .padding-left-unset {
    padding-left: unset;
  }

  .padding-top-min-\.25 {
    padding-top: -.25rem;
  }
  .padding-right-min-\.25 {
    padding-right: -.25rem;
  }
  .padding-bottom-min-\.25 {
    padding-bottom: -.25rem;
  }
  .padding-left-min-\.25 {
    padding-left: -.25rem;
  }

  .padding-top-min-\.50 {
    padding-top: -.50rem;
  }
  .padding-right-min-\.50 {
    padding-right: -.50rem;
  }
  .padding-bottom-min-\.50 {
    padding-bottom: -.50rem;
  }
  .padding-left-min-\.50 {
    padding-left: -.50rem;
  }

  .padding-top-min-\.75 {
    padding-top: -.75rem;
  }
  .padding-right-min-\.75 {
    padding-right: -.75rem;
  }
  .padding-bottom-min-\.75 {
    padding-bottom: -.75rem;
  }
  .padding-left-min-\.75 {
    padding-left: -.75rem;
  }

  .padding-top-min-1 {
    padding-top: -1rem;
  }
  .padding-right-min-1 {
    padding-right: -1rem;
  }
  .padding-bottom-min-1 {
    padding-bottom: -1rem;
  }
  .padding-left-min-1 {
    padding-left: -1rem;
  }

  .padding-top-min-1\.25 {
    padding-top: -1.25rem;
  }
  .padding-right-min-1\.25 {
    padding-right: -1.25rem;
  }
  .padding-bottom-min-1\.25 {
    padding-bottom: -1.25rem;
  }
  .padding-left-min-1\.25 {
    padding-left: -1.25rem;
  }

  .padding-top-min-1\.50 {
    padding-top: -1.50rem;
  }
  .padding-right-min-1\.50 {
    padding-right: -1.50rem;
  }
  .padding-bottom-min-1\.50 {
    padding-bottom: -1.50rem;
  }
  .padding-left-min-1\.50 {
    padding-left: -1.50rem;
  }

  .padding-top-min-1\.75 {
    padding-top: -1.75rem;
  }
  .padding-right-min-1\.75 {
    padding-right: -1.75rem;
  }
  .padding-bottom-min-1\.75 {
    padding-bottom: -1.75rem;
  }
  .padding-left-min-1\.75 {
    padding-left: -1.75rem;
  }

  .padding-top-min-2 {
    padding-top: -2rem;
  }
  .padding-right-min-2 {
    padding-right: -2rem;
  }
  .padding-bottom-min-2 {
    padding-bottom: -2rem;
  }
  .padding-left-min-2 {
    padding-left: -2rem;
  }

  .padding-top-min-2\.25 {
    padding-top: -2.25rem;
  }
  .padding-right-min-2\.25 {
    padding-right: -2.25rem;
  }
  .padding-bottom-min-2\.25 {
    padding-bottom: -2.25rem;
  }
  .padding-left-min-2\.25 {
    padding-left: -2.25rem;
  }

  .padding-top-min-2\.50 {
    padding-top: -2.50rem;
  }
  .padding-right-min-2\.50 {
    padding-right: -2.50rem;
  }
  .padding-bottom-min-2\.50 {
    padding-bottom: -2.50rem;
  }
  .padding-left-min-2\.50 {
    padding-left: -2.50rem;
  }

  .padding-top-min-2\.75 {
    padding-top: -2.75rem;
  }
  .padding-right-min-2\.75 {
    padding-right: -2.75rem;
  }
  .padding-bottom-min-2\.75 {
    padding-bottom: -2.75rem;
  }
  .padding-left-min-2\.75 {
    padding-left: -2.75rem;
  }

  .padding-top-min-3 {
    padding-top: -3rem;
  }
  .padding-right-min-3 {
    padding-right: -3rem;
  }
  .padding-bottom-min-3 {
    padding-bottom: -3rem;
  }
  .padding-left-min-3 {
    padding-left: -3rem;
  }

  .paddings-\.25 {
    padding: .25rem;
  }
  .paddings-\.50 {
    padding: .5rem;
  }
  .paddings-\.75 {
    padding: .75rem;
  }
  .paddings-1 {
    padding: 1rem;
  }
  .paddings-1\.25 {
    padding: 1.25rem;
  }
  .paddings-1\.50 {
    padding: 1.5rem;
  }
  .paddings-1\.75 {
    padding: 1.75rem;
  }
  .paddings-2 {
    padding: 2rem;
  }
  .paddings-2\.25 {
    padding: 2.25rem;
  }
  .paddings-2\.50 {
    padding: 2.5rem;
  }
  .paddings-2\.75 {
    padding: 2.75rem;
  }
  .paddings-3 {
    padding: 3rem;
  }

  .padding-top-\.25 {
    padding-top: .25rem;
  }
  .padding-right-\.25 {
    padding-right: .25rem;
  }
  .padding-bottom-\.25 {
    padding-bottom: .25rem;
  }
  .padding-left-\.25 {
    padding-left: .25rem;
  }

  .padding-top-\.50 {
    padding-top: .50rem;
  }
  .padding-right-\.50 {
    padding-right: .50rem;
  }
  .padding-bottom-\.50 {
    padding-bottom: .50rem;
  }
  .padding-left-\.50 {
    padding-left: .50rem;
  }

  .padding-top-\.75 {
    padding-top: .75rem;
  }
  .padding-right-\.75 {
    padding-right: .75rem;
  }
  .padding-bottom-\.75 {
    padding-bottom: .75rem;
  }
  .padding-left-\.75 {
    padding-left: .75rem;
  }

  .padding-top-1 {
    padding-top: 1rem;
  }
  .padding-right-1 {
    padding-right: 1rem;
  }
  .padding-bottom-1 {
    padding-bottom: 1rem;
  }
  .padding-left-1 {
    padding-left: 1rem;
  }

  .padding-top-1\.25 {
    padding-top: 1.25rem;
  }
  .padding-right-1\.25 {
    padding-right: 1.25rem;
  }
  .padding-bottom-1\.25 {
    padding-bottom: 1.25rem;
  }
  .padding-left-1\.25 {
    padding-left: 1.25rem;
  }

  .padding-top-1\.50 {
    padding-top: 1.50rem;
  }
  .padding-right-1\.50 {
    padding-right: 1.50rem;
  }
  .padding-bottom-1\.50 {
    padding-bottom: 1.50rem;
  }
  .padding-left-1\.50 {
    padding-left: 1.50rem;
  }

  .padding-top-1\.75 {
    padding-top: 1.75rem;
  }
  .padding-right-1\.75 {
    padding-right: 1.75rem;
  }
  .padding-bottom-1\.75 {
    padding-bottom: 1.75rem;
  }
  .padding-left-1\.75 {
    padding-left: 1.75rem;
  }

  .padding-top-2 {
    padding-top: 2rem;
  }
  .padding-right-2 {
    padding-right: 2rem;
  }
  .padding-bottom-2 {
    padding-bottom: 2rem;
  }
  .padding-left-2 {
    padding-left: 2rem;
  }

  .padding-top-2\.25 {
    padding-top: 2.25rem;
  }
  .padding-right-2\.25 {