maz-ui 2.3.11 → 3.0.0-beta.12

package/css/main.css

@@ -0,0 +1,1454 @@
+*,
+::before,
+::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+/* Color palette generate with https://noeldelgado.github.io/shadowlord/#002b6f and 17,5% parameter */
+
+:root {
+  /* PRIMARY */
+  --maz-color-primary-50: #e3f1ff;
+  --maz-color-primary-100: #bcdeff;
+  --maz-color-primary-200: #94caff;
+  --maz-color-primary-300: #6db7ff;
+  --maz-color-primary-400: #45a3ff;
+  --maz-color-primary: #1e90ff;
+  --maz-color-primary-600: #1977d2;
+  --maz-color-primary-700: #145ea6;
+  --maz-color-primary-800: #0e4479;
+  --maz-color-primary-900: #092b4d;
+  --maz-color-primary-contrast: white;
+  --maz-color-primary-alpha: rgb(30 144 255 / 60%);
+  /* SECONDARY */
+  --maz-color-secondary-50: #e3f9f3;
+  --maz-color-secondary-100: #bbf1e3;
+  --maz-color-secondary-200: #93e9d2;
+  --maz-color-secondary-300: #6be1c2;
+  --maz-color-secondary-400: #44d9b1;
+  --maz-color-secondary: #1cd1a1;
+  --maz-color-secondary-600: #17ac85;
+  --maz-color-secondary-700: #128869;
+  --maz-color-secondary-800: #0d634c;
+  --maz-color-secondary-900: #083f30;
+  --maz-color-secondary-contrast: white;
+  --maz-color-secondary-alpha: rgb(28 209 161 / 60%);
+  /* INFO */
+  --maz-color-info-50: #e2f3f6;
+  --maz-color-info-100: #b9e3ea;
+  --maz-color-info-200: #91d3dd;
+  --maz-color-info-300: #68c3d1;
+  --maz-color-info-400: #40b2c4;
+  --maz-color-info: #17a2b8;
+  --maz-color-info-600: #138698;
+  --maz-color-info-700: #0f6978;
+  --maz-color-info-800: #0b4d57;
+  --maz-color-info-900: #073137;
+  --maz-color-info-contrast: white;
+  --maz-color-info-alpha: rgb(23 162 184 / 60%);
+  /* SUCCESS */
+  --maz-color-success-50: #f2f9e5;
+  --maz-color-success-100: #e1f0c2;
+  --maz-color-success-200: #cfe79e;
+  --maz-color-success-300: #bddf7a;
+  --maz-color-success-400: #acd656;
+  --maz-color-success: #9acd32;
+  --maz-color-success-600: #7fa929;
+  --maz-color-success-700: #648521;
+  --maz-color-success-800: #496118;
+  --maz-color-success-900: #2e3e0f;
+  --maz-color-success-contrast: white;
+  --maz-color-success-alpha: rgb(154 205 50 / 60%);
+  /* WARNING */
+  --maz-color-warning-50: #fff6e5;
+  --maz-color-warning-100: #fee9c1;
+  --maz-color-warning-200: #fedd9d;
+  --maz-color-warning-300: #fdd079;
+  --maz-color-warning-400: #fdc455;
+  --maz-color-warning: #fcb731;
+  --maz-color-warning-600: #d09728;
+  --maz-color-warning-700: #a47720;
+  --maz-color-warning-800: #785717;
+  --maz-color-warning-900: #4c370f;
+  --maz-color-warning-contrast: #374151;
+  --maz-color-warning-alpha: rgb(252 183 49 / 60%);
+  /* DANGER */
+  --maz-color-danger-50: #ffedec;
+  --maz-color-danger-100: #ffd3d2;
+  --maz-color-danger-200: #ffbab8;
+  --maz-color-danger-300: #ffa09e;
+  --maz-color-danger-400: #ff8784;
+  --maz-color-danger: #ff6d6a;
+  --maz-color-danger-600: #d25a57;
+  --maz-color-danger-700: #a64745;
+  --maz-color-danger-800: #793432;
+  --maz-color-danger-900: #4d2120;
+  --maz-color-danger-contrast: white;
+  --maz-color-danger-alpha: rgb(255 109 106 / 60%);
+  /* WHITE */
+  --maz-color-white: white;
+  --maz-color-white-contrast: black;
+  /* BLACK */
+  --maz-color-black: black;
+  --maz-color-black-contrast: white;
+  /* FONT FAMILY */
+  --maz-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+  /* USAGE */
+  --maz-color-normal-text: #2c3e50;
+  --maz-color-bg: white;
+  --maz-color-bg-light: #e5e5e5;
+  --maz-color-bg-lighter: #f2f2f2;
+  --maz-color-muted: rgb(0 0 0 / 54%);
+}
+
+html.dark {
+  /* USAGE */
+  --maz-color-normal-text: #adbac7;
+  --maz-color-bg: #21222e;
+  --maz-color-bg-light: #303144;
+  --maz-color-bg-lighter: #3b3c53;
+  --maz-color-muted: rgb(255 255 255 / 54%);
+}
+
+:root {
+  --maz-container-padding-mobile: 1rem;
+  --maz-container-padding-tablet: 2rem;
+  --maz-container-padding-desktop: 2.5rem;
+  --maz-container-padding-value: var(--maz-container-padding-mobile);
+  --maz-container-width: calc(100% - var(--maz-container-padding-value) * 2);
+  --maz-container-padding: calc(50% - var(--maz-container-width) / 2);
+  --maz-container-max-width: var(--maz-screen-lap-xl);
+}
+
+/* .maz-padded-container {
+  width: 100%;
+  padding-left: var(--maz-container-padding);
+  padding-right: var(--maz-container-padding);
+
+  &.-no-p {
+    padding-left: calc(50% - var(--maz-container-max-width) / 2);
+    padding-right: calc(50% - var(--maz-container-max-width) / 2);
+  }
+} */
+
+/*
+  Info: 2.5rem = 40px
+  ---
+  1520px = max-width + (padding-desktop * 2)
+  1520px = 1440px + (2.5rem * 2)
+*/
+
+@media only screen and (min-width: 1520px) {
+  :root {
+    --maz-container-width: var(--maz-container-max-width);
+  }
+}
+
+@media (min-width: 576px) {
+  :root {
+    --maz-container-padding-value: var(--maz-container-padding-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --maz-container-padding-value: var(--maz-container-padding-desktop);
+  }
+}
+
+.maz-scale-enter-active,
+.maz-scale-leave-active {
+  opacity: 1;
+  z-index: 1;
+  -webkit-transition: all 300ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  transition: all 300ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+}
+
+.maz-scale-enter-from,
+.maz-scale-leave-to {
+  opacity: 0.4;
+  z-index: 1;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+.maz-scale-fade-enter-active,
+.maz-scale-fade-leave-active {
+  opacity: 1;
+  z-index: 1;
+  -webkit-transition: all 200ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  transition: all 200ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+}
+
+.maz-scale-fade-enter-from,
+.maz-scale-fade-leave-to {
+  opacity: 0;
+  z-index: 1;
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+}
+
+.maz-scale-loading-enter-active,
+.maz-scale-loading-leave-active {
+  -webkit-transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  opacity: 1;
+}
+
+.maz-scale-loading-enter-active .app-loader__content,
+.maz-scale-loading-leave-active .app-loader__content {
+  opacity: 1;
+  z-index: 1;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+}
+
+.maz-scale-loading-enter-from .app-loader__content,
+.maz-scale-loading-leave-to .app-loader__content {
+  opacity: 0.4;
+  z-index: 1;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+.maz-scale-loading-enter-from,
+.maz-scale-loading-leave-to {
+  -webkit-transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  opacity: 0;
+}
+
+/** Slide vertical animation  **/
+
+.maz-slidevnext-leave-active,
+.maz-slidevnext-enter-active,
+.maz-slidevprev-leave-active,
+.maz-slidevprev-enter-active {
+  position: absolute;
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+}
+
+.maz-slidevnext-enter-from,
+.maz-slidevprev-leave-to {
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+  opacity: 0;
+}
+
+.maz-slidevnext-leave-to,
+.maz-slidevprev-enter-from {
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+  opacity: 0;
+}
+
+.maz-slide-enter-active,
+.maz-slide-leave-active {
+  opacity: 1;
+  z-index: 998;
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+
+.maz-slide-enter-from,
+.maz-slide-leave-to {
+  opacity: 0;
+  z-index: 998;
+  -webkit-transform: translateY(-20px);
+          transform: translateY(-20px);
+}
+
+/** Slide animation **/
+
+.maz-slideinvert-enter-active,
+.maz-slideinvert-leave-active {
+  opacity: 1;
+  z-index: 998;
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+
+.maz-slideinvert-enter-from,
+.maz-slideinvert-leave-to {
+  opacity: 0;
+  z-index: 998;
+  -webkit-transform: translateY(40px);
+          transform: translateY(40px);
+}
+
+.maz-tags-enter-active,
+.maz-tags-leave-active {
+  opacity: 1;
+  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
+  transition: opacity 300ms, -webkit-transform 300ms;
+  transition: transform 300ms, opacity 300ms;
+  transition: transform 300ms, opacity 300ms, -webkit-transform 300ms;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+
+.maz-tags-enter-from,
+.maz-tags-leave-to {
+  opacity: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+
+.maz-tags-invert-enter-active,
+.maz-tags-invert-leave-active {
+  opacity: 1;
+  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
+  transition: opacity 300ms, -webkit-transform 300ms;
+  transition: transform 300ms, opacity 300ms;
+  transition: transform 300ms, opacity 300ms, -webkit-transform 300ms;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+
+.maz-tags-invert-enter-from,
+.maz-tags-invert-leave-to {
+  opacity: 0;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+
+.maz-expand-enter-active,
+.maz-expand-leave-active {
+  -webkit-transition: 300ms ease-in-out;
+  transition: 300ms ease-in-out;
+  -webkit-transition-property: opacity, height;
+  transition-property: opacity, height;
+  overflow: hidden;
+}
+
+.maz-expand-enter-from,
+.maz-expand-leave-to {
+  height: 0;
+  opacity: 0;
+}
+
+/**
+* Tabs Transisiton
+*/
+
+.maz-tab-transition-enter-from {
+  -webkit-transform: translate(100%, 0);
+          transform: translate(100%, 0);
+}
+
+.maz-tab-transition-leave,
+.maz-tab-transition-leave-active {
+  position: absolute !important;
+  top: 0;
+}
+
+.maz-tab-transition-leave-to {
+  position: absolute !important;
+  -webkit-transform: translate(-100%, 0);
+          transform: translate(-100%, 0);
+}
+
+.maz-tab-reverse-transition-enter-from {
+  -webkit-transform: translate(-100%, 0);
+          transform: translate(-100%, 0);
+}
+
+.maz-tab-reverse-transition-enter-from-leave,
+.maz-tab-reverse-transition-enter-from-leave-to {
+  top: 0;
+  position: absolute !important;
+  -webkit-transform: translate(100%, 0);
+          transform: translate(100%, 0);
+}
+
+.maz-bottom-sheet-enter-active .maz-bottom-sheet-animation,
+.maz-bottom-sheet-leave .maz-bottom-sheet-animation {
+  opacity: 1;
+  -webkit-transition: all 300ms;
+  transition: all 300ms;
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+
+.maz-bottom-sheet-enter .maz-bottom-sheet-animation,
+.maz-bottom-sheet-leave-to .maz-bottom-sheet-animatio {
+  opacity: 1;
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
+
+*, ::before, ::after {
+  --tw-border-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+
+:root {
+  --maz-screen-sm: 640px;
+  --maz-screen-md: 768px;
+  --maz-screen-lg: 1024px;
+  --maz-screen-xl: 1280px;
+  --maz-screen-2xl: 1536px;
+  --maz-screen-mob-s: 320px;
+  --maz-screen-mob-m: 425px;
+  --maz-screen-mob-l: 576px;
+  --maz-screen-tab-s: 640px;
+  --maz-screen-tab-m: 768px;
+  --maz-screen-tab-l: 992px;
+  --maz-screen-lap-s: 1024px;
+  --maz-screen-lap-m: 1280px;
+  --maz-screen-lap-l: 1366px;
+  --maz-screen-lap-xl: 1440px;
+  --maz-screen-lap-2xl: 1680px;
+  --maz-screen-lap-3xl: 1920px;
+}
+
+.maz-pointer-events-none {
+  pointer-events: none;
+}
+
+.maz-fixed {
+  position: fixed;
+}
+
+.maz-absolute {
+  position: absolute;
+}
+
+.maz-relative {
+  position: relative;
+}
+
+.maz-inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.maz-top-0 {
+  top: 0px;
+}
+
+.maz-top-4 {
+  top: 1rem;
+}
+
+.maz--top-1\/2 {
+  top: -50%;
+}
+
+.maz-bottom-0 {
+  bottom: 0px;
+}
+
+.maz-left-0 {
+  left: 0px;
+}
+
+.maz-left-4 {
+  left: 1rem;
+}
+
+.maz-z-0 {
+  z-index: 0;
+}
+
+.maz-z-1 {
+  z-index: 1;
+}
+
+.maz-z-20 {
+  z-index: 20;
+}
+
+.maz-z-100 {
+  z-index: 100;
+}
+
+.maz-m-0 {
+  margin: 0px;
+}
+
+.maz-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.maz-my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.maz-my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.maz-mt-2 {
+  margin-top: 0.5rem;
+}
+
+.maz-mt-4 {
+  margin-top: 1rem;
+}
+
+.maz-mr-2 {
+  margin-right: 0.5rem;
+}
+
+.maz--mr-1 {
+  margin-right: -0.25rem;
+}
+
+.maz-mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.maz-mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.maz-ml-2 {
+  margin-left: 0.5rem;
+}
+
+.maz--ml-1 {
+  margin-left: -0.25rem;
+}
+
+.maz-block {
+  display: block;
+}
+
+.maz-flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.maz-inline-flex {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.maz-hidden {
+  display: none;
+}
+
+.maz-h-5 {
+  height: 1.25rem;
+}
+
+.maz-h-6 {
+  height: 1.5rem;
+}
+
+.maz-h-9 {
+  height: 2.25rem;
+}
+
+.maz-h-12 {
+  height: 3rem;
+}
+
+.maz-h-auto {
+  height: auto;
+}
+
+.maz-h-1\/2 {
+  height: 50%;
+}
+
+.maz-h-full {
+  height: 100%;
+}
+
+.maz-max-h-full {
+  max-height: 100%;
+}
+
+.maz-min-h-0 {
+  min-height: 0px;
+}
+
+.maz-w-0 {
+  width: 0px;
+}
+
+.maz-w-5 {
+  width: 1.25rem;
+}
+
+.maz-w-6 {
+  width: 1.5rem;
+}
+
+.maz-w-9 {
+  width: 2.25rem;
+}
+
+.maz-w-10 {
+  width: 2.5rem;
+}
+
+.maz-w-12 {
+  width: 3rem;
+}
+
+.maz-w-full {
+  width: 100%;
+}
+
+.maz-w-min {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+}
+
+.maz-w-max {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.maz-min-w-0 {
+  min-width: 0px;
+}
+
+.maz-max-w-min {
+  max-width: -webkit-min-content;
+  max-width: -moz-min-content;
+  max-width: min-content;
+}
+
+.maz-flex-1 {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
+}
+
+.maz-flex-none {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+}
+
+.maz-flex-shrink-0 {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+
+.maz-origin-top-left {
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+}
+
+.maz-rotate-0 {
+  --tw-rotate: 0deg;
+}
+
+.maz-scale-0 {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+}
+
+.maz-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+}
+
+@-webkit-keyframes maz-spin {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes maz-spin {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes maz-ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes maz-ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes maz-pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes maz-pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@-webkit-keyframes maz-bounce {
+  0%, 100% {
+    -webkit-transform: translateY(-25%);
+            transform: translateY(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    -webkit-transform: none;
+            transform: none;
+    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+@keyframes maz-bounce {
+  0%, 100% {
+    -webkit-transform: translateY(-25%);
+            transform: translateY(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    -webkit-transform: none;
+            transform: none;
+    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.maz-animate-spin {
+  -webkit-animation: maz-spin 1s linear infinite;
+          animation: maz-spin 1s linear infinite;
+}
+
+.maz-cursor-pointer {
+  cursor: pointer;
+}
+
+.maz-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.maz-appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.maz-flex-col {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.maz-flex-wrap {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.maz-items-start {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+
+.maz-items-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.maz-justify-end {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+.maz-justify-center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.maz-justify-between {
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.maz-space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.maz-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.maz-overflow-auto {
+  overflow: auto;
+}
+
+.maz-overflow-hidden {
+  overflow: hidden;
+}
+
+.maz-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.maz-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.maz-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.maz-rounded {
+  border-radius: 0.25rem;
+}
+
+.maz-rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.maz-rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.maz-rounded-full {
+  border-radius: 9999px;
+}
+
+.maz-rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+
+.maz-border-2 {
+  border-width: 2px;
+}
+
+.maz-border {
+  border-width: 2px;
+}
+
+.maz-border-t-2 {
+  border-top-width: 2px;
+}
+
+.maz-border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.maz-border-l-2 {
+  border-left-width: 2px;
+}
+
+.maz-border-solid {
+  border-style: solid;
+}
+
+.maz-border-dashed {
+  border-style: dashed;
+}
+
+.maz-border-none {
+  border-style: none;
+}
+
+.maz-border-transparent {
+  border-color: transparent;
+}
+
+.maz-border-black {
+  border-color: var(--maz-color-black);
+}
+
+.maz-border-white {
+  border-color: var(--maz-color-white);
+}
+
+.maz-border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
+}
+
+.maz-border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+
+.maz-border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+}
+
+.maz-border-color {
+  border-color: var(--maz-color-bg);
+}
+
+.maz-border-color-light {
+  border-color: var(--maz-color-bg-light);
+}
+
+.maz-border-color-lighter {
+  border-color: var(--maz-color-bg-lighter);
+}
+
+.maz-border-primary-100 {
+  border-color: var(--maz-color-primary-100);
+}
+
+.maz-border-primary {
+  border-color: var(--maz-color-primary);
+}
+
+.maz-border-secondary-100 {
+  border-color: var(--maz-color-secondary-100);
+}
+
+.maz-border-secondary {
+  border-color: var(--maz-color-secondary);
+}
+
+.maz-border-info {
+  border-color: var(--maz-color-info);
+}
+
+.maz-border-success-100 {
+  border-color: var(--maz-color-success-100);
+}
+
+.maz-border-success {
+  border-color: var(--maz-color-success);
+}
+
+.maz-border-warning-100 {
+  border-color: var(--maz-color-warning-100);
+}
+
+.maz-border-warning {
+  border-color: var(--maz-color-warning);
+}
+
+.maz-border-danger-100 {
+  border-color: var(--maz-color-danger-100);
+}
+
+.maz-border-danger {
+  border-color: var(--maz-color-danger);
+}
+
+.maz-bg-transparent {
+  background-color: transparent;
+}
+
+.maz-bg-black {
+  background-color: var(--maz-color-black);
+}
+
+.maz-bg-white {
+  background-color: var(--maz-color-white);
+}
+
+.maz-bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
+.maz-bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+
+.maz-bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+}
+
+.maz-bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
+}
+
+.maz-bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+
+.maz-bg-color {
+  background-color: var(--maz-color-bg);
+}
+
+.maz-bg-color-light {
+  background-color: var(--maz-color-bg-light);
+}
+
+.maz-bg-primary-50 {
+  background-color: var(--maz-color-primary-50);
+}
+
+.maz-bg-primary-100 {
+  background-color: var(--maz-color-primary-100);
+}
+
+.maz-bg-primary {
+  background-color: var(--maz-color-primary);
+}
+
+.maz-bg-secondary-50 {
+  background-color: var(--maz-color-secondary-50);
+}
+
+.maz-bg-secondary-100 {
+  background-color: var(--maz-color-secondary-100);
+}
+
+.maz-bg-secondary {
+  background-color: var(--maz-color-secondary);
+}
+
+.maz-bg-info-50 {
+  background-color: var(--maz-color-info-50);
+}
+
+.maz-bg-info {
+  background-color: var(--maz-color-info);
+}
+
+.maz-bg-success-50 {
+  background-color: var(--maz-color-success-50);
+}
+
+.maz-bg-success-100 {
+  background-color: var(--maz-color-success-100);
+}
+
+.maz-bg-success {
+  background-color: var(--maz-color-success);
+}
+
+.maz-bg-warning-50 {
+  background-color: var(--maz-color-warning-50);
+}
+
+.maz-bg-warning-100 {
+  background-color: var(--maz-color-warning-100);
+}
+
+.maz-bg-warning {
+  background-color: var(--maz-color-warning);
+}
+
+.maz-bg-danger-50 {
+  background-color: var(--maz-color-danger-50);
+}
+
+.maz-bg-danger-100 {
+  background-color: var(--maz-color-danger-100);
+}
+
+.maz-bg-danger {
+  background-color: var(--maz-color-danger);
+}
+
+.maz-bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.maz-fill-current {
+  fill: currentColor;
+}
+
+.maz-p-2 {
+  padding: 0.5rem;
+}
+
+.maz-p-3 {
+  padding: 0.75rem;
+}
+
+.maz-p-4 {
+  padding: 1rem;
+}
+
+.maz-px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.maz-px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.maz-px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.maz-px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.maz-px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.maz-px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.maz-px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.maz-py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.maz-py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.maz-py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.maz-py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.maz-py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.maz-py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.maz-pt-2 {
+  padding-top: 0.5rem;
+}
+
+.maz-pl-3 {
+  padding-left: 0.75rem;
+}
+
+.maz-pl-6 {
+  padding-left: 1.5rem;
+}
+
+.maz-pl-11 {
+  padding-left: 2.75rem;
+}
+
+.maz-text-left {
+  text-align: left;
+}
+
+.maz-text-center {
+  text-align: center;
+}
+
+.maz-text-right {
+  text-align: right;
+}
+
+.maz-font-base {
+  font-family: var(--maz-font-family);
+}
+
+.maz-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.maz-text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.maz-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.maz-text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.maz-font-medium {
+  font-weight: 500;
+}
+
+.maz-font-semibold {
+  font-weight: 600;
+}
+
+.maz-capitalize {
+  text-transform: capitalize;
+}
+
+.maz-leading-10 {
+  line-height: 2.5rem;
+}
+
+.maz-text-white {
+  color: var(--maz-color-white);
+}
+
+.maz-text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
+}
+
+.maz-text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
+.maz-text-normal-text {
+  color: var(--maz-color-normal-text);
+}
+
+.maz-text-primary {
+  color: var(--maz-color-primary);
+}
+
+.maz-text-success-600 {
+  color: var(--maz-color-success-600);
+}
+
+.maz-text-warning-600 {
+  color: var(--maz-color-warning-600);
+}
+
+.maz-text-danger-600 {
+  color: var(--maz-color-danger-600);
+}
+
+.maz-no-underline {
+  text-decoration: none;
+}
+
+.maz-opacity-0 {
+  opacity: 0;
+}
+
+.maz-opacity-100 {
+  opacity: 1;
+}
+
+*, ::before, ::after {
+  --tw-shadow: 0 0 #0000;
+}
+
+.maz-shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.maz-outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:maz-outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+*, ::before, ::after {
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+
+.maz-drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+}
+
+.maz-transition-all {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+
+.maz-transition {
+  -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+
+.maz-transition-colors {
+  -webkit-transition-property: background-color, border-color, color, fill, stroke;
+  transition-property: background-color, border-color, color, fill, stroke;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+
+.maz-transition-transform {
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+
+.maz-duration-200 {
+  -webkit-transition-duration: 200ms;
+          transition-duration: 200ms;
+}
+
+.maz-duration-300 {
+  -webkit-transition-duration: 300ms;
+          transition-duration: 300ms;
+}
+
+.maz-duration-500 {
+  -webkit-transition-duration: 500ms;
+          transition-duration: 500ms;
+}
+
+.maz-padded-container {
+  width: 100%;
+  padding-left: var(--maz-container-padding);
+  padding-right: var(--maz-container-padding);
+}
+
+.maz-bg-overlay {
+  background-color: rgba(86, 87, 117, 0.7);
+}
+
+.maz-elevation {
+  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
+          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
+}
+
+.maz-text-muted {
+  color: var(--maz-color-muted);
+}
+
+.maz-flex-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+@media (min-width: 640px) {
+}
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 1024px) {
+}
+
+@media (min-width: 1280px) {
+}
+
+@media (min-width: 1536px) {
+}
+
+@media (min-width: 320px) {
+}
+
+@media (min-width: 425px) {
+}
+
+@media (min-width: 576px) {
+}
+
+@media (min-width: 640px) {
+}
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 992px) {
+}
+
+@media (min-width: 1024px) {
+}
+
+@media (min-width: 1280px) {
+}
+
+@media (min-width: 1366px) {
+}
+
+@media (min-width: 1440px) {
+}
+
+@media (min-width: 1680px) {
+}
+
+@media (min-width: 1920px) {
+}