.inline       { display: inline }
.block        { display: block }
.inline-block { display: inline-block }

.relative { position: relative }
.fixed    { position: fixed }
.absolute { position: absolute }

.top    { top: 0 }
.right  { right: 0 }
.bottom { bottom: 0 }
.left   { left: 0 }

.z-index--1 { z-index: -1 }
.z-index-1 { z-index: 1 }
.z-index-2 { z-index: 2 }
.z-index-3 { z-index: 3 }
.z-index-4 { z-index: 4 }
.z-index-top { z-index: 99 }

.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto   { overflow: auto }
.overflow-x-hidden   { overflow-x: hidden }
.overflow-y-hidden   { overflow-y: hidden }
.overflow-y-visible   { overflow-y: visible }
.overflow-x-auto   { overflow-x: auto }
.overflow-y-auto   { overflow-y: auto }
.overflow-x-scroll   { overflow-x: scroll }
.overflow-y-scroll   { overflow-y: scroll }

.float-left  { float: left }
.float-right { float: right }

.clear:before,
.clear:after {
  content: " ";
  display: table
}

.clear, .clear:after {
  clear: both
}

.mw-100 { max-width: 100% !important }
.w-100, .full-width { width: 100% !important }
.w-auto, .auto-width { width: auto !important }
.h-100, .full-height { height: 100% !important }
.vh-100, .full-screen-height { height: 100vh !important } // NOTE: Use height: auto for Safari compatibility

.text-left   { text-align: left !important }
.text-right  { text-align: right !important }
.text-center { text-align: center !important }
.text-justify { text-align: justify }

.align-baseline { vertical-align: baseline; }
.align-top      { vertical-align: top; }
.align-middle   { vertical-align: middle; }
.align-bottom   { vertical-align: bottom; }
.align-super    { vertical-align: super; }