/** LAYOUT UTILITY CLASSES **/

/* Text Alignment */
.text-align-center {text-align: center;}
.text-align-left   {text-align: left;}
.text-align-right  {text-align: right;}


/* Position */
.position-absolute {position: absolute;}
.position-fixed    {position: fixed;}
.position-relative {position: relative;}


/* Anchors */
.bottom-0 {bottom: 0;}
.left-0   {left: 0;}
.right-0  {right: 0;}
.top-0    {top: 0;}


/* Display */
.display-block        {display: block;}
.display-none         {display: none;}
.display-flex         {display: flex;}
.display-inline       {display: inline;}
.display-inline-block {display: inline-block;}


/* Opacity */
.opacity-0 {opacity: 0;}
.opacity-1 {opacity: 1;}


/* Size */
.height-100 {height: 100%;}
.width-100  {width: 100%;}


/* Overflow */
.overflow-hidden  {overflow: hidden;}
.overflow-visible {overflow: visible;}


/* White Space */
.white-space-no-wrap {white-space: nowrap;}


/* Alignment */
.align-items-center            {align-items: center;}
.align-items-flex-end          {align-items: flex-end;}
.align-items-flex-start        {align-items: flex-start;}
.justify-content-space-around  {justify-content: space-around;}
.justify-content-space-between {justify-content: space-between;}
.justify-content-center        {justify-content: center;}
.justify-content-flex-end      {justify-content: flex-end;}
.justify-content-flex-start    {justify-content: flex-start;}
.vertical-align-bottom         {vertical-align: bottom;}
.vertical-align-middle         {vertical-align: middle;}
.vertical-align-top            {vertical-align: top;}


/* Z-Index */
.z-index-1 {z-index: 1;}


/* Containers */
.container-sm {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-sm);
}


/* Padding */
.p-0  {padding:        0px;}
.pb-0 {padding-bottom: 0px;}
.pl-0 {padding-left:   0px;}
.pr-0 {padding-right:  0px;}
.pt-0 {padding-top:    0px;}
.py-0 {padding-bottom: 0px; padding-top:   0px;}
.px-0 {padding-left:   0px; padding-right: 0px;}

.p-half  {padding:        var(--space-half);}
.pb-half {padding-bottom: var(--space-half);}
.pl-half {padding-left:   var(--space-half);}
.pr-half {padding-right:  var(--space-half);}
.pt-half {padding-top:    var(--space-half);}
.py-half {padding-bottom: var(--space-half); padding-top:   var(--space-half);}
.px-half {padding-left:   var(--space-half); padding-right: var(--space-half);}

.p-1  {padding:        var(--space-1);}
.pb-1 {padding-bottom: var(--space-1);}
.pl-1 {padding-left:   var(--space-1);}
.pr-1 {padding-right:  var(--space-1);}
.pt-1 {padding-top:    var(--space-1);}
.py-1 {padding-bottom: var(--space-1); padding-top:   var(--space-1);}
.px-1 {padding-left:   var(--space-1); padding-right: var(--space-1);}

.p-1-half  {padding:        var(--space-1-half);}
.pb-1-half {padding-bottom: var(--space-1-half);}
.pl-1-half {padding-left:   var(--space-1-half);}
.pr-1-half {padding-right:  var(--space-1-half);}
.pt-1-half {padding-top:    var(--space-1-half);}
.py-1-half {padding-bottom: var(--space-1-half); padding-top:   var(--space-1-half);}
.px-1-half {padding-left:   var(--space-1-half); padding-right: var(--space-1-half);}

.p-2  {padding:        var(--space-2);}
.pb-2 {padding-bottom: var(--space-2);}
.pl-2 {padding-left:   var(--space-2);}
.pr-2 {padding-right:  var(--space-2);}
.pt-2 {padding-top:    var(--space-2);}
.py-2 {padding-bottom: var(--space-2); padding-top:   var(--space-2);}
.px-2 {padding-left:   var(--space-2); padding-right: var(--space-2);}

.p-3  {padding:        var(--space-3);}
.pb-3 {padding-bottom: var(--space-3);}
.pl-3 {padding-left:   var(--space-3);}
.pr-3 {padding-right:  var(--space-3);}
.pt-3 {padding-top:    var(--space-3);}
.py-3 {padding-bottom: var(--space-3); padding-top:   var(--space-3);}
.px-3 {padding-left:   var(--space-3); padding-right: var(--space-3);}

