matcha-theme 1.0.1

package/base/_helpers.scss

@@ -0,0 +1,3019 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Position helpers
+// -----------------------------------------------------------------------------------------------------
+.position-relative {
+    position: relative
+}
+
+.position-absolute {
+    position: absolute
+}
+
+.position-static {
+    position: static
+}
+
+.position-sticky {
+    position: sticky
+}
+
+@media screen and (min-width:600px) {
+    .position-sm-relative {
+        position: relative
+    }
+
+    .position-sm-absolute {
+        position: absolute
+    }
+
+    .position-sm-static {
+        position: static
+    }
+
+    .position-sm-sticky {
+        position: sticky
+    }
+}
+
+@media screen and (min-width:1024px) {
+    .position-md-relative {
+        position: relative
+    }
+
+    .position-md-absolute {
+        position: absolute
+    }
+
+    .position-md-static {
+        position: static
+    }
+
+    .position-md-sticky {
+        position: sticky
+    }
+}
+
+@media screen and (min-width:1440px) {
+    .position-lg-relative {
+        position: relative
+    }
+
+    .position-lg-absolute {
+        position: absolute
+    }
+
+    .position-lg-static {
+        position: static
+    }
+
+    .position-lg-sticky {
+        position: sticky
+    }
+}
+
+@media screen and (min-width:1920px) {
+    .position-xl-relative {
+        position: relative
+    }
+
+    .position-xl-absolute {
+        position: absolute
+    }
+
+    .position-xl-static {
+        position: static
+    }
+
+    .position-xl-sticky {
+        position: sticky
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Absolute position alignment helpers
+// -----------------------------------------------------------------------------------------------------
+.align-top {
+    top: 0
+}
+
+.align-right {
+    right: 0
+}
+
+.align-bottom {
+    bottom: 0
+}
+
+.align-left {
+    left: 0
+}
+
+@media screen and (min-width:600px) {
+    .align-sm-top {
+        top: 0
+    }
+
+    .align-sm-right {
+        right: 0
+    }
+
+    .align-sm-bottom {
+        bottom: 0
+    }
+
+    .align-sm-left {
+        left: 0
+    }
+}
+
+@media screen and (min-width:1024px) {
+    .align-md-top {
+        top: 0
+    }
+
+    .align-md-right {
+        right: 0
+    }
+
+    .align-md-bottom {
+        bottom: 0
+    }
+
+    .align-md-left {
+        left: 0
+    }
+}
+
+@media screen and (min-width:1440px) {
+    .align-lg-top {
+        top: 0
+    }
+
+    .align-lg-right {
+        right: 0
+    }
+
+    .align-lg-bottom {
+        bottom: 0
+    }
+
+    .align-lg-left {
+        left: 0
+    }
+}
+
+@media screen and (min-width:1920px) {
+    .align-xl-top {
+        top: 0
+    }
+
+    .align-xl-right {
+        right: 0
+    }
+
+    .align-xl-bottom {
+        bottom: 0
+    }
+
+    .align-xl-left {
+        left: 0
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Size helpers
+// -----------------------------------------------------------------------------------------------------
+.w-auto {
+    width: auto !important;
+    min-width: auto !important;
+    max-width: auto !important
+}
+
+.h-auto {
+    height: auto !important;
+    min-height: auto !important;
+    max-height: auto !important
+}
+
+.w-264 {
+    width: 264px !important;
+    min-width: 264px !important;
+    max-width: 264px !important
+}
+
+.w-300 {
+    width: 300px !important;
+    min-width: 300px !important;
+    max-width: 300px !important
+}
+
+.w-400 {
+    width: 400px !important;
+    min-width: 400px !important;
+    max-width: 400px !important
+}
+
+.w-500 {
+    width: 500px !important;
+    min-width: 500px !important;
+    max-width: 500px !important
+}
+
+.w-600 {
+    width: 600px !important;
+    min-width: 600px !important;
+    max-width: 600px !important
+}
+
+.h-264 {
+    height: 264px !important;
+    min-height: 264px !important;
+    max-height: 264px !important
+}
+
+.h-300 {
+    height: 300px !important;
+    min-height: 300px !important;
+    max-height: 300px !important
+}
+
+.h-400 {
+    height: 400px !important;
+    min-height: 400px !important;
+    max-height: 400px !important
+}
+
+.h-500 {
+    height: 500px !important;
+    min-height: 500px !important;
+    max-height: 500px !important
+}
+
+.h-600 {
+    height: 600px !important;
+    min-height: 600px !important;
+    max-height: 600px !important
+}
+
+@media only screen and (min-width:600px) {
+    .w-sm-auto {
+        width: auto !important;
+        min-width: auto !important;
+        max-width: auto !important
+    }
+
+    .h-sm-auto {
+        height: auto !important;
+        min-height: auto !important;
+        max-height: auto !important
+    }
+
+    .w-sm-264 {
+        width: 264px !important;
+        min-width: 264px !important;
+        max-width: 264px !important
+    }
+
+    .w-sm-300 {
+        width: 300px !important;
+        min-width: 300px !important;
+        max-width: 300px !important
+    }
+
+    .w-sm-400 {
+        width: 400px !important;
+        min-width: 400px !important;
+        max-width: 400px !important
+    }
+
+    .w-sm-500 {
+        width: 500px !important;
+        min-width: 500px !important;
+        max-width: 500px !important
+    }
+
+    .w-sm-600 {
+        width: 600px !important;
+        min-width: 600px !important;
+        max-width: 600px !important
+    }
+
+    .h-sm-264 {
+        height: 264px !important;
+        min-height: 264px !important;
+        max-height: 264px !important
+    }
+
+    .h-sm-300 {
+        height: 300px !important;
+        min-height: 300px !important;
+        max-height: 300px !important
+    }
+
+    .h-sm-400 {
+        height: 400px !important;
+        min-height: 400px !important;
+        max-height: 400px !important
+    }
+
+    .h-sm-500 {
+        height: 500px !important;
+        min-height: 500px !important;
+        max-height: 500px !important
+    }
+
+    .h-sm-600 {
+        height: 600px !important;
+        min-height: 600px !important;
+        max-height: 600px !important
+    }
+}
+
+@media only screen and (min-width:1024px) {
+    .w-md-auto {
+        width: auto !important;
+        min-width: auto !important;
+        max-width: auto !important
+    }
+
+    .h-md-auto {
+        height: auto !important;
+        min-height: auto !important;
+        max-height: auto !important
+    }
+
+    .w-md-264 {
+        width: 264px !important;
+        min-width: 264px !important;
+        max-width: 264px !important
+    }
+
+    .w-md-300 {
+        width: 300px !important;
+        min-width: 300px !important;
+        max-width: 300px !important
+    }
+
+    .w-md-400 {
+        width: 400px !important;
+        min-width: 400px !important;
+        max-width: 400px !important
+    }
+
+    .w-md-500 {
+        width: 500px !important;
+        min-width: 500px !important;
+        max-width: 500px !important
+    }
+
+    .w-md-600 {
+        width: 600px !important;
+        min-width: 600px !important;
+        max-width: 600px !important
+    }
+
+    .h-md-264 {
+        height: 264px !important;
+        min-height: 264px !important;
+        max-height: 264px !important
+    }
+
+    .h-md-300 {
+        height: 300px !important;
+        min-height: 300px !important;
+        max-height: 300px !important
+    }
+
+    .h-md-400 {
+        height: 400px !important;
+        min-height: 400px !important;
+        max-height: 400px !important
+    }
+
+    .h-md-500 {
+        height: 500px !important;
+        min-height: 500px !important;
+        max-height: 500px !important
+    }
+
+    .h-md-600 {
+        height: 600px !important;
+        min-height: 600px !important;
+        max-height: 600px !important
+    }
+}
+
+@media only screen and (min-width:1440px) {
+    .w-lg-auto {
+        width: auto !important;
+        min-width: auto !important;
+        max-width: auto !important
+    }
+
+    .h-lg-auto {
+        height: auto !important;
+        min-height: auto !important;
+        max-height: auto !important
+    }
+
+    .w-lg-264 {
+        width: 264px !important;
+        min-width: 264px !important;
+        max-width: 264px !important
+    }
+
+    .w-lg-300 {
+        width: 300px !important;
+        min-width: 300px !important;
+        max-width: 300px !important
+    }
+
+    .w-lg-400 {
+        width: 400px !important;
+        min-width: 400px !important;
+        max-width: 400px !important
+    }
+
+    .w-lg-500 {
+        width: 500px !important;
+        min-width: 500px !important;
+        max-width: 500px !important
+    }
+
+    .w-lg-600 {
+        width: 600px !important;
+        min-width: 600px !important;
+        max-width: 600px !important
+    }
+
+    .h-lg-264 {
+        height: 264px !important;
+        min-height: 264px !important;
+        max-height: 264px !important
+    }
+
+    .h-lg-300 {
+        height: 300px !important;
+        min-height: 300px !important;
+        max-height: 300px !important
+    }
+
+    .h-lg-400 {
+        height: 400px !important;
+        min-height: 400px !important;
+        max-height: 400px !important
+    }
+
+    .h-lg-500 {
+        height: 500px !important;
+        min-height: 500px !important;
+        max-height: 500px !important
+    }
+
+    .h-lg-600 {
+        height: 600px !important;
+        min-height: 600px !important;
+        max-height: 600px !important
+    }
+}
+
+@media only screen and (min-width:1920px) {
+    .w-xl-auto {
+        width: auto !important;
+        min-width: auto !important;
+        max-width: auto !important
+    }
+
+    .h-xl-auto {
+        height: auto !important;
+        min-height: auto !important;
+        max-height: auto !important
+    }
+
+    .w-xl-264 {
+        width: 264px !important;
+        min-width: 264px !important;
+        max-width: 264px !important
+    }
+
+    .w-xl-300 {
+        width: 300px !important;
+        min-width: 300px !important;
+        max-width: 300px !important
+    }
+
+    .w-xl-400 {
+        width: 400px !important;
+        min-width: 400px !important;
+        max-width: 400px !important
+    }
+
+    .w-xl-500 {
+        width: 500px !important;
+        min-width: 500px !important;
+        max-width: 500px !important
+    }
+
+    .w-xl-600 {
+        width: 600px !important;
+        min-width: 600px !important;
+        max-width: 600px !important
+    }
+
+    .h-xl-264 {
+        height: 264px !important;
+        min-height: 264px !important;
+        max-height: 264px !important
+    }
+
+    .h-xl-300 {
+        height: 300px !important;
+        min-height: 300px !important;
+        max-height: 300px !important
+    }
+
+    .h-xl-400 {
+        height: 400px !important;
+        min-height: 400px !important;
+        max-height: 400px !important
+    }
+
+    .h-xl-500 {
+        height: 500px !important;
+        min-height: 500px !important;
+        max-height: 500px !important
+    }
+
+    .h-xl-600 {
+        height: 600px !important;
+        min-height: 600px !important;
+        max-height: 600px !important
+    }
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Space helpers
+// -----------------------------------------------------------------------------------------------------
+.m-auto {
+    margin: auto !important
+}
+
+.mt-auto {
+    margin-top: auto !important
+}
+
+.mr-auto {
+    margin-right: auto !important
+}
+
+.mb-auto {
+    margin-bottom: auto !important
+}
+
+.ml-auto {
+    margin-left: auto !important
+}
+
+.mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important
+}
+
+.my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important
+}
+
+@media screen and (min-width:600px) {
+    .mx-sm-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-sm-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+}
+
+@media screen and (min-width:1024px) {
+    .m-md-auto {
+        margin: auto !important
+    }
+
+    .mt-md-auto {
+        margin-top: auto !important
+    }
+
+    .mr-md-auto {
+        margin-right: auto !important
+    }
+
+    .mb-md-auto {
+        margin-bottom: auto !important
+    }
+
+    .ml-md-auto {
+        margin-left: auto !important
+    }
+
+    .mx-md-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-md-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+}
+
+@media screen and (min-width:1440px) {}
+
+@media screen and (min-width:1920px) {
+    .m-xl-auto {
+        margin: auto !important
+    }
+
+    .mt-xl-auto {
+        margin-top: auto !important
+    }
+
+    .mr-xl-auto {
+        margin-right: auto !important
+    }
+
+    .mb-xl-auto {
+        margin-bottom: auto !important
+    }
+
+    .ml-xl-auto {
+        margin-left: auto !important
+    }
+
+    .mx-xl-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-xl-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Style
+// -----------------------------------------------------------------------------------------------------
+// Text format helpers
+.text-decoration-strike,
+.text-strike {
+    text-decoration: line-through !important
+}
+
+.text-decoration-none,
+.text-none {
+    text-decoration: none !important
+}
+
+.text-super {
+    vertical-align: super !important
+}
+
+.text-sub {
+    vertical-align: sub !important
+}
+
+.text-capitalize {
+    text-transform: capitalize !important
+}
+
+.text-lowercase {
+    text-transform: lowercase !important
+}
+
+.text-uppercase {
+    text-transform: uppercase !important
+}
+
+.text-boxed {
+    border-radius: 2px;
+    padding: 4px 8px;
+    margin: 0 8px;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap
+}
+
+.text-truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+
+.text-nowrap {
+    white-space: nowrap
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border helpers
+// -----------------------------------------------------------------------------------------------------
+// none:0 thin:2 thick:4 thicker:8
+.b-0,
+.border-0 {
+    border: 0 solid
+}
+
+.border-top-0,
+.bt-0 {
+    border-top: 0 solid
+}
+
+.border-right-0,
+.br-0 {
+    border-right: 0 solid
+}
+
+.bb-0,
+.border-bottom-0 {
+    border-bottom: 0 solid
+}
+
+.bl-0,
+.border-left-0 {
+    border-left: 0 solid
+}
+
+.border-horizontal-0,
+.bx-0 {
+    border-left: 0 solid;
+    border-right: 0 solid
+}
+
+.border-vertical-0,
+.by-0 {
+    border-top: 0 solid;
+    border-bottom: 0 solid
+}
+
+.b-1,
+.border-1 {
+    border: 1px solid
+}
+
+.border-top-1,
+.bt-1 {
+    border-top: 1px solid
+}
+
+.border-right-1,
+.br-1 {
+    border-right: 1px solid
+}
+
+.bb-1,
+.border-bottom-1 {
+    border-bottom: 1px solid
+}
+
+.bl-1,
+.border-left-1 {
+    border-left: 1px solid
+}
+
+.border-horizontal-1,
+.bx-1 {
+    border-left: 1px solid;
+    border-right: 1px solid
+}
+
+.border-vertical-1,
+.by-1 {
+    border-top: 1px solid;
+    border-bottom: 1px solid
+}
+
+.b-2,
+.border-2 {
+    border: 2px solid
+}
+
+.border-top-2,
+.bt-2 {
+    border-top: 2px solid
+}
+
+.border-right-2,
+.br-2 {
+    border-right: 2px solid
+}
+
+.bb-2,
+.border-bottom-2 {
+    border-bottom: 2px solid
+}
+
+.bl-2,
+.border-left-2 {
+    border-left: 2px solid
+}
+
+.border-horizontal-2,
+.bx-2 {
+    border-left: 2px solid;
+    border-right: 2px solid
+}
+
+.border-vertical-2,
+.by-2 {
+    border-top: 2px solid;
+    border-bottom: 2px solid
+}
+
+.b-3,
+.border-3 {
+    border: 3px solid
+}
+
+.border-top-3,
+.bt-3 {
+    border-top: 3px solid
+}
+
+.border-right-3,
+.br-3 {
+    border-right: 3px solid
+}
+
+.bb-3,
+.border-bottom-3 {
+    border-bottom: 3px solid
+}
+
+.bl-3,
+.border-left-3 {
+    border-left: 3px solid
+}
+
+.border-horizontal-3,
+.bx-3 {
+    border-left: 3px solid;
+    border-right: 3px solid
+}
+
+.border-vertical-3,
+.by-3 {
+    border-top: 3px solid;
+    border-bottom: 3px solid
+}
+
+.b-4,
+.border-4 {
+    border: 4px solid
+}
+
+.border-top-4,
+.bt-4 {
+    border-top: 4px solid
+}
+
+.border-right-4,
+.br-4 {
+    border-right: 4px solid
+}
+
+.bb-4,
+.border-bottom-4 {
+    border-bottom: 4px solid
+}
+
+.bl-4,
+.border-left-4 {
+    border-left: 4px solid
+}
+
+.border-horizontal-4,
+.bx-4 {
+    border-left: 4px solid;
+    border-right: 4px solid
+}
+
+.border-vertical-4,
+.by-4 {
+    border-top: 4px solid;
+    border-bottom: 4px solid
+}
+
+.b-5,
+.border-5 {
+    border: 5px solid
+}
+
+.border-top-5,
+.bt-5 {
+    border-top: 5px solid
+}
+
+.border-right-5,
+.br-5 {
+    border-right: 5px solid
+}
+
+.bb-5,
+.border-bottom-5 {
+    border-bottom: 5px solid
+}
+
+.bl-5,
+.border-left-5 {
+    border-left: 5px solid
+}
+
+.border-horizontal-5,
+.bx-5 {
+    border-left: 5px solid;
+    border-right: 5px solid
+}
+
+.border-vertical-5,
+.by-5 {
+    border-top: 5px solid;
+    border-bottom: 5px solid
+}
+
+.b-6,
+.border-6 {
+    border: 6px solid
+}
+
+.border-top-6,
+.bt-6 {
+    border-top: 6px solid
+}
+
+.border-right-6,
+.br-6 {
+    border-right: 6px solid
+}
+
+.bb-6,
+.border-bottom-6 {
+    border-bottom: 6px solid
+}
+
+.bl-6,
+.border-left-6 {
+    border-left: 6px solid
+}
+
+.border-horizontal-6,
+.bx-6 {
+    border-left: 6px solid;
+    border-right: 6px solid
+}
+
+.border-vertical-6,
+.by-6 {
+    border-top: 6px solid;
+    border-bottom: 6px solid
+}
+
+.b-7,
+.border-7 {
+    border: 7px solid
+}
+
+.border-top-7,
+.bt-7 {
+    border-top: 7px solid
+}
+
+.border-right-7,
+.br-7 {
+    border-right: 7px solid
+}
+
+.bb-7,
+.border-bottom-7 {
+    border-bottom: 7px solid
+}
+
+.bl-7,
+.border-left-7 {
+    border-left: 7px solid
+}
+
+.border-horizontal-7,
+.bx-7 {
+    border-left: 7px solid;
+    border-right: 7px solid
+}
+
+.border-vertical-7,
+.by-7 {
+    border-top: 7px solid;
+    border-bottom: 7px solid
+}
+
+.b-8,
+.border-8 {
+    border: 8px solid
+}
+
+.border-top-8,
+.bt-8 {
+    border-top: 8px solid
+}
+
+.border-right-8,
+.br-8 {
+    border-right: 8px solid
+}
+
+.bb-8,
+.border-bottom-8 {
+    border-bottom: 8px solid
+}
+
+.bl-8,
+.border-left-8 {
+    border-left: 8px solid
+}
+
+.border-horizontal-8,
+.bx-8 {
+    border-left: 8px solid;
+    border-right: 8px solid
+}
+
+.border-vertical-8,
+.by-8 {
+    border-top: 8px solid;
+    border-bottom: 8px solid
+}
+
+.border-none {
+    border: none !important
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Radius helpers
+// -----------------------------------------------------------------------------------------------------
+.border-radius-0,
+.border-radius-b-0,
+.border-radius-l-0,
+.border-radius-r-0,
+.border-radius-t-0 {
+    border-radius: 0 !important
+}
+
+.border-radius-1 {
+    border-radius: 1px !important
+}
+
+.border-radius-b-1 {
+    border-radius: 0 0 1px 1px !important
+}
+
+.border-radius-t-1 {
+    border-radius: 1px 1px 0 0 !important
+}
+
+.border-radius-l-1 {
+    border-radius: 1px 0 0 1px !important
+}
+
+.border-radius-r-1 {
+    border-radius: 0 1px 1px 0 !important
+}
+
+.border-radius-2 {
+    border-radius: 2px !important
+}
+
+.border-radius-b-2 {
+    border-radius: 0 0 2px 2px !important
+}
+
+.border-radius-t-2 {
+    border-radius: 2px 2px 0 0 !important
+}
+
+.border-radius-l-2 {
+    border-radius: 2px 0 0 2px !important
+}
+
+.border-radius-r-2 {
+    border-radius: 0 2px 2px 0 !important
+}
+
+.border-radius-3 {
+    border-radius: 3px !important
+}
+
+.border-radius-b-3 {
+    border-radius: 0 0 3px 3px !important
+}
+
+.border-radius-t-3 {
+    border-radius: 3px 3px 0 0 !important
+}
+
+.border-radius-l-3 {
+    border-radius: 3px 0 0 3px !important
+}
+
+.border-radius-r-3 {
+    border-radius: 0 3px 3px 0 !important
+}
+
+.border-radius-4 {
+    border-radius: 4px !important
+}
+
+.border-radius-b-4 {
+    border-radius: 0 0 4px 4px !important
+}
+
+.border-radius-t-4 {
+    border-radius: 4px 4px 0 0 !important
+}
+
+.border-radius-l-4 {
+    border-radius: 4px 0 0 4px !important
+}
+
+.border-radius-r-4 {
+    border-radius: 0 4px 4px 0 !important
+}
+
+.border-radius-5 {
+    border-radius: 5px !important
+}
+
+.border-radius-b-5 {
+    border-radius: 0 0 5px 5px !important
+}
+
+.border-radius-t-5 {
+    border-radius: 5px 5px 0 0 !important
+}
+
+.border-radius-l-5 {
+    border-radius: 5px 0 0 5px !important
+}
+
+.border-radius-r-5 {
+    border-radius: 0 5px 5px 0 !important
+}
+
+.border-radius-6 {
+    border-radius: 6px !important
+}
+
+.border-radius-b-6 {
+    border-radius: 0 0 6px 6px !important
+}
+
+.border-radius-t-6 {
+    border-radius: 6px 6px 0 0 !important
+}
+
+.border-radius-l-6 {
+    border-radius: 6px 0 0 6px !important
+}
+
+.border-radius-r-6 {
+    border-radius: 0 6px 6px 0 !important
+}
+
+.border-radius-7 {
+    border-radius: 7px !important
+}
+
+.border-radius-b-7 {
+    border-radius: 0 0 7px 7px !important
+}
+
+.border-radius-t-7 {
+    border-radius: 7px 7px 0 0 !important
+}
+
+.border-radius-l-7 {
+    border-radius: 7px 0 0 7px !important
+}
+
+.border-radius-r-7 {
+    border-radius: 0 7px 7px 0 !important
+}
+
+.border-radius-8 {
+    border-radius: 8px !important
+}
+
+.border-radius-b-8 {
+    border-radius: 0 0 8px 8px !important
+}
+
+.border-radius-t-8 {
+    border-radius: 8px 8px 0 0 !important
+}
+
+.border-radius-l-8 {
+    border-radius: 8px 0 0 8px !important
+}
+
+.border-radius-r-8 {
+    border-radius: 0 8px 8px 0 !important
+}
+
+.border-radius-circle {
+    border-radius: 999px !important
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Overflow helpers
+// -----------------------------------------------------------------------------------------------------
+.overflow-auto {
+    overflow: auto
+}
+
+.overflow-scroll {
+    overflow: scroll
+}
+
+.overflow-hidden {
+    overflow: hidden
+}
+
+.overflow-overlay {
+    overflow: overlay
+}
+
+.overflow-x-auto {
+    overflow-x: auto;
+    overflow-y: hidden
+}
+
+.overflow-x-scroll {
+    overflow-x: scroll;
+    overflow-y: hidden
+}
+
+.overflow-x-hidden {
+    overflow-x: hidden;
+    overflow-y: hidden
+}
+
+.overflow-x-overlay {
+    overflow-x: overlay;
+    overflow-y: hidden
+}
+
+.overflow-y-auto {
+    overflow-y: auto;
+    overflow-x: hidden
+}
+
+.overflow-y-scroll {
+    overflow-y: scroll;
+    overflow-x: hidden
+}
+
+.overflow-y-hidden {
+    overflow-y: hidden;
+    overflow-x: hidden
+}
+
+.overflow-y-overlay {
+    overflow-y: overlay;
+    overflow-x: hidden
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Display helpers
+// -----------------------------------------------------------------------------------------------------
+.d-none {
+    display: none !important;
+}
+
+.d-inline {
+    display: inline !important;
+}
+
+.d-inline-block {
+    display: inline-block !important;
+}
+
+.d-block {
+    display: block !important;
+}
+
+.d-grid {
+    display: grid !important;
+}
+
+.d-table {
+    display: table !important;
+}
+
+.d-table-cell {
+    display: table-cell !important;
+}
+
+.d-table-row {
+    display: table-row !important;
+}
+
+.d-inline-flex {
+    display: inline-flex !important;
+}
+
+.d-flex {
+    display: flex !important;
+}
+
+.d-flex-center-center {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+}
+
+.d-flex-row {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.d-flex-column {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.d-flex-row-reverse {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+}
+
+.d-flex-column-reverse {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+}
+
+.d-flex-nowrap {
+    flex-wrap: nowrap !important;
+}
+
+.d-flex-wrap {
+    flex-wrap: wrap !important;
+}
+
+.d-flex-align-center {
+    display: flex !important;
+    align-items: center !important;
+}
+
+.d-flex-align-start {
+    display: flex !important;
+    align-items: flex-start !important;
+}
+
+.d-flex-align-end {
+    display: flex !important;
+    align-items: flex-end !important;
+}
+
+.d-flex-align-self-end {
+    align-self: flex-end !important;
+}
+
+.d-flex-align-self-start {
+    align-self: flex-start !important;
+}
+
+.d-flex-center {
+    display: flex !important;
+    justify-content: center !important;
+}
+
+.d-flex-flex-end,
+.d-flex-end {
+    display: flex !important;
+    justify-content: flex-end !important;
+}
+
+.d-flex-flex-start,
+.d-flex-start {
+    display: flex !important;
+    justify-content: flex-start !important;
+}
+
+.d-flex-inherit {
+    display: flex !important;
+    justify-content: inherit !important;
+}
+
+.d-flex-initial {
+    display: flex !important;
+    justify-content: initial !important;
+}
+
+.d-flex-left {
+    display: flex !important;
+    justify-content: left !important;
+}
+
+.d-flex-normal {
+    display: flex !important;
+    justify-content: normal !important;
+}
+
+.d-flex-revert {
+    display: flex !important;
+    justify-content: revert !important;
+}
+
+.d-flex-right {
+    display: flex !important;
+    justify-content: right !important;
+}
+
+.d-flex-space-around {
+    display: flex !important;
+    justify-content: space-around !important;
+}
+
+.d-flex-space-between {
+    display: flex !important;
+    justify-content: space-between !important;
+}
+
+.d-flex-space-evenly {
+    display: flex !important;
+    justify-content: space-evenly !important;
+}
+
+.d-flex-stretch {
+    display: flex !important;
+    justify-content: stretch !important;
+}
+
+.d-flex-unset {
+    display: flex !important;
+    justify-content: unset !important;
+}
+
+@media only screen and (max-width: 599px) {
+    .d-none-xs {
+        display: none !important;
+    }
+
+    .d-inline-xs {
+        display: inline !important;
+    }
+
+    .d-inline-block-xs {
+        display: inline-block !important;
+    }
+
+    .d-block-xs {
+        display: block !important;
+    }
+
+    .d-grid-xs {
+        display: grid !important;
+    }
+
+    .d-table-xs {
+        display: table !important;
+    }
+
+    .d-table-cell-xs {
+        display: table-cell !important;
+    }
+
+    .d-table-row-xs {
+        display: table-row !important;
+    }
+
+    .d-inline-flex-xs {
+        display: inline-flex !important;
+    }
+
+    .d-flex-xs {
+        display: flex !important;
+    }
+
+    .d-flex-xs-center-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .d-flex-xs-row {
+        display: flex !important;
+        flex-direction: row !important;
+    }
+
+    .d-flex-xs-column {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    .d-flex-xs-nowrap {
+        flex-wrap: nowrap !important;
+    }
+
+    .d-flex-xs-align-center {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .d-flex-xs-align-start {
+        display: flex !important;
+        align-items: flex-start !important;
+    }
+
+    .d-flex-xs-align-end {
+        display: flex !important;
+        align-items: flex-end !important;
+    }
+
+    .d-flex-xs-align-self-end {
+        align-self: flex-end !important;
+    }
+
+    .d-flex-xs-align-self-start {
+        align-self: flex-start !important;
+    }
+
+    .d-flex-xs-center {
+        display: flex !important;
+        justify-content: center !important;
+    }
+
+    .d-flex-xs-flex-end,
+    .d-flex-xs-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+    }
+
+    .d-flex-xs-flex-start,
+    .d-flex-xs-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+    }
+
+    .d-flex-xs-inherit {
+        display: flex !important;
+        justify-content: inherit !important;
+    }
+
+    .d-flex-xs-initial {
+        display: flex !important;
+        justify-content: initial !important;
+    }
+
+    .d-flex-xs-left {
+        display: flex !important;
+        justify-content: left !important;
+    }
+
+    .d-flex-xs-normal {
+        display: flex !important;
+        justify-content: normal !important;
+    }
+
+    .d-flex-xs-revert {
+        display: flex !important;
+        justify-content: revert !important;
+    }
+
+    .d-flex-xs-right {
+        display: flex !important;
+        justify-content: right !important;
+    }
+
+    .d-flex-xs-space-around {
+        display: flex !important;
+        justify-content: space-around !important;
+    }
+
+    .d-flex-xs-space-between {
+        display: flex !important;
+        justify-content: space-between !important;
+    }
+
+    .d-flex-xs-space-evenly {
+        display: flex !important;
+        justify-content: space-evenly !important;
+    }
+
+    .d-flex-xs-stretch {
+        display: flex !important;
+        justify-content: stretch !important;
+    }
+
+    .d-flex-xs-unset {
+        display: flex !important;
+        justify-content: unset !important;
+    }
+}
+
+@media only screen and (min-width: 600px) {
+    .d-none-sm {
+        display: none !important;
+    }
+
+    .d-inline-sm {
+        display: inline !important;
+    }
+
+    .d-inline-block-sm {
+        display: inline-block !important;
+    }
+
+    .d-block-sm {
+        display: block !important;
+    }
+
+    .d-grid-sm {
+        display: grid !important;
+    }
+
+    .d-table-sm {
+        display: table !important;
+    }
+
+    .d-table-cell-sm {
+        display: table-cell !important;
+    }
+
+    .d-table-row-sm {
+        display: table-row !important;
+    }
+
+    .d-inline-flex-sm {
+        display: inline-flex !important;
+    }
+
+    .d-flex-sm {
+        display: flex !important;
+    }
+
+    .d-flex-sm-center-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .d-flex-sm-row {
+        display: flex !important;
+        flex-direction: row !important;
+    }
+
+    .d-flex-sm-column {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    .d-flex-sm-nowrap {
+        flex-wrap: nowrap !important;
+    }
+
+    .d-flex-sm-align-center {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .d-flex-sm-align-start {
+        display: flex !important;
+        align-items: flex-start !important;
+    }
+
+    .d-flex-sm-align-end {
+        display: flex !important;
+        align-items: flex-end !important;
+    }
+
+    .d-flex-sm-align-self-end {
+        align-self: flex-end !important;
+    }
+
+    .d-flex-sm-align-self-start {
+        align-self: flex-start !important;
+    }
+
+    .d-flex-sm-center {
+        display: flex !important;
+        justify-content: center !important;
+    }
+
+    .d-flex-sm-flex-end,
+    .d-flex-sm-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+    }
+
+    .d-flex-sm-flex-start,
+    .d-flex-sm-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+    }
+
+    .d-flex-sm-inherit {
+        display: flex !important;
+        justify-content: inherit !important;
+    }
+
+    .d-flex-sm-initial {
+        display: flex !important;
+        justify-content: initial !important;
+    }
+
+    .d-flex-sm-left {
+        display: flex !important;
+        justify-content: left !important;
+    }
+
+    .d-flex-sm-normal {
+        display: flex !important;
+        justify-content: normal !important;
+    }
+
+    .d-flex-sm-revert {
+        display: flex !important;
+        justify-content: revert !important;
+    }
+
+    .d-flex-sm-right {
+        display: flex !important;
+        justify-content: right !important;
+    }
+
+    .d-flex-sm-space-around {
+        display: flex !important;
+        justify-content: space-around !important;
+    }
+
+    .d-flex-sm-space-between {
+        display: flex !important;
+        justify-content: space-between !important;
+    }
+
+    .d-flex-sm-space-evenly {
+        display: flex !important;
+        justify-content: space-evenly !important;
+    }
+
+    .d-flex-sm-stretch {
+        display: flex !important;
+        justify-content: stretch !important;
+    }
+
+    .d-flex-sm-unset {
+        display: flex !important;
+        justify-content: unset !important;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .d-none-md {
+        display: none !important;
+    }
+
+    .d-inline-md {
+        display: inline !important;
+    }
+
+    .d-inline-block-md {
+        display: inline-block !important;
+    }
+
+    .d-block-md {
+        display: block !important;
+    }
+
+    .d-grid-md {
+        display: grid !important;
+    }
+
+    .d-table-md {
+        display: table !important;
+    }
+
+    .d-table-cell-md {
+        display: table-cell !important;
+    }
+
+    .d-table-row-md {
+        display: table-row !important;
+    }
+
+    .d-inline-flex-md {
+        display: inline-flex !important;
+    }
+
+    .d-flex-md {
+        display: flex !important;
+    }
+
+    .d-flex-md-center-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .d-flex-md-row {
+        display: flex !important;
+        flex-direction: row !important;
+    }
+
+    .d-flex-md-column {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    .d-flex-md-nowrap {
+        flex-wrap: nowrap !important;
+    }
+
+    .d-flex-md-align-center {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .d-flex-md-align-start {
+        display: flex !important;
+        align-items: flex-start !important;
+    }
+
+    .d-flex-md-align-end {
+        display: flex !important;
+        align-items: flex-end !important;
+    }
+
+    .d-flex-md-align-self-end {
+        align-self: flex-end !important;
+    }
+
+    .d-flex-md-align-self-start {
+        align-self: flex-start !important;
+    }
+
+    .d-flex-md-center {
+        display: flex !important;
+        justify-content: center !important;
+    }
+
+    .d-flex-md-flex-end,
+    .d-flex-md-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+    }
+
+    .d-flex-md-flex-start,
+    .d-flex-md-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+    }
+
+    .d-flex-md-inherit {
+        display: flex !important;
+        justify-content: inherit !important;
+    }
+
+    .d-flex-md-initial {
+        display: flex !important;
+        justify-content: initial !important;
+    }
+
+    .d-flex-md-left {
+        display: flex !important;
+        justify-content: left !important;
+    }
+
+    .d-flex-md-normal {
+        display: flex !important;
+        justify-content: normal !important;
+    }
+
+    .d-flex-md-revert {
+        display: flex !important;
+        justify-content: revert !important;
+    }
+
+    .d-flex-md-right {
+        display: flex !important;
+        justify-content: right !important;
+    }
+
+    .d-flex-md-space-around {
+        display: flex !important;
+        justify-content: space-around !important;
+    }
+
+    .d-flex-md-space-between {
+        display: flex !important;
+        justify-content: space-between !important;
+    }
+
+    .d-flex-md-space-evenly {
+        display: flex !important;
+        justify-content: space-evenly !important;
+    }
+
+    .d-flex-md-stretch {
+        display: flex !important;
+        justify-content: stretch !important;
+    }
+
+    .d-flex-md-unset {
+        display: flex !important;
+        justify-content: unset !important;
+    }
+}
+
+@media only screen and (min-width: 1440px) {
+    .d-none-lg {
+        display: none !important;
+    }
+
+    .d-inline-lg {
+        display: inline !important;
+    }
+
+    .d-inline-block-lg {
+        display: inline-block !important;
+    }
+
+    .d-block-lg {
+        display: block !important;
+    }
+
+    .d-grid-lg {
+        display: grid !important;
+    }
+
+    .d-table-lg {
+        display: table !important;
+    }
+
+    .d-table-cell-lg {
+        display: table-cell !important;
+    }
+
+    .d-table-row-lg {
+        display: table-row !important;
+    }
+
+    .d-inline-flex-lg {
+        display: inline-flex !important;
+    }
+
+    .d-flex-lg {
+        display: flex !important;
+    }
+
+    .d-flex-lg-center-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .d-flex-lg-row {
+        display: flex !important;
+        flex-direction: row !important;
+    }
+
+    .d-flex-lg-column {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    .d-flex-lg-nowrap {
+        flex-wrap: nowrap !important;
+    }
+
+    .d-flex-lg-align-center {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .d-flex-lg-align-start {
+        display: flex !important;
+        align-items: flex-start !important;
+    }
+
+    .d-flex-lg-align-end {
+        display: flex !important;
+        align-items: flex-end !important;
+    }
+
+    .d-flex-lg-align-self-end {
+        align-self: flex-end !important;
+    }
+
+    .d-flex-lg-align-self-start {
+        align-self: flex-start !important;
+    }
+
+    .d-flex-lg-center {
+        display: flex !important;
+        justify-content: center !important;
+    }
+
+    .d-flex-lg-flex-end,
+    .d-flex-lg-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+    }
+
+    .d-flex-lg-flex-start,
+    .d-flex-lg-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+    }
+
+    .d-flex-lg-inherit {
+        display: flex !important;
+        justify-content: inherit !important;
+    }
+
+    .d-flex-lg-initial {
+        display: flex !important;
+        justify-content: initial !important;
+    }
+
+    .d-flex-lg-left {
+        display: flex !important;
+        justify-content: left !important;
+    }
+
+    .d-flex-lg-normal {
+        display: flex !important;
+        justify-content: normal !important;
+    }
+
+    .d-flex-lg-revert {
+        display: flex !important;
+        justify-content: revert !important;
+    }
+
+    .d-flex-lg-right {
+        display: flex !important;
+        justify-content: right !important;
+    }
+
+    .d-flex-lg-space-around {
+        display: flex !important;
+        justify-content: space-around !important;
+    }
+
+    .d-flex-lg-space-between {
+        display: flex !important;
+        justify-content: space-between !important;
+    }
+
+    .d-flex-lg-space-evenly {
+        display: flex !important;
+        justify-content: space-evenly !important;
+    }
+
+    .d-flex-lg-stretch {
+        display: flex !important;
+        justify-content: stretch !important;
+    }
+
+    .d-flex-lg-unset {
+        display: flex !important;
+        justify-content: unset !important;
+    }
+}
+
+@media only screen and (min-width: 1920px) {
+    .d-none-xl {
+        display: none !important;
+    }
+
+    .d-inline-xl {
+        display: inline !important;
+    }
+
+    .d-inline-block-xl {
+        display: inline-block !important;
+    }
+
+    .d-block-xl {
+        display: block !important;
+    }
+
+    .d-grid-xl {
+        display: grid !important;
+    }
+
+    .d-table-xl {
+        display: table !important;
+    }
+
+    .d-table-cell-xl {
+        display: table-cell !important;
+    }
+
+    .d-table-row-xl {
+        display: table-row !important;
+    }
+
+    .d-inline-flex-xl {
+        display: inline-flex !important;
+    }
+
+    .d-flex-xl {
+        display: flex !important;
+    }
+
+    .d-flex-xl-center-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .d-flex-xl-row {
+        display: flex !important;
+        flex-direction: row !important;
+    }
+
+    .d-flex-xl-column {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    .d-flex-xl-nowrap {
+        flex-wrap: nowrap !important;
+    }
+
+    .d-flex-xl-align-center {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .d-flex-xl-align-start {
+        display: flex !important;
+        align-items: flex-start !important;
+    }
+
+    .d-flex-xl-align-end {
+        display: flex !important;
+        align-items: flex-end !important;
+    }
+
+    .d-flex-xl-align-self-end {
+        align-self: flex-end !important;
+    }
+
+    .d-flex-xl-align-self-start {
+        align-self: flex-start !important;
+    }
+
+    .d-flex-xl-center {
+        display: flex !important;
+        justify-content: center !important;
+    }
+
+    .d-flex-xl-flex-end,
+    .d-flex-xl-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+    }
+
+    .d-flex-xl-flex-start,
+    .d-flex-xl-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+    }
+
+    .d-flex-xl-inherit {
+        display: flex !important;
+        justify-content: inherit !important;
+    }
+
+    .d-flex-xl-initial {
+        display: flex !important;
+        justify-content: initial !important;
+    }
+
+    .d-flex-xl-left {
+        display: flex !important;
+        justify-content: left !important;
+    }
+
+    .d-flex-xl-normal {
+        display: flex !important;
+        justify-content: normal !important;
+    }
+
+    .d-flex-xl-revert {
+        display: flex !important;
+        justify-content: revert !important;
+    }
+
+    .d-flex-xl-right {
+        display: flex !important;
+        justify-content: right !important;
+    }
+
+    .d-flex-xl-space-around {
+        display: flex !important;
+        justify-content: space-around !important;
+    }
+
+    .d-flex-xl-space-between {
+        display: flex !important;
+        justify-content: space-between !important;
+    }
+
+    .d-flex-xl-space-evenly {
+        display: flex !important;
+        justify-content: space-evenly !important;
+    }
+
+    .d-flex-xl-stretch {
+        display: flex !important;
+        justify-content: stretch !important;
+    }
+
+    .d-flex-xl-unset {
+        display: flex !important;
+        justify-content: unset !important;
+    }
+}
+
+.flex-grow-1 {
+    flex-grow: 1;
+    ;
+}
+
+.flex-shrink-1 {
+    flex-shrink: 1;
+    ;
+}
+
+.flex-basis-1 {
+    flex-basis: 100%;
+    ;
+}
+
+.flex-full {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 100%;
+    ;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Combo helpers
+// -----------------------------------------------------------------------------------------------------
+.combo-image-text,
+.combo-checkbox-text,
+.combo-icon-text,
+.combo-double-line {
+    display: flex;
+    align-items: center;
+}
+
+.combo-image-text .side-text,
+.combo-checkbox-text .side-text,
+.combo-icon-text .side-text,
+.combo-double-line .side-text {
+    display: inline-block;
+    width: calc(100% - 48px);
+    line-height: 20px;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: initial;
+
+    -webkit-box-orient: vertical;
+
+}
+
+.combo-image-text .avatar,
+.combo-checkbox-text .avatar,
+.combo-icon-text .avatar,
+.combo-double-line .avatar {
+    border-radius: 50px;
+    min-width: 24px;
+    min-height: 24px;
+}
+
+.one-line-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+}
+
+.two-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+}
+
+.three-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+}
+
+.four-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+}
+
+.five-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+}
+
+.one-line-text,
+.two-lines-text,
+.three-lines-text,
+.four-lines-text,
+.five-lines-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: initial;
+
+    -webkit-box-orient: vertical;
+
+}
+
+.word-break {
+    word-break: break-word
+}
+
+.word-break-all {
+    word-break: break-all
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Align
+// -----------------------------------------------------------------------------------------------------
+.text-left {
+    text-align: left !important
+}
+
+.text-center {
+    text-align: center !important
+}
+
+.text-right {
+    text-align: right !important
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Font Weight
+// -----------------------------------------------------------------------------------------------------
+.font-weight-100,
+.fw-100 {
+    font-weight: 100
+}
+
+.font-weight-200,
+.fw-200 {
+    font-weight: 200
+}
+
+.font-weight-300,
+.fw-300 {
+    font-weight: 300
+}
+
+.font-weight-400,
+.fw-400 {
+    font-weight: 400
+}
+
+.font-weight-500,
+.fw-500 {
+    font-weight: 500
+}
+
+.font-weight-600,
+.fw-600 {
+    font-weight: 600
+}
+
+.font-weight-700,
+.fw-700 {
+    font-weight: 700
+}
+
+.font-weight-800,
+.fw-800 {
+    font-weight: 800
+}
+
+.font-weight-900,
+.fw-900 {
+    font-weight: 900
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Font Size
+// -----------------------------------------------------------------------------------------------------
+.font-size-2,
+.fs-2 {
+    font-size: 2px !important
+}
+
+.font-size-4,
+.fs-4 {
+    font-size: 4px !important
+}
+
+.font-size-6,
+.fs-6 {
+    font-size: 6px !important
+}
+
+.font-size-8,
+.fs-8 {
+    font-size: 8px !important
+}
+
+.font-size-10,
+.fs-10 {
+    font-size: 10px !important
+}
+
+.font-size-12,
+.fs-12 {
+    font-size: 12px !important
+}
+
+.font-size-14,
+.fs-14 {
+    font-size: 14px !important
+}
+
+.font-size-16,
+.fs-16 {
+    font-size: 16px !important
+}
+
+.font-size-18,
+.fs-18 {
+    font-size: 18px !important
+}
+
+.font-size-20,
+.fs-20 {
+    font-size: 20px !important
+}
+
+.font-size-22,
+.fs-22 {
+    font-size: 22px !important
+}
+
+.font-size-24,
+.fs-24 {
+    font-size: 24px !important
+}
+
+.font-size-26,
+.fs-26 {
+    font-size: 26px !important
+}
+
+.font-size-28,
+.fs-28 {
+    font-size: 28px !important
+}
+
+.font-size-30,
+.fs-30 {
+    font-size: 30px !important
+}
+
+.font-size-32,
+.fs-32 {
+    font-size: 32px !important
+}
+
+.font-size-34,
+.fs-34 {
+    font-size: 34px !important
+}
+
+.font-size-36,
+.fs-36 {
+    font-size: 36px !important
+}
+
+.font-size-38,
+.fs-38 {
+    font-size: 38px !important
+}
+
+.font-size-40,
+.fs-40 {
+    font-size: 40px !important
+}
+
+.font-size-42,
+.fs-42 {
+    font-size: 42px !important
+}
+
+.font-size-44,
+.fs-44 {
+    font-size: 44px !important
+}
+
+.font-size-46,
+.fs-46 {
+    font-size: 46px !important
+}
+
+.font-size-48,
+.fs-48 {
+    font-size: 48px !important
+}
+
+.font-size-50,
+.fs-50 {
+    font-size: 50px !important
+}
+
+.font-size-52,
+.fs-52 {
+    font-size: 52px !important
+}
+
+.font-size-54,
+.fs-54 {
+    font-size: 54px !important
+}
+
+.font-size-56,
+.fs-56 {
+    font-size: 56px !important
+}
+
+.font-size-58,
+.fs-58 {
+    font-size: 58px !important
+}
+
+.font-size-60,
+.fs-60 {
+    font-size: 60px !important
+}
+
+.font-size-62,
+.fs-62 {
+    font-size: 62px !important
+}
+
+.font-size-64,
+.fs-64 {
+    font-size: 64px !important
+}
+
+.font-size-66,
+.fs-66 {
+    font-size: 66px !important
+}
+
+.font-size-68,
+.fs-68 {
+    font-size: 68px !important
+}
+
+.font-size-70,
+.fs-70 {
+    font-size: 70px !important
+}
+
+.font-size-72,
+.fs-72 {
+    font-size: 72px !important
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Line Height
+// -----------------------------------------------------------------------------------------------------
+.lh-2,
+.line-height-2 {
+    line-height: 2px !important
+}
+
+.lh-4,
+.line-height-4 {
+    line-height: 4px !important
+}
+
+.lh-6,
+.line-height-6 {
+    line-height: 6px !important
+}
+
+.lh-8,
+.line-height-8 {
+    line-height: 8px !important
+}
+
+.lh-10,
+.line-height-10 {
+    line-height: 10px !important
+}
+
+.lh-12,
+.line-height-12 {
+    line-height: 12px !important
+}
+
+.lh-14,
+.line-height-14 {
+    line-height: 14px !important
+}
+
+.lh-16,
+.line-height-16 {
+    line-height: 16px !important
+}
+
+.lh-18,
+.line-height-18 {
+    line-height: 18px !important
+}
+
+.lh-20,
+.line-height-20 {
+    line-height: 20px !important
+}
+
+.lh-22,
+.line-height-22 {
+    line-height: 22px !important
+}
+
+.lh-24,
+.line-height-24 {
+    line-height: 24px !important
+}
+
+.lh-26,
+.line-height-26 {
+    line-height: 26px !important
+}
+
+.lh-28,
+.line-height-28 {
+    line-height: 28px !important
+}
+
+.lh-30,
+.line-height-30 {
+    line-height: 30px !important
+}
+
+.lh-32,
+.line-height-32 {
+    line-height: 32px !important
+}
+
+.lh-34,
+.line-height-34 {
+    line-height: 34px !important
+}
+
+.lh-36,
+.line-height-36 {
+    line-height: 36px !important
+}
+
+.lh-38,
+.line-height-38 {
+    line-height: 38px !important
+}
+
+.lh-40,
+.line-height-40 {
+    line-height: 40px !important
+}
+
+.lh-42,
+.line-height-42 {
+    line-height: 42px !important
+}
+
+.lh-44,
+.line-height-44 {
+    line-height: 44px !important
+}
+
+.lh-46,
+.line-height-46 {
+    line-height: 46px !important
+}
+
+.lh-48,
+.line-height-48 {
+    line-height: 48px !important
+}
+
+.lh-50,
+.line-height-50 {
+    line-height: 50px !important
+}
+
+.lh-52,
+.line-height-52 {
+    line-height: 52px !important
+}
+
+.lh-54,
+.line-height-54 {
+    line-height: 54px !important
+}
+
+.lh-56,
+.line-height-56 {
+    line-height: 56px !important
+}
+
+.lh-58,
+.line-height-58 {
+    line-height: 58px !important
+}
+
+.lh-60,
+.line-height-60 {
+    line-height: 60px !important
+}
+
+.lh-62,
+.line-height-62 {
+    line-height: 62px !important
+}
+
+.lh-64,
+.line-height-64 {
+    line-height: 64px !important
+}
+
+.lh-66,
+.line-height-66 {
+    line-height: 66px !important
+}
+
+.lh-68,
+.line-height-68 {
+    line-height: 68px !important
+}
+
+.lh-70,
+.line-height-70 {
+    line-height: 70px !important
+}
+
+.lh-72,
+.line-height-72 {
+    line-height: 72px !important
+}
+
+// .line-height-1{line-height:1}
+// .line-height-1\.25{line-height:1.25}
+// .line-height-1\.5{line-height:1.5}
+// .line-height-1\.75{line-height:1.75}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Letter spacing helpers
+// -----------------------------------------------------------------------------------------------------
+.letter-spacing-condensed {
+    letter-spacing: -.08em
+}
+
+.letter-spacing-normal {
+    letter-spacing: normal
+}
+
+.letter-spacing-relaxed {
+    letter-spacing: .08em
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cursor helpers
+// -----------------------------------------------------------------------------------------------------
+.cursor-pointer {
+    cursor: pointer
+}
+
+.cursor-default {
+    cursor: default
+}
+
+.cursor-grab {
+    cursor: grab
+}
+
+.cursor-grabbing {
+    cursor: grabbing
+}
+
+.cursor-move {
+    cursor: move
+}
+
+.cursor-help {
+    cursor: help
+}
+
+.cursor-wait {
+    cursor: wait
+}
+
+.pointer-events-all {
+    pointer-events: all
+}
+
+.pointer-events-none {
+    pointer-events: none
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Clear Shadows
+// -----------------------------------------------------------------------------------------------------
+.flatten {
+    box-shadow: none !important;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Enable/Disable
+// -----------------------------------------------------------------------------------------------------
+.disabled {
+    transition: opacity 100ms linear;
+    opacity: .5;
+    pointer-events: none
+}
+
+.enabled {
+    transition: opacity 100ms linear;
+    opacity: 1
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Opacity
+// -----------------------------------------------------------------------------------------------------
+/* <integer> values */
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-01 {
+    opacity: 0.1;
+}
+
+.opacity-02 {
+    opacity: 0.2;
+}
+
+.opacity-03 {
+    opacity: 0.3;
+}
+
+.opacity-04 {
+    opacity: 0.4;
+}
+
+.opacity-05 {
+    opacity: 0.5;
+}
+
+.opacity-06 {
+    opacity: 0.6;
+}
+
+.opacity-07 {
+    opacity: 0.7;
+}
+
+.opacity-08 {
+    opacity: 0.8;
+}
+
+.opacity-09 {
+    opacity: 0.9;
+}
+
+.opacity-10,
+.opacity-1 {
+    opacity: 1.0;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Hover - Show/Hide
+// -----------------------------------------------------------------------------------------------------
+.on-hover-show:hover {
+    opacity: 1;
+}
+
+.on-hover-hide:hover {
+    opacity: 0;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Transition
+// write mixin using the time tokens
+// -----------------------------------------------------------------------------------------------------
+.ts-100-l {
+    transition: all 100ms linear;
+}
+
+.ts-300-l {
+    transition: all 300ms linear;
+}
+
+.ts-100-ei {
+    transition: all 100ms ease-in;
+}
+
+.ts-300-ei {
+    transition: all 300ms ease-in;
+}
+
+.ts-100-eo {
+    transition: all 100ms ease-out;
+}
+
+.ts-300-eo {
+    transition: all 300ms ease-out;
+}
+
+.ts-100-eio {
+    transition: all 100ms ease-in-out;
+}
+
+.ts-300-eio {
+    transition: all 300ms ease-in-out;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Rotate Animation
+// -----------------------------------------------------------------------------------------------------
+.rotate-infinity-1s {
+    animation: spin 1s infinite;
+}
+
+.rotate-infinity-2s {
+    animation: spin 2s infinite;
+}
+
+.rotate-infinity-3s {
+    animation: spin 3s infinite;
+}
+
+@keyframes spin {
+    0% {
+        rotate: 0deg;
+    }
+
+    100% {
+        rotate: 360deg;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Float
+// -----------------------------------------------------------------------------------------------------
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.list,
+.list-style-none {
+    list-style: none;
+}
+
+.list-style-disc,
+.list-style-dot {
+    list-style: disc;
+}