.p-4  {padding:        var(--space-4);}
.pb-4 {padding-bottom: var(--space-4);}
.pl-4 {padding-left:   var(--space-4);}
.pr-4 {padding-right:  var(--space-4);}
.pt-4 {padding-top:    var(--space-4);}
.py-4 {padding-bottom: var(--space-4); padding-top:   var(--space-4);}
.px-4 {padding-left:   var(--space-4); padding-right: var(--space-4);}

.p-5  {padding:        var(--space-5);}
.pb-5 {padding-bottom: var(--space-5);}
.pl-5 {padding-left:   var(--space-5);}
.pr-5 {padding-right:  var(--space-5);}
.pt-5 {padding-top:    var(--space-5);}
.py-5 {padding-bottom: var(--space-5); padding-top:   var(--space-5);}
.px-5 {padding-left:   var(--space-5); padding-right: var(--space-5);}

.p-6  {padding:        var(--space-6);}
.pb-6 {padding-bottom: var(--space-6);}
.pl-6 {padding-left:   var(--space-6);}
.pr-6 {padding-right:  var(--space-6);}
.pt-6 {padding-top:    var(--space-6);}
.py-6 {padding-bottom: var(--space-6); padding-top:   var(--space-6);}
.px-6 {padding-left:   var(--space-6); padding-right: var(--space-6);}

.p-7  {padding:        var(--space-7);}
.pb-7 {padding-bottom: var(--space-7);}
.pl-7 {padding-left:   var(--space-7);}
.pr-7 {padding-right:  var(--space-7);}
.pt-7 {padding-top:    var(--space-7);}
.py-7 {padding-bottom: var(--space-7); padding-top:   var(--space-7);}
.px-7 {padding-left:   var(--space-7); padding-right: var(--space-7);}

.p-8  {padding:        var(--space-8);}
.pb-8 {padding-bottom: var(--space-8);}
.pl-8 {padding-left:   var(--space-8);}
.pr-8 {padding-right:  var(--space-8);}
.pt-8 {padding-top:    var(--space-8);}
.py-8 {padding-bottom: var(--space-8); padding-top:   var(--space-8);}
.px-8 {padding-left:   var(--space-8); padding-right: var(--space-8);}

.p-9  {padding:        var(--space-9);}
.pb-9 {padding-bottom: var(--space-9);}
.pl-9 {padding-left:   var(--space-9);}
.pr-9 {padding-right:  var(--space-9);}
.pt-9 {padding-top:    var(--space-9);}
.py-9 {padding-bottom: var(--space-9); padding-top:   var(--space-9);}
.px-9 {padding-left:   var(--space-9); padding-right: var(--space-9);}

.p-10  {padding:        var(--space-10);}
.pb-10 {padding-bottom: var(--space-10);}
.pl-10 {padding-left:   var(--space-10);}
.pr-10 {padding-right:  var(--space-10);}
.pt-10 {padding-top:    var(--space-10);}
.py-10 {padding-bottom: var(--space-10); padding-top:   var(--space-10);}
.px-10 {padding-left:   var(--space-10); padding-right: var(--space-10);}


/* Margin */
.m-0  {margin:        0px;}
.mb-0 {margin-bottom: 0px;}
.ml-0 {margin-left:   0px;}
.mr-0 {margin-right:  0px;}
.mt-0 {margin-top:    0px;}
.mv-0 {margin-bottom: 0px; margin-top:   0px;}
.mx-0 {margin-left:   0px; margin-right: 0px;}

.m-half  {margin:        var(--space-half);}
.mb-half {margin-bottom: var(--space-half);}
.ml-half {margin-left:   var(--space-half);}
.mr-half {margin-right:  var(--space-half);}
.mt-half {margin-top:    var(--space-half);}
.mv-half {margin-bottom: var(--space-half); margin-top:   var(--space-half);}
.mx-half {margin-left:   var(--space-half); margin-right: var(--space-half);}

.m-1  {margin:        var(--space-1);}
.mb-1 {margin-bottom: var(--space-1);}
.ml-1 {margin-left:   var(--space-1);}
.mr-1 {margin-right:  var(--space-1);}
.mt-1 {margin-top:    var(--space-1);}
.mv-1 {margin-bottom: var(--space-1); margin-top:   var(--space-1);}
.mx-1 {margin-left:   var(--space-1); margin-right: var(--space-1);}

.m-1-half  {margin:        var(--space-1-half);}
.mb-1-half {margin-bottom: var(--space-1-half);}
.ml-1-half {margin-left:   var(--space-1-half);}
.mr-1-half {margin-right:  var(--space-1-half);}
.mt-1-half {margin-top:    var(--space-1-half);}
.mv-1-half {margin-bottom: var(--space-1-half); margin-top:   var(--space-1-half);}
.mx-1-half {margin-left:   var(--space-1-half); margin-right: var(--space-1-half);}

.m-2  {margin:        var(--space-2);}
.mb-2 {margin-bottom: var(--space-2);}
.ml-2 {margin-left:   var(--space-2);}
.mr-2 {margin-right:  var(--space-2);}
.mt-2 {margin-top:    var(--space-2);}
.mv-2 {margin-bottom: var(--space-2); margin-top:   var(--space-2);}
.mx-2 {margin-left:   var(--space-2); margin-right: var(--space-2);}

.m-3  {margin:        var(--space-3);}
.mb-3 {margin-bottom: var(--space-3);}
.ml-3 {margin-left:   var(--space-3);}
.mr-3 {margin-right:  var(--space-3);}
.mt-3 {margin-top:    var(--space-3);}
.mv-3 {margin-bottom: var(--space-3); margin-top:   var(--space-3);}
.mx-3 {margin-left:   var(--space-3); margin-right: var(--space-3);}

.m-4  {margin:        var(--space-4);}
.mb-4 {margin-bottom: var(--space-4);}
.ml-4 {margin-left:   var(--space-4);}
.mr-4 {margin-right:  var(--space-4);}
.mt-4 {margin-top:    var(--space-4);}
.mv-4 {margin-bottom: var(--space-4); margin-top:   var(--space-4);}
.mx-4 {margin-left:   var(--space-4); margin-right: var(--space-4);}

.m-5  {margin:        var(--space-5);}
.mb-5 {margin-bottom: var(--space-5);}
.ml-5 {margin-left:   var(--space-5);}
.mr-5 {margin-right:  var(--space-5);}
.mt-5 {margin-top:    var(--space-5);}
.mv-5 {margin-bottom: var(--space-5); margin-top:   var(--space-5);}
.mx-5 {margin-left:   var(--space-5); margin-right: var(--space-5);}

.m-6  {margin:        var(--space-6);}
.mb-6 {margin-bottom: var(--space-6);}
.ml-6 {margin-left:   var(--space-6);}
.mr-6 {margin-right:  var(--space-6);}
.mt-6 {margin-top:    var(--space-6);}
.mv-6 {margin-bottom: var(--space-6); margin-top:   var(--space-6);}
.mx-6 {margin-left:   var(--space-6); margin-right: var(--space-6);}

.m-7  {margin:        var(--space-7);}
.mb-7 {margin-bottom: var(--space-7);}
.ml-7 {margin-left:   var(--space-7);}
.mr-7 {margin-right:  var(--space-7);}
.mt-7 {margin-top:    var(--space-7);}
.mv-7 {margin-bottom: var(--space-7); margin-top:   var(--space-7);}
.mx-7 {margin-left:   var(--space-7); margin-right: var(--space-7);}

.m-8  {margin:        var(--space-8);}
.mb-8 {margin-bottom: var(--space-8);}
.ml-8 {margin-left:   var(--space-8);}
.mr-8 {margin-right:  var(--space-8);}
.mt-8 {margin-top:    var(--space-8);}
.mv-8 {margin-bottom: var(--space-8); margin-top:   var(--space-8);}
.mx-8 {margin-left:   var(--space-8); margin-right: var(--space-8);}

.m-9  {margin:        var(--space-9);}
.mb-9 {margin-bottom: var(--space-9);}
.ml-9 {margin-left:   var(--space-9);}
.mr-9 {margin-right:  var(--space-9);}
.mt-9 {margin-top:    var(--space-9);}
.mv-9 {margin-bottom: var(--space-9); margin-top:   var(--space-9);}
.mx-9 {margin-left:   var(--space-9); margin-right: var(--space-9);}

.m-10  {margin:        var(--space-10);}
.mb-10 {margin-bottom: var(--space-10);}
.ml-10 {margin-left:   var(--space-10);}
.mr-10 {margin-right:  var(--space-10);}
.mt-10 {margin-top:    var(--space-10);}
.mv-10 {margin-bottom: var(--space-10); margin-top:   var(--space-10);}
.mx-10 {margin-left:   var(--space-10); margin-right: var(--space-10);}